@deviceinsight/ng-ui-components 6.30.0 → 7.1.0

package/lib/cjs/components/chart/Chart.js

@@ -1,231 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const highcharts_1 = __importDefault(require("highcharts"));
-const highcharts_react_official_1 = __importDefault(require("highcharts-react-official"));
-const lodash_1 = require("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.
- */
-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 (!(0, lodash_1.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(highcharts_react_official_1.default, { highcharts: highcharts_1.default, options: options, containerProps: {
-                className: this.props.className
-            }, callback: this.handleChart }));
-    }
-}
-exports.default = Chart;

package/lib/cjs/components/colorpicker/ColorPickerPopper.d.ts

@@ -1,24 +0,0 @@
-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/cjs/components/colorpicker/ColorPickerPopper.d.ts.map

@@ -1 +0,0 @@
-{"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/cjs/components/colorpicker/ColorPickerPopper.js

@@ -1,72 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const ng_ui_basic_components_1 = require("@deviceinsight/ng-ui-basic-components");
-const uuidGen_1 = require("../../modules/utils/uuidGen");
-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-${(0, uuidGen_1.uuidV4)()}`;
-        return (React.createElement(ng_ui_basic_components_1.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))));
-    }
-}
-exports.default = ColorPickerPopper;

package/lib/cjs/components/colorpicker/GradientColorPicker.d.ts

@@ -1,63 +0,0 @@
-/// <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/cjs/components/colorpicker/GradientColorPicker.d.ts.map

@@ -1 +0,0 @@
-{"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/cjs/components/colorpicker/GradientColorPicker.js

@@ -1,154 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const pure_color_1 = require("pure-color");
-const classnames_1 = __importDefault(require("classnames"));
-const lodash_1 = require("lodash");
-const react_colorful_1 = require("react-colorful");
-const ColorPickerPopper_1 = __importDefault(require("./ColorPickerPopper"));
-const ValidatedTextInput_1 = __importDefault(require("../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 (0, pure_color_1.parse)(color).splice(0, 3);
-};
-const convertToHex = (color) => {
-    return color && color.length > 6 ? pure_color_1.convert.rgb.hex(convertRgbaToRgb(color)) : '';
-};
-const convertToRgb = (color) => {
-    return color ? pure_color_1.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.
- */
-class GradientColorPicker extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            isOpen: !!this.props.isOpen,
-            hexValue: '',
-            rgbValue: ''
-        };
-        this.debouncedPickColor = (0, lodash_1.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
-            ? react_colorful_1.HexColorPicker
-            : opacitySlider && !allowTextInput
-                ? react_colorful_1.RgbaStringColorPicker
-                : react_colorful_1.RgbStringColorPicker;
-        return (React.createElement("div", { className: (0, classnames_1.default)('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_1.default, { value: hexValue, onChange: this.handleHexInputChange, pattern: VALIDATE_HEX_COLOR_REGEX, invalidStyle: {
-                        borderColor: 'red'
-                    }, placeholder: "#FF00FF", required: true, style: {
-                        width: 60
-                    } }),
-                React.createElement(ValidatedTextInput_1.default, { 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_1.default, { className: className, style: style, value: value, colorPicker: this.renderColorPicker(), isOpen: isOpen, onOpenStateChange: this.handleOpenStateChange, direction: direction }));
-    }
-}
-exports.default = GradientColorPicker;
-GradientColorPicker.defaultProps = {
-    opacitySlider: false,
-    allowTextInput: false,
-    debounceTime: 200,
-    inline: true,
-    popperAlignment: 'top'
-};

package/lib/cjs/components/colorpicker/GridColorPicker.d.ts

@@ -1,41 +0,0 @@
-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/cjs/components/colorpicker/GridColorPicker.d.ts.map

@@ -1 +0,0 @@
-{"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"}

package/lib/cjs/components/colorpicker/GridColorPicker.js

@@ -1,36 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const ColorPickerPopper_1 = __importDefault(require("./ColorPickerPopper"));
-/**
- * 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.
- */
-class GridColorPicker extends react_1.default.Component {
-    renderColorPicker() {
-        const { value, colors, onPick, pickerStyle, pickerClassName } = this.props;
-        return (react_1.default.createElement("div", { className: (0, classnames_1.default)('di color-picker grid-color-picker clearfix', pickerClassName), style: pickerStyle }, colors.map((color) => (react_1.default.createElement("div", { key: color, onClick: () => {
-                onPick(color);
-            }, className: `color ${color === value ? 'selected' : ''}`, style: {
-                background: color
-            } })))));
-    }
-    render() {
-        const { style, className, value, inline, isOpen, onOpenStateChange, direction } = this.props;
-        if (inline) {
-            return this.renderColorPicker();
-        }
-        return (react_1.default.createElement(ColorPickerPopper_1.default, { className: className, style: style, value: value, colorPicker: this.renderColorPicker(), isOpen: isOpen, onOpenStateChange: onOpenStateChange, direction: direction }));
-    }
-}
-exports.default = GridColorPicker;
-GridColorPicker.defaultProps = {
-    inline: true,
-    popperAlignment: 'top'
-};

package/lib/cjs/components/contentHeader/ContentHeader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContentHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/contentHeader/ContentHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,oBAAY,KAAK,GAAG;IACnB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,GAAG,qBAAqB,CAAC;IAEtC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAC;IAE1C,qDAAqD;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,cAAc;IACd,sBAAsB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAEvC,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,aAAa,6FAOhB,KAAK,sBAoDP,CAAC;AAEF,eAAe,aAAa,CAAC"}