@zeedhi/common 1.40.0 → 1.43.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.40.0",
+  "version": "1.43.1",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -37,5 +37,5 @@
     "lodash.times": "^4.3.2",
     "mockdate": "^3.0.2"
   },
-  "gitHead": "3dd3bf4a5646a8b7f6b7813b16ca0fbed39c98a8"
+  "gitHead": "dea0dcc3bb44548e97613b82580964acdc07411d"
 }

package/types/components/index.d.ts

@@ -121,6 +121,8 @@ export * from './zd-select-tree/select-tree';
 export * from './zd-select-tree/interfaces';
 export * from './zd-select-tree-multiple/select-tree-multiple';
 export * from './zd-select-tree-multiple/interfaces';
+export * from './zd-selectable-list/selectable-list';
+export * from './zd-selectable-list/interfaces';
 export * from './zd-speed-dial/speed-dial';
 export * from './zd-speed-dial/interfaces';
 export * from './zd-steppers/steppers';

package/types/components/zd-apex-chart/apex-chart.d.ts

@@ -1,4 +1,4 @@
-import { IApexChart } from './interfaces';
+import { IApexChart, IApexChartEvents } from './interfaces';
 import { ComponentRender } from '../zd-component/component-render';
 /**
  * Base class for ApexChart component.
@@ -43,10 +43,19 @@ export declare class ApexChart extends ComponentRender implements IApexChart {
      * Defines the load progress color
      */
     loadColor: string;
+    /**
+     * Defines Apex Chart events.
+     */
+    events: IApexChartEvents;
     /**
      * Optional update method assigned by view layer.
      */
     private viewUpdate?;
+    /**
+     * Method to return icon HTML on the view layer.
+     */
+    private viewGetIconHTML?;
+    private defaultOptions;
     /**
      * Creates a new ApexChart.
      * @param props ApexChart properties
@@ -57,9 +66,162 @@ export declare class ApexChart extends ComponentRender implements IApexChart {
      * @param viewUpdate Update method
      */
     setViewUpdate(viewUpdate: (options: any) => Promise<any>): void;
+    /**
+     * Sets view get icon HTML method.
+     * @param viewGetIconHTML Update method
+     */
+    setViewGetIconHTML(viewGetIconHTML: (icon: string) => string): void;
     /**
      * Update the chart
      * @param options New options
      */
     updateChart(options: any): Promise<any>;
