@piserve-tech/form-submission 1.3.317 → 1.3.319

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

@@ -1,256 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Logic } from '../../models/logic.model';
-import { ValidationService } from '../../services/validation.service';
-import { ElementTrackerService } from '../../services/element-tracker.service';
-import { AggregationFunctionService } from '../../services/aggregate.service';
-import { WhenClauseService } from '../../services/whenClause.service';
-
-@Component({
-  selector: 'lib-number-fields',
-  templateUrl: './number-fields.component.html',
-  styleUrls: ['./number-fields.component.scss'],
-})
-export class NumberFieldsComponent {
-  @Input() question: any = {};
-  @Input() inLine: boolean = false;
-  @Input() inCard: boolean = false;
-  @Input() submissionIndex!: number;
-  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
-  @Input() rowId: any;
-
-  count: number = 0;
-  required: boolean = false;
-  hint: string = '';
-  upDown!: boolean;
-  allowNegativeValues!: boolean;
-  placeholder: string = '';
-  min!: number;
-  max!: number;
-  enteredNumber!: number;
-  validationFailed: boolean = false;
-  validationMessage: string = '';
-  defaultValue!: number;
-  @Input() disableEdit: boolean = false;
-  private elementId: string='';
-  private subscribedToWhenClause = false;
-  constructor(
-      private validationService: ValidationService,
-      private tracker: ElementTrackerService,
-      private aggregateService:AggregationFunctionService,
-      private whenClauseService:WhenClauseService
-    ) {
-    }
-
-
-  ngOnInit() {
-    this.valueAssigned();
-  }
-
-  valueAssigned() {
-    this.count = this.question.count;
-    this.required = this.question.required;
-    this.hint = this.question.hint;
-    this.upDown = this.question.formElement.appearance.upAndDownButton;
-    this.allowNegativeValues =
-      this.question.formElement.appearance.allowNegativeValues;
-    this.placeholder = this.question.formElement?.appearance?.placeholder || '';
-    this.min = this.question.formElement.validation.min;
-    this.max = this.question.formElement.validation.max;
-    this.defaultValue = this.question?.defaultValue;
-    this.disableEdit = this.disableEdit ?? this.question?.disableEdit ?? false;
-    this.enteredNumber = this.defaultValue;
-    if(this.question.answer){
-      this.enteredNumber = this.question?.answer;
-      setTimeout(() => {
-        this.whenClauseService.setQuestionAnswer(this.question.id,this.enteredNumber,true);
-      });
-    }else if(this.defaultValue && !this.question.answer){
-      this.question.answer = this.defaultValue;
-      setTimeout(() => {
-        this.whenClauseService.setQuestionAnswer(this.question.id,this.question.answer,true);
-      });
-    } else{
-      setTimeout(() => {
-        this.whenClauseService.setQuestionAnswer(this.question.id,'',true);
-      });
-    }
-    if (this.question.childLogics && this.question.answer) {
-      this.updateChildLogics(this.question);
-    }
-    this.aggregateService.setNumberField(this.rowId,this.question.id,this.question.answer);
-  }
-
-  preventNumberScroll(event: WheelEvent) {
-    if (document.activeElement === event.target) {
-      event.preventDefault();
-    }
-  }
-
-  validateNumber() {
-    this.validationFailed = false;
-    this.validationService.clearInvalid(this.buildElementId());
-    this.validationMessage = '';
-    if (this.required && !this.enteredNumber && this.question.required) {
-      this.validationFailed = true;
-      this.validationMessage = `Please enter a valid number`;
-      this.question.validation = false;
-      this.question.validationMessage = `Please enter a valid number`;
-           if (!this.subscribedToWhenClause) {
-        this.subscribedToWhenClause = true;
-        this.whenClauseService.onQuestionChange().subscribe(change => {
-          this.validateNumber();
-    });
-  }
-    } else if (!this.allowNegativeValues && this.enteredNumber < 0) {
-      this.validationFailed = true;
-      this.validationMessage = 'Please enter a positive number';
-      this.question.validation = false;
-      this.question.validationMessage = 'Please enter a positive number';
-    } else if (
-      (this.min !== undefined && this.enteredNumber < this.min) ||
-      (this.max !== undefined && this.enteredNumber > this.max)
-    ) {
-      this.validationFailed = true;
-
-      // Construct appropriate validation message based on whether min, max, or both are provided
-      if (this.min !== undefined && this.max !== undefined) {
-        this.validationMessage = `Please enter a valid number between ${this.min} and ${this.max}`;
-        this.question.validationMessage = `Please enter a valid number between ${this.min} and ${this.max}`;
-      } else if (this.min !== undefined) {
-        this.validationMessage = `Please enter a number greater than or equal to ${this.min}`;
-        this.question.validationMessage = `Please enter a number greater than or equal to ${this.min}`;
-      } else if (this.max !== undefined) {
-        this.validationMessage = `Please enter a number less than or equal to ${this.max}`;
-        this.question.validationMessage = `Please enter a number less than or equal to ${this.max}`;
-      }
-
-      this.question.validation = false;
-    } else {
-      this.question.validation = true;
-    }
-    if (this.question.childLogics) {
-      this.updateChildLogics(this.question);
-    }
-  }
-
-  validateInput(event: any) {
-    this.validationService.clearInvalid(this.buildElementId());
-    this.question.answer = event.target.value;
-    this.aggregateService.setNumberField(this.rowId,this.question.id, event.target.value);
-    if (this.question.childLogics) {
-      this.updateChildLogics(this.question);
-    }
-    this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0});
-    this.whenClauseService.setQuestionAnswer(this.question.id,this.question.answer);
-  }
-
-  updateChildLogics(question: any) {
-    if (question.childLogics && Array.isArray(question.childLogics)) {
-      question.childLogics.forEach((childLogic: any) => {
-        if (
-          this.evaluateCondition(
-            question.answer,
-            childLogic.condition,
-            childLogic.inputValue
-          )
-        ) {
-          childLogic.showLogic = true;
-        } else {
-          childLogic.showLogic = false;
-          this.clearAnswersRecursively(childLogic);
-        }
-      });
-    }
-  }
-
-  clearAnswersRecursively(logic: any) {
-    if (!logic || !logic.rows) return;
-
-    logic.rows.forEach((row: any) => {
-      row.grid.forEach((item: any) => {
-        const element = item.element;
-
-        if (item.entityType === 'QUESTION' && element) {
-          // Clear answer if present
-          if ('answer' in element) {
-            element.answer = '';
-          }
-
-          // Recursively clear childLogics if any
-          if (element.childLogics && element.childLogics.length > 0) {
-            element.childLogics.forEach((childLogic: any) => {
-              this.clearAnswersRecursively(childLogic);
-            });
-          }
-        }
-
-        if (item.entityType === 'SUBFORM' && element && element.rows) {
-          // SUBFORM contains its own rows structure like a form
-          this.clearAnswersRecursively({ rows: element.rows });
-        }
-      });
-    });
-  }
-
-  evaluateCondition(answer: any, condition: any, inputValue: any) {
-    switch (condition) {
-      case '>':
-        return answer > Number(inputValue);
-      case '<':
-        return answer < Number(inputValue);
-      case '>=':
-        return answer >= Number(inputValue);
-      case '<=':
-        return answer <= Number(inputValue);
-      case '=':
-        return answer == inputValue;
-      case '!=':
-        return answer != inputValue;
-      default:
-        return false;
-    }
-  }
-
-
-
-  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);
-    setTimeout(() => {
-      this.whenClauseService.markLoadCompleted();
-    });
-  }
-
-  ngOnDestroy() {
-    if (this.elementId) {
-      this.tracker.unregisterElement(this.elementId);
-    }
-  }
-}

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

