@wavemaker/app-ng-runtime 11.7.3-next.26386 → 11.7.3-next.26388

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ngx-bootstrap/datepicker'), require('ngx-bootstrap/dropdown'), require('ngx-bootstrap/timepicker'), require('@wm/components/base'), require('@wm/core'), require('@wm/components/input'), require('ngx-bootstrap/modal')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'ngx-bootstrap/datepicker', 'ngx-bootstrap/dropdown', 'ngx-bootstrap/timepicker', '@wm/components/base', '@wm/core', '@wm/components/input', 'ngx-bootstrap/modal'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = global.wm.components.input || {}, global.wm.components.input.epoch = {}), global.ng.core, global.ng.common, global.ng.forms, global.datepicker, global.dropdown, global.timepicker, global.wm.components.base, global.wm.core, global.wm.components.input, global.modal));
-})(this, (function (exports, i0, i2, i5, i3, i4, i6, base, i1$1, input, i1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ngx-bootstrap/datepicker'), require('ngx-bootstrap/dropdown'), require('ngx-bootstrap/timepicker'), require('@wm/components/base'), require('@wm/core'), require('@wm/components/input'), require('ngx-bootstrap/modal'), require('imask'), require('angular-imask')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'ngx-bootstrap/datepicker', 'ngx-bootstrap/dropdown', 'ngx-bootstrap/timepicker', '@wm/components/base', '@wm/core', '@wm/components/input', 'ngx-bootstrap/modal', 'imask', 'angular-imask'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = global.wm.components.input || {}, global.wm.components.input.epoch = {}), global.ng.core, global.ng.common, global.ng.forms, global.datepicker, global.dropdown, global.timepicker, global.wm.components.base, global.wm.core, global.wm.components.input, global.modal, global.IMask, global.angularIMask));
+})(this, (function (exports, i0, i2, i5, i3, i4$1, i6, base, i1$1, input, i1, IMask, i4) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -25,10 +25,11 @@
     var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
     var i5__namespace = /*#__PURE__*/_interopNamespaceDefault(i5);
     var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
-    var i4__namespace = /*#__PURE__*/_interopNamespaceDefault(i4);
+    var i4$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i4$1);
     var i6__namespace = /*#__PURE__*/_interopNamespaceDefault(i6);
     var i1$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1$1);
     var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+    var i4__namespace = /*#__PURE__*/_interopNamespaceDefault(i4);
 
     const _c0$4 = ["*"];
     function PickerComponent_div_6_Template(rf, ctx) { if (rf & 1) {
@@ -1620,7 +1621,7 @@
         }
         static { this.ɵfac = function BaseDateTimeComponent_Factory(t) { i0__namespace.ɵɵinvalidFactory(); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: BaseDateTimeComponent, viewQuery: function BaseDateTimeComponent_Query(rf, ctx) { if (rf & 1) {
-                i0__namespace.ɵɵviewQuery(i4.BsDropdownDirective, 5);
+                i0__namespace.ɵɵviewQuery(i4$1.BsDropdownDirective, 5);
                 i0__namespace.ɵɵviewQuery(i6.TimepickerComponent, 5);
                 i0__namespace.ɵɵviewQuery(DateTimePickerComponent, 5);
             } if (rf & 2) {
@@ -1634,7 +1635,7 @@
             type: i0.Directive
         }], function () { return [{ type: i0__namespace.Injector }, { type: undefined }]; }, { bsDropdown: [{
                 type: i0.ViewChild,
-                args: [i4.BsDropdownDirective]
+                args: [i4$1.BsDropdownDirective]
             }], bsTimePicker: [{
                 type: i0.ViewChild,
                 args: [i6.TimepickerComponent]
@@ -1674,28 +1675,135 @@
         ['clearbutton', { value: true, ...base.PROP_BOOLEAN }],
         ['adaptiveposition', { value: true, ...base.PROP_BOOLEAN }],
         ['todaybuttonlabel', { value: 'LABEL_TODAY_DATE', ...base.PROP_STRING }],
-        ['clearbuttonlabel', { value: 'LABEL_CLEAR_DATE', ...base.PROP_STRING }]
+        ['clearbuttonlabel', { value: 'LABEL_CLEAR_DATE', ...base.PROP_STRING }],
+        ['showdateformatasplaceholder', base.PROP_BOOLEAN],
     ]);
     const registerProps$2 = () => {
         base.register('wm-date', dateProps);
         base.registerFormWidget(i1$1.FormWidgetType.DATE, new Map(dateProps));
     };
 
-    const _c0$2 = ["wmDate", ""];
-    function DateComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
-        const _r3 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "wm-datetimepicker", 8);
-        i0__namespace.ɵɵlistener("change", function DateComponent_ng_template_7_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+        i0__namespace.ɵɵelementStart(0, "wm-datetimepicker", 9);
+        i0__namespace.ɵɵlistener("change", function DateComponent_ng_template_8_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.onDateChange($event)); });
         i0__namespace.ɵɵelementEnd();
-        i0__namespace.ɵɵelementStart(1, "div", 9);
-        i0__namespace.ɵɵlistener("click", function DateComponent_ng_template_7_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r3); const ctx_r4 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r3); const ctx_r5 = i0__namespace.ɵɵnextContext(); ctx_r5.onDateTimeInputFocus(true); return i0__namespace.ɵɵresetView(ctx_r5.invokeOnFocus($event)); })("blur", function DateComponent_ng_template_7_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r6 = i0__namespace.ɵɵnextContext(); ctx_r6.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r6.invokeOnTouched($event)); });
+        i0__namespace.ɵɵelementStart(1, "div", 10);
+        i0__namespace.ɵɵlistener("click", function DateComponent_ng_template_8_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r4); const ctx_r5 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r4); const ctx_r6 = i0__namespace.ɵɵnextContext(); ctx_r6.onDateTimeInputFocus(true); return i0__namespace.ɵɵresetView(ctx_r6.invokeOnFocus($event)); })("blur", function DateComponent_ng_template_8_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r7 = i0__namespace.ɵɵnextContext(); ctx_r7.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r7.invokeOnTouched($event)); });
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵ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__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵ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__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("tabindex", ctx_r1.tabindex || 0);
-        i0__namespace.ɵɵattribute("aria-label", ctx_r1.displayValue ? "Change Date " + ctx_r1.displayValue : ctx_r1.hint || "Choose Date");
+        i0__namespace.ɵɵproperty("tabindex", ctx_r2.tabindex || 0);
+        i0__namespace.ɵɵ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';
@@ -1746,6 +1854,7 @@
             this.appDefaults = appDefaults;
             this.isOpen = false;
             this.isEnterPressedOnDateInput = false;
