@wavemaker/app-ng-runtime 11.5.2-next.141121 → 11.5.2-next.141122

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

@@ -1738,9 +1738,9 @@
                 Y: {
                     mask: IMask.MaskedRange,
                     from: 0,
-                    to: 9,
+                    to: 9999,
                     placeholderChar: 'Y',
-                    maxLength: 1,
+                    maxLength: 4,
                 },
                 M: {
                     mask: IMask.MaskedRange,
@@ -1802,7 +1802,8 @@
         };
     }
 
-    const _c0$2 = ["wmDate", ""];
+    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);
@@ -1847,7 +1848,7 @@
                 return validateTheMaskedDate(this.datepattern);
             }
             else {
-                return false;
+                return {};
             }
         }
         // Todo[Shubham]: needs to be redefined
@@ -1882,11 +1883,17 @@
             this._bsDefaultLoadCheck = true;
             this.datepattern = this.appDefaults.dateFormat || i1$1.getDisplayDateTimeFormat(i1$1.FormWidgetType.DATE);
             this.updateFormat('datepattern');
+            if (this.imask) {
+                this.imask.maskRef.updateValue();
+            }
         }
         /**
          * This is an internal method triggered when the date input changes
          */
         onDisplayDateChange($event, isNativePicker = false) {
+            if (this.imask) {
+                this.imask.maskRef.updateValue();
+            }
             if (this.isEnterPressedOnDateInput) {
                 this.isEnterPressedOnDateInput = false;
                 return;
@@ -1902,6 +1909,9 @@
             if (isNativePicker && this.minDateMaxDateValidationOnInput(newVal, $event, this.displayValue, isNativePicker)) {
                 return;
             }
+            if (this.imask) {
+                this.imask.maskRef.value = newVal.toDateString();
+            }
             this.setDataValue(newVal);
         }
         // sets the dataValue and computes the display model values
@@ -1915,6 +1925,7 @@
             }
             if (newVal) {
                 this.bsDataValue = newVal;
+                this.imask.maskRef.value = newVal.toDateString();
             }
             else {
                 this.bsDataValue = undefined;
@@ -1927,6 +1938,9 @@
             if (!this.bsDataValue) {
                 this.hightlightToday(this.activeDate);
             }
+            if (this.imask) {
+                this.imask.maskRef.updateValue();
+            }
             // 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;
@@ -1942,11 +1956,19 @@
             i1$1.adjustContainerRightEdges($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
         }
         onInputBlur($event) {
+            if (this.imask) {
+                this.imask.maskRef.updateValue();
+            }
             if (!$($event.relatedTarget).hasClass('current-date')) {
                 this.invokeOnTouched();
                 this.invokeEventCallback('blur', { $event });
             }
         }
+        onInputFocus($event) {
+            if (this.imask) {
+                this.imask.maskRef.value = $event.target.value;
+            }
+        }
         hideDatepickerDropdown() {
             this.invokeOnTouched();
             this.isOpen = false;
@@ -2021,6 +2043,9 @@
                         this.invalidDateTimeFormat = false;
                         this.isEnterPressedOnDateInput = true;
                         this.bsDatePickerDirective.bsValue = event.target.value ? newVal : '';
+                        if (this.imask) {
+                            this.imask.maskRef.value = event.target.value;
+                        }
                     }
                     this.toggleDpDropdown(event);
                 }
@@ -2051,16 +2076,18 @@
         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: 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.ɵɵ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(); 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.ɵɵ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.onInputFocus($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.ɵɵelementEnd();
                 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); });
@@ -2089,10 +2116,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           #dateInput\n        [name]=\"name\"\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);\"\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         (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           #dateInput\n        [name]=\"name\"\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);onInputFocus($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         (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([

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

@@ -1,6 +1,7 @@
 import { ChangeDetectorRef, Injector } 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 {
     private cdRef;
@@ -21,7 +22,7 @@ export declare class DateComponent extends BaseDateTimeComponent {
     get displayValue(): any;
     get nativeDisplayValue(): any;
     get datavalue(): any;
-    get mask(): false | {
+    get mask(): {
         mask?: undefined;
         pattern?: undefined;
         format?: undefined;
@@ -126,6 +127,7 @@ export declare class DateComponent extends BaseDateTimeComponent {
     };
     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
@@ -134,6 +136,7 @@ export declare class DateComponent extends BaseDateTimeComponent {
     private setDataValue;
     onDatePickerOpen(): void;
     onInputBlur($event: any): void;
+    onInputFocus($event: any): void;
     hideDatepickerDropdown(): void;
     protected handleEvent(node: HTMLElement, eventName: string, callback: Function, locals: any): void;
     /**