@deviceinsight/ng-ui-components 6.30.0 → 7.1.0

package/lib/esm/src/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/esm/src/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/esm/src/components/colorpicker/GradientColorPicker.js

@@ -1,125 +0,0 @@
-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

@@ -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/esm/src/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/esm/src/components/colorpicker/GridColorPicker.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import ColorPickerPopper from './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.
- */
-export default class GridColorPicker extends React.Component {
-    renderColorPicker() {
-        const { value, colors, onPick, pickerStyle, pickerClassName } = this.props;
-        return (React.createElement("div", { className: classNames('di color-picker grid-color-picker clearfix', pickerClassName), style: pickerStyle }, colors.map((color) => (React.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.createElement(ColorPickerPopper, { className: className, style: style, value: value, colorPicker: this.renderColorPicker(), isOpen: isOpen, onOpenStateChange: onOpenStateChange, direction: direction }));
-    }
-}
-GridColorPicker.defaultProps = {
-    inline: true,
-    popperAlignment: 'top'
-};

package/lib/esm/src/components/contentHeader/ContentHeader.d.ts

@@ -1,25 +0,0 @@
-import React from 'react';
-import { TranslationDescriptor } from '../../types/i18n';
-export declare type Props = {
-    /** title which is going to be displayed */
-    title: string | TranslationDescriptor;
-    /** (optional) subtitle which is going to be displayed */
-    subtitle?: string | TranslationDescriptor;
-    /** (optional) if set to true, enables back button */
-    parentPageLink?: boolean;
-    /** (optional) if set, navigates back got certain parent page */
-    subPagePathPrefix?: string;
-    /** @ignore */
-    subPagePathPrefixArray?: Array<string>;
-    /** (optional) renders additional components as children */
-    children?: React.ReactNode;
-};
-/**
- * `parentPageLink` set to true shows a back button to go to the parent page.
- * `subPagePathPrefix` needs to be used with `parentPageLink` set to true. It allows to customize what is considered the parent page.
- * With only the `parentPageLink` set to true the parent page is the direct parent, e.g. of `/assets/1234/conditions/5678` the parent is `/assets/1234/conditions`
- * To make the parent of e.g. `/assets/1234/conditions/edit/5678` the page `/assets/1234/conditions`, `subPagePathPrefix="/edit"` needs to be used.
- */
-declare const ContentHeader: ({ parentPageLink, title, subPagePathPrefixArray, subPagePathPrefix, subtitle, children }: Props) => React.JSX.Element;
-export default ContentHeader;
-//# sourceMappingURL=ContentHeader.d.ts.map

package/lib/esm/src/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"}

package/lib/esm/src/components/contentHeader/ContentHeader.js

@@ -1,53 +0,0 @@
-import React from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-import { useTranslation } from '../../i18n';
-import { Button } from '@deviceinsight/ng-ui-basic-components';
-import arrowBackIcon from '../../assets/img/icon-arrow-back.png';
-/**
- * `parentPageLink` set to true shows a back button to go to the parent page.
- * `subPagePathPrefix` needs to be used with `parentPageLink` set to true. It allows to customize what is considered the parent page.
- * With only the `parentPageLink` set to true the parent page is the direct parent, e.g. of `/assets/1234/conditions/5678` the parent is `/assets/1234/conditions`
- * To make the parent of e.g. `/assets/1234/conditions/edit/5678` the page `/assets/1234/conditions`, `subPagePathPrefix="/edit"` needs to be used.
- */
-const ContentHeader = ({ parentPageLink, title, subPagePathPrefixArray, subPagePathPrefix, subtitle, children }) => {
-    const { push } = useHistory();
-    const { pathname } = useLocation();
-    const { t } = useTranslation();
-    const goToParentPage = () => {
-        if (subPagePathPrefix) {
-            push(pathname.substring(0, pathname.lastIndexOf(subPagePathPrefix)));
-        }
-        else if (subPagePathPrefixArray) {
-            subPagePathPrefixArray.forEach((pathPrefix) => {
-                if (pathname.includes(pathPrefix)) {
-                    push(pathname.substring(0, pathname.lastIndexOf(pathPrefix)));
-                }
-            });
-        }
-        else {
-            push(pathname.substring(0, pathname.lastIndexOf('/')));
-        }
-    };
-    const printStringOrMessage = (stringOrMessage) => {
-        if (typeof stringOrMessage === 'string') {
-            return stringOrMessage;
-        }
-        else {
-            const { id, defaultValue } = stringOrMessage;
-            return t(id, {
-                defaultValue
-            });
-        }
-    };
-    return (React.createElement("h1", { className: "di header" },
-        parentPageLink && (React.createElement(Button, { onClick: goToParentPage, style: {
-                marginRight: '15px'
-            } },
-            React.createElement("img", { src: arrowBackIcon, alt: t('general.navigation.goBack', {
-                    defaultValue: 'Go Back'
-                }) }))),
-        React.createElement("span", null, printStringOrMessage(title)),
-        subtitle && React.createElement("span", { className: "search-result-count" }, printStringOrMessage(subtitle)),
-        children));
-};
-export default ContentHeader;

package/lib/esm/src/components/infobox/InfoBox.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import { TranslationDescriptor } from '../../types/i18n';
-export declare type Props = {
-    /** Color scheme type based on InfoBox purpose */
-    type?: 'info' | 'success' | 'warning' | 'error';
-    /** The message to display in the InfoBox */
-    message: TranslationDescriptor | string;
-    /** Optional icon of the InfoBox */
-    icon?: string;
-    /** Optional flag whether the InfoBox should be hideable */
-    hideable?: boolean;
-    /** Optional additional classnames for the parent div container */
-    className?: string;
-    /** Optional additional information to display under the info header */
-    children?: React.ReactNode;
-};
-/**
- * InfoBox is best used for highlighting information, especially if a warning and/or an error shall be displayed.
- */
-declare function InfoBox({ type, hideable, className, icon, message: inputMessage, children }: Props): React.JSX.Element | null;
-export default InfoBox;
-//# sourceMappingURL=InfoBox.d.ts.map

package/lib/esm/src/components/infobox/InfoBox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InfoBox.d.ts","sourceRoot":"","sources":["../../../../../src/components/infobox/InfoBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAQvD,oBAAY,KAAK,GAAG;IACnB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAEhD,4CAA4C;IAC5C,OAAO,EAAE,qBAAqB,GAAG,MAAM,CAAC;IAExC,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,iBAAS,OAAO,CAAC,EAAC,IAAa,EAAE,QAAgB,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAC,EAAE,KAAK,4BAwC1G;AAED,eAAe,OAAO,CAAC"}

package/lib/esm/src/components/infobox/InfoBox.js

@@ -1,36 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from '../../i18n';
-import { Icon } from '@deviceinsight/ng-ui-basic-components';
-const colors = {
-    info: '#ffffff',
-    success: '#cce0cc',
-    warning: '#fed254',
-    error: '#d66961'
-};
-/**
- * InfoBox is best used for highlighting information, especially if a warning and/or an error shall be displayed.
- */
-function InfoBox({ type = 'info', hideable = false, className, icon, message: inputMessage, children }) {
-    const [visible, setVisible] = useState(true);
-    const { t } = useTranslation();
-    function getMessage() {
-        if (typeof inputMessage !== 'string') {
-            const { id, defaultValue, ...rest } = inputMessage;
-            return t(id, { ...rest, defaultValue });
-        }
-        return inputMessage;
-    }
-    const message = getMessage();
-    return visible ? (React.createElement("div", { className: `infobox ${className ? className : ''}` },
-        React.createElement("div", { className: "infobox-header", style: {
-                backgroundColor: colors[type]
-            } },
-            React.createElement("div", { className: "infobox-header-content" },
-                icon && (React.createElement("div", { className: "infobox-iconcontainer" },
-                    React.createElement("img", { src: icon, alt: "info-icon", style: { width: 16, height: 16 } }))),
-                React.createElement("div", { className: "infobox-message" }, message)),
-            hideable && (React.createElement("button", { className: "infobox-closebutton", onClick: () => setVisible(false) },
-                React.createElement(Icon, { del: true, large: true })))),
-        children)) : null;
-}
-export default InfoBox;

package/lib/esm/src/components/input/DateInput.d.ts

@@ -1,30 +0,0 @@
-import React from 'react';
-import { ReactDatePickerProps } from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
-import '../../assets/react-datepicker-custom.css';
-declare type DateInputProps = {
-    /** the current value (millis since 1970-01-01 or formatted string) */
-    value: number | string | null | undefined;
-    /** (optional) timezone */
-    timezone?: string;
-    /** callback function that is executed when the user picks a date */
-    onChange: (date: number | null | undefined, fromTextField?: boolean) => void;
-    /** makes the input field clearable */
-    clearable?: boolean;
-    /** displays the date picker inline */
-    inline?: boolean;
-    /** displays the DateInput read only */
-    readOnly?: boolean;
-    /** (optional) class name for the wrapping elements */
-    wrapperClassName?: string;
-    /** (optional) locale, if not set, the i18next.language is taken */
-    locale?: string;
-};
-export declare type Props = Omit<ReactDatePickerProps, keyof DateInputProps> & DateInputProps;
-/**
- * DateInput is used to let users set a date conveniently.
- * Usually the user's locale is used for displaying the correct date format.
- */
-export default function DateInput({ value, clearable, inline, readOnly, wrapperClassName, onChange, locale, timezone, ...otherProps }: Props): React.JSX.Element;
-export {};
-//# sourceMappingURL=DateInput.d.ts.map

package/lib/esm/src/components/input/DateInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAmB,EAAC,oBAAoB,EAAiB,MAAM,kBAAkB,CAAC;AAalF,OAAO,4CAA4C,CAAC;AACpD,OAAO,0CAA0C,CAAC;AA0ClD,aAAK,cAAc,GAAG;IACrB,sEAAsE;IACtE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAE1C,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,KAAK,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,cAAc,CAAC,GAAG,cAAc,CAAC;AA2CtF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EACjC,KAAK,EACL,SAAS,EACT,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAyKP"}

package/lib/esm/src/components/input/DateInput.js

@@ -1,178 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
-import DatePicker, { registerLocale } from 'react-datepicker';
-import { debounce } from 'lodash';
-import dayjs from 'dayjs';
-import localeData from 'dayjs/plugin/localeData';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import i18n from 'i18next';
-import cx from 'classnames';
-import { useTranslation } from '../../i18n';
-import * as Locales from 'date-fns/locale';
-import { Button, Icon, Popup } from '@deviceinsight/ng-ui-basic-components';
-import 'react-datepicker/dist/react-datepicker.css';
-import '../../assets/react-datepicker-custom.css';
-import { isLocaleSupported } from '../../utils/dayjsLocales';
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(localeData);
-dayjs.extend(localizedFormat);
-dayjs.extend(customParseFormat);
-function registerLanguage(locale) {
-    const [localeSegment1, localeSegment2] = locale.split('-');
-    let module;
-    if (localeSegment1 && localeSegment2) {
-        // @ts-ignore
-        module = Locales[`${localeSegment1}${localeSegment2}`] ?? Locales[localeSegment1];
-    }
-    else if (localeSegment1) {
-        // @ts-ignore
-        module = Locales[localeSegment1];
-    }
-    else {
-        module = null;
-    }
-    if (module) {
-        registerLocale(locale, module);
-    }
-}
-async function changeDayjsLocale(locale) {
-    let dayjsLocale = null;
-    const [localeSegment1] = locale.split('-');
-    if (isLocaleSupported(locale.toLowerCase())) {
-        dayjsLocale = locale.toLowerCase();
-    }
-    else if (isLocaleSupported(localeSegment1.toLowerCase())) {
-        dayjsLocale = localeSegment1.toLowerCase();
-    }
-    if (dayjsLocale) {
-        dayjs.locale(dayjsLocale);
-    }
-}
-function isInputValid(value, pattern) {
-    if (value == null || value === '') {
-        return true;
-    }
-    if (typeof value === 'number') {
-        return !isNaN(value);
-    }
-    if (typeof value === 'string') {
-        return dayjs(value, pattern, true).isValid();
-    }
-    return false;
-}
-function inputToDate(value, pattern, timezone) {
-    if (typeof value === 'number') {
-        return new Date(value);
-    }
-    if (typeof value === 'string' && dayjs(value, pattern, true).isValid()) {
-        return dayjs.tz(value, pattern, timezone).toDate();
-    }
-    return null;
-}
-function inputToTzDate(value, pattern, timezone) {
-    if (typeof value === 'number') {
-        return dayjs.tz(value, timezone);
-    }
-    if (typeof value === 'string' && dayjs(value, pattern, true).isValid()) {
-        return dayjs.tz(value, pattern, timezone);
-    }
-    return null;
-}
-/**
- * DateInput is used to let users set a date conveniently.
- * Usually the user's locale is used for displaying the correct date format.
- */
-export default function DateInput({ value, clearable, inline, readOnly, wrapperClassName, onChange, locale, timezone, ...otherProps }) {
-    const [pattern, setPattern] = useState(dayjs.localeData().longDateFormat('L'));
-    const { t } = useTranslation();
-    const [valid, setValid] = useState(false);
-    const [popupActive, setPopupActive] = useState(false);
-    const [inputText, setInputText] = useState('');
-    const debouncedSetPopupActive = useMemo(() => debounce(setPopupActive, 30), []);
-    useEffect(() => {
-        const language = locale ?? i18n.language;
-        if (language) {
-            registerLanguage(language);
-            changeDayjsLocale(language).then(() => setPattern(dayjs.localeData().longDateFormat('L')));
-        }
-    }, [locale]);
-    const formattedDate = useCallback((value) => {
-        if (value == null || value == '') {
-            return '';
-        }
-        else if (!isInputValid(value, pattern)) {
-            return t('dateInput.invalidDate', {
-                defaultValue: 'invalid date'
-            });
-        }
-        else {
-            return typeof value === 'number' ? dayjs.tz(value, timezone).format(pattern) : value;
-        }
-    }, [pattern, t, timezone]);
-    useEffect(() => {
-        if (value == null) {
-            setInputText('');
-        }
-        else {
-            setInputText(formattedDate(value));
-        }
-    }, [formattedDate, value]);
-    useEffect(() => {
-        setValid(isInputValid(value, pattern));
-    }, [pattern, value]);
-    useEffect(() => {
-        dayjs.locale(locale ?? i18n.language);
-        setPattern(dayjs.localeData().longDateFormat('L'));
-    }, [locale]);
-    const handleInputTextChange = (text) => {
-        setInputText(text);
-        if (text) {
-            const valid = dayjs(text, pattern, true).isValid();
-            if (valid) {
-                const prevDate = inputToTzDate(value, pattern, timezone);
-                const newDate = dayjs.tz(text, pattern, timezone ?? dayjs.tz.guess());
-                if (prevDate) {
-                    newDate.set('hour', prevDate.hour());
-                    newDate.set('minute', prevDate.minute());
-                    newDate.set('second', prevDate.second());
-                    newDate.set('millisecond', prevDate.millisecond());
-                }
-                onChange(newDate.valueOf(), true);
-            }
-            setValid(valid);
-        }
-        else {
-            onChange(null, true);
-            setValid(true);
-        }
-    };
-    const handlePickerChange = (date) => {
-        onChange(date ? date.valueOf() : null);
-        setInputText(formattedDate(date ? date.getTime() : null));
-        handlePopupHide();
-    };
-    const handlePopupShow = () => setPopupActive(true);
-    const handlePopupHide = () => setPopupActive(false);
-    const handleClear = () => handleInputTextChange('');
-    if (inline) {
-        return (React.createElement(DatePicker, { ...otherProps, onChange: handlePickerChange, selected: inputToDate(value, pattern, timezone), locale: locale ?? i18n.language, isClearable: clearable, placeholderText: pattern, className: cx('date', { invalid: !valid }), inline: true }));
-    }
-    if (readOnly) {
-        return (React.createElement(DatePicker, { ...otherProps, onChange: () => { }, selected: inputToDate(value, pattern, timezone), locale: locale ?? i18n.language, customInput: React.createElement("span", null,
-                React.createElement("input", { type: "text", value: formattedDate(value), readOnly: true })), placeholderText: pattern, readOnly: true }));
-    }
-    return (React.createElement(Popup, { handler: React.createElement("span", { className: "di date-input-wrapper" },
-            React.createElement("input", { "data-testid": "date-input", className: cx('date', { invalid: !valid }), onChange: (e) => handleInputTextChange(e.target.value), value: inputText, placeholder: pattern, onClick: handlePopupShow, onFocus: handlePopupShow, onBlur: () => {
-                    handleInputTextChange(formattedDate(value));
-                    debouncedSetPopupActive(false);
-                } }),
-            clearable && (React.createElement(Button, { naked: true, small: true, onClick: handleClear },
-                React.createElement(Icon, { del: true })))), className: "date-input", handlerWrapperClassName: wrapperClassName, active: popupActive, onHide: handlePopupHide },
-        React.createElement("div", { className: "di date-picker-popup-wrapper", tabIndex: 0, onFocus: () => {
-                debouncedSetPopupActive(true);
-            } },
-            React.createElement(DatePicker, { ...otherProps, selected: inputToDate(value, pattern, timezone), onChange: handlePickerChange, locale: locale ?? i18n.language, isClearable: clearable, placeholderText: pattern, className: cx('date', { invalid: !valid }), inline: true }))));
-}