jconsumer-shared 1.2.0 → 1.2.1

package/fesm2022/jconsumer-shared.mjs

@@ -1692,30 +1692,6 @@ class ConsumerService {
         const url = 'consumer/providers/' + accountid;
         return this.servicemeta.httpDelete(url);
     }
-    doDeleteFavProvider(fav, cthis) {
-        return new Promise((resolve, reject) => {
-            this.deleteFavProvider(fav.id)
-                .then(data => {
-                resolve(data);
-            }, error => {
-                reject(error);
-            });
-        });
-    }
-    deleteFavProvider(id) {
-        return new Promise((resolve, reject) => {
-            this.removeProviderfromFavourite(id)
-                .subscribe(data => {
-                resolve('reloadlist');
-            }, error => {
-                reject(error);
-            });
-        });
-    }
-    addProvidertoFavourite(accountid) {
-        const url = 'consumer/providers/' + accountid;
-        return this.servicemeta.httpPost(url);
-    }
     changePasswordProfile(data, origin) {
         const url = origin + '/login/chpwd';
         return this.servicemeta.httpPut(url, data);
@@ -2150,20 +2126,20 @@ class ConsumerService {
         }
         return null;
     }
-    // getUserEstimatedWaitingTime(prov_arr) {
-    //     let str = '';
-    //     for (let i = 0; i < prov_arr.length; i++) {
-    //         if (str !== '') {
-    //             str += '%2C'; // comma
-    //         }
-    //         str += prov_arr[i];
-    //     }
-    //     if (str === '') {
-    //         return null;
-    //     }
-    //     const path = 'provider/waitlist/queues/providerWaitingTime/' + str;
-    //     return this.servicemeta.httpGet(path);
-    // }
+    getUserEstimatedWaitingTime(prov_arr) {
+        let str = '';
+        for (let i = 0; i < prov_arr.length; i++) {
+            if (str !== '') {
+                str += '%2C'; // comma
+            }
+            str += prov_arr[i];
+        }
+        if (str === '') {
+            return null;
+        }
+        const path = 'provider/waitlist/queues/providerWaitingTime/' + str;
+        return this.servicemeta.httpGet(path);
+    }
     // updateAnalytics(body) {
     //     const url = 'provider/analytics/update';
     //     return this.servicemeta.httpPost(url, body);
