@dialpad/dialtone 9.29.1 → 9.30.1

package/dist/vue2/lib/emoji-picker.cjs

@@ -1,2 +1,1064 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../chunks/tab-7hJQSLFx.js"),b=require("./icon.cjs"),m=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),_=require("./input.cjs"),k=require("@dialpad/dialtone-emojis"),j=require("./tooltip.cjs");require("./button.cjs");require("vue");require("../chunks/link_constants-Kn6kP4i1.js");require("@dialpad/dialtone-icons/vue2");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("./constants.cjs");require("./utils.cjs");require("../chunks/input-o-fc1X4b.js");require("./validators.cjs");require("./validation-messages.cjs");require("../chunks/popover_constants-hOEhklvr.js");require("tippy.js");require("./lazy-show.cjs");const g={name:"EmojiTabset",components:{DtTabGroup:p.D,DtTab:p.a,DtIcon:b.DtIcon},props:{showRecentlyUsedTab:{type:Boolean,default:!1},scrollIntoTab:{type:Number,required:!0},isScrolling:{type:Boolean,default:!1},emojiFilter:{type:String,default:""},tabSetLabels:{type:Array,required:!0}},data(){return{selectedTab:"1",tabsetRef:[],TABS_DATA:[{label:u.MOST_RECENTLY_USED,icon:"clock"},{label:u.SMILEYS_AND_PEOPLE,icon:"satisfied"},{label:u.NATURE,icon:"living-thing"},{label:u.FOOD,icon:"food"},{label:u.ACTIVITY,icon:"object"},{label:u.TRAVEL,icon:"transportation"},{label:u.OBJECTS,icon:"lightbulb"},{label:u.SYMBOLS,icon:"heart"},{label:u.FLAGS,icon:"flag"}]}},computed:{tabs(){return(this.showRecentlyUsedTab?this.TABS_DATA:this.TABS_DATA.slice(1)).map((e,i)=>({...e,label:this.tabSetLabels[i],id:(i+1).toString(),panelId:(i+1).toString()}))},isSearching(){return this.emojiFilter.length>0}},watch:{scrollIntoTab:function(t){!this.isScrolling&&!this.isSearching&&(this.selectedTab=(t+1).toString())},isSearching:function(t){t&&(this.selectedTab=null)}},mounted(){this.$nextTick(()=>{this.setTabsetRef()})},methods:{selectTabset(t){this.isScrolling||(this.selectedTab=t),this.$emit("selected-tabset",t)},setTabsetRef(){this.tabs.forEach((t,e)=>{const i=`tabsetRef-${e}`;this.$refs[i]&&this.$set(this.tabsetRef,e,this.$refs[i][0].$el)})},focusTabset(){this.tabsetRef[0]&&this.tabsetRef[0].focus()},handleKeyDown(t,e){t.key==="Enter"&&(this.selectTabset(e),this.tabsetRef[e-1]&&this.tabsetRef[e-1].blur()),t.key==="Tab"&&(t.preventDefault(),t.shiftKey?this.$emit("focus-skin-selector"):this.$emit("focus-search-input")),t.key==="ArrowDown"&&this.$emit("focus-search-input")}}};var y=function(){var e=this,i=e._self._c;return i("div",{staticClass:"d-emoji-picker__tabset"},[i("dt-tab-group",{attrs:{"tab-list-class":"d-emoji-picker__tabset-list",selected:e.selectedTab},scopedSlots:e._u([{key:"tabs",fn:function(){return e._l(e.tabs,function(s,r){return i("dt-tab",{key:s.id,ref:`tabsetRef-${r}`,refInFor:!0,attrs:{id:s.id,"panel-id":s.panelId,label:s.label,"aria-controls":"d-emoji-picker-list",tabindex:r+1},on:{"!click":function(o){return o.stopPropagation(),e.selectTabset(s.id)},keydown:function(o){return e.handleKeyDown(o,s.id)}}},[i("dt-icon",{attrs:{size:"400",name:s.icon}})],1)})},proxy:!0}])})],1)},R=[],S=m.n(g,y,R,!1,null,null,null,null);const E=S.exports,$={name:"EmojiSearch",components:{DtInput:_.DtInput,DtIcon:b.DtIcon},props:{searchPlaceholderLabel:{type:String,required:!0},modelValue:{type:String,default:""}},mounted(){this.focusSearchInput()},methods:{updateModelValue(t){this.$emit("update:model-value",t)},focusEmojiSelector(){this.$emit("focus-emoji-selector")},focusTabset(){this.$emit("focus-tabset")},selectFirstEmoji(){this.$emit("select-first-emoji")},clearSearch(){this.$emit("update:model-value",""),this.focusSearchInput()},focusSearchInput(){this.$refs.searchInputRef.focus()}}};var T=function(){var e=this,i=e._self._c;return i("div",{staticClass:"d-emoji-picker__search d-emoji-picker__alignment"},[i("dt-input",{ref:"searchInputRef",attrs:{id:"searchInput",placeholder:e.searchPlaceholderLabel,value:e.modelValue},on:{input:e.updateModelValue,keydown:[function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"up",38,s.key,["Up","ArrowUp"])?null:e.focusTabset.apply(null,arguments)},function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"down",40,s.key,["Down","ArrowDown"])?null:(s.preventDefault(),e.focusEmojiSelector.apply(null,arguments))},function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"enter",13,s.key,"Enter")?null:e.selectFirstEmoji.apply(null,arguments)}]},scopedSlots:e._u([{key:"leftIcon",fn:function(){return[i("dt-icon",{attrs:{name:"search",size:"200"}})]},proxy:!0},e.modelValue.length>0?{key:"rightIcon",fn:function(){return[i("button",{staticClass:"d-emoji-picker__search-button",on:{click:e.clearSearch,keydown:function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"enter",13,s.key,"Enter")?null:e.clearSearch.apply(null,arguments)}}},[i("dt-icon",{attrs:{name:"close"}})],1)]},proxy:!0}:null],null,!0)})],1)},v=[],L=m.n($,T,v,!1,null,null,null,null);const w=L.exports,I={name:"EmojiSelector",props:{emojiFilter:{type:String,default:""},skinTone:{type:String,required:!0},tabSetLabels:{type:Array,required:!0},selectedTabset:{type:Object,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},recentlyUsedEmojis:{type:Array,default:()=>[]}},data(){return{emojiRefs:[],emojiFilteredRefs:[],isFiltering:!1,hoverFirstEmoji:!0,fixedLabel:"",filteredEmojis:[],TABS_DATA:["Recently used","People","Nature","Food","Activity","Travel","Objects","Symbols","Flags"],tabLabelObserver:null}},computed:{currentEmojis(){return[...this.emojis[`People${this.skinTone}`]||[],...this.emojis.Nature||[],...this.emojis.Food||[],...this.emojis[`Activity${this.skinTone}`]||[],...this.emojis.Travel||[],...this.emojis[`Objects${this.skinTone}`]||[],...this.emojis.Symbols||[],...this.emojis.Flags||[]]},emojis(){return k.emojisGrouped},CDN_URL(){return d},tabLabels(){return this.recentlyUsedEmojis.length?this.tabSetLabels.map((t,e)=>({label:t,ref:this.$refs[`tabLabelRef-${e}`]})):this.tabSetLabels.slice(1).map((t,e)=>({label:t,ref:this.$refs[`tabLabelRef-${e}`]}))},tabs(){return this.recentlyUsedEmojis.length?this.TABS_DATA:this.TABS_DATA.slice(1)}},watch:{currentEmojis:{handler(){this.searchByNameAndKeywords()},immediate:!0},recentlyUsedEmojis:{handler(t){this.emojis["Recently used"]=t},immediate:!0},emojiFilter:{handler(t){this.resetScroll(),t?this.isFiltering=!0:(this.isFiltering=!1,this.$emit("highlighted-emoji",null)),this.debouncedSearch()}},selectedTabset:{handler(t){this.scrollToTab(t.tabId)},deep:!0}},created(){this.debouncedSearch=this.debounce(this.searchByNameAndKeywords,300)},mounted(){this.$nextTick(()=>{this.setupEmojiRefs(),this.setupFilteredRefs(),this.setupTabLabelRefs(),this.setTabLabelObserver()})},beforeDestroy(){this.tabLabelObserver&&this.tabLabelObserver.disconnect()},methods:{setupTabLabelRefs(){var t;(t=this.tabSetLabels)==null||t.forEach((e,i)=>{const s=`tabLabelRef-${i}`;this.$refs[s]&&this.$set(this.tabLabels,i,{label:e,ref:this.$refs[s]})})},setupFilteredRefs(){this.emojiFilteredRefs=[],this.filteredEmojis.forEach((t,e)=>{const i=`filteredEmoji-${e}`;this.$refs[i]&&this.setFilteredRef(this.$refs[i],e)})},setupEmojiRefs(){for(let t=0;t<this.tabs.length;t++){const e=`emojiRef-${t}`;this.$refs[e]&&this.$refs[e].forEach((i,s)=>{i&&this.setEmojiRef(i,t,s)})}},searchByNameAndKeywords(){const t=this.emojiFilter.toLowerCase();this.filteredEmojis=this.currentEmojis.filter(function(e){const i=e.name.toLowerCase().includes(t),s=e.keywords.some(function(r){return r.toLowerCase().includes(t)});return i||s}),this.$nextTick(function(){t&&(this.hoverEmoji(this.filteredEmojis[0],!0),this.setupFilteredRefs())})},debounce:function(t,e){e===void 0&&(e=300);let i;return function(){const s=[];let r=arguments.length;for(;r--;)s[r]=arguments[r];clearTimeout(i),i=setTimeout(function(){t.apply(void 0,s)},e)}},getImgSrc:function(t){return this.CDN_URL+t+".png"},handleImageError:function(t){t.target.parentNode.style.display="none"},scrollToTab:function(t,e){const i=this;e===void 0&&(e=!0);const r=i.tabLabels[t-1].ref[0];i.$nextTick(function(){const o=i.$refs.listRef,n=t==="1"?0:r.offsetTop-20;let l=!0,c=o.scrollTop;i.$emit("is-scrolling",!0),o.addEventListener("scroll",function(){if(l){const f=o.scrollTop;(c<f&&f>=n||c>f&&f<=n)&&(l=!1,i.$emit("is-scrolling",!1)),c=f}}),o.scrollTop=n,e&&i.focusEmoji(t-1,0)})},resetScroll:function(){const t=this.$refs.listRef;t.scrollTop=0},focusEmojiSelector:function(){this.focusEmoji(0,0)},hoverEmoji(t,e){e===void 0&&(e=!1),this.hoverFirstEmoji=e,this.$emit("highlighted-emoji",t)},setEmojiRef:function(t,e,i){this.emojiRefs[e]||this.$set(this.emojiRefs,e,[]),this.$set(this.emojiRefs[e],i,t)},setFilteredRef:function(t,e){this.$set(this.emojiFilteredRefs,e,t)},focusEmoji:function(t,e){var s;const i=this.isFiltering?(s=this.emojiFilteredRefs[e])==null?void 0:s[0]:this.emojiRefs[t]&&this.emojiRefs[t][e];return i?(i.focus(),!0):!1},handleKeyDown:function(t,e,i,s){var r,o;if(t.preventDefault(),t.key==="ArrowUp"){const n=i%a;if(e===0){const l=a-this.emojiRefs[this.emojiRefs.length-1].length%a,c=this.emojiRefs[this.emojiRefs.length-1].length+l-(a-n);this.focusEmoji(this.emojiRefs.length-1,c)||this.focusEmoji(this.emojiRefs.length-1,this.emojiRefs[this.emojiRefs.length-1].length-1);return}if(!this.focusEmoji(e,i-a)){const l=e-1<0?0:e-1,c=this.emojiRefs[l].length,f=c-c%a+n;this.focusEmoji(l,f)||this.focusEmoji(e-1,this.emojiRefs[e-1].length-1)}}if(t.key==="ArrowDown"&&!this.focusEmoji(e,i+a)){const n=i%a;(o=(r=this.emojiRefs)==null?void 0:r[e])!=null&&o[i+(a-n)]?this.focusEmoji(e,this.emojiRefs[e].length-1):this.focusEmoji(e+1,n)||this.focusEmoji(0,n)||this.focusEmoji(0,this.emojiRefs[0].length-1)}t.key==="ArrowLeft"&&this.handleHorizontalNavigation("left",e,i),t.key==="ArrowRight"&&this.handleHorizontalNavigation("right",e,i),t.key==="Tab"&&(this.focusEmoji(e+1,0)?this.scrollToTab(e+1+1,!1):this.$emit("focus-skin-selector")),t.key==="Tab"&&t.shiftKey&&(this.focusEmoji(e,0)&&e>0?this.scrollToTab(e,!0):(this.scrollToTab(1,!1),this.$emit("focus-search-input"))),t.key==="Enter"&&this.$emit("selected-emoji",s)},handleHorizontalNavigation:function(t,e,i){this.isFiltering?t==="left"?this.handleArrowLeftFiltered(e,i):t==="right"&&this.handleArrowRightFiltered(e,i):t==="left"?this.handleArrowLeft(e,i):t==="right"&&this.handleArrowRight(e,i)},handleArrowLeftFiltered:function(t,e){this.focusEmoji(0,e-1)||this.focusEmoji(0,this.emojiFilteredRefs.length-1)},handleArrowRightFiltered:function(t,e){this.focusEmoji(0,e+1)||this.focusEmoji(0,0)},handleArrowLeft:function(t,e){this.focusEmoji(t,e-1)||(this.emojiRefs[t-1]?this.focusEmoji(t-1,this.emojiRefs[t-1].length-1):this.focusEmoji(this.emojiRefs.length-1,this.emojiRefs[this.emojiRefs.length-1].length-1))},handleArrowRight:function(t,e){this.focusEmoji(t,e+1)||this.focusEmoji(t+1,0)||this.focusEmoji(0,0)},handleKeyDownFilteredEmojis(t,e,i){var s;if(t.preventDefault(),this.hoverFirstEmoji=!1,t.key==="ArrowUp"){const r=e%a;if(!this.focusEmoji(0,e-a)){const o=this.emojiFilteredRefs.length-this.emojiFilteredRefs.length%a+r;this.focusEmoji(0,o),this.focusEmoji(0,o)||this.focusEmoji(0,this.emojiFilteredRefs.length-1)}}if(t.key==="ArrowDown"&&!this.focusEmoji(0,e+a)){const r=e%a;(s=this.emojiFilteredRefs)!=null&&s[e+(a-r)]?this.focusEmoji(0,this.emojiFilteredRefs.length-1):this.focusEmoji(0,r)}t.key==="ArrowLeft"&&this.handleHorizontalNavigation("left",0,e),t.key==="ArrowRight"&&this.handleHorizontalNavigation("right",0,e),t.key==="Tab"&&this.$emit("focus-skin-selector"),t.key==="Enter"&&this.$emit("selected-emoji",i)},setTabLabelObserver(){this.tabLabelObserver=new IntersectionObserver(t=>{t.forEach(e=>{var r,o,n,l,c,f;const{target:i}=e,s=parseInt(i.dataset.index);e.isIntersecting&&i.offsetTop<=((r=this.$refs.tabCategoryRef)==null?void 0:r.offsetTop)+50?(this.fixedLabel=((o=this.tabLabels[s-1])==null?void 0:o.label)??((n=this.tabLabels[0])==null?void 0:n.label),this.$emit("scroll-into-tab",s-1)):e.boundingClientRect.bottom<=((l=this.$refs.tabCategoryRef)==null?void 0:l.getBoundingClientRect().bottom)?(this.$emit("scroll-into-tab",s),this.fixedLabel=(c=this.tabLabels[s])==null?void 0:c.label):s===1&&(this.$emit("scroll-into-tab",s),this.fixedLabel=(f=this.tabLabels[0])==null?void 0:f.label)})}),this.tabLabelObserver.observe(this.$refs.tabCategoryRef),Array.from(this.$refs.listRef.children).forEach((t,e)=>{this.tabLabelObserver.observe(t),t.dataset.index=e})},focusLastEmoji(){this.focusEmoji(this.tabs.length-1,0)}}};var D=function(){var e=this,i=e._self._c;return i("div",{staticClass:"d-emoji-picker__selector"},[i("div",{ref:"listRef",staticClass:"d-emoji-picker__list",attrs:{id:"d-emoji-picker-list"}},[e.emojiFilter?i("p",{staticClass:"d-emoji-picker__search-label d-emoji-picker__alignment"},[e._v(" "+e._s(e.filteredEmojis.length>0?e.searchResultsLabel:e.searchNoResultsLabel)+" ")]):i("div",{ref:"tabCategoryRef",staticClass:"d-emoji-picker__category d-emoji-picker__alignment"},[i("p",[e._v(" "+e._s(e.fixedLabel)+" ")])]),e._l(e.tabLabels,function(s,r){return i("div",{directives:[{name:"show",rawName:"v-show",value:!e.emojiFilter,expression:"!emojiFilter"}],key:r,ref:`tabLabelRef-${r}`,refInFor:!0,staticClass:"d-emoji-picker__alignment"},[r?i("p",[e._v(" "+e._s(s.label)+" ")]):e._e(),i("div",{staticClass:"d-emoji-picker__tab"},e._l(e.emojis[e.tabs[r]+e.skinTone]?e.emojis[e.tabs[r]+e.skinTone]:e.emojis[e.tabs[r]],function(o,n){return i("button",{key:o.shortname,ref:`emojiRef-${r}`,refInFor:!0,attrs:{type:"button","aria-label":o.name},on:{click:function(l){return e.$emit("selected-emoji",o)},focusin:function(l){return e.$emit("highlighted-emoji",o)},focusout:function(l){return e.$emit("highlighted-emoji",null)},mouseover:function(l){return e.$emit("highlighted-emoji",o)},mouseleave:function(l){return e.$emit("highlighted-emoji",null)},keydown:l=>e.handleKeyDown(l,r,n,o)}},[i("img",{staticClass:"d-icon d-icon--size-500",attrs:{alt:o.name,"aria-label":o.name,title:o.name,src:e.getImgSrc(o.unicode_character)},on:{error:e.handleImageError}})])}),0)])}),e.emojiFilter?i("div",{staticClass:"d-emoji-picker__alignment"},[i("div",{staticClass:"d-emoji-picker__tab",attrs:{"data-qa":"filtered-emojis"}},e._l(e.filteredEmojis,function(s,r){return i("button",{key:s.shortname,ref:`filteredEmoji-${r}`,refInFor:!0,class:{"hover-emoji":r===0&&e.hoverFirstEmoji},attrs:{type:"button","aria-label":s.name},on:{click:function(o){return e.$emit("selected-emoji",s)},focusin:function(o){return e.$emit("highlighted-emoji",s)},focusout:function(o){return e.$emit("highlighted-emoji",null)},mouseover:function(o){return e.hoverEmoji(s)},mouseleave:function(o){return e.hoverEmoji(null)},keydown:o=>e.handleKeyDownFilteredEmojis(o,r,s)}},[i("img",{staticClass:"d-icon d-icon--size-500",attrs:{alt:s.name,"aria-label":s.name,title:s.name,src:`${e.CDN_URL+s.unicode_character}.png`}})])}),0)]):e._e()],2)])},A=[],C=m.n(I,D,A,!1,null,null,null,null);const O=C.exports,d="https://static.dialpadcdn.com/joypixels/png/unicode/32/",a=9,h={DEFAULT:"Default",LIGHT:"Light",MEDIUM_LIGHT:"MediumLight",MEDIUM:"Medium",MEDIUM_DARK:"MediumDark",DARK:"Dark"},u={MOST_RECENTLY_USED:"Most recently used",SMILEYS_AND_PEOPLE:"Smileys and people",NATURE:"Nature",FOOD:"Food",ACTIVITY:"Activity",TRAVEL:"Travel",OBJECTS:"Objects",SYMBOLS:"Symbols",FLAGS:"Flags"},F={name:"EmojiDescription",props:{emoji:{type:Object,default:()=>null}},data(){return{CDN_URL:d}}};var q=function(){var s;var e=this,i=e._self._c;return i("div",{staticClass:"d-emoji-picker__data"},[e.emoji?i("img",{staticClass:"d-icon d-icon--size-500",attrs:{alt:e.emoji.name,"aria-label":e.emoji.name,title:e.emoji.name,src:`${e.CDN_URL+e.emoji.unicode_character}.png`}}):e._e(),e._v(" "+e._s((s=e.emoji)==null?void 0:s.name)+" ")])},N=[],U=m.n(F,q,N,!1,null,null,null,null);const M=U.exports,K={name:"EmojiSkinSelector",components:{DtTooltip:j.DtTooltip},props:{skinTone:{type:String,required:!0},isHovering:{type:Boolean,default:!1},skinSelectorButtonTooltipLabel:{type:String,required:!0}},data(){return{isOpen:!1,skinSelected:null,skinsRef:[],cdnUrl:d}},computed:{skinPassedIn(){return this.skinList.find(t=>t.skinTone===this.skinTone)},skinList(){return[{name:":wave_tone1:",unicode_output:"1f44b-1f3fb",skinTone:h.LIGHT,skinCode:"_tone1"},{name:":wave_tone2:",unicode_output:"1f44b-1f3fc",skinTone:h.MEDIUM_LIGHT,skinCode:"_tone2"},{name:":wave_tone3:",unicode_output:"1f44b-1f3fd",skinTone:h.MEDIUM,skinCode:"_tone3"},{name:":wave_tone4:",unicode_output:"1f44b-1f3fe",skinTone:h.MEDIUM_DARK,skinCode:"_tone4"},{name:":wave_tone5:",unicode_output:"1f44b-1f3ff",skinTone:h.DARK,skinCode:"_tone5"},{name:":wave:",unicode_output:"1f44b",skinTone:h.DEFAULT,skinCode:""}]}},watch:{isHovering(t){t&&(this.isOpen=!1)},skinTone(t,e){t!==e&&(this.skinSelected=this.skinPassedIn)}},mounted(){this.skinSelected=this.skinPassedIn,this.$nextTick(()=>{this.setupSkinRefs()})},methods:{setupSkinRefs(){this.skinList.forEach((t,e)=>{const i=`skinRef-${e}`;this.$refs[i]&&this.$set(this.skinsRef,e,this.$refs[i][0])})},focusSkinSelector(){this.$refs.skinSelectorRef&&this.$refs.skinSelectorRef.focus()},selectSkin(t){this.skinSelected=t,this.isOpen=!1,this.$emit("skin-tone",t.skinTone),this.$nextTick(()=>{this.focusSkinSelector()})},handleKeyDown(t,e,i){var s,r,o,n;t.preventDefault(),t.key==="ArrowLeft"&&(i===0&&((s=this.skinsRef[this.skinsRef.length-1])==null||s.focus()),(r=this.skinsRef[i-1])==null||r.focus()),t.key==="ArrowRight"&&(this.skinsRef.length&&((o=this.skinsRef[0])==null||o.focus()),(n=this.skinsRef[i+1])==null||n.focus()),t.key==="Enter"&&(e?this.selectSkin(e):this.toggleSkinList()),t.key==="Tab"&&(t.shiftKey?this.$emit("focus-last-emoji"):this.$emit("focus-tabset"))},toggleSkinList(){this.isOpen=!this.isOpen,this.$nextTick(()=>{this.skinsRef[0]&&this.skinsRef[0].focus()})}}};var P=function(){var e=this,i=e._self._c;return i("div",{attrs:{"data-qa":"skin-selector"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.isOpen,expression:"isOpen"}],staticClass:"d-emoji-picker__skin-list"},e._l(e.skinList,function(s,r){var o;return i("button",{key:s.name,ref:`skinRef-${r}`,refInFor:!0,class:{selected:((o=e.skinSelected)==null?void 0:o.skinCode)===s.skinCode},on:{click:function(n){return e.selectSkin(s)},keydown:n=>e.handleKeyDown(n,s,r)}},[i("img",{staticClass:"d-icon d-icon--size-500",attrs:{alt:s.name,"aria-label":s.name,title:s.name,src:`${e.cdnUrl+s.unicode_output}.png`}})])}),0),i("div",{directives:[{name:"show",rawName:"v-show",value:!e.isOpen,expression:"!isOpen"}],staticClass:"d-emoji-picker__skin-selected"},[i("dt-tooltip",{attrs:{placement:"top-end"},scopedSlots:e._u([{key:"anchor",fn:function(){var s,r,o,n;return[i("button",{ref:"skinSelectorRef",attrs:{"aria-label":e.skinSelectorButtonTooltipLabel,tabindex:"-1"},on:{click:e.toggleSkinList,keydown:l=>e.handleKeyDown(l)}},[i("img",{staticClass:"d-icon d-icon--size-500",attrs:{alt:(s=e.skinSelected)==null?void 0:s.name,"aria-label":(r=e.skinSelected)==null?void 0:r.name,title:(o=e.skinSelected)==null?void 0:o.name,src:`${e.cdnUrl+((n=e.skinSelected)==null?void 0:n.unicode_output)}.png`}})])]},proxy:!0}])},[e._v(" "+e._s(e.skinSelectorButtonTooltipLabel)+" ")])],1)])},B=[],z=m.n(K,P,B,!1,null,null,null,null);const H=z.exports,G={name:"DtEmojiPicker",components:{EmojiTabset:E,EmojiSearch:w,EmojiSelector:O,EmojiDescription:M,EmojiSkinSelector:H},props:{recentlyUsedEmojis:{type:Array},searchPlaceholderLabel:{type:String,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},tabSetLabels:{type:Array,required:!0},skinTone:{type:String},skinSelectorButtonTooltipLabel:{type:String,required:!0}},data(){return{searchQuery:"",highlightedEmoji:null,selectedTabset:{},scrollIntoTab:0,isScrolling:!1}},computed:{showRecentlyUsedTab(){var t;return((t=this.recentlyUsedEmojis)==null?void 0:t.length)>0}},methods:{scrollToSelectedTabset(t){this.searchQuery="",this.selectedTabset={...this.selectedTabset,tabId:t}},updateScrollIntoTab(t){this.scrollIntoTab=t},updateIsScrolling(t){this.isScrolling=t},updateHighlightedEmoji(t){this.highlightedEmoji=t}}};var V=function(){var e=this,i=e._self._c;return i("div",{staticClass:"d-emoji-picker"},[i("div",{staticClass:"d-emoji-picker--header"},[i("emoji-tabset",{ref:"tabsetRef",attrs:{"emoji-filter":e.searchQuery,"show-recently-used-tab":e.showRecentlyUsedTab,"scroll-into-tab":e.scrollIntoTab,"tab-set-labels":e.tabSetLabels,"is-scrolling":e.isScrolling},on:{"focus-search-input":function(s){return e.$refs.searchInputRef.focusSearchInput()},"focus-skin-selector":function(s){return e.$refs.skinSelectorRef.focusSkinSelector()},"selected-tabset":e.scrollToSelectedTabset},nativeOn:{keydown:function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"esc",27,s.key,["Esc","Escape"])?null:e.$emit("close")}}})],1),i("div",{staticClass:"d-emoji-picker--body"},[i("emoji-search",{ref:"searchInputRef",attrs:{"model-value":e.searchQuery,"search-placeholder-label":e.searchPlaceholderLabel},on:{"update:model-value":s=>e.searchQuery=s,"select-first-emoji":function(s){return e.$emit("selected-emoji",e.highlightedEmoji)},"focus-tabset":function(s){return e.$refs.tabsetRef.focusTabset()},"focus-emoji-selector":function(s){return e.$refs.emojiSelectorRef.focusEmojiSelector()}},nativeOn:{keydown:function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"esc",27,s.key,["Esc","Escape"])?null:e.$emit("close")}}}),i("emoji-selector",{ref:"emojiSelectorRef",attrs:{"emoji-filter":e.searchQuery,"skin-tone":e.skinTone,"tab-set-labels":e.tabSetLabels,"search-results-label":e.searchResultsLabel,"search-no-results-label":e.searchNoResultsLabel,"recently-used-emojis":e.recentlyUsedEmojis,"selected-tabset":e.selectedTabset},on:{"scroll-into-tab":e.updateScrollIntoTab,"is-scrolling":e.updateIsScrolling,"highlighted-emoji":e.updateHighlightedEmoji,"selected-emoji":function(s){return e.$emit("selected-emoji",s)},"focus-skin-selector":function(s){return e.$refs.skinSelectorRef.focusSkinSelector()},"focus-search-input":function(s){return e.$refs.searchInputRef.focusSearchInput()}},nativeOn:{keydown:function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"esc",27,s.key,["Esc","Escape"])?null:e.$emit("close")}}})],1),i("div",{staticClass:"d-emoji-picker--footer"},[i("emoji-description",{attrs:{emoji:e.highlightedEmoji}}),i("emoji-skin-selector",{ref:"skinSelectorRef",attrs:{"is-hovering":!!e.highlightedEmoji,"skin-selector-button-tooltip-label":e.skinSelectorButtonTooltipLabel,"skin-tone":e.skinTone},on:{"skin-tone":function(s){return e.$emit("skin-tone",s)},"focus-tabset":function(s){return e.$refs.tabsetRef.focusTabset()},"focus-last-emoji":function(s){return e.$refs.emojiSelectorRef.focusLastEmoji()}},nativeOn:{keydown:function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"esc",27,s.key,["Esc","Escape"])?null:e.$emit("close")}}})],1)])},J=[],Y=m.n(G,V,J,!1,null,null,null,null);const Q=Y.exports;exports.CDN_URL=d;exports.DtEmojiPicker=Q;exports.EMOJIS_PER_ROW=a;exports.EMOJI_PICKER_CATEGORIES=u;exports.EMOJI_PICKER_SKIN_TONE_MODIFIERS=h;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tab = require("../chunks/tab-FcsV5VmK.js");
+const lib_icon = require("./icon.cjs");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const lib_input = require("./input.cjs");
+const dialtoneEmojis = require("@dialpad/dialtone-emojis");
+const lib_tooltip = require("./tooltip.cjs");
+require("./button.cjs");
+require("vue");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("@dialpad/dialtone-icons/vue2");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+require("../common/constants.cjs");
+require("../common/utils.cjs");
+require("../chunks/input-Axw-wFj2.js");
+require("../common/validators.cjs");
+require("./validation-messages.cjs");
+require("../chunks/popover_constants-JwBF9h1Z.js");
+require("tippy.js");
+require("./lazy-show.cjs");
+const _sfc_main$5 = {
+  name: "EmojiTabset",
+  components: {
+    DtTabGroup: tab.DtTabGroup,
+    DtTab: tab.DtTab,
+    DtIcon: lib_icon.DtIcon
+  },
+  props: {
+    showRecentlyUsedTab: {
+      type: Boolean,
+      default: false
+    },
+    scrollIntoTab: {
+      type: Number,
+      required: true
+    },
+    isScrolling: {
+      type: Boolean,
+      default: false
+    },
+    emojiFilter: {
+      type: String,
+      default: ""
+    },
+    tabSetLabels: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      selectedTab: "1",
+      tabsetRef: [],
+      TABS_DATA: [
+        { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: "clock" },
+        { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: "satisfied" },
+        { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: "living-thing" },
+        { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: "food" },
+        { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: "object" },
+        { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: "transportation" },
+        { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: "lightbulb" },
+        { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: "heart" },
+        { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: "flag" }
+      ]
+    };
+  },
+  computed: {
+    tabs() {
+      const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);
+      return tabsData.map((tab2, index) => ({
+        ...tab2,
+        label: this.tabSetLabels[index],
+        id: (index + 1).toString(),
+        panelId: (index + 1).toString()
+      }));
+    },
+    isSearching() {
+      return this.emojiFilter.length > 0;
+    }
+  },
+  watch: {
+    scrollIntoTab: function(newVal) {
+      if (!this.isScrolling && !this.isSearching) {
+        this.selectedTab = (newVal + 1).toString();
+      }
+    },
+    isSearching: function(newVal) {
+      if (newVal) {
+        this.selectedTab = null;
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.setTabsetRef();
+    });
+  },
+  methods: {
+    selectTabset(id) {
+      if (!this.isScrolling) {
+        this.selectedTab = id;
+      }
+      this.$emit("selected-tabset", id);
+    },
+    setTabsetRef() {
+      this.tabs.forEach((skin, index) => {
+        const refKey = `tabsetRef-${index}`;
+        if (this.$refs[refKey]) {
+          this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);
+        }
+      });
+    },
+    focusTabset() {
+      if (this.tabsetRef[0]) {
+        this.tabsetRef[0].focus();
+      }
+    },
+    handleKeyDown(event, tabId) {
+      if (event.key === "Enter") {
+        this.selectTabset(tabId);
+        if (this.tabsetRef[tabId - 1]) {
+          this.tabsetRef[tabId - 1].blur();
+        }
+      }
+      if (event.key === "Tab") {
+        event.preventDefault();
+        if (event.shiftKey) {
+          this.$emit("focus-skin-selector");
+        } else {
+          this.$emit("focus-search-input");
+        }
+      }
+      if (event.key === "ArrowDown") {
+        this.$emit("focus-search-input");
+      }
+    }
+  }
+};
+var _sfc_render$5 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "d-emoji-picker__tabset" }, [_c("dt-tab-group", { attrs: { "tab-list-class": "d-emoji-picker__tabset-list", "selected": _vm.selectedTab }, scopedSlots: _vm._u([{ key: "tabs", fn: function() {
+    return _vm._l(_vm.tabs, function(tab2, index) {
+      return _c("dt-tab", { key: tab2.id, ref: `tabsetRef-${index}`, refInFor: true, attrs: { "id": tab2.id, "panel-id": tab2.panelId, "label": tab2.label, "aria-controls": "d-emoji-picker-list", "tabindex": index + 1 }, on: { "!click": function($event) {
+        $event.stopPropagation();
+        return _vm.selectTabset(tab2.id);
+      }, "keydown": function($event) {
+        return _vm.handleKeyDown($event, tab2.id);
+      } } }, [_c("dt-icon", { attrs: { "size": "400", "name": tab2.icon } })], 1);
+    });
+  }, proxy: true }]) })], 1);
+};
+var _sfc_staticRenderFns$5 = [];
+var __component__$5 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$5,
+  _sfc_render$5,
+  _sfc_staticRenderFns$5,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const EmojiTabset = __component__$5.exports;
+const _sfc_main$4 = {
+  name: "EmojiSearch",
+  components: {
+    DtInput: lib_input.DtInput,
+    DtIcon: lib_icon.DtIcon
+  },
+  props: {
+    searchPlaceholderLabel: {
+      type: String,
+      required: true
+    },
+    modelValue: {
+      type: String,
+      default: ""
+    }
+  },
+  mounted() {
+    this.focusSearchInput();
+  },
+  methods: {
+    updateModelValue(value) {
+      this.$emit("update:model-value", value);
+    },
+    focusEmojiSelector() {
+      this.$emit("focus-emoji-selector");
+    },
+    focusTabset() {
+      this.$emit("focus-tabset");
+    },
+    selectFirstEmoji() {
+      this.$emit("select-first-emoji");
+    },
+    clearSearch() {
+      this.$emit("update:model-value", "");
+      this.focusSearchInput();
+    },
+    focusSearchInput() {
+      this.$refs.searchInputRef.focus();
+    }
+  }
+};
+var _sfc_render$4 = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "d-emoji-picker__search d-emoji-picker__alignment" }, [_c("dt-input", { ref: "searchInputRef", attrs: { "id": "searchInput", "placeholder": _vm.searchPlaceholderLabel, "value": _vm.modelValue }, on: { "input": _vm.updateModelValue, "keydown": [function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]))
+      return null;
+    return _vm.focusTabset.apply(null, arguments);
+  }, function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]))
+      return null;
+    $event.preventDefault();
+    return _vm.focusEmojiSelector.apply(null, arguments);
+  }, function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
+      return null;
+    return _vm.selectFirstEmoji.apply(null, arguments);
+  }] }, scopedSlots: _vm._u([{ key: "leftIcon", fn: function() {
+    return [_c("dt-icon", { attrs: { "name": "search", "size": "200" } })];
+  }, proxy: true }, _vm.modelValue.length > 0 ? { key: "rightIcon", fn: function() {
+    return [_c("button", { staticClass: "d-emoji-picker__search-button", on: { "click": _vm.clearSearch, "keydown": function($event) {
+      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
+        return null;
+      return _vm.clearSearch.apply(null, arguments);
+    } } }, [_c("dt-icon", { attrs: { "name": "close" } })], 1)];
+  }, proxy: true } : null], null, true) })], 1);
+};
+var _sfc_staticRenderFns$4 = [];
+var __component__$4 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$4,
+  _sfc_render$4,
+  _sfc_staticRenderFns$4,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const EmojiSearch = __component__$4.exports;
+const _sfc_main$3 = {
+  name: "EmojiSelector",
+  props: {
+    emojiFilter: {
+      type: String,
+      default: ""
+    },
+    skinTone: {
+      type: String,
+      required: true
+    },
+    tabSetLabels: {
+      type: Array,
+      required: true
+    },
+    selectedTabset: {
+      type: Object,
+      required: true
+    },
+    searchResultsLabel: {
+      type: String,
+      required: true
+    },
+    searchNoResultsLabel: {
+      type: String,
+      required: true
+    },
+    recentlyUsedEmojis: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      emojiRefs: [],
+      emojiFilteredRefs: [],
+      isFiltering: false,
+      hoverFirstEmoji: true,
+      fixedLabel: "",
+      filteredEmojis: [],
+      TABS_DATA: ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"],
+      tabLabelObserver: null
+    };
+  },
+  computed: {
+    currentEmojis() {
+      return [
+        ...this.emojis[`People${this.skinTone}`] || [],
+        ...this.emojis.Nature || [],
+        ...this.emojis.Food || [],
+        ...this.emojis[`Activity${this.skinTone}`] || [],
+        ...this.emojis.Travel || [],
+        ...this.emojis[`Objects${this.skinTone}`] || [],
+        ...this.emojis.Symbols || [],
+        ...this.emojis.Flags || []
+      ];
+    },
+    emojis() {
+      return dialtoneEmojis.emojisGrouped;
+    },
+    CDN_URL() {
+      return CDN_URL;
+    },
+    tabLabels() {
+      return this.recentlyUsedEmojis.length ? this.tabSetLabels.map((label, index) => ({ label, ref: this.$refs[`tabLabelRef-${index}`] })) : this.tabSetLabels.slice(1).map((label, index) => ({ label, ref: this.$refs[`tabLabelRef-${index}`] }));
+    },
+    tabs() {
+      return this.recentlyUsedEmojis.length ? this.TABS_DATA : this.TABS_DATA.slice(1);
+    }
+  },
+  watch: {
+    currentEmojis: {
+      handler() {
+        this.searchByNameAndKeywords();
+      },
+      immediate: true
+    },
+    recentlyUsedEmojis: {
+      handler(newValue) {
+        this.emojis["Recently used"] = newValue;
+      },
+      immediate: true
+    },
+    emojiFilter: {
+      handler(newFilter) {
+        this.resetScroll();
+        if (newFilter) {
+          this.isFiltering = true;
+        } else {
+          this.isFiltering = false;
+          this.$emit("highlighted-emoji", null);
+        }
+        this.debouncedSearch();
+      }
+    },
+    selectedTabset: {
+      handler(newValue) {
+        this.scrollToTab(newValue.tabId);
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.debouncedSearch = this.debounce(this.searchByNameAndKeywords, 300);
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.setupEmojiRefs();
+      this.setupFilteredRefs();
+      this.setupTabLabelRefs();
+      this.setTabLabelObserver();
+    });
+  },
+  beforeDestroy() {
+    if (this.tabLabelObserver) {
+      this.tabLabelObserver.disconnect();
+    }
+  },
+  methods: {
+    setupTabLabelRefs() {
+      var _a;
+      (_a = this.tabSetLabels) == null ? void 0 : _a.forEach((label, index) => {
+        const refKey = `tabLabelRef-${index}`;
+        if (this.$refs[refKey]) {
+          this.$set(this.tabLabels, index, { label, ref: this.$refs[refKey] });
+        }
+      });
+    },
+    setupFilteredRefs() {
+      this.emojiFilteredRefs = [];
+      this.filteredEmojis.forEach((emoji, index) => {
+        const refKey = `filteredEmoji-${index}`;
+        if (this.$refs[refKey]) {
+          this.setFilteredRef(this.$refs[refKey], index);
+        }
+      });
+    },
+    setupEmojiRefs() {
+      for (let i = 0; i < this.tabs.length; i++) {
+        const refKey = `emojiRef-${i}`;
+        if (this.$refs[refKey]) {
+          this.$refs[refKey].forEach((el, indexEmoji) => {
+            if (el) {
+              this.setEmojiRef(el, i, indexEmoji);
+            }
+          });
+        }
+      }
+    },
+    searchByNameAndKeywords() {
+      const searchStr = this.emojiFilter.toLowerCase();
+      this.filteredEmojis = this.currentEmojis.filter(function(obj) {
+        const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);
+        const keywordsIncludeSearchStr = obj.keywords.some(function(keyword) {
+          return keyword.toLowerCase().includes(searchStr);
+        });
+        return nameIncludesSearchStr || keywordsIncludeSearchStr;
+      });
+      this.$nextTick(function() {
+        if (searchStr) {
+          this.hoverEmoji(this.filteredEmojis[0], true);
+          this.setupFilteredRefs();
+        }
+      });
+    },
+    debounce: function(fn, delay) {
+      if (delay === void 0) {
+        delay = 300;
+      }
+      let timeout;
+      return function() {
+        const args = [];
+        let len = arguments.length;
+        while (len--)
+          args[len] = arguments[len];
+        clearTimeout(timeout);
+        timeout = setTimeout(function() {
+          fn.apply(void 0, args);
+        }, delay);
+      };
+    },
+    getImgSrc: function(emoji) {
+      return this.CDN_URL + emoji + ".png";
+    },
+    handleImageError: function(event) {
+      event.target.parentNode.style.display = "none";
+    },
+    scrollToTab: function(tabIndex, focusFirstEmoji) {
+      const vm = this;
+      if (focusFirstEmoji === void 0) {
+        focusFirstEmoji = true;
+      }
+      const tabLabel = vm.tabLabels[tabIndex - 1];
+      const tabElement = tabLabel.ref[0];
+      vm.$nextTick(function() {
+        const container = vm.$refs.listRef;
+        const offsetTop = tabIndex === "1" ? 0 : tabElement.offsetTop - 20;
+        let isScrolling = true;
+        let prevScrollTop = container.scrollTop;
+        vm.$emit("is-scrolling", true);
+        container.addEventListener("scroll", function() {
+          if (isScrolling) {
+            const scrollTop = container.scrollTop;
+            if (prevScrollTop < scrollTop && scrollTop >= offsetTop || prevScrollTop > scrollTop && scrollTop <= offsetTop) {
+              isScrolling = false;
+              vm.$emit("is-scrolling", false);
+            }
+            prevScrollTop = scrollTop;
+          }
+        });
+        container.scrollTop = offsetTop;
+        if (focusFirstEmoji) {
+          vm.focusEmoji(tabIndex - 1, 0);
+        }
+      });
+    },
+    resetScroll: function() {
+      const container = this.$refs.listRef;
+      container.scrollTop = 0;
+    },
+    focusEmojiSelector: function() {
+      this.focusEmoji(0, 0);
+    },
+    hoverEmoji(emoji, isFirst) {
+      if (isFirst === void 0) {
+        isFirst = false;
+      }
+      this.hoverFirstEmoji = isFirst;
+      this.$emit("highlighted-emoji", emoji);
+    },
+    setEmojiRef: function(el, indexTab, indexEmoji) {
+      if (!this.emojiRefs[indexTab]) {
+        this.$set(this.emojiRefs, indexTab, []);
+      }
+      this.$set(this.emojiRefs[indexTab], indexEmoji, el);
+    },
+    setFilteredRef: function(el, index) {
+      this.$set(this.emojiFilteredRefs, index, el);
+    },
+    focusEmoji: function(indexTab, indexEmoji) {
+      var _a;
+      const emojiRef = this.isFiltering ? (_a = this.emojiFilteredRefs[indexEmoji]) == null ? void 0 : _a[0] : this.emojiRefs[indexTab] && this.emojiRefs[indexTab][indexEmoji];
+      if (emojiRef) {
+        emojiRef.focus();
+        return true;
+      }
+      return false;
+    },
+    handleKeyDown: function(event, indexTab, indexEmoji, emoji) {
+      var _a, _b;
+      event.preventDefault();
+      if (event.key === "ArrowUp") {
+        const position = indexEmoji % EMOJIS_PER_ROW;
+        if (indexTab === 0) {
+          const numberOfMissingEmojis = EMOJIS_PER_ROW - this.emojiRefs[this.emojiRefs.length - 1].length % EMOJIS_PER_ROW;
+          const emojiToJump = this.emojiRefs[this.emojiRefs.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);
+          if (!this.focusEmoji(this.emojiRefs.length - 1, emojiToJump)) {
+            this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1);
+          }
+          return;
+        }
+        if (!this.focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {
+          const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;
+          const emojisInPreviousTab = this.emojiRefs[previousTab].length;
+          const lastEmojiPosition = emojisInPreviousTab - emojisInPreviousTab % EMOJIS_PER_ROW + position;
+          if (!this.focusEmoji(previousTab, lastEmojiPosition)) {
+            this.focusEmoji(indexTab - 1, this.emojiRefs[indexTab - 1].length - 1);
+          }
+        }
+      }
+      if (event.key === "ArrowDown") {
+        if (!this.focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {
+          const position = indexEmoji % EMOJIS_PER_ROW;
+          if ((_b = (_a = this.emojiRefs) == null ? void 0 : _a[indexTab]) == null ? void 0 : _b[indexEmoji + (EMOJIS_PER_ROW - position)]) {
+            this.focusEmoji(indexTab, this.emojiRefs[indexTab].length - 1);
+          } else {
+            if (!this.focusEmoji(indexTab + 1, position)) {
+              if (!this.focusEmoji(0, position)) {
+                this.focusEmoji(0, this.emojiRefs[0].length - 1);
+              }
+            }
+          }
+        }
+      }
+      if (event.key === "ArrowLeft") {
+        this.handleHorizontalNavigation("left", indexTab, indexEmoji);
+      }
+      if (event.key === "ArrowRight") {
+        this.handleHorizontalNavigation("right", indexTab, indexEmoji);
+      }
+      if (event.key === "Tab") {
+        if (this.focusEmoji(indexTab + 1, 0)) {
+          this.scrollToTab(indexTab + 1 + 1, false);
+        } else {
+          this.$emit("focus-skin-selector");
+        }
+      }
+      if (event.key === "Tab" && event.shiftKey) {
+        if (this.focusEmoji(indexTab, 0) && indexTab > 0) {
+          this.scrollToTab(indexTab, true);
+        } else {
+          this.scrollToTab(1, false);
+          this.$emit("focus-search-input");
+        }
+      }
+      if (event.key === "Enter") {
+        this.$emit("selected-emoji", emoji);
+      }
+    },
+    handleHorizontalNavigation: function(direction, indexTab, indexEmoji) {
+      if (this.isFiltering) {
+        if (direction === "left") {
+          this.handleArrowLeftFiltered(indexTab, indexEmoji);
+        } else if (direction === "right") {
+          this.handleArrowRightFiltered(indexTab, indexEmoji);
+        }
+      } else {
+        if (direction === "left") {
+          this.handleArrowLeft(indexTab, indexEmoji);
+        } else if (direction === "right") {
+          this.handleArrowRight(indexTab, indexEmoji);
+        }
+      }
+    },
+    handleArrowLeftFiltered: function(indexTab, indexEmoji) {
+      if (!this.focusEmoji(0, indexEmoji - 1)) {
+        this.focusEmoji(0, this.emojiFilteredRefs.length - 1);
+      }
+    },
+    handleArrowRightFiltered: function(indexTab, indexEmoji) {
+      if (!this.focusEmoji(0, indexEmoji + 1)) {
+        this.focusEmoji(0, 0);
+      }
+    },
+    handleArrowLeft: function(indexTab, indexEmoji) {
+      if (!this.focusEmoji(indexTab, indexEmoji - 1)) {
+        if (this.emojiRefs[indexTab - 1]) {
+          this.focusEmoji(indexTab - 1, this.emojiRefs[indexTab - 1].length - 1);
+        } else {
+          this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1);
+        }
+      }
+    },
+    handleArrowRight: function(indexTab, indexEmoji) {
+      if (!this.focusEmoji(indexTab, indexEmoji + 1)) {
+        if (!this.focusEmoji(indexTab + 1, 0)) {
+          this.focusEmoji(0, 0);
+        }
+      }
+    },
+    handleKeyDownFilteredEmojis(event, indexEmoji, emoji) {
+      var _a;
+      event.preventDefault();
+      this.hoverFirstEmoji = false;
+      if (event.key === "ArrowUp") {
+        const position = indexEmoji % EMOJIS_PER_ROW;
+        if (!this.focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {
+          const lastEmojiPosition = this.emojiFilteredRefs.length - this.emojiFilteredRefs.length % EMOJIS_PER_ROW + position;
+          this.focusEmoji(0, lastEmojiPosition);
+          if (!this.focusEmoji(0, lastEmojiPosition)) {
+            this.focusEmoji(0, this.emojiFilteredRefs.length - 1);
+          }
+        }
+      }
+      if (event.key === "ArrowDown") {
+        if (!this.focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {
+          const position = indexEmoji % EMOJIS_PER_ROW;
+          if ((_a = this.emojiFilteredRefs) == null ? void 0 : _a[indexEmoji + (EMOJIS_PER_ROW - position)]) {
+            this.focusEmoji(0, this.emojiFilteredRefs.length - 1);
+          } else {
+            this.focusEmoji(0, position);
+          }
+        }
+      }
+      if (event.key === "ArrowLeft") {
+        this.handleHorizontalNavigation("left", 0, indexEmoji);
+      }
+      if (event.key === "ArrowRight") {
+        this.handleHorizontalNavigation("right", 0, indexEmoji);
+      }
+      if (event.key === "Tab") {
+        this.$emit("focus-skin-selector");
+      }
+      if (event.key === "Enter") {
+        this.$emit("selected-emoji", emoji);
+      }
+    },
+    setTabLabelObserver() {
+      this.tabLabelObserver = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          var _a, _b, _c, _d, _e, _f;
+          const { target } = entry;
+          const index = parseInt(target.dataset.index);
+          if (entry.isIntersecting && target.offsetTop <= ((_a = this.$refs.tabCategoryRef) == null ? void 0 : _a.offsetTop) + 50) {
+            this.fixedLabel = ((_b = this.tabLabels[index - 1]) == null ? void 0 : _b.label) ?? ((_c = this.tabLabels[0]) == null ? void 0 : _c.label);
+            this.$emit("scroll-into-tab", index - 1);
+          } else if (entry.boundingClientRect.bottom <= ((_d = this.$refs.tabCategoryRef) == null ? void 0 : _d.getBoundingClientRect().bottom)) {
+            this.$emit("scroll-into-tab", index);
+            this.fixedLabel = (_e = this.tabLabels[index]) == null ? void 0 : _e.label;
+          } else if (index === 1) {
+            this.$emit("scroll-into-tab", index);
+            this.fixedLabel = (_f = this.tabLabels[0]) == null ? void 0 : _f.label;
+          }
+        });
+      });
+      this.tabLabelObserver.observe(this.$refs.tabCategoryRef);
+      Array.from(this.$refs.listRef.children).forEach((child, index) => {
+        this.tabLabelObserver.observe(child);
+        child.dataset.index = index;
+      });
+    },
+    focusLastEmoji() {
+      this.focusEmoji(this.tabs.length - 1, 0);
+    }
+  }
+};
+var _sfc_render$3 = function render3() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "d-emoji-picker__selector" }, [_c("div", { ref: "listRef", staticClass: "d-emoji-picker__list", attrs: { "id": "d-emoji-picker-list" } }, [_vm.emojiFilter ? _c("p", { staticClass: "d-emoji-picker__search-label d-emoji-picker__alignment" }, [_vm._v(" " + _vm._s(_vm.filteredEmojis.length > 0 ? _vm.searchResultsLabel : _vm.searchNoResultsLabel) + " ")]) : _c("div", { ref: "tabCategoryRef", staticClass: "d-emoji-picker__category d-emoji-picker__alignment" }, [_c("p", [_vm._v(" " + _vm._s(_vm.fixedLabel) + " ")])]), _vm._l(_vm.tabLabels, function(tabLabel, indexTab) {
+    return _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.emojiFilter, expression: "!emojiFilter" }], key: indexTab, ref: `tabLabelRef-${indexTab}`, refInFor: true, staticClass: "d-emoji-picker__alignment" }, [indexTab ? _c("p", [_vm._v(" " + _vm._s(tabLabel.label) + " ")]) : _vm._e(), _c("div", { staticClass: "d-emoji-picker__tab" }, _vm._l(_vm.emojis[_vm.tabs[indexTab] + _vm.skinTone] ? _vm.emojis[_vm.tabs[indexTab] + _vm.skinTone] : _vm.emojis[_vm.tabs[indexTab]], function(emoji, indexEmoji) {
+      return _c("button", { key: emoji.shortname, ref: `emojiRef-${indexTab}`, refInFor: true, attrs: { "type": "button", "aria-label": emoji.name }, on: { "click": function($event) {
+        return _vm.$emit("selected-emoji", emoji);
+      }, "focusin": function($event) {
+        return _vm.$emit("highlighted-emoji", emoji);
+      }, "focusout": function($event) {
+        return _vm.$emit("highlighted-emoji", null);
+      }, "mouseover": function($event) {
+        return _vm.$emit("highlighted-emoji", emoji);
+      }, "mouseleave": function($event) {
+        return _vm.$emit("highlighted-emoji", null);
+      }, "keydown": (event) => _vm.handleKeyDown(event, indexTab, indexEmoji, emoji) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": emoji.name, "aria-label": emoji.name, "title": emoji.name, "src": _vm.getImgSrc(emoji.unicode_character) }, on: { "error": _vm.handleImageError } })]);
+    }), 0)]);
+  }), _vm.emojiFilter ? _c("div", { staticClass: "d-emoji-picker__alignment" }, [_c("div", { staticClass: "d-emoji-picker__tab", attrs: { "data-qa": "filtered-emojis" } }, _vm._l(_vm.filteredEmojis, function(emoji, index) {
+    return _c("button", { key: emoji.shortname, ref: `filteredEmoji-${index}`, refInFor: true, class: {
+      "hover-emoji": index === 0 && _vm.hoverFirstEmoji
+    }, attrs: { "type": "button", "aria-label": emoji.name }, on: { "click": function($event) {
+      return _vm.$emit("selected-emoji", emoji);
+    }, "focusin": function($event) {
+      return _vm.$emit("highlighted-emoji", emoji);
+    }, "focusout": function($event) {
+      return _vm.$emit("highlighted-emoji", null);
+    }, "mouseover": function($event) {
+      return _vm.hoverEmoji(emoji);
+    }, "mouseleave": function($event) {
+      return _vm.hoverEmoji(null);
+    }, "keydown": (event) => _vm.handleKeyDownFilteredEmojis(event, index, emoji) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": emoji.name, "aria-label": emoji.name, "title": emoji.name, "src": `${_vm.CDN_URL + emoji.unicode_character}.png` } })]);
+  }), 0)]) : _vm._e()], 2)]);
+};
+var _sfc_staticRenderFns$3 = [];
+var __component__$3 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$3,
+  _sfc_render$3,
+  _sfc_staticRenderFns$3,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const EmojiSelector = __component__$3.exports;
+const CDN_URL = "https://static.dialpadcdn.com/joypixels/png/unicode/32/";
+const EMOJIS_PER_ROW = 9;
+const EMOJI_PICKER_SKIN_TONE_MODIFIERS = {
+  DEFAULT: "Default",
+  LIGHT: "Light",
+  MEDIUM_LIGHT: "MediumLight",
+  MEDIUM: "Medium",
+  MEDIUM_DARK: "MediumDark",
+  DARK: "Dark"
+};
+const EMOJI_PICKER_CATEGORIES = {
+  MOST_RECENTLY_USED: "Most recently used",
+  SMILEYS_AND_PEOPLE: "Smileys and people",
+  NATURE: "Nature",
+  FOOD: "Food",
+  ACTIVITY: "Activity",
+  TRAVEL: "Travel",
+  OBJECTS: "Objects",
+  SYMBOLS: "Symbols",
+  FLAGS: "Flags"
+};
+const _sfc_main$2 = {
+  name: "EmojiDescription",
+  props: {
+    /**
+     * Emoji data
+     * @type {Object}
+     * @default null
+     */
+    emoji: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      CDN_URL
+    };
+  }
+};
+var _sfc_render$2 = function render4() {
+  var _a;
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "d-emoji-picker__data" }, [_vm.emoji ? _c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": _vm.emoji.name, "aria-label": _vm.emoji.name, "title": _vm.emoji.name, "src": `${_vm.CDN_URL + _vm.emoji.unicode_character}.png` } }) : _vm._e(), _vm._v(" " + _vm._s((_a = _vm.emoji) == null ? void 0 : _a.name) + " ")]);
+};
+var _sfc_staticRenderFns$2 = [];
+var __component__$2 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const EmojiDescription = __component__$2.exports;
+const _sfc_main$1 = {
+  name: "EmojiSkinSelector",
+  components: {
+    DtTooltip: lib_tooltip.DtTooltip
+  },
+  props: {
+    skinTone: {
+      type: String,
+      required: true
+    },
+    isHovering: {
+      type: Boolean,
+      default: false
+    },
+    skinSelectorButtonTooltipLabel: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      isOpen: false,
+      skinSelected: null,
+      skinsRef: [],
+      cdnUrl: CDN_URL
+    };
+  },
+  computed: {
+    skinPassedIn() {
+      return this.skinList.find((skin) => skin.skinTone === this.skinTone);
+    },
+    skinList() {
+      return [
+        {
+          name: ":wave_tone1:",
+          unicode_output: "1f44b-1f3fb",
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,
+          skinCode: "_tone1"
+        },
+        {
+          name: ":wave_tone2:",
+          unicode_output: "1f44b-1f3fc",
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
+          skinCode: "_tone2"
+        },
+        {
+          name: ":wave_tone3:",
+          unicode_output: "1f44b-1f3fd",
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
+          skinCode: "_tone3"
+        },
+        {
+          name: ":wave_tone4:",
+          unicode_output: "1f44b-1f3fe",
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
+          skinCode: "_tone4"
+        },
+        {
+          name: ":wave_tone5:",
+          unicode_output: "1f44b-1f3ff",
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
+          skinCode: "_tone5"
+        },
+        {
+          name: ":wave:",
+          unicode_output: "1f44b",
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
+          skinCode: ""
+        }
+      ];
+    }
+  },
+  watch: {
+    isHovering(newVal) {
+      if (newVal) {
+        this.isOpen = false;
+      }
+    },
+    skinTone(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.skinSelected = this.skinPassedIn;
+      }
+    }
+  },
+  mounted() {
+    this.skinSelected = this.skinPassedIn;
+    this.$nextTick(() => {
+      this.setupSkinRefs();
+    });
+  },
+  methods: {
+    setupSkinRefs() {
+      this.skinList.forEach((skin, index) => {
+        const refKey = `skinRef-${index}`;
+        if (this.$refs[refKey]) {
+          this.$set(this.skinsRef, index, this.$refs[refKey][0]);
+        }
+      });
+    },
+    focusSkinSelector() {
+      if (this.$refs.skinSelectorRef) {
+        this.$refs.skinSelectorRef.focus();
+      }
+    },
+    selectSkin(skin) {
+      this.skinSelected = skin;
+      this.isOpen = false;
+      this.$emit("skin-tone", skin.skinTone);
+      this.$nextTick(() => {
+        this.focusSkinSelector();
+      });
+    },
+    handleKeyDown(event, skin, index) {
+      var _a, _b, _c, _d;
+      event.preventDefault();
+      if (event.key === "ArrowLeft") {
+        if (index === 0)
+          (_a = this.skinsRef[this.skinsRef.length - 1]) == null ? void 0 : _a.focus();
+        (_b = this.skinsRef[index - 1]) == null ? void 0 : _b.focus();
+      }
+      if (event.key === "ArrowRight") {
+        if (this.skinsRef.length)
+          (_c = this.skinsRef[0]) == null ? void 0 : _c.focus();
+        (_d = this.skinsRef[index + 1]) == null ? void 0 : _d.focus();
+      }
+      if (event.key === "Enter") {
+        if (skin) {
+          this.selectSkin(skin);
+        } else {
+          this.toggleSkinList();
+        }
+      }
+      if (event.key === "Tab") {
+        if (event.shiftKey) {
+          this.$emit("focus-last-emoji");
+        } else {
+          this.$emit("focus-tabset");
+        }
+      }
+    },
+    toggleSkinList() {
+      this.isOpen = !this.isOpen;
+      this.$nextTick(() => {
+        if (this.skinsRef[0]) {
+          this.skinsRef[0].focus();
+        }
+      });
+    }
+  }
+};
+var _sfc_render$1 = function render5() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { attrs: { "data-qa": "skin-selector" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.isOpen, expression: "isOpen" }], staticClass: "d-emoji-picker__skin-list" }, _vm._l(_vm.skinList, function(skin, index) {
+    var _a;
+    return _c("button", { key: skin.name, ref: `skinRef-${index}`, refInFor: true, class: {
+      "selected": ((_a = _vm.skinSelected) == null ? void 0 : _a.skinCode) === skin.skinCode
+    }, on: { "click": function($event) {
+      return _vm.selectSkin(skin);
+    }, "keydown": (event) => _vm.handleKeyDown(event, skin, index) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": skin.name, "aria-label": skin.name, "title": skin.name, "src": `${_vm.cdnUrl + skin.unicode_output}.png` } })]);
+  }), 0), _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.isOpen, expression: "!isOpen" }], staticClass: "d-emoji-picker__skin-selected" }, [_c("dt-tooltip", { attrs: { "placement": "top-end" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    var _a, _b, _c2, _d;
+    return [_c("button", { ref: "skinSelectorRef", attrs: { "aria-label": _vm.skinSelectorButtonTooltipLabel, "tabindex": "-1" }, on: { "click": _vm.toggleSkinList, "keydown": (event) => _vm.handleKeyDown(event) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": (_a = _vm.skinSelected) == null ? void 0 : _a.name, "aria-label": (_b = _vm.skinSelected) == null ? void 0 : _b.name, "title": (_c2 = _vm.skinSelected) == null ? void 0 : _c2.name, "src": `${_vm.cdnUrl + ((_d = _vm.skinSelected) == null ? void 0 : _d.unicode_output)}.png` } })])];
+  }, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.skinSelectorButtonTooltipLabel) + " ")])], 1)]);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const EmojiSkinSelector = __component__$1.exports;
+const _sfc_main = {
+  name: "DtEmojiPicker",
+  components: {
+    EmojiTabset,
+    EmojiSearch,
+    EmojiSelector,
+    EmojiDescription,
+    EmojiSkinSelector
+  },
+  props: {
+    recentlyUsedEmojis: {
+      type: Array
+    },
+    searchPlaceholderLabel: {
+      type: String,
+      required: true
+    },
+    searchResultsLabel: {
+      type: String,
+      required: true
+    },
+    searchNoResultsLabel: {
+      type: String,
+      required: true
+    },
+    tabSetLabels: {
+      type: Array,
+      required: true
+    },
+    skinTone: {
+      type: String
+    },
+    skinSelectorButtonTooltipLabel: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      searchQuery: "",
+      highlightedEmoji: null,
+      selectedTabset: {},
+      scrollIntoTab: 0,
+      isScrolling: false
+    };
+  },
+  computed: {
+    showRecentlyUsedTab() {
+      var _a;
+      return ((_a = this.recentlyUsedEmojis) == null ? void 0 : _a.length) > 0;
+    }
+  },
+  methods: {
+    scrollToSelectedTabset(tabId) {
+      this.searchQuery = "";
+      this.selectedTabset = { ...this.selectedTabset, tabId };
+    },
+    updateScrollIntoTab(value) {
+      this.scrollIntoTab = value;
+    },
+    updateIsScrolling(value) {
+      this.isScrolling = value;
+    },
+    updateHighlightedEmoji(emoji) {
+      this.highlightedEmoji = emoji;
+    }
+  }
+};
+var _sfc_render = function render6() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "d-emoji-picker" }, [_c("div", { staticClass: "d-emoji-picker--header" }, [_c("emoji-tabset", { ref: "tabsetRef", attrs: { "emoji-filter": _vm.searchQuery, "show-recently-used-tab": _vm.showRecentlyUsedTab, "scroll-into-tab": _vm.scrollIntoTab, "tab-set-labels": _vm.tabSetLabels, "is-scrolling": _vm.isScrolling }, on: { "focus-search-input": function($event) {
+    return _vm.$refs.searchInputRef.focusSearchInput();
+  }, "focus-skin-selector": function($event) {
+    return _vm.$refs.skinSelectorRef.focusSkinSelector();
+  }, "selected-tabset": _vm.scrollToSelectedTabset }, nativeOn: { "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+      return null;
+    return _vm.$emit("close");
+  } } })], 1), _c("div", { staticClass: "d-emoji-picker--body" }, [_c("emoji-search", { ref: "searchInputRef", attrs: { "model-value": _vm.searchQuery, "search-placeholder-label": _vm.searchPlaceholderLabel }, on: { "update:model-value": (newValue) => _vm.searchQuery = newValue, "select-first-emoji": function($event) {
+    return _vm.$emit("selected-emoji", _vm.highlightedEmoji);
+  }, "focus-tabset": function($event) {
+    return _vm.$refs.tabsetRef.focusTabset();
+  }, "focus-emoji-selector": function($event) {
+    return _vm.$refs.emojiSelectorRef.focusEmojiSelector();
+  } }, nativeOn: { "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+      return null;
+    return _vm.$emit("close");
+  } } }), _c("emoji-selector", { ref: "emojiSelectorRef", attrs: { "emoji-filter": _vm.searchQuery, "skin-tone": _vm.skinTone, "tab-set-labels": _vm.tabSetLabels, "search-results-label": _vm.searchResultsLabel, "search-no-results-label": _vm.searchNoResultsLabel, "recently-used-emojis": _vm.recentlyUsedEmojis, "selected-tabset": _vm.selectedTabset }, on: { "scroll-into-tab": _vm.updateScrollIntoTab, "is-scrolling": _vm.updateIsScrolling, "highlighted-emoji": _vm.updateHighlightedEmoji, "selected-emoji": function($event) {
+    return _vm.$emit("selected-emoji", $event);
+  }, "focus-skin-selector": function($event) {
+    return _vm.$refs.skinSelectorRef.focusSkinSelector();
+  }, "focus-search-input": function($event) {
+    return _vm.$refs.searchInputRef.focusSearchInput();
+  } }, nativeOn: { "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+      return null;
+    return _vm.$emit("close");
+  } } })], 1), _c("div", { staticClass: "d-emoji-picker--footer" }, [_c("emoji-description", { attrs: { "emoji": _vm.highlightedEmoji } }), _c("emoji-skin-selector", { ref: "skinSelectorRef", attrs: { "is-hovering": !!_vm.highlightedEmoji, "skin-selector-button-tooltip-label": _vm.skinSelectorButtonTooltipLabel, "skin-tone": _vm.skinTone }, on: { "skin-tone": function($event) {
+    return _vm.$emit("skin-tone", $event);
+  }, "focus-tabset": function($event) {
+    return _vm.$refs.tabsetRef.focusTabset();
+  }, "focus-last-emoji": function($event) {
+    return _vm.$refs.emojiSelectorRef.focusLastEmoji();
+  } }, nativeOn: { "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+      return null;
+    return _vm.$emit("close");
+  } } })], 1)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const DtEmojiPicker = __component__.exports;
+exports.CDN_URL = CDN_URL;
+exports.DtEmojiPicker = DtEmojiPicker;
+exports.EMOJIS_PER_ROW = EMOJIS_PER_ROW;
+exports.EMOJI_PICKER_CATEGORIES = EMOJI_PICKER_CATEGORIES;
+exports.EMOJI_PICKER_SKIN_TONE_MODIFIERS = EMOJI_PICKER_SKIN_TONE_MODIFIERS;
 //# sourceMappingURL=emoji-picker.cjs.map