@rio-cloud/rio-uikit 1.11.0 → 1.12.0

package/lib/es/src/components/dialog/FrameDialog.d.ts

@@ -0,0 +1,31 @@
+import { type DialogSize } from './Dialog';
+export declare const DEFAULT_PREFIX = "EVENT_FRAME_DIALOG";
+export declare const OPEN_DIALOG_EVENT = "_OPEN_DIALOG";
+export declare const CLOSE_DIALOG_EVENT = "_CLOSE_DIALOG";
+export type DialogOptions = {
+    bsSize?: DialogSize;
+    showXsDialogBorders?: boolean;
+};
+export type OPEN_DIALOG_EVENT_TYPE = {
+    src: string;
+    dialogProps?: DialogOptions;
+};
+export type FrameDialogProps = {
+    /**
+     * A prefix for all event types.
+     *
+     * @default 'EVENT_FRAME_DIALOG'
+     */
+    eventPrefix?: string;
+    /**
+     * A function to retrieve the iframe DOM element so a message can be sent to it. This is required
+     * when sending messages back to the origin widget iframe that triggered the dialog in the first place.
+     */
+    getSourceFrame?: () => HTMLIFrameElement | null;
+    /**
+     * Additional classes for the modal element.
+     */
+    className?: string;
+};
+declare const FrameDialog: (props: FrameDialogProps) => import("react/jsx-runtime").JSX.Element;
+export default FrameDialog;

package/lib/es/src/components/dialog/FrameDialog.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CLOSE_DIALOG_EVENT = exports.OPEN_DIALOG_EVENT = exports.DEFAULT_PREFIX = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+const react_1 = require("react");
+const iframe_resizer_react_1 = tslib_1.__importDefault(require("iframe-resizer-react"));
+const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
+const usePostMessage_1 = tslib_1.__importDefault(require("../../hooks/usePostMessage"));
+exports.DEFAULT_PREFIX = 'EVENT_FRAME_DIALOG';
+exports.OPEN_DIALOG_EVENT = '_OPEN_DIALOG';
+exports.CLOSE_DIALOG_EVENT = '_CLOSE_DIALOG';
+const FrameDialog = (props) => {
+    const { eventPrefix = exports.DEFAULT_PREFIX, className = '', getSourceFrame = () => undefined } = props;
+    const openDialogEvent = `${eventPrefix}${exports.OPEN_DIALOG_EVENT}`;
+    const closeDialogEvent = `${eventPrefix}${exports.CLOSE_DIALOG_EVENT}`;
+    const [showDialog, setShowDialog] = (0, react_1.useState)(false);
+    const [remoteDialogUrl, setRemoteDialogUrl] = (0, react_1.useState)('');
+    const [dialogProps, setDialogProps] = (0, react_1.useState)({});
+    const { sendMessageToWidget } = (0, usePostMessage_1.default)(eventPrefix, (remoteAction) => {
+        console.log(remoteAction);
+        if (remoteAction.type === openDialogEvent) {
+            setShowDialog(true);
+            setRemoteDialogUrl(remoteAction.payload.src);
+            setDialogProps(remoteAction.payload.dialogProps);
+        }
+        else if (remoteAction.type === closeDialogEvent) {
+            setShowDialog(false);
+            // Forward messages from dialog back to widget
+            const widgetFrame = getSourceFrame();
+            if (widgetFrame) {
+                sendMessageToWidget({
+                    type: closeDialogEvent,
+                    payload: remoteAction.payload,
+                }, [widgetFrame]);
+            }
+        }
+    });
+    const dialogClassName = `frame-dialog ${className}`;
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { ...dialogProps, show: showDialog, bodyClassName: 'padding-2 rounded min-height-200', body: (0, jsx_runtime_1.jsx)(iframe_resizer_react_1.default, { src: remoteDialogUrl, className: 'unstyled width-100pct' }), 
+        // Note: closing the dialog with escape is disabled by default.
+        // The widget would need to handle the 'esc' event and send a message to close it
+        disableEsc: true, className: dialogClassName }));
+};
+exports.default = FrameDialog;

