@dialpad/dialtone-vue 3.220.0-next.5 → 3.220.0

package/dist/emoji_picker-tVHfpHDk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_picker-tVHfpHDk.js","names":["$emit","$refs"],"sources":["../components/emoji_picker/modules/emoji_search.vue","../components/emoji_picker/modules/emoji_tabset.vue","../components/emoji_picker/composables/useKeyboardNavigation.js","../components/emoji_picker/modules/emoji_selector.vue","../components/emoji_picker/modules/emoji_skin_selector.vue","../components/emoji_picker/modules/emoji_description.vue","../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n    <dt-input\n      id=\"searchInput\"\n      ref=\"searchInput\"\n      :placeholder=\"searchPlaceholderLabel\"\n      :model-value=\"modelValue\"\n      @update:model-value=\"$emit('update:modelValue', $event)\"\n      @keydown.up=\"$emit('focus-tabset')\"\n      @keydown.down.prevent=\"$emit('focus-emoji-selector')\"\n      @keydown.enter=\"$emit('select-first-emoji')\"\n    >\n      <template #leftIcon>\n        <dt-icon-search\n          size=\"200\"\n        />\n      </template>\n      <template\n        v-if=\"modelValue.length > 0\"\n        #rightIcon\n      >\n        <dt-button\n          importance=\"clear\"\n          size=\"xs\"\n          class=\"d-emoji-picker__search-x-button\"\n          circle\n          kind=\"muted\"\n          @click=\"clearSearch\"\n        >\n          <template #icon>\n            <dt-icon-close\n              size=\"200\"\n            />\n          </template>\n        </dt-button>\n      </template>\n    </dt-input>\n  </div>\n</template>\n\n<script setup>\nimport { DtIconSearch, DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\nimport { onMounted, ref } from 'vue';\n\ndefineProps({\n  searchPlaceholderLabel: {\n    type: String,\n    required: true,\n  },\n  modelValue: {\n    type: String,\n    default: '',\n  },\n});\n\nconst emits = defineEmits(['update:modelValue', 'focus-emoji-selector', 'focus-tabset', 'select-first-emoji']);\n\nconst searchInput = ref(null);\n\nfunction clearSearch () {\n  emits('update:modelValue', '');\n  focusSearchInput();\n}\n\nfunction focusSearchInput () {\n  searchInput.value.focus();\n}\nonMounted(() => {\n  focusSearchInput();\n});\n\ndefineExpose({\n  focusSearchInput,\n});\n</script>\n","<template>\n  <div class=\"d-emoji-picker__tabset\">\n    <dt-tab-group\n      :selected=\"selectedTab\"\n      size=\"sm\"\n      tab-list-class=\"d-emoji-picker__tabset-list\"\n    >\n      <template #tabs>\n        <dt-tab\n          v-for=\"(tab, index) in tabs\"\n          :id=\"tab.id\"\n          :key=\"tab.id\"\n          :ref=\"el => { if (el) setTabsetRef(el) }\"\n          :label=\"tab.label\"\n          :panel-id=\"tab.panelId\"\n          :tabindex=\"index + 1\"\n          aria-controls=\"d-emoji-picker-list\"\n          @keydown=\"handleKeyDown($event, tab.id)\"\n          @click.capture.stop=\"selectTabset(tab.id)\"\n        >\n          <component\n            :is=\"tab.icon\"\n            size=\"400\"\n          />\n        </dt-tab>\n      </template>\n    </dt-tab-group>\n  </div>\n</template>\n\n<script setup>\nimport { computed, ref, watch } from 'vue';\nimport { DtTab, DtTabGroup } from '@/components/tab';\nimport { returnFirstEl } from '@/common/utils';\nimport {\n  DtIconClock,\n  DtIconSatisfied,\n  DtIconLivingThing,\n  DtIconFood,\n  DtIconObject,\n  DtIconTransportation,\n  DtIconLightbulb,\n  DtIconHeart,\n  DtIconFlag,\n  DtIconDialpadStar,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst props = defineProps({\n  /**\n   * Whether to show the recently used tab or not\n   * @type {Boolean}\n   * @default false\n   */\n  showRecentlyUsedTab: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n   * Whether to show the custom emojis tab or not\n   * @type {Boolean}\n   * @default false\n   */\n  showCustomEmojisTab: {\n    type: Boolean,\n    default: false,\n  },\n\n  scrollIntoTab: {\n    type: Number,\n    required: true,\n  },\n\n  emojiFilter: {\n    type: String,\n    default: '',\n  },\n\n  /**\n   * The labels for the aria-label\n   * @type {Array}\n   * @required\n   */\n  tabSetLabels: {\n    type: Array,\n    required: true,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n   * Emitted when a tab is selected\n   * @event selected-tabset\n   * @param {String} tabId - The name of the tab that was selected\n   */\n  'selected-tabset',\n\n  'focus-search-input',\n  'focus-skin-selector',\n]);\n\nconst TABS_DATA = [\n  { label: props.tabSetLabels[0], icon: DtIconClock },\n  { label: props.tabSetLabels[1], icon: DtIconSatisfied },\n  { label: props.tabSetLabels[2], icon: DtIconLivingThing },\n  { label: props.tabSetLabels[3], icon: DtIconFood },\n  { label: props.tabSetLabels[4], icon: DtIconObject },\n  { label: props.tabSetLabels[5], icon: DtIconTransportation },\n  { label: props.tabSetLabels[6], icon: DtIconLightbulb },\n  { label: props.tabSetLabels[7], icon: DtIconHeart },\n  { label: props.tabSetLabels[8], icon: DtIconFlag },\n  { label: props.tabSetLabels[9], icon: DtIconDialpadStar },\n];\n\nconst tabs = computed(() => {\n  const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);\n  // if showCustomEmojisTab is false remove last index of TABS_DATA\n  if (!props.showCustomEmojisTab) {\n    tabsData.pop();\n  }\n\n  return tabsData.map((tab, index) => ({\n    ...tab,\n    // IDs on dt-tab component need to be on string\n    id: (index + 1).toString(),\n    panelId: (index + 1).toString(),\n  }));\n});\n\nconst isSearching = computed(() => props.emojiFilter.length > 0);\n\nconst selectedTab = ref('1');\n\nconst tabsetRef = ref([]);\n\nwatch(() => props.scrollIntoTab,\n  () => {\n    if (!isSearching.value) {\n      selectedTab.value = (props.scrollIntoTab + 1).toString();\n    }\n  });\n\nwatch(isSearching,\n  () => {\n    if (isSearching.value) {\n      selectedTab.value = null;\n    }\n  });\n\n/**\n * We are using .capture.stop modifiers on the click event\n * because we don't want to trigger the click event of the\n * dt-tab component\n */\nfunction selectTabset (id) {\n  // IDs on scrollToTab need to be on number\n  const parseId = parseInt(id);\n  // IDs on dt-tab component need to be on string\n  selectedTab.value = id;\n  emits('selected-tabset', parseId);\n}\n\nfunction setTabsetRef (ref) {\n  // We push the $el, because $el is the button inside the dt-tab component\n  // and we need the button to focus it\n  tabsetRef.value.push(returnFirstEl(ref.$el));\n}\n\nfunction focusTabset () {\n  tabsetRef.value[0].focus();\n}\n\nfunction handleKeyDown (event, tabId) {\n  if (event.key === 'Enter') {\n    selectTabset(tabId);\n    // We blur because seems like the tab component override the selected prop, and it removes the selected style\n    tabsetRef.value[tabId - 1].blur();\n  }\n\n  if (event.key === 'Tab') {\n    event.preventDefault();\n    if (event.shiftKey) {\n      emits('focus-skin-selector');\n    } else {\n      emits('focus-search-input');\n    }\n  }\n\n  if (event.key === 'ArrowDown') {\n    // Jump to search input\n    emits('focus-search-input');\n  }\n}\n\ndefineExpose({\n  focusTabset,\n});\n</script>\n","import { ref } from 'vue';\nimport { EMOJIS_PER_ROW, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport function useKeyboardNavigation () {\n  const emojiRefs = ref([]);\n  const emojiFilteredRefs = ref([]);\n  const isFiltering = ref(false);\n  const hoverFirstEmoji = ref(true);\n\n  function _handleArrowLeft (indexTab, indexEmoji) {\n    if (!focusEmoji(indexTab, indexEmoji - 1)) {\n      if (emojiRefs.value[indexTab - 1]) {\n        focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);\n      } else {\n        focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);\n      }\n    }\n  }\n\n  function _handleArrowRight (indexTab, indexEmoji) {\n    if (!focusEmoji(indexTab, indexEmoji + 1)) {\n      if (!focusEmoji(indexTab + 1, 0)) {\n        focusEmoji(0, 0);\n      }\n    }\n  }\n\n  function _handleArrowLeftFiltered (indexTab, indexEmoji) {\n    if (!focusEmoji(0, indexEmoji - 1)) {\n      focusEmoji(0, emojiFilteredRefs.value.length - 1);\n    }\n  }\n\n  function _handleArrowRightFiltered (indexTab, indexEmoji) {\n    if (!focusEmoji(0, indexEmoji + 1)) {\n      focusEmoji(0, 0);\n    }\n  }\n\n  function _handleHorizontalNavigation (direction, indexTab, indexEmoji) {\n    if (isFiltering.value) {\n      if (direction === 'left') {\n        _handleArrowLeftFiltered(indexTab, indexEmoji);\n      } else if (direction === 'right') {\n        _handleArrowRightFiltered(indexTab, indexEmoji);\n      }\n    } else {\n      if (direction === 'left') {\n        _handleArrowLeft(indexTab, indexEmoji);\n      } else if (direction === 'right') {\n        _handleArrowRight(indexTab, indexEmoji);\n      }\n    }\n  }\n\n  function focusEmoji (indexTab, indexEmoji) {\n    const emojiRef = isFiltering.value\n      ? emojiFilteredRefs.value?.[indexEmoji]\n      : emojiRefs.value?.[indexTab]?.[indexEmoji];\n\n    if (emojiRef) {\n      emojiRef.focus();\n      return true;\n    }\n\n    return false;\n  }\n\n  function setEmojiRef (el, indexTab, indexEmoji) {\n    if (!emojiRefs.value[indexTab]) {\n      emojiRefs.value[indexTab] = [];\n    }\n    emojiRefs.value[indexTab][indexEmoji] = el;\n  }\n\n  function setFilteredRef (el, index) {\n    emojiFilteredRefs.value[index] = el;\n  }\n\n  function handleArrowNavigationFiltered (key, indexEmoji) {\n    hoverFirstEmoji.value = false;\n\n    if (key === ARROW_KEYS.ARROW_UP) {\n      const position = indexEmoji % EMOJIS_PER_ROW;\n\n      if (!focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {\n        const lastEmojiPosition =\n        emojiFilteredRefs.value.length - (emojiFilteredRefs.value.length % EMOJIS_PER_ROW) + position;\n\n        focusEmoji(0, lastEmojiPosition);\n\n        if (!focusEmoji(0, lastEmojiPosition)) {\n          focusEmoji(0, emojiFilteredRefs.value.length - 1);\n        }\n      }\n    }\n\n    if (key === ARROW_KEYS.ARROW_DOWN) {\n      if (!focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {\n        const position = indexEmoji % EMOJIS_PER_ROW;\n\n        if (emojiFilteredRefs.value?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n          focusEmoji(0, emojiFilteredRefs.value.length - 1);\n        } else {\n          focusEmoji(0, position);\n        }\n      }\n    }\n\n    if (key === ARROW_KEYS.ARROW_LEFT) {\n      _handleHorizontalNavigation('left', 0, indexEmoji);\n    }\n\n    if (key === ARROW_KEYS.ARROW_RIGHT) {\n      _handleHorizontalNavigation('right', 0, indexEmoji);\n    }\n  }\n\n  function handleArrowNavigation (key, indexTab, indexEmoji) {\n    if (key === 'ArrowUp') {\n      const position = indexEmoji % EMOJIS_PER_ROW;\n\n      if (indexTab === 0) {\n      // we are on the first emoji tab, then we should jump to the last row of the last emoji tab\n        const numberOfMissingEmojis =\n        EMOJIS_PER_ROW - (emojiRefs.value[emojiRefs.value.length - 1].length % EMOJIS_PER_ROW);\n\n        const emojiToJump =\n        emojiRefs.value[emojiRefs.value.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);\n\n        if (!focusEmoji(emojiRefs.value.length - 1, emojiToJump)) {\n        // if there is no emoji in this position, jump to the last emoji of the row\n          focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);\n        }\n        return;\n      }\n\n      // if we are not on the first tab, we should jump to the previous row of the current tab\n      if (!focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {\n      // if there is no previous row, we should jump to emoji in the sampe position of the previous tab\n        const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;\n        const emojisInPreviousTab = emojiRefs.value[previousTab].length;\n        const lastEmojiPosition = emojisInPreviousTab - (emojisInPreviousTab % EMOJIS_PER_ROW) + position;\n\n        if (!focusEmoji(previousTab, lastEmojiPosition)) {\n        // if there is no emoji in this position, jump to the last emoji of the row\n          focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);\n        }\n      }\n    }\n\n    if (key === 'ArrowDown') {\n      if (!focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {\n      // if cannot go down\n\n        // Calculate position from cell 0 to cell 8\n        const position = indexEmoji % EMOJIS_PER_ROW;\n\n        // check if it exists a next row in the current tab\n        if (emojiRefs.value?.[indexTab]?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n        // if it exists, we should focus the last emoji of the next row in the current tab\n          focusEmoji(indexTab, emojiRefs.value[indexTab].length - 1);\n        // if we are at the end of the list it will do nothing\n        } else {\n        // We don't have next row, we are in the last of the tab, then jump\n        // to the next tab but in the equal emoji position in row 0.\n\n          if (!focusEmoji(indexTab + 1, position)) {\n          // We are on the bottom!, should jump to the same position emoji in the first row of the first tabset\n          // if it doesn't has, jump to the last\n            if (!focusEmoji(0, position)) {\n              focusEmoji(0, emojiRefs.value[0].length - 1);\n            }\n          }\n        }\n      }\n    }\n\n    if (key === 'ArrowLeft') {\n      _handleHorizontalNavigation('left', indexTab, indexEmoji);\n    }\n\n    if (key === 'ArrowRight') {\n      _handleHorizontalNavigation('right', indexTab, indexEmoji);\n    }\n  }\n\n  return {\n    emojiFilteredRefs,\n    isFiltering,\n    hoverFirstEmoji,\n    setEmojiRef,\n    setFilteredRef,\n    focusEmoji,\n    handleArrowNavigationFiltered,\n    handleArrowNavigation,\n  };\n}\n","<template>\n  <div\n    class=\"d-emoji-picker__selector\"\n  >\n    <div\n      id=\"d-emoji-picker-list\"\n      ref=\"listRef\"\n      class=\"d-emoji-picker__list\"\n    >\n      <p\n        v-if=\"emojiFilter\"\n        class=\"d-emoji-picker__search-label d-emoji-picker__alignment\"\n      >\n        {{ filteredEmojis.length > 0 ? searchResultsLabel : searchNoResultsLabel }}\n      </p>\n      <div\n        v-else\n        ref=\"tabCategoryRef\"\n        class=\"d-emoji-picker__category d-emoji-picker__alignment\"\n      >\n        <p>\n          {{ fixedLabel }}\n        </p>\n      </div>\n      <div\n        v-for=\"(tabLabel, indexTab) in tabLabels\"\n        v-show=\"!emojiFilter\"\n        :key=\"indexTab\"\n        :ref=\"tabLabel.ref\"\n        class=\"d-emoji-picker__alignment\"\n      >\n        <p\n          v-if=\"indexTab\"\n        >\n          {{ tabLabel.label }}\n        </p>\n        <div\n          class=\"d-emoji-picker__tab\"\n        >\n          <button\n            v-for=\"(emoji, indexEmoji) in\n            (emojis[tabs[indexTab] + skinTone] ? emojis[tabs[indexTab] + skinTone] : emojis[tabs[indexTab]])\"\n            :key=\"emoji.shortname\"\n            :ref=\"el => { if (el) setEmojiRef(el, indexTab, indexEmoji) }\"\n            type=\"button\"\n            :aria-label=\"emoji.name\"\n            @click=\"event => selectEmoji(emoji, event)\"\n            @focusin=\"highlightEmoji(emoji)\"\n            @focusout=\"highlightEmoji(null)\"\n            @mouseover=\"highlightEmoji(emoji)\"\n            @mouseleave=\"highlightEmoji(null)\"\n            @keydown=\"event => handleKeyDown(event, indexTab, indexEmoji, emoji)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"emoji.name\"\n              :aria-label=\"emoji.name\"\n              :title=\"emoji.name\"\n              :src=\"getImgSrc(emoji)\"\n              @error=\"handleImageError\"\n            >\n          </button>\n        </div>\n      </div>\n      <div\n        v-if=\"emojiFilter\"\n        class=\"d-emoji-picker__alignment\"\n      >\n        <div\n          class=\"d-emoji-picker__tab \"\n          data-qa=\"filtered-emojis\"\n        >\n          <button\n            v-for=\"(emoji, index) in filteredEmojis\"\n            :key=\"emoji.shortname\"\n            :ref=\"el => { if (el) setFilteredRef(el, index) }\"\n            type=\"button\"\n            :aria-label=\"emoji.name\"\n            :class=\"{\n              'hover-emoji': (index === 0 && hoverFirstEmoji),\n            }\"\n            @click=\"event => selectEmoji(emoji, event)\"\n            @focusin=\"highlightEmoji(emoji)\"\n            @focusout=\"highlightEmoji(null)\"\n            @mouseover=\"hoverEmoji(emoji)\"\n            @mouseleave=\"hoverEmoji(null)\"\n            @keydown=\"event => handleKeyDownFilteredEmojis(event, index, emoji)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"emoji.name\"\n              :aria-label=\"emoji.name\"\n              :title=\"emoji.name\"\n              :src=\"`${CDN_URL + emoji.unicode_character}.png`\"\n            >\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\n/* eslint-disable max-lines */\nimport { emojisGrouped as emojis } from '@dialpad/dialtone-emojis';\nimport { computed, onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue';\nimport { CDN_URL, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\nimport { useKeyboardNavigation } from '@/components/emoji_picker/composables/useKeyboardNavigation';\n\nconst props = defineProps({\n  /**\n   * The filter to apply to the emoji list\n   * @type {String}\n   * @default ''\n   */\n  emojiFilter: {\n    type: String,\n    default: '',\n  },\n\n  /**\n   * The skin tone to apply to the emoji list\n   * @type {String}\n   * @required\n   */\n  skinTone: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The labels for the tabset\n   * @type {Array}\n   * @required\n   */\n  tabsetLabels: {\n    type: Array,\n    required: true,\n  },\n\n  selectedTabset: {\n    type: Object,\n    required: true,\n  },\n\n  /**\n   * The label for the search results tab\n   * @type {String}\n   * @required\n   */\n  searchResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  searchNoResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The list of recently used emojis\n   * @type {Array}\n   */\n  recentlyUsedEmojis: {\n    type: Array,\n    default: () => [],\n  },\n\n  /**\n   * The list of custom emojis\n   * @type {Array}\n   */\n  customEmojis: {\n    type: Array,\n    default: () => [],\n  },\n});\n\nconst emits = defineEmits([\n  /**\n   * Emitted when the user hover over an emoji\n   * @event highlighted-emoji\n   * @param {Object} emoji - The emoji data that was hovered\n    */\n  'highlighted-emoji',\n\n  /**\n   * Emitted when the user select an emoji\n   * @event selected-emoji\n   * @param {Object} emoji - The emoji data that was selected\n    */\n  'selected-emoji',\n\n  /**\n   * Emitted when the user scroll into an emoji tab\n   * @event scroll-into-tab\n   * @param {Number} tab-index - The tab that was scrolled into\n    */\n  'scroll-into-tab',\n\n  /**\n   * Emitted when the user reach bottom scroll\n   * This event is used on handleScroll method\n   * @event scroll-bottom-reached\n   */\n  'scroll-bottom-reached',\n\n  /**\n   * Emitted when the user reach the end of the emoji list\n   * @event focus-skin-selector\n    */\n  'focus-skin-selector',\n\n  /**\n   * Emitted when the user shift tab in first tab of emoji selector\n   * @event focus-search-input\n    */\n  'focus-search-input',\n]);\n\nconst {\n  emojiFilteredRefs,\n  isFiltering,\n  hoverFirstEmoji,\n  setEmojiRef,\n  setFilteredRef,\n  focusEmoji,\n  handleArrowNavigationFiltered,\n  handleArrowNavigation,\n} = useKeyboardNavigation();\n\n/**\n * The ref for the tab category\n * This is used to display the fixed label\n */\nconst tabCategoryRef = ref(null);\n\n/**\n * The ref for the list\n * This is used to display the tabs\n */\nconst listRef = ref(null);\n\n/**\n * The ref for the tab label observer\n * This is used to update the fixed label\n */\nconst tabLabelObserver = ref(null);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n */\nconst TABS_DATA = ['Recently used', 'People', 'Nature', 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags', 'Custom'];\n\n/**\n * The list of tab labels\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis or custom emojis list is empty\n * If it is empty, it will remove it\n */\nconst tabLabels = computed(() => {\n  let updateTabLabels = props.tabsetLabels.map((label) => ({ label, ref: ref(null) }));\n\n  if (props.recentlyUsedEmojis && !props.recentlyUsedEmojis.length) {\n    updateTabLabels = props.tabsetLabels.slice(1).map((label) => ({ label, ref: ref(null) }));\n  }\n\n  if (props.customEmojis && !props.customEmojis.length) {\n    updateTabLabels.pop();\n  }\n\n  return updateTabLabels;\n});\n\n/**\n * The label of the fixed tab\n * This is used to display the fixed label\n */\nconst fixedLabel = ref(tabLabels.value[0].label);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list or custom emojis is empty\n * If it is empty, it will remove it\n * The difference between this and the tab labels is that this one will set the structure of tabs\n * and the tab labels will set the labels\n */\nconst tabs = computed(() => {\n  const updateTabsOrder = props.recentlyUsedEmojis.length ? TABS_DATA.slice() : TABS_DATA.slice(1);\n\n  if (props.customEmojis && !props.customEmojis.length) {\n    updateTabsOrder.pop();\n  }\n\n  return updateTabsOrder;\n});\n\n/**\n * The list of current emojis that match the filter\n * This will be updated when the emojiFilter changes\n * This is used to display the search results\n * The difference between this and the current emojis list is that this one will not have the skin tone applied\n */\nconst filteredEmojis = ref([]);\n\n/**\n * The current emojis list we are displaying\n * This will be updated when the skin tone changes\n * The difference between this and the emojis list is that this one will have only the skin tone applied\n */\nconst currentEmojis = computed(() => {\n  return [\n    ...emojis[`People${props.skinTone}`],\n    ...emojis.Nature,\n    ...emojis.Food,\n    ...emojis[`Activity${props.skinTone}`],\n    ...emojis.Travel,\n    ...emojis[`Objects${props.skinTone}`],\n    ...emojis.Symbols,\n    ...emojis.Flags,\n  ];\n});\n\n/**\n * This will trigger the searchByNameAndKeywords function with debounce of 300 milliseconds\n */\nconst debouncedSearch = debounce(() => {\n  // We clean the emojiFilteredRefs to have an updated ref list for the search results\n  emojiFilteredRefs.value = [];\n  searchByNameAndKeywords();\n});\n\n/**\n * handleScroll will be defined when user scroll\n */\nconst handleScroll = () => {\n  const container = listRef.value;\n  // TODO -- this will probably need to be updated if we add more emojis.\n  // because the container height will change.\n  // maybe with a nextTick similar of scrollToTab.\n  if (container.scrollTop + container.clientHeight >= container.scrollHeight) {\n    emits('scroll-bottom-reached');\n  }\n};\n\n/**\n * Update the current emojis list on skin tone changes\n * Also update the filtered emojis list\n * @listens skinTone\n */\nwatch(currentEmojis, () => {\n  searchByNameAndKeywords();\n}, { immediate: true });\n\n/**\n * Update the recently used emojis list on recently used emojis prop changes\n * @listens recentlyUsedEmojis\n */\nwatch(() => props.recentlyUsedEmojis,\n  () => {\n    emojis['Recently used'] = props.recentlyUsedEmojis;\n  }, { immediate: true });\n\n/**\n * Update the custom emojis list on custom emojis prop changes\n * @listens customEmojis\n */\nwatch(() => props.customEmojis,\n  () => {\n    emojis.Custom = props.customEmojis;\n  }, { immediate: true });\n\n/**\n * Search for emojis by name and keywords\n * Will update the filtered emojis list on emojiFilter update\n * @listens emojiFilter\n */\nwatch(() => props.emojiFilter, () => {\n  resetScroll();\n  if (props.emojiFilter) {\n    isFiltering.value = true;\n  } else {\n    isFiltering.value = false;\n    // If the emoji filter is empty, emit null to remove the highlighted emoji\n    // of the previous search\n    highlightEmoji(null);\n  }\n  debouncedSearch();\n});\n\nwatch(\n  () => props.selectedTabset,\n  (tab) => {\n    scrollToTab(tab.tabId);\n  },\n  { deep: true },\n);\n\nfunction hoverEmoji (emoji, isFirst = false) {\n  hoverFirstEmoji.value = isFirst;\n  emits('highlighted-emoji', emoji);\n}\n\n/**\n * Filters an array of emoji objects based on a search string that matches both the name and keywords.\n * Will update the filtered emojis list\n */\nfunction searchByNameAndKeywords () {\n  const searchStr = props.emojiFilter.toLowerCase();\n  filteredEmojis.value = currentEmojis.value.filter(obj => {\n    const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);\n    const keywordsIncludeSearchStr = obj.keywords.some(keyword => keyword.toLowerCase().includes(searchStr));\n    return nameIncludesSearchStr || keywordsIncludeSearchStr;\n  });\n  nextTick(() => {\n    if (searchStr) {\n      hoverEmoji(filteredEmojis.value[0], true);\n    }\n  });\n}\n\nfunction debounce (fn, delay = 300) {\n  let timeout;\n\n  return (...args) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => fn(...args), delay);\n  };\n}\n\nfunction getImgSrc (emoji) {\n  // TODO Update json structure to have a property for custom emojis and avoid using date_added\n  if (emoji.date_added) { // if custom emoji\n    return emoji.image;\n  } else { // if regular emoji\n    return CDN_URL + emoji.unicode_character + '.png';\n  }\n}\n\n/**\n * Handle image error - We hide the entire button if the image is not found\n */\nfunction handleImageError (event) {\n  event.target.parentNode.style.display = 'none';\n}\n\n/**\n * Scroll to the selected tab\n */\nfunction scrollToTab (tabIndex, focusFirstEmoji = true) {\n  const tabLabel = tabLabels.value[tabIndex - 1];\n  const tabElement = tabLabel.ref.value[0];\n\n  nextTick(() => {\n    const container = listRef.value;\n    const offsetTop = tabIndex === 1 ? 0 : tabElement.offsetTop - 15;\n\n    container.scrollTop = offsetTop;\n\n    if (focusFirstEmoji) {\n      focusEmoji((tabIndex - 1), 0);\n    }\n  });\n}\n\nfunction resetScroll () {\n  const container = listRef.value;\n\n  container.scrollTop = 0;\n}\n\nfunction setBottomScrollListener () {\n  listRef.value.addEventListener('scroll', handleScroll);\n}\n\n/**\n * This code creates an IntersectionObserver object that monitors the intersection between\n * the root element (tabCategoryRef) and its targets (the child elements of listRef),\n * and updates the value of the fixedLabel variable accordingly.\n */\nfunction setTabLabelObserver () {\n  /**\n   * The code extracts the target element and its index from the IntersectionObserverEntry object,\n   * and checks whether the target intersects with the root and is positioned above or below it.\n   */\n  tabLabelObserver.value = new IntersectionObserver(async (entries) => {\n    // eslint-disable-next-line complexity\n    entries.forEach(entry => {\n      const { target } = entry;\n      const index = parseInt(target.dataset.index);\n\n      /**\n       * If the target is positioned above the root,\n       * the code updates the value of the fixed label to the label of the previous tab,\n       * or the first tab if the current tab is the first one. If the target is positioned below the root, the code\n       * updates the value of the fixed label to the label of the current tab.\n       * If the target stops intersecting with the root and its index is 1 (the second tab),\n       * the code updates the value of the fixed label to the label of the first tab.\n       * NOTES:\n       * This last condition is needed because sometimes it is\n       * not detect the intersection between the root and the target.\n       * We also provide a 50 pixels offset to the root element in the first condition to always get the\n       * first tab if it has fewer emojis, because in some cases if you quickly scroll the observer does not detect it.\n       */\n      if (entry.isIntersecting && target.offsetTop <= tabCategoryRef.value.offsetTop + 50) {\n        fixedLabel.value = tabLabels.value[index - 1]?.label ?? tabLabels.value[0]?.label;\n        emits('scroll-into-tab', index - 1);\n      } else if (entry.boundingClientRect.bottom <= tabCategoryRef.value?.getBoundingClientRect().bottom) {\n        emits('scroll-into-tab', index);\n        fixedLabel.value = tabLabels.value[index]?.label;\n      } else if (index === 1) {\n        emits('scroll-into-tab', index);\n        fixedLabel.value = tabLabels.value[0]?.label;\n      }\n    });\n  });\n\n  /**\n   * The tabLabelObserver is set to observe the root element and all its children elements with\n   * the IntersectionObserver object, and sets their data-index attribute to their index.\n   */\n  tabLabelObserver.value.observe(tabCategoryRef.value);\n\n  Array.from(listRef.value.children).forEach((child, index) => {\n    tabLabelObserver.value.observe(child);\n    child.dataset.index = index;\n  });\n}\n\nconst handleKeyDownFilteredEmojis = (event, indexEmoji, emoji) => {\n  event.preventDefault();\n\n  if (Object.values(ARROW_KEYS).includes(event.key)) {\n    handleArrowNavigationFiltered(event.key, indexEmoji);\n    return;\n  }\n\n  switch (event.key) {\n    case 'Tab':\n      emits('focus-skin-selector');\n      break;\n    case 'Enter':\n      selectEmoji(emoji, event);\n      break;\n    default:\n      break;\n  }\n};\n\n \nconst handleKeyDown = (event, indexTab, indexEmoji, emoji) => {\n  event.preventDefault();\n\n  if (Object.values(ARROW_KEYS).includes(event.key)) {\n    handleArrowNavigation(event.key, indexTab, indexEmoji);\n    return;\n  }\n\n  switch (event.key) {\n    case 'Tab':\n      if (event.shiftKey) {\n        if (focusEmoji(indexTab, 0) && indexTab > 0) {\n          scrollToTab(indexTab, true);\n        } else {\n          scrollToTab(1, false);\n          emits('focus-search-input');\n        }\n      } else {\n        if (focusEmoji(indexTab + 1, 0)) {\n          scrollToTab(indexTab + 1 + 1, false);\n        } else {\n          // We are on the last emoji tabset, jump to the skin selector\n          emits('focus-skin-selector');\n        }\n      }\n      break;\n\n    case 'Enter':\n      selectEmoji(emoji, event);\n      break;\n\n    default:\n      break;\n  }\n};\n\nfunction selectEmoji (emoji, event) {\n  emits('selected-emoji', { ...emoji, shift_key: event.shiftKey });\n}\n\nfunction highlightEmoji (emoji) {\n  emits('highlighted-emoji', emoji);\n}\n\nfunction focusEmojiSelector () {\n  focusEmoji(0, 0);\n}\n\nfunction focusLastEmoji () {\n  scrollToTab(tabs.value.length, true);\n}\n\nonMounted(() => {\n  setTabLabelObserver();\n  setBottomScrollListener();\n});\n\nonBeforeUnmount(() => {\n  tabLabelObserver.value.disconnect();\n  listRef.value.removeEventListener('scroll', handleScroll);\n});\n\ndefineExpose({\n  focusEmojiSelector,\n  focusLastEmoji,\n});\n</script>\n","<template>\n  <div data-qa=\"skin-selector\">\n    <div\n      v-show=\"isOpen\"\n      class=\"d-emoji-picker__skin-list\"\n    >\n      <button\n        v-for=\"(skin, index) in skinList\"\n        :ref=\"el => { if (el) setSkinsRef(el) }\"\n        :key=\"skin.name\"\n        :class=\"{\n          'selected': skinSelected.skinCode === skin.skinCode,\n        }\"\n        @keydown=\"event => handleKeyDown(event, skin, index)\"\n        @click=\"selectSkin(skin)\"\n      >\n        <img\n          class=\"d-icon d-icon--size-500\"\n          :alt=\"skin.name\"\n          :aria-label=\"skin.name\"\n          :title=\"skin.name\"\n          :src=\"`${CDN_URL + skin.unicode_output}.png`\"\n        >\n      </button>\n    </div>\n    <div\n      v-show=\"!isOpen\"\n      class=\"d-emoji-picker__skin-selected\"\n    >\n      <dt-tooltip placement=\"top-end\">\n        {{ skinSelectorButtonTooltipLabel }}\n        <template #anchor>\n          <button\n            ref=\"skinSelectorRef\"\n            :aria-label=\"skinSelectorButtonTooltipLabel\"\n            tabindex=\"-1\"\n            @click=\"toggleSkinList\"\n            @keydown=\"event => handleKeyDown(event)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"skinSelected.name\"\n              :aria-label=\"skinSelected.name\"\n              :title=\"skinSelected.name\"\n              :src=\"`${CDN_URL + skinSelected.unicode_output}.png`\"\n            >\n          </button>\n        </template>\n      </dt-tooltip>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed, nextTick, ref, watchEffect } from 'vue';\nimport { CDN_URL, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from '@/components/emoji_picker/emoji_picker_constants.js';\nimport { DtTooltip } from '@/components/tooltip';\n\nconst props = defineProps({\n  /**\n   * The skin tone to apply to the emoji list\n   * @type {String}\n   * @required\n   */\n  skinTone: {\n    type: String,\n    required: true,\n  },\n\n  isHovering: {\n    type: Boolean,\n    default: false,\n  },\n\n  skinSelectorButtonTooltipLabel: {\n    type: String,\n    required: true,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n   * The skin tone that was selected\n   * @event skin-tone\n   * @type {Number}\n   */\n  'skin-tone',\n  'focus-tabset',\n  'focus-last-emoji',\n]);\n\nconst skinList = [\n  {\n    name: ':wave_tone1:',\n    unicode_output: '1f44b-1f3fb',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,\n    skinCode: '_tone1',\n  },\n  {\n    name: ':wave_tone2:',\n    unicode_output: '1f44b-1f3fc',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,\n    skinCode: '_tone2',\n  },\n  {\n    name: ':wave_tone3:',\n    unicode_output: '1f44b-1f3fd',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,\n    skinCode: '_tone3',\n  },\n  {\n    name: ':wave_tone4:',\n    unicode_output: '1f44b-1f3fe',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,\n    skinCode: '_tone4',\n  },\n  {\n    name: ':wave_tone5:',\n    unicode_output: '1f44b-1f3ff',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,\n    skinCode: '_tone5',\n  },\n  {\n    name: ':wave:',\n    unicode_output: '1f44b',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,\n    skinCode: '',\n  },\n];\n\nconst isOpen = ref(false);\n\nconst skinSelectorRef = ref(null);\n\nconst skinsRef = ref([]);\n\n/**\n * It will close the skin selector if the user is hovering over the emoji list\n */\nwatchEffect(\n  () => props.isHovering && (isOpen.value = false),\n);\n\n/**\n * It will initially display props.skinTone. If a new skin tone is selected,\n * it will display that until props.skinTone changes.\n */\nconst skinPassedIn = computed(() => skinList.find((skin) => skin.skinTone === props.skinTone));\nconst skinSelected = ref(skinPassedIn.value);\nwatchEffect(() => skinPassedIn.value && (skinSelected.value = skinPassedIn.value));\n\nfunction setSkinsRef (ref) {\n  skinsRef.value.push(ref);\n}\nfunction focusSkinSelector () {\n  skinSelectorRef.value.focus();\n}\n\nfunction selectSkin (skin) {\n  skinSelected.value = skin;\n  isOpen.value = false;\n  emits('skin-tone', skin.skinTone);\n  nextTick(() => focusSkinSelector());\n}\n\nconst handleKeyDown = (event, skin, index) => {\n  event.preventDefault();\n\n  if (event.key === 'ArrowLeft') {\n    if (index === 0) skinsRef.value[skinsRef.value.length - 1]?.focus();\n    skinsRef.value[index - 1]?.focus();\n  }\n\n  if (event.key === 'ArrowRight') {\n    skinsRef.value[index + 1]?.focus();\n  }\n\n  if (event.key === 'Enter') {\n    if (skin) { selectSkin(skin); } else {\n      toggleSkinList();\n    }\n  }\n\n  if (event.key === 'Tab') {\n    if (event.shiftKey) {\n      emits('focus-last-emoji');\n    } else {\n      emits('focus-tabset');\n    }\n  }\n};\n\nfunction toggleSkinList () {\n  isOpen.value = !isOpen.value;\n  nextTick(() => skinsRef.value[0].focus());\n}\n\ndefineExpose({\n  focusSkinSelector,\n});\n</script>\n","<template>\n  <div class=\"d-emoji-picker__data\">\n    <img\n      v-if=\"emoji\"\n      class=\"d-icon d-icon--size-500\"\n      :alt=\"emoji.name\"\n      :aria-label=\"emoji.name\"\n      :title=\"emoji.name\"\n      :src=\"getImgSrc(emoji)\"\n    >\n    <div>{{ emoji?.name }}</div>\n  </div>\n</template>\n\n<script setup>\nimport { CDN_URL } from '@/components/emoji_picker/emoji_picker_constants';\n\ndefineProps({\n  /**\n   * Emoji data\n   * @type {Object}\n   * @default null\n   */\n  emoji: {\n    type: Object,\n    default: null,\n  },\n});\n\nfunction getImgSrc (emoji) {\n  if (emoji.date_added) { // if custom emoji\n    return emoji.image;\n  } else { // if regular emoji\n    return `${CDN_URL + emoji.unicode_character}.png`;\n  }\n}\n</script>\n","<template>\n  <div\n    class=\"d-emoji-picker\"\n  >\n    <div class=\"d-emoji-picker--header\">\n      <emoji-tabset\n        ref=\"tabsetRef\"\n        :emoji-filter=\"internalSearchQuery\"\n        :show-custom-emojis-tab=\"showCustomEmojisTab\"\n        :show-recently-used-tab=\"showRecentlyUsedTab\"\n        :scroll-into-tab=\"scrollIntoTab\"\n        :tab-set-labels=\"tabSetLabels\"\n        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch\n          ? $refs.searchInputRef.focusSearchInput()\n          : $refs.emojiSelectorRef.focusEmojiSelector()\"\n        @selected-tabset=\"scrollToSelectedTabset\"\n        @keydown.esc=\"emits('close')\"\n      />\n    </div>\n    <div class=\"d-emoji-picker--body\">\n      <emoji-search\n        v-if=\"showSearch\"\n        ref=\"searchInputRef\"\n        v-model=\"internalSearchQuery\"\n        :search-placeholder-label=\"searchPlaceholderLabel\"\n        @select-first-emoji=\"emits('selected-emoji', highlightedEmoji)\"\n        @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n        @focus-emoji-selector=\"$refs.emojiSelectorRef.focusEmojiSelector()\"\n        @keydown.esc=\"emits('close')\"\n      />\n      <emoji-selector\n        ref=\"emojiSelectorRef\"\n        :emoji-filter=\"internalSearchQuery\"\n        :skin-tone=\"skinTone\"\n        :tabset-labels=\"tabSetLabels\"\n        :search-results-label=\"searchResultsLabel\"\n        :search-no-results-label=\"searchNoResultsLabel\"\n        :recently-used-emojis=\"recentlyUsedEmojis\"\n        :custom-emojis=\"customEmojis\"\n        :selected-tabset=\"selectedTabset\"\n        @scroll-into-tab=\"updateScrollIntoTab\"\n        @highlighted-emoji=\"updateHighlightedEmoji\"\n        @selected-emoji=\"emits('selected-emoji', $event)\"\n        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.tabsetRef.focusTabset()\"\n        @keydown.esc=\"emits('close')\"\n        @scroll-bottom-reached=\"emits('scroll-bottom-reached')\"\n      />\n    </div>\n    <div class=\"d-emoji-picker--footer\">\n      <dt-button\n        v-if=\"showAddEmojiButton && !highlightedEmoji\"\n        importance=\"outlined\"\n        :aria-label=\"addEmojiLabel\"\n        class=\"d-emoji-picker__add-emoji\"\n        @click=\"emits('add-emoji')\"\n      >\n        {{ addEmojiLabel }}\n      </dt-button>\n      <emoji-description :emoji=\"highlightedEmoji\" />\n      <emoji-skin-selector\n        ref=\"skinSelectorRef\"\n        :is-hovering=\"!!highlightedEmoji\"\n        :skin-selector-button-tooltip-label=\"skinSelectorButtonTooltipLabel\"\n        :skin-tone=\"skinTone\"\n        @skin-tone=\"emits('skin-tone', $event)\"\n        @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n        @focus-last-emoji=\"$refs.emojiSelectorRef.focusLastEmoji()\"\n        @keydown.esc=\"emits('close')\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport EmojiSearch from './modules/emoji_search.vue';\nimport EmojiTabset from './modules/emoji_tabset.vue';\nimport EmojiSelector from './modules/emoji_selector.vue';\nimport EmojiSkinSelector from './modules/emoji_skin_selector.vue';\nimport EmojiDescription from './modules/emoji_description.vue';\nimport { DtButton } from '../button';\nimport { computed, ref, watch } from 'vue';\nimport { DialtoneLocalization } from '@/localization';\n\nconst props = defineProps({\n  /**\n   * The array with recently used  emoji object\n   * This list is necessary to fill the recently used tab\n   * @type {Array}\n   * @default []\n   * @example\n   * <dt-emoji-picker :recentlyUsedEmojis=\"[emojiObject, emojiObject]\" />\n   */\n  // TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object\n  recentlyUsedEmojis: {\n    type: Array,\n    default: () => [],\n  },\n\n  /**\n     * The array with custom emojis object\n     * This list is necessary to fill the custom tab\n     * @type {Array}\n     * @default []\n     * @example\n     * <dt-emoji-picker :customEmojis=\"[emojiObject, emojiObject]\" />\n     */\n  customEmojis: {\n    type: Array,\n  },\n\n  /**\n   * The skin tone to show the emojis\n   * This prop gives the possibility to use the skin tone selected by the user previously\n   * @type {String}\n   * @default 'Default'\n   * @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'\n   * @example\n   * <dt-emoji-picker :skinTone=\"'Default'\" />\n   */\n  skinTone: {\n    type: String,\n    default: 'Default',\n  },\n\n  /**\n\n   * Sets the search query that filters emojis.\n   * @type {String}\n   * @example\n   * <dt-emoji-picker search-query=\"smile\" />\n   */\n  searchQuery: {\n    type: String,\n    default: '',\n  },\n\n  /**\n   * Shows the search input\n   * @type {Boolean}\n   * @example\n   * <dt-emoji-picker :show-search=\"false\" />\n   */\n  showSearch: {\n    type: Boolean,\n    default: true,\n  },\n\n  /**\n     * Shows the add emoji button in the footer when no emoji is highlighted\n     * @type {Boolean}\n     * @example\n     * <dt-emoji-picker :show-add-emoji-button=\"true\" />\n     */\n    showAddEmojiButton: {\n      type: Boolean,\n      default: false,\n    },\n});\n\nconst emits = defineEmits(\n  [\n    /**\n     * It will emit the selected emoji\n     * @event selected-emoji\n     * @param {Object} emoji - The selected emoji from the emoji selector\n     */\n    'selected-emoji',\n\n    /**\n   * Emitted when the user reach bottom scroll\n   * This is being handled by handleScroll method\n   * @event scroll-bottom-reached\n   */\n    'scroll-bottom-reached',\n\n    /**\n     * It will emit the selected skin tone\n     * @event skin-tone\n     * @param {String} skin - The selected skin tone from the skin selector\n     */\n    'skin-tone',\n\n    /**\n     * Since the keyboard events are encapsulated, we emit this event to close the picker\n     * @event close\n     */\n    'close',\n\n    /**\n     * Emitted when the user clicks on the add emoji button\n     * @event add-emoji\n     */\n    'add-emoji',\n  ],\n);\n\nconst internalSearchQuery = ref(props.searchQuery.value);\nconst highlightedEmoji = ref(null);\nconst selectedTabset = ref({});\n\nconst scrollIntoTab = ref(0);\n\nconst showRecentlyUsedTab = computed(() => props.recentlyUsedEmojis?.length > 0);\nconst showCustomEmojisTab = computed(() => props.customEmojis?.length > 0);\n\nconst i18n = new DialtoneLocalization();\n\nconst tabSetLabels = [\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL'),\n];\n\nconst searchPlaceholderLabel = i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL');\nconst searchResultsLabel = i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL');\nconst searchNoResultsLabel = i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL');\nconst skinSelectorButtonTooltipLabel = i18n.$t('DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL');\nconst addEmojiLabel = i18n.$t('DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL');\n\nwatch(\n  () => props.searchQuery,\n  (newValue) => {\n    internalSearchQuery.value = newValue;\n  },\n);\n\n/**\n * Handle the selected tabset event\n * We're creating a new object with the same value as selectedTabset and assigning it back to selectedTabset.\n * Vue will see this as a new object and trigger the watcher in the child component.\n * Using this method, we are able to trigger the watcher in the child component even if the value being passed is the\n * same as the previous value.\n * @event selectedTabset\n * @param tabId {String} - The id of the tab that was selected\n */\nfunction scrollToSelectedTabset (tabId) {\n  internalSearchQuery.value = '';\n  selectedTabset.value = { ...selectedTabset.value, tabId };\n}\n\nfunction updateScrollIntoTab (value) {\n  scrollIntoTab.value = value;\n}\n\nfunction updateHighlightedEmoji (emoji) {\n  highlightedEmoji.value = emoji;\n}\n</script>\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -3,73 +3,64 @@ export * from './common/constants';
 export * from './common/utils';
 export * from './common/dates';
 export * from './common/emoji';
