@hortiview/shared-components 0.0.7369 → 0.0.7373

package/dist/components/Filter/Filter.d.ts

@@ -9,6 +9,7 @@ type FilterProps = {
     filterButtonText: string;
     filterModalTitle: string;
     filters: FilterData[];
+    useModal?: boolean;
 };
 /**
  * Filter component that allows the user to filter the data provided
@@ -21,7 +22,9 @@ type FilterProps = {
  * @param filters - the filter data
  * @param modalCancelButtonText - the text for the cancel button in the modal
  * @param modalConfirmButtonText - the text for the confirm button in the modal
+ * @param useModal - if the filter should use a modal and a filter button, default is true,
+ *                   if false the filters will be displayed directly in the page, be aware that the filters will be displayed in a row and there needs to be enough space for them
  * @returns
  */
-export declare const Filter: ({ clearFilterText, closeCallback, currentFilter, filterButtonAsIcon, filterButtonText, filterModalTitle, filters, modalCancelButtonText, modalConfirmButtonText, }: FilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Filter: ({ clearFilterText, closeCallback, currentFilter, filterButtonAsIcon, filterButtonText, filterModalTitle, filters, modalCancelButtonText, modalConfirmButtonText, useModal, }: FilterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Filter/Filter.js

@@ -1,15 +1,16 @@
-import { jsxs as B, Fragment as I, jsx as t } from "react/jsx-runtime";
-import { Modal as j, Button as s, Group as A, Select as D, IconButton as K, NotificationBadge as v } from "@element/react-components";
-import { useState as u } from "react";
-import { s as f } from "../../genericTable.module-CXfRg0e4.js";
-import { u as F } from "../../useBreakpoints-BNeVhjjZ.js";
+import { jsx as t, jsxs as y, Fragment as I } from "react/jsx-runtime";
+import { Group as v, Modal as W, Button as p, Select as j, IconButton as z, NotificationBadge as S } from "@element/react-components";
+import { useState as g } from "react";
+import { s as d } from "../../genericTable.module-CNV1Yt1K.js";
+import { u as O } from "../../useBreakpoints-BNeVhjjZ.js";
 import "../../alertBanner.module-HneYdVzN.js";
-import "../../iconify.module-C89oaw5b.js";
-import "../../isArray-Ca4KR8TK.js";
+import { I as H } from "../../Iconify-CY9lZjFd.js";
 import "../../react-tooltip.min-BzHiZW8k.js";
 import "../../basicHeading.module-BYb8xvuk.js";
+import "../../isArray-Ca4KR8TK.js";
 import "../../_baseToString-BNXOi2Mf.js";
 import "../../_equalByTag-DJhSpgVG.js";
+import "../../iconify.module-C89oaw5b.js";
 import "../../searchBar.module-9gKyrZRT.js";
 import "../../listArea.module-CGpHPOji.js";
 import "../../verticalDivider.module-C3_GL-fH.js";
@@ -30,111 +31,118 @@ import "react-hook-form";
 import "../../formDatePicker.module-BV3ma_7y.js";
 import "../../formSelect.module-C18N-SsT.js";
 import "../../formText.module-C0by6_DK.js";
-const ft = ({
-  clearFilterText: a,
-  closeCallback: m,
-  currentFilter: i,
-  filterButtonAsIcon: r = !1,
-  filterButtonText: l,
-  filterModalTitle: x,
-  filters: y,
-  modalCancelButtonText: S,
-  modalConfirmButtonText: k
+const vt = ({
+  clearFilterText: o,
+  closeCallback: l,
+  currentFilter: r,
+  filterButtonAsIcon: e = !1,
+  filterButtonText: i,
+  filterModalTitle: u,
+  filters: a,
+  modalCancelButtonText: m,
+  modalConfirmButtonText: n,
+  useModal: b = !0
 }) => {
-  const { isDesktop: O } = F(), [b, p] = u(!1), [n, h] = u(i), [N, g] = u(0), C = () => {
-    p(!1), m(n), g(
-      n.reduce((e, { selectedOptions: o }) => e + o.length, 0)
+  const { isDesktop: N } = O(), [A, f] = g(!1), [s, C] = g(r), [_, x] = g(0), B = () => {
+    f(!1), l(s), x(
+      s.reduce((c, { selectedOptions: h }) => c + h.length, 0)
     );
-  }, _ = () => {
-    h([]), g(0);
-  }, w = (e) => {
-    const o = [
-      ...n.filter((c) => c.id !== e.id),
-      e
+  }, w = () => {
+    C([]), x(0);
+  }, F = (c) => {
+    const h = [
+      ...s.filter((D) => D.id !== c.id),
+      c
     ];
-    h(o);
+    C(h);
   };
-  return /* @__PURE__ */ B(I, { children: [
+  return b ? /* @__PURE__ */ y(I, { children: [
     /* @__PURE__ */ t(
-      M,
+      K,
       {
-        filterButtonText: l,
-        filterButtonAsIcon: r,
-        count: N,
-        onClick: () => p(!0)
+        filterButtonText: i,
+        filterButtonAsIcon: e,
+        count: _,
+        onClick: () => f(!0)
       }
     ),
     /* @__PURE__ */ t(
-      j,
+      W,
       {
-        open: b,
-        onClose: C,
-        title: x,
-        modalSize: O ? "small" : "fullscreen",
-        headerActions: /* @__PURE__ */ t(s, { variant: "text", onClick: _, children: a }),
-        dismissiveButton: /* @__PURE__ */ t(s, { variant: "outlined", onClick: () => p(!1), children: S }),
-        primaryButton: /* @__PURE__ */ t(s, { variant: "filled", onClick: C, children: k }),
-        children: /* @__PURE__ */ t(A, { direction: "vertical", children: y.map(({ id: e, title: o, availableOptions: c }) => /* @__PURE__ */ t(
-          D,
-          {
-            variant: "outlined",
-            options: c,
-            label: o,
-            multiSelect: !0,
-            textKey: "text",
-            valueKey: "id",
-            value: n.find((d) => d.id === e)?.selectedOptions ?? [],
-            onChange: (d) => w({ id: e, selectedOptions: d }),
-            hoisted: !0,
-            menuMaxHeight: "300px",
-            disabled: e === "location",
-            showOptionFilter: !1
-          },
-          e
-        )) })
+        open: A,
+        onClose: B,
+        title: u,
+        modalSize: N ? "small" : "fullscreen",
+        headerActions: /* @__PURE__ */ t(p, { variant: "text", onClick: w, children: o }),
+        dismissiveButton: /* @__PURE__ */ t(p, { variant: "outlined", onClick: () => f(!1), children: m }),
+        primaryButton: /* @__PURE__ */ t(p, { variant: "filled", onClick: B, children: n }),
+        children: /* @__PURE__ */ t(v, { direction: "vertical", children: k(a, s, F) })
       }
     )
-  ] });
-}, M = ({
-  filterButtonText: a,
-  filterButtonAsIcon: m,
-  count: i,
-  onClick: r
+  ] }) : /* @__PURE__ */ t(v, { secondaryAlign: "center", fullWidth: !0, children: k(a, s, F, !1) });
+}, k = (o, l, r, e = !0) => o.map(({ id: i, title: u, availableOptions: a, icon: m }) => /* @__PURE__ */ y(v, { fullWidth: !0, secondaryAlign: "center", children: [
+  m ? /* @__PURE__ */ t(H, { icon: m, iconSize: "medium" }) : null,
+  /* @__PURE__ */ t(
+    j,
+    {
+      className: e ? void 0 : d.dense,
+      variant: "outlined",
+      options: a,
+      label: u,
+      multiSelect: !0,
+      textKey: "text",
+      valueKey: "id",
+      value: l.find((n) => n.id === i)?.selectedOptions ?? [],
+      onChange: (n) => r({ id: i, selectedOptions: n }),
+      hoisted: !0,
+      menuMaxHeight: "300px",
+      disabled: i === "location",
+      showOptionFilter: !1,
+      dense: !e,
+      fixedHeightInput: !e,
+      multiDisplayType: e ? "pills" : "text"
+    }
+  )
+] }, i)), K = ({
+  filterButtonText: o,
+  filterButtonAsIcon: l,
+  count: r,
+  onClick: e
 }) => {
-  const { isDesktop: l } = F();
-  return m ? /* @__PURE__ */ t(
-    K,
+  const { isDesktop: i } = O();
+  return l ? /* @__PURE__ */ t(
+    z,
     {
       icon: "filter_list_alt",
-      onClick: r,
-      badge: i !== 0 && /* @__PURE__ */ t(
-        v,
+      onClick: e,
+      badge: r !== 0 && /* @__PURE__ */ t(
+        S,
         {
-          counter: i,
-          className: f.filterBadge,
+          counter: r,
+          className: d.filterBadge,
           themeColor: "secondary",
           "data-testid": "filter-badge"
         }
       )
     }
-  ) : /* @__PURE__ */ B("div", { style: { height: "100%", width: l ? void 0 : "100%" }, children: [
+  ) : /* @__PURE__ */ y("div", { style: { height: "100%", width: i ? void 0 : "100%" }, children: [
     /* @__PURE__ */ t(
-      s,
+      p,
       {
         variant: "outlined",
         themeColor: "primary",
         leadingIcon: "filter_list_alt",
-        onClick: r,
-        className: f.filterButton,
-        fullWidth: !l,
-        children: a
+        onClick: e,
+        className: d.filterButton,
+        fullWidth: !i,
+        children: o
       }
     ),
-    i !== 0 && /* @__PURE__ */ t(
-      v,
+    r !== 0 && /* @__PURE__ */ t(
+      S,
       {
-        counter: i,
-        className: f.filterBadge,
+        counter: r,
+        className: d.filterBadge,
         themeColor: "secondary",
         "data-testid": "filter-badge"
       }
@@ -142,5 +150,5 @@ const ft = ({
   ] });
 };
 export {
-  ft as Filter
+  vt as Filter
 };

package/dist/components/Filter/Filter.test.js

@@ -1,11 +1,11 @@
-import { jsx as a } from "react/jsx-runtime";
-import { a as r, s as t, f as c, t as u, w as m } from "../../react.esm-Dy4VzU4L.js";
-import { a as s } from "../../useBreakpoints-BNeVhjjZ.js";
+import { jsx as r } from "react/jsx-runtime";
+import { a, s as t, f as u, t as c, w as x } from "../../react.esm-Dy4VzU4L.js";
+import { a as d } from "../../useBreakpoints-BNeVhjjZ.js";
 import { Filter as T } from "./Filter.js";
-import { v as x, b as d, d as f, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
-const o = x.fn();
-d(() => {
-  x.spyOn(s, "useBreakpoints").mockReturnValue({
+import { v as m, b as s, d as f, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
+const o = m.fn();
+s(() => {
+  m.spyOn(d, "useBreakpoints").mockReturnValue({
     isDesktop: !0,
     isMobile: !1,
     isTablet: !1,
@@ -13,10 +13,11 @@ d(() => {
   });
 });
 f("Filter", () => {
-  const n = [
+  const l = [
     {
       id: "1",
       title: "Filter 1",
+      icon: "farm",
       availableOptions: [
         { id: "1", text: "Option 1" },
         { id: "2", text: "Option 2" }
@@ -30,17 +31,17 @@ f("Filter", () => {
         { id: "4", text: "Option 4" }
       ]
     }
-  ], i = [
+  ], n = [
     { id: "1", selectedOptions: [{ id: "1", text: "Option 1" }] },
     { id: "2", selectedOptions: [{ id: "3", text: "Option 3" }] }
   ];
   B("should render filter", () => {
-    r(
-      /* @__PURE__ */ a(
+    a(
+      /* @__PURE__ */ r(
         T,
         {
-          filters: n,
-          currentFilter: i,
+          filters: l,
+          currentFilter: n,
           closeCallback: o,
           filterButtonText: "filterButtonText",
           filterModalTitle: "filterModalTitle",
@@ -49,18 +50,18 @@ f("Filter", () => {
           clearFilterText: "clearFilterText"
         }
       )
-    ), e(t.getByText("filterButtonText")).toBeInTheDocument(), e(t.getByText("filterModalTitle")).toBeInTheDocument(), e(t.getByText("modalCancelButtonText")).toBeInTheDocument(), e(t.getByText("modalConfirmButtonText")).toBeInTheDocument(), e(t.getByText("clearFilterText")).toBeInTheDocument(), e(t.getByText("Filter 1")).toBeInTheDocument(), e(t.getByText("Filter 2")).toBeInTheDocument(), e(t.getByText("Option 1")).toBeInTheDocument(), e(t.getByText("Option 3")).toBeInTheDocument();
-    const l = t.getByRole("button", { name: "modalConfirmButtonText" });
-    c.click(l), u.act(() => {
+    ), e(t.getByText("filterButtonText")).toBeInTheDocument(), e(t.getByText("filterModalTitle")).toBeInTheDocument(), e(t.getByText("modalCancelButtonText")).toBeInTheDocument(), e(t.getByText("modalConfirmButtonText")).toBeInTheDocument(), e(t.getByText("clearFilterText")).toBeInTheDocument(), e(t.getByText("Filter 1")).toBeInTheDocument(), e(t.getByText("Filter 2")).toBeInTheDocument(), e(t.getByText("Option 1")).toBeInTheDocument(), e(t.getByText("Option 3")).toBeInTheDocument(), e(t.getByTestId("farm")).toBeInTheDocument();
+    const i = t.getByRole("button", { name: "modalConfirmButtonText" });
+    u.click(i), c.act(() => {
       e(o).toHaveBeenCalledTimes(1), e(t.getByText("2")).toBeInTheDocument();
     });
   }), B("should clear filter", () => {
-    r(
-      /* @__PURE__ */ a(
+    a(
+      /* @__PURE__ */ r(
         T,
         {
-          filters: n,
-          currentFilter: i,
+          filters: l,
+          currentFilter: n,
           closeCallback: o,
           filterButtonText: "filterButtonText",
           filterModalTitle: "filterModalTitle",
@@ -70,17 +71,17 @@ f("Filter", () => {
         }
       )
     );
-    const l = t.getByText("clearFilterText");
-    c.click(l), u.act(() => {
+    const i = t.getByText("clearFilterText");
+    u.click(i), c.act(() => {
       e(o).toHaveBeenCalledTimes(1), e(t.queryByTestId("filter-badge")).not.toBeInTheDocument();
     });
   }), B("should close filter", () => {
-    r(
-      /* @__PURE__ */ a(
+    a(
+      /* @__PURE__ */ r(
         T,
         {
-          filters: n,
-          currentFilter: i,
+          filters: l,
+          currentFilter: n,
           closeCallback: o,
           filterButtonText: "filterButtonText",
           filterModalTitle: "filterModalTitle",
@@ -90,19 +91,19 @@ f("Filter", () => {
         }
       )
     );
-    const l = t.getByRole("button", { name: "modalCancelButtonText" });
-    c.click(l), u.act(() => {
+    const i = t.getByRole("button", { name: "modalCancelButtonText" });
+    u.click(i), c.act(() => {
       e(o).toHaveBeenCalledTimes(1), e(t.queryByTestId("filter-badge")).not.toBeInTheDocument();
-    }), m(() => {
+    }), x(() => {
       e(t.queryByText("filterModalTitle")).not.toBeInTheDocument(), e(t.queryByText("modalCancelButtonText")).not.toBeInTheDocument(), e(t.queryByText("modalConfirmButtonText")).not.toBeInTheDocument(), e(t.queryByText("clearFilterText")).not.toBeInTheDocument();
     });
   }), B("should render as icon button ", () => {
-    r(
-      /* @__PURE__ */ a(
+    a(
+      /* @__PURE__ */ r(
         T,
         {
-          filters: n,
-          currentFilter: i,
+          filters: l,
+          currentFilter: n,
           closeCallback: o,
           filterButtonText: "filterButtonText",
           filterModalTitle: "filterModalTitle",
@@ -113,5 +114,22 @@ f("Filter", () => {
         }
       )
     ), e(t.queryByText("filterButtonText")).not.toBeInTheDocument(), e(t.getByText("filter_list_alt")).toBeInTheDocument(), e(t.getByText("filter_list_alt").tagName).toBe("I");
+  }), B("should render filter without modal", () => {
+    a(
+      /* @__PURE__ */ r(
+        T,
+        {
+          filters: l,
+          currentFilter: n,
+          closeCallback: o,
+          filterButtonText: "filterButtonText",
+          filterModalTitle: "filterModalTitle",
+          modalCancelButtonText: "modalCancelButtonText",
+          modalConfirmButtonText: "modalConfirmButtonText",
+          clearFilterText: "clearFilterText",
+          useModal: !1
+        }
+      )
+    ), e(t.queryByText("filterButtonText")).not.toBeInTheDocument(), e(t.queryByText("clearFilterText")).not.toBeInTheDocument(), e(t.queryByText("modalCancelButtonText")).not.toBeInTheDocument(), e(t.queryByText("modalConfirmButtonText")).not.toBeInTheDocument(), e(t.queryByText("clearFilterText")).not.toBeInTheDocument(), e(t.getByTestId("farm")).toBeInTheDocument(), e(t.getByText("Filter 1")).toBeInTheDocument(), e(t.getByText("Filter 2")).toBeInTheDocument(), e(t.getByText("Option 1")).toBeInTheDocument(), e(t.getByText("Option 3")).toBeInTheDocument();
   });
 });

package/dist/components/GenericTable/GenericTable.js

@@ -1,7 +1,7 @@
 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 { a as e } from "../../genericTable.module-CNV1Yt1K.js";
 import { u as x } from "../../useBreakpoints-BNeVhjjZ.js";
 import "../../alertBanner.module-HneYdVzN.js";
 import "../../iconify.module-C89oaw5b.js";

package/dist/genericTable.module-CNV1Yt1K.js

@@ -0,0 +1,16 @@
+import "./assets/genericTable.css";
+const t = "_filterButton_1xlao_1", e = "_filterBadge_1xlao_6", o = "_dense_1xlao_12", i = {
+  filterButton: t,
+  filterBadge: e,
+  dense: o
+}, s = "_topBar_1msoo_1", a = "_filterBar_1msoo_5", _ = "_emptyTable_1msoo_9", l = "_elevation_1msoo_17", n = "_table_1msoo_22", B = {
+  topBar: s,
+  filterBar: a,
+  emptyTable: _,
+  elevation: l,
+  table: n
+};
+export {
+  B as a,
+  i as s
+};

package/dist/main.js

@@ -1,4 +1,4 @@
-import "./genericTable.module-CXfRg0e4.js";
+import "./genericTable.module-CNV1Yt1K.js";
 import { AlertBanner as t } from "./components/AlertBanner/AlertBanner.js";
 import { BaseView as p } from "./components/BaseView/BaseView.js";
 import { BasicHeading as x } from "./components/BasicHeading/BasicHeading.js";

package/dist/types/Filter.d.ts

@@ -7,6 +7,7 @@
 export type FilterData = {
     id: string;
     title: string;
+    icon?: string;
     availableOptions: FilterOption[];
 };
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "0.0.7369",
+  "version": "0.0.7373",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",

package/dist/genericTable.module-CXfRg0e4.js

@@ -1,15 +0,0 @@
-import "./assets/genericTable.css";
-const t = "_filterButton_66wbq_1", e = "_filterBadge_66wbq_6", n = {
-  filterButton: t,
-  filterBadge: e
-}, o = "_topBar_1msoo_1", a = "_filterBar_1msoo_5", s = "_emptyTable_1msoo_9", _ = "_elevation_1msoo_17", l = "_table_1msoo_22", i = {
-  topBar: o,
-  filterBar: a,
-  emptyTable: s,
-  elevation: _,
-  table: l
-};
-export {
-  i as a,
-  n as s
-};