@wavemaker/app-ng-runtime 11.4.0-next.25501 → 11.4.0-next.25701

app-ng-runtime/components/dialogs/default/index.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"DialogBodyDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"div[wmDialogBody]"}]}],"members":{"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":16,"character":5},"arguments":["style.height"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":19,"character":9},"arguments":[{"__symbolic":"reference","module":"@wm/components/base","name":"DialogRef","line":19,"character":16}]}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":18,"character":15},null,{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":20,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":21,"character":27}]}]}},"DialogFooterDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@wm/components/base","name":"BaseComponent","line":16,"character":43},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":10,"character":1},"arguments":[{"selector":"div[wmDialogFooter]","providers":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@wm/components/base","name":"provideAsWidgetRef","line":13,"character":8},"arguments":[{"__symbolic":"reference","name":"DialogFooterDirective"}]}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":19,"character":21}]}]},"statics":{"initializeProps":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"ɵa"}}}},"DialogHeaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"div[wmDialogHeader]","template":"<button *ngIf=\"isClosable\" aria-label=\"Close\" class=\"app-dialog-close close\" (click)=\"closeDialog();\" title=\"Close\">\n    <span aria-hidden=\"true\">&times;</span>\n</button>\n<h4 class=\"app-dialog-title modal-title\">\n    <i [ngClass]=\"iconclass\" [ngStyle]=\"{width: iconwidth, height: iconheight, margin: iconmargin}\"  *ngIf=\"iconclass && !iconurl\"></i>\n    <img data-identifier=\"img\" [src]=\"iconurl | image\" *ngIf=\"iconurl\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n    <span class=\"dialog-heading\" [textContent]=\"heading\" [id]=\"titleid\"></span>\n    <span class=\"dialog-sub-heading\" *ngIf=\"subheading\" [title]=\"subheading\" [textContent]=\"subheading\"></span>\n</h4>\n"}]}],"members":{"iconwidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":5}}]}],"iconheight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"iconmargin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"iconclass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"iconurl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"heading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}}]}],"subheading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"titleid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":30,"character":36},"arguments":[{"__symbolic":"reference","module":"@wm/components/base","name":"DialogRef","line":30,"character":43}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":30,"character":23},{"__symbolic":"reference","name":"BaseDialog"}]}],"closeDialog":[{"__symbolic":"method"}]}},"BaseDialog":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@wm/components/base","name":"BaseComponent","line":59,"character":41},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":58,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":70,"character":13},{"__symbolic":"reference","module":"@wm/components/base","name":"IWidgetConfig","line":71,"character":22},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"ModalOptions","line":72,"character":32}]}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"register":[{"__symbolic":"method"}],"deRegister":[{"__symbolic":"method"}],"getTemplateRef":[{"__symbolic":"method"}],"onPropertyChange":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"DialogModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":8},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"ModalModule","line":19,"character":8},{"__symbolic":"reference","module":"@wm/components/base","name":"WmComponentsModule","line":20,"character":8}],"declarations":[{"__symbolic":"reference","name":"DialogBodyDirective"},{"__symbolic":"reference","name":"DialogFooterDirective"},{"__symbolic":"reference","name":"DialogHeaderComponent"}],"exports":[{"__symbolic":"reference","name":"DialogBodyDirective"},{"__symbolic":"reference","name":"DialogFooterDirective"},{"__symbolic":"reference","name":"DialogHeaderComponent"}],"entryComponents":[]}]}],"members":{}},"ɵa":{"__symbolic":"error","message":"Lambda not supported","line":2,"character":29,"module":"./dialog-footer/dialog-footer.props"}},"origins":{"DialogBodyDirective":"./dialog-body/dialog-body.directive","DialogFooterDirective":"./dialog-footer/dialog-footer.directive","DialogHeaderComponent":"./dialog-header/dialog-header.component","BaseDialog":"./base-dialog","DialogModule":"./dialog.module","ɵa":"./dialog-footer/dialog-footer.props"},"importAs":"@wm/components/dialogs"}
+{"__symbolic":"module","version":4,"metadata":{"DialogBodyDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"div[wmDialogBody]"}]}],"members":{"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":16,"character":5},"arguments":["style.height"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":19,"character":9},"arguments":[{"__symbolic":"reference","module":"@wm/components/base","name":"DialogRef","line":19,"character":16}]}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":18,"character":15},null,{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":20,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":21,"character":27}]}]}},"DialogFooterDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@wm/components/base","name":"BaseComponent","line":16,"character":43},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":10,"character":1},"arguments":[{"selector":"div[wmDialogFooter]","providers":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@wm/components/base","name":"provideAsWidgetRef","line":13,"character":8},"arguments":[{"__symbolic":"reference","name":"DialogFooterDirective"}]}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":19,"character":21}]}]},"statics":{"initializeProps":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"ɵa"}}}},"DialogHeaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"div[wmDialogHeader]","template":"<button *ngIf=\"isClosable\" aria-label=\"Close\" class=\"app-dialog-close close\" (click)=\"closeDialog();\" title=\"Close\">\n    <span aria-hidden=\"true\">&times;</span>\n</button>\n<h4 class=\"app-dialog-title modal-title\">\n    <i [ngClass]=\"iconclass\" [ngStyle]=\"{width: iconwidth, height: iconheight, margin: iconmargin}\"  *ngIf=\"iconclass && !iconurl\"></i>\n    <img data-identifier=\"img\" [src]=\"iconurl | image\" *ngIf=\"iconurl\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n    <span class=\"dialog-heading\" [textContent]=\"heading\" [id]=\"titleid\"></span>\n    <span class=\"dialog-sub-heading\" *ngIf=\"subheading\" [title]=\"subheading\" [textContent]=\"subheading\"></span>\n</h4>\n"}]}],"members":{"iconwidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":5}}]}],"iconheight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"iconmargin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"iconclass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"iconurl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"heading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}}]}],"subheading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"titleid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":30,"character":36},"arguments":[{"__symbolic":"reference","module":"@wm/components/base","name":"DialogRef","line":30,"character":43}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":30,"character":23},{"__symbolic":"reference","name":"BaseDialog"}]}],"closeDialog":[{"__symbolic":"method"}]}},"BaseDialog":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@wm/components/base","name":"BaseComponent","line":58,"character":41},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":57,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":70,"character":13},{"__symbolic":"reference","module":"@wm/components/base","name":"IWidgetConfig","line":71,"character":22},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"ModalOptions","line":72,"character":32}]}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"register":[{"__symbolic":"method"}],"deRegister":[{"__symbolic":"method"}],"getTemplateRef":[{"__symbolic":"method"}],"onPropertyChange":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"DialogModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":8},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"ModalModule","line":19,"character":8},{"__symbolic":"reference","module":"@wm/components/base","name":"WmComponentsModule","line":20,"character":8}],"declarations":[{"__symbolic":"reference","name":"DialogBodyDirective"},{"__symbolic":"reference","name":"DialogFooterDirective"},{"__symbolic":"reference","name":"DialogHeaderComponent"}],"exports":[{"__symbolic":"reference","name":"DialogBodyDirective"},{"__symbolic":"reference","name":"DialogFooterDirective"},{"__symbolic":"reference","name":"DialogHeaderComponent"}],"entryComponents":[]}]}],"members":{}},"ɵa":{"__symbolic":"error","message":"Lambda not supported","line":2,"character":29,"module":"./dialog-footer/dialog-footer.props"}},"origins":{"DialogBodyDirective":"./dialog-body/dialog-body.directive","DialogFooterDirective":"./dialog-footer/dialog-footer.directive","DialogHeaderComponent":"./dialog-header/dialog-header.component","BaseDialog":"./base-dialog","DialogModule":"./dialog.module","ɵa":"./dialog-footer/dialog-footer.props"},"importAs":"@wm/components/dialogs"}