-export * from './components/Avatar';
-export * from './components/Badge';
-export * from './components/Banner';
-export * from './components/Box';
-export * from './components/Breadcrumbs';
-export * from './components/Button';
-export * from './components/ButtonGroup';
-export * from './components/Card';
-export * from './components/Checkbox';
-export * from './components/CheckboxGroup';
-export * from './components/Chip';
-export * from './components/Codeblock';
-export * from './components/Collapsible';
-export * from './components/Combobox';
-export * from './components/Datepicker';
-export * from './components/DescriptionList';
-export * from './components/Dropdown';
-export * from './components/Emoji';
-export * from './components/EmojiPicker';
-export * from './components/EmojiTextWrapper';
-export * from './components/EmptyState';
-export * from './components/FilterPill';
-export * from './components/Hovercard';
-export * from './components/Icon';
-export * from './components/Illustration';
-export * from './components/ImageViewer';
-export * from './components/Input';
-export * from './components/InputGroup';
-export * from './components/ItemLayout';
-export * from './components/KeyboardShortcut';
-export * from './components/LazyShow';
-export * from './components/Link';
-export * from './components/ListItem';
-export * from './components/ListItemGroup';
-export * from './components/Loader';
-export * from './components/Modal';
-export * from './components/ModeIsland';
-export * from './components/Notice';
-export * from './components/Pagination';
-export * from './components/Popover';
-export * from './components/ProgressCircle';
-export * from './components/Presence';
-export * from './components/Prose';
-export * from './components/Radio';
-export * from './components/RadioGroup';
-export * from './components/Resizable';
-export * from './components/RichTextEditor';
-export * from './components/RootLayout';
-export * from './components/Scroller';
-export * from './components/SegmentedControl';
-export * from './components/SelectMenu';
-export * from './components/Skeleton';
-export * from './components/SplitButton';
-export * from './components/Stack';
-export * from './components/Tab';
-export * from './components/Text';
-export * from './components/Toast';
-export * from './components/Toggle';
-export * from './components/Tooltip';
-export * from './components/ValidationMessages';
-export * from './components/ComboboxMultiSelect';
-export * from './components/ComboboxWithPopover';
+export * from './components/avatar';
+export * from './components/badge';
+export * from './components/banner';
+export * from './components/breadcrumbs';
+export * from './components/button';
+export * from './components/button_group';
+export * from './components/card';
+export * from './components/checkbox';
+export * from './components/checkbox_group';
+export * from './components/chip';
+export * from './components/codeblock';
+export * from './components/collapsible';
+export * from './components/combobox';
+export * from './components/datepicker';
+export * from './components/description_list';
+export * from './components/dropdown';
+export * from './components/emoji';
+export * from './components/emoji_picker';
+export * from './components/emoji_text_wrapper';
+export * from './components/empty_state';
+export * from './components/hovercard';
+export * from './components/icon';
+export * from './components/illustration';
+export * from './components/image_viewer';
+export * from './components/input';
+export * from './components/input_group';
+export * from './components/item_layout';
+export * from './components/keyboard_shortcut';
+export * from './components/lazy_show';
+export * from './components/link';
+export * from './components/list_item';
+export * from './components/list_item_group';
+export * from './components/loader';
+export * from './components/modal';
+export * from './components/notice';
+export * from './components/pagination';
+export * from './components/popover';
+export * from './components/progress_circle';
+export * from './components/presence';
+export * from './components/radio';
+export * from './components/radio_group';
+export * from './components/resizable';
+export * from './components/rich_text_editor';
+export * from './components/root_layout';
+export * from './components/scroller';
+export * from './components/select_menu';
+export * from './components/skeleton';
+export * from './components/split_button';
+export * from './components/stack';
+export * from './components/tab';
+export * from './components/toast';
+export * from './components/toggle';
+export * from './components/tooltip';
+export * from './components/validation_messages';
+export * from './components/combobox_multi_select';
+export * from './components/combobox_with_popover';
 export * from './directives/tooltip_directive';
 export * from './directives/scrollbar_directive';
