urfu-ui-kit-react 2.1.2 → 2.1.4

package/dist/components/Table/TableMobileCard.js

@@ -0,0 +1,215 @@
+import { jsx as a, Fragment as j, jsxs as c } from "react/jsx-runtime";
+import { useState as L, useId as O, useRef as R, useEffect as H, useLayoutEffect as D } from "react";
+import { Icon$u as E } from "../Icon/Icon.js";
+const W = ({
+  label: f,
+  children: s,
+  lines: n = 1,
+  valueColor: m,
+  labelColor: _,
+  gridSpan: d,
+  gridRowSpan: g
+}) => {
+  const [o, y] = L(!1), [N, C] = L(!1), u = R(null), w = O(), p = R(null);
+  return D(() => {
+    var h;
+    const l = u.current, i = p.current;
+    if (p.current = null, !l || i == null) return;
+    if (typeof l.animate != "function" || (h = window.matchMedia) != null && h.call(window, "(prefers-reduced-motion: reduce)").matches) {
+      l.classList.toggle("u-table-mobile-card__value--clamped", !o), l.style.webkitLineClamp = o ? "" : String(n);
+      return;
+    }
+    l.classList.remove("u-table-mobile-card__value--clamped"), l.style.webkitLineClamp = "";
+    let t = l.getBoundingClientRect().height;
+    o || (l.classList.add("u-table-mobile-card__value--clamped"), l.style.webkitLineClamp = String(n), t = l.getBoundingClientRect().height, l.classList.remove("u-table-mobile-card__value--clamped"), l.style.webkitLineClamp = ""), l.style.height = t + "px", l.style.overflow = "hidden";
+    const r = l.animate([{ height: i + "px" }, { height: t + "px" }], { duration: 220, easing: "ease" }), b = () => {
+      l.style.height = "", l.style.overflow = "", l.classList.toggle("u-table-mobile-card__value--clamped", !o), l.style.webkitLineClamp = o ? "" : String(n);
+    };
+    return r.onfinish = b, () => {
+      r.onfinish = null, r.cancel(), b();
+    };
+  }, [o, s, n]), H(() => {
+    const l = u.current;
+    if (!l) return;
+    const i = () => {
+      const r = Number.parseFloat(getComputedStyle(l).lineHeight), b = Number.isFinite(r) ? r * n : l.clientHeight;
+      C(l.scrollHeight > b + 1);
+    };
+    if (i(), typeof ResizeObserver > "u") return;
+    const t = new ResizeObserver(i);
+    return t.observe(l), () => t.disconnect();
+  }, [s, n, o]), /* @__PURE__ */ c("div", { className: `u-table-mobile-card__row u-table-mobile-card__row--collapsible${d === "full" ? " u-table-mobile-card__row--span-full" : d === 2 ? " u-table-mobile-card__row--span2" : d === "narrow" ? " u-table-mobile-card__row--span-narrow" : ""}${g === 2 ? " u-table-mobile-card__row--rowspan2" : ""}`, children: [
+    f != null && /* @__PURE__ */ a("span", { className: "u-table-mobile-card__label", style: _ ? { color: _ } : void 0, children: f }),
+    /* @__PURE__ */ a(
+      "span",
+      {
+        ref: u,
+        id: w,
+        className: "u-table-mobile-card__value" + (o ? "" : " u-table-mobile-card__value--clamped"),
+        style: { ...o ? {} : { WebkitLineClamp: n }, ...m ? { color: m } : {} },
+        children: s
+      }
+    ),
+    (N || o) && /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        className: "u-table-mobile-card__value-toggle",
+        onClick: () => {
+          var l;
+          p.current = ((l = u.current) == null ? void 0 : l.getBoundingClientRect().height) ?? null, y((i) => !i);
+        },
+        "aria-expanded": o,
+        "aria-controls": w,
+        children: o ? "Скрыть" : "Показать больше"
+      }
+    )
+  ] });
+}, J = ({
+  title: f,
+  titleLabel: s,
+  titleHideLabel: n,
+  titleColor: m,
+  titleLabelColor: _,
+  subtitle: d,
+  subtitleColor: g,
+  actions: o,
+  inline: y,
+  body: N,
+  details: C,
+  flat: u,
+  inset: w,
+  density: p = "default",
+  divider: l,
+  showLabels: i = !0,
+  columns: t = 1
+}) => {
+  const [r, b] = L(!1), h = O(), $ = R(null);
+  H(() => {
+    $.current && ($.current.inert = !r);
+  }, [r]);
+  const S = y.filter((e) => e.value != null && e.value !== ""), x = N.filter((e) => e.value != null && e.value !== ""), k = C.filter((e) => e.value != null && e.value !== ""), F = k.length > 0, z = x.length > 0, B = t === 3 ? " u-table-mobile-card__fields--cols3" : t === 2 ? " u-table-mobile-card__fields--cols2" : "", M = /* @__PURE__ */ a(j, { children: /* @__PURE__ */ c("div", { className: "u-table-mobile-card__head-main", children: [
+    /* @__PURE__ */ c("span", { className: "u-table-mobile-card__primary", children: [
+      i && !n && s != null && s !== "" && /* @__PURE__ */ a(
+        "span",
+        {
+          className: "u-table-mobile-card__title-label",
+          style: _ ? { color: _ } : void 0,
+          children: s
+        }
+      ),
+      /* @__PURE__ */ a(
+        "span",
+        {
+          className: "u-table-mobile-card__title",
+          style: m ? { color: m } : void 0,
+          children: f
+        }
+      ),
+      d != null && d !== "" && /* @__PURE__ */ a(
+        "span",
+        {
+          className: "u-table-mobile-card__subtitle",
+          style: g ? { color: g } : void 0,
+          children: d
+        }
+      )
+    ] }),
+    S.length > 0 && /* @__PURE__ */ a("span", { className: "u-table-mobile-card__inline-group", children: S.map(
+      (e, v) => i && !e.hideLabel ? /* @__PURE__ */ c("span", { className: "u-table-mobile-card__inline-field", children: [
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: "u-table-mobile-card__inline-label",
+            style: e.labelColor ? { color: e.labelColor } : void 0,
+            children: e.label
+          }
+        ),
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: "u-table-mobile-card__inline",
+            style: e.valueColor ? { color: e.valueColor } : void 0,
+            children: e.value
+          }
+        )
+      ] }, v) : /* @__PURE__ */ a(
+        "span",
+        {
+          className: "u-table-mobile-card__inline",
+          style: e.valueColor ? { color: e.valueColor } : void 0,
+          children: e.value
+        },
+        v
+      )
+    ) })
+  ] }) }), I = (e, v) => e.expandLines ? /* @__PURE__ */ a(
+    W,
+    {
+      label: i && !e.hideLabel ? e.label : null,
+      lines: e.expandLines,
+      valueColor: e.valueColor,
+      labelColor: e.labelColor,
+      gridSpan: e.gridSpan,
+      gridRowSpan: e.gridRowSpan,
+      children: e.value
+    },
+    v
+  ) : /* @__PURE__ */ c("div", { className: `u-table-mobile-card__row${e.gridSpan === "full" ? " u-table-mobile-card__row--span-full" : e.gridSpan === 2 ? " u-table-mobile-card__row--span2" : e.gridSpan === "narrow" ? " u-table-mobile-card__row--span-narrow" : ""}${e.gridRowSpan === 2 ? " u-table-mobile-card__row--rowspan2" : ""}`, children: [
+    i && !e.hideLabel && /* @__PURE__ */ a(
+      "span",
+      {
+        className: "u-table-mobile-card__label",
+        style: e.labelColor ? { color: e.labelColor } : void 0,
+        children: e.label
+      }
+    ),
+    /* @__PURE__ */ a(
+      "span",
+      {
+        className: "u-table-mobile-card__value",
+        style: e.valueColor ? { color: e.valueColor } : void 0,
+        children: e.value
+      }
+    )
+  ] }, v);
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: `u-table-mobile-card u-table-mobile-card--list${u ? " u-table-mobile-card--flat" : ""}${l ? " u-table-mobile-card--divider" : ""}${t === 3 ? " u-table-mobile-card--cols3" : ""}${w ? " u-table-mobile-card--inset" : ""}${p === "compact" ? " u-table-mobile-card--compact" : ""}`,
+      children: [
+        /* @__PURE__ */ c("div", { className: "u-table-mobile-card__head", children: [
+          M,
+          o && /* @__PURE__ */ a("div", { className: "u-table-mobile-card__actions", children: o })
+        ] }),
+        z && /* @__PURE__ */ a("div", { className: `u-table-mobile-card__fields u-table-mobile-card__fields--body${B}`, children: x.map(I) }),
+        F && /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            className: "u-table-mobile-card__details-toggle",
+            "aria-label": r ? "Свернуть" : "Подробнее",
+            onClick: () => b((e) => !e),
+            "aria-expanded": r,
+            "aria-controls": h,
+            children: [
+              r ? "Свернуть" : "Подробнее",
+              /* @__PURE__ */ a(E, { name: "up", size: "14px", className: `u-table-mobile-card__chevron${r ? " u-table-mobile-card__chevron--open" : ""}` })
+            ]
+          }
+        ),
+        F && /* @__PURE__ */ a(
+          "div",
+          {
+            id: h,
+            ref: $,
+            "aria-hidden": !r,
+            className: `u-table-mobile-card__details-wrap${r ? " u-table-mobile-card__details-wrap--open" : ""}`,
+            children: /* @__PURE__ */ a("div", { className: `u-table-mobile-card__details${B}`, children: k.map(I) })
+          }
+        )
+      ]
+    }
+  );
+};
+export { J as MobileCard$u, W as MobileCollapsibleField$u };

