{"version":3,"file":"Avatar-NhxoB5TY.js","sources":["../../../packs/frontend/components/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ToolsUser, Author } from \"@/services/fobizzToolsApi\";\nimport { type Subscriber } from \"@/types\";\n\nconst props = withDefaults(\n  defineProps<{\n    user?: ToolsUser | Subscriber | Author;\n    text?: string;\n    size?: \"sm\";\n    background?: \"gray\";\n    border?: boolean;\n    shadow?: boolean;\n  }>(),\n  {\n    user: undefined,\n    text: undefined,\n    size: undefined,\n    background: undefined,\n    border: false,\n    shadow: false,\n  }\n);\n\nconst avatarInitials = computed(() => {\n  if (!props.user || (props.user as ToolsUser).pupil) {\n    return \"\";\n  } else if (props.user.initials) {\n    return props.user.initials;\n  } else if (props.user.firstname && props.user.lastname) {\n    return `${props.user.firstname[0]} ${props.user.lastname[0]}`;\n  } else {\n    return \"?\";\n  }\n});\n\nconst resolveTitle = computed(() => props.user?.publicDisplayName || \"\");\n\nconst cssClasses = computed(() => {\n  return {\n    \"avatar2--sm\": props.size === \"sm\",\n    \"avatar2--shadow\": props.shadow,\n  };\n});\n\nconst cssClassesImage = computed(() => {\n  return {\n    \"avatar2__image--border\": props.border,\n  };\n});\n\nconst cssClassesMissing = computed(() => {\n  return {\n    \"avatar2__missing--bg-gray\": props.background === \"gray\",\n    \"avatar2__missing--border\": props.border,\n  };\n});\n</script>\n\n<template>\n  <div :title=\"resolveTitle\" class=\"avatar2\" :class=\"cssClasses\">\n    <template v-if=\"user\">\n      <img\n        v-if=\"user.imageUrl\"\n        :src=\"user.imageUrl\"\n        class=\"avatar2__image\"\n        :class=\"cssClassesImage\"\n        :alt=\"avatarInitials\"\n      />\n      <div v-else class=\"avatar2__missing\" :class=\"cssClassesMissing\">\n        {{ avatarInitials }}\n      </div>\n    </template>\n    <div v-else class=\"avatar2__missing\" :class=\"cssClassesMissing\">\n      {{ text }}\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.avatar2 {\n  width: 38px;\n  height: 38px;\n  display: flex;\n  border-radius: 50%;\n\n  &--sm {\n    width: 32px;\n    height: 32px;\n  }\n\n  &--shadow {\n    box-shadow: $brand-box-shadow;\n  }\n\n  &__image {\n    width: 100%;\n    height: auto;\n    object-fit: cover;\n    border-radius: 50%;\n\n    &--border {\n      border: 1.5px solid $border-color;\n    }\n  }\n\n  &__missing {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: $brand-tools-light;\n    color: $brand-tools;\n    border-radius: 50%;\n    font-size: $font-size-xs;\n    font-weight: $font-weight-semibold;\n    text-transform: uppercase;\n\n    &--bg-gray {\n      background-color: $gray-200;\n      border-color: $border-color;\n      color: $body-color;\n    }\n\n    &--border {\n      border: 1.5px solid $color-white;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","avatarInitials","computed","resolveTitle","cssClasses","cssClassesImage","cssClassesMissing"],"mappings":"8WAIA,MAAMA,EAAQC,EAmBRC,EAAiBC,EAAS,IAC1B,CAACH,EAAM,MAASA,EAAM,KAAmB,MACpC,GACEA,EAAM,KAAK,SACbA,EAAM,KAAK,SACTA,EAAM,KAAK,WAAaA,EAAM,KAAK,SACrC,GAAGA,EAAM,KAAK,UAAU,CAAC,CAAC,IAAIA,EAAM,KAAK,SAAS,CAAC,CAAC,GAEpD,GAEV,EAEKI,EAAeD,EAAS,IAAMH,EAAM,MAAM,mBAAqB,EAAE,EAEjEK,EAAaF,EAAS,KACnB,CACL,cAAeH,EAAM,OAAS,KAC9B,kBAAmBA,EAAM,MAC3B,EACD,EAEKM,EAAkBH,EAAS,KACxB,CACL,yBAA0BH,EAAM,MAClC,EACD,EAEKO,EAAoBJ,EAAS,KAC1B,CACL,4BAA6BH,EAAM,aAAe,OAClD,2BAA4BA,EAAM,MACpC,EACD"}