{"version":3,"file":"CZg-ky9r.js","sources":["../../../../components/common/MoneyAmount.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport InfoIconTooltip from '~/components/common/InfoIconTooltip.vue';\r\n\r\ntype Props = {\r\n  loading?: boolean;\r\n  amount?: number;\r\n  currency?: string;\r\n  title?: string;\r\n  colorBySign?: boolean;\r\n  addPlusSign?: boolean;\r\n  link?: string;\r\n  help?: string;\r\n  theme?: 'light' | 'dark';\r\n};\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  loading: false,\r\n  amount: undefined,\r\n  currency: undefined,\r\n  title: undefined,\r\n  colorBySign: false,\r\n  addPlusSign: false,\r\n  link: undefined,\r\n  help: undefined,\r\n  theme: 'dark',\r\n});\r\n\r\nconst valueClassNames = computed(() => ({\r\n  ...(props.colorBySign && {\r\n    'money-amount-value--positive': props.amount! >= 0,\r\n    'money-amount-value--negative': props.amount! < 0,\r\n  }),\r\n}));\r\n\r\nconst formatKey = computed(() =>\r\n  props.addPlusSign\r\n    ? `currencyTwoDecimalsWithSign-${props.currency}`\r\n    : `currencyTwoDecimals-${props.currency}`,\r\n);\r\n</script>\r\n\r\n<template>\r\n  <div class=\"money-amount\">\r\n    <div v-if=\"title\" class=\"money-amount__title\">\r\n      <span>{{ title }}</span>\r\n\r\n      <InfoIconTooltip v-if=\"help\" :theme=\"theme\">{{ help }}</InfoIconTooltip>\r\n    </div>\r\n\r\n    <div v-if=\"loading\" class=\"money-amount-value money-amount-value__money\">\r\n      {{ $t('global.loading') }}\r\n    </div>\r\n\r\n    <i18n-n\r\n      v-else\r\n      tag=\"div\"\r\n      class=\"money-amount-value\"\r\n      scope=\"global\"\r\n      :class=\"valueClassNames\"\r\n      :value=\"amount!\"\r\n      :format=\"formatKey\"\r\n    >\r\n      <template #currency=\"slotProps\">\r\n        <span class=\"money-amount-value__currency\">{{ slotProps.currency }}</span>\r\n      </template>\r\n\r\n      <template #minusSign=\"slotProps\">\r\n        <span class=\"money-amount-value__money\">{{ slotProps.minusSign }}</span>\r\n      </template>\r\n\r\n      <template #plusSign=\"slotProps\">\r\n        <span class=\"money-amount-value__money\">{{ slotProps.plusSign }}</span>\r\n      </template>\r\n\r\n      <template #integer=\"slotProps\">\r\n        <span class=\"money-amount-value__money\">{{ slotProps.integer }}</span>\r\n      </template>\r\n\r\n      <template #group>\r\n        <span class=\"money-amount-value__money\">&nbsp;</span>\r\n      </template>\r\n\r\n      <template #decimal=\"slotProps\">\r\n        <span class=\"money-amount-value__decimals\">{{ slotProps.decimal }}</span>\r\n      </template>\r\n\r\n      <template #fraction=\"slotProps\">\r\n        <span class=\"money-amount-value__decimals\">{{ slotProps.fraction }}</span>\r\n      </template>\r\n\r\n      <template #literal>\r\n        <span>&nbsp;</span>\r\n      </template>\r\n    </i18n-n>\r\n  </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.money-amount {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.money-amount__title {\r\n  display: inline-flex;\r\n}\r\n\r\n.money-amount-value {\r\n  font-size: var(--font-size-md);\r\n\r\n  &__money {\r\n    font-weight: 700;\r\n    font-size: var(--font-size-xxxl);\r\n  }\r\n\r\n  &__decimals {\r\n    font-weight: 700;\r\n  }\r\n\r\n  &--positive {\r\n    color: var(--green-basic);\r\n  }\r\n\r\n  &--negative {\r\n    color: var(--red-basic);\r\n  }\r\n}\r\n</style>\r\n"],"names":["props","__props","valueClassNames","computed","formatKey"],"mappings":"w8BAeA,MAAMA,EAAQC,EAYRC,EAAkBC,EAAS,KAAO,CACtC,GAAIH,EAAM,aAAe,CACvB,+BAAgCA,EAAM,QAAW,EACjD,+BAAgCA,EAAM,OAAU,CAClD,CACA,EAAA,EAEII,EAAYD,EAAS,IACzBH,EAAM,YACF,+BAA+BA,EAAM,QAAQ,GAC7C,uBAAuBA,EAAM,QAAQ,EAAA"}