@rangertechnologies/ngnxt 2.1.81 → 2.1.83

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -4409,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 -->\r\n<div class=\"rich-text-container\">\r\n  <quill-editor\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [modules]=\"quillConfiguration\"\r\n    [readOnly]=\"readOnly\"\r\n    (onContentChanged)=\"onEditorChange($event)\"\r\n    [class.error]=\"error\">\r\n  </quill-editor>\r\n  <div *ngIf=\"error\" class=\"error-message\">\r\n    {{ error }}\r\n  </div>\r\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 -->\r\n<div class=\"rich-text-container\">\r\n  <quill-editor\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [modules]=\"quillConfiguration\"\r\n    [readOnly]=\"readOnly\"\r\n    (onContentChanged)=\"onEditorChange($event)\"\r\n    [class.error]=\"error\">\r\n  </quill-editor>\r\n  <div *ngIf=\"error\" class=\"error-message\">\r\n    {{ error }}\r\n  </div>\r\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}quill-editor{width:100%}\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 -->\r\n<div class=\"rich-text-container\">\r\n  <quill-editor\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [modules]=\"quillConfiguration\"\r\n    [readOnly]=\"readOnly\"\r\n    (onContentChanged)=\"onEditorChange($event)\"\r\n    [class.error]=\"error\">\r\n  </quill-editor>\r\n  <div *ngIf=\"error\" class=\"error-message\">\r\n    {{ error }}\r\n  </div>\r\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 -->\r\n<div class=\"rich-text-container\">\r\n  <quill-editor\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    [modules]=\"quillConfiguration\"\r\n    [readOnly]=\"readOnly\"\r\n    (onContentChanged)=\"onEditorChange($event)\"\r\n    [class.error]=\"error\">\r\n  </quill-editor>\r\n  <div *ngIf=\"error\" class=\"error-message\">\r\n    {{ error }}\r\n  </div>\r\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}quill-editor{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: I18nService }, { type: ChangeService }], propDecorators: { value: [{
                 type: Input
             }], placeholder: [{
@@ -8203,7 +8203,6 @@ class FileUploadComponent {
     maxFileSize = 0; // in bytes(Binary)
     maxFiles = 4; // default limit
     validationErrors = [];
-    isTooltipVisible = false;
     selectedFileNameArray = [];
     copyOfInputAllFiles;
     copyOfFileUploadingLimit;
@@ -8431,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;\">\r\n  <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\r\n    <!-- HA 19DEC23 For translation -->\r\n    <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\r\n  </div>\r\n\r\n<!-- RS 09JAN2025 -->\r\n<!-- Info Icon for Viewing Requirements -->\r\n <div class=\"col-md-12 mb-2\" >\r\n  <div \r\n  class=\"icon-container \"\r\n  (mouseover)=\"isTooltipVisible = true\" \r\n  (mouseout)=\"isTooltipVisible = false\"\r\n>\r\n<label class=\"she-label\">Requirements </label>\r\n<img \r\n    width=\"13\" \r\n    height=\"13\"  \r\n    src=\"https://img.icons8.com/ios/50/info--v1.png\" \r\n    alt=\"info\"\r\n    style=\" margin-left: 4PX; margin-bottom: 2PX;\"\r\n  />\r\n<div \r\n    class=\"tooltip-content\" \r\n    *ngIf=\"isTooltipVisible\"\r\n>\r\n<div \r\n      class=\"col-md-12 mb-2\" \r\n      *ngIf=\"allowedFileTypes.length > 0 || maxFileSize > 0 || maxFiles > 0\"\r\n>\r\n<small class=\"text-muted file-constraints-info\">\r\n<ul class=\"mt-1 mb-2\" style=\"padding-left: 20px;\">\r\n<li *ngIf=\"allowedFileTypes.length > 0\">\r\n            Accepted formats: {{ allowedFileTypes.join(', ') }}\r\n</li>\r\n<li *ngIf=\"maxFileSize > 0\">\r\n            Maximum size per file: {{ maxFileSize / 1048576 }}MB\r\n</li>\r\n<li *ngIf=\"maxFiles > 0\">\r\n            Maximum number of files: {{ maxFiles }}\r\n</li>\r\n</ul>\r\n</small>\r\n</div>\r\n</div>\r\n</div>\r\n </div>\r\n\r\n\r\n  <div class=\"col-lg-5 document-cnt m-t-10 m-b-10\"\r\n    *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\r\n     <div *ngIf=\"!tableFile\"> <!-- (click)=\"viewFile(eachFile)\"  -->\r\n      <div class=\"col-lg-3 document_image\">\r\n        <img [src]=\"getDocIcon(eachFile?.name)\">\r\n    </div>\r\n      <div class=\"col-lg-9 document_name\">\r\n        {{eachFile?.name}}\r\n      </div>\r\n      <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\r\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\r\n      </div>\r\n      <!-- VD 20May24 - preview changes-->\r\n      <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\r\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\r\n      <div class=\"col-lg-3 document_image\">\r\n          <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\r\n      </div>\r\n      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\r\n          {{eachFile?.name}}\r\n      </div>\r\n  </div>\r\n  </div>\r\n  <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\r\n    <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\r\n  </div>\r\n</div>\r\n\r\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\r\n  <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\r\n    <!-- HA 19DEC23 For translation -->\r\n    <!-- VD 03May24 file upload fix-->\r\n    <!-- RS 09JAN2025 -->\r\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>\r\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\"  [accept]=\"allowedFileTypes.join(',')\"\r\n    style=\"display:none;\"\r\n    (change) = uploadMultipleFiles($event)\r\n    />\r\n  </label>\r\n\r\n  <!-- RS 09JAN2025 -->\r\n  <!-- Error messages section -->\r\n  <div class=\"file-constraints\" *ngIf=\"validationErrors.length > 0\">\r\n    <small class=\"text-danger\">\r\n      <div *ngFor=\"let error of validationErrors\">{{ error }}</div>\r\n    </small>\r\n  </div>\r\n\r\n<!-- HA 19DEC23 For translation -->\r\n  <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\r\n    {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\r\n    <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\r\n  </label>\r\n  <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched ||        formControl?.documents?.dirty) &&\r\n  formControl?.documents?.errors?.required\">\r\n    {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\r\n  </span> -->\r\n  <!-- RS 09DEC24 Changed keys--> \r\n</div>\r\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.errorMessage}}</div>\r\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\r\n  <div class=\"nxt-file-map-modal\">\r\n    <div class=\"nxt-file-model-content\">\r\n      <div class=\"nxt-file-model-header\">\r\n        <h4>{{fileName}}</h4>\r\n        <button class=\"close-button\" (click)=\"close()\">X</button>\r\n      </div>\r\n      <ng-container *ngIf=\"isImage; else otherFile\">\r\n        <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\r\n      </ng-container>\r\n      <ng-template #otherFile>\r\n        <iframe [src]=\"fileUrl\" width=\"100%\" height=\"500px\"></iframe>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\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}.file-constraints{margin-top:9px;font-size:17px;color:#666;margin-left:15px}.icon-container{position:relative;display:inline-block}.tooltip-content{position:absolute;background-color:#fff;color:#fff;padding:8px;border-radius:4px;left:225%;transform:translate(-50%);z-index:1000;white-space:nowrap;box-shadow:0 4px 6px #0000001a;top:-250%}\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;\">\r\n  <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\r\n    <!-- HA 19DEC23 For translation -->\r\n    <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\r\n  </div>\r\n\r\n  <div class=\"col-lg-5 document-cnt m-t-10 m-b-10\"\r\n    *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\r\n     <div *ngIf=\"!tableFile\"> <!-- (click)=\"viewFile(eachFile)\"  -->\r\n      <div class=\"col-lg-3 document_image\">\r\n        <img [src]=\"getDocIcon(eachFile?.name)\">\r\n    </div>\r\n      <div class=\"col-lg-9 document_name\">\r\n        {{eachFile?.name}}\r\n      </div>\r\n      <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\r\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\r\n      </div>\r\n      <!-- VD 20May24 - preview changes-->\r\n      <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\r\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\r\n      <div class=\"col-lg-3 document_image\">\r\n          <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\r\n      </div>\r\n      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\r\n          {{eachFile?.name}}\r\n      </div>\r\n  </div>\r\n  </div>\r\n  <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\r\n    <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\r\n  </div>\r\n</div>\r\n\r\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\r\n  <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\r\n    <!-- HA 19DEC23 For translation -->\r\n    <!-- VD 03May24 file upload fix-->\r\n    <!-- RS 09JAN2025 -->\r\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>\r\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\"  [accept]=\"allowedFileTypes.join(',')\"\r\n    style=\"display:none;\"\r\n    (change) = uploadMultipleFiles($event)\r\n    />\r\n  </label>\r\n\r\n  <!-- RS 09JAN2025 -->\r\n  <!-- Error messages section -->\r\n  <div class=\"file-constraints\" *ngIf=\"validationErrors.length > 0\">\r\n    <small class=\"text-danger\">\r\n      <div *ngFor=\"let error of validationErrors\">{{ error }}</div>\r\n    </small>\r\n  </div>\r\n\r\n<!-- HA 19DEC23 For translation -->\r\n  <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\r\n    {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\r\n    <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\r\n  </label>\r\n  <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched ||        formControl?.documents?.dirty) &&\r\n  formControl?.documents?.errors?.required\">\r\n    {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\r\n  </span> -->\r\n  <!-- RS 09DEC24 Changed keys--> \r\n</div>\r\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.errorMessage}}</div>\r\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\r\n  <div class=\"nxt-file-map-modal\">\r\n    <div class=\"nxt-file-model-content\">\r\n      <div class=\"nxt-file-model-header\">\r\n        <h4>{{fileName}}</h4>\r\n        <button class=\"close-button\" (click)=\"close()\">X</button>\r\n      </div>\r\n      <ng-container *ngIf=\"isImage; else otherFile\">\r\n        <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\r\n      </ng-container>\r\n      <ng-template #otherFile>\r\n        <iframe [src]=\"fileUrl\" width=\"100%\" height=\"500px\"></iframe>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\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;\">\r\n  <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\r\n    <!-- HA 19DEC23 For translation -->\r\n    <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\r\n  </div>\r\n\r\n<!-- RS 09JAN2025 -->\r\n<!-- Info Icon for Viewing Requirements -->\r\n <div class=\"col-md-12 mb-2\" >\r\n  <div \r\n  class=\"icon-container \"\r\n  (mouseover)=\"isTooltipVisible = true\" \r\n  (mouseout)=\"isTooltipVisible = false\"\r\n>\r\n<label class=\"she-label\">Requirements </label>\r\n<img \r\n    width=\"13\" \r\n    height=\"13\"  \r\n    src=\"https://img.icons8.com/ios/50/info--v1.png\" \r\n    alt=\"info\"\r\n    style=\" margin-left: 4PX; margin-bottom: 2PX;\"\r\n  />\r\n<div \r\n    class=\"tooltip-content\" \r\n    *ngIf=\"isTooltipVisible\"\r\n>\r\n<div \r\n      class=\"col-md-12 mb-2\" \r\n      *ngIf=\"allowedFileTypes.length > 0 || maxFileSize > 0 || maxFiles > 0\"\r\n>\r\n<small class=\"text-muted file-constraints-info\">\r\n<ul class=\"mt-1 mb-2\" style=\"padding-left: 20px;\">\r\n<li *ngIf=\"allowedFileTypes.length > 0\">\r\n            Accepted formats: {{ allowedFileTypes.join(', ') }}\r\n</li>\r\n<li *ngIf=\"maxFileSize > 0\">\r\n            Maximum size per file: {{ maxFileSize / 1048576 }}MB\r\n</li>\r\n<li *ngIf=\"maxFiles > 0\">\r\n            Maximum number of files: {{ maxFiles }}\r\n</li>\r\n</ul>\r\n</small>\r\n</div>\r\n</div>\r\n</div>\r\n </div>\r\n\r\n\r\n  <div class=\"col-lg-5 document-cnt m-t-10 m-b-10\"\r\n    *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\r\n     <div *ngIf=\"!tableFile\"> <!-- (click)=\"viewFile(eachFile)\"  -->\r\n      <div class=\"col-lg-3 document_image\">\r\n        <img [src]=\"getDocIcon(eachFile?.name)\">\r\n    </div>\r\n      <div class=\"col-lg-9 document_name\">\r\n        {{eachFile?.name}}\r\n      </div>\r\n      <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\r\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\r\n      </div>\r\n      <!-- VD 20May24 - preview changes-->\r\n      <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\r\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\r\n      <div class=\"col-lg-3 document_image\">\r\n          <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\r\n      </div>\r\n      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\r\n          {{eachFile?.name}}\r\n      </div>\r\n  </div>\r\n  </div>\r\n  <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\r\n    <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\r\n  </div>\r\n</div>\r\n\r\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\r\n  <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\r\n    <!-- HA 19DEC23 For translation -->\r\n    <!-- VD 03May24 file upload fix-->\r\n    <!-- RS 09JAN2025 -->\r\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>\r\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\"  [accept]=\"allowedFileTypes.join(',')\"\r\n    style=\"display:none;\"\r\n    (change) = uploadMultipleFiles($event)\r\n    />\r\n  </label>\r\n\r\n  <!-- RS 09JAN2025 -->\r\n  <!-- Error messages section -->\r\n  <div class=\"file-constraints\" *ngIf=\"validationErrors.length > 0\">\r\n    <small class=\"text-danger\">\r\n      <div *ngFor=\"let error of validationErrors\">{{ error }}</div>\r\n    </small>\r\n  </div>\r\n\r\n<!-- HA 19DEC23 For translation -->\r\n  <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\r\n    {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\r\n    <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\r\n  </label>\r\n  <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched ||        formControl?.documents?.dirty) &&\r\n  formControl?.documents?.errors?.required\">\r\n    {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\r\n  </span> -->\r\n  <!-- RS 09DEC24 Changed keys--> \r\n</div>\r\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.errorMessage}}</div>\r\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\r\n  <div class=\"nxt-file-map-modal\">\r\n    <div class=\"nxt-file-model-content\">\r\n      <div class=\"nxt-file-model-header\">\r\n        <h4>{{fileName}}</h4>\r\n        <button class=\"close-button\" (click)=\"close()\">X</button>\r\n      </div>\r\n      <ng-container *ngIf=\"isImage; else otherFile\">\r\n        <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\r\n      </ng-container>\r\n      <ng-template #otherFile>\r\n        <iframe [src]=\"fileUrl\" width=\"100%\" height=\"500px\"></iframe>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\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}.file-constraints{margin-top:9px;font-size:17px;color:#666;margin-left:15px}.icon-container{position:relative;display:inline-block}.tooltip-content{position:absolute;background-color:#fff;color:#fff;padding:8px;border-radius:4px;left:225%;transform:translate(-50%);z-index:1000;white-space:nowrap;box-shadow:0 4px 6px #0000001a;top:-250%}\n"] }]
+            args: [{ selector: 'app-file-upload', template: "<div class=\"row\" style=\"margin: 0;\">\r\n  <div class=\"col-md-12\" *ngIf=\"!isDeleteFileButtonVisible\" style=\"text-align: left;\">\r\n    <!-- HA 19DEC23 For translation -->\r\n    <label class=\"she-label\">{{ 'attachment' | i18n:i18nService.currentLanguage }}</label>\r\n  </div>\r\n\r\n  <div class=\"col-lg-5 document-cnt m-t-10 m-b-10\"\r\n    *ngFor=\"let eachFile of copyOfInputAllFiles; let currentFileIndex = index\">\r\n     <div *ngIf=\"!tableFile\"> <!-- (click)=\"viewFile(eachFile)\"  -->\r\n      <div class=\"col-lg-3 document_image\">\r\n        <img [src]=\"getDocIcon(eachFile?.name)\">\r\n    </div>\r\n      <div class=\"col-lg-9 document_name\">\r\n        {{eachFile?.name}}\r\n      </div>\r\n      <div class=\"document_delete\" (click)=\"deleteFile(currentFileIndex);$event.stopPropagation()\" *ngIf=\"isDeleteFileButtonVisible\">\r\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/bin.svg\">\r\n      </div>\r\n      <!-- VD 20May24 - preview changes-->\r\n      <div class=\"preview-icon\" (click)=\"viewFile(eachFile)\" *ngIf=\"isDeleteFileButtonVisible\">\r\n        <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/icons8-eye-24.png\">\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"tableFile\" class=\"row\" style=\"cursor: pointer;\">\r\n      <div class=\"col-lg-3 document_image\">\r\n          <img [src]=\"getDocIcon(eachFile?.doc)\" style=\"margin-right: 10px;height: 40px;\">\r\n      </div>\r\n      <div class=\"col-lg-9 document_name\" style=\"overflow:hidden;height:35px;\">\r\n          {{eachFile?.name}}\r\n      </div>\r\n  </div>\r\n  </div>\r\n  <div class=\"col-md-12 m-b-30 text-center\" *ngIf=\"copyOfInputAllFiles?.length === 0 && isShowNoFileIcon\">\r\n    <img src=\"https://rnxt.s3.amazonaws.com/Icons/fileTypeIcons/ic_no_attachments.svg\" style=\"height: 140px;\">\r\n  </div>\r\n</div>\r\n\r\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\r\n  <label class=\"custom-file\" *ngIf=\"isDeleteFileButtonVisible && !tableFile\">\r\n    <!-- HA 19DEC23 For translation -->\r\n    <!-- VD 03May24 file upload fix-->\r\n    <!-- RS 09JAN2025 -->\r\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>\r\n    <input #fileInput type=\"file\"  name=\"fileUpload\" multiple=\"multiple\"  [accept]=\"allowedFileTypes.join(',')\"\r\n    style=\"display:none;\"\r\n    (change) = uploadMultipleFiles($event)\r\n    />\r\n  </label>\r\n\r\n  <!-- RS 09JAN2025 -->\r\n  <!-- Error messages section -->\r\n  <div class=\"file-constraints\" *ngIf=\"validationErrors.length > 0\">\r\n    <small class=\"text-danger\">\r\n      <div *ngFor=\"let error of validationErrors\">{{ error }}</div>\r\n    </small>\r\n  </div>\r\n\r\n<!-- HA 19DEC23 For translation -->\r\n  <label *ngIf=\"tableFile\" class=\"btn btn-primary\">\r\n    {{ 'uploadFile' | i18n:i18nService.currentLanguage }}\r\n    <input id=\"file\" style=\"display: none;\" type=\"file\" class=\"form-control\" (change)= uploadMultipleFiles($event) />\r\n  </label>\r\n  <!-- <span class=\"error-msg\" *ngIf=\"(formControl?.documents?.touched ||        formControl?.documents?.dirty) &&\r\n  formControl?.documents?.errors?.required\">\r\n    {{LM_POLICY_VALIDATION_MESSAGE.REQUIRED}}\r\n  </span> -->\r\n  <!-- RS 09DEC24 Changed keys--> \r\n</div>\r\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.errorMessage}}</div>\r\n<div class=\"nxt-file-overlay\" *ngIf=\"showFile\">\r\n  <div class=\"nxt-file-map-modal\">\r\n    <div class=\"nxt-file-model-content\">\r\n      <div class=\"nxt-file-model-header\">\r\n        <h4>{{fileName}}</h4>\r\n        <button class=\"close-button\" (click)=\"close()\">X</button>\r\n      </div>\r\n      <ng-container *ngIf=\"isImage; else otherFile\">\r\n        <img [src]=\"fileUrl\" class=\"img-fluid\" alt=\"File Preview\" />\r\n      </ng-container>\r\n      <ng-template #otherFile>\r\n        <iframe [src]=\"fileUrl\" width=\"100%\" height=\"500px\"></iframe>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\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: [{
@@ -8896,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--> \r\n<div class=\"custom-radio-container\">\r\n    <div\r\n      *ngFor=\"let option of options\"\r\n      [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\"\r\n    >\r\n      <input\r\n        type=\"radio\"\r\n        [id]=\"apiMeta !== undefined ? option[labelField] : option.value \"\r\n        [checked] = \"selectedValue == option.value \"\r\n        [name]=\"id\"\r\n        [value]=\"selectedValue\"\r\n        (change)=\"radioChange($event)\"\r\n        [disabled]=\"readOnly\"\r\n      />\r\n      <label class=\"nxt-radio-label\" [for]=\"apiMeta !== undefined ? option[labelField] : option.value\">{{ apiMeta !== undefined ? option[labelField] : option.value  }}</label>\r\n    </div>\r\n    <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\r\n  </div>\r\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-->\r\n <!-- RS 019JAN25 -->\r\n <!-- validate for NULL  -->\r\n<div class=\"custom-radio-container\">\r\n  <div\r\n    *ngFor=\"let option of options\"\r\n    [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\"\r\n  >\r\n    <input\r\n      type=\"radio\"\r\n      [id]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\"\r\n      [checked] = \"selectedValue == option.value\"\r\n      [name]=\"id\"\r\n      [value]=\"selectedValue\"\r\n      (change)=\"radioChange($event)\"\r\n      [disabled]=\"readOnly\"\r\n    />\r\n    <label class=\"nxt-radio-label\" [for]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\">{{ apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value}}</label>\r\n  </div>\r\n  <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\r\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--> \r\n<div class=\"custom-radio-container\">\r\n    <div\r\n      *ngFor=\"let option of options\"\r\n      [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\"\r\n    >\r\n      <input\r\n        type=\"radio\"\r\n        [id]=\"apiMeta !== undefined ? option[labelField] : option.value \"\r\n        [checked] = \"selectedValue == option.value \"\r\n        [name]=\"id\"\r\n        [value]=\"selectedValue\"\r\n        (change)=\"radioChange($event)\"\r\n        [disabled]=\"readOnly\"\r\n      />\r\n      <label class=\"nxt-radio-label\" [for]=\"apiMeta !== undefined ? option[labelField] : option.value\">{{ apiMeta !== undefined ? option[labelField] : option.value  }}</label>\r\n    </div>\r\n    <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\r\n  </div>\r\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-->\r\n <!-- RS 019JAN25 -->\r\n <!-- validate for NULL  -->\r\n<div class=\"custom-radio-container\">\r\n  <div\r\n    *ngFor=\"let option of options\"\r\n    [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\"\r\n  >\r\n    <input\r\n      type=\"radio\"\r\n      [id]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\"\r\n      [checked] = \"selectedValue == option.value\"\r\n      [name]=\"id\"\r\n      [value]=\"selectedValue\"\r\n      (change)=\"radioChange($event)\"\r\n      [disabled]=\"readOnly\"\r\n    />\r\n    <label class=\"nxt-radio-label\" [for]=\"apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value\">{{ apiMeta !== undefined && apiMeta !== null ? option[labelField] : option.value}}</label>\r\n  </div>\r\n  <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\r\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: [{
@@ -8956,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();
@@ -9285,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 -->\r\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\r\n<!-- HA 18JAN24  Added class for styling -->\r\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\r\n    <div class=\"form-row\">\r\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\r\n        <!-- RA09DEC24 Changed keys-->\r\n        <div\r\n            [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\r\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\r\n            <!-- Sub Question Label -->\r\n            <!-- HA 20DEC23 Label Style from salesforce -->\r\n            <!-- VD 09May24 is hide field change-->\r\n         <div *ngIf=\"!ques.isHidden\">\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n \r\n            </div>\r\n            <!-- VD 20JUN24 - help text changes-->\r\n            <!-- VD 01Aug24 - validation change-->\r\n            <!-- // VD 02Aug24 - label value style-->\r\n            <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\r\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\r\n                    <div  *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\r\n                    <div *ngIf=\"ques.questionText && ques?.helpText\" class=\"icon\" [matTooltip]=\"ques?.helpText\">i</div></span>\r\n            </div>\r\n            <!-- // VD 12Jun24 - readonly change-->\r\n            <!-- DateTime -->\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date-picker>\r\n            </div>\r\n \r\n             <!-- Date-->\r\n             <div *ngIf=\"ques.type === 'Date'\">\r\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date>\r\n            </div>\r\n \r\n             <!-- Time-->\r\n             <div *ngIf=\"ques.type === 'Time'\">\r\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-time>\r\n            </div>\r\n           <!-- calendar  -->\r\n            <div *ngIf=\"ques.type === 'Calendar'\">\r\n                <app-custom-calendar\r\n                [question]=\"ques\"\r\n                (eventSelected)=\"getCalendarEvent($event)\"\r\n                (dateSelected)=\"getCurrentCalendar($event)\"\r\n                (openModal)=\"openCalendarModal($event)\"\r\n                (closeModal)=\"closeCalendarModal($event)\"\r\n                ></app-custom-calendar>\r\n                <!-- model used in calendar component -->\r\n                <app-custom-model *ngIf=\"isCalendarModalOpen\"\r\n                    [modalTitle]=\"calendarModalTitle\"\r\n                    [isModalOpen]=\"isCalendarModalOpen\"\r\n                    [modalSize]=\"calendarModalSize\"\r\n                    [saveButtonValue]=\"calendarSaveButtonValue\"\r\n                    [modalFooter]=\"modalCalendarModalFooter\"\r\n                    (saveButtonEmit)=\"onCalendarModalSave()\"\r\n                    (cancelButtonEmit)=\"closeCalendarModal($event)\"\r\n                >\r\n                   <lib-questionbook  [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\r\n                </app-custom-model>\r\n            </div>\r\n            <!-- Text -->\r\n            <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\r\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\r\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\r\n                        textBox: !qbItem.progressBar\r\n                    }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\r\n                    [error]=\"ques.error\" [placeholder]=\"ques.question\" (inputValue)=\"childEventCapture($event, ques)\">\r\n                </app-custom-input>\r\n            </div>\r\n \r\n            <!-- for pick location -->\r\n            <!--   VD 21DEC23 - dependent field change -->\r\n            <div *ngIf=\"ques.type === 'Location'\">\r\n            <!-- HA10012024 Added Api key as input -->\r\n                <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\r\n                </app-pick-location>\r\n            </div>\r\n \r\n            <!-- for  text area   -->\r\n            <div *ngIf=\"ques.type === 'TextArea'\">\r\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\r\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\r\n            </div>\r\n            <!-- RS 06JAN25 -->\r\n           <!-- for rich text editor -->\r\n            <div *ngIf=\"ques.type === 'RichTextArea'\">\r\n                <app-custom-rich-text \r\n                    [question]=\"ques\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    [value]=\"ques.input || ''\"\r\n                    [error]=\"ques.error\"\r\n                    [placeholder]=\"ques.question\"\r\n                    (textValueChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-rich-text>\r\n            </div>\r\n\r\n            <!-- Email -->\r\n            <div *ngIf=\"ques.type === 'Email'\">\r\n                <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n            </div>\r\n \r\n            <!-- Table -->\r\n            <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-table>\r\n            </div>\r\n \r\n              <!-- Table Appendix -->\r\n              <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\r\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-table-appendix>\r\n            </div>\r\n             <!-- list -->\r\n             <!-- VD 20Aug24 used correct attribute -->\r\n             <div *ngIf=\"ques.type === 'List'\" class=\"\">\r\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)\">\r\n                </lib-search-box>\r\n            </div>\r\n \r\n            <!-- Dropdown -->\r\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\r\n            <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\r\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\r\n                <app-custom-dropdown [options]=\"ques.options\"\r\n                    [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\r\n                    [selectedValue]=\"ques.selectedValue\"\r\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    [question]=\"ques\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-dropdown>\r\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\r\n            </div>\r\n            <!-- // VD 02Aug24 custom-radio component -->\r\n            <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\r\n                <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-radio>\r\n            </div>\r\n \r\n            <!-- Attachment / Files -->\r\n            <div *ngIf=\"ques.type === 'File'\" class=\"\">\r\n                <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\r\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\r\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\r\n                <app-dependent-table [alertMessage]=\"ques.errorMessage\">\r\n                </app-dependent-table>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'Label'\" class=\"\">\r\n                <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n                </app-custom-label>\r\n            </div>\r\n             <!-- // VD 02Aug24 image component -->\r\n            <div *ngIf=\"ques.type === 'Image'\" class=\"\">\r\n                <app-custom-image [question]=\"ques\">\r\n                </app-custom-image>\r\n            </div>\r\n            <!-- 08NOV23 - button type question added -->\r\n             <!-- Button -->\r\n            <div *ngIf=\"ques.type === 'Button'\" class=\"\">\r\n                <app-custom-button [height]=\"'50px'\"\r\n                [width]=\"'150px'\"\r\n                [buttonText]=\"ques?.question\"\r\n                [value]=\"ques?.question\"\r\n                (buttonValue)=\"childEventCapture($event, ques)\"\r\n                >\r\n                </app-custom-button>\r\n            </div>\r\n            <!-- HA 20DEC23  This is to load book type questions-->\r\n            <div *ngIf=\"ques.type === 'Book'\">\r\n                <!-- HA 09FEB24 Added ternary operator -->\r\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n            </div>\r\n         </div>\r\n        </div>\r\n    </div>\r\n  <!-- 06-09-24 for calendar type-->\r\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 -->\r\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\r\n<!-- HA 18JAN24  Added class for styling -->\r\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\r\n    <div class=\"form-row\">\r\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\r\n        <!-- RA09DEC24 Changed keys-->\r\n        <div\r\n            [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\r\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\r\n            <!-- Sub Question Label -->\r\n            <!-- HA 20DEC23 Label Style from salesforce -->\r\n            <!-- VD 09May24 is hide field change-->\r\n         <div *ngIf=\"!ques.isHidden\">\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n \r\n            </div>\r\n            <!-- VD 20JUN24 - help text changes-->\r\n            <!-- VD 01Aug24 - validation change-->\r\n            <!-- // VD 02Aug24 - label value style-->\r\n            <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\r\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\r\n                    <div  *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\r\n                    <!-- RS 17JAN2025 -->\r\n                    <!-- Displays icons with tooltips help text -->\r\n                    <div *ngIf=\"ques.questionText && ques?.helpText\" \r\n                        class=\"icon\" \r\n                        [matTooltip]=\"ques?.helpText\"\r\n                        matTooltipClass=\"white-tooltip\">i</div>\r\n        <!-- RS 17JAN2025 -->\r\n        <!--  Displays icons with tooltips for file requirements -->\r\n        <div \r\n            class=\"icon\" \r\n            *ngIf=\"ques.fieldsMeta\"\r\n            [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\"\r\n            matTooltipClass=\"white-tooltip\"\r\n            style=\"margin-left: 4px;\"\r\n        >i</div>\r\n    </span>\r\n</div>\r\n            <!-- // VD 12Jun24 - readonly change-->\r\n            <!-- DateTime -->\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date-picker>\r\n            </div>\r\n \r\n             <!-- Date-->\r\n             <div *ngIf=\"ques.type === 'Date'\">\r\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date>\r\n            </div>\r\n \r\n             <!-- Time-->\r\n             <div *ngIf=\"ques.type === 'Time'\">\r\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-time>\r\n            </div>\r\n           <!-- calendar  -->\r\n            <div *ngIf=\"ques.type === 'Calendar'\">\r\n                <app-custom-calendar\r\n                [question]=\"ques\"\r\n                (eventSelected)=\"getCalendarEvent($event)\"\r\n                (dateSelected)=\"getCurrentCalendar($event)\"\r\n                (openModal)=\"openCalendarModal($event)\"\r\n                (closeModal)=\"closeCalendarModal($event)\"\r\n                ></app-custom-calendar>\r\n                <!-- model used in calendar component -->\r\n                <app-custom-model *ngIf=\"isCalendarModalOpen\"\r\n                    [modalTitle]=\"calendarModalTitle\"\r\n                    [isModalOpen]=\"isCalendarModalOpen\"\r\n                    [modalSize]=\"calendarModalSize\"\r\n                    [saveButtonValue]=\"calendarSaveButtonValue\"\r\n                    [modalFooter]=\"modalCalendarModalFooter\"\r\n                    (saveButtonEmit)=\"onCalendarModalSave()\"\r\n                    (cancelButtonEmit)=\"closeCalendarModal($event)\"\r\n                >\r\n                   <lib-questionbook  [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\r\n                </app-custom-model>\r\n            </div>\r\n            <!-- Text -->\r\n            <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\r\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\r\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\r\n                        textBox: !qbItem.progressBar\r\n                    }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\r\n                    [error]=\"ques.error\" [placeholder]=\"ques.question\" (inputValue)=\"childEventCapture($event, ques)\">\r\n                </app-custom-input>\r\n            </div>\r\n \r\n            <!-- for pick location -->\r\n            <!--   VD 21DEC23 - dependent field change -->\r\n            <div *ngIf=\"ques.type === 'Location'\">\r\n            <!-- HA10012024 Added Api key as input -->\r\n                <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\r\n                </app-pick-location>\r\n            </div>\r\n \r\n            <!-- for  text area   -->\r\n            <div *ngIf=\"ques.type === 'TextArea'\">\r\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\r\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\r\n            </div>\r\n            <!-- RS 06JAN25 -->\r\n           <!-- for rich text editor -->\r\n            <div *ngIf=\"ques.type === 'RichTextArea'\">\r\n                <app-custom-rich-text \r\n                    [question]=\"ques\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    [value]=\"ques.input || ''\"\r\n                    [error]=\"ques.error\"\r\n                    [placeholder]=\"ques.question\"\r\n                    (textValueChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-rich-text>\r\n            </div>\r\n\r\n            <!-- Email -->\r\n            <div *ngIf=\"ques.type === 'Email'\">\r\n                <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n            </div>\r\n \r\n            <!-- Table -->\r\n            <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-table>\r\n            </div>\r\n \r\n              <!-- Table Appendix -->\r\n              <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\r\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-table-appendix>\r\n            </div>\r\n             <!-- list -->\r\n             <!-- VD 20Aug24 used correct attribute -->\r\n             <div *ngIf=\"ques.type === 'List'\" class=\"\">\r\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)\">\r\n                </lib-search-box>\r\n            </div>\r\n \r\n            <!-- Dropdown -->\r\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\r\n            <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\r\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\r\n                <app-custom-dropdown [options]=\"ques.options\"\r\n                    [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\r\n                    [selectedValue]=\"ques.selectedValue\"\r\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    [question]=\"ques\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-dropdown>\r\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\r\n            </div>\r\n            <!-- // VD 02Aug24 custom-radio component -->\r\n            <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\r\n                <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-radio>\r\n            </div>\r\n \r\n            <!-- Attachment / Files -->\r\n            <div *ngIf=\"ques.type === 'File'\" class=\"\">\r\n                <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\r\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\r\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\r\n                <app-dependent-table [alertMessage]=\"ques.errorMessage\">\r\n                </app-dependent-table>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'Label'\" class=\"\">\r\n                <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n                </app-custom-label>\r\n            </div>\r\n             <!-- // VD 02Aug24 image component -->\r\n            <div *ngIf=\"ques.type === 'Image'\" class=\"\">\r\n                <app-custom-image [question]=\"ques\">\r\n                </app-custom-image>\r\n            </div>\r\n            <!-- 08NOV23 - button type question added -->\r\n             <!-- Button -->\r\n            <div *ngIf=\"ques.type === 'Button'\" class=\"\">\r\n                <app-custom-button [height]=\"'50px'\"\r\n                [width]=\"'150px'\"\r\n                [buttonText]=\"ques?.question\"\r\n                [value]=\"ques?.question\"\r\n                (buttonValue)=\"childEventCapture($event, ques)\"\r\n                >\r\n                </app-custom-button>\r\n            </div>\r\n            <!-- HA 20DEC23  This is to load book type questions-->\r\n            <div *ngIf=\"ques.type === 'Book'\">\r\n                <!-- HA 09FEB24 Added ternary operator -->\r\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n            </div>\r\n         </div>\r\n        </div>\r\n    </div>\r\n  <!-- 06-09-24 for calendar type-->\r\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 -->\r\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\r\n<!-- HA 18JAN24  Added class for styling -->\r\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\r\n    <div class=\"form-row\">\r\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\r\n        <!-- RA09DEC24 Changed keys-->\r\n        <div\r\n            [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\r\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\r\n            <!-- Sub Question Label -->\r\n            <!-- HA 20DEC23 Label Style from salesforce -->\r\n            <!-- VD 09May24 is hide field change-->\r\n         <div *ngIf=\"!ques.isHidden\">\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n \r\n            </div>\r\n            <!-- VD 20JUN24 - help text changes-->\r\n            <!-- VD 01Aug24 - validation change-->\r\n            <!-- // VD 02Aug24 - label value style-->\r\n            <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\r\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\r\n                    <div  *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\r\n                    <div *ngIf=\"ques.questionText && ques?.helpText\" class=\"icon\" [matTooltip]=\"ques?.helpText\">i</div></span>\r\n            </div>\r\n            <!-- // VD 12Jun24 - readonly change-->\r\n            <!-- DateTime -->\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date-picker>\r\n            </div>\r\n \r\n             <!-- Date-->\r\n             <div *ngIf=\"ques.type === 'Date'\">\r\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date>\r\n            </div>\r\n \r\n             <!-- Time-->\r\n             <div *ngIf=\"ques.type === 'Time'\">\r\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-time>\r\n            </div>\r\n           <!-- calendar  -->\r\n            <div *ngIf=\"ques.type === 'Calendar'\">\r\n                <app-custom-calendar\r\n                [question]=\"ques\"\r\n                (eventSelected)=\"getCalendarEvent($event)\"\r\n                (dateSelected)=\"getCurrentCalendar($event)\"\r\n                (openModal)=\"openCalendarModal($event)\"\r\n                (closeModal)=\"closeCalendarModal($event)\"\r\n                ></app-custom-calendar>\r\n                <!-- model used in calendar component -->\r\n                <app-custom-model *ngIf=\"isCalendarModalOpen\"\r\n                    [modalTitle]=\"calendarModalTitle\"\r\n                    [isModalOpen]=\"isCalendarModalOpen\"\r\n                    [modalSize]=\"calendarModalSize\"\r\n                    [saveButtonValue]=\"calendarSaveButtonValue\"\r\n                    [modalFooter]=\"modalCalendarModalFooter\"\r\n                    (saveButtonEmit)=\"onCalendarModalSave()\"\r\n                    (cancelButtonEmit)=\"closeCalendarModal($event)\"\r\n                >\r\n                   <lib-questionbook  [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\r\n                </app-custom-model>\r\n            </div>\r\n            <!-- Text -->\r\n            <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\r\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\r\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\r\n                        textBox: !qbItem.progressBar\r\n                    }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\r\n                    [error]=\"ques.error\" [placeholder]=\"ques.question\" (inputValue)=\"childEventCapture($event, ques)\">\r\n                </app-custom-input>\r\n            </div>\r\n \r\n            <!-- for pick location -->\r\n            <!--   VD 21DEC23 - dependent field change -->\r\n            <div *ngIf=\"ques.type === 'Location'\">\r\n            <!-- HA10012024 Added Api key as input -->\r\n                <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\r\n                </app-pick-location>\r\n            </div>\r\n \r\n            <!-- for  text area   -->\r\n            <div *ngIf=\"ques.type === 'TextArea'\">\r\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\r\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\r\n            </div>\r\n            <!-- RS 06JAN25 -->\r\n           <!-- for rich text editor -->\r\n            <div *ngIf=\"ques.type === 'RichTextArea'\">\r\n                <app-custom-rich-text \r\n                    [question]=\"ques\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    [value]=\"ques.input || ''\"\r\n                    [error]=\"ques.error\"\r\n                    [placeholder]=\"ques.question\"\r\n                    (textValueChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-rich-text>\r\n            </div>\r\n\r\n            <!-- Email -->\r\n            <div *ngIf=\"ques.type === 'Email'\">\r\n                <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n            </div>\r\n \r\n            <!-- Table -->\r\n            <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-table>\r\n            </div>\r\n \r\n              <!-- Table Appendix -->\r\n              <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\r\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-table-appendix>\r\n            </div>\r\n             <!-- list -->\r\n             <!-- VD 20Aug24 used correct attribute -->\r\n             <div *ngIf=\"ques.type === 'List'\" class=\"\">\r\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)\">\r\n                </lib-search-box>\r\n            </div>\r\n \r\n            <!-- Dropdown -->\r\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\r\n            <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\r\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\r\n                <app-custom-dropdown [options]=\"ques.options\"\r\n                    [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\r\n                    [selectedValue]=\"ques.selectedValue\"\r\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    [question]=\"ques\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-dropdown>\r\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\r\n            </div>\r\n            <!-- // VD 02Aug24 custom-radio component -->\r\n            <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\r\n                <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-radio>\r\n            </div>\r\n \r\n            <!-- Attachment / Files -->\r\n            <div *ngIf=\"ques.type === 'File'\" class=\"\">\r\n                <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\r\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\r\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\r\n                <app-dependent-table [alertMessage]=\"ques.errorMessage\">\r\n                </app-dependent-table>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'Label'\" class=\"\">\r\n                <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n                </app-custom-label>\r\n            </div>\r\n             <!-- // VD 02Aug24 image component -->\r\n            <div *ngIf=\"ques.type === 'Image'\" class=\"\">\r\n                <app-custom-image [question]=\"ques\">\r\n                </app-custom-image>\r\n            </div>\r\n            <!-- 08NOV23 - button type question added -->\r\n             <!-- Button -->\r\n            <div *ngIf=\"ques.type === 'Button'\" class=\"\">\r\n                <app-custom-button [height]=\"'50px'\"\r\n                [width]=\"'150px'\"\r\n                [buttonText]=\"ques?.question\"\r\n                [value]=\"ques?.question\"\r\n                (buttonValue)=\"childEventCapture($event, ques)\"\r\n                >\r\n                </app-custom-button>\r\n            </div>\r\n            <!-- HA 20DEC23  This is to load book type questions-->\r\n            <div *ngIf=\"ques.type === 'Book'\">\r\n                <!-- HA 09FEB24 Added ternary operator -->\r\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n            </div>\r\n         </div>\r\n        </div>\r\n    </div>\r\n  <!-- 06-09-24 for calendar type-->\r\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 -->\r\n<!-- HA 28DEC23  Removed IsShengel(removal of shengel values applies for this reason) and direct styling of books to avoid styling issues-->\r\n<!-- HA 18JAN24  Added class for styling -->\r\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\r\n    <div class=\"form-row\">\r\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\r\n        <!-- RA09DEC24 Changed keys-->\r\n        <div\r\n            [class]=\"'col-lg-' + ques.size + ' paddingnone'\"\r\n            *ngFor=\"let ques of questions;let i = index\" [id]=\"ques.id\" [dir]=\"ques.langDirection\" [style]=\"ques?.style?.questionStyle\">\r\n            <!-- Sub Question Label -->\r\n            <!-- HA 20DEC23 Label Style from salesforce -->\r\n            <!-- VD 09May24 is hide field change-->\r\n         <div *ngIf=\"!ques.isHidden\">\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n \r\n            </div>\r\n            <!-- VD 20JUN24 - help text changes-->\r\n            <!-- VD 01Aug24 - validation change-->\r\n            <!-- // VD 02Aug24 - label value style-->\r\n            <div [ngClass]=\"{ down2: qbItem?.progressBar }\" *ngIf=\"ques.style?.showLabel ? ques.style?.showLabel : true\" [style]=\"ques.style?.labelStyle\">\r\n                <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\">{{ removeCharacters(ques?.questionText) }}\r\n                    <div  *ngIf=\"ques.isOptional\" style=\"color: red;\">*</div>\r\n                    <!-- RS 17JAN2025 -->\r\n                    <!-- Displays icons with tooltips help text -->\r\n                    <div *ngIf=\"ques.questionText && ques?.helpText\" \r\n                        class=\"icon\" \r\n                        [matTooltip]=\"ques?.helpText\"\r\n                        matTooltipClass=\"white-tooltip\">i</div>\r\n        <!-- RS 17JAN2025 -->\r\n        <!--  Displays icons with tooltips for file requirements -->\r\n        <div \r\n            class=\"icon\" \r\n            *ngIf=\"ques.fieldsMeta\"\r\n            [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\"\r\n            matTooltipClass=\"white-tooltip\"\r\n            style=\"margin-left: 4px;\"\r\n        >i</div>\r\n    </span>\r\n</div>\r\n            <!-- // VD 12Jun24 - readonly change-->\r\n            <!-- DateTime -->\r\n            <div *ngIf=\"ques.type === 'DateTime'\">\r\n                <app-custom-date-picker [minDate]=\"ques.minDate\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" [date]=\"ques.input\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date-picker>\r\n            </div>\r\n \r\n             <!-- Date-->\r\n             <div *ngIf=\"ques.type === 'Date'\">\r\n                <app-custom-date  [date]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (dateChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-date>\r\n            </div>\r\n \r\n             <!-- Time-->\r\n             <div *ngIf=\"ques.type === 'Time'\">\r\n                <app-custom-time  [time]=\"ques.input\" [error]=\"ques.error\" [errorMessage]=\"ques.errorMessage\" [readOnly]=\"ques.isReadOnly\" (timeChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-time>\r\n            </div>\r\n           <!-- calendar  -->\r\n            <div *ngIf=\"ques.type === 'Calendar'\">\r\n                <app-custom-calendar\r\n                [question]=\"ques\"\r\n                (eventSelected)=\"getCalendarEvent($event)\"\r\n                (dateSelected)=\"getCurrentCalendar($event)\"\r\n                (openModal)=\"openCalendarModal($event)\"\r\n                (closeModal)=\"closeCalendarModal($event)\"\r\n                ></app-custom-calendar>\r\n                <!-- model used in calendar component -->\r\n                <app-custom-model *ngIf=\"isCalendarModalOpen\"\r\n                    [modalTitle]=\"calendarModalTitle\"\r\n                    [isModalOpen]=\"isCalendarModalOpen\"\r\n                    [modalSize]=\"calendarModalSize\"\r\n                    [saveButtonValue]=\"calendarSaveButtonValue\"\r\n                    [modalFooter]=\"modalCalendarModalFooter\"\r\n                    (saveButtonEmit)=\"onCalendarModalSave()\"\r\n                    (cancelButtonEmit)=\"closeCalendarModal($event)\"\r\n                >\r\n                   <lib-questionbook  [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\" (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\r\n                </app-custom-model>\r\n            </div>\r\n            <!-- Text -->\r\n            <div *ngIf=\"ques.type === 'Text' || ques.type === 'Link'\" >\r\n                <app-custom-input [value]=\"ques.input\" [ngClassValue]=\"{\r\n                        'dis-flex dt-line date-line bookText boxoutline myt-font1': qbItem.progressBar,\r\n                        textBox: !qbItem.progressBar\r\n                    }\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [idValue]=\"ques.trackingId\" [focusEvent]=\"clearSQError(ques.id)\"\r\n                    [error]=\"ques.error\" [placeholder]=\"ques.question\" (inputValue)=\"childEventCapture($event, ques)\">\r\n                </app-custom-input>\r\n            </div>\r\n \r\n            <!-- for pick location -->\r\n            <!--   VD 21DEC23 - dependent field change -->\r\n            <div *ngIf=\"ques.type === 'Location'\">\r\n            <!-- HA10012024 Added Api key as input -->\r\n                <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\" (locationSelected)=\"childEventCapture($event, ques)\">\r\n                </app-pick-location>\r\n            </div>\r\n \r\n            <!-- for  text area   -->\r\n            <div *ngIf=\"ques.type === 'TextArea'\">\r\n                <app-custom-text-area [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [value]=\"ques.input\" [rows]=\"3\" [error]=\"ques.error\" [placeholder]=\"ques.question \"\r\n                    (textareaValueChange)=\"childEventCapture($event, ques)\"></app-custom-text-area>\r\n            </div>\r\n            <!-- RS 06JAN25 -->\r\n           <!-- for rich text editor -->\r\n            <div *ngIf=\"ques.type === 'RichTextArea'\">\r\n                <app-custom-rich-text \r\n                    [question]=\"ques\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    [value]=\"ques.input || ''\"\r\n                    [error]=\"ques.error\"\r\n                    [placeholder]=\"ques.question\"\r\n                    (textValueChange)=\"childEventCapture($event, ques)\">\r\n                </app-custom-rich-text>\r\n            </div>\r\n\r\n            <!-- Email -->\r\n            <div *ngIf=\"ques.type === 'Email'\">\r\n                <input type=\"email\" readOnly=\"ques.isReadOnly\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\r\n                    style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\r\n            </div>\r\n \r\n            <!-- Table -->\r\n            <div *ngIf=\"ques.type === 'Table'\" class=\"\">\r\n                <app-custom-table [question]=\"ques\" [apiMeta]=\"ques.subText\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-table>\r\n            </div>\r\n \r\n              <!-- Table Appendix -->\r\n              <div *ngIf=\"ques.type === 'TableAppendix'\" class=\"\">\r\n                <app-table-appendix [question]=\"ques\" (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-table-appendix>\r\n            </div>\r\n             <!-- list -->\r\n             <!-- VD 20Aug24 used correct attribute -->\r\n             <div *ngIf=\"ques.type === 'List'\" class=\"\">\r\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)\">\r\n                </lib-search-box>\r\n            </div>\r\n \r\n            <!-- Dropdown -->\r\n            <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\r\n            <div *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" class=\"\">\r\n                <!-- HA 20DEC23 For Translation --> <!-- VD 19JAN24 - getting token as input -->\r\n                <app-custom-dropdown [options]=\"ques.options\"\r\n                    [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\r\n                    [selectedValue]=\"ques.selectedValue\"\r\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    [question]=\"ques\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-dropdown>\r\n                <i class=\"fa fa-check \" aria-hidden=\"true\" *ngIf=\"ques?.input?.length > 0\"></i>\r\n            </div>\r\n            <!-- // VD 02Aug24 custom-radio component -->\r\n            <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\r\n                <app-custom-radio [options]=\"ques.options\" [token]=\"token\"\r\n                    [apiMeta]=\"ques.subText\" [id]=\"ques.id\" [selectedValue]=\"ques.selectedValue\"\r\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\r\n                    [referenceField]=\"ques.referenceField\"\r\n                    [readOnly]=\"ques.isReadOnly\"\r\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\r\n                </app-custom-radio>\r\n            </div>\r\n \r\n            <!-- Attachment / Files -->\r\n            <div *ngIf=\"ques.type === 'File'\" class=\"\">\r\n                <app-file-upload [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\" [allFiles]=\"ques.input\" [tableFile]=\"false\"\r\n                (selectedFileData)=\"childEventCapture($event, ques)\" (deletedFileData)=\"deleteFile($event)\"\r\n                [isDeleteFileButtonVisible]=\"true\"></app-file-upload>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'PopUpMessage'\" class=\"\">\r\n                <app-dependent-table [alertMessage]=\"ques.errorMessage\">\r\n                </app-dependent-table>\r\n            </div>\r\n            <div *ngIf=\"ques.type === 'Label'\" class=\"\">\r\n                <app-custom-label [labelStyle]=\"ques.title\" [labelValue]=\"ques.question\">\r\n                </app-custom-label>\r\n            </div>\r\n             <!-- // VD 02Aug24 image component -->\r\n            <div *ngIf=\"ques.type === 'Image'\" class=\"\">\r\n                <app-custom-image [question]=\"ques\">\r\n                </app-custom-image>\r\n            </div>\r\n            <!-- 08NOV23 - button type question added -->\r\n             <!-- Button -->\r\n            <div *ngIf=\"ques.type === 'Button'\" class=\"\">\r\n                <app-custom-button [height]=\"'50px'\"\r\n                [width]=\"'150px'\"\r\n                [buttonText]=\"ques?.question\"\r\n                [value]=\"ques?.question\"\r\n                (buttonValue)=\"childEventCapture($event, ques)\"\r\n                >\r\n                </app-custom-button>\r\n            </div>\r\n            <!-- HA 20DEC23  This is to load book type questions-->\r\n            <div *ngIf=\"ques.type === 'Book'\">\r\n                <!-- HA 09FEB24 Added ternary operator -->\r\n                <lib-questionbook [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [questions]=\"ques.qbItem?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n            </div>\r\n         </div>\r\n        </div>\r\n    </div>\r\n  <!-- 06-09-24 for calendar type-->\r\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]
@@ -9812,11 +9836,11 @@ class BookletComponent {
         this.handleCalendarEvent.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookletComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: StorageService }, { token: i1.ActivatedRoute }, { token: i6$1.DomSanitizer }, { token: ChangeService }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookletComponent, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, usesOnChanges: true, ngImport: i0, template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- Booklet Handling-->\r\n<!-- HA 19DEC23 For Direction -->\r\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\r\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\r\n    <!-- RS 09DEC24 Changed keys--> \r\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\r\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\r\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\r\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\r\n            <div>\r\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\r\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\r\n                    <!-- VD 08NOV23 - showing lable when its available-->\r\n                    <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText\" > \r\n                        {{ ques?.questionText }}\r\n                    </div>\r\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\r\n                <!--VD 06Sep24 calendar changes--> \r\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" \r\n                [labelValue]=\"labelValue\" \r\n                [questionItem]=\"ques\" \r\n                [translatedQuestions]=\"readTransQuestions(qb.id)\" \r\n                [questions]=\"readQuestions(qb.id)\"  \r\n                (handleDropDown)=\"getDropDown($event)\"\r\n                (handleCalendarDate)=\"getCalendarDate($event)\"\r\n                (handleCalendarEvent)=\"getCalendarEvent($event)\"\r\n                ></lib-questionbook>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\r\n    <ng-template #elseBlock>\r\n        <div class=\"questiondiv1\">\r\n            <div>\r\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\r\n                    <!-- VD 08NOV23 - showing lable when its available-->\r\n                    <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText\" > \r\n                        {{ qb?.questionText }}\r\n                        {{ qb?.title }}\r\n                    </div>\r\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\r\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.id)\" [questions]=\"readQuestions(qb.id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n<!-- RS 09DEC24 Changed keys--> \r\n<!-- Group Actions -->\r\n<!-- HA 19DEC23 For Direction -->\r\n<div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [ngClass]=\"langDirection\">\r\n    <div *ngFor=\"let action of actions; let i = index\">\r\n    <!-- // HA 22JAN24 Commonise the button style in fusion -->\r\n        <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\r\n            {{ action.name }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookletComponent, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, usesOnChanges: true, ngImport: i0, template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- Booklet Handling-->\r\n<!-- HA 19DEC23 For Direction -->\r\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\r\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\r\n    <!-- RS 09DEC24 Changed keys-->\r\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\r\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\r\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\r\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\r\n            <div>\r\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\r\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\r\n                    <!-- VD 08NOV23 - showing lable when its available-->\r\n                    <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText\" >\r\n                        {{ ques?.questionText }}\r\n                    </div>\r\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\r\n                <!--VD 06Sep24 calendar changes-->\r\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\r\n                [labelValue]=\"labelValue\"\r\n                [questionItem]=\"ques\"\r\n                [translatedQuestions]=\"readTransQuestions(qb.id)\"\r\n                [questions]=\"readQuestions(qb.id)\"\r\n                (handleDropDown)=\"getDropDown($event)\"\r\n                (handleCalendarDate)=\"getCalendarDate($event)\"\r\n                (handleCalendarEvent)=\"getCalendarEvent($event)\"\r\n                ></lib-questionbook>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\r\n    <ng-template #elseBlock>\r\n        <div class=\"questiondiv1\">\r\n            <div>\r\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\r\n                    <!-- VD 08NOV23 - showing lable when its available-->\r\n                    <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText\" >\r\n                        {{ qb?.questionText }}\r\n                        {{ qb?.title }}\r\n                    </div>\r\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\r\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.id)\" [questions]=\"readQuestions(qb.id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n<!-- RS 09DEC24 Changed keys-->\r\n<!-- Group Actions -->\r\n<!-- HA 19DEC23 For Direction -->\r\n<div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [ngClass]=\"langDirection\">\r\n    <div *ngFor=\"let action of actions; let i = index\">\r\n    <!-- // HA 22JAN24 Commonise the button style in fusion -->\r\n        <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\r\n            {{ action.name }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "dropDownData"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-booklet', template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- Booklet Handling-->\r\n<!-- HA 19DEC23 For Direction -->\r\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\r\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\r\n    <!-- RS 09DEC24 Changed keys--> \r\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\r\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\r\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\r\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\r\n            <div>\r\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\r\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\r\n                    <!-- VD 08NOV23 - showing lable when its available-->\r\n                    <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText\" > \r\n                        {{ ques?.questionText }}\r\n                    </div>\r\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\r\n                <!--VD 06Sep24 calendar changes--> \r\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" \r\n                [labelValue]=\"labelValue\" \r\n                [questionItem]=\"ques\" \r\n                [translatedQuestions]=\"readTransQuestions(qb.id)\" \r\n                [questions]=\"readQuestions(qb.id)\"  \r\n                (handleDropDown)=\"getDropDown($event)\"\r\n                (handleCalendarDate)=\"getCalendarDate($event)\"\r\n                (handleCalendarEvent)=\"getCalendarEvent($event)\"\r\n                ></lib-questionbook>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\r\n    <ng-template #elseBlock>\r\n        <div class=\"questiondiv1\">\r\n            <div>\r\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\r\n                    <!-- VD 08NOV23 - showing lable when its available-->\r\n                    <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText\" > \r\n                        {{ qb?.questionText }}\r\n                        {{ qb?.title }}\r\n                    </div>\r\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\r\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.id)\" [questions]=\"readQuestions(qb.id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n<!-- RS 09DEC24 Changed keys--> \r\n<!-- Group Actions -->\r\n<!-- HA 19DEC23 For Direction -->\r\n<div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [ngClass]=\"langDirection\">\r\n    <div *ngFor=\"let action of actions; let i = index\">\r\n    <!-- // HA 22JAN24 Commonise the button style in fusion -->\r\n        <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\r\n            {{ action.name }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}\n"] }]
