@foodpilot/foods 2.11.20 → 2.11.22

package/dist/components/LinearProgress.d.ts

@@ -3,14 +3,18 @@ type LinearProgressBaseProps = Omit<MuiLinearProgressProps, "classes" | "sx" | "
 export interface LinearProgressProps extends LinearProgressBaseProps {
     value: number;
     height?: string;
+    minContainerHeight?: string;
     hideValueLabel?: boolean;
     styleProperties?: LinearProgressStyleProperties;
 }
 export type LinearProgressStyleProperties = {
     lineColor?: string;
-    fontColor?: string;
     fullUpLineColor?: string;
+    backgroundLineColor?: string;
+    fontColor?: string;
     fullUpFontColor?: string;
+    fontBackgroundColor?: string;
+    fontBackgroundCompleteColor?: string;
 };
 export declare const LinearProgress: (props: LinearProgressProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LinearProgress.js

@@ -2,59 +2,84 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import MuiLinearProgress from "@mui/material/LinearProgress";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
-import { useTheme } from "@mui/material";
+import { useTheme, Stack } from "@mui/material";
 const LinearProgress = (props) => {
-  const { hideValueLabel, height = "8px" } = props;
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { hideValueLabel, height = "8px", minContainerHeight = "30px" } = props;
   const theme = useTheme();
-  const defaultStyleProperties = {
-    lineColor: theme.custom.grey[1500],
-    fontColor: theme.custom.grey[2500],
-    fullUpLineColor: theme.custom.green[400],
-    fullUpFontColor: theme.custom.green[400]
+  const cs = {
+    lineColor: ((_a = props.styleProperties) == null ? void 0 : _a.lineColor) || theme.custom.grey[1500],
+    fontColor: ((_b = props.styleProperties) == null ? void 0 : _b.fontColor) || theme.custom.grey[2500],
+    fullUpLineColor: ((_c = props.styleProperties) == null ? void 0 : _c.fullUpLineColor) || theme.custom.green[400],
+    fullUpFontColor: ((_d = props.styleProperties) == null ? void 0 : _d.fullUpFontColor) || theme.custom.green[400],
+    backgroundLineColor: ((_e = props.styleProperties) == null ? void 0 : _e.backgroundLineColor) || theme.custom.grey[400],
+    fontBackgroundColor: ((_f = props.styleProperties) == null ? void 0 : _f.fontBackgroundColor) || theme.custom.grey[400],
+    fontBackgroundCompleteColor: ((_g = props.styleProperties) == null ? void 0 : _g.fontBackgroundCompleteColor) || theme.custom.green[50]
   };
   const isFull = props.value >= 100;
-  const getStyleProperties = () => {
-    const mergedStyleProperties = {
-      ...defaultStyleProperties,
-      ...props.styleProperties
-    };
-    return {
-      color: isFull ? mergedStyleProperties.fullUpLineColor : mergedStyleProperties.lineColor,
-      fontColor: isFull ? mergedStyleProperties.fullUpFontColor : mergedStyleProperties.fontColor
-    };
+  const currentStyleProperties = {
+    color: isFull ? cs.fullUpLineColor : cs.lineColor,
+    backgroundColor: cs.backgroundLineColor,
+    fontColor: isFull ? cs.fullUpFontColor : cs.fontColor,
+    fontBackgroundColor: isFull ? cs.fontBackgroundCompleteColor : cs.fontBackgroundColor
   };
-  const currentStyleProperties = getStyleProperties();
-  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: "5px" }, children: [
-    /* @__PURE__ */ jsx(Box, { sx: { width: "100%", mr: 1 }, children: /* @__PURE__ */ jsx(
-      MuiLinearProgress,
-      {
-        variant: "determinate",
-        ...props,
-        sx: {
-          "&.MuiLinearProgress-determinate": {
-            backgroundColor: theme.custom.grey[400],
-            borderBottomLeftRadius: height,
-            borderTopLeftRadius: height,
-            borderTopRightRadius: height,
-            borderBottomRightRadius: height,
-            height
-          },
-          "& .MuiLinearProgress-bar": {
-            backgroundColor: currentStyleProperties.color,
-            borderRadius: height
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      flexDirection: "row",
+      width: "100%",
+      justifyContent: "space-between",
+      alignItems: "center",
+      gap: theme.spacing(1),
+      minHeight: minContainerHeight,
+      children: [
+        /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsx(
+          MuiLinearProgress,
+          {
+            variant: "determinate",
+            ...props,
+            sx: {
+              "&.MuiLinearProgress-determinate": {
+                backgroundColor: currentStyleProperties.backgroundColor,
+                borderBottomLeftRadius: height,
+                borderTopLeftRadius: height,
+                borderTopRightRadius: height,
+                borderBottomRightRadius: height,
+                height
+              },
+              "& .MuiLinearProgress-bar": {
+                backgroundColor: currentStyleProperties.color,
+                borderRadius: height
+              }
+            }
           }
-        }
-      }
-    ) }),
-    !hideValueLabel && /* @__PURE__ */ jsx(Box, { sx: { minWidth: 35 }, children: /* @__PURE__ */ jsx(
-      Typography,
-      {
-        variant: isFull ? "body-bold" : "body",
-        sx: { color: currentStyleProperties.fontColor },
-        children: `${Math.round(props.value)}%`
-      }
-    ) })
-  ] });
+        ) }),
+        !hideValueLabel && /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              minWidth: "50px",
+              display: "flex",
+              justifyContent: "center",
+              paddingInline: theme.spacing(0.5),
+              borderRadius: theme.spacing(0.5),
+              backgroundColor: currentStyleProperties.fontBackgroundColor
+            },
+            children: /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: isFull ? "body-bold" : "body",
+                sx: {
+                  color: currentStyleProperties.fontColor
+                },
+                children: `${Math.round(props.value)}%`
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   LinearProgress

