@m4l/components 0.1.75 → 0.1.76

package/components/Period/index.526791a3.js

@@ -0,0 +1,322 @@
+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.9dae8337.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.e376a68e.js";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.fdb5dcbd.js";
+import "clsx";
+import "react-hook-form";
+import "../../contexts/ModalContext/index.699f95fa.js";
+import "../../react-draggable.6d7949a3.js";
+import "../ModalDialog/index.d9c5d400.js";
+import "../Resizeable/index.f6e48e56.js";
+import "@m4l/graphics";
+import "../modal/index.1b25b61d.js";
+import "../Image/index.c18ebf5a.js";
+import "../mui_extended/IconButton/index.1a9d4fa5.js";
+import "../mui_extended/Accordion/index.3faafd8b.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/lab";
+import "../mui_extended/Popover/index.9f35d0eb.js";
+import "../mui_extended/MenuActions/index.ba1da3b3.js";
+import "../mui_extended/Pager/index.67bda2c5.js";
+import "../mui_extended/Tab/index.9e2f6e34.js";
+import "../mui_extended/Tooltip/index.5a795dcd.js";
+import "zustand";
+import "../areas/contexts/AreasContext/index.f0397b7c.js";
+import "../areas/components/AreasAdmin/index.946eebb9.js";
+import "zustand/shallow";
+import "../ScrollBar/index.bbe48f4d.js";
+import "../areas/components/AreasViewer/index.bf4191ea.js";
+import "../LinearProgressIndeterminate/index.d34d398f.js";
+import "../areas/contexts/WindowToolsMFContext/index.8f3e2a04.js";
+import "../areas/contexts/DynamicMFParmsContext/index.1607c78e.js";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { unstable_composeClasses } from "@mui/base";
+const ContainerPeriod = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LPeriod?.styleOverrides
+}));
+const Gap = styled("div")(({
+  theme
+}) => ({
+  width: "1px",
+  height: "20px",
+  backgroundColor: theme.palette.divider
+}));
+const SKTWrapper = styled("div", {
+  shouldForwardProp: (props) => props !== "readOnly"
+})(({
+  theme,
+  readOnly
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "37.5px",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  border: `1px solid ${theme.palette.divider}`,
+  ...readOnly && {
+    border: "0px"
+  },
+  padding: theme.spacing(0.5, 1),
+  borderRadius: "4px"
+}));
+styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  width: "100%",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  textAlign: "left"
+}));
+styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  width: "70px",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  textAlign: "left"
+}));
+var ETimePeriods = /* @__PURE__ */ ((ETimePeriods2) => {
+  ETimePeriods2[ETimePeriods2["YEARS"] = 0] = "YEARS";
+  ETimePeriods2[ETimePeriods2["MONTHS"] = 1] = "MONTHS";
+  ETimePeriods2[ETimePeriods2["DAYS"] = 2] = "DAYS";
+  return ETimePeriods2;
+})(ETimePeriods || {});
+const PERIOD_FORMATTER_DICTIONARY_KEY = `period_formatter`;
+const dictionary = {
+  LABEL_YEARS: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_years`,
+  LABEL_MONTHS: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_months`,
+  LABEL_DAYS: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_days`
+};
+function getPeriodComponetsDictionary() {
+  return ["dictionary"].concat(getCommonActionsDictionary());
+}
+const componentName = "M4LPeriod";
+generateUtilityClasses(componentName, [
+  "root",
+  "gap",
+  "containerDateLabel",
+  "containerDateValue",
+  "stateError",
+  "stateReadOnly",
+  "variantMonoperiod",
+  "variantMultiperiod"
+]);
+function getPeriodUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const periodUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.state === "error" && "stateError", ownerState.state === "success" && "stateSuccess", ownerState.state === "warning" && "stateWarning", ownerState.state === "info" && "stateInfo", ownerState.readOnly && "stateReadOnly", ownerState.variant === "monoperiod" ? "variantMonoperiod" : null, ownerState.variant === "multiperiod" ? "variantMultiperiod" : null],
+    gap: ["gap"],
+    containerDateLabel: ["containerDateLabel"],
+    containerDateValue: ["containerDateValue"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPeriodUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const PERIOD_PREFIX = "M4LPeriod";
+const getNamePeriodDataTestId = (KEY) => {
+  return `${PERIOD_PREFIX}-${KEY}`;
+};
+const getSelPeriodTime = (period) => {
+  if (!period)
+    return ETimePeriods.YEARS;
+  if (period.selPeriodTime)
+    return period.selPeriodTime;
+  if (period.years && period.years > 0)
+    return ETimePeriods.YEARS;
+  if (period.months && period.months > 0)
+    return ETimePeriods.MONTHS;
+  if (period.days && period.days > 0)
+    return ETimePeriods.DAYS;
+  return ETimePeriods.YEARS;
+};
+const getSingleValue = (period) => {
+  if (!period)
+    return "";
+  if (period.singleValue !== void 0)
+    return period.singleValue;
+  if (period.years && period.years > 0)
+    return period.years;
+  if (period.months && period.months > 0)
+    return period.months;
+  if (period.days && period.days > 0)
+    return period.days;
+  return "";
+};
+const Period = (props) => {
+  const {
+    value,
+    onChange,
+    state,
+    readOnly = false,
+    skeletonWidth = "100%",
+    skeletonHeight = "18px",
+    variant = "monoperiod"
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const selPeriodTime = getSelPeriodTime(value);
+  const singleValue = getSingleValue(value);
+  const onTotalChange = (newPeriodTime, newValue) => {
+    const newPeriod = {
+      selPeriodTime: newPeriodTime,
+      singleValue: newValue
+    };
+    if (newValue !== "" && newValue > 0) {
+      newPeriod.years = 0;
+      newPeriod.months = 0;
+      newPeriod.days = 0;
+      if (newPeriodTime === ETimePeriods.YEARS)
+        newPeriod.years = newValue;
+      if (newPeriodTime === ETimePeriods.MONTHS)
+        newPeriod.months = newValue;
+      if (newPeriodTime === ETimePeriods.DAYS)
+        newPeriod.days = newValue;
+    }
+    onChange(newPeriod);
+  };
+  const onChangeTime = (newPeriodTime) => {
+    if (newPeriodTime) {
+      onTotalChange(newPeriodTime.id, singleValue);
+    }
+  };
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const options = useMemo(() => [{
+    id: 0,
+    label: getLabel(dictionary.LABEL_DAYS)
+  }, {
+    id: 1,
+    label: getLabel(dictionary.LABEL_MONTHS)
+  }, {
+    id: 2,
+    label: getLabel(dictionary.LABEL_YEARS)
+  }], [getLabel]);
+  const ownerState = {
+    readOnly,
+    state,
+    variant
+  };
+  const classes = periodUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(ContainerPeriod, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNamePeriodDataTestId("root")
+    } : {},
+    children: !isSkeleton ? /* @__PURE__ */ jsx(Fragment, {
+      children: readOnly ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx("div", {
+          className: classes.containerDateLabel,
+          children: /* @__PURE__ */ jsx(Typography, {
+            variant: "body",
+            skeletonWidth: "50%",
+            children: value.selPeriodTime
+          })
+        }), /* @__PURE__ */ jsx(Gap, {
+          className: classes.gap,
+          ...process.env.NODE_ENV !== "production" ? {
+            [TEST_PROP_ID]: getNamePeriodDataTestId("gap")
+          } : {}
+        }), /* @__PURE__ */ jsx("div", {
+          className: classes.containerDateValue,
+          children: /* @__PURE__ */ jsx(Typography, {
+            variant: "body",
+            skeletonWidth: "80%",
+            children: value.singleValue
+          })
+        }), /* @__PURE__ */ jsx(Icon, {
+          src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
+        })]
+      }) : /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(Autocomplete, {
+          options,
+          value: options[selPeriodTime],
+          disableClearable: true,
+          onChange: (_event, autcValue) => {
+            onChangeTime(autcValue);
+          },
+          renderInput: (params) => {
+            return /* @__PURE__ */ jsx(TextField, {
+              ...params,
+              fullWidth: true,
+              variant: "standard",
+              SelectProps: {
+                native: true
+              },
+              InputProps: {
+                disableUnderline: true,
+                ...params.InputProps
+              },
+              autoComplete: "off"
+            }, `tx_async_${params.id}`);
+          }
+        }), /* @__PURE__ */ jsx(Gap, {
+          className: classes.gap,
+          ...process.env.NODE_ENV !== "production" ? {
+            [TEST_PROP_ID]: getNamePeriodDataTestId("gap")
+          } : {}
+        }), /* @__PURE__ */ jsx(TextField, {
+          type: "number",
+          variant: "standard",
+          value: singleValue,
+          InputProps: {
+            disableUnderline: true
+          },
+          onChange: (e) => {
+            onTotalChange(selPeriodTime, e.target.value === "" ? "" : parseInt(e.target.value));
+          }
+        }), /* @__PURE__ */ jsx(Icon, {
+          src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
+        })]
+      })
+    }) : /* @__PURE__ */ jsxs(SKTWrapper, {
+      readOnly,
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: "50%",
+        height: skeletonHeight
+      }), /* @__PURE__ */ jsx(Gap, {
+        className: classes.gap,
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getNamePeriodDataTestId("gap")
+        } : {}
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: skeletonWidth,
+        height: skeletonHeight
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 20,
+        sx: {
+          minWidth: "20px",
+          minHeight: "20px"
+        }
+      })]
+    })
+  });
+};
+export {
+  Period as P,
+  getPeriodComponetsDictionary as g
+};

package/components/Period/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { PeriodProps } from './types';
-export declare const Period: (props: PeriodProps) => import("react").JSX.Element;
+export { Period } from './Period';
+export type { PeriodType } from './types';

package/components/Period/tests/constants.d.ts

@@ -0,0 +1 @@
+export declare const PERIOD_PREFIX = "M4LPeriod";

package/components/Period/tests/utils.d.ts

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

package/components/Period/types.d.ts

@@ -8,10 +8,8 @@ export declare type PeriodTime = {
     id: number;
     label: string;
 };
-export interface WrapperProps extends Pick<PeriodProps, 'readOnly'> {
-    error: boolean;
-}
 export declare type SKTWrapperProps = Pick<PeriodProps, 'readOnly'>;
+export declare type PeriodState = 'error' | 'success' | 'warning' | 'info' | undefined;
 export declare type PeriodType = {
     selPeriodTime: ETimePeriods;
     singleValue: number | '';
@@ -22,7 +20,7 @@ export declare type PeriodType = {
 export interface PeriodProps {
     value: PeriodType;
     onChange: (newValue: PeriodType) => void;
-    error?: boolean;
+    state?: PeriodState;
     readOnly?: boolean;
     variant?: PeriodVariant;
     skeletonWidth?: string | number;
@@ -31,3 +29,4 @@ export interface PeriodProps {
 export interface WrapperProps {
     error: boolean;
 }
+export declare type OwnerState = Pick<PeriodProps, 'state' | 'readOnly' | 'variant'>;

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

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

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

@@ -0,0 +1,9 @@
+import { PropertyValueClassesType } from './types';
+export declare const propertyValueClasses: PropertyValueClassesType;
+export declare function getPropertyValueUtilityClass(slot: string): string;
+export declare const propertyValueUtilityClasses: () => {
+    value: string;
+    root: string;
+    property: string;
+    skeletonProperty: string;
+};

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

@@ -0,0 +1,9 @@
+import { propertyValueUtilityClasses } from ".";
+export interface PropertyValueClassesType {
+    root: string;
+    property: string;
+    value: string;
+    skeletonProperty: string;
+}
+export declare type PropertyValueClassesKey = keyof PropertyValueClassesType;
+export declare type Classes = ReturnType<typeof propertyValueUtilityClasses>;

package/components/PropertyValue/{index.dfcfe1ba.js → index.8a1adf3e.js}

@@ -1,9 +1,12 @@
 import { styled } from "@mui/material/styles";
-import { Skeleton } from "@mui/material";
+import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useModuleSkeleton } from "@m4l/core";
-const WrapperPropertyValue = styled("div", {
+import { unstable_composeClasses } from "@mui/base";
+import clsx from "clsx";
+const PropertyValueRoot = styled("div", {
   shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
 })(({
   propertyWidth,
@@ -24,7 +27,8 @@ const WrapperPropertyValue = styled("div", {
     gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr",
     gap: theme.spacing(2),
     alignItems: "center"
-  }
+  },
+  ...theme.components?.M4LPropertyValue?.styleOverrides
 }));
 const Property = styled("div", {
   shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
@@ -79,8 +83,19 @@ const SKTWrapperProperty = styled("div")(() => ({
   display: "flex",
   justifyContent: "flex-end"
 }));
-function SKTProperty() {
+const ICON_PREFIX = "M4LPropertyValue";
+const getNamePropertyValueDataTestId = (KEY) => {
+  return `${ICON_PREFIX}-${KEY}`;
+};
+function SKTProperty(props) {
+  const {
+    className
+  } = props;
   return /* @__PURE__ */ jsx(SKTWrapperProperty, {
+    className,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNamePropertyValueDataTestId("skeletonProperty")
+    } : {},
     children: /* @__PURE__ */ jsx(Skeleton, {
       variant: "text",
       width: 68,
@@ -88,6 +103,28 @@ function SKTProperty() {
     })
   });
 }
+const componentName = "M4LPropertyValue";
+generateUtilityClasses(componentName, [
+  "root",
+  "property",
+  "value",
+  "skeletonProperty"
+]);
+function getPropertyValueUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const propertyValueUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    property: ["property"],
+    value: ["value"],
+    skeletonProperty: ["skeletonProperty"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPropertyValueUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
 function PropertyValue(props) {
   const {
     property,
@@ -96,7 +133,8 @@ function PropertyValue(props) {
     valueHeight = "auto",
     valueWidth = "100",
     valueWidthMobile,
-    isForm
+    isForm,
+    className
   } = props;
   const isDesktop = useResponsiveDesktop();
   const isSkeleton = useModuleSkeleton();
@@ -125,19 +163,31 @@ function PropertyValue(props) {
     }
     return 100;
   };
-  return /* @__PURE__ */ jsxs(WrapperPropertyValue, {
-    id: "WrapperPropertyValue",
+  const classes = propertyValueUtilityClasses();
+  return /* @__PURE__ */ jsxs(PropertyValueRoot, {
+    className: clsx(classes.root, className),
     isForm,
     propertyWidth,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNamePropertyValueDataTestId("root")
+    } : {},
     children: [/* @__PURE__ */ jsx(Property, {
-      id: "Property",
+      className: classes.property,
       isForm,
       propertyWidth,
-      children: isSkeleton ? /* @__PURE__ */ jsx(SKTProperty, {}) : property
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNamePropertyValueDataTestId("property")
+      } : {},
+      children: isSkeleton ? /* @__PURE__ */ jsx(SKTProperty, {
+        className: classes.skeletonProperty
+      }) : property
     }), /* @__PURE__ */ jsx(Value, {
-      id: "Value",
+      className: classes.value,
       valueWidth: getValueW(),
       valueHeight,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNamePropertyValueDataTestId("value")
+      } : {},
       children: value
     })]
   });

package/components/PropertyValue/skeleton.d.ts

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

package/components/PropertyValue/tests/constants.d.ts

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

package/components/PropertyValue/tests/utils.d.ts

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

package/components/PropertyValue/types.d.ts

@@ -11,7 +11,11 @@ export interface PropertyValueProps extends PropertyProps, ValueProps {
     property: string;
     value: number | string | ReactNode;
     isForm?: boolean;
+    className?: string;
 }
 export declare type WrapperProps = PropertyProps & Pick<PropertyValueProps, 'isForm'>;
 export declare type WrapperPropertyProps = WrapperProps;
 export declare type WrapperValueProps = Omit<ValueProps, 'valueWidthMobile'>;
+export interface SKTPropertyProps {
+    className: string;
+}

package/components/Resizeable/{index.41a8048b.js → index.f6e48e56.js}

@@ -1,5 +1,5 @@
 import { styled } from "@mui/material/styles";
-import { R as ResizableBox } from "../../react-resizable.24367d77.js";
+import { R as ResizableBox } from "../../react-resizable.b6f8e04a.js";
 import { jsx } from "react/jsx-runtime";
 const WrapperResizeable = styled(ResizableBox)(({
   theme

package/components/SideBar/{index.1ae13a73.js → index.9e1a5b96.js}

@@ -2,18 +2,18 @@ import { useResponsiveDesktop } from "@m4l/graphics";
 import { useEnvironment } from "@m4l/core";
 import { createContext, useContext, useState } from "react";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { I as Image } from "../Image/index.8aae9322.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.3b05af71.js";
+import { I as Image } from "../Image/index.c18ebf5a.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.1a9d4fa5.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.f9119f5e.js";
+import { I as Icon, A as ArrowIcon } from "../Icon/index.9dae8337.js";
 import { T as Typography } from "../mui_extended/Typography/index.443590d6.js";
 import clsx from "clsx";
 import { P as Popover } from "../mui_extended/Popover/index.9f35d0eb.js";
 import { S as ScrollBar } from "../ScrollBar/index.bbe48f4d.js";
 import { styled, alpha } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.b61dccbe.js";
+import { g as getComponentUtilityClass } from "../../utils/index.008b4c2a.js";
 const SideBarRoot = styled("div")(({
   theme
 }) => ({

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" | "areaContainerChips" | "areaChipTitle" | "areaChipDeleteButton" | "areaChipEditButton" | "areasAddButton", string>;
+export declare const useAreasAdminUtilityClasses: (ownerState: OwnerState) => Record<"root" | "areaChipRoot" | "areaIconLayer" | "areaContainerChips" | "areaEditPopover" | "areaChipMobileRoot" | "areaChipMobileIconContainer" | "areaChipTitle" | "areaContainerChipEditButton" | "areaChipDeleteButton" | "areaChipEditButton" | "areasAddButton", string>;
 export declare type AdminClasses = ReturnType<typeof useAreasAdminUtilityClasses>;

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

@@ -3,7 +3,11 @@ export interface AreasAdmninClasses {
     areaChipRoot: string;
     areaChipTitle: string;
     areaContainerChips: string;
+    areaChipMobileRoot: string;
+    areaEditPopover: string;
+    areaChipMobileIconContainer: string;
     areaIconLayer: string;
+    areaContainerChipEditButton: string;
     areaChipDeleteButton: string;
     areaChipEditButton: string;
     areasAddButton: string;