@wavemaker/app-ng-runtime 11.13.0-rc.222 → 11.14.0-rc.226

package/components/input/epoch/date/bundles/index.umd.js

@@ -0,0 +1,492 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('angular-imask'), require('@angular/core'), require('@angular/forms'), require('ngx-bootstrap/datepicker'), require('@wm/core'), require('@wm/components/base'), require('@wm/components/input/epoch/base-date-time'), require('imask'), require('moment'), require('lodash-es'), require('@wm/components/input/epoch/date-time-picker')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'angular-imask', '@angular/core', '@angular/forms', 'ngx-bootstrap/datepicker', '@wm/core', '@wm/components/base', '@wm/components/input/epoch/base-date-time', 'imask', 'moment', 'lodash-es', '@wm/components/input/epoch/date-time-picker'], 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.wm.components.input.epoch || {}, global.wm.components.input.epoch.date = {}), global.angularIMask, global.ng.core, global.ng.forms, global.datepicker, global.wm.core, global.wm.components.base, global.wm.components.input.epoch.baseDateTime, global.IMask, global.momentLib, global._, global.wm.components.input.epoch.dateTimePicker));
+})(this, (function (exports, i2, i0, forms, i3, i1, base, baseDateTime, IMask, momentLib, lodashEs, dateTimePicker) { 'use strict';
+
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+    var momentLib__namespace = /*#__PURE__*/_interopNamespaceDefault(momentLib);
+
+    const dateProps = new Map([
+        ['autofocus', base.PROP_BOOLEAN],
+        ['class', base.PROP_STRING],
+        ['dataentrymode', { value: 'default', ...base.PROP_STRING }],
+        ['datavaluesource', base.PROP_ANY],
+        ['datavalue', base.PROP_STRING],
+        ['datepattern', base.PROP_STRING],
+        ['disabled', base.PROP_BOOLEAN],
+        ['excludedays', base.PROP_STRING],
+        ['excludedates', base.PROP_STRING],
+        ['hint', base.PROP_STRING],
+        ['arialabel', base.PROP_STRING],
+        ['maxdate', base.PROP_STRING],
+        ['mindate', base.PROP_STRING],
+        ['name', base.PROP_STRING],
+        ['outputformat', { value: 'yyyy-MM-dd', ...base.PROP_STRING }],
+        ['placeholder', { value: 'Select Date', ...base.PROP_STRING }],
+        ['readonly', base.PROP_BOOLEAN],
+        ['required', base.PROP_BOOLEAN],
+        ['shortcutkey', base.PROP_STRING],
+        ['show', { value: true, ...base.PROP_BOOLEAN }],
+        ['showdropdownon', { value: 'default', ...base.PROP_STRING }],
+        ['showbuttonbar', { value: true, ...base.PROP_BOOLEAN }], // TODO not addressed
+        ['showcustompicker', { value: false, ...base.PROP_BOOLEAN }],
+        ['showindevice', { displayType: 'inline-block', value: 'all', ...base.PROP_STRING }],
+        ['showweeks', { value: false, ...base.PROP_BOOLEAN }],
+        ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+        ['selectfromothermonth', { value: true, ...base.PROP_BOOLEAN }],
+        ['todaybutton', { value: true, ...base.PROP_BOOLEAN }],
+        ['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 }],
+        ['showdateformatasplaceholder', base.PROP_BOOLEAN],
+        ['viewmode', { value: 'day', ...base.PROP_STRING }]
+    ]);
+    const registerProps = () => {
+        base.register('wm-date', dateProps);
+        base.registerFormWidget(i1.FormWidgetType.DATE, new Map(dateProps));
+    };
+
+    const moment = momentLib__namespace.default || window['moment'];
+    function validateTheMaskedDate(format, locale) {
+        if (format == 'timestamp') {
+            return false;
+        }
+        let modifiedFormat = format.toUpperCase().replace(/E/g, 'd');
+        if ((modifiedFormat.split('D').length - 1) === 1) {
+            modifiedFormat = modifiedFormat.replace('D', 'DD');
+        }
+        if ((modifiedFormat.split('M').length - 1) === 1) {
+            modifiedFormat = modifiedFormat.replace('M', 'MM');
+        }
+        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 CURRENT_DATE = 'CURRENT_DATE';
+    const DEFAULT_CLS = 'app-date input-group';
+    const WIDGET_CONFIG = {
+        widgetType: 'wm-date',
+        hostClass: DEFAULT_CLS
+    };
+    class DateComponent extends baseDateTime.BaseDateTimeComponent {
+        static { this.initializeProps = registerProps(); }
+        get timestamp() {
+            return this.bsDataValue ? this.bsDataValue.valueOf() : undefined;
+        }
+        get dateInputFormat() {
+            return this._dateOptions.dateInputFormat || 'yyyy-MM-dd';
+        }
+        get displayValue() {
+            if (this.showdateformatasplaceholder && this.imask?.maskRef && this.maskDateInputFormat) {
+                return i1.getFormattedDate(this.datePipe, this.bsDataValue, this.maskDateInputFormat, this.timeZone, null, this.isCurrentDate, this) || '';
+            }
+            return i1.getFormattedDate(this.datePipe, this.bsDataValue, this.dateInputFormat, this.timeZone, null, this.isCurrentDate, this) || '';
+        }
+        get nativeDisplayValue() {
+            return i1.getFormattedDate(this.datePipe, this.bsDataValue, 'yyyy-MM-dd', this.timeZone, null, this.isCurrentDate, this) || '';
+        }
+        // @ts-ignore
+        get datavalue() {
+            return i1.getFormattedDate(this.datePipe, this.bsDataValue, this.outputformat, this.timeZone, null, this.isCurrentDate, this) || '';
+        }
+        // Todo[Shubham]: needs to be redefined
+        // sets the dataValue and computes the display model values
+        // @ts-ignore
+        set datavalue(newVal) {
+            if (newVal === CURRENT_DATE) {
+                setTimeout(() => {
+                    this.bsDataValue = this.timeZone ? i1.getMomentLocaleObject(this.timeZone) : new Date();
+                }, 50);
+                this.isCurrentDate = true;
+            }
+            else {
+                this.bsDataValue = newVal ? i1.getDateObj(newVal, { isNativePicker: this.loadNativeDateInput }, this.timeZone) : undefined;
+                this.isCurrentDate = false;
+            }
+            // update the previous datavalue.
+            this.invokeOnChange(this.datavalue, undefined, true);
+            this.cdRef.detectChanges();
+        }
+        // TODO use BsLocaleService to set the current user's locale to see the localized labels
+        constructor(inj, cdRef, appDefaults, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            this.cdRef = cdRef;
+            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}`;
+            this._dateOptions.showWeekNumbers = false;
+            this._bsDefaultLoadCheck = true;
+            this.datepattern = this.appDefaults.dateFormat || i1.getDisplayDateTimeFormat(i1.FormWidgetType.DATE);
+            this.updateFormat('datepattern');
+        }
+        /**
+         * This is an internal method triggered when the date input changes
+         */
+        onDisplayDateChange($event, isNativePicker = false) {
+            this.updateIMask();
+            if (this.isEnterPressedOnDateInput) {
+                this.isEnterPressedOnDateInput = false;
+                return;
+            }
+            let inputVal = $event.target.value;
+            // When the input is cleared, the input value becomes maskDateInputFormatPlaceholder. This causes a validation error.
+            // When the input value is equal to maskDateInputFormatPlaceholder, it means that the input is in an empty state.
+            if (this.showdateformatasplaceholder && inputVal === this.maskDateInputFormatPlaceholder) {
+                inputVal = "";
+            }
+            const newVal = i1.getDateObj(inputVal, { pattern: this.datepattern, isNativePicker: isNativePicker });
+            // date pattern validation
+            // if invalid pattern is entered, device is showing an error.
+            if (!this.formatValidation(newVal, inputVal, isNativePicker)) {
+                return;
+            }
+            // min date and max date validation in mobile view.
+            // if invalid dates are entered, device is showing an alert.
+            if (isNativePicker && this.minDateMaxDateValidationOnInput(newVal, $event, this.displayValue, isNativePicker)) {
+                return;
+            }
+            this.setDataValue(newVal);
+        }
+        // sets the dataValue and computes the display model values
+        setDataValue(newVal) {
+            this.invalidDateTimeFormat = false;
+            // min date and max date validation in web.
+            // if invalid dates are entered, device is showing validation message.
+            this.minDateMaxDateValidationOnInput(newVal);
+            if (i1.getFormattedDate(this.datePipe, newVal, this.dateInputFormat, this.timeZone, null, this.isCurrentDate, this) === this.displayValue) {
+                $(this.nativeElement).find('.display-input').val(this.displayValue);
+            }
+            if (!this.dateNotInRange) {
+                if (newVal) {
+                    this.bsDataValue = newVal;
+                    this.updateIMask();
+                }
+                else {
+                    this.bsDataValue = undefined;
+                }
+                if (this.datavalue === this.getPrevDataValue()) {
+                    const date = i1.getFormattedDate(this.datePipe, this.datavalue, this.dateInputFormat, this.timeZone, null, this.isCurrentDate, this);
+                    $(this.nativeElement).find('.display-input').val(date);
+                }
+            }
+            this.invokeOnChange(this.datavalue, {}, true);
+        }
+        onDatePickerOpen() {
+            this.isOpen = true;
+            this.activeDate = this.bsDataValue ? this.bsDataValue : (this.timeZone ? i1.getMomentLocaleObject(this.timeZone) : new Date());
+            if (!this.bsDataValue) {
+                this.hightlightToday(this.activeDate);
+            }
+            this.updateIMask();
+            if (this.bsDatePickerDirective && (this.dateNotInRange || this.invalidDateTimeFormat)) {
+                this.bsDatePickerDirective._bsValue = null;
+            }
+            // 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;
+            this.$element.find('.model-holder').width('1px');
+            const dpContainerEl = $('bs-datepicker-container');
+            dpContainerEl.attr('aria-label', 'Use Arrow keys to navigate dates, Choose Date from datepicker');
+            $('.bs-calendar-container').removeAttr('role');
+            const datePickerContainer = $('.bs-datepicker-container')[0];
+            this.focusTrap = base.setFocusTrap(datePickerContainer, true);
+            this.focusTrap.activate();
+            this.addDatepickerKeyboardEvents(this, false);
+            i1.adjustContainerPosition($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
+            i1.adjustContainerRightEdges($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
+            if (this.timeZone) {
+                const todayBtn = document.querySelector(`.${this.dateContainerCls} .bs-datepicker-buttons .btn-today-wrapper button`);
+                const setTodayTZHandler = (event) => {
+                    const todayTZ = i1.getMomentLocaleObject(this.timeZone);
+                    if (new Date(this.bsDataValue).toDateString() !== new Date(todayTZ).toDateString()) {
+                        this.bsDataValue = todayTZ;
+                    }
+                    todayBtn.removeEventListener('click', setTodayTZHandler);
+                };
+                todayBtn.addEventListener('click', setTodayTZHandler);
+            }
+        }
+        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;
+            this.focusTrap?.deactivate();
+            this.isEnterPressedOnDateInput = false;
+            if (this.deregisterEventListener) {
+                this.deregisterEventListener();
+            }
+            this.blurDateInput(this.isOpen);
+        }
+        // change and blur events are added from the template
+        handleEvent(node, eventName, callback, locals) {
+            if (!lodashEs.includes(['blur', 'focus', 'change', 'click'], eventName)) {
+                super.handleEvent(node, eventName, callback, locals);
+            }
+        }
+        /**
+         * This is an internal method used to toggle the dropdown of the date widget
+         */
+        toggleDpDropdown($event, skipFocus = false) {
+            if (this.loadNativeDateInput) {
+                // Fixes click event getting triggred twice in Mobile devices.
+                if (!skipFocus) {
+                    this.onDateTimeInputFocus();
+                }
+            }
+            if ($event.type === 'click') {
+                this.invokeEventCallback('click', { $event: $event });
+                //  this.focusOnInputEl();
+            }
+            if ($event.target && $($event.target).is('input') && !(this.isDropDownDisplayEnabledOnInput(this.showdropdownon))) {
+                $event.stopPropagation();
+                return;
+            }
+            this.bsDatePickerDirective.toggle();
+            this.addBodyClickListener(this.bsDatePickerDirective.isOpen);
+        }
+        addBodyClickListener(skipListener) {
+            if (!skipListener) {
+                return;
+            }
+            const bodyElement = document.querySelector('body');
+            setTimeout(() => {
+                const bsDateContainerElement = bodyElement.querySelector(`.${this.dateContainerCls}`);
+                this.deregisterEventListener = i1.addEventListenerOnElement(bodyElement, bsDateContainerElement, this.nativeElement, 'click', this.isDropDownDisplayEnabledOnInput(this.showdropdownon), () => {
+                    this.isOpen = false;
+                }, 0 /* EVENT_LIFE.ONCE */, true);
+            }, 350);
+        }
+        /**
+         * This is an internal method triggered when pressing key on the date input
+         */
+        onDisplayKeydown(event) {
+            if (this.isDropDownDisplayEnabledOnInput(this.showdropdownon)) {
+                event.stopPropagation();
+                if (event.key === 'Enter') {
+                    const newVal = i1.getDateObj(event.target.value, { pattern: this.datepattern });
+                    event.preventDefault();
+                    const formattedDate = i1.getFormattedDate(this.datePipe, newVal, this.dateInputFormat, this.timeZone, null, this.isCurrentDate, this);
+                    let inputVal = event.target.value.trim();
+                    if (this.showdateformatasplaceholder && inputVal === this.maskDateInputFormatPlaceholder) {
+                        inputVal = "";
+                    }
+                    if (inputVal && this.datepattern === 'timestamp') {
+                        if (!lodashEs.isNaN(inputVal) && lodashEs.parseInt(inputVal) !== formattedDate) {
+                            this.invalidDateTimeFormat = true;
+                            this.invokeOnChange(this.datavalue, event, false);
+                        }
+                    }
+                    else if (inputVal && inputVal !== formattedDate) {
+                        this.invalidDateTimeFormat = true;
+                        this.invokeOnChange(this.datavalue, event, false);
+                    }
+                    else {
+                        this.invalidDateTimeFormat = false;
+                        this.isEnterPressedOnDateInput = true;
+                        this.bsDatePickerDirective.bsValue = inputVal ? newVal : '';
+                        this.updateIMask();
+                    }
+                    this.toggleDpDropdown(event);
+                }
+                else {
+                    this.hideDatepickerDropdown();
+                }
+            }
+            else {
+                this.hideDatepickerDropdown();
+            }
+        }
+        /**
+         * This is an internal method triggered when the date selection changes
+         */
+        onDateChange(newVal) {
+            /**
+             *  Ngx-bootstrap upgrade : To avoid the page load datechange event;
+             *  TODO:
+             *  https://github.com/valor-software/ngx-bootstrap/issues/6016
+             *  For above issue, once we get the solution from Ngx-Bootstrap team,  remove the _bsDefaultLoadCheck check and update accordingly.
+             * */
+            if (this._bsDefaultLoadCheck) {
+                this._bsDefaultLoadCheck = false;
+                return;
+            }
+            this.setDataValue(newVal);
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'showdateformatasplaceholder') {
+                this.showdateformatasplaceholder = nv;
+                this.imask?.destroyMask();
+                if (this.showdateformatasplaceholder && this.datepattern !== 'timestamp') {
+                    this.mask = validateTheMaskedDate(this.datepattern, this.selectedLocale);
+                    this.maskDateInputFormat = this.dateInputFormat;
+                    this.maskDateInputFormat = (this.dateInputFormat.split('d').length - 1) === 1 ? this.maskDateInputFormat.replace('d', 'dd') : this.maskDateInputFormat;
+                    this.maskDateInputFormat = (this.dateInputFormat.split('M').length - 1) === 1 ? this.maskDateInputFormat.replace('M', 'MM') : this.maskDateInputFormat;
+                    this.maskDateInputFormatPlaceholder = this.maskDateInputFormat.toUpperCase().replace('EEEE', 'EEEEEE').replace('MMMM', 'MMM');
+                    this.updateIMask();
+                }
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: DateComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.AppDefaults }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateComponent, isStandalone: true, selector: "[wmDate]", providers: [
+                base.provideAs(DateComponent, forms.NG_VALUE_ACCESSOR, true),
+                base.provideAs(DateComponent, forms.NG_VALIDATORS, true),
+                base.provideAsWidgetRef(DateComponent)
+            ], viewQueries: [{ propertyName: "bsDatePickerDirective", first: true, predicate: i3.BsDatepickerDirective, descendants: true }, { propertyName: "imask", first: true, predicate: ["dateInput"], descendants: true, read: i2.IMaskDirective }], usesInheritance: true, ngImport: i0__namespace, 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]=\"arialabel\"\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    [attr.aria-expanded]=\"isOpen\"\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@if (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) && showDatePickerModal(bsDataValue)\"\n    (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event);\"\n    (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n    [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : arialabel || 'Choose Date'\"\n    role=\"button\">\n  </div>\n}\n", dependencies: [{ kind: "component", type: dateTimePicker.DateTimePickerComponent, selector: "wm-datetimepicker", inputs: ["mode", "placement", "config", "minTime", "maxTime", "_displayFormat", "excludedDatesToDisable", "value", "excludedDaysToDisable", "displayFormat"], outputs: ["change"] }, { kind: "ngmodule", type: i2.IMaskModule }, { kind: "directive", type: i2__namespace.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { kind: "ngmodule", type: i3.BsDatepickerModule }, { kind: "directive", type: i3__namespace.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i3__namespace.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0__namespace, type: DateComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [dateTimePicker.DateTimePickerComponent, i2.IMaskModule, i3.BsDatepickerModule], selector: '[wmDate]', providers: [
+                            base.provideAs(DateComponent, forms.NG_VALUE_ACCESSOR, true),
+                            base.provideAs(DateComponent, forms.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  #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]=\"arialabel\"\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    [attr.aria-expanded]=\"isOpen\"\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@if (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) && showDatePickerModal(bsDataValue)\"\n    (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event);\"\n    (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n    [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : arialabel || 'Choose Date'\"\n    role=\"button\">\n  </div>\n}\n" }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.AppDefaults }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { bsDatePickerDirective: [{
+                    type: i0.ViewChild,
+                    args: [i3.BsDatepickerDirective]
+                }], imask: [{
+                    type: i0.ViewChild,
+                    args: ['dateInput', { read: i2.IMaskDirective }]
+                }] } });
+
+    exports.DateComponent = DateComponent;
+
+}));

package/components/input/epoch/date/date.component.d.ts

@@ -1,7 +1,7 @@
+import { IMaskDirective } from 'angular-imask';
 import { ChangeDetectorRef, Injector } from '@angular/core';
 import { AppDefaults } from '@wm/core';
-import { BaseDateTimeComponent } from './../base-date-time.component';
-import { IMaskDirective } from 'angular-imask';
+import { BaseDateTimeComponent } from '@wm/components/input/epoch/base-date-time';
 import * as i0 from "@angular/core";
 export declare class DateComponent extends BaseDateTimeComponent {
     private cdRef;