package/lib/es/src/components/dialog/InfoDialog.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import Dialog from './Dialog';
+export type InfoDialogProps = React.ComponentPropsWithoutRef<typeof Dialog> & {
+    /**
+     * The content of the dialog body itself.
+     */
+    content: string | React.ReactNode;
+};
+declare const InfoDialog: (props: InfoDialogProps) => import("react/jsx-runtime").JSX.Element;
+export default InfoDialog;

package/lib/es/src/components/dialog/InfoDialog.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
+const InfoDialog = (props) => {
+    const { content, className, ...remainingProps } = props;
+    const dialogClassName = `${className ? className : ''} info-dialog`;
+    return (0, jsx_runtime_1.jsx)(Dialog_1.default, { ...remainingProps, body: content, className: dialogClassName });
+};
+exports.default = InfoDialog;

package/lib/es/src/components/dialog/MediaDialog.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import { type BaseDialogProps } from './Dialog';
+export type MediaDialogMedia = {
+    /**
+     * Defines the media type that is going to be displayed.
+     *
+     * Possible values are: `image` and `video`.
+     */
+    type: 'image' | 'video';
+    /**
+     * The source location for the media data.
+     */
+    src: string;
+    /**
+     * The name or title of the media used for the dialogs title.
+     */
+    title: string | React.ReactNode;
+    /**
+     * Additional media information used for the dialogs subtitle.
+     */
+    subtitle?: string | React.ReactNode;
+    /**
+     * Only relevant for videos where the aspect of the video is defined.
+     *
+     * Possible values are: `4by3` and `16by9`.
+     * @default '16by9'
+     */
+    aspectRatio?: '4by3' | '16by9';
+    /**
+     * Additional classes for the image element.
+     */
+    className?: string;
+};
+export type MediaDialogProps = BaseDialogProps & {
+    /**
+     * List of media objects.
+     */
+    media: MediaDialogMedia[];
+    /**
+     * The button text for switching to the previous media if there are multiple.
+     */
+    previousButtonText: string | React.ReactNode;
+    /**
+     * Callback function for when the previous button is clicked.
+     * @param newIndex
+     * @returns
+     */
+    previousButtonCallback?: (newIndex: number) => void;
+    /**
+     * The button text for switching to the next media if there are multiple.
+     */
+    nextButtonText: string | React.ReactNode;
+    /**
+     * Callback function for when the next button is clicked.
+     * @param newIndex
+     * @returns
+     */
+    nextButtonCallback?: (newIndex: number) => void;
+};
+declare const MediaDialog: {
+    (props: MediaDialogProps): import("react/jsx-runtime").JSX.Element;
+    MEDIA_TYPE_IMAGE: "image";
+    MEDIA_TYPE_VIDEO: "video";
+};
+export default MediaDialog;

