@deviceinsight/ng-ui-components 6.18.0 → 6.19.0

package/lib/esm/components/treeview/components/Node.d.ts

@@ -31,7 +31,7 @@ export default class Node extends React.Component<Props, State> {
     getSelectionState(): SelectionState;
     toggleExpand: () => void;
     onSelect: (toggled: boolean) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=Node.d.ts.map

package/lib/esm/components/treeview/components/NodeInfo.d.ts

@@ -19,7 +19,7 @@ export default class NodeInfo extends React.PureComponent<NodeInfoProps> {
     updateSelectionState(): void;
     onSelect: (event: React.SyntheticEvent<HTMLInputElement>) => void;
     onLabelClick: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=NodeInfo.d.ts.map

package/lib/esm/components/upload/FileUpload.d.ts

@@ -62,6 +62,6 @@ export default class FileUpload extends React.Component<Props, State> {
     handleDrop: (accepted: Array<DropzoneFile>, rejected: Array<DropzoneFile>) => void;
     selectFile: (arg0: DropzoneFile) => void;
     handleRemoveFile: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 //# sourceMappingURL=FileUpload.d.ts.map

package/lib/esm/components/upload/ImageUpload.d.ts

@@ -15,7 +15,7 @@ export default class ImageUpload extends React.Component<Props, ImageUploadState
     state: ImageUploadState;
     componentDidUpdate(prevProps: Props): void;
     handleDragOver: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=ImageUpload.d.ts.map

package/lib/esm/modules/messageBox/messageBox.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { ToastContent, ToastOptions } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import '../../assets/react-toastify-custom.css';
@@ -10,5 +10,5 @@ export declare const messageBoxError: (content: ToastContent, options?: ToastOpt
 export declare const messageBoxDismissSingle: (id: number) => void;
 export declare const messageBoxDismissGroup: (groupName: string) => void;
 export declare const messageBoxDismissAll: () => void;
-export declare const MessageBoxContainer: () => JSX.Element;
+export declare const MessageBoxContainer: () => React.JSX.Element;
 //# sourceMappingURL=messageBox.d.ts.map

package/lib/esm/modules/messageBox/messageBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"messageBox.d.ts","sourceRoot":"","sources":["../../../../src/modules/messageBox/messageBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAQ,YAAY,EAAE,YAAY,EAAwB,MAAM,gBAAgB,CAAC;AAExF,OAAO,uCAAuC,CAAC;AAC/C,OAAO,wCAAwC,CAAC;AAQhD,eAAO,MAAM,+BAA+B,YAAa,YAAY,KAAG,IAEvE,CAAC;AAYF,eAAO,MAAM,iBAAiB,YAAa,YAAY,YAAY,YAAY,cAAc,MAAM,KAAG,IAGrG,CAAC;AAEF,eAAO,MAAM,cAAc,YAAa,YAAY,YAAY,YAAY,cAAc,MAAM,KAAG,IAGlG,CAAC;AAEF,eAAO,MAAM,cAAc,YAAa,YAAY,YAAY,YAAY,cAAc,MAAM,KAAG,IAGlG,CAAC;AAEF,eAAO,MAAM,eAAe,YAAa,YAAY,YAAY,YAAY,cAAc,MAAM,KAAG,IAInG,CAAC;AAEF,eAAO,MAAM,uBAAuB,OAAQ,MAAM,KAAG,IAEpD,CAAC;AAEF,eAAO,MAAM,sBAAsB,cAAe,MAAM,KAAG,IAK1D,CAAC;AAEF,eAAO,MAAM,oBAAoB,QAAO,IAGvC,CAAC;AAEF,eAAO,MAAM,mBAAmB,mBAE/B,CAAC"}
+{"version":3,"file":"messageBox.d.ts","sourceRoot":"","sources":["../../../../src/modules/messageBox/messageBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,YAAY,EAAE,YAAY,EAAwB,MAAM,gBAAgB,CAAC;AAExF,OAAO,uCAAuC,CAAC;AAC/C,OAAO,wCAAwC,CAAC;AAQhD,eAAO,MAAM,+BAA+B,YAAa,YAAY,KAAG,IAEvE,CAAC;AAYF,eAAO,MAAM,iBAAiB,YAAa,YAAY,YAAY,YAAY,cAAc,MAAM,KAAG,IAGrG,CAAC;AAEF,eAAO,MAAM,cAAc,YAAa,YAAY,YAAY,YAAY,cAAc,MAAM,KAAG,IAGlG,CAAC;AAEF,eAAO,MAAM,cAAc,YAAa,YAAY,YAAY,YAAY,cAAc,MAAM,KAAG,IAGlG,CAAC;AAEF,eAAO,MAAM,eAAe,YAAa,YAAY,YAAY,YAAY,cAAc,MAAM,KAAG,IAInG,CAAC;AAEF,eAAO,MAAM,uBAAuB,OAAQ,MAAM,KAAG,IAEpD,CAAC;AAEF,eAAO,MAAM,sBAAsB,cAAe,MAAM,KAAG,IAK1D,CAAC;AAEF,eAAO,MAAM,oBAAoB,QAAO,IAGvC,CAAC;AAEF,eAAO,MAAM,mBAAmB,yBAE/B,CAAC"}

package/lib/esm/src/__mocks__/i18n.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, ComponentType } from 'react';
+declare const _default: {
+    withTranslation: () => (Component: ComponentType) => ComponentType<{}>;
+    Trans: () => ({ i18nKey, children }: ComponentProps<any>) => any;
+    useTranslation: () => {
+        t: (key: string) => string;
+        i18n: {
+            exists: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        };
+    };
+};
+export default _default;
+//# sourceMappingURL=i18n.d.ts.map

package/lib/esm/src/__mocks__/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../../src/__mocks__/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAE,aAAa,EAAC,MAAM,OAAO,CAAC;;uCAIhB,aAAa;yCAYzB,eAAe,GAAG,CAAC;;iBAGhC,MAAM;;;;;;AAhBjB,wBAqBE"}

package/lib/esm/src/__mocks__/i18n.js

@@ -0,0 +1,20 @@
+import { vi } from 'vitest';
+export default {
+    withTranslation: () => (Component) => {
+        Component.defaultProps = {
+            ...Component.defaultProps,
+            t: (key) => key,
+            i18n: {
+                language: 'de-DE'
+            }
+        };
+        return Component;
+    },
+    Trans: () => ({ i18nKey, children }) => i18nKey || children,
+    useTranslation: () => ({
+        t: (key) => key,
+        i18n: {
+            exists: vi.fn()
+        }
+    })
+};

package/lib/esm/src/components/chart/Chart.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+declare type Item = {
+    label: string;
+    value: number;
+};
+export declare type Props = {
+    /** 'pie' | 'column'*/
+    type: 'pie' | 'column';
+    /** title displayed above the chart*/
+    title?: string;
+    /** tooltip title displayed when the chart item is hovered */
+    tooltipTitle?: string;
+    /** array of pairs {label, value} displayed in chart */
+    items: Array<Item>;
+    /** Optional function allowing to set custom value formatter  */
+    valueFormatter?: (value: number) => string;
+    /** Optional click handler */
+    onClick?: (index: number) => void;
+    /** @ignore */
+    className?: string;
+    /** Optional function allowing to modify highcharts configuration */
+    updateOptions?: (options: Record<string, any>) => Record<string, any>;
+};
+/**
+ * Displays the provided data in form of the column chart or pie chart.
+ */
+export default class Chart extends React.Component<Props, Record<string, any>> {
+    state: Record<string, any>;
+    chart: any;
+    ro: ResizeObserver | null | undefined;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Props): void;
+    componentWillUnmount(): void;
+    handleChart: (chart: any) => void;
+    render(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=Chart.d.ts.map

package/lib/esm/src/components/chart/Chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/chart/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+D/B,aAAK,IAAI,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,KAAK,GAAG;IACnB,sBAAsB;IACtB,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAC;IAEvB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,uDAAuD;IACvD,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IAEnB,gEAAgE;IAChE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAE3C,6BAA6B;IAC7B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oEAAoE;IACpE,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACtE,CAAC;AAmBF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7E,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAM;IAChC,KAAK,EAAE,GAAG,CAAQ;IAClB,EAAE,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,CAAQ;IAE7C,iBAAiB;IAsCjB,kBAAkB,CAAC,SAAS,EAAE,KAAK;IAsEnC,oBAAoB;IAQpB,WAAW,UAAW,GAAG,UAMvB;IAEF,MAAM;CAaN"}

package/lib/esm/src/components/chart/Chart.js

@@ -0,0 +1,202 @@
+import * as React from 'react';
+import Highcharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+import { isEqual } from 'lodash';
+function createTooltip(header, name, value) {
+    return `<div>${header}</div><div>${name}: <strong>${value}</strong></div>`;
+}
+const initialOptions = {
+    global: {
+        useUTC: false
+    },
+    chart: {
+        style: {
+            fontFamily: 'arial'
+        },
+        plotBackgroundColor: null,
+        plotBorderWidth: 0,
+        plotShadow: false
+    },
+    credits: {
+        enabled: false
+    },
+    legend: {
+        align: 'right',
+        verticalAlign: 'center',
+        layout: 'vertical'
+    },
+    title: {
+        useHTML: true
+    },
+    plotOptions: {
+        pie: {
+            dataLabels: {
+                enabled: false
+            },
+            showInLegend: true,
+            startAngle: -90,
+            endAngle: 270
+        }
+    },
+    tooltip: {
+        useHTML: true,
+        formatter() {
+            return createTooltip('', this.point.name, this.point.y);
+        }
+    },
+    xAxis: {
+        type: 'category'
+    },
+    yAxis: {
+        min: 0,
+        title: {
+            text: ''
+        }
+    },
+    options: {
+        lgo: 123
+    }
+};
+const getClickConfiguration = (onClick) => {
+    return onClick
+        ? {
+            series: {
+                cursor: 'pointer',
+                point: {
+                    events: {
+                        click: function () {
+                            onClick(this.index);
+                        }
+                    }
+                }
+            }
+        }
+        : {};
+};
+/**
+ * Displays the provided data in form of the column chart or pie chart.
+ */
+export default class Chart extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {};
+        this.chart = null;
+        this.ro = null;
+        this.handleChart = (chart) => {
+            this.chart = chart;
+            this.ro = new ResizeObserver(() => {
+                this.chart?.reflow();
+            });
+            this.ro.observe(this.chart.renderTo);
+        };
+    }
+    componentDidMount() {
+        const { type, title, items, tooltipTitle, valueFormatter, onClick } = this.props;
+        this.setState({
+            ...initialOptions,
+            plotOptions: { ...initialOptions.plotOptions, ...getClickConfiguration(onClick) },
+            tooltip: {
+                ...initialOptions.tooltip,
+                formatter() {
+                    const format = valueFormatter || ((value) => value);
+                    return createTooltip(tooltipTitle || '', this.point.name, format(this.point.y));
+                }
+            },
+            legend: { ...initialOptions.legend, enabled: type === 'pie' },
+            yAxis: {
+                ...initialOptions.yAxis,
+                enabled: type === 'column',
+                title: {
+                    text: title || ''
+                }
+            },
+            series: [
+                {
+                    type,
+                    innerSize: '50%',
+                    data: items.map(({ label, value }) => [label, value])
+                }
+            ]
+        });
+        // Workaround of a bug: title must be set in the next cycle of the events loop to be positioned correctly.
+        setTimeout(() => {
+            this.setState({
+                title: { ...initialOptions.title, text: type === 'column' ? '' : title || '' }
+            });
+        }, 0);
+    }
+    componentDidUpdate(prevProps) {
+        const { type, title, items, tooltipTitle, valueFormatter, onClick } = this.props;
+        if (title !== prevProps.title) {
+            this.setState({
+                title: { ...this.state.title, text: type === 'column' ? '' : title || '' },
+                yAxis: {
+                    ...this.state.yAxis,
+                    title: {
+                        text: title || ''
+                    }
+                }
+            });
+        }
+        if (type !== prevProps.type) {
+            this.setState({
+                legend: { ...this.state.legend, enabled: type === 'pie' },
+                title: {
+                    text: type === 'column' ? '' : title || ''
+                },
+                yAxis: {
+                    ...this.state.yAxis,
+                    enabled: type === 'column',
+                    title: {
+                        text: type === 'column' ? title || '' : ''
+                    }
+                },
+                series: [
+                    {
+                        type,
+                        innerSize: '50%',
+                        data: items.map(({ label, value }) => [label, value])
+                    }
+                ]
+            });
+        }
+        if (!isEqual(items, prevProps.items)) {
+            this.setState({
+                series: [
+                    {
+                        type,
+                        innerSize: '50%',
+                        data: items.map(({ label, value }) => [label, value])
+                    }
+                ]
+            });
+        }
+        if (tooltipTitle !== prevProps.tooltipTitle ||
+            valueFormatter !== prevProps.valueFormatter ||
+            onClick !== prevProps.onClick) {
+            this.setState({
+                tooltip: {
+                    ...initialOptions.tooltip,
+                    formatter() {
+                        const format = valueFormatter || ((value) => value);
+                        return createTooltip(tooltipTitle || '', this.point.name, format(this.point.y));
+                    }
+                },
+                plotOptions: { ...initialOptions.plotOptions, ...getClickConfiguration(onClick) }
+            });
+        }
+    }
+    componentWillUnmount() {
+        if (this.ro && this.chart?.renderTo) {
+            this.ro.unobserve(this.chart.renderTo);
+        }
+        this.chart = null;
+        this.ro = null;
+    }
+    render() {
+        const options = this.props.updateOptions ? this.props.updateOptions(this.state) : this.state;
+        return (React.createElement(HighchartsReact, { highcharts: Highcharts, options: options, containerProps: {
+                className: this.props.className
+            }, callback: this.handleChart }));
+    }
+}

package/lib/esm/src/components/colorpicker/ColorPickerPopper.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Placement } from '@popperjs/core';
+declare type State = {
+    showPicker: boolean;
+};
+declare type Props = {
+    isOpen?: boolean;
+    onOpenStateChange?: (open: boolean) => void;
+    value?: string;
+    className?: string;
+    style?: Record<string, any>;
+    colorPicker: React.ReactNode;
+    direction?: Placement;
+};
+export default class ColorPickerPopper extends React.Component<Props, State> {
+    triggerRef: React.RefObject<HTMLDivElement>;
+    constructor(props: Props);
+    componentDidUpdate(prevProps: Props): void;
+    togglePicker: () => void;
+    handleHide(event: MouseEvent): void;
+    render(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=ColorPickerPopper.d.ts.map

package/lib/esm/src/components/colorpicker/ColorPickerPopper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPopper.d.ts","sourceRoot":"","sources":["../../../../../src/components/colorpicker/ColorPickerPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAMzC,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,aAAK,KAAK,GAAG;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IAC3E,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;gBAEhC,KAAK,EAAE,KAAK;IAaxB,kBAAkB,CAAC,SAAS,EAAE,KAAK;IASnC,YAAY,EAAE,MAAM,IAAI,CAYtB;IAEF,UAAU,CAAC,KAAK,EAAE,UAAU;IAM5B,MAAM;CA2BN"}

package/lib/esm/src/components/colorpicker/ColorPickerPopper.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Popup } from '@deviceinsight/ng-ui-basic-components';
+import { uuidV4 } from '../../modules/utils/uuidGen';
+export default class ColorPickerPopper extends React.Component {
+    constructor(props) {
+        super(props);
+        this.togglePicker = () => {
+            const { onOpenStateChange } = this.props;
+            this.setState({
+                showPicker: !this.state.showPicker
+            }, () => {
+                if (typeof onOpenStateChange === 'function') {
+                    onOpenStateChange(this.state.showPicker);
+                }
+            });
+        };
+        this.triggerRef = React.createRef();
+        this.state = {
+            showPicker: !!props.isOpen
+        };
+        this.handleHide = this.handleHide.bind(this);
+        this.togglePicker = this.togglePicker.bind(this);
+    }
+    componentDidUpdate(prevProps) {
+        const { isOpen } = this.props;
+        if (prevProps.isOpen !== isOpen) {
+            this.setState({
+                showPicker: !!isOpen
+            });
+        }
+    }
+    handleHide(event) {
+        if (this.triggerRef.current && !this.triggerRef.current.contains(event.target)) {
+            this.togglePicker();
+        }
+    }
+    render() {
+        const { value, style, colorPicker, className, direction } = this.props;
+        const { showPicker } = this.state;
+        const uniqueTriggerClass = `trigger-${uuidV4()}`;
+        return (React.createElement(Popup, { handler: React.createElement("div", { className: `di color-picker-popper ${className || ''}`, style: style },
+                React.createElement("div", { ref: this.triggerRef, className: `trigger ${uniqueTriggerClass}`, style: { ...style, backgroundColor: value } })), active: showPicker, onHandlerClick: this.togglePicker, onHide: this.handleHide, direction: direction },
+            React.createElement("div", { className: "color-picker-box" },
+                React.createElement("div", { className: "content" }, colorPicker))));
+    }
+}

package/lib/esm/src/components/colorpicker/GradientColorPicker.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="lodash" />
+import * as React from 'react';
+import { Placement } from '@popperjs/core';
+declare type GradientColorPickerState = {
+    isOpen: boolean;
+    hexValue: string;
+    rgbValue: string;
+};
+export declare type Props = {
+    /** if set to false, a popper component will be shown */
+    inline?: boolean;
+    /** the current value - only RGB(A) */
+    value?: string;
+    /** shows the opacity slider */
+    opacitySlider?: boolean;
+    /** how long to wait until onPick action is fired */
+    debounceTime?: number;
+    /** callback function that is executed when the user picks a color */
+    onPick: (color: string) => void;
+    /** if true and inline is false, the colorpicker popup will be shown on init */
+    isOpen?: boolean;
+    /** if a function is provided and inline is false, the function will be called when the popper open state changes */
+    onOpenStateChange?: (arg0: boolean) => void;
+    /** if true, the user can also add hex color via text input - cannot be used with opacity slider */
+    allowTextInput?: boolean;
+    /** styles for the popper component */
+    style?: React.CSSProperties;
+    /** styles for the colorpicker */
+    pickerStyle?: React.CSSProperties;
+    /** class for the popper component */
+    className?: string;
+    /** class for the colorpicker */
+    pickerClassName?: string;
+    /** where to align the popper component */
+    direction?: Placement;
+};
+/**
+ * The GradientColorPicker provides the functionality to generate any valid RGB color.
+ * This is especially useful for setting and defining a custom color.
+ */
+export default class GradientColorPicker extends React.Component<Props, GradientColorPickerState> {
+    static defaultProps: {
+        opacitySlider: boolean;
+        allowTextInput: boolean;
+        debounceTime: number;
+        inline: boolean;
+        popperAlignment: string;
+    };
+    static getDerivedStateFromProps(nextProps: any, state: GradientColorPickerState): {
+        isOpen: any | boolean;
+    };
+    state: GradientColorPickerState;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Props): void;
+    debouncedPickColor: import("lodash").DebouncedFunc<(color: string) => void>;
+    handleHexInputChange: (color: string | null, valid: boolean) => void;
+    handleRgbInputChange: (color: string | null, valid: boolean) => void;
+    handleOpenStateChange: (newOpenState: boolean) => void;
+    renderColorPicker(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=GradientColorPicker.d.ts.map

package/lib/esm/src/components/colorpicker/GradientColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientColorPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/colorpicker/GradientColorPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AASzC,aAAK,wBAAwB,GAAG;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,KAAK,GAAG;IACnB,wDAAwD;IACxD,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,+BAA+B;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,qEAAqE;IACrE,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhC,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,oHAAoH;IACpH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5C,mGAAmG;IACnG,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,sCAAsC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,iCAAiC;IACjC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAElC,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAcF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,wBAAwB,CAAC;IAChG,MAAM,CAAC,YAAY;;;;;;MAMjB;IAEF,MAAM,CAAC,wBAAwB,CAC9B,SAAS,EAAE,GAAG,EACd,KAAK,EAAE,wBAAwB,GAC7B;QACF,MAAM,EAAE,GAAG,GAAG,OAAO,CAAC;KACtB;IAOD,KAAK,EAAE,wBAAwB,CAI7B;IAEF,iBAAiB;IAQjB,kBAAkB,CAAC,SAAS,EAAE,KAAK;IAWnC,kBAAkB,yCAAoB,MAAM,WAGiC;IAE7E,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAWlE;IAEF,oBAAoB,UAAW,MAAM,GAAG,IAAI,SAAS,OAAO,UAU1D;IAEF,qBAAqB,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAUpD;IAEF,iBAAiB;IAuDjB,MAAM;CAoBN"}

package/lib/esm/src/components/colorpicker/GradientColorPicker.js

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { convert, parse } from 'pure-color';
+import classNames from 'classnames';
+import { debounce } from 'lodash';
+import { RgbaStringColorPicker, RgbStringColorPicker, HexColorPicker } from 'react-colorful';
+import ColorPickerPopper from './ColorPickerPopper';
+import ValidatedTextInput from '../input/ValidatedTextInput';
+const VALIDATE_HEX_COLOR_REGEX = /^#([A-Fa-f0-9]{6})$/;
+const VALIDATE_RGB_COLOR_REGEX = /^rgb\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/;
+const convertRgbaToRgb = (color) => {
+    return parse(color).splice(0, 3);
+};
+const convertToHex = (color) => {
+    return color && color.length > 6 ? convert.rgb.hex(convertRgbaToRgb(color)) : '';
+};
+const convertToRgb = (color) => {
+    return color ? convert.rgb.string(convertRgbaToRgb(color)) : '';
+};
+/**
+ * The GradientColorPicker provides the functionality to generate any valid RGB color.
+ * This is especially useful for setting and defining a custom color.
+ */
+export default class GradientColorPicker extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            isOpen: !!this.props.isOpen,
+            hexValue: '',
+            rgbValue: ''
+        };
+        this.debouncedPickColor = debounce((color) => {
+            const { onPick } = this.props;
+            onPick(color);
+        }, this.props.debounceTime || GradientColorPicker.defaultProps.debounceTime);
+        this.handleHexInputChange = (color, valid) => {
+            const { onPick } = this.props;
+            if (valid && color) {
+                onPick(color);
+            }
+            if (color)
+                this.setState({
+                    hexValue: color
+                });
+        };
+        this.handleRgbInputChange = (color, valid) => {
+            const { onPick } = this.props;
+            if (valid && color) {
+                onPick(color);
+            }
+            this.setState({
+                rgbValue: color || ''
+            });
+        };
+        this.handleOpenStateChange = (newOpenState) => {
+            const { onOpenStateChange } = this.props;
+            if (typeof onOpenStateChange === 'function') {
+                onOpenStateChange(newOpenState);
+            }
+            this.setState({
+                isOpen: newOpenState
+            });
+        };
+    }
+    static getDerivedStateFromProps(nextProps, state) {
+        const isControlledComponent = typeof nextProps.onOpenStateChange === 'function';
+        return {
+            isOpen: isControlledComponent ? nextProps.isOpen : state.isOpen
+        };
+    }
+    componentDidMount() {
+        const { value } = this.props;
+        this.setState({
+            hexValue: convertToHex(value),
+            rgbValue: convertToRgb(value)
+        });
+    }
+    componentDidUpdate(prevProps) {
+        const { value } = this.props;
+        if (prevProps.value !== value) {
+            this.setState({
+                hexValue: convertToHex(value),
+                rgbValue: convertToRgb(value)
+            });
+        }
+    }
+    renderColorPicker() {
+        const { hexValue, rgbValue } = this.state;
+        const { value, opacitySlider, pickerStyle = {}, allowTextInput, pickerClassName } = this.props;
+        const ColorPicker = value === hexValue
+            ? HexColorPicker
+            : opacitySlider && !allowTextInput
+                ? RgbaStringColorPicker
+                : RgbStringColorPicker;
+        return (React.createElement("div", { className: classNames('di gradient-color-picker', {
+                'with-textfield': allowTextInput
+            }, pickerClassName), style: pickerStyle },
+            React.createElement(ColorPicker, { color: value, onChange: this.debouncedPickColor }),
+            allowTextInput && (React.createElement("div", { className: "inputs" },
+                React.createElement(ValidatedTextInput, { value: hexValue, onChange: this.handleHexInputChange, pattern: VALIDATE_HEX_COLOR_REGEX, invalidStyle: {
+                        borderColor: 'red'
+                    }, placeholder: "#FF00FF", required: true, style: {
+                        width: 60
+                    } }),
+                React.createElement(ValidatedTextInput, { value: rgbValue, onChange: this.handleRgbInputChange, pattern: VALIDATE_RGB_COLOR_REGEX, invalidStyle: {
+                        borderColor: 'red'
+                    }, placeholder: "rgb(255,0,255)", required: true, style: {
+                        width: 115
+                    } })))));
+    }
+    render() {
+        const { style = {}, className, value, inline, direction } = this.props;
+        const { isOpen } = this.state;
+        if (inline === true) {
+            return this.renderColorPicker();
+        }
+        return (React.createElement(ColorPickerPopper, { className: className, style: style, value: value, colorPicker: this.renderColorPicker(), isOpen: isOpen, onOpenStateChange: this.handleOpenStateChange, direction: direction }));
+    }
+}
+GradientColorPicker.defaultProps = {
+    opacitySlider: false,
+    allowTextInput: false,
+    debounceTime: 200,
+    inline: true,
+    popperAlignment: 'top'
+};

package/lib/esm/src/components/colorpicker/GridColorPicker.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Placement } from '@popperjs/core';
+export declare type Props = {
+    /** if set to false, a popper component will be shown */
+    inline?: boolean;
+    /** the current value - only RGB(A) */
+    value?: string;
+    /** an array of colors, e.g. `['#88cc00', '#ffeb3c', '#fec107']` */
+    colors: Array<string>;
+    /** callback function that is executed when the user picks a color */
+    onPick: (color: string) => void;
+    /** if true and inline is false, the color picker popup will be shown on init */
+    isOpen?: boolean;
+    /** if a function is provided and inline is false, the function will be called when the popper open state changes */
+    onOpenStateChange?: (arg0: boolean) => void;
+    /** styles for the popper component */
+    style?: React.CSSProperties;
+    /** styles for the colorpicker */
+    pickerStyle?: React.CSSProperties;
+    /** class for the popper component */
+    className?: string;
+    /** class for the colorpicker */
+    pickerClassName?: string;
+    /** where to align the popper component */
+    direction?: Placement;
+};
+/**
+ * Unlike the GradientColorPicker, the GridColorPicker uses a predefined set of colors.
+ * The colors can be defined individually for each GridColorPicker and passed in as prop.
+ * Each line can take up to five cells.
+ * The cell width within the grid is then calculated automatically via the `styles` prop.
+ */
+export default class GridColorPicker extends React.Component<Props> {
+    static defaultProps: {
+        inline: boolean;
+        popperAlignment: string;
+    };
+    renderColorPicker(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=GridColorPicker.d.ts.map

package/lib/esm/src/components/colorpicker/GridColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridColorPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/colorpicker/GridColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,oBAAY,KAAK,GAAG;IACnB,wDAAwD;IACxD,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,mEAAmE;IACnE,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAEtB,qEAAqE;IACrE,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhC,gFAAgF;IAChF,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,oHAAoH;IACpH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5C,sCAAsC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,iCAAiC;IACjC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAElC,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IAClE,MAAM,CAAC,YAAY,EAAE;QACpB,MAAM,EAAE,OAAO,CAAC;QAChB,eAAe,EAAE,MAAM,CAAC;KACxB,CAGC;IAEF,iBAAiB;IAuBjB,MAAM;CAmBN"}