{"version":3,"file":"AvatarList-qslf0Tvt.js","sources":["../../../packs/frontend/components/AvatarList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ToolsUser, Author } from \"@/services/fobizzToolsApi\";\nimport { Subscriber } from \"@/types\";\n\nconst props = defineProps<{\n  users: (ToolsUser | Subscriber | Author)[];\n}>();\nconst emit = defineEmits([\"click\"]);\n\nconst MAX_AVATARS = 4;\nconst allAvatars = computed(() => {\n  return props.users;\n});\n\nconst visibleAvatars = computed(() => {\n  return allAvatars.value.slice(0, MAX_AVATARS);\n});\n\nconst additionalAvatarsCount = computed(() => {\n  return allAvatars.value.length - MAX_AVATARS;\n});\n</script>\n<template>\n  <button\n    class=\"avatar-list d-none d-lg-flex me-4\"\n    aria-label=\"Trigger avatar action if action is available\"\n    @click.prevent=\"emit('click')\"\n  >\n    <Avatar\n      v-for=\"avatar in visibleAvatars\"\n      :key=\"avatar.id\"\n      :user=\"avatar\"\n      :shadow=\"true\"\n      :border=\"true\"\n    />\n    <Avatar\n      v-if=\"additionalAvatarsCount > 0\"\n      :text=\"`+${additionalAvatarsCount}`\"\n    />\n  </button>\n</template>\n\n<style lang=\"scss\" scoped>\n.avatar-list {\n  display: flex;\n  flex: none;\n  align-items: flex-start;\n  margin-right: $spacer-2;\n  margin-left: auto;\n  text-decoration: none;\n  background-color: transparent;\n  border: none;\n  width: auto;\n  padding: 0;\n\n  > * {\n    margin-right: -$spacer-2;\n  }\n}\n</style>\n"],"names":["MAX_AVATARS","props","__props","emit","__emit","allAvatars","computed","visibleAvatars","additionalAvatarsCount"],"mappings":"8LASA,MAAMA,EAAc,8EALpB,MAAMC,EAAQC,EAGRC,EAAOC,EAGPC,EAAaC,EAAS,IACnBL,EAAM,KACd,EAEKM,EAAiBD,EAAS,IACvBD,EAAW,MAAM,MAAM,EAAGL,CAAW,CAC7C,EAEKQ,EAAyBF,EAAS,IAC/BD,EAAW,MAAM,OAASL,CAClC"}