@m4l/components 0.1.75 → 0.1.77

package/components/modal/WindowConfirm.cb37bc58.js

@@ -0,0 +1,122 @@
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import "react";
+import { u as useModal } from "../../hooks/useModal/index.de522a10.js";
+import { A as Actions } from "../CommonActions/components/Actions/index.3eba9d91.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.b748a38e.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.a7d92e66.js";
+import "react-hook-form";
+import { Typography } from "@mui/material";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.4288f9fc.js";
+import "clsx";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import "../../react-draggable.7abb5d0a.js";
+import "../Resizeable/index.9a9c79a4.js";
+import "@m4l/graphics";
+import "../Icon/index.ecb63e65.js";
+import { m as modalUtilityClasses } from "./index.a0978193.js";
+import { I as Image } from "../Image/index.c18ebf5a.js";
+import "../mui_extended/IconButton/index.fc5b7c2d.js";
+import "../mui_extended/Accordion/index.12b1339a.js";
+import "../mui_extended/Typography/index.443590d6.js";
+import "../mui_extended/Avatar/index.75e6ed57.js";
+import "react-router-dom";
+import "../mui_extended/Badge/index.8c2b8b66.js";
+import "@mui/lab";
+import "../mui_extended/Popover/index.9f35d0eb.js";
+import "../mui_extended/MenuActions/index.f5b1c022.js";
+import "../mui_extended/Pager/index.435af0df.js";
+import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Tooltip/index.5a795dcd.js";
+import "zustand";
+import "../areas/contexts/AreasContext/index.c8147e8e.js";
+import "../areas/components/AreasAdmin/index.cc4cbf56.js";
+import "zustand/shallow";
+import "../ScrollBar/index.bbe48f4d.js";
+import "../areas/components/AreasViewer/index.9c2aaaeb.js";
+import "../LinearProgressIndeterminate/index.60dabc06.js";
+import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
+import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
+const dictionary = {
+  MESSAGE: "common_actions.confirm_quit_msg"
+};
+const MessageIlustration = (props) => {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    variant
+  } = useModal();
+  const {
+    msg = getLabel(dictionary.MESSAGE),
+    classes,
+    title
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const illustrationWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustrator_confirm_warning.svg`;
+  const illustrationDanger = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustrator_confirm_danger.svg`;
+  const illustrationSuccess = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustrator_confirm_success.svg`;
+  const illustrationInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustrator_confirm_info.svg`;
+  return /* @__PURE__ */ jsx("div", {
+    className: classes.containerMassageIlustration,
+    children: /* @__PURE__ */ jsxs("div", {
+      className: classes.modalContent,
+      children: [/* @__PURE__ */ jsx("div", {
+        className: classes.illustrationContainer,
+        children: /* @__PURE__ */ jsx(Image, {
+          className: classes.illustration,
+          src: variant === "warning" ? illustrationWarning : variant === "delete" ? illustrationDanger : variant === "success" ? illustrationSuccess : illustrationInfo
+        })
+      }), /* @__PURE__ */ jsx("div", {
+        children: /* @__PURE__ */ jsx(Typography, {
+          variant: "subtitle",
+          children: title
+        })
+      }), /* @__PURE__ */ jsx("div", {
+        className: classes.messageContainer,
+        children: /* @__PURE__ */ jsx(Typography, {
+          variant: "body",
+          children: msg
+        })
+      })]
+    })
+  });
+};
+const WindowConfirm = (props) => {
+  const {
+    variant,
+    title,
+    onClickCancel,
+    onClickIntro,
+    msg
+  } = props;
+  const {
+    closeModal
+  } = useModal();
+  const onCloseCancel = () => {
+    onClickCancel && onClickCancel();
+    closeModal();
+  };
+  const classes = modalUtilityClasses({
+    variant
+  });
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(MessageIlustration, {
+      classes,
+      msg,
+      title
+    }), /* @__PURE__ */ jsxs(Actions, {
+      children: [/* @__PURE__ */ jsx(ActionCancel, {
+        onClick: onCloseCancel
+      }), /* @__PURE__ */ jsx(ActionIntro, {
+        onClick: onClickIntro
+      })]
+    })]
+  });
+};
+export {
+  WindowConfirm as W
+};

package/components/modal/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LModal";

package/components/modal/classes/index.d.ts

