{"version":3,"file":"Gender-ea94d6b9.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=\"browser.isDesktop && !$props.forcedDropdown\">\n      <div class=\"gender__element\">\n        <label\n          class=\"gender__item\"\n          :class=\"{\n          'gender__item--selected': isFemale,\n          'gender__item--disabled': isGenderDisabled,\n        }\"\n        >\n          <input\n            v-model=\"gender\"\n            class=\"gender__input\"\n            type=\"radio\"\n            name=\"gender\"\n            :value=\"GENDER.FEMALE\"\n            :checked=\"isFemale\"\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--selected': isMale,\n          'gender__item--disabled': isGenderDisabled,\n        }\"\n        >\n          <input\n            v-model=\"gender\"\n            class=\"gender__input\"\n            type=\"radio\"\n            name=\"gender\"\n            :value=\"GENDER.MALE\"\n            :checked=\"isMale\"\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=\"!disableUnborn\">\n          <label\n            class=\"gender__item\"\n            :class=\"{\n            'gender__item--selected': gender === GENDER.UNBORN,\n            'gender__item--disabled': isUnbornDisabled,\n          }\"\n          >\n            <input\n              v-model=\"gender\"\n              class=\"gender__input\"\n              type=\"radio\"\n              name=\"gender\"\n              :value=\"GENDER.UNBORN\"\n              :checked=\"gender === 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      <div\n        class=\"gender__hint\"\n        v-text=\"autoHint\"\n      />\n    </template>\n    <template v-else>\n      <div class=\"gender__select\">\n        <Form.Dropdown\n          v-model=\"gender\"\n          required\n          class=\"gender__dropdown\"\n          name=\"genderSelect\"\n          :readonly=\"$props.disabled\"\n          :options=\"genderList\"\n          :validate=\"validate\"\n          :theme=\"selectTheme\"\n          :title=\"$t('person.sex')\"\n          @update:modelValue=\"select\"\n        />\n      </div>\n    </template>\n  </div>\n</template>\n\n<script setup>\nimport { computed, ref, watch } from 'vue'\nimport { useI18n } from 'vue-i18n'\n\nimport { GENDER } from '@/config/constants'\nimport { useBrowser } from '@/hooks'\nimport * as Form from '@/components/Form'\n\nconst { t, tm } = useI18n()\nconst { browser } = useBrowser()\nconst $emit = defineEmits(['update:modelValue'])\n\n// Props\nconst props = defineProps({\n  // show male / female by default\n  age: {\n    type: Number,\n    default: null,\n  },\n\n  autoSelection: {\n    type: Boolean,\n    default: true,\n  },\n\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n\n  disableUnborn: {\n    type: Boolean,\n    default: false,\n  },\n\n  readonly: {\n    type: Boolean,\n    default: false,\n  },\n\n  theme: {\n    type: String,\n    default: 'transparent',\n  },\n\n  validate: {\n    type: Object,\n    default: () => {},\n  },\n\n  modelValue: {\n    type: String,\n    default: '',\n  },\n\n  forcedDropdown: {\n    type: Boolean,\n    default: false,\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 tm(`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 isInvalid = computed(() => {\n  return props.validate?.$invalid && props.validate?.$error\n})\n\nconst isMale = computed(() => {\n  return gender.value === GENDER.MALE\n})\n\nconst isFemale = computed(() => {\n  return gender.value === GENDER.FEMALE\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 isGenderDisabled = computed(() => {\n  return 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\n  props.validate?.$touch()\n\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  font-size: 15px;\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":["t","tm","useI18n","browser","useBrowser","gender","ref","props","autoHint","computed","isInvalid","error","classes","genderList","GENDER","val","g","isUnbornGender","isUnbornDisabled","isGenderDisabled","isMale","isFemale","isUnborn","selectTheme","autoSelect","select","value","$emit","watch"],"mappings":"y8BA8GM,CAAE,EAAAA,EAAG,GAAAC,CAAI,EAAGC,EAAS,EACrB,CAAE,QAAAC,CAAS,EAAGC,EAAY,EAqDhC,IAAIC,EAASC,EAAIC,EAAM,UAAU,EAGjC,MAAMC,EAAWC,EAAS,IAAM,CAC9B,GAAIF,EAAM,UAAYG,EAAU,MAAO,CAErC,MAAMC,EADS,MAAM,KAAKJ,EAAM,SAAS,OAAO,EAC3B,CAAC,GAAG,WAEzB,GAAII,EACF,OAAOV,EAAG,cAAcU,GAAO,EAGnC,OAAOJ,EAAM,IACf,CAAC,EAEKK,EAAUH,EAAS,KAChB,CACL,kBAAmBC,EAAU,MAC7B,mBAAoBH,EAAM,SAC1B,CAAC,WAAWA,EAAM,OAAO,EAAG,EAC7B,EACF,EAEKM,EAAaJ,EAAS,IACnB,OAAO,OAAOK,CAAM,EACxB,IAAIC,IACI,CACL,MAAOA,EACP,KAAMf,EAAE,iBAAiBe,EAAI,YAAa,GAAE,CAC7C,EACF,EACA,OAAOC,GAAK,CACX,MAAMC,EAAiBD,EAAE,QAAUF,EAAO,OAE1C,OAAII,EAAiB,OAASX,EAAM,cAE3B,CAACU,EACCE,EAAiB,MAEnBF,EAGAD,CAEf,CAAK,CACJ,EAEKN,EAAYD,EAAS,IAClBF,EAAM,UAAU,UAAYA,EAAM,UAAU,MACpD,EAEKa,EAASX,EAAS,IACfJ,EAAO,QAAUS,EAAO,IAChC,EAEKO,EAAWZ,EAAS,IACjBJ,EAAO,QAAUS,EAAO,MAChC,EAEKQ,EAAWb,EAAS,IACjBJ,EAAO,QAAUS,EAAO,MAChC,EAEKI,EAAmBT,EAAS,IACzBF,EAAM,MAAQ,MAAQA,EAAM,KAAO,CAC3C,EAEKY,EAAmBV,EAAS,IACzBF,EAAM,IAAM,CACpB,EAEKgB,EAAcd,EAAS,IACpB,CAAC,cAAe,OAAO,EAAE,SAASF,EAAM,KAAK,EAAI,OAAS,OAClE,EAGD,SAASiB,GAAa,CAChBjB,EAAM,IAAM,EACdkB,EAAOX,EAAO,MAAM,EACXP,EAAM,KAAO,GAAKe,EAAS,OACpCG,EAAO,IAAI,CAEf,CAEA,SAASA,EAAOC,EAAO,CACrBrB,EAAO,MAAQqB,EAEfnB,EAAM,UAAU,OAAQ,EAExBoB,EAAM,oBAAqBD,CAAK,CAClC,CAGA,OAAAE,EACE,IAAMrB,EAAM,IACZ,IAAMiB,EAAY,CACpB,EAEAI,EAAMvB,EAAQqB,GAAS,CACrBD,EAAOC,CAAK,CACd,CAAC,EAEDE,EACE,IAAMrB,EAAM,WACZmB,GAAS,CACHA,IAAUrB,EAAO,QACnBA,EAAO,MAAQqB,EAElB,CACH"}