@@ -1,113 +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 [for]="'passwordField' + questionId">{{ 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="passwordWrapper">
-      <input
-      type="password"
-      class="form-control mb-2 height"
-      [id]="'passwordField' + questionId"
-      (blur)="validatePassword()"
-      [(ngModel)]="enteredPassword"
-      [class.invalid]="validationFailed"
-      [class.invalid-question]="isInvalid && (!inLine || !enteredPassword)"
-      (input)="validateInput($event)"
-      [disabled]="disableEdit"
-    />
-    <button
-      id="togglePasswordBtn"
-      class="toggle-password-btn"
-      (click)="togglePasswordVisibility()"
-      *ngIf="viewButton"
-    >
-      <i class="bi bi-eye-fill" [id]="'passwordEyeIcon' + questionId"></i>
-    </button>
-    </div>
-  <div class="password-strength-meter" *ngIf="displayStrength">
-    <div class="progress">
-      <div
-        class="progress-bar"
-        role="progressbar"
-        [style.width]="passwordStrength + '%'"
-        [class.bg-danger]="passwordStrength < 30"
-        [class.bg-warning]="passwordStrength >= 30 && passwordStrength < 70"
-        [class.bg-success]="passwordStrength >= 70"
-      ></div>
-    </div>
-  </div>
-  <div *ngIf="isInvalid && (!inLine || !enteredPassword)" class="error-message">
-    {{ errorMessage }}
-  </div>
-  <div *ngIf="validationFailed && !isInvalid" class="text-danger mb-2">
-    {{ validationMessage }}
-  </div>
-
-  <div class="cnfrmPasswordWrapper" *ngIf="confirmPassword">
-    <label for="'cnfrmPasswordField'+questionId">Confirm password</label>
-    <input
-      type="password"
-      class="form-control mb-2 height"
-      [id]="'cnfrmPasswordField' + questionId"
-      (blur)="checkPasswordMatch()"
-      [(ngModel)]="enteredCnfrmPassword"
-      [class.invalid]="validatedCnfrmPassword"
-      (input)="validateCnfrm($event)"
-      [disabled]="disableEdit"
-    />
-    <button
-      id="toggleCnfrmPasswordBtn"
-      class="toggle-password-btn"
-      (click)="toggleCnfrmPasswordVisibility()"
-      *ngIf="viewButton"
-    >
-      <i class="bi bi-eye-fill" [id]="'CnfrmPasswordEyeIcon' + questionId"></i>
-    </button>
-  </div>
-  <div *ngIf="validatedCnfrmPassword" class="text-danger error-message">
-    {{ cnfrmValidationMessage }}
-  </div>
-</div>

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

@@ -1,61 +0,0 @@
-@import '../../styles/shared-style.scss';
-
-.form-control{
-  position: relative;
-}
-
-.password-input-wrapper {
-  position: relative;
-}
-
-.password-input {
-  padding-right: 40px; 
-}
-
-.toggle-password-btn {
-  position: absolute;
-  top: 70%;
-  right: 15px;
-  transform: translateY(-50%);
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-}
-
-.toggle-password-btn:focus {
-  outline: none;
-}
-
-.passwordWrapper{
-  position: relative;
-}
-
-.cnfrmPasswordWrapper{
-  position: relative;
-}
-
-.password-strength-meter {
-  width: 40%;
-  margin-top: 10px;
-  margin-left: auto;
-}
-.progress{
-  height: 10px;
-}
-.progress-bar {
-  transition: width 0.3s ease-in-out;
-}
-.bi{
- font-size: 20px;
-}
-
-
-.invalid-question {
-  border: 2px solid #f44336; /* Material red */
-  border-radius: 4px;
-  padding: 8px;
-  margin-bottom: 4px;
-}
-
-
-

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

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