@deviceinsight/ng-ui-basic-components 3.13.0-SNAPSHOT

package/lib/esm/components/input/Checkbox.js

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { withTranslation } from 'react-i18next';
+const getWrapperClassName = (type, small) => {
+    switch (type) {
+        case 'checkbox':
+        case 'radio':
+            return 'di checkbox';
+        case 'toggle':
+            return small ? 'di toggle toggle-small' : 'di toggle';
+        default:
+            throw Error(`type not support: ${type}`);
+    }
+};
+const getCheckboxClassName = (type, small) => {
+    switch (type) {
+        case 'checkbox':
+            return 'box';
+        case 'radio':
+            return 'radio';
+        case 'toggle':
+            return small ? 'switch switch-small' : 'switch';
+        default:
+            throw Error(`type not support: ${type}`);
+    }
+};
+/**
+ * Checkbox for enabling user interaction can have one of multiple types which are defined via the `type` prop.
+ */
+const Checkbox = ({ type = 'checkbox', value, onChange, title, label, disabled = false, toggleSmall = false, toggleColor = '#259b23', t, ...other }) => {
+    const style = type === 'toggle'
+        ? {
+            backgroundColor: value ? toggleColor : 'gray'
+        }
+        : {};
+    const tooltip = title
+        ? t(title.id, {
+            defaultValue: title.defaultValue
+        })
+        : undefined;
+    const labelText = label
+        ? t(label.id, {
+            defaultValue: label.defaultValue
+        })
+        : null;
+    return (React.createElement("label", { title: tooltip, className: getWrapperClassName(type, toggleSmall), "data-testid": other['wrapper-data-testid'] },
+        React.createElement("input", { type: "checkbox", checked: value, disabled: disabled, onChange: () => onChange(!value), "data-testid": other['data-testid'] }),
+        React.createElement("div", { className: getCheckboxClassName(type, toggleSmall), style: style, "data-testid": other['innerdiv-data-testid'] }),
+        label && React.createElement("span", { className: "textlabel" }, labelText)));
+};
+export default withTranslation()(Checkbox);

package/lib/esm/components/input/SearchBox.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import '../../assets/search-box.css';
+import { CSSProperties } from 'react';
+import { TranslationDescriptor } from '../../types/i18n';
+export declare type Props = {
+    /** Placeholder text for input field `(string | TranslationDescriptor)` */
+    placeholder: string | TranslationDescriptor;
+    /** Function to call if the input changes */
+    onChange: (value: string) => void;
+    /** Function to call if the search is triggered (button press or return in search field) */
+    onSubmit?: (value: string) => void;
+    /** if true, a button is shown that clears the input */
+    clearable?: boolean;
+    /** Value that should initially be displayed in the text box */
+    initialValue: string | null | undefined;
+    /** Wrapper styles */
+    style: CSSProperties | undefined;
+};
+declare const _default: React.ComponentType<Props>;
+export default _default;
+//# sourceMappingURL=SearchBox.d.ts.map

package/lib/esm/components/input/SearchBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/components/input/SearchBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,6BAA6B,CAAC;AACrC,OAAO,EAAgB,aAAa,EAAC,MAAM,OAAO,CAAC;AAInD,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,oBAAY,KAAK,GAAG;IACnB,0EAA0E;IAC1E,WAAW,EAAE,MAAM,GAAG,qBAAqB,CAAC;IAE5C,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,+DAA+D;IAC/D,YAAY,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAExC,qBAAqB;IACrB,KAAK,EAAE,aAAa,GAAG,SAAS,CAAC;CACjC,CAAC;;AA2GF,wBAAoE"}

