@zeedhi/common 1.39.1 → 1.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.39.1",
+  "version": "1.43.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": "fbf85c6aaac496ff2df31cf231d70b79b3114e5c"
+  "gitHead": "29c0d1651d7e00dba4a4e582c1c1ffd8b466107e"
 }

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

@@ -62,6 +62,8 @@ export declare class Alert extends Component implements IAlert {
     vertical: boolean;
     protected defaultValues: {
         name: string;
+        dark: boolean;
+        light: boolean;
         color: string;
         text: string;
         timeout: number;

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

@@ -4,10 +4,6 @@ import { ComponentRender } from '../zd-component/component-render';
  * Base class for Breadcrumbs component.
  */
 export declare class Breadcrumbs extends ComponentRender implements IBreadcrumbs {
-    /**
-     * Applies the dark theme variant to the component.
-     */
-    dark: boolean;
     /**
      * Specifies the dividing string between items.
      */
@@ -24,10 +20,6 @@ export declare class Breadcrumbs extends ComponentRender implements IBreadcrumbs
      * Increase the font-size of the breadcrumb item text to 16px.
      */
     large: boolean;
-    /**
-     * Applies the light theme variant to the component.
-     */
-    light: boolean;
     /**
      * Decrease the font-size of the breadcrumb item text to 12px.
      */

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

@@ -22,10 +22,6 @@ export declare class Button extends ComponentRender implements IButton {
      * It can be the name of material or css color in hexa
      */
     color: string;
-    /**
-     * Applies the dark theme variant to the button
-     */
-    dark: boolean;
     /**
      * Removes the ability to click or target the button
      */
@@ -71,10 +67,6 @@ export declare class Button extends ComponentRender implements IButton {
      * This should be used with the absolute or fixed props
      */
     left: boolean;
-    /**
-     * Applies the light theme variant to the button
-     */
-    light: boolean;
     /**
      * Makes the background transparent and applies a thin border
      */

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

@@ -8,7 +8,6 @@ export interface IButton extends IComponentRender {
     block?: boolean;
     bottom?: boolean;
     color?: string;
-    dark?: boolean;
     disabled?: boolean;
     events?: IButtonEvents;
     fab?: boolean;
@@ -20,7 +19,6 @@ export interface IButton extends IComponentRender {
     label?: string;
     large?: boolean;
     left?: boolean;
-    light?: boolean;
     outline?: boolean;
     reverse?: boolean;
     right?: boolean;

package/types/components/zd-button-group/button-group.d.ts

@@ -22,10 +22,6 @@ export declare class ButtonGroup extends ComponentRender implements IButtonGroup
      * It can be the name of material or css color in hexa
      */
     color: string;
-    /**
-     * Applies the dark theme variant to the component.
-     */
-    dark: boolean;
     /**
      * Reduces the button size and padding.
      */
@@ -35,10 +31,6 @@ export declare class ButtonGroup extends ComponentRender implements IButtonGroup
      * space between the buttons
      */
     group: boolean;
-    /**
-     * Applies the light theme variant to the component.
-     */
-    light: boolean;
     /**
      * Applies mandatory selected button
      */

package/types/components/zd-button-group/interfaces.d.ts

@@ -11,11 +11,9 @@ export interface IButtonGroup extends IComponentRender {
     backgroundColor?: string;
     borderless?: boolean;
     color?: string;
-    dark?: boolean;
     dense?: boolean;
     events?: IButtonGroupEvents;
     group?: boolean;
-    light?: boolean;
     mandatory?: boolean;
     multiple?: boolean;
     rounded?: boolean;

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

@@ -16,10 +16,6 @@ export declare class Card extends ComponentRender implements ICard {
      * Applies specified color to the control. It can be the name of material color
      */
     color: string;
-    /**
-     * Applies the dark theme variant to the component
-     */
-    dark: boolean;
     /**
      * Removes the ability to click or target the component
      */
@@ -53,10 +49,6 @@ export declare class Card extends ComponentRender implements ICard {
      * Specifies an image background for the card
      */
     img: string;
-    /**
-     * Applies the light theme variant to the component
-     */
-    light: boolean;
     /**
      * Designates that the card is a link
      */

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

@@ -9,14 +9,12 @@ export interface ICard extends IComponentRender {
     color?: string;
     elevation?: number | string;
     events?: ICardEvents;
-    dark?: boolean;
     disabled?: boolean;
     flat?: boolean;
     height?: number | string;
     hover?: boolean;
     href?: string;
     img?: string;
-    light?: boolean;
     link?: boolean;
     maxHeight?: number | string;
     maxWidth?: number | string;

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

@@ -26,10 +26,6 @@ export declare class Carousel extends ComponentRender implements ICarousel {
      * Current slide being displayed
      */
     currentSlide: number;
-    /**
-     * Applies the dark theme variant to the carousel pagination
-     */
-    dark: boolean;
     /**
      * Events registered to the carousel
      */
@@ -44,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)
      */
@@ -60,10 +66,6 @@ export declare class Carousel extends ComponentRender implements ICarousel {
      * Allows controlling the carousel using the keyboard arrow keys
      */
     keysControl: boolean;
-    /**
-     * Applies the light theme variant to the carousel
-     */
-    light: boolean;
     /**
      * Allows controlling the carousel using mouse drag
      */

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

@@ -18,13 +18,13 @@ export interface ICarousel extends IComponentRender {
     buttonsOutside?: boolean;
     center?: boolean;
     currentSlide?: number;
-    dark?: boolean;
     height?: number | string;
+    maxHeight?: number | string;
+    minHeight?: number | string;
     infiniteScroll?: boolean;
     initialSlide?: number;
     interval?: number;
     keysControl?: boolean;
-    light?: boolean;
     mouseControl?: boolean;
     nextButton?: IButton;
     fractionPagination?: boolean;

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

@@ -34,6 +34,14 @@ export declare class Component implements IComponent {
      * Defines component name.
      */
     name: string;
+    /**
+     * Applies the dark theme variant to the component.
+     */
+    dark: boolean;
+    /**
+     * Applies the light theme variant to the component.
+     */
+    light: boolean;
     /**
      * Parent component instance. This property should be used when is
      * necessary create dynamic components.

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

@@ -13,6 +13,8 @@ export interface IComponent {
     cssStyle?: string | object;
     events?: IComponentEvents;
     isVisible?: boolean | string;
+    dark?: boolean;
+    light?: boolean;
     keyMap?: IKeyMap;
     name: string;
     parent?: Component;

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

@@ -4,18 +4,10 @@ import { ComponentRender } from '../zd-component/component-render';
  * Base class for Divider component.
  */
 export declare class Divider extends ComponentRender implements IDivider {
-    /**
-     * Applies the dark theme variant to the component.
-     */
-    dark: boolean;
     /**
      * Adds indentation (72px) for normal dividers, reduces max height for vertical.
      */
     inset: boolean;
-    /**
-     * Applies the light theme variant to the component.
-     */
-    light: boolean;
     /**
      * Displays dividers vertically.
      */

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

@@ -3,8 +3,6 @@ import { Divider } from './divider';
 import { IComponentRender } from '../zd-component/interfaces';
 export declare type IDividerEvent = IEventParam<Divider>;
 export interface IDivider extends IComponentRender {
-    dark?: boolean;
     inset?: boolean;
-    light?: boolean;
     vertical?: boolean;
 }

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;