app-ng-runtime/components/input/epoch/base-date-time.component.d.ts

@@ -40,6 +40,9 @@ export declare abstract class BaseDateTimeComponent extends BaseFormCustomCompon
     removeKeyupListener: any;
     loadNativeDateInput: any;
     showcustompicker: any;
+    next: any;
+    prev: any;
+    clicked: boolean;
     protected dateNotInRange: boolean;
     protected timeNotInRange: boolean;
     protected invalidDateTimeFormat: boolean;
@@ -133,6 +136,7 @@ export declare abstract class BaseDateTimeComponent extends BaseFormCustomCompon
      * @param timePeriod - String value decides to load other month days or other month or other year
      */
     private goToOtherMonthOryear;
+    private getMonth;
     /**
     * This method sets the mouse events to Datepicker popup. These events are required when we navigate date picker through mouse.
      */
@@ -155,6 +159,7 @@ export declare abstract class BaseDateTimeComponent extends BaseFormCustomCompon
      * @param isDateTime - boolean value represents the loaded widget is date or datetime
      */
     protected addDatepickerKeyboardEvents(scope: any, isDateTime: any): void;
+    private setNextData;
     /**
      * This method is used to add tabindex, keybord and mouse events for days
      */

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

@@ -378,22 +378,32 @@
             configurable: true
         });
         DateTimePickerComponent.prototype.validateSelectedDate = function () {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e;
             if (!this.changedValue) {
                 return true;
             }
             var cd = moment(this.changedValue);
-            if (((_a = this._bsDatepickerConfig) === null || _a === void 0 ? void 0 : _a.minDate) && ((_b = this._bsDatepickerConfig) === null || _b === void 0 ? void 0 : _b.minDate) > this.changedValue) {
+            var minDate = (_a = this._bsDatepickerConfig) === null || _a === void 0 ? void 0 : _a.minDate;
+            var maxDate = (_b = this._bsDatepickerConfig) === null || _b === void 0 ? void 0 : _b.maxDate;
+            if (minDate
+                && ((this.mode === 'DATE'
+                    && moment(minDate).startOf('day').toDate() > this.changedValue)
+                    || (this.mode !== 'DATE'
+                        && minDate > this.changedValue))) {
                 return false;
             }
-            if (((_c = this._bsDatepickerConfig) === null || _c === void 0 ? void 0 : _c.maxDate) && ((_d = this._bsDatepickerConfig) === null || _d === void 0 ? void 0 : _d.maxDate) < this.changedValue) {
+            if (maxDate
+                && ((this.mode === 'DATE'
+                    && moment(maxDate).endOf('day').toDate() < this.changedValue)
+                    || (this.mode !== 'DATE'
+                        && maxDate < this.changedValue))) {
                 return false;
             }
-            if (((_f = (_e = this._bsDatepickerConfig) === null || _e === void 0 ? void 0 : _e.daysDisabled) === null || _f === void 0 ? void 0 : _f.indexOf(cd.day())) >= 0) {
+            if (((_d = (_c = this._bsDatepickerConfig) === null || _c === void 0 ? void 0 : _c.daysDisabled) === null || _d === void 0 ? void 0 : _d.indexOf(cd.day())) >= 0) {
                 return false;
             }
             var cdSt = cd.startOf('day').toDate().getTime();
-            if ((_g = this.excludedDatesToDisable) === null || _g === void 0 ? void 0 : _g.find(function (d) { return d.getTime() === cdSt; })) {
+            if ((_e = this.excludedDatesToDisable) === null || _e === void 0 ? void 0 : _e.find(function (d) { return d.getTime() === cdSt; })) {
                 return false;
             }
             return true;
@@ -442,6 +452,11 @@
                 newVal.setMilliseconds(oldVal.getMilliseconds());
             }
             this.changedValue = newVal;
+            if (this.mode === 'DATE'
+                && oldVal !== newVal
+                && this.validateSelectedDate()) {
+                this.onOkClick();
+            }
         };
         DateTimePickerComponent.prototype.onTimeUpdate = function (newVal) {
             this.changedValue = newVal;
@@ -461,6 +476,10 @@
             this.triggerChange();
             this.hideModal();
         };
+        DateTimePickerComponent.prototype.setToday = function () {
+            var today = moment().startOf('day').toDate();
+            this.onDateUpdate(today);
+        };
         DateTimePickerComponent.prototype.reset = function () {
             this.changedValue = this._value;
         };
@@ -495,7 +514,7 @@
     DateTimePickerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'wm-datetimepicker',
-                    template: " \n    <ng-template #datetimepickerTemplate>\n        <div class=\"app-datetime-picker\">\n            <div class=\"modal-body\">\n                <div class=\"mobile-datetime-picker-options\">\n                    \n                </div>\n                <bs-datepicker-inline\n                    [bsConfig]=\"bsDatepickerConfig\"\n                    [datesDisabled]=\"excludedDatesToDisable\"\n                    bsDatepicker\n                    [bsValue]=\"changedValue\"\n                    (bsValueChange)=\"onDateUpdate($event)\"\n                    *ngIf=\"mode === 'DATE_TIME' || mode === 'DATE'\">\n                </bs-datepicker-inline>\n                <wm-timepicker\n                    [value]=\"changedValue\"\n                    [min]=\"minTime\"\n                    [max]=\"maxTime\"\n                    (change)=\"onTimeUpdate($event)\"\n                    *ngIf=\"mode === 'DATE_TIME' || mode === 'TIME'\"></wm-timepicker>\n                <span class=\"text-primary date-picker-value\">\n                    {{getDateLabel()}}\n                </span>\n            </div>\n            <div class=\"modal-footer\">\n                <button\n                    class=\"btn btn-secondary clear-btn\"\n                    (click)=\"clear()\">{{appLocale.MESSAGE_DATE_PICKER_CLEAR || \"Clear\" }}</button>\n                <button\n                    class=\"btn btn-primary pull-right ok-btn\"\n                    (click)=\"onOkClick()\">{{appLocale.MESSAGE_DATE_PICKER_OK || \"Ok\" }}</button>\n                <button\n                    class=\"btn btn-secondary pull-right cancel-btn\"\n                    (click)=\"hideModal()\">{{appLocale.MESSAGE_DATE_PICKER_CANCEL || \"Cancel\" }}</button>\n                \n            </div>\n        </div>\n    </ng-template>\n    "
+                    template: " \n    <ng-template #datetimepickerTemplate>\n        <div class=\"app-datetime-picker\">\n            <div class=\"modal-body\">\n                <div class=\"mobile-datetime-picker-options\">\n                    \n                </div>\n                <bs-datepicker-inline\n                    [bsConfig]=\"bsDatepickerConfig\"\n                    [datesDisabled]=\"excludedDatesToDisable\"\n                    bsDatepicker\n                    [bsValue]=\"changedValue\"\n                    (bsValueChange)=\"onDateUpdate($event)\"\n                    *ngIf=\"mode === 'DATE_TIME' || mode === 'DATE'\">\n                </bs-datepicker-inline>\n                <wm-timepicker\n                    [value]=\"changedValue\"\n                    [min]=\"minTime\"\n                    [max]=\"maxTime\"\n                    (change)=\"onTimeUpdate($event)\"\n                    *ngIf=\"mode === 'DATE_TIME' || mode === 'TIME'\"></wm-timepicker>\n                <span class=\"text-primary date-picker-value\">\n                    {{getDateLabel()}}\n                </span>\n            </div>\n            <div class=\"modal-footer\">\n                <button\n                    *ngIf=\"mode === 'DATE_TIME' || mode === 'DATE'\"\n                    class=\"btn btn-secondary today-btn\"\n                    (click)=\"setToday()\">{{appLocale.MESSAGE_DATE_PICKER_TODAY || \"Today\" }}</button>\n                <button\n                    class=\"btn btn-primary pull-right ok-btn\"\n                    *ngIf=\"mode === 'DATE_TIME' || mode === 'TIME'\"\n                    (click)=\"onOkClick()\">{{appLocale.MESSAGE_DATE_PICKER_OK || \"Ok\" }}</button>\n                <button\n                    class=\"btn btn-secondary pull-right clear-btn\"\n                    (click)=\"clear()\">{{appLocale.MESSAGE_DATE_PICKER_CLEAR || \"Clear\" }}</button>\n            </div>\n        </div>\n    </ng-template>\n    "
                 },] }
     ];
     DateTimePickerComponent.ctorParameters = function () { return [
@@ -544,8 +563,8 @@
             }
             return arr;
         };
