@rangertechnologies/ngnxt 2.1.80 → 2.1.82

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -4278,14 +4278,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 // Changes commented out due to Angular version compatibility; will apply after upgrade.
 // // RS 06JAN2025
+// RS 17JAN2025 
+// An array fontFamilyArr is created containing a list of font family names as strings.
+const fontFamilyArr = ["Roboto", "Roboto Condensed", "Arial", "Verdana", "Tahoma", "Trebuchet MS",
+    "Georgia", "Times New Roman", "Courier New", "Palatino Linotype",
+    "Segoe UI", "Calibri", "Calibri Light", "Sans-Serif", "Helvetica",
+    "Impact", "Garamond", "Comic Sans MS", "Lucida Console", "Franklin Gothic Medium"];
 // Register Quill modules
 Quill.register('modules/mention', Mention);
 ImageResizor.Quill = Quill;
 Quill.register('modules/imageResizor', ImageResizor);
+// RS 17JAN2025 
+//The Quill font style attributor is imported and it is registered with Quil
+let fonts = Quill.import("attributors/style/font");
+fonts.whitelist = fontFamilyArr;
+Quill.register(fonts, true);
 const QuillConfiguration = {
     imageResizor: {},
     toolbar: {
         container: [
+            [{ 'font': fontFamilyArr }], //RS 17JAN2025  Added font family dropdown
             ['bold', 'italic', 'underline', 'strike'],
             ['blockquote', 'code-block'],
             [{ header: [1, 2, 3, 4, 5, 6, false] }],
@@ -4397,11 +4409,11 @@ class CustomRichTextComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRichTextComponent, deps: [{ token: I18nService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomRichTextComponent, isStandalone: true, selector: "app-custom-rich-text", inputs: { value: "value", placeholder: "placeholder", error: "error", question: "question", rows: "rows", readOnly: "readOnly", minLength: "minLength", maxLength: "maxLength" }, outputs: { textValueChange: "textValueChange" }, ngImport: i0, template: "<!-- RS 06JAN25 -->\n<div class=\"rich-text-container\">\n  <quill-editor\n    [(ngModel)]=\"value\"\n    [placeholder]=\"placeholder\"\n    [modules]=\"quillConfiguration\"\n    [readOnly]=\"readOnly\"\n    (onContentChanged)=\"onEditorChange($event)\"\n    [class.error]=\"error\">\n  </quill-editor>\n  <div *ngIf=\"error\" class=\"error-message\">\n    {{ error }}\n  </div>\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}\n"], dependencies: [{ kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: FormsModule }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomRichTextComponent, isStandalone: true, selector: "app-custom-rich-text", inputs: { value: "value", placeholder: "placeholder", error: "error", question: "question", rows: "rows", readOnly: "readOnly", minLength: "minLength", maxLength: "maxLength" }, outputs: { textValueChange: "textValueChange" }, ngImport: i0, template: "<!-- RS 06JAN25 -->\n<div class=\"rich-text-container\">\n  <quill-editor\n    [(ngModel)]=\"value\"\n    [placeholder]=\"placeholder\"\n    [modules]=\"quillConfiguration\"\n    [readOnly]=\"readOnly\"\n    (onContentChanged)=\"onEditorChange($event)\"\n    [class.error]=\"error\">\n  </quill-editor>\n  <div *ngIf=\"error\" class=\"error-message\">\n    {{ error }}\n  </div>\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}\n"], dependencies: [{ kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRichTextComponent, decorators: [{
             type: Component,
-            args: [{ imports: [QuillEditorComponent, FormsModule], selector: 'app-custom-rich-text', standalone: true, template: "<!-- RS 06JAN25 -->\n<div class=\"rich-text-container\">\n  <quill-editor\n    [(ngModel)]=\"value\"\n    [placeholder]=\"placeholder\"\n    [modules]=\"quillConfiguration\"\n    [readOnly]=\"readOnly\"\n    (onContentChanged)=\"onEditorChange($event)\"\n    [class.error]=\"error\">\n  </quill-editor>\n  <div *ngIf=\"error\" class=\"error-message\">\n    {{ error }}\n  </div>\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}\n"] }]
+            args: [{ imports: [QuillEditorComponent, FormsModule, CommonModule], selector: 'app-custom-rich-text', standalone: true, template: "<!-- RS 06JAN25 -->\n<div class=\"rich-text-container\">\n  <quill-editor\n    [(ngModel)]=\"value\"\n    [placeholder]=\"placeholder\"\n    [modules]=\"quillConfiguration\"\n    [readOnly]=\"readOnly\"\n    (onContentChanged)=\"onEditorChange($event)\"\n    [class.error]=\"error\">\n  </quill-editor>\n  <div *ngIf=\"error\" class=\"error-message\">\n    {{ error }}\n  </div>\n</div>", styles: [".rich-text-container{width:100%;margin:10px 0}.error{border:1px solid red}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}\n"] }]
         }], ctorParameters: () => [{ type: I18nService }, { type: ChangeService }], propDecorators: { value: [{
                 type: Input
             }], placeholder: [{
@@ -8186,6 +8198,11 @@ class FileUploadComponent {
     tableFile; // file Upload from table
     question;
     error;
+    //RS 09JAN2025
+    allowedFileTypes = [];
+    maxFileSize = 0; // in bytes(Binary)
+    maxFiles = 4; // default limit
+    validationErrors = [];
     selectedFileNameArray = [];
     copyOfInputAllFiles;
     copyOfFileUploadingLimit;
@@ -8200,7 +8217,10 @@ class FileUploadComponent {
         this.sanitizer = sanitizer;
         this.i18nService = i18nService;
     }
-    ngOnInit() { }
+    //RS 09JAN2025
+    ngOnInit() {
+        this.initializeFileConfigs();
+    }
     // VD 03May24 file upload fix
     // onFileUpload(event: any) {
     //   const fileUploaderElement: HTMLElement = document.getElementById(
@@ -8217,17 +8237,51 @@ class FileUploadComponent {
             this.copyOfFileUploadingLimit = simpleChanges.limitFileUploading?.currentValue;
         }
     }
+    //RS 09JAN2025 Initializes file upload settings (allowed types, max size, and max files) by parsing metadata from fieldsMeta
+    initializeFileConfigs() {
+        if (this.question?.fieldsMeta) {
+            try {
+                const metaData = JSON.parse(this.question.fieldsMeta);
+                const fileConfig = metaData[0]; // Get first config object
+                if (fileConfig) {
+                    this.allowedFileTypes = fileConfig.allowedTypes || [];
+                    this.maxFileSize = fileConfig.maxFileSize || 0;
+                    this.maxFiles = fileConfig.maxFiles || 5;
+                }
+            }
+            catch (error) {
+                console.error('Error parsing fieldsMeta:', error);
+            }
+        }
+    }
     uploadMultipleFiles(event) {
         console.log('File uploader initiated');
+        this.validationErrors = []; // RS 17JAN2025 Clear previous errors
         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
+        // RS 09JAN2025 Check file count limit
+        if (uploadedFiles.length + inputFiles.length > this.maxFiles) {
+            this.validationErrors.push(`Maximum ${this.maxFiles} files allowed`);
+            event.target.value = '';
+            return;
+        }
+        const readFilesPromises = [];
+        for (const eachUploadedFile of uploadedFiles) {
+            const file = eachUploadedFile;
+            //RS 09JAN2025 Check file type
+            const fileExt = '.' + file.name.split('.').pop().toLowerCase();
+            if (this.allowedFileTypes.length > 0 && !this.allowedFileTypes.includes(fileExt)) {
+                this.validationErrors.push(`File type ${fileExt} not allowed. Allowed types: ${this.allowedFileTypes.join(', ')}`);
+                continue;
+            }
+            //RS 09JAN2025 Check file size
+            if (this.maxFileSize > 0 && file.size > this.maxFileSize) {
+                this.validationErrors.push(`File "${file.name}" exceeds size limit of ${this.maxFileSize / 1048576}MB`);
+                continue;
+            }
+            if (!this.validationErrors.length) {
+                const format = fileExt.substring(1);
                 const fileReadPromise = new Promise((resolve, reject) => {
                     const reader = new FileReader();
                     reader.readAsDataURL(file);
@@ -8237,6 +8291,7 @@ class FileUploadComponent {
                             name: file.name,
                             type: file.type,
                             format,
+                            size: file.size, // RS 17JAN2025 
                             id: null,
                         };
                         selectedFileData.push(fileData);
@@ -8245,10 +8300,13 @@ class FileUploadComponent {
                     };
                     reader.onerror = () => {
                         reject();
+                        this.validationErrors.push(`Error reading file "${file.name}"`); // RS 17JAN2025 
                     };
                 });
                 readFilesPromises.push(fileReadPromise);
             }
+        }
+        if (readFilesPromises.length > 0) {
             // Wait for all promises to resolve
             Promise.all(readFilesPromises).then(() => {
                 this.copyOfInputAllFiles = inputFiles;
@@ -8372,11 +8430,11 @@ class FileUploadComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", 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  <!-- RS 09DEC24 Changed keys--> \n</div>\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.errorMessage}}</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:#fff;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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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\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    <!-- RS 09JAN2025 -->\n    <button [class]=\"error ? 'she-btn-primary-bordered Invalid' : 'she-btn-primary-bordered'\" style=\"width:275px;\" (click)=\"fileInput.click()\"[ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= maxFiles }\" [disabled]=\"copyOfInputAllFiles?.length >= maxFiles\">Choose Files</button>\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\"  [accept]=\"allowedFileTypes.join(',')\"\n    style=\"display:none;\"\n    (change) = uploadMultipleFiles($event)\n    />\n  </label>\n\n  <!-- RS 09JAN2025 -->\n  <!-- Error messages section -->\n  <div class=\"file-constraints\" *ngIf=\"validationErrors.length > 0\">\n    <small class=\"text-danger\">\n      <div *ngFor=\"let error of validationErrors\">{{ error }}</div>\n    </small>\n  </div>\n\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  <!-- RS 09DEC24 Changed keys--> \n</div>\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.errorMessage}}</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:#fff;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: "18.2.13", ngImport: i0, type: FileUploadComponent, 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  <!-- RS 09DEC24 Changed keys--> \n</div>\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.errorMessage}}</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:#fff;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"] }]
+            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\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    <!-- RS 09JAN2025 -->\n    <button [class]=\"error ? 'she-btn-primary-bordered Invalid' : 'she-btn-primary-bordered'\" style=\"width:275px;\" (click)=\"fileInput.click()\"[ngClass]=\"{ 'btn-disabled': copyOfInputAllFiles?.length >= maxFiles }\" [disabled]=\"copyOfInputAllFiles?.length >= maxFiles\">Choose Files</button>\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\"  [accept]=\"allowedFileTypes.join(',')\"\n    style=\"display:none;\"\n    (change) = uploadMultipleFiles($event)\n    />\n  </label>\n\n  <!-- RS 09JAN2025 -->\n  <!-- Error messages section -->\n  <div class=\"file-constraints\" *ngIf=\"validationErrors.length > 0\">\n    <small class=\"text-danger\">\n      <div *ngFor=\"let error of validationErrors\">{{ error }}</div>\n    </small>\n  </div>\n\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  <!-- RS 09DEC24 Changed keys--> \n</div>\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.errorMessage}}</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:#fff;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: () => [{ type: SharedService }, { type: DataService }, { type: i6$1.DomSanitizer }, { type: I18nService }], propDecorators: { selectedFileData: [{
                 type: Output
             }], deletedFileData: [{
@@ -8837,11 +8895,11 @@ class CustomRadioComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRadioComponent, deps: [{ token: ChangeService }, { token: DataService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomRadioComponent, selector: "app-custom-radio", inputs: { options: "options", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", readOnly: "readOnly", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel", referenceField: "referenceField", token: "token" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!-- RS 09DEC24 Changed keys--> \n<div class=\"custom-radio-container\">\n    <div\n      *ngFor=\"let option of options\"\n      [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\"\n    >\n      <input\n        type=\"radio\"\n        [id]=\"apiMeta !== undefined ? option[labelField] : option.value \"\n        [checked] = \"selectedValue == option.value \"\n        [name]=\"id\"\n        [value]=\"selectedValue\"\n        (change)=\"radioChange($event)\"\n        [disabled]=\"readOnly\"\n      />\n      <label class=\"nxt-radio-label\" [for]=\"apiMeta !== undefined ? option[labelField] : option.value\">{{ apiMeta !== undefined ? option[labelField] : option.value  }}</label>\n    </div>\n    <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\n  </div>\n  ", styles: [".custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.custom-radio-option.invalid label{color:red}.error-msg{color:red;font-size:12px;margin-top:5px}\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomRadioComponent, selector: "app-custom-radio", inputs: { options: "options", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", readOnly: "readOnly", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel", referenceField: "referenceField", token: "token" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!-- RS 09DEC24 Changed keys-->\n <!-- RS 019JAN25 -->\n <!-- validate for NULL  -->\n<div class=\"custom-radio-container\">\n  <div\n    *ngFor=\"let option of options\"\n    [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\"\n  >\n    <input\n      type=\"radio\"\n      [id]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\"\n      [checked] = \"selectedValue == option.value\"\n      [name]=\"id\"\n      [value]=\"selectedValue\"\n      (change)=\"radioChange($event)\"\n      [disabled]=\"readOnly\"\n    />\n    <label class=\"nxt-radio-label\" [for]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\">{{ apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value}}</label>\n  </div>\n  <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\n</div>", styles: [".custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.custom-radio-option.invalid label{color:red}.error-msg{color:red;font-size:12px;margin-top:5px}\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: "18.2.13", ngImport: i0, type: CustomRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-radio', template: "<!-- RS 09DEC24 Changed keys--> \n<div class=\"custom-radio-container\">\n    <div\n      *ngFor=\"let option of options\"\n      [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\"\n    >\n      <input\n        type=\"radio\"\n        [id]=\"apiMeta !== undefined ? option[labelField] : option.value \"\n        [checked] = \"selectedValue == option.value \"\n        [name]=\"id\"\n        [value]=\"selectedValue\"\n        (change)=\"radioChange($event)\"\n        [disabled]=\"readOnly\"\n      />\n      <label class=\"nxt-radio-label\" [for]=\"apiMeta !== undefined ? option[labelField] : option.value\">{{ apiMeta !== undefined ? option[labelField] : option.value  }}</label>\n    </div>\n    <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\n  </div>\n  ", styles: [".custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.custom-radio-option.invalid label{color:red}.error-msg{color:red;font-size:12px;margin-top:5px}\n"] }]
+            args: [{ selector: 'app-custom-radio', template: "<!-- RS 09DEC24 Changed keys-->\n <!-- RS 019JAN25 -->\n <!-- validate for NULL  -->\n<div class=\"custom-radio-container\">\n  <div\n    *ngFor=\"let option of options\"\n    [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\"\n  >\n    <input\n      type=\"radio\"\n      [id]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\"\n      [checked] = \"selectedValue == option.value\"\n      [name]=\"id\"\n      [value]=\"selectedValue\"\n      (change)=\"radioChange($event)\"\n      [disabled]=\"readOnly\"\n    />\n    <label class=\"nxt-radio-label\" [for]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\">{{ apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value}}</label>\n  </div>\n  <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\n</div>", styles: [".custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.custom-radio-option.invalid label{color:red}.error-msg{color:red;font-size:12px;margin-top:5px}\n"] }]
         }], ctorParameters: () => [{ type: ChangeService }, { type: DataService }, { type: I18nService }], propDecorators: { options: [{
                 type: Input
             }], apiMeta: [{
@@ -8897,6 +8955,31 @@ class QuestionbookComponent {
     langDirection = 'ltr';
     bookStyle;
     subscription;
+    // RS 17JAN2025
+    //Formats and returns file upload requirements from a JSON string
+    getFileRequirements(fieldsMeta) {
+        try {
+            const metaData = JSON.parse(fieldsMeta);
+            const fileConfig = metaData[0];
+            if (!fileConfig)
+                return '';
+            const requirements = [];
+            if (fileConfig.allowedTypes?.length) {
+                requirements.push(`Accepted formats: ${fileConfig.allowedTypes.join(', ')}`);
+            }
+            if (fileConfig.maxFileSize) {
+                requirements.push(`Maximum size per file: ${fileConfig.maxFileSize / 1048576}MB`);
+            }
+            if (fileConfig.maxFiles) {
+                requirements.push(`Maximum number of files: ${fileConfig.maxFiles}`);
+            }
+            return requirements.map(req => req.trim()).join('\n');
+        }
+        catch (error) {
+            console.error('Error parsing fieldsMeta:', error);
+            return '';
+        }
+    }
     hadleDropDownDependent = new EventEmitter();
     // VD 06Sep24 calendar changes
     handleCalendarDate = new EventEmitter();
@@ -9226,11 +9309,11 @@ class QuestionbookComponent {
         this.isCalendarModalOpen = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", 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", handleCalendarEvent: "handleCalendarEvent" }, 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        <!-- RA09DEC24 Changed keys-->\n        <div\n            [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\n            <!-- Sub Question Label -->\n            <!-- HA 20DEC23 Label Style from salesforce -->\n            <!-- VD 09May24 is hide field change-->\n         <div *ngIf=\"!ques.isHidden\">\n            <div *ngIf=\"ques.type === '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?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\n                    <div  *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\n                    <div *ngIf=\"ques.questionText && ques?.helpText\" class=\"icon\" [matTooltip]=\"ques?.helpText\">i</div></span>\n            </div>\n            <!-- // VD 12Jun24 - readonly change-->\n            <!-- DateTime -->\n            <div *ngIf=\"ques.type === 'DateTime'\">\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date-picker>\n            </div>\n \n             <!-- Date-->\n             <div *ngIf=\"ques.type === 'Date'\">\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date>\n            </div>\n \n             <!-- Time-->\n             <div *ngIf=\"ques.type === 'Time'\">\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\n                </app-custom-time>\n            </div>\n           <!-- calendar  -->\n            <div *ngIf=\"ques.type === 'Calendar'\">\n                <app-custom-calendar\n                [question]=\"ques\"\n                (eventSelected)=\"getCalendarEvent($event)\"\n                (dateSelected)=\"getCurrentCalendar($event)\"\n                (openModal)=\"openCalendarModal($event)\"\n                (closeModal)=\"closeCalendarModal($event)\"\n                ></app-custom-calendar>\n                <!-- model used in calendar component -->\n                <app-custom-model *ngIf=\"isCalendarModalOpen\"\n                    [modalTitle]=\"calendarModalTitle\"\n                    [isModalOpen]=\"isCalendarModalOpen\"\n                    [modalSize]=\"calendarModalSize\"\n                    [saveButtonValue]=\"calendarSaveButtonValue\"\n                    [modalFooter]=\"modalCalendarModalFooter\"\n                    (saveButtonEmit)=\"onCalendarModalSave()\"\n                    (cancelButtonEmit)=\"closeCalendarModal($event)\"\n                >\n                   <lib-questionbook  [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                </app-custom-model>\n            </div>\n            <!-- Text -->\n            <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\n                        textBox: !qbItem.progressBar\n                    }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\n                    [error]=\"ques.error\" [placeholder]=\"ques.question\" (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 === 'Location'\">\n            <!-- HA10012024 Added Api key as input -->\n                <app-pick-location [apiKey]=\"qbItem['apiKey']\" [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 === 'TextArea'\">\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n            </div>\n            <!-- RS 06JAN25 -->\n           <!-- for rich text editor -->\n            <div *ngIf=\"ques.type === 'RichTextArea'\">\n                <app-custom-rich-text \n                    [question]=\"ques\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    [value]=\"ques.input || ''\"\n                    [error]=\"ques.error\"\n                    [placeholder]=\"ques.question\"\n                    (textValueChange)=\"childEventCapture($event, ques)\">\n                </app-custom-rich-text>\n            </div>\n\n            <!-- Email -->\n            <div *ngIf=\"ques.type === 'Email'\">\n                <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n            </div>\n \n            <!-- Table -->\n            <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n                </app-custom-table>\n            </div>\n \n              <!-- Table Appendix -->\n              <div *ngIf=\"ques.type === '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 === 'List'\" class=\"\">\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\"  [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 === 'Dropdown' && ques?.options\" class=\"\">\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n                <app-custom-dropdown [options]=\"ques.options\"\n                    [token]=\"token\"\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n                    [selectedValue]=\"ques.selectedValue\"\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    [question]=\"ques\"\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 === 'Radio' && ques?.options\" class=\"\">\n                <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n                </app-custom-radio>\n            </div>\n \n            <!-- Attachment / Files -->\n            <div *ngIf=\"ques.type === '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 === 'PopUpMessage'\" class=\"\">\n                <app-dependent-table [alertMessage]=\"ques.errorMessage\">\n                </app-dependent-table>\n            </div>\n            <div *ngIf=\"ques.type === 'Label'\" class=\"\">\n                <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n                </app-custom-label>\n            </div>\n             <!-- // VD 02Aug24 image component -->\n            <div *ngIf=\"ques.type === '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 === 'Button'\" class=\"\">\n                <app-custom-button [height]=\"'50px'\"\n                [width]=\"'150px'\"\n                [buttonText]=\"ques?.question\"\n                [value]=\"ques?.question\"\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 === 'Book'\">\n                <!-- HA 09FEB24 Added ternary operator -->\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n         </div>\n        </div>\n    </div>\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:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}\n"], dependencies: [{ kind: "component", type: CustomRichTextComponent, selector: "app-custom-rich-text", inputs: ["value", "placeholder", "error", "question", "rows", "readOnly", "minLength", "maxLength"], outputs: ["textValueChange"] }, { 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: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], 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: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { 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", "question", "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", "handleCalendarEvent"] }, { 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: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomImageComponent, selector: "app-custom-image", inputs: ["alt", "src", "imageStyle", "question"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token"], outputs: ["valueChange"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", handleCalendarEvent: "handleCalendarEvent" }, 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        <!-- RA09DEC24 Changed keys-->\n        <div\n            [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\n            <!-- Sub Question Label -->\n            <!-- HA 20DEC23 Label Style from salesforce -->\n            <!-- VD 09May24 is hide field change-->\n         <div *ngIf=\"!ques.isHidden\">\n            <div *ngIf=\"ques.type === '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?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\n                    <div  *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\n                    <!-- RS 17JAN2025 -->\n                    <!-- Displays icons with tooltips help text -->\n                    <div *ngIf=\"ques.questionText && ques?.helpText\" \n                        class=\"icon\" \n                        [matTooltip]=\"ques?.helpText\"\n                        matTooltipClass=\"white-tooltip\">i</div>\n        <!-- RS 17JAN2025 -->\n        <!--  Displays icons with tooltips for file requirements -->\n        <div \n            class=\"icon\" \n            *ngIf=\"ques.fieldsMeta\"\n            [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\"\n            matTooltipClass=\"white-tooltip\"\n            style=\"margin-left: 4px;\"\n        >i</div>\n    </span>\n</div>\n            <!-- // VD 12Jun24 - readonly change-->\n            <!-- DateTime -->\n            <div *ngIf=\"ques.type === 'DateTime'\">\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date-picker>\n            </div>\n \n             <!-- Date-->\n             <div *ngIf=\"ques.type === 'Date'\">\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date>\n            </div>\n \n             <!-- Time-->\n             <div *ngIf=\"ques.type === 'Time'\">\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\n                </app-custom-time>\n            </div>\n           <!-- calendar  -->\n            <div *ngIf=\"ques.type === 'Calendar'\">\n                <app-custom-calendar\n                [question]=\"ques\"\n                (eventSelected)=\"getCalendarEvent($event)\"\n                (dateSelected)=\"getCurrentCalendar($event)\"\n                (openModal)=\"openCalendarModal($event)\"\n                (closeModal)=\"closeCalendarModal($event)\"\n                ></app-custom-calendar>\n                <!-- model used in calendar component -->\n                <app-custom-model *ngIf=\"isCalendarModalOpen\"\n                    [modalTitle]=\"calendarModalTitle\"\n                    [isModalOpen]=\"isCalendarModalOpen\"\n                    [modalSize]=\"calendarModalSize\"\n                    [saveButtonValue]=\"calendarSaveButtonValue\"\n                    [modalFooter]=\"modalCalendarModalFooter\"\n                    (saveButtonEmit)=\"onCalendarModalSave()\"\n                    (cancelButtonEmit)=\"closeCalendarModal($event)\"\n                >\n                   <lib-questionbook  [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                </app-custom-model>\n            </div>\n            <!-- Text -->\n            <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\n                        textBox: !qbItem.progressBar\n                    }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\n                    [error]=\"ques.error\" [placeholder]=\"ques.question\" (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 === 'Location'\">\n            <!-- HA10012024 Added Api key as input -->\n                <app-pick-location [apiKey]=\"qbItem['apiKey']\" [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 === 'TextArea'\">\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n            </div>\n            <!-- RS 06JAN25 -->\n           <!-- for rich text editor -->\n            <div *ngIf=\"ques.type === 'RichTextArea'\">\n                <app-custom-rich-text \n                    [question]=\"ques\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    [value]=\"ques.input || ''\"\n                    [error]=\"ques.error\"\n                    [placeholder]=\"ques.question\"\n                    (textValueChange)=\"childEventCapture($event, ques)\">\n                </app-custom-rich-text>\n            </div>\n\n            <!-- Email -->\n            <div *ngIf=\"ques.type === 'Email'\">\n                <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n            </div>\n \n            <!-- Table -->\n            <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n                </app-custom-table>\n            </div>\n \n              <!-- Table Appendix -->\n              <div *ngIf=\"ques.type === '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 === 'List'\" class=\"\">\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\"  [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 === 'Dropdown' && ques?.options\" class=\"\">\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n                <app-custom-dropdown [options]=\"ques.options\"\n                    [token]=\"token\"\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n                    [selectedValue]=\"ques.selectedValue\"\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    [question]=\"ques\"\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 === 'Radio' && ques?.options\" class=\"\">\n                <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n                </app-custom-radio>\n            </div>\n \n            <!-- Attachment / Files -->\n            <div *ngIf=\"ques.type === '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 === 'PopUpMessage'\" class=\"\">\n                <app-dependent-table [alertMessage]=\"ques.errorMessage\">\n                </app-dependent-table>\n            </div>\n            <div *ngIf=\"ques.type === 'Label'\" class=\"\">\n                <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n                </app-custom-label>\n            </div>\n             <!-- // VD 02Aug24 image component -->\n            <div *ngIf=\"ques.type === '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 === 'Button'\" class=\"\">\n                <app-custom-button [height]=\"'50px'\"\n                [width]=\"'150px'\"\n                [buttonText]=\"ques?.question\"\n                [value]=\"ques?.question\"\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 === 'Book'\">\n                <!-- HA 09FEB24 Added ternary operator -->\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n         </div>\n        </div>\n    </div>\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:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}\n"], dependencies: [{ kind: "component", type: CustomRichTextComponent, selector: "app-custom-rich-text", inputs: ["value", "placeholder", "error", "question", "rows", "readOnly", "minLength", "maxLength"], outputs: ["textValueChange"] }, { 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: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], 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: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { 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", "question", "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", "handleCalendarEvent"] }, { 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: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { 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: "18.2.13", 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        <!-- RA09DEC24 Changed keys-->\n        <div\n            [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\n            <!-- Sub Question Label -->\n            <!-- HA 20DEC23 Label Style from salesforce -->\n            <!-- VD 09May24 is hide field change-->\n         <div *ngIf=\"!ques.isHidden\">\n            <div *ngIf=\"ques.type === '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?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\n                    <div  *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\n                    <div *ngIf=\"ques.questionText && ques?.helpText\" class=\"icon\" [matTooltip]=\"ques?.helpText\">i</div></span>\n            </div>\n            <!-- // VD 12Jun24 - readonly change-->\n            <!-- DateTime -->\n            <div *ngIf=\"ques.type === 'DateTime'\">\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date-picker>\n            </div>\n \n             <!-- Date-->\n             <div *ngIf=\"ques.type === 'Date'\">\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date>\n            </div>\n \n             <!-- Time-->\n             <div *ngIf=\"ques.type === 'Time'\">\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\n                </app-custom-time>\n            </div>\n           <!-- calendar  -->\n            <div *ngIf=\"ques.type === 'Calendar'\">\n                <app-custom-calendar\n                [question]=\"ques\"\n                (eventSelected)=\"getCalendarEvent($event)\"\n                (dateSelected)=\"getCurrentCalendar($event)\"\n                (openModal)=\"openCalendarModal($event)\"\n                (closeModal)=\"closeCalendarModal($event)\"\n                ></app-custom-calendar>\n                <!-- model used in calendar component -->\n                <app-custom-model *ngIf=\"isCalendarModalOpen\"\n                    [modalTitle]=\"calendarModalTitle\"\n                    [isModalOpen]=\"isCalendarModalOpen\"\n                    [modalSize]=\"calendarModalSize\"\n                    [saveButtonValue]=\"calendarSaveButtonValue\"\n                    [modalFooter]=\"modalCalendarModalFooter\"\n                    (saveButtonEmit)=\"onCalendarModalSave()\"\n                    (cancelButtonEmit)=\"closeCalendarModal($event)\"\n                >\n                   <lib-questionbook  [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                </app-custom-model>\n            </div>\n            <!-- Text -->\n            <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\n                        textBox: !qbItem.progressBar\n                    }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\n                    [error]=\"ques.error\" [placeholder]=\"ques.question\" (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 === 'Location'\">\n            <!-- HA10012024 Added Api key as input -->\n                <app-pick-location [apiKey]=\"qbItem['apiKey']\" [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 === 'TextArea'\">\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n            </div>\n            <!-- RS 06JAN25 -->\n           <!-- for rich text editor -->\n            <div *ngIf=\"ques.type === 'RichTextArea'\">\n                <app-custom-rich-text \n                    [question]=\"ques\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    [value]=\"ques.input || ''\"\n                    [error]=\"ques.error\"\n                    [placeholder]=\"ques.question\"\n                    (textValueChange)=\"childEventCapture($event, ques)\">\n                </app-custom-rich-text>\n            </div>\n\n            <!-- Email -->\n            <div *ngIf=\"ques.type === 'Email'\">\n                <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n            </div>\n \n            <!-- Table -->\n            <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n                </app-custom-table>\n            </div>\n \n              <!-- Table Appendix -->\n              <div *ngIf=\"ques.type === '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 === 'List'\" class=\"\">\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\"  [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 === 'Dropdown' && ques?.options\" class=\"\">\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n                <app-custom-dropdown [options]=\"ques.options\"\n                    [token]=\"token\"\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n                    [selectedValue]=\"ques.selectedValue\"\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    [question]=\"ques\"\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 === 'Radio' && ques?.options\" class=\"\">\n                <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n                </app-custom-radio>\n            </div>\n \n            <!-- Attachment / Files -->\n            <div *ngIf=\"ques.type === '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 === 'PopUpMessage'\" class=\"\">\n                <app-dependent-table [alertMessage]=\"ques.errorMessage\">\n                </app-dependent-table>\n            </div>\n            <div *ngIf=\"ques.type === 'Label'\" class=\"\">\n                <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n                </app-custom-label>\n            </div>\n             <!-- // VD 02Aug24 image component -->\n            <div *ngIf=\"ques.type === '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 === 'Button'\" class=\"\">\n                <app-custom-button [height]=\"'50px'\"\n                [width]=\"'150px'\"\n                [buttonText]=\"ques?.question\"\n                [value]=\"ques?.question\"\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 === 'Book'\">\n                <!-- HA 09FEB24 Added ternary operator -->\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n         </div>\n        </div>\n    </div>\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:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}\n"] }]
+            args: [{ selector: 'lib-questionbook', template: "<!-- HA 20DEC23 Book Style from salesforce -->\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\n<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <!-- RA09DEC24 Changed keys-->\n        <div\n            [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\n            <!-- Sub Question Label -->\n            <!-- HA 20DEC23 Label Style from salesforce -->\n            <!-- VD 09May24 is hide field change-->\n         <div *ngIf=\"!ques.isHidden\">\n            <div *ngIf=\"ques.type === '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?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\n                    <div  *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\n                    <!-- RS 17JAN2025 -->\n                    <!-- Displays icons with tooltips help text -->\n                    <div *ngIf=\"ques.questionText && ques?.helpText\" \n                        class=\"icon\" \n                        [matTooltip]=\"ques?.helpText\"\n                        matTooltipClass=\"white-tooltip\">i</div>\n        <!-- RS 17JAN2025 -->\n        <!--  Displays icons with tooltips for file requirements -->\n        <div \n            class=\"icon\" \n            *ngIf=\"ques.fieldsMeta\"\n            [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\"\n            matTooltipClass=\"white-tooltip\"\n            style=\"margin-left: 4px;\"\n        >i</div>\n    </span>\n</div>\n            <!-- // VD 12Jun24 - readonly change-->\n            <!-- DateTime -->\n            <div *ngIf=\"ques.type === 'DateTime'\">\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date-picker>\n            </div>\n \n             <!-- Date-->\n             <div *ngIf=\"ques.type === 'Date'\">\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\n                </app-custom-date>\n            </div>\n \n             <!-- Time-->\n             <div *ngIf=\"ques.type === 'Time'\">\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\n                </app-custom-time>\n            </div>\n           <!-- calendar  -->\n            <div *ngIf=\"ques.type === 'Calendar'\">\n                <app-custom-calendar\n                [question]=\"ques\"\n                (eventSelected)=\"getCalendarEvent($event)\"\n                (dateSelected)=\"getCurrentCalendar($event)\"\n                (openModal)=\"openCalendarModal($event)\"\n                (closeModal)=\"closeCalendarModal($event)\"\n                ></app-custom-calendar>\n                <!-- model used in calendar component -->\n                <app-custom-model *ngIf=\"isCalendarModalOpen\"\n                    [modalTitle]=\"calendarModalTitle\"\n                    [isModalOpen]=\"isCalendarModalOpen\"\n                    [modalSize]=\"calendarModalSize\"\n                    [saveButtonValue]=\"calendarSaveButtonValue\"\n                    [modalFooter]=\"modalCalendarModalFooter\"\n                    (saveButtonEmit)=\"onCalendarModalSave()\"\n                    (cancelButtonEmit)=\"closeCalendarModal($event)\"\n                >\n                   <lib-questionbook  [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                </app-custom-model>\n            </div>\n            <!-- Text -->\n            <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\n                        textBox: !qbItem.progressBar\n                    }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\n                    [error]=\"ques.error\" [placeholder]=\"ques.question\" (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 === 'Location'\">\n            <!-- HA10012024 Added Api key as input -->\n                <app-pick-location [apiKey]=\"qbItem['apiKey']\" [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 === 'TextArea'\">\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\n            </div>\n            <!-- RS 06JAN25 -->\n           <!-- for rich text editor -->\n            <div *ngIf=\"ques.type === 'RichTextArea'\">\n                <app-custom-rich-text \n                    [question]=\"ques\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    [value]=\"ques.input || ''\"\n                    [error]=\"ques.error\"\n                    [placeholder]=\"ques.question\"\n                    (textValueChange)=\"childEventCapture($event, ques)\">\n                </app-custom-rich-text>\n            </div>\n\n            <!-- Email -->\n            <div *ngIf=\"ques.type === 'Email'\">\n                <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n            </div>\n \n            <!-- Table -->\n            <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n                </app-custom-table>\n            </div>\n \n              <!-- Table Appendix -->\n              <div *ngIf=\"ques.type === '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 === 'List'\" class=\"\">\n                <lib-search-box [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [placeHolderText]=\"ques.question\"  [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 === 'Dropdown' && ques?.options\" class=\"\">\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\n                <app-custom-dropdown [options]=\"ques.options\"\n                    [token]=\"token\"\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n                    [selectedValue]=\"ques.selectedValue\"\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    [question]=\"ques\"\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 === 'Radio' && ques?.options\" class=\"\">\n                <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                    [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n                </app-custom-radio>\n            </div>\n \n            <!-- Attachment / Files -->\n            <div *ngIf=\"ques.type === '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 === 'PopUpMessage'\" class=\"\">\n                <app-dependent-table [alertMessage]=\"ques.errorMessage\">\n                </app-dependent-table>\n            </div>\n            <div *ngIf=\"ques.type === 'Label'\" class=\"\">\n                <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\n                </app-custom-label>\n            </div>\n             <!-- // VD 02Aug24 image component -->\n            <div *ngIf=\"ques.type === '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 === 'Button'\" class=\"\">\n                <app-custom-button [height]=\"'50px'\"\n                [width]=\"'150px'\"\n                [buttonText]=\"ques?.question\"\n                [value]=\"ques?.question\"\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 === 'Book'\">\n                <!-- HA 09FEB24 Added ternary operator -->\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n         </div>\n        </div>\n    </div>\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:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}\n"] }]
         }], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: StorageService }, { type: I18nService }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]