@piserve-tech/form-submission 1.3.315 → 1.3.316

package/README.md

@@ -1,24 +1,24 @@
-# FormSubmission
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project formSubmission` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project formSubmission`.
-> Note: Don't forget to add `--project formSubmission` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build formSubmission` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build formSubmission`, go to the dist folder `cd dist/form-submission` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test formSubmission` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# FormSubmission
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project formSubmission` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project formSubmission`.
+> Note: Don't forget to add `--project formSubmission` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build formSubmission` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build formSubmission`, go to the dist folder `cd dist/form-submission` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test formSubmission` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/ng-package.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/form-submission",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    {
+      "glob": "**/*",
+      "input": "src/assets",
+      "output": "assets/"
+    }
+  ],
+  "allowedNonPeerDependencies": [
+      "@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",
+      "ngx-infinite-scroll",
+      "ngx-material-timepicker",
+      "uuid"
+  ]
+}

package/package.json

@@ -1,46 +1,33 @@
-{
-  "name": "@piserve-tech/form-submission",
-  "version": "1.3.315",
-  "peerDependencies": {
-    "@angular/common": "^16.1.0",
-    "@angular/core": "^16.1.0",
-    "ngx-infinite-scroll": "^16.0.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0",
-    "@angular/google-maps": "^16.2.14",
-    "@angular/material": "^16.2.14",
-    "@fortawesome/fontawesome-free": "^6.5.1",
-    "@piserve-tech/drop-down": "1.2.109",
-    "@piserve-tech/file-preview": "1.0.0",
-    "@piserve-tech/file-upload": "1.1.57",
-    "@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",
-    "ngx-infinite-scroll": "^16.0.0",
-    "ngx-material-timepicker": "^13.1.1",
-    "uuid": "^11.1.0"
-  },
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "https://penta.internal.piserve.com/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.316",
+  "peerDependencies": {
+    "@angular/common": "^16.1.0",
+    "@angular/core": "^16.1.0",
+    "ngx-infinite-scroll": "^16.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "@angular/google-maps": "^16.2.14",
+    "@angular/material": "^16.2.14",
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "@piserve-tech/drop-down": "1.2.109",
+    "@piserve-tech/file-preview": "1.0.0",
+    "@piserve-tech/file-upload": "1.1.57",
+    "@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",
+    "ngx-infinite-scroll": "^16.0.0",
+    "ngx-material-timepicker": "^13.1.1",
+    "uuid": "^11.1.0"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://penta.internal.piserve.com/form-builder/form-submission-component"
+  }
+}

package/{assets → src/assets}/icons/close-sidebar-mark-icon.svg

@@ -1,4 +1,4 @@
-<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M14 14L28 28" stroke="#1D252D" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M28 14L14 28" stroke="#1D252D" stroke-linecap="round" stroke-linejoin="round" />
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14 14L28 28" stroke="#1D252D" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M28 14L14 28" stroke="#1D252D" stroke-linecap="round" stroke-linejoin="round" />
   </svg>

package/{assets → src/assets}/icons/copy-icon.svg

@@ -1,6 +1,6 @@
-<svg width="38" height="36" viewBox="0 0 38 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect x="0.5" y="0.5" width="37" height="35" rx="5.5" fill="white" stroke="#D8D8D8"/>
-    <rect x="13.998" y="13.9922" width="14.0058" height="14.0058" rx="2" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M13.9982 23.998H11.9974C10.8924 23.998 9.99658 23.1022 9.99658 21.9972V11.993C9.99658 10.888 10.8924 9.99219 11.9974 9.99219H22.0016C23.1066 9.99219 24.0024 10.888 24.0024 11.993V13.9939" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="38" height="36" viewBox="0 0 38 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="0.5" width="37" height="35" rx="5.5" fill="white" stroke="#D8D8D8"/>
+    <rect x="13.998" y="13.9922" width="14.0058" height="14.0058" rx="2" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M13.9982 23.998H11.9974C10.8924 23.998 9.99658 23.1022 9.99658 21.9972V11.993C9.99658 10.888 10.8924 9.99219 11.9974 9.99219H22.0016C23.1066 9.99219 24.0024 10.888 24.0024 11.993V13.9939" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
     

