@piserve-tech/form-submission 1.3.317 → 1.3.319

package/src/form-fields/mobile-fields/mobile-fields.component.html

@@ -1,97 +0,0 @@
-<div
-  [ngClass]="{ 'mb-4': !inLine }"
-  class="px-3"
-  [id]="(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id"
-  [attr.name]="question.testElementName"
->
-  <div class="input-wrapper mb-2" *ngIf="!inLine">
-    <div *ngIf="question.questionNumber" [innerHTML]="question.questionNumber"></div>
-    <span *ngIf="question.questionNumber" class="space"></span> <label>{{ question.question }}</label
-    >&nbsp;
-    <span class="text-danger" *ngIf="question?.required">*</span>
-    <div
-      class="svg-wrapper mb-2 hintIcon"
-      [attr.data-title]="hint"
-      *ngIf="hint"
-    >
-      <svg
-        class="hintSvg"
-        viewBox="0 0 30 30"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z"
-          stroke="#323232"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291"
-          stroke="#323232"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20"
-          stroke="#323232"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </div>
-  </div>
-  <div class="input-group mb-2">
-    <ng-container *ngIf="displayCountryCode; else fullWidthInput">
-      <div class="col-xs-5 col-5 col-md-3 px-0 pe-2 ps-2"
-      [ngClass]="{'disable':disableEdit}">
-        <lib-dropdown
-          [items]="countryDetails"
-          [multiple]="false"
-          [(selectedItems)]="selectedCountry"
-          (selectedItemsChange)="onCountryChange()"
-          [disable]="disableEdit"
-          (onDropdownScroll)="getNextSetOfItems($event)"
-          (onSearch)="search($event)"
-        ></lib-dropdown>
-      </div>
-      <input
-        type="text"
-        class="form-control col-xs-7 col-7 col-md-9 height mobileField"
-        [placeholder]="placeholder"
-        aria-label="Mobile Number"
-        (blur)="validateMobile()"
-        [(ngModel)]="mobileNumber"
-        (ngModelChange)="onMobileNumberChange()"
-        (input)="onInput($event)"
-        [disabled]="disableEdit"
-      />
-    </ng-container>
-
-    <!-- Full-width input when displayCountryCode is false -->
-    <ng-template #fullWidthInput>
-      <input
-        type="text"
-        class="form-control col-12 height mobileField"
-        [placeholder]="placeholder"
-        aria-label="Mobile Number"
-        [class.invalid]="validationFailed"
-        [class.invalid-question]="isInvalid"
-        (blur)="validateMobile()"
-        [(ngModel)]="mobileNumber"
-        (ngModelChange)="onMobileNumberChange()"
-        (input)="onInput($event)"
-      />
-    </ng-template>
-  </div>
-  <div *ngIf="isInvalid && (!inLine || !mobileNumber)" class="error-message">
-    {{ errorMessage }}
-  </div>
-  <div *ngIf="validationFailed && !isInvalid" class="text-danger error-message">
-    {{ validationMessage }}
-  </div>
-</div>

package/src/form-fields/mobile-fields/mobile-fields.component.scss

@@ -1,52 +0,0 @@
-@import '../../styles/shared-style.scss';
-
-
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.mobileField{
-  border-radius: 6px !important;
-}
-
-::ng-deep .dropdown .dropdown-field .input-field .dropdown_text {
-  height: 40px !important;
-  width: 80% !important;
-}
-
-@media (max-width: 992px) {
-  ::ng-deep .dropdown .dropdown-field .input-field .dropdown_text {
-    height: 40px !important;
-    width: 50% !important;
-  }
-}
-
-/* Small screens (mobile) */
-@media screen and (max-width: 786px) {
-  ::ng-deep .dropdown .dropdown-field .input-field .dropdown_text {
-    height: 40px !important;
-    width: 50%!important;
-  }
-}
-
-@media screen and (max-width: 576px) {
-  ::ng-deep .dropdown .dropdown-field .input-field .dropdown_text {
-    height: 40px !important;
-    width: 39% !important;
-  }
-}
-
-.invalid-question {
-  border: 2px solid #f44336; /* Material red */
-  border-radius: 4px;
-  padding: 8px;
-  margin-bottom: 4px;
-}
-
-.disable{
-  pointer-events: none;
-}
-

package/src/form-fields/mobile-fields/mobile-fields.component.spec.ts

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

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