package/lib/esm/components/input/SearchBox.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { withTranslation } from 'react-i18next';
+import '../../assets/search-box.css';
+import Icon from '../icon/Icon';
+import Button from '../button/Button';
+const ClearButton = ({ onChange, inputElement, style }) => (React.createElement(Button, { naked: true, onClick: () => {
+        onChange('');
+        if (inputElement) {
+            inputElement.focus();
+        }
+    }, style: style },
+    React.createElement(Icon, { del: true })));
+/**
+ * SearchBox is used for searching content and provides a set of `props` for different user experiences
+ */
+class SearchBox extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            query: this.props.initialValue || ''
+        };
+        this.handleChange = (value) => {
+            const { onChange } = this.props;
+            this.setState({
+                query: value
+            });
+            onChange(value);
+        };
+        this.handleKeyUp = ({ key }) => {
+            const { onSubmit } = this.props;
+            const { query } = this.state;
+            if (key === 'Enter' && typeof onSubmit === 'function') {
+                onSubmit(query);
+            }
+        };
+    }
+    printPlaceholder() {
+        const { t, placeholder } = this.props;
+        if (typeof placeholder === 'object') {
+            return t(placeholder.id, {
+                defaultValue: placeholder.defaultValue
+            });
+        }
+        else {
+            return placeholder;
+        }
+    }
+    render() {
+        const { onSubmit, style, clearable } = this.props;
+        const { query } = this.state;
+        return (React.createElement("div", { className: "search-box", style: style },
+            React.createElement("input", { ref: (input) => (this.input = input), type: "text", value: query, placeholder: this.printPlaceholder(), onKeyUp: this.handleKeyUp, onChange: ({ target: { value } }) => this.handleChange(value) }),
+            typeof onSubmit === 'function' ? (React.createElement(React.Fragment, null,
+                query && clearable && (React.createElement(ClearButton, { onChange: this.handleChange, inputElement: this.input, style: {
+                        right: 30
+                    } })),
+                React.createElement(Button, { naked: true, onClick: () => onSubmit(query) },
+                    React.createElement(Icon, { search: true })))) : query && clearable ? (React.createElement(ClearButton, { onChange: this.handleChange, inputElement: this.input })) : (React.createElement(Button, { naked: true, disabled: true },
+                React.createElement(Icon, { search: true })))));
+    }
+}
+export default withTranslation()(SearchBox);

package/lib/esm/components/label/Label.d.ts

@@ -0,0 +1,23 @@
+import React, { MouseEventHandler, PropsWithChildren } from 'react';
+import { TranslationDescriptor } from '../../types/i18n';
+export interface Props extends React.HTMLAttributes<HTMLSpanElement> {
+    /** the label text, either a string or TranslationDescriptor */
+    text?: string | TranslationDescriptor;
+    /** a smaller label */
+    small?: boolean;
+    /** a larger label */
+    large?: boolean;
+    onClick?: MouseEventHandler<HTMLSpanElement>;
+    /** adds a delete button that triggers this callback function */
+    onDelete?: (...args: Array<any>) => any;
+    className?: string;
+    /** @ignore */
+    'data-testid'?: string;
+    /** @ignore */
+    'delete-button-data-testid'?: string;
+}
+/**
+ * Label enables an easy way for marking or tagging elements.
+ */
+export default function Label({ text, small, large, onDelete, className, onClick, children, ...dataTestIds }: PropsWithChildren<Props>): JSX.Element;
+//# sourceMappingURL=Label.d.ts.map

package/lib/esm/components/label/Label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAK9E,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACnE,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAC;IAEtC,sBAAsB;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,OAAO,CAAC,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC;IAE7C,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC;IAExC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,cAAc;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,cAAc;IACd,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC7B,IAAI,EACJ,KAAa,EACb,KAAa,EACb,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,WAAW,EACd,EAAE,iBAAiB,CAAC,KAAK,CAAC,eAoB1B"}

package/lib/esm/components/label/Label.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Trans } from 'react-i18next';
+import cx from 'classnames';
+import Icon from '../icon/Icon';
+/**
+ * Label enables an easy way for marking or tagging elements.
+ */
+export default function Label({ text, small = false, large = false, onDelete, className, onClick, children, ...dataTestIds }) {
+    function handleDelete(event) {
+        event.stopPropagation();
+        onDelete && onDelete();
+    }
+    return (React.createElement("span", { onClick: onClick, className: cx('di label', className, { large, small, removable: onDelete, clickable: !!onClick }), "data-testid": dataTestIds['data-testid'] },
+        typeof text === 'string' ? text : text && React.createElement(Trans, { i18nKey: text.id }, text.defaultValue),
+        React.createElement(React.Fragment, null, children),
+        onDelete && (React.createElement("span", { "data-testid": dataTestIds['delete-button-data-testid'], className: "remove", onClick: handleDelete },
+            React.createElement(Icon, { del: true, inverted: true })))));
+}

