@dialpad/dialtone 9.83.2 → 9.84.1

package/dist/vue2/common/emoji.cjs

@@ -140,6 +140,11 @@ function filterValidShortCodes(shortcodes) {
   const filtered = shortcodes ? shortcodes.filter((code) => shortcodeToEmojiData(code)) : [];
   return new Set(filtered);
 }
+function findEmojis(textContent) {
+  const matches = [...textContent.matchAll(emojiRegex)];
+  const emojis = matches.length ? matches.map((match) => match[0]) : [];
+  return new Set(emojis);
+}
 exports.codeToEmojiData = codeToEmojiData;
 exports.defaultEmojiAssetUrl = defaultEmojiAssetUrl;
 exports.emojiJson = emojiJson;
@@ -147,6 +152,7 @@ exports.emojiRegex = emojiRegex;
 exports.emojiShortCodeRegex = emojiShortCodeRegex;
 exports.emojiVersion = emojiVersion;
 exports.filterValidShortCodes = filterValidShortCodes;
+exports.findEmojis = findEmojis;
 exports.findShortCodes = findShortCodes;
 exports.getEmojiData = getEmojiData;
 exports.setCustomEmojiJson = setCustomEmojiJson;

package/dist/vue2/common/emoji.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.cjs","sources":["../../common/emoji/index.js"],"sourcesContent":["import { emojiPattern } from 'regex-combined-emojis';\nimport emojiJsonLocal from 'emoji-toolkit/emoji_strategy.json' with { type: 'json' };\n\nexport const emojiRegex = new RegExp(emojiPattern, 'g');\nexport const emojiVersion = '8.0';\nexport const defaultEmojiAssetUrl = 'https://cdn.jsdelivr.net/joypixels/assets/' + emojiVersion + '/png/unicode/32/';\nexport let customEmojiAssetUrl = null;\n\n// Used for emoji 16px and smaller\nexport let emojiImageUrlSmall = defaultEmojiAssetUrl;\nexport let emojiFileExtensionSmall = '.png';\n\n// Used for emoji larger than 16px\nexport let emojiImageUrlLarge = defaultEmojiAssetUrl;\nexport let emojiFileExtensionLarge = '.png';\n\nexport const emojiJson = emojiJsonLocal;\n\nexport const emojiShortCodeRegex = /(^| |(?<=:))(:\\w+:)/g;\n\nexport function getEmojiData () {\n  return emojiJson;\n}\n\nexport function setEmojiAssetUrlSmall (url, fileExtension = '.png') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlSmall = url;\n  emojiFileExtensionSmall = fileExtension;\n}\n\nexport function setEmojiAssetUrlLarge (url, fileExtension = '.svg') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlLarge = url;\n  emojiFileExtensionLarge = fileExtension;\n}\n\nexport function setCustomEmojiUrl (url) {\n  customEmojiAssetUrl = url;\n}\n\nexport function setCustomEmojiJson (json) {\n  validateCustomEmojiJson(json);\n}\n\n/**\n * Validate custom emoji json\n */\nexport function validateCustomEmojiJson (json) {\n  const customEmojiProps = ['extension', 'custom'];\n  const customEmojiRequiredProps = [\n    'name',\n    'category',\n    'shortname',\n    'extension',\n    'custom',\n  ];\n\n  /**\n   * Update single emoji properties.\n   * If the property exists in emojiData, it'll add the values if the property is an array, otherwise will overwrite.\n   * If not exists, will add the property to the emojiData object.\n   */\n  const _updateNativeEmojiData = (emojiData, propName, propValue) => {\n    if (emojiData[propName] === undefined) {\n      if (!customEmojiProps.includes(propName)) {\n        return;\n      }\n\n      // new property to add\n      emojiData[propName] = propValue;\n    } else {\n      if (Array.isArray(emojiData[propName])) {\n        emojiData[propName] = emojiData[propName].concat(propValue);\n      } else {\n        emojiData[propName] = propValue;\n      }\n    }\n  };\n\n  Object.entries(json).forEach((item) => {\n    const [customEmojiKey, customEmojiValue] = item;\n\n    if (customEmojiKey in emojiJson) {\n      // custom emoji exists in emoji json which means to update some data in the native emoji\n      const emojiData = emojiJson[customEmojiKey];\n\n      for (const customEmojiPropertyName in customEmojiValue) {\n        const customEmojiPropertyValue = customEmojiValue[customEmojiPropertyName];\n\n        _updateNativeEmojiData(emojiData, customEmojiPropertyName, customEmojiPropertyValue);\n      }\n    } else {\n      // new custom emoji\n      const _validateRequiredProps = () =>\n        customEmojiRequiredProps.every((val) => {\n          return customEmojiValue[val] !== undefined;\n        });\n\n      if (_validateRequiredProps()) {\n        emojiJson[customEmojiKey] = customEmojiValue;\n      } else {\n        console.error(\n          'The following custom emoji doesn\\'t contain the required properties:',\n          customEmojiValue,\n        );\n      }\n    }\n  });\n}\n\n// recursively searches the emoji data object containing data for all emojis\n// and returns the object with the specified shortcode.\nexport function shortcodeToEmojiData (shortcode) {\n  // eslint-disable-next-line complexity\n  function f (o, key) {\n    if (!o || typeof o !== 'object') {\n      return;\n    }\n    if ('shortname' in o) {\n      if (o.shortname === shortcode || o.shortname_alternates.includes(shortcode)) {\n        o.key = key;\n        reference = o;\n        return true;\n      }\n    }\n    Object.keys(o).some(function (k) {\n      return f(o[k], k);\n    });\n  }\n\n  let reference;\n  f(getEmojiData(), null);\n  return reference;\n}\n\n// Takes in an emoji unicode character(s) and converts it to an emoji string in the format the emoji data object expects\n// as a key. There can be multiple unicode characters in an emoji to denote the emoji itself, skin tone, gender\n// and such. Note that this function does NOT return variation selectors (fe0f) or zero width joiners (200d), as these\n// are not included as part of the key in the emoji.json.\n//\n// Example:\n// return value for smile emoji (no skin tone): 1f600\n// return value for left facing fist (light skin tone): 1f91b-1f3fb\nexport function unicodeToString (emoji) {\n  let key = '';\n  for (const codePoint of emoji) {\n    const codepoint = codePoint.codePointAt(0).toString(16).padStart(4, '0');\n\n    // skip 200d and fe0f as these are not included in emoji_strategy.json keys\n    if (['200d', 'fe0f'].includes(codepoint)) continue;\n    if (key !== '') { key = key + '-'; }\n    key = key + codepoint;\n  }\n  return key;\n}\n\n// Takes in unicode in string form ex: '1f91b-1f3fb' and converts it to an actual unicode character.\nexport function stringToUnicode (str) {\n  const uChars = str.split('-');\n  let result = '';\n  uChars.forEach((uChar) => {\n    result = result + String.fromCodePoint(parseInt(uChar, 16));\n  });\n  return result;\n}\n\n// Takes in a code (which could be unicode or shortcode) and returns the emoji data for it.\nexport function codeToEmojiData (code) {\n  code = code?.trim();\n  if (code.startsWith(':') && code.endsWith(':')) {\n    return shortcodeToEmojiData(code);\n  } else {\n    const unicodeString = unicodeToString(code);\n    const result = emojiJson[unicodeString];\n    if (result) result.key = unicodeString;\n    return result;\n  }\n}\n\n// Finds every shortcode in slot text\n// filters only the existing codes in emojiJson\n// removes duplicates.\n// @returns {string[]}\nexport function findShortCodes (textContent) {\n  const shortcodes = (\n    textContent.match(emojiShortCodeRegex) || []\n  ).map(code => code.trim());\n  return filterValidShortCodes(shortcodes);\n}\n\nexport function filterValidShortCodes (shortcodes) {\n  const filtered = shortcodes ? shortcodes.filter(code => shortcodeToEmojiData(code)) : [];\n  return new Set(filtered);\n}\n"],"names":["emojiPattern","customEmojiAssetUrl","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge"],"mappings":"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"}
+{"version":3,"file":"emoji.cjs","sources":["../../common/emoji/index.js"],"sourcesContent":["import { emojiPattern } from 'regex-combined-emojis';\nimport emojiJsonLocal from 'emoji-toolkit/emoji_strategy.json' with { type: 'json' };\n\nexport const emojiRegex = new RegExp(emojiPattern, 'g');\nexport const emojiVersion = '8.0';\nexport const defaultEmojiAssetUrl = 'https://cdn.jsdelivr.net/joypixels/assets/' + emojiVersion + '/png/unicode/32/';\nexport let customEmojiAssetUrl = null;\n\n// Used for emoji 16px and smaller\nexport let emojiImageUrlSmall = defaultEmojiAssetUrl;\nexport let emojiFileExtensionSmall = '.png';\n\n// Used for emoji larger than 16px\nexport let emojiImageUrlLarge = defaultEmojiAssetUrl;\nexport let emojiFileExtensionLarge = '.png';\n\nexport const emojiJson = emojiJsonLocal;\n\nexport const emojiShortCodeRegex = /(^| |(?<=:))(:\\w+:)/g;\n\nexport function getEmojiData () {\n  return emojiJson;\n}\n\nexport function setEmojiAssetUrlSmall (url, fileExtension = '.png') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlSmall = url;\n  emojiFileExtensionSmall = fileExtension;\n}\n\nexport function setEmojiAssetUrlLarge (url, fileExtension = '.svg') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlLarge = url;\n  emojiFileExtensionLarge = fileExtension;\n}\n\nexport function setCustomEmojiUrl (url) {\n  customEmojiAssetUrl = url;\n}\n\nexport function setCustomEmojiJson (json) {\n  validateCustomEmojiJson(json);\n}\n\n/**\n * Validate custom emoji json\n */\nexport function validateCustomEmojiJson (json) {\n  const customEmojiProps = ['extension', 'custom'];\n  const customEmojiRequiredProps = [\n    'name',\n    'category',\n    'shortname',\n    'extension',\n    'custom',\n  ];\n\n  /**\n   * Update single emoji properties.\n   * If the property exists in emojiData, it'll add the values if the property is an array, otherwise will overwrite.\n   * If not exists, will add the property to the emojiData object.\n   */\n  const _updateNativeEmojiData = (emojiData, propName, propValue) => {\n    if (emojiData[propName] === undefined) {\n      if (!customEmojiProps.includes(propName)) {\n        return;\n      }\n\n      // new property to add\n      emojiData[propName] = propValue;\n    } else {\n      if (Array.isArray(emojiData[propName])) {\n        emojiData[propName] = emojiData[propName].concat(propValue);\n      } else {\n        emojiData[propName] = propValue;\n      }\n    }\n  };\n\n  Object.entries(json).forEach((item) => {\n    const [customEmojiKey, customEmojiValue] = item;\n\n    if (customEmojiKey in emojiJson) {\n      // custom emoji exists in emoji json which means to update some data in the native emoji\n      const emojiData = emojiJson[customEmojiKey];\n\n      for (const customEmojiPropertyName in customEmojiValue) {\n        const customEmojiPropertyValue = customEmojiValue[customEmojiPropertyName];\n\n        _updateNativeEmojiData(emojiData, customEmojiPropertyName, customEmojiPropertyValue);\n      }\n    } else {\n      // new custom emoji\n      const _validateRequiredProps = () =>\n        customEmojiRequiredProps.every((val) => {\n          return customEmojiValue[val] !== undefined;\n        });\n\n      if (_validateRequiredProps()) {\n        emojiJson[customEmojiKey] = customEmojiValue;\n      } else {\n        console.error(\n          'The following custom emoji doesn\\'t contain the required properties:',\n          customEmojiValue,\n        );\n      }\n    }\n  });\n}\n\n// recursively searches the emoji data object containing data for all emojis\n// and returns the object with the specified shortcode.\nexport function shortcodeToEmojiData (shortcode) {\n  // eslint-disable-next-line complexity\n  function f (o, key) {\n    if (!o || typeof o !== 'object') {\n      return;\n    }\n    if ('shortname' in o) {\n      if (o.shortname === shortcode || o.shortname_alternates.includes(shortcode)) {\n        o.key = key;\n        reference = o;\n        return true;\n      }\n    }\n    Object.keys(o).some(function (k) {\n      return f(o[k], k);\n    });\n  }\n\n  let reference;\n  f(getEmojiData(), null);\n  return reference;\n}\n\n// Takes in an emoji unicode character(s) and converts it to an emoji string in the format the emoji data object expects\n// as a key. There can be multiple unicode characters in an emoji to denote the emoji itself, skin tone, gender\n// and such. Note that this function does NOT return variation selectors (fe0f) or zero width joiners (200d), as these\n// are not included as part of the key in the emoji.json.\n//\n// Example:\n// return value for smile emoji (no skin tone): 1f600\n// return value for left facing fist (light skin tone): 1f91b-1f3fb\nexport function unicodeToString (emoji) {\n  let key = '';\n  for (const codePoint of emoji) {\n    const codepoint = codePoint.codePointAt(0).toString(16).padStart(4, '0');\n\n    // skip 200d and fe0f as these are not included in emoji_strategy.json keys\n    if (['200d', 'fe0f'].includes(codepoint)) continue;\n    if (key !== '') { key = key + '-'; }\n    key = key + codepoint;\n  }\n  return key;\n}\n\n// Takes in unicode in string form ex: '1f91b-1f3fb' and converts it to an actual unicode character.\nexport function stringToUnicode (str) {\n  const uChars = str.split('-');\n  let result = '';\n  uChars.forEach((uChar) => {\n    result = result + String.fromCodePoint(parseInt(uChar, 16));\n  });\n  return result;\n}\n\n// Takes in a code (which could be unicode or shortcode) and returns the emoji data for it.\nexport function codeToEmojiData (code) {\n  code = code?.trim();\n  if (code.startsWith(':') && code.endsWith(':')) {\n    return shortcodeToEmojiData(code);\n  } else {\n    const unicodeString = unicodeToString(code);\n    const result = emojiJson[unicodeString];\n    if (result) result.key = unicodeString;\n    return result;\n  }\n}\n\n// Finds every shortcode in slot text\n// filters only the existing codes in emojiJson\n// removes duplicates.\n// @returns {string[]}\nexport function findShortCodes (textContent) {\n  const shortcodes = (\n    textContent.match(emojiShortCodeRegex) || []\n  ).map(code => code.trim());\n  return filterValidShortCodes(shortcodes);\n}\n\nexport function filterValidShortCodes (shortcodes) {\n  const filtered = shortcodes ? shortcodes.filter(code => shortcodeToEmojiData(code)) : [];\n  return new Set(filtered);\n}\n\n// Finds every emoji in slot text\n// removes duplicates\n// @returns {string[]}\nexport function findEmojis (textContent) {\n  const matches = [...textContent.matchAll(emojiRegex)];\n  const emojis = matches.length ? matches.map(match => match[0]) : [];\n  return new Set(emojis);\n}\n"],"names":["emojiPattern","customEmojiAssetUrl","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge"],"mappings":"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"}

