@hortiview/shared-components 0.0.7315 → 0.0.7369

package/dist/components/GenericTable/GenericTable.js

@@ -1,92 +1,117 @@
-import { jsx as e, jsxs as T } from "react/jsx-runtime";
-import { Elevation as N, Table as B, TableTopBar as v, Group as g, Padding as j, TypoDisplay as C, TypoSubtitle as D } from "@element/react-components";
-import { useMemo as b, Fragment as I } from "react";
-import { ContextMenu as M } from "../ContextMenu/ContextMenu.js";
-import { s as u } from "../../genericTable.module-BkU2VDKR.js";
-const G = (r, l) => {
-  if (!r)
-    return [];
-  let i = Object.keys(r).map((t) => t);
-  return l.length > 0 && (i = i.sort((t, o) => {
-    const p = l.findIndex((c) => c === t), s = l.findIndex((c) => c === o);
-    return p === -1 ? 1 : s === -1 ? -1 : p - s;
-  })), i;
-}, F = ({
-  data: r = [],
-  hiddenColumns: l = [],
-  order: i = [],
-  cellTemplates: t = void 0,
-  tableActions: o = [],
-  noContentText: p = "No data available",
-  headerTranslation: s = (m) => m,
-  pagination: c = !1,
-  getRowActions: d = void 0,
-  customColumnWidth: h,
-  title: f
+import { jsx as r, jsxs as B } from "react/jsx-runtime";
+import { Elevation as D, Table as G, TableTopBar as u, Group as l, Padding as W, TypoDisplay as k, TypoSubtitle as C } from "@element/react-components";
+import { Fragment as j } from "react";
+import { a as e } from "../../genericTable.module-CXfRg0e4.js";
+import { u as x } from "../../useBreakpoints-BNeVhjjZ.js";
+import "../../alertBanner.module-HneYdVzN.js";
+import "../../iconify.module-C89oaw5b.js";
+import "../../isArray-Ca4KR8TK.js";
+import "../../react-tooltip.min-BzHiZW8k.js";
+import "../../basicHeading.module-BYb8xvuk.js";
+import "../../_baseToString-BNXOi2Mf.js";
+import "../../_equalByTag-DJhSpgVG.js";
+import "../../searchBar.module-9gKyrZRT.js";
+import "../../listArea.module-CGpHPOji.js";
+import "../../verticalDivider.module-C3_GL-fH.js";
+import "../../baseView.module-ve87u_d0.js";
+import "../../BlockView.module-BPlNT5uh.js";
+import "lodash";
+import "../../contextMenu.module-DNQ8d9Aj.js";
+import "../../deleteModal.module-Ds3MDzdl.js";
+import "../../disclaimer.module-BZydt-Q_.js";
+import "../../HashTabView.module-CJX4gxTu.js";
+import "../../HeaderFilter.module-DiBmulr5.js";
+import "../../infoGroup.module-B3E1gCGi.js";
+import "../../bigLoadingSpinner.module-GgbFol8k.js";
+import "../../loadingSpinner.module-CLtqSMWA.js";
+import "../Scrollbar/Scrollbar.js";
+import "react-hook-form";
+import "../../formDatePicker.module-BV3ma_7y.js";
+import "../../formSelect.module-C18N-SsT.js";
+import "../../formText.module-C0by6_DK.js";
+import { useGenerateColumns as _, useGenerateTableData as $ } from "./GenericTableService.js";
+import { GenericCardList as A } from "./Mobile/GenericCardList.js";
+const dr = ({
+  data: m = [],
+  hiddenColumns: p = [],
+  order: f = [],
+  cellTemplates: h = void 0,
+  tableActions: i = [],
+  noContentText: n = "No data available",
+  headerTranslation: g = (o) => o,
+  pagination: y = !1,
+  getRowActions: s = void 0,
+  customColumnWidth: b,
+  title: t,
+  cardTitleColumn: v,
+  cardSubTitleColumn: T
 }) => {
-  const m = b(() => {
-    if (r.length === 0)
-      return [];
-    const a = G(r[0], i).map((n) => {
-      const x = h ? h[n] : void 0;
-      return {
-        id: n,
-        header: s(n),
-        accessor: n,
-        cellTemplate: t ? t[n] : void 0,
-        cellProps: { width: x }
-      };
-    });
-    return d ? [...a, { id: "actions", header: "", accessor: "actions" }] : a;
-  }, [r, t, i, s, d, h]), y = b(() => d ? r.map((a) => {
-    const n = /* @__PURE__ */ e(M, { actions: d(a), iconOrientation: "horizontal" });
-    return { ...a, actions: n };
-  }) : r, [r, d]);
-  return /* @__PURE__ */ e(N, { elevation: 1, className: u.elevation, children: /* @__PURE__ */ e(
-    B,
+  const { isDesktop: o } = x(), a = _({
+    data: m,
+    order: f,
+    cellTemplates: h,
+    headerTranslation: g,
+    getRowActions: s,
+    customColumnWidth: b,
+    cardTitleColumn: v,
+    cardSubTitleColumn: T
+  }), c = $({
+    data: m,
+    getRowActions: s
+  });
+  return o ? /* @__PURE__ */ r(D, { elevation: 1, className: e.elevation, children: /* @__PURE__ */ r(
+    G,
     {
-      className: u.table,
+      className: e.table,
       fullWidth: !0,
       alwaysUseDivTags: !0,
       layout: "standard",
-      hiddenColumns: l,
-      data: y,
-      columns: m,
-      leadingContent: f && o.length === 0 ? /* @__PURE__ */ e(v, { title: f }) : o.length > 0 && /* @__PURE__ */ e(
-        v,
+      hiddenColumns: p,
+      data: c,
+      columns: a,
+      leadingContent: t && i?.length === 0 ? /* @__PURE__ */ r(u, { title: t }) : i?.length > 0 && /* @__PURE__ */ r(
+        u,
         {
-          className: u.topBar,
-          filterBar: /* @__PURE__ */ T(g, { fullWidth: !0, direction: "vertical", gap: "none", children: [
-            f && /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(C, { level: 6, children: f }) }),
-            /* @__PURE__ */ e(
-              g,
+          className: e.topBar,
+          filterBar: /* @__PURE__ */ B(l, { fullWidth: !0, direction: "vertical", gap: "none", children: [
+            t && /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(k, { level: 6, children: t }) }),
+            /* @__PURE__ */ r(
+              l,
               {
-                className: u.filterBar,
+                className: e.filterBar,
                 fullWidth: !0,
                 primaryAlign: "center",
                 secondaryAlign: "center",
-                children: o.map((a, n) => /* @__PURE__ */ e(I, { children: a }, `action_${n}`))
+                children: i.map((d, N) => /* @__PURE__ */ r(j, { children: d }, `action_${N}_${d.key}`))
               }
             )
           ] })
         }
       ),
-      paginated: c,
+      paginated: y,
       sortable: !0,
-      noContentIncludeTable: !!m,
-      noContentMessage: /* @__PURE__ */ e(
-        g,
+      noContentIncludeTable: !!a,
+      noContentMessage: /* @__PURE__ */ r(
+        l,
         {
           fullWidth: !0,
           primaryAlign: "center",
           secondaryAlign: "center",
-          className: u.emptyTable,
-          children: /* @__PURE__ */ e(D, { children: p })
+          className: e.emptyTable,
+          children: /* @__PURE__ */ r(C, { children: n })
         }
       )
     }
-  ) });
+  ) }) : /* @__PURE__ */ r(
+    A,
+    {
+      data: c,
+      columns: a,
+      hiddenColumns: p,
+      noContentText: n
+    }
+  );
 };
 export {
-  F as GenericTable
+  dr as GenericTable
 };

package/dist/components/GenericTable/GenericTable.test.js

@@ -1,71 +1,85 @@
-import { jsx as a, jsxs as u } from "react/jsx-runtime";
-import { a as i, s as e } from "../../react.esm-C3jDj5Fe.js";
-import { GenericTable as c } from "./GenericTable.js";
-import { d as B, t as d, g as t, v as r } from "../../vi.JYQecGiw-BbUbJcT8.js";
-B("GenericTable Test", () => {
-  const m = [];
-  d("render GenericTable with custom no content text", () => {
-    i(/* @__PURE__ */ a(c, { data: m, noContentText: "noContent" })), t(e.getByText("noContent")).toBeInTheDocument();
-  }), d("render GenericTable with data should render headers", () => {
-    i(/* @__PURE__ */ a(c, { data: [{ id: 1, name: "test" }] })), t(e.getByText("id")).toBeInTheDocument(), t(e.getByText("name")).toBeInTheDocument();
-  }), d("render GenericTable with hidden headers", () => {
-    i(/* @__PURE__ */ a(c, { data: [{ id: 1, name: "test" }], hiddenColumns: ["name"] })), t(e.getByText("id")).toBeInTheDocument(), t(e.queryByText("name")).not.toBeInTheDocument();
-  }), d("render GenericTable with custom header translation", () => {
-    i(/* @__PURE__ */ a(c, { data: [{ id: 1, name: "test" }], headerTranslation: (o) => o + ".translated" })), t(e.getByText("id.translated")).toBeInTheDocument(), t(e.getByText("name.translated")).toBeInTheDocument();
-  }), d("render GenericTable with custom cell template", () => {
-    i(
+import { jsx as a, jsxs as B } from "react/jsx-runtime";
+import { a as o, s as e } from "../../react.esm-Dy4VzU4L.js";
+import { a as m } from "../../useBreakpoints-BNeVhjjZ.js";
+import { GenericTable as s } from "./GenericTable.js";
+import { d as h, v as r, t as i, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
+h("GenericTable Test", () => {
+  r.spyOn(m, "useBreakpoints").mockReturnValue({
+    isDesktop: !0,
+    isMobile: !1,
+    isTablet: !1,
+    isDesktopNavbar: !1
+  });
+  const T = [];
+  i("render GenericTable with custom no content text", () => {
+    o(/* @__PURE__ */ a(s, { data: T, noContentText: "noContent" })), t(e.getByText("noContent")).toBeInTheDocument();
+  }), i("render GenericTable with data should render headers", () => {
+    o(/* @__PURE__ */ a(s, { data: [{ id: 1, name: "test" }] })), t(e.getByText("id")).toBeInTheDocument(), t(e.getByText("name")).toBeInTheDocument();
+  }), i("render GenericTable with hidden headers", () => {
+    o(/* @__PURE__ */ a(s, { data: [{ id: 1, name: "test" }], hiddenColumns: ["name"] })), t(e.getByText("id")).toBeInTheDocument(), t(e.queryByText("name")).not.toBeInTheDocument();
+  }), i("render GenericTable with custom header translation", () => {
+    o(/* @__PURE__ */ a(s, { data: [{ id: 1, name: "test" }], headerTranslation: (d) => d + ".translated" })), t(e.getByText("id.translated")).toBeInTheDocument(), t(e.getByText("name.translated")).toBeInTheDocument();
+  }), i("render GenericTable with custom cell template", () => {
+    o(
       /* @__PURE__ */ a(
-        c,
+        s,
         {
           data: [{ id: 1, name: "test" }],
-          cellTemplates: { id: (o) => /* @__PURE__ */ u("div", { children: [
+          cellTemplates: { id: (d) => /* @__PURE__ */ B("div", { children: [
             "label: ",
-            o.row.original.id
+            d.row.original.id
           ] }) }
         }
       )
     ), t(e.getByText("label: 1")).toBeInTheDocument();
-  }), d("render GenericTable with custom table actions", () => {
+  }), i("render GenericTable with custom table actions", () => {
     const n = r.fn();
-    i(/* @__PURE__ */ a(c, { data: [{ id: 1, name: "test" }], tableActions: [
+    o(/* @__PURE__ */ a(s, { data: [{ id: 1, name: "test" }], tableActions: [
       /* @__PURE__ */ a("button", { "data-testid": "testButton", onClick: n, children: "testbutton" }, "test")
     ] })), t(e.getByText("testbutton")).toBeInTheDocument(), e.getByTestId("testButton").click(), t(n).toHaveBeenCalled();
-  }), d("render GenericTable with custom pagination", () => {
-    i(/* @__PURE__ */ a(c, { data: [
+  }), i("render GenericTable with custom pagination", () => {
+    o(/* @__PURE__ */ a(s, { data: [
       { id: 1, name: "test" },
       { id: 2, name: "test2" },
       { id: 3, name: "test3" }
     ], pagination: !0 })), t(e.getByText("1 - 3 of 3")).toBeInTheDocument(), t(e.getByText("last_page")).toBeInTheDocument();
-  }), d("render GenericTable with custom getRowActions", () => {
-    const n = [{ id: 1, name: "test" }], o = r.fn();
-    i(/* @__PURE__ */ a(c, { data: n, getRowActions: (T) => [
+  }), i("render GenericTable with custom getRowActions", () => {
+    const n = [{ id: 1, name: "test" }], d = r.fn();
+    o(/* @__PURE__ */ a(s, { data: n, getRowActions: (u) => [
       {
         primaryText: "primText",
         secondaryText: "secText",
-        onClick: () => o(T.id),
+        onClick: () => d(u.id),
         leadingBlock: "edit"
       }
-    ] })), t(e.getByText("primText")).toBeInTheDocument(), e.getByText("primText").click(), t(o).toHaveBeenCalledWith(1);
-  }), d("render GenericTable with custom order", () => {
-    i(/* @__PURE__ */ a(c, { data: [{ id: 1, name: "test", age: 20 }], order: ["name", "age"] }));
-    const o = e.getByText("id"), s = e.getByText("name"), l = e.getByText("age");
-    t(s).toBeInTheDocument(), t(l).toBeInTheDocument(), t(o).toBeInTheDocument(), t(s.compareDocumentPosition(l)).toBe(4), t(l.compareDocumentPosition(o)).toBe(4);
-  }), d("render GenericTable with custom columnWidth in pixel", () => {
-    i(
-      /* @__PURE__ */ a(c, { data: [{ id: 1, name: "test", age: 20 }], customColumnWidth: { id: 200, name: 200, age: 200 } })
+    ] })), t(e.getByText("primText")).toBeInTheDocument(), e.getByText("primText").click(), t(d).toHaveBeenCalledWith(1);
+  }), i("render GenericTable with custom order", () => {
+    o(/* @__PURE__ */ a(s, { data: [{ id: 1, name: "test", age: 20 }], order: ["name", "age"] }));
+    const d = e.getByText("id"), c = e.getByText("name"), l = e.getByText("age");
+    t(c).toBeInTheDocument(), t(l).toBeInTheDocument(), t(d).toBeInTheDocument(), t(c.compareDocumentPosition(l)).toBe(4), t(l.compareDocumentPosition(d)).toBe(4);
+  }), i("render GenericTable with custom columnWidth in pixel", () => {
+    o(
+      /* @__PURE__ */ a(s, { data: [{ id: 1, name: "test", age: 20 }], customColumnWidth: { id: 200, name: 200, age: 200 } })
     );
-    const s = e.getAllByRole("cell")[0].getAttribute("width");
-    t(s).toBe("200");
-  }), d("render GenericTable with custom columnWidth in percent", () => {
-    i(/* @__PURE__ */ a(c, { data: [{ id: 1, name: "test" }], customColumnWidth: { id: "50%", name: "50%" } }));
-    const s = e.getAllByRole("cell")[0].getAttribute("width");
-    t(s).toBe("50%");
-  }), d("render GenericTable with title", () => {
-    i(/* @__PURE__ */ a(c, { data: [{ id: 1, name: "test" }], title: "test-title" })), t(e.getByText("test-title")).toBeInTheDocument();
-  }), d("render GenericTable with title and table actions", () => {
+    const c = e.getAllByRole("cell")[0].getAttribute("width");
+    t(c).toBe("200");
+  }), i("render GenericTable with custom columnWidth in percent", () => {
+    o(/* @__PURE__ */ a(s, { data: [{ id: 1, name: "test" }], customColumnWidth: { id: "50%", name: "50%" } }));
+    const c = e.getAllByRole("cell")[0].getAttribute("width");
+    t(c).toBe("50%");
+  }), i("render GenericTable with title", () => {
+    o(/* @__PURE__ */ a(s, { data: [{ id: 1, name: "test" }], title: "test-title" })), t(e.getByText("test-title")).toBeInTheDocument();
+  }), i("render GenericTable with title and table actions", () => {
     const n = r.fn();
-    i(/* @__PURE__ */ a(c, { data: [{ id: 1, name: "test" }], title: "test-title", tableActions: [
+    o(/* @__PURE__ */ a(s, { data: [{ id: 1, name: "test" }], title: "test-title", tableActions: [
       /* @__PURE__ */ a("button", { "data-testid": "testButton", onClick: n, children: "test-button" }, "test")
     ] })), t(e.getByText("test-title")).toBeInTheDocument(), t(e.getByText("test-button")).toBeInTheDocument(), e.getByTestId("testButton").click(), t(n).toHaveBeenCalled();
+  }), i("render GenericCardList instead of Table when not is desktop", () => {
+    r.spyOn(m, "useBreakpoints").mockReturnValue({
+      isDesktop: !1,
+      isMobile: !0,
+      isTablet: !1,
+      isDesktopNavbar: !1
+    }), o(/* @__PURE__ */ a(s, { data: [{ id: 1, name: "test", age: 20 }], title: "test-title", cardTitleColumn: "name" })), t(e.getAllByTestId("card-title")).toHaveLength(1), t(e.getAllByTestId("card-body")).toHaveLength(1), t(e.getAllByTestId("row")).toHaveLength(2);
   });
 });

package/dist/components/GenericTable/GenericTableService.d.ts

@@ -0,0 +1,19 @@
+import { GenericColumn, TableLayoutProps } from '../../types/GenericTable';
+/**
+ * Generate columns for the table
+ * @param data data to be used to generate the columns
+ * @param order order of the columns
+ * @param cellTemplates cell templates to be used
+ * @param headerTranslation translation function for the headers
+ * @param getRowActions function that will be called to get the actions for a row to be displayed as actions in a context menu
+ * @param customColumnWidth custom column width
+ * @returns
+ */
+export declare const useGenerateColumns: <T>({ data, order, cellTemplates, headerTranslation, getRowActions, customColumnWidth, cardTitleColumn, cardSubTitleColumn, }: TableLayoutProps<T>) => GenericColumn<T>[];
+/**
+ * Adds row actions to the data for the table
+ * @param data data to be used to generate the columns
+ * @param getRowActions function that will be called to get the actions for a row to be displayed as actions in a context menu
+ * @returns
+ */
+export declare const useGenerateTableData: <T>({ data, getRowActions, }: TableLayoutProps<T>) => object[];

package/dist/components/GenericTable/GenericTableService.js

@@ -0,0 +1,59 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useMemo as a } from "react";
+import { ContextMenu as x } from "../ContextMenu/ContextMenu.js";
+const j = ({
+  data: r = [],
+  order: n = [],
+  cellTemplates: e = void 0,
+  headerTranslation: t = (c) => c,
+  getRowActions: f = void 0,
+  customColumnWidth: o,
+  cardTitleColumn: u,
+  cardSubTitleColumn: s
+}) => a(() => {
+  if (r?.length === 0)
+    return [];
+  const c = v(r[0], n).map((i) => {
+    const p = o ? o[i] : void 0;
+    return {
+      id: i,
+      header: t(i),
+      accessor: i,
+      cellTemplate: e ? e[i] : void 0,
+      cellProps: p ? { width: p } : void 0,
+      asCardTitle: i === u,
+      asCardSubtitle: i === s
+    };
+  });
+  return f ? [
+    ...c,
+    { id: "actions", header: "", accessor: "actions" }
+  ] : c;
+}, [
+  r,
+  e,
+  n,
+  t,
+  f,
+  o,
+  u,
+  s
+]), l = ({
+  data: r = [],
+  getRowActions: n = void 0
+}) => a(() => n ? r.map((e) => {
+  const t = /* @__PURE__ */ d(x, { actions: n(e), iconOrientation: "horizontal" });
+  return { ...e, actions: t };
+}) : r, [r, n]), v = (r, n) => {
+  if (!r)
+    return [];
+  let e = Object.keys(r).map((t) => t);
+  return n?.length > 0 && (e = e.sort((t, f) => {
+    const o = n.findIndex((s) => s === t), u = n.findIndex((s) => s === f);
+    return o === -1 ? 1 : u === -1 ? -1 : o - u;
+  })), e;
+};
+export {
+  j as useGenerateColumns,
+  l as useGenerateTableData
+};

package/dist/components/GenericTable/Mobile/GenericCard.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { GenericColumn } from '../../../types/GenericTable';
+type GenericCardProps<T> = {
+    item: T & {
+        actions?: JSX.Element;
+    };
+    columns: GenericColumn<T>[];
+    hiddenColumns?: (keyof T)[];
+};
+/**
+ * Renders a generic card component.
+ *
+ * @template T - The type of the item being rendered.
+ * @param item - The item to be rendered in the card.
+ * @param columns - The columns to be displayed in the card.
+ * @returns {JSX.Element} - The rendered GenericCard component.
+ */
+export declare const GenericCard: <T>({ item, columns, hiddenColumns }: GenericCardProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/GenericTable/Mobile/GenericCard.js

@@ -0,0 +1,68 @@
+import { jsx as e, jsxs as s, Fragment as T } from "react/jsx-runtime";
+import { Card as g, CardContent as y, CardBody as x, Grid as v, GridRow as u, GridCol as n, TypoSubtitle as f, CardTitle as N, CardDivider as b } from "@element/react-components";
+import { useMemo as k } from "react";
+import { OverflowTooltip as c } from "../../OverflowTooltip/OverflowTooltip.js";
+import { s as d } from "../../../genericCard.module-DzqcufuN.js";
+const h = {
+  desktopCol: 6,
+  phoneCol: 2,
+  tabletCol: 4
+}, j = ({ item: t, columns: r, hiddenColumns: a }) => {
+  const l = r.find((i) => i.asCardTitle), p = r.find((i) => i.asCardSubtitle), C = k(
+    () => r.filter(
+      (i) => !i.asCardTitle && !i.asCardSubtitle && i.id !== "actions"
+    ),
+    [r]
+  );
+  return /* @__PURE__ */ e(g, { variant: "raised", children: /* @__PURE__ */ s(y, { className: d.cardContent, children: [
+    /* @__PURE__ */ e(w, { item: t, titleColumn: l, subTitleColumn: p }),
+    /* @__PURE__ */ e(x, { className: d.cardBody, "data-testid": "card-body", children: /* @__PURE__ */ e(v, { fullHeight: !0, fullWidth: !0, variant: "none", children: C.map((i) => a?.includes(i.id) ? null : /* @__PURE__ */ s(u, { className: d.row, "data-testid": "row", children: [
+      /* @__PURE__ */ e(n, { horizontalAlign: "right", ...h, children: /* @__PURE__ */ s(
+        f,
+        {
+          level: 2,
+          themeColor: "text-secondary-on-background",
+          className: d.font,
+          children: [
+            i.header,
+            ":"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e(n, { horizontalAlign: "left", ...h, children: /* @__PURE__ */ e(o, { column: i, item: t }) })
+    ] }, i.id)) }) })
+  ] }) });
+}, w = ({ item: t, titleColumn: r, subTitleColumn: a }) => {
+  const l = t.actions;
+  return !r && !a && !l ? null : /* @__PURE__ */ s(T, { children: [
+    /* @__PURE__ */ e(
+      N,
+      {
+        "data-testid": "card-title",
+        className: d.cardTitle,
+        primaryText: r !== void 0 && /* @__PURE__ */ e(o, { column: r, item: t, isTitle: !0 }),
+        secondaryText: a !== void 0 && /* @__PURE__ */ e(o, { column: a, item: t, isTitle: !0 }),
+        trailingBlock: l,
+        trailingBlockType: "title-actions"
+      }
+    ),
+    /* @__PURE__ */ e(b, {})
+  ] });
+}, o = ({ item: t, column: r, isTitle: a = !1 }) => r.cellTemplate ? r.cellTemplate({ row: { original: t } }) : a ? /* @__PURE__ */ e(
+  c,
+  {
+    id: `tip_${r.id}_${t[r.accessor]}`,
+    text: t[r.accessor],
+    children: /* @__PURE__ */ e("span", { className: d.title, children: t[r.accessor] })
+  }
+) : /* @__PURE__ */ e(
+  c,
+  {
+    id: `tip_${r.id}_${t[r.accessor]}`,
+    text: t[r.accessor],
+    children: /* @__PURE__ */ e(f, { level: 2, themeColor: "text-primary-on-background", className: d.font, children: t[r.accessor] })
+  }
+);
+export {
+  j as GenericCard
+};

package/dist/components/GenericTable/Mobile/GenericCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/GenericTable/Mobile/GenericCard.test.js

@@ -0,0 +1,76 @@
+import { jsx as n } from "react/jsx-runtime";
+import { a as c, s as o } from "../../../react.esm-Dy4VzU4L.js";
+import { GenericCard as i } from "./GenericCard.js";
+import { d as m, t as s, g as e } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+m("GenericCard", () => {
+  const d = {
+    id: 1,
+    name: "John Doe",
+    age: 30,
+    gender: "male",
+    actions: /* @__PURE__ */ n("button", { children: "View" })
+  }, l = [
+    { id: "name", header: "Name", accessor: "name", asCardTitle: !0 },
+    { id: "age", header: "Age", accessor: "age", asCardSubtitle: !0 },
+    { id: "id", header: "Id", accessor: "id" },
+    { id: "gender", header: "Gender", accessor: "gender" }
+  ];
+  s("renders card title with correct primary text", () => {
+    c(/* @__PURE__ */ n(i, { item: d, columns: l }));
+    const t = o.getByTestId("card-title");
+    e(t).toHaveTextContent("John Doe");
+  }), s("renders card title with correct secondary text", () => {
+    c(/* @__PURE__ */ n(i, { item: d, columns: l }));
+    const r = o.getByTestId("card-title").querySelector(".lmnt-card-title__secondaryText");
+    e(r).toHaveTextContent("30");
+  }), s("renders actions in trailing block", () => {
+    c(/* @__PURE__ */ n(i, { item: d, columns: l }));
+    const r = o.getByTestId("card-title").querySelector(".lmnt-card-title__trailingBlock");
+    e(r).toContainHTML("<button>View</button>");
+  }), s("renders card body with correct number of rows", () => {
+    c(/* @__PURE__ */ n(i, { item: d, columns: l }));
+    const t = o.getAllByTestId("row");
+    e(t).toHaveLength(2);
+  }), s("renders correct header and value in each row", () => {
+    c(/* @__PURE__ */ n(i, { item: d, columns: l })), e(o.getByText("Id:")).toBeInTheDocument(), e(o.getByText("1")).toBeInTheDocument(), e(o.getByText("Gender:")).toBeInTheDocument(), e(o.getByText("male")).toBeInTheDocument();
+  }), s("does not render title, subtitle or actions columns in body", () => {
+    c(/* @__PURE__ */ n(i, { item: d, columns: l }));
+    const t = o.getByTestId("card-body");
+    e(t).not.toHaveTextContent("Name:"), e(t).not.toHaveTextContent("John Doe"), e(t).not.toHaveTextContent("Age:"), e(t).not.toHaveTextContent("30"), e(t).not.toContainHTML("<button>View</button>");
+  }), s("renders cell template if provided", () => {
+    const t = [
+      ...l.filter((a) => a.id !== "name"),
+      {
+        id: "name",
+        header: "Name",
+        accessor: "name",
+        asCardTitle: !0,
+        cellTemplate: ({ row: a }) => /* @__PURE__ */ n("div", { children: a.original.name.toUpperCase() })
+      }
+    ];
+    c(/* @__PURE__ */ n(i, { item: d, columns: t }));
+    const r = o.getByTestId("card-title");
+    e(r).toHaveTextContent("JOHN DOE");
+  }), s("renders no title cells if no title/subtitle column is provided, render them in body instead", () => {
+    c(/* @__PURE__ */ n(i, { item: d, columns: [
+      { id: "name", header: "Name", accessor: "name" },
+      { id: "age", header: "Age", accessor: "age" },
+      { id: "id", header: "Id", accessor: "id" },
+      { id: "gender", header: "Gender", accessor: "gender" }
+    ] }));
+    const r = o.queryByTestId("card-title");
+    e(r).not.toHaveTextContent("John Doe"), e(r).not.toHaveTextContent("30");
+    const a = o.getByTestId("card-body");
+    e(a).toHaveTextContent("Name:"), e(a).toHaveTextContent("John Doe"), e(a).toHaveTextContent("Age:"), e(a).toHaveTextContent("30");
+  }), s("renders no card title cells if no title/subtitle/action column is provided", () => {
+    const t = [
+      { id: "name", header: "Name", accessor: "name" },
+      { id: "age", header: "Age", accessor: "age" },
+      { id: "id", header: "Id", accessor: "id" },
+      { id: "gender", header: "Gender", accessor: "gender" }
+    ], r = { ...d, actions: void 0 };
+    c(/* @__PURE__ */ n(i, { item: r, columns: t }));
+    const a = o.queryByTestId("card-title");
+    e(a).not.toBeInTheDocument();
+  });
+});

package/dist/components/GenericTable/Mobile/GenericCardList.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { GenericColumn, TableLayoutProps } from '../../../types/GenericTable';
+type GenericCardListProps<T> = Pick<TableLayoutProps<T>, 'hiddenColumns' | 'noContentText' | 'data'> & {
+    /**
+     * The columns to be displayed in the card.
+     */
+    columns: GenericColumn<T>[];
+};
+/**
+ * Renders a list of generic cards based on the provided data.
+ *
+ * @template T - The type of data for each card.
+ * @param columns - The columns to be displayed in the card.
+ * @param data - The data to be displayed in the cards.
+ * @param hiddenColumns - The columns to be hidden in the card.
+ * @param order - The order of the columns to be displayed in the card.
+ * @param noContentText - The text to be displayed when there is no data.
+ *
+ * @returns {JSX.Element} The rendered list of generic cards.
+ */
+export declare const GenericCardList: <T>({ columns, data, hiddenColumns, noContentText, }: GenericCardListProps<T>) => JSX.Element;
+export {};

package/dist/components/GenericTable/Mobile/GenericCardList.js

@@ -0,0 +1,20 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Group as l } from "@element/react-components";
+import { GenericCard as m } from "./GenericCard.js";
+const f = ({
+  columns: i,
+  data: e,
+  hiddenColumns: n = [],
+  noContentText: t
+}) => e?.length === 0 ? /* @__PURE__ */ r("div", { children: t }) : /* @__PURE__ */ r(l, { fullWidth: !0, direction: "vertical", primaryAlign: "center", secondaryAlign: "center", children: e?.map((o, c) => /* @__PURE__ */ r(
+  m,
+  {
+    item: o,
+    columns: i,
+    hiddenColumns: n
+  },
+  c
+)) });
+export {
+  f as GenericCardList
+};

package/dist/components/GenericTable/Mobile/GenericCardList.test.d.ts

@@ -0,0 +1 @@
+export {};