@zeedhi/common 1.111.1 → 3.0.0

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

@@ -0,0 +1,238 @@
+import { Datasource, IDictionary } from '@zeedhi/core';
+import { ISelectDataValueOutItem, SearchParam } from '../../utils';
+import { IComponentRender } from '../zd-component/interfaces';
+import { TextInput } from '../zd-text-input/text-input';
+import { ISelect } from './interfaces';
+/**
+ * Base class for Select component.
+ */
+export declare class Select extends TextInput implements ISelect {
+    /**
+     * Source of select items
+     */
+    datasource: Datasource;
+    /**
+     * Field used to display values
+     */
+    dataText: string | any[];
+    /**
+     * Field used to display values when the select is closed
+     */
+    dataTextDiscrete: string | any[];
+    /**
+     * Value used to join display values
+     */
+    dataTextSeparator: string;
+    /**
+     * Field used to save values
+     */
+    dataValue: string;
+    /**
+     * Field used to make the item disabled
+     */
+    dataDisabled: string;
+    /**
+     * Defines if field value should be an object
+     */
+    returnObject: boolean;
+    /**
+     * Enables search input
+     */
+    autocomplete: boolean;
+    /**
+     * Automatically select option if only one is filtered
+     */
+    autoSelection: boolean;
+    /**
+     * Prevents load select data when the input is focused
+     */
+    preventLoadOnFocus: boolean;
+    /**
+     * Maximum height of select menu
+     */
+    menuMaxHeight: string | number;
+    /**
+     * Maximum width of select menu
+     */
+    menuMaxWidth: string | number;
+    /**
+     * Input select value
+     */
+    selectValue: IDictionary<any> | null;
+    /**
+     * Components that will be rendered in itemAfterSlot case
+     */
+    itemAfterSlot: IComponentRender[];
+    /**
+     * Components that will be rendered in itemBeforeSlot case
+     */
+    itemBeforeSlot: IComponentRender[];
+    /**
+     * Items that will be disabled for selection. Users will still see them
+     */
+    disabledItems: any[];
+    /**
+     * Defines if data handling should be manual or automatic
+     */
+    manualMode: boolean;
+    /**
+     * Defines if data handling should be manual or automatic
+     */
+    searchParam: SearchParam;
+    /**
+     * Defines other columns that must me set on form on change
+     */
+    dataValueOut: ISelectDataValueOutItem[];
+    /**
+     * Defines the name of the form target to set using dataValueOut
+     */
+    dataValueOutFormName: string;
+    /**
+     * Input search value
+     */
+    private searchValue;
+    protected dirtySearchValue: string;
+    protected formatterFn: (...args: any) => any;
+    private discreteProps?;
+    loadMoreAmount: number;
+    /**
+     * Conditions for pushing a value:
+     * 1. Every time a value from outside the datasource is set
+     * 2. On blur, if the current value is not part of the cache
+     * 3. When the datasource is reloaded, if the current value is not part of the datasource but is in another page
+     *
+     * Conditions for removing a push
+     * 1. When the datasource is reloaded, if the current value cannot be found in another page
+     * 2. When the datasource is reloaded, if the push is already part of the datasource
+     * 3. When the search is empty
+     * 4. On blur, if the current value is null
+     */
+    pushedValue: IDictionary | null;
+    defaultValue: any;
+    protected cachedData: IDictionary[];
+    protected cachedTotal: number;
+    /**
+     * Create a new Select.
+     * @param props Select properties
+     */
+    constructor(props: ISelect);
+    onCreated(): Promise<void>;
+    onMounted(element: any): void;
+    /**
+     * Select items list, containing all of the items that appear on the menu
+     * including the pushedValue
+     */
+    get items(): IDictionary<any>[];
+    /**
+     * Initializes the select data properties: dataText, dataValue and dataTextDiscrete
+     * @param props Select props
+     */
+    private setDataProperties;
+    private getAccessorValue;
+    /**
+     * Retrieves datasource structure applying infinity scroll
+     * @param field Field structure
+     */
+    private getDefaultDatasource;
+    /**
+     * Returns the currentRow in the dataText key
+     */
+    formatter(value?: string | IDictionary<any> | null, props?: {
+        dataText: string | any[];
+        dataTextSeparator: string;
+    }): any;
+    protected registerGetCallback(): void;
+    get search(): string;
+    set search(value: string);
+    /**
+     * Sets select default value and dispatches defaultAssigned event.
+     * @param value Default value
+     */
+    protected setDefaultValue(value: any): Promise<void>;
+    /**
+     * Finds and retrieves items searching by value
+     * @param value Default value
+     */
+    protected getItemsBySearchValue(value: any): Promise<IDictionary<any>[]>;
+    focus(event: Event, element: any): Promise<void>;
+    protected afterFocus(): Promise<void>;
+    /**
+     * Field value
+     */
+    get value(): any;
+    set value(value: any);
+    setValue(value: any, callEvent?: boolean): Promise<void>;
+    protected setFieldValue(value: any): Promise<boolean>;
+    /**
+     * Set value accessors
+     * @param row
+     * @param value
+     */
+    protected setFieldRowValue(row: any): void;
+    /**
+     * Retrieves value based on the returnObject definition
+     */
+    protected getReturnValue(value: IDictionary | null): any;
+    /**
+     * Retrieves a single-value (dataValue property)
+     */
+    protected getValue(value: any | IDictionary | null): any;
+    /**
+     * Event trigged when component loses the focus and value changes
+     * @param value inputted value
+     */
+    selectChange(value: any, event?: Event, element?: any): void;
+    protected callChangeEvent(value: any, event?: Event, element?: any): void;
+    /**
+     * Event trigged when value is inputted
+     * @param value inputted value
+     */
+    selectInput(value: any, event?: Event, element?: any): void;
+    /**
+     * Updates search value
+     * @param value Search value
+     */
+    updateSearch(value: string): Promise<void>;
+    /**
+     * Update datasource data
+     */
+    updateData(data: IDictionary<any>[]): Promise<any>;
+    /**
+     * Update datasource items
+     */
+    updateItems(items: (string | number)[]): Promise<any>;
+    protected doSearch(value: string): Promise<void>;
+    private debounceSearch;
+    /**
+     * Load more data
+     */
+    loadMore(): Promise<void>;
+    /**
+     * Triggered when the component loses focus.
+     * @param event DOM event
+     * @param element Element that lost the focus
+     */
+    blur(event: Event, element: any): void;
+    protected checkValueOnBlur(): void;
+    /**
+     * Checks if the 'load more' option should be shown \
+     * conditions to show:
+     * - datasource has data
+     * - datasource is not loading
+     * - datasource is not loadAll
+     * - datasource current data length is less than the total
+     */
+    showLoadMore(): boolean;
+    /**
+     * Checks if skeleton loaders should be shown \
+     * conditions to show:
+     * - datasource is loading and
+     * - datasource has no data or has less data than the total
+     */
+    showSkeletonLoaders(): boolean;
+    onBeforeDestroy(): void;
+    /**
+     * Retrieves the index of a select value inside a data array
+     */
+    indexOf(search: IDictionary | string | number, data?: IDictionary[]): number;
+}