package/dist/vue2/common/emoji.js

@@ -138,6 +138,11 @@ function filterValidShortCodes(shortcodes) {
   const filtered = shortcodes ? shortcodes.filter((code) => shortcodeToEmojiData(code)) : [];
   return new Set(filtered);
 }
+function findEmojis(textContent) {
+  const matches = [...textContent.matchAll(emojiRegex)];
+  const emojis = matches.length ? matches.map((match) => match[0]) : [];
+  return new Set(emojis);
+}
 export {
   codeToEmojiData,
   customEmojiAssetUrl,
@@ -151,6 +156,7 @@ export {
   emojiShortCodeRegex,
   emojiVersion,
   filterValidShortCodes,
+  findEmojis,
   findShortCodes,
   getEmojiData,
   setCustomEmojiJson,

package/dist/vue2/common/emoji.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.js","sources":["../../common/emoji/index.js"],"sourcesContent":["import { emojiPattern } from 'regex-combined-emojis';\nimport emojiJsonLocal from 'emoji-toolkit/emoji_strategy.json' with { type: 'json' };\n\nexport const emojiRegex = new RegExp(emojiPattern, 'g');\nexport const emojiVersion = '8.0';\nexport const defaultEmojiAssetUrl = 'https://cdn.jsdelivr.net/joypixels/assets/' + emojiVersion + '/png/unicode/32/';\nexport let customEmojiAssetUrl = null;\n\n// Used for emoji 16px and smaller\nexport let emojiImageUrlSmall = defaultEmojiAssetUrl;\nexport let emojiFileExtensionSmall = '.png';\n\n// Used for emoji larger than 16px\nexport let emojiImageUrlLarge = defaultEmojiAssetUrl;\nexport let emojiFileExtensionLarge = '.png';\n\nexport const emojiJson = emojiJsonLocal;\n\nexport const emojiShortCodeRegex = /(^| |(?<=:))(:\\w+:)/g;\n\nexport function getEmojiData () {\n  return emojiJson;\n}\n\nexport function setEmojiAssetUrlSmall (url, fileExtension = '.png') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlSmall = url;\n  emojiFileExtensionSmall = fileExtension;\n}\n\nexport function setEmojiAssetUrlLarge (url, fileExtension = '.svg') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlLarge = url;\n  emojiFileExtensionLarge = fileExtension;\n}\n\nexport function setCustomEmojiUrl (url) {\n  customEmojiAssetUrl = url;\n}\n\nexport function setCustomEmojiJson (json) {\n  validateCustomEmojiJson(json);\n}\n\n/**\n * Validate custom emoji json\n */\nexport function validateCustomEmojiJson (json) {\n  const customEmojiProps = ['extension', 'custom'];\n  const customEmojiRequiredProps = [\n    'name',\n    'category',\n    'shortname',\n    'extension',\n    'custom',\n  ];\n\n  /**\n   * Update single emoji properties.\n   * If the property exists in emojiData, it'll add the values if the property is an array, otherwise will overwrite.\n   * If not exists, will add the property to the emojiData object.\n   */\n  const _updateNativeEmojiData = (emojiData, propName, propValue) => {\n    if (emojiData[propName] === undefined) {\n      if (!customEmojiProps.includes(propName)) {\n        return;\n      }\n\n      // new property to add\n      emojiData[propName] = propValue;\n    } else {\n      if (Array.isArray(emojiData[propName])) {\n        emojiData[propName] = emojiData[propName].concat(propValue);\n      } else {\n        emojiData[propName] = propValue;\n      }\n    }\n  };\n\n  Object.entries(json).forEach((item) => {\n    const [customEmojiKey, customEmojiValue] = item;\n\n    if (customEmojiKey in emojiJson) {\n      // custom emoji exists in emoji json which means to update some data in the native emoji\n      const emojiData = emojiJson[customEmojiKey];\n\n      for (const customEmojiPropertyName in customEmojiValue) {\n        const customEmojiPropertyValue = customEmojiValue[customEmojiPropertyName];\n\n        _updateNativeEmojiData(emojiData, customEmojiPropertyName, customEmojiPropertyValue);\n      }\n    } else {\n      // new custom emoji\n      const _validateRequiredProps = () =>\n        customEmojiRequiredProps.every((val) => {\n          return customEmojiValue[val] !== undefined;\n        });\n\n      if (_validateRequiredProps()) {\n        emojiJson[customEmojiKey] = customEmojiValue;\n      } else {\n        console.error(\n          'The following custom emoji doesn\\'t contain the required properties:',\n          customEmojiValue,\n        );\n      }\n    }\n  });\n}\n\n// recursively searches the emoji data object containing data for all emojis\n// and returns the object with the specified shortcode.\nexport function shortcodeToEmojiData (shortcode) {\n  // eslint-disable-next-line complexity\n  function f (o, key) {\n    if (!o || typeof o !== 'object') {\n      return;\n    }\n    if ('shortname' in o) {\n      if (o.shortname === shortcode || o.shortname_alternates.includes(shortcode)) {\n        o.key = key;\n        reference = o;\n        return true;\n      }\n    }\n    Object.keys(o).some(function (k) {\n      return f(o[k], k);\n    });\n  }\n\n  let reference;\n  f(getEmojiData(), null);\n  return reference;\n}\n\n// Takes in an emoji unicode character(s) and converts it to an emoji string in the format the emoji data object expects\n// as a key. There can be multiple unicode characters in an emoji to denote the emoji itself, skin tone, gender\n// and such. Note that this function does NOT return variation selectors (fe0f) or zero width joiners (200d), as these\n// are not included as part of the key in the emoji.json.\n//\n// Example:\n// return value for smile emoji (no skin tone): 1f600\n// return value for left facing fist (light skin tone): 1f91b-1f3fb\nexport function unicodeToString (emoji) {\n  let key = '';\n  for (const codePoint of emoji) {\n    const codepoint = codePoint.codePointAt(0).toString(16).padStart(4, '0');\n\n    // skip 200d and fe0f as these are not included in emoji_strategy.json keys\n    if (['200d', 'fe0f'].includes(codepoint)) continue;\n    if (key !== '') { key = key + '-'; }\n    key = key + codepoint;\n  }\n  return key;\n}\n\n// Takes in unicode in string form ex: '1f91b-1f3fb' and converts it to an actual unicode character.\nexport function stringToUnicode (str) {\n  const uChars = str.split('-');\n  let result = '';\n  uChars.forEach((uChar) => {\n    result = result + String.fromCodePoint(parseInt(uChar, 16));\n  });\n  return result;\n}\n\n// Takes in a code (which could be unicode or shortcode) and returns the emoji data for it.\nexport function codeToEmojiData (code) {\n  code = code?.trim();\n  if (code.startsWith(':') && code.endsWith(':')) {\n    return shortcodeToEmojiData(code);\n  } else {\n    const unicodeString = unicodeToString(code);\n    const result = emojiJson[unicodeString];\n    if (result) result.key = unicodeString;\n    return result;\n  }\n}\n\n// Finds every shortcode in slot text\n// filters only the existing codes in emojiJson\n// removes duplicates.\n// @returns {string[]}\nexport function findShortCodes (textContent) {\n  const shortcodes = (\n    textContent.match(emojiShortCodeRegex) || []\n  ).map(code => code.trim());\n  return filterValidShortCodes(shortcodes);\n}\n\nexport function filterValidShortCodes (shortcodes) {\n  const filtered = shortcodes ? shortcodes.filter(code => shortcodeToEmojiData(code)) : [];\n  return new Set(filtered);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"emoji.js","sources":["../../common/emoji/index.js"],"sourcesContent":["import { emojiPattern } from 'regex-combined-emojis';\nimport emojiJsonLocal from 'emoji-toolkit/emoji_strategy.json' with { type: 'json' };\n\nexport const emojiRegex = new RegExp(emojiPattern, 'g');\nexport const emojiVersion = '8.0';\nexport const defaultEmojiAssetUrl = 'https://cdn.jsdelivr.net/joypixels/assets/' + emojiVersion + '/png/unicode/32/';\nexport let customEmojiAssetUrl = null;\n\n// Used for emoji 16px and smaller\nexport let emojiImageUrlSmall = defaultEmojiAssetUrl;\nexport let emojiFileExtensionSmall = '.png';\n\n// Used for emoji larger than 16px\nexport let emojiImageUrlLarge = defaultEmojiAssetUrl;\nexport let emojiFileExtensionLarge = '.png';\n\nexport const emojiJson = emojiJsonLocal;\n\nexport const emojiShortCodeRegex = /(^| |(?<=:))(:\\w+:)/g;\n\nexport function getEmojiData () {\n  return emojiJson;\n}\n\nexport function setEmojiAssetUrlSmall (url, fileExtension = '.png') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlSmall = url;\n  emojiFileExtensionSmall = fileExtension;\n}\n\nexport function setEmojiAssetUrlLarge (url, fileExtension = '.svg') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlLarge = url;\n  emojiFileExtensionLarge = fileExtension;\n}\n\nexport function setCustomEmojiUrl (url) {\n  customEmojiAssetUrl = url;\n}\n\nexport function setCustomEmojiJson (json) {\n  validateCustomEmojiJson(json);\n}\n\n/**\n * Validate custom emoji json\n */\nexport function validateCustomEmojiJson (json) {\n  const customEmojiProps = ['extension', 'custom'];\n  const customEmojiRequiredProps = [\n    'name',\n    'category',\n    'shortname',\n    'extension',\n    'custom',\n  ];\n\n  /**\n   * Update single emoji properties.\n   * If the property exists in emojiData, it'll add the values if the property is an array, otherwise will overwrite.\n   * If not exists, will add the property to the emojiData object.\n   */\n  const _updateNativeEmojiData = (emojiData, propName, propValue) => {\n    if (emojiData[propName] === undefined) {\n      if (!customEmojiProps.includes(propName)) {\n        return;\n      }\n\n      // new property to add\n      emojiData[propName] = propValue;\n    } else {\n      if (Array.isArray(emojiData[propName])) {\n        emojiData[propName] = emojiData[propName].concat(propValue);\n      } else {\n        emojiData[propName] = propValue;\n      }\n    }\n  };\n\n  Object.entries(json).forEach((item) => {\n    const [customEmojiKey, customEmojiValue] = item;\n\n    if (customEmojiKey in emojiJson) {\n      // custom emoji exists in emoji json which means to update some data in the native emoji\n      const emojiData = emojiJson[customEmojiKey];\n\n      for (const customEmojiPropertyName in customEmojiValue) {\n        const customEmojiPropertyValue = customEmojiValue[customEmojiPropertyName];\n\n        _updateNativeEmojiData(emojiData, customEmojiPropertyName, customEmojiPropertyValue);\n      }\n    } else {\n      // new custom emoji\n      const _validateRequiredProps = () =>\n        customEmojiRequiredProps.every((val) => {\n          return customEmojiValue[val] !== undefined;\n        });\n\n      if (_validateRequiredProps()) {\n        emojiJson[customEmojiKey] = customEmojiValue;\n      } else {\n        console.error(\n          'The following custom emoji doesn\\'t contain the required properties:',\n          customEmojiValue,\n        );\n      }\n    }\n  });\n}\n\n// recursively searches the emoji data object containing data for all emojis\n// and returns the object with the specified shortcode.\nexport function shortcodeToEmojiData (shortcode) {\n  // eslint-disable-next-line complexity\n  function f (o, key) {\n    if (!o || typeof o !== 'object') {\n      return;\n    }\n    if ('shortname' in o) {\n      if (o.shortname === shortcode || o.shortname_alternates.includes(shortcode)) {\n        o.key = key;\n        reference = o;\n        return true;\n      }\n    }\n    Object.keys(o).some(function (k) {\n      return f(o[k], k);\n    });\n  }\n\n  let reference;\n  f(getEmojiData(), null);\n  return reference;\n}\n\n// Takes in an emoji unicode character(s) and converts it to an emoji string in the format the emoji data object expects\n// as a key. There can be multiple unicode characters in an emoji to denote the emoji itself, skin tone, gender\n// and such. Note that this function does NOT return variation selectors (fe0f) or zero width joiners (200d), as these\n// are not included as part of the key in the emoji.json.\n//\n// Example:\n// return value for smile emoji (no skin tone): 1f600\n// return value for left facing fist (light skin tone): 1f91b-1f3fb\nexport function unicodeToString (emoji) {\n  let key = '';\n  for (const codePoint of emoji) {\n    const codepoint = codePoint.codePointAt(0).toString(16).padStart(4, '0');\n\n    // skip 200d and fe0f as these are not included in emoji_strategy.json keys\n    if (['200d', 'fe0f'].includes(codepoint)) continue;\n    if (key !== '') { key = key + '-'; }\n    key = key + codepoint;\n  }\n  return key;\n}\n\n// Takes in unicode in string form ex: '1f91b-1f3fb' and converts it to an actual unicode character.\nexport function stringToUnicode (str) {\n  const uChars = str.split('-');\n  let result = '';\n  uChars.forEach((uChar) => {\n    result = result + String.fromCodePoint(parseInt(uChar, 16));\n  });\n  return result;\n}\n\n// Takes in a code (which could be unicode or shortcode) and returns the emoji data for it.\nexport function codeToEmojiData (code) {\n  code = code?.trim();\n  if (code.startsWith(':') && code.endsWith(':')) {\n    return shortcodeToEmojiData(code);\n  } else {\n    const unicodeString = unicodeToString(code);\n    const result = emojiJson[unicodeString];\n    if (result) result.key = unicodeString;\n    return result;\n  }\n}\n\n// Finds every shortcode in slot text\n// filters only the existing codes in emojiJson\n// removes duplicates.\n// @returns {string[]}\nexport function findShortCodes (textContent) {\n  const shortcodes = (\n    textContent.match(emojiShortCodeRegex) || []\n  ).map(code => code.trim());\n  return filterValidShortCodes(shortcodes);\n}\n\nexport function filterValidShortCodes (shortcodes) {\n  const filtered = shortcodes ? shortcodes.filter(code => shortcodeToEmojiData(code)) : [];\n  return new Set(filtered);\n}\n\n// Finds every emoji in slot text\n// removes duplicates\n// @returns {string[]}\nexport function findEmojis (textContent) {\n  const matches = [...textContent.matchAll(emojiRegex)];\n  const emojis = matches.length ? matches.map(match => match[0]) : [];\n  return new Set(emojis);\n}\n"],"names":[],"mappings":"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"}

package/dist/vue2/components/emoji_picker/emoji_picker.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_picker.vue.cjs","sources":["../../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<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        :tab-set-labels=\"tabSetLabels\"\n        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.emojiSelectorRef.focusEmojiSelector()\"\n        @selected-tabset=\"scrollToSelectedTabset\"\n        @keydown.esc.native=\"$emit('close')\"\n      />\n    </div>\n    <div class=\"d-emoji-picker--body\">\n      <emoji-search\n        v-if=\"showSearch\"\n        ref=\"searchInputRef\"\n        :model-value=\"internalSearchQuery\"\n        :search-placeholder-label=\"searchPlaceholderLabel\"\n        @update:model-value=\"newValue => internalSearchQuery = newValue\"\n        @select-first-emoji=\"$emit('selected-emoji', highlightedEmoji)\"\n        @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n        @focus-emoji-selector=\"$refs.emojiSelectorRef.focusEmojiSelector()\"\n        @keydown.esc.native=\"$emit('close')\"\n      />\n      <emoji-selector\n        ref=\"emojiSelectorRef\"\n        :emoji-filter=\"internalSearchQuery\"\n        :skin-tone=\"skinTone\"\n        :tab-set-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=\"$emit('selected-emoji', $event)\"\n        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.tabsetRef.focusTabset()\"\n        @keydown.esc.native=\"$emit('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=\"$emit('skin-tone', $event)\"\n        @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n        @focus-last-emoji=\"$refs.emojiSelectorRef.focusLastEmoji()\"\n        @keydown.esc.native=\"$emit('close')\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport EmojiTabset from './modules/emoji_tabset.vue';\nimport EmojiSearch from './modules/emoji_search.vue';\nimport EmojiSelector from './modules/emoji_selector.vue';\nimport EmojiDescription from './modules/emoji_description.vue';\nimport EmojiSkinSelector from './modules/emoji_skin_selector.vue';\n\nexport default {\n  name: 'DtEmojiPicker',\n\n  components: {\n    EmojiTabset,\n    EmojiSearch,\n    EmojiSelector,\n    EmojiDescription,\n    EmojiSkinSelector,\n  },\n\n  props: {\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    },\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\n  data () {\n    return {\n      internalSearchQuery: this.searchQuery,\n      highlightedEmoji: null,\n      selectedTabset: {},\n      scrollIntoTab: 0,\n    };\n  },\n\n  computed: {\n    showRecentlyUsedTab () {\n      return this.recentlyUsedEmojis?.length > 0;\n    },\n  },\n\n  watch: {\n    searchQuery (value) {\n      this.internalSearchQuery = value;\n    },\n  },\n\n  methods: {\n    scrollToSelectedTabset (tabId) {\n      this.internalSearchQuery = '';\n      this.selectedTabset = { ...this.selectedTabset, tabId };\n    },\n\n    updateScrollIntoTab (value) {\n      this.scrollIntoTab = value;\n    },\n\n    updateHighlightedEmoji (emoji) {\n      this.highlightedEmoji = emoji;\n    },\n  },\n};\n</script>\n"],"names":["EmojiTabset","EmojiSearch","EmojiSelector","EmojiDescription","EmojiSkinSelector"],"mappings":";;;;;;;;AAqEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,aAAAA,aAAA;AAAA,IACA,aAAAC,aAAA;AAAA,IACA,eAAAC,eAAA;AAAA,IACA,kBAAAC,kBAAA;AAAA,IACA,mBAAAC,oBAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,oBAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,gCAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,qBAAA,KAAA;AAAA,MACA,kBAAA;AAAA,MACA,gBAAA,CAAA;AAAA,MACA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,sBAAA;;AACA,eAAA,UAAA,uBAAA,mBAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,YAAA,OAAA;AACA,WAAA,sBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,uBAAA,OAAA;AACA,WAAA,sBAAA;AACA,WAAA,iBAAA,EAAA,GAAA,KAAA,gBAAA,MAAA;AAAA,IACA;AAAA,IAEA,oBAAA,OAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IAEA,uBAAA,OAAA;AACA,WAAA,mBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"emoji_picker.vue.cjs","sources":["../../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<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        :tab-set-labels=\"tabSetLabels\"\n        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch\n          ? $refs.searchInputRef.focusSearchInput()\n          : $refs.emojiSelectorRef.focusEmojiSelector()\"\n        @selected-tabset=\"scrollToSelectedTabset\"\n        @keydown.esc.native=\"$emit('close')\"\n      />\n    </div>\n    <div class=\"d-emoji-picker--body\">\n      <emoji-search\n        v-if=\"showSearch\"\n        ref=\"searchInputRef\"\n        :model-value=\"internalSearchQuery\"\n        :search-placeholder-label=\"searchPlaceholderLabel\"\n        @update:model-value=\"newValue => internalSearchQuery = newValue\"\n        @select-first-emoji=\"$emit('selected-emoji', highlightedEmoji)\"\n        @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n        @focus-emoji-selector=\"$refs.emojiSelectorRef.focusEmojiSelector()\"\n        @keydown.esc.native=\"$emit('close')\"\n      />\n      <emoji-selector\n        ref=\"emojiSelectorRef\"\n        :emoji-filter=\"internalSearchQuery\"\n        :skin-tone=\"skinTone\"\n        :tab-set-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=\"$emit('selected-emoji', $event)\"\n        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.tabsetRef.focusTabset()\"\n        @keydown.esc.native=\"$emit('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=\"$emit('skin-tone', $event)\"\n        @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n        @focus-last-emoji=\"$refs.emojiSelectorRef.focusLastEmoji()\"\n        @keydown.esc.native=\"$emit('close')\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport EmojiTabset from './modules/emoji_tabset.vue';\nimport EmojiSearch from './modules/emoji_search.vue';\nimport EmojiSelector from './modules/emoji_selector.vue';\nimport EmojiDescription from './modules/emoji_description.vue';\nimport EmojiSkinSelector from './modules/emoji_skin_selector.vue';\n\nexport default {\n  name: 'DtEmojiPicker',\n\n  components: {\n    EmojiTabset,\n    EmojiSearch,\n    EmojiSelector,\n    EmojiDescription,\n    EmojiSkinSelector,\n  },\n\n  props: {\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    },\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\n  data () {\n    return {\n      internalSearchQuery: this.searchQuery,\n      highlightedEmoji: null,\n      selectedTabset: {},\n      scrollIntoTab: 0,\n    };\n  },\n\n  computed: {\n    showRecentlyUsedTab () {\n      return this.recentlyUsedEmojis?.length > 0;\n    },\n  },\n\n  watch: {\n    searchQuery (value) {\n      this.internalSearchQuery = value;\n    },\n  },\n\n  methods: {\n    scrollToSelectedTabset (tabId) {\n      this.internalSearchQuery = '';\n      this.selectedTabset = { ...this.selectedTabset, tabId };\n    },\n\n    updateScrollIntoTab (value) {\n      this.scrollIntoTab = value;\n    },\n\n    updateHighlightedEmoji (emoji) {\n      this.highlightedEmoji = emoji;\n    },\n  },\n};\n</script>\n"],"names":["EmojiTabset","EmojiSearch","EmojiSelector","EmojiDescription","EmojiSkinSelector"],"mappings":";;;;;;;;AAuEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,aAAAA,aAAA;AAAA,IACA,aAAAC,aAAA;AAAA,IACA,eAAAC,eAAA;AAAA,IACA,kBAAAC,kBAAA;AAAA,IACA,mBAAAC,oBAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,oBAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,gCAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,qBAAA,KAAA;AAAA,MACA,kBAAA;AAAA,MACA,gBAAA,CAAA;AAAA,MACA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,sBAAA;;AACA,eAAA,UAAA,uBAAA,mBAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,YAAA,OAAA;AACA,WAAA,sBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,uBAAA,OAAA;AACA,WAAA,sBAAA;AACA,WAAA,iBAAA,EAAA,GAAA,KAAA,gBAAA,MAAA;AAAA,IACA;AAAA,IAEA,oBAAA,OAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IAEA,uBAAA,OAAA;AACA,WAAA,mBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/emoji_picker/emoji_picker.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_picker.vue.js","sources":["../../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<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        :tab-set-labels=\"tabSetLabels\"\n        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.emojiSelectorRef.focusEmojiSelector()\"\n        @selected-tabset=\"scrollToSelectedTabset\"\n        @keydown.esc.native=\"$emit('close')\"\n      />\n    </div>\n    <div class=\"d-emoji-picker--body\">\n      <emoji-search\n        v-if=\"showSearch\"\n        ref=\"searchInputRef\"\n        :model-value=\"internalSearchQuery\"\n        :search-placeholder-label=\"searchPlaceholderLabel\"\n        @update:model-value=\"newValue => internalSearchQuery = newValue\"\n        @select-first-emoji=\"$emit('selected-emoji', highlightedEmoji)\"\n        @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n        @focus-emoji-selector=\"$refs.emojiSelectorRef.focusEmojiSelector()\"\n        @keydown.esc.native=\"$emit('close')\"\n      />\n      <emoji-selector\n        ref=\"emojiSelectorRef\"\n        :emoji-filter=\"internalSearchQuery\"\n        :skin-tone=\"skinTone\"\n        :tab-set-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=\"$emit('selected-emoji', $event)\"\n        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.tabsetRef.focusTabset()\"\n        @keydown.esc.native=\"$emit('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=\"$emit('skin-tone', $event)\"\n        @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n        @focus-last-emoji=\"$refs.emojiSelectorRef.focusLastEmoji()\"\n        @keydown.esc.native=\"$emit('close')\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport EmojiTabset from './modules/emoji_tabset.vue';\nimport EmojiSearch from './modules/emoji_search.vue';\nimport EmojiSelector from './modules/emoji_selector.vue';\nimport EmojiDescription from './modules/emoji_description.vue';\nimport EmojiSkinSelector from './modules/emoji_skin_selector.vue';\n\nexport default {\n  name: 'DtEmojiPicker',\n\n  components: {\n    EmojiTabset,\n    EmojiSearch,\n    EmojiSelector,\n    EmojiDescription,\n    EmojiSkinSelector,\n  },\n\n  props: {\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    },\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\n  data () {\n    return {\n      internalSearchQuery: this.searchQuery,\n      highlightedEmoji: null,\n      selectedTabset: {},\n      scrollIntoTab: 0,\n    };\n  },\n\n  computed: {\n    showRecentlyUsedTab () {\n      return this.recentlyUsedEmojis?.length > 0;\n    },\n  },\n\n  watch: {\n    searchQuery (value) {\n      this.internalSearchQuery = value;\n    },\n  },\n\n  methods: {\n    scrollToSelectedTabset (tabId) {\n      this.internalSearchQuery = '';\n      this.selectedTabset = { ...this.selectedTabset, tabId };\n    },\n\n    updateScrollIntoTab (value) {\n      this.scrollIntoTab = value;\n    },\n\n    updateHighlightedEmoji (emoji) {\n      this.highlightedEmoji = emoji;\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;;AAqEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,oBAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,gCAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,qBAAA,KAAA;AAAA,MACA,kBAAA;AAAA,MACA,gBAAA,CAAA;AAAA,MACA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,sBAAA;;AACA,eAAA,UAAA,uBAAA,mBAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,YAAA,OAAA;AACA,WAAA,sBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,uBAAA,OAAA;AACA,WAAA,sBAAA;AACA,WAAA,iBAAA,EAAA,GAAA,KAAA,gBAAA,MAAA;AAAA,IACA;AAAA,IAEA,oBAAA,OAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IAEA,uBAAA,OAAA;AACA,WAAA,mBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"emoji_picker.vue.js","sources":["../../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<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        :tab-set-labels=\"tabSetLabels\"\n        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch\n          ? $refs.searchInputRef.focusSearchInput()\n          : $refs.emojiSelectorRef.focusEmojiSelector()\"\n        @selected-tabset=\"scrollToSelectedTabset\"\n        @keydown.esc.native=\"$emit('close')\"\n      />\n    </div>\n    <div class=\"d-emoji-picker--body\">\n      <emoji-search\n        v-if=\"showSearch\"\n        ref=\"searchInputRef\"\n        :model-value=\"internalSearchQuery\"\n        :search-placeholder-label=\"searchPlaceholderLabel\"\n        @update:model-value=\"newValue => internalSearchQuery = newValue\"\n        @select-first-emoji=\"$emit('selected-emoji', highlightedEmoji)\"\n        @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n        @focus-emoji-selector=\"$refs.emojiSelectorRef.focusEmojiSelector()\"\n        @keydown.esc.native=\"$emit('close')\"\n      />\n      <emoji-selector\n        ref=\"emojiSelectorRef\"\n        :emoji-filter=\"internalSearchQuery\"\n        :skin-tone=\"skinTone\"\n        :tab-set-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=\"$emit('selected-emoji', $event)\"\n        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.tabsetRef.focusTabset()\"\n        @keydown.esc.native=\"$emit('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=\"$emit('skin-tone', $event)\"\n        @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n        @focus-last-emoji=\"$refs.emojiSelectorRef.focusLastEmoji()\"\n        @keydown.esc.native=\"$emit('close')\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport EmojiTabset from './modules/emoji_tabset.vue';\nimport EmojiSearch from './modules/emoji_search.vue';\nimport EmojiSelector from './modules/emoji_selector.vue';\nimport EmojiDescription from './modules/emoji_description.vue';\nimport EmojiSkinSelector from './modules/emoji_skin_selector.vue';\n\nexport default {\n  name: 'DtEmojiPicker',\n\n  components: {\n    EmojiTabset,\n    EmojiSearch,\n    EmojiSelector,\n    EmojiDescription,\n    EmojiSkinSelector,\n  },\n\n  props: {\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    },\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\n  data () {\n    return {\n      internalSearchQuery: this.searchQuery,\n      highlightedEmoji: null,\n      selectedTabset: {},\n      scrollIntoTab: 0,\n    };\n  },\n\n  computed: {\n    showRecentlyUsedTab () {\n      return this.recentlyUsedEmojis?.length > 0;\n    },\n  },\n\n  watch: {\n    searchQuery (value) {\n      this.internalSearchQuery = value;\n    },\n  },\n\n  methods: {\n    scrollToSelectedTabset (tabId) {\n      this.internalSearchQuery = '';\n      this.selectedTabset = { ...this.selectedTabset, tabId };\n    },\n\n    updateScrollIntoTab (value) {\n      this.scrollIntoTab = value;\n    },\n\n    updateHighlightedEmoji (emoji) {\n      this.highlightedEmoji = emoji;\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;;AAuEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,oBAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,gCAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,qBAAA,KAAA;AAAA,MACA,kBAAA;AAAA,MACA,gBAAA,CAAA;AAAA,MACA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,sBAAA;;AACA,eAAA,UAAA,uBAAA,mBAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,YAAA,OAAA;AACA,WAAA,sBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,uBAAA,OAAA;AACA,WAAA,sBAAA;AACA,WAAA,iBAAA,EAAA,GAAA,KAAA,gBAAA,MAAA;AAAA,IACA;AAAA,IAEA,oBAAA,OAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IAEA,uBAAA,OAAA;AACA,WAAA,mBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/emoji_picker/modules/emoji_search.vue.cjs

@@ -9,7 +9,7 @@ const _sfc_main = {
   components: {
     DtInput: input.default,
     DtIconSearch: vue2.DtIconSearch,
-    DtIconXCircle: vue2.DtIconXCircle,
+    DtIconClose: vue2.DtIconClose,
     DtButton: button.default
   },
   props: {
@@ -62,7 +62,7 @@ var _sfc_render = function render() {
   }] }, scopedSlots: _vm._u([{ key: "leftIcon", fn: function() {
     return [_c("dt-icon-search", { attrs: { "size": "200" } })];
   }, proxy: true }, _vm.modelValue.length > 0 ? { key: "rightIcon", fn: function() {
-    return [_c("dt-button", { staticClass: "d-mrn4", attrs: { "importance": "clear", "size": "xs", "circle": "", "kind": "muted" }, on: { "click": _vm.clearSearch }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-button", { staticClass: "d-emoji-picker__search-x-button", attrs: { "importance": "clear", "size": "xs", "circle": "", "kind": "muted" }, on: { "click": _vm.clearSearch }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
       return [_c("dt-icon-close", { attrs: { "size": "200" } })];
     }, proxy: true }], null, false, 4156074325) })];
   }, proxy: true } : null], null, true) })], 1);

