@m4l/components 0.1.35 → 0.1.37

package/dist/components/Resizeable/index.c96c0f09.js

@@ -0,0 +1,96 @@
+import { styled } from "@mui/material/styles";
+import { R as ResizableBox } from "../../react-resizable.1d00271d.js";
+import { jsx } from "react/jsx-runtime";
+const WrapperResizeable = styled(ResizableBox)(({
+  theme
+}) => ({
+  "&.react-resizable": {
+    position: "relative",
+    width: "100%",
+    height: "100%"
+  },
+  "& .react-resizable-handle": {
+    position: "absolute",
+    width: "20px",
+    height: "20px",
+    margin: "4px",
+    backgroundRepeat: "no-repeat",
+    backgroundOrigin: "content-box",
+    boxSizing: "border-box",
+    backgroundColor: theme.palette.action.active,
+    mask: `url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' focusable='false' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D%0A%3C/style%3E%3Cg id='Grupo_5256'%3E%3C/g%3E%3Cpath class='st0' d='z'/%3E%3Cg%3E%3Cpolygon points='21.9,21.9 15.8,21.9 15.8,19.9 19.9,19.9 19.9,15.9 21.9,15.9 '/%3E%3C/g%3E%3C/svg%3E%0A")`,
+    backgroundImage: `url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' focusable='false' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D%0A%3C/style%3E%3Cg id='Grupo_5256'%3E%3C/g%3E%3Cpath class='st0' d='z'/%3E%3Cg%3E%3Cpolygon points='21.9,21.9 15.8,21.9 15.8,19.9 19.9,19.9 19.9,15.9 21.9,15.9 '/%3E%3C/g%3E%3C/svg%3E%0A")`,
+    backgroundPosition: "bottom right",
+    padding: "0 3px 3px 0"
+  },
+  "& .react-resizable-handle-sw": {
+    bottom: "0",
+    left: "0",
+    cursor: "sw-resize",
+    transform: "rotate(90deg)"
+  },
+  ".react-resizable-handle-se": {
+    bottom: "0",
+    right: "0",
+    cursor: "se-resize"
+  },
+  "& .react-resizable-handle-nw": {
+    top: "0",
+    left: "0",
+    cursor: "nw-resize",
+    transform: "rotate(180deg)"
+  },
+  "& .react-resizable-handle-ne": {
+    top: "0",
+    right: "0",
+    cursor: "ne-resize",
+    transform: "rotate(270deg)"
+  },
+  "& .react-resizable-handle-w, .react-resizable-handle-e": {
+    top: "50%",
+    marginTop: "-10px",
+    cursor: "ew-resize"
+  },
+  "& .react-resizable-handle-w": {
+    left: "0",
+    transform: "rotate(135deg)"
+  },
+  "& .react-resizable-handle-e": {
+    right: "0",
+    transform: "rotate(315deg) "
+  },
+  "& .react-resizable-handle-n,.react-resizable-handle-s": {
+    left: "50%",
+    marginLeft: "-10px",
+    cursor: "ns-resize"
+  },
+  "& .react-resizable-handle-n": {
+    top: "0",
+    transform: "rotate(225deg)"
+  },
+  "& .react-resizable-handle-s": {
+    bottom: "0",
+    transform: "rotate(45deg)"
+  }
+}));
+function ResizeableWindow(props) {
+  const {
+    children,
+    width = 200,
+    height = 200,
+    maxHeigth,
+    maxWidth,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx(WrapperResizeable, {
+    width,
+    height,
+    maxConstraints: maxHeigth && maxWidth ? [maxWidth, maxHeigth] : void 0,
+    resizeHandles: ["se", "nw"],
+    ...other,
+    children
+  });
+}
+export {
+  ResizeableWindow as R
+};

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

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

package/dist/components/ResizeableWindow/types.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { ResizableBoxProps } from 'react-resizable';
+declare type InternalResizeableProps = {
+    children: ReactNode;
+    width?: number;
+    height?: number;
+    maxWidth?: number;
+    maxHeigth?: number;
+};
+export declare type ResizeableProps = InternalResizeableProps & Partial<ResizableBoxProps>;
+export {};

package/dist/components/animate/PropagateLoader/index.be5b02c3.js

@@ -0,0 +1,30 @@
+import { styled, useTheme } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { P as PropagateLoader$1 } from "../../../node_modules.416f1da3.js";
+const WrapperPropageteLoader = styled("div")(({
+  theme
+}) => ({
+  right: 0,
+  bottom: 0,
+  zIndex: 99999,
+  width: "100%",
+  height: "100%",
+  position: "fixed",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: theme.palette.background.default
+}));
+const PropagateLoader = () => {
+  const {
+    palette
+  } = useTheme();
+  return /* @__PURE__ */ jsx(WrapperPropageteLoader, {
+    children: /* @__PURE__ */ jsx(PropagateLoader$1, {
+      color: palette.primary.main
+    })
+  });
+};
+export {
+  PropagateLoader as P
+};

package/dist/components/areas/components/Area/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { AreaProps } from './types';
+export declare const Area: {
+    (props: AreaProps): JSX.Element;
+    displayName: string;
+};

package/dist/components/areas/components/Area/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperArea: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/areas/components/Area/types.d.ts

@@ -0,0 +1,92 @@
+import { ReactNode } from 'react';
+import { DynamicMFParameters, IsolationDynamicMFParameters } from '../../contexts/DynamicMFParmsContext/types';
+import type { Layout } from 'react-grid-layout';
+export declare type WinType = 'microfrontend' | 'component';
+export declare type EmergeType = 'layout' | 'popup' | 'modal';
+export interface MFBaseProps {
+    module_id: string;
+    debug_port: number;
+    cache?: boolean;
+    dynamicParams?: IsolationDynamicMFParameters;
+    prefix: string;
+}
+export interface MicroFrontendProps extends MFBaseProps {
+    dynamicParams?: DynamicMFParameters;
+}
+export interface WindowBaseProps {
+    winType: WinType;
+    emergeType: EmergeType;
+    container_id: string;
+    url_icon: string;
+    title: string;
+    onClose?: (layoutId: string) => void;
+}
+export interface LayoutBaseProps extends WindowBaseProps {
+    emergeType: 'layout';
+    layoutProps: Omit<Layout, 'i'>;
+}
+export interface LayoutMFProps extends LayoutBaseProps {
+    winType: 'microfrontend';
+    mfProps: MFBaseProps;
+}
+export interface LayoutComponentProps extends LayoutBaseProps {
+    winType: 'component';
+    component: ReactNode;
+}
+export declare type LayoutProps = LayoutMFProps | LayoutComponentProps;
+export declare type NewLayoutProps = Omit<LayoutMFProps, 'container_id' | 'onClose'> | Omit<LayoutComponentProps, 'container_id' | 'onClose'>;
+export interface HashWindowsByLayouts {
+    [P: string]: LayoutProps;
+}
+export declare type Position = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export interface PopUpBaseProps extends WindowBaseProps {
+    emergeType: 'popup';
+    zIndex?: number;
+    windowProps: Pick<DOMRect, 'x' | 'y' | 'width' | 'height'>;
+}
+export interface PopUpMFProps extends PopUpBaseProps {
+    winType: 'microfrontend';
+    mfProps: MFBaseProps;
+}
+export interface PopUpComponentProps extends PopUpBaseProps {
+    winType: 'component';
+    component: ReactNode;
+}
+export declare type PopUpProps = PopUpMFProps | PopUpComponentProps;
+export declare type NewPopUpProps = Omit<PopUpMFProps, 'container_id' | 'onClose'> | Omit<PopUpComponentProps, 'container_id' | 'onClose'>;
+export interface ModalBaseProps extends WindowBaseProps {
+    emergeType: 'modal';
+    zIndex?: number;
+    position?: Position;
+}
+export interface ModalMFProps extends ModalBaseProps {
+    winType: 'microfrontend';
+    mfProps: MFBaseProps;
+}
+export interface ModalComponentProps extends ModalBaseProps {
+    winType: 'component';
+    component: ReactNode;
+}
+export declare type ModalProps = ModalMFProps | ModalComponentProps;
+export declare type NewModalProps = Omit<ModalMFProps, 'container_id' | 'onClose'> | Omit<ModalComponentProps, 'container_id' | 'onClose'>;
+export declare type WindowProps = LayoutProps | PopUpProps | ModalProps;
+export declare type NewWindowProps = NewLayoutProps | NewPopUpProps | NewModalProps;
+export interface AreaType {
+    id: string;
+    name: string;
+    loadWindows?: boolean;
+}
+export interface AreaProps extends Omit<AreaType, 'url_icon' | 'name'> {
+    active: boolean;
+}
+export declare type AreaRef = {
+    addWindow?: (newWindow: NewWindowProps) => string;
+    current: {
+        divRef: HTMLDivElement | null;
+    };
+};

package/dist/components/areas/components/AreasAdmin/index.6794b22f.js

@@ -0,0 +1,112 @@
+import { styled } from "@mui/material/styles";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.82f16572.js";
+import { u as useAreas } from "../../hooks/useArea/index.9b85ce24.js";
+import { useEnvironment } from "@m4l/core";
+import "@mui/material";
+import "../../../Icon/index.8d754623.js";
+import "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import "../../../mui_extended/Accordion/index.a541c71c.js";
+import "../../../mui_extended/Avatar/index.fe06afd7.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "@mui/lab";
+import "../../../mui_extended/Button/index.86a155a2.js";
+import "../../../mui_extended/Popover/index.53c77d23.js";
+import "../../../mui_extended/MenuActions/index.ee17bddd.js";
+import "../../../mui_extended/Pager/index.74d3f5fc.js";
+import "../../../mui_extended/Tab/index.e0653a0a.js";
+const WrapperAreasAdmin = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  flexGrow: "1",
+  position: "relative",
+  marginTop: theme.spacing(3)
+}));
+const WrapperAreaChips = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "row",
+  border: "1px solid gray",
+  "&.active": {
+    border: "1px solid red"
+  }
+}));
+const AreaSelect = styled("div")(({
+  theme
+}) => ({
+  height: "100%",
+  width: theme.spacing(1),
+  backgroundColor: theme.palette.background.default,
+  "&.active": {
+    backgroundColor: theme.palette.primary.main
+  }
+}));
+const AreaChip = (props) => {
+  const {
+    areaId,
+    active,
+    areaName
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    deleteArea,
+    selectArea
+  } = useAreas();
+  return /* @__PURE__ */ jsxs(WrapperAreaChips, {
+    className: active ? "active" : "",
+    onClick: () => {
+      selectArea(areaId);
+    },
+    children: [/* @__PURE__ */ jsx(AreaSelect, {
+      className: active ? "active" : ""
+    }), /* @__PURE__ */ jsx("span", {
+      children: areaName
+    }), /* @__PURE__ */ jsx(IconButton, {
+      src: `${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/users/assets/icons/edit.svg`,
+      size: "small",
+      onClick: () => {
+      }
+    }), /* @__PURE__ */ jsx(IconButton, {
+      src: `${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/users/assets/icons/delete.svg`,
+      size: "small",
+      onClick: () => deleteArea(areaId)
+    })]
+  });
+};
+AreaChip.displayName = "AreaButtons";
+function AreasAdmin() {
+  const {
+    areas,
+    currentArea,
+    addArea,
+    status
+  } = useAreas();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  if (status !== "loaded") {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(WrapperAreasAdmin, {
+    id: "ContainerTabs",
+    children: [areas.map((area) => /* @__PURE__ */ jsx(AreaChip, {
+      areaId: area.id,
+      active: area.id === currentArea,
+      areaName: area.name
+    }, area.id)), /* @__PURE__ */ jsx(IconButton, {
+      src: `${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/users/assets/icons/add.svg`,
+      size: "small",
+      onClick: addArea
+    })]
+  });
+}
+export {
+  AreasAdmin as A
+};

package/dist/components/areas/components/AreasAdmin/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function AreasAdmin(): JSX.Element | null;

package/dist/components/areas/components/AreasAdmin/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperAreasAdmin: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/areas/components/AreasAdmin/subcomponents/AreaChip/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { AreaChipProps } from './types';
+export declare const AreaChip: {
+    (props: AreaChipProps): JSX.Element;
+    displayName: string;
+};

package/dist/components/areas/components/AreasAdmin/subcomponents/AreaChip/styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const WrapperAreaChips: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AreaSelect: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/areas/components/AreasAdmin/subcomponents/AreaChip/types.d.ts

@@ -0,0 +1,5 @@
+export interface AreaChipProps {
+    areaId: string;
+    areaName: string;
+    active: boolean;
+}

package/dist/components/areas/components/AreasContainer/index.a2f8899b.js

@@ -0,0 +1,43 @@
+import { styled } from "@mui/material/styles";
+import { A as Area } from "../index.7d6cd649.js";
+import "react-grid-layout/css/styles.css";
+import "../../../../react-resizable.1d00271d.js";
+import { u as useAreas } from "../../hooks/useArea/index.9b85ce24.js";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+const ContainerAreas = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  flexGrow: "1",
+  position: "relative",
+  marginTop: theme.spacing(3)
+}));
+function AreasContainer() {
+  const {
+    areas,
+    currentArea,
+    status
+  } = useAreas();
+  useEffect(() => {
+    console.log("useEffect AreasContainer");
+  }, []);
+  if (status !== "loaded") {
+    return null;
+  }
+  console.log("Render AreasContainer", status, currentArea, areas);
+  return /* @__PURE__ */ jsx(ContainerAreas, {
+    id: "ContainerAreas",
+    children: areas.map((area) => {
+      return /* @__PURE__ */ jsx(Area, {
+        id: area.id,
+        active: currentArea === area.id
+      }, area.id);
+    })
+  });
+}
+export {
+  AreasContainer as A
+};

