@plumile/backoffice-react 0.1.107 → 0.1.109

package/lib/esm/components/backoffice/links/resolveBackofficeLink.js

@@ -0,0 +1,81 @@
+import { resolveSidebarHub as e } from "../layout/sidebarUtils.js";
+import { resolveBackofficeTargetIcon as t } from "./resolveBackofficeTargetIcon.js";
+import { buildBackofficeFallbackListHref as n } from "@plumile/backoffice-core/state/buildListHref.js";
+//#region src/components/backoffice/links/resolveBackofficeLink.ts
+var r = (e, t) => {
+	let n = e[t];
+	if (n == null) throw Error(`Unknown backoffice entity: ${t}`);
+	return n;
+}, i = (t, n) => {
+	let r = t?.hubs?.[n];
+	if (r != null) return r.href;
+	for (let r of Object.values(t?.groups ?? {})) for (let i of r.items ?? []) if (i.kind === "hub" && i.id === n) return e(i, t).href;
+	throw Error(`Unknown backoffice hub: ${n}`);
+}, a = (t, n, r) => {
+	let i = t?.hubs?.[n];
+	if (i != null) return i.title(r);
+	for (let i of Object.values(t?.groups ?? {})) for (let a of i.items ?? []) if (a.kind === "hub" && a.id === n) return e(a, t).title(r);
+	return n;
+}, o = (e) => {
+	let o = e.manifest, s = e.sidebar, c = e.target, l = t({
+		target: e.target,
+		sidebar: e.sidebar
+	});
+	if (c.kind === "dashboard") return {
+		id: "dashboard",
+		href: e.dashboardHref ?? "/",
+		label: e.label ?? e.dashboardLabel ?? "Dashboard",
+		icon: l
+	};
+	if (c.kind === "entity-list") {
+		let t = r(o, c.entityId), { state: i } = c, a = t.routes.list;
+		return i != null && (a = n(t.routes.list, i.where ?? null, i.filters)), {
+			id: `${c.entityId}-list`,
+			href: a,
+			label: e.label ?? t.label(e.tApp),
+			icon: l
+		};
+	}
+	if (c.kind === "entity-detail") {
+		let t = r(o, c.entityId);
+		return {
+			id: `${c.entityId}-entity-${c.id}`,
+			href: t.routes.detail(c.id),
+			label: e.label ?? c.id,
+			icon: l
+		};
+	}
+	if (c.kind === "entity-detail-page") {
+		let t = r(o, c.entityId);
+		return {
+			id: `${c.entityId}-page-${c.id}-${c.pageId}`,
+			href: t.routes.detailPage(c.id, c.pageId),
+			label: e.label ?? c.pageId,
+			icon: l
+		};
+	}
+	if (c.kind === "tool") {
+		let t = r(o, c.toolId);
+		return {
+			id: `tool-${c.toolId}`,
+			href: t.routes.list,
+			label: e.label ?? t.label(e.tApp),
+			icon: l
+		};
+	}
+	return c.kind === "hub" ? {
+		id: `hub-${c.hubId}`,
+		href: i(s, c.hubId),
+		label: e.label ?? a(s, c.hubId, e.tApp),
+		icon: l
+	} : {
+		id: `href-${c.href}`,
+		href: c.href,
+		label: e.label ?? c.href,
+		icon: l
+	};
+};
+//#endregion
+export { o as resolveBackofficeLink };
+
+//# sourceMappingURL=resolveBackofficeLink.js.map

package/lib/esm/components/backoffice/links/resolveBackofficeLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveBackofficeLink.js","names":[],"sources":["../../../../../src/components/backoffice/links/resolveBackofficeLink.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TFunction } from 'i18next';\nimport { buildBackofficeFallbackListHref } from '@plumile/backoffice-core/state/buildListHref.js';\nimport type { BackofficeEntityManifestMap } from '@plumile/backoffice-core/types.js';\n\nimport type { BackofficeSidebarConfig } from '../../../provider/types.js';\nimport { resolveSidebarHub } from '../layout/sidebarUtils.js';\nimport { resolveBackofficeTargetIcon } from './resolveBackofficeTargetIcon.js';\nimport type { BackofficeLinkTarget, BackofficeResolvedLink } from './types.js';\n\nconst requireEntity = (\n  manifest: BackofficeEntityManifestMap,\n  entityId: string,\n) => {\n  const entity = manifest[entityId];\n  if (entity == null) {\n    throw new Error(`Unknown backoffice entity: ${entityId}`);\n  }\n  return entity;\n};\n\nconst resolveHubHref = (\n  sidebar: BackofficeSidebarConfig | undefined,\n  hubId: string,\n): string => {\n  const registeredHub = sidebar?.hubs?.[hubId];\n  if (registeredHub != null) {\n    return registeredHub.href;\n  }\n\n  for (const group of Object.values(sidebar?.groups ?? {})) {\n    for (const item of group.items ?? []) {\n      if (item.kind === 'hub' && item.id === hubId) {\n        return resolveSidebarHub(item, sidebar).href;\n      }\n    }\n  }\n\n  throw new Error(`Unknown backoffice hub: ${hubId}`);\n};\n\nconst resolveHubLabel = (\n  sidebar: BackofficeSidebarConfig | undefined,\n  hubId: string,\n  tApp: TFunction,\n): string => {\n  const registeredHub = sidebar?.hubs?.[hubId];\n  if (registeredHub != null) {\n    return registeredHub.title(tApp);\n  }\n\n  for (const group of Object.values(sidebar?.groups ?? {})) {\n    for (const item of group.items ?? []) {\n      if (item.kind === 'hub' && item.id === hubId) {\n        return resolveSidebarHub(item, sidebar).title(tApp);\n      }\n    }\n  }\n\n  return hubId;\n};\n\nexport const resolveBackofficeLink = <\n  TManifest extends BackofficeEntityManifestMap,\n>(input: {\n  target: BackofficeLinkTarget<TManifest>;\n  label?: ReactNode;\n  manifest: TManifest;\n  sidebar?: BackofficeSidebarConfig<TManifest>;\n  tApp: TFunction;\n  dashboardHref?: string;\n  dashboardLabel?: string;\n}): BackofficeResolvedLink => {\n  const manifest = input.manifest as BackofficeEntityManifestMap;\n  const sidebar = input.sidebar as BackofficeSidebarConfig | undefined;\n  const target = input.target as BackofficeLinkTarget;\n  const icon = resolveBackofficeTargetIcon({\n    target: input.target,\n    sidebar: input.sidebar,\n  });\n\n  if (target.kind === 'dashboard') {\n    const href = input.dashboardHref ?? '/';\n    return {\n      id: 'dashboard',\n      href,\n      label: input.label ?? input.dashboardLabel ?? 'Dashboard',\n      icon,\n    };\n  }\n\n  if (target.kind === 'entity-list') {\n    const entity = requireEntity(manifest, target.entityId);\n    const { state } = target;\n    let href = entity.routes.list;\n    if (state != null) {\n      href = buildBackofficeFallbackListHref(\n        entity.routes.list,\n        state.where ?? null,\n        state.filters,\n      );\n    }\n    return {\n      id: `${target.entityId}-list`,\n      href,\n      label: input.label ?? entity.label(input.tApp),\n      icon,\n    };\n  }\n\n  if (target.kind === 'entity-detail') {\n    const entity = requireEntity(manifest, target.entityId);\n    return {\n      id: `${target.entityId}-entity-${target.id}`,\n      href: entity.routes.detail(target.id),\n      label: input.label ?? target.id,\n      icon,\n    };\n  }\n\n  if (target.kind === 'entity-detail-page') {\n    const entity = requireEntity(manifest, target.entityId);\n    return {\n      id: `${target.entityId}-page-${target.id}-${target.pageId}`,\n      href: entity.routes.detailPage(target.id, target.pageId),\n      label: input.label ?? target.pageId,\n      icon,\n    };\n  }\n\n  if (target.kind === 'tool') {\n    const entity = requireEntity(manifest, target.toolId);\n    return {\n      id: `tool-${target.toolId}`,\n      href: entity.routes.list,\n      label: input.label ?? entity.label(input.tApp),\n      icon,\n    };\n  }\n\n  if (target.kind === 'hub') {\n    return {\n      id: `hub-${target.hubId}`,\n      href: resolveHubHref(sidebar, target.hubId),\n      label: input.label ?? resolveHubLabel(sidebar, target.hubId, input.tApp),\n      icon,\n    };\n  }\n\n  return {\n    id: `href-${target.href}`,\n    href: target.href,\n    label: input.label ?? target.href,\n    icon,\n  };\n};\n"],"mappings":";;;;AAUA,IAAM,KACJ,GACA,MACG;CACH,IAAM,IAAS,EAAS;CACxB,IAAI,KAAU,MACZ,MAAU,MAAM,8BAA8B,IAAW;CAE3D,OAAO;GAGH,KACJ,GACA,MACW;CACX,IAAM,IAAgB,GAAS,OAAO;CACtC,IAAI,KAAiB,MACnB,OAAO,EAAc;CAGvB,KAAK,IAAM,KAAS,OAAO,OAAO,GAAS,UAAU,EAAE,CAAC,EACtD,KAAK,IAAM,KAAQ,EAAM,SAAS,EAAE,EAClC,IAAI,EAAK,SAAS,SAAS,EAAK,OAAO,GACrC,OAAO,EAAkB,GAAM,EAAQ,CAAC;CAK9C,MAAU,MAAM,2BAA2B,IAAQ;GAG/C,KACJ,GACA,GACA,MACW;CACX,IAAM,IAAgB,GAAS,OAAO;CACtC,IAAI,KAAiB,MACnB,OAAO,EAAc,MAAM,EAAK;CAGlC,KAAK,IAAM,KAAS,OAAO,OAAO,GAAS,UAAU,EAAE,CAAC,EACtD,KAAK,IAAM,KAAQ,EAAM,SAAS,EAAE,EAClC,IAAI,EAAK,SAAS,SAAS,EAAK,OAAO,GACrC,OAAO,EAAkB,GAAM,EAAQ,CAAC,MAAM,EAAK;CAKzD,OAAO;GAGI,KAEX,MAQ4B;CAC5B,IAAM,IAAW,EAAM,UACjB,IAAU,EAAM,SAChB,IAAS,EAAM,QACf,IAAO,EAA4B;EACvC,QAAQ,EAAM;EACd,SAAS,EAAM;EAChB,CAAC;CAEF,IAAI,EAAO,SAAS,aAElB,OAAO;EACL,IAAI;EACJ,MAHW,EAAM,iBAAiB;EAIlC,OAAO,EAAM,SAAS,EAAM,kBAAkB;EAC9C;EACD;CAGH,IAAI,EAAO,SAAS,eAAe;EACjC,IAAM,IAAS,EAAc,GAAU,EAAO,SAAS,EACjD,EAAE,aAAU,GACd,IAAO,EAAO,OAAO;EAQzB,OAPI,KAAS,SACX,IAAO,EACL,EAAO,OAAO,MACd,EAAM,SAAS,MACf,EAAM,QACP,GAEI;GACL,IAAI,GAAG,EAAO,SAAS;GACvB;GACA,OAAO,EAAM,SAAS,EAAO,MAAM,EAAM,KAAK;GAC9C;GACD;;CAGH,IAAI,EAAO,SAAS,iBAAiB;EACnC,IAAM,IAAS,EAAc,GAAU,EAAO,SAAS;EACvD,OAAO;GACL,IAAI,GAAG,EAAO,SAAS,UAAU,EAAO;GACxC,MAAM,EAAO,OAAO,OAAO,EAAO,GAAG;GACrC,OAAO,EAAM,SAAS,EAAO;GAC7B;GACD;;CAGH,IAAI,EAAO,SAAS,sBAAsB;EACxC,IAAM,IAAS,EAAc,GAAU,EAAO,SAAS;EACvD,OAAO;GACL,IAAI,GAAG,EAAO,SAAS,QAAQ,EAAO,GAAG,GAAG,EAAO;GACnD,MAAM,EAAO,OAAO,WAAW,EAAO,IAAI,EAAO,OAAO;GACxD,OAAO,EAAM,SAAS,EAAO;GAC7B;GACD;;CAGH,IAAI,EAAO,SAAS,QAAQ;EAC1B,IAAM,IAAS,EAAc,GAAU,EAAO,OAAO;EACrD,OAAO;GACL,IAAI,QAAQ,EAAO;GACnB,MAAM,EAAO,OAAO;GACpB,OAAO,EAAM,SAAS,EAAO,MAAM,EAAM,KAAK;GAC9C;GACD;;CAYH,OATI,EAAO,SAAS,QACX;EACL,IAAI,OAAO,EAAO;EAClB,MAAM,EAAe,GAAS,EAAO,MAAM;EAC3C,OAAO,EAAM,SAAS,EAAgB,GAAS,EAAO,OAAO,EAAM,KAAK;EACxE;EACD,GAGI;EACL,IAAI,QAAQ,EAAO;EACnB,MAAM,EAAO;EACb,OAAO,EAAM,SAAS,EAAO;EAC7B;EACD"}