-        TimePickerComponent.prototype.set = function (_h, unit) {
-            var index = _h.index, value = _h.value;
+        TimePickerComponent.prototype.set = function (_f, unit) {
+            var index = _f.index, value = _f.value;
             if (unit === 'HOUR') {
                 this.value = moment(this.value).hour(parseInt(value)).toDate();
             }
@@ -638,6 +657,7 @@
         function BaseDateTimeComponent(inj, WIDGET_CONFIG) {
             var _this = _super.call(this, inj, WIDGET_CONFIG) || this;
             _this.isReadOnly = false;
+            _this.clicked = false;
             _this.formatsByLocale = { 'timezone': '' };
             /**
              * This is an internal property used to map the containerClass, showWeekNumbers etc., to the bsDatepicker
@@ -658,7 +678,6 @@
             enumerable: false,
             configurable: true
         });
-        ;
         /**
          * 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)
@@ -708,7 +727,7 @@
                 };
             }
             /* WMS-18269 | Extending the existing validation for 'required' */
-            if (this["show"] && this["required"]) {
+            if (this['show'] && this['required']) {
                 return !!c.value ? null : { required: true };
             }
             this.validateType = '';
@@ -836,6 +855,7 @@
          */
         BaseDateTimeComponent.prototype.setActiveDateFocus = function (newDate, isMouseEvent) {
             var _this = this;
+            this.setNextData(newDate);
             var activeMonth = this.activeDate.getMonth();
             // check for keyboard event
             if (!isMouseEvent) {
@@ -850,14 +870,18 @@
                 var newDay = newDate.getDate().toString();
                 _.filter($("span:contains(" + newDay + ")").not('.is-other-month'), function (obj) {
                     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.getMonth() === new Date().getMonth() && newDate.getFullYear() === new Date().getFullYear()) {
                     _this.hightlightToday();
-                    $("span:contains(" + new Date().getDate().toString() + ")").not('.is-other-month').parent().attr('aria-selected', 'true');
                 }
             });
         };
@@ -882,6 +906,18 @@
                 this.loadYears();
             }
         };
+        BaseDateTimeComponent.prototype.getMonth = function (date, inc) {
+            var currentMonth = new Date(date);
+            var month = currentMonth.getMonth();
+            var year = currentMonth.getFullYear();
+            month += inc;
+            var newDate = new Date(year, month);
+            var fullMonth = newDate.toLocaleString('en-US', { month: 'long' });
+            return {
+                date: newDate,
+                fullMonth: fullMonth
+            };
+        };
         /**
         * This method sets the mouse events to Datepicker popup. These events are required when we navigate date picker through mouse.
          */
@@ -889,16 +925,28 @@
             var _this = this;
             var datePickerHead = $(".bs-datepicker-head");
             datePickerHead.find(".previous").click(function (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);
                 }
+                setTimeout(function () {
+                    $(".bs-datepicker-head .previous").focus();
+                });
             });
             datePickerHead.find(".next").click(function (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);
                 }