-export * from './directives/mode_directive';
-export * from './directives/focusgroup_directive';
-export * from './directives/focustrap_directive';
 export * from './recipes/buttons/callbar_button';
 export * from './recipes/buttons/callbar_button_with_popover';
 export * from './recipes/buttons/callbar_button_with_dropdown';
@@ -90,7 +81,7 @@ export * from './recipes/leftbar/contact_row';
 export * from './recipes/leftbar/general_row';
 export * from './recipes/leftbar/group_row';
 export * from './recipes/leftbar/unread_pill';
-export * from './components/MotionText';
+export * from './components/motion_text';
 export * from './recipes/notices/top_banner_info';
 export { validationMessageValidator } from './common/validators';
 export { DialtoneLocalization } from './localization';

package/dist/lib/attachment-carousel/attachment-carousel.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../attachment_carousel-BLULm5nR.cjs`);exports.default=e.t;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../attachment_carousel-BHxR7A76.cjs`);exports.default=e.t;

package/dist/lib/attachment-carousel/attachment-carousel.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../attachment_carousel-RZEpSUgh.js";
+import { t as e } from "../../attachment_carousel-CouFqFMw.js";
 export { e as default };

package/dist/lib/attachment-carousel/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../../attachment_carousel-BLULm5nR.cjs`);exports.DtRecipeAttachmentCarousel=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../../attachment_carousel-BHxR7A76.cjs`);exports.DtRecipeAttachmentCarousel=e.t;

