@zeedhi/common 1.111.1 → 3.0.0

package/dist/types/components/zd-component/component.d.ts

@@ -0,0 +1,120 @@
+import { IDictionary, IKeyMap } from '@zeedhi/core';
+import { IComponent, IComponentDirectives, IComponentEvents, IComponentInstance } from './interfaces';
+/**
+ * Base class for all Zeedhi components.
+ */
+export declare class Component<T extends IComponent = IComponent> implements IComponentInstance {
+    allowDuplicate: boolean;
+    autofocus: boolean;
+    children: IComponent[];
+    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>).
+     */
+    cssClass: string;
+    cssStyle: string | IDictionary<string>;
+    directives: IComponentDirectives;
+    events: IComponentEvents;
+    isVisible: boolean;
+    name: string;
+    dark: boolean;
+    light: boolean;
+    theme?: string;
+    /**
+     * Set component height to fill all space available
+     */
+    fillHeight: boolean;
+    /**
+     * Parent component instance. This property should be used when is
+     * necessary create dynamic components.
+     */
+    parent?: IComponentInstance;
+    componentId: number;
+    keyMap: IKeyMap;
+    isFocused: boolean;
+    tabStop: boolean;
+    private accessorManager;
+    private element?;
+    protected viewFocus?: () => void;
+    userProperties: IDictionary<any>;
+    protected props: T;
+    /**
+     * Creates a new Component.
+     * @param props Components properties
+     */
+    constructor(props: T);
+    setViewFocus(viewFocus: () => void): void;
+    setFocus(): void;
+    /**
+     * 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): any;
+    protected createAccessors(): void;
+    /**
+     * 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): void;
+    /** Test and trigger an event */
+    callEvent(eventName: string, args: any): boolean;
+    /**
+     * Adds a new child
+     * @param child Child component structure
+     */
+    addChild(child: IComponent): void;
+    /**
+     * Removes child by name
+     * @param name Child name
+     */
+    removeChild(name: string): void;
+    /**
+     * Retrieves a child instance by name
+     * @param name Child name
+     * @throws Will throw if child not exists
+     */
+    getChildInstance<T>(name: string): T;
+    /**
+     * Adds new child instance
+     * @param instance Child instance
+     */
+    addChildInstance(instance: Component): void;
+    onCreated(): void;
+    onBeforeMount(): void;
+    /**
+     * Triggered when the component is mounted.
+     * @param element Element mounted reference
+     */
+    onMounted(element: any): void;
+    onBeforeDestroy(): void;
+    onDestroyed(): void;
+    /**
+     * Triggered when the component is clicked.
+     * @param event DOM event
+     * @param element Element clicked
+     */
+    click(event?: Event, element?: any): void;
+    /**
+     * Triggered when the component is focused.
+     * @param event DOM event
+     * @param element Element focused
+     */
+    focus(event: Event, element: any): void;
+    /**
+     * Triggered when the component loses focus.
+     * @param event DOM event
+     * @param element Element that lost the focus
+     */
+    blur(event: Event, element: any): void;
+    mouseenter(event?: Event, element?: any): void;
+    mouseleave(event?: Event, element?: any): void;
+    mouseout(event?: Event, element?: any): void;
+    mouseover(event?: Event, element?: any): void;
+}

package/dist/types/components/zd-component/interfaces.d.ts

@@ -0,0 +1,74 @@
+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;
+    light?: boolean;
+    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;
+    light: boolean;
+    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/dist/types/components/zd-container/container.d.ts

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

package/dist/types/components/zd-container/interfaces.d.ts

@@ -0,0 +1,12 @@
+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/dist/types/components/zd-currency/currency.d.ts

@@ -0,0 +1,12 @@
+import { NumberInput as ZdNumber } from '../zd-number-input/number-input';
+import { ICurrency } from './interfaces';
+/**
+ * Base class for Currency component
+ */
+export declare class Currency extends ZdNumber implements ICurrency {
+    mask: any;
+    protected defaultMask: any;
+    protected formatterFn: (...args: any) => any;
+    protected parserFn: (...args: any) => any;
+    constructor(props: ICurrency);
+}

