@m4l/components 0.2.36 → 1.0.0

package/components/hook-form/RHFSelect/index.c6c60ecc.js

@@ -1,29 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useFormContext, Controller } from "react-hook-form";
-import { TextField } from "@mui/material";
-function RHFSelect({ name, children, ...other }) {
-  const { control } = useFormContext();
-  return /* @__PURE__ */ jsx(
-    Controller,
-    {
-      name,
-      control,
-      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
-        TextField,
-        {
-          ...field,
-          select: true,
-          fullWidth: true,
-          SelectProps: { native: true },
-          error: !!error,
-          helperText: error?.message,
-          ...other,
-          children
-        }
-      )
-    }
-  );
-}
-export {
-  RHFSelect as R
-};

package/components/hook-form/RHFTextField/index.fa97889a.js

@@ -1,325 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useModuleSkeleton, useEnvironment } from "@m4l/core";
-import { styled, Skeleton, generateUtilityClasses, TextField, InputAdornment, generateUtilityClass } from "@mui/material";
-import { forwardRef, useState, useEffect } from "react";
-import { I as IconButton } from "../../mui_extended/IconButton/index.b0ee4965.js";
-import { useFormContext, Controller } from "react-hook-form";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.0718eeac.js";
-import { H as HelperText } from "../../HelperText/index.81c5d349.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.2622ee40.js";
-const SkeletonTextFieldRoot = styled("div")(() => ({
-  display: "flex",
-  flexDirection: "column",
-  width: "100%",
-  gap: "4px"
-}));
-const WrapperSkeletonRHFTextField = styled("div")(({ theme }) => ({
-  display: "flex",
-  width: "100%",
-  alignItems: "center",
-  justifyContent: "space-between",
-  border: `1px solid ${theme.palette.divider}`,
-  padding: "12px 14px",
-  borderRadius: theme.spacing(1),
-  gap: "4px"
-}));
-const RHFTEXTFIELD_ROOT_TEST_ID = "RHFTextFieldRoot";
-const RHFTEXTFIELD_INPUT_TEST_ID = "RHFTextFieldInput";
-const RHFTEXTFIELD_PREFIX = "RHFTextField";
-const getNameDataTestId$1 = (KEY) => {
-  return `${RHFTEXTFIELD_PREFIX}-${KEY}`;
-};
-const SkeletonTextField = (props) => {
-  const { skeletonWidth, skeletonHeight, ownerState, classes, hasLabel } = props;
-  const { type: variant } = ownerState;
-  return /* @__PURE__ */ jsxs(SkeletonTextFieldRoot, { children: [
-    (hasLabel || hasLabel?.length === 0) && /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", height: "16px" }),
-    /* @__PURE__ */ jsx(
-      WrapperSkeletonRHFTextField,
-      {
-        className: classes.skeleton,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1("skeleton") } : {},
-        children: variant === "text" ? /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletonHeight }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletonHeight }),
-          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: "16px", height: "16px" })
-        ] })
-      }
-    )
-  ] });
-};
-const RHFTextFieldRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LRHFTextField?.styleOverrides
-}));
-styled("div")(({ theme }) => ({
-  display: "flex",
-  width: "100%",
-  alignItems: "center",
-  border: `1px solid ${theme.palette.divider}`,
-  padding: "12px 14px",
-  borderRadius: theme.spacing(1)
-}));
-const componentName = "M4LRHFTextField";
-generateUtilityClasses(
-  componentName,
-  [
-    "root",
-    "label",
-    "skeleton",
-    "variantText",
-    "variantPassword",
-    "variantInfo",
-    "isDisabled",
-    "variantSuccess",
-    "variantWarning",
-    "variantError",
-    "sizeSmall",
-    "sizeMedium",
-    "isFocus",
-    "isTabSelected"
-  ]
-);
-const getRHFTextFieldClassesByState = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.type === "password" ? "variantPassword" : "variantText",
-      ownerState.size === "small" && "sizeSmall",
-      ownerState.size === "medium" && "sizeMedium",
-      ownerState.isFocus && "isFocus",
-      ownerState.isTabSelected && "isTabSelected",
-      ownerState.disabled && "isDisabled",
-      ownerState.variant === "info" && "variantInfo",
-      ownerState.variant === "success" && "variantSuccess",
-      ownerState.variant === "warning" && "variantWarning",
-      ownerState.variant === "error" && "variantError"
-    ],
-    label: ["label"],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
-  return {
-    ...composedClasses
-  };
-};
-const RHFTextField = forwardRef((props, ref) => {
-  const {
-    name: nameRHF,
-    autoComplete = "off",
-    skeletonWidth = "100%",
-    skeletonHeight = "18px",
-    type,
-    label,
-    size = "small",
-    startIcon,
-    endIcon,
-    variant,
-    helperMessage = "",
-    disabled,
-    mandatory,
-    mandatoryMessage,
-    helperText,
-    ...other
-  } = props;
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext();
-  const [currentVariant, setCurrentVariant] = useState(null);
-  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  useEffect(() => {
-    if (errors[nameRHF]) {
-      setCurrentVariant("error");
-    } else if (variant) {
-      setCurrentVariant(variant);
-    } else {
-      setCurrentVariant(null);
-    }
-  }, [errors[nameRHF], variant, control]);
-  const ownerState = {
-    type: type === "password" ? "password" : "text",
-    size: !isDesktop ? "medium" : size,
-    isFocus: !isSkeleton ? isFocus : false,
-    isTabSelected: !isSkeleton ? isTabSelected : false,
-    variant: currentVariant,
-    disabled
-  };
-  const classes = getRHFTextFieldClassesByState(ownerState);
-  return /* @__PURE__ */ jsx(
-    RHFTextFieldRoot,
-    {
-      className: classes.root,
-      tabIndex: 0,
-      onFocus: handlerFocus,
-      onBlur: handlerOnBlur,
-      onKeyUp: handlerOnKeyUp,
-      role: "textbox",
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: `${RHFTEXTFIELD_ROOT_TEST_ID}_${nameRHF}` } : {},
-      children: !isSkeleton ? /* @__PURE__ */ jsx(
-        Controller,
-        {
-          name: nameRHF,
-          control,
-          render: ({ field: { onChange, value, name, ref: inputRef }, fieldState: { error } }) => {
-            const onInternalChange = (event) => {
-              if (type === "number") {
-                if (event.target.value) {
-                  onChange(Number(event.target.value));
-                  return;
-                }
-              }
-              onChange(event);
-            };
-            return /* @__PURE__ */ jsxs(Fragment, { children: [
-              label && /* @__PURE__ */ jsx(
-                FieldLabel,
-                {
-                  label,
-                  mandatory,
-                  mandatoryMessage,
-                  helperMessage
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                TextField,
-                {
-                  variant: "outlined",
-                  disabled,
-                  ref,
-                  inputRef,
-                  InputLabelProps: { shrink: true },
-                  autoComplete,
-                  onChange: onInternalChange,
-                  value: type === "number" ? isNaN(value) ? 0 : value : value || "",
-                  name,
-                  inputProps: {
-                    ...process.env.NODE_ENV !== "production" ? {
-                      [TEST_PROP_ID]: `${RHFTEXTFIELD_INPUT_TEST_ID}_${name}`
-                    } : {}
-                  },
-                  fullWidth: true,
-                  error: !!error,
-                  type,
-                  ...startIcon || endIcon ? {
-                    InputProps: {
-                      ...{
-                        ...startIcon ? {
-                          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: startIcon })
-                        } : {},
-                        ...endIcon ? {
-                          endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: endIcon })
-                        } : {}
-                      }
-                    }
-                  } : {},
-                  ...other
-                }
-              ),
-              currentVariant ? /* @__PURE__ */ jsx(
-                HelperText,
-                {
-                  variant: currentVariant,
-                  message: currentVariant !== "error" ? helperMessage : error?.message
-                }
-              ) : null
-            ] });
-          }
-        }
-      ) : /* @__PURE__ */ jsx(
-        SkeletonTextField,
-        {
-          classes,
-          skeletonWidth,
-          skeletonHeight,
-          ownerState,
-          hasLabel: label
-        }
-      )
-    }
-  );
-});
-RHFTextField.displayName = "RHFTextField";
-const RHFTextFieldPasswordRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LRHFTextFieldPassword?.styleOverrides
-}));
-generateUtilityClasses(
-  "M4LRHFTextFieldPassword",
-  [
-    "root"
-  ]
-);
-function getRHFTextFieldPasswordUtilityClass(slot) {
-  return generateUtilityClass("M4LRHFTextFieldPassword", slot);
-}
-const useUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFTextFieldPasswordUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const RHFTEXTFIELDPASSWORD_PREFIX = "RHFTextFieldPassword";
-const getNameDataTestId = (KEY) => {
-  return `${RHFTEXTFIELDPASSWORD_PREFIX}-${KEY}`;
-};
-const RHFTextFieldPassword = (props) => {
-  const {
-    name,
-    label,
-    skeletonWidth,
-    skeletonHeight,
-    size,
-    mandatory,
-    mandatoryMessage,
-    helperMessage
-  } = props;
-  const [showPassword, setShowPassword] = useState(false);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const classes = useUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    RHFTextFieldPasswordRoot,
-    {
-      className: classes.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-      children: /* @__PURE__ */ jsx(
-        RHFTextField,
-        {
-          name,
-          label,
-          type: showPassword ? "text" : "password",
-          autoComplete: "on",
-          skeletonWidth,
-          skeletonHeight,
-          size,
-          mandatory,
-          mandatoryMessage,
-          helperMessage,
-          InputProps: {
-            endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                onClick: () => setShowPassword(!showPassword),
-                variant: "line",
-                src: showPassword ? `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye.svg` : `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye_off.svg`
-              }
-            ) })
-          }
-        }
-      )
-    }
-  );
-};
-export {
-  RHFTextField as R,
-  RHFTEXTFIELD_ROOT_TEST_ID as a,
-  RHFTEXTFIELD_INPUT_TEST_ID as b,
-  RHFTEXTFIELD_PREFIX as c,
-  RHFTextFieldPassword as d
-};

