@zeedhi/common 1.111.1 → 3.0.0

package/src/components/zd-select-multiple/select-multiple.ts

@@ -0,0 +1,488 @@
+import { FormatterParserProvider, I18n, IDictionary } from '@zeedhi/core';
+import { uniqueBy } from '../../utils';
+import { Select } from '../zd-select/select';
+import { ISelectMultiple } from './interfaces';
+
+export class SelectMultiple extends Select implements ISelectMultiple {
+	/**
+	 * Selected items that were added to datasource
+	 */
+	public insertedValues: IDictionary<any>[] = [];
+
+	/**
+	 * Inserted values that were unselected
+	 */
+	private insertsRemoved: IDictionary<any>[] = [];
+
+	/**
+	 * Max number of rows the component can have
+	 */
+	public maxRows?: string | number = undefined;
+
+	/**
+	 * Limit the display of selected options. The rest will be hidden within the 'limitText' string
+	 */
+	public limit: number | null = null;
+
+	public showSelectAll = false;
+
+	public showCheckboxAll = false;
+
+	/* istanbul ignore next */
+	/**
+	 * Create a new Select.
+	 * @param props Select properties
+	 */
+	constructor(props: ISelectMultiple) {
+		super(props);
+		if (!this.selectValue) {
+			this.selectValue = [];
+		}
+		this.showSelectAll = this.getInitValue('showSelectAll', props.showSelectAll, this.showSelectAll);
+		this.maxRows = this.getInitValue('maxRows', props.maxRows, this.maxRows);
+		this.limit = this.getInitValue('limit', props.limit, this.limit);
+		this.showCheckboxAll = this.getInitValue('showCheckboxAll', props.showCheckboxAll, this.showCheckboxAll);
+		this.checkboxAll = this.getInitValue('checkboxAll', props.checkboxAll, this.checkboxAll);
+		if (!Array.isArray(this.dataText)) this.dataText = [this.dataText];
+		this.internalDisplayValue = this.getDisplayValue();
+		this.createAccessors();
+		this.autoSelection = false;
+	}
+
+	public selectValue: IDictionary<any>[] = [];
+
+	public updateSelectValue(rows: IDictionary<any>) {
+		if (!Array.isArray(rows)) return;
+
+		if (!this.manualMode) {
+			const values = rows.map((row) => row[this.dataValue]);
+			if (values.length) {
+				let result = this.cutFromAToB(
+					this.insertedValues,
+					this.insertsRemoved,
+					(value) => !values.includes(value[this.dataValue]),
+				);
+				this.insertedValues = result.updatedSource;
+				this.insertsRemoved = result.updatedDestination;
+
+				result = this.cutFromAToB(this.insertsRemoved, this.insertedValues, (value) =>
+					values.includes(value[this.dataValue]),
+				);
+				this.insertsRemoved = result.updatedSource;
+				this.insertedValues = result.updatedDestination;
+			} else {
+				this.insertsRemoved = this.insertedValues;
+				this.insertedValues = [];
+			}
+		}
+
+		this.selectValue = rows;
+	}
+
+	private checkboxAllValue = false;
+
+	get checkboxAll() {
+		return this.checkboxAllValue;
+	}
+
+	set checkboxAll(value: boolean) {
+		if (this.showCheckboxAll) {
+			this.disabled = value;
+		}
+		this.checkboxAllValue = value;
+	}
+
+	/**
+	 * Removes item from array a and add it to array b if condition is satisfied
+	 */
+	private cutFromAToB(
+		sourceArray: IDictionary[],
+		destinationArray: IDictionary[],
+		conditionCallback: (value: IDictionary) => boolean,
+	) {
+		// Create copies of the original arrays to avoid mutating them directly
+		const source = [...sourceArray];
+		const destination = [...destinationArray];
+
+		// Find items that meet the condition
+		const itemsToTransfer = source.filter(conditionCallback);
+
+		// Remove items from source array
+		const updatedSource = source.filter((item) => !conditionCallback(item));
+
+		// Add items to destination array
+		const updatedDestination = [...destination, ...itemsToTransfer];
+
+		return { updatedSource, updatedDestination };
+	}
+
+	protected getCondition(filterValue: any) {
+		return (row: any) => row[this.dataValue] === filterValue;
+	}
+
+	protected async setFieldValue(value: any[]) {
+		const foundValues: any[] = [];
+		const searchedValues: any[] = [];
+		let pushed = false;
+		value.forEach((row) => {
+			let filterValue;
+			if (row && typeof row === 'object') {
+				filterValue = row[this.dataValue];
+			} else {
+				filterValue = row;
+			}
+			const foundInData = this.datasource.data.find(this.getCondition(filterValue));
+			if (foundInData) {
+				foundValues.push(foundInData);
+			} else if (!this.manualMode) {
+				searchedValues.push(filterValue);
+			}
+		});
+
+		const insertItem = async (item?: IDictionary) => {
+			if (!item) return;
+
+			foundValues.push(item);
+			this.datasource.data.unshift(item);
+			this.insertedValues.push(item);
+			pushed = true;
+		};
+
+		// using filter/find/dynamicFilter should make only 1 request
+		// using normal search should make one request per search value
+		if (this.searchParam !== 'SEARCH') {
+			const items = await this.getItemsBySearchValue(searchedValues);
+			items.forEach(insertItem);
+		} else {
+			const promises = searchedValues.map(async (searchedValue) => {
+				const [item] = await this.getItemsBySearchValue(searchedValue);
+				insertItem(item);
+			});
+			await Promise.all(promises);
+		}
+
+		if (foundValues.length > 0) {
+			this.setFieldRowValue(foundValues);
+		} else {
+			this.setFieldRowValue([]);
+		}
+
+		return pushed;
+	}
+
+	/**
+	 * Set value accessors
+	 * @param value
+	 */
+	protected setFieldRowValue(rows: any[]) {
+		if (rows.length > 0) {
+			const value = this.getValues(rows);
+			this.pushedValue = value;
+		} else {
+			this.pushedValue = [];
+		}
+		this.selectValue = rows;
+	}
+
+	public async setValue(value: any[] | any, callEvent = true) {
+		if (Array.isArray(value) && value.length > 0) {
+			await this.setFieldValue(value);
+		} else {
+			this.pushedValue = [];
+			this.selectValue = [];
+		}
+		this.updateSelectValue(this.selectValue);
+		this.internalDisplayValue = this.getDisplayValue();
+		if (callEvent) {
+			this.callChangeEvent(this.pushedValue);
+		}
+	}
+
+	private getDisplayValue() {
+		return this.formatter(this.selectValue).map((item: IDictionary) => item.text);
+	}
+
+	/**
+	 * Retrieves input value
+	 * @param value inputted
+	 * @private
+	 */
+	protected getValue(value: any) {
+		return this.getValues(value);
+	}
+
+	/**
+	 * Retrieves input value
+	 * @param value inputed
+	 * @protected
+	 */
+	protected getValues(value: IDictionary<any>[]): IDictionary<any>[] | any[] {
+		if (!value || value.length === 0) {
+			return [];
+		}
+
+		return this.returnObject ? value : value.map((row: IDictionary<any>) => row[this.dataValue]);
+	}
+
+	/**
+	 * Updates search value
+	 * @param value Search value
+	 */
+	public async updateSearch(value: string) {
+		const parsedValue = this.parserFn(value, this);
+		if (parsedValue !== this.datasource.search) {
+			await this.datasource.setSearch(parsedValue);
+		}
+	}
+
+	/**
+	 * Inserts selected items in datasource
+	 */
+	protected insertSelected() {
+		if (this.manualMode) return;
+
+		this.insertedValues = [];
+		this.selectValue.forEach((value: IDictionary<any>) => {
+			const filterValue = value[this.dataValue];
+			const foundInData = this.datasource.data.find(this.getCondition(filterValue));
+
+			if (!foundInData) {
+				this.datasource.data.unshift(value);
+				this.insertedValues.push(value);
+			}
+		});
+	}
+
+	protected removePushedValue() {
+		this.removeInserts();
+	}
+
+	protected async doSearch(value: string) {
+		if (this.manualMode || value) {
+			await this.updateSearch(value);
+		} else {
+			this.datasource.search = value;
+			if (!this.manualMode) {
+				this.datasource.data = [...this.cachedData];
+				this.datasource.total = this.cachedTotal;
+			}
+
+			this.removeInserts();
+			this.insertSelected();
+		}
+	}
+
+	/**
+	 * Removes unselected inserts from datasource
+	 */
+	private removeInserts() {
+		const removedValues = this.insertsRemoved.map((removed: any) => removed[this.dataValue]);
+		this.datasource.data = this.datasource.data.filter((row: IDictionary<any>) => {
+			const removed = removedValues.includes(row[this.dataValue]);
+			return !removed;
+		});
+		this.insertsRemoved = [];
+	}
+
+	/**
+	 * Return formatted dataText and values
+	 */
+	public formatter(value: IDictionary<any>[]): any {
+		if (!value || value.length === 0) {
+			return [];
+		}
+
+		const selectFormatter = FormatterParserProvider.getFormatter('ZdSelect');
+
+		const formattedValue = value.map((row: IDictionary<any>) => {
+			const isDisabled = this.dataDisabled && row[this.dataDisabled];
+			const formattedRow: IDictionary<any> = { value: row[this.dataValue], disabled: isDisabled, originalRow: row };
+			formattedRow.text = selectFormatter(row, this);
+
+			return formattedRow;
+		});
+
+		return formattedValue;
+	}
+
+	/**
+	 * Returns the text shown when there's one or more selected items that doesn't fit in the input
+	 */
+	public getMoreChipText(moreChip: number) {
+		const keyToTranslate = 'MORE_ITEM';
+		const translatedText = I18n.translate(keyToTranslate, { count: moreChip });
+		return translatedText;
+	}
+
+	public showLoadMore() {
+		return (
+			!!this.datasource.data.length &&
+			!this.datasource.loading &&
+			!this.datasource.loadAll &&
+			this.datasource.data.length - this.insertedValues.length - this.insertsRemoved.length < this.datasource.total
+		);
+	}
+
+	/**
+	 * Load more data
+	 */
+	public async loadMore() {
+		await this.datasource.setLimit(this.datasource.limit + this.loadMoreAmount);
+		this.insertsRemoved = this.insertsRemoved.filter((insert: any) => {
+			const value = insert[this.dataValue];
+			const foundInData = this.datasource.data.find(this.getCondition(value));
+
+			return !foundInData;
+		});
+		if (!this.datasource.search) {
+			this.setCache();
+		}
+		this.removePushedValue();
+	}
+
+	/**
+	 * Triggered when the component loses focus.
+	 * @param event DOM event
+	 * @param element Element that lost the focus
+	 */
+	public blur(event: Event, element: any) {
+		super.blur(event, element);
+		if (this.autocomplete) {
+			this.search = '';
+			this.removeInserts();
+			this.insertSelected();
+		}
+	}
+
+	/**
+	 * Dispatches select/unselect event
+	 * @param isChanged checked is changed
+	 * @param event DOM event
+	 * @param element DOM Element
+	 */
+	public onSelectAll(isSelected: boolean, event: Event, element: any) {
+		if (isSelected) {
+			this.callEvent('selectedAll', { event, element, component: this });
+			if (!event.defaultPrevented) {
+				this.selectAllItems();
+			}
+		} else {
+			this.callEvent('unselectedAll', { event, element, component: this });
+			if (!event.defaultPrevented) {
+				this.unSelectAllItems();
+			}
+		}
+	}
+
+	public async selectAllItems() {
+		if (this.datasource.data.length < this.datasource.total) {
+			this.datasource.loadAll = true;
+			await this.datasource.get();
+		}
+
+		// remove disabled values
+		const filteredData = this.datasource.data.filter((row: IDictionary) => {
+			if (row[this.dataDisabled]) return false;
+
+			const disabledValues = this.disabledItems.map((item) => {
+				if (typeof item === 'object') return item[this.dataValue];
+
+				return item;
+			});
+			if (disabledValues.includes(row[this.dataValue])) return false;
+
+			return true;
+		});
+		this.setValue(filteredData);
+
+		if (!this.datasource.search) {
+			this.setCache();
+		}
+	}
+
+	public async unSelectAllItems() {
+		if (!this.datasource.search) {
+			this.removeInserts();
+			this.insertSelected();
+			await this.setValue([]);
+		} else {
+			const newData: IDictionary<any>[] = this.insertedValues;
+
+			await this.setValue(newData);
+
+			this.removeInserts();
+			this.insertSelected();
+		}
+	}
+
+	protected checkValueOnBlur() {
+		if (this.manualMode) return;
+
+		this.datasource.data = [...this.cachedData];
+		this.datasource.total = this.cachedTotal;
+	}
+
+	protected async afterFocus() {
+		if (!this.preventLoadOnFocus) {
+			await this.datasource.get();
+			this.preventLoadOnFocus = true;
+		}
+
+		this.setCache();
+		this.updateSearch(this.dirtySearchValue);
+	}
+
+	private setCache() {
+		if (this.manualMode) return;
+
+		if (this.insertedValues.length) {
+			this.datasource.data = uniqueBy(this.insertedValues.concat(this.datasource.data), this.datasource.uniqueKey);
+			const values = this.insertedValues.map((inserted) => inserted[this.dataValue]);
+
+			// prevent caching insertedValues
+			this.cachedData = this.datasource.data.filter((row) => !values.includes(row[this.dataValue]));
+		} else {
+			this.cachedData = this.datasource.data;
+		}
+
+		this.cachedTotal = this.datasource.total;
+	}
+
+	protected registerGetCallback() {
+		const callback = async () => {
+			if (!this.datasource.search && !this.manualMode) {
+				this.cachedData = [...this.datasource.data];
+				this.cachedTotal = this.datasource.total;
+			}
+
+			this.insertSelected();
+		};
+
+		this.datasource.registerGetCallback(callback);
+	}
+
+	/**
+	 * Updates input rules.
+	 */
+	protected updateRules() {
+		this.rules = Object.keys(this.parsedValidations).map((key: string) => (value?: any) => {
+			const testValue = value !== undefined ? value : this.value;
+
+			const validation = this.parsedValidations[key];
+			if (key !== 'required') return validation(testValue);
+
+			return validation((this.checkboxAll && 'all') || testValue);
+		});
+	}
+
+	/**
+	 * Retrieves value based on the returnObject definition
+	 */
+	protected getReturnValue(value: IDictionary[] | null) {
+		if (!value) {
+			return [];
+		}
+
+		return this.returnObject ? value : value.map((row: IDictionary) => row[this.dataValue]);
+	}
+}

