@plumile/backoffice-react 0.1.107 → 0.1.109

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

@@ -1 +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"}
+{"version":3,"file":"BackofficeDetailRelationLink.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailRelationLink.tsx"],"sourcesContent":["import { useContext, type JSX, type MouseEvent } from 'react';\nimport { RoutingContext } from '@plumile/router';\n\nimport { buildBackofficeListLink } 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';\nimport { BackofficeInlineLink } from '../links/BackofficeInlineLink.js';\nimport type { BackofficeLinkTarget } from '../links/types.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 targetManifest = entities[target];\n  if (targetManifest == 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  const linkTarget = {\n    kind: 'entity-list',\n    entityId: target,\n    state: {\n      where,\n      filters: [\n        {\n          id: resolvedFilterId,\n          value,\n        },\n      ],\n    },\n  } as BackofficeLinkTarget;\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    <BackofficeInlineLink\n      target={linkTarget}\n      className={styles.link}\n      onClick={handleClick}\n      endAdornment={\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      }\n    >\n      <span className={styles.label}>{labelText}</span>\n    </BackofficeInlineLink>\n  );\n};\n\nexport default BackofficeDetailRelationLink;\n"],"mappings":";;;;;;;;;;AAqBA,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;CAE7C,IADuB,EAAS,MACV,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;CAI3C,IAAM,IAAa;EACjB,MAAM;EACN,UAAU;EACV,OAAO;GACL;GACA,SAAS,CACP;IACE,IATiB,KAAY;IAU7B;IACD,CACF;GACF;EACF,EAEK,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;EACE,QAAQ;EACR,WAAW;EACX,SAAS;EACT,cACE,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;;YAGT,kBAAC,QAAD;GAAM,WAAW;aAAe;GAAiB,CAAA;EAC5B,CAAA"}

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

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

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

