@hortiview/shared-components 2.14.0 → 2.16.0

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

@@ -4,7 +4,7 @@ import "../../../index.es-CeQB6igi.js";
 import "../../../index.es-SjZ_-d7U.js";
 import "react";
 import "../../OverflowTooltip/OverflowTooltip.js";
-import { G } from "../../../GenericCard-CeqYrtLH.js";
+import { G } from "../../../GenericCard-IWX-Bmb_.js";
 export {
   G as GenericCard
 };

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

@@ -1,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
 import { a as c, s as o } from "../../../react.esm-Bm0cAgpZ.js";
-import { G as i } from "../../../GenericCard-CeqYrtLH.js";
+import { G as i } from "../../../GenericCard-IWX-Bmb_.js";
 import { d as m, t as s, g as e } from "../../../vi.bdSIJ99Y-B308Q-4w.js";
 m("GenericCard", () => {
   const d = {

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

@@ -1,25 +1,25 @@
 import { jsx as r } from "react/jsx-runtime";
-import { G as c } from "../../../index.es-oxil0uFe.js";
-import { P as l } from "../../../index.es-BanVdXEd.js";
+import { G as l } from "../../../index.es-oxil0uFe.js";
+import { P as c } from "../../../index.es-BanVdXEd.js";
 import { a as o } from "../../../index.es-SjZ_-d7U.js";
-import { s as i, G as m } from "../../../GenericCard-CeqYrtLH.js";
-const u = ({
+import { s as e, G as m } from "../../../GenericCard-IWX-Bmb_.js";
+const g = ({
   columns: n,
-  data: e,
+  data: t,
   hiddenColumns: a = [],
-  noContentText: d
-}) => e?.length === 0 ? /* @__PURE__ */ r("div", { "data-testid": "empty-generic-card-list", className: i.emptyContainer, children: /* @__PURE__ */ r(l, { variant: "standard", style: { textAlign: "center" }, className: i.empty, children: /* @__PURE__ */ r(o, { children: d }) }) }) : (
+  noContentText: s
+}) => t?.length === 0 ? /* @__PURE__ */ r("div", { "data-testid": "empty-generic-card-list", className: e.emptyContainer, children: /* @__PURE__ */ r(c, { variant: "standard", style: { textAlign: "center" }, className: e.empty, children: /* @__PURE__ */ r(o, { children: s }) }) }) : (
   // needs the div to surround the Group by an element with display: block to avoid visual errors
-  /* @__PURE__ */ r("div", { "data-testid": "generic-card-list", style: { width: "100%" }, children: /* @__PURE__ */ r(c, { fullWidth: !0, direction: "vertical", primaryAlign: "center", secondaryAlign: "center", children: e?.map((t, s) => /* @__PURE__ */ r(
+  /* @__PURE__ */ r("div", { className: e.fullWidth, children: /* @__PURE__ */ r(l, { fullWidth: !0, direction: "vertical", primaryAlign: "center", secondaryAlign: "center", children: t?.map((i, d) => /* @__PURE__ */ r(
     m,
     {
-      item: t,
+      item: i,
       columns: n,
       hiddenColumns: a
     },
-    t.id ?? s
+    i.id ?? d
   )) }) })
 );
 export {
-  u as GenericCardList
+  g as GenericCardList
 };

package/dist/components/InfoCard/InfoCard.d.ts

@@ -12,7 +12,11 @@ export type InfoCardProps = {
     /**
      * Type of the failed health check. Depending on the type, a different icon of 3rem size will be displayed.
      */
-    type: 'database' | 'iot' | 'platform' | 'done' | 'other';
+    type: 'database' | 'iot' | 'platform' | 'done' | 'other' | 'celebration';
+    /**
+     * The color of the icon. Depending on the type, a different default color will be applied, but it can be overridden by providing a value for this prop.
+     */
+    colorOverride?: 'primary' | 'secondary' | 'success' | 'danger';
     /**
      * The card has a default outline. For design consistency, this prop should only be set to 'false' if the card is embedded, e.g. in a table.
      */
@@ -22,4 +26,4 @@ export type InfoCardProps = {
      */
     isFullHeight?: boolean;
 };
-export declare const InfoCard: ({ title, subtitle, type, isOutlined, isFullHeight, }: InfoCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InfoCard: ({ title, subtitle, type, colorOverride, isOutlined, isFullHeight, }: InfoCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InfoCard/InfoCard.js

@@ -1,59 +1,72 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { C as d, a as _, b as h } from "../../index.es-BPv5dCFQ.js";
-import { G as m } from "../../index.es-oxil0uFe.js";
-import { P as f } from "../../index.es-BanVdXEd.js";
-import { T as s } from "../../index.es-SjZ_-d7U.js";
-import { Iconify as u } from "../Iconify/Iconify.js";
-import '../../assets/InfoCard.css';const x = "_database_x7426_1", p = "_spin_x7426_1", g = "_done_x7426_16", C = "_iot_x7426_20", y = "_platform_x7426_21", b = "_other_x7426_22", N = "_crossedOut_x7426_26", H = "_fullHeight_x7426_45", T = "_centerText_x7426_49", n = {
-  database: x,
-  spin: p,
-  done: g,
-  iot: C,
-  platform: y,
-  other: b,
-  crossedOut: N,
-  fullHeight: H,
-  centerText: T
-}, G = ({
-  title: t,
-  subtitle: c,
-  type: a,
-  isOutlined: i = !0,
-  isFullHeight: r = !1
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { C as _, a as p, b as m } from "../../index.es-BPv5dCFQ.js";
+import { G as h } from "../../index.es-oxil0uFe.js";
+import { P as u } from "../../index.es-BanVdXEd.js";
+import { T as c } from "../../index.es-SjZ_-d7U.js";
+import { Iconify as f } from "../Iconify/Iconify.js";
+import '../../assets/InfoCard.css';const g = "_database_1vpro_1", v = "_spin_1vpro_1", y = "_done_1vpro_16", b = "_iot_1vpro_20", C = "_platform_1vpro_21", x = "_other_1vpro_22", N = "_celebration_1vpro_26", H = "_primary_1vpro_30", T = "_secondary_1vpro_34", k = "_danger_1vpro_38", I = "_success_1vpro_42", A = "_crossedOut_1vpro_46", O = "_fullHeight_1vpro_65", j = "_centerText_1vpro_69", r = {
+  database: g,
+  spin: v,
+  done: y,
+  iot: b,
+  platform: C,
+  other: x,
+  celebration: N,
+  primary: H,
+  secondary: T,
+  danger: k,
+  success: I,
+  crossedOut: A,
+  fullHeight: O,
+  centerText: j
+}, q = ({
+  title: o,
+  subtitle: t,
+  type: n,
+  colorOverride: i,
+  isOutlined: l = !0,
+  isFullHeight: s = !1
 }) => {
-  const o = r ? n.fullHeight : "";
+  const a = s ? r.fullHeight : "";
   return /* @__PURE__ */ e(
-    d,
+    _,
     {
-      variant: i ? "outlined" : "flat",
-      "data-testid": `${a}-health-check-failed-card`,
+      variant: l ? "outlined" : "flat",
+      "data-testid": `${n}-health-check-failed-card`,
       bodyAlignment: "centered",
-      height: r ? "100%" : "auto",
-      children: /* @__PURE__ */ e(_, { className: o, children: /* @__PURE__ */ e(f, { variant: "airy", className: o, children: /* @__PURE__ */ e(h, { className: o, children: /* @__PURE__ */ l(
-        m,
+      height: s ? "100%" : "auto",
+      children: /* @__PURE__ */ e(p, { className: a, children: /* @__PURE__ */ e(u, { variant: "airy", className: a, children: /* @__PURE__ */ e(m, { className: a, children: /* @__PURE__ */ d(
+        h,
         {
           gap: "none",
           primaryAlign: "center",
           secondaryAlign: "center",
           direction: "vertical",
           fullWidth: !0,
-          className: n.centerText,
+          className: r.centerText,
           children: [
-            /* @__PURE__ */ e(v, { type: a }),
-            /* @__PURE__ */ e(s, { level: 1, bold: !0, children: t }),
-            /* @__PURE__ */ e(s, { level: 2, themeColor: "text-secondary-on-background", children: c })
+            /* @__PURE__ */ e(F, { type: n, colorOverride: i }),
+            /* @__PURE__ */ e(c, { level: 1, bold: !0, children: o }),
+            /* @__PURE__ */ e(c, { level: 2, themeColor: "text-secondary-on-background", children: t })
           ]
         }
       ) }) }) })
     }
   );
-}, k = {
+}, B = {
   database: "sync",
   iot: "settings_input_antenna",
   platform: "engineering",
   done: "sunny-check",
-  other: "error"
-}, v = ({ type: t }) => /* @__PURE__ */ e("span", { className: t === "iot" ? n.crossedOut : "", children: /* @__PURE__ */ e(u, { icon: k[t], className: n[t], iconSize: "xlarge" }) });
+  other: "error",
+  celebration: "celebration"
+}, F = ({
+  type: o,
+  colorOverride: t
+}) => {
+  const n = t ? r[t] : r[o];
+  return /* @__PURE__ */ e("span", { className: o === "iot" ? r.crossedOut : "", children: /* @__PURE__ */ e(f, { icon: B[o], className: n, iconSize: "xlarge" }) });
+};
 export {
-  G as InfoCard
+  q as InfoCard
 };

package/dist/components/InfoCard/InfoCard.test.js

@@ -1,26 +1,48 @@
 import { jsx as a } from "react/jsx-runtime";
-import { a as r, s as e } from "../../react.esm-Bm0cAgpZ.js";
-import { InfoCard as s } from "./InfoCard.js";
-import { d as h, t as i, g as t } from "../../vi.bdSIJ99Y-B308Q-4w.js";
-h("HealthCheckFailed Component", () => {
-  const n = "Test Title", c = "Test Subtitle";
+import { a as r, s as t } from "../../react.esm-Bm0cAgpZ.js";
+import { InfoCard as n } from "./InfoCard.js";
+import { d as l, t as i, g as o } from "../../vi.bdSIJ99Y-B308Q-4w.js";
+l("HealthCheckFailed Component", () => {
+  const c = "Test Title", s = "Test Subtitle";
   i("displays the correct title and subtitle", () => {
-    r(/* @__PURE__ */ a(s, { title: n, subtitle: c, type: "database" })), t(e.getByText(n)).toBeInTheDocument(), t(e.getByText(c)).toBeInTheDocument();
+    r(/* @__PURE__ */ a(n, { title: c, subtitle: s, type: "database" })), o(t.getByText(c)).toBeInTheDocument(), o(t.getByText(s)).toBeInTheDocument();
   }), i('displays the correct icon for type "database"', () => {
-    r(/* @__PURE__ */ a(s, { title: n, subtitle: c, type: "database" }));
-    const o = e.getByText("sync");
-    t(o).toBeInTheDocument(), t(e.getByTestId("database-health-check-failed-card")).toBeInTheDocument();
+    r(/* @__PURE__ */ a(n, { title: c, subtitle: s, type: "database" }));
+    const e = t.getByText("sync");
+    o(e).toBeInTheDocument(), o(t.getByTestId("database-health-check-failed-card")).toBeInTheDocument();
   }), i('displays the correct icon for type "iot"', () => {
-    r(/* @__PURE__ */ a(s, { title: n, subtitle: c, type: "iot" }));
-    const o = e.getByText("settings_input_antenna");
-    t(o).toBeInTheDocument(), t(e.getByTestId("iot-health-check-failed-card")).toBeInTheDocument();
+    r(/* @__PURE__ */ a(n, { title: c, subtitle: s, type: "iot" }));
+    const e = t.getByText("settings_input_antenna");
+    o(e).toBeInTheDocument(), o(t.getByTestId("iot-health-check-failed-card")).toBeInTheDocument();
   }), i('displays the correct icon for type "platform"', () => {
-    r(/* @__PURE__ */ a(s, { title: n, subtitle: c, type: "platform" }));
-    const o = e.getByText("engineering");
-    t(o).toBeInTheDocument(), t(e.getByTestId("platform-health-check-failed-card")).toBeInTheDocument();
+    r(/* @__PURE__ */ a(n, { title: c, subtitle: s, type: "platform" }));
+    const e = t.getByText("engineering");
+    o(e).toBeInTheDocument(), o(t.getByTestId("platform-health-check-failed-card")).toBeInTheDocument();
   }), i('displays the correct icon for type "other"', () => {
-    r(/* @__PURE__ */ a(s, { title: n, subtitle: c, type: "other" }));
-    const o = e.getByText("error");
-    t(o).toBeInTheDocument(), t(e.getByTestId("other-health-check-failed-card")).toBeInTheDocument();
+    r(/* @__PURE__ */ a(n, { title: c, subtitle: s, type: "other" }));
+    const e = t.getByText("error");
+    o(e).toBeInTheDocument(), o(t.getByTestId("other-health-check-failed-card")).toBeInTheDocument();
+  }), i('displays the correct icon for type "celebration"', () => {
+    r(/* @__PURE__ */ a(n, { title: c, subtitle: s, type: "celebration" }));
+    const e = t.getByText("celebration");
+    o(e).toBeInTheDocument(), o(t.getByTestId("celebration-health-check-failed-card")).toBeInTheDocument();
+  }), i("applies colorOverride class for primary", () => {
+    r(/* @__PURE__ */ a(n, { title: c, subtitle: s, type: "database", colorOverride: "primary" }));
+    const e = t.getByText("sync").closest("span")?.querySelector("svg, span, i");
+    o(e?.className).toMatch(/primary/);
+  }), i("applies colorOverride class for secondary", () => {
+    r(
+      /* @__PURE__ */ a(n, { title: c, subtitle: s, type: "database", colorOverride: "secondary" })
+    );
+    const e = t.getByText("sync").closest("span")?.querySelector("svg, span, i");
+    o(e?.className).toMatch(/secondary/);
+  }), i("applies colorOverride class for success", () => {
+    r(/* @__PURE__ */ a(n, { title: c, subtitle: s, type: "database", colorOverride: "success" }));
+    const e = t.getByText("sync").closest("span")?.querySelector("svg, span, i");
+    o(e?.className).toMatch(/success/);
+  }), i("applies colorOverride class for danger", () => {
+    r(/* @__PURE__ */ a(n, { title: c, subtitle: s, type: "database", colorOverride: "danger" }));
+    const e = t.getByText("sync").closest("span")?.querySelector("svg, span, i");
+    o(e?.className).toMatch(/danger/);
   });
 });

package/dist/components/ModulePadding/ModulePadding.js

@@ -5,6 +5,8 @@ import "react";
 import { u as m } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../react-tooltip.min-CVsI--2Y.js";
 import "../../orderBy-DLBJlgdL.js";
+import "../../index-CuHybtft.js";
+import "../SharedComponentsPermissionProvider/PermissionContext.js";
 import "../../uniqueId-BNVTeImh.js";
 import "react-hook-form";
 import "../../get-D8IXqiys.js";
@@ -12,8 +14,6 @@ import "../../isArray-BjSPDQ4v.js";
 import "../../isString-DVA49FEo.js";
 import "../../omit-CYY_mIYv.js";
 import "../../types/Time.js";
-import "../../index-CuHybtft.js";
-import "../SharedComponentsPermissionProvider/PermissionContext.js";
 import "../../react.esm-Bm0cAgpZ.js";
 const D = ({ children: o }) => {
   const { isDesktop: t } = m();

package/dist/components/SearchBar/SearchBar.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { I as l } from "../../index.es-t87yNd9Y.js";
-import { T as u } from "../../index.es-B74L_Dje.js";
+import { T as u } from "../../index.es-BYcQTTL8.js";
 import '../../assets/SearchBar.css';const b = "_searchbar_g83qp_1", d = {
   searchbar: b
 }, g = ({

package/dist/components/Stepper/Stepper.d.ts

@@ -3,19 +3,26 @@ import { StepperProps } from './stepperTypes';
 
 /**
  * A component that displays a stepper with a header, content, and navigation buttons.<br />
- * Available in two display types: 'default' (dots) and 'description' (numerical with description).
+ * Available in three display types: 'desktop', 'small' and 'dots'.<br />
+ *
+ * - Desktop: Default EDS-like styling
+ * - Small: A compact version of the desktop stepper showing only the current step and total steps in the header, as well as the title of the current step.
+ * - Dots: A minimal version showing only centered dots for each step and the title of the current step in the header.
+ *
  *
  * **!! Be aware that the stepper is not a controlled component, so you need to manage the current step, content and loading state yourself. !!**
  *
- * @param stepperType - The type of the stepper indicator. Defaults to 'default' (dots).
+ * @param stepperType - The type of the stepper indicator. Defaults to 'desktop'.
  * @param steps - An array of steps for the stepper.
- * @param currentStep - The current step index.
- * @param customTotalSteps - A custom total number of steps to display in the stepper header. Only applicable for 'description' type.
- * @param children - The content to be displayed in the stepper.
+ * @param currentStepId - The current step id, matching the id property of one of the steps in
+ * the steps array.
+ * @param overwriteTotalSteps - A custom total number of steps to display in the stepper header. Only applicable for 'small' stepper.
  * @param isStepLoading - A boolean indicating if the current step is loading. If true, the next button will be disabled and show a loading state.
  * @param showStepperHeader - An indicator of whether to show the stepper header. Defaults to true.
+ * @param showStepperButtons - An indicator of whether to show the stepper buttons. Defaults to true.
  * @param stepperButtonAlignment - The alignment of the stepper button group. Defaults to 'center'.
  * @param showPreviousButtonOnFirstStep - A flag which indicates if the previous button should be shown on the first step. This can be useful for canceling the stepper. Defaults to false.
+ * @param children - The content to be displayed in the stepper.
  * @returns
  */
-export declare const Stepper: ({ stepperType, steps, currentStep, customTotalSteps, children, isStepLoading, showStepperHeader, stepperButtonAlignment, showPreviousButtonOnFirstStep, }: PropsWithChildren<StepperProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Stepper: ({ stepperType, steps, currentStepId, overwriteTotalSteps, isStepLoading, showStepperHeader, showStepperButtons, stepperButtonAlignment, showPreviousButtonOnFirstStep, children, }: PropsWithChildren<StepperProps>) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Stepper/Stepper.js

@@ -1,23 +1,70 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { G as o } from "../../index.es-oxil0uFe.js";
-import { useMemo as u } from "react";
-import { StepperPreviousButton as f, StepperNextButton as g } from "./components/StepperButton.js";
-import { StepperHeader as y } from "./components/StepperHeader.js";
-import { s as h } from "../../stepper.module-c-CWmpkt.js";
-const j = ({
-  stepperType: n = "default",
-  steps: e,
-  currentStep: t,
-  customTotalSteps: a,
-  children: l,
-  isStepLoading: p,
-  showStepperHeader: s = !0,
-  stepperButtonAlignment: d = "center",
-  showPreviousButtonOnFirstStep: m = !1
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { G as u } from "../../index.es-oxil0uFe.js";
+import { useMemo as v } from "react";
+import { StepperPreviousButton as g, StepperNextButton as A } from "./components/StepperButton.js";
+import { StepperHeader as k } from "./components/StepperHeader.js";
+import { s as D } from "../../stepper.module-DR_FbENS.js";
+import { StepperType as S } from "./stepperTypes.js";
+const T = ({
+  stepperType: h = S.DESKTOP,
+  steps: i,
+  currentStepId: o,
+  overwriteTotalSteps: P,
+  isStepLoading: x,
+  showStepperHeader: y = !0,
+  showStepperButtons: c = !0,
+  stepperButtonAlignment: C = "center",
+  showPreviousButtonOnFirstStep: d = !1,
+  children: B
 }) => {
-  const c = u(() => t === e.length - 1, [t, e.length]);
-  return /* @__PURE__ */ i(
-    o,
+  const p = v(() => {
+    const s = i.map((r, e) => (e === 0 && r.excludeFromHeader && console.error(
+      "The first step is excluded from the header. Please check your configuration."
+    ), {
+      step: r,
+      isActive: !1,
+      isCompleted: !1,
+      isRendered: !r.excludeFromHeader,
+      isFirst: e === 0,
+      isLast: e === i.length - 1
+    })), l = i.findIndex((r) => r.id === o);
+    l === -1 && console.error(
+      `Current step with id ${o} not found in steps array. Bad configuration?`
+    );
+    let f = o;
+    for (let r = 0; r < s.length; r++) {
+      const e = s[r];
+      if (r > l) {
+        e.isActive = !1, e.isCompleted = !1;
+        continue;
+      }
+      if (e.step.id === o)
+        if (e.isRendered)
+          e.isActive = !0, e.isCompleted = !1;
+        else {
+          const a = s.find((b) => b.step.id === f);
+          a && (a.isActive = !0, a.isCompleted = e.step.excludedStepCompletesPreviousStep ?? !1);
+        }
+      r < l && (e.isActive = !1, e.isCompleted = !0, e.isRendered && (f = e.step.id));
+    }
+    return s;
+  }, [i, o]), t = v(() => p.find((s) => s.isActive), [p]);
+  if (!t)
+    return console.error(
+      `No active step found for currentStepId ${o}. Please check your configuration.`
+    ), null;
+  if (c) {
+    if (!t.step.nextButtonProps?.onClick || !t.step.nextButtonProps?.label)
+      return console.error(
+        `Next button props not found for current step with id ${o}. If you want to use the stepper buttons, make sure to provide nextButtonProps for each step.`
+      ), null;
+    if ((!t.isFirst || d) && (!t.step.prevButtonProps?.onClick || !t.step.prevButtonProps?.label))
+      return console.error(
+        `Previous button props not found for current step with id ${o}. If you want to use the stepper buttons, make sure to provide prevButtonProps for each applicable step.`
+      ), null;
+  }
+  return /* @__PURE__ */ m(
+    u,
     {
       "data-testid": "stepper",
       fullWidth: !0,
@@ -26,51 +73,59 @@ const j = ({
       primaryAlign: "center",
       secondaryAlign: "center",
       children: [
-        s ? /* @__PURE__ */ r(
-          y,
+        y ? /* @__PURE__ */ n(
+          k,
           {
-            stepperType: n,
-            steps: e,
-            currentStep: t,
-            customTotalSteps: a
+            stepperType: h,
+            stepsData: p,
+            overwriteTotalSteps: P
           }
         ) : null,
-        /* @__PURE__ */ r(
-          o,
+        /* @__PURE__ */ n(
+          u,
           {
             "data-testid": "stepper-content",
             fullWidth: !0,
-            className: h.stepperContent,
+            className: D.stepperContent,
             gap: "airy",
             secondaryAlign: "center",
             direction: "vertical",
-            children: l
+            children: B
           }
         ),
-        /* @__PURE__ */ i(
-          o,
+        c ? /* @__PURE__ */ m(
+          u,
           {
             "data-testid": "stepper-buttons",
             fullWidth: !0,
             secondaryAlign: "center",
-            primaryAlign: d,
+            primaryAlign: C,
             children: [
-              (t !== 0 || m) && /* @__PURE__ */ r(f, { ...e[t].prevButtonProps }),
-              /* @__PURE__ */ r(
+              (!t.isFirst || d) && /* @__PURE__ */ n(
                 g,
                 {
-                  ...e[t].nextButtonProps,
-                  isStepLoading: p,
-                  isLastStep: c
+                  ...t.step.prevButtonProps,
+                  onClick: t.step.prevButtonProps.onClick,
+                  label: t.step.prevButtonProps.label
+                }
+              ),
+              /* @__PURE__ */ n(
+                A,
+                {
+                  ...t.step.nextButtonProps,
+                  onClick: t.step.nextButtonProps.onClick,
+                  label: t.step.nextButtonProps.label,
+                  isStepLoading: x,
+                  isLastStep: t.isLast
                 }
               )
             ]
           }
-        )
+        ) : null
       ]
     }
   );
 };
 export {
-  j as Stepper
+  T as Stepper
 };