package/lib/es/src/components/dialog/MediaDialog.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
+const ResponsiveVideo_1 = tslib_1.__importDefault(require("../video/ResponsiveVideo"));
+const ImagePreloader_1 = tslib_1.__importDefault(require("../preloader/ImagePreloader"));
+const Spinner_1 = tslib_1.__importDefault(require("../spinner/Spinner"));
+const MediaDialog = (props) => {
+    const { show = false, onClose = noop_1.default, disableEsc = false, useOverflow = false, bsSize = 'lg', media = [], previousButtonText = 'Prev', previousButtonCallback = noop_1.default, nextButtonText = 'Next', nextButtonCallback = noop_1.default, className, ...remainingProps } = props;
+    const [currentMediaIndex, setCurrentMediaIndex] = (0, react_1.useState)(0);
+    const handlePrevious = () => {
+        const oldIndex = currentMediaIndex;
+        const newIndex = oldIndex === 0 ? props.media.length - 1 : oldIndex - 1;
+        setCurrentMediaIndex(newIndex);
+        previousButtonCallback(newIndex);
+    };
+    const handleNext = () => {
+        const oldIndex = currentMediaIndex;
+        const newIndex = oldIndex === props.media.length - 1 ? 0 : oldIndex + 1;
+        setCurrentMediaIndex(newIndex);
+        nextButtonCallback(newIndex);
+    };
+    const renderFallback = () => {
+        return ((0, jsx_runtime_1.jsx)("div", { className: 'text-center text-size-h3', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-missing text-size-200pct text-color-gray' }) }));
+    };
+    const renderImage = (mediaData) => {
+        const imageClassNames = (0, classnames_1.default)('img-responsive', mediaData.className && mediaData.className);
+        return (
+        // @ts-ignore
+        (0, jsx_runtime_1.jsx)(ImagePreloader_1.default, { src: mediaData.src, className: imageClassNames, children: ({ status, image }) => {
+                if (status === ImagePreloader_1.default.STATUS_LOADED) {
+                    // When image has been loaded, render the image tag
+                    return (0, jsx_runtime_1.jsx)("img", { className: 'ani-fade-in', src: image.src }, image.src);
+                }
+                if (status === ImagePreloader_1.default.STATUS_FAILED) {
+                    return renderFallback();
+                }
+                return (0, jsx_runtime_1.jsx)(Spinner_1.default, { isInverse: false });
+            } }));
+    };
+    const renderVideo = (mediaData) => {
+        const videoClassNames = (0, classnames_1.default)(mediaData.className && mediaData.className);
+        return ((0, jsx_runtime_1.jsx)("div", { className: 'flex-1-0', children: (0, jsx_runtime_1.jsx)(ResponsiveVideo_1.default, { src: mediaData.src, aspectRatio: mediaData.aspectRatio ?? '16by9', className: videoClassNames }) }));
+    };
+    const renderMediaContent = (mediaData = {}) => {
+        if (mediaData.type === MediaDialog.MEDIA_TYPE_VIDEO) {
+            return renderVideo(mediaData);
+        }
+        // image media is default
+        return mediaData.src && renderImage(mediaData);
+    };
+    const dialogClassName = (0, classnames_1.default)('media-dialog', className && className);
+    const bodyClassNames = (0, classnames_1.default)('padding-0');
+    const mediaContentClassNames = (0, classnames_1.default)('media-content', 'content-center');
+    const mediaTitle = media[currentMediaIndex].title;
+    const mediaSubtitle = media[currentMediaIndex].subtitle || null;
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { ...remainingProps, show: show, title: mediaTitle, subtitle: mediaSubtitle, body: (0, jsx_runtime_1.jsx)("div", { className: mediaContentClassNames, children: renderMediaContent(media[currentMediaIndex]) }), footer: media?.length > 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { type: 'button', className: 'btn btn-primary btn-link pull-left', onClick: handlePrevious, children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }), previousButtonText] }), (0, jsx_runtime_1.jsx)("div", { children: `${currentMediaIndex + 1} / ${props.media.length}` }), (0, jsx_runtime_1.jsxs)("button", { type: 'button', className: 'btn btn-primary btn-link btn-icon-right', onClick: handleNext, children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' }), nextButtonText] })] })), onClose: onClose, className: dialogClassName, bodyClassName: bodyClassNames, disableEsc: disableEsc, useOverflow: useOverflow, bsSize: bsSize }));
+};
+MediaDialog.MEDIA_TYPE_IMAGE = 'image';
+MediaDialog.MEDIA_TYPE_VIDEO = 'video';
+exports.default = MediaDialog;

package/lib/es/src/components/dialog/OnboardingDialog.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { type BaseDialogProps } from './Dialog';
+export type OnboardingDialogProps = Pick<BaseDialogProps, 'show' | 'onClose' | 'className'> & {
+    /**
+     * The source URL of the image to be displayed in the dialog.
+     */
+    imageSrc: string;
+    /**
+     * Alternative text for the image, used for accessibility.
+     */
+    imageAlt?: string;
+    /**
+     * The title of the dialog. A welcome message.
+     */
+    title?: string | React.ReactNode;
+    /**
+     * A short description of the service and it's onboarding.
+     */
+    description?: string | React.ReactNode;
+    /**
+     * Hint text for restarting the onboarding process.
+     */
+    onboardingRestartHint?: string | React.ReactNode;
+    /**
+     * Detailed description for restarting the onboarding process.
+     */
+    onboardingRestartDescription?: string | React.ReactNode;
+    /**
+     * Text for the skip button
+     */
+    skipButtonText?: string | React.ReactNode;
+    /**
+     * Text for the button to start the tour
+     */
+    tourButtonText?: string | React.ReactNode;
+    /**
+     * Callback function to be called when the tour starts.
+     *
+     * @returns
+     */
+    onStartTour: () => void;
+};
+declare const OnboardingDialog: (props: OnboardingDialogProps) => import("react/jsx-runtime").JSX.Element;
+export default OnboardingDialog;

package/lib/es/src/components/dialog/OnboardingDialog.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
+const Button_1 = tslib_1.__importDefault(require("../button/Button"));
+const OnboardingDialog = (props) => {
+    const { className, show, onClose, onStartTour, imageSrc, imageAlt, title = 'Welcome to the RIO UIKIT!', description = ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-medium', children: "Get started with a quick tour to explore UIKIT and discover its key features." }), ' ', (0, jsx_runtime_1.jsx)("span", { children: "It's the easiest way to get familiar with the service and make the most of your experience." })] })), onboardingRestartHint = 'Not ready to start now?', onboardingRestartDescription = 'You can always start the onboarding tour later from the service info option in the application header.', skipButtonText = 'Skip', tourButtonText = 'Start the tour', ...remainingProps } = props;
+    const dialogClassName = `${className ? className : ''} onboarding-dialog`;
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { ...remainingProps, show: show, bsSize: 'sm', onClose: onClose, onEsc: onClose, bodyClassName: 'padding-0', className: dialogClassName, showCloseButton: false, body: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("img", { className: 'img-responsive rounded-top-right-extra-large rounded-top-left-extra-large', src: imageSrc, alt: imageAlt }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'position-relative padding-20 margin-top-10 margin-x-20', children: [(0, jsx_runtime_1.jsx)("div", { className: 'margin-bottom-15 margin-right-20 text-color-darkest', children: (0, jsx_runtime_1.jsx)("div", { className: 'text-size-h3 text-medium', children: title }) }), (0, jsx_runtime_1.jsx)("div", { className: 'text-color-darker', children: (0, jsx_runtime_1.jsx)("p", { className: 'text-size-16', children: description }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'text-color-darker', children: [(0, jsx_runtime_1.jsx)("div", { className: 'margin-top-25 text-medium', children: onboardingRestartHint }), (0, jsx_runtime_1.jsx)("p", { className: 'text-color-darker padding-bottom-15 margin-top-5', children: onboardingRestartDescription })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'btn-toolbar justify-content-end margin-y-20', children: [(0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: Button_1.default.MUTED, onClick: onClose, children: skipButtonText }), (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: Button_1.default.PRIMARY, onClick: onStartTour, children: tourButtonText })] })] })] }) }));
+};
+exports.default = OnboardingDialog;

