@dialpad/dialtone 9.110.1 → 9.111.0

package/dist/vue3/lib/emoji-picker/emoji-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-picker.js","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/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      size=\"sm\"\n      tab-list-class=\"d-emoji-picker__tabset-list\"\n      :selected=\"selectedTab\"\n    >\n      <template #tabs>\n        <dt-tab\n          v-for=\"(tab, index) in tabs\"\n          :id=\"tab.id\"\n          :ref=\"el => { if (el) setTabsetRef(el) }\"\n          :key=\"tab.id\"\n          :panel-id=\"tab.panelId\"\n          :label=\"tab.label\"\n          aria-controls=\"d-emoji-picker-list\"\n          :tabindex=\"index + 1\"\n          @click.capture.stop=\"selectTabset(tab.id)\"\n          @keydown=\"handleKeyDown($event, 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 { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker/emoji_picker_constants.js';\nimport {\n  DtIconClock,\n  DtIconSatisfied,\n  DtIconLivingThing,\n  DtIconFood,\n  DtIconObject,\n  DtIconTransportation,\n  DtIconLightbulb,\n  DtIconHeart,\n  DtIconFlag,\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  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: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: DtIconClock },\n  { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: DtIconSatisfied },\n  { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: DtIconLivingThing },\n  { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: DtIconFood },\n  { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: DtIconObject },\n  { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: DtIconTransportation },\n  { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: DtIconLightbulb },\n  { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: DtIconHeart },\n  { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: DtIconFlag },\n];\n\nconst tabs = computed(() => {\n  const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);\n\n  return tabsData.map((tab, index) => ({\n    ...tab,\n    label: props.tabsetLabels[index],\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.unicode_character)\"\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-len */\n/* eslint-disable max-lines */\nimport { emojisGrouped as emojis } from '@dialpad/dialtone-emojis';\nimport { computed, onMounted, onUnmounted, 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\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 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'];\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 list is empty\n * If it is empty, it will remove the recently used tab\n */\nconst tabLabels = computed(() => {\n  return props.recentlyUsedEmojis.length\n    ? props.tabsetLabels.map((label) => ({ label, ref: ref(null) }))\n    : props.tabsetLabels.slice(1).map((label) => ({ label, ref: ref(null) }));\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 is empty\n * If it is empty, it will remove the recently used tab\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  return props.recentlyUsedEmojis.length ? TABS_DATA : TABS_DATA.slice(1);\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 * 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 * 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  return `${CDN_URL + emoji}.png`;\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\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/* eslint-disable-next-line complexity */\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});\n\nonUnmounted(() => {\n  tabLabelObserver.value.disconnect();\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\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-recently-used-tab=\"showRecentlyUsedTab\"\n        :scroll-into-tab=\"scrollIntoTab\"\n        :tabset-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        :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      />\n    </div>\n    <div class=\"d-emoji-picker--footer\">\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 { computed, ref, watch } from 'vue';\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 placeholder text for the search input\n   * @type {String}\n   * @required\n   * @example\n   * <dt-emoji-picker :searchPlaceholderLabel=\"'Search...'\" />\n   */\n  searchPlaceholderLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The label for the search results tab\n   * @type {String}\n   * @required\n   * @example\n   * <dt-emoji-picker :searchResultsLabel=\"'Search results'\" />\n   */\n  searchResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The label for the search no results\n   * @type {String}\n   * @required\n   * @example\n   * <dt-emoji-picker :searchNoResultsLabel=\"'No results'\" />\n   */\n  searchNoResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The list of tabsets to show, it is necessary to be updated with the correct language\n   * It must respect the provided order.\n   * @type {Array}\n   * @required\n   * @example\n   * <dt-emoji-picker\n   *  :tabSetLabels=\"['Most recently used', 'Smileys and people', 'Nature',\n   *    'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags']\" />\n   */\n  tabSetLabels: {\n    type: Array,\n    required: true,\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   * Tooltip shown when skin selector button is hovered.\n   * @type {String}\n   * @required\n   * @example\n   * <dt-emoji-picker :skin-selector-button-tooltip-label=\"'Change default skin tone'\" />\n   */\n  skinSelectorButtonTooltipLabel: {\n    type: String,\n    required: true,\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\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     * 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\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);\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 tabName {String} - The name of the tab that was selected\n */\nfunction scrollToSelectedTabset (tabId) {\n  internalSearchQuery.value = '';\n  selectedTabset.value = tabId;\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"],"names":["emits","__emit","searchInput","ref","clearSearch","focusSearchInput","onMounted","__expose","props","__props","TABS_DATA","EMOJI_PICKER_CATEGORIES","DtIconClock","DtIconSatisfied","DtIconLivingThing","DtIconFood","DtIconObject","DtIconTransportation","DtIconLightbulb","DtIconHeart","DtIconFlag","tabs","computed","tab","index","isSearching","selectedTab","tabsetRef","watch","selectTabset","id","parseId","setTabsetRef","returnFirstEl","focusTabset","handleKeyDown","event","tabId","useKeyboardNavigation","emojiRefs","emojiFilteredRefs","isFiltering","hoverFirstEmoji","_handleArrowLeft","indexTab","indexEmoji","focusEmoji","_handleArrowRight","_handleArrowLeftFiltered","_handleArrowRightFiltered","_handleHorizontalNavigation","direction","emojiRef","_a","_c","_b","setEmojiRef","el","setFilteredRef","handleArrowNavigationFiltered","key","ARROW_KEYS","position","EMOJIS_PER_ROW","lastEmojiPosition","handleArrowNavigation","numberOfMissingEmojis","emojiToJump","previousTab","emojisInPreviousTab","tabCategoryRef","listRef","tabLabelObserver","tabLabels","label","fixedLabel","filteredEmojis","currentEmojis","emojis","debouncedSearch","debounce","searchByNameAndKeywords","resetScroll","highlightEmoji","scrollToTab","hoverEmoji","emoji","isFirst","searchStr","obj","nameIncludesSearchStr","keywordsIncludeSearchStr","keyword","nextTick","fn","delay","timeout","args","getImgSrc","CDN_URL","handleImageError","tabIndex","focusFirstEmoji","tabElement","container","offsetTop","setTabLabelObserver","entries","entry","target","_d","_e","child","handleKeyDownFilteredEmojis","selectEmoji","focusEmojiSelector","focusLastEmoji","onUnmounted","skinList","EMOJI_PICKER_SKIN_TONE_MODIFIERS","isOpen","skinSelectorRef","skinsRef","watchEffect","skinPassedIn","skin","skinSelected","setSkinsRef","focusSkinSelector","selectSkin","toggleSkinList","internalSearchQuery","highlightedEmoji","selectedTabset","scrollIntoTab","showRecentlyUsedTab","newValue","scrollToSelectedTabset","updateScrollIntoTab","value","updateHighlightedEmoji"],"mappings":"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"}

package/dist/vue3/lib/emoji-picker/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("./emoji-picker.cjs"),_=require("./emoji-picker-constants.cjs");exports.DtEmojiPicker=E.default;exports.ARROW_KEYS=_.ARROW_KEYS;exports.CDN_URL=_.CDN_URL;exports.EMOJIS_PER_ROW=_.EMOJIS_PER_ROW;exports.EMOJI_PICKER_CATEGORIES=_.EMOJI_PICKER_CATEGORIES;exports.EMOJI_PICKER_SKIN_TONE_MODIFIERS=_.EMOJI_PICKER_SKIN_TONE_MODIFIERS;
+//# sourceMappingURL=index.cjs.map

package/dist/vue3/lib/emoji-picker/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/vue3/lib/emoji-picker/index.js

