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

package/lib/cjs/components/confirm/withConfirm.js

@@ -0,0 +1,43 @@
+"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 react_i18next_1 = require("react-i18next");
+const useConfirm_1 = __importDefault(require("./useConfirm"));
+const ConfirmProvider_1 = __importDefault(require("./ConfirmProvider"));
+const utils_1 = require("./utils");
+function withConfirm(WrappedComponent) {
+    function WithConfirm(props) {
+        const confirm = (0, useConfirm_1.default)();
+        const { t } = (0, react_i18next_1.useTranslation)();
+        function trans(arg) {
+            if ((0, utils_1.isTranslationDescriptor)(arg)) {
+                return t(arg.id, { defaultValue: arg.defaultValue });
+            }
+            return arg;
+        }
+        async function deprecatedConfirm(title, message, acceptButtonLabel, declineButtonLabel, resolveWithConfirmation, acceptButtonStyle) {
+            const accepted = await confirm({
+                title: trans(title),
+                message: (0, utils_1.isTranslationDescriptor)(message) ? trans(message) : message,
+                acceptButtonLabel: acceptButtonLabel ? trans(acceptButtonLabel) : undefined,
+                declineButtonLabel: declineButtonLabel ? trans(declineButtonLabel) : undefined,
+                acceptButtonStyle
+            });
+            if (resolveWithConfirmation) {
+                return accepted;
+            }
+            else if (!accepted) {
+                return new Promise(() => { });
+            }
+        }
+        return react_1.default.createElement(WrappedComponent, { ...props, confirm: deprecatedConfirm });
+    }
+    return function WithConfirmWrapper(props) {
+        return (react_1.default.createElement(ConfirmProvider_1.default, null,
+            react_1.default.createElement(WithConfirm, { ...props })));
+    };
+}
+exports.default = withConfirm;

package/lib/cjs/components/icon/Icon.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export declare type Props = {
+    add?: boolean;
+    del?: boolean;
+    edit?: boolean;
+    config?: boolean;
+    duplicate?: boolean;
+    search?: boolean;
+    download?: boolean;
+    sync?: boolean;
+    fullscreen?: boolean;
+    star?: boolean;
+    /** key is reserved in React */
+    iconKey?: boolean;
+    documentation?: boolean;
+    /** renders a larger version of the icon (24x24) */
+    large?: boolean;
+    /** inverts the colors of the icon for display on dark background */
+    inverted?: boolean;
+    /** @ignore */
+    className?: string;
+};
+export default function Icon(props: Props): JSX.Element;
+//# sourceMappingURL=Icon.d.ts.map

package/lib/cjs/components/icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/Icon.tsx"],"names":[],"mappings":";AAeA,oBAAY,KAAK,GAAG;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAkEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,KAAK,eAYxC"}

package/lib/cjs/components/icon/Icon.js