package/dist/components/areas/components/AreasContainer/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function AreasContainer(): JSX.Element | null;

package/dist/components/areas/components/AreasContainer/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ContainerAreas: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/areas/components/GridLayout/index.b9c1e846.js

@@ -0,0 +1,92 @@
+import { WidthProvider, Responsive } from "react-grid-layout";
+import { a as useArea } from "../../hooks/useArea/index.9b85ce24.js";
+import { styled } from "@mui/material/styles";
+import { W as WindowPopUp } from "../WindowPopUp/index.214cf099.js";
+import { M as MemonizedWindow } from "../Window/index.252fbf4e.js";
+import "react-grid-layout/css/styles.css";
+import "../../../../react-resizable.1d00271d.js";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+const WrapperPoups = styled("div")(() => ({
+  zIndex: 1,
+  " .react-draggable": {
+    position: "absolute"
+  }
+}));
+const ResponsiveGridLayout = WidthProvider(Responsive);
+const GridLayout = () => {
+  const {
+    status,
+    allLayouts,
+    layouts,
+    hashWindowsLayouts,
+    windowsPopUps,
+    onLayoutChange
+  } = useArea();
+  function onBreakpointChange(_newBreakpoint, _newCols) {
+  }
+  if (status === "init") {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  } else if (status === "load") {
+    return /* @__PURE__ */ jsx("div", {
+      children: "Loading..."
+    });
+  }
+  return /* @__PURE__ */ jsxs(ResponsiveGridLayout, {
+    className: "layout",
+    onLayoutChange,
+    onBreakpointChange,
+    breakpoints: {
+      lg: 1200,
+      md: 996,
+      sm: 768,
+      xs: 480,
+      xxs: 0
+    },
+    cols: {
+      lg: 24,
+      md: 20,
+      sm: 12,
+      xs: 8,
+      xxs: 2
+    },
+    rowHeight: 100,
+    margin: [5, 5],
+    containerPadding: [3, 3],
+    draggableHandle: ".m4l_draggable_handle",
+    compactType: "horizontal",
+    layouts: allLayouts,
+    children: [/* @__PURE__ */ jsx(WrapperPoups, {
+      id: "WrapperPoups",
+      "data-grid": {
+        i: "none",
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0,
+        maxW: 0,
+        maxH: 0,
+        minW: 0,
+        minH: 0,
+        static: true,
+        isDraggable: false,
+        isResizable: false
+      },
+      children: windowsPopUps.map((wp) => /* @__PURE__ */ jsx(WindowPopUp, {
+        ...wp
+      }, wp.container_id))
+    }, "none"), layouts.map((l) => {
+      if (hashWindowsLayouts[l.i]) {
+        return /* @__PURE__ */ jsx("div", {
+          "data-grid": l,
+          children: /* @__PURE__ */ jsx(MemonizedWindow, {
+            ...hashWindowsLayouts[l.i]
+          })
+        }, l.i);
+      }
+      return null;
+    })]
+  });
+};
+export {
+  GridLayout as G
+};