package/lib/esm/components/backoffice/links/resolveBackofficeTargetIcon.js

@@ -0,0 +1,50 @@
+import { resolveGroupItems as e, resolveSidebarHubFor as t } from "../layout/sidebarUtils.js";
+//#region src/components/backoffice/links/resolveBackofficeTargetIcon.ts
+var n = (e) => e.kind === "dashboard" ? {
+	kind: "dashboard",
+	id: "dashboard"
+} : e.kind === "entity-list" || e.kind === "entity-detail" || e.kind === "entity-detail-page" ? {
+	kind: "entity",
+	id: e.entityId
+} : e.kind === "tool" ? {
+	kind: "tool",
+	id: e.toolId
+} : e.kind === "hub" ? {
+	kind: "hub",
+	id: e.hubId
+} : {
+	kind: "href",
+	id: e.href
+}, r = (e, n, r, i) => {
+	if (n.kind === "dashboard") return e.kind === "dashboard" && (e.id ?? "dashboard") === n.id ? e.icon ?? r.icon : void 0;
+	if (n.kind === "hub") {
+		if (e.kind === "hub" && e.id === n.id) {
+			let n = t(e, i);
+			return e.icon ?? n.icon ?? r.icon;
+		}
+		return;
+	}
+	if (n.kind === "entity" || n.kind === "tool") {
+		if (e.kind === n.kind && e.id === n.id) return e.icon ?? r.icon;
+		if (e.kind === "hub") {
+			let a = t(e, i);
+			for (let t of a.groups) {
+				let i = t.items.find((e) => e.kind === n.kind && e.id === n.id);
+				if (i != null) return i.icon ?? t.icon ?? e.icon ?? a.icon ?? r.icon;
+			}
+		}
+	}
+}, i = (t) => {
+	let i = n(t.target);
+	if (i.kind !== "href") {
+		for (let n of Object.values(t.sidebar?.groups ?? {})) for (let a of e(n)) {
+			let e = r(a, i, n, t.sidebar);
+			if (e != null) return e;
+		}
+		if (i.kind === "hub") return t.sidebar?.hubs?.[i.id]?.icon;
+	}
+};
+//#endregion
+export { i as resolveBackofficeTargetIcon };
+
+//# sourceMappingURL=resolveBackofficeTargetIcon.js.map

