@piserve-tech/form-submission 1.3.317 → 1.3.319

package/src/form-fields/url-fields/url-fields.component.ts

@@ -1,123 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { ElementTrackerService } from '../../services/element-tracker.service';
-import { ValidationService } from '../../services/validation.service';
-
-@Component({
-  selector: 'lib-url-fields',
-  templateUrl: './url-fields.component.html',
-  styleUrls: ['./url-fields.component.scss'],
-})
-export class UrlFieldsComponent {
-  @Input() question: any = {};
-  @Input() inLine: boolean = false;
-  @Input() inCard: boolean = false;
-  @Input() submissionIndex!: number;
-  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
-
-  count: number = 0;
-  required: boolean = false;
-  hint: string = '';
-  placeholder: string = '';
-  showPreviewButton!: boolean;
-  enteredUrl: string = '';
-  validationFailed: boolean = false;
-  validationMessage: string = '';
-  defaultValue: string = '';
-  @Input() disableEdit: boolean = false;
-
-   private elementId: string='';
-     
-  constructor(
-    private validationService: ValidationService,
-    private tracker: ElementTrackerService
-  )  { }
-  
-  ngOnInit() {
-    this.valueAssigned();
-  }
-
-  handleClick() {
-    let textFieldValue = (document.getElementById('textField') as HTMLInputElement).value.trim();
-
-  if (!/^https?:\/\//i.test(textFieldValue)) {
-    textFieldValue = 'http://' + textFieldValue;
-  }
-
-  window.open(textFieldValue, '_blank');
-  }
-
-  valueAssigned() {
-    this.count = this.question.count;
-    this.required = this.question.required;
-    this.hint = this.question.hint;
-    this.placeholder = this.question.formElement.appearance.placeholder;
-    this.showPreviewButton =
-      this.question.formElement.appearance.showPreviewButton;
-    this.defaultValue = this.question?.defaultValue;
-    this.disableEdit = this.disableEdit ?? this.question?.disableEdit ?? false;
-    this.enteredUrl = this.defaultValue;
-    if(this.question.answer){
-      this.enteredUrl = this.question?.answer;  
-    }else if(this.defaultValue && !this.question.answer){
-      this.question.answer = this.defaultValue;
-    }
-  }
-  validateUrl() {
-    this.validationService.clearInvalid(this.buildElementId());
-    this.validationFailed = false;
-    this.validationMessage = '';
-    if (this.required && !this.enteredUrl) {
-      this.validationFailed = true;
-      this.validationMessage = 'This is a required question';
-      this.question.validation = false;
-      this.question.validationMessage = 'This is a required question';
-    }
-    else {
-      this.question.validation = true;
-    }
-  }
-
-  validateInput(event: any) {
-    this.validateUrl();
-    this.question.answer = event.target.value;
-    this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0});
-  }
-
-  handleValidation(isValid: boolean, message: string = 'This field is required') {
-    if (isValid) {
-      this.validationService.clearInvalid(this.buildElementId());
-    } else {
-      // this.validationService.setInvalid(this.question.id, message);
-    }
-  }
-
-  private buildElementId(): string {
-    return (this.inLine || this.inCard)
-      ? `${this.submissionIndex}-${this.question.id}`
-      : `${this.question.id}`;
-  }
-
-  get isInvalid(): boolean {
-    return !!this.validationService.getErrorMessage(this.buildElementId());
-  }
-
-  get errorMessage(): string | null {
-    return this.validationService.getErrorMessage(this.buildElementId());
-  }
-
-  ngAfterViewInit() {
-    if (this.inLine || this.inCard) {
-      this.elementId = `question-${this.submissionIndex}-${this.question.id}`;
-    } else {
-      this.elementId = `question-${this.question.id}`;
-    }
-  
-    this.tracker.registerElement(this.elementId);
-  }
-
-  ngOnDestroy() {
-    if (this.elementId) {
-      this.tracker.unregisterElement(this.elementId);
-    }
-  }
-}

package/src/form-submission/form-submission.module.ts

