@plumile/backoffice-react 0.1.59

package/lib/esm/components/backoffice/actions/toastViewAction.js

@@ -0,0 +1,27 @@
+//#region src/components/backoffice/actions/toastViewAction.ts
+var e = (e, t) => e(t), t = (t, n) => {
+	let r = e(t.title, n), i;
+	return t.message != null && (i = e(t.message, n)), {
+		title: r,
+		message: i
+	};
+}, n = (t) => {
+	let { toast: n } = t;
+	if (n.view == null) return;
+	let r = n.view.getTargetId(t.response, t.node);
+	if (r == null || r.trim() === "") return;
+	let i = t.entities[n.view.entityId];
+	if (i == null) return;
+	let a = i.routes.detail(r), o = t.defaultLabel;
+	return n.view.label != null && (o = e(n.view.label, t.tApp)), [{
+		id: `view-${n.view.entityId}-${r}`,
+		label: o,
+		onClick: () => {
+			t.navigateTo(a);
+		}
+	}];
+};
+//#endregion
+export { t as resolveToastSpec, n as resolveToastViewActions };
+
+//# sourceMappingURL=toastViewAction.js.map

package/lib/esm/components/backoffice/actions/toastViewAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toastViewAction.js","names":[],"sources":["../../../../../src/components/backoffice/actions/toastViewAction.ts"],"sourcesContent":["import type { TFunction } from 'i18next';\n\nimport type {\n  BackofficeActionToastSpec,\n  BackofficeEntityManifestMap,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\nimport type { ToastAction } from '@plumile/ui';\n\nconst resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\nexport const resolveToastSpec = <Node = unknown, Response = unknown>(\n  toast: BackofficeActionToastSpec<Node, Response>,\n  tApp: TFunction,\n): { title: string; message?: string } => {\n  const title = resolveLabel(toast.title, tApp);\n  let message: string | undefined;\n  if (toast.message != null) {\n    message = resolveLabel(toast.message, tApp);\n  }\n  return { title, message };\n};\n\nexport const resolveToastViewActions = <\n  Node = unknown,\n  Response = unknown,\n>(input: {\n  toast: BackofficeActionToastSpec<Node, Response>;\n  response: Response;\n  node: Node;\n  tApp: TFunction;\n  entities: BackofficeEntityManifestMap;\n  defaultLabel: string;\n  navigateTo: (to: string) => void;\n}): readonly ToastAction[] | undefined => {\n  const { toast } = input;\n  if (toast.view == null) {\n    return undefined;\n  }\n\n  const targetId = toast.view.getTargetId(input.response, input.node);\n  if (targetId == null || targetId.trim() === '') {\n    return undefined;\n  }\n\n  const entity = input.entities[toast.view.entityId];\n  if (entity == null) {\n    return undefined;\n  }\n\n  const href = entity.routes.detail(targetId);\n  let label = input.defaultLabel;\n  if (toast.view.label != null) {\n    label = resolveLabel(toast.view.label, input.tApp);\n  }\n\n  return [\n    {\n      id: `view-${toast.view.entityId}-${targetId}`,\n      label,\n      onClick: () => {\n        input.navigateTo(href);\n      },\n    },\n  ];\n};\n"],"mappings":";AASA,IAAM,KAAgB,GAAkB,MAC/B,EAAM,EAAK,EAGP,KACX,GACA,MACwC;CACxC,IAAM,IAAQ,EAAa,EAAM,OAAO,EAAK,EACzC;AAIJ,QAHI,EAAM,WAAW,SACnB,IAAU,EAAa,EAAM,SAAS,EAAK,GAEtC;EAAE;EAAO;EAAS;GAGd,KAGX,MAQwC;CACxC,IAAM,EAAE,aAAU;AAClB,KAAI,EAAM,QAAQ,KAChB;CAGF,IAAM,IAAW,EAAM,KAAK,YAAY,EAAM,UAAU,EAAM,KAAK;AACnE,KAAI,KAAY,QAAQ,EAAS,MAAM,KAAK,GAC1C;CAGF,IAAM,IAAS,EAAM,SAAS,EAAM,KAAK;AACzC,KAAI,KAAU,KACZ;CAGF,IAAM,IAAO,EAAO,OAAO,OAAO,EAAS,EACvC,IAAQ,EAAM;AAKlB,QAJI,EAAM,KAAK,SAAS,SACtB,IAAQ,EAAa,EAAM,KAAK,OAAO,EAAM,KAAK,GAG7C,CACL;EACE,IAAI,QAAQ,EAAM,KAAK,SAAS,GAAG;EACnC;EACA,eAAe;AACb,KAAM,WAAW,EAAK;;EAEzB,CACF"}

package/lib/esm/components/backoffice/columns/buildDataTableColumns.js

@@ -0,0 +1,60 @@
+import { Fragment as e, jsx as t } from "react/jsx-runtime";
+import { FormattedDate as n } from "@plumile/ui";
+import { Link as r } from "@plumile/router";
+import { BACKOFFICE_DATE_TIME_OPTIONS as i } from "@plumile/backoffice-core/constants.js";
+import { Tag as a } from "@plumile/ui-backoffice/backoffice/atoms/tag/Tag.js";
+//#region src/components/backoffice/columns/buildDataTableColumns.tsx
+var o = (e, t) => e(t), s = (e, t) => e == null || typeof e == "string" && e.trim() === "" ? t : String(e);
+function c(c, l) {
+	let { tApp: u, t: d, resolveEntityHref: f } = l, p = d("common.notAvailable");
+	return c.filter((e) => e.key !== "id").map((c) => ({
+		id: c.key,
+		header: o(c.header, u),
+		size: c.size,
+		cell: (o) => {
+			let { cell: l } = c;
+			switch (l.type) {
+				case "text": return s(l.value(o), p);
+				case "link": {
+					let e = l.value(o);
+					return e == null || typeof e == "string" && e.trim() === "" ? p : /* @__PURE__ */ t(r, {
+						to: l.to(o),
+						children: e
+					});
+				}
+				case "badge": {
+					let e = l.value(o);
+					if (e == null || e.trim() === "") return p;
+					let { tone: n } = l;
+					return typeof n == "function" && (n = n(o)), /* @__PURE__ */ t(a, {
+						tone: n,
+						children: e
+					});
+				}
+				case "dateTime": return /* @__PURE__ */ t(n, {
+					value: l.value(o),
+					fallback: p,
+					options: i
+				});
+				case "entityRef": {
+					let e = l.value(o);
+					if (e.trim() === "") return p;
+					let n = f?.(l.entity, e) ?? null;
+					return n == null ? p : /* @__PURE__ */ t(r, {
+						to: n,
+						children: d("actions.view")
+					});
+				}
+				case "custom": {
+					let n = l.render(o);
+					return n == null || n === "" ? p : /* @__PURE__ */ t(e, { children: n });
+				}
+				default: return p;
+			}
+		}
+	}));
+}
+//#endregion
+export { c as buildDataTableColumns };
+
+//# sourceMappingURL=buildDataTableColumns.js.map

package/lib/esm/components/backoffice/columns/buildDataTableColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildDataTableColumns.js","names":[],"sources":["../../../../../src/components/backoffice/columns/buildDataTableColumns.tsx"],"sourcesContent":["import { BACKOFFICE_DATE_TIME_OPTIONS } from '@plumile/backoffice-core/constants.js';\nimport type {\n  BackofficeColumnSpec,\n  BackofficeFieldSize,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\nimport type { TFunction } from 'i18next';\nimport { Link } from '@plumile/router';\nimport { Tag } from '@plumile/ui-backoffice/backoffice/atoms/tag/Tag.js';\nimport { FormattedDate, type DataTableColumn } from '@plumile/ui';\n\nconst resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\nconst resolveTextValue = (\n  value: string | number | null,\n  fallback: string,\n): string => {\n  if (value == null) {\n    return fallback;\n  }\n  if (typeof value === 'string' && value.trim() === '') {\n    return fallback;\n  }\n  return String(value);\n};\n\nexport type BuildDataTableColumnsOptions = {\n  tApp: TFunction;\n  t: TFunction;\n  resolveEntityHref?: (entityId: string, refId: string) => string | null;\n};\n\nexport type BackofficeSizedDataTableColumn<Row> = DataTableColumn<Row> & {\n  size: BackofficeFieldSize;\n};\n\n/**\n *\n */\nexport function buildDataTableColumns<Row>(\n  columns: readonly BackofficeColumnSpec<Row>[],\n  options: BuildDataTableColumnsOptions,\n): readonly BackofficeSizedDataTableColumn<Row>[] {\n  const { tApp, t, resolveEntityHref } = options;\n  const fallback = t('common.notAvailable');\n  const filteredColumns = columns.filter((column) => {\n    return column.key !== 'id';\n  });\n\n  return filteredColumns.map((column) => {\n    return {\n      id: column.key,\n      header: resolveLabel(column.header, tApp),\n      size: column.size,\n      cell: (row) => {\n        const { cell } = column;\n        switch (cell.type) {\n          case 'text': {\n            return resolveTextValue(cell.value(row), fallback);\n          }\n          case 'link': {\n            const value = cell.value(row);\n            if (\n              value == null ||\n              (typeof value === 'string' && value.trim() === '')\n            ) {\n              return fallback;\n            }\n            return <Link to={cell.to(row)}>{value}</Link>;\n          }\n          case 'badge': {\n            const value = cell.value(row);\n            if (value == null || value.trim() === '') {\n              return fallback;\n            }\n            let { tone } = cell;\n            if (typeof tone === 'function') {\n              tone = tone(row);\n            }\n            return <Tag tone={tone}>{value}</Tag>;\n          }\n          case 'dateTime': {\n            const value = cell.value(row);\n            return (\n              <FormattedDate\n                value={value}\n                fallback={fallback}\n                options={BACKOFFICE_DATE_TIME_OPTIONS}\n              />\n            );\n          }\n          case 'entityRef': {\n            const id = cell.value(row);\n            if (id.trim() === '') {\n              return fallback;\n            }\n            const href = resolveEntityHref?.(cell.entity, id) ?? null;\n            if (href != null) {\n              return <Link to={href}>{t('actions.view')}</Link>;\n            }\n            return fallback;\n          }\n          case 'custom': {\n            const rendered = cell.render(row);\n            if (rendered == null || rendered === '') {\n              return fallback;\n            }\n            return <>{rendered}</>;\n          }\n          default: {\n            return fallback;\n          }\n        }\n      },\n    };\n  });\n}\n"],"mappings":";;;;;;AAWA,IAAM,KAAgB,GAAkB,MAC/B,EAAM,EAAK,EAGd,KACJ,GACA,MAEI,KAAS,QAGT,OAAO,KAAU,YAAY,EAAM,MAAM,KAAK,KACzC,IAEF,OAAO,EAAM;AAgBtB,SAAgB,EACd,GACA,GACgD;CAChD,IAAM,EAAE,SAAM,MAAG,yBAAsB,GACjC,IAAW,EAAE,sBAAsB;AAKzC,QAJwB,EAAQ,QAAQ,MAC/B,EAAO,QAAQ,KACtB,CAEqB,KAAK,OACnB;EACL,IAAI,EAAO;EACX,QAAQ,EAAa,EAAO,QAAQ,EAAK;EACzC,MAAM,EAAO;EACb,OAAO,MAAQ;GACb,IAAM,EAAE,YAAS;AACjB,WAAQ,EAAK,MAAb;IACE,KAAK,OACH,QAAO,EAAiB,EAAK,MAAM,EAAI,EAAE,EAAS;IAEpD,KAAK,QAAQ;KACX,IAAM,IAAQ,EAAK,MAAM,EAAI;AAO7B,YALE,KAAS,QACR,OAAO,KAAU,YAAY,EAAM,MAAM,KAAK,KAExC,IAEF,kBAAC,GAAD;MAAM,IAAI,EAAK,GAAG,EAAI;gBAAG;MAAa,CAAA;;IAE/C,KAAK,SAAS;KACZ,IAAM,IAAQ,EAAK,MAAM,EAAI;AAC7B,SAAI,KAAS,QAAQ,EAAM,MAAM,KAAK,GACpC,QAAO;KAET,IAAI,EAAE,YAAS;AAIf,YAHI,OAAO,KAAS,eAClB,IAAO,EAAK,EAAI,GAEX,kBAAC,GAAD;MAAW;gBAAO;MAAY,CAAA;;IAEvC,KAAK,WAEH,QACE,kBAAC,GAAD;KACS,OAHG,EAAK,MAAM,EAAI;KAIf;KACV,SAAS;KACT,CAAA;IAGN,KAAK,aAAa;KAChB,IAAM,IAAK,EAAK,MAAM,EAAI;AAC1B,SAAI,EAAG,MAAM,KAAK,GAChB,QAAO;KAET,IAAM,IAAO,IAAoB,EAAK,QAAQ,EAAG,IAAI;AAIrD,YAHI,KAAQ,OAGL,IAFE,kBAAC,GAAD;MAAM,IAAI;gBAAO,EAAE,eAAe;MAAQ,CAAA;;IAIrD,KAAK,UAAU;KACb,IAAM,IAAW,EAAK,OAAO,EAAI;AAIjC,YAHI,KAAY,QAAQ,MAAa,KAC5B,IAEF,kBAAA,GAAA,EAAA,UAAG,GAAY,CAAA;;IAExB,QACE,QAAO;;;EAId,EACD"}

package/lib/esm/components/backoffice/detail/BackofficeDetailBadgeRow.js

@@ -0,0 +1,22 @@
+import { row as e } from "./backofficeDetailBadgeRow.css.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useTranslation as n } from "react-i18next";
+import { Tag as r } from "@plumile/ui-backoffice/backoffice/atoms/tag/Tag.js";
+//#region src/components/backoffice/detail/BackofficeDetailBadgeRow.tsx
+var i = ({ items: i }) => {
+	let { t: a } = n();
+	return /* @__PURE__ */ t("div", {
+		className: e,
+		children: i.map((e) => {
+			let n = typeof e.label == "function" ? e.label(a) : e.label;
+			return /* @__PURE__ */ t(r, {
+				tone: e.tone ?? "neutral",
+				children: n
+			}, e.id);
+		})
+	});
+};
+//#endregion
+export { i as BackofficeDetailBadgeRow, i as default };
+
+//# sourceMappingURL=BackofficeDetailBadgeRow.js.map

package/lib/esm/components/backoffice/detail/BackofficeDetailBadgeRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeDetailBadgeRow.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailBadgeRow.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport { type JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { BackofficeBadgeItem } from '@plumile/backoffice-core/types.js';\nimport { Tag } from '@plumile/ui-backoffice/backoffice/atoms/tag/Tag.js';\n\nimport * as styles from './backofficeDetailBadgeRow.css.js';\n\nexport type BackofficeDetailBadgeRowProps = {\n  items: readonly BackofficeBadgeItem[];\n};\n\nexport const BackofficeDetailBadgeRow = ({\n  items,\n}: BackofficeDetailBadgeRowProps): JSX.Element => {\n  const { t } = useTranslation();\n  return (\n    <div className={styles.row}>\n      {items.map((item) => {\n        const label =\n          typeof item.label === 'function' ? item.label(t) : item.label;\n        return (\n          <Tag key={item.id} tone={item.tone ?? 'neutral'}>\n            {label}\n          </Tag>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default BackofficeDetailBadgeRow;\n"],"mappings":";;;;;AAaA,IAAa,KAA4B,EACvC,eACgD;CAChD,IAAM,EAAE,SAAM,GAAgB;AAC9B,QACE,kBAAC,OAAD;EAAK,WAAW;YACb,EAAM,KAAK,MAAS;GACnB,IAAM,IACJ,OAAO,EAAK,SAAU,aAAa,EAAK,MAAM,EAAE,GAAG,EAAK;AAC1D,UACE,kBAAC,GAAD;IAAmB,MAAM,EAAK,QAAQ;cACnC;IACG,EAFI,EAAK,GAET;IAER;EACE,CAAA"}

package/lib/esm/components/backoffice/detail/BackofficeDetailErrorList.js

@@ -0,0 +1,41 @@
+import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
+import { BackofficeDetailSection as t } from "./BackofficeDetailSection.js";
+import { formatJsonPayload as n } from "./detailPayloadUtils.js";
+import { code as r, details as i, header as a, item as o, itemSurface as s, list as c, message as l } from "./backofficeDetailErrorList.css.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { cx as f } from "@plumile/ui/theme/tools.js";
+import { LazyMarkdownRenderer as p } from "@plumile/ui/atomic/molecules/markdown/LazyMarkdownRenderer.js";
+//#region src/components/backoffice/detail/BackofficeDetailErrorList.tsx
+var m = ({ title: m, description: h, items: g }) => {
+	let { t: _ } = e();
+	return g.length === 0 ? null : /* @__PURE__ */ u(t, {
+		title: m,
+		description: h,
+		children: /* @__PURE__ */ u("div", {
+			className: c,
+			children: g.map((e, t) => {
+				let c = _("common.notAvailable");
+				return e.details != null && (c = n(e.details)), /* @__PURE__ */ d("div", {
+					className: f(o, s),
+					children: [/* @__PURE__ */ d("div", {
+						className: a,
+						children: [/* @__PURE__ */ u("span", {
+							className: r,
+							children: e.code
+						}), /* @__PURE__ */ u("span", {
+							className: l,
+							children: e.message
+						})]
+					}), /* @__PURE__ */ u("div", {
+						className: i,
+						children: /* @__PURE__ */ u(p, { content: c })
+					})]
+				}, `${e.code}-${t}`);
+			})
+		})
+	});
+};
+//#endregion
+export { m as BackofficeDetailErrorList, m as default };
+
+//# sourceMappingURL=BackofficeDetailErrorList.js.map

package/lib/esm/components/backoffice/detail/BackofficeDetailErrorList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeDetailErrorList.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailErrorList.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { LazyMarkdownRenderer } from '@plumile/ui/atomic/molecules/markdown/LazyMarkdownRenderer.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { BackofficeDetailSection } from './BackofficeDetailSection.js';\nimport { formatJsonPayload } from './detailPayloadUtils.js';\n\nimport * as styles from './backofficeDetailErrorList.css.js';\nimport { cx } from '@plumile/ui/theme/tools.js';\n\nexport type BackofficeDetailErrorItem = {\n  code: string;\n  message: string;\n  details?: unknown;\n};\n\nexport type BackofficeDetailErrorListProps = {\n  title: string;\n  description?: string;\n  items: readonly BackofficeDetailErrorItem[];\n};\n\nexport const BackofficeDetailErrorList = ({\n  title,\n  description,\n  items,\n}: BackofficeDetailErrorListProps): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <BackofficeDetailSection title={title} description={description}>\n      <div className={styles.list}>\n        {items.map((error, index) => {\n          let details = t('common.notAvailable');\n          if (error.details != null) {\n            details = formatJsonPayload(error.details);\n          }\n          return (\n            <div\n              key={`${error.code}-${index}`}\n              className={cx(styles.item, styles.itemSurface)}\n            >\n              <div className={styles.header}>\n                <span className={styles.code}>{error.code}</span>\n                <span className={styles.message}>{error.message}</span>\n              </div>\n              <div className={styles.details}>\n                <LazyMarkdownRenderer content={details} />\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </BackofficeDetailSection>\n  );\n};\n\nexport default BackofficeDetailErrorList;\n"],"mappings":";;;;;;;;AAuBA,IAAa,KAA6B,EACxC,UACA,gBACA,eACwD;CACxD,IAAM,EAAE,SAAM,GAA+B;AAM7C,QAJI,EAAM,WAAW,IACZ,OAIP,kBAAC,GAAD;EAAgC;EAAoB;YAClD,kBAAC,OAAD;GAAK,WAAW;aACb,EAAM,KAAK,GAAO,MAAU;IAC3B,IAAI,IAAU,EAAE,sBAAsB;AAItC,WAHI,EAAM,WAAW,SACnB,IAAU,EAAkB,EAAM,QAAQ,GAG1C,kBAAC,OAAD;KAEE,WAAW,EAAG,GAAa,EAAmB;eAFhD,CAIE,kBAAC,OAAD;MAAK,WAAW;gBAAhB,CACE,kBAAC,QAAD;OAAM,WAAW;iBAAc,EAAM;OAAY,CAAA,EACjD,kBAAC,QAAD;OAAM,WAAW;iBAAiB,EAAM;OAAe,CAAA,CACnD;SACN,kBAAC,OAAD;MAAK,WAAW;gBACd,kBAAC,GAAD,EAAsB,SAAS,GAAW,CAAA;MACtC,CAAA,CACF;OAVC,GAAG,EAAM,KAAK,GAAG,IAUlB;KAER;GACE,CAAA;EACkB,CAAA"}

package/lib/esm/components/backoffice/detail/BackofficeDetailField.js

@@ -0,0 +1,31 @@
+import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
+import { field as t, fullWidth as n, label as r, size as i, value as a } from "./backofficeDetailField.css.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { cx as c } from "@plumile/ui/theme/tools.js";
+import { CopyableText as l } from "@plumile/ui-backoffice/backoffice/atoms/copyable_text/CopyableText.js";
+//#region src/components/backoffice/detail/BackofficeDetailField.tsx
+var u = ({ label: u, size: d, value: f, copyValue: p, fullWidth: m = !1 }) => {
+	let { t: h } = e(), g = f;
+	(g == null || typeof g == "string" && g.trim() === "") && (g = h("common.notAvailable")), p != null && p !== "" && (g = /* @__PURE__ */ o(l, {
+		value: p,
+		copyValue: p,
+		truncate: !1,
+		copyLabel: h("common.actions.copy"),
+		copiedLabel: h("common.actions.copied")
+	}));
+	let _ = [t, i[d]];
+	return m && _.push(n), /* @__PURE__ */ s("div", {
+		className: c(..._),
+		children: [/* @__PURE__ */ o("span", {
+			className: r,
+			children: u
+		}), /* @__PURE__ */ o("div", {
+			className: a,
+			children: g
+		})]
+	});
+};
+//#endregion
+export { u as BackofficeDetailField, u as default };
+
+//# sourceMappingURL=BackofficeDetailField.js.map

package/lib/esm/components/backoffice/detail/BackofficeDetailField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeDetailField.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailField.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport type { BackofficeFieldSize } from '@plumile/backoffice-core/types.js';\n\nimport { CopyableText } from '@plumile/ui-backoffice/backoffice/atoms/copyable_text/CopyableText.js';\nimport { cx } from '@plumile/ui/theme/tools.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './backofficeDetailField.css.js';\n\nexport type BackofficeDetailFieldProps = {\n  id: string;\n  label: string;\n  size: BackofficeFieldSize;\n  value: ReactNode | null | undefined;\n  copyValue?: string;\n  fullWidth?: boolean;\n};\n\nexport const BackofficeDetailField = ({\n  label,\n  size,\n  value,\n  copyValue,\n  fullWidth = false,\n}: BackofficeDetailFieldProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  let resolvedValue: ReactNode = value;\n  if (\n    resolvedValue == null ||\n    (typeof resolvedValue === 'string' && resolvedValue.trim() === '')\n  ) {\n    resolvedValue = t('common.notAvailable');\n  }\n\n  if (copyValue != null && copyValue !== '') {\n    resolvedValue = (\n      <CopyableText\n        value={copyValue}\n        copyValue={copyValue}\n        truncate={false}\n        copyLabel={t('common.actions.copy')}\n        copiedLabel={t('common.actions.copied')}\n      />\n    );\n  }\n\n  const fieldClassNames = [styles.field, styles.size[size]];\n  if (fullWidth) {\n    fieldClassNames.push(styles.fullWidth);\n  }\n\n  return (\n    <div className={cx(...fieldClassNames)}>\n      <span className={styles.label}>{label}</span>\n      <div className={styles.value}>{resolvedValue}</div>\n    </div>\n  );\n};\n\nexport default BackofficeDetailField;\n"],"mappings":";;;;;;AAmBA,IAAa,KAAyB,EACpC,OAAA,GACA,MAAA,GACA,OAAA,GACA,cACA,WAAA,IAAY,SACiC;CAC7C,IAAM,EAAE,SAAM,GAA+B,EACzC,IAA2B;AAQ/B,EANE,KAAiB,QAChB,OAAO,KAAkB,YAAY,EAAc,MAAM,KAAK,QAE/D,IAAgB,EAAE,sBAAsB,GAGtC,KAAa,QAAQ,MAAc,OACrC,IACE,kBAAC,GAAD;EACE,OAAO;EACI;EACX,UAAU;EACV,WAAW,EAAE,sBAAsB;EACnC,aAAa,EAAE,wBAAwB;EACvC,CAAA;CAIN,IAAM,IAAkB,CAAC,GAAc,EAAY,GAAM;AAKzD,QAJI,KACF,EAAgB,KAAK,EAAiB,EAItC,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAG,EAAgB;YAAtC,CACE,kBAAC,QAAD;GAAM,WAAW;aAAe;GAAa,CAAA,EAC7C,kBAAC,OAAD;GAAK,WAAW;aAAe;GAAoB,CAAA,CAC/C"}

package/lib/esm/components/backoffice/detail/BackofficeDetailFlagTag.css.js

@@ -0,0 +1,8 @@
+/* empty css                                             */
+/* empty css                                       */
+//#region src/components/backoffice/detail/BackofficeDetailFlagTag.css.ts
+var e = "_1lzrtns0 vncd899io vncd89co vncd89ao6", t = "_1lzrtns2 _1lzrtns1 vncd899io vncd89co", n = "_1lzrtns3";
+//#endregion
+export { e as content, t as icon, n as label };
+
+//# sourceMappingURL=BackofficeDetailFlagTag.css.js.map

package/lib/esm/components/backoffice/detail/BackofficeDetailFlagTag.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeDetailFlagTag.css.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailFlagTag.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const content = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n});\n\nexport const icon = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n  }),\n  {\n    flex: '0 0 auto',\n  },\n]);\n\nexport const label = style({\n  flex: '0 1 auto',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/detail/BackofficeDetailFlagTag.js

@@ -0,0 +1,24 @@
+import { content as e, icon as t, label as n } from "./BackofficeDetailFlagTag.css.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Tag as a } from "@plumile/ui-backoffice/backoffice/atoms/tag/Tag.js";
+//#region src/components/backoffice/detail/BackofficeDetailFlagTag.tsx
+var o = ({ tone: o, icon: s, label: c }) => {
+	let l = s != null, u = null;
+	return l && (u = /* @__PURE__ */ r("span", {
+		className: t,
+		children: s
+	})), /* @__PURE__ */ r(a, {
+		tone: o,
+		children: /* @__PURE__ */ i("span", {
+			className: e,
+			children: [u, /* @__PURE__ */ r("span", {
+				className: n,
+				children: c
+			})]
+		})
+	});
+};
+//#endregion
+export { o as BackofficeDetailFlagTag, o as default };
+
+//# sourceMappingURL=BackofficeDetailFlagTag.js.map

package/lib/esm/components/backoffice/detail/BackofficeDetailFlagTag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeDetailFlagTag.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailFlagTag.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport {\n  Tag,\n  type TagTone,\n} from '@plumile/ui-backoffice/backoffice/atoms/tag/Tag.js';\n\nimport * as styles from './BackofficeDetailFlagTag.css.js';\n\nexport type BackofficeDetailFlagTagProps = {\n  tone: TagTone;\n  icon?: ReactNode;\n  label: string;\n};\n\nexport const BackofficeDetailFlagTag = ({\n  tone,\n  icon,\n  label,\n}: BackofficeDetailFlagTagProps): JSX.Element => {\n  const hasIcon = icon != null;\n  let iconNode: ReactNode | null = null;\n  if (hasIcon) {\n    iconNode = <span className={styles.icon}>{icon}</span>;\n  }\n\n  return (\n    <Tag tone={tone}>\n      <span className={styles.content}>\n        {iconNode}\n        <span className={styles.label}>{label}</span>\n      </span>\n    </Tag>\n  );\n};\n\nexport default BackofficeDetailFlagTag;\n"],"mappings":";;;;AAeA,IAAa,KAA2B,EACtC,SACA,MAAA,GACA,OAAA,QAC+C;CAC/C,IAAM,IAAU,KAAQ,MACpB,IAA6B;AAKjC,QAJI,MACF,IAAW,kBAAC,QAAD;EAAM,WAAW;YAAc;EAAY,CAAA,GAItD,kBAAC,GAAD;EAAW;YACT,kBAAC,QAAD;GAAM,WAAW;aAAjB,CACG,GACD,kBAAC,QAAD;IAAM,WAAW;cAAe;IAAa,CAAA,CACxC;;EACH,CAAA"}

package/lib/esm/components/backoffice/detail/BackofficeDetailLayout.js

@@ -0,0 +1,20 @@
+import { layout as e, primary as t, secondary as n, stacked as r } from "./backofficeDetailLayout.css.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/backoffice/detail/BackofficeDetailLayout.tsx
+var o = ({ primary: o, secondary: s }) => s == null ? /* @__PURE__ */ i("div", {
+	className: r,
+	children: o
+}) : /* @__PURE__ */ a("div", {
+	className: e,
+	children: [/* @__PURE__ */ i("div", {
+		className: t,
+		children: o
+	}), /* @__PURE__ */ i("aside", {
+		className: n,
+		children: s
+	})]
+});
+//#endregion
+export { o as BackofficeDetailLayout, o as default };
+
+//# sourceMappingURL=BackofficeDetailLayout.js.map

package/lib/esm/components/backoffice/detail/BackofficeDetailLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeDetailLayout.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailLayout.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport * as styles from './backofficeDetailLayout.css.js';\n\nexport type BackofficeDetailLayoutProps = {\n  primary: ReactNode;\n  secondary?: ReactNode;\n};\n\nexport const BackofficeDetailLayout = ({\n  primary,\n  secondary,\n}: BackofficeDetailLayoutProps): JSX.Element => {\n  if (secondary == null) {\n    return <div className={styles.stacked}>{primary}</div>;\n  }\n\n  return (\n    <div className={styles.layout}>\n      <div className={styles.primary}>{primary}</div>\n      <aside className={styles.secondary}>{secondary}</aside>\n    </div>\n  );\n};\n\nexport default BackofficeDetailLayout;\n"],"mappings":";;;AASA,IAAa,KAA0B,EACrC,SAAA,GACA,WAAA,QAEI,KAAa,OACR,kBAAC,OAAD;CAAK,WAAW;WAAiB;CAAc,CAAA,GAItD,kBAAC,OAAD;CAAK,WAAW;WAAhB,CACE,kBAAC,OAAD;EAAK,WAAW;YAAiB;EAAc,CAAA,EAC/C,kBAAC,SAAD;EAAO,WAAW;YAAmB;EAAkB,CAAA,CACnD"}

package/lib/esm/components/backoffice/detail/BackofficeDetailPayload.js

@@ -0,0 +1,18 @@
+import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
+import { BackofficeDetailSection as t } from "./BackofficeDetailSection.js";
+import { formatJsonPayload as n } from "./detailPayloadUtils.js";
+import { jsx as r } from "react/jsx-runtime";
+import { LazyMarkdownRenderer as i } from "@plumile/ui/atomic/molecules/markdown/LazyMarkdownRenderer.js";
+//#region src/components/backoffice/detail/BackofficeDetailPayload.tsx
+var a = ({ title: a, content: o, format: s = "markdown", description: c }) => {
+	let { t: l } = e(), u = "";
+	return s === "json" ? u = n(o) : o != null && (u = typeof o == "string" ? o : typeof o == "number" || typeof o == "boolean" ? String(o) : n(o)), u.trim() === "" && (u = l("common.notAvailable")), /* @__PURE__ */ r(t, {
+		title: a,
+		description: c,
+		children: /* @__PURE__ */ r(i, { content: u })
+	});
+};
+//#endregion
+export { a as BackofficeDetailPayload, a as default };
+
+//# sourceMappingURL=BackofficeDetailPayload.js.map

package/lib/esm/components/backoffice/detail/BackofficeDetailPayload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeDetailPayload.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailPayload.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { LazyMarkdownRenderer } from '@plumile/ui/atomic/molecules/markdown/LazyMarkdownRenderer.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { BackofficeDetailSection } from './BackofficeDetailSection.js';\nimport { formatJsonPayload } from './detailPayloadUtils.js';\n\nexport type BackofficeDetailPayloadProps = {\n  title: string;\n  content: unknown;\n  format?: 'markdown' | 'json' | 'text';\n  description?: string;\n};\n\nexport const BackofficeDetailPayload = ({\n  title,\n  content,\n  format = 'markdown',\n  description,\n}: BackofficeDetailPayloadProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  let resolved = '';\n  if (format === 'json') {\n    resolved = formatJsonPayload(content);\n  } else if (content != null) {\n    if (typeof content === 'string') {\n      resolved = content;\n    } else if (typeof content === 'number' || typeof content === 'boolean') {\n      resolved = String(content);\n    } else {\n      resolved = formatJsonPayload(content);\n    }\n  }\n\n  if (resolved.trim() === '') {\n    resolved = t('common.notAvailable');\n  }\n\n  return (\n    <BackofficeDetailSection title={title} description={description}>\n      <LazyMarkdownRenderer content={resolved} />\n    </BackofficeDetailSection>\n  );\n};\n\nexport default BackofficeDetailPayload;\n"],"mappings":";;;;;;AAeA,IAAa,KAA2B,EACtC,UACA,YACA,YAAS,YACT,qBAC+C;CAC/C,IAAM,EAAE,SAAM,GAA+B,EACzC,IAAW;AAiBf,QAhBI,MAAW,SACb,IAAW,EAAkB,EAAQ,GAC5B,KAAW,SACpB,AAKE,IALE,OAAO,KAAY,WACV,IACF,OAAO,KAAY,YAAY,OAAO,KAAY,YAChD,OAAO,EAAQ,GAEf,EAAkB,EAAQ,GAIrC,EAAS,MAAM,KAAK,OACtB,IAAW,EAAE,sBAAsB,GAInC,kBAAC,GAAD;EAAgC;EAAoB;YAClD,kBAAC,GAAD,EAAsB,SAAS,GAAY,CAAA;EACnB,CAAA"}

package/lib/esm/components/backoffice/detail/BackofficeDetailRelationLink.js

@@ -0,0 +1,49 @@
+import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
+import { useBackofficeConfig as t } from "../../../provider/BackofficeConfigContext.js";
+import { label as n, link as r, meta as i } from "./backofficeDetailRelationLink.css.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useContext as s } from "react";
+import { Link as c, RoutingContext as l } from "@plumile/router";
+import { buildBackofficeFallbackListHref as u, buildBackofficeListHref as d, buildBackofficeListLink as f } from "@plumile/backoffice-core/state/buildListHref.js";
+import { setWhereValue as p } from "@plumile/backoffice-core/filters/where.js";
+//#region src/components/backoffice/detail/BackofficeDetailRelationLink.tsx
+var m = ({ label: m, entityId: h, filterId: g, whereKey: _, value: v, path: y, count: b }) => {
+	let { t: x } = e(), { entities: S, entityRegistry: C } = t(), w = s(l), T = S[h];
+	if (T == null) return null;
+	let E = p(null, _, v, y), D = C.getLoadedListEntity(h), O = _;
+	y != null && (O = `${_}.${y.join(".")}`);
+	let k = g ?? O, A;
+	A = D == null ? u(T.routes.list, E, [{
+		id: k,
+		value: v
+	}]) : d(D.config, { where: E });
+	let j = async (e) => {
+		let t = f((await C.loadListEntity(h)).config, { where: E }), n = "";
+		t.search !== "" && (n = `?${t.search}`), e.push({
+			pathname: t.pathname,
+			search: n,
+			hash: ""
+		});
+	}, M = (e) => {
+		D != null || w == null || e.defaultPrevented || e.button !== 0 || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey || (e.preventDefault(), j(w.history).catch(() => {}));
+	}, N = m;
+	return b != null && (N = x("relations.labelWithCount", {
+		label: m,
+		count: b
+	})), /* @__PURE__ */ o(c, {
+		to: A,
+		className: r,
+		onClick: M,
+		children: [/* @__PURE__ */ a("span", {
+			className: n,
+			children: N
+		}), /* @__PURE__ */ a("span", {
+			className: i,
+			children: x("relations.viewList")
+		})]
+	});
+};
+//#endregion
+export { m as BackofficeDetailRelationLink, m as default };
+
+//# sourceMappingURL=BackofficeDetailRelationLink.js.map

package/lib/esm/components/backoffice/detail/BackofficeDetailRelationLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeDetailRelationLink.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailRelationLink.tsx"],"sourcesContent":["import { useContext, type JSX, type MouseEvent } from 'react';\nimport { Link, RoutingContext } from '@plumile/router';\n\nimport {\n  buildBackofficeFallbackListHref,\n  buildBackofficeListHref,\n  buildBackofficeListLink,\n} from '@plumile/backoffice-core/state/buildListHref.js';\nimport { setWhereValue } from '@plumile/backoffice-core/filters/where.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficeConfig } from '../../../provider/BackofficeConfigContext.js';\n\nimport * as styles from './backofficeDetailRelationLink.css.js';\n\nexport type BackofficeDetailRelationLinkProps = {\n  label: string;\n  entityId: string;\n  filterId?: string;\n  whereKey: string;\n  value: string;\n  path?: readonly string[];\n  count?: number;\n};\n\nexport const BackofficeDetailRelationLink = ({\n  label,\n  entityId,\n  filterId,\n  whereKey,\n  value,\n  path,\n  count,\n}: BackofficeDetailRelationLinkProps): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n  const { entities, entityRegistry } = useBackofficeConfig();\n  const routing = useContext(RoutingContext);\n  const entityManifest = entities[entityId];\n  if (entityManifest == null) {\n    return null;\n  }\n\n  const where = setWhereValue<Record<string, unknown>>(\n    null,\n    whereKey as never,\n    value,\n    path,\n  );\n\n  const loadedEntity = entityRegistry.getLoadedListEntity(entityId);\n  let filterKey = whereKey;\n  if (path != null) {\n    filterKey = `${whereKey}.${path.join('.')}`;\n  }\n  const resolvedFilterId = filterId ?? filterKey;\n\n  let to: string | { pathname: string; search: string };\n  if (loadedEntity == null) {\n    to = buildBackofficeFallbackListHref(entityManifest.routes.list, where, [\n      {\n        id: resolvedFilterId,\n        value,\n      },\n    ]);\n  } else {\n    to = buildBackofficeListHref(loadedEntity.config, { where });\n  }\n\n  const navigateToLazyList = async (\n    history: NonNullable<typeof routing>['history'],\n  ): Promise<void> => {\n    const listEntity = await entityRegistry.loadListEntity(entityId);\n    const next = buildBackofficeListLink(listEntity.config, { where });\n\n    let search = '';\n    if (next.search !== '') {\n      search = `?${next.search}`;\n    }\n\n    history.push({\n      pathname: next.pathname,\n      search,\n      hash: '',\n    });\n  };\n\n  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {\n    if (\n      loadedEntity != null ||\n      routing == null ||\n      event.defaultPrevented ||\n      event.button !== 0 ||\n      event.metaKey ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.shiftKey\n    ) {\n      return;\n    }\n\n    event.preventDefault();\n    navigateToLazyList(routing.history).catch(() => {\n      /* noop */\n    });\n  };\n\n  let labelText = label;\n  if (count != null) {\n    labelText = t('relations.labelWithCount', {\n      label,\n      count,\n    });\n  }\n\n  return (\n    <Link to={to} className={styles.link} onClick={handleClick}>\n      <span className={styles.label}>{labelText}</span>\n      <span className={styles.meta}>{t('relations.viewList')}</span>\n    </Link>\n  );\n};\n\nexport default BackofficeDetailRelationLink;\n"],"mappings":";;;;;;;;;AAyBA,IAAa,KAAgC,EAC3C,OAAA,GACA,aACA,aACA,aACA,UACA,SACA,eAC2D;CAC3D,IAAM,EAAE,SAAM,GAA+B,EACvC,EAAE,aAAU,sBAAmB,GAAqB,EACpD,IAAU,EAAW,EAAe,EACpC,IAAiB,EAAS;AAChC,KAAI,KAAkB,KACpB,QAAO;CAGT,IAAM,IAAQ,EACZ,MACA,GACA,GACA,EACD,EAEK,IAAe,EAAe,oBAAoB,EAAS,EAC7D,IAAY;AAChB,CAAI,KAAQ,SACV,IAAY,GAAG,EAAS,GAAG,EAAK,KAAK,IAAI;CAE3C,IAAM,IAAmB,KAAY,GAEjC;AACJ,CAQE,IARE,KAAgB,OACb,EAAgC,EAAe,OAAO,MAAM,GAAO,CACtE;EACE,IAAI;EACJ;EACD,CACF,CAAC,GAEG,EAAwB,EAAa,QAAQ,EAAE,UAAO,CAAC;CAG9D,IAAM,IAAqB,OACzB,MACkB;EAElB,IAAM,IAAO,GADM,MAAM,EAAe,eAAe,EAAS,EAChB,QAAQ,EAAE,UAAO,CAAC,EAE9D,IAAS;AAKb,EAJI,EAAK,WAAW,OAClB,IAAS,IAAI,EAAK,WAGpB,EAAQ,KAAK;GACX,UAAU,EAAK;GACf;GACA,MAAM;GACP,CAAC;IAGE,KAAe,MAAyC;AAE1D,OAAgB,QAChB,KAAW,QACX,EAAM,oBACN,EAAM,WAAW,KACjB,EAAM,WACN,EAAM,UACN,EAAM,WACN,EAAM,aAKR,EAAM,gBAAgB,EACtB,EAAmB,EAAQ,QAAQ,CAAC,YAAY,GAE9C;IAGA,IAAY;AAQhB,QAPI,KAAS,SACX,IAAY,EAAE,4BAA4B;EACxC,OAAA;EACA;EACD,CAAC,GAIF,kBAAC,GAAD;EAAU;EAAI,WAAW;EAAa,SAAS;YAA/C,CACE,kBAAC,QAAD;GAAM,WAAW;aAAe;GAAiB,CAAA,EACjD,kBAAC,QAAD;GAAM,WAAW;aAAc,EAAE,qBAAqB;GAAQ,CAAA,CACzD"}

package/lib/esm/components/backoffice/detail/BackofficeDetailRelationList.js

@@ -0,0 +1,11 @@
+import { list as e } from "./backofficeDetailRelationList.css.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/backoffice/detail/BackofficeDetailRelationList.tsx
+var n = ({ children: n }) => /* @__PURE__ */ t("div", {
+	className: e,
+	children: n
+});
+//#endregion
+export { n as BackofficeDetailRelationList, n as default };
+
+//# sourceMappingURL=BackofficeDetailRelationList.js.map

package/lib/esm/components/backoffice/detail/BackofficeDetailRelationList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeDetailRelationList.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailRelationList.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport * as styles from './backofficeDetailRelationList.css.js';\n\nexport type BackofficeDetailRelationListProps = {\n  children?: ReactNode;\n};\n\nexport const BackofficeDetailRelationList = ({\n  children,\n}: BackofficeDetailRelationListProps): JSX.Element => {\n  return <div className={styles.list}>{children}</div>;\n};\n\nexport default BackofficeDetailRelationList;\n"],"mappings":";;;AAOA,IAAa,KAAgC,EAC3C,kBAEO,kBAAC,OAAD;CAAK,WAAW;CAAc;CAAe,CAAA"}

package/lib/esm/components/backoffice/detail/BackofficeDetailRelationListBlock.js

@@ -0,0 +1,115 @@
+import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
+import { useBackofficeConfig as t } from "../../../provider/BackofficeConfigContext.js";
+import { BackofficeErrorBoundary as n } from "../errors/BackofficeErrorBoundary.js";
+import { useBackofficeListEntitiesLoader as r } from "../../../provider/useBackofficeEntityLoader.js";
+import { buildDataTableColumns as i } from "../columns/buildDataTableColumns.js";
+import { useBackofficeLoadMore as a } from "../../../hooks/useBackofficeLoadMore.js";
+import { useBackofficeListRefetch as o } from "../../../hooks/useBackofficeListRefetch.js";
+import { BackofficeEntityListScaffold as s } from "../scaffolds/BackofficeEntityListScaffold.js";
+import { jsx as c } from "react/jsx-runtime";
+import { useTranslation as l } from "react-i18next";
+import { Suspense as u, useCallback as d, useMemo as f, useState as p } from "react";
+import { useLazyLoadQuery as m, usePaginationFragment as h } from "react-relay";
+import { BACKOFFICE_LIST_REFETCH_POLICY as g, BACKOFFICE_RELATED_TAB_PAGE_SIZE as _ } from "@plumile/backoffice-core/constants.js";
+import { setWhereValue as v } from "@plumile/backoffice-core/filters/where.js";
+import { BackofficeTableSkeleton as y } from "@plumile/ui-backoffice/backoffice/molecules/backoffice_table_skeleton/BackofficeTableSkeleton.js";
+//#region src/components/backoffice/detail/BackofficeDetailRelationListBlock.tsx
+var b = ({ title: t, config: n, entities: r, whereKey: u, value: y, path: b }) => {
+	let { t: x } = l(), { t: S } = e();
+	if (n.list.kind === "records") return null;
+	let C = n.list, w = n.listDefaults ?? C.defaultState ?? {
+		where: null,
+		sort: null
+	}, [T, E] = p({
+		where: w.where,
+		sort: w.sort ?? null
+	}), D = f(() => y == null || y.trim() === "" ? null : v(T.where, u, y, b), [
+		b,
+		T.where,
+		y,
+		u
+	]), O = D ?? T.where, k = T.sort ?? w.sort, A = f(() => ({
+		where: O,
+		sort: k,
+		count: _,
+		cursor: null
+	}), [O, k]), j = f(() => C.buildVariables == null ? A : C.buildVariables(A), [C, A]), M = m(C.query, j, { fetchPolicy: "store-or-network" }), { data: N, loadNext: P, hasNext: F, isLoadingNext: I, refetch: L } = h(C.fragment, M), R = C.getConnection(N), z = f(() => R.edges.map((e) => C.toRow(e.node)), [R.edges, C]), B = f(() => i(C.columns, {
+		tApp: x,
+		t: S,
+		resolveEntityHref: (e, t) => {
+			let n = r[e];
+			return n == null ? null : n.routes.detail(t);
+		}
+	}), [
+		r,
+		C.columns,
+		S,
+		x
+	]), V = d((e) => C.getRowId(e), [C]), { onRefresh: H } = o({
+		refetch: L,
+		variables: A,
+		defaults: f(() => ({
+			where: D ?? w.where,
+			sort: w.sort,
+			count: _,
+			cursor: null
+		}), [
+			w.sort,
+			w.where,
+			D
+		]),
+		fetchPolicy: g,
+		buildVariables: C.buildVariables
+	}), U = a({
+		hasNext: F,
+		isLoadingNext: I,
+		loadNext: P,
+		count: _
+	});
+	return /* @__PURE__ */ c(s, {
+		config: n,
+		state: T,
+		pushState: (e) => {
+			E(e);
+		},
+		header: { title: t },
+		rows: z,
+		columns: B,
+		getRowId: V,
+		hasNextPage: F,
+		isLoadingMore: I,
+		onLoadMore: U,
+		onRefresh: H,
+		totalCount: R.totalCount ?? null,
+		variant: "embedded"
+	});
+}, x = ({ title: e, targetId: n, whereKey: i, value: a, path: o }) => {
+	let { entities: s } = t(), l = r(f(() => [n], [n]));
+	if (l.status === "loading") return /* @__PURE__ */ c(y, { rows: 6 });
+	if (l.status === "error") return null;
+	let u = l.modules[n]?.config;
+	return u == null ? null : /* @__PURE__ */ c(b, {
+		title: e,
+		config: u,
+		entities: s,
+		whereKey: i,
+		value: a,
+		path: o
+	});
+}, S = ({ title: e, target: t, whereKey: r, value: i, path: a }) => /* @__PURE__ */ c(n, {
+	fallback: () => /* @__PURE__ */ c(y, { rows: 6 }),
+	children: /* @__PURE__ */ c(u, {
+		fallback: /* @__PURE__ */ c(y, { rows: 6 }),
+		children: /* @__PURE__ */ c(x, {
+			title: e,
+			targetId: t,
+			whereKey: r,
+			value: i,
+			path: a
+		})
+	})
+});
+//#endregion
+export { S as BackofficeDetailRelationListBlock, S as default };
+
+//# sourceMappingURL=BackofficeDetailRelationListBlock.js.map

package/lib/esm/components/backoffice/detail/BackofficeDetailRelationListBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeDetailRelationListBlock.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailRelationListBlock.tsx"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport { Suspense, useCallback, useMemo, useState, type JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useLazyLoadQuery, usePaginationFragment } from 'react-relay';\nimport type { OperationType } from 'relay-runtime';\n\nimport {\n  BACKOFFICE_LIST_REFETCH_POLICY,\n  BACKOFFICE_RELATED_TAB_PAGE_SIZE,\n} from '@plumile/backoffice-core/constants.js';\nimport { setWhereValue } from '@plumile/backoffice-core/filters/where.js';\nimport type {\n  BackofficeListState,\n  BackofficeResolvedListFacetConfig,\n} from '@plumile/backoffice-core/types.js';\nimport { BackofficeTableSkeleton } from '@plumile/ui-backoffice/backoffice/molecules/backoffice_table_skeleton/BackofficeTableSkeleton.js';\n\nimport { buildDataTableColumns } from '../columns/buildDataTableColumns.js';\nimport { useBackofficeLoadMore } from '../../../hooks/useBackofficeLoadMore.js';\nimport { useBackofficeListRefetch } from '../../../hooks/useBackofficeListRefetch.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficeConfig } from '../../../provider/BackofficeConfigContext.js';\nimport { useBackofficeListEntitiesLoader } from '../../../provider/useBackofficeEntityLoader.js';\nimport { BackofficeEntityListScaffold } from '../scaffolds/BackofficeEntityListScaffold.js';\nimport { BackofficeErrorBoundary } from '../errors/BackofficeErrorBoundary.js';\n\nexport type BackofficeDetailRelationListBlockProps = {\n  title: string;\n  target: string;\n  whereKey: string;\n  value: string | null;\n  path?: readonly string[];\n};\n\ntype RelationListContentProps = {\n  title: string;\n  config: BackofficeResolvedListFacetConfig;\n  entities: ReturnType<typeof useBackofficeConfig>['entities'];\n  whereKey: string;\n  value: string | null;\n  path?: readonly string[];\n};\n\ntype RelationListBlockBodyProps = {\n  title: string;\n  targetId: string;\n  whereKey: string;\n  value: string | null;\n  path?: readonly string[];\n};\n\nconst RelationListContent = ({\n  title,\n  config,\n  entities,\n  whereKey,\n  value,\n  path,\n}: RelationListContentProps): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  if (config.list.kind === 'records') {\n    return null;\n  }\n  const listConfig = config.list;\n  const listDefaults = config.listDefaults ??\n    listConfig.defaultState ?? { where: null, sort: null };\n\n  const [state, setState] = useState<BackofficeListState<unknown, string>>({\n    where: listDefaults.where as never,\n    sort: listDefaults.sort ?? null,\n  });\n\n  const relationWhere = useMemo(() => {\n    if (value == null || value.trim() === '') {\n      return null;\n    }\n    return setWhereValue(\n      state.where as Record<string, unknown> | null,\n      whereKey as never,\n      value,\n      path,\n    );\n  }, [path, state.where, value, whereKey]);\n\n  const effectiveWhere = relationWhere ?? (state.where as never);\n  const resolvedSort = state.sort ?? listDefaults.sort;\n  const variablesBase = useMemo(() => {\n    return {\n      where: effectiveWhere as never,\n      sort: resolvedSort as never,\n      count: BACKOFFICE_RELATED_TAB_PAGE_SIZE,\n      cursor: null,\n    };\n  }, [effectiveWhere, resolvedSort]);\n\n  const variables = useMemo(() => {\n    if (listConfig.buildVariables != null) {\n      return listConfig.buildVariables(variablesBase as never);\n    }\n    return variablesBase;\n  }, [listConfig, variablesBase]);\n\n  const queryData = useLazyLoadQuery<OperationType>(\n    listConfig.query,\n    variables as never,\n    { fetchPolicy: 'store-or-network' },\n  );\n\n  const {\n    data: fragmentData,\n    loadNext,\n    hasNext,\n    isLoadingNext,\n    refetch,\n  } = usePaginationFragment(listConfig.fragment, queryData as never);\n\n  const connection = listConfig.getConnection(fragmentData);\n  const rows = useMemo(() => {\n    return connection.edges.map((edge) => {\n      return listConfig.toRow(edge.node);\n    });\n  }, [connection.edges, listConfig]);\n\n  const columns = useMemo(() => {\n    return buildDataTableColumns(listConfig.columns, {\n      tApp,\n      t,\n      resolveEntityHref: (entityId, refId) => {\n        const entityManifest = entities[entityId];\n        if (entityManifest == null) {\n          return null;\n        }\n        return entityManifest.routes.detail(refId);\n      },\n    });\n  }, [entities, listConfig.columns, t, tApp]);\n\n  const getRowId = useCallback(\n    (row: unknown) => {\n      return listConfig.getRowId(row as never);\n    },\n    [listConfig],\n  );\n\n  const defaults = useMemo(() => {\n    const baseWhere = relationWhere ?? (listDefaults.where as never);\n    return {\n      where: baseWhere,\n      sort: listDefaults.sort,\n      count: BACKOFFICE_RELATED_TAB_PAGE_SIZE,\n      cursor: null,\n    };\n  }, [listDefaults.sort, listDefaults.where, relationWhere]);\n\n  const { onRefresh } = useBackofficeListRefetch({\n    refetch: refetch as never,\n    variables: variablesBase as never,\n    defaults: defaults as never,\n    fetchPolicy: BACKOFFICE_LIST_REFETCH_POLICY,\n    buildVariables: listConfig.buildVariables as never,\n  });\n\n  const handleLoadMore = useBackofficeLoadMore({\n    hasNext,\n    isLoadingNext,\n    loadNext,\n    count: BACKOFFICE_RELATED_TAB_PAGE_SIZE,\n  });\n\n  return (\n    <BackofficeEntityListScaffold\n      config={config as never}\n      state={state as never}\n      pushState={(next) => {\n        setState(next as never);\n      }}\n      header={{ title }}\n      rows={rows}\n      columns={columns as never}\n      getRowId={getRowId}\n      hasNextPage={hasNext}\n      isLoadingMore={isLoadingNext}\n      onLoadMore={handleLoadMore}\n      onRefresh={onRefresh}\n      totalCount={connection.totalCount ?? null}\n      variant=\"embedded\"\n    />\n  );\n};\n\nconst RelationListBlockBody = ({\n  title,\n  targetId,\n  whereKey,\n  value,\n  path,\n}: RelationListBlockBodyProps): JSX.Element | null => {\n  const { entities } = useBackofficeConfig();\n  const relatedEntityIds = useMemo(() => {\n    return [targetId];\n  }, [targetId]);\n  const relatedEntitiesState =\n    useBackofficeListEntitiesLoader(relatedEntityIds);\n\n  if (relatedEntitiesState.status === 'loading') {\n    return <BackofficeTableSkeleton rows={6} />;\n  }\n\n  if (relatedEntitiesState.status === 'error') {\n    return null;\n  }\n\n  const config = relatedEntitiesState.modules[targetId]?.config;\n  if (config == null) {\n    return null;\n  }\n\n  return (\n    <RelationListContent\n      title={title}\n      config={config}\n      entities={entities}\n      whereKey={whereKey}\n      value={value}\n      path={path}\n    />\n  );\n};\n\nexport const BackofficeDetailRelationListBlock = ({\n  title,\n  target,\n  whereKey,\n  value,\n  path,\n}: BackofficeDetailRelationListBlockProps): JSX.Element => {\n  return (\n    <BackofficeErrorBoundary\n      fallback={() => {\n        return <BackofficeTableSkeleton rows={6} />;\n      }}\n    >\n      <Suspense fallback={<BackofficeTableSkeleton rows={6} />}>\n        <RelationListBlockBody\n          title={title}\n          targetId={target}\n          whereKey={whereKey}\n          value={value}\n          path={path}\n        />\n      </Suspense>\n    </BackofficeErrorBoundary>\n  );\n};\n\nexport default BackofficeDetailRelationListBlock;\n"],"mappings":";;;;;;;;;;;;;;;;AAmDA,IAAM,KAAuB,EAC3B,UACA,WACA,aACA,aACA,UACA,cACkD;CAClD,IAAM,EAAE,GAAG,MAAS,GAAgB,EAC9B,EAAE,SAAM,GAA+B;AAC7C,KAAI,EAAO,KAAK,SAAS,UACvB,QAAO;CAET,IAAM,IAAa,EAAO,MACpB,IAAe,EAAO,gBAC1B,EAAW,gBAAgB;EAAE,OAAO;EAAM,MAAM;EAAM,EAElD,CAAC,GAAO,KAAY,EAA+C;EACvE,OAAO,EAAa;EACpB,MAAM,EAAa,QAAQ;EAC5B,CAAC,EAEI,IAAgB,QAChB,KAAS,QAAQ,EAAM,MAAM,KAAK,KAC7B,OAEF,EACL,EAAM,OACN,GACA,GACA,EACD,EACA;EAAC;EAAM,EAAM;EAAO;EAAO;EAAS,CAAC,EAElC,IAAiB,KAAkB,EAAM,OACzC,IAAe,EAAM,QAAQ,EAAa,MAC1C,IAAgB,SACb;EACL,OAAO;EACP,MAAM;EACN,OAAO;EACP,QAAQ;EACT,GACA,CAAC,GAAgB,EAAa,CAAC,EAE5B,IAAY,QACZ,EAAW,kBAAkB,OAG1B,IAFE,EAAW,eAAe,EAAuB,EAGzD,CAAC,GAAY,EAAc,CAAC,EAEzB,IAAY,EAChB,EAAW,OACX,GACA,EAAE,aAAa,oBAAoB,CACpC,EAEK,EACJ,MAAM,GACN,aACA,YACA,kBACA,eACE,EAAsB,EAAW,UAAU,EAAmB,EAE5D,IAAa,EAAW,cAAc,EAAa,EACnD,IAAO,QACJ,EAAW,MAAM,KAAK,MACpB,EAAW,MAAM,EAAK,KAAK,CAClC,EACD,CAAC,EAAW,OAAO,EAAW,CAAC,EAE5B,IAAU,QACP,EAAsB,EAAW,SAAS;EAC/C;EACA;EACA,oBAAoB,GAAU,MAAU;GACtC,IAAM,IAAiB,EAAS;AAIhC,UAHI,KAAkB,OACb,OAEF,EAAe,OAAO,OAAO,EAAM;;EAE7C,CAAC,EACD;EAAC;EAAU,EAAW;EAAS;EAAG;EAAK,CAAC,EAErC,IAAW,GACd,MACQ,EAAW,SAAS,EAAa,EAE1C,CAAC,EAAW,CACb,EAYK,EAAE,iBAAc,EAAyB;EACpC;EACT,WAAW;EACD,UAbK,SAER;GACL,OAFgB,KAAkB,EAAa;GAG/C,MAAM,EAAa;GACnB,OAAO;GACP,QAAQ;GACT,GACA;GAAC,EAAa;GAAM,EAAa;GAAO;GAAc,CAAC;EAMxD,aAAa;EACb,gBAAgB,EAAW;EAC5B,CAAC,EAEI,IAAiB,EAAsB;EAC3C;EACA;EACA;EACA,OAAO;EACR,CAAC;AAEF,QACE,kBAAC,GAAD;EACU;EACD;EACP,YAAY,MAAS;AACnB,KAAS,EAAc;;EAEzB,QAAQ,EAAE,UAAO;EACX;EACG;EACC;EACV,aAAa;EACb,eAAe;EACf,YAAY;EACD;EACX,YAAY,EAAW,cAAc;EACrC,SAAQ;EACR,CAAA;GAIA,KAAyB,EAC7B,UACA,aACA,aACA,UACA,cACoD;CACpD,IAAM,EAAE,gBAAa,GAAqB,EAIpC,IACJ,EAJuB,QAChB,CAAC,EAAS,EAChB,CAAC,EAAS,CAAC,CAEqC;AAEnD,KAAI,EAAqB,WAAW,UAClC,QAAO,kBAAC,GAAD,EAAyB,MAAM,GAAK,CAAA;AAG7C,KAAI,EAAqB,WAAW,QAClC,QAAO;CAGT,IAAM,IAAS,EAAqB,QAAQ,IAAW;AAKvD,QAJI,KAAU,OACL,OAIP,kBAAC,GAAD;EACS;EACC;EACE;EACA;EACH;EACD;EACN,CAAA;GAIO,KAAqC,EAChD,UACA,WACA,aACA,UACA,cAGE,kBAAC,GAAD;CACE,gBACS,kBAAC,GAAD,EAAyB,MAAM,GAAK,CAAA;WAG7C,kBAAC,GAAD;EAAU,UAAU,kBAAC,GAAD,EAAyB,MAAM,GAAK,CAAA;YACtD,kBAAC,GAAD;GACS;GACP,UAAU;GACA;GACH;GACD;GACN,CAAA;EACO,CAAA;CACa,CAAA"}

package/lib/esm/components/backoffice/detail/BackofficeDetailSection.js

@@ -0,0 +1,33 @@
+import { BackofficeDetailField as e } from "./BackofficeDetailField.js";
+import { description as t, grid as n, header as r, section as i, title as a } from "./backofficeDetailSection.css.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/backoffice/detail/BackofficeDetailSection.tsx
+var c = ({ title: c, description: l, items: u, children: d }) => {
+	let f = null;
+	l != null && l !== "" && (f = /* @__PURE__ */ o("p", {
+		className: t,
+		children: l
+	}));
+	let p = null;
+	return u != null && u.length > 0 && (p = /* @__PURE__ */ o("div", {
+		className: n,
+		children: u.map((t) => /* @__PURE__ */ o(e, { ...t }, t.id))
+	})), /* @__PURE__ */ s("section", {
+		className: i,
+		children: [
+			/* @__PURE__ */ s("header", {
+				className: r,
+				children: [/* @__PURE__ */ o("h3", {
+					className: a,
+					children: c
+				}), f]
+			}),
+			p,
+			d
+		]
+	});
+};
+//#endregion
+export { c as BackofficeDetailSection, c as default };
+
+//# sourceMappingURL=BackofficeDetailSection.js.map

package/lib/esm/components/backoffice/detail/BackofficeDetailSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeDetailSection.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailSection.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport {\n  BackofficeDetailField,\n  type BackofficeDetailFieldProps,\n} from './BackofficeDetailField.js';\nimport * as styles from './backofficeDetailSection.css.js';\n\nexport type BackofficeDetailSectionProps = {\n  title: string;\n  description?: string;\n  items?: readonly BackofficeDetailFieldProps[];\n  children?: ReactNode;\n};\n\nexport const BackofficeDetailSection = ({\n  title,\n  description,\n  items,\n  children,\n}: BackofficeDetailSectionProps): JSX.Element => {\n  let descriptionNode: JSX.Element | null = null;\n  if (description != null && description !== '') {\n    descriptionNode = <p className={styles.description}>{description}</p>;\n  }\n\n  let itemsNode: JSX.Element | null = null;\n  if (items != null && items.length > 0) {\n    itemsNode = (\n      <div className={styles.grid}>\n        {items.map((item) => {\n          return <BackofficeDetailField key={item.id} {...item} />;\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <section className={styles.section}>\n      <header className={styles.header}>\n        <h3 className={styles.title}>{title}</h3>\n        {descriptionNode}\n      </header>\n      {itemsNode}\n      {children}\n    </section>\n  );\n};\n\nexport default BackofficeDetailSection;\n"],"mappings":";;;;AAeA,IAAa,KAA2B,EACtC,OAAA,GACA,aAAA,GACA,UACA,kBAC+C;CAC/C,IAAI,IAAsC;AAC1C,CAAI,KAAe,QAAQ,MAAgB,OACzC,IAAkB,kBAAC,KAAD;EAAG,WAAW;YAAqB;EAAgB,CAAA;CAGvE,IAAI,IAAgC;AAWpC,QAVI,KAAS,QAAQ,EAAM,SAAS,MAClC,IACE,kBAAC,OAAD;EAAK,WAAW;YACb,EAAM,KAAK,MACH,kBAAC,GAAD,EAAqC,GAAI,GAAQ,EAArB,EAAK,GAAgB,CACxD;EACE,CAAA,GAKR,kBAAC,WAAD;EAAS,WAAW;YAApB;GACE,kBAAC,UAAD;IAAQ,WAAW;cAAnB,CACE,kBAAC,MAAD;KAAI,WAAW;eAAe;KAAW,CAAA,EACxC,EACM;;GACR;GACA;GACO"}

package/lib/esm/components/backoffice/detail/BackofficeDetailTaggedValue.js

@@ -0,0 +1,18 @@
+import { container as e, value as t } from "./backofficeDetailTaggedValue.css.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Tag as i } from "@plumile/ui-backoffice/backoffice/atoms/tag/Tag.js";
+//#region src/components/backoffice/detail/BackofficeDetailTaggedValue.tsx
+var a = ({ tag: a, value: o }) => /* @__PURE__ */ r("span", {
+	className: e,
+	children: [a != null && /* @__PURE__ */ n(i, {
+		tone: a.tone,
+		children: a.label
+	}), /* @__PURE__ */ n("span", {
+		className: t,
+		children: o
+	})]
+});
+//#endregion
+export { a as BackofficeDetailTaggedValue, a as default };
+
+//# sourceMappingURL=BackofficeDetailTaggedValue.js.map

package/lib/esm/components/backoffice/detail/BackofficeDetailTaggedValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeDetailTaggedValue.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailTaggedValue.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport type { BackofficeBadgeTone } from '@plumile/backoffice-core/types.js';\nimport { Tag } from '@plumile/ui-backoffice/backoffice/atoms/tag/Tag.js';\n\nimport * as styles from './backofficeDetailTaggedValue.css.js';\n\nexport type BackofficeDetailTaggedValueProps = {\n  tag: { label: string; tone?: BackofficeBadgeTone } | null;\n  value: ReactNode;\n};\n\nexport const BackofficeDetailTaggedValue = ({\n  tag,\n  value,\n}: BackofficeDetailTaggedValueProps): JSX.Element => {\n  return (\n    <span className={styles.container}>\n      {tag != null && <Tag tone={tag.tone}>{tag.label}</Tag>}\n      <span className={styles.value}>{value}</span>\n    </span>\n  );\n};\n\nexport default BackofficeDetailTaggedValue;\n"],"mappings":";;;;AAYA,IAAa,KAA+B,EAC1C,QACA,OAAA,QAGE,kBAAC,QAAD;CAAM,WAAW;WAAjB,CACG,KAAO,QAAQ,kBAAC,GAAD;EAAK,MAAM,EAAI;YAAO,EAAI;EAAY,CAAA,EACtD,kBAAC,QAAD;EAAM,WAAW;YAAe;EAAa,CAAA,CACxC"}

package/lib/esm/components/backoffice/detail/backofficeDetailBadgeRow.css.js

@@ -0,0 +1,8 @@
+/* empty css                                             */
+/* empty css                                        */
+//#region src/components/backoffice/detail/backofficeDetailBadgeRow.css.ts
+var e = "lqrxsj0 vncd899io vncd89ajx vncd89ao6 vncd89co";
+//#endregion
+export { e as row };
+
+//# sourceMappingURL=backofficeDetailBadgeRow.css.js.map