@piserve-tech/form-submission 1.3.68 → 1.3.70

package/ng-package.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/form-submission",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+      "@kolkov/angular-editor",
+      "@angular/google-maps",
+      "@angular/material",
+      "@fortawesome/fontawesome-free",
+      "@piserve-tech/drop-down",
+      "@piserve-tech/file-preview",
+      "@piserve-tech/file-upload",
+      "@syncfusion/ej2-material-theme",
+      "@types/google.maps",
+      "@types/googlemaps",
+      "bootstrap",
+      "ng2-file-upload"
+
+  ]
+}

package/package.json

@@ -1,43 +1,30 @@
-{
-  "name": "@piserve-tech/form-submission",
-  "version": "1.3.68",
-  "peerDependencies": {
-    "@angular/common": "^16.1.0",
-    "@angular/core": "^16.1.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0",
-    "@kolkov/angular-editor": "^3.0.0-beta.2",
-    "@angular/google-maps": "^16.2.14",
-    "@angular/material": "^16.2.14",
-    "@fortawesome/fontawesome-free": "^6.5.1",
-    "@piserve-tech/drop-down": "^1.2.74",
-    "@piserve-tech/file-preview": "^1.0.0",
-    "@piserve-tech/file-upload": "^1.1.20",
-    "@syncfusion/ej2-material-theme": "~25.1.40",
-    "@types/google.maps": "^3.55.8",
-    "@types/googlemaps": "^3.43.3",
-    "bootstrap": "^5.3.2",
-    "bootstrap-icons": "^1.11.3",
-    "ng2-file-upload": "^5.0.0",
-    "ngx-bootstrap": "^11.0.2"
-  },
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "http://192.168.1.208/form-builder/form-submission-component"
-  },
-  "module": "fesm2022/piserve-tech-form-submission.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/piserve-tech-form-submission.mjs",
-      "esm": "./esm2022/piserve-tech-form-submission.mjs",
-      "default": "./fesm2022/piserve-tech-form-submission.mjs"
-    }
-  }
-}
+{
+  "name": "@piserve-tech/form-submission",
+  "version": "1.3.70",
+  "peerDependencies": {
+    "@angular/common": "^16.1.0",
+    "@angular/core": "^16.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "@kolkov/angular-editor": "^3.0.0-beta.2",
+    "@angular/google-maps": "^16.2.14",
+    "@angular/material": "^16.2.14",
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "@piserve-tech/drop-down": "^1.2.74",
+    "@piserve-tech/file-preview": "^1.0.0",
+    "@piserve-tech/file-upload": "^1.1.20",
+    "@syncfusion/ej2-material-theme": "~25.1.40",
+    "@types/google.maps": "^3.55.8",
+    "@types/googlemaps": "^3.43.3",
+    "bootstrap": "^5.3.2",
+    "bootstrap-icons": "^1.11.3",
+    "ng2-file-upload": "^5.0.0",
+    "ngx-bootstrap": "^11.0.2"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "http://192.168.1.208/form-builder/form-submission-component"
+  }
+}

package/src/environment/environment.ts

@@ -0,0 +1,6 @@
+export let environment = {
+    production: false,
+    googleRecaptchaSiteKey: '',
+     htmlDirection: 'ltr'
+  };
+  

package/src/form-fields/check-box-fields/check-box-fields.component.html