package/dist/components/Pagination/PageItems/PageItem.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTheme, Box, PaginationItem, Stack, Typography } from "@mui/material";
 import { FoodsTooltip } from "../../Tooltip/FoodsTooltip.js";
-import { FoodsIcon } from "../../Icons/FoodsIcon.js";
+import { FoodsTags } from "../../Tags/FoodsTags.js";
 const PageItem = (props) => {
   const theme = useTheme();
   const { selected, currentPage } = props;
@@ -29,26 +29,10 @@ const PageItem = (props) => {
   return /* @__PURE__ */ jsx(
     FoodsTooltip,
     {
-      title: tooltipLabel !== void 0 && /* @__PURE__ */ jsxs(Stack, { width: "100%", justifyContent: "center", alignItems: "center", children: [
+      width: "auto",
+      title: tooltipLabel !== void 0 && /* @__PURE__ */ jsxs(Stack, { width: "100%", justifyContent: "center", alignItems: "center", gap: theme.spacing(1), children: [
         /* @__PURE__ */ jsx(Typography, { variant: "body-medium", children: tooltipLabel }),
-        tooltipStatus === true && statusMessage !== void 0 && /* @__PURE__ */ jsxs(
-          Stack,
-          {
-            flexDirection: "row",
-            width: "100%",
-            borderRadius: "4px",
-            bgcolor: theme.custom.green[50],
-            gap: theme.spacing(0.5),
-            color: theme.custom.green[700],
-            alignItems: "center",
-            justifyContent: "center",
-            padding: theme.spacing(0.25, 0.5),
-            children: [
-              /* @__PURE__ */ jsx(FoodsIcon, { size: 1, icon: "check" }),
-              /* @__PURE__ */ jsx(Typography, { variant: "body-bold", sx: { color: theme.custom.green[700] }, children: statusMessage })
-            ]
-          }
-        )
+        tooltipStatus === true && statusMessage !== void 0 && /* @__PURE__ */ jsx(FoodsTags, { variant: "tags-green", startIcon: "check", label: statusMessage, disabled: true })
       ] }),
       children: /* @__PURE__ */ jsx(
         Box,

package/dist/components/index.d.ts

@@ -29,7 +29,6 @@ export * from './Radio';
 export * from './RichTextEditor';
 export * from './Search';
 export * from './Select';
-export * from './Ssq';
 export * from './Tabs';
 export * from './Tags';
 export * from './Text';

package/dist/main.js

@@ -126,7 +126,6 @@ import { RadioBoolean } from "./components/Radio/RadioBoolean.js";
 import { RichTextEditor } from "./components/RichTextEditor/RichTextEditor.js";
 import { FoodsSearch } from "./components/Search/FoodsSearch.js";
 import { FoodsSelect, FoodsSelectServerPagination } from "./components/Select/FoodsSelect/FoodsSelect.js";
-import { SsqCard } from "./components/Ssq/SsqCard.js";
 import { ButtonTabs } from "./components/Tabs/ButtonTabs.js";
 import { SectionTabs } from "./components/Tabs/SectionTabs/SectionTabs.js";
 import { BoxStyled, SecondaryTabs } from "./components/Tabs/SecondaryTabs.js";
@@ -286,7 +285,6 @@ export {
   SolidGreyBox,
   SpecialTab,
   SpecialTabs,
-  SsqCard,
   SubMenu,
   SuggestionBlock,
   TertiaryToggleButton,

package/dist/themes/common/components.js

@@ -366,8 +366,7 @@ const components = {
               }
             } : {
               ":hover": {
-                // cursor: "default",
-                backgroundColor: theme.custom.grey[400]
+                cursor: "default"
               }
             }
           },
@@ -399,8 +398,7 @@ const components = {
               }
             } : {
               ":hover": {
-                cursor: "default",
-                backgroundColor: theme.custom.grey[400]
+                cursor: "default"
               }
             }
           },
@@ -432,8 +430,7 @@ const components = {
               }
             } : {
               ":hover": {
-                cursor: "default",
-                backgroundColor: theme.custom.grey[400]
+                cursor: "default"
               }
             }
           },
@@ -465,8 +462,7 @@ const components = {
               }
             } : {
               ":hover": {
-                cursor: "default",
-                backgroundColor: theme.custom.grey[400]
+                cursor: "default"
               }
             }
           },
@@ -499,8 +495,7 @@ const components = {
               }
             } : {
               ":hover": {
-                cursor: "default",
-                backgroundColor: theme.custom.grey[400]
+                cursor: "default"
               }
             }
           },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foodpilot/foods",
   "private": false,
