{"version":3,"file":"ChatBaseUser-22d20450.js","sources":["../../../app/javascript/components/chat/ChatBaseUser.vue"],"sourcesContent":["<template>\n  <div class=\"flex items-center justify-between\">\n    <div class=\"flex items-center space-x-2\" :class=\"baseClass\">\n      <slot name=\"image\"></slot>\n      <div\n        @click=\"onUserClick()\"\n        :class=\"[\n          'user-click',\n          userProfileOpened ? 'flex flex-col items-center text-center' : 'flex flex-col',\n          hideCursor ? '' : 'cursor-pointer'\n        ]\"\n      >\n        <div\n          :class=\"[userClass, userProfileOpened ? 'justify-center text-base leading-6' : 'leading-5']\"\n          class=\"flex items-center text-sm font-semibold\"\n        >\n          <BaseTooltip v-if=\"title.length > maxTitleLength\">\n            <template #target>\n              <p class=\"truncate\">\n                {{ truncate(title, maxTitleLength) }}\n              </p>\n            </template>\n            <template #default>\n              {{ title }}\n            </template>\n          </BaseTooltip>\n          <span v-else>{{ title }}</span>\n          <div\n            v-if=\"showOnlineStatus && userData && !userData.deactivated_at\"\n            :class=\"onlineStatus ? 'bg-green-600' : 'border border-gray-400'\"\n            class=\"ml-1.5 h-2 w-2 rounded-full pl-1.5\"\n          ></div>\n        </div>\n        <BaseTooltip v-if=\"subText\">\n          <template #target>\n            <div class=\"text-xs font-medium leading-none text-gray-400\">{{ truncate(subText, maxTextLength) }}</div>\n          </template>\n          <template #default v-if=\"subText.length > maxTextLength\">\n            <p class=\"w-48\">{{ subText }}</p>\n          </template>\n        </BaseTooltip>\n        <div class=\"mt-4 flex flex-col items-center space-y-0.5 text-xs font-medium\" v-else-if=\"streamCompanies\">\n          <div v-for=\"comp in userCompanies\" class=\"flex items-center space-x-1\" :key=\"comp\">\n            <ChatImage v-if=\"comp.image\" size=\"xxs\" :item=\"getCompany(comp)\"></ChatImage>\n            <span>{{ comp }}</span>\n          </div>\n          <div v-if=\"user.role_title\" :class=\"subtextClass\">\n            {{ user.role_title }}\n          </div>\n        </div>\n      </div>\n    </div>\n    <slot name=\"options\"></slot>\n  </div>\n</template>\n<script setup>\nimport { ref, onMounted, onUnmounted, computed } from 'vue';\nimport { useMapGetter } from '@/store/map-state';\nimport { truncate } from '@/composeables/filters';\nimport ChatImage from './ChatImage.vue';\nimport useEmitter from '@/composeables/emitter';\n\nconst $emitter = useEmitter();\nconst { client } = useMapGetter();\n\nconst props = defineProps({\n  title: String,\n  subText: String,\n  showOnlineStatus: Boolean,\n  user: Object,\n  userProfileOpened: Boolean,\n  hideProfile: Boolean,\n  streamCompanies: Array,\n  maxTextLength: { type: Number, default: 24 },\n  customClass: { type: String, default: 'text-sm' },\n  baseClass: String,\n  hideCursor: { type: Boolean, default: false },\n  subtextClass: { type: String, default: 'text-gray-400' },\n  maxTitleLength: { type: Number, default: 25 }\n});\n\n// USER\nconst userPayload = ref(null);\nconst stateListener = ref(null);\n\nconst userData = computed(() => {\n  return userPayload.value;\n});\n\nonMounted(() => {\n  userPayload.value = props.user;\n  stateListener.value = client.value.on('user.presence.changed', event => {\n    if (userData.value.id === event.user.id) {\n      userPayload.value.online = event.user.online;\n    }\n  });\n});\n\nonUnmounted(() => {\n  if (stateListener.value) {\n    stateListener.value.unsubscribe();\n  }\n});\n\nconst onlineStatus = computed(() => {\n  return client.value.user.id === userData.value.id ? client.value.user.online : userData.value.online;\n});\nconst userClass = computed(() => {\n  let customClass = userData.value && userData.value.deactivated_at ? 'text-gray-400' : 'text-white';\n  return props.hideCursor || (props.user && client.value.user.id === props.user.id)\n    ? customClass\n    : customClass + ' cursor-pointer';\n});\nconst userCompanies = computed(() => {\n  return userData.value.companies_data?.length ? userData.value.companies_data.map(c => c.name) : [];\n});\n\nfunction onUserClick() {\n  if (!props.hideProfile && props.user && client.value.user.id != userData.value.id) {\n    $emitter.$emit('show:user-bio', userData.value);\n  }\n}\n\n// COMPANY\nfunction getCompany(name) {\n  if (props.streamCompanies) {\n    return props.streamCompanies.find(x => x.name == name);\n  }\n  return null;\n}\n</script>\n"],"names":["$emitter","useEmitter","client","useMapGetter","userPayload","ref","stateListener","userData","computed","onMounted","props","event","onUnmounted","onlineStatus","userClass","customClass","userCompanies","_a","c","onUserClick","getCompany","name","x"],"mappings":"ikCA8DMA,EAAWC,EAAU,EACrB,CAAE,OAAAC,CAAM,EAAKC,IAmBbC,EAAcC,EAAI,IAAI,EACtBC,EAAgBD,EAAI,IAAI,EAExBE,EAAWC,EAAS,IACjBJ,EAAY,KACpB,EAEDK,EAAU,IAAM,CACdL,EAAY,MAAQM,EAAM,KAC1BJ,EAAc,MAAQJ,EAAO,MAAM,GAAG,wBAAyBS,GAAS,CAClEJ,EAAS,MAAM,KAAOI,EAAM,KAAK,KACnCP,EAAY,MAAM,OAASO,EAAM,KAAK,OAE5C,CAAG,CACH,CAAC,EAEDC,EAAY,IAAM,CACZN,EAAc,OAChBA,EAAc,MAAM,aAExB,CAAC,EAED,MAAMO,EAAeL,EAAS,IACrBN,EAAO,MAAM,KAAK,KAAOK,EAAS,MAAM,GAAKL,EAAO,MAAM,KAAK,OAASK,EAAS,MAAM,MAC/F,EACKO,EAAYN,EAAS,IAAM,CAC/B,IAAIO,EAAcR,EAAS,OAASA,EAAS,MAAM,eAAiB,gBAAkB,aACtF,OAAOG,EAAM,YAAeA,EAAM,MAAQR,EAAO,MAAM,KAAK,KAAOQ,EAAM,KAAK,GAC1EK,EACAA,EAAc,iBACpB,CAAC,EACKC,EAAgBR,EAAS,IAAM,OACnC,OAAOS,EAAAV,EAAS,MAAM,iBAAf,MAAAU,EAA+B,OAASV,EAAS,MAAM,eAAe,IAAIW,GAAKA,EAAE,IAAI,EAAI,CAAA,CAClG,CAAC,EAED,SAASC,GAAc,CACjB,CAACT,EAAM,aAAeA,EAAM,MAAQR,EAAO,MAAM,KAAK,IAAMK,EAAS,MAAM,IAC7EP,EAAS,MAAM,gBAAiBO,EAAS,KAAK,CAElD,CAGA,SAASa,EAAWC,EAAM,CACxB,OAAIX,EAAM,gBACDA,EAAM,gBAAgB,KAAKY,GAAKA,EAAE,MAAQD,CAAI,EAEhD,IACT"}