{"version":3,"file":"bitts-BittsAvatarStack-CJYkd8iD.js","sources":["../../../packages/bitts/src/BittsAvatarStack/BittsAvatarStack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"tooltipOrDiv\"\n    v-bind=\"tooltipProps\"\n    :style=\"fullComponentWidth\"\n    :class=\"[\n      {\n        'bitts-avatar-stack__transparent': transparent,\n      },\n      `bitts-avatar-stack-${size}`,\n    ]\"\n  >\n    <div class=\"bitts-avatar-stack__org-list h-full\">\n      <div class=\"flex items-center\">\n        <BittsAvatar\n          v-for=\"(org, index) in orgListTruncated\"\n          :key=\"`avatar-stack-org__${org?.id || index}`\"\n          :avatar-classes=\"allAvatarClasses\"\n          :org=\"org\"\n          :alt-text-from-parent=\"org.altTextFromParent\"\n          :image-source=\"org.imageSource\"\n          :custom-svg=\"org.customSvg\"\n          :show-initials=\"org.showInitials\"\n          :style=\"getStyleForAvatar(index)\"\n          :size=\"size\"\n          shape=\"square\"\n          class=\"bitts-avatar-stack__org-list-org\"\n        />\n      </div>\n      <div\n        v-if=\"numberOfOverflowOrgs\"\n        :style=\"styleForOverflowNumber\"\n        class=\"c-bitts-avatar-stack__overflow-number\"\n      >\n        {{ `+${numberOfOverflowOrgs}` }}\n      </div>\n    </div>\n    <template #title>\n      <div class=\"bitts-avatar-stack__tooltip\">\n        <div\n          v-for=\"org in orgList\"\n          :key=\"`avatar-stack-tooltip__${org.id}`\"\n          class=\"bitts-avatar-stack__tooltip-orgs\"\n        >\n          <BittsAvatar\n            :org=\"org\"\n            :avatar-classes=\"tooltipAvatarClasses\"\n            :alt-text-from-parent=\"org.altTextFromParent\"\n            :image-source=\"org.imageSource\"\n            :show-initials=\"org.showInitials\"\n            size=\"x-small\"\n            shape=\"square\"\n            class=\"mr-8\"\n          />\n          {{ org.name }}\n        </div>\n      </div>\n    </template>\n  </component>\n</template>\n\n<script lang=\"ts\" setup>\nimport { StrictExclude } from '@crossbeam/types';\n\nimport { computed } from 'vue';\n\nimport BittsAvatar from '../BittsAvatar/BittsAvatar.vue';\nimport BittsTooltip from '../BittsTooltip/BittsTooltip.vue';\nimport type { Props as BittsTooltipProps } from '../BittsTooltip/BittsTooltip.vue';\nimport { BittsSize } from '../types';\n\ninterface Org {\n  id?: string | number;\n  name?: string;\n  altTextFromParent?: string;\n  imageSource?: string;\n  customSvg?: string;\n  showInitials?: boolean;\n}\n\nexport interface Props {\n  avatarClasses?: string;\n  includeHover?: boolean;\n  orgList?: Org[];\n  size?: StrictExclude<BittsSize, 'x-small' | 'x-large' | 'tiny'>;\n  tooltipAvatarClasses?: string;\n  transparent?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  avatarClasses: '',\n  includeHover: false,\n  /* according to spec, this will only ever be orgs\n   this is coded such that the individual props for each avatar is coded within each org\n   so, a potential org would look like:\n   {\n       ...org,\n       showInitials: {{ is not a record }},\n       altTextForParent: {{ is there nonstandard alt text we want }},\n       ...etc\n   }\n  besides avatarClasses, because we want those to be uniform */\n  orgList: () => [],\n  size: 'small',\n  tooltipAvatarClasses: '',\n  transparent: true,\n});\n\nconst MAX_LENGTH_FOR_TRUNCATED_ORGLIST = 5;\n\nconst ORGLIST_COUNT_TO_LIST_MAP = {\n  // width of the stack itself\n  small: {\n    maxWidth: 104,\n    base: 24,\n  },\n  medium: {\n    maxWidth: 138,\n    base: 34,\n  },\n  large: {\n    maxWidth: 272,\n    base: 68,\n  },\n};\n\nconst OVERLAPPING_ORG_WIDTH = {\n  small: 14,\n  medium: 20,\n  large: 40,\n};\n\nconst SINGLE_DIGIT_LENGTH = 8;\n\nconst allAvatarClasses = computed(() => {\n  return `${props.avatarClasses} bitts-avatar-stack__outline-class`;\n});\n\nconst numberOfOverflowOrgs = computed(() => {\n  if (props.orgList.length > MAX_LENGTH_FOR_TRUNCATED_ORGLIST) {\n    return props.orgList.length - MAX_LENGTH_FOR_TRUNCATED_ORGLIST;\n  }\n  return null;\n});\n\nconst fullComponentWidth = computed(() => {\n  let width =\n    ORGLIST_COUNT_TO_LIST_MAP[props.size].base +\n    (props.orgList.length - 1) * OVERLAPPING_ORG_WIDTH[props.size];\n  if (numberOfOverflowOrgs.value) {\n    width = ORGLIST_COUNT_TO_LIST_MAP[props.size].maxWidth;\n    const overflowNumberDigits = numberOfOverflowOrgs.value\n      .toString()\n      .split('').length;\n    width += overflowNumberDigits * SINGLE_DIGIT_LENGTH;\n  }\n  return {\n    width: `${width}px`,\n  };\n});\n\nconst orgListTruncated = computed(() => {\n  return props.orgList.slice(0, MAX_LENGTH_FOR_TRUNCATED_ORGLIST);\n});\n\nconst multiplierForLeftOffset = computed(() => {\n  if (props.size === 'medium') return -12;\n  if (props.size === 'large') return -24;\n  return -10;\n});\n\nconst styleForOverflowNumber = computed(() => {\n  // this is always going to be 5\n  const indexLength = MAX_LENGTH_FOR_TRUNCATED_ORGLIST;\n  /* we don't want this to overlap like the orgs, so we are moving it over first\n      and then moving back right the length of an overlapped org icon */\n  const leftAmount =\n    indexLength * multiplierForLeftOffset.value +\n    OVERLAPPING_ORG_WIDTH[props.size];\n  return {\n    left: `${leftAmount}px`,\n  };\n});\nconst tooltipOrDiv = computed(() =>\n  props.includeHover ? BittsTooltip : 'div',\n);\n\nconst tooltipProps = computed(() => {\n  const bittsTooltipProps: Partial<BittsTooltipProps> = {};\n  if (props.includeHover) {\n    bittsTooltipProps.placement = 'bottomLeft';\n    bittsTooltipProps.overlayClass = 'bitts-avatar-stack';\n    bittsTooltipProps.mountToBody = true;\n  }\n  return bittsTooltipProps;\n});\n\nfunction getStyleForAvatar(index: number) {\n  // each subsequent avatar needs to be moved to the left proportional to its position\n  const leftAmount = index * multiplierForLeftOffset.value;\n  return {\n    left: `${leftAmount}px`,\n  };\n}\n</script>\n\n<style lang=\"pcss\">\n.bitts-avatar-stack.ant-tooltip {\n  @apply shadow-overlay;\n}\n.bitts-avatar-stack-small {\n  .ant-tooltip-inner {\n    @apply opacity-100 bg-neutral-background-strong;\n  }\n\n  .bitts-avatar-stack__org-list {\n    @apply flex flex-row items-center p-4 pr-0 rounded-bts-sm;\n  }\n\n  .bitts-avatar-stack__org-list-org {\n    @apply relative;\n  }\n\n  .bitts-avatar-stack__outline-class {\n    outline: solid 2px white;\n  }\n\n  .bitts-avatar-stack__tooltip {\n    @apply flex items-center flex-wrap;\n    max-width: 250px;\n  }\n\n  .bitts-avatar-stack__tooltip-orgs {\n    @apply flex items-center mr-8;\n  }\n  .c-bitts-avatar-stack__overflow-number {\n    @apply text-neutral-text-weak relative;\n  }\n}\n\n.bitts-avatar-stack-medium {\n  .bitts-avatar-stack__org-list {\n    @apply flex flex-row items-center p-4 pr-0 rounded-bts-md;\n  }\n  .ant-tooltip-inner {\n    @apply opacity-100 bg-neutral-background-strong;\n  }\n  .bitts-avatar-stack__org-list-org {\n    @apply relative;\n  }\n\n  .bitts-avatar-stack__outline-class {\n    outline: solid 2px white;\n  }\n\n  .bitts-avatar-stack__tooltip {\n    @apply flex items-center flex-wrap;\n    max-width: 250px;\n  }\n\n  .bitts-avatar-stack__tooltip-orgs {\n    @apply flex items-center mr-8;\n  }\n  .c-bitts-avatar-stack__overflow-number {\n    @apply text-neutral-text-weak relative text-m;\n  }\n}\n.bitts-avatar-stack-large {\n  .bitts-avatar-stack__org-list {\n    @apply flex flex-row items-center p-8 pr-0 rounded-bts-lg;\n  }\n  .ant-tooltip-inner {\n    @apply opacity-100 bg-neutral-background-strong;\n  }\n  .bitts-avatar-stack__org-list-org {\n    @apply relative;\n  }\n\n  .bitts-avatar-stack__outline-class {\n    outline: solid 4px white;\n  }\n\n  .bitts-avatar-stack__tooltip {\n    @apply flex items-center flex-wrap;\n    max-width: 250px;\n  }\n  .c-bitts-avatar-stack__overflow-number {\n    @apply text-neutral-text-weak relative text-lg;\n  }\n}\n\n.bitts-avatar-stack__transparent {\n  .bitts-avatar-stack__org-list {\n    @apply p-0 bg-white;\n  }\n}\n\n.bitts-avatar-stack__tooltip-orgs {\n  @apply flex items-center mr-8;\n}\n</style>\n"],"names":["MAX_LENGTH_FOR_TRUNCATED_ORGLIST","SINGLE_DIGIT_LENGTH","props","__props","ORGLIST_COUNT_TO_LIST_MAP","OVERLAPPING_ORG_WIDTH","allAvatarClasses","computed","numberOfOverflowOrgs","fullComponentWidth","width","overflowNumberDigits","orgListTruncated","multiplierForLeftOffset","styleForOverflowNumber","tooltipOrDiv","BittsTooltip","tooltipProps","bittsTooltipProps","getStyleForAvatar","index"],"mappings":"uXA4GMA,EAAmC,EAwBnCC,EAAsB,4OA3C5B,MAAMC,EAAQC,EAqBRC,EAA4B,CAEhC,MAAO,CACL,SAAU,IACV,KAAM,EACR,EACA,OAAQ,CACN,SAAU,IACV,KAAM,EACR,EACA,MAAO,CACL,SAAU,IACV,KAAM,EACR,CAAA,EAGIC,EAAwB,CAC5B,MAAO,GACP,OAAQ,GACR,MAAO,EAAA,EAKHC,EAAmBC,EAAS,IACzB,GAAGL,EAAM,aAAa,oCAC9B,EAEKM,EAAuBD,EAAS,IAChCL,EAAM,QAAQ,OAASF,EAClBE,EAAM,QAAQ,OAASF,EAEzB,IACR,EAEKS,EAAqBF,EAAS,IAAM,CACxC,IAAIG,EACFN,EAA0BF,EAAM,IAAI,EAAE,MACrCA,EAAM,QAAQ,OAAS,GAAKG,EAAsBH,EAAM,IAAI,EAC/D,GAAIM,EAAqB,MAAO,CACtBE,EAAAN,EAA0BF,EAAM,IAAI,EAAE,SAC9C,MAAMS,EAAuBH,EAAqB,MAC/C,SACA,EAAA,MAAM,EAAE,EAAE,OACbE,GAASC,EAAuBV,CAClC,CACO,MAAA,CACL,MAAO,GAAGS,CAAK,IAAA,CACjB,CACD,EAEKE,EAAmBL,EAAS,IACzBL,EAAM,QAAQ,MAAM,EAAGF,CAAgC,CAC/D,EAEKa,EAA0BN,EAAS,IACnCL,EAAM,OAAS,SAAiB,IAChCA,EAAM,OAAS,QAAgB,IAC5B,GACR,EAEKY,EAAyBP,EAAS,KAQ/B,CACL,KAAM,GAPYP,EAIJa,EAAwB,MACtCR,EAAsBH,EAAM,IAAI,CAEb,IAAA,EAEtB,EACKa,EAAeR,EAAS,IAC5BL,EAAM,aAAec,EAAe,KAAA,EAGhCC,EAAeV,EAAS,IAAM,CAClC,MAAMW,EAAgD,CAAA,EACtD,OAAIhB,EAAM,eACRgB,EAAkB,UAAY,aAC9BA,EAAkB,aAAe,qBACjCA,EAAkB,YAAc,IAE3BA,CAAA,CACR,EAED,SAASC,EAAkBC,EAAe,CAGjC,MAAA,CACL,KAAM,GAFWA,EAAQP,EAAwB,KAE9B,IAAA,CAEvB"}