package/dist/components/Table/TableMobileFilters.js

@@ -0,0 +1,56 @@
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { Button$u as m } from "../Button/Button.js";
+import { Select$u as y } from "../Select/Select.js";
+/* empty css                    */
+const h = {
+  asc: { icon: "up-arrow", iconLabel: "По возрастанию" },
+  desc: { icon: "down-arrow", iconLabel: "По убыванию" }
+};
+function N({ options: a, renderFilter: b, onReset: s, sortLabel: t }) {
+  const [n, f] = d(!1), [v, o] = d(() => {
+    var e;
+    return (e = a[0]) == null ? void 0 : e.key;
+  }), l = a.find((e) => e.key === v) ?? a[0], r = a.filter((e) => e.active).length, u = a.map((e) => ({
+    value: e.key,
+    label: e.label + (e.active ? e.selectedCount === void 0 ? " · выбор по условию" : ` · выбрано: ${e.selectedCount}` : ""),
+    ...e.sort ? h[e.sort] : {}
+  }));
+  return a.length ? /* @__PURE__ */ c("div", { className: "u-table-mobile-filters", children: [
+    /* @__PURE__ */ c(
+      m,
+      {
+        type: "button",
+        variant: "outline",
+        size: "small",
+        className: "u-table-mobile-filters__toggle",
+        disabled: a.every((e) => e.disabled) && !r && !t,
+        icon: n ? "up" : "down",
+        "aria-expanded": n,
+        onClick: () => f((e) => !e),
+        children: [
+          "Фильтры",
+          r ? ": " + r : ""
+        ]
+      }
+    ),
+    n ? /* @__PURE__ */ c("div", { className: "u-table-mobile-filters__panel", role: "region", "aria-label": "Фильтры таблицы", children: [
+      /* @__PURE__ */ i(
+        y,
+        {
+          title: "Столбец",
+          "aria-label": "Столбец для фильтрации",
+          options: u,
+          value: u.find((e) => e.value === (l == null ? void 0 : l.key)) ?? null,
+          onChange: (e) => {
+            typeof (e == null ? void 0 : e.value) == "string" && o(e.value);
+          }
+        }
+      ),
+      /* @__PURE__ */ i("div", { children: l ? b(l.key) : null }, l == null ? void 0 : l.key),
+      t ? /* @__PURE__ */ i("p", { className: "u-table-mobile-filters__sort-label", children: t }) : null,
+      s && (r || t) ? /* @__PURE__ */ i(m, { className: "u-table-mobile-filters__reset", variant: "text", onClick: s, children: "Сбросить все фильтры и сортировку" }) : null
+    ] }) : null
+  ] }) : null;
+}
+export { N as TableMobileFilters$u };

