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

package/lib/cjs/assets/svg/triangle_right.svg

@@ -0,0 +1,3 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <polygon points="10 8.04 6 4 6 12.08 10 8.04"/>
+</svg>

package/lib/cjs/assets/svg/triangle_up.svg

@@ -0,0 +1,3 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <polygon points="7.5 6 4 10 11 10 7.5 6"/>
+</svg>

package/lib/cjs/assets/svg/triangle_up_and_down.svg

@@ -0,0 +1,4 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <polygon id="triangle_up" data-name="triangle up" points="7.5 3 4 7 11 7 7.5 3"/>
+  <polygon id="triangle_down" data-name="triangle down" points="7.5 13 4 9 11 9 7.5 13"/>
+</svg>

package/lib/cjs/components/accordion/Accordion.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export declare type Props = {
+    /** Should contain Array of <AccordionItems/> elements */
+    children?: Array<React.ReactNode>;
+    /** (Optional) sets additional class for styling purposes */
+    accordionClass?: string;
+    /** Function to be called if active &lt;AccordionItems/&gt; gets changed */
+    onPageChange?: (newPageNumber: number) => any;
+    /** (Optional) Index of the &lt;AccordionItem/&gt; which should be opened on initial render cycle */
+    defaultOpenPageIndex?: number;
+};
+declare type State = {
+    currentPageIndex: number;
+};
+/**
+ * Accordions are best used to display homogenous information, e.g. multiple configurations which would take up a lot of space otherwise.
+ */
+export default class Accordion extends React.Component<Props, State> {
+    state: State;
+    componentDidMount(): void;
+    handleAccordionToggle: (index: number) => void;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=Accordion.d.ts.map

package/lib/cjs/components/accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,oBAAY,KAAK,GAAG;IACnB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAElC,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,GAAG,CAAC;IAE9C,oGAAoG;IACpG,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,aAAK,KAAK,GAAG;IACZ,gBAAgB,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACnE,KAAK,EAAE,KAAK,CAEV;IAEF,iBAAiB;IAQjB,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAU5C;IAEF,MAAM;CAoBN"}

package/lib/cjs/components/accordion/Accordion.js

@@ -0,0 +1,60 @@
+"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"));
+/**
+ * Accordions are best used to display homogenous information, e.g. multiple configurations which would take up a lot of space otherwise.
+ */
+class Accordion extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            currentPageIndex: -1
+        };
+        this.handleAccordionToggle = (index) => {
+            const { onPageChange } = this.props;
+            const newPageIndex = this.state.currentPageIndex !== index ? index : -1;
+            this.setState({
+                currentPageIndex: newPageIndex
+            });
+            if (onPageChange) {
+                onPageChange(newPageIndex);
+            }
+        };
+    }
+    componentDidMount() {
+        const { defaultOpenPageIndex } = this.props;
+        if (defaultOpenPageIndex !== null && defaultOpenPageIndex !== undefined) {
+            this.handleAccordionToggle(defaultOpenPageIndex);
+        }
+    }
+    render() {
+        const { children, accordionClass } = this.props;
+        const { currentPageIndex } = this.state;
+        return (React.createElement("div", { className: accordionClass ? `di accordion ${accordionClass}` : 'di accordion' }, children &&
+            children.map((child, index) => child ? (React.createElement(child.type, { key: index, index: index, isOpen: currentPageIndex === index, toggle: () => this.handleAccordionToggle(index), ...child.props })) : null)));
+    }
+}
+exports.default = Accordion;

