@wavemaker/app-ng-runtime 11.5.2-next.141145 → 11.5.2-next.141147

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

@@ -6,7 +6,7 @@ import * as i5 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
 import * as i3 from 'ngx-bootstrap/datepicker';
 import { BsDatepickerConfig, BsDatepickerDirective, BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import * as i4 from 'ngx-bootstrap/dropdown';
+import * as i4$1 from 'ngx-bootstrap/dropdown';
 import { BsDropdownDirective, BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import * as i6 from 'ngx-bootstrap/timepicker';
 import { TimepickerConfig, TimepickerComponent, TimepickerModule } from 'ngx-bootstrap/timepicker';
@@ -15,6 +15,9 @@ import * as i1$1 from '@wm/core';
 import { App, AbstractI18nService, isMobile, getFormattedDate, getDateObj, isString, setAttr, getNativeDateObject, hasCordova, isIos, FormWidgetType, getMomentLocaleObject, getDisplayDateTimeFormat, adjustContainerPosition, adjustContainerRightEdges, addEventListenerOnElement, addClass, $appDigest } from '@wm/core';
 import { BaseFormCustomComponent } from '@wm/components/input';
 import * as i1 from 'ngx-bootstrap/modal';
+import IMask from 'imask';
+import * as i4 from 'angular-imask';
+import { IMaskDirective, IMaskModule } from 'angular-imask';
 
 const _c0$4 = ["*"];
 function PickerComponent_div_6_Template(rf, ctx) { if (rf & 1) {
@@ -1660,28 +1663,135 @@ const dateProps = new Map([
     ['clearbutton', { value: true, ...PROP_BOOLEAN }],
     ['adaptiveposition', { value: true, ...PROP_BOOLEAN }],
     ['todaybuttonlabel', { value: 'LABEL_TODAY_DATE', ...PROP_STRING }],
-    ['clearbuttonlabel', { value: 'LABEL_CLEAR_DATE', ...PROP_STRING }]
+    ['clearbuttonlabel', { value: 'LABEL_CLEAR_DATE', ...PROP_STRING }],
+    ['showdateformatasplaceholder', PROP_BOOLEAN],
 ]);
 const registerProps$2 = () => {
     register('wm-date', dateProps);
     registerFormWidget(FormWidgetType.DATE, new Map(dateProps));
 };
 
-const _c0$2 = ["wmDate", ""];
-function DateComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "wm-datetimepicker", 8);
-    i0.ɵɵlistener("change", function DateComponent_ng_template_7_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDateChange($event)); });
+function validateTheMaskedDate(format, locale) {
+    if (format == 'timestamp') {
+        return false;
+    }
+    const modifiedFormat = format.toUpperCase().replace(/E/g, 'd');
+    const parseFn = str => {
+        return moment(str, modifiedFormat).toDate();
+    };
+    const formatFn = date => {
+        return moment(date, modifiedFormat).format(modifiedFormat);
+    };
+    return {
+        mask: Date,
+        pattern: modifiedFormat,
+        format: formatFn,
+        parse: parseFn,
+        blocks: {
+            YYYY: {
+                mask: IMask.MaskedRange,
+                from: 1900,
+                to: 9999,
+                placeholderChar: 'Y',
+                maxLength: 4,
+            },
+            YYY: {
+                mask: IMask.MaskedRange,
+                from: 900,
+                to: 999,
+                placeholderChar: 'Y',
+                maxLength: 3,
+            },
+            YY: {
+                mask: IMask.MaskedRange,
+                from: 0,
+                to: 99,
+                placeholderChar: 'Y',
+                maxLength: 2,
+            },
+            Y: {
+                mask: IMask.MaskedRange,
+                from: 1900,
+                to: 9999,
+                placeholderChar: 'Y',
+                maxLength: 4,
+            },
+            M: {
+                mask: IMask.MaskedRange,
+                from: 1,
+                to: 12,
+                placeholderChar: 'M',
+                maxLength: 2,
+            },
+            MM: {
+                mask: IMask.MaskedRange,
+                from: 1,
+                to: 12,
+                placeholderChar: 'M',
+                maxLength: 2,
+            },
+            MMM: {
+                mask: IMask.MaskedEnum,
+                enum: Array.from({ length: 12 }, (_, i) => new Date(0, i).toLocaleString(locale, { month: 'short' })),
+                placeholderChar: 'M',
+                maxLength: 3,
+            },
+            MMMM: {
+                mask: IMask.MaskedEnum,
+                enum: Array.from({ length: 12 }, (_, i) => new Date(0, i).toLocaleString(locale, { month: 'long' })),
+                placeholderChar: "M",
+                maxLength: 4
+            },
+            DD: {
+                mask: IMask.MaskedRange,
+                from: 1,
+                to: 31,
+                placeholderChar: 'D',
+                maxLength: 2,
+            },
+            D: {
+                mask: IMask.MaskedRange,
+                from: 1,
+                to: 31,
+                placeholderChar: 'D',
+                maxLength: 2,
+            },
+            ddd: {
+                mask: IMask.MaskedEnum,
+                enum: Array.from({ length: 7 }, (_, i) => new Date(0, 0, i + 1).toLocaleString(locale, { weekday: 'short' })),
+                placeholderChar: 'E',
+                maxLength: 3,
+            },
+            dddd: {
+                mask: IMask.MaskedEnum,
+                enum: Array.from({ length: 7 }, (_, i) => new Date(0, 0, i + 1).toLocaleString(locale, { weekday: 'long' })),
+                placeholderChar: 'E',
+                minLength: 6,
+            },
+        },
+        autofix: true,
+        lazy: false,
+        overwrite: true,
+        skipInvalid: true
+    };
+}
+
+const _c0$2 = ["dateInput"];
+const _c1 = ["wmDate", ""];
+function DateComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "wm-datetimepicker", 9);
+    i0.ɵɵlistener("change", function DateComponent_ng_template_8_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onDateChange($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 9);
-    i0.ɵɵlistener("click", function DateComponent_ng_template_7_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r4.disabled || ctx_r4.readonly || ctx_r4.isCurrentDate) && ctx_r4.showDatePickerModal(ctx_r4.bsDataValue)); })("focus", function DateComponent_ng_template_7_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r5 = i0.ɵɵnextContext(); ctx_r5.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r5.invokeOnFocus($event)); })("blur", function DateComponent_ng_template_7_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r6 = i0.ɵɵnextContext(); ctx_r6.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r6.invokeOnTouched($event)); });
+    i0.ɵɵelementStart(1, "div", 10);
+    i0.ɵɵlistener("click", function DateComponent_ng_template_8_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r5.disabled || ctx_r5.readonly || ctx_r5.isCurrentDate) && ctx_r5.showDatePickerModal(ctx_r5.bsDataValue)); })("focus", function DateComponent_ng_template_8_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r6 = i0.ɵɵnextContext(); ctx_r6.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r6.invokeOnFocus($event)); })("blur", function DateComponent_ng_template_8_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r7 = i0.ɵɵnextContext(); ctx_r7.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r7.invokeOnTouched($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("config", ctx_r1._dateOptions)("placement", ctx_r1.modal)("excludedDaysToDisable", ctx_r1.excludedDaysToDisable)("excludedDatesToDisable", ctx_r1.excludedDatesToDisable)("displayFormat", ctx_r1.dateInputFormat)("value", ctx_r1.bsDataValue);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("config", ctx_r2._dateOptions)("placement", ctx_r2.modal)("excludedDaysToDisable", ctx_r2.excludedDaysToDisable)("excludedDatesToDisable", ctx_r2.excludedDatesToDisable)("displayFormat", ctx_r2.dateInputFormat)("value", ctx_r2.bsDataValue);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("tabindex", ctx_r1.tabindex || 0);
-    i0.ɵɵattribute("aria-label", ctx_r1.displayValue ? "Change Date " + ctx_r1.displayValue : ctx_r1.hint || "Choose Date");
+    i0.ɵɵproperty("tabindex", ctx_r2.tabindex || 0);
+    i0.ɵɵattribute("aria-label", ctx_r2.displayValue ? "Change Date " + ctx_r2.displayValue : ctx_r2.hint || "Choose Date");
 } }
 const CURRENT_DATE$1 = 'CURRENT_DATE';
 const DEFAULT_CLS$2 = 'app-date input-group';
