@zeedhi/common 1.115.0 → 3.0.1

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

@@ -0,0 +1,333 @@
+import {
+	AccessorManager,
+	IAccessorManager,
+	IDictionary,
+	IKeyMap,
+	Metadata,
+	Event as ZdEvent,
+	KeyMap as ZdKeyMap,
+} from '@zeedhi/core';
+import { ChildNotFoundError } from './child-not-found';
+import { IComponent, IComponentDirectives, IComponentEvents, IComponentInstance } from './interfaces';
+
+/**
+ * Base class for all Zeedhi components.
+ */
+export class Component<T extends IComponent = IComponent> implements IComponentInstance {
+	// Allow the component to be duplicated without warning.
+	public allowDuplicate = false;
+
+	// Automatically add focus to input when it's created.
+	public autofocus = false;
+
+	// Children component structure if the component has children.
+	public children: IComponent[] = [];
+
+	// All children instances if the component has children
+	public childrenInstances: any[] = [];
+
+	/**
+	 * CSS classes to be added to the DOM element when rendering.
+	 * To apply multiple CSS classes use space as separator
+	 * (e.g. <samp>\"class1 class2\"</samp>).
+	 */
+	public cssClass = '';
+
+	// Set css in line with cssStyle.
+	public cssStyle: string | IDictionary<string> = '';
+
+	// Directives registered to the component.
+	public directives: IComponentDirectives = {};
+
+	// Events registered to the component.
+	public events: IComponentEvents = {};
+
+	// Controls component visibility.
+	public isVisible = true;
+
+	// Defines component name.
+	public name!: string;
+
+	// Applies the dark theme variant to the component.
+	public dark = false; // deprecated
+
+	// Applies the light theme variant to the component.
+	public light = false; // deprecated
+
+	// Overwrite the default theme.
+	public theme?: string;
+
+	/**
+	 * Set component height to fill all space available
+	 */
+	public fillHeight = false;
+
+	/**
+	 * Parent component instance. This property should be used when is
+	 * necessary create dynamic components.
+	 */
+	public parent?: IComponentInstance;
+
+	// Define if the component id.
+	public componentId!: number;
+
+	// Define component key mapping
+	public keyMap: IKeyMap = {};
+
+	// Return if component has focus
+	public isFocused = false;
+
+	// Return if component can receive focus using tab
+	public tabStop = true;
+
+	// Properties accessors to controller.
+	private accessorManager!: IAccessorManager;
+
+	private element?: any;
+
+	// Sets view focus method.
+	protected viewFocus?: () => void;
+
+	public userProperties: IDictionary<any> = {};
+
+	protected props: T;
+
+	/**
+	 * Creates a new Component.
+	 * @param props Components properties
+	 */
+	constructor(props: T) {
+		this.props = { ...props };
+		this.accessorManager = new AccessorManager();
+		this.parent = props.parent;
+		this.name = props.name;
+		this.events = ZdEvent.factory(props.events || this.events);
+		this.allowDuplicate = this.getInitValue('allowDuplicate', props.allowDuplicate, this.allowDuplicate);
+		this.autofocus = this.getInitValue('autofocus', props.autofocus, this.autofocus);
+		this.cssClass = this.getInitValue('cssClass', props.cssClass, this.cssClass);
+		this.cssStyle = this.getInitValue('cssStyle', props.cssStyle, this.cssStyle);
+		this.directives = this.getInitValue('directives', props.directives, this.directives);
+		this.isVisible = this.getInitValue('isVisible', props.isVisible, this.isVisible);
+		this.dark = this.getInitValue('dark', props.dark, this.dark); // deprecated
+		this.light = this.getInitValue('light', props.light, this.light); // deprecated
+		this.theme = this.getInitValue('theme', props.theme, this.theme);
+		this.tabStop = this.getInitValue('tabStop', props.tabStop, this.tabStop);
+		this.children = Array.isArray(props.children) ? props.children : this.children;
+		this.keyMap = ZdKeyMap.factory(props.keyMap || this.keyMap);
+		this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+		this.userProperties = this.getInitValue('userProperties', props.userProperties, this.userProperties);
+
+		for (const directive in this.directives) {
+			this.directives[directive] = ZdEvent.factory(this.directives[directive] || {});
+		}
+	}
+
+	public setViewFocus(viewFocus: () => void) {
+		this.viewFocus = viewFocus;
+	}
+
+	public setFocus() {
+		if (this.viewFocus) {
+			return this.viewFocus();
+		}
+
+		throw new Error('viewFocus method not assigned');
+	}
+
+	/**
+	 * Retrieves initial value for the attribute and if it is an accessor,
+	 * updates props value.
+	 * @param name Attribute name
+	 * @param value Attribute value
+	 * @param defaultValue Attribute default value
+	 * @returns Initial value
+	 */
+	protected getInitValue(name: string, value: any, defaultValue: any) {
+		let returnValue = defaultValue;
+		if (this.accessorManager.hasAccessor(name)) {
+			returnValue = (this as any)[name];
+		} else if (typeof value !== 'undefined') {
+			returnValue = value;
+			this.accessorManager.addProp(name, value);
+		}
+		return returnValue;
+	}
+
+	// Creates all accessors based on props value.
+	protected createAccessors() {
+		this.accessorManager.createAccessors(this);
+	}
+
+	/**
+	 * Creates the accessors defined inside an object recursively
+	 * @param obj Object having the accessors
+	 * @param path Name of the `obj` property inside the component
+	 */
+	protected createObjAccessors(obj: any, path: string) {
+		for (const key in obj) {
+			if (obj[key] instanceof Object) {
+				this.createObjAccessors(obj[key], `${path}.${key}`);
+			} else {
+				this.accessorManager.addProp(`${path}.${key}`, obj[key]);
+			}
+		}
+
+		this.createAccessors();
+	}
+
+	/** Test and trigger an event */
+	public callEvent(eventName: string, args: any) {
+		const event = this.events[eventName];
+		if (event && typeof event === 'function') {
+			return !!event(args);
+		}
+		return false;
+	}
+
+	/**
+	 * Adds a new child
+	 * @param child Child component structure
+	 */
+	public addChild(child: IComponent) {
+		this.children.push(child);
+	}
+
+	/**
+	 * Removes child by name
+	 * @param name Child name
+	 */
+	public removeChild(name: string) {
+		const index = this.children.findIndex((child) => child.name === name);
+		if (index !== -1) {
+			this.children.splice(index, 1);
+			this.childrenInstances.splice(index, 1);
+		}
+	}
+
+	/**
+	 * Retrieves a child instance by name
+	 * @param name Child name
+	 * @throws Will throw if child not exists
+	 */
+	public getChildInstance<T>(name: string): T {
+		const child = this.childrenInstances.find((item) => item.name === name);
+		if (child) {
+			return child;
+		}
+		throw new ChildNotFoundError(name, this.name);
+	}
+
+	/**
+	 * Adds new child instance
+	 * @param instance Child instance
+	 */
+	public addChildInstance(instance: Component) {
+		this.childrenInstances.push(instance);
+	}
+
+	// Triggered when the component is created.
+	public onCreated() {
+		this.createAccessors();
+		this.componentId = Metadata.addInstance(this, this.allowDuplicate);
+		if (this.parent) {
+			this.parent.addChildInstance(this);
+		}
+		this.callEvent('onCreated', { component: this });
+	}
+
+	// Triggered before component is mounted.
+	public onBeforeMount() {
+		this.callEvent('onBeforeMount', { component: this });
+	}
+
+	/**
+	 * Triggered when the component is mounted.
+	 * @param element Element mounted reference
+	 */
+	public onMounted(element: any) {
+		this.element = element;
+		if (Object.keys(this.keyMap).length) {
+			ZdKeyMap.bind(this.keyMap, this, element);
+		}
+		this.callEvent('onMounted', { element, component: this });
+	}
+
+	// Triggered before the component is destroyed.
+	public onBeforeDestroy() {
+		if (Object.keys(this.keyMap).length) {
+			ZdKeyMap.unbind(this.keyMap, this);
+		}
+		this.callEvent('onBeforeDestroy', { component: this });
+	}
+
+	// Triggered when the component is destroyed.
+	public onDestroyed() {
+		Metadata.clearInstance(this.name, this.componentId);
+		this.callEvent('onDestroyed', { component: this });
+	}
+
+	/**
+	 * Triggered when the component is clicked.
+	 * @param event DOM event
+	 * @param element Element clicked
+	 */
+	public click(event?: Event, element?: any) {
+		this.callEvent('click', {
+			event: event || new MouseEvent('click'),
+			element: element || this.element,
+			component: this,
+		});
+	}
+
+	/**
+	 * Triggered when the component is focused.
+	 * @param event DOM event
+	 * @param element Element focused
+	 */
+	public focus(event: Event, element: any) {
+		this.isFocused = true;
+		this.callEvent('focus', { event, element, component: this });
+	}
+
+	/**
+	 * Triggered when the component loses focus.
+	 * @param event DOM event
+	 * @param element Element that lost the focus
+	 */
+	public blur(event: Event, element: any) {
+		this.isFocused = false;
+		this.callEvent('blur', { event, element, component: this });
+	}
+
+	public mouseenter(event?: Event, element?: any) {
+		this.callEvent('mouseenter', {
+			event: event || new MouseEvent('mouseenter'),
+			element: element || this.element,
+			component: this,
+		});
+	}
+
+	public mouseleave(event?: Event, element?: any) {
+		this.callEvent('mouseleave', {
+			event: event || new MouseEvent('mouseleave'),
+			element: element || this.element,
+			component: this,
+		});
+	}
+
+	public mouseout(event?: Event, element?: any) {
+		this.callEvent('mouseout', {
+			event: event || new MouseEvent('mouseout'),
+			element: element || this.element,
+			component: this,
+		});
+	}
+
+	public mouseover(event?: Event, element?: any) {
+		this.callEvent('mouseover', {
+			event: event || new MouseEvent('mouseover'),
+			element: element || this.element,
+			component: this,
+		});
+	}
+}

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

