import { Component, Input, ViewChild, ElementRef, HostListener, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../../services/common.service";
import * as i2 from "@angular/common";
import * as i3 from "../../../ui-kit/tooltip/tooltip.directive";
import * as i4 from "ngx-material-timepicker";
import * as i5 from "ng2-date-picker";
import * as i6 from "../quick-settings/quick-settings.component";
import * as i7 from "../description-preview/description-preview.component";
export class DateTimeComponent {
    constructor(commonService) {
        this.commonService = commonService;
        this.datepickerOverlay = false;
    }
    openDatePicker() {
        this.datePicker?.api?.open();
        this.datepickerOverlay = true;
    }
    closeDatepicker() {
        this.datePicker?.api?.close();
        this.datepickerOverlay = false;
    }
    documentClick(event) {
        const datePickerObject = {
            event: event,
            class: 'preview-date',
            popup: this.datePickerPopUp,
            component: this.datePicker,
            overlay: this.datepickerOverlay,
        };
        this.commonService.handleDocumentClick(datePickerObject);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimeComponent, deps: [{ token: i1.CommonService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateTimeComponent, selector: "app-date-time", inputs: { question: "question", questionIndex: "questionIndex" }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "datePickerPopUp", first: true, predicate: ["datePicker"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"question-block vx-mb-1 vx-p-4\">\n  <div class=\"question-heading vx-pb-3 vx-mb-3\">\n    <span\n      class=\"count vx-fs-13 vx-fw-400 vx-label-txt vx-d-flex vx-align-center vx-justify-center\"\n      >{{ questionIndex }}</span\n    >\n    <span class=\"heading\">\n      <span\n        [innerHTML]=\"question?.title == '' ? 'Question' : question?.title\"\n        class=\"vx-fs-16 vx-label-txt vx-lh-6\"\n      ></span>\n      <span\n        *ngIf=\"question?.isRequired\"\n        class=\"required vx-fs-20 vx-fw-300 vx-ml-1\"\n        >*</span\n      >\n    </span>\n  </div>\n  <div class=\"question-inner vx-d-flex vx-justify-between\">\n    <div class=\"question-inner-inside\">\n      <ng-container\n        *ngIf=\"\n          question?.hasDescription && question?.description?.trim().length > 0\n        \"\n      >\n        <app-description-preview\n          [questionIndex]=\"questionIndex\"\n          [description]=\"question?.description\"\n        ></app-description-preview>\n      </ng-container>\n      <div class=\"question-option\">\n        <div class=\"textbox-group vx-mt-5\">\n          <div class=\"input-group vx-d-flex vx-mb-2\" *ngIf=\"question?.hasDate\">\n            <span\n              class=\"label vx-bg-grey vx-label-txt vx-lh-24 vx-d-flex vx-tt-uppercase vx-fs-11 vx-text-center vx-p-2 vx-justify-center vx-align-center\"\n              ><span\n                class=\"vx-d-block\"\n                [appTooltip]=\"\n                  question?.date?.title == ''\n                    ? 'Date Label'\n                    : question?.date?.title\n                \"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                type=\"black\"\n                [tooltipMandatory]=\"false\"\n                >{{\n                  question?.date?.title == \"\"\n                    ? \"Date Label\"\n                    : question?.date?.title\n                }}</span\n              ></span\n            >\n            <div class=\"date-time-area\">\n              <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe996;</i>\n              <input\n                class=\"datePicker\"\n                (click)=\"openDatePicker()\"\n                placeholder=\"Select Date\"\n                id=\"preview-date\"\n              />\n              <dp-date-picker\n                #datePicker\n                placeholder=\"Select Date\"\n                (click)=\"openDatePicker()\"\n                (click)=\"closeDatepicker()\"\n              ></dp-date-picker>\n              <div\n                class=\"overlay\"\n                (click)=\"closeDatepicker()\"\n                *ngIf=\"datepickerOverlay\"\n              ></div>\n            </div>\n          </div>\n          <div class=\"input-group vx-d-flex vx-mb-10\" *ngIf=\"question?.hasTime\">\n            <span\n              class=\"label vx-bg-grey vx-label-txt vx-lh-24 vx-d-flex vx-tt-uppercase vx-fs-11 vx-text-center vx-p-2 vx-justify-center vx-align-center\"\n              ><span\n                class=\"vx-d-block\"\n                [appTooltip]=\"\n                  question?.time?.title == ''\n                    ? 'Time Label'\n                    : question?.time?.title\n                \"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                type=\"black\"\n                [tooltipMandatory]=\"false\"\n                >{{\n                  question?.time?.title == \"\"\n                    ? \"Time Label\"\n                    : question?.time?.title\n                }}</span\n              ></span\n            >\n            <div class=\"date-time-area\">\n              <input\n                aria-label=\"12hr format\"\n                [ngxTimepicker]=\"timeOnly\"\n                readonly\n                placeholder=\"Select Time\"\n              />\n              <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe955;</i>\n              <ngx-material-timepicker #timeOnly></ngx-material-timepicker>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"question-quickSettings\">\n      <app-quick-settings [question]=\"question\"></app-quick-settings>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .question-block{background:#f8f8f8;border-radius:.25rem;position:relative;min-height:12.5rem}::ng-deep .question-heading{border-bottom:1px solid #dbdbdb;position:relative}::ng-deep .question-heading .count{background:#dbdbdb;border-radius:50%;border:.5rem solid #fff;min-width:2.75rem;height:2.75rem;position:absolute;top:-.625rem;left:-3.25rem}::ng-deep .question-heading .heading .required{color:#c7381b;position:relative;top:-.25rem}::ng-deep .question-inner{position:relative}::ng-deep .question-inner-inside{padding-right:4rem}@media screen and (max-width: 667px){::ng-deep .question-inner-inside{padding-right:2.5rem!important;width:100%!important}}::ng-deep .question-option .textbox-group{display:block;max-width:31.25rem}::ng-deep .question-option .textbox-group .input-group{border:1px solid #f1f1f1;border-radius:.25rem;position:relative}::ng-deep .question-option .textbox-group .input-group .label{width:5.875rem}::ng-deep .question-option .textbox-group .input-group .label .date-time-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .question-option .textbox-group .input-group .date-time-area{background:#fff;border-radius:0 .25rem .25rem 0;width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .question-option .textbox-group .input-group .date-time-area input{font-family:Poppins,sans-serif!important;background:transparent;border:none;border-radius:0;font-size:11px!important;color:#747476!important;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .question-option .textbox-group .input-group .date-time-area input::placeholder{font-size:11px!important;color:#74757690!important;font-weight:400}::ng-deep .question-option .textbox-group .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .question-option .textbox-group .input-group .date-time-area .overlay{z-index:2}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker{width:100%}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper{padding:0}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{padding:0!important;position:relative!important;top:-.25rem!important;left:.5rem!important;z-index:1!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix input.preview-datepicker-input{color:#747576!important;width:87%!important;padding-left:0!important;font-size:11px!important;top:-.25rem!important;font-family:Poppins,sans-serif!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix input.preview-datepicker-input::placeholder{font-size:11px!important;color:#747576!important;font-weight:400!important;opacity:1!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label-wrapper .mat-form-field-label span{font-size:11px!important;color:#74757690!important;font-family:Poppins,sans-serif!important;position:relative!important;top:-1px!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix{position:absolute!important;height:2.5rem!important;top:-1px!important;z-index:2!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix mat-datepicker-toggle button{height:2.5rem!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix mat-datepicker-toggle button .mat-button-wrapper svg{width:1.125rem!important;position:relative!important;right:.375rem!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-underline,::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-subscript-wrapper{display:none!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker.mat-form-field-should-float .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label-wrapper{display:none!important}::ng-deep .question-quickSettings{position:absolute;top:0;right:0}::ng-deep .mat-form-field-suffix{position:absolute;width:100%;height:45px;top:6px}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle{position:absolute;left:0;top:0;width:100%}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle.mat-datepicker-toggle-active{color:#1e5dd3}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button{width:100%;text-align:left;height:70px;border-radius:0}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button ::ng-deep .mat-button-focus-overlay{opacity:0;display:none}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button ::ng-deep .mat-button-ripple.mat-ripple{display:none}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button svg{width:25px!important;float:right}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i4.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i4.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }, { kind: "component", type: i5.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "component", type: i6.QuickSettingsComponent, selector: "app-quick-settings", inputs: ["question"] }, { kind: "component", type: i7.DescriptionPreviewComponent, selector: "app-description-preview", inputs: ["questionIndex", "description"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-date-time', template: "<div class=\"question-block vx-mb-1 vx-p-4\">\n  <div class=\"question-heading vx-pb-3 vx-mb-3\">\n    <span\n      class=\"count vx-fs-13 vx-fw-400 vx-label-txt vx-d-flex vx-align-center vx-justify-center\"\n      >{{ questionIndex }}</span\n    >\n    <span class=\"heading\">\n      <span\n        [innerHTML]=\"question?.title == '' ? 'Question' : question?.title\"\n        class=\"vx-fs-16 vx-label-txt vx-lh-6\"\n      ></span>\n      <span\n        *ngIf=\"question?.isRequired\"\n        class=\"required vx-fs-20 vx-fw-300 vx-ml-1\"\n        >*</span\n      >\n    </span>\n  </div>\n  <div class=\"question-inner vx-d-flex vx-justify-between\">\n    <div class=\"question-inner-inside\">\n      <ng-container\n        *ngIf=\"\n          question?.hasDescription && question?.description?.trim().length > 0\n        \"\n      >\n        <app-description-preview\n          [questionIndex]=\"questionIndex\"\n          [description]=\"question?.description\"\n        ></app-description-preview>\n      </ng-container>\n      <div class=\"question-option\">\n        <div class=\"textbox-group vx-mt-5\">\n          <div class=\"input-group vx-d-flex vx-mb-2\" *ngIf=\"question?.hasDate\">\n            <span\n              class=\"label vx-bg-grey vx-label-txt vx-lh-24 vx-d-flex vx-tt-uppercase vx-fs-11 vx-text-center vx-p-2 vx-justify-center vx-align-center\"\n              ><span\n                class=\"vx-d-block\"\n                [appTooltip]=\"\n                  question?.date?.title == ''\n                    ? 'Date Label'\n                    : question?.date?.title\n                \"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                type=\"black\"\n                [tooltipMandatory]=\"false\"\n                >{{\n                  question?.date?.title == \"\"\n                    ? \"Date Label\"\n                    : question?.date?.title\n                }}</span\n              ></span\n            >\n            <div class=\"date-time-area\">\n              <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe996;</i>\n              <input\n                class=\"datePicker\"\n                (click)=\"openDatePicker()\"\n                placeholder=\"Select Date\"\n                id=\"preview-date\"\n              />\n              <dp-date-picker\n                #datePicker\n                placeholder=\"Select Date\"\n                (click)=\"openDatePicker()\"\n                (click)=\"closeDatepicker()\"\n              ></dp-date-picker>\n              <div\n                class=\"overlay\"\n                (click)=\"closeDatepicker()\"\n                *ngIf=\"datepickerOverlay\"\n              ></div>\n            </div>\n          </div>\n          <div class=\"input-group vx-d-flex vx-mb-10\" *ngIf=\"question?.hasTime\">\n            <span\n              class=\"label vx-bg-grey vx-label-txt vx-lh-24 vx-d-flex vx-tt-uppercase vx-fs-11 vx-text-center vx-p-2 vx-justify-center vx-align-center\"\n              ><span\n                class=\"vx-d-block\"\n                [appTooltip]=\"\n                  question?.time?.title == ''\n                    ? 'Time Label'\n                    : question?.time?.title\n                \"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                type=\"black\"\n                [tooltipMandatory]=\"false\"\n                >{{\n                  question?.time?.title == \"\"\n                    ? \"Time Label\"\n                    : question?.time?.title\n                }}</span\n              ></span\n            >\n            <div class=\"date-time-area\">\n              <input\n                aria-label=\"12hr format\"\n                [ngxTimepicker]=\"timeOnly\"\n                readonly\n                placeholder=\"Select Time\"\n              />\n              <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe955;</i>\n              <ngx-material-timepicker #timeOnly></ngx-material-timepicker>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"question-quickSettings\">\n      <app-quick-settings [question]=\"question\"></app-quick-settings>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .question-block{background:#f8f8f8;border-radius:.25rem;position:relative;min-height:12.5rem}::ng-deep .question-heading{border-bottom:1px solid #dbdbdb;position:relative}::ng-deep .question-heading .count{background:#dbdbdb;border-radius:50%;border:.5rem solid #fff;min-width:2.75rem;height:2.75rem;position:absolute;top:-.625rem;left:-3.25rem}::ng-deep .question-heading .heading .required{color:#c7381b;position:relative;top:-.25rem}::ng-deep .question-inner{position:relative}::ng-deep .question-inner-inside{padding-right:4rem}@media screen and (max-width: 667px){::ng-deep .question-inner-inside{padding-right:2.5rem!important;width:100%!important}}::ng-deep .question-option .textbox-group{display:block;max-width:31.25rem}::ng-deep .question-option .textbox-group .input-group{border:1px solid #f1f1f1;border-radius:.25rem;position:relative}::ng-deep .question-option .textbox-group .input-group .label{width:5.875rem}::ng-deep .question-option .textbox-group .input-group .label .date-time-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .question-option .textbox-group .input-group .date-time-area{background:#fff;border-radius:0 .25rem .25rem 0;width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .question-option .textbox-group .input-group .date-time-area input{font-family:Poppins,sans-serif!important;background:transparent;border:none;border-radius:0;font-size:11px!important;color:#747476!important;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .question-option .textbox-group .input-group .date-time-area input::placeholder{font-size:11px!important;color:#74757690!important;font-weight:400}::ng-deep .question-option .textbox-group .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .question-option .textbox-group .input-group .date-time-area .overlay{z-index:2}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker{width:100%}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper{padding:0}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{padding:0!important;position:relative!important;top:-.25rem!important;left:.5rem!important;z-index:1!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix input.preview-datepicker-input{color:#747576!important;width:87%!important;padding-left:0!important;font-size:11px!important;top:-.25rem!important;font-family:Poppins,sans-serif!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix input.preview-datepicker-input::placeholder{font-size:11px!important;color:#747576!important;font-weight:400!important;opacity:1!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label-wrapper .mat-form-field-label span{font-size:11px!important;color:#74757690!important;font-family:Poppins,sans-serif!important;position:relative!important;top:-1px!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix{position:absolute!important;height:2.5rem!important;top:-1px!important;z-index:2!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix mat-datepicker-toggle button{height:2.5rem!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix mat-datepicker-toggle button .mat-button-wrapper svg{width:1.125rem!important;position:relative!important;right:.375rem!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-underline,::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-subscript-wrapper{display:none!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker.mat-form-field-should-float .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label-wrapper{display:none!important}::ng-deep .question-quickSettings{position:absolute;top:0;right:0}::ng-deep .mat-form-field-suffix{position:absolute;width:100%;height:45px;top:6px}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle{position:absolute;left:0;top:0;width:100%}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle.mat-datepicker-toggle-active{color:#1e5dd3}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button{width:100%;text-align:left;height:70px;border-radius:0}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button ::ng-deep .mat-button-focus-overlay{opacity:0;display:none}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button ::ng-deep .mat-button-ripple.mat-ripple{display:none}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button svg{width:25px!important;float:right}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.CommonService }]; }, propDecorators: { question: [{
                type: Input
            }], questionIndex: [{
                type: Input
            }], datePicker: [{
                type: ViewChild,
                args: ['datePicker']
            }], datePickerPopUp: [{
                type: ViewChild,
                args: ['datePicker', { read: ElementRef, static: false }]
            }], documentClick: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 