@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/form-fields/terms-and-condition-fields/terms-and-condition-fields.component.html

@@ -0,0 +1,52 @@
+<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 (click)="preview()">{{ 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="modal1" *ngIf="visible">
+    <div class="modal-content1">
+      <span class="close" (click)="closeModal()">&times;</span>
+      <div class="imgContiner">
+      <img [src]="imgUrl" alt="Image">
+    </div>
+    </div>
+  </div>
+</div>
+

package/src/form-fields/terms-and-condition-fields/terms-and-condition-fields.component.scss

@@ -0,0 +1,85 @@
+@import '../../styles/shared-style.scss';
+label{
+    color: #084FFF;
+}
+.modal1 {
+    display: flex; /* Show the modal */
+    position: fixed; /* Stay in place */
+    z-index: 1000; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(0, 0, 0); /* Fallback color */
+    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+    align-items: center;
+  }
+  
+  .modal-content1 {
+    background-color: #fefefe;
+    margin: 15% auto; /* 15% from the top and centered */
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%; /* Could be more or less, depending on screen size */
+    max-width: 877px;
+  }
+  
+  .close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    justify-content: flex-end;
+    display: flex;
+    opacity: 1;
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .imgContiner{
+    height: 500px;
+    overflow-y: auto;
+    img{
+        max-width: 100%;
+        width: 100%;
+
+    }
+  }
+  div::-webkit-scrollbar,
+main::-webkit-scrollbar,
+ul::-webkit-scrollbar {
+  width: 6px;
+  height: 8px;
+  visibility: hidden;
+}
+div::-webkit-scrollbar-thumb,
+main::-webkit-scrollbar-thumb,
+ul::-webkit-scrollbar-thumb {
+  background-color: var(--scrollBarThumbColor);
+  border-radius: 8px;
+  visibility: hidden;
+}
+
+div:hover::-webkit-scrollbar,
+main:hover::-webkit-scrollbar,
+ul:hover::-webkit-scrollbar {
+  visibility: unset;
+}
+div:hover::-webkit-scrollbar-thumb,
+main:hover::-webkit-scrollbar-thumb,
+ul:hover::-webkit-scrollbar-thumb {
+  visibility: unset;
+}
+
+.invalid-question {
+  border: 2px solid #f44336; /* Material red */
+  border-radius: 4px;
+  padding: 8px;
+  margin-bottom: 4px;
+}
+
+

package/src/form-fields/terms-and-condition-fields/terms-and-condition-fields.component.spec.ts

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

package/src/form-fields/terms-and-condition-fields/terms-and-condition-fields.component.ts

@@ -0,0 +1,62 @@
+import { Component, Input } from '@angular/core';
+import { FormService } from '../../services/form.service';
+import { DataService } from '../../services/data.service';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+@Component({
+  selector: 'lib-terms-and-condition-fields',
+  templateUrl: './terms-and-condition-fields.component.html',
+  styleUrls: ['./terms-and-condition-fields.component.scss'],
+})
+export class TermsAndConditionFieldsComponent {
+  @Input() question: any = {};
+  @Input() inLine: boolean = false;
+  
+  count: number = 0;
+  required: boolean = false;
+  hint: string = '';
+  fileDataUrl:any;
+  private apiUrl: string = '';
+  imgUrl:any
+  header: any = {};
+  visible:boolean=false;
+  constructor(
+    private formService: FormService,
+    private http: HttpClient, 
+    private dataService: DataService
+  ) {
+    this.dataService.apiUrl$.subscribe((data) => {
+      this.apiUrl = data;
+    });
+  }
+  ngOnInit() {
+    this.count = this.question.count;
+    this.required = this.question.required;
+    this.hint = this.question.hint;
+    this.fileDataUrl=this.question.formElement.termsAndConditionType.fileUrl
+    this.question;
+    this.count;
+  }
+  preview(): Observable<any> {
+    const headers = new HttpHeaders({
+      'Content-Type': this.header.contentType,
+      'auth-user': this.header.authUser,
+    });
+    const body = {
+      // Your request body content here
+    };
+    const options = {
+      headers: headers,
+      body: body,
+    };
+    const fileUrl =this.fileDataUrl;
+    const encodedFileUrl = encodeURIComponent(fileUrl);
+    const fullUrl = `?url=${encodedFileUrl}`;
+    this.imgUrl= (this.apiUrl + `/api/cdn/preview${fullUrl}`);
+    this.visible= true;
+    return this.http.get<any>(this.apiUrl + `/api/cdn/preview${fullUrl}`, options);
+  }
+  closeModal() {
+    this.visible = false;
+  }
+}

package/src/form-fields/text-area-fields/text-area-fields.component.html

@@ -0,0 +1,68 @@
+<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>
+  <textarea
+    #textarea
+    class="form-control mb-2"
+    [ngClass]="{ 'no-scroll': numberOfRows }"
+    [rows]="numberOfRows"
+    wrap="hard"
+    (input)="validateInput($event)"
+    (blur)="validateTextarea()"
+    [(ngModel)]="enteredText"
+    [class.invalid]="validationFailed"
+    [class.invalid-question]="isInvalid && (!inLine || !enteredText)"
+    [maxlength]="characterCount"
+    [disabled]="disableEdit"
+  ></textarea>
+  <div *ngIf="isInvalid && (!inLine || !enteredText)" class="error-message">
+    {{ errorMessage }}
+  </div>
+  <div *ngIf="validationFailed && !isInvalid" class="text-danger error-message">
+    {{ validationMessage }}
+  </div>
+</div>

package/src/form-fields/text-area-fields/text-area-fields.component.scss

@@ -0,0 +1,19 @@
+@import '../../styles/shared-style.scss';
+
+.no-scroll {
+    overflow: hidden !important;
+    resize: none; /* Prevents manual resizing */
+    line-height: 1.5; /* Ensuring consistent line spacing */
+    padding: 5px 10px; /* Adjust as needed */
+  }
+
+  .invalid-question {
+    border: 2px solid #f44336; /* Material red */
+    border-radius: 4px;
+    padding: 8px;
+    margin-bottom: 4px;
+  }
+  
+  
+
+

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

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

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

@@ -0,0 +1,166 @@
+import { Component, Input, ElementRef, ViewChild, AfterViewInit, Output, EventEmitter } from '@angular/core';
+import { ValidationService } from '../../services/validation.service';
+import { ElementTrackerService } from '../../services/element-tracker.service';
+import { WhenClauseService } from '../../services/whenClause.service';
+
+@Component({
+  selector: 'lib-text-area-fields',
+  templateUrl: './text-area-fields.component.html',
+  styleUrls: ['./text-area-fields.component.scss'],
+})
+export class TextAreaFieldsComponent implements AfterViewInit {
+  @Input() question: any = {};
+  @Input() inLine: boolean = false;
+  @Input() inCard: boolean = false;
+  @Input() submissionIndex!: number;
+  @ViewChild('textarea') textarea!: ElementRef<HTMLTextAreaElement>;
+  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
+
+  answer: string = '';
+  count: number = 0;
+  required: boolean = false;
+  hint: string = '';
+  numberOfRows!: number;
+  limitedCharacters!: boolean;
+  characterCount!: number;
+  validationFailed: boolean = false;
+  validationMessage: string = '';
+  enteredText: string = '';
+  maxHeight!: number;
+  lineHeight!: number;
+  defaultValue: string = '';
+  @Input() disableEdit: boolean = false;
+  private subscribedToWhenClause = false;
+
+  ngOnInit() {
+    this.valueAssigned();
+  }
+  private elementId: string='';
+
+ constructor(
+      private validationService: ValidationService,
+      private tracker: ElementTrackerService,
+      private whenClauseService:WhenClauseService
+    )  { }
+
+  ngAfterViewInit() {
+    if (this.textarea?.nativeElement) {
+      this.calculateMaxHeight();
+    }
+
+    this.elementId = `question-${this.question.id}`;
+    this.tracker.registerElement(this.elementId);
+  }
+
+  valueAssigned() {
+    this.count = this.question.count;
+    this.required = this.question.required;
+    this.hint = this.question.hint;
+    this.numberOfRows = this.question.formElement.appearance.numberOfRows;
+    this.limitedCharacters = this.question.formElement.validation.limitedCharacters;
+    this.defaultValue = this.question?.defaultValue;
+    this.disableEdit = this.disableEdit ?? this.question?.disableEdit ?? false;
+    this.enteredText = this.defaultValue;
+    if (this.limitedCharacters) {
+      this.characterCount = this.question.formElement.validation.count;
+    }
+    if(this.question.answer){
+      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;
+    } else{
+      setTimeout(() => {
+        this.whenClauseService.setQuestionAnswer(this.question.id,'',true);
+      });
+    }
+  }
+
+  calculateMaxHeight() {
+    const textareaEl = this.textarea.nativeElement;
+    const computedStyles = window.getComputedStyle(textareaEl);
+
+    // Get accurate line height
+    this.lineHeight = parseFloat(computedStyles.lineHeight); // Default fallback to 20px
+
+    // Consider padding and borders
+    const paddingTop = parseFloat(computedStyles.paddingTop) || 0;
+    const paddingBottom = parseFloat(computedStyles.paddingBottom) || 0;
+    const borderTop = parseFloat(computedStyles.borderTopWidth) || 0;
+    const borderBottom = parseFloat(computedStyles.borderBottomWidth) || 0;
+
+    // Correct height calculation
+    this.maxHeight = (this.lineHeight * this.numberOfRows) + paddingTop + paddingBottom + borderTop + borderBottom;
+
+    textareaEl.style.height = `${this.maxHeight}px`; // Set exact height
+  }
+
+  validateInput(event: Event) {
+    const textarea = event.target as HTMLTextAreaElement;
+
+    // Restrict overflow beyond max height
+    while (textarea.scrollHeight > this.maxHeight) {
+      textarea.value = textarea.value.slice(0, -1);
+    }
+
+    this.question.answer = textarea.value;
+    this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0});
+    setTimeout(() => {
+      this.whenClauseService.setQuestionAnswer(this.question.id,this.question.answer,true);
+    });
+    this.validateTextarea();
+  }
+
+  validateTextarea() {
+    this.validationFailed = false;
+    this.validationService.clearInvalid(this.buildElementId());
+    this.validationMessage = '';
+
+    if (!this.enteredText && this.required && 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.validateTextarea();
+    });
+  }
+    } else {
+      this.question.validation = 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());
+  }
+
+
+  ngOnDestroy() {
+    if (this.elementId) {
+      this.tracker.unregisterElement(this.elementId);
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+<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="text"
+    class="form-control mb-2 height"
+    [placeholder]="placeholder"
+    [(ngModel)]="enteredText"
+    (blur)="validatetextField()"
+    (input)="validateInput($event)"
+    [class.invalid]="validationFailed"
+    [class.invalid-question]="isInvalid && (!inLine || !enteredText)"
+    [id]="question.id"
+    [disabled]="disableEdit"
+  />
+  <div *ngIf="isInvalid && (!inLine || !enteredText)" class="error-message">
+    {{ errorMessage }}
+  </div>
+  <div *ngIf="validationFailed && !isInvalid" class="text-danger error-message">
+    {{ validationMessage }}
+  </div>
+</div>

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

@@ -0,0 +1,26 @@
+@import '../../styles/shared-style.scss';
+
+
+
+
+.form-control:not(:placeholder-shown).bold {
+  font-weight: bold;
+}
+
+.form-control:not(:placeholder-shown).underline {
+  text-decoration: underline;
+}
+
+.form-control:not(:placeholder-shown).italics {
+  font-style: italic;
+}
+
+.invalid-question {
+  border: 2px solid #f44336; /* Material red */
+  border-radius: 4px;
+  padding: 8px;
+  margin-bottom: 4px;
+}
+
+
+

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

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