@@ -0,0 +1,79 @@
+import { IDictionary, IEvent, IEventParam, IEvents, IKeyMap } from '@zeedhi/core';
+import { Component } from './component';
+
+export type EventDef<T, K = IEvent<T>> = K | string | (K | string)[];
+
+export interface IComponentEvents<T = IEventParam<any>> extends IEvents<T> {
+	blur?: EventDef<T>;
+	click?: EventDef<T>;
+	focus?: EventDef<T>;
+	onCreated?: EventDef<T>;
+	onBeforeMount?: EventDef<T>;
+	onMounted?: EventDef<T>;
+	onBeforeDestroy?: EventDef<T>;
+	onDestroyed?: EventDef<T>;
+}
+
+export interface IComponentDirectives {
+	touch?: IComponentEvents;
+	[key: string]: IComponentEvents | undefined;
+}
+
+export interface IPropAccessor {
+	[key: string]: { instance: any; accessor: string };
+}
+
+export interface IComponent {
+	allowDuplicate?: boolean;
+	autofocus?: boolean;
+	children?: IComponent[];
+	componentId?: number;
+	cssClass?: string;
+	cssStyle?: string | IDictionary;
+	events?: IComponentEvents;
+	directives?: IComponentDirectives;
+	isVisible?: boolean | string;
+	dark?: boolean; // deprecated
+	light?: boolean; // deprecated
+	theme?: string;
+	keyMap?: IKeyMap;
+	name: string;
+	parent?: IComponentInstance;
+	tabStop?: boolean;
+	userProperties?: IDictionary;
+	fillHeight?: boolean;
+	[key: string]: any;
+}
+
+export interface IComponentInstance {
+	addChildInstance(component: Component): void;
+	getChildInstance<T extends Component>(name: string): T;
+	allowDuplicate: boolean;
+	autofocus: boolean;
+	children: IComponent[];
+	componentId: number;
+	cssClass: string;
+	cssStyle: string | IDictionary;
+	events: IComponentEvents;
+	directives: IComponentDirectives;
+	isVisible: boolean | string;
+	dark: boolean; // deprecated
+	light: boolean; // deprecated
+	theme?: string;
+	keyMap: IKeyMap;
+	name: string;
+	parent?: IComponentInstance;
+	tabStop: boolean;
+	userProperties: IDictionary;
+	fillHeight: boolean;
+}
+
+export interface IComponentRender extends IComponent {
+	children?: IComponentRender[];
+	component: string;
+}
+
+export interface IComponentRenderInstance extends IComponentInstance {
+	children: IComponentRender[];
+	component: string;
+}

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