package/dist/vue2/components/emoji_picker/modules/emoji_search.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_search.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_search.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n    <dt-input\n      id=\"searchInput\"\n      ref=\"searchInputRef\"\n      :placeholder=\"searchPlaceholderLabel\"\n      :value=\"modelValue\"\n      @input=\"updateModelValue\"\n      @keydown.up=\"focusTabset\"\n      @keydown.down.prevent=\"focusEmojiSelector\"\n      @keydown.enter=\"selectFirstEmoji\"\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-mrn4\"\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>\nimport { DtIconSearch, DtIconXCircle } from '@dialpad/dialtone-icons/vue2';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'EmojiSearch',\n\n  components: {\n    DtInput,\n    DtIconSearch,\n    DtIconXCircle,\n    DtButton,\n  },\n\n  props: {\n    searchPlaceholderLabel: {\n      type: String,\n      required: true,\n    },\n\n    modelValue: {\n      type: String,\n      default: '',\n    },\n  },\n\n  mounted () {\n    this.focusSearchInput();\n  },\n\n  methods: {\n    updateModelValue (value) {\n      this.$emit('update:model-value', value);\n    },\n\n    focusEmojiSelector () {\n      this.$emit('focus-emoji-selector');\n    },\n\n    focusTabset () {\n      this.$emit('focus-tabset');\n    },\n\n    selectFirstEmoji () {\n      this.$emit('select-first-emoji');\n    },\n\n    clearSearch () {\n      this.$emit('update:model-value', '');\n      this.focusSearchInput();\n    },\n\n    focusSearchInput () {\n      this.$refs.searchInputRef.focus();\n    },\n  },\n};\n</script>\n"],"names":["DtInput","DtIconSearch","DtIconXCircle","DtButton"],"mappings":";;;;;;AA6CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAA,MAAA;AAAA,IACA,cAAAC,KAAA;AAAA,IACA,eAAAC,KAAA;AAAA,IACA,UAAAC,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,iBAAA,OAAA;AACA,WAAA,MAAA,sBAAA,KAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,WAAA,MAAA,sBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,cAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,oBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,sBAAA,EAAA;AACA,WAAA,iBAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,eAAA;IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"emoji_search.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_search.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n    <dt-input\n      id=\"searchInput\"\n      ref=\"searchInputRef\"\n      :placeholder=\"searchPlaceholderLabel\"\n      :value=\"modelValue\"\n      @input=\"updateModelValue\"\n      @keydown.up=\"focusTabset\"\n      @keydown.down.prevent=\"focusEmojiSelector\"\n      @keydown.enter=\"selectFirstEmoji\"\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>\nimport { DtIconSearch, DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'EmojiSearch',\n\n  components: {\n    DtInput,\n    DtIconSearch,\n    DtIconClose,\n    DtButton,\n  },\n\n  props: {\n    searchPlaceholderLabel: {\n      type: String,\n      required: true,\n    },\n\n    modelValue: {\n      type: String,\n      default: '',\n    },\n  },\n\n  mounted () {\n    this.focusSearchInput();\n  },\n\n  methods: {\n    updateModelValue (value) {\n      this.$emit('update:model-value', value);\n    },\n\n    focusEmojiSelector () {\n      this.$emit('focus-emoji-selector');\n    },\n\n    focusTabset () {\n      this.$emit('focus-tabset');\n    },\n\n    selectFirstEmoji () {\n      this.$emit('select-first-emoji');\n    },\n\n    clearSearch () {\n      this.$emit('update:model-value', '');\n      this.focusSearchInput();\n    },\n\n    focusSearchInput () {\n      this.$refs.searchInputRef.focus();\n    },\n  },\n};\n</script>\n"],"names":["DtInput","DtIconSearch","DtIconClose","DtButton"],"mappings":";;;;;;AA6CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAA,MAAA;AAAA,IACA,cAAAC,KAAA;AAAA,IACA,aAAAC,KAAA;AAAA,IACA,UAAAC,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,iBAAA,OAAA;AACA,WAAA,MAAA,sBAAA,KAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,WAAA,MAAA,sBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,cAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,oBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,sBAAA,EAAA;AACA,WAAA,iBAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,eAAA;IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/emoji_picker/modules/emoji_search.vue.js

