{"version":3,"file":"Gender-Fp9GFwLz.js","sources":["../../src/components/Form/Gender.vue"],"sourcesContent":["<template>\n  <!-- prettier-ignore -->\n  <div\n    class=\"gender\"\n    :class=\"classes\"\n  >\n    <template v-if=\"isIconSelection\">\n      <div class=\"gender__element\">\n        <label\n          class=\"gender__item\"\n          :class=\"{\n            'gender__item--disabled': isGenderDisabled,\n            'gender__item--selected': isFemale,\n          }\"\n        >\n          <input\n            v-model=\"gender\"\n            class=\"gender__input\"\n            name=\"gender\"\n            type=\"radio\"\n            :checked=\"isFemale\"\n            :value=\"GENDER.FEMALE\"\n          />\n          <the-icon\n            class=\"gender__icon\"\n            art=\"solid\"\n            name=\"person-dress-simple\"\n          />\n          <span v-text=\"$t('person.gender.female')\" />\n        </label>\n\n        <label\n          class=\"gender__item\"\n          :class=\"{\n            'gender__item--disabled': isGenderDisabled,\n            'gender__item--selected': isMale,\n          }\"\n        >\n          <input\n            v-model=\"gender\"\n            class=\"gender__input\"\n            name=\"gender\"\n            type=\"radio\"\n            :checked=\"isMale\"\n            :value=\"GENDER.MALE\"\n          />\n          <the-icon\n            class=\"gender__icon\"\n            art=\"solid\"\n            name=\"person-simple\"\n          />\n          <span v-text=\"$t('person.gender.male')\" />\n        </label>\n        <template v-if=\"!$props.disableUnborn\">\n          <label\n            class=\"gender__item\"\n            :class=\"{\n              'gender__item--disabled': isUnbornDisabled,\n              'gender__item--selected': gender === GENDER.UNBORN,\n            }\"\n          >\n            <input\n              v-model=\"gender\"\n              class=\"gender__input\"\n              name=\"gender\"\n              type=\"radio\"\n              :checked=\"gender === GENDER.UNBORN\"\n              :value=\"GENDER.UNBORN\"\n            />\n            <the-icon\n              class=\"gender__icon\"\n              art=\"solid\"\n              name=\"baby-carriage\"\n            />\n            <span v-text=\"$t('person.gender.unborn')\" />\n          </label>\n        </template>\n      </div>\n      <the-typography type=\"bodyLargeShort\">\n        <div\n          class=\"gender__hint\"\n          v-text=\"autoHint\"\n        />\n      </the-typography>\n    </template>\n    <template v-else>\n      <div class=\"gender__select\">\n        <form-dropdown\n          v-model=\"gender\"\n          class=\"gender__dropdown\"\n          name=\"genderSelect\"\n          required\n          :options=\"genderList\"\n          :readonly=\"$props.disabled\"\n          :theme=\"selectTheme\"\n          :title-label=\"$t('person.sex')\"\n          :validate=\"$props.validate\"\n          @update:modelValue=\"select\"\n        />\n      </div>\n    </template>\n  </div>\n</template>\n\n<script setup>\nimport { computed, ref, watch } from 'vue'\n\nimport useBrowser from '@/hooks/useBrowser'\nimport useI18n from '@/hooks/useI18n'\n\nimport FormDropdown from '@/components/Form/Dropdown'\n\nimport { GENDER } from '@/config/constants'\n\n// HOOKS\nconst { browser } = useBrowser()\nconst { t } = useI18n()\n\n// INIT\nconst emit = defineEmits(['update:modelValue'])\nconst props = defineProps({\n  // show male / female by default\n  age: {\n    type: Number,\n    default: null,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  disableUnborn: {\n    type: Boolean,\n    default: false,\n  },\n  forcedDropdown: {\n    type: Boolean,\n    default: false,\n  },\n  modelValue: {\n    type: String,\n    default: '',\n  },\n  readonly: {\n    type: Boolean,\n    default: false,\n  },\n  theme: {\n    type: String,\n    default: 'transparent',\n  },\n  validate: {\n    type: Object,\n    default: () => {},\n  },\n})\n\n// DATA\nlet gender = ref(props.modelValue)\n\n// COMPUTED\nconst autoHint = computed(() => {\n  if (props.validate && isInvalid.value) {\n    const errors = Array.from(props.validate.$errors)\n    const error = errors[0]?.$validator\n\n    if (error) {\n      return t(`form.error.${error}`)\n    }\n  }\n  return props.hint\n})\n\nconst classes = computed(() => {\n  return {\n    'gender--invalid': isInvalid.value,\n    'gender--readonly': props.readonly,\n    [`gender--${props.theme}`]: true,\n  }\n})\n\nconst genderList = computed(() => {\n  return Object.values(GENDER)\n    .map(val => {\n      return {\n        value: val,\n        text: t(`person.gender.${val.toLowerCase()}`),\n      }\n    })\n    .filter(g => {\n      const isUnbornGender = g.value === GENDER.UNBORN\n\n      if (isUnbornDisabled.value || props.disableUnborn) {\n        // select others than unborn\n        return !isUnbornGender\n      } else if (isGenderDisabled.value) {\n        // select unborn\n        return isUnbornGender\n      } else {\n        // keep all\n        return g\n      }\n    })\n})\n\nconst isFemale = computed(() => {\n  return gender.value === GENDER.FEMALE\n})\n\nconst isGenderDisabled = computed(() => {\n  return props.age < 0\n})\n\nconst isIconSelection = computed(() => {\n  return browser.isDesktop && !props.forcedDropdown\n})\n\nconst isInvalid = computed(() => {\n  return props.validate?.$invalid && props.validate?.$error\n})\n\nconst isMale = computed(() => {\n  return gender.value === GENDER.MALE\n})\n\nconst isUnborn = computed(() => {\n  return gender.value === GENDER.UNBORN\n})\n\nconst isUnbornDisabled = computed(() => {\n  return props.age !== null && props.age >= 0\n})\n\nconst selectTheme = computed(() => {\n  return ['transparent', 'light'].includes(props.theme) ? 'dark' : 'light'\n})\n\n// METHODS\nfunction autoSelect() {\n  if (props.age < 0) {\n    select(GENDER.UNBORN)\n  } else if (props.age >= 0 && isUnborn.value) {\n    select(null)\n  }\n}\n\nfunction select(value) {\n  gender.value = value\n  props.validate?.$touch()\n  emit('update:modelValue', value)\n}\n\n// WATCHERS\nwatch(\n  () => props.age,\n  () => autoSelect()\n)\n\nwatch(gender, value => {\n  select(value)\n})\n\nwatch(\n  () => props.modelValue,\n  value => {\n    if (value !== gender.value) {\n      gender.value = value\n    }\n  }\n)\n</script>\n\n<style name=\"mobile\" scoped>\n.gender--invalid {\n  & .gender__icon,\n  & .gender__hint {\n    color: var(--c-secondary-color-1);\n  }\n}\n\n.gender--readonly {\n  pointer-events: none;\n}\n\n.gender--transparent {\n  background-color: transparent;\n}\n\n.gender--light {\n  background-color: var(--c-primary-neutral-3);\n}\n\n.gender--dark {\n  background-color: var(--c-primary-neutral-2);\n}\n\n.gender__element {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 32px;\n  padding: 0 0 0 10px;\n}\n\n.gender__item {\n  color: var(--c-primary-neutral-1);\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n}\n\n.gender__item:hover,\n.gender__item--selected {\n  color: var(--c-primary-color-3);\n}\n\n.gender__item--selected {\n  cursor: default;\n}\n\n.gender__item--disabled {\n  pointer-events: none;\n  opacity: 0.7;\n}\n\n.gender--invalid .gender__item--disabled .gender__icon {\n  color: inherit;\n}\n\n.gender__input {\n  position: absolute;\n  display: inline-block;\n  opacity: 0;\n  height: 1px;\n  width: 1px;\n}\n\n.gender__icon {\n  font-size: 25px;\n  color: inherit;\n}\n\n.gender__hint {\n  position: relative;\n  padding: 0 0 0 10px;\n}\n\n.unborn__tooltip {\n  margin-left: -24px;\n}\n\n.gender__select {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n\n.gender__dropdown {\n  flex: 1 0 auto;\n}\n</style>\n"],"names":["browser","useBrowser","t","useI18n","emit","__emit","props","__props","gender","ref","autoHint","computed","isInvalid","error","classes","genderList","GENDER","val","g","isUnbornGender","isUnbornDisabled","isGenderDisabled","isFemale","isIconSelection","isMale","isUnborn","selectTheme","autoSelect","select","value","watch"],"mappings":"o0BAmHA,KAAM,CAAE,QAAAA,CAAS,EAAGC,EAAY,EAC1B,CAAE,EAAAC,CAAG,EAAGC,EAAS,EAGjBC,EAAOC,EACPC,EAAQC,EAqCd,IAAIC,EAASC,EAAIH,EAAM,UAAU,EAGjC,MAAMI,EAAWC,EAAS,IAAM,CAC9B,GAAIL,EAAM,UAAYM,EAAU,MAAO,CAErC,MAAMC,EADS,MAAM,KAAKP,EAAM,SAAS,OAAO,EAC3B,CAAC,GAAG,WAEzB,GAAIO,EACF,OAAOX,EAAE,cAAcW,CAAK,EAAE,CAEjC,CACD,OAAOP,EAAM,IACf,CAAC,EAEKQ,EAAUH,EAAS,KAChB,CACL,kBAAmBC,EAAU,MAC7B,mBAAoBN,EAAM,SAC1B,CAAC,WAAWA,EAAM,KAAK,EAAE,EAAG,EAC7B,EACF,EAEKS,EAAaJ,EAAS,IACnB,OAAO,OAAOK,CAAM,EACxB,IAAIC,IACI,CACL,MAAOA,EACP,KAAMf,EAAE,iBAAiBe,EAAI,YAAa,CAAA,EAAE,CAC7C,EACF,EACA,OAAOC,GAAK,CACX,MAAMC,EAAiBD,EAAE,QAAUF,EAAO,OAE1C,OAAII,EAAiB,OAASd,EAAM,cAE3B,CAACa,EACCE,EAAiB,MAEnBF,EAGAD,CAEf,CAAK,CACJ,EAEKI,EAAWX,EAAS,IACjBH,EAAO,QAAUQ,EAAO,MAChC,EAEKK,EAAmBV,EAAS,IACzBL,EAAM,IAAM,CACpB,EAEKiB,EAAkBZ,EAAS,IACxBX,EAAQ,WAAa,CAACM,EAAM,cACpC,EAEKM,EAAYD,EAAS,IAClBL,EAAM,UAAU,UAAYA,EAAM,UAAU,MACpD,EAEKkB,EAASb,EAAS,IACfH,EAAO,QAAUQ,EAAO,IAChC,EAEKS,EAAWd,EAAS,IACjBH,EAAO,QAAUQ,EAAO,MAChC,EAEKI,EAAmBT,EAAS,IACzBL,EAAM,MAAQ,MAAQA,EAAM,KAAO,CAC3C,EAEKoB,EAAcf,EAAS,IACpB,CAAC,cAAe,OAAO,EAAE,SAASL,EAAM,KAAK,EAAI,OAAS,OAClE,EAGD,SAASqB,GAAa,CAChBrB,EAAM,IAAM,EACdsB,EAAOZ,EAAO,MAAM,EACXV,EAAM,KAAO,GAAKmB,EAAS,OACpCG,EAAO,IAAI,CAEf,CAEA,SAASA,EAAOC,EAAO,CACrBrB,EAAO,MAAQqB,EACfvB,EAAM,UAAU,OAAQ,EACxBF,EAAK,oBAAqByB,CAAK,CACjC,CAGA,OAAAC,EACE,IAAMxB,EAAM,IACZ,IAAMqB,EAAY,CACpB,EAEAG,EAAMtB,EAAQqB,GAAS,CACrBD,EAAOC,CAAK,CACd,CAAC,EAEDC,EACE,IAAMxB,EAAM,WACZuB,GAAS,CACHA,IAAUrB,EAAO,QACnBA,EAAO,MAAQqB,EAElB,CACH"}