package/lib/esm/components/modal/Modal.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="node" />
+import React from 'react';
+export declare type Props = {
+    header?: React.ReactNode;
+    content?: React.ReactNode;
+    footer?: React.ReactNode;
+    /** the CSS width setting, either a number or string */
+    width?: string | number;
+    className?: string;
+    /** callback function that is executed when the users click outside the modal */
+    onOutsideClick?: (event?: Event) => void;
+    onMouseDown?: (event: React.SyntheticEvent<HTMLElement>) => void;
+};
+export default class Modal extends React.Component<Props, {
+    className: string;
+}> {
+    static defaultProps: {
+        width: string;
+    };
+    container: HTMLDivElement | undefined;
+    modalRoot: HTMLElement | null | undefined;
+    timeoutId: NodeJS.Timeout | undefined;
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    keyEventHandler: (event: KeyboardEvent) => void;
+    render(): React.ReactPortal | null;
+}
+//# sourceMappingURL=Modal.d.ts.map

package/lib/esm/components/modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,oBAAY,KAAK,GAAG;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gFAAgF;IAChF,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACjE,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,KAAK,CAAC,SAAS,CACjD,KAAK,EACL;IACC,SAAS,EAAE,MAAM,CAAC;CAClB,CACD;IACA,MAAM,CAAC,YAAY,EAAE;QACpB,KAAK,EAAE,MAAM,CAAC;KACd,CAEC;IACF,SAAS,EAAE,cAAc,GAAG,SAAS,CAAC;IACtC,SAAS,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,SAAS,EAAE,MAAM,CAAC,OAAO,GAAG,SAAS,CAAC;gBAE1B,KAAK,EAAE,KAAK;IAOxB,iBAAiB;IAwBjB,oBAAoB;IAkBpB,eAAe,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAI7C;IAEF,MAAM;CAYN"}

package/lib/esm/components/modal/Modal.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ModalWindow from '../modalComponents/ModalWindow';
+export default class Modal extends React.Component {
+    constructor(props) {
+        super(props);
+        this.keyEventHandler = (event) => {
+            if (event.key === 'Escape' && this.props.onOutsideClick) {
+                this.props.onOutsideClick(event);
+            }
+        };
+        this.state = {
+            className: 'di modal'
+        };
+    }
+    componentDidMount() {
+        this.container = document.createElement('div');
+        this.modalRoot = document.getElementById('modal-root');
+        if (this.modalRoot) {
+            this.modalRoot.appendChild(this.container);
+        }
+        else if (document.body) {
+            document.body.appendChild(this.container);
+        }
+        if (this.props.onOutsideClick) {
+            window.addEventListener('keydown', this.keyEventHandler);
+        }
+        // set the show class after 10ms for animation
+        this.timeoutId = setTimeout(() => this.setState({
+            className: `di modal show ${this.props.className || ''}`
+        }), 10);
+    }
+    componentWillUnmount() {
+        if (this.container) {
+            if (this.modalRoot) {
+                this.modalRoot.removeChild(this.container);
+            }
+            else if (document.body) {
+                document.body.removeChild(this.container);
+            }
+        }
+        if (this.props.onOutsideClick) {
+            window.removeEventListener('keydown', this.keyEventHandler);
+        }
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+        }
+    }
+    render() {
+        if (!this.container) {
+            return null;
+        }
+        return ReactDOM.createPortal(React.createElement("div", { className: this.state.className, onMouseDown: this.props.onMouseDown },
+            React.createElement(ModalWindow, { ...this.props })), this.container);
+    }
+}
+Modal.defaultProps = {
+    width: '60%'
+};

package/lib/esm/components/modalComponents/ModalContainer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare type Props = Record<string, never>;
+export default class ModalContainer extends React.PureComponent<Props> {
+    render(): JSX.Element;
+}
+//# sourceMappingURL=ModalContainer.d.ts.map

package/lib/esm/components/modalComponents/ModalContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/modalComponents/ModalContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,oBAAY,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE1C,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;IACrE,MAAM;CAGN"}

package/lib/esm/components/modalComponents/ModalContainer.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export default class ModalContainer extends React.PureComponent {
+    render() {
+        return React.createElement("div", { id: "modal-root" });
+    }
+}

package/lib/esm/components/modalComponents/ModalWindow.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Props } from '../modal/Modal';
+export default function ModalWindow({ className, width, header, content, footer, onOutsideClick }: Props): JSX.Element;
+//# sourceMappingURL=ModalWindow.d.ts.map

package/lib/esm/components/modalComponents/ModalWindow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalWindow.d.ts","sourceRoot":"","sources":["../../../../src/components/modalComponents/ModalWindow.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AAGrC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAC,EAAE,KAAK,eA0BrG"}

package/lib/esm/components/modalComponents/ModalWindow.js

