{"version":3,"sources":["../src/components/gui/XGUI/index.tsx","../src/components/gui/components/XGUIContainer.tsx","../src/components/gui/XGUI/XGUIActions.tsx","../src/hooks/useCloneElement.ts","../src/components/gui/XGUI/XGUIHeader.tsx","../src/components/gui/XGUI/XGUIHeaderBreadCrumb.tsx","../src/components/gui/XGUI/XGUIActionDeleteButton.tsx","../src/components/gui/XGUI/XGUIFieldContainer.tsx","../src/components/core/Button.ts"],"names":["React","useRecoilState","useSetRecoilState","createPopper","styled","XGUIContainer","XDiv_default","MAIN_COLOR","XGUIContainer_default","Stack","Fab","Tooltip","AddRounded","ContentCopyOutlined","LayersOutlined","nanoid","useRecoilCallback","useRecoilValue","useCloneElement","selectedIndex","USE_SELECTED_INDEX","setXPage","useXPageUpdater","setCommon","useXCommonChildrenUpdater","saveData","useSaveData","snapshot","index","isCommon","localId","template","createElement","mainId","element","USE_X_ELEMENT_SELECTOR","clone","id","old","USE_X_COMMON_CHILDREN_SELECTOR","error","SettingsOutlined","Breadcrumbs","Typography","XGUIHeaderBreadCrumb","selectedElement","hierachy","item","i","COMPONENT_READABLE_NAME","X_PAGE_SETTINGS","XGUIHeader","setSelectedIndex","SECONDARY_COLOR","other","MyIcon_default","useResetRecoilState","useKey","DeleteOutlineOutlined","uniq","XGUIActionDeleteButton","setPage","setParent","useXElementUpdater","resetXCommonElement","USE_X_COMMON","xChildren","setXChildren","useXCommonChildren","resetXpageElement","USE_X_ELEMENT","deleteElement","showDialog","savedData","parentID","getRef","e","el","elementToRemoveIndexes","getElementToRemove","child","page","section","keep","AddElementDialog","XGUIActions","cloneElement","status","setStatus","close","open","XGUI_ACTIONS","GREEN_COLOR","COMPONENT_CHILDREN","YELLOW_COLOR","UN_DELETABLE_COMPONENT","action","_overrideAction","_defaultAction","Button","props","DEFAULT_FONT_FAMILY","generateBorder","generateRadius","generateSide","CircularProgress","XGUIDesignTab","XGUIDataTab","XGUIOrderElementsTab","XGUIFieldContainer","setSelectedElement","tab","setTab","tabs","COMPONENT_WITH_API_FETCH","btn","XGUI","SELECTED_ELEMENT","popper","setPopper","breakpoint","useBreakpoint","guiRef","browserHeader","reference","placement","state","XGUI_default"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { useRecoilState, useSetRecoilState } from \"recoil\";\nimport {\n  SELECTED_ELEMENT,\n  USE_SELECTED_INDEX,\n} from \"../../../hooks/useSelectedElement\";\nimport { XGUIProps } from \"../../../utils/interfaces/gui/fields.interfaces\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\nimport XGUIContainer from \"../components/XGUIContainer\";\n\nimport { Stack } from \"@mui/material\";\nimport { useBreakpoint } from \"../../../hooks/useBreakpoint\";\nimport { XGUIActions } from \"./XGUIActions\";\nimport { XGUIHeader, X_PAGE_SETTINGS } from \"./XGUIHeader\";\nimport { XGUIFieldContainer } from \"./XGUIFieldContainer\";\n\nconst XGUI: React.FC<XGUIProps> = () => {\n  // THIS IS THE CURRENT SELECTED ELEMENT\n  const [selectedElement, setSelectedElement] =\n    useRecoilState(SELECTED_ELEMENT);\n\n  const [popper, setPopper] = React.useState<PopperInstance>();\n\n  // THIS IS USE TO CLOSE THE POPUP\n  const setSelectedIndex = useSetRecoilState(USE_SELECTED_INDEX);\n\n  const breakpoint = useBreakpoint();\n\n  // THE CURRENT ELEMENT REF TO USE WITH POPPER.JS\n  const guiRef = React.useRef<any>();\n\n  // INIT THE POPPER IF ALL DATA ARE OK\n  React.useEffect(() => {\n    if (!guiRef.current) return;\n\n    if (selectedElement) {\n      if (!selectedElement.index) return setSelectedIndex(null);\n\n      const element = document.getElementById(selectedElement.index);\n\n      if (!element) return setSelectedIndex(null);\n\n      const browserHeader = document.querySelector(\"#XEditor\");\n\n      if (!browserHeader) return setSelectedIndex(null);\n\n      setPopper(\n        createPopper(element, guiRef.current, {\n          placement: \"top-start\",\n          strategy: \"fixed\",\n          modifiers: [\n            {\n              name: \"myModifier\",\n              enabled: true,\n              phase: \"main\",\n              requiresIfExists: [\"offset\"],\n              options: {\n                boundary: browserHeader,\n              },\n              fn(/*{ state }*/) {\n                // const overflow = detectOverflow(state);\n                // const browserTop =\n                //   (browserHeader as HTMLDivElement).offsetTop +\n                //   // BROWER_HEADER HEIGHT\n                //   50;\n                // if (state.rects.reference.y <= browserTop - 10) {\n                //   console.log(\n                //     \"overflow\",\n                //     overflow,\n                //     state.rects.reference.y,\n                //     browserTop - 10\n                //   );\n                //   // setSelectedIndex(null);\n                // }\n                // ...\n              },\n            },\n            {\n              name: \"offset\",\n              options: {\n                offset: ({ reference, placement }: any) => {\n                  if (placement === \"top-start\") {\n                    return [0, -reference.height];\n                  } else {\n                    return [0, 0];\n                  }\n                },\n              },\n            },\n            {\n              name: \"preventOverflow\",\n              options: {\n                boundary: document.getElementById(\"XPage\"),\n              },\n            },\n            {\n              name: \"flip\",\n              enabled: false,\n\n              options: {\n                flipVariations: false, // true by default\n                // boundary: document.getElementById(\"XPage\"),\n              },\n            },\n            // {\n            //   name: \"flip\",\n            //   options: {\n            //     fallbackPlacements: [\"top-start\"],\n            //   },\n            // },\n            {\n              name: \"sameWidth\",\n              enabled: true,\n              fn: ({ state }) => {\n                state.styles.popper.width = `${state.rects.reference.width}px`;\n                state.styles.popper.height = `${state.rects.reference.height}px`;\n              },\n              phase: \"beforeWrite\",\n              requires: [\"computeStyles\"],\n            },\n          ],\n        })\n      );\n    }\n    // else {\n    //   const pageElement = document.getElementById(\"X_BROWSER\");\n\n    //   if (!pageElement) return;\n\n    //   setPopper(\n    //     createPopper(pageElement, guiRef.current, {\n    //       placement: \"right-start\",\n    //       strategy: \"fixed\",\n    //       modifiers: [\n    //         {\n    //           name: \"offset\",\n    //           options: {\n    //             offset: [0, 15],\n    //           },\n    //         },\n    //       ],\n    //     })\n    //   );\n    // }\n\n    if (typeof popper !== \"undefined\") return popper.destroy;\n  }, [selectedElement, guiRef.current, breakpoint]);\n\n  return (\n    <>\n      {\n        <Stack\n          id=\"popper\"\n          data-popper-reference-hidden={true}\n          ref={guiRef}\n          sx={{ pointerEvents: \"none\", opacity: selectedElement ? 1 : 0 }}\n          border={2}\n          borderColor=\"secondary.main\"\n          justifyContent=\"flex-end\"\n          position=\"absolute\"\n          zIndex={100}\n        >\n          <XGUIActions\n            selectedElement={selectedElement ?? X_PAGE_SETTINGS}\n            setSelectedIndex={setSelectedIndex}\n          />\n        </Stack>\n      }\n      <Stack\n        sx={{\n          width: 400,\n          position: \"relative\",\n          // zIndex: 100,\n          // transition: \"all linear 0.3s\",\n        }}\n      >\n        <XGUIContainer className=\"XGUI-Container\">\n          <XGUIHeader\n            selectedElement={selectedElement ?? X_PAGE_SETTINGS}\n            setSelectedIndex={setSelectedIndex}\n          />\n          <XGUIFieldContainer\n            selectedElement={selectedElement ?? X_PAGE_SETTINGS}\n            setSelectedElement={setSelectedElement}\n          />\n        </XGUIContainer>\n      </Stack>\n    </>\n  );\n};\n\nexport default XGUI;\n","import styled from \"@emotion/styled\";\nimport XDiv from \"../../core/XDiv\";\nimport { MAIN_COLOR } from \"../../../utils/constants/common/utils\";\n\nconst XGUIContainer = styled(XDiv)<{ width?: string }>`\n  width: 400px;\n  height: 100%;\n  position: relative;\n  z-index: 100;\n  transition: all linear 0.3s;\n\n  & .XGUI-Header {\n    flex-direction: row;\n    background-color: ${MAIN_COLOR};\n    width: 100%;\n    color: white;\n    min-height: 50px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    /* margin-bottom: 15px; */\n    /* border-radius: 0px; */\n    /* overflow: hidden; */\n    box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.75);\n\n    & .XGUI-Drag-Handler {\n      width: 50px;\n      height: 100%;\n      background-color: black;\n      font-size: 20px;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      text-align: center;\n      border: none;\n      display: flex;\n    }\n\n    & .XGUI-Header-Breadcrumb {\n      height: 100%;\n      align-items: center;\n      flex-direction: row;\n      flex: 1;\n      gap: 5px;\n      cursor: default;\n      font-size: 10px;\n\n      & .XGUI-Header-Breadcrumb-Path {\n        font-size: 10px;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        font-weight: 700;\n        background-color: transparent;\n        color: white;\n        padding: 0;\n        border: none;\n      }\n    }\n\n    & .XGUI-Header-Btn {\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background-color: rgba(0, 0, 0, 0.2);\n      font-size: 20px;\n      color: white;\n      border: 0;\n      cursor: pointer;\n      transition: linear all 0.2s;\n\n      &:hover {\n        background-color: #000000;\n      }\n    }\n  }\n\n  & .XGUI-Fields-Container {\n    /* background-color: #101122; */\n    background-color: #0e0d18;\n    box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.75);\n    position: relative;\n    color: black;\n    flex: 1;\n\n    & .XGUI-Fields-Tabs {\n      background-color: #000000;\n      flex-direction: row;\n\n      & .XGUI-Fields-Tab {\n        height: 40px;\n        flex: 1;\n        border: 0;\n        background-color: transparent;\n        font-size: 10px;\n        text-transform: uppercase;\n        color: rgba(255, 255, 255, 0.5);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        padding: 0 5px;\n\n        &.XGUI-Tab-Active {\n          font-weight: 700;\n          color: white;\n          background-color: #101122;\n        }\n      }\n    }\n\n    & .XGUI-Fields-List {\n      padding: 0 15px;\n      gap: 10px;\n      overflow-y: scroll;\n      overflow-x: hidden;\n      transition: all linear 0.3s;\n      height: 100%;\n\n      /* & .MuiAccordionDetails-root > div:hover {\n        background-color: rgba(255, 255, 255, 0.1);\n      } */\n\n      /* &:not(.hasPage) { */\n      /* min-height: 200px;\n      max-height: 380px; */\n      /* } */\n\n      /* &.hasPage {\n        max-height: calc(100vh - 400px);\n        /* height: calc(100vh - 400px); */\n      /* top: 0; */\n      /* right: 0; */\n      /* } */\n\n      & .XGUI-Field {\n        position: relative;\n        flex-direction: row;\n        align-items: center;\n        font-size: 14px;\n        line-height: 1em;\n\n        &:not(:last-of-type) {\n          border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n          padding-bottom: 15px;\n        }\n\n        & .XGUI-Field-Label {\n          color: white;\n          text-transform: uppercase;\n          letter-spacing: 1px;\n          font-size: 9px;\n          font-weight: 600;\n          width: 30%;\n          text-align: left;\n          margin-right: 10px;\n          line-height: 1.5em;\n        }\n\n        & .XGUI-Field-Control {\n          flex: 1;\n          flex-direction: row;\n          border-radius: 0px;\n\n          &:has(.Addon-Right:focus),\n          &:has(.With-Addon-Right:focus) {\n            outline: 2px solid rgba(255, 255, 255, 0.5);\n          }\n        }\n\n        & .XGUI-Field-Input,\n        & .XGUI-Field-Select {\n          box-sizing: border-box;\n          border: 0;\n          background-color: #3a394b;\n          color: white;\n          border-radius: 0px;\n          padding: 5px 8px;\n          height: 32px;\n\n          &:focus {\n            outline: 2px solid rgba(255, 255, 255, 0.5);\n          }\n        }\n\n        & .XGUI-Field-Select {\n          border-right: 8px solid #3a394b;\n        }\n\n        & .With-Addon-Right {\n          border-top-right-radius: 0;\n          border-bottom-right-radius: 0;\n          &:focus {\n            outline: none;\n          }\n        }\n\n        & .Addon-Right {\n          border-top-left-radius: 0;\n          border-bottom-left-radius: 0;\n          padding-left: 0;\n\n          &:focus {\n            outline: none;\n          }\n        }\n\n        & .XGUI-Field-ColorPicker-Btn {\n          width: 32px;\n          height: 32px;\n          box-sizing: border-box;\n          border: 2px solid rgba(255, 255, 255, 0.5);\n          border-radius: 0px;\n          margin-left: 5px;\n        }\n\n        & .XGUI-Field-ColorPicker-Modal {\n          position: absolute;\n          width: 220px;\n          top: 37px;\n          right: 0;\n          background-color: #fff;\n          padding: 10px;\n          border-radius: 10px;\n          box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.25);\n          z-index: 101;\n        }\n      }\n    }\n  }\n\n  &[data-popper-placement=\"top\"] {\n    flex-direction: column-reverse;\n\n    & .XGUI-Header {\n      margin-top: 10px;\n      margin-bottom: 0;\n    }\n  }\n`;\n\nexport default XGUIContainer;\n","import * as React from \"react\";\n\nimport { Fab, Stack, Tooltip } from \"@mui/material\";\nimport {\n  AddRounded,\n  ContentCopyOutlined,\n  LayersOutlined,\n} from \"@mui/icons-material\";\nimport { TUseXElement } from \"../../../hooks/useXElement\";\nimport {\n  COMPONENT_CHILDREN,\n  UN_DELETABLE_COMPONENT,\n} from \"../../../utils/constants/gui/componentChildren\";\nimport {\n  MAIN_COLOR,\n  GREEN_COLOR,\n  YELLOW_COLOR,\n} from \"../../../utils/constants/common/utils\";\nimport { isCommon } from \"../../../hooks/useXCommon\";\nimport { useCloneElement } from \"../../../hooks/useCloneElement\";\nimport { X_PAGE_SETTINGS } from \"./XGUIHeader\";\nimport { XGUIActionDeleteButton } from \"./XGUIActionDeleteButton\";\n\nconst AddElementDialog = React.lazy(() => import(\"../../AddElementDialog\"));\n\ntype TDefaultXGUIAction = {\n  color: string;\n  title: string;\n  icon: React.ReactElement;\n  visible?: boolean;\n  func?: (args?: any) => Promise<any> | any;\n};\n\ntype TOverrideXGUIAction = {\n  visible?: boolean;\n  overrideComponent: React.ReactElement;\n};\n\ntype TXGUIAction = TDefaultXGUIAction | TOverrideXGUIAction;\n\nexport const XGUIActions: React.FC<{\n  selectedElement?: TUseXElement<any>;\n  setSelectedIndex: (id: null | string) => void;\n}> = ({ selectedElement = X_PAGE_SETTINGS, setSelectedIndex }) => {\n  const cloneElement = useCloneElement();\n\n  const [status, setStatus] = React.useState<{ open: boolean; self: boolean }>({\n    open: false,\n    self: false,\n  });\n\n  const close = (open: boolean) => setStatus({ open, self: false });\n\n  const XGUI_ACTIONS: TXGUIAction[] = [\n    {\n      color: GREEN_COLOR,\n      icon: <AddRounded sx={{ color: \"white\" }} />,\n      title: \"Ajouter un Enfant\",\n      visible:\n        selectedElement.name !== \"XPage\" &&\n        selectedElement.hasChildren &&\n        !!COMPONENT_CHILDREN[selectedElement.name],\n      func: () => setStatus({ open: true, self: false }),\n    },\n    {\n      color: MAIN_COLOR,\n      icon: <ContentCopyOutlined sx={{ color: \"white\" }} />,\n      title: \"Dupliquer cet Element\",\n      visible:\n        selectedElement.name !== \"XPage\" &&\n        !isCommon(selectedElement.index, true),\n      func: cloneElement,\n    },\n    {\n      color: YELLOW_COLOR,\n      icon: <LayersOutlined sx={{ color: \"white\" }} />,\n      title: \"Changer de Template\",\n      visible: selectedElement.name !== \"XPage\",\n      func: () => setStatus({ open: true, self: true }),\n    },\n    {\n      overrideComponent: (\n        <XGUIActionDeleteButton\n          selectedElement={selectedElement}\n          setSelectedIndex={setSelectedIndex}\n        />\n      ),\n      visible:\n        selectedElement.name !== \"XPage\" &&\n        !UN_DELETABLE_COMPONENT.includes(selectedElement.name),\n    },\n  ];\n\n  return (\n    <Stack\n      direction=\"row\"\n      position=\"relative\"\n      top={40}\n      left={-2}\n\n      // className=\"XGUI-Actions\"\n      // position=\"absolute\"\n      // right={-55}\n      // top={0}\n      // spacing=\"10px\"\n    >\n      {XGUI_ACTIONS.filter((action) => action.visible !== false).map(\n        (action, i) => {\n          const _overrideAction = action as TOverrideXGUIAction;\n\n          if (_overrideAction.overrideComponent) {\n            return (\n              <React.Fragment key={i.toString()}>\n                {_overrideAction.overrideComponent}\n              </React.Fragment>\n            );\n          }\n\n          const _defaultAction = action as TDefaultXGUIAction;\n\n          return (\n            <Tooltip\n              key={_defaultAction.title}\n              title={_defaultAction.title}\n              placement=\"bottom\"\n            >\n              <Fab\n                color=\"secondary\"\n                size=\"small\"\n                sx={{\n                  pointerEvents: \"all\",\n                  borderRadius: 0,\n                  boxShadow: \"none\", // \"0 5px 10px -5px rgba(0, 0, 0, 0.25)\",\n                  // bgcolor: _defaultAction.color,\n\n                  // \"&:hover\": {\n                  //   bgcolor: () => darken(_defaultAction.color, 0.2),\n                  // },\n                }}\n                onClick={_defaultAction.func}\n              >\n                {_defaultAction.icon}\n              </Fab>\n            </Tooltip>\n          );\n        }\n      )}\n\n      {status.open && (\n        <React.Suspense>\n          <AddElementDialog setOpen={close} isSelf={status.self} />\n        </React.Suspense>\n      )}\n    </Stack>\n  );\n};\n","import { nanoid } from \"nanoid\";\nimport { useRecoilCallback, useRecoilValue } from \"recoil\";\nimport { TContainerMode } from \"../utils/types/containers/XContainers.types\";\nimport { useSaveData } from \"./useSaveData\";\nimport { USE_SELECTED_INDEX } from \"./useSelectedElement\";\nimport {\n  isCommon,\n  useXCommonChildrenUpdater,\n  USE_X_COMMON_CHILDREN_SELECTOR,\n} from \"./useXCommon\";\nimport { TUseXElement, USE_X_ELEMENT_SELECTOR } from \"./useXElement\";\nimport { useXPageUpdater } from \"./useXPage\";\n\nexport const useCloneElement = () => {\n  const selectedIndex = useRecoilValue(USE_SELECTED_INDEX);\n  const setXPage = useXPageUpdater();\n  const setCommon = useXCommonChildrenUpdater(selectedIndex as any);\n  const saveData = useSaveData();\n\n  return useRecoilCallback(\n    ({ snapshot }) =>\n      async () => {\n        try {\n          /**\n           * SAVE THE CURRENT STRUCTURE FOR SAFETY\n           */\n          await saveData();\n\n          /**\n           * GET THE SELECTED ELEMENT\n           * THAT IS THE ELEMENT TO CLONE\n           */\n\n          const index = await snapshot.getPromise(USE_SELECTED_INDEX);\n\n          /**\n           * IF WE DO NOT FIND ELEMNT INDEX WE ARE ON THE PAGE\n           * IF THE ELEMENT IS COMMON ROOT ELEMENT\n           * IT IS NOT CLONABLE WE STOP\n           */\n\n          if (!index || isCommon(index, true)) return;\n\n          //!  LET'S DO A SIMPLE CLONE FIRST\n          const localId = nanoid(3);\n\n          const template: TContainerMode[] = [];\n\n          const createElement = async (mainId: string) => {\n            const element: TUseXElement<any> = await snapshot.getPromise(\n              USE_X_ELEMENT_SELECTOR(mainId)\n            );\n\n            if (!element || isCommon(element.index, true)) return;\n\n            /**\n             * CREATING THE CLONE\n             */\n            const clone: any = {\n              name: element.name,\n              config: {\n                index: element.index + localId,\n              },\n              props: element.value ?? { all: {} },\n            };\n\n            /**\n             * ASSIGNING EXISTING VALUES\n             */\n            if (element.childOf) {\n              clone.config.childOf =\n                element.childOf + (index === element.index ? \"\" : localId);\n            }\n\n            if (element.hierachy) clone.config.hierachy = element.hierachy;\n\n            if (element.dataFetching) clone.dataFetching = element.dataFetching;\n\n            template.push(clone);\n\n            await Promise.all(\n              element.elementsIndexes.map(async (id) => await createElement(id))\n            );\n          };\n\n          await createElement(index);\n\n          if (isCommon(index) && setCommon) {\n            const old = await snapshot.getPromise(\n              USE_X_COMMON_CHILDREN_SELECTOR(index)\n            );\n            setCommon(() => {\n              return [...(old as any), ...template];\n            });\n          } else {\n            setXPage((old) => [...(old as any), ...template]);\n          }\n        } catch (error) {\n          console.error(error);\n        }\n      },\n    []\n  );\n};\n","import * as React from \"react\";\nimport XDiv from \"../../core/XDiv\";\nimport Icon from \"../../core/MyIcon\";\n\nimport { Stack, Tooltip } from \"@mui/material\";\nimport { SettingsOutlined } from \"@mui/icons-material\";\nimport { TUseXElement } from \"../../../hooks/useXElement\";\nimport { SECONDARY_COLOR } from \"../../../utils/constants/common/utils\";\nimport { XGUIHeaderBreadCrumb } from \"./XGUIHeaderBreadCrumb\";\n\nexport const X_PAGE_SETTINGS: TUseXElement<any> = {\n  childOf: null,\n  hierachy: \"XPage\",\n  name: \"XPage\",\n  index: \"XPage\",\n  value: {},\n  hasChildren: false,\n  elementsIndexes: [],\n};\n\nexport const XGUIHeader: React.FC<{\n  selectedElement?: TUseXElement<any>;\n  setSelectedIndex: (id: null | string) => void;\n}> = ({ selectedElement = X_PAGE_SETTINGS, setSelectedIndex }) => {\n  return (\n    <XDiv className=\"XGUI-Header\">\n      <Stack direction=\"row\" alignItems=\"stretch\" height=\"100%\">\n        <Tooltip\n          title={selectedElement.name === \"XPage\" ? \"Parametre\" : \"Fermer\"}\n        >\n          <button\n            className=\"XGUI-Drag-Handler\"\n            style={{\n              background:\n                selectedElement.name === \"XPage\" ? \"black\" : SECONDARY_COLOR,\n            }}\n            onClick={() => {\n              const other = document.querySelector(\"[data-x-selected='true']\");\n\n              if (other) other.removeAttribute(\"data-x-selected\");\n\n              setSelectedIndex(null);\n            }}\n          >\n            {selectedElement.name === \"XPage\" ? (\n              <SettingsOutlined sx={{ color: \"white\", fontSize: 20 }} />\n            ) : (\n              <Icon name={\"close\"} color=\"white\" />\n            )}\n          </button>\n        </Tooltip>\n        {selectedElement.childOf && (\n          <Tooltip title={\"Parent\"}>\n            <button\n              className=\"XGUI-Drag-Handler\"\n              onClick={() => {\n                const other = document.querySelector(\n                  \"[data-x-selected='true']\"\n                );\n\n                if (other) other.removeAttribute(\"data-x-selected\");\n\n                setSelectedIndex(selectedElement.childOf);\n              }}\n            >\n              <Icon name={\"move_up\"} color=\"white\" />\n            </button>\n          </Tooltip>\n        )}\n      </Stack>\n      <XGUIHeaderBreadCrumb selectedElement={selectedElement} />\n    </XDiv>\n  );\n};\n","import * as React from \"react\";\nimport XDiv from \"../../core/XDiv\";\nimport { COMPONENT_READABLE_NAME } from \"../../../utils/constants/common/componentName\";\n\nimport { Breadcrumbs, Typography } from \"@mui/material\";\nimport { TUseXElement } from \"../../../hooks/useXElement\";\n\nexport const XGUIHeaderBreadCrumb: React.FC<{\n  selectedElement: TUseXElement<any>;\n}> = ({ selectedElement }) => {\n  const hierachy = (selectedElement.hierachy ?? \"\").split(\"-\");\n\n  return (\n    <XDiv className=\"XGUI-Header-Breadcrumb\">\n      <Breadcrumbs maxItems={3}>\n        {hierachy.map((item, i) => {\n          return (\n            <Typography\n              variant=\"overline\"\n              color=\"white\"\n              sx={{ fontSize: 10, letterSpacing: \"0.05em\" }}\n              key={i.toString()}\n            >\n              {COMPONENT_READABLE_NAME[item]}\n            </Typography>\n          );\n        })}\n      </Breadcrumbs>\n    </XDiv>\n  );\n};\n","import * as React from \"react\";\nimport { useResetRecoilState } from \"recoil\";\n\nimport { useKey } from \"react-use\";\nimport { Fab, Tooltip } from \"@mui/material\";\nimport { DeleteOutlineOutlined } from \"@mui/icons-material\";\nimport { uniq } from \"lodash\";\nimport {\n  TUseXElement,\n  useXElementUpdater,\n  USE_X_ELEMENT,\n} from \"../../../hooks/useXElement\";\nimport { useXPageUpdater } from \"../../../hooks/useXPage\";\nimport { TComponentType } from \"../../../utils/types/common/components.types\";\nimport {\n  isCommon,\n  USE_X_COMMON,\n  useXCommonChildren,\n  getRef,\n} from \"../../../hooks/useXCommon\";\nimport { useSaveData } from \"../../../hooks/useSaveData\";\nimport { X_PAGE_SETTINGS } from \"./XGUIHeader\";\n\nexport const XGUIActionDeleteButton: React.FC<{\n  selectedElement?: TUseXElement<any>;\n  setSelectedIndex: (id: null) => void;\n}> = ({ selectedElement = X_PAGE_SETTINGS, setSelectedIndex }) => {\n  const saveData = useSaveData();\n\n  // TO REMOVE THE ELEMENT FROM THE TREE\n  const setPage = useXPageUpdater();\n\n  // TO REMOVE THE ELEMENT FROM HIS PARENT\n  const setParent = useXElementUpdater(selectedElement.childOf ?? \"\");\n\n  const resetXCommonElement = useResetRecoilState(\n    USE_X_COMMON(selectedElement.index)\n  );\n\n  const { xChildren, setXChildren } = useXCommonChildren(\n    selectedElement.index as any\n  );\n\n  // DELETE THE ATOM\n  const resetXpageElement = useResetRecoilState(\n    USE_X_ELEMENT(selectedElement.index)\n  );\n\n  const deleteElement = async (showDialog = true) => {\n    if (showDialog && !confirm(\"Voulez-vous vraiment supprimer cet element?\")) {\n      return;\n    } else {\n      /**\n       * save the current pages data for safety\n       */\n      const savedData = await saveData();\n\n      if (isCommon(selectedElement.index)) {\n        const parentID = getRef(selectedElement.index);\n\n        if (!parentID || !savedData || !savedData[\"commons\"]) return;\n\n        const old: TComponentType[] = (savedData[\"commons\"] ?? []).filter(\n          (e: TComponentType) =>\n            e.config ? e.config.index.startsWith(parentID) : false\n        );\n\n        console.log(\"ELEMENT =>\", selectedElement, \"CHILDREN =>\", xChildren);\n\n        setXChildren(() => {\n          const element = old.find((el) =>\n            el.config ? el.config.index === selectedElement.index : false\n          );\n\n          if (!element) return old;\n\n          let elementToRemoveIndexes: string[] = [];\n\n          if (element.config) {\n            elementToRemoveIndexes.push(element.config.index);\n          }\n\n          const getElementToRemove = (index: string) =>\n            old.forEach((e) => {\n              if (e.config) {\n                if (\n                  e.config.childOf === index &&\n                  !elementToRemoveIndexes.includes(e.config.index)\n                ) {\n                  elementToRemoveIndexes.push(e.config.index);\n                }\n              }\n            });\n\n          old.forEach((e) => {\n            if (\n              e.config &&\n              elementToRemoveIndexes.includes(e.config.childOf ?? \"\")\n            ) {\n              elementToRemoveIndexes.push(e.config.index);\n              getElementToRemove(e.config.index);\n            }\n          });\n\n          elementToRemoveIndexes = uniq(elementToRemoveIndexes);\n\n          return old.filter((child) => {\n            if (!child.config) return true;\n\n            if (elementToRemoveIndexes.includes(child.config.index)) {\n              return false;\n            }\n\n            return true;\n          });\n        });\n\n        resetXCommonElement();\n      } else {\n        // DELETE ELEMENT\n        setPage((page) => {\n          // TODO : SAME AS COMMON FOR THIS\n\n          return (page as TComponentType[]).filter((section) => {\n            if (!section.config) return true;\n\n            let keep = section.config.index !== selectedElement.index;\n\n            if (keep && selectedElement.hasChildren) {\n              keep = !selectedElement.elementsIndexes.includes(\n                section.config.index\n              );\n            }\n\n            return keep;\n          });\n        });\n\n        // REMOVE FROM PARENT\n        if (selectedElement.childOf) {\n          setParent((old) => {\n            // TODO : SAME AS COMMON FOR THIS\n\n            return {\n              ...old,\n              elementsIndexes: old.elementsIndexes.filter(\n                (index) => index !== selectedElement.index\n              ),\n            };\n          });\n        }\n\n        // DELETE\n        resetXpageElement();\n      }\n\n      // DISABLE THE POPUP\n      setSelectedIndex(null);\n    }\n  };\n\n  useKey(\"Backspace\", (e) => {\n    if (e.shiftKey) deleteElement();\n  });\n\n  return (\n    <Tooltip\n      key={\"delete-btn\"}\n      title={\"Supprimer Cet Element\"}\n      placement=\"bottom\"\n    >\n      <Fab\n        size=\"small\"\n        color=\"secondary\"\n        sx={{\n          pointerEvents: \"all\",\n          borderRadius: 0,\n          boxShadow: \"0 5px 10px -5px rgba(0, 0, 0, 0.25)\",\n          // bgcolor: SECONDARY_COLOR,\n\n          // \"&:hover\": {\n          //   bgcolor: () => darken(SECONDARY_COLOR, 0.2),\n          // },\n        }}\n        onClick={async () => await deleteElement()}\n      >\n        <DeleteOutlineOutlined sx={{ color: \"white\" }} />\n      </Fab>\n    </Tooltip>\n  );\n};\n","import * as React from \"react\";\nimport XDiv from \"../../core/XDiv\";\n\nimport { Button } from \"../../core/Button\";\nimport { CircularProgress, Stack } from \"@mui/material\";\nimport { TUseXElement } from \"../../../hooks/useXElement\";\nimport { COMPONENT_WITH_API_FETCH } from \"../../../utils/constants/gui/componentChildren\";\n\nconst XGUIDesignTab = React.lazy(() => import(\"../tabs/design\"));\n\nconst XGUIDataTab = React.lazy(() => import(\"../tabs/data\"));\n\nconst XGUIOrderElementsTab = React.lazy(() => import(\"../tabs/order\"));\n\ntype TXGUITab =\n  | \"Apparence\"\n  | \"Données\"\n  | \"Ajouter un Element\"\n  | \"Ordonner les Elements\";\n\nexport const XGUIFieldContainer: React.FC<{\n  selectedElement: TUseXElement<any>;\n  setSelectedElement: any;\n}> = ({ selectedElement, setSelectedElement }) => {\n  const [tab, setTab] = React.useState<TXGUITab>(\"Apparence\");\n\n  const tabs: TXGUITab[] = [\"Apparence\"];\n\n  if (COMPONENT_WITH_API_FETCH.includes(selectedElement.name)) {\n    tabs.push(\"Données\");\n  }\n\n  if (selectedElement.hasChildren || selectedElement.name === \"XPage\") {\n    tabs.push(\"Ordonner les Elements\");\n  }\n\n  React.useEffect(() => {\n    if (!selectedElement.hasChildren && tab === \"Ordonner les Elements\") {\n      setTab(\"Apparence\");\n    }\n\n    if (\n      !COMPONENT_WITH_API_FETCH.includes(selectedElement.name) &&\n      tab === \"Données\"\n    ) {\n      setTab(\"Apparence\");\n    }\n  }, [selectedElement.index]);\n\n  return (\n    <XDiv className=\"XGUI-Fields-Container\">\n      <XDiv className=\"XGUI-Fields-Tabs\">\n        {tabs.map((btn) => (\n          <Button\n            title={btn}\n            key={btn}\n            className={`XGUI-Fields-Tab${\n              btn === tab ? \" XGUI-Tab-Active\" : \"\"\n            }`}\n            onClick={() => setTab(btn)}\n          >\n            {btn}\n          </Button>\n        ))}\n      </XDiv>\n      <XDiv\n        className={`XGUI-Fields-List ${\n          selectedElement.name === \"XPage\" ? \"hasPage\" : \"\"\n        }`}\n      >\n        {tab === \"Apparence\" && (\n          <React.Suspense\n            fallback={\n              <Stack\n                height={380}\n                width={370}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n              >\n                <CircularProgress color=\"secondary\" />\n              </Stack>\n            }\n          >\n            <XGUIDesignTab\n              selectedElement={selectedElement}\n              setSelectedElement={setSelectedElement}\n            />\n          </React.Suspense>\n        )}\n\n        {tab === \"Données\" && (\n          <React.Suspense>\n            <XGUIDataTab\n              selectedElement={selectedElement}\n              setSelectedElement={setSelectedElement}\n            />\n          </React.Suspense>\n        )}\n\n        {tab === \"Ordonner les Elements\" && (\n          <React.Suspense>\n            <XGUIOrderElementsTab\n              selectedElement={selectedElement}\n              setSelectedElement={setSelectedElement}\n            />\n          </React.Suspense>\n        )}\n      </XDiv>\n    </XDiv>\n  );\n};\n","import styled from \"@emotion/styled\";\nimport { DEFAULT_FONT_FAMILY } from \"../../utils/constants/common/fonts\";\nimport { MAIN_COLOR } from \"../../utils/constants/common/utils\";\nimport { generateBorder } from \"../../lib/generateBorder\";\nimport { generateRadius } from \"../../lib/generateRadius\";\nimport { generateSide } from \"../../lib/generateSide\";\nimport { IXButtonProps } from \"../../utils/interfaces/Elements/Old_XButton.interfaces\";\n\nexport const Button = styled.button<IXButtonProps>`\n  &[data-x-selected=\"true\"] {\n    outline: 2px solid ${MAIN_COLOR};\n    outline-offset: 2px;\n  }\n\n  font-family: ${(props) => props.fontFamily ?? DEFAULT_FONT_FAMILY};\n\n  color: ${(props) => props.color};\n\n  font-size: ${(props) => props.fontSize};\n\n  text-decoration: ${(props) => props.textDecoration};\n\n  font-style: ${(props) => props.fontStyle};\n\n  line-height: ${(props) => props.lineHeight};\n\n  font-family: ${(props) => props.lineHeight};\n\n  font-weight: ${(props) => props.fontWeight};\n\n  text-align: ${(props) => props.textAlign};\n\n  /* initial spacing */\n  background-color: ${(props) => props.bgColor};\n\n  border: ${(props) => generateBorder(props.border)};\n\n  border-radius: ${(props) => generateRadius(props.borderRadius)};\n\n  width: ${(props) => props.width};\n\n  height: ${(props) => props.height};\n\n  margin: ${(props) => generateSide(\"margin\", props.margin) ?? 0};\n\n  padding: ${(props) => generateSide(\"padding\", props.padding) ?? 0};\n\n  box-sizing: border-box;\n`;\n"]}