@wavemaker/app-ng-runtime 11.4.0-next.28152 → 11.4.0-rc.5339

app-ng-runtime/components/input/epoch/fesm2015/index.js

@@ -45,22 +45,32 @@ class DateTimePickerComponent {
         }
     }
     validateSelectedDate() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e;
         if (!this.changedValue) {
             return true;
         }
         const 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) {
+        const minDate = (_a = this._bsDatepickerConfig) === null || _a === void 0 ? void 0 : _a.minDate;
+        const 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;
         }
         const cdSt = cd.startOf('day').toDate().getTime();
-        if ((_g = this.excludedDatesToDisable) === null || _g === void 0 ? void 0 : _g.find(d => d.getTime() === cdSt)) {
+        if ((_e = this.excludedDatesToDisable) === null || _e === void 0 ? void 0 : _e.find(d => d.getTime() === cdSt)) {
             return false;
         }
         return true;
@@ -113,6 +123,11 @@ class DateTimePickerComponent {
             newVal.setMilliseconds(oldVal.getMilliseconds());
         }
         this.changedValue = newVal;
+        if (this.mode === 'DATE'
+            && oldVal !== newVal
+            && this.validateSelectedDate()) {
+            this.onOkClick();
+        }
     }
     onTimeUpdate(newVal) {
         this.changedValue = newVal;
@@ -131,6 +146,10 @@ class DateTimePickerComponent {
         this.triggerChange();
         this.hideModal();
     }
+    setToday() {
+        const today = moment().startOf('day').toDate();
+        this.onDateUpdate(today);
+    }
     reset() {
         this.changedValue = this._value;
     }
@@ -191,15 +210,16 @@ DateTimePickerComponent.decorators = [
             </div>
             <div class="modal-footer">
                 <button
-                    class="btn btn-secondary clear-btn"
-                    (click)="clear()">{{appLocale.MESSAGE_DATE_PICKER_CLEAR || "Clear" }}</button>
+                    *ngIf="mode === 'DATE_TIME' || mode === 'DATE'"
+                    class="btn btn-secondary today-btn"
+                    (click)="setToday()">{{appLocale.MESSAGE_DATE_PICKER_TODAY || "Today" }}</button>
                 <button
                     class="btn btn-primary pull-right ok-btn"
+                    *ngIf="mode === 'DATE_TIME' || mode === 'TIME'"
                     (click)="onOkClick()">{{appLocale.MESSAGE_DATE_PICKER_OK || "Ok" }}</button>
                 <button
-                    class="btn btn-secondary pull-right cancel-btn"
-                    (click)="hideModal()">{{appLocale.MESSAGE_DATE_PICKER_CANCEL || "Cancel" }}</button>
-                
+                    class="btn btn-secondary pull-right clear-btn"
+                    (click)="clear()">{{appLocale.MESSAGE_DATE_PICKER_CLEAR || "Clear" }}</button>
             </div>
         </div>
     </ng-template>
@@ -360,7 +380,6 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
         this.loadNativeDateInput = isMobile() && !this.showcustompicker;
     }
     get timeZone() { return this.inj.get(AbstractI18nService).getTimezone(this); }
-    ;
     /**
      * 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)
@@ -410,7 +429,7 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
             };
         }
         /* 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 = '';
@@ -536,6 +555,7 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
      * @param isMouseEvent - boolean value represents the event is mouse event/ keyboard event
      */
     setActiveDateFocus(newDate, isMouseEvent) {
+        this.setNextData(newDate);
         const activeMonth = this.activeDate.getMonth();
         // check for keyboard event
         if (!isMouseEvent) {
@@ -550,14 +570,18 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
             const newDay = newDate.getDate().toString();
             _.filter($(`span:contains(${newDay})`).not('.is-other-month'), (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');
             }
         });
     }
@@ -585,7 +609,7 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
     getMonth(date, inc) {
         const currentMonth = new Date(date);
         let month = currentMonth.getMonth();
-        let year = currentMonth.getFullYear();
+        const year = currentMonth.getFullYear();
         month += inc;
         const newDate = new Date(year, month);
         const fullMonth = newDate.toLocaleString('en-US', { month: 'long' });
@@ -607,6 +631,9 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
             if (event.originalEvent) {
                 this.setFocusForDate(-1);
             }
+            setTimeout(() => {
+                $(`.bs-datepicker-head .previous`).focus();
+            });
         });
         datePickerHead.find(`.next`).click((event) => {
             this.next = this.getMonth(this.activeDate, 2);
@@ -616,6 +643,9 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
             if (event.originalEvent) {
                 this.setFocusForDate(1);
             }
+            setTimeout(() => {
+                $(`.bs-datepicker-head .next`).focus();
+            });
         });
         datePickerHead.find(`.current`).click((event) => {
             // check for original mouse click
@@ -630,8 +660,24 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
                 this.setFocusForMonthOrDay();
             }
         });
