@wavemaker/app-ng-runtime 11.13.0-rc.6255 → 11.14.0-rc.226

package/components/input/epoch/base-date-time/bundles/index.umd.js

@@ -0,0 +1,1086 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ngx-bootstrap/dropdown'), require('ngx-bootstrap/timepicker'), require('@wm/core'), require('@wm/components/base'), require('@wm/components/input/base-form-custom'), require('ngx-bootstrap/datepicker'), require('@wm/components/input/epoch/date-time-picker'), require('lodash-es'), require('moment')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', 'ngx-bootstrap/dropdown', 'ngx-bootstrap/timepicker', '@wm/core', '@wm/components/base', '@wm/components/input/base-form-custom', 'ngx-bootstrap/datepicker', '@wm/components/input/epoch/date-time-picker', 'lodash-es', 'moment'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = global.wm.components.input || {}, global.wm.components.input.epoch = global.wm.components.input.epoch || {}, global.wm.components.input.epoch.baseDateTime = {}), global.ng.core, global.ng.common, global.dropdown, global.timepicker, global.wm.core, global.wm.components.base, global.wm.components.input.baseFormCustom, global.datepicker, global.wm.components.input.epoch.dateTimePicker, global._, global.momentLib));
+})(this, (function (exports, i0, common, dropdown, timepicker, core, base, baseFormCustom, datepicker, dateTimePicker, lodashEs, momentLib) { 'use strict';
+
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var momentLib__namespace = /*#__PURE__*/_interopNamespaceDefault(momentLib);
+
+    const moment = momentLib__namespace.default || window['moment'];
+    const CURRENT_DATE = 'CURRENT_DATE';
+    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    const DATEPICKER_DROPDOWN_OPTIONS = {
+        DEFAULT: 'default'
+    };
+    const DATAENTRYMODE_DROPDOWN_OPTIONS = {
+        DEFAULT: 'default'
+    };
+    // Providing meridians to the timepicker baesd on selected locale
+    function getTimepickerConfig(i18nService) {
+        return Object.assign(new timepicker.TimepickerConfig(), {
+            meridians: [i18nService.getLocalizedMessage("LABEL_AM") || "AM", i18nService.getLocalizedMessage("LABEL_PM") || "PM"]
+        });
+    }
+    class BaseDateTimeComponent extends baseFormCustom.BaseFormCustomComponent {
+        get timeZone() { return this.inj.get(core.AbstractI18nService).getTimezone(this); }
+        /**
+         * Safely replace internal meridians with localized display meridians only for string values
+         */
+        safeReplaceMeridians(value) {
+            if (typeof value === 'string') {
+                return value.replace(this.meridians[0], this.am).replace(this.meridians[1], this.pm);
+            }
+            return value;
+        }
+        constructor(inj, WIDGET_CONFIG, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            this.isReadOnly = false;
+            this.clicked = false;
+            this.showampmbuttons = true;
+            this.formatsByLocale = { 'timezone': '' };
+            /**
+             * This is an internal property used to map the containerClass, showWeekNumbers etc., to the bsDatepicker
+             */
+            this._dateOptions = new datepicker.BsDatepickerConfig();
+            this.i18nService = this.inj.get(core.AbstractI18nService);
+            this.invokeEventCallback('beforeload');
+            this.datePipe = this.inj.get(base.ToDatePipe);
+            this.selectedLocale = this.i18nService.getSelectedLocale();
+            this._dateOptions.todayPosition = 'left';
+            this._dateOptions.clearPosition = 'right';
+            this.meridians = common.getLocaleDayPeriods(this.selectedLocale, common.FormStyle.Format, common.TranslationWidth.Abbreviated);
+            this.loadNativeDateInput = core.isMobile() && !this.showcustompicker;
+            this.am = this.i18nService.getLocalizedMessage("LABEL_AM") || "AM";
+            this.pm = this.i18nService.getLocalizedMessage("LABEL_PM") || "PM";
+            this.cancelLocaleChangeSubscription = this.getAppInstance().subscribe("locale-changed", (locale) => {
+                this.datePipe.datePipe.locale = locale.angular;
+                this._dateOptions.todayButtonLabel = this.i18nService.getLocalizedMessage('LABEL_TODAY_DATE');
+                this._dateOptions.clearButtonLabel = this.i18nService.getLocalizedMessage('LABEL_CLEAR_DATE');
+            });
+        }
+        /**
+         * returns true if the input value is default (i.e open date picker on input click)
+         * @param1 dropdownvalue, user selected value (by default datepicker opens on input click)
+         * **/
+        isDropDownDisplayEnabledOnInput(dropdownvalue) {
+            return dropdownvalue === DATEPICKER_DROPDOWN_OPTIONS.DEFAULT;
+        }
+        /**
+         * returns true if the input value is default (i.e Data entry can be done either by selecting from the Date/DateTime/Time Picker or by entering  manually using the keyboard. )
+         * @param1 dropdownvalue, user selected value
+         * **/
+        isDataEntryModeEnabledOnInput(dropdownvalue) {
+            return dropdownvalue === DATAENTRYMODE_DROPDOWN_OPTIONS.DEFAULT;
+        }
+        /**
+         * This method is used to show validation message depending on the isNativePicker flag.
+         */
+        showValidation($event, displayValue, isNativePicker, msg) {
+            if (isNativePicker) {
+                console.warn('min max date validation failed ', msg);
+                return $($event.target).val(displayValue);
+            }
+        }
+        resetDisplayInput() {
+            $(this.nativeElement).find('.display-input').val('');
+        }
+        validate(c) {
+            if (this.invalidDateTimeFormat) {
+                return {
+                    invalidDateTimeFormat: {
+                        valid: false
+                    }
+                };
+            }
+            if (!lodashEs.isUndefined(this.dateNotInRange) && this.dateNotInRange) {
+                return {
+                    dateNotInRange: {
+                        valid: false
+                    },
+                };
+            }
+            if (!lodashEs.isUndefined(this.timeNotInRange) && this.timeNotInRange) {
+                return {
+                    timeNotInRange: {
+                        valid: false
+                    },
+                };
+            }
+            /* WMS-18269 | Extending the existing validation for 'required' */
+            if (this['show'] && this['required']) {
+                return !!c.value ? null : { required: true };
+            }
+            this.validateType = '';
+            return null;
+        }
+        /**
+         * This method is used to validate date pattern and time pattern
+         * If user selects one pattern in design time and if he tries to enter the date in another pattern then the device is throwing an error
+         */
+        formatValidation(newVal, inputVal, isNativePicker) {
+            const pattern = this.datepattern || this.timepattern;
+            const timeZone = this.timeZone;
+            const formattedDate = core.getFormattedDate(this.datePipe, newVal, pattern, timeZone, null, null, this);
+            inputVal = inputVal.trim();
+            if (inputVal) {
+                if (pattern === 'timestamp') {
+                    if (!lodashEs.isNaN(inputVal) && lodashEs.parseInt(inputVal) !== formattedDate) {
+                        this.invalidDateTimeFormat = true;
+                        this.validateType = 'incorrectformat';
+                        this.invokeOnChange(this.datavalue, undefined, false);
+                        return false;
+                    }
+                }
+                else {
+                    if (isNativePicker) {
+                        // format the date value only when inputVal is obtained from $event.target.value, as the format doesnt match.
+                        inputVal = core.getFormattedDate(this.datePipe, inputVal, pattern, timeZone);
+                    }
+                    if (inputVal?.replace(this.am, this.meridians[0])?.replace(this.pm, this.meridians[1]) !== 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(core.getDateObj(this.mindate)).startOf('day').toDate();
+                const maxDate = moment(core.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 && core.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 && core.getFormattedDate(this.datePipe, maxDate, this.datepattern, this.timeZone, null, null, this) === displayValue) {
+                        return $($event.target).val(displayValue);
+                    }
+                    this.dateNotInRange = true;
+                    this.validateType = 'maxdate';
+                    return this.showValidation($event, displayValue, isNativePicker, msg);
+                }
+                if (this.excludedates) {
+                    let excludeDatesArray;
+                    if (lodashEs.isString(this.excludedates)) {
+                        excludeDatesArray = lodashEs.split(this.excludedates, ',');
+                    }
+                    else {
+                        excludeDatesArray = this.excludedates;
+                    }
+                    excludeDatesArray = excludeDatesArray.map(d => core.getFormattedDate(this.datePipe, d, this.datepattern, this.timeZone, null, null, this));
+                    if (excludeDatesArray.indexOf(core.getFormattedDate(this.datePipe, dateTimeVal, this.datepattern, this.timeZone, null, null, this)) > -1) {
+                        this.dateNotInRange = true;
+                        this.validateType = 'excludedates';
+                        this.invokeOnChange(this.datavalue, undefined, false);
+                        return;
+                    }
+                }
+                if (this.excludedays) {
+                    const excludeDaysArray = lodashEs.split(this.excludedays, ',');
+                    const day = lodashEs.get(dateTimeVal, 'getDay') ? dateTimeVal.getDay() : dateTimeVal;
+                    if (excludeDaysArray.indexOf(day.toString()) > -1) {
+                        this.dateNotInRange = true;
+                        this.validateType = 'excludedays';
+                        this.invokeOnChange(this.datavalue, undefined, false);
+                        return;
+                    }
+                }
+            }
+            if (!isNativePicker) {
+                this.dateNotInRange = false;
+                this.invokeOnChange(this.datavalue, undefined, false);
+            }
+        }
+        /**
+         * This method is used to highlight the current date
+         */
+        hightlightToday(newDate) {
+            if (this.datavalue)
+                return;
+            const activeMonth = $(`.bs-datepicker-head .current`).first().text();
+            const activeYear = $(".bs-datepicker-head .current").eq(1).text();
+            const month = new Date(newDate).toLocaleString('default', { month: 'long' });
+            newDate.getFullYear().toString();
+            if (activeMonth == month && activeYear == new Date().getFullYear() && newDate.getDate() === new Date().getDate() && newDate.getMonth() === new Date().getMonth() && newDate.getFullYear() === new Date().getFullYear()) {
+                const toDay = new Date().getDate().toString();
+                lodashEs.filter($(`span:contains(${toDay})`).not('.is-other-month'), (obj) => {
+                    if ($(obj).text() === toDay) {
+                        $(obj).addClass('current-date text-info');
+                    }
+                });
+            }
+        }
+        /**
+         * This method is used to find the new date is from another year or not
+         * @param newDate - newly selected date value
+         */
+        isOtheryear(newDate) {
+            return (newDate.getMonth() === 0 && this.activeDate.getMonth() === 11) || (newDate.getMonth() === 11 && this.activeDate.getMonth() === 0);
+        }
+        showDatePickerModal(bsDataValue) {
+            this.activeDate = bsDataValue || 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
+         * @param fromKeyboardEvents
+         */
+        setActiveDateFocus(newDate, isMouseEvent, fromKeyboardEvents) {
+            this.setNextData(newDate);
+            this.clicked = false;
+            const activeMonth = this.activeDate.getMonth();
+            // check for keyboard event
+            if (!isMouseEvent) {
+                if (newDate.getMonth() < activeMonth) {
+                    this.isOtheryear(newDate) ? this.goToOtherMonthOryear('next', 'days') : this.goToOtherMonthOryear('previous', 'days');
+                }
+                else if (newDate.getMonth() > activeMonth) {
+                    this.isOtheryear(newDate) ? this.goToOtherMonthOryear('previous', 'days') : this.goToOtherMonthOryear('next', 'days');
+                }
+            }
+            setTimeout(() => {
+                const newDay = newDate.getDate().toString();
+                lodashEs.filter($(`span:contains(${newDay})`).not('.is-other-month'), (obj) => {
+                    $(`.bs-datepicker-head .current`).first().text();
+                    $(".bs-datepicker-head .current").eq(1).text();
+                    new Date().toLocaleString('default', { month: 'long' });
+                    if ($(obj).text() === newDay) {
+                        if ($(obj).hasClass('selected')) {
+                            $(obj).parent().attr('aria-selected', 'true');
+                        }
+                        $(obj).attr('aria-label', moment(newDate).format('dddd, MMMM Do YYYY'));
+                        $('[bsdatepickerdaydecorator]').not('.is-other-month').attr('tabindex', '-1');
+                        $(obj).attr('tabindex', '0');
+                        $(obj).focus();
+                        this.activeDate = newDate;
+                    }
+                });
+                if (newDate.getDate() === new Date().getDate() && newDate.getMonth() === new Date().getMonth() && newDate.getFullYear() === new Date().getFullYear()) {
+                    this.hightlightToday(newDate);
+                }
+            });
+        }
+        getMonth(date, inc) {
+            const currentMonth = new Date(date);
+            let month = currentMonth.getMonth();
+            const year = currentMonth.getFullYear();
+            month += inc;
+            const newDate = new Date(year, month);
+            const fullMonth = newDate.toLocaleString('en-US', { month: 'long' });
+            return {
+                date: newDate,
+                fullMonth: fullMonth
+            };
+        }
+        /**
+         * This method sets focus for months/days depending on the loaded datepicker table
+         */
+        setFocusForMonthOrDay() {
+            const activeMonthOrYear = $(`.bs-datepicker-head .current`).first().text();
+            const datePickerBody = $('.bs-datepicker-body');
+            if (datePickerBody.find('table.months').length > 0) {
+                if (lodashEs.parseInt(activeMonthOrYear) !== this.activeDate.getFullYear()) {
+                    this.loadMonths();
+                }
+                const newDate = new Date(lodashEs.parseInt(activeMonthOrYear), this.activeDate.getMonth(), this.activeDate.getDate());
+                this.setActiveMonthFocus(newDate, true);
+            }
+            else if (datePickerBody.find('table.days').length > 0) {
+                const newMonth = months.indexOf(activeMonthOrYear);
+                if (newMonth !== this.activeDate.getMonth()) {
+                    this.loadDays();
+                }
+                const newDate = new Date(this.activeDate.getFullYear(), newMonth, 1);
+                this.setActiveDateFocus(newDate, true);
+            }
+        }
+        /**
+         * This method sets focus for months/years depending on the loaded datepicker table
+         */
+        setFocusForCurrentMonthOryear() {
+            const datePickerBody = $('.bs-datepicker-body');
+            if (datePickerBody.find('table.months').length > 0) {
+                this.loadMonths();
+                this.setActiveMonthFocus(this.activeDate, true);
+            }
+            else if (datePickerBody.find('table.years').length > 0) {
+                this.loadYears();
+                this.setActiveYearFocus(this.activeDate, true);
+            }
+        }
+        /**
+         * This method sets focus for months/years/days depending on the loaded datepicker table
+         */
+        setFocusForDate(count) {
+            const datePickerBody = $('.bs-datepicker-body');
+            if (datePickerBody.find('table.months').length > 0) {
+                this.loadMonths();
+                const newDate = new Date(this.activeDate.getFullYear() + count, 0, this.activeDate.getDate());
+                this.setActiveMonthFocus(newDate, true);
+            }
+            else if (datePickerBody.find('table.years').length > 0) {
+                this.loadYears();
+                const startYear = datePickerBody.find('table.years span').first().text();
+                const newDate = new Date(lodashEs.parseInt(startYear), this.activeDate.getMonth(), this.activeDate.getDate());
+                this.setActiveYearFocus(newDate, true);
+            }
+            else if (datePickerBody.find('table.days').length > 0) {
+                this.loadDays();
+                const [monthText, yearText] = $('.bs-datepicker-head .current').map((_, el) => $(el).text().trim()).get();
+                const monthIndex = new Date(`${monthText} 1, ${yearText}`).getMonth();
+                const year = lodashEs.parseInt(yearText, 10);
+                const inMonth = (d) => d.getFullYear() === year && d.getMonth() === monthIndex;
+                let newDate = this.mindate && inMonth(new Date(this.mindate)) ? new Date(this.mindate) : this.maxdate && inMonth(new Date(this.maxdate)) ? new Date(this.maxdate) : new Date(year, monthIndex, 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}`);
+            core.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, undefined, true);
+        }
+        setNextData(nextDate) {
+            this.next = this.getMonth(nextDate, 1);
+            this.prev = this.getMonth(nextDate, -1);
+        }
+        /**
+         * This method is used to add tabindex, keybord and mouse events for days
+         */
+        loadDays() {
+            setTimeout(() => {
+                $('[bsdatepickerdaydecorator]').not('.is-other-month').attr('tabindex', '0');
+                // if (this.clicked === false) {
+                //     this.next = this.getMonth(this.activeDate, 1);
+                //     this.prev = this.getMonth(this.activeDate, -1);
+                // }
+                this.addKeyBoardEventsForDays();
+                this.addDatepickerMouseEvents();
+            });
+        }
+        /**
+         * This method sets keyboard events for days
+         */
+        addKeyBoardEventsForDays() {
+            const datePickerBody = $('.bs-datepicker-body');
+            datePickerBody.keydown((event) => {
+                let newdate;
+                if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    newdate = moment(this.activeDate).add(7, 'days').toDate();
+                    this.setActiveDateFocus(newdate);
+                }
+                else if (event.ctrlKey && event.key === 'ArrowUp') {
+                    // clicking on table header month name to load list of months
+                    $('.bs-datepicker-head .current').first().click();
+                    this.loadMonths();
+                    this.setActiveMonthFocus(this.activeDate);
+                }
+                else if (event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    newdate = moment(this.activeDate).add(-7, 'days').toDate();
+                    this.setActiveDateFocus(newdate);
+                }
+                else if (event.key === 'ArrowLeft') {
+                    newdate = moment(this.activeDate).add(-1, 'days').toDate();
+                    this.setActiveDateFocus(newdate);
+                }
+                else if (event.key === 'ArrowRight') {
+                    newdate = moment(this.activeDate).add(1, 'days').toDate();
+                    this.setActiveDateFocus(newdate);
+                }
+                else if (event.key === 'PageUp') {
+                    event.preventDefault();
+                    newdate = moment(this.activeDate).add(-1, 'month').toDate();
+                    this.setActiveDateFocus(newdate);
+                }
+                else if (event.key === 'PageDown') {
+                    event.preventDefault();
+                    newdate = moment(this.activeDate).add(1, 'month').toDate();
+                    this.setActiveDateFocus(newdate);
+                }
+                else if (event.key === 'Enter') {
+                    if ($(document.activeElement).hasClass('disabled')) {
+                        return;
+                    }
+                    $(document.activeElement).click();
+                    this.elementScope.hideDatepickerDropdown();
+                    const displayInputElem = this.elementScope.nativeElement.querySelector('.display-input');
+                    setTimeout(() => displayInputElem.focus());
+                }
+            });
+            this.focusBlurDatePickerHeadButtons();
+        }
+        focusBlurDatePickerHeadButtons() {
+            const datePickerHeadButton = $('.bs-datepicker-head button');
+            datePickerHeadButton.on('focus', function () { $(this).css('background-color', '#9AA0A3'); });
+            datePickerHeadButton.on('blur', function () { $(this).css('background-color', ''); });
+        }
+        /**
+         * This method is used to add tabindex, keybord and mouse events for months
+         */
+        loadMonths() {
+            setTimeout(() => {
+                this.addKeyBoardEventsForMonths();
+                this.addDatepickerMouseEvents();
+            });
+        }
+        /**
+         * This method sets keyboard events for months
+         */
+        addKeyBoardEventsForMonths() {
+            $('.bs-datepicker-body').keydown((event) => {
+                let newdate;
+                if ((event.ctrlKey && event.key === 'ArrowDown') || event.key === 'Enter') {
+                    if ($(document.activeElement).parent().hasClass('disabled')) {
+                        return;
+                    }
+                    $(document.activeElement).click();
+                    this.loadDays();
+                    const newDate = new Date(this.activeDate.getFullYear(), this.activeDate.getMonth(), 1);
+                    this.setActiveDateFocus(newDate);
+                }
+                else if (event.ctrlKey && event.key === 'ArrowUp') {
+                    // clicking on table header year to load list of years
+                    $('.bs-datepicker-head .current').first().click();
+                    this.loadYears();
+                    this.setActiveYearFocus(this.activeDate);
+                }
+                else if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    newdate = moment(this.activeDate).add(3, 'month').toDate();
+                    this.setActiveMonthFocus(newdate);
+                }
+                else if (event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    newdate = moment(this.activeDate).add(-3, 'month').toDate();
+                    this.setActiveMonthFocus(newdate);
+                }
+                else if (event.key === 'ArrowLeft') {
+                    newdate = moment(this.activeDate).add(-1, 'month').toDate();
+                    this.setActiveMonthFocus(newdate);
+                }
+                else if (event.key === 'ArrowRight') {
+                    newdate = moment(this.activeDate).add(1, 'month').toDate();
+                    this.setActiveMonthFocus(newdate);
+                }
+            });
+            this.focusBlurDatePickerHeadButtons();
+        }
+        /**
+         * This method is used to add tabindex, keybord and mouse events for years
+         */
+        loadYears() {
+            setTimeout(() => {
+                this.addKeyBoardEventsForYears();
+                this.addDatepickerMouseEvents();
+            });
+        }
+        /**
+         * This method is used to set focus for active month
+         */
+        setActiveMonthFocus(newDate, isMoouseEvent) {
+            this.setNextData(newDate);
+            const newMonth = months[newDate.getMonth()];
+            // check for keyboard event
+            if (!isMoouseEvent) {
+                if (newDate.getFullYear() < this.activeDate.getFullYear()) {
+                    this.goToOtherMonthOryear('previous', 'month');
+                }
+                else if (newDate.getFullYear() > this.activeDate.getFullYear()) {
+                    this.goToOtherMonthOryear('next', 'month');
+                }
+            }
+            setTimeout(() => {
+                $(`.bs-datepicker-body table.months span`).attr('tabindex', '-1');
+                $(`.bs-datepicker-body table.months span:contains(${newMonth})`).attr('tabindex', '0');
+                $(`.bs-datepicker-body table.months span:contains(${newMonth})`).focus();
+                this.activeDate = newDate;
+            });
+        }
+        /**
+         * This method sets keyboard events for years
+         */
+        addKeyBoardEventsForYears() {
+            $('.bs-datepicker-body').keydown((event) => {
+                let newdate;
+                if ((event.ctrlKey && event.key === 'ArrowDown') || event.key === 'Enter') {
+                    if ($(document.activeElement).parent().hasClass('disabled')) {
+                        return;
+                    }
+                    $(document.activeElement).click();
+                    this.loadMonths();
+                    this.setActiveMonthFocus(this.activeDate);
+                }
+                else if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    newdate = moment(this.activeDate).add(4, 'year').toDate();
+                    this.setActiveYearFocus(newdate);
+                }
+                else if (event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    newdate = moment(this.activeDate).add(-4, 'year').toDate();
+                    this.setActiveYearFocus(newdate);
+                }
+                else if (event.key === 'ArrowLeft') {
+                    newdate = moment(this.activeDate).add(-1, 'year').toDate();
+                    this.setActiveYearFocus(newdate);
+                }
+                else if (event.key === 'ArrowRight') {
+                    newdate = moment(this.activeDate).add(1, 'year').toDate();
+                    this.setActiveYearFocus(newdate);
+                }
+            });
+            this.focusBlurDatePickerHeadButtons();
+        }
+        /**
+         * This method is used to set focus for active year
+         */
+        setActiveYearFocus(newDate, isMouseEvent) {
+            const newYear = newDate.getFullYear();
+            const datePickerYears = $('.bs-datepicker-body table.years span');
+            const startYear = datePickerYears.first().text();
+            const endYear = datePickerYears.last().text();
+            // check for keyboard event
+            if (!isMouseEvent) {
+                if (newDate.getFullYear() < lodashEs.parseInt(startYear)) {
+                    this.goToOtherMonthOryear('previous', 'year');
+                }
+                else if (newDate.getFullYear() > lodashEs.parseInt(endYear)) {
+                    this.goToOtherMonthOryear('next', 'year');
+                }
+            }
+            setTimeout(() => {
+                $(`.bs-datepicker-body table.years span`).attr('tabindex', '-1');
+                $(`.bs-datepicker-body table.years span:contains(${newYear})`).attr('tabindex', '0');
+                $(`.bs-datepicker-body table.years span:contains(${newYear})`).focus();
+                this.activeDate = newDate;
+            });
+        }
+        /**
+         * This method sets focus for timepicker first input field(hours field) while opening time picker
+         * @param scope - scope of the time picker widget
+         */
+        focusTimePickerPopover(scope) {
+            this.elementScope = scope;
+            // setTimeout is used so that by then time input has the updated value. focus is setting back to the input field
+            this.elementScope.ngZone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    $('timepicker .form-group').first().find('> input.form-control').focus();
+                });
+            });
+        }
+        /**
+         * This function sets the keyboard events to Timepicker popup
+         */
+        bindTimePickerKeyboardEvents() {
+            setTimeout(() => {
+                const $timepickerPopup = $('body').find('> bs-dropdown-container timepicker');
+                $timepickerPopup.attr('tabindex', 0);
+                this.addEventsOnTimePicker($timepickerPopup);
+            });
+        }
+        focusOnInputEl() {
+            if ($(this.nativeElement).closest('.caption-floating').length > 0) {
+                setTimeout(() => {
+                    $(this.nativeElement).find('.app-textbox').focus();
+                }, 100);
+            }
+        }
+        /**
+         * This function checks whether the given date is valid or not
+         * @returns boolean value, true if date is valid else returns false
+         */
+        isValidDate(date) {
+            return date && date instanceof Date && !isNaN(date.getTime());
+        }
+        /**
+         * This function checks whether the given time is valid or not
+         */
+        timeFormatValidation() {
+            const enteredDate = $(this.nativeElement).find('input').val()?.replace(this.am, this.meridians[0])?.replace(this.pm, this.meridians[1]);
+            const newVal = core.getNativeDateObject(enteredDate, { meridians: this.meridians, pattern: this.datepattern });
+            if (!this.formatValidation(newVal, enteredDate)) {
+                return;
+            }
+            this.invalidDateTimeFormat = false;
+            this.invokeOnChange(this.datavalue, undefined, false);
+        }
+        updateTimeValue(el, value, fieldName) {
+            let minEl = el.find('input[aria-label="minutes"]');
+            let secEl = el.find('input[aria-label="seconds"]');
+            minEl.value = secEl.value = '00';
+            if (value.length < 2) {
+                setTimeout(() => {
+                    fieldName === 'minutes' ? this.bsTimePicker.updateMinutes(minEl) : this.bsTimePicker.updateSeconds(secEl);
+                }, 500);
+            }
+            else {
+                fieldName === 'minutes' ? this.bsTimePicker.updateMinutes(minEl) : this.bsTimePicker.updateSeconds(secEl);
+            }
+        }
+        /**
+         * This function sets the events to given element
+         * @param $el - element on which the event is added
+         */
+        addEventsOnTimePicker($el) {
+            const inputFields = $el.find('.bs-timepicker-field');
+            // WMS-19382: update minutes and seconds to 0 when we enter hour value
+            inputFields.first().on('keyup', evt => {
+                const hourValue = evt.target.value;
+                lodashEs.forEach(inputFields, (field, index) => {
+                    // @ts-ignore
+                    if (evt.target !== field && field.value === '' && hourValue.length) {
+                        const fieldName = index === 1 ? 'minutes' : 'seconds';
+                        this.updateTimeValue($el, hourValue, fieldName);
+                    }
+                });
+            });
+            this.removeKeyupListener = () => {
+                inputFields.first().off('keyup');
+            };
+            $el.on('keydown', event => {
+                const $target = $(event.target);
+                const $parent = $target.parent();
+                const elementScope = this.elementScope;
+                let stopPropogation, preventDefault;
+                if (event.key === 'Escape') {
+                    elementScope.hideTimepickerDropdown();
+                }
+                if ($target.hasClass('bs-timepicker-field')) {
+                    if ($parent.is(':first-child')) {
+                        if ((event.shiftKey && event.key === 'Tab') || event.key === 'Enter' || event.key === 'Escape') {
+                            elementScope.setIsTimeOpen(false);
+                            this.focus();
+                            stopPropogation = true;
+                            preventDefault = true;
+                        }
+                    }
+                    else if ($parent.is(':last-child') || ($parent.next().next().find('button.disabled').length)) {
+                        if (event.key === 'Tab' || event.key === 'Escape' || event.key === 'Enter') {
+                            elementScope.setIsTimeOpen(false);
+                            this.focus();
+                            stopPropogation = true;
+                            preventDefault = true;
+                        }
+                    }
+                    else {
+                        if (event.key === 'Enter' || event.key === 'Escape') {
+                            elementScope.setIsTimeOpen(false);
+                            this.focus();
+                            stopPropogation = true;
+                            preventDefault = true;
+                        }
+                    }
+                    if (stopPropogation) {
+                        event.stopPropagation();
+                    }
+                    if (preventDefault) {
+                        event.preventDefault();
+                    }
+                    if (elementScope.mintime && elementScope.maxtime && !this.isValidDate(elementScope.bsTimeValue)) {
+                        if (event.key === 'ArrowDown') {
+                            elementScope.bsTimeValue = elementScope.maxTime;
+                        }
+                        else if (event.key === 'ArrowUp') {
+                            elementScope.bsTimeValue = elementScope.minTime;
+                        }
+                    }
+                    if (event.key === 'Tab') {
+                        this.invalidDateTimeFormat = false;
+                        this.invokeOnChange(this.datavalue, undefined, false);
+                        const pattern = this.datepattern || this.timepattern;
+                        if (core.getFormattedDate(elementScope.datePipe, elementScope.bsTimeValue, pattern, this.timeZone, null, null, this) === elementScope.displayValue) {
+                            $(this.nativeElement).find('.display-input').val(elementScope.displayValue);
+                        }
+                    }
+                    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                        this.timeFormatValidation();
+                    }
+                }
+                else if ($target.hasClass('btn-default')) {
+                    if (event.key === 'Tab' || event.key === 'Escape') {
+                        elementScope.setIsTimeOpen(false);
+                        this.focus();
+                    }
+                }
+            });
+            $el.find('a').on('click', evt => {
+                const elementScope = this.elementScope;
+                const $target = $(evt.target);
+                if (elementScope.mintime && elementScope.maxtime && !this.isValidDate(elementScope.bsTimeValue)) {
+                    if ($target.find('span').hasClass('bs-chevron-down')) {
+                        elementScope.bsTimeValue = elementScope.maxTime;
+                    }
+                    else if ($target.find('span').hasClass('bs-chevron-up')) {
+                        elementScope.bsTimeValue = elementScope.minTime;
+                    }
+                }
+                this.timeFormatValidation();
+            });
+        }
+        updateFormat(pattern) {
+            if (pattern === 'datepattern') {
+                this._dateOptions.dateInputFormat = this.datepattern;
+                this.showseconds = lodashEs.includes(this.datepattern, 's');
+                this.ismeridian = lodashEs.includes(this.datepattern, 'h');
+            }
+            else if (pattern === 'timepattern') {
+                this.showseconds = lodashEs.includes(this.timepattern, 's');
+                this.ismeridian = lodashEs.includes(this.timepattern, 'h');
+            }
+        }
+        getMobileInput() {
+            return this.nativeElement.querySelector('.mobile-input');
+        }
+        onDateTimeInputBlur() {
+            // removing the opacity on blur of the mobile widget
+            const displayInputElem = this.getMobileInput();
+            if (displayInputElem) {
+                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) {
+                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();
+            }
+        }
+        /**
+         * 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);
+                const current = new Date();
+                if (prevMon.date.getMonth() === current.getMonth() && prevMon.date.getFullYear() === current.getFullYear()) {
+                    this.hightlightToday(new Date());
+                }
+                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);
+                const current = new Date();
+                if (nextMon.date.getMonth() === current.getMonth() && nextMon.date.getFullYear() === current.getFullYear()) {
+                    this.hightlightToday(current);
+                }
+                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());
+            }
+        }
+        getPeriod() {
+            if (!this.elementScope.bsTimeValue)
+                return 'AM';
+            const hours = this.elementScope.bsTimeValue.getHours();
+            return hours >= 12 ? 'PM' : 'AM';
+        }
+        setPeriod(period) {
+            const current = this.elementScope.bsTimeValue;
+            if (!current || !(current instanceof Date))
+                return;
+            const updatedDate = new Date(current);
+            const hours = updatedDate.getHours();
+            if (period === 'AM' && hours >= 12) {
+                updatedDate.setHours(hours - 12);
+            }
+            else if (period === 'PM' && hours < 12) {
+                updatedDate.setHours(hours + 12);
+            }
+            if (this.elementScope.widgetType === 'wm-time') {
+                const isInvalid = this.elementScope.minTime && this.elementScope.maxTime && (updatedDate < this.elementScope.minTime || updatedDate > this.elementScope.maxTime);
+                if (!isInvalid)
+                    this.elementScope.onTimeChange(updatedDate);
+            }
+            else {
+                this.elementScope.onModelUpdate(updatedDate);
+            }
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'tabindex') {
+                return;
+            }
+            if (key === 'showampmbuttons') {
+                this.showampmbuttons = nv;
+            }
+            if (key === 'required') {
+                this._onChange(this.datavalue);
+                return;
+            }
+            if (key === 'datepattern') {
+                this.updateFormat(key);
+            }
+            else if (key === 'viewmode') {
+                this._dateOptions.minMode = this.viewmode;
+            }
+            else if (key === 'showweeks') {
+                this._dateOptions.showWeekNumbers = nv;
+            }
+            else if (key === 'mindate') {
+                this._dateOptions.minDate = (nv === CURRENT_DATE) ? this.mindate = new Date() : core.getDateObj(nv);
+                this.minDateMaxDateValidationOnInput(this.datavalue);
+            }
+            else if (key === 'maxdate') {
+                this._dateOptions.maxDate = (nv === CURRENT_DATE) ? this.maxdate = new Date() : core.getDateObj(nv);
+                this.minDateMaxDateValidationOnInput(this.datavalue);
+            }
+            else if (key === 'excludedates' || key === 'excludedays') {
+                if (this.excludedays) {
+                    this.excludedDaysToDisable = lodashEs.split(this.excludedays, ',').map((day) => {
+                        return +day;
+                    });
+                }
+                if (this.excludedates) {
+                    this.excludedDatesToDisable = this.excludedates;
+                    if (lodashEs.isString(this.excludedates)) {
+                        // @ts-ignore
+                        this.excludedDatesToDisable = lodashEs.split(this.excludedates, ',');
+                    }
+                    this.excludedDatesToDisable = this.excludedDatesToDisable.map(d => core.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 = core.isMobile() && !this.showcustompicker;
+            }
+            else if (key === 'adaptiveposition') {
+                this._dateOptions.adaptivePosition = nv;
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        ngAfterViewInit() {
+            super.ngAfterViewInit();
+            this.containerTarget = base.getContainerTargetClass(this.nativeElement);
+            this.isReadOnly = this.dataentrymode != 'undefined' && !this.isDataEntryModeEnabledOnInput(this.dataentrymode);
+            // this mobileinput width varies in ios hence setting width here.
+            const mobileInput = this.getMobileInput();
+            if (mobileInput) {
+                setTimeout(() => {
+                    mobileInput.style.width = '100%';
+                    mobileInput.style.height = '100%';
+                });
+            }
+        }
+        ngOnDestroy() {
+            if (this.dateOnShowSubscription) {
+                this.dateOnShowSubscription.unsubscribe();
+            }
+            if (this.cancelLocaleChangeSubscription) {
+                this.cancelLocaleChangeSubscription();
+            }
+            super.ngOnDestroy();
+        }
+        ngOnDetach() {
+            this.datetimepickerComponent?.hideModal();
+        }
+        setTimezone(locale) {
+            this.i18nService.setTimezone(locale, this);
+        }
+        ngOnInit() {
+            super.ngOnInit();
+            if (this.dateNotInRange || this.timeNotInRange || this.invalidDateTimeFormat) {
+                const formattedDisplay = core.getFormattedDate(this.datePipe, this.datavalue, this.datepattern || this.timepattern, this.timeZone, null, null, this);
+                const value = this.datavalue;
+                this.datavalue = undefined;
+                setTimeout(() => {
+                    $(this.nativeElement).find('.display-input').val(this.safeReplaceMeridians(formattedDisplay));
+                    this.minDateMaxDateValidationOnInput(formattedDisplay);
+                    this.invokeOnChange(value, {}, false);
+                });
+            }
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: BaseDateTimeComponent, deps: "invalid", target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: BaseDateTimeComponent, viewQueries: [{ propertyName: "bsDropdown", first: true, predicate: dropdown.BsDropdownDirective, descendants: true }, { propertyName: "bsTimePicker", first: true, predicate: timepicker.TimepickerComponent, descendants: true }, { propertyName: "datetimepickerComponent", first: true, predicate: dateTimePicker.DateTimePickerComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: BaseDateTimeComponent, decorators: [{
+                type: i0.Directive
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { bsDropdown: [{
+                    type: i0.ViewChild,
+                    args: [dropdown.BsDropdownDirective]
+                }], bsTimePicker: [{
+                    type: i0.ViewChild,
+                    args: [timepicker.TimepickerComponent]
+                }], datetimepickerComponent: [{
+                    type: i0.ViewChild,
+                    args: [dateTimePicker.DateTimePickerComponent]
+                }] } });
+
+    exports.BaseDateTimeComponent = BaseDateTimeComponent;
+    exports.getTimepickerConfig = getTimepickerConfig;
+
+}));