master-control 0.3.55 → 0.3.57

package/fesm2022/master-control.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, input, EventEmitter, Component, Output, Directive, Inject, Input, HostListener, ViewChild, output, effect } from '@angular/core';
+import { Injectable, input, EventEmitter, Component, Output, Directive, Inject, Input, HostListener, createComponent, ViewChild, output, effect } from '@angular/core';
 import * as i1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i2 from '@angular/material/form-field';
@@ -16,6 +16,7 @@ import * as i3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i2$1 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
+import * as i1$2 from '@angular/platform-browser';
 import { MomentDateAdapter, MomentDateModule } from '@angular/material-moment-adapter';
 import * as i5 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -33,7 +34,6 @@ import * as i4$3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i5$2 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i1$2 from '@angular/platform-browser';
 import * as i1$3 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i4$4 from '@angular/google-maps';
@@ -824,16 +824,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }] } });
 
+class FilePreviewComponent {
+    sanitizer;
+    field = input.required();
+    file = input(null);
+    closed = new EventEmitter();
+    fileDataUrl = '';
+    fileObjectUrl = '';
+    textContent = '';
+    safeFileUrl = null;
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    isImage() {
+        return this.file()?.type.startsWith('image/') || false;
+    }
+    isPdf() {
+        return this.file()?.type === 'application/pdf' || false;
+    }
+    isText() {
+        return this.file()?.type.startsWith('text/') || false;
+    }
+    isUnsupported() {
+        return !this.isImage() && !this.isPdf() && !this.isText(); // ✅ Correct
+    }
+    ngOnInit() {
+        document.body.style.overflow = 'hidden';
+        this.loadFileContent();
+    }
+    ngOnDestroy() {
+        document.body.style.overflow = '';
+        if (this.fileObjectUrl) {
+            URL.revokeObjectURL(this.fileObjectUrl);
+        }
+    }
+    loadFileContent() {
+        const currentFile = this.file();
+        if (!currentFile)
+            return;
+        if (this.isImage()) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                this.fileDataUrl = e.target?.result;
+            };
+            reader.readAsDataURL(currentFile);
+        }
+        else if (this.isPdf()) {
+            this.fileObjectUrl = URL.createObjectURL(currentFile);
+            this.safeFileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.fileObjectUrl);
+        }
+        else if (this.isText()) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                this.textContent = e.target?.result;
+            };
+            reader.readAsText(currentFile);
+        }
+    }
+    onBackdropClick(event) {
+        if (event.target === event.currentTarget) {
+            this.closePreview();
+        }
+    }
+    closePreview() {
+        this.closed.emit();
+    }
+    downloadFile() {
+        const currentFile = this.file();
+        if (!currentFile)
+            return;
+        const url = URL.createObjectURL(currentFile);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = currentFile.name;
+        link.style.display = 'none';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        setTimeout(() => URL.revokeObjectURL(url), 100);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilePreviewComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: FilePreviewComponent, isStandalone: true, selector: "lib-file-preview", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"file-preview-modal\" \r\n     *ngIf=\"field() && field()?.isVisible\"\r\n     [id]=\"field()?.fieldName + '_preview'\"\r\n     (click)=\"onBackdropClick($event)\"\r\n     (keydown.escape)=\"closePreview()\"\r\n     [ngStyle]=\"{\r\n       '--modal-background': field()?.previewStyle?.modalBackground || 'rgba(0, 0, 0, 0.9)',\r\n       '--modal-z-index': field()?.previewStyle?.zIndex || '10000',\r\n       '--modal-width': field()?.previewStyle?.width || '100%',\r\n       '--modal-height': field()?.previewStyle?.height || '100%'\r\n     }\">\r\n  \r\n  <!-- Image Preview -->\r\n  <div *ngIf=\"isImage()\" \r\n       class=\"preview-container image-container\"\r\n       [id]=\"field()?.fieldName + '_image_container'\"\r\n       [ngStyle]=\"{\r\n         '--image-container-background': field()?.previewStyle?.imageContainerBackground || 'transparent',\r\n         '--image-container-border-radius': field()?.previewStyle?.imageContainerBorderRadius || '8px',\r\n         '--image-container-padding': field()?.previewStyle?.imageContainerPadding || '20px',\r\n         '--image-container-margin': field()?.previewStyle?.imageContainerMargin || '0'\r\n       }\">\r\n    \r\n    <button class=\"close-btn\" \r\n            type=\"button\"\r\n            [id]=\"field()?.fieldName + '_close_btn'\"\r\n            (click)=\"closePreview()\" \r\n            [title]=\"field()?.previewStyle?.closeBtnTitle || 'Close'\"\r\n            [ngStyle]=\"{\r\n              '--close-btn-background': field()?.previewStyle?.closeBtnBackground || 'rgba(255, 255, 255, 0.9)',\r\n              '--close-btn-color': field()?.previewStyle?.closeBtnColor || '#000',\r\n              '--close-btn-border-radius': field()?.previewStyle?.closeBtnBorderRadius || '50%',\r\n              '--close-btn-font-size': field()?.previewStyle?.closeBtnFontSize || '20px',\r\n              '--close-btn-font-weight': field()?.previewStyle?.closeBtnFontWeight || 'bold',\r\n              '--close-btn-hover-background': field()?.previewStyle?.closeBtnHoverBackground || 'rgba(255, 255, 255, 1)'\r\n            }\">&times;</button>\r\n    \r\n    <h3 class=\"file-title\"\r\n        [ngStyle]=\"{\r\n          '--title-color': field()?.previewStyle?.titleColor || '#fff',\r\n          '--title-font-family': field()?.previewStyle?.titleFontFamily || 'Mulish',\r\n          '--title-font-size': field()?.previewStyle?.titleFontSize || '18px',\r\n          '--title-font-weight': field()?.previewStyle?.titleFontWeight || '600',\r\n          '--title-margin': field()?.previewStyle?.titleMargin || '0 0 10px 0',\r\n          '--title-padding': field()?.previewStyle?.titlePadding || '0 10px'\r\n        }\">{{ file()?.name }}</h3>\r\n    \r\n    <img [src]=\"fileDataUrl\" \r\n         [alt]=\"file()?.name\" \r\n         [id]=\"field()?.fieldName + '_preview_image'\"\r\n         class=\"preview-image\"\r\n         [ngStyle]=\"{\r\n           '--image-max-width': field()?.previewStyle?.imageMaxWidth || '100%',\r\n           '--image-max-height': field()?.previewStyle?.imageMaxHeight || '80vh',\r\n           '--image-border-radius': field()?.previewStyle?.imageBorderRadius || '8px',\r\n           '--image-box-shadow': field()?.previewStyle?.imageBoxShadow || '0 4px 20px rgba(0,0,0,0.5)',\r\n           '--image-object-fit': field()?.previewStyle?.imageObjectFit || 'contain'\r\n         }\" />\r\n  </div>\r\n\r\n  <!-- PDF Preview -->\r\n  <div *ngIf=\"isPdf()\" \r\n       class=\"preview-container pdf-container\"\r\n       [id]=\"field()?.fieldName + '_pdf_container'\"\r\n       [ngStyle]=\"{\r\n         '--pdf-container-background': field()?.previewStyle?.pdfContainerBackground || '#fff',\r\n         '--pdf-container-border-radius': field()?.previewStyle?.pdfContainerBorderRadius || '8px',\r\n         '--pdf-container-width': field()?.previewStyle?.pdfContainerWidth || '95vw',\r\n         '--pdf-container-height': field()?.previewStyle?.pdfContainerHeight || '95vh'\r\n       }\">\r\n    \r\n    <!-- Top-right action buttons -->\r\n    <div class=\"pdf-actions-top-right\"\r\n         [ngStyle]=\"{\r\n           '--actions-top': field()?.previewStyle?.actionsTop || '15px',\r\n           '--actions-right': field()?.previewStyle?.actionsRight || '15px',\r\n           '--actions-gap': field()?.previewStyle?.actionsGap || '10px'\r\n         }\">\r\n      \r\n      <button (click)=\"closePreview()\" \r\n              type=\"button\"\r\n              class=\"action-icon-btn close-btn\"\r\n              [id]=\"field()?.fieldName + '_close_pdf'\"\r\n              [title]=\"field()?.previewStyle?.closeBtnTitle || 'Close'\"\r\n              [ngStyle]=\"{\r\n                '--close-btn-background': field()?.previewStyle?.closeBtnBackground || 'rgba(255, 255, 255, 0.9)',\r\n                '--close-btn-color': field()?.previewStyle?.closeBtnColor || '#000',\r\n                '--close-btn-border-radius': field()?.previewStyle?.closeBtnBorderRadius || '50%',\r\n                '--close-btn-font-size': field()?.previewStyle?.closeBtnFontSize || '20px',\r\n                '--close-btn-font-weight': field()?.previewStyle?.closeBtnFontWeight || 'bold',\r\n                '--close-btn-hover-background': field()?.previewStyle?.closeBtnHoverBackground || 'rgba(255, 255, 255, 1)'\r\n              }\">&times;</button>\r\n    </div>\r\n    \r\n    <!-- File title -->\r\n    <h3 class=\"file-title pdf-title\"\r\n        [ngStyle]=\"{\r\n          '--pdf-title-color': field()?.previewStyle?.pdfTitleColor || '#333',\r\n          '--pdf-title-font-family': field()?.previewStyle?.pdfTitleFontFamily || 'Mulish',\r\n          '--pdf-title-font-size': field()?.previewStyle?.pdfTitleFontSize || '16px',\r\n          '--pdf-title-font-weight': field()?.previewStyle?.pdfTitleFontWeight || '600',\r\n          '--pdf-title-margin': field()?.previewStyle?.pdfTitleMargin || '0px 20px 10px 20px',\r\n          '--pdf-title-padding': field()?.previewStyle?.pdfTitlePadding || '0'\r\n        }\">{{ file()?.name }}</h3>\r\n    \r\n    <iframe [src]=\"safeFileUrl\" \r\n            [title]=\"file()?.name\" \r\n            [id]=\"field()?.fieldName + '_pdf_iframe'\"\r\n            class=\"pdf-iframe\"\r\n            [ngStyle]=\"{\r\n              '--iframe-border': field()?.previewStyle?.iframeBorder || 'none',\r\n              '--iframe-border-radius': field()?.previewStyle?.iframeBorderRadius || '0',\r\n              '--iframe-width': field()?.previewStyle?.iframeWidth || '100%',\r\n              '--iframe-height': field()?.previewStyle?.iframeHeight || 'calc(100% - 80px)',\r\n              '--iframe-min-height': field()?.previewStyle?.iframeMinHeight || '600px'\r\n            }\"></iframe>\r\n  </div>\r\n\r\n  <!-- Text Preview -->\r\n  <div *ngIf=\"isText()\" \r\n       class=\"preview-container text-container\"\r\n       [id]=\"field()?.fieldName + '_text_container'\"\r\n       [ngStyle]=\"{\r\n         '--text-container-background': field()?.previewStyle?.textContainerBackground || '#fff',\r\n         '--text-container-border-radius': field()?.previewStyle?.textContainerBorderRadius || '8px',\r\n         '--text-container-width': field()?.previewStyle?.textContainerWidth || '95vw',\r\n         '--text-container-height': field()?.previewStyle?.textContainerHeight || '95vh'\r\n       }\">\r\n    \r\n    <div class=\"text-header\"\r\n         [id]=\"field()?.fieldName + '_text_header'\"\r\n         [ngStyle]=\"{\r\n           '--text-header-background': field()?.previewStyle?.textHeaderBackground || '#f8f9fa',\r\n           '--text-header-border-color': field()?.previewStyle?.textHeaderBorderColor || '#dee2e6',\r\n           '--text-header-padding': field()?.previewStyle?.textHeaderPadding || '15px 20px'\r\n         }\">\r\n      \r\n      <h3 class=\"file-title\"\r\n          [ngStyle]=\"{\r\n            '--text-title-color': field()?.previewStyle?.textTitleColor || '#333',\r\n            '--text-title-font-family': field()?.previewStyle?.textTitleFontFamily || 'Mulish',\r\n            '--text-title-font-size': field()?.previewStyle?.textTitleFontSize || '16px',\r\n            '--text-title-font-weight': field()?.previewStyle?.textTitleFontWeight || '600',\r\n            '--text-title-margin': field()?.previewStyle?.textTitleMargin || '0'\r\n          }\">{{ file()?.name }}</h3>\r\n      \r\n      <button (click)=\"closePreview()\" \r\n              type=\"button\"\r\n              class=\"btn btn-danger\"\r\n              [id]=\"field()?.fieldName + '_close_text'\"\r\n              [ngStyle]=\"{\r\n                '--btn-danger-background': field()?.previewStyle?.btnDangerBackground || '#dc3545',\r\n                '--btn-danger-color': field()?.previewStyle?.btnDangerColor || '#fff',\r\n                '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\r\n                '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\r\n                '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\r\n              }\">{{ field()?.previewStyle?.closeText || 'Close' }}</button>\r\n    </div>\r\n    \r\n    <pre class=\"text-content\"\r\n         [id]=\"field()?.fieldName + '_text_content'\"\r\n         [ngStyle]=\"{\r\n           '--text-content-background': field()?.previewStyle?.textContentBackground || '#fff',\r\n           '--text-content-color': field()?.previewStyle?.textContentColor || '#333',\r\n           '--text-content-font-family': field()?.previewStyle?.textContentFontFamily || 'Consolas, Monaco, Courier New, monospace',\r\n           '--text-content-font-size': field()?.previewStyle?.textContentFontSize || '14px',\r\n           '--text-content-line-height': field()?.previewStyle?.textContentLineHeight || '1.5',\r\n           '--text-content-padding': field()?.previewStyle?.textContentPadding || '20px',\r\n           '--text-content-margin': field()?.previewStyle?.textContentMargin || '0'\r\n         }\">{{ textContent }}</pre>\r\n  </div>\r\n\r\n  <!-- Unsupported File -->\r\n  <div *ngIf=\"isUnsupported()\" \r\n       class=\"preview-container unsupported-container\"\r\n       [id]=\"field()?.fieldName + '_unsupported_container'\"\r\n       [ngStyle]=\"{\r\n         '--unsupported-background': field()?.previewStyle?.unsupportedBackground || '#fff',\r\n         '--unsupported-border-radius': field()?.previewStyle?.unsupportedBorderRadius || '8px',\r\n         '--unsupported-padding': field()?.previewStyle?.unsupportedPadding || '40px',\r\n         '--unsupported-min-width': field()?.previewStyle?.unsupportedMinWidth || '300px'\r\n       }\">\r\n    \r\n    <div class=\"unsupported-content\">\r\n      <h3 [ngStyle]=\"{\r\n            '--unsupported-title-color': field()?.previewStyle?.unsupportedTitleColor || '#333',\r\n            '--unsupported-title-font-family': field()?.previewStyle?.unsupportedTitleFontFamily || 'Mulish',\r\n            '--unsupported-title-font-size': field()?.previewStyle?.unsupportedTitleFontSize || '18px',\r\n            '--unsupported-title-font-weight': field()?.previewStyle?.unsupportedTitleFontWeight || '600',\r\n            '--unsupported-title-margin': field()?.previewStyle?.unsupportedTitleMargin || '0 0 20px 0'\r\n          }\">{{ file()?.name }}</h3>\r\n      \r\n      <p [ngStyle]=\"{\r\n           '--unsupported-text-color': field()?.previewStyle?.unsupportedTextColor || '#666',\r\n           '--unsupported-text-font-size': field()?.previewStyle?.unsupportedTextFontSize || '14px',\r\n           '--unsupported-text-margin': field()?.previewStyle?.unsupportedTextMargin || '0 0 30px 0'\r\n         }\">{{ field()?.previewStyle?.unsupportedMessage || 'Preview not available for this file type' }}</p>\r\n      \r\n      <div class=\"unsupported-actions\"\r\n           [ngStyle]=\"{\r\n             '--actions-gap': field()?.previewStyle?.actionsGap || '15px',\r\n             '--actions-justify': field()?.previewStyle?.actionsJustify || 'center'\r\n           }\">\r\n        \r\n        <button (click)=\"downloadFile()\" \r\n                type=\"button\"\r\n                class=\"btn btn-primary\"\r\n                [id]=\"field()?.fieldName + '_download'\"\r\n                [ngStyle]=\"{\r\n                  '--btn-primary-background': field()?.previewStyle?.btnPrimaryBackground || '#007bff',\r\n                  '--btn-primary-color': field()?.previewStyle?.btnPrimaryColor || '#fff',\r\n                  '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\r\n                  '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\r\n                  '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\r\n                }\">{{ field()?.previewStyle?.downloadText || 'Download' }}</button>\r\n        \r\n        <button (click)=\"closePreview()\" \r\n                type=\"button\"\r\n                class=\"btn btn-secondary\"\r\n                [id]=\"field()?.fieldName + '_close_unsupported'\"\r\n                [ngStyle]=\"{\r\n                  '--btn-secondary-background': field()?.previewStyle?.btnSecondaryBackground || '#6c757d',\r\n                  '--btn-secondary-color': field()?.previewStyle?.btnSecondaryColor || '#fff',\r\n                  '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\r\n                  '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\r\n                  '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\r\n                }\">{{ field()?.previewStyle?.closeText || 'Close' }}</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".file-preview-modal{position:fixed;top:0;left:0;width:var(--modal-width, 100%);height:var(--modal-height, 100%);background:var(--modal-background, rgba(0, 0, 0, .9));z-index:var(--modal-z-index, 10000);display:flex;align-items:center;justify-content:center;overflow:auto}.preview-container{position:relative;max-width:90%;max-height:90%;display:flex;flex-direction:column;align-items:center;background:var(--image-container-background, transparent);border-radius:var(--image-container-border-radius, 8px);padding:var(--image-container-padding, 10px);margin:var(--image-container-margin, 0)}.close-btn{position:absolute;top:0;right:10px;width:40px!important;height:40px!important;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--close-btn-background, rgba(255, 255, 255, .9));color:var(--close-btn-color, #000);border-radius:var(--close-btn-border-radius, 50%);font-size:var(--close-btn-font-size, 20px);font-weight:var(--close-btn-font-weight, bold);z-index:1001;box-shadow:1px 0 4px 1px #c7c7c7}.close-btn:hover{background:var(--close-btn-hover-background, rgba(255, 255, 255, 1))}.file-title{color:var(--title-color, #000000);font-family:var(--title-font-family, \"Mulish\");font-size:var(--title-font-size, 18px);font-weight:var(--title-font-weight, 600);margin:var(--title-margin, 0 0 10px 0);padding:var(--title-padding, 0 10px);text-align:center;word-break:break-all}.preview-image{max-width:var(--image-max-width, 100%);max-height:var(--image-max-height, 80vh);object-fit:var(--image-object-fit, contain);border-radius:var(--image-border-radius, 4px);box-shadow:var(--image-box-shadow, 0 4px 20px rgba(0, 0, 0, .3))}.preview-content{width:100%;height:80vh;border:none;border-radius:var(--content-border-radius, 4px)}.text-content{background:var(--text-background, #fff);color:var(--text-color, #000);padding:var(--text-padding, 20px);border-radius:var(--text-border-radius, 4px);max-width:var(--text-max-width, 800px);max-height:var(--text-max-height, 70vh);overflow:auto;white-space:pre-wrap;font-family:var(--text-font-family, \"Courier New, monospace\")}.action-buttons{margin-top:20px;display:flex;gap:10px}.action-btn{padding:var(--btn-padding, 8px 16px);background:var(--btn-background, #007bff);color:var(--btn-color, #fff);border:none;border-radius:var(--btn-border-radius, 4px);cursor:pointer;font-size:var(--btn-font-size, 14px)}.action-btn:hover{background:var(--btn-hover-background, #0056b3)}.unsupported-content{text-align:center;color:var(--unsupported-color, #fff);padding:var(--unsupported-padding, 40px)}.pdf-iframe{width:var(--iframe-width, 100%);height:var(--iframe-height, 80vh);min-height:var(--iframe-min-height, 600px);border:var(--iframe-border, none);border-radius:var(--iframe-border-radius, 0)}.pdf-container{width:var(--pdf-container-width, 95vw);height:var(--pdf-container-height, 95vh);background:var(--pdf-container-background, #fff);border-radius:var(--pdf-container-border-radius, 8px);display:flex;flex-direction:column;overflow:hidden}.pdf-header{background:var(--pdf-header-background, #f8f9fa);border-bottom:1px solid var(--pdf-header-border-color, #dee2e6);padding:var(--pdf-header-padding, 15px 20px);flex-shrink:0}.pdf-actions{display:flex;gap:10px;margin-top:10px}.btn{padding:var(--btn-padding, 8px 16px);border:none;border-radius:var(--btn-border-radius, 4px);cursor:pointer;font-size:var(--btn-font-size, 14px);font-weight:var(--btn-font-weight, 400);text-decoration:none;display:inline-block}.btn-primary{background:var(--btn-primary-background, #007bff);color:var(--btn-primary-color, #fff)}.btn-primary:hover{background:var(--btn-primary-hover-background, #0056b3)}.btn-danger{background:var(--btn-danger-background, #dc3545);color:var(--btn-danger-color, #fff)}.btn-danger:hover{background:var(--btn-danger-hover-background, #c82333)}.pdf-actions-top-right{position:absolute;top:var(--actions-top, 15px);right:var(--actions-right, 15px);display:flex;gap:var(--actions-gap, 10px);z-index:1001}.action-icon-btn{width:40px;height:40px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--icon-btn-border-radius, 50%);font-size:var(--icon-btn-font-size, 16px);transition:background-color .2s ease}.open-new-tab-btn{background:var(--icon-btn-background, rgba(255, 255, 255, .9));color:var(--icon-btn-color, #007bff)}.open-new-tab-btn:hover{background:var(--icon-btn-hover-background, rgba(255, 255, 255, 1))}.pdf-title{color:var(--pdf-title-color, #333);font-family:var(--pdf-title-font-family, \"Mulish\");font-size:var(--pdf-title-font-size, 16px);font-weight:var(--pdf-title-font-weight, 600);margin:var(--pdf-title-margin, 0 20px 10px 20px);padding:var(--pdf-title-padding, 0);text-align:center}.pdf-iframe{width:var(--iframe-width, 100%);height:var(--iframe-height, calc(100% - 80px) );min-height:var(--iframe-min-height, 600px);border:var(--iframe-border, none);border-radius:var(--iframe-border-radius, 0);margin:0 20px 20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilePreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-file-preview', standalone: true, imports: [CommonModule], template: "<div class=\"file-preview-modal\" \r\n     *ngIf=\"field() && field()?.isVisible\"\r\n     [id]=\"field()?.fieldName + '_preview'\"\r\n     (click)=\"onBackdropClick($event)\"\r\n     (keydown.escape)=\"closePreview()\"\r\n     [ngStyle]=\"{\r\n       '--modal-background': field()?.previewStyle?.modalBackground || 'rgba(0, 0, 0, 0.9)',\r\n       '--modal-z-index': field()?.previewStyle?.zIndex || '10000',\r\n       '--modal-width': field()?.previewStyle?.width || '100%',\r\n       '--modal-height': field()?.previewStyle?.height || '100%'\r\n     }\">\r\n  \r\n  <!-- Image Preview -->\r\n  <div *ngIf=\"isImage()\" \r\n       class=\"preview-container image-container\"\r\n       [id]=\"field()?.fieldName + '_image_container'\"\r\n       [ngStyle]=\"{\r\n         '--image-container-background': field()?.previewStyle?.imageContainerBackground || 'transparent',\r\n         '--image-container-border-radius': field()?.previewStyle?.imageContainerBorderRadius || '8px',\r\n         '--image-container-padding': field()?.previewStyle?.imageContainerPadding || '20px',\r\n         '--image-container-margin': field()?.previewStyle?.imageContainerMargin || '0'\r\n       }\">\r\n    \r\n    <button class=\"close-btn\" \r\n            type=\"button\"\r\n            [id]=\"field()?.fieldName + '_close_btn'\"\r\n            (click)=\"closePreview()\" \r\n            [title]=\"field()?.previewStyle?.closeBtnTitle || 'Close'\"\r\n            [ngStyle]=\"{\r\n              '--close-btn-background': field()?.previewStyle?.closeBtnBackground || 'rgba(255, 255, 255, 0.9)',\r\n              '--close-btn-color': field()?.previewStyle?.closeBtnColor || '#000',\r\n              '--close-btn-border-radius': field()?.previewStyle?.closeBtnBorderRadius || '50%',\r\n              '--close-btn-font-size': field()?.previewStyle?.closeBtnFontSize || '20px',\r\n              '--close-btn-font-weight': field()?.previewStyle?.closeBtnFontWeight || 'bold',\r\n              '--close-btn-hover-background': field()?.previewStyle?.closeBtnHoverBackground || 'rgba(255, 255, 255, 1)'\r\n            }\">&times;</button>\r\n    \r\n    <h3 class=\"file-title\"\r\n        [ngStyle]=\"{\r\n          '--title-color': field()?.previewStyle?.titleColor || '#fff',\r\n          '--title-font-family': field()?.previewStyle?.titleFontFamily || 'Mulish',\r\n          '--title-font-size': field()?.previewStyle?.titleFontSize || '18px',\r\n          '--title-font-weight': field()?.previewStyle?.titleFontWeight || '600',\r\n          '--title-margin': field()?.previewStyle?.titleMargin || '0 0 10px 0',\r\n          '--title-padding': field()?.previewStyle?.titlePadding || '0 10px'\r\n        }\">{{ file()?.name }}</h3>\r\n    \r\n    <img [src]=\"fileDataUrl\" \r\n         [alt]=\"file()?.name\" \r\n         [id]=\"field()?.fieldName + '_preview_image'\"\r\n         class=\"preview-image\"\r\n         [ngStyle]=\"{\r\n           '--image-max-width': field()?.previewStyle?.imageMaxWidth || '100%',\r\n           '--image-max-height': field()?.previewStyle?.imageMaxHeight || '80vh',\r\n           '--image-border-radius': field()?.previewStyle?.imageBorderRadius || '8px',\r\n           '--image-box-shadow': field()?.previewStyle?.imageBoxShadow || '0 4px 20px rgba(0,0,0,0.5)',\r\n           '--image-object-fit': field()?.previewStyle?.imageObjectFit || 'contain'\r\n         }\" />\r\n  </div>\r\n\r\n  <!-- PDF Preview -->\r\n  <div *ngIf=\"isPdf()\" \r\n       class=\"preview-container pdf-container\"\r\n       [id]=\"field()?.fieldName + '_pdf_container'\"\r\n       [ngStyle]=\"{\r\n         '--pdf-container-background': field()?.previewStyle?.pdfContainerBackground || '#fff',\r\n         '--pdf-container-border-radius': field()?.previewStyle?.pdfContainerBorderRadius || '8px',\r\n         '--pdf-container-width': field()?.previewStyle?.pdfContainerWidth || '95vw',\r\n         '--pdf-container-height': field()?.previewStyle?.pdfContainerHeight || '95vh'\r\n       }\">\r\n    \r\n    <!-- Top-right action buttons -->\r\n    <div class=\"pdf-actions-top-right\"\r\n         [ngStyle]=\"{\r\n           '--actions-top': field()?.previewStyle?.actionsTop || '15px',\r\n           '--actions-right': field()?.previewStyle?.actionsRight || '15px',\r\n           '--actions-gap': field()?.previewStyle?.actionsGap || '10px'\r\n         }\">\r\n      \r\n      <button (click)=\"closePreview()\" \r\n              type=\"button\"\r\n              class=\"action-icon-btn close-btn\"\r\n              [id]=\"field()?.fieldName + '_close_pdf'\"\r\n              [title]=\"field()?.previewStyle?.closeBtnTitle || 'Close'\"\r\n              [ngStyle]=\"{\r\n                '--close-btn-background': field()?.previewStyle?.closeBtnBackground || 'rgba(255, 255, 255, 0.9)',\r\n                '--close-btn-color': field()?.previewStyle?.closeBtnColor || '#000',\r\n                '--close-btn-border-radius': field()?.previewStyle?.closeBtnBorderRadius || '50%',\r\n                '--close-btn-font-size': field()?.previewStyle?.closeBtnFontSize || '20px',\r\n                '--close-btn-font-weight': field()?.previewStyle?.closeBtnFontWeight || 'bold',\r\n                '--close-btn-hover-background': field()?.previewStyle?.closeBtnHoverBackground || 'rgba(255, 255, 255, 1)'\r\n              }\">&times;</button>\r\n    </div>\r\n    \r\n    <!-- File title -->\r\n    <h3 class=\"file-title pdf-title\"\r\n        [ngStyle]=\"{\r\n          '--pdf-title-color': field()?.previewStyle?.pdfTitleColor || '#333',\r\n          '--pdf-title-font-family': field()?.previewStyle?.pdfTitleFontFamily || 'Mulish',\r\n          '--pdf-title-font-size': field()?.previewStyle?.pdfTitleFontSize || '16px',\r\n          '--pdf-title-font-weight': field()?.previewStyle?.pdfTitleFontWeight || '600',\r\n          '--pdf-title-margin': field()?.previewStyle?.pdfTitleMargin || '0px 20px 10px 20px',\r\n          '--pdf-title-padding': field()?.previewStyle?.pdfTitlePadding || '0'\r\n        }\">{{ file()?.name }}</h3>\r\n    \r\n    <iframe [src]=\"safeFileUrl\" \r\n            [title]=\"file()?.name\" \r\n            [id]=\"field()?.fieldName + '_pdf_iframe'\"\r\n            class=\"pdf-iframe\"\r\n            [ngStyle]=\"{\r\n              '--iframe-border': field()?.previewStyle?.iframeBorder || 'none',\r\n              '--iframe-border-radius': field()?.previewStyle?.iframeBorderRadius || '0',\r\n              '--iframe-width': field()?.previewStyle?.iframeWidth || '100%',\r\n              '--iframe-height': field()?.previewStyle?.iframeHeight || 'calc(100% - 80px)',\r\n              '--iframe-min-height': field()?.previewStyle?.iframeMinHeight || '600px'\r\n            }\"></iframe>\r\n  </div>\r\n\r\n  <!-- Text Preview -->\r\n  <div *ngIf=\"isText()\" \r\n       class=\"preview-container text-container\"\r\n       [id]=\"field()?.fieldName + '_text_container'\"\r\n       [ngStyle]=\"{\r\n         '--text-container-background': field()?.previewStyle?.textContainerBackground || '#fff',\r\n         '--text-container-border-radius': field()?.previewStyle?.textContainerBorderRadius || '8px',\r\n         '--text-container-width': field()?.previewStyle?.textContainerWidth || '95vw',\r\n         '--text-container-height': field()?.previewStyle?.textContainerHeight || '95vh'\r\n       }\">\r\n    \r\n    <div class=\"text-header\"\r\n         [id]=\"field()?.fieldName + '_text_header'\"\r\n         [ngStyle]=\"{\r\n           '--text-header-background': field()?.previewStyle?.textHeaderBackground || '#f8f9fa',\r\n           '--text-header-border-color': field()?.previewStyle?.textHeaderBorderColor || '#dee2e6',\r\n           '--text-header-padding': field()?.previewStyle?.textHeaderPadding || '15px 20px'\r\n         }\">\r\n      \r\n      <h3 class=\"file-title\"\r\n          [ngStyle]=\"{\r\n            '--text-title-color': field()?.previewStyle?.textTitleColor || '#333',\r\n            '--text-title-font-family': field()?.previewStyle?.textTitleFontFamily || 'Mulish',\r\n            '--text-title-font-size': field()?.previewStyle?.textTitleFontSize || '16px',\r\n            '--text-title-font-weight': field()?.previewStyle?.textTitleFontWeight || '600',\r\n            '--text-title-margin': field()?.previewStyle?.textTitleMargin || '0'\r\n          }\">{{ file()?.name }}</h3>\r\n      \r\n      <button (click)=\"closePreview()\" \r\n              type=\"button\"\r\n              class=\"btn btn-danger\"\r\n              [id]=\"field()?.fieldName + '_close_text'\"\r\n              [ngStyle]=\"{\r\n                '--btn-danger-background': field()?.previewStyle?.btnDangerBackground || '#dc3545',\r\n                '--btn-danger-color': field()?.previewStyle?.btnDangerColor || '#fff',\r\n                '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\r\n                '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\r\n                '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\r\n              }\">{{ field()?.previewStyle?.closeText || 'Close' }}</button>\r\n    </div>\r\n    \r\n    <pre class=\"text-content\"\r\n         [id]=\"field()?.fieldName + '_text_content'\"\r\n         [ngStyle]=\"{\r\n           '--text-content-background': field()?.previewStyle?.textContentBackground || '#fff',\r\n           '--text-content-color': field()?.previewStyle?.textContentColor || '#333',\r\n           '--text-content-font-family': field()?.previewStyle?.textContentFontFamily || 'Consolas, Monaco, Courier New, monospace',\r\n           '--text-content-font-size': field()?.previewStyle?.textContentFontSize || '14px',\r\n           '--text-content-line-height': field()?.previewStyle?.textContentLineHeight || '1.5',\r\n           '--text-content-padding': field()?.previewStyle?.textContentPadding || '20px',\r\n           '--text-content-margin': field()?.previewStyle?.textContentMargin || '0'\r\n         }\">{{ textContent }}</pre>\r\n  </div>\r\n\r\n  <!-- Unsupported File -->\r\n  <div *ngIf=\"isUnsupported()\" \r\n       class=\"preview-container unsupported-container\"\r\n       [id]=\"field()?.fieldName + '_unsupported_container'\"\r\n       [ngStyle]=\"{\r\n         '--unsupported-background': field()?.previewStyle?.unsupportedBackground || '#fff',\r\n         '--unsupported-border-radius': field()?.previewStyle?.unsupportedBorderRadius || '8px',\r\n         '--unsupported-padding': field()?.previewStyle?.unsupportedPadding || '40px',\r\n         '--unsupported-min-width': field()?.previewStyle?.unsupportedMinWidth || '300px'\r\n       }\">\r\n    \r\n    <div class=\"unsupported-content\">\r\n      <h3 [ngStyle]=\"{\r\n            '--unsupported-title-color': field()?.previewStyle?.unsupportedTitleColor || '#333',\r\n            '--unsupported-title-font-family': field()?.previewStyle?.unsupportedTitleFontFamily || 'Mulish',\r\n            '--unsupported-title-font-size': field()?.previewStyle?.unsupportedTitleFontSize || '18px',\r\n            '--unsupported-title-font-weight': field()?.previewStyle?.unsupportedTitleFontWeight || '600',\r\n            '--unsupported-title-margin': field()?.previewStyle?.unsupportedTitleMargin || '0 0 20px 0'\r\n          }\">{{ file()?.name }}</h3>\r\n      \r\n      <p [ngStyle]=\"{\r\n           '--unsupported-text-color': field()?.previewStyle?.unsupportedTextColor || '#666',\r\n           '--unsupported-text-font-size': field()?.previewStyle?.unsupportedTextFontSize || '14px',\r\n           '--unsupported-text-margin': field()?.previewStyle?.unsupportedTextMargin || '0 0 30px 0'\r\n         }\">{{ field()?.previewStyle?.unsupportedMessage || 'Preview not available for this file type' }}</p>\r\n      \r\n      <div class=\"unsupported-actions\"\r\n           [ngStyle]=\"{\r\n             '--actions-gap': field()?.previewStyle?.actionsGap || '15px',\r\n             '--actions-justify': field()?.previewStyle?.actionsJustify || 'center'\r\n           }\">\r\n        \r\n        <button (click)=\"downloadFile()\" \r\n                type=\"button\"\r\n                class=\"btn btn-primary\"\r\n                [id]=\"field()?.fieldName + '_download'\"\r\n                [ngStyle]=\"{\r\n                  '--btn-primary-background': field()?.previewStyle?.btnPrimaryBackground || '#007bff',\r\n                  '--btn-primary-color': field()?.previewStyle?.btnPrimaryColor || '#fff',\r\n                  '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\r\n                  '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\r\n                  '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\r\n                }\">{{ field()?.previewStyle?.downloadText || 'Download' }}</button>\r\n        \r\n        <button (click)=\"closePreview()\" \r\n                type=\"button\"\r\n                class=\"btn btn-secondary\"\r\n                [id]=\"field()?.fieldName + '_close_unsupported'\"\r\n                [ngStyle]=\"{\r\n                  '--btn-secondary-background': field()?.previewStyle?.btnSecondaryBackground || '#6c757d',\r\n                  '--btn-secondary-color': field()?.previewStyle?.btnSecondaryColor || '#fff',\r\n                  '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\r\n                  '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\r\n                  '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\r\n                }\">{{ field()?.previewStyle?.closeText || 'Close' }}</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".file-preview-modal{position:fixed;top:0;left:0;width:var(--modal-width, 100%);height:var(--modal-height, 100%);background:var(--modal-background, rgba(0, 0, 0, .9));z-index:var(--modal-z-index, 10000);display:flex;align-items:center;justify-content:center;overflow:auto}.preview-container{position:relative;max-width:90%;max-height:90%;display:flex;flex-direction:column;align-items:center;background:var(--image-container-background, transparent);border-radius:var(--image-container-border-radius, 8px);padding:var(--image-container-padding, 10px);margin:var(--image-container-margin, 0)}.close-btn{position:absolute;top:0;right:10px;width:40px!important;height:40px!important;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--close-btn-background, rgba(255, 255, 255, .9));color:var(--close-btn-color, #000);border-radius:var(--close-btn-border-radius, 50%);font-size:var(--close-btn-font-size, 20px);font-weight:var(--close-btn-font-weight, bold);z-index:1001;box-shadow:1px 0 4px 1px #c7c7c7}.close-btn:hover{background:var(--close-btn-hover-background, rgba(255, 255, 255, 1))}.file-title{color:var(--title-color, #000000);font-family:var(--title-font-family, \"Mulish\");font-size:var(--title-font-size, 18px);font-weight:var(--title-font-weight, 600);margin:var(--title-margin, 0 0 10px 0);padding:var(--title-padding, 0 10px);text-align:center;word-break:break-all}.preview-image{max-width:var(--image-max-width, 100%);max-height:var(--image-max-height, 80vh);object-fit:var(--image-object-fit, contain);border-radius:var(--image-border-radius, 4px);box-shadow:var(--image-box-shadow, 0 4px 20px rgba(0, 0, 0, .3))}.preview-content{width:100%;height:80vh;border:none;border-radius:var(--content-border-radius, 4px)}.text-content{background:var(--text-background, #fff);color:var(--text-color, #000);padding:var(--text-padding, 20px);border-radius:var(--text-border-radius, 4px);max-width:var(--text-max-width, 800px);max-height:var(--text-max-height, 70vh);overflow:auto;white-space:pre-wrap;font-family:var(--text-font-family, \"Courier New, monospace\")}.action-buttons{margin-top:20px;display:flex;gap:10px}.action-btn{padding:var(--btn-padding, 8px 16px);background:var(--btn-background, #007bff);color:var(--btn-color, #fff);border:none;border-radius:var(--btn-border-radius, 4px);cursor:pointer;font-size:var(--btn-font-size, 14px)}.action-btn:hover{background:var(--btn-hover-background, #0056b3)}.unsupported-content{text-align:center;color:var(--unsupported-color, #fff);padding:var(--unsupported-padding, 40px)}.pdf-iframe{width:var(--iframe-width, 100%);height:var(--iframe-height, 80vh);min-height:var(--iframe-min-height, 600px);border:var(--iframe-border, none);border-radius:var(--iframe-border-radius, 0)}.pdf-container{width:var(--pdf-container-width, 95vw);height:var(--pdf-container-height, 95vh);background:var(--pdf-container-background, #fff);border-radius:var(--pdf-container-border-radius, 8px);display:flex;flex-direction:column;overflow:hidden}.pdf-header{background:var(--pdf-header-background, #f8f9fa);border-bottom:1px solid var(--pdf-header-border-color, #dee2e6);padding:var(--pdf-header-padding, 15px 20px);flex-shrink:0}.pdf-actions{display:flex;gap:10px;margin-top:10px}.btn{padding:var(--btn-padding, 8px 16px);border:none;border-radius:var(--btn-border-radius, 4px);cursor:pointer;font-size:var(--btn-font-size, 14px);font-weight:var(--btn-font-weight, 400);text-decoration:none;display:inline-block}.btn-primary{background:var(--btn-primary-background, #007bff);color:var(--btn-primary-color, #fff)}.btn-primary:hover{background:var(--btn-primary-hover-background, #0056b3)}.btn-danger{background:var(--btn-danger-background, #dc3545);color:var(--btn-danger-color, #fff)}.btn-danger:hover{background:var(--btn-danger-hover-background, #c82333)}.pdf-actions-top-right{position:absolute;top:var(--actions-top, 15px);right:var(--actions-right, 15px);display:flex;gap:var(--actions-gap, 10px);z-index:1001}.action-icon-btn{width:40px;height:40px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--icon-btn-border-radius, 50%);font-size:var(--icon-btn-font-size, 16px);transition:background-color .2s ease}.open-new-tab-btn{background:var(--icon-btn-background, rgba(255, 255, 255, .9));color:var(--icon-btn-color, #007bff)}.open-new-tab-btn:hover{background:var(--icon-btn-hover-background, rgba(255, 255, 255, 1))}.pdf-title{color:var(--pdf-title-color, #333);font-family:var(--pdf-title-font-family, \"Mulish\");font-size:var(--pdf-title-font-size, 16px);font-weight:var(--pdf-title-font-weight, 600);margin:var(--pdf-title-margin, 0 20px 10px 20px);padding:var(--pdf-title-padding, 0);text-align:center}.pdf-iframe{width:var(--iframe-width, 100%);height:var(--iframe-height, calc(100% - 80px) );min-height:var(--iframe-min-height, 600px);border:var(--iframe-border, none);border-radius:var(--iframe-border-radius, 0);margin:0 20px 20px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { closed: [{
+                type: Output
+            }] } });
+
 class UploadComponent {
     masterService;
-    constructor(masterService) {
+    appRef;
+    injector;
+    documentUploaderField = input();
+    constructor(masterService, appRef, injector) {
         this.masterService = masterService;
+        this.appRef = appRef;
+        this.injector = injector;
     }
     field = input.required();
     reactiveFormControlobject = input();
     fileInput;
     filesChanged = new EventEmitter();
     fileRemoved = new EventEmitter();
+    filePreview = new EventEmitter();
+    filePreviewRef = null;
     // ControlValueAccessor properties
     uploadedFiles = [];
     value = null;
@@ -904,14 +1000,40 @@ class UploadComponent {
             this.fileInput.nativeElement.click();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UploadComponent, isStandalone: true, selector: "lib-upload", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChanged: "filesChanged", fileRemoved: "fileRemoved" }, providers: [
+    previewFile(file, index) {
+        this.filePreviewRef = createComponent(FilePreviewComponent, {
+            environmentInjector: this.injector
+        });
+        this.filePreviewRef.setInput('field', this.field());
+        this.filePreviewRef.setInput('file', file);
+        this.filePreviewRef.instance.closed.subscribe(() => {
+            this.closeFilePreview();
+        });
+        document.body.appendChild(this.filePreviewRef.location.nativeElement);
+        this.appRef.attachView(this.filePreviewRef.hostView);
+    }
+    closeFilePreview() {
+        if (this.filePreviewRef) {
+            const element = this.filePreviewRef.location.nativeElement;
+            if (element.parentNode) {
+                element.parentNode.removeChild(element);
+            }
+            this.appRef.detachView(this.filePreviewRef.hostView);
+            this.filePreviewRef.destroy();
+            this.filePreviewRef = null;
+        }
+    }
+    ngOnDestroy() {
+        this.closeFilePreview();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadComponent, deps: [{ token: MasterControlService }, { token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UploadComponent, isStandalone: true, selector: "lib-upload", inputs: { documentUploaderField: { classPropertyName: "documentUploaderField", publicName: "documentUploaderField", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChanged: "filesChanged", fileRemoved: "fileRemoved", filePreview: "filePreview" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: UploadComponent,
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<label class=\"field-lable upload-label\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field()?.label}}</label>\r\n  @if(reactiveFormControlobject()) {\r\n  <input\r\n    hidden\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [multiple]=\"field()?.configData?.multiple\"\r\n    [accept]=\"field()?.configData?.accept\"\r\n    #fileInput\r\n    (change)=\"onFileSelected($event)\"\r\n    (click)=\"fileInput.value = ''\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [disabled]=\"disabled\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n  }@else {\r\n  <input\r\n    hidden\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [multiple]=\"field()?.configData?.multiple\"\r\n    [accept]=\"field()?.configData?.accept\"\r\n    #fileInput\r\n    (change)=\"onFileSelected($event)\"\r\n    (click)=\"fileInput.value = ''\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [disabled]=\"disabled\"\r\n  />\r\n  }\r\n  <button\r\n    type=\"button\"\r\n    class=\"upload-btn\"\r\n    (click)=\"triggerFileInput()\"\r\n    [ngClass]=\"field()?.label ? 'lightbackground' : 'successBackground'\"\r\n    *ngIf=\"field() && field()?.isVisible\"\r\n    [disabled]=\"disabled\"\r\n     [ngStyle]=\"{\r\n'--upload-width': field()?.controlStyle?.width ,\r\n'--upload-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--upload-border-color': field()?.controlStyle?.borderColor ,\r\n'--upload-border-width': field()?.controlStyle?.borderWidth ,\r\n'--upload-border-style': field()?.controlStyle?.borderStyle ,\r\n'--upload-background-color': field()?.controlStyle?.background ,\r\n'--upload-focus-border-color': field()?.controlStyle?.focusBorderColor ,\r\n'--upload-focus-background-color': field()?.controlStyle?.focusBackground ,\r\n}\"\r\n  >\r\n    <ng-container *ngIf=\"field()?.label && !hasFiles(); else fileUploadedTemplate\">\r\n      <span class=\"upload-icon\">\r\n        <span\r\n          ><img\r\n            src=\"https://cdn.godigit.com/retail-life/Upload_documents.svg\"\r\n            alt=\"\"\r\n        /></span>\r\n        <span class=\"upload-text\" [ngStyle]=\"{\r\n'--upload-font-color': field()?.controlStyle?.color ,\r\n'--upload-font-size': field()?.controlStyle?.fontSize ,\r\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\r\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\r\n}\">{{ field()?.placeHolder }}</span>\r\n      </span>\r\n    </ng-container>\r\n    <ng-template #fileUploadedTemplate>\r\n      <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"uploaded-file d-flex gap-4\" style=\"transform: translate(0px, -3px);\">\r\n        <span class=\"mt-2 right-icon\" style=\" white-space: nowrap !important;\r\n    overflow: hidden !important;\r\n    text-overflow: ellipsis !important;\">\r\n          <span><img [src]=\"field()?.imageUrl || 'https://cdn.godigit.com/retail-life/Upload_documents.svg'\" alt=\"\"/></span>\r\n          <span [title]=\"file.name\">{{ file.name }}</span>\r\n        </span>\r\n        <div class=\"mt-2 left-icon\">\r\n          <span><img src=\"https://cdn.godigit.com/retail-life/visibility-oui.svg\" alt=\"\"/></span>\r\n          <span (click)=\"removeFile(i, $event)\" style=\"cursor: pointer;\">\r\n            <img src=\"https://cdn.godigit.com/retail-life/delete-oui.svg\" alt=\"\"/>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </button>\r\n  <div class=\"upload-info\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.subText\">{{field()?.configData?.subText}}</div>\r\n", styles: ["*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.upload-label{opacity:1}.upload-btn{width:100%!important;height:48px!important;padding:10px;border-radius:.5rem}.upload-btn{width:var(--upload-width , 100%)!important;border-radius:var(--upload-border-radius , 8px)!important}.lightbackground{border-color:#999;border-width:1px;border-style:dashed;background:#fff;color:#444;font-size:14px;font-weight:700}.lightbackground{border-color:var(--upload-border-color , #999)!important;border-width:var(--upload-border-width , 1px)!important;border-style:var(--upload-border-style , dashed)!important;background:var(--upload-background-color , #ffffff)!important}.successBackground{border-color:var(--upload-focus-border-color , #ddd)!important;background:var(--upload-focus-background-color , #fafafa)!important;color:var(--upload-focus-font-color , #444)!important}.successBackground{border:1px dashed #ddd;background:#fafafa;color:#444;display:flex;justify-content:space-between}.upload-icon{display:flex;justify-content:center;gap:7px}.upload-text{color:#444!important;font-weight:700!important;font-size:14px!important}.upload-text{color:var(--upload-font-color , #444)!important;font-size:var( --upload-font-size , 14px)!important;font-weight:var(--upload-font-weight , 700)!important}.right-icon{display:flex;gap:10px;margin-left:.5em}.left-icon{display:flex;gap:15px;margin-right:1em}.upload-info{font-size:10px;font-weight:500;font-family:Mulish!important;letter-spacing:0px;color:#444}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<label class=\"field-lable upload-label\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field()?.label}}</label>\r\n  @if(reactiveFormControlobject()) {\r\n  <input\r\n    hidden\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [multiple]=\"field()?.configData?.multiple\"\r\n    [accept]=\"field()?.configData?.accept\"\r\n    #fileInput\r\n    (change)=\"onFileSelected($event)\"\r\n    (click)=\"fileInput.value = ''\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [disabled]=\"disabled\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n  }@else {\r\n  <input\r\n    hidden\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [multiple]=\"field()?.configData?.multiple\"\r\n    [accept]=\"field()?.configData?.accept\"\r\n    #fileInput\r\n    (change)=\"onFileSelected($event)\"\r\n    (click)=\"fileInput.value = ''\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [disabled]=\"disabled\"\r\n  />\r\n  }\r\n  <button\r\n    type=\"button\"\r\n    class=\"upload-btn\"\r\n    (click)=\"triggerFileInput()\"\r\n    [ngClass]=\"field()?.label ? 'lightbackground' : 'successBackground'\"\r\n    *ngIf=\"field() && field()?.isVisible\"\r\n    [disabled]=\"disabled\"\r\n     [ngStyle]=\"{\r\n'--upload-width': field()?.controlStyle?.width ,\r\n'--upload-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--upload-border-color': field()?.controlStyle?.borderColor ,\r\n'--upload-border-width': field()?.controlStyle?.borderWidth ,\r\n'--upload-border-style': field()?.controlStyle?.borderStyle ,\r\n'--upload-background-color': field()?.controlStyle?.background ,\r\n'--upload-focus-border-color': field()?.controlStyle?.focusBorderColor ,\r\n'--upload-focus-background-color': field()?.controlStyle?.focusBackground ,\r\n}\"\r\n  >\r\n    <ng-container *ngIf=\"field()?.label && !hasFiles(); else fileUploadedTemplate\">\r\n      <span class=\"upload-icon\">\r\n        <span\r\n          ><img\r\n            src=\"https://cdn.godigit.com/retail-life/Upload_documents.svg\"\r\n            alt=\"\"\r\n        /></span>\r\n        <span class=\"upload-text\" [ngStyle]=\"{\r\n'--upload-font-color': field()?.controlStyle?.color ,\r\n'--upload-font-size': field()?.controlStyle?.fontSize ,\r\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\r\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\r\n}\">{{ field()?.placeHolder }}</span>\r\n      </span>\r\n    </ng-container>\r\n    <ng-template #fileUploadedTemplate>\r\n      <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"uploaded-file d-flex gap-4\" style=\"transform: translate(0px, -3px);\">\r\n        <span class=\"mt-2 right-icon\" style=\" white-space: nowrap !important;\r\n    overflow: hidden !important;\r\n    text-overflow: ellipsis !important;\">\r\n          <span><img [src]=\"field()?.imageUrl || 'https://cdn.godigit.com/retail-life/Upload_documents.svg'\" alt=\"\"/></span>\r\n          <span [title]=\"file.name\">{{ file.name }}</span>\r\n        </span>\r\n        <div class=\"mt-2 left-icon\">\r\n          <span (click)=\"previewFile(file, i);$event.stopPropagation()\"><img src=\"https://cdn.godigit.com/retail-life/visibility-oui.svg\" alt=\"\"/></span>\r\n          <span (click)=\"removeFile(i, $event);$event.stopPropagation()\" style=\"cursor: pointer;\">\r\n            <img src=\"https://cdn.godigit.com/retail-life/delete-oui.svg\" alt=\"\"/>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </button>\r\n  <div class=\"upload-info\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.subText\">{{field()?.configData?.subText}}</div>\r\n", styles: ["*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.upload-label{opacity:1}.upload-btn{width:100%!important;height:48px!important;padding:10px;border-radius:.5rem}.upload-btn{width:var(--upload-width , 100%)!important;border-radius:var(--upload-border-radius , 8px)!important}.lightbackground{border-color:#999;border-width:1px;border-style:dashed;background:#fff;color:#444;font-size:14px;font-weight:700}.lightbackground{border-color:var(--upload-border-color , #999)!important;border-width:var(--upload-border-width , 1px)!important;border-style:var(--upload-border-style , dashed)!important;background:var(--upload-background-color , #ffffff)!important}.successBackground{border-color:var(--upload-focus-border-color , #ddd)!important;background:var(--upload-focus-background-color , #fafafa)!important;color:var(--upload-focus-font-color , #444)!important}.successBackground{border:1px dashed #ddd;background:#fafafa;color:#444;display:flex;justify-content:space-between}.upload-icon{display:flex;justify-content:center;gap:7px}.upload-text{color:#444!important;font-weight:700!important;font-size:14px!important}.upload-text{color:var(--upload-font-color , #444)!important;font-size:var( --upload-font-size , 14px)!important;font-weight:var(--upload-font-weight , 700)!important}.right-icon{display:flex;gap:10px;margin-left:.5em}.left-icon{display:flex;gap:15px;margin-right:1em}.upload-info{font-size:10px;font-weight:500;font-family:Mulish!important;letter-spacing:0px;color:#444}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
@@ -925,14 +1047,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: UploadComponent,
                             multi: true
                         }
-                    ], template: "<label class=\"field-lable upload-label\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field()?.label}}</label>\r\n  @if(reactiveFormControlobject()) {\r\n  <input\r\n    hidden\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [multiple]=\"field()?.configData?.multiple\"\r\n    [accept]=\"field()?.configData?.accept\"\r\n    #fileInput\r\n    (change)=\"onFileSelected($event)\"\r\n    (click)=\"fileInput.value = ''\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [disabled]=\"disabled\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n  }@else {\r\n  <input\r\n    hidden\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [multiple]=\"field()?.configData?.multiple\"\r\n    [accept]=\"field()?.configData?.accept\"\r\n    #fileInput\r\n    (change)=\"onFileSelected($event)\"\r\n    (click)=\"fileInput.value = ''\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [disabled]=\"disabled\"\r\n  />\r\n  }\r\n  <button\r\n    type=\"button\"\r\n    class=\"upload-btn\"\r\n    (click)=\"triggerFileInput()\"\r\n    [ngClass]=\"field()?.label ? 'lightbackground' : 'successBackground'\"\r\n    *ngIf=\"field() && field()?.isVisible\"\r\n    [disabled]=\"disabled\"\r\n     [ngStyle]=\"{\r\n'--upload-width': field()?.controlStyle?.width ,\r\n'--upload-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--upload-border-color': field()?.controlStyle?.borderColor ,\r\n'--upload-border-width': field()?.controlStyle?.borderWidth ,\r\n'--upload-border-style': field()?.controlStyle?.borderStyle ,\r\n'--upload-background-color': field()?.controlStyle?.background ,\r\n'--upload-focus-border-color': field()?.controlStyle?.focusBorderColor ,\r\n'--upload-focus-background-color': field()?.controlStyle?.focusBackground ,\r\n}\"\r\n  >\r\n    <ng-container *ngIf=\"field()?.label && !hasFiles(); else fileUploadedTemplate\">\r\n      <span class=\"upload-icon\">\r\n        <span\r\n          ><img\r\n            src=\"https://cdn.godigit.com/retail-life/Upload_documents.svg\"\r\n            alt=\"\"\r\n        /></span>\r\n        <span class=\"upload-text\" [ngStyle]=\"{\r\n'--upload-font-color': field()?.controlStyle?.color ,\r\n'--upload-font-size': field()?.controlStyle?.fontSize ,\r\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\r\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\r\n}\">{{ field()?.placeHolder }}</span>\r\n      </span>\r\n    </ng-container>\r\n    <ng-template #fileUploadedTemplate>\r\n      <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"uploaded-file d-flex gap-4\" style=\"transform: translate(0px, -3px);\">\r\n        <span class=\"mt-2 right-icon\" style=\" white-space: nowrap !important;\r\n    overflow: hidden !important;\r\n    text-overflow: ellipsis !important;\">\r\n          <span><img [src]=\"field()?.imageUrl || 'https://cdn.godigit.com/retail-life/Upload_documents.svg'\" alt=\"\"/></span>\r\n          <span [title]=\"file.name\">{{ file.name }}</span>\r\n        </span>\r\n        <div class=\"mt-2 left-icon\">\r\n          <span><img src=\"https://cdn.godigit.com/retail-life/visibility-oui.svg\" alt=\"\"/></span>\r\n          <span (click)=\"removeFile(i, $event)\" style=\"cursor: pointer;\">\r\n            <img src=\"https://cdn.godigit.com/retail-life/delete-oui.svg\" alt=\"\"/>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </button>\r\n  <div class=\"upload-info\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.subText\">{{field()?.configData?.subText}}</div>\r\n", styles: ["*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.upload-label{opacity:1}.upload-btn{width:100%!important;height:48px!important;padding:10px;border-radius:.5rem}.upload-btn{width:var(--upload-width , 100%)!important;border-radius:var(--upload-border-radius , 8px)!important}.lightbackground{border-color:#999;border-width:1px;border-style:dashed;background:#fff;color:#444;font-size:14px;font-weight:700}.lightbackground{border-color:var(--upload-border-color , #999)!important;border-width:var(--upload-border-width , 1px)!important;border-style:var(--upload-border-style , dashed)!important;background:var(--upload-background-color , #ffffff)!important}.successBackground{border-color:var(--upload-focus-border-color , #ddd)!important;background:var(--upload-focus-background-color , #fafafa)!important;color:var(--upload-focus-font-color , #444)!important}.successBackground{border:1px dashed #ddd;background:#fafafa;color:#444;display:flex;justify-content:space-between}.upload-icon{display:flex;justify-content:center;gap:7px}.upload-text{color:#444!important;font-weight:700!important;font-size:14px!important}.upload-text{color:var(--upload-font-color , #444)!important;font-size:var( --upload-font-size , 14px)!important;font-weight:var(--upload-font-weight , 700)!important}.right-icon{display:flex;gap:10px;margin-left:.5em}.left-icon{display:flex;gap:15px;margin-right:1em}.upload-info{font-size:10px;font-weight:500;font-family:Mulish!important;letter-spacing:0px;color:#444}\n"] }]
-        }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { fileInput: [{
+                    ], template: "<label class=\"field-lable upload-label\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field()?.label}}</label>\r\n  @if(reactiveFormControlobject()) {\r\n  <input\r\n    hidden\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [multiple]=\"field()?.configData?.multiple\"\r\n    [accept]=\"field()?.configData?.accept\"\r\n    #fileInput\r\n    (change)=\"onFileSelected($event)\"\r\n    (click)=\"fileInput.value = ''\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [disabled]=\"disabled\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n  }@else {\r\n  <input\r\n    hidden\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [multiple]=\"field()?.configData?.multiple\"\r\n    [accept]=\"field()?.configData?.accept\"\r\n    #fileInput\r\n    (change)=\"onFileSelected($event)\"\r\n    (click)=\"fileInput.value = ''\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [disabled]=\"disabled\"\r\n  />\r\n  }\r\n  <button\r\n    type=\"button\"\r\n    class=\"upload-btn\"\r\n    (click)=\"triggerFileInput()\"\r\n    [ngClass]=\"field()?.label ? 'lightbackground' : 'successBackground'\"\r\n    *ngIf=\"field() && field()?.isVisible\"\r\n    [disabled]=\"disabled\"\r\n     [ngStyle]=\"{\r\n'--upload-width': field()?.controlStyle?.width ,\r\n'--upload-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--upload-border-color': field()?.controlStyle?.borderColor ,\r\n'--upload-border-width': field()?.controlStyle?.borderWidth ,\r\n'--upload-border-style': field()?.controlStyle?.borderStyle ,\r\n'--upload-background-color': field()?.controlStyle?.background ,\r\n'--upload-focus-border-color': field()?.controlStyle?.focusBorderColor ,\r\n'--upload-focus-background-color': field()?.controlStyle?.focusBackground ,\r\n}\"\r\n  >\r\n    <ng-container *ngIf=\"field()?.label && !hasFiles(); else fileUploadedTemplate\">\r\n      <span class=\"upload-icon\">\r\n        <span\r\n          ><img\r\n            src=\"https://cdn.godigit.com/retail-life/Upload_documents.svg\"\r\n            alt=\"\"\r\n        /></span>\r\n        <span class=\"upload-text\" [ngStyle]=\"{\r\n'--upload-font-color': field()?.controlStyle?.color ,\r\n'--upload-font-size': field()?.controlStyle?.fontSize ,\r\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\r\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\r\n}\">{{ field()?.placeHolder }}</span>\r\n      </span>\r\n    </ng-container>\r\n    <ng-template #fileUploadedTemplate>\r\n      <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"uploaded-file d-flex gap-4\" style=\"transform: translate(0px, -3px);\">\r\n        <span class=\"mt-2 right-icon\" style=\" white-space: nowrap !important;\r\n    overflow: hidden !important;\r\n    text-overflow: ellipsis !important;\">\r\n          <span><img [src]=\"field()?.imageUrl || 'https://cdn.godigit.com/retail-life/Upload_documents.svg'\" alt=\"\"/></span>\r\n          <span [title]=\"file.name\">{{ file.name }}</span>\r\n        </span>\r\n        <div class=\"mt-2 left-icon\">\r\n          <span (click)=\"previewFile(file, i);$event.stopPropagation()\"><img src=\"https://cdn.godigit.com/retail-life/visibility-oui.svg\" alt=\"\"/></span>\r\n          <span (click)=\"removeFile(i, $event);$event.stopPropagation()\" style=\"cursor: pointer;\">\r\n            <img src=\"https://cdn.godigit.com/retail-life/delete-oui.svg\" alt=\"\"/>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </button>\r\n  <div class=\"upload-info\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.subText\">{{field()?.configData?.subText}}</div>\r\n", styles: ["*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.upload-label{opacity:1}.upload-btn{width:100%!important;height:48px!important;padding:10px;border-radius:.5rem}.upload-btn{width:var(--upload-width , 100%)!important;border-radius:var(--upload-border-radius , 8px)!important}.lightbackground{border-color:#999;border-width:1px;border-style:dashed;background:#fff;color:#444;font-size:14px;font-weight:700}.lightbackground{border-color:var(--upload-border-color , #999)!important;border-width:var(--upload-border-width , 1px)!important;border-style:var(--upload-border-style , dashed)!important;background:var(--upload-background-color , #ffffff)!important}.successBackground{border-color:var(--upload-focus-border-color , #ddd)!important;background:var(--upload-focus-background-color , #fafafa)!important;color:var(--upload-focus-font-color , #444)!important}.successBackground{border:1px dashed #ddd;background:#fafafa;color:#444;display:flex;justify-content:space-between}.upload-icon{display:flex;justify-content:center;gap:7px}.upload-text{color:#444!important;font-weight:700!important;font-size:14px!important}.upload-text{color:var(--upload-font-color , #444)!important;font-size:var( --upload-font-size , 14px)!important;font-weight:var(--upload-font-weight , 700)!important}.right-icon{display:flex;gap:10px;margin-left:.5em}.left-icon{display:flex;gap:15px;margin-right:1em}.upload-info{font-size:10px;font-weight:500;font-family:Mulish!important;letter-spacing:0px;color:#444}\n"] }]
+        }], ctorParameters: () => [{ type: MasterControlService }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
             }], filesChanged: [{
                 type: Output
             }], fileRemoved: [{
                 type: Output
+            }], filePreview: [{
+                type: Output
             }] } });
 
 const MY_DATE_FORMAT = {
@@ -1315,6 +1439,7 @@ class AutocompleteComponent {
     optionSelected = new EventEmitter();
     ngOnInit() {
         this.filteredOptions = this.field().options || [];
+        console.log(this.filteredOptions);
     }
     onChange = () => { };
     onTouched = () => { };
@@ -1421,7 +1546,7 @@ class AutocompleteComponent {
                 useExisting: AutocompleteComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "  <label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\r\n  <mat-form-field class=\"w-100 show-arrow\" appearance=\"outline\" *ngIf=\"field() && field()?.isVisible\"  [ngStyle]=\"{\r\n  '--custom-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n  '--custom-bg-color': field()?.controlStyle?.background ,\r\n  '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n  '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n  '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n  '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n  '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n  '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n  '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n  }\">\r\n   @if(reactiveFormControlobject()) {\r\n     <input\r\n      matInput\r\n      type=\"text\"\r\n      [name]=\"field()?.fieldName\"\r\n      [id]=\"field()?.fieldName\"\r\n      [matAutocomplete]=\"auto\"\r\n      (blur)=\"onBlur()\"\r\n      [disabled]=\"field()?.isDisable\"\r\n      [required]=\"field()?.validators?.isRequired\"\r\n      [placeholder]=\"field()?.placeHolder\"\r\n      [formControl]=\"reactiveFormControlobject()\"\r\n     />\r\n   }@else {\r\n     <input\r\n      matInput\r\n      type=\"text\"\r\n      [name]=\"field()?.fieldName\"\r\n      [id]=\"field()?.fieldName\"\r\n      [matAutocomplete]=\"auto\"\r\n      [ngModel]=\"inputValue\"\r\n      (ngModelChange)=\"onInputChange($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [disabled]=\"field()?.isDisable\"\r\n      [required]=\"field()?.validators?.isRequired\"\r\n      [placeholder]=\"field()?.placeHolder\"\r\n     />\r\n   }\r\n   <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"displayFn\" (optionSelected)=\"onOptionSelected($event.option.value)\">\r\n  <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\r\n    {{ option.label }}\r\n  </mat-option>\r\n</mat-autocomplete>\r\n    <mat-error>\r\n    {{ field().validators.requiredMessage }}\r\n  </mat-error>\r\n  </mat-form-field>\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}.\r\n  </div>\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{ field()?.validators?.patternMessage }}.\r\n  </div>\r\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}.custom-dropdown-arrow{color:#666;font-size:18px;cursor:pointer;margin-right:4px;padding:0!important;margin-top:12px!important}.show-arrow{background-image:url(https://d2h44aw7l5xdvz.cloudfront.net/digitPlusAssets/Dropdown_arrow.svg)!important;background-position:calc(100% - 12px) calc(1em - 4px),calc(100% - 15px) calc(1em + 8px),calc(100% - 2.5em) .5em;background-size:10px 10px,5px 5px,1px 1.5em;background-repeat:no-repeat}@media screen and (max-width: 768px){::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{font-size:14px!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], ngImport: i0, template: "  <label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\r\n  <mat-form-field class=\"w-100 show-arrow\" appearance=\"outline\" *ngIf=\"field() && field()?.isVisible\"  [ngStyle]=\"{\r\n  '--custom-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n  '--custom-bg-color': field()?.controlStyle?.background ,\r\n  '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n  '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n  '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n  '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n  '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n  '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n  '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n  }\">\r\n   @if(reactiveFormControlobject()) {\r\n     <input\r\n      matInput\r\n      type=\"text\"\r\n      [name]=\"field()?.fieldName\"\r\n      [id]=\"field()?.fieldName\"\r\n      [matAutocomplete]=\"auto\"\r\n      (blur)=\"onBlur()\"\r\n      [disabled]=\"field()?.isDisable\"\r\n      [required]=\"field()?.validators?.isRequired\"\r\n      [placeholder]=\"field()?.placeHolder\"\r\n      [formControl]=\"reactiveFormControlobject()\"\r\n     />\r\n   }@else {\r\n     <input\r\n      matInput\r\n      type=\"text\"\r\n      [name]=\"field()?.fieldName\"\r\n      [id]=\"field()?.fieldName\"\r\n      [matAutocomplete]=\"auto\"\r\n      [ngModel]=\"inputValue\"\r\n      (ngModelChange)=\"onInputChange($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [disabled]=\"field()?.isDisable\"\r\n      [required]=\"field()?.validators?.isRequired\"\r\n      [placeholder]=\"field()?.placeHolder\"\r\n     />\r\n   }\r\n   <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"displayFn\" (optionSelected)=\"onOptionSelected($event.option.value)\">\r\n    <mat-option *ngFor=\"let option of (filteredOptions | async)\" [value]=\"option\">\r\n      {{ option.label }}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n    <mat-error>\r\n    {{ field().validators.requiredMessage }}\r\n  </mat-error>\r\n  </mat-form-field>\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}.\r\n  </div>\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{ field()?.validators?.patternMessage }}.\r\n  </div>\r\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}.custom-dropdown-arrow{color:#666;font-size:18px;cursor:pointer;margin-right:4px;padding:0!important;margin-top:12px!important}.show-arrow{background-image:url(https://d2h44aw7l5xdvz.cloudfront.net/digitPlusAssets/Dropdown_arrow.svg)!important;background-position:calc(100% - 12px) calc(1em - 4px),calc(100% - 15px) calc(1em + 8px),calc(100% - 2.5em) .5em;background-size:10px 10px,5px 5px,1px 1.5em;background-repeat:no-repeat}@media screen and (max-width: 768px){::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{font-size:14px!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -1439,7 +1564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: AutocompleteComponent,
                             multi: true
                         }
-                    ], template: "  <label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\r\n  <mat-form-field class=\"w-100 show-arrow\" appearance=\"outline\" *ngIf=\"field() && field()?.isVisible\"  [ngStyle]=\"{\r\n  '--custom-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n  '--custom-bg-color': field()?.controlStyle?.background ,\r\n  '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n  '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n  '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n  '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n  '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n  '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n  '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n  }\">\r\n   @if(reactiveFormControlobject()) {\r\n     <input\r\n      matInput\r\n      type=\"text\"\r\n      [name]=\"field()?.fieldName\"\r\n      [id]=\"field()?.fieldName\"\r\n      [matAutocomplete]=\"auto\"\r\n      (blur)=\"onBlur()\"\r\n      [disabled]=\"field()?.isDisable\"\r\n      [required]=\"field()?.validators?.isRequired\"\r\n      [placeholder]=\"field()?.placeHolder\"\r\n      [formControl]=\"reactiveFormControlobject()\"\r\n     />\r\n   }@else {\r\n     <input\r\n      matInput\r\n      type=\"text\"\r\n      [name]=\"field()?.fieldName\"\r\n      [id]=\"field()?.fieldName\"\r\n      [matAutocomplete]=\"auto\"\r\n      [ngModel]=\"inputValue\"\r\n      (ngModelChange)=\"onInputChange($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [disabled]=\"field()?.isDisable\"\r\n      [required]=\"field()?.validators?.isRequired\"\r\n      [placeholder]=\"field()?.placeHolder\"\r\n     />\r\n   }\r\n   <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"displayFn\" (optionSelected)=\"onOptionSelected($event.option.value)\">\r\n  <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\r\n    {{ option.label }}\r\n  </mat-option>\r\n</mat-autocomplete>\r\n    <mat-error>\r\n    {{ field().validators.requiredMessage }}\r\n  </mat-error>\r\n  </mat-form-field>\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}.\r\n  </div>\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{ field()?.validators?.patternMessage }}.\r\n  </div>\r\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}.custom-dropdown-arrow{color:#666;font-size:18px;cursor:pointer;margin-right:4px;padding:0!important;margin-top:12px!important}.show-arrow{background-image:url(https://d2h44aw7l5xdvz.cloudfront.net/digitPlusAssets/Dropdown_arrow.svg)!important;background-position:calc(100% - 12px) calc(1em - 4px),calc(100% - 15px) calc(1em + 8px),calc(100% - 2.5em) .5em;background-size:10px 10px,5px 5px,1px 1.5em;background-repeat:no-repeat}@media screen and (max-width: 768px){::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{font-size:14px!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"] }]
+                    ], template: "  <label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\r\n  <mat-form-field class=\"w-100 show-arrow\" appearance=\"outline\" *ngIf=\"field() && field()?.isVisible\"  [ngStyle]=\"{\r\n  '--custom-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n  '--custom-bg-color': field()?.controlStyle?.background ,\r\n  '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n  '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n  '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n  '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n  '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n  '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n  '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n  }\">\r\n   @if(reactiveFormControlobject()) {\r\n     <input\r\n      matInput\r\n      type=\"text\"\r\n      [name]=\"field()?.fieldName\"\r\n      [id]=\"field()?.fieldName\"\r\n      [matAutocomplete]=\"auto\"\r\n      (blur)=\"onBlur()\"\r\n      [disabled]=\"field()?.isDisable\"\r\n      [required]=\"field()?.validators?.isRequired\"\r\n      [placeholder]=\"field()?.placeHolder\"\r\n      [formControl]=\"reactiveFormControlobject()\"\r\n     />\r\n   }@else {\r\n     <input\r\n      matInput\r\n      type=\"text\"\r\n      [name]=\"field()?.fieldName\"\r\n      [id]=\"field()?.fieldName\"\r\n      [matAutocomplete]=\"auto\"\r\n      [ngModel]=\"inputValue\"\r\n      (ngModelChange)=\"onInputChange($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n      [disabled]=\"field()?.isDisable\"\r\n      [required]=\"field()?.validators?.isRequired\"\r\n      [placeholder]=\"field()?.placeHolder\"\r\n     />\r\n   }\r\n   <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"displayFn\" (optionSelected)=\"onOptionSelected($event.option.value)\">\r\n    <mat-option *ngFor=\"let option of (filteredOptions | async)\" [value]=\"option\">\r\n      {{ option.label }}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n    <mat-error>\r\n    {{ field().validators.requiredMessage }}\r\n  </mat-error>\r\n  </mat-form-field>\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}.\r\n  </div>\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{ field()?.validators?.patternMessage }}.\r\n  </div>\r\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}.custom-dropdown-arrow{color:#666;font-size:18px;cursor:pointer;margin-right:4px;padding:0!important;margin-top:12px!important}.show-arrow{background-image:url(https://d2h44aw7l5xdvz.cloudfront.net/digitPlusAssets/Dropdown_arrow.svg)!important;background-position:calc(100% - 12px) calc(1em - 4px),calc(100% - 15px) calc(1em + 8px),calc(100% - 2.5em) .5em;background-size:10px 10px,5px 5px,1px 1.5em;background-repeat:no-repeat}@media screen and (max-width: 768px){::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{font-size:14px!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
                 type: Output
             }], selectionChanged: [{
@@ -2785,11 +2910,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class LabelComponent {
     field = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: LabelComponent, isStandalone: true, selector: "lib-label", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div *ngIf=\"field()?.isVisible\">\r\n<span class=\"master-label\" [ngStyle]=\"{\r\n'--master-heading-font-color': field()?.controlStyle?.color,\r\n'--master-heading-font-size': field()?.controlStyle?.fontSize,\r\n'--master-heading-font-weight': field()?.controlStyle?.fontWeight\r\n}\">{{field()?.label}}</span>\r\n</div>\r\n", styles: ["*{font-family:mulish!important}.master-label{font-weight:400;font-size:14px;color:#000}.master-label{color:var(--master-heading-font-color, #000000)!important;font-size:var(--master-heading-font-size, 14px)!important;font-weight:var(--master-heading-font-weight, 400)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: LabelComponent, isStandalone: true, selector: "lib-label", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div>\r\n<span class=\"master-label\" [ngStyle]=\"{\r\n'--master-heading-font-color': field()?.controlStyle?.color,\r\n'--master-heading-font-size': field()?.controlStyle?.fontSize,\r\n'--master-heading-font-weight': field()?.controlStyle?.fontWeight\r\n}\">{{field()?.label}}</span>\r\n</div>", styles: ["*{font-family:mulish!important}.master-label{font-weight:400;font-size:14px;color:#000}.master-label{color:var(--master-heading-font-color, #000000)!important;font-size:var(--master-heading-font-size, 14px)!important;font-weight:var(--master-heading-font-weight, 400)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-label', standalone: true, imports: [CommonModule], template: "<div *ngIf=\"field()?.isVisible\">\r\n<span class=\"master-label\" [ngStyle]=\"{\r\n'--master-heading-font-color': field()?.controlStyle?.color,\r\n'--master-heading-font-size': field()?.controlStyle?.fontSize,\r\n'--master-heading-font-weight': field()?.controlStyle?.fontWeight\r\n}\">{{field()?.label}}</span>\r\n</div>\r\n", styles: ["*{font-family:mulish!important}.master-label{font-weight:400;font-size:14px;color:#000}.master-label{color:var(--master-heading-font-color, #000000)!important;font-size:var(--master-heading-font-size, 14px)!important;font-weight:var(--master-heading-font-weight, 400)!important}\n"] }]
+            args: [{ selector: 'lib-label', standalone: true, imports: [CommonModule], template: "<div>\r\n<span class=\"master-label\" [ngStyle]=\"{\r\n'--master-heading-font-color': field()?.controlStyle?.color,\r\n'--master-heading-font-size': field()?.controlStyle?.fontSize,\r\n'--master-heading-font-weight': field()?.controlStyle?.fontWeight\r\n}\">{{field()?.label}}</span>\r\n</div>", styles: ["*{font-family:mulish!important}.master-label{font-weight:400;font-size:14px;color:#000}.master-label{color:var(--master-heading-font-color, #000000)!important;font-size:var(--master-heading-font-size, 14px)!important;font-weight:var(--master-heading-font-weight, 400)!important}\n"] }]
         }] });
 
 class SubHeaderComponent {
@@ -3408,6 +3533,7 @@ class MedialQuestionsComponent {
         "isMasterControl": false,
         "controlType": "hrLine"
     };
+    previewFile = null;
     constructor(ngZone, masterService) {
         this.ngZone = ngZone;
         this.masterService = masterService;
@@ -5509,8 +5635,15 @@ class MedialQuestionsComponent {
         }
         this.removeSubQuestionValues();
     }
+    onDocumentFilePreview(event) {
+        console.log('Preview requested for:', event.file.name);
+        this.previewFile = event.file;
+    }
+    closeFilePreview() {
+        this.previewFile = null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MedialQuestionsComponent, deps: [{ token: i0.NgZone }, { token: MasterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MedialQuestionsComponent, isStandalone: true, selector: "lib-medial-questions", inputs: { medialQuestionResponse: { classPropertyName: "medialQuestionResponse", publicName: "medialQuestionResponse", isSignal: true, isRequired: false, transformFunction: null }, personUWOpenQuoteResponse: { classPropertyName: "personUWOpenQuoteResponse", publicName: "personUWOpenQuoteResponse", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "addressInput", first: true, predicate: ["addressInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<div *ngFor=\"let section of questionList\">\r\n    <div\r\n      *ngIf=\"\r\n        !checkIfValueIsEmpty(section['questions']) &&\r\n        section['showSection']\r\n      \"\r\n      class=\"card p-3 mb-4\"\r\n      id=\"personUwMedicalQuestions\"\r\n    >\r\n      <h6 class=\"page-title bold-label\">\r\n        {{ getTitleCase(section[\"sectionName\"]) }}\r\n      </h6>\r\n      <lib-hr-line [field]=\"horizontalLineObj\" />\r\n      <div *ngFor=\"let questions of section['questions']\">\r\n        <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\r\n          <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\r\n          <h3 [innerHTML]=\"questions['questionText']\"></h3>\r\n        </div> -->\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'FREE TEXT' &&\r\n            questions['cammundaQuestionCode'] !== 'QHT' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <!-- <label class=\"field-lable d-block\"\r\n            >{{ questions[\"questionText\"] }}\r\n            <span\r\n              *ngIf=\"\r\n                questions.optionalQuestion === 'N'\r\n              \"\r\n              style=\"color: #ee0000\"\r\n              >&#42;</span\r\n            >\r\n          </label> -->\r\n          <div class=\"col-12 px-0 my-1\">\r\n            <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (blur)=\"removeSubQuestionValues()\" />\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'HEIGHTINPUT' &&\r\n            questions['cammundaQuestionCode'] === 'QHTF' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <label class=\"card-topic d-block field-lable\"\r\n            >Height\r\n            <span\r\n              style=\"color: #ee0000\"\r\n              >&#42;</span\r\n            >\r\n          </label>\r\n          <div\r\n            class=\"col-auto px-0 my-0 py-0 heightinput\"\r\n\r\n          >\r\n            <div class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\r\n              <div class=\"col-7 py-0 heightInputs\">\r\n                <lib-textbox [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHT']['field']\"   />\r\n              </div>\r\n              <div class=\"col-5\">\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" />\r\n              </div>\r\n            </div>\r\n            <div\r\n              class=\"row\"\r\n              *ngIf=\"\r\n                personUwAnswers[\r\n                  'medicalQuestionsHeightUnit'\r\n                ] === 'FEET'\r\n              \"\r\n            >\r\n              <div class=\"col-4 py-0 my-1\">\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTF']['field']\" />\r\n              </div>\r\n              <div class=\"col-4 py-0 my-1\">\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTI']['field']\" />\r\n              </div>\r\n              <div\r\n                class=\"col-4 py-0 my-1\"\r\n              >\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"row mt-0 pt-0\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'MAP' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n\r\n\r\n          <div class=\"map-container\">\r\n            <div class=\"address-search-container mb-3\">\r\n\r\n    <div class=\"row mb-3\">\r\n      <div class=\"col-6\">\r\n        <label class=\"form-label card-topic\">Longitude</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control\"\r\n          [(ngModel)]=\"longitude\"\r\n          placeholder=\"Enter longitude\"\r\n          step=\"any\"\r\n          readonly\r\n        >\r\n      </div>\r\n      <div class=\"col-6\">\r\n        <label class=\"form-label card-topic\">Latitude</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control\"\r\n          [(ngModel)]=\"latitude\"\r\n          placeholder=\"Enter latitude\"\r\n          step=\"any\"\r\n          readonly\r\n        >\r\n      </div>\r\n    </div>\r\n\r\n      <input\r\n        #addressInput\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        placeholder=\"Search for address\"\r\n        (keyup)=\"onAddressInputKeyup($event)\"\r\n        (focus)=\"showDropdown = true\"\r\n        (blur)=\"onInputBlur()\"\r\n        autocomplete=\"off\"\r\n      >\r\n      <div\r\n    *ngIf=\"showDropdown && addressSuggestions.length > 0\"\r\n    class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\r\n    style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\"\r\n  >\r\n    <div\r\n      *ngFor=\"let suggestion of addressSuggestions; let i = index\"\r\n      class=\"dropdown-item p-2\"\r\n      style=\"cursor: pointer; border-bottom: 1px solid #eee;\"\r\n      (mousedown)=\"selectAddress(suggestion)\"\r\n      (mouseenter)=\"hoveredIndex = i\"\r\n      [class.bg-light]=\"hoveredIndex === i\"\r\n    >\r\n      <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\r\n      <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\r\n    </div>\r\n  </div>\r\n      <small class=\"text-muted\">Start typing to search for addresses</small>\r\n    </div>\r\n            <google-map [center]=\"center\" [zoom]=\"zoom\">\r\n              <map-marker [position]=\"currentCoordinates\"></map-marker>\r\n            </google-map>\r\n          </div>\r\n        </div>\r\n\r\n\r\n        <div\r\n          *ngIf=\"\r\n            (questions['questionType'] === 'RADIO BUTTON' ||\r\n              questions['questionType'] === 'ADDMORE') &&\r\n              questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'CHECKBOX' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"valueChangeForMultiselect(questions)\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DECLARATION' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DROPDOWN' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'CALENDAR' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\r\n        </div>\r\n\r\n        <!-- <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'HEIGHTINPUT' &&\r\n            questions['cammundaQuestionCode'] === 'QHTF' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n        </div> -->\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DOCUPLOAD' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-upload [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'PASSPORT_UPLOAD' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n        <!-- pending -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i4$4.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i4$4.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MedialQuestionsComponent, isStandalone: true, selector: "lib-medial-questions", inputs: { medialQuestionResponse: { classPropertyName: "medialQuestionResponse", publicName: "medialQuestionResponse", isSignal: true, isRequired: false, transformFunction: null }, personUWOpenQuoteResponse: { classPropertyName: "personUWOpenQuoteResponse", publicName: "personUWOpenQuoteResponse", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "addressInput", first: true, predicate: ["addressInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<div *ngFor=\"let section of questionList\">\r\n    <div\r\n      *ngIf=\"\r\n        !checkIfValueIsEmpty(section['questions']) &&\r\n        section['showSection']\r\n      \"\r\n      class=\"card p-3 mb-4\"\r\n      id=\"personUwMedicalQuestions\"\r\n    >\r\n      <h6 class=\"page-title bold-label\">\r\n        {{ getTitleCase(section[\"sectionName\"]) }}\r\n      </h6>\r\n      <lib-hr-line [field]=\"horizontalLineObj\" />\r\n      <div *ngFor=\"let questions of section['questions']\">\r\n        <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\r\n          <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\r\n          <h3 [innerHTML]=\"questions['questionText']\"></h3>\r\n        </div> -->\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'FREE TEXT' &&\r\n            questions['cammundaQuestionCode'] !== 'QHT' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <!-- <label class=\"field-lable d-block\"\r\n            >{{ questions[\"questionText\"] }}\r\n            <span\r\n              *ngIf=\"\r\n                questions.optionalQuestion === 'N'\r\n              \"\r\n              style=\"color: #ee0000\"\r\n              >&#42;</span\r\n            >\r\n          </label> -->\r\n          <div class=\"col-12 px-0 my-1\">\r\n            <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (blur)=\"removeSubQuestionValues()\" />\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'HEIGHTINPUT' &&\r\n            questions['cammundaQuestionCode'] === 'QHTF' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <label class=\"card-topic d-block field-lable\"\r\n            >Height\r\n            <span\r\n              style=\"color: #ee0000\"\r\n              >&#42;</span\r\n            >\r\n          </label>\r\n          <div\r\n            class=\"col-auto px-0 my-0 py-0 heightinput\"\r\n\r\n          >\r\n            <div class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\r\n              <div class=\"col-7 py-0 heightInputs\">\r\n                <lib-textbox [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHT']['field']\"   />\r\n              </div>\r\n              <div class=\"col-5\">\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" />\r\n              </div>\r\n            </div>\r\n            <div\r\n              class=\"row\"\r\n              *ngIf=\"\r\n                personUwAnswers[\r\n                  'medicalQuestionsHeightUnit'\r\n                ] === 'FEET'\r\n              \"\r\n            >\r\n              <div class=\"col-4 py-0 my-1\">\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTF']['field']\" />\r\n              </div>\r\n              <div class=\"col-4 py-0 my-1\">\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTI']['field']\" />\r\n              </div>\r\n              <div\r\n                class=\"col-4 py-0 my-1\"\r\n              >\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"row mt-0 pt-0\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'MAP' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n\r\n\r\n          <div class=\"map-container\">\r\n            <div class=\"address-search-container mb-3\">\r\n\r\n    <div class=\"row mb-3\">\r\n      <div class=\"col-6\">\r\n        <label class=\"form-label card-topic\">Longitude</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control\"\r\n          [(ngModel)]=\"longitude\"\r\n          placeholder=\"Enter longitude\"\r\n          step=\"any\"\r\n          readonly\r\n        >\r\n      </div>\r\n      <div class=\"col-6\">\r\n        <label class=\"form-label card-topic\">Latitude</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control\"\r\n          [(ngModel)]=\"latitude\"\r\n          placeholder=\"Enter latitude\"\r\n          step=\"any\"\r\n          readonly\r\n        >\r\n      </div>\r\n    </div>\r\n\r\n      <input\r\n        #addressInput\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        placeholder=\"Search for address\"\r\n        (keyup)=\"onAddressInputKeyup($event)\"\r\n        (focus)=\"showDropdown = true\"\r\n        (blur)=\"onInputBlur()\"\r\n        autocomplete=\"off\"\r\n      >\r\n      <div\r\n    *ngIf=\"showDropdown && addressSuggestions.length > 0\"\r\n    class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\r\n    style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\"\r\n  >\r\n    <div\r\n      *ngFor=\"let suggestion of addressSuggestions; let i = index\"\r\n      class=\"dropdown-item p-2\"\r\n      style=\"cursor: pointer; border-bottom: 1px solid #eee;\"\r\n      (mousedown)=\"selectAddress(suggestion)\"\r\n      (mouseenter)=\"hoveredIndex = i\"\r\n      [class.bg-light]=\"hoveredIndex === i\"\r\n    >\r\n      <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\r\n      <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\r\n    </div>\r\n  </div>\r\n      <small class=\"text-muted\">Start typing to search for addresses</small>\r\n    </div>\r\n            <google-map [center]=\"center\" [zoom]=\"zoom\">\r\n              <map-marker [position]=\"currentCoordinates\"></map-marker>\r\n            </google-map>\r\n          </div>\r\n        </div>\r\n\r\n\r\n        <div\r\n          *ngIf=\"\r\n            (questions['questionType'] === 'RADIO BUTTON' ||\r\n              questions['questionType'] === 'ADDMORE') &&\r\n              questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'CHECKBOX' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"valueChangeForMultiselect(questions)\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DECLARATION' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DROPDOWN' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'CALENDAR' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\r\n        </div>\r\n\r\n        <!-- <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'HEIGHTINPUT' &&\r\n            questions['cammundaQuestionCode'] === 'QHTF' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n        </div> -->\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DOCUPLOAD' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\" />\r\n          <lib-file-preview \r\n            *ngIf=\"previewFile\"\r\n            [field]=\"questions['field']\" \r\n            [file]=\"previewFile\" \r\n            (closed)=\"closeFilePreview()\">\r\n          </lib-file-preview>\r\n        </div>\r\n\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'PASSPORT_UPLOAD' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n        <!-- pending -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["documentUploaderField", "field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved", "filePreview"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i4$4.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i4$4.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: FilePreviewComponent, selector: "lib-file-preview", inputs: ["field", "file"], outputs: ["closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MedialQuestionsComponent, decorators: [{
             type: Component,
@@ -5526,8 +5659,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         UploadComponent,
                         MultipleSelectComponent,
                         GoogleMapsModule,
-                        HrLineComponent
-                    ], template: "\r\n<div *ngFor=\"let section of questionList\">\r\n    <div\r\n      *ngIf=\"\r\n        !checkIfValueIsEmpty(section['questions']) &&\r\n        section['showSection']\r\n      \"\r\n      class=\"card p-3 mb-4\"\r\n      id=\"personUwMedicalQuestions\"\r\n    >\r\n      <h6 class=\"page-title bold-label\">\r\n        {{ getTitleCase(section[\"sectionName\"]) }}\r\n      </h6>\r\n      <lib-hr-line [field]=\"horizontalLineObj\" />\r\n      <div *ngFor=\"let questions of section['questions']\">\r\n        <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\r\n          <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\r\n          <h3 [innerHTML]=\"questions['questionText']\"></h3>\r\n        </div> -->\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'FREE TEXT' &&\r\n            questions['cammundaQuestionCode'] !== 'QHT' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <!-- <label class=\"field-lable d-block\"\r\n            >{{ questions[\"questionText\"] }}\r\n            <span\r\n              *ngIf=\"\r\n                questions.optionalQuestion === 'N'\r\n              \"\r\n              style=\"color: #ee0000\"\r\n              >&#42;</span\r\n            >\r\n          </label> -->\r\n          <div class=\"col-12 px-0 my-1\">\r\n            <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (blur)=\"removeSubQuestionValues()\" />\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'HEIGHTINPUT' &&\r\n            questions['cammundaQuestionCode'] === 'QHTF' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <label class=\"card-topic d-block field-lable\"\r\n            >Height\r\n            <span\r\n              style=\"color: #ee0000\"\r\n              >&#42;</span\r\n            >\r\n          </label>\r\n          <div\r\n            class=\"col-auto px-0 my-0 py-0 heightinput\"\r\n\r\n          >\r\n            <div class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\r\n              <div class=\"col-7 py-0 heightInputs\">\r\n                <lib-textbox [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHT']['field']\"   />\r\n              </div>\r\n              <div class=\"col-5\">\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" />\r\n              </div>\r\n            </div>\r\n            <div\r\n              class=\"row\"\r\n              *ngIf=\"\r\n                personUwAnswers[\r\n                  'medicalQuestionsHeightUnit'\r\n                ] === 'FEET'\r\n              \"\r\n            >\r\n              <div class=\"col-4 py-0 my-1\">\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTF']['field']\" />\r\n              </div>\r\n              <div class=\"col-4 py-0 my-1\">\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTI']['field']\" />\r\n              </div>\r\n              <div\r\n                class=\"col-4 py-0 my-1\"\r\n              >\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"row mt-0 pt-0\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'MAP' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n\r\n\r\n          <div class=\"map-container\">\r\n            <div class=\"address-search-container mb-3\">\r\n\r\n    <div class=\"row mb-3\">\r\n      <div class=\"col-6\">\r\n        <label class=\"form-label card-topic\">Longitude</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control\"\r\n          [(ngModel)]=\"longitude\"\r\n          placeholder=\"Enter longitude\"\r\n          step=\"any\"\r\n          readonly\r\n        >\r\n      </div>\r\n      <div class=\"col-6\">\r\n        <label class=\"form-label card-topic\">Latitude</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control\"\r\n          [(ngModel)]=\"latitude\"\r\n          placeholder=\"Enter latitude\"\r\n          step=\"any\"\r\n          readonly\r\n        >\r\n      </div>\r\n    </div>\r\n\r\n      <input\r\n        #addressInput\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        placeholder=\"Search for address\"\r\n        (keyup)=\"onAddressInputKeyup($event)\"\r\n        (focus)=\"showDropdown = true\"\r\n        (blur)=\"onInputBlur()\"\r\n        autocomplete=\"off\"\r\n      >\r\n      <div\r\n    *ngIf=\"showDropdown && addressSuggestions.length > 0\"\r\n    class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\r\n    style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\"\r\n  >\r\n    <div\r\n      *ngFor=\"let suggestion of addressSuggestions; let i = index\"\r\n      class=\"dropdown-item p-2\"\r\n      style=\"cursor: pointer; border-bottom: 1px solid #eee;\"\r\n      (mousedown)=\"selectAddress(suggestion)\"\r\n      (mouseenter)=\"hoveredIndex = i\"\r\n      [class.bg-light]=\"hoveredIndex === i\"\r\n    >\r\n      <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\r\n      <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\r\n    </div>\r\n  </div>\r\n      <small class=\"text-muted\">Start typing to search for addresses</small>\r\n    </div>\r\n            <google-map [center]=\"center\" [zoom]=\"zoom\">\r\n              <map-marker [position]=\"currentCoordinates\"></map-marker>\r\n            </google-map>\r\n          </div>\r\n        </div>\r\n\r\n\r\n        <div\r\n          *ngIf=\"\r\n            (questions['questionType'] === 'RADIO BUTTON' ||\r\n              questions['questionType'] === 'ADDMORE') &&\r\n              questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'CHECKBOX' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"valueChangeForMultiselect(questions)\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DECLARATION' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DROPDOWN' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'CALENDAR' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\r\n        </div>\r\n\r\n        <!-- <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'HEIGHTINPUT' &&\r\n            questions['cammundaQuestionCode'] === 'QHTF' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n        </div> -->\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DOCUPLOAD' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-upload [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'PASSPORT_UPLOAD' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n        <!-- pending -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}\n"] }]
+                        HrLineComponent,
+                        FilePreviewComponent
+                    ], template: "\r\n<div *ngFor=\"let section of questionList\">\r\n    <div\r\n      *ngIf=\"\r\n        !checkIfValueIsEmpty(section['questions']) &&\r\n        section['showSection']\r\n      \"\r\n      class=\"card p-3 mb-4\"\r\n      id=\"personUwMedicalQuestions\"\r\n    >\r\n      <h6 class=\"page-title bold-label\">\r\n        {{ getTitleCase(section[\"sectionName\"]) }}\r\n      </h6>\r\n      <lib-hr-line [field]=\"horizontalLineObj\" />\r\n      <div *ngFor=\"let questions of section['questions']\">\r\n        <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\r\n          <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\r\n          <h3 [innerHTML]=\"questions['questionText']\"></h3>\r\n        </div> -->\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'FREE TEXT' &&\r\n            questions['cammundaQuestionCode'] !== 'QHT' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <!-- <label class=\"field-lable d-block\"\r\n            >{{ questions[\"questionText\"] }}\r\n            <span\r\n              *ngIf=\"\r\n                questions.optionalQuestion === 'N'\r\n              \"\r\n              style=\"color: #ee0000\"\r\n              >&#42;</span\r\n            >\r\n          </label> -->\r\n          <div class=\"col-12 px-0 my-1\">\r\n            <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (blur)=\"removeSubQuestionValues()\" />\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'HEIGHTINPUT' &&\r\n            questions['cammundaQuestionCode'] === 'QHTF' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <label class=\"card-topic d-block field-lable\"\r\n            >Height\r\n            <span\r\n              style=\"color: #ee0000\"\r\n              >&#42;</span\r\n            >\r\n          </label>\r\n          <div\r\n            class=\"col-auto px-0 my-0 py-0 heightinput\"\r\n\r\n          >\r\n            <div class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\r\n              <div class=\"col-7 py-0 heightInputs\">\r\n                <lib-textbox [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHT']['field']\"   />\r\n              </div>\r\n              <div class=\"col-5\">\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" />\r\n              </div>\r\n            </div>\r\n            <div\r\n              class=\"row\"\r\n              *ngIf=\"\r\n                personUwAnswers[\r\n                  'medicalQuestionsHeightUnit'\r\n                ] === 'FEET'\r\n              \"\r\n            >\r\n              <div class=\"col-4 py-0 my-1\">\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTF']['field']\" />\r\n              </div>\r\n              <div class=\"col-4 py-0 my-1\">\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTI']['field']\" />\r\n              </div>\r\n              <div\r\n                class=\"col-4 py-0 my-1\"\r\n              >\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"row mt-0 pt-0\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'MAP' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n\r\n\r\n          <div class=\"map-container\">\r\n            <div class=\"address-search-container mb-3\">\r\n\r\n    <div class=\"row mb-3\">\r\n      <div class=\"col-6\">\r\n        <label class=\"form-label card-topic\">Longitude</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control\"\r\n          [(ngModel)]=\"longitude\"\r\n          placeholder=\"Enter longitude\"\r\n          step=\"any\"\r\n          readonly\r\n        >\r\n      </div>\r\n      <div class=\"col-6\">\r\n        <label class=\"form-label card-topic\">Latitude</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control\"\r\n          [(ngModel)]=\"latitude\"\r\n          placeholder=\"Enter latitude\"\r\n          step=\"any\"\r\n          readonly\r\n        >\r\n      </div>\r\n    </div>\r\n\r\n      <input\r\n        #addressInput\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        placeholder=\"Search for address\"\r\n        (keyup)=\"onAddressInputKeyup($event)\"\r\n        (focus)=\"showDropdown = true\"\r\n        (blur)=\"onInputBlur()\"\r\n        autocomplete=\"off\"\r\n      >\r\n      <div\r\n    *ngIf=\"showDropdown && addressSuggestions.length > 0\"\r\n    class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\r\n    style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\"\r\n  >\r\n    <div\r\n      *ngFor=\"let suggestion of addressSuggestions; let i = index\"\r\n      class=\"dropdown-item p-2\"\r\n      style=\"cursor: pointer; border-bottom: 1px solid #eee;\"\r\n      (mousedown)=\"selectAddress(suggestion)\"\r\n      (mouseenter)=\"hoveredIndex = i\"\r\n      [class.bg-light]=\"hoveredIndex === i\"\r\n    >\r\n      <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\r\n      <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\r\n    </div>\r\n  </div>\r\n      <small class=\"text-muted\">Start typing to search for addresses</small>\r\n    </div>\r\n            <google-map [center]=\"center\" [zoom]=\"zoom\">\r\n              <map-marker [position]=\"currentCoordinates\"></map-marker>\r\n            </google-map>\r\n          </div>\r\n        </div>\r\n\r\n\r\n        <div\r\n          *ngIf=\"\r\n            (questions['questionType'] === 'RADIO BUTTON' ||\r\n              questions['questionType'] === 'ADDMORE') &&\r\n              questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'CHECKBOX' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"valueChangeForMultiselect(questions)\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DECLARATION' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DROPDOWN' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'CALENDAR' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\r\n        </div>\r\n\r\n        <!-- <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'HEIGHTINPUT' &&\r\n            questions['cammundaQuestionCode'] === 'QHTF' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n        </div> -->\r\n        <div\r\n          class=\"my-1\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DOCUPLOAD' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\" />\r\n          <lib-file-preview \r\n            *ngIf=\"previewFile\"\r\n            [field]=\"questions['field']\" \r\n            [file]=\"previewFile\" \r\n            (closed)=\"closeFilePreview()\">\r\n          </lib-file-preview>\r\n        </div>\r\n\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'PASSPORT_UPLOAD' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n        <!-- pending -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: MasterService }], propDecorators: { addressInput: [{
                 type: ViewChild,
                 args: ['addressInput']
@@ -5982,31 +6116,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: 'lib-footer-with-buttons', standalone: true, imports: [CommonModule], template: "\r\n<footer class=\"custom-footer\" \r\n[ngStyle]=\"{\r\n    'margin-left': configData.configData.margin,\r\n    'margin-right': configData.configData.margin\r\n  }\"\r\n>\r\n  <div class=\"container\">\r\n    <div class=\"footer-buttons d-flex justify-content-center gap-3 py-3\">\r\n      <button class=\"btn update-btn\" *ngFor=\"let button of configData.options\">{{button.label}}</button>\r\n    </div>\r\n  </div>\r\n</footer>\r\n", styles: [":host .custom-footer{background-color:#fff;border-radius:15px 15px 0 0;box-shadow:0 -4px 12px #0000001a;border-top:1px solid #e0e0e0;position:fixed;right:0;bottom:0;left:0;z-index:1030}.footer-buttons{display:flex;justify-content:center;gap:1rem}.footer-buttons:has(:nth-child(2)){justify-content:space-between}.footer-buttons:has(:nth-child(3)){justify-content:space-between}.update-btn{background:#fb0;color:#1a1a1a;border-radius:8px;font-weight:600;padding:8px 16px;transition:background .2s;cursor:pointer}.update-btn:hover{background:#fc0;cursor:pointer}\n"] }]
         }] });
 