+            this.showdateformatasplaceholder = false;
             base.styler(this.nativeElement, this);
             this.dateContainerCls = `app-date-${this.widgetId}`;
             this._dateOptions.containerClass = `app-date ${this.dateContainerCls}`;
@@ -1758,6 +1867,7 @@
          * This is an internal method triggered when the date input changes
          */
         onDisplayDateChange($event, isNativePicker = false) {
+            this.updateIMask();
             if (this.isEnterPressedOnDateInput) {
                 this.isEnterPressedOnDateInput = false;
                 return;
@@ -1786,6 +1896,7 @@
             }
             if (newVal) {
                 this.bsDataValue = newVal;
+                this.updateIMask();
             }
             else {
                 this.bsDataValue = undefined;
@@ -1798,6 +1909,7 @@
             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;
@@ -1813,11 +1925,15 @@
             i1$1.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;
@@ -1892,6 +2008,7 @@
                         this.invalidDateTimeFormat = false;
                         this.isEnterPressedOnDateInput = true;
                         this.bsDatePickerDirective.bsValue = event.target.value ? newVal : '';
+                        this.updateIMask();
                     }
                     this.toggleDpDropdown(event);
                 }
@@ -1919,32 +2036,42 @@
             }
             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__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.ChangeDetectorRef), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.AppDefaults)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: DateComponent, selectors: [["", "wmDate", ""]], viewQuery: function DateComponent_Query(rf, ctx) { if (rf & 1) {
                 i0__namespace.ɵɵviewQuery(i3.BsDatepickerDirective, 5);
+                i0__namespace.ɵɵviewQuery(_c0$2, 5, i4.IMaskDirective);
             } if (rf & 2) {
                 let _t;
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.bsDatePickerDirective = _t.first);
+                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.imask = _t.first);
             } }, features: [i0__namespace.ɵɵProvidersFeature([
                     base.provideAs(DateComponent, i5.NG_VALUE_ACCESSOR, true),
                     base.provideAs(DateComponent, i5.NG_VALIDATORS, true),
                     base.provideAsWidgetRef(DateComponent)
-                ]), i0__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "input", 0);
-                i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "input", 0, 1);
+                i0__namespace.ɵɵ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__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵelementStart(1, "span", 1)(2, "button", 2);
-                i0__namespace.ɵɵlistener("click", function DateComponent_Template_button_click_2_listener($event) { return ctx.toggleDpDropdown($event, false); });
-                i0__namespace.ɵɵelement(3, "i", 3);
+                i0__namespace.ɵɵelementStart(2, "span", 2)(3, "button", 3);
+                i0__namespace.ɵɵlistener("click", function DateComponent_Template_button_click_3_listener($event) { return ctx.toggleDpDropdown($event, false); });
+                i0__namespace.ɵɵelement(4, "i", 4);
                 i0__namespace.ɵɵelementEnd()();