package/dist/types/components/zd-select-multiple/interfaces.d.ts

@@ -0,0 +1,18 @@
+import { IEventParam } from '@zeedhi/core';
+import { EventDef, IComponentEvents } from '../zd-component/interfaces';
+import { ISelect } from '../zd-select/interfaces';
+import { SelectMultiple } from './select-multiple';
+export type ISelectMultipleEvent = IEventParam<SelectMultiple>;
+export interface ISelectMultipleEvents<T = IEventParam<any>> extends IComponentEvents<T> {
+    selectedAll?: EventDef<T>;
+    unselectedAll?: EventDef<T>;
+}
+export interface ISelectMultiple extends ISelect {
+    moreChip?: number;
+    showSelectAll?: boolean;
+    events?: ISelectMultipleEvents;
+    maxRows?: string | number;
+    limit?: number | null;
+    showCheckboxAll?: boolean;
+    checkboxAll?: boolean;
+}

package/dist/types/components/zd-select-multiple/select-multiple.d.ts

@@ -0,0 +1,113 @@
+import { IDictionary } from '@zeedhi/core';
+import { Select } from '../zd-select/select';
+import { ISelectMultiple } from './interfaces';
+export declare class SelectMultiple extends Select implements ISelectMultiple {
+    /**
+     * Selected items that were added to datasource
+     */
+    insertedValues: IDictionary<any>[];
+    /**
+     * Inserted values that were unselected
+     */
+    private insertsRemoved;
+    /**
+     * Max number of rows the component can have
+     */
+    maxRows?: string | number;
+    /**
+     * Limit the display of selected options. The rest will be hidden within the 'limitText' string
+     */
+    limit: number | null;
+    showSelectAll: boolean;
+    showCheckboxAll: boolean;
+    /**
+     * Create a new Select.
+     * @param props Select properties
+     */
+    constructor(props: ISelectMultiple);
+    selectValue: IDictionary<any>[];
+    updateSelectValue(rows: IDictionary<any>): void;
+    private checkboxAllValue;
+    get checkboxAll(): boolean;
+    set checkboxAll(value: boolean);
+    /**
+     * Removes item from array a and add it to array b if condition is satisfied
+     */
+    private cutFromAToB;
+    protected getCondition(filterValue: any): (row: any) => boolean;
+    protected setFieldValue(value: any[]): Promise<boolean>;
+    /**
+     * Set value accessors
+     * @param value
+     */
+    protected setFieldRowValue(rows: any[]): void;
+    setValue(value: any[] | any, callEvent?: boolean): Promise<void>;
+    private getDisplayValue;
+    /**
+     * Retrieves input value
+     * @param value inputted
+     * @private
+     */
+    protected getValue(value: any): any[] | IDictionary<any>[];
+    /**
+     * Retrieves input value
+     * @param value inputed
+     * @protected
+     */
+    protected getValues(value: IDictionary<any>[]): IDictionary<any>[] | any[];
+    /**
+     * Updates search value
+     * @param value Search value
+     */
+    updateSearch(value: string): Promise<void>;
+    /**
+     * Inserts selected items in datasource
+     */
+    protected insertSelected(): void;
+    protected removePushedValue(): void;
+    protected doSearch(value: string): Promise<void>;
+    /**
+     * Removes unselected inserts from datasource
+     */
+    private removeInserts;
+    /**
+     * Return formatted dataText and values
+     */
+    formatter(value: IDictionary<any>[]): any;
+    /**
+     * Returns the text shown when there's one or more selected items that doesn't fit in the input
+     */
+    getMoreChipText(moreChip: number): string;
+    showLoadMore(): boolean;
+    /**
+     * Load more data
+     */
+    loadMore(): Promise<void>;
+    /**
+     * Triggered when the component loses focus.
+     * @param event DOM event
+     * @param element Element that lost the focus
+     */
+    blur(event: Event, element: any): void;
+    /**
+     * Dispatches select/unselect event
+     * @param isChanged checked is changed
+     * @param event DOM event
+     * @param element DOM Element
+     */
+    onSelectAll(isSelected: boolean, event: Event, element: any): void;
+    selectAllItems(): Promise<void>;
+    unSelectAllItems(): Promise<void>;
+    protected checkValueOnBlur(): void;
+    protected afterFocus(): Promise<void>;
+    private setCache;
+    protected registerGetCallback(): void;
+    /**
+     * Updates input rules.
+     */
+    protected updateRules(): void;
+    /**
+     * Retrieves value based on the returnObject definition
+     */
+    protected getReturnValue(value: IDictionary[] | null): any[];
+}