package/dist/components/areas/components/GridLayout/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const GridLayout: () => JSX.Element;

package/dist/components/areas/components/GridLayout/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperPoups: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/areas/components/Window/contexts/WindowContext/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { WindowContextProps, WindowProviderProps } from './types';
+declare const WindowContext: import("react").Context<WindowContextProps | null>;
+declare function WindowProvider(props: WindowProviderProps): JSX.Element;
+export { WindowProvider, WindowContext };

package/dist/components/areas/components/Window/contexts/WindowContext/types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { WindowBaseProps } from '../../../Area/types';
+import type { ModuleAction } from '../../../../contexts/DynamicMFParmsContext/types';
+export interface WindowProviderProps extends WindowBaseProps {
+    initialExternalActions?: ModuleAction[];
+    children: ReactNode;
+}
+export interface WindowContextProps extends Omit<WindowProviderProps, 'children' | 'initialExternalActions'> {
+    moduleActions: ModuleAction[];
+    externalActions: ModuleAction[];
+    setExternalActions: (newActions: ModuleAction[]) => void;
+    setModuleActions: (newActions: ModuleAction[]) => void;
+}

package/dist/components/areas/components/Window/hooks/useWindow/index.d.ts

@@ -0,0 +1 @@
+export declare const useWindow: () => import("../../contexts/WindowContext/types").WindowContextProps;