package/components/maps/index.13bb982c.js

@@ -1,7 +0,0 @@
-function bearingRawToCSS(gpsBearing, offsetRotate) {
-  const rotation = -((360 + offsetRotate - gpsBearing) % 360);
-  return rotation;
-}
-export {
-  bearingRawToCSS as b
-};

package/components/mui_extended/Accordion/index.d08a0361.js

@@ -1,142 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { generateUtilityClasses, generateUtilityClass, styled, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
-import { I as IconButton } from "../IconButton/index.b0ee4965.js";
-import { useEnvironment } from "@m4l/core";
-import { unstable_composeClasses } from "@mui/base";
-import clsx from "clsx";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../../test/getNameDataTestId.0faeade8.js";
-import { I as Icon } from "../../Icon/index.ee7b85c9.js";
-import { T as Typography } from "../Typography/index.a1e774a2.js";
-const componentName = "M4LAccordion";
-generateUtilityClasses(componentName, [
-  "root",
-  "endIcon",
-  "labelIcon",
-  "label",
-  "content"
-]);
-function getAccordionUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const accordionUtilityClasses = () => {
-  const slots = {
-    root: ["root"],
-    endIcon: ["endIcon"],
-    labelIcon: ["labelIcon"],
-    label: ["label"],
-    content: ["content"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getAccordionUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  borderRadius: theme.spacing(0.5),
-  height: theme.spacing(4.5),
-  minHeight: theme.spacing(4.5),
-  backgroundColor: theme.palette.background.header,
-  paddingLeft: theme.spacing(2),
-  paddingRight: theme.spacing(2),
-  marginBottom: "0px"
-}));
-styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  gap: theme.spacing(2)
-}));
-const AccordionRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LAccordion?.styleOverrides
-}));
-const COMPONENT_PREFIX = "m4l-accordion";
-function Accordion(props) {
-  const {
-    label,
-    SKTWidht,
-    SKTHeight,
-    children,
-    accordionProps,
-    summaryProps,
-    labelIcon,
-    className,
-    dataTestId = ""
-  } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const classes = accordionUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    AccordionRoot,
-    {
-      className: clsx(classes.root, className),
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId(
-          COMPONENT_PREFIX,
-          "root",
-          dataTestId
-        )
-      } : {},
-      children: /* @__PURE__ */ jsxs(
-        Accordion$1,
-        {
-          variant: "outlined",
-          square: true,
-          TransitionProps: { unmountOnExit: true },
-          defaultExpanded: true,
-          ...accordionProps,
-          children: [
-            /* @__PURE__ */ jsx(
-              AccordionSummary,
-              {
-                "aria-controls": "expanded-content",
-                disableTouchRipple: false,
-                expandIcon: /* @__PURE__ */ jsx(
-                  IconButton,
-                  {
-                    "aria-label": "settings",
-                    src: `${host_static_assets}/${environment_assets}/frontend/components/accordion/assets/icons/expanded.svg`,
-                    className: classes.endIcon
-                  }
-                ),
-                ...summaryProps,
-                children: /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: classes.labelIcon,
-                    ...process.env.NODE_ENV !== "production" ? {
-                      [TEST_PROP_ID]: getNameDataTestId(
-                        COMPONENT_PREFIX,
-                        "labelIcon",
-                        dataTestId
-                      )
-                    } : {},
-                    children: [
-                      labelIcon && /* @__PURE__ */ jsx(Icon, { src: labelIcon }),
-                      /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          className: classes.label,
-                          variant: "subtitle",
-                          skeletonWidth: SKTWidht,
-                          skeletongHeight: SKTHeight,
-                          children: label
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(AccordionDetails, { className: classes.content, children })
-          ]
-        }
-      )
-    }
-  );
-}
-export {
-  Accordion as A
-};

package/components/mui_extended/Avatar/index.fb9ad158.js

@@ -1,63 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { Skeleton, generateUtilityClasses, generateUtilityClass, styled, Avatar as Avatar$1 } from "@mui/material";
-import { useModuleSkeleton } from "@m4l/core";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { unstable_composeClasses } from "@mui/base";
-import clsx from "clsx";
-const AVATAR_PREFIX = "M4LAvatar";
-const getNameAvatarDataTestId = (KEY) => {
-  return `${AVATAR_PREFIX}-${KEY}`;
-};
-const SkeletonAvatar = (props) => {
-  const { className } = props;
-  return /* @__PURE__ */ jsx(
-    Skeleton,
-    {
-      variant: "circular",
-      width: "32px",
-      height: "32px",
-      className,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameAvatarDataTestId("skeleton") } : {}
-    }
-  );
-};
-const componentName = "M4LAvatar";
-generateUtilityClasses(componentName, [
-  "root",
-  "skeleton"
-]);
-function getAvatarUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useAvatarUtilityClasses = () => {
-  const slots = {
-    root: ["root"],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getAvatarUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const AvatarRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LAvatar?.styleOverrides
-}));
-const Avatar = forwardRef(
-  ({ color = "default", sx, className, ...other }, ref) => {
-    const isSkeleton = useModuleSkeleton();
-    const classes = useAvatarUtilityClasses();
-    return /* @__PURE__ */ jsx(
-      AvatarRoot,
-      {
-        className: clsx(classes.root, className),
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameAvatarDataTestId("root") } : {},
-        children: !isSkeleton ? /* @__PURE__ */ jsx(Avatar$1, { ref, ...other }) : /* @__PURE__ */ jsx(SkeletonAvatar, { className: classes.skeleton })
-      }
-    );
-  }
-);
-Avatar.displayName = "Avatar";
-export {
-  Avatar as A
-};

