{"version":3,"file":"B-QWMqsa.js","sources":["../../../../src/components/atom/circle-icon.vue"],"sourcesContent":["<template>\n  <div\n    class=\"rounded-full p-[4px] mx-auto z-10 relative bg-activesection-base text-center\"\n    :class=\"[\n      {\n        'text-white': !props.inverted,\n        'text-activesection-base': props.inverted,\n      },\n      isSmall ? 'w-[78px] h-[78px]' : 'w-[108px] h-[108px]',\n    ]\"\n    :style=\"wrapperStyles\"\n  >\n    <div\n      v-if=\"props.icon\"\n      class=\"flex justify-center border-4 border-white rounded-full place-items-center\"\n      :class=\"[\n        {\n          'bg-white': props.inverted,\n        },\n        isSmall ? 'w-[70px] h-[70px]' : 'w-[100px] h-[100px]',\n      ]\"\n      :style=\"iconStyles\"\n    >\n      <FaIcon\n        :key=\"key\"\n        :icon=\"props.icon\"\n        :classes=\"isSmall ? 'text-2xl' : 'text-4xl'\"\n      />\n    </div>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport type { IconData } from '~~/src/server/transformers/iconTransformer';\nimport FaIcon from '@/components/fa-icon.vue';\n\nconst props = defineProps({\n  icon: {\n    type: Object as PropType<IconData>,\n    required: false,\n    default: () => null as IconData,\n  },\n  image: {\n    type: Object as PropType<any>,\n    required: false,\n    default: () => null as any,\n  },\n  small: {\n    type: Boolean,\n    default: false,\n  },\n  iconColor: {\n    type: String,\n    default: '',\n  },\n  backgroundColor: {\n    type: String,\n    default: '',\n  },\n  inverted: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst isSmall = ref(false);\nconst wrapperStyles = ref('');\nconst iconStyles = ref([]);\nconst key = ref(0);\n\nonMounted(() => {\n  isSmall.value = props.small;\n  wrapperStyles.value = 'background-color: ' + props.backgroundColor;\n  iconStyles.value = [\n    'background-color: ' + props.backgroundColor,\n    'color: ' + props.iconColor,\n    'border-color: ' + props.iconColor,\n  ];\n});\n\nwatch(\n  () => props.small,\n  (newVal, oldVal) => {\n    if (newVal !== oldVal) {\n      key.value = key.value + 1;\n      isSmall.value = newVal;\n    }\n  },\n);\n\n/**\n * IMAGE HTML :)\n    <!--<div\n      v-if=\"tile.image\"\n      class=\"rounded-full w-[100px] h-[100px] border-4 border-white place-items-center flex overflow-hidden\"\n    >\n      <img :src=\"tile.image\" class=\"min-w-full min-h-full\" />\n    </div>-->\n */\n</script>\n<style lang=\"postcss\">\n.text-activesection-base {\n  color: var(--activesection-base);\n}\n</style>\n"],"names":["props","__props","isSmall","ref","wrapperStyles","iconStyles","key","onMounted","watch","newVal","oldVal"],"mappings":"saAmCA,MAAMA,EAAQC,EA6BRC,EAAUC,EAAI,EAAK,EACnBC,EAAgBD,EAAI,EAAE,EACtBE,EAAaF,EAAI,CAAA,CAAE,EACnBG,EAAMH,EAAI,CAAC,EAEjB,OAAAI,EAAU,IAAM,CACdL,EAAQ,MAAQF,EAAM,MACRI,EAAA,MAAQ,qBAAuBJ,EAAM,gBACnDK,EAAW,MAAQ,CACjB,qBAAuBL,EAAM,gBAC7B,UAAYA,EAAM,UAClB,iBAAmBA,EAAM,SAAA,CAC3B,CACD,EAEDQ,EACE,IAAMR,EAAM,MACZ,CAACS,EAAQC,IAAW,CACdD,IAAWC,IACTJ,EAAA,MAAQA,EAAI,MAAQ,EACxBJ,EAAQ,MAAQO,EAEpB,CAAA"}