@wavemaker/app-ng-runtime 11.8.0-rc.5667 → 11.8.0-rc.5670

app-ng-runtime/components/input/epoch/fesm2022/index.mjs

@@ -0,0 +1,3125 @@
+import * as i0 from '@angular/core';
+import { Component, EventEmitter, ElementRef, Output, Input, ViewChild, Directive, Inject, Optional, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { FormStyle, TranslationWidth, getLocaleDayPeriods, CommonModule } from '@angular/common';
+import * as i5 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
+import * as i3 from 'ngx-bootstrap/datepicker';
+import { BsDatepickerConfig, BsDatepickerDirective, BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import * as i4$1 from 'ngx-bootstrap/dropdown';
+import { BsDropdownDirective, BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import * as i6 from 'ngx-bootstrap/timepicker';
+import { TimepickerConfig, TimepickerComponent, TimepickerModule } from 'ngx-bootstrap/timepicker';
+import { ToDatePipe, getContainerTargetClass, PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, register, registerFormWidget, styler, setFocusTrap, provideAs, provideAsWidgetRef, WmComponentsModule } from '@wm/components/base';
+import * as i1$1 from '@wm/core';
+import { App, AbstractI18nService, isMobile, getFormattedDate, getDateObj, setAttr, getNativeDateObject, hasCordova, isIos, FormWidgetType, getMomentLocaleObject, getDisplayDateTimeFormat, adjustContainerPosition, adjustContainerRightEdges, addEventListenerOnElement, addClass, $appDigest } from '@wm/core';
+import { BaseFormCustomComponent } from '@wm/components/input';
+import * as i1 from 'ngx-bootstrap/modal';
+import { filter, isUndefined, isNaN as isNaN$1, parseInt as parseInt$1, isString, split, get, forEach, includes, debounce } from 'lodash-es';
+import IMask from 'imask';
+import * as i4 from 'angular-imask';
+import { IMaskDirective, IMaskModule } from 'angular-imask';
+
+const _c0$4 = ["*"];
+function PickerComponent_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r1 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", option_r1.label, " ");
+} }
+class PickerGroupComponent {
+    static { this.ɵfac = function PickerGroupComponent_Factory(t) { return new (t || PickerGroupComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵ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.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵprojection(1);
+            i0.ɵɵelementEnd();
+        } }, encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PickerGroupComponent, [{
+        type: Component,
+        args: [{
+                selector: 'wm-pickergroup',
+                template: `
+        <div class="app-picker-group">
+            <ng-content></ng-content>
+        </div>
+    `
+            }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PickerGroupComponent, { className: "PickerGroupComponent", filePath: "picker/picker.component.ts", lineNumber: 13 }); })();
+class PickerComponent {
+    constructor(inj) {
+        this.inj = inj;
+        this.change = new EventEmitter();
+        this._selectedIndex = 0;
+        this._options = [];
+        this.noOfEmptyElements = 2;
+        this.$el = $(inj.get(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.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵ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.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
+            i0.ɵɵtext(3, "E");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 2);
+            i0.ɵɵtext(5, "E");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(6, PickerComponent_div_6_Template, 2, 1, "div", 3);
+            i0.ɵɵelementStart(7, "div", 2);
+            i0.ɵɵtext(8, "E");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "div", 2);
+            i0.ɵɵtext(10, "E");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(11, "div", 4);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(6);
+            i0.ɵɵproperty("ngForOf", ctx.options);
+        } }, dependencies: [i2.NgForOf], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PickerComponent, [{
+        type: 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.Injector }], { change: [{
+            type: Output
+        }], selectedValue: [{
+            type: Input
+        }], options: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵ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.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "bs-datepicker-inline", 11);
+    i0.ɵɵlistener("bsValueChange", function DateTimePickerComponent_ng_template_0_bs_datepicker_inline_3_Template_bs_datepicker_inline_bsValueChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDateUpdate($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵ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.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "wm-timepicker", 12);
+    i0.ɵɵlistener("change", function DateTimePickerComponent_ng_template_0_wm_timepicker_4_Template_wm_timepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onTimeUpdate($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵ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.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 13);
+    i0.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setToday()); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.appLocale.LABEL_TODAY_DATE || "Today");
+} }
+function DateTimePickerComponent_ng_template_0_button_9_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 14);
+    i0.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_button_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onOkClick()); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.appLocale.LABEL_OK || "Ok");
+} }
+function DateTimePickerComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
+    i0.ɵɵelement(2, "div", 3);
+    i0.ɵɵ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.ɵɵelementStart(5, "span", 6);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 7);
+    i0.ɵɵ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.ɵɵelementStart(10, "button", 10);
+    i0.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clear()); });
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "DATE");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "TIME");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getDateLabel(), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "DATE");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "TIME");
+    i0.ɵɵadvance(2);
+    i0.ɵɵ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 EventEmitter();
+        this._value = new Date();
+        this.changedValue = null;
+        this.appLocale = inj.get(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();
+        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.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.BsModalService)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DateTimePickerComponent, selectors: [["wm-datetimepicker"]], viewQuery: function DateTimePickerComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$3, 7);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.datetimepickerTemplate = _t.first);
+        } }, inputs: { mode: "mode", placement: "placement", _bsDatepickerConfig: [i0.ɵɵInputFlags.None, "config", "_bsDatepickerConfig"], minTime: "minTime", maxTime: "maxTime", _displayFormat: "_displayFormat", excludedDatesToDisable: "excludedDatesToDisable", value: "value", bsDatepickerConfig: [i0.ɵɵ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.ɵɵtemplate(0, DateTimePickerComponent_ng_template_0_Template, 12, 6, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+        } }, dependencies: () => [i2.NgIf, i3.BsDatepickerDirective, i3.BsDatepickerInlineDirective, TimePickerComponent], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateTimePickerComponent, [{
+        type: 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.Injector }, { type: i1.BsModalService }], { datetimepickerTemplate: [{
+            type: ViewChild,
+            args: ['datetimepickerTemplate', { static: true }]
+        }], mode: [{
+            type: Input
+        }], placement: [{
+            type: Input
+        }], _bsDatepickerConfig: [{
+            type: Input,
+            args: ["config"]
+        }], minTime: [{
+            type: Input
+        }], maxTime: [{
+            type: Input
+        }], _displayFormat: [{
+            type: Input
+        }], change: [{
+            type: Output
+        }], excludedDatesToDisable: [{
+            type: Input
+        }], value: [{
+            type: Input
+        }], bsDatepickerConfig: [{
+            type: Input,
+            args: ["config"]
+        }], excludedDaysToDisable: [{
+            type: Input
+        }], displayFormat: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵ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 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.ɵɵdirectiveInject(i0.Injector)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵ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.ɵɵelementStart(0, "wm-pickergroup")(1, "wm-picker", 0);
+            i0.ɵɵlistener("change", function TimePickerComponent_Template_wm_picker_change_1_listener($event) { return ctx.set($event, "HOUR"); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(2, "span", 1);
+            i0.ɵɵtext(3, ":");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "wm-picker", 0);
+            i0.ɵɵlistener("change", function TimePickerComponent_Template_wm_picker_change_4_listener($event) { return ctx.set($event, "MINUTE"); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "span", 1);
+            i0.ɵɵtext(6, ":");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "wm-picker", 0);
+            i0.ɵɵlistener("change", function TimePickerComponent_Template_wm_picker_change_7_listener($event) { return ctx.set($event, "SECOND"); });
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("options", ctx.options.hour)("selectedValue", ctx.hour);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("options", ctx.options.minute)("selectedValue", ctx.minute);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("options", ctx.options.minute)("selectedValue", ctx.second);
+        } }, dependencies: [PickerComponent, PickerGroupComponent], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimePickerComponent, [{
+        type: 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.Injector }], { value: [{
+            type: Input
+        }], min: [{
+            type: Input
+        }], max: [{
+            type: Input
+        }], change: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵ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 TimepickerConfig(), {
+        meridians: getLocaleDayPeriods(i18nService.getSelectedLocale(), FormStyle.Format, TranslationWidth.Abbreviated)
+    });
+}
+class BaseDateTimeComponent extends BaseFormCustomComponent {
+    get timeZone() { return this.inj.get(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 BsDatepickerConfig();
+        this.i18nService = this.inj.get(AbstractI18nService);
+        this.invokeEventCallback('beforeload');
+        this.datePipe = this.inj.get(ToDatePipe);
+        this.selectedLocale = this.i18nService.getSelectedLocale();
+        this._dateOptions.todayPosition = 'left';
+        this._dateOptions.clearPosition = 'right';
+        this.meridians = getLocaleDayPeriods(this.selectedLocale, FormStyle.Format, TranslationWidth.Abbreviated);
+        this.loadNativeDateInput = 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 (!isUndefined(this.dateNotInRange) && this.dateNotInRange) {
+            return {
+                dateNotInRange: {
+                    valid: false
+                },
+            };
+        }
+        if (!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 = getFormattedDate(this.datePipe, newVal, pattern, timeZone, null, null, this);
+        inputVal = inputVal.trim();
+        if (inputVal) {
+            if (pattern === 'timestamp') {
+                if (!isNaN$1(inputVal) && parseInt$1(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 = 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(getDateObj(this.mindate)).startOf('day').toDate();
+            const maxDate = moment(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 && 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 && 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 (isString(this.excludedates)) {
+                    excludeDatesArray = split(this.excludedates, ',');
+                }
+                else {
+                    excludeDatesArray = this.excludedates;
+                }
+                excludeDatesArray = excludeDatesArray.map(d => getFormattedDate(this.datePipe, d, this.datepattern, this.timeZone, null, null, this));
+                if (excludeDatesArray.indexOf(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 = split(this.excludedays, ',');
+                const day = 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' });
+        const year = 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();
+            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();
+            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 (parseInt$1(activeMonthOrYear) !== this.activeDate.getFullYear()) {
+                this.loadMonths();
+            }
+            const newDate = new Date(parseInt$1(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(parseInt$1(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}`);
+        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() < parseInt$1(startYear)) {
+                this.goToOtherMonthOryear('previous', 'year');
+            }
+            else if (newDate.getFullYear() > parseInt$1(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 = 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;
+            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 (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 = includes(this.datepattern, 's');
+            this.ismeridian = includes(this.datepattern, 'h');
+        }
+        else if (pattern === 'timepattern') {
+            this.showseconds = includes(this.timepattern, 's');
+            this.ismeridian = 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 && !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 && !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 (isIos()) {
+            return 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() : getDateObj(nv);
+            this.minDateMaxDateValidationOnInput(this.datavalue);
+        }
+        else if (key === 'maxdate') {
+            this._dateOptions.maxDate = (nv === CURRENT_DATE$2) ? this.maxdate = new Date() : getDateObj(nv);
+            this.minDateMaxDateValidationOnInput(this.datavalue);
+        }
+        else if (key === 'excludedates' || key === 'excludedays') {
+            if (this.excludedays) {
+                this.excludedDaysToDisable = split(this.excludedays, ',').map((day) => {
+                    return +day;
+                });
+            }
+            if (this.excludedates) {
+                this.excludedDatesToDisable = this.excludedates;
+                if (isString(this.excludedates)) {
+                    // @ts-ignore
+                    this.excludedDatesToDisable = split(this.excludedates, ',');
+                }
+                this.excludedDatesToDisable = this.excludedDatesToDisable.map(d => 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 = isMobile() && !this.showcustompicker;
+        }
+        else if (key === 'adaptiveposition') {
+            this._dateOptions.adaptivePosition = nv;
+        }
+        else {
+            super.onPropertyChange(key, nv, ov);
+        }
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.containerTarget = 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.ɵɵinvalidFactory(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseDateTimeComponent, viewQuery: function BaseDateTimeComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(BsDropdownDirective, 5);
+            i0.ɵɵviewQuery(TimepickerComponent, 5);
+            i0.ɵɵviewQuery(DateTimePickerComponent, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.bsDropdown = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.bsTimePicker = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.datetimepickerComponent = _t.first);
+        } }, features: [i0.ɵɵInheritDefinitionFeature] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseDateTimeComponent, [{
+        type: Directive
+    }], () => [{ type: i0.Injector }, { type: undefined }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { bsDropdown: [{
+            type: ViewChild,
+            args: [BsDropdownDirective]
+        }], bsTimePicker: [{
+            type: ViewChild,
+            args: [TimepickerComponent]
+        }], datetimepickerComponent: [{
+            type: ViewChild,
+            args: [DateTimePickerComponent]
+        }] }); })();
+
+const dateProps = new Map([
+    ['autofocus', PROP_BOOLEAN],
+    ['class', PROP_STRING],
+    ['dataentrymode', { value: 'default', ...PROP_STRING }],
+    ['datavaluesource', PROP_ANY],
+    ['datavalue', PROP_STRING],
+    ['datepattern', PROP_STRING],
+    ['disabled', PROP_BOOLEAN],
+    ['excludedays', PROP_STRING],
+    ['excludedates', PROP_STRING],
+    ['hint', PROP_STRING],
+    ['maxdate', PROP_STRING],
+    ['mindate', PROP_STRING],
+    ['name', PROP_STRING],
+    ['outputformat', { value: 'yyyy-MM-dd', ...PROP_STRING }],
+    ['placeholder', { value: 'Select Date', ...PROP_STRING }],
+    ['readonly', PROP_BOOLEAN],
+    ['required', PROP_BOOLEAN],
+    ['shortcutkey', PROP_STRING],
+    ['show', { value: true, ...PROP_BOOLEAN }],
+    ['showdropdownon', { value: 'default', ...PROP_STRING }],
+    ['showbuttonbar', { value: true, ...PROP_BOOLEAN }], // TODO not addressed
+    ['showcustompicker', { value: false, ...PROP_BOOLEAN }],
+    ['showindevice', { displayType: 'inline-block', value: 'all', ...PROP_STRING }],
+    ['showweeks', { value: false, ...PROP_BOOLEAN }],
+    ['tabindex', { value: 0, ...PROP_NUMBER }],
+    ['selectfromothermonth', { value: true, ...PROP_BOOLEAN }],
+    ['todaybutton', { value: true, ...PROP_BOOLEAN }],
+    ['clearbutton', { value: true, ...PROP_BOOLEAN }],
+    ['adaptiveposition', { value: true, ...PROP_BOOLEAN }],
+    ['todaybuttonlabel', { value: 'LABEL_TODAY_DATE', ...PROP_STRING }],
+    ['clearbuttonlabel', { value: 'LABEL_CLEAR_DATE', ...PROP_STRING }],
+    ['showdateformatasplaceholder', PROP_BOOLEAN],
+]);
+const registerProps$2 = () => {
+    register('wm-date', dateProps);
+    registerFormWidget(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.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "wm-datetimepicker", 9);
+    i0.ɵɵlistener("change", function DateComponent_ng_template_8_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDateChange($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "div", 10);
+    i0.ɵɵlistener("click", function DateComponent_ng_template_8_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵ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.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r2.invokeOnFocus($event)); })("blur", function DateComponent_ng_template_8_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r2.invokeOnTouched($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵ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.ɵɵadvance();
+    i0.ɵɵproperty("tabindex", ctx_r2.tabindex || 0);
+    i0.ɵɵ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 getFormattedDate(this.datePipe, this.bsDataValue, this.maskDateInputFormat, this.timeZone, null, this.isCurrentDate, this) || '';
+        }
+        return getFormattedDate(this.datePipe, this.bsDataValue, this.dateInputFormat, this.timeZone, null, this.isCurrentDate, this) || '';
+    }
+    get nativeDisplayValue() {
+        return getFormattedDate(this.datePipe, this.bsDataValue, 'yyyy-MM-dd', this.timeZone, null, this.isCurrentDate, this) || '';
+    }
+    // @ts-ignore
+    get datavalue() {
+        return 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 ? getMomentLocaleObject(this.timeZone) : new Date();
+            }, 50);
+            this.isCurrentDate = true;
+        }
+        else {
+            this.bsDataValue = newVal ? 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;
+        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 || getDisplayDateTimeFormat(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 = 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 (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 ? 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 = setFocusTrap(datePickerContainer, true);
+        this.focusTrap.activate();
+        this.addDatepickerKeyboardEvents(this, false);
+        adjustContainerPosition($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
+        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 = 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 (!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 = 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 = getDateObj(event.target.value, { pattern: this.datepattern });
+                event.preventDefault();
+                const formattedDate = getFormattedDate(this.datePipe, newVal, this.dateInputFormat, this.timeZone, null, this.isCurrentDate, this);
+                const inputVal = event.target.value.trim();
+                if (inputVal && this.datepattern === 'timestamp') {
+                    if (!isNaN$1(inputVal) && parseInt$1(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.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.AppDefaults), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DateComponent, selectors: [["", "wmDate", ""]], viewQuery: function DateComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(BsDatepickerDirective, 5);
+            i0.ɵɵviewQuery(_c0$2, 5, IMaskDirective);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.bsDatePickerDirective = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.imask = _t.first);
+        } }, features: [i0.ɵɵProvidersFeature([
+                provideAs(DateComponent, NG_VALUE_ACCESSOR, true),
+                provideAs(DateComponent, NG_VALIDATORS, true),
+                provideAsWidgetRef(DateComponent)
+            ]), i0.ɵɵ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.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "input", 2, 0);
+            i0.ɵɵlistener("click", function DateComponent_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDpDropdown($event, true)); })("focus", function DateComponent_Template_input_focus_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.onDateTimeInputFocus(); ctx.invokeOnFocus($event); return i0.ɵɵresetView(ctx.updateIMask()); })("blur", function DateComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputBlur($event)); })("change", function DateComponent_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDisplayDateChange($event)); })("keydown", function DateComponent_Template_input_keydown_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx._triggeredByUser = true; return i0.ɵɵresetView(ctx.onDisplayKeydown($event)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(2, "span", 3)(3, "button", 4);
+            i0.ɵɵlistener("click", function DateComponent_Template_button_click_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDpDropdown($event, false)); });
+            i0.ɵɵelement(4, "i", 5);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(5, "div", 6)(6, "input", 7, 1);
+            i0.ɵɵlistener("onShown", function DateComponent_Template_input_onShown_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDatePickerOpen()); })("onHidden", function DateComponent_Template_input_onHidden_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.hideDatepickerDropdown()); })("bsValueChange", function DateComponent_Template_input_bsValueChange_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDateChange($event)); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(8, DateComponent_ng_template_8_Template, 2, 8, "ng-template", 8);
+        } if (rf & 2) {
+            i0.ɵɵ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.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("tabindex", ctx.loadNativeDateInput ? "-1" : ctx.tabindex)("disabled", ctx.disabled || ctx.readonly);
+            i0.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput)("aria-label", ctx.displayValue ? "Change Date " + ctx.displayValue : "Choose date by pressing enter");
+            i0.ɵɵadvance(3);
+            i0.ɵɵ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.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
+        } }, dependencies: [i2.NgIf, i3.BsDatepickerDirective, i3.BsDatepickerInputDirective, i4.IMaskDirective, DateTimePickerComponent], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateComponent, [{
+        type: Component,
+        args: [{ selector: '[wmDate]', providers: [
+                    provideAs(DateComponent, NG_VALUE_ACCESSOR, true),
+                    provideAs(DateComponent, NG_VALIDATORS, true),
+                    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.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.AppDefaults }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { bsDatePickerDirective: [{
+            type: ViewChild,
+            args: [BsDatepickerDirective]
+        }], imask: [{
+            type: ViewChild,
+            args: ['dateInput', { read: IMaskDirective }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateComponent, { className: "DateComponent", filePath: "date/date.component.ts", lineNumber: 44 }); })();
+
+const dateTimeProps = new Map([
+    ['autofocus', PROP_BOOLEAN],
+    ['class', PROP_STRING],
+    ['dataentrymode', { value: 'default', ...PROP_STRING }],
+    ['datavaluesource', PROP_ANY],
+    ['datavalue', PROP_STRING],
+    ['datepattern', PROP_STRING],
+    ['disabled', PROP_BOOLEAN],
+    ['excludedays', PROP_STRING],
+    ['excludedates', PROP_STRING],
+    ['hint', PROP_STRING],
+    ['hourstep', { value: 1, ...PROP_NUMBER }],
+    ['maxdate', PROP_STRING],
+    ['mindate', PROP_STRING],
+    ['minutestep', { value: 15, ...PROP_NUMBER }],
+    ['name', PROP_STRING],
+    ['outputformat', { value: 'timestamp', ...PROP_STRING }],
+    ['placeholder', { value: 'Select date time', ...PROP_STRING }],
+    ['readonly', PROP_BOOLEAN],
+    ['required', PROP_BOOLEAN],
+    ['secondsstep', { value: 1, ...PROP_NUMBER }],
+    ['shortcutkey', PROP_STRING],
+    ['show', { value: true, ...PROP_BOOLEAN }],
+    ['showdropdownon', { value: 'default', ...PROP_STRING }],
+    ['showbuttonbar', PROP_BOOLEAN],
+    ['showcustompicker', { value: false, ...PROP_BOOLEAN }],
+    ['showindevice', { displayType: 'inline-block', value: 'all', ...PROP_STRING }],
+    ['showweeks', PROP_BOOLEAN],
+    ['tabindex', { value: 0, ...PROP_NUMBER }],
+    ['timestamp', PROP_STRING],
+    ['selectfromothermonth', { value: true, ...PROP_BOOLEAN }],
+    ['todaybutton', { value: true, ...PROP_BOOLEAN }],
+    ['clearbutton', { value: true, ...PROP_BOOLEAN }],
+    ['adaptiveposition', { value: true, ...PROP_BOOLEAN }],
+    ['todaybuttonlabel', { value: 'LABEL_TODAY_DATE', ...PROP_STRING }],
+    ['clearbuttonlabel', { value: 'LABEL_CLEAR_DATE', ...PROP_STRING }]
+]);
+const registerProps$1 = () => {
+    register('wm-datetime', dateTimeProps);
+    registerFormWidget(FormWidgetType.DATETIME, new Map(dateTimeProps));
+    registerFormWidget(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.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵlistener("click", function DatetimeComponent_div_10_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.preventTpClose($event)); });
+    i0.ɵɵelementStart(1, "timepicker", 13);
+    i0.ɵɵtwoWayListener("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.bsTimeValue, $event) || (ctx_r2.bsTimeValue = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("isValid", function DatetimeComponent_div_10_Template_timepicker_isValid_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.isValid($event)); })("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onModelUpdate($event, "time")); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("showMeridian", ctx_r2.ismeridian)("readonlyInput", ctx_r2.disabled || ctx_r2.readonly || ctx_r2.isCurrentDate);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.bsTimeValue);
+    i0.ɵɵproperty("ngModelOptions", i0.ɵɵ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.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "wm-datetimepicker", 14);
+    i0.ɵɵlistener("change", function DatetimeComponent_ng_template_11_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onModelUpdate($event, "date")); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "div", 15);
+    i0.ɵɵlistener("click", function DatetimeComponent_ng_template_11_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵ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.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r2.invokeOnFocus($event)); })("blur", function DatetimeComponent_ng_template_11_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r2.invokeOnTouched($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵ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.ɵɵadvance();
+    i0.ɵɵproperty("tabindex", ctx_r2.tabindex || 0);
+    i0.ɵɵ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 getFormattedDate(this.datePipe, this.proxyModel, this.dateInputFormat, this.timeZone, this.key, this.isCurrentDate, this) || '';
+    }
+    get nativeDisplayValue() {
+        return 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 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 ? 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 = debounce(this.invokeOnChange, 10);
+        this.registerDestroyListener(() => this.clearTimeInterval());
+        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 || getDisplayDateTimeFormat(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 ? 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 = 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');
+        forEach(tpElements, (element) => {
+            addClass(element.parentElement, 'app-datetime', true);
+        });
+        this.bsDatePickerDirective.hide();
+        this.focusTimePickerPopover(this);
+        this.bindTimePickerKeyboardEvents();
+        adjustContainerPosition($('bs-dropdown-container'), this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
+        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 = 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);
+        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 (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 = 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 = 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 ? 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 ? getNativeDateObject(newVal, { pattern: this.loadNativeDateInput ? this.outputformat : this.datepattern, meridians: this.meridians }) : undefined;
+                event.preventDefault();
+                const formattedDate = 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 (!isNaN$1(inputVal) && parseInt$1(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 = 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 (!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.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.AppDefaults), i0.ɵɵdirectiveInject(i1$1.App), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DatetimeComponent, selectors: [["", "wmDateTime", ""]], viewQuery: function DatetimeComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(BsDatepickerDirective, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.bsDatePickerDirective = _t.first);
+        } }, features: [i0.ɵɵProvidersFeature([
+                provideAs(DatetimeComponent, NG_VALUE_ACCESSOR, true),
+                provideAs(DatetimeComponent, NG_VALIDATORS, true),
+                provideAsWidgetRef(DatetimeComponent),
+                { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
+            ]), i0.ɵɵ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.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵlistener("onShown", function DatetimeComponent_Template_div_onShown_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTimepickerOpen()); });
+            i0.ɵɵelementStart(1, "input", 2);
+            i0.ɵɵlistener("click", function DatetimeComponent_Template_input_click_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDpDropdown($event, true)); })("focus", function DatetimeComponent_Template_input_focus_1_listener($event) { i0.ɵɵrestoreView(_r1); ctx.onDateTimeInputFocus(); return i0.ɵɵresetView(ctx.invokeOnFocus($event)); })("blur", function DatetimeComponent_Template_input_blur_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputBlur($event)); })("change", function DatetimeComponent_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDateChange($event)); })("keydown", function DatetimeComponent_Template_input_keydown_1_listener($event) { i0.ɵɵrestoreView(_r1); ctx._triggeredByUser = true; return i0.ɵɵresetView(ctx.onDisplayKeydown($event)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(2, "span", 3)(3, "button", 4);
+            i0.ɵɵlistener("click", function DatetimeComponent_Template_button_click_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDpDropdown($event, false)); });
+            i0.ɵɵelement(4, "i", 5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "button", 6);
+            i0.ɵɵlistener("click", function DatetimeComponent_Template_button_click_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleTimePicker(!ctx.isTimeOpen, $event)); });
+            i0.ɵɵelement(6, "i", 7);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "div", 8)(8, "input", 9, 0);
+            i0.ɵɵlistener("onShown", function DatetimeComponent_Template_input_onShown_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDatePickerOpen()); })("onHidden", function DatetimeComponent_Template_input_onHidden_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.hideDatepickerDropdown()); })("bsValueChange", function DatetimeComponent_Template_input_bsValueChange_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onModelUpdate($event, "date")); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(10, DatetimeComponent_div_10_Template, 2, 13, "div", 10);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(11, DatetimeComponent_ng_template_11_Template, 2, 8, "ng-template", 11);
+        } if (rf & 2) {
+            i0.ɵɵproperty("isOpen", ctx.isTimeOpen)("container", "body");
+            i0.ɵɵadvance();
+            i0.ɵɵ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.ɵɵattribute("aria-label", ctx.hint)("aria-hidden", !!ctx.loadNativeDateInput)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("tabindex", ctx.loadNativeDateInput ? "-1" : ctx.tabindex)("disabled", ctx.disabled || ctx.readonly || ctx.isCurrentDate);
+            i0.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput)("aria-label", ctx.displayValue ? "Change Date " + ctx.displayValue : "Choose date by pressing enter");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("tabindex", ctx.loadNativeDateInput ? "-1" : ctx.tabindex)("disabled", ctx.disabled || ctx.readonly || ctx.isCurrentDate);
+            i0.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput);
+            i0.ɵɵadvance(3);
+            i0.ɵɵ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.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
+        } }, dependencies: [i2.NgIf, i3.BsDatepickerDirective, i3.BsDatepickerInputDirective, i4$1.BsDropdownMenuDirective, i4$1.BsDropdownDirective, i5.NgControlStatus, i5.NgModel, i6.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatetimeComponent, [{
+        type: Component,
+        args: [{ selector: '[wmDateTime]', providers: [
+                    provideAs(DatetimeComponent, NG_VALUE_ACCESSOR, true),
+                    provideAs(DatetimeComponent, NG_VALIDATORS, true),
+                    provideAsWidgetRef(DatetimeComponent),
+                    { provide: TimepickerConfig, deps: [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.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$1.AppDefaults }, { type: i1$1.App }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { bsDatePickerDirective: [{
+            type: ViewChild,
+            args: [BsDatepickerDirective]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DatetimeComponent, { className: "DatetimeComponent", filePath: "date-time/date-time.component.ts", lineNumber: 56 }); })();
+
+const timeProps = new Map([
+    ['autofocus', PROP_BOOLEAN],
+    ['class', PROP_STRING],
+    ['dataentrymode', { value: 'default', ...PROP_STRING }],
+    ['datavaluesource', PROP_ANY],
+    ['datavalue', PROP_STRING],
+    ['disabled', PROP_BOOLEAN],
+    ['hint', PROP_STRING],
+    ['hourstep', { value: 1, ...PROP_NUMBER }],
+    ['maxtime', PROP_STRING],
+    ['mintime', PROP_STRING],
+    ['minutestep', { value: 15, ...PROP_NUMBER }],
+    ['name', PROP_STRING],
+    ['outputformat', { value: 'HH:mm:ss', ...PROP_STRING }],
+    ['placeholder', { value: 'Select time', ...PROP_STRING }],
+    ['readonly', PROP_BOOLEAN],
+    ['required', PROP_BOOLEAN],
+    ['shortcutkey', PROP_STRING],
+    ['show', { value: true, ...PROP_BOOLEAN }],
+    ['showdropdownon', { value: 'default', ...PROP_STRING }],
+    ['showcustompicker', { value: false, ...PROP_BOOLEAN }],
+    ['secondsstep', { value: 1, ...PROP_NUMBER }],
+    ['tabindex', { value: 0, ...PROP_NUMBER }],
+    ['timepattern', PROP_STRING],
+    ['timestamp', PROP_STRING]
+]);
+const registerProps = () => {
+    register('wm-time', timeProps);
+    registerFormWidget(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.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵlistener("click", function TimeComponent_div_5_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.preventTpClose($event)); });
+    i0.ɵɵelementStart(1, "timepicker", 8);
+    i0.ɵɵtwoWayListener("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.bsTimeValue, $event) || (ctx_r1.bsTimeValue = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("isValid", function TimeComponent_div_5_Template_timepicker_isValid_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.isValid($event)); })("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTimeChange($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("showMeridian", ctx_r1.ismeridian)("readonlyInput", ctx_r1.isDisabled);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.bsTimeValue);
+    i0.ɵɵproperty("ngModelOptions", i0.ɵɵ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.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "wm-datetimepicker", 9);
+    i0.ɵɵlistener("change", function TimeComponent_ng_template_6_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTimeChange($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "div", 10);
+    i0.ɵɵlistener("click", function TimeComponent_ng_template_6_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵ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.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.onDateTimeInputFocus(true); ctx_r1.invokeOnFocus($event); return i0.ɵɵresetView(ctx_r1.assignModel()); })("blur", function TimeComponent_ng_template_6_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r1.invokeOnTouched($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("minTime", ctx_r1.minTime)("maxTime", ctx_r1.maxTime)("placement", ctx_r1.modal)("displayFormat", ctx_r1.timepattern)("value", ctx_r1.bsTimeValue);
+    i0.ɵɵadvance();
+    i0.ɵɵ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 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 = 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);
+        $appDigest();
+    }
+    get displayValue() {
+        return getFormattedDate(this.datePipe, this.bsTimeValue, this.timepattern, this.timeZone, null, null, this) || '';
+    }
+    get nativeDisplayValue() {
+        return 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 };
+        styler(this.nativeElement, this);
+        /**
+         * Destroy the timer once the date widget is gone
+         */
+        this.registerDestroyListener(() => this.clearTimeInterval());
+        this.timepattern = this.appDefaults.timeFormat || getDisplayDateTimeFormat(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 = 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 = 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 = 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 = 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, maxTimeMeridian;
+        // For nativePicker, newVal is event, get the dateobject from the event.
+        if (isNativePicker) {
+            newVal = 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');
+                maxTimeMeridian = 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 = 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 ? 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 (!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 = 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');
+        forEach(tpElements, element => {
+            addClass(element.parentElement, 'app-datetime', true);
+        });
+        this.focusTimePickerPopover(this);
+        this.bindTimePickerKeyboardEvents();
+        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 = get(this, 'nativeDisplayValue');
+    }
+    static { this.ɵfac = function TimeComponent_Factory(t) { return new (t || TimeComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1$1.AppDefaults), i0.ɵɵdirectiveInject(i1$1.App), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TimeComponent, selectors: [["", "wmTime", ""]], features: [i0.ɵɵProvidersFeature([
+                provideAs(TimeComponent, NG_VALUE_ACCESSOR, true),
+                provideAs(TimeComponent, NG_VALIDATORS, true),
+                provideAsWidgetRef(TimeComponent),
+                { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
+            ]), i0.ɵɵ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.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵlistener("onShown", function TimeComponent_Template_div_onShown_0_listener() { return ctx.onShown(); })("onHidden", function TimeComponent_Template_div_onHidden_0_listener() { return ctx.hideTimepickerDropdown(); });
+            i0.ɵɵelementStart(1, "input", 1);
+            i0.ɵɵ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.ɵɵelementEnd();
+            i0.ɵɵelementStart(2, "span", 2)(3, "button", 3);
+            i0.ɵɵlistener("click", function TimeComponent_Template_button_click_3_listener($event) { return ctx.toggleDropdown($event, false); });
+            i0.ɵɵelement(4, "i", 4);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(5, TimeComponent_div_5_Template, 2, 14, "div", 5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(6, TimeComponent_ng_template_6_Template, 2, 6, "ng-template", 6);
+        } if (rf & 2) {
+            i0.ɵɵproperty("isOpen", ctx.status.isopen)("container", "body");
+            i0.ɵɵadvance();
+            i0.ɵɵ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.ɵɵattribute("aria-label", ctx.hint)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-atomic", ctx.isCurrentTime ? "true" : "false");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("tabindex", ctx.tabindex)("disabled", ctx.disabled || ctx.readonly || ctx.isCurrentTime);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
+        } }, dependencies: [i2.NgIf, i4$1.BsDropdownMenuDirective, i4$1.BsDropdownDirective, i5.NgControlStatus, i5.NgModel, i6.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeComponent, [{
+        type: Component,
+        args: [{ selector: '[wmTime]', providers: [
+                    provideAs(TimeComponent, NG_VALUE_ACCESSOR, true),
+                    provideAs(TimeComponent, NG_VALIDATORS, true),
+                    provideAsWidgetRef(TimeComponent),
+                    { provide: TimepickerConfig, deps: [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.Injector }, { type: i0.NgZone }, { type: i1$1.AppDefaults }, { type: i1$1.App }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵ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.ɵɵdefineNgModule({ type: EpochModule }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+            BsDatepickerModule,
+            BsDropdownModule,
+            FormsModule,
+            TimepickerModule,
+            WmComponentsModule,
+            IMaskModule] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EpochModule, [{
+        type: NgModule,
+        args: [{
+                imports: [
+                    CommonModule,
+                    BsDatepickerModule,
+                    BsDropdownModule,
+                    FormsModule,
+                    TimepickerModule,
+                    WmComponentsModule,
+                    IMaskModule
+                ],
+                declarations: [...components],
+                exports: [...components]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(EpochModule, { declarations: [DateComponent,
+        DatetimeComponent,
+        TimeComponent,
+        DateTimePickerComponent,
+        TimePickerComponent,
+        PickerComponent,
+        PickerGroupComponent], imports: [CommonModule,
+        BsDatepickerModule,
+        BsDropdownModule,
+        FormsModule,
+        TimepickerModule,
+        WmComponentsModule,
+        IMaskModule], exports: [DateComponent,
+        DatetimeComponent,
+        TimeComponent,
+        DateTimePickerComponent,
+        TimePickerComponent,
+        PickerComponent,
+        PickerGroupComponent] }); })();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DateComponent, DateTimePickerComponent, DatetimeComponent, EpochModule, PickerComponent, PickerGroupComponent, TimeComponent, TimePickerComponent };
+//# sourceMappingURL=index.mjs.map