package/dist/lib/attachment-carousel/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../attachment_carousel-RZEpSUgh.js";
+import { t as e } from "../../attachment_carousel-CouFqFMw.js";
 export { e as DtRecipeAttachmentCarousel };

package/dist/lib/avatar/avatar-constants.cjs

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={xs:`d-avatar--xs`,sm:`d-avatar--sm`,md:`d-avatar--md`,lg:`d-avatar--lg`,xl:`d-avatar--xl`},t={default:``,icon:`d-avatar__icon`,initials:`d-avatar__initials`},n={md:`d-avatar__presence--md`,lg:`d-avatar__presence--lg`},r={NONE:``,BUSY:`busy`,AWAY:`away`,OFFLINE:`offline`,ACTIVE:`active`},i={xs:`100`,sm:`200`,md:`300`,lg:`500`,xl:`600`},a=[`000`,`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`,`1000`,`1100`,`1200`,`1300`,`1400`,`1500`,`1600`,`1700`,`1800`],o=a.slice(1),s=e=>e>1,c={AVATAR_SIZE_MODIFIERS:e,AVATAR_KIND_MODIFIERS:t,AVATAR_PRESENCE_SIZE_MODIFIERS:n,AVATAR_PRESENCE_STATES:r,AVATAR_ICON_SIZES:i,AVATAR_COLORS:a,AVATAR_RANDOM_COLORS:o,AVATAR_GROUP_VALIDATOR:s};exports.AVATAR_COLORS=a,exports.AVATAR_GROUP_VALIDATOR=s,exports.AVATAR_ICON_SIZES=i,exports.AVATAR_KIND_MODIFIERS=t,exports.AVATAR_PRESENCE_SIZE_MODIFIERS=n,exports.AVATAR_PRESENCE_STATES=r,exports.AVATAR_RANDOM_COLORS=o,exports.AVATAR_SIZE_MODIFIERS=e,exports.default=c;
+//# sourceMappingURL=avatar-constants.cjs.map