@@ -1,310 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { CountryService } from '../../services/countryService';
-import { ElementTrackerService } from '../../services/element-tracker.service';
-import { ValidationService } from '../../services/validation.service';
-
-interface CountryData {
-  value: string;
-  label: string;
-  image: string;
-}
-
-@Component({
-  selector: 'lib-mobile-fields',
-  templateUrl: './mobile-fields.component.html',
-  styleUrls: ['./mobile-fields.component.scss'],
-})
-export class MobileFieldsComponent implements OnInit {
-  @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 = '';
-  displayCountryCode: boolean = true;
-  displayFlag: boolean = true;
-  displayCode: boolean = true;
-  showCountryName: boolean = true;
-  beautifyNumbers: boolean = true;
-  countryWiseValidation: boolean = true;
-  countryDetails: CountryData[] = [];
-  selectedCountry: CountryData[] = [];
-  validationFailed: boolean = false;
-  validationMessage: string = '';
-  mobileNumber: string = '';
-  questionId: string = '';
-  currentPage: number = 0;
-  size: number = 30;
-  totalPages: number = 0;
-  searchKey: string = '';
-  lastPage:boolean=false;
-  isFirstPage: boolean = false;
-  defaultValue: string = '';
-  @Input() disableEdit: boolean = false;
-
- private elementId: string='';
-
-  constructor(
-    private countryService: CountryService,
-    private validationService: ValidationService,
-    private tracker: ElementTrackerService
-  ) { }
-
-  ngOnInit() {
-    this.valueAssigned();
-  }
-
-  valueAssigned() {
-    this.count = this.question.count;
-    this.required = this.question.required;
-    this.hint = this.question.hint;
-    this.placeholder = this.question.formElement.appearance.placeholder;
-    this.displayCountryCode =
-      this.question.formElement.appearance.displayCountryCode;
-    this.displayFlag = this.question.formElement.appearance.displayFlag;
-    this.displayCode = this.question.formElement.appearance.displayCode;
-    this.showCountryName = this.question.formElement.appearance.showCountryName;
-    this.beautifyNumbers = this.question.formElement.appearance.beautifyNumbers;
-    this.countryWiseValidation =
-      this.question.formElement.validation.countryWiseValidation;
-    this.questionId = this.question.id;
-    this.defaultValue = this.question?.defaultValue;
-    this.disableEdit = this.disableEdit ?? this.question?.disableEdit ?? false;
-    this.loadCountry(this.questionId, this.currentPage, this.size, this.searchKey);
-  }
-
-
-  initializeAnswer(param?: string): void {
-    let countryCode: string | undefined;
-    let mobileNumber: string | undefined;
-  
-    const value = param === 'answer' && this.question?.answer
-      ? this.question.answer
-      : this.question?.defaultValue;
-  
-    if (this.displayCountryCode) {
-      // Expect "countryCode mobileNumber"
-      [countryCode, mobileNumber] = (value || '').split(' ');
-    } else {
-      // Only mobile number present
-      mobileNumber = value || '';
-    }
-    
-    this.mobileNumber = mobileNumber || '';
-  
-    if (this.displayCountryCode) {
-      if (!this.selectedCountry) {
-        this.selectedCountry = [];
-      }
-  
-      let matchedCountry = this.countryDetails.find(
-        (country) => country.value === countryCode
-      );
-  
-      if (matchedCountry) {
-        this.selectedCountry= [matchedCountry];
-      }
-
-
-      else if (countryCode) {
-        // Not found? Fetch from API directly
-        this.countryService.loadCountryDetails(this.questionId, 0, 1, countryCode).subscribe((data) => {
-          const extraCountries = this.countryService.processCountryDetails(
-            data.result.content,
-            this.displayFlag,
-            this.displayCode,
-            this.showCountryName
-          );
-          matchedCountry = extraCountries.find(
-            (country) => country.value === countryCode
-          );
-          if (matchedCountry) {
-            // Add to dropdown list if missing
-            if (!this.countryDetails.some((c) => c.value === matchedCountry!.value)) {
-              this.countryDetails = [matchedCountry, ...this.countryDetails];
-            }
-            // Preselect it
-            this.selectedCountry = [matchedCountry];
-          }
-        });
-      } 
-    }
-  }
-  
-
-  onCountryChange() {
-    this.validationFailed = false;
-    this.validationMessage = '';
-    this.updateAnswer();
-  }
-
-  onInput(event: Event) {
-    this.validationService.clearInvalid(this.buildElementId());
-    const input = event.target as HTMLInputElement;
-  
-    // Regular expression to allow only numbers and multiple hyphens, but ensure only one hyphen between numbers
-    const regex = /^(\d+)(-\d+)*$/;
-  
-    if (!regex.test(input.value)) {
-      // Remove invalid characters
-      input.value = input.value.replace(/[^\d-]/g, '');
-  
-      // Ensure only one hyphen is present between numbers
-      input.value = input.value
-        .split('-')
-        .filter((segment, index, array) => segment || index === 0 || index === array.length - 1)
-        .join('-');
-    }
-  
-    // Update the model
-    this.mobileNumber = input.value;
-    
-    this.updateAnswer();
-  }
-  onMobileNumberChange() {
-  }
-
-  updateAnswer() {  
-    if(this.displayCountryCode){
-      if (this.selectedCountry.length > 0 && this.mobileNumber) {
-        const countryCode = this.selectedCountry[0].value;
-        this.question.answer = `${countryCode} ${this.mobileNumber}`;
-      }
-    }else {
-      this.question.answer = this.mobileNumber;
-    }
-    this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0});
-  }
-
-  validateMobile() {
-    this.validationFailed = false;
-    this.validationMessage = '';
-  
-    if (this.required && (!this.mobileNumber || (this.displayCountryCode && this.selectedCountry.length === 0))) {
-      this.validationFailed = true;
-      this.validationService.clearInvalid(this.buildElementId());
-      this.validationMessage = 'This is a required question';
-    } else {
-      this.updateAnswer();
-    }
-  }
-
-  loadCountry(id: string, currentPage: number, size: number, searchKey: string, isSearch: boolean = false) {
-    this.countryService.loadCountryDetails(this.questionId, currentPage, size, searchKey).subscribe((data) => {
-      if (this.totalPages === 0) {
-        this.totalPages = data.result.totalPages;
-      }
-      this.lastPage=data.result.last;
-      this.isFirstPage = data.result.first;
-      let newCountries=this.countryService.processCountryDetails(
-        data.result.content,
-        this.displayFlag,
-        this.displayCode,
-        this.showCountryName
-      )      
-
-      if (this.currentPage > 0) {
-        this.countryDetails = [
-          ...this.countryDetails,
-          ...newCountries.filter(item => !this.countryDetails.some((existing: any) => existing.value === item.value))
-          ];
-      } else {
-        this.countryDetails = [
-          ...newCountries.filter(item => !this.countryDetails.some((existing: any) => existing.value === item.value)),
-          ...this.countryDetails
-          ];
-      }
-      if(this.defaultValue && !isSearch){
-        this.initializeAnswer('default')
-      }
-      if (this.question.answer && !isSearch) {
-        this.initializeAnswer('answer');
-      }
-    });
-
-  }
-
-  getNextSetOfItems(event: any) {
-    const element = event.target;
-    if(!this.lastPage){
-      if (Math.floor(element.scrollHeight - element.scrollTop) <= element.clientHeight) {
-        this.loadMoreData();
-      }
-    }
-    if (!this.isFirstPage && element.scrollTop <= 150) {
-      this.loadPreviousData();
-    }
-  }
-
-  loadMoreData() {
-    setTimeout(() => {
-      this.currentPage++;
-      if (this.currentPage >= 0) {
-        this.loadCountry(this.questionId,this.currentPage, this.size, "");
-      }
-    }, 0);
-  }
-
-  loadPreviousData() {
-    setTimeout(() => {
-      this.currentPage--;
-      if (this.currentPage >= 0) {
-        this.loadCountry(this.questionId,this.currentPage, this.size, "");
-      }
-    }, 0);
-  }
-
-  search(searchTerm: any) {
-    if (searchTerm == '') {
-      this.loadCountry(this.questionId,this.currentPage, this.size, "",true);
-    }
-    else {
-      this.countryDetails = []; 
-      this.loadCountry(this.questionId,this.currentPage, this.size, searchTerm,true);
-    }
-  }
-
-  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-fields/number-fields/number-fields.component.html

