{"version":3,"file":"index-DfGPs--y.js","sources":["../../app/javascript/components/components/data_entry/checkbox/index.tsx"],"sourcesContent":["import React, { HTMLProps, ReactElement, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { ReactNode as TypedReactNode } from \"../../../../sharedTypes\";\nimport { ToggleTipProps } from \"../../layout/toggle_tip\";\n\ninterface Props extends HTMLProps<HTMLInputElement> {\n  label?: string;\n  dataTest?: string;\n  toggleTip?: ReactElement<ToggleTipProps>;\n  checked?: boolean;\n}\n\nconst StyledCheckbox = styled.label`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 8px;\n\n  text-transform: none;\n\n  .label {\n    flex: 1;\n    padding-left: 12px;\n  }\n\n  /* hide the browser's default checkbox*/\n  input {\n    opacity: 0;\n    cursor: pointer;\n    height: 0;\n    width: 0;\n  }\n\n  /* Create a custom checkbox */\n  .checkmark {\n    flex: 0 0 20px;\n    height: 20px;\n    width: 20px;\n    box-sizing: content-box;\n    border-radius: ${({ theme }) => theme.deprecatedBorder.radius.normal};\n    border: ${({ theme }) =>\n      `${theme.deprecatedBorder.weight.heavy} solid ${theme.deprecatedColors.gray.eight}`};\n    position: relative;\n    cursor: pointer;\n  }\n\n  /* When the checkbox is checked, add a blue background */\n  input:checked ~ .checkmark {\n    background-color: ${({ theme }) => theme.deprecatedColors.primary.normal};\n    border: ${({ theme }) =>\n      `${theme.deprecatedBorder.weight.heavy} solid ${theme.deprecatedColors.primary.normal}`};\n  }\n\n  /* add a highlight ring to the checkbox when the hidden input is focused */\n  input:focus ~ .checkmark {\n    outline: 2px solid Highlight;\n    outline: 2px auto -webkit-focus-ring-color;\n  }\n\n  /* Create the checkmark/indicator (hidden when not checked) */\n  .checkmark:after {\n    content: \"\";\n    position: absolute;\n    display: none;\n  }\n\n  /* Show the checkmark when checked */\n  input:checked ~ .checkmark:after {\n    display: block;\n  }\n\n  /* Style the checkmark/indicator */\n  .checkmark:after {\n    left: 6px;\n    top: 2px;\n    width: 5px;\n    height: 10px;\n    border: solid ${({ theme }) => theme.deprecatedColors.white};\n    border-width: 0 3px 3px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n  }\n\n  /* Style when disabled */\n  input:disabled ~ .checkmark {\n    opacity: 0.3;\n  }\n`;\n\nexport enum CheckBoxDisplay {\n  normal,\n}\n\nexport function CheckboxGroup({\n  display,\n  children,\n}: {\n  display: CheckBoxDisplay;\n  children: TypedReactNode<Props>;\n}) {\n  return <>{display === CheckBoxDisplay.normal && <>{children}</>}</>;\n}\n\nexport function Checkbox({ label, dataTest, className, toggleTip, checked, ...inputProps }: Props) {\n  const [focused, setFocused] = useState<boolean>(false);\n  const defaultClass = checked ? \"cb-label selected\" : \"cb-label\";\n  const focusedClass = focused ? \"focus\" : \"\";\n  return (\n    <StyledCheckbox\n      className={`${defaultClass} ${className || \"\"} ${focusedClass}`}\n      as={typeof label === \"undefined\" ? \"span\" : \"label\"}\n      onFocus={() => setFocused(true)}\n      onBlur={() => setFocused(false)}\n    >\n      <input type=\"checkbox\" className=\"checkbox\" checked={checked} {...inputProps} />\n      <span data-test={dataTest} className=\"checkmark\" />\n      {label && <span className=\"label\">{label}</span>}\n      {toggleTip}\n    </StyledCheckbox>\n  );\n}\n\nexport default Checkbox;\n"],"names":["StyledCheckbox","styled","theme","CheckBoxDisplay","CheckBoxDisplay2","CheckboxGroup","display","children","jsx","Fragment","Checkbox","label","dataTest","className","toggleTip","checked","inputProps","focused","setFocused","useState","defaultClass","focusedClass","jsxs"],"mappings":"+bAYA,MAAMA,EAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBA2BT,CAAC,CAAE,MAAAC,KAAYA,EAAM,iBAAiB,OAAO,MAAM;AAAA,cAC1D,CAAC,CAAE,MAAAA,CAAM,IACjB,GAAGA,EAAM,iBAAiB,OAAO,KAAK,UAAUA,EAAM,iBAAiB,KAAK,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOjE,CAAC,CAAE,MAAAA,KAAYA,EAAM,iBAAiB,QAAQ,MAAM;AAAA,cAC9D,CAAC,CAAE,MAAAA,CAAM,IACjB,GAAGA,EAAM,iBAAiB,OAAO,KAAK,UAAUA,EAAM,iBAAiB,QAAQ,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBA2BzE,CAAC,CAAE,MAAAA,CAAA,IAAYA,EAAM,iBAAiB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAanD,IAAAC,GAAAA,IACVA,EAAAC,EAAA,OAAA,CAAA,EAAA,SADUD,IAAAA,GAAA,CAAA,CAAA,EAIL,SAASE,EAAc,CAC5B,QAAAC,EACA,SAAAC,CACF,EAGG,CACD,OAAUC,MAAAC,EAAAA,SAAA,CAAA,SAAAH,IAAY,GAA0BE,EAAAA,IAAAC,EAAA,SAAA,CAAG,SAAAF,EAAS,CAAI,CAAA,CAClE,CAEgB,SAAAG,EAAS,CAAE,MAAAC,EAAO,SAAAC,EAAU,UAAAC,EAAW,UAAAC,EAAW,QAAAC,EAAS,GAAGC,GAAqB,CACjG,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAAkB,EAAK,EAC/CC,EAAeL,EAAU,oBAAsB,WAC/CM,EAAeJ,EAAU,QAAU,GAEvC,OAAAK,EAAA,KAACtB,EAAA,CACC,UAAW,GAAGoB,CAAY,IAAIP,GAAa,EAAE,IAAIQ,CAAY,GAC7D,GAAI,OAAOV,EAAU,IAAc,OAAS,QAC5C,QAAS,IAAMO,EAAW,EAAI,EAC9B,OAAQ,IAAMA,EAAW,EAAK,EAE9B,SAAA,CAAAV,MAAC,SAAM,KAAK,WAAW,UAAU,WAAW,QAAAO,EAAmB,GAAGC,EAAY,EAC7ER,EAAA,IAAA,OAAA,CAAK,YAAWI,EAAU,UAAU,YAAY,EAChDD,GAASH,EAAA,IAAC,OAAK,CAAA,UAAU,QAAS,SAAMG,EAAA,EACxCG,CAAA,CAAA,CACH,CAEJ"}