@@ -0,0 +1,11 @@
+import { default as I } from "./emoji-picker.js";
+import { ARROW_KEYS as O, CDN_URL as o, EMOJIS_PER_ROW as r, EMOJI_PICKER_CATEGORIES as S, EMOJI_PICKER_SKIN_TONE_MODIFIERS as e } from "./emoji-picker-constants.js";
+export {
+  O as ARROW_KEYS,
+  o as CDN_URL,
+  I as DtEmojiPicker,
+  r as EMOJIS_PER_ROW,
+  S as EMOJI_PICKER_CATEGORIES,
+  e as EMOJI_PICKER_SKIN_TONE_MODIFIERS
+};
+//# sourceMappingURL=index.js.map

package/dist/vue3/lib/emoji-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/vue3/lib/emoji-row/emoji-row-constants.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=["emojiUnicodeOrShortname","isSelected","ariaLabel","tooltip","num"],t={REACTIONS_ATTRIBUTES:e};exports.REACTIONS_ATTRIBUTES=e;exports.default=t;
+//# sourceMappingURL=emoji-row-constants.cjs.map

package/dist/vue3/lib/emoji-row/emoji-row-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-row-constants.cjs","sources":["../../../recipes/conversation_view/emoji_row/emoji_row_constants.js"],"sourcesContent":["export const REACTIONS_ATTRIBUTES = [\n  'emojiUnicodeOrShortname',\n  'isSelected',\n  'ariaLabel',\n  'tooltip',\n  'num',\n];\n\nexport default {\n  REACTIONS_ATTRIBUTES,\n};\n"],"names":["REACTIONS_ATTRIBUTES","emoji_row_constants"],"mappings":"4GAAY,MAACA,EAAuB,CAClC,0BACA,aACA,YACA,UACA,KACF,EAEeC,EAAA,CACb,qBAAAD,CACF"}

package/dist/vue3/lib/emoji-row/emoji-row-constants.js

@@ -0,0 +1,14 @@
+const o = [
+  "emojiUnicodeOrShortname",
+  "isSelected",
+  "ariaLabel",
+  "tooltip",
+  "num"
+], e = {
+  REACTIONS_ATTRIBUTES: o
+};
+export {
+  o as REACTIONS_ATTRIBUTES,
+  e as default
+};
+//# sourceMappingURL=emoji-row-constants.js.map

package/dist/vue3/lib/emoji-row/emoji-row-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-row-constants.js","sources":["../../../recipes/conversation_view/emoji_row/emoji_row_constants.js"],"sourcesContent":["export const REACTIONS_ATTRIBUTES = [\n  'emojiUnicodeOrShortname',\n  'isSelected',\n  'ariaLabel',\n  'tooltip',\n  'num',\n];\n\nexport default {\n  REACTIONS_ATTRIBUTES,\n};\n"],"names":["REACTIONS_ATTRIBUTES","emoji_row_constants"],"mappings":"AAAY,MAACA,IAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEeC,IAAA;AAAA,EACb,sBAAAD;AACF;"}

package/dist/vue3/lib/emoji-row/emoji-row.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("./emoji-row-constants.cjs"),e=require("vue"),_=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),u=require("../tooltip/tooltip.cjs"),j=require("../button/button.cjs"),h=require("../emoji/emoji.cjs"),f=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),w={compatConfig:{MODE:3},name:"DtRecipeEmojiRow",components:{DtTooltip:u.default,DtButton:j.default,DtEmoji:h.default,DtEmojiTextWrapper:f.default},mixins:[],props:{reactions:{type:Array,default:()=>[],validator:o=>{for(const i of o)if(!p.REACTIONS_ATTRIBUTES.every(c=>i[c]!==void 0))return!1;return!0}}},emits:["emoji-clicked","emoji-hovered"],methods:{emojiClicked(o){this.$emit("emoji-clicked",o.emojiUnicodeOrShortname)},emojiHovered(o,i){this.$emit("emoji-hovered",{reaction:o.emojiUnicodeOrShortname,state:i})}}},b={class:"d-recipe-emoji-row"},v=["reaction"],C={"aria-hidden":"true"},k={class:"d-recipe-emoji-row__emoji"},S={class:"d-recipe-emoji-row__reaction-number"};function x(o,i,n,c,T,a){const s=e.resolveComponent("dt-emoji-text-wrapper"),l=e.resolveComponent("dt-emoji"),d=e.resolveComponent("dt-button"),m=e.resolveComponent("dt-tooltip");return e.openBlock(),e.createElementBlock("span",b,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.reactions,t=>(e.openBlock(),e.createElementBlock("span",{key:t.unicodeOutput,reaction:t},[e.createVNode(m,{class:"d-recipe-emoji-row__tooltip","content-class":"d-recipe-emoji-row__tooltip-content",sticky:"popper",onShown:r=>a.emojiHovered(t,r)},{anchor:e.withCtx(({attrs:r})=>[e.createVNode(d,{importance:"clear",size:"sm","data-qa":"feed-item-reaction-button",class:e.normalizeClass(["d-recipe-emoji-row__reaction",t.isSelected?"d-recipe-emoji-row__reaction--selected":""]),"aria-label":t.ariaLabel,attrs:r,onClick:N=>a.emojiClicked(t)},{default:e.withCtx(()=>[e.createElementVNode("span",k,[e.createVNode(l,{size:"200",code:t.emojiUnicodeOrShortname},null,8,["code"])]),e.createElementVNode("span",S,e.toDisplayString(t.num),1)]),_:2},1032,["class","aria-label","attrs","onClick"])]),default:e.withCtx(()=>[e.createElementVNode("span",C,[e.createVNode(s,{size:"200"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.tooltip),1)]),_:2},1024)])]),_:2},1032,["onShown"])],8,v))),128)),e.renderSlot(o.$slots,"picker")])}const E=_._(w,[["render",x]]);exports.default=E;
+//# sourceMappingURL=emoji-row.cjs.map

