@dialpad/dialtone-vue/dist/emoji_picker-Cl-T4BXK.cjs

Vue component library for Dialpad's design system Dialtone

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