@m4l/components 0.1.84 → 0.1.86

package/components/ObjectLogs/{index.dc02715d.js → index.ad313913.js}

@@ -1,54 +1,57 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useNetwork, useModuleDictionary, useEnvironment, usePaginate } from "@m4l/core";
 import { styled } from "@mui/material/styles";
-import { c as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.1d0a3dec.js";
+import { c as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.d38e3b49.js";
 import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
 import { Tooltip, IconButton } from "@mui/material";
 import { useHostTheme, useResponsiveDesktop } from "@m4l/graphics";
 import { R as ReactJson } from "../../react-json-view.57125fcf.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { u as useModal } from "../../hooks/useModal/index.7611bf21.js";
-import { I as Icon } from "../Icon/index.d1402200.js";
+import { u as useModal } from "../../hooks/useModal/index.2387ea76.js";
+import { I as Icon } from "../Icon/index.435df215.js";
 import "../../react-draggable.7abb5d0a.js";
 import "../Resizeable/index.9a9c79a4.js";
-import "../modal/index.6f281ef8.js";
-import "../CommonActions/components/Actions/index.e70e8779.js";
+import "../modal/index.6cdf65c9.js";
+import "../CommonActions/components/Actions/index.99a8e55e.js";
 import "@mui/material/Button";
-import "../mui_extended/Button/index.40af964e.js";
+import "../mui_extended/Button/index.f79eb74e.js";
 import "clsx";
 import "react-hook-form";
-import "../mui_extended/IconButton/index.62aea582.js";
+import "../mui_extended/IconButton/index.d88a3f2e.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.230d1584.js";
-import "../areas/components/AreasAdmin/index.8ab71eb9.js";
+import "../areas/contexts/AreasContext/index.8af3058c.js";
+import "../areas/components/AreasAdmin/index.23a09c81.js";
 import "zustand/shallow";
-import "../ScrollBar/index.d4410cb5.js";
-import "../mui_extended/Accordion/index.46771196.js";
+import "../ScrollBar/index.65bb2930.js";
+import "../mui_extended/Accordion/index.d15e51bf.js";
 import "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "../mui_extended/CheckBox.38abccd8.js";
-import "../mui_extended/Badge/index.cad260fe.js";
+import "../mui_extended/Badge/index.8c2b8b66.js";
 import "../Image/index.c18ebf5a.js";
 import "@mui/lab";
-import "../mui_extended/MenuActions/index.2493b1b1.js";
+import "../mui_extended/MenuActions/index.c53370f6.js";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/Pager/index.a7f87c96.js";
-import "../mui_extended/Tab/index.756fe693.js";
+import "../mui_extended/Stack/index.0e53197c.js";
+import "../mui_extended/Tab/index.97d04d6b.js";
+import "../mui_extended/Pager/index.d6c87c44.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
-import "../areas/components/AreasViewer/index.933e506b.js";
+import "../areas/components/AreasViewer/index.68eb0f6b.js";
 import "../LinearProgressIndeterminate/index.60dabc06.js";
 import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
-import { W as WindowBase } from "../modal/WindowBase.37158e8d.js";
-import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.912679cc.js";
+import { W as WindowBase } from "../modal/WindowBase.0eea1a27.js";
+import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.fddefc23.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 const Container$1 = styled("div")(() => ({
   height: "100%",
   width: "100%",
   display: "flex",
   flexDirection: "column",
-  justifyContent: "flex-start"
+  justifyContent: "flex-start",
+  gap: "4px",
+  padding: "4px"
 }));
 const Actions = styled("div")(({
   theme

package/components/PaperForm/{index.249c2404.js → index.ad703ab6.js}

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material/styles";
 import { useModuleSkeleton } from "@m4l/core";
 import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { I as Icon } from "../Icon/index.d1402200.js";
+import { I as Icon } from "../Icon/index.435df215.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { unstable_composeClasses } from "@mui/base";
 const PaperFormRoot = styled("div")(({

package/components/Period/{index.e129cdec.js → index.32d475b8.js}

@@ -1,38 +1,39 @@
 import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
 import { styled, generateUtilityClasses, generateUtilityClass, Autocomplete, TextField, Skeleton } from "@mui/material";
 import { useMemo } from "react";
-import { I as Icon } from "../Icon/index.d1402200.js";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.e70e8779.js";
+import { I as Icon } from "../Icon/index.435df215.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.99a8e55e.js";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import "@mui/material/Button";
-import "../mui_extended/Button/index.40af964e.js";
+import "../mui_extended/Button/index.f79eb74e.js";
 import "clsx";
 import "react-hook-form";
-import "../../contexts/ModalContext/index.51da83de.js";
+import "../../contexts/ModalContext/index.5c908fe3.js";
 import "../../react-draggable.7abb5d0a.js";
 import "../Resizeable/index.9a9c79a4.js";
 import "@m4l/graphics";
-import "../modal/index.6f281ef8.js";
+import "../modal/index.6cdf65c9.js";
 import "../Image/index.c18ebf5a.js";
-import "../mui_extended/IconButton/index.62aea582.js";
-import "../mui_extended/Accordion/index.46771196.js";
+import "../mui_extended/IconButton/index.d88a3f2e.js";
+import "../mui_extended/Accordion/index.d15e51bf.js";
 import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
 import "../mui_extended/Avatar/index.75e6ed57.js";
 import "react-router-dom";
 import "../mui_extended/CheckBox.38abccd8.js";
-import "../mui_extended/Badge/index.cad260fe.js";
+import "../mui_extended/Badge/index.8c2b8b66.js";
 import "@mui/lab";
-import "../mui_extended/MenuActions/index.2493b1b1.js";
+import "../mui_extended/MenuActions/index.c53370f6.js";
 import "../mui_extended/Popover/index.9f35d0eb.js";
-import "../mui_extended/Pager/index.a7f87c96.js";
-import "../mui_extended/Tab/index.756fe693.js";
+import "../mui_extended/Stack/index.0e53197c.js";
+import "../mui_extended/Tab/index.97d04d6b.js";
+import "../mui_extended/Pager/index.d6c87c44.js";
 import "../mui_extended/Tooltip/index.5a795dcd.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.230d1584.js";
-import "../areas/components/AreasAdmin/index.8ab71eb9.js";
+import "../areas/contexts/AreasContext/index.8af3058c.js";
+import "../areas/components/AreasAdmin/index.23a09c81.js";
 import "zustand/shallow";
-import "../ScrollBar/index.d4410cb5.js";
-import "../areas/components/AreasViewer/index.933e506b.js";
+import "../ScrollBar/index.65bb2930.js";
+import "../areas/components/AreasViewer/index.68eb0f6b.js";
 import "../LinearProgressIndeterminate/index.60dabc06.js";
 import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";

package/components/PropertyValue/{index.93e40532.js → index.d52295d9.js}

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material/styles";
 import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../vendor.1af105d6.js";
+import { g as getNameDataTestId } from "../../vendor.7751caf6.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useModuleSkeleton } from "@m4l/core";

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

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

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

@@ -0,0 +1,6 @@
+import { ScrollBarClassesType } from './types';
+export declare const scrollBarClasses: ScrollBarClassesType;
+export declare function getScrollBarUtilityClass(slot: string): string;
+export declare const useScrollBarUtilityClasses: () => {
+    root: string;
+};

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

@@ -0,0 +1,6 @@
+import { useScrollBarUtilityClasses } from ".";
+export interface ScrollBarClassesType {
+    root: string;
+}
+export declare type StackClassesKey = keyof ScrollBarClassesType;
+export declare type ScrollBarClasses = ReturnType<typeof useScrollBarUtilityClasses>;

package/components/ScrollBar/index.65bb2930.js

@@ -0,0 +1,121 @@
+import { generateUtilityClasses, generateUtilityClass, Box } from "@mui/material";
+import { styled, alpha } from "@mui/material/styles";
+import SimpleBarReact from "simplebar-react";
+import simpleBarCss from "simplebar/dist/simplebar.min.css?used";
+import { unstable_composeClasses } from "@mui/base";
+import { jsx } from "react/jsx-runtime";
+const RootStyle = styled("div")(({
+  theme
+}) => ({
+  flexGrow: "1",
+  height: "100%",
+  overflow: "hidden",
+  ...theme.components?.M4LScrollBar?.styleOverrides
+}));
+const SimpleBarStyle = styled(SimpleBarReact)`
+    /* flex-grow: 1;
+    height: 100%;
+    overflow: hidden; */
+    ${simpleBarCss}
+    height: 100%;
+
+    .simplebar-scrollbar {
+      
+        .simplebar-visible:before {
+            opacity: 1;
+        }
+    }
+    .simplebar-track.simplebar-vertical {
+        width: 30;
+    }
+    .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
+        height: 6;
+    }
+
+    .simplebar-mask {
+        z-index: 'inherit';
+    }
+
+    .simplebar-content {
+        // display: 'flex',
+        // flexDirection: 'column',
+        // height: '100%',
+    }
+
+    .simplebar-content-wrapper[style*='overflow: hidden scroll;'] {
+        .simplebar-content {
+            margin-right: 16px;
+        }
+    }
+`;
+styled(SimpleBarReact)(({
+  theme
+}) => ({
+  height: "100%",
+  "& .simplebar-scrollbar": {
+    "&:before": {
+      backgroundColor: alpha(theme.palette.grey[600], 0.48)
+    },
+    "&.simplebar-visible:before": {
+      opacity: 1
+    }
+  },
+  "& .simplebar-track.simplebar-vertical": {
+    width: 10
+  },
+  "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": {
+    height: 6
+  },
+  "& .simplebar-mask": {
+    zIndex: "inherit"
+  },
+  "& .simplebar-content": {},
+  '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] ': {
+    "& .simplebar-content": {
+      marginRight: "12px"
+    }
+  }
+}));
+const componentName = "M4LScrollBar";
+generateUtilityClasses(componentName, [
+  "root"
+]);
+function getScrollBarUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useScrollBarUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getScrollBarUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function ScrollBar({
+  children
+}) {
+  const userAgent = typeof navigator === "undefined" ? "SSR" : navigator.userAgent;
+  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(Box, {
+      sx: {
+        overflowX: "auto",
+        width: "100%"
+      },
+      children
+    });
+  }
+  const classes = useScrollBarUtilityClasses();
+  return /* @__PURE__ */ jsx(RootStyle, {
+    id: "RootStyle",
+    className: classes.root,
+    children: /* @__PURE__ */ jsx(SimpleBarStyle, {
+      autoHide: false,
+      children
+    })
+  });
+}
+export {
+  ScrollBar as S
+};

package/components/SideBar/{index.327679a6.js → index.387a2fa1.js}

@@ -1,16 +1,17 @@
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { useEnvironment } from "@m4l/core";
-import { createContext, useContext, useState } from "react";
+import { useEnvironment, useBase, BaseProvider } from "@m4l/core";
+import { createContext, useContext, useState, useEffect } from "react";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { I as Image } from "../Image/index.c18ebf5a.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.62aea582.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.d88a3f2e.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { styled as styled$1, generateUtilityClasses, ListItemText, ListItemButton, Collapse, useTheme, Skeleton, Drawer as Drawer$1 } from "@mui/material";
-import { I as Icon, A as ArrowIcon } from "../Icon/index.d1402200.js";
+import { I as Icon, A as ArrowIcon } from "../Icon/index.435df215.js";
 import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
 import clsx from "clsx";
+import { useLocation } from "react-router-dom";
 import { P as Popover } from "../mui_extended/Popover/index.9f35d0eb.js";
-import { S as ScrollBar } from "../ScrollBar/index.d4410cb5.js";
+import { S as ScrollBar } from "../ScrollBar/index.65bb2930.js";
 import { styled, alpha } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../utils/index.c43a95f4.js";
@@ -498,30 +499,57 @@ function NavListSubItem(props) {
     }
   } = props;
   const {
-    classes
+    setAncestorActive
+  } = useBase();
+  const [internalItemActive, setInternalItemActive] = useState(false);
+  const {
+    classes,
+    isItemActive
   } = useSideBar();
+  const active = isItemActive(list);
   const [openSub, setOpenSub] = useState(false);
   const hasChildren = list.children && Array.isArray(list.children) && list.children.length > 0;
+  const location = useLocation();
+  useEffect(() => {
+    let mounted = true;
+    if (mounted) {
+      if (active || internalItemActive) {
+        setAncestorActive(true);
+      } else {
+        setAncestorActive(false);
+      }
+    }
+    return function cleanUp() {
+      setAncestorActive(false);
+      mounted = false;
+    };
+  }, [active, internalItemActive, location.search]);
   return /* @__PURE__ */ jsx(NavListSubItemRoot, {
-    className: classes.navListSubItemRoot,
+    className: clsx(classes.navListSubItemRoot, active || internalItemActive ? classes.subItemActive : null),
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId("navListSubItemRoot")
     } : {},
-    children: hasChildren ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(NavSubItem, {
-        item: list,
-        openSub,
-        setOpenSub,
-        closePopover
-      }), /* @__PURE__ */ jsx(Collapse, {
-        in: openSub,
-        timeout: "auto",
-        unmountOnExit: true,
-        children: (list.children || []).map((item) => /* @__PURE__ */ jsx(NavListSubItem, {
-          item,
+    children: hasChildren ? /* @__PURE__ */ jsx(BaseProvider, {
+      value: {
+        ancestorActive: internalItemActive,
+        setAncestorActive: setInternalItemActive
+      },
+      children: /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(NavSubItem, {
+          item: list,
+          openSub,
+          setOpenSub,
           closePopover
-        }, item.title))
-      })]
+        }), /* @__PURE__ */ jsx(Collapse, {
+          in: openSub,
+          timeout: "auto",
+          unmountOnExit: true,
+          children: (list.children || []).map((item) => /* @__PURE__ */ jsx(NavListSubItem, {
+            item,
+            closePopover
+          }, item.title))
+        })]
+      })
     }) : /* @__PURE__ */ jsx(NavSubItem, {
       item: list,
       openSub,
@@ -627,53 +655,86 @@ const ContainerListSubItem = styled$1("div")(({
 }));
 function ItemListMain(props) {
   const {
-    list,
-    setItemMainActive,
-    itemMainActive,
-    id
+    list
   } = props;
   const {
     collapsed: isSideBarCollapsed,
     isItemActive,
     classes
   } = useSideBar();
-  const active = isItemActive(list);
-  const [open, setOpen] = useState(active);
+  const location = useLocation();
+  const [internalItemActive, setInternalItemActive] = useState(false);
+  const [active, setActive] = useState(false);
+  const childrens = [];
+  const findChildren = (list2) => {
+    const moduleId = list2.children ? list2.children[0].module_id : void 0;
+    if (moduleId) {
+      childrens.push(moduleId);
+      list2.children && findChildren(list2.children[0]);
+    }
+  };
+  useEffect(() => {
+    let mounted = true;
+    if (mounted) {
+      setActive(false);
+      setActive(isItemActive(list));
+      if (mounted && !active) {
+        findChildren(list);
+        for (let i = 0; i < childrens.length; i++) {
+          if (isItemActive({
+            title: "",
+            module_id: childrens[i]
+          })) {
+            setActive(true);
+            break;
+          }
+        }
+      }
+    }
+    return function cleanUp() {
+      mounted = false;
+    };
+  }, [location.search]);
+  const [open, setOpen] = useState(true);
   const hasChildren = list.children && Array.isArray(list.children) && list.children.length > 0;
   if (hasChildren) {
-    return /* @__PURE__ */ jsxs("div", {
+    return /* @__PURE__ */ jsx("div", {
       role: "presentation",
-      className: clsx(classes.itemListMainRoot, itemMainActive === id && classes.itemMainActive),
+      className: clsx(classes.itemListMainRoot, active || internalItemActive ? classes.itemMainActive : null),
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId("itemListMainRoot")
       } : {},
-      onClick: () => setItemMainActive(id),
-      children: [/* @__PURE__ */ jsx(NavItemMain, {
-        item: list,
-        open,
-        setOpen
-      }), !isSideBarCollapsed && /* @__PURE__ */ jsx(Collapse, {
-        in: open,
-        timeout: "auto",
-        unmountOnExit: true,
-        children: (list.children || []).map((item) => /* @__PURE__ */ jsx(ContainerListSubItem, {
-          className: classes.containerListSubItem,
-          ...process.env.NODE_ENV !== "production" ? {
-            [TEST_PROP_ID]: getNameDataTestId("containerListSubItem")
-          } : {},
-          children: /* @__PURE__ */ jsx(NavListSubItem, {
-            item
-          }, item.title)
-        }, item.title))
-      })]
+      children: /* @__PURE__ */ jsxs(BaseProvider, {
+        value: {
+          ancestorActive: internalItemActive,
+          setAncestorActive: setInternalItemActive
+        },
+        children: [/* @__PURE__ */ jsx(NavItemMain, {
+          item: list,
+          open,
+          setOpen
+        }), !isSideBarCollapsed && /* @__PURE__ */ jsx(Collapse, {
+          in: open,
+          timeout: "auto",
+          unmountOnExit: true,
+          children: (list.children || []).map((item) => /* @__PURE__ */ jsx(ContainerListSubItem, {
+            className: classes.containerListSubItem,
+            ...process.env.NODE_ENV !== "production" ? {
+              [TEST_PROP_ID]: getNameDataTestId("containerListSubItem")
+            } : {},
+            children: /* @__PURE__ */ jsx(NavListSubItem, {
+              item
+            }, item.title)
+          }, item.title))
+        })]
+      })
     });
   }
   return /* @__PURE__ */ jsx("div", {
-    className: clsx(classes.itemListMainRoot, itemMainActive === id && classes.itemMainActive),
+    className: clsx(classes.itemListMainRoot, active ? classes.itemMainActive : null),
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId("itemListMainRoot")
     } : {},
-    onClick: () => setItemMainActive(id),
     children: /* @__PURE__ */ jsx(NavItemMain, {
       item: list,
       open,

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ItemListRoot/subcomponents/NavItemRoot/type.d.ts

@@ -1,5 +1,10 @@
+/// <reference types="react" />
 import { MenuDataType } from "../../../../../../types";
 import { OpenStateItem } from "../../types";
+export interface AncestorItem {
+    ancestorActive: boolean;
+    setAncestorActive: React.Dispatch<React.SetStateAction<boolean>>;
+}
 export declare type NavListProps = MenuDataType;
 export interface NavItemRootProps extends OpenStateItem {
     item: NavListProps;

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

@@ -1,5 +1,5 @@
 import { AreasAdmninClasses } from './types';
 import { OwnerState } from '../../../contexts/AreasContext/types';
 export declare const areasAdminClasses: AreasAdmninClasses;
-export declare const useAreasAdminUtilityClasses: (ownerState: OwnerState) => Record<"root" | "areaChipRoot" | "areaIconLayer" | "areaContainerChipsIcon" | "areaContainerChips" | "areaContainerContentChips" | "areaEditPopover" | "areaChipMobileRoot" | "areaChipMobileIconContainer" | "areaChipTitle" | "areaContainerChipEditButton" | "areaChipDeleteButton" | "areaChipEditButton" | "areasAddButton" | "areasPopoverMobileOptions" | "areasPopoverListWindows", string>;
+export declare const useAreasAdminUtilityClasses: (ownerState: OwnerState) => Record<"root" | "rootContent" | "areaChipRoot" | "areaIconLayer" | "areaContainerChipsIcon" | "areaContainerChips" | "areaContainerContentChips" | "areaEditPopover" | "areaChipMobileRoot" | "areaChipMobileIconContainer" | "areaChipTitle" | "areaContainerChipEditButton" | "areaChipDeleteButton" | "areaChipEditButton" | "areasAddButton" | "areasPopoverMobileOptions" | "areasPopoverListWindows" | "areasPopoverListWindowsIcon", string>;
 export declare type AdminClasses = ReturnType<typeof useAreasAdminUtilityClasses>;

package/components/areas/components/AreasAdmin/classes/types.d.ts

@@ -1,5 +1,6 @@
 export interface AreasAdmninClasses {
     root: string;
+    rootContent: string;
     areaChipRoot: string;
     areaChipTitle: string;
     areaContainerChips: string;
@@ -16,6 +17,7 @@ export interface AreasAdmninClasses {
     areasAddButton: string;
     areasPopoverMobileOptions: string;
     areasPopoverListWindows: string;
+    areasPopoverListWindowsIcon: string;
     selected: string;
     isMobile: string;
     disabled: string;