@@ -2962,11 +2938,11 @@ 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\">\n  <div class=\"sts-msg error\">{{ errorMsg || errorMsgs }}</div>\n</div>\n\n", styles: [".error-msg{color:#a94442}.fix-error-icon{top:27px}\n"], dependencies: [{ kind: "directive", type: i13.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,
-            args: [{ selector: 'app-field-error-display', template: "<div *ngIf=\"displayError\" tabindex=\"-1\">\n  <div class=\"sts-msg error\">{{ errorMsg || errorMsgs }}</div>\n</div>\n\n", styles: [".error-msg{color:#a94442}.fix-error-icon{top:27px}\n"] }]
+            args: [{ selector: 'app-field-error-display', 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"] }]
         }], propDecorators: { errorMsg: [{
                 type: Input
             }], displayError: [{
@@ -2979,11 +2955,11 @@ 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\" >\n  <div class=\"sts-msg success\">\n    {{ successMsg }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i13.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,
-            args: [{ selector: 'app-form-success-display', template: "<div *ngIf=\"displayMsg\" >\n  <div class=\"sts-msg success\">\n    {{ successMsg }}\n  </div>\n</div>\n" }]
+            args: [{ selector: 'app-form-success-display', template: "<div *ngIf=\"displayMsg\" >\r\n  <div class=\"sts-msg success\">\r\n    {{ successMsg }}\r\n  </div>\r\n</div>\r\n" }]
         }], propDecorators: { successMsg: [{
                 type: Input
             }], displayMsg: [{
@@ -3121,11 +3097,11 @@ 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)\">\n  <h1 class=\"mat-dialog-title\">\n    <button #queue mat-dialog-close class=\"modal_close\" id=\"btnClose\">\n      <i class=\"fa fa-window-close\" aria-hidden=\"true\"></i>\n    </button>\n  </h1>\n  <div mat-dialog-content>\n    <p class=\"mb-4 fontsize\"> {{data.message}}</p>\n    <div *ngIf=\"data && data.cancelPolicy\" class=\"policies\">\n      <p-accordion [multiple]=\"true\">\n        <p-accordionTab>\n          <ng-template pTemplate=\"header\">\n            <h4>Cancellation Policies</h4>\n          </ng-template>\n          <p>You can cancel your {{data.book}}s any time until\n            <span *ngIf=\"data.wtlist.date\">{{data.wtlist.date| date:\n              newDateFormat}}</span><span *ngIf=\"data.wtlist.appmtDate\">{{data.wtlist.appmtDate| date:\n              newDateFormat}}</span><span *ngIf=\"data.wtlist.orderDate\">{{data.wtlist.orderDate| date:\n              newDateFormat}}</span>.<span\n              *ngIf=\"data.wtlist && data.wtlist.providerAccount && data.wtlist.providerAccount.businessName\">\n              If the system doesn\u2019t permit your cancellation,\n              contact your provider, {{data.wtlist.providerAccount.businessName}}.\n              It\u2019s important to note that the\n              provider may cancel your bookings at their discretion for their own reasons.\n              Jaldee will keep you informed promptly regarding the changes through timely notifications.\n            </span>\n          </p>\n        </p-accordionTab>\n        <p-accordionTab>\n          <ng-template pTemplate=\"header\">\n            <h4>Refund policy for Advance Payments(only)</h4>\n          </ng-template>\n          <p>\n            In the case of your cancellation, a 3% (payment gateway fee) will be deducted from the refund\n            of the advanced payment made. For same-day cancellations, kindly contact your service provider,\n            {{data.wtlist.providerAccount.businessName}} to initiate the refund. For any refund-related queries, reach\n            out to\n            {{data.wtlist.providerAccount.businessName}} for assistance.\n          </p>\n        </p-accordionTab>\n      </p-accordion>\n      <p class=\"mt-4\"> Are you sure you want to cancel this {{data.book}}? <br/></p>\n    </div>\n    <div *ngIf=\"data.book !== 'Order' && data.cancelPolicy\">\n      <div class=\"form-group\">\n        <label class=\"col-form-label\" for=\"displayName\">{{select_reason_cap}}*</label><br>\n        <mat-chip-list>\n          <mat-chip *ngFor=\"let cancel_reason of cancel_reasons\" class=\"me-2 mb-2\"\n            color=\"{{(cancel_reason.value === amForm.get('reason').value) ? 'primary' : ''}}\"\n            selected=\"{{(cancel_reason.value === amForm.get('reason').value) ? true : false}}\"\n            [class.selected]=\"(cancel_reason.value === amForm.get('reason').value) ? true : false\"\n            (click)=\"selectReason(cancel_reason)\">\n            {{cancel_reason.title}}\n          </mat-chip>\n        </mat-chip-list>\n      </div>\n      <div class=\"form-group mt-2\">\n        <mat-checkbox formControlName=\"send_message\">{{send_message_cap}} {{rep_username}}</mat-checkbox>\n      </div>\n      <div class=\"form-group reason-area\" *ngIf=\"amForm.get('send_message').value\">\n        <textarea  class=\"form-control\" rows=\"3\"  id=\"message\" maxlength=\"1000\" pInputTextarea placeholder=\"Message\" formControlName=\"message\"></textarea>\n        <app-field-error-display [displayError]=\"fed_service.isFieldValid(amForm,'message')\"\n          errorMsg=\"Please enter a message.\">\n        </app-field-error-display>\n      </div>\n    </div>\n  </div>\n  <div mat-dialog-actions *ngIf=\"data.book !== 'Order'&& data.cancelPolicy\" class=\"mb-2\">\n    <div class=\"col-md-12\" style=\"margin-top: 15px;display: inline-flex;\">\n      <button type=\"button\" mat-dialog-close class=\"cs-btn bt2\" id=\"btnCancel\">{{cancel_btn_cap}}</button>\n      <button type=\"submit\" mat-button [disabled]=\"!amForm.valid\" class=\"cs-btn bt1\" id=\"btnOk\">{{ok_btn_cap}}</button>\n    </div>\n  </div>\n  <app-field-error-display [displayError]=\"true\" *ngIf=\"api_error\" errorMsg=\"{{api_error}}\"></app-field-error-display>\n  <app-form-success-display [displayMsg]=\"true\" *ngIf=\"api_success\" successMsg=\"{{api_success}}\">\n  </app-form-success-display>\n  <div mat-dialog-actions class=\"paddingtop\" *ngIf=\"data.book !== 'Order' && !data.cancelPolicy\">\n    <button tabindex=\"-1\" (click)=\"onClick(0)\" class=\"cs-btn bt2\" id=\"btnCancel\">{{cancel_btn_cap}}</button>\n    <button tabindex=\"2\" (click)=\"onClick(1)\" id=\"btnOk\"\n      class=\"cs-btn bt1 reddelete checkavailabilitybutton\">{{ok_btn_cap}}</button>\n  </div>\n  <app-field-error-display [displayError]=\"true\" *ngIf=\"showError\" errorMsg=\"Department name is required\">\n  </app-field-error-display>\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: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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" }] });
+    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}}? <br/></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><br>\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\" maxlength=\"1000\" 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: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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,
-            args: [{ selector: 'app-confirm-box', template: "<form [formGroup]=\"amForm\" [ngClass]=\"this.data.theme\" novalidate (ngSubmit)=\"amForm.valid && onSubmit(amForm.value)\">\n  <h1 class=\"mat-dialog-title\">\n    <button #queue mat-dialog-close class=\"modal_close\" id=\"btnClose\">\n      <i class=\"fa fa-window-close\" aria-hidden=\"true\"></i>\n    </button>\n  </h1>\n  <div mat-dialog-content>\n    <p class=\"mb-4 fontsize\"> {{data.message}}</p>\n    <div *ngIf=\"data && data.cancelPolicy\" class=\"policies\">\n      <p-accordion [multiple]=\"true\">\n        <p-accordionTab>\n          <ng-template pTemplate=\"header\">\n            <h4>Cancellation Policies</h4>\n          </ng-template>\n          <p>You can cancel your {{data.book}}s any time until\n            <span *ngIf=\"data.wtlist.date\">{{data.wtlist.date| date:\n              newDateFormat}}</span><span *ngIf=\"data.wtlist.appmtDate\">{{data.wtlist.appmtDate| date:\n              newDateFormat}}</span><span *ngIf=\"data.wtlist.orderDate\">{{data.wtlist.orderDate| date:\n              newDateFormat}}</span>.<span\n              *ngIf=\"data.wtlist && data.wtlist.providerAccount && data.wtlist.providerAccount.businessName\">\n              If the system doesn\u2019t permit your cancellation,\n              contact your provider, {{data.wtlist.providerAccount.businessName}}.\n              It\u2019s important to note that the\n              provider may cancel your bookings at their discretion for their own reasons.\n              Jaldee will keep you informed promptly regarding the changes through timely notifications.\n            </span>\n          </p>\n        </p-accordionTab>\n        <p-accordionTab>\n          <ng-template pTemplate=\"header\">\n            <h4>Refund policy for Advance Payments(only)</h4>\n          </ng-template>\n          <p>\n            In the case of your cancellation, a 3% (payment gateway fee) will be deducted from the refund\n            of the advanced payment made. For same-day cancellations, kindly contact your service provider,\n            {{data.wtlist.providerAccount.businessName}} to initiate the refund. For any refund-related queries, reach\n            out to\n            {{data.wtlist.providerAccount.businessName}} for assistance.\n          </p>\n        </p-accordionTab>\n      </p-accordion>\n      <p class=\"mt-4\"> Are you sure you want to cancel this {{data.book}}? <br/></p>\n    </div>\n    <div *ngIf=\"data.book !== 'Order' && data.cancelPolicy\">\n      <div class=\"form-group\">\n        <label class=\"col-form-label\" for=\"displayName\">{{select_reason_cap}}*</label><br>\n        <mat-chip-list>\n          <mat-chip *ngFor=\"let cancel_reason of cancel_reasons\" class=\"me-2 mb-2\"\n            color=\"{{(cancel_reason.value === amForm.get('reason').value) ? 'primary' : ''}}\"\n            selected=\"{{(cancel_reason.value === amForm.get('reason').value) ? true : false}}\"\n            [class.selected]=\"(cancel_reason.value === amForm.get('reason').value) ? true : false\"\n            (click)=\"selectReason(cancel_reason)\">\n            {{cancel_reason.title}}\n          </mat-chip>\n        </mat-chip-list>\n      </div>\n      <div class=\"form-group mt-2\">\n        <mat-checkbox formControlName=\"send_message\">{{send_message_cap}} {{rep_username}}</mat-checkbox>\n      </div>\n      <div class=\"form-group reason-area\" *ngIf=\"amForm.get('send_message').value\">\n        <textarea  class=\"form-control\" rows=\"3\"  id=\"message\" maxlength=\"1000\" pInputTextarea placeholder=\"Message\" formControlName=\"message\"></textarea>\n        <app-field-error-display [displayError]=\"fed_service.isFieldValid(amForm,'message')\"\n          errorMsg=\"Please enter a message.\">\n        </app-field-error-display>\n      </div>\n    </div>\n  </div>\n  <div mat-dialog-actions *ngIf=\"data.book !== 'Order'&& data.cancelPolicy\" class=\"mb-2\">\n    <div class=\"col-md-12\" style=\"margin-top: 15px;display: inline-flex;\">\n      <button type=\"button\" mat-dialog-close class=\"cs-btn bt2\" id=\"btnCancel\">{{cancel_btn_cap}}</button>\n      <button type=\"submit\" mat-button [disabled]=\"!amForm.valid\" class=\"cs-btn bt1\" id=\"btnOk\">{{ok_btn_cap}}</button>\n    </div>\n  </div>\n  <app-field-error-display [displayError]=\"true\" *ngIf=\"api_error\" errorMsg=\"{{api_error}}\"></app-field-error-display>\n  <app-form-success-display [displayMsg]=\"true\" *ngIf=\"api_success\" successMsg=\"{{api_success}}\">\n  </app-form-success-display>\n  <div mat-dialog-actions class=\"paddingtop\" *ngIf=\"data.book !== 'Order' && !data.cancelPolicy\">\n    <button tabindex=\"-1\" (click)=\"onClick(0)\" class=\"cs-btn bt2\" id=\"btnCancel\">{{cancel_btn_cap}}</button>\n    <button tabindex=\"2\" (click)=\"onClick(1)\" id=\"btnOk\"\n      class=\"cs-btn bt1 reddelete checkavailabilitybutton\">{{ok_btn_cap}}</button>\n  </div>\n  <app-field-error-display [displayError]=\"true\" *ngIf=\"showError\" errorMsg=\"Department name is required\">\n  </app-field-error-display>\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"] }]
+            args: [{ selector: 'app-confirm-box', 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}}? <br/></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><br>\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\" maxlength=\"1000\" 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"] }]
         }], ctorParameters: () => [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -4900,11 +4876,11 @@ class SkeletonLoadingComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkeletonLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkeletonLoadingComponent, selector: "app-skeleton-loading", ngImport: i0, template: "<ul class=\"o-vertical-spacing o-vertical-spacing--l\">\n  <li class=\"blog-post o-media\">\n    <div class=\"o-media__figure\">\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\n    </div>\n    <div class=\"o-media__body\">\n      <div class=\"o-vertical-spacing\">\n        <h3 class=\"blog-post__headline\">\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\n        </h3>\n        <p>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n        </p>\n        <div class=\"blog-post__meta\">\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\n        </div>\n      </div>\n    </div>\n  </li>\n  <li class=\"blog-post o-media\">\n    <div class=\"o-media__figure\">\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\n    </div>\n    <div class=\"o-media__body\">\n      <div class=\"o-vertical-spacing\">\n        <h3 class=\"blog-post__headline\">\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\n        </h3>\n        <p>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n        </p>\n        <div class=\"blog-post__meta\">\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\n        </div>\n      </div>\n    </div>\n  </li>\n  <li class=\"blog-post o-media\">\n    <div class=\"o-media__figure\">\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\n    </div>\n    <div class=\"o-media__body\">\n      <div class=\"o-vertical-spacing\">\n        <h3 class=\"blog-post__headline\">\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\n        </h3>\n        <p>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n        </p>\n        <div class=\"blog-post__meta\">\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\n        </div>\n      </div>\n    </div>\n  </li>\n  <li class=\"blog-post o-media\">\n    <div class=\"o-media__figure\">\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\n    </div>\n    <div class=\"o-media__body\">\n      <div class=\"o-vertical-spacing\">\n        <h3 class=\"blog-post__headline\">\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\n        </h3>\n        <p>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n        </p>\n        <div class=\"blog-post__meta\">\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\n        </div>\n      </div>\n    </div>\n  </li>\n  <li class=\"blog-post o-media\">\n    <div class=\"o-media__figure\">\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\n    </div>\n    <div class=\"o-media__body\">\n      <div class=\"o-vertical-spacing\">\n        <h3 class=\"blog-post__headline\">\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\n        </h3>\n        <p>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n        </p>\n        <div class=\"blog-post__meta\">\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\n        </div>\n      </div>\n    </div>\n  </li>\n\n</ul>\n", styles: [".skeleton-box{display:inline-block;height:1em;position:relative;overflow:hidden;background-color:#dddbdd}.skeleton-box:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,#fff0 0,#fff3 20%,#ffffff80 60%,#fff0);animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.blog-post__headline{font-size:1.25em;font-weight:700}.blog-post__meta{font-size:.85em;color:#6b6b6b}.o-media{display:flex}.o-media__body{flex-grow:1;margin-left:1em}.o-vertical-spacing>*+*{margin-top:.75em}.o-vertical-spacing--l>*+*{margin-top:2em}header h1{font-family:Rubik,sans-serif;font-weight:500;line-height:1.2;font-size:2em}header p:not(:first-child){margin-top:1em}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkeletonLoadingComponent, selector: "app-skeleton-loading", ngImport: i0, template: "<ul class=\"o-vertical-spacing o-vertical-spacing--l\">\r\n  <li class=\"blog-post o-media\">\r\n    <div class=\"o-media__figure\">\r\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\r\n    </div>\r\n    <div class=\"o-media__body\">\r\n      <div class=\"o-vertical-spacing\">\r\n        <h3 class=\"blog-post__headline\">\r\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\r\n        </h3>\r\n        <p>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n        </p>\r\n        <div class=\"blog-post__meta\">\r\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </li>\r\n  <li class=\"blog-post o-media\">\r\n    <div class=\"o-media__figure\">\r\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\r\n    </div>\r\n    <div class=\"o-media__body\">\r\n      <div class=\"o-vertical-spacing\">\r\n        <h3 class=\"blog-post__headline\">\r\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\r\n        </h3>\r\n        <p>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n        </p>\r\n        <div class=\"blog-post__meta\">\r\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </li>\r\n  <li class=\"blog-post o-media\">\r\n    <div class=\"o-media__figure\">\r\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\r\n    </div>\r\n    <div class=\"o-media__body\">\r\n      <div class=\"o-vertical-spacing\">\r\n        <h3 class=\"blog-post__headline\">\r\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\r\n        </h3>\r\n        <p>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n        </p>\r\n        <div class=\"blog-post__meta\">\r\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </li>\r\n  <li class=\"blog-post o-media\">\r\n    <div class=\"o-media__figure\">\r\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\r\n    </div>\r\n    <div class=\"o-media__body\">\r\n      <div class=\"o-vertical-spacing\">\r\n        <h3 class=\"blog-post__headline\">\r\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\r\n        </h3>\r\n        <p>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n        </p>\r\n        <div class=\"blog-post__meta\">\r\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </li>\r\n  <li class=\"blog-post o-media\">\r\n    <div class=\"o-media__figure\">\r\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\r\n    </div>\r\n    <div class=\"o-media__body\">\r\n      <div class=\"o-vertical-spacing\">\r\n        <h3 class=\"blog-post__headline\">\r\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\r\n        </h3>\r\n        <p>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n        </p>\r\n        <div class=\"blog-post__meta\">\r\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </li>\r\n\r\n</ul>\r\n", styles: [".skeleton-box{display:inline-block;height:1em;position:relative;overflow:hidden;background-color:#dddbdd}.skeleton-box:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,#fff0 0,#fff3 20%,#ffffff80 60%,#fff0);animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.blog-post__headline{font-size:1.25em;font-weight:700}.blog-post__meta{font-size:.85em;color:#6b6b6b}.o-media{display:flex}.o-media__body{flex-grow:1;margin-left:1em}.o-vertical-spacing>*+*{margin-top:.75em}.o-vertical-spacing--l>*+*{margin-top:2em}header h1{font-family:Rubik,sans-serif;font-weight:500;line-height:1.2;font-size:2em}header p:not(:first-child){margin-top:1em}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkeletonLoadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-skeleton-loading', template: "<ul class=\"o-vertical-spacing o-vertical-spacing--l\">\n  <li class=\"blog-post o-media\">\n    <div class=\"o-media__figure\">\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\n    </div>\n    <div class=\"o-media__body\">\n      <div class=\"o-vertical-spacing\">\n        <h3 class=\"blog-post__headline\">\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\n        </h3>\n        <p>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n        </p>\n        <div class=\"blog-post__meta\">\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\n        </div>\n      </div>\n    </div>\n  </li>\n  <li class=\"blog-post o-media\">\n    <div class=\"o-media__figure\">\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\n    </div>\n    <div class=\"o-media__body\">\n      <div class=\"o-vertical-spacing\">\n        <h3 class=\"blog-post__headline\">\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\n        </h3>\n        <p>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n        </p>\n        <div class=\"blog-post__meta\">\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\n        </div>\n      </div>\n    </div>\n  </li>\n  <li class=\"blog-post o-media\">\n    <div class=\"o-media__figure\">\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\n    </div>\n    <div class=\"o-media__body\">\n      <div class=\"o-vertical-spacing\">\n        <h3 class=\"blog-post__headline\">\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\n        </h3>\n        <p>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n        </p>\n        <div class=\"blog-post__meta\">\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\n        </div>\n      </div>\n    </div>\n  </li>\n  <li class=\"blog-post o-media\">\n    <div class=\"o-media__figure\">\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\n    </div>\n    <div class=\"o-media__body\">\n      <div class=\"o-vertical-spacing\">\n        <h3 class=\"blog-post__headline\">\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\n        </h3>\n        <p>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n        </p>\n        <div class=\"blog-post__meta\">\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\n        </div>\n      </div>\n    </div>\n  </li>\n  <li class=\"blog-post o-media\">\n    <div class=\"o-media__figure\">\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\n    </div>\n    <div class=\"o-media__body\">\n      <div class=\"o-vertical-spacing\">\n        <h3 class=\"blog-post__headline\">\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\n        </h3>\n        <p>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\n        </p>\n        <div class=\"blog-post__meta\">\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\n        </div>\n      </div>\n    </div>\n  </li>\n\n</ul>\n", styles: [".skeleton-box{display:inline-block;height:1em;position:relative;overflow:hidden;background-color:#dddbdd}.skeleton-box:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,#fff0 0,#fff3 20%,#ffffff80 60%,#fff0);animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.blog-post__headline{font-size:1.25em;font-weight:700}.blog-post__meta{font-size:.85em;color:#6b6b6b}.o-media{display:flex}.o-media__body{flex-grow:1;margin-left:1em}.o-vertical-spacing>*+*{margin-top:.75em}.o-vertical-spacing--l>*+*{margin-top:2em}header h1{font-family:Rubik,sans-serif;font-weight:500;line-height:1.2;font-size:2em}header p:not(:first-child){margin-top:1em}\n"] }]
+            args: [{ selector: 'app-skeleton-loading', template: "<ul class=\"o-vertical-spacing o-vertical-spacing--l\">\r\n  <li class=\"blog-post o-media\">\r\n    <div class=\"o-media__figure\">\r\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\r\n    </div>\r\n    <div class=\"o-media__body\">\r\n      <div class=\"o-vertical-spacing\">\r\n        <h3 class=\"blog-post__headline\">\r\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\r\n        </h3>\r\n        <p>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n        </p>\r\n        <div class=\"blog-post__meta\">\r\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </li>\r\n  <li class=\"blog-post o-media\">\r\n    <div class=\"o-media__figure\">\r\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\r\n    </div>\r\n    <div class=\"o-media__body\">\r\n      <div class=\"o-vertical-spacing\">\r\n        <h3 class=\"blog-post__headline\">\r\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\r\n        </h3>\r\n        <p>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n        </p>\r\n        <div class=\"blog-post__meta\">\r\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </li>\r\n  <li class=\"blog-post o-media\">\r\n    <div class=\"o-media__figure\">\r\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\r\n    </div>\r\n    <div class=\"o-media__body\">\r\n      <div class=\"o-vertical-spacing\">\r\n        <h3 class=\"blog-post__headline\">\r\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\r\n        </h3>\r\n        <p>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n        </p>\r\n        <div class=\"blog-post__meta\">\r\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </li>\r\n  <li class=\"blog-post o-media\">\r\n    <div class=\"o-media__figure\">\r\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\r\n    </div>\r\n    <div class=\"o-media__body\">\r\n      <div class=\"o-vertical-spacing\">\r\n        <h3 class=\"blog-post__headline\">\r\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\r\n        </h3>\r\n        <p>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n        </p>\r\n        <div class=\"blog-post__meta\">\r\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </li>\r\n  <li class=\"blog-post o-media\">\r\n    <div class=\"o-media__figure\">\r\n      <span class=\"skeleton-box\" style=\"width:100px;height:80px;\"></span>\r\n    </div>\r\n    <div class=\"o-media__body\">\r\n      <div class=\"o-vertical-spacing\">\r\n        <h3 class=\"blog-post__headline\">\r\n          <span class=\"skeleton-box\" style=\"width:55%;\"></span>\r\n        </h3>\r\n        <p>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:90%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:83%;\"></span>\r\n          <span class=\"skeleton-box\" style=\"width:80%;\"></span>\r\n        </p>\r\n        <div class=\"blog-post__meta\">\r\n          <span class=\"skeleton-box\" style=\"width:70px;\"></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </li>\r\n\r\n</ul>\r\n", styles: [".skeleton-box{display:inline-block;height:1em;position:relative;overflow:hidden;background-color:#dddbdd}.skeleton-box:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,#fff0 0,#fff3 20%,#ffffff80 60%,#fff0);animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.blog-post__headline{font-size:1.25em;font-weight:700}.blog-post__meta{font-size:.85em;color:#6b6b6b}.o-media{display:flex}.o-media__body{flex-grow:1;margin-left:1em}.o-vertical-spacing>*+*{margin-top:.75em}.o-vertical-spacing--l>*+*{margin-top:2em}header h1{font-family:Rubik,sans-serif;font-weight:500;line-height:1.2;font-size:2em}header p:not(:first-child){margin-top:1em}\n"] }]
         }], ctorParameters: () => [] });
 
 class SkeletonLoadingModule {
@@ -5102,11 +5078,11 @@ 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\">\n  <h1 class=\"mat-dialog-title\"> {{title}}\n    <button #locte mat-dialog-close class=\"modal_close\" tabindex=\"-1\" id=\"btnClose\">\n      <i class=\"fa fa-window-close\" aria-hidden=\"true\"></i>\n    </button>\n  </h1>\n  <div class=\"pad-20 image-scroll\">\n    <img style=\"width:100%;margin-top: -20px;\" [src]=\"details.url||details.s3path\" alt=\"\"\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'\n  ||details.type == 'bmp' ||details.type == 'png' ||details.type == 'gif' ||details.type == 'jpg' ||details.type == 'jpeg' ||details.type == 'webp'\" />\n    <video style=\"width:100%;height: 75vh;\" controls\n      *ngIf=\"(data.source === 'qnr' && type === 'video') || (data.source === 'mr' && details.type && details.type == 'video/mp4' || details.type == 'video/mpeg'||details.type == 'video/quicktime')\">\n      <source [src]=\"details.url\" />\n    </video>\n    <audio style=\"width:100%;\" controls\n      *ngIf=\"(data.source === 'qnr' && type === 'audio') || (data.source === 'mr' && details.type && details.type == 'audio/ogg'|| details.type == 'audio/mpeg'|| details.type == 'audio/mp3')\">\n      <source [src]=\"details.url\" />\n    </audio>\n  </div>\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"] }] });
+    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,
-            args: [{ selector: 'app-showuploadfile', template: "<form [ngClass]=\"theme\">\n  <h1 class=\"mat-dialog-title\"> {{title}}\n    <button #locte mat-dialog-close class=\"modal_close\" tabindex=\"-1\" id=\"btnClose\">\n      <i class=\"fa fa-window-close\" aria-hidden=\"true\"></i>\n    </button>\n  </h1>\n  <div class=\"pad-20 image-scroll\">\n    <img style=\"width:100%;margin-top: -20px;\" [src]=\"details.url||details.s3path\" alt=\"\"\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'\n  ||details.type == 'bmp' ||details.type == 'png' ||details.type == 'gif' ||details.type == 'jpg' ||details.type == 'jpeg' ||details.type == 'webp'\" />\n    <video style=\"width:100%;height: 75vh;\" controls\n      *ngIf=\"(data.source === 'qnr' && type === 'video') || (data.source === 'mr' && details.type && details.type == 'video/mp4' || details.type == 'video/mpeg'||details.type == 'video/quicktime')\">\n      <source [src]=\"details.url\" />\n    </video>\n    <audio style=\"width:100%;\" controls\n      *ngIf=\"(data.source === 'qnr' && type === 'audio') || (data.source === 'mr' && details.type && details.type == 'audio/ogg'|| details.type == 'audio/mpeg'|| details.type == 'audio/mp3')\">\n      <source [src]=\"details.url\" />\n    </audio>\n  </div>\n</form>", styles: [".pad-20{padding:20px!important}\n"] }]
+            args: [{ selector: 'app-showuploadfile', 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"] }]
         }], ctorParameters: () => [{ type: i1$4.MatDialogRef }, { type: CommonService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -5146,11 +5122,11 @@ class JGalleryComponent {
         }
     }
     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()\">\n    <div class=\"modal-content\" (click)=\"$event.stopPropagation()\">\n      <button class=\"close-btn\" (click)=\"close()\">\u2716</button>\n      <img [src]=\"data.images[currentIndex]['source']\" alt=\"Gallery Image\">\n      \n      <button class=\"nav-btn prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevImage()\">&#10094;</button>\n      <button class=\"nav-btn next\" *ngIf=\"currentIndex < data.images.length - 1\" (click)=\"nextImage()\">&#10095;</button>\n    </div>\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"] }] });
