{"version":3,"file":"Thumbnail-BEAA5Rls.js","sources":["../../../app/javascript/shared/helpers/emoji.js","../../../app/javascript/dashboard/components/widgets/Avatar.vue","../../../app/javascript/dashboard/components/widgets/Thumbnail.vue"],"sourcesContent":["/**\n * Detects support for emoji character sets.\n *\n * Based on the Modernizr emoji detection.\n * https://github.com/Modernizr/Modernizr/blob/347ddb078116cee91b25b6e897e211b023f9dcb4/feature-detects/emoji.js\n *\n * @return {Boolean} true or false\n * @example\n *\n * hasEmojiSupport()\n * // => true|false\n */\nexport const hasEmojiSupport = () => {\n  const pixelRatio = window.devicePixelRatio || 1;\n  const offset = 12 * pixelRatio;\n  const node = document.createElement('canvas');\n\n  // canvastext support\n  if (\n    !node.getContext ||\n    !node.getContext('2d') ||\n    typeof node.getContext('2d').fillText !== 'function'\n  ) {\n    return false;\n  }\n\n  const ctx = node.getContext('2d');\n\n  ctx.fillStyle = '#f00';\n  ctx.textBaseline = 'top';\n  ctx.font = '32px Arial';\n  ctx.fillText('\\ud83d\\udc28', 0, 0); // U+1F428 KOALA\n  return ctx.getImageData(offset, offset, 1, 1).data[0] !== 0;\n};\n\nexport const removeEmoji = text => {\n  if (text) {\n    return text\n      .replace(\n        /([\\u2700-\\u27BF]|[\\uE000-\\uF8FF]|\\uD83C[\\uDC00-\\uDFFF]|\\uD83D[\\uDC00-\\uDFFF]|[\\u2011-\\u26FF]|\\uD83E[\\uDD10-\\uDDFF])/g,\n        ''\n      )\n      .replace(/\\s+/g, ' ')\n      .trim();\n  }\n  return '';\n};\n","<script>\nexport default {\n  name: 'Avatar',\n  props: {\n    username: {\n      type: String,\n      default: '',\n    },\n    size: {\n      type: Number,\n      default: 40,\n    },\n  },\n  computed: {\n    style() {\n      return {\n        fontSize: `${Math.floor(this.size / 2.5)}px`,\n      };\n    },\n    userInitial() {\n      const parts = this.username.split(/[ -]/);\n      let initials = parts.reduce((acc, curr) => acc + curr.charAt(0), '');\n\n      if (initials.length > 2 && initials.search(/[A-Z]/) !== -1) {\n        initials = initials.replace(/[a-z]+/g, '');\n      }\n      initials = initials.substring(0, 2).toUpperCase();\n\n      return initials;\n    },\n  },\n};\n</script>\n\n<template>\n  <div class=\"avatar-container\" :style=\"style\" aria-hidden=\"true\">\n    <slot>{{ userInitial }}</slot>\n  </div>\n</template>\n\n<style scoped>\n@tailwind components;\n@layer components {\n  .avatar-color {\n    background-image: linear-gradient(to top, #c2e1ff 0%, #d6ebff 100%);\n  }\n\n  .dark-avatar-color {\n    background-image: linear-gradient(to top, #135899 0%, #135899 100%);\n  }\n}\n.avatar-container {\n  @apply flex leading-[100%] font-medium items-center justify-center text-center cursor-default avatar-color dark:dark-avatar-color text-woot-600 dark:text-woot-200;\n}\n</style>\n","<script>\n/**\n * Thumbnail Component\n * Src - source for round image\n * Size - Size of the thumbnail\n * Badge - Chat source indication { fb / telegram }\n * Username - Username for avatar\n */\nimport Avatar from './Avatar.vue';\nimport { removeEmoji } from 'shared/helpers/emoji';\n\nexport default {\n  components: {\n    Avatar,\n  },\n  props: {\n    src: {\n      type: String,\n      default: '',\n    },\n    size: {\n      type: String,\n      default: '40px',\n    },\n    badge: {\n      type: String,\n      default: '',\n    },\n    username: {\n      type: String,\n      default: '',\n    },\n    status: {\n      type: String,\n      default: '',\n    },\n    hasBorder: {\n      type: Boolean,\n      default: false,\n    },\n    shouldShowStatusAlways: {\n      type: Boolean,\n      default: false,\n    },\n    title: {\n      type: String,\n      default: '',\n    },\n    variant: {\n      type: String,\n      default: 'circle',\n    },\n  },\n  data() {\n    return {\n      hasImageLoaded: false,\n      imgError: false,\n    };\n  },\n  computed: {\n    userNameWithoutEmoji() {\n      return removeEmoji(this.username);\n    },\n    showStatusIndicator() {\n      if (this.shouldShowStatusAlways) return true;\n      return this.status === 'online' || this.status === 'busy';\n    },\n    avatarSize() {\n      return Number(this.size.replace(/\\D+/g, ''));\n    },\n    badgeSrc() {\n      return {\n        instagram_direct_message: 'instagram-dm',\n        facebook: 'messenger',\n        'twitter-tweet': 'twitter-tweet',\n        'twitter-dm': 'twitter-dm',\n        whatsapp: 'whatsapp',\n        sms: 'sms',\n        'Channel::Line': 'line',\n        'Channel::Telegram': 'telegram',\n        'Channel::WebWidget': '',\n      }[this.badge];\n    },\n    badgeStyle() {\n      const size = Math.floor(this.avatarSize / 3);\n      const badgeSize = `${size + 2}px`;\n      const borderRadius = `${size / 2}px`;\n      return { width: badgeSize, height: badgeSize, borderRadius };\n    },\n    statusStyle() {\n      const statusSize = `${this.avatarSize / 4}px`;\n      return { width: statusSize, height: statusSize };\n    },\n    thumbnailClass() {\n      const className = this.hasBorder\n        ? 'border border-solid border-white dark:border-slate-700/50'\n        : '';\n      const variant =\n        this.variant === 'circle' ? 'thumbnail-rounded' : 'thumbnail-square';\n      return `user-thumbnail ${className} ${variant}`;\n    },\n    thumbnailBoxClass() {\n      const boxClass = this.variant === 'circle' ? 'is-rounded' : '';\n      return `user-thumbnail-box ${boxClass}`;\n    },\n    shouldShowImage() {\n      if (!this.src) {\n        return false;\n      }\n      if (this.hasImageLoaded) {\n        return !this.imgError;\n      }\n      return false;\n    },\n  },\n  watch: {\n    src(value, oldValue) {\n      if (value !== oldValue && this.imgError) {\n        this.imgError = false;\n      }\n    },\n  },\n  methods: {\n    onImgError() {\n      this.imgError = true;\n    },\n    onImgLoad() {\n      this.hasImageLoaded = true;\n    },\n  },\n};\n</script>\n\n<template>\n  <div\n    :class=\"thumbnailBoxClass\"\n    :style=\"{ height: size, width: size }\"\n    :title=\"title\"\n  >\n    <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->\n    <slot>\n      <img\n        v-show=\"shouldShowImage\"\n        :src=\"src\"\n        draggable=\"false\"\n        :class=\"thumbnailClass\"\n        @load=\"onImgLoad\"\n        @error=\"onImgError\"\n      />\n      <Avatar\n        v-show=\"!shouldShowImage\"\n        :username=\"userNameWithoutEmoji\"\n        :class=\"thumbnailClass\"\n        :size=\"avatarSize\"\n      />\n    </slot>\n    <img\n      v-if=\"badgeSrc\"\n      class=\"source-badge z-20\"\n      :style=\"badgeStyle\"\n      :src=\"`/integrations/channels/badges/${badgeSrc}.png`\"\n      alt=\"Badge\"\n    />\n    <div\n      v-if=\"showStatusIndicator\"\n      class=\"z-20\"\n      :class=\"`source-badge user-online-status user-online-status--${status}`\"\n      :style=\"statusStyle\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.user-thumbnail-box {\n  flex: 0 0 auto;\n  max-width: 100%;\n  position: relative;\n\n  &.is-rounded {\n    border-radius: 50%;\n  }\n\n  .user-thumbnail {\n    border-radius: 50%;\n    &.thumbnail-square {\n      border-radius: var(--border-radius-large);\n    }\n    height: 100%;\n    width: 100%;\n    box-sizing: border-box;\n    object-fit: cover;\n    vertical-align: initial;\n  }\n\n  .source-badge {\n    border-radius: var(--border-radius-small);\n    bottom: var(--space-minus-micro);\n    box-shadow: var(--shadow-small);\n    height: var(--space-slab);\n    padding: var(--space-micro);\n    position: absolute;\n    right: 0;\n    width: var(--space-slab);\n    @apply bg-white dark:bg-slate-900;\n  }\n\n  .user-online-status {\n    border-radius: 50%;\n    bottom: var(--space-micro);\n\n    &:after {\n      content: ' ';\n    }\n  }\n\n  .user-online-status--online {\n    @apply bg-green-400 dark:bg-green-400;\n  }\n\n  .user-online-status--busy {\n    @apply bg-yellow-500 dark:bg-yellow-500;\n  }\n\n  .user-online-status--offline {\n    @apply bg-slate-500 dark:bg-slate-500;\n  }\n}\n</style>\n"],"names":["hasEmojiSupport","offset","node","ctx","removeEmoji","text","_sfc_main","initials","acc","curr","_createElementBlock","_normalizeStyle","$options","_renderSlot","_ctx","_createTextVNode","_toDisplayString","Avatar","size","badgeSize","borderRadius","statusSize","className","variant","value","oldValue","_hoisted_1","_hoisted_2","_hoisted_3","_normalizeClass","$props","_createElementVNode","args","_createVNode","_component_Avatar","_createCommentVNode"],"mappings":"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"}