@zeedhi/common 3.0.0 → 3.0.1

package/dist/zd-common.js

@@ -1641,13 +1641,86 @@ class Form extends ComponentRender {
     get childrenProps() {
         return this.children.map(({ grid, ...otherAttrs }) => otherAttrs);
     }
+    /**
+     * Checks if the value matches a col value (1, 2, ... 12) or auto
+     */
+    matchColumn = (value) => (!Number.isNaN(Number(value)) || value === 'auto');
+    breakpoints = ['lg', 'md', 'sm', 'xl', 'xxl'];
+    matchBreakpoint = (value) => (this.breakpoints.includes(value));
+    handleColClass(cssClass) {
+        const dataString = cssClass.replace('zd-col-', '');
+        const splittedData = dataString.split('-');
+        const firstData = splittedData[0];
+        const secondData = splittedData[1];
+        // in this case the class is zd-col-{n} or zd-col-auto
+        if (this.matchColumn(firstData)) {
+            return { key: 'cols', value: firstData };
+        }
+        const matchWithBreakpoints = this.matchBreakpoint(firstData) && this.matchColumn(secondData);
+        if (!matchWithBreakpoints)
+            return null;
+        // in this case the class is zd-col-{breakpoint}-{n} or zd-col-{breakpoint}-auto
+        return { key: firstData, value: secondData };
+    }
+    handleOffsetClass(cssClass) {
+        const dataString = cssClass.replace('zd-offset-', '');
+        const splittedData = dataString.split('-');
+        const firstData = splittedData[0];
+        const secondData = splittedData[1];
+        // in this case the class is zd-offset-{n} or zd-offset-auto
+        if (this.matchColumn(firstData)) {
+            return { key: 'offset', value: firstData };
+        }
+        const matchWithBreakpoints = this.matchBreakpoint(firstData) && this.matchColumn(secondData);
+        if (!matchWithBreakpoints)
+            return null;
+        // in this case the class is zd-offset-{breakpoint}-{n} or zd-offset-{breakpoint}-auto
+        return { key: `offset-${firstData}`, value: secondData };
+    }
+    /**
+     * This method searches in a css class string to find classes related to grid cols \
+     * Parses all of the grid cols classes found to form grid object entries, for example
+     * the following class: 'zd-col-sm-12 zd-col-md-6' will become { sm: '12', md: '6' }
+     */
+    parseGridClasses(classes) {
+        const classesArray = classes.split(' ');
+        const gridObject = {};
+        classesArray.forEach((cssClass) => {
+            if (cssClass.startsWith('zd-col-')) {
+                const result = this.handleColClass(cssClass);
+                if (!result)
+                    return;
+                const { key, value } = result;
+                gridObject[key] = value;
+                return;
+            }
+            if (cssClass.startsWith('zd-offset-')) {
+                const result = this.handleOffsetClass(cssClass);
+                if (!result)
+                    return;
+                const { key, value } = result;
+                gridObject[key] = value;
+                return;
+            }
+            return;
+        });
+        return gridObject;
+    }
+    getChildGrid(child) {
+        if (child.grid && Object.keys(child.grid).length > 0)
+            return child.grid;
+        if (child.cssClass)
+            return this.parseGridClasses(child.cssClass);
+        return {};
+    }
     /**
      * Grid system for each child.
      */
     get childrenGrid() {
         const childrenGrid = {};
         this.children.forEach((child) => {
-            childrenGrid[child.name] = { cols: '3', ...(child.grid || {}) };
+            const grid = this.getChildGrid(child);
+            childrenGrid[child.name] = { cols: '3', ...grid };
         });
         return childrenGrid;
     }
@@ -1814,6 +1887,7 @@ class Input extends ComponentRender {
     internalDisplayValue = '';
     internalValue = null;
     formParent = this.getFormParent();
+    grid = {};
     /* istanbul ignore next */
     /**
      * Creates a new Input.
@@ -1843,6 +1917,7 @@ class Input extends ComponentRender {
         this.storePath = this.getInitValue('storePath', props.storePath, this.storePath);
         this.value = this.getInitValue('value', props.value, this.value);
         this.validations = this.getInitValue('validations', props.validations, this.validations);
+        this.grid = this.getInitValue('grid', props.grid, this.grid);
         this.parseValidations(props.validations || {});
     }
     onCreated() {
@@ -15480,8 +15555,12 @@ class Time extends TextInput {
         }
         return this.mask;
     }
-    formatter(value) { return this.formatterFn(value, this); }
-    parser(value) { return this.parserFn(value, this); }
+    formatter(value) {
+        return this.formatterFn(value, this);
+    }
+    parser(value) {
+        return this.parserFn(value, this);
+    }
     /**
      * Triggered when date is clicked.
      * @param event
@@ -15490,7 +15569,10 @@ class Time extends TextInput {
     selectTime(time, event, element) {
         if (this.events.onSelectTime && typeof this.events.onSelectTime === 'function') {
             this.events.onSelectTime({
-                time, event, element, component: this,
+                time,
+                event,
+                element,
+                component: this,
             });
         }
     }
@@ -15569,11 +15651,11 @@ class Time extends TextInput {
         return null;
     }
     /**
-   * Checks if a time format is simple.
-   * Simple time formats are the ones that consists only of 'HH', 'mm', 'mm' or 'YYYY', and mask delimiters
-   * @param format The format to be checked
-   * @returns true if it is simple, false otherwise
-   */
+     * Checks if a time format is simple.
+     * Simple time formats are the ones that consists only of 'HH', 'mm', 'mm' or 'YYYY', and mask delimiters
+     * @param format The format to be checked
+     * @returns true if it is simple, false otherwise
+     */
     isSimpleFormat(format) {
         const simpleTokens = ['HH', 'mm', 'ss', 'hh', 'A', 'a', 'p', 'P'];
         // remove the simple tokens from the string
@@ -15588,10 +15670,9 @@ class Time extends TextInput {
         return I18n.translate('VALIDATION_INVALID_TIME');
     }
     timeAllowedValidation() {
-        return !this.displayValue
-            || (this.isValidTime(this.displayValue, this.displayFormat)
-                && this.isTimeAllowed())
-            || I18n.translate('VALIDATION_TIME_NOT_ALLOWED');
+        return (!this.displayValue ||
+            (this.isValidTime(this.displayValue, this.displayFormat) && this.isTimeAllowed()) ||
+            I18n.translate('VALIDATION_TIME_NOT_ALLOWED'));
     }
     click(event, element) {
         const clickEvent = event || new MouseEvent('click');
@@ -15622,8 +15703,10 @@ class Time extends TextInput {
      * Removes the component mask if value is valid
      */
     removeTimeMask() {
-        if (isUndefined(this.initialMask) || !this.value || this.timeError
-            || !this.isValidTime(this.value, this.valueFormat)) {
+        if (isUndefined(this.initialMask) ||
+            !this.value ||
+            this.timeError ||
+            !this.isValidTime(this.value, this.valueFormat)) {
             return;
         }
         this.mask = '';
@@ -15640,9 +15723,11 @@ class Time extends TextInput {
      */
     // private lastInvalid: string = '';
     isTimeAllowed(value = this.value) {
-        return this.isSameOrAfterMin(value) && this.isSameOrBeforeMax(value)
-            && this.isHourAllowed(value) && this.isMinuteAllowed(value)
-            && this.isSecondAllowed(value);
+        return (this.isSameOrAfterMin(value) &&
+            this.isSameOrBeforeMax(value) &&
+            this.isHourAllowed(value) &&
+            this.isMinuteAllowed(value) &&
+            this.isSecondAllowed(value));
     }
     isSameOrAfterMin(value) {
         if (!this.minTime)
@@ -15751,7 +15836,534 @@ FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = Confi
 });
 InputFactory.register('ZdTime', Time);
 
-// import { VersionService } from '@zeedhi/core';
+class DateRange extends TextInput {
+    /**
+     * Input auto complete.
+     */
+    autocomplete = false;
+    /**
+     * Defines the date format.
+     */
+    dateFormat = Config.dateFormat;
+    /**
+     * Defines the date format displayed.
+     */
+    displayFormat = Config.displayFormat;
+    /**
+     * Defines the date input format.
+     */
+    inputFormat = Config.dateInputFormat;
+    /**
+     * Shows the date picker.
+     */
+    showDatePicker = false;
+    /**
+     * Sets the first day of the week, starting with 0 for Sunday.
+     */
+    firstDayOfWeek = 0;
+    /**
+     * Forces 100% width.
+     */
+    fullWidth = false;
+    /**
+     * Sets the locale. Accepts a string with a BCP 47 language tag.
+     */
+    locale = I18n.instance.language;
+    /**
+     * Allows changing displayed month with mouse scroll
+     */
+    scrollable = false;
+    /**
+     * Toggles visibility of the week numbers in the body of the calendar.
+     */
+    showWeek = false;
+    /**
+     * Character that will separate the two dates
+     */
+    get splitter() {
+        return I18n.translate(this.internalSplitter);
+    }
+    set splitter(splitter) {
+        this.internalSplitter = splitter;
+    }
+    internalSplitter = ' ~ ';
+    /**
+     * Width of the picker.
+     */
+    width = 248;
+    /**
+     * Helper options.
+     */
+    helperOptions = [];
+    /**
+     * Max value allowed.
+     */
+    max = '';
+    /**
+     * Min value allowed.
+     */
+    min = '';
+    /**
+     * Helper value.
+     */
+    helperValue = '';
+    isoFormat = 'YYYY-MM-DD';
+    dateError = false;
+    formatterFn = FormatterParserProvider.getFormatter('ZdDateRange');
+    parserFn = FormatterParserProvider.getParser('ZdDateRange');
+    initialMask;
+    unitMask;
+    isSimpleDisplay;
+    /* istanbul ignore next */
+    /**
+     * Creates a new Date.
+     * @param props Date properties
+     */
+    constructor(props) {
+        super(props);
+        // Add this logic to resolve template strings
+        if (typeof props.appendIcon === 'string' && props.appendIcon.startsWith('{{') && props.appendIcon.endsWith('}}')) {
+            const match = props.appendIcon.match(/{{(.*?)}}/);
+            if (match) {
+                const path = match[1].trim().split('.');
+                let value = window;
+                for (const key of path) {
+                    value = value?.[key];
+                }
+                this.appendIcon = value ?? props.appendIcon;
+            }
+            else {
+                this.appendIcon = props.appendIcon;
+            }
+        }
+        else {
+            this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'calendar');
+        }
+        this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
+        this.dateFormat = this.getInitValue('dateFormat', props.dateFormat, this.dateFormat);
+        this.dateValidation = this.dateValidation.bind(this);
+        this.displayFormat = this.getInitValue('displayFormat', props.displayFormat, this.displayFormat);
+        this.inputFormat = this.getInitValue('inputFormat', props.inputFormat, this.inputFormat);
+        this.firstDayOfWeek = this.getInitValue('firstDayOfWeek', props.firstDayOfWeek, this.firstDayOfWeek);
+        this.fullWidth = this.getInitValue('fullWidth', props.fullWidth, this.fullWidth);
+        this.locale = this.getInitValue('locale', props.locale, this.locale);
+        this.scrollable = this.getInitValue('scrollable', props.scrollable, this.scrollable);
+        this.showDatePicker = this.getInitValue('showDatePicker', props.showDatePicker, this.showDatePicker);
+        this.showWeek = this.getInitValue('showWeek', props.showWeek, this.showWeek);
+        this.splitter = this.getInitValue('splitter', props.splitter, this.internalSplitter);
+        this.width = this.getInitValue('width', props.width, this.width);
+        this.mask = this.getInitValue('mask', props.mask, undefined);
+        this.helperOptions = this.getInitValue('helperOptions', props.helperOptions, this.helperOptions);
+        this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
+        this.min = this.getInitValue('min', props.min, this.min);
+        this.max = this.getInitValue('max', props.max, this.max);
+        this.rules.push(this.dateValidation);
+        this.unitMask = this.mask;
+        this.initialMask = this.getInitialMask();
+        this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
+        const userAppendIconClick = this.events.appendIconClick;
+        this.events.appendIconClick = ({ event, element, component }) => {
+            this.iconClick(event, element);
+            if (userAppendIconClick && typeof userAppendIconClick === 'function') {
+                userAppendIconClick({ event, element, component });
+            }
+        };
+    }
+    getInitialMask() {
+        if (isUndefined(this.mask)) {
+            this.unitMask = this.inputFormat && this.maskFormat(this.inputFormat);
+        }
+        if (!this.unitMask) {
+            this.mask = this.unitMask;
+            return this.unitMask;
+        }
+        this.mask = `${this.unitMask}${this.splitter}${this.unitMask}`;
+        return this.mask;
+    }
+    formatter(value) {
+        return this.formatterFn(value, this);
+    }
+    parser(value) {
+        return this.parserFn(value, this);
+    }
+    get displayValue() {
+        return this.internalDisplayValue;
+    }
+    set displayValue(newValue) {
+        this.dateError = false;
+        this.internalDisplayValue = newValue;
+        if (newValue)
+            this.internalValue = this.parser(newValue);
+        else
+            this.internalValue = [];
+        this.value = this.internalValue; // forces value accessor to be called if necessary
+    }
+    get value() {
+        return this.internalValue;
+    }
+    set value(value) {
+        if (this.internalValue !== value) {
+            this.internalDisplayValue = this.formatter(value);
+            this.internalValue = value;
+        }
+        if (value === null) {
+            this.internalValue = [];
+        }
+    }
+    /**
+     * Assign the updated mask to mask property
+     */
+    updateMask() {
+        this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
+        this.mask = this.getUpdatedMask();
+        return this.mask;
+    }
+    /**
+     * Gets the updated masked, based on displayFormat if the initial mask is undefined
+     */
+    getUpdatedMask() {
+        if (isUndefined(this.getInitialMask())) {
+            return this.maskFormat(`${this.displayFormat}${this.splitter}${this.displayFormat}`);
+        }
+        return this.mask;
+    }
+    maskFormat(format) {
+        return format.replace(/[A-Za-z]/gi, '#');
+    }
+    setDateValue(displayValue) {
+        const lastValue = this.displayValue;
+        const values = this.splitValues(displayValue);
+        if (this.isValidDateArray(this.displayFormat, values)) {
+            this.internalDisplayValue = displayValue;
+            this.internalValue = this.parser(displayValue);
+            this.dateError = false;
+            if (lastValue !== this.displayValue)
+                this.change(this.value);
+        }
+        else {
+            if (!displayValue) {
+                this.internalDisplayValue = displayValue;
+                this.internalValue = [];
+                if (lastValue !== this.displayValue)
+                    this.change(this.value);
+            }
+            this.dateError = !!displayValue;
+        }
+        this.value = this.internalValue; // forces value accessor to be called if necessary
+    }
+    /**
+     * Faz a validação do array de datas
+     * @param format o formato da data
+     * @param values o array de datas
+     * @returns true se todos os valores forem validados
+     * */
+    isValidDateArray(format, values) {
+        if (!values || values.length < 2)
+            return false;
+        return values.every((value) => this.isValidDate(value, format));
+    }
+    splitValues(value) {
+        let splitedValue = [];
+        if (!value)
+            return splitedValue;
+        if (value.indexOf(this.splitter) !== -1) {
+            splitedValue = value.split(this.splitter);
+            if (splitedValue[1] === '')
+                return [splitedValue[0]];
+            return splitedValue;
+        }
+        return [value];
+    }
+    isValidDate(value, format, strict = true) {
+        const date = dayjs(value, format, strict);
+        const isValidFormat = date.isValid();
+        if (!isValidFormat)
+            return false;
+        const minDate = this.min ? dayjs(this.min, this.dateFormat) : null;
+        const isValidMin = !minDate || date.isAfter(minDate) || date.isSame(minDate);
+        if (!isValidMin)
+            return false;
+        const maxDate = this.max ? dayjs(this.max, this.dateFormat) : null;
+        const isValidMax = !maxDate || date.isBefore(maxDate) || date.isSame(maxDate);
+        if (!isValidMax)
+            return false;
+        return true;
+    }
+    isValidFormatDate(value, format, strict = true) {
+        return dayjs(value, format, strict).isValid();
+    }
+    get isoRangeValue() {
+        return this.formatISODateRangeValue(this.value);
+    }
+    set isoRangeValue(newValue) {
+        const lastValue = this.value;
+        this.dateError = false;
+        this.value = this.parseISODateRangeValue(newValue);
+        if (!Utils.isEqual(lastValue, this.value))
+            this.change(this.value);
+    }
+    formatISODateRangeValue(dates) {
+        let splitedValue;
+        if (Array.isArray(dates))
+            splitedValue = dates;
+        else
+            splitedValue = this.splitValues(dates);
+        const formattedValue = [];
+        splitedValue.forEach((value) => {
+            if (value && this.isValidFormatDate(value, this.dateFormat)) {
+                formattedValue.push(dayjs(value, this.dateFormat, true).format(this.isoFormat));
+            }
+        });
+        return formattedValue;
+    }
+    parseISODateRangeValue(values) {
+        const parsedValue = [];
+        if (values.length) {
+            values.forEach((value) => {
+                if (value && this.isValidFormatDate(value, this.isoFormat)) {
+                    parsedValue.push(dayjs(value, this.isoFormat, true).format(this.dateFormat));
+                }
+            });
+        }
+        return this.sortDates(parsedValue);
+    }
+    sortDates(parsedValue) {
+        return parsedValue.sort((a, b) => dayjs(a, this.dateFormat).isAfter(dayjs(b, this.dateFormat)) ? 1 : -1);
+    }
+    dateValidation() {
+        return !this.dateError || I18n.translate('VALIDATION_INVALID_DATE');
+    }
+    click(event, element) {
+        const clickEvent = event || new MouseEvent('click');
+        super.click(clickEvent, element);
+        if (!clickEvent.defaultPrevented) {
+            this.showDatePicker = !this.showDatePicker;
+        }
+    }
+    blur(event, element) {
+        if (this.value) {
+            this.value = this.sortDates(this.value);
+            this.removeDateMask();
+            this.setDateValue(this.formatter(this.value));
+            super.blur(event, element);
+        }
+        if (!Utils.isMobile()) {
+            this.showDatePicker = false;
+        }
+    }
+    focus(event, element) {
+        this.addDateMask();
+        super.focus(event, element);
+    }
+    /**
+     * Add date mask
+     */
+    addDateMask() {
+        if (isUndefined(this.getInitialMask()) || !this.value)
+            return;
+        setTimeout(() => {
+            this.mask = this.getInitialMask();
+            const firstDate = this.value[0]
+                ? dayjs(this.value[0], this.dateFormat).format(this.inputFormat || this.displayFormat)
+                : '';
+            const lastDate = this.value[1]
+                ? dayjs(this.value[1], this.dateFormat).format(this.inputFormat || this.displayFormat)
+                : '';
+            this.internalDisplayValue = `${firstDate}${lastDate ? this.splitter : ''}${lastDate}`;
+        });
+    }
+    /**
+     * Removes the component mask if value is valid
+     */
+    removeDateMask() {
+        if (isUndefined(this.getInitialMask()) ||
+            !this.value ||
+            this.dateError ||
+            !this.isValidDateArray(this.dateFormat, this.value)) {
+            return;
+        }
+        this.mask = '';
+    }
+    /**
+     * Toggle showDatePicker value
+     */
+    togglePicker() {
+        this.showDatePicker = !this.showDatePicker;
+    }
+    /**
+     * Triggered when the appended icon is clicked.
+     * @param event DOM event
+     * @param element Text input
+     */
+    iconClick(event, element) {
+        super.click(event, element);
+        if (!event.defaultPrevented) {
+            this.togglePicker();
+        }
+    }
+    /**
+     * Checks if a date format is simple.
+     * Simple date formats are the ones that consists only of 'DD', 'MM' or 'YYYY', and mask delimiters
+     * @param format The format to be checked
+     * @returns true if it is simple, false otherwise
+     */
+    isSimpleFormat(format) {
+        const simpleTokens = ['DD', 'MM', 'YYYY'];
+        // remove the simple tokens from the string
+        const replaced = simpleTokens.reduce((result, token) => result.replace(token, ''), format);
+        const chars = replaced.split('');
+        return chars.length ? chars.every((char) => Mask.isMaskDelimiter(char)) : true;
+    }
+    previousHint = '';
+    previousPersistentHint = false;
+    updateHelperHint(helperValue) {
+        const previousHelperHint = this.helperValue ? DateHelper.getLabel(this.helperValue) : '';
+        if (!this.hint || previousHelperHint !== this.hint) {
+            this.previousHint = this.hint;
+            this.previousPersistentHint = this.persistentHint;
+        }
+        this.helperValue = helperValue;
+        const label = DateHelper.getLabel(helperValue);
+        if (!helperValue || !label) {
+            this.hint = this.previousHint;
+            this.persistentHint = this.previousPersistentHint;
+            return;
+        }
+        this.hint = label;
+        this.persistentHint = true;
+    }
+    change(event, element) {
+        super.change(event, element);
+        this.updateHelperHint('');
+    }
+    getExtremities(arr) {
+        if (arr.length === 0)
+            return [];
+        if (arr.length === 1)
+            return [arr[0]];
+        return [arr[0], arr[arr.length - 1]];
+    }
+    setNativeDate(date) {
+        this.dateError = false;
+        this.dateObject = date.map((obj) => dayjs(obj));
+        const extremityDates = this.getExtremities(this.dateObject);
+        this.value = extremityDates
+            .filter((obj) => obj !== null)
+            .map((obj) => obj.format(this.dateFormat));
+    }
+    dateObject = [null, null];
+    getNativeDate() {
+        return this.dateObject.filter((obj) => obj !== null).map((obj) => obj.toDate());
+    }
+    getMaskValue() {
+        let mask = '';
+        if (typeof this.mask === 'function') {
+            mask = this.mask(Mask.getValueWithoutMask(this.value?.[0] || ''));
+        }
+        else if (typeof this.mask === 'string') {
+            mask = this.mask.split(this.splitter)[0] || '';
+            mask = Mask.getMaskArray(mask);
+            if (Array.isArray(mask) && mask.length > 0) {
+                mask = mask.concat(this.splitter.split('')).concat(mask);
+            }
+        }
+        else if (Array.isArray(this.mask)) {
+            mask = this.mask;
+        }
+        return mask;
+    }
+}
+FormatterParserProvider.registerFormatter('ZdDateRange', (value, { dateFormat = Config.dateFormat, displayFormat = Config.displayFormat, inputFormat = Config.dateInputFormat, initialMask, splitter = ' ~ ', unitMask = '', mask = '', isSimpleDisplay = false, } = {}) => {
+    if (!value || value.length === 0 || (value.length === 1 && !value[0])) {
+        return '';
+    }
+    const formattedValue = [];
+    value.forEach((date) => {
+        if (date) {
+            const isDateValid = dayjs(date, dateFormat, true).isValid();
+            if (!isDateValid) {
+                formattedValue.push(date);
+                return;
+            }
+            if (initialMask && mask && unitMask) {
+                if (inputFormat) {
+                    const formatted = dayjs(date, dateFormat).format(inputFormat);
+                    formattedValue.push(formatted);
+                    return;
+                }
+                let valueToUnmask = date;
+                if (isSimpleDisplay) {
+                    valueToUnmask = dayjs(date, dateFormat).format(displayFormat);
+                }
+                const unmasked = Mask.getValueWithoutMask(valueToUnmask);
+                const masked = Mask.getValueWithMask(unmasked, unitMask);
+                formattedValue.push(masked);
+                return;
+            }
+            const formatted = dayjs(date, dateFormat).format(displayFormat);
+            formattedValue.push(formatted);
+        }
+    });
+    let displayOutput = formattedValue[0];
+    if (formattedValue.length === 2) {
+        displayOutput += `${splitter}${formattedValue[1]}`;
+    }
+    return displayOutput;
+});
+FormatterParserProvider.registerParser('ZdDateRange', (value, { dateFormat = Config.dateFormat, displayFormat = Config.displayFormat, inputFormat = Config.dateInputFormat, splitter = ' ~ ', unitMask = '', mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
+    if (!value) {
+        return [];
+    }
+    let splitedValue = [];
+    if (value.indexOf(splitter) !== -1) {
+        splitedValue = value.split(splitter);
+    }
+    else {
+        splitedValue.push(value);
+    }
+    const formattedValue = [];
+    splitedValue.forEach((date) => {
+        if (date) {
+            if (dayjs(date, displayFormat, true).isValid()) {
+                const parsedDate = dayjs(date, displayFormat).format(dateFormat);
+                formattedValue.push(parsedDate);
+                return;
+            }
+            if (unitMask && mask && Mask.checkMask(date, unitMask)) {
+                if (inputFormat) {
+                    if (dayjs(date, inputFormat, true).isValid()) {
+                        const parsedDate = dayjs(date, inputFormat).format(dateFormat);
+                        formattedValue.push(parsedDate);
+                        return;
+                    }
+                    formattedValue.push(date);
+                    return;
+                }
+                const unmasked = Mask.getValueWithoutMask(date);
+                let masked;
+                if (!initialMask || isSimpleDisplay) {
+                    const displayFmtMask = displayFormat.replace(/[A-Za-z]/gi, '#');
+                    masked = Mask.getValueWithMask(unmasked, displayFmtMask);
+                    if (dayjs(masked, displayFormat, true).format(displayFormat) === masked) {
+                        const parsedDate = dayjs(masked, displayFormat).format(dateFormat);
+                        formattedValue.push(parsedDate);
+                        return;
+                    }
+                }
+                const dateFmtMask = dateFormat.replace(/[A-Za-z]/gi, '#');
+                masked = Mask.getValueWithMask(unmasked, dateFmtMask);
+                if (dayjs(masked, dateFormat, true).isValid()) {
+                    formattedValue.push(masked);
+                    return;
+                }
+            }
+            formattedValue.push(date);
+        }
+    });
+    return formattedValue;
+});
+InputFactory.register('ZdDateRange', DateRange);
+
 const AutoNumeric = require('@zeedhi/autonumeric/dist/autoNumeric');
 Icons.addIcons({
     add: 'mdi-plus-box',
@@ -15763,7 +16375,5 @@ Icons.addIcons({
     updateLayout: 'mdi-square-edit-outline',
     layout: 'mdi-table-star',
 });
-// const packageContent = require('../package.json');
-// VersionService.addPackageVersion(packageContent.name, packageContent.version);
 
-export { Alert, AlertQueue, AlertReplace, AlertService, AlertStack, AutoNumeric, Badge, Breadcrumbs, Button, ButtonGroup, ButtonOption, Card, Carousel, Checkbox, CheckboxMultiple, ChildNotFoundError, Chip, CodeViewer, Col, CollapseCard, Column, ColumnNotFoundError, ColumnsSearcher, Component, ComponentRender, ConditionsManager, Container, Currency, DataEditor, DataEditorWithAdd, DataNavigator, DataSelector, DataValueOutHelper, DatasourceSearcher, DateInput, DetailNotFoundError, Dialog, DialogService, Divider, Dropdown, DynamicFilterDatasourceFactory, DynamicFilterOperations, DynamicFilterRelations, Footer, Form, Frame, FramePage, Grid, GridColumn, GridColumnEditable, GridEditable, GridEditableController, GridEditableEvents, GridEvents, GroupedDataManager, GroupedDataSelector, GroupedViewNavigator, Header, Icon, Icons, Image, Increment, Input, InputFactory, Iterable, IterableColumnsButton, IterableColumnsButtonController, IterableComponentRender, IterablePageComponent, IterablePageInfo, IterablePageSize, IterablePagination, IterableTable, IterableTree, KeyMapGrouped, KeyMapMerger, KeyMapNavigation, KeyMapTree, Layout, List, ListGroup, ListItem, Loading, LoadingService, Login, LoginButton, Main, MasterDetail, MasterNotFoundError, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, Modal, ModalCloseButton, ModalService, Month, MultiOption, NumberInput, Password, Progress, Radio, Row, Search, Select, SelectMultiple, SvgMap, Switch, Tab, TabNotFoundError, Table, TableActionBuilder, Tabs, Tag, TekFilterHelper, TekGrid, TekGridColumn, TekGridColumnsButton, TekGridColumnsButtonController, TekGridController, TekGridEvents, TekGridFilterButton, TekGridLayoutOptions, TekGridToolbarProvider, TekMemoryDatasource, TekRestDatasource, Text, TextInput, Textarea, Time, TimeFormatSelector, Toggleable, Tooltip, Tree, TreeDataNavigator, TreeDataSelector, TreeDataStructure, TreeGrid, ViewNavigator, columnAggregationValues, initTheme, isFilledObject, isNil, omit, uniqueBy };
+export { Alert, AlertQueue, AlertReplace, AlertService, AlertStack, AutoNumeric, Badge, Breadcrumbs, Button, ButtonGroup, ButtonOption, Card, Carousel, Checkbox, CheckboxMultiple, ChildNotFoundError, Chip, CodeViewer, Col, CollapseCard, Column, ColumnNotFoundError, ColumnsSearcher, Component, ComponentRender, ConditionsManager, Container, Currency, DataEditor, DataEditorWithAdd, DataNavigator, DataSelector, DataValueOutHelper, DatasourceSearcher, DateInput, DateRange, DetailNotFoundError, Dialog, DialogService, Divider, Dropdown, DynamicFilterDatasourceFactory, DynamicFilterOperations, DynamicFilterRelations, Footer, Form, Frame, FramePage, Grid, GridColumn, GridColumnEditable, GridEditable, GridEditableController, GridEditableEvents, GridEvents, GroupedDataManager, GroupedDataSelector, GroupedViewNavigator, Header, Icon, Icons, Image, Increment, Input, InputFactory, Iterable, IterableColumnsButton, IterableColumnsButtonController, IterableComponentRender, IterablePageComponent, IterablePageInfo, IterablePageSize, IterablePagination, IterableTable, IterableTree, KeyMapGrouped, KeyMapMerger, KeyMapNavigation, KeyMapTree, Layout, List, ListGroup, ListItem, Loading, LoadingService, Login, LoginButton, Main, MasterDetail, MasterNotFoundError, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, Modal, ModalCloseButton, ModalService, Month, MultiOption, NumberInput, Password, Progress, Radio, Row, Search, Select, SelectMultiple, SvgMap, Switch, Tab, TabNotFoundError, Table, TableActionBuilder, Tabs, Tag, TekFilterHelper, TekGrid, TekGridColumn, TekGridColumnsButton, TekGridColumnsButtonController, TekGridController, TekGridEvents, TekGridFilterButton, TekGridLayoutOptions, TekGridToolbarProvider, TekMemoryDatasource, TekRestDatasource, Text, TextInput, Textarea, Time, TimeFormatSelector, Toggleable, Tooltip, Tree, TreeDataNavigator, TreeDataSelector, TreeDataStructure, TreeGrid, ViewNavigator, columnAggregationValues, initTheme, isFilledObject, isNil, omit, uniqueBy };