+    /**
+     * Fires when the chart’s initial animation is finished
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    animationEndEvent(chartContext: any, options: any): void;
+    /**
+     * Fires before the chart has been drawn on screen
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    beforeMountEvent(chartContext: any, config: any): void;
+    /**
+     * Fires after the chart has been drawn on screen
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    mountedEvent(chartContext: any, config: any): void;
+    /**
+     * Fires when the chart has been dynamically updated either with
+     * updateOptions() or updateSeries() functions
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    updatedEvent(chartContext: any, config: any): void;
+    /**
+     * Fires when the chart has been dynamically updated either with
+     * updateOptions() or updateSeries() functions
+     * @param event Event that triggered the click event
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    clickEvent(event?: Event, chartContext?: any, config?: any): void;
+    /**
+     * Fires when user moves mouse on any area of the chart.
+     * @param event Event that triggered the click event
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    mouseMoveEvent(event?: Event, chartContext?: any, config?: any): void;
+    /**
+     * Fires when user moves mouse on any area of the chart.
+     * @param event Event that triggered the mouse leave
+     * @param chartContext
+     * @param config New config
+     * @param element DOM Element
+     */
+    mouseLeaveEvent(event?: Event, chartContext?: any, config?: any): void;
+    /**
+     * Fires when user moves mouse on any area of the chart.
+     * @param chartContext
+     * @param seriesIndex
+     * @param config
+     * @param element DOM Element
+     */
+    legendClickEvent(chartContext?: any, seriesIndex?: any, config?: any): void;
+    /**
+     * Fires when user moves mouse on any area of the chart.
+     * @param event Event that triggered the marker click
+     * @param chartContext
+     * @param option New config
+     * @param element DOM Element
+     */
+    markerClickEvent(event?: Event, chartContext?: any, config?: any): void;
+    /**
+     * Fires when user selects rect using the selection tool.
+     * The second argument
+     * @param chartContext
+     * @param config contains the yaxis and xaxis coordinates where user made the selection
+     * @param element DOM Element
+     */
+    selectionEvent(chartContext?: any, config?: any): void;
+    /**
+     * Fires when user clicks on a datapoint (bar/column/marker/bubble/donut-slice).
+     * @param event Event that triggered when user clicks on a datapoint
+     * @param chartContext
+     * @param config The config object, also includes additional information like
+     * which dataPointIndex was selected of which series.
+     * @param element DOM Element
+     */
+    dataPointSelectionEvent(event?: Event, chartContext?: any, config?: any): void;
+    /**
+     * Fires when user clicks on a datapoint (bar/column/marker/bubble/donut-slice).
+     * @param event Event that triggered when user’s mouse enter on a datapoint
+     * @param chartContext
+     * @param config The config object, also includes additional information like
+     * which dataPointIndex was hovered of particular series.
+     * @param element DOM Element
+     */
+    dataPointMouseEnterEvent(event?: Event, chartContext?: any, config?: any): void;
+    /**
+     * MouseLeave event for a datapoint (bar/column/marker/bubble/donut-slice).
+     * @param event Event that triggered the beforeSlide event
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    dataPointMouseLeaveEvent(event?: Event, chartContext?: any, config?: any): void;
+    /**
+     * This function, if defined, runs just before zooming in/out of the chart
+     * allowing you to set a custom range for zooming in/out.
+     * @param chartContext
+     * @param config { min: timestamp, max: timestamp }
+     * @param element DOM Element
+     */
+    beforeZoomEvent(chartContext?: any, config?: any): void;
+    /**
+     * This function, if defined, runs just before the user hits the HOME button
+     * on the toolbar to reset the chart to it’s original state. The function
+     * allows you to set a custom axes range for the initial view of the chart.
+     * @param chartContext
+     * @param config { min: timestamp, max: timestamp }
+     * @param element DOM Element
+     */
+    beforeResetZoomEvent(chartContext?: any, config?: any): void;
+    /**
+     * Fires when user zooms in/out the chart using either the selection zooming
+     * tool or zoom in/out buttons.
+     * The 2nd argument includes information of the new xaxis/yaxis generated after zooming.
+     * @param chartContext
+     * @param config { min: timestamp, max: timestamp }
+     * @param element DOM Element
+     */
+    zoomedEvent(chartContext?: any, config?: any): void;
+    /**
+     * Fires when user scrolls using the pan tool.
+     * The 2nd argument includes information of the new xaxis generated after scrolling.
+     * @param chartContext
+     * @param config { xaxis: any  }
+     * @param element DOM Element
+     */
+    scrolledEvent(chartContext?: any, config?: any): void;
+    /**
+     * Fires when user drags the brush in a brush chart.
+     * The 2nd argument includes information of the new axes generated after
+     * scrolling the brush.
+     * @param chartContext
+     * @param config { xaxis: any, yaxis: any  }
+     * @param element DOM Element
+     */
+    brushScrolledEvent(chartContext?: any, config?: any): void;
+    updateToolbarIcons(): any;
 }

package/types/components/zd-apex-chart/interfaces.d.ts

@@ -1,7 +1,38 @@
-import { IEventParam } from '@zeedhi/core';
-import { IComponentRender } from '../zd-component/interfaces';
+import { IEventParam, IEvent } from '@zeedhi/core';
+import { IComponentEvents, IComponentRender } from '../zd-component/interfaces';
 import { ApexChart } from './apex-chart';