package/dist/types/components/zd-currency/interfaces.d.ts

@@ -0,0 +1,6 @@
+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 {
+}

package/dist/types/components/zd-date-input/date-input.d.ts

@@ -0,0 +1,151 @@
+import { TextInput } from '../zd-text-input/text-input';
+import { IDateInput } from './interfaces';
+/**
+ * Base class for Date component.
+ */
+export declare class DateInput extends TextInput implements IDateInput {
+    /**
+     * Restricts which dates can be selected.
+     */
+    allowedDates?: ((date: string) => boolean) | string[];
+    /**
+     * Determines the type of the view mode - month for month picker.
+     */
+    viewMode: string;
+    /**
+     * Input auto complete.
+     */
+    autocomplete: boolean;
+    /**
+     * Defines the date format.
+     */
+    dateFormat: string;
+    /**
+     * Defines the date format displayed.
+     */
+    displayFormat: string;
+    /**
+     * Defines the date input format.
+     */
+    inputFormat?: string;
+    /**
+     * Shows the date picker.
+     */
+    showDatePicker: boolean;
+    /**
+     * Sets the first day of the week, starting with 0 for Sunday.
+     */
+    firstDayOfWeek: number | string;
+    /**
+     * Forces 100% width.
+     */
+    fullWidth: boolean;
+    /**
+     * Toggles visibility of the week numbers in the body of the calendar.
+     */
+    showWeek: boolean;
+    /**
+     * Helper options.
+     */
+    helperOptions?: string[];
+    /**
+     * Helper value.
+     */
+    helperValue?: string;
+    /**
+     * Max value allowed.
+     */
+    max?: string;
+    /**
+     * Min value allowed.
+     */
+    min?: string;
+    /**
+     * Width of the picker.
+     */
+    width: number | string;
+    protected isoFormat: string;
+    protected dateError: boolean;
+    protected formatterFn: (...args: any) => any;
+    protected parserFn: (...args: any) => any;
+    protected initialMask?: string;
+    protected isSimpleDisplay: boolean;
+    /**
+     * Creates a new Date.
+     * @param props Date properties
+     */
+    constructor(props: IDateInput);
+    appendIconClick(event: Event, element: any): void;
+    private getInitialMask;
+    formatter(value: string): string;
+    parser(value: string): any;
+    /**
+     * Triggered when date is clicked.
+     * @param event
+     * @param element
+     */
+    selectDate(date: string, event?: Event, element?: any): void;
+    get value(): string;
+    set value(value: string);
+    get displayValue(): string;
+    set displayValue(newValue: string);
+    /**
+     * Assign the updated mask to mask property
+     */
+    updateMask(): any;
+    /**
+     * Gets the updated masked, based on displayFormat if the initial mask is undefined
+     */
+    protected getUpdatedMask(): string | undefined;
+    protected maskFormat(format: string): string;
+    setDateValue(displayValue: string): void;
+    private setValidDateValue;
+    private setInvalidDateValue;
+    isValidDate(value: string, format: string, strict?: boolean): boolean;
+    isValidFormatDate(value: string, format: string, strict?: boolean): boolean;
+    private dateObject;
+    getNativeDate(): Date | null;
+    setNativeDate(date: Date): void;
+    getAllowedDates(date: Date): boolean;
+    formatISODateValue(value: string): string;
+    parseISODateValue(value: string): any;
+    dateValidation(): boolean | string;
+    click(event?: Event, element?: any): void;
+    blur(event: Event, element: any): void;
+    onMounted(): void;
+    focus(event: Event, element: any): void;
+    /**
+     * Add date mask
+     */
+    protected addDateMask(): void;
+    /**
+     * Removes the component mask if value is valid
+     */
+    protected removeDateMask(): void;
+    /**
+     * Toggle showDatePicker value
+     */
+    togglePicker(): void;
+    /**
+     * Triggered when the appended icon is clicked.
+     * @param event DOM event
+     * @param element Text input
+     */
+    iconClick(event: Event, element: any): void;
+    /**
+     * 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;
+    private previousHint;
+    private previousPersistentHint;
+    updateHelperHint(): void;
+    change(event?: Event, element?: any): void;
+    /**
+     * Converts a date format to a mask
+     */
+    private toMask;
+    getMask(): string;
+}

