@gxp-dev/mod-ui 2.0.12 → 2.0.14

package/dist/chunks/GridViewCard-BxiLP409.js

@@ -0,0 +1,110 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { t } from "./ElementRenderer-DUhlfnFD.js";
+import { t as n } from "./CardRenderer-N4R08uDO.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderList as f, toDisplayString as p } from "vue";
+//#region src/components/compositions/cards/GridViewCard.vue?vue&type=script&setup=true&lang.ts
+var m = {
+	key: 0,
+	class: "mb-3 flex flex-col gap-0.5"
+}, h = {
+	key: 0,
+	class: "text-base font-semibold"
+}, g = {
+	key: 1,
+	class: "text-sm text-muted-foreground"
+}, _ = ["data-grid-item-id"], v = {
+	key: 2,
+	class: "text-sm text-muted-foreground italic",
+	"data-testid": "grid-view-empty"
+}, y = /* @__PURE__ */ c({
+	__name: "GridViewCard",
+	props: {
+		title: {},
+		subtitle: {},
+		showCard: {
+			type: Boolean,
+			default: !0
+		},
+		gridLayout: {},
+		rowHeight: { default: 150 },
+		margin: { default: () => [10, 10] },
+		containerPadding: { default: () => [10, 10] },
+		cols: {},
+		cards: { default: () => [] },
+		gridElements: { default: () => [] },
+		item: { default: () => ({}) }
+	},
+	setup(e) {
+		let c = e, y = [
+			"xxl",
+			"xl",
+			"lg",
+			"md",
+			"sm",
+			"xs",
+			"xxs"
+		], b = i(() => {
+			let e = c.gridLayout ?? {};
+			for (let t of y) {
+				let n = e[t];
+				if (n && n.length > 0) return n;
+			}
+			return [];
+		}), x = i(() => {
+			let e = c.cols ?? {};
+			for (let t of y) if (typeof e[t] == "number") return e[t];
+			return 12;
+		}), S = i(() => ({
+			display: "grid",
+			gridTemplateColumns: `repeat(${x.value}, minmax(0, 1fr))`,
+			gridAutoRows: `${c.rowHeight}px`,
+			columnGap: `${c.margin[0]}px`,
+			rowGap: `${c.margin[1]}px`,
+			padding: `${c.containerPadding[1]}px ${c.containerPadding[0]}px`
+		}));
+		function C(e) {
+			return {
+				gridColumn: `${e.x + 1} / span ${e.w}`,
+				gridRow: `${e.y + 1} / span ${e.h}`
+			};
+		}
+		let w = i(() => {
+			let e = {};
+			for (let t of c.cards) e[t.id] = t;
+			return e;
+		}), T = i(() => {
+			let e = {};
+			for (let t of c.gridElements) e[t.id] = t;
+			return e;
+		});
+		function E(e) {
+			return w.value[e];
+		}
+		function D(e) {
+			return T.value[e];
+		}
+		let O = i(() => c.showCard !== !1);
+		return (i, c) => (d(), s("section", { class: l(["gxp-grid-view", O.value ? "rounded-lg border bg-card text-card-foreground shadow-sm p-4" : ""]) }, [e.title || e.subtitle ? (d(), s("header", m, [e.title ? (d(), s("h3", h, p(e.title), 1)) : o("", !0), e.subtitle ? (d(), s("p", g, p(e.subtitle), 1)) : o("", !0)])) : o("", !0), b.value.length > 0 ? (d(), s("div", {
+			key: 1,
+			style: u(S.value),
+			"data-testid": "grid-view-container"
+		}, [(d(!0), s(r, null, f(b.value, (r) => (d(), s("div", {
+			key: r.i,
+			style: u(C(r)),
+			"data-grid-item-id": r.i,
+			class: l(["gxp-grid-view__cell", r.options?.displayBorder ? "border rounded-md p-2" : ""])
+		}, [E(r.i) ? (d(), a(n, {
+			key: 0,
+			card: E(r.i),
+			item: e.item
+		}, null, 8, ["card", "item"])) : D(r.i) ? (d(), a(t, {
+			key: 1,
+			element: D(r.i),
+			item: e.item
+		}, null, 8, ["element", "item"])) : o("", !0)], 14, _))), 128))], 4)) : (d(), s("p", v, " No grid items to display. "))], 2));
+	}
+}), b = /* @__PURE__ */ e({ default: () => x }), x = y;
+//#endregion
+export { b as n, x as t };
+
+//# sourceMappingURL=GridViewCard-BxiLP409.js.map

