@zeedhi/common 3.0.5 → 3.0.7

package/src/components/zd-date-range/date-range.ts

@@ -1,11 +1,13 @@
 import { Config, DateHelper, FormatterParserProvider, I18n, Mask, Utils, dayjs } from '@zeedhi/core';
-import isUndefined from 'lodash.isundefined';
 import { IDateRange } from './interfaces';
-
+import { isDateAllowed } from '../../utils/date-utils/date-utils';
 import { InputFactory } from '../zd-input/input-factory';
 import { TextInput } from '../zd-text-input/text-input';
+import { getDateRangeMask, getMaskAndUnitMask } from './utils';
+import { validateThenFormat } from '../zd-date-input/utils';
 
 export class DateRange extends TextInput implements IDateRange {
+	public allowedDates?: string[] | ((date: string) => boolean);
 	/**
 	 * Input auto complete.
 	 */
@@ -103,12 +105,6 @@ export class DateRange extends TextInput implements IDateRange {
 
 	protected parserFn = FormatterParserProvider.getParser('ZdDateRange');
 
-	protected initialMask?: string;
-
-	public unitMask?: string;
-
-	protected isSimpleDisplay!: boolean;
-
 	public inputMode?: string | undefined = 'none';
 
 	/* istanbul ignore next */
@@ -134,6 +130,7 @@ export class DateRange extends TextInput implements IDateRange {
 		} else {
 			this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'calendar');
 		}
+		this.allowedDates = this.getInitValue('allowedDates', props.allowedDates, this.allowedDates);
 		this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
 		this.dateFormat = this.getInitValue('dateFormat', props.dateFormat, this.dateFormat);
 		this.dateValidation = this.dateValidation.bind(this);
@@ -147,39 +144,16 @@ export class DateRange extends TextInput implements IDateRange {
 		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 });
-			}
-		};
 	}
 