@@ -1,4 +1,4 @@
-import { DtIconSearch, DtIconXCircle } from "@dialpad/dialtone-icons/vue2";
+import { DtIconSearch, DtIconClose } from "@dialpad/dialtone-icons/vue2";
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import DtInput from "../../input/input.vue.js";
 import DtButton from "../../button/button.vue.js";
@@ -7,7 +7,7 @@ const _sfc_main = {
   components: {
     DtInput,
     DtIconSearch,
-    DtIconXCircle,
+    DtIconClose,
     DtButton
   },
   props: {
@@ -60,7 +60,7 @@ var _sfc_render = function render() {
   }] }, scopedSlots: _vm._u([{ key: "leftIcon", fn: function() {
     return [_c("dt-icon-search", { attrs: { "size": "200" } })];
   }, proxy: true }, _vm.modelValue.length > 0 ? { key: "rightIcon", fn: function() {
-    return [_c("dt-button", { staticClass: "d-mrn4", attrs: { "importance": "clear", "size": "xs", "circle": "", "kind": "muted" }, on: { "click": _vm.clearSearch }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-button", { staticClass: "d-emoji-picker__search-x-button", attrs: { "importance": "clear", "size": "xs", "circle": "", "kind": "muted" }, on: { "click": _vm.clearSearch }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
       return [_c("dt-icon-close", { attrs: { "size": "200" } })];
     }, proxy: true }], null, false, 4156074325) })];
   }, proxy: true } : null], null, true) })], 1);