+                setTimeout(function () {
+                    $(".bs-datepicker-head .next").focus();
+                });
             });
             datePickerHead.find(".current").click(function (event) {
                 // check for original mouse click
@@ -913,8 +961,24 @@
                     _this.setFocusForMonthOrDay();
                 }
             });
-            datePickerHead.find('.next').attr('aria-label', 'Next');
-            datePickerHead.find('.previous').attr('aria-label', 'Previous');
+            datePickerHead.find('.next').attr('aria-label', "Next Month, " + this.next.fullMonth + " " + this.next.date.getFullYear());
+            datePickerHead.find('.previous').attr('aria-label', "Previous Month, " + this.prev.fullMonth + " " + this.prev.date.getFullYear());
+            setTimeout(function () {
+                var currentNodes = datePickerHead.find('.current span');
+                var msg = 'Changed to month ';
+                // currentNodes.each((i) => {
+                //     msg =`${msg} ${$(currentNodes[i]).text()}`;
+                // });
+                datePickerHead.find('.current').attr("aria-live", "assertive").attr("aria-atomic", "false");
+                if (_this.clicked) {
+                    if ($(currentNodes[0]).text()) {
+                        datePickerHead.find('.ng-star-inserted').prepend("<div class=\"sr-only\">" + msg + "</div>");
+                    }
+                    if ($(currentNodes[1]).text()) {
+                        datePickerHead.find('.current').last().prepend("<div class=\"sr-only\"> and year </div>");
+                    }
+                }
+            });
         };
         /**
          * This method sets focus for months/days depending on the loaded datepicker table
@@ -997,6 +1061,10 @@
             this.loadDays();
             this.setActiveDateFocus(this.activeDate);
         };
+        BaseDateTimeComponent.prototype.setNextData = function (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
          */
