@zeedhi/common 3.0.6 → 3.1.0

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

@@ -1,12 +1,12 @@
 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.
@@ -105,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 */
@@ -150,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 {
@@ -252,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);
@@ -398,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;
@@ -410,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}`;
 	}
 
 	/**
@@ -466,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;
@@ -554,22 +480,12 @@ export class DateRange extends TextInput implements IDateRange {
 		return isDateAllowed(date, this.dateFormat, this.allowedDates);
 	}
 
-	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;
-		}
-
-		return mask;
+	public getMask() {
+		return getDateRangeMask(
+			this.inputFormat || this.displayFormat || '',
+			this.splitter,
+			this.isFocused,
+		)
 	}
 }
 
@@ -581,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;
-				}
-
-				if (initialMask && mask && unitMask) {
-					if (inputFormat) {
-						const formatted = dayjs(date, dateFormat).format(inputFormat);
-						formattedValue.push(formatted);
-						return;
-					}
+		const formattedValues = value
+		.filter((date) => !!date)
+		.map((date) => {
+			const isDateValid = dayjs(date, dateFormat, true).isValid();
 
-					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);
 	},
 );
 
@@ -643,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/interfaces.ts

@@ -91,7 +91,7 @@ export interface IGridProps extends IIterableProps {
 	dragColumns?: boolean;
 	errorSlot?: IComponentRender[];
 	events?: GridEventsProp;
-	fillHeight?: boolean;
+	fillHeight?: boolean | string;
 	footerSlot?: IComponentRender[];
 	headerBackground?: string;
 	headerCellTextColor?: string;

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

@@ -4,7 +4,7 @@ import { Input } from '../zd-input/input';
 import { Column } from '../zd-iterable/column';
 import { DataEditor } from './data-editor';
 import { GridEditableController } from './grid-editable-controller';
-import { IDataEditorWithAdd, IGridColumnEditable, IGridEditable } from './interfaces';
+import { IDataEditorWithAdd, IGridColumnEditable } from './interfaces';
 
 export class DataEditorWithAdd extends DataEditor implements IDataEditorWithAdd {
 	private NEW_ROW_IDENTIFIER = '__added_row';
@@ -15,12 +15,6 @@ export class DataEditorWithAdd extends DataEditor implements IDataEditorWithAdd
 	 */
 	private addedRows: Map<string | number, IDictionary> = new Map();
 
-	constructor(grid: IGridEditable) {
-		super(grid);
-		this.addCancelColumn();
-		this.createGridController();
-	}
-
 	addCancelColumn(): void {
 		if (!this.grid.showCancelColumn) return;
 
@@ -105,7 +99,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-grid-editable/grid-editable-controller.ts

@@ -12,6 +12,8 @@ export class GridEditableController {
 		return this.grid.getAddedRows().length > 0;
 	}
 
+	public set hasAddedRows(_value: boolean) {};
+
 	public isAddedRow({ row }: IDictionary) {
 		return this.grid.isAdded(row);
 	}

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

@@ -223,6 +223,12 @@ export class GridEditable extends Iterable<GridColumnEditable> implements IGridE
 		this.dataEditor = new DataEditorWithAdd(this);
 	}
 
+	public onCreated(): void {
+		this.createGridController();
+		this.addCancelColumn();
+		super.onCreated();
+	}
+
 	getConditionalProps({ row, column }: { row: IDictionary; column: GridColumn }): Partial<IComponentRender> {
 		const rowStyle = this.getRowStyleConditions(row);
 		const cellsApplied = this.getAppliedConditions({ row, column });
@@ -234,6 +240,10 @@ export class GridEditable extends Iterable<GridColumnEditable> implements IGridE
 		this.dataEditor.addCancelColumn();
 	}
 
+	createGridController(): void {
+		this.dataEditor.createGridController();
+	}
+
 	getCancelColumnProps(): IGridColumnEditable {
 		return this.dataEditor.getCancelColumnProps();
 	}

package/src/components/zd-grid-editable/interfaces.ts

@@ -63,4 +63,5 @@ export interface IDataEditorWithAdd extends IDataEditor {
 	cancelAddedRows(): Promise<void>;
 	getAddedRows(): IDictionary<any>[];
 	addNewRow(row: IDictionary, position?: 'end' | 'start'): Promise<void>;
+	createGridController(): void;
 }

package/src/components/zd-iterable-component-render/interfaces.ts

@@ -12,7 +12,7 @@ export interface IIterableComponentRenderProps extends IIterableProps {
 	height?: number | string;
 	maxHeight?: number | string;
 	minHeight?: number | string;
-	fillHeight?: boolean;
+	fillHeight?: boolean | string;
 	width?: number | string;
 	maxWidth?: number | string;
 	minWidth?: number | string;
@@ -29,7 +29,7 @@ export interface IIterableComponentRender extends IIterableProps {
 	height: number | string;
 	maxHeight: number | string;
 	minHeight: number | string;
-	fillHeight: boolean;
+	fillHeight: boolean | string;
 	width: number | string;
 	maxWidth: number | string;
 	minWidth: number | string;

package/src/components/zd-list/interfaces.ts

@@ -15,7 +15,7 @@ export interface IList extends IComponentRender {
 	height?: number | string;
 	maxHeight?: number | string;
 	minHeight?: number | string;
-	fillHeight?: boolean;
+	fillHeight?: boolean | string;
 	width?: number | string;
 	maxWidth?: number | string;
 	minWidth?: number | string;

package/src/components/zd-master-detail/interfaces.ts

@@ -7,5 +7,5 @@ export interface IMasterDetail extends IComponentRender {
 	height?: number | string;
 	maxHeight?: number | string;
 	minHeight?: number | string;
-	fillHeight?: boolean;
+	fillHeight?: boolean | string;
 }

package/src/components/zd-menu/interfaces.ts

@@ -1,4 +1,4 @@
-import { IEventParam } from '@zeedhi/core';
+import { IDictionary, IEventParam } from '@zeedhi/core';
 import { IButton } from '../zd-button/interfaces';
 import { IComponentEvents, IComponentRender } from '../zd-component/interfaces';
 import { MenuLink } from './menu-link';
@@ -33,11 +33,22 @@ export interface IMenu extends IComponentRender {
 	permanent?: boolean | string;
 }
 
+/**
+ * Interface criada para remover a referencia circular Menu -> MenuItem -> Menu
+ */
+export interface IMenuRef {
+	isSelected(item: IMenuItem): boolean;
+	currentItem: IMenuItem | null;
+	showTooltip?: boolean;
+	tooltipText?: string;
+	tooltipContentProps?: IDictionary<any>;	
+}
+
 /**
  * Interface for menu itens
  */
 export interface IMenuItem extends IComponentRender {
-	parentMenu?: IMenu;
+	parentMenu?: IMenuRef;
 	parentGroup?: IMenuGroup;
 }
 

package/src/components/zd-menu/menu-group.ts

@@ -1,5 +1,5 @@
 import { ComponentRender } from '../zd-component/component-render';
-import { IMenuGroup, IMenuItem } from './interfaces';
+import { IMenuGroup, IMenuItem, IMenuRef } from './interfaces';
 import { Menu } from './menu';
 
 /**
@@ -29,7 +29,7 @@ export class MenuGroup extends ComponentRender implements IMenuGroup {
 	/**
 	 * Menu that contains the item
 	 */
-	public parentMenu?: Menu;
+	public parentMenu?: IMenuRef;
 
 	/**
 	 * Group that contains the item

package/src/components/zd-menu/menu-link.ts

@@ -1,5 +1,5 @@
 import { ComponentRender } from '../zd-component/component-render';
-import { IMenuLink, IMenuLinkEvents } from './interfaces';
+import { IMenuLink, IMenuLinkEvents, IMenuRef } from './interfaces';
 import { Menu } from './menu';
 import { MenuGroup } from './menu-group';
 
@@ -30,7 +30,7 @@ export class MenuLink extends ComponentRender implements IMenuLink {
 	/**
 	 * Menu that contains the item
 	 */
-	public parentMenu?: Menu;
+	public parentMenu?: IMenuRef;
 
 	/**
 	 * Group that contains the item

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

@@ -51,7 +51,7 @@ export class Menu extends ComponentRender implements IMenu {
 	/**
 	 * Defines the width of the menu when in mini state
 	 */
-	public miniWidth: number | string = 58;
+	public miniWidth: number | string = 50;
 
 	/**
 	 * Defines if the menu is mini