@plumile/backoffice-react 0.1.105 → 0.1.106

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 { Tag as r } from "@plumile/ui";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#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__ */ i("span", {
+		className: t,
+		children: s
+	})), /* @__PURE__ */ i(r, {
+		tone: o,
+		children: /* @__PURE__ */ a("span", {
+			className: e,
+			children: [u, /* @__PURE__ */ i("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 { Tag, type TagTone } from '@plumile/ui';\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":";;;;AAYA,IAAa,KAA2B,EACtC,SACA,MAAA,GACA,OAAA,QAC+C;CAC/C,IAAM,IAAU,KAAQ,MACpB,IAA6B;CAKjC,OAJI,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 { LazyMarkdownRenderer as r } from "@plumile/ui";
+import { jsx as i } from "react/jsx-runtime";
+//#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__ */ i(t, {
+		title: a,
+		description: c,
+		children: /* @__PURE__ */ i(r, { 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';\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;CAiBf,OAhBI,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,56 @@
+import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
+import { useBackofficeConfig as t } from "../../../provider/BackofficeConfigContext.js";
+import { action as n, chevron as r, label as i, link as a, meta as o } from "./backofficeDetailRelationLink.css.js";
+import { useContext as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Link as u, RoutingContext as d } from "@plumile/router";
+import { buildBackofficeFallbackListHref as f, buildBackofficeListHref as p, buildBackofficeListLink as m } from "@plumile/backoffice-core/state/buildListHref.js";
+import { setWhereValue as h } from "@plumile/backoffice-core/filters/where.js";
+//#region src/components/backoffice/detail/BackofficeDetailRelationLink.tsx
+var g = ({ label: g, relation: _, value: v, count: y }) => {
+	let { t: b } = e(), { entities: x, entityRegistry: S } = t(), C = s(d), { target: w, filterId: T, whereKey: E, path: D } = _, O = x[w];
+	if (O == null) return null;
+	let k = h(null, E, v, D), A = S.getLoadedListEntity(w), j = E;
+	D != null && (j = `${E}.${D.join(".")}`);
+	let M = T ?? j, N;
+	N = A == null ? f(O.routes.list, k, [{
+		id: M,
+		value: v
+	}]) : p(A.config, { where: k });
+	let P = async (e) => {
+		let t = m((await S.loadListEntity(w)).config, { where: k }), n = "";
+		t.search !== "" && (n = `?${t.search}`), e.push({
+			pathname: t.pathname,
+			search: n,
+			hash: ""
+		});
+	}, F = (e) => {
+		A != null || C == null || e.defaultPrevented || e.button !== 0 || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey || (e.preventDefault(), P(C.history).catch(() => {}));
+	}, I = g;
+	return y != null && (I = b("relations.labelWithCount", {
+		label: g,
+		count: y
+	})), /* @__PURE__ */ l(u, {
+		to: N,
+		className: a,
+		onClick: F,
+		children: [/* @__PURE__ */ c("span", {
+			className: i,
+			children: I
+		}), /* @__PURE__ */ l("span", {
+			className: n,
+			children: [/* @__PURE__ */ c("span", {
+				className: o,
+				children: b("relations.viewList")
+			}), /* @__PURE__ */ c("span", {
+				className: r,
+				"aria-hidden": "true",
+				children: ">"
+			})]
+		})]
+	});
+};
+//#endregion
+export { g as BackofficeDetailRelationLink, g 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';\nimport type { BackofficeRuntimeRelationFilterSpec } from '@plumile/backoffice-core/types.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  relation: BackofficeRuntimeRelationFilterSpec;\n  value: string;\n  count?: number;\n};\n\nexport const BackofficeDetailRelationLink = ({\n  label,\n  relation,\n  value,\n  count,\n}: BackofficeDetailRelationLinkProps): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n  const { entities, entityRegistry } = useBackofficeConfig();\n  const routing = useContext(RoutingContext);\n  const { target, filterId, whereKey, path } = relation;\n  const entityManifest = entities[target];\n  if (entityManifest == null) {\n    return null;\n  }\n\n  const where = setWhereValue<Record<string, unknown>>(\n    null,\n    whereKey,\n    value,\n    path,\n  );\n\n  const loadedEntity = entityRegistry.getLoadedListEntity(target);\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(target);\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.action}>\n        <span className={styles.meta}>{t('relations.viewList')}</span>\n        <span className={styles.chevron} aria-hidden=\"true\">\n          &gt;\n        </span>\n      </span>\n    </Link>\n  );\n};\n\nexport default BackofficeDetailRelationLink;\n"],"mappings":";;;;;;;;;AAuBA,IAAa,KAAgC,EAC3C,OAAA,GACA,aACA,UACA,eAC2D;CAC3D,IAAM,EAAE,SAAM,GAA+B,EACvC,EAAE,aAAU,sBAAmB,GAAqB,EACpD,IAAU,EAAW,EAAe,EACpC,EAAE,WAAQ,aAAU,aAAU,YAAS,GACvC,IAAiB,EAAS;CAChC,IAAI,KAAkB,MACpB,OAAO;CAGT,IAAM,IAAQ,EACZ,MACA,GACA,GACA,EACD,EAEK,IAAe,EAAe,oBAAoB,EAAO,EAC3D,IAAY;CAChB,AAAI,KAAQ,SACV,IAAY,GAAG,EAAS,GAAG,EAAK,KAAK,IAAI;CAE3C,IAAM,IAAmB,KAAY,GAEjC;CACJ,AAQE,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,GAAwB,MADZ,EAAe,eAAe,EAAO,EACd,QAAQ,EAAE,UAAO,CAAC,EAE9D,IAAS;EAKb,AAJI,EAAK,WAAW,OAClB,IAAS,IAAI,EAAK,WAGpB,EAAQ,KAAK;GACX,UAAU,EAAK;GACf;GACA,MAAM;GACP,CAAC;IAGE,KAAe,MAAyC;EAE1D,KAAgB,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;CAQhB,OAPI,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;aAAjB,CACE,kBAAC,QAAD;IAAM,WAAW;cAAc,EAAE,qBAAqB;IAAQ,CAAA,EAC9D,kBAAC,QAAD;IAAM,WAAW;IAAgB,eAAY;cAAO;IAE7C,CAAA,CACF;KACF"}

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,123 @@
+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 { Suspense as c, useCallback as l, useMemo as u, useState as d } from "react";
+import { BackofficeTableSkeleton as f, InlineBanner as p } from "@plumile/ui";
+import { jsx as m } from "react/jsx-runtime";
+import { useTranslation as h } from "react-i18next";
+import * as g from "react-relay";
+import { BACKOFFICE_LIST_REFETCH_POLICY as _, BACKOFFICE_RELATED_TAB_PAGE_SIZE as v } from "@plumile/backoffice-core/constants.js";
+import { setWhereValue as y } from "@plumile/backoffice-core/filters/where.js";
+//#region src/components/backoffice/detail/BackofficeDetailRelationListBlock.tsx
+var { useLazyLoadQuery: b, usePaginationFragment: x } = g, S = () => {
+	let { t } = e();
+	return /* @__PURE__ */ m(f, {
+		rows: 6,
+		ariaLabel: t("common.loading")
+	});
+}, C = ({ title: t, config: n, entities: r, relation: c, value: f }) => {
+	let { t: p } = h(), { t: g } = e(), S = n.list, C = n.listDefaults ?? S.defaultState ?? {
+		where: null,
+		sort: null
+	}, [w, T] = d({
+		where: C.where,
+		sort: C.sort ?? null
+	}), E = u(() => f == null || f.trim() === "" ? null : y(w.where, c.whereKey, f, c.path), [
+		c.path,
+		c.whereKey,
+		w.where,
+		f
+	]), D = E ?? w.where, O = w.sort ?? C.sort, k = u(() => ({
+		where: D,
+		sort: O,
+		count: v,
+		cursor: null
+	}), [D, O]), A = u(() => S.buildQueryVariables(k), [S, k]), j = b(S.query, A, { fetchPolicy: "store-or-network" }), { data: M, loadNext: N, hasNext: P, isLoadingNext: F, refetch: I } = x(S.fragment, j), L = S.getConnection(M), R = u(() => L.edges.map((e) => S.toRow(e.node)), [L.edges, S]), z = u(() => i(S.columns, {
+		tApp: p,
+		t: g,
+		resolveEntityHref: (e, t) => {
+			let n = r[e];
+			return n == null ? null : n.routes.detail(t);
+		}
+	}), [
+		r,
+		S.columns,
+		g,
+		p
+	]), B = l((e) => S.getRowId(e), [S]), { onRefresh: V } = o({
+		refetch: I,
+		variables: k,
+		defaults: u(() => ({
+			where: E ?? C.where,
+			sort: C.sort,
+			count: v,
+			cursor: null
+		}), [
+			C.sort,
+			C.where,
+			E
+		]),
+		fetchPolicy: _,
+		buildQueryVariables: S.buildQueryVariables
+	}), H = a({
+		hasNext: P,
+		isLoadingNext: F,
+		loadNext: N,
+		count: v
+	});
+	return /* @__PURE__ */ m(s, {
+		config: n,
+		state: w,
+		pushState: (e) => {
+			T(e);
+		},
+		header: { title: t },
+		rows: R,
+		columns: z,
+		getRowId: B,
+		hasNextPage: P,
+		isLoadingMore: F,
+		onLoadMore: H,
+		onRefresh: V,
+		totalCount: L.totalCount ?? null,
+		variant: "embedded"
+	});
+}, w = ({ title: n, relation: i, value: a }) => {
+	let { t: o } = e(), { entities: s } = t(), c = r(u(() => [i.target], [i.target]));
+	if (c.status === "loading") return /* @__PURE__ */ m(f, {
+		rows: 6,
+		ariaLabel: o("common.loading")
+	});
+	if (c.status === "error") return /* @__PURE__ */ m(p, {
+		tone: "warning",
+		title: o("relations.unavailable.title"),
+		children: o("relations.unavailable.description")
+	});
+	let l = c.modules[i.target]?.config;
+	return l == null || l.list.kind === "records" ? null : /* @__PURE__ */ m(C, {
+		title: n,
+		config: l,
+		entities: s,
+		relation: i,
+		value: a
+	});
+}, T = ({ title: e, relation: t, value: r }) => /* @__PURE__ */ m(n, {
+	fallback: () => /* @__PURE__ */ m(S, {}),
+	children: /* @__PURE__ */ m(c, {
+		fallback: /* @__PURE__ */ m(S, {}),
+		children: /* @__PURE__ */ m(w, {
+			title: e,
+			relation: t,
+			value: r
+		})
+	})
+});
+//#endregion
+export { T as BackofficeDetailRelationListBlock, T 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":["import { Suspense, useCallback, useMemo, useState, type JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport * as ReactRelay 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  BackofficeRuntimeRelationFilterSpec,\n  BackofficeRuntimeResolvedListFacetConfig,\n} from '@plumile/backoffice-core/types.js';\nimport { BackofficeTableSkeleton, InlineBanner } from '@plumile/ui';\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\nconst { useLazyLoadQuery, usePaginationFragment } = ReactRelay;\n\nexport type BackofficeDetailRelationListBlockProps = {\n  title: string;\n  relation: BackofficeRuntimeRelationFilterSpec;\n  value: string | null;\n};\n\ntype RelationListContentProps = {\n  title: string;\n  config: BackofficeRuntimeResolvedListFacetConfig & {\n    list: Exclude<\n      BackofficeRuntimeResolvedListFacetConfig['list'],\n      { kind: 'records' }\n    >;\n  };\n  entities: ReturnType<typeof useBackofficeConfig>['entities'];\n  relation: BackofficeRuntimeRelationFilterSpec;\n  value: string | null;\n};\n\ntype RelationListBlockBodyProps = {\n  title: string;\n  relation: BackofficeRuntimeRelationFilterSpec;\n  value: string | null;\n};\n\nconst RelationListSkeleton = (): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n\n  return <BackofficeTableSkeleton rows={6} ariaLabel={t('common.loading')} />;\n};\n\nconst RelationListContent = ({\n  title,\n  config,\n  entities,\n  relation,\n  value,\n}: RelationListContentProps): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\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      relation.whereKey as never,\n      value,\n      relation.path,\n    );\n  }, [relation.path, relation.whereKey, state.where, value]);\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    return listConfig.buildQueryVariables(variablesBase);\n  }, [listConfig, variablesBase]);\n\n  const queryData = useLazyLoadQuery<OperationType>(\n    listConfig.query,\n    variables,\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);\n    },\n    [listConfig],\n  );\n\n  const defaults = useMemo(() => {\n    const baseWhere = relationWhere ?? listDefaults.where;\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,\n    variables: variablesBase,\n    defaults,\n    fetchPolicy: BACKOFFICE_LIST_REFETCH_POLICY,\n    buildQueryVariables: listConfig.buildQueryVariables,\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);\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  relation,\n  value,\n}: RelationListBlockBodyProps): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n  const { entities } = useBackofficeConfig();\n  const relatedEntityIds = useMemo(() => {\n    return [relation.target];\n  }, [relation.target]);\n  const relatedEntitiesState =\n    useBackofficeListEntitiesLoader(relatedEntityIds);\n\n  if (relatedEntitiesState.status === 'loading') {\n    return <BackofficeTableSkeleton rows={6} ariaLabel={t('common.loading')} />;\n  }\n\n  if (relatedEntitiesState.status === 'error') {\n    return (\n      <InlineBanner tone=\"warning\" title={t('relations.unavailable.title')}>\n        {t('relations.unavailable.description')}\n      </InlineBanner>\n    );\n  }\n\n  const config = relatedEntitiesState.modules[relation.target]?.config;\n  if (config == null) {\n    return null;\n  }\n  if (config.list.kind === 'records') {\n    return null;\n  }\n  const connectionConfig = config as RelationListContentProps['config'];\n\n  return (\n    <RelationListContent\n      title={title}\n      config={connectionConfig}\n      entities={entities}\n      relation={relation}\n      value={value}\n    />\n  );\n};\n\nexport const BackofficeDetailRelationListBlock = ({\n  title,\n  relation,\n  value,\n}: BackofficeDetailRelationListBlockProps): JSX.Element => {\n  return (\n    <BackofficeErrorBoundary\n      fallback={() => {\n        return <RelationListSkeleton />;\n      }}\n    >\n      <Suspense fallback={<RelationListSkeleton />}>\n        <RelationListBlockBody\n          title={title}\n          relation={relation}\n          value={value}\n        />\n      </Suspense>\n    </BackofficeErrorBoundary>\n  );\n};\n\nexport default BackofficeDetailRelationListBlock;\n"],"mappings":"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"}

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