+    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()\">\n    <div class=\"modal-content\" (click)=\"$event.stopPropagation()\">\n      <button class=\"close-btn\" (click)=\"close()\">\u2716</button>\n      <img [src]=\"data.images[currentIndex]['source']\" alt=\"Gallery Image\">\n      \n      <button class=\"nav-btn prev\" *ngIf=\"currentIndex > 0\" (click)=\"prevImage()\">&#10094;</button>\n      <button class=\"nav-btn next\" *ngIf=\"currentIndex < data.images.length - 1\" (click)=\"nextImage()\">&#10095;</button>\n    </div>\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"] }]
+            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]
@@ -6510,11 +6486,11 @@ class QuestionnaireComponent {
         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: 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\">\n  <div class=\"container consumer-dashhome p-0\" *ngIf=\"!type && source!='proLead'\">\n    <div class=\"card title-gb rounded-0\" *ngIf=\"uuid\">\n      <h5 class=\"mt-2 bold\">{{questionnaire_heading | capitalizeFirst}} <a class=\"pull-left me-4 back-btn\"\n          (click)=\"goBack()\"><i class=\"fa fa-arrow-left\"></i></a></h5>\n    </div>\n  </div>\n  <app-common-innerloading-spinner *ngIf=\"loading\"></app-common-innerloading-spinner>\n  <div class=\"d-flex flex-column-fluid pull-right me-2 mb-4\"\n    *ngIf=\"type !== 'qnrLinkProvider' && !buttonDisable && waitlistStatus\">\n    <button class=\"normal-btn edit\" mat-flat-button (click)=\"editQnr()\" id=\"btnEdit\">Edit</button>\n  </div>\n  <div class=\"d-flex flex-column-fluid width-100\" [class.qnrDisableState]=\"disableInput()\"\n    [class.p-0]=\"uuid && (source === 'consCheckin' || source === 'consAppt' || source === 'consOrder' || source === 'paper' || source === 'consDonationDetails' || source === 'ivr')\">\n    <div class=\"col-xl-12 force_center\" [class.p-0]=\"uuid\" [class.no-padding-small]=\"source && source=='ivr'\">\n      <div class=\"\">\n        <div class=\"qnrsec\" *ngFor=\"let qnr of groupedQnr | keyvalue: asIsOrder\"\n          [class.section-shadow]=\"getSectionCount() > 1\" [class.no-padding-small]=\"source && source=='ivr'\">\n          <div class=\"form-group card mgn-0\" *ngFor=\"let question of qnr.value\">\n            <label class=\"col-12 quest\">{{getQuestion(question).label}}\n              <i class=\"fa fa-plus-circle pull-right\" aria-hidden=\"true\"\n                [class.addicon]=\"!buttonDisable && !disableInput()\"\n                *ngIf=\"getQuestion(question).fieldDataType === 'dataGrid' && !showDataGrid[getQuestion(question).labelName]\"\n                (click)=\"!buttonDisable && !disableInput() && showDataGridAddSection(getQuestion(question), true)\"></i>\n              <div class=\"pro-only\" *ngIf=\"showProviderText(getQuestion(question))\">For Providers</div>\n              <span class=\"red\" *ngIf=\"getQuestion(question).mandatory\">*</span>\n              <div class=\"form-level-settings\" *ngIf=\"getQuestion(question).hint\"\n                [innerHTML]=\"getQuestion(question).hint | safeHtml\">\n              </div>\n            </label>\n            <!-- for file upload -->\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'fileUpload'\">\n              <mat-select multiple #deptsel [disabled]=\"buttonDisable || disableInput()\"\n                *ngIf=\"getQuestion(question).filePropertie.maxNoOfFile > 1 && getQuestion(question).filePropertie.minNoOfFile !== getQuestion(question).filePropertie.maxNoOfFile\"\n                [(ngModel)]=\"uploadFilesTemp[getQuestion(question).labelName]\" class=\"select-box\" placeholder=\"Select\">\n                <mat-option *ngFor=\"let document of getQuestion(question).filePropertie.allowedDocuments\"\n                  [value]=\"document\" (click)=\"changeImageSelected(getQuestion(question), document)\">\n                  {{document}}</mat-option>\n              </mat-select>\n              <div class=\"col-lg-12 col-12 col-md-12 col-sm-12 p-0 mt-4\"\n                *ngIf=\"getDocuments(getQuestion(question)) && getDocuments(getQuestion(question)).length > 0\">\n                <div class=\"dropzone dropzone-default dropzone-primary dz-clickable\"\n                  [class.single-file]=\"getQuestion(question).filePropertie.allowedDocuments.length==1\"\n                  style=\"cursor: auto;\">\n                  <ng-container *ngFor=\"let doc of getDocuments(getQuestion(question))\">\n                    <div class=\"dz-preview dz-processing dz-image-preview dz-error dz-complete\"\n                      *ngIf=\"getImg(getQuestion(question), doc)\">\n                      <div class=\"docname\" *ngIf=\"getQuestion(question).filePropertie.allowedDocuments.length > 1\">\n                        {{doc}}</div>\n                      <div class=\"dzimage pointer-cursor\" (click)=\"openAttachmentGallery(getQuestion(question), doc)\">\n                        <img alt=\"\" class=\"img_fit\" [src]=\"getImg(getQuestion(question), doc)\">\n                      </div>\n                      <input [disabled]=\"buttonDisable || disableInput()\" (blur)=\"onSubmit('inputChange');\"\n                        [(ngModel)]=\"comments[getQuestion(question).labelName + '=' + doc]\">\n                      <div class=\"gal_action\" *ngIf=\"!buttonDisable && !disableInput() && mode!=='read'\"\n                        (click)=\"changeImageSelected(getQuestion(question), doc)\">\n                        <i class=\"fa fa-times-circle\" aria-hidden=\"true\"></i>\n                      </div>\n                    </div>\n                    <div class=\"dz-preview dz-processing dz-image-preview dz-error dz-complete\"\n                      (click)=\"logofile1.click()\" *ngIf=\"!getImg(getQuestion(question), doc)\">\n                      <div class=\"docname\" *ngIf=\"getQuestion(question).filePropertie.allowedDocuments.length > 1\">\n                        {{doc}}</div>\n                      <div class=\"dz-image pointer-cursor\">\n                      </div>\n                      <input #logofile1 type=\"file\" accept=\"/*;capture=camera\" style=\"display:none;\"\n                        [disabled]=\"buttonDisable || disableInput()\"\n                        (change)=\"filesSelected($event, getQuestion(question), doc)\">\n                      <div class=\"dz-error-mark\">\n                        <a class=\"btn btn-icon btn-light-success btn-circle mr-2\"><i\n                            class=\"text-dark-50 flaticon-upload\"></i></a>\n                      </div>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\n                {{apiError[getQuestion(question).labelName]}}</div>\n            </div>\n            <!-- for checkbox -->\n            <div class=\"col-12\"\n              *ngIf=\"getQuestion(question).fieldDataType === 'list' && getQuestion(question).listPropertie.maxAnswers > 1\">\n              <div class=\"checkbox-list\">\n                <label class=\"checkbox\" *ngFor=\"let value of getQuestion(question).labelValues\">\n                  <input type=\"checkbox\" [checked]=\"isChecked(value, getQuestion(question))\"\n                    (change)=\"listChange($event, value, getQuestion(question))\"\n                    [disabled]=\"buttonDisable || disableInput()\">\n                  <span></span>\n                  {{value}}\n                </label>\n              </div>\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\n                {{apiError[getQuestion(question).labelName]}}</div>\n            </div>\n            <!-- for radio -->\n            <div class=\"col-12\"\n              *ngIf=\"getQuestion(question).fieldDataType === 'list' && getQuestion(question).listPropertie.maxAnswers === 1\">\n              <div class=\"radio-list\">\n                <label class=\"radio\" *ngFor=\"let value of getQuestion(question).labelValues\">\n                  <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\n                    [checked]=\"isChecked(value, getQuestion(question))\"\n                    (change)=\"listChange($event, value, getQuestion(question))\">\n                  <span></span>\n                  {{value}}\n                </label>\n              </div>\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\n                {{apiError[getQuestion(question).labelName]}}</div>\n            </div>\n            <!-- for toggel boolean -->\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'bool'\">\n              <div class=\"radio-list\">\n                <label class=\"radio\" *ngFor=\"let value of getQuestion(question).labelValues\">\n                  <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\n                    [checked]=\"isBooleanChecked(value, getQuestion(question))\"\n                    (change)=\"booleanChange($event, value, getQuestion(question))\">\n                  <span></span>\n                  {{value}}\n                </label>\n              </div>\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\n                {{apiError[getQuestion(question).labelName]}}</div>\n            </div>\n            <!-- for Text -->\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'plainText'\">\n              <input *ngIf=\"getQuestion(question).plainTextPropertie.maxNoOfLetter<=100\"\n                  [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"                  \n                  [minlength]=\"getQuestion(question).plainTextPropertie.minNoOfLetter\"\n                  [maxlength]=\"getQuestion(question).plainTextPropertie.maxNoOfLetter\"\n                  class=\"form-control1 form-control-solid\" type=\"text\" [disabled]=\"buttonDisable || disableInput()\">\n                <textarea rows=\"3\" *ngIf=\"getQuestion(question).plainTextPropertie.maxNoOfLetter>100\"\n                  [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"\n                  [minlength]=\"getQuestion(question).plainTextPropertie.minNoOfLetter\"\n                  [maxlength]=\"getQuestion(question).plainTextPropertie.maxNoOfLetter\" [disabled]=\"buttonDisable || disableInput()\"\n                  class=\"form-control2 form-control-solid\"></textarea>\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\n                {{apiError[getQuestion(question).labelName]}}</div>\n            </div>\n            <!-- for Number -->\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'number'\">\n              <input [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"\n                [min]=\"getQuestion(question).numberPropertie.start\" [max]=\"getQuestion(question).numberPropertie.end\"\n                [disabled]=\"buttonDisable || disableInput()\" class=\"form-control1 form-control-solid\" type=\"number\"\n                (keypress)=\"isNumeric($event)\">\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\n                {{apiError[getQuestion(question).labelName]}}</div>\n            </div>\n            <!-- for Date -->\n            <div class=\"col-12 d-flex\" *ngIf=\"getQuestion(question).fieldDataType === 'date'\">\n              <input class=\"form-control1\" [matDatepicker]=\"picker\" [max]=\"getMaxdate(question)\"\n                [min]=\"getMindate(question)\" [(ngModel)]=\"answers[getQuestion(question).labelName]\"\n                (dateChange)=\"onSubmit('inputChange')\" [disabled]=\"buttonDisable || disableInput()\"\n                (click)=\"picker.open()\">\n              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n              <mat-datepicker #picker [disabled]=\"buttonDisable || disableInput()\"></mat-datepicker>\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\n                {{apiError[getQuestion(question).labelName]}}</div>\n            </div>\n            <!-- for Datagrid -->\n            <div class=\"table-responsive1\"\n              *ngIf=\"getQuestion(question).fieldDataType === 'dataGrid' && dataGridColumnsAnswerList[getQuestion(question).labelName] && dataGridColumnsAnswerList[getQuestion(question).labelName].length > 0\">\n              <table class=\"table table-head-custom table-head-bg table-borderless table-vertical-center\">\n                <thead>\n                  <th *ngFor=\"let column of getQuestion(question).dataGridProperties.dataGridColumns\">\n                    {{column.columnId}}</th>\n                  <th *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\n                  </th>\n                  <th *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\n                  </th>\n                </thead>\n                <tbody>\n                  <tr *ngFor=\"let column of dataGridColumnsAnswerList[getQuestion(question).labelName];let i =index\">\n                    <td *ngFor=\"let data of column | keyvalue\">\n                      <div\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) === 'date'\">\n                        {{data.value | date : newTimeDateFormat}}\n                      </div>\n                      <div\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) === 'bool'\">\n                        {{getBoolValue(data.value)}}\n                      </div>\n                      <div\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) !== 'date' && getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) !== 'bool'\">\n                        {{data.value}}\n                      </div>\n                    </td>\n                    <td *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\n                      <i class=\"fa fa-pen\" (click)=\"editDataGrid(getQuestion(question), column)\"></i>\n                    </td>\n                    <td *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\n                      <i class=\"fa fa-trash\" (click)=\"deleteDataGrid(getQuestion(question), column)\"></i>\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n            <div class=\"gridSection\" *ngIf=\"showDataGrid[getQuestion(question).labelName]\">\n              <div class=\"gridColumn\" *ngFor=\"let column of getQuestion(question).dataGridProperties.dataGridColumns\">\n                <label>{{column.label}}\n                  <span class=\"red\" *ngIf=\"column.mandatory\">*</span>\n                </label>\n                <!-- for checkbox -->\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'list'\">\n                  <div class=\"checkbox-list\">\n                    <label class=\"checkbox\" *ngFor=\"let value of column.listPropertie.values\">\n                      <input type=\"checkbox\" [checked]=\"isChecked(value, getQuestion(question), column)\"\n                        (change)=\"listChange($event, value, getQuestion(question), column)\"\n                        [disabled]=\"buttonDisable || disableInput()\">\n                      <span></span>\n                      {{value}}\n                    </label>\n                  </div>\n                </div>\n                <!-- for toggel boolean -->\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'bool'\">\n                  <div class=\"radio-list\">\n                    <label class=\"radio\">\n                      <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\n                        [checked]=\"isBooleanChecked('yes', getQuestion(question), column)\"\n                        (change)=\"booleanChange($event, 'yes', getQuestion(question), column)\">\n                      <span></span>\n                      Yes\n                    </label>\n                    <label class=\"radio\">\n                      <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\n                        [checked]=\"isBooleanChecked('no', getQuestion(question), column)\"\n                        (change)=\"booleanChange($event, 'no', getQuestion(question), column)\">\n                      <span></span>\n                      No\n                    </label>\n                  </div>\n                </div>\n                <!-- for Text -->\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'plainText'\">\n                  <input [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\n                    [disabled]=\"buttonDisable || disableInput()\" class=\"form-control1 form-control-solid\" type=\"text\">\n                </div>\n                <!-- for Number -->\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'number'\">\n                  <input [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\n                    [disabled]=\"buttonDisable || disableInput()\" [min]=\"column.numberPropertie.start\"\n                    [max]=\"column.numberPropertie.end\" class=\"form-control1 form-control-solid\" type=\"number\">\n                </div>\n                <!-- for Date -->\n                <div class=\"col-12 d-flex\" *ngIf=\"column.dataType === 'date'\">\n                  <input class=\"form-control1\" [matDatepicker]=\"picker\" [max]=\"getMaxdate(question)\"\n                    [min]=\"getMindate(question)\"\n                    [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\n                    [disabled]=\"buttonDisable || disableInput()\" (click)=\"picker.open()\">\n                  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                  <mat-datepicker #picker [disabled]=\"buttonDisable || disableInput()\">\n                  </mat-datepicker>\n                </div>\n              </div>\n              <div class=\"act-btns\">\n                <button type=\"button\" class=\"btn btn-light-primary font-weight-bold\" id=\"btnCancelQ\"\n                  (click)=\"cancelAddorUpdate(getQuestion(question))\">\n                  Cancel\n                </button>\n                <button type=\"button\" class=\"btn btn-primary font-weight-bold\" id=\"btnSaveQ\"\n                  (click)=\"saveDataGridColumn(getQuestion(question))\">Add</button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-md-12 col-12 col-sm-12 col-lg-12 p-0 submit-pad\"\n        *ngIf=\"type !== 'qnrLinkProvider' && source!=='proLead' && (uuid || source === 'customer-details' || source === 'proDonation') && !disableInput()\">\n        <button class=\"normal-btn\" mat-flat-button [class.spinner]=\"buttonDisable\" id=\"btnSubmit\"\n          [class.spinner-darker-success]=\"buttonDisable\" [class.spinner-center]=\"buttonDisable\"\n          (click)=\"!buttonDisable && onSubmit('submit')\" [disabled]=\"buttonDisable\"\n          [class.disabled]=\"buttonDisable\">{{(type == 'qnr-link') ? 'Submit' : 'Update'}}</button>\n      </div>\n    </div>\n  </div>\n</section>\n<section class=\"cons-inbox no-padding-small\" *ngIf=\"showservice\">\n  <div class=\"container consumer-dashhome\" *ngIf=\"!type\">\n    <div class=\"card title-gb rounded-0\" *ngIf=\"uuid\">\n      <h5 class=\"mt-2 bold\">{{questionnaire_heading | capitalizeFirst}} <a class=\"pull-left me-4 back-btn\"\n          (click)=\"goBack()\"><i class=\"fa fa-arrow-left\"></i></a></h5>\n    </div>\n  </div>\n  <app-common-innerloading-spinner *ngIf=\"loading\"></app-common-innerloading-spinner>\n  <div class=\"d-flex flex-column-fluid pull-right me-2 mb-4\"\n    *ngIf=\"type !== 'qnrLinkProvider' && !buttonDisable && waitlistStatus\">\n    <button class=\"normal-btn edit\" mat-flat-button (click)=\"editQnr()\" id=\"btnEditQNR\">Edit</button>\n  </div>\n  <div class=\"d-flex flex-column-fluid width-100\" [class.qnrDisableState]=\"disableInput()\"\n    [class.p-0]=\"uuid && (source === 'consCheckin' || source === 'consAppt' || source === 'consDonationDetails' )\">\n    <div class=\"col-xl-12 force_center p-0\" [class.p-0]=\"uuid\"\n      [class.no-padding-small]=\"source && source=='ivr'\">\n      <div class=\"\">\n        <div class=\"\" *ngFor=\"let qnr of groupedQnr | keyvalue\" [class.section-shadow]=\"getSectionCount() > 1\">\n          <div *ngIf=\"itemArray.length == 0 \">\n            <div class=\"form-group mgn-0 border-dashed text-center\" *ngFor=\"let question of qnr.value\">\n              <div class=\"qnr-section\" *ngIf=\"getSectionCount() > 1\">\n                {{getQuestion(question).question.sectionName}}</div>\n              <label class=\"col-12 quest pointer-cursor\"\n                (click)=\"showDataGridAddSectionn(getQuestion(question).question, true)\">\n                <div>\n                  <img src=\"{{cdnPath}}assets/images/service-options.svg\" alt=\"Service Options\" class=\"img-fluid pb-0\"\n                    width=\"300\" height=\"300\">\n                </div>\n                <div class=\"pro-only\" *ngIf=\"showProviderText(getQuestion(question).question)\">For Providers</div>\n                <span class=\"red\" *ngIf=\"getQuestion(question).question.mandatory\">*</span>\n                <div>\n                  <span class=\"text-primary font-weight-bold\">Please Choose your Pet</span>\n                </div>\n                <div class=\"mt-3\">\n                  <span class=\"btn btn-light font-weight-bold\">Continue</span>\n                </div>\n              </label>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-md-12 col-12 col-sm-12 mb-4 p-0\" *ngIf=\"showItem\">\n          <div>\n            <div class=\"card-border\" *ngFor=\" let items of itemArray\">\n\n              <div class=\"d-flex justify-content-between\">\n                <div>\n                  <div class=\"text-capitalize\">\n                    <div class=\"\">\n                      <span class=\"text-primary\">\n                        {{items.item}}<br>\n                      </span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"d-flex border-apply px-0\">\n                  <div (click)=\"decrement(items);\" class=\"pointer-cursor quantity quantity-1\">\n                    <span class=\"p-10\">-</span>\n                  </div>\n                  <div class=\"mx-2 pointer-cursor\"><span class=\"quantity\"\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\">\n                      {{items.columnItem[0].answer.dataGridList[0].dataGridListColumn[0].quantity}}</span>\n                  </div>\n                  <div (click)=\"increment(items);\" class=\"pointer-cursor quantity quantity-1\">\n                    <span class=\"p-10\">+</span>\n                  </div>\n                </div>\n              </div>\n              <div>\n                <span class=\"text-primary\"><span><i class=\"fa fa-inr\"></i>\n                    {{items.price * getItemQuantity(items)}}/-\n                  </span>\n                </span>\n              </div>\n            </div>\n            <div class=\"clearfix\"></div>\n            <div *ngIf=\"showItem &&itemArray.length > 0\">\n              <div *ngFor=\"let qnr of groupedQnr | keyvalue\" [class.section-shadow]=\"getSectionCount() > 1\">\n                <div *ngFor=\"let question of qnr.value\">\n                  <label class=\"col-12 quest pointer-cursor\"\n                    (click)=\"showDataGridAddSectionn(getQuestion(question).question, true)\">\n                    <span class=\"btn btn-light font-weight-bold\"><i class=\"fa fa-plus text-white\"></i>Add</span>\n                  </label>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\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" }] });