@@ -0,0 +1,21 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Draggable from 'react-draggable';
+import useOutsideClick from '../../hooks/useOutsideClick';
+export default function ModalWindow({ className, width, header, content, footer, onOutsideClick }) {
+    const ref = useRef(null);
+    const [rootElement, setRootElement] = useState(null);
+    useEffect(() => {
+        setRootElement(ref.current);
+    }, []);
+    useOutsideClick([rootElement], () => {
+        if (onOutsideClick)
+            onOutsideClick();
+    });
+    return (React.createElement(Draggable, { handle: ".modal-header", nodeRef: ref },
+        React.createElement("div", { ref: ref, className: `modal-window ${className || ''}`, style: {
+                maxWidth: width
+            } },
+            header && React.createElement("div", { className: "modal-header" }, header),
+            content && React.createElement("div", { className: "modal-content" }, content),
+            footer && React.createElement("div", { className: "modal-footer" }, footer))));
+}

package/lib/esm/components/popup/Popup.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Modifier } from 'react-popper';
+export declare type PopupDirection = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
+export declare type Props = {
+    /** Element to toggle the Popup */
+    handler: React.ReactNode;
+    /** Content to be displayed */
+    children: React.ReactNode;
+    /** If true, displays the Popup's content */
+    active: boolean;
+    /** Function, executed when the Popup gets closed */
+    onHide: (event: MouseEvent) => void;
+    ignoredElements?: HTMLElement[];
+    /** (Optional) if set, sets the direction in which the content should be displayed */
+    direction?: PopupDirection;
+    /** (Optional) function, executed if the handler gets clicked */
+    onHandlerClick?: (event: React.SyntheticEvent<HTMLSpanElement>) => any;
+    /** @ignore */
+    className?: string;
+    /** (Optional) https://popper.js.org/popper-documentation.html#modifiers..preventOverflow */
+    modifiers?: Modifier<any>[];
+    /** (Optional) If set to true, the content is hidden via styles, but still exists in the DOM tree */
+    preventDestroyContentOnHide?: boolean;
+    /** (Optional) Class name of the handler wrapping element */
+    handlerWrapperClassName?: string;
+};
+/**
+ * Popup displays content within a small modal.
+ * Its usage is highly flexible and used in several other components.
+ */
+export default class Popup extends React.Component<Props> {
+    container: HTMLDivElement | undefined;
+    referenceHandler: React.RefObject<HTMLSpanElement>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=Popup.d.ts.map

package/lib/esm/components/popup/Popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../src/components/popup/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAU,QAAQ,EAAoB,MAAM,cAAc,CAAC;AAGlE,oBAAY,cAAc,GACvB,YAAY,GACZ,MAAM,GACN,UAAU,GACV,WAAW,GACX,KAAK,GACL,SAAS,GACT,aAAa,GACb,OAAO,GACP,WAAW,GACX,YAAY,GACZ,QAAQ,GACR,cAAc,GACd,UAAU,GACV,MAAM,GACN,YAAY,CAAC;AAEhB,oBAAY,KAAK,GAAG;IACnB,kCAAkC;IAClC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,8BAA8B;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,4CAA4C;IAC5C,MAAM,EAAE,OAAO,CAAC;IAEhB,oDAAoD;IACpD,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAEpC,eAAe,CAAC,EAAE,WAAW,EAAE,CAAC;IAEhC,qFAAqF;IACrF,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,gEAAgE;IAChE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,KAAK,GAAG,CAAC;IAEvE,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;IAE5B,oGAAoG;IACpG,2BAA2B,CAAC,EAAE,OAAO,CAAC;IAEtC,4DAA4D;IAC5D,uBAAuB,CAAC,EAAE,MAAM,CAAC;CACjC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACxD,SAAS,EAAE,cAAc,GAAG,SAAS,CAAC;IACtC,gBAAgB,mCAAsC;IAEtD,iBAAiB;IASjB,oBAAoB;IAMpB,MAAM;CAwEN"}

package/lib/esm/components/popup/Popup.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import classNames from 'classnames';
+import { Manager, Popper, Reference } from 'react-popper';
+import PopupArea from '../popupComponents/PopupArea';
+/**
+ * Popup displays content within a small modal.
+ * Its usage is highly flexible and used in several other components.
+ */
+export default class Popup extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.referenceHandler = React.createRef();
+    }
+    componentDidMount() {
+        const container = document.createElement('div');
+        if (document.body) {
+            document.body.appendChild(container);
+            this.container = container;
+        }
+    }
+    componentWillUnmount() {
+        if (document.body && this.container) {
+            document.body.removeChild(this.container);
+        }
+    }
+    render() {
+        const { handler, children, active, onHide, direction, className, onHandlerClick, modifiers, preventDestroyContentOnHide, handlerWrapperClassName, ...otherProps } = this.props;
+        const placement = direction ? direction : 'bottom';
+        return (React.createElement(Manager, null,
+            React.createElement(Reference, null, ({ ref }) => (React.createElement("span", { ref: ref, style: {
+                    display: 'inline-block'
+                }, className: handlerWrapperClassName },
+                React.createElement("span", { ref: this.referenceHandler, style: {
+                        display: 'inline-block',
+                        verticalAlign: 'bottom'
+                    }, onClick: onHandlerClick, className: handlerWrapperClassName }, handler)))),
+            (active || preventDestroyContentOnHide) &&
+                this.container &&
+                ReactDOM.createPortal(React.createElement(Popper, { ...otherProps, placement: placement, modifiers: modifiers }, ({ ref, style, placement, arrowProps }) => {
+                    return (React.createElement("span", { className: classNames('di popup-wrapper', {
+                            hidden: preventDestroyContentOnHide && !active
+                        }) },
+                        React.createElement(PopupArea, { ...(this.props.ignoredElements
+                                ? { ignoredElements: this.props.ignoredElements }
+                                : {}), referenceHandler: this.referenceHandler.current, popupAreaHandler: ref, placement: placement, style: style, onHide: onHide, visible: active, arrowProps: arrowProps, className: className }, children)));
+                }), this.container)));
+    }
+}

