@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/form-submission/navigation-tabs/navigation-tabs.component.ts

@@ -0,0 +1,134 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormValidationService } from '../../services/form-validation.service';
+
+@Component({
+  selector: 'lib-navigation-tabs',
+  templateUrl: './navigation-tabs.component.html',
+  styleUrls: ['./navigation-tabs.component.scss'],
+})
+export class NavigationTabsComponent {
+  @Input() pages: any[] = [];
+  @Input() currentPageIndex: number = 0;
+   @Input() skipValidation: boolean = false;
+  @Output() pageChanged = new EventEmitter<number>();
+  @Output() submitEmit: EventEmitter<any> = new EventEmitter<any>();
+   @Output() saveAsDraftEmit: EventEmitter<any> = new EventEmitter<any>();
+  @Input() edit : boolean = false;
+  @Input() acceptedLanguage: string ='';
+  @Input()  eligibleForSubmission:{ status: boolean; message: string } = { status: true, message: '' };
+  @Output() subFormChange = new EventEmitter<any>();
+  @Input() pageDetails: any[] = [];
+  @Input() markAllQuestionsAsRequired : boolean = false;
+  @Input() skipMargin: boolean = false;
+  @Output() rowSetIndex = new EventEmitter<number>();
+  @Output() cancel: EventEmitter<string> = new EventEmitter<string>();
+  @Input() primaryColor: string = '';
+  @Input() secondaryColor: string = '';
+  @Input() isActionTriggered: boolean = false;
+  @Input() submissionInProgress: boolean = false;
+  @Input() submissionInDraft: boolean = false;
+  @Input() showCancelButton: boolean = false;
+  @Input() submissionProgress = 0;
+  @Input() currentStep = 'Submitting form';
+  @Input() animatedDots = '';
+  loadedPages: { [key: number]: boolean } = {};
+  showTooltip: boolean = false;
+  showNavArrows: boolean = false;
+  hideTabs: boolean = false;
+
+  constructor(
+    private formValidationService: FormValidationService,
+    private cdr: ChangeDetectorRef
+  ) {
+    // Load the first page initially
+    this.loadedPages[this.currentPageIndex] = true;
+  }
+
+
+  ngOnInit() {
+    this.checkPageDetails()
+  }
+
+  ngAfterViewInit() {
+    setTimeout(() => this.checkOverflow());
+    this.cdr.detectChanges();
+  }
+
+  checkPageDetails(){
+    if(this.pageDetails && this.pageDetails?.length==1 && this.pageDetails[0]?.name==''){
+      this.hideTabs=true;
+    }
+  }
+
+  updateSubFormWithSubmissions(event:any){
+    this.subFormChange.emit(event);
+  }
+
+  triggerFunction(event: number) {
+    this.setCurrentPage(event);
+  }
+
+  setCurrentPage(index: number) {
+    if(this.markAllQuestionsAsRequired){
+      const currentPageData = this.pages[this.currentPageIndex];
+      let validationResponse=true;
+      if(!this.skipValidation) {
+            validationResponse = this.formValidationService.validateRequiredQuestions(currentPageData).isValid;
+       }
+      if (validationResponse) {
+        this.pageChanged.emit(index);
+        this.currentPageIndex = index;
+        // Mark this page as loaded to avoid reloading
+        if (!this.loadedPages[index]) {
+          this.loadedPages[index] = true;
+        }
+      }
+    }else{
+      this.pageChanged.emit(index);
+      this.currentPageIndex = index;
+      // Mark this page as loaded to avoid reloading
+      if (!this.loadedPages[index]) {
+        this.loadedPages[index] = true;
+      }
+    }
+  }
+
+  submitForm() {
+    this.submitEmit.emit();
+  }
+
+    saveAsDraft() {
+    this.saveAsDraftEmit.emit();
+  }
+
+  trackByIndex(index: number, item: any): number {
+    return index;
+  }
+
+  loadMoreData(): void {
+    this.rowSetIndex.emit(this.currentPageIndex);
+ }
+
+ toggleTooltip() {
+  this.showTooltip = !this.eligibleForSubmission.status;
+}
+
+scrollTabs(direction: number) {
+  const tabContainer = document.querySelector('.navTabs') as HTMLElement;
+  if (tabContainer) {
+    tabContainer.scrollBy({ left: direction * 100, behavior: 'smooth' });
+    setTimeout(() => this.checkOverflow(), 300);
+  }
+}
+
+checkOverflow() {
+  const tabContainer = document.querySelector('.navTabs') as HTMLElement;
+  if (tabContainer) {
+    this.showNavArrows = (tabContainer.scrollWidth > tabContainer.clientWidth);
+  }
+}
+
+cancelled(){
+  this.cancel.emit();
+}
+}