package/src/components/zd-svg-map/interfaces.ts

@@ -0,0 +1,30 @@
+import { IDictionary, IEventParam } from '@zeedhi/core';
+import { EventDef, IComponentEvents, IComponentRender } from '../zd-component/interfaces';
+import { SvgMap } from './svg-map';
+
+export interface ISvgMapEventParam extends IEventParam<SvgMap> {
+	area: SVGElement;
+}
+
+export interface ISvgMapEvents<T = ISvgMapEventParam | IEventParam<any>> extends IComponentEvents<T> {
+	areaClick?: EventDef<T>;
+}
+
+export type TooltipData = {
+	labels: IDictionary;
+	data: IDictionary[];
+};
+
+export interface ISvgMap extends IComponentRender {
+	areaColor?: string;
+	areaHoverColor?: string;
+	areaSelectColor?: string;
+	events?: ISvgMapEvents;
+	height?: string | number;
+	multiple?: boolean;
+	selectedArea?: string | string[];
+	src?: string;
+	width?: string | number;
+	tooltipData?: TooltipData;
+	keyColumn?: string;
+}

package/src/components/zd-svg-map/svg-map.ts

@@ -0,0 +1,130 @@
+import { Http } from '@zeedhi/core';
+import { ComponentRender } from '../zd-component/component-render';
+import { ISvgMap, ISvgMapEvents, TooltipData } from './interfaces';
+
+/**
+ * Base class for SvgMap component.
+ */
+export class SvgMap extends ComponentRender implements ISvgMap {
+	public areaColor?: string = '#bdbdbd';
+	public areaHoverColor?: string = '#999';
+	public areaSelectColor?: string = 'primary';
+	public declare events: ISvgMapEvents;
+	public height: string | number = 'auto';
+	public multiple = false;
+	public width: string | number = 'auto';
+	public svgContent = '';
+	public svgContainer!: any;
+	public tooltipData?: TooltipData | undefined;
+	public loading?: boolean = false;
+	public keyColumn = 'id';
+
+	private mapAreas: Element[] = [];
+	private srcValue = '';
+	private selectedAreaValue: string | string[] = '';
+
+	protected viewBeforeUpdate?: () => void;
+	protected viewUpdate?: () => void;
+
+	constructor(props: ISvgMap) {
+		super(props);
+		this.areaColor = this.getInitValue('areaColor', props.areaColor, this.areaColor);
+		this.areaHoverColor = this.getInitValue('areaHoverColor', props.areaHoverColor, this.areaHoverColor);
+		this.areaSelectColor = this.getInitValue('areaSelectColor', props.areaSelectColor, this.areaSelectColor);
+		this.multiple = this.getInitValue('multiple', props.multiple, this.multiple);
+		this.selectedArea = this.getInitValue('selectedArea', props.selectedArea, this.selectedArea);
+		this.src = this.getInitValue('src', props.src, this.src);
+		this.height = this.getInitValue('height', props.height, this.height);
+		this.width = this.getInitValue('width', props.width, this.width);
+		this.tooltipData = this.getInitValue('tooltipData', props.tooltipData, this.tooltipData);
+		this.keyColumn = this.getInitValue('keyColumn', props.keyColumn, this.keyColumn);
+	}
+
+	get src() {
+		return this.srcValue;
+	}
+
+	set src(value: string) {
+		this.srcValue = value;
+		this.getSVG();
+	}
+
+	get selectedArea() {
+		return this.selectedAreaValue;
+	}
+
+	set selectedArea(value: string | string[]) {
+		this.selectedAreaValue = value;
+		this.updateSelectedArea();
+	}
+
+	private updateSelectedArea() {
+		const selectedAreas = this.multiple ? this.selectedAreaValue : [this.selectedAreaValue];
+		this.mapAreas.forEach((area) => {
+			if (selectedAreas.indexOf(area.id) > -1) {
+				area.classList.add('active');
+			} else {
+				area.classList.remove('active');
+			}
+		});
+	}
+
+	private getSVG() {
+		if (this.srcValue) {
+			this.loading = true;
+			Http.get(this.srcValue, { baseURL: '' }).then((response) => {
+				this.svgContent = response.data;
+				this.updateSVGContainer();
+				this.loading = false;
+			});
+		}
+	}
+
+	public setViewBeforeUpdate(beforeUpdate: () => void) {
+		this.viewBeforeUpdate = beforeUpdate;
+	}
+
+	public setViewUpdate(update: () => void) {
+		this.viewUpdate = update;
+	}
+
+	public updateSVGContainer() {
+		if (this.svgContainer && this.svgContent) {
+			if (this.svgContent.indexOf('<svg') >= 0 && this.svgContent.indexOf('</svg>') >= 0) {
+				if (this.viewBeforeUpdate) this.viewBeforeUpdate();
+
+				this.svgContainer.innerHTML = this.svgContent;
+				const svgTag = this.svgContainer.getElementsByTagName('svg')[0];
+				this.mapAreas = Array.from(svgTag.children);
+				this.updateSelectedArea();
+
+				if (this.viewUpdate) this.viewUpdate();
+			} else {
+				throw new Error('Must be a valid svg file');
+			}
+		}
+	}
+
+	public mapClick(element: SVGElement) {
+		const { id } = element;
+		if (!this.multiple) {
+			this.selectedArea = id;
+		} else {
+			this.selectedArea = this.selectedArea || [];
+
+			if (!Array.isArray(this.selectedArea)) {
+				this.selectedArea = [this.selectedArea];
+			}
+
+			const idx = this.selectedArea.indexOf(id);
+			if (idx > -1) {
+				this.selectedArea.splice(idx, 1);
+			} else {
+				this.selectedArea.push(id);
+			}
+			this.updateSelectedArea();
+		}
+
+		this.callEvent('areaClick', { area: element, component: this });
+	}
+}

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