package/dist/vue3/lib/emoji-row/emoji-row.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-row.cjs","sources":["../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["<template>\n  <span class=\"d-recipe-emoji-row\">\n    <span\n      v-for=\"reaction in reactions\"\n      :key=\"reaction.unicodeOutput\"\n      :reaction=\"reaction\"\n    >\n      <dt-tooltip\n        class=\"d-recipe-emoji-row__tooltip\"\n        content-class=\"d-recipe-emoji-row__tooltip-content\"\n        sticky=\"popper\"\n        @shown=\"(shown) => emojiHovered(reaction, shown)\"\n      >\n        <span aria-hidden=\"true\">\n          <dt-emoji-text-wrapper size=\"200\">\n            {{ reaction.tooltip }}\n          </dt-emoji-text-wrapper>\n        </span>\n        <template #anchor=\"{ attrs }\">\n          <dt-button\n            importance=\"clear\"\n            size=\"sm\"\n            data-qa=\"feed-item-reaction-button\"\n            :class=\"[\n              'd-recipe-emoji-row__reaction',\n              reaction.isSelected ? 'd-recipe-emoji-row__reaction--selected' : '',\n            ]\"\n            :aria-label=\"reaction.ariaLabel\"\n            :attrs=\"attrs\"\n            @click=\"emojiClicked(reaction)\"\n          >\n            <span class=\"d-recipe-emoji-row__emoji\">\n              <dt-emoji\n                size=\"200\"\n                :code=\"reaction.emojiUnicodeOrShortname\"\n              />\n            </span>\n            <span class=\"d-recipe-emoji-row__reaction-number\">\n              {{ reaction.num }}\n            </span>\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </span>\n    <!-- @slot Slot for emoji picker component, including the anchor. -->\n    <slot name=\"picker\" />\n  </span>\n</template>\n\n<script>\nimport { REACTIONS_ATTRIBUTES } from './emoji_row_constants.js';\nimport { DtButton } from '../../../components/button';\nimport { DtTooltip } from '../../../components/tooltip';\nimport { DtEmoji } from '../../../components/emoji';\nimport { DtEmojiTextWrapper } from '../../../components/emoji_text_wrapper';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeEmojiRow',\n\n  components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n  mixins: [],\n\n  props: {\n    /**\n     * Provide an array of reaction objects to be shown.\n     */\n    reactions: {\n      type: Array,\n      default: () => [],\n      validator: (reactions) => {\n        for (const reaction of reactions) {\n          const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== undefined ?? false);\n          if (!validInput) return false;\n        }\n        return true;\n      },\n    },\n  },\n\n  emits: [\n    'emoji-clicked',\n    'emoji-hovered',\n  ],\n\n  methods: {\n    emojiClicked (reaction) {\n      this.$emit('emoji-clicked', reaction.emojiUnicodeOrShortname);\n    },\n\n    emojiHovered (reaction, state) {\n      this.$emit('emoji-hovered', {\n        reaction: reaction.emojiUnicodeOrShortname,\n        state,\n      });\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtTooltip","DtButton","DtEmoji","DtEmojiTextWrapper","reactions","reaction","REACTIONS_ATTRIBUTES","attribute","state","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_Fragment","_renderList","$props","_createVNode","_component_dt_tooltip","shown","$options","_withCtx","attrs","_component_dt_button","_normalizeClass","$event","_createElementVNode","_component_dt_emoji","_toDisplayString","_component_dt_emoji_text_wrapper","_createTextVNode","_renderSlot","_ctx"],"mappings":"oYAwDKA,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,mBAEN,WAAY,CAAA,UAAEC,EAAS,QAAA,SAAEC,UAAUC,QAAAA,EAAAA,QAASC,mBAAAA,EAAAA,OAAoB,EAEhE,OAAQ,CAAE,EAEV,MAAO,CAIL,UAAW,CACT,KAAM,MACN,QAAS,IAAM,CAAE,EACjB,UAAYC,GAAc,CACxB,UAAWC,KAAYD,EAErB,GAAI,CADeE,uBAAqB,MAAOC,GAAcF,EAASE,CAAS,IAAM,MAAkB,EACtF,MAAO,GAE1B,MAAO,EACR,CACF,CACF,EAED,MAAO,CACL,gBACA,eACD,EAED,QAAS,CACP,aAAcF,EAAU,CACtB,KAAK,MAAM,gBAAiBA,EAAS,uBAAuB,CAC7D,EAED,aAAcA,EAAUG,EAAO,CAC7B,KAAK,MAAM,gBAAiB,CAC1B,SAAUH,EAAS,wBACnB,MAAAG,CACF,CAAC,CACF,CACF,CACH,EAjGQC,EAAA,CAAA,MAAM,oBAAoB,EADlCC,EAAA,CAAA,UAAA,EAacC,EAAA,CAAA,cAAY,MAAM,EAkBdC,EAAA,CAAA,MAAM,2BAA2B,EAMjCC,EAAA,CAAA,MAAM,qCAAqC,oLApC3D,OAAAC,YAAA,EAAAC,qBA6CO,OA7CPN,EA6CO,EA5CLK,YAAA,EAAA,EAAAC,EAAAA,mBAyCOC,EA3CX,SAAA,KAAAC,EAAAA,WAGyBC,EAAS,UAArBb,kBADTU,EAyCO,mBAAA,OAAA,CAvCJ,IAAKV,EAAS,cACd,SAAUA,IAEXc,EAAAA,YAmCaC,EAAA,CAlCX,MAAM,8BACN,gBAAc,sCACd,OAAO,SACN,QAAQC,GAAUC,eAAajB,EAAUgB,CAAK,IAOpC,OAAME,EAAA,QACf,CAqBY,CAtBO,MAAAC,KAAK,CACxBL,EAAAA,YAqBYM,EAAA,CApBV,WAAW,QACX,KAAK,KACL,UAAQ,4BACP,MAvBbC,EAAAA,eAAA,gCAuBkFrB,EAAS,WAAU,yCAAA,KAIxF,aAAYA,EAAS,UACrB,MAAOmB,EACP,QAAKG,GAAEL,EAAY,aAACjB,CAAQ,IA7BzC,QAAAkB,EAAA,QA+BY,IAKO,CALPK,EAAA,mBAKO,OALPhB,EAKO,CAJLO,EAAAA,YAGEU,EAAA,CAFA,KAAK,MACJ,KAAMxB,EAAS,4CAGpBuB,EAAA,mBAEO,OAFPf,EACKiB,EAAAA,gBAAAzB,EAAS,GAAG,EAAA,CAAA,IAtC7B,EAAA,oDAAA,QAAAkB,EAAA,QAaQ,IAIO,CAJPK,EAAA,mBAIO,OAJPjB,EAIO,CAHLQ,EAAAA,YAEwBY,EAAA,CAFD,KAAK,KAAK,EAAA,CAd3C,QAAAR,EAAA,QAeY,IAAsB,CAflCS,EAAAA,gBAeeF,EAAAA,gBAAAzB,EAAS,OAAO,EAAA,CAAA,IAf/B,EAAA,aAAA,EAAA,oBAAA,EAAA,EAAAK,CAAA,UA6CIuB,aAAsBC,EAAA,OAAA,QAAA"}

package/dist/vue3/lib/emoji-row/emoji-row.js

@@ -0,0 +1,101 @@
+import { REACTIONS_ATTRIBUTES as w } from "./emoji-row-constants.js";
+import { resolveComponent as i, openBlock as s, createElementBlock as a, Fragment as k, renderList as v, createVNode as r, withCtx as n, normalizeClass as S, createElementVNode as m, toDisplayString as _, createTextVNode as C, renderSlot as x } from "vue";
+import { _ as E } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import b from "../tooltip/tooltip.js";
+import D from "../button/button.js";
+import T from "../emoji/emoji.js";
+import y from "../emoji-text-wrapper/emoji-text-wrapper.js";
+const O = {
+  compatConfig: { MODE: 3 },
+  name: "DtRecipeEmojiRow",
+  components: { DtTooltip: b, DtButton: D, DtEmoji: T, DtEmojiTextWrapper: y },
+  mixins: [],
+  props: {
+    /**
+     * Provide an array of reaction objects to be shown.
+     */
+    reactions: {
+      type: Array,
+      default: () => [],
+      validator: (o) => {
+        for (const t of o)
+          if (!w.every((p) => t[p] !== void 0)) return !1;
+        return !0;
+      }
+    }
+  },
+  emits: [
+    "emoji-clicked",
+    "emoji-hovered"
+  ],
+  methods: {
+    emojiClicked(o) {
+      this.$emit("emoji-clicked", o.emojiUnicodeOrShortname);
+    },
+    emojiHovered(o, t) {
+      this.$emit("emoji-hovered", {
+        reaction: o.emojiUnicodeOrShortname,
+        state: t
+      });
+    }
+  }
+}, $ = { class: "d-recipe-emoji-row" }, z = ["reaction"], B = { "aria-hidden": "true" }, I = { class: "d-recipe-emoji-row__emoji" }, N = { class: "d-recipe-emoji-row__reaction-number" };
+function R(o, t, d, p, U, l) {
+  const u = i("dt-emoji-text-wrapper"), j = i("dt-emoji"), f = i("dt-button"), h = i("dt-tooltip");
+  return s(), a("span", $, [
+    (s(!0), a(k, null, v(d.reactions, (e) => (s(), a("span", {
+      key: e.unicodeOutput,
+      reaction: e
+    }, [
+      r(h, {
+        class: "d-recipe-emoji-row__tooltip",
+        "content-class": "d-recipe-emoji-row__tooltip-content",
+        sticky: "popper",
+        onShown: (c) => l.emojiHovered(e, c)
+      }, {
+        anchor: n(({ attrs: c }) => [
+          r(f, {
+            importance: "clear",
+            size: "sm",
+            "data-qa": "feed-item-reaction-button",
+            class: S([
+              "d-recipe-emoji-row__reaction",
+              e.isSelected ? "d-recipe-emoji-row__reaction--selected" : ""
+            ]),
+            "aria-label": e.ariaLabel,
+            attrs: c,
+            onClick: (g) => l.emojiClicked(e)
+          }, {
+            default: n(() => [
+              m("span", I, [
+                r(j, {
+                  size: "200",
+                  code: e.emojiUnicodeOrShortname
+                }, null, 8, ["code"])
+              ]),
+              m("span", N, _(e.num), 1)
+            ]),
+            _: 2
+          }, 1032, ["class", "aria-label", "attrs", "onClick"])
+        ]),
+        default: n(() => [
+          m("span", B, [
+            r(u, { size: "200" }, {
+              default: n(() => [
+                C(_(e.tooltip), 1)
+              ]),
+              _: 2
+            }, 1024)
+          ])
+        ]),
+        _: 2
+      }, 1032, ["onShown"])
+    ], 8, z))), 128)),
+    x(o.$slots, "picker")
+  ]);
+}
+const W = /* @__PURE__ */ E(O, [["render", R]]);
+export {
+  W as default
+};
+//# sourceMappingURL=emoji-row.js.map