package/lib/cjs/components/accordionComponents/AccordionItem.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+declare type Info = {
+    text: string;
+    cssStyle: Record<string, any>;
+};
+export declare type Props = {
+    /** (Optional) Displays either numeric- or text-based badge in front of the &lt;AccordionItems/&gt; */
+    badge?: (number | string | React.ReactNode) | null | undefined;
+    /** @ignore */
+    children?: React.ReactNode;
+    /** (Optional) Displays additional information, which is visible in "closed" state */
+    info1?: Info;
+    /** If true, expands &lt;AccordionItems/&gt; */
+    isOpen?: boolean;
+    /** (Optional) Sets additional classes for styling purposes */
+    itemClasses?: string;
+    /** Title of &lt;AccordionItems/&gt; */
+    title: string | React.ReactNode;
+    /** (Optional) Tooltip of &lt;AccordionItems/&gt; */
+    titleTooltip?: string;
+    /** Function which is called to open/close &lt;AccordionItems/&gt; */
+    toggle?: () => void;
+    /** (Optional) Enables additional handler, e.g., for editing or deleting &lt;AccordionItems/&gt; */
+    tools?: Array<React.ReactNode>;
+    /** @ignore */
+    'data-testid'?: string | undefined;
+};
+export default class AccordionItem extends React.PureComponent<Props> {
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=AccordionItem.d.ts.map

package/lib/cjs/components/accordionComponents/AccordionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/accordionComponents/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,aAAK,IAAI,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC9B,CAAC;AAEF,oBAAY,KAAK,GAAG;IACnB,sGAAsG;IACtG,KAAK,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAE/D,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,qFAAqF;IACrF,KAAK,CAAC,EAAE,IAAI,CAAC;IAEb,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,uCAAuC;IACvC,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAEhC,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,mGAAmG;IACnG,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAE/B,cAAc;IACd,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACnC,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;IACpE,MAAM;CAsCN"}

package/lib/cjs/components/accordionComponents/AccordionItem.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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+class AccordionItem extends React.PureComponent {
+    render() {
+        const { badge, children, isOpen, info1, itemClasses, title, titleTooltip, toggle, tools, ...rest } = this.props;
+        const accordionItemClasses = ['item'];
+        if (itemClasses)
+            accordionItemClasses.push(itemClasses);
+        if (isOpen)
+            accordionItemClasses.push('open');
+        return (React.createElement("div", { className: accordionItemClasses.join(' ') },
+            React.createElement("div", { className: "head" },
+                React.createElement("span", { className: "title", onClick: toggle, "data-testid": rest['data-testid'] },
+                    React.createElement("h1", { title: titleTooltip }, title),
+                    badge && (React.createElement("span", { className: "di label", style: {
+                            margin: '0 0 0 10px',
+                            backgroundColor: '#ddd',
+                            borderColor: 'transparent'
+                        } }, badge)),
+                    info1 && React.createElement("span", { style: info1.cssStyle }, info1.text)),
+                React.createElement("span", { className: "tools" }, tools &&
+                    tools.map((toolComponent, index) => (React.createElement("span", { key: index, className: "tool" }, toolComponent))))),
+            React.createElement("div", { className: "cont" }, children)));
+    }
+}
+exports.default = AccordionItem;

package/lib/cjs/components/bubble/Bubble.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { PopupDirection } from '../popup/Popup';
+export declare type Props = {
+    /** the Bubble content */
+    content: React.ReactNode;
+    /** inverts the colors */
+    inverted?: boolean;
+    /** @ignore */
+    children: React.ReactNode;
+    /** @ignore */
+    style?: React.CSSProperties;
+    /** @ignore */
+    className?: string;
+    /** hides the bubble */
+    disabled?: boolean;
+    /** changed the direction */
+    direction?: PopupDirection;
+};
+declare type State = {
+    active: boolean;
+};
+/**
+ * Bubbles are best used to provide some additional information like short instructions or help texts, which are then going to be displayed on Mouse-Over.
+ */
+export default class Bubble extends React.Component<Props, State> {
+    static defaultProps: {
+        inverted: boolean;
+    };
+    state: State;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=Bubble.d.ts.map

package/lib/cjs/components/bubble/Bubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bubble.d.ts","sourceRoot":"","sources":["../../../../src/components/bubble/Bubble.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAc,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAErD,oBAAY,KAAK,GAAG;IACnB,yBAAyB;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,cAAc;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,aAAK,KAAK,GAAG;IACZ,MAAM,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IAChE,MAAM,CAAC,YAAY,EAAE;QACpB,QAAQ,EAAE,OAAO,CAAC;KAClB,CAEC;IAEF,KAAK,EAAE,KAAK,CAEV;IAEF,gBAAgB,aAQd;IAEF,gBAAgB,aAId;IAEF,MAAM;CAmBN"}

package/lib/cjs/components/bubble/Bubble.js

@@ -0,0 +1,42 @@
+"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 Popup_1 = __importDefault(require("../popup/Popup"));
+/**
+ * Bubbles are best used to provide some additional information like short instructions or help texts, which are then going to be displayed on Mouse-Over.
+ */
+class Bubble extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            active: false
+        };
+        this.handleMouseEnter = () => {
+            const { disabled } = this.props;
+            if (!disabled) {
+                this.setState({
+                    active: true
+                });
+            }
+        };
+        this.handleMouseLeave = () => {
+            this.setState({
+                active: false
+            });
+        };
+    }
+    render() {
+        const { content, inverted, children, style, direction, className } = this.props;
+        const { active } = this.state;
+        return (react_1.default.createElement("span", { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave },
+            react_1.default.createElement(Popup_1.default, { active: active, onHide: () => { }, handler: children, direction: direction ? direction : 'top', onHandlerClick: () => { }, className: `bubble ${inverted ? 'inverted' : ''} ${className ? className : ''}` },
+                react_1.default.createElement("span", { className: `bubble-content`, style: style }, content))));
+    }
+}
+exports.default = Bubble;
+Bubble.defaultProps = {
+    inverted: false
+};