@@ -0,0 +1,9 @@
+import { IEventParam } from '@zeedhi/core';
+import { IToggleable } from '../zd-toggleable/interfaces';
+import { Switch } from './switch';
+
+export type ISwitchEvent = IEventParam<Switch>;
+
+export interface ISwitch extends IToggleable {
+	inset?: boolean;
+}

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

@@ -0,0 +1,26 @@
+import { InputFactory } from '../zd-input/input-factory';
+import { Toggleable } from '../zd-toggleable/toggleable';
+import { ISwitch } from './interfaces';
+
+/**
+ * Base class for Switch component.
+ */
+export class Switch extends Toggleable implements ISwitch {
+	/**
+	 * It can make switch render in inset mode.
+	 */
+	public inset = false;
+
+	/* istanbul ignore next */
+	/**
+	 * Create a new Switch.
+	 * @param props Switch properties
+	 */
+	constructor(props: ISwitch) {
+		super(props);
+		this.inset = this.getInitValue('inset', props.inset, this.inset);
+		this.createAccessors();
+	}
+}
+
+InputFactory.register('ZdSwitch', Switch);

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

@@ -0,0 +1,29 @@
+import { IEventParam } from '@zeedhi/core';
+import { IIterable, IIterableProps } from '../zd-iterable/interfaces';
+import { Table } from './table';
+
+export type ITabletEvent = IEventParam<Table>;
+
+export interface ITableProps extends IIterableProps {
+	caption?: ITableCaption;
+	showTableHead?: boolean;
+	fillWidth?: boolean;
+	height?: number | string;
+	maxHeight?: number | string;
+	minHeight?: number | string;
+}
+
+export interface ITable extends IIterable {
+	caption: ITableCaption;
+	showTableHead: boolean;
+	fillWidth: boolean;
+	height: number | string;
+	maxHeight: number | string;
+	minHeight: number | string;
+}
+
+export interface ITableCaption {
+	label?: string;
+	isVisible?: boolean;
+	align?: string;
+}