{"version":3,"file":"form-checkboxes.js?v=9.1.8","mappings":";kLASe,SAASA,GAAe,MAAEC,UACvC,IAAKA,EACH,OAAO,KAGT,MAAM,aAAEC,GAAiBD,EAEzB,IAAKC,GAAgBA,GAAgBA,EAAaC,OAAS,EACzD,OAAO,KAGT,MAAOC,EAAQC,GAAa,WAAsC,QAAb,EAAAJ,aAAK,EAALA,EAAOG,cAAM,QAAI,IAChEE,EAAc,SAAsC,MAEpDC,EAAoBL,EAAaC,OAAS,EAC5C,wCACA,0BAEJ,aAAgB,KACVG,EAAYE,UACVJ,EAAOD,OACTG,EAAYE,QAAQC,kBAAkB,IAEtCH,EAAYE,QAAQC,kBAAkBF,MAGzC,CAACH,IAEJ,MAYMM,EAAgBC,IAChBP,EAAOQ,SAASD,GAClBN,EAAUD,EAAOS,QAAOC,GAAiBA,IAAkBH,KAI7DN,EAAU,IAAID,EAAQO,GAAO,EAG/B,OACE,iCACE,6BAAGI,UAAU,mBAAiB,WAC3Bd,EAAMe,MACNf,EAAMgB,WACL,+BAAMF,UAAU,4BAA0B,qBAE7Cb,EAAagB,KAAI,CAACC,EAAMC,KACvB,SAACC,EAAQ,CAEPV,MAAOQ,EAAKG,KACZC,MAAOb,EACPc,QAASpB,EAAOQ,SAASO,EAAKG,OAHzB,SAASF,EAAQ,OAIzBnB,EAAMwB,cACL,4BAAGV,UAAU,cAAY,WACvB,0BACGd,EAAMwB,kBAGb,4BAAGV,UAAU,aAAaW,QAAM,gEAChC,kBACEC,IAAKrB,EACLW,SAAUhB,EAAMgB,SAChBW,UAAW3B,EAAMgB,UAA8B,IAAlBb,EAAOD,OACpCmB,KAAMrB,EAAM4B,WACZC,KAAK,OACLf,UAAU,sBACVJ,MA/CwB,IAAxBT,EAAaC,QAAgBC,GAAUA,EAAOD,OACzC,UAGLD,EAAaC,OAAS,GAAKC,GAAUA,EAAOD,OACvCC,EAAO2B,KAAK,MAGd,GAwCHC,SAAU,IAAM,SAGxB,CAQA,SAASX,GAAS,MAAEV,EAAK,QAAEa,EAAO,MAAED,IAClC,OACE,iCAAOU,QAAS,IAAMV,EAAMZ,IAAM,YAChC,8BAAKI,WAAW,IAAAA,WAAU,qBAAsB,CAAES,aAAU,WAC1D,SAAC,IAAM,CAACU,QAAQ,4BAElB,0BACGvB,OAIT","sources":["webpack://empori-base/./src/controls/Forms/FormSelectorCheckboxes.tsx"],"sourcesContent":["import { className } from '@empori/util';\r\nimport * as React from 'react';\r\nimport { InputItem } from '../../empracoTypes';\r\nimport { FaIcon } from '../../generic/icon';\r\n\r\ninterface FormCheckboxesProps {\r\n  input: InputItem;\r\n}\r\n\r\nexport default function FormCheckboxes({ input }: FormCheckboxesProps) {\r\n  if (!input) {\r\n    return null;\r\n  }\r\n\r\n  const { alternatives } = input;\r\n\r\n  if (!alternatives || alternatives && alternatives.length < 1) {\r\n    return null;\r\n  }\r\n\r\n  const [values, setValues] = React.useState<string[]>(input?.values ?? []);\r\n  const hiddenInput = React.useRef<HTMLInputElement | null>(null);\r\n\r\n  const validationMessage = alternatives.length > 1\r\n    ? 'At least one alternative is required.'\r\n    : 'This check is required.';\r\n\r\n  React.useEffect(() => {\r\n    if (hiddenInput.current) {\r\n      if (values.length) {\r\n        hiddenInput.current.setCustomValidity('');\r\n      } else {\r\n        hiddenInput.current.setCustomValidity(validationMessage);\r\n      }\r\n    }\r\n  }, [values]);\r\n\r\n  const valuesToSend = () => {\r\n    if (alternatives.length === 1 && values && values.length) {\r\n      return 'Checked';\r\n    }\r\n\r\n    if (alternatives.length > 1 && values && values.length) {\r\n      return values.join(', ');\r\n    }\r\n\r\n    return '';\r\n  };\r\n\r\n  const handleValues = (value: string) => {\r\n    if (values.includes(value)) {\r\n      setValues(values.filter(existingValue => existingValue !== value));\r\n      return;\r\n    }\r\n\r\n    setValues([...values, value]);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <p className='form-label-text'>\r\n        {input.label}\r\n        {input.required &&\r\n          <span className='input-required-indicator'>*</span>}\r\n      </p>\r\n      {alternatives.map((item, index) =>\r\n        <Checkbox\r\n          key={`value-${index + 1}`}\r\n          value={item.name}\r\n          click={handleValues}\r\n          checked={values.includes(item.name)} />)}\r\n      {input.description &&\r\n        <p className='input-desc'>\r\n          <span>\r\n            {input.description}\r\n          </span>\r\n        </p>}\r\n      <p className='error-desc' hidden>Please select atleast one of the checkboxes.</p>\r\n      <input\r\n        ref={hiddenInput}\r\n        required={input.required}\r\n        disabled={!input.required && values.length === 0}\r\n        name={input.uniqueName}\r\n        type='text'\r\n        className='empori-hidden-input'\r\n        value={valuesToSend()}\r\n        onChange={() => null} />\r\n    </>\r\n  );\r\n}\r\n\r\ninterface CheckboxProps {\r\n  value: string;\r\n  checked: boolean;\r\n  click: (value: string) => void;\r\n}\r\n\r\nfunction Checkbox({ value, checked, click }: CheckboxProps) {\r\n  return (\r\n    <label onClick={() => click(value)}>\r\n      <div className={className('checkbox-checkmark', { checked })}>\r\n        <FaIcon clsName='fa-regular fa-check' />\r\n      </div>\r\n      <span>\r\n        {value}\r\n      </span>\r\n    </label>\r\n  );\r\n}"],"names":["FormCheckboxes","input","alternatives","length","values","setValues","hiddenInput","validationMessage","current","setCustomValidity","handleValues","value","includes","filter","existingValue","className","label","required","map","item","index","Checkbox","name","click","checked","description","hidden","ref","disabled","uniqueName","type","join","onChange","onClick","clsName"],"sourceRoot":""}