{"version":3,"file":"FormToggle-BkCmOtSF.js","sources":["../../../app/javascript/shared/components/forms/FormToggle.vue"],"sourcesContent":["<template>\n  <button\n    :id=\"id\"\n    class=\"tw-inline-flex tw-items-center tw-rounded-full tw-transition-colors focus:tw-outline-none focus-visible:tw-ring focus-visible:tw-ring-offset-2 disabled:tw-cursor-not-allowed\"\n    :class=\"[\n      checkedValue ? colors[color].wrapper.on : 'tw-bg-neutral-200',\n      sizes[size].wrapper,\n      colors[color].wrapper.base,\n    ]\"\n    :disabled=\"isDisabled\"\n    @click=\"handleChange\"\n    :test_id=\"$attrs.test_id\"\n  >\n    <span\n      class=\"tw-rounded-full tw-shadow tw-transition-transform\"\n      :class=\"[\n        checkedValue ? sizes[size].translate.on : sizes[size].translate.off,\n        isDisabled ? 'tw-bg-neutral-50' : 'tw-bg-white',\n        sizes[size].dot,\n      ]\"\n    />\n  </button>\n</template>\n\n<script setup>\nimport { getUniqueId } from '@/shared/utils/uniqueId.js'\nimport { computed } from 'vue'\n\nconst props = defineProps({\n  modelValue: {\n    type: [Array, Boolean],\n    default: false,\n  },\n  value: {\n    type: String,\n    default: '',\n  },\n  isDisabled: {\n    type: Boolean,\n    default: false,\n  },\n  size: {\n    type: String,\n    default: 'regular',\n  },\n  color: {\n    type: String,\n    default: 'success',\n  },\n})\n\nconst emit = defineEmits(['update:checked', 'update:modelValue'])\n\nconst id = `growthmentor-toggle-${getUniqueId()}`\n\nconst checkedValue = computed(() => {\n  return Array.isArray(props.modelValue)\n    ? props.modelValue.includes(props.value)\n    : props.modelValue\n})\n\nconst handleChange = () => {\n  if (Array.isArray(props.modelValue)) {\n    const toggleArray = [...props.modelValue]\n    if (toggleArray.includes(props.value)) {\n      toggleArray.splice(toggleArray.indexOf(props.value), 1)\n    } else {\n      toggleArray.push(props.value)\n      emit('update:checked', props.value)\n    }\n    emit('update:modelValue', toggleArray)\n  } else {\n    const newValue = !props.modelValue\n    if (newValue) emit('update:checked', props.value)\n    emit('update:modelValue', newValue)\n  }\n}\n\nconst sizes = {\n  small: {\n    wrapper: 'tw-h-6 tw-w-12',\n    dot: 'tw-h-4 tw-w-4',\n    translate: {\n      on: 'tw-translate-x-7',\n      off: 'tw-translate-x-1',\n    },\n  },\n  regular: {\n    wrapper: 'tw-h-8 tw-w-16',\n    dot: 'tw-h-6 tw-w-6',\n    translate: {\n      on: 'tw-translate-x-9',\n      off: 'tw-translate-x-1',\n    },\n  },\n}\n\nconst colors = {\n  success: {\n    wrapper: {\n      base: 'focus-visible:tw-ring-success-500',\n      on: 'tw-bg-success-500 disabled:tw-bg-success-300',\n    },\n  },\n  secondary: {\n    wrapper: {\n      base: 'focus-visible:tw-ring-secondary-500',\n      on: 'tw-bg-secondary-500 disabled:tw-bg-secondary-300',\n    },\n  },\n}\n</script>\n"],"names":["props","__props","emit","__emit","id","getUniqueId","checkedValue","computed","handleChange","toggleArray","newValue","sizes","colors"],"mappings":"uYA4BA,MAAMA,EAAQC,EAuBRC,EAAOC,EAEPC,EAAK,uBAAuBC,EAAW,CAAE,GAEzCC,EAAeC,EAAS,IACrB,MAAM,QAAQP,EAAM,UAAU,EACjCA,EAAM,WAAW,SAASA,EAAM,KAAK,EACrCA,EAAM,UACX,EAEKQ,EAAe,IAAM,CACzB,GAAI,MAAM,QAAQR,EAAM,UAAU,EAAG,CACnC,MAAMS,EAAc,CAAC,GAAGT,EAAM,UAAU,EACpCS,EAAY,SAAST,EAAM,KAAK,EAClCS,EAAY,OAAOA,EAAY,QAAQT,EAAM,KAAK,EAAG,CAAC,GAEtDS,EAAY,KAAKT,EAAM,KAAK,EAC5BE,EAAK,iBAAkBF,EAAM,KAAK,GAEpCE,EAAK,oBAAqBO,CAAW,CACzC,KAAS,CACL,MAAMC,EAAW,CAACV,EAAM,WACpBU,GAAUR,EAAK,iBAAkBF,EAAM,KAAK,EAChDE,EAAK,oBAAqBQ,CAAQ,CACnC,CACH,EAEMC,EAAQ,CACZ,MAAO,CACL,QAAS,iBACT,IAAK,gBACL,UAAW,CACT,GAAI,mBACJ,IAAK,kBACN,CACF,EACD,QAAS,CACP,QAAS,iBACT,IAAK,gBACL,UAAW,CACT,GAAI,mBACJ,IAAK,kBACN,CACF,CACH,EAEMC,EAAS,CACb,QAAS,CACP,QAAS,CACP,KAAM,oCACN,GAAI,8CACL,CACF,EACD,UAAW,CACT,QAAS,CACP,KAAM,sCACN,GAAI,kDACL,CACF,CACH"}