package/dist/vue3/lib/emoji-row/emoji-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-row.js","sources":["../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["<template>\n  <span class=\"d-recipe-emoji-row\">\n    <span\n      v-for=\"reaction in reactions\"\n      :key=\"reaction.unicodeOutput\"\n      :reaction=\"reaction\"\n    >\n      <dt-tooltip\n        class=\"d-recipe-emoji-row__tooltip\"\n        content-class=\"d-recipe-emoji-row__tooltip-content\"\n        sticky=\"popper\"\n        @shown=\"(shown) => emojiHovered(reaction, shown)\"\n      >\n        <span aria-hidden=\"true\">\n          <dt-emoji-text-wrapper size=\"200\">\n            {{ reaction.tooltip }}\n          </dt-emoji-text-wrapper>\n        </span>\n        <template #anchor=\"{ attrs }\">\n          <dt-button\n            importance=\"clear\"\n            size=\"sm\"\n            data-qa=\"feed-item-reaction-button\"\n            :class=\"[\n              'd-recipe-emoji-row__reaction',\n              reaction.isSelected ? 'd-recipe-emoji-row__reaction--selected' : '',\n            ]\"\n            :aria-label=\"reaction.ariaLabel\"\n            :attrs=\"attrs\"\n            @click=\"emojiClicked(reaction)\"\n          >\n            <span class=\"d-recipe-emoji-row__emoji\">\n              <dt-emoji\n                size=\"200\"\n                :code=\"reaction.emojiUnicodeOrShortname\"\n              />\n            </span>\n            <span class=\"d-recipe-emoji-row__reaction-number\">\n              {{ reaction.num }}\n            </span>\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </span>\n    <!-- @slot Slot for emoji picker component, including the anchor. -->\n    <slot name=\"picker\" />\n  </span>\n</template>\n\n<script>\nimport { REACTIONS_ATTRIBUTES } from './emoji_row_constants.js';\nimport { DtButton } from '../../../components/button';\nimport { DtTooltip } from '../../../components/tooltip';\nimport { DtEmoji } from '../../../components/emoji';\nimport { DtEmojiTextWrapper } from '../../../components/emoji_text_wrapper';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeEmojiRow',\n\n  components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n  mixins: [],\n\n  props: {\n    /**\n     * Provide an array of reaction objects to be shown.\n     */\n    reactions: {\n      type: Array,\n      default: () => [],\n      validator: (reactions) => {\n        for (const reaction of reactions) {\n          const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== undefined ?? false);\n          if (!validInput) return false;\n        }\n        return true;\n      },\n    },\n  },\n\n  emits: [\n    'emoji-clicked',\n    'emoji-hovered',\n  ],\n\n  methods: {\n    emojiClicked (reaction) {\n      this.$emit('emoji-clicked', reaction.emojiUnicodeOrShortname);\n    },\n\n    emojiHovered (reaction, state) {\n      this.$emit('emoji-hovered', {\n        reaction: reaction.emojiUnicodeOrShortname,\n        state,\n      });\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtTooltip","DtButton","DtEmoji","DtEmojiTextWrapper","reactions","reaction","REACTIONS_ATTRIBUTES","attribute","state","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_Fragment","_renderList","$props","_createVNode","_component_dt_tooltip","shown","$options","_withCtx","attrs","_component_dt_button","_normalizeClass","$event","_createElementVNode","_component_dt_emoji","_toDisplayString","_component_dt_emoji_text_wrapper","_createTextVNode","_renderSlot","_ctx"],"mappings":";;;;;;;AAwDA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY,EAAE,WAAAC,GAAW,UAAAC,GAAU,SAAAC,GAASC,oBAAAA,EAAoB;AAAA,EAEhE,QAAQ,CAAE;AAAA,EAEV,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,WAAW,CAACC,MAAc;AACxB,mBAAWC,KAAYD;AAErB,cAAI,CADeE,EAAqB,MAAM,CAACC,MAAcF,EAASE,CAAS,MAAM,MAAkB,EACtF,QAAO;AAE1B,eAAO;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL;AAAA,IACA;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,aAAcF,GAAU;AACtB,WAAK,MAAM,iBAAiBA,EAAS,uBAAuB;AAAA,IAC7D;AAAA,IAED,aAAcA,GAAUG,GAAO;AAC7B,WAAK,MAAM,iBAAiB;AAAA,QAC1B,UAAUH,EAAS;AAAA,QACnB,OAAAG;AAAA,MACF,CAAC;AAAA,IACF;AAAA,EACF;AACH,GAjGQC,IAAA,EAAA,OAAM,qBAAoB,GADlCC,IAAA,CAAA,UAAA,GAacC,IAAA,EAAA,eAAY,OAAM,GAkBdC,IAAA,EAAA,OAAM,4BAA2B,GAMjCC,IAAA,EAAA,OAAM,sCAAqC;;;AApC3D,SAAAC,EAAA,GAAAC,EA6CO,QA7CPN,GA6CO;AAAA,KA5CLK,EAAA,EAAA,GAAAC,EAyCOC,GA3CX,MAAAC,EAGyBC,EAAS,WAHlC,CAGab,YADTU,EAyCO,QAAA;AAAA,MAvCJ,KAAKV,EAAS;AAAA,MACd,UAAUA;AAAA;MAEXc,EAmCaC,GAAA;AAAA,QAlCX,OAAM;AAAA,QACN,iBAAc;AAAA,QACd,QAAO;AAAA,QACN,UAAQC,MAAUC,eAAajB,GAAUgB,CAAK;AAAA;QAOpC,QAAME,EACf,CAqBY,EAtBO,OAAAC,QAAK;AAAA,UACxBL,EAqBYM,GAAA;AAAA,YApBV,YAAW;AAAA,YACX,MAAK;AAAA,YACL,WAAQ;AAAA,YACP,OAvBbC,EAAA;AAAA;cAuBkFrB,EAAS,aAAU,2CAAA;AAAA;YAIxF,cAAYA,EAAS;AAAA,YACrB,OAAOmB;AAAA,YACP,SAAK,CAAAG,MAAEL,EAAY,aAACjB,CAAQ;AAAA;YA7BzC,SAAAkB,EA+BY,MAKO;AAAA,cALPK,EAKO,QALPhB,GAKO;AAAA,gBAJLO,EAGEU,GAAA;AAAA,kBAFA,MAAK;AAAA,kBACJ,MAAMxB,EAAS;AAAA;;cAGpBuB,EAEO,QAFPf,GACKiB,EAAAzB,EAAS,GAAG,GAAA,CAAA;AAAA;YAtC7B,GAAA;AAAA;;QAAA,SAAAkB,EAaQ,MAIO;AAAA,UAJPK,EAIO,QAJPjB,GAIO;AAAA,YAHLQ,EAEwBY,GAAA,EAFD,MAAK,MAAK,GAAA;AAAA,cAd3C,SAAAR,EAeY,MAAsB;AAAA,gBAflCS,EAeeF,EAAAzB,EAAS,OAAO,GAAA,CAAA;AAAA;cAf/B,GAAA;AAAA;;;QAAA,GAAA;AAAA;IAAA,GAAA,GAAAK,CAAA;IA6CIuB,EAAsBC,EAAA,QAAA,QAAA;AAAA;;;"}