@@ -1004,6 +1072,10 @@
             var _this = this;
             setTimeout(function () {
                 $('[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();
             });
@@ -1074,8 +1146,6 @@
         BaseDateTimeComponent.prototype.loadMonths = function () {
             var _this = this;
             setTimeout(function () {
-                var datePickerBody = $('.bs-datepicker-body');
-                datePickerBody.find('table.months span').attr('tabindex', '0');
                 _this.addKeyBoardEventsForMonths();
                 _this.addDatepickerMouseEvents();
             });
@@ -1130,8 +1200,6 @@
         BaseDateTimeComponent.prototype.loadYears = function () {
             var _this = this;
             setTimeout(function () {
-                var datePickerBody = $('.bs-datepicker-body');
-                datePickerBody.find('table.years span').attr('tabindex', '0');
                 _this.addKeyBoardEventsForYears();
                 _this.addDatepickerMouseEvents();
             });
@@ -1141,6 +1209,7 @@
          */
         BaseDateTimeComponent.prototype.setActiveMonthFocus = function (newDate, isMoouseEvent) {
             var _this = this;
+            this.setNextData(newDate);
             var newMonth = months[newDate.getMonth()];
             // check for keyboard event
             if (!isMoouseEvent) {
@@ -1152,6 +1221,8 @@
                 }
             }
             setTimeout(function () {
+                $(".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;
             });
@@ -1212,6 +1283,8 @@
                 }
             }
             setTimeout(function () {
+                $(".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;
             });
@@ -1403,11 +1476,6 @@
                     children[i].classList.remove('add-opacity');
                 }
                 displayInputElem.classList.remove('remove-opacity');
-                var allDateTimeElements = this.nativeElement.getElementsByTagName('*');
-                for (var i = 0; i < allDateTimeElements.length; i++) {
-                    allDateTimeElements[i].setAttribute('tabindex', this.tabindex);
-                }
-                displayInputElem.removeAttribute('tabindex');
             }
         };
         BaseDateTimeComponent.prototype.onDateTimeInputFocus = function (skipFocus) {
@@ -1423,11 +1491,6 @@
                     children[i].classList.add('add-opacity');
                 }
                 displayInputElem.classList.add('remove-opacity');