package/lib/es/src/components/dialog/ReleaseNotesDialog.d.ts

@@ -0,0 +1,61 @@
+import { type ReleaseNotesData } from '../releaseNotes/ReleaseNotes';
+export type ReleaseNotesDialogProps = {
+    /**
+     * Decides if the dialog is opened.
+     */
+    showReleaseNotes: boolean;
+    /**
+     * Callback set showReleaseNotes state
+     * @param show
+     * @returns
+     */
+    setShowReleaseNotes: (show: boolean) => void;
+    /**
+     * Translated text for "What`s new?"
+     */
+    whatsNewTitle?: string;
+    /**
+     * The translated modulename.
+     */
+    moduleName?: string;
+    /**
+     * Translated text for the close button.
+     */
+    closeButtonText?: string;
+    /**
+     * Translated release notes.
+     *
+     * @example
+     *
+     * ```tsx
+     * {
+     *     "0.1.2": {
+     *         date: '20.10.2023',
+     *         content: (
+     *             <div className='padding-left-15'>
+     *                 Summary
+     *                 • Feature 1
+     *                 • Feature 2
+     *             </div>
+     *         ),
+     *     }
+     * }
+     * ```
+     */
+    translatedReleaseNotes: ReleaseNotesData;
+    /**
+     * Specifies the current module version.
+     */
+    currentVersion: string;
+    /**
+     * Specifies the item in the localStorage that is used to save the last read module version.
+     */
+    RELEASE_NOTES_ITEM: string;
+    /**
+     * Enables the content of the dialog to scroll when it overflows.
+     * This means the dialog body scrolls instead of the entire dialog.
+     */
+    useOverflow?: boolean;
+};
+declare const ReleaseNotesDialog: (props: ReleaseNotesDialogProps) => import("react/jsx-runtime").JSX.Element;
+export default ReleaseNotesDialog;