-class MotorGlowPlanDetailsComponent {
-    field = input.required();
-    editPlanClick = new EventEmitter();
-    constructor() { }
-    onEditPlanClicked() {
-        this.editPlanClick.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MotorGlowPlanDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MotorGlowPlanDetailsComponent, isStandalone: true, selector: "lib-motor-glow-plan-details", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { editPlanClick: "editPlanClick" }, ngImport: i0, template: "<div class=\"yellow-background\" *ngIf=\"field().isVisible\">\r\n  <div class=\"row\" style=\"padding-bottom: 16px;\">\r\n    <div class=\"col-6\" style=\"padding-bottom: 8px;\">\r\n      <span class=\"label-font\">Sum Assured</span>\r\n    </div>\r\n    <div class=\"col-6 d-flex justify-content-end\" (click)=\"onEditPlanClicked()\">\r\n      <span class=\"label-font\">Edit plan <span> <img style=\"height: 12px; width: 12px; transform: translate(2px, -2px);\" src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/edit-icon.svg\" alt=\"edit icon\"> </span></span>\r\n    </div>\r\n    <div class=\"col-12\">\r\n      <span class=\"value-font\">{{field()?.configData?.sumAssuedValue ? field()?.configData?.sumAssuedValue : '25' }}</span>\r\n    </div>\r\n  </div>\r\n  <div class=\"row\" style=\"padding-bottom: 16px;\">\r\n    <div class=\"col-12\" style=\"padding-bottom: 8px;\"><span class=\"label-font\">Policy Term (PT)</span></div>\r\n    <div class=\"col-12 value-font\"><span>{{field()?.configData?.ptYears ? field()?.configData?.ptYears : '5' }} yrs <span class=\"year-label\">(Till {{field()?.configData?.ptValidTill ? field()?.configData?.ptValidTill : '2029' }})</span></span></div>\r\n\r\n  </div>\r\n  <div class=\"row\" style=\"padding-bottom: 16px;\">\r\n    <div class=\"col-12\" style=\"padding-bottom: 8px;\"><span class=\"label-font\">Premium</span></div>\r\n    <div class=\"col-12\"><span class=\"premium-color\">\u20B9 {{field()?.configData?.premiumAmount ? field()?.configData?.premiumAmount : '12,025' }}/ {{field()?.configData?.premiumFrequency ? field()?.configData?.premiumFrequency : 'year' }}</span></div>\r\n  </div>\r\n  <div class=\"row\">\r\n    <div class=\"col-12\"> <span class=\"eligibility-font\">Eligible for maximum Sum Assured of \u20B9{{field()?.configData?.maxSAValue ? field()?.configData?.maxSAValue : '25' }} Lakh.</span></div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".yellow-background{background-color:#fb03;padding:16px;border-radius:8px}.label-font{color:#444;font-family:Mulish!important;letter-spacing:0px;font-size:12px;font-weight:700;line-height:16px}.value-font{font-size:14px;font-weight:700;font-family:Mulish!important;letter-spacing:0px;color:#444}.eligibility-font{color:#444;font-size:12px;font-family:Mulish!important;letter-spacing:0px;font-weight:400;line-height:16px}.premium-color{color:#169f7d;font-family:Mulish!important;letter-spacing:0px;font-weight:700;line-height:20px;font-size:14px}.year-label{color:#8f8f8f;font-family:Mulish!important;letter-spacing:0px;font-weight:400;line-height:20px;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MotorGlowPlanDetailsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-motor-glow-plan-details', standalone: true, imports: [
-                        CommonModule
-                    ], template: "<div class=\"yellow-background\" *ngIf=\"field().isVisible\">\r\n  <div class=\"row\" style=\"padding-bottom: 16px;\">\r\n    <div class=\"col-6\" style=\"padding-bottom: 8px;\">\r\n      <span class=\"label-font\">Sum Assured</span>\r\n    </div>\r\n    <div class=\"col-6 d-flex justify-content-end\" (click)=\"onEditPlanClicked()\">\r\n      <span class=\"label-font\">Edit plan <span> <img style=\"height: 12px; width: 12px; transform: translate(2px, -2px);\" src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/edit-icon.svg\" alt=\"edit icon\"> </span></span>\r\n    </div>\r\n    <div class=\"col-12\">\r\n      <span class=\"value-font\">{{field()?.configData?.sumAssuedValue ? field()?.configData?.sumAssuedValue : '25' }}</span>\r\n    </div>\r\n  </div>\r\n  <div class=\"row\" style=\"padding-bottom: 16px;\">\r\n    <div class=\"col-12\" style=\"padding-bottom: 8px;\"><span class=\"label-font\">Policy Term (PT)</span></div>\r\n    <div class=\"col-12 value-font\"><span>{{field()?.configData?.ptYears ? field()?.configData?.ptYears : '5' }} yrs <span class=\"year-label\">(Till {{field()?.configData?.ptValidTill ? field()?.configData?.ptValidTill : '2029' }})</span></span></div>\r\n\r\n  </div>\r\n  <div class=\"row\" style=\"padding-bottom: 16px;\">\r\n    <div class=\"col-12\" style=\"padding-bottom: 8px;\"><span class=\"label-font\">Premium</span></div>\r\n    <div class=\"col-12\"><span class=\"premium-color\">\u20B9 {{field()?.configData?.premiumAmount ? field()?.configData?.premiumAmount : '12,025' }}/ {{field()?.configData?.premiumFrequency ? field()?.configData?.premiumFrequency : 'year' }}</span></div>\r\n  </div>\r\n  <div class=\"row\">\r\n    <div class=\"col-12\"> <span class=\"eligibility-font\">Eligible for maximum Sum Assured of \u20B9{{field()?.configData?.maxSAValue ? field()?.configData?.maxSAValue : '25' }} Lakh.</span></div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".yellow-background{background-color:#fb03;padding:16px;border-radius:8px}.label-font{color:#444;font-family:Mulish!important;letter-spacing:0px;font-size:12px;font-weight:700;line-height:16px}.value-font{font-size:14px;font-weight:700;font-family:Mulish!important;letter-spacing:0px;color:#444}.eligibility-font{color:#444;font-size:12px;font-family:Mulish!important;letter-spacing:0px;font-weight:400;line-height:16px}.premium-color{color:#169f7d;font-family:Mulish!important;letter-spacing:0px;font-weight:700;line-height:20px;font-size:14px}.year-label{color:#8f8f8f;font-family:Mulish!important;letter-spacing:0px;font-weight:400;line-height:20px;font-size:14px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { editPlanClick: [{
-                type: Output
-            }] } });
-
 class MasterControlComponent {
     field = input.required();
     formGroup = new FormGroup({});
     constructor() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MasterControlComponent, isStandalone: true, selector: "lib-master-control", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (field()?.controlType) {\r\n  @case ('top-header') {\r\n    <lib-top-header [field]=\"field()\" />\r\n  }\r\n  @case ('footer') {\r\n    <lib-footer [field]=\"field()\" />\r\n  }\r\n  @case('footer-buttons')\r\n  {\r\n    <lib-footer-with-buttons [field]=\"field()\"></lib-footer-with-buttons>\r\n  }\r\n  @case('text') {\r\n   <lib-textbox [field]=\"field()\"></lib-textbox>\r\n  }\r\n  @case('select') {\r\n    <lib-select [field]=\"field()\"/>\r\n  }\r\n\r\n  @case('radio') {\r\n    <lib-radio [field]=\"field()\" />\r\n  }\r\n\r\n  @case('toggle') {\r\n    <lib-toggle [field]=\"field()\" />\r\n  }\r\n\r\n  @case('file') {\r\n    <lib-upload [field]=\"field()\" />\r\n  }\r\n\r\n  @case('date') {\r\n    <lib-dob [field]=\"field()\" />\r\n  }\r\n\r\n  @case('mobileNumber') {\r\n    <lib-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case('info') {\r\n    <lib-info [field]=\"field()\" />\r\n  }\r\n\r\n  @case('checkbox') {\r\n    <lib-checkbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case('textarea') {\r\n    <lib-textarea [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('button') {\r\n    <lib-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('tab') {\r\n    <lib-tab [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('autocomplete') {\r\n    <lib-autocomplete [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('multipleSelect') {\r\n    <lib-multiple-select [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithSelect') {\r\n    <lib-select-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('otpTextbox') {\r\n    <lib-otp-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('amountTextbox') {\r\n    <lib-amount-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('suffixTextbox') {\r\n    <lib-suffix-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('otpMobNumber') {\r\n    <lib-otp-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('tagMobNumber') {\r\n    <lib-tag-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('dateWithAge') {\r\n     <lib-age-date [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('additionButton') {\r\n    <lib-addition-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('infoTextbox') {\r\n    <lib-info-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithImage') {\r\n    <lib-textbox-with-image [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('emailWithDomain') {\r\n    <lib-email-with-domain [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('imageUpload') {\r\n     <lib-image-upload [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('downloadDocument') {\r\n     <lib-download-document [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('addDocument') {\r\n    <lib-add-document [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('hyperlink') {\r\n    <lib-hyperlink [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithUnderscore') {\r\n    <lib-textbox-with-underscore [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('underscoreMobNumber') {\r\n    <lib-underscore-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('downloadIconButton') {\r\n    <lib-icon-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('image') {\r\n    <lib-image [field]=\"field()\" />\r\n  }\r\n  @case ('stepper') {\r\n    <lib-stepper [field]=\"field()\" />\r\n  }\r\n   @case ('card') {\r\n    <lib-card [field]=\"field()\" />\r\n  }\r\n  @case ('hrLine') {\r\n    <lib-hr-line [field]=\"field()\" />\r\n  }\r\n  @case ('searchMultiSelect') {\r\n    <lib-search-multi-select [field]=\"field()\" />\r\n  }\r\n  @case ('subscriptTextbox') {\r\n    <lib-subscript-textbox [field]=\"field()\" />\r\n  }\r\n  @case ('label') {\r\n    <lib-label [field]=\"field()\" />\r\n  }\r\n  @case ('subHeading') {\r\n    <lib-sub-header [field]=\"field()\" />\r\n  }\r\n  @case ('heading') {\r\n    <lib-header [field]=\"field()\" />\r\n  }\r\n  @case ('table') {\r\n  <lib-table [field]=\"field()\" />\r\n  }\r\n  @case ('textboxWithText') {\r\n    <lib-textbox-with-text [field]=\"field()\" />\r\n  }\r\n    @case ('loader') {\r\n    <lib-loader [field]=\"field()\" />\r\n    }\r\n  @case ('discount') {\r\n    <lib-discount [field]=\"field()\" />\r\n  }\r\n  @case ('optionalBenefitCard') {\r\n    <lib-benefit-card [field]=\"field()\" />\r\n  }\r\n  @case ('errorSnackbar') {\r\n    <lib-error-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('warningSnackbar') {\r\n    <lib-warning-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('successSnackbar') {\r\n    <lib-success-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('neutralSnackbar') {\r\n    <lib-neutral-snackbar [field]=\"field()\" />\r\n  }\r\n  @case ('boldLabel') {\r\n    <lib-grey-label [field]=\"field()\" />\r\n  }\r\n  @case ('iframe') {\r\n    <lib-iframe [field]=\"field()\" />\r\n  }\r\n  @case ('toggleButton') {\r\n    <lib-toggle-button [field]=\"field()\" />\r\n  }\r\n  @case ('payGetCard') {\r\n    <lib-pay-get-card [field]=\"field()\"  />\r\n  }\r\n  @case ('inBuiltBenefit') {\r\n    <lib-in-built-benefit [field]=\"field()\" />\r\n  }\r\n  @case ('otherBenefit') {\r\n    <lib-other-benefits [field]=\"field()\" />\r\n  }\r\n  @case ('annuityRateLogo') {\r\n    <lib-annuity-rate-logo [field]=\"field()\" />\r\n  }\r\n  @case ('discountAnnuity') {\r\n    <lib-discount-v2 [field]=\"field()\" />\r\n  }\r\n  @case ('labelValue'){\r\n    <lib-label-value-card [field]=\"field()\" />\r\n  }\r\n  @case ('medicalQuestions'){\r\n    <lib-medial-questions [field]=\"field()\" />\r\n  }\r\n  @case ('nudge'){\r\n    <lib-page-nudge  [field]=\"field()\"/>\r\n  }\r\n  @case ('progressBar'){\r\n    <lib-progress-bar  [field]=\"field()\"/>\r\n  }\r\n  @case ('accordian'){\r\n    <lib-accordian  [field]=\"field()\"/>\r\n  }\r\n  @case ('miscInfo'){\r\n    <lib-miscellaneous-info-bar  [field]=\"field()\"/>\r\n  }\r\n  @case ('plainText'){\r\n    <lib-plain-text [field]=\"field()\"/>\r\n  }\r\n  @case ('menu'){\r\n    <lib-menu [field]=\"field()\" />\r\n  }\r\n  @case ('stepperWithArrow') {\r\n    <lib-stepper-with-arrow [field]=\"field()\" />\r\n  }\r\n  @case ('labelWithImage') {\r\n    <lib-label-with-image [field]=\"field()\" />\r\n  }\r\n  @case ('motorGlowPlanDetails') {\r\n    <lib-motor-glow-plan-details [field]=\"field()\" />\r\n  }\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: MobNumberComponent, selector: "lib-mob-number", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: InfoComponent, selector: "lib-info", inputs: ["field"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: TextareaComponent, selector: "lib-textarea", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: TabComponent, selector: "lib-tab", inputs: ["field"], outputs: ["selectedIndexChange"] }, { kind: "component", type: AutocompleteComponent, selector: "lib-autocomplete", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "selectionChanged", "valueChanged", "optionSelected"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: OtpTextboxComponent, selector: "lib-otp-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AmountTextboxComponent, selector: "lib-amount-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SuffixTextboxComponent, selector: "lib-suffix-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: OtpMobNumberComponent, selector: "lib-otp-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: TagMobNumberComponent, selector: "lib-tag-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AgeDateComponent, selector: "lib-age-date", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AdditionButtonComponent, selector: "lib-addition-button", inputs: ["field"] }, { kind: "component", type: InfoTextboxComponent, selector: "lib-info-textbox", inputs: ["field", "reactiveFormControlobject", "fields"], outputs: ["infoClick"] }, { kind: "component", type: TextboxWithImageComponent, selector: "lib-textbox-with-image", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: EmailWithDomainComponent, selector: "lib-email-with-domain", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: ImageUploadComponent, selector: "lib-image-upload", inputs: ["field"] }, { kind: "component", type: DownloadDocumentComponent, selector: "lib-download-document", inputs: ["field"] }, { kind: "component", type: AddDocumentComponent, selector: "lib-add-document", inputs: ["field"] }, { kind: "component", type: HyperlinkComponent, selector: "lib-hyperlink", inputs: ["field"] }, { kind: "component", type: TextboxWithUnderscoreComponent, selector: "lib-textbox-with-underscore", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: UnderscoreMobNumberComponent, selector: "lib-underscore-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ImageComponent, selector: "lib-image", inputs: ["field"] }, { kind: "component", type: StepperComponent, selector: "lib-stepper", inputs: ["field"] }, { kind: "component", type: CardComponent, selector: "lib-card", inputs: ["field"], outputs: ["cardDetailsClicked"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: SearchMultiSelectComponent, selector: "lib-search-multi-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: SubscriptTextboxComponent, selector: "lib-subscript-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: LabelComponent, selector: "lib-label", inputs: ["field"] }, { kind: "component", type: SubHeaderComponent, selector: "lib-sub-header", inputs: ["field"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["field"] }, { kind: "component", type: TextboxWithTextComponent, selector: "lib-textbox-with-text", inputs: ["reactiveFormControlobject", "field"], outputs: ["blur"] }, { kind: "component", type: DiscountComponent, selector: "lib-discount", inputs: ["field"] }, { kind: "component", type: BenefitCardComponent, selector: "lib-benefit-card", inputs: ["field"] }, { kind: "component", type: TableComponent, selector: "lib-table", inputs: ["field", "readonly"], outputs: ["actionItemClicked", "tablePaginationClicked"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["field"] }, { kind: "component", type: WarningSnackbarComponent, selector: "lib-warning-snackbar", inputs: ["field"] }, { kind: "component", type: SuccessSnackbarComponent, selector: "lib-success-snackbar", inputs: ["field"] }, { kind: "component", type: NeutralSnackbarComponent, selector: "lib-neutral-snackbar", inputs: ["field"] }, { kind: "component", type: ErrorSnackbarComponent, selector: "lib-error-snackbar", inputs: ["field"] }, { kind: "component", type: GreyLabelComponent, selector: "lib-grey-label", inputs: ["field"] }, { kind: "component", type: IframeComponent, selector: "lib-iframe", inputs: ["field"] }, { kind: "component", type: ToggleButtonComponent, selector: "lib-toggle-button", inputs: ["reactiveFormControlobject", "field"], outputs: ["selectionChanged", "change"] }, { kind: "component", type: PayGetCardComponent, selector: "lib-pay-get-card", inputs: ["field", "payAmount", "premiumAmount", "ptValue", "years", "frequency"] }, { kind: "component", type: InBuiltBenefitComponent, selector: "lib-in-built-benefit", inputs: ["field", "premiumAmount", "premiumAmountShort"] }, { kind: "component", type: OtherBenefitsComponent, selector: "lib-other-benefits", inputs: ["field"] }, { kind: "component", type: AnnuityRateLogoComponent, selector: "lib-annuity-rate-logo", inputs: ["field", "ratePercent"] }, { kind: "component", type: DiscountV2Component, selector: "lib-discount-v2", inputs: ["field"] }, { kind: "component", type: LabelValueCardComponent, selector: "lib-label-value-card", inputs: ["field"] }, { kind: "component", type: MedialQuestionsComponent, selector: "lib-medial-questions", inputs: ["medialQuestionResponse", "personUWOpenQuoteResponse", "field"] }, { kind: "component", type: PageNudgeComponent, selector: "lib-page-nudge", inputs: ["field"] }, { kind: "component", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: ["field"] }, { kind: "component", type: AccordianComponent, selector: "lib-accordian", inputs: ["field"] }, { kind: "component", type: MiscellaneousInfoBarComponent, selector: "lib-miscellaneous-info-bar", inputs: ["field", "details"] }, { kind: "component", type: PlainTextComponent, selector: "lib-plain-text", inputs: ["field"] }, { kind: "component", type: MenuComponent, selector: "lib-menu", inputs: ["field"] }, { kind: "component", type: StepperWIthArrowComponent, selector: "lib-stepper-with-arrow", inputs: ["field", "currentStepValue", "autoProgress", "autoProgressDelay"], outputs: ["selectedStep"] }, { kind: "component", type: LabelWithImageComponent, selector: "lib-label-with-image", inputs: ["field"] }, { kind: "component", type: TopHeaderComponent, selector: "lib-top-header", inputs: ["field"] }, { kind: "component", type: FooterComponent, selector: "lib-footer", inputs: ["field"] }, { kind: "component", type: FooterWithButtonsComponent, selector: "lib-footer-with-buttons", inputs: ["field"] }, { kind: "component", type: MotorGlowPlanDetailsComponent, selector: "lib-motor-glow-plan-details", inputs: ["field"], outputs: ["editPlanClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MasterControlComponent, isStandalone: true, selector: "lib-master-control", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (field()?.controlType) {\r\n  @case ('top-header') {\r\n    <lib-top-header [field]=\"field()\" />\r\n  }\r\n  @case ('footer') {\r\n    <lib-footer [field]=\"field()\" />\r\n  }\r\n  @case('footer-buttons')\r\n  {\r\n    <lib-footer-with-buttons [field]=\"field()\"></lib-footer-with-buttons>\r\n  }\r\n  @case('text') {\r\n   <lib-textbox [field]=\"field()\"></lib-textbox>\r\n  }\r\n  @case('select') {\r\n    <lib-select [field]=\"field()\"/>\r\n  }\r\n\r\n  @case('radio') {\r\n    <lib-radio [field]=\"field()\" />\r\n  }\r\n\r\n  @case('toggle') {\r\n    <lib-toggle [field]=\"field()\" />\r\n  }\r\n\r\n  @case('file') {\r\n    <lib-upload [field]=\"field()\" />\r\n  }\r\n\r\n  @case('date') {\r\n    <lib-dob [field]=\"field()\" />\r\n  }\r\n\r\n  @case('mobileNumber') {\r\n    <lib-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case('info') {\r\n    <lib-info [field]=\"field()\" />\r\n  }\r\n\r\n  @case('checkbox') {\r\n    <lib-checkbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case('textarea') {\r\n    <lib-textarea [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('button') {\r\n    <lib-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('tab') {\r\n    <lib-tab [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('autocomplete') {\r\n    <lib-autocomplete [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('multipleSelect') {\r\n    <lib-multiple-select [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithSelect') {\r\n    <lib-select-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('otpTextbox') {\r\n    <lib-otp-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('amountTextbox') {\r\n    <lib-amount-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('suffixTextbox') {\r\n    <lib-suffix-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('otpMobNumber') {\r\n    <lib-otp-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('tagMobNumber') {\r\n    <lib-tag-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('dateWithAge') {\r\n     <lib-age-date [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('additionButton') {\r\n    <lib-addition-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('infoTextbox') {\r\n    <lib-info-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithImage') {\r\n    <lib-textbox-with-image [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('emailWithDomain') {\r\n    <lib-email-with-domain [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('imageUpload') {\r\n     <lib-image-upload [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('downloadDocument') {\r\n     <lib-download-document [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('addDocument') {\r\n    <lib-add-document [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('hyperlink') {\r\n    <lib-hyperlink [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithUnderscore') {\r\n    <lib-textbox-with-underscore [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('underscoreMobNumber') {\r\n    <lib-underscore-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('downloadIconButton') {\r\n    <lib-icon-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('image') {\r\n    <lib-image [field]=\"field()\" />\r\n  }\r\n  @case ('stepper') {\r\n    <lib-stepper [field]=\"field()\" />\r\n  }\r\n   @case ('card') {\r\n    <lib-card [field]=\"field()\" />\r\n  }\r\n  @case ('hrLine') {\r\n    <lib-hr-line [field]=\"field()\" />\r\n  }\r\n  @case ('searchMultiSelect') {\r\n    <lib-search-multi-select [field]=\"field()\" />\r\n  }\r\n  @case ('subscriptTextbox') {\r\n    <lib-subscript-textbox [field]=\"field()\" />\r\n  }\r\n  @case ('label') {\r\n    <lib-label [field]=\"field()\" />\r\n  }\r\n  @case ('subHeading') {\r\n    <lib-sub-header [field]=\"field()\" />\r\n  }\r\n  @case ('heading') {\r\n    <lib-header [field]=\"field()\" />\r\n  }\r\n  @case ('table') {\r\n  <lib-table [field]=\"field()\" />\r\n  }\r\n  @case ('textboxWithText') {\r\n    <lib-textbox-with-text [field]=\"field()\" />\r\n  }\r\n    @case ('loader') {\r\n    <lib-loader [field]=\"field()\" />\r\n    }\r\n  @case ('discount') {\r\n    <lib-discount [field]=\"field()\" />\r\n  }\r\n  @case ('optionalBenefitCard') {\r\n    <lib-benefit-card [field]=\"field()\" />\r\n  }\r\n  @case ('errorSnackbar') {\r\n    <lib-error-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('warningSnackbar') {\r\n    <lib-warning-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('successSnackbar') {\r\n    <lib-success-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('neutralSnackbar') {\r\n    <lib-neutral-snackbar [field]=\"field()\" />\r\n  }\r\n  @case ('boldLabel') {\r\n    <lib-grey-label [field]=\"field()\" />\r\n  }\r\n  @case ('iframe') {\r\n    <lib-iframe [field]=\"field()\" />\r\n  }\r\n  @case ('toggleButton') {\r\n    <lib-toggle-button [field]=\"field()\" />\r\n  }\r\n  @case ('payGetCard') {\r\n    <lib-pay-get-card [field]=\"field()\"  />\r\n  }\r\n  @case ('inBuiltBenefit') {\r\n    <lib-in-built-benefit [field]=\"field()\" />\r\n  }\r\n  @case ('otherBenefit') {\r\n    <lib-other-benefits [field]=\"field()\" />\r\n  }\r\n  @case ('annuityRateLogo') {\r\n    <lib-annuity-rate-logo [field]=\"field()\" />\r\n  }\r\n  @case ('discountAnnuity') {\r\n    <lib-discount-v2 [field]=\"field()\" />\r\n  }\r\n  @case ('labelValue'){\r\n    <lib-label-value-card [field]=\"field()\" />\r\n  }\r\n  @case ('medicalQuestions'){\r\n    <lib-medial-questions [field]=\"field()\" />\r\n  }\r\n  @case ('nudge'){\r\n    <lib-page-nudge  [field]=\"field()\"/>\r\n  }\r\n  @case ('progressBar'){\r\n    <lib-progress-bar  [field]=\"field()\"/>\r\n  }\r\n  @case ('accordian'){\r\n    <lib-accordian  [field]=\"field()\"/>\r\n  }\r\n  @case ('miscInfo'){\r\n    <lib-miscellaneous-info-bar  [field]=\"field()\"/>\r\n  }\r\n  @case ('plainText'){\r\n    <lib-plain-text [field]=\"field()\"/>\r\n  }\r\n  @case ('menu'){\r\n    <lib-menu [field]=\"field()\" />\r\n  }\r\n  @case ('stepperWithArrow') {\r\n    <lib-stepper-with-arrow [field]=\"field()\" />\r\n  }\r\n  @case ('labelWithImage') {\r\n    <lib-label-with-image [field]=\"field()\" />\r\n  }\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["documentUploaderField", "field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved", "filePreview"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: MobNumberComponent, selector: "lib-mob-number", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: InfoComponent, selector: "lib-info", inputs: ["field"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: TextareaComponent, selector: "lib-textarea", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: TabComponent, selector: "lib-tab", inputs: ["field"], outputs: ["selectedIndexChange"] }, { kind: "component", type: AutocompleteComponent, selector: "lib-autocomplete", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "selectionChanged", "valueChanged", "optionSelected"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: OtpTextboxComponent, selector: "lib-otp-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AmountTextboxComponent, selector: "lib-amount-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SuffixTextboxComponent, selector: "lib-suffix-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: OtpMobNumberComponent, selector: "lib-otp-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: TagMobNumberComponent, selector: "lib-tag-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AgeDateComponent, selector: "lib-age-date", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AdditionButtonComponent, selector: "lib-addition-button", inputs: ["field"] }, { kind: "component", type: InfoTextboxComponent, selector: "lib-info-textbox", inputs: ["field", "reactiveFormControlobject", "fields"], outputs: ["infoClick"] }, { kind: "component", type: TextboxWithImageComponent, selector: "lib-textbox-with-image", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: EmailWithDomainComponent, selector: "lib-email-with-domain", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: ImageUploadComponent, selector: "lib-image-upload", inputs: ["field"] }, { kind: "component", type: DownloadDocumentComponent, selector: "lib-download-document", inputs: ["field"] }, { kind: "component", type: AddDocumentComponent, selector: "lib-add-document", inputs: ["field"] }, { kind: "component", type: HyperlinkComponent, selector: "lib-hyperlink", inputs: ["field"] }, { kind: "component", type: TextboxWithUnderscoreComponent, selector: "lib-textbox-with-underscore", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: UnderscoreMobNumberComponent, selector: "lib-underscore-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ImageComponent, selector: "lib-image", inputs: ["field"] }, { kind: "component", type: StepperComponent, selector: "lib-stepper", inputs: ["field"] }, { kind: "component", type: CardComponent, selector: "lib-card", inputs: ["field"], outputs: ["cardDetailsClicked"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: SearchMultiSelectComponent, selector: "lib-search-multi-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: SubscriptTextboxComponent, selector: "lib-subscript-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: LabelComponent, selector: "lib-label", inputs: ["field"] }, { kind: "component", type: SubHeaderComponent, selector: "lib-sub-header", inputs: ["field"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["field"] }, { kind: "component", type: TextboxWithTextComponent, selector: "lib-textbox-with-text", inputs: ["reactiveFormControlobject", "field"], outputs: ["blur"] }, { kind: "component", type: DiscountComponent, selector: "lib-discount", inputs: ["field"] }, { kind: "component", type: BenefitCardComponent, selector: "lib-benefit-card", inputs: ["field"] }, { kind: "component", type: TableComponent, selector: "lib-table", inputs: ["field", "readonly"], outputs: ["actionItemClicked", "tablePaginationClicked"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["field"] }, { kind: "component", type: WarningSnackbarComponent, selector: "lib-warning-snackbar", inputs: ["field"] }, { kind: "component", type: SuccessSnackbarComponent, selector: "lib-success-snackbar", inputs: ["field"] }, { kind: "component", type: NeutralSnackbarComponent, selector: "lib-neutral-snackbar", inputs: ["field"] }, { kind: "component", type: ErrorSnackbarComponent, selector: "lib-error-snackbar", inputs: ["field"] }, { kind: "component", type: GreyLabelComponent, selector: "lib-grey-label", inputs: ["field"] }, { kind: "component", type: IframeComponent, selector: "lib-iframe", inputs: ["field"] }, { kind: "component", type: ToggleButtonComponent, selector: "lib-toggle-button", inputs: ["reactiveFormControlobject", "field"], outputs: ["selectionChanged", "change"] }, { kind: "component", type: PayGetCardComponent, selector: "lib-pay-get-card", inputs: ["field", "payAmount", "premiumAmount", "ptValue", "years", "frequency"] }, { kind: "component", type: InBuiltBenefitComponent, selector: "lib-in-built-benefit", inputs: ["field", "premiumAmount", "premiumAmountShort"] }, { kind: "component", type: OtherBenefitsComponent, selector: "lib-other-benefits", inputs: ["field"] }, { kind: "component", type: AnnuityRateLogoComponent, selector: "lib-annuity-rate-logo", inputs: ["field", "ratePercent"] }, { kind: "component", type: DiscountV2Component, selector: "lib-discount-v2", inputs: ["field"] }, { kind: "component", type: LabelValueCardComponent, selector: "lib-label-value-card", inputs: ["field"] }, { kind: "component", type: MedialQuestionsComponent, selector: "lib-medial-questions", inputs: ["medialQuestionResponse", "personUWOpenQuoteResponse", "field"] }, { kind: "component", type: PageNudgeComponent, selector: "lib-page-nudge", inputs: ["field"] }, { kind: "component", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: ["field"] }, { kind: "component", type: AccordianComponent, selector: "lib-accordian", inputs: ["field"] }, { kind: "component", type: MiscellaneousInfoBarComponent, selector: "lib-miscellaneous-info-bar", inputs: ["field", "details"] }, { kind: "component", type: PlainTextComponent, selector: "lib-plain-text", inputs: ["field"] }, { kind: "component", type: MenuComponent, selector: "lib-menu", inputs: ["field"] }, { kind: "component", type: StepperWIthArrowComponent, selector: "lib-stepper-with-arrow", inputs: ["field", "currentStepValue", "autoProgress", "autoProgressDelay"], outputs: ["selectedStep"] }, { kind: "component", type: LabelWithImageComponent, selector: "lib-label-with-image", inputs: ["field"] }, { kind: "component", type: TopHeaderComponent, selector: "lib-top-header", inputs: ["field"] }, { kind: "component", type: FooterComponent, selector: "lib-footer", inputs: ["field"] }, { kind: "component", type: FooterWithButtonsComponent, selector: "lib-footer-with-buttons", inputs: ["field"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlComponent, decorators: [{
             type: Component,
@@ -6084,8 +6199,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TopHeaderComponent,
                         FooterComponent,
                         FooterWithButtonsComponent,
-                        MotorGlowPlanDetailsComponent
-                    ], template: "@switch (field()?.controlType) {\r\n  @case ('top-header') {\r\n    <lib-top-header [field]=\"field()\" />\r\n  }\r\n  @case ('footer') {\r\n    <lib-footer [field]=\"field()\" />\r\n  }\r\n  @case('footer-buttons')\r\n  {\r\n    <lib-footer-with-buttons [field]=\"field()\"></lib-footer-with-buttons>\r\n  }\r\n  @case('text') {\r\n   <lib-textbox [field]=\"field()\"></lib-textbox>\r\n  }\r\n  @case('select') {\r\n    <lib-select [field]=\"field()\"/>\r\n  }\r\n\r\n  @case('radio') {\r\n    <lib-radio [field]=\"field()\" />\r\n  }\r\n\r\n  @case('toggle') {\r\n    <lib-toggle [field]=\"field()\" />\r\n  }\r\n\r\n  @case('file') {\r\n    <lib-upload [field]=\"field()\" />\r\n  }\r\n\r\n  @case('date') {\r\n    <lib-dob [field]=\"field()\" />\r\n  }\r\n\r\n  @case('mobileNumber') {\r\n    <lib-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case('info') {\r\n    <lib-info [field]=\"field()\" />\r\n  }\r\n\r\n  @case('checkbox') {\r\n    <lib-checkbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case('textarea') {\r\n    <lib-textarea [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('button') {\r\n    <lib-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('tab') {\r\n    <lib-tab [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('autocomplete') {\r\n    <lib-autocomplete [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('multipleSelect') {\r\n    <lib-multiple-select [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithSelect') {\r\n    <lib-select-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('otpTextbox') {\r\n    <lib-otp-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('amountTextbox') {\r\n    <lib-amount-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('suffixTextbox') {\r\n    <lib-suffix-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('otpMobNumber') {\r\n    <lib-otp-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('tagMobNumber') {\r\n    <lib-tag-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('dateWithAge') {\r\n     <lib-age-date [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('additionButton') {\r\n    <lib-addition-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('infoTextbox') {\r\n    <lib-info-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithImage') {\r\n    <lib-textbox-with-image [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('emailWithDomain') {\r\n    <lib-email-with-domain [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('imageUpload') {\r\n     <lib-image-upload [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('downloadDocument') {\r\n     <lib-download-document [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('addDocument') {\r\n    <lib-add-document [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('hyperlink') {\r\n    <lib-hyperlink [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithUnderscore') {\r\n    <lib-textbox-with-underscore [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('underscoreMobNumber') {\r\n    <lib-underscore-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('downloadIconButton') {\r\n    <lib-icon-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('image') {\r\n    <lib-image [field]=\"field()\" />\r\n  }\r\n  @case ('stepper') {\r\n    <lib-stepper [field]=\"field()\" />\r\n  }\r\n   @case ('card') {\r\n    <lib-card [field]=\"field()\" />\r\n  }\r\n  @case ('hrLine') {\r\n    <lib-hr-line [field]=\"field()\" />\r\n  }\r\n  @case ('searchMultiSelect') {\r\n    <lib-search-multi-select [field]=\"field()\" />\r\n  }\r\n  @case ('subscriptTextbox') {\r\n    <lib-subscript-textbox [field]=\"field()\" />\r\n  }\r\n  @case ('label') {\r\n    <lib-label [field]=\"field()\" />\r\n  }\r\n  @case ('subHeading') {\r\n    <lib-sub-header [field]=\"field()\" />\r\n  }\r\n  @case ('heading') {\r\n    <lib-header [field]=\"field()\" />\r\n  }\r\n  @case ('table') {\r\n  <lib-table [field]=\"field()\" />\r\n  }\r\n  @case ('textboxWithText') {\r\n    <lib-textbox-with-text [field]=\"field()\" />\r\n  }\r\n    @case ('loader') {\r\n    <lib-loader [field]=\"field()\" />\r\n    }\r\n  @case ('discount') {\r\n    <lib-discount [field]=\"field()\" />\r\n  }\r\n  @case ('optionalBenefitCard') {\r\n    <lib-benefit-card [field]=\"field()\" />\r\n  }\r\n  @case ('errorSnackbar') {\r\n    <lib-error-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('warningSnackbar') {\r\n    <lib-warning-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('successSnackbar') {\r\n    <lib-success-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('neutralSnackbar') {\r\n    <lib-neutral-snackbar [field]=\"field()\" />\r\n  }\r\n  @case ('boldLabel') {\r\n    <lib-grey-label [field]=\"field()\" />\r\n  }\r\n  @case ('iframe') {\r\n    <lib-iframe [field]=\"field()\" />\r\n  }\r\n  @case ('toggleButton') {\r\n    <lib-toggle-button [field]=\"field()\" />\r\n  }\r\n  @case ('payGetCard') {\r\n    <lib-pay-get-card [field]=\"field()\"  />\r\n  }\r\n  @case ('inBuiltBenefit') {\r\n    <lib-in-built-benefit [field]=\"field()\" />\r\n  }\r\n  @case ('otherBenefit') {\r\n    <lib-other-benefits [field]=\"field()\" />\r\n  }\r\n  @case ('annuityRateLogo') {\r\n    <lib-annuity-rate-logo [field]=\"field()\" />\r\n  }\r\n  @case ('discountAnnuity') {\r\n    <lib-discount-v2 [field]=\"field()\" />\r\n  }\r\n  @case ('labelValue'){\r\n    <lib-label-value-card [field]=\"field()\" />\r\n  }\r\n  @case ('medicalQuestions'){\r\n    <lib-medial-questions [field]=\"field()\" />\r\n  }\r\n  @case ('nudge'){\r\n    <lib-page-nudge  [field]=\"field()\"/>\r\n  }\r\n  @case ('progressBar'){\r\n    <lib-progress-bar  [field]=\"field()\"/>\r\n  }\r\n  @case ('accordian'){\r\n    <lib-accordian  [field]=\"field()\"/>\r\n  }\r\n  @case ('miscInfo'){\r\n    <lib-miscellaneous-info-bar  [field]=\"field()\"/>\r\n  }\r\n  @case ('plainText'){\r\n    <lib-plain-text [field]=\"field()\"/>\r\n  }\r\n  @case ('menu'){\r\n    <lib-menu [field]=\"field()\" />\r\n  }\r\n  @case ('stepperWithArrow') {\r\n    <lib-stepper-with-arrow [field]=\"field()\" />\r\n  }\r\n  @case ('labelWithImage') {\r\n    <lib-label-with-image [field]=\"field()\" />\r\n  }\r\n  @case ('motorGlowPlanDetails') {\r\n    <lib-motor-glow-plan-details [field]=\"field()\" />\r\n  }\r\n}\r\n" }]
+                        FilePreviewComponent
+                    ], template: "@switch (field()?.controlType) {\r\n  @case ('top-header') {\r\n    <lib-top-header [field]=\"field()\" />\r\n  }\r\n  @case ('footer') {\r\n    <lib-footer [field]=\"field()\" />\r\n  }\r\n  @case('footer-buttons')\r\n  {\r\n    <lib-footer-with-buttons [field]=\"field()\"></lib-footer-with-buttons>\r\n  }\r\n  @case('text') {\r\n   <lib-textbox [field]=\"field()\"></lib-textbox>\r\n  }\r\n  @case('select') {\r\n    <lib-select [field]=\"field()\"/>\r\n  }\r\n\r\n  @case('radio') {\r\n    <lib-radio [field]=\"field()\" />\r\n  }\r\n\r\n  @case('toggle') {\r\n    <lib-toggle [field]=\"field()\" />\r\n  }\r\n\r\n  @case('file') {\r\n    <lib-upload [field]=\"field()\" />\r\n  }\r\n\r\n  @case('date') {\r\n    <lib-dob [field]=\"field()\" />\r\n  }\r\n\r\n  @case('mobileNumber') {\r\n    <lib-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case('info') {\r\n    <lib-info [field]=\"field()\" />\r\n  }\r\n\r\n  @case('checkbox') {\r\n    <lib-checkbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case('textarea') {\r\n    <lib-textarea [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('button') {\r\n    <lib-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('tab') {\r\n    <lib-tab [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('autocomplete') {\r\n    <lib-autocomplete [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('multipleSelect') {\r\n    <lib-multiple-select [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithSelect') {\r\n    <lib-select-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('otpTextbox') {\r\n    <lib-otp-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('amountTextbox') {\r\n    <lib-amount-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('suffixTextbox') {\r\n    <lib-suffix-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('otpMobNumber') {\r\n    <lib-otp-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('tagMobNumber') {\r\n    <lib-tag-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('dateWithAge') {\r\n     <lib-age-date [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('additionButton') {\r\n    <lib-addition-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('infoTextbox') {\r\n    <lib-info-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithImage') {\r\n    <lib-textbox-with-image [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('emailWithDomain') {\r\n    <lib-email-with-domain [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('imageUpload') {\r\n     <lib-image-upload [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('downloadDocument') {\r\n     <lib-download-document [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('addDocument') {\r\n    <lib-add-document [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('hyperlink') {\r\n    <lib-hyperlink [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithUnderscore') {\r\n    <lib-textbox-with-underscore [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('underscoreMobNumber') {\r\n    <lib-underscore-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('downloadIconButton') {\r\n    <lib-icon-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('image') {\r\n    <lib-image [field]=\"field()\" />\r\n  }\r\n  @case ('stepper') {\r\n    <lib-stepper [field]=\"field()\" />\r\n  }\r\n   @case ('card') {\r\n    <lib-card [field]=\"field()\" />\r\n  }\r\n  @case ('hrLine') {\r\n    <lib-hr-line [field]=\"field()\" />\r\n  }\r\n  @case ('searchMultiSelect') {\r\n    <lib-search-multi-select [field]=\"field()\" />\r\n  }\r\n  @case ('subscriptTextbox') {\r\n    <lib-subscript-textbox [field]=\"field()\" />\r\n  }\r\n  @case ('label') {\r\n    <lib-label [field]=\"field()\" />\r\n  }\r\n  @case ('subHeading') {\r\n    <lib-sub-header [field]=\"field()\" />\r\n  }\r\n  @case ('heading') {\r\n    <lib-header [field]=\"field()\" />\r\n  }\r\n  @case ('table') {\r\n  <lib-table [field]=\"field()\" />\r\n  }\r\n  @case ('textboxWithText') {\r\n    <lib-textbox-with-text [field]=\"field()\" />\r\n  }\r\n    @case ('loader') {\r\n    <lib-loader [field]=\"field()\" />\r\n    }\r\n  @case ('discount') {\r\n    <lib-discount [field]=\"field()\" />\r\n  }\r\n  @case ('optionalBenefitCard') {\r\n    <lib-benefit-card [field]=\"field()\" />\r\n  }\r\n  @case ('errorSnackbar') {\r\n    <lib-error-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('warningSnackbar') {\r\n    <lib-warning-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('successSnackbar') {\r\n    <lib-success-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('neutralSnackbar') {\r\n    <lib-neutral-snackbar [field]=\"field()\" />\r\n  }\r\n  @case ('boldLabel') {\r\n    <lib-grey-label [field]=\"field()\" />\r\n  }\r\n  @case ('iframe') {\r\n    <lib-iframe [field]=\"field()\" />\r\n  }\r\n  @case ('toggleButton') {\r\n    <lib-toggle-button [field]=\"field()\" />\r\n  }\r\n  @case ('payGetCard') {\r\n    <lib-pay-get-card [field]=\"field()\"  />\r\n  }\r\n  @case ('inBuiltBenefit') {\r\n    <lib-in-built-benefit [field]=\"field()\" />\r\n  }\r\n  @case ('otherBenefit') {\r\n    <lib-other-benefits [field]=\"field()\" />\r\n  }\r\n  @case ('annuityRateLogo') {\r\n    <lib-annuity-rate-logo [field]=\"field()\" />\r\n  }\r\n  @case ('discountAnnuity') {\r\n    <lib-discount-v2 [field]=\"field()\" />\r\n  }\r\n  @case ('labelValue'){\r\n    <lib-label-value-card [field]=\"field()\" />\r\n  }\r\n  @case ('medicalQuestions'){\r\n    <lib-medial-questions [field]=\"field()\" />\r\n  }\r\n  @case ('nudge'){\r\n    <lib-page-nudge  [field]=\"field()\"/>\r\n  }\r\n  @case ('progressBar'){\r\n    <lib-progress-bar  [field]=\"field()\"/>\r\n  }\r\n  @case ('accordian'){\r\n    <lib-accordian  [field]=\"field()\"/>\r\n  }\r\n  @case ('miscInfo'){\r\n    <lib-miscellaneous-info-bar  [field]=\"field()\"/>\r\n  }\r\n  @case ('plainText'){\r\n    <lib-plain-text [field]=\"field()\"/>\r\n  }\r\n  @case ('menu'){\r\n    <lib-menu [field]=\"field()\" />\r\n  }\r\n  @case ('stepperWithArrow') {\r\n    <lib-stepper-with-arrow [field]=\"field()\" />\r\n  }\r\n  @case ('labelWithImage') {\r\n    <lib-label-with-image [field]=\"field()\" />\r\n  }\r\n}\r\n" }]
         }], ctorParameters: () => [], propDecorators: { formGroup: [{
                 type: Input
             }] } });
