@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

package/components/dialog/DialogHeader.js

@@ -1,44 +1,44 @@
-import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import v from "react";
-import { noop as B } from "es-toolkit/function";
-import x from "../button/Button.js";
-import { getTrackingLabelFromNode as k } from "../../utils/analytics/getTrackingLabelFromNode.js";
-import i from "../../utils/classNames.js";
-import { useDialogContext as w } from "./dialogContext.js";
-const H = (n) => {
-  const { title: t, subtitle: s, headerButtons: l, onCloseButtonClick: c = B, ...m } = n, { onClose: h, isSmallestDialog: a, showXsDialogBorders: u, showCloseButton: g } = w(), r = a ? u : !0, p = a ? !1 : g, b = i("modal-header", !r && "border-bottom-none"), C = i(
-    "modal-header-text",
-    !r && "padding-bottom-0 width-100pct"
-  ), d = k(t), N = (f) => {
-    c(), h(f);
-  };
-  return /* @__PURE__ */ e("div", { ...m, className: b, "aria-label": "dialog header", children: [
-    /* @__PURE__ */ e("div", { className: C, children: [
-      s && /* @__PURE__ */ o("div", { className: "modal-header-subtitle", children: s }),
-      /* @__PURE__ */ o("div", { className: "modal-header-title", children: t })
-    ] }),
-    /* @__PURE__ */ e("div", { className: "modal-header-buttons", children: [
-      l && !a && /* @__PURE__ */ e(v.Fragment, { children: [
-        l,
-        /* @__PURE__ */ o("div", { className: "modal-header-buttons-spacer" })
-      ] }),
-      p && /* @__PURE__ */ o(
-        x,
-        {
-          bsStyle: "muted",
-          iconOnly: !0,
-          iconName: "rioglyph-remove",
-          autoTrackingKey: d && `dialog::closed::${d}`,
-          className: "modal-header-close close",
-          onClick: N,
-          "data-testid": "close",
-          "aria-label": "dialog close button"
-        }
-      )
-    ] })
-  ] });
+import e from "../../utils/classNames.js";
+import t from "../button/Button.js";
+import { getTrackingLabelFromNode as n } from "../../utils/analytics/getTrackingLabelFromNode.js";
+import { useDialogContext as r } from "./dialogContext.js";
+import i from "react";
+import { noop as a } from "es-toolkit/function";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/dialog/DialogHeader.tsx
+var c = (c) => {
+	let { title: l, subtitle: u, headerButtons: d, onCloseButtonClick: f = a, ...p } = c, { onClose: m, isSmallestDialog: h, showXsDialogBorders: g, showCloseButton: _ } = r(), v = !h || g, y = !h && _, b = e("modal-header", !v && "border-bottom-none"), x = e("modal-header-text", !v && "padding-bottom-0 width-100pct"), S = n(l), C = (e) => {
+		f(), m(e);
+	};
+	return /* @__PURE__ */ s("div", {
+		...p,
+		className: b,
+		"aria-label": "dialog header",
+		children: [/* @__PURE__ */ s("div", {
+			className: x,
+			children: [u && /* @__PURE__ */ o("div", {
+				className: "modal-header-subtitle",
+				children: u
+			}), /* @__PURE__ */ o("div", {
+				className: "modal-header-title",
+				children: l
+			})]
+		}), /* @__PURE__ */ s("div", {
+			className: "modal-header-buttons",
+			children: [d && !h && /* @__PURE__ */ s(i.Fragment, { children: [d, /* @__PURE__ */ o("div", { className: "modal-header-buttons-spacer" })] }), y && /* @__PURE__ */ o(t, {
+				bsStyle: "muted",
+				iconOnly: !0,
+				iconName: "icon-remove",
+				autoTrackingKey: S && `dialog::closed::${S}`,
+				className: "modal-header-close close",
+				onClick: C,
+				"data-testid": "close",
+				"aria-label": "dialog close button"
+			})]
+		})]
+	});
 };
-export {
-  H as default
-};
-//# sourceMappingURL=DialogHeader.js.map
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=DialogHeader.js.map

package/components/dialog/DialogHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeader.js","sources":["../../../src/components/dialog/DialogHeader.tsx"],"sourcesContent":["import React, { type ComponentProps } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport Button from '../button/Button';\nimport { getTrackingLabelFromNode } from '../../utils/analytics/getTrackingLabelFromNode';\nimport classNames from '../../utils/classNames';\nimport { useDialogContext } from './dialogContext';\n\nexport type DialogHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {\n    /**\n     * The dialog title (can also be a FormattedMessage component).\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The dialog header subtitle content.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Allows to add additional buttons to the dialog header.\n     */\n    headerButtons?: React.ReactNode;\n\n    onCloseButtonClick?: () => void;\n};\n\nconst DialogHeader = (props: DialogHeaderProps) => {\n    const { title, subtitle, headerButtons, onCloseButtonClick = noop, ...remainingProps } = props;\n\n    const { onClose, isSmallestDialog, showXsDialogBorders, showCloseButton } = useDialogContext();\n\n    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;\n\n    const doShowCloseButton = isSmallestDialog ? false : showCloseButton;\n\n    const headerClasses = classNames('modal-header', !doShowXsDialogBorders && 'border-bottom-none');\n    const headerTextClasses = classNames(\n        'modal-header-text',\n        !doShowXsDialogBorders && 'padding-bottom-0 width-100pct'\n    );\n    const titleTrackingValue = getTrackingLabelFromNode(title);\n\n    const handleClose = (event: React.MouseEvent<HTMLButtonElement>) => {\n        onCloseButtonClick();\n        onClose(event);\n    };\n\n    return (\n        <div {...remainingProps} className={headerClasses} aria-label='dialog header'>\n            <div className={headerTextClasses}>\n                {subtitle && <div className='modal-header-subtitle'>{subtitle}</div>}\n                <div className='modal-header-title'>{title}</div>\n            </div>\n            <div className='modal-header-buttons'>\n                {headerButtons && !isSmallestDialog && (\n                    <React.Fragment>\n                        {headerButtons}\n                        <div className='modal-header-buttons-spacer' />\n                    </React.Fragment>\n                )}\n                {doShowCloseButton && (\n                    <Button\n                        bsStyle='muted'\n                        iconOnly\n                        iconName='rioglyph-remove'\n                        autoTrackingKey={titleTrackingValue && `dialog::closed::${titleTrackingValue}`}\n                        className='modal-header-close close'\n                        onClick={handleClose}\n                        data-testid='close'\n                        aria-label='dialog close button'\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default DialogHeader;\n"],"names":["DialogHeader","props","title","subtitle","headerButtons","onCloseButtonClick","noop","remainingProps","onClose","isSmallestDialog","showXsDialogBorders","showCloseButton","useDialogContext","doShowXsDialogBorders","doShowCloseButton","headerClasses","classNames","headerTextClasses","titleTrackingValue","getTrackingLabelFromNode","handleClose","event","jsxs","jsx","React","Button"],"mappings":";;;;;;;AA2BA,MAAMA,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,eAAAC,GAAe,oBAAAC,IAAqBC,GAAM,GAAGC,MAAmBN,GAEnF,EAAE,SAAAO,GAAS,kBAAAC,GAAkB,qBAAAC,GAAqB,iBAAAC,EAAA,IAAoBC,EAAA,GAEtEC,IAAwBJ,IAAmBC,IAAsB,IAEjEI,IAAoBL,IAAmB,KAAQE,GAE/CI,IAAgBC,EAAW,gBAAgB,CAACH,KAAyB,oBAAoB,GACzFI,IAAoBD;AAAA,IACtB;AAAA,IACA,CAACH,KAAyB;AAAA,EAAA,GAExBK,IAAqBC,EAAyBjB,CAAK,GAEnDkB,IAAc,CAACC,MAA+C;AAChE,IAAAhB,EAAA,GACAG,EAAQa,CAAK;AAAA,EACjB;AAEA,2BACK,OAAA,EAAK,GAAGd,GAAgB,WAAWQ,GAAe,cAAW,iBAC1D,UAAA;AAAA,IAAA,gBAAAO,EAAC,OAAA,EAAI,WAAWL,GACX,UAAA;AAAA,MAAAd,KAAY,gBAAAoB,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAApB,GAAS;AAAA,MAC9D,gBAAAoB,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAArB,EAAA,CAAM;AAAA,IAAA,GAC/C;AAAA,IACA,gBAAAoB,EAAC,OAAA,EAAI,WAAU,wBACV,UAAA;AAAA,MAAAlB,KAAiB,CAACK,KACf,gBAAAa,EAACE,EAAM,UAAN,EACI,UAAA;AAAA,QAAApB;AAAA,QACD,gBAAAmB,EAAC,OAAA,EAAI,WAAU,8BAAA,CAA8B;AAAA,MAAA,GACjD;AAAA,MAEHT,KACG,gBAAAS;AAAA,QAACE;AAAA,QAAA;AAAA,UACG,SAAQ;AAAA,UACR,UAAQ;AAAA,UACR,UAAS;AAAA,UACT,iBAAiBP,KAAsB,mBAAmBA,CAAkB;AAAA,UAC5E,WAAU;AAAA,UACV,SAASE;AAAA,UACT,eAAY;AAAA,UACZ,cAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IACf,EAAA,CAER;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"DialogHeader.js","names":[],"sources":["../../../src/components/dialog/DialogHeader.tsx"],"sourcesContent":["import React, { type ComponentProps } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport Button from '../button/Button';\nimport { getTrackingLabelFromNode } from '../../utils/analytics/getTrackingLabelFromNode';\nimport classNames from '../../utils/classNames';\nimport { useDialogContext } from './dialogContext';\n\nexport type DialogHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {\n    /**\n     * The dialog title (can also be a FormattedMessage component).\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The dialog header subtitle content.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Allows to add additional buttons to the dialog header.\n     */\n    headerButtons?: React.ReactNode;\n\n    onCloseButtonClick?: () => void;\n};\n\nconst DialogHeader = (props: DialogHeaderProps) => {\n    const { title, subtitle, headerButtons, onCloseButtonClick = noop, ...remainingProps } = props;\n\n    const { onClose, isSmallestDialog, showXsDialogBorders, showCloseButton } = useDialogContext();\n\n    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;\n\n    const doShowCloseButton = isSmallestDialog ? false : showCloseButton;\n\n    const headerClasses = classNames('modal-header', !doShowXsDialogBorders && 'border-bottom-none');\n    const headerTextClasses = classNames(\n        'modal-header-text',\n        !doShowXsDialogBorders && 'padding-bottom-0 width-100pct'\n    );\n    const titleTrackingValue = getTrackingLabelFromNode(title);\n\n    const handleClose = (event: React.MouseEvent<HTMLButtonElement>) => {\n        onCloseButtonClick();\n        onClose(event);\n    };\n\n    return (\n        <div {...remainingProps} className={headerClasses} aria-label='dialog header'>\n            <div className={headerTextClasses}>\n                {subtitle && <div className='modal-header-subtitle'>{subtitle}</div>}\n                <div className='modal-header-title'>{title}</div>\n            </div>\n            <div className='modal-header-buttons'>\n                {headerButtons && !isSmallestDialog && (\n                    <React.Fragment>\n                        {headerButtons}\n                        <div className='modal-header-buttons-spacer' />\n                    </React.Fragment>\n                )}\n                {doShowCloseButton && (\n                    <Button\n                        bsStyle='muted'\n                        iconOnly\n                        iconName='icon-remove'\n                        autoTrackingKey={titleTrackingValue && `dialog::closed::${titleTrackingValue}`}\n                        className='modal-header-close close'\n                        onClick={handleClose}\n                        data-testid='close'\n                        aria-label='dialog close button'\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default DialogHeader;\n"],"mappings":";;;;;;;;AA2BA,IAAM,KAAgB,MAA6B;CAC/C,IAAM,EAAE,UAAO,aAAU,kBAAe,wBAAqB,GAAM,GAAG,MAAmB,GAEnF,EAAE,YAAS,qBAAkB,wBAAqB,uBAAoB,EAAiB,GAEvF,IAAwB,MAAmB,GAE3C,IAAoB,MAA2B,GAE/C,IAAgB,EAAW,gBAAgB,CAAC,KAAyB,oBAAoB,GACzF,IAAoB,EACtB,qBACA,CAAC,KAAyB,+BAC9B,GACM,IAAqB,EAAyB,CAAK,GAEnD,KAAe,MAA+C;EAEhE,AADA,EAAmB,GACnB,EAAQ,CAAK;CACjB;CAEA,OACI,kBAAC,OAAD;EAAK,GAAI;EAAgB,WAAW;EAAe,cAAW;YAA9D,CACI,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACK,KAAY,kBAAC,OAAD;IAAK,WAAU;cAAyB;GAAc,CAAA,GACnE,kBAAC,OAAD;IAAK,WAAU;cAAsB;GAAW,CAAA,CAC/C;MACL,kBAAC,OAAD;GAAK,WAAU;aAAf,CACK,KAAiB,CAAC,KACf,kBAAC,EAAM,UAAP,EAAA,UAAA,CACK,GACD,kBAAC,OAAD,EAAK,WAAU,8BAA+B,CAAA,CAClC,EAAA,CAAA,GAEnB,KACG,kBAAC,GAAD;IACI,SAAQ;IACR,UAAA;IACA,UAAS;IACT,iBAAiB,KAAsB,mBAAmB;IAC1D,WAAU;IACV,SAAS;IACT,eAAY;IACZ,cAAW;GACd,CAAA,CAEJ;IACJ;;AAEb"}

package/components/dialog/FrameDialog.js

@@ -1,41 +1,35 @@
+import e from "../../hooks/usePostMessage.js";
+import t from "./Dialog.js";
+import { useState as n } from "react";
 import { jsx as r } from "react/jsx-runtime";
-import { useState as a } from "react";
-import y from "iframe-resizer-react";
-import N from "./Dialog.js";
-import u from "../../hooks/usePostMessage.js";
-const O = "EVENT_FRAME_DIALOG", L = "_OPEN_DIALOG", P = "_CLOSE_DIALOG", S = (i) => {
-  const { eventPrefix: o = O, className: d = "", getSourceFrame: g = () => {
-  } } = i, n = `${o}${L}`, e = `${o}${P}`, [p, t] = a(!1), [c, m] = a(""), [E, D] = a({}), { sendMessageToWidget: f } = u(o, (s) => {
-    if (console.log(s), s.type === n)
-      t(!0), m(s.payload.src), D(s.payload.dialogProps);
-    else if (s.type === e) {
-      t(!1);
-      const l = g();
-      l && f(
-        {
-          type: e,
-          payload: s.payload
-        },
-        [l]
-      );
-    }
-  }), _ = `frame-dialog ${d}`;
-  return /* @__PURE__ */ r(
-    N,
-    {
-      ...E,
-      show: p,
-      bodyClassName: "padding-2 rounded min-height-200",
-      body: /* @__PURE__ */ r(y, { src: c, className: "unstyled width-100pct" }),
-      disableEsc: !0,
-      className: _
-    }
-  );
+import i from "@rio-cloud/iframe-resizer";
+//#region src/components/dialog/FrameDialog.tsx
+var a = "EVENT_FRAME_DIALOG", o = "_OPEN_DIALOG", s = "_CLOSE_DIALOG", c = (c) => {
+	let { eventPrefix: l = a, className: u = "", getSourceFrame: d = () => void 0 } = c, f = `${l}${o}`, p = `${l}${s}`, [m, h] = n(!1), [g, _] = n(""), [v, y] = n({}), { sendMessageToWidget: b } = e(l, (e) => {
+		if (console.log(e), e.type === f) h(!0), _(e.payload.src), y(e.payload.dialogProps);
+		else if (e.type === p) {
+			h(!1);
+			let t = d();
+			t && b({
+				type: p,
+				payload: e.payload
+			}, [t]);
+		}
+	}), x = `frame-dialog ${u}`;
+	return /* @__PURE__ */ r(t, {
+		...v,
+		show: m,
+		bodyClassName: "padding-2 rounded min-height-200",
+		body: /* @__PURE__ */ r(i, {
+			title: "Embedded dialog",
+			src: g,
+			className: "unstyled width-100pct"
+		}),
+		disableEsc: !0,
+		className: x
+	});
 };
-export {
-  P as CLOSE_DIALOG_EVENT,
-  O as DEFAULT_PREFIX,
-  L as OPEN_DIALOG_EVENT,
-  S as default
-};
-//# sourceMappingURL=FrameDialog.js.map
+//#endregion
+export { s as CLOSE_DIALOG_EVENT, a as DEFAULT_PREFIX, o as OPEN_DIALOG_EVENT, c as default };
+
+//# sourceMappingURL=FrameDialog.js.map

package/components/dialog/FrameDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"FrameDialog.js","sources":["../../../src/components/dialog/FrameDialog.tsx"],"sourcesContent":["import { type ComponentProps, useState } from 'react';\nimport IframeResizer from 'iframe-resizer-react';\n\nimport Dialog, { type DialogSize } from './Dialog';\nimport usePostMessage, { type RemoteAction } from '../../hooks/usePostMessage';\n\nexport const DEFAULT_PREFIX = 'EVENT_FRAME_DIALOG';\n\nexport const OPEN_DIALOG_EVENT = '_OPEN_DIALOG';\nexport const CLOSE_DIALOG_EVENT = '_CLOSE_DIALOG';\n\nexport type DialogOptions = {\n    bsSize?: DialogSize;\n    showXsDialogBorders?: boolean;\n};\n\nexport type OPEN_DIALOG_EVENT_TYPE = {\n    src: string;\n    dialogProps?: DialogOptions;\n};\n\nexport type FrameDialogProps = {\n    /**\n     * A prefix for all event types.\n     *\n     * @default 'EVENT_FRAME_DIALOG'\n     */\n    eventPrefix?: string;\n\n    /**\n     * A function to retrieve the iframe DOM element so a message can be sent to it. This is required\n     * when sending messages back to the origin widget iframe that triggered the dialog in the first place.\n     */\n    getSourceFrame?: () => HTMLIFrameElement | null;\n\n    /**\n     * Additional classes for the modal element.\n     */\n    className?: string;\n};\n\nconst FrameDialog = (props: FrameDialogProps) => {\n    const { eventPrefix = DEFAULT_PREFIX, className = '', getSourceFrame = () => undefined } = props;\n\n    const openDialogEvent = `${eventPrefix}${OPEN_DIALOG_EVENT}`;\n    const closeDialogEvent = `${eventPrefix}${CLOSE_DIALOG_EVENT}`;\n\n    const [showDialog, setShowDialog] = useState(false);\n    const [remoteDialogUrl, setRemoteDialogUrl] = useState('');\n    const [dialogProps, setDialogProps] = useState<Partial<ComponentProps<typeof Dialog>>>({});\n\n    const { sendMessageToWidget } = usePostMessage(eventPrefix, (remoteAction: RemoteAction) => {\n        console.log(remoteAction);\n\n        if (remoteAction.type === openDialogEvent) {\n            setShowDialog(true);\n            setRemoteDialogUrl(remoteAction.payload.src);\n            setDialogProps(remoteAction.payload.dialogProps);\n        } else if (remoteAction.type === closeDialogEvent) {\n            setShowDialog(false);\n\n            // Forward messages from dialog back to widget\n            const widgetFrame = getSourceFrame();\n            if (widgetFrame) {\n                sendMessageToWidget(\n                    {\n                        type: closeDialogEvent,\n                        payload: remoteAction.payload,\n                    },\n                    [widgetFrame]\n                );\n            }\n        }\n    });\n\n    const dialogClassName = `frame-dialog ${className}`;\n\n    return (\n        <Dialog\n            {...dialogProps}\n            show={showDialog}\n            bodyClassName='padding-2 rounded min-height-200'\n            body={<IframeResizer src={remoteDialogUrl} className='unstyled width-100pct' />}\n            // Note: closing the dialog with escape is disabled by default.\n            // The widget would need to handle the 'esc' event and send a message to close it\n            disableEsc\n            className={dialogClassName}\n        />\n    );\n};\n\nexport default FrameDialog;\n"],"names":["DEFAULT_PREFIX","OPEN_DIALOG_EVENT","CLOSE_DIALOG_EVENT","FrameDialog","props","eventPrefix","className","getSourceFrame","openDialogEvent","closeDialogEvent","showDialog","setShowDialog","useState","remoteDialogUrl","setRemoteDialogUrl","dialogProps","setDialogProps","sendMessageToWidget","usePostMessage","remoteAction","widgetFrame","dialogClassName","jsx","Dialog","IframeResizer"],"mappings":";;;;;AAMO,MAAMA,IAAiB,sBAEjBC,IAAoB,gBACpBC,IAAqB,iBAgC5BC,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,aAAAC,IAAcL,GAAgB,WAAAM,IAAY,IAAI,gBAAAC,IAAiB,MAAA;AAAA,QAAoBH,GAErFI,IAAkB,GAAGH,CAAW,GAAGJ,CAAiB,IACpDQ,IAAmB,GAAGJ,CAAW,GAAGH,CAAkB,IAEtD,CAACQ,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAAiBC,CAAkB,IAAIF,EAAS,EAAE,GACnD,CAACG,GAAaC,CAAc,IAAIJ,EAAiD,CAAA,CAAE,GAEnF,EAAE,qBAAAK,EAAA,IAAwBC,EAAeb,GAAa,CAACc,MAA+B;AAGxF,QAFA,QAAQ,IAAIA,CAAY,GAEpBA,EAAa,SAASX;AACtB,MAAAG,EAAc,EAAI,GAClBG,EAAmBK,EAAa,QAAQ,GAAG,GAC3CH,EAAeG,EAAa,QAAQ,WAAW;AAAA,aACxCA,EAAa,SAASV,GAAkB;AAC/C,MAAAE,EAAc,EAAK;AAGnB,YAAMS,IAAcb,EAAA;AACpB,MAAIa,KACAH;AAAA,QACI;AAAA,UACI,MAAMR;AAAA,UACN,SAASU,EAAa;AAAA,QAAA;AAAA,QAE1B,CAACC,CAAW;AAAA,MAAA;AAAA,IAGxB;AAAA,EACJ,CAAC,GAEKC,IAAkB,gBAAgBf,CAAS;AAEjD,SACI,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,MAAML;AAAA,MACN,eAAc;AAAA,MACd,MAAM,gBAAAY,EAACE,GAAA,EAAc,KAAKX,GAAiB,WAAU,yBAAwB;AAAA,MAG7E,YAAU;AAAA,MACV,WAAWQ;AAAA,IAAA;AAAA,EAAA;AAGvB;"}
+{"version":3,"file":"FrameDialog.js","names":[],"sources":["../../../src/components/dialog/FrameDialog.tsx"],"sourcesContent":["import { type ComponentProps, useState } from 'react';\nimport IframeResizer from '@rio-cloud/iframe-resizer';\n\nimport Dialog, { type DialogSize } from './Dialog';\nimport usePostMessage, { type RemoteAction } from '../../hooks/usePostMessage';\n\nexport const DEFAULT_PREFIX = 'EVENT_FRAME_DIALOG';\n\nexport const OPEN_DIALOG_EVENT = '_OPEN_DIALOG';\nexport const CLOSE_DIALOG_EVENT = '_CLOSE_DIALOG';\n\nexport type DialogOptions = {\n    bsSize?: DialogSize;\n    showXsDialogBorders?: boolean;\n};\n\nexport type OPEN_DIALOG_EVENT_TYPE = {\n    src: string;\n    dialogProps?: DialogOptions;\n};\n\nexport type FrameDialogProps = {\n    /**\n     * A prefix for all event types.\n     *\n     * @default 'EVENT_FRAME_DIALOG'\n     */\n    eventPrefix?: string;\n\n    /**\n     * A function to retrieve the iframe DOM element so a message can be sent to it. This is required\n     * when sending messages back to the origin widget iframe that triggered the dialog in the first place.\n     */\n    getSourceFrame?: () => HTMLIFrameElement | null;\n\n    /**\n     * Additional classes for the modal element.\n     */\n    className?: string;\n};\n\nconst FrameDialog = (props: FrameDialogProps) => {\n    const { eventPrefix = DEFAULT_PREFIX, className = '', getSourceFrame = () => undefined } = props;\n\n    const openDialogEvent = `${eventPrefix}${OPEN_DIALOG_EVENT}`;\n    const closeDialogEvent = `${eventPrefix}${CLOSE_DIALOG_EVENT}`;\n\n    const [showDialog, setShowDialog] = useState(false);\n    const [remoteDialogUrl, setRemoteDialogUrl] = useState('');\n    const [dialogProps, setDialogProps] = useState<Partial<ComponentProps<typeof Dialog>>>({});\n\n    const { sendMessageToWidget } = usePostMessage(eventPrefix, (remoteAction: RemoteAction) => {\n        console.log(remoteAction);\n\n        if (remoteAction.type === openDialogEvent) {\n            setShowDialog(true);\n            setRemoteDialogUrl(remoteAction.payload.src);\n            setDialogProps(remoteAction.payload.dialogProps);\n        } else if (remoteAction.type === closeDialogEvent) {\n            setShowDialog(false);\n\n            // Forward messages from dialog back to widget\n            const widgetFrame = getSourceFrame();\n            if (widgetFrame) {\n                sendMessageToWidget(\n                    {\n                        type: closeDialogEvent,\n                        payload: remoteAction.payload,\n                    },\n                    [widgetFrame]\n                );\n            }\n        }\n    });\n\n    const dialogClassName = `frame-dialog ${className}`;\n\n    return (\n        <Dialog\n            {...dialogProps}\n            show={showDialog}\n            bodyClassName='padding-2 rounded min-height-200'\n            body={<IframeResizer title='Embedded dialog' src={remoteDialogUrl} className='unstyled width-100pct' />}\n            // Note: closing the dialog with escape is disabled by default.\n            // The widget would need to handle the 'esc' event and send a message to close it\n            disableEsc\n            className={dialogClassName}\n        />\n    );\n};\n\nexport default FrameDialog;\n"],"mappings":";;;;;;AAMA,IAAa,IAAiB,sBAEjB,IAAoB,gBACpB,IAAqB,iBAgC5B,KAAe,MAA4B;CAC7C,IAAM,EAAE,iBAAc,GAAgB,eAAY,IAAI,0BAAuB,KAAA,MAAc,GAErF,IAAkB,GAAG,IAAc,KACnC,IAAmB,GAAG,IAAc,KAEpC,CAAC,GAAY,KAAiB,EAAS,EAAK,GAC5C,CAAC,GAAiB,KAAsB,EAAS,EAAE,GACnD,CAAC,GAAa,KAAkB,EAAiD,CAAC,CAAC,GAEnF,EAAE,2BAAwB,EAAe,IAAc,MAA+B;EAGxF,IAFA,QAAQ,IAAI,CAAY,GAEpB,EAAa,SAAS,GAGtB,AAFA,EAAc,EAAI,GAClB,EAAmB,EAAa,QAAQ,GAAG,GAC3C,EAAe,EAAa,QAAQ,WAAW;OAC5C,IAAI,EAAa,SAAS,GAAkB;GAC/C,EAAc,EAAK;GAGnB,IAAM,IAAc,EAAe;GACnC,AAAI,KACA,EACI;IACI,MAAM;IACN,SAAS,EAAa;GAC1B,GACA,CAAC,CAAW,CAChB;EAER;CACJ,CAAC,GAEK,IAAkB,gBAAgB;CAExC,OACI,kBAAC,GAAD;EACI,GAAI;EACJ,MAAM;EACN,eAAc;EACd,MAAM,kBAAC,GAAD;GAAe,OAAM;GAAkB,KAAK;GAAiB,WAAU;EAAyB,CAAA;EAGtG,YAAA;EACA,WAAW;CACd,CAAA;AAET"}

package/components/dialog/InfoDialog.js

@@ -1,10 +1,15 @@
-import { jsx as i } from "react/jsx-runtime";
-import r from "./Dialog.js";
-const m = (a) => {
-  const { content: s, className: o, ...n } = a, t = `${o || ""} info-dialog`;
-  return /* @__PURE__ */ i(r, { ...n, body: s, className: t });
+import e from "./Dialog.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/dialog/InfoDialog.tsx
+var n = (n) => {
+	let { content: r, className: i, ...a } = n, o = `${i || ""} info-dialog`;
+	return /* @__PURE__ */ t(e, {
+		...a,
+		body: r,
+		className: o
+	});
 };
-export {
-  m as default
-};
-//# sourceMappingURL=InfoDialog.js.map
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=InfoDialog.js.map

package/components/dialog/InfoDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoDialog.js","sources":["../../../src/components/dialog/InfoDialog.tsx"],"sourcesContent":["import type React from 'react';\n\nimport Dialog from './Dialog';\n\nexport type InfoDialogProps = React.ComponentPropsWithoutRef<typeof Dialog> & {\n    /**\n     * The content of the dialog body itself.\n     */\n    content: string | React.ReactNode;\n};\n\nconst InfoDialog = (props: InfoDialogProps) => {\n    const { content, className, ...remainingProps } = props;\n\n    const dialogClassName = `${className ? className : ''} info-dialog`;\n\n    return <Dialog {...remainingProps} body={content} className={dialogClassName} />;\n};\n\nexport default InfoDialog;\n"],"names":["InfoDialog","props","content","className","remainingProps","dialogClassName","Dialog"],"mappings":";;AAWA,MAAMA,IAAa,CAACC,MAA2B;AAC3C,QAAM,EAAE,SAAAC,GAAS,WAAAC,GAAW,GAAGC,MAAmBH,GAE5CI,IAAkB,GAAGF,KAAwB,EAAE;AAErD,2BAAQG,GAAA,EAAQ,GAAGF,GAAgB,MAAMF,GAAS,WAAWG,GAAiB;AAClF;"}
+{"version":3,"file":"InfoDialog.js","names":[],"sources":["../../../src/components/dialog/InfoDialog.tsx"],"sourcesContent":["import type React from 'react';\n\nimport Dialog from './Dialog';\n\nexport type InfoDialogProps = React.ComponentPropsWithoutRef<typeof Dialog> & {\n    /**\n     * The content of the dialog body itself.\n     */\n    content: string | React.ReactNode;\n};\n\nconst InfoDialog = (props: InfoDialogProps) => {\n    const { content, className, ...remainingProps } = props;\n\n    const dialogClassName = `${className ? className : ''} info-dialog`;\n\n    return <Dialog {...remainingProps} body={content} className={dialogClassName} />;\n};\n\nexport default InfoDialog;\n"],"mappings":";;;AAWA,IAAM,KAAc,MAA2B;CAC3C,IAAM,EAAE,YAAS,cAAW,GAAG,MAAmB,GAE5C,IAAkB,GAAG,KAAwB,GAAG;CAEtD,OAAO,kBAAC,GAAD;EAAQ,GAAI;EAAgB,MAAM;EAAS,WAAW;CAAkB,CAAA;AACnF"}

package/components/dialog/MediaDialog.js

@@ -1,79 +1,77 @@
-import { jsx as s, jsxs as i, Fragment as z } from "react/jsx-runtime";
-import { useState as F } from "react";
-import r from "../../utils/classNames.js";
-import { noop as a } from "es-toolkit/function";
-import R from "./Dialog.js";
-import Y from "../video/ResponsiveVideo.js";
-import c from "../preloader/ImagePreloader.js";
-import j from "../spinner/Spinner.js";
-const m = (o) => {
-  const {
-    show: h = !1,
-    onClose: N = a,
-    disableEsc: b = !1,
-    useOverflow: f = !1,
-    bsSize: x = "lg",
-    media: l = [],
-    previousButtonText: v = "Prev",
-    previousButtonCallback: y = a,
-    nextButtonText: I = "Next",
-    nextButtonCallback: C = a,
-    className: d,
-    ...E
-  } = o, [n, p] = F(0), T = () => {
-    const e = n, t = e === 0 ? o.media.length - 1 : e - 1;
-    p(t), y(t);
-  }, A = () => {
-    const e = n, t = e === o.media.length - 1 ? 0 : e + 1;
-    p(t), C(t);
-  }, M = () => /* @__PURE__ */ s("div", { className: "text-center text-size-h3", children: /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-missing text-size-200pct text-color-gray" }) }), S = (e) => {
-    const t = r("img-responsive", e.className && e.className);
-    return (
-      // @ts-expect-error
-      /* @__PURE__ */ s(c, { src: e.src, className: t, children: ({ status: u, image: g }) => u === c.STATUS_LOADED ? /* @__PURE__ */ s("img", { className: "ani-fade-in", src: g.src }, g.src) : u === c.STATUS_FAILED ? M() : /* @__PURE__ */ s(j, { isInverse: !1 }) })
-    );
-  }, _ = (e) => {
-    const t = r(e.className && e.className);
-    return /* @__PURE__ */ s("div", { className: "flex-1-0", children: /* @__PURE__ */ s(
-      Y,
-      {
-        src: e.src,
-        aspectRatio: e.aspectRatio ?? "16by9",
-        className: t
-      }
-    ) });
-  }, k = (e = {}) => e.type === m.MEDIA_TYPE_VIDEO ? _(e) : e.src && S(e), P = r("media-dialog", d && d), w = r("padding-0"), B = r("media-content", "content-center"), O = l[n].title, V = l[n].subtitle || null;
-  return /* @__PURE__ */ s(
-    R,
-    {
-      ...E,
-      show: h,
-      title: O,
-      subtitle: V,
-      body: /* @__PURE__ */ s("div", { className: B, children: k(l[n]) }),
-      footer: l?.length > 1 && /* @__PURE__ */ i(z, { children: [
-        /* @__PURE__ */ i("button", { type: "button", className: "btn btn-primary btn-link pull-left", onClick: T, children: [
-          /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-chevron-left" }),
-          v
-        ] }),
-        /* @__PURE__ */ s("div", { children: `${n + 1} / ${o.media.length}` }),
-        /* @__PURE__ */ i("button", { type: "button", className: "btn btn-primary btn-link btn-icon-right", onClick: A, children: [
-          /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-chevron-right" }),
-          I
-        ] })
-      ] }),
-      onClose: N,
-      className: P,
-      bodyClassName: w,
-      disableEsc: b,
-      useOverflow: f,
-      bsSize: x
-    }
-  );
+import e from "../../utils/classNames.js";
+import t from "../spinner/Spinner.js";
+import n from "./Dialog.js";
+import r from "../video/ResponsiveVideo.js";
+import i from "../preloader/ImagePreloader.js";
+import { useState as a } from "react";
+import { noop as o } from "es-toolkit/function";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/dialog/MediaDialog.tsx
+var u = (d) => {
+	let { show: f = !1, onClose: p = o, disableEsc: m = !1, useOverflow: h = !1, bsSize: g = "lg", media: _ = [], previousButtonText: v = "Prev", previousButtonCallback: y = o, nextButtonText: b = "Next", nextButtonCallback: x = o, className: S, ...C } = d, [w, T] = a(0), E = () => {
+		let e = w, t = e === 0 ? d.media.length - 1 : e - 1;
+		T(t), y(t);
+	}, D = () => {
+		let e = w, t = e === d.media.length - 1 ? 0 : e + 1;
+		T(t), x(t);
+	}, O = () => /* @__PURE__ */ c("div", {
+		className: "text-center text-size-h3",
+		children: /* @__PURE__ */ c("span", { className: "uikit-icon icon-missing text-size-200pct text-color-gray" })
+	}), k = (n) => {
+		let r = e("img-responsive", n.className && n.className);
+		return /* @__PURE__ */ c(i, {
+			src: n.src,
+			className: r,
+			children: ({ status: e, image: n }) => e === i.STATUS_LOADED ? /* @__PURE__ */ c("img", {
+				className: "ani-fade-in",
+				src: n.src
+			}, n.src) : e === i.STATUS_FAILED ? O() : /* @__PURE__ */ c(t, { isInverse: !1 })
+		});
+	}, A = (t) => {
+		let n = e(t.className && t.className);
+		return /* @__PURE__ */ c("div", {
+			className: "flex-1-0",
+			children: /* @__PURE__ */ c(r, {
+				src: t.src,
+				aspectRatio: t.aspectRatio ?? "16by9",
+				className: n
+			})
+		});
+	}, j = (e = {}) => e.type === u.MEDIA_TYPE_VIDEO ? A(e) : e.src && k(e), M = e("media-dialog", S && S), N = e("padding-0"), P = e("media-content", "content-center"), F = _[w].title, I = _[w].subtitle || null;
+	return /* @__PURE__ */ c(n, {
+		...C,
+		show: f,
+		title: F,
+		subtitle: I,
+		body: /* @__PURE__ */ c("div", {
+			className: P,
+			children: j(_[w])
+		}),
+		footer: _?.length > 1 && /* @__PURE__ */ l(s, { children: [
+			/* @__PURE__ */ l("button", {
+				type: "button",
+				className: "btn btn-primary btn-link pull-left",
+				onClick: E,
+				children: [/* @__PURE__ */ c("span", { className: "uikit-icon icon-chevron-left" }), v]
+			}),
+			/* @__PURE__ */ c("div", { children: `${w + 1} / ${d.media.length}` }),
+			/* @__PURE__ */ l("button", {
+				type: "button",
+				className: "btn btn-primary btn-link btn-icon-right",
+				onClick: D,
+				children: [/* @__PURE__ */ c("span", { className: "uikit-icon icon-chevron-right" }), b]
+			})
+		] }),
+		onClose: p,
+		className: M,
+		bodyClassName: N,
+		disableEsc: m,
+		useOverflow: h,
+		bsSize: g
+	});
 };
-m.MEDIA_TYPE_IMAGE = "image";
-m.MEDIA_TYPE_VIDEO = "video";
-export {
-  m as default
-};
-//# sourceMappingURL=MediaDialog.js.map
+u.MEDIA_TYPE_IMAGE = "image", u.MEDIA_TYPE_VIDEO = "video";
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=MediaDialog.js.map

package/components/dialog/MediaDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaDialog.js","sources":["../../../src/components/dialog/MediaDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport classNames from '../../utils/classNames';\nimport { noop } from 'es-toolkit/function';\n\nimport Dialog, { type BaseDialogProps } from './Dialog';\nimport ResponsiveVideo from '../video/ResponsiveVideo';\nimport ImagePreloader from '../preloader/ImagePreloader';\nimport Spinner from '../spinner/Spinner';\n\n// TODO: add keyboard support left/right\n\nexport type MediaDialogMedia = {\n    /**\n     * Defines the media type that is going to be displayed.\n     *\n     * Possible values are: `image` and `video`.\n     */\n    type: 'image' | 'video';\n\n    /**\n     * The source location for the media data.\n     */\n    src: string;\n\n    /**\n     * The name or title of the media used for the dialogs title.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Additional media information used for the dialogs subtitle.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Only relevant for videos where the aspect of the video is defined.\n     *\n     * Possible values are: `4by3` and `16by9`.\n     * @default '16by9'\n     */\n    aspectRatio?: '4by3' | '16by9';\n\n    /**\n     * Additional classes for the image element.\n     */\n    className?: string;\n};\n\nexport type MediaDialogProps = BaseDialogProps & {\n    /**\n     * List of media objects.\n     */\n    media: MediaDialogMedia[];\n\n    /**\n     * The button text for switching to the previous media if there are multiple.\n     */\n    previousButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the previous button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    previousButtonCallback?: (newIndex: number) => void;\n\n    /**\n     * The button text for switching to the next media if there are multiple.\n     */\n    nextButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the next button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    nextButtonCallback?: (newIndex: number) => void;\n};\n\nconst MediaDialog = (props: MediaDialogProps) => {\n    const {\n        show = false,\n        onClose = noop,\n        disableEsc = false,\n        useOverflow = false,\n        bsSize = 'lg',\n        media = [],\n        previousButtonText = 'Prev',\n        previousButtonCallback = noop,\n        nextButtonText = 'Next',\n        nextButtonCallback = noop,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [currentMediaIndex, setCurrentMediaIndex] = useState(0);\n\n    const handlePrevious = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === 0 ? props.media.length - 1 : oldIndex - 1;\n        setCurrentMediaIndex(newIndex);\n        previousButtonCallback(newIndex);\n    };\n\n    const handleNext = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === props.media.length - 1 ? 0 : oldIndex + 1;\n        setCurrentMediaIndex(newIndex);\n        nextButtonCallback(newIndex);\n    };\n\n    const renderFallback = () => (\n        <div className='text-center text-size-h3'>\n            <span className='rioglyph rioglyph-missing text-size-200pct text-color-gray' />\n        </div>\n    );\n\n    const renderImage = (mediaData: MediaDialogMedia) => {\n        const imageClassNames = classNames('img-responsive', mediaData.className && mediaData.className);\n\n        return (\n            // @ts-expect-error\n            <ImagePreloader src={mediaData.src} className={imageClassNames}>\n                {({ status, image }: { status: 'PENDING' | 'LOADED' | 'FAILED'; image: { src: string } }) => {\n                    if (status === ImagePreloader.STATUS_LOADED) {\n                        // When image has been loaded, render the image tag\n                        return <img className='ani-fade-in' key={image.src} src={image.src} />;\n                    }\n\n                    if (status === ImagePreloader.STATUS_FAILED) {\n                        return renderFallback();\n                    }\n\n                    return <Spinner isInverse={false} />;\n                }}\n            </ImagePreloader>\n        );\n    };\n\n    const renderVideo = (mediaData: MediaDialogMedia) => {\n        const videoClassNames = classNames(mediaData.className && mediaData.className);\n        return (\n            <div className='flex-1-0'>\n                <ResponsiveVideo\n                    src={mediaData.src}\n                    aspectRatio={mediaData.aspectRatio ?? '16by9'}\n                    className={videoClassNames}\n                />\n            </div>\n        );\n    };\n\n    const renderMediaContent = (mediaData = {} as MediaDialogMedia) => {\n        if (mediaData.type === MediaDialog.MEDIA_TYPE_VIDEO) {\n            return renderVideo(mediaData);\n        }\n\n        // image media is default\n        return mediaData.src && renderImage(mediaData);\n    };\n\n    const dialogClassName = classNames('media-dialog', className && className);\n    const bodyClassNames = classNames('padding-0');\n    const mediaContentClassNames = classNames('media-content', 'content-center');\n\n    const mediaTitle = media[currentMediaIndex].title;\n    const mediaSubtitle = media[currentMediaIndex].subtitle || null;\n\n    return (\n        <Dialog\n            {...remainingProps}\n            show={show}\n            title={mediaTitle}\n            subtitle={mediaSubtitle}\n            body={<div className={mediaContentClassNames}>{renderMediaContent(media[currentMediaIndex])}</div>}\n            footer={\n                media?.length > 1 && (\n                    <>\n                        <button type='button' className='btn btn-primary btn-link pull-left' onClick={handlePrevious}>\n                            <span className='rioglyph rioglyph-chevron-left' />\n                            {previousButtonText}\n                        </button>\n                        <div>{`${currentMediaIndex + 1} / ${props.media.length}`}</div>\n                        <button type='button' className='btn btn-primary btn-link btn-icon-right' onClick={handleNext}>\n                            <span className='rioglyph rioglyph-chevron-right' />\n                            {nextButtonText}\n                        </button>\n                    </>\n                )\n            }\n            onClose={onClose}\n            className={dialogClassName}\n            bodyClassName={bodyClassNames}\n            disableEsc={disableEsc}\n            useOverflow={useOverflow}\n            bsSize={bsSize}\n        />\n    );\n};\n\nMediaDialog.MEDIA_TYPE_IMAGE = 'image' as const;\nMediaDialog.MEDIA_TYPE_VIDEO = 'video' as const;\n\nexport default MediaDialog;\n"],"names":["MediaDialog","props","show","onClose","noop","disableEsc","useOverflow","bsSize","media","previousButtonText","previousButtonCallback","nextButtonText","nextButtonCallback","className","remainingProps","currentMediaIndex","setCurrentMediaIndex","useState","handlePrevious","oldIndex","newIndex","handleNext","renderFallback","jsx","renderImage","mediaData","imageClassNames","classNames","ImagePreloader","status","image","Spinner","renderVideo","videoClassNames","ResponsiveVideo","renderMediaContent","dialogClassName","bodyClassNames","mediaContentClassNames","mediaTitle","mediaSubtitle","Dialog","jsxs","Fragment"],"mappings":"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"}
+{"version":3,"file":"MediaDialog.js","names":[],"sources":["../../../src/components/dialog/MediaDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport classNames from '../../utils/classNames';\nimport { noop } from 'es-toolkit/function';\n\nimport Dialog, { type BaseDialogProps } from './Dialog';\nimport ResponsiveVideo from '../video/ResponsiveVideo';\nimport ImagePreloader from '../preloader/ImagePreloader';\nimport Spinner from '../spinner/Spinner';\n\n// TODO: add keyboard support left/right\n\nexport type MediaDialogMedia = {\n    /**\n     * Defines the media type that is going to be displayed.\n     *\n     * Possible values are: `image` and `video`.\n     */\n    type: 'image' | 'video';\n\n    /**\n     * The source location for the media data.\n     */\n    src: string;\n\n    /**\n     * The name or title of the media used for the dialogs title.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Additional media information used for the dialogs subtitle.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Only relevant for videos where the aspect of the video is defined.\n     *\n     * Possible values are: `4by3` and `16by9`.\n     * @default '16by9'\n     */\n    aspectRatio?: '4by3' | '16by9';\n\n    /**\n     * Additional classes for the image element.\n     */\n    className?: string;\n};\n\nexport type MediaDialogProps = BaseDialogProps & {\n    /**\n     * List of media objects.\n     */\n    media: MediaDialogMedia[];\n\n    /**\n     * The button text for switching to the previous media if there are multiple.\n     */\n    previousButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the previous button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    previousButtonCallback?: (newIndex: number) => void;\n\n    /**\n     * The button text for switching to the next media if there are multiple.\n     */\n    nextButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the next button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    nextButtonCallback?: (newIndex: number) => void;\n};\n\nconst MediaDialog = (props: MediaDialogProps) => {\n    const {\n        show = false,\n        onClose = noop,\n        disableEsc = false,\n        useOverflow = false,\n        bsSize = 'lg',\n        media = [],\n        previousButtonText = 'Prev',\n        previousButtonCallback = noop,\n        nextButtonText = 'Next',\n        nextButtonCallback = noop,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [currentMediaIndex, setCurrentMediaIndex] = useState(0);\n\n    const handlePrevious = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === 0 ? props.media.length - 1 : oldIndex - 1;\n        setCurrentMediaIndex(newIndex);\n        previousButtonCallback(newIndex);\n    };\n\n    const handleNext = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === props.media.length - 1 ? 0 : oldIndex + 1;\n        setCurrentMediaIndex(newIndex);\n        nextButtonCallback(newIndex);\n    };\n\n    const renderFallback = () => (\n        <div className='text-center text-size-h3'>\n            <span className='uikit-icon icon-missing text-size-200pct text-color-gray' />\n        </div>\n    );\n\n    const renderImage = (mediaData: MediaDialogMedia) => {\n        const imageClassNames = classNames('img-responsive', mediaData.className && mediaData.className);\n\n        return (\n            // @ts-expect-error\n            <ImagePreloader src={mediaData.src} className={imageClassNames}>\n                {({ status, image }: { status: 'PENDING' | 'LOADED' | 'FAILED'; image: { src: string } }) => {\n                    if (status === ImagePreloader.STATUS_LOADED) {\n                        // When image has been loaded, render the image tag\n                        return <img className='ani-fade-in' key={image.src} src={image.src} />;\n                    }\n\n                    if (status === ImagePreloader.STATUS_FAILED) {\n                        return renderFallback();\n                    }\n\n                    return <Spinner isInverse={false} />;\n                }}\n            </ImagePreloader>\n        );\n    };\n\n    const renderVideo = (mediaData: MediaDialogMedia) => {\n        const videoClassNames = classNames(mediaData.className && mediaData.className);\n        return (\n            <div className='flex-1-0'>\n                <ResponsiveVideo\n                    src={mediaData.src}\n                    aspectRatio={mediaData.aspectRatio ?? '16by9'}\n                    className={videoClassNames}\n                />\n            </div>\n        );\n    };\n\n    const renderMediaContent = (mediaData = {} as MediaDialogMedia) => {\n        if (mediaData.type === MediaDialog.MEDIA_TYPE_VIDEO) {\n            return renderVideo(mediaData);\n        }\n\n        // image media is default\n        return mediaData.src && renderImage(mediaData);\n    };\n\n    const dialogClassName = classNames('media-dialog', className && className);\n    const bodyClassNames = classNames('padding-0');\n    const mediaContentClassNames = classNames('media-content', 'content-center');\n\n    const mediaTitle = media[currentMediaIndex].title;\n    const mediaSubtitle = media[currentMediaIndex].subtitle || null;\n\n    return (\n        <Dialog\n            {...remainingProps}\n            show={show}\n            title={mediaTitle}\n            subtitle={mediaSubtitle}\n            body={<div className={mediaContentClassNames}>{renderMediaContent(media[currentMediaIndex])}</div>}\n            footer={\n                media?.length > 1 && (\n                    <>\n                        <button type='button' className='btn btn-primary btn-link pull-left' onClick={handlePrevious}>\n                            <span className='uikit-icon icon-chevron-left' />\n                            {previousButtonText}\n                        </button>\n                        <div>{`${currentMediaIndex + 1} / ${props.media.length}`}</div>\n                        <button type='button' className='btn btn-primary btn-link btn-icon-right' onClick={handleNext}>\n                            <span className='uikit-icon icon-chevron-right' />\n                            {nextButtonText}\n                        </button>\n                    </>\n                )\n            }\n            onClose={onClose}\n            className={dialogClassName}\n            bodyClassName={bodyClassNames}\n            disableEsc={disableEsc}\n            useOverflow={useOverflow}\n            bsSize={bsSize}\n        />\n    );\n};\n\nMediaDialog.MEDIA_TYPE_IMAGE = 'image' as const;\nMediaDialog.MEDIA_TYPE_VIDEO = 'video' as const;\n\nexport default MediaDialog;\n"],"mappings":";;;;;;;;;AAgFA,IAAM,KAAe,MAA4B;CAC7C,IAAM,EACF,UAAO,IACP,aAAU,GACV,gBAAa,IACb,iBAAc,IACd,YAAS,MACT,WAAQ,CAAC,GACT,wBAAqB,QACrB,4BAAyB,GACzB,oBAAiB,QACjB,wBAAqB,GACrB,cACA,GAAG,MACH,GAEE,CAAC,GAAmB,KAAwB,EAAS,CAAC,GAEtD,UAAuB;EACzB,IAAM,IAAW,GACX,IAAW,MAAa,IAAI,EAAM,MAAM,SAAS,IAAI,IAAW;EAEtE,AADA,EAAqB,CAAQ,GAC7B,EAAuB,CAAQ;CACnC,GAEM,UAAmB;EACrB,IAAM,IAAW,GACX,IAAW,MAAa,EAAM,MAAM,SAAS,IAAI,IAAI,IAAW;EAEtE,AADA,EAAqB,CAAQ,GAC7B,EAAmB,CAAQ;CAC/B,GAEM,UACF,kBAAC,OAAD;EAAK,WAAU;YACX,kBAAC,QAAD,EAAM,WAAU,2DAA4D,CAAA;CAC3E,CAAA,GAGH,KAAe,MAAgC;EACjD,IAAM,IAAkB,EAAW,kBAAkB,EAAU,aAAa,EAAU,SAAS;EAE/F,OAEI,kBAAC,GAAD;GAAgB,KAAK,EAAU;GAAK,WAAW;cACzC,EAAE,WAAQ,eACJ,MAAW,EAAe,gBAEnB,kBAAC,OAAD;IAAK,WAAU;IAA8B,KAAK,EAAM;GAAM,GAA5B,EAAM,GAAsB,IAGrE,MAAW,EAAe,gBACnB,EAAe,IAGnB,kBAAC,GAAD,EAAS,WAAW,GAAQ,CAAA;EAE3B,CAAA;CAExB,GAEM,KAAe,MAAgC;EACjD,IAAM,IAAkB,EAAW,EAAU,aAAa,EAAU,SAAS;EAC7E,OACI,kBAAC,OAAD;GAAK,WAAU;aACX,kBAAC,GAAD;IACI,KAAK,EAAU;IACf,aAAa,EAAU,eAAe;IACtC,WAAW;GACd,CAAA;EACA,CAAA;CAEb,GAEM,KAAsB,IAAY,CAAC,MACjC,EAAU,SAAS,EAAY,mBACxB,EAAY,CAAS,IAIzB,EAAU,OAAO,EAAY,CAAS,GAG3C,IAAkB,EAAW,gBAAgB,KAAa,CAAS,GACnE,IAAiB,EAAW,WAAW,GACvC,IAAyB,EAAW,iBAAiB,gBAAgB,GAErE,IAAa,EAAM,EAAkB,CAAC,OACtC,IAAgB,EAAM,EAAkB,CAAC,YAAY;CAE3D,OACI,kBAAC,GAAD;EACI,GAAI;EACE;EACN,OAAO;EACP,UAAU;EACV,MAAM,kBAAC,OAAD;GAAK,WAAW;aAAyB,EAAmB,EAAM,EAAkB;EAAO,CAAA;EACjG,QACI,GAAO,SAAS,KACZ,kBAAA,GAAA,EAAA,UAAA;GACI,kBAAC,UAAD;IAAQ,MAAK;IAAS,WAAU;IAAqC,SAAS;cAA9E,CACI,kBAAC,QAAD,EAAM,WAAU,+BAAgC,CAAA,GAC/C,CACG;;GACR,kBAAC,OAAD,EAAA,UAAM,GAAG,IAAoB,EAAE,KAAK,EAAM,MAAM,SAAc,CAAA;GAC9D,kBAAC,UAAD;IAAQ,MAAK;IAAS,WAAU;IAA0C,SAAS;cAAnF,CACI,kBAAC,QAAD,EAAM,WAAU,gCAAiC,CAAA,GAChD,CACG;;EACV,EAAA,CAAA;EAGD;EACT,WAAW;EACX,eAAe;EACH;EACC;EACL;CACX,CAAA;AAET;AAEA,EAAY,mBAAmB,SAC/B,EAAY,mBAAmB"}