@@ -1,70 +0,0 @@
-<div
-  [ngClass]="{ 'mb-4': !inLine }"
-  class="px-3"
-  [id]="(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id"
-  [attr.name]="question.testElementName"
->
-  <div class="input-wrapper mb-2" *ngIf="!inLine">
-    <div *ngIf="question.questionNumber" [innerHTML]="question.questionNumber"></div>
-    <span *ngIf="question.questionNumber" class="space"></span>
-    <label>{{ question.question }}</label
-    >&nbsp;
-    <span class="text-danger" *ngIf="question?.required">*</span>
-    <div
-      class="svg-wrapper mb-2 hintIcon"
-      [attr.data-title]="hint"
-      *ngIf="hint"
-    >
-      <svg
-        class="hintSvg"
-        viewBox="0 0 30 30"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z"
-          stroke="#323232"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291"
-          stroke="#323232"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20"
-          stroke="#323232"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </div>
-  </div>
-  <input
-    type="number"
-    class="form-control mb-2 height"
-    [placeholder]="placeholder"
-    [class.hide-spin-buttons]="!upDown"
-    (blur)="validateNumber()"
-    [(ngModel)]="enteredNumber"
-    [class.invalid]="validationFailed"
-    [class.invalid-question]="isInvalid && (!inLine || !enteredNumber)"
-    (input)="validateInput($event)"
-    [attr.min]="min"
-    [attr.max]="max"
-    (wheel)="preventNumberScroll($event)"
-    [disabled]="disableEdit"
-  />
-  <div *ngIf="isInvalid && (!inLine || !enteredNumber)" class="error-message">
-    {{ errorMessage }}
-  </div>
-  <div *ngIf="validationFailed && !isInvalid" class="text-danger error-message">
-    {{ validationMessage }}
-  </div>
-</div>

package/src/form-fields/number-fields/number-fields.component.scss

@@ -1,17 +0,0 @@
-@import '../../styles/shared-style.scss';
-
-.hide-spin-buttons::-webkit-outer-spin-button,
-.hide-spin-buttons::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-
-.invalid-question {
-  border: 2px solid #f44336; /* Material red */
-  border-radius: 4px;
-  padding: 8px;
-  margin-bottom: 4px;
-}
-
-

package/src/form-fields/number-fields/number-fields.component.spec.ts

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