package/lib/esm/components/backoffice/links/resolveBackofficeTargetIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveBackofficeTargetIcon.js","names":[],"sources":["../../../../../src/components/backoffice/links/resolveBackofficeTargetIcon.ts"],"sourcesContent":["import type { BackofficeEntityManifestMap } from '@plumile/backoffice-core/types.js';\n\nimport type {\n  BackofficeIconComponent,\n  BackofficeSidebarConfig,\n  BackofficeSidebarGroupConfig,\n  BackofficeSidebarItemConfig,\n} from '../../../provider/types.js';\nimport {\n  resolveGroupItems,\n  resolveSidebarHubFor,\n} from '../layout/sidebarUtils.js';\nimport type { BackofficeLinkTarget } from './types.js';\n\nconst getTargetId = (\n  target: BackofficeLinkTarget,\n): { kind: 'dashboard' | 'entity' | 'tool' | 'hub' | 'href'; id: string } => {\n  if (target.kind === 'dashboard') {\n    return { kind: 'dashboard', id: 'dashboard' };\n  }\n  if (target.kind === 'entity-list') {\n    return { kind: 'entity', id: target.entityId };\n  }\n  if (target.kind === 'entity-detail') {\n    return { kind: 'entity', id: target.entityId };\n  }\n  if (target.kind === 'entity-detail-page') {\n    return { kind: 'entity', id: target.entityId };\n  }\n  if (target.kind === 'tool') {\n    return { kind: 'tool', id: target.toolId };\n  }\n  if (target.kind === 'hub') {\n    return { kind: 'hub', id: target.hubId };\n  }\n  return { kind: 'href', id: target.href };\n};\n\nconst resolveItemIcon = <TManifest extends BackofficeEntityManifestMap>(\n  item: BackofficeSidebarItemConfig<TManifest>,\n  target: ReturnType<typeof getTargetId>,\n  group: BackofficeSidebarGroupConfig<TManifest>,\n  sidebar: BackofficeSidebarConfig<TManifest> | undefined,\n): BackofficeIconComponent | undefined => {\n  if (target.kind === 'dashboard') {\n    if (item.kind === 'dashboard' && (item.id ?? 'dashboard') === target.id) {\n      return item.icon ?? group.icon;\n    }\n    return undefined;\n  }\n\n  if (target.kind === 'hub') {\n    if (item.kind === 'hub' && item.id === target.id) {\n      const hub = resolveSidebarHubFor(item, sidebar);\n      return item.icon ?? hub.icon ?? group.icon;\n    }\n    return undefined;\n  }\n\n  if (target.kind === 'entity' || target.kind === 'tool') {\n    if (item.kind === target.kind && item.id === target.id) {\n      return item.icon ?? group.icon;\n    }\n\n    if (item.kind === 'hub') {\n      const hub = resolveSidebarHubFor(item, sidebar);\n      for (const hubGroup of hub.groups) {\n        const hubItem = hubGroup.items.find((candidate) => {\n          return candidate.kind === target.kind && candidate.id === target.id;\n        });\n        if (hubItem != null) {\n          return (\n            hubItem.icon ?? hubGroup.icon ?? item.icon ?? hub.icon ?? group.icon\n          );\n        }\n      }\n    }\n  }\n\n  return undefined;\n};\n\nexport const resolveBackofficeTargetIcon = <\n  TManifest extends BackofficeEntityManifestMap,\n>(input: {\n  target: BackofficeLinkTarget<TManifest>;\n  sidebar?: BackofficeSidebarConfig<TManifest>;\n}): BackofficeIconComponent | undefined => {\n  const target = getTargetId(input.target);\n  if (target.kind === 'href') {\n    return undefined;\n  }\n\n  for (const group of Object.values(input.sidebar?.groups ?? {})) {\n    for (const item of resolveGroupItems(group)) {\n      const icon = resolveItemIcon(item, target, group, input.sidebar);\n      if (icon != null) {\n        return icon;\n      }\n    }\n  }\n\n  if (target.kind === 'hub') {\n    return input.sidebar?.hubs?.[target.id]?.icon;\n  }\n\n  return undefined;\n};\n"],"mappings":";;AAcA,IAAM,KACJ,MAEI,EAAO,SAAS,cACX;CAAE,MAAM;CAAa,IAAI;CAAa,GAE3C,EAAO,SAAS,iBAGhB,EAAO,SAAS,mBAGhB,EAAO,SAAS,uBACX;CAAE,MAAM;CAAU,IAAI,EAAO;CAAU,GAE5C,EAAO,SAAS,SACX;CAAE,MAAM;CAAQ,IAAI,EAAO;CAAQ,GAExC,EAAO,SAAS,QACX;CAAE,MAAM;CAAO,IAAI,EAAO;CAAO,GAEnC;CAAE,MAAM;CAAQ,IAAI,EAAO;CAAM,EAGpC,KACJ,GACA,GACA,GACA,MACwC;CACxC,IAAI,EAAO,SAAS,aAIlB,OAHI,EAAK,SAAS,gBAAgB,EAAK,MAAM,iBAAiB,EAAO,KAC5D,EAAK,QAAQ,EAAM,OAE5B;CAGF,IAAI,EAAO,SAAS,OAAO;EACzB,IAAI,EAAK,SAAS,SAAS,EAAK,OAAO,EAAO,IAAI;GAChD,IAAM,IAAM,EAAqB,GAAM,EAAQ;GAC/C,OAAO,EAAK,QAAQ,EAAI,QAAQ,EAAM;;EAExC;;CAGF,IAAI,EAAO,SAAS,YAAY,EAAO,SAAS,QAAQ;EACtD,IAAI,EAAK,SAAS,EAAO,QAAQ,EAAK,OAAO,EAAO,IAClD,OAAO,EAAK,QAAQ,EAAM;EAG5B,IAAI,EAAK,SAAS,OAAO;GACvB,IAAM,IAAM,EAAqB,GAAM,EAAQ;GAC/C,KAAK,IAAM,KAAY,EAAI,QAAQ;IACjC,IAAM,IAAU,EAAS,MAAM,MAAM,MAC5B,EAAU,SAAS,EAAO,QAAQ,EAAU,OAAO,EAAO,GACjE;IACF,IAAI,KAAW,MACb,OACE,EAAQ,QAAQ,EAAS,QAAQ,EAAK,QAAQ,EAAI,QAAQ,EAAM;;;;GAU/D,KAEX,MAGyC;CACzC,IAAM,IAAS,EAAY,EAAM,OAAO;CACpC,MAAO,SAAS,QAIpB;OAAK,IAAM,KAAS,OAAO,OAAO,EAAM,SAAS,UAAU,EAAE,CAAC,EAC5D,KAAK,IAAM,KAAQ,EAAkB,EAAM,EAAE;GAC3C,IAAM,IAAO,EAAgB,GAAM,GAAQ,GAAO,EAAM,QAAQ;GAChE,IAAI,KAAQ,MACV,OAAO;;EAKb,IAAI,EAAO,SAAS,OAClB,OAAO,EAAM,SAAS,OAAO,EAAO,KAAK"}

package/lib/esm/components/backoffice/links/useBackofficeLink.js

@@ -0,0 +1,21 @@
+import { useBackofficeConfig as e } from "../../../provider/BackofficeConfigContext.js";
+import { useOptionalBackofficeTopbarPortalContext as t } from "../layout/breadcrumb/BackofficeTopbarPortalContext.js";
+import { resolveBackofficeLink as n } from "./resolveBackofficeLink.js";
+import { useTranslation as r } from "react-i18next";
+//#region src/components/backoffice/links/useBackofficeLink.ts
+var i = (i, a) => {
+	let { entityManifest: o, sidebar: s } = e(), c = t(), { t: l } = r();
+	return n({
+		target: i,
+		label: a?.label,
+		manifest: o,
+		sidebar: s,
+		tApp: l,
+		dashboardHref: c?.dashboardHref,
+		dashboardLabel: c?.dashboardLabel
+	});
+};
+//#endregion
+export { i as useBackofficeLink };
+
+//# sourceMappingURL=useBackofficeLink.js.map