+            args: [{ selector: 'lib-booklet', template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\r\n<!-- Booklet Handling-->\r\n<!-- HA 19DEC23 For Direction -->\r\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\r\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\r\n    <!-- RS 09DEC24 Changed keys-->\r\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\r\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\r\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\r\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\r\n            <div>\r\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\r\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\r\n                    <!-- VD 08NOV23 - showing lable when its available-->\r\n                    <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText\" >\r\n                        {{ ques?.questionText }}\r\n                    </div>\r\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\r\n                <!--VD 06Sep24 calendar changes-->\r\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\r\n                [labelValue]=\"labelValue\"\r\n                [questionItem]=\"ques\"\r\n                [translatedQuestions]=\"readTransQuestions(qb.id)\"\r\n                [questions]=\"readQuestions(qb.id)\"\r\n                (handleDropDown)=\"getDropDown($event)\"\r\n                (handleCalendarDate)=\"getCalendarDate($event)\"\r\n                (handleCalendarEvent)=\"getCalendarEvent($event)\"\r\n                ></lib-questionbook>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\r\n    <ng-template #elseBlock>\r\n        <div class=\"questiondiv1\">\r\n            <div>\r\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\r\n                    <!-- VD 08NOV23 - showing lable when its available-->\r\n                    <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText\" >\r\n                        {{ qb?.questionText }}\r\n                        {{ qb?.title }}\r\n                    </div>\r\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\r\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.id)\" [questions]=\"readQuestions(qb.id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n<!-- RS 09DEC24 Changed keys-->\r\n<!-- Group Actions -->\r\n<!-- HA 19DEC23 For Direction -->\r\n<div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [ngClass]=\"langDirection\">\r\n    <div *ngFor=\"let action of actions; let i = index\">\r\n    <!-- // HA 22JAN24 Commonise the button style in fusion -->\r\n        <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\r\n            {{ action.name }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}\n"] }]
         }], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: StorageService }, { type: i1.ActivatedRoute }, { type: i6$1.DomSanitizer }, { type: ChangeService }, { type: i0.ElementRef }, { type: I18nService }], propDecorators: { bookletId: [{
                 type: Input
             }], serv: [{