{"version":3,"file":"NcEmojiPicker-DG3qO_fi-C6ID1-jK.chunk.mjs","sources":["../node_modules/emoji-mart-vue-fast/src/utils/store.js","../node_modules/emoji-mart-vue-fast/src/utils/data.js","../node_modules/emoji-mart-vue-fast/src/utils/frequently.js","../node_modules/emoji-mart-vue-fast/src/svgs/index.js","../node_modules/emoji-mart-vue-fast/src/components/anchors.vue","../node_modules/emoji-mart-vue-fast/src/polyfills/stringFromCodePoint.js","../node_modules/emoji-mart-vue-fast/src/utils/index.js","../node_modules/emoji-mart-vue-fast/src/utils/emoji-data.js","../node_modules/emoji-mart-vue-fast/src/utils/shared-props.js","../node_modules/emoji-mart-vue-fast/src/components/Emoji.vue","../node_modules/emoji-mart-vue-fast/src/components/category.vue","../node_modules/emoji-mart-vue-fast/src/components/skins.vue","../node_modules/emoji-mart-vue-fast/src/components/preview.vue","../node_modules/emoji-mart-vue-fast/src/components/search.vue","../node_modules/emoji-mart-vue-fast/src/vendor/raf-polyfill.js","../node_modules/emoji-mart-vue-fast/src/utils/picker.js","../node_modules/emoji-mart-vue-fast/src/components/Picker.vue","../node_modules/@nextcloud/vue/dist/chunks/NcEmojiPicker-DG3qO_fi.mjs"],"sourcesContent":["var NAMESPACE = 'emoji-mart'\n\nconst _JSON = JSON\n\nvar isLocalStorageSupported =\n typeof window !== 'undefined' && 'localStorage' in window\n\nlet getter\nlet setter\n\nfunction setHandlers(handlers) {\n handlers || (handlers = {})\n\n getter = handlers.getter\n setter = handlers.setter\n}\n\nfunction setNamespace(namespace) {\n NAMESPACE = namespace\n}\n\nfunction update(state) {\n for (let key in state) {\n let value = state[key]\n set(key, value)\n }\n}\n\nfunction set(key, value) {\n if (setter) {\n setter(key, value)\n } else {\n if (!isLocalStorageSupported) return\n try {\n window.localStorage[`${NAMESPACE}.${key}`] = _JSON.stringify(value)\n } catch (e) {}\n }\n}\n\nfunction get(key) {\n if (getter) {\n return getter(key)\n } else {\n if (!isLocalStorageSupported) return\n try {\n var value = window.localStorage[`${NAMESPACE}.${key}`]\n } catch (e) {\n return\n }\n\n if (value) {\n return JSON.parse(value)\n }\n }\n}\n\nexport default { update, set, get, setNamespace, setHandlers }\n","const mapping = {\n name: 'a',\n unified: 'b',\n non_qualified: 'c',\n has_img_apple: 'd',\n has_img_google: 'e',\n has_img_twitter: 'f',\n has_img_facebook: 'h',\n keywords: 'j',\n sheet: 'k',\n emoticons: 'l',\n text: 'm',\n short_names: 'n',\n added_in: 'o',\n}\n\nconst buildSearch = (emoji) => {\n const search = []\n\n var addToSearch = (strings, split) => {\n if (!strings) {\n return\n }\n\n ;(Array.isArray(strings) ? strings : [strings]).forEach((string) => {\n ;(split ? string.split(/[-|_|\\s]+/) : [string]).forEach((s) => {\n s = s.toLowerCase()\n\n if (search.indexOf(s) == -1) {\n search.push(s)\n }\n })\n })\n }\n\n addToSearch(emoji.short_names, true)\n addToSearch(emoji.name, true)\n addToSearch(emoji.keywords, false)\n addToSearch(emoji.emoticons, false)\n\n return search.join(',')\n}\n\nfunction deepFreeze(object) {\n // Retrieve the property names defined on object\n var propNames = Object.getOwnPropertyNames(object)\n\n // Freeze properties before freezing self\n for (let name of propNames) {\n let value = object[name]\n object[name] =\n value && typeof value === 'object' ? deepFreeze(value) : value\n }\n return Object.freeze(object)\n}\n\nconst uncompress = (data) => {\n if (!data.compressed) {\n return data\n }\n data.compressed = false\n\n for (let id in data.emojis) {\n let emoji = data.emojis[id]\n\n for (let key in mapping) {\n emoji[key] = emoji[mapping[key]]\n delete emoji[mapping[key]]\n }\n\n if (!emoji.short_names) emoji.short_names = []\n emoji.short_names.unshift(id)\n\n emoji.sheet_x = emoji.sheet[0]\n emoji.sheet_y = emoji.sheet[1]\n delete emoji.sheet\n\n if (!emoji.text) emoji.text = ''\n\n if (!emoji.added_in) emoji.added_in = 6\n emoji.added_in = emoji.added_in.toFixed(1)\n\n emoji.search = buildSearch(emoji)\n }\n data = deepFreeze(data)\n return data\n}\n\nexport { buildSearch, uncompress }\n","import store from './store'\n\nconst DEFAULTS = [\n '+1',\n 'grinning',\n 'kissing_heart',\n 'heart_eyes',\n 'laughing',\n 'stuck_out_tongue_winking_eye',\n 'sweat_smile',\n 'joy',\n 'scream',\n 'disappointed',\n 'unamused',\n 'weary',\n 'sob',\n 'sunglasses',\n 'heart',\n 'hankey',\n]\n\nlet frequently, initialized\nlet defaults = {}\n\nfunction init() {\n initialized = true\n frequently = store.get('frequently')\n}\n\nfunction add(emoji) {\n if (!initialized) init()\n var { id } = emoji\n\n frequently || (frequently = defaults)\n frequently[id] || (frequently[id] = 0)\n frequently[id] += 1\n\n store.set('last', id)\n store.set('frequently', frequently)\n}\n\nfunction get(maxNumber) {\n if (!initialized) init()\n if (!frequently) {\n defaults = {}\n\n const result = []\n\n let defaultLength = Math.min(maxNumber, DEFAULTS.length)\n for (let i = 0; i < defaultLength; i++) {\n defaults[DEFAULTS[i]] = parseInt((defaultLength - i) / 4, 10) + 1\n result.push(DEFAULTS[i])\n }\n\n return result\n }\n\n const quantity = maxNumber\n const frequentlyKeys = []\n\n for (let key in frequently) {\n if (frequently.hasOwnProperty(key)) {\n frequentlyKeys.push(key)\n }\n }\n\n const sorted = frequentlyKeys\n .sort((a, b) => frequently[a] - frequently[b])\n .reverse()\n const sliced = sorted.slice(0, quantity)\n\n const last = store.get('last')\n\n if (last && sliced.indexOf(last) == -1) {\n sliced.pop()\n sliced.push(last)\n }\n\n return sliced\n}\n\nexport default { add, get }\n","const SVGs = {\n activity: ``,\n\n custom: ``,\n\n flags: ``,\n\n foods: ``,\n\n nature: ``,\n\n objects: ``,\n\n smileys: ``,\n\n people: ``,\n\n places: ``,\n\n recent: ``,\n\n symbols: ``,\n}\n\nexport default SVGs\n","\n
\n \n \n \n \n
\n\n\n\n","const _String = String\n\nexport default _String.fromCodePoint ||\n function stringFromCodePoint() {\n var MAX_SIZE = 0x4000\n var codeUnits = []\n var highSurrogate\n var lowSurrogate\n var index = -1\n var length = arguments.length\n if (!length) {\n return ''\n }\n var result = ''\n while (++index < length) {\n var codePoint = Number(arguments[index])\n if (\n !isFinite(codePoint) || // `NaN`, `+Infinity`, or `-Infinity`\n codePoint < 0 || // not a valid Unicode code point\n codePoint > 0x10ffff || // not a valid Unicode code point\n Math.floor(codePoint) != codePoint // not an integer\n ) {\n throw RangeError('Invalid code point: ' + codePoint)\n }\n if (codePoint <= 0xffff) {\n // BMP code point\n codeUnits.push(codePoint)\n } else {\n // Astral code point; split in surrogate halves\n // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae\n codePoint -= 0x10000\n highSurrogate = (codePoint >> 10) + 0xd800\n lowSurrogate = (codePoint % 0x400) + 0xdc00\n codeUnits.push(highSurrogate, lowSurrogate)\n }\n if (index + 1 === length || codeUnits.length > MAX_SIZE) {\n result += String.fromCharCode.apply(null, codeUnits)\n codeUnits.length = 0\n }\n }\n return result\n }\n","import stringFromCodePoint from '../polyfills/stringFromCodePoint'\n\nfunction unifiedToNative(unified) {\n var unicodes = unified.split('-'),\n codePoints = unicodes.map((u) => `0x${u}`)\n\n return stringFromCodePoint.apply(null, codePoints)\n}\n\nfunction uniq(arr) {\n return arr.reduce((acc, item) => {\n if (acc.indexOf(item) === -1) {\n acc.push(item)\n }\n return acc\n }, [])\n}\n\nfunction intersect(a, b) {\n const uniqA = uniq(a)\n const uniqB = uniq(b)\n\n return uniqA.filter((item) => uniqB.indexOf(item) >= 0)\n}\n\nfunction deepMerge(a, b) {\n var o = {}\n\n for (let key in a) {\n let originalValue = a[key],\n value = originalValue\n\n if (Object.prototype.hasOwnProperty.call(b, key)) {\n value = b[key]\n }\n\n if (typeof value === 'object') {\n value = deepMerge(originalValue, value)\n }\n\n o[key] = value\n }\n\n return o\n}\n\n// https://github.com/sonicdoe/measure-scrollbar\nfunction measureScrollbar() {\n if (typeof document == 'undefined') return 0\n const div = document.createElement('div')\n\n div.style.width = '100px'\n div.style.height = '100px'\n div.style.overflow = 'scroll'\n div.style.position = 'absolute'\n div.style.top = '-9999px'\n\n document.body.appendChild(div)\n const scrollbarWidth = div.offsetWidth - div.clientWidth\n document.body.removeChild(div)\n\n return scrollbarWidth\n}\n\nexport { uniq, intersect, deepMerge, unifiedToNative, measureScrollbar }\n","import { intersect, unifiedToNative } from './index'\nimport { uncompress, buildSearch } from './data'\nimport frequently from './frequently'\n\nconst SHEET_COLUMNS = 61\nconst COLONS_REGEX = /^(?:\\:([^\\:]+)\\:)(?:\\:skin-tone-(\\d)\\:)?$/\n// Skin tones\nconst SKINS = ['1F3FA', '1F3FB', '1F3FC', '1F3FD', '1F3FE', '1F3FF']\n\n/**\n * Emoji data structure:\n * {\n * \"compressed\": false,\n * \"aliases\": {\n * collision: \"boom\"\n * cooking: \"fried_egg\"\n * envelope: \"email\"\n * face_with_finger_covering_closed_lips: \"shushing_face\"\n * ...\n * },\n * \"categories\": [ {\n * id: \"people\",\n * name: \"Smileys & Emotion\",\n * emojis: [ \"grinning\", \"grin\", \"joy\", ... ]\n * }, {\n * id: \"nature\",\n * name: \"Animals & Nature\",\n * emojis: [ \"monkey_face\", \"money\", \"gorilla\", ... ]\n * },\n * ...\n * ],\n * \"emojis\": [\n * smiley: {\n * added_in: \"6.0\",\n * emoticons: [\"=)\", \"=-)\"],\n * has_img_apple: true,\n * has_img_facebook: true,\n * has_img_google: true,\n * has_img_twitter: true,\n * keywords: [\"face\", \"happy\", \"joy\", \"haha\", \":D\", \":)\", \"smile\", \"funny\"],\n * name: \"Smiling Face with Open Mouth\",\n * non_qualified: undefined,\n * search: \"smiley,smiling,face,with,open,mouth,happy,joy,haha,:d,:),smile,funny,=),=-)\",\n * sheet_x: 30,\n * sheet_y: 27,\n * short_names: [\"smiley\"],\n * text: \":)\",\n * unified: \"1F603\",\n * }, {\n * +1: { // emoji with skin_variations\n * ..., // all the regular fields are present\n * name: \"Thumbs Up Sign\",\n * short_names: (2) [\"+1\", \"thumbsup\"],\n * skin_variations: {\n * 1F3FB: // each variation has additional set of fields:\n * added_in: \"8.0\",\n * has_img_apple: true,\n * has_img_facebook: true,\n * has_img_google: true,\n * has_img_twitter: true,\n * image: \"1f44d-1f3fb.png\",\n * non_qualified: null,\n * sheet_x: 14,\n * sheet_y: 50,\n * unified: \"1F44D-1F3FB\",\n * 1F3FB: {…},\n * 1F3FC: {…},\n * 1F3FD: {…},\n * 1F3FE: {…},\n * 1F3FF: {…}\n * },\n * ...\n * },\n * a: { // emoji with non_qualified field set\n * added_in: \"6.0\",\n * emoticons: undefined,\n * has_img_apple: true,\n * ...\n * non_qualified: \"1F170\",\n * unified: \"1F170-FE0F\",\n * },\n * ...\n * ]\n * }\n */\n\n/**\n * Wraps raw jason emoji data, serves as data source for\n * emoji picker components.\n *\n * Usage:\n *\n * import data from '../data/all.json'\n * let index = new EmojiIndex(data)\n *\n */\nexport class EmojiIndex {\n /**\n * Constructor.\n *\n * @param {object} data - Raw json data, see the structure above.\n * @param {object} options - additional options, as an object:\n * @param {Function} emojisToShowFilter - optional, function to filter out\n * some emojis, function(emoji) { return true|false }\n * where `emoji` is an raw emoji object, see data.emojis above.\n * @param {Array} include - optional, a list of category ids to include.\n * @param {Array} exclude - optional, a list of category ids to exclude.\n * @param {Array} custom - optional, a list custom emojis, each emoji is\n * an object, see data.emojis above for examples.\n */\n constructor(\n data,\n {\n emojisToShowFilter,\n include,\n exclude,\n custom,\n recent,\n recentLength = 20,\n } = {},\n ) {\n this._data = uncompress(data)\n // Callback to exclude specific emojis\n this._emojisFilter = emojisToShowFilter || null\n // Categories to include / exclude\n this._include = include || null\n this._exclude = exclude || null\n // Custom emojis\n this._custom = custom || []\n // Recent emojis\n // TODO: make parameter configurable\n this._recent = recent || frequently.get(recentLength)\n\n this._emojis = {}\n this._nativeEmojis = {}\n this._emoticons = {}\n\n this._categories = []\n this._recentCategory = { id: 'recent', name: 'Recent', emojis: [] }\n this._customCategory = { id: 'custom', name: 'Custom', emojis: [] }\n this._searchIndex = {}\n this.buildIndex()\n Object.freeze(this)\n }\n\n buildIndex() {\n let allCategories = this._data.categories\n\n if (this._include) {\n // Remove categories that are not in the include list.\n allCategories = allCategories.filter((item) => {\n return this._include.includes(item.id)\n })\n // Sort categories according to the include list.\n allCategories = allCategories.sort((a, b) => {\n const indexA = this._include.indexOf(a.id)\n const indexB = this._include.indexOf(b.id)\n if (indexA < indexB) {\n return -1\n }\n if (indexA > indexB) {\n return 1\n }\n return 0\n })\n }\n\n allCategories.forEach((categoryData) => {\n if (!this.isCategoryNeeded(categoryData.id)) {\n return\n }\n let category = {\n id: categoryData.id,\n name: categoryData.name,\n emojis: [],\n }\n categoryData.emojis.forEach((emojiId) => {\n let emoji = this.addEmoji(emojiId)\n if (emoji) {\n category.emojis.push(emoji)\n }\n })\n if (category.emojis.length) {\n this._categories.push(category)\n }\n })\n\n if (this.isCategoryNeeded('custom')) {\n if (this._custom.length > 0) {\n for (let customEmoji of this._custom) {\n this.addCustomEmoji(customEmoji)\n }\n }\n if (this._customCategory.emojis.length) {\n this._categories.push(this._customCategory)\n }\n }\n\n if (this.isCategoryNeeded('recent')) {\n if (this._recent.length) {\n this._recent.map((id) => {\n for (let customEmoji of this._customCategory.emojis) {\n if (customEmoji.id === id) {\n this._recentCategory.emojis.push(customEmoji)\n return\n }\n }\n if (this.hasEmoji(id)) {\n this._recentCategory.emojis.push(this.emoji(id))\n }\n return\n })\n }\n // Add recent category to the top\n if (this._recentCategory.emojis.length) {\n this._categories.unshift(this._recentCategory)\n }\n }\n }\n\n /**\n * Find the emoji from the string\n */\n findEmoji(emoji, skin) {\n // 1. Parse as :emoji_name:skin-tone-xx:\n let matches = emoji.match(COLONS_REGEX)\n\n if (matches) {\n emoji = matches[1]\n if (matches[2]) {\n skin = parseInt(matches[2], 10)\n }\n }\n\n // 2. Check if the specified emoji is an alias\n if (this._data.aliases.hasOwnProperty(emoji)) {\n emoji = this._data.aliases[emoji]\n }\n\n // 3. Check if we have the specified emoji\n if (this._emojis.hasOwnProperty(emoji)) {\n let emojiObject = this._emojis[emoji]\n if (skin) {\n return emojiObject.getSkin(skin)\n }\n return emojiObject\n }\n\n // 4. Check if we have the specified native emoji\n if (this._nativeEmojis.hasOwnProperty(emoji)) {\n return this._nativeEmojis[emoji]\n }\n return null\n }\n\n categories() {\n return this._categories\n }\n\n emoji(emojiId) {\n if (this._data.aliases.hasOwnProperty(emojiId)) {\n emojiId = this._data.aliases[emojiId]\n }\n let emoji = this._emojis[emojiId]\n if (!emoji) {\n throw new Error('Can not find emoji by id: ' + emojiId)\n }\n return emoji\n }\n\n firstEmoji() {\n let emoji = this._emojis[Object.keys(this._emojis)[0]]\n if (!emoji) {\n throw new Error('Can not get first emoji')\n }\n return emoji\n }\n\n hasEmoji(emojiId) {\n if (this._data.aliases.hasOwnProperty(emojiId)) {\n emojiId = this._data.aliases[emojiId]\n }\n if (this._emojis[emojiId]) {\n return true\n }\n return false\n }\n\n nativeEmoji(unicodeEmoji) {\n if (this._nativeEmojis.hasOwnProperty(unicodeEmoji)) {\n return this._nativeEmojis[unicodeEmoji]\n }\n return null\n }\n\n search(value, maxResults) {\n maxResults || (maxResults = 75)\n if (!value.length) {\n return null\n }\n if (value == '-' || value == '-1') {\n return [this.emoji('-1')]\n }\n\n let values = value.toLowerCase().split(/[\\s|,|\\-|_]+/)\n let allResults = []\n\n if (values.length > 2) {\n values = [values[0], values[1]]\n }\n\n allResults = values\n .map((value) => {\n // Start searchin in the global list of emojis\n let emojis = this._emojis\n let currentIndex = this._searchIndex\n let length = 0\n\n for (let charIndex = 0; charIndex < value.length; charIndex++) {\n const char = value[charIndex]\n length++\n\n currentIndex[char] || (currentIndex[char] = {})\n currentIndex = currentIndex[char]\n\n if (!currentIndex.results) {\n let scores = {}\n currentIndex.results = []\n currentIndex.emojis = {}\n\n for (let emojiId in emojis) {\n let emoji = emojis[emojiId]\n // search is a comma-separated string with words, related\n // to the emoji, for example:\n // search: \"smiley,smiling,face,joy,haha,:d,:),smile,funny,=),=-)\",\n let search = emoji._data.search\n let sub = value.substr(0, length)\n let subIndex = search.indexOf(sub)\n if (subIndex != -1) {\n let score = subIndex + 1\n if (sub == emojiId) score = 0\n\n currentIndex.results.push(emoji)\n currentIndex.emojis[emojiId] = emoji\n\n scores[emojiId] = score\n }\n }\n currentIndex.results.sort((a, b) => {\n var aScore = scores[a.id],\n bScore = scores[b.id]\n return aScore - bScore\n })\n }\n\n // continue search in the reduced set of emojis\n emojis = currentIndex.emojis\n }\n return currentIndex.results\n // The \"filter\" call removes undefined values from allResults\n // array, for example, if we have \"test \" (with trailing space),\n // we will get \"[Array, undefined]\" for allResults and after\n // the \"filter\" call it will turn into \"[Array]\"\n })\n .filter((a) => a)\n\n var results = null\n if (allResults.length > 1) {\n results = intersect.apply(null, allResults)\n } else if (allResults.length) {\n results = allResults[0]\n } else {\n results = []\n }\n if (results && results.length > maxResults) {\n results = results.slice(0, maxResults)\n }\n return results\n }\n\n addCustomEmoji(customEmoji) {\n let emojiData = Object.assign({}, customEmoji, {\n id: customEmoji.short_names[0],\n custom: true,\n })\n if (!emojiData.search) {\n emojiData.search = buildSearch(emojiData)\n }\n let emoji = new EmojiData(emojiData)\n this._emojis[emoji.id] = emoji\n this._customCategory.emojis.push(emoji)\n return emoji\n }\n\n addEmoji(emojiId) {\n // We expect the correct emoji id that is present in the emojis data.\n let data = this._data.emojis[emojiId]\n\n if (!this.isEmojiNeeded(data)) {\n return false\n }\n\n let emoji = new EmojiData(data)\n this._emojis[emojiId] = emoji\n if (emoji.native) {\n this._nativeEmojis[emoji.native] = emoji\n }\n if (emoji._skins) {\n for (let idx in emoji._skins) {\n let skin = emoji._skins[idx]\n if (skin.native) {\n this._nativeEmojis[skin.native] = skin\n }\n }\n }\n\n if (emoji.emoticons) {\n emoji.emoticons.forEach((emoticon) => {\n if (this._emoticons[emoticon]) {\n return\n }\n this._emoticons[emoticon] = emojiId\n })\n }\n return emoji\n }\n\n /**\n * Check if we need to include given category.\n *\n * @param {string} category_id - The category id.\n * @return {boolean} - Whether to include the emoji.\n */\n isCategoryNeeded(category_id) {\n let isIncluded =\n this._include && this._include.length\n ? this._include.indexOf(category_id) > -1\n : true\n let isExcluded =\n this._exclude && this._exclude.length\n ? this._exclude.indexOf(category_id) > -1\n : false\n if (!isIncluded || isExcluded) {\n return false\n }\n return true\n }\n\n /**\n * Check if we need to include given emoji.\n *\n * @param {object} emoji - The raw emoji object.\n * @return {boolean} - Whether to include the emoji.\n */\n isEmojiNeeded(emoji) {\n if (this._emojisFilter) {\n return this._emojisFilter(emoji)\n }\n return true\n }\n}\n\nexport class EmojiData {\n constructor(data) {\n this._data = Object.assign({}, data)\n this._skins = null\n if (this._data.skin_variations) {\n this._skins = []\n for (var skinIdx in SKINS) {\n let skinKey = SKINS[skinIdx]\n let variationData = this._data.skin_variations[skinKey]\n let skinData = Object.assign({}, data)\n for (let k in variationData) {\n skinData[k] = variationData[k]\n }\n delete skinData.skin_variations\n skinData['skin_tone'] = parseInt(skinIdx) + 1\n this._skins.push(new EmojiData(skinData))\n }\n }\n this._sanitized = sanitize(this._data)\n for (let key in this._sanitized) {\n this[key] = this._sanitized[key]\n }\n this.short_names = this._data.short_names\n this.short_name = this._data.short_names[0]\n Object.freeze(this)\n }\n\n getSkin(skinIdx) {\n if (skinIdx && skinIdx != 'native' && this._skins) {\n return this._skins[skinIdx - 1]\n }\n return this\n }\n\n getPosition() {\n let adjustedColumns = SHEET_COLUMNS - 1,\n x = +((100 / adjustedColumns) * this._data.sheet_x).toFixed(2),\n y = +((100 / adjustedColumns) * this._data.sheet_y).toFixed(2)\n return `${x}% ${y}%`\n }\n\n ariaLabel() {\n return [this.native].concat(this.short_names).filter(Boolean).join(', ')\n }\n}\n\nexport class EmojiView {\n /**\n * emoji - Emoji to display\n * set - string, emoji set name\n * native - boolean, whether to render native emoji\n * fallback - fallback function to render missing emoji, optional\n * emojiTooltip - wether we need to show the emoji tooltip, optional\n * emojiSize - emoji size in pixels, optional\n */\n constructor(emoji, skin, set, native, fallback, emojiTooltip, emojiSize) {\n this._emoji = emoji\n this._native = native\n this._skin = skin\n this._set = set\n this._fallback = fallback\n\n this.canRender = this._canRender()\n this.cssClass = this._cssClass()\n this.cssStyle = this._cssStyle(emojiSize)\n this.content = this._content()\n this.title = emojiTooltip === true ? emoji.short_name : null\n this.ariaLabel = emoji.ariaLabel()\n\n Object.freeze(this)\n }\n\n getEmoji() {\n return this._emoji.getSkin(this._skin)\n }\n\n _canRender() {\n return (\n this._isCustom() || this._isNative() || this._hasEmoji() || this._fallback\n )\n }\n\n _cssClass() {\n return ['emoji-set-' + this._set, 'emoji-type-' + this._emojiType()]\n }\n\n _cssStyle(emojiSize) {\n let cssStyle = {}\n if (this._isCustom()) {\n cssStyle = {\n backgroundImage: 'url(' + this.getEmoji()._data.imageUrl + ')',\n backgroundSize: '100%',\n width: emojiSize + 'px',\n height: emojiSize + 'px',\n }\n } else if (this._hasEmoji() && !this._isNative()) {\n cssStyle = {\n backgroundPosition: this.getEmoji().getPosition(),\n }\n }\n if (emojiSize) {\n if (this._isNative()) {\n // Set font-size for native emoji.\n cssStyle = Object.assign(cssStyle, {\n // font-size is used for native emoji which we need\n // to scale with 0.95 factor to have them look approximately\n // the same size as image-based emoji.\n fontSize: Math.round(emojiSize * 0.95 * 10) / 10 + 'px',\n })\n } else {\n // Set width/height for image emoji.\n cssStyle = Object.assign(cssStyle, {\n width: emojiSize + 'px',\n height: emojiSize + 'px',\n })\n }\n }\n return cssStyle\n }\n\n _content() {\n if (this._isCustom()) {\n return ''\n }\n if (this._isNative()) {\n return this.getEmoji().native\n }\n if (this._hasEmoji()) {\n return ''\n }\n return this._fallback ? this._fallback(this.getEmoji()) : null\n }\n\n _isNative() {\n return this._native\n }\n\n _isCustom() {\n return this.getEmoji().custom\n }\n\n _hasEmoji() {\n if (!this.getEmoji()._data) {\n // Return false if we have no data.\n return false\n }\n const hasImage = this.getEmoji()._data['has_img_' + this._set]\n if (hasImage === undefined) {\n // If there is no has_img_xxx in the data, we are working with\n // specific data file, like facebook.json, so we assume all\n // emojis are available (the :set setting for picker should\n // match the data file).\n return true\n }\n // Otherwise, we are using all.json and can switch between different\n // sets - in this case the `has_img_{set_name}` is a boolean that\n // indicates if there is such image or not for a given set.\n return hasImage\n }\n\n _emojiType() {\n if (this._isCustom()) {\n return 'custom'\n }\n if (this._isNative()) {\n return 'native'\n }\n if (this._hasEmoji()) {\n return 'image'\n }\n return 'fallback'\n }\n}\n\nexport function sanitize(emoji) {\n var {\n name,\n short_names,\n skin_tone,\n skin_variations,\n emoticons,\n unified,\n custom,\n imageUrl,\n } = emoji,\n id = emoji.id || short_names[0],\n colons = `:${id}:`\n\n if (custom) {\n return {\n id,\n name,\n colons,\n emoticons,\n custom,\n imageUrl,\n }\n }\n\n if (skin_tone) {\n colons += `:skin-tone-${skin_tone}:`\n }\n\n return {\n id,\n name,\n colons,\n emoticons,\n unified: unified.toLowerCase(),\n skin: skin_tone || (skin_variations ? 1 : null),\n native: unifiedToNative(unified),\n }\n}\n","const EmojiProps = {\n native: {\n type: Boolean,\n default: false,\n },\n tooltip: {\n type: Boolean,\n default: false,\n },\n fallback: {\n type: Function,\n },\n skin: {\n type: Number,\n default: 1,\n },\n set: {\n type: String,\n default: 'apple',\n },\n emoji: {\n type: [String, Object],\n required: true,\n },\n size: {\n type: Number,\n default: null,\n },\n tag: {\n type: String,\n default: 'span',\n },\n}\n\nconst PickerProps = {\n perLine: {\n type: Number,\n default: 9,\n },\n maxSearchResults: {\n type: Number,\n default: 75,\n },\n emojiSize: {\n type: Number,\n default: 24,\n },\n title: {\n type: String,\n default: 'Emoji Mart™',\n },\n emoji: {\n type: String,\n default: 'department_store',\n },\n color: {\n type: String,\n default: '#ae65c5',\n },\n set: {\n type: String,\n default: 'apple',\n },\n skin: {\n type: Number,\n default: null,\n },\n defaultSkin: {\n type: Number,\n default: 1,\n },\n native: {\n type: Boolean,\n default: false,\n },\n emojiTooltip: {\n type: Boolean,\n default: false,\n },\n autoFocus: {\n type: Boolean,\n default: false,\n },\n i18n: {\n type: Object,\n default() {\n return {}\n },\n },\n showPreview: {\n type: Boolean,\n default: true,\n },\n showSearch: {\n type: Boolean,\n default: true,\n },\n showCategories: {\n type: Boolean,\n default: true,\n },\n showSkinTones: {\n type: Boolean,\n default: true,\n },\n infiniteScroll: {\n type: Boolean,\n default: true,\n },\n pickerStyles: {\n type: Object,\n default() {\n return {}\n },\n },\n}\n\nexport { EmojiProps, PickerProps }\n","\n \n {{\n view.content\n }}\n \n\n\n\n","\n \n
\n
{{ i18n.categories[id] }}
\n
\n\n \n \n {{\n emojiView.content\n }}\n \n \n\n
\n \n
{{ i18n.notfound }}
\n
\n \n\n\n\n","\n\n
\n \n \n \n
\n\n\n\n\n","\n\n
\n \n
\n \n
\n\n
\n
{{ emoji.name }}
\n
\n :{{ shortName }}:\n
\n
\n {{ emoticon }}\n
\n
\n \n\n \n
\n \n
\n\n
\n {{ title }}\n
\n\n
\n \n
\n \n
\n\n\n\n\n","\n
\n $emit('arrowLeft', $event)\"\n @keydown.right=\"() => $emit('arrowRight')\"\n @keydown.down=\"() => $emit('arrowDown')\"\n @keydown.up=\"($event) => $emit('arrowUp', $event)\"\n @keydown.enter=\"() => $emit('enter')\"\n v-model=\"value\"\n />\n Use the left, right, up and down arrow keys to navigate the emoji search\n results.\n
\n\n\n\n","// http://paulirish.com/2011/requestanimationframe-for-smart-animating/\n// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating\n\n// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel\n\n// MIT license\n\nvar isWindowAvailable = typeof window !== 'undefined'\n\nisWindowAvailable &&\n (function () {\n var lastTime = 0\n var vendors = ['ms', 'moz', 'webkit', 'o']\n\n for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {\n window.requestAnimationFrame =\n window[vendors[x] + 'RequestAnimationFrame']\n window.cancelAnimationFrame =\n window[vendors[x] + 'CancelAnimationFrame'] ||\n window[vendors[x] + 'CancelRequestAnimationFrame']\n }\n\n if (!window.requestAnimationFrame)\n window.requestAnimationFrame = function (callback, element) {\n var currTime = new Date().getTime()\n var timeToCall = Math.max(0, 16 - (currTime - lastTime))\n var id = window.setTimeout(function () {\n callback(currTime + timeToCall)\n }, timeToCall)\n\n lastTime = currTime + timeToCall\n return id\n }\n\n if (!window.cancelAnimationFrame)\n window.cancelAnimationFrame = function (id) {\n clearTimeout(id)\n }\n })()\n","export class PickerView {\n constructor(pickerComponent) {\n this._vm = pickerComponent\n this._data = pickerComponent.data\n this._perLine = pickerComponent.perLine\n\n this._categories = []\n this._categories.push(...this._data.categories())\n this._categories = this._categories.filter((category) => {\n return category.emojis.length > 0\n })\n\n this._categories[0].first = true\n Object.freeze(this._categories)\n\n this.activeCategory = this._categories[0]\n this.searchEmojis = null\n\n // Preview emoji, shown on mouse over or when we move\n // with arrow keys.\n this.previewEmoji = null\n // Indexes are used to keep the position when moving\n // with arrows: current category and current emoji\n // inside the category.\n this.previewEmojiCategoryIdx = 0\n this.previewEmojiIdx = -1\n }\n\n onScroll() {\n const scrollElement = this._vm.$refs.scroll\n\n if (!scrollElement) {\n // Reported in https://github.com/serebrov/emoji-mart-vue/issues/305\n // Would be good to understand how it can happen, but at least\n // exiting early we prevent the error.\n return\n }\n\n const scrollTop = scrollElement.scrollTop\n\n let activeCategory = this.filteredCategories[0]\n for (let i = 0, l = this.filteredCategories.length; i < l; i++) {\n let category = this.filteredCategories[i]\n let component = this._vm.getCategoryComponent(i)\n // The `-50` offset switches active category (selected in the\n // anchors bar) a bit eariler, before it actually reaches the top.\n if (component && component.$el.offsetTop - 50 > scrollTop) {\n break\n }\n activeCategory = category\n }\n this.activeCategory = activeCategory\n }\n\n get allCategories() {\n return this._categories\n }\n\n get filteredCategories() {\n if (this.searchEmojis) {\n return [\n {\n id: 'search',\n name: 'Search',\n emojis: this.searchEmojis,\n },\n ]\n }\n return this._categories.filter((category) => {\n let hasEmojis = category.emojis.length > 0\n return hasEmojis\n })\n }\n\n get previewEmojiCategory() {\n if (this.previewEmojiCategoryIdx >= 0) {\n return this.filteredCategories[this.previewEmojiCategoryIdx]\n }\n return null\n }\n\n onAnchorClick(category) {\n if (this.searchEmojis) {\n // No categories are shown when search is active.\n return\n }\n let i = this.filteredCategories.indexOf(category)\n let component = this._vm.getCategoryComponent(i)\n let scrollToComponent = () => {\n if (component) {\n let top = component.$el.offsetTop\n if (category.first) {\n top = 0\n }\n this._vm.$refs.scroll.scrollTop = top\n }\n }\n if (this._vm.infiniteScroll) {\n scrollToComponent()\n } else {\n this.activeCategory = this.filteredCategories[i]\n }\n }\n\n onSearch(value) {\n let emojis = this._data.search(value, this.maxSearchResults)\n this.searchEmojis = emojis\n\n this.previewEmojiCategoryIdx = 0\n this.previewEmojiIdx = 0\n this.updatePreviewEmoji()\n }\n\n onEmojiEnter(emoji) {\n this.previewEmoji = emoji\n this.previewEmojiIdx = -1\n this.previewEmojiCategoryIdx = -1\n }\n\n onEmojiLeave(emoji) {\n this.previewEmoji = null\n }\n\n onArrowLeft() {\n // Moving left, decrease emoji index.\n if (this.previewEmojiIdx > 0) {\n this.previewEmojiIdx -= 1\n } else {\n // If emoji index is zero, go to the previous category.\n this.previewEmojiCategoryIdx -= 1\n if (this.previewEmojiCategoryIdx < 0) {\n // If we reached first category, keep it.\n this.previewEmojiCategoryIdx = 0\n } else {\n // Update emoji index - we moved to the previous category,\n // get the last emoji in it.\n this.previewEmojiIdx =\n this.filteredCategories[this.previewEmojiCategoryIdx].emojis.length -\n 1\n }\n }\n this.updatePreviewEmoji()\n }\n\n onArrowRight() {\n if (\n this.previewEmojiIdx <\n this.emojisLength(this.previewEmojiCategoryIdx) - 1\n ) {\n // Moving right within category, increase emoji index.\n this.previewEmojiIdx += 1\n } else {\n // Go to the next category.\n this.previewEmojiCategoryIdx += 1\n if (this.previewEmojiCategoryIdx >= this.filteredCategories.length) {\n // If we reached the last category - keep it.\n this.previewEmojiCategoryIdx = this.filteredCategories.length - 1\n } else {\n // If we moved to the next category, update emoji index to the\n // first emoji in the new category.\n this.previewEmojiIdx = 0\n }\n }\n this.updatePreviewEmoji()\n }\n\n onArrowDown() {\n // If we are out of the emoji control (index is -1), select the first\n // emoji in the first category by calling `onArrowRight`.\n if (this.previewEmojiIdx == -1) {\n return this.onArrowRight()\n }\n\n const categoryLength =\n this.filteredCategories[this.previewEmojiCategoryIdx].emojis.length\n\n // When moving down, we can move `_perLine` icons right to\n // jump to the same position in the next row.\n let diff = this._perLine\n\n // TODO: previewCategory should match activeCategory\n // (so it would be both highlighted in UI and used\n // when we start moving with arrows after clicking\n // the category).\n\n // Note: probably we can alwasy take current row length\n // as a `diff` - it will fit both case of any row and\n // special case of the last row.\n // Note: it can be also easier to update indexes\n // directly here instead of calling onArrowRight.\n // Same is true for `onArrowUp`.\n\n // Unless if we are on the last row of the category and\n // there are less then `_perLine` emojis in it.\n // In this case we use the last row length as diff\n // so we go straight down, for example:\n //\n // 1 2 3 4 5 6\n // 7 8 9\n // A B C D E F\n //\n // If we go down from `8`, we need to move 3 emojis right\n // to lend at `B` (and 3 is the length of the last row of\n // this category).\n // And if we used 6 instead (row length, `_perLine`), we would\n // lend up at `E`.\n if (this.previewEmojiIdx + diff > categoryLength) {\n // Calculate the last row length.\n diff = categoryLength % this._perLine\n }\n for (let i = 0; i < diff; i++) {\n this.onArrowRight()\n }\n this.updatePreviewEmoji()\n }\n\n onArrowUp() {\n // Similar to `onArrowDown`, to move up we can move left\n // by `_perLine` number of emojis.\n let diff = this._perLine\n\n if (this.previewEmojiIdx - diff < 0) {\n if (this.previewEmojiCategoryIdx > 0) {\n // Unless if we are on the first line of the category and\n // the last line in the previous category is shorter than\n // `_perLine`.\n // In this case we use the last row length as diff, so\n // we go straight up, for example:\n //\n // 1 2 3 4 5\n // 6 7 8\n // 9 A B C D\n //\n // If we go up from `A`, we need to move 3 emojis left to get\n // to `7` (and 3 is the length of the last row of the previous\n // category).\n const prevCategoryLastRowLength =\n this.filteredCategories[this.previewEmojiCategoryIdx - 1].emojis\n .length % this._perLine\n // diff = this.previewEmojiIdx + prevCategoryLastRowLength\n diff = prevCategoryLastRowLength\n } else {\n diff = 0\n }\n }\n for (let i = 0; i < diff; i++) {\n this.onArrowLeft()\n }\n this.updatePreviewEmoji()\n }\n\n updatePreviewEmoji() {\n this.previewEmoji =\n this.filteredCategories[this.previewEmojiCategoryIdx].emojis[\n this.previewEmojiIdx\n ]\n\n this._vm.$nextTick(() => {\n // Scroll the view if the `previewEmoji` goes out of the visible area.\n const scrollEl = this._vm.$refs.scroll\n\n // Note: it would be more Vue-ish to mark all emojis with `ref`s\n // and then do something similar here to what we do in the\n // `getCategories` instead of using `querySelector` directly,\n // but I am not sure if having many refs would affect the performance\n // (it might, so I use `querySelector` for now).\n const emojiEl = scrollEl.querySelector('.emoji-mart-emoji-selected')\n\n const scrollHeight = scrollEl.offsetTop - scrollEl.offsetHeight\n if (\n emojiEl &&\n emojiEl.offsetTop + emojiEl.offsetHeight >\n scrollHeight + scrollEl.scrollTop\n ) {\n scrollEl.scrollTop += emojiEl.offsetHeight\n }\n if (emojiEl && emojiEl.offsetTop < scrollEl.scrollTop) {\n scrollEl.scrollTop -= emojiEl.offsetHeight\n }\n })\n }\n\n emojisLength(categoryIdx) {\n if (categoryIdx == -1) {\n return 0\n }\n return this.filteredCategories[categoryIdx].emojis.length\n }\n}\n","\n \n