package/dist/vue2/components/emoji_picker/modules/emoji_search.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_search.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_search.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n    <dt-input\n      id=\"searchInput\"\n      ref=\"searchInputRef\"\n      :placeholder=\"searchPlaceholderLabel\"\n      :value=\"modelValue\"\n      @input=\"updateModelValue\"\n      @keydown.up=\"focusTabset\"\n      @keydown.down.prevent=\"focusEmojiSelector\"\n      @keydown.enter=\"selectFirstEmoji\"\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-mrn4\"\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>\nimport { DtIconSearch, DtIconXCircle } from '@dialpad/dialtone-icons/vue2';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'EmojiSearch',\n\n  components: {\n    DtInput,\n    DtIconSearch,\n    DtIconXCircle,\n    DtButton,\n  },\n\n  props: {\n    searchPlaceholderLabel: {\n      type: String,\n      required: true,\n    },\n\n    modelValue: {\n      type: String,\n      default: '',\n    },\n  },\n\n  mounted () {\n    this.focusSearchInput();\n  },\n\n  methods: {\n    updateModelValue (value) {\n      this.$emit('update:model-value', value);\n    },\n\n    focusEmojiSelector () {\n      this.$emit('focus-emoji-selector');\n    },\n\n    focusTabset () {\n      this.$emit('focus-tabset');\n    },\n\n    selectFirstEmoji () {\n      this.$emit('select-first-emoji');\n    },\n\n    clearSearch () {\n      this.$emit('update:model-value', '');\n      this.focusSearchInput();\n    },\n\n    focusSearchInput () {\n      this.$refs.searchInputRef.focus();\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;AA6CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,iBAAA,OAAA;AACA,WAAA,MAAA,sBAAA,KAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,WAAA,MAAA,sBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,cAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,oBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,sBAAA,EAAA;AACA,WAAA,iBAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,eAAA;IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"emoji_search.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_search.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n    <dt-input\n      id=\"searchInput\"\n      ref=\"searchInputRef\"\n      :placeholder=\"searchPlaceholderLabel\"\n      :value=\"modelValue\"\n      @input=\"updateModelValue\"\n      @keydown.up=\"focusTabset\"\n      @keydown.down.prevent=\"focusEmojiSelector\"\n      @keydown.enter=\"selectFirstEmoji\"\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>\nimport { DtIconSearch, DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'EmojiSearch',\n\n  components: {\n    DtInput,\n    DtIconSearch,\n    DtIconClose,\n    DtButton,\n  },\n\n  props: {\n    searchPlaceholderLabel: {\n      type: String,\n      required: true,\n    },\n\n    modelValue: {\n      type: String,\n      default: '',\n    },\n  },\n\n  mounted () {\n    this.focusSearchInput();\n  },\n\n  methods: {\n    updateModelValue (value) {\n      this.$emit('update:model-value', value);\n    },\n\n    focusEmojiSelector () {\n      this.$emit('focus-emoji-selector');\n    },\n\n    focusTabset () {\n      this.$emit('focus-tabset');\n    },\n\n    selectFirstEmoji () {\n      this.$emit('select-first-emoji');\n    },\n\n    clearSearch () {\n      this.$emit('update:model-value', '');\n      this.focusSearchInput();\n    },\n\n    focusSearchInput () {\n      this.$refs.searchInputRef.focus();\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;AA6CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,iBAAA,OAAA;AACA,WAAA,MAAA,sBAAA,KAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,WAAA,MAAA,sBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,cAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,oBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,sBAAA,EAAA;AACA,WAAA,iBAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,WAAA,MAAA,eAAA;IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/emoji_text_wrapper/emoji_text_wrapper.vue.cjs