@@ -0,0 +1,116 @@
+"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 icon_add_svg_1 = __importDefault(require("../../assets/svg/icon_add.svg"));
+const icon_cross_svg_1 = __importDefault(require("../../assets/svg/icon_cross.svg"));
+const icon_edit_svg_1 = __importDefault(require("../../assets/svg/icon_edit.svg"));
+const icon_gear_svg_1 = __importDefault(require("../../assets/svg/icon_gear.svg"));
+const icon_duplicate_svg_1 = __importDefault(require("../../assets/svg/icon_duplicate.svg"));
+const icon_download_svg_1 = __importDefault(require("../../assets/svg/icon_download.svg"));
+const icon_lupe_svg_1 = __importDefault(require("../../assets/svg/icon_lupe.svg"));
+const icon_key_svg_1 = __importDefault(require("../../assets/svg/icon_key.svg"));
+const icon_reload_svg_1 = __importDefault(require("../../assets/svg/icon_reload.svg"));
+const icon_fullscreen_svg_1 = __importDefault(require("../../assets/svg/icon_fullscreen.svg"));
+const icon_help_light_svg_1 = __importDefault(require("../../assets/svg/icon_help_light.svg"));
+const icon_star_svg_1 = __importDefault(require("../../assets/svg/icon_star.svg"));
+function getSrc(props) {
+    const { add, del, edit, config, duplicate, search, download, sync, fullscreen, iconKey, documentation, star } = props;
+    if (add) {
+        return icon_add_svg_1.default;
+    }
+    else if (del) {
+        return icon_cross_svg_1.default;
+    }
+    else if (edit) {
+        return icon_edit_svg_1.default;
+    }
+    else if (config) {
+        return icon_gear_svg_1.default;
+    }
+    else if (duplicate) {
+        return icon_duplicate_svg_1.default;
+    }
+    else if (search) {
+        return icon_lupe_svg_1.default;
+    }
+    else if (download) {
+        return icon_download_svg_1.default;
+    }
+    else if (sync) {
+        return icon_reload_svg_1.default;
+    }
+    else if (fullscreen) {
+        return icon_fullscreen_svg_1.default;
+    }
+    else if (iconKey) {
+        return icon_key_svg_1.default;
+    }
+    else if (documentation) {
+        return icon_help_light_svg_1.default;
+    }
+    else if (star) {
+        return icon_star_svg_1.default;
+    }
+    else {
+        throw Error('getSrc: no icon type specified');
+    }
+}
+function getAlt(props) {
+    const { add, del, edit, config, duplicate, search, download, sync, fullscreen, iconKey, documentation, star } = props;
+    if (add) {
+        return 'icon add';
+    }
+    else if (del) {
+        return 'icon delete';
+    }
+    else if (edit) {
+        return 'icon edit';
+    }
+    else if (config) {
+        return 'icon config';
+    }
+    else if (duplicate) {
+        return 'icon duplicate';
+    }
+    else if (search) {
+        return 'icon search';
+    }
+    else if (download) {
+        return 'icon download';
+    }
+    else if (sync) {
+        return 'icon sync';
+    }
+    else if (fullscreen) {
+        return 'icon fullscreen';
+    }
+    else if (iconKey) {
+        return 'icon iconKey';
+    }
+    else if (documentation) {
+        return 'icon documentation';
+    }
+    else if (star) {
+        return 'icon star';
+    }
+    else {
+        throw Error('getAlt: no icon type specified');
+    }
+}
+function Icon(props) {
+    let style;
+    if (props.large) {
+        style = { width: 24, height: 24 };
+    }
+    else {
+        style = { width: 16, height: 16 };
+    }
+    if (props.inverted) {
+        style = { ...style, filter: 'invert(1)' };
+    }
+    return react_1.default.createElement("img", { src: getSrc(props), className: `di icon ${props.className || ''}`, alt: getAlt(props), style: style });
+}
+exports.default = Icon;

package/lib/cjs/components/input/Checkbox.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { TranslationDescriptor } from '../../types/i18n';
+export declare type Props = {
+    /** input type selector */
+    type?: 'checkbox' | 'radio' | 'toggle';
+    /** Flag to preselect the status of the checkbox */
+    value: boolean;
+    /** Function, executed when toggling the checkbox */
+    onChange: (nextStatus: boolean) => void;
+    /** Optional input element tooltip */
+    title?: TranslationDescriptor;
+    /** Optional label for checkbox and radio button*/
+    label?: TranslationDescriptor;
+    /** visually indicate that the checkbox is disabled and disable onChange handler */
+    disabled?: boolean;
+    /** Optional flag for toggle type: Render a small Toggle */
+    toggleSmall?: boolean;
+    /** Optional flag for toggle type: Sets the slider color when the Toggle is truthy */
+    toggleColor?: string;
+    /** @ignore */
+    'data-testid'?: string;
+    /** @ignore */
+    'wrapper-data-testid'?: string;
+    /** @ignore */
+    'innerdiv-data-testid'?: string;
+};
+declare const _default: React.ComponentType<Props>;
+export default _default;
+//# sourceMappingURL=Checkbox.d.ts.map

package/lib/cjs/components/input/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/input/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,oBAAY,KAAK,GAAG;IACnB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;IAEvC,mDAAmD;IACnD,KAAK,EAAE,OAAO,CAAC;IAEf,oDAAoD;IACpD,QAAQ,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC,qCAAqC;IACrC,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAE9B,kDAAkD;IAClD,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAE9B,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,qFAAqF;IACrF,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,cAAc;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,cAAc;IACd,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B,cAAc;IACd,sBAAsB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;;AAqFF,wBAAyE"}

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

@@ -0,0 +1,75 @@
+"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 react_i18next_1 = require("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)));
+};
+exports.default = (0, react_i18next_1.withTranslation)()(Checkbox);

package/lib/cjs/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/cjs/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/cjs/components/input/SearchBox.js