@@ -1732,6 +1842,7 @@ class DateComponent extends BaseDateTimeComponent {
         this.appDefaults = appDefaults;
         this.isOpen = false;
         this.isEnterPressedOnDateInput = false;
+        this.showdateformatasplaceholder = false;
         styler(this.nativeElement, this);
         this.dateContainerCls = `app-date-${this.widgetId}`;
         this._dateOptions.containerClass = `app-date ${this.dateContainerCls}`;
@@ -1744,6 +1855,7 @@ class DateComponent extends BaseDateTimeComponent {
      * This is an internal method triggered when the date input changes
      */
     onDisplayDateChange($event, isNativePicker = false) {
+        this.updateIMask();
         if (this.isEnterPressedOnDateInput) {
             this.isEnterPressedOnDateInput = false;
             return;
@@ -1772,6 +1884,7 @@ class DateComponent extends BaseDateTimeComponent {
         }
         if (newVal) {
             this.bsDataValue = newVal;
+            this.updateIMask();
         }
         else {
             this.bsDataValue = undefined;
@@ -1784,6 +1897,7 @@ class DateComponent extends BaseDateTimeComponent {
         if (!this.bsDataValue) {
             this.hightlightToday(this.activeDate);
         }
+        this.updateIMask();
         // We are using the two input tags(To maintain the modal and proxy modal) for the date control.
         // So actual bootstrap input target width we made it to 0, so bootstrap calculating the calendar container top position improperly.
         // To fix the container top position set the width 1px;
@@ -1799,11 +1913,15 @@ class DateComponent extends BaseDateTimeComponent {
         adjustContainerRightEdges($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
     }
     onInputBlur($event) {
+        this.updateIMask();
         if (!$($event.relatedTarget).hasClass('current-date')) {
             this.invokeOnTouched();
             this.invokeEventCallback('blur', { $event });
         }
     }
+    updateIMask() {
+        this.imask?.maskRef?.updateValue();
+    }
     hideDatepickerDropdown() {
         this.invokeOnTouched();
         this.isOpen = false;
@@ -1878,6 +1996,7 @@ class DateComponent extends BaseDateTimeComponent {
                     this.invalidDateTimeFormat = false;
                     this.isEnterPressedOnDateInput = true;
                     this.bsDatePickerDirective.bsValue = event.target.value ? newVal : '';
+                    this.updateIMask();
                 }
                 this.toggleDpDropdown(event);
             }
@@ -1905,32 +2024,42 @@ class DateComponent extends BaseDateTimeComponent {
         }
         this.setDataValue(newVal);
     }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.imask.destroyMask();
+        if (this.showdateformatasplaceholder && this.datepattern !== 'timestamp') {
+            this.mask = validateTheMaskedDate(this.datepattern, this.selectedLocale);
+            this.updateIMask();
+        }
+    }
     static { this.ɵfac = function DateComponent_Factory(t) { return new (t || DateComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.AppDefaults)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DateComponent, selectors: [["", "wmDate", ""]], viewQuery: function DateComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(BsDatepickerDirective, 5);
+            i0.ɵɵviewQuery(_c0$2, 5, IMaskDirective);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.bsDatePickerDirective = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.imask = _t.first);
         } }, features: [i0.ɵɵProvidersFeature([
                 provideAs(DateComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(DateComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(DateComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$2, decls: 8, vars: 25, consts: [["focus-target", "", "type", "text", 1, "form-control", "app-textbox", "app-dateinput", "display-input", 3, "name", "tabindex", "value", "disabled", "autofocus", "required", "readOnly", "click", "focus", "blur", "change", "keydown"], [1, "input-group-btn"], ["type", "button", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-time", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-calendar"], [2, "width", "0", "display", "inline-block"], ["aria-label", "datepicker dropdownmenu", "aria-controls", "date", "bsDatepicker", "", "placement", "bottom right", 1, "model-holder", 3, "tabindex", "container", "bsConfig", "isOpen", "daysDisabled", "datesDisabled", "isDisabled", "bsValue", "onShown", "onHidden", "bsValueChange"], ["datepicker", "bsDatepicker"], [3, "ngIf"], ["dateTimePicker", "", "mode", "DATE", 3, "config", "placement", "excludedDaysToDisable", "excludedDatesToDisable", "displayFormat", "value", "change"], ["role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "tabindex", "click", "focus", "blur"]], template: function DateComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "input", 0);
-            i0.ɵɵlistener("click", function DateComponent_Template_input_click_0_listener($event) { return ctx.toggleDpDropdown($event, true); })("focus", function DateComponent_Template_input_focus_0_listener($event) { ctx.onDateTimeInputFocus(); return ctx.invokeOnFocus($event); })("blur", function DateComponent_Template_input_blur_0_listener($event) { return ctx.onInputBlur($event); })("change", function DateComponent_Template_input_change_0_listener($event) { return ctx.onDisplayDateChange($event); })("keydown", function DateComponent_Template_input_keydown_0_listener($event) { ctx._triggeredByUser = true; return ctx.onDisplayKeydown($event); });
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 9, vars: 27, consts: [["focus-target", "", "type", "text", 1, "form-control", "app-textbox", "app-dateinput", "display-input", 3, "name", "imask", "unmask", "tabindex", "value", "disabled", "autofocus", "required", "readOnly", "click", "focus", "blur", "change", "keydown"], ["dateInput", ""], [1, "input-group-btn"], ["type", "button", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-time", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-calendar"], [2, "width", "0", "display", "inline-block"], ["aria-label", "datepicker dropdownmenu", "aria-controls", "date", "bsDatepicker", "", "placement", "bottom right", 1, "model-holder", 3, "tabindex", "container", "bsConfig", "isOpen", "daysDisabled", "datesDisabled", "isDisabled", "bsValue", "onShown", "onHidden", "bsValueChange"], ["datepicker", "bsDatepicker"], [3, "ngIf"], ["dateTimePicker", "", "mode", "DATE", 3, "config", "placement", "excludedDaysToDisable", "excludedDatesToDisable", "displayFormat", "value", "change"], ["role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "tabindex", "click", "focus", "blur"]], template: function DateComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "input", 0, 1);
+            i0.ɵɵlistener("click", function DateComponent_Template_input_click_0_listener($event) { return ctx.toggleDpDropdown($event, true); })("focus", function DateComponent_Template_input_focus_0_listener($event) { ctx.onDateTimeInputFocus(); ctx.invokeOnFocus($event); return ctx.updateIMask(); })("blur", function DateComponent_Template_input_blur_0_listener($event) { return ctx.onInputBlur($event); })("change", function DateComponent_Template_input_change_0_listener($event) { return ctx.onDisplayDateChange($event); })("keydown", function DateComponent_Template_input_keydown_0_listener($event) { ctx._triggeredByUser = true; return ctx.onDisplayKeydown($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(1, "span", 1)(2, "button", 2);
-            i0.ɵɵlistener("click", function DateComponent_Template_button_click_2_listener($event) { return ctx.toggleDpDropdown($event, false); });
-            i0.ɵɵelement(3, "i", 3);
+            i0.ɵɵelementStart(2, "span", 2)(3, "button", 3);
+            i0.ɵɵlistener("click", function DateComponent_Template_button_click_3_listener($event) { return ctx.toggleDpDropdown($event, false); });
+            i0.ɵɵelement(4, "i", 4);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(4, "div", 4)(5, "input", 5, 6);
-            i0.ɵɵlistener("onShown", function DateComponent_Template_input_onShown_5_listener() { return ctx.onDatePickerOpen(); })("onHidden", function DateComponent_Template_input_onHidden_5_listener() { return ctx.hideDatepickerDropdown(); })("bsValueChange", function DateComponent_Template_input_bsValueChange_5_listener($event) { return ctx.onDateChange($event); });
+            i0.ɵɵelementStart(5, "div", 5)(6, "input", 6, 7);
+            i0.ɵɵlistener("onShown", function DateComponent_Template_input_onShown_6_listener() { return ctx.onDatePickerOpen(); })("onHidden", function DateComponent_Template_input_onHidden_6_listener() { return ctx.hideDatepickerDropdown(); })("bsValueChange", function DateComponent_Template_input_bsValueChange_6_listener($event) { return ctx.onDateChange($event); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(7, DateComponent_ng_template_7_Template, 2, 8, "ng-template", 7);
+            i0.ɵɵtemplate(8, DateComponent_ng_template_8_Template, 2, 8, "ng-template", 8);
         } if (rf & 2) {
-            i0.ɵɵproperty("name", ctx.name)("tabindex", ctx.loadNativeDateInput ? "-1" : ctx.tabindex)("value", ctx.displayValue)("disabled", ctx.disabled || ctx.readonly)("autofocus", ctx.autofocus)("required", ctx.required)("readOnly", ctx.isReadOnly);
+            i0.ɵɵproperty("name", ctx.name)("imask", ctx.mask)("unmask", true)("tabindex", ctx.loadNativeDateInput ? "-1" : ctx.tabindex)("value", ctx.displayValue)("disabled", ctx.disabled || ctx.readonly)("autofocus", ctx.autofocus)("required", ctx.required)("readOnly", ctx.isReadOnly);
             i0.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
-            i0.ɵɵadvance(2);
+            i0.ɵɵadvance(3);
             i0.ɵɵproperty("tabindex", ctx.loadNativeDateInput ? "-1" : ctx.tabindex)("disabled", ctx.disabled || ctx.readonly);
             i0.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput)("aria-label", ctx.displayValue ? "Change Date " + ctx.displayValue : "Choose date by pressing enter");
             i0.ɵɵadvance(3);
@@ -1938,7 +2067,7 @@ class DateComponent extends BaseDateTimeComponent {
             i0.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
-        } }, dependencies: [i2.NgIf, i3.BsDatepickerDirective, i3.BsDatepickerInputDirective, DateTimePickerComponent], encapsulation: 2 }); }
+        } }, dependencies: [i2.NgIf, i3.BsDatepickerDirective, i3.BsDatepickerInputDirective, i4.IMaskDirective, DateTimePickerComponent], encapsulation: 2 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateComponent, [{
         type: Component,
@@ -1946,10 +2075,13 @@ class DateComponent extends BaseDateTimeComponent {
                     provideAs(DateComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(DateComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(DateComponent)
-                ], template: "    <input class=\"form-control app-textbox app-dateinput display-input\"\n        focus-target\n        type=\"text\"\n        [name]=\"name\"\n        [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 || '.wm-app'\"\n        [bsConfig]=\"_dateOptions\"\n        [isOpen]=\"isOpen\"\n        #datepicker=\"bsDatepicker\"\n        bsDatepicker\n        [daysDisabled]=\"excludedDaysToDisable\"\n        [datesDisabled]=\"excludedDatesToDisable\"\n        placement=\"bottom right\"\n        [isDisabled]=\"disabled || readonly\"\n        [bsValue]=\"bsDataValue\"\n        (onShown)=\"onDatePickerOpen()\"\n        (onHidden)=\"hideDatepickerDropdown()\"\n        (bsValueChange)=\"onDateChange($event)\">\n</div>\n\n<ng-template [ngIf]=\"loadNativeDateInput\">\n    <wm-datetimepicker\n        dateTimePicker\n        mode=\"DATE\"\n        [config]=\"_dateOptions\"\n        [placement]=\"modal\"\n        [excludedDaysToDisable]=\"excludedDaysToDisable\"\n        [excludedDatesToDisable]=\"excludedDatesToDisable\"\n        [displayFormat]=\"dateInputFormat\"\n        [value]=\"bsDataValue\"\n        (change)=\"onDateChange($event)\">\n    </wm-datetimepicker>\n    <div class=\"mobile-input mobile-datepicker-container\"\n        [tabindex]=\"tabindex || 0\"\n         (click)=\"!(disabled || readonly || isCurrentDate) && showDatePickerModal(bsDataValue)\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event);\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n         [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : hint || 'Choose Date'\"\n         role=\"button\">\n    </div>\n</ng-template>\n" }]
+                ], template: "    <input class=\"form-control app-textbox app-dateinput display-input\"\n        focus-target\n        type=\"text\"\n        [name]=\"name\"\n        #dateInput\n        [imask]=\"mask\"\n        [unmask]=\"true\"\n        [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n        [attr.aria-hidden]=\"!!loadNativeDateInput\"\n        [value]=\"displayValue\"\n        (click)=\"toggleDpDropdown($event, true)\"\n        (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event); updateIMask()\"\n        (blur)=\"onInputBlur($event)\"\n        [disabled]=\"disabled || readonly\"\n        [autofocus]=\"autofocus\"\n        [required]=\"required\"\n        [readOnly]=\"isReadOnly\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.accesskey]=\"shortcutkey\"\n        [attr.aria-label]=\"hint\"\n        (change)=\"onDisplayDateChange($event)\"\n        (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event);\">\n\n    <span class=\"input-group-btn\">\n        <button type=\"button\"\n            class=\"btn btn-default btn-time\"\n            [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n            [attr.aria-hidden]=\"!!loadNativeDateInput\"\n            [disabled]=\"disabled || readonly\"\n            [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : 'Choose date by pressing enter'\"\n            aria-haspopup=\"true\"\n            aria-expanded=\"false\"\n            (click)=\"toggleDpDropdown($event, false)\">\n            <i aria-hidden=\"true\"\n                class=\"app-icon wm-sl-l sl-calendar\"></i>\n        </button>\n    </span>\n    <div style=\"width: 0;display: inline-block;\">\n    <input class=\"model-holder\"\n        aria-label=\"datepicker dropdownmenu\"\n        aria-controls=\"date\"\n        [tabindex]=\"-1\"\n        [attr.aria-hidden]=\"!!loadNativeDateInput\"\n        [container]=\"containerTarget || '.wm-app'\"\n        [bsConfig]=\"_dateOptions\"\n        [isOpen]=\"isOpen\"\n        #datepicker=\"bsDatepicker\"\n        bsDatepicker\n        [daysDisabled]=\"excludedDaysToDisable\"\n        [datesDisabled]=\"excludedDatesToDisable\"\n        placement=\"bottom right\"\n        [isDisabled]=\"disabled || readonly\"\n        [bsValue]=\"bsDataValue\"\n        (onShown)=\"onDatePickerOpen()\"\n        (onHidden)=\"hideDatepickerDropdown()\"\n        (bsValueChange)=\"onDateChange($event)\">\n</div>\n\n<ng-template [ngIf]=\"loadNativeDateInput\">\n    <wm-datetimepicker\n        dateTimePicker\n        mode=\"DATE\"\n        [config]=\"_dateOptions\"\n        [placement]=\"modal\"\n        [excludedDaysToDisable]=\"excludedDaysToDisable\"\n        [excludedDatesToDisable]=\"excludedDatesToDisable\"\n        [displayFormat]=\"dateInputFormat\"\n        [value]=\"bsDataValue\"\n        (change)=\"onDateChange($event)\">\n    </wm-datetimepicker>\n    <div class=\"mobile-input mobile-datepicker-container\"\n        [tabindex]=\"tabindex || 0\"\n         (click)=\"!(disabled || readonly || isCurrentDate) && showDatePickerModal(bsDataValue)\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event);\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n         [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : hint || 'Choose Date'\"\n         role=\"button\">\n    </div>\n</ng-template>\n" }]
     }], function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.AppDefaults }]; }, { bsDatePickerDirective: [{
             type: ViewChild,
             args: [BsDatepickerDirective]
+        }], imask: [{
+            type: ViewChild,
+            args: ['dateInput', { read: IMaskDirective }]
         }] }); })();
 
 const dateTimeProps = new Map([
@@ -2460,7 +2592,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
             i0.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
-        } }, dependencies: [i2.NgIf, i3.BsDatepickerDirective, i3.BsDatepickerInputDirective, i4.BsDropdownMenuDirective, i4.BsDropdownDirective, i5.NgControlStatus, i5.NgModel, i6.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
+        } }, dependencies: [i2.NgIf, i3.BsDatepickerDirective, i3.BsDatepickerInputDirective, i4$1.BsDropdownMenuDirective, i4$1.BsDropdownDirective, i5.NgControlStatus, i5.NgModel, i6.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatetimeComponent, [{
         type: Component,
@@ -2850,7 +2982,7 @@ class TimeComponent extends BaseDateTimeComponent {
             i0.ɵɵproperty("tabindex", ctx.tabindex)("disabled", ctx.disabled || ctx.readonly || ctx.isCurrentTime);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
-        } }, dependencies: [i2.NgIf, i4.BsDropdownMenuDirective, i4.BsDropdownDirective, i5.NgControlStatus, i5.NgModel, i6.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
+        } }, dependencies: [i2.NgIf, i4$1.BsDropdownMenuDirective, i4$1.BsDropdownDirective, i5.NgControlStatus, i5.NgModel, i6.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeComponent, [{
         type: Component,
@@ -2879,7 +3011,8 @@ class EpochModule {
             BsDropdownModule,
             FormsModule,
             TimepickerModule,
-            WmComponentsModule] }); }
+            WmComponentsModule,
+            IMaskModule] }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EpochModule, [{
         type: NgModule,
@@ -2890,7 +3023,8 @@ class EpochModule {
                     BsDropdownModule,
                     FormsModule,
                     TimepickerModule,
-                    WmComponentsModule
+                    WmComponentsModule,
+                    IMaskModule
                 ],
                 declarations: [...components],
                 exports: [...components]
@@ -2907,7 +3041,8 @@ class EpochModule {
         BsDropdownModule,
         FormsModule,
         TimepickerModule,
-        WmComponentsModule], exports: [DateComponent,
+        WmComponentsModule,
+        IMaskModule], exports: [DateComponent,
         DatetimeComponent,
         TimeComponent,
         DateTimePickerComponent,