package/dist/vue3/lib/emoji-row/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./emoji-row.cjs"),o=require("./emoji-row-constants.cjs");exports.DtRecipeEmojiRow=e.default;exports.REACTIONS_ATTRIBUTES=o.REACTIONS_ATTRIBUTES;
+//# sourceMappingURL=index.cjs.map

package/dist/vue3/lib/emoji-row/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/vue3/lib/emoji-row/index.js

@@ -0,0 +1,7 @@
+import { default as r } from "./emoji-row.js";
+import { REACTIONS_ATTRIBUTES as R } from "./emoji-row-constants.js";
+export {
+  r as DtRecipeEmojiRow,
+  R as REACTIONS_ATTRIBUTES
+};
+//# sourceMappingURL=index.js.map

package/dist/vue3/lib/emoji-row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/vue3/lib/emoji-text-wrapper/emoji-text-wrapper.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../../common/emoji/index.cjs"),n=require("vue"),c=require("../icon/icon-constants.cjs"),a=require("../emoji/emoji.cjs"),l=n.h(n.resolveDynamicComponent(null)).type,p={compatConfig:{MODE:3},name:"DtEmojiTextWrapper",components:{DtEmoji:a.default},props:{elementType:{type:String,default:"div"},size:{type:String,default:"500",validator:e=>Object.keys(c.ICON_SIZE_MODIFIERS).includes(e)}},data(){return{loadingEmojiJson:!0}},async created(){this.loadingEmojiJson=!1},methods:{replaceDtEmojis(e,t){if(!e.length)return t;const r=e.map(s=>s.replace(/\*/g,"\\*")),i=new RegExp(`(${r.join("|")})`,"g");return t.split(i).filter(s=>s.trim()!=="").map(s=>e.includes(s)?n.h(a.default,{code:s,size:this.size}):n.h("span",{class:"d-emoji-text-wrapper__text"},s))},searchVNodes(e){var r;if(typeof e=="string")return this.searchCodes(e);if(e.type===l)return e;if(typeof e.type=="symbol")return this.searchCodes(e.children);if((r=e.props)!=null&&r.innerHTML)return this.searchVNodes(e.props.innerHTML);const t=Array.isArray(e.children)?e.children:[e.children];return n.h(e.type,e.props,t.map(i=>this.searchVNodes(i)))},replaceVueComponentVNodeContent(e){},searchCodes(e){const t=o.findShortCodes(e),r=o.findEmojis(e),i=[...t,...r];return i.length===0?e:this.replaceDtEmojis(i,e)}},render(){const e=this.$slots.default?this.$slots.default():[];return n.h(this.elementType,{"data-qa":"emoji-text-wrapper",class:"d-emoji-text-wrapper"},this.loadingEmojiJson?e:e.map(t=>this.searchVNodes(t)))}};exports.default=p;
+//# sourceMappingURL=emoji-text-wrapper.cjs.map

package/dist/vue3/lib/emoji-text-wrapper/emoji-text-wrapper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-text-wrapper.cjs","sources":["../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h, resolveDynamicComponent } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\nconst COMMENT_TYPE = h(resolveDynamicComponent(null)).type;\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at: 100 to 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      if (!replaceList.length) return textContent;\n      // Escape the asterisk to avoid breaking the regex for the asterisk emoji\n      const escapedReplaceList = replaceList.map(item =>\n        item.replace(/\\*/g, '\\\\*'),\n      );\n\n      const regexp = new RegExp(`(${escapedReplaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          if (replaceList.includes(item)) {\n            return h(DtEmoji, { code: item, size: this.size });\n          }\n          return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n        });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      if (typeof VNode === 'string') return this.searchCodes(VNode);\n      if (VNode.type === COMMENT_TYPE) return VNode;\n      if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n      if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n      return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent (VNode) {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      if (replaceList.length === 0) return textContent;\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render () {\n    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":["COMMENT_TYPE","h","resolveDynamicComponent","_sfc_main","DtEmoji","t","ICON_SIZE_MODIFIERS","replaceList","textContent","escapedReplaceList","item","regexp","VNode","_a","children","VNodeChild","shortcodes","findShortCodes","emojis","findEmojis","defaultSlotContent"],"mappings":"qPAMMA,EAAeC,EAAAA,EAAEC,EAAAA,wBAAwB,IAAI,CAAC,EAAE,KAMjDC,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,qBAEN,WAAY,CACV,QAAAC,EAAO,OACR,EAED,MAAO,CAIL,YAAa,CACX,KAAM,OACN,QAAS,KACV,EAKD,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,qBAAmB,EAAE,SAASD,CAAC,CAC9D,CACF,EAED,MAAQ,CACN,MAAO,CACL,iBAAkB,GAErB,EAED,MAAM,SAAW,CACf,KAAK,iBAAmB,EACzB,EAED,QAAS,CAKP,gBAAiBE,EAAaC,EAAa,CACzC,GAAI,CAACD,EAAY,OAAQ,OAAOC,EAEhC,MAAMC,EAAqBF,EAAY,IAAIG,GACzCA,EAAK,QAAQ,MAAO,KAAK,GAGrBC,EAAS,IAAI,OAAO,IAAIF,EAAmB,KAAK,GAAG,CAAC,IAAK,GAAG,EAGlE,OAFcD,EAAY,MAAMG,CAAM,EAGnC,OAAOD,GAAQA,EAAK,KAAI,IAAO,EAAE,EACjC,IAAKA,GACAH,EAAY,SAASG,CAAI,EACpBT,EAAC,EAACG,EAAO,QAAE,CAAE,KAAMM,EAAM,KAAM,KAAK,IAAG,CAAG,EAE5CT,EAAAA,EAAE,OAAQ,CAAE,MAAO,4BAA2B,EAAKS,CAAI,CAC/D,CACJ,EAOD,aAAcE,EAAO,OACnB,GAAI,OAAOA,GAAU,SAAU,OAAO,KAAK,YAAYA,CAAK,EAC5D,GAAIA,EAAM,OAASZ,EAAc,OAAOY,EACxC,GAAI,OAAOA,EAAM,MAAS,SAAU,OAAO,KAAK,YAAYA,EAAM,QAAQ,EAC1E,IAAIC,EAAAD,EAAM,QAAN,MAAAC,EAAa,UAAW,OAAO,KAAK,aAAaD,EAAM,MAAM,SAAS,EAE1E,MAAME,EAAW,MAAM,QAAQF,EAAM,QAAQ,EAAIA,EAAM,SAAW,CAACA,EAAM,QAAQ,EACjF,OAAOX,EAAC,EAACW,EAAM,KAAMA,EAAM,MAAOE,EAAS,IAAIC,GAAc,KAAK,aAAaA,CAAU,CAAC,CAAC,CAC5F,EAGD,gCAAiCH,EAAO,CAEvC,EAOD,YAAaJ,EAAa,CACxB,MAAMQ,EAAaC,iBAAeT,CAAW,EACvCU,EAASC,aAAWX,CAAW,EAE/BD,EAAc,CAAC,GAAGS,EAAY,GAAGE,CAAM,EAC7C,OAAIX,EAAY,SAAW,EAAUC,EAC9B,KAAK,gBAAgBD,EAAaC,CAAW,CACrD,CACF,EAED,QAAU,CACR,MAAMY,EAAqB,KAAK,OAAO,QAAU,KAAK,OAAO,QAAU,EAAE,GACzE,OAAOnB,EAAC,EACN,KAAK,YACL,CACE,UAAW,qBACX,MAAO,sBACR,EACD,KAAK,iBACDmB,EACAA,EAAmB,IAAIR,GAAS,KAAK,aAAaA,CAAK,CAAC,EAE/D,CACH"}

