@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
3 lines (2 loc) • 25 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@dialpad/dialtone-icons/vue2"),h=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),d=require("../tab/tab.cjs"),_=require("../tab/tab-group.cjs"),m=require("../button/button.cjs"),b=require("../input/input.cjs"),E=require("@dialpad/dialtone-emojis"),n=require("./emoji-picker-constants.cjs"),p=require("../tooltip/tooltip.cjs"),j=require("../../localization/index.cjs"),R={name:"EmojiTabset",components:{DtTabGroup:_.default,DtTab:d.default},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}},data(){return{selectedTab:"1",tabsetRef:[],TABS_DATA:[{label:this.tabSetLabels[0],icon:c.DtIconClock},{label:this.tabSetLabels[1],icon:c.DtIconSatisfied},{label:this.tabSetLabels[2],icon:c.DtIconLivingThing},{label:this.tabSetLabels[3],icon:c.DtIconFood},{label:this.tabSetLabels[4],icon:c.DtIconObject},{label:this.tabSetLabels[5],icon:c.DtIconTransportation},{label:this.tabSetLabels[6],icon:c.DtIconLightbulb},{label:this.tabSetLabels[7],icon:c.DtIconHeart},{label:this.tabSetLabels[8],icon:c.DtIconFlag},{label:this.tabSetLabels[9],icon:c.DtIconTiktok}]}},computed:{tabs(){const t=this.showRecentlyUsedTab?this.TABS_DATA:this.TABS_DATA.slice(1);return this.showCustomEmojisTab||t.pop(),t.map((e,i)=>({...e,id:(i+1).toString(),panelId:(i+1).toString()}))},isSearching(){return this.emojiFilter.length>0}},watch:{scrollIntoTab:function(t){this.isSearching||(this.selectedTab=(t+1).toString())},isSearching:function(t){t&&(this.selectedTab=null)}},mounted(){this.$nextTick(()=>{this.setTabsetRef()})},methods:{selectTabset(t){const e=parseInt(t);this.selectedTab=t,this.$emit("selected-tabset",e)},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 k=function(){var e=this,i=e._self._c;return i("div",{staticClass:"d-emoji-picker__tabset"},[i("dt-tab-group",{attrs:{selected:e.selectedTab,size:"sm","tab-list-class":"d-emoji-picker__tabset-list"},scopedSlots:e._u([{key:"tabs",fn:function(){return e._l(e.tabs,function(s,o){return i("dt-tab",{key:s.id,ref:`tabsetRef-${o}`,refInFor:!0,attrs:{id:s.id,label:s.label,"panel-id":s.panelId,tabindex:o+1,"aria-controls":"d-emoji-picker-list"},on:{keydown:function(r){return e.handleKeyDown(r,s.id)},"!click":function(r){return r.stopPropagation(),e.selectTabset(s.id)}}},[i(s.icon,{tag:"component",attrs:{size:"400"}})],1)})},proxy:!0}])})],1)},S=[],g=h.n(R,k,S);const y=g.exports,L={name:"EmojiSearch",components:{DtInput:b.default,DtIconSearch:c.DtIconSearch,DtIconClose:c.DtIconClose,DtButton:m.default},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-search",{attrs:{size:"200"}})]},proxy:!0},e.modelValue.length>0?{key:"rightIcon",fn:function(){return[i("dt-button",{staticClass:"d-emoji-picker__search-x-button",attrs:{importance:"clear",size:"xs",circle:"",kind:"muted"},on:{click:e.clearSearch},scopedSlots:e._u([{key:"icon",fn:function(){return[i("dt-icon-close",{attrs:{size:"200"}})]},proxy:!0}],null,!1,4156074325)})]},proxy:!0}:null],null,!0)})],1)},I=[],$=h.n(L,T,I);const O=$.exports,v={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:()=>[]},customEmojis:{type:Array,default:()=>[]}},data(){return{tabLabelsRefs:[],emojiRefs:[],emojiFilteredRefs:[],isFiltering:!1,hoverFirstEmoji:!0,fixedLabel:"",filteredEmojis:[],TABS_DATA:["Recently used","People","Nature","Food","Activity","Travel","Objects","Symbols","Flags","Custom"],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 E.emojisGrouped},CDN_URL(){return n.CDN_URL},tabLabels(){let t=this.tabSetLabels.map(e=>({label:e}));return this.recentlyUsedEmojis.length||(t=this.tabSetLabels.slice(1).map(e=>({label:e}))),this.customEmojis.length||t.pop(),t},tabs(){const t=this.recentlyUsedEmojis.length?this.TABS_DATA.slice():this.TABS_DATA.slice(1);return this.customEmojis.length||t.pop(),t}},watch:{currentEmojis:{handler(){this.searchByNameAndKeywords()},immediate:!0},recentlyUsedEmojis:{handler(t){this.emojis["Recently used"]=t},immediate:!0},customEmojis:{handler(t){this.emojis.Custom=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(),this.setBottomScrollListener()})},beforeDestroy(){this.tabLabelObserver&&this.tabLabelObserver.disconnect(),this.$refs.listRef&&this.handleScroll&&this.$refs.listRef.removeEventListener("scroll",this.handleScroll)},methods:{setupTabLabelRefs(){var t;(t=this.tabSetLabels)==null||t.forEach((e,i)=>{const s=`tabLabelRef-${i}`;this.$refs[s]&&this.$set(this.tabLabelsRefs,i,{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(o){return o.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 o=arguments.length;for(;o--;)s[o]=arguments[o];clearTimeout(i),i=setTimeout(function(){t.apply(void 0,s)},e)}},getImgSrc:function(t){return t.date_added?t.image:this.CDN_URL+t.unicode_character+".png"},handleImageError:function(t){t.target.parentNode.style.display="none"},scrollToTab:function(t,e){const i=this;e===void 0&&(e=!0);const s=i.tabLabelsRefs[t-1].ref[0];i.$nextTick(function(){const o=i.$refs.listRef,r=t===1?0:s.offsetTop-15;o.scrollTop=r,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 o,r;if(t.preventDefault(),t.key==="ArrowUp"){const l=i%n.EMOJIS_PER_ROW;if(e===0){const a=n.EMOJIS_PER_ROW-this.emojiRefs[this.emojiRefs.length-1].length%n.EMOJIS_PER_ROW,f=this.emojiRefs[this.emojiRefs.length-1].length+a-(n.EMOJIS_PER_ROW-l);this.focusEmoji(this.emojiRefs.length-1,f)||this.focusEmoji(this.emojiRefs.length-1,this.emojiRefs[this.emojiRefs.length-1].length-1);return}if(!this.focusEmoji(e,i-n.EMOJIS_PER_ROW)){const a=e-1<0?0:e-1,f=this.emojiRefs[a].length,u=f-f%n.EMOJIS_PER_ROW+l;this.focusEmoji(a,u)||this.focusEmoji(e-1,this.emojiRefs[e-1].length-1)}}if(t.key==="ArrowDown"&&!this.focusEmoji(e,i+n.EMOJIS_PER_ROW)){const l=i%n.EMOJIS_PER_ROW;(r=(o=this.emojiRefs)==null?void 0:o[e])!=null&&r[i+(n.EMOJIS_PER_ROW-l)]?this.focusEmoji(e,this.emojiRefs[e].length-1):this.focusEmoji(e+1,l)||this.focusEmoji(0,l)||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"&&!t.shiftKey&&(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.handleEmojiSelection(s,t)},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)},handleEmojiSelection(t,e){this.$emit("selected-emoji",{...t,shift_key:e.shiftKey})},handleKeyDownFilteredEmojis(t,e,i){var s;if(t.preventDefault(),this.hoverFirstEmoji=!1,t.key==="ArrowUp"){const o=e%n.EMOJIS_PER_ROW;if(!this.focusEmoji(0,e-n.EMOJIS_PER_ROW)){const r=this.emojiFilteredRefs.length-this.emojiFilteredRefs.length%n.EMOJIS_PER_ROW+o;this.focusEmoji(0,r),this.focusEmoji(0,r)||this.focusEmoji(0,this.emojiFilteredRefs.length-1)}}if(t.key==="ArrowDown"&&!this.focusEmoji(0,e+n.EMOJIS_PER_ROW)){const o=e%n.EMOJIS_PER_ROW;(s=this.emojiFilteredRefs)!=null&&s[e+(n.EMOJIS_PER_ROW-o)]?this.focusEmoji(0,this.emojiFilteredRefs.length-1):this.focusEmoji(0,o)}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.handleEmojiSelection(i,t)},setBottomScrollListener(){this.handleScroll=()=>{const t=this.$refs.listRef;t.scrollTop+t.clientHeight>=t.scrollHeight&&this.$emit("scroll-bottom-reached")},this.$refs.listRef.addEventListener("scroll",this.handleScroll)},setTabLabelObserver(){this.tabLabelObserver=new IntersectionObserver(t=>{t.forEach(e=>{var o,r,l,a,f,u;const{target:i}=e,s=parseInt(i.dataset.index);e.isIntersecting&&i.offsetTop<=((o=this.$refs.tabCategoryRef)==null?void 0:o.offsetTop)+50?(this.fixedLabel=((r=this.tabLabels[s-1])==null?void 0:r.label)??((l=this.tabLabels[0])==null?void 0:l.label),this.$emit("scroll-into-tab",s-1)):e.boundingClientRect.bottom<=((a=this.$refs.tabCategoryRef)==null?void 0:a.getBoundingClientRect().bottom)?(this.$emit("scroll-into-tab",s),this.fixedLabel=(f=this.tabLabels[s])==null?void 0:f.label):s===1&&(this.$emit("scroll-into-tab",s),this.fixedLabel=(u=this.tabLabels[0])==null?void 0:u.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.scrollToTab(this.tabs.length,!0)}}};var A=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,o){return i("div",{directives:[{name:"show",rawName:"v-show",value:!e.emojiFilter,expression:"!emojiFilter"}],key:o,ref:`tabLabelRef-${o}`,refInFor:!0,staticClass:"d-emoji-picker__alignment"},[o?i("p",[e._v(" "+e._s(s.label)+" ")]):e._e(),i("div",{staticClass:"d-emoji-picker__tab"},e._l(e.emojis[e.tabs[o]+e.skinTone]?e.emojis[e.tabs[o]+e.skinTone]:e.emojis[e.tabs[o]],function(r,l){return i("button",{key:r.shortname,ref:`emojiRef-${o}`,refInFor:!0,attrs:{type:"button","aria-label":r.name},on:{click:a=>e.handleEmojiSelection(r,a),focusin:function(a){return e.$emit("highlighted-emoji",r)},focusout:function(a){return e.$emit("highlighted-emoji",null)},mouseover:function(a){return e.$emit("highlighted-emoji",r)},mouseleave:function(a){return e.$emit("highlighted-emoji",null)},keydown:a=>e.handleKeyDown(a,o,l,r)}},[i("img",{staticClass:"d-icon d-icon--size-500",attrs:{alt:r.name,"aria-label":r.name,title:r.name,src:e.getImgSrc(r)},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,o){return i("button",{key:s.shortname,ref:`filteredEmoji-${o}`,refInFor:!0,class:{"hover-emoji":o===0&&e.hoverFirstEmoji},attrs:{type:"button","aria-label":s.name},on:{click:r=>e.handleEmojiSelection(s,r),focusin:function(r){return e.$emit("highlighted-emoji",s)},focusout:function(r){return e.$emit("highlighted-emoji",null)},mouseover:function(r){return e.hoverEmoji(s)},mouseleave:function(r){return e.hoverEmoji(null)},keydown:r=>e.handleKeyDownFilteredEmojis(r,o,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)])},C=[],D=h.n(v,A,C);const w=D.exports,F={name:"EmojiDescription",props:{emoji:{type:Object,default:()=>null}},data(){return{CDN_URL:n.CDN_URL}},methods:{getImgSrc(t){return t.date_added?t.image:`${n.CDN_URL+t.unicode_character}.png`}}};var N=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.getImgSrc(e.emoji)}}):e._e(),i("div",[e._v(e._s((s=e.emoji)==null?void 0:s.name))])])},P=[],M=h.n(F,N,P);const K=M.exports,B={name:"EmojiSkinSelector",components:{DtTooltip:p.default},props:{skinTone:{type:String,required:!0},isHovering:{type:Boolean,default:!1},skinSelectorButtonTooltipLabel:{type:String,required:!0}},data(){return{isOpen:!1,skinSelected:null,skinsRef:[],cdnUrl:n.CDN_URL}},computed:{skinPassedIn(){return this.skinList.find(t=>t.skinTone===this.skinTone)},skinList(){return[{name:":wave_tone1:",unicode_output:"1f44b-1f3fb",skinTone:n.EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,skinCode:"_tone1"},{name:":wave_tone2:",unicode_output:"1f44b-1f3fc",skinTone:n.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,skinCode:"_tone2"},{name:":wave_tone3:",unicode_output:"1f44b-1f3fd",skinTone:n.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,skinCode:"_tone3"},{name:":wave_tone4:",unicode_output:"1f44b-1f3fe",skinTone:n.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,skinCode:"_tone4"},{name:":wave_tone5:",unicode_output:"1f44b-1f3ff",skinTone:n.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,skinCode:"_tone5"},{name:":wave:",unicode_output:"1f44b",skinTone:n.EMOJI_PICKER_SKIN_TONE_MODIFIERS.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,o,r,l;t.preventDefault(),t.key==="ArrowLeft"&&(i===0&&((s=this.skinsRef[this.skinsRef.length-1])==null||s.focus()),(o=this.skinsRef[i-1])==null||o.focus()),t.key==="ArrowRight"&&(this.skinsRef.length&&((r=this.skinsRef[0])==null||r.focus()),(l=this.skinsRef[i+1])==null||l.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 J=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,o){var r;return i("button",{key:s.name,ref:`skinRef-${o}`,refInFor:!0,class:{selected:((r=e.skinSelected)==null?void 0:r.skinCode)===s.skinCode},on:{click:function(l){return e.selectSkin(s)},keydown:l=>e.handleKeyDown(l,s,o)}},[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,o,r,l;return[i("button",{ref:"skinSelectorRef",attrs:{"aria-label":e.skinSelectorButtonTooltipLabel,tabindex:"-1"},on:{click:e.toggleSkinList,keydown:a=>e.handleKeyDown(a)}},[i("img",{staticClass:"d-icon d-icon--size-500",attrs:{alt:(s=e.skinSelected)==null?void 0:s.name,"aria-label":(o=e.skinSelected)==null?void 0:o.name,title:(r=e.skinSelected)==null?void 0:r.name,src:`${e.cdnUrl+((l=e.skinSelected)==null?void 0:l.unicode_output)}.png`}})])]},proxy:!0}])},[e._v(" "+e._s(e.skinSelectorButtonTooltipLabel)+" ")])],1)])},U=[],q=h.n(B,J,U);const z=q.exports,H={name:"DtEmojiPicker",components:{EmojiTabset:y,EmojiSearch:O,EmojiSelector:w,EmojiDescription:K,EmojiSkinSelector:z,DtButton:m.default},props:{recentlyUsedEmojis:{type:Array,default:()=>[]},customEmojis:{type:Array},skinTone:{type:String,default:"Default"},searchQuery:{type:String,default:""},showSearch:{type:Boolean,default:!0}},data(){return{internalSearchQuery:this.searchQuery,highlightedEmoji:null,selectedTabset:{},scrollIntoTab:0,i18n:new j.DialtoneLocalization}},computed:{showCustomEmojisTab(){var t;return((t=this.customEmojis)==null?void 0:t.length)>0},showRecentlyUsedTab(){var t;return((t=this.recentlyUsedEmojis)==null?void 0:t.length)>0},tabSetLabels(){return[this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL"),this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL"),this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL"),this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL"),this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL"),this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL"),this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL"),this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL"),this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL"),this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL")]},searchPlaceholderLabel(){return this.i18n.$t("DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL")},searchResultsLabel(){return this.i18n.$t("DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL")},searchNoResultsLabel(){return this.i18n.$t("DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL")},skinSelectorButtonTooltipLabel(){return this.i18n.$t("DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL")},addEmojiLabel(){return this.i18n.$t("DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL")}},watch:{searchQuery(t){this.internalSearchQuery=t}},methods:{scrollToSelectedTabset(t){this.internalSearchQuery="",this.selectedTabset={...this.selectedTabset,tabId:t}},updateScrollIntoTab(t){this.scrollIntoTab=t},updateHighlightedEmoji(t){this.highlightedEmoji=t}}};var W=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.internalSearchQuery,"show-custom-emojis-tab":e.showCustomEmojisTab,"show-recently-used-tab":e.showRecentlyUsedTab,"scroll-into-tab":e.scrollIntoTab,"tab-set-labels":e.tabSetLabels},on:{"focus-skin-selector":function(s){return e.$refs.skinSelectorRef.focusSkinSelector()},"focus-search-input":function(s){e.showSearch?e.$refs.searchInputRef.focusSearchInput():e.$refs.emojiSelectorRef.focusEmojiSelector()},"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"},[e.showSearch?i("emoji-search",{ref:"searchInputRef",attrs:{"model-value":e.internalSearchQuery,"search-placeholder-label":e.searchPlaceholderLabel},on:{"update:model-value":s=>e.internalSearchQuery=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")}}}):e._e(),i("emoji-selector",{ref:"emojiSelectorRef",attrs:{"emoji-filter":e.internalSearchQuery,"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,"custom-emojis":e.customEmojis,"selected-tabset":e.selectedTabset},on:{"scroll-into-tab":e.updateScrollIntoTab,"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){e.showSearch?e.$refs.searchInputRef.focusSearchInput():e.$refs.tabsetRef.focusTabset()},"scroll-bottom-reached":function(s){return e.$emit("scroll-bottom-reached")}},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"},[e.showCustomEmojisTab&&!e.highlightedEmoji?i("dt-button",{staticClass:"d-emoji-picker__add-emoji",attrs:{importance:"outlined","aria-label":e.addEmojiLabel},on:{click:function(s){return e.$emit("add-emoji")}}},[e._v(" "+e._s(e.addEmojiLabel)+" ")]):e._e(),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)])},Q=[],V=h.n(H,W,Q);const G=V.exports;exports.default=G;
//# sourceMappingURL=emoji-picker.cjs.map