package/lib/cjs/components/button/Button.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { TranslationDescriptor } from '../../types/i18n';
+export declare type Props = {
+    /** primary style, mutually exclusive with _danger_ and _naked_ */
+    primary?: boolean;
+    /** danger style, mutually exclusive with _primary_ and _naked_ */
+    danger?: boolean;
+    /** render the button without border and background color, mutually exclusive with _primary_ and _danger_ */
+    naked?: boolean;
+    /** a title tooltip */
+    title?: (TranslationDescriptor | null | undefined) | string;
+    /** button | submit | reset */
+    type?: 'button' | 'submit' | 'reset';
+    /** a click handler */
+    onClick?: (...args: Array<any>) => any;
+    /** a smaller button */
+    small?: boolean;
+    /** disable the button */
+    disabled?: boolean;
+    /** @ignore */
+    children?: React.ReactNode;
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    style?: React.CSSProperties;
+    /** @ignore */
+    'data-testid'?: string;
+    /** @ignore */
+    tabIndex?: number;
+};
+declare const _default: React.ComponentType<Props>;
+export default _default;
+//# sourceMappingURL=Button.d.ts.map

package/lib/cjs/components/button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,oBAAY,KAAK,GAAG;IACnB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,kEAAkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,4GAA4G;IAC5G,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,sBAAsB;IACtB,KAAK,CAAC,EAAE,CAAC,qBAAqB,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,MAAM,CAAC;IAE5D,8BAA8B;IAC9B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAErC,sBAAsB;IACtB,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC;IAEvC,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,cAAc;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,cAAc;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;;AA6CF,wBAAiE"}

package/lib/cjs/components/button/Button.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const react_i18next_1 = require("react-i18next");
+/**
+ * Buttons are used to inform the user about a potential user interaction, which then on interaction causes an action.
+ * To create a standardized look and feel, different props can be passed to the Button.
+ */
+function Button({ children, title, type, disabled, onClick, style, tabIndex, t, primary, danger, naked, className, small, ...rest }) {
+    let btnTitle = title;
+    if (title && typeof title !== 'string') {
+        btnTitle = t(title.id, {
+            defaultValue: title.defaultValue
+        });
+    }
+    return (react_1.default.createElement("button", { "data-testid": rest['data-testid'], type: type || 'button', className: (0, classnames_1.default)('di button', className, { small, primary, danger, link: naked }), title: typeof btnTitle === 'string' ? btnTitle : undefined, disabled: disabled, onClick: onClick, style: style, tabIndex: tabIndex }, children));
+}
+exports.default = (0, react_i18next_1.withTranslation)()(Button);

package/lib/cjs/components/button/ButtonRow.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export declare type Props = {
+    /** should contain <Button /> elements */
+    children: React.ReactNode;
+    /** show a horizontal row above the buttons */
+    dividing?: boolean;
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    style?: React.CSSProperties;
+};
+/**
+ * ButtonRows align Buttons nicely for all relevant and/or related user actions such as saving or canceling changes.
+ * To separate the ButtonRow from the content, the extra property `dividing` can be used.
+ */
+declare const ButtonRow: {
+    ({ children, dividing, className, style }: Props): JSX.Element;
+    defaultProps: {
+        dividing: boolean;
+    };
+};
+export default ButtonRow;
+//# sourceMappingURL=ButtonRow.d.ts.map

package/lib/cjs/components/button/ButtonRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonRow.d.ts","sourceRoot":"","sources":["../../../../src/components/button/ButtonRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,oBAAY,KAAK,GAAG;IACnB,+CAA+C;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,SAAS;+CAA4C,KAAK;;;;CAI/D,CAAC;AAMF,eAAe,SAAS,CAAC"}

package/lib/cjs/components/button/ButtonRow.js

@@ -0,0 +1,35 @@
+"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"));
+/**
+ * ButtonRows align Buttons nicely for all relevant and/or related user actions such as saving or canceling changes.
+ * To separate the ButtonRow from the content, the extra property `dividing` can be used.
+ */
+const ButtonRow = ({ children, dividing, className, style }) => (React.createElement("div", { style: style, className: `di button-row ${dividing ? 'dividing' : ''} ${className || ''}` }, children));
+ButtonRow.defaultProps = {
+    dividing: false
+};
+exports.default = ButtonRow;