package/lib/esm/components/popupComponents/PopupArea.d.ts

@@ -0,0 +1,18 @@
+import { PropsWithChildren, ReactNode, Ref } from 'react';
+import { PopperArrowProps } from 'react-popper';
+import { PopupDirection } from '../popup/Popup';
+declare type Props = {
+    referenceHandler: HTMLElement | null;
+    popupAreaHandler: Ref<any>;
+    ignoredElements?: HTMLElement[];
+    style: Record<string, any>;
+    children: ReactNode;
+    placement: PopupDirection;
+    onHide: (event: MouseEvent) => void;
+    visible: boolean;
+    arrowProps: PopperArrowProps;
+    className?: string;
+};
+export default function PopupArea({ popupAreaHandler, ignoredElements, style, placement, className, arrowProps, children, visible, onHide }: PropsWithChildren<Props>): JSX.Element;
+export {};
+//# sourceMappingURL=PopupArea.d.ts.map

package/lib/esm/components/popupComponents/PopupArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupArea.d.ts","sourceRoot":"","sources":["../../../../src/components/popupComponents/PopupArea.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAW,MAAM,OAAO,CAAC;AACzE,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAG9C,aAAK,KAAK,GAAG;IACZ,gBAAgB,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,gBAAgB,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IAC3B,eAAe,CAAC,EAAE,WAAW,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,cAAc,CAAC;IAC1B,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EACjC,gBAAgB,EAChB,eAAoB,EACpB,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,OAAO,EACP,MAAM,EACN,EAAE,iBAAiB,CAAC,KAAK,CAAC,eAqB1B"}

package/lib/esm/components/popupComponents/PopupArea.js

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import useOutsideClick from '../../hooks/useOutsideClick';
+export default function PopupArea({ popupAreaHandler, ignoredElements = [], style, placement, className, arrowProps, children, visible, onHide }) {
+    const [rootElement, setRootElement] = useState(null);
+    useOutsideClick([rootElement, ...ignoredElements], (event) => {
+        if (visible) {
+            onHide(event);
+        }
+    });
+    return (React.createElement("div", { ref: (div) => {
+            setRootElement(div);
+            if (typeof popupAreaHandler === 'function')
+                popupAreaHandler(div);
+        }, style: style, className: `di popup ${placement} ${className ? className : ''}` },
+        React.createElement("div", { className: `popup-arrow ${placement}`, ref: arrowProps.ref, style: arrowProps.style }),
+        React.createElement("div", { className: "popup-content" }, children)));
+}

package/lib/esm/components/spinner/Spinner.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export declare type Props = {
+    /** the size of the Spinner in px */
+    size?: number;
+    /** @ignore */
+    center?: boolean;
+    /** @ignore */
+    'data-testid'?: string;
+};
+/**
+ * Spinners usually show a loading indication.
+ */
+export default class Spinner extends React.Component<Props> {
+    static defaultProps: {
+        size: number;
+        center: boolean;
+    };
+    render(): JSX.Element;
+}
+//# sourceMappingURL=Spinner.d.ts.map

