{"version":3,"file":"checkbox.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.tsx"],"sourcesContent":["import { useRef, useEffect, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Ripple from 'components/common/ripple';\nimport Loader from '../loader';\nimport { useComponentDefaults } from '../configProvider';\n\nimport type { CheckboxProps } from './checkbox.types';\nimport styles from './checkbox.module.pcss';\n\nfunction Checkbox(props: CheckboxProps): ReactElement {\n  const {\n    label = '',\n    selected = false,\n    indeterminate = false,\n    onToggle = () => {},\n    className = '',\n    style,\n    disabled = false,\n    lineHeight = '',\n    title = '',\n    tabIndex = 0,\n    cursorDefault = false,\n    width,\n    height,\n    formValidator = null,\n    children = null,\n    background = null,\n    isLoading = false,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Checkbox', props);\n  const rippleRef = useRef<{ addRipple: () => void }>(null);\n  const [, forceUpdate] = useState(0);\n\n  useEffect(() => {\n    if (!formValidator) return;\n    const listener = () => forceUpdate((n) => n + 1);\n    formValidator.registerOnUpdateListener(listener);\n    return () => formValidator.removeOnUpdateListener(listener);\n  }, [formValidator]);\n\n  function handleToggle(event?: React.MouseEvent | React.KeyboardEvent) {\n    if (disabled || isLoading) return;\n    rippleRef.current?.addRipple();\n    if (formValidator) {\n      formValidator.set(!formValidator.value);\n    }\n    onToggle(!selected, event);\n  }\n\n  const currSelected = (formValidator ? formValidator.value : selected) as boolean;\n\n  return (\n    <div\n      {...rest}\n      className={cx(\n        styles.checkbox,\n        {\n          [styles.checkboxDisabled]: disabled,\n          [styles.checkboxPointer]: !cursorDefault,\n        },\n        className,\n      )}\n      /* Through the variable, so the border and the spinner follow width too, not just the box. */\n      style={{ ...(width ? ({ '--checkbox-size': width } as React.CSSProperties) : null), ...style }}\n      onClick={handleToggle}\n      onKeyPress={(e) => {\n        if (e.key === 'Enter') handleToggle(e);\n      }}\n      role='checkbox'\n      aria-checked={indeterminate ? 'mixed' : currSelected}\n      aria-disabled={disabled || undefined}\n      aria-busy={isLoading || rest['aria-busy'] || undefined}\n      tabIndex={tabIndex}\n    >\n      <div\n        title={title}\n        className={cx(styles.checkboxIcon, isLoading ? styles.checkboxLoading : null, classNames?.icon)}\n        style={slotStyles?.icon}\n      >\n        {isLoading ? (\n          <div className={styles.checkboxLoadingBox} style={{ width, height }}>\n            {/* Hidden: a checkbox takes its name from its content, and would be read as \"Loading <label>\". */}\n            <Loader size='100%' aria-hidden />\n          </div>\n        ) : (\n          <div\n            style={{\n              width,\n              height,\n              ...(background ? ({ '--checkbox-fill': background } as React.CSSProperties) : null),\n              ...slotStyles?.checkmark,\n            }}\n            className={cx(\n              styles.checkboxCheckmark,\n              currSelected && !indeterminate && styles.checkboxCheckmarkChecked,\n              indeterminate && styles.checkboxCheckmarkIndeterminate,\n              classNames?.checkmark,\n            )}\n          >\n            <Ripple\n              ref={rippleRef}\n              manualOnly\n              overflowHidden={false}\n              rippleAnimationLength={0.3}\n              rippleBackground='radial-gradient(transparent, var(--primary-color))'\n            />\n            <svg\n              strokeLinejoin='round'\n              strokeLinecap='round'\n              xmlns='http://www.w3.org/2000/svg'\n              viewBox='-0.5 -1.5 4 2.6'\n            >\n              <path className={styles.checkboxTick} d='M 0 0 l 1 1 l 2 -2' strokeWidth='0.4' fill='none' />\n              {/* On the viewBox's centre line, y = -1.5 + 2.6 / 2. */}\n              <path className={styles.checkboxDash} d='M 0.5 -0.2 h 2' strokeWidth='0.4' fill='none' />\n            </svg>\n          </div>\n        )}\n      </div>\n      <div className={classNames?.label} style={{ lineHeight: lineHeight || '100%', ...slotStyles?.label }}>\n        {children || label}\n      </div>\n    </div>\n  );\n}\n\nexport default Checkbox;\n"],"mappings":"oVASA,SAAS,EAAS,EAAoC,CACpD,GAAM,CACJ,QAAQ,GACR,WAAW,GACX,gBAAgB,GAChB,eAAiB,CAAC,EAClB,YAAY,GACZ,QACA,WAAW,GACX,aAAa,GACb,QAAQ,GACR,WAAW,EACX,gBAAgB,GAChB,QACA,SACA,gBAAgB,KAChB,WAAW,KACX,aAAa,KACb,YAAY,GACZ,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,WAAY,CAAK,EACpC,EAAY,EAAkC,IAAI,EAClD,EAAG,GAAe,EAAS,CAAC,EAElC,MAAgB,CACd,GAAI,CAAC,EAAe,OACpB,IAAM,MAAiB,EAAa,GAAM,EAAI,CAAC,EAE/C,OADA,EAAc,yBAAyB,CAAQ,MAClC,EAAc,uBAAuB,CAAQ,CAC5D,EAAG,CAAC,CAAa,CAAC,EAElB,SAAS,EAAa,EAAgD,CAChE,GAAY,IAChB,EAAU,SAAS,UAAU,EACzB,GACF,EAAc,IAAI,CAAC,EAAc,KAAK,EAExC,EAAS,CAAC,EAAU,CAAK,EAC3B,CAEA,IAAM,EAAgB,EAAgB,EAAc,MAAQ,EAE5D,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,SACP,EACG,EAAO,kBAAmB,GAC1B,EAAO,iBAAkB,CAAC,CAC7B,EACA,CACF,EAEA,MAAO,CAAE,GAAI,EAAS,CAAE,kBAAmB,CAAM,EAA4B,KAAO,GAAG,CAAM,EAC7F,QAAS,EACT,WAAa,GAAM,CACb,EAAE,MAAQ,SAAS,EAAa,CAAC,CACvC,EACA,KAAK,WACL,eAAc,EAAgB,QAAU,EACxC,gBAAe,GAAY,IAAA,GAC3B,YAAW,GAAa,EAAK,cAAgB,IAAA,GACnC,WApBZ,SAAA,CAsBE,EAAC,MAAD,CACS,QACP,UAAW,EAAG,EAAO,aAAc,EAAY,EAAO,gBAAkB,KAAM,GAAY,IAAI,EAC9F,MAAO,GAAY,KAElB,SAAA,EACC,EAAC,MAAD,CAAK,UAAW,EAAO,mBAAoB,MAAO,CAAE,QAAO,QAAO,EAEhE,SAAA,EAAC,EAAD,CAAQ,KAAK,OAAO,cAAA,EAAa,CAAA,CAC9B,CAAA,EAEL,EAAC,MAAD,CACE,MAAO,CACL,QACA,SACA,GAAI,EAAc,CAAE,kBAAmB,CAAW,EAA4B,KAC9E,GAAG,GAAY,SACjB,EACA,UAAW,EACT,EAAO,kBACP,GAAgB,CAAC,GAAiB,EAAO,yBACzC,GAAiB,EAAO,+BACxB,GAAY,SACd,EAZF,SAAA,CAcE,EAAC,EAAD,CACE,IAAK,EACL,WAAA,GACA,eAAgB,GAChB,sBAAuB,GACvB,iBAAiB,oDAClB,CAAA,EACD,EAAC,MAAD,CACE,eAAe,QACf,cAAc,QACd,MAAM,6BACN,QAAQ,kBAJV,SAAA,CAME,EAAC,OAAD,CAAM,UAAW,EAAO,aAAc,EAAE,qBAAqB,YAAY,MAAM,KAAK,MAAQ,CAAA,EAE5F,EAAC,OAAD,CAAM,UAAW,EAAO,aAAc,EAAE,iBAAiB,YAAY,MAAM,KAAK,MAAQ,CAAA,CACrF,CACF,CAAA,CAAA,GAEJ,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,GAAY,MAAO,MAAO,CAAE,WAAY,GAAc,OAAQ,GAAG,GAAY,KAAM,EAChG,SAAA,GAAY,CACV,CAAA,CACF,GAET"}