@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/services/validation.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ValidationService {
+  private invalidQuestions: {[key: string]: {message: string, pageIndex: number}} = {};
+
+  setInvalid(questionId: string, message: string, pageIndex: number) {
+    this.invalidQuestions[questionId] = {message, pageIndex};
+  }
+
+  clearInvalid(questionId: string) {
+    delete this.invalidQuestions[questionId];
+  }
+
+  getFirstInvalid(): {id: string, pageIndex: number} | null {
+    const keys = Object.keys(this.invalidQuestions);
+    return keys.length > 0 ? {
+      id: keys[0],
+      pageIndex: this.invalidQuestions[keys[0]].pageIndex
+    } : null;
+  }
+
+  getErrorMessage(questionId: string): string | null {
+    return this.invalidQuestions[questionId]?.message || null;
+  }
+
+  clearAll() {
+    this.invalidQuestions = {};
+  }
+}

package/src/services/whenClause.service.ts

@@ -0,0 +1,502 @@
+import { Injectable } from '@angular/core';
+import { Submission } from '../models/submission.model';
+import { Subject } from 'rxjs/internal/Subject';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class WhenClauseService {
+  private activeWhenClauseGrids: any[] = [];
+  private questionAnswerMap: { [questionId: string]: any } = {};
+private questionChange$ = new Subject<{ questionId: string }>();
+
+
+
+  isInitialLoad: boolean = true;
+  constructor() {}
+
+  markLoadCompleted() {
+    this.isInitialLoad = false;
+  }
+
+  onQuestionChange() {
+  return this.questionChange$.asObservable();
+}
+
+
+  /**
+   * Check if a grid has an active when clause
+   */
+  isActiveWhenClause(grid: any): boolean {
+    const when = grid?.whenClause;
+    return !!(
+      when &&
+      when.activate &&
+      Array.isArray(when.whenClauseCondition) &&
+      when.whenClauseCondition.length > 0
+    );
+  }
+
+  /**
+   * Add a grid to tracking list if it has an active when clause
+   */
+  addGrid(grid: any): void {
+    if (!grid) return;
+
+    if (this.isActiveWhenClause(grid)) {
+      const exists = this.activeWhenClauseGrids.some(
+        (g) => g.element?.id === grid.element?.id
+      );
+
+      if (!exists) {
+        this.activeWhenClauseGrids.push(grid);
+      }
+    }
+  }
+
+  setQuestionAnswer(questionId: string, answer: any,initial:boolean = false): void {
+    if (!questionId) return;
+    this.questionAnswerMap[questionId] = answer;
+    this.evaluateAllWhenClauses(initial);
+      this.questionChange$.next({ questionId });
+  }
+
+  getAnswer(questionId: string): any {
+    return this.questionAnswerMap[questionId];
+  }
+
+  private evaluateAllWhenClauses(initial:boolean): void {
+    const visibleGrids: any[] = [];
+
+    for (const grid of this.activeWhenClauseGrids) {
+      const when = grid.whenClause;
+      const conditions = when.whenClauseCondition;
+
+      if (!conditions || !conditions.length) continue;
+
+      let overallResult = true;
+
+      for (let i = 0; i < conditions.length; i++) {
+        const clause = conditions[i];
+        const logic = (clause.logic || (i === 0 ? 'AND' : 'AND')).toUpperCase(); // Default to AND for first
+        const answer = this.getAnswer(clause.questionid);
+        const result = this.evaluateCondition(
+          answer,
+          clause.condition,
+          clause.value
+        );
+
+        // Combine results based on logic (AND / OR)
+        if (i === 0) {
+          overallResult = result; // initialize with first condition
+        } else {
+          if (logic === 'AND') {
+            overallResult = overallResult && result;
+          } else if (logic === 'OR') {
+            overallResult = overallResult || result;
+          }
+        }
+      }
+      // safe read actions (could be undefined)
+    const actions: string[] = Array.isArray(when?.whenClauseActions)
+    ? when.whenClauseActions.map(String)
+    : [];
+
+  // choose the decisive action (use last if multiple)
+  const action = actions.length > 0 ? actions[actions.length - 1] : undefined;
+
+  if (overallResult) {
+    // Condition(s) satisfied -> perform the action
+    switch (action) {
+      case 'SHOW':
+        grid.show = true;
+        break;
+      case 'HIDE':
+        grid.show = false;
+        break;
+      case 'MARK_AS_REQUIRED':
+        if (grid.element) grid.element.required = true;
+        break;
+      case 'MARK_AS_OPTIONAL':
+        if (grid.element) grid.element.required = false;
+        break;
+      default:
+        // no show/hide action — keep current behavior (you can choose default here)
+        // For safety, if no explicit action, we'll leave grid.show unchanged.
+        break;
+    }
+
+    // if visible, collect
+    if (grid.show) visibleGrids.push(grid);
+  } else {
+    // Condition(s) not satisfied -> revert the action's effect
+    switch (action) {
+      case 'SHOW':
+        // condition no longer true => hide (revert)
+        grid.show = false;
+        break;
+      case 'HIDE':
+        // condition no longer true => show (revert)
+        grid.show = true;
+        break;
+      case 'MARK_AS_REQUIRED':
+        if (grid.element) grid.element.required = false;
+        break;
+      case 'MARK_AS_OPTIONAL':
+        if (grid.element) grid.element.required = true;
+        break;
+      default:
+        // nothing to revert
+        break;
+    }
+    // if we hid it because overallResult false and it's not initial, clear answer
+    if (!overallResult && !initial && !grid.show) {
+      grid.element.answer = null;
+    }
+  }
+      if (overallResult) visibleGrids.push(grid);
+    }
+  }
+
+  evaluateCondition(answer: any, operator: string, value: any): boolean {
+
+    // treat null/undefined/empty-string/empty-array as "no answer"
+    if (answer === null || answer === undefined) return false;
+    // if (typeof answer === 'string' && answer === '') return false;
+    if (Array.isArray(answer) && answer.length === 0) return false;
+
+    // helpers to normalize values to arrays of lower-case strings (for string ops)
+    const toStr = (v: any) =>
+      v === null || v === undefined ? '' : String(v).toLowerCase();
+
+    const ensureArray = (v: any): string[] => {
+      if (Array.isArray(v)) return v.map((x) => toStr(x));
+      // if comma-separated string => split, else single element array
+      if (typeof v === 'string' && v.indexOf(',') !== -1) {
+        return v
+          .split(',')
+          .map((x) => x.trim())
+          .map((x) => toStr(x));
+      }
+      return [toStr(v)];
+    };
+
+    const ansArr = ensureArray(answer);
+    const valArr = ensureArray(value);
+
+    // numeric comparisons: only when both sides are scalars (non-array) and numeric
+    const isNumericScalar = (x: any) =>
+      !Array.isArray(x) && x !== null && x !== undefined && !Number.isNaN(Number(x));
+
+    switch (operator) {
+      case '<':
+        if (isNumericScalar(answer) && isNumericScalar(value))
+          return Number(answer) < Number(value);
+        return false;
+      case '>':
+        if (isNumericScalar(answer) && isNumericScalar(value))
+          return Number(answer) > Number(value);
+        return false;
+      case '<=':
+        if (isNumericScalar(answer) && isNumericScalar(value))
+          return Number(answer) <= Number(value);
+        return false;
+      case '>=':
+        if (isNumericScalar(answer) && isNumericScalar(value))
+          return Number(answer) >= Number(value);
+        return false;
+
+      // equality: true if any answer element equals any value element
+      case '=':
+        return ansArr.some((a) => valArr.some((v) => a === v));
+
+      case '!=':
+        return !ansArr.some((a) => valArr.some((v) => a === v));
+
+      // LIKE / NOT LIKE: check substring match anywhere in any answer element
+      case 'LIKE':
+        return ansArr.some((a) => valArr.some((v) => a.includes(v)));
+      case 'NOT LIKE':
+        return !ansArr.some((a) => valArr.some((v) => a.includes(v)));
+
+      case 'BEGIN WITH':
+        return ansArr.some((a) => valArr.some((v) => a.startsWith(v)));
+      case 'END WITH':
+        return ansArr.some((a) => valArr.some((v) => a.endsWith(v)));
+
+      // IN / NOT IN: true if any answer element exists in value list
+      case 'IN':
+        return ansArr.some((a) => valArr.includes(a));
+      case 'NOT IN':
+        return !ansArr.some((a) => valArr.includes(a));
+
+      default:
+        return false;
+    }
+  }
+
+  addGridsFromSubform(subform: any): void {
+    if (!subform || !Array.isArray(subform.rows)) return;
+
+    for (const row of subform.rows) {
+      if (!row.grid || !Array.isArray(row.grid)) continue;
+
+      for (const grid of row.grid) {
+        // 1️⃣ Add this grid itself if it has an active whenClause
+        this.addGrid(grid);
+
+        // 2️⃣ Then, recursively process nested childLogics inside its element
+        if (grid.element?.childLogics?.length) {
+          this.processChildLogics(grid.element.childLogics);
+        }
+      }
+    }
+  }
+
+  /**
+   * Recursively process childLogics structure
+   */
+  private processChildLogics(childLogics: any[]): void {
+    if (!Array.isArray(childLogics)) return;
+
+    for (const logic of childLogics) {
+      // 1️⃣ Each logic may have its own rows (similar to subform rows)
+      if (Array.isArray(logic.rows)) {
+        for (const row of logic.rows) {
+          if (Array.isArray(row.grid)) {
+            for (const grid of row.grid) {
+              // Check whenClause for this nested grid
+              this.addGrid(grid);
+
+              // 2️⃣ Recurse again if this nested question also has its own childLogics
+              if (grid.element?.childLogics?.length) {
+                this.processChildLogics(grid.element.childLogics);
+              }
+            }
+          }
+        }
+      }
+
+      // 3️⃣ A logic itself might directly contain nested logics
+      if (Array.isArray(logic.childLogics)) {
+        this.processChildLogics(logic.childLogics);
+      }
+    }
+  }
+
+  /**
+   * Return ALL elements with an active whenClause inside a subform,
+   * including nested childLogics (recursive)
+   */
+  getWhenClauseElements(subform: any): any[] {
+    const result: any[] = [];
+
+    if (!subform || !Array.isArray(subform.rows)) {
+      return result;
+    }
+
+    for (const row of subform.rows) {
+      if (!Array.isArray(row.grid)) continue;
+
+      for (const grid of row.grid) {
+        // 1️⃣ Add this grid if it has an active whenClause
+        if (this.isActiveWhenClause(grid)) {
+          result.push(grid);
+        }
+
+        // 2️⃣ Process nested childLogics inside this element
+        if (Array.isArray(grid.element?.childLogics)) {
+          result.push(
+            ...this.getElementsFromChildLogics(grid.element.childLogics)
+          );
+        }
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Recursively gather grids with active whenClause inside childLogics
+   */
+  private getElementsFromChildLogics(childLogics: any[]): any[] {
+    const found: any[] = [];
+
+    if (!Array.isArray(childLogics)) return found;
+
+    for (const logic of childLogics) {
+      // Each logic can have rows
+      if (Array.isArray(logic.rows)) {
+        for (const row of logic.rows) {
+          if (!Array.isArray(row.grid)) continue;
+
+          for (const grid of row.grid) {
+            if (this.isActiveWhenClause(grid)) {
+              found.push(grid);
+            }
+
+            // Recurse deeper if this grid has nested childLogics
+            if (Array.isArray(grid.element?.childLogics)) {
+              found.push(
+                ...this.getElementsFromChildLogics(grid.element.childLogics)
+              );
+            }
+          }
+        }
+      }
+
+      // Logic itself may have nested childLogics
+      if (Array.isArray(logic.childLogics)) {
+        found.push(...this.getElementsFromChildLogics(logic.childLogics));
+      }
+    }
+
+    return found;
+  }
+
+  checkElementVisibility(id: string, submission: Submission): boolean {
+    if (!id || !submission || !Array.isArray(submission.answers)) {
+      return true; // default visible if invalid input
+    }
+
+    const matchedAnswer = submission.answers.find(
+      (ans) => ans.questionId === id
+    );
+
+    // Return the 'show' flag if found, else default to true
+    return matchedAnswer ? matchedAnswer.show ?? true : true;
+  }
+
+  evaluateSubformWhenClauses(
+    changedAnswer: any,
+    submission: Submission,
+    changedQuestionId: string,
+    elementsWithWhenClause: any
+  ) {
+    if (!elementsWithWhenClause.length) return;
+
+    for (const grid of elementsWithWhenClause) {
+      const elementId = grid.element.id;
+      const when = grid.whenClause;
+      const conditions = when.whenClauseCondition;
+
+      if (!conditions?.length) continue;
+
+      let overallResult = true;
+
+      for (let i = 0; i < conditions.length; i++) {
+        const clause = conditions[i];
+
+        const logic = (clause.logic || (i === 0 ? 'AND' : 'AND')).toUpperCase();
+
+        // Determine which answer to use for this condition
+        let answerToCheck: any;
+
+        if (clause.questionid === changedQuestionId) {
+          // Use updated answer for the changed question
+          answerToCheck = changedAnswer;
+        } else {
+          // Fetch existing value from submission for other questions
+          const existing = submission.answers.find(
+            (a) => a.questionId === clause.questionid
+          );
+          answerToCheck = existing?.answer;
+        }
+
+        const result = this.evaluateCondition(
+          answerToCheck,
+          clause.condition,
+          clause.value
+        );
+
+        // Apply AND/OR logic
+        if (i === 0) {
+          overallResult = result;
+        } else {
+          overallResult =
+            logic === 'AND' ? overallResult && result : overallResult || result;
+        }
+      }
+
+      // Update show flag for the element controlled by this whenClause
+      const matchedAnswer = submission.answers.find(
+        (ans) => ans.questionId === elementId
+      );
+
+      const actions: string[] = Array.isArray(when?.whenClauseActions)
+    ? when.whenClauseActions.map(String)
+    : [];
+
+      // choose the decisive action (use last if multiple)
+      const action = actions.length > 0 ? actions[actions.length - 1] : undefined;
+
+
+      if (matchedAnswer) {
+        if (overallResult) {
+          // Condition(s) satisfied -> perform the action
+          switch (action) {
+            case 'SHOW':
+              matchedAnswer.show = true;
+              break;
+            case 'HIDE':
+              matchedAnswer.show = false;
+              break;
+            case 'MARK_AS_REQUIRED':
+              matchedAnswer.required = true;
+              break;
+            case 'MARK_AS_OPTIONAL':
+              matchedAnswer.required = false;
+              break;
+            default:
+              // no show/hide action — keep current behavior (you can choose default here)
+              // For safety, if no explicit action, we'll leave grid.show unchanged.
+              break;
+          }
+
+        } else {
+          // Condition(s) not satisfied -> revert the action's effect
+          switch (action) {
+            case 'SHOW':
+              // condition no longer true => hide (revert)
+              matchedAnswer.show = false;
+              break;
+            case 'HIDE':
+              // condition no longer true => show (revert)
+              matchedAnswer.show = true;
+              break;
+            case 'MARK_AS_REQUIRED':
+              matchedAnswer.required = false;
+              break;
+            case 'MARK_AS_OPTIONAL':
+              matchedAnswer.required = true;
+              break;
+            default:
+              // nothing to revert
+              break;
+          }
+        }
+      }
+
+
+
+
+      // if (matchedAnswer) {
+      //   matchedAnswer.show = overallResult;
+      // }
+    }
+  }
+
+  resetService(): void {
+    // Clear tracked grids
+    this.activeWhenClauseGrids = [];
+
+    // Clear stored question → answer map
+    this.questionAnswerMap = {};
+
+    // Reset visibility logic to initial state
+  }
+
+  getActiveWhenClauseGrids(): any[] {
+    return this.activeWhenClauseGrids;
+  }
+}

package/src/shared/shared.module.ts

@@ -0,0 +1,58 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RecursiveLogicComponent } from '../question/recursive-logic/recursive-logic.component';
+import { QuestionComponent } from '../question/question/question.component';
+import { SubFormComponent } from '../question/sub-form/sub-form.component';
+import { FormElementsComponent } from '../question/form-elements/form-elements.component';
+
+import { FormFieldsModule } from '../form-fields/form-fields.module';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatTableModule } from '@angular/material/table';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
+import { MultipleSubformComponent } from '../question/multiple-subform/multiple-subform.component';
+import { SubmissionModalComponent } from '../sub-form/submission-modal/submission-modal.component';
+import { QuestionGroupComponent } from '../question/question-group/question-group.component';
+import { InlineMultipleSubformComponent } from '../question/inline-multiple-subform/inline-multiple-subform.component';
+import { MultifieldsComponent } from '../question/multifields/multifields.component';
+import { CardSubformComponent } from '../question/card-subform/card-subform.component';
+import { QuillModule } from 'ngx-quill';
+import { FormsModule } from '@angular/forms';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+@NgModule({
+  declarations: [
+    RecursiveLogicComponent,
+    QuestionComponent,
+    SubFormComponent,
+    FormElementsComponent,
+    MultipleSubformComponent, 
+    SubmissionModalComponent, 
+    QuestionGroupComponent,
+    InlineMultipleSubformComponent,
+    MultifieldsComponent,
+    CardSubformComponent
+  ],
+  imports: [
+    CommonModule,
+    FormFieldsModule,
+    MatDialogModule,
+    MatTableModule,
+    MatMenuModule,
+    MatIconModule,
+    QuillModule,
+    FormsModule,
+    NgbModule
+  ],
+  exports: [
+    RecursiveLogicComponent,
+    QuestionComponent,
+    SubFormComponent,
+    FormElementsComponent,
+    QuestionGroupComponent,
+    InlineMultipleSubformComponent,
+    MultifieldsComponent,
+    CardSubformComponent
+  ]
+})
+export class SharedModule { }

package/src/styles/shared-style.scss

@@ -0,0 +1,86 @@
+.input-wrapper {
+    display: flex;
+    align-items: flex-start;
+  }
+  
+  .svg-wrapper {
+    margin-inline-start: auto;
+    z-index: 999;
+  }
+  
+  .hintIcon {
+    position: relative;
+    cursor: pointer;
+  }
+  
+  .hintIcon:hover::before {
+    content: attr(data-title);
+    position: absolute;
+    top: calc(100% + 2px); 
+    right: 0;
+    // transform: translateX(-50%);
+    padding: 4px 8px;
+    border-radius: 4px;
+    background-color: #1D252D;
+    color: #8E9AA0;
+    font-size: 14px;
+    min-width: 300px; 
+    word-wrap: break-word; 
+    word-break: break-word;
+    text-align: center; 
+    white-space: normal;
+  }
+  
+  .hintIcon:hover::after {
+    content: "";
+    position: absolute;
+    top: calc(100% - 26px); 
+    left: 50%;
+    border: solid transparent;
+    border-width: 18px; 
+    border-bottom-color: #1D252D;
+    transform: translateX(-50%);
+  }
+
+  .height {
+    height: 42px;
+  }
+
+  .invalid {
+    border-color: #FF0000;
+  }
+
+  .hintSvg{
+    width:30px;
+    height:30px;
+    fill: none;
+  }
+
+::ng-deep html lib-formSubmission {
+  font-family: var(--library-font-family) !important;
+  font-size: var(--library-font-size) !important;
+}
+
+::ng-deep .timepicker-overlay {
+  z-index: 1000 !important; 
+}
+
+::ng-deep .timepicker-backdrop-overlay {
+  z-index: 1000 !important; 
+}
+
+.space{
+  width: 5px;
+}
+
+.error-message {
+  color: #f44336;
+  font-size: 0.8em;
+  margin-top: 4px;
+  padding: 0 8px;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-5px); }
+  to { opacity: 1; transform: translateY(0); }
+}

package/src/sub-form/sub-form.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SubFormComponent } from '../question/sub-form/sub-form.component';
+import { FormFieldsModule } from '../form-fields/form-fields.module';
+import { MultipleSubformComponent } from '../question/multiple-subform/multiple-subform.component';
+import { SubmissionModalComponent } from './submission-modal/submission-modal.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatTableModule } from '@angular/material/table';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatIconModule} from '@angular/material/icon';
+
+@NgModule({
+  declarations: [SubFormComponent, MultipleSubformComponent, SubmissionModalComponent],
+  imports: [
+    CommonModule,
+    FormFieldsModule,
+    MatDialogModule,
+    MatTableModule,
+    MatMenuModule,
+    MatIconModule
+  ],
+  exports:[SubFormComponent]
+})
+export class SubFormModule { }