package/dist/lib/avatar/avatar-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-constants.cjs","names":[],"sources":["../../../components/avatar/avatar_constants.js"],"sourcesContent":["export const AVATAR_SIZE_MODIFIERS = {\n  xs: 'd-avatar--xs',\n  sm: 'd-avatar--sm',\n  md: 'd-avatar--md',\n  lg: 'd-avatar--lg',\n  xl: 'd-avatar--xl',\n};\n\nexport const AVATAR_KIND_MODIFIERS = {\n  default: '',\n  icon: 'd-avatar__icon',\n  initials: 'd-avatar__initials',\n};\n\nexport const AVATAR_PRESENCE_SIZE_MODIFIERS = {\n  md: 'd-avatar__presence--md',\n  lg: 'd-avatar__presence--lg',\n};\n\nexport const AVATAR_PRESENCE_STATES = {\n  NONE: '',\n  BUSY: 'busy',\n  AWAY: 'away',\n  OFFLINE: 'offline',\n  ACTIVE: 'active',\n};\n\nexport const AVATAR_ICON_SIZES = {\n  xs: '100',\n  sm: '200',\n  md: '300',\n  lg: '500',\n  xl: '600',\n};\n\nexport const AVATAR_COLORS = [\n  '000',\n  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  '1000',\n  '1100',\n  '1200',\n  '1300',\n  '1400',\n  '1500',\n  '1600',\n  '1700',\n  '1800',\n];\n\n// We do not use the color '000' (grey) in the randomized avatar colors, but it can still be set manually.\nexport const AVATAR_RANDOM_COLORS = AVATAR_COLORS.slice(1);\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\nexport default {\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_ICON_SIZES,\n  AVATAR_COLORS,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n"],"mappings":"+FAAA,IAAa,EAAwB,CACnC,GAAI,eACJ,GAAI,eACJ,GAAI,eACJ,GAAI,eACJ,GAAI,eACL,CAEY,EAAwB,CACnC,QAAS,GACT,KAAM,iBACN,SAAU,qBACX,CAEY,EAAiC,CAC5C,GAAI,yBACJ,GAAI,yBACL,CAEY,EAAyB,CACpC,KAAM,GACN,KAAM,OACN,KAAM,OACN,QAAS,UACT,OAAQ,SACT,CAEY,EAAoB,CAC/B,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACL,CAEY,EAAgB,CAC3B,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,OACD,CAGY,EAAuB,EAAc,MAAM,EAAE,CAE7C,EAA0B,GAAU,EAAQ,EAEzD,EAAe,CACb,wBACA,wBACA,iCACA,yBACA,oBACA,gBACA,uBACA,yBACD"}

package/dist/lib/avatar/avatar-constants.js

@@ -0,0 +1,60 @@
+//#region components/avatar/avatar_constants.js
+var e = {
+	xs: "d-avatar--xs",
+	sm: "d-avatar--sm",
+	md: "d-avatar--md",
+	lg: "d-avatar--lg",
+	xl: "d-avatar--xl"
+}, t = {
+	default: "",
+	icon: "d-avatar__icon",
+	initials: "d-avatar__initials"
+}, n = {
+	md: "d-avatar__presence--md",
+	lg: "d-avatar__presence--lg"
+}, r = {
+	NONE: "",
+	BUSY: "busy",
+	AWAY: "away",
+	OFFLINE: "offline",
+	ACTIVE: "active"
+}, i = {
+	xs: "100",
+	sm: "200",
+	md: "300",
+	lg: "500",
+	xl: "600"
+}, a = [
+	"000",
+	"100",
+	"200",
+	"300",
+	"400",
+	"500",
+	"600",
+	"700",
+	"800",
+	"900",
+	"1000",
+	"1100",
+	"1200",
+	"1300",
+	"1400",
+	"1500",
+	"1600",
+	"1700",
+	"1800"
+], o = a.slice(1), s = (e) => e > 1, c = {
+	AVATAR_SIZE_MODIFIERS: e,
+	AVATAR_KIND_MODIFIERS: t,
+	AVATAR_PRESENCE_SIZE_MODIFIERS: n,
+	AVATAR_PRESENCE_STATES: r,
+	AVATAR_ICON_SIZES: i,
+	AVATAR_COLORS: a,
+	AVATAR_RANDOM_COLORS: o,
+	AVATAR_GROUP_VALIDATOR: s
+};
+//#endregion
+export { a as AVATAR_COLORS, s as AVATAR_GROUP_VALIDATOR, i as AVATAR_ICON_SIZES, t as AVATAR_KIND_MODIFIERS, n as AVATAR_PRESENCE_SIZE_MODIFIERS, r as AVATAR_PRESENCE_STATES, o as AVATAR_RANDOM_COLORS, e as AVATAR_SIZE_MODIFIERS, c as default };
+
+//# sourceMappingURL=avatar-constants.js.map

