@piserve-tech/form-submission 1.3.317 → 1.3.319

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

@@ -1,248 +0,0 @@
-import { Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';
-import { Logic } from '../../models/logic.model';
-import { ValidationService } from '../../services/validation.service';
-import { ElementTrackerService } from '../../services/element-tracker.service';
-import { WhenClauseService } from '../../services/whenClause.service';
-
-@Component({
-  selector: 'lib-text-fields',
-  templateUrl: './text-fields.component.html',
-  styleUrls: ['./text-fields.component.scss'],
-})
-export class TextFieldsComponent {
-  @Input() question: any = {};
-  @Input() inLine: boolean = false;
-  @Input() inCard: boolean = false;
-  @Input() submissionIndex!: number;
-  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
-  answer: string = '';
-  count: number = 0;
-  required: boolean = false;
-  hint: string = '';
-  placeholder: string = '';
-  defaultValue: string = '';
-  @Input() disableEdit: boolean = false;
-  validationType: string = '';
-  validation: string = '';
-  regex!: RegExp;
-  enteredText: string = '';
-  validationFailed: boolean = false;
-  validationMessage: string = '';
-  private elementId: string='';
-  private subscribedToWhenClause = false;
-
-
-   constructor(
-        private validationService: ValidationService,
-        private tracker: ElementTrackerService,
-        private whenClauseService:WhenClauseService
-      )  { }
-
-  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.defaultValue = this.question?.defaultValue;
-    this.disableEdit = this.disableEdit ?? this.question?.disableEdit ?? false;
-    this.enteredText = this.defaultValue;
-    this.validationType = this.question.formElement.validation?.validationType;
-    if (this.validationType == 'CUSTOM_VALIDATION') {
-      this.validation = this.question.formElement.validation?.validation;
-    } else if (this.validationType == 'REGULAR_EXPRESSION') {
-      this.regex = this.question.formElement.validation?.regex;
-    }
-
-    if (
-      this.question.answer !== null &&
-      this.question.answer !== undefined &&
-      ((typeof this.question.answer === 'string' &&
-        this.question.answer.trim() !== '') ||
-        (Array.isArray(this.question.answer) &&
-          this.question.answer.length > 0) ||
-        (typeof this.question.answer === 'object' &&
-          Object.keys(this.question.answer).length > 0))
-    ) {
-      this.enteredText = this.question.answer;
-      setTimeout(() => {
-        this.whenClauseService.setQuestionAnswer(this.question.id,this.question.answer,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)
-    }
-  }
-
-  validatetextField() {
-    this.validationService.clearInvalid(this.buildElementId());
-    this.validationFailed = false;
-    this.validationMessage = '';
-    if (this.required && !this.enteredText && this.question.required) {
-      this.validationFailed = true;
-      this.validationMessage = 'This is a required question';
-      this.question.validation = false;
-      this.question.validationMessage = 'This is a required question';
-       if (!this.subscribedToWhenClause) {
-        this.subscribedToWhenClause = true;
-        this.whenClauseService.onQuestionChange().subscribe(change => {
-          this.validatetextField();
-    });
-  }
-    } else {
-      this.question.validation = true;
-    }
-    if (this.question.childLogics) {
-      this.updateChildLogics(this.question);
-    }
-  }
-
-  validateInput(event: any) {
-    this.validationService.clearInvalid(this.buildElementId());
-    let value = event.target.value;
-    if (this.validation == 'Numbers only') {
-      event.target.value = value?.replace(/\D/g, '');
-    } else if (this.validation == 'Alphanumeric') {
-      event.target.value = value?.replace(/[^a-zA-Z0-9]/g, '');
-    } else if (this.validationType == 'REGULAR_EXPRESSION' && this.regex) {
-      //event.target.value = value?.replace(this.regex, '');
-      const regex = new RegExp(this.regex);
-
-      if (regex.test(value)) {
-        event.target.value = value;
-      } else {
-        event.target.value = value.slice(0, -1);
-      }
-    }
-    this.question.answer = event.target.value;
-    this.answerChange.emit({answer:event.target.value,maxPossibleScore:0});
-    this.whenClauseService.setQuestionAnswer(this.question.id,this.question.answer);
-    this.validatetextField();
-    if(!this.inLine && !this.inCard) {
-      setTimeout(() => {
-        const el = document.getElementById(this.question.id);
-        if (el) {
-          (el as HTMLElement).focus();
-        }
-      });
-    }
-
-  }
-
-  updateChildLogics(question: any) {
-    if (question.childLogics && Array.isArray(question.childLogics)) {
-      question.childLogics.forEach((childLogic: any) => {
-        if (this.evaluateCondition(this.enteredText, childLogic.condition, childLogic.inputValue)) {
-          childLogic.showLogic = true;
-        }
-        else {
-          childLogic.showLogic = false;
-          this.clearAnswersRecursively(childLogic);
-        }
-      });
-    }
-  }
-
-  evaluateCondition(answer: any, condition: string, inputValue: any): boolean {
-    const stringInputValue = inputValue;
-
-    switch (condition) {
-      case '!=':
-        return answer != inputValue;
-      case '=':
-        return answer == inputValue;
-      case 'LIKE':
-        return answer.includes(inputValue);
-      case 'NOT LIKE':
-        return !answer.includes(inputValue);
-      case 'BEGIN WITH':
-        return answer.startsWith(inputValue);
-      case 'END WITH':
-        return answer.endsWith(inputValue);
-      default:
-        return false;
-    }
-  }
-
-  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 });
-        }
-      });
-    });
-  }
-
-  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/toggle-switch-fields/toggle-switch-fields.component.html

