{"version":3,"file":"SapFlexibleTemplate.mjs","names":["React","useState","makeStyles","FluentIconButton","ChevronRightIcon","ChevronLeftIcon","SapFlexibleTemplate","left","center","right","columns","setColumns","columnLeft","columnCenter","columnRight","columnPercent","setColumnPercent","useStyles","theme","root","display","flexDirection","flex","height","fillContent","classes","handleToggleColumn","columnType","toggle"],"sources":["../../../src/UI/templates/SapFlexibleTemplate.jsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { makeStyles } from '@material-ui/core'\nimport { FluentIconButton } from '../inputs/buttons/FluentIconButton'\nimport { ChevronRightIcon, ChevronLeftIcon } from '@fluentui/react-icons'\n\nexport const SapFlexibleTemplate = ({ left, center, right }) => {\n  const [columns, setColumns] = useState({\n    columnLeft: true,\n    columnCenter: true,\n    columnRight: true\n  })\n\n  const [columnPercent, setColumnPercent] = useState({\n    columnLeft: '25%',\n    columnCenter: '50%',\n    columnRight: '25%'\n  })\n\n  const useStyles = makeStyles((theme) => ({\n    root: {\n      display: 'flex',\n      flexDirection: 'row'\n    },\n    columnLeft: {\n      display: 'flex',\n      flex: columnPercent.columnLeft,\n      height: '100vh'\n    },\n    columnCenter: {\n      flex: columnPercent.columnCenter,\n      height: '100vh'\n    },\n    columnRight: {\n      display: 'flex',\n      flex: columnPercent.columnRight,\n      height: '100vh'\n    },\n    fillContent: {\n      flex: 1\n    }\n  }))\n\n  const classes = useStyles()\n\n  const handleToggleColumn = (columnType) => {\n    setColumns({ ...columns, columnCenter: !columns.columnCenter })\n\n    if (columnType === 'columnLeft') {\n      setColumnPercent({ ...columnPercent, columnLeft: '75%' })\n\n      if (columnPercent.columnLeft === '75%') {\n        setColumnPercent({ ...columnPercent, columnLeft: '25%' })\n      }\n    } else {\n      setColumnPercent({ ...columnPercent, columnRight: '75%' })\n\n      if (columnPercent.columnRight === '75%') {\n        setColumnPercent({ ...columnPercent, columnRight: '25%' })\n      }\n    }\n  }\n\n  return (\n    <div className={classes.root}>\n      {columns.columnLeft && (\n        <div className={classes.columnLeft}>\n          <div className={classes.fillContent}>{left} </div>\n          <div className={classes.toggle}>\n            <FluentIconButton\n              aria-label={\n                columnPercent.columnLeft === '25%'\n                  ? 'Expand column'\n                  : 'Collapse column'\n              }\n              color='primary'\n              icon={\n                columnPercent.columnLeft === '25%'\n                  ? ChevronRightIcon\n                  : ChevronLeftIcon\n              }\n              onClick={() => handleToggleColumn('columnLeft')}\n            />\n          </div>\n        </div>\n      )}\n\n      {columns.columnCenter && (\n        <div className={classes.columnCenter}>\n          <div> {center} </div>\n        </div>\n      )}\n\n      {columns.columnRight && (\n        <div className={classes.columnRight}>\n          <div className={classes.toggle}>\n            <FluentIconButton\n              aria-label={\n                columnPercent.columnRight === '25%'\n                  ? 'Expand column'\n                  : 'Collapse column'\n              }\n              color='primary'\n              icon={\n                columnPercent.columnRight === '25%'\n                  ? ChevronLeftIcon\n                  : ChevronRightIcon\n              }\n              onClick={() => handleToggleColumn('columnRight')}\n            />\n          </div>\n          <div className={classes.fillContent}> {right} </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAKA,MAAaM,uBAAuB,EAAEC,MAAMC,QAAQC,YAAY;CAC9D,MAAM,CAACC,SAASC,cAAcV,SAAS;EACrCW,YAAY;EACZC,cAAc;EACdC,aAAa;EACd,CAAC;CAEF,MAAM,CAACC,eAAeC,oBAAoBf,SAAS;EACjDW,YAAY;EACZC,cAAc;EACdC,aAAa;EACd,CAAC;CA0BF,MAAMW,UAxBYvB,YAAYgB,WAAW;EACvCC,MAAM;GACJC,SAAS;GACTC,eAAe;GAChB;EACDT,YAAY;GACVQ,SAAS;GACTE,MAAMP,cAAcH;GACpBW,QAAQ;GACT;EACDV,cAAc;GACZS,MAAMP,cAAcF;GACpBU,QAAQ;GACT;EACDT,aAAa;GACXM,SAAS;GACTE,MAAMP,cAAcD;GACpBS,QAAQ;GACT;EACDC,aAAa,EACXF,MAAM,GACR;EACD,EAAE,EAEwB;CAE3B,MAAMI,sBAAsBC,eAAe;AACzChB,aAAW;GAAE,GAAGD;GAASG,cAAc,CAACH,QAAQG;GAAc,CAAC;AAE/D,MAAIc,eAAe,cAAc;AAC/BX,oBAAiB;IAAE,GAAGD;IAAeH,YAAY;IAAO,CAAC;AAEzD,OAAIG,cAAcH,eAAe,MAC/BI,kBAAiB;IAAE,GAAGD;IAAeH,YAAY;IAAO,CAAC;SAEtD;AACLI,oBAAiB;IAAE,GAAGD;IAAeD,aAAa;IAAO,CAAC;AAE1D,OAAIC,cAAcD,gBAAgB,MAChCE,kBAAiB;IAAE,GAAGD;IAAeD,aAAa;IAAO,CAAC;;;AAKhE,QACE,sBAAA,cAAC,OAAD,EAAK,WAAWW,QAAQN,MAkDlB,EAjDHT,QAAQE,cACP,sBAAA,cAAC,OAAD,EAAK,WAAWa,QAAQb,YAmBzB,EAlBG,sBAAA,cAAC,OAAD,EAAK,WAAWa,QAAQD,aAAyB,EAAXjB,MAAK,IAAM,EACjD,sBAAA,cAAC,OAAD,EAAK,WAAWkB,QAAQG,QAenB,EAdH,sBAAA,cAAC,kBAAD;EACE,cACEb,cAAcH,eAAe,QACzB,kBACA;EAEN,OAAM;EACN,MACEG,cAAcH,eAAe,QACzBR,mBACAC;EAEN,eAAeqB,mBAAmB,aAAa;EAAC,CAAA,CAE/C,CAER,EAEAhB,QAAQG,gBACP,sBAAA,cAAC,OAAD,EAAK,WAAWY,QAAQZ,cAGzB,EAFG,sBAAA,cAAC,OAAA,MAAI,KAAEL,QAAO,IAAM,CAEvB,EAEAE,QAAQI,eACP,sBAAA,cAAC,OAAD,EAAK,WAAWW,QAAQX,aAmBzB,EAlBG,sBAAA,cAAC,OAAD,EAAK,WAAWW,QAAQG,QAenB,EAdH,sBAAA,cAAC,kBAAD;EACE,cACEb,cAAcD,gBAAgB,QAC1B,kBACA;EAEN,OAAM;EACN,MACEC,cAAcD,gBAAgB,QAC1BT,kBACAD;EAEN,eAAesB,mBAAmB,cAAc;EAAC,CAAA,CAEhD,EACL,sBAAA,cAAC,OAAD,EAAK,WAAWD,QAAQD,aAA2B,EAAd,KAAEf,OAAM,IAAM,CAEtD,CACG"}