package/src/form-submission/next-prev-navigation/next-prev-navigation.component.html

@@ -0,0 +1,207 @@
+<!-- <div class="pageTitleDiv" *ngIf="!skipMargin">
+  <p class="pageTitle">{{pageDetails[currentPageIndex]?.name}}</p>
+</div> -->
+<div class="button-inner-container rounded" [ngClass]="{ 'skip-margin': skipMargin}">
+  <div class="tab-content pt-5 pb-3 row" [attr.name]="pages[currentPageIndex].testElementName">
+    <div class="data-container"
+    infiniteScroll
+    [infiniteScrollDistance]="2"
+    [infiniteScrollThrottle]="200"
+    (scrolled)="loadMoreData()">
+
+    <div *ngFor="let row of pages[currentPageIndex]?.rows" class="marginSize d-flex">
+      <div *ngFor="let grid of row.grid"
+      [ngStyle]="{'width.%': (grid.element.count) * (100 / (12))}">
+        <lib-form-elements
+          [grid]="grid"
+          [currentPageIndex]="currentPageIndex"
+          [edit]="edit"
+          [acceptedLanguage]="acceptedLanguage"
+          [pages]="pages"
+          (subFormChange)="updateSubFormWithSubmissions($event)"
+          state="parent"
+        ></lib-form-elements>
+      </div>
+    </div>
+    </div>
+   <div [ngStyle]="{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }" id="captcha-container"></div>
+
+    <div class="footerButton">
+      <div
+        class="prevButtonDiv"
+        [ngClass]="{ 'prevDirection-rtl': acceptedLanguage === 'ara' }">
+        <button
+          class="me-md-2 rounded-pill navButton"
+          [ngStyle]="{ 'background-color': primaryColor ? primaryColor: '#084fff' }"
+          type="button"
+          (click)="onNavigatePrevious()"
+          *ngIf="0 < currentPageIndex"
+        >
+          <ng-container *ngIf="acceptedLanguage === 'ara'; else defaultSvg">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M19.4897 12.0117L4.49975 12.0117"
+                stroke="white"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M13.486 6.02344L19.502 12.0004L13.486 17.9774"
+                stroke="white"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </ng-container>
+          <ng-template #defaultSvg>
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4.51025 11.9883L19.5003 11.9883"
+                stroke="white"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M10.514 17.9766L4.49805 11.9996L10.514 6.02256"
+                stroke="white"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </ng-template>
+          Previous | {{ previousPage.name }}
+        </button>
+      </div>
+      <div
+        class="nextButtonDiv"
+        [ngClass]="{ 'nextDirection-rtl': acceptedLanguage === 'ara' }"
+      >
+        <button
+          class="md-2 rounded-pill navButton"
+          [ngStyle]="{ 'background-color': primaryColor ? primaryColor: '#084fff' }"
+          type="button"
+          (click)="onNavigateNext()"
+          *ngIf="currentPageIndex < pageDetails.length - 1"
+        >
+          Next | {{ nextPage.name }}
+          <ng-container *ngIf="acceptedLanguage === 'ara'; else defaultSvg">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4.51025 11.9883L19.5003 11.9883"
+                stroke="white"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M10.514 17.9766L4.49805 11.9996L10.514 6.02256"
+                stroke="white"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </ng-container>
+          <ng-template #defaultSvg>
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M19.4897 12.0117L4.49975 12.0117"
+                stroke="white"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M13.486 6.02344L19.502 12.0004L13.486 17.9774"
+                stroke="white"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </ng-template>
+        </button>
+        <button *ngIf="showCancelButton && currentPageIndex == pageDetails.length - 1" class="btn submitButton rounded-pill bg-secondary text-white"
+        (click)="cancelled()" type="button"
+        >Cancel</button>
+        <div
+             *ngIf="skipValidation"
+            class="button-container position-relative"
+            (mouseenter)="showTooltip = true"
+            (mouseleave)="showTooltip = false"
+          >
+          <button
+          class="submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center"
+          [ngStyle]="{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }"
+          type="button"
+          *ngIf="currentPageIndex == pageDetails.length - 1 && !isActionTriggered"
+          (click)="saveAsDraft()"
+          [disabled]="!eligibleForSubmission.status || submissionInDraft"
+        >
+          <ng-container *ngIf="submissionInDraft; else showSubmitText">
+
+            <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+            Submitting...
+          </ng-container>
+          <ng-template #showSubmitText>
+            Save Draft
+          </ng-template>
+        </button>
+           <div *ngIf="showTooltip && !eligibleForSubmission.status" class="custom-tooltip">
+              {{eligibleForSubmission.message}}
+            </div>
+      </div>
+
+  <div
+            class="button-container position-relative"
+            (mouseenter)="showTooltip = true"
+            (mouseleave)="showTooltip = false"
+          >
+          <button
+          class="submitBtn ms-md-2 me-md-2 rounded-pill d-flex align-items-center justify-content-center"
+          [ngStyle]="{ 'background-color': primaryColor ? primaryColor : '#084fff' }"
+          type="button"
+          *ngIf="currentPageIndex == pageDetails.length - 1 && !isActionTriggered"
+          (click)="submitForm()"
+          [disabled]="!eligibleForSubmission.status || submissionInProgress"
+        >
+          <ng-container *ngIf="submissionInProgress; else showSubmitText">
+            <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+            Submitting...
+          </ng-container>
+          <ng-template #showSubmitText>
+            Submit
+          </ng-template>
+        </button>
+           <div *ngIf="showTooltip && !eligibleForSubmission.status" class="custom-tooltip">
+              {{eligibleForSubmission.message}}
+            </div>
+      </div>
+
+    </div>
+  </div>
+  <div *ngIf="submissionInProgress" class="text-loader">
+    {{ currentStep }}{{ animatedDots }}
+    <span class="percentage">{{ submissionProgress }}%</span>
+  </div>
+</div>