@@ -1,70 +0,0 @@
-<div [ngClass]="{ 'mb-4': !inLine }" class="px-3" [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="mt-2">
-    <label
-      class="switch"
-      [ngClass]="{
-        'direction-rtl': acceptedLanguage === 'ara',
-        'direction-ltr': acceptedLanguage !== 'ara'
-      }"
-      [attr.name]="question.testElementName"
-    >
-      <input
-        type="checkbox"
-        id="togBtn"
-        (change)="toggleSliderColor($event)"
-        [checked]="selectedValue === labelOnValue"
-        [attr.data-state]="selectedValue"
-        [disabled]="disableEdit"
-      />
-      <div
-        class="slider round"
-        [ngClass]="getDirectionClass()"
-        [ngStyle]="{ 'background-color': toggleBackgroundColor }"
-      >
-        <span class="on action-btn-text">{{ labelOnValue }}</span>
-        <span class="off action-btn-text">{{ labelOffValue }}</span>
-      </div>
-    </label>
-  </div>
-</div>

package/src/form-fields/toggle-switch-fields/toggle-switch-fields.component.scss

@@ -1,112 +0,0 @@
-@import "../../styles/shared-style.scss";
-
-//slider button
-.switch {
-  position: relative;
-  display: inline-block;
-  width: auto;
-  height: 34px;
-  min-width: 120px;
-}
-
-.switch input {
-  display: none;
-}
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 26px;
-  width: 26px;
-  bottom: 4px;
-  background-color: white;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-input:checked+.slider {
-  background-color: #00c48c;
-}
-
-input:not(:checked)+.slider {
-  background-color: #00c48c;
-}
-
-input:focus+.slider {
-  box-shadow: 0 0 1px #2196f3;
-}
-
-/* Specific changes for direction-rtl when checked */
-.direction-rtl input:checked + .slider:before {
-  -webkit-transform: translateX(-55px); /* Adjust this value based on your needs */
-  -ms-transform: translateX(-55px); /* Adjust this value based on your needs */
-  transform: translateX(-86px); /* Adjust this value based on your needs */
-}
-
-/* Default behavior when checked */
-input:checked+.slider:before {
-  -webkit-transform: translateX(55px);
-  -ms-transform: translateX(55px);
-  transform: translateX(86px);
-}
-
-.on {
-  display: none;
-}
-
-.on,
-.off {
-  color: white;
-  position: absolute;
-  transform: translate(-50%, -50%);
-  top: 50%;
-  left: 50%;
-  font-size: 13px;
-  font-weight: 500;
-}
-
-input:checked+.slider .on {
-  display: block;
-}
-
-input:checked+.slider .off {
-  display: none;
-}
-
-.slider.round {
-  border-radius: 28px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}
-
-.direction-rtl .slider:before {
-  left: 59px;
-  right: 4px;
-}
-
-.direction-ltr .slider:before {
-  left: 4px;
-  right: 59px;
-}
-
-.invalid-question {
-  border: 2px solid #f44336; /* Material red */
-  border-radius: 4px;
-  padding: 8px;
-  margin-bottom: 4px;
-}
-
-

package/src/form-fields/toggle-switch-fields/toggle-switch-fields.component.spec.ts

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

package/src/form-fields/toggle-switch-fields/toggle-switch-fields.component.ts