-                i0__namespace.ɵɵelementStart(4, "div", 4)(5, "input", 5, 6);
-                i0__namespace.ɵɵ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__namespace.ɵɵelementStart(5, "div", 5)(6, "input", 6, 7);
+                i0__namespace.ɵɵ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__namespace.ɵɵelementEnd()();
-                i0__namespace.ɵɵtemplate(7, DateComponent_ng_template_7_Template, 2, 8, "ng-template", 7);
+                i0__namespace.ɵɵtemplate(8, DateComponent_ng_template_8_Template, 2, 8, "ng-template", 8);
             } if (rf & 2) {
-                i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
-                i0__namespace.ɵɵadvance(2);
+                i0__namespace.ɵɵadvance(3);
                 i0__namespace.ɵɵproperty("tabindex", ctx.loadNativeDateInput ? "-1" : ctx.tabindex)("disabled", ctx.disabled || ctx.readonly);
                 i0__namespace.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput)("aria-label", ctx.displayValue ? "Change Date " + ctx.displayValue : "Choose date by pressing enter");
                 i0__namespace.ɵɵadvance(3);
@@ -1952,7 +2079,7 @@
                 i0__namespace.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput);
                 i0__namespace.ɵɵadvance(2);
                 i0__namespace.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
-            } }, dependencies: [i2__namespace.NgIf, i3__namespace.BsDatepickerDirective, i3__namespace.BsDatepickerInputDirective, DateTimePickerComponent], encapsulation: 2 }); }
+            } }, dependencies: [i2__namespace.NgIf, i3__namespace.BsDatepickerDirective, i3__namespace.BsDatepickerInputDirective, i4__namespace.IMaskDirective, DateTimePickerComponent], encapsulation: 2 }); }
     }
     (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DateComponent, [{
             type: i0.Component,
@@ -1960,10 +2087,13 @@
                         base.provideAs(DateComponent, i5.NG_VALUE_ACCESSOR, true),
                         base.provideAs(DateComponent, i5.NG_VALIDATORS, true),
                         base.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__namespace.Injector }, { type: i0__namespace.ChangeDetectorRef }, { type: i1$1__namespace.AppDefaults }]; }, { bsDatePickerDirective: [{
                 type: i0.ViewChild,
                 args: [i3.BsDatepickerDirective]
+            }], imask: [{
+                type: i0.ViewChild,
+                args: ['dateInput', { read: i4.IMaskDirective }]
             }] }); })();
 
     const dateTimeProps = new Map([
@@ -2474,7 +2604,7 @@
                 i0__namespace.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput);
                 i0__namespace.ɵɵadvance(3);
                 i0__namespace.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
-            } }, dependencies: [i2__namespace.NgIf, i3__namespace.BsDatepickerDirective, i3__namespace.BsDatepickerInputDirective, i4__namespace.BsDropdownMenuDirective, i4__namespace.BsDropdownDirective, i5__namespace.NgControlStatus, i5__namespace.NgModel, i6__namespace.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
+            } }, dependencies: [i2__namespace.NgIf, i3__namespace.BsDatepickerDirective, i3__namespace.BsDatepickerInputDirective, i4$1__namespace.BsDropdownMenuDirective, i4$1__namespace.BsDropdownDirective, i5__namespace.NgControlStatus, i5__namespace.NgModel, i6__namespace.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
     }
     (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DatetimeComponent, [{
             type: i0.Component,
@@ -2864,7 +2994,7 @@
                 i0__namespace.ɵɵproperty("tabindex", ctx.tabindex)("disabled", ctx.disabled || ctx.readonly || ctx.isCurrentTime);
                 i0__namespace.ɵɵadvance(3);
                 i0__namespace.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
-            } }, dependencies: [i2__namespace.NgIf, i4__namespace.BsDropdownMenuDirective, i4__namespace.BsDropdownDirective, i5__namespace.NgControlStatus, i5__namespace.NgModel, i6__namespace.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
+            } }, dependencies: [i2__namespace.NgIf, i4$1__namespace.BsDropdownMenuDirective, i4$1__namespace.BsDropdownDirective, i5__namespace.NgControlStatus, i5__namespace.NgModel, i6__namespace.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
     }
     (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TimeComponent, [{
             type: i0.Component,
@@ -2890,10 +3020,11 @@
         static { this.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: EpochModule }); }
         static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [i2.CommonModule,
                 i3.BsDatepickerModule,
-                i4.BsDropdownModule,
+                i4$1.BsDropdownModule,
                 i5.FormsModule,
                 i6.TimepickerModule,
-                base.WmComponentsModule] }); }
+                base.WmComponentsModule,
+                i4.IMaskModule] }); }
     }
     (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(EpochModule, [{
             type: i0.NgModule,
@@ -2901,10 +3032,11 @@
                     imports: [
                         i2.CommonModule,
                         i3.BsDatepickerModule,
-                        i4.BsDropdownModule,
+                        i4$1.BsDropdownModule,
                         i5.FormsModule,
                         i6.TimepickerModule,
-                        base.WmComponentsModule
+                        base.WmComponentsModule,
+                        i4.IMaskModule
                     ],
                     declarations: [...components],
                     exports: [...components]
@@ -2918,10 +3050,11 @@
             PickerComponent,
             PickerGroupComponent], imports: [i2.CommonModule,
             i3.BsDatepickerModule,
-            i4.BsDropdownModule,
+            i4$1.BsDropdownModule,
             i5.FormsModule,
             i6.TimepickerModule,
-            base.WmComponentsModule], exports: [DateComponent,
+            base.WmComponentsModule,
+            i4.IMaskModule], exports: [DateComponent,
             DatetimeComponent,
             TimeComponent,
             DateTimePickerComponent,

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

@@ -1,8 +1,9 @@
-import { ChangeDetectorRef, Injector } from '@angular/core';
+import { ChangeDetectorRef, Injector, AfterViewInit } from '@angular/core';
 import { AppDefaults } from '@wm/core';
 import { BaseDateTimeComponent } from './../base-date-time.component';
+import { IMaskDirective } from 'angular-imask';
 import * as i0 from "@angular/core";
-export declare class DateComponent extends BaseDateTimeComponent {
+export declare class DateComponent extends BaseDateTimeComponent implements AfterViewInit {
     private cdRef;
     private appDefaults;
     static initializeProps: void;
@@ -16,6 +17,8 @@ export declare class DateComponent extends BaseDateTimeComponent {
     private deregisterEventListener;
     private isCurrentDate;
     private focusTrap;
+    private showdateformatasplaceholder;
+    mask: any;
     get timestamp(): any;
     get dateInputFormat(): string;
     get displayValue(): any;
@@ -23,6 +26,7 @@ export declare class DateComponent extends BaseDateTimeComponent {
     get datavalue(): any;
     set datavalue(newVal: any);
     protected bsDatePickerDirective: any;
+    imask: IMaskDirective<any>;
     constructor(inj: Injector, cdRef: ChangeDetectorRef, appDefaults: AppDefaults);
     /**
      * This is an internal method triggered when the date input changes
@@ -31,6 +35,7 @@ export declare class DateComponent extends BaseDateTimeComponent {
     private setDataValue;
     onDatePickerOpen(): void;
     onInputBlur($event: any): void;
+    updateIMask(): void;
     hideDatepickerDropdown(): void;
     protected handleEvent(node: HTMLElement, eventName: string, callback: Function, locals: any): void;
     /**
@@ -46,6 +51,7 @@ export declare class DateComponent extends BaseDateTimeComponent {
      * This is an internal method triggered when the date selection changes
      */
     onDateChange(newVal: any): void;
+    ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DateComponent, "[wmDate]", never, {}, {}, never, never, false, never>;
 }

app-ng-runtime/components/input/epoch/date/imaskUtil.d.ts

@@ -0,0 +1,92 @@
+export declare function validateTheMaskedDate(format: any, locale: any): false | {
+    mask: DateConstructor;
+    pattern: any;
+    format: (date: any) => any;
+    parse: (str: any) => any;
+    blocks: {
+        YYYY: {
+            mask: typeof import("imask").MaskedRange;
+            from: number;
+            to: number;
+            placeholderChar: string;
+            maxLength: number;
+        };
+        YYY: {
+            mask: typeof import("imask").MaskedRange;
+            from: number;
+            to: number;
+            placeholderChar: string;
+            maxLength: number;
+        };
+        YY: {
+            mask: typeof import("imask").MaskedRange;
+            from: number;
+            to: number;
+            placeholderChar: string;
+            maxLength: number;
+        };
+        Y: {
+            mask: typeof import("imask").MaskedRange;
+            from: number;
+            to: number;
+            placeholderChar: string;
+            maxLength: number;
+        };
+        M: {
+            mask: typeof import("imask").MaskedRange;
+            from: number;
+            to: number;
+            placeholderChar: string;
+            maxLength: number;
+        };
+        MM: {
+            mask: typeof import("imask").MaskedRange;
+            from: number;
+            to: number;
+            placeholderChar: string;
+            maxLength: number;
+        };
+        MMM: {
+            mask: typeof import("imask").MaskedEnum;
+            enum: string[];
+            placeholderChar: string;
+            maxLength: number;
+        };
+        MMMM: {
+            mask: typeof import("imask").MaskedEnum;
+            enum: string[];
+            placeholderChar: string;
+            maxLength: number;
+        };
+        DD: {
+            mask: typeof import("imask").MaskedRange;
+            from: number;
+            to: number;
+            placeholderChar: string;
+            maxLength: number;
+        };
+        D: {
+            mask: typeof import("imask").MaskedRange;
+            from: number;
+            to: number;
+            placeholderChar: string;
+            maxLength: number;
+        };
+        ddd: {
+            mask: typeof import("imask").MaskedEnum;
+            enum: string[];
+            placeholderChar: string;
+            maxLength: number;
+        };
+        dddd: {
+            mask: typeof import("imask").MaskedEnum;
+            enum: string[];
+            placeholderChar: string;
+            minLength: number;
+        };
+    };
+    autofix: boolean;
+    lazy: boolean;
+    overwrite: boolean;
+    skipInvalid: boolean;
+};

app-ng-runtime/components/input/epoch/epoch.module.d.ts

@@ -10,8 +10,9 @@ import * as i8 from "ngx-bootstrap/dropdown";
 import * as i9 from "@angular/forms";
 import * as i10 from "ngx-bootstrap/timepicker";
 import * as i11 from "@wm/components/base";
+import * as i12 from "angular-imask";
 export declare class EpochModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EpochModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EpochModule, [typeof i1.DateComponent, typeof i2.DatetimeComponent, typeof i3.TimeComponent, typeof i4.DateTimePickerComponent, typeof i4.TimePickerComponent, typeof i5.PickerComponent, typeof i5.PickerGroupComponent], [typeof i6.CommonModule, typeof i7.BsDatepickerModule, typeof i8.BsDropdownModule, typeof i9.FormsModule, typeof i10.TimepickerModule, typeof i11.WmComponentsModule], [typeof i1.DateComponent, typeof i2.DatetimeComponent, typeof i3.TimeComponent, typeof i4.DateTimePickerComponent, typeof i4.TimePickerComponent, typeof i5.PickerComponent, typeof i5.PickerGroupComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EpochModule, [typeof i1.DateComponent, typeof i2.DatetimeComponent, typeof i3.TimeComponent, typeof i4.DateTimePickerComponent, typeof i4.TimePickerComponent, typeof i5.PickerComponent, typeof i5.PickerGroupComponent], [typeof i6.CommonModule, typeof i7.BsDatepickerModule, typeof i8.BsDropdownModule, typeof i9.FormsModule, typeof i10.TimepickerModule, typeof i11.WmComponentsModule, typeof i12.IMaskModule], [typeof i1.DateComponent, typeof i2.DatetimeComponent, typeof i3.TimeComponent, typeof i4.DateTimePickerComponent, typeof i4.TimePickerComponent, typeof i5.PickerComponent, typeof i5.PickerGroupComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EpochModule>;
 }