-  "version": "2.11.20",
+  "version": "2.11.22",
   "type": "module",
   "main": "./dist/main.js",
   "module": "./dist/main.js",

package/dist/components/Ssq/SsqCard.d.ts

@@ -1,26 +0,0 @@
-import { ElementType } from 'react';
-export type SsqCardProps = {
-    heading: {
-        title: string;
-        description: string;
-        contentUrl?: string;
-        properties?: {
-            "@id": string;
-            title: string;
-            fields: {
-                "@id": string;
-                type: string;
-            }[];
-        }[];
-    };
-    progress: {
-        value: number;
-        label: string;
-    };
-    link: {
-        component: ElementType;
-        to: string;
-        label: string;
-    };
-};
-export declare const SsqCard: (props: SsqCardProps) => JSX.Element | null;

package/dist/components/Ssq/SsqCard.js

@@ -1,57 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
-import Box from "@mui/material/Box";
-import MuiCard from "@mui/material/Card";
-import CardActions from "@mui/material/CardActions";
-import CardContent from "@mui/material/CardContent";
-import Button from "@mui/material/Button";
-import Typography from "@mui/material/Typography";
-import { LinearProgress } from "../LinearProgress.js";
-const SsqCard = (props) => {
-  return /* @__PURE__ */ jsx(Box, { sx: { minWidth: 205 }, children: /* @__PURE__ */ jsxs(MuiCard, { variant: "outlined", style: { borderRadius: "10px" }, children: [
-    /* @__PURE__ */ jsxs(
-      CardContent,
-      {
-        style: {
-          textAlign: "left",
-          marginLeft: "0.5rem",
-          marginRight: "0.5rem"
-        },
-        children: [
-          props.heading.contentUrl && /* @__PURE__ */ jsx("img", { src: props.heading.contentUrl, width: "30", alt: "icon-ssq" }),
-          /* @__PURE__ */ jsx("div", { style: { minHeight: "100px", marginTop: "0.5rem" }, children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", component: "div", style: { fontWeight: "bold" }, children: props.heading.title }) }),
-          /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "div", children: props.progress.label }),
-          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(LinearProgress, { value: props.progress.value }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      CardActions,
-      {
-        style: {
-          textAlign: "left",
-          marginLeft: "0.5rem",
-          marginRight: "0.5rem"
-        },
-        children: /* @__PURE__ */ jsxs(Box, { sx: { color: "#AA062B" }, children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "text",
-              size: "small",
-              color: "inherit",
-              style: { textTransform: "initial", fontWeight: "bold" },
-              component: props.link.component,
-              to: props.link.to,
-              children: props.link.label
-            }
-          ),
-          /* @__PURE__ */ jsx(ArrowForwardIcon, { color: "inherit", style: { verticalAlign: "middle" } })
-        ] })
-      }
-    )
-  ] }) });
-};
-export {
-  SsqCard
-};

package/dist/components/Ssq/index.d.ts

@@ -1 +0,0 @@
-export * from './SsqCard';