package/lib/es/src/components/dialog/ReleaseNotesDialog.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ReleaseNotes_1 = tslib_1.__importDefault(require("../releaseNotes/ReleaseNotes"));
+const Button_1 = tslib_1.__importDefault(require("../button/Button"));
+const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
+const setReleaseNotesItem = (props) => {
+    window.localStorage.setItem(props.RELEASE_NOTES_ITEM, props.currentVersion);
+    props.setShowReleaseNotes(false);
+};
+const getModuleName = (moduleName, whatsNew) => ((0, jsx_runtime_1.jsx)("span", { children: moduleName ? moduleName : whatsNew }));
+const ReleaseNotesDialog = (props) => {
+    const { moduleName, whatsNewTitle, closeButtonText, translatedReleaseNotes, useOverflow = true } = props;
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { show: props.showReleaseNotes, useOverflow: useOverflow, title: getModuleName(moduleName, whatsNewTitle), subtitle: moduleName && whatsNewTitle, body: (0, jsx_runtime_1.jsx)(ReleaseNotes_1.default, { releaseNotes: translatedReleaseNotes }), footer: (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => setReleaseNotesItem(props), children: closeButtonText || 'Close' }), onClose: () => setReleaseNotesItem(props) }));
+};
+exports.default = ReleaseNotesDialog;

package/lib/es/src/components/dialog/SaveDialog.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { type BaseDialogProps } from './Dialog';
+export type SaveDialogProps = BaseDialogProps & {
+    /**
+     * The content of the dialog body itself.
+     */
+    content: string | React.ReactNode;
+    /**
+     * A callback fired when the cancel button is clicked or the dialog is closed.
+     */
+    onClickCancel: VoidFunction;
+    /**
+     * A callback fired when the discard button is clicked.
+     */
+    onClickDiscard: VoidFunction;
+    /**
+     * A callback fired when the confirmation button is clicked.
+     */
+    onClickConfirm: VoidFunction;
+    /**
+     * The content of the discard button. (Usually a text, can also be a FormattedMessage component).
+     */
+    discardButtonText: string | React.ReactNode;
+    /**
+     * The content of the cancel button. (Usually a text, can also be a FormattedMessage component).
+     */
+    cancelButtonText: string | React.ReactNode;
+    /**
+     * The content of the confirmation button. Since it is a node, it can be a simple text
+     * or any JSX node like a div element with an icon and a text.
+     */
+    confirmButtonText: string | React.ReactNode;
+};
+declare const SaveDialog: (props: SaveDialogProps) => import("react/jsx-runtime").JSX.Element;
+export default SaveDialog;

package/lib/es/src/components/dialog/SaveDialog.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const Button_1 = tslib_1.__importDefault(require("../button/Button"));
+const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
+const SaveDialog = (props) => {
+    const { showCloseButton = true, content, discardButtonText, cancelButtonText, confirmButtonText, onClickDiscard = noop_1.default, onClickCancel = noop_1.default, onClickConfirm = noop_1.default, ...remainingProps } = props;
+    const footer = ((0, jsx_runtime_1.jsxs)("div", { className: 'btn-toolbar', children: [(0, jsx_runtime_1.jsx)(Button_1.default, { className: 'DiscardButton', onClick: onClickDiscard, children: discardButtonText }), (0, jsx_runtime_1.jsx)(Button_1.default, { className: 'CancelButton', onClick: onClickCancel, children: cancelButtonText }), (0, jsx_runtime_1.jsx)(Button_1.default, { className: 'ConfirmationButton', bsStyle: 'primary', onClick: onClickConfirm, children: confirmButtonText })] }));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { ...remainingProps, showCloseButton: showCloseButton, body: content, footer: footer, onClose: onClickCancel, className: 'save-dialog', disableEsc: true }));
+};
+exports.default = SaveDialog;

