@piserve-tech/form-submission 1.3.314 → 1.3.316

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

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

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

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

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

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

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

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

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