package/{assets → src/assets}/icons/delete-icon.svg

@@ -1,8 +1,8 @@
-<svg viewBox="0 0 38 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="35px" height="35px" stroke="#D8D8D8" fill="white" x="0.5" y="0.5" rx="5.5"/>
-    <path d="M11.4165 12.2142H26.5832" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
-    <path stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round" d="M25.5 12.2139V23.597C25.5 24.7404 24.5304 25.6666 23.3333 25.6666H14.6667C13.4696 25.6666 12.5 24.7404 12.5 23.597V12.2139"/>
-    <path stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round" d="M22.25 8.85091H15.75"/>
-    <path stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round" d="M16.8332 16.3535V21.5276"/>
-    <path stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round" d="M21.1667 16.3535V21.5276"/>
+<svg viewBox="0 0 38 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="35px" height="35px" stroke="#D8D8D8" fill="white" x="0.5" y="0.5" rx="5.5"/>
+    <path d="M11.4165 12.2142H26.5832" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
+    <path stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round" d="M25.5 12.2139V23.597C25.5 24.7404 24.5304 25.6666 23.3333 25.6666H14.6667C13.4696 25.6666 12.5 24.7404 12.5 23.597V12.2139"/>
+    <path stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round" d="M22.25 8.85091H15.75"/>
+    <path stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round" d="M16.8332 16.3535V21.5276"/>
+    <path stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round" d="M21.1667 16.3535V21.5276"/>
   </svg>

package/{assets → src/assets}/icons/delete-no-outline-icon.svg

@@ -1,8 +1,8 @@
-            
-<svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8.9585 13.5823H34.0418" stroke="#084FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M32.25 13.5781V32.404C32.25 34.2951 30.6465 35.8269 28.6667 35.8269H14.3333C12.3535 35.8269 10.75 34.2951 10.75 32.404V13.5781" stroke="#084FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M26.875 8.01978H16.125" stroke="#084FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M17.9168 20.4297V28.9869" stroke="#084FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M25.0833 20.4297V28.9869" stroke="#084FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            
+<svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.9585 13.5823H34.0418" stroke="#084FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M32.25 13.5781V32.404C32.25 34.2951 30.6465 35.8269 28.6667 35.8269H14.3333C12.3535 35.8269 10.75 34.2951 10.75 32.404V13.5781" stroke="#084FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M26.875 8.01978H16.125" stroke="#084FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M17.9168 20.4297V28.9869" stroke="#084FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M25.0833 20.4297V28.9869" stroke="#084FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>

package/src/environment/environment.ts

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

package/src/form-fields/aggregate-function/aggregate-function.component.html

@@ -0,0 +1,63 @@
+<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)]="result"
+    readonly
+    [class.invalid-question]="isInvalid && (!inLine || !result)"
+    [id]="question.id"
+  />
+  <div *ngIf="isInvalid && (!inLine || !result)" class="error-message">
+    {{ errorMessage }}
+  </div>
+  <div *ngIf="validationFailed && !isInvalid" class="text-danger error-message">
+    {{ validationMessage }}
+  </div>
+</div>

package/src/form-fields/aggregate-function/aggregate-function.component.scss

@@ -0,0 +1 @@
+@import "../../styles/shared-style.scss";

package/src/form-fields/aggregate-function/aggregate-function.component.spec.ts

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

package/src/form-fields/aggregate-function/aggregate-function.component.ts

