@wavemaker-ai/app-ng-runtime 1.0.0-rc.309

package/components/input/epoch/date/index.d.ts

@@ -0,0 +1,64 @@
+import { IMaskDirective } from 'angular-imask';
+import * as i0 from '@angular/core';
+import { Injector, ChangeDetectorRef } from '@angular/core';
+import { AppDefaults } from '@wm/core';
+import { BaseDateTimeComponent } from '@wm/components/input/epoch/base-date-time';
+
+declare class DateComponent extends BaseDateTimeComponent {
+    private cdRef;
+    private appDefaults;
+    static initializeProps: void;
+    bsDataValue: any;
+    showdropdownon: string;
+    private dateContainerCls;
+    isOpen: boolean;
+    private isEnterPressedOnDateInput;
+    private _bsDefaultLoadCheck;
+    hint: string;
+    arialabel: string;
+    private deregisterEventListener;
+    private isCurrentDate;
+    private focusTrap;
+    private showdateformatasplaceholder;
+    mask: any;
+    private maskDateInputFormat;
+    private maskDateInputFormatPlaceholder;
+    get timestamp(): any;
+    get dateInputFormat(): string;
+    get displayValue(): any;
+    get nativeDisplayValue(): any;
+    get datavalue(): any;
+    set datavalue(newVal: any);
+    protected bsDatePickerDirective: any;
+    imask: IMaskDirective<any>;
+    constructor(inj: Injector, cdRef: ChangeDetectorRef, appDefaults: AppDefaults, explicitContext: any);
+    /**
+     * This is an internal method triggered when the date input changes
+     */
+    onDisplayDateChange($event: any, isNativePicker?: boolean): void;
+    private setDataValue;
+    onDatePickerOpen(): void;
+    onInputBlur($event: any): void;
+    updateIMask(): void;
+    hideDatepickerDropdown(): void;
+    protected handleEvent(node: HTMLElement, eventName: string, callback: Function, locals: any): void;
+    /**
+     * This is an internal method used to toggle the dropdown of the date widget
+     */
+    toggleDpDropdown($event: any, skipFocus?: boolean): void;
+    private addBodyClickListener;
+    /**
+     * This is an internal method triggered when pressing key on the date input
+     */
+    onDisplayKeydown(event: any): void;
+    /**
+     * This is an internal method triggered when the date selection changes
+     */
+    onDateChange(newVal: any): void;
+    onPropertyChange(key: string, nv: any, ov?: any): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateComponent, [null, null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateComponent, "[wmDate]", never, {}, {}, never, never, true, never>;
+}
+
+export { DateComponent };

package/components/input/epoch/date/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@wm/components/input/epoch/date",
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
+  "module": "fesm2022/index.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/index.mjs"
+    }
+  }
+}

package/components/input/epoch/date-time/.npmignore

@@ -0,0 +1,2 @@
+# Nested package.json's are only needed for development.
+**/package.json

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