@@ -0,0 +1,101 @@
+<div  class="mb-5 px-3">
+  <div class="input-wrapper mb-2">
+    <div [innerHTML]="question.questionNumber"></div>
+    &nbsp;&nbsp; <label>{{ question.question }}</label
+    >&nbsp;
+    <span class="text-danger" *ngIf="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="form-check" *ngFor="let option of customOptions">
+    <input
+      class="form-check-input"
+      type="checkbox"
+      [id]="option.value + question?.id"
+      [name]="option.value + 'Checkbox'"
+      [value]="option.value"
+      (change)="onCheckboxChange(option, $event)"
+      [disabled]="isOptionDisabled(option)"
+      [checked]="selectedOptions.includes(option)"
+    />
+    <label
+      class="formCheckLabel ms-2 me-4 mb-2"
+      [for]="option.value + question?.id"
+      *ngIf="optionType == 'OPTION'"
+      >{{ option.value }}</label
+    >
+    <label
+      class="formCheckLabel ms-2 me-4"
+      [for]="option.value + question?.id"
+      *ngIf="optionType == 'LOOKUP' || 'DATABASE' || 'API'"
+      >{{ option.label }}</label
+    >
+  </div>
+  <div *ngIf="validationFailed" class="text-danger">
+    <svg
+      class="validationSvg"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z"
+        fill="#FF0000"
+        stroke="#FF0000"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12 12.75L12 7.75"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <circle cx="12" cy="16" r="1" fill="white" />
+    </svg>
+    {{ validationMessage }}
+  </div>
+</div>

package/src/form-fields/check-box-fields/check-box-fields.component.scss

@@ -0,0 +1,4 @@
+@import '../../styles/shared-style.scss';
+.form-check-input ,.form-check-label{
+    cursor: pointer;
+}

package/src/form-fields/check-box-fields/check-box-fields.component.spec.ts

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

package/src/form-fields/check-box-fields/check-box-fields.component.ts