package/dist/types/components/zd-svg-map/interfaces.d.ts

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

@@ -0,0 +1,35 @@
+import { ComponentRender } from '../zd-component/component-render';
+import { ISvgMap, ISvgMapEvents, TooltipData } from './interfaces';
+/**
+ * Base class for SvgMap component.
+ */
+export declare class SvgMap extends ComponentRender implements ISvgMap {
+    areaColor?: string;
+    areaHoverColor?: string;
+    areaSelectColor?: string;
+    events: ISvgMapEvents;
+    height: string | number;
+    multiple: boolean;
+    width: string | number;
+    svgContent: string;
+    svgContainer: any;
+    tooltipData?: TooltipData | undefined;
+    loading?: boolean;
+    keyColumn: string;
+    private mapAreas;
+    private srcValue;
+    private selectedAreaValue;
+    protected viewBeforeUpdate?: () => void;
+    protected viewUpdate?: () => void;
+    constructor(props: ISvgMap);
+    get src(): string;
+    set src(value: string);
+    get selectedArea(): string | string[];
+    set selectedArea(value: string | string[]);
+    private updateSelectedArea;
+    private getSVG;
+    setViewBeforeUpdate(beforeUpdate: () => void): void;
+    setViewUpdate(update: () => void): void;
+    updateSVGContainer(): void;
+    mapClick(element: SVGElement): void;
+}

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

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