@@ -0,0 +1,19 @@
+import { ModalClassesType } from './types';
+import { OwnerStateWindowConfim } from '../WindowConfirm/types';
+export declare const modalClasses: ModalClassesType;
+export declare function getModalUtilityClass(slot: string): string;
+export declare const modalUtilityClasses: (ownerState: OwnerStateWindowConfim) => {
+    root: string;
+    headerContainer: string;
+    windowBaseRoot: string;
+    containerWindow: string;
+    iconHeader: string;
+    titleHeader: string;
+    iconCloseHeader: string;
+    containerMassageIlustration: string;
+    modalContent: string;
+    illustrationContainer: string;
+    messageContainer: string;
+    illustration: string;
+    windowConfirm: string;
+};

package/components/modal/classes/types.d.ts

@@ -0,0 +1,22 @@
+import { modalUtilityClasses } from ".";
+export interface ModalClassesType {
+    root: string;
+    windowBaseRoot: string;
+    containerWindow: string;
+    headerContainer: string;
+    iconHeader: string;
+    titleHeader: string;
+    iconCloseHeader: string;
+    containerMassageIlustration: string;
+    modalContent: string;
+    illustrationContainer: string;
+    messageContainer: string;
+    illustration: string;
+    windowConfirm: string;
+    variantDelete: string;
+    variantWarning: string;
+    variantInfo: string;
+    variantPrimary: string;
+}
+export declare type ModalClassesKey = keyof ModalClassesType;
+export declare type Classes = ReturnType<typeof modalUtilityClasses>;

package/components/modal/index.a0978193.js

@@ -0,0 +1,84 @@
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import "../../react-draggable.7abb5d0a.js";
+import "react";
+import "../../contexts/ModalContext/index.dee85a61.js";
+import "../Resizeable/index.9a9c79a4.js";
+import "react/jsx-runtime";
+import "@m4l/graphics";
+import "../Icon/index.ecb63e65.js";
+import "clsx";
+import "@m4l/core";
+import { unstable_composeClasses } from "@mui/base";
+import "../CommonActions/components/Actions/index.3eba9d91.js";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.4288f9fc.js";
+import "react-hook-form";
+import "../mui_extended/IconButton/index.fc5b7c2d.js";
+import "../mui_extended/Accordion/index.12b1339a.js";
+import "../mui_extended/Typography/index.443590d6.js";
+import "../mui_extended/Avatar/index.75e6ed57.js";
+import "react-router-dom";
+import "../mui_extended/Badge/index.8c2b8b66.js";
+import "../Image/index.c18ebf5a.js";
+import "@mui/lab";
+import "../mui_extended/Popover/index.9f35d0eb.js";
+import "../mui_extended/MenuActions/index.f5b1c022.js";
+import "../mui_extended/Pager/index.435af0df.js";
+import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Tooltip/index.5a795dcd.js";
+import "zustand";
+import "../areas/contexts/AreasContext/index.c8147e8e.js";
+import "../areas/components/AreasAdmin/index.cc4cbf56.js";
+import "zustand/shallow";
+import "../ScrollBar/index.bbe48f4d.js";
+import "../areas/components/AreasViewer/index.9c2aaaeb.js";
+import "../LinearProgressIndeterminate/index.60dabc06.js";
+import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
+import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
+const componentName = "M4LModal";
+generateUtilityClasses(componentName, [
+  "root",
+  "windowBaseRoot",
+  "containerWindow",
+  "headerContainer",
+  "iconHeader",
+  "titleHeader",
+  "iconCloseHeader",
+  "containerMassageIlustration",
+  "modalContent",
+  "illustrationContainer",
+  "messageContainer",
+  "illustration",
+  "windowConfirm",
+  "variantDelete",
+  "variantWarning",
+  "variantInfo",
+  "variantPrimary"
+]);
+function getModalUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const modalUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState?.variant === "delete" && "variantDelete", ownerState.variant === "warning" && "variantWarning", ownerState.variant === "info" && "variantInfo", ownerState.variant === "success" && "variantSuccess"],
+    windowBaseRoot: ["windowBaseRoot"],
+    containerWindow: ["containerWindow"],
+    headerContainer: ["headerContainer"],
+    iconHeader: ["iconHeader"],
+    titleHeader: ["titleHeader"],
+    iconCloseHeader: ["iconCloseHeader"],
+    containerMassageIlustration: ["containerMassageIlustration"],
+    modalContent: ["modalContent"],
+    illustrationContainer: ["illustrationContainer"],
+    messageContainer: ["messageContainer"],
+    illustration: ["illustration"],
+    windowConfirm: ["windowConfirm"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getModalUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+export {
+  modalUtilityClasses as m
+};

package/components/modal/index.d.ts

@@ -1,4 +1,5 @@
 export { ModalDialog } from './ModalDialog';
 export * from './ModalDialog/dictionary';
-export * from './WindowConfirm';
+export { WindowConfirm } from './WindowConfirm';
+export type { WindowConfirmProps } from './WindowConfirm/types';
 export * from './WindowBase';

package/components/mui_extended/Accordion/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LAccordion";

package/components/mui_extended/Accordion/classes/index.d.ts

@@ -0,0 +1,10 @@
+import { AccordionClassesType } from './types';
+export declare const accordionClasses: AccordionClassesType;
+export declare function getAccordionUtilityClass(slot: string): string;
+export declare const accordionUtilityClasses: () => {
+    label: string;
+    root: string;
+    content: string;
+    endIcon: string;
+    labelIcon: string;
+};

package/components/mui_extended/Accordion/classes/types.d.ts

@@ -0,0 +1,10 @@
+import { accordionUtilityClasses } from ".";
+export interface AccordionClassesType {
+    root: string;
+    endIcon: string;
+    labelIcon: string;
+    label: string;
+    content: string;
+}
+export declare type AccordionClassesKey = keyof AccordionClassesType;
+export declare type Classes = ReturnType<typeof accordionUtilityClasses>;

package/components/mui_extended/Accordion/index.12b1339a.js

@@ -0,0 +1,127 @@
+import { generateUtilityClasses, generateUtilityClass, styled, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
+import { I as IconButton } from "../IconButton/index.fc5b7c2d.js";
+import { useEnvironment } from "@m4l/core";
+import { unstable_composeClasses } from "@mui/base";
+import { I as Icon } from "../../Icon/index.ecb63e65.js";
+import { T as Typography } from "../Typography/index.443590d6.js";
+import clsx from "clsx";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+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 ICON_PREFIX = "M4LAccordion";
+const getNameAccordionDataTestId = (KEY) => {
+  return `${ICON_PREFIX}-${KEY}`;
+};
+function Accordion(props) {
+  const {
+    label,
+    SKTWidht,
+    SKTHeight,
+    children,
+    accordionProps,
+    summaryProps,
+    labelIcon,
+    className
+  } = 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]: getNameAccordionDataTestId("root")
+    } : {},
+    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]: getNameAccordionDataTestId("labelIcon")
+          } : {},
+          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/Accordion/tests/constants.d.ts

