@cqa-lib/cqa-ui 1.1.123 → 1.1.124

package/esm2020/lib/error-modal/error-modal.component.mjs

@@ -1,8 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/material/icon";
-import * as i2 from "../button/button.component";
-import * as i3 from "@angular/common";
+import * as i1 from "../button/button.component";
+import * as i2 from "@angular/common";
 export class ErrorModalComponent {
     constructor() {
         this.isOpen = false;
@@ -39,16 +38,24 @@ export class ErrorModalComponent {
     get hasTimingData() {
         return !!(this.totalSteps || this.totalTime || this.appTime || this.toolTime);
     }
+    getNonTextButtons() {
+        return this.buttons.filter(button => button.variant !== 'text');
+    }
+    getTextButtons() {
+        return this.buttons.filter(button => button.variant === 'text');
+    }
 }
 ErrorModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ErrorModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ErrorModalComponent, selector: "cqa-error-modal", inputs: { isOpen: "isOpen", title: "title", errorMessage: "errorMessage", totalSteps: "totalSteps", completedSteps: "completedSteps", totalTime: "totalTime", appTime: "appTime", toolTime: "toolTime", buttons: "buttons" }, 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-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2\"\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 class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-[93px] cqa-h-[93px] cqa-rounded-full cqa-bg-[#F9BFBF]\" style=\"border: 8px solid #FCD9D9;\">\n        <mat-icon class=\"cqa-text-[#EE3F3F]\" style=\"font-size: 48px; width: 48px; height: 48px;\">\n          error\n        </mat-icon>\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 *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 -->\n    <div *ngIf=\"errorMessage\" class=\"cqa-my-4 cqa-p-[17px] cqa-rounded-[10px] cqa-bg-[#FEF2F2]\"\n      style=\"border: 1px solid #FECACA;\">\n      <div class=\"cqa-text-[12px] cqa-text-[#B91C1C] 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 -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n      <ng-container *ngFor=\"let button of buttons; let i = index\">\n        <cqa-button [variant]=\"button.variant\" [text]=\"button.label\" [icon]=\"button.icon\"\n          [btnSize]=\"button.btnSize || 'lg'\" [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n          (clicked)=\"onButtonClick(button)\">\n        </cqa-button>\n      </ng-container>\n    </div>\n  </div>\n</div>", 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+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" }, 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-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2\"\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 -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n      <ng-container *ngFor=\"let button of buttons; let i = index\">\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>", 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ErrorModalComponent, decorators: [{
             type: Component,
-            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-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2\"\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 class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-[93px] cqa-h-[93px] cqa-rounded-full cqa-bg-[#F9BFBF]\" style=\"border: 8px solid #FCD9D9;\">\n        <mat-icon class=\"cqa-text-[#EE3F3F]\" style=\"font-size: 48px; width: 48px; height: 48px;\">\n          error\n        </mat-icon>\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 *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 -->\n    <div *ngIf=\"errorMessage\" class=\"cqa-my-4 cqa-p-[17px] cqa-rounded-[10px] cqa-bg-[#FEF2F2]\"\n      style=\"border: 1px solid #FECACA;\">\n      <div class=\"cqa-text-[12px] cqa-text-[#B91C1C] 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 -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n      <ng-container *ngFor=\"let button of buttons; let i = index\">\n        <cqa-button [variant]=\"button.variant\" [text]=\"button.label\" [icon]=\"button.icon\"\n          [btnSize]=\"button.btnSize || 'lg'\" [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n          (clicked)=\"onButtonClick(button)\">\n        </cqa-button>\n      </ng-container>\n    </div>\n  </div>\n</div>", styles: [] }]
+            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-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2\"\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 -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n      <ng-container *ngFor=\"let button of buttons; let i = index\">\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>", styles: [] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], title: [{
                 type: Input
+            }], instructionalMessage: [{
+                type: Input
             }], errorMessage: [{
                 type: Input
             }], totalSteps: [{
@@ -68,4 +75,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }], closeModal: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXJyb3ItbW9kYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9lcnJvci1tb2RhbC9lcnJvci1tb2RhbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2Vycm9yLW1vZGFsL2Vycm9yLW1vZGFsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBaUJ2RSxNQUFNLE9BQU8sbUJBQW1CO0lBTGhDO1FBTVcsV0FBTSxHQUFZLEtBQUssQ0FBQztRQUN4QixVQUFLLEdBQVcsT0FBTyxDQUFDO1FBQ3hCLGlCQUFZLEdBQVcsRUFBRSxDQUFDO1FBQzFCLGVBQVUsR0FBVyxDQUFDLENBQUM7UUFDdkIsbUJBQWMsR0FBVyxDQUFDLENBQUM7UUFDM0IsY0FBUyxHQUFXLEVBQUUsQ0FBQztRQUN2QixZQUFPLEdBQVcsRUFBRSxDQUFDO1FBQ3JCLGFBQVEsR0FBVyxFQUFFLENBQUM7UUFDdEIsWUFBTyxHQUF1QixFQUFFLENBQUM7UUFFaEMsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBQ3pDLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0tBOEJqRDtJQTVCQyxlQUFlLENBQUMsS0FBaUI7UUFDL0IsTUFBTSxNQUFNLEdBQUcsS0FBSyxDQUFDLE1BQXFCLENBQUM7UUFDM0MsTUFBTSxhQUFhLEdBQUcsS0FBSyxDQUFDLGFBQTRCLENBQUM7UUFFekQsSUFBSSxNQUFNLEtBQUssYUFBYSxJQUFJLE1BQU0sQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLGdCQUFnQixDQUFDLEVBQUU7WUFDM0UsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1NBQ2hCO0lBQ0gsQ0FBQztJQUVELGFBQWEsQ0FBQyxNQUF3QjtRQUNwQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDdkMsQ0FBQztJQUVELE9BQU87UUFDTCxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxJQUFJLG9CQUFvQjtRQUN0QixPQUFPLG9CQUFvQixDQUFDO0lBQzlCLENBQUM7SUFFRCxJQUFJLGdCQUFnQjtRQUNsQixPQUFPLFNBQVMsQ0FBQztJQUNuQixDQUFDO0lBRUQsSUFBSSxhQUFhO1FBQ2YsT0FBTyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDLE9BQU8sSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDaEYsQ0FBQzs7Z0hBekNVLG1CQUFtQjtvR0FBbkIsbUJBQW1CLHdWQ2pCaEMsKzRHQXdFTTsyRkR2RE8sbUJBQW1CO2tCQUwvQixTQUFTOytCQUNFLGlCQUFpQjs4QkFLbEIsTUFBTTtzQkFBZCxLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFFSSxXQUFXO3NCQUFwQixNQUFNO2dCQUNHLFVBQVU7c0JBQW5CLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQnV0dG9uVmFyaWFudCB9IGZyb20gJy4uL2J1dHRvbi9idXR0b24uY29tcG9uZW50JztcblxuZXhwb3J0IGludGVyZmFjZSBFcnJvck1vZGFsQnV0dG9uIHtcbiAgbGFiZWw6IHN0cmluZztcbiAgdmFyaWFudDogQnV0dG9uVmFyaWFudDtcbiAgaWNvbj86IHN0cmluZztcbiAgYWN0aW9uOiBzdHJpbmc7XG4gIGJ0blNpemU/OiAnc20nIHwgJ21kJyB8ICdsZyc7XG4gIGZ1bGxXaWR0aD86IGJvb2xlYW47XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NxYS1lcnJvci1tb2RhbCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9lcnJvci1tb2RhbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogW11cbn0pXG5leHBvcnQgY2xhc3MgRXJyb3JNb2RhbENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGlzT3BlbjogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nID0gJ0Vycm9yJztcbiAgQElucHV0KCkgZXJyb3JNZXNzYWdlOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgdG90YWxTdGVwczogbnVtYmVyID0gMDtcbiAgQElucHV0KCkgY29tcGxldGVkU3RlcHM6IG51bWJlciA9IDA7XG4gIEBJbnB1dCgpIHRvdGFsVGltZTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGFwcFRpbWU6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSB0b29sVGltZTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGJ1dHRvbnM6IEVycm9yTW9kYWxCdXR0b25bXSA9IFtdO1xuXG4gIEBPdXRwdXQoKSBidXR0b25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuICBAT3V0cHV0KCkgY2xvc2VNb2RhbCA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBvbkJhY2tkcm9wQ2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCB0YXJnZXQgPSBldmVudC50YXJnZXQgYXMgSFRNTEVsZW1lbnQ7XG4gICAgY29uc3QgY3VycmVudFRhcmdldCA9IGV2ZW50LmN1cnJlbnRUYXJnZXQgYXMgSFRNTEVsZW1lbnQ7XG4gICAgXG4gICAgaWYgKHRhcmdldCA9PT0gY3VycmVudFRhcmdldCB8fCB0YXJnZXQuY2xhc3NMaXN0LmNvbnRhaW5zKCdtb2RhbC1iYWNrZHJvcCcpKSB7XG4gICAgICB0aGlzLm9uQ2xvc2UoKTtcbiAgICB9XG4gIH1cblxuICBvbkJ1dHRvbkNsaWNrKGJ1dHRvbjogRXJyb3JNb2RhbEJ1dHRvbik6IHZvaWQge1xuICAgIHRoaXMuYnV0dG9uQ2xpY2suZW1pdChidXR0b24uYWN0aW9uKTtcbiAgfVxuXG4gIG9uQ2xvc2UoKTogdm9pZCB7XG4gICAgdGhpcy5jbG9zZU1vZGFsLmVtaXQoKTtcbiAgfVxuXG4gIGdldCBzdGVwc0JhY2tncm91bmRDbGFzcygpOiBzdHJpbmcge1xuICAgIHJldHVybiAnY3FhLWJnLVsjRUUzRjNGMUFdJztcbiAgfVxuXG4gIGdldCBzdGVwc0JvcmRlckNsYXNzKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuICcjRkVDQUNBJztcbiAgfVxuXG4gIGdldCBoYXNUaW1pbmdEYXRhKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiAhISh0aGlzLnRvdGFsU3RlcHMgfHwgdGhpcy50b3RhbFRpbWUgfHwgdGhpcy5hcHBUaW1lIHx8IHRoaXMudG9vbFRpbWUpO1xuICB9XG59XG5cbiIsIjxkaXYgKm5nSWY9XCJpc09wZW5cIlxuICBjbGFzcz1cIm1vZGFsLWJhY2tkcm9wIGNxYS1maXhlZCBjcWEtaW5zZXQtMCBjcWEtYmctYmxhY2sgY3FhLWJnLW9wYWNpdHktNTAgY3FhLXotNTAgY3FhLWZsZXggY3FhLWl0ZW1zLWNlbnRlciBjcWEtanVzdGlmeS1jZW50ZXIgY3FhLXAtNFwiXG4gIChjbGljayk9XCJvbkJhY2tkcm9wQ2xpY2soJGV2ZW50KVwiPlxuICA8ZGl2XG4gICAgY2xhc3M9XCJjcWEtcm91bmRlZC1sZyBjcWEtYmctd2hpdGUgY3FhLXNoYWRvdy14bCBjcWEtdy1mdWxsIGNxYS1tYXgtdy1bNTAwcHhdIGNxYS1vdmVyZmxvdy1oaWRkZW4gY3FhLXAtNiBjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWdhcC0yXCJcbiAgICBzdHlsZT1cImJveC1zaGFkb3c6IDBweCA4cHggOHB4IC00cHggIzEwMTgyODA4O1wiIChjbGljayk9XCIkZXZlbnQuc3RvcFByb3BhZ2F0aW9uKClcIj5cblxuICAgIDxkaXYgY2xhc3M9XCJjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWl0ZW1zLWNlbnRlclwiPlxuICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1jZW50ZXIgY3FhLWp1c3RpZnktY2VudGVyIGNxYS13LVs5M3B4XSBjcWEtaC1bOTNweF0gY3FhLXJvdW5kZWQtZnVsbCBjcWEtYmctWyNGOUJGQkZdXCIgc3R5bGU9XCJib3JkZXI6IDhweCBzb2xpZCAjRkNEOUQ5O1wiPlxuICAgICAgICA8bWF0LWljb24gY2xhc3M9XCJjcWEtdGV4dC1bI0VFM0YzRl1cIiBzdHlsZT1cImZvbnQtc2l6ZTogNDhweDsgd2lkdGg6IDQ4cHg7IGhlaWdodDogNDhweDtcIj5cbiAgICAgICAgICBlcnJvclxuICAgICAgICA8L21hdC1pY29uPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxoMiBjbGFzcz1cImNxYS10ZXh0LVsyMnB4XSBjcWEtZm9udC1zZW1pYm9sZCBjcWEtdGV4dC1bIzBCMEIwQ10gY3FhLW10LVsyMHB4XSBjcWEtbGVhZGluZy1bMjhweF1cIj5cbiAgICAgICAge3sgdGl0bGUgfX1cbiAgICAgIDwvaDI+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2ICpuZ0lmPVwiaGFzVGltaW5nRGF0YVwiIGNsYXNzPVwiY3FhLXJvdW5kZWQtbGcgY3FhLWJvcmRlciBjcWEtcC1bMTdweF0gY3FhLW15LTRcIiBbbmdDbGFzc109XCJzdGVwc0JhY2tncm91bmRDbGFzc1wiXG4gICAgICBzdHlsZT1cImJvcmRlcjogMXB4IHNvbGlkO1wiIFtzdHlsZS5ib3JkZXItY29sb3JdPVwic3RlcHNCb3JkZXJDbGFzc1wiPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cImNxYS1ncmlkIHNtOmNxYS1mbGV4IHNtOmNxYS1qdXN0aWZ5LWJldHdlZW4gc206Y3FhLWl0ZW1zLWNlbnRlciBjcWEtZ3JpZC1jb2xzLTIgc206Y3FhLWdyaWQtY29scy00IGNxYS1nYXAtNCBzbTpjcWEtZ2FwLTJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1mbGV4LWNvbFwiICpuZ0lmPVwidG90YWxTdGVwc1wiPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQteHMgY3FhLXRleHQtWyM0QTU1NjVdIGNxYS1tYi0xXCI+VG90YWwgU3RlcHM8L3NwYW4+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJjcWEtdGV4dC1bMThweF0gY3FhLWZvbnQtbWVkaXVtIGNxYS10ZXh0LVsjMTAxODI4XVwiPlxuICAgICAgICAgICAge3sgY29tcGxldGVkU3RlcHMgfX0gLyB7eyB0b3RhbFN0ZXBzIH19XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXggY3FhLWZsZXgtY29sXCIgKm5nSWY9XCJ0b3RhbFRpbWVcIj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImNxYS10ZXh0LXhzIGNxYS10ZXh0LVsjNEE1NTY1XSBjcWEtbWItMVwiPlRvdGFsIFRpbWU8L3NwYW4+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJjcWEtdGV4dC1bMThweF0gY3FhLWZvbnQtbWVkaXVtIGNxYS10ZXh0LVsjMTAxODI4XVwiPlxuICAgICAgICAgICAge3sgdG90YWxUaW1lIH19XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXggY3FhLWZsZXgtY29sXCIgKm5nSWY9XCJhcHBUaW1lXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJjcWEtdGV4dC14cyBjcWEtdGV4dC1bIzRBNTU2NV0gY3FhLW1iLTFcIj5BcHAgVGltZTwvc3Bhbj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImNxYS10ZXh0LVsxOHB4XSBjcWEtZm9udC1tZWRpdW0gY3FhLXRleHQtWyMxMDE4MjhdXCI+XG4gICAgICAgICAgICB7eyBhcHBUaW1lIH19XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXggY3FhLWZsZXgtY29sXCIgKm5nSWY9XCJ0b29sVGltZVwiPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQteHMgY3FhLXRleHQtWyM0QTU1NjVdIGNxYS1tYi0xXCI+VG9vbCBUaW1lPC9zcGFuPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQtWzE4cHhdIGNxYS1mb250LW1lZGl1bSBjcWEtdGV4dC1bIzEwMTgyOF1cIj5cbiAgICAgICAgICAgIHt7IHRvb2xUaW1lIH19XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuXG4gICAgPCEtLSBFcnJvciBNZXNzYWdlIC0tPlxuICAgIDxkaXYgKm5nSWY9XCJlcnJvck1lc3NhZ2VcIiBjbGFzcz1cImNxYS1teS00IGNxYS1wLVsxN3B4XSBjcWEtcm91bmRlZC1bMTBweF0gY3FhLWJnLVsjRkVGMkYyXVwiXG4gICAgICBzdHlsZT1cImJvcmRlcjogMXB4IHNvbGlkICNGRUNBQ0E7XCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiY3FhLXRleHQtWzEycHhdIGNxYS10ZXh0LVsjQjkxQzFDXSBjcWEtd2hpdGVzcGFjZS1ub3JtYWwgY3FhLWJyZWFrLWFueXdoZXJlXCJcbiAgICAgICAgc3R5bGU9XCJ3b3JkLWJyZWFrOiBicmVhay13b3JkOyB3aGl0ZS1zcGFjZTogcHJlLWxpbmU7XCI+XG4gICAgICAgIHt7IGVycm9yTWVzc2FnZSB9fVxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG5cbiAgICA8IS0tIEJ1dHRvbnMgLS0+XG4gICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1mbGV4LWNvbCBjcWEtZ2FwLVsyMHB4XVwiPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgYnV0dG9uIG9mIGJ1dHRvbnM7IGxldCBpID0gaW5kZXhcIj5cbiAgICAgICAgPGNxYS1idXR0b24gW3ZhcmlhbnRdPVwiYnV0dG9uLnZhcmlhbnRcIiBbdGV4dF09XCJidXR0b24ubGFiZWxcIiBbaWNvbl09XCJidXR0b24uaWNvblwiXG4gICAgICAgICAgW2J0blNpemVdPVwiYnV0dG9uLmJ0blNpemUgfHwgJ2xnJ1wiIFtmdWxsV2lkdGhdPVwiYnV0dG9uLmZ1bGxXaWR0aCAhPT0gdW5kZWZpbmVkID8gYnV0dG9uLmZ1bGxXaWR0aCA6IHRydWVcIlxuICAgICAgICAgIChjbGlja2VkKT1cIm9uQnV0dG9uQ2xpY2soYnV0dG9uKVwiPlxuICAgICAgICA8L2NxYS1idXR0b24+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXJyb3ItbW9kYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9lcnJvci1tb2RhbC9lcnJvci1tb2RhbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2Vycm9yLW1vZGFsL2Vycm9yLW1vZGFsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFpQnZFLE1BQU0sT0FBTyxtQkFBbUI7SUFMaEM7UUFNVyxXQUFNLEdBQVksS0FBSyxDQUFDO1FBQ3hCLFVBQUssR0FBVyxPQUFPLENBQUM7UUFFeEIsaUJBQVksR0FBVyxFQUFFLENBQUM7UUFDMUIsZUFBVSxHQUFXLENBQUMsQ0FBQztRQUN2QixtQkFBYyxHQUFXLENBQUMsQ0FBQztRQUMzQixjQUFTLEdBQVcsRUFBRSxDQUFDO1FBQ3ZCLFlBQU8sR0FBVyxFQUFFLENBQUM7UUFDckIsYUFBUSxHQUFXLEVBQUUsQ0FBQztRQUN0QixZQUFPLEdBQXVCLEVBQUUsQ0FBQztRQUVoQyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFDekMsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7S0FzQ2pEO0lBcENDLGVBQWUsQ0FBQyxLQUFpQjtRQUMvQixNQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsTUFBcUIsQ0FBQztRQUMzQyxNQUFNLGFBQWEsR0FBRyxLQUFLLENBQUMsYUFBNEIsQ0FBQztRQUV6RCxJQUFJLE1BQU0sS0FBSyxhQUFhLElBQUksTUFBTSxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsZ0JBQWdCLENBQUMsRUFBRTtZQUMzRSxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7U0FDaEI7SUFDSCxDQUFDO0lBRUQsYUFBYSxDQUFDLE1BQXdCO1FBQ3BDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN2QyxDQUFDO0lBRUQsT0FBTztRQUNMLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDekIsQ0FBQztJQUVELElBQUksb0JBQW9CO1FBQ3RCLE9BQU8sb0JBQW9CLENBQUM7SUFDOUIsQ0FBQztJQUVELElBQUksZ0JBQWdCO1FBQ2xCLE9BQU8sU0FBUyxDQUFDO0lBQ25CLENBQUM7SUFFRCxJQUFJLGFBQWE7UUFDZixPQUFPLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLElBQUksSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsT0FBTyxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUNoRixDQUFDO0lBRUQsaUJBQWlCO1FBQ2YsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxPQUFPLEtBQUssTUFBTSxDQUFDLENBQUM7SUFDbEUsQ0FBQztJQUVELGNBQWM7UUFDWixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLE9BQU8sS0FBSyxNQUFNLENBQUMsQ0FBQztJQUNsRSxDQUFDOztnSEFsRFUsbUJBQW1CO29HQUFuQixtQkFBbUIsc1lDakJoQywweUlBc0ZNOzJGRHJFTyxtQkFBbUI7a0JBTC9CLFNBQVM7K0JBQ0UsaUJBQWlCOzhCQUtsQixNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLG9CQUFvQjtzQkFBNUIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFFSSxXQUFXO3NCQUFwQixNQUFNO2dCQUNHLFVBQVU7c0JBQW5CLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQnV0dG9uVmFyaWFudCB9IGZyb20gJy4uL2J1dHRvbi9idXR0b24uY29tcG9uZW50JztcblxuZXhwb3J0IGludGVyZmFjZSBFcnJvck1vZGFsQnV0dG9uIHtcbiAgbGFiZWw6IHN0cmluZztcbiAgdmFyaWFudDogQnV0dG9uVmFyaWFudDtcbiAgaWNvbj86IHN0cmluZztcbiAgYWN0aW9uOiBzdHJpbmc7XG4gIGJ0blNpemU/OiAnc20nIHwgJ21kJyB8ICdsZyc7XG4gIGZ1bGxXaWR0aD86IGJvb2xlYW47XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NxYS1lcnJvci1tb2RhbCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9lcnJvci1tb2RhbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogW11cbn0pXG5leHBvcnQgY2xhc3MgRXJyb3JNb2RhbENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGlzT3BlbjogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nID0gJ0Vycm9yJztcbiAgQElucHV0KCkgaW5zdHJ1Y3Rpb25hbE1lc3NhZ2U/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGVycm9yTWVzc2FnZTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIHRvdGFsU3RlcHM6IG51bWJlciA9IDA7XG4gIEBJbnB1dCgpIGNvbXBsZXRlZFN0ZXBzOiBudW1iZXIgPSAwO1xuICBASW5wdXQoKSB0b3RhbFRpbWU6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBhcHBUaW1lOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgdG9vbFRpbWU6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBidXR0b25zOiBFcnJvck1vZGFsQnV0dG9uW10gPSBbXTtcblxuICBAT3V0cHV0KCkgYnV0dG9uQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcbiAgQE91dHB1dCgpIGNsb3NlTW9kYWwgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgb25CYWNrZHJvcENsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KTogdm9pZCB7XG4gICAgY29uc3QgdGFyZ2V0ID0gZXZlbnQudGFyZ2V0IGFzIEhUTUxFbGVtZW50O1xuICAgIGNvbnN0IGN1cnJlbnRUYXJnZXQgPSBldmVudC5jdXJyZW50VGFyZ2V0IGFzIEhUTUxFbGVtZW50O1xuICAgIFxuICAgIGlmICh0YXJnZXQgPT09IGN1cnJlbnRUYXJnZXQgfHwgdGFyZ2V0LmNsYXNzTGlzdC5jb250YWlucygnbW9kYWwtYmFja2Ryb3AnKSkge1xuICAgICAgdGhpcy5vbkNsb3NlKCk7XG4gICAgfVxuICB9XG5cbiAgb25CdXR0b25DbGljayhidXR0b246IEVycm9yTW9kYWxCdXR0b24pOiB2b2lkIHtcbiAgICB0aGlzLmJ1dHRvbkNsaWNrLmVtaXQoYnV0dG9uLmFjdGlvbik7XG4gIH1cblxuICBvbkNsb3NlKCk6IHZvaWQge1xuICAgIHRoaXMuY2xvc2VNb2RhbC5lbWl0KCk7XG4gIH1cblxuICBnZXQgc3RlcHNCYWNrZ3JvdW5kQ2xhc3MoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gJ2NxYS1iZy1bI0VFM0YzRjFBXSc7XG4gIH1cblxuICBnZXQgc3RlcHNCb3JkZXJDbGFzcygpOiBzdHJpbmcge1xuICAgIHJldHVybiAnI0ZFQ0FDQSc7XG4gIH1cblxuICBnZXQgaGFzVGltaW5nRGF0YSgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gISEodGhpcy50b3RhbFN0ZXBzIHx8IHRoaXMudG90YWxUaW1lIHx8IHRoaXMuYXBwVGltZSB8fCB0aGlzLnRvb2xUaW1lKTtcbiAgfVxuXG4gIGdldE5vblRleHRCdXR0b25zKCk6IEVycm9yTW9kYWxCdXR0b25bXSB7XG4gICAgcmV0dXJuIHRoaXMuYnV0dG9ucy5maWx0ZXIoYnV0dG9uID0+IGJ1dHRvbi52YXJpYW50ICE9PSAndGV4dCcpO1xuICB9XG5cbiAgZ2V0VGV4dEJ1dHRvbnMoKTogRXJyb3JNb2RhbEJ1dHRvbltdIHtcbiAgICByZXR1cm4gdGhpcy5idXR0b25zLmZpbHRlcihidXR0b24gPT4gYnV0dG9uLnZhcmlhbnQgPT09ICd0ZXh0Jyk7XG4gIH1cbn1cblxuIiwiPGRpdiAqbmdJZj1cImlzT3BlblwiXG4gIGNsYXNzPVwibW9kYWwtYmFja2Ryb3AgY3FhLWZpeGVkIGNxYS1pbnNldC0wIGNxYS1iZy1ibGFjayBjcWEtYmctb3BhY2l0eS01MCBjcWEtei01MCBjcWEtZmxleCBjcWEtaXRlbXMtY2VudGVyIGNxYS1qdXN0aWZ5LWNlbnRlciBjcWEtcC00XCJcbiAgKGNsaWNrKT1cIm9uQmFja2Ryb3BDbGljaygkZXZlbnQpXCI+XG4gIDxkaXZcbiAgICBjbGFzcz1cImNxYS1yb3VuZGVkLWxnIGNxYS1iZy13aGl0ZSBjcWEtc2hhZG93LXhsIGNxYS13LWZ1bGwgY3FhLW1heC13LVs1MDBweF0gY3FhLW92ZXJmbG93LWhpZGRlbiBjcWEtcC02IGNxYS1mbGV4IGNxYS1mbGV4LWNvbCBjcWEtZ2FwLTJcIlxuICAgIHN0eWxlPVwiYm94LXNoYWRvdzogMHB4IDhweCA4cHggLTRweCAjMTAxODI4MDg7XCIgKGNsaWNrKT1cIiRldmVudC5zdG9wUHJvcGFnYXRpb24oKVwiPlxuXG4gICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1mbGV4LWNvbCBjcWEtaXRlbXMtY2VudGVyXCI+XG4gICAgICA8ZGl2PlxuICAgICAgICA8c3ZnIHdpZHRoPVwiOTNcIiBoZWlnaHQ9XCI5M1wiIHZpZXdCb3g9XCIwIDAgOTMgOTNcIiBmaWxsPVwibm9uZVwiIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIj5cbiAgICAgICAgICA8cmVjdCB4PVwiNFwiIHk9XCI0XCIgd2lkdGg9XCI4NVwiIGhlaWdodD1cIjg1XCIgcng9XCI0Mi41XCIgZmlsbD1cIiNGMTVGNUZcIi8+XG4gICAgICAgICAgPHJlY3QgeD1cIjRcIiB5PVwiNFwiIHdpZHRoPVwiODVcIiBoZWlnaHQ9XCI4NVwiIHJ4PVwiNDIuNVwiIHN0cm9rZT1cIiNGQ0Q5RDlcIiBzdHJva2Utd2lkdGg9XCI4XCIvPlxuICAgICAgICAgIDxwYXRoIGQ9XCJNMzIuMzgxNSA2Mi40NDM3SDYwLjYxOUM2My41MDY1IDYyLjQ0MzcgNjUuMzA2NSA1OS4zMTI1IDYzLjg2MjcgNTYuODE4OEw0OS43NDQgMzIuNDI1QzQ4LjMwMDIgMjkuOTMxMyA0NC43MDAyIDI5LjkzMTMgNDMuMjU2NSAzMi40MjVMMjkuMTM3NyA1Ni44MTg4QzI3LjY5NCA1OS4zMTI1IDI5LjQ5NCA2Mi40NDM3IDMyLjM4MTUgNjIuNDQzN1pNNDYuNTAwMiA0OS4zMTg4QzQ1LjQ2OSA0OS4zMTg4IDQ0LjYyNTIgNDguNDc1IDQ0LjYyNTIgNDcuNDQzOFY0My42OTM4QzQ0LjYyNTIgNDIuNjYyNSA0NS40NjkgNDEuODE4OCA0Ni41MDAyIDQxLjgxODhDNDcuNTMxNSA0MS44MTg4IDQ4LjM3NTIgNDIuNjYyNSA0OC4zNzUyIDQzLjY5MzhWNDcuNDQzOEM0OC4zNzUyIDQ4LjQ3NSA0Ny41MzE1IDQ5LjMxODggNDYuNTAwMiA0OS4zMTg4Wk00OC4zNzUyIDU2LjgxODhINDQuNjI1MlY1My4wNjg4SDQ4LjM3NTJWNTYuODE4OFpcIiBmaWxsPVwid2hpdGVcIi8+XG4gICAgICAgICAgPC9zdmc+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGgyIGNsYXNzPVwiY3FhLXRleHQtWzIycHhdIGNxYS1mb250LXNlbWlib2xkIGNxYS10ZXh0LVsjMEIwQjBDXSBjcWEtbXQtWzIwcHhdIGNxYS1sZWFkaW5nLVsyOHB4XVwiPlxuICAgICAgICB7eyB0aXRsZSB9fVxuICAgICAgPC9oMj5cblxuICAgICAgPCEtLSBJbnN0cnVjdGlvbmFsIE1lc3NhZ2UgLS0+XG4gICAgICA8cCAqbmdJZj1cImluc3RydWN0aW9uYWxNZXNzYWdlXCIgY2xhc3M9XCJjcWEtdGV4dC1zbSBjcWEtdGV4dC1bIzRBNTU2NV0gY3FhLW10LTIgY3FhLXRleHQtY2VudGVyXCI+XG4gICAgICAgIHt7IGluc3RydWN0aW9uYWxNZXNzYWdlIH19XG4gICAgICA8L3A+XG4gICAgPC9kaXY+XG5cbiAgICA8IS0tIDxkaXYgKm5nSWY9XCJoYXNUaW1pbmdEYXRhXCIgY2xhc3M9XCJjcWEtcm91bmRlZC1sZyBjcWEtYm9yZGVyIGNxYS1wLVsxN3B4XSBjcWEtbXktNFwiIFtuZ0NsYXNzXT1cInN0ZXBzQmFja2dyb3VuZENsYXNzXCJcbiAgICAgIHN0eWxlPVwiYm9yZGVyOiAxcHggc29saWQ7XCIgW3N0eWxlLmJvcmRlci1jb2xvcl09XCJzdGVwc0JvcmRlckNsYXNzXCI+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwiY3FhLWdyaWQgc206Y3FhLWZsZXggc206Y3FhLWp1c3RpZnktYmV0d2VlbiBzbTpjcWEtaXRlbXMtY2VudGVyIGNxYS1ncmlkLWNvbHMtMiBzbTpjcWEtZ3JpZC1jb2xzLTQgY3FhLWdhcC00IHNtOmNxYS1nYXAtMlwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXggY3FhLWZsZXgtY29sXCIgKm5nSWY9XCJ0b3RhbFN0ZXBzXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJjcWEtdGV4dC14cyBjcWEtdGV4dC1bIzRBNTU2NV0gY3FhLW1iLTFcIj5Ub3RhbCBTdGVwczwvc3Bhbj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImNxYS10ZXh0LVsxOHB4XSBjcWEtZm9udC1tZWRpdW0gY3FhLXRleHQtWyMxMDE4MjhdXCI+XG4gICAgICAgICAgICB7eyBjb21wbGV0ZWRTdGVwcyB9fSAvIHt7IHRvdGFsU3RlcHMgfX1cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjcWEtZmxleCBjcWEtZmxleC1jb2xcIiAqbmdJZj1cInRvdGFsVGltZVwiPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQteHMgY3FhLXRleHQtWyM0QTU1NjVdIGNxYS1tYi0xXCI+VG90YWwgVGltZTwvc3Bhbj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImNxYS10ZXh0LVsxOHB4XSBjcWEtZm9udC1tZWRpdW0gY3FhLXRleHQtWyMxMDE4MjhdXCI+XG4gICAgICAgICAgICB7eyB0b3RhbFRpbWUgfX1cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjcWEtZmxleCBjcWEtZmxleC1jb2xcIiAqbmdJZj1cImFwcFRpbWVcIj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImNxYS10ZXh0LXhzIGNxYS10ZXh0LVsjNEE1NTY1XSBjcWEtbWItMVwiPkFwcCBUaW1lPC9zcGFuPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQtWzE4cHhdIGNxYS1mb250LW1lZGl1bSBjcWEtdGV4dC1bIzEwMTgyOF1cIj5cbiAgICAgICAgICAgIHt7IGFwcFRpbWUgfX1cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjcWEtZmxleCBjcWEtZmxleC1jb2xcIiAqbmdJZj1cInRvb2xUaW1lXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJjcWEtdGV4dC14cyBjcWEtdGV4dC1bIzRBNTU2NV0gY3FhLW1iLTFcIj5Ub29sIFRpbWU8L3NwYW4+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJjcWEtdGV4dC1bMThweF0gY3FhLWZvbnQtbWVkaXVtIGNxYS10ZXh0LVsjMTAxODI4XVwiPlxuICAgICAgICAgICAge3sgdG9vbFRpbWUgfX1cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+IC0tPlxuXG4gICAgPCEtLSBFcnJvciBNZXNzYWdlIFNlY3Rpb24gLS0+XG4gICAgPGRpdiAqbmdJZj1cImVycm9yTWVzc2FnZVwiIGNsYXNzPVwiY3FhLW15LTQgY3FhLXAtNCBjcWEtcm91bmRlZC1sZyBjcWEtYmctd2hpdGVcIlxuICAgICAgc3R5bGU9XCJib3JkZXI6IDFweCBzb2xpZCAjRTVFN0VCO1wiPlxuICAgICAgPGRpdiBjbGFzcz1cImNxYS10ZXh0LXhzIGNxYS10ZXh0LVsjOUNBM0FGXSBjcWEtbWItMiBjcWEtZm9udC1tZWRpdW1cIj5cbiAgICAgICAgRXJyb3IgTWVzc2FnZVxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiY3FhLXRleHQtc20gY3FhLXRleHQtWyMxMTE4MjddIGNxYS1mb250LXNlbWlib2xkIGNxYS13aGl0ZXNwYWNlLW5vcm1hbCBjcWEtYnJlYWstYW55d2hlcmVcIlxuICAgICAgICBzdHlsZT1cIndvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7IHdoaXRlLXNwYWNlOiBwcmUtbGluZTtcIj5cbiAgICAgICAge3sgZXJyb3JNZXNzYWdlIH19XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cblxuICAgIDwhLS0gQnV0dG9ucyAtLT5cbiAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXggY3FhLWZsZXgtY29sIGNxYS1nYXAtWzIwcHhdXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBidXR0b24gb2YgYnV0dG9uczsgbGV0IGkgPSBpbmRleFwiPlxuICAgICAgICA8Y3FhLWJ1dHRvblxuICAgICAgICAgIFt2YXJpYW50XT1cImJ1dHRvbi52YXJpYW50XCJcbiAgICAgICAgICBbdGV4dF09XCJidXR0b24ubGFiZWxcIlxuICAgICAgICAgIFtpY29uXT1cImJ1dHRvbi5pY29uXCJcbiAgICAgICAgICBbYnRuU2l6ZV09XCJidXR0b24uYnRuU2l6ZSB8fCAnbGcnXCJcbiAgICAgICAgICBbZnVsbFdpZHRoXT1cImJ1dHRvbi5mdWxsV2lkdGggIT09IHVuZGVmaW5lZCA/IGJ1dHRvbi5mdWxsV2lkdGggOiB0cnVlXCJcbiAgICAgICAgICAoY2xpY2tlZCk9XCJvbkJ1dHRvbkNsaWNrKGJ1dHRvbilcIj5cbiAgICAgICAgPC9jcWEtYnV0dG9uPlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+Il19

package/fesm2015/cqa-lib-cqa-ui.mjs

@@ -11916,16 +11916,24 @@ class ErrorModalComponent {
     get hasTimingData() {
         return !!(this.totalSteps || this.totalTime || this.appTime || this.toolTime);
     }
+    getNonTextButtons() {
+        return this.buttons.filter(button => button.variant !== 'text');
+    }
+    getTextButtons() {
+        return this.buttons.filter(button => button.variant === 'text');
+    }
 }
 ErrorModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ErrorModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ErrorModalComponent, selector: "cqa-error-modal", inputs: { isOpen: "isOpen", title: "title", errorMessage: "errorMessage", totalSteps: "totalSteps", completedSteps: "completedSteps", totalTime: "totalTime", appTime: "appTime", toolTime: "toolTime", buttons: "buttons" }, 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-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2\"\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 class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-[93px] cqa-h-[93px] cqa-rounded-full cqa-bg-[#F9BFBF]\" style=\"border: 8px solid #FCD9D9;\">\n        <mat-icon class=\"cqa-text-[#EE3F3F]\" style=\"font-size: 48px; width: 48px; height: 48px;\">\n          error\n        </mat-icon>\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 *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 -->\n    <div *ngIf=\"errorMessage\" class=\"cqa-my-4 cqa-p-[17px] cqa-rounded-[10px] cqa-bg-[#FEF2F2]\"\n      style=\"border: 1px solid #FECACA;\">\n      <div class=\"cqa-text-[12px] cqa-text-[#B91C1C] 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 -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n      <ng-container *ngFor=\"let button of buttons; let i = index\">\n        <cqa-button [variant]=\"button.variant\" [text]=\"button.label\" [icon]=\"button.icon\"\n          [btnSize]=\"button.btnSize || 'lg'\" [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n          (clicked)=\"onButtonClick(button)\">\n        </cqa-button>\n      </ng-container>\n    </div>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+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" }, 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-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2\"\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 -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n      <ng-container *ngFor=\"let button of buttons; let i = index\">\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>", 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ErrorModalComponent, decorators: [{
             type: Component,
-            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-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2\"\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 class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-[93px] cqa-h-[93px] cqa-rounded-full cqa-bg-[#F9BFBF]\" style=\"border: 8px solid #FCD9D9;\">\n        <mat-icon class=\"cqa-text-[#EE3F3F]\" style=\"font-size: 48px; width: 48px; height: 48px;\">\n          error\n        </mat-icon>\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 *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 -->\n    <div *ngIf=\"errorMessage\" class=\"cqa-my-4 cqa-p-[17px] cqa-rounded-[10px] cqa-bg-[#FEF2F2]\"\n      style=\"border: 1px solid #FECACA;\">\n      <div class=\"cqa-text-[12px] cqa-text-[#B91C1C] 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 -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n      <ng-container *ngFor=\"let button of buttons; let i = index\">\n        <cqa-button [variant]=\"button.variant\" [text]=\"button.label\" [icon]=\"button.icon\"\n          [btnSize]=\"button.btnSize || 'lg'\" [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n          (clicked)=\"onButtonClick(button)\">\n        </cqa-button>\n      </ng-container>\n    </div>\n  </div>\n</div>", styles: [] }]
+            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-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2\"\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 -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n      <ng-container *ngFor=\"let button of buttons; let i = index\">\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>", styles: [] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], title: [{
                 type: Input
+            }], instructionalMessage: [{
+                type: Input
             }], errorMessage: [{
                 type: Input
             }], totalSteps: [{