-	private 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;
+	public appendIconClick(event: Event, element: any) {
+		this.iconClick(event, element);
+		super.appendIconClick(event, element);
 	}
 
 	public formatter(value: any): string {
@@ -223,7 +197,6 @@ export class DateRange extends TextInput implements IDateRange {
 
 		const [startDate, endDate] = value;
 		const isStartValid = this.isValidFormatDate(startDate, this.dateFormat);
-		// if end date is not defined, no need to validate it
 		const isEndValid = !endDate || this.isValidFormatDate(endDate, this.dateFormat);
 		const areDatesValid = isStartValid && isEndValid;
 
@@ -250,29 +223,6 @@ export class DateRange extends TextInput implements IDateRange {
 		return dates;
 	};
 
-	/**
-	 * Assign the updated mask to mask property
-	 */
-	public 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
-	 */
-	protected getUpdatedMask(): string | undefined {
-		if (isUndefined(this.getInitialMask())) {
-			return this.maskFormat(`${this.displayFormat}${this.splitter}${this.displayFormat}`);
-		}
-		return this.mask;
-	}
-
-	protected maskFormat(format: string) {
-		return format.replace(/[A-Za-z]/gi, '#');
-	}
-
 	public setDateValue(displayValue: string) {
 		const lastValue = this.displayValue;
 		const values = this.splitValues(displayValue);
@@ -328,6 +278,10 @@ export class DateRange extends TextInput implements IDateRange {
 		const isValidMax = !maxDate || date.isBefore(maxDate) || date.isSame(maxDate);
 		if (!isValidMax) return false;
 
+		if (!this.getAllowedDates(dayjs(value, format).toDate())) {
+			return false;
+		}
+
 		return true;
 	}
 
@@ -392,11 +346,10 @@ export class DateRange extends TextInput implements IDateRange {
 	}
 
 	public blur(event: Event, element: any) {
+		super.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;
@@ -404,41 +357,37 @@ export class DateRange extends TextInput implements IDateRange {
 	}
 
 	public focus(event: Event, element: any) {
-		this.addDateMask();
 		super.focus(event, element);
+		this.updateDisplayValue();
 	}
 
 	/**
-	 * Add date mask
+	 * Update the displayValue. When using `inputFormat`, on focus we
+	 * must switch to using it as the current format.
 	 */
-	protected 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}`;
-		});
-	}
+	protected updateDisplayValue() {
+		if (!this.inputFormat || !this.value) return;
+
+		let firstDate: dayjs.Dayjs | undefined;
+		let lastDate: dayjs.Dayjs | undefined;
+		if (this.value[0]) {
+			firstDate = dayjs(this.value[0], this.dateFormat, true);
+			if (!firstDate.isValid()) return;
+		}
+		if (this.value[1]) {
+			lastDate = dayjs(this.value[1], this.dateFormat, true);
+			if (!lastDate.isValid()) return;
+		}
 
-	/**
-	 * Removes the component mask if value is valid
-	 */
-	protected removeDateMask() {
-		if (
-			isUndefined(this.getInitialMask()) ||
-			!this.value ||
-			this.dateError ||
-			!this.isValidDateArray(this.dateFormat, this.value)
-		) {
+		const format = this.inputFormat;
+
+		const firstDateString = firstDate ? firstDate.format(format) : '';
+		if (!lastDate) {
+			this.internalDisplayValue = firstDateString;
 			return;
 		}
-		this.mask = '';
+		const lastDateString = lastDate.format(format);
+		this.internalDisplayValue = `${firstDateString}${this.splitter}${lastDateString}`;
 	}
 
 	/**
@@ -460,23 +409,6 @@ export class DateRange extends TextInput implements IDateRange {
 		}
 	}
 
-	/**
-	 * 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
-	 */
-	protected isSimpleFormat(format: string): boolean {
-		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;
-	}
-
 	private previousHint = '';
 
 	private previousPersistentHint = false;
@@ -515,9 +447,22 @@ export class DateRange extends TextInput implements IDateRange {
 		return [arr[0], arr[arr.length - 1]];
 	}
 
-	public setNativeDate(date: Date[]) {
+	public setNativeDate(dates: Date[]) {
 		this.dateError = false;
-		this.dateObject = date.map((obj) => dayjs(obj));
+
+		const dayjsDates = (dates || []).map((d) => dayjs(d));
+		const [start, end] = this.getExtremities(dayjsDates);
+
+		if (start && end) {
+			for (let d = start; d.isBefore(end) || d.isSame(end); d = d.add(1, 'day')) {
+				if (!this.getAllowedDates(d.toDate())) {
+					this.dateError = true;
+					return;
+				}
+			}
+		}
+
+		this.dateObject = (dates || []).map((obj) => dayjs(obj));
 
 		const extremityDates = this.getExtremities(this.dateObject);
 		this.value = extremityDates
@@ -531,22 +476,16 @@ export class DateRange extends TextInput implements IDateRange {
 		return this.dateObject.filter((obj): obj is dayjs.Dayjs => obj !== null).map((obj) => obj.toDate());
 	}
 
-	public getMaskValue() {
-		let mask: any = '';
-
-		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;
-		}
+	public getAllowedDates(date: Date) {
+		return isDateAllowed(date, this.dateFormat, this.allowedDates);
+	}
 
-		return mask;
+	public getMask() {
+		return getDateRangeMask(
+			this.inputFormat || this.displayFormat || '',
+			this.splitter,
+			this.isFocused,
+		)
 	}
 }
 
@@ -558,56 +497,39 @@ FormatterParserProvider.registerFormatter(
 			dateFormat = Config.dateFormat,
 			displayFormat = Config.displayFormat,
 			inputFormat = Config.dateInputFormat,
-			initialMask,
 			splitter = ' ~ ',
-			unitMask = '',
-			mask = '',
-			isSimpleDisplay = false,
-		}: any = {},
+			isFocused,
+		}: {
+			dateFormat?: string;
+			displayFormat?: string;
+			inputFormat?: string;
+			splitter?: string;
+			isFocused?: boolean;
+		} = {},
 	) => {
 		if (!value || value.length === 0 || (value.length === 1 && !value[0])) {
 			return '';
 		}
-		const formattedValue: string[] = [];
-		value.forEach((date) => {
-			if (date) {
-				const isDateValid = dayjs(date, dateFormat, true).isValid();
 
-				if (!isDateValid) {
-					formattedValue.push(date);
-					return;
-				}
+		const formattedValues = value
+		.filter((date) => !!date)
+		.map((date) => {
+			const isDateValid = dayjs(date, dateFormat, true).isValid();
 
-				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);
+			if (!isDateValid) {
+				return date;
+			}
 
-					formattedValue.push(masked);
-					return;
-				}
+			const { mask } = getMaskAndUnitMask({ inputFormat, displayFormat, splitter, isFocused });
 
-				const formatted = dayjs(date, dateFormat).format(displayFormat);
-				formattedValue.push(formatted);
+			if (!mask || !inputFormat || !isFocused) {
+				return dayjs(date, dateFormat).format(displayFormat);
 			}
-		});
 
-		let displayOutput: string = formattedValue[0];
-		if (formattedValue.length === 2) {
-			displayOutput += `${splitter}${formattedValue[1]}`;
-		}
+			return dayjs(date, dateFormat).format(inputFormat);
+		});
 
-		return displayOutput;
+		return formattedValues.join(splitter);
 	},
 );
 
@@ -620,74 +542,51 @@ FormatterParserProvider.registerParser(
 			displayFormat = Config.displayFormat,
 			inputFormat = Config.dateInputFormat,
 			splitter = ' ~ ',
-			unitMask = '',
-			mask = '',
-			initialMask,
-			isSimpleDisplay = false,
-		}: any = {},
+			isFocused,
+		}: {
+			dateFormat?: string;
+			displayFormat?: string;
+			inputFormat?: string;
+			splitter?: string;
+			isFocused?: boolean;
+		} = {},
 	) => {
 		if (!value) {
 			return [];
 		}
 
-		let splitedValue: string[] = [];
+		let splittedValue: string[] = [];
 
 		if (value.indexOf(splitter) !== -1) {
-			splitedValue = value.split(splitter);
+			splittedValue = value.split(splitter);
 		} else {
-			splitedValue.push(value);
+			splittedValue.push(value);
 		}
 
-		const formattedValue: string[] = [];
-		splitedValue.forEach((date) => {
-			if (date) {
-				if (dayjs(date, displayFormat, true).isValid()) {
-					const parsedDate = dayjs(date, displayFormat).format(dateFormat);
-					formattedValue.push(parsedDate);
-					return;
+		const { unitMask } = getMaskAndUnitMask({ inputFormat, displayFormat, splitter, isFocused });
+		return splittedValue
+		.filter((date) => !!date)
+		.map((date) => {
+			if (!Mask.checkMask(date, unitMask)) return date;
+
+			// when using inputFormat and focused, should parse according to inputFormat
+			if (inputFormat && isFocused) {
+				const { valid, newValue } = validateThenFormat(date, inputFormat, dateFormat);
+				if (valid) {
+					return newValue;
 				}
 
-				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;
-					}
-				}
+				return date;
+			}
 
-				formattedValue.push(date);
+			// should parse according to displayFormat
+			const { valid, newValue } = validateThenFormat(date, displayFormat, dateFormat);
+			if (!valid) {
+				return date;
 			}
+
+			return newValue;
 		});
-		return formattedValue;
 	},
 );
 

package/src/components/zd-date-range/utils.ts

@@ -0,0 +1,31 @@
+import { toMask } from '../../utils/date-utils/date-utils';
+
+export function getDateRangeMask(format: string, splitter: string, focused = true) {
+    if (focused && format) {
+        return toFullMask(format, splitter);
+    }
+    return '';
+}
+
+function toFullMask(format: string, splitter: string) {
+    const partialMask = toMask(format);
+
+    const fullMask = `${partialMask}${splitter}${partialMask}`;
+
+    return fullMask;
+}
+
+/**
+ * Helper to simplify the generation of date range mask and unit mask
+ */
+export function getMaskAndUnitMask({ inputFormat, displayFormat, splitter, isFocused }: { inputFormat?: string; displayFormat: string; splitter: string; isFocused?: boolean }) {
+    const format = inputFormat || displayFormat;
+    const unitMask = isFocused ? toMask(format) : '';
+    const mask = getDateRangeMask(
+        format,
+        splitter,
+        isFocused,
+    )
+
+    return { mask, unitMask };
+}

package/src/components/zd-frame/frame.ts

@@ -204,7 +204,7 @@ export class Frame extends ComponentRender implements IFrame {
 		if (!header) return false;
 
 		const lastFetch = Number(header);
-		return lastFetch + this.cacheDuration > new Date().getTime();
+		return lastFetch + this.cacheDuration > Date.now();
 	}
 
 	/**
@@ -214,7 +214,7 @@ export class Frame extends ComponentRender implements IFrame {
 	 * @param metadata Metadata to be stored
 	 */
 	private putCache(cache: Cache, url: string, metadata: IDictionary) {
-		const time = String(new Date().getTime());
+		const time = String(Date.now());
 		const headers = new Headers({
 			[this.headerName]: time,
 		});

package/src/components/zd-grid-editable/data-editor-with-add.ts

@@ -105,7 +105,7 @@ export class DataEditorWithAdd extends DataEditor implements IDataEditorWithAdd
 			row = omit(row, this.NEW_ROW_IDENTIFIER);
 
 			Object.keys(row).forEach((attr) => {
-				if (Object.prototype.hasOwnProperty.call(row, `${attr}_original`)) {
+				if (Object.hasOwn(row, `${attr}_original`)) {
 					delete row[`${attr}_original`];
 				}
 			});

package/src/components/zd-grid-editable/data-editor.ts

@@ -45,7 +45,7 @@ export class DataEditor implements IDataEditor {
 	getVisibleValue(row: IDictionary, column: IGridColumnEditable) {
 		const key = this.grid.getRowKey(row);
 		const editedRow = this.editedRows.get(key);
-		if (editedRow && Object.prototype.hasOwnProperty.call(editedRow, column.name)) {
+		if (editedRow && Object.hasOwn(editedRow, column.name)) {
 			return editedRow[column.name];
 		}
 		return row[column.name];
@@ -76,7 +76,7 @@ export class DataEditor implements IDataEditor {
 		if (
 			colValue &&
 			typeof colValue === 'object' &&
-			Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)
+			Object.hasOwn(colValue, componentProps.dataValue)
 		) {
 			const value = (colValue as IDictionary)[componentProps.dataValue];
 			this.pushLookupValue(column, value, componentProps);

package/src/components/zd-iterable/iterable.ts

@@ -234,9 +234,47 @@ export abstract class Iterable<T extends Column = Column>
 	}
 
 	protected changeDefaultSlotNames(slot: IComponentRender[]) {
-		const strMetadata = JSON.stringify(slot);
-		const newObj = strMetadata.replace(/<<NAME>>/g, this.name);
-		return JSON.parse(newObj);
+		return this.recursiveReplace(slot, /<<NAME>>/g, this.name);
+	}
+
+	/**
+	 * Recursively replaces a pattern in all string values within an object/array tree
+	 * @param obj The object or array to process
+	 * @param pattern The regex pattern to search for
+	 * @param replacement The replacement string
+	 * @returns A new object/array with replaced values
+	 */
+	private recursiveReplace(obj: unknown, pattern: RegExp, replacement: string): any {
+		// Handle null or undefined
+		if (obj === null || obj === undefined) {
+			return obj;
+		}
+
+		// Handle string values - perform replacement
+		if (typeof obj === 'string') {
+			return obj.replace(pattern, replacement);
+		}
+
+		// Handle arrays - recursively process each element
+		if (Array.isArray(obj)) {
+			return obj.map((item) => this.recursiveReplace(item, pattern, replacement));
+		}
+
+		// Handle objects - recursively process each property value
+		if (this.isObject(obj)) {
+			const newObj: IDictionary = {};
+			for (const key in obj) {
+				newObj[key] = this.recursiveReplace(obj[key], pattern, replacement);
+			}
+			return newObj;
+		}
+
+		// For all other types (functions, numbers, booleans, etc.), return as-is
+		return obj;
+	}
+
+	private isObject(value: unknown): value is IDictionary {
+		return typeof value === 'object';
 	}
 
 	public findRow(key: string | number) {