@@ -0,0 +1 @@
+export declare const ICON_PREFIX = "M4LAccordion";

package/components/mui_extended/Accordion/tests/utils.d.ts

@@ -0,0 +1,2 @@
+import type { AccordionClassesKey } from '../classes/types';
+export declare const getNameAccordionDataTestId: (KEY: AccordionClassesKey) => string;

package/components/mui_extended/Accordion/types.d.ts

@@ -2,8 +2,9 @@ import { AccordionProps as MUIAccordionProps, AccordionSummaryProps } from '@mui
 import type { ReactNode } from 'react';
 export declare type AccordionProps = {
     label: string;
+    className?: string;
     children: ReactNode;
-    accordionProps?: MUIAccordionProps;
+    accordionProps?: Omit<MUIAccordionProps, 'sx'>;
     summaryProps?: AccordionSummaryProps;
     labelIcon?: string;
     SKTWidht?: string | number;

package/components/mui_extended/Avatar/{index.1e1a91a3.js → index.75e6ed57.js}

@@ -4,6 +4,7 @@ import { useModuleSkeleton } from "@m4l/core";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { jsx } from "react/jsx-runtime";
 import { unstable_composeClasses } from "@mui/base";
+import clsx from "clsx";
 const AVATAR_PREFIX = "M4LAvatar";
 const getNameAvatarDataTestId = (KEY) => {
   return `${AVATAR_PREFIX}-${KEY}`;
@@ -46,12 +47,13 @@ const AvatarRoot = styled("div")(({ theme }) => ({
 const Avatar = forwardRef(({
   color = "default",
   sx,
+  className,
   ...other
 }, ref) => {
   const isSkeleton = useModuleSkeleton();
   const classes = useAvatarUtilityClasses();
   return /* @__PURE__ */ jsx(AvatarRoot, {
-    className: classes.root,
+    className: clsx(classes.root, className),
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameAvatarDataTestId("root")
     } : {},

package/components/mui_extended/Badge/Badge.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BadgeProps } from "./types";
+export declare const Badge: (props: BadgeProps) => import("react").JSX.Element;

package/components/mui_extended/Badge/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LBadge";

package/components/mui_extended/Badge/classes/index.d.ts

@@ -0,0 +1,6 @@
+import { BabgeClassesType } from './types';
+export declare const badgeClasses: BabgeClassesType;
+export declare function getBadgeUtilityClass(slot: string): string;
+export declare const badgeUtilityClasses: () => {
+    root: string;
+};

package/components/mui_extended/Badge/classes/types.d.ts

@@ -0,0 +1,6 @@
+import { badgeUtilityClasses } from ".";
+export interface BabgeClassesType {
+    root: string;
+}
+export declare type BadgeClassesKey = keyof BabgeClassesType;
+export declare type Classes = ReturnType<typeof badgeUtilityClasses>;

package/components/mui_extended/Badge/index.8c2b8b66.js

@@ -0,0 +1,36 @@
+import { generateUtilityClasses, styled, Badge as Badge$1 } from "@mui/material";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { jsx } from "react/jsx-runtime";
+import "@mui/base";
+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/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps } from './types';

package/components/mui_extended/Badge/tests/constants.d.ts

@@ -0,0 +1 @@
+export declare const BADGE_PREFIX = "M4LBadge";

package/components/mui_extended/Badge/tests/utils.d.ts

@@ -0,0 +1,2 @@
+import { BadgeClassesKey } from '../classes/types';
+export declare const getNameBadgeDataTestId: (ELEMENTKEY: BadgeClassesKey, ID: string) => string;

package/components/mui_extended/Badge/types.d.ts

@@ -0,0 +1,4 @@
+import { BadgeProps as MUIBadgeProps } from "@mui/material";
+export interface BadgeProps extends MUIBadgeProps {
+    dataTestId: string;
+}

package/components/mui_extended/Button/{index.aebbab34.js → index.4288f9fc.js}

@@ -4,7 +4,7 @@ import MuiButton from "@mui/material/Button";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { I as Image } from "../../Image/index.8aae9322.js";
+import { I as Image } from "../../Image/index.c18ebf5a.js";
 import { unstable_composeClasses } from "@mui/base";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { LoadingButton as LoadingButton$1 } from "@mui/lab";
@@ -165,7 +165,7 @@ const useUtilityClasses = (onwerState) => {
 const LoadingButtonRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LoadingButton?.styleOverrides
 }));
-const LOADINGBUTTON_PREFIX = "LoadingButton";
+const LOADINGBUTTON_PREFIX = "M4LoadingButton";
 const getNameDataTestId = (KEY) => {
   return `${LOADINGBUTTON_PREFIX}-${KEY}`;
 };
@@ -173,14 +173,17 @@ const LoadingButton = (props) => {
   const {
     children,
     skeletonWidth = "100%",
+    size = "small",
+    variant = "contained",
+    disabled,
     className,
     ...other
   } = props;
   const isSkeleton = useModuleSkeleton();
   const ownerState = {
-    size: other.size,
-    variant: other.variant,
-    isDisabled: other.disabled
+    size,
+    variant,
+    isDisabled: disabled
   };
   const classes = useUtilityClasses(ownerState);
   return /* @__PURE__ */ jsx(LoadingButtonRoot, {
@@ -190,6 +193,8 @@ const LoadingButton = (props) => {
     } : {},
     children: !isSkeleton ? /* @__PURE__ */ jsx(LoadingButton$1, {
       ...other,
+      variant,
+      size,
       children: /* @__PURE__ */ jsx(Typography, {
         variant: "action",
         children

package/components/mui_extended/IconButton/{index.3b05af71.js → index.fc5b7c2d.js}

@@ -1,7 +1,7 @@
 import { useMemo, useState } from "react";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton, styled, generateUtilityClasses, generateUtilityClass, Tooltip, IconButton as IconButton$1 } from "@mui/material";
-import { I as Icon } from "../../Icon/index.f9119f5e.js";
+import { I as Icon } from "../../Icon/index.ecb63e65.js";
 import { jsx, Fragment } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useResponsiveDesktop } from "@m4l/graphics";

package/components/mui_extended/LoadingButton/tests/constants.d.ts

@@ -1 +1 @@
-export declare const LOADINGBUTTON_PREFIX = "LoadingButton";
+export declare const LOADINGBUTTON_PREFIX = "M4LoadingButton";