jconsumer-shared 1.0.2 → 1.0.4

package/fesm2022/jconsumer-shared.mjs

@@ -1,11 +1,11 @@
 import { loadRemoteModule } from '@angular-architects/native-federation';
 import * as i0 from '@angular/core';
-import { Injectable, NgModule, Component, Input, Inject, Pipe, EventEmitter, Output, ViewChild, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA, forwardRef, ENVIRONMENT_INITIALIZER, inject, Injector, runInInjectionContext } from '@angular/core';
+import { Injectable, NgModule, Component, Input, Inject, Pipe, HostListener, EventEmitter, Output, ViewChild, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA, forwardRef, ENVIRONMENT_INITIALIZER, inject, Injector, runInInjectionContext } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpClient } from '@angular/common/http';
 import { Subject, of, BehaviorSubject } from 'rxjs';
 import * as i1$1 from 'primeng/api';
-import * as i12 from '@angular/common';
+import * as i13 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i1$2 from '@ngx-translate/core';
@@ -23,25 +23,22 @@ import * as i8 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i9 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i12$1 from 'primeng/inputtextarea';
+import * as i12 from 'primeng/inputtextarea';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import * as i1$6 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import moment from 'moment';
 import * as i1$5 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import lightgallery from 'lightgallery';
-import lgZoom from 'lightgallery/plugins/zoom';
-import * as i15 from '@angular/material/datepicker';
+import * as i16 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i16 from '@angular/material/core';
+import * as i17 from '@angular/material/core';
 import { MatOptionModule } from '@angular/material/core';
-import * as i17 from '@angular/material/form-field';
-import * as i18 from '@angular/material/select';
+import * as i18 from '@angular/material/form-field';
+import * as i19 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatIconModule } from '@angular/material/icon';
-import { LightgalleryModule } from 'lightgallery/angular';
 import intlTelInput from 'intl-tel-input';
 import * as i3 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
