@wavemaker/app-ng-runtime 11.8.0-rc.5666 → 11.8.0-rc.5668

app-ng-runtime/components/input/epoch/bundles/index.umd.js

@@ -0,0 +1,3140 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ngx-bootstrap/datepicker'), require('ngx-bootstrap/dropdown'), require('ngx-bootstrap/timepicker'), require('@wm/components/base'), require('@wm/core'), require('@wm/components/input'), require('ngx-bootstrap/modal'), require('lodash-es'), require('imask'), require('angular-imask')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'ngx-bootstrap/datepicker', 'ngx-bootstrap/dropdown', 'ngx-bootstrap/timepicker', '@wm/components/base', '@wm/core', '@wm/components/input', 'ngx-bootstrap/modal', 'lodash-es', 'imask', 'angular-imask'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = global.wm.components.input || {}, global.wm.components.input.epoch = {}), global.ng.core, global.ng.common, global.ng.forms, global.datepicker, global.dropdown, global.timepicker, global.wm.components.base, global.wm.core, global.wm.components.input, global.modal, global._, global.IMask, global.angularIMask));
+})(this, (function (exports, i0, i2, i5, i3, i4$1, i6, base, i1$1, input, i1, lodashEs, IMask, i4) { 'use strict';
+
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i5__namespace = /*#__PURE__*/_interopNamespaceDefault(i5);
+    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
+    var i4$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i4$1);
+    var i6__namespace = /*#__PURE__*/_interopNamespaceDefault(i6);
+    var i1$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1$1);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+    var i4__namespace = /*#__PURE__*/_interopNamespaceDefault(i4);
+
+    const _c0$4 = ["*"];
+    function PickerComponent_div_6_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "div", 5);
+        i0__namespace.ɵɵtext(1);
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const option_r1 = ctx.$implicit;
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵtextInterpolate1(" ", option_r1.label, " ");
+    } }
+    class PickerGroupComponent {
+        static { this.ɵfac = function PickerGroupComponent_Factory(t) { return new (t || PickerGroupComponent)(); }; }
+        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: PickerGroupComponent, selectors: [["wm-pickergroup"]], ngContentSelectors: _c0$4, decls: 2, vars: 0, consts: [[1, "app-picker-group"]], template: function PickerGroupComponent_Template(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵprojectionDef();
+                i0__namespace.ɵɵelementStart(0, "div", 0);
+                i0__namespace.ɵɵprojection(1);
+                i0__namespace.ɵɵelementEnd();
+            } }, encapsulation: 2 }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PickerGroupComponent, [{
+            type: i0.Component,
+            args: [{
+                    selector: 'wm-pickergroup',
+                    template: `
+        <div class="app-picker-group">
+            <ng-content></ng-content>
+        </div>
+    `
+                }]
+        }], null, null); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(PickerGroupComponent, { className: "PickerGroupComponent", filePath: "picker/picker.component.ts", lineNumber: 13 }); })();
+    class PickerComponent {
+        constructor(inj) {
+            this.inj = inj;
+            this.change = new i0.EventEmitter();
+            this._selectedIndex = 0;
+            this._options = [];
+            this.noOfEmptyElements = 2;
+            this.$el = $(inj.get(i0.ElementRef).nativeElement);
+        }
+        set selectedValue(s) {
+            this._selectedValue = s;
+            this.reRender();
+        }
+        get selectedValue() {
+            return this._selectedValue;
+        }
+        set options(opts) {
+            this._options = opts.map(o => ({
+                label: o.label,
+                value: o.value !== undefined ? o.value : o.label
+            }));
+            this.reRender();
+        }
+        get options() {
+            return this._options;
+        }
+        reRender() {
+            this._selectedIndex = this.options.findIndex(o => o.value === this.selectedValue);
+            this.pickerAnimator?.select(this._selectedIndex + this.noOfEmptyElements);
+        }
+        set selectedIndex(i) {
+            this._selectedIndex = i;
+            this._selectedValue = this.options[i].value;
+            this.change.emit(this.options[i]);
+        }
+        get selectedIndex() {
+            return this._selectedIndex;
+        }
+        ngAfterViewInit() {
+            this.pickerAnimator = new PickerAnimator(this);
+        }
+        static { this.ɵfac = function PickerComponent_Factory(t) { return new (t || PickerComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: PickerComponent, selectors: [["wm-picker"]], inputs: { selectedValue: "selectedValue", options: "options" }, outputs: { change: "change" }, decls: 12, vars: 1, consts: [[1, "app-picker"], [1, "app-picker-option-container"], [1, "app-picker-option", "app-picker-empty-option"], ["class", "app-picker-option", 4, "ngFor", "ngForOf"], [1, "app-picker-ruler"], [1, "app-picker-option"]], template: function PickerComponent_Template(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
+                i0__namespace.ɵɵtext(3, "E");
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementStart(4, "div", 2);
+                i0__namespace.ɵɵtext(5, "E");
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵtemplate(6, PickerComponent_div_6_Template, 2, 1, "div", 3);
+                i0__namespace.ɵɵelementStart(7, "div", 2);
+                i0__namespace.ɵɵtext(8, "E");
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementStart(9, "div", 2);
+                i0__namespace.ɵɵtext(10, "E");
+                i0__namespace.ɵɵelementEnd()();
+                i0__namespace.ɵɵelement(11, "div", 4);
+                i0__namespace.ɵɵelementEnd();
+            } if (rf & 2) {
+                i0__namespace.ɵɵadvance(6);
+                i0__namespace.ɵɵproperty("ngForOf", ctx.options);
+            } }, dependencies: [i2__namespace.NgForOf], encapsulation: 2 }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PickerComponent, [{
+            type: i0.Component,
+            args: [{
+                    selector: 'wm-picker',
+                    template: `
+        <div class="app-picker">
+            <div class="app-picker-option-container">
+                <div class="app-picker-option app-picker-empty-option">E</div>
+                <div class="app-picker-option app-picker-empty-option">E</div>
+                <div *ngFor="let option of options; index as i;" class="app-picker-option">
+                    {{option.label}}
+                </div>
+                <div class="app-picker-option app-picker-empty-option">E</div>
+                <div class="app-picker-option app-picker-empty-option">E</div>
+            </div>
+            <div class="app-picker-ruler"></div>
+        </div>
+    `
+                }]
+        }], () => [{ type: i0__namespace.Injector }], { change: [{
+                type: i0.Output
+            }], selectedValue: [{
+                type: i0.Input
+            }], options: [{
+                type: i0.Input
+            }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(PickerComponent, { className: "PickerComponent", filePath: "picker/picker.component.ts", lineNumber: 34 }); })();
+    class PickerAnimator {
+        constructor(picker) {
+            this.picker = picker;
+            let lastSelectedIndex = picker.selectedIndex + picker.noOfEmptyElements;
+            const computeIndex = (d) => lastSelectedIndex + Math.floor(d / 16);
+            this.select(lastSelectedIndex);
+            this.getElement().swipey({
+                'direction': $.fn.swipey.DIRECTIONS.VERTICAL,
+                'threshold': 10,
+                'target': picker.$el,
+                'onSwipe': (e, data) => {
+                    this.select(computeIndex(-1 * data.length));
+                },
+                'onSwipeEnd': (e, data) => {
+                    const nextSelectedIndex = computeIndex(-1 * data.length);
+                    this.select(nextSelectedIndex);
+                    lastSelectedIndex = picker.selectedIndex + picker.noOfEmptyElements;
+                }
+            });
+        }
+        getElement() {
+            return this.picker.$el.find('.app-picker-option-container:first');
+        }
+        getOptionElements() {
+            return this.getElement().find('.app-picker-option');
+        }
+        select(selectedIndex) {
+            const options = this.getOptionElements();
+            if (selectedIndex < this.picker.noOfEmptyElements
+                || selectedIndex >= options.length - this.picker.noOfEmptyElements) {
+                return;
+            }
+            this.getElement()
+                .find('.app-picker-option.app-picker-option-selected')
+                .removeClass('app-picker-option-selected');
+            options.eq(selectedIndex).addClass('app-picker-option-selected');
+            this.picker.selectedIndex = selectedIndex - this.picker.noOfEmptyElements;
+            const minIndex = selectedIndex - this.picker.noOfEmptyElements;
+            const maxIndex = selectedIndex + this.picker.noOfEmptyElements;
+            options.each((i, e) => {
+                if (i >= minIndex && i <= maxIndex) {
+                    const rotation = (i - selectedIndex) * 30;
+                    const opacity = 1 - Math.abs(i - selectedIndex) * 0.3;
+                    $(e).css({
+                        transform: 'perspective(500px) rotateX(' + rotation + 'deg)',
+                        opacity: opacity
+                    }).show();
+                }
+                else {
+                    $(e).hide();
+                }
+            });
+        }
+    }
+
+    const _c0$3 = ["datetimepickerTemplate"];
+    function DateTimePickerComponent_ng_template_0_bs_datepicker_inline_3_Template(rf, ctx) { if (rf & 1) {
+        const _r2 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "bs-datepicker-inline", 11);
+        i0__namespace.ɵɵlistener("bsValueChange", function DateTimePickerComponent_ng_template_0_bs_datepicker_inline_3_Template_bs_datepicker_inline_bsValueChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onDateUpdate($event)); });
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵproperty("bsConfig", ctx_r2.bsDatepickerConfig)("datesDisabled", ctx_r2.excludedDatesToDisable)("bsValue", ctx_r2.changedValue);
+    } }
+    function DateTimePickerComponent_ng_template_0_wm_timepicker_4_Template(rf, ctx) { if (rf & 1) {
+        const _r4 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "wm-timepicker", 12);
+        i0__namespace.ɵɵlistener("change", function DateTimePickerComponent_ng_template_0_wm_timepicker_4_Template_wm_timepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onTimeUpdate($event)); });
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵproperty("value", ctx_r2.changedValue)("min", ctx_r2.minTime)("max", ctx_r2.maxTime);
+    } }
+    function DateTimePickerComponent_ng_template_0_button_8_Template(rf, ctx) { if (rf & 1) {
+        const _r5 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "button", 13);
+        i0__namespace.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_button_8_Template_button_click_0_listener() { i0__namespace.ɵɵrestoreView(_r5); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.setToday()); });
+        i0__namespace.ɵɵtext(1);
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵtextInterpolate(ctx_r2.appLocale.LABEL_TODAY_DATE || "Today");
+    } }
+    function DateTimePickerComponent_ng_template_0_button_9_Template(rf, ctx) { if (rf & 1) {
+        const _r6 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "button", 14);
+        i0__namespace.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_button_9_Template_button_click_0_listener() { i0__namespace.ɵɵrestoreView(_r6); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onOkClick()); });
+        i0__namespace.ɵɵtext(1);
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵtextInterpolate(ctx_r2.appLocale.LABEL_OK || "Ok");
+    } }
+    function DateTimePickerComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+        const _r1 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "div", 1)(1, "div", 2);
+        i0__namespace.ɵɵelement(2, "div", 3);
+        i0__namespace.ɵɵtemplate(3, DateTimePickerComponent_ng_template_0_bs_datepicker_inline_3_Template, 1, 3, "bs-datepicker-inline", 4)(4, DateTimePickerComponent_ng_template_0_wm_timepicker_4_Template, 1, 3, "wm-timepicker", 5);
+        i0__namespace.ɵɵelementStart(5, "span", 6);
+        i0__namespace.ɵɵtext(6);
+        i0__namespace.ɵɵelementEnd()();
+        i0__namespace.ɵɵelementStart(7, "div", 7);
+        i0__namespace.ɵɵtemplate(8, DateTimePickerComponent_ng_template_0_button_8_Template, 2, 1, "button", 8)(9, DateTimePickerComponent_ng_template_0_button_9_Template, 2, 1, "button", 9);
+        i0__namespace.ɵɵelementStart(10, "button", 10);
+        i0__namespace.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_Template_button_click_10_listener() { i0__namespace.ɵɵrestoreView(_r1); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.clear()); });
+        i0__namespace.ɵɵtext(11);
+        i0__namespace.ɵɵelementEnd()()();
+    } if (rf & 2) {
+        const ctx_r2 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance(3);
+        i0__namespace.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "DATE");
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "TIME");
+        i0__namespace.ɵɵadvance(2);
+        i0__namespace.ɵɵtextInterpolate1(" ", ctx_r2.getDateLabel(), " ");
+        i0__namespace.ɵɵadvance(2);
+        i0__namespace.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "DATE");
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "TIME");
+        i0__namespace.ɵɵadvance(2);
+        i0__namespace.ɵɵtextInterpolate(ctx_r2.appLocale.LABEL_CLEAR_DATE || "Clear");
+    } }
+    class DateTimePickerComponent {
+        constructor(inj, bsModalService) {
+            this.inj = inj;
+            this.bsModalService = bsModalService;
+            this.isDateOpen = true;
+            this.isTimeOpen = false;
+            this.mode = 'DATE_TIME';
+            this.placement = 'MODAL';
+            this.change = new i0.EventEmitter();
+            this._value = new Date();
+            this.changedValue = null;
+            this.appLocale = inj.get(i1$1.App).appLocale || {};
+        }
+        set value(d) {
+            d = d || new Date();
+            this._value = d;
+            this.changedValue = d;
+        }
+        set bsDatepickerConfig(config) {
+            this._bsDatepickerConfig = config;
+            this._bsDatepickerConfig.showClearButton = false;
+            this._bsDatepickerConfig.showTodayButton = false;
+        }
+        set excludedDaysToDisable(v) {
+            this._bsDatepickerConfig.daysDisabled = v;
+        }
+        get bsDatepickerConfig() {
+            return this._bsDatepickerConfig;
+        }
+        set displayFormat(format) {
+            if (format) {
+                this._displayFormat = format.replace(/y/g, "Y").replace(/d/g, "D").replace("a", "A");
+            }
+        }
+        validateSelectedDate() {
+            if (!this.changedValue) {
+                return true;
+            }
+            const cd = moment(this.changedValue);
+            const minDate = this._bsDatepickerConfig?.minDate;
+            const maxDate = this._bsDatepickerConfig?.maxDate;
+            if (minDate
+                && ((this.mode === 'DATE'
+                    && moment(minDate).startOf('day').toDate() > this.changedValue)
+                    || (this.mode !== 'DATE'
+                        && minDate > this.changedValue))) {
+                return false;
+            }
+            if (maxDate
+                && ((this.mode === 'DATE'
+                    && moment(maxDate).endOf('day').toDate() < this.changedValue)
+                    || (this.mode !== 'DATE'
+                        && maxDate < this.changedValue))) {
+                return false;
+            }
+            if (this._bsDatepickerConfig?.daysDisabled?.indexOf(cd.day()) >= 0) {
+                return false;
+            }
+            const cdSt = cd.startOf('day').toDate().getTime();
+            if (this.excludedDatesToDisable?.find(d => d.getTime() === cdSt)) {
+                return false;
+            }
+            return true;
+        }
+        get displayFormat() {
+            if (this._displayFormat) {
+                return this._displayFormat;
+            }
+        }
+        /**
+         * This method is used to highlight the current date
+         */
+        hightlightToday() {
+            const toDay = new Date().getDate().toString();
+            lodashEs.filter($(`body > modal-container .date-picker-modal span:contains(${toDay})`)
+                .not('.is-other-month,.current-date'), (obj) => {
+                if ($(obj).text() === toDay) {
+                    $(obj).addClass('current-date text-info');
+                }
+            });
+        }
+        hideOnClick() {
+            $('body>modal-container .date-picker-modal .app-datetime-picker')
+                .click(($event) => $event.stopPropagation());
+            $('body>modal-container .date-picker-modal').click(() => this.onCancelClick());
+        }
+        getDateLabel() {
+            return moment(this.changedValue).format(this.displayFormat);
+        }
+        openDatePicker() {
+            this.isTimeOpen = false;
+            this.isDateOpen = true;
+        }
+        openTimePicker() {
+            this.isTimeOpen = true;
+            this.isDateOpen = false;
+        }
+        onDateUpdate(newVal) {
+            const oldVal = this.changedValue;
+            if (this.mode === 'DATE') {
+                newVal.setHours(0);
+                newVal.setMinutes(0);
+                newVal.setSeconds(0);
+                newVal.setMilliseconds(0);
+            }
+            else if (oldVal && newVal) {
+                newVal.setHours(oldVal.getHours());
+                newVal.setMinutes(oldVal.getMinutes());
+                newVal.setSeconds(oldVal.getSeconds());
+                newVal.setMilliseconds(oldVal.getMilliseconds());
+            }
+            this.changedValue = newVal;
+            if (this.mode === 'DATE'
+                && oldVal !== newVal
+                && this.validateSelectedDate()) {
+                this.onOkClick();
+            }
+        }
+        onTimeUpdate(newVal) {
+            this.changedValue = newVal;
+        }
+        show() {
+            this.reset();
+            this.modalRef = this.bsModalService.show(this.datetimepickerTemplate, {
+                animated: true,
+                backdrop: 'static',
+                class: 'date-picker-modal modal-dialog-centered'
+            });
+            setTimeout(() => { this.hideOnClick(); }, 500);
+        }
+        clear() {
+            this.changedValue = null;
+            this.triggerChange();
+            this.hideModal();
+        }
+        setToday() {
+            const today = moment().startOf('day').toDate();
+            this.onDateUpdate(today);
+        }
+        reset() {
+            this.changedValue = this._value;
+        }
+        hideModal() {
+            if (this.modalRef?.id) {
+                this.bsModalService.hide(this.modalRef.id);
+            }
+        }
+        onCancelClick() {
+            this.changedValue = this._value;
+            this.hideModal();
+        }
+        onOkClick() {
+            if (this.validateSelectedDate()) {
+                this.triggerChange();
+            }
+            this.hideModal();
+        }
+        triggerChange() {
+            if (this.value !== this.changedValue) {
+                this.change.emit(this.changedValue);
+            }
+        }
+        ngAfterViewInit() {
+        }
+        ngOnDestroy() {
+            this.hideModal();
+        }
+        static { this.ɵfac = function DateTimePickerComponent_Factory(t) { return new (t || DateTimePickerComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.BsModalService)); }; }
+        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: DateTimePickerComponent, selectors: [["wm-datetimepicker"]], viewQuery: function DateTimePickerComponent_Query(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵviewQuery(_c0$3, 7);
+            } if (rf & 2) {
+                let _t;
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.datetimepickerTemplate = _t.first);
+            } }, inputs: { mode: "mode", placement: "placement", _bsDatepickerConfig: [i0__namespace.ɵɵInputFlags.None, "config", "_bsDatepickerConfig"], minTime: "minTime", maxTime: "maxTime", _displayFormat: "_displayFormat", excludedDatesToDisable: "excludedDatesToDisable", value: "value", bsDatepickerConfig: [i0__namespace.ɵɵInputFlags.None, "config", "bsDatepickerConfig"], excludedDaysToDisable: "excludedDaysToDisable", displayFormat: "displayFormat" }, outputs: { change: "change" }, decls: 2, vars: 0, consts: [["datetimepickerTemplate", ""], [1, "app-datetime-picker"], [1, "modal-body"], [1, "mobile-datetime-picker-options"], ["bsDatepicker", "", 3, "bsConfig", "datesDisabled", "bsValue", "bsValueChange", 4, "ngIf"], [3, "value", "min", "max", "change", 4, "ngIf"], [1, "text-primary", "date-picker-value"], [1, "modal-footer"], ["class", "btn btn-secondary today-btn", 3, "click", 4, "ngIf"], ["class", "btn btn-primary pull-right ok-btn", 3, "click", 4, "ngIf"], [1, "btn", "btn-secondary", "pull-right", "clear-btn", 3, "click"], ["bsDatepicker", "", 3, "bsValueChange", "bsConfig", "datesDisabled", "bsValue"], [3, "change", "value", "min", "max"], [1, "btn", "btn-secondary", "today-btn", 3, "click"], [1, "btn", "btn-primary", "pull-right", "ok-btn", 3, "click"]], template: function DateTimePickerComponent_Template(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵtemplate(0, DateTimePickerComponent_ng_template_0_Template, 12, 6, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor);
+            } }, dependencies: () => [i2__namespace.NgIf, i3__namespace.BsDatepickerDirective, i3__namespace.BsDatepickerInlineDirective, TimePickerComponent], encapsulation: 2 }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DateTimePickerComponent, [{
+            type: i0.Component,
+            args: [{
+                    selector: 'wm-datetimepicker',
+                    template: `
+    <ng-template #datetimepickerTemplate>
+        <div class="app-datetime-picker">
+            <div class="modal-body">
+                <div class="mobile-datetime-picker-options">
+
+                </div>
+                <bs-datepicker-inline
+                    [bsConfig]="bsDatepickerConfig"
+                    [datesDisabled]="excludedDatesToDisable"
+                    bsDatepicker
+                    [bsValue]="changedValue"
+                    (bsValueChange)="onDateUpdate($event)"
+                    *ngIf="mode === 'DATE_TIME' || mode === 'DATE'">
+                </bs-datepicker-inline>
+                <wm-timepicker
+                    [value]="changedValue"
+                    [min]="minTime"
+                    [max]="maxTime"
+                    (change)="onTimeUpdate($event)"
+                    *ngIf="mode === 'DATE_TIME' || mode === 'TIME'"></wm-timepicker>
+                <span class="text-primary date-picker-value">
+                    {{getDateLabel()}}
+                </span>
+            </div>
+            <div class="modal-footer">
+                <button
+                    *ngIf="mode === 'DATE_TIME' || mode === 'DATE'"
+                    class="btn btn-secondary today-btn"
+                    (click)="setToday()">{{appLocale.LABEL_TODAY_DATE || "Today" }}</button>
+                <button
+                    class="btn btn-primary pull-right ok-btn"
+                    *ngIf="mode === 'DATE_TIME' || mode === 'TIME'"
+                    (click)="onOkClick()">{{appLocale.LABEL_OK || "Ok" }}</button>
+                <button
+                    class="btn btn-secondary pull-right clear-btn"
+                    (click)="clear()">{{appLocale.LABEL_CLEAR_DATE || "Clear" }}</button>
+            </div>
+        </div>
+    </ng-template>
+    `
+                }]
+        }], () => [{ type: i0__namespace.Injector }, { type: i1__namespace.BsModalService }], { datetimepickerTemplate: [{
+                type: i0.ViewChild,
+                args: ['datetimepickerTemplate', { static: true }]
+            }], mode: [{
+                type: i0.Input
+            }], placement: [{
+                type: i0.Input
+            }], _bsDatepickerConfig: [{
+                type: i0.Input,
+                args: ["config"]
+            }], minTime: [{
+                type: i0.Input
+            }], maxTime: [{
+                type: i0.Input
+            }], _displayFormat: [{
+                type: i0.Input
+            }], change: [{
+                type: i0.Output
+            }], excludedDatesToDisable: [{
+                type: i0.Input
+            }], value: [{
+                type: i0.Input
+            }], bsDatepickerConfig: [{
+                type: i0.Input,
+                args: ["config"]
+            }], excludedDaysToDisable: [{
+                type: i0.Input
+            }], displayFormat: [{
+                type: i0.Input
+            }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(DateTimePickerComponent, { className: "DateTimePickerComponent", filePath: "date-time/date-time-picker.component.ts", lineNumber: 54 }); })();
+    class TimePickerComponent {
+        constructor(inj) {
+            this.inj = inj;
+            this.options = {
+                hour: [],
+                minute: [],
+                second: [],
+                meridian: ['AM', 'PM']
+            };
+            this.value = new Date();
+            this.min = null;
+            this.max = null;
+            this.change = new i0.EventEmitter();
+            this.options.hour = this.populateNumbers(0, 23);
+            this.options.minute = this.populateNumbers(0, 59);
+            this.options.second = this.populateNumbers(0, 59);
+        }
+        populateNumbers(start, to) {
+            const arr = [];
+            for (let i = start; i <= to; i++) {
+                arr.push({
+                    label: (i < 10 ? '0' : '') + i,
+                    value: i
+                });
+            }
+            return arr;
+        }
+        set({ index, value }, unit) {
+            if (unit === 'HOUR') {
+                this.value = moment(this.value).hour(parseInt(value)).toDate();
+            }
+            else if (unit === 'MINUTE') {
+                this.value = moment(this.value).minute(parseInt(value)).toDate();
+            }
+            else if (unit === 'SECOND') {
+                this.value = moment(this.value).second(parseInt(value)).toDate();
+            }
+            else if (unit === 'MERIDIAN') {
+                this.value = moment(this.value).minute(value).toDate();
+            }
+            if (this.min && this.value < this.min) {
+                this.value = this.min;
+            }
+            if (this.max && this.value > this.max) {
+                this.value = this.max;
+            }
+            this.change.emit(this.value);
+        }
+        get hour() {
+            return moment(this.value).hour();
+        }
+        get minute() {
+            return moment(this.value).minute();
+        }
+        get second() {
+            return moment(this.value).second();
+        }
+        get meridian() {
+            return 'AM';
+        }
+        onDateUpdate(newVal) {
+            debugger;
+        }
+        ngAfterViewInit() {
+        }
+        static { this.ɵfac = function TimePickerComponent_Factory(t) { return new (t || TimePickerComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: TimePickerComponent, selectors: [["wm-timepicker"]], inputs: { value: "value", min: "min", max: "max" }, outputs: { change: "change" }, decls: 8, vars: 6, consts: [[3, "change", "options", "selectedValue"], [1, "app-time-separator"]], template: function TimePickerComponent_Template(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵelementStart(0, "wm-pickergroup")(1, "wm-picker", 0);
+                i0__namespace.ɵɵlistener("change", function TimePickerComponent_Template_wm_picker_change_1_listener($event) { return ctx.set($event, "HOUR"); });
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementStart(2, "span", 1);
+                i0__namespace.ɵɵtext(3, ":");
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementStart(4, "wm-picker", 0);
+                i0__namespace.ɵɵlistener("change", function TimePickerComponent_Template_wm_picker_change_4_listener($event) { return ctx.set($event, "MINUTE"); });
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementStart(5, "span", 1);
+                i0__namespace.ɵɵtext(6, ":");
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementStart(7, "wm-picker", 0);
+                i0__namespace.ɵɵlistener("change", function TimePickerComponent_Template_wm_picker_change_7_listener($event) { return ctx.set($event, "SECOND"); });
+                i0__namespace.ɵɵelementEnd()();
+            } if (rf & 2) {
+                i0__namespace.ɵɵadvance();
+                i0__namespace.ɵɵproperty("options", ctx.options.hour)("selectedValue", ctx.hour);
+                i0__namespace.ɵɵadvance(3);
+                i0__namespace.ɵɵproperty("options", ctx.options.minute)("selectedValue", ctx.minute);
+                i0__namespace.ɵɵadvance(3);
+                i0__namespace.ɵɵproperty("options", ctx.options.minute)("selectedValue", ctx.second);
+            } }, dependencies: [PickerComponent, PickerGroupComponent], encapsulation: 2 }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TimePickerComponent, [{
+            type: i0.Component,
+            args: [{
+                    selector: 'wm-timepicker',
+                    template: `
+        <wm-pickergroup>
+            <wm-picker
+                [options]="options.hour"
+                [selectedValue]="hour"
+                (change)="set($event, 'HOUR')"></wm-picker>
+            <span class="app-time-separator">:</span>
+            <wm-picker
+                [options]="options.minute"
+                [selectedValue]="minute"
+                (change)="set($event, 'MINUTE')"></wm-picker>
+            <span class="app-time-separator">:</span>
+            <wm-picker
+                [options]="options.minute"
+                [selectedValue]="second"
+                (change)="set($event, 'SECOND')"></wm-picker>
+        </wm-pickergroup>
+    `
+                }]
+        }], () => [{ type: i0__namespace.Injector }], { value: [{
+                type: i0.Input
+            }], min: [{
+                type: i0.Input
+            }], max: [{
+                type: i0.Input
+            }], change: [{
+                type: i0.Output
+            }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(TimePickerComponent, { className: "TimePickerComponent", filePath: "date-time/date-time-picker.component.ts", lineNumber: 305 }); })();
+
+    const CURRENT_DATE$2 = 'CURRENT_DATE';
+    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    const DATEPICKER_DROPDOWN_OPTIONS = {
+        BUTTON: 'button',
+        DEFAULT: 'default'
+    };
+    const DATAENTRYMODE_DROPDOWN_OPTIONS = {
+        PICKER: 'picker',
+        DEFAULT: 'default'
+    };
+    // Providing meridians to the timepicker baesd on selected locale
+    function getTimepickerConfig(i18nService) {
+        return Object.assign(new i6.TimepickerConfig(), {
+            meridians: i2.getLocaleDayPeriods(i18nService.getSelectedLocale(), i2.FormStyle.Format, i2.TranslationWidth.Abbreviated)
+        });
+    }
+    class BaseDateTimeComponent extends input.BaseFormCustomComponent {
+        get timeZone() { return this.inj.get(i1$1.AbstractI18nService).getTimezone(this); }
+        constructor(inj, WIDGET_CONFIG, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            this.isReadOnly = false;
+            this.clicked = false;
+            this.formatsByLocale = { 'timezone': '' };
+            /**
+             * This is an internal property used to map the containerClass, showWeekNumbers etc., to the bsDatepicker
+             */
+            this._dateOptions = new i3.BsDatepickerConfig();
+            this.i18nService = this.inj.get(i1$1.AbstractI18nService);
+            this.invokeEventCallback('beforeload');
+            this.datePipe = this.inj.get(base.ToDatePipe);
+            this.selectedLocale = this.i18nService.getSelectedLocale();
+            this._dateOptions.todayPosition = 'left';
+            this._dateOptions.clearPosition = 'right';
+            this.meridians = i2.getLocaleDayPeriods(this.selectedLocale, i2.FormStyle.Format, i2.TranslationWidth.Abbreviated);
+            this.loadNativeDateInput = i1$1.isMobile() && !this.showcustompicker;
+            this.cancelLocaleChangeSubscription = this.getAppInstance().subscribe("locale-changed", (locale) => {
+                this.datePipe.datePipe.locale = locale.angular;
+                this._dateOptions.todayButtonLabel = this.i18nService.getLocalizedMessage('LABEL_TODAY_DATE');
+                this._dateOptions.clearButtonLabel = this.i18nService.getLocalizedMessage('LABEL_CLEAR_DATE');
+            });
+        }
+        /**
+         * returns true if the input value is default (i.e open date picker on input click)
+         * @param1 dropdownvalue, user selected value (by default datepicker opens on input click)
+         * **/
+        isDropDownDisplayEnabledOnInput(dropdownvalue) {
+            return dropdownvalue === DATEPICKER_DROPDOWN_OPTIONS.DEFAULT;
+        }
+        /**
+         * returns true if the input value is default (i.e Data entry can be done either by selecting from the Date/DateTime/Time Picker or by entering  manually using the keyboard. )
+         * @param1 dropdownvalue, user selected value
+         * **/
+        isDataEntryModeEnabledOnInput(dropdownvalue) {
+            return dropdownvalue === DATAENTRYMODE_DROPDOWN_OPTIONS.DEFAULT;
+        }
+        /**
+         * This method is used to show validation message depending on the isNativePicker flag.
+         */
+        showValidation($event, displayValue, isNativePicker, msg) {
+            if (isNativePicker) {
+                console.warn('min max date validation failed ', msg);
+                return $($event.target).val(displayValue);
+            }
+        }
+        resetDisplayInput() {
+            $(this.nativeElement).find('.display-input').val('');
+        }
+        validate(c) {
+            if (this.invalidDateTimeFormat) {
+                return {
+                    invalidDateTimeFormat: {
+                        valid: false
+                    }
+                };
+            }
+            if (!lodashEs.isUndefined(this.dateNotInRange) && this.dateNotInRange) {
+                return {
+                    dateNotInRange: {
+                        valid: false
+                    },
+                };
+            }
+            if (!lodashEs.isUndefined(this.timeNotInRange) && this.timeNotInRange) {
+                return {
+                    timeNotInRange: {
+                        valid: false
+                    },
+                };
+            }
+            /* WMS-18269 | Extending the existing validation for 'required' */
+            if (this['show'] && this['required']) {
+                return !!c.value ? null : { required: true };
+            }
+            this.validateType = '';
+            return null;
+        }
+        /**
+         * This method is used to validate date pattern and time pattern
+         * If user selects one pattern in design time and if he tries to enter the date in another pattern then the device is throwing an error
+         */
+        formatValidation(newVal, inputVal, isNativePicker) {
+            const pattern = this.datepattern || this.timepattern;
+            const timeZone = this.timeZone;
+            const formattedDate = i1$1.getFormattedDate(this.datePipe, newVal, pattern, timeZone, null, null, this);
+            inputVal = inputVal.trim();
+            if (inputVal) {
+                if (pattern === 'timestamp') {
+                    if (!lodashEs.isNaN(inputVal) && lodashEs.parseInt(inputVal) !== formattedDate) {
+                        this.invalidDateTimeFormat = true;
+                        this.validateType = 'incorrectformat';
+                        this.invokeOnChange(this.datavalue, undefined, false);
+                        return false;
+                    }
+                }
+                else {
+                    if (isNativePicker) {
+                        // format the date value only when inputVal is obtained from $event.target.value, as the format doesnt match.
+                        inputVal = i1$1.getFormattedDate(this.datePipe, inputVal, pattern, timeZone);
+                    }
+                    if (inputVal !== formattedDate) {
+                        this.invalidDateTimeFormat = true;
+                        this.validateType = 'incorrectformat';
+                        this.invokeOnChange(this.datavalue, undefined, false);
+                        return false;
+                    }
+                }
+            }
+            return true;
+        }
+        /**
+         * This method is used to validate min date, max date, exclude dates and exclude days
+         * In mobile if invalid dates are entered, device is showing an alert.
+         * In web if invalid dates are entered, device is showing validation message.
+         */
+        minDateMaxDateValidationOnInput(newVal, $event, displayValue, isNativePicker) {
+            if (newVal) {
+                const dateTimeVal = newVal;
+                newVal = moment(newVal).startOf('day').toDate();
+                const minDate = moment(i1$1.getDateObj(this.mindate)).startOf('day').toDate();
+                const maxDate = moment(i1$1.getDateObj(this.maxdate)).startOf('day').toDate();
+                if (this.mindate && newVal < minDate) {
+                    const msg = `${this.appLocale.LABEL_MINDATE_VALIDATION_MESSAGE} ${this.mindate}.`;
+                    this.invokeOnChange(this.datavalue, undefined, false);
+                    if (isNativePicker && i1$1.getFormattedDate(this.datePipe, minDate, this.datepattern, this.timeZone, null, null, this) === displayValue) {
+                        return $($event.target).val(displayValue);
+                    }
+                    this.dateNotInRange = true;
+                    this.validateType = 'mindate';
+                    return this.showValidation($event, displayValue, isNativePicker, msg);
+                }
+                if (this.maxdate && newVal > maxDate) {
+                    const msg = `${this.appLocale.LABEL_MAXDATE_VALIDATION_MESSAGE} ${this.maxdate}.`;
+                    this.invokeOnChange(this.datavalue, undefined, false);
+                    if (isNativePicker && i1$1.getFormattedDate(this.datePipe, maxDate, this.datepattern, this.timeZone, null, null, this) === displayValue) {
+                        return $($event.target).val(displayValue);
+                    }
+                    this.dateNotInRange = true;
+                    this.validateType = 'maxdate';
+                    return this.showValidation($event, displayValue, isNativePicker, msg);
+                }
+                if (this.excludedates) {
+                    let excludeDatesArray;
+                    if (lodashEs.isString(this.excludedates)) {
+                        excludeDatesArray = lodashEs.split(this.excludedates, ',');
+                    }
+                    else {
+                        excludeDatesArray = this.excludedates;
+                    }
+                    excludeDatesArray = excludeDatesArray.map(d => i1$1.getFormattedDate(this.datePipe, d, this.datepattern, this.timeZone, null, null, this));
+                    if (excludeDatesArray.indexOf(i1$1.getFormattedDate(this.datePipe, dateTimeVal, this.datepattern, this.timeZone, null, null, this)) > -1) {
+                        this.dateNotInRange = true;
+                        this.validateType = 'excludedates';
+                        this.invokeOnChange(this.datavalue, undefined, false);
+                        return;
+                    }
+                }
+                if (this.excludedays) {
+                    const excludeDaysArray = lodashEs.split(this.excludedays, ',');
+                    const day = lodashEs.get(dateTimeVal, 'getDay') ? dateTimeVal.getDay() : dateTimeVal;
+                    if (excludeDaysArray.indexOf(day.toString()) > -1) {
+                        this.dateNotInRange = true;
+                        this.validateType = 'excludedays';
+                        this.invokeOnChange(this.datavalue, undefined, false);
+                        return;
+                    }
+                }
+            }
+            if (!isNativePicker) {
+                this.dateNotInRange = false;
+                this.invokeOnChange(this.datavalue, undefined, false);
+            }
+        }
+        /**
+         * This method is used to highlight the current date
+         */
+        hightlightToday(newDate) {
+            const activeMonth = $(`.bs-datepicker-head .current`).first().text();
+            const activeYear = $(".bs-datepicker-head .current").eq(1).text();
+            const month = new Date(newDate).toLocaleString('default', { month: 'long' });
+            newDate.getFullYear().toString();
+            if (activeMonth == month && activeYear == new Date().getFullYear() && newDate.getDate() === new Date().getDate() && newDate.getMonth() === new Date().getMonth() && newDate.getFullYear() === new Date().getFullYear()) {
+                const toDay = new Date().getDate().toString();
+                lodashEs.filter($(`span:contains(${toDay})`).not('.is-other-month'), (obj) => {
+                    if ($(obj).text() === toDay) {
+                        $(obj).addClass('current-date text-info');
+                    }
+                });
+            }
+        }
+        /**
+         * This method is used to find the new date is from another year or not
+         * @param newDate - newly selected date value
+         */
+        isOtheryear(newDate) {
+            return (newDate.getMonth() === 0 && this.activeDate.getMonth() === 11) || (newDate.getMonth() === 11 && this.activeDate.getMonth() === 0);
+        }
+        showDatePickerModal(bsDataval) {
+            bsDataval ? this.activeDate = bsDataval : this.activeDate = new Date();
+            this.setNextData(this.activeDate);
+            this.datetimepickerComponent.show();
+            setTimeout(() => {
+                this.addDatepickerMouseEvents();
+                this.setActiveDateFocus(this.activeDate, true);
+            }, 500);
+            return;
+        }
+        /**
+         * This method is used to load other month days or other month or other year
+         * @param btnClass - class(previous/next) of the button which we have to click
+         * @param timePeriod - String value decides to load other month days or other month or other year
+         */
+        goToOtherMonthOryear(btnClass, timePeriod) {
+            const $node = $(`.bs-datepicker-head .${btnClass}`);
+            if ($node.attr('disabled')) {
+                return;
+            }
+            $node.trigger('click');
+            if (timePeriod === 'days') {
+                this.loadDays();
+            }
+            else if (timePeriod === 'month') {
+                this.loadMonths();
+            }
+            else if (timePeriod === 'year') {
+                this.loadYears();
+            }
+        }
+        /**
+         * This method is used to set focus for active day
+         * @param newDate - newly selected date value
+         * @param isMouseEvent - boolean value represents the event is mouse event/ keyboard event
+         */
+        setActiveDateFocus(newDate, isMouseEvent) {
+            this.setNextData(newDate);
+            this.clicked = false;
+            const activeMonth = this.activeDate.getMonth();
+            // check for keyboard event
+            if (!isMouseEvent) {
+                if (newDate.getMonth() < activeMonth) {
+                    this.isOtheryear(newDate) ? this.goToOtherMonthOryear('next', 'days') : this.goToOtherMonthOryear('previous', 'days');
+                }
+                else if (newDate.getMonth() > activeMonth) {
+                    this.isOtheryear(newDate) ? this.goToOtherMonthOryear('previous', 'days') : this.goToOtherMonthOryear('next', 'days');
+                }
+            }
+            setTimeout(() => {
+                const newDay = newDate.getDate().toString();
+                lodashEs.filter($(`span:contains(${newDay})`).not('.is-other-month'), (obj) => {
+                    const activeMonth = $(`.bs-datepicker-head .current`).first().text();
+                    const activeYear = $(".bs-datepicker-head .current").eq(1).text();
+                    const monthName = new Date().toLocaleString('default', { month: 'long' });
+                    if ($(obj).text() === newDay && activeMonth == monthName && activeYear == new Date().getFullYear()) {
+                        if ($(obj).hasClass('selected')) {
+                            $(obj).parent().attr('aria-selected', 'true');
+                        }
+                        $(obj).attr('aria-label', moment(newDate).format('dddd, MMMM Do YYYY'));
+                        $('[bsdatepickerdaydecorator]').not('.is-other-month').attr('tabindex', '-1');
+                        $(obj).attr('tabindex', '0');
+                        $(obj).focus();
+                        this.activeDate = newDate;
+                    }
+                });
+                if (newDate.getDate() === new Date().getDate() && newDate.getMonth() === new Date().getMonth() && newDate.getFullYear() === new Date().getFullYear()) {
+                    this.hightlightToday(newDate);
+                }
+            });
+        }
+        getMonth(date, inc) {
+            const currentMonth = new Date(date);
+            let month = currentMonth.getMonth();
+            const year = currentMonth.getFullYear();
+            month += inc;
+            const newDate = new Date(year, month);
+            const fullMonth = newDate.toLocaleString('en-US', { month: 'long' });
+            return {
+                date: newDate,
+                fullMonth: fullMonth
+            };
+        }
+        /**
+         * This method sets focus for months/days depending on the loaded datepicker table
+         */
+        setFocusForMonthOrDay() {
+            const activeMonthOrYear = $(`.bs-datepicker-head .current`).first().text();
+            const datePickerBody = $('.bs-datepicker-body');
+            if (datePickerBody.find('table.months').length > 0) {
+                if (lodashEs.parseInt(activeMonthOrYear) !== this.activeDate.getFullYear()) {
+                    this.loadMonths();
+                }
+                const newDate = new Date(lodashEs.parseInt(activeMonthOrYear), this.activeDate.getMonth(), this.activeDate.getDate());
+                this.setActiveMonthFocus(newDate, true);
+            }
+            else if (datePickerBody.find('table.days').length > 0) {
+                const newMonth = months.indexOf(activeMonthOrYear);
+                if (newMonth !== this.activeDate.getMonth()) {
+                    this.loadDays();
+                }
+                const newDate = new Date(this.activeDate.getFullYear(), newMonth, 1);
+                this.setActiveDateFocus(newDate, true);
+            }
+        }
+        /**
+         * This method sets focus for months/years depending on the loaded datepicker table
+         */
+        setFocusForCurrentMonthOryear() {
+            const datePickerBody = $('.bs-datepicker-body');
+            if (datePickerBody.find('table.months').length > 0) {
+                this.loadMonths();
+                this.setActiveMonthFocus(this.activeDate, true);
+            }
+            else if (datePickerBody.find('table.years').length > 0) {
+                this.loadYears();
+                this.setActiveYearFocus(this.activeDate, true);
+            }
+        }
+        /**
+         * This method sets focus for months/years/days depending on the loaded datepicker table
+         */
+        setFocusForDate(count) {
+            const datePickerBody = $('.bs-datepicker-body');
+            if (datePickerBody.find('table.months').length > 0) {
+                this.loadMonths();
+                const newDate = new Date(this.activeDate.getFullYear() + count, 0, this.activeDate.getDate());
+                this.setActiveMonthFocus(newDate, true);
+            }
+            else if (datePickerBody.find('table.years').length > 0) {
+                this.loadYears();
+                const startYear = datePickerBody.find('table.years span').first().text();
+                const newDate = new Date(lodashEs.parseInt(startYear), this.activeDate.getMonth(), this.activeDate.getDate());
+                this.setActiveYearFocus(newDate, true);
+            }
+            else if (datePickerBody.find('table.days').length > 0) {
+                this.loadDays();
+                const newDate = new Date(this.activeDate.getFullYear(), this.activeDate.getMonth() + count, 1);
+                this.setActiveDateFocus(newDate, true);
+            }
+        }
+        /**
+         * This method is used to add keyboard events while opening the date picker
+         * @param scope - scope of the date/datetime widget
+         * @param isDateTime - boolean value represents the loaded widget is date or datetime
+         */
+        addDatepickerKeyboardEvents(scope, isDateTime) {
+            this.elementScope = scope;
+            const dateContainer = document.querySelector(`.${scope.dateContainerCls}`);
+            i1$1.setAttr(dateContainer, 'tabindex', '0');
+            dateContainer.onkeydown = (event) => {
+                // Check for Shift+Tab key or Tab key or escape
+                if (event.key === 'Escape') {
+                    this.elementScope.hideDatepickerDropdown();
+                    const displayInputElem = this.elementScope.nativeElement.querySelector('.display-input');
+                    setTimeout(() => displayInputElem.focus());
+                }
+            };
+            this.loadDays();
+            this.setActiveDateFocus(this.activeDate);
+        }
+        setNextData(nextDate) {
+            this.next = this.getMonth(nextDate, 1);
+            this.prev = this.getMonth(nextDate, -1);
+        }
+        /**
+         * This method is used to add tabindex, keybord and mouse events for days
+         */
+        loadDays() {
+            setTimeout(() => {
+                $('[bsdatepickerdaydecorator]').not('.is-other-month').attr('tabindex', '0');
+                // if (this.clicked === false) {
+                //     this.next = this.getMonth(this.activeDate, 1);
+                //     this.prev = this.getMonth(this.activeDate, -1);
+                // }
+                this.addKeyBoardEventsForDays();
+                this.addDatepickerMouseEvents();
+            });
+        }
+        /**
+         * This method sets keyboard events for days
+         */
+        addKeyBoardEventsForDays() {
+            const datePickerBody = $('.bs-datepicker-body');
+            datePickerBody.keydown((event) => {
+                let newdate;
+                if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    newdate = moment(this.activeDate).add(+7, 'days').toDate();
+                    this.setActiveDateFocus(newdate);
+                }
+                else if (event.ctrlKey && event.key === 'ArrowUp') {
+                    // clicking on table header month name to load list of months
+                    $('.bs-datepicker-head .current').first().click();
+                    this.loadMonths();
+                    this.setActiveMonthFocus(this.activeDate);
+                }
+                else if (event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    newdate = moment(this.activeDate).add(-7, 'days').toDate();
+                    this.setActiveDateFocus(newdate);
+                }
+                else if (event.key === 'ArrowLeft') {
+                    newdate = moment(this.activeDate).add(-1, 'days').toDate();
+                    this.setActiveDateFocus(newdate);
+                }
+                else if (event.key === 'ArrowRight') {
+                    newdate = moment(this.activeDate).add(+1, 'days').toDate();
+                    this.setActiveDateFocus(newdate);
+                }
+                else if (event.key === 'PageUp') {
+                    event.preventDefault();
+                    newdate = moment(this.activeDate).add(-1, 'month').toDate();
+                    this.setActiveDateFocus(newdate);
+                }
+                else if (event.key === 'PageDown') {
+                    event.preventDefault();
+                    newdate = moment(this.activeDate).add(+1, 'month').toDate();
+                    this.setActiveDateFocus(newdate);
+                }
+                else if (event.key === 'Enter') {
+                    if ($(document.activeElement).hasClass('disabled')) {
+                        return;
+                    }
+                    $(document.activeElement).click();
+                    this.elementScope.hideDatepickerDropdown();
+                    const displayInputElem = this.elementScope.nativeElement.querySelector('.display-input');
+                    setTimeout(() => displayInputElem.focus());
+                }
+            });
+            this.focusBlurDatePickerHeadButtons();
+        }
+        focusBlurDatePickerHeadButtons() {
+            const datePickerHeadButton = $('.bs-datepicker-head button');
+            datePickerHeadButton.on('focus', function () { $(this).css('background-color', '#9AA0A3'); });
+            datePickerHeadButton.on('blur', function () { $(this).css('background-color', ''); });
+        }
+        /**
+         * This method is used to add tabindex, keybord and mouse events for months
+         */
+        loadMonths() {
+            setTimeout(() => {
+                this.addKeyBoardEventsForMonths();
+                this.addDatepickerMouseEvents();
+            });
+        }
+        /**
+         * This method sets keyboard events for months
+         */
+        addKeyBoardEventsForMonths() {
+            $('.bs-datepicker-body').keydown((event) => {
+                let newdate;
+                if ((event.ctrlKey && event.key === 'ArrowDown') || event.key === 'Enter') {
+                    if ($(document.activeElement).parent().hasClass('disabled')) {
+                        return;
+                    }
+                    $(document.activeElement).click();
+                    this.loadDays();
+                    const newDate = new Date(this.activeDate.getFullYear(), this.activeDate.getMonth(), 1);
+                    this.setActiveDateFocus(newDate);
+                }
+                else if (event.ctrlKey && event.key === 'ArrowUp') {
+                    // clicking on table header year to load list of years
+                    $('.bs-datepicker-head .current').first().click();
+                    this.loadYears();
+                    this.setActiveYearFocus(this.activeDate);
+                }
+                else if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    newdate = moment(this.activeDate).add(+3, 'month').toDate();
+                    this.setActiveMonthFocus(newdate);
+                }
+                else if (event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    newdate = moment(this.activeDate).add(-3, 'month').toDate();
+                    this.setActiveMonthFocus(newdate);
+                }
+                else if (event.key === 'ArrowLeft') {
+                    newdate = moment(this.activeDate).add(-1, 'month').toDate();
+                    this.setActiveMonthFocus(newdate);
+                }
+                else if (event.key === 'ArrowRight') {
+                    newdate = moment(this.activeDate).add(+1, 'month').toDate();
+                    this.setActiveMonthFocus(newdate);
+                }
+            });
+            this.focusBlurDatePickerHeadButtons();
+        }
+        /**
+         * This method is used to add tabindex, keybord and mouse events for years
+         */
+        loadYears() {
+            setTimeout(() => {
+                this.addKeyBoardEventsForYears();
+                this.addDatepickerMouseEvents();
+            });
+        }
+        /**
+         * This method is used to set focus for active month
+         */
+        setActiveMonthFocus(newDate, isMoouseEvent) {
+            this.setNextData(newDate);
+            const newMonth = months[newDate.getMonth()];
+            // check for keyboard event
+            if (!isMoouseEvent) {
+                if (newDate.getFullYear() < this.activeDate.getFullYear()) {
+                    this.goToOtherMonthOryear('previous', 'month');
+                }
+                else if (newDate.getFullYear() > this.activeDate.getFullYear()) {
+                    this.goToOtherMonthOryear('next', 'month');
+                }
+            }
+            setTimeout(() => {
+                $(`.bs-datepicker-body table.months span`).attr('tabindex', '-1');
+                $(`.bs-datepicker-body table.months span:contains(${newMonth})`).attr('tabindex', '0');
+                $(`.bs-datepicker-body table.months span:contains(${newMonth})`).focus();
+                this.activeDate = newDate;
+            });
+        }
+        /**
+         * This method sets keyboard events for years
+         */
+        addKeyBoardEventsForYears() {
+            $('.bs-datepicker-body').keydown((event) => {
+                let newdate;
+                if ((event.ctrlKey && event.key === 'ArrowDown') || event.key === 'Enter') {
+                    if ($(document.activeElement).parent().hasClass('disabled')) {
+                        return;
+                    }
+                    $(document.activeElement).click();
+                    this.loadMonths();
+                    this.setActiveMonthFocus(this.activeDate);
+                }
+                else if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    newdate = moment(this.activeDate).add(+4, 'year').toDate();
+                    this.setActiveYearFocus(newdate);
+                }
+                else if (event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    newdate = moment(this.activeDate).add(-4, 'year').toDate();
+                    this.setActiveYearFocus(newdate);
+                }
+                else if (event.key === 'ArrowLeft') {
+                    newdate = moment(this.activeDate).add(-1, 'year').toDate();
+                    this.setActiveYearFocus(newdate);
+                }
+                else if (event.key === 'ArrowRight') {
+                    newdate = moment(this.activeDate).add(+1, 'year').toDate();
+                    this.setActiveYearFocus(newdate);
+                }
+            });
+            this.focusBlurDatePickerHeadButtons();
+        }
+        /**
+         * This method is used to set focus for active year
+         */
+        setActiveYearFocus(newDate, isMouseEvent) {
+            const newYear = newDate.getFullYear();
+            const datePickerYears = $('.bs-datepicker-body table.years span');
+            const startYear = datePickerYears.first().text();
+            const endYear = datePickerYears.last().text();
+            // check for keyboard event
+            if (!isMouseEvent) {
+                if (newDate.getFullYear() < lodashEs.parseInt(startYear)) {
+                    this.goToOtherMonthOryear('previous', 'year');
+                }
+                else if (newDate.getFullYear() > lodashEs.parseInt(endYear)) {
+                    this.goToOtherMonthOryear('next', 'year');
+                }
+            }
+            setTimeout(() => {
+                $(`.bs-datepicker-body table.years span`).attr('tabindex', '-1');
+                $(`.bs-datepicker-body table.years span:contains(${newYear})`).attr('tabindex', '0');
+                $(`.bs-datepicker-body table.years span:contains(${newYear})`).focus();
+                this.activeDate = newDate;
+            });
+        }
+        /**
+         * This method sets focus for timepicker first input field(hours field) while opening time picker
+         * @param scope - scope of the time picker widget
+         */
+        focusTimePickerPopover(scope) {
+            this.elementScope = scope;
+            // setTimeout is used so that by then time input has the updated value. focus is setting back to the input field
+            this.elementScope.ngZone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    $('timepicker .form-group').first().find('> input.form-control').focus();
+                });
+            });
+        }
+        /**
+         * This function sets the keyboard events to Timepicker popup
+         */
+        bindTimePickerKeyboardEvents() {
+            setTimeout(() => {
+                const $timepickerPopup = $('body').find('> bs-dropdown-container timepicker');
+                $timepickerPopup.attr('tabindex', 0);
+                this.addEventsOnTimePicker($timepickerPopup);
+            });
+        }
+        focusOnInputEl() {
+            if ($(this.nativeElement).closest('.caption-floating').length > 0) {
+                setTimeout(() => {
+                    $(this.nativeElement).find('.app-textbox').focus();
+                }, 100);
+            }
+        }
+        /**
+         * This function checks whether the given date is valid or not
+         * @returns boolean value, true if date is valid else returns false
+         */
+        isValidDate(date) {
+            return date && date instanceof Date && !isNaN(date.getTime());
+        }
+        /**
+         * This function checks whether the given time is valid or not
+         */
+        timeFormatValidation() {
+            const enteredDate = $(this.nativeElement).find('input').val();
+            const newVal = i1$1.getNativeDateObject(enteredDate, { meridians: this.meridians, pattern: this.datepattern });
+            if (!this.formatValidation(newVal, enteredDate)) {
+                return;
+            }
+            this.invalidDateTimeFormat = false;
+            this.invokeOnChange(this.datavalue, undefined, false);
+        }
+        updateTimeValue(el, value, fieldName) {
+            let minEl = el.find('input[aria-label="minutes"]');
+            let secEl = el.find('input[aria-label="seconds"]');
+            minEl.value = secEl.value = '00';
+            if (value.length < 2) {
+                setTimeout(() => {
+                    fieldName === 'minutes' ? this.bsTimePicker.updateMinutes(minEl) : this.bsTimePicker.updateSeconds(secEl);
+                }, 500);
+            }
+            else {
+                fieldName === 'minutes' ? this.bsTimePicker.updateMinutes(minEl) : this.bsTimePicker.updateSeconds(secEl);
+            }
+        }
+        /**
+         * This function sets the events to given element
+         * @param $el - element on which the event is added
+         */
+        addEventsOnTimePicker($el) {
+            const inputFields = $el.find('.bs-timepicker-field');
+            // WMS-19382: update minutes and seconds to 0 when we enter hour value
+            inputFields.first().on('keyup', evt => {
+                const hourValue = evt.target.value;
+                lodashEs.forEach(inputFields, (field, index) => {
+                    // @ts-ignore
+                    if (evt.target !== field && field.value === '' && hourValue.length) {
+                        const fieldName = index === 1 ? 'minutes' : 'seconds';
+                        this.updateTimeValue($el, hourValue, fieldName);
+                    }
+                });
+            });
+            this.removeKeyupListener = () => {
+                inputFields.first().off('keyup');
+            };
+            $el.on('keydown', event => {
+                const $target = $(event.target);
+                const $parent = $target.parent();
+                const elementScope = this.elementScope;
+                let stopPropogation, preventDefault;
+                if (event.key === 'Escape') {
+                    elementScope.hideTimepickerDropdown();
+                }
+                if ($target.hasClass('bs-timepicker-field')) {
+                    if ($parent.is(':first-child')) {
+                        if ((event.shiftKey && event.key === 'Tab') || event.key === 'Enter' || event.key === 'Escape') {
+                            elementScope.setIsTimeOpen(false);
+                            this.focus();
+                            stopPropogation = true;
+                            preventDefault = true;
+                        }
+                    }
+                    else if ($parent.is(':last-child') || ($parent.next().next().find('button.disabled').length)) {
+                        if (event.key === 'Tab' || event.key === 'Escape' || event.key === 'Enter') {
+                            elementScope.setIsTimeOpen(false);
+                            this.focus();
+                            stopPropogation = true;
+                            preventDefault = true;
+                        }
+                    }
+                    else {
+                        if (event.key === 'Enter' || event.key === 'Escape') {
+                            elementScope.setIsTimeOpen(false);
+                            this.focus();
+                            stopPropogation = true;
+                            preventDefault = true;
+                        }
+                    }
+                    if (stopPropogation) {
+                        event.stopPropagation();
+                    }
+                    if (preventDefault) {
+                        event.preventDefault();
+                    }
+                    if (elementScope.mintime && elementScope.maxtime && !this.isValidDate(elementScope.bsTimeValue)) {
+                        if (event.key === 'ArrowDown') {
+                            elementScope.bsTimeValue = elementScope.maxTime;
+                        }
+                        else if (event.key === 'ArrowUp') {
+                            elementScope.bsTimeValue = elementScope.minTime;
+                        }
+                    }
+                    if (event.key === 'Tab') {
+                        this.invalidDateTimeFormat = false;
+                        this.invokeOnChange(this.datavalue, undefined, false);
+                        const pattern = this.datepattern || this.timepattern;
+                        if (i1$1.getFormattedDate(elementScope.datePipe, elementScope.bsTimeValue, pattern, this.timeZone, null, null, this) === elementScope.displayValue) {
+                            $(this.nativeElement).find('.display-input').val(elementScope.displayValue);
+                        }
+                    }
+                    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                        this.timeFormatValidation();
+                    }
+                }
+                else if ($target.hasClass('btn-default')) {
+                    if (event.key === 'Tab' || event.key === 'Escape') {
+                        elementScope.setIsTimeOpen(false);
+                        this.focus();
+                    }
+                }
+            });
+            $el.find('a').on('click', evt => {
+                const elementScope = this.elementScope;
+                const $target = $(evt.target);
+                if (elementScope.mintime && elementScope.maxtime && !this.isValidDate(elementScope.bsTimeValue)) {
+                    if ($target.find('span').hasClass('bs-chevron-down')) {
+                        elementScope.bsTimeValue = elementScope.maxTime;
+                    }
+                    else if ($target.find('span').hasClass('bs-chevron-up')) {
+                        elementScope.bsTimeValue = elementScope.minTime;
+                    }
+                }
+                this.timeFormatValidation();
+            });
+        }
+        updateFormat(pattern) {
+            if (pattern === 'datepattern') {
+                this._dateOptions.dateInputFormat = this.datepattern;
+                this.showseconds = lodashEs.includes(this.datepattern, 's');
+                this.ismeridian = lodashEs.includes(this.datepattern, 'h');
+            }
+            else if (pattern === 'timepattern') {
+                this.showseconds = lodashEs.includes(this.timepattern, 's');
+                this.ismeridian = lodashEs.includes(this.timepattern, 'h');
+            }
+        }
+        getMobileInput() {
+            return this.nativeElement.querySelector('.mobile-input');
+        }
+        onDateTimeInputBlur() {
+            // removing the opacity on blur of the mobile widget
+            const displayInputElem = this.getMobileInput();
+            if (displayInputElem && !i1$1.hasCordova()) {
+                const children = this.nativeElement.children;
+                for (let i = 0; i < children.length; i++) {
+                    children[i].classList.remove('add-opacity');
+                }
+                displayInputElem.classList.remove('remove-opacity');
+            }
+        }
+        onDateTimeInputFocus(skipFocus = false) {
+            if (!this.loadNativeDateInput) {
+                return;
+            }
+            const displayInputElem = this.getMobileInput();
+            // toggling the classes to show and hide the native widget using opacity
+            if (skipFocus && !i1$1.hasCordova()) {
+                const children = this.nativeElement.children;
+                for (let i = 0; i < children.length; i++) {
+                    children[i].classList.add('add-opacity');
+                }
+                displayInputElem.classList.add('remove-opacity');
+                return;
+            }
+            if (displayInputElem && this._triggeredByUser) {
+                displayInputElem.focus();
+                displayInputElem.click();
+            }
+        }
+        getCordovaPluginDatePickerApi() {
+            if (i1$1.isIos()) {
+                return lodashEs.get(window, 'cordova.wavemaker.datePicker.selectDate');
+            }
+        }
+        /**
+         * This method sets the mouse events to Datepicker popup. These events are required when we navigate date picker through mouse.
+         */
+        addDatepickerMouseEvents() {
+            $(".bs-datepicker-head .previous span").attr("aria-hidden", 'true');
+            $(".bs-datepicker-head .next span").attr("aria-hidden", 'true');
+            $(".bs-datepicker-head").on("click", ".previous", (event) => {
+                this.next = this.getMonth(this.activeDate, 0);
+                this.prev = this.getMonth(this.activeDate, -2);
+                this.clicked = true;
+                // check for original mouse click
+                if (event.originalEvent) {
+                    this.setFocusForDate(-1);
+                }
+                var prevMon = this.getMonth(this.activeDate, -1);
+                setTimeout(() => {
+                    $(".bs-datepicker-head .previous span").attr("aria-hidden", 'true');
+                    $(".bs-datepicker-head .next span").attr("aria-hidden", 'true');
+                    $(".bs-datepicker-head .next").attr('aria-label', `Next Month, ${this.next.fullMonth} ${this.next.date.getFullYear()}`);
+                    $(".bs-datepicker-head .previous").attr('aria-label', `Previous Month, ${this.prev.fullMonth} ${this.prev.date.getFullYear()}`);
+                    $('.bs-datepicker-head .current').first().append(`<h2 aria-hidden="false" aria-atomic="true" aria-live='polite' class="sr-only">Changed to Previous Month, ${prevMon.fullMonth} and year ${prevMon.date.getFullYear()}</h2>`);
+                    $('.bs-datepicker-head').on('focus', '.current', function () {
+                        $('.bs-datepicker-head .current').find('h2').remove();
+                    });
+                    $(`.bs-datepicker-head .previous`).focus();
+                });
+            });
+            $(".bs-datepicker-head").on("click", ".next", (event) => {
+                this.next = this.getMonth(this.activeDate, 2);
+                this.prev = this.getMonth(this.activeDate, 0);
+                this.clicked = true;
+                // check for original mouse click
+                if (event.originalEvent) {
+                    this.setFocusForDate(1);
+                }
+                var nextMon = this.getMonth(this.activeDate, 1);
+                setTimeout(() => {
+                    $(".bs-datepicker-head .previous span").attr("aria-hidden", 'true');
+                    $(".bs-datepicker-head .next span").attr("aria-hidden", 'true');
+                    $(".bs-datepicker-head .next").attr('aria-label', `Next Month, ${this.next.fullMonth} ${this.next.date.getFullYear()}`);
+                    $(".bs-datepicker-head .previous").attr('aria-label', `Previous Month, ${this.prev.fullMonth} ${this.prev.date.getFullYear()}`);
+                    $('.bs-datepicker-head .current').first().append(`<h2 aria-hidden="false" aria-atomic="true" aria-live='polite' class="sr-only">Changed to Next Month, ${nextMon.fullMonth} and year ${nextMon.date.getFullYear()}</h2>`);
+                    $('.bs-datepicker-head').on('focus', '.current', function () {
+                        $('.bs-datepicker-head .current').find('h2').remove();
+                    });
+                    $(`.bs-datepicker-head .next`).focus();
+                });
+            });
+            $(".bs-datepicker-head").on("click", ".current", (event) => {
+                // check for original mouse click
+                if (event.originalEvent) {
+                    this.setFocusForCurrentMonthOryear();
+                }
+            });
+            $('.bs-datepicker-body').on("click", ".bs-datepicker-action-buttons", (event) => {
+                event.stopPropagation();
+                // check for original mouse click
+                if (event.originalEvent) {
+                    this.setFocusForMonthOrDay();
+                }
+            });
+            // if(!this.clicked) {
+            $(".bs-datepicker-head .next").attr('aria-label', `Next Month, ${this.next.fullMonth} ${this.next.date.getFullYear()}`);
+            $(".bs-datepicker-head .previous").attr('aria-label', `Previous Month, ${this.prev.fullMonth} ${this.prev.date.getFullYear()}`);
+            //  }
+        }
+        blurDateInput(isPickerOpen) {
+            const displayInputElem = this.nativeElement.querySelector('.display-input');
+            if (isPickerOpen) {
+                setTimeout(() => displayInputElem.blur());
+            }
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'tabindex') {
+                return;
+            }
+            if (key === 'required') {
+                this._onChange(this.datavalue);
+                return;
+            }
+            if (key === 'datepattern') {
+                this.updateFormat(key);
+            }
+            else if (key === 'showweeks') {
+                this._dateOptions.showWeekNumbers = nv;
+            }
+            else if (key === 'mindate') {
+                this._dateOptions.minDate = (nv === CURRENT_DATE$2) ? this.mindate = new Date() : i1$1.getDateObj(nv);
+                this.minDateMaxDateValidationOnInput(this.datavalue);
+            }
+            else if (key === 'maxdate') {
+                this._dateOptions.maxDate = (nv === CURRENT_DATE$2) ? this.maxdate = new Date() : i1$1.getDateObj(nv);
+                this.minDateMaxDateValidationOnInput(this.datavalue);
+            }
+            else if (key === 'excludedates' || key === 'excludedays') {
+                if (this.excludedays) {
+                    this.excludedDaysToDisable = lodashEs.split(this.excludedays, ',').map((day) => {
+                        return +day;
+                    });
+                }
+                if (this.excludedates) {
+                    this.excludedDatesToDisable = this.excludedates;
+                    if (lodashEs.isString(this.excludedates)) {
+                        // @ts-ignore
+                        this.excludedDatesToDisable = lodashEs.split(this.excludedates, ',');
+                    }
+                    this.excludedDatesToDisable = this.excludedDatesToDisable.map(d => i1$1.getDateObj(d));
+                }
+                this.minDateMaxDateValidationOnInput(this.datavalue);
+            }
+            else if (key === 'selectfromothermonth') {
+                this._dateOptions.selectFromOtherMonth = nv;
+            }
+            else if (key === 'todaybutton') {
+                this._dateOptions.showTodayButton = nv;
+            }
+            else if (key === 'clearbutton') {
+                this._dateOptions.showClearButton = nv;
+            }
+            else if (key === 'todaybuttonlabel') {
+                this._dateOptions.todayButtonLabel = this.i18nService.getLocalizedMessage(nv) || nv;
+            }
+            else if (key === 'clearbuttonlabel') {
+                this._dateOptions.clearButtonLabel = this.i18nService.getLocalizedMessage(nv) || nv;
+            }
+            else if (key === 'showcustompicker') {
+                this.loadNativeDateInput = i1$1.isMobile() && !this.showcustompicker;
+            }
+            else if (key === 'adaptiveposition') {
+                this._dateOptions.adaptivePosition = nv;
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        ngAfterViewInit() {
+            super.ngAfterViewInit();
+            this.containerTarget = base.getContainerTargetClass(this.nativeElement);
+            this.isReadOnly = this.dataentrymode != 'undefined' && !this.isDataEntryModeEnabledOnInput(this.dataentrymode);
+            // this mobileinput width varies in ios hence setting width here.
+            const mobileInput = this.getMobileInput();
+            if (mobileInput) {
+                setTimeout(() => {
+                    mobileInput.style.width = '100%';
+                    mobileInput.style.height = '100%';
+                });
+            }
+        }
+        ngOnDestroy() {
+            if (this.dateOnShowSubscription) {
+                this.dateOnShowSubscription.unsubscribe();
+            }
+            if (this.cancelLocaleChangeSubscription) {
+                this.cancelLocaleChangeSubscription();
+            }
+            super.ngOnDestroy();
+        }
+        ngOnDetach() {
+            this.datetimepickerComponent?.hideModal();
+        }
+        setTimezone(locale) {
+            this.i18nService.setTimezone(locale, this);
+        }
+        static { this.ɵfac = function BaseDateTimeComponent_Factory(t) { i0__namespace.ɵɵinvalidFactory(); }; }
+        static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: BaseDateTimeComponent, viewQuery: function BaseDateTimeComponent_Query(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵviewQuery(i4$1.BsDropdownDirective, 5);
+                i0__namespace.ɵɵviewQuery(i6.TimepickerComponent, 5);
+                i0__namespace.ɵɵviewQuery(DateTimePickerComponent, 5);
+            } if (rf & 2) {
+                let _t;
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.bsDropdown = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.bsTimePicker = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.datetimepickerComponent = _t.first);
+            } }, features: [i0__namespace.ɵɵInheritDefinitionFeature] }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseDateTimeComponent, [{
+            type: i0.Directive
+        }], () => [{ type: i0__namespace.Injector }, { type: undefined }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { bsDropdown: [{
+                type: i0.ViewChild,
+                args: [i4$1.BsDropdownDirective]
+            }], bsTimePicker: [{
+                type: i0.ViewChild,
+                args: [i6.TimepickerComponent]
+            }], datetimepickerComponent: [{
+                type: i0.ViewChild,
+                args: [DateTimePickerComponent]
+            }] }); })();
+
+    const dateProps = new Map([
+        ['autofocus', base.PROP_BOOLEAN],
+        ['class', base.PROP_STRING],
+        ['dataentrymode', { value: 'default', ...base.PROP_STRING }],
+        ['datavaluesource', base.PROP_ANY],
+        ['datavalue', base.PROP_STRING],
+        ['datepattern', base.PROP_STRING],
+        ['disabled', base.PROP_BOOLEAN],
+        ['excludedays', base.PROP_STRING],
+        ['excludedates', base.PROP_STRING],
+        ['hint', base.PROP_STRING],
+        ['maxdate', base.PROP_STRING],
+        ['mindate', base.PROP_STRING],
+        ['name', base.PROP_STRING],
+        ['outputformat', { value: 'yyyy-MM-dd', ...base.PROP_STRING }],
+        ['placeholder', { value: 'Select Date', ...base.PROP_STRING }],
+        ['readonly', base.PROP_BOOLEAN],
+        ['required', base.PROP_BOOLEAN],
+        ['shortcutkey', base.PROP_STRING],
+        ['show', { value: true, ...base.PROP_BOOLEAN }],
+        ['showdropdownon', { value: 'default', ...base.PROP_STRING }],
+        ['showbuttonbar', { value: true, ...base.PROP_BOOLEAN }], // TODO not addressed
+        ['showcustompicker', { value: false, ...base.PROP_BOOLEAN }],
+        ['showindevice', { displayType: 'inline-block', value: 'all', ...base.PROP_STRING }],
+        ['showweeks', { value: false, ...base.PROP_BOOLEAN }],
+        ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+        ['selectfromothermonth', { value: true, ...base.PROP_BOOLEAN }],
+        ['todaybutton', { value: true, ...base.PROP_BOOLEAN }],
+        ['clearbutton', { value: true, ...base.PROP_BOOLEAN }],
+        ['adaptiveposition', { value: true, ...base.PROP_BOOLEAN }],
+        ['todaybuttonlabel', { value: 'LABEL_TODAY_DATE', ...base.PROP_STRING }],
+        ['clearbuttonlabel', { value: 'LABEL_CLEAR_DATE', ...base.PROP_STRING }],
+        ['showdateformatasplaceholder', base.PROP_BOOLEAN],
+    ]);
+    const registerProps$2 = () => {
+        base.register('wm-date', dateProps);
+        base.registerFormWidget(i1$1.FormWidgetType.DATE, new Map(dateProps));
+    };
+
+    function validateTheMaskedDate(format, locale) {
+        if (format == 'timestamp') {
+            return false;
+        }
+        let modifiedFormat = format.toUpperCase().replace(/E/g, 'd');
+        if ((modifiedFormat.split('D').length - 1) === 1) {
+            modifiedFormat = modifiedFormat.replace('D', 'DD');
+        }
+        if ((modifiedFormat.split('M').length - 1) === 1) {
+            modifiedFormat = modifiedFormat.replace('M', 'MM');
+        }
+        const parseFn = str => {
+            return moment(str, modifiedFormat).toDate();
+        };
+        const formatFn = date => {
+            return moment(date, modifiedFormat).format(modifiedFormat);
+        };
+        return {
+            mask: Date,
+            pattern: modifiedFormat,
+            format: formatFn,
+            parse: parseFn,
+            blocks: {
+                YYYY: {
+                    mask: IMask.MaskedRange,
+                    from: 1900,
+                    to: 9999,
+                    placeholderChar: 'Y',
+                    maxLength: 4,
+                },
+                YYY: {
+                    mask: IMask.MaskedRange,
+                    from: 900,
+                    to: 999,
+                    placeholderChar: 'Y',
+                    maxLength: 3,
+                },
+                YY: {
+                    mask: IMask.MaskedRange,
+                    from: 0,
+                    to: 99,
+                    placeholderChar: 'Y',
+                    maxLength: 2,
+                },
+                Y: {
+                    mask: IMask.MaskedRange,
+                    from: 1900,
+                    to: 9999,
+                    placeholderChar: 'Y',
+                    maxLength: 4,
+                },
+                M: {
+                    mask: IMask.MaskedRange,
+                    from: 1,
+                    to: 12,
+                    placeholderChar: 'M',
+                    maxLength: 2,
+                },
+                MM: {
+                    mask: IMask.MaskedRange,
+                    from: 1,
+                    to: 12,
+                    placeholderChar: 'M',
+                    maxLength: 2,
+                },
+                MMM: {
+                    mask: IMask.MaskedEnum,
+                    enum: Array.from({ length: 12 }, (_, i) => new Date(0, i).toLocaleString(locale, { month: 'short' })),
+                    placeholderChar: 'M',
+                    maxLength: 3,
+                },
+                MMMM: {
+                    mask: IMask.MaskedEnum,
+                    enum: Array.from({ length: 12 }, (_, i) => new Date(0, i).toLocaleString(locale, { month: 'long' })),
+                    placeholderChar: "M",
+                    maxLength: 4
+                },
+                DD: {
+                    mask: IMask.MaskedRange,
+                    from: 1,
+                    to: 31,
+                    placeholderChar: 'D',
+                    maxLength: 2,
+                },
+                D: {
+                    mask: IMask.MaskedRange,
+                    from: 1,
+                    to: 31,
+                    placeholderChar: 'D',
+                    maxLength: 2,
+                },
+                ddd: {
+                    mask: IMask.MaskedEnum,
+                    enum: Array.from({ length: 7 }, (_, i) => new Date(0, 0, i + 1).toLocaleString(locale, { weekday: 'short' })),
+                    placeholderChar: 'E',
+                    maxLength: 3,
+                },
+                dddd: {
+                    mask: IMask.MaskedEnum,
+                    enum: Array.from({ length: 7 }, (_, i) => new Date(0, 0, i + 1).toLocaleString(locale, { weekday: 'long' })),
+                    placeholderChar: 'E',
+                    minLength: 6,
+                },
+            },
+            autofix: true,
+            lazy: false,
+            overwrite: true,
+            skipInvalid: true
+        };
+    }
+
+    const _c0$2 = ["dateInput"];
+    const _c1$2 = ["wmDate", ""];
+    function DateComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
+        const _r2 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "wm-datetimepicker", 9);
+        i0__namespace.ɵɵlistener("change", function DateComponent_ng_template_8_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.onDateChange($event)); });
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵelementStart(1, "div", 10);
+        i0__namespace.ɵɵlistener("click", function DateComponent_ng_template_8_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(!(ctx_r2.disabled || ctx_r2.readonly) && ctx_r2.showDatePickerModal(ctx_r2.bsDataValue)); })("focus", function DateComponent_ng_template_8_Template_div_focus_1_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); ctx_r2.onDateTimeInputFocus(true); return i0__namespace.ɵɵresetView(ctx_r2.invokeOnFocus($event)); })("blur", function DateComponent_ng_template_8_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); ctx_r2.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r2.invokeOnTouched($event)); });
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const ctx_r2 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("config", ctx_r2._dateOptions)("placement", ctx_r2.modal)("excludedDaysToDisable", ctx_r2.excludedDaysToDisable)("excludedDatesToDisable", ctx_r2.excludedDatesToDisable)("displayFormat", ctx_r2.dateInputFormat)("value", ctx_r2.bsDataValue);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("tabindex", ctx_r2.tabindex || 0);
+        i0__namespace.ɵɵattribute("aria-label", ctx_r2.displayValue ? "Change Date " + ctx_r2.displayValue : ctx_r2.hint || "Choose Date");
+    } }
+    const CURRENT_DATE$1 = 'CURRENT_DATE';
+    const DEFAULT_CLS$2 = 'app-date input-group';
+    const WIDGET_CONFIG$2 = {
+        widgetType: 'wm-date',
+        hostClass: DEFAULT_CLS$2
+    };
+    class DateComponent extends BaseDateTimeComponent {
+        static { this.initializeProps = registerProps$2(); }
+        get timestamp() {
+            return this.bsDataValue ? this.bsDataValue.valueOf() : undefined;
+        }
+        get dateInputFormat() {
+            return this._dateOptions.dateInputFormat || 'yyyy-MM-dd';
+        }
+        get displayValue() {
+            if (this.showdateformatasplaceholder && this.imask?.maskRef && this.maskDateInputFormat) {
+                return i1$1.getFormattedDate(this.datePipe, this.bsDataValue, this.maskDateInputFormat, this.timeZone, null, this.isCurrentDate, this) || '';
+            }
+            return i1$1.getFormattedDate(this.datePipe, this.bsDataValue, this.dateInputFormat, this.timeZone, null, this.isCurrentDate, this) || '';
+        }
+        get nativeDisplayValue() {
+            return i1$1.getFormattedDate(this.datePipe, this.bsDataValue, 'yyyy-MM-dd', this.timeZone, null, this.isCurrentDate, this) || '';
+        }
+        // @ts-ignore
+        get datavalue() {
+            return i1$1.getFormattedDate(this.datePipe, this.bsDataValue, this.outputformat, this.timeZone, null, this.isCurrentDate, this) || '';
+        }
+        // Todo[Shubham]: needs to be redefined
+        // sets the dataValue and computes the display model values
+        // @ts-ignore
+        set datavalue(newVal) {
+            if (newVal === CURRENT_DATE$1) {
+                setTimeout(() => {
+                    this.bsDataValue = this.timeZone ? i1$1.getMomentLocaleObject(this.timeZone) : new Date();
+                }, 50);
+                this.isCurrentDate = true;
+            }
+            else {
+                this.bsDataValue = newVal ? i1$1.getDateObj(newVal, { isNativePicker: this.loadNativeDateInput }, this.timeZone) : undefined;
+                this.isCurrentDate = false;
+            }
+            // update the previous datavalue.
+            this.invokeOnChange(this.datavalue, undefined, true);
+            this.cdRef.detectChanges();
+        }
+        // TODO use BsLocaleService to set the current user's locale to see the localized labels
+        constructor(inj, cdRef, appDefaults, explicitContext) {
+            super(inj, WIDGET_CONFIG$2, explicitContext);
+            this.cdRef = cdRef;
+            this.appDefaults = appDefaults;
+            this.isOpen = false;
+            this.isEnterPressedOnDateInput = false;
+            this.showdateformatasplaceholder = false;
+            base.styler(this.nativeElement, this);
+            this.dateContainerCls = `app-date-${this.widgetId}`;
+            this._dateOptions.containerClass = `app-date ${this.dateContainerCls}`;
+            this._dateOptions.showWeekNumbers = false;
+            this._bsDefaultLoadCheck = true;
+            this.datepattern = this.appDefaults.dateFormat || i1$1.getDisplayDateTimeFormat(i1$1.FormWidgetType.DATE);
+            this.updateFormat('datepattern');
+        }
+        /**
+         * This is an internal method triggered when the date input changes
+         */
+        onDisplayDateChange($event, isNativePicker = false) {
+            this.updateIMask();
+            if (this.isEnterPressedOnDateInput) {
+                this.isEnterPressedOnDateInput = false;
+                return;
+            }
+            const newVal = i1$1.getDateObj($event.target.value, { pattern: this.datepattern, isNativePicker: isNativePicker });
+            // date pattern validation
+            // if invalid pattern is entered, device is showing an error.
+            if (!this.formatValidation(newVal, $event.target.value, isNativePicker)) {
+                return;
+            }
+            // min date and max date validation in mobile view.
+            // if invalid dates are entered, device is showing an alert.
+            if (isNativePicker && this.minDateMaxDateValidationOnInput(newVal, $event, this.displayValue, isNativePicker)) {
+                return;
+            }
+            this.setDataValue(newVal);
+        }
+        // sets the dataValue and computes the display model values
+        setDataValue(newVal) {
+            this.invalidDateTimeFormat = false;
+            // min date and max date validation in web.
+            // if invalid dates are entered, device is showing validation message.
+            this.minDateMaxDateValidationOnInput(newVal);
+            if (i1$1.getFormattedDate(this.datePipe, newVal, this.dateInputFormat, this.timeZone, null, this.isCurrentDate, this) === this.displayValue) {
+                $(this.nativeElement).find('.display-input').val(this.displayValue);
+            }
+            if (newVal) {
+                this.bsDataValue = newVal;
+                this.updateIMask();
+            }
+            else {
+                this.bsDataValue = undefined;
+            }
+            this.invokeOnChange(this.datavalue, {}, true);
+        }
+        onDatePickerOpen() {
+            this.isOpen = true;
+            this.activeDate = this.bsDataValue ? this.bsDataValue : (this.timeZone ? i1$1.getMomentLocaleObject(this.timeZone) : new Date());
+            if (!this.bsDataValue) {
+                this.hightlightToday(this.activeDate);
+            }
+            this.updateIMask();
+            // We are using the two input tags(To maintain the modal and proxy modal) for the date control.
+            // So actual bootstrap input target width we made it to 0, so bootstrap calculating the calendar container top position improperly.
+            // To fix the container top position set the width 1px;
+            this.$element.find('.model-holder').width('1px');
+            const dpContainerEl = $('bs-datepicker-container');
+            dpContainerEl.attr('aria-label', 'Use Arrow keys to navigate dates, Choose Date from datepicker');
+            $('.bs-calendar-container').removeAttr('role');
+            const datePickerContainer = $('.bs-datepicker-container')[0];
+            this.focusTrap = base.setFocusTrap(datePickerContainer, true);
+            this.focusTrap.activate();
+            this.addDatepickerKeyboardEvents(this, false);
+            i1$1.adjustContainerPosition($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
+            i1$1.adjustContainerRightEdges($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
+            if (this.timeZone) {
+                const todayBtn = document.querySelector(`.${this.dateContainerCls} .bs-datepicker-buttons .btn-today-wrapper button`);
+                const setTodayTZHandler = (event) => {
+                    const todayTZ = i1$1.getMomentLocaleObject(this.timeZone);
+                    if (new Date(this.bsDataValue).toDateString() !== new Date(todayTZ).toDateString()) {
+                        this.bsDataValue = todayTZ;
+                    }
+                    todayBtn.removeEventListener('click', setTodayTZHandler);
+                };
+                todayBtn.addEventListener('click', setTodayTZHandler);
+            }
+        }
+        onInputBlur($event) {
+            this.updateIMask();
+            if (!$($event.relatedTarget).hasClass('current-date')) {
+                this.invokeOnTouched();
+                this.invokeEventCallback('blur', { $event });
+            }
+        }
+        updateIMask() {
+            this.imask?.maskRef?.updateValue();
+        }
+        hideDatepickerDropdown() {
+            this.invokeOnTouched();
+            this.isOpen = false;
+            this.focusTrap?.deactivate();
+            this.isEnterPressedOnDateInput = false;
+            if (this.deregisterEventListener) {
+                this.deregisterEventListener();
+            }
+            this.blurDateInput(this.isOpen);
+        }
+        // change and blur events are added from the template
+        handleEvent(node, eventName, callback, locals) {
+            if (!lodashEs.includes(['blur', 'focus', 'change', 'click'], eventName)) {
+                super.handleEvent(node, eventName, callback, locals);
+            }
+        }
+        /**
+         * This is an internal method used to toggle the dropdown of the date widget
+         */
+        toggleDpDropdown($event, skipFocus = false) {
+            if (this.loadNativeDateInput) {
+                // Fixes click event getting triggred twice in Mobile devices.
+                if (!skipFocus) {
+                    this.onDateTimeInputFocus();
+                }
+            }
+            if ($event.type === 'click') {
+                this.invokeEventCallback('click', { $event: $event });
+                //  this.focusOnInputEl();
+            }
+            if ($event.target && $($event.target).is('input') && !(this.isDropDownDisplayEnabledOnInput(this.showdropdownon))) {
+                $event.stopPropagation();
+                return;
+            }
+            this.bsDatePickerDirective.toggle();
+            this.addBodyClickListener(this.bsDatePickerDirective.isOpen);
+        }
+        addBodyClickListener(skipListener) {
+            if (!skipListener) {
+                return;
+            }
+            const bodyElement = document.querySelector('body');
+            setTimeout(() => {
+                const bsDateContainerElement = bodyElement.querySelector(`.${this.dateContainerCls}`);
+                this.deregisterEventListener = i1$1.addEventListenerOnElement(bodyElement, bsDateContainerElement, this.nativeElement, 'click', this.isDropDownDisplayEnabledOnInput(this.showdropdownon), () => {
+                    this.isOpen = false;
+                }, 0 /* EVENT_LIFE.ONCE */, true);
+            }, 350);
+        }
+        /**
+         * This is an internal method triggered when pressing key on the date input
+         */
+        onDisplayKeydown(event) {
+            if (this.isDropDownDisplayEnabledOnInput(this.showdropdownon)) {
+                event.stopPropagation();
+                if (event.key === 'Enter') {
+                    const newVal = i1$1.getDateObj(event.target.value, { pattern: this.datepattern });
+                    event.preventDefault();
+                    const formattedDate = i1$1.getFormattedDate(this.datePipe, newVal, this.dateInputFormat, this.timeZone, null, this.isCurrentDate, this);
+                    const inputVal = event.target.value.trim();
+                    if (inputVal && this.datepattern === 'timestamp') {
+                        if (!lodashEs.isNaN(inputVal) && lodashEs.parseInt(inputVal) !== formattedDate) {
+                            this.invalidDateTimeFormat = true;
+                            this.invokeOnChange(this.datavalue, event, false);
+                        }
+                    }
+                    else if (inputVal && inputVal !== formattedDate) {
+                        this.invalidDateTimeFormat = true;
+                        this.invokeOnChange(this.datavalue, event, false);
+                    }
+                    else {
+                        this.invalidDateTimeFormat = false;
+                        this.isEnterPressedOnDateInput = true;
+                        this.bsDatePickerDirective.bsValue = event.target.value ? newVal : '';
+                        this.updateIMask();
+                    }
+                    this.toggleDpDropdown(event);
+                }
+                else {
+                    this.hideDatepickerDropdown();
+                }
+            }
+            else {
+                this.hideDatepickerDropdown();
+            }
+        }
+        /**
+         * This is an internal method triggered when the date selection changes
+         */
+        onDateChange(newVal) {
+            /**
+             *  Ngx-bootstrap upgrade : To avoid the page load datechange event;
+             *  TODO:
+             *  https://github.com/valor-software/ngx-bootstrap/issues/6016
+             *  For above issue, once we get the solution from Ngx-Bootstrap team,  remove the _bsDefaultLoadCheck check and update accordingly.
+             * */
+            if (this._bsDefaultLoadCheck) {
+                this._bsDefaultLoadCheck = false;
+                return;
+            }
+            this.setDataValue(newVal);
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'showdateformatasplaceholder') {
+                this.showdateformatasplaceholder = nv;
+                this.imask?.destroyMask();
+                if (this.showdateformatasplaceholder && this.datepattern !== 'timestamp') {
+                    this.mask = validateTheMaskedDate(this.datepattern, this.selectedLocale);
+                    this.maskDateInputFormat = this.dateInputFormat;
+                    this.maskDateInputFormat = (this.dateInputFormat.split('d').length - 1) === 1 ? this.maskDateInputFormat.replace('d', 'dd') : this.maskDateInputFormat;
+                    this.maskDateInputFormat = (this.dateInputFormat.split('M').length - 1) === 1 ? this.maskDateInputFormat.replace('M', 'MM') : this.maskDateInputFormat;
+                    this.updateIMask();
+                }
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        static { this.ɵfac = function DateComponent_Factory(t) { return new (t || DateComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.ChangeDetectorRef), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.AppDefaults), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
+        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: DateComponent, selectors: [["", "wmDate", ""]], viewQuery: function DateComponent_Query(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵviewQuery(i3.BsDatepickerDirective, 5);
+                i0__namespace.ɵɵviewQuery(_c0$2, 5, i4.IMaskDirective);
+            } if (rf & 2) {
+                let _t;
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.bsDatePickerDirective = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.imask = _t.first);
+            } }, features: [i0__namespace.ɵɵProvidersFeature([
+                    base.provideAs(DateComponent, i5.NG_VALUE_ACCESSOR, true),
+                    base.provideAs(DateComponent, i5.NG_VALIDATORS, true),
+                    base.provideAsWidgetRef(DateComponent)
+                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$2, decls: 9, vars: 27, consts: [["dateInput", ""], ["datepicker", "bsDatepicker"], ["focus-target", "", "type", "text", 1, "form-control", "app-textbox", "app-dateinput", "display-input", 3, "click", "focus", "blur", "change", "keydown", "name", "imask", "unmask", "tabindex", "value", "disabled", "autofocus", "required", "readOnly"], [1, "input-group-btn"], ["type", "button", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-time", 3, "click", "tabindex", "disabled"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-calendar"], [2, "width", "0", "display", "inline-block"], ["aria-label", "datepicker dropdownmenu", "aria-controls", "date", "bsDatepicker", "", "placement", "bottom right", 1, "model-holder", 3, "onShown", "onHidden", "bsValueChange", "tabindex", "container", "bsConfig", "isOpen", "daysDisabled", "datesDisabled", "isDisabled", "bsValue"], [3, "ngIf"], ["dateTimePicker", "", "mode", "DATE", 3, "change", "config", "placement", "excludedDaysToDisable", "excludedDatesToDisable", "displayFormat", "value"], ["role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "click", "focus", "blur", "tabindex"]], template: function DateComponent_Template(rf, ctx) { if (rf & 1) {
+                const _r1 = i0__namespace.ɵɵgetCurrentView();
+                i0__namespace.ɵɵelementStart(0, "input", 2, 0);
+                i0__namespace.ɵɵlistener("click", function DateComponent_Template_input_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.toggleDpDropdown($event, true)); })("focus", function DateComponent_Template_input_focus_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.onDateTimeInputFocus(); ctx.invokeOnFocus($event); return i0__namespace.ɵɵresetView(ctx.updateIMask()); })("blur", function DateComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onInputBlur($event)); })("change", function DateComponent_Template_input_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onDisplayDateChange($event)); })("keydown", function DateComponent_Template_input_keydown_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx._triggeredByUser = true; return i0__namespace.ɵɵresetView(ctx.onDisplayKeydown($event)); });
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementStart(2, "span", 3)(3, "button", 4);
+                i0__namespace.ɵɵlistener("click", function DateComponent_Template_button_click_3_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.toggleDpDropdown($event, false)); });
+                i0__namespace.ɵɵelement(4, "i", 5);
+                i0__namespace.ɵɵelementEnd()();
+                i0__namespace.ɵɵelementStart(5, "div", 6)(6, "input", 7, 1);
+                i0__namespace.ɵɵlistener("onShown", function DateComponent_Template_input_onShown_6_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onDatePickerOpen()); })("onHidden", function DateComponent_Template_input_onHidden_6_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.hideDatepickerDropdown()); })("bsValueChange", function DateComponent_Template_input_bsValueChange_6_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onDateChange($event)); });
+                i0__namespace.ɵɵelementEnd()();
+                i0__namespace.ɵɵtemplate(8, DateComponent_ng_template_8_Template, 2, 8, "ng-template", 8);
+            } if (rf & 2) {
+                i0__namespace.ɵɵproperty("name", ctx.name)("imask", ctx.mask)("unmask", true)("tabindex", ctx.loadNativeDateInput ? "-1" : ctx.tabindex)("value", ctx.displayValue)("disabled", ctx.disabled || ctx.readonly)("autofocus", ctx.autofocus)("required", ctx.required)("readOnly", ctx.isReadOnly);
+                i0__namespace.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+                i0__namespace.ɵɵadvance(3);
+                i0__namespace.ɵɵproperty("tabindex", ctx.loadNativeDateInput ? "-1" : ctx.tabindex)("disabled", ctx.disabled || ctx.readonly);
+                i0__namespace.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput)("aria-label", ctx.displayValue ? "Change Date " + ctx.displayValue : "Choose date by pressing enter");
+                i0__namespace.ɵɵadvance(3);
+                i0__namespace.ɵɵproperty("tabindex", -1)("container", ctx.containerTarget || ".wm-app")("bsConfig", ctx._dateOptions)("isOpen", ctx.isOpen)("daysDisabled", ctx.excludedDaysToDisable)("datesDisabled", ctx.excludedDatesToDisable)("isDisabled", ctx.disabled || ctx.readonly)("bsValue", ctx.bsDataValue);
+                i0__namespace.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput);
+                i0__namespace.ɵɵadvance(2);
+                i0__namespace.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
+            } }, dependencies: [i2__namespace.NgIf, i3__namespace.BsDatepickerDirective, i3__namespace.BsDatepickerInputDirective, i4__namespace.IMaskDirective, DateTimePickerComponent], encapsulation: 2 }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DateComponent, [{
+            type: i0.Component,
+            args: [{ selector: '[wmDate]', providers: [
+                        base.provideAs(DateComponent, i5.NG_VALUE_ACCESSOR, true),
+                        base.provideAs(DateComponent, i5.NG_VALIDATORS, true),
+                        base.provideAsWidgetRef(DateComponent)
+                    ], template: "    <input class=\"form-control app-textbox app-dateinput display-input\"\n        focus-target\n        type=\"text\"\n        [name]=\"name\"\n        #dateInput\n        [imask]=\"mask\"\n        [unmask]=\"true\"\n        [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n        [attr.aria-hidden]=\"!!loadNativeDateInput\"\n        [value]=\"displayValue\"\n        (click)=\"toggleDpDropdown($event, true)\"\n        (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event); updateIMask()\"\n        (blur)=\"onInputBlur($event)\"\n        [disabled]=\"disabled || readonly\"\n        [autofocus]=\"autofocus\"\n        [required]=\"required\"\n        [readOnly]=\"isReadOnly\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.accesskey]=\"shortcutkey\"\n        [attr.aria-label]=\"hint\"\n        (change)=\"onDisplayDateChange($event)\"\n        (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event);\">\n\n    <span class=\"input-group-btn\">\n        <button type=\"button\"\n            class=\"btn btn-default btn-time\"\n            [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n            [attr.aria-hidden]=\"!!loadNativeDateInput\"\n            [disabled]=\"disabled || readonly\"\n            [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : 'Choose date by pressing enter'\"\n            aria-haspopup=\"true\"\n            aria-expanded=\"false\"\n            (click)=\"toggleDpDropdown($event, false)\">\n            <i aria-hidden=\"true\"\n                class=\"app-icon wm-sl-l sl-calendar\"></i>\n        </button>\n    </span>\n    <div style=\"width: 0;display: inline-block;\">\n    <input class=\"model-holder\"\n        aria-label=\"datepicker dropdownmenu\"\n        aria-controls=\"date\"\n        [tabindex]=\"-1\"\n        [attr.aria-hidden]=\"!!loadNativeDateInput\"\n        [container]=\"containerTarget || '.wm-app'\"\n        [bsConfig]=\"_dateOptions\"\n        [isOpen]=\"isOpen\"\n        #datepicker=\"bsDatepicker\"\n        bsDatepicker\n        [daysDisabled]=\"excludedDaysToDisable\"\n        [datesDisabled]=\"excludedDatesToDisable\"\n        placement=\"bottom right\"\n        [isDisabled]=\"disabled || readonly\"\n        [bsValue]=\"bsDataValue\"\n        (onShown)=\"onDatePickerOpen()\"\n        (onHidden)=\"hideDatepickerDropdown()\"\n        (bsValueChange)=\"onDateChange($event)\">\n</div>\n\n<ng-template [ngIf]=\"loadNativeDateInput\">\n    <wm-datetimepicker\n        dateTimePicker\n        mode=\"DATE\"\n        [config]=\"_dateOptions\"\n        [placement]=\"modal\"\n        [excludedDaysToDisable]=\"excludedDaysToDisable\"\n        [excludedDatesToDisable]=\"excludedDatesToDisable\"\n        [displayFormat]=\"dateInputFormat\"\n        [value]=\"bsDataValue\"\n        (change)=\"onDateChange($event)\">\n    </wm-datetimepicker>\n    <div class=\"mobile-input mobile-datepicker-container\"\n        [tabindex]=\"tabindex || 0\"\n         (click)=\"!(disabled || readonly) && showDatePickerModal(bsDataValue)\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event);\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n         [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : hint || 'Choose Date'\"\n         role=\"button\">\n    </div>\n</ng-template>\n" }]
+        }], () => [{ type: i0__namespace.Injector }, { type: i0__namespace.ChangeDetectorRef }, { type: i1$1__namespace.AppDefaults }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { bsDatePickerDirective: [{
+                type: i0.ViewChild,
+                args: [i3.BsDatepickerDirective]
+            }], imask: [{
+                type: i0.ViewChild,
+                args: ['dateInput', { read: i4.IMaskDirective }]
+            }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(DateComponent, { className: "DateComponent", filePath: "date/date.component.ts", lineNumber: 44 }); })();
+
+    const dateTimeProps = new Map([
+        ['autofocus', base.PROP_BOOLEAN],
+        ['class', base.PROP_STRING],
+        ['dataentrymode', { value: 'default', ...base.PROP_STRING }],
+        ['datavaluesource', base.PROP_ANY],
+        ['datavalue', base.PROP_STRING],
+        ['datepattern', base.PROP_STRING],
+        ['disabled', base.PROP_BOOLEAN],
+        ['excludedays', base.PROP_STRING],
+        ['excludedates', base.PROP_STRING],
+        ['hint', base.PROP_STRING],
+        ['hourstep', { value: 1, ...base.PROP_NUMBER }],
+        ['maxdate', base.PROP_STRING],
+        ['mindate', base.PROP_STRING],
+        ['minutestep', { value: 15, ...base.PROP_NUMBER }],
+        ['name', base.PROP_STRING],
+        ['outputformat', { value: 'timestamp', ...base.PROP_STRING }],
+        ['placeholder', { value: 'Select date time', ...base.PROP_STRING }],
+        ['readonly', base.PROP_BOOLEAN],
+        ['required', base.PROP_BOOLEAN],
+        ['secondsstep', { value: 1, ...base.PROP_NUMBER }],
+        ['shortcutkey', base.PROP_STRING],
+        ['show', { value: true, ...base.PROP_BOOLEAN }],
+        ['showdropdownon', { value: 'default', ...base.PROP_STRING }],
+        ['showbuttonbar', base.PROP_BOOLEAN],
+        ['showcustompicker', { value: false, ...base.PROP_BOOLEAN }],
+        ['showindevice', { displayType: 'inline-block', value: 'all', ...base.PROP_STRING }],
+        ['showweeks', base.PROP_BOOLEAN],
+        ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+        ['timestamp', base.PROP_STRING],
+        ['selectfromothermonth', { value: true, ...base.PROP_BOOLEAN }],
+        ['todaybutton', { value: true, ...base.PROP_BOOLEAN }],
+        ['clearbutton', { value: true, ...base.PROP_BOOLEAN }],
+        ['adaptiveposition', { value: true, ...base.PROP_BOOLEAN }],
+        ['todaybuttonlabel', { value: 'LABEL_TODAY_DATE', ...base.PROP_STRING }],
+        ['clearbuttonlabel', { value: 'LABEL_CLEAR_DATE', ...base.PROP_STRING }]
+    ]);
+    const registerProps$1 = () => {
+        base.register('wm-datetime', dateTimeProps);
+        base.registerFormWidget(i1$1.FormWidgetType.DATETIME, new Map(dateTimeProps));
+        base.registerFormWidget(i1$1.FormWidgetType.TIMESTAMP, new Map(dateTimeProps));
+    };
+
+    const _c0$1 = ["wmDateTime", ""];
+    const _c1$1 = () => ({ standalone: true });
+    function DatetimeComponent_div_10_Template(rf, ctx) { if (rf & 1) {
+        const _r2 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "div", 12);
+        i0__namespace.ɵɵlistener("click", function DatetimeComponent_div_10_Template_div_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.preventTpClose($event)); });
+        i0__namespace.ɵɵelementStart(1, "timepicker", 13);
+        i0__namespace.ɵɵtwoWayListener("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); i0__namespace.ɵɵtwoWayBindingSet(ctx_r2.bsTimeValue, $event) || (ctx_r2.bsTimeValue = $event); return i0__namespace.ɵɵresetView($event); });
+        i0__namespace.ɵɵlistener("isValid", function DatetimeComponent_div_10_Template_timepicker_isValid_1_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.isValid($event)); })("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.onModelUpdate($event, "time")); });
+        i0__namespace.ɵɵelementEnd()();
+    } if (rf & 2) {
+        const ctx_r2 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("showMeridian", ctx_r2.ismeridian)("readonlyInput", ctx_r2.disabled || ctx_r2.readonly || ctx_r2.isCurrentDate);
+        i0__namespace.ɵɵtwoWayProperty("ngModel", ctx_r2.bsTimeValue);
+        i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵpureFunction0(12, _c1$1))("min", ctx_r2.minTime)("max", ctx_r2.maxTime)("hourStep", ctx_r2.hourstep)("minuteStep", ctx_r2.minutestep)("secondsStep", ctx_r2.secondsstep)("mousewheel", true)("arrowkeys", true)("showSeconds", ctx_r2.showseconds);
+    } }
+    function DatetimeComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
+        const _r4 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "wm-datetimepicker", 14);
+        i0__namespace.ɵɵlistener("change", function DatetimeComponent_ng_template_11_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.onModelUpdate($event, "date")); });
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵelementStart(1, "div", 15);
+        i0__namespace.ɵɵlistener("click", function DatetimeComponent_ng_template_11_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r4); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(!(ctx_r2.disabled || ctx_r2.readonly) && ctx_r2.showDatePickerModal(ctx_r2.bsDateValue)); })("focus", function DatetimeComponent_ng_template_11_Template_div_focus_1_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r2 = i0__namespace.ɵɵnextContext(); ctx_r2.onDateTimeInputFocus(true); return i0__namespace.ɵɵresetView(ctx_r2.invokeOnFocus($event)); })("blur", function DatetimeComponent_ng_template_11_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r2 = i0__namespace.ɵɵnextContext(); ctx_r2.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r2.invokeOnTouched($event)); });
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const ctx_r2 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("config", ctx_r2._dateOptions)("placement", ctx_r2.modal)("excludedDaysToDisable", ctx_r2.excludedDaysToDisable)("excludedDatesToDisable", ctx_r2.excludedDatesToDisable)("displayFormat", ctx_r2.dateInputFormat)("value", ctx_r2.bsDateValue);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("tabindex", ctx_r2.tabindex || 0);
+        i0__namespace.ɵɵattribute("aria-label", ctx_r2.displayValue ? "Change Date " + ctx_r2.displayValue : ctx_r2.hint || "Choose Date");
+    } }
+    const DEFAULT_CLS$1 = 'app-datetime input-group';
+    const WIDGET_CONFIG$1 = { widgetType: 'wm-datetime', hostClass: DEFAULT_CLS$1 };
+    const CURRENT_DATE = 'CURRENT_DATE';
+    class DatetimeComponent extends BaseDateTimeComponent {
+        static { this.initializeProps = registerProps$1(); }
+        get timestamp() {
+            return this.proxyModel ? this.proxyModel.valueOf() : undefined;
+        }
+        get dateInputFormat() {
+            return this._dateOptions.dateInputFormat || 'yyyy-MM-ddTHH:mm:ss';
+        }
+        /**
+         * The displayValue is the display value of the bsDateTimeValue after applying the datePattern on it.
+         * @returns {any|string}
+         */
+        get displayValue() {
+            return i1$1.getFormattedDate(this.datePipe, this.proxyModel, this.dateInputFormat, this.timeZone, this.key, this.isCurrentDate, this) || '';
+        }
+        get nativeDisplayValue() {
+            return i1$1.getFormattedDate(this.datePipe, this.proxyModel, 'yyyy-MM-ddTHH:mm:ss', this.timeZone, this.key, this.isCurrentDate, this) || '';
+        }
+        // @ts-ignore
+        get datavalue() {
+            if (this.isCurrentDate && !this.proxyModel) {
+                return CURRENT_DATE;
+            }
+            return i1$1.getFormattedDate(this.datePipe, this.proxyModel, this.outputformat, this.timeZone, null, null, this);
+        }
+        /**Todo[Shubham]: needs to be redefined
+         * This property sets the default value for the date selection
+         */
+        // @ts-ignore
+        set datavalue(newVal) {
+            if (newVal === CURRENT_DATE) {
+                this.isCurrentDate = true;
+                this.setTimeInterval();
+            }
+            else {
+                this.proxyModel = newVal ? i1$1.getDateObj(newVal, { isNativePicker: this.loadNativeDateInput }, this.timeZone) : undefined;
+                this.clearTimeInterval();
+                this.isCurrentDate = false;
+            }
+            this.bsTimeValue = this.bsDateValue = this.proxyModel;
+            this.cdRef.detectChanges();
+        }
+        constructor(inj, ngZone, cdRef, appDefaults, app, explicitContext) {
+            super(inj, WIDGET_CONFIG$1, explicitContext);
+            this.ngZone = ngZone;
+            this.cdRef = cdRef;
+            this.appDefaults = appDefaults;
+            this.isEnterPressedOnDateInput = false;
+            /**
+             * This property checks if the timePicker is Open
+             */
+            this.isTimeOpen = false;
+            /**
+             * This property checks if the datePicker is Open
+             */
+            this.isDateOpen = false;
+            /**
+             * This property is set to TRUE if the time component value is set to CURRENT_TIME; In this case the timer keeps changing the time value until the widget is available.
+             */
+            this.isCurrentDate = false;
+            this._debouncedOnChange = lodashEs.debounce(this.invokeOnChange, 10);
+            this.registerDestroyListener(() => this.clearTimeInterval());
+            base.styler(this.nativeElement, this);
+            this.app = app;
+            this.dateContainerCls = `app-date-${this.widgetId}`;
+            this._dateOptions.containerClass = `app-date ${this.dateContainerCls}`;
+            this._dateOptions.showWeekNumbers = false;
+            this.datepattern = this.appDefaults.dateTimeFormat || i1$1.getDisplayDateTimeFormat(i1$1.FormWidgetType.DATETIME);
+            this.updateFormat('datepattern');
+        }
+        /**
+         * This is an internal method used to maintain a time interval to update the time model when the data value is set to CURRENT_TIME
+         */
+        setTimeInterval() {
+            if (this.timeinterval) {
+                return;
+            }
+            this.timeinterval = setInterval(() => {
+                const currentTime = this.timeZone ? i1$1.getMomentLocaleObject(this.timeZone) : new Date();
+                this.onModelUpdate(currentTime);
+            }, 1000);
+        }
+        /**
+         * This is an internal method used to clear the time interval created
+         */
+        clearTimeInterval() {
+            if (this.timeinterval) {
+                clearInterval(this.timeinterval);
+                this.timeinterval = null;
+            }
+        }
+        /**
+         * This is an internal method to toggle the time picker
+         */
+        toggleTimePicker(newVal, $event) {
+            if (this.loadNativeDateInput) {
+                this.onDateTimeInputFocus();
+                return;
+            }
+            this.isTimeOpen = newVal;
+            if ($event && $event.type === 'click') {
+                this.invokeEventCallback('click', { $event: $event });
+            }
+            this.addTimepickerClickListener(this.isTimeOpen);
+        }
+        addTimepickerClickListener(skipListener) {
+            if (!skipListener) {
+                return;
+            }
+            const bodyElement = document.querySelector('body');
+            setTimeout(() => {
+                const dropdownElement = $(bodyElement).find('>bs-dropdown-container .dropdown-menu').get(0);
+                this.deregisterTimepickeEventListener = i1$1.addEventListenerOnElement(bodyElement, dropdownElement, this.nativeElement, 'click', this.isDropDownDisplayEnabledOnInput(this.showdropdownon), () => {
+                    this.toggleTimePicker(false);
+                }, 0 /* EVENT_LIFE.ONCE */, true);
+            }, 350);
+        }
+        /**
+         * This function sets the value isOpen/isTimeOpen (i.e when datepicker popup is closed) based on widget type(i.e  DateTime, Time)
+         * @param val - isOpen/isTimeOpen is set based on the timepicker popup is open/closed
+         */
+        setIsTimeOpen(val) {
+            this.isTimeOpen = val;
+        }
+        hideTimepickerDropdown() {
+            this.invokeOnTouched();
+            this.toggleTimePicker(false);
+            if (this.deregisterTimepickeEventListener) {
+                this.deregisterTimepickeEventListener();
+            }
+            const parentEl = $(this.nativeElement).closest('.app-composite-widget.caption-floating');
+            if (parentEl.length > 0) {
+                this.app.notify('captionPositionAnimate', { displayVal: this.displayValue, nativeEl: parentEl });
+            }
+        }
+        /**
+         * This is an internal method to add a click listener once the time dropdown is open
+         */
+        onTimepickerOpen() {
+            // adding class for time widget dropdown menu
+            const tpElements = document.querySelectorAll('timepicker');
+            lodashEs.forEach(tpElements, (element) => {
+                i1$1.addClass(element.parentElement, 'app-datetime', true);
+            });
+            this.bsDatePickerDirective.hide();
+            this.focusTimePickerPopover(this);
+            this.bindTimePickerKeyboardEvents();
+            i1$1.adjustContainerPosition($('bs-dropdown-container'), this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
+            i1$1.adjustContainerRightEdges($('bs-dropdown-container'), this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
+        }
+        onDatePickerOpen() {
+            this.isDateOpen = !this.isDateOpen;
+            this.toggleTimePicker(false);
+            // We are using the two input tags(To maintain the modal and proxy modal) for the date control.
+            // So actual bootstrap input target width we made it to 0 so bootstrap calculating the calendar container top position impropery.
+            // To fix the container top position set the width 1px;
+            this.$element.find('.model-holder').width('1px');
+            const dpContainerEl = $('bs-datepicker-container');
+            dpContainerEl.attr('aria-label', 'Use Arrow keys to navigate dates, Choose Date from datepicker');
+            $('.bs-calendar-container').removeAttr('role');
+            const datePickerContainer = $('.bs-datepicker-container')[0];
+            this.focusTrap = base.setFocusTrap(datePickerContainer, true);
+            this.focusTrap.activate();
+            this.bsDateValue ? this.activeDate = this.bsDateValue : this.activeDate = new Date();
+            if (!this.bsDateValue) {
+                this.hightlightToday(this.activeDate);
+            }
+            this.addDatepickerKeyboardEvents(this, true);
+            i1$1.adjustContainerPosition($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
+        }
+        /**
+         * This is an internal method to update the model
+         */
+        onModelUpdate(newVal, type) {
+            if (type === 'date') {
+                this.invalidDateTimeFormat = false;
+                if (i1$1.getFormattedDate(this.datePipe, newVal, this.dateInputFormat, this.timeZone, this.key, this.isCurrentDate, this) === this.displayValue) {
+                    $(this.nativeElement).find('.display-input').val(this.displayValue);
+                }
+            }
+            // min date and max date validation in web.
+            // if invalid dates are entered, device is showing validation message.
+            this.minDateMaxDateValidationOnInput(newVal);
+            if (!newVal) {
+                // Set timevalue as 00:00:00 if we remove any one from hours/minutes/seconds field in timepicker after selecting date
+                if (this.bsDateValue && this.bsTimePicker && (this.bsTimePicker.hours === '' || this.bsTimePicker.minutes === '' || this.bsTimePicker.seconds === '')) {
+                    this.bsDateValue = this.bsTimeValue = this.proxyModel = moment(this.bsDateValue).startOf('day').toDate();
+                }
+                else {
+                    this.bsDateValue = this.bsTimeValue = this.proxyModel = undefined;
+                }
+                // When the datavalue is manually cleared, both newval and datavalue are undefined but prevDataValue exists - trigger change cb
+                if (newVal !== this.datavalue || (!this.datavalue && this.prevDatavalue)) {
+                    this._debouncedOnChange(this.datavalue, {}, true);
+                }
+                return;
+            }
+            if (type === 'date') {
+                if (this.isDateOpen) {
+                    this.toggleTimePicker(true);
+                }
+            }
+            this.proxyModel = newVal;
+            if (this.proxyModel) {
+                this.bsDateValue = this.bsTimeValue = newVal;
+            }
+            this._debouncedOnChange(this.datavalue, {}, true);
+            this.cdRef.detectChanges();
+            // Update timepicker with formatted time, when timezone is provided.
+            const timePickerFields = $('.bs-timepicker-field');
+            if (this.timeZone && this.key === 'datetimestamp' && timePickerFields.length) {
+                const formattedDate = i1$1.getFormattedDate(this.datePipe, newVal, this.getTimePattern(), this.timeZone, this.key, null, this);
+                this.updateTimepickerFields(formattedDate, timePickerFields);
+            }
+        }
+        // deduces the timepattern from datepattern set in the studio
+        getTimePattern() {
+            let timepattern;
+            const timePatternStartIndex = this.datepattern.toLowerCase().indexOf('h');
+            let timePatternEndIndex = this.datepattern.toLowerCase().indexOf(':ss');
+            if (timePatternEndIndex > -1) {
+                // adding the index to +3 to incluse :ss
+                timePatternEndIndex += 3;
+            }
+            else {
+                timePatternEndIndex = this.datepattern.toLowerCase().indexOf(':mm');
+                // adding the index to +3 to incluse :mm
+                if (timePatternEndIndex > -1) {
+                    timePatternEndIndex += 3;
+                }
+            }
+            const hasMeridian = this.datepattern.toLowerCase().indexOf('a');
+            timepattern = this.datepattern.substr(timePatternStartIndex, timePatternEndIndex);
+            if (hasMeridian > -1)
+                timepattern += ' a';
+            return timepattern;
+        }
+        updateTimepickerFields(date, timePickerFields) {
+            const meridianField = $('timepicker button.text-center');
+            const formattedArr = date.split(' ');
+            const formattedTime = formattedArr[0].split(':');
+            for (let i = 0; i < timePickerFields.length; i++) {
+                timePickerFields[i].value = formattedTime[i];
+            }
+            if (meridianField?.html()?.trim() !== formattedArr[1]) {
+                meridianField.text(formattedArr[1]);
+            }
+        }
+        /**
+         * This is an internal method used to Prevent time picker close while changing time value
+         */
+        preventTpClose($event) {
+            $event.stopImmediatePropagation();
+        }
+        /**
+         * This is an internal method used to toggle the dropdown of the date widget
+         */
+        toggleDpDropdown($event, skipFocus = false) {
+            if (this.loadNativeDateInput) {
+                //Fixes click event getting triggred twice in Mobile devices.
+                if (!skipFocus) {
+                    this.onDateTimeInputFocus();
+                }
+                return;
+            }
+            if ($event.type === 'click') {
+                this.invokeEventCallback('click', { $event: $event });
+                //this.focusOnInputEl();
+            }
+            if ($event.target && $($event.target).is('input') && !(this.isDropDownDisplayEnabledOnInput(this.showdropdownon))) {
+                $event.stopPropagation();
+                return;
+            }
+            this.bsDatePickerDirective.toggle();
+            this.addBodyClickListener(this.bsDatePickerDirective.isOpen);
+        }
+        addBodyClickListener(skipListener) {
+            if (!skipListener) {
+                return;
+            }
+            const bodyElement = document.querySelector('body');
+            setTimeout(() => {
+                const bsDateContainerElement = bodyElement.querySelector(`.${this.dateContainerCls}`);
+                this.deregisterDatepickerEventListener = i1$1.addEventListenerOnElement(bodyElement, bsDateContainerElement, this.nativeElement, 'click', this.isDropDownDisplayEnabledOnInput(this.showdropdownon), () => {
+                    this.bsDatePickerDirective.hide();
+                }, 0 /* EVENT_LIFE.ONCE */, true);
+            }, 350);
+        }
+        hideDatepickerDropdown() {
+            this.isDateOpen = false;
+            this.focusTrap?.deactivate();
+            this.invokeOnTouched();
+            this.bsDatePickerDirective.hide();
+            // To open the timepicker menu when user wants to update time without changing the date.
+            if (this.bsDateValue) {
+                this.toggleTimePicker(true);
+            }
+            this.isEnterPressedOnDateInput = false;
+            if (this.deregisterDatepickerEventListener) {
+                this.deregisterDatepickerEventListener();
+            }
+            const parentEl = $(this.nativeElement).closest('.app-composite-widget.caption-floating');
+            if (parentEl.length > 0) {
+                this.app.notify('captionPositionAnimate', { displayVal: this.displayValue, nativeEl: parentEl });
+            }
+            this.blurDateInput(this.isDateOpen);
+        }
+        onDateChange($event, isNativePicker) {
+            if (this.isEnterPressedOnDateInput) {
+                this.isEnterPressedOnDateInput = false;
+                return;
+            }
+            let newVal = $event.target.value.trim();
+            newVal = newVal ? i1$1.getNativeDateObject(newVal, { pattern: this.loadNativeDateInput ? this.outputformat : this.datepattern, meridians: this.meridians, isNativePicker: this.loadNativeDateInput }) : undefined;
+            // datetime pattern validation
+            // if invalid pattern is entered, device is showing an error.
+            if (!this.formatValidation(newVal, $event.target.value, isNativePicker)) {
+                return;
+            }
+            // min date and max date validation in mobile view.
+            // if invalid dates are entered, device is showing an alert.
+            if (isNativePicker && this.minDateMaxDateValidationOnInput(newVal, $event, this.displayValue, isNativePicker)) {
+                return;
+            }
+            this.invalidDateTimeFormat = false;
+            this.onModelUpdate(newVal);
+        }
+        /**
+         * This is an internal method triggered when pressing key on the datetime input
+         */
+        onDisplayKeydown(event) {
+            if (this.isDropDownDisplayEnabledOnInput(this.showdropdownon)) {
+                event.stopPropagation();
+                let newVal = event.target.value.trim();
+                if (event.key === 'Enter' || event.key === 'ArrowDown') {
+                    newVal = newVal ? i1$1.getNativeDateObject(newVal, { pattern: this.loadNativeDateInput ? this.outputformat : this.datepattern, meridians: this.meridians }) : undefined;
+                    event.preventDefault();
+                    const formattedDate = i1$1.getFormattedDate(this.datePipe, newVal, this.dateInputFormat, this.timeZone, this.key, this.isCurrentDate, this);
+                    const inputVal = event.target.value.trim();
+                    if (inputVal && this.datepattern === 'timestamp') {
+                        if (!lodashEs.isNaN(inputVal) && lodashEs.parseInt(inputVal) !== formattedDate) {
+                            this.invalidDateTimeFormat = true;
+                            this.invokeOnChange(this.datavalue, event, false);
+                        }
+                    }
+                    else if (inputVal && inputVal !== formattedDate) {
+                        this.invalidDateTimeFormat = true;
+                        this.invokeOnChange(this.datavalue, event, false);
+                    }
+                    else {
+                        this.invalidDateTimeFormat = false;
+                        this.isEnterPressedOnDateInput = true;
+                        this.bsDatePickerDirective.bsValue = newVal;
+                    }
+                    this.toggleDpDropdown(event);
+                }
+                else {
+                    this.hideDatepickerDropdown();
+                    this.hideTimepickerDropdown();
+                }
+            }
+            else {
+                this.hideDatepickerDropdown();
+                this.hideTimepickerDropdown();
+            }
+        }
+        isValid(event) {
+            if (!event) {
+                const enteredDate = $(this.nativeElement).find('input').val();
+                const newVal = i1$1.getNativeDateObject(enteredDate, { pattern: this.loadNativeDateInput ? this.outputformat : this.datepattern, meridians: this.meridians, isNativePicker: this.loadNativeDateInput });
+                if (!this.formatValidation(newVal, enteredDate)) {
+                    return;
+                }
+            }
+        }
+        // change and blur events are added from the template
+        handleEvent(node, eventName, callback, locals) {
+            if (!lodashEs.includes(['blur', 'focus', 'change', 'click'], eventName)) {
+                super.handleEvent(node, eventName, callback, locals);
+            }
+        }
+        onInputBlur($event) {
+            if (!$($event.relatedTarget).hasClass('current-date')) {
+                this.invokeOnTouched();
+                this.invokeEventCallback('blur', { $event });
+            }
+        }
+        static { this.ɵfac = function DatetimeComponent_Factory(t) { return new (t || DatetimeComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.NgZone), i0__namespace.ɵɵdirectiveInject(i0__namespace.ChangeDetectorRef), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.AppDefaults), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.App), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
+        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: DatetimeComponent, selectors: [["", "wmDateTime", ""]], viewQuery: function DatetimeComponent_Query(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵviewQuery(i3.BsDatepickerDirective, 5);
+            } if (rf & 2) {
+                let _t;
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.bsDatePickerDirective = _t.first);
+            } }, features: [i0__namespace.ɵɵProvidersFeature([
+                    base.provideAs(DatetimeComponent, i5.NG_VALUE_ACCESSOR, true),
+                    base.provideAs(DatetimeComponent, i5.NG_VALIDATORS, true),
+                    base.provideAsWidgetRef(DatetimeComponent),
+                    { provide: i6.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
+                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$1, decls: 12, vars: 30, consts: [["datepicker", "bsDatepicker"], ["dropdown", "", "autoClose", "false", 2, "display", "inherit", 3, "onShown", "isOpen", "container"], ["focus-target", "", "type", "text", 1, "form-control", "app-textbox", "display-input", 3, "click", "focus", "blur", "change", "keydown", "name", "tabindex", "value", "autofocus", "disabled", "required", "readOnly"], [1, "input-group-btn"], ["type", "button", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-date", 3, "click", "tabindex", "disabled"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-calendar"], ["type", "button", "aria-label", "Select time", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-time", 3, "click", "tabindex", "disabled"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-time"], [2, "width", "0", "display", "inline-block"], ["aria-label", "datepicker dropdownmenu", "aria-controls", "date", "focus-target", "", "placement", "bottom right", "bsDatepicker", "", 1, "model-holder", 3, "onShown", "onHidden", "bsValueChange", "tabindex", "container", "bsConfig", "isOpen", "daysDisabled", "datesDisabled", "isDisabled", "bsValue"], ["class", "dropdown-menu", "aria-label", "timepicker dropdown", "aria-controls", "time", 3, "click", 4, "dropdownMenu"], [3, "ngIf"], ["aria-label", "timepicker dropdown", "aria-controls", "time", 1, "dropdown-menu", 3, "click"], [1, "model-holder", 3, "ngModelChange", "isValid", "showMeridian", "readonlyInput", "ngModel", "ngModelOptions", "min", "max", "hourStep", "minuteStep", "secondsStep", "mousewheel", "arrowkeys", "showSeconds"], ["dateTimePicker", "", 3, "change", "config", "placement", "excludedDaysToDisable", "excludedDatesToDisable", "displayFormat", "value"], ["role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "click", "focus", "blur", "tabindex"]], template: function DatetimeComponent_Template(rf, ctx) { if (rf & 1) {
+                const _r1 = i0__namespace.ɵɵgetCurrentView();
+                i0__namespace.ɵɵelementStart(0, "div", 1);
+                i0__namespace.ɵɵlistener("onShown", function DatetimeComponent_Template_div_onShown_0_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onTimepickerOpen()); });
+                i0__namespace.ɵɵelementStart(1, "input", 2);
+                i0__namespace.ɵɵlistener("click", function DatetimeComponent_Template_input_click_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.toggleDpDropdown($event, true)); })("focus", function DatetimeComponent_Template_input_focus_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.onDateTimeInputFocus(); return i0__namespace.ɵɵresetView(ctx.invokeOnFocus($event)); })("blur", function DatetimeComponent_Template_input_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onInputBlur($event)); })("change", function DatetimeComponent_Template_input_change_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onDateChange($event)); })("keydown", function DatetimeComponent_Template_input_keydown_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx._triggeredByUser = true; return i0__namespace.ɵɵresetView(ctx.onDisplayKeydown($event)); });
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementStart(2, "span", 3)(3, "button", 4);
+                i0__namespace.ɵɵlistener("click", function DatetimeComponent_Template_button_click_3_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.toggleDpDropdown($event, false)); });
+                i0__namespace.ɵɵelement(4, "i", 5);
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementStart(5, "button", 6);
+                i0__namespace.ɵɵlistener("click", function DatetimeComponent_Template_button_click_5_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.toggleTimePicker(!ctx.isTimeOpen, $event)); });
+                i0__namespace.ɵɵelement(6, "i", 7);
+                i0__namespace.ɵɵelementEnd()();
+                i0__namespace.ɵɵelementStart(7, "div", 8)(8, "input", 9, 0);
+                i0__namespace.ɵɵlistener("onShown", function DatetimeComponent_Template_input_onShown_8_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onDatePickerOpen()); })("onHidden", function DatetimeComponent_Template_input_onHidden_8_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.hideDatepickerDropdown()); })("bsValueChange", function DatetimeComponent_Template_input_bsValueChange_8_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onModelUpdate($event, "date")); });
+                i0__namespace.ɵɵelementEnd()();
+                i0__namespace.ɵɵtemplate(10, DatetimeComponent_div_10_Template, 2, 13, "div", 10);
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵtemplate(11, DatetimeComponent_ng_template_11_Template, 2, 8, "ng-template", 11);
+            } if (rf & 2) {
+                i0__namespace.ɵɵproperty("isOpen", ctx.isTimeOpen)("container", "body");
+                i0__namespace.ɵɵadvance();
+                i0__namespace.ɵɵproperty("name", ctx.name)("tabindex", ctx.loadNativeDateInput ? "-1" : ctx.tabindex)("value", ctx.displayValue)("autofocus", ctx.autofocus)("disabled", ctx.disabled || ctx.readonly || ctx.isCurrentDate)("required", ctx.required)("readOnly", ctx.isReadOnly);
+                i0__namespace.ɵɵattribute("aria-label", ctx.hint)("aria-hidden", !!ctx.loadNativeDateInput)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
+                i0__namespace.ɵɵadvance(2);
+                i0__namespace.ɵɵproperty("tabindex", ctx.loadNativeDateInput ? "-1" : ctx.tabindex)("disabled", ctx.disabled || ctx.readonly || ctx.isCurrentDate);
+                i0__namespace.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput)("aria-label", ctx.displayValue ? "Change Date " + ctx.displayValue : "Choose date by pressing enter");
+                i0__namespace.ɵɵadvance(2);
+                i0__namespace.ɵɵproperty("tabindex", ctx.loadNativeDateInput ? "-1" : ctx.tabindex)("disabled", ctx.disabled || ctx.readonly || ctx.isCurrentDate);
+                i0__namespace.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput);
+                i0__namespace.ɵɵadvance(3);
+                i0__namespace.ɵɵproperty("tabindex", -1)("container", ctx.containerTarget || ".wm-app")("bsConfig", ctx._dateOptions)("isOpen", ctx.isDateOpen)("daysDisabled", ctx.excludedDaysToDisable)("datesDisabled", ctx.excludedDatesToDisable)("isDisabled", ctx.disabled || ctx.readonly || ctx.isCurrentDate)("bsValue", ctx.bsDateValue);
+                i0__namespace.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput);
+                i0__namespace.ɵɵadvance(3);
+                i0__namespace.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
+            } }, dependencies: [i2__namespace.NgIf, i3__namespace.BsDatepickerDirective, i3__namespace.BsDatepickerInputDirective, i4$1__namespace.BsDropdownMenuDirective, i4$1__namespace.BsDropdownDirective, i5__namespace.NgControlStatus, i5__namespace.NgModel, i6__namespace.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DatetimeComponent, [{
+            type: i0.Component,
+            args: [{ selector: '[wmDateTime]', providers: [
+                        base.provideAs(DatetimeComponent, i5.NG_VALUE_ACCESSOR, true),
+                        base.provideAs(DatetimeComponent, i5.NG_VALIDATORS, true),
+                        base.provideAsWidgetRef(DatetimeComponent),
+                        { provide: i6.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
+                    ], template: "    <div dropdown\n        [isOpen]=\"isTimeOpen\"\n        autoClose=\"false\"\n        [container]=\"'body'\"\n        (onShown)=\"onTimepickerOpen()\"\n        style=\"display: inherit;\">\n        <input class=\"form-control app-textbox display-input\"\n            [attr.aria-label]=\"hint\"\n            focus-target\n            [name]=\"name\"\n            [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n            [attr.aria-hidden]=\"!!loadNativeDateInput\"\n            type=\"text\"\n            [value]=\"displayValue\"\n            (click)=\"toggleDpDropdown($event, true)\"\n            (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n            (blur)=\"onInputBlur($event)\"\n            (change)=\"onDateChange($event)\"\n            [autofocus]=\"autofocus\"\n            [disabled]=\"disabled || readonly || isCurrentDate\"\n            [required]=\"required\"\n            [readOnly]=\"isReadOnly\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.accesskey]=\"shortcutkey\"\n            (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event)\">\n\n        <span class=\"input-group-btn\">\n            <button type=\"button\"\n                class=\"btn btn-default btn-date\"\n                [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n                [attr.aria-hidden]=\"!!loadNativeDateInput\"\n                [disabled]=\"disabled || readonly || isCurrentDate\"\n                [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : 'Choose date by pressing enter'\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"false\"\n                (click)=\"toggleDpDropdown($event, false)\">\n                <i aria-hidden=\"true\"\n                    class=\"app-icon wm-sl-l sl-calendar\"></i>\n            </button>\n            <button type=\"button\"\n                class=\"btn btn-default btn-time\"\n                [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n                [attr.aria-hidden]=\"!!loadNativeDateInput\"\n                [disabled]=\"disabled || readonly || isCurrentDate\"\n                aria-label=\"Select time\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"false\"\n                (click)=\"toggleTimePicker(!isTimeOpen, $event)\">\n                <i aria-hidden=\"true\"\n                    class=\"app-icon wm-sl-l sl-time\"></i>\n            </button>\n        </span>\n        <div style=\"width: 0;display: inline-block;\">\n        <input class=\"model-holder\"\n            aria-label=\"datepicker dropdownmenu\"\n            aria-controls=\"date\"\n            focus-target\n            [tabindex]=\"-1\"\n            [attr.aria-hidden]=\"!!loadNativeDateInput\"\n            [container]=\"containerTarget || '.wm-app'\"\n            [bsConfig]=\"_dateOptions\"\n            [isOpen]=\"isDateOpen\"\n             placement=\"bottom right\"\n            (onShown)=\"onDatePickerOpen()\"\n            (onHidden)=\"hideDatepickerDropdown()\"\n            [daysDisabled]=\"excludedDaysToDisable\"\n            [datesDisabled]=\"excludedDatesToDisable\"\n            #datepicker=bsDatepicker\n            bsDatepicker\n            [isDisabled]=\"disabled || readonly || isCurrentDate\"\n            [bsValue]=\"bsDateValue\"\n            (bsValueChange)=\"onModelUpdate($event, 'date')\">\n    </div>\n        <div *dropdownMenu\n            class=\"dropdown-menu\"\n            aria-label=\"timepicker dropdown\"\n            aria-controls=\"time\"\n            (click)=\"preventTpClose($event)\">\n            <timepicker class=\"model-holder\"\n                [showMeridian]=\"ismeridian\"\n                [readonlyInput]=\"disabled || readonly || isCurrentDate\"\n                [(ngModel)]=\"bsTimeValue\"\n                        [ngModelOptions]=\"{standalone: true}\"\n                [min]=\"minTime\"\n                [max]=\"maxTime\"\n                [hourStep]=\"hourstep\"\n                [minuteStep]=\"minutestep\"\n                [secondsStep]=\"secondsstep\"\n                [mousewheel]=\"true\"\n                [arrowkeys]=\"true\"\n                (isValid)=\"isValid($event)\"\n                [showSeconds]=\"showseconds\"\n                (ngModelChange)=\"onModelUpdate($event, 'time')\"></timepicker>\n        </div>\n    </div>\n<ng-template [ngIf]=\"loadNativeDateInput\">\n    <wm-datetimepicker\n        dateTimePicker\n        [config]=\"_dateOptions\"\n        [placement]=\"modal\"\n        [excludedDaysToDisable]=\"excludedDaysToDisable\"\n        [excludedDatesToDisable]=\"excludedDatesToDisable\"\n        [displayFormat]=\"dateInputFormat\"\n        [value]=\"bsDateValue\"\n        (change)=\"onModelUpdate($event, 'date')\">\n    </wm-datetimepicker>\n    <div class=\"mobile-input mobile-datepicker-container\"\n        [tabindex]=\"tabindex || 0\"\n         (click)=\"!(disabled || readonly) && showDatePickerModal(bsDateValue)\"\n         [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : hint || 'Choose Date'\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event)\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n         role=\"button\">\n    </div>\n</ng-template>\n" }]
+        }], () => [{ type: i0__namespace.Injector }, { type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }, { type: i1$1__namespace.AppDefaults }, { type: i1$1__namespace.App }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { bsDatePickerDirective: [{
+                type: i0.ViewChild,
+                args: [i3.BsDatepickerDirective]
+            }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(DatetimeComponent, { className: "DatetimeComponent", filePath: "date-time/date-time.component.ts", lineNumber: 56 }); })();
+
+    const timeProps = new Map([
+        ['autofocus', base.PROP_BOOLEAN],
+        ['class', base.PROP_STRING],
+        ['dataentrymode', { value: 'default', ...base.PROP_STRING }],
+        ['datavaluesource', base.PROP_ANY],
+        ['datavalue', base.PROP_STRING],
+        ['disabled', base.PROP_BOOLEAN],
+        ['hint', base.PROP_STRING],
+        ['hourstep', { value: 1, ...base.PROP_NUMBER }],
+        ['maxtime', base.PROP_STRING],
+        ['mintime', base.PROP_STRING],
+        ['minutestep', { value: 15, ...base.PROP_NUMBER }],
+        ['name', base.PROP_STRING],
+        ['outputformat', { value: 'HH:mm:ss', ...base.PROP_STRING }],
+        ['placeholder', { value: 'Select time', ...base.PROP_STRING }],
+        ['readonly', base.PROP_BOOLEAN],
+        ['required', base.PROP_BOOLEAN],
+        ['shortcutkey', base.PROP_STRING],
+        ['show', { value: true, ...base.PROP_BOOLEAN }],
+        ['showdropdownon', { value: 'default', ...base.PROP_STRING }],
+        ['showcustompicker', { value: false, ...base.PROP_BOOLEAN }],
+        ['secondsstep', { value: 1, ...base.PROP_NUMBER }],
+        ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+        ['timepattern', base.PROP_STRING],
+        ['timestamp', base.PROP_STRING]
+    ]);
+    const registerProps = () => {
+        base.register('wm-time', timeProps);
+        base.registerFormWidget(i1$1.FormWidgetType.TIME, new Map(timeProps));
+    };
+
+    const _c0 = ["wmTime", ""];
+    const _c1 = () => ({ standalone: true });
+    function TimeComponent_div_5_Template(rf, ctx) { if (rf & 1) {
+        const _r1 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "div", 7);
+        i0__namespace.ɵɵlistener("click", function TimeComponent_div_5_Template_div_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.preventTpClose($event)); });
+        i0__namespace.ɵɵelementStart(1, "timepicker", 8);
+        i0__namespace.ɵɵtwoWayListener("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); const ctx_r1 = i0__namespace.ɵɵnextContext(); i0__namespace.ɵɵtwoWayBindingSet(ctx_r1.bsTimeValue, $event) || (ctx_r1.bsTimeValue = $event); return i0__namespace.ɵɵresetView($event); });
+        i0__namespace.ɵɵlistener("isValid", function TimeComponent_div_5_Template_timepicker_isValid_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.isValid($event)); })("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.onTimeChange($event)); });
+        i0__namespace.ɵɵelementEnd()();
+    } if (rf & 2) {
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("showMeridian", ctx_r1.ismeridian)("readonlyInput", ctx_r1.isDisabled);
+        i0__namespace.ɵɵtwoWayProperty("ngModel", ctx_r1.bsTimeValue);
+        i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵpureFunction0(13, _c1))("disabled", ctx_r1.disabled || ctx_r1.readonly || ctx_r1.isCurrentTime)("min", ctx_r1.minTime)("max", ctx_r1.maxTime)("hourStep", ctx_r1.hourstep)("minuteStep", ctx_r1.minutestep)("secondsStep", ctx_r1.secondsstep)("mousewheel", true)("arrowkeys", true)("showSeconds", ctx_r1.showseconds);
+    } }
+    function TimeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+        const _r3 = i0__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "wm-datetimepicker", 9);
+        i0__namespace.ɵɵlistener("change", function TimeComponent_ng_template_6_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.onTimeChange($event)); });
+        i0__namespace.ɵɵelementEnd();
+        i0__namespace.ɵɵelementStart(1, "div", 10);
+        i0__namespace.ɵɵlistener("click", function TimeComponent_ng_template_6_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(!(ctx_r1.disabled || ctx_r1.readonly) && ctx_r1.showDatePickerModal(ctx_r1.bsTimeValue)); })("focus", function TimeComponent_ng_template_6_Template_div_focus_1_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(); ctx_r1.onDateTimeInputFocus(true); ctx_r1.invokeOnFocus($event); return i0__namespace.ɵɵresetView(ctx_r1.assignModel()); })("blur", function TimeComponent_ng_template_6_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(); ctx_r1.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r1.invokeOnTouched($event)); });
+        i0__namespace.ɵɵelementEnd();
+    } if (rf & 2) {
+        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("minTime", ctx_r1.minTime)("maxTime", ctx_r1.maxTime)("placement", ctx_r1.modal)("displayFormat", ctx_r1.timepattern)("value", ctx_r1.bsTimeValue);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵattribute("aria-label", ctx_r1.displayValue ? "Change time  " + ctx_r1.displayValue : ctx_r1.hint || "Select time");
+    } }
+    const CURRENT_TIME = 'CURRENT_TIME';
+    const DEFAULT_CLS = 'input-group app-timeinput';
+    const WIDGET_CONFIG = { widgetType: 'wm-time', hostClass: DEFAULT_CLS };
+    class TimeComponent extends BaseDateTimeComponent {
+        static { this.initializeProps = registerProps(); }
+        get timestamp() {
+            return this.bsTimeValue ? this.bsTimeValue.valueOf() : undefined;
+        }
+        // @ts-ignore
+        get datavalue() {
+            if (this.isCurrentTime && !this.bsTimeValue) {
+                return CURRENT_TIME;
+            }
+            return i1$1.getFormattedDate(this.datePipe, this.bsTimeValue, this.outputformat, this.timeZone, null, null, this) || '';
+        }
+        /**Todo[Shubham]: needs to be redefined
+         * This property sets the default value for the time selection
+         */
+        // @ts-ignore
+        set datavalue(newVal) {
+            if (newVal) {
+                if (newVal === CURRENT_TIME) {
+                    this.isCurrentTime = true;
+                    this.setTimeInterval();
+                }
+                else {
+                    this.clearTimeInterval();
+                    this.bsTimeValue = i1$1.getNativeDateObject(newVal, { pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput });
+                    this.isCurrentTime = false;
+                    this.mintimeMaxtimeValidation();
+                }
+            }
+            else {
+                this.bsTimeValue = undefined;
+                this.clearTimeInterval();
+                this.isCurrentTime = false;
+            }
+            this.invokeOnChange(this.datavalue);
+            i1$1.$appDigest();
+        }
+        get displayValue() {
+            return i1$1.getFormattedDate(this.datePipe, this.bsTimeValue, this.timepattern, this.timeZone, null, null, this) || '';
+        }
+        get nativeDisplayValue() {
+            return i1$1.getFormattedDate(this.datePipe, this.bsTimeValue, 'HH:mm:ss', this.timeZone, null, null, this) || '';
+        }
+        constructor(inj, ngZone, appDefaults, app, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            this.ngZone = ngZone;
+            this.appDefaults = appDefaults;
+            /**
+             * This is an internal property used to toggle the timepicker dropdown
+             */
+            this.status = { isopen: false };
+            base.styler(this.nativeElement, this);
+            /**
+             * Destroy the timer once the date widget is gone
+             */
+            this.registerDestroyListener(() => this.clearTimeInterval());
+            this.timepattern = this.appDefaults.timeFormat || i1$1.getDisplayDateTimeFormat(i1$1.FormWidgetType.TIME);
+            this.updateFormat('timepattern');
+            this.app = app;
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'tabindex') {
+                return;
+            }
+            if (key === 'timepattern') {
+                this.updateFormat('timepattern');
+            }
+            if (key === 'mintime') {
+                this.minTime = i1$1.getNativeDateObject(nv, { pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput }); // TODO it is supposed to be time conversion, not to the day
+                this.mintimeMaxtimeValidation();
+            }
+            else if (key === 'maxtime') {
+                this.maxTime = i1$1.getNativeDateObject(nv, { pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput });
+                this.mintimeMaxtimeValidation();
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        setValidateType(min, max, val) {
+            if (this.timeNotInRange) {
+                if (val < min) {
+                    this.validateType = 'mintime';
+                }
+                else if (val > max) {
+                    this.validateType = 'maxtime';
+                }
+            }
+        }
+        /**
+         * This is an internal method used to validate mintime and maxtime
+         */
+        mintimeMaxtimeValidation() {
+            this.timeNotInRange = this.minTime && this.maxTime && (this.bsTimeValue < this.minTime || this.bsTimeValue > this.maxTime);
+            this.setValidateType(this.minTime, this.maxTime, this.bsTimeValue);
+            this.invokeOnChange(this.datavalue, undefined, false);
+        }
+        /**
+         * This is an internal method used to toggle the dropdown of the time widget
+         */
+        toggleDropdown($event, skipFocus = false) {
+            if (this.loadNativeDateInput) {
+                //Fixes click event getting triggred twice in Mobile devices.
+                if (!skipFocus) {
+                    this.onDateTimeInputFocus();
+                }
+                return;
+            }
+            if ($event.type === 'click') {
+                this.invokeEventCallback('click', { $event: $event });
+                //this.focusOnInputEl();
+            }
+            if ($event.target && $($event.target).is('input') && !(this.isDropDownDisplayEnabledOnInput(this.showdropdownon))) {
+                return;
+            }
+            this.ngZone.run(() => {
+                this.status.isopen = !this.status.isopen;
+            });
+            this.addBodyClickListener(this.status.isopen);
+        }
+        /**
+         * This is an internal method used to Prevent time picker close while changing time value
+         */
+        preventTpClose($event) {
+            $event.stopImmediatePropagation();
+            const parentEl = $(this.nativeElement).closest('.app-composite-widget.caption-floating');
+            if (parentEl.length > 0) {
+                this.app.notify('captionPositionAnimate', { displayVal: this.displayValue, nativeEl: parentEl });
+            }
+        }
+        addBodyClickListener(skipListener) {
+            if (!skipListener) {
+                return;
+            }
+            const bodyElement = document.querySelector('body');
+            setTimeout(() => {
+                const dropdownElement = $(bodyElement).find('>bs-dropdown-container .dropdown-menu').get(0);
+                this.deregisterEventListener = i1$1.addEventListenerOnElement(bodyElement, dropdownElement, this.nativeElement, 'click', this.isDropDownDisplayEnabledOnInput(this.showdropdownon), () => {
+                    this.status.isopen = false;
+                }, 0 /* EVENT_LIFE.ONCE */, true);
+            }, 350);
+        }
+        /**
+         * This is an internal method triggered when pressing key on the time input
+         */
+        onDisplayKeydown(event) {
+            if (this.isDropDownDisplayEnabledOnInput(this.showdropdownon)) {
+                event.stopPropagation();
+                if (event.key === 'Enter' || event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    this.toggleDropdown(event);
+                }
+                else {
+                    this.hideTimepickerDropdown();
+                }
+            }
+            else {
+                this.hideTimepickerDropdown();
+            }
+        }
+        /**
+         * This is an internal method triggered when the time input changes
+         */
+        onDisplayTimeChange($event) {
+            const newVal = i1$1.getNativeDateObject($event.target.value, { meridians: this.meridians, pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput });
+            // time pattern validation
+            // if invalid pattern is entered, device is showing an error.
+            if (!this.formatValidation(newVal, $event.target.value)) {
+                return;
+            }
+            this.invalidDateTimeFormat = false;
+            this.onTimeChange(newVal);
+        }
+        onInputBlur($event) {
+            if (!$($event.relatedTarget).hasClass('bs-timepicker-field')) {
+                this.invokeOnTouched();
+                this.invokeEventCallback('blur', { $event });
+            }
+        }
+        /**
+         * This is an internal method used to execute the on time change functionality
+         */
+        onTimeChange(newVal, isNativePicker) {
+            let timeValue, timeInputValue, minTimeMeridian;
+            // For nativePicker, newVal is event, get the dateobject from the event.
+            if (isNativePicker) {
+                newVal = i1$1.getNativeDateObject(newVal.target.value, { pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput });
+            }
+            if (newVal) {
+                this.bsTimeValue = newVal;
+                // if the newVal is valid but not in the given range then highlight the input field
+                this.timeNotInRange = this.minTime && this.maxTime && (newVal < this.minTime || newVal > this.maxTime);
+                this.setValidateType(this.minTime, this.maxTime, newVal);
+            }
+            else {
+                // sometimes library is not returning the correct value when the min and max time are given, displaying the datavalue based on the value given by the user
+                if (this.bsTimePicker && this.bsTimePicker.min && this.bsTimePicker.max) {
+                    minTimeMeridian = moment(new Date(this.bsTimePicker.min)).format('A');
+                    moment(new Date(this.bsTimePicker.max)).format('A');
+                    timeValue = this.bsTimePicker.hours + ':' + (this.bsTimePicker.minutes || 0) + ':' + (this.bsTimePicker.seconds || 0) + (this.bsTimePicker.showMeridian ? (' ' + minTimeMeridian) : '');
+                    timeInputValue = i1$1.getNativeDateObject(timeValue, { pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput });
+                    this.bsTimePicker.meridian = minTimeMeridian;
+                    this.timeNotInRange = (this.bsTimePicker.min > timeInputValue || this.bsTimePicker.max < timeInputValue);
+                    this.setValidateType(this.bsTimePicker.min, this.bsTimePicker.max, timeInputValue);
+                }
+                this.bsTimeValue = timeInputValue;
+            }
+            this.invokeOnTouched();
+            this.invokeOnChange(this.datavalue, {}, true);
+        }
+        /**
+         * This is an internal method used to maintain a time interval to update the time model when the data value is set to CURRENT_TIME
+         */
+        setTimeInterval() {
+            if (this.timeinterval) {
+                return;
+            }
+            this.timeinterval = setInterval(() => {
+                const now = this.timeZone ? i1$1.getMomentLocaleObject(this.timeZone) : new Date();
+                now.setSeconds(now.getSeconds() + 1);
+                this.datavalue = CURRENT_TIME;
+                this.onTimeChange(now);
+            }, 1000);
+        }
+        /**
+         * This is an internal method used to clear the time interval created
+         */
+        clearTimeInterval() {
+            if (this.timeinterval) {
+                clearInterval(this.timeinterval);
+                this.timeinterval = null;
+            }
+        }
+        /**
+         * This function sets the value isOpen/isTimeOpen (i.e when datepicker popup is closed) based on widget type(i.e  DateTime, Time)
+         * @param val - isOpen/isTimeOpen is set based on the timepicker popup is open/closed
+         */
+        setIsTimeOpen(val) {
+            this.status.isopen = val;
+        }
+        // Change event is registered from the template, Prevent the framework from registering one more event
+        handleEvent(node, eventName, eventCallback, locals) {
+            if (!lodashEs.includes(['blur', 'focus', 'change', 'click'], eventName)) {
+                super.handleEvent(node, eventName, eventCallback, locals);
+            }
+        }
+        hideTimepickerDropdown() {
+            this.invokeOnTouched();
+            this.status.isopen = false;
+            if (this.deregisterEventListener) {
+                this.deregisterEventListener();
+            }
+            this.removeKeyupListener();
+            const parentEl = $(this.nativeElement).closest('.app-composite-widget.caption-floating');
+            if (parentEl.length > 0) {
+                this.app.notify('captionPositionAnimate', { displayVal: this.displayValue, nativeEl: parentEl });
+            }
+            this.blurDateInput(true);
+        }
+        isValid(event) {
+            if (!event) {
+                const enteredDate = $(this.nativeElement).find('input').val();
+                const newVal = i1$1.getNativeDateObject(enteredDate, { meridians: this.meridians, pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput });
+                if (!this.formatValidation(newVal, enteredDate)) {
+                    return;
+                }
+            }
+        }
+        /**
+         * This is an internal method to add css class for dropdown while opening the time dropdown
+         */
+        onShown() {
+            const tpElements = document.querySelectorAll('timepicker');
+            lodashEs.forEach(tpElements, element => {
+                i1$1.addClass(element.parentElement, 'app-datetime', true);
+            });
+            this.focusTimePickerPopover(this);
+            this.bindTimePickerKeyboardEvents();
+            i1$1.adjustContainerPosition($('bs-dropdown-container'), this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
+        }
+        assignModel() {
+            if (!this.displayInputElem) {
+                this.displayInputElem = this.getMobileInput();
+            }
+            this.displayInputElem.value = lodashEs.get(this, 'nativeDisplayValue');
+        }
+        static { this.ɵfac = function TimeComponent_Factory(t) { return new (t || TimeComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.NgZone), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.AppDefaults), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.App), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
+        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: TimeComponent, selectors: [["", "wmTime", ""]], features: [i0__namespace.ɵɵProvidersFeature([
+                    base.provideAs(TimeComponent, i5.NG_VALUE_ACCESSOR, true),
+                    base.provideAs(TimeComponent, i5.NG_VALIDATORS, true),
+                    base.provideAsWidgetRef(TimeComponent),
+                    { provide: i6.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
+                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 7, vars: 16, consts: [["dropdown", "", 2, "display", "inherit", 3, "onShown", "onHidden", "isOpen", "container"], ["focus-target", "", "type", "text", "role", "timer", 1, "form-control", "app-textbox", "display-input", 3, "click", "focus", "blur", "change", "keydown", "tabindex", "name", "value", "disabled", "autofocus", "required", "readOnly"], [1, "input-group-btn", "dropdown-toggle"], ["type", "button", "aria-label", "Select time", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-date", 3, "click", "tabindex", "disabled"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-time"], ["class", "dropdown-menu", 3, "click", 4, "dropdownMenu"], [3, "ngIf"], [1, "dropdown-menu", 3, "click"], [1, "model-holder", 3, "ngModelChange", "isValid", "showMeridian", "readonlyInput", "ngModel", "ngModelOptions", "disabled", "min", "max", "hourStep", "minuteStep", "secondsStep", "mousewheel", "arrowkeys", "showSeconds"], ["dateTimePicker", "", "mode", "TIME", 3, "change", "minTime", "maxTime", "placement", "displayFormat", "value"], ["tabindex", "1000000", "role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "click", "focus", "blur"]], template: function TimeComponent_Template(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵelementStart(0, "div", 0);
+                i0__namespace.ɵɵlistener("onShown", function TimeComponent_Template_div_onShown_0_listener() { return ctx.onShown(); })("onHidden", function TimeComponent_Template_div_onHidden_0_listener() { return ctx.hideTimepickerDropdown(); });
+                i0__namespace.ɵɵelementStart(1, "input", 1);
+                i0__namespace.ɵɵlistener("click", function TimeComponent_Template_input_click_1_listener($event) { return ctx.toggleDropdown($event, true); })("focus", function TimeComponent_Template_input_focus_1_listener($event) { ctx.onDateTimeInputFocus(); return ctx.invokeOnFocus($event); })("blur", function TimeComponent_Template_input_blur_1_listener($event) { return ctx.onInputBlur($event); })("change", function TimeComponent_Template_input_change_1_listener($event) { return ctx.onDisplayTimeChange($event); })("keydown", function TimeComponent_Template_input_keydown_1_listener($event) { ctx._triggeredByUser = true; return ctx.onDisplayKeydown($event); });
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementStart(2, "span", 2)(3, "button", 3);
+                i0__namespace.ɵɵlistener("click", function TimeComponent_Template_button_click_3_listener($event) { return ctx.toggleDropdown($event, false); });
+                i0__namespace.ɵɵelement(4, "i", 4);
+                i0__namespace.ɵɵelementEnd()();
+                i0__namespace.ɵɵtemplate(5, TimeComponent_div_5_Template, 2, 14, "div", 5);
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵtemplate(6, TimeComponent_ng_template_6_Template, 2, 6, "ng-template", 6);
+            } if (rf & 2) {
+                i0__namespace.ɵɵproperty("isOpen", ctx.status.isopen)("container", "body");
+                i0__namespace.ɵɵadvance();
+                i0__namespace.ɵɵproperty("tabindex", ctx.tabindex)("name", ctx.name)("value", ctx.displayValue)("disabled", ctx.disabled || ctx.readonly || ctx.isCurrentTime)("autofocus", ctx.autofocus)("required", ctx.required)("readOnly", ctx.isReadOnly);
+                i0__namespace.ɵɵattribute("aria-label", ctx.hint)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-atomic", ctx.isCurrentTime ? "true" : "false");
+                i0__namespace.ɵɵadvance(2);
+                i0__namespace.ɵɵproperty("tabindex", ctx.tabindex)("disabled", ctx.disabled || ctx.readonly || ctx.isCurrentTime);
+                i0__namespace.ɵɵadvance(3);
+                i0__namespace.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
+            } }, dependencies: [i2__namespace.NgIf, i4$1__namespace.BsDropdownMenuDirective, i4$1__namespace.BsDropdownDirective, i5__namespace.NgControlStatus, i5__namespace.NgModel, i6__namespace.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TimeComponent, [{
+            type: i0.Component,
+            args: [{ selector: '[wmTime]', providers: [
+                        base.provideAs(TimeComponent, i5.NG_VALUE_ACCESSOR, true),
+                        base.provideAs(TimeComponent, i5.NG_VALIDATORS, true),
+                        base.provideAsWidgetRef(TimeComponent),
+                        { provide: i6.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
+                    ], template: "    <div dropdown [isOpen]=\"status.isopen\" (onShown)=\"onShown()\" (onHidden)=\"hideTimepickerDropdown()\" [container]=\"'body'\" style=\"display: inherit\">\n        <input class=\"form-control app-textbox display-input\" [attr.aria-label]=\"hint\"\n               focus-target\n               [tabindex]=\"tabindex\"\n               [name]=\"name\"\n               type=\"text\"\n               role=\"timer\"\n               [value]=\"displayValue\"\n               [disabled]=\"disabled || readonly || isCurrentTime\"\n               [autofocus]=\"autofocus\"\n               [attr.placeholder]=\"placeholder\"\n               [attr.accesskey]=\"shortcutkey\"\n               [attr.aria-atomic]=\"isCurrentTime ? 'true' : 'false'\"\n               [required]=\"required\"\n               [readOnly]=\"isReadOnly\"\n               (click)=\"toggleDropdown($event, true)\"\n               (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n               (blur)=\"onInputBlur($event)\"\n               (change)=\"onDisplayTimeChange($event)\"\n               (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event)\">\n        <span class=\"input-group-btn dropdown-toggle\">\n            <button type=\"button\" class=\"btn btn-default btn-date\" [tabindex]=\"tabindex\" [disabled]=\"disabled || readonly || isCurrentTime\" aria-label=\"Select time\" aria-haspopup=\"true\" aria-expanded=\"false\" (click)=\"toggleDropdown($event, false)\"><i aria-hidden=\"true\" class=\"app-icon wm-sl-l sl-time\"></i></button>\n        </span>\n        <div *dropdownMenu class=\"dropdown-menu\" (click)=\"preventTpClose($event)\">\n            <timepicker class=\"model-holder\"\n                        [showMeridian]=\"ismeridian\"\n                        [readonlyInput]=\"isDisabled\"\n                        [(ngModel)]=\"bsTimeValue\"\n                        [ngModelOptions]=\"{standalone: true}\"\n                        [disabled]=\"disabled || readonly || isCurrentTime\"\n                        [min]=\"minTime\"\n                        [max]=\"maxTime\"\n                        [hourStep]=\"hourstep\"\n                        [minuteStep]=\"minutestep\"\n                        [secondsStep]=\"secondsstep\"\n                        [mousewheel]=\"true\"\n                        [arrowkeys]=\"true\"\n                        (isValid)=\"isValid($event)\"\n                        [showSeconds]=\"showseconds\" (ngModelChange)=\"onTimeChange($event)\"></timepicker>\n        </div>\n    </div>\n<ng-template [ngIf]=\"loadNativeDateInput\">\n    <wm-datetimepicker\n        dateTimePicker\n        mode=\"TIME\"\n        [minTime]=\"minTime\"\n        [maxTime]=\"maxTime\"\n        [placement]=\"modal\"\n        [displayFormat]=\"timepattern\"\n        [value]=\"bsTimeValue\"\n        (change)=\"onTimeChange($event)\">\n    </wm-datetimepicker>\n    <div class=\"mobile-input mobile-datepicker-container\"\n        tabindex=\"1000000\"\n         (click)=\"!(disabled || readonly) && showDatePickerModal(bsTimeValue)\"\n         [attr.aria-label]=\"displayValue ? 'Change time  ' + displayValue : hint || 'Select time'\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event); assignModel()\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n         role=\"button\">\n    </div>\n</ng-template>\n" }]
+        }], () => [{ type: i0__namespace.Injector }, { type: i0__namespace.NgZone }, { type: i1$1__namespace.AppDefaults }, { type: i1$1__namespace.App }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(TimeComponent, { className: "TimeComponent", filePath: "time/time.component.ts", lineNumber: 42 }); })();
+
+    const components = [
+        DateComponent,
+        DatetimeComponent,
+        TimeComponent,
+        DateTimePickerComponent,
+        TimePickerComponent,
+        PickerComponent,
+        PickerGroupComponent
+    ];
+    class EpochModule {
+        static { this.ɵfac = function EpochModule_Factory(t) { return new (t || EpochModule)(); }; }
+        static { this.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: EpochModule }); }
+        static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [i2.CommonModule,
+                i3.BsDatepickerModule,
+                i4$1.BsDropdownModule,
+                i5.FormsModule,
+                i6.TimepickerModule,
+                base.WmComponentsModule,
+                i4.IMaskModule] }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(EpochModule, [{
+            type: i0.NgModule,
+            args: [{
+                    imports: [
+                        i2.CommonModule,
+                        i3.BsDatepickerModule,
+                        i4$1.BsDropdownModule,
+                        i5.FormsModule,
+                        i6.TimepickerModule,
+                        base.WmComponentsModule,
+                        i4.IMaskModule
+                    ],
+                    declarations: [...components],
+                    exports: [...components]
+                }]
+        }], null, null); })();
+    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(EpochModule, { declarations: [DateComponent,
+            DatetimeComponent,
+            TimeComponent,
+            DateTimePickerComponent,
+            TimePickerComponent,
+            PickerComponent,
+            PickerGroupComponent], imports: [i2.CommonModule,
+            i3.BsDatepickerModule,
+            i4$1.BsDropdownModule,
+            i5.FormsModule,
+            i6.TimepickerModule,
+            base.WmComponentsModule,
+            i4.IMaskModule], exports: [DateComponent,
+            DatetimeComponent,
+            TimeComponent,
+            DateTimePickerComponent,
+            TimePickerComponent,
+            PickerComponent,
+            PickerGroupComponent] }); })();
+
+    exports.DateComponent = DateComponent;
+    exports.DateTimePickerComponent = DateTimePickerComponent;
+    exports.DatetimeComponent = DatetimeComponent;
+    exports.EpochModule = EpochModule;
+    exports.PickerComponent = PickerComponent;
+    exports.PickerGroupComponent = PickerGroupComponent;
+    exports.TimeComponent = TimeComponent;
+    exports.TimePickerComponent = TimePickerComponent;
+
+}));