{"version":3,"sources":["../src/components/gui/components/XGUIColorField.tsx"],"names":["React","HexAlphaColorPicker","HexColorInput","Divider","Fab","Stack","TextField","Typography","compareProps","prevProps","nextProps","XGUIColorField","field","currentValue","onChange","bp","useBreakpoint","open","setOpen","id","color","old","newColor","HexInput","XGUIColorField_default","props","ref"],"mappings":"sEAAA,UAAYA,MAAW,QAKvB,OAAS,uBAAAC,EAAqB,iBAAAC,MAAqB,iBAEnD,OAAS,WAAAC,EAAS,OAAAC,EAAK,SAAAC,EAAO,aAAAC,EAAW,cAAAC,MAAkB,gBAG3D,IAAMC,EAAe,CAACC,EAAgBC,IAC7BD,EAAU,eAAiBC,EAAU,aAOxCC,EAAsD,OAC1D,CAAC,CAAE,MAAAC,EAAO,aAAAC,EAAc,SAAAC,CAAS,IAAM,CACrC,IAAMC,EAAKC,EAAc,EACnB,CAACC,EAAMC,CAAO,EAAU,WAAkB,EAAK,EAE/CC,EAAK,cAAcP,EAAM,OAEzBQ,EAAQP,GAAgBD,EAAM,aAEpC,OACE,gBAAO,WAAN,KACEK,GACC,gBAACZ,EAAA,CACC,SAAS,WACT,IAAK,EACL,KAAM,EACN,MAAM,OACN,OAAO,OACP,OAAQ,KACR,QAAS,IAAMa,EAAQ,EAAK,EAC9B,EAEF,gBAACb,EAAA,CACC,UAAU,kBACV,UAAU,MACV,eAAe,gBACf,WAAW,SACX,GAAI,EACJ,SAAS,YAET,gBAACE,EAAA,CAAW,UAAU,QAAQ,QAASY,EAAI,MAAM,OAC9CP,EAAM,KACT,EACA,gBAACP,EAAA,CAAM,MAAM,OAAO,UAAU,MAAM,QAAS,EAAG,GAAI,GAClD,gBAACA,EAAA,CACC,GAAI,CACF,gBAAiB,iCACjB,mBAAoB,SACpB,eAAgB,QAChB,aAAc,MACd,SAAU,UACZ,GAEA,gBAACD,EAAA,CACC,mBAAkB,2BAA2BQ,EAAM,OACnD,QAAS,IAAMM,EAASG,GAAQ,CAACA,CAAG,EACpC,GAAI,uBAAuBT,EAAM,OACjC,KAAK,QACL,MAAM,UACN,GAAI,CACF,MAAO,GACP,OAAQ,GACR,SAAU,UACZ,EACA,MAAO,CAAE,gBAAiBQ,CAAM,EAClC,EACCH,GACC,gBAACZ,EAAA,CACC,GAAI,CACF,QAAS,QACT,EAAG,EACH,aAAc,EACd,SAAU,WACV,IAAK,GACL,KAAM,EACN,OAAQ,IACV,GAEA,gBAACJ,EAAA,CACC,MAAOmB,EACP,SAAWE,GAAa,CACtB,QAAQ,IAAI,WAAYA,CAAQ,EAChCR,EAASQ,EAAUV,EAAM,KAAMG,CAAE,CACnC,EACF,CACF,CAEJ,EAEA,gBAACT,EAAA,CACC,GAAIa,EACJ,GAAI,CAAE,KAAM,CAAE,EACd,YAAW,GACX,KAAK,QACL,YAAaP,EAAM,YACnB,MAAOQ,EACP,WAAY,CACV,eAAgBG,EAChB,WAAY,CACV,YAAa,UACb,MAAOH,EACP,SAAWE,GAAkB,CAC3BR,EAASQ,EAAUV,EAAM,KAAMG,CAAE,CACnC,EACA,MAAO,GACP,SAAU,EACZ,CACF,EACF,CACF,CACF,EACA,gBAACZ,EAAA,CAAQ,GAAI,CAAE,YAAa,wBAAyB,GAAI,CAAE,EAAG,CAChE,CAEJ,EACAK,CACF,EAEOgB,EAAQb,EAETY,EAAiB,aAAW,CAACE,EAAOC,KAClC,sBAAoBA,EAAK,KAAO,CACpC,MAAO,IAAM,CAAC,CAChB,EAAE,EAEK,gBAACxB,EAAA,CAAe,GAAGuB,EAAO,EAClC","sourcesContent":["import * as React from \"react\";\nimport {\n  IXGUIFieldBase,\n  TOnChange,\n} from \"../../../utils/interfaces/gui/fields.interfaces\";\nimport { HexAlphaColorPicker, HexColorInput } from \"react-colorful\";\n\nimport { Divider, Fab, Stack, TextField, Typography } from \"@mui/material\";\nimport { useBreakpoint } from \"../../../hooks/useBreakpoint\";\n\nconst compareProps = (prevProps: any, nextProps: any) => {\n  return prevProps.currentValue === nextProps.currentValue;\n};\ninterface XGUIColorFieldProps extends IXGUIFieldBase {\n  onChange: TOnChange<string>;\n  currentValue: string;\n}\n\nconst XGUIColorField: React.FC<XGUIColorFieldProps> = React.memo(\n  ({ field, currentValue, onChange }) => {\n    const bp = useBreakpoint();\n    const [open, setOpen] = React.useState<boolean>(false);\n\n    const id = `XGUI-FIELD-${field.name}`;\n\n    const color = currentValue ?? field.defaultValue;\n\n    return (\n      <React.Fragment>\n        {open && (\n          <Stack\n            position=\"absolute\"\n            top={0}\n            left={0}\n            width=\"100%\"\n            height=\"100%\"\n            zIndex={1050}\n            onClick={() => setOpen(false)}\n          />\n        )}\n        <Stack\n          className=\"XGUIColorPicker\"\n          direction=\"row\"\n          justifyContent=\"space-between\"\n          alignItems=\"center\"\n          mb={1}\n          position=\"relative\"\n        >\n          <Typography component=\"label\" htmlFor={id} width=\"40%\">\n            {field.label}\n          </Typography>\n          <Stack width=\"100%\" direction=\"row\" spacing={1} ml={1}>\n            <Stack\n              sx={{\n                backgroundImage: 'url(\"/images/transparent.png\")',\n                backgroundPosition: \"center\",\n                backgroundSize: \"cover\",\n                borderRadius: \"50%\",\n                position: \"relative\",\n              }}\n            >\n              <Fab\n                aria-describedby={`XGUIColorPicker-Popover-${field.name}`}\n                onClick={() => setOpen((old) => !old)}\n                id={`XGUIColorPicker-Btn-${field.name}`}\n                size=\"small\"\n                color=\"inherit\"\n                sx={{\n                  width: 30,\n                  height: 30,\n                  position: \"relative\",\n                }}\n                style={{ backgroundColor: color }}\n              />\n              {open && (\n                <Stack\n                  sx={{\n                    bgcolor: \"white\",\n                    p: 1,\n                    borderRadius: 2,\n                    position: \"absolute\",\n                    top: 40,\n                    left: 0,\n                    zIndex: 1051,\n                  }}\n                >\n                  <HexAlphaColorPicker\n                    color={color}\n                    onChange={(newColor) => {\n                      console.log(\"COLOR =>\", newColor);\n                      onChange(newColor, field.name, bp);\n                    }}\n                  />\n                </Stack>\n              )}\n            </Stack>\n\n            <TextField\n              id={id}\n              sx={{ flex: 1 }}\n              hiddenLabel\n              size=\"small\"\n              placeholder={field.placeholder}\n              value={color}\n              InputProps={{\n                inputComponent: HexInput,\n                inputProps: {\n                  placeholder: \"#FFFFFF\",\n                  color: color,\n                  onChange: (newColor: any) => {\n                    onChange(newColor, field.name, bp);\n                  },\n                  alpha: true,\n                  prefixed: true,\n                },\n              }}\n            />\n          </Stack>\n        </Stack>\n        <Divider sx={{ borderColor: \"rgba(255,255,255,0.1)\", mb: 1 }} />\n      </React.Fragment>\n    );\n  },\n  compareProps\n);\n\nexport default XGUIColorField;\n\nconst HexInput = React.forwardRef((props, ref) => {\n  React.useImperativeHandle(ref, () => ({\n    focus: () => {},\n  }));\n\n  return <HexColorInput {...props} />;\n});\n"]}