@@ -70,6 +67,9 @@ class ServiceMeta {
     getJSON(path) {
         return this.http.get(path);
     }
+    httpGetArrayBuffer(url) {
+        return this.http.get(url, { responseType: 'arraybuffer' });
+    }
     httpGet(url, header, params) {
         const options = {}; // Create a request option
         if (header) {
@@ -394,11 +394,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [] });
 
 class ThemeService {
-    cdr;
     renderer;
     themeLinkElement = null;
-    constructor(rendererFactory, cdr) {
-        this.cdr = cdr;
+    constructor(rendererFactory) {
         this.renderer = rendererFactory.createRenderer(null, null);
     }
     loadTheme(themeName) {
@@ -412,11 +410,8 @@ class ThemeService {
         this.themeLinkElement.href = `./assets/scss/themes/${themeName}.scss`; // Path to your theme files
         // Append the new theme to the document head
         this.renderer.appendChild(document.head, this.themeLinkElement);
-        setTimeout(() => {
-            this.cdr.detectChanges(); // Force UI update
-        }, 100);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThemeService, deps: [{ token: i0.RendererFactory2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThemeService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThemeService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThemeService, decorators: [{
@@ -424,7 +419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i0.RendererFactory2 }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
 
 function HttpLoaderFactory(http, sharedService) {
     return new TranslateHttpLoader(http, sharedService.getI8nPath() + 'assets/i18n/', '.json');
@@ -2923,7 +2918,7 @@ class FieldErrorDisplayComponent {
     displayError;
     errorMsgs;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldErrorDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FieldErrorDisplayComponent, selector: "app-field-error-display", inputs: { errorMsg: "errorMsg", displayError: "displayError", errorMsgs: "errorMsgs" }, ngImport: i0, template: "<div *ngIf=\"displayError\" tabindex=\"-1\">\r\n  <div class=\"sts-msg error\">{{ errorMsg || errorMsgs }}</div>\r\n</div>\r\n\r\n", styles: [".error-msg{color:#a94442}.fix-error-icon{top:27px}\n"], dependencies: [{ kind: "directive", type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FieldErrorDisplayComponent, selector: "app-field-error-display", inputs: { errorMsg: "errorMsg", displayError: "displayError", errorMsgs: "errorMsgs" }, ngImport: i0, template: "<div *ngIf=\"displayError\" tabindex=\"-1\">\r\n  <div class=\"sts-msg error\">{{ errorMsg || errorMsgs }}</div>\r\n</div>\r\n\r\n", styles: [".error-msg{color:#a94442}.fix-error-icon{top:27px}\n"], dependencies: [{ kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldErrorDisplayComponent, decorators: [{
             type: Component,
@@ -2940,7 +2935,7 @@ class FormSuccessDisplayComponent {
     successMsg;
     displayMsg;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormSuccessDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormSuccessDisplayComponent, selector: "app-form-success-display", inputs: { successMsg: "successMsg", displayMsg: "displayMsg" }, ngImport: i0, template: "<div *ngIf=\"displayMsg\" >\r\n  <div class=\"sts-msg success\">\r\n    {{ successMsg }}\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormSuccessDisplayComponent, selector: "app-form-success-display", inputs: { successMsg: "successMsg", displayMsg: "displayMsg" }, ngImport: i0, template: "<div *ngIf=\"displayMsg\" >\r\n  <div class=\"sts-msg success\">\r\n    {{ successMsg }}\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormSuccessDisplayComponent, decorators: [{
             type: Component,
@@ -3082,7 +3077,7 @@ class ConfirmBoxComponent {
         this.dialogRef.close(post_data);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmBoxComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.FormBuilder }, { token: FormMessageDisplayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConfirmBoxComponent, selector: "app-confirm-box", ngImport: i0, template: "<form [formGroup]=\"amForm\" [ngClass]=\"this.data.theme\" novalidate (ngSubmit)=\"amForm.valid && onSubmit(amForm.value)\">\r\n  <h1 class=\"mat-dialog-title\">\r\n    <button #queue mat-dialog-close class=\"modal_close\" id=\"btnClose\">\r\n      <i class=\"fa fa-window-close\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  </h1>\r\n  <div mat-dialog-content>\r\n    <p class=\"mb-4 fontsize\"> {{data.message}}</p>\r\n    <div *ngIf=\"data && data.cancelPolicy\" class=\"policies\">\r\n      <p-accordion [multiple]=\"true\">\r\n        <p-accordionTab>\r\n          <ng-template pTemplate=\"header\">\r\n            <h4>Cancellation Policies</h4>\r\n          </ng-template>\r\n          <p>You can cancel your {{data.book}}s any time until\r\n            <span *ngIf=\"data.wtlist.date\">{{data.wtlist.date| date:\r\n              newDateFormat}}</span><span *ngIf=\"data.wtlist.appmtDate\">{{data.wtlist.appmtDate| date:\r\n              newDateFormat}}</span><span *ngIf=\"data.wtlist.orderDate\">{{data.wtlist.orderDate| date:\r\n              newDateFormat}}</span>.<span\r\n              *ngIf=\"data.wtlist && data.wtlist.providerAccount && data.wtlist.providerAccount.businessName\">\r\n              If the system doesn\u2019t permit your cancellation,\r\n              contact your provider, {{data.wtlist.providerAccount.businessName}}.\r\n              It\u2019s important to note that the\r\n              provider may cancel your bookings at their discretion for their own reasons.\r\n              Jaldee will keep you informed promptly regarding the changes through timely notifications.\r\n            </span>\r\n          </p>\r\n        </p-accordionTab>\r\n        <p-accordionTab>\r\n          <ng-template pTemplate=\"header\">\r\n            <h4>Refund policy for Advance Payments(only)</h4>\r\n          </ng-template>\r\n          <p>\r\n            In the case of your cancellation, a 3% (payment gateway fee) will be deducted from the refund\r\n            of the advanced payment made. For same-day cancellations, kindly contact your service provider,\r\n            {{data.wtlist.providerAccount.businessName}} to initiate the refund. For any refund-related queries, reach\r\n            out to\r\n            {{data.wtlist.providerAccount.businessName}} for assistance.\r\n          </p>\r\n        </p-accordionTab>\r\n      </p-accordion>\r\n      <p class=\"mt-4\"> Are you sure you want to cancel this {{data.book}}? </p>\r\n    </div>\r\n    <div *ngIf=\"data.book !== 'Order' && data.cancelPolicy\">\r\n      <div class=\"form-group\">\r\n        <label class=\"col-form-label\" for=\"displayName\">{{select_reason_cap}}*</label>\r\n        <mat-chip-list>\r\n          <mat-chip *ngFor=\"let cancel_reason of cancel_reasons\" class=\"me-2 mb-2\"\r\n            color=\"{{(cancel_reason.value === amForm.get('reason').value) ? 'primary' : ''}}\"\r\n            selected=\"{{(cancel_reason.value === amForm.get('reason').value) ? true : false}}\"\r\n            [class.selected]=\"(cancel_reason.value === amForm.get('reason').value) ? true : false\"\r\n            (click)=\"selectReason(cancel_reason)\">\r\n            {{cancel_reason.title}}\r\n          </mat-chip>\r\n        </mat-chip-list>\r\n      </div>\r\n      <div class=\"form-group mt-2\">\r\n        <mat-checkbox formControlName=\"send_message\">{{send_message_cap}} {{rep_username}}</mat-checkbox>\r\n      </div>\r\n      <div class=\"form-group reason-area\" *ngIf=\"amForm.get('send_message').value\">\r\n        <textarea  class=\"form-control\" rows=\"3\"  id=\"message\" pInputTextarea placeholder=\"Message\" formControlName=\"message\"></textarea>\r\n        <app-field-error-display [displayError]=\"fed_service.isFieldValid(amForm,'message')\"\r\n          errorMsg=\"Please enter a message.\">\r\n        </app-field-error-display>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div mat-dialog-actions *ngIf=\"data.book !== 'Order'&& data.cancelPolicy\" class=\"mb-2\">\r\n    <div class=\"col-md-12\" style=\"margin-top: 15px;display: inline-flex;\">\r\n      <button type=\"button\" mat-dialog-close class=\"cs-btn bt2\" id=\"btnCancel\">{{cancel_btn_cap}}</button>\r\n      <button type=\"submit\" mat-button [disabled]=\"!amForm.valid\" class=\"cs-btn bt1\" id=\"btnOk\">{{ok_btn_cap}}</button>\r\n    </div>\r\n  </div>\r\n  <app-field-error-display [displayError]=\"true\" *ngIf=\"api_error\" errorMsg=\"{{api_error}}\"></app-field-error-display>\r\n  <app-form-success-display [displayMsg]=\"true\" *ngIf=\"api_success\" successMsg=\"{{api_success}}\">\r\n  </app-form-success-display>\r\n  <div mat-dialog-actions class=\"paddingtop\" *ngIf=\"data.book !== 'Order' && !data.cancelPolicy\">\r\n    <button tabindex=\"-1\" (click)=\"onClick(0)\" class=\"cs-btn bt2\" id=\"btnCancel\">{{cancel_btn_cap}}</button>\r\n    <button tabindex=\"2\" (click)=\"onClick(1)\" id=\"btnOk\"\r\n      class=\"cs-btn bt1 reddelete checkavailabilitybutton\">{{ok_btn_cap}}</button>\r\n  </div>\r\n  <app-field-error-display [displayError]=\"true\" *ngIf=\"showError\" errorMsg=\"Department name is required\">\r\n  </app-field-error-display>\r\n</form>", styles: [".mat-dialog-actions button{padding:10px 25px!important}.mat-dialog-title{color:#222223;background:#183e79;height:50px!important}.mat-dialog-title{margin:0;padding:15px 20px}p{font-size:12px!important}ul{margin-top:0;margin-bottom:10px}.paddingtop{padding-top:20px}.mat-dialog-actions{display:flex;justify-content:center;border:none}.mat-dialog-actions:last-child{margin:0;padding:20px}.mat-dialog-actions{box-shadow:0 0 30px #0000001a;position:relative;z-index:99}.bt1{margin-left:10px}.reddelete{background:#08b363}.cs-btn{position:relative;display:inline-block;margin-bottom:0;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;border:none;white-space:nowrap;outline:0;padding:10px 40px;font-size:inherit;line-height:1.4;z-index:2}.bt1,.bt2{border-radius:3px}.mat-dialog-content>.ng-star-inserted{margin-bottom:20px}ul{padding-left:40px}.reddelete{background:#183e79;color:#fff}::ng-deep .policies .p-accordion p-accordiontab .p-accordion-header .p-accordion-header-link{text-decoration:none!important}.fontsize{font-size:16px!important}\n"], dependencies: [{ kind: "directive", type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i5.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i5.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: FieldErrorDisplayComponent, selector: "app-field-error-display", inputs: ["errorMsg", "displayError", "errorMsgs"] }, { kind: "component", type: FormSuccessDisplayComponent, selector: "app-form-success-display", inputs: ["successMsg", "displayMsg"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i12$1.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "pipe", type: i12.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConfirmBoxComponent, selector: "app-confirm-box", ngImport: i0, template: "<form [formGroup]=\"amForm\" [ngClass]=\"this.data.theme\" novalidate (ngSubmit)=\"amForm.valid && onSubmit(amForm.value)\">\r\n  <h1 class=\"mat-dialog-title\">\r\n    <button #queue mat-dialog-close class=\"modal_close\" id=\"btnClose\">\r\n      <i class=\"fa fa-window-close\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  </h1>\r\n  <div mat-dialog-content>\r\n    <p class=\"mb-4 fontsize\"> {{data.message}}</p>\r\n    <div *ngIf=\"data && data.cancelPolicy\" class=\"policies\">\r\n      <p-accordion [multiple]=\"true\">\r\n        <p-accordionTab>\r\n          <ng-template pTemplate=\"header\">\r\n            <h4>Cancellation Policies</h4>\r\n          </ng-template>\r\n          <p>You can cancel your {{data.book}}s any time until\r\n            <span *ngIf=\"data.wtlist.date\">{{data.wtlist.date| date:\r\n              newDateFormat}}</span><span *ngIf=\"data.wtlist.appmtDate\">{{data.wtlist.appmtDate| date:\r\n              newDateFormat}}</span><span *ngIf=\"data.wtlist.orderDate\">{{data.wtlist.orderDate| date:\r\n              newDateFormat}}</span>.<span\r\n              *ngIf=\"data.wtlist && data.wtlist.providerAccount && data.wtlist.providerAccount.businessName\">\r\n              If the system doesn\u2019t permit your cancellation,\r\n              contact your provider, {{data.wtlist.providerAccount.businessName}}.\r\n              It\u2019s important to note that the\r\n              provider may cancel your bookings at their discretion for their own reasons.\r\n              Jaldee will keep you informed promptly regarding the changes through timely notifications.\r\n            </span>\r\n          </p>\r\n        </p-accordionTab>\r\n        <p-accordionTab>\r\n          <ng-template pTemplate=\"header\">\r\n            <h4>Refund policy for Advance Payments(only)</h4>\r\n          </ng-template>\r\n          <p>\r\n            In the case of your cancellation, a 3% (payment gateway fee) will be deducted from the refund\r\n            of the advanced payment made. For same-day cancellations, kindly contact your service provider,\r\n            {{data.wtlist.providerAccount.businessName}} to initiate the refund. For any refund-related queries, reach\r\n            out to\r\n            {{data.wtlist.providerAccount.businessName}} for assistance.\r\n          </p>\r\n        </p-accordionTab>\r\n      </p-accordion>\r\n      <p class=\"mt-4\"> Are you sure you want to cancel this {{data.book}}? </p>\r\n    </div>\r\n    <div *ngIf=\"data.book !== 'Order' && data.cancelPolicy\">\r\n      <div class=\"form-group\">\r\n        <label class=\"col-form-label\" for=\"displayName\">{{select_reason_cap}}*</label>\r\n        <mat-chip-list>\r\n          <mat-chip *ngFor=\"let cancel_reason of cancel_reasons\" class=\"me-2 mb-2\"\r\n            color=\"{{(cancel_reason.value === amForm.get('reason').value) ? 'primary' : ''}}\"\r\n            selected=\"{{(cancel_reason.value === amForm.get('reason').value) ? true : false}}\"\r\n            [class.selected]=\"(cancel_reason.value === amForm.get('reason').value) ? true : false\"\r\n            (click)=\"selectReason(cancel_reason)\">\r\n            {{cancel_reason.title}}\r\n          </mat-chip>\r\n        </mat-chip-list>\r\n      </div>\r\n      <div class=\"form-group mt-2\">\r\n        <mat-checkbox formControlName=\"send_message\">{{send_message_cap}} {{rep_username}}</mat-checkbox>\r\n      </div>\r\n      <div class=\"form-group reason-area\" *ngIf=\"amForm.get('send_message').value\">\r\n        <textarea  class=\"form-control\" rows=\"3\"  id=\"message\" pInputTextarea placeholder=\"Message\" formControlName=\"message\"></textarea>\r\n        <app-field-error-display [displayError]=\"fed_service.isFieldValid(amForm,'message')\"\r\n          errorMsg=\"Please enter a message.\">\r\n        </app-field-error-display>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div mat-dialog-actions *ngIf=\"data.book !== 'Order'&& data.cancelPolicy\" class=\"mb-2\">\r\n    <div class=\"col-md-12\" style=\"margin-top: 15px;display: inline-flex;\">\r\n      <button type=\"button\" mat-dialog-close class=\"cs-btn bt2\" id=\"btnCancel\">{{cancel_btn_cap}}</button>\r\n      <button type=\"submit\" mat-button [disabled]=\"!amForm.valid\" class=\"cs-btn bt1\" id=\"btnOk\">{{ok_btn_cap}}</button>\r\n    </div>\r\n  </div>\r\n  <app-field-error-display [displayError]=\"true\" *ngIf=\"api_error\" errorMsg=\"{{api_error}}\"></app-field-error-display>\r\n  <app-form-success-display [displayMsg]=\"true\" *ngIf=\"api_success\" successMsg=\"{{api_success}}\">\r\n  </app-form-success-display>\r\n  <div mat-dialog-actions class=\"paddingtop\" *ngIf=\"data.book !== 'Order' && !data.cancelPolicy\">\r\n    <button tabindex=\"-1\" (click)=\"onClick(0)\" class=\"cs-btn bt2\" id=\"btnCancel\">{{cancel_btn_cap}}</button>\r\n    <button tabindex=\"2\" (click)=\"onClick(1)\" id=\"btnOk\"\r\n      class=\"cs-btn bt1 reddelete checkavailabilitybutton\">{{ok_btn_cap}}</button>\r\n  </div>\r\n  <app-field-error-display [displayError]=\"true\" *ngIf=\"showError\" errorMsg=\"Department name is required\">\r\n  </app-field-error-display>\r\n</form>", styles: [".mat-dialog-actions button{padding:10px 25px!important}.mat-dialog-title{color:#222223;background:#183e79;height:50px!important}.mat-dialog-title{margin:0;padding:15px 20px}p{font-size:12px!important}ul{margin-top:0;margin-bottom:10px}.paddingtop{padding-top:20px}.mat-dialog-actions{display:flex;justify-content:center;border:none}.mat-dialog-actions:last-child{margin:0;padding:20px}.mat-dialog-actions{box-shadow:0 0 30px #0000001a;position:relative;z-index:99}.bt1{margin-left:10px}.reddelete{background:#08b363}.cs-btn{position:relative;display:inline-block;margin-bottom:0;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;border:none;white-space:nowrap;outline:0;padding:10px 40px;font-size:inherit;line-height:1.4;z-index:2}.bt1,.bt2{border-radius:3px}.mat-dialog-content>.ng-star-inserted{margin-bottom:20px}ul{padding-left:40px}.reddelete{background:#183e79;color:#fff}::ng-deep .policies .p-accordion p-accordiontab .p-accordion-header .p-accordion-header-link{text-decoration:none!important}.fontsize{font-size:16px!important}\n"], dependencies: [{ kind: "directive", type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i5.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i5.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: FieldErrorDisplayComponent, selector: "app-field-error-display", inputs: ["errorMsg", "displayError", "errorMsgs"] }, { kind: "component", type: FormSuccessDisplayComponent, selector: "app-form-success-display", inputs: ["successMsg", "displayMsg"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i12.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "pipe", type: i13.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmBoxComponent, decorators: [{
             type: Component,
@@ -4977,7 +4972,7 @@ class ShowuploadfileComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ShowuploadfileComponent, deps: [{ token: i1$4.MatDialogRef }, { token: CommonService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ShowuploadfileComponent, selector: "app-showuploadfile", ngImport: i0, template: "<form [ngClass]=\"theme\">\r\n  <h1 class=\"mat-dialog-title\"> {{title}}\r\n    <button #locte mat-dialog-close class=\"modal_close\" tabindex=\"-1\" id=\"btnClose\">\r\n      <i class=\"fa fa-window-close\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  </h1>\r\n  <div class=\"pad-20 image-scroll\">\r\n    <img style=\"width:100%;margin-top: -20px;\" [src]=\"details.url||details.s3path\" alt=\"\"\r\n      *ngIf=\"details.type && details.type == 'image/bmp'|| details.type =='image/png'|| details.type == 'image/gif' || details.type == 'image/jpg' ||details.type =='image/jpeg'||details.type == 'image/webp'\r\n  ||details.type == 'bmp' ||details.type == 'png' ||details.type == 'gif' ||details.type == 'jpg' ||details.type == 'jpeg' ||details.type == 'webp'\" />\r\n    <video style=\"width:100%;height: 75vh;\" controls\r\n      *ngIf=\"(data.source === 'qnr' && type === 'video') || (data.source === 'mr' && details.type && details.type == 'video/mp4' || details.type == 'video/mpeg'||details.type == 'video/quicktime')\">\r\n      <source [src]=\"details.url\" />\r\n    </video>\r\n    <audio style=\"width:100%;\" controls\r\n      *ngIf=\"(data.source === 'qnr' && type === 'audio') || (data.source === 'mr' && details.type && details.type == 'audio/ogg'|| details.type == 'audio/mpeg'|| details.type == 'audio/mp3')\">\r\n      <source [src]=\"details.url\" />\r\n    </audio>\r\n  </div>\r\n</form>", styles: [".pad-20{padding:20px!important}\n"], dependencies: [{ kind: "directive", type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ShowuploadfileComponent, selector: "app-showuploadfile", ngImport: i0, template: "<form [ngClass]=\"theme\">\r\n  <h1 class=\"mat-dialog-title\"> {{title}}\r\n    <button #locte mat-dialog-close class=\"modal_close\" tabindex=\"-1\" id=\"btnClose\">\r\n      <i class=\"fa fa-window-close\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  </h1>\r\n  <div class=\"pad-20 image-scroll\">\r\n    <img style=\"width:100%;margin-top: -20px;\" [src]=\"details.url||details.s3path\" alt=\"\"\r\n      *ngIf=\"details.type && details.type == 'image/bmp'|| details.type =='image/png'|| details.type == 'image/gif' || details.type == 'image/jpg' ||details.type =='image/jpeg'||details.type == 'image/webp'\r\n  ||details.type == 'bmp' ||details.type == 'png' ||details.type == 'gif' ||details.type == 'jpg' ||details.type == 'jpeg' ||details.type == 'webp'\" />\r\n    <video style=\"width:100%;height: 75vh;\" controls\r\n      *ngIf=\"(data.source === 'qnr' && type === 'video') || (data.source === 'mr' && details.type && details.type == 'video/mp4' || details.type == 'video/mpeg'||details.type == 'video/quicktime')\">\r\n      <source [src]=\"details.url\" />\r\n    </video>\r\n    <audio style=\"width:100%;\" controls\r\n      *ngIf=\"(data.source === 'qnr' && type === 'audio') || (data.source === 'mr' && details.type && details.type == 'audio/ogg'|| details.type == 'audio/mpeg'|| details.type == 'audio/mp3')\">\r\n      <source [src]=\"details.url\" />\r\n    </audio>\r\n  </div>\r\n</form>", styles: [".pad-20{padding:20px!important}\n"], dependencies: [{ kind: "directive", type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ShowuploadfileComponent, decorators: [{
             type: Component,
@@ -4987,6 +4982,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     args: [MAT_DIALOG_DATA]
                 }] }] });
 
+class JGalleryComponent {
+    data;
+    dialogRef;
+    currentIndex;
+    constructor(data, dialogRef) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+        this.currentIndex = data.index;
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    prevImage() {
+        if (this.currentIndex > 0) {
+            this.currentIndex--;
+        }
+    }
+    nextImage() {
+        if (this.currentIndex < this.data.images.length - 1) {
+            this.currentIndex++;
+        }
+    }
+    handleKeyboardEvent(event) {
+        if (event.key === 'ArrowLeft') {
+            this.prevImage();
+        }
+        else if (event.key === 'ArrowRight') {
+            this.nextImage();
+        }
+        else if (event.key === 'Escape') {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JGalleryComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$4.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: JGalleryComponent, selector: "app-j-gallery", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<div class=\"modal-overlay\" (click)=\"close()\">\r\n    <div class=\"modal-content\" (click)=\"$event.stopPropagation()\">\r\n      <button class=\"close-btn\" (click)=\"close()\">\u2716</button>\r\n      <img [src]=\"data.images[currentIndex]['source']\" alt=\"Gallery Image\">\r\n      \r\n      <button class=\"nav-btn prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevImage()\">&#10094;</button>\r\n      <button class=\"nav-btn next\" *ngIf=\"currentIndex < data.images.length - 1\" (click)=\"nextImage()\">&#10095;</button>\r\n    </div>\r\n  </div>", styles: [".modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;transition:opacity .3s ease-in-out}.modal-content{position:relative;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#ffffff1a;padding:10px;animation:fadeIn .3s ease-in-out}img{max-width:100%;max-height:90vh;border-radius:8px;box-shadow:0 5px 15px #0000004d}.nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:#fff3;border:none;color:#fff;font-size:30px;padding:10px;cursor:pointer;border-radius:10%;transition:background .3s}.nav-btn:hover{background:#ffffff80}.prev{left:10px}.next{right:10px}.close-btn{position:absolute;top:10px;right:10px;background:red;color:#fff;border:none;font-size:20px;cursor:pointer;padding:5px 10px;border-radius:50%;transition:background .3s}.close-btn:hover{background:#8b0000}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JGalleryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-j-gallery', template: "<div class=\"modal-overlay\" (click)=\"close()\">\r\n    <div class=\"modal-content\" (click)=\"$event.stopPropagation()\">\r\n      <button class=\"close-btn\" (click)=\"close()\">\u2716</button>\r\n      <img [src]=\"data.images[currentIndex]['source']\" alt=\"Gallery Image\">\r\n      \r\n      <button class=\"nav-btn prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevImage()\">&#10094;</button>\r\n      <button class=\"nav-btn next\" *ngIf=\"currentIndex < data.images.length - 1\" (click)=\"nextImage()\">&#10095;</button>\r\n    </div>\r\n  </div>", styles: [".modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;transition:opacity .3s ease-in-out}.modal-content{position:relative;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#ffffff1a;padding:10px;animation:fadeIn .3s ease-in-out}img{max-width:100%;max-height:90vh;border-radius:8px;box-shadow:0 5px 15px #0000004d}.nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:#fff3;border:none;color:#fff;font-size:30px;padding:10px;cursor:pointer;border-radius:10%;transition:background .3s}.nav-btn:hover{background:#ffffff80}.prev{left:10px}.next{right:10px}.close-btn{position:absolute;top:10px;right:10px;background:red;color:#fff;border:none;font-size:20px;cursor:pointer;padding:5px 10px;border-radius:50%;transition:background .3s}.close-btn:hover{background:#8b0000}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$4.MatDialogRef }], propDecorators: { handleKeyboardEvent: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+class JGalleryService {
+    dialog;
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    open(images, index) {
+        this.dialog.open(JGalleryComponent, {
+            data: { images, index },
+            width: '80vw',
+            maxHeight: '90vh',
+            panelClass: 'custom-modal'
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JGalleryService, deps: [{ token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JGalleryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JGalleryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$4.MatDialog }] });
+
 class QuestionnaireComponent {
     activated_route;
     wordProcessor;
@@ -4999,6 +5064,7 @@ class QuestionnaireComponent {
     errorService;
     toastService;
     sharedService;
+    galleryService;
     location;
     questionnaireList;
     source;
@@ -5069,8 +5135,7 @@ class QuestionnaireComponent {
     serviceTotalPrice = 0;
     editableItem;
     cdnPath = '';
-    lightGalleryContainer;
-    constructor(activated_route, wordProcessor, lStorageService, dateProcessor, dialog, fileService, commonService, questionaireService, errorService, toastService, sharedService, location) {
+    constructor(activated_route, wordProcessor, lStorageService, dateProcessor, dialog, fileService, commonService, questionaireService, errorService, toastService, sharedService, galleryService, location) {
         this.activated_route = activated_route;
         this.wordProcessor = wordProcessor;
         this.lStorageService = lStorageService;
@@ -5082,6 +5147,7 @@ class QuestionnaireComponent {
         this.errorService = errorService;
         this.toastService = toastService;
         this.sharedService = sharedService;
+        this.galleryService = galleryService;
         this.location = location;
         this.cdnPath = this.sharedService.getCDNPath();
         this.activated_route.queryParams.subscribe(qparams => {
@@ -6311,30 +6377,15 @@ class QuestionnaireComponent {
     }
     openGallery(image) {
         let imageIndex = this.getCurrentIndexCustomLayout(image, this.image_list_popup);
-        const lgInstance = lightgallery(this.lightGalleryContainer.nativeElement, {
-            plugins: [lgZoom],
-            dynamic: true,
-            dynamicEl: this.image_list_popup.map((img) => ({
-                src: img.src,
-                thumb: img.thumb,
-                subHtml: `<h4>${img.alt}</h4>`,
-                downloadable: true,
-            })),
-            index: imageIndex,
-            zoom: true,
-            thumbnail: true,
-            fullScreen: true,
-            download: true,
-        });
-        lgInstance.openGallery(imageIndex);
+        this.galleryService.open(this.image_list_popup, imageIndex);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionnaireComponent, deps: [{ token: i1$6.ActivatedRoute }, { token: WordProcessor }, { token: LocalStorageService }, { token: DateTimeProcessor }, { token: i1$4.MatDialog }, { token: FileService }, { token: CommonService }, { token: QuestionaireService }, { token: ErrorMessagingService }, { token: ToastService }, { token: SharedService }, { token: i12.Location }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QuestionnaireComponent, selector: "app-questionnaire", inputs: { questionnaireList: "questionnaireList", source: "source", accountId: "accountId", questionAnswers: "questionAnswers", customerDetails: "customerDetails", uuid: "uuid", type: "type", waitlistStatus: "waitlistStatus", orderStatus: "orderStatus", donationDetails: "donationDetails", service: "service", mode: "mode", tempType: "tempType", bookingType: "bookingType" }, outputs: { fileChanged: "fileChanged", returnAnswers: "returnAnswers" }, viewQueries: [{ propertyName: "file2", first: true, predicate: ["logofile1"], descendants: true }, { propertyName: "lightGalleryContainer", first: true, predicate: ["lightGalleryContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"cons-inbox no-padding-small\" *ngIf=\"!showservice\">\r\n  <div class=\"container consumer-dashhome p-0\" *ngIf=\"!type && source!='proLead'\">\r\n    <div class=\"card title-gb rounded-0\" *ngIf=\"uuid\">\r\n      <h5 class=\"mt-2 bold\">{{questionnaire_heading | capitalizeFirst}} <a class=\"pull-left me-4 back-btn\"\r\n          (click)=\"goBack()\"><i class=\"fa fa-arrow-left\"></i></a></h5>\r\n    </div>\r\n  </div>\r\n  <app-common-innerloading-spinner *ngIf=\"loading\"></app-common-innerloading-spinner>\r\n  <div class=\"d-flex flex-column-fluid pull-right me-2 mb-4\"\r\n    *ngIf=\"type !== 'qnrLinkProvider' && !buttonDisable && waitlistStatus\">\r\n    <button class=\"normal-btn edit\" mat-flat-button (click)=\"editQnr()\" id=\"btnEdit\">Edit</button>\r\n  </div>\r\n  <div class=\"d-flex flex-column-fluid width-100\" [class.qnrDisableState]=\"disableInput()\"\r\n    [class.p-0]=\"uuid && (source === 'consCheckin' || source === 'consAppt' || source === 'consOrder' || source === 'paper' || source === 'consDonationDetails' || source === 'ivr')\">\r\n    <div class=\"col-xl-12 force_center\" [class.p-0]=\"uuid\" [class.no-padding-small]=\"source && source=='ivr'\">\r\n      <div class=\"\">\r\n        <div class=\"qnrsec\" *ngFor=\"let qnr of groupedQnr | keyvalue: asIsOrder\"\r\n          [class.section-shadow]=\"getSectionCount() > 1\" [class.no-padding-small]=\"source && source=='ivr'\">\r\n          <div class=\"form-group card mgn-0\" *ngFor=\"let question of qnr.value\">\r\n            <label class=\"col-12 quest\">{{getQuestion(question).label}}\r\n              <i class=\"fa fa-plus-circle pull-right\" aria-hidden=\"true\"\r\n                [class.addicon]=\"!buttonDisable && !disableInput()\"\r\n                *ngIf=\"getQuestion(question).fieldDataType === 'dataGrid' && !showDataGrid[getQuestion(question).labelName]\"\r\n                (click)=\"!buttonDisable && !disableInput() && showDataGridAddSection(getQuestion(question), true)\"></i>\r\n              <div class=\"pro-only\" *ngIf=\"showProviderText(getQuestion(question))\">For Providers</div>\r\n              <span class=\"red\" *ngIf=\"getQuestion(question).mandatory\">*</span>\r\n              <div class=\"form-level-settings\" *ngIf=\"getQuestion(question).hint\"\r\n                [innerHTML]=\"getQuestion(question).hint | safeHtml\">\r\n              </div>\r\n            </label>\r\n            <!-- for file upload -->\r\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'fileUpload'\">\r\n              <mat-select multiple #deptsel [disabled]=\"buttonDisable || disableInput()\"\r\n                *ngIf=\"getQuestion(question).filePropertie.maxNoOfFile > 1 && getQuestion(question).filePropertie.minNoOfFile !== getQuestion(question).filePropertie.maxNoOfFile\"\r\n                [(ngModel)]=\"uploadFilesTemp[getQuestion(question).labelName]\" class=\"select-box\" placeholder=\"Select\">\r\n                <mat-option *ngFor=\"let document of getQuestion(question).filePropertie.allowedDocuments\"\r\n                  [value]=\"document\" (click)=\"changeImageSelected(getQuestion(question), document)\">\r\n                  {{document}}</mat-option>\r\n              </mat-select>\r\n              <div class=\"col-lg-12 col-12 col-md-12 col-sm-12 p-0 mt-4\"\r\n                *ngIf=\"getDocuments(getQuestion(question)) && getDocuments(getQuestion(question)).length > 0\">\r\n                <div class=\"dropzone dropzone-default dropzone-primary dz-clickable\"\r\n                  [class.single-file]=\"getQuestion(question).filePropertie.allowedDocuments.length==1\"\r\n                  style=\"cursor: auto;\">\r\n                  <ng-container *ngFor=\"let doc of getDocuments(getQuestion(question))\">\r\n                    <div class=\"dz-preview dz-processing dz-image-preview dz-error dz-complete\"\r\n                      *ngIf=\"getImg(getQuestion(question), doc)\">\r\n                      <div class=\"docname\" *ngIf=\"getQuestion(question).filePropertie.allowedDocuments.length > 1\">\r\n                        {{doc}}</div>\r\n                      <div class=\"dzimage pointer-cursor\" (click)=\"openAttachmentGallery(getQuestion(question), doc)\">\r\n                        <img alt=\"\" class=\"img_fit\" [src]=\"getImg(getQuestion(question), doc)\">\r\n                      </div>\r\n                      <input [disabled]=\"buttonDisable || disableInput()\" (blur)=\"onSubmit('inputChange');\"\r\n                        [(ngModel)]=\"comments[getQuestion(question).labelName + '=' + doc]\">\r\n                      <div class=\"gal_action\" *ngIf=\"!buttonDisable && !disableInput() && mode!=='read'\"\r\n                        (click)=\"changeImageSelected(getQuestion(question), doc)\">\r\n                        <i class=\"fa fa-times-circle\" aria-hidden=\"true\"></i>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"dz-preview dz-processing dz-image-preview dz-error dz-complete\"\r\n                      (click)=\"logofile1.click()\" *ngIf=\"!getImg(getQuestion(question), doc)\">\r\n                      <div class=\"docname\" *ngIf=\"getQuestion(question).filePropertie.allowedDocuments.length > 1\">\r\n                        {{doc}}</div>\r\n                      <div class=\"dz-image pointer-cursor\">\r\n                      </div>\r\n                      <input #logofile1 type=\"file\" accept=\"/*;capture=camera\" style=\"display:none;\"\r\n                        [disabled]=\"buttonDisable || disableInput()\"\r\n                        (change)=\"filesSelected($event, getQuestion(question), doc)\">\r\n                      <div class=\"dz-error-mark\">\r\n                        <a class=\"btn btn-icon btn-light-success btn-circle mr-2\"><i\r\n                            class=\"text-dark-50 flaticon-upload\"></i></a>\r\n                      </div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for checkbox -->\r\n            <div class=\"col-12\"\r\n              *ngIf=\"getQuestion(question).fieldDataType === 'list' && getQuestion(question).listPropertie.maxAnswers > 1\">\r\n              <div class=\"checkbox-list\">\r\n                <label class=\"checkbox\" *ngFor=\"let value of getQuestion(question).labelValues\">\r\n                  <input type=\"checkbox\" [checked]=\"isChecked(value, getQuestion(question))\"\r\n                    (change)=\"listChange($event, value, getQuestion(question))\"\r\n                    [disabled]=\"buttonDisable || disableInput()\">\r\n                  <span></span>\r\n                  {{value}}\r\n                </label>\r\n              </div>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for radio -->\r\n            <div class=\"col-12\"\r\n              *ngIf=\"getQuestion(question).fieldDataType === 'list' && getQuestion(question).listPropertie.maxAnswers === 1\">\r\n              <div class=\"radio-list\">\r\n                <label class=\"radio\" *ngFor=\"let value of getQuestion(question).labelValues\">\r\n                  <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\r\n                    [checked]=\"isChecked(value, getQuestion(question))\"\r\n                    (change)=\"listChange($event, value, getQuestion(question))\">\r\n                  <span></span>\r\n                  {{value}}\r\n                </label>\r\n              </div>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for toggel boolean -->\r\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'bool'\">\r\n              <div class=\"radio-list\">\r\n                <label class=\"radio\" *ngFor=\"let value of getQuestion(question).labelValues\">\r\n                  <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\r\n                    [checked]=\"isBooleanChecked(value, getQuestion(question))\"\r\n                    (change)=\"booleanChange($event, value, getQuestion(question))\">\r\n                  <span></span>\r\n                  {{value}}\r\n                </label>\r\n              </div>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for Text -->\r\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'plainText'\">\r\n              <input *ngIf=\"getQuestion(question).plainTextPropertie.maxNoOfLetter<=100\"\r\n                  [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"                  \r\n                  [minlength]=\"getQuestion(question).plainTextPropertie.minNoOfLetter\"\r\n                  [maxlength]=\"getQuestion(question).plainTextPropertie.maxNoOfLetter\"\r\n                  class=\"form-control1 form-control-solid\" type=\"text\" [disabled]=\"buttonDisable || disableInput()\">\r\n                <textarea rows=\"3\" *ngIf=\"getQuestion(question).plainTextPropertie.maxNoOfLetter>100\"\r\n                  [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"\r\n                  [minlength]=\"getQuestion(question).plainTextPropertie.minNoOfLetter\"\r\n                  [maxlength]=\"getQuestion(question).plainTextPropertie.maxNoOfLetter\" [disabled]=\"buttonDisable || disableInput()\"\r\n                  class=\"form-control2 form-control-solid\"></textarea>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for Number -->\r\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'number'\">\r\n              <input [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"\r\n                [min]=\"getQuestion(question).numberPropertie.start\" [max]=\"getQuestion(question).numberPropertie.end\"\r\n                [disabled]=\"buttonDisable || disableInput()\" class=\"form-control1 form-control-solid\" type=\"number\"\r\n                (keypress)=\"isNumeric($event)\">\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for Date -->\r\n            <div class=\"col-12 disp-flex\" *ngIf=\"getQuestion(question).fieldDataType === 'date'\">\r\n              <input class=\"form-control1\" [matDatepicker]=\"picker\" [max]=\"getMaxdate(question)\"\r\n                [min]=\"getMindate(question)\" [(ngModel)]=\"answers[getQuestion(question).labelName]\"\r\n                (dateChange)=\"onSubmit('inputChange')\" [disabled]=\"buttonDisable || disableInput()\"\r\n                (click)=\"picker.open()\">\r\n              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n              <mat-datepicker #picker [disabled]=\"buttonDisable || disableInput()\"></mat-datepicker>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for Datagrid -->\r\n            <div class=\"table-responsive1\"\r\n              *ngIf=\"getQuestion(question).fieldDataType === 'dataGrid' && dataGridColumnsAnswerList[getQuestion(question).labelName] && dataGridColumnsAnswerList[getQuestion(question).labelName].length > 0\">\r\n              <table class=\"table table-head-custom table-head-bg table-borderless table-vertical-center\">\r\n                <thead>\r\n                  <th *ngFor=\"let column of getQuestion(question).dataGridProperties.dataGridColumns\">\r\n                    {{column.columnId}}</th>\r\n                  <th *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\r\n                  </th>\r\n                  <th *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\r\n                  </th>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let column of dataGridColumnsAnswerList[getQuestion(question).labelName];let i =index\">\r\n                    <td *ngFor=\"let data of column | keyvalue\">\r\n                      <div\r\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) === 'date'\">\r\n                        {{data.value | date : newTimeDateFormat}}\r\n                      </div>\r\n                      <div\r\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) === 'bool'\">\r\n                        {{getBoolValue(data.value)}}\r\n                      </div>\r\n                      <div\r\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) !== 'date' && getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) !== 'bool'\">\r\n                        {{data.value}}\r\n                      </div>\r\n                    </td>\r\n                    <td *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\r\n                      <i class=\"fa fa-pen\" (click)=\"editDataGrid(getQuestion(question), column)\"></i>\r\n                    </td>\r\n                    <td *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\r\n                      <i class=\"fa fa-trash\" (click)=\"deleteDataGrid(getQuestion(question), column)\"></i>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </table>\r\n            </div>\r\n            <div class=\"gridSection\" *ngIf=\"showDataGrid[getQuestion(question).labelName]\">\r\n              <div class=\"gridColumn\" *ngFor=\"let column of getQuestion(question).dataGridProperties.dataGridColumns\">\r\n                <label>{{column.label}}\r\n                  <span class=\"red\" *ngIf=\"column.mandatory\">*</span>\r\n                </label>\r\n                <!-- for checkbox -->\r\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'list'\">\r\n                  <div class=\"checkbox-list\">\r\n                    <label class=\"checkbox\" *ngFor=\"let value of column.listPropertie.values\">\r\n                      <input type=\"checkbox\" [checked]=\"isChecked(value, getQuestion(question), column)\"\r\n                        (change)=\"listChange($event, value, getQuestion(question), column)\"\r\n                        [disabled]=\"buttonDisable || disableInput()\">\r\n                      <span></span>\r\n                      {{value}}\r\n                    </label>\r\n                  </div>\r\n                </div>\r\n                <!-- for toggel boolean -->\r\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'bool'\">\r\n                  <div class=\"radio-list\">\r\n                    <label class=\"radio\">\r\n                      <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\r\n                        [checked]=\"isBooleanChecked('yes', getQuestion(question), column)\"\r\n                        (change)=\"booleanChange($event, 'yes', getQuestion(question), column)\">\r\n                      <span></span>\r\n                      Yes\r\n                    </label>\r\n                    <label class=\"radio\">\r\n                      <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\r\n                        [checked]=\"isBooleanChecked('no', getQuestion(question), column)\"\r\n                        (change)=\"booleanChange($event, 'no', getQuestion(question), column)\">\r\n                      <span></span>\r\n                      No\r\n                    </label>\r\n                  </div>\r\n                </div>\r\n                <!-- for Text -->\r\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'plainText'\">\r\n                  <input [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\r\n                    [disabled]=\"buttonDisable || disableInput()\" class=\"form-control1 form-control-solid\" type=\"text\">\r\n                </div>\r\n                <!-- for Number -->\r\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'number'\">\r\n                  <input [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\r\n                    [disabled]=\"buttonDisable || disableInput()\" [min]=\"column.numberPropertie.start\"\r\n                    [max]=\"column.numberPropertie.end\" class=\"form-control1 form-control-solid\" type=\"number\">\r\n                </div>\r\n                <!-- for Date -->\r\n                <div class=\"col-12 disp-flex\" *ngIf=\"column.dataType === 'date'\">\r\n                  <input class=\"form-control1\" [matDatepicker]=\"picker\" [max]=\"getMaxdate(question)\"\r\n                    [min]=\"getMindate(question)\"\r\n                    [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\r\n                    [disabled]=\"buttonDisable || disableInput()\" (click)=\"picker.open()\">\r\n                  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                  <mat-datepicker #picker [disabled]=\"buttonDisable || disableInput()\">\r\n                  </mat-datepicker>\r\n                </div>\r\n              </div>\r\n              <div class=\"act-btns\">\r\n                <button type=\"button\" class=\"btn btn-light-primary font-weight-bold\" id=\"btnCancelQ\"\r\n                  (click)=\"cancelAddorUpdate(getQuestion(question))\">\r\n                  Cancel\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-primary font-weight-bold\" id=\"btnSaveQ\"\r\n                  (click)=\"saveDataGridColumn(getQuestion(question))\">Add</button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-12 col-12 col-sm-12 col-lg-12 p-0 submit-pad\"\r\n        *ngIf=\"type !== 'qnrLinkProvider' && source!=='proLead' && (uuid || source === 'customer-details' || source === 'proDonation') && !disableInput()\">\r\n        <button class=\"normal-btn\" mat-flat-button [class.spinner]=\"buttonDisable\" id=\"btnSubmit\"\r\n          [class.spinner-darker-success]=\"buttonDisable\" [class.spinner-center]=\"buttonDisable\"\r\n          (click)=\"!buttonDisable && onSubmit('submit')\" [disabled]=\"buttonDisable\"\r\n          [class.disabled]=\"buttonDisable\">{{(type == 'qnr-link') ? 'Submit' : 'Update'}}</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n<div #lightGalleryContainer style=\"display: none;\"></div>\r\n<section class=\"cons-inbox no-padding-small\" *ngIf=\"showservice\">\r\n  <div class=\"container consumer-dashhome\" *ngIf=\"!type\">\r\n    <div class=\"card title-gb rounded-0\" *ngIf=\"uuid\">\r\n      <h5 class=\"mt-2 bold\">{{questionnaire_heading | capitalizeFirst}} <a class=\"pull-left me-4 back-btn\"\r\n          (click)=\"goBack()\"><i class=\"fa fa-arrow-left\"></i></a></h5>\r\n    </div>\r\n  </div>\r\n  <app-common-innerloading-spinner *ngIf=\"loading\"></app-common-innerloading-spinner>\r\n  <div class=\"d-flex flex-column-fluid pull-right me-2 mb-4\"\r\n    *ngIf=\"type !== 'qnrLinkProvider' && !buttonDisable && waitlistStatus\">\r\n    <button class=\"normal-btn edit\" mat-flat-button (click)=\"editQnr()\" id=\"btnEditQNR\">Edit</button>\r\n  </div>\r\n  <div class=\"d-flex flex-column-fluid width-100\" [class.qnrDisableState]=\"disableInput()\"\r\n    [class.p-0]=\"uuid && (source === 'consCheckin' || source === 'consAppt' || source === 'consDonationDetails' )\">\r\n    <div class=\"col-xl-12 force_center p-0\" [class.p-0]=\"uuid\"\r\n      [class.no-padding-small]=\"source && source=='ivr'\">\r\n      <div class=\"\">\r\n        <div class=\"\" *ngFor=\"let qnr of groupedQnr | keyvalue\" [class.section-shadow]=\"getSectionCount() > 1\">\r\n          <div *ngIf=\"itemArray.length == 0 \">\r\n            <div class=\"form-group mgn-0 border-dashed text-center\" *ngFor=\"let question of qnr.value\">\r\n              <div class=\"qnr-section\" *ngIf=\"getSectionCount() > 1\">\r\n                {{getQuestion(question).question.sectionName}}</div>\r\n              <label class=\"col-12 quest pointer-cursor\"\r\n                (click)=\"showDataGridAddSectionn(getQuestion(question).question, true)\">\r\n                <div>\r\n                  <img src=\"{{cdnPath}}assets/images/service-options.svg\" alt=\"Service Options\" class=\"img-fluid pb-0\"\r\n                    width=\"300\" height=\"300\">\r\n                </div>\r\n                <div class=\"pro-only\" *ngIf=\"showProviderText(getQuestion(question).question)\">For Providers</div>\r\n                <span class=\"red\" *ngIf=\"getQuestion(question).question.mandatory\">*</span>\r\n                <div>\r\n                  <span class=\"text-primary font-weight-bold\">Please Choose your Pet</span>\r\n                </div>\r\n                <div class=\"mt-3\">\r\n                  <span class=\"btn btn-light font-weight-bold\">Continue</span>\r\n                </div>\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-12 col-12 col-sm-12 mb-4 p-0\" *ngIf=\"showItem\">\r\n          <div>\r\n            <div class=\"card-border\" *ngFor=\" let items of itemArray\">\r\n\r\n              <div class=\"d-flex justify-content-between\">\r\n                <div>\r\n                  <div class=\"text-capitalize\">\r\n                    <div class=\"\">\r\n                      <span class=\"text-primary\">\r\n                        {{items.item}}<br>\r\n                      </span>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex border-apply px-0\">\r\n                  <div (click)=\"decrement(items);\" class=\"pointer-cursor quantity quantity-1\">\r\n                    <span class=\"p-10\">-</span>\r\n                  </div>\r\n                  <div class=\"mx-2 pointer-cursor\"><span class=\"quantity\"\r\n                      *ngIf=\"items && items.columnItem && items.columnItem[0] && items.columnItem[0].answer && items.columnItem[0].answer.dataGridList && items.columnItem[0].answer.dataGridList[0] && items.columnItem[0].answer.dataGridList[0].dataGridListColumn && items.columnItem[0].answer.dataGridList[0].dataGridListColumn[0] && items.columnItem[0].answer.dataGridList[0].dataGridListColumn[0].quantity\">\r\n                      {{items.columnItem[0].answer.dataGridList[0].dataGridListColumn[0].quantity}}</span>\r\n                  </div>\r\n                  <div (click)=\"increment(items);\" class=\"pointer-cursor quantity quantity-1\">\r\n                    <span class=\"p-10\">+</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div>\r\n                <span class=\"text-primary\"><span><i class=\"fa fa-inr\"></i>\r\n                    {{items.price * getItemQuantity(items)}}/-\r\n                  </span>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"clearfix\"></div>\r\n            <div *ngIf=\"showItem &&itemArray.length > 0\">\r\n              <div *ngFor=\"let qnr of groupedQnr | keyvalue\" [class.section-shadow]=\"getSectionCount() > 1\">\r\n                <div *ngFor=\"let question of qnr.value\">\r\n                  <label class=\"col-12 quest pointer-cursor\"\r\n                    (click)=\"showDataGridAddSectionn(getQuestion(question).question, true)\">\r\n                    <span class=\"btn btn-light font-weight-bold\"><i class=\"fa fa-plus text-white\"></i>Add</span>\r\n                  </label>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>", styles: [".dropzone{min-height:auto!important}.question-box{margin-top:10px}.btn-light{background-color:#1e4079!important;padding:5px 25px!important;color:#fff!important}.quest-outer{padding:10px}.error-msg{color:red}.upload-btn{background:#fff;border:1px solid;font-size:small}.card-border{box-shadow:0 0 5px 5px #f0f0f0!important;padding:10px 30px!important;margin:20px 10px!important;cursor:pointer!important;border-radius:10px!important}.border-apply{border:2px solid #1e4079!important;border-radius:20px!important}.quantity{font-size:20px!important;font-weight:700!important}.quantity-1:hover{background-color:#1e4079!important;color:#fff!important;font-weight:700!important;border-radius:50%!important;padding:-2px 12px!important}::ng-deep .mat-checkbox-layout{font-weight:400!important}.force_center{margin-left:auto;margin-right:auto}.input-group-text{display:-webkit-box;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.65rem 1rem;margin-bottom:0;font-size:1rem;font-weight:400;line-height:1.5;color:#3f4254;text-align:center;white-space:nowrap;background-color:#f3f6f9!important;border:1px solid #E4E6EF!important;border-radius:.42rem;border-top-left-radius:0;border-bottom-left-radius:0;cursor:pointer}.w_100{width:100%}.img_fit{width:120px;height:120px}.dropzone .dropzone-default{border:1px dashed #EBEDF3!important}.select-box{padding:10px!important;border:1px solid #E4E6EF!important;border-radius:.42rem!important}.normal-btn{padding:5px 20px;border:none!important}.edit{padding:3px 25px;border-radius:20px!important}.mgn-0{margin-left:0!important;margin-right:0!important;margin-bottom:10px!important}.quest{font-size:1.1rem!important}.mt-3 a:hover{text-decoration:underline!important}.dzimage,.dz-image{border:1px dashed #ccc}.gal_action{position:absolute;top:20px;right:-10px;background:#00000080;width:20px;height:20px;text-align:center;border-radius:50%;cursor:pointer}.single-file{padding:0!important;text-align:initial!important;border:none!important}.single-file .dz-preview{position:relative!important;display:inline-block!important;vertical-align:top!important;margin:16px!important;min-height:100px!important}.single-file .gal_action{top:-5px!important}.pro-only{float:right;color:red;font-size:.8rem}.qnrDisableState .card,.qnrDisableState .dropzone-default,.qnrDisableState .dz-image-preview{background:#eeeeee9e!important}.qnr-section{font-weight:700;padding-bottom:10px;text-transform:uppercase}.section-shadow{margin:20px 10px;padding:20px!important;box-shadow:0 0 10px #0000001f!important}.gridSection .gridColumn{padding:15px}.gridSection .gridColumn label{padding:0 12.5px!important;font-weight:400!important;color:#3f4254!important;font-size:.9rem!important}.gridSection .act-btns .btn{padding:5px 10px!important;margin:5px!important}.gridSection .act-btns{padding:0 20px}.fa-plus-circle{font-size:1.5rem!important}.addicon{color:#1e4079!important;cursor:pointer}.fa-trash,.fa-pen{color:#000!important;font-size:1rem!important}.dz-preview input{width:121px!important;border:1px solid #ccc}.submit-pad{padding:0 10px 20px!important}.form-group.card{border:1px solid #dadce063!important;border-radius:8px!important;padding:5px!important}.docname{width:120px;margin-bottom:5px;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important}@media (max-width: 750px){.normal-btn{padding:3px 10px;border:none!important}.edit{padding:2px 12px;border-radius:10px!important}}.col-xl-12,.col-12,.col-sm-12,.col-md-12,.col-lg-12{position:relative;width:100%;padding-right:12.5px;padding-left:12.5px}@media (min-width: 1200px){.col-xl-12{flex:0 0 100%;max-width:100%}}.qnrsec{padding:10px}.p-10{padding:8px!important}.form-control1{display:block!important;width:100%!important;height:calc(1.5em + 1.3rem + 2px)!important;padding:.65rem 1rem!important;font-size:1rem!important;font-weight:400!important;line-height:1.5!important;color:#3f4254!important;background-color:#fff!important;background-clip:padding-box!important;border:1px solid #E4E6EF!important;border-radius:.42rem!important;box-shadow:none!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out!important}.form-control2{display:block!important;width:100%!important;padding:.65rem 1rem!important;font-size:1rem!important;font-weight:400!important;line-height:1.5!important;color:#3f4254!important;background-color:#fff!important;background-clip:padding-box!important;border:1px solid #E4E6EF!important;border-radius:.42rem!important;box-shadow:none!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out!important}.form-group label{font-size:1rem;font-weight:400;color:#3f4254}label{display:inline-block;margin-bottom:.5rem}.col-12{flex:0 0 100%;max-width:100%}.radio-list .radio span{margin-right:.75rem}.radio>span{background-color:#ebedf3;border:1px solid transparent}.radio>span{height:18px;width:18px}.radio>span{border-radius:50%;background-color:none;display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio-list .radio{margin-bottom:1rem}.radio{display:flex;align-items:center;position:relative;text-align:left;cursor:pointer;font-size:1rem;transition:all .3s ease;margin:0}.radio>input{position:absolute;z-index:-1;opacity:0}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid #EBEDF3;border-radius:.42rem}.radio-list .radio:last-child{margin-bottom:0}@media (min-width: 992px){.col-lg-12{flex:0 0 100%;max-width:100%}}.dropzone.dropzone-default .dz-preview .dz-image{border-radius:.42rem}.btn.btn-icon i{padding:0;margin:0}.btn i{font-size:1.3rem;padding-right:.35rem;vertical-align:middle;line-height:1;display:inline-flex}.btn i{transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.text-dark-50{color:#7e8299!important}.btn.btn-icon.btn-circle{border-radius:50%}.btn.btn-light-success{color:#1bc5bd;background-color:#c9f7f5;border-color:transparent}.btn.btn-icon{display:inline-flex;align-items:center;justify-content:center;padding:0;height:calc(1.5em + 1.3rem + 2px);width:calc(1.5em + 1.3rem + 2px)}.btn{display:inline-block;font-weight:400;color:#3f4254;text-align:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.65rem 1rem;font-size:1rem;line-height:1.5;border-radius:.42rem;transition:color .3s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out,box-shadow .3s ease-in-out}.radio>input:checked~span{background-color:#1e4079}.radio>input:checked~span:after{background-color:#fff;border-color:#fff}.radio>input:checked~span:after{display:block}.radio>span:after{width:6px;height:6px}.radio>span:after{content:\"\";border-radius:100%!important}i{font-size:1.25rem;color:#b5b5c3}.dropzone{min-height:auto}.btn.btn-light-primary{background-color:#f9e2a7;border-color:transparent}.checkbox-lis .checkbox span{margin-right:.75rem}.checkbox>span{background-color:#ebedf3;border:1px solid transparent}.checkbox>span{height:18px;width:18px}.checkbox>span{background-color:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:.42rem}.checkbox>span:after{width:5px;height:10px}.checkbox>span:after{content:\"\";border-color:transparent;border-style:solid;border-width:0 2px 2px 0!important;transform:rotate(45deg);margin-top:-2px}.checkbox-list{display:flex;flex-direction:column}.checkbox>input{position:absolute;z-index:-1;opacity:0}.checkbox>input:checked~span{background-color:#1e4079}.checkbox>input:checked~span:after{border-color:#fff}.checkbox{display:flex;align-items:center;position:relative;text-align:left;cursor:pointer;font-size:1rem;transition:all .3s ease;margin:0}.add-plus{color:#fff!important}.border-dashed{padding:10px!important}.add-plus-black{color:#000!important}.plus-black .fa .fa-plus{color:#000!important;font-size:12px!important}.checkbox-list .checkbox{margin-bottom:1rem}.checkbox-list .checkbox span{margin-right:.75rem}.checkbox-list .checkbox:last-child{margin-bottom:0}.btn.btn-primary{color:#fff;background-color:#1e4079;border-color:#1e4079}.font-weight-bold{font-weight:500!important}button{font-family:inherit}.form-control1:focus{color:#3f4254!important;background-color:#fff!important;border-color:#69b3ff!important;outline:0!important}.table.table-head-bg thead th:first-child{border-radius:.42rem}.table.table-head-bg thead tr,.table.table-head-bg thead th{background-color:#f3f6f9;border-bottom:0;letter-spacing:1px}.table.table-head-custom thead tr,.table.table-head-custom thead th{font-weight:600;color:#b5b5c3!important;font-size:.9rem;text-transform:uppercase}.table thead th{font-weight:600;font-size:1rem;border-bottom-width:1px;padding-top:1rem;padding-bottom:1rem}.table th,.table td{padding:.75rem}.table.table-head-bg thead tr:last-child,.table.table-head-bg thead th:last-child{border-top-right-radius:.42rem;border-bottom-right-radius:.42rem}.table-responsive1{display:block;width:100%;overflow-x:auto}.text-white{color:#fff!important;font-size:15px!important}.details{border:2px solid #1e4079!important;border-radius:10px!important;max-width:13%}.text-primary{color:#1e4079!important}.text-link{color:#1a6888}@media (min-width: 300px) and (max-width: 750px){.item{font-size:10px!important}.item_price{font-size:9px!important}.details{border:2px solid #1e4079!important;border-radius:10px!important;max-width:23%}}@media (max-width: 450px){.item{font-size:10px!important}.item_price{font-size:9px!important}}@media (min-width: 600px) and (max-width: 992px){.items{font-size:18px!important}.item_prices{font-size:16px!important}}@media (max-width: 450px){.incre{border:2px solid blue!important;border-radius:100px!important;max-width:20.66667%!important}}.font-weight-bold{font-weight:700!important}@media (max-width: 750px){.incre{max-width:20.66667%!important}}.incre{border:2px solid blue!important;border-radius:100px!important;max-width:10.66667%}@media (max-width: 893px){.disp-none-small{display:none!important}}@media (min-width: 800px){.disp-none-large{display:none!important}}.fa-inr{font-size:15px!important;color:#1e4079!important}.text-primary{font-weight:700!important}.flaticon-upload:before{content:\"\\f11d\"}[class*=\" flaticon-\"]:before{font-family:Flaticon;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;line-height:1;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased}.dropzone{position:relative!important;display:inline-block!important;vertical-align:top!important;min-height:100px!important}.dz-image{border-radius:20px;overflow:hidden;width:120px;height:120px;position:relative;display:block;z-index:10}.dz-image{border:1px dashed #ccc}.dropzone .dz-preview .dz-success-mark,.dropzone .dz-preview .dz-error-mark{pointer-events:none;z-index:500;position:absolute;display:block;top:50%;left:50%;margin-left:-27px;margin-top:-27px}\n"], dependencies: [{ kind: "directive", type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoadingSpinnerComponent, selector: "app-common-innerloading-spinner", inputs: ["spinnerParams"] }, { kind: "component", type: i15.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i15.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i15.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i16.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i17.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i18.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "pipe", type: i12.DatePipe, name: "date" }, { kind: "pipe", type: i12.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: CapitalizeFirstPipe, name: "capitalizeFirst" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionnaireComponent, deps: [{ token: i1$6.ActivatedRoute }, { token: WordProcessor }, { token: LocalStorageService }, { token: DateTimeProcessor }, { token: i1$4.MatDialog }, { token: FileService }, { token: CommonService }, { token: QuestionaireService }, { token: ErrorMessagingService }, { token: ToastService }, { token: SharedService }, { token: JGalleryService }, { token: i13.Location }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QuestionnaireComponent, selector: "app-questionnaire", inputs: { questionnaireList: "questionnaireList", source: "source", accountId: "accountId", questionAnswers: "questionAnswers", customerDetails: "customerDetails", uuid: "uuid", type: "type", waitlistStatus: "waitlistStatus", orderStatus: "orderStatus", donationDetails: "donationDetails", service: "service", mode: "mode", tempType: "tempType", bookingType: "bookingType" }, outputs: { fileChanged: "fileChanged", returnAnswers: "returnAnswers" }, viewQueries: [{ propertyName: "file2", first: true, predicate: ["logofile1"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"cons-inbox no-padding-small\" *ngIf=\"!showservice\">\r\n  <div class=\"container consumer-dashhome p-0\" *ngIf=\"!type && source!='proLead'\">\r\n    <div class=\"card title-gb rounded-0\" *ngIf=\"uuid\">\r\n      <h5 class=\"mt-2 bold\">{{questionnaire_heading | capitalizeFirst}} <a class=\"pull-left me-4 back-btn\"\r\n          (click)=\"goBack()\"><i class=\"fa fa-arrow-left\"></i></a></h5>\r\n    </div>\r\n  </div>\r\n  <app-common-innerloading-spinner *ngIf=\"loading\"></app-common-innerloading-spinner>\r\n  <div class=\"d-flex flex-column-fluid pull-right me-2 mb-4\"\r\n    *ngIf=\"type !== 'qnrLinkProvider' && !buttonDisable && waitlistStatus\">\r\n    <button class=\"normal-btn edit\" mat-flat-button (click)=\"editQnr()\" id=\"btnEdit\">Edit</button>\r\n  </div>\r\n  <div class=\"d-flex flex-column-fluid width-100\" [class.qnrDisableState]=\"disableInput()\"\r\n    [class.p-0]=\"uuid && (source === 'consCheckin' || source === 'consAppt' || source === 'consOrder' || source === 'paper' || source === 'consDonationDetails' || source === 'ivr')\">\r\n    <div class=\"col-xl-12 force_center\" [class.p-0]=\"uuid\" [class.no-padding-small]=\"source && source=='ivr'\">\r\n      <div class=\"\">\r\n        <div class=\"qnrsec\" *ngFor=\"let qnr of groupedQnr | keyvalue: asIsOrder\"\r\n          [class.section-shadow]=\"getSectionCount() > 1\" [class.no-padding-small]=\"source && source=='ivr'\">\r\n          <div class=\"form-group card mgn-0\" *ngFor=\"let question of qnr.value\">\r\n            <label class=\"col-12 quest\">{{getQuestion(question).label}}\r\n              <i class=\"fa fa-plus-circle pull-right\" aria-hidden=\"true\"\r\n                [class.addicon]=\"!buttonDisable && !disableInput()\"\r\n                *ngIf=\"getQuestion(question).fieldDataType === 'dataGrid' && !showDataGrid[getQuestion(question).labelName]\"\r\n                (click)=\"!buttonDisable && !disableInput() && showDataGridAddSection(getQuestion(question), true)\"></i>\r\n              <div class=\"pro-only\" *ngIf=\"showProviderText(getQuestion(question))\">For Providers</div>\r\n              <span class=\"red\" *ngIf=\"getQuestion(question).mandatory\">*</span>\r\n              <div class=\"form-level-settings\" *ngIf=\"getQuestion(question).hint\"\r\n                [innerHTML]=\"getQuestion(question).hint | safeHtml\">\r\n              </div>\r\n            </label>\r\n            <!-- for file upload -->\r\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'fileUpload'\">\r\n              <mat-select multiple #deptsel [disabled]=\"buttonDisable || disableInput()\"\r\n                *ngIf=\"getQuestion(question).filePropertie.maxNoOfFile > 1 && getQuestion(question).filePropertie.minNoOfFile !== getQuestion(question).filePropertie.maxNoOfFile\"\r\n                [(ngModel)]=\"uploadFilesTemp[getQuestion(question).labelName]\" class=\"select-box\" placeholder=\"Select\">\r\n                <mat-option *ngFor=\"let document of getQuestion(question).filePropertie.allowedDocuments\"\r\n                  [value]=\"document\" (click)=\"changeImageSelected(getQuestion(question), document)\">\r\n                  {{document}}</mat-option>\r\n              </mat-select>\r\n              <div class=\"col-lg-12 col-12 col-md-12 col-sm-12 p-0 mt-4\"\r\n                *ngIf=\"getDocuments(getQuestion(question)) && getDocuments(getQuestion(question)).length > 0\">\r\n                <div class=\"dropzone dropzone-default dropzone-primary dz-clickable\"\r\n                  [class.single-file]=\"getQuestion(question).filePropertie.allowedDocuments.length==1\"\r\n                  style=\"cursor: auto;\">\r\n                  <ng-container *ngFor=\"let doc of getDocuments(getQuestion(question))\">\r\n                    <div class=\"dz-preview dz-processing dz-image-preview dz-error dz-complete\"\r\n                      *ngIf=\"getImg(getQuestion(question), doc)\">\r\n                      <div class=\"docname\" *ngIf=\"getQuestion(question).filePropertie.allowedDocuments.length > 1\">\r\n                        {{doc}}</div>\r\n                      <div class=\"dzimage pointer-cursor\" (click)=\"openAttachmentGallery(getQuestion(question), doc)\">\r\n                        <img alt=\"\" class=\"img_fit\" [src]=\"getImg(getQuestion(question), doc)\">\r\n                      </div>\r\n                      <input [disabled]=\"buttonDisable || disableInput()\" (blur)=\"onSubmit('inputChange');\"\r\n                        [(ngModel)]=\"comments[getQuestion(question).labelName + '=' + doc]\">\r\n                      <div class=\"gal_action\" *ngIf=\"!buttonDisable && !disableInput() && mode!=='read'\"\r\n                        (click)=\"changeImageSelected(getQuestion(question), doc)\">\r\n                        <i class=\"fa fa-times-circle\" aria-hidden=\"true\"></i>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"dz-preview dz-processing dz-image-preview dz-error dz-complete\"\r\n                      (click)=\"logofile1.click()\" *ngIf=\"!getImg(getQuestion(question), doc)\">\r\n                      <div class=\"docname\" *ngIf=\"getQuestion(question).filePropertie.allowedDocuments.length > 1\">\r\n                        {{doc}}</div>\r\n                      <div class=\"dz-image pointer-cursor\">\r\n                      </div>\r\n                      <input #logofile1 type=\"file\" accept=\"/*;capture=camera\" style=\"display:none;\"\r\n                        [disabled]=\"buttonDisable || disableInput()\"\r\n                        (change)=\"filesSelected($event, getQuestion(question), doc)\">\r\n                      <div class=\"dz-error-mark\">\r\n                        <a class=\"btn btn-icon btn-light-success btn-circle mr-2\"><i\r\n                            class=\"text-dark-50 flaticon-upload\"></i></a>\r\n                      </div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for checkbox -->\r\n            <div class=\"col-12\"\r\n              *ngIf=\"getQuestion(question).fieldDataType === 'list' && getQuestion(question).listPropertie.maxAnswers > 1\">\r\n              <div class=\"checkbox-list\">\r\n                <label class=\"checkbox\" *ngFor=\"let value of getQuestion(question).labelValues\">\r\n                  <input type=\"checkbox\" [checked]=\"isChecked(value, getQuestion(question))\"\r\n                    (change)=\"listChange($event, value, getQuestion(question))\"\r\n                    [disabled]=\"buttonDisable || disableInput()\">\r\n                  <span></span>\r\n                  {{value}}\r\n                </label>\r\n              </div>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for radio -->\r\n            <div class=\"col-12\"\r\n              *ngIf=\"getQuestion(question).fieldDataType === 'list' && getQuestion(question).listPropertie.maxAnswers === 1\">\r\n              <div class=\"radio-list\">\r\n                <label class=\"radio\" *ngFor=\"let value of getQuestion(question).labelValues\">\r\n                  <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\r\n                    [checked]=\"isChecked(value, getQuestion(question))\"\r\n                    (change)=\"listChange($event, value, getQuestion(question))\">\r\n                  <span></span>\r\n                  {{value}}\r\n                </label>\r\n              </div>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for toggel boolean -->\r\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'bool'\">\r\n              <div class=\"radio-list\">\r\n                <label class=\"radio\" *ngFor=\"let value of getQuestion(question).labelValues\">\r\n                  <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\r\n                    [checked]=\"isBooleanChecked(value, getQuestion(question))\"\r\n                    (change)=\"booleanChange($event, value, getQuestion(question))\">\r\n                  <span></span>\r\n                  {{value}}\r\n                </label>\r\n              </div>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for Text -->\r\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'plainText'\">\r\n              <input *ngIf=\"getQuestion(question).plainTextPropertie.maxNoOfLetter<=100\"\r\n                  [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"                  \r\n                  [minlength]=\"getQuestion(question).plainTextPropertie.minNoOfLetter\"\r\n                  [maxlength]=\"getQuestion(question).plainTextPropertie.maxNoOfLetter\"\r\n                  class=\"form-control1 form-control-solid\" type=\"text\" [disabled]=\"buttonDisable || disableInput()\">\r\n                <textarea rows=\"3\" *ngIf=\"getQuestion(question).plainTextPropertie.maxNoOfLetter>100\"\r\n                  [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"\r\n                  [minlength]=\"getQuestion(question).plainTextPropertie.minNoOfLetter\"\r\n                  [maxlength]=\"getQuestion(question).plainTextPropertie.maxNoOfLetter\" [disabled]=\"buttonDisable || disableInput()\"\r\n                  class=\"form-control2 form-control-solid\"></textarea>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for Number -->\r\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'number'\">\r\n              <input [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"\r\n                [min]=\"getQuestion(question).numberPropertie.start\" [max]=\"getQuestion(question).numberPropertie.end\"\r\n                [disabled]=\"buttonDisable || disableInput()\" class=\"form-control1 form-control-solid\" type=\"number\"\r\n                (keypress)=\"isNumeric($event)\">\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for Date -->\r\n            <div class=\"col-12 disp-flex\" *ngIf=\"getQuestion(question).fieldDataType === 'date'\">\r\n              <input class=\"form-control1\" [matDatepicker]=\"picker\" [max]=\"getMaxdate(question)\"\r\n                [min]=\"getMindate(question)\" [(ngModel)]=\"answers[getQuestion(question).labelName]\"\r\n                (dateChange)=\"onSubmit('inputChange')\" [disabled]=\"buttonDisable || disableInput()\"\r\n                (click)=\"picker.open()\">\r\n              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n              <mat-datepicker #picker [disabled]=\"buttonDisable || disableInput()\"></mat-datepicker>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for Datagrid -->\r\n            <div class=\"table-responsive1\"\r\n              *ngIf=\"getQuestion(question).fieldDataType === 'dataGrid' && dataGridColumnsAnswerList[getQuestion(question).labelName] && dataGridColumnsAnswerList[getQuestion(question).labelName].length > 0\">\r\n              <table class=\"table table-head-custom table-head-bg table-borderless table-vertical-center\">\r\n                <thead>\r\n                  <th *ngFor=\"let column of getQuestion(question).dataGridProperties.dataGridColumns\">\r\n                    {{column.columnId}}</th>\r\n                  <th *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\r\n                  </th>\r\n                  <th *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\r\n                  </th>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let column of dataGridColumnsAnswerList[getQuestion(question).labelName];let i =index\">\r\n                    <td *ngFor=\"let data of column | keyvalue\">\r\n                      <div\r\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) === 'date'\">\r\n                        {{data.value | date : newTimeDateFormat}}\r\n                      </div>\r\n                      <div\r\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) === 'bool'\">\r\n                        {{getBoolValue(data.value)}}\r\n                      </div>\r\n                      <div\r\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) !== 'date' && getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) !== 'bool'\">\r\n                        {{data.value}}\r\n                      </div>\r\n                    </td>\r\n                    <td *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\r\n                      <i class=\"fa fa-pen\" (click)=\"editDataGrid(getQuestion(question), column)\"></i>\r\n                    </td>\r\n                    <td *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\r\n                      <i class=\"fa fa-trash\" (click)=\"deleteDataGrid(getQuestion(question), column)\"></i>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </table>\r\n            </div>\r\n            <div class=\"gridSection\" *ngIf=\"showDataGrid[getQuestion(question).labelName]\">\r\n              <div class=\"gridColumn\" *ngFor=\"let column of getQuestion(question).dataGridProperties.dataGridColumns\">\r\n                <label>{{column.label}}\r\n                  <span class=\"red\" *ngIf=\"column.mandatory\">*</span>\r\n                </label>\r\n                <!-- for checkbox -->\r\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'list'\">\r\n                  <div class=\"checkbox-list\">\r\n                    <label class=\"checkbox\" *ngFor=\"let value of column.listPropertie.values\">\r\n                      <input type=\"checkbox\" [checked]=\"isChecked(value, getQuestion(question), column)\"\r\n                        (change)=\"listChange($event, value, getQuestion(question), column)\"\r\n                        [disabled]=\"buttonDisable || disableInput()\">\r\n                      <span></span>\r\n                      {{value}}\r\n                    </label>\r\n                  </div>\r\n                </div>\r\n                <!-- for toggel boolean -->\r\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'bool'\">\r\n                  <div class=\"radio-list\">\r\n                    <label class=\"radio\">\r\n                      <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\r\n                        [checked]=\"isBooleanChecked('yes', getQuestion(question), column)\"\r\n                        (change)=\"booleanChange($event, 'yes', getQuestion(question), column)\">\r\n                      <span></span>\r\n                      Yes\r\n                    </label>\r\n                    <label class=\"radio\">\r\n                      <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\r\n                        [checked]=\"isBooleanChecked('no', getQuestion(question), column)\"\r\n                        (change)=\"booleanChange($event, 'no', getQuestion(question), column)\">\r\n                      <span></span>\r\n                      No\r\n                    </label>\r\n                  </div>\r\n                </div>\r\n                <!-- for Text -->\r\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'plainText'\">\r\n                  <input [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\r\n                    [disabled]=\"buttonDisable || disableInput()\" class=\"form-control1 form-control-solid\" type=\"text\">\r\n                </div>\r\n                <!-- for Number -->\r\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'number'\">\r\n                  <input [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\r\n                    [disabled]=\"buttonDisable || disableInput()\" [min]=\"column.numberPropertie.start\"\r\n                    [max]=\"column.numberPropertie.end\" class=\"form-control1 form-control-solid\" type=\"number\">\r\n                </div>\r\n                <!-- for Date -->\r\n                <div class=\"col-12 disp-flex\" *ngIf=\"column.dataType === 'date'\">\r\n                  <input class=\"form-control1\" [matDatepicker]=\"picker\" [max]=\"getMaxdate(question)\"\r\n                    [min]=\"getMindate(question)\"\r\n                    [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\r\n                    [disabled]=\"buttonDisable || disableInput()\" (click)=\"picker.open()\">\r\n                  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                  <mat-datepicker #picker [disabled]=\"buttonDisable || disableInput()\">\r\n                  </mat-datepicker>\r\n                </div>\r\n              </div>\r\n              <div class=\"act-btns\">\r\n                <button type=\"button\" class=\"btn btn-light-primary font-weight-bold\" id=\"btnCancelQ\"\r\n                  (click)=\"cancelAddorUpdate(getQuestion(question))\">\r\n                  Cancel\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-primary font-weight-bold\" id=\"btnSaveQ\"\r\n                  (click)=\"saveDataGridColumn(getQuestion(question))\">Add</button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-12 col-12 col-sm-12 col-lg-12 p-0 submit-pad\"\r\n        *ngIf=\"type !== 'qnrLinkProvider' && source!=='proLead' && (uuid || source === 'customer-details' || source === 'proDonation') && !disableInput()\">\r\n        <button class=\"normal-btn\" mat-flat-button [class.spinner]=\"buttonDisable\" id=\"btnSubmit\"\r\n          [class.spinner-darker-success]=\"buttonDisable\" [class.spinner-center]=\"buttonDisable\"\r\n          (click)=\"!buttonDisable && onSubmit('submit')\" [disabled]=\"buttonDisable\"\r\n          [class.disabled]=\"buttonDisable\">{{(type == 'qnr-link') ? 'Submit' : 'Update'}}</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n<section class=\"cons-inbox no-padding-small\" *ngIf=\"showservice\">\r\n  <div class=\"container consumer-dashhome\" *ngIf=\"!type\">\r\n    <div class=\"card title-gb rounded-0\" *ngIf=\"uuid\">\r\n      <h5 class=\"mt-2 bold\">{{questionnaire_heading | capitalizeFirst}} <a class=\"pull-left me-4 back-btn\"\r\n          (click)=\"goBack()\"><i class=\"fa fa-arrow-left\"></i></a></h5>\r\n    </div>\r\n  </div>\r\n  <app-common-innerloading-spinner *ngIf=\"loading\"></app-common-innerloading-spinner>\r\n  <div class=\"d-flex flex-column-fluid pull-right me-2 mb-4\"\r\n    *ngIf=\"type !== 'qnrLinkProvider' && !buttonDisable && waitlistStatus\">\r\n    <button class=\"normal-btn edit\" mat-flat-button (click)=\"editQnr()\" id=\"btnEditQNR\">Edit</button>\r\n  </div>\r\n  <div class=\"d-flex flex-column-fluid width-100\" [class.qnrDisableState]=\"disableInput()\"\r\n    [class.p-0]=\"uuid && (source === 'consCheckin' || source === 'consAppt' || source === 'consDonationDetails' )\">\r\n    <div class=\"col-xl-12 force_center p-0\" [class.p-0]=\"uuid\"\r\n      [class.no-padding-small]=\"source && source=='ivr'\">\r\n      <div class=\"\">\r\n        <div class=\"\" *ngFor=\"let qnr of groupedQnr | keyvalue\" [class.section-shadow]=\"getSectionCount() > 1\">\r\n          <div *ngIf=\"itemArray.length == 0 \">\r\n            <div class=\"form-group mgn-0 border-dashed text-center\" *ngFor=\"let question of qnr.value\">\r\n              <div class=\"qnr-section\" *ngIf=\"getSectionCount() > 1\">\r\n                {{getQuestion(question).question.sectionName}}</div>\r\n              <label class=\"col-12 quest pointer-cursor\"\r\n                (click)=\"showDataGridAddSectionn(getQuestion(question).question, true)\">\r\n                <div>\r\n                  <img src=\"{{cdnPath}}assets/images/service-options.svg\" alt=\"Service Options\" class=\"img-fluid pb-0\"\r\n                    width=\"300\" height=\"300\">\r\n                </div>\r\n                <div class=\"pro-only\" *ngIf=\"showProviderText(getQuestion(question).question)\">For Providers</div>\r\n                <span class=\"red\" *ngIf=\"getQuestion(question).question.mandatory\">*</span>\r\n                <div>\r\n                  <span class=\"text-primary font-weight-bold\">Please Choose your Pet</span>\r\n                </div>\r\n                <div class=\"mt-3\">\r\n                  <span class=\"btn btn-light font-weight-bold\">Continue</span>\r\n                </div>\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-12 col-12 col-sm-12 mb-4 p-0\" *ngIf=\"showItem\">\r\n          <div>\r\n            <div class=\"card-border\" *ngFor=\" let items of itemArray\">\r\n\r\n              <div class=\"d-flex justify-content-between\">\r\n                <div>\r\n                  <div class=\"text-capitalize\">\r\n                    <div class=\"\">\r\n                      <span class=\"text-primary\">\r\n                        {{items.item}}<br>\r\n                      </span>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex border-apply px-0\">\r\n                  <div (click)=\"decrement(items);\" class=\"pointer-cursor quantity quantity-1\">\r\n                    <span class=\"p-10\">-</span>\r\n                  </div>\r\n                  <div class=\"mx-2 pointer-cursor\"><span class=\"quantity\"\r\n                      *ngIf=\"items && items.columnItem && items.columnItem[0] && items.columnItem[0].answer && items.columnItem[0].answer.dataGridList && items.columnItem[0].answer.dataGridList[0] && items.columnItem[0].answer.dataGridList[0].dataGridListColumn && items.columnItem[0].answer.dataGridList[0].dataGridListColumn[0] && items.columnItem[0].answer.dataGridList[0].dataGridListColumn[0].quantity\">\r\n                      {{items.columnItem[0].answer.dataGridList[0].dataGridListColumn[0].quantity}}</span>\r\n                  </div>\r\n                  <div (click)=\"increment(items);\" class=\"pointer-cursor quantity quantity-1\">\r\n                    <span class=\"p-10\">+</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div>\r\n                <span class=\"text-primary\"><span><i class=\"fa fa-inr\"></i>\r\n                    {{items.price * getItemQuantity(items)}}/-\r\n                  </span>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"clearfix\"></div>\r\n            <div *ngIf=\"showItem &&itemArray.length > 0\">\r\n              <div *ngFor=\"let qnr of groupedQnr | keyvalue\" [class.section-shadow]=\"getSectionCount() > 1\">\r\n                <div *ngFor=\"let question of qnr.value\">\r\n                  <label class=\"col-12 quest pointer-cursor\"\r\n                    (click)=\"showDataGridAddSectionn(getQuestion(question).question, true)\">\r\n                    <span class=\"btn btn-light font-weight-bold\"><i class=\"fa fa-plus text-white\"></i>Add</span>\r\n                  </label>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>", styles: [".dropzone{min-height:auto!important}.question-box{margin-top:10px}.btn-light{background-color:#1e4079!important;padding:5px 25px!important;color:#fff!important}.quest-outer{padding:10px}.error-msg{color:red}.upload-btn{background:#fff;border:1px solid;font-size:small}.card-border{box-shadow:0 0 5px 5px #f0f0f0!important;padding:10px 30px!important;margin:20px 10px!important;cursor:pointer!important;border-radius:10px!important}.border-apply{border:2px solid #1e4079!important;border-radius:20px!important}.quantity{font-size:20px!important;font-weight:700!important}.quantity-1:hover{background-color:#1e4079!important;color:#fff!important;font-weight:700!important;border-radius:50%!important;padding:-2px 12px!important}::ng-deep .mat-checkbox-layout{font-weight:400!important}.force_center{margin-left:auto;margin-right:auto}.input-group-text{display:-webkit-box;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.65rem 1rem;margin-bottom:0;font-size:1rem;font-weight:400;line-height:1.5;color:#3f4254;text-align:center;white-space:nowrap;background-color:#f3f6f9!important;border:1px solid #E4E6EF!important;border-radius:.42rem;border-top-left-radius:0;border-bottom-left-radius:0;cursor:pointer}.w_100{width:100%}.img_fit{width:120px;height:120px}.dropzone .dropzone-default{border:1px dashed #EBEDF3!important}.select-box{padding:10px!important;border:1px solid #E4E6EF!important;border-radius:.42rem!important}.normal-btn{padding:5px 20px;border:none!important}.edit{padding:3px 25px;border-radius:20px!important}.mgn-0{margin-left:0!important;margin-right:0!important;margin-bottom:10px!important}.quest{font-size:1.1rem!important}.mt-3 a:hover{text-decoration:underline!important}.dzimage,.dz-image{border:1px dashed #ccc}.gal_action{position:absolute;top:20px;right:-10px;background:#00000080;width:20px;height:20px;text-align:center;border-radius:50%;cursor:pointer}.single-file{padding:0!important;text-align:initial!important;border:none!important}.single-file .dz-preview{position:relative!important;display:inline-block!important;vertical-align:top!important;margin:16px!important;min-height:100px!important}.single-file .gal_action{top:-5px!important}.pro-only{float:right;color:red;font-size:.8rem}.qnrDisableState .card,.qnrDisableState .dropzone-default,.qnrDisableState .dz-image-preview{background:#eeeeee9e!important}.qnr-section{font-weight:700;padding-bottom:10px;text-transform:uppercase}.section-shadow{margin:20px 10px;padding:20px!important;box-shadow:0 0 10px #0000001f!important}.gridSection .gridColumn{padding:15px}.gridSection .gridColumn label{padding:0 12.5px!important;font-weight:400!important;color:#3f4254!important;font-size:.9rem!important}.gridSection .act-btns .btn{padding:5px 10px!important;margin:5px!important}.gridSection .act-btns{padding:0 20px}.fa-plus-circle{font-size:1.5rem!important}.addicon{color:#1e4079!important;cursor:pointer}.fa-trash,.fa-pen{color:#000!important;font-size:1rem!important}.dz-preview input{width:121px!important;border:1px solid #ccc}.submit-pad{padding:0 10px 20px!important}.form-group.card{border:1px solid #dadce063!important;border-radius:8px!important;padding:5px!important}.docname{width:120px;margin-bottom:5px;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important}@media (max-width: 750px){.normal-btn{padding:3px 10px;border:none!important}.edit{padding:2px 12px;border-radius:10px!important}}.col-xl-12,.col-12,.col-sm-12,.col-md-12,.col-lg-12{position:relative;width:100%;padding-right:12.5px;padding-left:12.5px}@media (min-width: 1200px){.col-xl-12{flex:0 0 100%;max-width:100%}}.qnrsec{padding:10px}.p-10{padding:8px!important}.form-control1{display:block!important;width:100%!important;height:calc(1.5em + 1.3rem + 2px)!important;padding:.65rem 1rem!important;font-size:1rem!important;font-weight:400!important;line-height:1.5!important;color:#3f4254!important;background-color:#fff!important;background-clip:padding-box!important;border:1px solid #E4E6EF!important;border-radius:.42rem!important;box-shadow:none!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out!important}.form-control2{display:block!important;width:100%!important;padding:.65rem 1rem!important;font-size:1rem!important;font-weight:400!important;line-height:1.5!important;color:#3f4254!important;background-color:#fff!important;background-clip:padding-box!important;border:1px solid #E4E6EF!important;border-radius:.42rem!important;box-shadow:none!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out!important}.form-group label{font-size:1rem;font-weight:400;color:#3f4254}label{display:inline-block;margin-bottom:.5rem}.col-12{flex:0 0 100%;max-width:100%}.radio-list .radio span{margin-right:.75rem}.radio>span{background-color:#ebedf3;border:1px solid transparent}.radio>span{height:18px;width:18px}.radio>span{border-radius:50%;background-color:none;display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio-list .radio{margin-bottom:1rem}.radio{display:flex;align-items:center;position:relative;text-align:left;cursor:pointer;font-size:1rem;transition:all .3s ease;margin:0}.radio>input{position:absolute;z-index:-1;opacity:0}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid #EBEDF3;border-radius:.42rem}.radio-list .radio:last-child{margin-bottom:0}@media (min-width: 992px){.col-lg-12{flex:0 0 100%;max-width:100%}}.dropzone.dropzone-default .dz-preview .dz-image{border-radius:.42rem}.btn.btn-icon i{padding:0;margin:0}.btn i{font-size:1.3rem;padding-right:.35rem;vertical-align:middle;line-height:1;display:inline-flex}.btn i{transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.text-dark-50{color:#7e8299!important}.btn.btn-icon.btn-circle{border-radius:50%}.btn.btn-light-success{color:#1bc5bd;background-color:#c9f7f5;border-color:transparent}.btn.btn-icon{display:inline-flex;align-items:center;justify-content:center;padding:0;height:calc(1.5em + 1.3rem + 2px);width:calc(1.5em + 1.3rem + 2px)}.btn{display:inline-block;font-weight:400;color:#3f4254;text-align:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.65rem 1rem;font-size:1rem;line-height:1.5;border-radius:.42rem;transition:color .3s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out,box-shadow .3s ease-in-out}.radio>input:checked~span{background-color:#1e4079}.radio>input:checked~span:after{background-color:#fff;border-color:#fff}.radio>input:checked~span:after{display:block}.radio>span:after{width:6px;height:6px}.radio>span:after{content:\"\";border-radius:100%!important}i{font-size:1.25rem;color:#b5b5c3}.dropzone{min-height:auto}.btn.btn-light-primary{background-color:#f9e2a7;border-color:transparent}.checkbox-lis .checkbox span{margin-right:.75rem}.checkbox>span{background-color:#ebedf3;border:1px solid transparent}.checkbox>span{height:18px;width:18px}.checkbox>span{background-color:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:.42rem}.checkbox>span:after{width:5px;height:10px}.checkbox>span:after{content:\"\";border-color:transparent;border-style:solid;border-width:0 2px 2px 0!important;transform:rotate(45deg);margin-top:-2px}.checkbox-list{display:flex;flex-direction:column}.checkbox>input{position:absolute;z-index:-1;opacity:0}.checkbox>input:checked~span{background-color:#1e4079}.checkbox>input:checked~span:after{border-color:#fff}.checkbox{display:flex;align-items:center;position:relative;text-align:left;cursor:pointer;font-size:1rem;transition:all .3s ease;margin:0}.add-plus{color:#fff!important}.border-dashed{padding:10px!important}.add-plus-black{color:#000!important}.plus-black .fa .fa-plus{color:#000!important;font-size:12px!important}.checkbox-list .checkbox{margin-bottom:1rem}.checkbox-list .checkbox span{margin-right:.75rem}.checkbox-list .checkbox:last-child{margin-bottom:0}.btn.btn-primary{color:#fff;background-color:#1e4079;border-color:#1e4079}.font-weight-bold{font-weight:500!important}button{font-family:inherit}.form-control1:focus{color:#3f4254!important;background-color:#fff!important;border-color:#69b3ff!important;outline:0!important}.table.table-head-bg thead th:first-child{border-radius:.42rem}.table.table-head-bg thead tr,.table.table-head-bg thead th{background-color:#f3f6f9;border-bottom:0;letter-spacing:1px}.table.table-head-custom thead tr,.table.table-head-custom thead th{font-weight:600;color:#b5b5c3!important;font-size:.9rem;text-transform:uppercase}.table thead th{font-weight:600;font-size:1rem;border-bottom-width:1px;padding-top:1rem;padding-bottom:1rem}.table th,.table td{padding:.75rem}.table.table-head-bg thead tr:last-child,.table.table-head-bg thead th:last-child{border-top-right-radius:.42rem;border-bottom-right-radius:.42rem}.table-responsive1{display:block;width:100%;overflow-x:auto}.text-white{color:#fff!important;font-size:15px!important}.details{border:2px solid #1e4079!important;border-radius:10px!important;max-width:13%}.text-primary{color:#1e4079!important}.text-link{color:#1a6888}@media (min-width: 300px) and (max-width: 750px){.item{font-size:10px!important}.item_price{font-size:9px!important}.details{border:2px solid #1e4079!important;border-radius:10px!important;max-width:23%}}@media (max-width: 450px){.item{font-size:10px!important}.item_price{font-size:9px!important}}@media (min-width: 600px) and (max-width: 992px){.items{font-size:18px!important}.item_prices{font-size:16px!important}}@media (max-width: 450px){.incre{border:2px solid blue!important;border-radius:100px!important;max-width:20.66667%!important}}.font-weight-bold{font-weight:700!important}@media (max-width: 750px){.incre{max-width:20.66667%!important}}.incre{border:2px solid blue!important;border-radius:100px!important;max-width:10.66667%}@media (max-width: 893px){.disp-none-small{display:none!important}}@media (min-width: 800px){.disp-none-large{display:none!important}}.fa-inr{font-size:15px!important;color:#1e4079!important}.text-primary{font-weight:700!important}.flaticon-upload:before{content:\"\\f11d\"}[class*=\" flaticon-\"]:before{font-family:Flaticon;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;line-height:1;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased}.dropzone{position:relative!important;display:inline-block!important;vertical-align:top!important;min-height:100px!important}.dz-image{border-radius:20px;overflow:hidden;width:120px;height:120px;position:relative;display:block;z-index:10}.dz-image{border:1px dashed #ccc}.dropzone .dz-preview .dz-success-mark,.dropzone .dz-preview .dz-error-mark{pointer-events:none;z-index:500;position:absolute;display:block;top:50%;left:50%;margin-left:-27px;margin-top:-27px}\n"], dependencies: [{ kind: "directive", type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoadingSpinnerComponent, selector: "app-common-innerloading-spinner", inputs: ["spinnerParams"] }, { kind: "component", type: i16.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i16.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i16.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i17.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i18.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i19.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "pipe", type: i13.DatePipe, name: "date" }, { kind: "pipe", type: i13.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: CapitalizeFirstPipe, name: "capitalizeFirst" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionnaireComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-questionnaire', template: "<section class=\"cons-inbox no-padding-small\" *ngIf=\"!showservice\">\r\n  <div class=\"container consumer-dashhome p-0\" *ngIf=\"!type && source!='proLead'\">\r\n    <div class=\"card title-gb rounded-0\" *ngIf=\"uuid\">\r\n      <h5 class=\"mt-2 bold\">{{questionnaire_heading | capitalizeFirst}} <a class=\"pull-left me-4 back-btn\"\r\n          (click)=\"goBack()\"><i class=\"fa fa-arrow-left\"></i></a></h5>\r\n    </div>\r\n  </div>\r\n  <app-common-innerloading-spinner *ngIf=\"loading\"></app-common-innerloading-spinner>\r\n  <div class=\"d-flex flex-column-fluid pull-right me-2 mb-4\"\r\n    *ngIf=\"type !== 'qnrLinkProvider' && !buttonDisable && waitlistStatus\">\r\n    <button class=\"normal-btn edit\" mat-flat-button (click)=\"editQnr()\" id=\"btnEdit\">Edit</button>\r\n  </div>\r\n  <div class=\"d-flex flex-column-fluid width-100\" [class.qnrDisableState]=\"disableInput()\"\r\n    [class.p-0]=\"uuid && (source === 'consCheckin' || source === 'consAppt' || source === 'consOrder' || source === 'paper' || source === 'consDonationDetails' || source === 'ivr')\">\r\n    <div class=\"col-xl-12 force_center\" [class.p-0]=\"uuid\" [class.no-padding-small]=\"source && source=='ivr'\">\r\n      <div class=\"\">\r\n        <div class=\"qnrsec\" *ngFor=\"let qnr of groupedQnr | keyvalue: asIsOrder\"\r\n          [class.section-shadow]=\"getSectionCount() > 1\" [class.no-padding-small]=\"source && source=='ivr'\">\r\n          <div class=\"form-group card mgn-0\" *ngFor=\"let question of qnr.value\">\r\n            <label class=\"col-12 quest\">{{getQuestion(question).label}}\r\n              <i class=\"fa fa-plus-circle pull-right\" aria-hidden=\"true\"\r\n                [class.addicon]=\"!buttonDisable && !disableInput()\"\r\n                *ngIf=\"getQuestion(question).fieldDataType === 'dataGrid' && !showDataGrid[getQuestion(question).labelName]\"\r\n                (click)=\"!buttonDisable && !disableInput() && showDataGridAddSection(getQuestion(question), true)\"></i>\r\n              <div class=\"pro-only\" *ngIf=\"showProviderText(getQuestion(question))\">For Providers</div>\r\n              <span class=\"red\" *ngIf=\"getQuestion(question).mandatory\">*</span>\r\n              <div class=\"form-level-settings\" *ngIf=\"getQuestion(question).hint\"\r\n                [innerHTML]=\"getQuestion(question).hint | safeHtml\">\r\n              </div>\r\n            </label>\r\n            <!-- for file upload -->\r\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'fileUpload'\">\r\n              <mat-select multiple #deptsel [disabled]=\"buttonDisable || disableInput()\"\r\n                *ngIf=\"getQuestion(question).filePropertie.maxNoOfFile > 1 && getQuestion(question).filePropertie.minNoOfFile !== getQuestion(question).filePropertie.maxNoOfFile\"\r\n                [(ngModel)]=\"uploadFilesTemp[getQuestion(question).labelName]\" class=\"select-box\" placeholder=\"Select\">\r\n                <mat-option *ngFor=\"let document of getQuestion(question).filePropertie.allowedDocuments\"\r\n                  [value]=\"document\" (click)=\"changeImageSelected(getQuestion(question), document)\">\r\n                  {{document}}</mat-option>\r\n              </mat-select>\r\n              <div class=\"col-lg-12 col-12 col-md-12 col-sm-12 p-0 mt-4\"\r\n                *ngIf=\"getDocuments(getQuestion(question)) && getDocuments(getQuestion(question)).length > 0\">\r\n                <div class=\"dropzone dropzone-default dropzone-primary dz-clickable\"\r\n                  [class.single-file]=\"getQuestion(question).filePropertie.allowedDocuments.length==1\"\r\n                  style=\"cursor: auto;\">\r\n                  <ng-container *ngFor=\"let doc of getDocuments(getQuestion(question))\">\r\n                    <div class=\"dz-preview dz-processing dz-image-preview dz-error dz-complete\"\r\n                      *ngIf=\"getImg(getQuestion(question), doc)\">\r\n                      <div class=\"docname\" *ngIf=\"getQuestion(question).filePropertie.allowedDocuments.length > 1\">\r\n                        {{doc}}</div>\r\n                      <div class=\"dzimage pointer-cursor\" (click)=\"openAttachmentGallery(getQuestion(question), doc)\">\r\n                        <img alt=\"\" class=\"img_fit\" [src]=\"getImg(getQuestion(question), doc)\">\r\n                      </div>\r\n                      <input [disabled]=\"buttonDisable || disableInput()\" (blur)=\"onSubmit('inputChange');\"\r\n                        [(ngModel)]=\"comments[getQuestion(question).labelName + '=' + doc]\">\r\n                      <div class=\"gal_action\" *ngIf=\"!buttonDisable && !disableInput() && mode!=='read'\"\r\n                        (click)=\"changeImageSelected(getQuestion(question), doc)\">\r\n                        <i class=\"fa fa-times-circle\" aria-hidden=\"true\"></i>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"dz-preview dz-processing dz-image-preview dz-error dz-complete\"\r\n                      (click)=\"logofile1.click()\" *ngIf=\"!getImg(getQuestion(question), doc)\">\r\n                      <div class=\"docname\" *ngIf=\"getQuestion(question).filePropertie.allowedDocuments.length > 1\">\r\n                        {{doc}}</div>\r\n                      <div class=\"dz-image pointer-cursor\">\r\n                      </div>\r\n                      <input #logofile1 type=\"file\" accept=\"/*;capture=camera\" style=\"display:none;\"\r\n                        [disabled]=\"buttonDisable || disableInput()\"\r\n                        (change)=\"filesSelected($event, getQuestion(question), doc)\">\r\n                      <div class=\"dz-error-mark\">\r\n                        <a class=\"btn btn-icon btn-light-success btn-circle mr-2\"><i\r\n                            class=\"text-dark-50 flaticon-upload\"></i></a>\r\n                      </div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for checkbox -->\r\n            <div class=\"col-12\"\r\n              *ngIf=\"getQuestion(question).fieldDataType === 'list' && getQuestion(question).listPropertie.maxAnswers > 1\">\r\n              <div class=\"checkbox-list\">\r\n                <label class=\"checkbox\" *ngFor=\"let value of getQuestion(question).labelValues\">\r\n                  <input type=\"checkbox\" [checked]=\"isChecked(value, getQuestion(question))\"\r\n                    (change)=\"listChange($event, value, getQuestion(question))\"\r\n                    [disabled]=\"buttonDisable || disableInput()\">\r\n                  <span></span>\r\n                  {{value}}\r\n                </label>\r\n              </div>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for radio -->\r\n            <div class=\"col-12\"\r\n              *ngIf=\"getQuestion(question).fieldDataType === 'list' && getQuestion(question).listPropertie.maxAnswers === 1\">\r\n              <div class=\"radio-list\">\r\n                <label class=\"radio\" *ngFor=\"let value of getQuestion(question).labelValues\">\r\n                  <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\r\n                    [checked]=\"isChecked(value, getQuestion(question))\"\r\n                    (change)=\"listChange($event, value, getQuestion(question))\">\r\n                  <span></span>\r\n                  {{value}}\r\n                </label>\r\n              </div>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for toggel boolean -->\r\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'bool'\">\r\n              <div class=\"radio-list\">\r\n                <label class=\"radio\" *ngFor=\"let value of getQuestion(question).labelValues\">\r\n                  <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\r\n                    [checked]=\"isBooleanChecked(value, getQuestion(question))\"\r\n                    (change)=\"booleanChange($event, value, getQuestion(question))\">\r\n                  <span></span>\r\n                  {{value}}\r\n                </label>\r\n              </div>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for Text -->\r\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'plainText'\">\r\n              <input *ngIf=\"getQuestion(question).plainTextPropertie.maxNoOfLetter<=100\"\r\n                  [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"                  \r\n                  [minlength]=\"getQuestion(question).plainTextPropertie.minNoOfLetter\"\r\n                  [maxlength]=\"getQuestion(question).plainTextPropertie.maxNoOfLetter\"\r\n                  class=\"form-control1 form-control-solid\" type=\"text\" [disabled]=\"buttonDisable || disableInput()\">\r\n                <textarea rows=\"3\" *ngIf=\"getQuestion(question).plainTextPropertie.maxNoOfLetter>100\"\r\n                  [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"\r\n                  [minlength]=\"getQuestion(question).plainTextPropertie.minNoOfLetter\"\r\n                  [maxlength]=\"getQuestion(question).plainTextPropertie.maxNoOfLetter\" [disabled]=\"buttonDisable || disableInput()\"\r\n                  class=\"form-control2 form-control-solid\"></textarea>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for Number -->\r\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'number'\">\r\n              <input [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"\r\n                [min]=\"getQuestion(question).numberPropertie.start\" [max]=\"getQuestion(question).numberPropertie.end\"\r\n                [disabled]=\"buttonDisable || disableInput()\" class=\"form-control1 form-control-solid\" type=\"number\"\r\n                (keypress)=\"isNumeric($event)\">\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for Date -->\r\n            <div class=\"col-12 disp-flex\" *ngIf=\"getQuestion(question).fieldDataType === 'date'\">\r\n              <input class=\"form-control1\" [matDatepicker]=\"picker\" [max]=\"getMaxdate(question)\"\r\n                [min]=\"getMindate(question)\" [(ngModel)]=\"answers[getQuestion(question).labelName]\"\r\n                (dateChange)=\"onSubmit('inputChange')\" [disabled]=\"buttonDisable || disableInput()\"\r\n                (click)=\"picker.open()\">\r\n              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n              <mat-datepicker #picker [disabled]=\"buttonDisable || disableInput()\"></mat-datepicker>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for Datagrid -->\r\n            <div class=\"table-responsive1\"\r\n              *ngIf=\"getQuestion(question).fieldDataType === 'dataGrid' && dataGridColumnsAnswerList[getQuestion(question).labelName] && dataGridColumnsAnswerList[getQuestion(question).labelName].length > 0\">\r\n              <table class=\"table table-head-custom table-head-bg table-borderless table-vertical-center\">\r\n                <thead>\r\n                  <th *ngFor=\"let column of getQuestion(question).dataGridProperties.dataGridColumns\">\r\n                    {{column.columnId}}</th>\r\n                  <th *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\r\n                  </th>\r\n                  <th *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\r\n                  </th>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let column of dataGridColumnsAnswerList[getQuestion(question).labelName];let i =index\">\r\n                    <td *ngFor=\"let data of column | keyvalue\">\r\n                      <div\r\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) === 'date'\">\r\n                        {{data.value | date : newTimeDateFormat}}\r\n                      </div>\r\n                      <div\r\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) === 'bool'\">\r\n                        {{getBoolValue(data.value)}}\r\n                      </div>\r\n                      <div\r\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) !== 'date' && getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) !== 'bool'\">\r\n                        {{data.value}}\r\n                      </div>\r\n                    </td>\r\n                    <td *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\r\n                      <i class=\"fa fa-pen\" (click)=\"editDataGrid(getQuestion(question), column)\"></i>\r\n                    </td>\r\n                    <td *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\r\n                      <i class=\"fa fa-trash\" (click)=\"deleteDataGrid(getQuestion(question), column)\"></i>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </table>\r\n            </div>\r\n            <div class=\"gridSection\" *ngIf=\"showDataGrid[getQuestion(question).labelName]\">\r\n              <div class=\"gridColumn\" *ngFor=\"let column of getQuestion(question).dataGridProperties.dataGridColumns\">\r\n                <label>{{column.label}}\r\n                  <span class=\"red\" *ngIf=\"column.mandatory\">*</span>\r\n                </label>\r\n                <!-- for checkbox -->\r\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'list'\">\r\n                  <div class=\"checkbox-list\">\r\n                    <label class=\"checkbox\" *ngFor=\"let value of column.listPropertie.values\">\r\n                      <input type=\"checkbox\" [checked]=\"isChecked(value, getQuestion(question), column)\"\r\n                        (change)=\"listChange($event, value, getQuestion(question), column)\"\r\n                        [disabled]=\"buttonDisable || disableInput()\">\r\n                      <span></span>\r\n                      {{value}}\r\n                    </label>\r\n                  </div>\r\n                </div>\r\n                <!-- for toggel boolean -->\r\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'bool'\">\r\n                  <div class=\"radio-list\">\r\n                    <label class=\"radio\">\r\n                      <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\r\n                        [checked]=\"isBooleanChecked('yes', getQuestion(question), column)\"\r\n                        (change)=\"booleanChange($event, 'yes', getQuestion(question), column)\">\r\n                      <span></span>\r\n                      Yes\r\n                    </label>\r\n                    <label class=\"radio\">\r\n                      <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\r\n                        [checked]=\"isBooleanChecked('no', getQuestion(question), column)\"\r\n                        (change)=\"booleanChange($event, 'no', getQuestion(question), column)\">\r\n                      <span></span>\r\n                      No\r\n                    </label>\r\n                  </div>\r\n                </div>\r\n                <!-- for Text -->\r\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'plainText'\">\r\n                  <input [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\r\n                    [disabled]=\"buttonDisable || disableInput()\" class=\"form-control1 form-control-solid\" type=\"text\">\r\n                </div>\r\n                <!-- for Number -->\r\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'number'\">\r\n                  <input [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\r\n                    [disabled]=\"buttonDisable || disableInput()\" [min]=\"column.numberPropertie.start\"\r\n                    [max]=\"column.numberPropertie.end\" class=\"form-control1 form-control-solid\" type=\"number\">\r\n                </div>\r\n                <!-- for Date -->\r\n                <div class=\"col-12 disp-flex\" *ngIf=\"column.dataType === 'date'\">\r\n                  <input class=\"form-control1\" [matDatepicker]=\"picker\" [max]=\"getMaxdate(question)\"\r\n                    [min]=\"getMindate(question)\"\r\n                    [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\r\n                    [disabled]=\"buttonDisable || disableInput()\" (click)=\"picker.open()\">\r\n                  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                  <mat-datepicker #picker [disabled]=\"buttonDisable || disableInput()\">\r\n                  </mat-datepicker>\r\n                </div>\r\n              </div>\r\n              <div class=\"act-btns\">\r\n                <button type=\"button\" class=\"btn btn-light-primary font-weight-bold\" id=\"btnCancelQ\"\r\n                  (click)=\"cancelAddorUpdate(getQuestion(question))\">\r\n                  Cancel\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-primary font-weight-bold\" id=\"btnSaveQ\"\r\n                  (click)=\"saveDataGridColumn(getQuestion(question))\">Add</button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-12 col-12 col-sm-12 col-lg-12 p-0 submit-pad\"\r\n        *ngIf=\"type !== 'qnrLinkProvider' && source!=='proLead' && (uuid || source === 'customer-details' || source === 'proDonation') && !disableInput()\">\r\n        <button class=\"normal-btn\" mat-flat-button [class.spinner]=\"buttonDisable\" id=\"btnSubmit\"\r\n          [class.spinner-darker-success]=\"buttonDisable\" [class.spinner-center]=\"buttonDisable\"\r\n          (click)=\"!buttonDisable && onSubmit('submit')\" [disabled]=\"buttonDisable\"\r\n          [class.disabled]=\"buttonDisable\">{{(type == 'qnr-link') ? 'Submit' : 'Update'}}</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n<div #lightGalleryContainer style=\"display: none;\"></div>\r\n<section class=\"cons-inbox no-padding-small\" *ngIf=\"showservice\">\r\n  <div class=\"container consumer-dashhome\" *ngIf=\"!type\">\r\n    <div class=\"card title-gb rounded-0\" *ngIf=\"uuid\">\r\n      <h5 class=\"mt-2 bold\">{{questionnaire_heading | capitalizeFirst}} <a class=\"pull-left me-4 back-btn\"\r\n          (click)=\"goBack()\"><i class=\"fa fa-arrow-left\"></i></a></h5>\r\n    </div>\r\n  </div>\r\n  <app-common-innerloading-spinner *ngIf=\"loading\"></app-common-innerloading-spinner>\r\n  <div class=\"d-flex flex-column-fluid pull-right me-2 mb-4\"\r\n    *ngIf=\"type !== 'qnrLinkProvider' && !buttonDisable && waitlistStatus\">\r\n    <button class=\"normal-btn edit\" mat-flat-button (click)=\"editQnr()\" id=\"btnEditQNR\">Edit</button>\r\n  </div>\r\n  <div class=\"d-flex flex-column-fluid width-100\" [class.qnrDisableState]=\"disableInput()\"\r\n    [class.p-0]=\"uuid && (source === 'consCheckin' || source === 'consAppt' || source === 'consDonationDetails' )\">\r\n    <div class=\"col-xl-12 force_center p-0\" [class.p-0]=\"uuid\"\r\n      [class.no-padding-small]=\"source && source=='ivr'\">\r\n      <div class=\"\">\r\n        <div class=\"\" *ngFor=\"let qnr of groupedQnr | keyvalue\" [class.section-shadow]=\"getSectionCount() > 1\">\r\n          <div *ngIf=\"itemArray.length == 0 \">\r\n            <div class=\"form-group mgn-0 border-dashed text-center\" *ngFor=\"let question of qnr.value\">\r\n              <div class=\"qnr-section\" *ngIf=\"getSectionCount() > 1\">\r\n                {{getQuestion(question).question.sectionName}}</div>\r\n              <label class=\"col-12 quest pointer-cursor\"\r\n                (click)=\"showDataGridAddSectionn(getQuestion(question).question, true)\">\r\n                <div>\r\n                  <img src=\"{{cdnPath}}assets/images/service-options.svg\" alt=\"Service Options\" class=\"img-fluid pb-0\"\r\n                    width=\"300\" height=\"300\">\r\n                </div>\r\n                <div class=\"pro-only\" *ngIf=\"showProviderText(getQuestion(question).question)\">For Providers</div>\r\n                <span class=\"red\" *ngIf=\"getQuestion(question).question.mandatory\">*</span>\r\n                <div>\r\n                  <span class=\"text-primary font-weight-bold\">Please Choose your Pet</span>\r\n                </div>\r\n                <div class=\"mt-3\">\r\n                  <span class=\"btn btn-light font-weight-bold\">Continue</span>\r\n                </div>\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-12 col-12 col-sm-12 mb-4 p-0\" *ngIf=\"showItem\">\r\n          <div>\r\n            <div class=\"card-border\" *ngFor=\" let items of itemArray\">\r\n\r\n              <div class=\"d-flex justify-content-between\">\r\n                <div>\r\n                  <div class=\"text-capitalize\">\r\n                    <div class=\"\">\r\n                      <span class=\"text-primary\">\r\n                        {{items.item}}<br>\r\n                      </span>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex border-apply px-0\">\r\n                  <div (click)=\"decrement(items);\" class=\"pointer-cursor quantity quantity-1\">\r\n                    <span class=\"p-10\">-</span>\r\n                  </div>\r\n                  <div class=\"mx-2 pointer-cursor\"><span class=\"quantity\"\r\n                      *ngIf=\"items && items.columnItem && items.columnItem[0] && items.columnItem[0].answer && items.columnItem[0].answer.dataGridList && items.columnItem[0].answer.dataGridList[0] && items.columnItem[0].answer.dataGridList[0].dataGridListColumn && items.columnItem[0].answer.dataGridList[0].dataGridListColumn[0] && items.columnItem[0].answer.dataGridList[0].dataGridListColumn[0].quantity\">\r\n                      {{items.columnItem[0].answer.dataGridList[0].dataGridListColumn[0].quantity}}</span>\r\n                  </div>\r\n                  <div (click)=\"increment(items);\" class=\"pointer-cursor quantity quantity-1\">\r\n                    <span class=\"p-10\">+</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div>\r\n                <span class=\"text-primary\"><span><i class=\"fa fa-inr\"></i>\r\n                    {{items.price * getItemQuantity(items)}}/-\r\n                  </span>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"clearfix\"></div>\r\n            <div *ngIf=\"showItem &&itemArray.length > 0\">\r\n              <div *ngFor=\"let qnr of groupedQnr | keyvalue\" [class.section-shadow]=\"getSectionCount() > 1\">\r\n                <div *ngFor=\"let question of qnr.value\">\r\n                  <label class=\"col-12 quest pointer-cursor\"\r\n                    (click)=\"showDataGridAddSectionn(getQuestion(question).question, true)\">\r\n                    <span class=\"btn btn-light font-weight-bold\"><i class=\"fa fa-plus text-white\"></i>Add</span>\r\n                  </label>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>", styles: [".dropzone{min-height:auto!important}.question-box{margin-top:10px}.btn-light{background-color:#1e4079!important;padding:5px 25px!important;color:#fff!important}.quest-outer{padding:10px}.error-msg{color:red}.upload-btn{background:#fff;border:1px solid;font-size:small}.card-border{box-shadow:0 0 5px 5px #f0f0f0!important;padding:10px 30px!important;margin:20px 10px!important;cursor:pointer!important;border-radius:10px!important}.border-apply{border:2px solid #1e4079!important;border-radius:20px!important}.quantity{font-size:20px!important;font-weight:700!important}.quantity-1:hover{background-color:#1e4079!important;color:#fff!important;font-weight:700!important;border-radius:50%!important;padding:-2px 12px!important}::ng-deep .mat-checkbox-layout{font-weight:400!important}.force_center{margin-left:auto;margin-right:auto}.input-group-text{display:-webkit-box;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.65rem 1rem;margin-bottom:0;font-size:1rem;font-weight:400;line-height:1.5;color:#3f4254;text-align:center;white-space:nowrap;background-color:#f3f6f9!important;border:1px solid #E4E6EF!important;border-radius:.42rem;border-top-left-radius:0;border-bottom-left-radius:0;cursor:pointer}.w_100{width:100%}.img_fit{width:120px;height:120px}.dropzone .dropzone-default{border:1px dashed #EBEDF3!important}.select-box{padding:10px!important;border:1px solid #E4E6EF!important;border-radius:.42rem!important}.normal-btn{padding:5px 20px;border:none!important}.edit{padding:3px 25px;border-radius:20px!important}.mgn-0{margin-left:0!important;margin-right:0!important;margin-bottom:10px!important}.quest{font-size:1.1rem!important}.mt-3 a:hover{text-decoration:underline!important}.dzimage,.dz-image{border:1px dashed #ccc}.gal_action{position:absolute;top:20px;right:-10px;background:#00000080;width:20px;height:20px;text-align:center;border-radius:50%;cursor:pointer}.single-file{padding:0!important;text-align:initial!important;border:none!important}.single-file .dz-preview{position:relative!important;display:inline-block!important;vertical-align:top!important;margin:16px!important;min-height:100px!important}.single-file .gal_action{top:-5px!important}.pro-only{float:right;color:red;font-size:.8rem}.qnrDisableState .card,.qnrDisableState .dropzone-default,.qnrDisableState .dz-image-preview{background:#eeeeee9e!important}.qnr-section{font-weight:700;padding-bottom:10px;text-transform:uppercase}.section-shadow{margin:20px 10px;padding:20px!important;box-shadow:0 0 10px #0000001f!important}.gridSection .gridColumn{padding:15px}.gridSection .gridColumn label{padding:0 12.5px!important;font-weight:400!important;color:#3f4254!important;font-size:.9rem!important}.gridSection .act-btns .btn{padding:5px 10px!important;margin:5px!important}.gridSection .act-btns{padding:0 20px}.fa-plus-circle{font-size:1.5rem!important}.addicon{color:#1e4079!important;cursor:pointer}.fa-trash,.fa-pen{color:#000!important;font-size:1rem!important}.dz-preview input{width:121px!important;border:1px solid #ccc}.submit-pad{padding:0 10px 20px!important}.form-group.card{border:1px solid #dadce063!important;border-radius:8px!important;padding:5px!important}.docname{width:120px;margin-bottom:5px;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important}@media (max-width: 750px){.normal-btn{padding:3px 10px;border:none!important}.edit{padding:2px 12px;border-radius:10px!important}}.col-xl-12,.col-12,.col-sm-12,.col-md-12,.col-lg-12{position:relative;width:100%;padding-right:12.5px;padding-left:12.5px}@media (min-width: 1200px){.col-xl-12{flex:0 0 100%;max-width:100%}}.qnrsec{padding:10px}.p-10{padding:8px!important}.form-control1{display:block!important;width:100%!important;height:calc(1.5em + 1.3rem + 2px)!important;padding:.65rem 1rem!important;font-size:1rem!important;font-weight:400!important;line-height:1.5!important;color:#3f4254!important;background-color:#fff!important;background-clip:padding-box!important;border:1px solid #E4E6EF!important;border-radius:.42rem!important;box-shadow:none!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out!important}.form-control2{display:block!important;width:100%!important;padding:.65rem 1rem!important;font-size:1rem!important;font-weight:400!important;line-height:1.5!important;color:#3f4254!important;background-color:#fff!important;background-clip:padding-box!important;border:1px solid #E4E6EF!important;border-radius:.42rem!important;box-shadow:none!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out!important}.form-group label{font-size:1rem;font-weight:400;color:#3f4254}label{display:inline-block;margin-bottom:.5rem}.col-12{flex:0 0 100%;max-width:100%}.radio-list .radio span{margin-right:.75rem}.radio>span{background-color:#ebedf3;border:1px solid transparent}.radio>span{height:18px;width:18px}.radio>span{border-radius:50%;background-color:none;display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio-list .radio{margin-bottom:1rem}.radio{display:flex;align-items:center;position:relative;text-align:left;cursor:pointer;font-size:1rem;transition:all .3s ease;margin:0}.radio>input{position:absolute;z-index:-1;opacity:0}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid #EBEDF3;border-radius:.42rem}.radio-list .radio:last-child{margin-bottom:0}@media (min-width: 992px){.col-lg-12{flex:0 0 100%;max-width:100%}}.dropzone.dropzone-default .dz-preview .dz-image{border-radius:.42rem}.btn.btn-icon i{padding:0;margin:0}.btn i{font-size:1.3rem;padding-right:.35rem;vertical-align:middle;line-height:1;display:inline-flex}.btn i{transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.text-dark-50{color:#7e8299!important}.btn.btn-icon.btn-circle{border-radius:50%}.btn.btn-light-success{color:#1bc5bd;background-color:#c9f7f5;border-color:transparent}.btn.btn-icon{display:inline-flex;align-items:center;justify-content:center;padding:0;height:calc(1.5em + 1.3rem + 2px);width:calc(1.5em + 1.3rem + 2px)}.btn{display:inline-block;font-weight:400;color:#3f4254;text-align:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.65rem 1rem;font-size:1rem;line-height:1.5;border-radius:.42rem;transition:color .3s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out,box-shadow .3s ease-in-out}.radio>input:checked~span{background-color:#1e4079}.radio>input:checked~span:after{background-color:#fff;border-color:#fff}.radio>input:checked~span:after{display:block}.radio>span:after{width:6px;height:6px}.radio>span:after{content:\"\";border-radius:100%!important}i{font-size:1.25rem;color:#b5b5c3}.dropzone{min-height:auto}.btn.btn-light-primary{background-color:#f9e2a7;border-color:transparent}.checkbox-lis .checkbox span{margin-right:.75rem}.checkbox>span{background-color:#ebedf3;border:1px solid transparent}.checkbox>span{height:18px;width:18px}.checkbox>span{background-color:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:.42rem}.checkbox>span:after{width:5px;height:10px}.checkbox>span:after{content:\"\";border-color:transparent;border-style:solid;border-width:0 2px 2px 0!important;transform:rotate(45deg);margin-top:-2px}.checkbox-list{display:flex;flex-direction:column}.checkbox>input{position:absolute;z-index:-1;opacity:0}.checkbox>input:checked~span{background-color:#1e4079}.checkbox>input:checked~span:after{border-color:#fff}.checkbox{display:flex;align-items:center;position:relative;text-align:left;cursor:pointer;font-size:1rem;transition:all .3s ease;margin:0}.add-plus{color:#fff!important}.border-dashed{padding:10px!important}.add-plus-black{color:#000!important}.plus-black .fa .fa-plus{color:#000!important;font-size:12px!important}.checkbox-list .checkbox{margin-bottom:1rem}.checkbox-list .checkbox span{margin-right:.75rem}.checkbox-list .checkbox:last-child{margin-bottom:0}.btn.btn-primary{color:#fff;background-color:#1e4079;border-color:#1e4079}.font-weight-bold{font-weight:500!important}button{font-family:inherit}.form-control1:focus{color:#3f4254!important;background-color:#fff!important;border-color:#69b3ff!important;outline:0!important}.table.table-head-bg thead th:first-child{border-radius:.42rem}.table.table-head-bg thead tr,.table.table-head-bg thead th{background-color:#f3f6f9;border-bottom:0;letter-spacing:1px}.table.table-head-custom thead tr,.table.table-head-custom thead th{font-weight:600;color:#b5b5c3!important;font-size:.9rem;text-transform:uppercase}.table thead th{font-weight:600;font-size:1rem;border-bottom-width:1px;padding-top:1rem;padding-bottom:1rem}.table th,.table td{padding:.75rem}.table.table-head-bg thead tr:last-child,.table.table-head-bg thead th:last-child{border-top-right-radius:.42rem;border-bottom-right-radius:.42rem}.table-responsive1{display:block;width:100%;overflow-x:auto}.text-white{color:#fff!important;font-size:15px!important}.details{border:2px solid #1e4079!important;border-radius:10px!important;max-width:13%}.text-primary{color:#1e4079!important}.text-link{color:#1a6888}@media (min-width: 300px) and (max-width: 750px){.item{font-size:10px!important}.item_price{font-size:9px!important}.details{border:2px solid #1e4079!important;border-radius:10px!important;max-width:23%}}@media (max-width: 450px){.item{font-size:10px!important}.item_price{font-size:9px!important}}@media (min-width: 600px) and (max-width: 992px){.items{font-size:18px!important}.item_prices{font-size:16px!important}}@media (max-width: 450px){.incre{border:2px solid blue!important;border-radius:100px!important;max-width:20.66667%!important}}.font-weight-bold{font-weight:700!important}@media (max-width: 750px){.incre{max-width:20.66667%!important}}.incre{border:2px solid blue!important;border-radius:100px!important;max-width:10.66667%}@media (max-width: 893px){.disp-none-small{display:none!important}}@media (min-width: 800px){.disp-none-large{display:none!important}}.fa-inr{font-size:15px!important;color:#1e4079!important}.text-primary{font-weight:700!important}.flaticon-upload:before{content:\"\\f11d\"}[class*=\" flaticon-\"]:before{font-family:Flaticon;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;line-height:1;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased}.dropzone{position:relative!important;display:inline-block!important;vertical-align:top!important;min-height:100px!important}.dz-image{border-radius:20px;overflow:hidden;width:120px;height:120px;position:relative;display:block;z-index:10}.dz-image{border:1px dashed #ccc}.dropzone .dz-preview .dz-success-mark,.dropzone .dz-preview .dz-error-mark{pointer-events:none;z-index:500;position:absolute;display:block;top:50%;left:50%;margin-left:-27px;margin-top:-27px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: WordProcessor }, { type: LocalStorageService }, { type: DateTimeProcessor }, { type: i1$4.MatDialog }, { type: FileService }, { type: CommonService }, { type: QuestionaireService }, { type: ErrorMessagingService }, { type: ToastService }, { type: SharedService }, { type: i12.Location }], propDecorators: { questionnaireList: [{
+            args: [{ selector: 'app-questionnaire', template: "<section class=\"cons-inbox no-padding-small\" *ngIf=\"!showservice\">\r\n  <div class=\"container consumer-dashhome p-0\" *ngIf=\"!type && source!='proLead'\">\r\n    <div class=\"card title-gb rounded-0\" *ngIf=\"uuid\">\r\n      <h5 class=\"mt-2 bold\">{{questionnaire_heading | capitalizeFirst}} <a class=\"pull-left me-4 back-btn\"\r\n          (click)=\"goBack()\"><i class=\"fa fa-arrow-left\"></i></a></h5>\r\n    </div>\r\n  </div>\r\n  <app-common-innerloading-spinner *ngIf=\"loading\"></app-common-innerloading-spinner>\r\n  <div class=\"d-flex flex-column-fluid pull-right me-2 mb-4\"\r\n    *ngIf=\"type !== 'qnrLinkProvider' && !buttonDisable && waitlistStatus\">\r\n    <button class=\"normal-btn edit\" mat-flat-button (click)=\"editQnr()\" id=\"btnEdit\">Edit</button>\r\n  </div>\r\n  <div class=\"d-flex flex-column-fluid width-100\" [class.qnrDisableState]=\"disableInput()\"\r\n    [class.p-0]=\"uuid && (source === 'consCheckin' || source === 'consAppt' || source === 'consOrder' || source === 'paper' || source === 'consDonationDetails' || source === 'ivr')\">\r\n    <div class=\"col-xl-12 force_center\" [class.p-0]=\"uuid\" [class.no-padding-small]=\"source && source=='ivr'\">\r\n      <div class=\"\">\r\n        <div class=\"qnrsec\" *ngFor=\"let qnr of groupedQnr | keyvalue: asIsOrder\"\r\n          [class.section-shadow]=\"getSectionCount() > 1\" [class.no-padding-small]=\"source && source=='ivr'\">\r\n          <div class=\"form-group card mgn-0\" *ngFor=\"let question of qnr.value\">\r\n            <label class=\"col-12 quest\">{{getQuestion(question).label}}\r\n              <i class=\"fa fa-plus-circle pull-right\" aria-hidden=\"true\"\r\n                [class.addicon]=\"!buttonDisable && !disableInput()\"\r\n                *ngIf=\"getQuestion(question).fieldDataType === 'dataGrid' && !showDataGrid[getQuestion(question).labelName]\"\r\n                (click)=\"!buttonDisable && !disableInput() && showDataGridAddSection(getQuestion(question), true)\"></i>\r\n              <div class=\"pro-only\" *ngIf=\"showProviderText(getQuestion(question))\">For Providers</div>\r\n              <span class=\"red\" *ngIf=\"getQuestion(question).mandatory\">*</span>\r\n              <div class=\"form-level-settings\" *ngIf=\"getQuestion(question).hint\"\r\n                [innerHTML]=\"getQuestion(question).hint | safeHtml\">\r\n              </div>\r\n            </label>\r\n            <!-- for file upload -->\r\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'fileUpload'\">\r\n              <mat-select multiple #deptsel [disabled]=\"buttonDisable || disableInput()\"\r\n                *ngIf=\"getQuestion(question).filePropertie.maxNoOfFile > 1 && getQuestion(question).filePropertie.minNoOfFile !== getQuestion(question).filePropertie.maxNoOfFile\"\r\n                [(ngModel)]=\"uploadFilesTemp[getQuestion(question).labelName]\" class=\"select-box\" placeholder=\"Select\">\r\n                <mat-option *ngFor=\"let document of getQuestion(question).filePropertie.allowedDocuments\"\r\n                  [value]=\"document\" (click)=\"changeImageSelected(getQuestion(question), document)\">\r\n                  {{document}}</mat-option>\r\n              </mat-select>\r\n              <div class=\"col-lg-12 col-12 col-md-12 col-sm-12 p-0 mt-4\"\r\n                *ngIf=\"getDocuments(getQuestion(question)) && getDocuments(getQuestion(question)).length > 0\">\r\n                <div class=\"dropzone dropzone-default dropzone-primary dz-clickable\"\r\n                  [class.single-file]=\"getQuestion(question).filePropertie.allowedDocuments.length==1\"\r\n                  style=\"cursor: auto;\">\r\n                  <ng-container *ngFor=\"let doc of getDocuments(getQuestion(question))\">\r\n                    <div class=\"dz-preview dz-processing dz-image-preview dz-error dz-complete\"\r\n                      *ngIf=\"getImg(getQuestion(question), doc)\">\r\n                      <div class=\"docname\" *ngIf=\"getQuestion(question).filePropertie.allowedDocuments.length > 1\">\r\n                        {{doc}}</div>\r\n                      <div class=\"dzimage pointer-cursor\" (click)=\"openAttachmentGallery(getQuestion(question), doc)\">\r\n                        <img alt=\"\" class=\"img_fit\" [src]=\"getImg(getQuestion(question), doc)\">\r\n                      </div>\r\n                      <input [disabled]=\"buttonDisable || disableInput()\" (blur)=\"onSubmit('inputChange');\"\r\n                        [(ngModel)]=\"comments[getQuestion(question).labelName + '=' + doc]\">\r\n                      <div class=\"gal_action\" *ngIf=\"!buttonDisable && !disableInput() && mode!=='read'\"\r\n                        (click)=\"changeImageSelected(getQuestion(question), doc)\">\r\n                        <i class=\"fa fa-times-circle\" aria-hidden=\"true\"></i>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"dz-preview dz-processing dz-image-preview dz-error dz-complete\"\r\n                      (click)=\"logofile1.click()\" *ngIf=\"!getImg(getQuestion(question), doc)\">\r\n                      <div class=\"docname\" *ngIf=\"getQuestion(question).filePropertie.allowedDocuments.length > 1\">\r\n                        {{doc}}</div>\r\n                      <div class=\"dz-image pointer-cursor\">\r\n                      </div>\r\n                      <input #logofile1 type=\"file\" accept=\"/*;capture=camera\" style=\"display:none;\"\r\n                        [disabled]=\"buttonDisable || disableInput()\"\r\n                        (change)=\"filesSelected($event, getQuestion(question), doc)\">\r\n                      <div class=\"dz-error-mark\">\r\n                        <a class=\"btn btn-icon btn-light-success btn-circle mr-2\"><i\r\n                            class=\"text-dark-50 flaticon-upload\"></i></a>\r\n                      </div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for checkbox -->\r\n            <div class=\"col-12\"\r\n              *ngIf=\"getQuestion(question).fieldDataType === 'list' && getQuestion(question).listPropertie.maxAnswers > 1\">\r\n              <div class=\"checkbox-list\">\r\n                <label class=\"checkbox\" *ngFor=\"let value of getQuestion(question).labelValues\">\r\n                  <input type=\"checkbox\" [checked]=\"isChecked(value, getQuestion(question))\"\r\n                    (change)=\"listChange($event, value, getQuestion(question))\"\r\n                    [disabled]=\"buttonDisable || disableInput()\">\r\n                  <span></span>\r\n                  {{value}}\r\n                </label>\r\n              </div>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for radio -->\r\n            <div class=\"col-12\"\r\n              *ngIf=\"getQuestion(question).fieldDataType === 'list' && getQuestion(question).listPropertie.maxAnswers === 1\">\r\n              <div class=\"radio-list\">\r\n                <label class=\"radio\" *ngFor=\"let value of getQuestion(question).labelValues\">\r\n                  <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\r\n                    [checked]=\"isChecked(value, getQuestion(question))\"\r\n                    (change)=\"listChange($event, value, getQuestion(question))\">\r\n                  <span></span>\r\n                  {{value}}\r\n                </label>\r\n              </div>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for toggel boolean -->\r\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'bool'\">\r\n              <div class=\"radio-list\">\r\n                <label class=\"radio\" *ngFor=\"let value of getQuestion(question).labelValues\">\r\n                  <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\r\n                    [checked]=\"isBooleanChecked(value, getQuestion(question))\"\r\n                    (change)=\"booleanChange($event, value, getQuestion(question))\">\r\n                  <span></span>\r\n                  {{value}}\r\n                </label>\r\n              </div>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for Text -->\r\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'plainText'\">\r\n              <input *ngIf=\"getQuestion(question).plainTextPropertie.maxNoOfLetter<=100\"\r\n                  [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"                  \r\n                  [minlength]=\"getQuestion(question).plainTextPropertie.minNoOfLetter\"\r\n                  [maxlength]=\"getQuestion(question).plainTextPropertie.maxNoOfLetter\"\r\n                  class=\"form-control1 form-control-solid\" type=\"text\" [disabled]=\"buttonDisable || disableInput()\">\r\n                <textarea rows=\"3\" *ngIf=\"getQuestion(question).plainTextPropertie.maxNoOfLetter>100\"\r\n                  [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"\r\n                  [minlength]=\"getQuestion(question).plainTextPropertie.minNoOfLetter\"\r\n                  [maxlength]=\"getQuestion(question).plainTextPropertie.maxNoOfLetter\" [disabled]=\"buttonDisable || disableInput()\"\r\n                  class=\"form-control2 form-control-solid\"></textarea>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for Number -->\r\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'number'\">\r\n              <input [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"\r\n                [min]=\"getQuestion(question).numberPropertie.start\" [max]=\"getQuestion(question).numberPropertie.end\"\r\n                [disabled]=\"buttonDisable || disableInput()\" class=\"form-control1 form-control-solid\" type=\"number\"\r\n                (keypress)=\"isNumeric($event)\">\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for Date -->\r\n            <div class=\"col-12 disp-flex\" *ngIf=\"getQuestion(question).fieldDataType === 'date'\">\r\n              <input class=\"form-control1\" [matDatepicker]=\"picker\" [max]=\"getMaxdate(question)\"\r\n                [min]=\"getMindate(question)\" [(ngModel)]=\"answers[getQuestion(question).labelName]\"\r\n                (dateChange)=\"onSubmit('inputChange')\" [disabled]=\"buttonDisable || disableInput()\"\r\n                (click)=\"picker.open()\">\r\n              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n              <mat-datepicker #picker [disabled]=\"buttonDisable || disableInput()\"></mat-datepicker>\r\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\r\n                {{apiError[getQuestion(question).labelName]}}</div>\r\n            </div>\r\n            <!-- for Datagrid -->\r\n            <div class=\"table-responsive1\"\r\n              *ngIf=\"getQuestion(question).fieldDataType === 'dataGrid' && dataGridColumnsAnswerList[getQuestion(question).labelName] && dataGridColumnsAnswerList[getQuestion(question).labelName].length > 0\">\r\n              <table class=\"table table-head-custom table-head-bg table-borderless table-vertical-center\">\r\n                <thead>\r\n                  <th *ngFor=\"let column of getQuestion(question).dataGridProperties.dataGridColumns\">\r\n                    {{column.columnId}}</th>\r\n                  <th *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\r\n                  </th>\r\n                  <th *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\r\n                  </th>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let column of dataGridColumnsAnswerList[getQuestion(question).labelName];let i =index\">\r\n                    <td *ngFor=\"let data of column | keyvalue\">\r\n                      <div\r\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) === 'date'\">\r\n                        {{data.value | date : newTimeDateFormat}}\r\n                      </div>\r\n                      <div\r\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) === 'bool'\">\r\n                        {{getBoolValue(data.value)}}\r\n                      </div>\r\n                      <div\r\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) !== 'date' && getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) !== 'bool'\">\r\n                        {{data.value}}\r\n                      </div>\r\n                    </td>\r\n                    <td *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\r\n                      <i class=\"fa fa-pen\" (click)=\"editDataGrid(getQuestion(question), column)\"></i>\r\n                    </td>\r\n                    <td *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\r\n                      <i class=\"fa fa-trash\" (click)=\"deleteDataGrid(getQuestion(question), column)\"></i>\r\n                    </td>\r\n                  </tr>\r\n                </tbody>\r\n              </table>\r\n            </div>\r\n            <div class=\"gridSection\" *ngIf=\"showDataGrid[getQuestion(question).labelName]\">\r\n              <div class=\"gridColumn\" *ngFor=\"let column of getQuestion(question).dataGridProperties.dataGridColumns\">\r\n                <label>{{column.label}}\r\n                  <span class=\"red\" *ngIf=\"column.mandatory\">*</span>\r\n                </label>\r\n                <!-- for checkbox -->\r\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'list'\">\r\n                  <div class=\"checkbox-list\">\r\n                    <label class=\"checkbox\" *ngFor=\"let value of column.listPropertie.values\">\r\n                      <input type=\"checkbox\" [checked]=\"isChecked(value, getQuestion(question), column)\"\r\n                        (change)=\"listChange($event, value, getQuestion(question), column)\"\r\n                        [disabled]=\"buttonDisable || disableInput()\">\r\n                      <span></span>\r\n                      {{value}}\r\n                    </label>\r\n                  </div>\r\n                </div>\r\n                <!-- for toggel boolean -->\r\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'bool'\">\r\n                  <div class=\"radio-list\">\r\n                    <label class=\"radio\">\r\n                      <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\r\n                        [checked]=\"isBooleanChecked('yes', getQuestion(question), column)\"\r\n                        (change)=\"booleanChange($event, 'yes', getQuestion(question), column)\">\r\n                      <span></span>\r\n                      Yes\r\n                    </label>\r\n                    <label class=\"radio\">\r\n                      <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\r\n                        [checked]=\"isBooleanChecked('no', getQuestion(question), column)\"\r\n                        (change)=\"booleanChange($event, 'no', getQuestion(question), column)\">\r\n                      <span></span>\r\n                      No\r\n                    </label>\r\n                  </div>\r\n                </div>\r\n                <!-- for Text -->\r\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'plainText'\">\r\n                  <input [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\r\n                    [disabled]=\"buttonDisable || disableInput()\" class=\"form-control1 form-control-solid\" type=\"text\">\r\n                </div>\r\n                <!-- for Number -->\r\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'number'\">\r\n                  <input [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\r\n                    [disabled]=\"buttonDisable || disableInput()\" [min]=\"column.numberPropertie.start\"\r\n                    [max]=\"column.numberPropertie.end\" class=\"form-control1 form-control-solid\" type=\"number\">\r\n                </div>\r\n                <!-- for Date -->\r\n                <div class=\"col-12 disp-flex\" *ngIf=\"column.dataType === 'date'\">\r\n                  <input class=\"form-control1\" [matDatepicker]=\"picker\" [max]=\"getMaxdate(question)\"\r\n                    [min]=\"getMindate(question)\"\r\n                    [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\r\n                    [disabled]=\"buttonDisable || disableInput()\" (click)=\"picker.open()\">\r\n                  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                  <mat-datepicker #picker [disabled]=\"buttonDisable || disableInput()\">\r\n                  </mat-datepicker>\r\n                </div>\r\n              </div>\r\n              <div class=\"act-btns\">\r\n                <button type=\"button\" class=\"btn btn-light-primary font-weight-bold\" id=\"btnCancelQ\"\r\n                  (click)=\"cancelAddorUpdate(getQuestion(question))\">\r\n                  Cancel\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-primary font-weight-bold\" id=\"btnSaveQ\"\r\n                  (click)=\"saveDataGridColumn(getQuestion(question))\">Add</button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-12 col-12 col-sm-12 col-lg-12 p-0 submit-pad\"\r\n        *ngIf=\"type !== 'qnrLinkProvider' && source!=='proLead' && (uuid || source === 'customer-details' || source === 'proDonation') && !disableInput()\">\r\n        <button class=\"normal-btn\" mat-flat-button [class.spinner]=\"buttonDisable\" id=\"btnSubmit\"\r\n          [class.spinner-darker-success]=\"buttonDisable\" [class.spinner-center]=\"buttonDisable\"\r\n          (click)=\"!buttonDisable && onSubmit('submit')\" [disabled]=\"buttonDisable\"\r\n          [class.disabled]=\"buttonDisable\">{{(type == 'qnr-link') ? 'Submit' : 'Update'}}</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n<section class=\"cons-inbox no-padding-small\" *ngIf=\"showservice\">\r\n  <div class=\"container consumer-dashhome\" *ngIf=\"!type\">\r\n    <div class=\"card title-gb rounded-0\" *ngIf=\"uuid\">\r\n      <h5 class=\"mt-2 bold\">{{questionnaire_heading | capitalizeFirst}} <a class=\"pull-left me-4 back-btn\"\r\n          (click)=\"goBack()\"><i class=\"fa fa-arrow-left\"></i></a></h5>\r\n    </div>\r\n  </div>\r\n  <app-common-innerloading-spinner *ngIf=\"loading\"></app-common-innerloading-spinner>\r\n  <div class=\"d-flex flex-column-fluid pull-right me-2 mb-4\"\r\n    *ngIf=\"type !== 'qnrLinkProvider' && !buttonDisable && waitlistStatus\">\r\n    <button class=\"normal-btn edit\" mat-flat-button (click)=\"editQnr()\" id=\"btnEditQNR\">Edit</button>\r\n  </div>\r\n  <div class=\"d-flex flex-column-fluid width-100\" [class.qnrDisableState]=\"disableInput()\"\r\n    [class.p-0]=\"uuid && (source === 'consCheckin' || source === 'consAppt' || source === 'consDonationDetails' )\">\r\n    <div class=\"col-xl-12 force_center p-0\" [class.p-0]=\"uuid\"\r\n      [class.no-padding-small]=\"source && source=='ivr'\">\r\n      <div class=\"\">\r\n        <div class=\"\" *ngFor=\"let qnr of groupedQnr | keyvalue\" [class.section-shadow]=\"getSectionCount() > 1\">\r\n          <div *ngIf=\"itemArray.length == 0 \">\r\n            <div class=\"form-group mgn-0 border-dashed text-center\" *ngFor=\"let question of qnr.value\">\r\n              <div class=\"qnr-section\" *ngIf=\"getSectionCount() > 1\">\r\n                {{getQuestion(question).question.sectionName}}</div>\r\n              <label class=\"col-12 quest pointer-cursor\"\r\n                (click)=\"showDataGridAddSectionn(getQuestion(question).question, true)\">\r\n                <div>\r\n                  <img src=\"{{cdnPath}}assets/images/service-options.svg\" alt=\"Service Options\" class=\"img-fluid pb-0\"\r\n                    width=\"300\" height=\"300\">\r\n                </div>\r\n                <div class=\"pro-only\" *ngIf=\"showProviderText(getQuestion(question).question)\">For Providers</div>\r\n                <span class=\"red\" *ngIf=\"getQuestion(question).question.mandatory\">*</span>\r\n                <div>\r\n                  <span class=\"text-primary font-weight-bold\">Please Choose your Pet</span>\r\n                </div>\r\n                <div class=\"mt-3\">\r\n                  <span class=\"btn btn-light font-weight-bold\">Continue</span>\r\n                </div>\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-12 col-12 col-sm-12 mb-4 p-0\" *ngIf=\"showItem\">\r\n          <div>\r\n            <div class=\"card-border\" *ngFor=\" let items of itemArray\">\r\n\r\n              <div class=\"d-flex justify-content-between\">\r\n                <div>\r\n                  <div class=\"text-capitalize\">\r\n                    <div class=\"\">\r\n                      <span class=\"text-primary\">\r\n                        {{items.item}}<br>\r\n                      </span>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex border-apply px-0\">\r\n                  <div (click)=\"decrement(items);\" class=\"pointer-cursor quantity quantity-1\">\r\n                    <span class=\"p-10\">-</span>\r\n                  </div>\r\n                  <div class=\"mx-2 pointer-cursor\"><span class=\"quantity\"\r\n                      *ngIf=\"items && items.columnItem && items.columnItem[0] && items.columnItem[0].answer && items.columnItem[0].answer.dataGridList && items.columnItem[0].answer.dataGridList[0] && items.columnItem[0].answer.dataGridList[0].dataGridListColumn && items.columnItem[0].answer.dataGridList[0].dataGridListColumn[0] && items.columnItem[0].answer.dataGridList[0].dataGridListColumn[0].quantity\">\r\n                      {{items.columnItem[0].answer.dataGridList[0].dataGridListColumn[0].quantity}}</span>\r\n                  </div>\r\n                  <div (click)=\"increment(items);\" class=\"pointer-cursor quantity quantity-1\">\r\n                    <span class=\"p-10\">+</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div>\r\n                <span class=\"text-primary\"><span><i class=\"fa fa-inr\"></i>\r\n                    {{items.price * getItemQuantity(items)}}/-\r\n                  </span>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"clearfix\"></div>\r\n            <div *ngIf=\"showItem &&itemArray.length > 0\">\r\n              <div *ngFor=\"let qnr of groupedQnr | keyvalue\" [class.section-shadow]=\"getSectionCount() > 1\">\r\n                <div *ngFor=\"let question of qnr.value\">\r\n                  <label class=\"col-12 quest pointer-cursor\"\r\n                    (click)=\"showDataGridAddSectionn(getQuestion(question).question, true)\">\r\n                    <span class=\"btn btn-light font-weight-bold\"><i class=\"fa fa-plus text-white\"></i>Add</span>\r\n                  </label>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>", styles: [".dropzone{min-height:auto!important}.question-box{margin-top:10px}.btn-light{background-color:#1e4079!important;padding:5px 25px!important;color:#fff!important}.quest-outer{padding:10px}.error-msg{color:red}.upload-btn{background:#fff;border:1px solid;font-size:small}.card-border{box-shadow:0 0 5px 5px #f0f0f0!important;padding:10px 30px!important;margin:20px 10px!important;cursor:pointer!important;border-radius:10px!important}.border-apply{border:2px solid #1e4079!important;border-radius:20px!important}.quantity{font-size:20px!important;font-weight:700!important}.quantity-1:hover{background-color:#1e4079!important;color:#fff!important;font-weight:700!important;border-radius:50%!important;padding:-2px 12px!important}::ng-deep .mat-checkbox-layout{font-weight:400!important}.force_center{margin-left:auto;margin-right:auto}.input-group-text{display:-webkit-box;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.65rem 1rem;margin-bottom:0;font-size:1rem;font-weight:400;line-height:1.5;color:#3f4254;text-align:center;white-space:nowrap;background-color:#f3f6f9!important;border:1px solid #E4E6EF!important;border-radius:.42rem;border-top-left-radius:0;border-bottom-left-radius:0;cursor:pointer}.w_100{width:100%}.img_fit{width:120px;height:120px}.dropzone .dropzone-default{border:1px dashed #EBEDF3!important}.select-box{padding:10px!important;border:1px solid #E4E6EF!important;border-radius:.42rem!important}.normal-btn{padding:5px 20px;border:none!important}.edit{padding:3px 25px;border-radius:20px!important}.mgn-0{margin-left:0!important;margin-right:0!important;margin-bottom:10px!important}.quest{font-size:1.1rem!important}.mt-3 a:hover{text-decoration:underline!important}.dzimage,.dz-image{border:1px dashed #ccc}.gal_action{position:absolute;top:20px;right:-10px;background:#00000080;width:20px;height:20px;text-align:center;border-radius:50%;cursor:pointer}.single-file{padding:0!important;text-align:initial!important;border:none!important}.single-file .dz-preview{position:relative!important;display:inline-block!important;vertical-align:top!important;margin:16px!important;min-height:100px!important}.single-file .gal_action{top:-5px!important}.pro-only{float:right;color:red;font-size:.8rem}.qnrDisableState .card,.qnrDisableState .dropzone-default,.qnrDisableState .dz-image-preview{background:#eeeeee9e!important}.qnr-section{font-weight:700;padding-bottom:10px;text-transform:uppercase}.section-shadow{margin:20px 10px;padding:20px!important;box-shadow:0 0 10px #0000001f!important}.gridSection .gridColumn{padding:15px}.gridSection .gridColumn label{padding:0 12.5px!important;font-weight:400!important;color:#3f4254!important;font-size:.9rem!important}.gridSection .act-btns .btn{padding:5px 10px!important;margin:5px!important}.gridSection .act-btns{padding:0 20px}.fa-plus-circle{font-size:1.5rem!important}.addicon{color:#1e4079!important;cursor:pointer}.fa-trash,.fa-pen{color:#000!important;font-size:1rem!important}.dz-preview input{width:121px!important;border:1px solid #ccc}.submit-pad{padding:0 10px 20px!important}.form-group.card{border:1px solid #dadce063!important;border-radius:8px!important;padding:5px!important}.docname{width:120px;margin-bottom:5px;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important}@media (max-width: 750px){.normal-btn{padding:3px 10px;border:none!important}.edit{padding:2px 12px;border-radius:10px!important}}.col-xl-12,.col-12,.col-sm-12,.col-md-12,.col-lg-12{position:relative;width:100%;padding-right:12.5px;padding-left:12.5px}@media (min-width: 1200px){.col-xl-12{flex:0 0 100%;max-width:100%}}.qnrsec{padding:10px}.p-10{padding:8px!important}.form-control1{display:block!important;width:100%!important;height:calc(1.5em + 1.3rem + 2px)!important;padding:.65rem 1rem!important;font-size:1rem!important;font-weight:400!important;line-height:1.5!important;color:#3f4254!important;background-color:#fff!important;background-clip:padding-box!important;border:1px solid #E4E6EF!important;border-radius:.42rem!important;box-shadow:none!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out!important}.form-control2{display:block!important;width:100%!important;padding:.65rem 1rem!important;font-size:1rem!important;font-weight:400!important;line-height:1.5!important;color:#3f4254!important;background-color:#fff!important;background-clip:padding-box!important;border:1px solid #E4E6EF!important;border-radius:.42rem!important;box-shadow:none!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out!important}.form-group label{font-size:1rem;font-weight:400;color:#3f4254}label{display:inline-block;margin-bottom:.5rem}.col-12{flex:0 0 100%;max-width:100%}.radio-list .radio span{margin-right:.75rem}.radio>span{background-color:#ebedf3;border:1px solid transparent}.radio>span{height:18px;width:18px}.radio>span{border-radius:50%;background-color:none;display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio-list .radio{margin-bottom:1rem}.radio{display:flex;align-items:center;position:relative;text-align:left;cursor:pointer;font-size:1rem;transition:all .3s ease;margin:0}.radio>input{position:absolute;z-index:-1;opacity:0}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid #EBEDF3;border-radius:.42rem}.radio-list .radio:last-child{margin-bottom:0}@media (min-width: 992px){.col-lg-12{flex:0 0 100%;max-width:100%}}.dropzone.dropzone-default .dz-preview .dz-image{border-radius:.42rem}.btn.btn-icon i{padding:0;margin:0}.btn i{font-size:1.3rem;padding-right:.35rem;vertical-align:middle;line-height:1;display:inline-flex}.btn i{transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.text-dark-50{color:#7e8299!important}.btn.btn-icon.btn-circle{border-radius:50%}.btn.btn-light-success{color:#1bc5bd;background-color:#c9f7f5;border-color:transparent}.btn.btn-icon{display:inline-flex;align-items:center;justify-content:center;padding:0;height:calc(1.5em + 1.3rem + 2px);width:calc(1.5em + 1.3rem + 2px)}.btn{display:inline-block;font-weight:400;color:#3f4254;text-align:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.65rem 1rem;font-size:1rem;line-height:1.5;border-radius:.42rem;transition:color .3s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out,box-shadow .3s ease-in-out}.radio>input:checked~span{background-color:#1e4079}.radio>input:checked~span:after{background-color:#fff;border-color:#fff}.radio>input:checked~span:after{display:block}.radio>span:after{width:6px;height:6px}.radio>span:after{content:\"\";border-radius:100%!important}i{font-size:1.25rem;color:#b5b5c3}.dropzone{min-height:auto}.btn.btn-light-primary{background-color:#f9e2a7;border-color:transparent}.checkbox-lis .checkbox span{margin-right:.75rem}.checkbox>span{background-color:#ebedf3;border:1px solid transparent}.checkbox>span{height:18px;width:18px}.checkbox>span{background-color:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:.42rem}.checkbox>span:after{width:5px;height:10px}.checkbox>span:after{content:\"\";border-color:transparent;border-style:solid;border-width:0 2px 2px 0!important;transform:rotate(45deg);margin-top:-2px}.checkbox-list{display:flex;flex-direction:column}.checkbox>input{position:absolute;z-index:-1;opacity:0}.checkbox>input:checked~span{background-color:#1e4079}.checkbox>input:checked~span:after{border-color:#fff}.checkbox{display:flex;align-items:center;position:relative;text-align:left;cursor:pointer;font-size:1rem;transition:all .3s ease;margin:0}.add-plus{color:#fff!important}.border-dashed{padding:10px!important}.add-plus-black{color:#000!important}.plus-black .fa .fa-plus{color:#000!important;font-size:12px!important}.checkbox-list .checkbox{margin-bottom:1rem}.checkbox-list .checkbox span{margin-right:.75rem}.checkbox-list .checkbox:last-child{margin-bottom:0}.btn.btn-primary{color:#fff;background-color:#1e4079;border-color:#1e4079}.font-weight-bold{font-weight:500!important}button{font-family:inherit}.form-control1:focus{color:#3f4254!important;background-color:#fff!important;border-color:#69b3ff!important;outline:0!important}.table.table-head-bg thead th:first-child{border-radius:.42rem}.table.table-head-bg thead tr,.table.table-head-bg thead th{background-color:#f3f6f9;border-bottom:0;letter-spacing:1px}.table.table-head-custom thead tr,.table.table-head-custom thead th{font-weight:600;color:#b5b5c3!important;font-size:.9rem;text-transform:uppercase}.table thead th{font-weight:600;font-size:1rem;border-bottom-width:1px;padding-top:1rem;padding-bottom:1rem}.table th,.table td{padding:.75rem}.table.table-head-bg thead tr:last-child,.table.table-head-bg thead th:last-child{border-top-right-radius:.42rem;border-bottom-right-radius:.42rem}.table-responsive1{display:block;width:100%;overflow-x:auto}.text-white{color:#fff!important;font-size:15px!important}.details{border:2px solid #1e4079!important;border-radius:10px!important;max-width:13%}.text-primary{color:#1e4079!important}.text-link{color:#1a6888}@media (min-width: 300px) and (max-width: 750px){.item{font-size:10px!important}.item_price{font-size:9px!important}.details{border:2px solid #1e4079!important;border-radius:10px!important;max-width:23%}}@media (max-width: 450px){.item{font-size:10px!important}.item_price{font-size:9px!important}}@media (min-width: 600px) and (max-width: 992px){.items{font-size:18px!important}.item_prices{font-size:16px!important}}@media (max-width: 450px){.incre{border:2px solid blue!important;border-radius:100px!important;max-width:20.66667%!important}}.font-weight-bold{font-weight:700!important}@media (max-width: 750px){.incre{max-width:20.66667%!important}}.incre{border:2px solid blue!important;border-radius:100px!important;max-width:10.66667%}@media (max-width: 893px){.disp-none-small{display:none!important}}@media (min-width: 800px){.disp-none-large{display:none!important}}.fa-inr{font-size:15px!important;color:#1e4079!important}.text-primary{font-weight:700!important}.flaticon-upload:before{content:\"\\f11d\"}[class*=\" flaticon-\"]:before{font-family:Flaticon;font-style:normal;font-weight:400;font-feature-settings:normal;font-variant:normal;line-height:1;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased}.dropzone{position:relative!important;display:inline-block!important;vertical-align:top!important;min-height:100px!important}.dz-image{border-radius:20px;overflow:hidden;width:120px;height:120px;position:relative;display:block;z-index:10}.dz-image{border:1px dashed #ccc}.dropzone .dz-preview .dz-success-mark,.dropzone .dz-preview .dz-error-mark{pointer-events:none;z-index:500;position:absolute;display:block;top:50%;left:50%;margin-left:-27px;margin-top:-27px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: WordProcessor }, { type: LocalStorageService }, { type: DateTimeProcessor }, { type: i1$4.MatDialog }, { type: FileService }, { type: CommonService }, { type: QuestionaireService }, { type: ErrorMessagingService }, { type: ToastService }, { type: SharedService }, { type: JGalleryService }, { type: i13.Location }], propDecorators: { questionnaireList: [{
                 type: Input
             }], source: [{
                 type: Input
@@ -6369,9 +6420,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], file2: [{
                 type: ViewChild,
                 args: ['logofile1']
-            }], lightGalleryContainer: [{
-                type: ViewChild,
-                args: ['lightGalleryContainer', { static: false }]
             }] } });
 
 class SafeHtmlModule {
@@ -6390,6 +6438,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+class JGalleryModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: JGalleryModule, declarations: [JGalleryComponent], imports: [CommonModule], exports: [JGalleryComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JGalleryModule, providers: [
+            JGalleryService
+        ], imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JGalleryModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        JGalleryComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        JGalleryComponent
+                    ],
+                    providers: [
+                        JGalleryService
+                    ]
+                }]
+        }] });
+
 class QuestionnaireModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionnaireModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: QuestionnaireModule, declarations: [QuestionnaireComponent], imports: [CommonModule,
@@ -6405,7 +6478,7 @@ class QuestionnaireModule {
             SafeHtmlModule,
             ErrrorMessageModule,
             MatIconModule,
-            LightgalleryModule], exports: [QuestionnaireComponent] });
+            JGalleryModule], exports: [QuestionnaireComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionnaireModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -6419,7 +6492,7 @@ class QuestionnaireModule {
             SafeHtmlModule,
             ErrrorMessageModule,
             MatIconModule,
-            LightgalleryModule] });
+            JGalleryModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionnaireModule, decorators: [{
             type: NgModule,
@@ -6441,7 +6514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SafeHtmlModule,
                         ErrrorMessageModule,
                         MatIconModule,
-                        LightgalleryModule
+                        JGalleryModule
                     ],
                     providers: [],
                     schemas: [
@@ -6567,7 +6640,7 @@ class PhoneInputComponent {
                 useExisting: forwardRef(() => PhoneInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "phoneInput", first: true, predicate: ["phoneInput"], descendants: true }, { propertyName: "ngModelRef", first: true, predicate: NgModel, descendants: true }], ngImport: i0, template: "<div class=\"phone-input-wrapper tel-input-container\">\r\n    <input #phoneInput type=\"tel\" [(ngModel)]=\"phoneNumber.number\"\r\n        name=\"phoneNumber\" [required]=\"true\" #phone=\"ngModel\"\r\n        [ngClass]=\"{'is-invalid': !validatePhoneNumber() && phone.touched}\">\r\n\r\n    <!-- Validation feedback -->\r\n    <!-- <div *ngIf=\"!validatePhoneNumber() && phone.touched\" class=\"text-danger\">\r\n        Invalid phone number.\r\n    </div> -->\r\n</div>", styles: ["::ng-deep .tel-input-container .iti{width:100%!important}::ng-deep .tel-input-container .iti--separate-dial-code .iti__selected-flag{background-color:transparent}::ng-deep .tel-input-container input::-webkit-input-placeholder{color:#ddd}::ng-deep .tel-input-container input:focus{outline:none;border-color:#e1e2e3}::ng-deep .tel-input-container input{height:40px;width:100%;background:#fff;border:1.39032px solid #E1E2E3;border-radius:4px;padding:15px;font-size:15px}::ng-deep .tel-input-container input.is-invalid{border:1.39032px solid #ff0000}::ng-deep .tel-input-container input::placeholder{color:#ddd}::ng-deep .tel-input-container input.custom:focus{color:#495057;background-color:#fff;border-color:#3c8dbc;outline:0;box-shadow:0 0 #fff}::ng-deep .tel-input-container .iti__country-list{z-index:3}\n"], dependencies: [{ kind: "directive", type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], viewQueries: [{ propertyName: "phoneInput", first: true, predicate: ["phoneInput"], descendants: true }, { propertyName: "ngModelRef", first: true, predicate: NgModel, descendants: true }], ngImport: i0, template: "<div class=\"phone-input-wrapper tel-input-container\">\r\n    <input #phoneInput type=\"tel\" [(ngModel)]=\"phoneNumber.number\"\r\n        name=\"phoneNumber\" [required]=\"true\" #phone=\"ngModel\"\r\n        [ngClass]=\"{'is-invalid': !validatePhoneNumber() && phone.touched}\">\r\n\r\n    <!-- Validation feedback -->\r\n    <!-- <div *ngIf=\"!validatePhoneNumber() && phone.touched\" class=\"text-danger\">\r\n        Invalid phone number.\r\n    </div> -->\r\n</div>", styles: ["::ng-deep .tel-input-container .iti{width:100%!important}::ng-deep .tel-input-container .iti--separate-dial-code .iti__selected-flag{background-color:transparent}::ng-deep .tel-input-container input::-webkit-input-placeholder{color:#ddd}::ng-deep .tel-input-container input:focus{outline:none;border-color:#e1e2e3}::ng-deep .tel-input-container input{height:40px;width:100%;background:#fff;border:1.39032px solid #E1E2E3;border-radius:4px;padding:15px;font-size:15px}::ng-deep .tel-input-container input.is-invalid{border:1.39032px solid #ff0000}::ng-deep .tel-input-container input::placeholder{color:#ddd}::ng-deep .tel-input-container input.custom:focus{color:#495057;background-color:#fff;border-color:#3c8dbc;outline:0;box-shadow:0 0 #fff}::ng-deep .tel-input-container .iti__country-list{z-index:3}\n"], dependencies: [{ kind: "directive", type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PhoneInputComponent, decorators: [{
             type: Component,
@@ -6686,7 +6759,7 @@ class PaymentModesComponent {
         this.modeSelected.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaymentModesComponent, deps: [{ token: SharedService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaymentModesComponent, selector: "app-payment-modes", inputs: { cashPay: "cashPay", paymentModes: "paymentModes" }, outputs: { modeSelected: "modeSelected" }, ngImport: i0, template: "<mat-radio-group class=\"text-center mx-auto payment-mode-fw\" name=\"paymentMode\" (change)=\"paymentModeSelected($event)\">\r\n    <div *ngFor=\"let modes of paymentModes\">\r\n        <mat-radio-button class=\"pay-rad mt-1 ml-auto\" [value]=\"modes.mode\" >\r\n            <div>\r\n                <div>\r\n                    <img class=\"pay-icons\" [src]=\"getImageSrc(modes.mode)\" alt=\"\">\r\n                </div>\r\n                <div class=\"modeName\">\r\n                    <div *ngIf=\"modes.modeDisplayName === 'UPI'\">                      \r\n                        <div>{{modes.modeDisplayName |uppercase }}</div>\r\n                    </div>\r\n                    <div *ngIf=\"modes.modeDisplayName === 'Credit Card'\">\r\n                        <div>{{modes.modeDisplayName |uppercase }}</div>\r\n                    </div>\r\n                    <div *ngIf=\"modes.modeDisplayName === 'Debit Card'\">\r\n                       <div> {{modes.modeDisplayName |uppercase }}</div>\r\n                    </div>\r\n                    <div *ngIf=\"modes.modeDisplayName === 'Net Banking'\">\r\n                       <div> {{modes.modeDisplayName |uppercase }}</div>\r\n                    </div>\r\n                    <div *ngIf=\"modes.modeDisplayName === 'Wallet'\">\r\n                       <div> {{modes.modeDisplayName |uppercase }} </div>\r\n                    </div>\r\n                    <div *ngIf=\"modes.mode === 'PAYLATER'\">\r\n                       <div> {{modes.modeDisplayName |uppercase }} </div>\r\n                    </div>                   \r\n                </div>\r\n            </div>\r\n        </mat-radio-button>        \r\n    </div>\r\n    <div>\r\n        <mat-radio-button class=\"pay-rad mt-1 ml-auto\" [value]=\"'cash'\" *ngIf=\"cashPay\">\r\n            <div class=\"clearfix\"></div>\r\n            <div class=\"col-12 p-0 pay-mode \">\r\n                <div class=\"d-flex\">\r\n                    <img class=\"pay-icons\" [src]=\"getImageSrc('PAYCASH')\" alt=\"\">\r\n                </div>\r\n                <div class=\"col-12 p-0 text-center\">\r\n                    Pay by Cash\r\n                </div>\r\n            </div>\r\n        </mat-radio-button>\r\n    </div>\r\n</mat-radio-group>", styles: [".pay-rad{width:26.5%;height:100px;float:left;border:1px solid #ddd;border-radius:10px;margin:5px;font-size:10px}.pay-icons{height:50px;object-fit:scale-down!important;margin-top:5px;width:100%}::ng-deep mat-radio-button.pay-rad .mat-mdc-radio-checked{box-shadow:0 4px 8px #0000001a,0 6px 20px #0000!important;background:#f1ffff!important;border:1.25px solid #45C3D3!important;border-radius:5px!important}@media (max-width: 768px){.pay-rad{width:30%;height:100%}}@media (min-width: 768px) and (max-width: 856px){.pay-rad{width:30%;height:120px}}.font-weight-normal{font-weight:400!important}@media (max-width: 768px){.font-weight-normal{font-weight:400!important;font-size:13px!important}}::ng-deep .pay-rad .mat-radio-outer-circle,::ng-deep .pay-rad .mat-radio-inner-circle{height:15px!important;width:15px!important}::ng-deep .pay-rad .mat-radio-label{display:block!important}::ng-deep .pay-rad .mat-radio-container{display:block!important;top:5px!important;right:5px;float:right}.modeName{font-size:12px;font-weight:600}::ng-deep .payment-mode-fw .mdc-form-field{flex-direction:row-reverse}@media (max-width: 575px){::ng-deep .payment-mode-fw mat-radio-button.pay-rad .mdc-form-field{flex-direction:column!important}.pay-icons{margin-top:-5px!important}}@media (max-width: 575px){::ng-deep .payment-mode-fw .mat-mdc-radio-button .mdc-radio{margin-right:-70px!important}}@media (min-width: 576px) and (max-width: 767px){::ng-deep .payment-mode-fw .mat-mdc-radio-button .mdc-radio{margin-right:-35px!important}}\n"], dependencies: [{ kind: "directive", type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: i12.UpperCasePipe, name: "uppercase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaymentModesComponent, selector: "app-payment-modes", inputs: { cashPay: "cashPay", paymentModes: "paymentModes" }, outputs: { modeSelected: "modeSelected" }, ngImport: i0, template: "<mat-radio-group class=\"text-center mx-auto payment-mode-fw\" name=\"paymentMode\" (change)=\"paymentModeSelected($event)\">\r\n    <div *ngFor=\"let modes of paymentModes\">\r\n        <mat-radio-button class=\"pay-rad mt-1 ml-auto\" [value]=\"modes.mode\" >\r\n            <div>\r\n                <div>\r\n                    <img class=\"pay-icons\" [src]=\"getImageSrc(modes.mode)\" alt=\"\">\r\n                </div>\r\n                <div class=\"modeName\">\r\n                    <div *ngIf=\"modes.modeDisplayName === 'UPI'\">                      \r\n                        <div>{{modes.modeDisplayName |uppercase }}</div>\r\n                    </div>\r\n                    <div *ngIf=\"modes.modeDisplayName === 'Credit Card'\">\r\n                        <div>{{modes.modeDisplayName |uppercase }}</div>\r\n                    </div>\r\n                    <div *ngIf=\"modes.modeDisplayName === 'Debit Card'\">\r\n                       <div> {{modes.modeDisplayName |uppercase }}</div>\r\n                    </div>\r\n                    <div *ngIf=\"modes.modeDisplayName === 'Net Banking'\">\r\n                       <div> {{modes.modeDisplayName |uppercase }}</div>\r\n                    </div>\r\n                    <div *ngIf=\"modes.modeDisplayName === 'Wallet'\">\r\n                       <div> {{modes.modeDisplayName |uppercase }} </div>\r\n                    </div>\r\n                    <div *ngIf=\"modes.mode === 'PAYLATER'\">\r\n                       <div> {{modes.modeDisplayName |uppercase }} </div>\r\n                    </div>                   \r\n                </div>\r\n            </div>\r\n        </mat-radio-button>        \r\n    </div>\r\n    <div>\r\n        <mat-radio-button class=\"pay-rad mt-1 ml-auto\" [value]=\"'cash'\" *ngIf=\"cashPay\">\r\n            <div class=\"clearfix\"></div>\r\n            <div class=\"col-12 p-0 pay-mode \">\r\n                <div class=\"d-flex\">\r\n                    <img class=\"pay-icons\" [src]=\"getImageSrc('PAYCASH')\" alt=\"\">\r\n                </div>\r\n                <div class=\"col-12 p-0 text-center\">\r\n                    Pay by Cash\r\n                </div>\r\n            </div>\r\n        </mat-radio-button>\r\n    </div>\r\n</mat-radio-group>", styles: [".pay-rad{width:26.5%;height:100px;float:left;border:1px solid #ddd;border-radius:10px;margin:5px;font-size:10px}.pay-icons{height:50px;object-fit:scale-down!important;margin-top:5px;width:100%}::ng-deep mat-radio-button.pay-rad .mat-mdc-radio-checked{box-shadow:0 4px 8px #0000001a,0 6px 20px #0000!important;background:#f1ffff!important;border:1.25px solid #45C3D3!important;border-radius:5px!important}@media (max-width: 768px){.pay-rad{width:30%;height:100%}}@media (min-width: 768px) and (max-width: 856px){.pay-rad{width:30%;height:120px}}.font-weight-normal{font-weight:400!important}@media (max-width: 768px){.font-weight-normal{font-weight:400!important;font-size:13px!important}}::ng-deep .pay-rad .mat-radio-outer-circle,::ng-deep .pay-rad .mat-radio-inner-circle{height:15px!important;width:15px!important}::ng-deep .pay-rad .mat-radio-label{display:block!important}::ng-deep .pay-rad .mat-radio-container{display:block!important;top:5px!important;right:5px;float:right}.modeName{font-size:12px;font-weight:600}::ng-deep .payment-mode-fw .mdc-form-field{flex-direction:row-reverse}@media (max-width: 575px){::ng-deep .payment-mode-fw mat-radio-button.pay-rad .mdc-form-field{flex-direction:column!important}.pay-icons{margin-top:-5px!important}}@media (max-width: 575px){::ng-deep .payment-mode-fw .mat-mdc-radio-button .mdc-radio{margin-right:-70px!important}}@media (min-width: 576px) and (max-width: 767px){::ng-deep .payment-mode-fw .mat-mdc-radio-button .mdc-radio{margin-right:-35px!important}}\n"], dependencies: [{ kind: "directive", type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: i13.UpperCasePipe, name: "uppercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaymentModesComponent, decorators: [{
             type: Component,
@@ -6753,7 +6826,7 @@ class RequestDialogComponent {
         this.dialogRef.close('success');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RequestDialogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RequestDialogComponent, selector: "app-request-dialog", ngImport: i0, template: "<h1 class=\"mat-dialog-title head\" *ngIf=\"mode==='b-cam'\">\r\n    Your camera is blocked\r\n</h1>\r\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='b-both'\">\r\n    Camera and microphone are blocked\r\n</h1>\r\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='b-mic'\">\r\n    Your microphone are blocked\r\n</h1>\r\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='sys-mic'\">\r\n    No audio devices found\r\n</h1>\r\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='sys-cam'\">\r\n    No video devices found\r\n</h1>\r\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='sys-both'\">\r\n    No audio/video devices found\r\n</h1>\r\n<div mat-dialog-content class=\"text-container\">\r\n    <div class=\"col-md-12 no-padding text-content\" *ngIf=\"mode==='b-both' || mode==='b-cam' || mode==='b-mic'\">\r\n        <div class=\"col-md-12 mgn-bt-20 no-padding text-content-text\">\r\n            Jaldee Videocall requires access to your camera/microphone so that other participants can hear/see\r\n            you.\r\n\r\n            To unblock,\r\n\r\n            <ul>\r\n                <li>\r\n                    Make sure you close any applications in your system that currently uses your microphone/camera.\r\n                </li>\r\n                <li style=\"list-style: none !important; margin-top: 10px;margin-bottom: 10px;\">Or</li>\r\n                <li>\r\n                    Click the camera blocked icon on your browser's address bar, allow access and refresh your page.\r\n                </li>\r\n                <li style=\"list-style: none !important; margin-top: 10px;margin-bottom: 10px;\">Or</li>\r\n                <li>\r\n                    Allow access to your microphone/camera in your in your App settings.\r\n                </li>\r\n            </ul>\r\n        </div>\r\n        <div class=\"col-md-12 no-padding\">\r\n            <a class=\"pull-right dismiss-action\" (click)=\"dismissModal()\">Dismiss</a>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-md-12 no-padding text-content\" *ngIf=\"mode==='sys-both'\">\r\n        <div class=\"col-md-12 mgn-bt-20 no-padding text-content-text\">\r\n            Jaldee Videocall requires access to your camera and microphone so that other participants can see and hear\r\n            you, but no audio/video devices found.\r\n        </div>\r\n        <div class=\"col-md-12 no-padding\">\r\n            <a class=\"pull-right dismiss-action\" (click)=\"dismissModal()\">Dismiss</a>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-md-12 no-padding text-content\" *ngIf=\"mode==='sys-cam'\">\r\n        <div class=\"col-md-12 mgn-bt-20 no-padding text-content-text\">\r\n            Jaldee Videocall requires access to your camera so that other participants can hear\r\n            you, but no video devices found.\r\n        </div>\r\n        <div class=\"col-md-12 no-padding\">\r\n            <a class=\"pull-right dismiss-action\" (click)=\"dismissModal()\">Dismiss</a>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-md-12 no-padding text-content\" *ngIf=\"mode==='sys-mic'\">\r\n        <div class=\"col-md-12 mgn-bt-20 no-padding text-content-text\">\r\n            Jaldee Videocall requires access to your microphone so that other participants can hear\r\n            you but no audio devices found.\r\n        </div>\r\n        <div class=\"col-md-12 no-padding\">\r\n            <a class=\"pull-right dismiss-action\" (click)=\"dismissModal()\">Dismiss</a>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["h1.mat-dialog-title,.head{font-size:1.3rem!important}.text-content{font-size:1.25rem!important;line-height:1.5!important;letter-spacing:.1px!important;text-align:justify!important}.text-container{padding:25px!important;font-size:1.25rem!important}.text-container div{font-size:1rem!important;color:#0000008a!important}a.dismiss-action{font-size:1rem!important;font-weight:600!important}\n"], dependencies: [{ kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RequestDialogComponent, selector: "app-request-dialog", ngImport: i0, template: "<h1 class=\"mat-dialog-title head\" *ngIf=\"mode==='b-cam'\">\r\n    Your camera is blocked\r\n</h1>\r\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='b-both'\">\r\n    Camera and microphone are blocked\r\n</h1>\r\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='b-mic'\">\r\n    Your microphone are blocked\r\n</h1>\r\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='sys-mic'\">\r\n    No audio devices found\r\n</h1>\r\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='sys-cam'\">\r\n    No video devices found\r\n</h1>\r\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='sys-both'\">\r\n    No audio/video devices found\r\n</h1>\r\n<div mat-dialog-content class=\"text-container\">\r\n    <div class=\"col-md-12 no-padding text-content\" *ngIf=\"mode==='b-both' || mode==='b-cam' || mode==='b-mic'\">\r\n        <div class=\"col-md-12 mgn-bt-20 no-padding text-content-text\">\r\n            Jaldee Videocall requires access to your camera/microphone so that other participants can hear/see\r\n            you.\r\n\r\n            To unblock,\r\n\r\n            <ul>\r\n                <li>\r\n                    Make sure you close any applications in your system that currently uses your microphone/camera.\r\n                </li>\r\n                <li style=\"list-style: none !important; margin-top: 10px;margin-bottom: 10px;\">Or</li>\r\n                <li>\r\n                    Click the camera blocked icon on your browser's address bar, allow access and refresh your page.\r\n                </li>\r\n                <li style=\"list-style: none !important; margin-top: 10px;margin-bottom: 10px;\">Or</li>\r\n                <li>\r\n                    Allow access to your microphone/camera in your in your App settings.\r\n                </li>\r\n            </ul>\r\n        </div>\r\n        <div class=\"col-md-12 no-padding\">\r\n            <a class=\"pull-right dismiss-action\" (click)=\"dismissModal()\">Dismiss</a>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-md-12 no-padding text-content\" *ngIf=\"mode==='sys-both'\">\r\n        <div class=\"col-md-12 mgn-bt-20 no-padding text-content-text\">\r\n            Jaldee Videocall requires access to your camera and microphone so that other participants can see and hear\r\n            you, but no audio/video devices found.\r\n        </div>\r\n        <div class=\"col-md-12 no-padding\">\r\n            <a class=\"pull-right dismiss-action\" (click)=\"dismissModal()\">Dismiss</a>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-md-12 no-padding text-content\" *ngIf=\"mode==='sys-cam'\">\r\n        <div class=\"col-md-12 mgn-bt-20 no-padding text-content-text\">\r\n            Jaldee Videocall requires access to your camera so that other participants can hear\r\n            you, but no video devices found.\r\n        </div>\r\n        <div class=\"col-md-12 no-padding\">\r\n            <a class=\"pull-right dismiss-action\" (click)=\"dismissModal()\">Dismiss</a>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-md-12 no-padding text-content\" *ngIf=\"mode==='sys-mic'\">\r\n        <div class=\"col-md-12 mgn-bt-20 no-padding text-content-text\">\r\n            Jaldee Videocall requires access to your microphone so that other participants can hear\r\n            you but no audio devices found.\r\n        </div>\r\n        <div class=\"col-md-12 no-padding\">\r\n            <a class=\"pull-right dismiss-action\" (click)=\"dismissModal()\">Dismiss</a>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["h1.mat-dialog-title,.head{font-size:1.3rem!important}.text-content{font-size:1.25rem!important;line-height:1.5!important;letter-spacing:.1px!important;text-align:justify!important}.text-container{padding:25px!important;font-size:1.25rem!important}.text-container div{font-size:1rem!important;color:#0000008a!important}a.dismiss-action{font-size:1rem!important;font-weight:600!important}\n"], dependencies: [{ kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RequestDialogComponent, decorators: [{
             type: Component,
@@ -7346,5 +7419,5 @@ function setupInjectionContextForLoadChildren(route) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccountService, AuthService, AutolinkPipe, AutolinkPipeModule, BookingService, CapitalizeFirstPipe, CapitalizeFirstPipeModule, CommonService, ConfirmBoxComponent, ConfirmBoxModule, ConsumerService, CurrencyService, DateFormatPipe, DateFormatPipeModule, DateTimeProcessor, EnvironmentService, ErrorMessagingService, ErrrorMessageModule, FieldErrorDisplayComponent, FileService, FilterPipe, FormMessageDisplayModule, FormMessageDisplayService, FormSuccessDisplayComponent, GroupStorageService, HttpLoaderFactory, I8nModule, LoadingSpinnerComponent, LoadingSpinnerModule, LocalStorageService, MediaService, Messages, OrderService, PaymentModesComponent, PaymentModesModule, PaymentsModule, PaytmService, PhoneInputComponent, PhoneInputModule, QuestionaireService, QuestionnaireComponent, QuestionnaireModule, RazorpayService, RequestDialogComponent, RequestDialogModule, SafeHtmlPipe, ServiceMeta, SessionStorageService, SharedAccountGuard, SharedAccountResolver, SharedService, ShowuploadfileComponent, ShowuploadfileModule, SkeletonLoadingComponent, SkeletonLoadingModule, StorageService, SubscriptionService, ThemeService, TimezoneConverter, ToastService, TruncatePipe, TwilioService, WordProcessor, loadRemoteModuleWithCache, projectConstantsLocal, setupInjectionContextForLoadChildren };
+export { AccountService, AuthService, AutolinkPipe, AutolinkPipeModule, BookingService, CapitalizeFirstPipe, CapitalizeFirstPipeModule, CommonService, ConfirmBoxComponent, ConfirmBoxModule, ConsumerService, CurrencyService, DateFormatPipe, DateFormatPipeModule, DateTimeProcessor, EnvironmentService, ErrorMessagingService, ErrrorMessageModule, FieldErrorDisplayComponent, FileService, FilterPipe, FormMessageDisplayModule, FormMessageDisplayService, FormSuccessDisplayComponent, GroupStorageService, HttpLoaderFactory, I8nModule, JGalleryComponent, JGalleryModule, JGalleryService, LoadingSpinnerComponent, LoadingSpinnerModule, LocalStorageService, MediaService, Messages, OrderService, PaymentModesComponent, PaymentModesModule, PaymentsModule, PaytmService, PhoneInputComponent, PhoneInputModule, QuestionaireService, QuestionnaireComponent, QuestionnaireModule, RazorpayService, RequestDialogComponent, RequestDialogModule, SafeHtmlPipe, ServiceMeta, SessionStorageService, SharedAccountGuard, SharedAccountResolver, SharedService, ShowuploadfileComponent, ShowuploadfileModule, SkeletonLoadingComponent, SkeletonLoadingModule, StorageService, SubscriptionService, ThemeService, TimezoneConverter, ToastService, TruncatePipe, TwilioService, WordProcessor, loadRemoteModuleWithCache, projectConstantsLocal, setupInjectionContextForLoadChildren };
 //# sourceMappingURL=jconsumer-shared.mjs.map