@rangertechnologies/ngnxt 2.1.49 → 2.1.50

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Optional, InjectionToken, EventEmitter, Inject, Output, Pipe, ViewChild, Input, ViewEncapsulation, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Injectable, Component, Optional, InjectionToken, EventEmitter, Inject, Output, Pipe, ViewChild, Input, ViewEncapsulation, Directive, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as moment from 'moment';
 import { Subject, BehaviorSubject } from 'rxjs';
 import * as i1 from '@angular/router';
@@ -23,9 +23,9 @@ import * as i4$1 from 'ng-pick-datetime';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
 import * as i6 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import * as i8 from '@angular/material/tooltip';
+import * as i9$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i9$1 from '@angular/cdk/bidi';
+import * as i10 from '@angular/cdk/bidi';
 
 class NxtAppService {
     constructor() { }
@@ -4254,555 +4254,892 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-class SearchBoxComponent {
-    sfService;
-    dataService;
-    route;
-    i18nService;
-    placeHolderText;
-    auto;
-    question;
-    apiMeta;
-    id;
-    readOnly = false; // VD 12Jun24 - readonly change
-    searchValueChange = new EventEmitter();
-    apiObj;
-    SearchItem;
-    filterName; // VD 20Aug default filter value as input
-    finalResults = [];
-    searchKeyWord = '';
-    newResult;
-    showResult = false;
-    noResult = false;
-    showSuggestion = true;
-    el;
-    serv = 'api';
-    tkn = '';
-    constructor(sfService, dataService, route, el, i18nService) {
-        this.sfService = sfService;
-        this.dataService = dataService;
-        this.route = route;
-        this.i18nService = i18nService;
+// VD 06-09-24 directive file to call component dynamically 
+class ComponenthostDirective {
+    viewContainerRef;
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ComponenthostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ComponenthostDirective, isStandalone: true, selector: "[dynamicComponentHost]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ComponenthostDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dynamicComponentHost]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+
+class CustomModelComponent {
+    constructor() { }
+    modalTitle;
+    isModalOpen = false;
+    modalSize = '';
+    saveButtonValue = 'Save';
+    modalFooter = true;
+    saveButtonEmit = new EventEmitter();
+    cancelButtonEmit = new EventEmitter();
+    onSave() {
+        this.saveButtonEmit.emit();
     }
-    ngOnInit() {
-        //  VD 03May- search changes
-        if (this.apiMeta) {
-            let apiObj = JSON.parse(this.apiMeta);
-            this.SearchItem = apiObj.field;
-        }
+    onCancel() {
+        this.cancelButtonEmit.emit();
     }
-    clearList() {
-        setTimeout(() => {
-            this.finalResults = [];
-        }, 1000);
+    ngOnInit() {
     }
-    getSourceDataLocal(event) {
-        if (event.target.value.length > 2) {
-            this.showSuggestion = true;
-            this.finalResults = [];
-            this.searchKeyWord = event.target.value;
-            this.showResult = false;
-            this.getSourceData(event.target.value);
-        }
-        else {
-            this.showSuggestion = false;
-            this.finalResults = [];
-            this.noResult = false;
-        }
+    closeModal() {
+        this.cancelButtonEmit.emit(false);
     }
-    // VD 03May- search changes
-    getSourceData = (keyword) => {
-        if (this.apiMeta !== undefined) {
-            let apiObj = JSON.parse(this.apiMeta);
-            this.dataService.apiResponse(apiObj.endpoint).subscribe((apiResponse) => {
-                let response;
-                if (apiObj.variable) {
-                    // VD 22May24 - handling multiple child objects
-                    response = this.dataService.getValue(apiResponse, apiObj.variable);
-                }
-                else {
-                    response = apiResponse;
-                }
-                let field = apiObj.field;
-                let results = [];
-                for (let i = 0; i < response.length; i++) { // VD NOV23 - updated the search keys
-                    // VD 26JUN24 - handling multiple objects
-                    const objValue = this.dataService.getValue(response[i], field);
-                    if (objValue?.toLowerCase().includes(keyword?.toLowerCase())) {
-                        console.log('pushing ' + objValue);
-                        results.push(response[i]);
-                    }
-                }
-                this.noResult = !(results.length > 1);
-                this.finalResults = results;
-            });
-        }
-    };
-    clickItem(event) {
-        // console.log('inside clickItem of ' + event.target.value);
-        let apiObj = JSON.parse(this.apiMeta);
-        this.filterName = event[apiObj.field];
-        let change = new ChangeWrapper(); // ChangeWrapper = JSON.parse('{}');
-        change.fromQuestionId = this.id;
-        change.valueObj = event;
-        change.field = apiObj.field;
-        this.searchValueChange.emit(change);
+    saveModal() {
+        this.saveButtonEmit.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchBoxComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: i1.ActivatedRoute }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SearchBoxComponent, selector: "lib-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly", filterName: "filterName" }, outputs: { searchValueChange: "searchValueChange" }, viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\n<div id=\"autocomplete-input\">\n    <input #auto id=\"searchbox-style\"\n            (blur)=\"clearList()\" \n            [(ngModel)]=\"filterName\" \n            type=\"text\" \n            name=\"name\" \n            [readOnly]=\"readOnly\"\n            [placeholder]=\"placeHolderText\" \n            style=\"margin: 0 !important;\" \n            class=\"searchInput she-line-input form-control\" \n            (focusin)=\"getSourceDataLocal($event)\" \n            (input)=\"getSourceDataLocal($event)\">\n    <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\n    <div *ngIf=\"finalResults.length > 0 && showSuggestion\" \n        style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\" \n        class=\"suggestions-container\">\n        <!-- HA 20DEC23 Uncommented the logic -->\n         <!-- VD 03May- search changes -->\n        <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\n          <!-- VD 26Jun24 - id condition removed -->\n            <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\n                <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\n                    <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\n                </div>\n                <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\n                  <!--// VD 26JUN24 - pipe changes -->\n                    <h4 >{{ '' | getValue: item : SearchItem  }}</h4>\n                </div>\n            </div>\n        </div>\n        <!-- HA 20DEC23 For Commented this for future purpose -->\n        <!-- <table class=\"table table-striped table-bordered\">\n            <thead>\n              <tr>\n                <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\n                <td>{{ item.firstName }}</td>\n                <td>{{ item.lastName }}</td>\n                <td>{{ item.division }}</td>\n                <td>{{ item.numberPlate }}</td>\n              </tr>\n            </tbody>\n          </table> -->\n    </div>\n</div>\n", styles: [""], 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: "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 ɵ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: SearchBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomModelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-search-box', template: "<!-- // VD 12Jun24 - readonly change-->\n<div id=\"autocomplete-input\">\n    <input #auto id=\"searchbox-style\"\n            (blur)=\"clearList()\" \n            [(ngModel)]=\"filterName\" \n            type=\"text\" \n            name=\"name\" \n            [readOnly]=\"readOnly\"\n            [placeholder]=\"placeHolderText\" \n            style=\"margin: 0 !important;\" \n            class=\"searchInput she-line-input form-control\" \n            (focusin)=\"getSourceDataLocal($event)\" \n            (input)=\"getSourceDataLocal($event)\">\n    <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\n    <div *ngIf=\"finalResults.length > 0 && showSuggestion\" \n        style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\" \n        class=\"suggestions-container\">\n        <!-- HA 20DEC23 Uncommented the logic -->\n         <!-- VD 03May- search changes -->\n        <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\n          <!-- VD 26Jun24 - id condition removed -->\n            <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\n                <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\n                    <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\n                </div>\n                <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\n                  <!--// VD 26JUN24 - pipe changes -->\n                    <h4 >{{ '' | getValue: item : SearchItem  }}</h4>\n                </div>\n            </div>\n        </div>\n        <!-- HA 20DEC23 For Commented this for future purpose -->\n        <!-- <table class=\"table table-striped table-bordered\">\n            <thead>\n              <tr>\n                <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\n                <td>{{ item.firstName }}</td>\n                <td>{{ item.lastName }}</td>\n                <td>{{ item.division }}</td>\n                <td>{{ item.numberPlate }}</td>\n              </tr>\n            </tbody>\n          </table> -->\n    </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: i1.ActivatedRoute }, { type: i0.ElementRef }, { type: I18nService }]; }, propDecorators: { placeHolderText: [{
+            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
-            }], auto: [{
-                type: ViewChild,
-                args: ['auto']
-            }], question: [{
+            }], isModalOpen: [{
                 type: Input
-            }], apiMeta: [{
+            }], modalSize: [{
                 type: Input
-            }], id: [{
+            }], saveButtonValue: [{
                 type: Input
-            }], readOnly: [{
+            }], modalFooter: [{
                 type: Input
-            }], searchValueChange: [{
+            }], saveButtonEmit: [{
+                type: Output
+            }], cancelButtonEmit: [{
                 type: Output
-            }], filterName: [{
-                type: Input
             }] } });
 
-class FileUploadComponent {
-    SharedService;
-    dataService;
-    sanitizer;
-    i18nService;
-    selectedFileData = new EventEmitter();
-    deletedFileData = new EventEmitter();
-    allFiles;
-    limitFileUploading;
-    isDeleteFileButtonVisible;
-    isShowNoFileIcon;
-    tableFile; // file Upload from table
+class CustomCalendarComponent {
+    eventSelected = new EventEmitter();
+    // VD 06Sep24 calendar changes
+    dateSelected = new EventEmitter();
+    allEvents = [];
     question;
-    error;
-    selectedFileNameArray = [];
-    copyOfInputAllFiles;
-    copyOfFileUploadingLimit;
-    fileUrl;
-    showFile = false;
-    isImage = false;
-    fileName = '';
-    currentFile;
-    constructor(SharedService, dataService, sanitizer, i18nService) {
-        this.SharedService = SharedService;
-        this.dataService = dataService;
-        this.sanitizer = sanitizer;
-        this.i18nService = i18nService;
+    dynamicHost;
+    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();
     }
-    ngOnInit() { }
-    // VD 03May24 file upload fix
-    // onFileUpload(event: any) {
-    //   const fileUploaderElement: HTMLElement = document.getElementById(
-    //     'fileUpload'
-    //   ) as HTMLElement;
-    //   fileUploaderElement.click();
-    // }
-    ngOnChanges(simpleChanges) {
-        console.log('simple changes', simpleChanges);
-        this.copyOfInputAllFiles = simpleChanges.allFiles?.currentValue;
-        if (simpleChanges.limitFileUploading) {
-            this.copyOfFileUploadingLimit = simpleChanges.limitFileUploading?.currentValue;
+    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);
     }
-    uploadMultipleFiles(event) {
-        console.log('File uploader initiated');
-        let inputFiles = this.copyOfInputAllFiles ? this.copyOfInputAllFiles : [];
-        const selectedFileData = [];
-        const uploadedFiles = event.target.files;
-        if (uploadedFiles.length + inputFiles.length <= this.copyOfFileUploadingLimit) {
-            const readFilesPromises = [];
-            for (const eachUploadedFile of uploadedFiles) {
-                const file = eachUploadedFile;
-                const format = file.name.split('.')[1];
-                // Create a promise for each file read
-                const fileReadPromise = new Promise((resolve, reject) => {
-                    const reader = new FileReader();
-                    reader.readAsDataURL(file);
-                    reader.onload = () => {
-                        const fileData = {
-                            doc: reader.result,
-                            name: file.name,
-                            type: file.type,
-                            format,
-                            id: null,
-                        };
-                        selectedFileData.push(fileData);
-                        inputFiles.push(fileData);
-                        resolve();
-                    };
-                    reader.onerror = () => {
-                        reject();
-                    };
-                });
-                readFilesPromises.push(fileReadPromise);
-            }
-            // Wait for all promises to resolve
-            Promise.all(readFilesPromises).then(() => {
-                this.copyOfInputAllFiles = inputFiles;
-                console.log('uploadedFiles', inputFiles);
-                this.selectedFileData.emit(inputFiles);
-            }).catch(() => {
-                console.error('Error reading files');
+    // VD 06-09-24 to call the quetionbook component
+    openQuestionBookModal() {
+        const viewContainerRef = this.dynamicHost.viewContainerRef;
+        viewContainerRef.clear();
+        const componentRef = viewContainerRef.createComponent(QuestionbookComponent);
+        componentRef.instance.qbItem = this.qbRefrenceBook;
+        componentRef.instance.questions = this.referenceQuestions;
+        componentRef.instance.handleQuestion.subscribe((event) => this.handleQuestionEvent(event));
+    }
+    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,
             });
         }
-        else {
-            console.warn('You can upload max 5 files');
-            // this.toastr.warning(TOASTER_MESSAGES.MAX_FIVE_FILES, TOASTER_MESSAGES.WARNING_TITLE);
+        // 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;
         }
-        event.target.value = '';
+        // Select the clicked day
+        day.isSelected = true;
     }
-    // uploadMultipleFiles(event: any) {
-    //   console.log('File uploader initiated');
-    //   let inputFiles: any[] = this.copyOfInputAllFiles ? this.copyOfInputAllFiles : [];
-    //   const selectedFileData = [];
-    //   const uploadedFiles = event.target.files;
-    //   if (uploadedFiles.length + inputFiles.length <= this.copyOfFileUploadingLimit) {
-    //     for (const eachUploadedFile of uploadedFiles) {
-    //       const reader = new FileReader();
-    //       const file: File = eachUploadedFile;
-    //       const format = file.name.split('.')[1];
-    //       reader.readAsDataURL(file);
-    //       reader.onload = () => {
-    //         selectedFileData.push({
-    //           doc: reader.result,
-    //           name: file.name,
-    //           type: file.type,
-    //           format,
-    //           id: null,
-    //         });
-    //         inputFiles.push({
-    //           doc: reader.result,
-    //           name: file.name,
-    //           type: file.type,
-    //           format,
-    //           id: null,
-    //         });
-    //       };
-    //     }
-    //   } else {
-    //     console.warn('You can upload max 5 files');
-    //     //this.toastr.warning(TOASTER_MESSAGES.MAX_FIVE_FILES, TOASTER_MESSAGES.WARNING_TITLE);
-    //   }
-    //   event.target.value = '';
-    //   this.copyOfInputAllFiles = inputFiles;
-    //   console.log('uploadedFiles',inputFiles);
-    //   this.selectedFileData.emit(inputFiles);
-    // }
-    deleteFile(currentFileIndex) {
-        const deletedFileName = this.selectedFileNameArray.splice(currentFileIndex, 1);
-        const deletedFile = this.copyOfInputAllFiles.splice(currentFileIndex, 1);
-        console.log('emit', deletedFile[0]);
-        this.deletedFileData.emit(deletedFile[0]);
-        this.selectedFileData.emit(this.copyOfInputAllFiles);
+    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();
     }
-    // VD 20May24 - preview changes
-    viewFile(currentFile) {
-        this.currentFile = currentFile;
-        this.showFile = true;
-        console.log(currentFile);
-        if (this.question.Sub_Text__c != undefined) {
-            let fileMeta = JSON.parse(this.question.Sub_Text__c);
-            let endpoint = fileMeta.endpoint;
-            let queryParameter = fileMeta.queryParameter;
-            let file = currentFile;
-            if (endpoint) {
-                const fullEndPoint = endpoint + '?' + queryParameter + '=' + file[queryParameter];
-                if (fullEndPoint) {
-                    this.dataService.apiResponse(fullEndPoint).subscribe((apiResponse) => {
-                        if (apiResponse) {
-                            this.handleFileContent(apiResponse);
-                        }
-                    });
+    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;
+        // Dynamically load the QuestionBookComponent
+        this.openQuestionBookModal();
+    }
+    // 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 {
-            this.viewLocalFile();
+            // 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 03Aug24 process local preview 
-    viewLocalFile() {
-        if (this.currentFile) {
-            this.setFileUrl(this.currentFile?.doc);
-            this.fileName = this.currentFile.name;
-            this.isImage = this.currentFile.type.startsWith('image/');
+    // 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;
+                    }, {});
+                }
+            }
         }
-    }
-    handleFileContent(fileResponse) {
-        const byteArray = new Uint8Array(fileResponse.content.data);
-        const blob = new Blob([byteArray], { type: fileResponse.type });
-        const url = window.URL.createObjectURL(blob);
-        this.setFileUrl(url);
-        this.isImage = false;
-        if (fileResponse.name) {
-            this.fileName = fileResponse.name;
-            const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
-            const fileExtension = fileResponse.name.split('.').pop()?.toLowerCase();
-            this.isImage = imageExtensions.includes(fileExtension || '');
+        else {
+            if (this.selectedDay) {
+                this.addEvent(this.selectedDay, this.calendarQuestion);
+            }
         }
+        this.closeModal();
+        this.generateCalendar();
     }
-    setFileUrl(url) {
-        this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
-    }
-    getDocIcon(docName) {
-        const ext = docName.split('.').pop(-1);
-        return this.SharedService.docIcon(ext);
+    onCancel() {
+        console.log('Cancel button clicked');
+        this.closeModal();
     }
-    close() {
-        this.showFile = false;
-        this.fileName = '';
-        this.fileUrl = '';
-        this.isImage = false;
-        if (this.fileUrl) {
-            URL.revokeObjectURL(this.fileUrl);
+    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);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileUploadComponent, deps: [{ token: SharedService }, { token: DataService }, { token: i6$1.DomSanitizer }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FileUploadComponent, selector: "app-file-upload", inputs: { allFiles: "allFiles", limitFileUploading: "limitFileUploading", isDeleteFileButtonVisible: "isDeleteFileButtonVisible", isShowNoFileIcon: "isShowNoFileIcon", tableFile: "tableFile", question: "question", error: "error" }, outputs: { selectedFileData: "selectedFileData", deletedFileData: "deletedFileData" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" style=\"margin: 0;\">\n  <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\n    <!-- HA 19DEC23 For translation -->\n    <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n  </div>\n  <div class=\"col-lg-5 document-cnt m-t-10 m-b-10\"\n    *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\n     <div *ngIf=\"!tableFile\"> <!-- (click)=\"viewFile(eachFile)\"  -->\n      <div class=\"col-lg-3 document_image\">\n        <img [src]=\"getDocIcon(eachFile?.name)\">\n    </div>\n      <div class=\"col-lg-9 document_name\">\n        {{eachFile?.name}}\n      </div>\n      <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\n      </div>\n      <!-- VD 20May24 - preview changes-->\n      <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\n      </div>\n    </div>\n    <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\n      <div class=\"col-lg-3 document_image\">\n          <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n      </div>\n      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n          {{eachFile?.name}}\n      </div>\n  </div>\n  </div>\n  <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\n    <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n  </div>\n</div>\n\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\n  <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\n    <!-- HA 19DEC23 For translation -->\n    <!-- VD 03May24 file upload fix-->\n    <button [class]=\"error ? 'she-btn-primary-bordered Invalid' : 'she-btn-primary-bordered'\" style=\"width:275px;\" (click)=\"fileInput.click()\"\n    [ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= copyOfFileUploadingLimit }\" [disabled]=\"copyOfInputAllFiles?.length >= copyOfFileUploadingLimit\"\n    >Choose Files</button>\n\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\" accept=\"*\" style=\"display:none;\"\n    (change) = uploadMultipleFiles($event)\n    />\n  </label>\n<!-- HA 19DEC23 For translation -->\n  <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\n    {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\n    <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\n  </label>\n  <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched ||        formControl?.documents?.dirty) &&\n  formControl?.documents?.errors?.required\">\n    {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\n  </span> -->\n</div>\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.Error_Message__c}}</div>\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\n  <div class=\"nxt-file-map-modal\">\n    <div class=\"nxt-file-model-content\">\n      <div class=\"nxt-file-model-header\">\n        <h4>{{fileName}}</h4>\n        <button class=\"close-button\" (click)=\"close()\">X</button>\n      </div>\n      <ng-container *ngIf=\"isImage; else otherFile\">\n        <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\n      </ng-container>\n      <ng-template #otherFile>\n        <iframe [src]=\"fileUrl\" width=\"100%\" height=\"500px\"></iframe>\n      </ng-template>\n    </div>\n  </div>\n</div>\n\n\n", styles: [".document-cnt{padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f9f9f9;margin-bottom:10px;cursor:pointer;transition:background-color .3s ease;position:relative}.document-cnt:hover{background-color:#e9ecef}.document_image img{width:30px;height:30px}.document_name{font-size:14px;font-weight:700;color:#333;line-height:30px}.label{margin-bottom:0}.document_delete img,.preview-icon img{width:20px;height:20px;cursor:pointer;transition:transform .3s ease}.document_delete img{filter:brightness(0) saturate(100%) invert(20%) sepia(97%) saturate(7481%) hue-rotate(357deg) brightness(98%) contrast(119%)}.document_delete img:hover,.preview-icon img:hover{transform:scale(1.1)}.document_delete,.preview-icon{position:absolute;top:50%;transform:translateY(-50%)}.document_delete{right:10px}.preview-icon{right:40px}@media (min-width: 992px){.document-cnt{margin-left:10px}}.btn-disabled{background:#e1e1e1;color:#fff;border:none;border-radius:5px;height:50px}.form-control[disabled]{border-radius:5px}.custom-file{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;width:auto;margin-bottom:5px}.she-btn-primary-bordered{background:#ffffff;color:#48b7ff;border:1px solid #48B7FF;border-radius:5px;height:50px;outline:none!important}.btn-primary{background-color:#03a9f4!important;border:1px solid #03a9f4!important;color:#fff!important}.btn.btn-primary{border-radius:2px;padding:6px 14px;font-size:14px}.nxt-file-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.nxt-file-map-modal{background-color:#fff;border-radius:8px;overflow:hidden;width:80%;max-width:800px;max-height:90%;display:flex;flex-direction:column}.nxt-file-model-content{display:flex;flex-direction:column;height:100%}.nxt-file-model-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:#f5f5f5;border-bottom:1px solid #ddd}.nxt-file-model-header h4{margin:0;font-size:1.25em}.close-button{background:none;border:none;font-size:1.5em;cursor:pointer}.img-fluid{max-width:100%;height:auto;flex:1}iframe{border:none}.Invalid{border:1px solid red!important}\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: "pipe", type: I18nPipe, name: "i18n" }] });
+    // 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" }, viewQueries: [{ propertyName: "dynamicHost", first: true, predicate: ComponenthostDirective, descendants: true, static: true }], 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<!-- VD 06-09-24 used directive file to call the questionbook beacasue to avoid cirecular issue-->\n<!-- <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook> -->\n<ng-template dynamicComponentHost ></ng-template>\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: "directive", type: ComponenthostDirective, selector: "[dynamicComponentHost]" }, { 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: FileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-file-upload', template: "<div class=\"row\" style=\"margin: 0;\">\n  <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\n    <!-- HA 19DEC23 For translation -->\n    <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n  </div>\n  <div class=\"col-lg-5 document-cnt m-t-10 m-b-10\"\n    *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\n     <div *ngIf=\"!tableFile\"> <!-- (click)=\"viewFile(eachFile)\"  -->\n      <div class=\"col-lg-3 document_image\">\n        <img [src]=\"getDocIcon(eachFile?.name)\">\n    </div>\n      <div class=\"col-lg-9 document_name\">\n        {{eachFile?.name}}\n      </div>\n      <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\n      </div>\n      <!-- VD 20May24 - preview changes-->\n      <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\n      </div>\n    </div>\n    <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\n      <div class=\"col-lg-3 document_image\">\n          <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n      </div>\n      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n          {{eachFile?.name}}\n      </div>\n  </div>\n  </div>\n  <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\n    <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n  </div>\n</div>\n\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\n  <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\n    <!-- HA 19DEC23 For translation -->\n    <!-- VD 03May24 file upload fix-->\n    <button [class]=\"error ? 'she-btn-primary-bordered Invalid' : 'she-btn-primary-bordered'\" style=\"width:275px;\" (click)=\"fileInput.click()\"\n    [ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= copyOfFileUploadingLimit }\" [disabled]=\"copyOfInputAllFiles?.length >= copyOfFileUploadingLimit\"\n    >Choose Files</button>\n\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\" accept=\"*\" style=\"display:none;\"\n    (change) = uploadMultipleFiles($event)\n    />\n  </label>\n<!-- HA 19DEC23 For translation -->\n  <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\n    {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\n    <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\n  </label>\n  <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched ||        formControl?.documents?.dirty) &&\n  formControl?.documents?.errors?.required\">\n    {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\n  </span> -->\n</div>\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.Error_Message__c}}</div>\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\n  <div class=\"nxt-file-map-modal\">\n    <div class=\"nxt-file-model-content\">\n      <div class=\"nxt-file-model-header\">\n        <h4>{{fileName}}</h4>\n        <button class=\"close-button\" (click)=\"close()\">X</button>\n      </div>\n      <ng-container *ngIf=\"isImage; else otherFile\">\n        <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\n      </ng-container>\n      <ng-template #otherFile>\n        <iframe [src]=\"fileUrl\" width=\"100%\" height=\"500px\"></iframe>\n      </ng-template>\n    </div>\n  </div>\n</div>\n\n\n", styles: [".document-cnt{padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f9f9f9;margin-bottom:10px;cursor:pointer;transition:background-color .3s ease;position:relative}.document-cnt:hover{background-color:#e9ecef}.document_image img{width:30px;height:30px}.document_name{font-size:14px;font-weight:700;color:#333;line-height:30px}.label{margin-bottom:0}.document_delete img,.preview-icon img{width:20px;height:20px;cursor:pointer;transition:transform .3s ease}.document_delete img{filter:brightness(0) saturate(100%) invert(20%) sepia(97%) saturate(7481%) hue-rotate(357deg) brightness(98%) contrast(119%)}.document_delete img:hover,.preview-icon img:hover{transform:scale(1.1)}.document_delete,.preview-icon{position:absolute;top:50%;transform:translateY(-50%)}.document_delete{right:10px}.preview-icon{right:40px}@media (min-width: 992px){.document-cnt{margin-left:10px}}.btn-disabled{background:#e1e1e1;color:#fff;border:none;border-radius:5px;height:50px}.form-control[disabled]{border-radius:5px}.custom-file{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;width:auto;margin-bottom:5px}.she-btn-primary-bordered{background:#ffffff;color:#48b7ff;border:1px solid #48B7FF;border-radius:5px;height:50px;outline:none!important}.btn-primary{background-color:#03a9f4!important;border:1px solid #03a9f4!important;color:#fff!important}.btn.btn-primary{border-radius:2px;padding:6px 14px;font-size:14px}.nxt-file-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.nxt-file-map-modal{background-color:#fff;border-radius:8px;overflow:hidden;width:80%;max-width:800px;max-height:90%;display:flex;flex-direction:column}.nxt-file-model-content{display:flex;flex-direction:column;height:100%}.nxt-file-model-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:#f5f5f5;border-bottom:1px solid #ddd}.nxt-file-model-header h4{margin:0;font-size:1.25em}.close-button{background:none;border:none;font-size:1.5em;cursor:pointer}.img-fluid{max-width:100%;height:auto;flex:1}iframe{border:none}.Invalid{border:1px solid red!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: SharedService }, { type: DataService }, { type: i6$1.DomSanitizer }, { type: I18nService }]; }, propDecorators: { selectedFileData: [{
+            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<!-- VD 06-09-24 used directive file to call the questionbook beacasue to avoid cirecular issue-->\n<!-- <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook> -->\n<ng-template dynamicComponentHost ></ng-template>\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
-            }], deletedFileData: [{
+            }], dateSelected: [{
                 type: Output
-            }], allFiles: [{
-                type: Input
-            }], limitFileUploading: [{
-                type: Input
-            }], isDeleteFileButtonVisible: [{
-                type: Input
-            }], isShowNoFileIcon: [{
-                type: Input
-            }], tableFile: [{
+            }], allEvents: [{
                 type: Input
             }], question: [{
                 type: Input
-            }], error: [{
-                type: Input
+            }], dynamicHost: [{
+                type: ViewChild,
+                args: [ComponenthostDirective, { static: true }]
             }] } });
 
-class DependentTableComponent {
-    changeService;
-    alertMessage;
-    ValueLength;
-    Value;
-    errorObj;
-    constructor(changeService) {
-        this.changeService = changeService;
-        this.changeService.changeField$.subscribe((data) => {
-            this.dependentData(data);
-        });
+class SearchBoxComponent {
+    sfService;
+    dataService;
+    route;
+    i18nService;
+    placeHolderText;
+    auto;
+    question;
+    apiMeta;
+    id;
+    readOnly = false; // VD 12Jun24 - readonly change
+    searchValueChange = new EventEmitter();
+    apiObj;
+    SearchItem;
+    filterName; // VD 20Aug default filter value as input
+    finalResults = [];
+    searchKeyWord = '';
+    newResult;
+    showResult = false;
+    noResult = false;
+    showSuggestion = true;
+    el;
+    serv = 'api';
+    tkn = '';
+    constructor(sfService, dataService, route, el, i18nService) {
+        this.sfService = sfService;
+        this.dataService = dataService;
+        this.route = route;
+        this.i18nService = i18nService;
     }
     ngOnInit() {
-        this.errorObj = JSON.parse(this.alertMessage);
+        //  VD 03May- search changes
+        if (this.apiMeta) {
+            let apiObj = JSON.parse(this.apiMeta);
+            this.SearchItem = apiObj.field;
+        }
     }
-    dependentData(data) {
-        let existingData = data.Permits;
-        if (existingData.length !== 0) {
-            this.ValueLength = true;
-            this.Value = existingData;
-            $("#zoneIcon").css("border", "3px solid rgb(252, 35, 27)");
+    clearList() {
+        setTimeout(() => {
+            this.finalResults = [];
+        }, 1000);
+    }
+    getSourceDataLocal(event) {
+        if (event.target.value.length > 2) {
+            this.showSuggestion = true;
+            this.finalResults = [];
+            this.searchKeyWord = event.target.value;
+            this.showResult = false;
+            this.getSourceData(event.target.value);
         }
         else {
-            this.ValueLength = false;
-            this.Value = [];
-            $("#zoneIcon").css("border", "3px solid rgb(12, 190, 12)");
+            this.showSuggestion = false;
+            this.finalResults = [];
+            this.noResult = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DependentTableComponent, deps: [{ token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DependentTableComponent, selector: "app-dependent-table", inputs: { alertMessage: "alertMessage" }, ngImport: i0, template: "<div  class=\"dropdown\" style=\"cursor: pointer;\">\n    <span id=\"zoneIcon\">  \n      <img src=\"./../../../../../assets/images/permit_icons/zone.png\" style=\"height: 35px; margin-left: 0px;\" alt=\"adv-search\">\n    </span>\n    <div class=\"dropdown-content\" style=\"margin-left: -300px; min-width: 415px;\">\n      <div class=\"col-lg-12\">\n        <table class=\"table table-striped table-bordered\">\n          <tbody *ngIf=\"!ValueLength\">\n            <tr>\n              <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(12, 190, 12); text-align: center\">\n                <span><b>{{ errorObj.noPermits }}</b></span>\n                <span>{{ errorObj.noActive }}</span>\n              </td>\n            </tr>\n          </tbody>\n          <tbody id=\"zoneDetails\" *ngIf=\"ValueLength\">\n            <tr>\n              <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(252, 35, 27); text-align: center\">\n                <span><b>{{ errorObj.permits }} ({{Value.length}})</b></span>\n                <span>{{ errorObj.active }}</span>\n              </td>\n            </tr>\n            <tr *ngFor=\"let item of Value\" >\n              <td>\n                <span>{{item?.permit_type}}-{{item?.ref_no}} - {{item?.status}} - {{item?.end_date}}</span>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n    </div>\n    </div>\n  </div>", styles: [".dropdown{margin-top:25px;margin-left:25px}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px #0003;padding:12px 16px;z-index:1}.dropdown:hover .dropdown-content{display:block}#zoneIcon{border:3px solid #a59d9d;padding:10px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}@media (max-width: 992px){.dropdown{margin-top:15px;margin-left:0;margin-bottom:15px}}\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"] }] });
+    // VD 03May- search changes
+    getSourceData = (keyword) => {
+        if (this.apiMeta !== undefined) {
+            let apiObj = JSON.parse(this.apiMeta);
+            this.dataService.apiResponse(apiObj.endpoint).subscribe((apiResponse) => {
+                let response;
+                if (apiObj.variable) {
+                    // VD 22May24 - handling multiple child objects
+                    response = this.dataService.getValue(apiResponse, apiObj.variable);
+                }
+                else {
+                    response = apiResponse;
+                }
+                let field = apiObj.field;
+                let results = [];
+                for (let i = 0; i < response.length; i++) { // VD NOV23 - updated the search keys
+                    // VD 26JUN24 - handling multiple objects
+                    const objValue = this.dataService.getValue(response[i], field);
+                    if (objValue?.toLowerCase().includes(keyword?.toLowerCase())) {
+                        console.log('pushing ' + objValue);
+                        results.push(response[i]);
+                    }
+                }
+                this.noResult = !(results.length > 1);
+                this.finalResults = results;
+            });
+        }
+    };
+    clickItem(event) {
+        // console.log('inside clickItem of ' + event.target.value);
+        let apiObj = JSON.parse(this.apiMeta);
+        this.filterName = event[apiObj.field];
+        let change = new ChangeWrapper(); // ChangeWrapper = JSON.parse('{}');
+        change.fromQuestionId = this.id;
+        change.valueObj = event;
+        change.field = apiObj.field;
+        this.searchValueChange.emit(change);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchBoxComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: i1.ActivatedRoute }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SearchBoxComponent, selector: "lib-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly", filterName: "filterName" }, outputs: { searchValueChange: "searchValueChange" }, viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<!-- // VD 12Jun24 - readonly change-->\n<div id=\"autocomplete-input\">\n    <input #auto id=\"searchbox-style\"\n            (blur)=\"clearList()\" \n            [(ngModel)]=\"filterName\" \n            type=\"text\" \n            name=\"name\" \n            [readOnly]=\"readOnly\"\n            [placeholder]=\"placeHolderText\" \n            style=\"margin: 0 !important;\" \n            class=\"searchInput she-line-input form-control\" \n            (focusin)=\"getSourceDataLocal($event)\" \n            (input)=\"getSourceDataLocal($event)\">\n    <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\n    <div *ngIf=\"finalResults.length > 0 && showSuggestion\" \n        style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\" \n        class=\"suggestions-container\">\n        <!-- HA 20DEC23 Uncommented the logic -->\n         <!-- VD 03May- search changes -->\n        <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\n          <!-- VD 26Jun24 - id condition removed -->\n            <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\n                <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\n                    <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\n                </div>\n                <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\n                  <!--// VD 26JUN24 - pipe changes -->\n                    <h4 >{{ '' | getValue: item : SearchItem  }}</h4>\n                </div>\n            </div>\n        </div>\n        <!-- HA 20DEC23 For Commented this for future purpose -->\n        <!-- <table class=\"table table-striped table-bordered\">\n            <thead>\n              <tr>\n                <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\n                <td>{{ item.firstName }}</td>\n                <td>{{ item.lastName }}</td>\n                <td>{{ item.division }}</td>\n                <td>{{ item.numberPlate }}</td>\n              </tr>\n            </tbody>\n          </table> -->\n    </div>\n</div>\n", styles: [""], 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: "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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DependentTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dependent-table', template: "<div  class=\"dropdown\" style=\"cursor: pointer;\">\n    <span id=\"zoneIcon\">  \n      <img src=\"./../../../../../assets/images/permit_icons/zone.png\" style=\"height: 35px; margin-left: 0px;\" alt=\"adv-search\">\n    </span>\n    <div class=\"dropdown-content\" style=\"margin-left: -300px; min-width: 415px;\">\n      <div class=\"col-lg-12\">\n        <table class=\"table table-striped table-bordered\">\n          <tbody *ngIf=\"!ValueLength\">\n            <tr>\n              <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(12, 190, 12); text-align: center\">\n                <span><b>{{ errorObj.noPermits }}</b></span>\n                <span>{{ errorObj.noActive }}</span>\n              </td>\n            </tr>\n          </tbody>\n          <tbody id=\"zoneDetails\" *ngIf=\"ValueLength\">\n            <tr>\n              <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(252, 35, 27); text-align: center\">\n                <span><b>{{ errorObj.permits }} ({{Value.length}})</b></span>\n                <span>{{ errorObj.active }}</span>\n              </td>\n            </tr>\n            <tr *ngFor=\"let item of Value\" >\n              <td>\n                <span>{{item?.permit_type}}-{{item?.ref_no}} - {{item?.status}} - {{item?.end_date}}</span>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n    </div>\n    </div>\n  </div>", styles: [".dropdown{margin-top:25px;margin-left:25px}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px #0003;padding:12px 16px;z-index:1}.dropdown:hover .dropdown-content{display:block}#zoneIcon{border:3px solid #a59d9d;padding:10px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}@media (max-width: 992px){.dropdown{margin-top:15px;margin-left:0;margin-bottom:15px}}\n"] }]
-        }], ctorParameters: function () { return [{ type: ChangeService }]; }, propDecorators: { alertMessage: [{
+            args: [{ selector: 'lib-search-box', template: "<!-- // VD 12Jun24 - readonly change-->\n<div id=\"autocomplete-input\">\n    <input #auto id=\"searchbox-style\"\n            (blur)=\"clearList()\" \n            [(ngModel)]=\"filterName\" \n            type=\"text\" \n            name=\"name\" \n            [readOnly]=\"readOnly\"\n            [placeholder]=\"placeHolderText\" \n            style=\"margin: 0 !important;\" \n            class=\"searchInput she-line-input form-control\" \n            (focusin)=\"getSourceDataLocal($event)\" \n            (input)=\"getSourceDataLocal($event)\">\n    <div id=\"selectList\" style=\"position: absolute;position: absolute;background: white;z-index: 2;\">\n    <div *ngIf=\"finalResults.length > 0 && showSuggestion\" \n        style=\"max-height: 100vh;border: 1px solid #d2d4d6;overflow: scroll;\" \n        class=\"suggestions-container\">\n        <!-- HA 20DEC23 Uncommented the logic -->\n         <!-- VD 03May- search changes -->\n        <div *ngFor=\"let item of finalResults\" (click)='clickItem(item)' class=\"hoover\">\n          <!-- VD 26Jun24 - id condition removed -->\n            <div class=\"grid-x align-middle\" style=\"padding: 1rem\">\n                <div *ngIf=\"item.thumbnail\" class=\"cell shrink\" style=\"width: 60px; margin-right: 1.6rem;\">\n                    <img [src]=\"item.thumbnail\" style=\"width: 60px;\" alt=\"\">\n                </div>\n                <div class=\"cell auto\" style=\"text-align: left; padding-left: 20px;\">\n                  <!--// VD 26JUN24 - pipe changes -->\n                    <h4 >{{ '' | getValue: item : SearchItem  }}</h4>\n                </div>\n            </div>\n        </div>\n        <!-- HA 20DEC23 For Commented this for future purpose -->\n        <!-- <table class=\"table table-striped table-bordered\">\n            <thead>\n              <tr>\n                <th>{{ 'firstName' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'lastName' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'division' | i18n:i18nService.currentLanguage }}</th>\n                <th>{{ 'numberPlate' | i18n:i18nService.currentLanguage }}</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let item of finalResults\" (click)='clickItem(item)'>\n                <td>{{ item.firstName }}</td>\n                <td>{{ item.lastName }}</td>\n                <td>{{ item.division }}</td>\n                <td>{{ item.numberPlate }}</td>\n              </tr>\n            </tbody>\n          </table> -->\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SalesforceService }, { type: DataService }, { type: i1.ActivatedRoute }, { type: i0.ElementRef }, { type: I18nService }]; }, propDecorators: { placeHolderText: [{
+                type: Input
+            }], auto: [{
+                type: ViewChild,
+                args: ['auto']
+            }], question: [{
+                type: Input
+            }], apiMeta: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], searchValueChange: [{
+                type: Output
+            }], filterName: [{
                 type: Input
             }] } });
 
-class TableAppendixComponent {
+class FileUploadComponent {
+    SharedService;
+    dataService;
+    sanitizer;
     i18nService;
+    selectedFileData = new EventEmitter();
+    deletedFileData = new EventEmitter();
+    allFiles;
+    limitFileUploading;
+    isDeleteFileButtonVisible;
+    isShowNoFileIcon;
+    tableFile; // file Upload from table
     question;
-    valueChange = new EventEmitter();
-    tableInfo;
-    tableHeader;
-    tableData;
-    addRowColSpan;
-    tableAppendix;
-    dropDownApi;
-    dropDownData;
-    constructor(i18nService) {
+    error;
+    selectedFileNameArray = [];
+    copyOfInputAllFiles;
+    copyOfFileUploadingLimit;
+    fileUrl;
+    showFile = false;
+    isImage = false;
+    fileName = '';
+    currentFile;
+    constructor(SharedService, dataService, sanitizer, i18nService) {
+        this.SharedService = SharedService;
+        this.dataService = dataService;
+        this.sanitizer = sanitizer;
         this.i18nService = i18nService;
     }
-    ngOnInit() {
-        if (this.question.Sub_Text__c != undefined) {
-            this.tableInfo = JSON.parse(this.question.Sub_Text__c);
-            this.tableHeader = this.tableInfo.header;
-            this.tableData = this.tableInfo.data;
-            this.tableAppendix = this.tableInfo.tableAppendix;
-            this.dropDownApi = JSON.stringify(this.tableInfo['dropdownApi']);
-            this.dropDownData = this.tableInfo['dropdownData'];
-            const combinedData = {
-                tableData: this.tableData,
-                tableAppendix: null
-            };
-            if (this.tableAppendix) {
-                combinedData.tableAppendix = this.tableAppendix;
-            }
-            this.valueChange.emit(combinedData);
-            if (this.tableData?.addRow) {
-                this.addRowColSpan = this.tableHeader.length - 2;
-            }
+    ngOnInit() { }
+    // VD 03May24 file upload fix
+    // onFileUpload(event: any) {
+    //   const fileUploaderElement: HTMLElement = document.getElementById(
+    //     'fileUpload'
+    //   ) as HTMLElement;
+    //   fileUploaderElement.click();
+    // }
+    ngOnChanges(simpleChanges) {
+        console.log('simple changes', simpleChanges);
+        this.copyOfInputAllFiles = simpleChanges.allFiles?.currentValue;
+        if (simpleChanges.limitFileUploading) {
+            this.copyOfFileUploadingLimit = simpleChanges.limitFileUploading?.currentValue;
         }
     }
-    addRow() {
-        let newItem = JSON.parse(JSON.stringify(this.tableInfo.newRowDefault));
-        const updatedTableData = [...this.tableData, newItem];
-        this.tableData = updatedTableData;
-        this.emitTableDataValue(updatedTableData, this.tableAppendix);
-    }
-    updateLabel(rowIndex, label, value) {
-        this.tableData[rowIndex][label] = value;
-        this.tableData[rowIndex].name = value.replace(/\s+/g, '').toLowerCase();
-        this.emitTableDataValue(this.tableData, this.tableAppendix);
-    }
-    updateNumber(item, label, value) {
-        item.value[label] = value;
-        this.emitTableDataValue(this.tableData, this.tableAppendix);
-    }
-    updateToggle(item, header, value) {
-        let label = header['fieldName'];
-        let toggleValue = header['toggleValue'];
-        if (label == 'test1') {
-            item.value[label][1] = value ? toggleValue[0] : toggleValue[1];
+    uploadMultipleFiles(event) {
+        console.log('File uploader initiated');
+        let inputFiles = this.copyOfInputAllFiles ? this.copyOfInputAllFiles : [];
+        const selectedFileData = [];
+        const uploadedFiles = event.target.files;
+        if (uploadedFiles.length + inputFiles.length <= this.copyOfFileUploadingLimit) {
+            const readFilesPromises = [];
+            for (const eachUploadedFile of uploadedFiles) {
+                const file = eachUploadedFile;
+                const format = file.name.split('.')[1];
+                // Create a promise for each file read
+                const fileReadPromise = new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.readAsDataURL(file);
+                    reader.onload = () => {
+                        const fileData = {
+                            doc: reader.result,
+                            name: file.name,
+                            type: file.type,
+                            format,
+                            id: null,
+                        };
+                        selectedFileData.push(fileData);
+                        inputFiles.push(fileData);
+                        resolve();
+                    };
+                    reader.onerror = () => {
+                        reject();
+                    };
+                });
+                readFilesPromises.push(fileReadPromise);
+            }
+            // Wait for all promises to resolve
+            Promise.all(readFilesPromises).then(() => {
+                this.copyOfInputAllFiles = inputFiles;
+                console.log('uploadedFiles', inputFiles);
+                this.selectedFileData.emit(inputFiles);
+            }).catch(() => {
+                console.error('Error reading files');
+            });
         }
         else {
-            item.value[label] = value ? toggleValue[0] : toggleValue[1];
+            console.warn('You can upload max 5 files');
+            // this.toastr.warning(TOASTER_MESSAGES.MAX_FIVE_FILES, TOASTER_MESSAGES.WARNING_TITLE);
         }
-        this.emitTableDataValue(this.tableData, this.tableAppendix);
-    }
-    updateDropDown(item, label, value) {
-        item.value[label] = value.valueObj['Value__c'];
-        this.emitTableDataValue(this.tableData, this.tableAppendix);
+        event.target.value = '';
     }
-    updateCheckText(item, label, value) {
-        item.value[label][0] = value;
-        this.emitTableDataValue(this.tableData, this.tableAppendix);
+    // uploadMultipleFiles(event: any) {
+    //   console.log('File uploader initiated');
+    //   let inputFiles: any[] = this.copyOfInputAllFiles ? this.copyOfInputAllFiles : [];
+    //   const selectedFileData = [];
+    //   const uploadedFiles = event.target.files;
+    //   if (uploadedFiles.length + inputFiles.length <= this.copyOfFileUploadingLimit) {
+    //     for (const eachUploadedFile of uploadedFiles) {
+    //       const reader = new FileReader();
+    //       const file: File = eachUploadedFile;
+    //       const format = file.name.split('.')[1];
+    //       reader.readAsDataURL(file);
+    //       reader.onload = () => {
+    //         selectedFileData.push({
+    //           doc: reader.result,
+    //           name: file.name,
+    //           type: file.type,
+    //           format,
+    //           id: null,
+    //         });
+    //         inputFiles.push({
+    //           doc: reader.result,
+    //           name: file.name,
+    //           type: file.type,
+    //           format,
+    //           id: null,
+    //         });
+    //       };
+    //     }
+    //   } else {
+    //     console.warn('You can upload max 5 files');
+    //     //this.toastr.warning(TOASTER_MESSAGES.MAX_FIVE_FILES, TOASTER_MESSAGES.WARNING_TITLE);
+    //   }
+    //   event.target.value = '';
+    //   this.copyOfInputAllFiles = inputFiles;
+    //   console.log('uploadedFiles',inputFiles);
+    //   this.selectedFileData.emit(inputFiles);
+    // }
+    deleteFile(currentFileIndex) {
+        const deletedFileName = this.selectedFileNameArray.splice(currentFileIndex, 1);
+        const deletedFile = this.copyOfInputAllFiles.splice(currentFileIndex, 1);
+        console.log('emit', deletedFile[0]);
+        this.deletedFileData.emit(deletedFile[0]);
+        this.selectedFileData.emit(this.copyOfInputAllFiles);
     }
-    updateTableAppendix(item, label, value) {
-        let toggleValue = item.value[0].toggleValue;
-        if (item.key == 'dropDownData') {
-            item.value[0].value[label] = value.valueObj['empIdName'];
-        }
-        else if (item.key == 'toggleData') {
-            item.value[0].value[label] = value ? toggleValue[0] : toggleValue[1];
+    // VD 20May24 - preview changes
+    viewFile(currentFile) {
+        this.currentFile = currentFile;
+        this.showFile = true;
+        console.log(currentFile);
+        if (this.question.Sub_Text__c != undefined) {
+            let fileMeta = JSON.parse(this.question.Sub_Text__c);
+            let endpoint = fileMeta.endpoint;
+            let queryParameter = fileMeta.queryParameter;
+            let file = currentFile;
+            if (endpoint) {
+                const fullEndPoint = endpoint + '?' + queryParameter + '=' + file[queryParameter];
+                if (fullEndPoint) {
+                    this.dataService.apiResponse(fullEndPoint).subscribe((apiResponse) => {
+                        if (apiResponse) {
+                            this.handleFileContent(apiResponse);
+                        }
+                    });
+                }
+            }
         }
         else {
-            item.value[0].value[label] = value;
+            this.viewLocalFile();
         }
-        this.emitTableDataValue(this.tableData, this.tableAppendix);
     }
-    emitTableDataValue(updatedTableData, tableAppendix) {
-        const combinedData = {
-            tableData: updatedTableData,
-            tableAppendix: null
-        };
-        if (tableAppendix) {
-            combinedData.tableAppendix = this.tableAppendix;
+    // // VD 03Aug24 process local preview 
+    viewLocalFile() {
+        if (this.currentFile) {
+            this.setFileUrl(this.currentFile?.doc);
+            this.fileName = this.currentFile.name;
+            this.isImage = this.currentFile.type.startsWith('image/');
         }
-        this.valueChange.emit(combinedData);
     }
-    //This function finds the index of the current test in the list of test keys and returns the key of the previous test. 
-    // If the current test is the first one, it returns null, as there is no previous test
-    getPreviousTestKey(item, currentTest) {
-        const testKeys = Object.keys(item.value);
-        const currentIndex = testKeys.indexOf(currentTest);
-        if (currentIndex > 0) {
-            return testKeys[currentIndex - 1];
+    handleFileContent(fileResponse) {
+        const byteArray = new Uint8Array(fileResponse.content.data);
+        const blob = new Blob([byteArray], { type: fileResponse.type });
+        const url = window.URL.createObjectURL(blob);
+        this.setFileUrl(url);
+        this.isImage = false;
+        if (fileResponse.name) {
+            this.fileName = fileResponse.name;
+            const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
+            const fileExtension = fileResponse.name.split('.').pop()?.toLowerCase();
+            this.isImage = imageExtensions.includes(fileExtension || '');
         }
-        return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableAppendixComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TableAppendixComponent, selector: "app-table-appendix", inputs: { question: "question" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\n    <thead class=\"none-border\" *ngIf=\"tableInfo.tableType === 'lockout' && tableInfo.tableHeader\">\n      <th></th>\n      <th>{{ tableInfo.tableHeader }}</th>\n      <th></th>\n    </thead>\n    <thead>\n      <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + header.size\">\n        {{ header.label }}\n      </th>\n    </thead>\n    <tbody id=\"safetyMeasuresTableBody\">\n      <tr *ngFor=\"let item of tableData; let i = index\">\n        <td *ngFor=\"let header of tableHeader; let j = index\">\n          <div *ngIf=\"header.type === 'text'\">\n            <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" [placeholder]=\"header.placeholder\" (ngModelChange)=\"tableInfo.tableType != 'lockout' ? updateLabel(i, header.fieldName, item[header.fieldName]) : updateNumber(item, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type.includes('number')\">\n            <!-- HA 19DEC23 For translation -->\n            <input type=\"number\" [(ngModel)]=\"item.value[header.fieldName]\" [disabled]=\"item.value[getPreviousTestKey(item, header.fieldName)] === null && tableInfo.tableType != 'lockout'\" (ngModelChange)=\"updateNumber(item, header.fieldName, item.value[header.fieldName])\" placeholder=\"{{ 'enterValue' | i18n:i18nService.currentLanguage }}\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type === 'dropdown'\">\n            <app-custom-dropdown [fromShengel]=\"true\" [options]=\"dropDownData\" \n            [selectedValue]=\"item.value[header.fieldName]\" [placeholder]=\"header.placeholder\"\n            (valueChange)=\"updateDropDown(item,header.fieldName,$event)\">\n            </app-custom-dropdown>\n          </div>\n          <div *ngIf=\"header.type === 'textcheckbox'\">\n            <div style=\"display: flex; justify-content: center;align-items: center;\">\n              <input type=\"text\" [(ngModel)]=\"item.value[header.fieldName][0]\" (ngModelChange)=\"updateCheckText(item, header.fieldName, item.value[header.fieldName][0])\"  style=\"width: 85px; height: 27px; text-align: center; padding: 5px; border-bottom: none; border-top: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; background: transparent;outline: none;\">\n              <label class=\"switch2\">\n                <input  class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n                type=\"checkbox\"\n                [checked]=\"item.value[header.fieldName][1] == header.toggleValue[0]\"/>\n                <span class=\"switch-label2\" data-on=\"Psi\" data-off=\"Bar\"></span> \n                <span class=\"switch-handle2\"></span> \n              </label> \n            </div>\n          </div>\n          <div *ngIf=\"header.type === 'labelcheckbox'\">\n            <div style=\"display: flex; justify-content: center;align-items: center;\">\n              <!-- HA 19DEC23 For translation -->\n              <span style=\"text-align:left;\">{{ 'calibrated' | i18n:i18nService.currentLanguage }}</span>\n              <label class=\"switch2\">\n                <input  class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n                type=\"checkbox\"\n                [checked]=\"item.value[header.fieldName] == header.toggleValue[0]\"/>\n                <span class=\"switch-label3\" data-on=\"Yes\" data-off=\"No\"></span> \n                <span class=\"switch-handle2\"></span> \n              </label> \n            </div>\n          </div>\n        </td>\n      </tr>\n      <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType === 'lockout'\">\n        <td colspan=\"1\">\n          <!-- HA 19DEC23 For translation -->\n          <b style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">{{ 'addMore' | i18n:i18nService.currentLanguage }} +</b>\n        </td>\n      </tr>\n      <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType != 'lockout'\">\n        <td colspan=\"3\">\n          <!-- HA 19DEC23 For translation -->\n          <b>{{ 'addMore' | i18n:i18nService.currentLanguage }}</b>\n        </td>\n        <td colspan=\"2\" style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">\n          +\n        </td>\n      </tr>\n      <tr  *ngFor=\"let item of tableAppendix | keyvalue; let k = index\">\n        <td *ngFor=\"let header of tableHeader; let l = index\">\n          <div *ngIf=\"header.type === 'text'\" >\n            <input type=\"text\" [(ngModel)]=\"item.value[0][header.fieldName]\" (ngModelChange)=\"updateLabel(k, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type.includes('dropdown') && item.key == 'dropDownData'\" >\n            <!-- HA 19DEC23 For translation -->\n            <app-custom-dropdown [fromShengel]=\"true\" [apiMeta]=\"dropDownApi\" \n            [selectedValue]=\"item.value[0].value[header.fieldName]\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n            (valueChange)=\"updateTableAppendix(item,header.fieldName,$event)\">\n            </app-custom-dropdown>\n          </div>\n          <div *ngIf=\"header.type.includes('datetime') && item.key == 'dateData'\">\n            <input [(ngModel)]=\"item.value[0].value[header.fieldName]\" type=\"datetime-local\"\n            (ngModelChange)=\"updateTableAppendix(item,header.fieldName,$event)\"\n            placeholder=\"DD/MM/YYYY HH:MM\">\n          </div>\n          <div *ngIf=\"header.type.includes('checkbox') && item.key == 'toggleData'\">\n            <label class=\"switch2\">\n              <input  class=\"switch-input2\" (change)=\"updateTableAppendix(item,header.fieldName,$event.target.checked)\" \n              type=\"checkbox\"\n              [checked]=\"item.value[0].value[header.fieldName] == item.value[0].toggleValue[0]\"/>\n              <span class=\"switch-label3\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n              <span class=\"switch-handle2\"></span> \n            </label> \n          </div>\n          <div *ngIf=\"header.type.includes('file') && item.key == 'fileData'\">\n            <app-file-upload [limitFileUploading]=\"2\" [allFiles]=\"item.value[0].value[header.fieldName]\" [tableFile]=\"true\"\n            (selectedFileData)=\"updateTableAppendix(item ,header.fieldName, $event)\"\n            [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>", 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}.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}.switch2{position:relative;width:73px;height:23.5px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:5px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input2{position:absolute;top:0;left:0;opacity:0}.switch-label2{position:relative;display:block;height:inherit;font-size:12px;background:rgba(175,172,172,.5);color:#000;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label3{position:relative;display:block;height:inherit;font-size:12px;background:red;color:#fff;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label2:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label3:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label2:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label3:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label2:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-label3:after{content:attr(data-on);left:11px;margin-left:10px;vertical-align:sub;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input2:checked~.switch-label2{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label3{background:rgb(2,173,2);border-color:#02ad02;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label2:before{opacity:0}.switch-input2:checked~.switch-label3:before{opacity:0}.switch-input2:checked~.switch-label2:after{opacity:1;margin-right:15px}.switch-input2:checked~.switch-label3:after{opacity:1;margin-right:15px}.switch-handle2{position:absolute;top:2px;left:2px;width:18px;height:18px;background:linear-gradient(to bottom,#FFFFFF 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:20%;box-shadow:1px 1px 5px #0003}.switch-handle2:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input2:checked~.switch-handle2{left:51px;box-shadow:-1px 1px 5px #0003}.switch-label2,.switch-handle2,.switch-label3{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\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: "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: "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: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question", "error"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableAppendixComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-table-appendix', template: "<table class=\"table table-striped table-bordered\">\n    <thead class=\"none-border\" *ngIf=\"tableInfo.tableType === 'lockout' && tableInfo.tableHeader\">\n      <th></th>\n      <th>{{ tableInfo.tableHeader }}</th>\n      <th></th>\n    </thead>\n    <thead>\n      <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + header.size\">\n        {{ header.label }}\n      </th>\n    </thead>\n    <tbody id=\"safetyMeasuresTableBody\">\n      <tr *ngFor=\"let item of tableData; let i = index\">\n        <td *ngFor=\"let header of tableHeader; let j = index\">\n          <div *ngIf=\"header.type === 'text'\">\n            <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" [placeholder]=\"header.placeholder\" (ngModelChange)=\"tableInfo.tableType != 'lockout' ? updateLabel(i, header.fieldName, item[header.fieldName]) : updateNumber(item, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type.includes('number')\">\n            <!-- HA 19DEC23 For translation -->\n            <input type=\"number\" [(ngModel)]=\"item.value[header.fieldName]\" [disabled]=\"item.value[getPreviousTestKey(item, header.fieldName)] === null && tableInfo.tableType != 'lockout'\" (ngModelChange)=\"updateNumber(item, header.fieldName, item.value[header.fieldName])\" placeholder=\"{{ 'enterValue' | i18n:i18nService.currentLanguage }}\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type === 'dropdown'\">\n            <app-custom-dropdown [fromShengel]=\"true\" [options]=\"dropDownData\" \n            [selectedValue]=\"item.value[header.fieldName]\" [placeholder]=\"header.placeholder\"\n            (valueChange)=\"updateDropDown(item,header.fieldName,$event)\">\n            </app-custom-dropdown>\n          </div>\n          <div *ngIf=\"header.type === 'textcheckbox'\">\n            <div style=\"display: flex; justify-content: center;align-items: center;\">\n              <input type=\"text\" [(ngModel)]=\"item.value[header.fieldName][0]\" (ngModelChange)=\"updateCheckText(item, header.fieldName, item.value[header.fieldName][0])\"  style=\"width: 85px; height: 27px; text-align: center; padding: 5px; border-bottom: none; border-top: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; background: transparent;outline: none;\">\n              <label class=\"switch2\">\n                <input  class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n                type=\"checkbox\"\n                [checked]=\"item.value[header.fieldName][1] == header.toggleValue[0]\"/>\n                <span class=\"switch-label2\" data-on=\"Psi\" data-off=\"Bar\"></span> \n                <span class=\"switch-handle2\"></span> \n              </label> \n            </div>\n          </div>\n          <div *ngIf=\"header.type === 'labelcheckbox'\">\n            <div style=\"display: flex; justify-content: center;align-items: center;\">\n              <!-- HA 19DEC23 For translation -->\n              <span style=\"text-align:left;\">{{ 'calibrated' | i18n:i18nService.currentLanguage }}</span>\n              <label class=\"switch2\">\n                <input  class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n                type=\"checkbox\"\n                [checked]=\"item.value[header.fieldName] == header.toggleValue[0]\"/>\n                <span class=\"switch-label3\" data-on=\"Yes\" data-off=\"No\"></span> \n                <span class=\"switch-handle2\"></span> \n              </label> \n            </div>\n          </div>\n        </td>\n      </tr>\n      <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType === 'lockout'\">\n        <td colspan=\"1\">\n          <!-- HA 19DEC23 For translation -->\n          <b style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">{{ 'addMore' | i18n:i18nService.currentLanguage }} +</b>\n        </td>\n      </tr>\n      <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType != 'lockout'\">\n        <td colspan=\"3\">\n          <!-- HA 19DEC23 For translation -->\n          <b>{{ 'addMore' | i18n:i18nService.currentLanguage }}</b>\n        </td>\n        <td colspan=\"2\" style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">\n          +\n        </td>\n      </tr>\n      <tr  *ngFor=\"let item of tableAppendix | keyvalue; let k = index\">\n        <td *ngFor=\"let header of tableHeader; let l = index\">\n          <div *ngIf=\"header.type === 'text'\" >\n            <input type=\"text\" [(ngModel)]=\"item.value[0][header.fieldName]\" (ngModelChange)=\"updateLabel(k, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type.includes('dropdown') && item.key == 'dropDownData'\" >\n            <!-- HA 19DEC23 For translation -->\n            <app-custom-dropdown [fromShengel]=\"true\" [apiMeta]=\"dropDownApi\" \n            [selectedValue]=\"item.value[0].value[header.fieldName]\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n            (valueChange)=\"updateTableAppendix(item,header.fieldName,$event)\">\n            </app-custom-dropdown>\n          </div>\n          <div *ngIf=\"header.type.includes('datetime') && item.key == 'dateData'\">\n            <input [(ngModel)]=\"item.value[0].value[header.fieldName]\" type=\"datetime-local\"\n            (ngModelChange)=\"updateTableAppendix(item,header.fieldName,$event)\"\n            placeholder=\"DD/MM/YYYY HH:MM\">\n          </div>\n          <div *ngIf=\"header.type.includes('checkbox') && item.key == 'toggleData'\">\n            <label class=\"switch2\">\n              <input  class=\"switch-input2\" (change)=\"updateTableAppendix(item,header.fieldName,$event.target.checked)\" \n              type=\"checkbox\"\n              [checked]=\"item.value[0].value[header.fieldName] == item.value[0].toggleValue[0]\"/>\n              <span class=\"switch-label3\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n              <span class=\"switch-handle2\"></span> \n            </label> \n          </div>\n          <div *ngIf=\"header.type.includes('file') && item.key == 'fileData'\">\n            <app-file-upload [limitFileUploading]=\"2\" [allFiles]=\"item.value[0].value[header.fieldName]\" [tableFile]=\"true\"\n            (selectedFileData)=\"updateTableAppendix(item ,header.fieldName, $event)\"\n            [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>", 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}.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}.switch2{position:relative;width:73px;height:23.5px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:5px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input2{position:absolute;top:0;left:0;opacity:0}.switch-label2{position:relative;display:block;height:inherit;font-size:12px;background:rgba(175,172,172,.5);color:#000;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label3{position:relative;display:block;height:inherit;font-size:12px;background:red;color:#fff;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label2:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label3:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label2:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label3:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label2:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-label3:after{content:attr(data-on);left:11px;margin-left:10px;vertical-align:sub;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input2:checked~.switch-label2{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label3{background:rgb(2,173,2);border-color:#02ad02;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label2:before{opacity:0}.switch-input2:checked~.switch-label3:before{opacity:0}.switch-input2:checked~.switch-label2:after{opacity:1;margin-right:15px}.switch-input2:checked~.switch-label3:after{opacity:1;margin-right:15px}.switch-handle2{position:absolute;top:2px;left:2px;width:18px;height:18px;background:linear-gradient(to bottom,#FFFFFF 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:20%;box-shadow:1px 1px 5px #0003}.switch-handle2:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input2:checked~.switch-handle2{left:51px;box-shadow:-1px 1px 5px #0003}.switch-label2,.switch-handle2,.switch-label3{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"] }]
-        }], ctorParameters: function () { return [{ type: I18nService }]; }, propDecorators: { question: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-class CustomDateComponent {
-    i18nService;
-    date;
-    readOnly = false; // VD 12Jun24 - readonly change
-    error;
-    errorMessage;
-    dateChange = new EventEmitter();
-    dateSelected;
-    constructor(i18nService) {
-        this.i18nService = i18nService;
+    setFileUrl(url) {
+        this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
     }
-    ngOnInit() {
-        this.dateSelected = new Date(this.date);
+    getDocIcon(docName) {
+        const ext = docName.split('.').pop(-1);
+        return this.SharedService.docIcon(ext);
     }
-    // VD 02Aug24 - clear input changes
-    ngOnChanges(simplechanges) {
-        if (simplechanges['date']) {
-            this.dateSelected = new Date(this.date);
+    close() {
+        this.showFile = false;
+        this.fileName = '';
+        this.fileUrl = '';
+        this.isImage = false;
+        if (this.fileUrl) {
+            URL.revokeObjectURL(this.fileUrl);
         }
     }
-    onDateChange(event) {
-        this.dateChange.emit(event);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDateComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDateComponent, selector: "app-custom-date", inputs: { date: "date", readOnly: "readOnly", error: "error", errorMessage: "errorMessage" }, outputs: { dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- date component -->\n<!-- VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<p>\n    <input\n      [class]=\"error ? 'invalid' : ''\"\n      [(ngModel)]=\"dateSelected\"\n      [owlDateTimeTrigger]=\"dt1\"\n      [owlDateTime]=\"dt1\"\n      [disabled]=\"readOnly\"\n      placeholder=\"DD/MM/YYYY\"\n      (input)=\"onDateChange($event)\"\n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n      (dateTimeChange)=\"onDateChange($event)\"\n    >\n    <owl-date-time [pickerType]=\"'calendar'\" #dt1></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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileUploadComponent, deps: [{ token: SharedService }, { token: DataService }, { token: i6$1.DomSanitizer }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FileUploadComponent, selector: "app-file-upload", inputs: { allFiles: "allFiles", limitFileUploading: "limitFileUploading", isDeleteFileButtonVisible: "isDeleteFileButtonVisible", isShowNoFileIcon: "isShowNoFileIcon", tableFile: "tableFile", question: "question", error: "error" }, outputs: { selectedFileData: "selectedFileData", deletedFileData: "deletedFileData" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" style=\"margin: 0;\">\n  <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\n    <!-- HA 19DEC23 For translation -->\n    <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n  </div>\n  <div class=\"col-lg-5 document-cnt m-t-10 m-b-10\"\n    *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\n     <div *ngIf=\"!tableFile\"> <!-- (click)=\"viewFile(eachFile)\"  -->\n      <div class=\"col-lg-3 document_image\">\n        <img [src]=\"getDocIcon(eachFile?.name)\">\n    </div>\n      <div class=\"col-lg-9 document_name\">\n        {{eachFile?.name}}\n      </div>\n      <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\n      </div>\n      <!-- VD 20May24 - preview changes-->\n      <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\n      </div>\n    </div>\n    <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\n      <div class=\"col-lg-3 document_image\">\n          <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n      </div>\n      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n          {{eachFile?.name}}\n      </div>\n  </div>\n  </div>\n  <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\n    <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n  </div>\n</div>\n\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\n  <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\n    <!-- HA 19DEC23 For translation -->\n    <!-- VD 03May24 file upload fix-->\n    <button [class]=\"error ? 'she-btn-primary-bordered Invalid' : 'she-btn-primary-bordered'\" style=\"width:275px;\" (click)=\"fileInput.click()\"\n    [ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= copyOfFileUploadingLimit }\" [disabled]=\"copyOfInputAllFiles?.length >= copyOfFileUploadingLimit\"\n    >Choose Files</button>\n\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\" accept=\"*\" style=\"display:none;\"\n    (change) = uploadMultipleFiles($event)\n    />\n  </label>\n<!-- HA 19DEC23 For translation -->\n  <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\n    {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\n    <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\n  </label>\n  <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched ||        formControl?.documents?.dirty) &&\n  formControl?.documents?.errors?.required\">\n    {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\n  </span> -->\n</div>\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.Error_Message__c}}</div>\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\n  <div class=\"nxt-file-map-modal\">\n    <div class=\"nxt-file-model-content\">\n      <div class=\"nxt-file-model-header\">\n        <h4>{{fileName}}</h4>\n        <button class=\"close-button\" (click)=\"close()\">X</button>\n      </div>\n      <ng-container *ngIf=\"isImage; else otherFile\">\n        <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\n      </ng-container>\n      <ng-template #otherFile>\n        <iframe [src]=\"fileUrl\" width=\"100%\" height=\"500px\"></iframe>\n      </ng-template>\n    </div>\n  </div>\n</div>\n\n\n", styles: [".document-cnt{padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f9f9f9;margin-bottom:10px;cursor:pointer;transition:background-color .3s ease;position:relative}.document-cnt:hover{background-color:#e9ecef}.document_image img{width:30px;height:30px}.document_name{font-size:14px;font-weight:700;color:#333;line-height:30px}.label{margin-bottom:0}.document_delete img,.preview-icon img{width:20px;height:20px;cursor:pointer;transition:transform .3s ease}.document_delete img{filter:brightness(0) saturate(100%) invert(20%) sepia(97%) saturate(7481%) hue-rotate(357deg) brightness(98%) contrast(119%)}.document_delete img:hover,.preview-icon img:hover{transform:scale(1.1)}.document_delete,.preview-icon{position:absolute;top:50%;transform:translateY(-50%)}.document_delete{right:10px}.preview-icon{right:40px}@media (min-width: 992px){.document-cnt{margin-left:10px}}.btn-disabled{background:#e1e1e1;color:#fff;border:none;border-radius:5px;height:50px}.form-control[disabled]{border-radius:5px}.custom-file{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;width:auto;margin-bottom:5px}.she-btn-primary-bordered{background:#ffffff;color:#48b7ff;border:1px solid #48B7FF;border-radius:5px;height:50px;outline:none!important}.btn-primary{background-color:#03a9f4!important;border:1px solid #03a9f4!important;color:#fff!important}.btn.btn-primary{border-radius:2px;padding:6px 14px;font-size:14px}.nxt-file-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.nxt-file-map-modal{background-color:#fff;border-radius:8px;overflow:hidden;width:80%;max-width:800px;max-height:90%;display:flex;flex-direction:column}.nxt-file-model-content{display:flex;flex-direction:column;height:100%}.nxt-file-model-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:#f5f5f5;border-bottom:1px solid #ddd}.nxt-file-model-header h4{margin:0;font-size:1.25em}.close-button{background:none;border:none;font-size:1.5em;cursor:pointer}.img-fluid{max-width:100%;height:auto;flex:1}iframe{border:none}.Invalid{border:1px solid red!important}\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: "pipe", type: I18nPipe, name: "i18n" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-date', template: "<!-- date component -->\n<!-- VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<p>\n    <input\n      [class]=\"error ? 'invalid' : ''\"\n      [(ngModel)]=\"dateSelected\"\n      [owlDateTimeTrigger]=\"dt1\"\n      [owlDateTime]=\"dt1\"\n      [disabled]=\"readOnly\"\n      placeholder=\"DD/MM/YYYY\"\n      (input)=\"onDateChange($event)\"\n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n      (dateTimeChange)=\"onDateChange($event)\"\n    >\n    <owl-date-time [pickerType]=\"'calendar'\" #dt1></owl-date-time>\n  </p>\n  <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: I18nService }]; }, propDecorators: { date: [{
+            args: [{ selector: 'app-file-upload', template: "<div class=\"row\" style=\"margin: 0;\">\n  <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\n    <!-- HA 19DEC23 For translation -->\n    <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n  </div>\n  <div class=\"col-lg-5 document-cnt m-t-10 m-b-10\"\n    *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\n     <div *ngIf=\"!tableFile\"> <!-- (click)=\"viewFile(eachFile)\"  -->\n      <div class=\"col-lg-3 document_image\">\n        <img [src]=\"getDocIcon(eachFile?.name)\">\n    </div>\n      <div class=\"col-lg-9 document_name\">\n        {{eachFile?.name}}\n      </div>\n      <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\n      </div>\n      <!-- VD 20May24 - preview changes-->\n      <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\n      </div>\n    </div>\n    <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\n      <div class=\"col-lg-3 document_image\">\n          <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n      </div>\n      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n          {{eachFile?.name}}\n      </div>\n  </div>\n  </div>\n  <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\n    <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n  </div>\n</div>\n\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\n  <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\n    <!-- HA 19DEC23 For translation -->\n    <!-- VD 03May24 file upload fix-->\n    <button [class]=\"error ? 'she-btn-primary-bordered Invalid' : 'she-btn-primary-bordered'\" style=\"width:275px;\" (click)=\"fileInput.click()\"\n    [ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= copyOfFileUploadingLimit }\" [disabled]=\"copyOfInputAllFiles?.length >= copyOfFileUploadingLimit\"\n    >Choose Files</button>\n\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\" accept=\"*\" style=\"display:none;\"\n    (change) = uploadMultipleFiles($event)\n    />\n  </label>\n<!-- HA 19DEC23 For translation -->\n  <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\n    {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\n    <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\n  </label>\n  <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched ||        formControl?.documents?.dirty) &&\n  formControl?.documents?.errors?.required\">\n    {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\n  </span> -->\n</div>\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.Error_Message__c}}</div>\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\n  <div class=\"nxt-file-map-modal\">\n    <div class=\"nxt-file-model-content\">\n      <div class=\"nxt-file-model-header\">\n        <h4>{{fileName}}</h4>\n        <button class=\"close-button\" (click)=\"close()\">X</button>\n      </div>\n      <ng-container *ngIf=\"isImage; else otherFile\">\n        <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\n      </ng-container>\n      <ng-template #otherFile>\n        <iframe [src]=\"fileUrl\" width=\"100%\" height=\"500px\"></iframe>\n      </ng-template>\n    </div>\n  </div>\n</div>\n\n\n", styles: [".document-cnt{padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f9f9f9;margin-bottom:10px;cursor:pointer;transition:background-color .3s ease;position:relative}.document-cnt:hover{background-color:#e9ecef}.document_image img{width:30px;height:30px}.document_name{font-size:14px;font-weight:700;color:#333;line-height:30px}.label{margin-bottom:0}.document_delete img,.preview-icon img{width:20px;height:20px;cursor:pointer;transition:transform .3s ease}.document_delete img{filter:brightness(0) saturate(100%) invert(20%) sepia(97%) saturate(7481%) hue-rotate(357deg) brightness(98%) contrast(119%)}.document_delete img:hover,.preview-icon img:hover{transform:scale(1.1)}.document_delete,.preview-icon{position:absolute;top:50%;transform:translateY(-50%)}.document_delete{right:10px}.preview-icon{right:40px}@media (min-width: 992px){.document-cnt{margin-left:10px}}.btn-disabled{background:#e1e1e1;color:#fff;border:none;border-radius:5px;height:50px}.form-control[disabled]{border-radius:5px}.custom-file{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;width:auto;margin-bottom:5px}.she-btn-primary-bordered{background:#ffffff;color:#48b7ff;border:1px solid #48B7FF;border-radius:5px;height:50px;outline:none!important}.btn-primary{background-color:#03a9f4!important;border:1px solid #03a9f4!important;color:#fff!important}.btn.btn-primary{border-radius:2px;padding:6px 14px;font-size:14px}.nxt-file-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.nxt-file-map-modal{background-color:#fff;border-radius:8px;overflow:hidden;width:80%;max-width:800px;max-height:90%;display:flex;flex-direction:column}.nxt-file-model-content{display:flex;flex-direction:column;height:100%}.nxt-file-model-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:#f5f5f5;border-bottom:1px solid #ddd}.nxt-file-model-header h4{margin:0;font-size:1.25em}.close-button{background:none;border:none;font-size:1.5em;cursor:pointer}.img-fluid{max-width:100%;height:auto;flex:1}iframe{border:none}.Invalid{border:1px solid red!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: SharedService }, { type: DataService }, { type: i6$1.DomSanitizer }, { type: I18nService }]; }, propDecorators: { selectedFileData: [{
+                type: Output
+            }], deletedFileData: [{
+                type: Output
+            }], allFiles: [{
                 type: Input
-            }], readOnly: [{
+            }], limitFileUploading: [{
                 type: Input
-            }], error: [{
+            }], isDeleteFileButtonVisible: [{
                 type: Input
-            }], errorMessage: [{
+            }], isShowNoFileIcon: [{
+                type: Input
+            }], tableFile: [{
+                type: Input
+            }], question: [{
+                type: Input
+            }], error: [{
                 type: Input
-            }], dateChange: [{
-                type: Output
             }] } });
 
-class CustomTimeComponent {
-    i18nService;
-    time;
-    readOnly = false; // VD 12Jun24 - readonly change
-    error;
-    errorMessage;
-    timeChange = new EventEmitter();
-    timeSelected;
-    constructor(i18nService) {
-        this.i18nService = i18nService;
-    }
-    ngOnInit() {
-        if (this.time) {
-            this.time = this.time['value'] ? this.time['value'] : this.time;
-            this.timeSelected = new Date(this.time);
+class DependentTableComponent {
+    changeService;
+    alertMessage;
+    ValueLength;
+    Value;
+    errorObj;
+    constructor(changeService) {
+        this.changeService = changeService;
+        this.changeService.changeField$.subscribe((data) => {
+            this.dependentData(data);
+        });
+    }
+    ngOnInit() {
+        this.errorObj = JSON.parse(this.alertMessage);
+    }
+    dependentData(data) {
+        let existingData = data.Permits;
+        if (existingData.length !== 0) {
+            this.ValueLength = true;
+            this.Value = existingData;
+            $("#zoneIcon").css("border", "3px solid rgb(252, 35, 27)");
+        }
+        else {
+            this.ValueLength = false;
+            this.Value = [];
+            $("#zoneIcon").css("border", "3px solid rgb(12, 190, 12)");
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DependentTableComponent, deps: [{ token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DependentTableComponent, selector: "app-dependent-table", inputs: { alertMessage: "alertMessage" }, ngImport: i0, template: "<div  class=\"dropdown\" style=\"cursor: pointer;\">\n    <span id=\"zoneIcon\">  \n      <img src=\"./../../../../../assets/images/permit_icons/zone.png\" style=\"height: 35px; margin-left: 0px;\" alt=\"adv-search\">\n    </span>\n    <div class=\"dropdown-content\" style=\"margin-left: -300px; min-width: 415px;\">\n      <div class=\"col-lg-12\">\n        <table class=\"table table-striped table-bordered\">\n          <tbody *ngIf=\"!ValueLength\">\n            <tr>\n              <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(12, 190, 12); text-align: center\">\n                <span><b>{{ errorObj.noPermits }}</b></span>\n                <span>{{ errorObj.noActive }}</span>\n              </td>\n            </tr>\n          </tbody>\n          <tbody id=\"zoneDetails\" *ngIf=\"ValueLength\">\n            <tr>\n              <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(252, 35, 27); text-align: center\">\n                <span><b>{{ errorObj.permits }} ({{Value.length}})</b></span>\n                <span>{{ errorObj.active }}</span>\n              </td>\n            </tr>\n            <tr *ngFor=\"let item of Value\" >\n              <td>\n                <span>{{item?.permit_type}}-{{item?.ref_no}} - {{item?.status}} - {{item?.end_date}}</span>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n    </div>\n    </div>\n  </div>", styles: [".dropdown{margin-top:25px;margin-left:25px}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px #0003;padding:12px 16px;z-index:1}.dropdown:hover .dropdown-content{display:block}#zoneIcon{border:3px solid #a59d9d;padding:10px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}@media (max-width: 992px){.dropdown{margin-top:15px;margin-left:0;margin-bottom:15px}}\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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DependentTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-dependent-table', template: "<div  class=\"dropdown\" style=\"cursor: pointer;\">\n    <span id=\"zoneIcon\">  \n      <img src=\"./../../../../../assets/images/permit_icons/zone.png\" style=\"height: 35px; margin-left: 0px;\" alt=\"adv-search\">\n    </span>\n    <div class=\"dropdown-content\" style=\"margin-left: -300px; min-width: 415px;\">\n      <div class=\"col-lg-12\">\n        <table class=\"table table-striped table-bordered\">\n          <tbody *ngIf=\"!ValueLength\">\n            <tr>\n              <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(12, 190, 12); text-align: center\">\n                <span><b>{{ errorObj.noPermits }}</b></span>\n                <span>{{ errorObj.noActive }}</span>\n              </td>\n            </tr>\n          </tbody>\n          <tbody id=\"zoneDetails\" *ngIf=\"ValueLength\">\n            <tr>\n              <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(252, 35, 27); text-align: center\">\n                <span><b>{{ errorObj.permits }} ({{Value.length}})</b></span>\n                <span>{{ errorObj.active }}</span>\n              </td>\n            </tr>\n            <tr *ngFor=\"let item of Value\" >\n              <td>\n                <span>{{item?.permit_type}}-{{item?.ref_no}} - {{item?.status}} - {{item?.end_date}}</span>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n    </div>\n    </div>\n  </div>", styles: [".dropdown{margin-top:25px;margin-left:25px}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px #0003;padding:12px 16px;z-index:1}.dropdown:hover .dropdown-content{display:block}#zoneIcon{border:3px solid #a59d9d;padding:10px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}@media (max-width: 992px){.dropdown{margin-top:15px;margin-left:0;margin-bottom:15px}}\n"] }]
+        }], ctorParameters: function () { return [{ type: ChangeService }]; }, propDecorators: { alertMessage: [{
+                type: Input
+            }] } });
+
+class TableAppendixComponent {
+    i18nService;
+    question;
+    valueChange = new EventEmitter();
+    tableInfo;
+    tableHeader;
+    tableData;
+    addRowColSpan;
+    tableAppendix;
+    dropDownApi;
+    dropDownData;
+    constructor(i18nService) {
+        this.i18nService = i18nService;
+    }
+    ngOnInit() {
+        if (this.question.Sub_Text__c != undefined) {
+            this.tableInfo = JSON.parse(this.question.Sub_Text__c);
+            this.tableHeader = this.tableInfo.header;
+            this.tableData = this.tableInfo.data;
+            this.tableAppendix = this.tableInfo.tableAppendix;
+            this.dropDownApi = JSON.stringify(this.tableInfo['dropdownApi']);
+            this.dropDownData = this.tableInfo['dropdownData'];
+            const combinedData = {
+                tableData: this.tableData,
+                tableAppendix: null
+            };
+            if (this.tableAppendix) {
+                combinedData.tableAppendix = this.tableAppendix;
+            }
+            this.valueChange.emit(combinedData);
+            if (this.tableData?.addRow) {
+                this.addRowColSpan = this.tableHeader.length - 2;
+            }
+        }
+    }
+    addRow() {
+        let newItem = JSON.parse(JSON.stringify(this.tableInfo.newRowDefault));
+        const updatedTableData = [...this.tableData, newItem];
+        this.tableData = updatedTableData;
+        this.emitTableDataValue(updatedTableData, this.tableAppendix);
+    }
+    updateLabel(rowIndex, label, value) {
+        this.tableData[rowIndex][label] = value;
+        this.tableData[rowIndex].name = value.replace(/\s+/g, '').toLowerCase();
+        this.emitTableDataValue(this.tableData, this.tableAppendix);
+    }
+    updateNumber(item, label, value) {
+        item.value[label] = value;
+        this.emitTableDataValue(this.tableData, this.tableAppendix);
+    }
+    updateToggle(item, header, value) {
+        let label = header['fieldName'];
+        let toggleValue = header['toggleValue'];
+        if (label == 'test1') {
+            item.value[label][1] = value ? toggleValue[0] : toggleValue[1];
+        }
+        else {
+            item.value[label] = value ? toggleValue[0] : toggleValue[1];
+        }
+        this.emitTableDataValue(this.tableData, this.tableAppendix);
+    }
+    updateDropDown(item, label, value) {
+        item.value[label] = value.valueObj['Value__c'];
+        this.emitTableDataValue(this.tableData, this.tableAppendix);
+    }
+    updateCheckText(item, label, value) {
+        item.value[label][0] = value;
+        this.emitTableDataValue(this.tableData, this.tableAppendix);
+    }
+    updateTableAppendix(item, label, value) {
+        let toggleValue = item.value[0].toggleValue;
+        if (item.key == 'dropDownData') {
+            item.value[0].value[label] = value.valueObj['empIdName'];
+        }
+        else if (item.key == 'toggleData') {
+            item.value[0].value[label] = value ? toggleValue[0] : toggleValue[1];
+        }
+        else {
+            item.value[0].value[label] = value;
+        }
+        this.emitTableDataValue(this.tableData, this.tableAppendix);
+    }
+    emitTableDataValue(updatedTableData, tableAppendix) {
+        const combinedData = {
+            tableData: updatedTableData,
+            tableAppendix: null
+        };
+        if (tableAppendix) {
+            combinedData.tableAppendix = this.tableAppendix;
+        }
+        this.valueChange.emit(combinedData);
+    }
+    //This function finds the index of the current test in the list of test keys and returns the key of the previous test. 
+    // If the current test is the first one, it returns null, as there is no previous test
+    getPreviousTestKey(item, currentTest) {
+        const testKeys = Object.keys(item.value);
+        const currentIndex = testKeys.indexOf(currentTest);
+        if (currentIndex > 0) {
+            return testKeys[currentIndex - 1];
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableAppendixComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TableAppendixComponent, selector: "app-table-appendix", inputs: { question: "question" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<table class=\"table table-striped table-bordered\">\n    <thead class=\"none-border\" *ngIf=\"tableInfo.tableType === 'lockout' && tableInfo.tableHeader\">\n      <th></th>\n      <th>{{ tableInfo.tableHeader }}</th>\n      <th></th>\n    </thead>\n    <thead>\n      <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + header.size\">\n        {{ header.label }}\n      </th>\n    </thead>\n    <tbody id=\"safetyMeasuresTableBody\">\n      <tr *ngFor=\"let item of tableData; let i = index\">\n        <td *ngFor=\"let header of tableHeader; let j = index\">\n          <div *ngIf=\"header.type === 'text'\">\n            <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" [placeholder]=\"header.placeholder\" (ngModelChange)=\"tableInfo.tableType != 'lockout' ? updateLabel(i, header.fieldName, item[header.fieldName]) : updateNumber(item, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type.includes('number')\">\n            <!-- HA 19DEC23 For translation -->\n            <input type=\"number\" [(ngModel)]=\"item.value[header.fieldName]\" [disabled]=\"item.value[getPreviousTestKey(item, header.fieldName)] === null && tableInfo.tableType != 'lockout'\" (ngModelChange)=\"updateNumber(item, header.fieldName, item.value[header.fieldName])\" placeholder=\"{{ 'enterValue' | i18n:i18nService.currentLanguage }}\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type === 'dropdown'\">\n            <app-custom-dropdown [fromShengel]=\"true\" [options]=\"dropDownData\" \n            [selectedValue]=\"item.value[header.fieldName]\" [placeholder]=\"header.placeholder\"\n            (valueChange)=\"updateDropDown(item,header.fieldName,$event)\">\n            </app-custom-dropdown>\n          </div>\n          <div *ngIf=\"header.type === 'textcheckbox'\">\n            <div style=\"display: flex; justify-content: center;align-items: center;\">\n              <input type=\"text\" [(ngModel)]=\"item.value[header.fieldName][0]\" (ngModelChange)=\"updateCheckText(item, header.fieldName, item.value[header.fieldName][0])\"  style=\"width: 85px; height: 27px; text-align: center; padding: 5px; border-bottom: none; border-top: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; background: transparent;outline: none;\">\n              <label class=\"switch2\">\n                <input  class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n                type=\"checkbox\"\n                [checked]=\"item.value[header.fieldName][1] == header.toggleValue[0]\"/>\n                <span class=\"switch-label2\" data-on=\"Psi\" data-off=\"Bar\"></span> \n                <span class=\"switch-handle2\"></span> \n              </label> \n            </div>\n          </div>\n          <div *ngIf=\"header.type === 'labelcheckbox'\">\n            <div style=\"display: flex; justify-content: center;align-items: center;\">\n              <!-- HA 19DEC23 For translation -->\n              <span style=\"text-align:left;\">{{ 'calibrated' | i18n:i18nService.currentLanguage }}</span>\n              <label class=\"switch2\">\n                <input  class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n                type=\"checkbox\"\n                [checked]=\"item.value[header.fieldName] == header.toggleValue[0]\"/>\n                <span class=\"switch-label3\" data-on=\"Yes\" data-off=\"No\"></span> \n                <span class=\"switch-handle2\"></span> \n              </label> \n            </div>\n          </div>\n        </td>\n      </tr>\n      <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType === 'lockout'\">\n        <td colspan=\"1\">\n          <!-- HA 19DEC23 For translation -->\n          <b style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">{{ 'addMore' | i18n:i18nService.currentLanguage }} +</b>\n        </td>\n      </tr>\n      <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType != 'lockout'\">\n        <td colspan=\"3\">\n          <!-- HA 19DEC23 For translation -->\n          <b>{{ 'addMore' | i18n:i18nService.currentLanguage }}</b>\n        </td>\n        <td colspan=\"2\" style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">\n          +\n        </td>\n      </tr>\n      <tr  *ngFor=\"let item of tableAppendix | keyvalue; let k = index\">\n        <td *ngFor=\"let header of tableHeader; let l = index\">\n          <div *ngIf=\"header.type === 'text'\" >\n            <input type=\"text\" [(ngModel)]=\"item.value[0][header.fieldName]\" (ngModelChange)=\"updateLabel(k, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type.includes('dropdown') && item.key == 'dropDownData'\" >\n            <!-- HA 19DEC23 For translation -->\n            <app-custom-dropdown [fromShengel]=\"true\" [apiMeta]=\"dropDownApi\" \n            [selectedValue]=\"item.value[0].value[header.fieldName]\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n            (valueChange)=\"updateTableAppendix(item,header.fieldName,$event)\">\n            </app-custom-dropdown>\n          </div>\n          <div *ngIf=\"header.type.includes('datetime') && item.key == 'dateData'\">\n            <input [(ngModel)]=\"item.value[0].value[header.fieldName]\" type=\"datetime-local\"\n            (ngModelChange)=\"updateTableAppendix(item,header.fieldName,$event)\"\n            placeholder=\"DD/MM/YYYY HH:MM\">\n          </div>\n          <div *ngIf=\"header.type.includes('checkbox') && item.key == 'toggleData'\">\n            <label class=\"switch2\">\n              <input  class=\"switch-input2\" (change)=\"updateTableAppendix(item,header.fieldName,$event.target.checked)\" \n              type=\"checkbox\"\n              [checked]=\"item.value[0].value[header.fieldName] == item.value[0].toggleValue[0]\"/>\n              <span class=\"switch-label3\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n              <span class=\"switch-handle2\"></span> \n            </label> \n          </div>\n          <div *ngIf=\"header.type.includes('file') && item.key == 'fileData'\">\n            <app-file-upload [limitFileUploading]=\"2\" [allFiles]=\"item.value[0].value[header.fieldName]\" [tableFile]=\"true\"\n            (selectedFileData)=\"updateTableAppendix(item ,header.fieldName, $event)\"\n            [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>", 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}.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}.switch2{position:relative;width:73px;height:23.5px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:5px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input2{position:absolute;top:0;left:0;opacity:0}.switch-label2{position:relative;display:block;height:inherit;font-size:12px;background:rgba(175,172,172,.5);color:#000;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label3{position:relative;display:block;height:inherit;font-size:12px;background:red;color:#fff;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label2:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label3:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label2:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label3:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label2:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-label3:after{content:attr(data-on);left:11px;margin-left:10px;vertical-align:sub;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input2:checked~.switch-label2{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label3{background:rgb(2,173,2);border-color:#02ad02;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label2:before{opacity:0}.switch-input2:checked~.switch-label3:before{opacity:0}.switch-input2:checked~.switch-label2:after{opacity:1;margin-right:15px}.switch-input2:checked~.switch-label3:after{opacity:1;margin-right:15px}.switch-handle2{position:absolute;top:2px;left:2px;width:18px;height:18px;background:linear-gradient(to bottom,#FFFFFF 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:20%;box-shadow:1px 1px 5px #0003}.switch-handle2:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input2:checked~.switch-handle2{left:51px;box-shadow:-1px 1px 5px #0003}.switch-label2,.switch-handle2,.switch-label3{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\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: "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: "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: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "isDeleteFileButtonVisible", "isShowNoFileIcon", "tableFile", "question", "error"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableAppendixComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table-appendix', template: "<table class=\"table table-striped table-bordered\">\n    <thead class=\"none-border\" *ngIf=\"tableInfo.tableType === 'lockout' && tableInfo.tableHeader\">\n      <th></th>\n      <th>{{ tableInfo.tableHeader }}</th>\n      <th></th>\n    </thead>\n    <thead>\n      <th *ngFor=\"let header of tableHeader; let hi = index\" [class]=\"'col-md-' + header.size\">\n        {{ header.label }}\n      </th>\n    </thead>\n    <tbody id=\"safetyMeasuresTableBody\">\n      <tr *ngFor=\"let item of tableData; let i = index\">\n        <td *ngFor=\"let header of tableHeader; let j = index\">\n          <div *ngIf=\"header.type === 'text'\">\n            <input type=\"text\" [(ngModel)]=\"item[header.fieldName]\" [placeholder]=\"header.placeholder\" (ngModelChange)=\"tableInfo.tableType != 'lockout' ? updateLabel(i, header.fieldName, item[header.fieldName]) : updateNumber(item, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type.includes('number')\">\n            <!-- HA 19DEC23 For translation -->\n            <input type=\"number\" [(ngModel)]=\"item.value[header.fieldName]\" [disabled]=\"item.value[getPreviousTestKey(item, header.fieldName)] === null && tableInfo.tableType != 'lockout'\" (ngModelChange)=\"updateNumber(item, header.fieldName, item.value[header.fieldName])\" placeholder=\"{{ 'enterValue' | i18n:i18nService.currentLanguage }}\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type === 'dropdown'\">\n            <app-custom-dropdown [fromShengel]=\"true\" [options]=\"dropDownData\" \n            [selectedValue]=\"item.value[header.fieldName]\" [placeholder]=\"header.placeholder\"\n            (valueChange)=\"updateDropDown(item,header.fieldName,$event)\">\n            </app-custom-dropdown>\n          </div>\n          <div *ngIf=\"header.type === 'textcheckbox'\">\n            <div style=\"display: flex; justify-content: center;align-items: center;\">\n              <input type=\"text\" [(ngModel)]=\"item.value[header.fieldName][0]\" (ngModelChange)=\"updateCheckText(item, header.fieldName, item.value[header.fieldName][0])\"  style=\"width: 85px; height: 27px; text-align: center; padding: 5px; border-bottom: none; border-top: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; background: transparent;outline: none;\">\n              <label class=\"switch2\">\n                <input  class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n                type=\"checkbox\"\n                [checked]=\"item.value[header.fieldName][1] == header.toggleValue[0]\"/>\n                <span class=\"switch-label2\" data-on=\"Psi\" data-off=\"Bar\"></span> \n                <span class=\"switch-handle2\"></span> \n              </label> \n            </div>\n          </div>\n          <div *ngIf=\"header.type === 'labelcheckbox'\">\n            <div style=\"display: flex; justify-content: center;align-items: center;\">\n              <!-- HA 19DEC23 For translation -->\n              <span style=\"text-align:left;\">{{ 'calibrated' | i18n:i18nService.currentLanguage }}</span>\n              <label class=\"switch2\">\n                <input  class=\"switch-input2\" (change)=\"updateToggle(item,header,$event.target.checked)\" \n                type=\"checkbox\"\n                [checked]=\"item.value[header.fieldName] == header.toggleValue[0]\"/>\n                <span class=\"switch-label3\" data-on=\"Yes\" data-off=\"No\"></span> \n                <span class=\"switch-handle2\"></span> \n              </label> \n            </div>\n          </div>\n        </td>\n      </tr>\n      <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType === 'lockout'\">\n        <td colspan=\"1\">\n          <!-- HA 19DEC23 For translation -->\n          <b style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">{{ 'addMore' | i18n:i18nService.currentLanguage }} +</b>\n        </td>\n      </tr>\n      <tr *ngIf=\"tableInfo.addRow && tableInfo.tableType != 'lockout'\">\n        <td colspan=\"3\">\n          <!-- HA 19DEC23 For translation -->\n          <b>{{ 'addMore' | i18n:i18nService.currentLanguage }}</b>\n        </td>\n        <td colspan=\"2\" style=\"text-align: center; cursor: pointer;\" id=\"addSafety\"  (click)=\"addRow()\">\n          +\n        </td>\n      </tr>\n      <tr  *ngFor=\"let item of tableAppendix | keyvalue; let k = index\">\n        <td *ngFor=\"let header of tableHeader; let l = index\">\n          <div *ngIf=\"header.type === 'text'\" >\n            <input type=\"text\" [(ngModel)]=\"item.value[0][header.fieldName]\" (ngModelChange)=\"updateLabel(k, header.fieldName, item[header.fieldName])\" class=\"she-line-input table-input\">\n          </div>\n          <div *ngIf=\"header.type.includes('dropdown') && item.key == 'dropDownData'\" >\n            <!-- HA 19DEC23 For translation -->\n            <app-custom-dropdown [fromShengel]=\"true\" [apiMeta]=\"dropDownApi\" \n            [selectedValue]=\"item.value[0].value[header.fieldName]\" placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n            (valueChange)=\"updateTableAppendix(item,header.fieldName,$event)\">\n            </app-custom-dropdown>\n          </div>\n          <div *ngIf=\"header.type.includes('datetime') && item.key == 'dateData'\">\n            <input [(ngModel)]=\"item.value[0].value[header.fieldName]\" type=\"datetime-local\"\n            (ngModelChange)=\"updateTableAppendix(item,header.fieldName,$event)\"\n            placeholder=\"DD/MM/YYYY HH:MM\">\n          </div>\n          <div *ngIf=\"header.type.includes('checkbox') && item.key == 'toggleData'\">\n            <label class=\"switch2\">\n              <input  class=\"switch-input2\" (change)=\"updateTableAppendix(item,header.fieldName,$event.target.checked)\" \n              type=\"checkbox\"\n              [checked]=\"item.value[0].value[header.fieldName] == item.value[0].toggleValue[0]\"/>\n              <span class=\"switch-label3\" data-on=\"Safe\" data-off=\"Unsafe\"></span> \n              <span class=\"switch-handle2\"></span> \n            </label> \n          </div>\n          <div *ngIf=\"header.type.includes('file') && item.key == 'fileData'\">\n            <app-file-upload [limitFileUploading]=\"2\" [allFiles]=\"item.value[0].value[header.fieldName]\" [tableFile]=\"true\"\n            (selectedFileData)=\"updateTableAppendix(item ,header.fieldName, $event)\"\n            [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>", 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}.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}.switch2{position:relative;width:73px;height:23.5px;margin-left:5px;margin-top:3px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF 25px);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF 25px);border-radius:5px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px #0000000d;cursor:pointer}.switch-input2{position:absolute;top:0;left:0;opacity:0}.switch-label2{position:relative;display:block;height:inherit;font-size:12px;background:rgba(175,172,172,.5);color:#000;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label3{position:relative;display:block;height:inherit;font-size:12px;background:red;color:#fff;border-radius:inherit;box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026}.switch-label2:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label3:before,.switch-label2:after{position:absolute;top:50%;margin-top:-.5em;line-height:1;transition:inherit}.switch-label2:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label3:before{content:attr(data-off);right:11px;text-shadow:0 1px rgba(255,255,255,.5)}.switch-label2:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-label3:after{content:attr(data-on);left:11px;margin-left:10px;vertical-align:sub;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input2:checked~.switch-label2{background:#03a9f4;border-color:#03a9f4;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label3{background:rgb(2,173,2);border-color:#02ad02;box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}.switch-input2:checked~.switch-label2:before{opacity:0}.switch-input2:checked~.switch-label3:before{opacity:0}.switch-input2:checked~.switch-label2:after{opacity:1;margin-right:15px}.switch-input2:checked~.switch-label3:after{opacity:1;margin-right:15px}.switch-handle2{position:absolute;top:2px;left:2px;width:18px;height:18px;background:linear-gradient(to bottom,#FFFFFF 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#FFFFFF 40%,#f0f0f0);border-radius:20%;box-shadow:1px 1px 5px #0003}.switch-handle2:before{content:\"\";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(to bottom,#eeeeee,#FFFFFF);background-image:-webkit-linear-gradient(top,#eeeeee,#FFFFFF);border-radius:6px;box-shadow:inset 0 1px #00000005}.switch-input2:checked~.switch-handle2{left:51px;box-shadow:-1px 1px 5px #0003}.switch-label2,.switch-handle2,.switch-label3{transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .3s ease}\n"] }]
+        }], ctorParameters: function () { return [{ type: I18nService }]; }, propDecorators: { question: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class CustomDateComponent {
+    i18nService;
+    date;
+    readOnly = false; // VD 12Jun24 - readonly change
+    error;
+    errorMessage;
+    dateChange = new EventEmitter();
+    dateSelected;
+    constructor(i18nService) {
+        this.i18nService = i18nService;
+    }
+    ngOnInit() {
+        this.dateSelected = new Date(this.date);
+    }
+    // VD 02Aug24 - clear input changes
+    ngOnChanges(simplechanges) {
+        if (simplechanges['date']) {
+            this.dateSelected = new Date(this.date);
+        }
+    }
+    onDateChange(event) {
+        this.dateChange.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDateComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CustomDateComponent, selector: "app-custom-date", inputs: { date: "date", readOnly: "readOnly", error: "error", errorMessage: "errorMessage" }, outputs: { dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- date component -->\n<!-- VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<p>\n    <input\n      [class]=\"error ? 'invalid' : ''\"\n      [(ngModel)]=\"dateSelected\"\n      [owlDateTimeTrigger]=\"dt1\"\n      [owlDateTime]=\"dt1\"\n      [disabled]=\"readOnly\"\n      placeholder=\"DD/MM/YYYY\"\n      (input)=\"onDateChange($event)\"\n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n      (dateTimeChange)=\"onDateChange($event)\"\n    >\n    <owl-date-time [pickerType]=\"'calendar'\" #dt1></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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-custom-date', template: "<!-- date component -->\n<!-- VD 12Jun24 - readonly change-->\n<!-- VD 01Aug24 - validation change-->\n<p>\n    <input\n      [class]=\"error ? 'invalid' : ''\"\n      [(ngModel)]=\"dateSelected\"\n      [owlDateTimeTrigger]=\"dt1\"\n      [owlDateTime]=\"dt1\"\n      [disabled]=\"readOnly\"\n      placeholder=\"DD/MM/YYYY\"\n      (input)=\"onDateChange($event)\"\n      style=\"width: 100%; height: 35px; border: none; box-shadow: none; border-bottom: 1px solid #ccc;\"\n      (dateTimeChange)=\"onDateChange($event)\"\n    >\n    <owl-date-time [pickerType]=\"'calendar'\" #dt1></owl-date-time>\n  </p>\n  <span *ngIf=\"error\" class=\"error-msg\">{{errorMessage}}</span>", styles: [".invalid{border-color:red!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: I18nService }]; }, propDecorators: { date: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], dateChange: [{
+                type: Output
+            }] } });
+
+class CustomTimeComponent {
+    i18nService;
+    time;
+    readOnly = false; // VD 12Jun24 - readonly change
+    error;
+    errorMessage;
+    timeChange = new EventEmitter();
+    timeSelected;
+    constructor(i18nService) {
+        this.i18nService = i18nService;
+    }
+    ngOnInit() {
+        if (this.time) {
+            this.time = this.time['value'] ? this.time['value'] : this.time;
+            this.timeSelected = new Date(this.time);
         }
         else {
             // if no time set null value
@@ -5024,6 +5361,7 @@ class QuestionbookComponent {
     changeService;
     storageService;
     i18nService;
+    cdr;
     document;
     qbItem;
     questionItem;
@@ -5035,8 +5373,10 @@ class QuestionbookComponent {
     handleDropDown = new EventEmitter();
     handleQuestion = new EventEmitter(); // VD 19Jul01 - get updated question
     dropDownData;
+    dynamicHost;
     subQuestions;
     selectedFileData = [];
+    loadComponent$ = new BehaviorSubject(false);
     // HA 28DEC23 Added styling and logics to load the book type questions 
     qbRef;
     //  HA 19DEC23 Declaration for Salesforce Styling
@@ -5048,12 +5388,13 @@ class QuestionbookComponent {
     // VD 06Sep24 calendar changes
     handleCalendarDate = new EventEmitter();
     bookQuestionsMap = new Map();
-    constructor(sfService, dataService, changeService, storageService, i18nService, document) {
+    constructor(sfService, dataService, changeService, storageService, i18nService, cdr, document) {
         this.sfService = sfService;
         this.dataService = dataService;
         this.changeService = changeService;
         this.storageService = storageService;
         this.i18nService = i18nService;
+        this.cdr = cdr;
         this.document = document;
     }
     ngOnInit() {
@@ -5182,6 +5523,10 @@ class QuestionbookComponent {
                 });
                 this.storageService.update(element);
             }
+            // VD 06-09-24 to call the calendar component
+            if (element.Type__c === 'Calendar') {
+                this.openCalendarComponent(element);
+            }
         });
         this.subQuestions = [];
         this.setSubQuestions(this.questions);
@@ -5237,55 +5582,51 @@ class QuestionbookComponent {
         // console.log('inside QuestionbookComponent childEventCapture');
         console.log(event);
         this.changeService.announceChange(event);
-        // Process the changes in Table and Dropdown and store right value in ques.input
-        if (ques.Type__c == 'Dropdown' || ques.Type__c == 'Radio') {
-            // HA 19JAN24 Correction of dropdown values
-            ques.selectedObj = event.valueObj ? event.valueObj : null;
-            ques.input = event.selectedObj ? event.selectedObj : event.valueObj;
-            ques.selectedValue = event.valueObj ? event.valueObj : null;
-            // emit the dropdown data to parent
-            dropdownData['event'] = event.valueObj;
-            dropdownData['ques'] = ques;
-            if (dropdownData['event']) {
-                this.handleDropDown.emit(dropdownData);
-            } // VD 21DEC23 - dependent field change
-        }
-        else if (ques.Type__c == 'Location') {
-            ques.input = event.valueObj;
-            ques.selectedValue = event.valueObj.address;
-        }
-        else if (ques.Type__c == 'File') {
-            ques.input = this.selectedFileData = event;
-        }
-        else if (ques.Type__c == 'Date' || ques.Type__c == 'DateTime') { // HA 24JAN24 Converting Date and DateTime to UTC
-            if (event.value) {
-                let d = new Date(event.value);
-                let utcString = d.toISOString();
-                ques.input = utcString;
+        if (ques) {
+            if (ques.Type__c == 'Dropdown' || ques.Type__c == 'Radio') {
+                // HA 19JAN24 Correction of dropdown values
+                ques.selectedObj = event.valueObj ? event.valueObj : null;
+                ques.input = event.selectedObj ? event.selectedObj : event.valueObj;
+                ques.selectedValue = event.valueObj ? event.valueObj : null;
+                // emit the dropdown data to parent
+                dropdownData['event'] = event.valueObj;
+                dropdownData['ques'] = ques;
+                if (dropdownData['event']) {
+                    this.handleDropDown.emit(dropdownData);
+                } // VD 21DEC23 - dependent field change
+            }
+            else if (ques.Type__c == 'Location') {
+                ques.input = event.valueObj;
+                ques.selectedValue = event.valueObj.address;
+            }
+            else if (ques.Type__c == 'File') {
+                ques.input = this.selectedFileData = event;
+            }
+            else if (ques.Type__c == 'Date' || ques.Type__c == 'DateTime') { // HA 24JAN24 Converting Date and DateTime to UTC
+                if (event.value) {
+                    let d = new Date(event.value);
+                    let utcString = d.toISOString();
+                    ques.input = utcString;
+                }
+                else {
+                    ques.input = '';
+                }
+            }
+            else if (ques.Type__c == 'List') {
+                // VD 20Aug24 handling the list type  handle multiple object values
+                ques.input = this.dataService.getValue(event.valueObj, event.field);
             }
             else {
-                ques.input = '';
+                ques.input = event;
             }
+            // validating   error message
+            const hasError = ques.Error_Message__c && ((ques.Type__c === 'File' && ques.input.length == 0) || (ques.Type__c != 'File' && !ques.input));
+            ques.error = hasError ? new ErrorWrapper() : null;
+            // Once the right value is stored in ques.input store the ques (with input) in storageService
+            this.storageService.update(ques);
+            // VD 19Jul01 - get updated question
+            this.handleQuestion.emit(ques);
         }
-        else if (ques.Type__c == 'List') {
-            // VD 20Aug24 handling the list type  handle multiple object values
-            ques.input = this.dataService.getValue(event.valueObj, event.field);
-        }
-        else {
-            ques.input = event;
-        }
-        // validating   error message
-        const hasError = ques.Error_Message__c && ((ques.Type__c === 'File' && ques.input.length == 0) || (ques.Type__c != 'File' && !ques.input));
-        ques.error = hasError ? new ErrorWrapper() : null;
-        // if(ques.Is_Optional__c && !ques.input){
-        //   ques.error = new ErrorWrapper
-        // }else{
-        //   ques.error = null;  
-        // }
-        // Once the right value is stored in ques.input store the ques (with input) in storageService
-        this.storageService.update(ques);
-        // VD 19Jul01 - get updated question
-        this.handleQuestion.emit(ques);
     }
     deleteFile(fileData) {
         console.log('fileDATA', fileData);
@@ -5303,13 +5644,23 @@ class QuestionbookComponent {
         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", 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" }] });
+    openCalendarComponent(ques) {
+        const viewContainerRef = this.dynamicHost.viewContainerRef;
+        if (viewContainerRef) {
+            viewContainerRef.clear();
+            const componentRef = viewContainerRef.createComponent(CustomCalendarComponent);
+            componentRef.instance.question = ques;
+            componentRef.instance.eventSelected.subscribe((event) => this.childEventCapture(event));
+            componentRef.instance.dateSelected.subscribe((event) => this.getCurrentCalendar(event));
+        }
+    }
+    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: i0.ChangeDetectorRef }, { 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", handleCalendarDate: "handleCalendarDate" }, viewQueries: [{ propertyName: "dynamicHost", first: true, predicate: ComponenthostDirective, descendants: true, static: true }], 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                <!-- <app-custom-calendar [question]=\"ques\"  (eventSelected)=\"childEventCapture($event, ques)\" (dateSelected)=\"getCurrentCalendar($event)\"></app-custom-calendar> -->\n            </div>\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>\n\n  <!-- 06-09-24 for calendar type-->\n<ng-template dynamicComponentHost></ng-template>", 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: ComponenthostDirective, selector: "[dynamicComponentHost]" }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i10.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 ? 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: [{
+            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                <!-- <app-custom-calendar [question]=\"ques\"  (eventSelected)=\"childEventCapture($event, ques)\" (dateSelected)=\"getCurrentCalendar($event)\"></app-custom-calendar> -->\n            </div>\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>\n\n  <!-- 06-09-24 for calendar type-->\n<ng-template dynamicComponentHost></ng-template>", 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: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }]; }, propDecorators: { qbItem: [{
@@ -5332,6 +5683,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Output
             }], dropDownData: [{
                 type: Input
+            }], dynamicHost: [{
+                type: ViewChild,
+                args: [ComponenthostDirective, { static: true }]
             }], hadleDropDownDependent: [{
                 type: Output
             }], handleCalendarDate: [{
@@ -5643,789 +5997,484 @@ class BookletComponent {
                     if (ques.Type__c === 'Dropdown' || ques.Type__c === 'Radio') {
                         this.sqOptions.forEach(element => {
                             if (element['Reference_Field__c'] === key) {
-                                element['input'] = ques.input = value;
-                                element['selectedValue'] = ques.selectedValue = value;
-                            }
-                        });
-                    }
-                    // HA 24JAN24 To bind-in Date and DateTime
-                    else if (ques.Type__c === 'Date' || ques.Type__c == 'DateTime') {
-                        ques.input = new Date(value.toString());
-                    }
-                    // HA 12FEB24 To bind-in Location Type
-                    else if (ques.Type__c === 'Location') {
-                        console.log('value ', value);
-                        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;
-                    }
-                    this.answerList.push(ques); // HA 12FEB24 To give the value for data
-                }
-            }
-        }
-        else {
-            const question = {};
-            question['id'] = ques.Id;
-            // question['Question__c'] = ques.Question__c;
-            question['input'] = ques.input;
-            // HA 12FEB24 To bind-out Location Type
-            if (ques.Type__c === 'Location') {
-                question['input'] = ques.input ? ques.input : ques.selectedValue;
-            }
-            question['Type__c'] = ques.Type__c;
-            question['Question_No__c'] = ques.Question_No__c;
-            question['Reference_Field__c'] = ques?.Reference_Field__c;
-            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);
-        let questions = [];
-        // HA 31-JAN-24 Added ternary to avoid undefined
-        for (var sq in this.bookQuestionsMap?.get(qbId)?.Questions__r?.records) {
-            let q = this.bookQuestionsMap?.get(qbId).Questions__r.records[sq];
-            // HA 09FEB24 if question is there process
-            if (q) {
-                if ((q.Type__c == 'Dropdown' || q.Type__c == 'Radio') && this.sqOptions.get(q.Id)) {
-                    questions.push(this.sqOptions.get(q.Id));
-                }
-                else {
-                    questions.push(q);
-                }
-            }
-        }
-        // VD 12Jun24 field permisision changes
-        if (this.fieldRestrictions) {
-            const fieldRestrictions = new Map(Object.entries(this.fieldRestrictions.fields));
-            questions.forEach(ques => {
-                const restriction = fieldRestrictions.get(ques.Unique_Identifier__c);
-                if (restriction) {
-                    ques.Read_Only__c = restriction === 'readOnly';
-                    ques.Is_Hide__c = restriction === 'hide';
-                }
-            });
-        }
-        // console.log(questions);
-        return questions;
-    }
-    // VD 11Jun24 - translation changes
-    readTransQuestions(qbId) {
-        let record = [];
-        let translateRecord = this.translateMap.get(qbId);
-        if (translateRecord && translateRecord.length > 0) {
-            translateRecord.forEach(lanRec => {
-                if (lanRec.languageCode == this.languageCode) {
-                    record = lanRec.fields;
-                }
-            });
-        }
-        return record;
-    }
-    getText(value) {
-        var doc = new DOMParser().parseFromString(value, "text/html");
-        //console.log( doc.documentElement.textContent);
-        return this.sanitizer.bypassSecurityTrustHtml(doc.documentElement.textContent);
-    }
-    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", 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                <!--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: [{
-                type: Input
-            }], tkn: [{
-                type: Input
-            }], bookletJSON: [{
-                type: Input
-            }], dropdownDependentData: [{
-                type: Input
-            }], labelValue: [{
-                type: Input
-            }], token: [{
-                type: Input
-            }], languageCode: [{
-                type: Input
-            }], fieldRestrictions: [{
-                type: Input
-            }], handleBookletActionEvent: [{
-                type: Output
-            }], handlePage: [{
-                type: Output
-            }], hadleDropDownDependent: [{
-                type: Output
-            }], handleCalendarDate: [{
-                type: Output
-            }], dataBind: [{
-                type: Input
-            }] } });
-
-class FileViewComponent {
-    SharedService;
-    i18nService;
-    documentData;
-    api;
-    constructor(SharedService, i18nService) {
-        this.SharedService = SharedService;
-        this.i18nService = i18nService;
-    }
-    ngOnInit() {
-    }
-    viewDoc(link) {
-        /*
-       Author: Vinay Jadhav
-       @description: This function will view the file from azure blob.
-                     The link passed as a parameter will extract file name and pass it to the service
-       @param link: It will accept a doc link
-       @return: It will not return anything but it will either show or download the file.
-     */
-        if (link && link !== null) {
-            this.SharedService.processViewFile(link.split('/').pop(), this.api);
-        }
-        // window.open(environment.api.substring(0, environment.api.length - 1) + link, '_blank');
-    }
-    getDocIcon(docName) {
-        const ext = docName.split('.').pop(-1);
-        return this.SharedService.docIcon(ext);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileViewComponent, deps: [{ token: SharedService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FileViewComponent, selector: "app-file-view", inputs: { documentData: "documentData", api: "api" }, ngImport: i0, template: "<div class=\"col-lg-12\">\n    <div class=\"row\" style=\"text-align: left;\">\n      <div class=\"col-md-12\">\n          <!-- HA 19DEC23 For translation -->\n        <label class=\"she-label attachment\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n      </div>\n    </div>\n    <div class=\"row\" style=\"margin: 0;\">\n        <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of documentData;let i = index;\" style=\"margin-bottom: 10px;\">\n            <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\n                <div class=\"col-lg-3 document_image\">\n                    <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n                </div>\n                <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n                    {{file?.name}}\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"documentData?.length === 0\">\n      <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n  </div>\n  </div>\n  ", styles: [".document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px}.document_image{background:#48B7FF66;padding:10px}.document_name{padding:15px 5px}.document_delete{position:absolute;background:#C20808;display:block;height:30px;width:30px;border-radius:50px;bottom:32px;right:-15px;cursor:pointer}.document_delete img{position:relative;left:8px;top:3px}\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: "pipe", type: I18nPipe, name: "i18n" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-file-view', template: "<div class=\"col-lg-12\">\n    <div class=\"row\" style=\"text-align: left;\">\n      <div class=\"col-md-12\">\n          <!-- HA 19DEC23 For translation -->\n        <label class=\"she-label attachment\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n      </div>\n    </div>\n    <div class=\"row\" style=\"margin: 0;\">\n        <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of documentData;let i = index;\" style=\"margin-bottom: 10px;\">\n            <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\n                <div class=\"col-lg-3 document_image\">\n                    <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n                </div>\n                <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n                    {{file?.name}}\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"documentData?.length === 0\">\n      <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n  </div>\n  </div>\n  ", styles: [".document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px}.document_image{background:#48B7FF66;padding:10px}.document_name{padding:15px 5px}.document_delete{position:absolute;background:#C20808;display:block;height:30px;width:30px;border-radius:50px;bottom:32px;right:-15px;cursor:pointer}.document_delete img{position:relative;left:8px;top:3px}\n"] }]
-        }], ctorParameters: function () { return [{ type: SharedService }, { type: I18nService }]; }, propDecorators: { documentData: [{
-                type: Input
-            }], api: [{
-                type: Input
-            }] } });
-
-class SummaryPageComponent {
-    i18nService;
-    answerJson;
-    api;
-    booklet = [];
-    bookQuestionsMap = new Map();
-    actions = [];
-    sqOptions = new Map();
-    questions = [];
-    filteredQuestion;
-    constructor(i18nService) {
-        this.i18nService = i18nService;
-    }
-    ngOnInit() {
-        if (this.answerJson) {
-            console.log('answer json', this.answerJson);
-            this.booklet = this.answerJson.records;
-            // Process the Sub Question Options - This should be merged with bookQuestionsMap in future
-            for (var sq in this.answerJson.sqOptions) {
-                this.sqOptions.set(sq, this.answerJson.sqOptions[sq]);
-            }
-            // Process the Questions
-            for (var value in this.answerJson.bookQuestionsMap) {
-                this.bookQuestionsMap.set(value, this.answerJson.bookQuestionsMap[value]);
-            }
-        }
-        this.processSummary(this.booklet);
-    }
-    processSummary(data) {
-        let questions = [];
-        for (var i = 0; i < data.length; i++) {
-            let qbId = data[i].Id;
-            for (var sq in this.bookQuestionsMap?.get(qbId).Questions__r.records) {
-                let q = this.bookQuestionsMap?.get(qbId).Questions__r.records[sq];
-                if (q.Type__c == 'Dropdown') {
-                    questions.push(this.sqOptions.get(q.Id));
-                }
-                else {
-                    if (!q.input?.includes('|')) { // to avoid the unwanted fields for summary page
-                        questions.push(q);
-                    }
-                }
-            }
-        }
-        this.questions = questions;
-        console.log('question', this.questions);
-        // map the questions using  the the bookId
-        var qbIds = new Set(this.questions.map((item) => item.Question_Book__c));
-        this.filteredQuestion = [];
-        qbIds.forEach((id) => {
-            this.filteredQuestion.push({
-                Id: id,
-                questions: this.questions.filter((i) => i.Question_Book__c === id)
-            });
-        });
-        console.log('filteredQuestion', this.filteredQuestion);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SummaryPageComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SummaryPageComponent, selector: "lib-summary-page", inputs: { answerJson: "answerJson", api: "api" }, ngImport: i0, template: "<div class=\"col-lg-12\">\n  <div class=\"panel-group panel-group-joined\" id=\"details\">\n    <div class=\"panel panel-default\">\n        <div class=\"panel-heading\">\n          <h4 class=\"panel-title\">\n            <!-- HA 19DEC23 For Translation -->\n<!-- HA 20FEB24 PTW Details to Details -->\n            <a data-toggle=\"collapse\" data-parent=\"#details\" href=\"#collapse\" class=\"collapsed\">\n              {{'details' | i18n:i18nService.currentLanguage}}\n            </a>\n          </h4>\n        </div>\n      <div [id]=\"'collapse'\" class=\"collapse\">\n        <div class=\"panel-body\">\n            <div class=\"row\" *ngFor=\"let item of filteredQuestion;let i = index\">\n              <div class=\"col-lg-6\" *ngFor=\"let ques of item.questions\" >\n                  <label *ngIf=\"ques.Type__c != 'File'\" >{{ques.Question__c}}</label>\n                  <p *ngIf = \"ques.Type__c != 'Dropdown' && ques.Type__c != 'Table' && ques.Type__c != 'File'\">{{ ques.input }}</p>\n                  <p *ngIf=\"ques.Type__c == 'Dropdown'\">{{ ques.selectedValue }}</p>\n                  <p *ngIf=\"!ques.input\">N/A</p>\n                  <div *ngIf= \"ques.Type__c == 'Table'\">\n                    <div *ngFor=\"let item of ques.input\" class=\"align-center\">\n                      <img *ngIf=\"item.value == 'yes' \" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n                      <p *ngIf=\"item.value == 'yes' \">{{ item.ppe }}</p>\n                    </div>\n                  </div>\n                  <div *ngIf = \"ques.Type__c == 'File'\">\n                    <app-file-view [api]=\"api\" [documentData]=\"ques.input\"></app-file-view>\n                  </div>\n              </div>\n              <div *ngIf=\"i != filteredQuestion.length -1\" class=\"col-lg-12\">\n                <hr>\n              </div>\n            </div>\n      </div>\n    </div> \n  </div>\n</div>\n\n", styles: [".panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.align-center{display:flex}.align-center p{margin-left:8px}\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: FileViewComponent, selector: "app-file-view", inputs: ["documentData", "api"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SummaryPageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-summary-page', template: "<div class=\"col-lg-12\">\n  <div class=\"panel-group panel-group-joined\" id=\"details\">\n    <div class=\"panel panel-default\">\n        <div class=\"panel-heading\">\n          <h4 class=\"panel-title\">\n            <!-- HA 19DEC23 For Translation -->\n<!-- HA 20FEB24 PTW Details to Details -->\n            <a data-toggle=\"collapse\" data-parent=\"#details\" href=\"#collapse\" class=\"collapsed\">\n              {{'details' | i18n:i18nService.currentLanguage}}\n            </a>\n          </h4>\n        </div>\n      <div [id]=\"'collapse'\" class=\"collapse\">\n        <div class=\"panel-body\">\n            <div class=\"row\" *ngFor=\"let item of filteredQuestion;let i = index\">\n              <div class=\"col-lg-6\" *ngFor=\"let ques of item.questions\" >\n                  <label *ngIf=\"ques.Type__c != 'File'\" >{{ques.Question__c}}</label>\n                  <p *ngIf = \"ques.Type__c != 'Dropdown' && ques.Type__c != 'Table' && ques.Type__c != 'File'\">{{ ques.input }}</p>\n                  <p *ngIf=\"ques.Type__c == 'Dropdown'\">{{ ques.selectedValue }}</p>\n                  <p *ngIf=\"!ques.input\">N/A</p>\n                  <div *ngIf= \"ques.Type__c == 'Table'\">\n                    <div *ngFor=\"let item of ques.input\" class=\"align-center\">\n                      <img *ngIf=\"item.value == 'yes' \" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n                      <p *ngIf=\"item.value == 'yes' \">{{ item.ppe }}</p>\n                    </div>\n                  </div>\n                  <div *ngIf = \"ques.Type__c == 'File'\">\n                    <app-file-view [api]=\"api\" [documentData]=\"ques.input\"></app-file-view>\n                  </div>\n              </div>\n              <div *ngIf=\"i != filteredQuestion.length -1\" class=\"col-lg-12\">\n                <hr>\n              </div>\n            </div>\n      </div>\n    </div> \n  </div>\n</div>\n\n", styles: [".panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.align-center{display:flex}.align-center p{margin-left:8px}\n"] }]
-        }], ctorParameters: function () { return [{ type: I18nService }]; }, propDecorators: { answerJson: [{
-                type: Input
-            }], api: [{
-                type: Input
-            }] } });
-
-// HA 19DEC23 File created for translation
-class I18nModule {
-    static forRoot(config) {
-        return {
-            ngModule: I18nModule,
-            providers: [
-                I18nService,
-                {
-                    provide: i18nConfigService,
-                    useValue: config
-                }
-            ]
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: I18nModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: I18nModule, imports: [CommonModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: I18nModule, imports: [CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: I18nModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                    // I18nPipe,
-                    // I18nComponent
-                    ],
-                    imports: [
-                        CommonModule
-                    ]
-                }]
-        }] });
-
-// HA 19DEC23 File created for translation
-class I18nComponent {
-    i18nService;
-    // @Output() handleEve:EventEmitter<any> = new EventEmitter();
-    constructor(i18nService) {
-        this.i18nService = i18nService;
-    }
-    ngOnInit() {
-        console.log('ngOnInit component.ts');
-        // this.handleEve.emit();
-    }
-    firstClick(event) {
-        console.log('first ', event);
-        this.i18nService.languageChange(event);
-        // this.handleEve.emit();
-        window.location.reload();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: I18nComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: I18nComponent, selector: "app-i18n", ngImport: i0, template: `
-   <a  *ngFor="let lang of i18nService.langList" href="javascript:void(0);" class="not-selected-language" [ngClass]="{'selected-language': i18nService.currentLanguage === lang.lang}"
-
-            (click)="firstClick(lang.lang)">
-            <span class="mr-3">
-                {{lang.lang}}
-            </span>
-          </a>
-
-  `, isInline: true, styles: [".selected-language{color:green!important;font-weight:700;font-size:24px!important}\n", ".not-selected-language{color:#555;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: I18nComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-i18n', template: `
-   <a  *ngFor="let lang of i18nService.langList" href="javascript:void(0);" class="not-selected-language" [ngClass]="{'selected-language': i18nService.currentLanguage === lang.lang}"
-
-            (click)="firstClick(lang.lang)">
-            <span class="mr-3">
-                {{lang.lang}}
-            </span>
-          </a>
-
-  `, styles: [".selected-language{color:green!important;font-weight:700;font-size:24px!important}\n", ".not-selected-language{color:#555;font-weight:700}\n"] }]
-        }], ctorParameters: function () { return [{ type: I18nService }]; } });
-
-const enI18n = {
-    required: "Required",
-    addMore: "Add More",
-    select: "Select",
-    attachment: "Attachment",
-    chooseFiles: "Choose files",
-    uploadFile: "Upload File",
-    thisFieldIsRequired: "This field is required.",
-    pickYourLocation: "Pick Your Location",
-    // firstName: "First Name",
-    // lastName: "Last Name",
-    // division: "Division",
-    // numberPlate: "Number Plate",
-    calibrated: "Calibrated",
-    enterValue: "Enter Value",
-    details: "Details",
-    pleaseMakeChoice: "Please make a choice",
-    attach: "Attach",
-    add: "Add",
-    zeroOfZero: "0 of 0",
-    selectDate: "Select date",
-    toBuyTicket: "to buy a ticket",
-    pickLocation: "Pick Location",
-    enterLocation: "Enter Location",
-    searchNearestLocation: "Search Nearest Location",
-    currentTheme: "ltr",
-};
-
-var enI18n$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    default: enI18n
-});
-
-const arI18n = {
-    required: "مطلوب",
-    addMore: "أضف المزيد",
-    select: "يختار",
-    attachment: "مرفق",
-    chooseFiles: "اختر الملفات",
-    uploadFile: "رفع ملف",
-    thisFieldIsRequired: "هذه الخانة مطلوبه.",
-    pickYourLocation: "اختر موقعك",
-    // firstName: "الاسم الأول",
-    // lastName: "اسم العائلة",
-    // division: "قسم",
-    // numberPlate: "لوحة الأرقام",
-    calibrated: "معايرة",
-    enterValue: "أدخل القيمة",
-    details: "تفاصيل",
-    pleaseMakeChoice: "يرجى الاختيار",
-    attach: "يربط",
-    add: "يضيف",
-    zeroOfZero: "0 من 0",
-    selectDate: "حدد تاريخ",
-    toBuyTicket: "لشراء تذكرة",
-    pickLocation: "اختر الموقع",
-    enterLocation: "إدخال الدولة",
-    searchNearestLocation: "البحث عن أقرب موقع",
-    currentTheme: "rtl",
-};
-
-var arI18n$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    default: arI18n
-});
-
-const tamI18n = {
-    required: "தேவை",
-    addMore: "மேலும் சேர்க்கவும்",
-    select: "தேர்ந்தெடுக்கவும்",
-    attachment: "இணைப்பு",
-    chooseFiles: "கோப்புகளைத் தேர்ந்தெடுக்கவும்",
-    uploadFile: "கோப்பை பதிவேற்றவும்",
-    thisFieldIsRequired: "இந்த புலம் தேவை.",
-    pickYourLocation: "உங்கள் இருப்பிடத்தைத் தேர்ந்தெடுக்கவும்",
-    // firstName: "முதல் பெயர்",
-    // lastName: "கடைசி பெயர்",
-    // division: "பிரிவு",
-    // numberPlate: "இலக்கத்தகடு",
-    calibrated: "அளவீடு செய்யப்பட்டது",
-    enterValue: "மதிப்பை உள்ளிடவும்",
-    details: "விவரங்கள்",
-    pleaseMakeChoice: "தயவுசெய்து தேர்வு செய்யுங்கள்",
-    attach: "இணைக்கவும்",
-    add: "சேர்",
-    zeroOfZero: "0 இல் 0",
-    selectDate: "தேதியைத் தேர்ந்தெடுக்கவும்",
-    toBuyTicket: "டிக்கெட் வாங்க",
-    pickLocation: "இருப்பிடத்தைத் தேர்ந்தெடுக்கவும்",
-    enterLocation: "இருப்பிடத்தை உள்ளிடவும்",
-    searchNearestLocation: "அருகிலுள்ள இடத்தைத் தேடுங்கள்",
-    currentTheme: "ltr",
-};
-
-var tamI18n$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    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
+                                element['input'] = ques.input = value;
+                                element['selectedValue'] = ques.selectedValue = value;
+                            }
+                        });
+                    }
+                    // HA 24JAN24 To bind-in Date and DateTime
+                    else if (ques.Type__c === 'Date' || ques.Type__c == 'DateTime') {
+                        ques.input = new Date(value.toString());
+                    }
+                    // HA 12FEB24 To bind-in Location Type
+                    else if (ques.Type__c === 'Location') {
+                        console.log('value ', value);
+                        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;
+                    }
+                    this.answerList.push(ques); // HA 12FEB24 To give the value for data
                 }
             }
         }
-        this.generateCalendar(); // Regenerate the calendar to reflect the changes
-    }
-    closeModal() {
-        this.isModalOpen = false;
+        else {
+            const question = {};
+            question['id'] = ques.Id;
+            // question['Question__c'] = ques.Question__c;
+            question['input'] = ques.input;
+            // HA 12FEB24 To bind-out Location Type
+            if (ques.Type__c === 'Location') {
+                question['input'] = ques.input ? ques.input : ques.selectedValue;
+            }
+            question['Type__c'] = ques.Type__c;
+            question['Question_No__c'] = ques.Question_No__c;
+            question['Reference_Field__c'] = ques?.Reference_Field__c;
+            this.answerList.push(question);
+        }
     }
-    // VD 06Sep24 calendar changes
+    // 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 an existing event for the given date
-        const existingEvent = day.events.find(event => event.date === day.date);
+        // Find if an event already exists for the given date
+        const existingEvent = this.allEvents.find(event => event.date.toDateString() === day.toDateString());
         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
+            // If the event exists, push the new entries to the existing entries
             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,
+                id: '',
+                date: day,
                 entries: [newEntries] // Wrap the new entries in an array
             };
-            day.events.push(newEvent);
             this.allEvents.push(newEvent);
         }
-        this.generateCalendar();
-        console.log('allEvents', this.allEvents);
+        console.log('all events booklet');
+        console.log(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;
-                    }, {});
+    readQuestions(qbId) {
+        // console.log('inside BookletComponent.readQuestions ' + qbId);
+        // console.log(this.bookQuestionsMap.size);
+        let questions = [];
+        // HA 31-JAN-24 Added ternary to avoid undefined
+        for (var sq in this.bookQuestionsMap?.get(qbId)?.Questions__r?.records) {
+            let q = this.bookQuestionsMap?.get(qbId).Questions__r.records[sq];
+            // HA 09FEB24 if question is there process
+            if (q) {
+                if ((q.Type__c == 'Dropdown' || q.Type__c == 'Radio') && this.sqOptions.get(q.Id)) {
+                    questions.push(this.sqOptions.get(q.Id));
+                }
+                else {
+                    questions.push(q);
+                }
+            }
+        }
+        // VD 12Jun24 field permisision changes
+        if (this.fieldRestrictions) {
+            const fieldRestrictions = new Map(Object.entries(this.fieldRestrictions.fields));
+            questions.forEach(ques => {
+                const restriction = fieldRestrictions.get(ques.Unique_Identifier__c);
+                if (restriction) {
+                    ques.Read_Only__c = restriction === 'readOnly';
+                    ques.Is_Hide__c = restriction === 'hide';
+                }
+            });
+        }
+        // console.log(questions);
+        return questions;
+    }
+    // VD 11Jun24 - translation changes
+    readTransQuestions(qbId) {
+        let record = [];
+        let translateRecord = this.translateMap.get(qbId);
+        if (translateRecord && translateRecord.length > 0) {
+            translateRecord.forEach(lanRec => {
+                if (lanRec.languageCode == this.languageCode) {
+                    record = lanRec.fields;
                 }
+            });
+        }
+        return record;
+    }
+    getText(value) {
+        var doc = new DOMParser().parseFromString(value, "text/html");
+        //console.log( doc.documentElement.textContent);
+        return this.sanitizer.bypassSecurityTrustHtml(doc.documentElement.textContent);
+    }
+    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", 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                <!--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: [{
+                type: Input
+            }], tkn: [{
+                type: Input
+            }], bookletJSON: [{
+                type: Input
+            }], dropdownDependentData: [{
+                type: Input
+            }], labelValue: [{
+                type: Input
+            }], token: [{
+                type: Input
+            }], languageCode: [{
+                type: Input
+            }], fieldRestrictions: [{
+                type: Input
+            }], handleBookletActionEvent: [{
+                type: Output
+            }], handlePage: [{
+                type: Output
+            }], hadleDropDownDependent: [{
+                type: Output
+            }], handleCalendarDate: [{
+                type: Output
+            }], dataBind: [{
+                type: Input
+            }] } });
+
+class FileViewComponent {
+    SharedService;
+    i18nService;
+    documentData;
+    api;
+    constructor(SharedService, i18nService) {
+        this.SharedService = SharedService;
+        this.i18nService = i18nService;
+    }
+    ngOnInit() {
+    }
+    viewDoc(link) {
+        /*
+       Author: Vinay Jadhav
+       @description: This function will view the file from azure blob.
+                     The link passed as a parameter will extract file name and pass it to the service
+       @param link: It will accept a doc link
+       @return: It will not return anything but it will either show or download the file.
+     */
+        if (link && link !== null) {
+            this.SharedService.processViewFile(link.split('/').pop(), this.api);
+        }
+        // window.open(environment.api.substring(0, environment.api.length - 1) + link, '_blank');
+    }
+    getDocIcon(docName) {
+        const ext = docName.split('.').pop(-1);
+        return this.SharedService.docIcon(ext);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileViewComponent, deps: [{ token: SharedService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FileViewComponent, selector: "app-file-view", inputs: { documentData: "documentData", api: "api" }, ngImport: i0, template: "<div class=\"col-lg-12\">\n    <div class=\"row\" style=\"text-align: left;\">\n      <div class=\"col-md-12\">\n          <!-- HA 19DEC23 For translation -->\n        <label class=\"she-label attachment\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n      </div>\n    </div>\n    <div class=\"row\" style=\"margin: 0;\">\n        <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of documentData;let i = index;\" style=\"margin-bottom: 10px;\">\n            <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\n                <div class=\"col-lg-3 document_image\">\n                    <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n                </div>\n                <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n                    {{file?.name}}\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"documentData?.length === 0\">\n      <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n  </div>\n  </div>\n  ", styles: [".document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px}.document_image{background:#48B7FF66;padding:10px}.document_name{padding:15px 5px}.document_delete{position:absolute;background:#C20808;display:block;height:30px;width:30px;border-radius:50px;bottom:32px;right:-15px;cursor:pointer}.document_delete img{position:relative;left:8px;top:3px}\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: "pipe", type: I18nPipe, name: "i18n" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-file-view', template: "<div class=\"col-lg-12\">\n    <div class=\"row\" style=\"text-align: left;\">\n      <div class=\"col-md-12\">\n          <!-- HA 19DEC23 For translation -->\n        <label class=\"she-label attachment\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\n      </div>\n    </div>\n    <div class=\"row\" style=\"margin: 0;\">\n        <div class=\"col-lg-3 document-cnt\" *ngFor=\"let file of documentData;let i = index;\" style=\"margin-bottom: 10px;\">\n            <div class=\"row\" (click)=\"viewDoc(file?.doc)\" style=\"cursor: pointer;\">\n                <div class=\"col-lg-3 document_image\">\n                    <img [src]=\"getDocIcon(file?.doc)\" style=\"margin-right: 10px;height: 40px;\">\n                </div>\n                <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\n                    {{file?.name}}\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"documentData?.length === 0\">\n      <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\n  </div>\n  </div>\n  ", styles: [".document-cnt{border:1px solid #48B7FF;border-radius:5px;margin-right:30px}.document_image{background:#48B7FF66;padding:10px}.document_name{padding:15px 5px}.document_delete{position:absolute;background:#C20808;display:block;height:30px;width:30px;border-radius:50px;bottom:32px;right:-15px;cursor:pointer}.document_delete img{position:relative;left:8px;top:3px}\n"] }]
+        }], ctorParameters: function () { return [{ type: SharedService }, { type: I18nService }]; }, propDecorators: { documentData: [{
+                type: Input
+            }], api: [{
+                type: Input
+            }] } });
+
+class SummaryPageComponent {
+    i18nService;
+    answerJson;
+    api;
+    booklet = [];
+    bookQuestionsMap = new Map();
+    actions = [];
+    sqOptions = new Map();
+    questions = [];
+    filteredQuestion;
+    constructor(i18nService) {
+        this.i18nService = i18nService;
+    }
+    ngOnInit() {
+        if (this.answerJson) {
+            console.log('answer json', this.answerJson);
+            this.booklet = this.answerJson.records;
+            // Process the Sub Question Options - This should be merged with bookQuestionsMap in future
+            for (var sq in this.answerJson.sqOptions) {
+                this.sqOptions.set(sq, this.answerJson.sqOptions[sq]);
             }
-        }
-        else {
-            if (this.selectedDay) {
-                this.addEvent(this.selectedDay, this.calendarQuestion);
+            // Process the Questions
+            for (var value in this.answerJson.bookQuestionsMap) {
+                this.bookQuestionsMap.set(value, this.answerJson.bookQuestionsMap[value]);
             }
         }
-        this.closeModal();
-        this.generateCalendar();
-    }
-    onCancel() {
-        console.log('Cancel button clicked');
-        this.closeModal();
+        this.processSummary(this.booklet);
     }
-    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);
+    processSummary(data) {
+        let questions = [];
+        for (var i = 0; i < data.length; i++) {
+            let qbId = data[i].Id;
+            for (var sq in this.bookQuestionsMap?.get(qbId).Questions__r.records) {
+                let q = this.bookQuestionsMap?.get(qbId).Questions__r.records[sq];
+                if (q.Type__c == 'Dropdown') {
+                    questions.push(this.sqOptions.get(q.Id));
+                }
+                else {
+                    if (!q.input?.includes('|')) { // to avoid the unwanted fields for summary page
+                        questions.push(q);
+                    }
+                }
+            }
         }
-        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;
+        this.questions = questions;
+        console.log('question', this.questions);
+        // map the questions using  the the bookId
+        var qbIds = new Set(this.questions.map((item) => item.Question_Book__c));
+        this.filteredQuestion = [];
+        qbIds.forEach((id) => {
+            this.filteredQuestion.push({
+                Id: id,
+                questions: this.questions.filter((i) => i.Question_Book__c === id)
+            });
+        });
+        console.log('filteredQuestion', this.filteredQuestion);
     }
-    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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SummaryPageComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SummaryPageComponent, selector: "lib-summary-page", inputs: { answerJson: "answerJson", api: "api" }, ngImport: i0, template: "<div class=\"col-lg-12\">\n  <div class=\"panel-group panel-group-joined\" id=\"details\">\n    <div class=\"panel panel-default\">\n        <div class=\"panel-heading\">\n          <h4 class=\"panel-title\">\n            <!-- HA 19DEC23 For Translation -->\n<!-- HA 20FEB24 PTW Details to Details -->\n            <a data-toggle=\"collapse\" data-parent=\"#details\" href=\"#collapse\" class=\"collapsed\">\n              {{'details' | i18n:i18nService.currentLanguage}}\n            </a>\n          </h4>\n        </div>\n      <div [id]=\"'collapse'\" class=\"collapse\">\n        <div class=\"panel-body\">\n            <div class=\"row\" *ngFor=\"let item of filteredQuestion;let i = index\">\n              <div class=\"col-lg-6\" *ngFor=\"let ques of item.questions\" >\n                  <label *ngIf=\"ques.Type__c != 'File'\" >{{ques.Question__c}}</label>\n                  <p *ngIf = \"ques.Type__c != 'Dropdown' && ques.Type__c != 'Table' && ques.Type__c != 'File'\">{{ ques.input }}</p>\n                  <p *ngIf=\"ques.Type__c == 'Dropdown'\">{{ ques.selectedValue }}</p>\n                  <p *ngIf=\"!ques.input\">N/A</p>\n                  <div *ngIf= \"ques.Type__c == 'Table'\">\n                    <div *ngFor=\"let item of ques.input\" class=\"align-center\">\n                      <img *ngIf=\"item.value == 'yes' \" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n                      <p *ngIf=\"item.value == 'yes' \">{{ item.ppe }}</p>\n                    </div>\n                  </div>\n                  <div *ngIf = \"ques.Type__c == 'File'\">\n                    <app-file-view [api]=\"api\" [documentData]=\"ques.input\"></app-file-view>\n                  </div>\n              </div>\n              <div *ngIf=\"i != filteredQuestion.length -1\" class=\"col-lg-12\">\n                <hr>\n              </div>\n            </div>\n      </div>\n    </div> \n  </div>\n</div>\n\n", styles: [".panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.align-center{display:flex}.align-center p{margin-left:8px}\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: FileViewComponent, selector: "app-file-view", inputs: ["documentData", "api"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CustomCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SummaryPageComponent, 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: [{
+            args: [{ selector: 'lib-summary-page', template: "<div class=\"col-lg-12\">\n  <div class=\"panel-group panel-group-joined\" id=\"details\">\n    <div class=\"panel panel-default\">\n        <div class=\"panel-heading\">\n          <h4 class=\"panel-title\">\n            <!-- HA 19DEC23 For Translation -->\n<!-- HA 20FEB24 PTW Details to Details -->\n            <a data-toggle=\"collapse\" data-parent=\"#details\" href=\"#collapse\" class=\"collapsed\">\n              {{'details' | i18n:i18nService.currentLanguage}}\n            </a>\n          </h4>\n        </div>\n      <div [id]=\"'collapse'\" class=\"collapse\">\n        <div class=\"panel-body\">\n            <div class=\"row\" *ngFor=\"let item of filteredQuestion;let i = index\">\n              <div class=\"col-lg-6\" *ngFor=\"let ques of item.questions\" >\n                  <label *ngIf=\"ques.Type__c != 'File'\" >{{ques.Question__c}}</label>\n                  <p *ngIf = \"ques.Type__c != 'Dropdown' && ques.Type__c != 'Table' && ques.Type__c != 'File'\">{{ ques.input }}</p>\n                  <p *ngIf=\"ques.Type__c == 'Dropdown'\">{{ ques.selectedValue }}</p>\n                  <p *ngIf=\"!ques.input\">N/A</p>\n                  <div *ngIf= \"ques.Type__c == 'Table'\">\n                    <div *ngFor=\"let item of ques.input\" class=\"align-center\">\n                      <img *ngIf=\"item.value == 'yes' \" [src]=\"item.imageSrc\" [alt]=\"item.altText\">\n                      <p *ngIf=\"item.value == 'yes' \">{{ item.ppe }}</p>\n                    </div>\n                  </div>\n                  <div *ngIf = \"ques.Type__c == 'File'\">\n                    <app-file-view [api]=\"api\" [documentData]=\"ques.input\"></app-file-view>\n                  </div>\n              </div>\n              <div *ngIf=\"i != filteredQuestion.length -1\" class=\"col-lg-12\">\n                <hr>\n              </div>\n            </div>\n      </div>\n    </div> \n  </div>\n</div>\n\n", styles: [".panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.align-center{display:flex}.align-center p{margin-left:8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: I18nService }]; }, propDecorators: { answerJson: [{
                 type: Input
-            }], question: [{
+            }], api: [{
                 type: Input
             }] } });
 
+// HA 19DEC23 File created for translation
+class I18nModule {
+    static forRoot(config) {
+        return {
+            ngModule: I18nModule,
+            providers: [
+                I18nService,
+                {
+                    provide: i18nConfigService,
+                    useValue: config
+                }
+            ]
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: I18nModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: I18nModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: I18nModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: I18nModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                    // I18nPipe,
+                    // I18nComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+// HA 19DEC23 File created for translation
+class I18nComponent {
+    i18nService;
+    // @Output() handleEve:EventEmitter<any> = new EventEmitter();
+    constructor(i18nService) {
+        this.i18nService = i18nService;
+    }
+    ngOnInit() {
+        console.log('ngOnInit component.ts');
+        // this.handleEve.emit();
+    }
+    firstClick(event) {
+        console.log('first ', event);
+        this.i18nService.languageChange(event);
+        // this.handleEve.emit();
+        window.location.reload();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: I18nComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: I18nComponent, selector: "app-i18n", ngImport: i0, template: `
+   <a  *ngFor="let lang of i18nService.langList" href="javascript:void(0);" class="not-selected-language" [ngClass]="{'selected-language': i18nService.currentLanguage === lang.lang}"
+
+            (click)="firstClick(lang.lang)">
+            <span class="mr-3">
+                {{lang.lang}}
+            </span>
+          </a>
+
+  `, isInline: true, styles: [".selected-language{color:green!important;font-weight:700;font-size:24px!important}\n", ".not-selected-language{color:#555;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: I18nComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-i18n', template: `
+   <a  *ngFor="let lang of i18nService.langList" href="javascript:void(0);" class="not-selected-language" [ngClass]="{'selected-language': i18nService.currentLanguage === lang.lang}"
+
+            (click)="firstClick(lang.lang)">
+            <span class="mr-3">
+                {{lang.lang}}
+            </span>
+          </a>
+
+  `, styles: [".selected-language{color:green!important;font-weight:700;font-size:24px!important}\n", ".not-selected-language{color:#555;font-weight:700}\n"] }]
+        }], ctorParameters: function () { return [{ type: I18nService }]; } });
+
+const enI18n = {
+    required: "Required",
+    addMore: "Add More",
+    select: "Select",
+    attachment: "Attachment",
+    chooseFiles: "Choose files",
+    uploadFile: "Upload File",
+    thisFieldIsRequired: "This field is required.",
+    pickYourLocation: "Pick Your Location",
+    // firstName: "First Name",
+    // lastName: "Last Name",
+    // division: "Division",
+    // numberPlate: "Number Plate",
+    calibrated: "Calibrated",
+    enterValue: "Enter Value",
+    details: "Details",
+    pleaseMakeChoice: "Please make a choice",
+    attach: "Attach",
+    add: "Add",
+    zeroOfZero: "0 of 0",
+    selectDate: "Select date",
+    toBuyTicket: "to buy a ticket",
+    pickLocation: "Pick Location",
+    enterLocation: "Enter Location",
+    searchNearestLocation: "Search Nearest Location",
+    currentTheme: "ltr",
+};
+
+var enI18n$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    default: enI18n
+});
+
+const arI18n = {
+    required: "مطلوب",
+    addMore: "أضف المزيد",
+    select: "يختار",
+    attachment: "مرفق",
+    chooseFiles: "اختر الملفات",
+    uploadFile: "رفع ملف",
+    thisFieldIsRequired: "هذه الخانة مطلوبه.",
+    pickYourLocation: "اختر موقعك",
+    // firstName: "الاسم الأول",
+    // lastName: "اسم العائلة",
+    // division: "قسم",
+    // numberPlate: "لوحة الأرقام",
+    calibrated: "معايرة",
+    enterValue: "أدخل القيمة",
+    details: "تفاصيل",
+    pleaseMakeChoice: "يرجى الاختيار",
+    attach: "يربط",
+    add: "يضيف",
+    zeroOfZero: "0 من 0",
+    selectDate: "حدد تاريخ",
+    toBuyTicket: "لشراء تذكرة",
+    pickLocation: "اختر الموقع",
+    enterLocation: "إدخال الدولة",
+    searchNearestLocation: "البحث عن أقرب موقع",
+    currentTheme: "rtl",
+};
+
+var arI18n$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    default: arI18n
+});
+
+const tamI18n = {
+    required: "தேவை",
+    addMore: "மேலும் சேர்க்கவும்",
+    select: "தேர்ந்தெடுக்கவும்",
+    attachment: "இணைப்பு",
+    chooseFiles: "கோப்புகளைத் தேர்ந்தெடுக்கவும்",
+    uploadFile: "கோப்பை பதிவேற்றவும்",
+    thisFieldIsRequired: "இந்த புலம் தேவை.",
+    pickYourLocation: "உங்கள் இருப்பிடத்தைத் தேர்ந்தெடுக்கவும்",
+    // firstName: "முதல் பெயர்",
+    // lastName: "கடைசி பெயர்",
+    // division: "பிரிவு",
+    // numberPlate: "இலக்கத்தகடு",
+    calibrated: "அளவீடு செய்யப்பட்டது",
+    enterValue: "மதிப்பை உள்ளிடவும்",
+    details: "விவரங்கள்",
+    pleaseMakeChoice: "தயவுசெய்து தேர்வு செய்யுங்கள்",
+    attach: "இணைக்கவும்",
+    add: "சேர்",
+    zeroOfZero: "0 இல் 0",
+    selectDate: "தேதியைத் தேர்ந்தெடுக்கவும்",
+    toBuyTicket: "டிக்கெட் வாங்க",
+    pickLocation: "இருப்பிடத்தைத் தேர்ந்தெடுக்கவும்",
+    enterLocation: "இருப்பிடத்தை உள்ளிடவும்",
+    searchNearestLocation: "அருகிலுள்ள இடத்தைத் தேடுங்கள்",
+    currentTheme: "ltr",
+};
+
+var tamI18n$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    default: tamI18n
+});
+
 class LoaderComponent {
     loaderService;
     isLoading = false;
@@ -6489,6 +6538,7 @@ class NxtAppModule {
             MyDatePickerModule,
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
+            ComponenthostDirective,
             GetValuePipe,
             //    VD 23JAN24 removed HttpClientModule
             NgSelectModule,
@@ -6501,7 +6551,6 @@ class NxtAppModule {
             ReactiveFormsModule, NgxSpinnerModule, I18nModule, i13.NgCircleProgressModule], exports: [NxtAppComponent,
             QuestionnaireComponent,
             BookletComponent,
-            QuestionbookComponent,
             SummaryPageComponent,
             I18nPipe,
             I18nComponent] });
@@ -6637,6 +6686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         MyDatePickerModule,
                         OwlDateTimeModule,
                         OwlNativeDateTimeModule,
+                        ComponenthostDirective,
                         GetValuePipe,
                         //    VD 23JAN24 removed HttpClientModule
                         NgSelectModule,
@@ -6730,7 +6780,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     exports: [NxtAppComponent,
                         QuestionnaireComponent,
                         BookletComponent,
-                        QuestionbookComponent,
                         SummaryPageComponent,
                         I18nPipe,
                         I18nComponent,