@@ -0,0 +1,519 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/forms'), require('@angular/common'), require('@wm/components/input/epoch/date-time-picker'), require('@angular/core'), require('ngx-bootstrap/datepicker'), require('ngx-bootstrap/timepicker'), require('@wm/core'), require('@wm/components/base'), require('@wm/components/input/epoch/base-date-time'), require('lodash-es'), require('ngx-bootstrap/dropdown'), require('moment')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/forms', '@angular/common', '@wm/components/input/epoch/date-time-picker', '@angular/core', 'ngx-bootstrap/datepicker', 'ngx-bootstrap/timepicker', '@wm/core', '@wm/components/base', '@wm/components/input/epoch/base-date-time', 'lodash-es', 'ngx-bootstrap/dropdown', '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.dateTime = {}), global.ng.forms, global.ng.common, global.wm.components.input.epoch.dateTimePicker, global.ng.core, global.ngxBootstrap.datepicker, global.ngxBootstrap.timepicker, global.wm.core, global.wm.components.base, global.wm.components.input.epoch.baseDateTime, global._, global.ngxBootstrap.dropdown, global.momentLib));
+})(this, (function (exports, i2, i6, dateTimePicker, i0, i4, i5, i1, base, baseDateTime, lodashEs, i3, 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 i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i6__namespace = /*#__PURE__*/_interopNamespaceDefault(i6);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i4__namespace = /*#__PURE__*/_interopNamespaceDefault(i4);
+    var i5__namespace = /*#__PURE__*/_interopNamespaceDefault(i5);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
+    var momentLib__namespace = /*#__PURE__*/_interopNamespaceDefault(momentLib);
+
+    const dateTimeProps = new Map([
+        ['autofocus', base.PROP_BOOLEAN],
+        ['class', base.PROP_STRING],
+        ['dataentrymode', { value: 'default', ...base.PROP_STRING }],
+        ['datavaluesource', base.PROP_ANY],
+        ['datavalue', base.PROP_STRING],
+        ['datepattern', base.PROP_STRING],
+        ['disabled', base.PROP_BOOLEAN],
+        ['excludedays', base.PROP_STRING],
+        ['excludedates', base.PROP_STRING],
+        ['hint', base.PROP_STRING],
+        ['arialabel', base.PROP_STRING],
+        ['hourstep', { value: 1, ...base.PROP_NUMBER }],
+        ['maxdate', base.PROP_STRING],
+        ['mindate', base.PROP_STRING],
+        ['minutestep', { value: 15, ...base.PROP_NUMBER }],
+        ['name', base.PROP_STRING],
+        ['outputformat', { value: 'timestamp', ...base.PROP_STRING }],
+        ['placeholder', { value: 'Select date time', ...base.PROP_STRING }],
+        ['readonly', base.PROP_BOOLEAN],
+        ['required', base.PROP_BOOLEAN],
+        ['secondsstep', { value: 1, ...base.PROP_NUMBER }],
+        ['shortcutkey', base.PROP_STRING],
+        ['show', { value: true, ...base.PROP_BOOLEAN }],
+        ['showdropdownon', { value: 'default', ...base.PROP_STRING }],
+        ['showbuttonbar', base.PROP_BOOLEAN],
+        ['showcustompicker', { value: false, ...base.PROP_BOOLEAN }],
+        ['showindevice', { displayType: 'inline-block', value: 'all', ...base.PROP_STRING }],
+        ['showweeks', base.PROP_BOOLEAN],
+        ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+        ['timestamp', base.PROP_STRING],
+        ['selectfromothermonth', { value: true, ...base.PROP_BOOLEAN }],
+        ['todaybutton', { value: true, ...base.PROP_BOOLEAN }],
+        ['clearbutton', { value: true, ...base.PROP_BOOLEAN }],
+        ['adaptiveposition', { value: true, ...base.PROP_BOOLEAN }],
+        ['todaybuttonlabel', { value: 'LABEL_TODAY_DATE', ...base.PROP_STRING }],
+        ['clearbuttonlabel', { value: 'LABEL_CLEAR_DATE', ...base.PROP_STRING }],
+        ['showampmbuttons', { value: false, ...base.PROP_BOOLEAN }]
+    ]);
+    const registerProps = () => {
+        base.register('wm-datetime', dateTimeProps);
+        base.registerFormWidget(i1.FormWidgetType.DATETIME, new Map(dateTimeProps));
+        base.registerFormWidget(i1.FormWidgetType.TIMESTAMP, new Map(dateTimeProps));
+    };
+
+    const moment = momentLib__namespace.default || window['moment'];
+    const DEFAULT_CLS = 'app-datetime input-group';
+    const WIDGET_CONFIG = { widgetType: 'wm-datetime', hostClass: DEFAULT_CLS };
+    const CURRENT_DATE = 'CURRENT_DATE';
+    class DatetimeComponent extends baseDateTime.BaseDateTimeComponent {
+        static { this.initializeProps = registerProps(); }
+        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() {
+            const display = i1.getFormattedDate(this.datePipe, this.proxyModel, this.dateInputFormat, this.timeZone, this.key, this.isCurrentDate, this) || '';
+            return this.safeReplaceMeridians(display);
+        }
+        get nativeDisplayValue() {
+            return i1.getFormattedDate(this.datePipe, this.proxyModel, 'yyyy-MM-ddTHH:mm:ss', this.timeZone, this.key, this.isCurrentDate, this) || '';
+        }
+        // @ts-ignore
+        get datavalue() {
+            if (this.isCurrentDate && !this.proxyModel) {
+                return CURRENT_DATE;
+            }
+            return i1.getFormattedDate(this.datePipe, this.proxyModel, this.outputformat, this.timeZone, null, null, this);
+        }
+        /**Todo[Shubham]: needs to be redefined
+         * This property sets the default value for the date selection
+         */
+        // @ts-ignore
+        set datavalue(newVal) {
+            if (newVal === CURRENT_DATE) {
+                this.isCurrentDate = true;
+                this.setTimeInterval();
+            }
+            else {
+                this.proxyModel = newVal ? i1.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, explicitContext);
+            this.ngZone = ngZone;
+            this.cdRef = cdRef;
+            this.appDefaults = appDefaults;
+            this.isEnterPressedOnDateInput = false;
+            /**
+             * This property checks if the timePicker is Open
+             */
+            this.isTimeOpen = false;
+            /**
+             * This property checks if the datePicker is Open
+             */
+            this.isDateOpen = false;
+            /**
+             * This property is set to TRUE if the time component value is set to CURRENT_TIME; In this case the timer keeps changing the time value until the widget is available.
+             */
+            this.isCurrentDate = false;
+            this._debouncedOnChange = lodashEs.debounce(this.invokeOnChange, 10);
+            this.registerDestroyListener(() => this.clearTimeInterval());
+            base.styler(this.nativeElement, this);
+            this.app = app;
+            this.dateContainerCls = `app-date-${this.widgetId}`;
+            this._dateOptions.containerClass = `app-date ${this.dateContainerCls}`;
+            this._dateOptions.showWeekNumbers = false;
+            this._dateOptions.customTodayClass = 'current-date';
+            this.datepattern = this.appDefaults.dateTimeFormat || i1.getDisplayDateTimeFormat(i1.FormWidgetType.DATETIME);
+            this.updateFormat('datepattern');
+        }
+        /**
+         * This is an internal method used to maintain a time interval to update the time model when the data value is set to CURRENT_TIME
+         */
+        setTimeInterval() {
+            if (this.timeinterval) {
+                return;
+            }
+            this.timeinterval = setInterval(() => {
+                const currentTime = this.timeZone ? i1.getMomentLocaleObject(this.timeZone) : new Date();
+                this.onModelUpdate(currentTime);
+            }, 1000);
+        }
+        /**
+         * This is an internal method used to clear the time interval created
+         */
+        clearTimeInterval() {
+            if (this.timeinterval) {
+                clearInterval(this.timeinterval);
+                this.timeinterval = null;
+            }
+        }
+        /**
+         * This is an internal method to toggle the time picker
+         */
+        toggleTimePicker(newVal, $event) {
+            if (this.loadNativeDateInput) {
+                this.onDateTimeInputFocus();
+                return;
+            }
+            this.isTimeOpen = newVal;
+            if ($event && $event.type === 'click') {
+                this.invokeEventCallback('click', { $event: $event });
+            }
+            this.addTimepickerClickListener(this.isTimeOpen);
+        }
+        addTimepickerClickListener(skipListener) {
+            if (!skipListener) {
+                return;
+            }
+            const bodyElement = document.querySelector('body');
+            setTimeout(() => {
+                const dropdownElement = $(bodyElement).find('>bs-dropdown-container .dropdown-menu').get(0);
+                this.deregisterTimepickeEventListener = i1.addEventListenerOnElement(bodyElement, dropdownElement, this.nativeElement, 'click', this.isDropDownDisplayEnabledOnInput(this.showdropdownon), () => {
+                    this.toggleTimePicker(false);
+                }, 0 /* EVENT_LIFE.ONCE */, true);
+            }, 350);
+        }
+        /**
+         * This function sets the value isOpen/isTimeOpen (i.e when datepicker popup is closed) based on widget type(i.e  DateTime, Time)
+         * @param val - isOpen/isTimeOpen is set based on the timepicker popup is open/closed
+         */
+        setIsTimeOpen(val) {
+            this.isTimeOpen = val;
+        }
+        hideTimepickerDropdown() {
+            this.invokeOnTouched();
+            this.toggleTimePicker(false);
+            if (this.deregisterTimepickeEventListener) {
+                this.deregisterTimepickeEventListener();
+            }
+            const parentEl = $(this.nativeElement).closest('.app-composite-widget.caption-floating');
+            if (parentEl.length > 0) {
+                this.app.notify('captionPositionAnimate', { displayVal: this.displayValue, nativeEl: parentEl });
+            }
+        }
+        /**
+         * This is an internal method to add a click listener once the time dropdown is open
+         */
+        onTimepickerOpen() {
+            // adding class for time widget dropdown menu
+            const tpElements = document.querySelectorAll('timepicker');
+            lodashEs.forEach(tpElements, (element) => {
+                i1.addClass(element.parentElement, 'app-datetime', true);
+            });
+            if (this.bsDropdown && (this.dateNotInRange || this.invalidDateTimeFormat)) {
+                this.bsTimeValue = null;
+            }
+            this.bsDatePickerDirective.hide();
+            this.focusTimePickerPopover(this);
+            this.bindTimePickerKeyboardEvents();
+            i1.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 = base.setFocusTrap(datePickerContainer, true);
+            this.focusTrap.activate();
+            this.bsDateValue ? this.activeDate = this.bsDateValue : this.activeDate = new Date();
+            // if (!this.bsDateValue) {
+            //     this.hightlightToday(this.activeDate);
+            // }
+            this.addDatepickerKeyboardEvents(this, true);
+            i1.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;
+                const formatted = i1.getFormattedDate(this.datePipe, newVal, this.dateInputFormat, this.timeZone, this.key, this.isCurrentDate, this);
+                if (this.safeReplaceMeridians(formatted) === this.displayValue) {
+                    $(this.nativeElement).find('.display-input').val(this.displayValue);
+                }
+            }
+            if (newVal && !this.bsDateValue && this.timeZone) {
+                newVal = i1.getMomentLocaleObject(this.timeZone, newVal);
+            }
+            // 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);
+                }
+            }
+            if (!this.dateNotInRange && !this.invalidDateTimeFormat) {
+                this.proxyModel = newVal;
+                if (this.proxyModel) {
+                    this.bsDateValue = this.bsTimeValue = newVal;
+                }
+                if (this.datavalue === this.getPrevDataValue()) {
+                    const time = i1.getFormattedDate(this.datePipe, this.datavalue, this.datepattern, this.timeZone, null, null, this) || '';
+                    $(this.nativeElement).find('.display-input').val(time?.replace(this.meridians[0], this.am)?.replace(this.meridians[1], this.pm));
+                }
+            }
+            else {
+                this.proxyModel = newVal;
+            }
+            this._debouncedOnChange(this.datavalue, {}, true);
+            this.cdRef.detectChanges();
+            // Update timepicker with formatted time, when timezone is provided.
+            const timePickerFields = $('.bs-timepicker-field');
+            if (this.timeZone && this.key === 'datetimestamp' && timePickerFields.length) {
+                const formattedDate = i1.getFormattedDate(this.datePipe, newVal, this.getTimePattern(), this.timeZone, this.key, null, this);
+                this.updateTimepickerFields(this.safeReplaceMeridians(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;
+            }
+            if (this.bsDatePickerDirective && (this.dateNotInRange || this.invalidDateTimeFormat)) {
+                this.bsDatePickerDirective._bsValue = null;
+            }
+            this.bsDatePickerDirective.toggle();
+            this.addBodyClickListener(this.bsDatePickerDirective.isOpen);
+        }
+        addBodyClickListener(skipListener) {
+            if (!skipListener) {
+                return;
+            }
+            const bodyElement = document.querySelector('body');
+            setTimeout(() => {
+                const bsDateContainerElement = bodyElement.querySelector(`.${this.dateContainerCls}`);
+                this.deregisterDatepickerEventListener = i1.addEventListenerOnElement(bodyElement, bsDateContainerElement, this.nativeElement, 'click', this.isDropDownDisplayEnabledOnInput(this.showdropdownon), () => {
+                    this.bsDatePickerDirective.hide();
+                }, 0 /* EVENT_LIFE.ONCE */, true);
+            }, 350);
+        }
+        hideDatepickerDropdown() {
+            this.isDateOpen = false;
+            this.focusTrap?.deactivate();
+            this.invokeOnTouched();
+            this.bsDatePickerDirective.hide();
+            // To open the timepicker menu when user wants to update time without changing the date.
+            if (this.bsDateValue) {
+                this.toggleTimePicker(true);
+            }
+            this.isEnterPressedOnDateInput = false;
+            if (this.deregisterDatepickerEventListener) {
+                this.deregisterDatepickerEventListener();
+            }
+            const parentEl = $(this.nativeElement).closest('.app-composite-widget.caption-floating');
+            if (parentEl.length > 0) {
+                this.app.notify('captionPositionAnimate', { displayVal: this.displayValue, nativeEl: parentEl });
+            }
+            this.blurDateInput(this.isDateOpen);
+        }
+        onDateChange($event, isNativePicker) {
+            if (this.isEnterPressedOnDateInput) {
+                this.isEnterPressedOnDateInput = false;
+                return;
+            }
+            let newVal = $event.target.value.trim();
+            newVal = newVal ? i1.getNativeDateObject(newVal?.replace(this.am, this.meridians[0])?.replace(this.pm, this.meridians[1]), { pattern: this.loadNativeDateInput ? this.outputformat : this.datepattern, meridians: this.meridians, isNativePicker: this.loadNativeDateInput }) : undefined;
+            // datetime pattern validation
+            // if invalid pattern is entered, device is showing an error.
+            if (!this.formatValidation(newVal, $event.target.value, isNativePicker)) {
+                return;
+            }
+            // min date and max date validation in mobile view.
+            // if invalid dates are entered, device is showing an alert.
+            if (isNativePicker && this.minDateMaxDateValidationOnInput(newVal, $event, this.displayValue, isNativePicker)) {
+                return;
+            }
+            this.invalidDateTimeFormat = false;
+            this.onModelUpdate(newVal);
+        }
+        /**
+         * This is an internal method triggered when pressing key on the datetime input
+         */
+        onDisplayKeydown(event) {
+            if (this.isDropDownDisplayEnabledOnInput(this.showdropdownon)) {
+                event.stopPropagation();
+                let newVal = event.target.value.trim();
+                if (event.key === 'Enter' || event.key === 'ArrowDown') {
+                    newVal = newVal ? i1.getNativeDateObject(newVal, { pattern: this.loadNativeDateInput ? this.outputformat : this.datepattern, meridians: this.meridians }) : undefined;
+                    event.preventDefault();
+                    const formattedDate = i1.getFormattedDate(this.datePipe, newVal, this.dateInputFormat, this.timeZone, this.key, this.isCurrentDate, this);
+                    const formattedDateWithMeridians = this.safeReplaceMeridians(formattedDate);
+                    const inputVal = event.target.value.trim();
+                    if (inputVal && this.datepattern === 'timestamp') {
+                        if (!lodashEs.isNaN(inputVal) && lodashEs.parseInt(inputVal) !== formattedDate) {
+                            this.invalidDateTimeFormat = true;
+                            this.invokeOnChange(this.datavalue, event, false);
+                        }
+                    }
+                    else if (inputVal && inputVal !== formattedDateWithMeridians) {
+                        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()?.replace(this.am, this.meridians[0])?.replace(this.pm, this.meridians[1]);
+                const newVal = i1.getNativeDateObject(enteredDate, { pattern: this.loadNativeDateInput ? this.outputformat : this.datepattern, meridians: this.meridians, isNativePicker: this.loadNativeDateInput });
+                if (!this.formatValidation(newVal, enteredDate)) {
+                    return;
+                }
+            }
+        }
+        // change and blur events are added from the template
+        handleEvent(node, eventName, callback, locals) {
+            if (!lodashEs.includes(['blur', 'focus', 'change', 'click'], eventName)) {
+                super.handleEvent(node, eventName, callback, locals);
+            }
+        }
+        onInputBlur($event) {
+            if (!$($event.relatedTarget).hasClass('current-date')) {
+                this.invokeOnTouched();
+                this.invokeEventCallback('blur', { $event });
+            }
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: DatetimeComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.AppDefaults }, { token: i1__namespace.App }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: DatetimeComponent, isStandalone: true, selector: "[wmDateTime]", providers: [
+                base.provideAs(DatetimeComponent, i2.NG_VALUE_ACCESSOR, true),
+                base.provideAs(DatetimeComponent, i2.NG_VALIDATORS, true),
+                base.provideAsWidgetRef(DatetimeComponent),
+                { provide: i5.TimepickerConfig, deps: [i1.AbstractI18nService], useFactory: baseDateTime.getTimepickerConfig }
+            ], viewQueries: [{ propertyName: "bsDatePickerDirective", first: true, predicate: i4.BsDatepickerDirective, descendants: true }], usesInheritance: true, ngImport: i0__namespace, 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]=\"arialabel\"\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)=\"_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      [attr.aria-expanded]=\"isDateOpen\"\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')\"\n      [ngClass]=\"{ 'showbuttons': showampmbuttons }\"></timepicker>\n      @if (ismeridian && showampmbuttons) {\n          <div class=\"ampm-toggle text-center\">\n              <button class=\"meridian-btn mb-1\" [ngClass]=\"{ 'active btn-secondary': getPeriod() === 'AM' }\" (click)=\"setPeriod('AM')\">{{appLocale.LABEL_AM ||\"AM\"}}</button><br>\n              <button class=\"meridian-btn\" [ngClass]=\"{ 'active btn-secondary': getPeriod() === 'PM' }\" (click)=\"setPeriod('PM')\">{{appLocale.LABEL_PM ||\"PM\"}}</button>\n          </div>\n      }\n    </div>\n  </div>\n@if (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 : arialabel || 'Choose Date'\"\n    (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event)\"\n    (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n    role=\"button\">\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: i2.FormsModule }, { kind: "directive", type: i2__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: dateTimePicker.DateTimePickerComponent, selector: "wm-datetimepicker", inputs: ["mode", "placement", "config", "minTime", "maxTime", "_displayFormat", "excludedDatesToDisable", "value", "excludedDaysToDisable", "displayFormat"], outputs: ["change"] }, { kind: "ngmodule", type: i3.BsDropdownModule }, { kind: "directive", type: i3__namespace.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3__namespace.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: i4.BsDatepickerModule }, { kind: "directive", type: i4__namespace.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i4__namespace.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "ngmodule", type: i5.TimepickerModule }, { kind: "component", type: i5__namespace.TimepickerComponent, selector: "timepicker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowkeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder"], outputs: ["isValid", "meridianChange"] }, { kind: "ngmodule", type: i6.CommonModule }, { kind: "directive", type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: DatetimeComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [i2.FormsModule, dateTimePicker.DateTimePickerComponent, i3.BsDropdownModule, i4.BsDatepickerModule, i5.TimepickerModule, i6.CommonModule], selector: '[wmDateTime]', providers: [
+                            base.provideAs(DatetimeComponent, i2.NG_VALUE_ACCESSOR, true),
+                            base.provideAs(DatetimeComponent, i2.NG_VALIDATORS, true),
+                            base.provideAsWidgetRef(DatetimeComponent),
+                            { provide: i5.TimepickerConfig, deps: [i1.AbstractI18nService], useFactory: baseDateTime.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]=\"arialabel\"\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)=\"_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      [attr.aria-expanded]=\"isDateOpen\"\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')\"\n      [ngClass]=\"{ 'showbuttons': showampmbuttons }\"></timepicker>\n      @if (ismeridian && showampmbuttons) {\n          <div class=\"ampm-toggle text-center\">\n              <button class=\"meridian-btn mb-1\" [ngClass]=\"{ 'active btn-secondary': getPeriod() === 'AM' }\" (click)=\"setPeriod('AM')\">{{appLocale.LABEL_AM ||\"AM\"}}</button><br>\n              <button class=\"meridian-btn\" [ngClass]=\"{ 'active btn-secondary': getPeriod() === 'PM' }\" (click)=\"setPeriod('PM')\">{{appLocale.LABEL_PM ||\"PM\"}}</button>\n          </div>\n      }\n    </div>\n  </div>\n@if (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 : arialabel || 'Choose Date'\"\n    (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event)\"\n    (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n    role=\"button\">\n  </div>\n}\n" }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.AppDefaults }, { type: i1__namespace.App }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { bsDatePickerDirective: [{
+                    type: i0.ViewChild,
+                    args: [i4.BsDatepickerDirective]
+                }] } });
+
+    exports.DatetimeComponent = DatetimeComponent;
+
+}));