@@ -1,40 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SubmitFormComponent } from './submit-form/submit-form.component';
-import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import { HeaderComponent } from './header/header.component';
-import { NavigationTabsComponent } from './navigation-tabs/navigation-tabs.component';
-import { NextPrevNavigationComponent } from './next-prev-navigation/next-prev-navigation.component';
-import { ToastrModule } from 'ngx-toastr';
-import { SubmissionContainerComponent } from './submission-container/submission-container.component';
-import { SharedModule } from '../shared/shared.module';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { MatDialogModule } from "@angular/material/dialog";
-import { MatIconModule } from "@angular/material/icon";
-import { SaveDraftModalComponent } from './save-as-draft/saveDraftModalComponent ';
-
-
-
-@NgModule({
-  declarations: [
-    SubmitFormComponent,
-    HeaderComponent,
-    NavigationTabsComponent,
-    NextPrevNavigationComponent,
-    SubmissionContainerComponent,
-    SaveDraftModalComponent,
-  ],
-  imports: [
-    CommonModule,
-    BsDatepickerModule.forRoot(),
-    ToastrModule,
-    SharedModule,
-    InfiniteScrollModule,
-    NgxSkeletonLoaderModule,
-    MatDialogModule,
-    MatIconModule
-],
-  exports: [SubmitFormComponent, NextPrevNavigationComponent]
-})
-export class FormSubmitModule { }

package/src/form-submission/header/header.component.html

@@ -1,6 +0,0 @@
-<div class="head container">
-  <div class="registration-header">
-    <p>{{ name }}</p>
-  </div>
-  <div class="line" *ngIf="!skipMargin"></div>
-</div>

package/src/form-submission/header/header.component.scss

@@ -1,26 +0,0 @@
-.head {
-    background-color: white;
-    padding: 0 !important;
-  }
-  
-  .registration-header {
-    top: 20px;
-    left: 50%;
-    p{
-      font-size: 20px;
-      font-weight: 600;
-    }
-  }
-  
-  .line {
-    margin-top: 1%;
-    margin-bottom: 2%;
-    width: 100%;
-    height: 0px;
-    border: 1.5px solid #eaeaea; // Adjusted border width
-    transform: rotate(180deg);
-    @media (max-width: 576px) {
-      margin-bottom: 5%;
-    }
-  }
-  

package/src/form-submission/header/header.component.spec.ts

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

package/src/form-submission/header/header.component.ts

@@ -1,12 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'lib-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
-})
-export class HeaderComponent {
-  @Input() name: string = '';
-  @Input() skipMargin: boolean = false;
-
-}

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