package/lib/cjs/components/confirm/Confirm.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { TranslationDescriptor } from '../../types/i18n';
+export declare type Props = {
+    title: string | TranslationDescriptor;
+    message: string | React.ReactElement | TranslationDescriptor;
+    /** @ignore */
+    onAccept: (...args: Array<any>) => any;
+    /** @ignore */
+    onDecline: (...args: Array<any>) => any;
+    acceptButtonLabel?: string | TranslationDescriptor;
+    declineButtonLabel?: string | TranslationDescriptor;
+    acceptButtonStyle?: 'primary' | 'danger';
+};
+/**
+ * Confirm enables the possibility to open up a dialog within a modal, requiring additional user actions.
+ * This component should not be used directly, instead use `@withConfirm` to inject a promise based confirm method
+ */
+export default function Confirm({ title, message, onAccept, onDecline, acceptButtonLabel, declineButtonLabel, acceptButtonStyle }: Props): JSX.Element;
+//# sourceMappingURL=Confirm.d.ts.map

package/lib/cjs/components/confirm/Confirm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confirm.d.ts","sourceRoot":"","sources":["../../../../src/components/confirm/Confirm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAGvD,oBAAY,KAAK,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,qBAAqB,CAAC;IACtC,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,GAAG,qBAAqB,CAAC;IAE7D,cAAc;IACd,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC;IAEvC,cAAc;IACd,SAAS,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC;IACxC,iBAAiB,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAC;IACnD,kBAAkB,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAC;IACpD,iBAAiB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CACzC,CAAC;AAWF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,kBAAkB,EAClB,iBAA6B,EAC7B,EAAE,KAAK,eA6BP"}

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

@@ -0,0 +1,49 @@
+"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");
+const Modal_1 = __importDefault(require("../modal/Modal"));
+const Button_1 = __importDefault(require("../button/Button"));
+const utils_1 = require("./utils");
+function transformTextToElement(message) {
+    if ((0, utils_1.isTranslationDescriptor)(message)) {
+        return React.createElement(react_i18next_1.Trans, { i18nKey: message.id }, message.defaultValue);
+    }
+    return message;
+}
+/**
+ * Confirm enables the possibility to open up a dialog within a modal, requiring additional user actions.
+ * This component should not be used directly, instead use `@withConfirm` to inject a promise based confirm method
+ */
+function Confirm({ title, message, onAccept, onDecline, acceptButtonLabel, declineButtonLabel, acceptButtonStyle = 'primary' }) {
+    return (React.createElement(Modal_1.default, { header: transformTextToElement(title), content: transformTextToElement(message), footer: React.createElement("div", null,
+            React.createElement(Button_1.default, { primary: acceptButtonStyle === 'primary', danger: acceptButtonStyle === 'danger', onClick: onAccept }, acceptButtonLabel ? (transformTextToElement(acceptButtonLabel)) : (React.createElement(react_i18next_1.Trans, { i18nKey: "form.accept" }, "Accept"))),
+            React.createElement(Button_1.default, { onClick: onDecline }, declineButtonLabel ? (transformTextToElement(declineButtonLabel)) : (React.createElement(react_i18next_1.Trans, { i18nKey: "form.decline" }, "Decline")))), width: 500 }));
+}
+exports.default = Confirm;

package/lib/cjs/components/confirm/ConfirmProvider.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+declare type ConfirmOptions = {
+    title: string;
+    message: string | React.ReactElement;
+    acceptButtonLabel?: string;
+    declineButtonLabel?: string;
+    acceptButtonStyle?: 'primary' | 'danger';
+};
+export declare const ConfirmContext: React.Context<{
+    confirm: (options: ConfirmOptions) => Promise<boolean>;
+}>;
+declare function ConfirmProvider({ children }: React.PropsWithChildren<Record<string, unknown>>): JSX.Element;
+export default ConfirmProvider;
+//# sourceMappingURL=ConfirmProvider.d.ts.map