package/components/mui_extended/Badge/index.2a3aef2c.js

@@ -1,30 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { generateUtilityClasses, styled, Badge as Badge$1 } from "@mui/material";
-import "@mui/base";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-const componentName = "M4LBadge";
-const badgeClasses = generateUtilityClasses(componentName, [
-  "root"
-]);
-const BadgeRoot = styled("div")(({ theme }) => ({
-  display: "flex",
-  ...theme.components?.M4LBadge?.styleOverrides
-}));
-const BADGE_PREFIX = "M4LBadge";
-const getNameBadgeDataTestId = (ELEMENTKEY, ID) => {
-  return `${BADGE_PREFIX}-${ELEMENTKEY}-${ID}`;
-};
-const Badge = (props) => {
-  const { children, dataTestId = "", ...others } = props;
-  return /* @__PURE__ */ jsx(
-    BadgeRoot,
-    {
-      className: badgeClasses.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameBadgeDataTestId("root", dataTestId) } : {},
-      children: /* @__PURE__ */ jsx(Badge$1, { ...others, children })
-    }
-  );
-};
-export {
-  Badge as B
-};

package/components/mui_extended/BoxIcon/index.d61e7ac5.js

@@ -1,22 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Box } from "@mui/material";
-function BoxIcon({ src, sx }) {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      component: "span",
-      sx: {
-        width: 20,
-        height: 20,
-        display: "inline-block",
-        bgcolor: "currentColor",
-        mask: `url(${src}) no-repeat center / contain`,
-        WebkitMask: `url(${src}) no-repeat center / contain`,
-        ...sx
-      }
-    }
-  );
-}
-export {
-  BoxIcon as B
-};