@@ -6098,5 +6213,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddDocumentComponent, AdditionButtonComponent, AgeDateComponent, AmountTextboxComponent, AnnuityRateLogoComponent, AutocompleteComponent, BenefitCardComponent, ButtonComponent, CardComponent, CheckboxComponent, DiscountComponent, DiscountV2Component, DobComponent, DownloadDocumentComponent, EmailWithDomainComponent, ErrorSnackbarComponent, GreyLabelComponent, HeaderComponent, HrLineComponent, HyperlinkComponent, IconButtonComponent, IframeComponent, ImageComponent, ImageUploadComponent, InBuiltBenefitComponent, InfoComponent, InfoTextboxComponent, LabelComponent, LabelValueCardComponent, LabelWithImageComponent, LoaderComponent, MY_DATE_FORMAT, MasterControlComponent, MasterControlService, MedialQuestionsComponent, MenuComponent, MobNumberComponent, MotorGlowPlanDetailsComponent, MultipleSelectComponent, NeutralSnackbarComponent, OtherBenefitsComponent, OtpMobNumberComponent, OtpTextboxComponent, PageNudgeComponent, PayGetCardComponent, RadioComponent, SearchMultiSelectComponent, SelectComponent, SelectTextboxComponent, StepperComponent, StepperWIthArrowComponent, SubHeaderComponent, SubscriptTextboxComponent, SuccessSnackbarComponent, SuffixTextboxComponent, TabComponent, TableComponent, TextareaComponent, TextboxComponent, TextboxWithImageComponent, TextboxWithTextComponent, TextboxWithUnderscoreComponent, ToggleButtonComponent, ToggleComponent, UnderscoreMobNumberComponent, UploadComponent, WarningSnackbarComponent };
+export { AddDocumentComponent, AdditionButtonComponent, AgeDateComponent, AmountTextboxComponent, AnnuityRateLogoComponent, AutocompleteComponent, BenefitCardComponent, ButtonComponent, CardComponent, CheckboxComponent, CustomizedTooltipDirective, DiscountComponent, DiscountV2Component, DobComponent, DownloadDocumentComponent, EmailWithDomainComponent, ErrorSnackbarComponent, FilePreviewComponent, GreyLabelComponent, HeaderComponent, HrLineComponent, HyperlinkComponent, IconButtonComponent, IframeComponent, ImageComponent, ImageUploadComponent, InBuiltBenefitComponent, InfoComponent, InfoTextboxComponent, LabelComponent, LabelValueCardComponent, LabelWithImageComponent, LoaderComponent, MY_DATE_FORMAT, MasterControlComponent, MasterControlService, MedialQuestionsComponent, MenuComponent, MobNumberComponent, MultipleSelectComponent, NeutralSnackbarComponent, OtherBenefitsComponent, OtpMobNumberComponent, OtpTextboxComponent, PageNudgeComponent, PayGetCardComponent, RadioComponent, SearchMultiSelectComponent, SelectComponent, SelectTextboxComponent, StepperComponent, StepperWIthArrowComponent, SubHeaderComponent, SubscriptTextboxComponent, SuccessSnackbarComponent, SuffixTextboxComponent, TabComponent, TableComponent, TextareaComponent, TextboxComponent, TextboxWithImageComponent, TextboxWithTextComponent, TextboxWithUnderscoreComponent, ToggleButtonComponent, ToggleComponent, UnderscoreMobNumberComponent, UploadComponent, WarningSnackbarComponent };
 //# sourceMappingURL=master-control.mjs.map