@@ -2,7 +2,6 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const common_emoji = require("../../common/emoji.cjs");
 const icon_constants = require("../icon/icon_constants.cjs");
-const regexCombinedEmojis = require("regex-combined-emojis");
 const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
 const emoji = require("../emoji/emoji.vue.cjs");
 const _sfc_main = {
@@ -42,11 +41,13 @@ const _sfc_main = {
      */
     replaceDtEmojis(replaceList, textContent) {
       if (!replaceList.length) return textContent;
-      const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
+      const escapedReplaceList = replaceList.map(
+        (item) => item.replace(/\*/g, "\\*")
+      );
+      const regexp = new RegExp(`(${escapedReplaceList.join("|")})`, "g");
       const items = textContent.split(regexp);
       return items.filter((item) => item.trim() !== "").map((item) => {
-        regexp.lastIndex = 0;
-        if (replaceList.includes(item) || regexp.test(item)) {
+        if (replaceList.includes(item)) {
           return this.$createElement(emoji.default, {
             props: { code: item, size: this.size }
           });
@@ -76,7 +77,8 @@ const _sfc_main = {
      */
     searchCodes(textContent) {
       const shortcodes = common_emoji.findShortCodes(textContent);
-      const replaceList = [...shortcodes, regexCombinedEmojis.emojiPattern];
+      const emojis = common_emoji.findEmojis(textContent);
+      const replaceList = [...shortcodes, ...emojis];
       return this.replaceDtEmojis(replaceList, textContent);
     }
   },

package/dist/vue2/components/emoji_text_wrapper/emoji_text_wrapper.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_text_wrapper.vue.cjs","sources":["../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\nimport { emojiPattern } from 'regex-combined-emojis';\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  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\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          // Reset the regexp index to 0 to start from the beginning\n          // Otherwise, it will start from the last index\n          regexp.lastIndex = 0;\n          if (replaceList.includes(item) || regexp.test(item)) {\n            return this.$createElement(DtEmoji, {\n              props: { code: item, size: this.size },\n            });\n          }\n          return this.$createElement('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 VNode has no tag, it is a text node\n      if (!VNode.tag && VNode.text) {\n        return this.searchCodes(VNode.text);\n      }\n\n      const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n      return this.$createElement(VNode.tag, VNode.data, children);\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 replaceList = [...shortcodes, emojiPattern];\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render (h) {\n    const defaultSlotContent = 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":["DtEmoji","ICON_SIZE_MODIFIERS","findShortCodes","emojiPattern"],"mappings":";;;;;;;AAUA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAA,MAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAAC,kCAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,aAAA,aAAA;AACA,UAAA,CAAA,YAAA,OAAA,QAAA;AAEA,YAAA,SAAA,IAAA,OAAA,IAAA,YAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AACA,YAAA,QAAA,YAAA,MAAA,MAAA;AAEA,aAAA,MACA,OAAA,UAAA,KAAA,KAAA,MAAA,EAAA,EACA,IAAA,CAAA,SAAA;AAGA,eAAA,YAAA;AACA,YAAA,YAAA,SAAA,IAAA,KAAA,OAAA,KAAA,IAAA,GAAA;AACA,iBAAA,KAAA,eAAAD,eAAA;AAAA,YACA,OAAA,EAAA,MAAA,MAAA,MAAA,KAAA,KAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,eAAA,KAAA,eAAA,QAAA,EAAA,OAAA,6BAAA,GAAA,IAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA,OAAA;AAEA,UAAA,CAAA,MAAA,OAAA,MAAA,MAAA;AACA,eAAA,KAAA,YAAA,MAAA,IAAA;AAAA,MACA;AAEA,YAAA,WAAA,MAAA,WAAA,MAAA,SAAA,IAAA,gBAAA,KAAA,aAAA,UAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAA,MAAA,KAAA,MAAA,MAAA,QAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAA,OAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,aAAA;AACA,YAAA,aAAAE,4BAAA,WAAA;AACA,YAAA,cAAA,CAAA,GAAA,YAAAC,oBAAA,YAAA;AACA,aAAA,KAAA,gBAAA,aAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,UAAA,qBAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,QACA,WAAA;AAAA,QACA,OAAA;AAAA,MACA;AAAA,MACA,KAAA,mBACA,qBACA,mBAAA,IAAA,WAAA,KAAA,aAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;"}
+{"version":3,"file":"emoji_text_wrapper.vue.cjs","sources":["../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\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  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 this.$createElement(DtEmoji, {\n              props: { code: item, size: this.size },\n            });\n          }\n          return this.$createElement('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 VNode has no tag, it is a text node\n      if (!VNode.tag && VNode.text) {\n        return this.searchCodes(VNode.text);\n      }\n\n      const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n      return this.$createElement(VNode.tag, VNode.data, children);\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      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render (h) {\n    const defaultSlotContent = 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":["DtEmoji","ICON_SIZE_MODIFIERS","findShortCodes","findEmojis"],"mappings":";;;;;;AASA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAA,MAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAAC,kCAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,aAAA,aAAA;AACA,UAAA,CAAA,YAAA,OAAA,QAAA;AAEA,YAAA,qBAAA,YAAA;AAAA,QAAA,UACA,KAAA,QAAA,OAAA,KAAA;AAAA,MACA;AAEA,YAAA,SAAA,IAAA,OAAA,IAAA,mBAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AACA,YAAA,QAAA,YAAA,MAAA,MAAA;AAEA,aAAA,MACA,OAAA,UAAA,KAAA,KAAA,MAAA,EAAA,EACA,IAAA,CAAA,SAAA;AACA,YAAA,YAAA,SAAA,IAAA,GAAA;AACA,iBAAA,KAAA,eAAAD,eAAA;AAAA,YACA,OAAA,EAAA,MAAA,MAAA,MAAA,KAAA,KAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,eAAA,KAAA,eAAA,QAAA,EAAA,OAAA,6BAAA,GAAA,IAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA,OAAA;AAEA,UAAA,CAAA,MAAA,OAAA,MAAA,MAAA;AACA,eAAA,KAAA,YAAA,MAAA,IAAA;AAAA,MACA;AAEA,YAAA,WAAA,MAAA,WAAA,MAAA,SAAA,IAAA,gBAAA,KAAA,aAAA,UAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAA,MAAA,KAAA,MAAA,MAAA,QAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAA,OAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,aAAA;AACA,YAAA,aAAAE,4BAAA,WAAA;AACA,YAAA,SAAAC,wBAAA,WAAA;AAEA,YAAA,cAAA,CAAA,GAAA,YAAA,GAAA,MAAA;AACA,aAAA,KAAA,gBAAA,aAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,UAAA,qBAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,QACA,WAAA;AAAA,QACA,OAAA;AAAA,MACA;AAAA,MACA,KAAA,mBACA,qBACA,mBAAA,IAAA,WAAA,KAAA,aAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;"}

package/dist/vue2/components/emoji_text_wrapper/emoji_text_wrapper.vue.js

@@ -1,6 +1,5 @@
-import { findShortCodes } from "../../common/emoji.js";
+import { findShortCodes, findEmojis } from "../../common/emoji.js";
 import { ICON_SIZE_MODIFIERS } from "../icon/icon_constants.js";
-import { emojiPattern } from "regex-combined-emojis";
 import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
 import DtEmoji from "../emoji/emoji.vue.js";
 const _sfc_main = {
@@ -40,11 +39,13 @@ const _sfc_main = {
      */
     replaceDtEmojis(replaceList, textContent) {
       if (!replaceList.length) return textContent;
-      const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
+      const escapedReplaceList = replaceList.map(
+        (item) => item.replace(/\*/g, "\\*")
+      );
+      const regexp = new RegExp(`(${escapedReplaceList.join("|")})`, "g");
       const items = textContent.split(regexp);
       return items.filter((item) => item.trim() !== "").map((item) => {
-        regexp.lastIndex = 0;
-        if (replaceList.includes(item) || regexp.test(item)) {
+        if (replaceList.includes(item)) {
           return this.$createElement(DtEmoji, {
             props: { code: item, size: this.size }
           });
@@ -74,7 +75,8 @@ const _sfc_main = {
      */
     searchCodes(textContent) {
       const shortcodes = findShortCodes(textContent);
-      const replaceList = [...shortcodes, emojiPattern];
+      const emojis = findEmojis(textContent);
+      const replaceList = [...shortcodes, ...emojis];
       return this.replaceDtEmojis(replaceList, textContent);
     }
   },

package/dist/vue2/components/emoji_text_wrapper/emoji_text_wrapper.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_text_wrapper.vue.js","sources":["../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\nimport { emojiPattern } from 'regex-combined-emojis';\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  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\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          // Reset the regexp index to 0 to start from the beginning\n          // Otherwise, it will start from the last index\n          regexp.lastIndex = 0;\n          if (replaceList.includes(item) || regexp.test(item)) {\n            return this.$createElement(DtEmoji, {\n              props: { code: item, size: this.size },\n            });\n          }\n          return this.$createElement('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 VNode has no tag, it is a text node\n      if (!VNode.tag && VNode.text) {\n        return this.searchCodes(VNode.text);\n      }\n\n      const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n      return this.$createElement(VNode.tag, VNode.data, children);\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 replaceList = [...shortcodes, emojiPattern];\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render (h) {\n    const defaultSlotContent = 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":[],"mappings":";;;;;AAUA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,mBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,aAAA,aAAA;AACA,UAAA,CAAA,YAAA,OAAA,QAAA;AAEA,YAAA,SAAA,IAAA,OAAA,IAAA,YAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AACA,YAAA,QAAA,YAAA,MAAA,MAAA;AAEA,aAAA,MACA,OAAA,UAAA,KAAA,KAAA,MAAA,EAAA,EACA,IAAA,CAAA,SAAA;AAGA,eAAA,YAAA;AACA,YAAA,YAAA,SAAA,IAAA,KAAA,OAAA,KAAA,IAAA,GAAA;AACA,iBAAA,KAAA,eAAA,SAAA;AAAA,YACA,OAAA,EAAA,MAAA,MAAA,MAAA,KAAA,KAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,eAAA,KAAA,eAAA,QAAA,EAAA,OAAA,6BAAA,GAAA,IAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA,OAAA;AAEA,UAAA,CAAA,MAAA,OAAA,MAAA,MAAA;AACA,eAAA,KAAA,YAAA,MAAA,IAAA;AAAA,MACA;AAEA,YAAA,WAAA,MAAA,WAAA,MAAA,SAAA,IAAA,gBAAA,KAAA,aAAA,UAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAA,MAAA,KAAA,MAAA,MAAA,QAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAA,OAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,aAAA;AACA,YAAA,aAAA,eAAA,WAAA;AACA,YAAA,cAAA,CAAA,GAAA,YAAA,YAAA;AACA,aAAA,KAAA,gBAAA,aAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,UAAA,qBAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,QACA,WAAA;AAAA,QACA,OAAA;AAAA,MACA;AAAA,MACA,KAAA,mBACA,qBACA,mBAAA,IAAA,WAAA,KAAA,aAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}
+{"version":3,"file":"emoji_text_wrapper.vue.js","sources":["../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\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  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 this.$createElement(DtEmoji, {\n              props: { code: item, size: this.size },\n            });\n          }\n          return this.$createElement('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 VNode has no tag, it is a text node\n      if (!VNode.tag && VNode.text) {\n        return this.searchCodes(VNode.text);\n      }\n\n      const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n      return this.$createElement(VNode.tag, VNode.data, children);\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      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render (h) {\n    const defaultSlotContent = 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":[],"mappings":";;;;AASA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,mBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,aAAA,aAAA;AACA,UAAA,CAAA,YAAA,OAAA,QAAA;AAEA,YAAA,qBAAA,YAAA;AAAA,QAAA,UACA,KAAA,QAAA,OAAA,KAAA;AAAA,MACA;AAEA,YAAA,SAAA,IAAA,OAAA,IAAA,mBAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AACA,YAAA,QAAA,YAAA,MAAA,MAAA;AAEA,aAAA,MACA,OAAA,UAAA,KAAA,KAAA,MAAA,EAAA,EACA,IAAA,CAAA,SAAA;AACA,YAAA,YAAA,SAAA,IAAA,GAAA;AACA,iBAAA,KAAA,eAAA,SAAA;AAAA,YACA,OAAA,EAAA,MAAA,MAAA,MAAA,KAAA,KAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,eAAA,KAAA,eAAA,QAAA,EAAA,OAAA,6BAAA,GAAA,IAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA,OAAA;AAEA,UAAA,CAAA,MAAA,OAAA,MAAA,MAAA;AACA,eAAA,KAAA,YAAA,MAAA,IAAA;AAAA,MACA;AAEA,YAAA,WAAA,MAAA,WAAA,MAAA,SAAA,IAAA,gBAAA,KAAA,aAAA,UAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAA,MAAA,KAAA,MAAA,MAAA,QAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAA,OAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,aAAA;AACA,YAAA,aAAA,eAAA,WAAA;AACA,YAAA,SAAA,WAAA,WAAA;AAEA,YAAA,cAAA,CAAA,GAAA,YAAA,GAAA,MAAA;AACA,aAAA,KAAA,gBAAA,aAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,UAAA,qBAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,QACA,WAAA;AAAA,QACA,OAAA;AAAA,MACA;AAAA,MACA,KAAA,mBACA,qBACA,mBAAA,IAAA,WAAA,KAAA,aAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}

package/dist/vue2/components/keyboard_shortcut/keyboard_shortcut.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard_shortcut.vue.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        :is=\"icons[item]\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue2';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconPlus"],"mappings":";;;;AAqDA,MAAA,yBAAA;AAAA,EACA,SAAAA,KAAA;AAAA,EACA,iBAAAC,KAAA;AAAA,EACA,gBAAAC,KAAA;AAAA,EACA,cAAAC,KAAA;AAAA,EACA,gBAAAC,KAAA;AAAA,EACA,SAAAC,KAAA;AACA;AAMA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAL,KAAA;AAAA,IACA,kBAAAC,KAAA;AAAA,IACA,iBAAAC,KAAA;AAAA,IACA,eAAAC,KAAA;AAAA,IACA,iBAAAC,KAAA;AAAA,IACA,eAAAC,KAAA;AAAA,IACA,YAAAC,KAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,QAAA;AACA,aAAA;AAAA,QACA,GAAA;AAAA,QACA,UAAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,SAAA,QAAA,KAAA,WAAA,QAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,OAAA,KAAA,sBAAA,EAAA,OAAA,CAAA,QAAA,QAAA;AACA,eAAA,OAAA,QAAA,IAAA,OAAA,MAAA,MAAA,KAAA,IAAA,GAAA,uBAAA,GAAA,CAAA;AAAA,MACA,GAAA,KAAA,qBAAA;AAAA,IACA;AAAA;AAAA,IAGA,yBAAA;AACA,YAAA,kBAAA,OAAA,KAAA,KAAA,KAAA,EAAA,KAAA,GAAA;AAOA,YAAA,QAAA,IAAA,OAAA,IAAA,eAAA,KAAA,IAAA;AACA,aAAA,KAAA,kBAAA,MAAA,KAAA,EAAA,OAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"keyboard_shortcut.vue.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue2';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconPlus"],"mappings":";;;;AAqDA,MAAA,yBAAA;AAAA,EACA,SAAAA,KAAA;AAAA,EACA,iBAAAC,KAAA;AAAA,EACA,gBAAAC,KAAA;AAAA,EACA,cAAAC,KAAA;AAAA,EACA,gBAAAC,KAAA;AAAA,EACA,SAAAC,KAAA;AACA;AAMA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAL,KAAA;AAAA,IACA,kBAAAC,KAAA;AAAA,IACA,iBAAAC,KAAA;AAAA,IACA,eAAAC,KAAA;AAAA,IACA,iBAAAC,KAAA;AAAA,IACA,eAAAC,KAAA;AAAA,IACA,YAAAC,KAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,QAAA;AACA,aAAA;AAAA,QACA,GAAA;AAAA,QACA,UAAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,SAAA,QAAA,KAAA,WAAA,QAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,OAAA,KAAA,sBAAA,EAAA,OAAA,CAAA,QAAA,QAAA;AACA,eAAA,OAAA,QAAA,IAAA,OAAA,MAAA,MAAA,KAAA,IAAA,GAAA,uBAAA,GAAA,CAAA;AAAA,MACA,GAAA,KAAA,qBAAA;AAAA,IACA;AAAA;AAAA,IAGA,yBAAA;AACA,YAAA,kBAAA,OAAA,KAAA,KAAA,KAAA,EAAA,KAAA,GAAA;AAOA,YAAA,QAAA,IAAA,OAAA,IAAA,eAAA,KAAA,IAAA;AACA,aAAA,KAAA,kBAAA,MAAA,KAAA,EAAA,OAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/keyboard_shortcut/keyboard_shortcut.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard_shortcut.vue.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        :is=\"icons[item]\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue2';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;AAqDA,MAAA,yBAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAA;AACA;AAMA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,QAAA;AACA,aAAA;AAAA,QACA,GAAA;AAAA,QACA,UAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,SAAA,QAAA,KAAA,WAAA,QAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,OAAA,KAAA,sBAAA,EAAA,OAAA,CAAA,QAAA,QAAA;AACA,eAAA,OAAA,QAAA,IAAA,OAAA,MAAA,MAAA,KAAA,IAAA,GAAA,uBAAA,GAAA,CAAA;AAAA,MACA,GAAA,KAAA,qBAAA;AAAA,IACA;AAAA;AAAA,IAGA,yBAAA;AACA,YAAA,kBAAA,OAAA,KAAA,KAAA,KAAA,EAAA,KAAA,GAAA;AAOA,YAAA,QAAA,IAAA,OAAA,IAAA,eAAA,KAAA,IAAA;AACA,aAAA,KAAA,kBAAA,MAAA,KAAA,EAAA,OAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"keyboard_shortcut.vue.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue2';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;AAqDA,MAAA,yBAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAA;AACA;AAMA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,QAAA;AACA,aAAA;AAAA,QACA,GAAA;AAAA,QACA,UAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,SAAA,QAAA,KAAA,WAAA,QAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,OAAA,KAAA,sBAAA,EAAA,OAAA,CAAA,QAAA,QAAA;AACA,eAAA,OAAA,QAAA,IAAA,OAAA,MAAA,MAAA,KAAA,IAAA,GAAA,uBAAA,GAAA,CAAA;AAAA,MACA,GAAA,KAAA,qBAAA;AAAA,IACA;AAAA;AAAA,IAGA,yBAAA;AACA,YAAA,kBAAA,OAAA,KAAA,KAAA,KAAA,EAAA,KAAA,GAAA;AAOA,YAAA,QAAA,IAAA,OAAA,IAAA,eAAA,KAAA,IAAA;AACA,aAAA,KAAA,kBAAA,MAAA,KAAA,EAAA,OAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/dialtone-vue.cjs

@@ -177,6 +177,7 @@ exports.emojiRegex = common_emoji.emojiRegex;
 exports.emojiShortCodeRegex = common_emoji.emojiShortCodeRegex;
 exports.emojiVersion = common_emoji.emojiVersion;
 exports.filterValidShortCodes = common_emoji.filterValidShortCodes;
+exports.findEmojis = common_emoji.findEmojis;
 exports.findShortCodes = common_emoji.findShortCodes;
 exports.getEmojiData = common_emoji.getEmojiData;
 exports.setCustomEmojiJson = common_emoji.setCustomEmojiJson;

package/dist/vue2/dialtone-vue.cjs.map

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

package/dist/vue2/dialtone-vue.js

@@ -2,7 +2,7 @@ import { DEFAULT_VALIDATION_MESSAGE_TYPE, DESCRIPTION_SIZE_TYPES, VALIDATION_MES
 import { validationMessageValidator } from "./common/validators.js";
 import { disableRootScrolling, enableRootScrolling, filterFormattedMessages, formatMessages, getUniqueString, getValidationState } from "./common/utils.js";
 import { durationInHHMM, getDateMedium, relativeDate, setDateLocale } from "./common/dates.js";
-import { codeToEmojiData, customEmojiAssetUrl, defaultEmojiAssetUrl, emojiFileExtensionLarge, emojiFileExtensionSmall, emojiImageUrlLarge, emojiImageUrlSmall, emojiJson, emojiRegex, emojiShortCodeRegex, emojiVersion, filterValidShortCodes, findShortCodes, getEmojiData, setCustomEmojiJson, setCustomEmojiUrl, setEmojiAssetUrlLarge, setEmojiAssetUrlSmall, shortcodeToEmojiData, stringToUnicode, unicodeToString, validateCustomEmojiJson } from "./common/emoji.js";
+import { codeToEmojiData, customEmojiAssetUrl, defaultEmojiAssetUrl, emojiFileExtensionLarge, emojiFileExtensionSmall, emojiImageUrlLarge, emojiImageUrlSmall, emojiJson, emojiRegex, emojiShortCodeRegex, emojiVersion, filterValidShortCodes, findEmojis, findShortCodes, getEmojiData, setCustomEmojiJson, setCustomEmojiUrl, setEmojiAssetUrlLarge, setEmojiAssetUrlSmall, shortcodeToEmojiData, stringToUnicode, unicodeToString, validateCustomEmojiJson } from "./common/emoji.js";
 import { CheckableMixin, GroupableMixin, InputMixin } from "./common/mixins/input.js";
 import { InputGroupMixin } from "./common/mixins/input_group.js";
 import { default as default2 } from "./common/mixins/keyboard_list_navigation.js";
@@ -358,6 +358,7 @@ export {
   enableRootScrolling,
   filterFormattedMessages,
   filterValidShortCodes,
+  findEmojis,
   findShortCodes,
   formatLong,
   formatMedium,