package/dist/vue3/lib/emoji-text-wrapper/emoji-text-wrapper.js

@@ -0,0 +1,90 @@
+import { findShortCodes as a, findEmojis as p } from "../../common/emoji/index.js";
+import { h as n, resolveDynamicComponent as c } from "vue";
+import { ICON_SIZE_MODIFIERS as l } from "../icon/icon-constants.js";
+import o from "../emoji/emoji.js";
+const m = n(c(null)).type, j = {
+  compatConfig: { MODE: 3 },
+  name: "DtEmojiTextWrapper",
+  components: {
+    DtEmoji: o
+  },
+  props: {
+    /**
+     * Element type (tag name) to use for the wrapper.
+     */
+    elementType: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * The icon size to render the emojis at: 100 to 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (e) => Object.keys(l).includes(e)
+    }
+  },
+  data() {
+    return {
+      loadingEmojiJson: !0
+    };
+  },
+  async created() {
+    this.loadingEmojiJson = !1;
+  },
+  methods: {
+    /**
+     * Replaces the valid codes from the text content with a DtEmoji component.
+     * @returns {Array<VNode|string>}
+     */
+    replaceDtEmojis(e, r) {
+      if (!e.length) return r;
+      const s = e.map(
+        (t) => t.replace(/\*/g, "\\*")
+      ), i = new RegExp(`(${s.join("|")})`, "g");
+      return r.split(i).filter((t) => t.trim() !== "").map((t) => e.includes(t) ? n(o, { code: t, size: this.size }) : n("span", { class: "d-emoji-text-wrapper__text" }, t));
+    },
+    /**
+     * Recursively search the Vue virtual DOM to find text
+     * @param VNode
+     * @returns {VNode|*}
+     */
+    searchVNodes(e) {
+      var s;
+      if (typeof e == "string") return this.searchCodes(e);
+      if (e.type === m) return e;
+      if (typeof e.type == "symbol") return this.searchCodes(e.children);
+      if ((s = e.props) != null && s.innerHTML) return this.searchVNodes(e.props.innerHTML);
+      const r = Array.isArray(e.children) ? e.children : [e.children];
+      return n(e.type, e.props, r.map((i) => this.searchVNodes(i)));
+    },
+    // TODO: Find a way to crawl vue components
+    replaceVueComponentVNodeContent(e) {
+    },
+    /**
+     * Find codes in text.
+     * @param textContent string
+     * @returns {Array<VNode|string>|string}
+     */
+    searchCodes(e) {
+      const r = a(e), s = p(e), i = [...r, ...s];
+      return i.length === 0 ? e : this.replaceDtEmojis(i, e);
+    }
+  },
+  render() {
+    const e = this.$slots.default ? this.$slots.default() : [];
+    return n(
+      this.elementType,
+      {
+        "data-qa": "emoji-text-wrapper",
+        class: "d-emoji-text-wrapper"
+      },
+      this.loadingEmojiJson ? e : e.map((r) => this.searchVNodes(r))
+    );
+  }
+};
+export {
+  j as default
+};
+//# sourceMappingURL=emoji-text-wrapper.js.map

package/dist/vue3/lib/emoji-text-wrapper/emoji-text-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-text-wrapper.js","sources":["../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h, resolveDynamicComponent } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\nconst COMMENT_TYPE = h(resolveDynamicComponent(null)).type;\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at: 100 to 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      if (!replaceList.length) return textContent;\n      // Escape the asterisk to avoid breaking the regex for the asterisk emoji\n      const escapedReplaceList = replaceList.map(item =>\n        item.replace(/\\*/g, '\\\\*'),\n      );\n\n      const regexp = new RegExp(`(${escapedReplaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          if (replaceList.includes(item)) {\n            return h(DtEmoji, { code: item, size: this.size });\n          }\n          return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n        });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      if (typeof VNode === 'string') return this.searchCodes(VNode);\n      if (VNode.type === COMMENT_TYPE) return VNode;\n      if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n      if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n      return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent (VNode) {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      if (replaceList.length === 0) return textContent;\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render () {\n    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":["COMMENT_TYPE","h","resolveDynamicComponent","_sfc_main","DtEmoji","t","ICON_SIZE_MODIFIERS","replaceList","textContent","escapedReplaceList","item","regexp","VNode","_a","children","VNodeChild","shortcodes","findShortCodes","emojis","findEmojis","defaultSlotContent"],"mappings":";;;;AAMA,MAAMA,IAAeC,EAAEC,EAAwB,IAAI,CAAC,EAAE,MAMjDC,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,SAAAC;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACC,MAAM,OAAO,KAAKC,CAAmB,EAAE,SAASD,CAAC;AAAA,IAC9D;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,kBAAkB;AAAA;EAErB;AAAA,EAED,MAAM,UAAW;AACf,SAAK,mBAAmB;AAAA,EACzB;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,gBAAiBE,GAAaC,GAAa;AACzC,UAAI,CAACD,EAAY,OAAQ,QAAOC;AAEhC,YAAMC,IAAqBF,EAAY;AAAA,QAAI,CAAAG,MACzCA,EAAK,QAAQ,OAAO,KAAK;AAAA,SAGrBC,IAAS,IAAI,OAAO,IAAIF,EAAmB,KAAK,GAAG,CAAC,KAAK,GAAG;AAGlE,aAFcD,EAAY,MAAMG,CAAM,EAGnC,OAAO,CAAAD,MAAQA,EAAK,KAAI,MAAO,EAAE,EACjC,IAAI,CAACA,MACAH,EAAY,SAASG,CAAI,IACpBT,EAAEG,GAAS,EAAE,MAAMM,GAAM,MAAM,KAAK,KAAG,CAAG,IAE5CT,EAAE,QAAQ,EAAE,OAAO,6BAA2B,GAAKS,CAAI,CAC/D;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAcE,GAAO;;AACnB,UAAI,OAAOA,KAAU,SAAU,QAAO,KAAK,YAAYA,CAAK;AAC5D,UAAIA,EAAM,SAASZ,EAAc,QAAOY;AACxC,UAAI,OAAOA,EAAM,QAAS,SAAU,QAAO,KAAK,YAAYA,EAAM,QAAQ;AAC1E,WAAIC,IAAAD,EAAM,UAAN,QAAAC,EAAa,UAAW,QAAO,KAAK,aAAaD,EAAM,MAAM,SAAS;AAE1E,YAAME,IAAW,MAAM,QAAQF,EAAM,QAAQ,IAAIA,EAAM,WAAW,CAACA,EAAM,QAAQ;AACjF,aAAOX,EAAEW,EAAM,MAAMA,EAAM,OAAOE,EAAS,IAAI,CAAAC,MAAc,KAAK,aAAaA,CAAU,CAAC,CAAC;AAAA,IAC5F;AAAA;AAAA,IAGD,gCAAiCH,GAAO;AAAA,IAEvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAaJ,GAAa;AACxB,YAAMQ,IAAaC,EAAeT,CAAW,GACvCU,IAASC,EAAWX,CAAW,GAE/BD,IAAc,CAAC,GAAGS,GAAY,GAAGE,CAAM;AAC7C,aAAIX,EAAY,WAAW,IAAUC,IAC9B,KAAK,gBAAgBD,GAAaC,CAAW;AAAA,IACrD;AAAA,EACF;AAAA,EAED,SAAU;AACR,UAAMY,IAAqB,KAAK,OAAO,UAAU,KAAK,OAAO,QAAU,IAAE;AACzE,WAAOnB;AAAA,MACL,KAAK;AAAA,MACL;AAAA,QACE,WAAW;AAAA,QACX,OAAO;AAAA,MACR;AAAA,MACD,KAAK,mBACDmB,IACAA,EAAmB,IAAI,CAAAR,MAAS,KAAK,aAAaA,CAAK,CAAC;AAAA;EAE/D;AACH;"}