package/src/form-submission/next-prev-navigation/next-prev-navigation.component.scss

@@ -0,0 +1,208 @@
+.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; /* Ensure it appears above other content */
+  border-radius: 50%;
+}
+
+
+@media (max-width: 480px) {
+  .g-recaptcha {
+    transform: scale(0.85);
+    transform-origin: center;
+  }
+}
+.pageTitleDiv {
+  padding-left: 3rem;
+  padding-top: 3rem;
+  padding-right: 3rem;
+  @media (max-width: 1024px) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 2rem;
+  }
+  @media (max-width: 576px) {
+    padding-left: 0.4rem;
+    padding-right: 0.4rem;
+    padding-top: 1.5rem;
+  }
+}
+
+.button-inner-container {
+  width: 100%;
+  position: relative;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  @media (max-width: 1024px) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  @media (max-width: 576px) {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-top: 0.1rem;
+    padding-bottom: 2rem;
+  }
+}
+
+.skip-margin{
+  padding: 0;
+}
+
+.marginSize {
+  @media (max-width: 576px) {
+    padding: 0 !important;
+  }
+}
+
+.footerButton {
+  padding-bottom: 16px;
+  padding-left: 30px;
+  padding-right: 32px;
+  padding-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  @media (max-width: 576px) {
+    padding-left: 20px;
+    padding-right: 17px;
+  }
+}
+
+.navButton {
+  color: #fff;
+  border: none;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 8px;
+  padding-right: 8px;
+  width: auto;
+}
+
+.submitBtn {
+  color: #fff;
+  border: none;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 27px;
+  padding-right: 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 {
+  background-color: white;
+}
+
+.row {
+  background-color: white;
+}
+
+
+.spinner-border {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  vertical-align: text-bottom;
+  border: 0.15em solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: spinner-border 0.75s linear infinite;
+}
+
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Tooltip styling */
+/* Tooltip styling */
+.custom-tooltip {
+  visibility: hidden;
+  position: absolute;
+  top: -40px; /* Position above the button */
+  right: 0;
+  background: #efefef;
+  color: #7b7878;
+  padding: 8px 12px;
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  font-size: 14px;
+  white-space: nowrap;
+  z-index: 10;
+}
+
+/* Yellow (Warning) Tooltip */
+.custom-tooltip.warning {
+  background: linear-gradient(135deg, #ffd700, #ffb400); /* Yellow for Warning */
+}
+
+/* Tooltip Animation */
+.fade-in {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    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);
+}

package/src/form-submission/next-prev-navigation/next-prev-navigation.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NextPrevNavigationComponent } from './next-prev-navigation.component';
+
+describe('NextPrevNavigationComponent', () => {
+  let component: NextPrevNavigationComponent;
+  let fixture: ComponentFixture<NextPrevNavigationComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [NextPrevNavigationComponent]
+    });
+    fixture = TestBed.createComponent(NextPrevNavigationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/form-submission/next-prev-navigation/next-prev-navigation.component.ts

@@ -0,0 +1,74 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'lib-next-prev-navigation',
+  templateUrl: './next-prev-navigation.component.html',
+  styleUrls: ['./next-prev-navigation.component.scss']
+})
+export class NextPrevNavigationComponent {
+
+   @Input() skipValidation: boolean = false;
+  @Input() currentPageIndex: number = 0;
+  @Input() pages: any[] = [];
+  @Input() previousPage: any = {};
+  @Input() nextPage: any = {};
+  @Input() currentPage: any = {};
+  @Input() pageDetails: any[] = [];
+  @Input() skipMargin: boolean = false;
+  @Output() navigateNext = new EventEmitter<void>();
+  @Output() navigatePrevious = new EventEmitter<void>();
+  @Output() submitEmit: EventEmitter<any> = new EventEmitter<any>();
+  @Output() saveAsDraftEmit: EventEmitter<any> = new EventEmitter<any>();
+  @Output() cancel: EventEmitter<string> = new EventEmitter<string>();
+  @Input() edit: boolean = false;
+  @Input() acceptedLanguage: string ='';
+  @Output() subFormChange = new EventEmitter<any>();
+  @Output() rowSetIndex = new EventEmitter<number>();
+  @Input() primaryColor: string = '';
+  @Input() secondaryColor: string = '';
+  @Input() isActionTriggered: boolean = false;
+  @Input() submissionInProgress: boolean = false;
+  @Input() submissionInDraft: boolean = false;
+  @Input()  eligibleForSubmission:{ status: boolean; message: string } = { status: true, message: '' };
+  @Input() showCancelButton: boolean = false;
+  @Input() submissionProgress = 0;
+  @Input() currentStep = 'Submitting form';
+  @Input() animatedDots = '';
+  showTooltip: boolean = false;
+  ngOnInit(){
+  }
+
+
+  updateSubFormWithSubmissions(event: any) {
+    this.subFormChange.emit(event);
+  }
+
+  onNavigateNext() {
+    this.navigateNext.emit();
+  }
+
+  onNavigatePrevious() {
+    this.navigatePrevious.emit();
+  }
+
+  submitForm() {
+    this.submitEmit.emit();
+  }
+
+  saveAsDraft() {
+    this.saveAsDraftEmit.emit();
+  }
+
+
+  loadMoreData(): void {
+    this.rowSetIndex.emit(this.currentPageIndex);
+ }
+
+  toggleTooltip() {
+  this.showTooltip = !this.eligibleForSubmission.status;
+}
+
+cancelled(){
+  this.cancel.emit();
+}
+}

