@dialpad/dialtone-vue 3.96.3 → 3.98.0

package/dist/emoji_picker-x6wk4x21.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),E=require("./emoji-zMlz3b9J.cjs"),x=require("./tooltip-gZ2LW6l0.cjs"),ee={class:"d-emoji-picker__search d-emoji-picker__alignment"},te=["onKeydown"],oe={__name:"emoji_search",props:{searchPlaceholderLabel:{type:String,required:!0},modelValue:{type:String,default:""}},emits:["update:modelValue","focus-emoji-selector","focus-tabset","select-first-emoji"],setup(l,{expose:g,emit:w}){const i=w,u=e.ref(null);function _(){i("update:modelValue",""),b()}function b(){u.value.focus()}return e.onMounted(()=>{b()}),g({focusSearchInput:b}),(y,f)=>(e.openBlock(),e.createElementBlock("div",ee,[e.createVNode(e.unref(E.DtInput),{id:"searchInput",ref_key:"searchInput",ref:u,placeholder:l.searchPlaceholderLabel,"model-value":l.modelValue,"onUpdate:modelValue":f[0]||(f[0]=s=>y.$emit("update:modelValue",s)),onKeydown:[f[1]||(f[1]=e.withKeys(s=>y.$emit("focus-tabset"),["up"])),f[2]||(f[2]=e.withKeys(e.withModifiers(s=>y.$emit("focus-emoji-selector"),["prevent"]),["down"])),f[3]||(f[3]=e.withKeys(s=>y.$emit("select-first-emoji"),["enter"]))]},e.createSlots({leftIcon:e.withCtx(()=>[e.createVNode(e.unref(E.DtIcon),{name:"search"})]),_:2},[l.modelValue.length>0?{name:"rightIcon",fn:e.withCtx(()=>[e.createElementVNode("button",{class:"d-emoji-picker__search-button",onClick:_,onKeydown:e.withKeys(_,["enter"])},[e.createVNode(e.unref(E.DtIcon),{name:"close"})],40,te)]),key:"0"}:void 0]),1032,["placeholder","model-value"])]))}},le={class:"d-emoji-picker__tabset"},ne={__name:"emoji_tabset",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}},emits:["selected-tabset","focus-search-input","focus-skin-selector"],setup(l,{expose:g,emit:w}){const i=l,u=w,_=[{label:A.MOST_RECENTLY_USED,icon:"clock"},{label:A.SMILEYS_AND_PEOPLE,icon:"satisfied"},{label:A.NATURE,icon:"living-thing"},{label:A.FOOD,icon:"food"},{label:A.ACTIVITY,icon:"object"},{label:A.TRAVEL,icon:"transportation"},{label:A.OBJECTS,icon:"lightbulb"},{label:A.SYMBOLS,icon:"heart"},{label:A.FLAGS,icon:"flag"}],b=e.computed(()=>(i.showRecentlyUsedTab?_:_.slice(1)).map((o,a)=>({...o,label:i.tabsetLabels[a],id:(a+1).toString(),panelId:(a+1).toString()}))),y=e.computed(()=>i.emojiFilter.length>0),f=e.ref("1"),{isScrolling:s}=e.toRefs(i),k=e.ref([]);e.watch(()=>i.scrollIntoTab,()=>{!s.value&&!y.value&&(f.value=(i.scrollIntoTab+1).toString())}),e.watch(y,()=>{y.value&&(f.value=null)});function L(t){s.value||(f.value=t),u("selected-tabset",t)}function $(t){k.value.push(t.$el)}function T(){k.value[0].focus()}function n(t,o){t.key==="Enter"&&(L(o),k.value[o-1].blur()),t.key==="Tab"&&(t.preventDefault(),t.shiftKey?u("focus-skin-selector"):u("focus-search-input")),t.key==="ArrowDown"&&u("focus-search-input")}return g({focusTabset:T}),(t,o)=>(e.openBlock(),e.createElementBlock("div",le,[e.createVNode(e.unref(E.DtTabGroup),{"tab-list-class":"d-emoji-picker__tabset-list",selected:f.value},{tabs:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,(a,d)=>(e.openBlock(),e.createBlock(e.unref(E.DtTab),{id:a.id,ref_for:!0,ref:h=>{h&&$(h)},key:a.id,"panel-id":a.panelId,label:a.label,"aria-controls":"d-emoji-picker-list",tabindex:d+1,onClickCapture:e.withModifiers(h=>L(a.id),["stop"]),onKeydown:h=>n(h,a.id)},{default:e.withCtx(()=>[e.createVNode(e.unref(E.DtIcon),{size:"400",name:a.icon},null,8,["name"])]),_:2},1032,["id","panel-id","label","tabindex","onClickCapture","onKeydown"]))),128))]),_:1},8,["selected"])]))}},C={ARROW_UP:"ArrowUp",ARROW_DOWN:"ArrowDown",ARROW_LEFT:"ArrowLeft",ARROW_RIGHT:"ArrowRight"},V="https://static.dialpadcdn.com/joypixels/png/unicode/32/",j=9,B={DEFAULT:"Default",LIGHT:"Light",MEDIUM_LIGHT:"MediumLight",MEDIUM:"Medium",MEDIUM_DARK:"MediumDark",DARK:"Dark"},A={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"};function se(){const l=e.ref([]),g=e.ref([]),w=e.ref(!1),i=e.ref(!0);function u(n,t){s(n,t-1)||(l.value[n-1]?s(n-1,l.value[n-1].length-1):s(l.value.length-1,l.value[l.value.length-1].length-1))}function _(n,t){s(n,t+1)||s(n+1,0)||s(0,0)}function b(n,t){s(0,t-1)||s(0,g.value.length-1)}function y(n,t){s(0,t+1)||s(0,0)}function f(n,t,o){w.value?n==="left"?b(t,o):n==="right"&&y(t,o):n==="left"?u(t,o):n==="right"&&_(t,o)}function s(n,t){var a,d,h;const o=w.value?(a=g.value)==null?void 0:a[t]:(h=(d=l.value)==null?void 0:d[n])==null?void 0:h[t];return o?(o.focus(),!0):!1}function k(n,t,o){l.value[t]||(l.value[t]=[]),l.value[t][o]=n}function L(n,t){g.value[t]=n}function $(n,t){var o;if(i.value=!1,n===C.ARROW_UP){const a=t%j;if(!s(0,t-j)){const d=g.value.length-g.value.length%j+a;s(0,d),s(0,d)||s(0,g.value.length-1)}}if(n===C.ARROW_DOWN&&!s(0,t+j)){const a=t%j;(o=g.value)!=null&&o[t+(j-a)]?s(0,g.value.length-1):s(0,a)}n===C.ARROW_LEFT&&f("left",0,t),n===C.ARROW_RIGHT&&f("right",0,t)}function T(n,t,o){var a,d;if(n==="ArrowUp"){const h=o%j;if(t===0){const S=j-l.value[l.value.length-1].length%j,I=l.value[l.value.length-1].length+S-(j-h);s(l.value.length-1,I)||s(l.value.length-1,l.value[l.value.length-1].length-1);return}if(!s(t,o-j)){const S=t-1<0?0:t-1,I=l.value[S].length,U=I-I%j+h;s(S,U)||s(t-1,l.value[t-1].length-1)}}if(n==="ArrowDown"&&!s(t,o+j)){const h=o%j;(d=(a=l.value)==null?void 0:a[t])!=null&&d[o+(j-h)]?s(t,l.value[t].length-1):s(t+1,h)||s(0,h)||s(0,l.value[0].length-1)}n==="ArrowLeft"&&f("left",t,o),n==="ArrowRight"&&f("right",t,o)}return{emojiFilteredRefs:g,isFiltering:w,hoverFirstEmoji:i,setEmojiRef:k,setFilteredRef:L,focusEmoji:s,handleArrowNavigationFiltered:$,handleArrowNavigation:T}}const re={class:"d-emoji-picker__selector"},ie={key:0,class:"d-emoji-picker__search-label d-emoji-picker__alignment"},ae={key:0},ce={class:"d-emoji-picker__tab"},ue=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],fe=["alt","aria-label","title","src"],de={key:2,class:"d-emoji-picker__alignment"},me={class:"d-emoji-picker__tab","data-qa":"filtered-emojis"},ve=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],pe=["alt","aria-label","title","src"],he={__name:"emoji_selector",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:()=>[]}},emits:["highlighted-emoji","selected-emoji","scroll-into-tab","is-scrolling","focus-skin-selector","focus-search-input"],setup(l,{expose:g,emit:w}){const i=l,u=w,{emojiFilteredRefs:_,isFiltering:b,hoverFirstEmoji:y,setEmojiRef:f,setFilteredRef:s,focusEmoji:k,handleArrowNavigationFiltered:L,handleArrowNavigation:$}=se(),T=e.ref(null),n=e.ref(null),t=e.ref(null),o=["Recently used","People","Nature","Food","Activity","Travel","Objects","Symbols","Flags"],a=e.computed(()=>i.recentlyUsedEmojis.length?i.tabsetLabels.map(r=>({label:r,ref:e.ref(null)})):i.tabsetLabels.slice(1).map(r=>({label:r,ref:e.ref(null)}))),d=e.ref(a.value[0].label),h=e.computed(()=>i.recentlyUsedEmojis.length?o:o.slice(1)),S=e.ref([]),I=e.computed(()=>[...E.emojisGrouped[`People${i.skinTone}`],...E.emojisGrouped.Nature,...E.emojisGrouped.Food,...E.emojisGrouped[`Activity${i.skinTone}`],...E.emojisGrouped.Travel,...E.emojisGrouped[`Objects${i.skinTone}`],...E.emojisGrouped.Symbols,...E.emojisGrouped.Flags]),U=q(()=>{_.value=[],P()});e.watch(I,()=>{P()},{immediate:!0}),e.watch(()=>i.recentlyUsedEmojis,()=>{E.emojisGrouped["Recently used"]=i.recentlyUsedEmojis},{immediate:!0}),e.watch(()=>i.emojiFilter,()=>{Y(),i.emojiFilter?b.value=!0:(b.value=!1,F(null)),U()}),e.watch(()=>i.selectedTabset,r=>{K(r.tabId)},{deep:!0});function G(r,c=!1){y.value=c,u("highlighted-emoji",r)}function P(){const r=i.emojiFilter.toLowerCase();S.value=I.value.filter(c=>{const v=c.name.toLowerCase().includes(r),p=c.keywords.some(m=>m.toLowerCase().includes(r));return v||p}),e.nextTick(()=>{r&&G(S.value[0],!0)})}function q(r,c=300){let v;return(...p)=>{clearTimeout(v),v=setTimeout(()=>r(...p),c)}}function W(r){return`${V+r}.png`}function H(r){r.target.parentNode.style.display="none"}function K(r,c=!0){const p=a.value[r-1].ref.value[0];e.nextTick(()=>{const m=n.value,N=r==="1"?0:p.offsetTop-20;let R=!0,O=m.scrollTop;u("is-scrolling",!0),m.addEventListener("scroll",()=>{if(R){const D=m.scrollTop;(O<D&&D>=N||O>D&&D<=N)&&(R=!1,u("is-scrolling",!1)),O=D}}),m.scrollTop=N,c&&k(r-1,0)})}function Y(){const r=n.value;r.scrollTop=0}function z(){t.value=new IntersectionObserver(r=>{r.forEach(c=>{var m,N,R,O,D;const{target:v}=c,p=parseInt(v.dataset.index);c.isIntersecting&&v.offsetTop<=T.value.offsetTop+50?(d.value=((m=a.value[p-1])==null?void 0:m.label)??((N=a.value[0])==null?void 0:N.label),u("scroll-into-tab",p-1)):c.boundingClientRect.bottom<=((R=T.value)==null?void 0:R.getBoundingClientRect().bottom)?(u("scroll-into-tab",p),d.value=(O=a.value[p])==null?void 0:O.label):p===1&&(u("scroll-into-tab",p),d.value=(D=a.value[0])==null?void 0:D.label)})}),t.value.observe(T.value),Array.from(n.value.children).forEach((r,c)=>{t.value.observe(r),r.dataset.index=c})}const J=(r,c,v)=>{if(r.preventDefault(),Object.values(C).includes(r.key)){L(r.key,c);return}switch(r.key){case"Tab":u("focus-skin-selector");break;case"Enter":M(v);break}},Q=(r,c,v,p)=>{if(r.preventDefault(),Object.values(C).includes(r.key)){$(r.key,c,v);return}switch(r.key){case"Tab":r.shiftKey?k(c,0)&&c>0?K(c,!0):(K(1,!1),u("focus-search-input")):k(c+1,0)?K(c+1+1,!1):u("focus-skin-selector");break;case"Enter":M(p);break}};function M(r){u("selected-emoji",r)}function F(r){u("highlighted-emoji",r)}function X(){k(0,0)}function Z(){k(h.value.length-1,0)}return e.onMounted(()=>{z()}),e.onUnmounted(()=>{t.value.disconnect()}),g({focusEmojiSelector:X,focusLastEmoji:Z}),(r,c)=>(e.openBlock(),e.createElementBlock("div",re,[e.createElementVNode("div",{id:"d-emoji-picker-list",ref_key:"listRef",ref:n,class:"d-emoji-picker__list"},[l.emojiFilter?(e.openBlock(),e.createElementBlock("p",ie,e.toDisplayString(S.value.length>0?l.searchResultsLabel:l.searchNoResultsLabel),1)):(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"tabCategoryRef",ref:T,class:"d-emoji-picker__category d-emoji-picker__alignment"},[e.createElementVNode("p",null,e.toDisplayString(d.value),1)],512)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(v,p)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:p,ref_for:!0,ref:v.ref,class:"d-emoji-picker__alignment"},[p?(e.openBlock(),e.createElementBlock("p",ae,e.toDisplayString(v.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",ce,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(E.emojisGrouped)[h.value[p]+l.skinTone]?e.unref(E.emojisGrouped)[h.value[p]+l.skinTone]:e.unref(E.emojisGrouped)[h.value[p]],(m,N)=>(e.openBlock(),e.createElementBlock("button",{key:m.shortname,ref_for:!0,ref:R=>{R&&e.unref(f)(R,p,N)},type:"button","aria-label":m.name,onClick:R=>M(m),onFocusin:R=>F(m),onFocusout:c[0]||(c[0]=R=>F(null)),onMouseover:R=>F(m),onMouseleave:c[1]||(c[1]=R=>F(null)),onKeydown:R=>Q(R,p,N,m)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:m.name,"aria-label":m.name,title:m.name,src:W(m.unicode_character),onError:H},null,40,fe)],40,ue))),128))])])),[[e.vShow,!l.emojiFilter]])),128)),l.emojiFilter?(e.openBlock(),e.createElementBlock("div",de,[e.createElementVNode("div",me,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(S.value,(v,p)=>(e.openBlock(),e.createElementBlock("button",{key:v.shortname,ref_for:!0,ref:m=>{m&&e.unref(s)(m,p)},type:"button","aria-label":v.name,class:e.normalizeClass({"hover-emoji":p===0&&e.unref(y)}),onClick:m=>M(v),onFocusin:m=>F(v),onFocusout:c[2]||(c[2]=m=>F(null)),onMouseover:m=>G(v),onMouseleave:c[3]||(c[3]=m=>G(null)),onKeydown:m=>J(m,p,v)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:v.name,"aria-label":v.name,title:v.name,src:`${e.unref(V)+v.unicode_character}.png`},null,8,pe)],42,ve))),128))])])):e.createCommentVNode("",!0)],512)]))}},be={"data-qa":"skin-selector"},ke={class:"d-emoji-picker__skin-list"},ge=["onKeydown","onClick"],ye=["alt","aria-label","title","src"],Se={class:"d-emoji-picker__skin-selected"},Ee=["aria-label"],_e=["alt","aria-label","title","src"],je={__name:"emoji_skin_selector",props:{skinTone:{type:String,required:!0},isHovering:{type:Boolean,default:!1},skinSelectorButtonTooltipLabel:{type:String,required:!0}},emits:["skin-tone","focus-tabset","focus-last-emoji"],setup(l,{expose:g,emit:w}){const i=l,u=w,_=[{name:":wave_tone1:",unicode_output:"1f44b-1f3fb",skinTone:B.LIGHT,skinCode:"_tone1"},{name:":wave_tone2:",unicode_output:"1f44b-1f3fc",skinTone:B.MEDIUM_LIGHT,skinCode:"_tone2"},{name:":wave_tone3:",unicode_output:"1f44b-1f3fd",skinTone:B.MEDIUM,skinCode:"_tone3"},{name:":wave_tone4:",unicode_output:"1f44b-1f3fe",skinTone:B.MEDIUM_DARK,skinCode:"_tone4"},{name:":wave_tone5:",unicode_output:"1f44b-1f3ff",skinTone:B.DARK,skinCode:"_tone5"},{name:":wave:",unicode_output:"1f44b",skinTone:B.DEFAULT,skinCode:""}],b=e.ref(!1),y=e.ref(null),f=e.ref([]);e.watchEffect(()=>i.isHovering&&(b.value=!1));const s=e.computed(()=>_.find(o=>o.skinTone===i.skinTone)),k=e.ref(s.value);e.watchEffect(()=>s.value&&(k.value=s.value));function L(o){f.value.push(o)}function $(){y.value.focus()}function T(o){k.value=o,b.value=!1,u("skin-tone",o.skinTone),e.nextTick(()=>$())}const n=(o,a,d)=>{var h,S,I;o.preventDefault(),o.key==="ArrowLeft"&&(d===0&&((h=f.value[f.value.length-1])==null||h.focus()),(S=f.value[d-1])==null||S.focus()),o.key==="ArrowRight"&&((I=f.value[d+1])==null||I.focus()),o.key==="Enter"&&(a?T(a):t()),o.key==="Tab"&&(o.shiftKey?u("focus-last-emoji"):u("focus-tabset"))};function t(){b.value=!b.value,e.nextTick(()=>f.value[0].focus())}return g({focusSkinSelector:$}),(o,a)=>(e.openBlock(),e.createElementBlock("div",be,[e.withDirectives(e.createElementVNode("div",ke,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(_,(d,h)=>e.createElementVNode("button",{ref_for:!0,ref:S=>{S&&L(S)},key:d.name,class:e.normalizeClass({selected:k.value.skinCode===d.skinCode}),onKeydown:S=>n(S,d,h),onClick:S=>T(d)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:d.name,"aria-label":d.name,title:d.name,src:`${e.unref(V)+d.unicode_output}.png`},null,8,ye)],42,ge)),64))],512),[[e.vShow,b.value]]),e.withDirectives(e.createElementVNode("div",Se,[e.createVNode(e.unref(x.DtTooltip),{placement:"top-end"},{anchor:e.withCtx(()=>[e.createElementVNode("button",{ref_key:"skinSelectorRef",ref:y,"aria-label":l.skinSelectorButtonTooltipLabel,tabindex:"-1",onClick:t,onKeydown:a[0]||(a[0]=d=>n(d))},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:k.value.name,"aria-label":k.value.name,title:k.value.name,src:`${e.unref(V)+k.value.unicode_output}.png`},null,8,_e)],40,Ee)]),default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.skinSelectorButtonTooltipLabel)+" ",1)]),_:1})],512),[[e.vShow,!b.value]])]))}},Re={class:"d-emoji-picker__data"},we=["alt","aria-label","title","src"],Te={__name:"emoji_description",props:{emoji:{type:Object,default:null}},setup(l){return(g,w)=>{var i;return e.openBlock(),e.createElementBlock("div",Re,[l.emoji?(e.openBlock(),e.createElementBlock("img",{key:0,class:"d-icon d-icon--size-500",alt:l.emoji.name,"aria-label":l.emoji.name,title:l.emoji.name,src:`${e.unref(V)+l.emoji.unicode_character}.png`},null,8,we)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString((i=l.emoji)==null?void 0:i.name),1)])}}},Le={class:"d-emoji-picker"},$e={class:"d-emoji-picker--header"},Ie={class:"d-emoji-picker--body"},Ae={class:"d-emoji-picker--footer"},Ne={__name:"emoji_picker",props:{recentlyUsedEmojis:{type:Array,default:()=>[]},searchPlaceholderLabel:{type:String,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},tabSetLabels:{type:Array,required:!0},skinTone:{type:String,default:"Default"},skinSelectorButtonTooltipLabel:{type:String,required:!0}},emits:["selected-emoji","skin-tone","close"],setup(l,{emit:g}){const w=l,i=g,u=e.ref(""),_=e.ref(null),b=e.ref({}),y=e.ref(0),f=e.ref(!1),s=e.computed(()=>w.recentlyUsedEmojis.length>0);function k(n){u.value="",b.value=n,b.value={...b.value,tabId:n}}function L(n){y.value=n}function $(n){f.value=n}function T(n){_.value=n}return(n,t)=>(e.openBlock(),e.createElementBlock("div",Le,[e.createElementVNode("div",$e,[e.createVNode(ne,{ref:"tabsetRef","emoji-filter":u.value,"show-recently-used-tab":s.value,"scroll-into-tab":y.value,"tabset-labels":l.tabSetLabels,"is-scrolling":f.value,onFocusSearchInput:t[0]||(t[0]=o=>n.$refs.searchInputRef.focusSearchInput()),onFocusSkinSelector:t[1]||(t[1]=o=>n.$refs.skinSelectorRef.focusSkinSelector()),onSelectedTabset:k,onKeydown:t[2]||(t[2]=e.withKeys(o=>i("close"),["esc"]))},null,8,["emoji-filter","show-recently-used-tab","scroll-into-tab","tabset-labels","is-scrolling"])]),e.createElementVNode("div",Ie,[e.createVNode(oe,{ref:"searchInputRef",modelValue:u.value,"onUpdate:modelValue":t[3]||(t[3]=o=>u.value=o),"search-placeholder-label":l.searchPlaceholderLabel,onSelectFirstEmoji:t[4]||(t[4]=o=>i("selected-emoji",_.value)),onFocusTabset:t[5]||(t[5]=o=>n.$refs.tabsetRef.focusTabset()),onFocusEmojiSelector:t[6]||(t[6]=o=>n.$refs.emojiSelectorRef.focusEmojiSelector()),onKeydown:t[7]||(t[7]=e.withKeys(o=>i("close"),["esc"]))},null,8,["modelValue","search-placeholder-label"]),e.createVNode(he,{ref:"emojiSelectorRef","emoji-filter":u.value,"skin-tone":l.skinTone,"tabset-labels":l.tabSetLabels,"search-results-label":l.searchResultsLabel,"search-no-results-label":l.searchNoResultsLabel,"recently-used-emojis":l.recentlyUsedEmojis,"selected-tabset":b.value,onScrollIntoTab:L,onIsScrolling:$,onHighlightedEmoji:T,onSelectedEmoji:t[8]||(t[8]=o=>i("selected-emoji",o)),onFocusSkinSelector:t[9]||(t[9]=o=>n.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:t[10]||(t[10]=o=>n.$refs.searchInputRef.focusSearchInput()),onKeydown:t[11]||(t[11]=e.withKeys(o=>i("close"),["esc"]))},null,8,["emoji-filter","skin-tone","tabset-labels","search-results-label","search-no-results-label","recently-used-emojis","selected-tabset"])]),e.createElementVNode("div",Ae,[e.createVNode(Te,{emoji:_.value},null,8,["emoji"]),e.createVNode(je,{ref:"skinSelectorRef","is-hovering":!!_.value,"skin-selector-button-tooltip-label":l.skinSelectorButtonTooltipLabel,"skin-tone":l.skinTone,onSkinTone:t[12]||(t[12]=o=>i("skin-tone",o)),onFocusTabset:t[13]||(t[13]=o=>n.$refs.tabsetRef.focusTabset()),onFocusLastEmoji:t[14]||(t[14]=o=>n.$refs.emojiSelectorRef.focusLastEmoji()),onKeydown:t[15]||(t[15]=e.withKeys(o=>i("close"),["esc"]))},null,8,["is-hovering","skin-selector-button-tooltip-label","skin-tone"])])]))}};exports.ARROW_KEYS=C;exports.CDN_URL=V;exports.EMOJIS_PER_ROW=j;exports.EMOJI_PICKER_CATEGORIES=A;exports.EMOJI_PICKER_SKIN_TONE_MODIFIERS=B;exports._sfc_main=Ne;