package/dist/vue3/lib/emoji-text-wrapper/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./emoji-text-wrapper.cjs");exports.DtEmojiTextWrapper=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/vue3/lib/emoji-text-wrapper/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/vue3/lib/emoji-text-wrapper/index.js

@@ -0,0 +1,5 @@
+import { default as t } from "./emoji-text-wrapper.js";
+export {
+  t as DtEmojiTextWrapper
+};
+//# sourceMappingURL=index.js.map

package/dist/vue3/lib/emoji-text-wrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/vue3/lib/empty-state/empty-state-constants.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={sm:"d-empty-state--size-sm",md:"d-empty-state--size-md",lg:"d-empty-state--size-lg"},_={sm:"d-empty-state__content--sm",md:"d-empty-state__content--md",lg:"d-empty-state__content--lg"},e={sm:"d-headline--md",md:"d-headline--xl",lg:"d-headline--xxl"},E={sm:"d-body--sm",md:"d-body--sm",lg:"d-body--md"},d={EMPTY_STATE_SIZE_MODIFIERS:t,EMPTY_STATE_CONTENT_SIZE_MODIFIERS:_,EMPTY_STATE_HEADLINE_SIZE_MODIFIERS:e,EMPTY_STATE_BODY_SIZE_MODIFIERS:E};exports.EMPTY_STATE_BODY_SIZE_MODIFIERS=E;exports.EMPTY_STATE_CONTENT_SIZE_MODIFIERS=_;exports.EMPTY_STATE_HEADLINE_SIZE_MODIFIERS=e;exports.EMPTY_STATE_SIZE_MODIFIERS=t;exports.default=d;
+//# sourceMappingURL=empty-state-constants.cjs.map

package/dist/vue3/lib/empty-state/empty-state-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state-constants.cjs","sources":["../../../components/empty_state/empty_state_constants.js"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n  sm: 'd-empty-state--size-sm',\n  md: 'd-empty-state--size-md',\n  lg: 'd-empty-state--size-lg',\n};\n\nexport const EMPTY_STATE_CONTENT_SIZE_MODIFIERS = {\n  sm: 'd-empty-state__content--sm',\n  md: 'd-empty-state__content--md',\n  lg: 'd-empty-state__content--lg',\n};\n\nexport const EMPTY_STATE_HEADLINE_SIZE_MODIFIERS = {\n  sm: 'd-headline--md',\n  md: 'd-headline--xl',\n  lg: 'd-headline--xxl',\n};\n\nexport const EMPTY_STATE_BODY_SIZE_MODIFIERS = {\n  sm: 'd-body--sm',\n  md: 'd-body--sm',\n  lg: 'd-body--md',\n};\n\nexport default {\n  EMPTY_STATE_SIZE_MODIFIERS,\n  EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n  EMPTY_STATE_HEADLINE_SIZE_MODIFIERS,\n  EMPTY_STATE_BODY_SIZE_MODIFIERS,\n};\n"],"names":["EMPTY_STATE_SIZE_MODIFIERS","EMPTY_STATE_CONTENT_SIZE_MODIFIERS","EMPTY_STATE_HEADLINE_SIZE_MODIFIERS","EMPTY_STATE_BODY_SIZE_MODIFIERS","empty_state_constants"],"mappings":"4GAAY,MAACA,EAA6B,CACxC,GAAI,yBACJ,GAAI,yBACJ,GAAI,wBACN,EAEaC,EAAqC,CAChD,GAAI,6BACJ,GAAI,6BACJ,GAAI,4BACN,EAEaC,EAAsC,CACjD,GAAI,iBACJ,GAAI,iBACJ,GAAI,iBACN,EAEaC,EAAkC,CAC7C,GAAI,aACJ,GAAI,aACJ,GAAI,YACN,EAEeC,EAAA,CACb,2BAAAJ,EACA,mCAAAC,EACA,oCAAAC,EACA,gCAAAC,CACF"}

package/dist/vue3/lib/empty-state/empty-state-constants.js

@@ -0,0 +1,30 @@
+const t = {
+  sm: "d-empty-state--size-sm",
+  md: "d-empty-state--size-md",
+  lg: "d-empty-state--size-lg"
+}, e = {
+  sm: "d-empty-state__content--sm",
+  md: "d-empty-state__content--md",
+  lg: "d-empty-state__content--lg"
+}, d = {
+  sm: "d-headline--md",
+  md: "d-headline--xl",
+  lg: "d-headline--xxl"
+}, s = {
+  sm: "d-body--sm",
+  md: "d-body--sm",
+  lg: "d-body--md"
+}, m = {
+  EMPTY_STATE_SIZE_MODIFIERS: t,
+  EMPTY_STATE_CONTENT_SIZE_MODIFIERS: e,
+  EMPTY_STATE_HEADLINE_SIZE_MODIFIERS: d,
+  EMPTY_STATE_BODY_SIZE_MODIFIERS: s
+};
+export {
+  s as EMPTY_STATE_BODY_SIZE_MODIFIERS,
+  e as EMPTY_STATE_CONTENT_SIZE_MODIFIERS,
+  d as EMPTY_STATE_HEADLINE_SIZE_MODIFIERS,
+  t as EMPTY_STATE_SIZE_MODIFIERS,
+  m as default
+};
+//# sourceMappingURL=empty-state-constants.js.map

package/dist/vue3/lib/empty-state/empty-state-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state-constants.js","sources":["../../../components/empty_state/empty_state_constants.js"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n  sm: 'd-empty-state--size-sm',\n  md: 'd-empty-state--size-md',\n  lg: 'd-empty-state--size-lg',\n};\n\nexport const EMPTY_STATE_CONTENT_SIZE_MODIFIERS = {\n  sm: 'd-empty-state__content--sm',\n  md: 'd-empty-state__content--md',\n  lg: 'd-empty-state__content--lg',\n};\n\nexport const EMPTY_STATE_HEADLINE_SIZE_MODIFIERS = {\n  sm: 'd-headline--md',\n  md: 'd-headline--xl',\n  lg: 'd-headline--xxl',\n};\n\nexport const EMPTY_STATE_BODY_SIZE_MODIFIERS = {\n  sm: 'd-body--sm',\n  md: 'd-body--sm',\n  lg: 'd-body--md',\n};\n\nexport default {\n  EMPTY_STATE_SIZE_MODIFIERS,\n  EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n  EMPTY_STATE_HEADLINE_SIZE_MODIFIERS,\n  EMPTY_STATE_BODY_SIZE_MODIFIERS,\n};\n"],"names":["EMPTY_STATE_SIZE_MODIFIERS","EMPTY_STATE_CONTENT_SIZE_MODIFIERS","EMPTY_STATE_HEADLINE_SIZE_MODIFIERS","EMPTY_STATE_BODY_SIZE_MODIFIERS","empty_state_constants"],"mappings":"AAAY,MAACA,IAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAqC;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAsC;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAkC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEeC,IAAA;AAAA,EACb,4BAAAJ;AAAA,EACA,oCAAAC;AAAA,EACA,qCAAAC;AAAA,EACA,iCAAAC;AACF;"}