-                var allDateTimeElements = this.nativeElement.getElementsByTagName('*');
-                for (var i = 0; i < allDateTimeElements.length; i++) {
-                    allDateTimeElements[i].setAttribute('tabindex', '-1');
-                }
-                displayInputElem.setAttribute('tabindex', this.tabindex);
                 return;
             }
             if (displayInputElem && this._triggeredByUser) {
@@ -1519,7 +1582,10 @@
             // this mobileinput width varies in ios hence setting width here.
             var mobileInput = this.getMobileInput();
             if (mobileInput) {
-                mobileInput.style.width = mobileInput.parentElement.clientWidth + 'px';
+                setTimeout(function () {
+                    mobileInput.style.width = '100%';
+                    mobileInput.style.height = '100%';
+                });
             }
         };
         BaseDateTimeComponent.prototype.ngOnDestroy = function () {
@@ -1758,7 +1824,6 @@
                 if (!skipFocus) {
                     this.onDateTimeInputFocus();
                 }
-                return;
             }
             if ($event.type === 'click') {
                 this.invokeEventCallback('click', { $event: $event });
@@ -1791,7 +1856,7 @@
             if (this.isDropDownDisplayEnabledOnInput(this.showdropdownon)) {
                 event.stopPropagation();
                 var action = this.keyEventPlugin.constructor.getEventFullKey(event);
-                if (action === 'enter' || action === 'arrowdown') {
+                if (action === 'enter') {
                     var newVal = core$1.getDateObj(event.target.value, { pattern: this.datepattern });
                     event.preventDefault();
                     var formattedDate = core$1.getFormattedDate(this.datePipe, newVal, this.dateInputFormat, this.timeZone, null, this.isCurrentDate, this);
@@ -1843,7 +1908,7 @@
     DateComponent.decorators = [
         { type: core.Component, args: [{
                     selector: '[wmDate]',
-                    template: "    <input class=\"form-control app-textbox app-dateinput display-input\"\n        focus-target\n        type=\"text\"\n        [name]=\"name\"\n        [tabindex]=\"tabindex\"\n        [value]=\"displayValue\"\n        (click)=\"toggleDpDropdown($event, true)\"\n        (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n        (blur)=\"onInputBlur($event)\"\n        [disabled]=\"disabled || readonly\"\n        [autofocus]=\"autofocus\"\n        [required]=\"required\"\n        [readOnly]=\"isReadOnly\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.accesskey]=\"shortcutkey\"\n        [attr.aria-label]=\"hint\"\n        (change)=\"onDisplayDateChange($event)\"\n        (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event);\">\n\n    <span class=\"input-group-btn\">\n        <button type=\"button\"\n            class=\"btn btn-default btn-time\"\n            [tabindex]=\"tabindex\"\n            [disabled]=\"disabled || readonly\"\n            [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : 'Choose date by pressing enter'\"\n            aria-haspopup=\"true\"\n            aria-expanded=\"false\"\n            (click)=\"toggleDpDropdown($event, false)\">\n            <i aria-hidden=\"true\"\n                class=\"app-icon wm-sl-l sl-calendar\"></i>\n        </button>\n    </span>\n    <div style=\"width: 0;display: inline-block;\">\n    <input class=\"model-holder\"\n        aria-label=\"datepicker dropdownmenu\"\n        aria-controls=\"date\"\n        [container]=\"containerTarget || 'body'\"\n        [bsConfig]=\"_dateOptions\"\n        [isOpen]=\"isOpen\"\n        #datepicker=\"bsDatepicker\"\n        bsDatepicker\n        [daysDisabled]=\"excludedDaysToDisable\"\n        [datesDisabled]=\"excludedDatesToDisable\"\n        placement=\"bottom right\"\n        [isDisabled]=\"disabled || readonly\"\n        [bsValue]=\"bsDataValue\"\n        (onShown)=\"onDatePickerOpen()\"\n        (onHidden)=\"hideDatepickerDropdown()\"\n        (bsValueChange)=\"onDateChange($event)\">\n</div>\n\n<ng-template [ngIf]=\"loadNativeDateInput\">\n    <wm-datetimepicker\n        dateTimePicker\n        mode=\"DATE\"\n        [config]=\"_dateOptions\"\n        [placement]=\"modal\"\n        [excludedDaysToDisable]=\"excludedDaysToDisable\"\n        [excludedDatesToDisable]=\"excludedDatesToDisable\"\n        [displayFormat]=\"dateInputFormat\"\n        [value]=\"bsDataValue\"\n        (change)=\"onDateChange($event)\">\n    </wm-datetimepicker>\n    <div class=\"mobile-input mobile-datepicker-container\"\n        tabindex=\"1000000\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event);\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n        (click)=\"!(disabled || readonly || isCurrentDate) && showDatePickerModal()\">\n    </div>\n</ng-template>\n",
+                    template: "    <input class=\"form-control app-textbox app-dateinput display-input\"\n        focus-target\n        type=\"text\"\n        [name]=\"name\"\n        [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n        [attr.aria-hidden]=\"!!loadNativeDateInput\"\n        [value]=\"displayValue\"\n        (click)=\"toggleDpDropdown($event, true)\"\n        (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n        (blur)=\"onInputBlur($event)\"\n        [disabled]=\"disabled || readonly\"\n        [autofocus]=\"autofocus\"\n        [required]=\"required\"\n        [readOnly]=\"isReadOnly\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.accesskey]=\"shortcutkey\"\n        [attr.aria-label]=\"hint\"\n        (change)=\"onDisplayDateChange($event)\"\n        (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event);\">\n\n    <span class=\"input-group-btn\">\n        <button type=\"button\"\n            class=\"btn btn-default btn-time\"\n            [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n            [attr.aria-hidden]=\"!!loadNativeDateInput\"\n            [disabled]=\"disabled || readonly\"\n            [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : 'Choose date by pressing enter'\"\n            aria-haspopup=\"true\"\n            aria-expanded=\"false\"\n            (click)=\"toggleDpDropdown($event, false)\">\n            <i aria-hidden=\"true\"\n                class=\"app-icon wm-sl-l sl-calendar\"></i>\n        </button>\n    </span>\n    <div style=\"width: 0;display: inline-block;\">\n    <input class=\"model-holder\"\n        aria-label=\"datepicker dropdownmenu\"\n        aria-controls=\"date\"\n        [tabindex]=\"-1\"\n        [attr.aria-hidden]=\"!!loadNativeDateInput\"\n        [container]=\"containerTarget || 'body'\"\n        [bsConfig]=\"_dateOptions\"\n        [isOpen]=\"isOpen\"\n        #datepicker=\"bsDatepicker\"\n        bsDatepicker\n        [daysDisabled]=\"excludedDaysToDisable\"\n        [datesDisabled]=\"excludedDatesToDisable\"\n        placement=\"bottom right\"\n        [isDisabled]=\"disabled || readonly\"\n        [bsValue]=\"bsDataValue\"\n        (onShown)=\"onDatePickerOpen()\"\n        (onHidden)=\"hideDatepickerDropdown()\"\n        (bsValueChange)=\"onDateChange($event)\">\n</div>\n\n<ng-template [ngIf]=\"loadNativeDateInput\">\n    <wm-datetimepicker\n        dateTimePicker\n        mode=\"DATE\"\n        [config]=\"_dateOptions\"\n        [placement]=\"modal\"\n        [excludedDaysToDisable]=\"excludedDaysToDisable\"\n        [excludedDatesToDisable]=\"excludedDatesToDisable\"\n        [displayFormat]=\"dateInputFormat\"\n        [value]=\"bsDataValue\"\n        (change)=\"onDateChange($event)\">\n    </wm-datetimepicker>\n    <div class=\"mobile-input mobile-datepicker-container\"\n        [tabindex]=\"tabindex || 0\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event);\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n        [attr.aria-label]=\"displayValue ? 'Change Date' + displayValue : 'Choose Date'\"\n        (click)=\"!(disabled || readonly || isCurrentDate) && showDatePickerModal()\">\n    </div>\n</ng-template>\n",
                     providers: [
                         base.provideAs(DateComponent, forms.NG_VALUE_ACCESSOR, true),
                         base.provideAs(DateComponent, forms.NG_VALIDATORS, true),
@@ -2331,7 +2396,7 @@
     DatetimeComponent.decorators = [
         { type: core.Component, args: [{
                     selector: '[wmDateTime]',
-                    template: "    <div dropdown\n        [isOpen]=\"isTimeOpen\"\n        autoClose=\"false\"\n        [container]=\"'body'\"\n        (onShown)=\"onTimepickerOpen()\"\n        style=\"display: inherit;\">\n        <input class=\"form-control app-textbox display-input\"\n            [attr.aria-label]=\"hint\"\n            focus-target\n            [name]=\"name\"\n            [tabindex]=\"tabindex\"\n            type=\"text\"\n            [value]=\"displayValue\"\n            (click)=\"toggleDpDropdown($event, true)\"\n            (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n            (blur)=\"onInputBlur($event)\"\n            (change)=\"onDateChange($event)\"\n            [autofocus]=\"autofocus\"\n            [disabled]=\"disabled || readonly || isCurrentDate\"\n            [required]=\"required\"\n            [readOnly]=\"isReadOnly\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.accesskey]=\"shortcutkey\"\n            (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event)\">\n\n        <span class=\"input-group-btn\">\n            <button type=\"button\"\n                class=\"btn btn-default btn-date\"\n                [tabindex]=\"tabindex\"\n                [disabled]=\"disabled || readonly || isCurrentDate\"\n                [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : 'Choose date by pressing enter'\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"false\"\n                (click)=\"toggleDpDropdown($event, false)\">\n                <i aria-hidden=\"true\"\n                    class=\"app-icon wm-sl-l sl-calendar\"></i>\n            </button>\n            <button type=\"button\"\n                class=\"btn btn-default btn-time\"\n                [tabindex]=\"tabindex\"\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            [container]=\"containerTarget || 'body'\"\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                [min]=\"minTime\"\n                [max]=\"maxTime\"\n                [hourStep]=\"hourstep\"\n                [minuteStep]=\"minutestep\"\n                [secondsStep]=\"secondsstep\"\n                [mousewheel]=\"true\"\n                [arrowkeys]=\"true\"\n                (isValid)=\"isValid($event)\"\n                [showSeconds]=\"showseconds\"\n                (ngModelChange)=\"onModelUpdate($event, 'time')\"></timepicker>\n        </div>\n    </div>\n<ng-template [ngIf]=\"loadNativeDateInput\">\n    <wm-datetimepicker\n        dateTimePicker\n        [config]=\"_dateOptions\"\n        [placement]=\"modal\"\n        [excludedDaysToDisable]=\"excludedDaysToDisable\"\n        [excludedDatesToDisable]=\"excludedDatesToDisable\"\n        [displayFormat]=\"dateInputFormat\"\n        [value]=\"bsDateValue\"\n        (change)=\"onModelUpdate($event, 'date')\">\n    </wm-datetimepicker>\n    <div class=\"mobile-input mobile-datepicker-container\"\n        tabindex=\"1000000\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event)\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n        (click)=\"!(disabled || readonly || isCurrentDate) && showDatePickerModal()\">\n    </div>\n</ng-template>\n",
+                    template: "    <div dropdown\n        [isOpen]=\"isTimeOpen\"\n        autoClose=\"false\"\n        [container]=\"'body'\"\n        (onShown)=\"onTimepickerOpen()\"\n        style=\"display: inherit;\">\n        <input class=\"form-control app-textbox display-input\"\n            [attr.aria-label]=\"hint\"\n            focus-target\n            [name]=\"name\"\n            [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n            [attr.aria-hidden]=\"!!loadNativeDateInput\"\n            type=\"text\"\n            [value]=\"displayValue\"\n            (click)=\"toggleDpDropdown($event, true)\"\n            (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n            (blur)=\"onInputBlur($event)\"\n            (change)=\"onDateChange($event)\"\n            [autofocus]=\"autofocus\"\n            [disabled]=\"disabled || readonly || isCurrentDate\"\n            [required]=\"required\"\n            [readOnly]=\"isReadOnly\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.accesskey]=\"shortcutkey\"\n            (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event)\">\n\n        <span class=\"input-group-btn\">\n            <button type=\"button\"\n                class=\"btn btn-default btn-date\"\n                [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n                [attr.aria-hidden]=\"!!loadNativeDateInput\"\n                [disabled]=\"disabled || readonly || isCurrentDate\"\n                [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : 'Choose date by pressing enter'\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"false\"\n                (click)=\"toggleDpDropdown($event, false)\">\n                <i aria-hidden=\"true\"\n                    class=\"app-icon wm-sl-l sl-calendar\"></i>\n            </button>\n            <button type=\"button\"\n                class=\"btn btn-default btn-time\"\n                [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n                [attr.aria-hidden]=\"!!loadNativeDateInput\"\n                [disabled]=\"disabled || readonly || isCurrentDate\"\n                aria-label=\"Select time\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"false\"\n                (click)=\"toggleTimePicker(!isTimeOpen, $event)\">\n                <i aria-hidden=\"true\"\n                    class=\"app-icon wm-sl-l sl-time\"></i>\n            </button>\n        </span>\n        <div style=\"width: 0;display: inline-block;\">\n        <input class=\"model-holder\"\n            aria-label=\"datepicker dropdownmenu\"\n            aria-controls=\"date\"\n            focus-target\n            [tabindex]=\"-1\"\n            [attr.aria-hidden]=\"!!loadNativeDateInput\"\n            [container]=\"containerTarget || 'body'\"\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                [min]=\"minTime\"\n                [max]=\"maxTime\"\n                [hourStep]=\"hourstep\"\n                [minuteStep]=\"minutestep\"\n                [secondsStep]=\"secondsstep\"\n                [mousewheel]=\"true\"\n                [arrowkeys]=\"true\"\n                (isValid)=\"isValid($event)\"\n                [showSeconds]=\"showseconds\"\n                (ngModelChange)=\"onModelUpdate($event, 'time')\"></timepicker>\n        </div>\n    </div>\n<ng-template [ngIf]=\"loadNativeDateInput\">\n    <wm-datetimepicker\n        dateTimePicker\n        [config]=\"_dateOptions\"\n        [placement]=\"modal\"\n        [excludedDaysToDisable]=\"excludedDaysToDisable\"\n        [excludedDatesToDisable]=\"excludedDatesToDisable\"\n        [displayFormat]=\"dateInputFormat\"\n        [value]=\"bsDateValue\"\n        (change)=\"onModelUpdate($event, 'date')\">\n    </wm-datetimepicker>\n    <div class=\"mobile-input mobile-datepicker-container\"\n        [tabindex]=\"tabindex || 0\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event)\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n        (click)=\"!(disabled || readonly || isCurrentDate) && showDatePickerModal()\">\n    </div>\n</ng-template>\n",
                     providers: [
                         base.provideAs(DatetimeComponent, forms.NG_VALUE_ACCESSOR, true),
                         base.provideAs(DatetimeComponent, forms.NG_VALIDATORS, true),