package/lib/es/src/components/dialog/SimpleDialog.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type DialogProps } from './Dialog';
+export type SimpleDialogProps = Omit<DialogProps, 'body'> & {
+    /**
+     * The content of the dialog body itself.
+     */
+    content: string | React.ReactNode;
+};
+declare const SimpleDialog: (props: SimpleDialogProps) => import("react/jsx-runtime").JSX.Element;
+export default SimpleDialog;

package/lib/es/src/components/dialog/SimpleDialog.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
+/*
+ * Component to show a modal popup containing a title, a content and a close handler.
+ */
+const SimpleDialog = (props) => {
+    const { content, showCloseButton = true, className, ...remainingProps } = props;
+    const dialogClassName = `${className ? className : ''} simple-dialog`;
+    return (0, jsx_runtime_1.jsx)(Dialog_1.default, { ...remainingProps, showCloseButton: showCloseButton, body: content, className: dialogClassName });
+};
+exports.default = SimpleDialog;

package/lib/es/src/components/dialog/SplitDialog.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { type BaseDialogProps } from './Dialog';
+export type SplitDialogProps = Omit<BaseDialogProps, 'useOverflow'> & {
+    /**
+     * The content to be shown on the left side.
+     */
+    leftContent?: string | React.ReactNode;
+    /**
+     * Additional classes for the left content element.
+     */
+    leftContentClassName?: string;
+    /**
+     * The content to be shown on the right side.
+     */
+    rightContent?: string | React.ReactNode;
+    /**
+     * Additional classes for the right content element.
+     */
+    rightContentClassName?: string;
+    /**
+     * The dialog body content.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Additional classes for the modal-footer element.
+     */
+    footerClassName?: string;
+    /**
+     * A callback function to be executed before closing the dialog.
+     *
+     * If the function returns `false`, the dialog will not be closed
+     */
+    onCloseValidation?: () => boolean;
+    /**
+     * Enables the modal body to overflow and use inline scrolling if needed.
+     *
+     * @default true
+     */
+    useOverflow?: boolean;
+    /**
+     * Allows to disable the divider.
+     *
+     * @default true
+     */
+    showDivider?: boolean;
+};
+declare const SplitDialog: (props: SplitDialogProps) => import("react/jsx-runtime").JSX.Element;
+export default SplitDialog;

package/lib/es/src/components/dialog/SplitDialog.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
+const SplitDialog = (props) => {
+    const { leftContent, rightContent, leftContentClassName = '', rightContentClassName = '', className = '', useOverflow = true, showDivider = true, ...remainingProps } = props;
+    const dialogClassName = `split-dialog ${className}`;
+    const dividerClasses = (0, classnames_1.default)('split-divider', 'bg-lighter');
+    const body = ((0, jsx_runtime_1.jsxs)("div", { className: 'split-wrapper', children: [(0, jsx_runtime_1.jsxs)("div", { className: `split-left ${leftContentClassName}`, children: [leftContent, showDivider && (0, jsx_runtime_1.jsx)("div", { className: dividerClasses })] }), (0, jsx_runtime_1.jsx)("div", { className: `split-right ${rightContentClassName}`, children: rightContent })] }));
+    return (0, jsx_runtime_1.jsx)(Dialog_1.default, { ...remainingProps, body: body, className: dialogClassName, useOverflow: useOverflow });
+};
+exports.default = SplitDialog;

package/lib/es/src/components/dialog/dialogContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type DialogContext = {
+    onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    isSmallestDialog: boolean;
+    showXsDialogBorders: boolean;
+    showCloseButton: boolean;
+};
+export declare const dialogContext: React.Context<DialogContext>;
+export declare const DialogContextProvider: React.Provider<DialogContext>;
+export declare const useDialogContext: () => DialogContext;