+    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 d-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 d-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\">\n  <div class=\"container consumer-dashhome p-0\" *ngIf=\"!type && source!='proLead'\">\n    <div class=\"card title-gb rounded-0\" *ngIf=\"uuid\">\n      <h5 class=\"mt-2 bold\">{{questionnaire_heading | capitalizeFirst}} <a class=\"pull-left me-4 back-btn\"\n          (click)=\"goBack()\"><i class=\"fa fa-arrow-left\"></i></a></h5>\n    </div>\n  </div>\n  <app-common-innerloading-spinner *ngIf=\"loading\"></app-common-innerloading-spinner>\n  <div class=\"d-flex flex-column-fluid pull-right me-2 mb-4\"\n    *ngIf=\"type !== 'qnrLinkProvider' && !buttonDisable && waitlistStatus\">\n    <button class=\"normal-btn edit\" mat-flat-button (click)=\"editQnr()\" id=\"btnEdit\">Edit</button>\n  </div>\n  <div class=\"d-flex flex-column-fluid width-100\" [class.qnrDisableState]=\"disableInput()\"\n    [class.p-0]=\"uuid && (source === 'consCheckin' || source === 'consAppt' || source === 'consOrder' || source === 'paper' || source === 'consDonationDetails' || source === 'ivr')\">\n    <div class=\"col-xl-12 force_center\" [class.p-0]=\"uuid\" [class.no-padding-small]=\"source && source=='ivr'\">\n      <div class=\"\">\n        <div class=\"qnrsec\" *ngFor=\"let qnr of groupedQnr | keyvalue: asIsOrder\"\n          [class.section-shadow]=\"getSectionCount() > 1\" [class.no-padding-small]=\"source && source=='ivr'\">\n          <div class=\"form-group card mgn-0\" *ngFor=\"let question of qnr.value\">\n            <label class=\"col-12 quest\">{{getQuestion(question).label}}\n              <i class=\"fa fa-plus-circle pull-right\" aria-hidden=\"true\"\n                [class.addicon]=\"!buttonDisable && !disableInput()\"\n                *ngIf=\"getQuestion(question).fieldDataType === 'dataGrid' && !showDataGrid[getQuestion(question).labelName]\"\n                (click)=\"!buttonDisable && !disableInput() && showDataGridAddSection(getQuestion(question), true)\"></i>\n              <div class=\"pro-only\" *ngIf=\"showProviderText(getQuestion(question))\">For Providers</div>\n              <span class=\"red\" *ngIf=\"getQuestion(question).mandatory\">*</span>\n              <div class=\"form-level-settings\" *ngIf=\"getQuestion(question).hint\"\n                [innerHTML]=\"getQuestion(question).hint | safeHtml\">\n              </div>\n            </label>\n            <!-- for file upload -->\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'fileUpload'\">\n              <mat-select multiple #deptsel [disabled]=\"buttonDisable || disableInput()\"\n                *ngIf=\"getQuestion(question).filePropertie.maxNoOfFile > 1 && getQuestion(question).filePropertie.minNoOfFile !== getQuestion(question).filePropertie.maxNoOfFile\"\n                [(ngModel)]=\"uploadFilesTemp[getQuestion(question).labelName]\" class=\"select-box\" placeholder=\"Select\">\n                <mat-option *ngFor=\"let document of getQuestion(question).filePropertie.allowedDocuments\"\n                  [value]=\"document\" (click)=\"changeImageSelected(getQuestion(question), document)\">\n                  {{document}}</mat-option>\n              </mat-select>\n              <div class=\"col-lg-12 col-12 col-md-12 col-sm-12 p-0 mt-4\"\n                *ngIf=\"getDocuments(getQuestion(question)) && getDocuments(getQuestion(question)).length > 0\">\n                <div class=\"dropzone dropzone-default dropzone-primary dz-clickable\"\n                  [class.single-file]=\"getQuestion(question).filePropertie.allowedDocuments.length==1\"\n                  style=\"cursor: auto;\">\n                  <ng-container *ngFor=\"let doc of getDocuments(getQuestion(question))\">\n                    <div class=\"dz-preview dz-processing dz-image-preview dz-error dz-complete\"\n                      *ngIf=\"getImg(getQuestion(question), doc)\">\n                      <div class=\"docname\" *ngIf=\"getQuestion(question).filePropertie.allowedDocuments.length > 1\">\n                        {{doc}}</div>\n                      <div class=\"dzimage pointer-cursor\" (click)=\"openAttachmentGallery(getQuestion(question), doc)\">\n                        <img alt=\"\" class=\"img_fit\" [src]=\"getImg(getQuestion(question), doc)\">\n                      </div>\n                      <input [disabled]=\"buttonDisable || disableInput()\" (blur)=\"onSubmit('inputChange');\"\n                        [(ngModel)]=\"comments[getQuestion(question).labelName + '=' + doc]\">\n                      <div class=\"gal_action\" *ngIf=\"!buttonDisable && !disableInput() && mode!=='read'\"\n                        (click)=\"changeImageSelected(getQuestion(question), doc)\">\n                        <i class=\"fa fa-times-circle\" aria-hidden=\"true\"></i>\n                      </div>\n                    </div>\n                    <div class=\"dz-preview dz-processing dz-image-preview dz-error dz-complete\"\n                      (click)=\"logofile1.click()\" *ngIf=\"!getImg(getQuestion(question), doc)\">\n                      <div class=\"docname\" *ngIf=\"getQuestion(question).filePropertie.allowedDocuments.length > 1\">\n                        {{doc}}</div>\n                      <div class=\"dz-image pointer-cursor\">\n                      </div>\n                      <input #logofile1 type=\"file\" accept=\"/*;capture=camera\" style=\"display:none;\"\n                        [disabled]=\"buttonDisable || disableInput()\"\n                        (change)=\"filesSelected($event, getQuestion(question), doc)\">\n                      <div class=\"dz-error-mark\">\n                        <a class=\"btn btn-icon btn-light-success btn-circle mr-2\"><i\n                            class=\"text-dark-50 flaticon-upload\"></i></a>\n                      </div>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\n                {{apiError[getQuestion(question).labelName]}}</div>\n            </div>\n            <!-- for checkbox -->\n            <div class=\"col-12\"\n              *ngIf=\"getQuestion(question).fieldDataType === 'list' && getQuestion(question).listPropertie.maxAnswers > 1\">\n              <div class=\"checkbox-list\">\n                <label class=\"checkbox\" *ngFor=\"let value of getQuestion(question).labelValues\">\n                  <input type=\"checkbox\" [checked]=\"isChecked(value, getQuestion(question))\"\n                    (change)=\"listChange($event, value, getQuestion(question))\"\n                    [disabled]=\"buttonDisable || disableInput()\">\n                  <span></span>\n                  {{value}}\n                </label>\n              </div>\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\n                {{apiError[getQuestion(question).labelName]}}</div>\n            </div>\n            <!-- for radio -->\n            <div class=\"col-12\"\n              *ngIf=\"getQuestion(question).fieldDataType === 'list' && getQuestion(question).listPropertie.maxAnswers === 1\">\n              <div class=\"radio-list\">\n                <label class=\"radio\" *ngFor=\"let value of getQuestion(question).labelValues\">\n                  <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\n                    [checked]=\"isChecked(value, getQuestion(question))\"\n                    (change)=\"listChange($event, value, getQuestion(question))\">\n                  <span></span>\n                  {{value}}\n                </label>\n              </div>\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\n                {{apiError[getQuestion(question).labelName]}}</div>\n            </div>\n            <!-- for toggel boolean -->\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'bool'\">\n              <div class=\"radio-list\">\n                <label class=\"radio\" *ngFor=\"let value of getQuestion(question).labelValues\">\n                  <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\n                    [checked]=\"isBooleanChecked(value, getQuestion(question))\"\n                    (change)=\"booleanChange($event, value, getQuestion(question))\">\n                  <span></span>\n                  {{value}}\n                </label>\n              </div>\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\n                {{apiError[getQuestion(question).labelName]}}</div>\n            </div>\n            <!-- for Text -->\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'plainText'\">\n              <input *ngIf=\"getQuestion(question).plainTextPropertie.maxNoOfLetter<=100\"\n                  [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"                  \n                  [minlength]=\"getQuestion(question).plainTextPropertie.minNoOfLetter\"\n                  [maxlength]=\"getQuestion(question).plainTextPropertie.maxNoOfLetter\"\n                  class=\"form-control1 form-control-solid\" type=\"text\" [disabled]=\"buttonDisable || disableInput()\">\n                <textarea rows=\"3\" *ngIf=\"getQuestion(question).plainTextPropertie.maxNoOfLetter>100\"\n                  [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"\n                  [minlength]=\"getQuestion(question).plainTextPropertie.minNoOfLetter\"\n                  [maxlength]=\"getQuestion(question).plainTextPropertie.maxNoOfLetter\" [disabled]=\"buttonDisable || disableInput()\"\n                  class=\"form-control2 form-control-solid\"></textarea>\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\n                {{apiError[getQuestion(question).labelName]}}</div>\n            </div>\n            <!-- for Number -->\n            <div class=\"col-12\" *ngIf=\"getQuestion(question).fieldDataType === 'number'\">\n              <input [(ngModel)]=\"answers[getQuestion(question).labelName]\" (input)=\"onSubmit('inputChange');\"\n                [min]=\"getQuestion(question).numberPropertie.start\" [max]=\"getQuestion(question).numberPropertie.end\"\n                [disabled]=\"buttonDisable || disableInput()\" class=\"form-control1 form-control-solid\" type=\"number\"\n                (keypress)=\"isNumeric($event)\">\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\n                {{apiError[getQuestion(question).labelName]}}</div>\n            </div>\n            <!-- for Date -->\n            <div class=\"col-12 d-flex\" *ngIf=\"getQuestion(question).fieldDataType === 'date'\">\n              <input class=\"form-control1\" [matDatepicker]=\"picker\" [max]=\"getMaxdate(question)\"\n                [min]=\"getMindate(question)\" [(ngModel)]=\"answers[getQuestion(question).labelName]\"\n                (dateChange)=\"onSubmit('inputChange')\" [disabled]=\"buttonDisable || disableInput()\"\n                (click)=\"picker.open()\">\n              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n              <mat-datepicker #picker [disabled]=\"buttonDisable || disableInput()\"></mat-datepicker>\n              <div class=\"mt-2 text-danger\" *ngIf=\"apiError[getQuestion(question).labelName]\">\n                {{apiError[getQuestion(question).labelName]}}</div>\n            </div>\n            <!-- for Datagrid -->\n            <div class=\"table-responsive1\"\n              *ngIf=\"getQuestion(question).fieldDataType === 'dataGrid' && dataGridColumnsAnswerList[getQuestion(question).labelName] && dataGridColumnsAnswerList[getQuestion(question).labelName].length > 0\">\n              <table class=\"table table-head-custom table-head-bg table-borderless table-vertical-center\">\n                <thead>\n                  <th *ngFor=\"let column of getQuestion(question).dataGridProperties.dataGridColumns\">\n                    {{column.columnId}}</th>\n                  <th *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\n                  </th>\n                  <th *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\n                  </th>\n                </thead>\n                <tbody>\n                  <tr *ngFor=\"let column of dataGridColumnsAnswerList[getQuestion(question).labelName];let i =index\">\n                    <td *ngFor=\"let data of column | keyvalue\">\n                      <div\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) === 'date'\">\n                        {{data.value | date : newTimeDateFormat}}\n                      </div>\n                      <div\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) === 'bool'\">\n                        {{getBoolValue(data.value)}}\n                      </div>\n                      <div\n                        *ngIf=\"getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) !== 'date' && getColumnType(getQuestion(question).dataGridProperties.dataGridColumns, data.key) !== 'bool'\">\n                        {{data.value}}\n                      </div>\n                    </td>\n                    <td *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\n                      <i class=\"fa fa-pen\" (click)=\"editDataGrid(getQuestion(question), column)\"></i>\n                    </td>\n                    <td *ngIf=\"!buttonDisable && !disableInput() && !showDataGrid[getQuestion(question).labelName]\">\n                      <i class=\"fa fa-trash\" (click)=\"deleteDataGrid(getQuestion(question), column)\"></i>\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n            <div class=\"gridSection\" *ngIf=\"showDataGrid[getQuestion(question).labelName]\">\n              <div class=\"gridColumn\" *ngFor=\"let column of getQuestion(question).dataGridProperties.dataGridColumns\">\n                <label>{{column.label}}\n                  <span class=\"red\" *ngIf=\"column.mandatory\">*</span>\n                </label>\n                <!-- for checkbox -->\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'list'\">\n                  <div class=\"checkbox-list\">\n                    <label class=\"checkbox\" *ngFor=\"let value of column.listPropertie.values\">\n                      <input type=\"checkbox\" [checked]=\"isChecked(value, getQuestion(question), column)\"\n                        (change)=\"listChange($event, value, getQuestion(question), column)\"\n                        [disabled]=\"buttonDisable || disableInput()\">\n                      <span></span>\n                      {{value}}\n                    </label>\n                  </div>\n                </div>\n                <!-- for toggel boolean -->\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'bool'\">\n                  <div class=\"radio-list\">\n                    <label class=\"radio\">\n                      <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\n                        [checked]=\"isBooleanChecked('yes', getQuestion(question), column)\"\n                        (change)=\"booleanChange($event, 'yes', getQuestion(question), column)\">\n                      <span></span>\n                      Yes\n                    </label>\n                    <label class=\"radio\">\n                      <input type=\"radio\" [disabled]=\"buttonDisable || disableInput()\"\n                        [checked]=\"isBooleanChecked('no', getQuestion(question), column)\"\n                        (change)=\"booleanChange($event, 'no', getQuestion(question), column)\">\n                      <span></span>\n                      No\n                    </label>\n                  </div>\n                </div>\n                <!-- for Text -->\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'plainText'\">\n                  <input [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\n                    [disabled]=\"buttonDisable || disableInput()\" class=\"form-control1 form-control-solid\" type=\"text\">\n                </div>\n                <!-- for Number -->\n                <div class=\"col-12\" *ngIf=\"column.dataType === 'number'\">\n                  <input [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\n                    [disabled]=\"buttonDisable || disableInput()\" [min]=\"column.numberPropertie.start\"\n                    [max]=\"column.numberPropertie.end\" class=\"form-control1 form-control-solid\" type=\"number\">\n                </div>\n                <!-- for Date -->\n                <div class=\"col-12 d-flex\" *ngIf=\"column.dataType === 'date'\">\n                  <input class=\"form-control1\" [matDatepicker]=\"picker\" [max]=\"getMaxdate(question)\"\n                    [min]=\"getMindate(question)\"\n                    [(ngModel)]=\"dataGridColumns[getQuestion(question).labelName + '=' + column.order]\"\n                    [disabled]=\"buttonDisable || disableInput()\" (click)=\"picker.open()\">\n                  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                  <mat-datepicker #picker [disabled]=\"buttonDisable || disableInput()\">\n                  </mat-datepicker>\n                </div>\n              </div>\n              <div class=\"act-btns\">\n                <button type=\"button\" class=\"btn btn-light-primary font-weight-bold\" id=\"btnCancelQ\"\n                  (click)=\"cancelAddorUpdate(getQuestion(question))\">\n                  Cancel\n                </button>\n                <button type=\"button\" class=\"btn btn-primary font-weight-bold\" id=\"btnSaveQ\"\n                  (click)=\"saveDataGridColumn(getQuestion(question))\">Add</button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-md-12 col-12 col-sm-12 col-lg-12 p-0 submit-pad\"\n        *ngIf=\"type !== 'qnrLinkProvider' && source!=='proLead' && (uuid || source === 'customer-details' || source === 'proDonation') && !disableInput()\">\n        <button class=\"normal-btn\" mat-flat-button [class.spinner]=\"buttonDisable\" id=\"btnSubmit\"\n          [class.spinner-darker-success]=\"buttonDisable\" [class.spinner-center]=\"buttonDisable\"\n          (click)=\"!buttonDisable && onSubmit('submit')\" [disabled]=\"buttonDisable\"\n          [class.disabled]=\"buttonDisable\">{{(type == 'qnr-link') ? 'Submit' : 'Update'}}</button>\n      </div>\n    </div>\n  </div>\n</section>\n<section class=\"cons-inbox no-padding-small\" *ngIf=\"showservice\">\n  <div class=\"container consumer-dashhome\" *ngIf=\"!type\">\n    <div class=\"card title-gb rounded-0\" *ngIf=\"uuid\">\n      <h5 class=\"mt-2 bold\">{{questionnaire_heading | capitalizeFirst}} <a class=\"pull-left me-4 back-btn\"\n          (click)=\"goBack()\"><i class=\"fa fa-arrow-left\"></i></a></h5>\n    </div>\n  </div>\n  <app-common-innerloading-spinner *ngIf=\"loading\"></app-common-innerloading-spinner>\n  <div class=\"d-flex flex-column-fluid pull-right me-2 mb-4\"\n    *ngIf=\"type !== 'qnrLinkProvider' && !buttonDisable && waitlistStatus\">\n    <button class=\"normal-btn edit\" mat-flat-button (click)=\"editQnr()\" id=\"btnEditQNR\">Edit</button>\n  </div>\n  <div class=\"d-flex flex-column-fluid width-100\" [class.qnrDisableState]=\"disableInput()\"\n    [class.p-0]=\"uuid && (source === 'consCheckin' || source === 'consAppt' || source === 'consDonationDetails' )\">\n    <div class=\"col-xl-12 force_center p-0\" [class.p-0]=\"uuid\"\n      [class.no-padding-small]=\"source && source=='ivr'\">\n      <div class=\"\">\n        <div class=\"\" *ngFor=\"let qnr of groupedQnr | keyvalue\" [class.section-shadow]=\"getSectionCount() > 1\">\n          <div *ngIf=\"itemArray.length == 0 \">\n            <div class=\"form-group mgn-0 border-dashed text-center\" *ngFor=\"let question of qnr.value\">\n              <div class=\"qnr-section\" *ngIf=\"getSectionCount() > 1\">\n                {{getQuestion(question).question.sectionName}}</div>\n              <label class=\"col-12 quest pointer-cursor\"\n                (click)=\"showDataGridAddSectionn(getQuestion(question).question, true)\">\n                <div>\n                  <img src=\"{{cdnPath}}assets/images/service-options.svg\" alt=\"Service Options\" class=\"img-fluid pb-0\"\n                    width=\"300\" height=\"300\">\n                </div>\n                <div class=\"pro-only\" *ngIf=\"showProviderText(getQuestion(question).question)\">For Providers</div>\n                <span class=\"red\" *ngIf=\"getQuestion(question).question.mandatory\">*</span>\n                <div>\n                  <span class=\"text-primary font-weight-bold\">Please Choose your Pet</span>\n                </div>\n                <div class=\"mt-3\">\n                  <span class=\"btn btn-light font-weight-bold\">Continue</span>\n                </div>\n              </label>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-md-12 col-12 col-sm-12 mb-4 p-0\" *ngIf=\"showItem\">\n          <div>\n            <div class=\"card-border\" *ngFor=\" let items of itemArray\">\n\n              <div class=\"d-flex justify-content-between\">\n                <div>\n                  <div class=\"text-capitalize\">\n                    <div class=\"\">\n                      <span class=\"text-primary\">\n                        {{items.item}}<br>\n                      </span>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"d-flex border-apply px-0\">\n                  <div (click)=\"decrement(items);\" class=\"pointer-cursor quantity quantity-1\">\n                    <span class=\"p-10\">-</span>\n                  </div>\n                  <div class=\"mx-2 pointer-cursor\"><span class=\"quantity\"\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\">\n                      {{items.columnItem[0].answer.dataGridList[0].dataGridListColumn[0].quantity}}</span>\n                  </div>\n                  <div (click)=\"increment(items);\" class=\"pointer-cursor quantity quantity-1\">\n                    <span class=\"p-10\">+</span>\n                  </div>\n                </div>\n              </div>\n              <div>\n                <span class=\"text-primary\"><span><i class=\"fa fa-inr\"></i>\n                    {{items.price * getItemQuantity(items)}}/-\n                  </span>\n                </span>\n              </div>\n            </div>\n            <div class=\"clearfix\"></div>\n            <div *ngIf=\"showItem &&itemArray.length > 0\">\n              <div *ngFor=\"let qnr of groupedQnr | keyvalue\" [class.section-shadow]=\"getSectionCount() > 1\">\n                <div *ngFor=\"let question of qnr.value\">\n                  <label class=\"col-12 quest pointer-cursor\"\n                    (click)=\"showDataGridAddSectionn(getQuestion(question).question, true)\">\n                    <span class=\"btn btn-light font-weight-bold\"><i class=\"fa fa-plus text-white\"></i>Add</span>\n                  </label>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\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"] }]
+            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 d-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 d-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: [{
@@ -6754,7 +6730,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\">\n    <input #phoneInput type=\"tel\" [(ngModel)]=\"phoneNumber.number\"\n        name=\"phoneNumber\" [required]=\"true\" #phone=\"ngModel\"\n        [ngClass]=\"{'is-invalid': !validatePhoneNumber() && phone.touched}\">\n\n    <!-- Validation feedback -->\n    <!-- <div *ngIf=\"!validatePhoneNumber() && phone.touched\" class=\"text-danger\">\n        Invalid phone number.\n    </div> -->\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"] }] });
+        ], 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,
@@ -6764,7 +6740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => PhoneInputComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"phone-input-wrapper tel-input-container\">\n    <input #phoneInput type=\"tel\" [(ngModel)]=\"phoneNumber.number\"\n        name=\"phoneNumber\" [required]=\"true\" #phone=\"ngModel\"\n        [ngClass]=\"{'is-invalid': !validatePhoneNumber() && phone.touched}\">\n\n    <!-- Validation feedback -->\n    <!-- <div *ngIf=\"!validatePhoneNumber() && phone.touched\" class=\"text-danger\">\n        Invalid phone number.\n    </div> -->\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"] }]
+                    ], 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"] }]
         }], propDecorators: { initialCountry: [{
                 type: Input
             }], preferredCountries: [{
@@ -6873,11 +6849,11 @@ 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)\">\n    <div *ngFor=\"let modes of paymentModes\">\n        <mat-radio-button class=\"pay-rad mt-1 ml-auto\" [value]=\"modes.mode\" >\n            <div>\n                <div>\n                    <img class=\"pay-icons\" [src]=\"getImageSrc(modes.mode)\" alt=\"\">\n                </div>\n                <div class=\"modeName\">\n                    <div *ngIf=\"modes.modeDisplayName === 'UPI'\">                      \n                        <div>{{modes.modeDisplayName |uppercase }}</div>\n                    </div>\n                    <div *ngIf=\"modes.modeDisplayName === 'Credit Card'\">\n                        <div>{{modes.modeDisplayName |uppercase }}</div>\n                    </div>\n                    <div *ngIf=\"modes.modeDisplayName === 'Debit Card'\">\n                       <div> {{modes.modeDisplayName |uppercase }}</div>\n                    </div>\n                    <div *ngIf=\"modes.modeDisplayName === 'Net Banking'\">\n                       <div> {{modes.modeDisplayName |uppercase }}</div>\n                    </div>\n                    <div *ngIf=\"modes.modeDisplayName === 'Wallet'\">\n                       <div> {{modes.modeDisplayName |uppercase }} </div>\n                    </div>\n                    <div *ngIf=\"modes.mode === 'PAYLATER'\">\n                       <div> {{modes.modeDisplayName |uppercase }} </div>\n                    </div>                   \n                </div>\n            </div>\n        </mat-radio-button>        \n    </div>\n    <div>\n        <mat-radio-button class=\"pay-rad mt-1 ml-auto\" [value]=\"'cash'\" *ngIf=\"cashPay\">\n            <div class=\"clearfix\"></div>\n            <div class=\"col-12 p-0 pay-mode \">\n                <div class=\"d-flex\">\n                    <img class=\"pay-icons\" [src]=\"getImageSrc('PAYCASH')\" alt=\"\">\n                </div>\n                <div class=\"col-12 p-0 text-center\">\n                    Pay by Cash\n                </div>\n            </div>\n        </mat-radio-button>\n    </div>\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" }] });
+    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,
-            args: [{ selector: 'app-payment-modes', template: "<mat-radio-group class=\"text-center mx-auto payment-mode-fw\" name=\"paymentMode\" (change)=\"paymentModeSelected($event)\">\n    <div *ngFor=\"let modes of paymentModes\">\n        <mat-radio-button class=\"pay-rad mt-1 ml-auto\" [value]=\"modes.mode\" >\n            <div>\n                <div>\n                    <img class=\"pay-icons\" [src]=\"getImageSrc(modes.mode)\" alt=\"\">\n                </div>\n                <div class=\"modeName\">\n                    <div *ngIf=\"modes.modeDisplayName === 'UPI'\">                      \n                        <div>{{modes.modeDisplayName |uppercase }}</div>\n                    </div>\n                    <div *ngIf=\"modes.modeDisplayName === 'Credit Card'\">\n                        <div>{{modes.modeDisplayName |uppercase }}</div>\n                    </div>\n                    <div *ngIf=\"modes.modeDisplayName === 'Debit Card'\">\n                       <div> {{modes.modeDisplayName |uppercase }}</div>\n                    </div>\n                    <div *ngIf=\"modes.modeDisplayName === 'Net Banking'\">\n                       <div> {{modes.modeDisplayName |uppercase }}</div>\n                    </div>\n                    <div *ngIf=\"modes.modeDisplayName === 'Wallet'\">\n                       <div> {{modes.modeDisplayName |uppercase }} </div>\n                    </div>\n                    <div *ngIf=\"modes.mode === 'PAYLATER'\">\n                       <div> {{modes.modeDisplayName |uppercase }} </div>\n                    </div>                   \n                </div>\n            </div>\n        </mat-radio-button>        \n    </div>\n    <div>\n        <mat-radio-button class=\"pay-rad mt-1 ml-auto\" [value]=\"'cash'\" *ngIf=\"cashPay\">\n            <div class=\"clearfix\"></div>\n            <div class=\"col-12 p-0 pay-mode \">\n                <div class=\"d-flex\">\n                    <img class=\"pay-icons\" [src]=\"getImageSrc('PAYCASH')\" alt=\"\">\n                </div>\n                <div class=\"col-12 p-0 text-center\">\n                    Pay by Cash\n                </div>\n            </div>\n        </mat-radio-button>\n    </div>\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"] }]
+            args: [{ selector: 'app-payment-modes', 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"] }]
         }], ctorParameters: () => [{ type: SharedService }], propDecorators: { cashPay: [{
                 type: Input
             }], paymentModes: [{
@@ -6940,11 +6916,11 @@ 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'\">\n    Your camera is blocked\n</h1>\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='b-both'\">\n    Camera and microphone are blocked\n</h1>\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='b-mic'\">\n    Your microphone are blocked\n</h1>\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='sys-mic'\">\n    No audio devices found\n</h1>\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='sys-cam'\">\n    No video devices found\n</h1>\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='sys-both'\">\n    No audio/video devices found\n</h1>\n<div mat-dialog-content class=\"text-container\">\n    <div class=\"col-md-12 no-padding text-content\" *ngIf=\"mode==='b-both' || mode==='b-cam' || mode==='b-mic'\">\n        <div class=\"col-md-12 mgn-bt-20 no-padding text-content-text\">\n            Jaldee Videocall requires access to your camera/microphone so that other participants can hear/see\n            you.\n\n            To unblock,\n\n            <ul>\n                <li>\n                    Make sure you close any applications in your system that currently uses your microphone/camera.\n                </li>\n                <li style=\"list-style: none !important; margin-top: 10px;margin-bottom: 10px;\">Or</li>\n                <li>\n                    Click the camera blocked icon on your browser's address bar, allow access and refresh your page.\n                </li>\n                <li style=\"list-style: none !important; margin-top: 10px;margin-bottom: 10px;\">Or</li>\n                <li>\n                    Allow access to your microphone/camera in your in your App settings.\n                </li>\n            </ul>\n        </div>\n        <div class=\"col-md-12 no-padding\">\n            <a class=\"pull-right dismiss-action\" (click)=\"dismissModal()\">Dismiss</a>\n        </div>\n    </div>\n    <div class=\"col-md-12 no-padding text-content\" *ngIf=\"mode==='sys-both'\">\n        <div class=\"col-md-12 mgn-bt-20 no-padding text-content-text\">\n            Jaldee Videocall requires access to your camera and microphone so that other participants can see and hear\n            you, but no audio/video devices found.\n        </div>\n        <div class=\"col-md-12 no-padding\">\n            <a class=\"pull-right dismiss-action\" (click)=\"dismissModal()\">Dismiss</a>\n        </div>\n    </div>\n    <div class=\"col-md-12 no-padding text-content\" *ngIf=\"mode==='sys-cam'\">\n        <div class=\"col-md-12 mgn-bt-20 no-padding text-content-text\">\n            Jaldee Videocall requires access to your camera so that other participants can hear\n            you, but no video devices found.\n        </div>\n        <div class=\"col-md-12 no-padding\">\n            <a class=\"pull-right dismiss-action\" (click)=\"dismissModal()\">Dismiss</a>\n        </div>\n    </div>\n    <div class=\"col-md-12 no-padding text-content\" *ngIf=\"mode==='sys-mic'\">\n        <div class=\"col-md-12 mgn-bt-20 no-padding text-content-text\">\n            Jaldee Videocall requires access to your microphone so that other participants can hear\n            you but no audio devices found.\n        </div>\n        <div class=\"col-md-12 no-padding\">\n            <a class=\"pull-right dismiss-action\" (click)=\"dismissModal()\">Dismiss</a>\n        </div>\n    </div>\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"] }] });
+    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,
-            args: [{ selector: 'app-request-dialog', template: "<h1 class=\"mat-dialog-title head\" *ngIf=\"mode==='b-cam'\">\n    Your camera is blocked\n</h1>\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='b-both'\">\n    Camera and microphone are blocked\n</h1>\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='b-mic'\">\n    Your microphone are blocked\n</h1>\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='sys-mic'\">\n    No audio devices found\n</h1>\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='sys-cam'\">\n    No video devices found\n</h1>\n<h1 class=\"mat-dialog-title\" *ngIf=\"mode==='sys-both'\">\n    No audio/video devices found\n</h1>\n<div mat-dialog-content class=\"text-container\">\n    <div class=\"col-md-12 no-padding text-content\" *ngIf=\"mode==='b-both' || mode==='b-cam' || mode==='b-mic'\">\n        <div class=\"col-md-12 mgn-bt-20 no-padding text-content-text\">\n            Jaldee Videocall requires access to your camera/microphone so that other participants can hear/see\n            you.\n\n            To unblock,\n\n            <ul>\n                <li>\n                    Make sure you close any applications in your system that currently uses your microphone/camera.\n                </li>\n                <li style=\"list-style: none !important; margin-top: 10px;margin-bottom: 10px;\">Or</li>\n                <li>\n                    Click the camera blocked icon on your browser's address bar, allow access and refresh your page.\n                </li>\n                <li style=\"list-style: none !important; margin-top: 10px;margin-bottom: 10px;\">Or</li>\n                <li>\n                    Allow access to your microphone/camera in your in your App settings.\n                </li>\n            </ul>\n        </div>\n        <div class=\"col-md-12 no-padding\">\n            <a class=\"pull-right dismiss-action\" (click)=\"dismissModal()\">Dismiss</a>\n        </div>\n    </div>\n    <div class=\"col-md-12 no-padding text-content\" *ngIf=\"mode==='sys-both'\">\n        <div class=\"col-md-12 mgn-bt-20 no-padding text-content-text\">\n            Jaldee Videocall requires access to your camera and microphone so that other participants can see and hear\n            you, but no audio/video devices found.\n        </div>\n        <div class=\"col-md-12 no-padding\">\n            <a class=\"pull-right dismiss-action\" (click)=\"dismissModal()\">Dismiss</a>\n        </div>\n    </div>\n    <div class=\"col-md-12 no-padding text-content\" *ngIf=\"mode==='sys-cam'\">\n        <div class=\"col-md-12 mgn-bt-20 no-padding text-content-text\">\n            Jaldee Videocall requires access to your camera so that other participants can hear\n            you, but no video devices found.\n        </div>\n        <div class=\"col-md-12 no-padding\">\n            <a class=\"pull-right dismiss-action\" (click)=\"dismissModal()\">Dismiss</a>\n        </div>\n    </div>\n    <div class=\"col-md-12 no-padding text-content\" *ngIf=\"mode==='sys-mic'\">\n        <div class=\"col-md-12 mgn-bt-20 no-padding text-content-text\">\n            Jaldee Videocall requires access to your microphone so that other participants can hear\n            you but no audio devices found.\n        </div>\n        <div class=\"col-md-12 no-padding\">\n            <a class=\"pull-right dismiss-action\" (click)=\"dismissModal()\">Dismiss</a>\n        </div>\n    </div>\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"] }]
+            args: [{ selector: 'app-request-dialog', 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"] }]
         }], ctorParameters: () => [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]