package/dist/vue3/lib/empty-state/empty-state.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),n=require("../../common/utils/index.cjs"),s=require("./empty-state-constants.cjs"),u=require("../stack/stack.cjs"),T={key:0,class:"d-empty-state__illustration"},I={key:1,class:"d-empty-state__icon"},C={__name:"empty_state",props:{size:{type:String,default:"lg",validator:t=>Object.keys(s.EMPTY_STATE_SIZE_MODIFIERS).includes(t)},headerText:{type:String,required:!0},bodyText:{type:String,default:null}},setup(t){const l=e.useSlots(),o=t,d=e.computed(()=>n.hasSlotContent(l.icon)),c=e.computed(()=>n.hasSlotContent(l.illustration)),r=e.computed(()=>o.size==="sm"),i=e.computed(()=>d.value&&(!c.value||r.value)),m=e.computed(()=>c.value&&!r.value),_=e.computed(()=>s.EMPTY_STATE_SIZE_MODIFIERS[o.size]),S=e.computed(()=>["d-empty-state",_.value]),p=e.computed(()=>s.EMPTY_STATE_CONTENT_SIZE_MODIFIERS[o.size]),y=e.computed(()=>s.EMPTY_STATE_HEADLINE_SIZE_MODIFIERS[o.size]),E=e.computed(()=>s.EMPTY_STATE_BODY_SIZE_MODIFIERS[o.size]);return e.onMounted(()=>{!o.bodyText&&!n.hasSlotContent(l.body)&&console.error("DtEmptyState: You should provide either bodyText or content on body slot.")}),(a,h)=>(e.openBlock(),e.createBlock(e.unref(u.default),{class:e.normalizeClass(S.value)},{default:e.withCtx(()=>[m.value?(e.openBlock(),e.createElementBlock("span",T,[e.renderSlot(a.$slots,"illustration")])):e.createCommentVNode("",!0),i.value?(e.openBlock(),e.createElementBlock("span",I,[e.renderSlot(a.$slots,"icon",{iconSize:"800"})])):e.createCommentVNode("",!0),e.createVNode(e.unref(u.default),{gap:"450",class:e.normalizeClass(["d-empty-state__content",p.value])},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["d-empty-state__header-text",y.value])},e.toDisplayString(t.headerText),3),t.bodyText?(e.openBlock(),e.createElementBlock("p",{key:0,class:e.normalizeClass(["d-empty-state__body-text",E.value])},e.toDisplayString(t.bodyText),3)):e.createCommentVNode("",!0)]),_:1},8,["class"]),e.renderSlot(a.$slots,"body")]),_:3},8,["class"]))}};exports.default=C;
+//# sourceMappingURL=empty-state.cjs.map

package/dist/vue3/lib/empty-state/empty-state.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.cjs","sources":["../../../components/empty_state/empty_state.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <span\n      v-if=\"showIllustration\"\n      class=\"d-empty-state__illustration\"\n    >\n      <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n      <slot name=\"illustration\" />\n    </span>\n\n    <span\n      v-if=\"showIcon\"\n      class=\"d-empty-state__icon\"\n    >\n      <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"'800'\"\n      />\n    </span>\n\n    <dt-stack\n      gap=\"450\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <div :class=\"['d-empty-state__header-text', headlineClass]\">\n        {{ headerText }}\n      </div>\n\n      <p\n        v-if=\"bodyText\"\n        :class=\"['d-empty-state__body-text', bodyClass]\"\n      >\n        {{ bodyText }}\n      </p>\n    </dt-stack>\n\n    <slot name=\"body\" />\n  </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/stack';\nimport { hasSlotContent } from '@/common/utils';\nimport {\n  EMPTY_STATE_BODY_SIZE_MODIFIERS,\n  EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n  EMPTY_STATE_HEADLINE_SIZE_MODIFIERS,\n  EMPTY_STATE_SIZE_MODIFIERS,\n} from './empty_state_constants.js';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 'sm', 'md', 'lg'\n    */\n  size: {\n    type: String,\n    default: 'lg',\n    validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n});\n\nconst hasIcon = computed(() => {\n  return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\nconst isSmallSize = computed(() => props.size === 'sm');\n\n/**\n * Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n */\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value || isSmallSize.value));\n\n/**\n * Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[props.size]);\n\nconst headlineClass = computed(() => EMPTY_STATE_HEADLINE_SIZE_MODIFIERS[props.size]);\n\nconst bodyClass = computed(() => EMPTY_STATE_BODY_SIZE_MODIFIERS[props.size]);\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"names":["slots","useSlots","props","__props","hasIcon","computed","hasSlotContent","hasIllustration","isSmallSize","showIcon","showIllustration","sizeClass","EMPTY_STATE_SIZE_MODIFIERS","emptyStateClasses","contentClass","EMPTY_STATE_CONTENT_SIZE_MODIFIERS","headlineClass","EMPTY_STATE_HEADLINE_SIZE_MODIFIERS","bodyClass","EMPTY_STATE_BODY_SIZE_MODIFIERS","onMounted"],"mappings":"+hBAsDA,MAAMA,EAAQC,EAAQ,SAAA,EAEhBC,EAAQC,EA8BRC,EAAUC,EAAQ,SAAC,IAChBC,EAAc,eAACN,EAAM,IAAI,CACjC,EACKO,EAAkBF,EAAQ,SAAC,IAAMC,EAAAA,eAAeN,EAAM,YAAY,CAAC,EACnEQ,EAAcH,EAAAA,SAAS,IAAMH,EAAM,OAAS,IAAI,EAMhDO,EAAWJ,EAAAA,SAAS,IAAMD,EAAQ,QAAU,CAACG,EAAgB,OAASC,EAAY,MAAM,EAMxFE,EAAmBL,EAAQ,SAAC,IAAME,EAAgB,OAAS,CAACC,EAAY,KAAK,EAE7EG,EAAYN,EAAQ,SAAC,IAAMO,EAAAA,2BAA2BV,EAAM,IAAI,CAAC,EAEjEW,EAAoBR,EAAQ,SAAC,IAAM,CAAC,gBAAiBM,EAAU,KAAK,CAAC,EAErEG,EAAeT,EAAQ,SAAC,IAAMU,EAAAA,mCAAmCb,EAAM,IAAI,CAAC,EAE5Ec,EAAgBX,EAAQ,SAAC,IAAMY,EAAAA,oCAAoCf,EAAM,IAAI,CAAC,EAE9EgB,EAAYb,EAAQ,SAAC,IAAMc,EAAAA,gCAAgCjB,EAAM,IAAI,CAAC,EAE5EkB,OAAAA,EAAAA,UAAU,IAAM,CACV,CAAClB,EAAM,UAAY,CAACI,EAAAA,eAAeN,EAAM,IAAI,GAC/C,QAAQ,MAAM,2EAA2E,CAE7F,CAAC"}