diff --git a/dist/vue-twemoji-picker.min.js b/dist/vue-twemoji-picker.min.js
new file mode 100644
index 0000000..6e719c6
--- /dev/null
+++ b/dist/vue-twemoji-picker.min.js
@@ -0,0 +1,3 @@
+var VueTwemojiPicker=function(e,n){"use strict";n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n;
+/*! Copyright Twitter Inc. and other contributors. Licensed under MIT */
+var t=function(){var e={base:"https://twemoji.maxcdn.com/v/12.1.5/",ext:".png",size:"72x72",className:"emoji",convert:{fromCodePoint:function(e){var n="string"==typeof e?parseInt(e,16):e;if(n<65536)return a(n);return a(55296+((n-=65536)>>10),56320+(1023&n))},toCodePoint:h},onerror:function(){this.parentNode&&this.parentNode.replaceChild(s(this.alt,!1),this)},parse:function(n,t){t&&"function"!=typeof t||(t={callback:t});return("string"==typeof n?m:p)(n,{callback:t.callback||u,attributes:"function"==typeof t.attributes?t.attributes:f,base:"string"==typeof t.base?t.base:e.base,ext:t.ext||e.ext,size:t.folder||(i=t.size||e.size,"number"==typeof i?i+"x"+i:i),className:t.className||e.className,onerror:t.onerror||e.onerror});var i},replace:A,test:function(e){t.lastIndex=0;var n=t.test(e);return t.lastIndex=0,n}},n={"&":"&amp;","<":"&lt;",">":"&gt;","'":"&#39;",'"':"&quot;"},t=/(?:\ud83d\udc68\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffc-\udfff]|\ud83d\udc68\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffd-\udfff]|\ud83d\udc68\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffc\udffe\udfff]|\ud83d\udc68\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffd\udfff]|\ud83d\udc68\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffe]|\ud83d\udc69\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffc-\udfff]|\ud83d\udc69\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffc-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffd-\udfff]|\ud83d\udc69\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb\udffd-\udfff]|\ud83d\udc69\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb\udffc\udffe\udfff]|\ud83d\udc69\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb\udffc\udffe\udfff]|\ud83d\udc69\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffd\udfff]|\ud83d\udc69\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb-\udffd\udfff]|\ud83d\udc69\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83d\udc68\ud83c[\udffb-\udffe]|\ud83d\udc69\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83d\udc69\ud83c[\udffb-\udffe]|\ud83e\uddd1\ud83c\udffb\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffc\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffd\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udffe\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\ud83c\udfff\u200d\ud83e\udd1d\u200d\ud83e\uddd1\ud83c[\udffb-\udfff]|\ud83e\uddd1\u200d\ud83e\udd1d\u200d\ud83e\uddd1|\ud83d\udc6b\ud83c[\udffb-\udfff]|\ud83d\udc6c\ud83c[\udffb-\udfff]|\ud83d\udc6d\ud83c[\udffb-\udfff]|\ud83d[\udc6b-\udc6d])|(?:\ud83d[\udc68\udc69]|\ud83e\uddd1)(?:\ud83c[\udffb-\udfff])?\u200d(?:\u2695\ufe0f|\u2696\ufe0f|\u2708\ufe0f|\ud83c[\udf3e\udf73\udf93\udfa4\udfa8\udfeb\udfed]|\ud83d[\udcbb\udcbc\udd27\udd2c\ude80\ude92]|\ud83e[\uddaf-\uddb3\uddbc\uddbd])|(?:\ud83c[\udfcb\udfcc]|\ud83d[\udd74\udd75]|\u26f9)((?:\ud83c[\udffb-\udfff]|\ufe0f)\u200d[\u2640\u2642]\ufe0f)|(?:\ud83c[\udfc3\udfc4\udfca]|\ud83d[\udc6e\udc71\udc73\udc77\udc81\udc82\udc86\udc87\ude45-\ude47\ude4b\ude4d\ude4e\udea3\udeb4-\udeb6]|\ud83e[\udd26\udd35\udd37-\udd39\udd3d\udd3e\uddb8\uddb9\uddcd-\uddcf\uddd6-\udddd])(?:\ud83c[\udffb-\udfff])?\u200d[\u2640\u2642]\ufe0f|(?:\ud83d\udc68\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d\udc68|\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\u2764\ufe0f\u200d\ud83d\udc8b\u200d\ud83d[\udc68\udc69]|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\u2764\ufe0f\u200d\ud83d\udc68|\ud83d\udc68\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc68\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc68\u200d\ud83d[\udc66\udc67]|\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\u2764\ufe0f\u200d\ud83d[\udc68\udc69]|\ud83d\udc69\u200d\ud83d\udc66\u200d\ud83d\udc66|\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f|\ud83c\udff3\ufe0f\u200d\ud83c\udf08|\ud83c\udff4\u200d\u2620\ufe0f|\ud83d\udc15\u200d\ud83e\uddba|\ud83d\udc41\u200d\ud83d\udde8|\ud83d\udc68\u200d\ud83d[\udc66\udc67]|\ud83d\udc69\u200d\ud83d[\udc66\udc67]|\ud83d\udc6f\u200d\u2640\ufe0f|\ud83d\udc6f\u200d\u2642\ufe0f|\ud83e\udd3c\u200d\u2640\ufe0f|\ud83e\udd3c\u200d\u2642\ufe0f|\ud83e\uddde\u200d\u2640\ufe0f|\ud83e\uddde\u200d\u2642\ufe0f|\ud83e\udddf\u200d\u2640\ufe0f|\ud83e\udddf\u200d\u2642\ufe0f)|[#*0-9]\ufe0f?\u20e3|(?:[©®\u2122\u265f]\ufe0f)|(?:\ud83c[\udc04\udd70\udd71\udd7e\udd7f\ude02\ude1a\ude2f\ude37\udf21\udf24-\udf2c\udf36\udf7d\udf96\udf97\udf99-\udf9b\udf9e\udf9f\udfcd\udfce\udfd4-\udfdf\udff3\udff5\udff7]|\ud83d[\udc3f\udc41\udcfd\udd49\udd4a\udd6f\udd70\udd73\udd76-\udd79\udd87\udd8a-\udd8d\udda5\udda8\uddb1\uddb2\uddbc\uddc2-\uddc4\uddd1-\uddd3\udddc-\uddde\udde1\udde3\udde8\uddef\uddf3\uddfa\udecb\udecd-\udecf\udee0-\udee5\udee9\udef0\udef3]|[\u203c\u2049\u2139\u2194-\u2199\u21a9\u21aa\u231a\u231b\u2328\u23cf\u23ed-\u23ef\u23f1\u23f2\u23f8-\u23fa\u24c2\u25aa\u25ab\u25b6\u25c0\u25fb-\u25fe\u2600-\u2604\u260e\u2611\u2614\u2615\u2618\u2620\u2622\u2623\u2626\u262a\u262e\u262f\u2638-\u263a\u2640\u2642\u2648-\u2653\u2660\u2663\u2665\u2666\u2668\u267b\u267f\u2692-\u2697\u2699\u269b\u269c\u26a0\u26a1\u26a7\u26aa\u26ab\u26b0\u26b1\u26bd\u26be\u26c4\u26c5\u26c8\u26cf\u26d1\u26d3\u26d4\u26e9\u26ea\u26f0-\u26f5\u26f8\u26fa\u26fd\u2702\u2708\u2709\u270f\u2712\u2714\u2716\u271d\u2721\u2733\u2734\u2744\u2747\u2757\u2763\u2764\u27a1\u2934\u2935\u2b05-\u2b07\u2b1b\u2b1c\u2b50\u2b55\u3030\u303d\u3297\u3299])(?:\ufe0f|(?!\ufe0e))|(?:(?:\ud83c[\udfcb\udfcc]|\ud83d[\udd74\udd75\udd90]|[\u261d\u26f7\u26f9\u270c\u270d])(?:\ufe0f|(?!\ufe0e))|(?:\ud83c[\udf85\udfc2-\udfc4\udfc7\udfca]|\ud83d[\udc42\udc43\udc46-\udc50\udc66-\udc69\udc6e\udc70-\udc78\udc7c\udc81-\udc83\udc85-\udc87\udcaa\udd7a\udd95\udd96\ude45-\ude47\ude4b-\ude4f\udea3\udeb4-\udeb6\udec0\udecc]|\ud83e[\udd0f\udd18-\udd1c\udd1e\udd1f\udd26\udd30-\udd39\udd3d\udd3e\uddb5\uddb6\uddb8\uddb9\uddbb\uddcd-\uddcf\uddd1-\udddd]|[\u270a\u270b]))(?:\ud83c[\udffb-\udfff])?|(?:\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f|\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc73\udb40\udc63\udb40\udc74\udb40\udc7f|\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc77\udb40\udc6c\udb40\udc73\udb40\udc7f|\ud83c\udde6\ud83c[\udde8-\uddec\uddee\uddf1\uddf2\uddf4\uddf6-\uddfa\uddfc\uddfd\uddff]|\ud83c\udde7\ud83c[\udde6\udde7\udde9-\uddef\uddf1-\uddf4\uddf6-\uddf9\uddfb\uddfc\uddfe\uddff]|\ud83c\udde8\ud83c[\udde6\udde8\udde9\uddeb-\uddee\uddf0-\uddf5\uddf7\uddfa-\uddff]|\ud83c\udde9\ud83c[\uddea\uddec\uddef\uddf0\uddf2\uddf4\uddff]|\ud83c\uddea\ud83c[\udde6\udde8\uddea\uddec\udded\uddf7-\uddfa]|\ud83c\uddeb\ud83c[\uddee-\uddf0\uddf2\uddf4\uddf7]|\ud83c\uddec\ud83c[\udde6\udde7\udde9-\uddee\uddf1-\uddf3\uddf5-\uddfa\uddfc\uddfe]|\ud83c\udded\ud83c[\uddf0\uddf2\uddf3\uddf7\uddf9\uddfa]|\ud83c\uddee\ud83c[\udde8-\uddea\uddf1-\uddf4\uddf6-\uddf9]|\ud83c\uddef\ud83c[\uddea\uddf2\uddf4\uddf5]|\ud83c\uddf0\ud83c[\uddea\uddec-\uddee\uddf2\uddf3\uddf5\uddf7\uddfc\uddfe\uddff]|\ud83c\uddf1\ud83c[\udde6-\udde8\uddee\uddf0\uddf7-\uddfb\uddfe]|\ud83c\uddf2\ud83c[\udde6\udde8-\udded\uddf0-\uddff]|\ud83c\uddf3\ud83c[\udde6\udde8\uddea-\uddec\uddee\uddf1\uddf4\uddf5\uddf7\uddfa\uddff]|\ud83c\uddf4\ud83c\uddf2|\ud83c\uddf5\ud83c[\udde6\uddea-\udded\uddf0-\uddf3\uddf7-\uddf9\uddfc\uddfe]|\ud83c\uddf6\ud83c\udde6|\ud83c\uddf7\ud83c[\uddea\uddf4\uddf8\uddfa\uddfc]|\ud83c\uddf8\ud83c[\udde6-\uddea\uddec-\uddf4\uddf7-\uddf9\uddfb\uddfd-\uddff]|\ud83c\uddf9\ud83c[\udde6\udde8\udde9\uddeb-\udded\uddef-\uddf4\uddf7\uddf9\uddfb\uddfc\uddff]|\ud83c\uddfa\ud83c[\udde6\uddec\uddf2\uddf3\uddf8\uddfe\uddff]|\ud83c\uddfb\ud83c[\udde6\udde8\uddea\uddec\uddee\uddf3\uddfa]|\ud83c\uddfc\ud83c[\uddeb\uddf8]|\ud83c\uddfd\ud83c\uddf0|\ud83c\uddfe\ud83c[\uddea\uddf9]|\ud83c\uddff\ud83c[\udde6\uddf2\uddfc]|\ud83c[\udccf\udd8e\udd91-\udd9a\udde6-\uddff\ude01\ude32-\ude36\ude38-\ude3a\ude50\ude51\udf00-\udf20\udf2d-\udf35\udf37-\udf7c\udf7e-\udf84\udf86-\udf93\udfa0-\udfc1\udfc5\udfc6\udfc8\udfc9\udfcf-\udfd3\udfe0-\udff0\udff4\udff8-\udfff]|\ud83d[\udc00-\udc3e\udc40\udc44\udc45\udc51-\udc65\udc6a\udc6f\udc79-\udc7b\udc7d-\udc80\udc84\udc88-\udca9\udcab-\udcfc\udcff-\udd3d\udd4b-\udd4e\udd50-\udd67\udda4\uddfb-\ude44\ude48-\ude4a\ude80-\udea2\udea4-\udeb3\udeb7-\udebf\udec1-\udec5\uded0-\uded2\uded5\udeeb\udeec\udef4-\udefa\udfe0-\udfeb]|\ud83e[\udd0d\udd0e\udd10-\udd17\udd1d\udd20-\udd25\udd27-\udd2f\udd3a\udd3c\udd3f-\udd45\udd47-\udd71\udd73-\udd76\udd7a-\udda2\udda5-\uddaa\uddae-\uddb4\uddb7\uddba\uddbc-\uddca\uddd0\uddde-\uddff\ude70-\ude73\ude78-\ude7a\ude80-\ude82\ude90-\ude95]|[\u23e9-\u23ec\u23f0\u23f3\u267e\u26ce\u2705\u2728\u274c\u274e\u2753-\u2755\u2795-\u2797\u27b0\u27bf\ue50a])|\ufe0f/g,i=/\uFE0F/g,o=String.fromCharCode(8205),r=/[&<>'"]/g,d=/^(?:iframe|noframes|noscript|script|select|style|textarea)$/,a=String.fromCharCode;return e;function s(e,n){return document.createTextNode(n?e.replace(i,""):e)}function u(e,n){return"".concat(n.base,n.size,"/",e,n.ext)}function c(e){return h(e.indexOf(o)<0?e.replace(i,""):e)}function p(e,n){for(var i,o,r,a,u,p,m,l,f,A,h,g,j,v=function e(n,t){for(var i,o,r=n.childNodes,a=r.length;a--;)3===(o=(i=r[a]).nodeType)?t.push(i):1!==o||"ownerSVGElement"in i||d.test(i.nodeName.toLowerCase())||e(i,t);return t}(e,[]),b=v.length;b--;){for(r=!1,a=document.createDocumentFragment(),p=(u=v[b]).nodeValue,l=0;m=t.exec(p);){if((f=m.index)!==l&&a.appendChild(s(p.slice(l,f),!0)),g=c(h=m[0]),l=f+h.length,j=n.callback(g,n),g&&j){for(o in(A=new Image).onerror=n.onerror,A.setAttribute("draggable","false"),i=n.attributes(h,g))i.hasOwnProperty(o)&&0!==o.indexOf("on")&&!A.hasAttribute(o)&&A.setAttribute(o,i[o]);A.className=n.className,A.alt=h,A.src=j,r=!0,a.appendChild(A)}A||a.appendChild(s(h,!1)),A=null}r&&(l<p.length&&a.appendChild(s(p.slice(l),!0)),u.parentNode.replaceChild(a,u))}return e}function m(e,n){return A(e,(function(e){var t,i,o=e,d=c(e),a=n.callback(d,n);if(d&&a){for(i in o="<img ".concat('class="',n.className,'" ','draggable="false" ','alt="',e,'"',' src="',a,'"'),t=n.attributes(e,d))t.hasOwnProperty(i)&&0!==i.indexOf("on")&&-1===o.indexOf(" "+i+"=")&&(o=o.concat(" ",i,'="',t[i].replace(r,l),'"'));o=o.concat("/>")}return o}))}function l(e){return n[e]}function f(){return null}function A(e,n){return String(e).replace(t,n)}function h(e,n){for(var t=[],i=0,o=0,r=0;r<e.length;)i=e.charCodeAt(r++),o?(t.push((65536+(o-55296<<10)+(i-56320)).toString(16)),o=0):55296<=i&&i<=56319?o=i:t.push(i.toString(16));return t.join(n||"-")}}(),i={getEmojiImgFromUnicode:(e,n)=>t.parse(e,n),getEmojiImgArrayFromEmojiPack(e,n){var t;const i=[];if(0!==(null==(e=JSON.parse(JSON.stringify(e)))?void 0:e.length))for(let o=0;o<e.length;o++){i[o]={group:e[o].group,emojiList:[]};for(let r=0;r<e[o].emojiList.length;r++){const d={unicode:"",img:"",skins:[],tags:[]},a=e[o].emojiList[r];if((null===(t=a.skins)||void 0===t?void 0:t.length)>0){d.unicode=a.unicode,d.skins=[];for(let e=0;e<a.skins.length;e++){const t={unicode:a.skins[e].unicode,img:this.getEmojiImgFromUnicode(a.skins[e].unicode,n)};d.skins.push(t)}}else d.unicode=a.unicode;d.img=this.getEmojiImgFromUnicode(d.unicode,n),i[o].emojiList.push(d)}}return i},getEmojiImgArrayFromEmojiPackByTerm(e,n,t){var i;const o=[];if(0!==(null==(e=JSON.parse(JSON.stringify(e)))?void 0:e.length))for(let r=0;r<e.length;r++)for(let d=0;d<e[r].emojiList.length;d++){const a={unicode:"",img:"",skins:[],tags:[]},s=e[r].emojiList[d];if((null===(i=s.skins)||void 0===i?void 0:i.length)>0){a.unicode=s.unicode,a.skins=[];for(let e=0;e<s.skins.length;e++){const t={unicode:s.skins[e].unicode,img:this.getEmojiImgFromUnicode(s.skins[e].unicode,n)};a.skins.push(t)}}else a.unicode=e[r].emojiList[d].unicode;a.img=this.getEmojiImgFromUnicode(a.unicode,n);for(let e=0;e<s.tags.length;e++)if(s.tags[e].includes(t)){o.push(a);break}}return o}};function o(e){var n=e.getBoundingClientRect();return{width:n.width,height:n.height,top:n.top,right:n.right,bottom:n.bottom,left:n.left,x:n.left,y:n.top}}function r(e){if("[object Window]"!==e.toString()){var n=e.ownerDocument;return n?n.defaultView:window}return e}function d(e){var n=r(e);return{scrollLeft:n.pageXOffset,scrollTop:n.pageYOffset}}function a(e){return e instanceof r(e).Element||e instanceof Element}function s(e){return e instanceof r(e).HTMLElement||e instanceof HTMLElement}function u(e){return e?(e.nodeName||"").toLowerCase():null}function c(e){return(a(e)?e.ownerDocument:e.document).documentElement}function p(e){return o(c(e)).left+d(e).scrollLeft}function m(e,n,t){var i;void 0===t&&(t=!1);var a,m,l=o(e),f={scrollLeft:0,scrollTop:0},A={x:0,y:0};return t||("body"!==u(n)&&(f=(a=n)!==r(a)&&s(a)?{scrollLeft:(m=a).scrollLeft,scrollTop:m.scrollTop}:d(a)),s(n)?((A=o(n)).x+=n.clientLeft,A.y+=n.clientTop):(i=c(n))&&(A.x=p(i))),{x:l.left+f.scrollLeft-A.x,y:l.top+f.scrollTop-A.y,width:l.width,height:l.height}}function l(e){return{x:e.offsetLeft,y:e.offsetTop,width:e.offsetWidth,height:e.offsetHeight}}function f(e){return"html"===u(e)?e:e.parentNode||e.host||document.ownerDocument||document.documentElement}function A(e){return r(e).getComputedStyle(e)}function h(e,n){void 0===n&&(n=[]);var t=function e(n){if(["html","body","#document"].indexOf(u(n))>=0)return n.ownerDocument.body;if(s(n)){var t=A(n),i=t.overflow,o=t.overflowX,r=t.overflowY;if(/auto|scroll|overlay|hidden/.test(i+r+o))return n}return e(f(n))}(e),i="body"===u(t),o=i?r(t):t,d=n.concat(o);return i?d:d.concat(h(f(o)))}function g(e){return["table","td","th"].indexOf(u(e))>=0}function j(e){var n;return!s(e)||!(n=e.offsetParent)||void 0!==window.InstallTrigger&&"fixed"===A(n).position?null:n}function v(e){for(var n=r(e),t=j(e);t&&g(t);)t=j(t);return t&&"body"===u(t)&&"static"===A(t).position?n:t||n}var b="top",x="bottom",w="right",E="left",k=[b,x,w,E],y=k.reduce((function(e,n){return e.concat([n+"-start",n+"-end"])}),[]),C=[].concat(k,["auto"]).reduce((function(e,n){return e.concat([n,n+"-start",n+"-end"])}),[]),T=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function S(e){var n=new Map,t=new Set,i=[];return e.forEach((function(e){n.set(e.name,e)})),e.forEach((function(e){t.has(e.name)||function e(o){t.add(o.name),[].concat(o.requires||[],o.requiresIfExists||[]).forEach((function(i){if(!t.has(i)){var o=n.get(i);o&&e(o)}})),i.push(o)}(e)})),i}function O(e){return e.split("-")[0]}var P={placement:"bottom",modifiers:[],strategy:"absolute"};function I(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return!n.some((function(e){return!(e&&"function"==typeof e.getBoundingClientRect)}))}function B(e){void 0===e&&(e={});var n=e,t=n.defaultModifiers,i=void 0===t?[]:t,o=n.defaultOptions,r=void 0===o?P:o;return function(e,n,t){void 0===t&&(t=r);var o,d,s={placement:"bottom",orderedModifiers:[],options:Object.assign({},P,{},r),modifiersData:{},elements:{reference:e,popper:n},attributes:{},styles:{}},u=[],c=!1,p={state:s,setOptions:function(t){f(),s.options=Object.assign({},r,{},s.options,{},t),s.scrollParents={reference:a(e)?h(e):[],popper:h(n)};var o,d,c=function(e){var n=S(e);return T.reduce((function(e,t){return e.concat(n.filter((function(e){return e.phase===t})))}),[])}((o=[].concat(i,s.options.modifiers),d=o.reduce((function(e,n){var t=e[n.name];return e[n.name]=t?Object.assign({},t,{},n,{options:Object.assign({},t.options,{},n.options),data:Object.assign({},t.data,{},n.data)}):n,e}),{}),Object.keys(d).map((function(e){return d[e]}))));return s.orderedModifiers=c.filter((function(e){return e.enabled})),s.orderedModifiers.forEach((function(e){var n=e.name,t=e.options,i=void 0===t?{}:t,o=e.effect;if("function"==typeof o){var r=o({state:s,name:n,instance:p,options:i});u.push(r||function(){})}})),p.update()},forceUpdate:function(){if(!c){var e=s.elements,n=e.reference,t=e.popper;if(I(n,t)){s.rects={reference:m(n,v(t),"fixed"===s.options.strategy),popper:l(t)},s.reset=!1,s.placement=s.options.placement,s.orderedModifiers.forEach((function(e){return s.modifiersData[e.name]=Object.assign({},e.data)}));for(var i=0;i<s.orderedModifiers.length;i++)if(!0!==s.reset){var o=s.orderedModifiers[i],r=o.fn,d=o.options,a=void 0===d?{}:d,u=o.name;"function"==typeof r&&(s=r({state:s,options:a,name:u,instance:p})||s)}else s.reset=!1,i=-1}}},update:(o=function(){return new Promise((function(e){p.forceUpdate(),e(s)}))},function(){return d||(d=new Promise((function(e){Promise.resolve().then((function(){d=void 0,e(o())}))}))),d}),destroy:function(){f(),c=!0}};if(!I(e,n))return p;function f(){u.forEach((function(e){return e()})),u=[]}return p.setOptions(t).then((function(e){!c&&t.onFirstUpdate&&t.onFirstUpdate(e)})),p}}var D={passive:!0};function L(e){return e.split("-")[1]}function U(e){return["top","bottom"].indexOf(e)>=0?"x":"y"}function M(e){var n,t=e.reference,i=e.element,o=e.placement,r=o?O(o):null,d=o?L(o):null,a=t.x+t.width/2-i.width/2,s=t.y+t.height/2-i.height/2;switch(r){case b:n={x:a,y:t.y-i.height};break;case x:n={x:a,y:t.y+t.height};break;case w:n={x:t.x+t.width,y:s};break;case E:n={x:t.x-i.width,y:s};break;default:n={x:t.x,y:t.y}}var u=r?U(r):null;if(null!=u){var c="y"===u?"height":"width";switch(d){case"start":n[u]=Math.floor(n[u])-Math.floor(t[c]/2-i[c]/2);break;case"end":n[u]=Math.floor(n[u])+Math.ceil(t[c]/2-i[c]/2)}}return n}var F={top:"auto",right:"auto",bottom:"auto",left:"auto"};function $(e){var n,t=e.popper,i=e.popperRect,o=e.placement,d=e.offsets,a=e.position,s=e.gpuAcceleration,u=e.adaptive,p=function(e){var n=e.x,t=e.y,i=window.devicePixelRatio||1;return{x:Math.round(n*i)/i||0,y:Math.round(t*i)/i||0}}(d),m=p.x,l=p.y,f=d.hasOwnProperty("x"),A=d.hasOwnProperty("y"),h=E,g=b,j=window;if(u){var k=v(t);k===r(t)&&(k=c(t)),o===b&&(g=x,l-=k.clientHeight-i.height,l*=s?1:-1),o===E&&(h=w,m-=k.clientWidth-i.width,m*=s?1:-1)}var y,C=Object.assign({position:a},u&&F);return s?Object.assign({},C,((y={})[g]=A?"0":"",y[h]=f?"0":"",y.transform=(j.devicePixelRatio||1)<2?"translate("+m+"px, "+l+"px)":"translate3d("+m+"px, "+l+"px, 0)",y)):Object.assign({},C,((n={})[g]=A?l+"px":"",n[h]=f?m+"px":"",n.transform="",n))}var R=[{name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(e){var n=e.state,t=e.instance,i=e.options,o=i.scroll,d=void 0===o||o,a=i.resize,s=void 0===a||a,u=r(n.elements.popper),c=[].concat(n.scrollParents.reference,n.scrollParents.popper);return d&&c.forEach((function(e){e.addEventListener("scroll",t.update,D)})),s&&u.addEventListener("resize",t.update,D),function(){d&&c.forEach((function(e){e.removeEventListener("scroll",t.update,D)})),s&&u.removeEventListener("resize",t.update,D)}},data:{}},{name:"popperOffsets",enabled:!0,phase:"read",fn:function(e){var n=e.state,t=e.name;n.modifiersData[t]=M({reference:n.rects.reference,element:n.rects.popper,strategy:"absolute",placement:n.placement})},data:{}},{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(e){var n=e.state,t=e.options,i=t.gpuAcceleration,o=void 0===i||i,r=t.adaptive,d=void 0===r||r,a={placement:O(n.placement),popper:n.elements.popper,popperRect:n.rects.popper,gpuAcceleration:o};n.styles.popper=Object.assign({},n.styles.popper,{},$(Object.assign({},a,{offsets:n.modifiersData.popperOffsets,position:n.options.strategy,adaptive:d}))),null!=n.modifiersData.arrow&&(n.styles.arrow=Object.assign({},n.styles.arrow,{},$(Object.assign({},a,{offsets:n.modifiersData.arrow,position:"absolute",adaptive:!1})))),n.attributes.popper=Object.assign({},n.attributes.popper,{"data-popper-placement":n.placement})},data:{}},{name:"applyStyles",enabled:!0,phase:"write",fn:function(e){var n=e.state;Object.keys(n.elements).forEach((function(e){var t=n.styles[e]||{},i=n.attributes[e]||{},o=n.elements[e];s(o)&&u(o)&&(Object.assign(o.style,t),Object.keys(i).forEach((function(e){var n=i[e];!1===n?o.removeAttribute(e):o.setAttribute(e,!0===n?"":n)})))}))},effect:function(e){var n=e.state,t={popper:{position:"absolute",left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(n.elements.popper.style,t.popper),n.elements.arrow&&Object.assign(n.elements.arrow.style,t.arrow),function(){Object.keys(n.elements).forEach((function(e){var i=n.elements[e],o=n.attributes[e]||{},r=Object.keys(n.styles.hasOwnProperty(e)?n.styles[e]:t[e]).reduce((function(e,n){return e[n]="",e}),{});s(i)&&u(i)&&(Object.assign(i.style,r),Object.keys(o).forEach((function(e){i.removeAttribute(e)})))}))}},requires:["computeStyles"]}],_={left:"right",right:"left",bottom:"top",top:"bottom"};function W(e){return e.replace(/left|right|bottom|top/g,(function(e){return _[e]}))}var N={start:"end",end:"start"};function H(e){return e.replace(/start|end/g,(function(e){return N[e]}))}function z(e){return parseFloat(e)||0}function J(e){var n=r(e),t=function(e){var n=s(e)?A(e):{};return{top:z(n.borderTopWidth),right:z(n.borderRightWidth),bottom:z(n.borderBottomWidth),left:z(n.borderLeftWidth)}}(e),i="html"===u(e),o=p(e),d=e.clientWidth+t.right,a=e.clientHeight+t.bottom;return i&&n.innerHeight-e.clientHeight>50&&(a=n.innerHeight-t.bottom),{top:i?0:e.clientTop,right:e.clientLeft>t.left?t.right:i?n.innerWidth-d-o:e.offsetWidth-d,bottom:i?n.innerHeight-a:e.offsetHeight-a,left:i?o:e.clientLeft}}function G(e,n){var t=Boolean(n.getRootNode&&n.getRootNode().host);if(e.contains(n))return!0;if(t){var i=n;do{if(i&&e.isSameNode(i))return!0;i=i.parentNode||i.host}while(i)}return!1}function K(e){return Object.assign({},e,{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function V(e,n){return"viewport"===n?K(function(e){var n=r(e);return{width:n.innerWidth,height:n.innerHeight,x:0,y:0}}(e)):s(n)?o(n):K(function(e){var n=r(e),t=d(e),i=m(c(e),n);return i.height=Math.max(i.height,n.innerHeight),i.width=Math.max(i.width,n.innerWidth),i.x=-t.scrollLeft,i.y=-t.scrollTop,i}(c(e)))}function q(e,n,t){var i="clippingParents"===n?function(e){var n=h(e),t=["absolute","fixed"].indexOf(A(e).position)>=0&&s(e)?v(e):e;return a(t)?n.filter((function(e){return a(e)&&G(e,t)})):[]}(e):[].concat(n),o=[].concat(i,[t]),r=o[0],d=o.reduce((function(n,t){var i=V(e,t),o=J(s(t)?t:c(e));return n.top=Math.max(i.top+o.top,n.top),n.right=Math.min(i.right-o.right,n.right),n.bottom=Math.min(i.bottom-o.bottom,n.bottom),n.left=Math.max(i.left+o.left,n.left),n}),V(e,r));return d.width=d.right-d.left,d.height=d.bottom-d.top,d.x=d.left,d.y=d.top,d}function Y(e){return Object.assign({},{top:0,right:0,bottom:0,left:0},{},e)}function X(e,n){return n.reduce((function(n,t){return n[t]=e,n}),{})}function Z(e,n){void 0===n&&(n={});var t=n,i=t.placement,r=void 0===i?e.placement:i,d=t.boundary,s=void 0===d?"clippingParents":d,u=t.rootBoundary,p=void 0===u?"viewport":u,m=t.elementContext,l=void 0===m?"popper":m,f=t.altBoundary,A=void 0!==f&&f,h=t.padding,g=void 0===h?0:h,j=Y("number"!=typeof g?g:X(g,k)),v="popper"===l?"reference":"popper",E=e.elements.reference,y=e.rects.popper,C=e.elements[A?v:l],T=q(a(C)?C:c(e.elements.popper),s,p),S=o(E),O=M({reference:S,element:y,strategy:"absolute",placement:r}),P=K(Object.assign({},y,{},O)),I="popper"===l?P:S,B={top:T.top-I.top+j.top,bottom:I.bottom-T.bottom+j.bottom,left:T.left-I.left+j.left,right:I.right-T.right+j.right},D=e.modifiersData.offset;if("popper"===l&&D){var L=D[r];Object.keys(B).forEach((function(e){var n=[w,x].indexOf(e)>=0?1:-1,t=[b,x].indexOf(e)>=0?"y":"x";B[e]+=L[t]*n}))}return B}var Q={name:"flip",enabled:!0,phase:"main",fn:function(e){var n=e.state,t=e.options,i=e.name;if(!n.modifiersData[i]._skip){for(var o=t.fallbackPlacements,r=t.padding,d=t.boundary,a=t.rootBoundary,s=t.altBoundary,u=t.flipVariations,c=void 0===u||u,p=n.options.placement,m=O(p),l=o||(m===p||!c?[W(p)]:function(e){if("auto"===O(e))return[];var n=W(e);return[H(e),n,H(n)]}(p)),f=[p].concat(l).reduce((function(e,t){return e.concat("auto"===O(t)?function(e,n){void 0===n&&(n={});var t=n,i=t.placement,o=t.boundary,r=t.rootBoundary,d=t.padding,a=t.flipVariations,s=L(i),u=(s?a?y:y.filter((function(e){return L(e)===s})):k).reduce((function(n,t){return n[t]=Z(e,{placement:t,boundary:o,rootBoundary:r,padding:d})[O(t)],n}),{});return Object.keys(u).sort((function(e,n){return u[e]-u[n]}))}(n,{placement:t,boundary:d,rootBoundary:a,padding:r,flipVariations:c}):t)}),[]),A=n.rects.reference,h=n.rects.popper,g=new Map,j=!0,v=f[0],C=0;C<f.length;C++){var T=f[C],S=O(T),P="start"===L(T),I=[b,x].indexOf(S)>=0,B=I?"width":"height",D=Z(n,{placement:T,boundary:d,rootBoundary:a,altBoundary:s,padding:r}),U=I?P?w:E:P?x:b;A[B]>h[B]&&(U=W(U));var M=W(U),F=[D[S]<=0,D[U]<=0,D[M]<=0];if(F.every((function(e){return e}))){v=T,j=!1;break}g.set(T,F)}if(j)for(var $=function(e){var n=f.find((function(n){var t=g.get(n);if(t)return t.slice(0,e).every((function(e){return e}))}));if(n)return v=n,"break"},R=c?3:1;R>0;R--){if("break"===$(R))break}n.placement!==v&&(n.modifiersData[i]._skip=!0,n.placement=v,n.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}};var ee={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(e){var n=e.state,t=e.options,i=e.name,o=t.offset,r=void 0===o?[0,0]:o,d=C.reduce((function(e,t){return e[t]=function(e,n,t){var i=O(e),o=[E,b].indexOf(i)>=0?-1:1,r="function"==typeof t?t(Object.assign({},n,{placement:e})):t,d=r[0],a=r[1];return d=d||0,a=(a||0)*o,[E,w].indexOf(i)>=0?{x:a,y:d}:{x:d,y:a}}(t,n.rects,r),e}),{}),a=d[n.placement],s=a.x,u=a.y;n.modifiersData.popperOffsets.x+=s,n.modifiersData.popperOffsets.y+=u,n.modifiersData[i]=d}};function ne(e,n,t){return Math.max(e,Math.min(n,t))}var te={name:"arrow",enabled:!0,phase:"main",fn:function(e){var n,t=e.state,i=e.name,o=t.elements.arrow,r=t.modifiersData.popperOffsets,d=O(t.placement),a=U(d),s=[E,w].indexOf(d)>=0?"height":"width";if(o){var u=t.modifiersData[i+"#persistent"].padding,c=l(o),p="y"===a?b:E,m="y"===a?x:w,f=t.rects.reference[s]+t.rects.reference[a]-r[a]-t.rects.popper[s],A=r[a]-t.rects.reference[a],h=t.elements.arrow&&v(t.elements.arrow),g=f/2-A/2-(h?"y"===a?h.clientLeft||0:h.clientTop||0:0),j=ne(u[p],t.rects.popper[s]/2-c[s]/2+g,t.rects.popper[s]-c[s]-u[m]),k=a;t.modifiersData[i]=((n={})[k]=j,n)}},effect:function(e){var n=e.state,t=e.options,i=e.name,o=t.element,r=void 0===o?"[data-popper-arrow]":o,d=t.padding,a=void 0===d?0:d;("string"!=typeof r||(r=n.elements.popper.querySelector(r)))&&G(n.elements.popper,r)&&(n.elements.arrow=r,n.modifiersData[i+"#persistent"]={padding:Y("number"!=typeof a?a:X(a,k))})},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};var ie={name:"preventOverflow",enabled:!0,phase:"main",fn:function(e){var n=e.state,t=e.options,i=e.name,o=t.mainAxis,r=void 0===o||o,d=t.altAxis,a=void 0!==d&&d,s=t.boundary,u=t.rootBoundary,c=t.altBoundary,p=t.padding,m=t.tether,f=void 0===m||m,A=t.tetherOffset,h=void 0===A?0:A,g=Z(n,{boundary:s,rootBoundary:u,padding:p,altBoundary:c}),j=O(n.placement),k=L(n.placement),y=!k,C=U(j),T="x"===C?"y":"x",S=n.modifiersData.popperOffsets,P=n.rects.reference,I=n.rects.popper,B="function"==typeof h?h(Object.assign({},n.rects,{placement:n.placement})):h,D={x:0,y:0};if(r){var M="y"===C?b:E,F="y"===C?x:w,$="y"===C?"height":"width",R=S[C],_=S[C]+g[M],W=S[C]-g[F],N=f?-I[$]/2:0,H="start"===k?P[$]:I[$],z="start"===k?-I[$]:-P[$],J=n.elements.arrow,G=f&&J?l(J):{width:0,height:0},K=n.modifiersData["arrow#persistent"]?n.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},V=K[M],q=K[F],Y=ne(0,P[$],G[$]),X=y?P[$]/2-N-Y-V-B:H-Y-V-B,Q=y?-P[$]/2+N+Y+q+B:z+Y+q+B,ee=n.elements.arrow&&v(n.elements.arrow),te=ee?"y"===C?ee.clientTop||0:ee.clientLeft||0:0,ie=n.modifiersData.offset?n.modifiersData.offset[n.placement][C]:0,oe=S[C]+X-ie-te,re=S[C]+Q-ie,de=ne(f?Math.min(_,oe):_,R,f?Math.max(W,re):W);S[C]=de,D[C]=de-R}if(a){var ae="x"===C?b:E,se="x"===C?x:w,ue=S[T],ce=ne(ue+g[ae],ue,ue-g[se]);n.modifiersData.popperOffsets[T]=ce,D[T]=ce-ue}n.modifiersData[i]=D},requiresIfExists:["offset"]},oe=n;oe="default"in oe?oe.default:oe;/^2\./.test(oe.version)||oe.util.warn("VueClickaway 2.2.2 only supports Vue 2.x, and does not support Vue "+oe.version);var re="_vue_clickaway_handler";function de(e,n,t){ae(e);var i=t.context,o=n.value;if("function"==typeof o){var r=!1;setTimeout((function(){r=!0}),0),e[re]=function(n){var t=n.path||(n.composedPath?n.composedPath():void 0);if(r&&(t?t.indexOf(e)<0:!e.contains(n.target)))return o.call(i,n)},document.documentElement.addEventListener("click",e[re],!1)}}function ae(e){document.documentElement.removeEventListener("click",e[re],!1),delete e[re]}var se={bind:de,update:function(e,n){n.value!==n.oldValue&&de(e,n)},unbind:ae},ue={version:"2.2.2",directive:se,mixin:{directives:{onClickaway:se}}},ce=n.extend({mixins:[ue.mixin],name:"PopupEmoji",data:()=>({containerRef:null,buttonRef:null,popperOpen:!1,debouncedPopperOpen:!1,popperInstance:null}),props:{disabled:{default:!1,type:Boolean},placement:{default:"top-start",type:String},autoflip:{default:!1,type:Boolean},offset:{default:()=>[0,30],type:Array},arrowEnabled:{default:!1,type:Boolean},triggerType:{default:"click",type:String,validator:function(e){return"click"!==e&&"hover"!==e&&console.error('The value entered for the prop "triggerType" is invalid. Valid values: "click" and "hover".'),!0}},closeOnClickaway:{default:!0,type:Boolean}},mounted(){const e=[...R,ee,ie];this.autoflip&&e.push(Q),this.arrowEnabled&&e.push(te);const n=B({defaultModifiers:e});this.containerRef=this.$refs.container,this.buttonRef=this.$refs.button,this.popperInstance=n(this.buttonRef,this.containerRef,{placement:this.placement,modifiers:[{name:"offset",options:{offset:this.offset}},{name:"arrow",options:{element:"#arrow"}}]})},watch:{popperOpen:function(e){this.$emit("popperOpenChanged",e),setTimeout(()=>{this.debouncedPopperOpen=e},300)}},methods:{clickTriggerPopper(){if(this.disabled||"click"!==this.triggerType)return;const e=this.popperInstance;this.$refs.container.hasAttribute("data-show")?(this.$refs.container.removeAttribute("data-show"),this.popperOpen=!1,setTimeout(e.forceUpdate,1)):(this.popperOpen=!0,this.$refs.container.setAttribute("data-show",""),setTimeout(e.forceUpdate,1))},clickAwayPopper(){if(this.disabled||!this.closeOnClickaway)return;const e=this.popperInstance;this.debouncedPopperOpen&&(this.$refs.container.removeAttribute("data-show"),this.popperOpen=!1,setTimeout(e.forceUpdate,1))},hoverTriggerPopper(){if(this.disabled||"hover"!==this.triggerType)return;const e=this.popperInstance;this.$refs.container.hasAttribute("data-show")?(this.$refs.container.removeAttribute("data-show"),this.popperOpen=!1,setTimeout(e.forceUpdate,1)):(this.popperOpen=!0,this.$refs.container.setAttribute("data-show",""),setTimeout(e.forceUpdate,1))}}});function pe(e,n,t,i,o,r,d,a,s,u){"boolean"!=typeof d&&(s=a,a=d,d=!1);const c="function"==typeof t?t.options:t;let p;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,o&&(c.functional=!0)),i&&(c._scopeId=i),r?(p=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,s(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},c._ssrRegister=p):n&&(p=d?function(e){n.call(this,u(e,this.$root.$options.shadowRoot))}:function(e){n.call(this,a(e))}),p)if(c.functional){const e=c.render;c.render=function(n,t){return p.call(t),e(n,t)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,p):[p]}return t}const me="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function le(e){return(e,n)=>function(e,n){const t=me?n.media||"default":e,i=Ae[t]||(Ae[t]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);let t=n.source;if(n.map&&(t+="\n/*# sourceURL="+n.map.sources[0]+" */",t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",n.media&&i.element.setAttribute("media",n.media),void 0===fe&&(fe=document.head||document.getElementsByTagName("head")[0]),fe.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(t),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const e=i.ids.size-1,n=document.createTextNode(t),o=i.element.childNodes;o[e]&&i.element.removeChild(o[e]),o.length?i.element.insertBefore(n,o[e]):i.element.appendChild(n)}}}(e,n)}let fe;const Ae={};const he=ce;var ge=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",[t("div",{directives:[{name:"on-clickaway",rawName:"v-on-clickaway",value:e.clickAwayPopper,expression:"clickAwayPopper"}],ref:"container",attrs:{id:"popper-container"},on:{mouseleave:e.hoverTriggerPopper}},[t("div",{attrs:{id:this.arrowEnabled?"arrow":"arrow-disabled","data-popper-arrow":""}}),e._v(" "),t("div",{attrs:{id:"popper-inner"}},[e.containerRef?e._t("container"):e._e()],2)]),e._v(" "),t("span",{ref:"button",attrs:{id:"popper-button"},on:{click:e.clickTriggerPopper,mouseenter:e.hoverTriggerPopper}},[e.buttonRef?e._t("button"):e._e()],2)])};ge._withStripped=!0;const je=pe({render:ge,staticRenderFns:[]},(function(e){e&&e("data-v-0a60e52c_0",{source:"/* *Animation */\n#popper-container {\n  padding: 0;\n  background: #ebebeb;\n  border: none;\n  border-radius: 3px;\n  -webkit-animation: fadein 300ms;\n          animation: fadein 300ms;\n  z-index: 1;\n  display: none;\n}\n#popper-container[data-show] {\n  display: block;\n}\n#arrow {\n  position: absolute;\n  z-index: -1;\n}\n#arrow::before {\n  position: absolute;\n  z-index: -1;\n  content: '';\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n  background: #ebebeb;\n  width: 24px;\n  height: 24px;\n}\n#popper-container[data-popper-placement^='top'] > #arrow {\n  bottom: 12px;\n  padding-right: 32px;\n}\n#popper-container[data-popper-placement^='bottom'] > #arrow {\n  top: -12px;\n  padding-right: 32px;\n}\n#popper-container[data-popper-placement^='left'] > #arrow {\n  right: 12px;\n  padding-bottom: 32px;\n}\n#popper-container[data-popper-placement^='right'] > #arrow {\n  left: -12px;\n  padding-bottom: 32px;\n}\n@-webkit-keyframes fadein {\nfrom {\n    opacity: 0;\n}\nto {\n    opacity: 1;\n}\n}\n@keyframes fadein {\nfrom {\n    opacity: 0;\n}\nto {\n    opacity: 1;\n}\n}\n",map:{version:3,sources:["/home/michael/Documents/vue-twemoji-picker/src/components/PopupEmoji.vue","PopupEmoji.vue"],names:[],mappings:"AA4BA,eAAA;AAWA;EACA,UAAA;EACA,mBAAA;EACA,YAAA;EACA,kBAAA;EACA,+BAAA;UAAA,uBAAA;EACA,UAAA;EACA,aAAA;ACrCA;ADuCA;EACA,cAAA;ACrCA;ADyCA;EACA,kBAAA;EACA,WAAA;ACvCA;ADyCA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,gCAAA;UAAA,wBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;ACvCA;AD2CA;EACA,YAAA;EACA,mBAAA;ACzCA;AD4CA;EACA,UAAA;EACA,mBAAA;AC1CA;AD6CA;EACA,WAAA;EACA,oBAAA;AC3CA;AD8CA;EACA,WAAA;EACA,oBAAA;AC5CA;ADZA;AACA;IACA,UAAA;ACsBE;ADnBF;IACA,UAAA;ACqBE;AACF;AD5BA;AACA;IACA,UAAA;ACsCE;ADnCF;IACA,UAAA;ACqCE;AACF",file:"PopupEmoji.vue",sourcesContent:["<template>\n  <div>\n    <div\n      ref=\"container\"\n      id=\"popper-container\"\n      v-on-clickaway=\"clickAwayPopper\"\n      @mouseleave=\"hoverTriggerPopper\"\n    >\n      <div\n        :id=\"this.arrowEnabled ? 'arrow' : 'arrow-disabled'\"\n        data-popper-arrow\n      />\n      <div id=\"popper-inner\">\n        <slot name=\"container\" v-if=\"containerRef\" />\n      </div>\n    </div>\n    <span\n      ref=\"button\"\n      id=\"popper-button\"\n      @click=\"clickTriggerPopper\"\n      @mouseenter=\"hoverTriggerPopper\"\n    >\n      <slot name=\"button\" v-if=\"buttonRef\" />\n    </span>\n  </div>\n</template>\n\n<style lang=\"stylus\">\n/* *Animation */\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n#popper-container {\n  padding: 0;\n  background: #ebebeb;\n  border: none;\n  border-radius: 3px;\n  animation: fadein 300ms;\n  z-index: 1;\n  display: none;\n\n  &[data-show] {\n    display: block;\n  }\n}\n\n#arrow {\n  position: absolute;\n  z-index: -1;\n\n  &::before {\n    position: absolute;\n    z-index: -1;\n    content: '';\n    transform: rotate(45deg);\n    background: #ebebeb;\n    width: 24px;\n    height: 24px;\n  }\n}\n\n#popper-container[data-popper-placement^='top'] > #arrow {\n  bottom: 12px;\n  padding-right: 32px;\n}\n\n#popper-container[data-popper-placement^='bottom'] > #arrow {\n  top: -12px;\n  padding-right: 32px;\n}\n\n#popper-container[data-popper-placement^='left'] > #arrow {\n  right: 12px;\n  padding-bottom: 32px;\n}\n\n#popper-container[data-popper-placement^='right'] > #arrow {\n  left: -12px;\n  padding-bottom: 32px;\n}\n</style>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport {\n  popperGenerator,\n  defaultModifiers\n} from '@popperjs/core/lib/popper-lite';\nimport flip from '@popperjs/core/lib/modifiers/flip';\nimport offset from '@popperjs/core/lib/modifiers/offset';\nimport arrow from '@popperjs/core/lib/modifiers/arrow';\nimport preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';\n\nimport VueClickaway from 'vue-clickaway';\n\nexport default Vue.extend({\n  mixins: [VueClickaway.mixin],\n  name: 'PopupEmoji',\n  data() {\n    return {\n      // eslint-disable-next-line\n      containerRef: null as HTMLElement | null,\n      buttonRef: null as HTMLElement | null,\n      popperOpen: false as boolean,\n      debouncedPopperOpen: false as boolean,\n      popperInstance: null as any | null\n    };\n  },\n  props: {\n    disabled: {\n      default: false,\n      type: Boolean as () => boolean\n    },\n    placement: {\n      default: 'top-start',\n      type: String as () => string\n    },\n    autoflip: {\n      default: false,\n      type: Boolean as () => boolean\n    },\n    offset: {\n      default: () => [0, 30],\n      type: Array as () => Array<number>\n    },\n    arrowEnabled: {\n      default: false,\n      type: Boolean as () => boolean\n    },\n    triggerType: {\n      default: 'click',\n      type: String as () => string,\n      validator: function(value) {\n        if (value !== 'click' && value !== 'hover') {\n          console.error(\n            'The value entered for the prop \"triggerType\" is invalid. ' +\n              'Valid values: \"click\" and \"hover\".'\n          );\n        }\n        return true;\n      }\n    },\n    closeOnClickaway: {\n      default: true,\n      type: Boolean as () => boolean\n    }\n  },\n  mounted(): void {\n    const defaultModifiersObj = [...defaultModifiers, offset, preventOverflow];\n    if (this.autoflip) defaultModifiersObj.push(flip);\n    if (this.arrowEnabled) defaultModifiersObj.push(arrow);\n\n    const createPopper = popperGenerator({\n      defaultModifiers: defaultModifiersObj\n    });\n\n    this.containerRef = this.$refs.container;\n    this.buttonRef = this.$refs.button;\n\n    this.popperInstance = createPopper(this.buttonRef, this.containerRef, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: this.offset\n          }\n        },\n        {\n          name: 'arrow',\n          options: {\n            element: '#arrow'\n          }\n        }\n      ]\n    });\n  },\n  watch: {\n    popperOpen: function(val): void {\n      this.$emit('popperOpenChanged', val);\n      setTimeout(() => {\n        this.debouncedPopperOpen = val;\n      }, 300);\n    }\n  },\n  methods: {\n    clickTriggerPopper(): void {\n      if (this.disabled || this.triggerType !== 'click') return;\n      const ctxPopperInstance = this.popperInstance;\n\n      if (this.$refs.container.hasAttribute('data-show')) {\n        this.$refs.container.removeAttribute('data-show');\n        this.popperOpen = false;\n        setTimeout(ctxPopperInstance.forceUpdate, 1);\n      } else {\n        this.popperOpen = true;\n        this.$refs.container.setAttribute('data-show', '');\n        setTimeout(ctxPopperInstance.forceUpdate, 1);\n      }\n    },\n    clickAwayPopper(): void {\n      if (this.disabled || !this.closeOnClickaway) return;\n      const ctxPopperInstance = this.popperInstance;\n\n      if (this.debouncedPopperOpen) {\n        this.$refs.container.removeAttribute('data-show');\n        this.popperOpen = false;\n        setTimeout(ctxPopperInstance.forceUpdate, 1);\n      }\n    },\n    hoverTriggerPopper(): void {\n      if (this.disabled || this.triggerType !== 'hover') return;\n      const ctxPopperInstance = this.popperInstance;\n\n      if (this.$refs.container.hasAttribute('data-show')) {\n        this.$refs.container.removeAttribute('data-show');\n        this.popperOpen = false;\n        setTimeout(ctxPopperInstance.forceUpdate, 1);\n      } else {\n        this.popperOpen = true;\n        this.$refs.container.setAttribute('data-show', '');\n        setTimeout(ctxPopperInstance.forceUpdate, 1);\n      }\n    }\n  }\n});\n<\/script>\n","/* *Animation */\n#popper-container {\n  padding: 0;\n  background: #ebebeb;\n  border: none;\n  border-radius: 3px;\n  animation: fadein 300ms;\n  z-index: 1;\n  display: none;\n}\n#popper-container[data-show] {\n  display: block;\n}\n#arrow {\n  position: absolute;\n  z-index: -1;\n}\n#arrow::before {\n  position: absolute;\n  z-index: -1;\n  content: '';\n  transform: rotate(45deg);\n  background: #ebebeb;\n  width: 24px;\n  height: 24px;\n}\n#popper-container[data-popper-placement^='top'] > #arrow {\n  bottom: 12px;\n  padding-right: 32px;\n}\n#popper-container[data-popper-placement^='bottom'] > #arrow {\n  top: -12px;\n  padding-right: 32px;\n}\n#popper-container[data-popper-placement^='left'] > #arrow {\n  right: 12px;\n  padding-bottom: 32px;\n}\n#popper-container[data-popper-placement^='right'] > #arrow {\n  left: -12px;\n  padding-bottom: 32px;\n}\n@-moz-keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@-webkit-keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@-o-keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n"]},media:void 0})}),he,void 0,!1,void 0,!1,le,void 0,void 0);const ve=n.extend({mixins:[ue.mixin],name:"PopupSkins",data:()=>({containerRef:null,buttonRef:null,popperOpen:!1,debouncedPopperOpen:!1,popperInstance:null,holdingInterval:null,closeOnClickaway:!0}),props:{disabled:{default:!1,type:Boolean},offset:{default:()=>[0,30],type:Array},emojiList:{required:!0,type:Array},clickEmoji:{required:!0,type:Function}},computed:{createPopper:()=>B({defaultModifiers:[...R,ee,ie,te]})},mounted(){this.containerRef=this.$refs.container},watch:{popperOpen:function(e){this.$emit("popperOpenChanged",e),setTimeout(()=>{this.debouncedPopperOpen=e},300)},closeOnClickaway:function(e){this.$emit("closeOnClickaway",e)}},methods:{clickAwayPopper(){if(this.disable||!this.closeOnClickaway)return;const e=this.popperInstance;this.debouncedPopperOpen&&(this.$refs.container.removeAttribute("data-show"),this.popperOpen=!1,setTimeout(e.forceUpdate,1))},instantiatePopper(e){const n=document.getElementById(e);this.popperInstance=this.createPopper(n,this.$refs.container,{placement:"top",modifiers:[{name:"offset",options:{offset:this.offset}},{name:"arrow",options:{element:"#skins-arrow"}}]}),this.$refs.container.setAttribute("data-show",!0),this.popperOpen=!0;const t=this.popperInstance;setTimeout(t.forceUpdate,1)},closePopper(){this.$refs.container.removeAttribute("data-show"),this.popperOpen=!1;const e=this.popperInstance;e&&setTimeout(e.forceUpdate,1)},setCloseOnClickaway(e){this.closeOnClickaway=e}}});var be=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",[t("div",{directives:[{name:"on-clickaway",rawName:"v-on-clickaway",value:e.clickAwayPopper,expression:"clickAwayPopper"}],ref:"container",attrs:{id:"popper-skins-container"}},[t("div",{attrs:{id:"skins-arrow","data-popper-arrow":""}}),e._v(" "),t("div",{attrs:{id:"popper-inner"}},[t("div",{staticClass:"emoji-popover-inner"},[0!==e.emojiList.length?t("div",[t("p",{staticClass:"emoji-list"},e._l(e.emojiList,(function(n){return t("span",{key:n.unicode,domProps:{innerHTML:e._s(n.img)},on:{click:function(t){return e.clickEmoji(n)}}})})),0)]):e._e()])])])])};be._withStripped=!0;const xe=pe({render:be,staticRenderFns:[]},(function(e){e&&e("data-v-6a63f4ed_0",{source:"/* *Animation */\n#popper-skins-container {\n  -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);\n          box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);\n  padding: 0;\n  background: #f2f2f2;\n  border: none;\n  border-radius: 3px;\n  -webkit-animation: fadein 300ms;\n          animation: fadein 300ms;\n  z-index: 1;\n  display: none;\n}\n#popper-skins-container[data-show] {\n  display: block;\n}\n#skins-arrow {\n  position: absolute;\n  z-index: -1;\n}\n#skins-arrow::before {\n  position: absolute;\n  z-index: -1;\n  content: '';\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n  background: #f2f2f2;\n  width: 24px;\n  height: 24px;\n}\n#popper-skins-container[data-popper-placement^='top'] > #skins-arrow {\n  bottom: 12px;\n  padding-right: 20px;\n  left: -10px;\n}\n#popper-skins-container[data-popper-placement^='bottom'] > #skins-arrow {\n  top: -12px;\n  padding-right: 32px;\n}\n#popper-skins-container[data-popper-placement^='left'] > #skins-arrow {\n  right: 12px;\n  padding-bottom: 32px;\n}\n#popper-skins-container[data-popper-placement^='right'] > #skins-arrow {\n  left: -12px;\n  padding-bottom: 32px;\n}\n@-webkit-keyframes fadein {\nfrom {\n    opacity: 0;\n}\nto {\n    opacity: 1;\n}\n}\n@keyframes fadein {\nfrom {\n    opacity: 0;\n}\nto {\n    opacity: 1;\n}\n}\n",map:{version:3,sources:["/home/michael/Documents/vue-twemoji-picker/src/components/PopupSkins.vue","PopupSkins.vue"],names:[],mappings:"AA2BA,eAAA;AAWA;EACA,4EAAA;UAAA,oEAAA;EACA,UAAA;EACA,mBAAA;EACA,YAAA;EACA,kBAAA;EACA,+BAAA;UAAA,uBAAA;EACA,UAAA;EACA,aAAA;ACpCA;ADsCA;EACA,cAAA;ACpCA;ADwCA;EACA,kBAAA;EACA,WAAA;ACtCA;ADwCA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,gCAAA;UAAA,wBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;ACtCA;AD0CA;EACA,YAAA;EACA,mBAAA;EACA,WAAA;ACxCA;AD2CA;EACA,UAAA;EACA,mBAAA;ACzCA;AD4CA;EACA,WAAA;EACA,oBAAA;AC1CA;AD6CA;EACA,WAAA;EACA,oBAAA;AC3CA;ADfA;AACA;IACA,UAAA;ACyBE;ADtBF;IACA,UAAA;ACwBE;AACF;AD/BA;AACA;IACA,UAAA;ACyCE;ADtCF;IACA,UAAA;ACwCE;AACF",file:"PopupSkins.vue",sourcesContent:["<template>\n  <div>\n    <div\n      ref=\"container\"\n      id=\"popper-skins-container\"\n      v-on-clickaway=\"clickAwayPopper\"\n    >\n      <div id=\"skins-arrow\" data-popper-arrow />\n      <div id=\"popper-inner\">\n        <div class=\"emoji-popover-inner\">\n          <div v-if=\"emojiList.length !== 0\">\n            <p class=\"emoji-list\">\n              <span\n                v-for=\"emoji in emojiList\"\n                :key=\"emoji.unicode\"\n                v-html=\"emoji.img\"\n                @click=\"clickEmoji(emoji)\"\n              ></span>\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"stylus\">\n/* *Animation */\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n#popper-skins-container {\n  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);\n  padding: 0;\n  background: #f2f2f2;\n  border: none;\n  border-radius: 3px;\n  animation: fadein 300ms;\n  z-index: 1;\n  display: none;\n\n  &[data-show] {\n    display: block;\n  }\n}\n\n#skins-arrow {\n  position: absolute;\n  z-index: -1;\n\n  &::before {\n    position: absolute;\n    z-index: -1;\n    content: '';\n    transform: rotate(45deg);\n    background: #f2f2f2;\n    width: 24px;\n    height: 24px;\n  }\n}\n\n#popper-skins-container[data-popper-placement^='top'] > #skins-arrow {\n  bottom: 12px;\n  padding-right: 20px;\n  left: -10px;\n}\n\n#popper-skins-container[data-popper-placement^='bottom'] > #skins-arrow {\n  top: -12px;\n  padding-right: 32px;\n}\n\n#popper-skins-container[data-popper-placement^='left'] > #skins-arrow {\n  right: 12px;\n  padding-bottom: 32px;\n}\n\n#popper-skins-container[data-popper-placement^='right'] > #skins-arrow {\n  left: -12px;\n  padding-bottom: 32px;\n}\n</style>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport {\n  popperGenerator,\n  defaultModifiers\n} from '@popperjs/core/lib/popper-lite';\nimport offset from '@popperjs/core/lib/modifiers/offset';\nimport preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';\nimport arrow from '@popperjs/core/lib/modifiers/arrow';\nimport VueClickaway from 'vue-clickaway';\nimport EmojiSkin from '../interfaces/EmojiSkin';\n\nexport default Vue.extend({\n  mixins: [VueClickaway.mixin],\n  name: 'PopupSkins',\n  data() {\n    return {\n      // eslint-disable-next-line\n      containerRef: null as HTMLElement | null,\n      buttonRef: null as HTMLElement | null,\n      popperOpen: false as boolean,\n      debouncedPopperOpen: false as boolean,\n      popperInstance: null as any | null,\n      holdingInterval: null as any,\n      closeOnClickaway: true as boolean\n    };\n  },\n  props: {\n    disabled: {\n      default: false,\n      type: Boolean as () => boolean\n    },\n    offset: {\n      default: () => [0, 30],\n      type: Array as () => Array<number>\n    },\n    emojiList: {\n      required: true,\n      type: Array as () => Array<EmojiSkin>\n    },\n    clickEmoji: {\n      required: true,\n      type: Function as () => Function\n    }\n  },\n  computed: {\n    createPopper() {\n      const defaultModifiersObj = [\n        ...defaultModifiers,\n        offset,\n        preventOverflow,\n        arrow\n      ];\n\n      return popperGenerator({\n        defaultModifiers: defaultModifiersObj\n      });\n    }\n  },\n  mounted(): void {\n    this.containerRef = this.$refs.container;\n  },\n  watch: {\n    popperOpen: function(val): void {\n      this.$emit('popperOpenChanged', val);\n      setTimeout(() => {\n        this.debouncedPopperOpen = val;\n      }, 300);\n    },\n    closeOnClickaway: function(val): void {\n      this.$emit('closeOnClickaway', val);\n    }\n  },\n  methods: {\n    clickAwayPopper(): void {\n      if (this.disable || !this.closeOnClickaway) return;\n      const ctxPopperInstance = this.popperInstance;\n\n      if (this.debouncedPopperOpen) {\n        this.$refs.container.removeAttribute('data-show');\n        this.popperOpen = false;\n        setTimeout(ctxPopperInstance.forceUpdate, 1);\n      }\n    },\n    instantiatePopper(refClickable: string): void {\n      const domElClickableRef = document.getElementById(refClickable);\n      this.popperInstance = this.createPopper(\n        domElClickableRef,\n        this.$refs.container,\n        {\n          placement: 'top',\n          modifiers: [\n            {\n              name: 'offset',\n              options: {\n                offset: this.offset\n              }\n            },\n            {\n              name: 'arrow',\n              options: {\n                element: '#skins-arrow'\n              }\n            }\n          ]\n        }\n      );\n      this.$refs.container.setAttribute('data-show', true);\n      this.popperOpen = true;\n      const ctxPopperInstance = this.popperInstance;\n      setTimeout(ctxPopperInstance.forceUpdate, 1);\n    },\n    closePopper(): void {\n      this.$refs.container.removeAttribute('data-show');\n      this.popperOpen = false;\n      const ctxPopperInstance = this.popperInstance;\n      if (ctxPopperInstance) setTimeout(ctxPopperInstance.forceUpdate, 1);\n    },\n    setCloseOnClickaway(bool: boolean): void {\n      this.closeOnClickaway = bool;\n    }\n  }\n});\n<\/script>\n","/* *Animation */\n#popper-skins-container {\n  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);\n  padding: 0;\n  background: #f2f2f2;\n  border: none;\n  border-radius: 3px;\n  animation: fadein 300ms;\n  z-index: 1;\n  display: none;\n}\n#popper-skins-container[data-show] {\n  display: block;\n}\n#skins-arrow {\n  position: absolute;\n  z-index: -1;\n}\n#skins-arrow::before {\n  position: absolute;\n  z-index: -1;\n  content: '';\n  transform: rotate(45deg);\n  background: #f2f2f2;\n  width: 24px;\n  height: 24px;\n}\n#popper-skins-container[data-popper-placement^='top'] > #skins-arrow {\n  bottom: 12px;\n  padding-right: 20px;\n  left: -10px;\n}\n#popper-skins-container[data-popper-placement^='bottom'] > #skins-arrow {\n  top: -12px;\n  padding-right: 32px;\n}\n#popper-skins-container[data-popper-placement^='left'] > #skins-arrow {\n  right: 12px;\n  padding-bottom: 32px;\n}\n#popper-skins-container[data-popper-placement^='right'] > #skins-arrow {\n  left: -12px;\n  padding-bottom: 32px;\n}\n@-moz-keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@-webkit-keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@-o-keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n"]},media:void 0})}),ve,void 0,!1,void 0,!1,le,void 0,void 0);var we={emojiPickerDisabled:{default:!1,type:Boolean},pickerWidth:{default:250,type:[Number,String],validator:function(e){return"string"!=typeof e||e.startsWith("#")||console.error('The value you entered is invalid: should be a number or a ID tag beginning with "#"'),!0}},pickerHeight:{default:150,type:Number},pickerPlacement:{default:"top-start",type:String,validator:function(e){return["top-start","top","top-end","bottom-start","bottom","bottom-right","left-start","left","left-end","right-start","right","right-end"].some(n=>n===e)||console.error("The value entered for the prop \"pickerPlacement\" is invalid. Valid values: \n              'top-start',\n              'top',\n              'top-end',\n              'bottom-start',\n              'bottom',\n              'bottom-right',\n              'left-start',\n              'left',\n              'left-end',\n              'right-start',\n              'right',\n              'right-end'\n            "),!0}},pickerArrowEnabled:{default:!0,type:Boolean},pickerAutoflip:{default:!0,type:Boolean},pickerCloseOnClickaway:{default:!0,type:Boolean},triggerType:{default:"click",type:String,validator:function(e){return"click"!==e&&"hover"!==e&&console.error('The value entered for the prop "triggerType" is invalid. Valid values: "click" and "hover".'),!0}},emojiData:{required:!0,type:Array,validator:function(e){return e&&0!==e.length||console.error('The value entered for the prop "emojiData" is invalid. Should have a length greater than 0.'),!0}},emojiGroups:{required:!0,type:Array},skinsSelection:{default:!1,type:Boolean},recentEmojisFeat:{default:!1,type:Boolean},recentEmojisStorage:{default:"none",type:String,validator:function(e){return"local"!==e&&"session"!==e&&"none"!==e&&console.error('The value entered for the prop "recentEmojisStorage" is invalid. Valid values: "local", "session" and "none".'),!0}},recentEmojiStorageName:{default:"vue-recent-twemojis",type:String},recentEmojiLimit:{default:12,type:Number},searchEmojisFeat:{default:!1,type:Boolean},searchEmojiPlaceholder:{default:"Search emojis.",type:String},isLoadingLabel:{default:"Loading...",type:String},searchEmojiNotFound:{default:"No emojis found.",type:String},twemojiPath:{default:"https://twemoji.maxcdn.com/2/",type:String},twemojiExtension:{default:".png",type:String,validator:function(e){return!1===(-1!==[".png",".svg",".jpg",".jpeg",".ico"].indexOf(e))&&console.error('The value entered for the prop "twemojiPath" is invalid. Valid values: ".png", ".svg", ".jpg", ".jpeg", ".ico".'),!0}},twemojiFolder:{default:"72x72",type:String},randomEmojiArray:{default:()=>["😀","😃","😄","😁","😆","😅","🤣","😂","🙂","🙃","😉","😊","🥴","😵","🤯","🤠","🥳","😎","🤓","🧐"],type:Array,validator:function(e){return e&&0===e.length&&console.error("The Array must have a length of one or more."),!0}}};const Ee=n.extend({name:"TwemojiPicker",components:{"popup-emoji":je,"popup-skins":xe},props:{...we},data:()=>({isPickerOpen:!1,clickingSkinInterval:!1,isClickingEmojiMouseDown:!1,popupSkinsClickaway:!0,showEmoji:!1,showSkinsSelector:!1,skinsListActive:[],emojiPack:[],emojiListActive:[],emojiGroupActive:0,randomEmoji:null,isPointerOnEmojiBtn:!1,twemojiOptions:{},recentEmojis:[],searchTerm:"",searchEmojis:[],searchTimeout:null,isSearchingEmoji:!1,calculatedPickerWidth:null,hideSearch:!1}),mounted(){this.setPickerWidth(),this.$nextTick(()=>{window.addEventListener("resize",this.setPickerWidth)})},computed:{randomEmojiImg(){return this.triggerShowEmoji(),i.getEmojiImgFromUnicode(this.randomEmoji,this.twemojiOptions)}},created(){this.twemojiOptions={base:this.twemojiPath,ext:this.twemojiExtension,size:this.twemojiFolder},this.recentEmojisFeat&&this.setRecentEmojis(),this.buildEmojiPack(),this.emojiListActive=this.emojiPack[0].emojiList,this.setRandomEmoji()},methods:{triggerShowEmoji(){this.showEmoji=!1,setTimeout(()=>this.showEmoji=!0)},buildEmojiPack(){this.emojiPack=i.getEmojiImgArrayFromEmojiPack(this.emojiData,this.twemojiOptions)},onMouseEnterEmojiBtn(){!1===this.isPointerOnEmojiBtn&&(this.isPointerOnEmojiBtn=!0,this.setRandomEmoji())},onMouseLeaveEmojiBtn(){!0===this.isPointerOnEmojiBtn&&(this.isPointerOnEmojiBtn=!1)},setRandomEmoji(){this.randomEmoji=this.randomEmojiArray[Math.floor(Math.random()*this.randomEmojiArray.length)]},clickEmoji(e){var n;let t;this.$refs.popupSkins.setCloseOnClickaway(!1);const o=this;setTimeout(()=>{o.$refs.popupSkins.setCloseOnClickaway(!0)},1),(this.isClickingEmojiMouseDown||this.$refs.popupSkins.popperOpen)&&(null===(n=e.skins)||void 0===n?void 0:n.length)>0&&this.skinsSelection||(this.$refs.popupSkins.closePopper(),t=e.unicode,this.recentEmojisFeat&&this.addEmojiToRecentEmojis(t),this.$emit("addTextBlur",t),this.$emit("emojiUnicodeAdded",t),this.$emit("emojiImgAdded",i.getEmojiImgFromUnicode(t,this.twemojiOptions)))},startClickingSkinInterval(e){var n;this.$refs.popupSkins.closePopper(),this.isClickingEmojiMouseDown=!1,(null===(n=e.skins)||void 0===n?void 0:n.length)>0&&this.skinsSelection&&(this.clickingSkinInterval||(this.clickingSkinInterval=setInterval(()=>{this.skinsListActive=Array.from(e.skins),this.skinsListActive.unshift({unicode:e.unicode,img:e.img}),this.$refs.popupSkins.instantiatePopper(`twemoji-picker-click-emoji-${e.unicode}`)},500)))},stopClickingSkinInterval(){this.isClickingEmojiMouseDown=!1,clearInterval(this.clickingSkinInterval),this.clickingSkinInterval=!1},getEmojiGroupDescription(e){const n=this.emojiGroups.find(n=>n.group===e);return n?i.getEmojiImgFromUnicode(n.description,this.twemojiOptions):"Group "+e},changeEmojiListActive(e){this.showSkinsSelector=!1,this.searchTerm="",this.emojiGroupActive=e,e>=0?this.emojiListActive=this.emojiPack[e].emojiList:-1===e&&(this.emojiListActive=this.recentEmojis)},getEmojiImgFromUnicode(e){return i.getEmojiImgFromUnicode(e,this.twemojiOptions)},setRecentEmojis(){let e=null;e="local"===this.recentEmojisStorage?JSON.parse(localStorage.getItem(this.recentEmojiStorageName)||"[]"):"session"===this.recentEmojisStorage?JSON.parse(sessionStorage.getItem(this.recentEmojiStorageName)||"[]"):[],null!=e&&(this.recentEmojis=e)},addEmojiToRecentEmojis(e){const n=this.recentEmojis.findIndex(n=>n.unicode===e);-1!==n?(this.recentEmojis.splice(n,1),this.recentEmojis.unshift({unicode:e,img:i.getEmojiImgFromUnicode(e,this.twemojiOptions),skins:[],tags:[]})):this.recentEmojis.unshift({unicode:e,img:i.getEmojiImgFromUnicode(e,this.twemojiOptions),skins:[],tags:[]}),this.recentEmojis.length>this.recentEmojiLimit&&this.recentEmojis.splice(-1,1),"local"===this.recentEmojisStorage?localStorage.setItem(this.recentEmojiStorageName,JSON.stringify(this.recentEmojis)):"session"===this.recentEmojisStorage&&sessionStorage.setItem(this.recentEmojiStorageName,JSON.stringify(this.recentEmojis))},searchEmojiByTerm(){this.isSearchingEmoji=!0,clearTimeout(this.searchTimeout),this.searchTerm.length>0?this.searchTimeout=setTimeout(()=>{this.searchEmojis=i.getEmojiImgArrayFromEmojiPackByTerm(this.emojiData,this.twemojiOptions,this.searchTerm),this.emojiGroupActive=-2,this.emojiListActive=this.searchEmojis,this.showSkinsSelector=!1,this.isSearchingEmoji=!1},300):(this.changeEmojiListActive(0),this.isSearchingEmoji=!1)},popperOpenChanged(e){this.isPickerOpen=e},setPickerWidth(){if("string"==typeof this.pickerWidth&&this.pickerWidth.startsWith("#")){const e=this.pickerWidth.slice(1),n=document.getElementById(e);n&&(this.calculatedPickerWidth=n.offsetWidth)}else"number"==typeof this.pickerWidth&&(this.calculatedPickerWidth=this.pickerWidth)},onScrollEmojiList(e){this.$refs.popupSkins.closePopper(),this.searchEmojisFeat&&(e.target.scrollTop>50?this.hideSearch=!0:this.hideSearch=!1)}}});var ke=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",[e.emojiData&&e.emojiData.length>0?t("popup-emoji",{ref:"popupEmoji",attrs:{disabled:e.emojiPickerDisabled,offset:e.pickerArrowEnabled?[0,35]:[0,30],triggerType:e.triggerType,placement:e.pickerPlacement,autoflip:e.pickerAutoflip,arrowEnabled:e.pickerArrowEnabled,closeOnClickaway:e.pickerCloseOnClickaway},on:{popperOpenChanged:e.popperOpenChanged},scopedSlots:e._u([{key:"container",fn:function(){return[t("div",{attrs:{id:"emoji-container"}},[t("div",{style:{width:e.calculatedPickerWidth+"px"},attrs:{id:"emoji-popup"}},[t("div",{staticClass:"scroll-min",attrs:{id:"emoji-popover-header"}},[e.recentEmojisFeat&&0!==e.recentEmojis.length?t("span",{staticClass:"emoji-tab",class:{active:-1===e.emojiGroupActive},domProps:{innerHTML:e._s(e.getEmojiImgFromUnicode("⏱️"))},on:{click:function(n){return e.changeEmojiListActive(-1)}}}):e._e(),e._v(" "),e._l(e.emojiPack,(function(n,i){return t("span",{key:n.group,staticClass:"emoji-tab",class:{active:e.emojiGroupActive===i},attrs:{id:n.group},domProps:{innerHTML:e._s(e.getEmojiGroupDescription(n.group))},on:{click:function(n){return e.changeEmojiListActive(i)}}})}))],2),e._v(" "),e.searchEmojisFeat?t("div",{directives:[{name:"show",rawName:"v-show",value:!e.hideSearch,expression:"!hideSearch"}],attrs:{id:"emoji-popover-search"}},[t("div",{attrs:{id:"search-header"}},[t("input",{directives:[{name:"model",rawName:"v-model",value:e.searchTerm,expression:"searchTerm"}],attrs:{placeholder:e.searchEmojiPlaceholder},domProps:{value:e.searchTerm},on:{input:[function(n){n.target.composing||(e.searchTerm=n.target.value)},e.searchEmojiByTerm]}})])]):e._e(),e._v(" "),t("div",{staticClass:"emoji-popover-inner",style:{width:e.calculatedPickerWidth+"px",height:e.hideSearch?e.pickerHeight+45+"px":e.pickerHeight+"px"},on:{"&scroll":function(n){return e.onScrollEmojiList(n)}}},[e.isSearchingEmoji?t("div",[t("strong",{style:{padding:"3px"},attrs:{id:"loading-label"}},[e._v(e._s(e.isLoadingLabel))])]):e._e(),e._v(" "),0!==e.searchTerm.length&&0===e.searchEmojis.length&&!1===e.isSearchingEmoji?t("div",[t("strong",{style:{padding:"3px"}},[e._v(e._s(e.searchEmojiNotFound))])]):e._e(),e._v(" "),0!==e.emojiListActive.length&&!1===e.isSearchingEmoji?t("div",[t("p",{staticClass:"emoji-list"},e._l(e.emojiListActive,(function(n){return t("span",{key:n.unicode,attrs:{id:"twemoji-picker-click-emoji-"+n.unicode},domProps:{innerHTML:e._s(n.img)},on:{click:function(t){return e.clickEmoji(n)},mousedown:function(t){return e.startClickingSkinInterval(n)},mouseleave:e.stopClickingSkinInterval,mouseup:e.stopClickingSkinInterval,touchstart:function(t){return e.startClickingSkinInterval(n)},touchend:e.stopClickingSkinInterval,touchcancel:e.stopClickingSkinInterval}})})),0)]):e._e()]),e._v(" "),t("popup-skins",{ref:"popupSkins",attrs:{emojiList:e.skinsListActive,closeOnClickaway:e.popupSkinsClickaway,clickEmoji:e.clickEmoji}})],1)])]},proxy:!0},{key:"button",fn:function(){return[e._t("twemoji-picker-button",[t("button",{attrs:{disabled:e.emojiPickerDisabled,id:"btn-emoji-default"},on:{mouseenter:function(n){return e.onMouseEnterEmojiBtn()},mouseleave:function(n){return e.onMouseLeaveEmojiBtn()}}},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.showEmoji,expression:"showEmoji"}],staticClass:"fade-in",domProps:{innerHTML:e._s(e.randomEmojiImg)}}),e._v(" "),t("div",{directives:[{name:"show",rawName:"v-show",value:!e.showEmoji,expression:"!showEmoji"}],attrs:{id:"dummy-el"}})])])]},proxy:!0}],null,!0)}):e._e(),e._v(" "),t("span",{attrs:{id:"dummy-clickable-skin"}})],1)};ke._withStripped=!0;const ye=pe({render:ke,staticRenderFns:[]},(function(e){e&&e("data-v-576b0e13_0",{source:"#emoji-container {\n  z-index: 1;\n}\n#emoji-container > #emoji-popup img.emoji {\n  height: 32px;\n  width: 32px;\n  vertical-align: -0.5rem;\n}\n#emoji-container > #emoji-popup > #emoji-popover-header {\n  padding: 15px;\n  overflow-y: hidden;\n  overflow-x: auto;\n  white-space: nowrap;\n}\n#emoji-container > #emoji-popup > #emoji-popover-header > .emoji-tab {\n  margin: 3px;\n  padding: 5px;\n  padding: 8px 5px;\n  cursor: pointer;\n  border-radius: 2px;\n  opacity: 0.5;\n}\n#emoji-container > #emoji-popup > #emoji-popover-header > .emoji-tab:hover {\n  border-bottom: 5px solid #b3b3b3;\n  opacity: 1;\n}\n#emoji-container > #emoji-popup > #emoji-popover-header > .emoji-tab.active {\n  border-bottom: 5px solid #b3b3b3;\n  opacity: 1;\n}\n#emoji-container > #emoji-popup .emoji-popover-inner {\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n#emoji-container > #emoji-popup .emoji-popover-inner #loading-label {\n  margin: 0 5px;\n}\n#emoji-container > #emoji-popup .emoji-popover-inner > div > .emoji-list {\n  padding: 10px;\n  margin: 0px;\n  text-align: justify;\n}\n#emoji-container > #emoji-popup .emoji-popover-inner > div > .emoji-list > span {\n  font-size: 15px;\n  cursor: pointer;\n  border-radius: 15px;\n}\n#emoji-container > #emoji-popup .emoji-popover-inner > div > .emoji-list > span:hover {\n  background-color: #cacaca;\n}\n#emoji-container > #emoji-popup .emoji-popover-inner > div > .emoji-list > span > img {\n  margin: 5px;\n}\n#emoji-container > #emoji-popup #emoji-popover-search {\n  background-color: #ebebeb;\n  border-radius: 3px;\n  margin: 5px 0;\n}\n#emoji-container > #emoji-popup #emoji-popover-search > #search-header {\n  padding-top: 5px 0;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n}\n#emoji-container > #emoji-popup #emoji-popover-search > #search-header > input {\n  -webkit-transition: background-color 300ms ease-in-out;\n  transition: background-color 300ms ease-in-out;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n  padding: 10px 5px;\n  margin: 0 10px;\n  border: none;\n  border-radius: 5px;\n  background-color: #d9d9d9;\n  font-size: 1rem;\n}\n#emoji-container > #emoji-popup #emoji-popover-search > #search-header > input:focus {\n  background-color: #f0f0f0;\n}\n#emoji-container > #emoji-popup #emoji-popover-search > #search-header > span {\n  -webkit-box-flex: 10;\n      -ms-flex-positive: 10;\n          flex-grow: 10;\n  border-radius: 5px;\n  border: none;\n  background-color: transparent;\n}\n/* Popper Emoji */\n#btn-emoji-default {\n  -webkit-box-flex: 100;\n      -ms-flex-positive: 100;\n          flex-grow: 100;\n  border: none;\n  cursor: pointer;\n  height: 45px;\n  width: 45px;\n  margin: 10px;\n  background-color: transparent;\n}\n#btn-emoji-default > div > img.emoji {\n  height: 32px;\n  width: 32px;\n}\n#btn-emoji-default > #dummy-el {\n  height: 32px;\n  width: 32px;\n}\n#btn-emoji-default:disabled {\n  opacity: 0.6;\n  pointer-events: none;\n}\n/* * Cursor */\n.clickable {\n  cursor: pointer;\n}\n/* * Transition - Fade */\n.fade-in {\n  opacity: 1;\n  -webkit-animation-name: fadeInOpacity;\n          animation-name: fadeInOpacity;\n  -webkit-animation-iteration-count: 1;\n          animation-iteration-count: 1;\n  -webkit-animation-timing-function: ease-in;\n          animation-timing-function: ease-in;\n  -webkit-animation-duration: 0.3s;\n          animation-duration: 0.3s;\n}\n@-webkit-keyframes fadeInOpacity {\n0% {\n    opacity: 0.4;\n}\n50% {\n    opacity: 0.8;\n}\n100% {\n    opacity: 1;\n}\n}\n@keyframes fadeInOpacity {\n0% {\n    opacity: 0.4;\n}\n50% {\n    opacity: 0.8;\n}\n100% {\n    opacity: 1;\n}\n}\n",map:{version:3,sources:["/home/michael/Documents/vue-twemoji-picker/src/components/TwemojiPicker/TwemojiPicker.vue","TwemojiPicker.vue"],names:[],mappings:"AA8IA;EACA,UAAA;AC7IA;ADgJA;EACA,YAAA;EACA,WAAA;EACA,uBAAA;AC9IA;ADiJA;EACA,aAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;AC/IA;ADiJA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;AC/IA;ADiJA;EACA,gCAAA;EACA,UAAA;AC/IA;ADkJA;EACA,gCAAA;EACA,UAAA;AChJA;ADqJA;EACA,gBAAA;EACA,kBAAA;ACnJA;ADqJA;EACA,aAAA;ACnJA;ADsJA;EACA,aAAA;EACA,WAAA;EACA,mBAAA;ACpJA;ADsJA;EACA,eAAA;EACA,eAAA;EACA,mBAAA;ACpJA;ADsJA;EACA,yBAAA;ACpJA;ADuJA;EACA,WAAA;ACrJA;AD2JA;EACA,yBAAA;EACA,kBAAA;EACA,aAAA;ACzJA;AD2JA;EACA,kBAAA;EACA,oBAAA;EAAA,oBAAA;EAAA,aAAA;ACzJA;AD2JA;EACA,sDAAA;EAAA,8CAAA;EACA,mBAAA;MAAA,oBAAA;UAAA,YAAA;EACA,iBAAA;EACA,cAAA;EACA,YAAA;EACA,kBAAA;EACA,yBAAA;EACA,eAAA;ACzJA;AD2JA;EACA,yBAAA;ACzJA;AD6JA;EACA,oBAAA;MAAA,qBAAA;UAAA,aAAA;EACA,kBAAA;EACA,YAAA;EACA,6BAAA;AC3JA;ADkKA,iBAAA;AACA;EACA,qBAAA;MAAA,sBAAA;UAAA,cAAA;EACA,YAAA;EACA,eAAA;EACA,YAAA;EACA,WAAA;EACA,YAAA;EACA,6BAAA;AChKA;ADkKA;EACA,YAAA;EACA,WAAA;AChKA;ADmKA;EACA,YAAA;EACA,WAAA;ACjKA;ADoKA;EACA,YAAA;EACA,oBAAA;AClKA;ADsKA,aAAA;AACA;EACA,eAAA;ACpKA;ADuKA,wBAAA;AACA;EACA,UAAA;EACA,qCAAA;UAAA,6BAAA;EACA,oCAAA;UAAA,4BAAA;EACA,0CAAA;UAAA,kCAAA;EACA,gCAAA;UAAA,wBAAA;ACrKA;ADwKA;AACA;IACA,YAAA;AC3JE;AD8JF;IACA,YAAA;AC5JE;AD+JF;IACA,UAAA;AC7JE;AACF;ADkJA;AACA;IACA,YAAA;ACrIE;ADwIF;IACA,YAAA;ACtIE;ADyIF;IACA,UAAA;ACvIE;AACF",file:"TwemojiPicker.vue",sourcesContent:['<template>\n  <div>\n    <popup-emoji\n      v-if="emojiData && emojiData.length > 0"\n      :disabled="emojiPickerDisabled"\n      :offset="pickerArrowEnabled ? [0, 35] : [0, 30]"\n      :triggerType="triggerType"\n      :placement="pickerPlacement"\n      :autoflip="pickerAutoflip"\n      :arrowEnabled="pickerArrowEnabled"\n      :closeOnClickaway="pickerCloseOnClickaway"\n      @popperOpenChanged="popperOpenChanged"\n      ref="popupEmoji"\n    >\n      <template v-slot:container>\n        <div id="emoji-container">\n          <div\n            id="emoji-popup"\n            :style="{ width: calculatedPickerWidth + \'px\' }"\n          >\n            <div id="emoji-popover-header" class="scroll-min">\n              <span\n                v-if="recentEmojisFeat && recentEmojis.length !== 0"\n                v-html="getEmojiImgFromUnicode(\'⏱️\')"\n                class="emoji-tab"\n                @click="changeEmojiListActive(-1)"\n                :class="{ active: emojiGroupActive === -1 }"\n              ></span>\n              <span\n                v-for="(emojiGroup, index) in emojiPack"\n                :key="emojiGroup.group"\n                :id="emojiGroup.group"\n                v-html="getEmojiGroupDescription(emojiGroup.group)"\n                class="emoji-tab"\n                @click="changeEmojiListActive(index)"\n                :class="{ active: emojiGroupActive === index }"\n              ></span>\n            </div>\n\n            <div\n              id="emoji-popover-search"\n              v-if="searchEmojisFeat"\n              v-show="!hideSearch"\n            >\n              <div id="search-header">\n                <input\n                  @input="searchEmojiByTerm"\n                  :placeholder="searchEmojiPlaceholder"\n                  v-model="searchTerm"\n                />\n              </div>\n            </div>\n\n            <div\n              class="emoji-popover-inner"\n              :style="{\n                width: calculatedPickerWidth + \'px\',\n                height: hideSearch\n                  ? pickerHeight + 45 + \'px\'\n                  : pickerHeight + \'px\'\n              }"\n              @scroll.passive="onScrollEmojiList"\n            >\n              <div v-if="isSearchingEmoji">\n                <strong\n                  :style="{\n                    padding: \'3px\'\n                  }"\n                  id="loading-label"\n                  >{{ isLoadingLabel }}</strong\n                >\n              </div>\n\n              <div\n                v-if="\n                  searchTerm.length !== 0 &&\n                    searchEmojis.length === 0 &&\n                    isSearchingEmoji === false\n                "\n              >\n                <strong\n                  :style="{\n                    padding: \'3px\'\n                  }"\n                  >{{ searchEmojiNotFound }}</strong\n                >\n              </div>\n\n              <div\n                v-if="\n                  emojiListActive.length !== 0 && isSearchingEmoji === false\n                "\n              >\n                <p class="emoji-list">\n                  <span\n                    v-for="emoji in emojiListActive"\n                    :key="emoji.unicode"\n                    v-html="emoji.img"\n                    @click="clickEmoji(emoji)"\n                    @mousedown="startClickingSkinInterval(emoji)"\n                    @mouseleave="stopClickingSkinInterval"\n                    @mouseup="stopClickingSkinInterval"\n                    @touchstart="startClickingSkinInterval(emoji)"\n                    @touchend="stopClickingSkinInterval"\n                    @touchcancel="stopClickingSkinInterval"\n                    :id="`twemoji-picker-click-emoji-${emoji.unicode}`"\n                  ></span>\n                </p>\n              </div>\n            </div>\n\n            <popup-skins\n              :emojiList="skinsListActive"\n              :closeOnClickaway="popupSkinsClickaway"\n              :clickEmoji="clickEmoji"\n              ref="popupSkins"\n            />\n          </div>\n        </div>\n      </template>\n      <template v-slot:button>\n        <slot name="twemoji-picker-button">\n          <button\n            @mouseenter="onMouseEnterEmojiBtn()"\n            @mouseleave="onMouseLeaveEmojiBtn()"\n            :disabled="emojiPickerDisabled"\n            id="btn-emoji-default"\n          >\n            <div\n              v-show="showEmoji"\n              v-html="randomEmojiImg"\n              class="fade-in"\n            ></div>\n            <div v-show="!showEmoji" id="dummy-el"></div>\n          </button>\n        </slot>\n      </template>\n    </popup-emoji>\n    <span id="dummy-clickable-skin" />\n  </div>\n</template>\n<style lang="stylus">\n#emoji-container {\n  z-index: 1;\n\n  > #emoji-popup {\n    img.emoji {\n      height: 32px;\n      width: 32px;\n      vertical-align: -0.5rem;\n    }\n\n    > #emoji-popover-header {\n      padding: 15px;\n      overflow-y: hidden;\n      overflow-x: auto;\n      white-space: nowrap;\n\n      > .emoji-tab {\n        margin: 3px;\n        padding: 5px;\n        padding: 8px 5px;\n        cursor: pointer;\n        border-radius: 2px;\n        opacity: 0.5;\n\n        &:hover {\n          border-bottom: 5px solid #b3b3b3;\n          opacity: 1;\n        }\n\n        &.active {\n          border-bottom: 5px solid #b3b3b3;\n          opacity: 1;\n        }\n      }\n    }\n\n    .emoji-popover-inner {\n      overflow-y: auto;\n      overflow-x: hidden;\n\n      #loading-label {\n        margin: 0 5px;\n      }\n\n      > div > .emoji-list {\n        padding: 10px;\n        margin: 0px;\n        text-align: justify;\n\n        > span {\n          font-size: 15px;\n          cursor: pointer;\n          border-radius: 15px;\n\n          &:hover {\n            background-color: #cacaca;\n          }\n\n          > img {\n            margin: 5px;\n          }\n        }\n      }\n    }\n\n    #emoji-popover-search {\n      background-color: #ebebeb;\n      border-radius: 3px;\n      margin: 5px 0;\n\n      > #search-header {\n        padding-top: 5px 0;\n        display: flex;\n\n        > input {\n          transition: background-color 300ms ease-in-out;\n          flex-grow: 1;\n          padding: 10px 5px;\n          margin: 0 10px;\n          border: none;\n          border-radius: 5px;\n          background-color: #d9d9d9;\n          font-size: 1rem;\n\n          &:focus {\n            background-color: #f0f0f0;\n          }\n        }\n\n        > span {\n          flex-grow: 10;\n          border-radius: 5px;\n          border: none;\n          background-color: transparent;\n        }\n      }\n    }\n  }\n}\n\n/* Popper Emoji */\n#btn-emoji-default {\n  flex-grow: 100;\n  border: none;\n  cursor: pointer;\n  height: 45px;\n  width: 45px;\n  margin: 10px;\n  background-color: transparent;\n\n  > div > img.emoji {\n    height: 32px;\n    width: 32px;\n  }\n\n  > #dummy-el {\n    height: 32px;\n    width: 32px;\n  }\n\n  &:disabled {\n    opacity: 0.6;\n    pointer-events: none;\n  }\n}\n\n/* * Cursor */\n.clickable {\n  cursor: pointer;\n}\n\n/* * Transition - Fade */\n.fade-in {\n  opacity: 1;\n  animation-name: fadeInOpacity;\n  animation-iteration-count: 1;\n  animation-timing-function: ease-in;\n  animation-duration: 0.3s;\n}\n\n@keyframes fadeInOpacity {\n  0% {\n    opacity: 0.4;\n  }\n\n  50% {\n    opacity: 0.8;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n</style>\n<script lang="ts">\nimport Vue from \'vue\';\nimport EmojiService from \'../../services/EmojiService\';\nimport PopupEmoji from \'../PopupEmoji.vue\';\nimport PopupSkins from \'../PopupSkins.vue\';\nimport EmojiPack from \'../../interfaces/EmojiPack\';\nimport Emoji from \'../../interfaces/Emoji\';\nimport TwemojiOptions from \'../../interfaces/TwemojiOptions\';\nimport EmojiGroup from \'../../interfaces/EmojiGroup\';\n\nimport Props from \'./props\';\nimport EmojiSkin from \'../../interfaces/EmojiSkin\';\n\nexport default Vue.extend({\n  name: \'TwemojiPicker\',\n\n  components: {\n    \'popup-emoji\': PopupEmoji,\n    \'popup-skins\': PopupSkins\n  },\n\n  props: {\n    ...Props\n  },\n\n  data() {\n    return {\n      isPickerOpen: false as boolean,\n      clickingSkinInterval: false as any,\n      isClickingEmojiMouseDown: false as boolean,\n      popupSkinsClickaway: true as boolean,\n\n      showEmoji: false as boolean,\n      showSkinsSelector: false as boolean,\n      skinsListActive: [] as Array<EmojiSkin>,\n\n      emojiPack: [] as Array<EmojiPack>,\n      emojiListActive: [] as Array<Emoji>,\n      emojiGroupActive: 0 as number,\n\n      randomEmoji: null as string | null,\n\n      isPointerOnEmojiBtn: false as boolean,\n      twemojiOptions: {} as TwemojiOptions,\n\n      recentEmojis: [] as Array<Emoji>,\n\n      searchTerm: \'\' as string,\n      searchEmojis: [] as Array<Emoji>,\n      searchTimeout: null as any,\n      isSearchingEmoji: false as boolean,\n      calculatedPickerWidth: null as number | null,\n      hideSearch: false as boolean\n    };\n  },\n\n  mounted() {\n    this.setPickerWidth();\n    this.$nextTick(() => {\n      window.addEventListener(\'resize\', this.setPickerWidth);\n    });\n  },\n\n  computed: {\n    randomEmojiImg(): string {\n      this.triggerShowEmoji();\n      return EmojiService.getEmojiImgFromUnicode(\n        this.randomEmoji,\n        this.twemojiOptions\n      );\n    }\n  },\n\n  created(): void {\n    this.twemojiOptions = {\n      base: this.twemojiPath,\n      ext: this.twemojiExtension,\n      size: this.twemojiFolder\n    };\n    if (this.recentEmojisFeat) {\n      this.setRecentEmojis();\n    }\n    this.buildEmojiPack();\n    this.emojiListActive = this.emojiPack[0].emojiList;\n    this.setRandomEmoji();\n  },\n\n  methods: {\n    triggerShowEmoji(): void {\n      this.showEmoji = false;\n      setTimeout(() => (this.showEmoji = true));\n    },\n    buildEmojiPack(): void {\n      this.emojiPack = EmojiService.getEmojiImgArrayFromEmojiPack(\n        this.emojiData,\n        this.twemojiOptions\n      );\n    },\n    onMouseEnterEmojiBtn(): void {\n      if (this.isPointerOnEmojiBtn === false) {\n        this.isPointerOnEmojiBtn = true;\n        this.setRandomEmoji();\n      }\n    },\n    onMouseLeaveEmojiBtn(): void {\n      if (this.isPointerOnEmojiBtn === true) {\n        this.isPointerOnEmojiBtn = false;\n      }\n    },\n    setRandomEmoji(): void {\n      this.randomEmoji = this.randomEmojiArray[\n        Math.floor(Math.random() * this.randomEmojiArray.length)\n      ];\n    },\n\n    clickEmoji(emoji: Emoji): void {\n      this.$refs.popupSkins.setCloseOnClickaway(false);\n      let emojiUnicode: string;\n      // eslint-disable-next-line\n      const vueContext = this;\n      setTimeout(() => {\n        vueContext.$refs.popupSkins.setCloseOnClickaway(true);\n      }, 1);\n\n      if (\n        (this.isClickingEmojiMouseDown || this.$refs.popupSkins.popperOpen) &&\n        emoji.skins?.length > 0 &&\n        this.skinsSelection\n      ) {\n        return;\n      } else {\n        this.$refs.popupSkins.closePopper();\n        emojiUnicode = emoji.unicode;\n      }\n\n      if (this.recentEmojisFeat) {\n        this.addEmojiToRecentEmojis(emojiUnicode);\n      }\n\n      this.$emit(\'addTextBlur\', emojiUnicode);\n      this.$emit(\'emojiUnicodeAdded\', emojiUnicode);\n      this.$emit(\n        \'emojiImgAdded\',\n        EmojiService.getEmojiImgFromUnicode(emojiUnicode, this.twemojiOptions)\n      );\n    },\n\n    startClickingSkinInterval(emoji: Emoji): void {\n      this.$refs.popupSkins.closePopper();\n      this.isClickingEmojiMouseDown = false;\n      if (emoji.skins?.length > 0 && this.skinsSelection) {\n        if (!this.clickingSkinInterval) {\n          this.clickingSkinInterval = setInterval(() => {\n            this.skinsListActive = Array.from(emoji.skins);\n            this.skinsListActive.unshift({\n              unicode: emoji.unicode,\n              img: emoji.img\n            });\n            this.$refs.popupSkins.instantiatePopper(\n              `twemoji-picker-click-emoji-${emoji.unicode}`\n            );\n          }, 500);\n        }\n      }\n    },\n\n    stopClickingSkinInterval(): void {\n      this.isClickingEmojiMouseDown = false;\n      clearInterval(this.clickingSkinInterval);\n      this.clickingSkinInterval = false;\n    },\n\n    getEmojiGroupDescription(emojiGroup: number): string {\n      const emojiGroupFound = this.emojiGroups.find(\n        (x: EmojiGroup) => x.group === emojiGroup\n      );\n      if (emojiGroupFound) {\n        return EmojiService.getEmojiImgFromUnicode(\n          emojiGroupFound.description,\n          this.twemojiOptions\n        );\n      }\n      return \'Group \' + emojiGroup;\n    },\n\n    changeEmojiListActive(index: number): void {\n      this.showSkinsSelector = false;\n      this.searchTerm = \'\';\n      this.emojiGroupActive = index;\n      if (index >= 0) {\n        this.emojiListActive = this.emojiPack[index].emojiList;\n      } else if (index === -1) {\n        this.emojiListActive = this.recentEmojis;\n      }\n    },\n\n    getEmojiImgFromUnicode(unicode: string): string {\n      return EmojiService.getEmojiImgFromUnicode(unicode, this.twemojiOptions);\n    },\n\n    setRecentEmojis(): void {\n      let recentEmojis = null;\n      if (this.recentEmojisStorage === \'local\') {\n        recentEmojis = JSON.parse(\n          localStorage.getItem(this.recentEmojiStorageName) || \'[]\'\n        );\n      } else if (this.recentEmojisStorage === \'session\') {\n        recentEmojis = JSON.parse(\n          sessionStorage.getItem(this.recentEmojiStorageName) || \'[]\'\n        );\n      } else {\n        recentEmojis = [];\n      }\n\n      if (recentEmojis !== undefined && recentEmojis !== null) {\n        this.recentEmojis = recentEmojis;\n      }\n    },\n    addEmojiToRecentEmojis(emojiUnicode: string): void {\n      const indexToRemove = this.recentEmojis.findIndex(\n        (x: Emoji) => x.unicode === emojiUnicode\n      );\n      if (indexToRemove !== -1) {\n        this.recentEmojis.splice(indexToRemove, 1);\n        this.recentEmojis.unshift({\n          unicode: emojiUnicode,\n          img: EmojiService.getEmojiImgFromUnicode(\n            emojiUnicode,\n            this.twemojiOptions\n          ),\n          skins: [],\n          tags: []\n        });\n      } else {\n        this.recentEmojis.unshift({\n          unicode: emojiUnicode,\n          img: EmojiService.getEmojiImgFromUnicode(\n            emojiUnicode,\n            this.twemojiOptions\n          ),\n          skins: [],\n          tags: []\n        });\n      }\n\n      if (this.recentEmojis.length > this.recentEmojiLimit) {\n        this.recentEmojis.splice(-1, 1);\n      }\n\n      if (this.recentEmojisStorage === \'local\') {\n        localStorage.setItem(\n          this.recentEmojiStorageName,\n          JSON.stringify(this.recentEmojis)\n        );\n      } else if (this.recentEmojisStorage === \'session\') {\n        sessionStorage.setItem(\n          this.recentEmojiStorageName,\n          JSON.stringify(this.recentEmojis)\n        );\n      }\n    },\n\n    searchEmojiByTerm() {\n      this.isSearchingEmoji = true;\n      clearTimeout(this.searchTimeout);\n      if (this.searchTerm.length > 0) {\n        this.searchTimeout = setTimeout(() => {\n          this.searchEmojis = EmojiService.getEmojiImgArrayFromEmojiPackByTerm(\n            this.emojiData,\n            this.twemojiOptions,\n            this.searchTerm\n          );\n          this.emojiGroupActive = -2;\n          this.emojiListActive = this.searchEmojis;\n          this.showSkinsSelector = false;\n          this.isSearchingEmoji = false;\n        }, 300);\n      } else {\n        this.changeEmojiListActive(0);\n        this.isSearchingEmoji = false;\n      }\n    },\n    popperOpenChanged(popperOpen: boolean) {\n      this.isPickerOpen = popperOpen;\n    },\n    setPickerWidth() {\n      if (\n        typeof this.pickerWidth === \'string\' &&\n        this.pickerWidth.startsWith(\'#\')\n      ) {\n        const domId = this.pickerWidth.slice(1);\n        const domEl = document.getElementById(domId);\n        if (domEl) this.calculatedPickerWidth = domEl.offsetWidth;\n      } else if (typeof this.pickerWidth === \'number\') {\n        this.calculatedPickerWidth = this.pickerWidth;\n      }\n    },\n    onScrollEmojiList(event: UIEvent) {\n      this.$refs.popupSkins.closePopper();\n      if (this.searchEmojisFeat) {\n        if ((event as any).target.scrollTop > 50) {\n          this.hideSearch = true;\n        } else {\n          this.hideSearch = false;\n        }\n      }\n    }\n  }\n});\n<\/script>\n',"#emoji-container {\n  z-index: 1;\n}\n#emoji-container > #emoji-popup img.emoji {\n  height: 32px;\n  width: 32px;\n  vertical-align: -0.5rem;\n}\n#emoji-container > #emoji-popup > #emoji-popover-header {\n  padding: 15px;\n  overflow-y: hidden;\n  overflow-x: auto;\n  white-space: nowrap;\n}\n#emoji-container > #emoji-popup > #emoji-popover-header > .emoji-tab {\n  margin: 3px;\n  padding: 5px;\n  padding: 8px 5px;\n  cursor: pointer;\n  border-radius: 2px;\n  opacity: 0.5;\n}\n#emoji-container > #emoji-popup > #emoji-popover-header > .emoji-tab:hover {\n  border-bottom: 5px solid #b3b3b3;\n  opacity: 1;\n}\n#emoji-container > #emoji-popup > #emoji-popover-header > .emoji-tab.active {\n  border-bottom: 5px solid #b3b3b3;\n  opacity: 1;\n}\n#emoji-container > #emoji-popup .emoji-popover-inner {\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n#emoji-container > #emoji-popup .emoji-popover-inner #loading-label {\n  margin: 0 5px;\n}\n#emoji-container > #emoji-popup .emoji-popover-inner > div > .emoji-list {\n  padding: 10px;\n  margin: 0px;\n  text-align: justify;\n}\n#emoji-container > #emoji-popup .emoji-popover-inner > div > .emoji-list > span {\n  font-size: 15px;\n  cursor: pointer;\n  border-radius: 15px;\n}\n#emoji-container > #emoji-popup .emoji-popover-inner > div > .emoji-list > span:hover {\n  background-color: #cacaca;\n}\n#emoji-container > #emoji-popup .emoji-popover-inner > div > .emoji-list > span > img {\n  margin: 5px;\n}\n#emoji-container > #emoji-popup #emoji-popover-search {\n  background-color: #ebebeb;\n  border-radius: 3px;\n  margin: 5px 0;\n}\n#emoji-container > #emoji-popup #emoji-popover-search > #search-header {\n  padding-top: 5px 0;\n  display: flex;\n}\n#emoji-container > #emoji-popup #emoji-popover-search > #search-header > input {\n  transition: background-color 300ms ease-in-out;\n  flex-grow: 1;\n  padding: 10px 5px;\n  margin: 0 10px;\n  border: none;\n  border-radius: 5px;\n  background-color: #d9d9d9;\n  font-size: 1rem;\n}\n#emoji-container > #emoji-popup #emoji-popover-search > #search-header > input:focus {\n  background-color: #f0f0f0;\n}\n#emoji-container > #emoji-popup #emoji-popover-search > #search-header > span {\n  flex-grow: 10;\n  border-radius: 5px;\n  border: none;\n  background-color: transparent;\n}\n/* Popper Emoji */\n#btn-emoji-default {\n  flex-grow: 100;\n  border: none;\n  cursor: pointer;\n  height: 45px;\n  width: 45px;\n  margin: 10px;\n  background-color: transparent;\n}\n#btn-emoji-default > div > img.emoji {\n  height: 32px;\n  width: 32px;\n}\n#btn-emoji-default > #dummy-el {\n  height: 32px;\n  width: 32px;\n}\n#btn-emoji-default:disabled {\n  opacity: 0.6;\n  pointer-events: none;\n}\n/* * Cursor */\n.clickable {\n  cursor: pointer;\n}\n/* * Transition - Fade */\n.fade-in {\n  opacity: 1;\n  animation-name: fadeInOpacity;\n  animation-iteration-count: 1;\n  animation-timing-function: ease-in;\n  animation-duration: 0.3s;\n}\n@-moz-keyframes fadeInOpacity {\n  0% {\n    opacity: 0.4;\n  }\n  50% {\n    opacity: 0.8;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@-webkit-keyframes fadeInOpacity {\n  0% {\n    opacity: 0.4;\n  }\n  50% {\n    opacity: 0.8;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@-o-keyframes fadeInOpacity {\n  0% {\n    opacity: 0.4;\n  }\n  50% {\n    opacity: 0.8;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes fadeInOpacity {\n  0% {\n    opacity: 0.4;\n  }\n  50% {\n    opacity: 0.8;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n"]},media:void 0})}),Ee,void 0,!1,void 0,!1,le,void 0,void 0);var Ce={replaceEmojiWithAltAttribute:e=>e.replace(/<img class="emoji".*?alt="(.*?)"[^>]+>/g,"$1"),unescapeHtml:e=>e.replace(/&amp;/g,"&").replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&quot;/g,'"').replace(/&#039;/g,"'"),escapeHTML(e){var n;const t=document.createElement("div"),i=t.appendChild(document.createTextNode(e)),o=i.parentNode,r=o.innerHTML;return o.removeChild(i),null===(n=t.parentNode)||void 0===n||n.removeChild(t),r}};const Te=n.extend({name:"SendIconImg"});var Se=function(){var e=this.$createElement;return(this._self._c||e)("img",{attrs:{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAflBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACCtoPsAAAAKXRSTlMADQ/78CgT7NLzy8WypJaBcV9XUCAXPTva1p2QiGEz4M26qnlmRDYkCH5CaGIAAAEHSURBVFjD7ZdbDoIwEEW1LVhAK1pBFFB82/1v0A9jJjEhVm9N5oOzgJM+bqczo4EBfow3NpDIOZeLQCIn0ziA6EnVwqIXah6DImIWgSIiWaMiUhlUREx3oIjQFhUR+TiEiFKKiIhqgYsopbCIUgqKCOWTUuF8UAYXUUpBEdFZVETkAhMRMiv6TEV0XdSZ9HdtPqR0dTk3x3Tio5p4pXS1bA56r/CUktDoRMr+ZZWjL7iLImq3uiel9Q/l71YuT9vs/QTltAwuwreGH/b6L9ePBxJ/IvijZVRGOsuo1CoT6Dti9EGqecyniZCpYNRoacuoGU0Mp4Z9FjEaaqqW0+CXC07D8cAAEx5sROBoZAawIAAAAABJRU5ErkJggg=="}})};Se._withStripped=!0;const Oe=pe({render:Se,staticRenderFns:[]},void 0,Te,void 0,!1,void 0,!1,void 0,void 0,void 0);var Pe="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},Ie="object"==typeof Pe&&Pe&&Pe.Object===Object&&Pe,Be="object"==typeof self&&self&&self.Object===Object&&self,De=Ie||Be||Function("return this")();function Le(e,n,t){switch(t.length){case 0:return e.call(n);case 1:return e.call(n,t[0]);case 2:return e.call(n,t[0],t[1]);case 3:return e.call(n,t[0],t[1],t[2])}return e.apply(n,t)}function Ue(e,n){for(var t=-1,i=n.length,o=e.length;++t<i;)e[o+t]=n[t];return e}var Me=Object.prototype,Fe=Me.hasOwnProperty,$e=Me.toString,Re=De.Symbol,_e=Me.propertyIsEnumerable,We=Re?Re.isConcatSpreadable:void 0,Ne=Math.max;function He(e){return Je(e)||function(e){return function(e){return Ge(e)&&function(e){return null!=e&&function(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=9007199254740991}(e.length)&&!function(e){var n=function(e){var n=typeof e;return!!e&&("object"==n||"function"==n)}(e)?$e.call(e):"";return"[object Function]"==n||"[object GeneratorFunction]"==n}(e)}(e)}(e)&&Fe.call(e,"callee")&&(!_e.call(e,"callee")||"[object Arguments]"==$e.call(e))}(e)||!!(We&&e&&e[We])}function ze(e){if("string"==typeof e||function(e){return"symbol"==typeof e||Ge(e)&&"[object Symbol]"==$e.call(e)}(e))return e;var n=e+"";return"0"==n&&1/e==-1/0?"-0":n}var Je=Array.isArray;function Ge(e){return!!e&&"object"==typeof e}var Ke=function(e,n){return n=Ne(void 0===n?e.length-1:n,0),function(){for(var t=arguments,i=-1,o=Ne(t.length-n,0),r=Array(o);++i<o;)r[i]=t[n+i];i=-1;for(var d=Array(n+1);++i<n;)d[i]=t[i];return d[n]=r,Le(e,this,d)}}((function(e,n){return null==e?{}:function(e,n){return function(e,n,t){var i=-1,o=n.length,r={};for(;++i<o;){var d=n[i],a=e[d];t(a,d)&&(r[d]=a)}return r}(e=Object(e),n,(function(n,t){return t in e}))}(e,function(e,n){for(var t=-1,i=e?e.length:0,o=Array(i);++t<i;)o[t]=n(e[t],t,e);return o}(function e(n,t,i,o,r){var d=-1,a=n.length;for(i||(i=He),r||(r=[]);++d<a;){var s=n[d];t>0&&i(s)?t>1?e(s,t-1,i,o,r):Ue(r,s):o||(r[r.length]=s)}return r}(n,1),ze))}));const Ve={methods:{propsFor(e,n=this.$props){const t=this.$options.components[e];if(t){const e=t.cid&&"function"==typeof t?t.options.props:t.props,i=Object.keys(e);return Ke(n,i)}return{}}}};const qe=n.extend({name:"TwemojiTextarea",components:{"twemoji-picker":ye,"send-icon-img":Oe},mixins:[Ve],props:{...we,idTextarea:{default:"twemoji-textarea-outer",type:String},content:{default:"",type:String},enableSendBtn:{default:!1,type:Boolean},emojiPickerDisabled:{default:!1,type:Boolean},textareaDisabled:{default:!1,type:Boolean},componentColor:{type:String,default:"#EBEBEB",validator:function(e){const n=(new Option).style;return n.color=e,!1===(""!==n.color)&&console.error('The value entered for the prop "componentColor" is invalid. Please inform a valid CSS color.'),!0}},placeholder:{type:String,default:""},maxlength:{type:Number,default:null}},data:()=>({savedRange:null,twemojiOptions:{},actualContentLength:0}),computed:{twemojiTextarea(){return this.$refs.twemojiTextarea},twemojiPicker(){return this.$refs.twemojiPicker}},created(){this.twemojiOptions={base:this.twemojiPath,ext:this.twemojiExtension,size:this.twemojiFolder}},mounted(){0===this.content.length&&(this.twemojiTextarea.innerHTML=this.content)},methods:{updateContent(e){let n=e.target.innerHTML;n=Ce.replaceEmojiWithAltAttribute(n),n=Ce.unescapeHtml(n),0!==n.length&&"\n"===n[n.length-1]&&(n=n.slice(0,-1)),this.actualContentLength=[...n].length,this.twemojiPicker.$refs.popupEmoji.popperInstance.forceUpdate(),this.$emit("update:content",n),this.$emit("actualContentLengthChanged",this.actualContentLength),this.$emit("contentChanged")},emitIsContentOverflowed(){this.actualContentLength>this.maxlength?this.$emit("isContentOverflowed",!0):this.$emit("isContentOverflowed",!1)},emitEnterKeyEvent(e){this.emitIsContentOverflowed(),this.$emit("enterKey",e)},enterKey(e){!1===e.shiftKey&&(e.preventDefault(),this.emitIsContentOverflowed(),this.emitEnterKeyEvent(e))},shiftEnterKey(e){e.stopPropagation(),e.preventDefault(),""===this.twemojiTextarea.innerHTML||"\n"!==this.twemojiTextarea.innerHTML[this.twemojiTextarea.innerHTML.length-1]?(this.addText("\n"),this.addText("\n")):this.addText("\n"),this.twemojiTextarea.scrollTop=this.twemojiTextarea.scrollHeight,this.twemojiPicker.$refs.popupEmoji.popperInstance.forceUpdate()},onPaste(e){let n;e.stopPropagation(),e.preventDefault();const t=e.clipboardData;n=(null==t?void 0:t.getData("Text"))||"",n=Ce.escapeHTML(n),n=i.getEmojiImgFromUnicode(n,this.twemojiOptions),window.document.execCommand("insertHTML",!1,n),this.twemojiTextarea.scrollTop=this.twemojiTextarea.scrollHeight},focus(){const e=this.twemojiTextarea,n=e.childNodes[0];if(e.focus(),void 0===n){const n=document.createTextNode("");e.appendChild(n);const t=document.createRange(),i=window.getSelection();t.setStart(e.childNodes[0],0),t.collapse(!0),null==i||i.removeAllRanges(),null==i||i.addRange(t),this.saveSelection()}},blur(){this.twemojiTextarea.blur()},saveSelection(){var e;window.getSelection&&(this.savedRange=null===(e=window.getSelection())||void 0===e?void 0:e.getRangeAt(0))},restoreSelection(){if(this.twemojiTextarea.focus(),null!=this.savedRange&&window.getSelection){const e=window.getSelection();(null==e?void 0:e.rangeCount)&&(null==e||e.removeAllRanges()),null==e||e.addRange(this.savedRange)}},addTextBlur(e){this.focus(),e=Ce.escapeHTML(e),e=i.getEmojiImgFromUnicode(e,this.twemojiOptions),window.document.execCommand("insertHTML",!1,e),this.saveSelection(),this.blur()},addText(e){this.focus(),e=Ce.escapeHTML(e),e=i.getEmojiImgFromUnicode(e,this.twemojiOptions),window.document.execCommand("insertHTML",!1,e),this.saveSelection()},cleanText(){this.twemojiTextarea.innerHTML="",this.$emit("update:content","")},emojiUnicodeAdded(e){this.$emit("emojiUnicodeAdded",e)},emojiImgAdded(e){this.$emit("emojiImgAdded",e)}}});var Ye=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"twemoji-textarea-outer",style:{paddingBottom:e.maxlength?"15px":"0px",backgroundColor:e.componentColor},attrs:{id:e.idTextarea}},[t("twemoji-picker",e._b({ref:"twemojiPicker",on:{addTextBlur:e.addTextBlur,emojiUnicodeAdded:e.emojiUnicodeAdded,emojiImgAdded:e.emojiImgAdded}},"twemoji-picker",e.propsFor("twemoji-picker"),!1)),e._v(" "),t("div",{ref:"twemojiTextarea",staticClass:"twemojiTextarea",attrs:{id:"twemoji-textarea",contenteditable:!e.textareaDisabled,placeholder:e.placeholder},on:{input:e.updateContent,paste:e.onPaste,keydown:[function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"enter",13,n.key,"Enter")||n.ctrlKey||n.shiftKey||n.altKey||n.metaKey?null:e.enterKey(n)},function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"enter",13,n.key,"Enter")?null:n.shiftKey?e.shiftEnterKey(n):null}],mouseup:e.saveSelection,keyup:e.saveSelection,focus:e.restoreSelection}}),e._v(" "),e._t("extra"),e._v(" "),e.enableSendBtn?t("div",{attrs:{id:"send-btn"},on:{click:e.emitEnterKeyEvent}},[t("send-icon-img")],1):e._e(),e._v(" "),e.maxlength?t("div",{attrs:{id:"length-indicator"}},[t("span",{style:{color:e.actualContentLength>e.maxlength?"red":"black"}},[e._v(e._s(e.actualContentLength))]),e._v("\n    /\n    "),t("span",[e._v(e._s(e.maxlength))])]):e._e()],2)};Ye._withStripped=!0;const Xe=ye,Ze=pe({render:Ye,staticRenderFns:[]},(function(e){e&&e("data-v-17ba8334_0",{source:".twemoji-textarea-outer {\n  position: relative;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-flow: row wrap;\n          flex-flow: row wrap;\n  border-radius: 1px;\n}\n.twemoji-textarea-outer > #twemoji-textarea {\n  -webkit-box-flex: 95;\n      -ms-flex-positive: 95;\n          flex-grow: 95;\n  -ms-flex-preferred-size: 0;\n      flex-basis: 0;\n  background-color: #fafafa;\n  font-size: 14px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  white-space: pre-wrap;\n  padding: 10px;\n  margin: 10px;\n  border-radius: 10px;\n  text-align: left;\n}\n.twemoji-textarea-outer > #twemoji-textarea[placeholder]:empty:before {\n  content: attr(placeholder);\n  position: absolute;\n  color: #808080;\n  background-color: transparent;\n}\n.twemoji-textarea-outer > #twemoji-textarea > img.emoji {\n  height: 1.5rem;\n  width: 1.5rem;\n  vertical-align: -0.5rem;\n}\n.twemoji-textarea-outer > #length-indicator {\n  position: absolute;\n  bottom: 2px;\n  right: 20px;\n  font-weight: bold;\n}\n.twemoji-textarea-outer >#send-btn {\n  cursor: pointer;\n  -webkit-box-flex: 5;\n      -ms-flex-positive: 5;\n          flex-grow: 5;\n  -ms-flex-preferred-size: 0;\n      flex-basis: 0;\n  height: 40px;\n  margin-top: auto;\n  margin-bottom: auto;\n  margin-right: 5px;\n  padding: 5px;\n}\n.twemoji-textarea-outer >#send-btn > img {\n  width: 25px;\n  height: 25px;\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n",map:{version:3,sources:["/home/michael/Documents/vue-twemoji-picker/src/components/TwemojiTextarea.vue","TwemojiTextarea.vue"],names:[],mappings:"AAiDA;EACA,kBAAA;EACA,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,8BAAA;EAAA,6BAAA;MAAA,uBAAA;UAAA,mBAAA;EACA,kBAAA;AChDA;ADkDA;EACA,oBAAA;MAAA,qBAAA;UAAA,aAAA;EACA,0BAAA;MAAA,aAAA;EACA,yBAAA;EACA,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,qBAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,gBAAA;AChDA;ADkDA;EACA,0BAAA;EACA,kBAAA;EACA,cAAA;EACA,6BAAA;AChDA;ADmDA;EACA,cAAA;EACA,aAAA;EACA,uBAAA;ACjDA;ADqDA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,iBAAA;ACnDA;ADsDA;EACA,eAAA;EACA,mBAAA;MAAA,oBAAA;UAAA,YAAA;EACA,0BAAA;MAAA,aAAA;EACA,YAAA;EACA,gBAAA;EACA,mBAAA;EACA,iBAAA;EACA,YAAA;ACpDA;ADsDA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,mBAAA;ACpDA",file:"TwemojiTextarea.vue",sourcesContent:["<template>\n  <div\n    class=\"twemoji-textarea-outer\"\n    :id=\"idTextarea\"\n    :style=\"{\n      paddingBottom: maxlength ? '15px' : '0px',\n      backgroundColor: componentColor\n    }\"\n  >\n    <twemoji-picker\n      ref=\"twemojiPicker\"\n      v-bind=\"propsFor('twemoji-picker')\"\n      @addTextBlur=\"addTextBlur\"\n      @emojiUnicodeAdded=\"emojiUnicodeAdded\"\n      @emojiImgAdded=\"emojiImgAdded\"\n    ></twemoji-picker>\n\n    <div\n      ref=\"twemojiTextarea\"\n      id=\"twemoji-textarea\"\n      class=\"twemojiTextarea\"\n      :contenteditable=\"textareaDisabled ? false : true\"\n      @input=\"updateContent\"\n      @paste=\"onPaste\"\n      @keydown.exact.enter=\"enterKey\"\n      @keydown.shift.enter=\"shiftEnterKey\"\n      @mouseup=\"saveSelection\"\n      @keyup=\"saveSelection\"\n      @focus=\"restoreSelection\"\n      :placeholder=\"placeholder\"\n    ></div>\n\n    <slot name=\"extra\"></slot>\n\n    <div id=\"send-btn\" @click=\"emitEnterKeyEvent\" v-if=\"enableSendBtn\">\n      <send-icon-img />\n    </div>\n\n    <div id=\"length-indicator\" v-if=\"maxlength\">\n      <span\n        :style=\"{ color: actualContentLength > maxlength ? 'red' : 'black' }\"\n        >{{ actualContentLength }}</span\n      >\n      /\n      <span>{{ maxlength }}</span>\n    </div>\n  </div>\n</template>\n<style lang=\"stylus\">\n.twemoji-textarea-outer {\n  position: relative;\n  display: flex;\n  flex-flow: row wrap;\n  border-radius: 1px;\n\n  > #twemoji-textarea {\n    flex-grow: 95;\n    flex-basis: 0;\n    background-color: #fafafa;\n    font-size: 14px;\n    overflow-y: auto;\n    overflow-x: hidden;\n    white-space: pre-wrap;\n    padding: 10px;\n    margin: 10px;\n    border-radius: 10px;\n    text-align: left;\n\n    &[placeholder]:empty:before {\n      content: attr(placeholder);\n      position: absolute;\n      color: gray;\n      background-color: transparent;\n    }\n\n    > img.emoji {\n      height: 1.5rem;\n      width: 1.5rem;\n      vertical-align: -0.5rem;\n    }\n  }\n\n  > #length-indicator {\n    position: absolute;\n    bottom: 2px;\n    right: 20px;\n    font-weight: bold;\n  }\n\n  >#send-btn {\n    cursor: pointer;\n    flex-grow: 5;\n    flex-basis: 0;\n    height: 40px;\n    margin-top: auto;\n    margin-bottom: auto;\n    margin-right: 5px;\n    padding: 5px;\n\n    > img {\n      width: 25px;\n      height: 25px;\n      margin-top: 10px;\n      margin-bottom: 10px;\n    }\n  }\n}\n</style>\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport TextareaParser from '../services/TextareaParser';\nimport EmojiService from '../services/EmojiService';\nimport TwemojiPicker from './TwemojiPicker';\nimport SendIconImg from './SendIconImg.vue';\nimport TwemojiOptions from '../interfaces/TwemojiOptions';\n\nimport TwemojiProps from './TwemojiPicker/props';\nimport { propsForMixin } from '../mixins/propsFor';\n\nexport default Vue.extend({\n  name: 'TwemojiTextarea',\n\n  components: {\n    'twemoji-picker': TwemojiPicker,\n    'send-icon-img': SendIconImg\n  },\n  mixins: [propsForMixin],\n\n  props: {\n    ...TwemojiProps,\n\n    // ** Textarea Props **/\n    idTextarea: {\n      default: 'twemoji-textarea-outer',\n      type: String as () => string\n    },\n    content: {\n      default: '',\n      type: String as () => string\n    },\n    enableSendBtn: {\n      default: false,\n      type: Boolean as () => boolean\n    },\n    emojiPickerDisabled: {\n      default: false,\n      type: Boolean as () => boolean\n    },\n    textareaDisabled: {\n      default: false,\n      type: Boolean as () => boolean\n    },\n    componentColor: {\n      type: String as () => string,\n      default: '#EBEBEB',\n      validator: function(value: string) {\n        const s = new Option().style;\n        s.color = value;\n        const bolValid = s.color !== '';\n        if (bolValid === false) {\n          console.error(\n            'The value entered for the prop \"componentColor\" is invalid. ' +\n              'Please inform a valid CSS color.'\n          );\n        }\n        return true;\n      }\n    },\n    placeholder: {\n      type: String as () => string,\n      default: ''\n    },\n    maxlength: {\n      type: Number as () => number,\n      default: null\n    }\n  },\n\n  data() {\n    return {\n      savedRange: null as any,\n      twemojiOptions: {} as TwemojiOptions,\n      actualContentLength: 0 as number\n    };\n  },\n\n  computed: {\n    twemojiTextarea(): HTMLElement {\n      return this.$refs.twemojiTextarea as HTMLElement;\n    },\n    twemojiPicker(): HTMLElement {\n      return this.$refs.twemojiPicker as any;\n    }\n  },\n\n  created(): void {\n    this.twemojiOptions = {\n      base: this.twemojiPath,\n      ext: this.twemojiExtension,\n      size: this.twemojiFolder\n    };\n  },\n\n  mounted(): void {\n    if (this.content.length === 0) {\n      this.twemojiTextarea.innerHTML = this.content;\n    }\n  },\n\n  methods: {\n    updateContent(event: Event): void {\n      const targetedElement = event.target as HTMLElement;\n      let content = targetedElement.innerHTML as any;\n      content = TextareaParser.replaceEmojiWithAltAttribute(content);\n      content = TextareaParser.unescapeHtml(content);\n      if (content.length !== 0 && content[content.length - 1] === '\\n') {\n        content = content.slice(0, -1);\n      }\n      this.actualContentLength = [...content].length;\n      this.twemojiPicker.$refs.popupEmoji.popperInstance.forceUpdate();\n      this.$emit('update:content', content);\n      this.$emit('actualContentLengthChanged', this.actualContentLength);\n      this.$emit('contentChanged');\n    },\n    emitIsContentOverflowed() {\n      if (this.actualContentLength > this.maxlength)\n        this.$emit('isContentOverflowed', true);\n      else this.$emit('isContentOverflowed', false);\n    },\n    emitEnterKeyEvent(event: Event): void {\n      this.emitIsContentOverflowed();\n      this.$emit('enterKey', event);\n    },\n    enterKey(event: KeyboardEvent): void {\n      if (event.shiftKey === false) {\n        event.preventDefault();\n        this.emitIsContentOverflowed();\n        this.emitEnterKeyEvent(event);\n      }\n    },\n    shiftEnterKey(event: KeyboardEvent): void {\n      event.stopPropagation();\n      event.preventDefault();\n\n      if (\n        this.twemojiTextarea.innerHTML === '' ||\n        this.twemojiTextarea.innerHTML[\n          this.twemojiTextarea.innerHTML.length - 1\n        ] !== '\\n'\n      ) {\n        this.addText('\\n');\n        this.addText('\\n');\n      } else {\n        this.addText('\\n');\n      }\n\n      this.twemojiTextarea.scrollTop = this.twemojiTextarea.scrollHeight;\n      this.twemojiPicker.$refs.popupEmoji.popperInstance.forceUpdate();\n    },\n    onPaste(pasteEvent: ClipboardEvent): void {\n      let pastedData;\n\n      pasteEvent.stopPropagation();\n      pasteEvent.preventDefault();\n      const clipboardData = pasteEvent.clipboardData;\n      pastedData = clipboardData?.getData('Text') || '';\n      pastedData = TextareaParser.escapeHTML(pastedData);\n      pastedData = EmojiService.getEmojiImgFromUnicode(\n        pastedData,\n        this.twemojiOptions\n      );\n\n      window.document.execCommand('insertHTML', false, pastedData);\n\n      this.twemojiTextarea.scrollTop = this.twemojiTextarea.scrollHeight;\n    },\n    focus(): void {\n      const doc = this.twemojiTextarea;\n      const childNode = doc.childNodes[0];\n      doc.focus();\n\n      if (childNode === undefined) {\n        const textNode = document.createTextNode('');\n        doc.appendChild(textNode);\n        const range = document.createRange();\n        const sel = window.getSelection();\n        range.setStart(doc.childNodes[0], 0);\n        range.collapse(true);\n        sel?.removeAllRanges();\n        sel?.addRange(range);\n        this.saveSelection();\n      }\n    },\n    blur(): void {\n      const doc = this.twemojiTextarea;\n      doc.blur();\n    },\n    saveSelection(): void {\n      if (window.getSelection) {\n        this.savedRange = window.getSelection()?.getRangeAt(0);\n      }\n    },\n    restoreSelection(): void {\n      const doc = this.twemojiTextarea;\n      doc.focus();\n      if (this.savedRange != null) {\n        if (window.getSelection) {\n          const s = window.getSelection();\n          if (s?.rangeCount || 0 > 0) {\n            s?.removeAllRanges();\n          }\n          s?.addRange(this.savedRange);\n        }\n      }\n    },\n\n    addTextBlur(text: string): void {\n      this.focus();\n\n      text = TextareaParser.escapeHTML(text);\n      text = EmojiService.getEmojiImgFromUnicode(text, this.twemojiOptions);\n\n      window.document.execCommand('insertHTML', false, text);\n      this.saveSelection();\n      this.blur();\n    },\n    addText(text: string): void {\n      this.focus();\n\n      text = TextareaParser.escapeHTML(text);\n      text = EmojiService.getEmojiImgFromUnicode(text, this.twemojiOptions);\n\n      window.document.execCommand('insertHTML', false, text);\n      this.saveSelection();\n    },\n    cleanText(): void {\n      this.twemojiTextarea.innerHTML = '';\n      this.$emit('update:content', '');\n    },\n    emojiUnicodeAdded(unicode: string): void {\n      this.$emit('emojiUnicodeAdded', unicode);\n    },\n    emojiImgAdded(img: string): void {\n      this.$emit('emojiImgAdded', img);\n    }\n  }\n});\n<\/script>\n",".twemoji-textarea-outer {\n  position: relative;\n  display: flex;\n  flex-flow: row wrap;\n  border-radius: 1px;\n}\n.twemoji-textarea-outer > #twemoji-textarea {\n  flex-grow: 95;\n  flex-basis: 0;\n  background-color: #fafafa;\n  font-size: 14px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  white-space: pre-wrap;\n  padding: 10px;\n  margin: 10px;\n  border-radius: 10px;\n  text-align: left;\n}\n.twemoji-textarea-outer > #twemoji-textarea[placeholder]:empty:before {\n  content: attr(placeholder);\n  position: absolute;\n  color: #808080;\n  background-color: transparent;\n}\n.twemoji-textarea-outer > #twemoji-textarea > img.emoji {\n  height: 1.5rem;\n  width: 1.5rem;\n  vertical-align: -0.5rem;\n}\n.twemoji-textarea-outer > #length-indicator {\n  position: absolute;\n  bottom: 2px;\n  right: 20px;\n  font-weight: bold;\n}\n.twemoji-textarea-outer >#send-btn {\n  cursor: pointer;\n  flex-grow: 5;\n  flex-basis: 0;\n  height: 40px;\n  margin-top: auto;\n  margin-bottom: auto;\n  margin-right: 5px;\n  padding: 5px;\n}\n.twemoji-textarea-outer >#send-btn > img {\n  width: 25px;\n  height: 25px;\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n"]},media:void 0})}),qe,void 0,!1,void 0,!1,le,void 0,void 0),Qe=i,en=Ce;return e.EmojiService=Qe,e.TextareaParser=en,e.TwemojiPicker=Xe,e.TwemojiTextarea=Ze,e}({},Vue);