@@ -0,0 +1,68 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IContainer } from './interfaces';
+
+export class Container extends ComponentRender implements IContainer {
+	/**
+	 * Sets the height for the component.
+	 */
+	public height: number | string = 'auto';
+
+	/**
+	 * Sets the maximum height for the component.
+	 */
+	public maxHeight: number | string = 'none';
+
+	/**
+	 * Sets the minimum height for the component.
+	 */
+	public minHeight: number | string = 'auto';
+
+	/**
+	 * Defines the component width. Possible values for this property can be
+	 * <samp>'auto', '100%', '400px' or 400</samp>
+	 */
+	public width: string | number = '100%';
+
+	/**
+	 * Defines the component min width. Possible values for this property can be
+	 * <samp>'auto', '100%', '400px' or 400</samp>
+	 */
+	public minWidth: string | number = 'auto';
+
+	/**
+	 * Defines the component max height. Possible values for this property can be
+	 * <samp>'auto', '100%', '400px' or 400</samp>
+	 */
+	public maxWidth: string | number = 'none';
+
+	/**
+	 * Removes viewport maximum-width size breakpoints.
+	 */
+	public fluid = true;
+
+	/**
+	 * Define if the container is a scroll view
+	 */
+	public scrollView = false;
+
+	public tag = 'div';
+
+	/* istanbul ignore next */
+	/**
+	 * Creates a new Container.
+	 * @param props Container properties
+	 */
+	constructor(props: IContainer) {
+		super(props);
+		this.fluid = this.getInitValue('fluid', props.fluid, this.fluid);
+		this.scrollView = this.getInitValue('scrollView', props.scrollView, this.scrollView);
+		this.height = this.getInitValue('height', props.height, this.height);
+		this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+		this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+		this.width = this.getInitValue('width', props.width, this.width);
+		this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+		this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
+		this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
+		this.tag = this.getInitValue('tag', props.tag, this.tag);
+	}
+}

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