package/dist/lib/avatar/avatar-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-constants.js","names":[],"sources":["../../../components/avatar/avatar_constants.js"],"sourcesContent":["export const AVATAR_SIZE_MODIFIERS = {\n  xs: 'd-avatar--xs',\n  sm: 'd-avatar--sm',\n  md: 'd-avatar--md',\n  lg: 'd-avatar--lg',\n  xl: 'd-avatar--xl',\n};\n\nexport const AVATAR_KIND_MODIFIERS = {\n  default: '',\n  icon: 'd-avatar__icon',\n  initials: 'd-avatar__initials',\n};\n\nexport const AVATAR_PRESENCE_SIZE_MODIFIERS = {\n  md: 'd-avatar__presence--md',\n  lg: 'd-avatar__presence--lg',\n};\n\nexport const AVATAR_PRESENCE_STATES = {\n  NONE: '',\n  BUSY: 'busy',\n  AWAY: 'away',\n  OFFLINE: 'offline',\n  ACTIVE: 'active',\n};\n\nexport const AVATAR_ICON_SIZES = {\n  xs: '100',\n  sm: '200',\n  md: '300',\n  lg: '500',\n  xl: '600',\n};\n\nexport const AVATAR_COLORS = [\n  '000',\n  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  '1000',\n  '1100',\n  '1200',\n  '1300',\n  '1400',\n  '1500',\n  '1600',\n  '1700',\n  '1800',\n];\n\n// We do not use the color '000' (grey) in the randomized avatar colors, but it can still be set manually.\nexport const AVATAR_RANDOM_COLORS = AVATAR_COLORS.slice(1);\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\nexport default {\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_ICON_SIZES,\n  AVATAR_COLORS,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n"],"mappings":";AAAA,IAAa,IAAwB;CACnC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAwB;CACnC,SAAS;CACT,MAAM;CACN,UAAU;CACX,EAEY,IAAiC;CAC5C,IAAI;CACJ,IAAI;CACL,EAEY,IAAyB;CACpC,MAAM;CACN,MAAM;CACN,MAAM;CACN,SAAS;CACT,QAAQ;CACT,EAEY,IAAoB;CAC/B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EAGY,IAAuB,EAAc,MAAM,EAAE,EAE7C,KAA0B,MAAU,IAAQ,GAEzD,IAAe;CACb;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

package/dist/lib/avatar/avatar.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../presence/presence.cjs`),r=require(`./avatarconstants.cjs`),i=require(`./utils.cjs`);let a=require(`vue`);var o=typeof CSS<`u`&&CSS.supports?.(`background`,`oklch(0.5 0.1 0)`),s={compatConfig:{MODE:3},name:`DtAvatar`,components:{DtPresence:n.default},props:{id:{type:String,default(){return e.getUniqueString()}},seed:{type:String,default:void 0},family:{type:Number,default:void 0,validator:e=>e>=1&&e<=12},variant:{type:Number,default:void 0,validator:e=>e>=0&&e<10},color:{type:String,default:void 0},size:{type:[String,Number],default:300,validator:e=>Object.keys(r.AVATAR_SIZE_MODIFIERS).includes(String(e))},avatarClass:{type:[String,Array,Object],default:``},canvasClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},presence:{type:String,default:r.AVATAR_PRESENCE_STATES.NONE,validator:e=>Object.values(r.AVATAR_PRESENCE_STATES).includes(e)},presenceProps:{type:Object,default:()=>({})},group:{type:Number,default:void 0,validator:e=>r.AVATAR_GROUP_VALIDATOR(e)},overlayText:{type:String,default:``},overlayClass:{type:[String,Array,Object],default:``},imageSrc:{type:String,default:``},imageAlt:{type:String,default:void 0},fullName:{type:String,default:``},interactive:{type:Boolean,default:!1},clickable:{type:Boolean,default:null},iconAriaLabel:{type:String,default:void 0},iconOnly:{type:Boolean,default:!1},deactivated:{type:Boolean,default:!1}},emits:[`click`],data(){return{AVATAR_SIZE_MODIFIERS:r.AVATAR_SIZE_MODIFIERS,AVATAR_KIND_MODIFIERS:r.AVATAR_KIND_MODIFIERS,AVATAR_PRESENCE_SIZE_MODIFIERS:r.AVATAR_PRESENCE_SIZE_MODIFIERS,imageLoadedSuccessfully:null,formattedInitials:``,initializing:!1,hasSlotContent:e.hasSlotContent,anchorHue:0}},computed:{resolvedInteractive(){return this.clickable??this.interactive},hasOverlayIcon(){return e.hasSlotContent(this.$slots.overlayIcon)},isIconType(){return e.hasSlotContent(this.$slots.icon)},iconDataQa(){return`dt-avatar-icon`},computedFamily(){if(!this.isIconType){if(this.family!==void 0)return this.family;if(this.color!==void 0){let e=r.colorToFamilyVariant(this.color);if(e)return e.family}return r.getRandomFamilyVariant(this.seed).family}},computedVariant(){if(!this.isIconType){if(this.variant!==void 0)return this.variant;if(this.color!==void 0){let e=r.colorToFamilyVariant(this.color);if(e)return e.variant}return r.getRandomFamilyVariant(this.seed).variant}},avatarClasses(){return[`d-avatar`,r.AVATAR_SIZE_MODIFIERS[this.validatedSize],this.avatarClass,{"d-avatar--group":this.showGroup,"d-avatar--group-digits-2":this.showGroup&&String(this.formattedGroup).length===2,"d-avatar--group-digits-3":this.showGroup&&String(this.formattedGroup).length>=3,"d-avatar--clickable":this.resolvedInteractive,"d-avatar--presence":this.presence&&!this.showGroup,"d-avatar--icon-only":this.iconOnly,"d-avatar--deactivated":this.deactivated}]},avatarStyles(){let e=[];if(!o&&!this.isIconType&&this.computedFamily&&this.computedVariant!==void 0){let t=r.computeAvatarHex(this.computedFamily,this.computedVariant,this.anchorHue);e.push({"--avatar-color-background":t})}return e.length>0?e:void 0},overlayClasses(){return[`d-avatar__overlay`,this.overlayClass,{"d-avatar__overlay-icon":this.hasOverlayIcon}]},showGroup(){return r.AVATAR_GROUP_VALIDATOR(this.group)},formattedGroup(){let e=String(this.validatedSize);return([`xs`,`100`,`150`,`200`,`250`].includes(e)?2:3)==2?this.group>9?`9+`:this.group:this.group>99?`99+`:this.group},validatedSize(){return this.size},showImage(){return this.imageLoadedSuccessfully!==!1&&this.imageSrc}},watch:{fullName:{immediate:!0,handler(){this.formatInitials()}},size:{immediate:!0,handler(){this.formatInitials()}},group:{immediate:!0,handler(){this.formatInitials()}},imageSrc(e){this.imageLoadedSuccessfully=null,e&&(this.validateProps(),this.setImageListeners())}},mounted(){this.validateProps(),this.setImageListeners(),o||this.readAnchorHue()},methods:{async setImageListeners(){await this.$nextTick();let e=this.$refs.avatarImage;e&&(e.addEventListener(`load`,()=>this._loadedImageEventHandler(e),{once:!0}),e.addEventListener(`error`,()=>this._erroredImageEventHandler(e),{once:!0}))},formatInitials(){let e=i.extractInitialsFromName(this.fullName),t=String(this.validatedSize);t===`xs`||t===`100`?this.formattedInitials=``:t===`sm`||t===`150`||t===`200`?this.formattedInitials=e[0]:this.formattedInitials=e},readAnchorHue(){try{let e=getComputedStyle(document.documentElement).getPropertyValue(`--dt-avatar-anchor-hue`).trim();this.anchorHue=parseFloat(e)||0}catch{this.anchorHue=0}},_loadedImageEventHandler(e){this.imageLoadedSuccessfully=!0,e.classList.remove(`d-d-none`)},_erroredImageEventHandler(e){this.imageLoadedSuccessfully=!1,e.classList.add(`d-d-none`)},validateProps(){this.imageSrc&&this.imageAlt===void 0&&console.error(`image-alt required if image-src is provided. Can be set to "" (empty string) if the image is described in text nearby`)},handleClick(e){this.resolvedInteractive&&this.$emit(`click`,e)}}},c={class:`d-avatar__canvas-inner`},l=[`src`,`alt`],u=[`aria-label`,`data-qa`],d={key:1,class:`d-avatar__overlay-text`},f=[`aria-label`];function p(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-presence`);return(0,a.openBlock)(),(0,a.createBlock)((0,a.resolveDynamicComponent)(o.resolvedInteractive?`button`:`div`),{id:n.id,class:(0,a.normalizeClass)(o.avatarClasses),style:(0,a.normalizeStyle)(o.avatarStyles),"data-avatar-family":n.iconOnly?void 0:o.computedFamily,"data-avatar-variant":n.iconOnly?void 0:o.computedVariant,"data-qa":`dt-avatar`,type:o.resolvedInteractive?`button`:void 0,onClick:o.handleClick},{default:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`div`,{ref:`canvas`,class:(0,a.normalizeClass)([n.canvasClass,`d-avatar__canvas`,{"d-avatar--image-loaded":i.imageLoadedSuccessfully}])},[(0,a.createElementVNode)(`div`,c,[o.showImage?((0,a.openBlock)(),(0,a.createElementBlock)(`img`,{key:0,ref:`avatarImage`,class:`d-avatar__image`,"data-qa":`dt-avatar-image`,src:n.imageSrc,alt:n.imageAlt},null,8,l)):o.isIconType?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,{key:1,class:(0,a.normalizeClass)([n.iconClass,i.AVATAR_KIND_MODIFIERS.icon]),"aria-label":o.resolvedInteractive?n.iconAriaLabel:``,"data-qa":o.iconDataQa},[(0,a.renderSlot)(e.$slots,`icon`)],10,u)):((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:2,class:(0,a.normalizeClass)([i.AVATAR_KIND_MODIFIERS.initials])},(0,a.toDisplayString)(i.formattedInitials),3))])],2),o.hasOverlayIcon||n.overlayText?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,{key:0,class:(0,a.normalizeClass)(o.overlayClasses)},[o.hasOverlayIcon?(0,a.renderSlot)(e.$slots,`overlayIcon`,{key:0}):n.overlayText?((0,a.openBlock)(),(0,a.createElementBlock)(`p`,d,(0,a.toDisplayString)(n.overlayText),1)):(0,a.createCommentVNode)(``,!0)],2)):(0,a.createCommentVNode)(``,!0),o.showGroup?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:1,class:`d-avatar__count`,"data-qa":`dt-avatar-count`,role:`img`,"aria-label":`${n.group} participants`},(0,a.toDisplayString)(o.formattedGroup),9,f)):(0,a.createCommentVNode)(``,!0),n.presence&&!o.showGroup&&i.AVATAR_PRESENCE_SIZE_MODIFIERS[n.size]?((0,a.openBlock)(),(0,a.createBlock)(s,(0,a.mergeProps)({key:2,presence:n.presence,class:[`d-avatar__presence`,i.AVATAR_PRESENCE_SIZE_MODIFIERS[n.size]]},n.presenceProps,{"data-qa":`dt-presence`}),null,16,[`presence`,`class`])):(0,a.createCommentVNode)(``,!0)]),_:3},8,[`id`,`class`,`style`,`data-avatar-family`,`data-avatar-variant`,`type`,`onClick`])}var m=t.t(s,[[`render`,p]]);exports.default=m;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../presence/presence.cjs`),r=require(`./avatar-constants.cjs`),i=require(`../icon/icon-constants.cjs`),a=require(`./utils.cjs`);let o=require(`vue`);var s={compatConfig:{MODE:3},name:`DtAvatar`,components:{DtPresence:n.default},inheritAttrs:!1,props:{id:{type:String,default(){return e.getUniqueString()}},seed:{type:String,default:void 0},color:{type:String,default:void 0},size:{type:String,default:`md`,validator:e=>Object.keys(r.AVATAR_SIZE_MODIFIERS).includes(e)},avatarClass:{type:[String,Array,Object],default:``},canvasClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},presence:{type:String,default:r.AVATAR_PRESENCE_STATES.NONE,validator:e=>Object.values(r.AVATAR_PRESENCE_STATES).includes(e)},presenceProps:{type:Object,default:()=>({})},group:{type:Number,default:void 0,validator:e=>r.AVATAR_GROUP_VALIDATOR(e)},overlayText:{type:String,default:``},overlayClass:{type:[String,Array,Object],default:``},imageSrc:{type:String,default:``},imageAlt:{type:String,default:void 0},iconSize:{type:String,default:``,validator:e=>!e||Object.keys(i.ICON_SIZE_MODIFIERS).includes(e)},fullName:{type:String,default:``},clickable:{type:Boolean,default:!1},iconAriaLabel:{type:String,default:void 0}},emits:[`click`],data(){return{AVATAR_SIZE_MODIFIERS:r.AVATAR_SIZE_MODIFIERS,AVATAR_KIND_MODIFIERS:r.AVATAR_KIND_MODIFIERS,AVATAR_PRESENCE_SIZE_MODIFIERS:r.AVATAR_PRESENCE_SIZE_MODIFIERS,AVATAR_ICON_SIZES:r.AVATAR_ICON_SIZES,imageLoadedSuccessfully:null,formattedInitials:``,initializing:!1,hasSlotContent:e.hasSlotContent}},computed:{hasOverlayIcon(){return e.hasSlotContent(this.$slots.overlayIcon)},iconDataQa(){return`dt-avatar-icon`},avatarClasses(){return[`d-avatar`,this.$attrs.class,r.AVATAR_SIZE_MODIFIERS[this.validatedSize],this.avatarClass,{"d-avatar--group":this.showGroup,"d-avatar--group-digits-2":this.showGroup&&this.group>9&&this.group<100,"d-avatar--group-digits-3":this.showGroup&&this.group>99,[`d-avatar--color-${this.getColor()}`]:!this.isIconType(),"d-avatar--clickable":this.clickable,"d-avatar--presence":this.presence&&!this.showGroup}]},overlayClasses(){return[`d-avatar__overlay`,this.overlayClass,{"d-avatar__overlay-icon":this.hasOverlayIcon}]},showGroup(){return r.AVATAR_GROUP_VALIDATOR(this.group)},formattedGroup(){return this.group>99?`99+`:this.group},validatedSize(){return this.group?`xs`:this.size},showImage(){return this.imageLoadedSuccessfully!==!1&&this.imageSrc}},watch:{fullName:{immediate:!0,handler(){this.formatInitials()}},size:{immediate:!0,handler(){this.formatInitials()}},group:{immediate:!0,handler(){this.formatInitials()}},imageSrc(e){this.imageLoadedSuccessfully=null,e&&(this.validateProps(),this.setImageListeners())}},mounted(){this.validateProps(),this.setImageListeners()},methods:{isIconType(){return e.hasSlotContent(this.$slots.icon)},async setImageListeners(){await this.$nextTick();let e=this.$refs.avatarImage;e&&(e.addEventListener(`load`,()=>this._loadedImageEventHandler(e),{once:!0}),e.addEventListener(`error`,()=>this._erroredImageEventHandler(e),{once:!0}))},formatInitials(){let e=a.extractInitialsFromName(this.fullName);this.validatedSize===`xs`?this.formattedInitials=``:this.validatedSize===`sm`?this.formattedInitials=e[0]:this.formattedInitials=e},getColor(){return this.color??e.getRandomElement(r.AVATAR_RANDOM_COLORS,this.seed)},_loadedImageEventHandler(e){this.imageLoadedSuccessfully=!0,e.classList.remove(`d-d-none`)},_erroredImageEventHandler(e){this.imageLoadedSuccessfully=!1,e.classList.add(`d-d-none`)},validateProps(){this.imageSrc&&this.imageAlt===void 0&&console.error(`image-alt required if image-src is provided. Can be set to "" (empty string) if the image is described in text nearby`)},handleClick(e){this.clickable&&this.$emit(`click`,e)}}},c=[`src`,`alt`],l=[`aria-label`,`data-qa`,`role`],u={key:1,class:`d-avatar__overlay-text`},d={key:1,class:`d-avatar__count`,"data-qa":`dt-avatar-count`};function f(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-presence`);return(0,o.openBlock)(),(0,o.createBlock)((0,o.resolveDynamicComponent)(n.clickable?`button`:`div`),{id:n.id,class:(0,o.normalizeClass)(a.avatarClasses),style:(0,o.normalizeStyle)(e.$attrs.style),"data-qa":`dt-avatar`,onClick:a.handleClick},{default:(0,o.withCtx)(()=>[(0,o.createElementVNode)(`div`,{ref:`canvas`,class:(0,o.normalizeClass)([n.canvasClass,`d-avatar__canvas`,{"d-avatar--image-loaded":i.imageLoadedSuccessfully}])},[a.showImage?((0,o.openBlock)(),(0,o.createElementBlock)(`img`,{key:0,ref:`avatarImage`,class:`d-avatar__image`,"data-qa":`dt-avatar-image`,src:n.imageSrc,alt:n.imageAlt},null,8,c)):a.isIconType()?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:1,class:(0,o.normalizeClass)([n.iconClass,i.AVATAR_KIND_MODIFIERS.icon]),"aria-label":n.clickable?n.iconAriaLabel:``,"data-qa":a.iconDataQa,role:n.clickable?`button`:``},[(0,o.renderSlot)(e.$slots,`icon`,{iconSize:n.iconSize||i.AVATAR_ICON_SIZES[n.size]})],10,l)):((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:2,class:(0,o.normalizeClass)([i.AVATAR_KIND_MODIFIERS.initials])},(0,o.toDisplayString)(i.formattedInitials),3))],2),a.hasOverlayIcon||n.overlayText?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:0,class:(0,o.normalizeClass)(a.overlayClasses)},[a.hasOverlayIcon?(0,o.renderSlot)(e.$slots,`overlayIcon`,{key:0}):n.overlayText?((0,o.openBlock)(),(0,o.createElementBlock)(`p`,u,(0,o.toDisplayString)(n.overlayText),1)):(0,o.createCommentVNode)(``,!0)],2)):(0,o.createCommentVNode)(``,!0),a.showGroup?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,d,(0,o.toDisplayString)(a.formattedGroup),1)):(0,o.createCommentVNode)(``,!0),n.presence&&!a.showGroup?((0,o.openBlock)(),(0,o.createBlock)(s,(0,o.mergeProps)({key:2,presence:n.presence,class:[`d-avatar__presence`,i.AVATAR_PRESENCE_SIZE_MODIFIERS[n.size]]},n.presenceProps,{"data-qa":`dt-presence`}),null,16,[`presence`,`class`])):(0,o.createCommentVNode)(``,!0)]),_:3},8,[`id`,`class`,`style`,`onClick`])}var p=t.t(s,[[`render`,f]]);exports.default=p;
 //# sourceMappingURL=avatar.cjs.map