package/dist/chunks/GridViewCard-BxiLP409.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridViewCard-BxiLP409.js","names":[],"sources":["../../src/components/compositions/cards/GridViewCard.vue","../../src/components/compositions/cards/GridViewCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `grid-view` composition — a responsive CSS-grid layout\n * driven by `gridLayout`. Each `GridItem.i` is matched to one of the\n * resolved `cards` (or `gridElements`) by `id` and rendered into a CSS\n * grid cell using the item's `x`, `y`, `w`, `h` coordinates.\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <GridViewCard\n *     :grid-layout=\"layout\"\n *     :cards=\"[chartCard, feedCard]\"\n *     :item=\"dataModel\"\n *   />\n *\n * The full vue-grid-layout drag/resize behaviour from v2 is not yet\n * implemented; this composition focuses on the static visual layout.\n */\nimport { computed } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport type { DisplayCard } from \"@/definitions/cards\"\nimport type {\n  GridBreakpoint,\n  GridItem,\n  GridLayout,\n} from \"@/definitions/cards/GridViewCard\"\nimport CardRenderer from \"@/engine/CardRenderer.vue\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\n\nexport interface GridViewCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  /** Per-breakpoint item layout map. */\n  gridLayout?: GridLayout\n  /** Pixel height of a single grid row. */\n  rowHeight?: number\n  /** Horizontal and vertical gap between items, in pixels. */\n  margin?: [number, number]\n  /** Padding around the entire grid container, in pixels. */\n  containerPadding?: [number, number]\n  /** Column count per breakpoint. */\n  cols?: Partial<Record<GridBreakpoint, number>>\n  /** Resolved nested cards (NOT IDs). */\n  cards?: DisplayCard[]\n  /** Resolved nested elements (NOT IDs) for grid items that target elements. */\n  gridElements?: CardElement[]\n  /** Page-level data model passed through to child renderers. */\n  item?: Record<string, unknown>\n}\n\nconst props = withDefaults(defineProps<GridViewCardProps>(), {\n  showCard: true,\n  rowHeight: 150,\n  margin: () => [10, 10] as [number, number],\n  containerPadding: () => [10, 10] as [number, number],\n  cards: () => [],\n  gridElements: () => [],\n  item: () => ({}),\n})\n\nconst BREAKPOINT_PRIORITY: GridBreakpoint[] = [\n  \"xxl\",\n  \"xl\",\n  \"lg\",\n  \"md\",\n  \"sm\",\n  \"xs\",\n  \"xxs\",\n]\n\nconst items = computed<GridItem[]>(() => {\n  const layout = props.gridLayout ?? {}\n  for (const bp of BREAKPOINT_PRIORITY) {\n    const entry = layout[bp]\n    if (entry && entry.length > 0) {\n      return entry\n    }\n  }\n  return []\n})\n\nconst columnCount = computed<number>(() => {\n  const cols = props.cols ?? {}\n  for (const bp of BREAKPOINT_PRIORITY) {\n    if (typeof cols[bp] === \"number\") {\n      return cols[bp] as number\n    }\n  }\n  return 12\n})\n\nconst gridStyle = computed(() => ({\n  display: \"grid\",\n  gridTemplateColumns: `repeat(${columnCount.value}, minmax(0, 1fr))`,\n  gridAutoRows: `${props.rowHeight}px`,\n  columnGap: `${props.margin[0]}px`,\n  rowGap: `${props.margin[1]}px`,\n  padding: `${props.containerPadding[1]}px ${props.containerPadding[0]}px`,\n}))\n\nfunction cellStyle(slot: GridItem): Record<string, string> {\n  return {\n    gridColumn: `${slot.x + 1} / span ${slot.w}`,\n    gridRow: `${slot.y + 1} / span ${slot.h}`,\n  }\n}\n\nconst cardById = computed<Record<string, DisplayCard>>(() => {\n  const out: Record<string, DisplayCard> = {}\n  for (const c of props.cards) {\n    out[c.id] = c\n  }\n  return out\n})\n\nconst elementById = computed<Record<string, CardElement>>(() => {\n  const out: Record<string, CardElement> = {}\n  for (const e of props.gridElements) {\n    out[e.id] = e\n  }\n  return out\n})\n\nfunction resolveCard(id: string): DisplayCard | undefined {\n  return cardById.value[id]\n}\n\nfunction resolveElement(id: string): CardElement | undefined {\n  return elementById.value[id]\n}\n\nconst showChrome = computed<boolean>(() => props.showCard !== false)\n</script>\n\n<template>\n  <section\n    :class=\"[\n      'gxp-grid-view',\n      showChrome\n        ? 'rounded-lg border bg-card text-card-foreground shadow-sm p-4'\n        : '',\n    ]\"\n  >\n    <header\n      v-if=\"title || subtitle\"\n      class=\"mb-3 flex flex-col gap-0.5\"\n    >\n      <h3 v-if=\"title\" class=\"text-base font-semibold\">{{ title }}</h3>\n      <p v-if=\"subtitle\" class=\"text-sm text-muted-foreground\">\n        {{ subtitle }}\n      </p>\n    </header>\n    <div\n      v-if=\"items.length > 0\"\n      :style=\"gridStyle\"\n      data-testid=\"grid-view-container\"\n    >\n      <div\n        v-for=\"slot in items\"\n        :key=\"slot.i\"\n        :style=\"cellStyle(slot)\"\n        :data-grid-item-id=\"slot.i\"\n        :class=\"[\n          'gxp-grid-view__cell',\n          slot.options?.displayBorder ? 'border rounded-md p-2' : '',\n        ]\"\n      >\n        <CardRenderer\n          v-if=\"resolveCard(slot.i)\"\n          :card=\"resolveCard(slot.i)!\"\n          :item=\"item\"\n        />\n        <ElementRenderer\n          v-else-if=\"resolveElement(slot.i)\"\n          :element=\"resolveElement(slot.i)!\"\n          :item=\"item\"\n        />\n      </div>\n    </div>\n    <p\n      v-else\n      class=\"text-sm text-muted-foreground italic\"\n      data-testid=\"grid-view-empty\"\n    >\n      No grid items to display.\n    </p>\n  </section>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven `grid-view` composition — a responsive CSS-grid layout\n * driven by `gridLayout`. Each `GridItem.i` is matched to one of the\n * resolved `cards` (or `gridElements`) by `id` and rendered into a CSS\n * grid cell using the item's `x`, `y`, `w`, `h` coordinates.\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <GridViewCard\n *     :grid-layout=\"layout\"\n *     :cards=\"[chartCard, feedCard]\"\n *     :item=\"dataModel\"\n *   />\n *\n * The full vue-grid-layout drag/resize behaviour from v2 is not yet\n * implemented; this composition focuses on the static visual layout.\n */\nimport { computed } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport type { DisplayCard } from \"@/definitions/cards\"\nimport type {\n  GridBreakpoint,\n  GridItem,\n  GridLayout,\n} from \"@/definitions/cards/GridViewCard\"\nimport CardRenderer from \"@/engine/CardRenderer.vue\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\n\nexport interface GridViewCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  /** Per-breakpoint item layout map. */\n  gridLayout?: GridLayout\n  /** Pixel height of a single grid row. */\n  rowHeight?: number\n  /** Horizontal and vertical gap between items, in pixels. */\n  margin?: [number, number]\n  /** Padding around the entire grid container, in pixels. */\n  containerPadding?: [number, number]\n  /** Column count per breakpoint. */\n  cols?: Partial<Record<GridBreakpoint, number>>\n  /** Resolved nested cards (NOT IDs). */\n  cards?: DisplayCard[]\n  /** Resolved nested elements (NOT IDs) for grid items that target elements. */\n  gridElements?: CardElement[]\n  /** Page-level data model passed through to child renderers. */\n  item?: Record<string, unknown>\n}\n\nconst props = withDefaults(defineProps<GridViewCardProps>(), {\n  showCard: true,\n  rowHeight: 150,\n  margin: () => [10, 10] as [number, number],\n  containerPadding: () => [10, 10] as [number, number],\n  cards: () => [],\n  gridElements: () => [],\n  item: () => ({}),\n})\n\nconst BREAKPOINT_PRIORITY: GridBreakpoint[] = [\n  \"xxl\",\n  \"xl\",\n  \"lg\",\n  \"md\",\n  \"sm\",\n  \"xs\",\n  \"xxs\",\n]\n\nconst items = computed<GridItem[]>(() => {\n  const layout = props.gridLayout ?? {}\n  for (const bp of BREAKPOINT_PRIORITY) {\n    const entry = layout[bp]\n    if (entry && entry.length > 0) {\n      return entry\n    }\n  }\n  return []\n})\n\nconst columnCount = computed<number>(() => {\n  const cols = props.cols ?? {}\n  for (const bp of BREAKPOINT_PRIORITY) {\n    if (typeof cols[bp] === \"number\") {\n      return cols[bp] as number\n    }\n  }\n  return 12\n})\n\nconst gridStyle = computed(() => ({\n  display: \"grid\",\n  gridTemplateColumns: `repeat(${columnCount.value}, minmax(0, 1fr))`,\n  gridAutoRows: `${props.rowHeight}px`,\n  columnGap: `${props.margin[0]}px`,\n  rowGap: `${props.margin[1]}px`,\n  padding: `${props.containerPadding[1]}px ${props.containerPadding[0]}px`,\n}))\n\nfunction cellStyle(slot: GridItem): Record<string, string> {\n  return {\n    gridColumn: `${slot.x + 1} / span ${slot.w}`,\n    gridRow: `${slot.y + 1} / span ${slot.h}`,\n  }\n}\n\nconst cardById = computed<Record<string, DisplayCard>>(() => {\n  const out: Record<string, DisplayCard> = {}\n  for (const c of props.cards) {\n    out[c.id] = c\n  }\n  return out\n})\n\nconst elementById = computed<Record<string, CardElement>>(() => {\n  const out: Record<string, CardElement> = {}\n  for (const e of props.gridElements) {\n    out[e.id] = e\n  }\n  return out\n})\n\nfunction resolveCard(id: string): DisplayCard | undefined {\n  return cardById.value[id]\n}\n\nfunction resolveElement(id: string): CardElement | undefined {\n  return elementById.value[id]\n}\n\nconst showChrome = computed<boolean>(() => props.showCard !== false)\n</script>\n\n<template>\n  <section\n    :class=\"[\n      'gxp-grid-view',\n      showChrome\n        ? 'rounded-lg border bg-card text-card-foreground shadow-sm p-4'\n        : '',\n    ]\"\n  >\n    <header\n      v-if=\"title || subtitle\"\n      class=\"mb-3 flex flex-col gap-0.5\"\n    >\n      <h3 v-if=\"title\" class=\"text-base font-semibold\">{{ title }}</h3>\n      <p v-if=\"subtitle\" class=\"text-sm text-muted-foreground\">\n        {{ subtitle }}\n      </p>\n    </header>\n    <div\n      v-if=\"items.length > 0\"\n      :style=\"gridStyle\"\n      data-testid=\"grid-view-container\"\n    >\n      <div\n        v-for=\"slot in items\"\n        :key=\"slot.i\"\n        :style=\"cellStyle(slot)\"\n        :data-grid-item-id=\"slot.i\"\n        :class=\"[\n          'gxp-grid-view__cell',\n          slot.options?.displayBorder ? 'border rounded-md p-2' : '',\n        ]\"\n      >\n        <CardRenderer\n          v-if=\"resolveCard(slot.i)\"\n          :card=\"resolveCard(slot.i)!\"\n          :item=\"item\"\n        />\n        <ElementRenderer\n          v-else-if=\"resolveElement(slot.i)\"\n          :element=\"resolveElement(slot.i)!\"\n          :item=\"item\"\n        />\n      </div>\n    </div>\n    <p\n      v-else\n      class=\"text-sm text-muted-foreground italic\"\n      data-testid=\"grid-view-empty\"\n    >\n      No grid items to display.\n    </p>\n  </section>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDA,IAAM,IAAQ,GAUR,IAAwC;GAC5C;GACA;GACA;GACA;GACA;GACA;GACA;EACF,GAEM,IAAQ,QAA2B;GACvC,IAAM,IAAS,EAAM,cAAc,CAAC;GACpC,KAAK,IAAM,KAAM,GAAqB;IACpC,IAAM,IAAQ,EAAO;IACrB,IAAI,KAAS,EAAM,SAAS,GAC1B,OAAO;GAEX;GACA,OAAO,CAAC;EACV,CAAC,GAEK,IAAc,QAAuB;GACzC,IAAM,IAAO,EAAM,QAAQ,CAAC;GAC5B,KAAK,IAAM,KAAM,GACf,IAAI,OAAO,EAAK,MAAQ,UACtB,OAAO,EAAK;GAGhB,OAAO;EACT,CAAC,GAEK,IAAY,SAAgB;GAChC,SAAS;GACT,qBAAqB,UAAU,EAAY,MAAM;GACjD,cAAc,GAAG,EAAM,UAAU;GACjC,WAAW,GAAG,EAAM,OAAO,GAAG;GAC9B,QAAQ,GAAG,EAAM,OAAO,GAAG;GAC3B,SAAS,GAAG,EAAM,iBAAiB,GAAG,KAAK,EAAM,iBAAiB,GAAG;EACvE,EAAE;EAEF,SAAS,EAAU,GAAwC;GACzD,OAAO;IACL,YAAY,GAAG,EAAK,IAAI,EAAE,UAAU,EAAK;IACzC,SAAS,GAAG,EAAK,IAAI,EAAE,UAAU,EAAK;GACxC;EACF;EAEA,IAAM,IAAW,QAA4C;GAC3D,IAAM,IAAmC,CAAC;GAC1C,KAAK,IAAM,KAAK,EAAM,OACpB,EAAI,EAAE,MAAM;GAEd,OAAO;EACT,CAAC,GAEK,IAAc,QAA4C;GAC9D,IAAM,IAAmC,CAAC;GAC1C,KAAK,IAAM,KAAK,EAAM,cACpB,EAAI,EAAE,MAAM;GAEd,OAAO;EACT,CAAC;EAED,SAAS,EAAY,GAAqC;GACxD,OAAO,EAAS,MAAM;EACxB;EAEA,SAAS,EAAe,GAAqC;GAC3D,OAAO,EAAY,MAAM;EAC3B;EAEA,IAAM,IAAa,QAAwB,EAAM,aAAa,EAAK;yBAIjE,EAmDU,WAAA,EAlDP,OAAK,EAAA,CAAA,iBAAiC,EAAA,QAAA,iEAAA,EAAA,CAAA,EAAA,GAAA,CAQ/B,EAAA,SAAS,EAAA,YAAA,EAAA,GADjB,EAQS,UART,GAQS,CAJG,EAAA,SAAA,EAAA,GAAV,EAAiE,MAAjE,GAAiE,EAAb,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAChD,EAAA,YAAA,EAAA,GAAT,EAEI,KAFJ,GAEI,EADC,EAAA,QAAQ,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAIP,EAAA,MAAM,SAAM,KAAA,EAAA,GADpB,EA0BM,OAAA;;GAxBH,OAAK,EAAE,EAAA,KAAS;GACjB,eAAY;cAEZ,EAoBM,GAAA,MAAA,EAnBW,EAAA,QAAR,YADT,EAoBM,OAAA;GAlBH,KAAK,EAAK;GACV,OAAK,EAAE,EAAU,CAAI,CAAA;GACrB,qBAAmB,EAAK;GACxB,OAAK,EAAA,CAAA,uBAA+C,EAAK,SAAS,gBAAa,0BAAA,EAAA,CAAA;MAMxE,EAAY,EAAK,CAAC,KAAA,EAAA,GAD1B,EAIE,GAAA;;GAFC,MAAM,EAAY,EAAK,CAAC;GACxB,MAAM,EAAA;mCAGI,EAAe,EAAK,CAAC,KAAA,EAAA,GADlC,EAIE,GAAA;;GAFC,SAAS,EAAe,EAAK,CAAC;GAC9B,MAAM,EAAA;gFAIb,EAMI,KANJ,GAIC,6BAED,EAAA,GAAA,CAAA"}