package/src/form-submission/save-as-draft/saveDraftModalComponent .ts

@@ -0,0 +1,60 @@
+import { Component, Inject, Input } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+interface DialogData {
+  primaryColor?: string;
+}
+@Component({
+  selector: 'lib-form-submission-conformation',
+  templateUrl: './saveDraftModalComponent.html',
+  styleUrls: ['./saveDraftModalComponent.scss']
+})
+
+export class SaveDraftModalComponent {
+ primaryColor: string;
+
+ get primaryColorRgb(): string {
+  let hex = this.primaryColor.trim().replace('#', '');
+
+    const defaultHex = "0d6efd";
+
+  if (!hex) hex = defaultHex;
+
+  let s = hex.trim().replace(/^#/, "").toLowerCase();
+
+  // Ensure only valid hex chars
+  if (!/^[0-9a-f]+$/.test(s)) {
+    s = defaultHex;
+  }
+
+  // Expand shorthand (3/4 digits → 6/8 digits)
+  if (s.length === 3 || s.length === 4) {
+    s = s.split("").map(ch => ch + ch).join("");
+  }
+
+  // If still invalid length, fallback
+  if (s.length !== 6 && s.length !== 8) {
+    s = defaultHex;
+  }
+
+  const r = parseInt(s.slice(0, 2), 16);
+  const g = parseInt(s.slice(2, 4), 16);
+  const b = parseInt(s.slice(4, 6), 16);
+
+  return `${r}, ${g}, ${b}`;
+}
+
+  constructor(
+    public dialogRef: MatDialogRef<SaveDraftModalComponent>,
+     @Inject(MAT_DIALOG_DATA) public data: DialogData) {
+     this.primaryColor = data.primaryColor || '#0d6efd';
+  }
+
+  saveAsDraft() {
+    this.dialogRef.close(true);
+  }
+
+  continueEditing() {
+    this.dialogRef.close(false);
+  }
+}