package/dist/types/components/zd-date-input/interfaces.d.ts

@@ -0,0 +1,27 @@
+import { IEvent, IEventParam } from '@zeedhi/core';
+import { ITextInput, ITextInputEvents } from '../zd-text-input/interfaces';
+import { DateInput } from './date-input';
+export interface IDateEventParam extends IEventParam<DateInput> {
+    date: string;
+}
+export interface IDateEvents<T = IDateEventParam | IEventParam<any>> extends ITextInputEvents<T> {
+    onSelectDate?: IEvent<T> | string;
+}
+export interface IDateInput extends ITextInput {
+    allowedDates?: ((date: string) => boolean) | string[];
+    dateFormat?: string;
+    displayFormat?: string;
+    events?: IDateEvents;
+    firstDayOfWeek?: number | string;
+    fullWidth?: boolean;
+    inputFormat?: string;
+    showDatePicker?: boolean;
+    showWeek?: boolean;
+    width?: number | string;
+    orderedDates?: boolean;
+    helperOptions?: string[];
+    helperValue?: string;
+    max?: string;
+    min?: string;
+    viewMode?: string;
+}

package/dist/types/components/zd-dialog/dialog.d.ts

@@ -0,0 +1,76 @@
+import { IButton } from '../zd-button/interfaces';
+import { Component } from '../zd-component/component';
+import { IDialog } from './interfaces';
+/**
+ * Base class for Dialog component.
+ */
+export declare class Dialog extends Component implements IDialog {
+    /**
+     * Buttons collection that will be displayed on dialog footer
+     */
+    buttons: IButton[];
+    /**
+     * The maximum width of the content
+     */
+    maxWidth: string | number;
+    /**
+     * Clicking outside will not dismiss the dialog
+     */
+    persistent: boolean;
+    /**
+     * The text displayed on dialog
+     */
+    text: string;
+    /**
+     * The title displayed on dialog
+     */
+    title: string;
+    /**
+     * Dialog type (normal, success, error, warning, info)
+     */
+    type: string;
+    /**
+     * Confirm button component name
+     */
+    confirmButton?: string;
+    /**
+     * Deny button component name
+     */
+    denyButton?: string;
+    exit?: boolean;
+    /**
+     * Default dialog buttons
+     * @private
+     */
+    private getDefaultButtons;
+    protected defaultValues: {
+        confirmButton: string | undefined;
+        denyButton: string | undefined;
+        name: string;
+        maxWidth: string | number;
+        persistent: boolean;
+        type: string;
+        title: string;
+        text: string;
+        exit: boolean | undefined;
+    };
+    /**
+     * Creates a new Dialog
+     * @param props Dialog structure
+     */
+    constructor(props: IDialog);
+    /**
+     * Assign all dialog properties
+     * @param dialog Dialog structure
+     */
+    assignDialogProperties(dialog: IDialog): void;
+    protected clickDefaultButtonKeyMapping(): any;
+    /**
+     * Displays dialog
+     */
+    show(): void;
+    /**
+     * Hides dialog
+     */
+    hide(): void;
+}

package/dist/types/components/zd-dialog/interfaces.d.ts

@@ -0,0 +1,13 @@
+import { IButton } from '../zd-button/interfaces';
+import { IComponent } from '../zd-component/interfaces';
+export interface IDialog extends IComponent {
+    buttons?: IButton[];
+    maxWidth?: string | number;
+    persistent?: boolean;
+    confirmButton?: string;
+    denyButton?: string;
+    text?: string;
+    title?: string;
+    type?: string;
+    exit?: boolean;
+}