package/dist/chunks/HtmlDisplay-B9AZpx_5.js

@@ -0,0 +1,25 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { computed as t, createElementBlock as n, defineComponent as r, normalizeClass as i, openBlock as a } from "vue";
+//#region src/components/compositions/elements/display/HtmlDisplay.vue?vue&type=script&setup=true&lang.ts
+var o = ["innerHTML"], s = /* @__PURE__ */ r({
+	__name: "HtmlDisplay",
+	props: {
+		value: {},
+		classList: {}
+	},
+	setup(e) {
+		let r = e, s = t(() => r.value === void 0 || r.value === null ? "" : String(r.value)), c = t(() => {
+			let e = r.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		return (e, t) => (a(), n("div", {
+			class: i(["gxp-html-display", c.value]),
+			"data-testid": "html-display",
+			innerHTML: s.value
+		}, null, 10, o));
+	}
+}), c = /* @__PURE__ */ e({ default: () => l }), l = s;
+//#endregion
+export { c as n, l as t };
+
+//# sourceMappingURL=HtmlDisplay-B9AZpx_5.js.map

package/dist/chunks/HtmlDisplay-B9AZpx_5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlDisplay-B9AZpx_5.js","names":[],"sources":["../../src/components/compositions/elements/display/HtmlDisplay.vue","../../src/components/compositions/elements/display/HtmlDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven raw HTML display.\n *\n * SECURITY: the caller is responsible for trusting the source of\n * `value`. The wrapping `<div>` provides a styling boundary but does\n * not sanitise the markup. Pair with a server-side sanitiser when\n * accepting user input.\n */\nimport { computed } from \"vue\"\n\nexport interface HtmlDisplayProps {\n  value?: string | number | null\n  classList?: string[] | string\n}\n\nconst props = defineProps<HtmlDisplayProps>()\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n</script>\n\n<template>\n  <div\n    class=\"gxp-html-display\"\n    :class=\"rootClass\"\n    data-testid=\"html-display\"\n    v-html=\"content\"\n  />\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven raw HTML display.\n *\n * SECURITY: the caller is responsible for trusting the source of\n * `value`. The wrapping `<div>` provides a styling boundary but does\n * not sanitise the markup. Pair with a server-side sanitiser when\n * accepting user input.\n */\nimport { computed } from \"vue\"\n\nexport interface HtmlDisplayProps {\n  value?: string | number | null\n  classList?: string[] | string\n}\n\nconst props = defineProps<HtmlDisplayProps>()\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n</script>\n\n<template>\n  <div\n    class=\"gxp-html-display\"\n    :class=\"rootClass\"\n    data-testid=\"html-display\"\n    v-html=\"content\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;EAgBA,IAAM,IAAQ,GAER,IAAU,QACV,EAAM,UAAU,KAAA,KAAa,EAAM,UAAU,OACxC,KAEF,OAAO,EAAM,KAAK,CAC1B,GAEK,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC;yBAIC,EAKE,OAAA;GAJA,OAAK,EAAA,CAAC,oBACE,EAAA,KAAS,CAAA;GACjB,eAAY;GACZ,WAAQ,EAAA"}