@zeedhi/common 1.120.2 → 1.122.0

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

@@ -0,0 +1,158 @@
+import { IDateRange } from './interfaces';
+import { TextInput } from '../zd-text-input/text-input';
+export declare class DateRange extends TextInput implements IDateRange {
+    /**
+     * 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;
+    /**
+     * Sets the locale. Accepts a string with a BCP 47 language tag.
+     */
+    locale?: string;
+    /**
+     * Allows changing displayed month with mouse scroll
+     */
+    scrollable: boolean;
+    /**
+     * Toggles visibility of the week numbers in the body of the calendar.
+     */
+    showWeek: boolean;
+    /**
+     * Character that will separate the two dates
+     */
+    get splitter(): string;
+    set splitter(splitter: string);
+    private internalSplitter;
+    /**
+     * Width of the picker.
+     */
+    width: number | string;
+    /**
+     * Helper options.
+     */
+    helperOptions?: string[];
+    /**
+     * Max value allowed.
+     */
+    max?: string;
+    /**
+     * Min value allowed.
+     */
+    min?: string;
+    /**
+     * Helper value.
+     */
+    helperValue?: string;
+    protected isoFormat: string;
+    protected dateError: boolean;
+    protected formatterFn: (...args: any) => any;
+    protected parserFn: (...args: any) => any;
+    protected initialMask?: string;
+    unitMask?: string;
+    protected isSimpleDisplay: boolean;
+    inputMode?: string | undefined;
+    /**
+     * Creates a new Date.
+     * @param props Date properties
+     */
+    constructor(props: IDateRange);
+    private getInitialMask;
+    formatter(value: any): string;
+    parser(value: string): any;
+    get displayValue(): string;
+    set displayValue(newValue: string);
+    get value(): string[];
+    set value(value: unknown);
+    /**
+     * Returns all days ranging from start to end as dayjs objects
+     * @returns an array of dayjs objects containing all days between start and end
+     */
+    private getDatesInRange;
+    /**
+     * 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;
+    /**
+     * Faz a validação do array de datas
+     * @param format o formato da data
+     * @param values o array de datas
+     * @returns true se todos os valores forem validados
+     * */
+    isValidDateArray(format: string, values?: string[]): boolean;
+    private splitValues;
+    isValidDate(value: string, format: string, strict?: boolean): boolean;
+    isValidFormatDate(value: string, format: string, strict?: boolean): boolean;
+    get isoRangeValue(): string[];
+    set isoRangeValue(newValue: string[]);
+    formatISODateRangeValue(dates: string[] | string): string[];
+    parseISODateRangeValue(values: string[]): any;
+    private sortDates;
+    dateValidation(): boolean | string;
+    click(event?: Event, element?: any): void;
+    blur(event: Event, element: any): 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(helperValue: string): void;
+    change(event?: Event, element?: any): void;
+    private getExtremities;
+    setNativeDate(date: Date[]): void;
+    private dateObject;
+    getNativeDate(): Date[];
+    getMaskValue(): any;
+}

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

@@ -0,0 +1,18 @@
+import { ITextInput } from '../zd-text-input/interfaces';
+export interface IDateRange extends ITextInput {
+    allowedDates?: ((date: string) => boolean) | string[];
+    dateFormat?: string;
+    displayFormat?: string;
+    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;
+}

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

@@ -0,0 +1,80 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { IComponentRender } from '../zd-component/interfaces';
+import { IFooter } from './interfaces';
+/**
+ * Base class for Footer component.
+ */
+export declare class Footer extends ComponentRender implements IFooter {
+    /**
+     * Applies position absolute to footer.
+     */
+    absolute: boolean;
+    /**
+     * Designates the footer as part of the application layout.
+     */
+    app: boolean;
+    /**
+     * Render components on the middle of footer.
+     */
+    centerSlot: IComponentRender[];
+    /**
+     * Applies specified color to the control. It can be the name of material or css color in hexa.
+     */
+    color: string;
+    /**
+     * Events registered to the footer.
+     */
+    /**
+     * Applies position fixed to footer.
+     */
+    fixed: boolean;
+    /**
+     * Sets the height for footer.
+     */
+    height: number | string;
+    /**
+     * Positions the footer inside the application content.
+     */
+    inset: boolean;
+    /**
+     * Render components on the left of footer.
+     */
+    leftSlot: IComponentRender[];
+    /**
+     * Sets the maximum height for the footer.
+     */
+    maxHeight?: number | string;
+    /**
+     * Sets the maximum width for the footer.
+     */
+    maxWidth?: number | string;
+    /**
+     * Sets the minimum height for the footer.
+     */
+    minHeight?: number | string;
+    /**
+     * Sets the minimum width for the footer.
+     */
+    minWidth?: number | string;
+    /**
+     * Remove all padding from the footer.
+     */
+    padless: boolean;
+    /**
+     * Render components on the right of footer.
+     */
+    rightSlot: IComponentRender[];
+    /**
+     * Sets the width for the component.
+     */
+    width?: number | string;
+    /**
+     * Creates a new Footer.
+     * @param props Footer properties
+     */
+    constructor(props: IFooter);
+    /**
+     * Retrieves named slots visibility
+     */
+    get namedSlotsIsVisible(): number;
+}

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