-export declare type IApexChartEvent = IEventParam<ApexChart>;
+export declare type ApexChartOption = {
+    xaxis?: any;
+    yaxis?: any;
+    seriesIndex?: any;
+    config?: any;
+    dataPointIndex?: any;
+};
+export interface IApexChartEvent extends IEventParam<ApexChart> {
+    chartContext: any;
+    config?: ApexChartOption;
+    seriesIndex?: any;
+}
+export interface IApexChartEvents<T = IApexChartEvent | IEventParam<any>> extends IComponentEvents<T> {
+    chartAnimationEnd?: IEvent<T> | string;
+    chartBeforeMount?: IEvent<T> | string;
+    chartMounted?: IEvent<T> | string;
+    chartUpdated?: IEvent<T> | string;
+    chartMouseMove?: IEvent<T> | string;
+    chartMouseLeave?: IEvent<T> | string;
+    chartClick?: IEvent<T> | string;
+    chartLegendClick?: IEvent<T> | string;
+    chartMarkerClick?: IEvent<T> | string;
+    chartSelection?: IEvent<T> | string;
+    chartDataPointSelection?: IEvent<T> | string;
+    chartDataPointMouseEnter?: IEvent<T> | string;
+    chartDataPointMouseLeave?: IEvent<T> | string;
+    chartBeforeZoom?: IEvent<T> | string;
+    chartBeforeResetZoom?: IEvent<T> | string;
+    chartZoomed?: IEvent<T> | string;
+    chartScrolled?: IEvent<T> | string;
+    chartBrushScrolled?: IEvent<T> | string;
+}
 export interface IApexChart extends IComponentRender {
     chartType?: string;
     series?: any[] | string;
@@ -11,4 +42,5 @@ export interface IApexChart extends IComponentRender {
     loading?: boolean;
     loadOpacity?: number;
     loadColor?: string;
+    events?: IApexChartEvents;
 }

package/types/components/zd-carousel/carousel.d.ts

@@ -40,6 +40,16 @@ export declare class Carousel extends ComponentRender implements ICarousel {
      * '30em', '400', 400. Values without measurement unit will be notated in pixels by default
      */
     height: number | string;
+    /**
+     * Sets the carousel max height. Example values: 'auto', '100%', '400px',
+     * '30em', '400', 400. Values without measurement unit will be notated in pixels by default
+     */
+    maxHeight: number | string;
+    /**
+     * Sets the carousel min height. Example values: 'auto', '100%', '400px',
+     * '30em', '400', 400. Values without measurement unit will be notated in pixels by default
+     */
+    minHeight: number | string;
     /**
      * Configures the carousel as infinite (the slide after the last one is the first slide, and vice-versa)
      */

package/types/components/zd-carousel/interfaces.d.ts

@@ -19,6 +19,8 @@ export interface ICarousel extends IComponentRender {
     center?: boolean;
     currentSlide?: number;
     height?: number | string;
+    maxHeight?: number | string;
+    minHeight?: number | string;
     infiniteScroll?: boolean;
     initialSlide?: number;
     interval?: number;

package/types/components/zd-code-editor/code-editor.d.ts

@@ -11,7 +11,11 @@ export declare class CodeEditor extends ComponentRender implements ICodeEditor {
     /**
      * Max height in pixels. 'none' means no limit.
      */
-    maxHeight: string;
+    maxHeight: number | string;
+    /**
+     * Max height in pixels. 'none' means no limit.
+     */
+    height: number | string;
     /**
      * Language code to be used for highlight (js|javascript, css, html, json, ts|typescript, bash|shell)
      * Other languages must be imported above

package/types/components/zd-code-editor/interfaces.d.ts

@@ -3,6 +3,7 @@ export interface ICodeEditor extends IComponentRender {
     staticCode?: object | string | string[];
     language?: string;
     showLineNumbers?: boolean | string;
-    maxHeight?: string;
+    maxHeight?: string | number;
+    height?: string | number;
     copyIcon?: string;
 }

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

@@ -8,6 +8,18 @@ export declare class Container extends ComponentRender implements IContainer {
      * Adds height 100% to container.
      */
     fillHeight: boolean;
+    /**
+     * 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;
     /**
      * Removes viewport maximum-width size breakpoints.
      */

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

@@ -2,4 +2,7 @@ import { IComponentRender } from '../zd-component/interfaces';
 export interface IContainer extends IComponentRender {
     fillHeight?: boolean;
     fluid?: boolean;
+    height?: number | string;
+    maxHeight?: number | string;
+    minHeight?: number | string;
 }

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

@@ -37,10 +37,6 @@ export declare class DateRange extends TextInput implements IDateRange {
      * Sets the locale. Accepts a string with a BCP 47 language tag.
      */
     locale?: string;
-    /**
-     * Defines if dates should be ordered
-     */
-    orderedDates: boolean;
     /**
      * Allows changing displayed month with mouse scroll
      */
@@ -91,8 +87,8 @@ export declare class DateRange extends TextInput implements IDateRange {
     set isoRangeValue(newValue: string[]);
     formatISODateRangeValue(dates: string[] | string): string[];
     parseISODateRangeValue(values: string[]): any;
+    private sortDates;
     dateValidation(): boolean | string;
-    dateValidateOrder(): boolean | string;
     click(event: Event, element: HTMLElement): void;
     blur(event: Event, element: HTMLElement): void;
     focus(event: Event, element: HTMLElement): void;

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

@@ -29,12 +29,22 @@ export declare class Dialog extends Component implements IDialog {
      * Dialog type (normal, success, error, warning, info)
      */
     type: string;
+    /**
+     * Confirm button component name
+     */
+    confirmButton?: string;
+    /**
+     * Deny button component name
+     */
+    denyButton?: string;
     /**
      * Default dialog buttons
      * @private
      */
     private defaultButtons;
     protected defaultValues: {
+        confirmButton: string | undefined;
+        denyButton: string | undefined;
         name: string;
         maxWidth: string | number;
         persistent: boolean;
@@ -52,6 +62,7 @@ export declare class Dialog extends Component implements IDialog {
      * @param dialog Dialog structure
      */
     assignDialogProperties(dialog: IDialog): void;
+    protected clickDefaultButtonKeyMapping: any;
     /**
      * Displays dialog
      */

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

@@ -4,6 +4,8 @@ export interface IDialog extends IComponent {
     buttons?: IButton[];
     maxWidth?: string | number;
     persistent?: boolean;
+    confirmButton?: string;
+    denyButton?: string;
     text?: string;
     title?: string;
     type?: string;

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

@@ -37,6 +37,10 @@ export declare class Dropdown extends ComponentRender implements IDropdown {
      * Applies position fixed to the dropdown.
      */
     fixed: boolean;
+    /**
+     * Sets the height for the dropdown.
+     */
+    height?: number | string;
     /**
      * Sets the maximum height for the dropdown.
      */

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

@@ -11,6 +11,7 @@ export interface IDropdown extends IComponentRender {
     cursor?: string;
     fixed?: boolean;
     hover?: boolean;
+    height?: number | string;
     maxHeight?: number | string;
     maxWidth?: number | string;
     minHeight?: number | string;

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

@@ -20,6 +20,10 @@ export declare class Form extends ComponentRender implements IForm {
      * Available options are start, center, end, space-between and space-around.
      */
     justify?: string;
+    /**
+     * Sets the height for the form.
+     */
+    height?: number | string;
     /**
      * Defines form events.
      */

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

@@ -22,6 +22,7 @@ export interface IFormComponent extends IComponentRender {
 export interface IForm extends IComponentRender {
     align?: string;
     justify?: string;
+    height?: number | string;
     children?: IFormComponent[];
     events?: IFormEvents;
 }

package/types/components/zd-frame/frame.d.ts

@@ -12,6 +12,9 @@ export declare class Frame extends ComponentRender implements IFrame {
     cache: boolean;
     events: IFrameEvents;
     cacheDuration: number;
+    height: number | string;
+    maxHeight: number | string;
+    minHeight: number | string;
     private readonly headerName;
     private static readonly cacheName;
     /**
@@ -20,6 +23,7 @@ export declare class Frame extends ComponentRender implements IFrame {
      */
     constructor(props: IFrame);
     private getMetadata;
+    reload(): Promise<void>;
     protected notFoundError(): void;
     private requestPage;
     /**

package/types/components/zd-frame/interfaces.d.ts

@@ -11,4 +11,7 @@ export interface IFrame extends IComponentRender {
     override?: Object;
     cache?: boolean;
     cacheDuration?: number;
+    height?: number | string;
+    maxHeight?: number | string;
+    minHeight?: number | string;
 }

package/types/components/zd-grid/grid-editable.d.ts

@@ -23,12 +23,20 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @private
      */
     private editedRows;
+    /**
+     * Rows with newRowIdentifier
+     * @private
+     */
+    private addedRows;
     /**
      * Invalid inline components
      * @private
      */
     private invalidComponents;
+    protected cancelEditedRowsKeyMapping: any;
     constructor(props: IGridEditable);
+    onMounted(element: HTMLElement): void;
+    onBeforeDestroy(): void;
     /**
      * Get Grid columns objects
      * @param columns Grid columns parameter
@@ -112,11 +120,13 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * Cancels all edited rows and enable grid components
      */
     cancelEditedRows(): Promise<void>;
+    private removeAddedRows;
+    private addDataRow;
     /**
      * Saves all edited rows if they are valid
      * @throws Will throw when it finds an invalid row
      */
-    saveEditedRows(): Promise<any[]>;
+    saveEditedRows(): Promise<void[]>;
     /**
      * Retrieves all edited rows if they are valid
      * @throws Will throw when it finds an invalid row

package/types/components/zd-list/interfaces.d.ts

@@ -12,6 +12,9 @@ export interface IList extends IComponentRender {
     color?: string;
     elevation?: number | string;
     expand?: boolean;
+    height?: number | string;
+    maxHeight?: number | string;
+    minHeight?: number | string;
 }
 /**
  * Interface for list itens

package/types/components/zd-list/list.d.ts

@@ -41,6 +41,18 @@ export declare class List extends ComponentRender implements IList {
      * Will only collapse when explicitly closed.
      */
     expand: boolean;
+    /**
+     * Sets the height for the component.
+     */
+    height: number | string;
+    /**
+     * Sets the maxHeight for the component.
+     */
+    maxHeight: number | string;
+    /**
+     * Sets the minHeight for the component.
+     */
+    minHeight: number | string;
     constructor(props: IList);
     /**
      * Get item by name

package/types/components/zd-selectable-list/interfaces.d.ts

@@ -0,0 +1,8 @@
+import { IList } from '../zd-list/interfaces';
+export interface ISelectableList extends IList {
+    activeClass?: string;
+    mandatory?: boolean;
+    max?: number;
+    multiple?: boolean;
+    value?: any;
+}

package/types/components/zd-selectable-list/selectable-list.d.ts

@@ -0,0 +1,29 @@
+import { ISelectableList } from './interfaces';
+import { List } from '../zd-list/list';
+/**
+ * Base class for SelectableList component.
+ */
+export declare class SelectableList extends List implements ISelectableList {
+    /**
+     * Applies specified css class to the selected item
+     */
+    activeClass?: string;
+    /**
+     * Specifies whether at least one element must be selected
+     */
+    mandatory: boolean;
+    /**
+     * Defines the maximum number of elements the list has
+     */
+    max?: number;
+    /**
+     * Defines how many elements of the list can be selected at the same time
+     */
+    multiple?: boolean;
+    /**
+     * Sets the active list-item inside the list-group
+     */
+    value?: any;
+    constructor(props: ISelectableList);
+    change(event?: Event, element?: HTMLElement): void;
+}

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

@@ -17,4 +17,5 @@ export interface ITab extends IComponent {
 export interface ITabs extends IComponentRender {
     activeTab?: number;
     tabs?: ITab[];
+    height?: number | string;
 }

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

@@ -8,6 +8,10 @@ export declare class Tabs extends ComponentRender implements ITabs {
     activeTab: number;
     events: ITabsEvents;
     tabs: Tab[];
+    /**
+     * Sets the height for Tabs.
+     */
+    height?: number | string;
     /**
      * Create a new Tabs.
      * @param props Tabs properties
@@ -15,6 +19,16 @@ export declare class Tabs extends ComponentRender implements ITabs {
     constructor(props: ITabs);
     private getTabs;
     getTab(name: string): Tab;
+    /**
+     * Method for navigating to the next tab
+     * @param loop Defines if want a loop navigation
+     */
+    nextTab(loop?: boolean): void;
+    /**
+     * Method for navigating to the previous tab
+     * @param loop Defines if want a loop navigation
+     */
+    previousTab(loop?: boolean): void;
     /**
      * Triggered before tab is change.
      * @param event DOM event

package/types/components/zd-tree-grid/tree-grid-editable.d.ts

@@ -26,7 +26,10 @@ export declare class TreeGridEditable extends TreeGrid implements ITreeGridEdita
      * Enter edit mode on double click
      */
     doubleClickEdit: boolean;
+    protected cancelEditedRowsKeyMapping: any;
     constructor(props: ITreeGridEditable);
+    onMounted(element: HTMLElement): void;
+    onBeforeDestroy(): void;
     /**
      * Get Grid columns objects
      * @param columns Grid columns parameter

package/types/utils/themes/themes.d.ts

@@ -32,10 +32,14 @@ declare const initTheme: (theme?: any) => {
         light: {
             'font-color': string;
             'background-base': string;
+            'scrollbar-track': string;
+            'scrollbar-thumb': string;
         };
         dark: {
             'font-color': string;
             'background-base': string;
+            'scrollbar-track': string;
+            'scrollbar-thumb': string;
         };
         variables: {
             'default-padding': string;