@@ -0,0 +1,13 @@
+import { IComponentRender } from '../zd-component/interfaces';
+
+export interface IContainer extends IComponentRender {
+	fluid?: boolean;
+	height?: string | number;
+	maxHeight?: string | number;
+	minHeight?: string | number;
+	width?: string | number;
+	maxWidth?: string | number;
+	minWidth?: string | number;
+	scrollView?: boolean;
+	tag?: string;
+}

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

@@ -0,0 +1,58 @@
+import { Accessor, Config, FormatterParserProvider, Loader } from '@zeedhi/core';
+import { AutoNumeric } from '../../index';
+import { InputFactory } from '../zd-input/input-factory';
+import { NumberInput as ZdNumber } from '../zd-number-input/number-input';
+import { ICurrency } from './interfaces';
+
+/**
+ * Base class for Currency component
+ */
+export class Currency extends ZdNumber implements ICurrency {
+	/*
+	 * Mask definition
+	 */
+	public mask: any;
+
+	protected defaultMask: any = {
+		...Config.masks.numberMask,
+		...Config.masks.currencyMask,
+	};
+
+	protected formatterFn = FormatterParserProvider.getFormatter('ZdCurrency');
+
+	protected parserFn = FormatterParserProvider.getParser('ZdCurrency');
+
+	constructor(props: ICurrency) {
+		super(props);
+		const newMask = { ...this.defaultMask, ...props.mask };
+		this.mask = this.getInitValue('mask', newMask, this.defaultMask);
+		this.createAccessors();
+		this.validateMask();
+	}
+}
+
+FormatterParserProvider.registerFormatter('ZdCurrency', (value: any, { mask = {} }: any = {}) => {
+	let maskDef = mask;
+
+	if (Accessor.isAccessorDefinition(maskDef)) {
+		const [controller, accessor] = Accessor.getAccessor(maskDef);
+		maskDef = Loader.getInstance(controller)[accessor];
+	}
+	let maskValue = typeof maskDef === 'function' ? maskDef(AutoNumeric.unformat(value)) : maskDef;
+	maskValue = { ...Config.masks.numberMask, ...Config.masks.currencyMask, ...maskValue };
+	return value === null ? '' : AutoNumeric.format(value, maskValue);
+});
+
+FormatterParserProvider.registerParser('ZdCurrency', (value: any, { mask = {} }: any = {}) => {
+	let maskDef = mask;
+
+	if (Accessor.isAccessorDefinition(maskDef)) {
+		const [controller, accessor] = Accessor.getAccessor(maskDef);
+		maskDef = Loader.getInstance(controller)[accessor];
+	}
+	let maskValue = typeof maskDef === 'function' ? maskDef(AutoNumeric.format(value)) : maskDef;
+	maskValue = { ...Config.masks.numberMask, ...Config.masks.currencyMask, ...maskValue };
+	return value === '' ? null : AutoNumeric.unformat(value, maskValue);
+});
+
+InputFactory.register('ZdCurrency', Currency);

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

@@ -0,0 +1,7 @@
+import { IEventParam } from '@zeedhi/core';
+import { INumberInput } from '../zd-number-input/interfaces';
+import { Currency } from './currency';
+
+export type ICurrencyEvent = IEventParam<Currency>;
+
+export interface ICurrency extends INumberInput {}