package/lib/cjs/components/confirm/ConfirmProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/confirm/ConfirmProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAIrD,aAAK,cAAc,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IACrC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,cAAc;uBACP,cAAc,KAAK,QAAQ,OAAO,CAAC;EAGrD,CAAC;AAEH,iBAAS,eAAe,CAAC,EAAC,QAAQ,EAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,eAgCpF;AAED,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,63 @@
+"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 });
+exports.ConfirmContext = void 0;
+const react_1 = __importStar(require("react"));
+const Confirm_1 = __importDefault(require("./Confirm"));
+exports.ConfirmContext = (0, react_1.createContext)({
+    confirm: () => Promise.reject(new Error('ConfirmProvider is missing!'))
+});
+function ConfirmProvider({ children }) {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [confirmProps, setConfirmProps] = (0, react_1.useState)({
+        title: '',
+        message: '',
+        onAccept: () => { },
+        onDecline: () => { }
+    });
+    async function confirm(options) {
+        return new Promise((resolve) => {
+            setVisible(true);
+            setConfirmProps({
+                ...options,
+                onAccept: () => {
+                    setVisible(false);
+                    resolve(true);
+                },
+                onDecline: () => {
+                    setVisible(false);
+                    resolve(false);
+                }
+            });
+        });
+    }
+    return (react_1.default.createElement(exports.ConfirmContext.Provider, { value: { confirm } },
+        children,
+        visible && react_1.default.createElement(Confirm_1.default, { ...confirmProps })));
+}
+exports.default = ConfirmProvider;

package/lib/cjs/components/confirm/useConfirm.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export default function useConfirm(): (options: {
+    title: string;
+    message: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    acceptButtonLabel?: string | undefined;
+    declineButtonLabel?: string | undefined;
+    acceptButtonStyle?: "primary" | "danger" | undefined;
+}) => Promise<boolean>;
+//# sourceMappingURL=useConfirm.d.ts.map

package/lib/cjs/components/confirm/useConfirm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfirm.d.ts","sourceRoot":"","sources":["../../../../src/components/confirm/useConfirm.ts"],"names":[],"mappings":";AAIA,MAAM,CAAC,OAAO,UAAU,UAAU;;;;;;uBAOjC"}

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const ConfirmProvider_1 = require("./ConfirmProvider");
+function useConfirm() {
+    const context = (0, react_1.useContext)(ConfirmProvider_1.ConfirmContext);
+    if (!context) {
+        throw new Error('ConfirmProvider is missing');
+    }
+    const { confirm } = context;
+    return confirm;
+}
+exports.default = useConfirm;

package/lib/cjs/components/confirm/utils.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TranslationDescriptor } from '../../types/i18n';
+export declare function isTranslationDescriptor(arg: TranslationDescriptor | string | React.ReactElement): arg is TranslationDescriptor;
+//# sourceMappingURL=utils.d.ts.map

package/lib/cjs/components/confirm/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/confirm/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,wBAAgB,uBAAuB,CACtC,GAAG,EAAE,qBAAqB,GAAG,MAAM,GAAG,KAAK,CAAC,YAAY,GACtD,GAAG,IAAI,qBAAqB,CAW9B"}

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isTranslationDescriptor = void 0;
+function isTranslationDescriptor(arg) {
+    const result = typeof arg === 'object' && typeof arg.id === 'string' && typeof arg.defaultValue === 'string';
+    if (result) {
+        console.warn('Please use strings instead of TranslationDescriptors to initialize the Confirm modal, because TranslationDescriptors are deprecated');
+    }
+    return result;
+}
+exports.isTranslationDescriptor = isTranslationDescriptor;

package/lib/cjs/components/confirm/withConfirm.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TranslationDescriptor } from '../../types/i18n';
+export declare type ConfirmProps = {
+    confirm: (title: string | TranslationDescriptor, message: string | TranslationDescriptor | React.ReactElement, acceptButtonLabel?: string | TranslationDescriptor, declineButtonLabel?: string | TranslationDescriptor, resolveWithConfirmation?: boolean, acceptButtonStyle?: 'primary' | 'danger') => Promise<void | boolean>;
+};
+export default function withConfirm<P>(WrappedComponent: React.ComponentType<P & ConfirmProps>): (props: P) => JSX.Element;
+//# sourceMappingURL=withConfirm.d.ts.map

package/lib/cjs/components/confirm/withConfirm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withConfirm.d.ts","sourceRoot":"","sources":["../../../../src/components/confirm/withConfirm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAKvD,oBAAY,YAAY,GAAG;IAC1B,OAAO,EAAE,CACR,KAAK,EAAE,MAAM,GAAG,qBAAqB,EACrC,OAAO,EAAE,MAAM,GAAG,qBAAqB,GAAG,KAAK,CAAC,YAAY,EAC5D,iBAAiB,CAAC,EAAE,MAAM,GAAG,qBAAqB,EAClD,kBAAkB,CAAC,EAAE,MAAM,GAAG,qBAAqB,EACnD,uBAAuB,CAAC,EAAE,OAAO,EACjC,iBAAiB,CAAC,EAAE,SAAS,GAAG,QAAQ,KACpC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;CAC7B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,EAAE,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,YAAY,CAAC,WAsCnD,CAAC,iBAO3C"}