@rangertechnologies/ngnxt 2.1.47 → 2.1.49

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -1508,6 +1508,11 @@ class GetValuePipe {
             if (splitFlds.length === 1) {
                 if (typeof element[flds[i]] === "number") {
                     element = element[flds[i]] || 0;
+                    // VD 23Aug24 handle boolean Type
+                }
+                else if (typeof element[flds[i]] === "boolean") {
+                    console.log('inside boolean1');
+                    element = element[flds[i]];
                 }
                 else {
                     element = element[flds[i]] || "";
@@ -1517,6 +1522,11 @@ class GetValuePipe {
                 let index = Number(splitFlds[1].split(']')[0]);
                 if (typeof element[flds[i]] === "number") {
                     element = element[splitFlds[0]][index] || 0;
+                    // VD 23Aug24 handle boolean Type
+                }
+                else if (typeof element[flds[i]] === "boolean") {
+                    console.log('inside boolean');
+                    element = element[splitFlds[0]][index];
                 }
                 else {
                     element = element[splitFlds[0]][index] || '';
@@ -1658,6 +1668,7 @@ class CustomTableComponent {
         item.value = value;
         this.emitTableDataValue(this.tableData);
     }
+    // VD 23Aug24 handle  Type
     updateLabel(rowIndex, label, value) {
         this.tableData[rowIndex][label] = value;
         this.emitTableDataValue(this.tableData);
@@ -1682,11 +1693,11 @@ class CustomTableComponent {
         this.valueChange.emit(updatedTableData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTableComponent, deps: [{ token: ChangeService }, { token: I18nService }, { token: SalesforceService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTableComponent, selector: "app-custom-table", inputs: { question: "question", apiMeta: "apiMeta" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\n  <thead>\n    <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\n    <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\n    <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + tableSize\">\n      {{ header.label }}\n    </th>\n    <th class=\"col-md-2\" colspan=\"2\">Actions</th>\n  </thead>\n  <tbody *ngIf=\"tableData\">\n    <tr *ngFor=\"let item of tableData; let i = index\">\n      <!-- <td><input type=\"checkbox\" [(ngModel)]=\"item.selected\" (change)=\"selectItem(item)\"></td> -->\n      <td *ngFor=\"let header of tableHeader; let j = index\">\n        <div *ngIf=\"header.fldType === 'imagetext'\" [class]=\"'col-md-' + header.size\" style=\"display: flex;\">\n          <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n          <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n        </div>\n        <div *ngIf=\"header.fldType === 'image'\" [class]=\"'col-md-' + header.size\">\n          <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item[header.fieldName]\" [alt]=\"item.altText\">\n        </div>\n        <div *ngIf=\"header.fldType === 'Text' || header.fldType === 'Text'\">\n          <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n          <input type=\"text\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName, item[header.apiName])\" class=\"she-line-input table-input\">\n        </div>\n        <div *ngIf=\"header.fldType === 'radio'\" [class]=\"'col-md-' + header.size\">\n          <input type=\"radio\" [name]=\"item.name\" [checked]=\"item.value == header.fieldName\"  (click)=\"updateRadio(item, header.fieldName)\">\n        </div>\n      </td>\n      <td class=\"action\">\n        <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"editRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit1\" /><span>Edit</span></a>\n      </td>\n      <td class=\"action\">\n        <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"deleteRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"/><span>Delete</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n<div (click)=\"addRow()\" class=\"addRowClass\"><div class=\"circle-button\">+</div></div>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px;text-align:center}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.addRowClass{float:right;margin-right:15%}.editInput{border-bottom:1px solid red!important}.action,.addRowClass{cursor:pointer}.action :hover{color:red}.circle-button{width:50px;height:50px;border-radius:50%;background-color:#03a9f4;color:#fff;font-size:25px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#03a9f4}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTableComponent, selector: "app-custom-table", inputs: { question: "question", apiMeta: "apiMeta" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\n  <thead>\n    <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\n    <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\n    <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + tableSize\">\n      {{ header.label }}\n    </th>\n    <th class=\"col-md-2\" colspan=\"2\">Actions</th>\n  </thead>\n  <tbody *ngIf=\"tableData\">\n    <tr *ngFor=\"let item of tableData; let i = index\">\n      <!-- <td><input type=\"checkbox\" [(ngModel)]=\"item.selected\" (change)=\"selectItem(item)\"></td> -->\n      <td *ngFor=\"let header of tableHeader; let j = index\">\n        <div *ngIf=\"header.fldType === 'imagetext'\" [class]=\"'col-md-' + header.size\" style=\"display: flex;\">\n          <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n          <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n        </div>\n        <div *ngIf=\"header.fldType === 'image'\" [class]=\"'col-md-' + header.size\">\n          <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item[header.fieldName]\" [alt]=\"item.altText\">\n        </div>\n        <!--VD 23Aug24 handle readOnly  -->\n        <div *ngIf=\"header.fldType === 'Text' || header.fldType === 'Text'\">\n          <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n          <input type=\"text\" [readonly]=\"header.readOnly\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit && !header.readOnly}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" class=\"she-line-input table-input\">\n        </div>\n        <!--VD 23Aug24 handle Number Type -->\n        <div *ngIf=\"header.fldType === 'Number' || header.fldType === 'Number'\">\n          <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n          <input type=\"Number\" [readonly]=\"header.readOnly\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit && !header.readOnly}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" class=\"she-line-input table-input\">\n        </div>\n        <div *ngIf=\"header.fldType === 'radio'\" [class]=\"'col-md-' + header.size\">\n          <input type=\"radio\" [name]=\"item.name\" [checked]=\"item.value == header.fieldName\"  (click)=\"updateRadio(item, header.fieldName)\">\n        </div>\n      </td>\n      <td class=\"action\">\n        <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"editRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit1\" /><span>Edit</span></a>\n      </td>\n      <td class=\"action\">\n        <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"deleteRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"/><span>Delete</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n<div (click)=\"addRow()\" class=\"addRowClass\"><div class=\"circle-button\">+</div></div>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px;text-align:center}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.addRowClass{float:right;margin-right:15%}.editInput{border-bottom:1px solid red!important}.action,.addRowClass{cursor:pointer}.action :hover{color:red}.circle-button{width:50px;height:50px;border-radius:50%;background-color:#03a9f4;color:#fff;font-size:25px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#03a9f4}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-table', template: "<table class=\"table table-striped table-bordered\">\n  <thead>\n    <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\n    <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\n    <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + tableSize\">\n      {{ header.label }}\n    </th>\n    <th class=\"col-md-2\" colspan=\"2\">Actions</th>\n  </thead>\n  <tbody *ngIf=\"tableData\">\n    <tr *ngFor=\"let item of tableData; let i = index\">\n      <!-- <td><input type=\"checkbox\" [(ngModel)]=\"item.selected\" (change)=\"selectItem(item)\"></td> -->\n      <td *ngFor=\"let header of tableHeader; let j = index\">\n        <div *ngIf=\"header.fldType === 'imagetext'\" [class]=\"'col-md-' + header.size\" style=\"display: flex;\">\n          <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n          <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n        </div>\n        <div *ngIf=\"header.fldType === 'image'\" [class]=\"'col-md-' + header.size\">\n          <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item[header.fieldName]\" [alt]=\"item.altText\">\n        </div>\n        <div *ngIf=\"header.fldType === 'Text' || header.fldType === 'Text'\">\n          <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n          <input type=\"text\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName, item[header.apiName])\" class=\"she-line-input table-input\">\n        </div>\n        <div *ngIf=\"header.fldType === 'radio'\" [class]=\"'col-md-' + header.size\">\n          <input type=\"radio\" [name]=\"item.name\" [checked]=\"item.value == header.fieldName\"  (click)=\"updateRadio(item, header.fieldName)\">\n        </div>\n      </td>\n      <td class=\"action\">\n        <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"editRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit1\" /><span>Edit</span></a>\n      </td>\n      <td class=\"action\">\n        <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"deleteRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"/><span>Delete</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n<div (click)=\"addRow()\" class=\"addRowClass\"><div class=\"circle-button\">+</div></div>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px;text-align:center}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.addRowClass{float:right;margin-right:15%}.editInput{border-bottom:1px solid red!important}.action,.addRowClass{cursor:pointer}.action :hover{color:red}.circle-button{width:50px;height:50px;border-radius:50%;background-color:#03a9f4;color:#fff;font-size:25px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#03a9f4}\n"] }]
+            args: [{ selector: 'app-custom-table', template: "<table class=\"table table-striped table-bordered\">\n  <thead>\n    <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\n    <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\n    <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + tableSize\">\n      {{ header.label }}\n    </th>\n    <th class=\"col-md-2\" colspan=\"2\">Actions</th>\n  </thead>\n  <tbody *ngIf=\"tableData\">\n    <tr *ngFor=\"let item of tableData; let i = index\">\n      <!-- <td><input type=\"checkbox\" [(ngModel)]=\"item.selected\" (change)=\"selectItem(item)\"></td> -->\n      <td *ngFor=\"let header of tableHeader; let j = index\">\n        <div *ngIf=\"header.fldType === 'imagetext'\" [class]=\"'col-md-' + header.size\" style=\"display: flex;\">\n          <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n          <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n        </div>\n        <div *ngIf=\"header.fldType === 'image'\" [class]=\"'col-md-' + header.size\">\n          <img style=\"width: 35px; height: 32px; margin-right: 5px;\" [src]=\"item[header.fieldName]\" [alt]=\"item.altText\">\n        </div>\n        <!--VD 23Aug24 handle readOnly  -->\n        <div *ngIf=\"header.fldType === 'Text' || header.fldType === 'Text'\">\n          <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n          <input type=\"text\" [readonly]=\"header.readOnly\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit && !header.readOnly}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" class=\"she-line-input table-input\">\n        </div>\n        <!--VD 23Aug24 handle Number Type -->\n        <div *ngIf=\"header.fldType === 'Number' || header.fldType === 'Number'\">\n          <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n          <input type=\"Number\" [readonly]=\"header.readOnly\" [disabled]=\"!item.edit\" [ngClass]=\"{'editInput': item.edit && !header.readOnly}\" [ngModel]=\"'' | getValue: item : header.apiName\" (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" class=\"she-line-input table-input\">\n        </div>\n        <div *ngIf=\"header.fldType === 'radio'\" [class]=\"'col-md-' + header.size\">\n          <input type=\"radio\" [name]=\"item.name\" [checked]=\"item.value == header.fieldName\"  (click)=\"updateRadio(item, header.fieldName)\">\n        </div>\n      </td>\n      <td class=\"action\">\n        <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"editRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"icon-edit1\" /><span>Edit</span></a>\n      </td>\n      <td class=\"action\">\n        <a style=\"display: flex; justify-content: space-evenly;\" (click)=\"deleteRow(i)\"><img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"/><span>Delete</span></a>\n      </td>\n    </tr>\n  </tbody>\n</table>\n<div (click)=\"addRow()\" class=\"addRowClass\"><div class=\"circle-button\">+</div></div>", styles: [".table{width:100%;max-width:100%;margin-bottom:20px;border-collapse:collapse;border-spacing:0}.table-bordered{border:1px solid #ddd}thead{background-color:#03a9f4}thead th{color:#fff;font-size:14px;text-align:center}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}th{text-align:left}thead .permission{text-align:center}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}tbody{color:#797979}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}.permission_yes,.permission_no,.permission_na{text-align:center}.none-border th{border:none}.addRowClass{float:right;margin-right:15%}.editInput{border-bottom:1px solid red!important}.action,.addRowClass{cursor:pointer}.action :hover{color:red}.circle-button{width:50px;height:50px;border-radius:50%;background-color:#03a9f4;color:#fff;font-size:25px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#03a9f4}\n"] }]
         }], ctorParameters: function () { return [{ type: ChangeService }, { type: I18nService }, { type: SalesforceService }, { type: DataService }]; }, propDecorators: { question: [{
                 type: Input
             }], valueChange: [{
@@ -4243,241 +4254,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-class CustomModelComponent {
-    constructor() { }
-    modalTitle;
-    isModalOpen = false;
-    modalSize = '';
-    saveButtonValue = 'Save';
-    modalFooter = true;
-    saveButtonEmit = new EventEmitter();
-    cancelButtonEmit = new EventEmitter();
-    onSave() {
-        this.saveButtonEmit.emit();
-    }
-    onCancel() {
-        this.cancelButtonEmit.emit();
-    }
-    ngOnInit() {
-    }
-    closeModal() {
-        this.cancelButtonEmit.emit(false);
-    }
-    saveModal() {
-        this.saveButtonEmit.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomModelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomModelComponent, selector: "app-custom-model", inputs: { modalTitle: "modalTitle", isModalOpen: "isModalOpen", modalSize: "modalSize", saveButtonValue: "saveButtonValue", modalFooter: "modalFooter" }, outputs: { saveButtonEmit: "saveButtonEmit", cancelButtonEmit: "cancelButtonEmit" }, ngImport: i0, template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <span class=\"close\" (click)=\"onCancel()\">&times;</span>\n        <h2>{{ modalTitle }}</h2>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n        <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\n        <button (click)=\"onCancel()\">Cancel</button>\n      </div>\n    </div>\n  </div>\n  ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:hidden;background-color:#000;background-color:#0006}.modal-content{background-color:#fefefe;margin:10% auto;padding:20px;border:1px solid #888;width:70%}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomModelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-custom-model', template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <span class=\"close\" (click)=\"onCancel()\">&times;</span>\n        <h2>{{ modalTitle }}</h2>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n        <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\n        <button (click)=\"onCancel()\">Cancel</button>\n      </div>\n    </div>\n  </div>\n  ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:hidden;background-color:#000;background-color:#0006}.modal-content{background-color:#fefefe;margin:10% auto;padding:20px;border:1px solid #888;width:70%}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { modalTitle: [{
-                type: Input
-            }], isModalOpen: [{
-                type: Input
-            }], modalSize: [{
-                type: Input
-            }], saveButtonValue: [{
-                type: Input
-            }], modalFooter: [{
-                type: Input
-            }], saveButtonEmit: [{
-                type: Output
-            }], cancelButtonEmit: [{
-                type: Output
-            }] } });
-
-class CustomCalendarComponent {
-    eventSelected = new EventEmitter();
-    allEvents = [];
-    question;
-    entries = [];
-    referenceQuestions = [];
-    qbRefrenceBook;
-    calendarQuestion = [];
-    currentDate = new Date();
-    calendarDays = [];
-    daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-    newEventTitle = '';
-    newEventTime = '';
-    newDescription = '';
-    newLink = '';
-    selectedDay = null;
-    isModalOpen = false;
-    modalTitle = 'Custom Modal';
-    modalSize = 'large';
-    saveButtonValue = 'Save';
-    modalFooter = true;
-    editingEventId;
-    ngOnInit() {
-        if (this.question?.input) {
-            this.allEvents = this.question.input;
-        }
-        this.processQuestion();
-        this.generateCalendar();
-    }
-    processQuestion() {
-        this.entries = JSON.parse(this.question['Fields_Meta__c']);
-        this.qbRefrenceBook = JSON.parse(this.question['QB_Reference_Questions__c']);
-        let title = this.qbRefrenceBook?.questionbook?.Title__c;
-        this.modalTitle = title;
-        this.referenceQuestions = [];
-        if (this.entries.length > 0) {
-            this.entries.forEach(element => {
-                if (element.questionReference) {
-                    let qReference = JSON.parse(element.questionReference);
-                    this.referenceQuestions.push(qReference?.question);
-                }
-            });
-        }
-        console.log('entries-->');
-        console.log('question-->');
-        console.log(this.entries);
-        console.log(this.referenceQuestions);
-    }
-    generateCalendar() {
-        const year = this.currentDate.getFullYear();
-        const month = this.currentDate.getMonth();
-        const startOfMonth = new Date(year, month, 1);
-        const endOfMonth = new Date(year, month + 1, 0);
-        const startDayOfWeek = startOfMonth.getDay();
-        const endDayOfWeek = endOfMonth.getDay();
-        const startDate = new Date(startOfMonth);
-        startDate.setDate(startDate.getDate() - startDayOfWeek);
-        const endDate = new Date(endOfMonth);
-        endDate.setDate(endDate.getDate() + (6 - endDayOfWeek));
-        const today = new Date(new Date().setHours(0, 0, 0, 0));
-        this.calendarDays = [];
-        for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
-            const date = new Date(d);
-            this.calendarDays.push({
-                date: date,
-                events: [],
-                isCurrentMonth: d.getMonth() === month,
-                isPast: date < today,
-                isToday: date.getTime() === today.getTime(),
-                isFuture: date > today,
-            });
-        }
-        // Populate calendar with events from allEvents array
-        this.calendarDays.forEach(day => {
-            day.events = this.allEvents.filter(event => event.date.toDateString() === day.date.toDateString());
-        });
-        this.eventSelected.emit(this.allEvents);
-    }
-    selectDay(day) {
-        console.log(day);
-        this.selectedDay = day;
-        // this.eventSelected.emit(day?.events);
-        const previouslySelectedDay = this.calendarDays.find(d => d.isSelected);
-        if (previouslySelectedDay) {
-            previouslySelectedDay.isSelected = false;
-        }
-        // Select the clicked day
-        day.isSelected = true;
-    }
-    previousMonth() {
-        this.currentDate.setMonth(this.currentDate.getMonth() - 1);
-        this.currentDate = new Date(this.currentDate); // Ensure the date object is updated
-        this.generateCalendar();
-    }
-    nextMonth() {
-        this.currentDate.setMonth(this.currentDate.getMonth() + 1);
-        this.currentDate = new Date(this.currentDate); // Ensure the date object is updated
-        this.generateCalendar();
-    }
-    addAppointment() {
-        this.isModalOpen = true;
-        this.calendarQuestion = this.referenceQuestions.map(q => ({ ...q, input: '' }));
-        this.referenceQuestions.forEach(ques => {
-            // clear the input
-            if (ques.input) {
-                delete ques.input;
-            }
-        });
-        console.log(' console.log(this.referenceQuestions);');
-        console.log(this.referenceQuestions);
-        this.editingEventId = null;
-    }
-    editEvent(event) {
-        this.isModalOpen = true;
-        // this.calendarQuestion = event.entries.map(q => ({ ...q }));
-        this.referenceQuestions = event.entries.map(q => ({ ...q }));
-        this.editingEventId = event.id;
-        this.generateCalendar();
-    }
-    deleteEvent(day, eventId) {
-        day.events = day.events.filter(event => event.id !== eventId);
-        this.allEvents = this.allEvents.filter(event => event.id !== eventId);
-        this.generateCalendar();
-    }
-    closeModal() {
-        this.isModalOpen = false;
-    }
-    addEvent(day, entryQues) {
-        const newEvent = {
-            id: this.generateId(),
-            date: day.date,
-            entries: entryQues.map(q => ({ ...q }))
-        };
-        day.events.push(newEvent);
-        this.allEvents.push(newEvent);
-        this.generateCalendar();
-        console.log('allEvents');
-        console.log(this.allEvents);
-        this.generateCalendar();
-    }
-    onSave() {
-        if (this.editingEventId !== null) {
-            const event = this.allEvents.find(e => e.id === this.editingEventId);
-            if (event) {
-                event.entries = this.calendarQuestion.map(q => ({ ...q }));
-            }
-        }
-        else {
-            if (this.selectedDay) {
-                this.addEvent(this.selectedDay, this.calendarQuestion);
-            }
-        }
-        this.closeModal();
-        this.generateCalendar();
-    }
-    onCancel() {
-        console.log('Cancel button clicked');
-        this.closeModal();
-    }
-    handleQuestionEvent(ques) {
-        // Update the questions array with the new question
-        const index = this.calendarQuestion.findIndex(q => q.Id === ques.Id);
-        if (index > -1) {
-            // If question already exists, update it
-            this.calendarQuestion[index] = ques;
-        }
-        else {
-            // If question doesn't exist, add it to the array
-            this.calendarQuestion.push(ques);
-        }
-        console.log('calender question');
-        console.log(this.calendarQuestion);
-    }
-    generateId() {
-        return '_' + Math.random().toString(36).substr(2, 9);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: { allEvents: "allEvents", question: "question" }, outputs: { eventSelected: "eventSelected" }, ngImport: i0, template: "<div class=\"align-calendar\">\n    <div class=\"calendar-container\">\n        <div class=\"calendar-header\">\n          <button (click)=\"previousMonth()\"><< Previous >></button>\n          <h3>{{ currentDate | date: 'MMMM yyyy' }}</h3>\n          <button (click)=\"nextMonth()\"><< Next >></button>\n        </div>\n        <div class=\"calendar-grid\">\n          <!-- Days of the Week Header -->\n          <div class=\"day-of-week\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\n      \n          <!-- Calendar Days -->\n          <div\n            class=\"calendar-day\"\n            *ngFor=\"let day of calendarDays\"\n            [class.not-current-month]=\"!day.isCurrentMonth\"\n            [class.past]=\"day.isPast\"\n            [class.today]=\"day.isToday\"\n            [class.future]=\"day.isFuture\"\n            [class.selected]=\"day.isSelected\" \n            (click)=\"selectDay(day)\"\n          >\n            <div class=\"day-number\">{{ day.date.getDate() }}</div>\n            <div *ngFor=\"let event of day.events\" class=\"event\">\n              <div  *ngFor=\"let entry of event?.entries\">\n                <div *ngIf=\"entry.Type__c == 'Time'\">{{ entry.input?.value | date: 'shortTime'  }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n    <div class=\"appoinappointment\">\n        <div class=\"appointments-container\">\n            <h4>Add Appointment</h4>\n            <button *ngIf=\"selectedDay\" (click)=\"addAppointment()\">Add</button>\n          </div>\n          <div class=\"appointments-container\">\n            <h4 *ngIf=\"selectedDay?.events.length > 0\">Appointments</h4>\n            <div class=\"event\" *ngFor=\"let event of selectedDay?.events\">\n                <div class=\"event-info\">\n                  <div>\n                    <div  *ngFor=\"let entry of event?.entries\">\n                      <div *ngIf=\"entry.Type__c != 'Time'\">{{ entry.input }}</div>\n                      <div *ngIf=\"entry.Type__c == 'Time'\">{{ entry.input?.value | date: 'mediumDate'  }}</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"event-actions\">\n                  <button  (click)=\"editEvent(event)\">Edit</button>\n                  <button (click)=\"deleteEvent(selectedDay, event.id)\">Delete</button>\n                </div>\n              </div>          \n          </div>\n    </div>\n</div>\n\n<app-custom-model\n  [modalTitle]=\"modalTitle\"\n  [isModalOpen]=\"isModalOpen\"\n  [modalSize]=\"modalSize\"\n  [saveButtonValue]=\"saveButtonValue\"\n  [modalFooter]=\"modalFooter\"\n  (saveButtonEmit)=\"onSave()\"\n  (cancelButtonEmit)=\"onCancel()\"\n>\n<app-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></app-questionbook>\n</app-custom-model>\n\n\n  \n  \n  ", styles: [".calendar-container{flex:1}.appoinappointment{flex:2;margin-left:10px}.calendar-header{display:flex;justify-content:space-between;align-items:center}.selected{box-shadow:0 0 5px #00000080}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.day-of-week{text-align:center;font-weight:700;padding:5px;background-color:#f0f0f0;border:1px solid #ccc}.calendar-day{border:1px solid #ccc;padding:5px;display:flex;flex-direction:column;align-items:flex-start;background-color:#fff;position:relative;cursor:pointer}.calendar-day.not-current-month{background-color:#f0f0f0}.calendar-day.past{color:#aaa}.calendar-day.today{background-color:#e6ffe6;font-weight:700}.calendar-day.future{color:#000}.day-number{font-size:1.2em;margin-bottom:5px}.event{background-color:#d1e7dd;border-left:4px solid #0f5132;margin:5px 0;padding:2px 5px;border-radius:3px}.event-title{font-weight:700}.event-time{font-size:.8em}input[type=text],input[type=time]{width:100%;margin-top:5px;box-sizing:border-box}button{margin-top:5px;align-self:stretch;margin-left:0!important}.calendar-header button{margin-top:5px;align-self:stretch;margin-left:0!important;border:none;background:none}.align-calendar{display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomCalendarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-custom-calendar', template: "<div class=\"align-calendar\">\n    <div class=\"calendar-container\">\n        <div class=\"calendar-header\">\n          <button (click)=\"previousMonth()\"><< Previous >></button>\n          <h3>{{ currentDate | date: 'MMMM yyyy' }}</h3>\n          <button (click)=\"nextMonth()\"><< Next >></button>\n        </div>\n        <div class=\"calendar-grid\">\n          <!-- Days of the Week Header -->\n          <div class=\"day-of-week\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\n      \n          <!-- Calendar Days -->\n          <div\n            class=\"calendar-day\"\n            *ngFor=\"let day of calendarDays\"\n            [class.not-current-month]=\"!day.isCurrentMonth\"\n            [class.past]=\"day.isPast\"\n            [class.today]=\"day.isToday\"\n            [class.future]=\"day.isFuture\"\n            [class.selected]=\"day.isSelected\" \n            (click)=\"selectDay(day)\"\n          >\n            <div class=\"day-number\">{{ day.date.getDate() }}</div>\n            <div *ngFor=\"let event of day.events\" class=\"event\">\n              <div  *ngFor=\"let entry of event?.entries\">\n                <div *ngIf=\"entry.Type__c == 'Time'\">{{ entry.input?.value | date: 'shortTime'  }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n    <div class=\"appoinappointment\">\n        <div class=\"appointments-container\">\n            <h4>Add Appointment</h4>\n            <button *ngIf=\"selectedDay\" (click)=\"addAppointment()\">Add</button>\n          </div>\n          <div class=\"appointments-container\">\n            <h4 *ngIf=\"selectedDay?.events.length > 0\">Appointments</h4>\n            <div class=\"event\" *ngFor=\"let event of selectedDay?.events\">\n                <div class=\"event-info\">\n                  <div>\n                    <div  *ngFor=\"let entry of event?.entries\">\n                      <div *ngIf=\"entry.Type__c != 'Time'\">{{ entry.input }}</div>\n                      <div *ngIf=\"entry.Type__c == 'Time'\">{{ entry.input?.value | date: 'mediumDate'  }}</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"event-actions\">\n                  <button  (click)=\"editEvent(event)\">Edit</button>\n                  <button (click)=\"deleteEvent(selectedDay, event.id)\">Delete</button>\n                </div>\n              </div>          \n          </div>\n    </div>\n</div>\n\n<app-custom-model\n  [modalTitle]=\"modalTitle\"\n  [isModalOpen]=\"isModalOpen\"\n  [modalSize]=\"modalSize\"\n  [saveButtonValue]=\"saveButtonValue\"\n  [modalFooter]=\"modalFooter\"\n  (saveButtonEmit)=\"onSave()\"\n  (cancelButtonEmit)=\"onCancel()\"\n>\n<app-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></app-questionbook>\n</app-custom-model>\n\n\n  \n  \n  ", styles: [".calendar-container{flex:1}.appoinappointment{flex:2;margin-left:10px}.calendar-header{display:flex;justify-content:space-between;align-items:center}.selected{box-shadow:0 0 5px #00000080}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.day-of-week{text-align:center;font-weight:700;padding:5px;background-color:#f0f0f0;border:1px solid #ccc}.calendar-day{border:1px solid #ccc;padding:5px;display:flex;flex-direction:column;align-items:flex-start;background-color:#fff;position:relative;cursor:pointer}.calendar-day.not-current-month{background-color:#f0f0f0}.calendar-day.past{color:#aaa}.calendar-day.today{background-color:#e6ffe6;font-weight:700}.calendar-day.future{color:#000}.day-number{font-size:1.2em;margin-bottom:5px}.event{background-color:#d1e7dd;border-left:4px solid #0f5132;margin:5px 0;padding:2px 5px;border-radius:3px}.event-title{font-weight:700}.event-time{font-size:.8em}input[type=text],input[type=time]{width:100%;margin-top:5px;box-sizing:border-box}button{margin-top:5px;align-self:stretch;margin-left:0!important}.calendar-header button{margin-top:5px;align-self:stretch;margin-left:0!important;border:none;background:none}.align-calendar{display:flex;width:100%}\n"] }]
-        }], propDecorators: { eventSelected: [{
-                type: Output
-            }], allEvents: [{
-                type: Input
-            }], question: [{
-                type: Input
-            }] } });
-
 class SearchBoxComponent {
     sfService;
     dataService;
@@ -5045,8 +4821,9 @@ class CustomTimeComponent {
             }
         }
     }
+    // VD 06Sep24 emit exact time object
     onTimeChange(event) {
-        this.timeChange.emit(event);
+        this.timeChange.emit(event?.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomTimeComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomTimeComponent, selector: "app-custom-time", inputs: { time: "time", readOnly: "readOnly", error: "error", errorMessage: "errorMessage" }, outputs: { timeChange: "timeChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- time component -->\n<!-- // VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n  <p>\n    <input\n      [class]=\"error ? 'invalid' : ''\"\n      [(ngModel)]=\"timeSelected\"\n      [owlDateTimeTrigger]=\"dt2\"\n      [owlDateTime]=\"dt2\"\n      placeholder=\"HH:MM\"\n      [readOnly]=\"readOnly\" \n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n      (dateTimeChange)=\"onTimeChange($event)\"\n    >\n    <owl-date-time [pickerType]=\"'timer'\" #dt2></owl-date-time>\n  </p>\n  <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { kind: "directive", type: i4$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["startAt", "pickerType", "pickerMode", "disabled", "opened", "backdropClass", "panelClass", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }] });
@@ -5268,6 +5045,8 @@ class QuestionbookComponent {
     bookStyle;
     subscription;
     hadleDropDownDependent = new EventEmitter();
+    // VD 06Sep24 calendar changes
+    handleCalendarDate = new EventEmitter();
     bookQuestionsMap = new Map();
     constructor(sfService, dataService, changeService, storageService, i18nService, document) {
         this.sfService = sfService;
@@ -5328,41 +5107,41 @@ class QuestionbookComponent {
                         qb['questionbook'].Style__c = this.qbItem.Style__c;
                     }
                     // Book type question styling
-                    qb['questionbook'].Style__c.labelClass = qb['questionbook'].Style__c.labelClass ? qb['questionbook'].Style__c.labelClass : "";
-                    qb['questionbook'].Style__c.labelStyle = qb['questionbook'].Style__c.labelStyle ? qb['questionbook'].Style__c.labelStyle : "";
-                    qb['questionbook'].Style__c.labelValueStyle = qb['questionbook'].Style__c.labelValueStyle ? qb['questionbook'].Style__c.labelValueStyle : "";
-                    qb['questionbook'].Style__c.inputClass = qb['questionbook'].Style__c.inputClass ? qb['questionbook'].Style__c.inputClass : "";
-                    qb['questionbook'].Style__c.inputStyle = qb['questionbook'].Style__c.inputStyle ? qb['questionbook'].Style__c.inputStyle : "";
-                    qb['questionbook'].Style__c.bookStyle = qb['questionbook'].Style__c.bookStyle ? qb['questionbook'].Style__c.bookStyle : "";
-                    qb['questionbook'].Style__c.showLabel = qb['questionbook'].Style__c.showLabel ? qb['questionbook'].Style__c.showLabel : true;
-                    qb['questionbook'].Style__c.questionStyle = qb['questionbook'].Style__c.questionStyle ? qb['questionbook'].Style__c.questionStyle : "";
-                    qb['langDirection'] = qb['questionbook'].Style__c.direction ? qb['questionbook'].Style__c.direction : this.langDirection;
+                    qb['questionbook'].Style__c.labelClass = qb['questionbook'].Style__c?.labelClass ? qb['questionbook'].Style__c?.labelClass : "";
+                    qb['questionbook'].Style__c.labelStyle = qb['questionbook'].Style__c?.labelStyle ? qb['questionbook'].Style__c?.labelStyle : "";
+                    qb['questionbook'].Style__c.labelValueStyle = qb['questionbook'].Style__?.labelValueStyle ? qb['questionbook'].Style__c.labelValueStyle : "";
+                    qb['questionbook'].Style__c.inputClass = qb['questionbook'].Style__c?.inputClass ? qb['questionbook'].Style__c?.inputClass : "";
+                    qb['questionbook'].Style__c.inputStyle = qb['questionbook'].Style__c?.inputStyle ? qb['questionbook'].Style__c?.inputStyle : "";
+                    qb['questionbook'].Style__c.bookStyle = qb['questionbook'].Style__c?.bookStyle ? qb['questionbook'].Style__c?.bookStyle : "";
+                    qb['questionbook'].Style__c.showLabel = qb['questionbook'].Style__c?.showLabel ? qb['questionbook'].Style__c?.showLabel : true;
+                    qb['questionbook'].Style__c.questionStyle = qb['questionbook'].Style__c?.questionStyle ? qb['questionbook'].Style__c?.questionStyle : "";
+                    qb['langDirection'] = qb['questionbook'].Style__c.direction ? qb['questionbook'].Style__c?.direction : this.langDirection;
                     // Loop for each question in the book
                     qb['questionbook'].Questions__r.records.forEach(questionFromBook => {
                         questionFromBook.Style__c = questionFromBook.Style__c ? questionFromBook.Style__c : qb['questionbook'].Style__c;
-                        questionFromBook.Style__c.labelClass = questionFromBook.Style__c.labelClass ? questionFromBook.Style__c.labelClass : "";
-                        questionFromBook.Style__c.labelStyle = questionFromBook.Style__c.labelStyle ? questionFromBook.Style__c.labelStyle : "";
-                        questionFromBook.Style__c.labelValueStyle = questionFromBook.Style__c.labelValueStyle ? questionFromBook.Style__c.labelValueStyle : "";
-                        questionFromBook.Style__c.inputClass = questionFromBook.Style__c.inputClass ? questionFromBook.Style__c.inputClass : "";
-                        questionFromBook.Style__c.inputStyle = questionFromBook.Style__c.inputStyle ? questionFromBook.Style__c.inputStyle : "";
-                        questionFromBook.Style__c.bookStyle = questionFromBook.Style__c.bookStyle ? questionFromBook.Style__c.bookStyle : "";
-                        questionFromBook.Style__c.showLabel = questionFromBook.Style__c.showLabel ? questionFromBook.Style__c.showLabel : true;
-                        questionFromBook.Style__c.questionStyle = questionFromBook.Style__c.questionStyle ? questionFromBook.Style__c.questionStyle : "";
-                        questionFromBook['langDirection'] = questionFromBook.Style__c.direction ? questionFromBook.Style__c.direction : this.langDirection;
+                        questionFromBook.Style__c.labelClass = questionFromBook.Style__c?.labelClass ? questionFromBook.Style__c?.labelClass : "";
+                        questionFromBook.Style__c.labelStyle = questionFromBook.Style__c?.labelStyle ? questionFromBook.Style__c?.labelStyle : "";
+                        questionFromBook.Style__c.labelValueStyle = questionFromBook.Style__c?.labelValueStyle ? questionFromBook.Style__c?.labelValueStyle : "";
+                        questionFromBook.Style__c.inputClass = questionFromBook.Style__c?.inputClass ? questionFromBook.Style__c?.inputClass : "";
+                        questionFromBook.Style__c.inputStyle = questionFromBook.Style__c?.inputStyle ? questionFromBook.Style__c?.inputStyle : "";
+                        questionFromBook.Style__c.bookStyle = questionFromBook.Style__c?.bookStyle ? questionFromBook.Style__c?.bookStyle : "";
+                        questionFromBook.Style__c.showLabel = questionFromBook.Style__c?.showLabel ? questionFromBook.Style__c?.showLabel : true;
+                        questionFromBook.Style__c.questionStyle = questionFromBook.Style__c?.questionStyle ? questionFromBook.Style__c?.questionStyle : "";
+                        questionFromBook['langDirection'] = questionFromBook.Style__c?.direction ? questionFromBook.Style__c?.direction : this.langDirection;
                     });
                     element['qbItem'] = qb['questionbook'];
                 }
             }
             element.Style__c = element.Style__c ? typeof element.Style__c === 'string' ? JSON.parse('' + element?.Style__c) : element?.Style__c : this.qbItem?.Style__c;
-            element.Style__c.labelClass = element.Style__c.labelClass ? element.Style__c.labelClass : "";
-            element.Style__c.labelStyle = element.Style__c.labelStyle ? element.Style__c.labelStyle : "";
-            element.Style__c.labelValueStyle = element.Style__c.labelValueStyle ? element.Style__c.labelValueStyle : "";
-            element.Style__c.inputClass = element.Style__c.inputClass ? element.Style__c.inputClass : "";
-            element.Style__c.inputStyle = element.Style__c.inputStyle ? element.Style__c.inputStyle : "";
-            element.Style__c.bookStyle = element.Style__c.bookStyle ? element.Style__c.bookStyle : "";
-            element.Style__c.showLabel = element.Style__c.showLabel ? true : false;
-            element.Style__c.questionStyle = element.Style__c.questionStyle ? element.Style__c.questionStyle : "";
-            element['langDirection'] = element.Style__c.direction ? element.Style__c.direction : this.langDirection;
+            element.Style__c.labelClass = element.Style__c?.labelClass ? element.Style__c?.labelClass : "";
+            element.Style__c.labelStyle = element.Style__c?.labelStyle ? element.Style__c?.labelStyle : "";
+            element.Style__c.labelValueStyle = element.Style__c?.labelValueStyle ? element.Style__c.labelValueStyle : "";
+            element.Style__c.inputClass = element.Style__c?.inputClass ? element.Style__c?.inputClass : "";
+            element.Style__c.inputStyle = element.Style__c.inputStyle ? element.Style__c?.inputStyle : "";
+            element.Style__c.bookStyle = element.Style__c?.bookStyle ? element.Style__c?.bookStyle : "";
+            element.Style__c.showLabel = element.Style__c?.showLabel ? element.Style__c?.showLabel : true;
+            element.Style__c.questionStyle = element.Style__c?.questionStyle ? element.Style__c?.questionStyle : "";
+            element['langDirection'] = element.Style__c?.direction ? element.Style__c?.direction : this.langDirection;
             //VD 02Aug24 dependent field show/hide changes
             if (element.Reference_Field__c) {
                 element.dependentRef = element.Reference_Field__c;
@@ -5514,12 +5293,22 @@ class QuestionbookComponent {
     getDropDown(event) {
         this.hadleDropDownDependent.emit(event);
     }
+    // VD 06Sep24 calendar changes
+    getCurrentCalendar(event) {
+        this.handleCalendarDate.emit(event);
+    }
+    // VD 06Sep24 remove the special charecters and tags 
+    // from the questionText
+    removeCharacters(questionText) {
+        let updatedText = questionText?.replace(/<[^>]*>/g, '');
+        return updatedText;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionbookComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: StorageService }, { token: I18nService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: QuestionbookComponent, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", translatedQuestions: "translatedQuestions", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", dropDownData: "dropDownData" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", hadleDropDownDependent: "hadleDropDownDependent" }, ngImport: i0, template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <div\n            [class]=\"'col-lg-' + ques.Size__c + ' paddingnone'\"\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.Id\" [dir]=\"ques.langDirection\" [style]=\"ques?.Style__c?.questionStyle\">\n            <!-- Sub Question Label -->\n            <!-- HA 20DEC23 Label Style from salesforce -->\n            <!-- VD 09May24 is hide field change-->\n         <div *ngIf=\"!ques.Is_Hide__c\">\n            <div *ngIf=\"ques.Type__c === 'DateTime'\">\n\n            </div>\n            <!-- VD 20JUN24 - help text changes-->\n            <!-- VD 01Aug24 - validation change-->\n            <!-- // VD 02Aug24 - label value style-->\n            <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\" *ngIf=\"ques.Style__c.showLabel\" [style]=\"ques.Style__c.labelStyle\">\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.Style__c.labelValueStyle\">{{ ques?.Question_Text__c }} \n                    <div  *ngIf=\"ques.Is_Optional__c\" style=\"color: red;\">*</div>\n                    <div *ngIf=\"ques.Question_Text__c && ques?.Help_Text__c\" class=\"icon\" [matTooltip]=\"ques?.Help_Text__c\">i</div></span>\n            </div>\n            <!-- // VD 12Jun24 - readonly change-->\n            <!-- DateTime -->\n            <div *ngIf=\"ques.Type__c === 'DateTime'\">\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date-picker>\n            </div>\n\n             <!-- Date-->\n             <div *ngIf=\"ques.Type__c === 'Date'\">\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date>\n            </div>\n\n             <!-- Time-->\n             <div *ngIf=\"ques.Type__c === 'Time'\">\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" (timeChange)=\"childEventCapture($event, ques)\">\n                </app-custom-time>\n            </div>\n           <!-- calendar  -->\n            <div *ngIf=\"ques.Type__c === 'Calendar'\">\n                <app-custom-calendar [question]=\"ques\"  (eventSelected)=\"childEventCapture($event, ques)\"></app-custom-calendar>\n            </div>\n\n            <!-- Text -->\n            <div *ngIf=\"ques.Type__c === 'Text'\">\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n                        textBox: !qbItem.Progress_Bar__c\n                    }\" [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [idValue]=\"ques.Tracking_ID__c\" [focusEvent]=\"clearSQError(ques.Id)\"\n                    [error]=\"ques.error\" [placeholder]=\"ques.Question__c\" (inputValue)=\"childEventCapture($event, ques)\">\n                </app-custom-input>\n            </div>\n            \n            <!-- for pick location -->\n            <!--   VD 21DEC23 - dependent field change -->\n            <div *ngIf=\"ques.Type__c === 'Location'\">\n            <!-- HA10012024 Added Api key as input -->\n                <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\n                </app-pick-location>\n            </div>\n\n            <!-- for  text area   -->\n            <div *ngIf=\"ques.Type__c === 'TextArea'\">\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \"\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n            </div>\n\n            <!-- Email -->\n            <div *ngIf=\"ques.Type__c === 'Email'\">\n                <input type=\"email\" readOnly=\"ques.Read_Only__c\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n            </div>\n\n            <!-- Table -->\n            <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.Sub_Text__c\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-table>\n            </div>\n\n              <!-- Table Appendix -->\n              <div *ngIf=\"ques.Type__c === 'TableAppendix'\" class=\"\">\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-table-appendix>\n            </div>\n             <!-- list -->\n             <!-- VD 20Aug24 used correct attribute -->\n             <div *ngIf=\"ques.Type__c === 'List'\" class=\"\">\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [placeHolderText]=\"ques.Question__c\"  [filterName]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\n                </lib-search-box>\n            </div>\n\n            <!-- Dropdown -->\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n            <div *ngIf=\"ques.Type__c === 'Dropdown' && ques?.Question_Options__r?.records\" class=\"\">\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n                <app-custom-dropdown [options]=\"ques.Question_Options__r.records\" [token]=\"token\"\n                    [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.selectedValue\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.Reference_Field__c\"\n                    [readOnly]=\"ques.Read_Only__c\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-dropdown>\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n            </div>\n            <!-- // VD 02Aug24 custom-radio component -->\n            <div *ngIf=\"ques.Type__c === 'Radio' && ques?.Question_Options__r?.records\" class=\"\">\n                <app-custom-radio [options]=\"ques.Question_Options__r.records\" [token]=\"token\"\n                    [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.selectedValue\"\n                    [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.Reference_Field__c\"\n                    [readOnly]=\"ques.Read_Only__c\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-radio>\n            </div>\n\n            <!-- Attachment / Files -->\n            <div *ngIf=\"ques.Type__c === 'File'\" class=\"\">\n                <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'PopUpMessage'\" class=\"\">\n                <app-dependent-table [alertMessage]=\"ques.Error_Message__c\">\n                </app-dependent-table>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'Label'\" class=\"\">\n                <app-custom-label [labelStyle]=\"ques.Title__c\" [labelValue]=\"ques.Question__c\">\n                </app-custom-label>\n            </div>\n             <!-- // VD 02Aug24 image component -->\n            <div *ngIf=\"ques.Type__c === 'Image'\" class=\"\">\n                <app-custom-image [question]=\"ques\">\n                </app-custom-image>\n            </div>\n            <!-- 08NOV23 - button type question added -->\n             <!-- Button -->\n            <div *ngIf=\"ques.Type__c === 'Button'\" class=\"\">\n                <app-custom-button [height]=\"'50px'\"  \n                [width]=\"'150px'\" \n                [buttonText]=\"ques?.Question__c\"\n                [value]=\"ques?.Question__c\"\n                (buttonValue)=\"childEventCapture($event, ques)\"\n                >\n                </app-custom-button>\n            </div>\n            <!-- HA 20DEC23  This is to load book type questions-->\n            <div *ngIf=\"ques.Type__c === 'Book'\">\n                <!-- HA 09FEB24 Added ternary operator -->\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.Questions__r?.records\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n         </div>\n        </div>\n    </div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:flex;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question"], outputs: ["eventSelected"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "error", "errorMessage", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "filterName"], outputs: ["searchValueChange"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question", "error"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: DependentTableComponent, selector: "app-dependent-table", inputs: ["alertMessage"] }, { kind: "component", type: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue", "labelStyle"] }, { kind: "component", type: TableAppendixComponent, selector: "app-table-appendix", inputs: ["question"], outputs: ["valueChange"] }, { kind: "component", type: CustomDateComponent, selector: "app-custom-date", inputs: ["date", "readOnly", "error", "errorMessage"], outputs: ["dateChange"] }, { kind: "component", type: CustomTimeComponent, selector: "app-custom-time", inputs: ["time", "readOnly", "error", "errorMessage"], outputs: ["timeChange"] }, { kind: "component", type: CustomButtonComponent, selector: "app-custom-button", inputs: ["height", "width", "textColor", "buttonText", "value", "backgroundColor"], outputs: ["buttonValue"] }, { kind: "component", type: CustomImageComponent, selector: "app-custom-image", inputs: ["alt", "src", "imageStyle", "question"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: QuestionbookComponent, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", translatedQuestions: "translatedQuestions", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", dropDownData: "dropDownData" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate" }, ngImport: i0, template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <div\n            [class]=\"'col-lg-' + ques.Size__c + ' paddingnone'\"\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.Id\" [dir]=\"ques.langDirection\" [style]=\"ques?.Style__c?.questionStyle\">\n            <!-- Sub Question Label -->\n            <!-- HA 20DEC23 Label Style from salesforce -->\n            <!-- VD 09May24 is hide field change-->\n         <div *ngIf=\"!ques.Is_Hide__c\">\n            <div *ngIf=\"ques.Type__c === 'DateTime'\">\n\n            </div>\n            <!-- VD 20JUN24 - help text changes-->\n            <!-- VD 01Aug24 - validation change-->\n            <!-- // VD 02Aug24 - label value style-->\n            <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\" *ngIf=\"ques.Style__c?.showLabel ? ques.Style__c?.showLabel : true\" [style]=\"ques.Style__c?.labelStyle\">\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.Style__c?.labelValueStyle\">{{ removeCharacters(ques?.Question_Text__c) }} \n                    <div  *ngIf=\"ques.Is_Optional__c\" style=\"color: red;\">*</div>\n                    <div *ngIf=\"ques.Question_Text__c && ques?.Help_Text__c\" class=\"icon\" [matTooltip]=\"ques?.Help_Text__c\">i</div></span>\n            </div>\n            <!-- // VD 12Jun24 - readonly change-->\n            <!-- DateTime -->\n            <div *ngIf=\"ques.Type__c === 'DateTime'\">\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date-picker>\n            </div>\n\n             <!-- Date-->\n             <div *ngIf=\"ques.Type__c === 'Date'\">\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date>\n            </div>\n\n             <!-- Time-->\n             <div *ngIf=\"ques.Type__c === 'Time'\">\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" (timeChange)=\"childEventCapture($event, ques)\">\n                </app-custom-time>\n            </div>\n           <!-- calendar  -->\n            <div *ngIf=\"ques.Type__c === 'Calendar'\">\n                <lib-custom-calendar [question]=\"ques\"  (eventSelected)=\"childEventCapture($event, ques)\" (dateSelected)=\"getCurrentCalendar($event)\"></lib-custom-calendar>\n            </div>\n\n            <!-- Text -->\n            <div *ngIf=\"ques.Type__c === 'Text' || ques.Type__c === 'Link'\" >\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n                        textBox: !qbItem.Progress_Bar__c\n                    }\" [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [idValue]=\"ques.Tracking_ID__c\" [focusEvent]=\"clearSQError(ques.Id)\"\n                    [error]=\"ques.error\" [placeholder]=\"ques.Question__c\" (inputValue)=\"childEventCapture($event, ques)\">\n                </app-custom-input>\n            </div>\n            \n            <!-- for pick location -->\n            <!--   VD 21DEC23 - dependent field change -->\n            <div *ngIf=\"ques.Type__c === 'Location'\">\n            <!-- HA10012024 Added Api key as input -->\n                <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\n                </app-pick-location>\n            </div>\n\n            <!-- for  text area   -->\n            <div *ngIf=\"ques.Type__c === 'TextArea'\">\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \"\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n            </div>\n\n            <!-- Email -->\n            <div *ngIf=\"ques.Type__c === 'Email'\">\n                <input type=\"email\" readOnly=\"ques.Read_Only__c\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n            </div>\n\n            <!-- Table -->\n            <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.Sub_Text__c\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-table>\n            </div>\n\n              <!-- Table Appendix -->\n              <div *ngIf=\"ques.Type__c === 'TableAppendix'\" class=\"\">\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-table-appendix>\n            </div>\n             <!-- list -->\n             <!-- VD 20Aug24 used correct attribute -->\n             <div *ngIf=\"ques.Type__c === 'List'\" class=\"\">\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [placeHolderText]=\"ques.Question__c\"  [filterName]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\n                </lib-search-box>\n            </div>\n\n            <!-- Dropdown -->\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n            <div *ngIf=\"ques.Type__c === 'Dropdown' && ques?.Question_Options__r?.records\" class=\"\">\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n                <app-custom-dropdown [options]=\"ques.Question_Options__r.records\" [token]=\"token\"\n                    [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.selectedValue\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.Reference_Field__c\"\n                    [readOnly]=\"ques.Read_Only__c\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-dropdown>\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n            </div>\n            <!-- // VD 02Aug24 custom-radio component -->\n            <div *ngIf=\"ques.Type__c === 'Radio' && ques?.Question_Options__r?.records\" class=\"\">\n                <app-custom-radio [options]=\"ques.Question_Options__r.records\" [token]=\"token\"\n                    [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.selectedValue\"\n                    [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.Reference_Field__c\"\n                    [readOnly]=\"ques.Read_Only__c\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-radio>\n            </div>\n\n            <!-- Attachment / Files -->\n            <div *ngIf=\"ques.Type__c === 'File'\" class=\"\">\n                <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'PopUpMessage'\" class=\"\">\n                <app-dependent-table [alertMessage]=\"ques.Error_Message__c\">\n                </app-dependent-table>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'Label'\" class=\"\">\n                <app-custom-label [labelStyle]=\"ques.Title__c\" [labelValue]=\"ques.Question__c\">\n                </app-custom-label>\n            </div>\n             <!-- // VD 02Aug24 image component -->\n            <div *ngIf=\"ques.Type__c === 'Image'\" class=\"\">\n                <app-custom-image [question]=\"ques\">\n                </app-custom-image>\n            </div>\n            <!-- 08NOV23 - button type question added -->\n             <!-- Button -->\n            <div *ngIf=\"ques.Type__c === 'Button'\" class=\"\">\n                <app-custom-button [height]=\"'50px'\"  \n                [width]=\"'150px'\" \n                [buttonText]=\"ques?.Question__c\"\n                [value]=\"ques?.Question__c\"\n                (buttonValue)=\"childEventCapture($event, ques)\"\n                >\n                </app-custom-button>\n            </div>\n            <!-- HA 20DEC23  This is to load book type questions-->\n            <div *ngIf=\"ques.Type__c === 'Book'\">\n                <!-- HA 09FEB24 Added ternary operator -->\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.Questions__r?.records\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n         </div>\n        </div>\n    </div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:flex;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "question", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomInputComponent, selector: "app-custom-input", inputs: ["value", "question", "disabled", "placeholder", "error", "fromShengel", "readOnly", "ngClassValue", "idValue", "focusEvent"], outputs: ["inputValue"] }, { kind: "component", type: CustomTextAreaComponent, selector: "app-custom-text-area", inputs: ["value", "placeholder", "rows", "error", "question", "readOnly"], outputs: ["textareaValueChange"] }, { kind: "component", type: CustomTableComponent, selector: "app-custom-table", inputs: ["question", "apiMeta"], outputs: ["valueChange"] }, { kind: "component", type: CustomDatePickerComponent, selector: "app-custom-date-picker", inputs: ["date", "minDate", "maxDate", "error", "errorMessage", "readOnly"], outputs: ["dateChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "filterName"], outputs: ["searchValueChange"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate"] }, { kind: "component", type: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question", "error"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: DependentTableComponent, selector: "app-dependent-table", inputs: ["alertMessage"] }, { kind: "component", type: CustomLabelComponent, selector: "app-custom-label", inputs: ["labelValue", "labelStyle"] }, { kind: "component", type: TableAppendixComponent, selector: "app-table-appendix", inputs: ["question"], outputs: ["valueChange"] }, { kind: "component", type: CustomDateComponent, selector: "app-custom-date", inputs: ["date", "readOnly", "error", "errorMessage"], outputs: ["dateChange"] }, { kind: "component", type: CustomTimeComponent, selector: "app-custom-time", inputs: ["time", "readOnly", "error", "errorMessage"], outputs: ["timeChange"] }, { kind: "component", type: CustomButtonComponent, selector: "app-custom-button", inputs: ["height", "width", "textColor", "buttonText", "value", "backgroundColor"], outputs: ["buttonValue"] }, { kind: "component", type: CustomImageComponent, selector: "app-custom-image", inputs: ["alt", "src", "imageStyle", "question"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: QuestionbookComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-questionbook', template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <div\n            [class]=\"'col-lg-' + ques.Size__c + ' paddingnone'\"\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.Id\" [dir]=\"ques.langDirection\" [style]=\"ques?.Style__c?.questionStyle\">\n            <!-- Sub Question Label -->\n            <!-- HA 20DEC23 Label Style from salesforce -->\n            <!-- VD 09May24 is hide field change-->\n         <div *ngIf=\"!ques.Is_Hide__c\">\n            <div *ngIf=\"ques.Type__c === 'DateTime'\">\n\n            </div>\n            <!-- VD 20JUN24 - help text changes-->\n            <!-- VD 01Aug24 - validation change-->\n            <!-- // VD 02Aug24 - label value style-->\n            <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\" *ngIf=\"ques.Style__c.showLabel\" [style]=\"ques.Style__c.labelStyle\">\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.Style__c.labelValueStyle\">{{ ques?.Question_Text__c }} \n                    <div  *ngIf=\"ques.Is_Optional__c\" style=\"color: red;\">*</div>\n                    <div *ngIf=\"ques.Question_Text__c && ques?.Help_Text__c\" class=\"icon\" [matTooltip]=\"ques?.Help_Text__c\">i</div></span>\n            </div>\n            <!-- // VD 12Jun24 - readonly change-->\n            <!-- DateTime -->\n            <div *ngIf=\"ques.Type__c === 'DateTime'\">\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date-picker>\n            </div>\n\n             <!-- Date-->\n             <div *ngIf=\"ques.Type__c === 'Date'\">\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date>\n            </div>\n\n             <!-- Time-->\n             <div *ngIf=\"ques.Type__c === 'Time'\">\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" (timeChange)=\"childEventCapture($event, ques)\">\n                </app-custom-time>\n            </div>\n           <!-- calendar  -->\n            <div *ngIf=\"ques.Type__c === 'Calendar'\">\n                <app-custom-calendar [question]=\"ques\"  (eventSelected)=\"childEventCapture($event, ques)\"></app-custom-calendar>\n            </div>\n\n            <!-- Text -->\n            <div *ngIf=\"ques.Type__c === 'Text'\">\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n                        textBox: !qbItem.Progress_Bar__c\n                    }\" [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [idValue]=\"ques.Tracking_ID__c\" [focusEvent]=\"clearSQError(ques.Id)\"\n                    [error]=\"ques.error\" [placeholder]=\"ques.Question__c\" (inputValue)=\"childEventCapture($event, ques)\">\n                </app-custom-input>\n            </div>\n            \n            <!-- for pick location -->\n            <!--   VD 21DEC23 - dependent field change -->\n            <div *ngIf=\"ques.Type__c === 'Location'\">\n            <!-- HA10012024 Added Api key as input -->\n                <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\n                </app-pick-location>\n            </div>\n\n            <!-- for  text area   -->\n            <div *ngIf=\"ques.Type__c === 'TextArea'\">\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \"\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n            </div>\n\n            <!-- Email -->\n            <div *ngIf=\"ques.Type__c === 'Email'\">\n                <input type=\"email\" readOnly=\"ques.Read_Only__c\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n            </div>\n\n            <!-- Table -->\n            <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.Sub_Text__c\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-table>\n            </div>\n\n              <!-- Table Appendix -->\n              <div *ngIf=\"ques.Type__c === 'TableAppendix'\" class=\"\">\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-table-appendix>\n            </div>\n             <!-- list -->\n             <!-- VD 20Aug24 used correct attribute -->\n             <div *ngIf=\"ques.Type__c === 'List'\" class=\"\">\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [placeHolderText]=\"ques.Question__c\"  [filterName]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\n                </lib-search-box>\n            </div>\n\n            <!-- Dropdown -->\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n            <div *ngIf=\"ques.Type__c === 'Dropdown' && ques?.Question_Options__r?.records\" class=\"\">\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n                <app-custom-dropdown [options]=\"ques.Question_Options__r.records\" [token]=\"token\"\n                    [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.selectedValue\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.Reference_Field__c\"\n                    [readOnly]=\"ques.Read_Only__c\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-dropdown>\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n            </div>\n            <!-- // VD 02Aug24 custom-radio component -->\n            <div *ngIf=\"ques.Type__c === 'Radio' && ques?.Question_Options__r?.records\" class=\"\">\n                <app-custom-radio [options]=\"ques.Question_Options__r.records\" [token]=\"token\"\n                    [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.selectedValue\"\n                    [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.Reference_Field__c\"\n                    [readOnly]=\"ques.Read_Only__c\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-radio>\n            </div>\n\n            <!-- Attachment / Files -->\n            <div *ngIf=\"ques.Type__c === 'File'\" class=\"\">\n                <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'PopUpMessage'\" class=\"\">\n                <app-dependent-table [alertMessage]=\"ques.Error_Message__c\">\n                </app-dependent-table>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'Label'\" class=\"\">\n                <app-custom-label [labelStyle]=\"ques.Title__c\" [labelValue]=\"ques.Question__c\">\n                </app-custom-label>\n            </div>\n             <!-- // VD 02Aug24 image component -->\n            <div *ngIf=\"ques.Type__c === 'Image'\" class=\"\">\n                <app-custom-image [question]=\"ques\">\n                </app-custom-image>\n            </div>\n            <!-- 08NOV23 - button type question added -->\n             <!-- Button -->\n            <div *ngIf=\"ques.Type__c === 'Button'\" class=\"\">\n                <app-custom-button [height]=\"'50px'\"  \n                [width]=\"'150px'\" \n                [buttonText]=\"ques?.Question__c\"\n                [value]=\"ques?.Question__c\"\n                (buttonValue)=\"childEventCapture($event, ques)\"\n                >\n                </app-custom-button>\n            </div>\n            <!-- HA 20DEC23  This is to load book type questions-->\n            <div *ngIf=\"ques.Type__c === 'Book'\">\n                <!-- HA 09FEB24 Added ternary operator -->\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.Questions__r?.records\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n         </div>\n        </div>\n    </div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:flex;flex-wrap:wrap}}\n"] }]
+            args: [{ selector: 'lib-questionbook', template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <div\n            [class]=\"'col-lg-' + ques.Size__c + ' paddingnone'\"\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.Id\" [dir]=\"ques.langDirection\" [style]=\"ques?.Style__c?.questionStyle\">\n            <!-- Sub Question Label -->\n            <!-- HA 20DEC23 Label Style from salesforce -->\n            <!-- VD 09May24 is hide field change-->\n         <div *ngIf=\"!ques.Is_Hide__c\">\n            <div *ngIf=\"ques.Type__c === 'DateTime'\">\n\n            </div>\n            <!-- VD 20JUN24 - help text changes-->\n            <!-- VD 01Aug24 - validation change-->\n            <!-- // VD 02Aug24 - label value style-->\n            <div [ngClass]=\"{ down2: qbItem?.Progress_Bar__c }\" *ngIf=\"ques.Style__c?.showLabel ? ques.Style__c?.showLabel : true\" [style]=\"ques.Style__c?.labelStyle\">\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.Style__c?.labelValueStyle\">{{ removeCharacters(ques?.Question_Text__c) }} \n                    <div  *ngIf=\"ques.Is_Optional__c\" style=\"color: red;\">*</div>\n                    <div *ngIf=\"ques.Question_Text__c && ques?.Help_Text__c\" class=\"icon\" [matTooltip]=\"ques?.Help_Text__c\">i</div></span>\n            </div>\n            <!-- // VD 12Jun24 - readonly change-->\n            <!-- DateTime -->\n            <div *ngIf=\"ques.Type__c === 'DateTime'\">\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date-picker>\n            </div>\n\n             <!-- Date-->\n             <div *ngIf=\"ques.Type__c === 'Date'\">\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date>\n            </div>\n\n             <!-- Time-->\n             <div *ngIf=\"ques.Type__c === 'Time'\">\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.Error_Message__c\" [readOnly]=\"ques.Read_Only__c\" (timeChange)=\"childEventCapture($event, ques)\">\n                </app-custom-time>\n            </div>\n           <!-- calendar  -->\n            <div *ngIf=\"ques.Type__c === 'Calendar'\">\n                <lib-custom-calendar [question]=\"ques\"  (eventSelected)=\"childEventCapture($event, ques)\" (dateSelected)=\"getCurrentCalendar($event)\"></lib-custom-calendar>\n            </div>\n\n            <!-- Text -->\n            <div *ngIf=\"ques.Type__c === 'Text' || ques.Type__c === 'Link'\" >\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.Progress_Bar__c,\n                        textBox: !qbItem.Progress_Bar__c\n                    }\" [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [idValue]=\"ques.Tracking_ID__c\" [focusEvent]=\"clearSQError(ques.Id)\"\n                    [error]=\"ques.error\" [placeholder]=\"ques.Question__c\" (inputValue)=\"childEventCapture($event, ques)\">\n                </app-custom-input>\n            </div>\n            \n            <!-- for pick location -->\n            <!--   VD 21DEC23 - dependent field change -->\n            <div *ngIf=\"ques.Type__c === 'Location'\">\n            <!-- HA10012024 Added Api key as input -->\n                <app-pick-location [apiKey]=\"qbItem['Api_Key__c']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\n                </app-pick-location>\n            </div>\n\n            <!-- for  text area   -->\n            <div *ngIf=\"ques.Type__c === 'TextArea'\">\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.Question__c \"\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n            </div>\n\n            <!-- Email -->\n            <div *ngIf=\"ques.Type__c === 'Email'\">\n                <input type=\"email\" readOnly=\"ques.Read_Only__c\" [(ngModel)]=\"ques.input\" [id]=\"ques.Id\" required=\"\" (focus)=\"clearSQError(ques.Id)\"\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.Question__c }}\" />\n            </div>\n\n            <!-- Table -->\n            <div *ngIf=\"ques.Type__c === 'Table'\" class=\"\">\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.Sub_Text__c\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-table>\n            </div>\n\n              <!-- Table Appendix -->\n              <div *ngIf=\"ques.Type__c === 'TableAppendix'\" class=\"\">\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-table-appendix>\n            </div>\n             <!-- list -->\n             <!-- VD 20Aug24 used correct attribute -->\n             <div *ngIf=\"ques.Type__c === 'List'\" class=\"\">\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.Read_Only__c\" [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [placeHolderText]=\"ques.Question__c\"  [filterName]=\"ques.input\" (searchValueChange)=\"childEventCapture($event, ques)\">\n                </lib-search-box>\n            </div>\n\n            <!-- Dropdown -->\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n            <div *ngIf=\"ques.Type__c === 'Dropdown' && ques?.Question_Options__r?.records\" class=\"\">\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n                <app-custom-dropdown [options]=\"ques.Question_Options__r.records\" [token]=\"token\"\n                    [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.selectedValue\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.Reference_Field__c\"\n                    [readOnly]=\"ques.Read_Only__c\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-dropdown>\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\n            </div>\n            <!-- // VD 02Aug24 custom-radio component -->\n            <div *ngIf=\"ques.Type__c === 'Radio' && ques?.Question_Options__r?.records\" class=\"\">\n                <app-custom-radio [options]=\"ques.Question_Options__r.records\" [token]=\"token\"\n                    [apiMeta]=\"ques.Sub_Text__c\" [id]=\"ques.Id\" [selectedValue]=\"ques.selectedValue\"\n                    [errorMessage]=\"ques.Error_Message__c\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.Reference_Field__c\"\n                    [readOnly]=\"ques.Read_Only__c\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.Id)\">\n                </app-custom-radio>\n            </div>\n\n            <!-- Attachment / Files -->\n            <div *ngIf=\"ques.Type__c === 'File'\" class=\"\">\n                <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'PopUpMessage'\" class=\"\">\n                <app-dependent-table [alertMessage]=\"ques.Error_Message__c\">\n                </app-dependent-table>\n            </div>\n            <div *ngIf=\"ques.Type__c === 'Label'\" class=\"\">\n                <app-custom-label [labelStyle]=\"ques.Title__c\" [labelValue]=\"ques.Question__c\">\n                </app-custom-label>\n            </div>\n             <!-- // VD 02Aug24 image component -->\n            <div *ngIf=\"ques.Type__c === 'Image'\" class=\"\">\n                <app-custom-image [question]=\"ques\">\n                </app-custom-image>\n            </div>\n            <!-- 08NOV23 - button type question added -->\n             <!-- Button -->\n            <div *ngIf=\"ques.Type__c === 'Button'\" class=\"\">\n                <app-custom-button [height]=\"'50px'\"  \n                [width]=\"'150px'\" \n                [buttonText]=\"ques?.Question__c\"\n                [value]=\"ques?.Question__c\"\n                (buttonValue)=\"childEventCapture($event, ques)\"\n                >\n                </app-custom-button>\n            </div>\n            <!-- HA 20DEC23  This is to load book type questions-->\n            <div *ngIf=\"ques.Type__c === 'Book'\">\n                <!-- HA 09FEB24 Added ternary operator -->\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.Questions__r?.records\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n         </div>\n        </div>\n    </div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.form-row{display:flex;flex-wrap:wrap}}\n"] }]
         }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: StorageService }, { type: I18nService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -5545,6 +5334,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], hadleDropDownDependent: [{
                 type: Output
+            }], handleCalendarDate: [{
+                type: Output
             }] } });
 
 class BookletComponent {
@@ -5567,6 +5358,8 @@ class BookletComponent {
     handleBookletActionEvent = new EventEmitter();
     handlePage = new EventEmitter();
     hadleDropDownDependent = new EventEmitter();
+    // VD 06Sep24 calendar changes
+    handleCalendarDate = new EventEmitter();
     nxtBooklet;
     booklet = [];
     abItem = {};
@@ -5581,6 +5374,7 @@ class BookletComponent {
     langDirection = 'ltr'; // HA 28DEC23 making ltr as default direction
     answerList = []; // HA 11-JAN-24 Answerlist to store the minimal value
     dataBind = {}; // HA 18-JAN-24 To insert the endpoint value to the question
+    allEvents = []; // VD 06Sep24 calendar changes
     constructor(sfService, dataService, storageService, route, sanitizer, changeService, el, i18nService) {
         this.sfService = sfService;
         this.dataService = dataService;
@@ -5838,11 +5632,13 @@ class BookletComponent {
         });
     }
     // HA 11-JAN-24 handleQues to load question
+    // VD 06Sep24 calendar changes
     handleQues(ques) {
         // HA 19-JAN-24 If condition is for bind-in, correction
         // HA 09FEB24 Adding condition to avoid undefined error
         if (this.dataBind && Object.keys(this.dataBind).length > 0) {
-            for (let [key, value] of Object.entries(this.dataBind)) {
+            for (let [key, val] of Object.entries(this.dataBind)) {
+                let value = val;
                 if (ques.Reference_Field__c === key) {
                     if (ques.Type__c === 'Dropdown' || ques.Type__c === 'Radio') {
                         this.sqOptions.forEach(element => {
@@ -5862,6 +5658,46 @@ class BookletComponent {
                         ques.input = value;
                         ques.selectedValue = value['address'] ? value['address'] : value;
                     }
+                    // VD 06Sep24 calendar changes for data bindIn
+                    else if (ques.Type__c === 'Calendar') {
+                        let entries = JSON.parse(ques['Fields_Meta__c']);
+                        if (entries) {
+                            let referenceQuestions = [];
+                            if (entries.length > 0) {
+                                entries.forEach(element => {
+                                    if (element.questionReference) {
+                                        let qReference = JSON.parse(element.questionReference);
+                                        referenceQuestions.push(qReference?.question);
+                                    }
+                                });
+                            }
+                            if (referenceQuestions.length > 0) {
+                                value?.forEach(calendarArray => {
+                                    let date = new Date(calendarArray.date);
+                                    calendarArray.entries.forEach(inputEntry => {
+                                        for (let [k, v] of Object.entries(inputEntry)) {
+                                            referenceQuestions.forEach(field => {
+                                                if (field.Reference_Field__c == k) {
+                                                    if (field.Type__c === 'Date' || field.Type__c == 'DateTime' || field.Type__c == 'Time') {
+                                                        field.input = new Date(v.toString());
+                                                    }
+                                                    if (field.Type__c === 'Dropdown' || field.Type__c === 'Radio') {
+                                                        field.selectedValue = v;
+                                                        field.input = v;
+                                                    }
+                                                    else {
+                                                        field.input = v;
+                                                    }
+                                                }
+                                            });
+                                        }
+                                    });
+                                    this.addEvent(date, referenceQuestions);
+                                });
+                            }
+                        }
+                        ques.input = this.allEvents.length > 0 ? this.allEvents : '';
+                    }
                     else {
                         ques.input = value;
                     }
@@ -5884,6 +5720,33 @@ class BookletComponent {
             this.answerList.push(question);
         }
     }
+    // VD 06Sep24 calendar changes for data bindIn
+    addEvent(day, entryQues) {
+        // Transform new entries into the desired format
+        const newEntries = entryQues.reduce((acc, q) => {
+            acc[q.Id] = { ...q };
+            return acc;
+        }, {});
+        // Find if an event already exists for the given date
+        const existingEvent = this.allEvents.find(event => event.date.toDateString() === day.toDateString());
+        if (existingEvent) {
+            // If the event exists, push the new entries to the existing entries
+            const existingEntries = existingEvent.entries.map(entry => ({ ...entry }));
+            existingEntries.push(newEntries);
+            existingEvent.entries = existingEntries;
+        }
+        else {
+            // Create a new event if it doesn't exist for the given date
+            const newEvent = {
+                id: '',
+                date: day,
+                entries: [newEntries] // Wrap the new entries in an array
+            };
+            this.allEvents.push(newEvent);
+        }
+        console.log('all events booklet');
+        console.log(this.allEvents);
+    }
     readQuestions(qbId) {
         // console.log('inside BookletComponent.readQuestions ' + qbId);
         // console.log(this.bookQuestionsMap.size);
@@ -5936,12 +5799,16 @@ class BookletComponent {
     getDropDown(event) {
         this.hadleDropDownDependent.emit(event);
     }
+    // VD 06Sep24 calendar changes
+    getCalendarDate(event) {
+        this.handleCalendarDate.emit(event);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BookletComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: StorageService }, { token: i1.ActivatedRoute }, { token: i6$1.DomSanitizer }, { token: ChangeService }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BookletComponent, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent" }, usesOnChanges: true, ngImport: i0, template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.Id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.Questions__r?.records; else elseBlock\">\n        <div *ngFor=\"let ques of qb.Questions__r.records\" class=\"questiondiv1\">\n            <div>\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing lable when its available-->\n                    <div [innerHTML]=\"getText(ques?.Question_Text__c)\" *ngIf=\"ques?.Question_Text__c\" > \n                        {{ ques?.Question_Text__c }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"ques\" [translatedQuestions]=\"readTransQuestions(qb.Id)\" [questions]=\"readQuestions(qb.Id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n        </div>\n    </div>\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n    <ng-template #elseBlock>\n        <div class=\"questiondiv1\">\n            <div>\n                <div *ngIf=\"!qb.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing lable when its available-->\n                    <div [innerHTML]=\"getText(qb?.Question_Text__c)\" *ngIf=\"qb?.Question_Text__c\" > \n                        {{ qb?.Question_Text__c }}\n                        {{ qb?.Title__c }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.Id)\" [questions]=\"readQuestions(qb.Id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n</div>\n\n<!-- Group Actions -->\n<!-- HA 19DEC23 For Direction -->\n<div class=\"align-submit-row\" *ngIf=\"abItem?.Status__c != 'Completed'\" [ngClass]=\"langDirection\">\n    <div *ngFor=\"let action of actions; let i = index\">\n    <!-- // HA 22JAN24 Commonise the button style in fusion -->\n        <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\n            {{ action.name }}\n        </button>\n    </div>\n</div>\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#F8F8F8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["disableAnimation", "bdColor", "zIndex", "color", "type", "size", "fullScreen", "name", "template", "showSpinner"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BookletComponent, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate" }, usesOnChanges: true, ngImport: i0, template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.Id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.Questions__r?.records; else elseBlock\">\n        <div *ngFor=\"let ques of qb.Questions__r.records\" class=\"questiondiv1\">\n            <div>\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing lable when its available-->\n                    <div [innerHTML]=\"getText(ques?.Question_Text__c)\" *ngIf=\"ques?.Question_Text__c\" > \n                        {{ ques?.Question_Text__c }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n                <!--VD 06Sep24 calendar changes--> \n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" \n                [labelValue]=\"labelValue\" \n                [questionItem]=\"ques\" \n                [translatedQuestions]=\"readTransQuestions(qb.Id)\" \n                [questions]=\"readQuestions(qb.Id)\"  \n                (handleDropDown)=\"getDropDown($event)\"\n                (handleCalendarDate)=\"getCalendarDate($event)\"\n                ></lib-questionbook>\n            </div>\n        </div>\n    </div>\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n    <ng-template #elseBlock>\n        <div class=\"questiondiv1\">\n            <div>\n                <div *ngIf=\"!qb.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing lable when its available-->\n                    <div [innerHTML]=\"getText(qb?.Question_Text__c)\" *ngIf=\"qb?.Question_Text__c\" > \n                        {{ qb?.Question_Text__c }}\n                        {{ qb?.Title__c }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.Id)\" [questions]=\"readQuestions(qb.Id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n</div>\n\n<!-- Group Actions -->\n<!-- HA 19DEC23 For Direction -->\n<div class=\"align-submit-row\" *ngIf=\"abItem?.Status__c != 'Completed'\" [ngClass]=\"langDirection\">\n    <div *ngFor=\"let action of actions; let i = index\">\n    <!-- // HA 22JAN24 Commonise the button style in fusion -->\n        <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\n            {{ action.name }}\n        </button>\n    </div>\n</div>\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#F8F8F8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["disableAnimation", "bdColor", "zIndex", "color", "type", "size", "fullScreen", "name", "template", "showSpinner"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BookletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-booklet', template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.Id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.Questions__r?.records; else elseBlock\">\n        <div *ngFor=\"let ques of qb.Questions__r.records\" class=\"questiondiv1\">\n            <div>\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing lable when its available-->\n                    <div [innerHTML]=\"getText(ques?.Question_Text__c)\" *ngIf=\"ques?.Question_Text__c\" > \n                        {{ ques?.Question_Text__c }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"ques\" [translatedQuestions]=\"readTransQuestions(qb.Id)\" [questions]=\"readQuestions(qb.Id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n        </div>\n    </div>\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n    <ng-template #elseBlock>\n        <div class=\"questiondiv1\">\n            <div>\n                <div *ngIf=\"!qb.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing lable when its available-->\n                    <div [innerHTML]=\"getText(qb?.Question_Text__c)\" *ngIf=\"qb?.Question_Text__c\" > \n                        {{ qb?.Question_Text__c }}\n                        {{ qb?.Title__c }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.Id)\" [questions]=\"readQuestions(qb.Id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n</div>\n\n<!-- Group Actions -->\n<!-- HA 19DEC23 For Direction -->\n<div class=\"align-submit-row\" *ngIf=\"abItem?.Status__c != 'Completed'\" [ngClass]=\"langDirection\">\n    <div *ngFor=\"let action of actions; let i = index\">\n    <!-- // HA 22JAN24 Commonise the button style in fusion -->\n        <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\n            {{ action.name }}\n        </button>\n    </div>\n</div>\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#F8F8F8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}\n"] }]
+            args: [{ selector: 'lib-booklet', template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.Id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.Questions__r?.records; else elseBlock\">\n        <div *ngFor=\"let ques of qb.Questions__r.records\" class=\"questiondiv1\">\n            <div>\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing lable when its available-->\n                    <div [innerHTML]=\"getText(ques?.Question_Text__c)\" *ngIf=\"ques?.Question_Text__c\" > \n                        {{ ques?.Question_Text__c }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n                <!--VD 06Sep24 calendar changes--> \n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" \n                [labelValue]=\"labelValue\" \n                [questionItem]=\"ques\" \n                [translatedQuestions]=\"readTransQuestions(qb.Id)\" \n                [questions]=\"readQuestions(qb.Id)\"  \n                (handleDropDown)=\"getDropDown($event)\"\n                (handleCalendarDate)=\"getCalendarDate($event)\"\n                ></lib-questionbook>\n            </div>\n        </div>\n    </div>\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n    <ng-template #elseBlock>\n        <div class=\"questiondiv1\">\n            <div>\n                <div *ngIf=\"!qb.Is_Title__c\" [class]=\"qb.isShengel__c ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing lable when its available-->\n                    <div [innerHTML]=\"getText(qb?.Question_Text__c)\" *ngIf=\"qb?.Question_Text__c\" > \n                        {{ qb?.Question_Text__c }}\n                        {{ qb?.Title__c }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.Id)\" [questions]=\"readQuestions(qb.Id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n</div>\n\n<!-- Group Actions -->\n<!-- HA 19DEC23 For Direction -->\n<div class=\"align-submit-row\" *ngIf=\"abItem?.Status__c != 'Completed'\" [ngClass]=\"langDirection\">\n    <div *ngFor=\"let action of actions; let i = index\">\n    <!-- // HA 22JAN24 Commonise the button style in fusion -->\n        <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\n            {{ action.name }}\n        </button>\n    </div>\n</div>\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#F8F8F8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}\n"] }]
         }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: StorageService }, { type: i1.ActivatedRoute }, { type: i6$1.DomSanitizer }, { type: ChangeService }, { type: i0.ElementRef }, { type: I18nService }]; }, propDecorators: { bookletId: [{
                 type: Input
             }], serv: [{
@@ -5966,6 +5833,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Output
             }], hadleDropDownDependent: [{
                 type: Output
+            }], handleCalendarDate: [{
+                type: Output
             }], dataBind: [{
                 type: Input
             }] } });
@@ -6252,6 +6121,311 @@ var tamI18n$1 = /*#__PURE__*/Object.freeze({
     default: tamI18n
 });
 
+class CustomModelComponent {
+    constructor() { }
+    modalTitle;
+    isModalOpen = false;
+    modalSize = '';
+    saveButtonValue = 'Save';
+    modalFooter = true;
+    saveButtonEmit = new EventEmitter();
+    cancelButtonEmit = new EventEmitter();
+    onSave() {
+        this.saveButtonEmit.emit();
+    }
+    onCancel() {
+        this.cancelButtonEmit.emit();
+    }
+    ngOnInit() {
+    }
+    closeModal() {
+        this.cancelButtonEmit.emit(false);
+    }
+    saveModal() {
+        this.saveButtonEmit.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomModelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomModelComponent, selector: "app-custom-model", inputs: { modalTitle: "modalTitle", isModalOpen: "isModalOpen", modalSize: "modalSize", saveButtonValue: "saveButtonValue", modalFooter: "modalFooter" }, outputs: { saveButtonEmit: "saveButtonEmit", cancelButtonEmit: "cancelButtonEmit" }, ngImport: i0, template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <span class=\"close\" (click)=\"onCancel()\">&times;</span>\n        <h2>{{ modalTitle }}</h2>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <!-- /* VD 06Sep24 styling changes */-->\n      <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n        <button (click)=\"onCancel()\">Cancel</button>\n        <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\n      </div>\n    </div>\n</div>\n  ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:70%;max-width:90%;max-height:80vh;overflow-y:auto}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.modal-body{max-height:60vh;overflow-y:auto}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-footer button{padding:10px 20px;margin:5px;font-size:16px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#f5f5f5;color:#333}.modal-footer button:hover{background-color:#e0e0e0;border-color:#bbb}@media (max-width: 768px){.modal-content{width:90%;margin:10% auto}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomModelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-custom-model', template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <span class=\"close\" (click)=\"onCancel()\">&times;</span>\n        <h2>{{ modalTitle }}</h2>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <!-- /* VD 06Sep24 styling changes */-->\n      <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n        <button (click)=\"onCancel()\">Cancel</button>\n        <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\n      </div>\n    </div>\n</div>\n  ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:70%;max-width:90%;max-height:80vh;overflow-y:auto}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.modal-body{max-height:60vh;overflow-y:auto}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-footer button{padding:10px 20px;margin:5px;font-size:16px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#f5f5f5;color:#333}.modal-footer button:hover{background-color:#e0e0e0;border-color:#bbb}@media (max-width: 768px){.modal-content{width:90%;margin:10% auto}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { modalTitle: [{
+                type: Input
+            }], isModalOpen: [{
+                type: Input
+            }], modalSize: [{
+                type: Input
+            }], saveButtonValue: [{
+                type: Input
+            }], modalFooter: [{
+                type: Input
+            }], saveButtonEmit: [{
+                type: Output
+            }], cancelButtonEmit: [{
+                type: Output
+            }] } });
+
+class CustomCalendarComponent {
+    eventSelected = new EventEmitter();
+    // VD 06Sep24 calendar changes
+    dateSelected = new EventEmitter();
+    allEvents = [];
+    question;
+    entries = [];
+    referenceQuestions = [];
+    qbRefrenceBook;
+    calendarQuestion = [];
+    currentDate = new Date();
+    calendarDays = [];
+    daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    newEventTitle = '';
+    newEventTime = '';
+    newDescription = '';
+    newLink = '';
+    selectedDay = null;
+    isModalOpen = false;
+    modalTitle = 'Custom Modal';
+    modalSize = 'large';
+    saveButtonValue = 'Save';
+    modalFooter = true;
+    editingEventId;
+    editingEntryGroup;
+    showAppoinmentSection = true;
+    ngOnInit() {
+        if (this.question?.input) {
+            this.allEvents = this.question.input;
+        }
+        this.processQuestion();
+        this.generateCalendar();
+    }
+    processQuestion() {
+        this.entries = JSON.parse(this.question['Fields_Meta__c']);
+        this.qbRefrenceBook = JSON.parse(this.question['QB_Reference_Questions__c']);
+        let title = this.qbRefrenceBook?.questionbook?.Title__c;
+        this.modalTitle = title;
+        this.referenceQuestions = [];
+        if (this.entries.length > 0) {
+            this.entries.forEach(element => {
+                if (element.questionReference) {
+                    let qReference = JSON.parse(element.questionReference);
+                    this.referenceQuestions.push(qReference?.question);
+                }
+            });
+        }
+        console.log('entries-->');
+        console.log('question-->');
+        console.log(this.entries);
+        console.log(this.referenceQuestions);
+    }
+    generateCalendar() {
+        const year = this.currentDate.getFullYear();
+        const month = this.currentDate.getMonth();
+        const startOfMonth = new Date(year, month, 1);
+        const endOfMonth = new Date(year, month + 1, 0);
+        const startDayOfWeek = startOfMonth.getDay();
+        const endDayOfWeek = endOfMonth.getDay();
+        const startDate = new Date(startOfMonth);
+        startDate.setDate(startDate.getDate() - startDayOfWeek);
+        const endDate = new Date(endOfMonth);
+        endDate.setDate(endDate.getDate() + (6 - endDayOfWeek));
+        const today = new Date(new Date().setHours(0, 0, 0, 0));
+        this.calendarDays = [];
+        for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
+            const date = new Date(d);
+            this.calendarDays.push({
+                date: date,
+                events: [],
+                isCurrentMonth: d.getMonth() === month,
+                isPast: date < today,
+                isToday: date.getTime() === today.getTime(),
+                isFuture: date > today,
+            });
+        }
+        // Populate calendar with events from allEvents array
+        this.calendarDays.forEach(day => {
+            day.events = this.allEvents.filter(event => event.date.toDateString() === day.date.toDateString());
+        });
+        this.eventSelected.emit(this.allEvents);
+        // VD 06Sep24 calendar changes
+        let calendar = {};
+        calendar['year'] = year;
+        calendar['month'] = month + 1;
+        console.log(calendar);
+        this.dateSelected.emit(calendar);
+    }
+    selectDay(day) {
+        console.log(day);
+        // VD 06Sep24 calendar changes
+        this.showAppoinmentSection = true;
+        this.selectedDay = day;
+        // this.eventSelected.emit(day?.events);
+        const previouslySelectedDay = this.calendarDays.find(d => d.isSelected);
+        if (previouslySelectedDay) {
+            previouslySelectedDay.isSelected = false;
+        }
+        // Select the clicked day
+        day.isSelected = true;
+    }
+    previousMonth() {
+        this.showAppoinmentSection = false;
+        this.currentDate.setMonth(this.currentDate.getMonth() - 1);
+        this.currentDate = new Date(this.currentDate); // Ensure the date object is updated
+        this.generateCalendar();
+    }
+    nextMonth() {
+        // VD 06Sep24 calendar changes
+        this.showAppoinmentSection = false;
+        this.currentDate.setMonth(this.currentDate.getMonth() + 1);
+        this.currentDate = new Date(this.currentDate); // Ensure the date object is updated
+        this.generateCalendar();
+    }
+    addAppointment() {
+        this.isModalOpen = true;
+        this.calendarQuestion = this.referenceQuestions.map(q => ({ ...q, input: '' }));
+        this.referenceQuestions.forEach(ques => {
+            // clear the input
+            if (ques.Type__c == 'Dropdown') {
+                delete ques.input;
+                delete ques.selectedValue;
+                // VD 06Sep24 calendar changes
+            }
+            else {
+                delete ques.input;
+            }
+        });
+        console.log(' console.log(this.referenceQuestions);');
+        console.log(this.referenceQuestions);
+        this.editingEventId = null;
+    }
+    // VD 06Sep24 calendar changes
+    editEvent(event, entryGroup) {
+        this.isModalOpen = true;
+        this.referenceQuestions = Object.values(entryGroup);
+        this.calendarQuestion = [...this.referenceQuestions]; // Make a copy of the current entries to edit
+        this.editingEventId = event.id;
+        this.editingEntryGroup = entryGroup; // Store the entry group being edited
+        this.generateCalendar(); // Regenerate the calendar to reflect changes
+    }
+    deleteEvent(eventId, entryGroup) {
+        const event = this.allEvents.find(e => e.id === eventId);
+        if (event) {
+            // Find the index of the entryGroup to delete
+            const entryIndex = event.entries.indexOf(entryGroup);
+            if (entryIndex > -1) {
+                event.entries.splice(entryIndex, 1); // Remove the specific entry
+            }
+            // If the event has no more entries, remove the event entirely
+            if (event.entries.length === 0) {
+                const eventIndex = this.allEvents.indexOf(event);
+                if (eventIndex > -1) {
+                    this.allEvents.splice(eventIndex, 1); // Remove the entire event
+                }
+            }
+        }
+        this.generateCalendar(); // Regenerate the calendar to reflect the changes
+    }
+    closeModal() {
+        this.isModalOpen = false;
+    }
+    // VD 06Sep24 calendar changes
+    addEvent(day, entryQues) {
+        // Transform new entries into the desired format
+        const newEntries = entryQues.reduce((acc, q) => {
+            acc[q.Id] = { ...q };
+            return acc;
+        }, {});
+        // Find an existing event for the given date
+        const existingEvent = day.events.find(event => event.date === day.date);
+        if (existingEvent) {
+            // Merge new entries into the existing event's entries array
+            // Check if the entries array already contains an object with the same ID
+            const existingEntries = existingEvent.entries.map(entry => ({ ...entry }));
+            // Append new entries to the existing entries
+            existingEntries.push(newEntries);
+            existingEvent.entries = existingEntries;
+        }
+        else {
+            // Create a new event if it doesn't exist for the given date
+            const newEvent = {
+                id: this.generateId(),
+                date: day.date,
+                entries: [newEntries] // Wrap the new entries in an array
+            };
+            day.events.push(newEvent);
+            this.allEvents.push(newEvent);
+        }
+        this.generateCalendar();
+        console.log('allEvents', this.allEvents);
+    }
+    // VD 06Sep24 calendar changes
+    onSave() {
+        if (this.editingEventId !== null) {
+            const event = this.allEvents.find(e => e.id === this.editingEventId);
+            if (event && this.editingEntryGroup) {
+                // Update the specific entry group within the event
+                const entryIndex = event.entries.findIndex(entryGroup => entryGroup === this.editingEntryGroup);
+                if (entryIndex > -1) {
+                    event.entries[entryIndex] = this.calendarQuestion.reduce((acc, q) => {
+                        acc[q.Id] = { ...q };
+                        return acc;
+                    }, {});
+                }
+            }
+        }
+        else {
+            if (this.selectedDay) {
+                this.addEvent(this.selectedDay, this.calendarQuestion);
+            }
+        }
+        this.closeModal();
+        this.generateCalendar();
+    }
+    onCancel() {
+        console.log('Cancel button clicked');
+        this.closeModal();
+    }
+    handleQuestionEvent(ques) {
+        // Update the questions array with the new question
+        const index = this.calendarQuestion.findIndex(q => q.Id === ques.Id);
+        if (index > -1) {
+            // If question already exists, update it
+            this.calendarQuestion[index] = ques;
+        }
+        else {
+            // If question doesn't exist, add it to the array
+            this.calendarQuestion.push(ques);
+        }
+        console.log('calender question');
+        console.log(this.calendarQuestion);
+    }
+    // VD 06Sep24 calendar changes
+    generateId() {
+        return '_' + Math.random().toString(36).substr(2, 9);
+    }
+    getEntryKeys(entryGroup) {
+        return Object.keys(entryGroup);
+    }
+    removeCharacters(questionText) {
+        let updatedText = questionText?.replace(/<[^>]*>/g, '');
+        return updatedText;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: { allEvents: "allEvents", question: "question" }, outputs: { eventSelected: "eventSelected", dateSelected: "dateSelected" }, ngImport: i0, template: "<div class=\"align-calendar\">\n    <div class=\"calendar-container\">\n      <div class=\"calendar-header\">\n          <button (click)=\"previousMonth()\"><< Previous >></button>\n          <h3>{{ currentDate | date: 'MMMM yyyy' }}</h3>\n          <button (click)=\"nextMonth()\"><< Next >></button>\n      </div>\n      <div class=\"calendar-grid\">\n          <div class=\"day-of-week\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\n\n          <div\n              class=\"calendar-day\"\n              *ngFor=\"let day of calendarDays\"\n              [class.not-current-month]=\"!day.isCurrentMonth\"\n              [class.past]=\"day.isPast\"\n              [class.today]=\"day.isToday\"\n              [class.future]=\"day.isFuture\"\n              [class.selected]=\"day.isSelected\"\n              (click)=\"selectDay(day)\"\n          >\n              <div class=\"day-number\">{{ day.date.getDate() }}\n                <span *ngIf=\"day.events.length > 0\" class=\"entry-indicator\" [class.select]=\"day.isSelected\"></span>\n              </div>\n              <!-- <div *ngFor=\"let event of day.events\" >\n                  <div *ngFor=\"let entryGroup of event.entries\" class=\"event\">\n                      <div *ngFor=\"let key of getEntryKeys(entryGroup)\">\n                          <div *ngIf=\"entryGroup[key].Type__c == 'Time'\">\n                              {{ entryGroup[key].input?.value | date: 'shortTime' }}\n                          </div>\n                          <div *ngIf=\"entryGroup[key].Type__c != 'Time'\">\n                              {{ entryGroup[key].input }}\n                          </div>\n                      </div>\n                  </div>\n              </div> -->\n          </div>\n      </div>\n  </div>\n    <div class=\"appoinappointment\">\n      <div class=\"appointments-container\">\n          <h4>Add Appointment</h4>\n          <button *ngIf=\"selectedDay\" (click)=\"addAppointment()\">Add</button>\n      </div>\n      <!--VD 06Sep24 calendar updates--> \n      <div *ngIf=\"showAppoinmentSection && selectedDay?.events.length > 0\" class=\"appointments-container\">\n          <h4>Appointments</h4>\n          <div  *ngFor=\"let event of selectedDay?.events\">\n              <div class=\"event\" *ngFor=\"let entryGroup of event.entries\">\n                    <div class=\"event-info\">\n                      <div *ngFor=\"let key of getEntryKeys(entryGroup)\" class=\"entry-row\">\n                        <div *ngIf=\"entryGroup[key].Question_Text__c\" class=\"entry-text\">\n                            {{removeCharacters(entryGroup[key].Question_Text__c)}}:\n                        </div>\n                        <div class=\"entry-value\">\n                            <span *ngIf=\"entryGroup[key].Type__c != 'Time' && entryGroup[key].Type__c != 'Link'\">{{ entryGroup[key].input }}</span>\n                            <span *ngIf=\"entryGroup[key].Type__c == 'Time'\">{{ entryGroup[key].input | date: 'shortTime' }}</span>\n                            <span *ngIf=\"entryGroup[key].Type__c == 'Link'\">\n                                <a href=\"{{entryGroup[key].input}}\">{{removeCharacters(entryGroup[key].Question_Text__c)}}</a>\n                            </span>\n                        </div>\n                    </div>\n                      <div class=\"event-actions\">\n                        <button (click)=\"editEvent(event,entryGroup)\">Edit</button>\n                        <button (click)=\"deleteEvent(event.id,entryGroup)\">Delete</button>\n                     </div>\n                  </div>\n              </div>\n          </div>\n      </div>\n  </div>\n</div>\n\n<app-custom-model\n  [modalTitle]=\"modalTitle\"\n  [isModalOpen]=\"isModalOpen\"\n  [modalSize]=\"modalSize\"\n  [saveButtonValue]=\"saveButtonValue\"\n  [modalFooter]=\"modalFooter\"\n  (saveButtonEmit)=\"onSave()\"\n  (cancelButtonEmit)=\"onCancel()\"\n>\n<lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n</app-custom-model>\n\n\n  \n  \n  ", styles: [".calendar-container{flex:1}.appoinappointment{flex:1;margin-left:10px}.calendar-header{display:flex;justify-content:space-between;align-items:center}.selected{box-shadow:0 0 5px #00000080;background-color:green!important;color:#fff!important}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.day-of-week{text-align:center;font-weight:700;padding:5px;background-color:#f0f0f0;border:1px solid #ccc}.calendar-day{border:1px solid #ccc;padding:5px;display:flex;flex-direction:column;align-items:flex-start;background-color:#fff;position:relative;cursor:pointer}.calendar-day.not-current-month{background-color:#f0f0f0}.calendar-day.past{color:#aaa}.calendar-day.today{background-color:#e6ffe6;font-weight:700}.calendar-day.future{color:#000}.day-number{font-size:1.2em;margin-bottom:5px}.event{background-color:#d1e7dd;border-left:4px solid #0f5132;margin:5px 0;padding:2px 5px;border-radius:3px}.event-title{font-weight:700}.event-time{font-size:.8em}input[type=text],input[type=time]{width:100%;margin-top:5px;box-sizing:border-box}button{margin-top:5px;align-self:stretch;margin-left:0!important}.calendar-header button{margin-top:5px;align-self:stretch;margin-left:0!important;border:none;background:none}.align-calendar{display:flex;width:100%}.form-group.content-box{padding-bottom:0!important}.entry-indicator{position:absolute;top:5px;right:5px;width:10px;height:10px;background-color:#0f5132;border-radius:50%}.select{background-color:#fff}.entry-row{display:flex;align-items:center;margin-bottom:5px}.entry-text{font-weight:700;margin-right:10px;white-space:nowrap}.entry-value{flex:1;word-break:break-word}.entry-value a{color:#4caf50}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-custom-calendar', template: "<div class=\"align-calendar\">\n    <div class=\"calendar-container\">\n      <div class=\"calendar-header\">\n          <button (click)=\"previousMonth()\"><< Previous >></button>\n          <h3>{{ currentDate | date: 'MMMM yyyy' }}</h3>\n          <button (click)=\"nextMonth()\"><< Next >></button>\n      </div>\n      <div class=\"calendar-grid\">\n          <div class=\"day-of-week\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\n\n          <div\n              class=\"calendar-day\"\n              *ngFor=\"let day of calendarDays\"\n              [class.not-current-month]=\"!day.isCurrentMonth\"\n              [class.past]=\"day.isPast\"\n              [class.today]=\"day.isToday\"\n              [class.future]=\"day.isFuture\"\n              [class.selected]=\"day.isSelected\"\n              (click)=\"selectDay(day)\"\n          >\n              <div class=\"day-number\">{{ day.date.getDate() }}\n                <span *ngIf=\"day.events.length > 0\" class=\"entry-indicator\" [class.select]=\"day.isSelected\"></span>\n              </div>\n              <!-- <div *ngFor=\"let event of day.events\" >\n                  <div *ngFor=\"let entryGroup of event.entries\" class=\"event\">\n                      <div *ngFor=\"let key of getEntryKeys(entryGroup)\">\n                          <div *ngIf=\"entryGroup[key].Type__c == 'Time'\">\n                              {{ entryGroup[key].input?.value | date: 'shortTime' }}\n                          </div>\n                          <div *ngIf=\"entryGroup[key].Type__c != 'Time'\">\n                              {{ entryGroup[key].input }}\n                          </div>\n                      </div>\n                  </div>\n              </div> -->\n          </div>\n      </div>\n  </div>\n    <div class=\"appoinappointment\">\n      <div class=\"appointments-container\">\n          <h4>Add Appointment</h4>\n          <button *ngIf=\"selectedDay\" (click)=\"addAppointment()\">Add</button>\n      </div>\n      <!--VD 06Sep24 calendar updates--> \n      <div *ngIf=\"showAppoinmentSection && selectedDay?.events.length > 0\" class=\"appointments-container\">\n          <h4>Appointments</h4>\n          <div  *ngFor=\"let event of selectedDay?.events\">\n              <div class=\"event\" *ngFor=\"let entryGroup of event.entries\">\n                    <div class=\"event-info\">\n                      <div *ngFor=\"let key of getEntryKeys(entryGroup)\" class=\"entry-row\">\n                        <div *ngIf=\"entryGroup[key].Question_Text__c\" class=\"entry-text\">\n                            {{removeCharacters(entryGroup[key].Question_Text__c)}}:\n                        </div>\n                        <div class=\"entry-value\">\n                            <span *ngIf=\"entryGroup[key].Type__c != 'Time' && entryGroup[key].Type__c != 'Link'\">{{ entryGroup[key].input }}</span>\n                            <span *ngIf=\"entryGroup[key].Type__c == 'Time'\">{{ entryGroup[key].input | date: 'shortTime' }}</span>\n                            <span *ngIf=\"entryGroup[key].Type__c == 'Link'\">\n                                <a href=\"{{entryGroup[key].input}}\">{{removeCharacters(entryGroup[key].Question_Text__c)}}</a>\n                            </span>\n                        </div>\n                    </div>\n                      <div class=\"event-actions\">\n                        <button (click)=\"editEvent(event,entryGroup)\">Edit</button>\n                        <button (click)=\"deleteEvent(event.id,entryGroup)\">Delete</button>\n                     </div>\n                  </div>\n              </div>\n          </div>\n      </div>\n  </div>\n</div>\n\n<app-custom-model\n  [modalTitle]=\"modalTitle\"\n  [isModalOpen]=\"isModalOpen\"\n  [modalSize]=\"modalSize\"\n  [saveButtonValue]=\"saveButtonValue\"\n  [modalFooter]=\"modalFooter\"\n  (saveButtonEmit)=\"onSave()\"\n  (cancelButtonEmit)=\"onCancel()\"\n>\n<lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n</app-custom-model>\n\n\n  \n  \n  ", styles: [".calendar-container{flex:1}.appoinappointment{flex:1;margin-left:10px}.calendar-header{display:flex;justify-content:space-between;align-items:center}.selected{box-shadow:0 0 5px #00000080;background-color:green!important;color:#fff!important}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.day-of-week{text-align:center;font-weight:700;padding:5px;background-color:#f0f0f0;border:1px solid #ccc}.calendar-day{border:1px solid #ccc;padding:5px;display:flex;flex-direction:column;align-items:flex-start;background-color:#fff;position:relative;cursor:pointer}.calendar-day.not-current-month{background-color:#f0f0f0}.calendar-day.past{color:#aaa}.calendar-day.today{background-color:#e6ffe6;font-weight:700}.calendar-day.future{color:#000}.day-number{font-size:1.2em;margin-bottom:5px}.event{background-color:#d1e7dd;border-left:4px solid #0f5132;margin:5px 0;padding:2px 5px;border-radius:3px}.event-title{font-weight:700}.event-time{font-size:.8em}input[type=text],input[type=time]{width:100%;margin-top:5px;box-sizing:border-box}button{margin-top:5px;align-self:stretch;margin-left:0!important}.calendar-header button{margin-top:5px;align-self:stretch;margin-left:0!important;border:none;background:none}.align-calendar{display:flex;width:100%}.form-group.content-box{padding-bottom:0!important}.entry-indicator{position:absolute;top:5px;right:5px;width:10px;height:10px;background-color:#0f5132;border-radius:50%}.select{background-color:#fff}.entry-row{display:flex;align-items:center;margin-bottom:5px}.entry-text{font-weight:700;margin-right:10px;white-space:nowrap}.entry-value{flex:1;word-break:break-word}.entry-value a{color:#4caf50}\n"] }]
+        }], propDecorators: { eventSelected: [{
+                type: Output
+            }], dateSelected: [{
+                type: Output
+            }], allEvents: [{
+                type: Input
+            }], question: [{
+                type: Input
+            }] } });
+
 class LoaderComponent {
     loaderService;
     isLoading = false;
@@ -6327,6 +6501,7 @@ class NxtAppModule {
             ReactiveFormsModule, NgxSpinnerModule, I18nModule, i13.NgCircleProgressModule], exports: [NxtAppComponent,
             QuestionnaireComponent,
             BookletComponent,
+            QuestionbookComponent,
             SummaryPageComponent,
             I18nPipe,
             I18nComponent] });
@@ -6555,6 +6730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     exports: [NxtAppComponent,
                         QuestionnaireComponent,
                         BookletComponent,
+                        QuestionbookComponent,
                         SummaryPageComponent,
                         I18nPipe,
                         I18nComponent,
@@ -6578,5 +6754,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BookletComponent, I18nComponent, I18nPipe, NxtAppComponent, NxtAppModule, NxtAppService, QuestionnaireComponent, SalesforceService, SummaryPageComponent };
+export { BookletComponent, I18nComponent, I18nPipe, NxtAppComponent, NxtAppModule, NxtAppService, QuestionbookComponent, QuestionnaireComponent, SalesforceService, SummaryPageComponent };
 //# sourceMappingURL=rangertechnologies-ngnxt.mjs.map