@dialpad/dialtone/dist/vue3/lib/emoji-picker/emoji-picker.cjs

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("@dialpad/dialtone-icons/vue3"),x=require("../input/input.cjs"),J=require("../button/button.cjs"),ee=require("../../common/utils/index.cjs"),te=require("../tab/tab-group.cjs"),oe=require("../tab/tab.cjs"),O=require("@dialpad/dialtone-emojis"),E=require("./emoji-picker-constants.cjs"),le=require("../tooltip/tooltip.cjs"),ne=require("../../localization/index.cjs"),se={class:"d-emoji-picker__search d-emoji-picker__alignment"},ie={__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:S,emit:I}){const n=I,d=e.ref(null);function L(){n("update:modelValue",""),R()}function R(){d.value.focus()}return e.onMounted(()=>{R()}),S({focusSearchInput:R}),(y,_)=>(e.openBlock(),e.createElementBlock("div",se,[e.createVNode(e.unref(x.default),{id:"searchInput",ref_key:"searchInput",ref:d,placeholder:l.searchPlaceholderLabel,"model-value":l.modelValue,"onUpdate:modelValue":_[0]||(_[0]=a=>y.$emit("update:modelValue",a)),onKeydown:[_[1]||(_[1]=e.withKeys(a=>y.$emit("focus-tabset"),["up"])),_[2]||(_[2]=e.withKeys(e.withModifiers(a=>y.$emit("focus-emoji-selector"),["prevent"]),["down"])),_[3]||(_[3]=e.withKeys(a=>y.$emit("select-first-emoji"),["enter"]))]},e.createSlots({leftIcon:e.withCtx(()=>[e.createVNode(e.unref(w.DtIconSearch),{size:"200"})]),_:2},[l.modelValue.length>0?{name:"rightIcon",fn:e.withCtx(()=>[e.createVNode(e.unref(J.default),{importance:"clear",size:"xs",class:"d-emoji-picker__search-x-button",circle:"",kind:"muted",onClick:L},{icon:e.withCtx(()=>[e.createVNode(e.unref(w.DtIconClose),{size:"200"})]),_:1})]),key:"0"}:void 0]),1032,["placeholder","model-value"])]))}},re={class:"d-emoji-picker__tabset"},ae={__name:"emoji_tabset",props:{showRecentlyUsedTab:{type:Boolean,default:!1},showCustomEmojisTab:{type:Boolean,default:!1},scrollIntoTab:{type:Number,required:!0},emojiFilter:{type:String,default:""},tabSetLabels:{type:Array,required:!0}},emits:["selected-tabset","focus-search-input","focus-skin-selector"],setup(l,{expose:S,emit:I}){const n=l,d=I,L=[{label:n.tabSetLabels[0],icon:w.DtIconClock},{label:n.tabSetLabels[1],icon:w.DtIconSatisfied},{label:n.tabSetLabels[2],icon:w.DtIconLivingThing},{label:n.tabSetLabels[3],icon:w.DtIconFood},{label:n.tabSetLabels[4],icon:w.DtIconObject},{label:n.tabSetLabels[5],icon:w.DtIconTransportation},{label:n.tabSetLabels[6],icon:w.DtIconLightbulb},{label:n.tabSetLabels[7],icon:w.DtIconHeart},{label:n.tabSetLabels[8],icon:w.DtIconFlag},{label:n.tabSetLabels[9],icon:w.DtIconTiktok}],R=e.computed(()=>{const o=n.showRecentlyUsedTab?L:L.slice(1);return n.showCustomEmojisTab||o.pop(),o.map((t,i)=>({...t,id:(i+1).toString(),panelId:(i+1).toString()}))}),y=e.computed(()=>n.emojiFilter.length>0),_=e.ref("1"),a=e.ref([]);e.watch(()=>n.scrollIntoTab,()=>{y.value||(_.value=(n.scrollIntoTab+1).toString())}),e.watch(y,()=>{y.value&&(_.value=null)});function m(o){const t=parseInt(o);_.value=o,d("selected-tabset",t)}function A(o){a.value.push(ee.returnFirstEl(o.$el))}function B(){a.value[0].focus()}function j(o,t){o.key==="Enter"&&(m(t),a.value[t-1].blur()),o.key==="Tab"&&(o.preventDefault(),o.shiftKey?d("focus-skin-selector"):d("focus-search-input")),o.key==="ArrowDown"&&d("focus-search-input")}return S({focusTabset:B}),(o,t)=>(e.openBlock(),e.createElementBlock("div",re,[e.createVNode(e.unref(te.default),{selected:_.value,size:"sm","tab-list-class":"d-emoji-picker__tabset-list"},{tabs:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(R.value,(i,v)=>(e.openBlock(),e.createBlock(e.unref(oe.default),{id:i.id,key:i.id,ref_for:!0,ref:f=>{f&&A(f)},label:i.label,"panel-id":i.panelId,tabindex:v+1,"aria-controls":"d-emoji-picker-list",onKeydown:f=>j(f,i.id),onClickCapture:e.withModifiers(f=>m(i.id),["stop"])},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.icon),{size:"400"}))]),_:2},1032,["id","label","panel-id","tabindex","onKeydown","onClickCapture"]))),128))]),_:1},8,["selected"])]))}};function ce(){const l=e.ref([]),S=e.ref([]),I=e.ref(!1),n=e.ref(!0);function d(o,t){a(o,t-1)||(l.value[o-1]?a(o-1,l.value[o-1].length-1):a(l.value.length-1,l.value[l.value.length-1].length-1))}function L(o,t){a(o,t+1)||a(o+1,0)||a(0,0)}function R(o,t){a(0,t-1)||a(0,S.value.length-1)}function y(o,t){a(0,t+1)||a(0,0)}function _(o,t,i){I.value?o==="left"?R(t,i):o==="right"&&y(t,i):o==="left"?d(t,i):o==="right"&&L(t,i)}function a(o,t){var v,f,g;const i=I.value?(v=S.value)==null?void 0:v[t]:(g=(f=l.value)==null?void 0:f[o])==null?void 0:g[t];return i?(i.focus(),!0):!1}function m(o,t,i){l.value[t]||(l.value[t]=[]),l.value[t][i]=o}function A(o,t){S.value[t]=o}function B(o,t){var i;if(n.value=!1,o===E.ARROW_KEYS.ARROW_UP){const v=t%E.EMOJIS_PER_ROW;if(!a(0,t-E.EMOJIS_PER_ROW)){const f=S.value.length-S.value.length%E.EMOJIS_PER_ROW+v;a(0,f),a(0,f)||a(0,S.value.length-1)}}if(o===E.ARROW_KEYS.ARROW_DOWN&&!a(0,t+E.EMOJIS_PER_ROW)){const v=t%E.EMOJIS_PER_ROW;(i=S.value)!=null&&i[t+(E.EMOJIS_PER_ROW-v)]?a(0,S.value.length-1):a(0,v)}o===E.ARROW_KEYS.ARROW_LEFT&&_("left",0,t),o===E.ARROW_KEYS.ARROW_RIGHT&&_("right",0,t)}function j(o,t,i){var v,f;if(o==="ArrowUp"){const g=i%E.EMOJIS_PER_ROW;if(t===0){const c=E.EMOJIS_PER_ROW-l.value[l.value.length-1].length%E.EMOJIS_PER_ROW,r=l.value[l.value.length-1].length+c-(E.EMOJIS_PER_ROW-g);a(l.value.length-1,r)||a(l.value.length-1,l.value[l.value.length-1].length-1);return}if(!a(t,i-E.EMOJIS_PER_ROW)){const c=t-1<0?0:t-1,r=l.value[c].length,k=r-r%E.EMOJIS_PER_ROW+g;a(c,k)||a(t-1,l.value[t-1].length-1)}}if(o==="ArrowDown"&&!a(t,i+E.EMOJIS_PER_ROW)){const g=i%E.EMOJIS_PER_ROW;(f=(v=l.value)==null?void 0:v[t])!=null&&f[i+(E.EMOJIS_PER_ROW-g)]?a(t,l.value[t].length-1):a(t+1,g)||a(0,g)||a(0,l.value[0].length-1)}o==="ArrowLeft"&&_("left",t,i),o==="ArrowRight"&&_("right",t,i)}return{emojiFilteredRefs:S,isFiltering:I,hoverFirstEmoji:n,setEmojiRef:m,setFilteredRef:A,focusEmoji:a,handleArrowNavigationFiltered:B,handleArrowNavigation:j}}const ue={class:"d-emoji-picker__selector"},fe={key:0,class:"d-emoji-picker__search-label d-emoji-picker__alignment"},de={key:0},me={class:"d-emoji-picker__tab"},Ee=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],_e=["alt","aria-label","title","src"],ve={key:2,class:"d-emoji-picker__alignment"},be={class:"d-emoji-picker__tab","data-qa":"filtered-emojis"},pe=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],he=["alt","aria-label","title","src"],ke={__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:()=>[]},customEmojis:{type:Array,default:()=>[]}},emits:["highlighted-emoji","selected-emoji","scroll-into-tab","scroll-bottom-reached","focus-skin-selector","focus-search-input"],setup(l,{expose:S,emit:I}){const n=l,d=I,{emojiFilteredRefs:L,isFiltering:R,hoverFirstEmoji:y,setEmojiRef:_,setFilteredRef:a,focusEmoji:m,handleArrowNavigationFiltered:A,handleArrowNavigation:B}=ce(),j=e.ref(null),o=e.ref(null),t=e.ref(null),i=["Recently used","People","Nature","Food","Activity","Travel","Objects","Symbols","Flags","Custom"],v=e.computed(()=>{let s=n.tabsetLabels.map(u=>({label:u,ref:e.ref(null)}));return n.recentlyUsedEmojis&&!n.recentlyUsedEmojis.length&&(s=n.tabsetLabels.slice(1).map(u=>({label:u,ref:e.ref(null)}))),n.customEmojis&&!n.customEmojis.length&&s.pop(),s}),f=e.ref(v.value[0].label),g=e.computed(()=>{const s=n.recentlyUsedEmojis.length?i.slice():i.slice(1);return n.customEmojis&&!n.customEmojis.length&&s.pop(),s}),c=e.ref([]),r=e.computed(()=>[...O.emojisGrouped[`People${n.skinTone}`],...O.emojisGrouped.Nature,...O.emojisGrouped.Food,...O.emojisGrouped[`Activity${n.skinTone}`],...O.emojisGrouped.Travel,...O.emojisGrouped[`Objects${n.skinTone}`],...O.emojisGrouped.Symbols,...O.emojisGrouped.Flags]),k=U(()=>{L.value=[],F()}),M=()=>{const s=o.value;s.scrollTop+s.clientHeight>=s.scrollHeight&&d("scroll-bottom-reached")};e.watch(r,()=>{F()},{immediate:!0}),e.watch(()=>n.recentlyUsedEmojis,()=>{O.emojisGrouped["Recently used"]=n.recentlyUsedEmojis},{immediate:!0}),e.watch(()=>n.customEmojis,()=>{O.emojisGrouped.Custom=n.customEmojis},{immediate:!0}),e.watch(()=>n.emojiFilter,()=>{G(),n.emojiFilter?R.value=!0:(R.value=!1,C(null)),k()}),e.watch(()=>n.selectedTabset,s=>{$(s.tabId)},{deep:!0});function K(s,u=!1){y.value=u,d("highlighted-emoji",s)}function F(){const s=n.emojiFilter.toLowerCase();c.value=r.value.filter(u=>{const p=u.name.toLowerCase().includes(s),h=u.keywords.some(b=>b.toLowerCase().includes(s));return p||h}),e.nextTick(()=>{s&&K(c.value[0],!0)})}function U(s,u=300){let p;return(...h)=>{clearTimeout(p),p=setTimeout(()=>s(...h),u)}}function W(s){return s.date_added?s.image:E.CDN_URL+s.unicode_character+".png"}function q(s){s.target.parentNode.style.display="none"}function $(s,u=!0){const h=v.value[s-1].ref.value[0];e.nextTick(()=>{const b=o.value,N=s===1?0:h.offsetTop-15;b.scrollTop=N,u&&m(s-1,0)})}function G(){const s=o.value;s.scrollTop=0}function z(){o.value.addEventListener("scroll",M)}function H(){t.value=new IntersectionObserver(async s=>{s.forEach(u=>{var b,N,T,P,V;const{target:p}=u,h=parseInt(p.dataset.index);u.isIntersecting&&p.offsetTop<=j.value.offsetTop+50?(f.value=((b=v.value[h-1])==null?void 0:b.label)??((N=v.value[0])==null?void 0:N.label),d("scroll-into-tab",h-1)):u.boundingClientRect.bottom<=((T=j.value)==null?void 0:T.getBoundingClientRect().bottom)?(d("scroll-into-tab",h),f.value=(P=v.value[h])==null?void 0:P.label):h===1&&(d("scroll-into-tab",h),f.value=(V=v.value[0])==null?void 0:V.label)})}),t.value.observe(j.value),Array.from(o.value.children).forEach((s,u)=>{t.value.observe(s),s.dataset.index=u})}const Y=(s,u,p)=>{if(s.preventDefault(),Object.values(E.ARROW_KEYS).includes(s.key)){A(s.key,u);return}switch(s.key){case"Tab":d("focus-skin-selector");break;case"Enter":D(p,s);break}},Q=(s,u,p,h)=>{if(s.preventDefault(),Object.values(E.ARROW_KEYS).includes(s.key)){B(s.key,u,p);return}switch(s.key){case"Tab":s.shiftKey?m(u,0)&&u>0?$(u,!0):($(1,!1),d("focus-search-input")):m(u+1,0)?$(u+1+1,!1):d("focus-skin-selector");break;case"Enter":D(h,s);break}};function D(s,u){d("selected-emoji",{...s,shift_key:u.shiftKey})}function C(s){d("highlighted-emoji",s)}function X(){m(0,0)}function Z(){$(g.value.length,!0)}return e.onMounted(()=>{H(),z()}),e.onBeforeUnmount(()=>{t.value.disconnect(),o.value.removeEventListener("scroll",M)}),S({focusEmojiSelector:X,focusLastEmoji:Z}),(s,u)=>(e.openBlock(),e.createElementBlock("div",ue,[e.createElementVNode("div",{id:"d-emoji-picker-list",ref_key:"listRef",ref:o,class:"d-emoji-picker__list"},[l.emojiFilter?(e.openBlock(),e.createElementBlock("p",fe,e.toDisplayString(c.value.length>0?l.searchResultsLabel:l.searchNoResultsLabel),1)):(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"tabCategoryRef",ref:j,class:"d-emoji-picker__category d-emoji-picker__alignment"},[e.createElementVNode("p",null,e.toDisplayString(f.value),1)],512)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v.value,(p,h)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:h,ref_for:!0,ref:p.ref,class:"d-emoji-picker__alignment"},[h?(e.openBlock(),e.createElementBlock("p",de,e.toDisplayString(p.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",me,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(O.emojisGrouped)[g.value[h]+l.skinTone]?e.unref(O.emojisGrouped)[g.value[h]+l.skinTone]:e.unref(O.emojisGrouped)[g.value[h]],(b,N)=>(e.openBlock(),e.createElementBlock("button",{key:b.shortname,ref_for:!0,ref:T=>{T&&e.unref(_)(T,h,N)},type:"button","aria-label":b.name,onClick:T=>D(b,T),onFocusin:T=>C(b),onFocusout:u[0]||(u[0]=T=>C(null)),onMouseover:T=>C(b),onMouseleave:u[1]||(u[1]=T=>C(null)),onKeydown:T=>Q(T,h,N,b)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:b.name,"aria-label":b.name,title:b.name,src:W(b),onError:q},null,40,_e)],40,Ee))),128))])])),[[e.vShow,!l.emojiFilter]])),128)),l.emojiFilter?(e.openBlock(),e.createElementBlock("div",ve,[e.createElementVNode("div",be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,(p,h)=>(e.openBlock(),e.createElementBlock("button",{key:p.shortname,ref_for:!0,ref:b=>{b&&e.unref(a)(b,h)},type:"button","aria-label":p.name,class:e.normalizeClass({"hover-emoji":h===0&&e.unref(y)}),onClick:b=>D(p,b),onFocusin:b=>C(p),onFocusout:u[2]||(u[2]=b=>C(null)),onMouseover:b=>K(p),onMouseleave:u[3]||(u[3]=b=>K(null)),onKeydown:b=>Y(b,h,p)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:p.name,"aria-label":p.name,title:p.name,src:`${e.unref(E.CDN_URL)+p.unicode_character}.png`},null,8,he)],42,pe))),128))])])):e.createCommentVNode("",!0)],512)]))}},Se={"data-qa":"skin-selector"},Ie={class:"d-emoji-picker__skin-list"},Re=["onKeydown","onClick"],ge=["alt","aria-label","title","src"],ye={class:"d-emoji-picker__skin-selected"},Le=["aria-label"],je=["alt","aria-label","title","src"],Te={__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:S,emit:I}){const n=l,d=I,L=[{name:":wave_tone1:",unicode_output:"1f44b-1f3fb",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,skinCode:"_tone1"},{name:":wave_tone2:",unicode_output:"1f44b-1f3fc",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,skinCode:"_tone2"},{name:":wave_tone3:",unicode_output:"1f44b-1f3fd",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,skinCode:"_tone3"},{name:":wave_tone4:",unicode_output:"1f44b-1f3fe",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,skinCode:"_tone4"},{name:":wave_tone5:",unicode_output:"1f44b-1f3ff",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,skinCode:"_tone5"},{name:":wave:",unicode_output:"1f44b",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,skinCode:""}],R=e.ref(!1),y=e.ref(null),_=e.ref([]);e.watchEffect(()=>n.isHovering&&(R.value=!1));const a=e.computed(()=>L.find(i=>i.skinTone===n.skinTone)),m=e.ref(a.value);e.watchEffect(()=>a.value&&(m.value=a.value));function A(i){_.value.push(i)}function B(){y.value.focus()}function j(i){m.value=i,R.value=!1,d("skin-tone",i.skinTone),e.nextTick(()=>B())}const o=(i,v,f)=>{var g,c,r;i.preventDefault(),i.key==="ArrowLeft"&&(f===0&&((g=_.value[_.value.length-1])==null||g.focus()),(c=_.value[f-1])==null||c.focus()),i.key==="ArrowRight"&&((r=_.value[f+1])==null||r.focus()),i.key==="Enter"&&(v?j(v):t()),i.key==="Tab"&&(i.shiftKey?d("focus-last-emoji"):d("focus-tabset"))};function t(){R.value=!R.value,e.nextTick(()=>_.value[0].focus())}return S({focusSkinSelector:B}),(i,v)=>(e.openBlock(),e.createElementBlock("div",Se,[e.withDirectives(e.createElementVNode("div",Ie,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(L,(f,g)=>e.createElementVNode("button",{ref_for:!0,ref:c=>{c&&A(c)},key:f.name,class:e.normalizeClass({selected:m.value.skinCode===f.skinCode}),onKeydown:c=>o(c,f,g),onClick:c=>j(f)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:f.name,"aria-label":f.name,title:f.name,src:`${e.unref(E.CDN_URL)+f.unicode_output}.png`},null,8,ge)],42,Re)),64))],512),[[e.vShow,R.value]]),e.withDirectives(e.createElementVNode("div",ye,[e.createVNode(e.unref(le.default),{placement:"top-end"},{anchor:e.withCtx(()=>[e.createElementVNode("button",{ref_key:"skinSelectorRef",ref:y,"aria-label":l.skinSelectorButtonTooltipLabel,tabindex:"-1",onClick:t,onKeydown:v[0]||(v[0]=f=>o(f))},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:m.value.name,"aria-label":m.value.name,title:m.value.name,src:`${e.unref(E.CDN_URL)+m.value.unicode_output}.png`},null,8,je)],40,Le)]),default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.skinSelectorButtonTooltipLabel)+" ",1)]),_:1})],512),[[e.vShow,!R.value]])]))}},Oe={class:"d-emoji-picker__data"},we=["alt","aria-label","title","src"],Ae={__name:"emoji_description",props:{emoji:{type:Object,default:null}},setup(l){function S(I){return I.date_added?I.image:`${E.CDN_URL+I.unicode_character}.png`}return(I,n)=>{var d;return e.openBlock(),e.createElementBlock("div",Oe,[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:S(l.emoji)},null,8,we)):e.createCommentVNode("",!0),e.createElementVNode("div",null,e.toDisplayString((d=l.emoji)==null?void 0:d.name),1)])}}},Be={class:"d-emoji-picker"},Ce={class:"d-emoji-picker--header"},Ne={class:"d-emoji-picker--body"},$e={class:"d-emoji-picker--footer"},De={__name:"emoji_picker",props:{recentlyUsedEmojis:{type:Array,default:()=>[]},customEmojis:{type:Array},skinTone:{type:String,default:"Default"},searchQuery:{type:String,default:""},showSearch:{type:Boolean,default:!0}},emits:["selected-emoji","scroll-bottom-reached","skin-tone","close","add-emoji"],setup(l,{emit:S}){const I=l,n=S,d=e.ref(I.searchQuery.value),L=e.ref(null),R=e.ref({}),y=e.ref(0),_=e.computed(()=>{var c;return((c=I.recentlyUsedEmojis)==null?void 0:c.length)>0}),a=e.computed(()=>{var c;return((c=I.customEmojis)==null?void 0:c.length)>0}),m=new ne.DialtoneLocalization,A=[m.$t("DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL")],B=m.$t("DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL"),j=m.$t("DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL"),o=m.$t("DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL"),t=m.$t("DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL"),i=m.$t("DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL");e.watch(()=>I.searchQuery,c=>{d.value=c});function v(c){d.value="",R.value={...R.value,tabId:c}}function f(c){y.value=c}function g(c){L.value=c}return(c,r)=>(e.openBlock(),e.createElementBlock("div",Be,[e.createElementVNode("div",Ce,[e.createVNode(ae,{ref:"tabsetRef","emoji-filter":d.value,"show-custom-emojis-tab":a.value,"show-recently-used-tab":_.value,"scroll-into-tab":y.value,"tab-set-labels":A,onFocusSkinSelector:r[0]||(r[0]=k=>c.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:r[1]||(r[1]=k=>l.showSearch?c.$refs.searchInputRef.focusSearchInput():c.$refs.emojiSelectorRef.focusEmojiSelector()),onSelectedTabset:v,onKeydown:r[2]||(r[2]=e.withKeys(k=>n("close"),["esc"]))},null,8,["emoji-filter","show-custom-emojis-tab","show-recently-used-tab","scroll-into-tab"])]),e.createElementVNode("div",Ne,[l.showSearch?(e.openBlock(),e.createBlock(ie,{key:0,ref:"searchInputRef",modelValue:d.value,"onUpdate:modelValue":r[3]||(r[3]=k=>d.value=k),"search-placeholder-label":e.unref(B),onSelectFirstEmoji:r[4]||(r[4]=k=>n("selected-emoji",L.value)),onFocusTabset:r[5]||(r[5]=k=>c.$refs.tabsetRef.focusTabset()),onFocusEmojiSelector:r[6]||(r[6]=k=>c.$refs.emojiSelectorRef.focusEmojiSelector()),onKeydown:r[7]||(r[7]=e.withKeys(k=>n("close"),["esc"]))},null,8,["modelValue","search-placeholder-label"])):e.createCommentVNode("",!0),e.createVNode(ke,{ref:"emojiSelectorRef","emoji-filter":d.value,"skin-tone":l.skinTone,"tabset-labels":A,"search-results-label":e.unref(j),"search-no-results-label":e.unref(o),"recently-used-emojis":l.recentlyUsedEmojis,"custom-emojis":l.customEmojis,"selected-tabset":R.value,onScrollIntoTab:f,onHighlightedEmoji:g,onSelectedEmoji:r[8]||(r[8]=k=>n("selected-emoji",k)),onFocusSkinSelector:r[9]||(r[9]=k=>c.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:r[10]||(r[10]=k=>l.showSearch?c.$refs.searchInputRef.focusSearchInput():c.$refs.tabsetRef.focusTabset()),onKeydown:r[11]||(r[11]=e.withKeys(k=>n("close"),["esc"])),onScrollBottomReached:r[12]||(r[12]=k=>n("scroll-bottom-reached"))},null,8,["emoji-filter","skin-tone","search-results-label","search-no-results-label","recently-used-emojis","custom-emojis","selected-tabset"])]),e.createElementVNode("div",$e,[a.value&&!L.value?(e.openBlock(),e.createBlock(e.unref(J.default),{key:0,importance:"outlined","aria-label":e.unref(i),class:"d-emoji-picker__add-emoji",onClick:r[13]||(r[13]=k=>n("add-emoji"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(i)),1)]),_:1},8,["aria-label"])):e.createCommentVNode("",!0),e.createVNode(Ae,{emoji:L.value},null,8,["emoji"]),e.createVNode(Te,{ref:"skinSelectorRef","is-hovering":!!L.value,"skin-selector-button-tooltip-label":e.unref(t),"skin-tone":l.skinTone,onSkinTone:r[14]||(r[14]=k=>n("skin-tone",k)),onFocusTabset:r[15]||(r[15]=k=>c.$refs.tabsetRef.focusTabset()),onFocusLastEmoji:r[16]||(r[16]=k=>c.$refs.emojiSelectorRef.focusLastEmoji()),onKeydown:r[17]||(r[17]=e.withKeys(k=>n("close"),["esc"]))},null,8,["is-hovering","skin-selector-button-tooltip-label","skin-tone"])])]))}};exports.default=De;
//# sourceMappingURL=emoji-picker.cjs.map