@piserve-tech/form-submission 1.3.314 → 1.3.316

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

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

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

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

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

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

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

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