@@ -1,134 +0,0 @@
-<div class="tab-inner-container" [ngClass]="{ 'skip-margin': skipMargin}">
-  <div class="d-flex gap-2">
-    <div class="tab-navigation" *ngIf="!hideTabs">
-      <ul class="nav nav-tabs navTabs" id="myTab" role="tablist">
-        <li
-          class="nav-item"
-          role="presentation"
-          *ngFor="let page of pageDetails; let i = index; trackBy: trackByIndex"
-          [ngClass]="{'nav-item-ara': acceptedLanguage === 'ara', 'nav-item-default': acceptedLanguage !== 'ara'}"
-        >
-          <button
-            class="nav-link"
-            [title]="page.name"
-            data-bs-toggle="tooltip"
-            data-bs-placement="top"
-            data-bs-custom-class="custom-tooltip"
-            [class.active]="i === currentPageIndex"
-            id="tab-{{ i }}"
-            type="button"
-            role="tab"
-            [attr.aria-controls]="'content-' + i"
-            [attr.aria-selected]="i === currentPageIndex"
-            (click)="setCurrentPage(i)"
-          >
-            {{ page.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
-    <div class="d-flex align-items-center" *ngIf="showNavArrows">
-      <button class="nav-arrow">
-        <img src="assets/icons/left_arrow.svg" alt="left arrow"
-        (click)="scrollTabs(-1)">
-        <img src="assets/icons/right_arrow.svg" alt="right arrow"
-        (click)="scrollTabs(1)">
-      </button>
-    </div>
-  </div>
-
-
-
-  <div class="tab-content pt-5 pb-3 px-1" [attr.name]="pages[currentPageIndex].testElementName">
-    <ng-container *ngIf="pages[currentPageIndex]">
-      <div
-        class="tab-pane fade show active"
-        id="content-{{ currentPageIndex }}"
-        role="tabpanel"
-        [attr.aria-labelledby]="'tab-' + currentPageIndex"
-      >
-        <div *ngIf="loadedPages[currentPageIndex]">
-          <div class="data-container"
-          infiniteScroll
-          [infiniteScrollDistance]="2"
-          [infiniteScrollThrottle]="200"
-          (scrolled)="loadMoreData()">
-          <div *ngFor="let row of pages[currentPageIndex].rows">
-            <div class="margin d-flex">
-              <div *ngFor="let grid of row.grid"
-                   [ngStyle]="{'width.%': (grid.element.count) * (100 / 12)}">
-                <lib-form-elements
-                  [grid]="grid"
-                  [edit]="edit"
-                  [acceptedLanguage]="acceptedLanguage"
-                  [pages]="pages"
-                  (subFormChange)="updateSubFormWithSubmissions($event)"
-                ></lib-form-elements>
-              </div>
-            </div>
-          </div>
-          </div>
-          <div class="footerButton d-flex justify-content-between align-items-center me-4 ms-4 position-relative">
-          <!-- Hover detection container -->
-                    <div  [ngStyle]="{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }" id="captcha-container"></div>
-          <div
-            class="button-container position-relative"
-            (mouseenter)="showTooltip = true"
-            (mouseleave)="showTooltip = false"
-          >
-
-          <div  *ngIf="currentPageIndex == pageDetails.length - 1">
-            <button *ngIf="showCancelButton" class="btn submitButton rounded-pill bg-secondary text-white"
-            (click)="cancelled()" type="button"
-            >Cancel</button>
-               <button
-            *ngIf="!isActionTriggered && skipValidation"
-              class="btn rounded-pill submitButton text-white"
-              [ngStyle]="{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }"
-              type="button"
-              (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>
-            
-
-            <button
-            *ngIf="!isActionTriggered"
-              class="btn rounded-pill submitButton text-white"
-              [ngStyle]="{ 'background-color': primaryColor ? primaryColor: '#084fff' }"
-              type="button"
-              (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>
-      </div>
-    </ng-container>
-  </div>
-</div>

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

@@ -1,200 +0,0 @@
-.tab-inner-container {
-    width: 100%;
-    position: relative;
-    padding-left: 3rem;
-    padding-right: 3rem;
-    padding-top: 3rem;
-    padding-bottom: 3rem;
-    @media (max-width: 1024px) {
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-    @media (max-width: 576px) {
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
-      padding-top: 2rem;
-      padding-bottom: 2rem;
-    }
-  }
-
-  .skip-margin{
-    padding: 0;
-  }
-  /* 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;
-  }
-
-  .navTabs {
-    overflow-x: auto;
-    overflow-y: hidden;
-    flex-wrap: unset;
-    margin: 0 !important;
-    margin-bottom: -1px !important;
-    padding-right: 0;
-  }
-
-  .nav-item {
-    background-color: white;
-    border-radius: 5px;
-    &.nav-item-default {
-      margin-right: .5%;
-    }
-    &.nav-item-ara {
-      margin-left: .5%;
-    }
-  }
-
-  .nav-link {
-    position: relative;
-    margin-bottom: -2px;
-    padding-left: 25px;
-    padding-right: 25px;
-    &::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 101%;
-      height: 6px;
-      background: #efefef;
-    }
-    &.active {
-      &::after {
-        display: none;
-      }
-    }
-  }
-
-  .tab-content {
-    background-color: white;
-  }
-
-
-  .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; /* Hide scrollbar for Firefox */
-    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
-  }
-
-  .navTabs::-webkit-scrollbar {
-    display: none; /* Hide scrollbar for Chrome/Safari */
-  }
-
-  .nav-arrow {
-    position: absolute;
-    background: white;
-    border: none;
-    cursor: pointer;
-    font-size: 20px;
-    font-weight: bold;
-    padding: 5px 10px;
-    z-index: 1000;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    width: 45px;
-    height: 27px;
-    gap: 13px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 6px;
-    img{
-      width: 8px;
-      height: 15px;
-    }
-  }
-
-  .submitButton{
-    margin-right: 1rem;
-  }
-
-  .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);
-    }
-  }
-
-
-  .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/navigation-tabs/navigation-tabs.component.spec.ts

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