@zeedhi/common 1.42.0 → 1.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.42.0",
+  "version": "1.45.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -37,5 +37,5 @@
     "lodash.times": "^4.3.2",
     "mockdate": "^3.0.2"
   },
-  "gitHead": "1b3927e4fa74176f8c1dcfa909db8d89d39711e5"
+  "gitHead": "b5841549f61c539c52f2438b72e21ccd72156f73"
 }

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,6 +43,10 @@ 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.
      */
@@ -72,5 +76,152 @@ export declare class ApexChart extends ComponentRender implements IApexChart {
      * @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-button-group/button-group.d.ts

@@ -71,5 +71,5 @@ export declare class ButtonGroup extends ComponentRender implements IButtonGroup
        * @param event DOM event
        * @param element Element clicked
        */
-    change(event?: Event, element?: HTMLElement): void;
+    change(event?: Event, element?: any): void;
 }

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)
      */
@@ -149,13 +159,13 @@ export declare class Carousel extends ComponentRender implements ICarousel {
      * @param element Carousel element
      * @param slideData Data related to the beforeSlide event
      */
-    beforeSlide(element: HTMLElement, slideData: ISlideData, event?: Event): void;
+    beforeSlide(element: any, slideData: ISlideData, event?: Event): void;
     /**
      * Event triggered when the current slide changes.
      * @param event Event that triggered the slide event
      * @param element Carousel element
      * @param slideData Data related to the slide event
      */
-    slide(element: HTMLElement, slideData: ISlideData, event?: Event): void;
+    slide(element: any, slideData: ISlideData, event?: Event): void;
     private changeDefaultButtonName;
 }

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

@@ -9,7 +9,7 @@ export interface ISlideData {
 export interface ICarouselEventParam {
     component: Carousel;
     event?: Event | undefined;
-    element?: HTMLElement;
+    element?: any;
     slideData?: ISlideData;
 }
 export declare type ICarouselEvents = IComponentEvents<ICarouselEventParam>;
@@ -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-collapse-card/collapse-card.d.ts

@@ -52,5 +52,5 @@ export declare class CollapseCard extends Card implements ICollapseCard {
      * @param event DOM event
      * @param element Element changed
      */
-    change(event: Event, element: HTMLElement): void;
+    change(event: Event, element: any): void;
 }

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

@@ -63,6 +63,7 @@ export declare class Component implements IComponent {
      * Properties accessors to controller.
      */
     private accessorManager;
+    private element?;
     /**
      * Sets view focus method.
      */
@@ -128,7 +129,7 @@ export declare class Component implements IComponent {
      * Triggered when the component is mounted.
      * @param element Element mounted reference
      */
-    onMounted(element: HTMLElement): void;
+    onMounted(element: any): void;
     /**
      * Triggered before the component is destroyed.
      */
@@ -142,17 +143,17 @@ export declare class Component implements IComponent {
      * @param event DOM event
      * @param element Element clicked
      */
-    click(event: Event, element: HTMLElement): void;
+    click(event?: Event, element?: any): void;
     /**
      * Triggered when the component is focused.
      * @param event DOM event
      * @param element Element focused
      */
-    focus(event: Event, element: HTMLElement): void;
+    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: HTMLElement): void;
+    blur(event: Event, element: any): void;
 }

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-dashboard/dashboard.d.ts

@@ -24,7 +24,7 @@ export declare class Dashboard extends ComponentRender implements IDashboard {
      * @param props Dashboard properties
      */
     constructor(props: IDashboard);
-    onMounted(element: HTMLElement): void;
+    onMounted(element: any): void;
     onBeforeDestroy(): void;
     addCard(): void;
     deleteCard(): void;

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

@@ -89,9 +89,9 @@ export declare class DateRange extends TextInput implements IDateRange {
     parseISODateRangeValue(values: string[]): any;
     private sortDates;
     dateValidation(): boolean | string;
-    click(event: Event, element: HTMLElement): void;
-    blur(event: Event, element: HTMLElement): void;
-    focus(event: Event, element: HTMLElement): void;
+    click(event?: Event, element?: any): void;
+    blur(event: Event, element: any): void;
+    focus(event: Event, element: any): void;
     /**
       * Add date mask
       */
@@ -109,7 +109,7 @@ export declare class DateRange extends TextInput implements IDateRange {
       * @param event DOM event
       * @param element Text input
       */
-    iconClick(event: Event, element: HTMLElement): void;
+    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

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

@@ -79,7 +79,7 @@ export declare class Date extends TextInput implements IDate {
      * @param event
      * @param element
      */
-    selectDate(date: string, event?: Event, element?: HTMLElement): void;
+    selectDate(date: string, event?: Event, element?: any): void;
     get displayValue(): string;
     set displayValue(newValue: string);
     /**
@@ -98,9 +98,9 @@ export declare class Date extends TextInput implements IDate {
     formatISODateValue(value: string): string;
     parseISODateValue(value: string): any;
     dateValidation(): boolean | string;
-    click(event: Event, element: HTMLElement): void;
-    blur(event: Event, element: HTMLElement): void;
-    focus(event: Event, element: HTMLElement): void;
+    click(event?: Event, element?: any): void;
+    blur(event: Event, element: any): void;
+    focus(event: Event, element: any): void;
     /**
      * Add date mask
      */
@@ -118,7 +118,7 @@ export declare class Date extends TextInput implements IDate {
      * @param event DOM event
      * @param element Text input
      */
-    iconClick(event: Event, element: HTMLElement): void;
+    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

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-file-input/file-input.d.ts

@@ -77,14 +77,14 @@ export declare class FileInput extends TextInput implements IFileInput {
      * @param event DOM event
      * @param element Element clicked
      */
-    change(event?: Event, element?: HTMLElement): void;
+    change(event?: Event, element?: any): void;
     /**
      * Triggered when a removable chip is clicked
      * @param event DOM event
      * @param index Chip index
-     * @param element HTMLElement
+     * @param element any
      */
-    chipClick(event: Event, index: number, element?: HTMLElement): void;
+    chipClick(event: Event, index: number, element: any): void;
     /**
      * Check if File type is valid using accept attribute
      * @param file File

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.
      */
@@ -102,12 +106,12 @@ export declare class Form extends ComponentRender implements IForm {
      * @param event DOM Event
      * @param element Form component
      */
-    callSubmitEvent(event: Event, element: HTMLElement): void;
+    callSubmitEvent(event: Event, element: any): void;
     /**
      * Triggered when the component is mounted.
      * @param element Element mounted reference
      */
-    onMounted(element: HTMLElement): void;
+    onMounted(element: any): void;
     submit(): void;
     /**
      * Reset all form validation errors.

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;
     /**
@@ -28,7 +31,7 @@ export declare class Frame extends ComponentRender implements IFrame {
      * @param event
      * @param element
      */
-    afterLoad(event?: Event, element?: HTMLElement): void;
+    afterLoad(event?: Event, element?: any): void;
     /**
      * Checks if cache response is valid (not expired yet)
      * @param response

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;
 }