@@ -0,0 +1,26 @@
+import { IEventParam } from '@zeedhi/core';
+import { IComponentEvents, IComponentRender } from '../zd-component/interfaces';
+import { Footer } from './footer';
+export type IFooterEvent = IEventParam<Footer>;
+export interface IFooterEvents extends IComponentEvents<IFooterEvent> {
+    blur: undefined;
+    click: undefined;
+    focus: undefined;
+}
+export interface IFooter extends IComponentRender {
+    absolute?: boolean;
+    app?: boolean;
+    centerSlot?: IComponentRender[];
+    color?: string;
+    fixed?: boolean;
+    height?: number | string;
+    inset?: boolean;
+    leftSlot?: IComponentRender[];
+    maxHeight?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    minWidth?: number | string;
+    padless?: boolean;
+    rightSlot?: IComponentRender[];
+    width?: number | string;
+}

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

@@ -0,0 +1,174 @@
+import { IDictionary } from '@zeedhi/core';
+import { ComponentRender } from '../zd-component/component-render';
+import { Input } from '../zd-input/input';
+import { IForm, IFormComponent, IFormEvents, IFormGrid } from './interfaces';
+/**
+ * Base class for Form component.
+ */
+export declare class Form extends ComponentRender implements IForm {
+    /**
+     * Children component structure if the component has children.
+     */
+    children: IFormComponent[];
+    /**
+     * Applies the align-items css property.
+     * Available options are start, center, end, space-between, space-around and stretch.
+     */
+    align?: string;
+    /**
+     * Applies the justify-content css property.
+     * Available options are start, center, end, space-between and space-around.
+     */
+    justify?: string;
+    /**
+     * Defines the component height. Possible values for this property can be
+     * <samp>'auto', '100%', '400px' or 400</samp>
+     */
+    height: string | number;
+    /**
+     * Defines the component min height. Possible values for this property can be
+     * <samp>'auto', '100%', '400px' or 400</samp>
+     */
+    minHeight: string | number;
+    /**
+     * Defines the component max height. Possible values for this property can be
+     * <samp>'auto', '100%', '400px' or 400</samp>
+     */
+    maxHeight: string | number;
+    /**
+     * 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;
+    /**
+     * Defines form events.
+     */
+    events: IFormEvents;
+    /**
+     * Optional validation method assigned by view layer.
+     */
+    private viewValidate?;
+    /**
+     * Optional submit method.
+     */
+    submitFunction?: () => void;
+    /**
+     * Reset validation method assigned by view layer.
+     */
+    private viewResetValidation?;
+    /**
+     * Children components that are Inputs.
+     */
+    private inputs;
+    private internalValue;
+    /**
+     * Creates a new Form.
+     * @param props Form properties
+     */
+    constructor(props: IForm);
+    /**
+     * Form value.
+     */
+    get value(): IDictionary;
+    set value(value: IDictionary);
+    /**
+     * Clear all form inputs
+     */
+    clearForm(): void;
+    /**
+     * Saves input instance and defines property on form value.
+     * @param component Children component
+     */
+    registerInput(component: Input): void;
+    /**
+     * Children props without grid system.
+     */
+    get childrenProps(): {
+        [key: string]: any;
+        children?: import("..").IComponentRender[] | undefined;
+        component: string;
+        allowDuplicate?: boolean | undefined;
+        autofocus?: boolean | undefined;
+        componentId?: number | undefined;
+        cssClass?: string | undefined;
+        cssStyle?: string | IDictionary<any> | undefined;
+        events?: import("..").IComponentEvents<import("@zeedhi/core").IEventParam<any>> | undefined;
+        directives?: import("..").IComponentDirectives | undefined;
+        isVisible?: string | boolean | undefined;
+        dark?: boolean | undefined;
+        light?: boolean | undefined;
+        theme?: string | undefined;
+        keyMap?: import("@zeedhi/core").IKeyMap<import("@zeedhi/core").IEventParam<any>> | undefined;
+        name: string;
+        parent?: import("..").IComponentInstance | undefined;
+        tabStop?: boolean | undefined;
+        userProperties?: IDictionary<any> | undefined;
+        fillHeight?: boolean | undefined;
+    }[];
+    /**
+     * Checks if the value matches a col value (1, 2, ... 12) or auto
+     */
+    private matchColumn;
+    private breakpoints;
+    private matchBreakpoint;
+    private handleColClass;
+    private handleOffsetClass;
+    /**
+     * This method searches in a css class string to find classes related to grid cols \
+     * Parses all of the grid cols classes found to form grid object entries, for example
+     * the following class: 'zd-col-sm-12 zd-col-md-6' will become { sm: '12', md: '6' }
+     */
+    private parseGridClasses;
+    private getChildGrid;
+    /**
+     * Grid system for each child.
+     */
+    get childrenGrid(): IDictionary<IFormGrid>;
+    /**
+     * Validates form.
+     */
+    validate(): Promise<{
+        valid: boolean;
+    }>;
+    /**
+     * Sets view validation method.
+     */
+    setViewValidate(viewValidate: () => Promise<{
+        valid: boolean;
+        errors: {
+            id: string | number;
+            errorMessages: string[];
+        }[];
+    }>): void;
+    /**
+     * Sets view reset validation method.
+     */
+    setViewResetValidation(viewResetValidation: () => void): void;
+    /**
+     * Triggered when form is submitted and it's valid.
+     * @param event DOM Event
+     * @param element Form component
+     */
+    callSubmitEvent(event: Event, element: any): void;
+    /**
+     * Triggered when the component is mounted.
+     * @param element Element mounted reference
+     */
+    onMounted(element: any): void;
+    submit(): void;
+    /**
+     * Reset all form validation errors.
+     * @throws Will throw if viewResetValidation is undefined
+     */
+    resetValidation(): void;
+}