@piserve-tech/form-submission 1.3.310 → 1.3.311

package/fesm2022/piserve-tech-form-submission.mjs

@@ -4,7 +4,7 @@ import * as i1$1 from '@angular/common';
 import { DatePipe, DOCUMENT, CommonModule } from '@angular/common';
 import { Subject } from 'rxjs/internal/Subject';
 import * as i1 from '@angular/common/http';
-import { HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpHeaders, HttpParams, HttpEventType } from '@angular/common/http';
 import { BehaviorSubject, map } from 'rxjs';
 import * as i2 from '@angular/router';
 import { NavigationEnd } from '@angular/router';
@@ -1447,6 +1447,8 @@ class FormService {
         }
         return this.http.post(url, formData, {
             headers,
+            observe: 'events',
+            reportProgress: true,
         });
     }
     getSubmittedForm(moduleName, submissionId, pageNumber = 1, rowSet = 0, navigateTo) {
@@ -1478,6 +1480,8 @@ class FormService {
         }
         return this.http.put(url, formData, {
             headers,
+            observe: 'events',
+            reportProgress: true,
         });
     }
     previewFile(url) {
@@ -9175,6 +9179,9 @@ class NavigationTabsComponent {
         this.submissionInProgress = false;
         this.submissionInDraft = false;
         this.showCancelButton = false;
+        this.submissionProgress = 0;
+        this.currentStep = 'Submitting form';
+        this.animatedDots = '';
         this.loadedPages = {};
         this.showTooltip = false;
         this.showNavArrows = false;
@@ -9257,11 +9264,11 @@ class NavigationTabsComponent {
         this.cancel.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationTabsComponent, deps: [{ token: FormValidationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: { pages: "pages", currentPageIndex: "currentPageIndex", skipValidation: "skipValidation", edit: "edit", acceptedLanguage: "acceptedLanguage", eligibleForSubmission: "eligibleForSubmission", pageDetails: "pageDetails", markAllQuestionsAsRequired: "markAllQuestionsAsRequired", skipMargin: "skipMargin", primaryColor: "primaryColor", secondaryColor: "secondaryColor", isActionTriggered: "isActionTriggered", submissionInProgress: "submissionInProgress", submissionInDraft: "submissionInDraft", showCancelButton: "showCancelButton" }, outputs: { pageChanged: "pageChanged", submitEmit: "submitEmit", saveAsDraftEmit: "saveAsDraftEmit", subFormChange: "subFormChange", rowSetIndex: "rowSetIndex", cancel: "cancel" }, ngImport: i0, template: "<div class=\"tab-inner-container\" [ngClass]=\"{ 'skip-margin': skipMargin}\">\n  <div class=\"d-flex gap-2\">\n    <div class=\"tab-navigation\" *ngIf=\"!hideTabs\">\n      <ul class=\"nav nav-tabs navTabs\" id=\"myTab\" role=\"tablist\">\n        <li\n          class=\"nav-item\"\n          role=\"presentation\"\n          *ngFor=\"let page of pageDetails; let i = index; trackBy: trackByIndex\"\n          [ngClass]=\"{'nav-item-ara': acceptedLanguage === 'ara', 'nav-item-default': acceptedLanguage !== 'ara'}\"\n        >\n          <button\n            class=\"nav-link\"\n            [title]=\"page.name\"\n            data-bs-toggle=\"tooltip\"\n            data-bs-placement=\"top\"\n            data-bs-custom-class=\"custom-tooltip\"\n            [class.active]=\"i === currentPageIndex\"\n            id=\"tab-{{ i }}\"\n            type=\"button\"\n            role=\"tab\"\n            [attr.aria-controls]=\"'content-' + i\"\n            [attr.aria-selected]=\"i === currentPageIndex\"\n            (click)=\"setCurrentPage(i)\"\n          >\n            {{ page.name }}\n          </button>\n        </li>\n      </ul>\n    </div>\n    <div class=\"d-flex align-items-center\" *ngIf=\"showNavArrows\">\n      <button class=\"nav-arrow\">\n        <img src=\"assets/icons/left_arrow.svg\" alt=\"left arrow\"\n        (click)=\"scrollTabs(-1)\">\n        <img src=\"assets/icons/right_arrow.svg\" alt=\"right arrow\"\n        (click)=\"scrollTabs(1)\">\n      </button>\n    </div>\n  </div>\n\n\n\n  <div class=\"tab-content pt-5 pb-3 px-1\" [attr.name]=\"pages[currentPageIndex].testElementName\">\n    <ng-container *ngIf=\"pages[currentPageIndex]\">\n      <div\n        class=\"tab-pane fade show active\"\n        id=\"content-{{ currentPageIndex }}\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-' + currentPageIndex\"\n      >\n        <div *ngIf=\"loadedPages[currentPageIndex]\">\n          <div class=\"data-container\"\n          infiniteScroll\n          [infiniteScrollDistance]=\"2\"\n          [infiniteScrollThrottle]=\"200\"\n          (scrolled)=\"loadMoreData()\">\n          <div *ngFor=\"let row of pages[currentPageIndex].rows\">\n            <div class=\"margin d-flex\">\n              <div *ngFor=\"let grid of row.grid\"\n                   [ngStyle]=\"{'width.%': (grid.element.count) * (100 / 12)}\">\n                <lib-form-elements\n                  [grid]=\"grid\"\n                  [edit]=\"edit\"\n                  [acceptedLanguage]=\"acceptedLanguage\"\n                  [pages]=\"pages\"\n                  (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n                ></lib-form-elements>\n              </div>\n            </div>\n          </div>\n          </div>\n          <div class=\"footerButton d-flex justify-content-between align-items-center me-4 ms-4 position-relative\">\n          <!-- Hover detection container -->\n                    <div  [ngStyle]=\"{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }\" id=\"captcha-container\"></div>\n          <div\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n\n          <div  *ngIf=\"currentPageIndex == pageDetails.length - 1\">\n            <button *ngIf=\"showCancelButton\" class=\"btn submitButton rounded-pill bg-secondary text-white\"\n            (click)=\"cancelled()\" type=\"button\"\n            >Cancel</button>\n               <button\n            *ngIf=\"!isActionTriggered && skipValidation\"\n              class=\"btn rounded-pill submitButton text-white\"\n              [ngStyle]=\"{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }\"\n              type=\"button\"\n              (click)=\"saveAsDraft()\"\n              [disabled]=\"!eligibleForSubmission.status || submissionInDraft\"\n            >\n            <ng-container *ngIf=\"submissionInDraft; else showSubmitText\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n              Submitting...\n            </ng-container>\n            <ng-template #showSubmitText>\n             Save Draft\n            </ng-template>\n            </button>\n            \n\n            <button\n            *ngIf=\"!isActionTriggered\"\n              class=\"btn rounded-pill submitButton text-white\"\n              [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n              type=\"button\"\n              (click)=\"submitForm()\"\n              [disabled]=\"!eligibleForSubmission.status || submissionInProgress\"\n            >\n            <ng-container *ngIf=\"submissionInProgress; else showSubmitText\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n              Submitting...\n            </ng-container>\n            <ng-template #showSubmitText>\n              Submit\n            </ng-template>\n            </button>\n            <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n              </div>\n          </div>\n\n        </div>\n\n\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".tab-inner-container{width:100%;position:relative;padding:3rem}@media (max-width: 1024px){.tab-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.tab-inner-container{padding:2rem .5rem}}.skip-margin{padding:0}.custom-tooltip{visibility:hidden;position:absolute;top:-40px;right:0;background:#efefef;color:#7b7878;padding:8px 12px;border-radius:12px;box-shadow:0 4px 8px #00000026;font-size:14px;white-space:nowrap;z-index:10}.custom-tooltip.warning{background:linear-gradient(135deg,gold,#ffb400)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.footerButton:hover .custom-tooltip{visibility:visible}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important;padding-right:0}.nav-item{background-color:#fff;border-radius:5px}.nav-item.nav-item-default{margin-right:.5%}.nav-item.nav-item-ara{margin-left:.5%}.nav-link{position:relative;margin-bottom:-2px;padding-left:25px;padding-right:25px}.nav-link:after{content:\"\";position:absolute;left:0;bottom:0;width:101%;height:6px;background:#efefef}.nav-link.active:after{display:none}.tab-content{background-color:#fff}.custom-tooltip{--bs-tooltip-bg: var(--bd-violet-bg);--bs-tooltip-color: var(--bs-white)}.tab-navigation{position:relative;display:flex;align-items:center;width:95%}.navTabs{display:flex;overflow-x:auto;scroll-behavior:smooth;white-space:nowrap;width:100%;padding:0;margin:0;scrollbar-width:none;-ms-overflow-style:none}.navTabs::-webkit-scrollbar{display:none}.nav-arrow{position:absolute;background:#fff;border:none;cursor:pointer;font-size:20px;font-weight:700;padding:5px 10px;z-index:1000;box-shadow:0 2px 5px #0003;width:45px;height:27px;gap:13px;display:flex;justify-content:center;align-items:center;border-radius:6px}.nav-arrow img{width:8px;height:15px}.submitButton{margin-right:1rem}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}@keyframes spinner-border{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["currentPageIndex", "edit", "acceptedLanguage", "answer", "grid", "state", "pages"], outputs: ["subFormChange"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: { pages: "pages", currentPageIndex: "currentPageIndex", skipValidation: "skipValidation", edit: "edit", acceptedLanguage: "acceptedLanguage", eligibleForSubmission: "eligibleForSubmission", pageDetails: "pageDetails", markAllQuestionsAsRequired: "markAllQuestionsAsRequired", skipMargin: "skipMargin", primaryColor: "primaryColor", secondaryColor: "secondaryColor", isActionTriggered: "isActionTriggered", submissionInProgress: "submissionInProgress", submissionInDraft: "submissionInDraft", showCancelButton: "showCancelButton", submissionProgress: "submissionProgress", currentStep: "currentStep", animatedDots: "animatedDots" }, outputs: { pageChanged: "pageChanged", submitEmit: "submitEmit", saveAsDraftEmit: "saveAsDraftEmit", subFormChange: "subFormChange", rowSetIndex: "rowSetIndex", cancel: "cancel" }, ngImport: i0, template: "<div class=\"tab-inner-container\" [ngClass]=\"{ 'skip-margin': skipMargin}\">\n  <div class=\"d-flex gap-2\">\n    <div class=\"tab-navigation\" *ngIf=\"!hideTabs\">\n      <ul class=\"nav nav-tabs navTabs\" id=\"myTab\" role=\"tablist\">\n        <li\n          class=\"nav-item\"\n          role=\"presentation\"\n          *ngFor=\"let page of pageDetails; let i = index; trackBy: trackByIndex\"\n          [ngClass]=\"{'nav-item-ara': acceptedLanguage === 'ara', 'nav-item-default': acceptedLanguage !== 'ara'}\"\n        >\n          <button\n            class=\"nav-link\"\n            [title]=\"page.name\"\n            data-bs-toggle=\"tooltip\"\n            data-bs-placement=\"top\"\n            data-bs-custom-class=\"custom-tooltip\"\n            [class.active]=\"i === currentPageIndex\"\n            id=\"tab-{{ i }}\"\n            type=\"button\"\n            role=\"tab\"\n            [attr.aria-controls]=\"'content-' + i\"\n            [attr.aria-selected]=\"i === currentPageIndex\"\n            (click)=\"setCurrentPage(i)\"\n          >\n            {{ page.name }}\n          </button>\n        </li>\n      </ul>\n    </div>\n    <div class=\"d-flex align-items-center\" *ngIf=\"showNavArrows\">\n      <button class=\"nav-arrow\">\n        <img src=\"assets/icons/left_arrow.svg\" alt=\"left arrow\"\n        (click)=\"scrollTabs(-1)\">\n        <img src=\"assets/icons/right_arrow.svg\" alt=\"right arrow\"\n        (click)=\"scrollTabs(1)\">\n      </button>\n    </div>\n  </div>\n\n\n\n  <div class=\"tab-content pt-5 pb-3 px-1\" [attr.name]=\"pages[currentPageIndex].testElementName\">\n    <ng-container *ngIf=\"pages[currentPageIndex]\">\n      <div\n        class=\"tab-pane fade show active\"\n        id=\"content-{{ currentPageIndex }}\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-' + currentPageIndex\"\n      >\n        <div *ngIf=\"loadedPages[currentPageIndex]\">\n          <div class=\"data-container\"\n          infiniteScroll\n          [infiniteScrollDistance]=\"2\"\n          [infiniteScrollThrottle]=\"200\"\n          (scrolled)=\"loadMoreData()\">\n          <div *ngFor=\"let row of pages[currentPageIndex].rows\">\n            <div class=\"margin d-flex\">\n              <div *ngFor=\"let grid of row.grid\"\n                   [ngStyle]=\"{'width.%': (grid.element.count) * (100 / 12)}\">\n                <lib-form-elements\n                  [grid]=\"grid\"\n                  [edit]=\"edit\"\n                  [acceptedLanguage]=\"acceptedLanguage\"\n                  [pages]=\"pages\"\n                  (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n                ></lib-form-elements>\n              </div>\n            </div>\n          </div>\n          </div>\n          <div class=\"footerButton d-flex justify-content-between align-items-center me-4 ms-4 position-relative\">\n          <!-- Hover detection container -->\n                    <div  [ngStyle]=\"{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }\" id=\"captcha-container\"></div>\n          <div\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n\n          <div  *ngIf=\"currentPageIndex == pageDetails.length - 1\">\n            <button *ngIf=\"showCancelButton\" class=\"btn submitButton rounded-pill bg-secondary text-white\"\n            (click)=\"cancelled()\" type=\"button\"\n            >Cancel</button>\n               <button\n            *ngIf=\"!isActionTriggered && skipValidation\"\n              class=\"btn rounded-pill submitButton text-white\"\n              [ngStyle]=\"{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }\"\n              type=\"button\"\n              (click)=\"saveAsDraft()\"\n              [disabled]=\"!eligibleForSubmission.status || submissionInDraft\"\n            >\n            <ng-container *ngIf=\"submissionInDraft; else showSubmitText\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n              Submitting...\n            </ng-container>\n            <ng-template #showSubmitText>\n             Save Draft\n            </ng-template>\n            </button>\n            \n\n            <button\n            *ngIf=\"!isActionTriggered\"\n              class=\"btn rounded-pill submitButton text-white\"\n              [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n              type=\"button\"\n              (click)=\"submitForm()\"\n              [disabled]=\"!eligibleForSubmission.status || submissionInProgress\"\n            >\n            <ng-container *ngIf=\"submissionInProgress; else showSubmitText\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n              Submitting...\n            </ng-container>\n            <ng-template #showSubmitText>\n              Submit\n            </ng-template>\n            </button>\n            <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n              </div>\n          </div>\n\n        </div>\n        <div *ngIf=\"submissionInProgress\" class=\"text-loader\">\n          {{ currentStep }}{{ animatedDots }}\n          <span class=\"percentage\">{{ submissionProgress }}%</span>\n        </div>\n\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".tab-inner-container{width:100%;position:relative;padding:3rem}@media (max-width: 1024px){.tab-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.tab-inner-container{padding:2rem .5rem}}.skip-margin{padding:0}.custom-tooltip{visibility:hidden;position:absolute;top:-40px;right:0;background:#efefef;color:#7b7878;padding:8px 12px;border-radius:12px;box-shadow:0 4px 8px #00000026;font-size:14px;white-space:nowrap;z-index:10}.custom-tooltip.warning{background:linear-gradient(135deg,gold,#ffb400)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.footerButton:hover .custom-tooltip{visibility:visible}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important;padding-right:0}.nav-item{background-color:#fff;border-radius:5px}.nav-item.nav-item-default{margin-right:.5%}.nav-item.nav-item-ara{margin-left:.5%}.nav-link{position:relative;margin-bottom:-2px;padding-left:25px;padding-right:25px}.nav-link:after{content:\"\";position:absolute;left:0;bottom:0;width:101%;height:6px;background:#efefef}.nav-link.active:after{display:none}.tab-content{background-color:#fff}.custom-tooltip{--bs-tooltip-bg: var(--bd-violet-bg);--bs-tooltip-color: var(--bs-white)}.tab-navigation{position:relative;display:flex;align-items:center;width:95%}.navTabs{display:flex;overflow-x:auto;scroll-behavior:smooth;white-space:nowrap;width:100%;padding:0;margin:0;scrollbar-width:none;-ms-overflow-style:none}.navTabs::-webkit-scrollbar{display:none}.nav-arrow{position:absolute;background:#fff;border:none;cursor:pointer;font-size:20px;font-weight:700;padding:5px 10px;z-index:1000;box-shadow:0 2px 5px #0003;width:45px;height:27px;gap:13px;display:flex;justify-content:center;align-items:center;border-radius:6px}.nav-arrow img{width:8px;height:15px}.submitButton{margin-right:1rem}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}@keyframes spinner-border{to{transform:rotate(360deg)}}.text-loader{font-size:14px;font-weight:500;padding:8px 12px;border-radius:6px;align-items:center;gap:8px;display:flex;justify-content:center}.percentage{font-weight:600;color:var(--primaryColor, #084fff)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["currentPageIndex", "edit", "acceptedLanguage", "answer", "grid", "state", "pages"], outputs: ["subFormChange"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-navigation-tabs', template: "<div class=\"tab-inner-container\" [ngClass]=\"{ 'skip-margin': skipMargin}\">\n  <div class=\"d-flex gap-2\">\n    <div class=\"tab-navigation\" *ngIf=\"!hideTabs\">\n      <ul class=\"nav nav-tabs navTabs\" id=\"myTab\" role=\"tablist\">\n        <li\n          class=\"nav-item\"\n          role=\"presentation\"\n          *ngFor=\"let page of pageDetails; let i = index; trackBy: trackByIndex\"\n          [ngClass]=\"{'nav-item-ara': acceptedLanguage === 'ara', 'nav-item-default': acceptedLanguage !== 'ara'}\"\n        >\n          <button\n            class=\"nav-link\"\n            [title]=\"page.name\"\n            data-bs-toggle=\"tooltip\"\n            data-bs-placement=\"top\"\n            data-bs-custom-class=\"custom-tooltip\"\n            [class.active]=\"i === currentPageIndex\"\n            id=\"tab-{{ i }}\"\n            type=\"button\"\n            role=\"tab\"\n            [attr.aria-controls]=\"'content-' + i\"\n            [attr.aria-selected]=\"i === currentPageIndex\"\n            (click)=\"setCurrentPage(i)\"\n          >\n            {{ page.name }}\n          </button>\n        </li>\n      </ul>\n    </div>\n    <div class=\"d-flex align-items-center\" *ngIf=\"showNavArrows\">\n      <button class=\"nav-arrow\">\n        <img src=\"assets/icons/left_arrow.svg\" alt=\"left arrow\"\n        (click)=\"scrollTabs(-1)\">\n        <img src=\"assets/icons/right_arrow.svg\" alt=\"right arrow\"\n        (click)=\"scrollTabs(1)\">\n      </button>\n    </div>\n  </div>\n\n\n\n  <div class=\"tab-content pt-5 pb-3 px-1\" [attr.name]=\"pages[currentPageIndex].testElementName\">\n    <ng-container *ngIf=\"pages[currentPageIndex]\">\n      <div\n        class=\"tab-pane fade show active\"\n        id=\"content-{{ currentPageIndex }}\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-' + currentPageIndex\"\n      >\n        <div *ngIf=\"loadedPages[currentPageIndex]\">\n          <div class=\"data-container\"\n          infiniteScroll\n          [infiniteScrollDistance]=\"2\"\n          [infiniteScrollThrottle]=\"200\"\n          (scrolled)=\"loadMoreData()\">\n          <div *ngFor=\"let row of pages[currentPageIndex].rows\">\n            <div class=\"margin d-flex\">\n              <div *ngFor=\"let grid of row.grid\"\n                   [ngStyle]=\"{'width.%': (grid.element.count) * (100 / 12)}\">\n                <lib-form-elements\n                  [grid]=\"grid\"\n                  [edit]=\"edit\"\n                  [acceptedLanguage]=\"acceptedLanguage\"\n                  [pages]=\"pages\"\n                  (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n                ></lib-form-elements>\n              </div>\n            </div>\n          </div>\n          </div>\n          <div class=\"footerButton d-flex justify-content-between align-items-center me-4 ms-4 position-relative\">\n          <!-- Hover detection container -->\n                    <div  [ngStyle]=\"{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }\" id=\"captcha-container\"></div>\n          <div\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n\n          <div  *ngIf=\"currentPageIndex == pageDetails.length - 1\">\n            <button *ngIf=\"showCancelButton\" class=\"btn submitButton rounded-pill bg-secondary text-white\"\n            (click)=\"cancelled()\" type=\"button\"\n            >Cancel</button>\n               <button\n            *ngIf=\"!isActionTriggered && skipValidation\"\n              class=\"btn rounded-pill submitButton text-white\"\n              [ngStyle]=\"{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }\"\n              type=\"button\"\n              (click)=\"saveAsDraft()\"\n              [disabled]=\"!eligibleForSubmission.status || submissionInDraft\"\n            >\n            <ng-container *ngIf=\"submissionInDraft; else showSubmitText\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n              Submitting...\n            </ng-container>\n            <ng-template #showSubmitText>\n             Save Draft\n            </ng-template>\n            </button>\n            \n\n            <button\n            *ngIf=\"!isActionTriggered\"\n              class=\"btn rounded-pill submitButton text-white\"\n              [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n              type=\"button\"\n              (click)=\"submitForm()\"\n              [disabled]=\"!eligibleForSubmission.status || submissionInProgress\"\n            >\n            <ng-container *ngIf=\"submissionInProgress; else showSubmitText\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n              Submitting...\n            </ng-container>\n            <ng-template #showSubmitText>\n              Submit\n            </ng-template>\n            </button>\n            <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n              </div>\n          </div>\n\n        </div>\n\n\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".tab-inner-container{width:100%;position:relative;padding:3rem}@media (max-width: 1024px){.tab-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.tab-inner-container{padding:2rem .5rem}}.skip-margin{padding:0}.custom-tooltip{visibility:hidden;position:absolute;top:-40px;right:0;background:#efefef;color:#7b7878;padding:8px 12px;border-radius:12px;box-shadow:0 4px 8px #00000026;font-size:14px;white-space:nowrap;z-index:10}.custom-tooltip.warning{background:linear-gradient(135deg,gold,#ffb400)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.footerButton:hover .custom-tooltip{visibility:visible}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important;padding-right:0}.nav-item{background-color:#fff;border-radius:5px}.nav-item.nav-item-default{margin-right:.5%}.nav-item.nav-item-ara{margin-left:.5%}.nav-link{position:relative;margin-bottom:-2px;padding-left:25px;padding-right:25px}.nav-link:after{content:\"\";position:absolute;left:0;bottom:0;width:101%;height:6px;background:#efefef}.nav-link.active:after{display:none}.tab-content{background-color:#fff}.custom-tooltip{--bs-tooltip-bg: var(--bd-violet-bg);--bs-tooltip-color: var(--bs-white)}.tab-navigation{position:relative;display:flex;align-items:center;width:95%}.navTabs{display:flex;overflow-x:auto;scroll-behavior:smooth;white-space:nowrap;width:100%;padding:0;margin:0;scrollbar-width:none;-ms-overflow-style:none}.navTabs::-webkit-scrollbar{display:none}.nav-arrow{position:absolute;background:#fff;border:none;cursor:pointer;font-size:20px;font-weight:700;padding:5px 10px;z-index:1000;box-shadow:0 2px 5px #0003;width:45px;height:27px;gap:13px;display:flex;justify-content:center;align-items:center;border-radius:6px}.nav-arrow img{width:8px;height:15px}.submitButton{margin-right:1rem}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}@keyframes spinner-border{to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'lib-navigation-tabs', template: "<div class=\"tab-inner-container\" [ngClass]=\"{ 'skip-margin': skipMargin}\">\n  <div class=\"d-flex gap-2\">\n    <div class=\"tab-navigation\" *ngIf=\"!hideTabs\">\n      <ul class=\"nav nav-tabs navTabs\" id=\"myTab\" role=\"tablist\">\n        <li\n          class=\"nav-item\"\n          role=\"presentation\"\n          *ngFor=\"let page of pageDetails; let i = index; trackBy: trackByIndex\"\n          [ngClass]=\"{'nav-item-ara': acceptedLanguage === 'ara', 'nav-item-default': acceptedLanguage !== 'ara'}\"\n        >\n          <button\n            class=\"nav-link\"\n            [title]=\"page.name\"\n            data-bs-toggle=\"tooltip\"\n            data-bs-placement=\"top\"\n            data-bs-custom-class=\"custom-tooltip\"\n            [class.active]=\"i === currentPageIndex\"\n            id=\"tab-{{ i }}\"\n            type=\"button\"\n            role=\"tab\"\n            [attr.aria-controls]=\"'content-' + i\"\n            [attr.aria-selected]=\"i === currentPageIndex\"\n            (click)=\"setCurrentPage(i)\"\n          >\n            {{ page.name }}\n          </button>\n        </li>\n      </ul>\n    </div>\n    <div class=\"d-flex align-items-center\" *ngIf=\"showNavArrows\">\n      <button class=\"nav-arrow\">\n        <img src=\"assets/icons/left_arrow.svg\" alt=\"left arrow\"\n        (click)=\"scrollTabs(-1)\">\n        <img src=\"assets/icons/right_arrow.svg\" alt=\"right arrow\"\n        (click)=\"scrollTabs(1)\">\n      </button>\n    </div>\n  </div>\n\n\n\n  <div class=\"tab-content pt-5 pb-3 px-1\" [attr.name]=\"pages[currentPageIndex].testElementName\">\n    <ng-container *ngIf=\"pages[currentPageIndex]\">\n      <div\n        class=\"tab-pane fade show active\"\n        id=\"content-{{ currentPageIndex }}\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-' + currentPageIndex\"\n      >\n        <div *ngIf=\"loadedPages[currentPageIndex]\">\n          <div class=\"data-container\"\n          infiniteScroll\n          [infiniteScrollDistance]=\"2\"\n          [infiniteScrollThrottle]=\"200\"\n          (scrolled)=\"loadMoreData()\">\n          <div *ngFor=\"let row of pages[currentPageIndex].rows\">\n            <div class=\"margin d-flex\">\n              <div *ngFor=\"let grid of row.grid\"\n                   [ngStyle]=\"{'width.%': (grid.element.count) * (100 / 12)}\">\n                <lib-form-elements\n                  [grid]=\"grid\"\n                  [edit]=\"edit\"\n                  [acceptedLanguage]=\"acceptedLanguage\"\n                  [pages]=\"pages\"\n                  (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n                ></lib-form-elements>\n              </div>\n            </div>\n          </div>\n          </div>\n          <div class=\"footerButton d-flex justify-content-between align-items-center me-4 ms-4 position-relative\">\n          <!-- Hover detection container -->\n                    <div  [ngStyle]=\"{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }\" id=\"captcha-container\"></div>\n          <div\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n\n          <div  *ngIf=\"currentPageIndex == pageDetails.length - 1\">\n            <button *ngIf=\"showCancelButton\" class=\"btn submitButton rounded-pill bg-secondary text-white\"\n            (click)=\"cancelled()\" type=\"button\"\n            >Cancel</button>\n               <button\n            *ngIf=\"!isActionTriggered && skipValidation\"\n              class=\"btn rounded-pill submitButton text-white\"\n              [ngStyle]=\"{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }\"\n              type=\"button\"\n              (click)=\"saveAsDraft()\"\n              [disabled]=\"!eligibleForSubmission.status || submissionInDraft\"\n            >\n            <ng-container *ngIf=\"submissionInDraft; else showSubmitText\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n              Submitting...\n            </ng-container>\n            <ng-template #showSubmitText>\n             Save Draft\n            </ng-template>\n            </button>\n            \n\n            <button\n            *ngIf=\"!isActionTriggered\"\n              class=\"btn rounded-pill submitButton text-white\"\n              [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n              type=\"button\"\n              (click)=\"submitForm()\"\n              [disabled]=\"!eligibleForSubmission.status || submissionInProgress\"\n            >\n            <ng-container *ngIf=\"submissionInProgress; else showSubmitText\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n              Submitting...\n            </ng-container>\n            <ng-template #showSubmitText>\n              Submit\n            </ng-template>\n            </button>\n            <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n              </div>\n          </div>\n\n        </div>\n        <div *ngIf=\"submissionInProgress\" class=\"text-loader\">\n          {{ currentStep }}{{ animatedDots }}\n          <span class=\"percentage\">{{ submissionProgress }}%</span>\n        </div>\n\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".tab-inner-container{width:100%;position:relative;padding:3rem}@media (max-width: 1024px){.tab-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.tab-inner-container{padding:2rem .5rem}}.skip-margin{padding:0}.custom-tooltip{visibility:hidden;position:absolute;top:-40px;right:0;background:#efefef;color:#7b7878;padding:8px 12px;border-radius:12px;box-shadow:0 4px 8px #00000026;font-size:14px;white-space:nowrap;z-index:10}.custom-tooltip.warning{background:linear-gradient(135deg,gold,#ffb400)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.footerButton:hover .custom-tooltip{visibility:visible}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important;padding-right:0}.nav-item{background-color:#fff;border-radius:5px}.nav-item.nav-item-default{margin-right:.5%}.nav-item.nav-item-ara{margin-left:.5%}.nav-link{position:relative;margin-bottom:-2px;padding-left:25px;padding-right:25px}.nav-link:after{content:\"\";position:absolute;left:0;bottom:0;width:101%;height:6px;background:#efefef}.nav-link.active:after{display:none}.tab-content{background-color:#fff}.custom-tooltip{--bs-tooltip-bg: var(--bd-violet-bg);--bs-tooltip-color: var(--bs-white)}.tab-navigation{position:relative;display:flex;align-items:center;width:95%}.navTabs{display:flex;overflow-x:auto;scroll-behavior:smooth;white-space:nowrap;width:100%;padding:0;margin:0;scrollbar-width:none;-ms-overflow-style:none}.navTabs::-webkit-scrollbar{display:none}.nav-arrow{position:absolute;background:#fff;border:none;cursor:pointer;font-size:20px;font-weight:700;padding:5px 10px;z-index:1000;box-shadow:0 2px 5px #0003;width:45px;height:27px;gap:13px;display:flex;justify-content:center;align-items:center;border-radius:6px}.nav-arrow img{width:8px;height:15px}.submitButton{margin-right:1rem}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}@keyframes spinner-border{to{transform:rotate(360deg)}}.text-loader{font-size:14px;font-weight:500;padding:8px 12px;border-radius:6px;align-items:center;gap:8px;display:flex;justify-content:center}.percentage{font-weight:600;color:var(--primaryColor, #084fff)}\n"] }]
         }], ctorParameters: function () { return [{ type: FormValidationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { pages: [{
                 type: Input
             }], currentPageIndex: [{
@@ -9304,6 +9311,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], showCancelButton: [{
                 type: Input
+            }], submissionProgress: [{
+                type: Input
+            }], currentStep: [{
+                type: Input
+            }], animatedDots: [{
+                type: Input
             }] } });
 
 class SaveDraftModalComponent {
@@ -9525,6 +9538,9 @@ class NextPrevNavigationComponent {
         this.submissionInDraft = false;
         this.eligibleForSubmission = { status: true, message: '' };
         this.showCancelButton = false;
+        this.submissionProgress = 0;
+        this.currentStep = 'Submitting form';
+        this.animatedDots = '';
         this.showTooltip = false;
     }
     ngOnInit() {
@@ -9554,11 +9570,11 @@ class NextPrevNavigationComponent {
         this.cancel.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NextPrevNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: { skipValidation: "skipValidation", currentPageIndex: "currentPageIndex", pages: "pages", previousPage: "previousPage", nextPage: "nextPage", currentPage: "currentPage", pageDetails: "pageDetails", skipMargin: "skipMargin", edit: "edit", acceptedLanguage: "acceptedLanguage", primaryColor: "primaryColor", secondaryColor: "secondaryColor", isActionTriggered: "isActionTriggered", submissionInProgress: "submissionInProgress", submissionInDraft: "submissionInDraft", eligibleForSubmission: "eligibleForSubmission", showCancelButton: "showCancelButton" }, outputs: { navigateNext: "navigateNext", navigatePrevious: "navigatePrevious", submitEmit: "submitEmit", saveAsDraftEmit: "saveAsDraftEmit", cancel: "cancel", subFormChange: "subFormChange", rowSetIndex: "rowSetIndex" }, ngImport: i0, template: "<!-- <div class=\"pageTitleDiv\" *ngIf=\"!skipMargin\">\n  <p class=\"pageTitle\">{{pageDetails[currentPageIndex]?.name}}</p>\n</div> -->\n<div class=\"button-inner-container rounded\" [ngClass]=\"{ 'skip-margin': skipMargin}\">\n  <div class=\"tab-content pt-5 pb-3 row\" [attr.name]=\"pages[currentPageIndex].testElementName\">\n    <div class=\"data-container\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"200\"\n    (scrolled)=\"loadMoreData()\">\n\n    <div *ngFor=\"let row of pages[currentPageIndex]?.rows\" class=\"marginSize d-flex\">\n      <div *ngFor=\"let grid of row.grid\"\n      [ngStyle]=\"{'width.%': (grid.element.count) * (100 / (12))}\">\n        <lib-form-elements\n          [grid]=\"grid\"\n          [currentPageIndex]=\"currentPageIndex\"\n          [edit]=\"edit\"\n          [acceptedLanguage]=\"acceptedLanguage\"\n          [pages]=\"pages\"\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n          state=\"parent\"\n        ></lib-form-elements>\n      </div>\n    </div>\n    </div>\n   <div [ngStyle]=\"{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }\" id=\"captcha-container\"></div>\n\n    <div class=\"footerButton\">\n      <div\n        class=\"prevButtonDiv\"\n        [ngClass]=\"{ 'prevDirection-rtl': acceptedLanguage === 'ara' }\">\n        <button\n          class=\"me-md-2 rounded-pill navButton\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n          type=\"button\"\n          (click)=\"onNavigatePrevious()\"\n          *ngIf=\"0 < currentPageIndex\"\n        >\n          <ng-container *ngIf=\"acceptedLanguage === 'ara'; else defaultSvg\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M19.4897 12.0117L4.49975 12.0117\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </ng-container>\n          <ng-template #defaultSvg>\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M4.51025 11.9883L19.5003 11.9883\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </ng-template>\n          Previous | {{ previousPage.name }}\n        </button>\n      </div>\n      <div\n        class=\"nextButtonDiv\"\n        [ngClass]=\"{ 'nextDirection-rtl': acceptedLanguage === 'ara' }\"\n      >\n        <button\n          class=\"md-2 rounded-pill navButton\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n          type=\"button\"\n          (click)=\"onNavigateNext()\"\n          *ngIf=\"currentPageIndex < pageDetails.length - 1\"\n        >\n          Next | {{ nextPage.name }}\n          <ng-container *ngIf=\"acceptedLanguage === 'ara'; else defaultSvg\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M4.51025 11.9883L19.5003 11.9883\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </ng-container>\n          <ng-template #defaultSvg>\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M19.4897 12.0117L4.49975 12.0117\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </ng-template>\n        </button>\n        <button *ngIf=\"showCancelButton\" class=\"btn submitButton rounded-pill bg-secondary text-white\"\n        (click)=\"cancelled()\" type=\"button\"\n        >Cancel</button>\n        <div\n             *ngIf=\"skipValidation\"\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n          <button\n          class=\"submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center\"\n          [ngStyle]=\"{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pageDetails.length - 1 && !isActionTriggered\"\n          (click)=\"saveAsDraft()\"\n          [disabled]=\"!eligibleForSubmission.status || submissionInDraft\"\n        >\n          <ng-container *ngIf=\"submissionInDraft; else showSubmitText\">\n\n            <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n            Submitting...\n          </ng-container>\n          <ng-template #showSubmitText>\n            Save Draft\n          </ng-template>\n        </button>\n           <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n      </div>\n\n  <div\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n          <button\n          class=\"submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor : '#084fff' }\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pageDetails.length - 1 && !isActionTriggered\"\n          (click)=\"submitForm()\"\n          [disabled]=\"!eligibleForSubmission.status || submissionInProgress\"\n        >\n          <ng-container *ngIf=\"submissionInProgress; else showSubmitText\">\n            <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n            Submitting...\n          </ng-container>\n          <ng-template #showSubmitText>\n            Submit\n          </ng-template>\n        </button>\n           <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n      </div>\n\n    </div>\n  </div>\n</div>\n", styles: [".pageTitle{font-size:15px;font-weight:500}#captcha-container{display:flex;justify-content:center;align-items:center;padding-left:1.8rem}.grecaptcha-popup{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;z-index:9999;border-radius:50%}@media (max-width: 480px){.g-recaptcha{transform:scale(.85);transform-origin:center}}.pageTitleDiv{padding-left:3rem;padding-top:3rem;padding-right:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-right:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-right:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:2rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}.skip-margin{padding:0}@media (max-width: 576px){.marginSize{padding:0!important}}.footerButton{padding:10px 32px 16px 30px;display:flex;flex-wrap:wrap}@media (max-width: 576px){.footerButton{padding-left:20px;padding-right:17px}}.navButton{color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:flex-end;margin-left:auto;margin-bottom:5px}.nextDirection-rtl{margin-left:0;margin-right:auto}.tab-content,.row{background-color:#fff}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}@keyframes spinner-border{to{transform:rotate(360deg)}}.custom-tooltip{visibility:hidden;position:absolute;top:-40px;right:0;background:#efefef;color:#7b7878;padding:8px 12px;border-radius:12px;box-shadow:0 4px 8px #00000026;font-size:14px;white-space:nowrap;z-index:10}.custom-tooltip.warning{background:linear-gradient(135deg,gold,#ffb400)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.footerButton:hover .custom-tooltip{visibility:visible}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["currentPageIndex", "edit", "acceptedLanguage", "answer", "grid", "state", "pages"], outputs: ["subFormChange"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: { skipValidation: "skipValidation", currentPageIndex: "currentPageIndex", pages: "pages", previousPage: "previousPage", nextPage: "nextPage", currentPage: "currentPage", pageDetails: "pageDetails", skipMargin: "skipMargin", edit: "edit", acceptedLanguage: "acceptedLanguage", primaryColor: "primaryColor", secondaryColor: "secondaryColor", isActionTriggered: "isActionTriggered", submissionInProgress: "submissionInProgress", submissionInDraft: "submissionInDraft", eligibleForSubmission: "eligibleForSubmission", showCancelButton: "showCancelButton", submissionProgress: "submissionProgress", currentStep: "currentStep", animatedDots: "animatedDots" }, outputs: { navigateNext: "navigateNext", navigatePrevious: "navigatePrevious", submitEmit: "submitEmit", saveAsDraftEmit: "saveAsDraftEmit", cancel: "cancel", subFormChange: "subFormChange", rowSetIndex: "rowSetIndex" }, ngImport: i0, template: "<!-- <div class=\"pageTitleDiv\" *ngIf=\"!skipMargin\">\n  <p class=\"pageTitle\">{{pageDetails[currentPageIndex]?.name}}</p>\n</div> -->\n<div class=\"button-inner-container rounded\" [ngClass]=\"{ 'skip-margin': skipMargin}\">\n  <div class=\"tab-content pt-5 pb-3 row\" [attr.name]=\"pages[currentPageIndex].testElementName\">\n    <div class=\"data-container\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"200\"\n    (scrolled)=\"loadMoreData()\">\n\n    <div *ngFor=\"let row of pages[currentPageIndex]?.rows\" class=\"marginSize d-flex\">\n      <div *ngFor=\"let grid of row.grid\"\n      [ngStyle]=\"{'width.%': (grid.element.count) * (100 / (12))}\">\n        <lib-form-elements\n          [grid]=\"grid\"\n          [currentPageIndex]=\"currentPageIndex\"\n          [edit]=\"edit\"\n          [acceptedLanguage]=\"acceptedLanguage\"\n          [pages]=\"pages\"\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n          state=\"parent\"\n        ></lib-form-elements>\n      </div>\n    </div>\n    </div>\n   <div [ngStyle]=\"{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }\" id=\"captcha-container\"></div>\n\n    <div class=\"footerButton\">\n      <div\n        class=\"prevButtonDiv\"\n        [ngClass]=\"{ 'prevDirection-rtl': acceptedLanguage === 'ara' }\">\n        <button\n          class=\"me-md-2 rounded-pill navButton\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n          type=\"button\"\n          (click)=\"onNavigatePrevious()\"\n          *ngIf=\"0 < currentPageIndex\"\n        >\n          <ng-container *ngIf=\"acceptedLanguage === 'ara'; else defaultSvg\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M19.4897 12.0117L4.49975 12.0117\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </ng-container>\n          <ng-template #defaultSvg>\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M4.51025 11.9883L19.5003 11.9883\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </ng-template>\n          Previous | {{ previousPage.name }}\n        </button>\n      </div>\n      <div\n        class=\"nextButtonDiv\"\n        [ngClass]=\"{ 'nextDirection-rtl': acceptedLanguage === 'ara' }\"\n      >\n        <button\n          class=\"md-2 rounded-pill navButton\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n          type=\"button\"\n          (click)=\"onNavigateNext()\"\n          *ngIf=\"currentPageIndex < pageDetails.length - 1\"\n        >\n          Next | {{ nextPage.name }}\n          <ng-container *ngIf=\"acceptedLanguage === 'ara'; else defaultSvg\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M4.51025 11.9883L19.5003 11.9883\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </ng-container>\n          <ng-template #defaultSvg>\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M19.4897 12.0117L4.49975 12.0117\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </ng-template>\n        </button>\n        <button *ngIf=\"showCancelButton && currentPageIndex == pageDetails.length - 1\" class=\"btn submitButton rounded-pill bg-secondary text-white\"\n        (click)=\"cancelled()\" type=\"button\"\n        >Cancel</button>\n        <div\n             *ngIf=\"skipValidation\"\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n          <button\n          class=\"submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center\"\n          [ngStyle]=\"{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pageDetails.length - 1 && !isActionTriggered\"\n          (click)=\"saveAsDraft()\"\n          [disabled]=\"!eligibleForSubmission.status || submissionInDraft\"\n        >\n          <ng-container *ngIf=\"submissionInDraft; else showSubmitText\">\n\n            <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n            Submitting...\n          </ng-container>\n          <ng-template #showSubmitText>\n            Save Draft\n          </ng-template>\n        </button>\n           <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n      </div>\n\n  <div\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n          <button\n          class=\"submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor : '#084fff' }\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pageDetails.length - 1 && !isActionTriggered\"\n          (click)=\"submitForm()\"\n          [disabled]=\"!eligibleForSubmission.status || submissionInProgress\"\n        >\n          <ng-container *ngIf=\"submissionInProgress; else showSubmitText\">\n            <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n            Submitting...\n          </ng-container>\n          <ng-template #showSubmitText>\n            Submit\n          </ng-template>\n        </button>\n           <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n      </div>\n\n    </div>\n  </div>\n  <div *ngIf=\"submissionInProgress\" class=\"text-loader\">\n    {{ currentStep }}{{ animatedDots }}\n    <span class=\"percentage\">{{ submissionProgress }}%</span>\n  </div>\n</div>\n", styles: [".pageTitle{font-size:15px;font-weight:500}#captcha-container{display:flex;justify-content:center;align-items:center;padding-left:1.8rem}.grecaptcha-popup{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;z-index:9999;border-radius:50%}@media (max-width: 480px){.g-recaptcha{transform:scale(.85);transform-origin:center}}.pageTitleDiv{padding-left:3rem;padding-top:3rem;padding-right:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-right:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-right:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:2rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}.skip-margin{padding:0}@media (max-width: 576px){.marginSize{padding:0!important}}.footerButton{padding:10px 32px 16px 30px;display:flex;flex-wrap:wrap}@media (max-width: 576px){.footerButton{padding-left:20px;padding-right:17px}}.navButton{color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:flex-end;margin-left:auto;margin-bottom:5px}.nextDirection-rtl{margin-left:0;margin-right:auto}.tab-content,.row{background-color:#fff}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}@keyframes spinner-border{to{transform:rotate(360deg)}}.custom-tooltip{visibility:hidden;position:absolute;top:-40px;right:0;background:#efefef;color:#7b7878;padding:8px 12px;border-radius:12px;box-shadow:0 4px 8px #00000026;font-size:14px;white-space:nowrap;z-index:10}.custom-tooltip.warning{background:linear-gradient(135deg,gold,#ffb400)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.footerButton:hover .custom-tooltip{visibility:visible}.text-loader{font-size:14px;font-weight:500;padding:8px 12px;border-radius:6px;align-items:center;gap:8px;display:flex;justify-content:center}.percentage{font-weight:600;color:var(--primaryColor, #084fff)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["currentPageIndex", "edit", "acceptedLanguage", "answer", "grid", "state", "pages"], outputs: ["subFormChange"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NextPrevNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-next-prev-navigation', template: "<!-- <div class=\"pageTitleDiv\" *ngIf=\"!skipMargin\">\n  <p class=\"pageTitle\">{{pageDetails[currentPageIndex]?.name}}</p>\n</div> -->\n<div class=\"button-inner-container rounded\" [ngClass]=\"{ 'skip-margin': skipMargin}\">\n  <div class=\"tab-content pt-5 pb-3 row\" [attr.name]=\"pages[currentPageIndex].testElementName\">\n    <div class=\"data-container\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"200\"\n    (scrolled)=\"loadMoreData()\">\n\n    <div *ngFor=\"let row of pages[currentPageIndex]?.rows\" class=\"marginSize d-flex\">\n      <div *ngFor=\"let grid of row.grid\"\n      [ngStyle]=\"{'width.%': (grid.element.count) * (100 / (12))}\">\n        <lib-form-elements\n          [grid]=\"grid\"\n          [currentPageIndex]=\"currentPageIndex\"\n          [edit]=\"edit\"\n          [acceptedLanguage]=\"acceptedLanguage\"\n          [pages]=\"pages\"\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n          state=\"parent\"\n        ></lib-form-elements>\n      </div>\n    </div>\n    </div>\n   <div [ngStyle]=\"{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }\" id=\"captcha-container\"></div>\n\n    <div class=\"footerButton\">\n      <div\n        class=\"prevButtonDiv\"\n        [ngClass]=\"{ 'prevDirection-rtl': acceptedLanguage === 'ara' }\">\n        <button\n          class=\"me-md-2 rounded-pill navButton\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n          type=\"button\"\n          (click)=\"onNavigatePrevious()\"\n          *ngIf=\"0 < currentPageIndex\"\n        >\n          <ng-container *ngIf=\"acceptedLanguage === 'ara'; else defaultSvg\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M19.4897 12.0117L4.49975 12.0117\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </ng-container>\n          <ng-template #defaultSvg>\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M4.51025 11.9883L19.5003 11.9883\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </ng-template>\n          Previous | {{ previousPage.name }}\n        </button>\n      </div>\n      <div\n        class=\"nextButtonDiv\"\n        [ngClass]=\"{ 'nextDirection-rtl': acceptedLanguage === 'ara' }\"\n      >\n        <button\n          class=\"md-2 rounded-pill navButton\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n          type=\"button\"\n          (click)=\"onNavigateNext()\"\n          *ngIf=\"currentPageIndex < pageDetails.length - 1\"\n        >\n          Next | {{ nextPage.name }}\n          <ng-container *ngIf=\"acceptedLanguage === 'ara'; else defaultSvg\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M4.51025 11.9883L19.5003 11.9883\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </ng-container>\n          <ng-template #defaultSvg>\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M19.4897 12.0117L4.49975 12.0117\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </ng-template>\n        </button>\n        <button *ngIf=\"showCancelButton\" class=\"btn submitButton rounded-pill bg-secondary text-white\"\n        (click)=\"cancelled()\" type=\"button\"\n        >Cancel</button>\n        <div\n             *ngIf=\"skipValidation\"\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n          <button\n          class=\"submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center\"\n          [ngStyle]=\"{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pageDetails.length - 1 && !isActionTriggered\"\n          (click)=\"saveAsDraft()\"\n          [disabled]=\"!eligibleForSubmission.status || submissionInDraft\"\n        >\n          <ng-container *ngIf=\"submissionInDraft; else showSubmitText\">\n\n            <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n            Submitting...\n          </ng-container>\n          <ng-template #showSubmitText>\n            Save Draft\n          </ng-template>\n        </button>\n           <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n      </div>\n\n  <div\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n          <button\n          class=\"submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor : '#084fff' }\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pageDetails.length - 1 && !isActionTriggered\"\n          (click)=\"submitForm()\"\n          [disabled]=\"!eligibleForSubmission.status || submissionInProgress\"\n        >\n          <ng-container *ngIf=\"submissionInProgress; else showSubmitText\">\n            <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n            Submitting...\n          </ng-container>\n          <ng-template #showSubmitText>\n            Submit\n          </ng-template>\n        </button>\n           <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n      </div>\n\n    </div>\n  </div>\n</div>\n", styles: [".pageTitle{font-size:15px;font-weight:500}#captcha-container{display:flex;justify-content:center;align-items:center;padding-left:1.8rem}.grecaptcha-popup{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;z-index:9999;border-radius:50%}@media (max-width: 480px){.g-recaptcha{transform:scale(.85);transform-origin:center}}.pageTitleDiv{padding-left:3rem;padding-top:3rem;padding-right:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-right:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-right:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:2rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}.skip-margin{padding:0}@media (max-width: 576px){.marginSize{padding:0!important}}.footerButton{padding:10px 32px 16px 30px;display:flex;flex-wrap:wrap}@media (max-width: 576px){.footerButton{padding-left:20px;padding-right:17px}}.navButton{color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:flex-end;margin-left:auto;margin-bottom:5px}.nextDirection-rtl{margin-left:0;margin-right:auto}.tab-content,.row{background-color:#fff}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}@keyframes spinner-border{to{transform:rotate(360deg)}}.custom-tooltip{visibility:hidden;position:absolute;top:-40px;right:0;background:#efefef;color:#7b7878;padding:8px 12px;border-radius:12px;box-shadow:0 4px 8px #00000026;font-size:14px;white-space:nowrap;z-index:10}.custom-tooltip.warning{background:linear-gradient(135deg,gold,#ffb400)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.footerButton:hover .custom-tooltip{visibility:visible}\n"] }]
+            args: [{ selector: 'lib-next-prev-navigation', template: "<!-- <div class=\"pageTitleDiv\" *ngIf=\"!skipMargin\">\n  <p class=\"pageTitle\">{{pageDetails[currentPageIndex]?.name}}</p>\n</div> -->\n<div class=\"button-inner-container rounded\" [ngClass]=\"{ 'skip-margin': skipMargin}\">\n  <div class=\"tab-content pt-5 pb-3 row\" [attr.name]=\"pages[currentPageIndex].testElementName\">\n    <div class=\"data-container\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"200\"\n    (scrolled)=\"loadMoreData()\">\n\n    <div *ngFor=\"let row of pages[currentPageIndex]?.rows\" class=\"marginSize d-flex\">\n      <div *ngFor=\"let grid of row.grid\"\n      [ngStyle]=\"{'width.%': (grid.element.count) * (100 / (12))}\">\n        <lib-form-elements\n          [grid]=\"grid\"\n          [currentPageIndex]=\"currentPageIndex\"\n          [edit]=\"edit\"\n          [acceptedLanguage]=\"acceptedLanguage\"\n          [pages]=\"pages\"\n          (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n          state=\"parent\"\n        ></lib-form-elements>\n      </div>\n    </div>\n    </div>\n   <div [ngStyle]=\"{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }\" id=\"captcha-container\"></div>\n\n    <div class=\"footerButton\">\n      <div\n        class=\"prevButtonDiv\"\n        [ngClass]=\"{ 'prevDirection-rtl': acceptedLanguage === 'ara' }\">\n        <button\n          class=\"me-md-2 rounded-pill navButton\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n          type=\"button\"\n          (click)=\"onNavigatePrevious()\"\n          *ngIf=\"0 < currentPageIndex\"\n        >\n          <ng-container *ngIf=\"acceptedLanguage === 'ara'; else defaultSvg\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M19.4897 12.0117L4.49975 12.0117\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </ng-container>\n          <ng-template #defaultSvg>\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M4.51025 11.9883L19.5003 11.9883\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </ng-template>\n          Previous | {{ previousPage.name }}\n        </button>\n      </div>\n      <div\n        class=\"nextButtonDiv\"\n        [ngClass]=\"{ 'nextDirection-rtl': acceptedLanguage === 'ara' }\"\n      >\n        <button\n          class=\"md-2 rounded-pill navButton\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor: '#084fff' }\"\n          type=\"button\"\n          (click)=\"onNavigateNext()\"\n          *ngIf=\"currentPageIndex < pageDetails.length - 1\"\n        >\n          Next | {{ nextPage.name }}\n          <ng-container *ngIf=\"acceptedLanguage === 'ara'; else defaultSvg\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M4.51025 11.9883L19.5003 11.9883\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </ng-container>\n          <ng-template #defaultSvg>\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M19.4897 12.0117L4.49975 12.0117\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n              <path\n                d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\n                stroke=\"white\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </ng-template>\n        </button>\n        <button *ngIf=\"showCancelButton && currentPageIndex == pageDetails.length - 1\" class=\"btn submitButton rounded-pill bg-secondary text-white\"\n        (click)=\"cancelled()\" type=\"button\"\n        >Cancel</button>\n        <div\n             *ngIf=\"skipValidation\"\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n          <button\n          class=\"submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center\"\n          [ngStyle]=\"{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pageDetails.length - 1 && !isActionTriggered\"\n          (click)=\"saveAsDraft()\"\n          [disabled]=\"!eligibleForSubmission.status || submissionInDraft\"\n        >\n          <ng-container *ngIf=\"submissionInDraft; else showSubmitText\">\n\n            <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n            Submitting...\n          </ng-container>\n          <ng-template #showSubmitText>\n            Save Draft\n          </ng-template>\n        </button>\n           <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n      </div>\n\n  <div\n            class=\"button-container position-relative\"\n            (mouseenter)=\"showTooltip = true\"\n            (mouseleave)=\"showTooltip = false\"\n          >\n          <button\n          class=\"submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center\"\n          [ngStyle]=\"{ 'background-color': primaryColor ? primaryColor : '#084fff' }\"\n          type=\"button\"\n          *ngIf=\"currentPageIndex == pageDetails.length - 1 && !isActionTriggered\"\n          (click)=\"submitForm()\"\n          [disabled]=\"!eligibleForSubmission.status || submissionInProgress\"\n        >\n          <ng-container *ngIf=\"submissionInProgress; else showSubmitText\">\n            <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"></span>\n            Submitting...\n          </ng-container>\n          <ng-template #showSubmitText>\n            Submit\n          </ng-template>\n        </button>\n           <div *ngIf=\"showTooltip && !eligibleForSubmission.status\" class=\"custom-tooltip\">\n              {{eligibleForSubmission.message}}\n            </div>\n      </div>\n\n    </div>\n  </div>\n  <div *ngIf=\"submissionInProgress\" class=\"text-loader\">\n    {{ currentStep }}{{ animatedDots }}\n    <span class=\"percentage\">{{ submissionProgress }}%</span>\n  </div>\n</div>\n", styles: [".pageTitle{font-size:15px;font-weight:500}#captcha-container{display:flex;justify-content:center;align-items:center;padding-left:1.8rem}.grecaptcha-popup{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;z-index:9999;border-radius:50%}@media (max-width: 480px){.g-recaptcha{transform:scale(.85);transform-origin:center}}.pageTitleDiv{padding-left:3rem;padding-top:3rem;padding-right:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-right:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-right:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:2rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}.skip-margin{padding:0}@media (max-width: 576px){.marginSize{padding:0!important}}.footerButton{padding:10px 32px 16px 30px;display:flex;flex-wrap:wrap}@media (max-width: 576px){.footerButton{padding-left:20px;padding-right:17px}}.navButton{color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:flex-end;margin-left:auto;margin-bottom:5px}.nextDirection-rtl{margin-left:0;margin-right:auto}.tab-content,.row{background-color:#fff}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}@keyframes spinner-border{to{transform:rotate(360deg)}}.custom-tooltip{visibility:hidden;position:absolute;top:-40px;right:0;background:#efefef;color:#7b7878;padding:8px 12px;border-radius:12px;box-shadow:0 4px 8px #00000026;font-size:14px;white-space:nowrap;z-index:10}.custom-tooltip.warning{background:linear-gradient(135deg,gold,#ffb400)}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.footerButton:hover .custom-tooltip{visibility:visible}.text-loader{font-size:14px;font-weight:500;padding:8px 12px;border-radius:6px;align-items:center;gap:8px;display:flex;justify-content:center}.percentage{font-weight:600;color:var(--primaryColor, #084fff)}\n"] }]
         }], propDecorators: { skipValidation: [{
                 type: Input
             }], currentPageIndex: [{
@@ -9607,6 +9623,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], showCancelButton: [{
                 type: Input
+            }], submissionProgress: [{
+                type: Input
+            }], currentStep: [{
+                type: Input
+            }], animatedDots: [{
+                type: Input
             }] } });
 
 class SubmissionContainerComponent {
@@ -9705,12 +9727,16 @@ class SubmitFormComponent {
         this.inValidQuestions = new Map();
         this.visitedRows = new Map();
         this.allElementIds = [];
-        this.primaryColor = '';
+        this.primaryColor = '#084fff';
         this.secondaryColor = '';
         this.isLoadingPages = false;
         this.copySubforms = [];
         this.emitters = [];
         this.draft = false;
+        this.submissionProgress = 0;
+        this.showSubmissionLoader = false;
+        this.currentStep = 'Submitting form';
+        this.animatedDots = '';
         this.updateSubForm = (pages, updatedSubForm) => {
             pages.forEach((page) => {
                 page.rows.forEach((row) => {
@@ -9837,7 +9863,7 @@ class SubmitFormComponent {
             this.emitters = this.question.emitters || [];
             this.assignQuestionProperties(this.question);
             this.setUpFontFamily(response);
-            this.primaryColor = response.result.primaryColor;
+            this.primaryColor = response.result.primaryColor || '#084fff';
             this.secondaryColor = response.result.secondaryColor;
             if (this.enableGoogleRecaptcha)
                 this.recaptchaInitialized();
@@ -9867,7 +9893,7 @@ class SubmitFormComponent {
                 response.result.moduleConfiguration.enableGoogleRecaptcha;
             this.question = mapPublicFormToModel(response);
             this.assignQuestionProperties(this.question);
-            this.primaryColor = response.result.primaryColor;
+            this.primaryColor = response.result.primaryColor || '#084fff';
             this.secondaryColor = response.result.secondaryColor;
             this.emitters = this.question.emitters || [];
             if (response?.result?.pageDetails) {
@@ -10541,6 +10567,7 @@ class SubmitFormComponent {
         this.submitForm();
     }
     async submitForm() {
+        this.startSubmissionLoader();
         if (this.webhook) {
             this.webhookPayloadArray = this.webhook.map((w) => ({
                 id: w.id,
@@ -10570,6 +10597,7 @@ class SubmitFormComponent {
                     this.toastr.error('Please complete the CAPTCHA verification before submitting the form.');
                     this.submissionInProgress = false;
                     this.submissionInDraft = false;
+                    this.resetSubmissionLoader();
                     this.validationSkip = false;
                     this.draft = false;
                     this.submit.emit({
@@ -10583,6 +10611,7 @@ class SubmitFormComponent {
                 this.toastr.error('Failed to verify reCAPTCHA.');
                 this.submissionInProgress = false;
                 this.submissionInDraft = false;
+                this.resetSubmissionLoader();
                 this.validationSkip = false;
                 this.draft = false;
                 this.submit.emit({
@@ -10605,6 +10634,7 @@ class SubmitFormComponent {
             this.saveasDraftPopup();
             this.submissionInProgress = false;
             this.submissionInDraft = false;
+            this.resetSubmissionLoader();
             this.validationSkip = false;
             this.draft = false;
             this.submit.emit({
@@ -10657,40 +10687,52 @@ class SubmitFormComponent {
                 ? this.formService.updateForm(this.moduleName, this.submissionId, formData, recaptchaToken ?? '')
                 : this.formService.submitForm(this.moduleName, formData, recaptchaToken ?? '');
             formServiceCall.subscribe({
-                next: (response) => {
-                    this.toastr.success(this.edit
-                        ? 'Form updated successfully'
-                        : 'Form submitted successfully');
-                    let emittingValues;
-                    if (this.emitters) {
-                        emittingValues = this.mapEmittersToValues();
-                    }
-                    if (this.validationSkip || this.draft) {
-                        this.submit.emit({
-                            status: 'draft',
-                            submissionId: response.result,
-                            score: formFinalScore,
-                            ...(emittingValues || {}),
-                        });
+                next: (event) => {
+                    if (event.type === HttpEventType.UploadProgress) {
+                        if (event.total) {
+                            const percentDone = Math.round((event.loaded / event.total) * 100);
+                            this.setProgress(Math.min(95, percentDone));
+                        }
                     }
-                    else {
-                        this.submit.emit({
-                            status: 'success',
-                            submissionId: response.result,
-                            score: formFinalScore,
-                            ...(emittingValues || {}),
-                        });
+                    if (event.type === HttpEventType.Response) {
+                        this.completeSubmissionLoader();
+                        const response = event.body;
+                        // existing success logic ↓
+                        this.toastr.success(this.edit
+                            ? 'Form updated successfully'
+                            : 'Form submitted successfully');
+                        let emittingValues;
+                        if (this.emitters) {
+                            emittingValues = this.mapEmittersToValues();
+                        }
+                        if (this.validationSkip || this.draft) {
+                            this.submit.emit({
+                                status: 'draft',
+                                submissionId: response.result,
+                                score: formFinalScore,
+                                ...(emittingValues || {}),
+                            });
+                        }
+                        else {
+                            this.submit.emit({
+                                status: 'success',
+                                submissionId: response.result,
+                                score: formFinalScore,
+                                ...(emittingValues || {}),
+                            });
+                        }
+                        this.submissionInProgress = false;
+                        this.submissionInDraft = false;
+                        this.draft = false;
+                        this.validationSkip = false;
                     }
-                    this.submissionInProgress = false;
-                    this.submissionInDraft = false;
-                    this.draft = false;
-                    this.validationSkip = false;
                 },
                 error: (error) => {
                     this.validationService.clearAll();
                     this.findQuestionPageIndex(this.parseErrorsToMap(error.error.message));
                     this.currentPageIndex = this.pages.length - 1;
                     this.navigateToFirstError();
+                    this.resetSubmissionLoader();
                     this.submissionInProgress = false;
                     this.draft = false;
                     this.validationSkip = false;
@@ -10711,10 +10753,61 @@ class SubmitFormComponent {
             this.saveasDraftPopup();
             this.submissionInProgress = false;
             this.submissionInDraft = false;
+            this.resetSubmissionLoader();
             this.validationSkip = false;
             this.draft = false;
         }
     }
+    setProgress(value) {
+        this.submissionProgress = value;
+        this.updateStepText(value);
+    }
+    startSubmissionLoader() {
+        this.showSubmissionLoader = true;
+        this.setProgress(0);
+        // Simulated progress until backend upload updates it
+        this.progressInterval = setInterval(() => {
+            if (this.submissionProgress < 85) {
+                this.setProgress(this.submissionProgress + 2);
+            }
+        }, 300);
+    }
+    completeSubmissionLoader() {
+        clearInterval(this.progressInterval);
+        this.setProgress(100);
+        setTimeout(() => {
+            this.showSubmissionLoader = false;
+            this.setProgress(0);
+        }, 500);
+    }
+    resetSubmissionLoader() {
+        clearInterval(this.progressInterval);
+        this.showSubmissionLoader = false;
+        clearInterval(this.dotInterval);
+        this.animatedDots = '';
+        this.setProgress(0);
+    }
+    startTextLoader() {
+        let dotCount = 0;
+        this.dotInterval = setInterval(() => {
+            dotCount = (dotCount + 1) % 4;
+            this.animatedDots = '.'.repeat(dotCount);
+        }, 500);
+    }
+    updateStepText(progress) {
+        if (progress < 25) {
+            this.currentStep = 'Validating form';
+        }
+        else if (progress < 60) {
+            this.currentStep = 'Uploading data';
+        }
+        else if (progress < 90) {
+            this.currentStep = 'Saving submission';
+        }
+        else {
+            this.currentStep = 'Finalizing';
+        }
+    }
     calculateFormFinalScore() {
         const goodScore = this.maxPossibleGoodScore
             ? 100 - (this.sumOfGoodFindings / this.maxPossibleGoodScore) * 100
@@ -11100,11 +11193,11 @@ class SubmitFormComponent {
         this.cancel.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmitFormComponent, deps: [{ token: FormService }, { token: i1$4.ToastrService }, { token: i2.Router }, { token: DataService }, { token: RecaptchaService }, { token: ValidationService }, { token: i0.ChangeDetectorRef }, { token: ElementTrackerService }, { token: FormValidationService }, { token: AggregationFunctionService }, { token: ScoreCalculationService }, { token: i1$3.MatDialog }, { token: WhenClauseService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubmitFormComponent, selector: "lib-submit-form", inputs: { moduleName: "moduleName", edit: "edit", submissionId: "submissionId", acceptedLanguage: "acceptedLanguage", skipMargin: "skipMargin", skipValidation: "skipValidation", navigateTo: "navigateTo", country: "country", showCancelButton: "showCancelButton", isActionTriggered: "isActionTriggered" }, outputs: { submit: "submit", apiCalled: "apiCalled", currentPageIndexChange: "currentPageIndexChange", cancel: "cancel" }, viewQueries: [{ propertyName: "child", first: true, predicate: NavigationTabsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\">\n\n<ng-container *ngIf=\"isLoadingPages\">\n    <ngx-skeleton-loader count=\"5\"></ngx-skeleton-loader>\n</ng-container>\n\n  <div class=\"head container\" *ngIf=\"!skipMargin\">\n    <lib-header [name]=\"name\" [skipMargin]=\"skipMargin\"></lib-header>\n  </div>\n\n\n\n  <div class=\"body\" [ngClass]=\"{ 'skip-margin': skipMargin,container: !skipMargin}\">\n\n    <lib-submission-container [parentQuestionAnswers]=\"parentQuestionAnswers\"\n    *ngIf=\"parentQuestionAnswers\"></lib-submission-container>\n\n    <lib-navigation-tabs\n      *ngIf=\"navigation == 'TAB'\"\n      [skipMargin]=\"skipMargin\"\n      [skipValidation]=\"skipValidation\"\n      [pages]=\"pages\"\n      [currentPageIndex]=\"currentPageIndex\"\n      (pageChanged)=\"setCurrentPage($event)\"\n      (submitEmit)=\"submitForm()\"\n      [pageDetails]=\"pageDetails\"\n      [eligibleForSubmission]=\"eligibleForSubmission\"\n      [edit]=\"edit\"\n      [acceptedLanguage] = \"acceptedLanguage\"\n      [isActionTriggered]=\"isActionTriggered\"\n      [primaryColor]=\"primaryColor\"\n      [secondaryColor]=\"secondaryColor\"\n      [markAllQuestionsAsRequired]=\"markAllQuestionsAsRequired\"\n      [submissionInProgress]=\"submissionInProgress\"\n      [submissionInDraft]=\"submissionInDraft\"\n      [showCancelButton]=\"showCancelButton\"\n      (saveAsDraftEmit)=\"saveAsDraft()\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n      (rowSetIndex)=\"loadMoreData($event)\"\n      (cancel)=\"cancelled()\"\n    ></lib-navigation-tabs>\n    <lib-next-prev-navigation\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\n      [skipMargin]=\"skipMargin\"\n      [currentPageIndex]=\"currentPageIndex\"\n      [pageDetails]=\"pageDetails\"\n      (rowSetIndex)=\"loadMoreData($event)\"\n      [pages]=\"pages\"\n      [previousPage]=\"previousPage\"\n      [isActionTriggered]=\"isActionTriggered\"\n      [currentPage]=\"currentPage\"\n      [primaryColor]=\"primaryColor\"\n      [secondaryColor]=\"secondaryColor\"\n      [nextPage]=\"nextPage\"\n      (navigateNext)=\"navigateToNextPage()\"\n      (navigatePrevious)=\"navigateToPreviousPage()\"\n      [acceptedLanguage] = \"acceptedLanguage\"\n      (submitEmit)=\"submitForm()\"\n      (saveAsDraftEmit)=\"saveAsDraft()\"\n      [edit]=\"edit\"\n      [eligibleForSubmission]=\"eligibleForSubmission\"\n      [submissionInProgress]=\"submissionInProgress\"\n      [submissionInDraft]=\"submissionInDraft\"\n      [showCancelButton]=\"showCancelButton\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n      (cancel)=\"cancelled()\"\n       [skipValidation]=\"skipValidation\"\n    ></lib-next-prev-navigation>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.head{background-color:#fff;padding:0!important}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.skip-margin{background:#fff}.save-draft-wrapper{display:flex;justify-content:flex-end;gap:1rem;margin-top:1rem;margin-right:2rem;padding:0 1.5rem 1.5rem}.draft-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.65rem 1.6rem;font-size:14px;font-weight:500;border-radius:9999px;border:1px solid transparent;cursor:pointer;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;transition:all .2s ease}.draft-btn:hover:not(:disabled){background:linear-gradient(135deg,#1e40af,#1d4ed8);transform:translateY(-1px);box-shadow:0 3px 6px #0000001a}.draft-btn:disabled{background:#cbd5e1;color:#64748b;cursor:not-allowed;box-shadow:none}.draft-btn .spinner{border:2px solid rgba(255,255,255,.3);border-top:2px solid #fff;border-radius:50%;width:14px;height:14px;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i14.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["name", "skipMargin"] }, { kind: "component", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: ["pages", "currentPageIndex", "skipValidation", "edit", "acceptedLanguage", "eligibleForSubmission", "pageDetails", "markAllQuestionsAsRequired", "skipMargin", "primaryColor", "secondaryColor", "isActionTriggered", "submissionInProgress", "submissionInDraft", "showCancelButton"], outputs: ["pageChanged", "submitEmit", "saveAsDraftEmit", "subFormChange", "rowSetIndex", "cancel"] }, { kind: "component", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: ["skipValidation", "currentPageIndex", "pages", "previousPage", "nextPage", "currentPage", "pageDetails", "skipMargin", "edit", "acceptedLanguage", "primaryColor", "secondaryColor", "isActionTriggered", "submissionInProgress", "submissionInDraft", "eligibleForSubmission", "showCancelButton"], outputs: ["navigateNext", "navigatePrevious", "submitEmit", "saveAsDraftEmit", "cancel", "subFormChange", "rowSetIndex"] }, { kind: "component", type: SubmissionContainerComponent, selector: "lib-submission-container", inputs: ["parentQuestionAnswers"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubmitFormComponent, selector: "lib-submit-form", inputs: { moduleName: "moduleName", edit: "edit", submissionId: "submissionId", acceptedLanguage: "acceptedLanguage", skipMargin: "skipMargin", skipValidation: "skipValidation", navigateTo: "navigateTo", country: "country", showCancelButton: "showCancelButton", isActionTriggered: "isActionTriggered" }, outputs: { submit: "submit", apiCalled: "apiCalled", currentPageIndexChange: "currentPageIndexChange", cancel: "cancel" }, viewQueries: [{ propertyName: "child", first: true, predicate: NavigationTabsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\">\n\n<ng-container *ngIf=\"isLoadingPages\">\n    <ngx-skeleton-loader count=\"5\"></ngx-skeleton-loader>\n</ng-container>\n\n  <div class=\"head container\" *ngIf=\"!skipMargin\">\n    <lib-header [name]=\"name\" [skipMargin]=\"skipMargin\"></lib-header>\n  </div>\n\n\n\n  <div class=\"body\" [ngClass]=\"{ 'skip-margin': skipMargin,container: !skipMargin}\">\n\n    <lib-submission-container [parentQuestionAnswers]=\"parentQuestionAnswers\"\n    *ngIf=\"parentQuestionAnswers\"></lib-submission-container>\n\n    <lib-navigation-tabs\n      *ngIf=\"navigation == 'TAB'\"\n      [skipMargin]=\"skipMargin\"\n      [skipValidation]=\"skipValidation\"\n      [pages]=\"pages\"\n      [currentPageIndex]=\"currentPageIndex\"\n      (pageChanged)=\"setCurrentPage($event)\"\n      (submitEmit)=\"submitForm()\"\n      [pageDetails]=\"pageDetails\"\n      [eligibleForSubmission]=\"eligibleForSubmission\"\n      [edit]=\"edit\"\n      [acceptedLanguage] = \"acceptedLanguage\"\n      [isActionTriggered]=\"isActionTriggered\"\n      [primaryColor]=\"primaryColor\"\n      [secondaryColor]=\"secondaryColor\"\n      [markAllQuestionsAsRequired]=\"markAllQuestionsAsRequired\"\n      [submissionInProgress]=\"submissionInProgress\"\n      [submissionInDraft]=\"submissionInDraft\"\n      [showCancelButton]=\"showCancelButton\"\n      [submissionProgress]=\"submissionProgress\"\n      [animatedDots]=\"animatedDots\"\n      [currentStep]=\"currentStep\"\n      (saveAsDraftEmit)=\"saveAsDraft()\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n      (rowSetIndex)=\"loadMoreData($event)\"\n      (cancel)=\"cancelled()\"\n    ></lib-navigation-tabs>\n    <lib-next-prev-navigation\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\n      [skipMargin]=\"skipMargin\"\n      [currentPageIndex]=\"currentPageIndex\"\n      [pageDetails]=\"pageDetails\"\n      (rowSetIndex)=\"loadMoreData($event)\"\n      [pages]=\"pages\"\n      [previousPage]=\"previousPage\"\n      [isActionTriggered]=\"isActionTriggered\"\n      [currentPage]=\"currentPage\"\n      [primaryColor]=\"primaryColor\"\n      [secondaryColor]=\"secondaryColor\"\n      [nextPage]=\"nextPage\"\n      (navigateNext)=\"navigateToNextPage()\"\n      (navigatePrevious)=\"navigateToPreviousPage()\"\n      [acceptedLanguage] = \"acceptedLanguage\"\n      (submitEmit)=\"submitForm()\"\n      (saveAsDraftEmit)=\"saveAsDraft()\"\n      [edit]=\"edit\"\n      [eligibleForSubmission]=\"eligibleForSubmission\"\n      [submissionInProgress]=\"submissionInProgress\"\n      [submissionInDraft]=\"submissionInDraft\"\n      [showCancelButton]=\"showCancelButton\"\n      [submissionProgress]=\"submissionProgress\"\n      [animatedDots]=\"animatedDots\"\n      [currentStep]=\"currentStep\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n      (cancel)=\"cancelled()\"\n       [skipValidation]=\"skipValidation\"\n    ></lib-next-prev-navigation>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.head{background-color:#fff;padding:0!important}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.skip-margin{background:#fff}.save-draft-wrapper{display:flex;justify-content:flex-end;gap:1rem;margin-top:1rem;margin-right:2rem;padding:0 1.5rem 1.5rem}.draft-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.65rem 1.6rem;font-size:14px;font-weight:500;border-radius:9999px;border:1px solid transparent;cursor:pointer;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;transition:all .2s ease}.draft-btn:hover:not(:disabled){background:linear-gradient(135deg,#1e40af,#1d4ed8);transform:translateY(-1px);box-shadow:0 3px 6px #0000001a}.draft-btn:disabled{background:#cbd5e1;color:#64748b;cursor:not-allowed;box-shadow:none}.draft-btn .spinner{border:2px solid rgba(255,255,255,.3);border-top:2px solid #fff;border-radius:50%;width:14px;height:14px;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i14.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["name", "skipMargin"] }, { kind: "component", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: ["pages", "currentPageIndex", "skipValidation", "edit", "acceptedLanguage", "eligibleForSubmission", "pageDetails", "markAllQuestionsAsRequired", "skipMargin", "primaryColor", "secondaryColor", "isActionTriggered", "submissionInProgress", "submissionInDraft", "showCancelButton", "submissionProgress", "currentStep", "animatedDots"], outputs: ["pageChanged", "submitEmit", "saveAsDraftEmit", "subFormChange", "rowSetIndex", "cancel"] }, { kind: "component", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: ["skipValidation", "currentPageIndex", "pages", "previousPage", "nextPage", "currentPage", "pageDetails", "skipMargin", "edit", "acceptedLanguage", "primaryColor", "secondaryColor", "isActionTriggered", "submissionInProgress", "submissionInDraft", "eligibleForSubmission", "showCancelButton", "submissionProgress", "currentStep", "animatedDots"], outputs: ["navigateNext", "navigatePrevious", "submitEmit", "saveAsDraftEmit", "cancel", "subFormChange", "rowSetIndex"] }, { kind: "component", type: SubmissionContainerComponent, selector: "lib-submission-container", inputs: ["parentQuestionAnswers"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmitFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-submit-form', template: "<div class=\"outer-container\">\n\n<ng-container *ngIf=\"isLoadingPages\">\n    <ngx-skeleton-loader count=\"5\"></ngx-skeleton-loader>\n</ng-container>\n\n  <div class=\"head container\" *ngIf=\"!skipMargin\">\n    <lib-header [name]=\"name\" [skipMargin]=\"skipMargin\"></lib-header>\n  </div>\n\n\n\n  <div class=\"body\" [ngClass]=\"{ 'skip-margin': skipMargin,container: !skipMargin}\">\n\n    <lib-submission-container [parentQuestionAnswers]=\"parentQuestionAnswers\"\n    *ngIf=\"parentQuestionAnswers\"></lib-submission-container>\n\n    <lib-navigation-tabs\n      *ngIf=\"navigation == 'TAB'\"\n      [skipMargin]=\"skipMargin\"\n      [skipValidation]=\"skipValidation\"\n      [pages]=\"pages\"\n      [currentPageIndex]=\"currentPageIndex\"\n      (pageChanged)=\"setCurrentPage($event)\"\n      (submitEmit)=\"submitForm()\"\n      [pageDetails]=\"pageDetails\"\n      [eligibleForSubmission]=\"eligibleForSubmission\"\n      [edit]=\"edit\"\n      [acceptedLanguage] = \"acceptedLanguage\"\n      [isActionTriggered]=\"isActionTriggered\"\n      [primaryColor]=\"primaryColor\"\n      [secondaryColor]=\"secondaryColor\"\n      [markAllQuestionsAsRequired]=\"markAllQuestionsAsRequired\"\n      [submissionInProgress]=\"submissionInProgress\"\n      [submissionInDraft]=\"submissionInDraft\"\n      [showCancelButton]=\"showCancelButton\"\n      (saveAsDraftEmit)=\"saveAsDraft()\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n      (rowSetIndex)=\"loadMoreData($event)\"\n      (cancel)=\"cancelled()\"\n    ></lib-navigation-tabs>\n    <lib-next-prev-navigation\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\n      [skipMargin]=\"skipMargin\"\n      [currentPageIndex]=\"currentPageIndex\"\n      [pageDetails]=\"pageDetails\"\n      (rowSetIndex)=\"loadMoreData($event)\"\n      [pages]=\"pages\"\n      [previousPage]=\"previousPage\"\n      [isActionTriggered]=\"isActionTriggered\"\n      [currentPage]=\"currentPage\"\n      [primaryColor]=\"primaryColor\"\n      [secondaryColor]=\"secondaryColor\"\n      [nextPage]=\"nextPage\"\n      (navigateNext)=\"navigateToNextPage()\"\n      (navigatePrevious)=\"navigateToPreviousPage()\"\n      [acceptedLanguage] = \"acceptedLanguage\"\n      (submitEmit)=\"submitForm()\"\n      (saveAsDraftEmit)=\"saveAsDraft()\"\n      [edit]=\"edit\"\n      [eligibleForSubmission]=\"eligibleForSubmission\"\n      [submissionInProgress]=\"submissionInProgress\"\n      [submissionInDraft]=\"submissionInDraft\"\n      [showCancelButton]=\"showCancelButton\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n      (cancel)=\"cancelled()\"\n       [skipValidation]=\"skipValidation\"\n    ></lib-next-prev-navigation>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.head{background-color:#fff;padding:0!important}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.skip-margin{background:#fff}.save-draft-wrapper{display:flex;justify-content:flex-end;gap:1rem;margin-top:1rem;margin-right:2rem;padding:0 1.5rem 1.5rem}.draft-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.65rem 1.6rem;font-size:14px;font-weight:500;border-radius:9999px;border:1px solid transparent;cursor:pointer;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;transition:all .2s ease}.draft-btn:hover:not(:disabled){background:linear-gradient(135deg,#1e40af,#1d4ed8);transform:translateY(-1px);box-shadow:0 3px 6px #0000001a}.draft-btn:disabled{background:#cbd5e1;color:#64748b;cursor:not-allowed;box-shadow:none}.draft-btn .spinner{border:2px solid rgba(255,255,255,.3);border-top:2px solid #fff;border-radius:50%;width:14px;height:14px;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'lib-submit-form', template: "<div class=\"outer-container\">\n\n<ng-container *ngIf=\"isLoadingPages\">\n    <ngx-skeleton-loader count=\"5\"></ngx-skeleton-loader>\n</ng-container>\n\n  <div class=\"head container\" *ngIf=\"!skipMargin\">\n    <lib-header [name]=\"name\" [skipMargin]=\"skipMargin\"></lib-header>\n  </div>\n\n\n\n  <div class=\"body\" [ngClass]=\"{ 'skip-margin': skipMargin,container: !skipMargin}\">\n\n    <lib-submission-container [parentQuestionAnswers]=\"parentQuestionAnswers\"\n    *ngIf=\"parentQuestionAnswers\"></lib-submission-container>\n\n    <lib-navigation-tabs\n      *ngIf=\"navigation == 'TAB'\"\n      [skipMargin]=\"skipMargin\"\n      [skipValidation]=\"skipValidation\"\n      [pages]=\"pages\"\n      [currentPageIndex]=\"currentPageIndex\"\n      (pageChanged)=\"setCurrentPage($event)\"\n      (submitEmit)=\"submitForm()\"\n      [pageDetails]=\"pageDetails\"\n      [eligibleForSubmission]=\"eligibleForSubmission\"\n      [edit]=\"edit\"\n      [acceptedLanguage] = \"acceptedLanguage\"\n      [isActionTriggered]=\"isActionTriggered\"\n      [primaryColor]=\"primaryColor\"\n      [secondaryColor]=\"secondaryColor\"\n      [markAllQuestionsAsRequired]=\"markAllQuestionsAsRequired\"\n      [submissionInProgress]=\"submissionInProgress\"\n      [submissionInDraft]=\"submissionInDraft\"\n      [showCancelButton]=\"showCancelButton\"\n      [submissionProgress]=\"submissionProgress\"\n      [animatedDots]=\"animatedDots\"\n      [currentStep]=\"currentStep\"\n      (saveAsDraftEmit)=\"saveAsDraft()\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n      (rowSetIndex)=\"loadMoreData($event)\"\n      (cancel)=\"cancelled()\"\n    ></lib-navigation-tabs>\n    <lib-next-prev-navigation\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\n      [skipMargin]=\"skipMargin\"\n      [currentPageIndex]=\"currentPageIndex\"\n      [pageDetails]=\"pageDetails\"\n      (rowSetIndex)=\"loadMoreData($event)\"\n      [pages]=\"pages\"\n      [previousPage]=\"previousPage\"\n      [isActionTriggered]=\"isActionTriggered\"\n      [currentPage]=\"currentPage\"\n      [primaryColor]=\"primaryColor\"\n      [secondaryColor]=\"secondaryColor\"\n      [nextPage]=\"nextPage\"\n      (navigateNext)=\"navigateToNextPage()\"\n      (navigatePrevious)=\"navigateToPreviousPage()\"\n      [acceptedLanguage] = \"acceptedLanguage\"\n      (submitEmit)=\"submitForm()\"\n      (saveAsDraftEmit)=\"saveAsDraft()\"\n      [edit]=\"edit\"\n      [eligibleForSubmission]=\"eligibleForSubmission\"\n      [submissionInProgress]=\"submissionInProgress\"\n      [submissionInDraft]=\"submissionInDraft\"\n      [showCancelButton]=\"showCancelButton\"\n      [submissionProgress]=\"submissionProgress\"\n      [animatedDots]=\"animatedDots\"\n      [currentStep]=\"currentStep\"\n      (subFormChange)=\"updateSubFormWithSubmissions($event)\"\n      (cancel)=\"cancelled()\"\n       [skipValidation]=\"skipValidation\"\n    ></lib-next-prev-navigation>\n  </div>\n</div>\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.head{background-color:#fff;padding:0!important}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.skip-margin{background:#fff}.save-draft-wrapper{display:flex;justify-content:flex-end;gap:1rem;margin-top:1rem;margin-right:2rem;padding:0 1.5rem 1.5rem}.draft-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.65rem 1.6rem;font-size:14px;font-weight:500;border-radius:9999px;border:1px solid transparent;cursor:pointer;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;transition:all .2s ease}.draft-btn:hover:not(:disabled){background:linear-gradient(135deg,#1e40af,#1d4ed8);transform:translateY(-1px);box-shadow:0 3px 6px #0000001a}.draft-btn:disabled{background:#cbd5e1;color:#64748b;cursor:not-allowed;box-shadow:none}.draft-btn .spinner{border:2px solid rgba(255,255,255,.3);border-top:2px solid #fff;border-radius:50%;width:14px;height:14px;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: function () { return [{ type: FormService }, { type: i1$4.ToastrService }, { type: i2.Router }, { type: DataService }, { type: RecaptchaService }, { type: ValidationService }, { type: i0.ChangeDetectorRef }, { type: ElementTrackerService }, { type: FormValidationService }, { type: AggregationFunctionService }, { type: ScoreCalculationService }, { type: i1$3.MatDialog }, { type: WhenClauseService }]; }, propDecorators: { moduleName: [{
                 type: Input
             }], edit: [{