@dialpad/dialtone-vue 3.96.0 → 3.96.2

package/dist/emoji_picker-gkXbSV3i.cjs

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

package/dist/emoji_text_wrapper-5mWcPQ4m.cjs

@@ -0,0 +1 @@
+"use strict";const i=require("./emoji-zMlz3b9J.cjs"),o=require("vue"),a={name:"DtEmojiTextWrapper",components:{DtEmoji:i.DtEmoji},inheritAttrs:!1,props:{elementType:{type:String,default:"div"},size:{type:String,default:"500",validator:s=>Object.keys(i.ICON_SIZE_MODIFIERS).includes(s)}},data(){return{loadingEmojiJson:!0}},async created(){this.loadingEmojiJson=!1},methods:{replaceDtEmojis(s,e){const t=new RegExp(`(${s.join("|")})`,"g");return e.split(t).map(n=>s.includes(n)?o.h(i.DtEmoji,{...this.$attrs,class:"d-mx4 d-d-inline-block",size:this.size,code:n}):n)},searchVNodes(s){var t;if(typeof s=="string")return this.searchCodes(s);if(typeof s.type=="symbol")return this.searchCodes(s.children);if((t=s.props)!=null&&t.innerHTML)return this.searchVNodes(s.props.innerHTML);const e=Array.isArray(s.children)?s.children:[s.children];return o.h(s.type,s.props,e.map(r=>this.searchVNodes(r)))},replaceVueComponentVNodeContent(s){},searchCodes(s){const e=i.findShortCodes(s),t=i.findEmojis(s),r=[...e,...t];return r.length===0?s:this.replaceDtEmojis(r,s)}},render(){const s=this.$slots.default?this.$slots.default():[];return o.h(this.elementType,{"data-qa":"emoji-text-wrapper",class:this.$attrs.class},this.loadingEmojiJson?s:s.map(e=>this.searchVNodes(e)))}};exports._sfc_main=a;

package/dist/emoji_text_wrapper-GCssca4o.js

@@ -0,0 +1,86 @@
+import { D as o, I as a, p, r as c } from "./emoji-64scMQZS.js";
+import { h as n } from "vue";
+const d = {
+  name: "DtEmojiTextWrapper",
+  components: {
+    DtEmoji: o
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Element type (tag name) to use for the wrapper.
+     */
+    elementType: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * The icon size to render the emojis at: 100 to 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (s) => Object.keys(a).includes(s)
+    }
+  },
+  data() {
+    return {
+      loadingEmojiJson: !0
+    };
+  },
+  async created() {
+    this.loadingEmojiJson = !1;
+  },
+  methods: {
+    /**
+     * Replaces the valid codes from the text content with a DtEmoji component.
+     * @returns {Array<VNode|string>}
+     */
+    replaceDtEmojis(s, e) {
+      const t = new RegExp(`(${s.join("|")})`, "g");
+      return e.split(t).map((i) => s.includes(i) ? n(o, { ...this.$attrs, class: "d-mx4 d-d-inline-block", size: this.size, code: i }) : i);
+    },
+    /**
+     * Recursively search the Vue virtual DOM to find text
+     * @param VNode
+     * @returns {VNode|*}
+     */
+    searchVNodes(s) {
+      var t;
+      if (typeof s == "string")
+        return this.searchCodes(s);
+      if (typeof s.type == "symbol")
+        return this.searchCodes(s.children);
+      if ((t = s.props) != null && t.innerHTML)
+        return this.searchVNodes(s.props.innerHTML);
+      const e = Array.isArray(s.children) ? s.children : [s.children];
+      return n(s.type, s.props, e.map((r) => this.searchVNodes(r)));
+    },
+    // TODO: Find a way to crawl vue components
+    replaceVueComponentVNodeContent(s) {
+    },
+    /**
+     * Find codes in text.
+     * @param textContent string
+     * @returns {Array<VNode|string>|string}
+     */
+    searchCodes(s) {
+      const e = p(s), t = c(s), r = [...e, ...t];
+      return r.length === 0 ? s : this.replaceDtEmojis(r, s);
+    }
+  },
+  render() {
+    const s = this.$slots.default ? this.$slots.default() : [];
+    return n(
+      this.elementType,
+      {
+        "data-qa": "emoji-text-wrapper",
+        class: this.$attrs.class
+      },
+      this.loadingEmojiJson ? s : s.map((e) => this.searchVNodes(e))
+    );
+  }
+};
+export {
+  d as _
+};