{"version":3,"file":"Cin9y2Lp.js","sources":["../../../../../../node_modules/@heroicons/vue/20/solid/esm/UserIcon.js","../../../../components/PopoverHover.vue","../../../../components/UserPopover.vue","../../../../components/UserAvatar.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", { d: \"M10 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.465 14.493a1.23 1.23 0 0 0 .41 1.412A9.957 9.957 0 0 0 10 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 0 0-13.074.003Z\" })\n  ]))\n}","<template>\n  <div class=\"relative inline-block\">\n    <Float portal show :placement=\"position\" auto-placement :offset=\"5\">\n      <div\n        class=\"pointer-events-auto text-[0] focus:outline-none\"\n        @mouseenter=\"hoverPopover\"\n        @mouseleave=\"closePopover\"\n      >\n        <slot name=\"label\" />\n      </div>\n      <!-- DO NOT REMOVE THIS EMPTY DIV - IT IS NEEDED BY FLOATING-UI -->\n      <div>\n        <transition\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n        >\n          <div\n            v-if=\"isPopoverVisible\"\n            :class=\"[position === 'left' ? 'right-full' : 'left-full']\"\n            :style=\"`min-width: ${minWidth}px`\"\n            class=\"pointer-events-auto top-0 z-20 ml-0 w-auto px-2 sm:px-0\"\n            @mouseover=\"!disabled ? (isHovering = true) : null\"\n            @mouseleave=\"leavePanel\"\n          >\n            <div\n              class=\"mx-2 overflow-hidden rounded-md bg-white text-sm leading-6 shadow-lg ring-1 ring-black/5\"\n            >\n              <div class=\"relative grid gap-1 bg-white p-5\">\n                <slot name=\"content\" />\n              </div>\n            </div>\n          </div>\n        </transition>\n      </div>\n    </Float>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { PopoverPosition } from '@/types';\n\nconst props = defineProps({\n  position: {\n    type: String as PropType<PopoverPosition>,\n    default: 'left',\n  },\n  minWidth: {\n    type: String,\n    default: '320',\n  },\n  hasDelay: {\n    type: Boolean,\n    default: false,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst popoverTimeout = ref<NodeJS.Timeout>();\nconst hoverTimeout = ref<NodeJS.Timeout>();\nconst isPopoverVisible = ref(false);\nconst isHovering = ref(false);\n\nconst hoverPopover = () => {\n  if (props.disabled) {\n    return;\n  }\n  hoverTimeout.value = setTimeout(() => {\n    isPopoverVisible.value = true;\n  }, 200);\n};\n\nconst leavePanel = () => {\n  if (props.disabled) {\n    return;\n  }\n  isHovering.value = false;\n  closePopover();\n};\n\nconst closePopover = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (hoverTimeout.value) {\n    clearTimeout(hoverTimeout.value);\n  }\n\n  if (popoverTimeout.value) {\n    clearTimeout(popoverTimeout.value);\n  }\n\n  popoverTimeout.value = setTimeout(() => {\n    if (!isHovering.value) {\n      isPopoverVisible.value = false;\n    }\n  }, 100);\n};\n</script>\n","<template>\n  <PopoverHover\n    :disabled=\"!isActive || !user\"\n    :position=\"position\"\n    :has-delay=\"true\"\n  >\n    <template #label>\n      <slot />\n    </template>\n    <template v-if=\"user\" #content>\n      <div class=\"flex items-center\">\n        <UserAvatar class=\"mr-4\" :has-popover=\"false\" :user=\"user\" size=\"12\" />\n        <div class=\"flex flex-col items-start justify-center\">\n          <div class=\"font-medium text-gray-900\">{{ user.name }}</div>\n          <div class=\"text-sm text-gray-500\">\n            {{ $t(`roles.${getUserRoleByValue(user.role)}.name`) }}\n          </div>\n        </div>\n      </div>\n\n      <Button\n        v-if=\"selectedRollout\"\n        :href=\"\n          getRolloutRelativeLink('/rollout/collaborators/profile/' + user._id)\n        \"\n        class=\"mt-5 w-full text-center\"\n      >\n        {{ $t('account.open-profile') }}\n      </Button>\n    </template>\n  </PopoverHover>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { PopoverPosition } from '@/types';\nimport type { UserAvatarUser } from '@/components/UserAvatar.vue';\nimport { getUserRoleByValue } from '~/config/user-roles';\nconst { selectedRollout, getRolloutRelativeLink } = useRolloutRouting();\n\ndefineProps({\n  isActive: {\n    type: Boolean,\n    default: true,\n  },\n  user: {\n    type: Object as PropType<UserAvatarUser>,\n  },\n  position: {\n    type: String as PropType<PopoverPosition>,\n    default: 'left',\n  },\n});\n</script>\n","<template>\n  <UserPopover :is-active=\"hasPopover\" :user=\"user\" :position=\"popoverPosition\">\n    <img\n      v-if=\"user?.picture\"\n      :src=\"user.picture\"\n      :alt=\"user.name\"\n      class=\"inline-block rounded-full\"\n      :class=\"sizeClasses\"\n    />\n    <span\n      v-else\n      class=\"inline-flex items-center justify-center rounded-full\"\n      :class=\"[sizeClasses, user ? `bg-${backgroundColor}` : 'bg-gray-500']\"\n    >\n      <span\n        v-if=\"user\"\n        class=\"select-none font-medium leading-none\"\n        :class=\"textColorClass\"\n        :style=\"{ fontSize: fontSize }\"\n      >\n        {{ letters }}\n      </span>\n      <UserIcon v-else class=\"size-4 text-white\" />\n    </span>\n  </UserPopover>\n</template>\n\n<script lang=\"ts\">\nexport type UserAvatarUser = {\n  _id: string;\n  name: string;\n  picture?: string;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { UserIcon } from '@heroicons/vue/20/solid';\nimport {\n  getForeground,\n  getBackgroundColorByIndex,\n  getHexByColorBrightness,\n} from '@/util/colors';\nimport type { ColorBrightness } from '@/util/colors';\nimport type { PopoverPosition } from '@/types';\n\nconst props = defineProps({\n  user: {\n    type: Object as PropType<UserAvatarUser>,\n  },\n  size: {\n    type: String,\n    default: '10',\n  },\n  hasPopover: {\n    type: Boolean,\n    default: true,\n  },\n  popoverPosition: {\n    type: String as PropType<PopoverPosition>,\n    default: 'left',\n  },\n});\n\nconst fontSize = computed(() => {\n  const avatarSize = parseInt(props.size, 10);\n  const fontSizeIncreaseFactor = props.user ? 1.4 : 1;\n  return `${avatarSize * fontSizeIncreaseFactor}px`;\n});\n\nconst sizeClasses = computed(() => {\n  return `size-${props.size}`;\n});\n\nconst letters = computed(() => {\n  if (!props.user?.name) {\n    return 'N/A';\n  }\n  const nameParts = props.user?.name.split(' ');\n  const letters = nameParts\n    .map((element) => element[0]?.toUpperCase())\n    .slice(0, 2);\n  return letters.join('');\n});\n\nconst letterIndexInAlphabet = computed(() => {\n  const letter = letters.value[0].toUpperCase();\n\n  // Get the ASCII code of the letter\n  const charCode = letter.charCodeAt(0);\n\n  let secondCharCode = 0;\n  if (letters.value.length > 1) {\n    const secondLetter = letters.value[1].toUpperCase();\n    secondCharCode = secondLetter.charCodeAt(0) - 'A'.charCodeAt(0) + 1;\n  }\n\n  // Subtract the ASCII code of 'A' to get the index in the alphabet\n  return charCode - 'A'.charCodeAt(0) + 1 + secondCharCode;\n});\n\nconst backgroundColor = computed(() => {\n  if (!props.user?.name) {\n    return 'gray-500';\n  }\n  return getBackgroundColorByIndex(letterIndexInAlphabet.value);\n});\n\nconst textColorClass = computed(() => {\n  if (!backgroundColor?.value) {\n    return;\n  }\n  if (!props.user) {\n    return 'text-white';\n  }\n\n  const splittedColor = backgroundColor.value.split('-');\n  const hexColor = getHexByColorBrightness(\n    splittedColor[0],\n    splittedColor[1] as ColorBrightness\n  );\n  const textColor = getForeground(hexColor);\n  return textColor === 'black' ? 'text-black' : 'text-white';\n});\n</script>\n"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","props","__props","popoverTimeout","ref","hoverTimeout","isPopoverVisible","isHovering","hoverPopover","leavePanel","closePopover","selectedRollout","getRolloutRelativeLink","useRolloutRouting","fontSize","computed","avatarSize","fontSizeIncreaseFactor","sizeClasses","letters","_a","_b","element","letterIndexInAlphabet","charCode","secondCharCode","backgroundColor","getBackgroundColorByIndex","textColorClass","splittedColor","hexColor","getHexByColorBrightness","getForeground"],"mappings":"snBAEe,SAASA,EAAOC,EAAMC,EAAQ,CAC3C,OAAQC,EAAU,EAAIC,EAAoB,MAAO,CAC/C,MAAO,6BACP,QAAS,YACT,KAAM,eACN,cAAe,OACf,YAAa,MACjB,EAAK,CACDC,EAAoB,OAAQ,CAAE,EAAG,uLAAyL,CAAA,CAC9N,CAAG,CACH,wXCiCA,MAAAC,EAAAC,EAmBAC,EAAAC,EAAA,EACAC,EAAAD,EAAA,EACAE,EAAAF,EAAA,EAAA,EACAG,EAAAH,EAAA,EAAA,EAEAI,EAAA,IAAA,CACEP,EAAA,WAGAI,EAAA,MAAA,WAAA,IAAA,CACEC,EAAA,MAAA,EAAyB,EAAA,GAAA,EACrB,EAGRG,EAAA,IAAA,CACER,EAAA,WAGAM,EAAA,MAAA,GACAG,EAAA,EAAa,EAGfA,EAAA,IAAA,CACET,EAAA,WAIAI,EAAA,OACE,aAAAA,EAAA,KAAA,EAGFF,EAAA,OACE,aAAAA,EAAA,KAAA,EAGFA,EAAA,MAAA,WAAA,IAAA,CACEI,EAAA,QACED,EAAA,MAAA,GACF,EAAA,GAAA,EACI,+sCClER,KAAA,CAAA,gBAAAK,EAAA,uBAAAC,CAAA,EAAAC,EAAA,izBCQA,MAAAZ,EAAAC,EAkBAY,EAAAC,EAAA,IAAA,CACE,MAAAC,EAAA,SAAAf,EAAA,KAAA,EAAA,EACAgB,EAAAhB,EAAA,KAAA,IAAA,EACA,MAAA,GAAAe,EAAAC,CAAA,IAA6C,CAAA,EAG/CC,EAAAH,EAAA,IACE,QAAAd,EAAA,IAAA,EAAyB,EAG3BkB,EAAAJ,EAAA,IAAA,SACE,OAAAK,EAAAnB,EAAA,OAAA,MAAAmB,EAAA,OAGAC,EAAApB,EAAA,OAAA,YAAAoB,EAAA,KAAA,MAAA,MACA,IAAAC,GAAA,OAAA,OAAAF,EAAAE,EAAA,CAAA,IAAA,YAAAF,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,EAGA,KAAA,EAAA,EANE,KAMoB,CAAA,EAGxBG,EAAAR,EAAA,IAAA,CAIE,MAAAS,EAHAL,EAAA,MAAA,CAAA,EAAA,YAAA,EAGA,WAAA,CAAA,EAEA,IAAAM,EAAA,EACA,OAAAN,EAAA,MAAA,OAAA,IAEEM,EADAN,EAAA,MAAA,CAAA,EAAA,YAAA,EACA,WAAA,CAAA,EAAA,GAAA,GAIFK,EAAA,GAAA,EAAAC,CAA0C,CAAA,EAG5CC,EAAAX,EAAA,IAAA,OACE,OAAAK,EAAAnB,EAAA,OAAA,MAAAmB,EAAA,KAGAO,EAAAJ,EAAA,KAAA,EAFE,UAE0D,CAAA,EAG9DK,EAAAb,EAAA,IAAA,CACE,GAAA,EAAAW,GAAA,MAAAA,EAAA,OACE,OAEF,GAAA,CAAAzB,EAAA,KACE,MAAA,aAGF,MAAA4B,EAAAH,EAAA,MAAA,MAAA,GAAA,EACAI,EAAAC,EAAiBF,EAAA,CAAA,EACAA,EAAA,CAAA,CACA,EAGjB,OADAG,EAAAF,CAAA,IACA,QAAA,aAAA,YAA8C,CAAA","x_google_ignoreList":[0]}