@m4l/components 0.1.13 → 0.1.15

package/components/CommonActions/components/Actions/index.js

@@ -0,0 +1,859 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { styled } from "@mui/material/styles";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import "@mui/material/Button";
+import "../../../mui_extended/Button/index.js";
+import "react-hook-form";
+import "react-router-dom";
+import { IconButton, Tooltip, MenuItem, Skeleton, Checkbox } from "@mui/material";
+import { useState, useMemo, forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from "react";
+import "../../../../contexts/ModalContext/index.js";
+import "@mui/lab";
+import { I as IconButton$1 } from "../../../mui_extended/IconButton/index.js";
+import { u as useBase, a as useFilters, O as OriginalDataGridWrapperStyled } from "../../../DataGrid/index.js";
+import { P as Pager } from "../../../mui_extended/Pager/index.js";
+import { D as DataGrid$1 } from "../../../../react-data-grid.js";
+import { u as useModal } from "../../../../hooks/useModal/index.js";
+import { A as ActionCancel } from "../ActionCancel/index.js";
+import { A as ActionIntro } from "../ActionIntro/index.js";
+import { M as MenuPopover } from "../../../mui_extended/MenuPopover/index.js";
+import { I as Icon } from "../../../Icon/index.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+const WrapperStandarActions = styled("div")(({
+  theme
+}) => ({
+  paddingTop: theme.spacing(3),
+  margin: theme.spacing(0, 1.5),
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "flex-end",
+  "& > button": {
+    marginLeft: "10px"
+  }
+}));
+const Actions$1 = (props) => {
+  const {
+    children
+  } = props;
+  return /* @__PURE__ */ jsx(WrapperStandarActions, {
+    id: "WrapperStandarActions",
+    children
+  });
+};
+function getCommonActionsDictionary() {
+  return ["common_actions"];
+}
+const defaultCommonActionsDictionary = {
+  common_actions: {
+    cancel: "Cancel",
+    intro: "Intro",
+    confirm_quit_title: "Confirm",
+    confirm_quit_msg: "Are your sure exit?"
+  }
+};
+const WrapperMenuActions = styled(IconButton)(() => ({}));
+const LabelMemuItem = styled("div")(({
+  theme
+}) => ({
+  height: "22px",
+  marginLeft: theme.spacing(1.5),
+  display: "flex",
+  alignItems: "center"
+}));
+function MenuActions(props) {
+  const {
+    menuActions,
+    objItem = {},
+    urlIcon,
+    toolTip = "",
+    marginTop = -1,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    width = 200,
+    arrow = "right-top",
+    ...other
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const [open, setOpen] = useState(null);
+  const handleOpen = (event) => {
+    setOpen(event.currentTarget);
+  };
+  const urlFinalIcon = useMemo(() => {
+    if (urlIcon)
+      return urlIcon;
+    return `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/more_vertical.svg`;
+  }, [urlIcon, host_static_assets, environment_assets]);
+  const handleClose = () => {
+    setOpen(null);
+  };
+  const handleClick = (menuAction) => {
+    setOpen(null);
+    menuAction.onClick();
+  };
+  const finalActions = useMemo(() => {
+    let ret;
+    if (typeof menuActions !== "function") {
+      ret = menuActions;
+    } else {
+      ret = menuActions(objItem);
+    }
+    return ret;
+  }, [menuActions, objItem]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(Tooltip, {
+      title: toolTip,
+      children: /* @__PURE__ */ jsx(WrapperMenuActions, {
+        id: "WrapperMenuActions",
+        size: "small",
+        onClick: handleOpen,
+        children: /* @__PURE__ */ jsx(Icon, {
+          src: urlFinalIcon
+        })
+      })
+    }), /* @__PURE__ */ jsx(MenuPopover, {
+      id: "MenuPopover",
+      open: Boolean(open),
+      anchorEl: open,
+      onClose: handleClose,
+      arrow,
+      sx: {
+        marginTop,
+        marginBottom,
+        marginLeft,
+        marginRight,
+        width,
+        "& .MuiMenuItem-root": {
+          px: 1,
+          typography: "body2",
+          borderRadius: 0.75
+        }
+      },
+      ...other,
+      children: open && finalActions.map((menuAction, index) => /* @__PURE__ */ jsxs(MenuItem, {
+        dense: true,
+        onClick: () => handleClick(menuAction),
+        sx: {
+          color: menuAction.color ?? "text.main"
+        },
+        disabled: menuAction.disabled,
+        children: [/* @__PURE__ */ jsx(Icon, {
+          src: menuAction.urlIcon
+        }), /* @__PURE__ */ jsx(LabelMemuItem, {
+          children: getLabel(menuAction.dictionaryField)
+        })]
+      }, `menu_action_${index}`))
+    })]
+  });
+}
+const WrapperPagerActions = styled("div")(({ theme }) => ({
+  width: "100%",
+  justifyContent: "center",
+  display: "flex",
+  marginLeft: 0,
+  [theme.breakpoints.up("sm")]: {
+    display: "flex",
+    alignItems: "center",
+    marginLeft: theme.spacing(3)
+  }
+}));
+function PagerActions(props) {
+  const {
+    count,
+    page,
+    rowsPerPage,
+    onPageChange
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const handleFirstPageButtonClick = (event) => {
+    onPageChange(event, 0);
+  };
+  const handleBackButtonClick = (event) => {
+    onPageChange(event, page - 1);
+  };
+  const handleNextButtonClick = (event) => {
+    onPageChange(event, page + 1);
+  };
+  const handleLastPageButtonClick = (event) => {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
+  return /* @__PURE__ */ jsxs(WrapperPagerActions, {
+    id: "WrapperPagerActions",
+    children: [/* @__PURE__ */ jsx(IconButton$1, {
+      id: "test_bruce",
+      dictionaryTooltip: "pager.first",
+      onClick: handleFirstPageButtonClick,
+      disabled: page === 0,
+      "aria-label": "first page",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/first.svg`
+    }), /* @__PURE__ */ jsx(IconButton$1, {
+      dictionaryTooltip: "pager.previous",
+      onClick: handleBackButtonClick,
+      disabled: page === 0,
+      "aria-label": "first page",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/previous.svg`
+    }), /* @__PURE__ */ jsx(IconButton$1, {
+      dictionaryTooltip: "pager.next",
+      onClick: handleNextButtonClick,
+      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+      "aria-label": "next page",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/next.svg`
+    }), /* @__PURE__ */ jsx(IconButton$1, {
+      dictionaryTooltip: "pager.last",
+      onClick: handleLastPageButtonClick,
+      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+      "aria-label": "last page",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/last.svg`
+    })]
+  });
+}
+const ACTIONS_COLUMN_KEY = "actions-row";
+function ActionsFormatter(props) {
+  const {
+    rowActionsGetter
+  } = useBase();
+  if (rowActionsGetter === void 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  return /* @__PURE__ */ jsx(MenuActions, {
+    arrow: "top-left",
+    objItem: props.row,
+    menuActions: rowActionsGetter,
+    marginTop: 1,
+    marginLeft: "-11px",
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "left"
+    }
+  });
+}
+const ActionsColumn = {
+  key: ACTIONS_COLUMN_KEY,
+  name: "Actions",
+  width: 60,
+  withFilter: false,
+  resizable: true,
+  sortable: false,
+  frozen: true,
+  type: "custom",
+  formatter: ActionsFormatter
+};
+const SKTWrapperFilter = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minWidth: theme.spacing(3.75),
+  height: theme.spacing(3.75)
+}));
+function Filter() {
+  const {
+    isSkeleton
+  } = useBase();
+  const {
+    activeFilters,
+    setActiveFilters
+  } = useFilters();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const toggleIcon = () => {
+    setActiveFilters(!activeFilters);
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTWrapperFilter, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 20,
+        height: 20
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(IconButton$1, {
+    dictionaryTooltip: activeFilters ? "data_grid.tooltip_filter_hide" : "data_grid.tooltip_filter_show",
+    onClick: toggleIcon,
+    "aria-label": "filter",
+    src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/filter.svg`
+  });
+}
+const WrapperColumnsConfig = styled("div")(({ theme }) => ({
+  color: theme.palette.text.primary,
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  width: "100%"
+}));
+styled("div")(({ theme }) => ({
+  color: theme.palette.text.primary,
+  fontSize: theme.typography.h4.fontSize
+}));
+const DivSelColumns = styled("div")(({ theme }) => ({
+  ...theme.typography.subtitle2,
+  color: theme.palette.text.primary,
+  padding: `${theme.spacing(3)} ${theme.spacing(1)}`
+}));
+const WrapperDataGrid = styled("div")(() => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: 1
+}));
+styled("div")(() => ({
+  display: "flex",
+  flexDirection: "row"
+}));
+const ColumnActions = styled("div")(({ theme }) => ({
+  paddingTop: theme.spacing(3),
+  display: "flex",
+  flexDirection: "row"
+}));
+styled("div")(({ theme }) => ({
+  paddingTop: theme.spacing(3),
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "flex-end",
+  "& > button": {
+    marginLeft: "10px"
+  }
+}));
+function FormatterColumn({
+  row,
+  onRowChange,
+  column
+}) {
+  const handleChange = () => {
+    const newRow = {
+      ...row
+    };
+    newRow[column.key] = !row[column.key];
+    onRowChange(newRow);
+  };
+  return /* @__PURE__ */ jsx(Checkbox, {
+    size: "small",
+    checked: row[column.key],
+    onChange: handleChange
+  });
+}
+function getRowsFromColumnsConfig(columnsConfig) {
+  return columnsConfig.filter((column) => !column.hidden).map((column) => ({
+    key: column.key,
+    name: column.name,
+    visible: column.visible === void 0 ? true : column.visible,
+    frozen: column.frozen === void 0 ? false : column.frozen,
+    originalIndex: column.orginalIndex,
+    originalFrozen: column.originalFrozen,
+    originalVisible: column.originalVisible
+  }));
+}
+const ColumnsConfig = forwardRef((props, ref) => {
+  const refdata_grid = useRef(null);
+  const {
+    onCloseSettings,
+    columnsConfig,
+    onChangeColumnsConfig
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const [isInit, setIsInit] = useState(true);
+  const [rows, setRows] = useState(getRowsFromColumnsConfig(columnsConfig));
+  const [selRows, setSelRows] = useState(() => /* @__PURE__ */ new Set());
+  const divRef = useRef(null);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  useImperativeHandle(ref, () => ({
+    onClickIntro: handleIntro,
+    current: divRef.current
+  }));
+  const columnsdata_grid = useMemo(() => [{
+    key: "name",
+    name: getLabel("data_grid.settings_column_name"),
+    width: 200,
+    resizable: true,
+    type: "string"
+  }, {
+    key: "originalIndex",
+    name: getLabel("data_grid.settings_column_position"),
+    width: 50,
+    type: "number",
+    cellClass: "rdg-cell-align-center"
+  }, {
+    key: "visible",
+    name: getLabel("data_grid.settings_column_visible"),
+    width: 80,
+    type: "boolean",
+    formatter: FormatterColumn,
+    cellClass: "rdg-cell-align-center"
+  }, {
+    key: "frozen",
+    name: getLabel("data_grid.settings_column_frozen"),
+    width: 80,
+    type: "boolean",
+    formatter: FormatterColumn,
+    cellClass: "rdg-cell-align-center"
+  }], [getLabel]);
+  const checkAll = () => {
+    setRows(rows.map((row) => ({
+      ...row,
+      visible: true
+    })));
+  };
+  const unCheckAll = () => {
+    setRows(rows.map((row) => ({
+      ...row,
+      visible: false
+    })));
+  };
+  const restoreAll = () => {
+    setRows(rows.map((row) => ({
+      ...row,
+      visible: row.originalVisible,
+      frozen: row.originalFrozen,
+      index: row.originalIndex
+    })).sort((a, b) => a.index - b.index));
+  };
+  useEffect(() => {
+    if (isInit === false) {
+      setRows(getRowsFromColumnsConfig(columnsConfig));
+    }
+    setIsInit(false);
+  }, [columnsConfig]);
+  const rowSelectedIndex = useMemo(() => {
+    let rowIndex = -1;
+    if (selRows.size !== 1)
+      return rowIndex;
+    const iterator = selRows.entries();
+    const entry = iterator.next().value[1];
+    rowIndex = rows.findIndex((row) => row.key === entry);
+    return rowIndex;
+  }, [rows, selRows]);
+  const handleMoveFirst = () => {
+    if (rowSelectedIndex === -1)
+      return -1;
+    const newRows = [...rows];
+    newRows.splice(rowSelectedIndex, 1);
+    newRows.splice(0, 0, rows[rowSelectedIndex]);
+    refdata_grid.current?.selectCell({
+      idx: 0,
+      rowIdx: 0
+    });
+    setRows(newRows);
+  };
+  const handleMoveLast = () => {
+    if (rowSelectedIndex === -1)
+      return -1;
+    const newRows = [...rows];
+    newRows.splice(rowSelectedIndex, 1);
+    newRows.splice(newRows.length, 0, rows[rowSelectedIndex]);
+    refdata_grid.current?.selectCell({
+      idx: 0,
+      rowIdx: newRows.length - 1
+    });
+    setRows(newRows);
+  };
+  const handleMoveUpDownd = (position) => {
+    if (rowSelectedIndex === -1)
+      return -1;
+    const newRows = [...rows];
+    const element = newRows[rowSelectedIndex];
+    newRows.splice(rowSelectedIndex, 1);
+    newRows.splice(rowSelectedIndex + position, 0, element);
+    refdata_grid.current?.selectCell({
+      idx: 0,
+      rowIdx: rowSelectedIndex + position
+    });
+    setRows(newRows);
+  };
+  const getColumnConfigByKey = (key) => {
+    const rowIndexFinded = rows.findIndex((row) => row.key === key);
+    if (rowIndexFinded > -1) {
+      return {
+        visible: rows[rowIndexFinded].visible,
+        frozen: rows[rowIndexFinded].frozen
+      };
+    }
+    return void 0;
+  };
+  const getRowIndex = (column) => {
+    const rowIndexFinded = rows.findIndex((row) => row.key === column.key);
+    if (rowIndexFinded > -1) {
+      return rowIndexFinded;
+    }
+    return columnsConfig.findIndex((columnConfig) => columnConfig.key === column.key);
+  };
+  const handleIntro = () => {
+    const newColumnsConfig = columnsConfig.map((columnConfig) => {
+      const newColumnConfig = {
+        ...columnConfig
+      };
+      if (!columnConfig.hidden) {
+        const columnConfigRow = getColumnConfigByKey(columnConfig.key);
+        if (columnConfigRow) {
+          newColumnConfig.visible = columnConfigRow.visible;
+          newColumnConfig.frozen = columnConfigRow.frozen;
+        }
+      }
+      return newColumnConfig;
+    }).sort((a, b) => getRowIndex(a) - getRowIndex(b));
+    onChangeColumnsConfig(newColumnsConfig);
+    onCloseSettings();
+  };
+  const onInternalSelectedRowsChange = () => {
+  };
+  const onInternalRowsChange = (newRows) => {
+    setRows(newRows);
+  };
+  const onRowClick = (row) => {
+    if (selRows.has(row.key))
+      return;
+    const mySet = /* @__PURE__ */ new Set([row.key]);
+    setSelRows(mySet);
+  };
+  return /* @__PURE__ */ jsxs(WrapperColumnsConfig, {
+    id: "WrapperColumnsConfig",
+    ref: divRef,
+    children: [/* @__PURE__ */ jsx(DivSelColumns, {
+      id: "divInfo",
+      children: getLabel("data_grid.settings_sel_columns")
+    }), /* @__PURE__ */ jsx(WrapperDataGrid, {
+      id: "WrapperDataGrid",
+      children: /* @__PURE__ */ jsx(OriginalDataGridWrapperStyled, {
+        id: "Originaldata_gridWrapperStyled",
+        children: /* @__PURE__ */ jsx(DataGrid$1, {
+          className: "fill-data_grid  rdg-light",
+          ref: refdata_grid,
+          columns: columnsdata_grid,
+          rows,
+          onRowsChange: onInternalRowsChange,
+          selectedRows: selRows,
+          onSelectedRowsChange: onInternalSelectedRowsChange,
+          onRowClick,
+          rowKeyGetter: (row) => row.key,
+          cellNavigationMode: "CHANGE_ROW",
+          defaultColumnOptions: {
+            resizable: true,
+            sortable: true
+          }
+        })
+      })
+    }), /* @__PURE__ */ jsxs(ColumnActions, {
+      children: [/* @__PURE__ */ jsx(IconButton$1, {
+        dictionaryTooltip: "data_grid.settings_move_first",
+        onClick: handleMoveFirst,
+        "aria-label": "move first place",
+        disabled: rowSelectedIndex < 1,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_first_place.svg`
+      }), /* @__PURE__ */ jsx(IconButton$1, {
+        dictionaryTooltip: "data_grid.settings_move_up",
+        onClick: () => handleMoveUpDownd(-1),
+        "aria-label": "move up place",
+        disabled: rowSelectedIndex < 1,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_up_place.svg`
+      }), /* @__PURE__ */ jsx(IconButton$1, {
+        dictionaryTooltip: "data_grid.settings_move_last",
+        onClick: handleMoveLast,
+        "aria-label": "move last place",
+        disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
+        src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_last_place.svg`
+      }), /* @__PURE__ */ jsx(IconButton$1, {
+        dictionaryTooltip: "data_grid.settings_move_down",
+        onClick: () => handleMoveUpDownd(1),
+        "aria-label": "move down place",
+        disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
+        src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_down_place.svg`
+      }), /* @__PURE__ */ jsx(IconButton$1, {
+        dictionaryTooltip: "data_grid.settings_visible_all",
+        onClick: checkAll,
+        "aria-label": "check visible all",
+        src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/check_all.svg`
+      }), /* @__PURE__ */ jsx(IconButton$1, {
+        dictionaryTooltip: "data_grid.settings_no_visible_all",
+        onClick: unCheckAll,
+        "aria-label": "un check all",
+        src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/uncheck_all.svg`
+      }), /* @__PURE__ */ jsx(IconButton$1, {
+        dictionaryTooltip: "data_grid.settings_restore",
+        onClick: restoreAll,
+        "aria-label": "Restore columns",
+        src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/restore_columns.svg`
+      })]
+    })]
+  });
+});
+ColumnsConfig.displayName = "ColumnsConfig";
+const SKTWrapperColumnsSettings = styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minWidth: theme.spacing(3.75),
+  height: theme.spacing(3.75)
+}));
+function Settings() {
+  const {
+    openModal,
+    closeModal
+  } = useModal();
+  const {
+    columnsConfig,
+    onChangeColumnsConfig,
+    isSkeleton
+  } = useBase();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const ref = useRef(null);
+  const onCloseSettings = useCallback(() => {
+    closeModal();
+  }, [closeModal]);
+  const onClickIntro = useCallback(() => {
+    if (ref.current?.onClickIntro) {
+      ref.current?.onClickIntro();
+    }
+  }, []);
+  const onClickSettings = useCallback(() => {
+    openModal({
+      onQueryClose: () => closeModal(),
+      title: getLabel("data_grid.settings_title"),
+      initialWidth: 500,
+      initialHeigth: 680,
+      contentComponent: /* @__PURE__ */ jsx(ColumnsConfig, {
+        ref,
+        columnsConfig,
+        onChangeColumnsConfig,
+        onCloseSettings
+      }),
+      actions: /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(ActionCancel, {
+          onClick: closeModal
+        }), /* @__PURE__ */ jsx(ActionIntro, {
+          onClick: onClickIntro
+        })]
+      })
+    });
+  }, [closeModal, columnsConfig, getLabel, onChangeColumnsConfig, onCloseSettings, openModal, onClickIntro]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTWrapperColumnsSettings, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 20,
+        height: 20
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(IconButton$1, {
+    dictionaryTooltip: "data_grid.tooltip_settings",
+    onClick: onClickSettings,
+    "aria-label": "settings",
+    src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`
+  });
+}
+const Container = styled("div")(() => ({
+  display: "flex",
+  alignItems: "center"
+}));
+const RowsLabel = styled("span")(() => ({}));
+const InsetLabel = styled("span")(({ theme }) => ({
+  marginLeft: theme.spacing(2),
+  paddingTop: "2px",
+  paddingBottom: "2px",
+  paddingLeft: "4px",
+  paddingRight: "4px",
+  border: `1px solid ${theme.palette.divider}`
+}));
+function RowsCount() {
+  const {
+    rowsCount,
+    isSkeleton
+  } = useBase();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsxs(Container, {
+      children: [/* @__PURE__ */ jsx(RowsLabel, {
+        children: /* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: "40px",
+          height: "16px"
+        })
+      }), /* @__PURE__ */ jsx(InsetLabel, {
+        children: /* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: "20px",
+          height: "16px"
+        })
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsxs(Container, {
+    className: "rows-count",
+    id: "RowsCount",
+    children: [/* @__PURE__ */ jsx(RowsLabel, {
+      children: getLabel("data_grid.rows")
+    }), /* @__PURE__ */ jsx(InsetLabel, {
+      children: rowsCount
+    })]
+  });
+}
+const WrapperDensity = styled("div")(({ theme }) => ({
+  marginLeft: 0,
+  [theme.breakpoints.up("sm")]: {
+    marginLeft: theme.spacing(3)
+  }
+}));
+const SKTWrapperDensity = styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minWidth: theme.spacing(3.75),
+  height: theme.spacing(3.75)
+}));
+function Density() {
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    rowHeights,
+    currentRowHeightVariant,
+    setRowHeightVariant,
+    isSkeleton
+  } = useBase();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const menuActions = useMemo(() => {
+    if (typeof rowHeights === "number") {
+      return [];
+    }
+    return [{
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`,
+      onClick: () => setRowHeightVariant("compact"),
+      disabled: currentRowHeightVariant === "compact",
+      dictionaryField: "data_grid.density_compact"
+    }, {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`,
+      onClick: () => setRowHeightVariant("standard"),
+      disabled: currentRowHeightVariant === "standard",
+      dictionaryField: "data_grid.density_standard"
+    }, {
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`,
+      onClick: () => setRowHeightVariant("confortable"),
+      disabled: currentRowHeightVariant === "confortable",
+      dictionaryField: "data_grid.density_confortable"
+    }];
+  }, [rowHeights, currentRowHeightVariant, setRowHeightVariant, host_static_assets, environment_assets]);
+  const currenViewIcon = useMemo(() => {
+    if (currentRowHeightVariant === "compact") {
+      return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`;
+    }
+    if (currentRowHeightVariant === "standard") {
+      return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`;
+    }
+    return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`;
+  }, [currentRowHeightVariant, host_static_assets, environment_assets]);
+  if (menuActions.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTWrapperDensity, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: "20px",
+        height: "20px"
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(WrapperDensity, {
+    id: "WrapperDensity",
+    children: /* @__PURE__ */ jsx(MenuActions, {
+      arrow: "right-top",
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      menuActions,
+      urlIcon: currenViewIcon,
+      toolTip: getLabel("data_grid.tooltip_density")
+    })
+  });
+}
+const WrapperActions = styled("div")(({ theme }) => ({
+  ...theme.typography.caption,
+  position: "absolute",
+  left: "0px",
+  right: "0px",
+  top: "0px",
+  height: theme.spacing(5.5),
+  padding: 0,
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  [theme.breakpoints.up("sm")]: {
+    padding: theme.spacing(0, 1.5)
+  },
+  "&.with-no-pager .rows-count": {
+    flexGrow: 1
+  },
+  "& .MuiTablePagination-root": {
+    flexGrow: 1,
+    display: "flex",
+    justifyContent: "center",
+    overflow: "hidden"
+  }
+}));
+function Actions(props) {
+  const isDesktop = useResponsiveDesktop();
+  const {
+    rowHeights,
+    isSkeleton
+  } = useBase();
+  const {
+    withRowsCount = true,
+    withPager = true,
+    pagerOptions,
+    withSettings = true,
+    settingsProps,
+    withLocalFilters
+  } = props;
+  return /* @__PURE__ */ jsxs(WrapperActions, {
+    id: "WrapperActions",
+    className: withPager && pagerOptions ? "with-pager" : "with-no-pager",
+    children: [withRowsCount && isDesktop && /* @__PURE__ */ jsx(RowsCount, {}), withPager && pagerOptions && /* @__PURE__ */ jsx(Pager, {
+      ...pagerOptions,
+      totalRecords: pagerOptions.totalRecords,
+      isSkeleton,
+      isDesktop
+    }), typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}), withLocalFilters && /* @__PURE__ */ jsx(Filter, {}), withSettings && /* @__PURE__ */ jsx(Settings, {
+      ...settingsProps
+    })]
+  });
+}
+export { ActionsColumn as A, LabelMemuItem as L, MenuActions as M, PagerActions as P, Actions as a, Actions$1 as b, defaultCommonActionsDictionary as d, getCommonActionsDictionary as g };