@@ -0,0 +1,36 @@
+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 { useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/backoffice/detail/BackofficeDetailSection.tsx
+var l = ({ title: l, description: u, items: d, children: f }) => {
+	let p = o(), m = null;
+	u != null && u !== "" && (m = /* @__PURE__ */ s("p", {
+		className: t,
+		children: u
+	}));
+	let h = null;
+	return d != null && d.length > 0 && (h = /* @__PURE__ */ s("div", {
+		className: n,
+		children: d.map((t) => /* @__PURE__ */ s(e, { ...t }, t.id))
+	})), /* @__PURE__ */ c("section", {
+		className: i,
+		"aria-labelledby": p,
+		children: [
+			/* @__PURE__ */ c("header", {
+				className: r,
+				children: [/* @__PURE__ */ s("h3", {
+					className: a,
+					id: p,
+					children: l
+				}), m]
+			}),
+			h,
+			f
+		]
+	});
+};
+//#endregion
+export { l as BackofficeDetailSection, l 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 { useId, 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  const headingId = useId();\n\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} aria-labelledby={headingId}>\n      <header className={styles.header}>\n        <h3 className={styles.title} id={headingId}>\n          {title}\n        </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,IAAM,IAAY,GAAO,EAErB,IAAsC;CAC1C,AAAI,KAAe,QAAQ,MAAgB,OACzC,IAAkB,kBAAC,KAAD;EAAG,WAAW;YAAqB;EAAgB,CAAA;CAGvE,IAAI,IAAgC;CAWpC,OAVI,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;EAAgB,mBAAiB;YAArD;GACE,kBAAC,UAAD;IAAQ,WAAW;cAAnB,CACE,kBAAC,MAAD;KAAI,WAAW;KAAc,IAAI;eAC9B;KACE,CAAA,EACJ,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 { Tag as n } from "@plumile/ui";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/backoffice/detail/BackofficeDetailTaggedValue.tsx
+var a = ({ tag: a, value: o }) => /* @__PURE__ */ i("span", {
+	className: e,
+	children: [a != null && /* @__PURE__ */ r(n, {
+		tone: a.tone,
+		children: a.label
+	}), /* @__PURE__ */ r("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';\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/BackofficeEntityRefLink.js

@@ -0,0 +1,17 @@
+import { BackofficeEntityLink as e } from "../refs/BackofficeEntityLink.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/backoffice/detail/BackofficeEntityRefLink.tsx
+var n = ({ entity: n, id: r, label: i, filterWhereKey: a, filterValue: o, filterPath: s, filterLabel: c, listConfig: l }) => /* @__PURE__ */ t(e, {
+	entity: n,
+	id: r,
+	label: i ?? r,
+	filterWhereKey: a,
+	filterValue: o ?? void 0,
+	filterPath: s,
+	filterLabel: c,
+	listConfig: l
+});
+//#endregion
+export { n as BackofficeEntityRefLink, n as default };
+
+//# sourceMappingURL=BackofficeEntityRefLink.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeEntityRefLink.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeEntityRefLink.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport type { BackofficeRuntimeResolvedListFacetConfig } from '@plumile/backoffice-core/types.js';\n\nimport { BackofficeEntityLink } from '../refs/BackofficeEntityLink.js';\n\nexport type BackofficeEntityRefLinkProps = {\n  readonly entity: string;\n  readonly id: string | null | undefined;\n  readonly label?: string | null;\n  readonly filterWhereKey?: string;\n  readonly filterValue?: string | null;\n  readonly filterPath?: readonly string[];\n  readonly filterLabel?: string;\n  readonly listConfig?: BackofficeRuntimeResolvedListFacetConfig;\n};\n\nexport const BackofficeEntityRefLink = ({\n  entity,\n  id,\n  label,\n  filterWhereKey,\n  filterValue,\n  filterPath,\n  filterLabel,\n  listConfig,\n}: BackofficeEntityRefLinkProps): JSX.Element => {\n  return (\n    <BackofficeEntityLink\n      entity={entity}\n      id={id}\n      label={label ?? id}\n      filterWhereKey={filterWhereKey}\n      filterValue={filterValue ?? undefined}\n      filterPath={filterPath}\n      filterLabel={filterLabel}\n      listConfig={listConfig}\n    />\n  );\n};\n\nexport default BackofficeEntityRefLink;\n"],"mappings":";;;AAgBA,IAAa,KAA2B,EACtC,WACA,OACA,UACA,mBACA,gBACA,eACA,gBACA,oBAGE,kBAAC,GAAD;CACU;CACJ;CACJ,OAAO,KAAS;CACA;CAChB,aAAa,KAAe,KAAA;CAChB;CACC;CACD;CACZ,CAAA"}

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

@@ -0,0 +1,72 @@
+import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
+import { BackofficeStatusMetaBadge as t } from "./BackofficeStatusMetaBadge.js";
+import { identity as n, root as r, title as i, titleRow as a, top as o } from "./backofficeEntitySummaryHeader.css.js";
+import { Button as s, CopyableText as c, Tag as l } from "@plumile/ui";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/backoffice/detail/BackofficeEntitySummaryHeader.tsx
+var f = (e) => e === "danger" ? "danger" : e === "neutral" ? "secondary" : "primary", p = (e) => /* @__PURE__ */ u(s, {
+	type: "button",
+	variant: f(e.tone),
+	size: "small",
+	leftIcon: e.icon,
+	disabled: e.disabled,
+	isLoading: e.loading,
+	onClick: e.onPress,
+	children: e.label
+}, e.id), m = ({ title: s, entityLabel: f, subtitle: m, status: h, meta: g, primaryActions: _, secondaryActions: v }) => {
+	let { t: y } = e(), b = [..._ ?? [], ...v ?? []];
+	return /* @__PURE__ */ d("header", {
+		className: r,
+		children: [/* @__PURE__ */ d("div", {
+			className: o,
+			children: [/* @__PURE__ */ d("div", {
+				className: n,
+				children: [/* @__PURE__ */ d("div", {
+					className: a,
+					children: [
+						/* @__PURE__ */ u("h1", {
+							className: i,
+							children: s
+						}),
+						/* @__PURE__ */ u(l, {
+							tone: "neutral",
+							children: f
+						}),
+						h != null && /* @__PURE__ */ u(t, { status: h })
+					]
+				}), m != null && /* @__PURE__ */ u("div", {
+					className: "txvbqb8y txvbqbva1 txvbqbl87",
+					children: m
+				})]
+			}), b.length > 0 && /* @__PURE__ */ u("div", {
+				className: "txvbqb9ip txvbqbcp txvbqbdp7 txvbqbao7 txvbqbajy",
+				children: b.map(p)
+			})]
+		}), g != null && g.length > 0 && /* @__PURE__ */ u("div", {
+			className: "txvbqb9iy txvbqbaog txvbqbc0g",
+			children: g.map((e) => {
+				let t = e.value;
+				return e.copyValue != null && e.copyValue !== "" && (t = /* @__PURE__ */ u(c, {
+					value: e.copyValue,
+					copyValue: e.copyValue,
+					truncate: !1,
+					copyLabel: y("common.actions.copy"),
+					copiedLabel: y("common.actions.copied")
+				})), /* @__PURE__ */ d("div", {
+					className: "txvbqb9ip txvbqbai7 txvbqbany txvbqbk5y",
+					children: [/* @__PURE__ */ u("span", {
+						className: "txvbqb8p txvbqb66 txvbqbefp txvbqbva1",
+						children: e.label
+					}), /* @__PURE__ */ u("span", {
+						className: "txvbqb8y txvbqbv9z txvbqbl87",
+						children: t
+					})]
+				}, e.id);
+			})
+		})]
+	});
+};
+//#endregion
+export { m as BackofficeEntitySummaryHeader, m as default };
+
+//# sourceMappingURL=BackofficeEntitySummaryHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeEntitySummaryHeader.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeEntitySummaryHeader.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { Button, CopyableText, Tag } from '@plumile/ui';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport {\n  BackofficeStatusMetaBadge,\n  type BackofficeStatusMetaTone,\n} from './BackofficeStatusMetaBadge.js';\nimport * as styles from './backofficeEntitySummaryHeader.css.js';\n\nexport type BackofficeEntitySummaryHeaderTone = BackofficeStatusMetaTone;\n\nexport type BackofficeEntitySummaryHeaderMetaItem = {\n  readonly id: string;\n  readonly label: string;\n  readonly value: ReactNode;\n  readonly copyValue?: string;\n  readonly tone?: BackofficeEntitySummaryHeaderTone;\n};\n\nexport type BackofficeEntitySummaryHeaderAction = {\n  readonly id: string;\n  readonly label: string;\n  readonly icon?: ReactNode;\n  readonly disabled?: boolean;\n  readonly loading?: boolean;\n  readonly tone?: 'neutral' | 'primary' | 'danger';\n  readonly onPress: () => void;\n};\n\nexport type BackofficeEntitySummaryHeaderProps = {\n  readonly title: ReactNode;\n  readonly entityLabel: string;\n  readonly subtitle?: ReactNode;\n  readonly status?: {\n    readonly label: string;\n    readonly tone: BackofficeEntitySummaryHeaderTone;\n  };\n  readonly meta?: readonly BackofficeEntitySummaryHeaderMetaItem[];\n  readonly primaryActions?: readonly BackofficeEntitySummaryHeaderAction[];\n  readonly secondaryActions?: readonly BackofficeEntitySummaryHeaderAction[];\n};\n\nconst resolveActionVariant = (\n  tone: BackofficeEntitySummaryHeaderAction['tone'],\n): 'primary' | 'secondary' | 'danger' => {\n  if (tone === 'danger') {\n    return 'danger';\n  }\n  if (tone === 'neutral') {\n    return 'secondary';\n  }\n  return 'primary';\n};\n\nconst renderAction = (\n  action: BackofficeEntitySummaryHeaderAction,\n): JSX.Element => {\n  return (\n    <Button\n      key={action.id}\n      type=\"button\"\n      variant={resolveActionVariant(action.tone)}\n      size=\"small\"\n      leftIcon={action.icon}\n      disabled={action.disabled}\n      isLoading={action.loading}\n      onClick={action.onPress}\n    >\n      {action.label}\n    </Button>\n  );\n};\n\nexport const BackofficeEntitySummaryHeader = ({\n  title,\n  entityLabel,\n  subtitle,\n  status,\n  meta,\n  primaryActions,\n  secondaryActions,\n}: BackofficeEntitySummaryHeaderProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const actions = [...(primaryActions ?? []), ...(secondaryActions ?? [])];\n\n  return (\n    <header className={styles.root}>\n      <div className={styles.top}>\n        <div className={styles.identity}>\n          <div className={styles.titleRow}>\n            <h1 className={styles.title}>{title}</h1>\n            <Tag tone=\"neutral\">{entityLabel}</Tag>\n            {status != null && <BackofficeStatusMetaBadge status={status} />}\n          </div>\n          {subtitle != null && (\n            <div className={styles.subtitle}>{subtitle}</div>\n          )}\n        </div>\n        {actions.length > 0 && (\n          <div className={styles.actions}>{actions.map(renderAction)}</div>\n        )}\n      </div>\n      {meta != null && meta.length > 0 && (\n        <div className={styles.meta}>\n          {meta.map((item) => {\n            let valueNode = item.value;\n            if (item.copyValue != null && item.copyValue !== '') {\n              valueNode = (\n                <CopyableText\n                  value={item.copyValue}\n                  copyValue={item.copyValue}\n                  truncate={false}\n                  copyLabel={t('common.actions.copy')}\n                  copiedLabel={t('common.actions.copied')}\n                />\n              );\n            }\n\n            return (\n              <div key={item.id} className={styles.metaItem}>\n                <span className={styles.metaLabel}>{item.label}</span>\n                <span className={styles.metaValue}>{valueNode}</span>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </header>\n  );\n};\n\nexport default BackofficeEntitySummaryHeader;\n"],"mappings":";;;;;;AA2CA,IAAM,KACJ,MAEI,MAAS,WACJ,WAEL,MAAS,YACJ,cAEF,WAGH,KACJ,MAGE,kBAAC,GAAD;CAEE,MAAK;CACL,SAAS,EAAqB,EAAO,KAAK;CAC1C,MAAK;CACL,UAAU,EAAO;CACjB,UAAU,EAAO;CACjB,WAAW,EAAO;CAClB,SAAS,EAAO;WAEf,EAAO;CACD,EAVF,EAAO,GAUL,EAIA,KAAiC,EAC5C,OAAA,GACA,gBACA,UAAA,GACA,WACA,MAAA,GACA,mBACA,0BACqD;CACrD,IAAM,EAAE,SAAM,GAA+B,EACvC,IAAU,CAAC,GAAI,KAAkB,EAAE,EAAG,GAAI,KAAoB,EAAE,CAAE;CAExE,OACE,kBAAC,UAAD;EAAQ,WAAW;YAAnB,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,OAAD;KAAK,WAAW;eAAhB;MACE,kBAAC,MAAD;OAAI,WAAW;iBAAe;OAAW,CAAA;MACzC,kBAAC,GAAD;OAAK,MAAK;iBAAW;OAAkB,CAAA;MACtC,KAAU,QAAQ,kBAAC,GAAD,EAAmC,WAAU,CAAA;MAC5D;QACL,KAAY,QACX,kBAAC,OAAD;KAAK,WAAW;eAAkB;KAAe,CAAA,CAE/C;OACL,EAAQ,SAAS,KAChB,kBAAC,OAAD;IAAK,WAAW;cAAiB,EAAQ,IAAI,EAAa;IAAO,CAAA,CAE/D;MACL,KAAQ,QAAQ,EAAK,SAAS,KAC7B,kBAAC,OAAD;GAAK,WAAW;aACb,EAAK,KAAK,MAAS;IAClB,IAAI,IAAY,EAAK;IAarB,OAZI,EAAK,aAAa,QAAQ,EAAK,cAAc,OAC/C,IACE,kBAAC,GAAD;KACE,OAAO,EAAK;KACZ,WAAW,EAAK;KAChB,UAAU;KACV,WAAW,EAAE,sBAAsB;KACnC,aAAa,EAAE,wBAAwB;KACvC,CAAA,GAKJ,kBAAC,OAAD;KAAmB,WAAW;eAA9B,CACE,kBAAC,QAAD;MAAM,WAAW;gBAAmB,EAAK;MAAa,CAAA,EACtD,kBAAC,QAAD;MAAM,WAAW;gBAAmB;MAAiB,CAAA,CACjD;OAHI,EAAK,GAGT;KAER;GACE,CAAA,CAED"}

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

@@ -0,0 +1,11 @@
+import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/backoffice/detail/BackofficeEnumLabel.tsx
+var n = ({ value: n, getLabel: r, emptyLabel: i }) => {
+	let { t: a } = e(), o = i ?? a("common.notAvailable");
+	return n != null && (o = r(n)), /* @__PURE__ */ t("span", { children: o });
+};
+//#endregion
+export { n as BackofficeEnumLabel, n as default };
+
+//# sourceMappingURL=BackofficeEnumLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeEnumLabel.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeEnumLabel.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nexport type BackofficeEnumLabelProps<TValue extends string> = {\n  readonly value: TValue | null | undefined;\n  readonly getLabel: (value: TValue) => string;\n  readonly emptyLabel?: string;\n};\n\nexport const BackofficeEnumLabel = <TValue extends string>({\n  value,\n  getLabel,\n  emptyLabel,\n}: BackofficeEnumLabelProps<TValue>): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  let label = emptyLabel ?? t('common.notAvailable');\n  if (value != null) {\n    label = getLabel(value);\n  }\n\n  return <span>{label}</span>;\n};\n\nexport default BackofficeEnumLabel;\n"],"mappings":";;;AAUA,IAAa,KAA8C,EACzD,UACA,aACA,oBACmD;CACnD,IAAM,EAAE,SAAM,GAA+B,EACzC,IAAQ,KAAc,EAAE,sBAAsB;CAKlD,OAJI,KAAS,SACX,IAAQ,EAAS,EAAM,GAGlB,kBAAC,QAAD,EAAA,UAAO,GAAa,CAAA"}

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

@@ -0,0 +1,35 @@
+import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
+import { card as t, compactGroup as n, group as r, value as i } from "./backofficeKpiStrip.css.js";
+import { CopyableText as a, MetricCard as o, MetricTileGroup as s, cx as c } from "@plumile/ui";
+import { jsx as l } from "react/jsx-runtime";
+//#region src/components/backoffice/detail/BackofficeKpiStrip.tsx
+var u = ({ items: u, density: d = "comfortable" }) => {
+	let { t: f } = e();
+	if (u.length === 0) return null;
+	let p = r;
+	return d === "compact" && (p = c(r, n)), /* @__PURE__ */ l(s, {
+		className: p,
+		children: u.map((e) => {
+			let n = e.value;
+			return e.copyValue != null && e.copyValue !== "" && (n = /* @__PURE__ */ l(a, {
+				value: e.copyValue,
+				copyValue: e.copyValue,
+				truncate: !1,
+				copyLabel: f("common.actions.copy"),
+				copiedLabel: f("common.actions.copied")
+			})), /* @__PURE__ */ l(o, {
+				className: t,
+				label: e.label,
+				value: /* @__PURE__ */ l("span", {
+					className: i,
+					children: n
+				}),
+				hint: e.hint
+			}, e.id);
+		})
+	});
+};
+//#endregion
+export { u as BackofficeKpiStrip, u as default };
+
+//# sourceMappingURL=BackofficeKpiStrip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeKpiStrip.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeKpiStrip.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { CopyableText, cx, MetricCard, MetricTileGroup } from '@plumile/ui';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport * as styles from './backofficeKpiStrip.css.js';\n\nexport type BackofficeKpiTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger';\n\nexport type BackofficeKpiItem = {\n  readonly id: string;\n  readonly label: string;\n  readonly value: ReactNode;\n  readonly hint?: ReactNode;\n  readonly tone?: BackofficeKpiTone;\n  readonly copyValue?: string;\n};\n\nexport type BackofficeKpiStripProps = {\n  readonly items: readonly BackofficeKpiItem[];\n  readonly density?: 'compact' | 'comfortable';\n};\n\nexport const BackofficeKpiStrip = ({\n  items,\n  density = 'comfortable',\n}: BackofficeKpiStripProps): JSX.Element | null => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  let groupClassName: string | undefined = styles.group;\n  if (density === 'compact') {\n    groupClassName = cx(styles.group, styles.compactGroup);\n  }\n\n  return (\n    <MetricTileGroup className={groupClassName}>\n      {items.map((item) => {\n        let valueNode = item.value;\n        if (item.copyValue != null && item.copyValue !== '') {\n          valueNode = (\n            <CopyableText\n              value={item.copyValue}\n              copyValue={item.copyValue}\n              truncate={false}\n              copyLabel={t('common.actions.copy')}\n              copiedLabel={t('common.actions.copied')}\n            />\n          );\n        }\n\n        return (\n          <MetricCard\n            key={item.id}\n            className={styles.card}\n            label={item.label}\n            value={<span className={styles.value}>{valueNode}</span>}\n            hint={item.hint}\n          />\n        );\n      })}\n    </MetricTileGroup>\n  );\n};\n\nexport default BackofficeKpiStrip;\n"],"mappings":";;;;;AA2BA,IAAa,KAAsB,EACjC,UACA,aAAU,oBACuC;CACjD,IAAM,EAAE,SAAM,GAA+B;CAE7C,IAAI,EAAM,WAAW,GACnB,OAAO;CAGT,IAAI,IAAqC;CAKzC,OAJI,MAAY,cACd,IAAiB,EAAG,GAAc,EAAoB,GAItD,kBAAC,GAAD;EAAiB,WAAW;YACzB,EAAM,KAAK,MAAS;GACnB,IAAI,IAAY,EAAK;GAarB,OAZI,EAAK,aAAa,QAAQ,EAAK,cAAc,OAC/C,IACE,kBAAC,GAAD;IACE,OAAO,EAAK;IACZ,WAAW,EAAK;IAChB,UAAU;IACV,WAAW,EAAE,sBAAsB;IACnC,aAAa,EAAE,wBAAwB;IACvC,CAAA,GAKJ,kBAAC,GAAD;IAEE,WAAW;IACX,OAAO,EAAK;IACZ,OAAO,kBAAC,QAAD;KAAM,WAAW;eAAe;KAAiB,CAAA;IACxD,MAAM,EAAK;IACX,EALK,EAAK,GAKV;IAEJ;EACc,CAAA"}

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

@@ -0,0 +1,37 @@
+import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
+import { BackofficeDetailSection as t } from "./BackofficeDetailSection.js";
+import { eventMeta as n } from "./backofficeLifecycleTimelineSection.css.js";
+import { AuditTimeline as r } from "@plumile/ui";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/backoffice/detail/BackofficeLifecycleTimelineSection.tsx
+var o = ({ title: o, description: s, events: c, emptyLabel: l }) => {
+	let { t: u } = e();
+	return c.length === 0 ? /* @__PURE__ */ i(t, {
+		title: o,
+		description: s,
+		children: l ?? u("common.notAvailable")
+	}) : /* @__PURE__ */ i(t, {
+		title: o,
+		description: s,
+		children: /* @__PURE__ */ i(r, { events: c.map((e) => {
+			let t = null;
+			return (e.actor != null || e.payload != null) && (t = /* @__PURE__ */ a("span", {
+				className: n,
+				children: [e.actor != null && /* @__PURE__ */ i("span", {
+					className: "txvbqbva1",
+					children: e.actor
+				}), e.payload]
+			})), {
+				id: e.id,
+				title: e.label,
+				time: e.timestamp,
+				description: e.description,
+				meta: t
+			};
+		}) })
+	});
+};
+//#endregion
+export { o as BackofficeLifecycleTimelineSection, o as default };
+
+//# sourceMappingURL=BackofficeLifecycleTimelineSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeLifecycleTimelineSection.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeLifecycleTimelineSection.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { AuditTimeline } from '@plumile/ui';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { BackofficeDetailSection } from './BackofficeDetailSection.js';\nimport * as styles from './backofficeLifecycleTimelineSection.css.js';\n\nexport type BackofficeLifecycleEventTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger';\n\nexport type BackofficeLifecycleEvent = {\n  readonly id: string;\n  readonly label: string;\n  readonly timestamp?: ReactNode;\n  readonly description?: ReactNode;\n  readonly actor?: ReactNode;\n  readonly tone?: BackofficeLifecycleEventTone;\n  readonly payload?: ReactNode;\n};\n\nexport type BackofficeLifecycleTimelineSectionProps = {\n  readonly title: string;\n  readonly description?: string;\n  readonly events: readonly BackofficeLifecycleEvent[];\n  readonly emptyLabel?: string;\n};\n\nexport const BackofficeLifecycleTimelineSection = ({\n  title,\n  description,\n  events,\n  emptyLabel,\n}: BackofficeLifecycleTimelineSectionProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (events.length === 0) {\n    return (\n      <BackofficeDetailSection title={title} description={description}>\n        {emptyLabel ?? t('common.notAvailable')}\n      </BackofficeDetailSection>\n    );\n  }\n\n  return (\n    <BackofficeDetailSection title={title} description={description}>\n      <AuditTimeline\n        events={events.map((event) => {\n          let meta: ReactNode = null;\n          if (event.actor != null || event.payload != null) {\n            meta = (\n              <span className={styles.eventMeta}>\n                {event.actor != null && (\n                  <span className={styles.actor}>{event.actor}</span>\n                )}\n                {event.payload}\n              </span>\n            );\n          }\n\n          return {\n            id: event.id,\n            title: event.label,\n            time: event.timestamp,\n            description: event.description,\n            meta,\n          };\n        })}\n      />\n    </BackofficeDetailSection>\n  );\n};\n\nexport default BackofficeLifecycleTimelineSection;\n"],"mappings":";;;;;;AA+BA,IAAa,KAAsC,EACjD,UACA,gBACA,WACA,oBAC0D;CAC1D,IAAM,EAAE,SAAM,GAA+B;CAU7C,OARI,EAAO,WAAW,IAElB,kBAAC,GAAD;EAAgC;EAAoB;YACjD,KAAc,EAAE,sBAAsB;EACf,CAAA,GAK5B,kBAAC,GAAD;EAAgC;EAAoB;YAClD,kBAAC,GAAD,EACE,QAAQ,EAAO,KAAK,MAAU;GAC5B,IAAI,IAAkB;GAYtB,QAXI,EAAM,SAAS,QAAQ,EAAM,WAAW,UAC1C,IACE,kBAAC,QAAD;IAAM,WAAW;cAAjB,CACG,EAAM,SAAS,QACd,kBAAC,QAAD;KAAM,WAAW;eAAe,EAAM;KAAa,CAAA,EAEpD,EAAM,QACF;QAIJ;IACL,IAAI,EAAM;IACV,OAAO,EAAM;IACb,MAAM,EAAM;IACZ,aAAa,EAAM;IACnB;IACD;IACD,EACF,CAAA;EACsB,CAAA"}