@@ -0,0 +1,90 @@
+"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 react_i18next_1 = require("react-i18next");
+require("../../assets/search-box.css");
+const Icon_1 = __importDefault(require("../icon/Icon"));
+const Button_1 = __importDefault(require("../button/Button"));
+const ClearButton = ({ onChange, inputElement, style }) => (React.createElement(Button_1.default, { naked: true, onClick: () => {
+        onChange('');
+        if (inputElement) {
+            inputElement.focus();
+        }
+    }, style: style },
+    React.createElement(Icon_1.default, { 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_1.default, { naked: true, onClick: () => onSubmit(query) },
+                    React.createElement(Icon_1.default, { search: true })))) : query && clearable ? (React.createElement(ClearButton, { onChange: this.handleChange, inputElement: this.input })) : (React.createElement(Button_1.default, { naked: true, disabled: true },
+                React.createElement(Icon_1.default, { search: true })))));
+    }
+}
+exports.default = (0, react_i18next_1.withTranslation)()(SearchBox);

package/lib/cjs/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/cjs/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/cjs/components/label/Label.js

@@ -0,0 +1,24 @@
+"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 react_i18next_1 = require("react-i18next");
+const classnames_1 = __importDefault(require("classnames"));
+const Icon_1 = __importDefault(require("../icon/Icon"));
+/**
+ * Label enables an easy way for marking or tagging elements.
+ */
+function Label({ text, small = false, large = false, onDelete, className, onClick, children, ...dataTestIds }) {
+    function handleDelete(event) {
+        event.stopPropagation();
+        onDelete && onDelete();
+    }
+    return (react_1.default.createElement("span", { onClick: onClick, className: (0, classnames_1.default)('di label', className, { large, small, removable: onDelete, clickable: !!onClick }), "data-testid": dataTestIds['data-testid'] },
+        typeof text === 'string' ? text : text && react_1.default.createElement(react_i18next_1.Trans, { i18nKey: text.id }, text.defaultValue),
+        react_1.default.createElement(react_1.default.Fragment, null, children),
+        onDelete && (react_1.default.createElement("span", { "data-testid": dataTestIds['delete-button-data-testid'], className: "remove", onClick: handleDelete },
+            react_1.default.createElement(Icon_1.default, { del: true, inverted: true })))));
+}
+exports.default = Label;

package/lib/cjs/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/cjs/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/cjs/components/modal/Modal.js

@@ -0,0 +1,65 @@
+"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 react_dom_1 = __importDefault(require("react-dom"));
+const ModalWindow_1 = __importDefault(require("../modalComponents/ModalWindow"));
+class Modal extends react_1.default.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 react_dom_1.default.createPortal(react_1.default.createElement("div", { className: this.state.className, onMouseDown: this.props.onMouseDown },
+            react_1.default.createElement(ModalWindow_1.default, { ...this.props })), this.container);
+    }
+}
+exports.default = Modal;
+Modal.defaultProps = {
+    width: '60%'
+};

package/lib/cjs/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/cjs/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/cjs/components/modalComponents/ModalContainer.js

@@ -0,0 +1,12 @@
+"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"));
+class ModalContainer extends react_1.default.PureComponent {
+    render() {
+        return react_1.default.createElement("div", { id: "modal-root" });
+    }
+}
+exports.default = ModalContainer;

package/lib/cjs/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/cjs/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/cjs/components/modalComponents/ModalWindow.js

@@ -0,0 +1,50 @@
+"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_1 = __importStar(require("react"));
+const react_draggable_1 = __importDefault(require("react-draggable"));
+const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
+function ModalWindow({ className, width, header, content, footer, onOutsideClick }) {
+    const ref = (0, react_1.useRef)(null);
+    const [rootElement, setRootElement] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        setRootElement(ref.current);
+    }, []);
+    (0, useOutsideClick_1.default)([rootElement], () => {
+        if (onOutsideClick)
+            onOutsideClick();
+    });
+    return (react_1.default.createElement(react_draggable_1.default, { handle: ".modal-header", nodeRef: ref },
+        react_1.default.createElement("div", { ref: ref, className: `modal-window ${className || ''}`, style: {
+                maxWidth: width
+            } },
+            header && react_1.default.createElement("div", { className: "modal-header" }, header),
+            content && react_1.default.createElement("div", { className: "modal-content" }, content),
+            footer && react_1.default.createElement("div", { className: "modal-footer" }, footer))));
+}
+exports.default = ModalWindow;