package/lib/esm/components/spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,oBAAY,KAAK,GAAG;IACnB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,cAAc;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,cAAc;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IAC1D,MAAM,CAAC,YAAY;;;MAGjB;IAEF,MAAM;CAoBN"}

package/lib/esm/components/spinner/Spinner.js

@@ -0,0 +1,28 @@
+import React from 'react';
+/**
+ * Spinners usually show a loading indication.
+ */
+export default class Spinner extends React.Component {
+    render() {
+        const { size = 56, center, ...dataAttrs } = this.props;
+        let style = {
+            width: size,
+            height: size
+        };
+        if (center) {
+            style = {
+                ...style,
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                marginTop: -size / 2,
+                marginLeft: -size / 2
+            };
+        }
+        return React.createElement("div", { className: "di spinner", style: style, ...dataAttrs });
+    }
+}
+Spinner.defaultProps = {
+    size: 56,
+    center: false
+};

package/lib/esm/components/spinner/SpinnerContainer.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export declare type Props = {
+    /** controls the display of the Spinner */
+    show: boolean;
+    /** the size of the Spinner in px */
+    size?: number;
+    /** content to be rendered once the loading is done */
+    children?: React.ReactNode;
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    'data-testid'?: string;
+};
+/**
+ * SpinnerContainer wraps the entire content and displays a loading indicator until the loading is done.
+ */
+export default class SpinnerContainer extends React.Component<Props> {
+    static defaultProps: {
+        size: number;
+    };
+    render(): JSX.Element;
+}
+//# sourceMappingURL=SpinnerContainer.d.ts.map

package/lib/esm/components/spinner/SpinnerContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/spinner/SpinnerContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,oBAAY,KAAK,GAAG;IACnB,0CAA0C;IAC1C,IAAI,EAAE,OAAO,CAAC;IAEd,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,sDAAsD;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,cAAc;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACnE,MAAM,CAAC,YAAY,EAAE;QACpB,IAAI,EAAE,MAAM,CAAC;KACb,CAEC;IAEF,MAAM;CAcN"}

package/lib/esm/components/spinner/SpinnerContainer.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Spinner from './Spinner';
+/**
+ * SpinnerContainer wraps the entire content and displays a loading indicator until the loading is done.
+ */
+export default class SpinnerContainer extends React.Component {
+    render() {
+        const { show, size, children, className } = this.props;
+        const classNames = `di spinner-wrapper ${className ? className : ''}`;
+        return (React.createElement("div", { className: classNames },
+            React.createElement("div", { className: `di spinner-container ${show ? 'visible' : ''}`, "data-testid": this.props['data-testid'] },
+                React.createElement(Spinner, { size: size, center: true })),
+            children));
+    }
+}
+SpinnerContainer.defaultProps = {
+    size: 56
+};

package/lib/esm/components/tabs/Tabs.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+declare type Page = {
+    name: string;
+    renderHeading: () => React.ReactNode;
+    renderBody?: () => React.ReactNode;
+    tabDescription?: string;
+};
+declare type State = {
+    currentTab: string | null | undefined;
+};
+export declare type Props = {
+    /** Array of pages to be displayed */
+    pages: Array<Page>;
+    /** (Optional) if set, disables tab */
+    disabled?: boolean;
+    /** (Optional) function, executed if tabs change */
+    onChange?: (tab: string) => void;
+    /** (Optional) sets the current tab */
+    currentTab?: string | null | undefined;
+};
+/**
+ * Tabs add the possibility to unite several homogeneous pages into one.
+ * Unlike RouteTabs, Tabs cannot be accessed directly via the browser's history
+ */
+export default class Tabs extends React.Component<Props, State> {
+    state: State;
+    handleClick: (tab: string) => void;
+    currentTabPage: () => Page | null | undefined;
+    isCurrentTab: (tab: string) => boolean;
+    renderBody: () => React.ReactNode;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

package/lib/esm/components/tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,aAAK,IAAI,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CACtC,CAAC;AAEF,oBAAY,KAAK,GAAG;IACnB,qCAAqC;IACrC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IAEnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CACvC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IAC9D,KAAK,EAAE,KAAK,CAEV;IAEF,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAQhC;IAEF,cAAc,EAAE,MAAM,IAAI,GAAG,IAAI,GAAG,SAAS,CAG3C;IAEF,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAGpC;IAEF,UAAU,wBAQR;IAEF,MAAM;CAkCN"}