package/dist/types/components/zd-divider/divider.d.ts

@@ -0,0 +1,20 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IDivider } from './interfaces';
+/**
+ * Base class for Divider component.
+ */
+export declare class Divider extends ComponentRender implements IDivider {
+    /**
+     * Adds indentation (72px) for normal dividers, reduces max height for vertical.
+     */
+    inset: boolean;
+    /**
+     * Displays dividers vertically.
+     */
+    vertical: boolean;
+    /**
+     * Creates a new Divider.
+     * @param props Divider properties
+     */
+    constructor(props: IDivider);
+}

package/dist/types/components/zd-divider/interfaces.d.ts

@@ -0,0 +1,8 @@
+import { IEventParam } from '@zeedhi/core';
+import { IComponentRender } from '../zd-component/interfaces';
+import { Divider } from './divider';
+export type IDividerEvent = IEventParam<Divider>;
+export interface IDivider extends IComponentRender {
+    inset?: boolean;
+    vertical?: boolean;
+}

package/dist/types/components/zd-dropdown/dropdown.d.ts

@@ -0,0 +1,81 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IComponentRender } from '../zd-component/interfaces';
+import { IDropdown } from './interfaces';
+/**
+ * Base class for Dropdown component.
+ */
+export declare class Dropdown extends ComponentRender implements IDropdown {
+    /**
+     * Applies position absolute to the dropdown.
+     */
+    absolute: boolean;
+    /**
+     * Designate to put the component that activates the menu.
+     */
+    activator: IComponentRender;
+    /**
+     * Designates if menu should close when its content is clicked.
+     */
+    closeOnContentClick: boolean;
+    /**
+     * Designates if menu should close on outside-activator click.
+     */
+    closeOnClick: boolean;
+    /**
+     * Applies a cursor to the dropdown.
+     */
+    cursor: string;
+    /**
+     * Disables the menu.
+     */
+    disabled: boolean;
+    /**
+     * Applies hover to the dropdown.
+     */
+    hover: boolean;
+    /**
+     * Sets the height for the dropdown.
+     */
+    height?: number | string;
+    /**
+     * Sets the maximum height for the dropdown.
+     */
+    maxHeight: number | string;
+    /**
+     * Sets the maximum width for the dropdown.
+     */
+    maxWidth: number | string;
+    /**
+     * Sets the minimum height for the dropdown.
+     */
+    minHeight: number | string;
+    /**
+     * Sets the minimum width for the dropdown.
+     */
+    minWidth: number | string;
+    /**
+     * Offset the menu on the x-axis.
+     */
+    offsetX: boolean;
+    /**
+     * Offset the menu on the x-axis.
+     */
+    offsetY: boolean;
+    /**
+     * Designates whether menu should open on activator click.
+     */
+    openOnClick: boolean;
+    /**
+     * Designates whether menu should open on activator hover.
+     */
+    openOnHover: boolean;
+    /**
+     * Controls whether the component is visible or hidden.
+     */
+    value?: any;
+    /**
+     * Creates a new DropDown.
+     * @param props DropDown properties
+     */
+    constructor(props: IDropdown);
+}

package/dist/types/components/zd-dropdown/interfaces.d.ts

@@ -0,0 +1,23 @@
+import { IEventParam } from '@zeedhi/core';
+import { IComponentRender } from '../zd-component/interfaces';
+import { Dropdown } from './dropdown';
+export type IDropdownEvent = IEventParam<Dropdown>;
+export interface IDropdown extends IComponentRender {
+    absolute?: boolean;
+    activator: IComponentRender;
+    disabled?: boolean;
+    closeOnContentClick?: boolean;
+    closeOnClick?: boolean;
+    cursor?: string;
+    hover?: boolean;
+    height?: number | string;
+    maxHeight?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    minWidth?: number | string;
+    offsetX?: boolean;
+    offsetY?: boolean;
+    openOnClick?: boolean;
+    openOnHover?: boolean;
+    value?: any;
+}