@@ -0,0 +1,148 @@
+import { AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ValidationService } from '../../services/validation.service';
+import { ElementTrackerService } from '../../services/element-tracker.service';
+import { AggregationFunctionService } from '../../services/aggregate.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'lib-aggregate-function',
+  templateUrl: './aggregate-function.component.html',
+  styleUrls: ['./aggregate-function.component.scss']
+})
+export class AggregateFunctionComponent {
+  @Input() question: any = {};
+  @Input() inLine: boolean = false;
+  @Input() inCard: boolean = false;
+  @Input() submissionIndex!: number;
+  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
+  @Input() rowId: any ;
+  answer: string = '';
+  count: number = 0;
+  required: boolean = false;
+  hint: string = '';
+  placeholder: string = '';
+  validationFailed: boolean = false;
+  validationMessage: string = '';
+  private elementId: string='';
+  private subscription!: Subscription;
+  result:number=0;
+  @Input() disableEdit: boolean = false;
+    
+   constructor(
+        private validationService: ValidationService,
+        private tracker: ElementTrackerService,
+        private aggregateService:AggregationFunctionService,
+        private cdr: ChangeDetectorRef
+      )  { }
+
+  ngOnInit() {
+    this.valueAssigned();
+    this.aggregateService.setAggregateField(this.rowId,this.question.id,this.question.formElement.aggregateFunction.aggregateOperation,this.question.formElement.aggregateFunction.formula);
+    
+    this.subscription = this.aggregateService.aggregateFieldResults$.subscribe(update => {
+      if (update && update.id === `${this.rowId}:${this.question.id}`) { // include rowId
+        if(update.evaluated){
+          this.result = update.result;
+          this.question.answer = String(this.result);
+          this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0});
+          this.validationService.clearInvalid(this.buildElementId());
+        } else{
+          this.result = 0;
+          this.question.answer = '';
+          this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0});
+        }
+      }
+    });
+  }
+  
+
+  valueAssigned() {
+    this.count = this.question?.count;
+    this.required = this.question?.required;
+    this.hint = this.question?.hint;
+    this.placeholder = this.question.formElement?.appearance?.placeholder || '';
+    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.result = this.question.answer;
+    }
+  }
+ 
+
+  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);
+  }
+
+  ngOnDestroy() {
+    if (this.elementId) {
+      this.tracker.unregisterElement(this.elementId);
+    }
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+}

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

@@ -0,0 +1,81 @@
+<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-3" *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="checkboxField-container"
+    [class.two-column]="displayOptionsInColumn"
+  >
+    <div class="form-check" *ngFor="let option of customOptions">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        [id]="question.id+'-'+rowId+'-'+option.value"
+        [name]="option.value + 'Checkbox'"
+        [value]="option.value"
+        (change)="onCheckboxChange(option, $event)"
+        [disabled]="isOptionDisabled(option)"
+        [checked]="selectedOptions.includes(option)"
+        [attr.data-value]="selectedOptions.includes(option)"
+        [disabled]="disableEdit"
+      />
+      <label
+        class="formCheckLabel me-4 mb-2"
+        [for]="question.id+'-'+rowId+'-'+option.value"
+        >{{ option.label }}</label
+      >
+    </div>
+  </div>
+  <div
+    *ngIf="isInvalid && (!inLine || selectedOptions.length === 0)"
+    class="error-message"
+  >
+    {{ errorMessage }}
+  </div>
+  <div *ngIf="validationFailed && !isInvalid" class="text-danger error-message">
+    {{ validationMessage }}
+  </div>
+</div>

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

@@ -0,0 +1,28 @@
+@import "../../styles/shared-style.scss";
+.form-check-input{
+  cursor: pointer;
+}
+.invalid-question {
+  border: 2px solid #f44336; /* Material red */
+  border-radius: 4px;
+  padding: 8px;
+  margin-bottom: 4px;
+}
+
+
+
+.formCheckLabel{
+  margin-top: 5px;
+  cursor: pointer;
+}
+
+/* default: single‑column flow */
+.checkboxField-container {
+  display: block;
+}
+
+/* two‑column layout when flag is true */
+.checkboxField-container.two-column {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}

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();
+  });
+});