import { Component, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild, } 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 "@angular/forms";
import * as i4 from "../../../../../ui-kit/tooltip/tooltip.directive";
import * as i5 from "ng2-date-picker";
import * as i6 from "ngx-material-timepicker";
export class LogicDateTimeComponent {
    constructor(commonService) {
        this.commonService = commonService;
        this.datepickerOverlay = false;
        this.changeEvent = new EventEmitter();
    }
    ngOnInit() { }
    openDatePicker() {
        this.datePicker?.api?.open();
        this.datepickerOverlay = true;
    }
    closeDatepicker() {
        this.datePicker?.api?.close();
        this.datepickerOverlay = false;
    }
    dateChanged(evt) { }
    timeChanged(evt) { }
    documentClick(event) {
        const datePickerObject = {
            event: event,
            class: 'date-picker',
            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: LogicDateTimeComponent, deps: [{ token: i1.CommonService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LogicDateTimeComponent, selector: "app-logic-date-time", inputs: { question: "question" }, outputs: { changeEvent: "changeEvent" }, 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=\"logic-date-time vx-mb-5\">\n  <div class=\"input-group vx-d-flex vx-mb-2\" *ngIf=\"question.hasDate\">\n    <span\n      class=\"label vx-bg-grey vx-lh-24 vx-d-flex vx-text-center vx-p-2 vx-justify-center vx-align-center\"\n    >\n      <span\n        class=\"value vx-fs-11 vx-label-txt vx-tt-uppercase\"\n        [appTooltip]=\"'Date of birth'\"\n        placement=\"bottom-left\"\n        delay=\"0\"\n        type=\"black\"\n        [tooltipMandatory]=\"false\"\n        >{{ question?.date?.title ? question?.date?.title : \"Date\" }}</span\n      >\n    </span>\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=\"Enter Date\"\n        id=\"date-picker\"\n      />\n      <dp-date-picker\n        (onChange)=\"dateChanged($event)\"\n        [(ngModel)]=\"question.date.value\"\n        #datePicker\n        [config]=\"{ disableKeypress: true, format: 'DD MMM YYYY' }\"\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-lh-24 vx-d-flex vx-text-center vx-p-2 vx-justify-center vx-align-center\"\n    >\n      <span\n        class=\"value vx-fs-11 vx-label-txt vx-tt-uppercase\"\n        [appTooltip]=\"'Time of birth'\"\n        placement=\"bottom-left\"\n        delay=\"0\"\n        type=\"black\"\n        [tooltipMandatory]=\"false\"\n        >{{ question?.time?.title ? question?.time?.title : \"Time\" }}</span\n      >\n    </span>\n    <div class=\"date-time-area\">\n      <input\n        aria-label=\"12hr format\"\n        [ngxTimepicker]=\"timeOnly\"\n        readonly\n        placeholder=\"Enter Time\"\n        [(ngModel)]=\"question.time.value\"\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", 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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.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 .logic-date-time{display:block;max-width:37.5rem}::ng-deep .logic-date-time .input-group{border:1px solid #F1F1F1;border-radius:.25rem;position:relative}::ng-deep .logic-date-time .input-group .label{width:5.875rem}::ng-deep .logic-date-time .input-group .label .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}::ng-deep .logic-date-time .input-group .date-time-area{width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .logic-date-time .input-group .date-time-area input{background:transparent;border:none;border-radius:0;font-size:12px;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .logic-date-time .input-group .date-time-area input::placeholder{color:#747576;opacity:1}::ng-deep .logic-date-time .input-group .date-time-area input.datePicker{opacity:0}::ng-deep .logic-date-time .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .logic-date-time .input-group .date-time-area .overlay{z-index:2}::ng-deep dp-date-picker input.dp-picker-input{opacity:1;top:-54px;font-size:11px;color:#161b2f}::ng-deep dp-date-picker input.dp-picker-input::placeholder{color:#747576;opacity:1}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { 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.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: i6.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogicDateTimeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-logic-date-time', template: "<div class=\"logic-date-time vx-mb-5\">\n  <div class=\"input-group vx-d-flex vx-mb-2\" *ngIf=\"question.hasDate\">\n    <span\n      class=\"label vx-bg-grey vx-lh-24 vx-d-flex vx-text-center vx-p-2 vx-justify-center vx-align-center\"\n    >\n      <span\n        class=\"value vx-fs-11 vx-label-txt vx-tt-uppercase\"\n        [appTooltip]=\"'Date of birth'\"\n        placement=\"bottom-left\"\n        delay=\"0\"\n        type=\"black\"\n        [tooltipMandatory]=\"false\"\n        >{{ question?.date?.title ? question?.date?.title : \"Date\" }}</span\n      >\n    </span>\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=\"Enter Date\"\n        id=\"date-picker\"\n      />\n      <dp-date-picker\n        (onChange)=\"dateChanged($event)\"\n        [(ngModel)]=\"question.date.value\"\n        #datePicker\n        [config]=\"{ disableKeypress: true, format: 'DD MMM YYYY' }\"\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-lh-24 vx-d-flex vx-text-center vx-p-2 vx-justify-center vx-align-center\"\n    >\n      <span\n        class=\"value vx-fs-11 vx-label-txt vx-tt-uppercase\"\n        [appTooltip]=\"'Time of birth'\"\n        placement=\"bottom-left\"\n        delay=\"0\"\n        type=\"black\"\n        [tooltipMandatory]=\"false\"\n        >{{ question?.time?.title ? question?.time?.title : \"Time\" }}</span\n      >\n    </span>\n    <div class=\"date-time-area\">\n      <input\n        aria-label=\"12hr format\"\n        [ngxTimepicker]=\"timeOnly\"\n        readonly\n        placeholder=\"Enter Time\"\n        [(ngModel)]=\"question.time.value\"\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", 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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.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 .logic-date-time{display:block;max-width:37.5rem}::ng-deep .logic-date-time .input-group{border:1px solid #F1F1F1;border-radius:.25rem;position:relative}::ng-deep .logic-date-time .input-group .label{width:5.875rem}::ng-deep .logic-date-time .input-group .label .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}::ng-deep .logic-date-time .input-group .date-time-area{width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .logic-date-time .input-group .date-time-area input{background:transparent;border:none;border-radius:0;font-size:12px;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .logic-date-time .input-group .date-time-area input::placeholder{color:#747576;opacity:1}::ng-deep .logic-date-time .input-group .date-time-area input.datePicker{opacity:0}::ng-deep .logic-date-time .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .logic-date-time .input-group .date-time-area .overlay{z-index:2}::ng-deep dp-date-picker input.dp-picker-input{opacity:1;top:-54px;font-size:11px;color:#161b2f}::ng-deep dp-date-picker input.dp-picker-input::placeholder{color:#747576;opacity:1}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.CommonService }]; }, propDecorators: { datePicker: [{
                type: ViewChild,
                args: ['datePicker']
            }], question: [{
                type: Input
            }], changeEvent: [{
                type: Output
            }], datePickerPopUp: [{
                type: ViewChild,
                args: ['datePicker', { read: ElementRef, static: false }]
            }], documentClick: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 