@@ -0,0 +1,336 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormService } from '../../services/form.service';
+
+@Component({
+  selector: 'lib-check-box-fields',
+  templateUrl: './check-box-fields.component.html',
+  styleUrls: ['./check-box-fields.component.scss'],
+})
+export class CheckBoxFieldsComponent {
+  @Input() question: any = {};
+  count: number = 0;
+  required: boolean = false;
+  hint: string = '';
+  selectionType: string = '';
+  minimumSelection?: number;
+  maximumSelection?: number;
+  optionType: string = '';
+  lookupTable: any = {};
+  customOptions: any[] = [];
+  database: any = {};
+  api: any = {};
+  apiOptions: any[] = []; 
+  selectedOptions: any[] = [];
+  validationFailed: boolean = false;
+  validationMessage: string = '';
+
+  constructor(private formService: FormService) { }
+
+  ngOnInit() {
+    this.valueAssigned();
+  }
+
+  valueAssigned() {
+    this.count = this.question.count;
+    this.required = this.question.required;
+    this.hint = this.question.hint;
+    this.selectionType = this.question.formElement.appearance.selectionType;
+    this.minimumSelection =
+      this.question.formElement.validation.minimumSelection;
+    this.maximumSelection =
+      this.question.formElement.validation.maximumSelection;
+    this.optionType = this.question.formElement.option.optionType;
+    switch (this.optionType) {
+      case 'OPTION':
+        this.customOptions = this.question.formElement.option.customOptions;
+        if (this.question.answer) {
+          this.initializeCustomOption();
+        }
+        break;
+      case 'LOOKUP':
+        this.lookupTable = this.question.formElement.option.lookupTable;
+        this.fetchDataFromLookup();
+        break;
+      case 'DATABASE':
+        this.database = this.question.formElement.option.database;
+        this.fetchDataFromDatabase();
+        break;
+      case 'API':
+        this.api = this.question.formElement.option.api;
+        this.fetchDataFromAPI();
+        break;
+      default:
+        console.warn('Unknown option type:', this.optionType);
+    }
+
+    // If selectionType is 'SINGLE', set minimumSelection and maximumSelection to 1
+    if (this.selectionType === 'SINGLE') {
+      this.minimumSelection = 1;
+      this.maximumSelection = 1;
+    }
+
+    // If selectionType is 'MULTIPLE' and minSelection and maxSelection are not specified, set them to undefined
+    if (
+      this.selectionType === 'MULTIPLE' &&
+      !this.minimumSelection &&
+      !this.maximumSelection
+    ) {
+      this.minimumSelection = undefined;
+      this.maximumSelection = undefined;
+    }
+
+    if(this.question.childLogics && this.question.answer){
+      this.updateChildLogics(this.question)
+    }
+  }
+
+  initializeCustomOption() {
+    this.customOptions?.forEach((option: any) => {
+      if (this.question?.answer?.find((a: any) => a.toString() === option.value.toString())) {
+        this.selectedOptions.push(option);
+      }
+    })
+  }
+
+  onCheckboxChange(option: any, event: any) {
+    if (this.selectionType === 'SINGLE') {
+      if (event.target.checked) {
+        this.selectedOptions = [option];
+        this.question.answer = [option.value];
+      } else {
+        this.selectedOptions = [];
+        this.question.answer = [];
+      }
+      this.isMinimumSelectionValid();
+    } else if (this.selectionType === 'MULTIPLE') {
+      if (event.target.checked) {
+        if (!this.selectedOptions.includes(option)) {
+          this.selectedOptions.push(option);
+        }
+      } else {
+        this.selectedOptions = this.selectedOptions.filter(
+          (item) => item !== option
+        );
+      }
+      this.question.answer = this.selectedOptions.map((item) => item.value);
+      this.isMinimumSelectionValid();
+    }
+
+    // Check if the number of selected options exceeds the maximum allowed
+    if (
+      this.maximumSelection !== undefined &&
+      this.selectedOptions.length > this.maximumSelection
+    ) {
+      // If exceeded, uncheck the last selected option
+      event.target.checked = false;
+      this.selectedOptions = this.selectedOptions.filter(
+        (item) => item !== option
+      );
+      this.question.answer = this.selectedOptions.map((item) => item.value);
+      this.isMinimumSelectionValid();
+    }
+
+    if(this.question.childLogics){
+          this.updateChildLogics(this.question);
+        }
+  }
+
+  updateChildLogics(question: any) {
+    if (question.childLogics && Array.isArray(question.childLogics)) {
+      question.childLogics.forEach((childLogic: any) => {
+        if(this.selectionType=='SINGLE'){
+          if(this.selectedOptions.length==0){
+            childLogic.showLogic=false;
+          }
+          else{
+            childLogic.showLogic = this.evaluateCondition(this.selectedOptions[0]?.value, childLogic.condition, childLogic.inputValue);
+          }
+        }
+        else if (this.selectionType === 'MULTIPLE') {
+          if(this.selectedOptions.length==0){
+            childLogic.show=false;
+          }
+          else{
+            const selectedValues = this.selectedOptions.map((item: any) => item.value);
+          childLogic.showLogic = this.evaluateMultipleCondition(selectedValues, childLogic.condition, childLogic.inputValue);
+          }
+        }
+      });
+    }
+  }
+  
+  evaluateCondition(answer: any[], condition: string, inputValue: any): boolean {
+    const stringInputValue = Array.isArray(inputValue) ? inputValue.map(val => val.toString()) : inputValue;
+
+    switch (condition) {      
+      case "!=":
+        return answer !=stringInputValue;
+      case "=":
+        return answer ==stringInputValue;
+      case "IN":
+        return stringInputValue.includes(answer);
+      case "NOT IN":
+        return !(stringInputValue.includes(answer))
+      default:
+        return false;
+    }
+  }
+
+  evaluateMultipleCondition(answers: any[], condition: string, inputValue: any): boolean {
+    const stringInputValue = Array.isArray(inputValue) ? inputValue.map(val => val.toString()) : inputValue.toString();
+    switch (condition) {
+      case "!=":
+        return answers.every(answer => answer != stringInputValue);
+      case "=":
+        return answers.some(answer => answer == stringInputValue);
+      case "IN":
+        return answers.some(answer => stringInputValue.includes(answer));
+      case "NOT IN":
+        return answers.every(answer => !stringInputValue.includes(answer));
+      default:
+        return false;
+    }
+  }
+
+  fetchDataFromLookup() {
+    this.formService.fetchDataFromLookup(this.lookupTable).subscribe(
+      (response) => {
+        this.customOptions = response.result.values.map(
+          (item: { value: string; label: string }) => ({
+            value: item.value,
+            label: item.label,
+          })
+        );
+        if (this.question.answer) {
+          this.initializeCustomOption();
+        }
+      },
+      (error) => {
+        console.error('HTTP Error:', error);
+      }
+    );
+  }
+
+  fetchDataFromDatabase() {
+    const transformedDatabase = this.transformDatabaseObject(this.database);
+    this.formService.fetchDataFromDatabase(transformedDatabase).subscribe(
+      (response) => {
+        if (response.success) {
+          this.customOptions = response.result.map(
+            (item: { value: string; label: string }) => ({
+              value: item.value,
+              label: item.label,
+            })
+          );
+          if (this.question.answer) {
+            this.initializeCustomOption();
+          }
+        } else {
+          console.error('Error fetching data from database:', response.message);
+        }
+      },
+      (error) => {
+        console.error('HTTP Error:', error);
+      }
+    );
+  }
+
+  transformDatabaseObject(database: any) {
+    return {
+      tableName: database.tableName,
+      valueField: database.valueField,
+      labelField: database.labelField,
+      criteria: database.criteria.map((criteria: any) => ({
+        field: criteria?.field,
+        valueSource:criteria?.valueSource,
+        condition: criteria?.condition,
+        value: criteria?.inputValue,
+        logicalOperator: criteria?.logicalOperator,
+      })),
+    };
+  }
+
+  fetchDataFromAPI() {
+    const apiConfig = this.api;
+    this.formService.fetchDataFromExternalAPI(apiConfig).subscribe(
+      (response) => {
+        let data;
+        if(apiConfig.pathToValue) {
+          data = this.extractDataByPath(response, apiConfig.pathToValue);
+        } else {
+          data = response;
+        }
+        
+        this.customOptions = data.map((item: any) => ({
+          value: item[apiConfig.valueField],
+          label: item[apiConfig.labelField],
+        }));
+        if (this.question.answer) {
+          
+          this.initializeCustomOption();
+          
+        }
+      },
+      (error) => {
+        console.error('HTTP Error:', error);
+      }
+    );
+  }
+
+  extractDataByPath(data: any, path: string) {
+    return path.split('.').reduce((acc, part) => acc && acc[part], data);
+  }
+
+  isMinimumSelectionValid() {
+    this.validationFailed = false;
+    
+    if (this.selectedOptions.length == 0 && this.required) {
+      this.validationFailed = true;
+      this.validationMessage = 'This is a required question';
+      this.question.validation = false;
+    } else if (this.minimumSelection !== undefined) {
+      if(this.selectionType=='SINGLE'){
+        if (this.selectedOptions.length < this.minimumSelection && this.required) {
+          this.validationFailed = true;
+          this.validationMessage = `Minimum ${this.minimumSelection}  selection(s) required.`;
+          this.question.validation = false;
+        }
+        else {
+          this.question.validation = true;
+        }
+      }
+      else{
+        if (this.selectedOptions.length < this.minimumSelection) {
+          this.validationFailed = true;
+          this.validationMessage = `Minimum ${this.minimumSelection}  selection(s) required.`;
+          this.question.validation = false;
+        }
+        else {
+          this.question.validation = true;
+        }
+      }
+    } else {
+      this.question.validation = true;
+    }
+  }
+
+  getOptions() {
+    if (this.optionType === 'OPTION') {
+      return this.customOptions;
+    } else if (this.optionType === 'LOOKUP') {
+      return Object.values(this.lookupTable);
+    } else if (this.optionType === 'API') {
+      return this.apiOptions.map((option) => option.valueField);
+    } else {
+      return [];
+    }
+  }
+
+  isOptionDisabled(option: any): boolean {
+    return (
+      this.maximumSelection !== undefined &&
+      this.selectedOptions.length >= this.maximumSelection &&
+      !this.selectedOptions.includes(option)
+    );
+  }
+}