-        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()}`);
+        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(() => {
+            const currentNodes = datePickerHead.find('.current span');
+            const 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
@@ -713,16 +759,20 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
         this.loadDays();
         this.setActiveDateFocus(this.activeDate);
     }
+    setNextData(nextDate) {
+        this.next = this.getMonth(nextDate, 1);
+        this.prev = this.getMonth(nextDate, -1);
+    }
     /**
      * This method is used to add tabindex, keybord and mouse events for days
      */
     loadDays() {
         setTimeout(() => {
             $('[bsdatepickerdaydecorator]').not('.is-other-month').attr('tabindex', '0');
-            if (this.clicked === false) {
-                this.next = this.getMonth(this.activeDate, 1);
-                this.prev = this.getMonth(this.activeDate, -1);
-            }
+            // if (this.clicked === false) {
+            //     this.next = this.getMonth(this.activeDate, 1);
+            //     this.prev = this.getMonth(this.activeDate, -1);
+            // }
             this.addKeyBoardEventsForDays();
             this.addDatepickerMouseEvents();
         });
@@ -791,8 +841,6 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
      */
     loadMonths() {
         setTimeout(() => {
-            const datePickerBody = $('.bs-datepicker-body');
-            datePickerBody.find('table.months span').attr('tabindex', '0');
             this.addKeyBoardEventsForMonths();
             this.addDatepickerMouseEvents();
         });
@@ -845,8 +893,6 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
      */
     loadYears() {
         setTimeout(() => {
-            const datePickerBody = $('.bs-datepicker-body');
-            datePickerBody.find('table.years span').attr('tabindex', '0');
             this.addKeyBoardEventsForYears();
             this.addDatepickerMouseEvents();
         });
@@ -855,6 +901,7 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
      * This method is used to set focus for active month
      */
     setActiveMonthFocus(newDate, isMoouseEvent) {
+        this.setNextData(newDate);
         const newMonth = months[newDate.getMonth()];
         // check for keyboard event
         if (!isMoouseEvent) {
@@ -866,6 +913,8 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
             }
         }
         setTimeout(() => {
+            $(`.bs-datepicker-body table.months span`).attr('tabindex', '-1');
+            $(`.bs-datepicker-body table.months span:contains(${newMonth})`).attr('tabindex', '0');
             $(`.bs-datepicker-body table.months span:contains(${newMonth})`).focus();
             this.activeDate = newDate;
         });
@@ -924,6 +973,8 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
             }
         }
         setTimeout(() => {
+            $(`.bs-datepicker-body table.years span`).attr('tabindex', '-1');
+            $(`.bs-datepicker-body table.years span:contains(${newYear})`).attr('tabindex', '0');
             $(`.bs-datepicker-body table.years span:contains(${newYear})`).focus();
             this.activeDate = newDate;
         });
@@ -1104,37 +1155,27 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
     }
     onDateTimeInputBlur() {
         // removing the opacity on blur of the mobile widget
-        let displayInputElem = this.getMobileInput();
+        const displayInputElem = this.getMobileInput();
         if (displayInputElem && !hasCordova()) {
-            let children = this.nativeElement.children;
+            const children = this.nativeElement.children;
             for (let i = 0; i < children.length; i++) {
                 children[i].classList.remove('add-opacity');
             }
             displayInputElem.classList.remove('remove-opacity');
-            let allDateTimeElements = this.nativeElement.getElementsByTagName('*');
-            for (let i = 0; i < allDateTimeElements.length; i++) {
-                allDateTimeElements[i].setAttribute('tabindex', this.tabindex);
-            }
-            displayInputElem.removeAttribute('tabindex');
         }
     }
     onDateTimeInputFocus(skipFocus = false) {
         if (!this.loadNativeDateInput) {
             return;
         }
-        let displayInputElem = this.getMobileInput();
+        const displayInputElem = this.getMobileInput();
         // toggling the classes to show and hide the native widget using opacity
         if (skipFocus && !hasCordova()) {
-            let children = this.nativeElement.children;
+            const children = this.nativeElement.children;
             for (let i = 0; i < children.length; i++) {
                 children[i].classList.add('add-opacity');
             }
             displayInputElem.classList.add('remove-opacity');
-            let allDateTimeElements = this.nativeElement.getElementsByTagName('*');
-            for (let i = 0; i < allDateTimeElements.length; i++) {
-                allDateTimeElements[i].setAttribute('tabindex', '-1');
-            }
-            displayInputElem.setAttribute('tabindex', this.tabindex);
             return;
         }
         if (displayInputElem && this._triggeredByUser) {
@@ -1224,9 +1265,12 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
         this.containerTarget = getContainerTargetClass(this.nativeElement);
         this.isReadOnly = this.dataentrymode != 'undefined' && !this.isDataEntryModeEnabledOnInput(this.dataentrymode);
         // this mobileinput width varies in ios hence setting width here.
-        let mobileInput = this.getMobileInput();
+        const mobileInput = this.getMobileInput();
         if (mobileInput) {
-            mobileInput.style.width = mobileInput.parentElement.clientWidth + 'px';
+            setTimeout(() => {
+                mobileInput.style.width = '100%';
+                mobileInput.style.height = '100%';
+            });
         }
     }
     ngOnDestroy() {
@@ -1471,7 +1515,7 @@ class DateComponent extends BaseDateTimeComponent {
         if (this.isDropDownDisplayEnabledOnInput(this.showdropdownon)) {
             event.stopPropagation();
             const action = this.keyEventPlugin.constructor.getEventFullKey(event);
-            if (action === 'enter' || action === 'arrowdown') {
+            if (action === 'enter') {
                 const newVal = getDateObj(event.target.value, { pattern: this.datepattern });
                 event.preventDefault();
                 const formattedDate = getFormattedDate(this.datePipe, newVal, this.dateInputFormat, this.timeZone, null, this.isCurrentDate, this);
@@ -1522,7 +1566,7 @@ DateComponent.initializeProps = registerProps$2();
 DateComponent.decorators = [
     { type: 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: [
                     provideAs(DateComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(DateComponent, NG_VALIDATORS, true),
@@ -1983,7 +2027,7 @@ DatetimeComponent.initializeProps = registerProps$1();
 DatetimeComponent.decorators = [
     { type: 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: [
                     provideAs(DatetimeComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(DatetimeComponent, NG_VALIDATORS, true),