package/lib/es/src/components/dialog/dialogContext.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDialogContext = exports.DialogContextProvider = exports.dialogContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const initialContext = {
+    onClose: noop_1.default,
+    isSmallestDialog: false,
+    showXsDialogBorders: false,
+    showCloseButton: true,
+};
+exports.dialogContext = (0, react_1.createContext)(initialContext);
+exports.DialogContextProvider = exports.dialogContext.Provider;
+const useDialogContext = () => {
+    const context = (0, react_1.useContext)(exports.dialogContext);
+    if (!context) {
+        throw new Error('Dialog compound components cannot be rendered outside the Dialog component');
+    }
+    return context;
+};
+exports.useDialogContext = useDialogContext;

package/lib/es/src/components/divider/Divider.d.ts

@@ -0,0 +1,46 @@
+import { type PropsWithChildren } from 'react';
+export type DividerProps = {
+    /**
+     * The amount of space to either side
+     *
+     * @default 15
+     */
+    spacing?: number;
+    /**
+     * Defines the width of the divider line
+     *
+     * @default 1
+     */
+    dividerWidth?: 1 | 2 | 3;
+    /**
+     * Defines the color of the divider line
+     *
+     * @default 'light'
+     */
+    dividerColor?: 'darkest' | 'darker' | 'dark' | 'gray' | 'light' | 'lighter' | 'lightest';
+    /**
+     * Use the component as a spacer element without the divider line
+     *
+     * @default false
+     */
+    asSpacer?: boolean;
+    /**
+     * Set the orientation for the divider line to vertical.
+     * This may be useful for button toolbars or elements on a single row.
+     *
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * Defines where the children are aligned on the divider line
+     *
+     * @default 'center'
+     */
+    titleAlignment?: 'left' | 'center' | 'right';
+    /**
+     * Additional classes added to the wrapping element.
+     */
+    className?: string;
+};
+declare const Divider: (props: PropsWithChildren<DividerProps>) => import("react/jsx-runtime").JSX.Element;
+export default Divider;

package/lib/es/src/components/divider/Divider.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Divider = (props) => {
+    const { spacing = 15, dividerWidth = 1, dividerColor = 'light', asSpacer = false, vertical = false, titleAlignment = 'center', className = '', children, } = props;
+    const classes = (0, classnames_1.default)('Divider', 'position-relative', !vertical && 'width-100pct', className);
+    const spacingValue = `${spacing}px`;
+    const wrapperStyle = {};
+    if (vertical) {
+        wrapperStyle.paddingLeft = spacingValue;
+        wrapperStyle.paddingRight = spacingValue;
+    }
+    if (!vertical) {
+        wrapperStyle.paddingTop = spacingValue;
+        wrapperStyle.paddingBottom = spacingValue;
+    }
+    const dividerLineClasses = (0, classnames_1.default)('divider-line', `bg-${dividerColor}`);
+    const isStringTitle = typeof children === 'string';
+    const line = ((0, jsx_runtime_1.jsx)("div", { className: dividerLineClasses, style: {
+            width: vertical ? `${dividerWidth}px` : '100%',
+            height: vertical ? '100%' : `${dividerWidth}px`,
+        } }));
+    const titleLine = (0, jsx_runtime_1.jsx)("div", { className: 'flex-1-0', children: line });
+    const title = (0, jsx_runtime_1.jsx)("div", { className: isStringTitle ? 'padding-x-10' : '', children: children });
+    const dividerTitleClasses = (0, classnames_1.default)('divider-title', 'display-flex', 'align-items-center');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, style: wrapperStyle, children: [!asSpacer && !children && line, children && ((0, jsx_runtime_1.jsxs)("div", { className: dividerTitleClasses, children: [titleAlignment === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title, titleLine] })), titleAlignment === 'center' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [titleLine, title, titleLine] })), titleAlignment === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [titleLine, title] }))] }))] }));
+};
+exports.default = Divider;