@@ -1,74 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'lib-toggle-switch-fields',
-  templateUrl: './toggle-switch-fields.component.html',
-  styleUrls: ['./toggle-switch-fields.component.scss'],
-})
-export class ToggleSwitchFieldsComponent {
-  @Input() question: any = {};
-  @Input() inLine: boolean = false;
-  @Input() inCard: boolean = false;
-  @Input() submissionIndex!: number;
-  @Input() acceptedLanguage: string ='';
-  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
-
-  count: number = 0;
-  required: boolean = false;
-  hint: string = '';
-  labelOnValue: string = '';
-  labelOffValue: string = '';
-  labelOnColor: string = '';
-  labelOffColor: string = '';
-  toggleBackgroundColor: string = '';
-  selectedValue : string ='';
-  @Input() disableEdit: boolean = false;
-  
-  ngOnInit() {
-    this.valueAssigned();
-  }
-
-  getDirectionClass(): string {
-    return this.acceptedLanguage === 'ara' ? 'direction-rtl' : 'direction-ltr';
-  }
-
-  valueAssigned() {
-    this.count = this.question.count;
-    this.required = this.question.required;
-    this.hint = this.question.hint;
-    this.labelOnValue = this.question.formElement.appearance.labelOnValue;
-    this.labelOffValue = this.question.formElement.appearance.labelOffValue;
-    this.labelOnColor = this.question.formElement.appearance.labelOnColor;
-    this.labelOffColor = this.question.formElement.appearance.labelOffColor;
-   
-    if (!this.question.answer) {
-      this.question.answer = this.labelOffValue;
-      this.question.validation = true;
-      this.selectedValue=this.labelOffValue;
-      this.toggleBackgroundColor = this.labelOffColor;
-    }
-    if (this.question.answer) {
-      if(this.question.answer===this.labelOnValue){
-        this.selectedValue=this.labelOnValue;
-        this.toggleBackgroundColor = this.labelOnColor;
-      }
-      else{
-        this.selectedValue=this.labelOffValue;
-        this.toggleBackgroundColor = this.labelOffColor;
-      }
-    
-      this.question.validation = true;
-    }
-  }
-
-  toggleSliderColor(event: any): void {
-    let isChecked = event.target.checked;    
-    this.question.answer = isChecked ?this.labelOnValue:this.labelOffValue;
-    this.question.validation = true;
-   this.selectedValue=this.question.answer;
-    this.toggleBackgroundColor = isChecked
-      ? this.question.formElement.appearance.labelOnColor
-      : this.question.formElement.appearance.labelOffColor;
-      this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0});
-  }
-}

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

@@ -1,109 +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">
-    <input
-      [id]="question.id"
-      type="text"
-      class="form-control col-11.5 rounded height"
-      [placeholder]="placeholder"
-      [(ngModel)]="enteredUrl"
-      (blur)="validateUrl()"
-      (input)="validateInput($event)"
-      [class.invalid]="validationFailed"
-      [class.invalid-question]="isInvalid && (!inLine || !enteredUrl)"
-      [disabled]="disableEdit"
-    />
-    <div class="ps-2 pe-2">
-      <button
-        *ngIf="showPreviewButton"
-        type="button"
-        class="btn col-.5 custom-button rounded d-flex justify-content-center align-items-center height"
-        (click)="handleClick()"
-      >
-        <svg
-          width="30"
-          height="30"
-          viewBox="0 0 30 30"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M4.99561 16.2503C4.99561 21.7754 9.47462 26.2544 14.9998 26.2544C20.5249 26.2544 25.0039 21.7754 25.0039 16.2503C25.0039 10.7251 20.5249 6.24609 14.9998 6.24609H6.24613"
-            stroke="#084FFF"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M9.99766 2.49219L6.24609 6.24375"
-            stroke="#084FFF"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M9.99766 9.99766L6.24609 6.24609"
-            stroke="#084FFF"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M17.7924 14.8125L14.3035 18.3015L12.2051 16.2106"
-            stroke="#084FFF"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-  <div *ngIf="isInvalid && (!inLine || !enteredUrl)" class="error-message">
-    {{ errorMessage }}
-  </div>
-  <div *ngIf="validationFailed && !isInvalid" class="text-danger error-message">
-    {{ validationMessage }}
-  </div>
-</div>

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

@@ -1,22 +0,0 @@
-@import '../../styles/shared-style.scss';
-.custom-button {
-  border: 1px solid #ced4da; /* Match the border of the input field */
-  background-color: transparent; /* Transparent background */
-  padding: 0.375rem 0.75rem; /* Bootstrap button padding */
-  line-height: 1.5; /* Bootstrap button line-height */
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Bootstrap button transition */
-}
-
-.invalid-question {
-  border: 2px solid #f44336; /* Material red */
-  border-radius: 4px;
-  padding: 8px;
-  margin-bottom: 4px;
-}
-
-
-
-
-
-

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

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