@@ -0,0 +1,16 @@
+import { Toggleable } from '../zd-toggleable/toggleable';
+import { ISwitch } from './interfaces';
+/**
+ * Base class for Switch component.
+ */
+export declare class Switch extends Toggleable implements ISwitch {
+    /**
+     * It can make switch render in inset mode.
+     */
+    inset: boolean;
+    /**
+     * Create a new Switch.
+     * @param props Switch properties
+     */
+    constructor(props: ISwitch);
+}

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

@@ -0,0 +1,25 @@
+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;
+}

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

@@ -0,0 +1,42 @@
+import { Column } from '../zd-iterable/column';
+import { IColumn } from '../zd-iterable/interfaces';
+import { Iterable } from '../zd-iterable/iterable';
+import { ITable, ITableCaption, ITableProps } from './interfaces';
+/**
+ * Base class for Table component.
+ */
+export declare class Table extends Iterable implements ITable {
+    /**
+     * Defines table caption.
+     */
+    caption: ITableCaption;
+    /**
+     * Controls table width.
+     */
+    fillWidth: boolean;
+    /**
+     * Controls table head visibility.
+     */
+    showTableHead: boolean;
+    /**
+     * 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;
+    /**
+     * Creates a new Table.
+     * @param table Table properties
+     */
+    constructor(props: ITableProps);
+    createColumn(column: IColumn): Column;
+}

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

@@ -0,0 +1,40 @@
+import { IEventParam } from '@zeedhi/core';
+import { EventDef, IComponent, IComponentEvents, IComponentRender } from '../zd-component/interfaces';
+import { Tabs } from './tabs';
+export type ITabsEventParam = IEventParam<Tabs>;
+export interface ITabsBeforeChangeEventParam extends ITabsEventParam {
+    tabIndex: number;
+}
+export interface ITabsEvents<T = ITabsEventParam | ITabsBeforeChangeEventParam | IEventParam<any>> extends IComponentEvents<T> {
+    change?: EventDef<T>;
+    beforeChange?: EventDef<T>;
+}
+export interface ITab extends IComponent {
+    tabTitle: string;
+    disabled?: boolean;
+    lazyLoad?: boolean;
+    color?: string;
+    dense?: boolean;
+    direction?: 'horizontal' | 'vertical';
+    fixed?: boolean;
+    iconName?: string;
+    rounded?: string | number | boolean;
+    selectedClass?: string;
+    value?: any;
+    variant?: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain';
+    width?: string | number;
+}
+export interface ITabs extends IComponentRender {
+    activeTab?: number;
+    tabs?: ITab[];
+    height?: number | string;
+    maxHeight?: number | string;
+    minHeight?: number | string;
+    color?: string;
+    backgroudColor?: string;
+    dense?: boolean;
+    direction?: 'horizontal' | 'vertical';
+    disabled?: boolean;
+    grow?: boolean;
+    max?: number;
+}

package/dist/types/components/zd-tabs/tab-not-found.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Tab not found error
+ */
+export declare class TabNotFoundError extends Error {
+    /**
+     * Create a new Error.
+     * @param name Tab name
+     * @param parentName Tab parent name
+     */
+    constructor(name: string, parentName: string);
+}

package/dist/types/components/zd-tabs/tab.d.ts

@@ -0,0 +1,57 @@
+import { Component } from '../zd-component/component';
+import { ITab } from './interfaces';
+/**
+ * Base class for Tab component.
+ */
+export declare class Tab extends Component implements ITab {
+    disabled: boolean;
+    tabTitle: string;
+    lazyLoad: boolean;
+    /**
+     * Applies specified color to the control
+     */
+    color: string;
+    /**
+     * Adjusts the vertical height used by the component.
+     */
+    dense: boolean;
+    /**
+     * Changes the direction of the tabs. Can be either horizontal or vertical.
+     */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * Forces component to take up all available space up to
+     * their maximum width (300px), and centers it.
+     */
+    fixed: boolean;
+    /**
+     * Enable and show the icon with respective icon name.
+     */
+    iconName?: string;
+    /**
+     * Designates the border-radius applied to the component.
+     */
+    rounded: string | number | boolean;
+    /**
+     * Configure the active CSS class applied when an item is selected.
+     */
+    selectedClass: string;
+    /**
+     * The value used when the component is selected in a group.
+     * If not provided, a unique ID will be used.
+     */
+    value: any;
+    /**
+     * Applies a distinct style to the component
+     */
+    variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain';
+    /**
+     * Sets the width for the component.
+     */
+    width?: string | number;
+    /**
+     * Create a new Tab.
+     * @param props Tab properties
+     */
+    constructor(props: ITab);
+}