@@ -1 +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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"}
+{"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 { 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  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  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    });\n  }, [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 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      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/BackofficeDetailTable.js

@@ -0,0 +1,8 @@
+import { DataTable as e } from "@plumile/ui";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/backoffice/detail/BackofficeDetailTable.tsx
+var n = (n) => /* @__PURE__ */ t(e, { ...n });
+//#endregion
+export { n as BackofficeDetailTable, n as default };
+
+//# sourceMappingURL=BackofficeDetailTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeDetailTable.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeDetailTable.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { DataTable, type DataTableProps } from '@plumile/ui';\n\nexport type BackofficeDetailTableProps<Row> = DataTableProps<Row>;\n\nexport const BackofficeDetailTable = <Row,>(\n  props: BackofficeDetailTableProps<Row>,\n): JSX.Element => {\n  return <DataTable {...props} />;\n};\n\nexport default BackofficeDetailTable;\n"],"mappings":";;;AAKA,IAAa,KACX,MAEO,kBAAC,GAAD,EAAW,GAAI,GAAS,CAAA"}

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

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/backoffice/detail/BackofficeEmptyValue.tsx
+var t = ({ label: t }) => /* @__PURE__ */ e("span", { children: t });
+//#endregion
+export { t as BackofficeEmptyValue, t as default };
+
+//# sourceMappingURL=BackofficeEmptyValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeEmptyValue.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeEmptyValue.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nexport type BackofficeEmptyValueProps = {\n  readonly label: string;\n};\n\nexport const BackofficeEmptyValue = ({\n  label,\n}: BackofficeEmptyValueProps): JSX.Element => {\n  return <span>{label}</span>;\n};\n\nexport default BackofficeEmptyValue;\n"],"mappings":";;AAMA,IAAa,KAAwB,EACnC,eAEO,kBAAC,QAAD,EAAA,UAAO,GAAa,CAAA"}

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

@@ -0,0 +1,8 @@
+import { BackofficeStatusMetaBadge as e } from "./BackofficeStatusMetaBadge.js";
+import { Fragment as t, jsx as n } from "react/jsx-runtime";
+//#region src/components/backoffice/detail/BackofficeStatusGroup.tsx
+var r = ({ statuses: r }) => /* @__PURE__ */ n(t, { children: r.map((t) => /* @__PURE__ */ n(e, { status: t }, t.label)) });
+//#endregion
+export { r as BackofficeStatusGroup, r as default };
+
+//# sourceMappingURL=BackofficeStatusGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeStatusGroup.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeStatusGroup.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport {\n  BackofficeStatusMetaBadge,\n  type BackofficeStatusMeta,\n} from './BackofficeStatusMetaBadge.js';\n\nexport type BackofficeStatusGroupProps = {\n  readonly statuses: readonly BackofficeStatusMeta[];\n};\n\nexport const BackofficeStatusGroup = ({\n  statuses,\n}: BackofficeStatusGroupProps): JSX.Element => {\n  return (\n    <>\n      {statuses.map((status) => {\n        return <BackofficeStatusMetaBadge key={status.label} status={status} />;\n      })}\n    </>\n  );\n};\n\nexport default BackofficeStatusGroup;\n"],"mappings":";;;AAWA,IAAa,KAAyB,EACpC,kBAGE,kBAAA,GAAA,EAAA,UACG,EAAS,KAAK,MACN,kBAAC,GAAD,EAAsD,WAAU,EAAhC,EAAO,MAAyB,CACvE,EACD,CAAA"}

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

@@ -0,0 +1,2 @@
+import { BackofficeDetailSection as e } from "./BackofficeDetailSection.js";
+export { e as BackofficeTechnicalFacts };

package/lib/esm/components/backoffice/filters/EntityFilterValue.js

@@ -13,17 +13,25 @@ var { useLazyLoadQuery: o } = a, s = (e) => {
 	return n === "" ? null : n;
 }, c = ({ valueConfig: e, id: t, children: n }) => {
 	let r = o(e.query, { id: t }), i = e.resolveRow(r), a = null;
-	return i != null && (a = e.toRow(i)), n(s(a));
+	i != null && (a = e.toRow(i));
+	let c = s(a), l = "resolved";
+	return c ?? (l = "unresolved"), n(c, { status: l });
 }, l = ({ entityId: e, id: a, children: o }) => {
-	let s = n(e, { enabled: a.trim() !== "" }), l = null;
-	s.status === "loaded" && (l = s.module.config.picker.value ?? null);
-	let u = o(null);
-	return l == null ? u : /* @__PURE__ */ i(t, {
-		fallback: () => u,
+	let s = a.trim(), l = n(e, { enabled: s !== "" });
+	if (s === "") return o(null, { status: "unavailable" });
+	let u = null;
+	l.status === "loaded" && (u = l.module.config.picker.value ?? null);
+	let d = o(null, { status: "loading" });
+	if (l.status === "loading") return d;
+	let f = "unavailable";
+	l.status === "error" && (f = "error");
+	let p = o(null, { status: f });
+	return u == null ? p : /* @__PURE__ */ i(t, {
+		fallback: () => o(null, { status: "error" }),
 		children: /* @__PURE__ */ i(r, {
-			fallback: u,
+			fallback: d,
 			children: /* @__PURE__ */ i(c, {
-				valueConfig: l,
+				valueConfig: u,
 				id: a,
 				children: o
 			})

package/lib/esm/components/backoffice/filters/EntityFilterValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityFilterValue.js","names":[],"sources":["../../../../../src/components/backoffice/filters/EntityFilterValue.tsx"],"sourcesContent":["import { Suspense, type JSX } from 'react';\nimport * as ReactRelay from 'react-relay';\nimport type { OperationType } from 'relay-runtime';\n\nimport type { BackofficePickerValueConfig } from '@plumile/backoffice-core/types.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficePickerEntityLoader } from '../../../provider/useBackofficeEntityLoader.js';\nimport { BackofficeErrorBoundary } from '../errors/BackofficeErrorBoundary.js';\n\nconst { useLazyLoadQuery } = ReactRelay;\n\ntype EntityFilterValueContentProps<RowRef, RowView> = {\n  valueConfig: BackofficePickerValueConfig<RowRef, RowView>;\n  id: string;\n  children: (label: string | null) => JSX.Element;\n};\n\nconst resolveTitle = (value: unknown): string | null => {\n  if (value == null || typeof value !== 'object') {\n    return null;\n  }\n  const { title } = value as { title?: unknown };\n  if (typeof title !== 'string') {\n    return null;\n  }\n  const trimmed = title.trim();\n  if (trimmed === '') {\n    return null;\n  }\n  return trimmed;\n};\n\nconst EntityFilterValueContent = <RowRef, RowView>({\n  valueConfig,\n  id,\n  children,\n}: EntityFilterValueContentProps<RowRef, RowView>): JSX.Element => {\n  const data = useLazyLoadQuery<OperationType>(valueConfig.query, { id });\n  const rowRef = valueConfig.resolveRow(data);\n  let row: RowView | null = null;\n  if (rowRef != null) {\n    row = valueConfig.toRow(rowRef);\n  }\n  const title = resolveTitle(row);\n\n  return children(title);\n};\n\nexport type EntityFilterValueTextProps = {\n  entityId: string;\n  id: string;\n  children: (label: string | null) => JSX.Element;\n};\n\nexport const EntityFilterValueText = ({\n  entityId,\n  id,\n  children,\n}: EntityFilterValueTextProps): JSX.Element => {\n  const resolvedId = id.trim();\n  const pickerEntityState = useBackofficePickerEntityLoader(entityId, {\n    enabled: resolvedId !== '',\n  });\n  let valueConfig: BackofficePickerValueConfig<unknown, unknown> | null = null;\n  if (pickerEntityState.status === 'loaded') {\n    valueConfig = pickerEntityState.module.config.picker.value ?? null;\n  }\n\n  const fallback = children(null);\n  if (valueConfig == null) {\n    return fallback;\n  }\n\n  return (\n    <BackofficeErrorBoundary\n      fallback={() => {\n        return fallback;\n      }}\n    >\n      <Suspense fallback={fallback}>\n        <EntityFilterValueContent valueConfig={valueConfig} id={id}>\n          {children}\n        </EntityFilterValueContent>\n      </Suspense>\n    </BackofficeErrorBoundary>\n  );\n};\n\nexport type EntityFilterValueProps = {\n  entityId: string;\n  id: string;\n};\n\nexport const EntityFilterValue = ({\n  entityId,\n  id,\n}: EntityFilterValueProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const resolvedId = id.trim();\n\n  return (\n    <EntityFilterValueText entityId={entityId} id={id}>\n      {(label) => {\n        let fallbackLabel = resolvedId;\n        if (resolvedId === '') {\n          fallbackLabel = t('filters.placeholders.unresolved');\n        }\n        return <span>{label ?? fallbackLabel}</span>;\n      }}\n    </EntityFilterValueText>\n  );\n};\n\nexport default EntityFilterValue;\n"],"mappings":";;;;;;;AAUA,IAAM,EAAE,kBAAA,MAAqB,GAQvB,KAAgB,MAAkC;CACtD,IAAqB,OAAO,KAAU,aAAlC,GACF,OAAO;CAET,IAAM,EAAE,aAAU;CAClB,IAAI,OAAO,KAAU,UACnB,OAAO;CAET,IAAM,IAAU,EAAM,MAAM;CAI5B,OAHI,MAAY,KACP,OAEF;GAGH,KAA6C,EACjD,gBACA,OACA,kBACiE;CACjE,IAAM,IAAO,EAAgC,EAAY,OAAO,EAAE,OAAI,CAAC,EACjE,IAAS,EAAY,WAAW,EAAK,EACvC,IAAsB;CAM1B,OALI,KAAU,SACZ,IAAM,EAAY,MAAM,EAAO,GAI1B,EAFO,EAAa,EAEX,CAAM;GASX,KAAyB,EACpC,aACA,OACA,kBAC6C;CAE7C,IAAM,IAAoB,EAAgC,GAAU,EAClE,SAFiB,EAAG,MAEX,KAAe,IACzB,CAAC,EACE,IAAoE;CACxE,AAAI,EAAkB,WAAW,aAC/B,IAAc,EAAkB,OAAO,OAAO,OAAO,SAAS;CAGhE,IAAM,IAAW,EAAS,KAAK;CAK/B,OAJI,KAAe,OACV,IAIP,kBAAC,GAAD;EACE,gBACS;YAGT,kBAAC,GAAD;GAAoB;aAClB,kBAAC,GAAD;IAAuC;IAAiB;IACrD;IACwB,CAAA;GAClB,CAAA;EACa,CAAA;GASjB,KAAqB,EAChC,aACA,YACyC;CACzC,IAAM,EAAE,SAAM,GAA+B,EACvC,IAAa,EAAG,MAAM;CAE5B,OACE,kBAAC,GAAD;EAAiC;EAAc;aAC3C,MAAU;GACV,IAAI,IAAgB;GAIpB,OAHI,MAAe,OACjB,IAAgB,EAAE,kCAAkC,GAE/C,kBAAC,QAAD,EAAA,UAAO,KAAS,GAAqB,CAAA;;EAExB,CAAA"}
+{"version":3,"file":"EntityFilterValue.js","names":[],"sources":["../../../../../src/components/backoffice/filters/EntityFilterValue.tsx"],"sourcesContent":["import { Suspense, type JSX } from 'react';\nimport * as ReactRelay from 'react-relay';\nimport type { OperationType } from 'relay-runtime';\n\nimport type { BackofficePickerValueConfig } from '@plumile/backoffice-core/types.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficePickerEntityLoader } from '../../../provider/useBackofficeEntityLoader.js';\nimport { BackofficeErrorBoundary } from '../errors/BackofficeErrorBoundary.js';\n\nconst { useLazyLoadQuery } = ReactRelay;\n\ntype EntityFilterValueContentProps<RowRef, RowView> = {\n  valueConfig: BackofficePickerValueConfig<RowRef, RowView>;\n  id: string;\n  children: EntityFilterValueTextChildren;\n};\n\nconst resolveTitle = (value: unknown): string | null => {\n  if (value == null || typeof value !== 'object') {\n    return null;\n  }\n  const { title } = value as { title?: unknown };\n  if (typeof title !== 'string') {\n    return null;\n  }\n  const trimmed = title.trim();\n  if (trimmed === '') {\n    return null;\n  }\n  return trimmed;\n};\n\nconst EntityFilterValueContent = <RowRef, RowView>({\n  valueConfig,\n  id,\n  children,\n}: EntityFilterValueContentProps<RowRef, RowView>): JSX.Element => {\n  const data = useLazyLoadQuery<OperationType>(valueConfig.query, { id });\n  const rowRef = valueConfig.resolveRow(data);\n  let row: RowView | null = null;\n  if (rowRef != null) {\n    row = valueConfig.toRow(rowRef);\n  }\n  const title = resolveTitle(row);\n  let status: EntityFilterValueTextState['status'] = 'resolved';\n  if (title == null) {\n    status = 'unresolved';\n  }\n\n  return children(title, { status });\n};\n\nexport type EntityFilterValueTextState = {\n  status: 'loading' | 'resolved' | 'unresolved' | 'unavailable' | 'error';\n};\n\nexport type EntityFilterValueTextChildren = (\n  label: string | null,\n  state?: EntityFilterValueTextState,\n) => JSX.Element;\n\nexport type EntityFilterValueTextProps = {\n  entityId: string;\n  id: string;\n  children: EntityFilterValueTextChildren;\n};\n\nexport const EntityFilterValueText = ({\n  entityId,\n  id,\n  children,\n}: EntityFilterValueTextProps): JSX.Element => {\n  const resolvedId = id.trim();\n  const pickerEntityState = useBackofficePickerEntityLoader(entityId, {\n    enabled: resolvedId !== '',\n  });\n\n  if (resolvedId === '') {\n    return children(null, { status: 'unavailable' });\n  }\n\n  let valueConfig: BackofficePickerValueConfig<unknown, unknown> | null = null;\n  if (pickerEntityState.status === 'loaded') {\n    valueConfig = pickerEntityState.module.config.picker.value ?? null;\n  }\n\n  const loadingFallback = children(null, { status: 'loading' });\n  if (pickerEntityState.status === 'loading') {\n    return loadingFallback;\n  }\n\n  let unavailableStatus: EntityFilterValueTextState['status'] = 'unavailable';\n  if (pickerEntityState.status === 'error') {\n    unavailableStatus = 'error';\n  }\n  const unavailableFallback = children(null, {\n    status: unavailableStatus,\n  });\n  if (valueConfig == null) {\n    return unavailableFallback;\n  }\n\n  return (\n    <BackofficeErrorBoundary\n      fallback={() => {\n        return children(null, { status: 'error' });\n      }}\n    >\n      <Suspense fallback={loadingFallback}>\n        <EntityFilterValueContent valueConfig={valueConfig} id={id}>\n          {children}\n        </EntityFilterValueContent>\n      </Suspense>\n    </BackofficeErrorBoundary>\n  );\n};\n\nexport type EntityFilterValueProps = {\n  entityId: string;\n  id: string;\n};\n\nexport const EntityFilterValue = ({\n  entityId,\n  id,\n}: EntityFilterValueProps): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const resolvedId = id.trim();\n\n  return (\n    <EntityFilterValueText entityId={entityId} id={id}>\n      {(label) => {\n        let fallbackLabel = resolvedId;\n        if (resolvedId === '') {\n          fallbackLabel = t('filters.placeholders.unresolved');\n        }\n        return <span>{label ?? fallbackLabel}</span>;\n      }}\n    </EntityFilterValueText>\n  );\n};\n\nexport default EntityFilterValue;\n"],"mappings":";;;;;;;AAUA,IAAM,EAAE,kBAAA,MAAqB,GAQvB,KAAgB,MAAkC;CACtD,IAAqB,OAAO,KAAU,aAAlC,GACF,OAAO;CAET,IAAM,EAAE,aAAU;CAClB,IAAI,OAAO,KAAU,UACnB,OAAO;CAET,IAAM,IAAU,EAAM,MAAM;CAI5B,OAHI,MAAY,KACP,OAEF;GAGH,KAA6C,EACjD,gBACA,OACA,kBACiE;CACjE,IAAM,IAAO,EAAgC,EAAY,OAAO,EAAE,OAAI,CAAC,EACjE,IAAS,EAAY,WAAW,EAAK,EACvC,IAAsB;CAC1B,AAAI,KAAU,SACZ,IAAM,EAAY,MAAM,EAAO;CAEjC,IAAM,IAAQ,EAAa,EAAI,EAC3B,IAA+C;CAKnD,OAJI,MACF,IAAS,eAGJ,EAAS,GAAO,EAAE,WAAQ,CAAC;GAkBvB,KAAyB,EACpC,aACA,OACA,kBAC6C;CAC7C,IAAM,IAAa,EAAG,MAAM,EACtB,IAAoB,EAAgC,GAAU,EAClE,SAAS,MAAe,IACzB,CAAC;CAEF,IAAI,MAAe,IACjB,OAAO,EAAS,MAAM,EAAE,QAAQ,eAAe,CAAC;CAGlD,IAAI,IAAoE;CACxE,AAAI,EAAkB,WAAW,aAC/B,IAAc,EAAkB,OAAO,OAAO,OAAO,SAAS;CAGhE,IAAM,IAAkB,EAAS,MAAM,EAAE,QAAQ,WAAW,CAAC;CAC7D,IAAI,EAAkB,WAAW,WAC/B,OAAO;CAGT,IAAI,IAA0D;CAC9D,AAAI,EAAkB,WAAW,YAC/B,IAAoB;CAEtB,IAAM,IAAsB,EAAS,MAAM,EACzC,QAAQ,GACT,CAAC;CAKF,OAJI,KAAe,OACV,IAIP,kBAAC,GAAD;EACE,gBACS,EAAS,MAAM,EAAE,QAAQ,SAAS,CAAC;YAG5C,kBAAC,GAAD;GAAU,UAAU;aAClB,kBAAC,GAAD;IAAuC;IAAiB;IACrD;IACwB,CAAA;GAClB,CAAA;EACa,CAAA;GASjB,KAAqB,EAChC,aACA,YACyC;CACzC,IAAM,EAAE,SAAM,GAA+B,EACvC,IAAa,EAAG,MAAM;CAE5B,OACE,kBAAC,GAAD;EAAiC;EAAc;aAC3C,MAAU;GACV,IAAI,IAAgB;GAIpB,OAHI,MAAe,OACjB,IAAgB,EAAE,kCAAkC,GAE/C,kBAAC,QAAD,EAAA,UAAO,KAAS,GAAqB,CAAA;;EAExB,CAAA"}

package/lib/esm/components/backoffice/filters/EntityIdFilterField.js

@@ -1,65 +1,97 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
-import { actions as t, container as n, labelText as r, pickText as i, pickerButton as a, placeholder as o, valueText as s } from "./entityIdFilterField.css.js";
-import { Button as c } from "@plumile/ui";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { actionIcon as t, clearButton as n, container as r, content as i, labelText as a, pickActionButton as o, pickerButton as s, pickerControl as c, placeholder as l, valueText as u } from "./entityIdFilterField.css.js";
+import { BackofficeSidebarPenToolSvg as d, BackofficeSidebarSearchSvg as f } from "@plumile/ui";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/backoffice/filters/EntityIdFilterField.tsx
-var d = (d) => {
-	let { disabled: f = !1, id: p, label: m, value: h, displayValue: g, placeholder: _, ariaDescribedBy: v, ariaInvalid: y, onPick: b, onClear: x } = d, { t: S } = e(), C = h?.trim() ?? "", w = g?.trim() ?? "", T = C !== "", E = w !== "", D = _ ?? S("filters.placeholders.anyEntity", { label: m }), O = S("filters.placeholders.unresolved"), k;
-	k = E ? /* @__PURE__ */ l("span", {
-		className: s,
-		children: w
-	}) : T ? /* @__PURE__ */ l("span", {
-		className: o,
-		children: O
-	}) : /* @__PURE__ */ l("span", {
-		className: o,
-		children: D
-	});
-	let A = S("common.actions.pick");
-	T && (A = S("common.actions.change"));
-	let j = `${A} ${m}`, M = S("common.actions.clear"), N = `${M} ${m}`, P = null;
-	T && x != null && (P = /* @__PURE__ */ l(c, {
-		type: "button",
-		variant: "text",
-		size: "small",
-		"aria-label": N,
-		disabled: f,
-		onClick: x,
+var h = (h) => {
+	let { disabled: g = !1, id: _, label: v, value: y, displayValue: b, placeholder: x, ariaDescribedBy: S, ariaInvalid: C, isResolving: w = !1, onPick: T, onClear: E } = h, { t: D } = e(), O = y?.trim() ?? "", k = b?.trim() ?? "", A = O !== "", j = k !== "", M = x ?? D("filters.placeholders.anyEntity", { label: v }), N = D("filters.placeholders.unresolved"), P;
+	P = j ? /* @__PURE__ */ p("span", {
+		className: u,
+		children: k
+	}) : A ? /* @__PURE__ */ p("span", {
+		className: l,
+		children: N
+	}) : /* @__PURE__ */ p("span", {
+		className: l,
 		children: M
-	}));
-	let F = null;
-	return b != null && (F = /* @__PURE__ */ u("button", {
-		id: p,
+	});
+	let F = D("common.actions.pick");
+	A && (F = D("common.actions.change"));
+	let I = `${F} ${v}`, L = `${D("common.actions.clear")} ${v}`, R = null;
+	A && E != null && (R = /* @__PURE__ */ p("button", {
 		type: "button",
-		className: a,
-		"aria-label": j,
-		"aria-describedby": v,
-		"aria-invalid": y,
-		disabled: f,
-		onClick: b,
-		children: [
-			/* @__PURE__ */ l("span", {
-				className: r,
-				children: m
-			}),
-			k,
-			/* @__PURE__ */ l("span", {
-				className: i,
-				children: A
-			})
-		]
-	})), /* @__PURE__ */ u("div", {
 		className: n,
-		children: [F ?? /* @__PURE__ */ l("div", {
-			className: "txvbqb9my txvbqbk5y txvbqb9ip txvbqbcp txvbqbl7g",
-			children: k
-		}), /* @__PURE__ */ l("div", {
+		"aria-label": L,
+		disabled: g,
+		onClick: (e) => {
+			e.stopPropagation(), E();
+		},
+		children: /* @__PURE__ */ p("svg", {
+			width: "12",
+			height: "12",
+			viewBox: "0 0 12 12",
+			fill: "none",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ p("path", {
+				d: "M3 3L9 9M9 3L3 9",
+				stroke: "currentColor",
+				strokeWidth: "1.6",
+				strokeLinecap: "round"
+			})
+		})
+	}));
+	let z = null;
+	if (T != null) {
+		let e = /* @__PURE__ */ p(f, {
 			className: t,
+			"aria-hidden": "true"
+		});
+		A && (e = /* @__PURE__ */ p(d, {
+			className: t,
+			"aria-hidden": "true"
+		})), z = /* @__PURE__ */ m("div", {
+			className: c,
+			children: [
+				/* @__PURE__ */ p("button", {
+					id: _,
+					type: "button",
+					className: s,
+					"aria-label": I,
+					"aria-describedby": S,
+					"aria-invalid": C,
+					"aria-busy": w || void 0,
+					disabled: g,
+					onClick: T,
+					children: /* @__PURE__ */ m("span", {
+						className: i,
+						children: [/* @__PURE__ */ p("span", {
+							className: a,
+							children: v
+						}), P]
+					})
+				}),
+				/* @__PURE__ */ p("button", {
+					type: "button",
+					className: o,
+					"aria-label": I,
+					title: I,
+					disabled: g,
+					onClick: T,
+					children: e
+				}),
+				R
+			]
+		});
+	}
+	return /* @__PURE__ */ p("div", {
+		className: r,
+		children: z ?? /* @__PURE__ */ p("div", {
+			className: "txvbqb9my txvbqbk5y txvbqb9ip txvbqbcp txvbqbl7g",
 			children: P
-		})]
+		})
 	});
 };
 //#endregion
-export { d as EntityIdFilterField, d as default };
+export { h as EntityIdFilterField, h as default };
 
 //# sourceMappingURL=EntityIdFilterField.js.map

package/lib/esm/components/backoffice/filters/EntityIdFilterField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityIdFilterField.js","names":[],"sources":["../../../../../src/components/backoffice/filters/EntityIdFilterField.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { Button } from '@plumile/ui';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './entityIdFilterField.css.js';\n\nexport type EntityIdFilterFieldProps = {\n  id?: string;\n  label: string;\n  value: string | null;\n  displayValue?: string | null;\n  placeholder?: string;\n  ariaDescribedBy?: string;\n  ariaInvalid?: boolean;\n  onPick?: () => void;\n  onClear?: () => void;\n  disabled?: boolean;\n};\n\nexport const EntityIdFilterField = (\n  props: EntityIdFilterFieldProps,\n): JSX.Element => {\n  const {\n    disabled = false,\n    id,\n    label,\n    value,\n    displayValue,\n    placeholder,\n    ariaDescribedBy,\n    ariaInvalid,\n    onPick,\n    onClear,\n  } = props;\n  const { t } = useBackofficeReactTranslation();\n  const normalizedValue = value?.trim() ?? '';\n  const normalizedDisplayValue = displayValue?.trim() ?? '';\n  const hasValue = normalizedValue !== '';\n  const hasDisplayValue = normalizedDisplayValue !== '';\n\n  const resolvedPlaceholder =\n    placeholder ?? t('filters.placeholders.anyEntity', { label });\n  const unresolvedPlaceholder = t('filters.placeholders.unresolved');\n\n  let displayNode: JSX.Element;\n  if (hasDisplayValue) {\n    displayNode = (\n      <span className={styles.valueText}>{normalizedDisplayValue}</span>\n    );\n  } else if (hasValue) {\n    displayNode = (\n      <span className={styles.placeholder}>{unresolvedPlaceholder}</span>\n    );\n  } else {\n    displayNode = (\n      <span className={styles.placeholder}>{resolvedPlaceholder}</span>\n    );\n  }\n\n  let pickLabel = t('common.actions.pick');\n  if (hasValue) {\n    pickLabel = t('common.actions.change');\n  }\n  const pickAriaLabel = `${pickLabel} ${label}`;\n  const clearLabel = t('common.actions.clear');\n  const clearAriaLabel = `${clearLabel} ${label}`;\n\n  let clearNode: JSX.Element | null = null;\n  if (hasValue && onClear != null) {\n    clearNode = (\n      <Button\n        type=\"button\"\n        variant=\"text\"\n        size=\"small\"\n        aria-label={clearAriaLabel}\n        disabled={disabled}\n        onClick={onClear}\n      >\n        {clearLabel}\n      </Button>\n    );\n  }\n\n  let pickerNode: JSX.Element | null = null;\n  if (onPick != null) {\n    pickerNode = (\n      <button\n        id={id}\n        type=\"button\"\n        className={styles.pickerButton}\n        aria-label={pickAriaLabel}\n        aria-describedby={ariaDescribedBy}\n        aria-invalid={ariaInvalid}\n        disabled={disabled}\n        onClick={onPick}\n      >\n        <span className={styles.labelText}>{label}</span>\n        {displayNode}\n        <span className={styles.pickText}>{pickLabel}</span>\n      </button>\n    );\n  }\n\n  return (\n    <div className={styles.container}>\n      {pickerNode ?? <div className={styles.valueBox}>{displayNode}</div>}\n      <div className={styles.actions}>{clearNode}</div>\n    </div>\n  );\n};\n\nexport default EntityIdFilterField;\n"],"mappings":";;;;;AAqBA,IAAa,KACX,MACgB;CAChB,IAAM,EACJ,cAAW,IACX,OACA,UACA,UACA,iBACA,aAAA,GACA,oBACA,gBACA,WACA,eACE,GACE,EAAE,SAAM,GAA+B,EACvC,IAAkB,GAAO,MAAM,IAAI,IACnC,IAAyB,GAAc,MAAM,IAAI,IACjD,IAAW,MAAoB,IAC/B,IAAkB,MAA2B,IAE7C,IACJ,KAAe,EAAE,kCAAkC,EAAE,UAAO,CAAC,EACzD,IAAwB,EAAE,kCAAkC,EAE9D;CACJ,AASE,IATE,IAEA,kBAAC,QAAD;EAAM,WAAW;YAAmB;EAA8B,CAAA,GAE3D,IAEP,kBAAC,QAAD;EAAM,WAAW;YAAqB;EAA6B,CAAA,GAInE,kBAAC,QAAD;EAAM,WAAW;YAAqB;EAA2B,CAAA;CAIrE,IAAI,IAAY,EAAE,sBAAsB;CACxC,AAAI,MACF,IAAY,EAAE,wBAAwB;CAExC,IAAM,IAAgB,GAAG,EAAU,GAAG,KAChC,IAAa,EAAE,uBAAuB,EACtC,IAAiB,GAAG,EAAW,GAAG,KAEpC,IAAgC;CACpC,AAAI,KAAY,KAAW,SACzB,IACE,kBAAC,GAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,cAAY;EACF;EACV,SAAS;YAER;EACM,CAAA;CAIb,IAAI,IAAiC;CAoBrC,OAnBI,KAAU,SACZ,IACE,kBAAC,UAAD;EACM;EACJ,MAAK;EACL,WAAW;EACX,cAAY;EACZ,oBAAkB;EAClB,gBAAc;EACJ;EACV,SAAS;YARX;GAUE,kBAAC,QAAD;IAAM,WAAW;cAAmB;IAAa,CAAA;GAChD;GACD,kBAAC,QAAD;IAAM,WAAW;cAAkB;IAAiB,CAAA;GAC7C;MAKX,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACG,KAAc,kBAAC,OAAD;GAAK,WAAW;aAAkB;GAAkB,CAAA,EACnE,kBAAC,OAAD;GAAK,WAAW;aAAiB;GAAgB,CAAA,CAC7C"}
+{"version":3,"file":"EntityIdFilterField.js","names":[],"sources":["../../../../../src/components/backoffice/filters/EntityIdFilterField.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport {\n  BackofficeSidebarPenToolSvg,\n  BackofficeSidebarSearchSvg,\n} from '@plumile/ui';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\n\nimport * as styles from './entityIdFilterField.css.js';\n\nexport type EntityIdFilterFieldProps = {\n  id?: string;\n  label: string;\n  value: string | null;\n  displayValue?: string | null;\n  placeholder?: string;\n  ariaDescribedBy?: string;\n  ariaInvalid?: boolean;\n  isResolving?: boolean;\n  onPick?: () => void;\n  onClear?: () => void;\n  disabled?: boolean;\n};\n\nexport const EntityIdFilterField = (\n  props: EntityIdFilterFieldProps,\n): JSX.Element => {\n  const {\n    disabled = false,\n    id,\n    label,\n    value,\n    displayValue,\n    placeholder,\n    ariaDescribedBy,\n    ariaInvalid,\n    isResolving = false,\n    onPick,\n    onClear,\n  } = props;\n  const { t } = useBackofficeReactTranslation();\n  const normalizedValue = value?.trim() ?? '';\n  const normalizedDisplayValue = displayValue?.trim() ?? '';\n  const hasValue = normalizedValue !== '';\n  const hasDisplayValue = normalizedDisplayValue !== '';\n\n  const resolvedPlaceholder =\n    placeholder ?? t('filters.placeholders.anyEntity', { label });\n  const unresolvedPlaceholder = t('filters.placeholders.unresolved');\n\n  let displayNode: JSX.Element;\n  if (hasDisplayValue) {\n    displayNode = (\n      <span className={styles.valueText}>{normalizedDisplayValue}</span>\n    );\n  } else if (hasValue) {\n    displayNode = (\n      <span className={styles.placeholder}>{unresolvedPlaceholder}</span>\n    );\n  } else {\n    displayNode = (\n      <span className={styles.placeholder}>{resolvedPlaceholder}</span>\n    );\n  }\n\n  let pickLabel = t('common.actions.pick');\n  if (hasValue) {\n    pickLabel = t('common.actions.change');\n  }\n  const pickAriaLabel = `${pickLabel} ${label}`;\n  const clearLabel = t('common.actions.clear');\n  const clearAriaLabel = `${clearLabel} ${label}`;\n\n  let clearNode: JSX.Element | null = null;\n  if (hasValue && onClear != null) {\n    clearNode = (\n      <button\n        type=\"button\"\n        className={styles.clearButton}\n        aria-label={clearAriaLabel}\n        disabled={disabled}\n        onClick={(event) => {\n          event.stopPropagation();\n          onClear();\n        }}\n      >\n        <svg\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M3 3L9 9M9 3L3 9\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.6\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      </button>\n    );\n  }\n\n  let pickerNode: JSX.Element | null = null;\n  if (onPick != null) {\n    let actionIcon = (\n      <BackofficeSidebarSearchSvg\n        className={styles.actionIcon}\n        aria-hidden=\"true\"\n      />\n    );\n    if (hasValue) {\n      actionIcon = (\n        <BackofficeSidebarPenToolSvg\n          className={styles.actionIcon}\n          aria-hidden=\"true\"\n        />\n      );\n    }\n\n    pickerNode = (\n      <div className={styles.pickerControl}>\n        <button\n          id={id}\n          type=\"button\"\n          className={styles.pickerButton}\n          aria-label={pickAriaLabel}\n          aria-describedby={ariaDescribedBy}\n          aria-invalid={ariaInvalid}\n          aria-busy={isResolving || undefined}\n          disabled={disabled}\n          onClick={onPick}\n        >\n          <span className={styles.content}>\n            <span className={styles.labelText}>{label}</span>\n            {displayNode}\n          </span>\n        </button>\n        <button\n          type=\"button\"\n          className={styles.pickActionButton}\n          aria-label={pickAriaLabel}\n          title={pickAriaLabel}\n          disabled={disabled}\n          onClick={onPick}\n        >\n          {actionIcon}\n        </button>\n        {clearNode}\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles.container}>\n      {pickerNode ?? <div className={styles.valueBox}>{displayNode}</div>}\n    </div>\n  );\n};\n\nexport default EntityIdFilterField;\n"],"mappings":";;;;;AAwBA,IAAa,KACX,MACgB;CAChB,IAAM,EACJ,cAAW,IACX,OACA,UACA,UACA,iBACA,aAAA,GACA,oBACA,gBACA,iBAAc,IACd,WACA,eACE,GACE,EAAE,SAAM,GAA+B,EACvC,IAAkB,GAAO,MAAM,IAAI,IACnC,IAAyB,GAAc,MAAM,IAAI,IACjD,IAAW,MAAoB,IAC/B,IAAkB,MAA2B,IAE7C,IACJ,KAAe,EAAE,kCAAkC,EAAE,UAAO,CAAC,EACzD,IAAwB,EAAE,kCAAkC,EAE9D;CACJ,AASE,IATE,IAEA,kBAAC,QAAD;EAAM,WAAW;YAAmB;EAA8B,CAAA,GAE3D,IAEP,kBAAC,QAAD;EAAM,WAAW;YAAqB;EAA6B,CAAA,GAInE,kBAAC,QAAD;EAAM,WAAW;YAAqB;EAA2B,CAAA;CAIrE,IAAI,IAAY,EAAE,sBAAsB;CACxC,AAAI,MACF,IAAY,EAAE,wBAAwB;CAExC,IAAM,IAAgB,GAAG,EAAU,GAAG,KAEhC,IAAiB,GADJ,EAAE,uBACK,CAAW,GAAG,KAEpC,IAAgC;CACpC,AAAI,KAAY,KAAW,SACzB,IACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,cAAY;EACF;EACV,UAAU,MAAU;GAElB,AADA,EAAM,iBAAiB,EACvB,GAAS;;YAGX,kBAAC,OAAD;GACE,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,eAAY;aAEZ,kBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,CAAA;GACE,CAAA;EACC,CAAA;CAIb,IAAI,IAAiC;CACrC,IAAI,KAAU,MAAM;EAClB,IAAI,IACF,kBAAC,GAAD;GACE,WAAW;GACX,eAAY;GACZ,CAAA;EAWJ,AATI,MACF,IACE,kBAAC,GAAD;GACE,WAAW;GACX,eAAY;GACZ,CAAA,GAIN,IACE,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,UAAD;KACM;KACJ,MAAK;KACL,WAAW;KACX,cAAY;KACZ,oBAAkB;KAClB,gBAAc;KACd,aAAW,KAAe,KAAA;KAChB;KACV,SAAS;eAET,kBAAC,QAAD;MAAM,WAAW;gBAAjB,CACE,kBAAC,QAAD;OAAM,WAAW;iBAAmB;OAAa,CAAA,EAChD,EACI;;KACA,CAAA;IACT,kBAAC,UAAD;KACE,MAAK;KACL,WAAW;KACX,cAAY;KACZ,OAAO;KACG;KACV,SAAS;eAER;KACM,CAAA;IACR;IACG;;;CAIV,OACE,kBAAC,OAAD;EAAK,WAAW;YACb,KAAc,kBAAC,OAAD;GAAK,WAAW;aAAkB;GAAkB,CAAA;EAC/D,CAAA"}

package/lib/esm/components/backoffice/filters/entityIdFilterField.css.js

@@ -1,7 +1,7 @@
 /* empty css                                   */
 //#region src/components/backoffice/filters/entityIdFilterField.css.ts
-var e = "txvbqb9ip txvbqbcp txvbqbany txvbqbu4g txvbqbjep", t = "oa1uye0 txvbqbnw7 txvbqbojg txvbqbpry txvbqbmjp txvbqb6 txvbqb9iy txvbqbcp txvbqbb9g txvbqb9my txvbqbk5y txvbqbt6p txvbqbv txvbqb1ry txvbqb1cp txvbqb1qg txvbqbwg txvbqbv41 txvbqbv9z txvbqb77 txvbqb6x txvbqb7k", n = "txvbqb9my txvbqbk5y txvbqb9ip txvbqbcp txvbqbl7g", r = "oa1uye1 txvbqb9i7 txvbqbva3 txvbqb8p txvbqbamg txvbqbl7g txvbqbt7g txvbqbuxg", i = "txvbqb9i7 txvbqbk5y txvbqbl7g txvbqbt7g txvbqbuxg txvbqb8y txvbqbamp", a = "txvbqbva3 txvbqb8y", o = "txvbqbvb7 txvbqb8p txvbqbamp", s = "txvbqb9ip txvbqbcp txvbqbany";
+var e = "txvbqb9ip txvbqbcp txvbqbu4g txvbqbjep txvbqbk5y", t = "oa1uye0 txvbqbnw7 txvbqbojg txvbqbpry txvbqbmjp txvbqb9iy txvbqbcp txvbqb9my txvbqbk5y txvbqb1ry txvbqb1cp txvbqb1qg txvbqbwg txvbqbv41 txvbqbv9z txvbqb77 txvbqb6x txvbqb7k", n = "oa1uye1 txvbqb6 txvbqb9ip txvbqbai7 txvbqbdoy txvbqbk5y txvbqbu7g txvbqbt6p txvbqbv txvbqb12g txvbqbv0t txvbqbv9z txvbqblag", r = "oa1uye2 txvbqb9ip txvbqbai7 txvbqbdoy txvbqbb9g txvbqbk5y txvbqbu7g", i = "txvbqb9my txvbqbk5y txvbqb9ip txvbqbcp txvbqbl7g", a = "oa1uye3 txvbqb9i7 txvbqbva3 txvbqb8p txvbqbamg txvbqbl7g txvbqbt7g txvbqbuxg", o = "txvbqb9i7 txvbqbk5y txvbqbl7g txvbqbt7g txvbqbuxg txvbqb8y txvbqbamp", s = "txvbqb9i7 txvbqbk5y txvbqbl7g txvbqbt7g txvbqbuxg txvbqbva3 txvbqb8y", c = "oa1uye5 oa1uye4 txvbqb6 txvbqb9jg txvbqbcp txvbqbdoy txvbqbtxy txvbqbc6y txvbqblag txvbqb1rp txvbqb1cp txvbqb1qg txvbqbwp txvbqbv41 txvbqbva3 txvbqbv txvbqb78 txvbqb6w txvbqb7k", l = "oa1uye6 oa1uye4 txvbqb6 txvbqb9jg txvbqbcp txvbqbdoy txvbqbtxy txvbqbc6y txvbqblag txvbqb1rp txvbqb1cp txvbqb1qg txvbqbwp txvbqbv41 txvbqbva3 txvbqbv txvbqb78 txvbqb6w txvbqb7k txvbqb1t7 txvbqbv45", u = "oa1uye7";
 //#endregion
-export { s as actions, e as container, r as labelText, o as pickText, t as pickerButton, a as placeholder, n as valueBox, i as valueText };
+export { u as actionIcon, l as clearButton, e as container, r as content, a as labelText, c as pickActionButton, n as pickerButton, t as pickerControl, s as placeholder, i as valueBox, o as valueText };
 
 //# sourceMappingURL=entityIdFilterField.css.js.map