package/dist/lib/avatar/avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.cjs","names":[],"sources":["../../../components/Avatar/Avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"resolvedInteractive ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"avatarStyles\"\n    :data-avatar-family=\"!iconOnly ? computedFamily : undefined\"\n    :data-avatar-variant=\"!iconOnly ? computedVariant : undefined\"\n    data-qa=\"dt-avatar\"\n    :type=\"resolvedInteractive ? 'button' : undefined\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <div class=\"d-avatar__canvas-inner\">\n        <img\n          v-if=\"showImage\"\n          ref=\"avatarImage\"\n          class=\"d-avatar__image\"\n          data-qa=\"dt-avatar-image\"\n          :src=\"imageSrc\"\n          :alt=\"imageAlt\"\n        >\n        <div\n          v-else-if=\"isIconType\"\n          :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n          :aria-label=\"resolvedInteractive ? iconAriaLabel : ''\"\n          :data-qa=\"iconDataQa\"\n        >\n          <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n          <slot name=\"icon\" />\n        </div>\n        <span\n          v-else\n          :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n        >\n          {{ formattedInitials }}\n        </span>\n      </div>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n      role=\"img\"\n      :aria-label=\"`${group} participants`\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup && AVATAR_PRESENCE_SIZE_MODIFIERS[size]\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../Presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_FAMILY_COUNT,\n  AVATAR_VARIANT_COUNT,\n  colorToFamilyVariant,\n  getRandomFamilyVariant,\n  computeAvatarHex,\n} from './AvatarConstants';\nimport { extractInitialsFromName } from './Utils';\n\n// Check if browser supports oklch() - only compute hex fallback if not\nconst supportsOklch = typeof CSS !== 'undefined' && CSS.supports?.('background', 'oklch(0.5 0.1 0)');\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * **Recommended.** Pass a unique identifier (e.g., user ID) to generate consistent,\n     * deterministic colors for this avatar. The same seed always produces the same color.\n     * This is the preferred approach for most use cases.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * **Advanced.** Avatar color family (1-12). Each family represents a different hue\n     * offset from the theme's anchor. Only use this if you need explicit control over\n     * the color. For most cases, use `seed` instead.\n     * Families: 1=Red, 2=Orange, 3=Amber, 4=Yellow-Green, 5=Green, 6=Teal, 7=Cyan,\n     * 8=Blue, 9=Indigo, 10=Purple, 11=Magenta, 12=Pink\n     * @values 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12\n     */\n    family: {\n      type: Number,\n      default: undefined,\n      validator: (val) => val >= 1 && val <= AVATAR_FAMILY_COUNT,\n    },\n\n    /**\n     * **Advanced.** Avatar color variant (0-9). Controls lightness/chroma within the family.\n     * Only use this if you need explicit control over the color. For most cases, use `seed` instead.\n     * 0 = darkest, 9 = lightest. Variants 0-5 have light text, 6-9 have dark text.\n     * @values 0, 1, 2, 3, 4, 5, 6, 7, 8, 9\n     */\n    variant: {\n      type: Number,\n      default: undefined,\n      validator: (val) => val >= 0 && val < AVATAR_VARIANT_COUNT,\n    },\n\n    /**\n     * Avatar color code for backward compatibility. Converted internally\n     * to family/variant. For new code, use `seed` (recommended) or `family`/`variant`.\n     * Format: family (1-12) * 100 + variant (0-9) * 10, e.g., '540' = family 5, variant 4.\n     * @deprecated Use seed or family/variant instead.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar.\n     * T-shirt sizes (xs, sm, md, lg, xl) are deprecated and will be removed in the next major version.\n     * Please use the numeric scale instead.\n     * @values 100, 150, 200, 250, 300, 400, 500, 600, 700, 800, 900\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(String(size)),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as \"99+\".\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and interactive,\n     * emits a click event when clicked.\n     */\n    interactive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * @deprecated Use interactive instead.\n     */\n    clickable: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * When true, renders the avatar with a transparent background and no color.\n     * Useful for displaying icons that should not have a colored background,\n     * such as channel or navigation icons.\n     */\n    iconOnly: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * When true, renders the avatar in a desaturated/washed-out state.\n     * Use this to indicate that a user is deactivated or inactive.\n     */\n    deactivated: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n      anchorHue: 0,\n    };\n  },\n\n  computed: {\n    resolvedInteractive () {\n      return this.clickable ?? this.interactive;\n    },\n\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    /**\n     * Compute family from props, color prop, or random\n     */\n    computedFamily () {\n      // Icon-type avatars don't use color\n      if (this.isIconType) return undefined;\n\n      // Explicit family prop takes precedence\n      if (this.family !== undefined) return this.family;\n\n      // Color prop (converted to family/variant)\n      if (this.color !== undefined) {\n        const parsed = colorToFamilyVariant(this.color);\n        if (parsed) return parsed.family;\n      }\n\n      // Random based on seed\n      const random = getRandomFamilyVariant(this.seed);\n      return random.family;\n    },\n\n    /**\n     * Compute variant from props, color prop, or random\n     */\n    computedVariant () {\n      // Icon-type avatars don't use color\n      if (this.isIconType) return undefined;\n\n      // Explicit variant prop takes precedence\n      if (this.variant !== undefined) return this.variant;\n\n      // Color prop (converted to family/variant)\n      if (this.color !== undefined) {\n        const parsed = colorToFamilyVariant(this.color);\n        if (parsed) return parsed.variant;\n      }\n\n      // Random based on seed\n      const random = getRandomFamilyVariant(this.seed);\n      return random.variant;\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          'd-avatar--group-digits-2': this.showGroup && String(this.formattedGroup).length === 2,\n          'd-avatar--group-digits-3': this.showGroup && String(this.formattedGroup).length >= 3,\n          'd-avatar--clickable': this.resolvedInteractive,\n          'd-avatar--presence': this.presence && !this.showGroup,\n          'd-avatar--icon-only': this.iconOnly,\n          'd-avatar--deactivated': this.deactivated,\n        },\n      ];\n    },\n\n    /**\n     * Compute inline styles for fallback color in browsers that don't support oklch()\n     */\n    avatarStyles () {\n      const baseStyles = [];\n\n      // Only compute hex fallback for browsers that don't support oklch()\n      if (!supportsOklch && !this.isIconType && this.computedFamily && this.computedVariant !== undefined) {\n        const fallbackHex = computeAvatarHex(this.computedFamily, this.computedVariant, this.anchorHue);\n        baseStyles.push({ '--avatar-color-background': fallbackHex });\n      }\n\n      return baseStyles.length > 0 ? baseStyles : undefined;\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      const size = String(this.validatedSize);\n      // Sizes 100-250 cap at 2 digits — too small for 3\n      const smallSizes = ['xs', '100', '150', '200', '250'];\n      const maxDigits = smallSizes.includes(size) ? 2 : 3;\n      if (maxDigits === 2) {\n        return this.group > 9 ? '9+' : this.group;\n      }\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      return this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n    // Only read anchor hue for fallback computation in browsers without oklch() support\n    if (!supportsOklch) {\n      this.readAnchorHue();\n    }\n  },\n\n  methods: {\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n      const size = String(this.validatedSize);\n\n      // xs/100 are too small for initials\n      if (size === 'xs' || size === '100') {\n        this.formattedInitials = '';\n      // sm/150/200 show single initial\n      } else if (size === 'sm' || size === '150' || size === '200') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    /**\n     * Read the anchor hue from CSS custom property for fallback computation\n     */\n    readAnchorHue () {\n      try {\n        const hueValue = getComputedStyle(document.documentElement)\n          .getPropertyValue('--dt-avatar-anchor-hue')\n          .trim();\n        this.anchorHue = parseFloat(hueValue) || 0;\n      } catch {\n        this.anchorHue = 0;\n      }\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.resolvedInteractive) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"avatar.cjs","names":[],"sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <div\n        v-else-if=\"isIconType()\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        :aria-label=\"clickable ? iconAriaLabel : ''\"\n        :data-qa=\"iconDataQa\"\n        :role=\"clickable ? 'button' : ''\"\n      >\n        <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n        <slot\n          name=\"icon\"\n          :icon-size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        />\n      </div>\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        this.$attrs.class,\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          'd-avatar--group-digits-2': this.showGroup && this.group > 9 && this.group < 100,\n          'd-avatar--group-digits-3': this.showGroup && this.group > 99,\n          [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n          'd-avatar--clickable': this.clickable,\n          'd-avatar--presence': this.presence && !this.showGroup,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"mappings":"6YAkGA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,WACN,WAAY,CAAE,WAAA,EAAA,QAAY,CAE1B,aAAc,GAEd,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,iBAAiB,EACtC,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,IAAA,GACV,CAMD,MAAO,CACL,KAAM,OACN,QAAS,IAAA,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,KACT,UAAY,GAAS,OAAO,KAAK,EAAA,sBAAsB,CAAC,SAAS,EAAK,CACvE,CAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,UAAW,CACT,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAQD,SAAU,CACR,KAAM,OACN,QAAS,EAAA,uBAAuB,KAChC,UAAY,GACH,OAAO,OAAO,EAAA,uBAAuB,CAAC,SAAS,EAAM,CAE/D,CAKD,cAAe,CACb,KAAM,OACN,aAAgB,EAAE,EACnB,CAOD,MAAO,CACL,KAAM,OACN,QAAS,IAAA,GACT,UAAY,GAAU,EAAA,uBAAuB,EAAM,CACpD,CAKD,YAAa,CACX,KAAM,OACN,QAAS,GACV,CAKD,aAAc,CACZ,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,SAAU,CACR,KAAM,OACN,QAAS,GACV,CAOD,SAAU,CACR,KAAM,OACN,QAAS,IAAA,GACV,CAMD,SAAU,CACR,KAAM,OACN,QAAS,GACT,UAAY,GAAS,CAAC,GAAQ,OAAO,KAAK,EAAA,oBAAoB,CAAC,SAAS,EAAK,CAC9E,CAKD,SAAU,CACR,KAAM,OACN,QAAS,GACV,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,cAAe,CACb,KAAM,OACN,QAAS,IAAA,GACV,CACF,CAED,MAAO,CAOL,QACD,CAED,MAAQ,CACN,MAAO,CACL,sBAAA,EAAA,sBACA,sBAAA,EAAA,sBACA,+BAAA,EAAA,+BACA,kBAAA,EAAA,kBACA,wBAAyB,KACzB,kBAAmB,GACnB,aAAc,GACd,eAAA,EAAA,eACD,EAGH,SAAU,CACR,gBAAkB,CAChB,OAAO,EAAA,eAAe,KAAK,OAAO,YAAY,EAGhD,YAAc,CACZ,MAAO,kBAGT,eAAiB,CACf,MAAO,CACL,WACA,KAAK,OAAO,MACZ,EAAA,sBAAsB,KAAK,eAC3B,KAAK,YACL,CACE,kBAAmB,KAAK,UACxB,2BAA4B,KAAK,WAAa,KAAK,MAAQ,GAAK,KAAK,MAAQ,IAC7E,2BAA4B,KAAK,WAAa,KAAK,MAAQ,IAC1D,mBAAmB,KAAK,UAAU,IAAK,CAAC,KAAK,YAAY,CAC1D,sBAAuB,KAAK,UAC5B,qBAAsB,KAAK,UAAY,CAAC,KAAK,UAC9C,CACF,EAGH,gBAAkB,CAChB,MAAO,CACL,oBACA,KAAK,aACL,CAAE,yBAA0B,KAAK,eAAgB,CAClD,EAGH,WAAa,CACX,OAAO,EAAA,uBAAuB,KAAK,MAAM,EAG3C,gBAAkB,CAChB,OAAO,KAAK,MAAQ,GAAK,MAAQ,KAAK,OAGxC,eAAiB,CAEf,OAAO,KAAK,MAAQ,KAAO,KAAK,MAGlC,WAAa,CACX,OAAO,KAAK,0BAA4B,IAAS,KAAK,UAEzD,CAED,MAAO,CACL,SAAU,CACR,UAAW,GACX,SAAW,CACT,KAAK,gBAAgB,EAExB,CAED,KAAM,CACJ,UAAW,GACX,SAAW,CACT,KAAK,gBAAgB,EAExB,CAED,MAAO,CACL,UAAW,GACX,SAAW,CACT,KAAK,gBAAgB,EAExB,CAED,SAAU,EAAQ,CAChB,KAAK,wBAA0B,KAC1B,IAEL,KAAK,eAAe,CACpB,KAAK,mBAAmB,GAE3B,CAED,SAAW,CACT,KAAK,eAAe,CACpB,KAAK,mBAAmB,EAG1B,QAAS,CACP,YAAc,CACZ,OAAO,EAAA,eAAe,KAAK,OAAO,KAAK,EAGzC,MAAM,mBAAqB,CACzB,MAAM,KAAK,WAAW,CACtB,IAAM,EAAK,KAAK,MAAM,YACjB,IAEL,EAAG,iBAAiB,WAAc,KAAK,yBAAyB,EAAG,CAAE,CAAE,KAAM,GAAM,CAAC,CACpF,EAAG,iBAAiB,YAAe,KAAK,0BAA0B,EAAG,CAAE,CAAE,KAAM,GAAM,CAAC,GAGxF,gBAAkB,CAChB,IAAM,EAAW,EAAA,wBAAwB,KAAK,SAAS,CAEnD,KAAK,gBAAkB,KACzB,KAAK,kBAAoB,GAChB,KAAK,gBAAkB,KAChC,KAAK,kBAAoB,EAAS,GAElC,KAAK,kBAAoB,GAI7B,UAAY,CACV,OAAO,KAAK,OAAS,EAAA,iBAAiB,EAAA,qBAAsB,KAAK,KAAK,EAGxE,yBAA0B,EAAI,CAC5B,KAAK,wBAA0B,GAC/B,EAAG,UAAU,OAAO,WAAW,EAGjC,0BAA2B,EAAI,CAC7B,KAAK,wBAA0B,GAC/B,EAAG,UAAU,IAAI,WAAW,EAG9B,eAAiB,CACX,KAAK,UAAY,KAAK,WAAa,IAAA,IACrC,QAAQ,MAAM,wHAAwH,EAI1I,YAAa,EAAG,CACT,KAAK,WACV,KAAK,MAAM,QAAS,EAAE,EAEzB,CACF,4DAxXO,MAAM,mCAOR,MAAM,kBACN,UAAQ,+JA9DL,EAAA,UAAS,SAAA,MAAA,CAAA,CACb,GAAI,EAAA,GACJ,OAAA,EAAA,EAAA,gBAAO,EAAA,cAAa,CACpB,OAAA,EAAA,EAAA,gBAAO,EAAA,OAAO,MAAK,CACpB,UAAQ,YACP,QAAO,EAAA,wCAqCF,0BAAA,MAAA,CAlCJ,IAAI,SACH,OAAA,EAAA,EAAA,gBAAK,CAAY,EAAA,yDAA6E,EAAA,wBAAuB,KAO9G,EAAA,YAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAMP,MAAA,OALC,IAAI,cACJ,MAAM,kBACN,UAAQ,kBACP,IAAK,EAAA,SACL,IAAK,EAAA,qBAGK,EAAA,YAAU,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAWjB,MAAA,OAVH,OAAA,EAAA,EAAA,gBAAK,CAAG,EAAA,UAAW,EAAA,sBAAsB,KAAI,CAAA,CAC7C,aAAY,EAAA,UAAY,EAAA,cAAa,GACrC,UAAS,EAAA,WACT,KAAM,EAAA,UAAS,SAAA,sBAMd,EAAA,OAAA,OAAA,CADC,SAAW,EAAA,UAAY,EAAA,kBAAkB,EAAA,MAAA,CAAA,CAAA,CAAA,GAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQvC,OAAA,OAHJ,OAAA,EAAA,EAAA,gBAAK,CAAG,EAAA,sBAAsB,SAAQ,CAAA,wBAEpC,EAAA,kBAAiB,CAAA,EAAA,EAAA,CAAA,EAAA,CAIhB,EAAA,gBAAkB,EAAA,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAcpB,MAAA,OAbH,OAAA,EAAA,EAAA,gBAAO,EAAA,eAAc,GAId,EAAA,gBAAA,EAAA,EAAA,YAEN,EAAA,OAAA,cAAA,CAAA,IAAA,EAAA,CAAA,CAEW,EAAA,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAIT,IALJ,GAAA,EAAA,EAAA,iBAIK,EAAA,YAAW,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAIV,EAAA,YAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAGoB,OAJ5B,GAAA,EAAA,EAAA,iBAII,EAAA,eAAc,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAEV,EAAA,UAAQ,CAAK,EAAA,YAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAQnB,GAAA,EAAA,EAAA,YAAA,OAPC,SAAU,EAAA,SACV,MAAK,CAAA,qBAA0C,EAAA,+BAA+B,EAAA,MAAA,EAIvE,EAAA,cAAa,CACrB,UAAQ,cAAa,CAAA,CAAA,KAAA,GAAA,CAAA,WAAA,QAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA"}