@piserve-tech/form-submission 1.3.317 → 1.3.319

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

@@ -1,134 +0,0 @@
-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

@@ -1,207 +0,0 @@
-<!-- <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

@@ -1,208 +0,0 @@
-.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

@@ -1,21 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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);
-  }
-}