package/dist/components/Table/TableMobileView.js

@@ -0,0 +1,316 @@
+import { jsxs as n, Fragment as ce, jsx as a } from "react/jsx-runtime";
+import { useRef as X, useState as Y, useEffect as Z } from "react";
+import { TableMobileFilters$u as pe } from "./TableMobileFilters.js";
+import { Icon$u as w } from "../Icon/Icon.js";
+import { Select$u as fe } from "../Select/Select.js";
+import { Preloader$u as he } from "../Preloader/Preloader.js";
+import { Tooltip$u as ve } from "../Tooltip/Tooltip.js";
+import { MobileCard$u as _e, MobileCollapsibleField$u as ge } from "./TableMobileCard.js";
+const ye = ({
+  filteredColumns: m,
+  pagedData: P,
+  filteredDataLength: D,
+  dataLength: I,
+  initialSkeletonRows: F = 10,
+  isCardMode: H,
+  isLoading: z,
+  isLoadingPreloader: A,
+  messageForEmptyTable: M,
+  effectiveSortField: u,
+  effectiveSortDir: L,
+  applySort: ee,
+  setSortField: N,
+  toggleSortDir: C,
+  mobileSortBar: le,
+  mobileSortLabel: c = "Сортировка",
+  mobileSortStyle: p = "select",
+  renderMobileToolbar: B,
+  mobileFilterOptions: f,
+  renderMobileFilter: T,
+  onMobileFiltersReset: ae,
+  mobileFilterSortLabel: ie,
+  renderMobileCard: W,
+  mobileCardCollapsible: oe,
+  mobileCardLabels: j = !0,
+  mobileMaxVisible: h,
+  mobileCardColumns: v = 1,
+  mobileCardGap: O,
+  mobileCardDivider: S,
+  mobileCardFlat: x,
+  mobileCardInset: q,
+  mobileCardDensity: J = "default"
+}) => {
+  const K = `${q ? " u-table-mobile-card--inset" : ""}${J === "compact" ? " u-table-mobile-card--compact" : ""}`, E = X(null), [Q, re] = Y({ atStart: !0, atEnd: !0 }), R = () => {
+    const l = E.current;
+    if (!l) return;
+    const i = l.scrollWidth > l.clientWidth + 1;
+    re({
+      atStart: !i || l.scrollLeft <= 1,
+      atEnd: !i || l.scrollLeft + l.clientWidth >= l.scrollWidth - 1
+    });
+  };
+  Z(() => {
+    if (!H || p !== "segments") return;
+    const l = E.current;
+    if (!l || typeof ResizeObserver > "u") return;
+    R();
+    const i = new ResizeObserver(R);
+    return i.observe(l), () => i.disconnect();
+  }, [H, p, I]);
+  const y = X(null), [_, $] = Y(!1);
+  Z(() => {
+    if (!_) return;
+    const l = (i) => {
+      y.current && !y.current.contains(i.target) && $(!1);
+    };
+    return document.addEventListener("mousedown", l), () => document.removeEventListener("mousedown", l);
+  }, [_]);
+  const b = (l, i, r) => l.renderMobile ? l.renderMobile(i, r) : l.render ? l.render(i, r) : i[l.field], o = m.find((l) => l.mobilePrimary) ?? m[0], g = m.filter(
+    (l) => l !== o && l.mobileHidden !== !0
+  ), d = g.find((l) => l.mobileSubtitle), U = g.filter((l) => l.mobileActions), k = g.filter((l) => l !== d && !l.mobileActions), te = k.filter((l) => l.mobileInline), ne = k.filter(
+    (l) => l.mobileSecondary && !l.mobileInline
+  ), G = k.filter(
+    (l) => !l.mobileInline && !l.mobileSecondary
+  ), se = h != null ? G.slice(0, Math.max(0, h)) : G, be = [
+    ...ne,
+    ...h != null ? G.slice(Math.max(0, h)) : []
+  ], de = () => {
+    if (B)
+      return /* @__PURE__ */ a("div", { className: "u-table-mobile-toolbar", children: B() });
+    if (f != null && f.length && T)
+      return /* @__PURE__ */ a("div", { className: "u-table-mobile-toolbar", children: /* @__PURE__ */ a(
+        pe,
+        {
+          options: f,
+          renderFilter: T,
+          onReset: ae,
+          sortLabel: ie
+        }
+      ) });
+    const l = m.filter((e) => e.sortOn);
+    if (!(le ?? l.length > 0) || l.length === 0) return null;
+    const r = l.find((e) => e.field === u);
+    return p === "menu" ? /* @__PURE__ */ n("div", { className: "u-table-mobile-sortmenu", ref: y, children: [
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: "u-table-mobile-sortmenu__trigger",
+          onClick: () => $((e) => !e),
+          "aria-expanded": _,
+          "aria-haspopup": "listbox",
+          children: [
+            /* @__PURE__ */ a(w, { name: "sorting", size: "16px", color: "#1E4391" }),
+            /* @__PURE__ */ a("span", { className: "u-table-mobile-sortmenu__label", children: r ? r.mobileLabel ?? r.title ?? r.field : c })
+          ]
+        }
+      ),
+      _ && /* @__PURE__ */ a("div", { className: "u-table-mobile-sortmenu__list", role: "listbox", children: l.map((e) => {
+        const t = e.field === u;
+        return /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            className: `u-table-mobile-sortmenu__option${t ? " u-table-mobile-sortmenu__option--active" : ""}`,
+            "aria-selected": t,
+            onClick: () => {
+              t ? C() : (N(String(e.field)), $(!1));
+            },
+            children: [
+              /* @__PURE__ */ a("span", { children: e.mobileLabel ?? e.title ?? e.field }),
+              t && /* @__PURE__ */ a(
+                w,
+                {
+                  name: L === "desc" ? "down-arrow" : "up-arrow",
+                  size: "12px",
+                  color: "#1E4391"
+                }
+              )
+            ]
+          },
+          e.field
+        );
+      }) })
+    ] }) : p === "segments" ? /* @__PURE__ */ a(
+      "div",
+      {
+        ref: E,
+        onScroll: R,
+        className: `u-table-mobile-sortseg${Q.atStart ? "" : " u-table-mobile-sortseg--clip-start"}${Q.atEnd ? "" : " u-table-mobile-sortseg--clip-end"}`,
+        role: "group",
+        "aria-label": c,
+        children: l.map((e) => {
+          const t = e.field === u, s = e.mobileLabel ?? e.title ?? e.field;
+          return /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              className: `u-table-mobile-sortseg__item${t ? " u-table-mobile-sortseg__item--active" : ""}`,
+              "aria-pressed": t,
+              onClick: () => t ? C() : N(String(e.field)),
+              children: [
+                /* @__PURE__ */ a(
+                  "span",
+                  {
+                    className: "u-table-mobile-sortseg__label",
+                    "data-label": s,
+                    children: s
+                  }
+                ),
+                t && /* @__PURE__ */ a(
+                  w,
+                  {
+                    name: L === "desc" ? "down-arrow" : "up-arrow",
+                    size: "10px",
+                    color: "#1E4391",
+                    className: "u-table-mobile-sortseg__arrow"
+                  }
+                )
+              ]
+            },
+            e.field
+          );
+        })
+      }
+    ) : /* @__PURE__ */ n("div", { className: "u-table-mobile-toolbar u-table-mobile-toolbar--sort", children: [
+      c && /* @__PURE__ */ a("span", { className: "u-table-mobile-toolbar__label", children: c }),
+      /* @__PURE__ */ n("div", { className: "u-table-mobile-toolbar__row", children: [
+        /* @__PURE__ */ a(
+          fe,
+          {
+            isClearable: !0,
+            placeholder: "Без сортировки",
+            options: l.map((e) => ({
+              value: e.field,
+              label: e.mobileLabel ?? e.title ?? e.field
+            })),
+            value: r ? { value: r.field, label: r.mobileLabel ?? r.title ?? r.field } : void 0,
+            onChange: (e) => e != null && e.value ? N(String(e.value)) : ee(void 0, void 0),
+            styleSelectContainer: { alignItems: "center" }
+          }
+        ),
+        u && /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            className: "u-table-mobile-sortdir",
+            onClick: C,
+            "aria-label": "Направление сортировки",
+            children: /* @__PURE__ */ a(
+              w,
+              {
+                name: L === "desc" ? "down-arrow" : "up-arrow",
+                size: "20px",
+                color: "#1E4391"
+              }
+            )
+          }
+        )
+      ] })
+    ] });
+  }, me = (l, i) => {
+    if (W) return W(l, i);
+    const r = v === 3 ? " u-table-mobile-card__fields--cols3" : v === 2 ? " u-table-mobile-card__fields--cols2" : "";
+    return oe ? /* @__PURE__ */ a(
+      _e,
+      {
+        flat: x,
+        inset: q,
+        density: J,
+        divider: S,
+        showLabels: j,
+        columns: v,
+        title: o ? b(o, l, i) : null,
+        titleLabel: o ? o.mobileLabel ?? o.title : null,
+        titleHideLabel: !!(o != null && o.mobileHideLabel),
+        titleColor: o == null ? void 0 : o.mobileValueColor,
+        titleLabelColor: o == null ? void 0 : o.mobileLabelColor,
+        subtitle: d ? b(d, l, i) : null,
+        subtitleColor: d == null ? void 0 : d.mobileValueColor,
+        actions: U.length ? U.map((e) => /* @__PURE__ */ a("span", { children: b(e, l, i) }, e.field)) : void 0,
+        inline: te.map((e) => ({
+          label: e.mobileLabel ?? e.title,
+          value: b(e, l, i),
+          hideLabel: !!e.mobileHideLabel,
+          valueColor: e.mobileValueColor,
+          labelColor: e.mobileLabelColor,
+          expandLines: e.mobileExpandLines ?? (e.mobileCollapsible ? 1 : void 0),
+          gridSpan: e.mobileGridSpan,
+          gridRowSpan: e.mobileGridRowSpan
+        })),
+        body: se.map((e) => ({
+          label: e.mobileLabel ?? e.title,
+          value: b(e, l, i),
+          hideLabel: !!e.mobileHideLabel,
+          valueColor: e.mobileValueColor,
+          labelColor: e.mobileLabelColor,
+          expandLines: e.mobileExpandLines ?? (e.mobileCollapsible ? 1 : void 0),
+          gridSpan: e.mobileGridSpan,
+          gridRowSpan: e.mobileGridRowSpan
+        })),
+        details: be.map((e) => ({
+          label: e.mobileLabel ?? e.title,
+          value: b(e, l, i),
+          hideLabel: !!e.mobileHideLabel,
+          valueColor: e.mobileValueColor,
+          labelColor: e.mobileLabelColor,
+          expandLines: e.mobileExpandLines ?? (e.mobileCollapsible ? 1 : void 0),
+          gridSpan: e.mobileGridSpan,
+          gridRowSpan: e.mobileGridRowSpan
+        }))
+      },
+      l.id ?? i
+    ) : /* @__PURE__ */ n(
+      "div",
+      {
+        className: `u-table-mobile-card${x ? " u-table-mobile-card--flat" : ""}${S ? " u-table-mobile-card--divider" : ""}${v === 3 ? " u-table-mobile-card--cols3" : ""}${K}`,
+        children: [
+          o && /* @__PURE__ */ a("div", { className: "u-table-mobile-card__title", style: o.mobileValueColor ? { color: o.mobileValueColor } : void 0, children: b(o, l, i) }),
+          /* @__PURE__ */ a("div", { className: "u-table-mobile-card__fields" + r, children: g.map((e, t) => {
+            const s = b(e, l, i);
+            if (s == null || s === "" || s === !1 || Array.isArray(s) && s.length === 0) return null;
+            const V = j && !e.mobileHideLabel ? e.mobileLabel ?? e.title : null, ue = e.mobileGridSpan === "full" ? " u-table-mobile-card__row--span-full" : e.mobileGridSpan === 2 ? " u-table-mobile-card__row--span2" : e.mobileGridSpan === "narrow" ? " u-table-mobile-card__row--span-narrow" : "";
+            return e.mobileCollapsible || e.mobileExpandLines ? /* @__PURE__ */ a(
+              ge,
+              {
+                label: V,
+                lines: e.mobileExpandLines ?? 1,
+                valueColor: e.mobileValueColor,
+                labelColor: e.mobileLabelColor,
+                gridSpan: e.mobileGridSpan,
+                gridRowSpan: e.mobileGridRowSpan,
+                children: s
+              },
+              e.key ?? e.field ?? t
+            ) : /* @__PURE__ */ n("div", { className: "u-table-mobile-card__row" + ue + (e.mobileGridRowSpan === 2 ? " u-table-mobile-card__row--rowspan2" : ""), children: [
+              V != null && /* @__PURE__ */ n("span", { className: "u-table-mobile-card__label", style: e.mobileLabelColor ? { color: e.mobileLabelColor } : void 0, children: [
+                V,
+                e.headerIcon && (e.headerTooltip ? /* @__PURE__ */ a(ve, { portalOn: !0, tooltipText: e.headerTooltip, className: "u-table-mobile-card__label-icon", children: e.headerIcon }) : /* @__PURE__ */ a("span", { className: "u-table-mobile-card__label-icon", children: e.headerIcon }))
+              ] }),
+              /* @__PURE__ */ a("span", { className: "u-table-mobile-card__value", style: e.mobileValueColor ? { color: e.mobileValueColor } : void 0, children: s })
+            ] }, e.key ?? e.field ?? t);
+          }) })
+        ]
+      },
+      l.id ?? i
+    );
+  };
+  return /* @__PURE__ */ n(ce, { children: [
+    de(),
+    z && !A ? /* @__PURE__ */ a("div", { className: "u-table-mobile-list", "aria-hidden": "true", children: Array.from({ length: I || F }, (l, i) => /* @__PURE__ */ n("div", { className: `u-table-mobile-card u-table-mobile-card--skeleton${x ? " u-table-mobile-card--flat" : ""}${S ? " u-table-mobile-card--divider" : ""}${K}`, children: [
+      /* @__PURE__ */ a("div", { className: "skeleton-cell u-table-mobile-card__skeleton-title" }),
+      /* @__PURE__ */ n("div", { className: "u-table-mobile-card__skeleton-fields", children: [
+        /* @__PURE__ */ a("div", { className: "skeleton-cell" }),
+        /* @__PURE__ */ a("div", { className: "skeleton-cell" })
+      ] })
+    ] }, i)) }) : z || A ? /* @__PURE__ */ a("div", { className: "u-table-mobile-loading", children: /* @__PURE__ */ a(he, { variant: "large-primary", className: "" }) }) : D === 0 ? M ? /* @__PURE__ */ a("div", { className: "u-table-mobile-empty", children: M }) : null : /* @__PURE__ */ a(
+      "div",
+      {
+        className: "u-table-mobile-list",
+        style: O != null ? { gap: O } : void 0,
+        children: P.map((l, i) => me(l, i))
+      }
+    )
+  ] });
+};
+export { ye as TableMobileView$u };