package/lib/esm/components/backoffice/links/useBackofficeLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBackofficeLink.js","names":[],"sources":["../../../../../src/components/backoffice/links/useBackofficeLink.ts"],"sourcesContent":["import { type ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { BackofficeEntityManifestMap } from '@plumile/backoffice-core/types.js';\n\nimport { useBackofficeConfig } from '../../../provider/BackofficeConfigContext.js';\nimport { useOptionalBackofficeTopbarPortalContext } from '../layout/breadcrumb/BackofficeTopbarPortalContext.js';\nimport { resolveBackofficeLink } from './resolveBackofficeLink.js';\nimport type { BackofficeLinkTarget, BackofficeResolvedLink } from './types.js';\n\nexport const useBackofficeLink = <\n  TManifest extends BackofficeEntityManifestMap = BackofficeEntityManifestMap,\n>(\n  target: BackofficeLinkTarget<TManifest>,\n  options?: {\n    label?: ReactNode;\n  },\n): BackofficeResolvedLink => {\n  const { entityManifest, sidebar } = useBackofficeConfig();\n  const topbar = useOptionalBackofficeTopbarPortalContext();\n  const { t: tApp } = useTranslation();\n\n  return resolveBackofficeLink({\n    target,\n    label: options?.label,\n    manifest: entityManifest,\n    sidebar,\n    tApp,\n    dashboardHref: topbar?.dashboardHref,\n    dashboardLabel: topbar?.dashboardLabel,\n  });\n};\n"],"mappings":";;;;;AAUA,IAAa,KAGX,GACA,MAG2B;CAC3B,IAAM,EAAE,mBAAgB,eAAY,GAAqB,EACnD,IAAS,GAA0C,EACnD,EAAE,GAAG,MAAS,GAAgB;CAEpC,OAAO,EAAsB;EAC3B;EACA,OAAO,GAAS;EAChB,UAAU;EACV;EACA;EACA,eAAe,GAAQ;EACvB,gBAAgB,GAAQ;EACzB,CAAC"}

package/lib/esm/components/backoffice/pickers/EntityIdPickerDialog.js

@@ -81,6 +81,7 @@ var { useFragment: S, useLazyLoadQuery: C } = x, w = "store-and-network", T = (e
 		onClose: _,
 		title: o,
 		footer: P,
+		initialFocus: "first-form-control",
 		children: /* @__PURE__ */ v(a, {
 			search: C,
 			onSearchChange: F,

package/lib/esm/components/backoffice/pickers/EntityIdPickerDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityIdPickerDialog.js","names":[],"sources":["../../../../../src/components/backoffice/pickers/EntityIdPickerDialog.tsx"],"sourcesContent":["import {\n  Suspense,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type JSX,\n} from 'react';\nimport type { TFunction } from 'i18next';\nimport { useTranslation } from 'react-i18next';\nimport * as ReactRelay from 'react-relay';\n\nimport {\n  BackofficeEmptyState,\n  Button,\n  InlineBanner,\n  Modal,\n  Spinner,\n} from '@plumile/ui';\nimport type {\n  BackofficePickerScope,\n  BackofficeRuntimeEntityPickerConfig,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\n\nimport { BackofficeErrorBoundary } from '../errors/BackofficeErrorBoundary.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficePickerEntityLoader } from '../../../provider/useBackofficeEntityLoader.js';\n\nimport { EntityPickerShell } from './shared/EntityPickerShell.js';\nimport { EntityPickerList } from './shared/EntityPickerList.js';\nimport type { EntityPickerRowViewModel } from './types.js';\nimport * as styles from './entityIdPickerDialog.css.js';\n\nconst { useFragment, useLazyLoadQuery } = ReactRelay;\n\nexport type EntityIdPickerDialogProps = {\n  isOpen: boolean;\n  entity: string;\n  title: string;\n  scope?: BackofficePickerScope<Record<string, unknown>>;\n  onClose: () => void;\n  onSelectId: (id: string) => void;\n};\n\nconst PICKER_FETCH_POLICY = 'store-and-network' as const;\n\nconst resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\ntype PickerBodyProps = {\n  config: BackofficeRuntimeEntityPickerConfig;\n  search: string;\n  scope?: BackofficePickerScope<Record<string, unknown>>;\n  fetchKey: number;\n  onSelectId: (id: string) => void;\n};\n\ntype RuntimePickerRow = {\n  title: string;\n  subtitle?: string | null | undefined;\n};\n\nconst PickerBody = ({\n  config,\n  search,\n  scope,\n  fetchKey,\n  onSelectId,\n}: PickerBodyProps): JSX.Element => {\n  const variables = useMemo(() => {\n    const trimmed = search.trim();\n    return config.buildQueryVariables({ search: trimmed, scope });\n  }, [config, scope, search]);\n\n  const queryData = useLazyLoadQuery(config.query, variables, {\n    fetchPolicy: PICKER_FETCH_POLICY,\n    fetchKey,\n  });\n\n  const fragmentData = useFragment(\n    config.fragment,\n    queryData as never,\n  ) as unknown;\n\n  const connection = config.getConnection(fragmentData);\n\n  const items = useMemo<readonly EntityPickerRowViewModel[]>(() => {\n    return connection.edges.map((edge) => {\n      const row = config.toRow(edge.node) as RuntimePickerRow;\n      const id = config.getRowId(row);\n      return {\n        id,\n        title: row.title,\n        subtitle: row.subtitle,\n      };\n    });\n  }, [config, connection.edges]);\n\n  return <EntityPickerList items={items} onSelectId={onSelectId} />;\n};\n\nconst buildFooter = (onClose: () => void, closeLabel: string): JSX.Element => {\n  return (\n    <>\n      <Button type=\"button\" variant=\"secondary\" onClick={onClose}>\n        {closeLabel}\n      </Button>\n    </>\n  );\n};\n\nconst PickerUnavailable = ({ message }: { message: string }) => {\n  return (\n    <InlineBanner tone=\"warning\" title={message}>\n      {null}\n    </InlineBanner>\n  );\n};\n\nconst PickerLoading = ({ label }: { label: string }): JSX.Element => {\n  return (\n    <div className={styles.loadingState} role=\"status\" aria-live=\"polite\">\n      <Spinner size={18} ariaLabel={label} />\n      <span className={styles.loadingLabel}>{label}</span>\n    </div>\n  );\n};\n\nexport const EntityIdPickerDialog = ({\n  isOpen,\n  entity,\n  title,\n  scope,\n  onClose,\n  onSelectId,\n}: EntityIdPickerDialogProps): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const [search, setSearch] = useState('');\n  const [fetchKey, setFetchKey] = useState(0);\n  const entityState = useBackofficePickerEntityLoader(entity, {\n    enabled: isOpen,\n  });\n\n  let pickerConfig: BackofficeRuntimeEntityPickerConfig | undefined;\n  if (entityState.status === 'loaded') {\n    pickerConfig = entityState.module.config.picker as\n      | BackofficeRuntimeEntityPickerConfig\n      | undefined;\n  }\n\n  useEffect(() => {\n    if (isOpen) {\n      setSearch('');\n      setFetchKey((value) => {\n        return value + 1;\n      });\n    }\n  }, [isOpen]);\n\n  const footer = useMemo(() => {\n    return buildFooter(onClose, t('common.actions.close'));\n  }, [onClose, t]);\n\n  const handleSearchChange = useCallback((next: string) => {\n    setSearch(next);\n    setFetchKey((value) => {\n      return value + 1;\n    });\n  }, []);\n\n  const handleSelectId = useCallback(\n    (id: string) => {\n      onSelectId(id);\n      onClose();\n    },\n    [onClose, onSelectId],\n  );\n\n  if (!isOpen) {\n    return null;\n  }\n\n  let resolvedSearchPlaceholder: string | undefined;\n  if (pickerConfig?.searchPlaceholder != null) {\n    resolvedSearchPlaceholder = resolveLabel(\n      pickerConfig.searchPlaceholder,\n      tApp,\n    );\n  }\n\n  const trimmedSearch = search.trim();\n  const isSearchRequired = pickerConfig?.searchRequired === true;\n\n  let pickerNode: JSX.Element;\n  if (entityState.status === 'loading') {\n    pickerNode = <PickerLoading label={t('common.loading')} />;\n  } else if (pickerConfig != null) {\n    if (isSearchRequired && trimmedSearch === '') {\n      pickerNode = <BackofficeEmptyState title={t('picker.searchRequired')} />;\n    } else {\n      pickerNode = (\n        <PickerBody\n          config={pickerConfig}\n          search={search}\n          scope={scope}\n          fetchKey={fetchKey}\n          onSelectId={handleSelectId}\n        />\n      );\n    }\n  } else {\n    pickerNode = (\n      <PickerUnavailable message={t('picker.unavailable', { entity })} />\n    );\n  }\n\n  return (\n    <Modal isOpen={isOpen} onClose={onClose} title={title} footer={footer}>\n      <EntityPickerShell\n        search={search}\n        onSearchChange={handleSearchChange}\n        searchPlaceholder={resolvedSearchPlaceholder}\n        searchEnabled={pickerConfig?.searchEnabled ?? true}\n      >\n        <BackofficeErrorBoundary\n          fallback={(args: { error: unknown; reset: () => void }) => {\n            const { reset } = args;\n            return (\n              <InlineBanner\n                tone=\"danger\"\n                title={t('picker.errors.loadFailed')}\n                actions={\n                  <Button\n                    type=\"button\"\n                    variant=\"secondary\"\n                    onClick={() => {\n                      reset();\n                      setFetchKey((value) => {\n                        return value + 1;\n                      });\n                    }}\n                  >\n                    {t('common.actions.retry')}\n                  </Button>\n                }\n              >\n                {null}\n              </InlineBanner>\n            );\n          }}\n        >\n          <Suspense fallback={<PickerLoading label={t('common.loading')} />}>\n            {pickerNode}\n          </Suspense>\n        </BackofficeErrorBoundary>\n      </EntityPickerShell>\n    </Modal>\n  );\n};\n\nexport type { BackofficePickerScope } from '@plumile/backoffice-core/types.js';\n\nexport default EntityIdPickerDialog;\n"],"mappings":"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"}
+{"version":3,"file":"EntityIdPickerDialog.js","names":[],"sources":["../../../../../src/components/backoffice/pickers/EntityIdPickerDialog.tsx"],"sourcesContent":["import {\n  Suspense,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type JSX,\n} from 'react';\nimport type { TFunction } from 'i18next';\nimport { useTranslation } from 'react-i18next';\nimport * as ReactRelay from 'react-relay';\n\nimport {\n  BackofficeEmptyState,\n  Button,\n  InlineBanner,\n  Modal,\n  Spinner,\n} from '@plumile/ui';\nimport type {\n  BackofficePickerScope,\n  BackofficeRuntimeEntityPickerConfig,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\n\nimport { BackofficeErrorBoundary } from '../errors/BackofficeErrorBoundary.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficePickerEntityLoader } from '../../../provider/useBackofficeEntityLoader.js';\n\nimport { EntityPickerShell } from './shared/EntityPickerShell.js';\nimport { EntityPickerList } from './shared/EntityPickerList.js';\nimport type { EntityPickerRowViewModel } from './types.js';\nimport * as styles from './entityIdPickerDialog.css.js';\n\nconst { useFragment, useLazyLoadQuery } = ReactRelay;\n\nexport type EntityIdPickerDialogProps = {\n  isOpen: boolean;\n  entity: string;\n  title: string;\n  scope?: BackofficePickerScope<Record<string, unknown>>;\n  onClose: () => void;\n  onSelectId: (id: string) => void;\n};\n\nconst PICKER_FETCH_POLICY = 'store-and-network' as const;\n\nconst resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\ntype PickerBodyProps = {\n  config: BackofficeRuntimeEntityPickerConfig;\n  search: string;\n  scope?: BackofficePickerScope<Record<string, unknown>>;\n  fetchKey: number;\n  onSelectId: (id: string) => void;\n};\n\ntype RuntimePickerRow = {\n  title: string;\n  subtitle?: string | null | undefined;\n};\n\nconst PickerBody = ({\n  config,\n  search,\n  scope,\n  fetchKey,\n  onSelectId,\n}: PickerBodyProps): JSX.Element => {\n  const variables = useMemo(() => {\n    const trimmed = search.trim();\n    return config.buildQueryVariables({ search: trimmed, scope });\n  }, [config, scope, search]);\n\n  const queryData = useLazyLoadQuery(config.query, variables, {\n    fetchPolicy: PICKER_FETCH_POLICY,\n    fetchKey,\n  });\n\n  const fragmentData = useFragment(\n    config.fragment,\n    queryData as never,\n  ) as unknown;\n\n  const connection = config.getConnection(fragmentData);\n\n  const items = useMemo<readonly EntityPickerRowViewModel[]>(() => {\n    return connection.edges.map((edge) => {\n      const row = config.toRow(edge.node) as RuntimePickerRow;\n      const id = config.getRowId(row);\n      return {\n        id,\n        title: row.title,\n        subtitle: row.subtitle,\n      };\n    });\n  }, [config, connection.edges]);\n\n  return <EntityPickerList items={items} onSelectId={onSelectId} />;\n};\n\nconst buildFooter = (onClose: () => void, closeLabel: string): JSX.Element => {\n  return (\n    <>\n      <Button type=\"button\" variant=\"secondary\" onClick={onClose}>\n        {closeLabel}\n      </Button>\n    </>\n  );\n};\n\nconst PickerUnavailable = ({ message }: { message: string }) => {\n  return (\n    <InlineBanner tone=\"warning\" title={message}>\n      {null}\n    </InlineBanner>\n  );\n};\n\nconst PickerLoading = ({ label }: { label: string }): JSX.Element => {\n  return (\n    <div className={styles.loadingState} role=\"status\" aria-live=\"polite\">\n      <Spinner size={18} ariaLabel={label} />\n      <span className={styles.loadingLabel}>{label}</span>\n    </div>\n  );\n};\n\nexport const EntityIdPickerDialog = ({\n  isOpen,\n  entity,\n  title,\n  scope,\n  onClose,\n  onSelectId,\n}: EntityIdPickerDialogProps): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const [search, setSearch] = useState('');\n  const [fetchKey, setFetchKey] = useState(0);\n  const entityState = useBackofficePickerEntityLoader(entity, {\n    enabled: isOpen,\n  });\n\n  let pickerConfig: BackofficeRuntimeEntityPickerConfig | undefined;\n  if (entityState.status === 'loaded') {\n    pickerConfig = entityState.module.config.picker as\n      | BackofficeRuntimeEntityPickerConfig\n      | undefined;\n  }\n\n  useEffect(() => {\n    if (isOpen) {\n      setSearch('');\n      setFetchKey((value) => {\n        return value + 1;\n      });\n    }\n  }, [isOpen]);\n\n  const footer = useMemo(() => {\n    return buildFooter(onClose, t('common.actions.close'));\n  }, [onClose, t]);\n\n  const handleSearchChange = useCallback((next: string) => {\n    setSearch(next);\n    setFetchKey((value) => {\n      return value + 1;\n    });\n  }, []);\n\n  const handleSelectId = useCallback(\n    (id: string) => {\n      onSelectId(id);\n      onClose();\n    },\n    [onClose, onSelectId],\n  );\n\n  if (!isOpen) {\n    return null;\n  }\n\n  let resolvedSearchPlaceholder: string | undefined;\n  if (pickerConfig?.searchPlaceholder != null) {\n    resolvedSearchPlaceholder = resolveLabel(\n      pickerConfig.searchPlaceholder,\n      tApp,\n    );\n  }\n\n  const trimmedSearch = search.trim();\n  const isSearchRequired = pickerConfig?.searchRequired === true;\n\n  let pickerNode: JSX.Element;\n  if (entityState.status === 'loading') {\n    pickerNode = <PickerLoading label={t('common.loading')} />;\n  } else if (pickerConfig != null) {\n    if (isSearchRequired && trimmedSearch === '') {\n      pickerNode = <BackofficeEmptyState title={t('picker.searchRequired')} />;\n    } else {\n      pickerNode = (\n        <PickerBody\n          config={pickerConfig}\n          search={search}\n          scope={scope}\n          fetchKey={fetchKey}\n          onSelectId={handleSelectId}\n        />\n      );\n    }\n  } else {\n    pickerNode = (\n      <PickerUnavailable message={t('picker.unavailable', { entity })} />\n    );\n  }\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onClose}\n      title={title}\n      footer={footer}\n      initialFocus=\"first-form-control\"\n    >\n      <EntityPickerShell\n        search={search}\n        onSearchChange={handleSearchChange}\n        searchPlaceholder={resolvedSearchPlaceholder}\n        searchEnabled={pickerConfig?.searchEnabled ?? true}\n      >\n        <BackofficeErrorBoundary\n          fallback={(args: { error: unknown; reset: () => void }) => {\n            const { reset } = args;\n            return (\n              <InlineBanner\n                tone=\"danger\"\n                title={t('picker.errors.loadFailed')}\n                actions={\n                  <Button\n                    type=\"button\"\n                    variant=\"secondary\"\n                    onClick={() => {\n                      reset();\n                      setFetchKey((value) => {\n                        return value + 1;\n                      });\n                    }}\n                  >\n                    {t('common.actions.retry')}\n                  </Button>\n                }\n              >\n                {null}\n              </InlineBanner>\n            );\n          }}\n        >\n          <Suspense fallback={<PickerLoading label={t('common.loading')} />}>\n            {pickerNode}\n          </Suspense>\n        </BackofficeErrorBoundary>\n      </EntityPickerShell>\n    </Modal>\n  );\n};\n\nexport type { BackofficePickerScope } from '@plumile/backoffice-core/types.js';\n\nexport default EntityIdPickerDialog;\n"],"mappings":"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"}

package/lib/esm/components/backoffice/pickers/entityIdPickerDialog.css.js

@@ -1,7 +1,7 @@
 /* empty css                                    */
 //#region src/components/backoffice/pickers/entityIdPickerDialog.css.ts
-var e = "txvbqb9ip txvbqbai7 txvbqbaog", t = "txvbqbnvg txvbqboip txvbqbp6p txvbqblyg txvbqbva1 txvbqb8y txvbqbt6y", n = "txvbqbnw7 txvbqbojg txvbqbp6y txvbqblyp txvbqb9ip txvbqbcp txvbqbdoy txvbqbao7 txvbqbva1", r = "txvbqb8y txvbqbva1", i = "txvbqb9ip txvbqbao7 txvbqbcp", a = "txvbqb9my txvbqbk5y txvbqb9ip txvbqbai7 txvbqbt6p", o = "txvbqbv9z txvbqbamg txvbqb97 txvbqbf4y", s = "txvbqbva1 txvbqb8y txvbqbf4y", c = "txvbqbva3 txvbqb8p txvbqbf4y txvbqbuxg";
+var e = "txvbqb9ip txvbqbai7 txvbqbaog", t = "txvbqbnvg txvbqboip txvbqbp6p txvbqblyg txvbqbva1 txvbqb8y txvbqbt6y", n = "txvbqbnw7 txvbqbojg txvbqbp6y txvbqblyp txvbqb9ip txvbqbcp txvbqbdoy txvbqbao7 txvbqbva1", r = "txvbqb8y txvbqbva1", i = "_10f5c550 txvbqb9ip txvbqbai7 txvbqbl7g txvbqb1rp txvbqb1cp txvbqb1qg txvbqbwp txvbqbv41", a = "_10f5c551 txvbqbnw7 txvbqbojg txvbqbps7 txvbqbmjy txvbqb6 txvbqb9i7 txvbqbu7g txvbqb12g txvbqbv41 txvbqbv9z txvbqbv txvbqbt6p txvbqb78 txvbqb6w txvbqb7k", o = "txvbqb9ip txvbqbao7 txvbqbcp txvbqbk5y", s = "txvbqb9my txvbqbk5y txvbqb9ip txvbqbai7 txvbqbt6p", c = "txvbqbv9z txvbqbamg txvbqb97 txvbqbf4y txvbqbl7g txvbqbt7g txvbqbuxg", l = "txvbqbva1 txvbqb8y txvbqbf4y txvbqbl7g txvbqbt7g txvbqbuxg", u = "txvbqbva3 txvbqb8p txvbqbf4y txvbqbuxg";
 //#endregion
-export { e as layout, r as loadingLabel, n as loadingState, i as row, c as rowMeta, s as rowSubtitle, a as rowText, o as rowTitle, t as searchRequiredMessage };
+export { e as layout, i as list, a as listItem, r as loadingLabel, n as loadingState, o as row, u as rowMeta, l as rowSubtitle, s as rowText, c as rowTitle, t as searchRequiredMessage };
 
 //# sourceMappingURL=entityIdPickerDialog.css.js.map

package/lib/esm/components/backoffice/pickers/entityIdPickerDialog.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"entityIdPickerDialog.css.js","names":[],"sources":["../../../../../src/components/backoffice/pickers/entityIdPickerDialog.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui';\n\nexport const layout = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const searchRequiredMessage = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'sm',\n  textAlign: 'center',\n  paddingY: 3,\n  paddingX: 0,\n});\n\nexport const loadingState = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: 2,\n  paddingY: 4,\n  paddingX: 3,\n  color: 'textSecondary',\n});\n\nexport const loadingLabel = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const row = sprinkles({\n  display: 'flex',\n  gap: 2,\n  alignItems: 'center',\n});\n\nexport const rowText = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  textAlign: 'left',\n});\n\nexport const rowTitle = sprinkles({\n  color: 'text',\n  fontWeight: 'medium',\n  fontSize: 'base',\n  lineHeight: 1.2,\n});\n\nexport const rowSubtitle = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'sm',\n  lineHeight: 1.2,\n});\n\nexport const rowMeta = sprinkles({\n  color: 'textMuted',\n  fontSize: 'xs',\n  lineHeight: 1.2,\n  whiteSpace: 'nowrap',\n});\n"],"mappings":""}
+{"version":3,"file":"entityIdPickerDialog.css.js","names":[],"sources":["../../../../../src/components/backoffice/pickers/entityIdPickerDialog.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles, vars } from '@plumile/ui';\n\nexport const layout = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const searchRequiredMessage = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'sm',\n  textAlign: 'center',\n  paddingY: 3,\n  paddingX: 0,\n});\n\nexport const loadingState = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: 2,\n  paddingY: 4,\n  paddingX: 3,\n  color: 'textSecondary',\n});\n\nexport const loadingLabel = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const list = style([\n  sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    borderRadius: 'lg',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n    backgroundColor: 'surface',\n  }),\n  {\n    selectors: {\n      '&:empty': {\n        display: 'none',\n      },\n    },\n  },\n]);\n\nexport const listItem = style([\n  sprinkles({\n    appearance: 'none',\n    display: 'block',\n    width: 'full',\n    paddingX: 3,\n    paddingY: 2.5,\n    borderWidth: 0,\n    backgroundColor: 'surface',\n    color: 'text',\n    cursor: 'pointer',\n    textAlign: 'left',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    minHeight: '3.25rem',\n    selectors: {\n      '& + &': {\n        borderTop: `1px solid ${vars.colors.borderSubtle}`,\n      },\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceMuted,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '-2px',\n      },\n    },\n  },\n]);\n\nexport const row = sprinkles({\n  display: 'flex',\n  gap: 2,\n  alignItems: 'center',\n  minWidth: 0,\n});\n\nexport const rowText = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  textAlign: 'left',\n});\n\nexport const rowTitle = sprinkles({\n  color: 'text',\n  fontWeight: 'medium',\n  fontSize: 'base',\n  lineHeight: 1.2,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nexport const rowSubtitle = sprinkles({\n  color: 'textSecondary',\n  fontSize: 'sm',\n  lineHeight: 1.2,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nexport const rowMeta = sprinkles({\n  color: 'textMuted',\n  fontSize: 'xs',\n  lineHeight: 1.2,\n  whiteSpace: 'nowrap',\n});\n"],"mappings":""}

package/lib/esm/components/backoffice/pickers/shared/EntityPickerList.js

@@ -1,27 +1,33 @@
 import { useBackofficeReactTranslation as e } from "../../../../i18n/useBackofficeReactTranslation.js";
-import { EntityPickerRowBase as t } from "./EntityPickerRowBase.js";
-import { BackofficeEmptyState as n, Button as r } from "@plumile/ui";
-import { jsx as i } from "react/jsx-runtime";
+import { list as t, listItem as n } from "../entityIdPickerDialog.css.js";
+import { EntityPickerRowBase as r } from "./EntityPickerRowBase.js";
+import { BackofficeEmptyState as i } from "@plumile/ui";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/components/backoffice/pickers/shared/EntityPickerList.tsx
-var a = ({ items: a, onSelectId: o, emptyState: s }) => {
-	let { t: c } = e();
-	return a.length === 0 ? s ?? /* @__PURE__ */ i(n, {
-		title: c("picker.empty.title"),
-		description: c("picker.empty.description")
-	}) : /* @__PURE__ */ i("div", { children: a.map((e) => /* @__PURE__ */ i(r, {
-		type: "button",
-		variant: "text",
-		onClick: () => {
-			o(e.id);
-		},
-		width: "full",
-		children: /* @__PURE__ */ i(t, {
-			title: e.title,
-			subtitle: e.subtitle
-		})
-	}, e.id)) });
+var o = ({ items: o, onSelectId: s, emptyState: c }) => {
+	let { t: l } = e();
+	return o.length === 0 ? c ?? /* @__PURE__ */ a(i, {
+		title: l("picker.empty.title"),
+		description: l("picker.empty.description")
+	}) : /* @__PURE__ */ a("div", {
+		className: t,
+		role: "listbox",
+		children: o.map((e) => /* @__PURE__ */ a("button", {
+			type: "button",
+			className: n,
+			role: "option",
+			"aria-selected": "false",
+			onClick: () => {
+				s(e.id);
+			},
+			children: /* @__PURE__ */ a(r, {
+				title: e.title,
+				subtitle: e.subtitle
+			})
+		}, e.id))
+	});
 };
 //#endregion
-export { a as EntityPickerList, a as default };
+export { o as EntityPickerList, o as default };
 
 //# sourceMappingURL=EntityPickerList.js.map

package/lib/esm/components/backoffice/pickers/shared/EntityPickerList.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityPickerList.js","names":[],"sources":["../../../../../../src/components/backoffice/pickers/shared/EntityPickerList.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { BackofficeEmptyState, Button } from '@plumile/ui';\n\nimport { useBackofficeReactTranslation } from '../../../../i18n/useBackofficeReactTranslation.js';\nimport { EntityPickerRowBase } from './EntityPickerRowBase.js';\nimport type { EntityPickerRowViewModel } from '../types.js';\n\nexport type EntityPickerListProps = {\n  items: readonly EntityPickerRowViewModel[];\n  onSelectId: (id: string) => void;\n  emptyState?: JSX.Element;\n};\n\nexport const EntityPickerList = ({\n  items,\n  onSelectId,\n  emptyState,\n}: EntityPickerListProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (items.length === 0) {\n    return (\n      emptyState ?? (\n        <BackofficeEmptyState\n          title={t('picker.empty.title')}\n          description={t('picker.empty.description')}\n        />\n      )\n    );\n  }\n\n  return (\n    <div>\n      {items.map((item) => {\n        return (\n          <Button\n            key={item.id}\n            type=\"button\"\n            variant=\"text\"\n            onClick={() => {\n              onSelectId(item.id);\n            }}\n            width=\"full\"\n          >\n            <EntityPickerRowBase title={item.title} subtitle={item.subtitle} />\n          </Button>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default EntityPickerList;\n"],"mappings":";;;;;AAcA,IAAa,KAAoB,EAC/B,UACA,eACA,oBACwC;CACxC,IAAM,EAAE,SAAM,GAA+B;CAa7C,OAXI,EAAM,WAAW,IAEjB,KACE,kBAAC,GAAD;EACE,OAAO,EAAE,qBAAqB;EAC9B,aAAa,EAAE,2BAA2B;EAC1C,CAAA,GAMN,kBAAC,OAAD,EAAA,UACG,EAAM,KAAK,MAER,kBAAC,GAAD;EAEE,MAAK;EACL,SAAQ;EACR,eAAe;GACb,EAAW,EAAK,GAAG;;EAErB,OAAM;YAEN,kBAAC,GAAD;GAAqB,OAAO,EAAK;GAAO,UAAU,EAAK;GAAY,CAAA;EAC5D,EATF,EAAK,GASH,CAEX,EACE,CAAA"}
+{"version":3,"file":"EntityPickerList.js","names":[],"sources":["../../../../../../src/components/backoffice/pickers/shared/EntityPickerList.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { BackofficeEmptyState } from '@plumile/ui';\n\nimport { useBackofficeReactTranslation } from '../../../../i18n/useBackofficeReactTranslation.js';\nimport { EntityPickerRowBase } from './EntityPickerRowBase.js';\nimport type { EntityPickerRowViewModel } from '../types.js';\nimport * as styles from '../entityIdPickerDialog.css.js';\n\nexport type EntityPickerListProps = {\n  items: readonly EntityPickerRowViewModel[];\n  onSelectId: (id: string) => void;\n  emptyState?: JSX.Element;\n};\n\nexport const EntityPickerList = ({\n  items,\n  onSelectId,\n  emptyState,\n}: EntityPickerListProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n\n  if (items.length === 0) {\n    return (\n      emptyState ?? (\n        <BackofficeEmptyState\n          title={t('picker.empty.title')}\n          description={t('picker.empty.description')}\n        />\n      )\n    );\n  }\n\n  return (\n    <div className={styles.list} role=\"listbox\">\n      {items.map((item) => {\n        return (\n          <button\n            key={item.id}\n            type=\"button\"\n            className={styles.listItem}\n            role=\"option\"\n            aria-selected=\"false\"\n            onClick={() => {\n              onSelectId(item.id);\n            }}\n          >\n            <EntityPickerRowBase title={item.title} subtitle={item.subtitle} />\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default EntityPickerList;\n"],"mappings":";;;;;;AAeA,IAAa,KAAoB,EAC/B,UACA,eACA,oBACwC;CACxC,IAAM,EAAE,SAAM,GAA+B;CAa7C,OAXI,EAAM,WAAW,IAEjB,KACE,kBAAC,GAAD;EACE,OAAO,EAAE,qBAAqB;EAC9B,aAAa,EAAE,2BAA2B;EAC1C,CAAA,GAMN,kBAAC,OAAD;EAAK,WAAW;EAAa,MAAK;YAC/B,EAAM,KAAK,MAER,kBAAC,UAAD;GAEE,MAAK;GACL,WAAW;GACX,MAAK;GACL,iBAAc;GACd,eAAe;IACb,EAAW,EAAK,GAAG;;aAGrB,kBAAC,GAAD;IAAqB,OAAO,EAAK;IAAO,UAAU,EAAK;IAAY,CAAA;GAC5D,EAVF,EAAK,GAUH,CAEX;EACE,CAAA"}

package/lib/esm/components/backoffice/refs/BackofficeEntityIdRef.js

@@ -1,35 +1,35 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
-import { useBackofficeConfig as t } from "../../../provider/BackofficeConfigContext.js";
-import { BackofficeFilterAction as n } from "../filters/BackofficeFilterAction.js";
-import { BackofficeFilterableCell as r } from "../shared/BackofficeFilterableCell.js";
-import { jsx as i } from "react/jsx-runtime";
+import { BackofficeFilterAction as t } from "../filters/BackofficeFilterAction.js";
+import { BackofficeFilterableCell as n } from "../shared/BackofficeFilterableCell.js";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/components/backoffice/refs/BackofficeEntityIdRef.tsx
-var a = ({ id: a, entity: o, filterWhereKey: s, filterPath: c, filterLabel: l, listConfig: u }) => {
-	let { entities: d } = t(), { t: f } = e(), p = "";
-	if (typeof a == "string" && (p = a.trim()), p === "") return /* @__PURE__ */ i("span", { children: "-" });
-	let m = null;
-	if (o != null) {
-		let e = d[o];
-		e != null && (m = e.routes.detail(p));
-	}
-	let h = f("filters.placeholders.unresolved"), g;
-	m != null && (g = h);
-	let _ = null;
-	return s != null && (_ = /* @__PURE__ */ i(n, {
-		whereKey: s,
-		value: p,
-		path: c,
-		label: l,
-		listConfig: u
-	})), /* @__PURE__ */ i(r, {
-		filterAction: _,
-		href: m,
-		title: g,
+var i = ({ id: i, entity: a, filterWhereKey: o, filterPath: s, filterLabel: c, listConfig: l }) => {
+	let { t: u } = e(), d = "";
+	if (typeof i == "string" && (d = i.trim()), d === "") return /* @__PURE__ */ r("span", { children: "-" });
+	let f;
+	a != null && (f = {
+		kind: "entity-detail",
+		entityId: a,
+		id: d
+	});
+	let p = u("filters.placeholders.unresolved"), m;
+	f != null && (m = p);
+	let h = null;
+	return o != null && (h = /* @__PURE__ */ r(t, {
+		whereKey: o,
+		value: d,
+		path: s,
+		label: c,
+		listConfig: l
+	})), /* @__PURE__ */ r(n, {
+		filterAction: h,
+		target: f,
+		title: m,
 		openInNewTab: !0,
-		children: h
+		children: p
 	});
 };
 //#endregion
-export { a as BackofficeEntityIdRef, a as default };
+export { i as BackofficeEntityIdRef, i as default };
 
 //# sourceMappingURL=BackofficeEntityIdRef.js.map

package/lib/esm/components/backoffice/refs/BackofficeEntityIdRef.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeEntityIdRef.js","names":[],"sources":["../../../../../src/components/backoffice/refs/BackofficeEntityIdRef.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport type { BackofficeRuntimeResolvedListFacetConfig } from '@plumile/backoffice-core/types.js';\nimport { useBackofficeConfig } from '../../../provider/BackofficeConfigContext.js';\nimport { BackofficeFilterAction } from '../filters/BackofficeFilterAction.js';\nimport { BackofficeFilterableCell } from '../shared/BackofficeFilterableCell.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nexport type BackofficeEntityIdRefProps = {\n  id: string | null | undefined;\n  entity?: string;\n  filterWhereKey?: string;\n  filterPath?: readonly string[];\n  filterLabel?: string;\n  listConfig?: BackofficeRuntimeResolvedListFacetConfig;\n};\n\nexport const BackofficeEntityIdRef = ({\n  id,\n  entity,\n  filterWhereKey,\n  filterPath,\n  filterLabel,\n  listConfig,\n}: BackofficeEntityIdRefProps): JSX.Element => {\n  const { entities } = useBackofficeConfig();\n  const { t } = useBackofficeReactTranslation();\n  let resolvedId = '';\n  if (typeof id === 'string') {\n    resolvedId = id.trim();\n  }\n  if (resolvedId === '') {\n    return <span>-</span>;\n  }\n\n  let detailTo: string | null = null;\n  if (entity != null) {\n    const config = entities[entity];\n    if (config != null) {\n      detailTo = config.routes.detail(resolvedId);\n    }\n  }\n\n  const unresolvedLabel = t('filters.placeholders.unresolved');\n  let title: string | undefined;\n  if (detailTo != null) {\n    title = unresolvedLabel;\n  }\n  let filterAction: JSX.Element | null = null;\n  if (filterWhereKey != null) {\n    filterAction = (\n      <BackofficeFilterAction\n        whereKey={filterWhereKey}\n        value={resolvedId}\n        path={filterPath}\n        label={filterLabel}\n        listConfig={listConfig}\n      />\n    );\n  }\n\n  return (\n    <BackofficeFilterableCell\n      filterAction={filterAction}\n      href={detailTo}\n      title={title}\n      openInNewTab\n    >\n      {unresolvedLabel}\n    </BackofficeFilterableCell>\n  );\n};\n\nexport default BackofficeEntityIdRef;\n"],"mappings":";;;;;;AAgBA,IAAa,KAAyB,EACpC,OACA,WACA,mBACA,eACA,gBACA,oBAC6C;CAC7C,IAAM,EAAE,gBAAa,GAAqB,EACpC,EAAE,SAAM,GAA+B,EACzC,IAAa;CAIjB,IAHI,OAAO,KAAO,aAChB,IAAa,EAAG,MAAM,GAEpB,MAAe,IACjB,OAAO,kBAAC,QAAD,EAAA,UAAM,KAAQ,CAAA;CAGvB,IAAI,IAA0B;CAC9B,IAAI,KAAU,MAAM;EAClB,IAAM,IAAS,EAAS;EACxB,AAAI,KAAU,SACZ,IAAW,EAAO,OAAO,OAAO,EAAW;;CAI/C,IAAM,IAAkB,EAAE,kCAAkC,EACxD;CACJ,AAAI,KAAY,SACd,IAAQ;CAEV,IAAI,IAAmC;CAavC,OAZI,KAAkB,SACpB,IACE,kBAAC,GAAD;EACE,UAAU;EACV,OAAO;EACP,MAAM;EACN,OAAO;EACK;EACZ,CAAA,GAKJ,kBAAC,GAAD;EACgB;EACd,MAAM;EACC;EACP,cAAA;YAEC;EACwB,CAAA"}
+{"version":3,"file":"BackofficeEntityIdRef.js","names":[],"sources":["../../../../../src/components/backoffice/refs/BackofficeEntityIdRef.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport type { BackofficeRuntimeResolvedListFacetConfig } from '@plumile/backoffice-core/types.js';\nimport { BackofficeFilterAction } from '../filters/BackofficeFilterAction.js';\nimport { BackofficeFilterableCell } from '../shared/BackofficeFilterableCell.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport type { BackofficeLinkTarget } from '../links/types.js';\n\nexport type BackofficeEntityIdRefProps = {\n  id: string | null | undefined;\n  entity?: string;\n  filterWhereKey?: string;\n  filterPath?: readonly string[];\n  filterLabel?: string;\n  listConfig?: BackofficeRuntimeResolvedListFacetConfig;\n};\n\nexport const BackofficeEntityIdRef = ({\n  id,\n  entity,\n  filterWhereKey,\n  filterPath,\n  filterLabel,\n  listConfig,\n}: BackofficeEntityIdRefProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  let resolvedId = '';\n  if (typeof id === 'string') {\n    resolvedId = id.trim();\n  }\n  if (resolvedId === '') {\n    return <span>-</span>;\n  }\n\n  let target: BackofficeLinkTarget | undefined;\n  if (entity != null) {\n    target = {\n      kind: 'entity-detail',\n      entityId: entity,\n      id: resolvedId,\n    };\n  }\n\n  const unresolvedLabel = t('filters.placeholders.unresolved');\n  let title: string | undefined;\n  if (target != null) {\n    title = unresolvedLabel;\n  }\n  let filterAction: JSX.Element | null = null;\n  if (filterWhereKey != null) {\n    filterAction = (\n      <BackofficeFilterAction\n        whereKey={filterWhereKey}\n        value={resolvedId}\n        path={filterPath}\n        label={filterLabel}\n        listConfig={listConfig}\n      />\n    );\n  }\n\n  return (\n    <BackofficeFilterableCell\n      filterAction={filterAction}\n      target={target}\n      title={title}\n      openInNewTab\n    >\n      {unresolvedLabel}\n    </BackofficeFilterableCell>\n  );\n};\n\nexport default BackofficeEntityIdRef;\n"],"mappings":";;;;;AAgBA,IAAa,KAAyB,EACpC,OACA,WACA,mBACA,eACA,gBACA,oBAC6C;CAC7C,IAAM,EAAE,SAAM,GAA+B,EACzC,IAAa;CAIjB,IAHI,OAAO,KAAO,aAChB,IAAa,EAAG,MAAM,GAEpB,MAAe,IACjB,OAAO,kBAAC,QAAD,EAAA,UAAM,KAAQ,CAAA;CAGvB,IAAI;CACJ,AAAI,KAAU,SACZ,IAAS;EACP,MAAM;EACN,UAAU;EACV,IAAI;EACL;CAGH,IAAM,IAAkB,EAAE,kCAAkC,EACxD;CACJ,AAAI,KAAU,SACZ,IAAQ;CAEV,IAAI,IAAmC;CAavC,OAZI,KAAkB,SACpB,IACE,kBAAC,GAAD;EACE,UAAU;EACV,OAAO;EACP,MAAM;EACN,OAAO;EACK;EACZ,CAAA,GAKJ,kBAAC,GAAD;EACgB;EACN;EACD;EACP,cAAA;YAEC;EACwB,CAAA"}

package/lib/esm/components/backoffice/refs/BackofficeEntityLink.js

@@ -1,30 +1,33 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
-import { useBackofficeConfig as t } from "../../../provider/BackofficeConfigContext.js";
-import { BackofficeFilterAction as n } from "../filters/BackofficeFilterAction.js";
-import { BackofficeFilterableCell as r } from "../shared/BackofficeFilterableCell.js";
-import { jsx as i } from "react/jsx-runtime";
+import { BackofficeFilterAction as t } from "../filters/BackofficeFilterAction.js";
+import { BackofficeFilterableCell as n } from "../shared/BackofficeFilterableCell.js";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/components/backoffice/refs/BackofficeEntityLink.tsx
-var a = ({ id: a, label: o, entity: s, filterWhereKey: c, filterValue: l, filterPath: u, filterLabel: d, listConfig: f }) => {
-	let { t: p } = e(), { entities: m } = t(), h = "";
-	if (typeof a == "string" && (h = a.trim()), h === "") return /* @__PURE__ */ i("span", { children: p("common.notAvailable") });
-	let g = null;
-	c != null && (g = /* @__PURE__ */ i(n, {
-		whereKey: c,
-		value: l ?? h,
-		path: u,
-		label: d,
-		listConfig: f
+var i = ({ id: i, label: a, entity: o, filterWhereKey: s, filterValue: c, filterPath: l, filterLabel: u, listConfig: d }) => {
+	let { t: f } = e(), p = "";
+	if (typeof i == "string" && (p = i.trim()), p === "") return /* @__PURE__ */ r("span", { children: f("common.notAvailable") });
+	let m = null;
+	s != null && (m = /* @__PURE__ */ r(t, {
+		whereKey: s,
+		value: c ?? p,
+		path: l,
+		label: u,
+		listConfig: d
 	}));
-	let _ = m[s]?.routes.detail(h) ?? null, v = o ?? "";
-	return v.trim() === "" && (v = p(_ == null ? "common.notAvailable" : "actions.view")), /* @__PURE__ */ i(r, {
-		filterAction: g,
-		href: _,
-		title: v,
+	let h = {
+		kind: "entity-detail",
+		entityId: o,
+		id: p
+	}, g = a ?? "";
+	return g.trim() === "" && (g = f("actions.view")), /* @__PURE__ */ r(n, {
+		filterAction: m,
+		target: h,
+		title: g,
 		openInNewTab: !0,
-		children: v
+		children: g
 	});
 };
 //#endregion
-export { a as BackofficeEntityLink, a as default };
+export { i as BackofficeEntityLink, i as default };
 
 //# sourceMappingURL=BackofficeEntityLink.js.map

package/lib/esm/components/backoffice/refs/BackofficeEntityLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeEntityLink.js","names":[],"sources":["../../../../../src/components/backoffice/refs/BackofficeEntityLink.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport type { BackofficeRuntimeResolvedListFacetConfig } from '@plumile/backoffice-core/types.js';\n\nimport { useBackofficeConfig } from '../../../provider/BackofficeConfigContext.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { BackofficeFilterAction } from '../filters/BackofficeFilterAction.js';\nimport { BackofficeFilterableCell } from '../shared/BackofficeFilterableCell.js';\n\nexport type BackofficeEntityLinkProps = {\n  id: string | null | undefined;\n  label?: string | null | undefined;\n  entity: string;\n  filterWhereKey?: string;\n  filterValue?: string;\n  filterPath?: readonly string[];\n  filterLabel?: string;\n  listConfig?: BackofficeRuntimeResolvedListFacetConfig;\n};\n\nexport const BackofficeEntityLink = ({\n  id,\n  label,\n  entity,\n  filterWhereKey,\n  filterValue,\n  filterPath,\n  filterLabel,\n  listConfig,\n}: BackofficeEntityLinkProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const { entities } = useBackofficeConfig();\n  let resolvedId = '';\n  if (typeof id === 'string') {\n    resolvedId = id.trim();\n  }\n  if (resolvedId === '') {\n    return <span>{t('common.notAvailable')}</span>;\n  }\n\n  let filterAction: JSX.Element | null = null;\n  if (filterWhereKey != null) {\n    const resolvedFilterValue = filterValue ?? resolvedId;\n    filterAction = (\n      <BackofficeFilterAction\n        whereKey={filterWhereKey}\n        value={resolvedFilterValue}\n        path={filterPath}\n        label={filterLabel}\n        listConfig={listConfig}\n      />\n    );\n  }\n\n  const config = entities[entity];\n  const detailTo = config?.routes.detail(resolvedId) ?? null;\n  let resolvedLabel = label ?? '';\n  if (resolvedLabel.trim() === '') {\n    if (detailTo != null) {\n      resolvedLabel = t('actions.view');\n    } else {\n      resolvedLabel = t('common.notAvailable');\n    }\n  }\n\n  return (\n    <BackofficeFilterableCell\n      filterAction={filterAction}\n      href={detailTo}\n      title={resolvedLabel}\n      openInNewTab\n    >\n      {resolvedLabel}\n    </BackofficeFilterableCell>\n  );\n};\n\nexport default BackofficeEntityLink;\n"],"mappings":";;;;;;AAoBA,IAAa,KAAwB,EACnC,OACA,UACA,WACA,mBACA,gBACA,eACA,gBACA,oBAC4C;CAC5C,IAAM,EAAE,SAAM,GAA+B,EACvC,EAAE,gBAAa,GAAqB,EACtC,IAAa;CAIjB,IAHI,OAAO,KAAO,aAChB,IAAa,EAAG,MAAM,GAEpB,MAAe,IACjB,OAAO,kBAAC,QAAD,EAAA,UAAO,EAAE,sBAAsB,EAAQ,CAAA;CAGhD,IAAI,IAAmC;CACvC,AAAI,KAAkB,SAEpB,IACE,kBAAC,GAAD;EACE,UAAU;EACV,OAJwB,KAAe;EAKvC,MAAM;EACN,OAAO;EACK;EACZ,CAAA;CAKN,IAAM,IADS,EAAS,IACC,OAAO,OAAO,EAAW,IAAI,MAClD,IAAgB,KAAS;CAS7B,OARI,EAAc,MAAM,KAAK,OAC3B,AACE,IAEgB,EAHd,KAAY,OAGI,wBAFA,eAEsB,GAK1C,kBAAC,GAAD;EACgB;EACd,MAAM;EACN,OAAO;EACP,cAAA;YAEC;EACwB,CAAA"}
+{"version":3,"file":"BackofficeEntityLink.js","names":[],"sources":["../../../../../src/components/backoffice/refs/BackofficeEntityLink.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport type { BackofficeRuntimeResolvedListFacetConfig } from '@plumile/backoffice-core/types.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport type { BackofficeLinkTarget } from '../links/types.js';\nimport { BackofficeFilterAction } from '../filters/BackofficeFilterAction.js';\nimport { BackofficeFilterableCell } from '../shared/BackofficeFilterableCell.js';\n\nexport type BackofficeEntityLinkProps = {\n  id: string | null | undefined;\n  label?: string | null | undefined;\n  entity: string;\n  filterWhereKey?: string;\n  filterValue?: string;\n  filterPath?: readonly string[];\n  filterLabel?: string;\n  listConfig?: BackofficeRuntimeResolvedListFacetConfig;\n};\n\nexport const BackofficeEntityLink = ({\n  id,\n  label,\n  entity,\n  filterWhereKey,\n  filterValue,\n  filterPath,\n  filterLabel,\n  listConfig,\n}: BackofficeEntityLinkProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  let resolvedId = '';\n  if (typeof id === 'string') {\n    resolvedId = id.trim();\n  }\n  if (resolvedId === '') {\n    return <span>{t('common.notAvailable')}</span>;\n  }\n\n  let filterAction: JSX.Element | null = null;\n  if (filterWhereKey != null) {\n    const resolvedFilterValue = filterValue ?? resolvedId;\n    filterAction = (\n      <BackofficeFilterAction\n        whereKey={filterWhereKey}\n        value={resolvedFilterValue}\n        path={filterPath}\n        label={filterLabel}\n        listConfig={listConfig}\n      />\n    );\n  }\n\n  const target = {\n    kind: 'entity-detail',\n    entityId: entity,\n    id: resolvedId,\n  } as BackofficeLinkTarget;\n  let resolvedLabel = label ?? '';\n  if (resolvedLabel.trim() === '') {\n    resolvedLabel = t('actions.view');\n  }\n\n  return (\n    <BackofficeFilterableCell\n      filterAction={filterAction}\n      target={target}\n      title={resolvedLabel}\n      openInNewTab\n    >\n      {resolvedLabel}\n    </BackofficeFilterableCell>\n  );\n};\n\nexport default BackofficeEntityLink;\n"],"mappings":";;;;;AAmBA,IAAa,KAAwB,EACnC,OACA,UACA,WACA,mBACA,gBACA,eACA,gBACA,oBAC4C;CAC5C,IAAM,EAAE,SAAM,GAA+B,EACzC,IAAa;CAIjB,IAHI,OAAO,KAAO,aAChB,IAAa,EAAG,MAAM,GAEpB,MAAe,IACjB,OAAO,kBAAC,QAAD,EAAA,UAAO,EAAE,sBAAsB,EAAQ,CAAA;CAGhD,IAAI,IAAmC;CACvC,AAAI,KAAkB,SAEpB,IACE,kBAAC,GAAD;EACE,UAAU;EACV,OAJwB,KAAe;EAKvC,MAAM;EACN,OAAO;EACK;EACZ,CAAA;CAIN,IAAM,IAAS;EACb,MAAM;EACN,UAAU;EACV,IAAI;EACL,EACG,IAAgB,KAAS;CAK7B,OAJI,EAAc,MAAM,KAAK,OAC3B,IAAgB,EAAE,eAAe,GAIjC,kBAAC,GAAD;EACgB;EACN;EACR,OAAO;EACP,cAAA;YAEC;EACwB,CAAA"}