@dialpad/dialtone 9.23.0 → 9.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/dialtone.css +2 -2
- package/dist/icons/dialtone-icon@2.mjs +907 -891
- package/dist/icons/dialtone-icon@2.umd.js +1 -1
- package/dist/icons/dialtone-icon@3.mjs +3267 -3251
- package/dist/icons/dialtone-icon@3.umd.js +1 -1
- package/dist/icons/icons.json +1 -1
- package/dist/icons/keywords.json +1 -1
- package/dist/icons/svg/headset.svg +1 -0
- package/dist/icons/svg/list-bullet.svg +1 -1
- package/dist/icons/svg/list-ordered.svg +1 -1
- package/dist/tokens/android/java/tokens-dark.kt +1 -1
- package/dist/tokens/android/java/tokens-light.kt +1 -1
- package/dist/tokens/android/res/values/colors-dark.xml +1 -1
- package/dist/tokens/android/res/values/colors-light.xml +1 -1
- package/dist/tokens/android/res/values/dimens.xml +1 -1
- package/dist/tokens/css/variables-dark.css +1 -1
- package/dist/tokens/css/variables-light.css +1 -1
- package/dist/tokens/doc.json +7500 -1544
- package/dist/tokens/ios/tokens-dark.swift +1 -1
- package/dist/tokens/ios/tokens-light.swift +1 -1
- package/dist/tokens/less/variables-dark.less +1 -1
- package/dist/tokens/less/variables-light.less +1 -1
- package/dist/vue2/dialtone-vue.cjs +1 -1
- package/dist/vue2/dialtone-vue.js +5 -5
- package/dist/vue2/emoji.cjs +1 -1
- package/dist/vue2/emoji.js +3 -3
- package/dist/vue2/{emoji_picker-RVVypenL.js → emoji_picker-kiTOKaq8.js} +1 -1
- package/dist/vue2/{emoji_picker-vs3kVT4C.cjs → emoji_picker-njWWAm6V.cjs} +1 -1
- package/dist/vue2/{emoji_text_wrapper-D8sO5OFj.js → emoji_text_wrapper-48ClwKvf.js} +1 -1
- package/dist/vue2/{emoji_text_wrapper-Rk9EMvo8.cjs → emoji_text_wrapper-ZlynvHnd.cjs} +1 -1
- package/dist/vue2/{index-5kIwGgwp.js → index-OF94C6nQ.js} +993 -976
- package/dist/vue2/index-Wx7Jagcr.cjs +1 -0
- package/dist/vue2/message_input.cjs +1 -1
- package/dist/vue2/message_input.js +10 -10
- package/dist/vue2/{rich_text_editor-q9e-ZDwe.cjs → rich_text_editor-hUaQyiPu.cjs} +1 -1
- package/dist/vue2/{rich_text_editor-750LBgdo.js → rich_text_editor-tzOBsCIH.js} +1 -1
- package/dist/vue2/types/recipes/conversation_view/message_input/message_input.vue.d.ts +0 -1
- package/dist/vue2/types/recipes/conversation_view/message_input/message_input.vue.d.ts.map +1 -1
- package/dist/vue3/dialtone-vue.cjs +1 -1
- package/dist/vue3/dialtone-vue.js +5 -5
- package/dist/vue3/{emoji-VxFu3PHn.js → emoji-DpXo7Avz.js} +3115 -3098
- package/dist/vue3/emoji-njsSZBHg.cjs +1 -0
- package/dist/vue3/emoji.cjs +1 -1
- package/dist/vue3/emoji.js +3 -3
- package/dist/vue3/{emoji_picker-ZG38HbIV.cjs → emoji_picker-rUhIsKoU.cjs} +1 -1
- package/dist/vue3/{emoji_picker-tCsjkMcD.js → emoji_picker-vEQ--pAv.js} +1 -1
- package/dist/vue3/{emoji_text_wrapper-NMuqIG_X.js → emoji_text_wrapper-icAiqYqk.js} +1 -1
- package/dist/vue3/{emoji_text_wrapper-bOsTtVBL.cjs → emoji_text_wrapper-zz_nxXi-.cjs} +1 -1
- package/dist/vue3/message_input.cjs +1 -1
- package/dist/vue3/message_input.js +73 -74
- package/dist/vue3/{rich_text_editor-_wxi33hv.js → rich_text_editor-5t4kYsh_.js} +1 -1
- package/dist/vue3/{rich_text_editor-pnYcPOnF.cjs → rich_text_editor-knDe1iDy.cjs} +1 -1
- package/dist/vue3/types/recipes/conversation_view/message_input/message_input.vue.d.ts +0 -1
- package/dist/vue3/types/recipes/conversation_view/message_input/message_input.vue.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/vue2/index-FZJBS_ti.cjs +0 -1
- package/dist/vue3/emoji-1NjKe1Yv.cjs +0 -1
package/dist/vue3/emoji.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./emoji-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./emoji-njsSZBHg.cjs"),t=require("./emoji_text_wrapper-zz_nxXi-.cjs"),o=require("./emoji_picker-rUhIsKoU.cjs");require("./tooltip-P8ouLQqi.cjs");require("vue");exports.DtEmoji=e.DtEmoji;exports.codeToEmojiData=e.codeToEmojiData;Object.defineProperty(exports,"customEmojiAssetUrl",{enumerable:!0,get:()=>e.customEmojiAssetUrl});exports.defaultEmojiAssetUrl=e.defaultEmojiAssetUrl;Object.defineProperty(exports,"emojiFileExtensionLarge",{enumerable:!0,get:()=>e.emojiFileExtensionLarge});Object.defineProperty(exports,"emojiFileExtensionSmall",{enumerable:!0,get:()=>e.emojiFileExtensionSmall});Object.defineProperty(exports,"emojiImageUrlLarge",{enumerable:!0,get:()=>e.emojiImageUrlLarge});Object.defineProperty(exports,"emojiImageUrlSmall",{enumerable:!0,get:()=>e.emojiImageUrlSmall});exports.emojiJson=e.emojiJson;exports.emojiVersion=e.emojiVersion;exports.filterValidShortCodes=e.filterValidShortCodes;exports.findEmojis=e.findEmojis;exports.findShortCodes=e.findShortCodes;exports.getEmojiData=e.getEmojiData;exports.setCustomEmojiJson=e.setCustomEmojiJson;exports.setCustomEmojiUrl=e.setCustomEmojiUrl;exports.setEmojiAssetUrlLarge=e.setEmojiAssetUrlLarge;exports.setEmojiAssetUrlSmall=e.setEmojiAssetUrlSmall;exports.shortcodeToEmojiData=e.shortcodeToEmojiData;exports.stringToUnicode=e.stringToUnicode;exports.unicodeToString=e.unicodeToString;exports.validateCustomEmojiJson=e.validateCustomEmojiJson;exports.DtEmojiTextWrapper=t._sfc_main;exports.ARROW_KEYS=o.ARROW_KEYS;exports.CDN_URL=o.CDN_URL;exports.DtEmojiPicker=o._sfc_main;exports.EMOJIS_PER_ROW=o.EMOJIS_PER_ROW;exports.EMOJI_PICKER_CATEGORIES=o.EMOJI_PICKER_CATEGORIES;exports.EMOJI_PICKER_SKIN_TONE_MODIFIERS=o.EMOJI_PICKER_SKIN_TONE_MODIFIERS;
|
package/dist/vue3/emoji.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { D as i, o as m, c as t, d as r, g as E, b as j, f as l, a as n, h as d, e as _, q as I, r as S, p as C, i as g, l as D, k as R, j as U, s as f, m as p, n as O, u as c, v as u } from "./emoji-
|
|
2
|
-
import { _ as T } from "./emoji_text_wrapper-
|
|
3
|
-
import { A as J, C as h, _ as K, E as L, b as M, a as P } from "./emoji_picker-
|
|
1
|
+
import { D as i, o as m, c as t, d as r, g as E, b as j, f as l, a as n, h as d, e as _, q as I, r as S, p as C, i as g, l as D, k as R, j as U, s as f, m as p, n as O, u as c, v as u } from "./emoji-DpXo7Avz.js";
|
|
2
|
+
import { _ as T } from "./emoji_text_wrapper-icAiqYqk.js";
|
|
3
|
+
import { A as J, C as h, _ as K, E as L, b as M, a as P } from "./emoji_picker-vEQ--pAv.js";
|
|
4
4
|
import "./tooltip-S6S4up2q.js";
|
|
5
5
|
import "vue";
|
|
6
6
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const e=require("vue"),E=require("./emoji-1NjKe1Yv.cjs"),x=require("./tooltip-P8ouLQqi.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",size:"200"})]),_: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,()=>{z(),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 z(){const r=n.value;r.scrollTop=0}function Y(){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(()=>{Y()}),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;
|
|
1
|
+
"use strict";const e=require("vue"),E=require("./emoji-njsSZBHg.cjs"),x=require("./tooltip-P8ouLQqi.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",size:"200"})]),_: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,()=>{z(),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 z(){const r=n.value;r.scrollTop=0}function Y(){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(()=>{Y()}),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;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ref as h, onMounted as re, openBlock as y, createElementBlock as _, createVNode as F, unref as T, withKeys as U, withModifiers as ue, createSlots as Se, withCtx as H, createElementVNode as w, computed as P, toRefs as _e, watch as W, Fragment as z, renderList as Y, createBlock as Re, nextTick as x, onUnmounted as je, toDisplayString as J, withDirectives as oe, createCommentVNode as le, vShow as se, normalizeClass as ce, watchEffect as ae, createTextVNode as fe } from "vue";
|
|
2
|
-
import { x as Te, w as ne, y as we, z as Ee, A as I } from "./emoji-
|
|
2
|
+
import { x as Te, w as ne, y as we, z as Ee, A as I } from "./emoji-DpXo7Avz.js";
|
|
3
3
|
import { D as $e } from "./tooltip-S6S4up2q.js";
|
|
4
4
|
const Le = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Ae = ["onKeydown"], Ie = {
|
|
5
5
|
__name: "emoji_search",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const i=require("./emoji-
|
|
1
|
+
"use strict";const i=require("./emoji-njsSZBHg.cjs"),n=require("vue"),a={name:"DtEmojiTextWrapper",components:{DtEmoji:i.DtEmoji},props:{elementType:{type:String,default:"div"},size:{type:String,default:"500",validator:e=>Object.keys(i.ICON_SIZE_MODIFIERS).includes(e)}},data(){return{loadingEmojiJson:!0}},async created(){this.loadingEmojiJson=!1},methods:{replaceDtEmojis(e,s){const t=new RegExp(`(${e.join("|")})`,"g");return s.split(t).map(o=>e.includes(o)?n.h(i.DtEmoji,{...this.$attrs,size:this.size,code:o}):n.h("span",o))},searchVNodes(e){var t;if(typeof e=="string")return this.searchCodes(e);if(typeof e.type=="symbol")return this.searchCodes(e.children);if((t=e.props)!=null&&t.innerHTML)return this.searchVNodes(e.props.innerHTML);const s=Array.isArray(e.children)?e.children:[e.children];return n.h(e.type,e.props,s.map(r=>this.searchVNodes(r)))},replaceVueComponentVNodeContent(e){},searchCodes(e){const s=i.findShortCodes(e),t=i.findEmojis(e),r=[...s,...t];return r.length===0?e:this.replaceDtEmojis(r,e)}},render(){const e=this.$slots.default?this.$slots.default():[];return n.h(this.elementType,{"data-qa":"emoji-text-wrapper",class:"d-emoji-text-wrapper"},this.loadingEmojiJson?e:e.map(s=>this.searchVNodes(s)))}};exports._sfc_main=a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./rich_text_editor-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./rich_text_editor-knDe1iDy.cjs"),c=require("./emoji-njsSZBHg.cjs"),b=require("./emoji_picker-rUhIsKoU.cjs"),p=require("./tooltip-P8ouLQqi.cjs"),e=require("vue"),C={name:"DtRecipeMessageInput",components:{DtButton:c.DtButton,DtEmojiPicker:b._sfc_main,DtIcon:c.DtIcon,DtInput:c.DtInput,DtPopover:l.DtPopover,DtRichTextEditor:l.DtRichTextEditor,DtTooltip:p.DtTooltip},mixins:[],inheritAttrs:!1,props:{modelValue:{type:[Object,String],default:""},editable:{type:Boolean,default:!0},inputAriaLabel:{type:String,required:!0,default:""},inputClass:{type:String,default:""},autoFocus:{type:[Boolean,String,Number],default:!1,validator(n){return typeof n=="string"?l.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(n):!0}},outputFormat:{type:String,default:"text",validator(n){return l.RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(n)}},link:{type:[Boolean,Object],default:!1},placeholder:{type:String,default:""},disableSend:{type:Boolean,default:!1},maxHeight:{type:String,default:"unset"},showEmojiPicker:{type:Boolean,default:!0},emojiPickerProps:{type:Object,default:()=>({}),validate(n){return["searchNoResultsLabel","searchResultsLabel","searchPlaceholderLabel","skinSelectorButtonTooltipLabel","tabSetLabels"].every(t=>n[t]!=null)}},emojiTooltipMessage:{type:String,default:"Emoji"},emojiButtonAriaLabel:{type:String,default:"emoji button"},showCharacterLimit:{type:[Boolean,Object],default:()=>({count:1500,warning:500,message:""})},showImagePicker:{type:[Boolean,Object],default:()=>({tooltipLabel:"Attach Image",ariaLabel:"image button"})},showSend:{type:[Boolean,Object],default:()=>({icon:"send"})},showCancel:{type:[Boolean,Object],default:()=>({text:"Cancel"})},mentionSuggestion:{type:Object,default:null}},emits:["submit","select-media","add-media","cancel","skin-tone","selected-emoji","focus","blur","input"],data(){return{internalInputValue:this.modelValue,hasFocus:!1,imagePickerFocus:!1,emojiPickerFocus:!1,sendButtonFocus:!1,emojiPickerOpened:!1}},computed:{inputLength(){return this.internalInputValue.length},displayCharacterLimitWarning(){return!!this.showCharacterLimit&&this.showCharacterLimit.count-this.inputLength<=this.showCharacterLimit.warning},characterLimitTooltipEnabled(){return this.showCharacterLimit.message&&this.showCharacterLimit.count-this.inputLength<0},isSendDisabled(){return this.disableSend||this.showCharacterLimit&&this.inputLength>this.showCharacterLimit.count},computedCloseButtonProps(){return{ariaLabel:"Close"}},emojiPickerHovered(){return this.emojiPickerFocus||this.emojiPickerOpened}},watch:{modelValue(n){this.internalInputValue=n}},methods:{onDrag(n){n.stopPropagation(),n.preventDefault()},onDrop(n){n.stopPropagation(),n.preventDefault();const t=n.dataTransfer,m=Array.from(t.files).map(s=>s.name);this.$emit("add-media",m)},onSkinTone(n){this.$emit("skin-tone",n)},onSelectEmoji(n){if(!n){this.emojiPickerOpened=!1;return}this.$refs.richTextEditor.editor.commands.insertContent({type:"emoji",attrs:{code:n.shortname}}),this.emojiPickerOpened=!1,this.$emit("selected-emoji",n)},onSelectImage(){this.$refs.messageInputImageUpload.$refs.input.click()},onImageUpload(){this.$emit("select-media",this.$refs.messageInputImageUpload.$refs.input.files)},toggleEmojiPicker(){this.emojiPickerOpened=!this.emojiPickerOpened},onSend(){this.isSendDisabled||this.$emit("submit",this.internalInputValue)},onCancel(){this.$emit("cancel")},onFocus(n){this.hasFocus=!0,this.$refs.richTextEditor.focusEditor(),this.$emit("focus",n)},onBlur(n){this.hasFocus=!1,this.$emit("blur",n)},onInput(n){this.$emit("input",n)}}},S={class:"d-d-flex d-jc-space-between d-mx8 d-my4"},T={class:"d-d-flex"},w={class:"d-d-flex"},j={key:0};function P(n,t,o,m,s,i){const h=e.resolveComponent("dt-rich-text-editor"),d=e.resolveComponent("dt-icon"),r=e.resolveComponent("dt-button"),g=e.resolveComponent("dt-input"),u=e.resolveComponent("dt-tooltip"),f=e.resolveComponent("dt-emoji-picker"),k=e.resolveComponent("dt-popover");return e.openBlock(),e.createElementBlock("div",{"data-qa":"dt-message-input",role:"presentation",class:e.normalizeClass(["d-d-flex","d-fd-column","d-bar8","d-baw1","d-ba","d-c-text",{"d-bc-bold d-bs-sm":s.hasFocus,"d-bc-default":!s.hasFocus}]),onClick:t[15]||(t[15]=a=>n.$refs.richTextEditor.focusEditor()),onDragEnter:t[16]||(t[16]=(...a)=>i.onDrag&&i.onDrag(...a)),onDragOver:t[17]||(t[17]=(...a)=>i.onDrag&&i.onDrag(...a)),onDrop:t[18]||(t[18]=(...a)=>i.onDrop&&i.onDrop(...a)),onKeydown:t[19]||(t[19]=e.withKeys(e.withModifiers((...a)=>i.onSend&&i.onSend(...a),["exact"]),["enter"]))},[e.createElementVNode("div",{class:"d-of-auto d-mx16 d-mt8 d-mb4",style:e.normalizeStyle({"max-height":o.maxHeight})},[e.createVNode(h,e.mergeProps({ref:"richTextEditor",modelValue:s.internalInputValue,"onUpdate:modelValue":t[0]||(t[0]=a=>s.internalInputValue=a),editable:o.editable,"input-aria-label":o.inputAriaLabel,"input-class":o.inputClass,"output-format":o.outputFormat,"auto-focus":o.autoFocus,link:o.link,placeholder:o.placeholder,"mention-suggestion":o.mentionSuggestion},n.$attrs,{onFocus:i.onFocus,onBlur:i.onBlur,onInput:t[1]||(t[1]=a=>i.onInput(a))}),null,16,["modelValue","editable","input-aria-label","input-class","output-format","auto-focus","link","placeholder","mention-suggestion","onFocus","onBlur"])],4),e.renderSlot(n.$slots,"middle"),e.createElementVNode("section",S,[e.createElementVNode("div",T,[o.showImagePicker?(e.openBlock(),e.createBlock(u,{key:0,placement:"top-start",message:o.showImagePicker.tooltipLabel,offset:[-4,-4]},{anchor:e.withCtx(()=>[e.createVNode(r,{"data-qa":"dt-message-input-image-btn",size:"sm",circle:"",kind:s.imagePickerFocus?"default":"muted",importance:"clear","aria-label":o.showImagePicker.ariaLabel,onClick:i.onSelectImage,onMouseenter:t[2]||(t[2]=a=>s.imagePickerFocus=!0),onMouseleave:t[3]||(t[3]=a=>s.imagePickerFocus=!1),onFocus:t[4]||(t[4]=a=>s.imagePickerFocus=!0),onBlur:t[5]||(t[5]=a=>s.imagePickerFocus=!1)},{icon:e.withCtx(()=>[e.createVNode(d,{name:"image",size:"300"})]),_:1},8,["kind","aria-label","onClick"]),e.createVNode(g,{ref:"messageInputImageUpload","data-qa":"dt-message-input-image-input",type:"file",class:"d-ps-absolute",multiple:"",hidden:"",onInput:i.onImageUpload},null,8,["onInput"])]),_:1},8,["message"])):e.createCommentVNode("",!0),o.showEmojiPicker?(e.openBlock(),e.createBlock(k,{key:1,"data-qa":"dt-message-input-emoji-picker-popover",open:s.emojiPickerOpened,"initial-focus-element":"#searchInput",padding:"none",onOpened:t[10]||(t[10]=a=>{s.emojiPickerOpened=a})},{anchor:e.withCtx(()=>[e.createVNode(u,{message:o.emojiTooltipMessage,offset:[0,-4]},{anchor:e.withCtx(()=>[e.createVNode(r,{"data-qa":"dt-message-input-emoji-picker-btn",size:"sm",circle:"",kind:i.emojiPickerHovered?"default":"muted",importance:"clear","aria-label":o.emojiButtonAriaLabel,offset:[0,0],onClick:i.toggleEmojiPicker,onMouseenter:t[6]||(t[6]=a=>s.emojiPickerFocus=!0),onMouseleave:t[7]||(t[7]=a=>s.emojiPickerFocus=!1),onFocus:t[8]||(t[8]=a=>s.emojiPickerFocus=!0),onBlur:t[9]||(t[9]=a=>s.emojiPickerFocus=!1)},{icon:e.withCtx(()=>[e.createVNode(d,{name:i.emojiPickerHovered?"very-satisfied":"satisfied",size:"300"},null,8,["name"])]),_:1},8,["kind","aria-label","onClick"])]),_:1},8,["message"])]),content:e.withCtx(()=>[e.createVNode(f,e.mergeProps(o.emojiPickerProps,{onSkinTone:i.onSkinTone,onSelectedEmoji:i.onSelectEmoji}),null,16,["onSkinTone","onSelectedEmoji"])]),_:1},8,["open"])):e.createCommentVNode("",!0)]),e.createElementVNode("div",w,[o.showCharacterLimit?(e.openBlock(),e.createBlock(u,{key:0,class:"dt-message-input--remaining-char-tooltip",placement:"top-end",enabled:i.characterLimitTooltipEnabled,message:o.showCharacterLimit.message,offset:[10,-8]},{anchor:e.withCtx(()=>[e.withDirectives(e.createElementVNode("p",{class:"d-fc-error d-mr16 dt-message-input--remaining-char","data-qa":"dt-message-input-character-limit"},e.toDisplayString(o.showCharacterLimit.count-i.inputLength),513),[[e.vShow,i.displayCharacterLimitWarning]])]),_:1},8,["enabled","message"])):e.createCommentVNode("",!0),o.showCancel?(e.openBlock(),e.createBlock(r,{key:1,"data-qa":"dt-message-input-cancel-button",class:"dt-message-input--cancel-button",size:"sm",kind:"muted",importance:"clear","aria-label":o.showCancel.ariaLabel,onClick:i.onCancel},{default:e.withCtx(()=>[e.createElementVNode("p",null,e.toDisplayString(o.showCancel.text),1)]),_:1},8,["aria-label","onClick"])):e.createCommentVNode("",!0),o.showSend?(e.openBlock(),e.createBlock(u,{key:2,placement:"top-end",enabled:!o.showSend,message:o.showSend.tooltipLabel,show:!i.isSendDisabled&&s.sendButtonFocus,offset:[6,-8]},{anchor:e.withCtx(()=>[e.createVNode(r,{"data-qa":"dt-message-input-send-btn",size:"sm",kind:"default",importance:"primary",class:e.normalizeClass(["d-btn--circle",{"message-input-button__disabled d-fc-muted":i.isSendDisabled}]),"aria-label":o.showSend.ariaLabel,"aria-disabled":i.isSendDisabled,onClick:i.onSend,onMouseenter:t[11]||(t[11]=a=>s.sendButtonFocus=!0),onMouseleave:t[12]||(t[12]=a=>s.sendButtonFocus=!1),onFocus:t[13]||(t[13]=a=>s.sendButtonFocus=!0),onBlur:t[14]||(t[14]=a=>s.sendButtonFocus=!1)},e.createSlots({default:e.withCtx(()=>[o.showSend.text?(e.openBlock(),e.createElementBlock("p",j,e.toDisplayString(o.showSend.text),1)):e.createCommentVNode("",!0)]),_:2},[o.showSend.icon?{name:"icon",fn:e.withCtx(()=>[e.createVNode(d,{name:o.showSend.icon,size:"300"},null,8,["name"])]),key:"0"}:void 0]),1032,["class","aria-label","aria-disabled","onClick"])]),_:1},8,["enabled","message","show"])):e.createCommentVNode("",!0)])])],34)}const v=p._export_sfc(C,[["render",P]]);exports.DtRichTextEditor=l.DtRichTextEditor;exports.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES=l.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES;exports.RICH_TEXT_EDITOR_OUTPUT_FORMATS=l.RICH_TEXT_EDITOR_OUTPUT_FORMATS;exports.DtRecipeMessageInput=v;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { D as v, a as L, R as
|
|
2
|
-
import { t as
|
|
3
|
-
import { _ as T } from "./emoji_picker-
|
|
1
|
+
import { D as v, a as L, R as F, b as I } from "./rich_text_editor-5t4kYsh_.js";
|
|
2
|
+
import { t as D, w as B, x as E } from "./emoji-DpXo7Avz.js";
|
|
3
|
+
import { _ as T } from "./emoji_picker-vEQ--pAv.js";
|
|
4
4
|
import { _ as x, D as O } from "./tooltip-S6S4up2q.js";
|
|
5
5
|
import { resolveComponent as r, openBlock as u, createElementBlock as k, normalizeClass as S, withKeys as _, withModifiers as V, createElementVNode as d, normalizeStyle as M, createVNode as l, mergeProps as j, renderSlot as R, createBlock as c, withCtx as s, createCommentVNode as m, withDirectives as U, toDisplayString as p, vShow as q, createSlots as z } from "vue";
|
|
6
6
|
const A = {
|
|
7
7
|
name: "DtRecipeMessageInput",
|
|
8
8
|
components: {
|
|
9
|
-
DtButton:
|
|
9
|
+
DtButton: D,
|
|
10
10
|
DtEmojiPicker: T,
|
|
11
|
-
DtIcon:
|
|
11
|
+
DtIcon: B,
|
|
12
12
|
DtInput: E,
|
|
13
13
|
DtPopover: v,
|
|
14
14
|
DtRichTextEditor: L,
|
|
@@ -63,8 +63,8 @@ const A = {
|
|
|
63
63
|
autoFocus: {
|
|
64
64
|
type: [Boolean, String, Number],
|
|
65
65
|
default: !1,
|
|
66
|
-
validator(
|
|
67
|
-
return typeof
|
|
66
|
+
validator(t) {
|
|
67
|
+
return typeof t == "string" ? F.includes(t) : !0;
|
|
68
68
|
}
|
|
69
69
|
},
|
|
70
70
|
/**
|
|
@@ -76,8 +76,8 @@ const A = {
|
|
|
76
76
|
outputFormat: {
|
|
77
77
|
type: String,
|
|
78
78
|
default: "text",
|
|
79
|
-
validator(
|
|
80
|
-
return
|
|
79
|
+
validator(t) {
|
|
80
|
+
return I.includes(t);
|
|
81
81
|
}
|
|
82
82
|
},
|
|
83
83
|
/**
|
|
@@ -120,14 +120,14 @@ const A = {
|
|
|
120
120
|
emojiPickerProps: {
|
|
121
121
|
type: Object,
|
|
122
122
|
default: () => ({}),
|
|
123
|
-
validate(
|
|
123
|
+
validate(t) {
|
|
124
124
|
return [
|
|
125
125
|
"searchNoResultsLabel",
|
|
126
126
|
"searchResultsLabel",
|
|
127
127
|
"searchPlaceholderLabel",
|
|
128
128
|
"skinSelectorButtonTooltipLabel",
|
|
129
129
|
"tabSetLabels"
|
|
130
|
-
].every((e) =>
|
|
130
|
+
].every((e) => t[e] != null);
|
|
131
131
|
}
|
|
132
132
|
},
|
|
133
133
|
/**
|
|
@@ -279,39 +279,36 @@ const A = {
|
|
|
279
279
|
},
|
|
280
280
|
emojiPickerHovered() {
|
|
281
281
|
return this.emojiPickerFocus || this.emojiPickerOpened;
|
|
282
|
-
},
|
|
283
|
-
sendButtonKind() {
|
|
284
|
-
return this.isSendDisabled ? "muted" : "default";
|
|
285
282
|
}
|
|
286
283
|
},
|
|
287
284
|
watch: {
|
|
288
|
-
modelValue(
|
|
289
|
-
this.internalInputValue =
|
|
285
|
+
modelValue(t) {
|
|
286
|
+
this.internalInputValue = t;
|
|
290
287
|
}
|
|
291
288
|
},
|
|
292
289
|
methods: {
|
|
293
|
-
onDrag(
|
|
294
|
-
|
|
290
|
+
onDrag(t) {
|
|
291
|
+
t.stopPropagation(), t.preventDefault();
|
|
295
292
|
},
|
|
296
|
-
onDrop(
|
|
297
|
-
|
|
298
|
-
const e =
|
|
293
|
+
onDrop(t) {
|
|
294
|
+
t.stopPropagation(), t.preventDefault();
|
|
295
|
+
const e = t.dataTransfer, b = Array.from(e.files).map((a) => a.name);
|
|
299
296
|
this.$emit("add-media", b);
|
|
300
297
|
},
|
|
301
|
-
onSkinTone(
|
|
302
|
-
this.$emit("skin-tone",
|
|
298
|
+
onSkinTone(t) {
|
|
299
|
+
this.$emit("skin-tone", t);
|
|
303
300
|
},
|
|
304
|
-
onSelectEmoji(
|
|
305
|
-
if (!
|
|
301
|
+
onSelectEmoji(t) {
|
|
302
|
+
if (!t) {
|
|
306
303
|
this.emojiPickerOpened = !1;
|
|
307
304
|
return;
|
|
308
305
|
}
|
|
309
306
|
this.$refs.richTextEditor.editor.commands.insertContent({
|
|
310
307
|
type: "emoji",
|
|
311
308
|
attrs: {
|
|
312
|
-
code:
|
|
309
|
+
code: t.shortname
|
|
313
310
|
}
|
|
314
|
-
}), this.emojiPickerOpened = !1, this.$emit("selected-emoji",
|
|
311
|
+
}), this.emojiPickerOpened = !1, this.$emit("selected-emoji", t);
|
|
315
312
|
},
|
|
316
313
|
onSelectImage() {
|
|
317
314
|
this.$refs.messageInputImageUpload.$refs.input.click();
|
|
@@ -328,18 +325,18 @@ const A = {
|
|
|
328
325
|
onCancel() {
|
|
329
326
|
this.$emit("cancel");
|
|
330
327
|
},
|
|
331
|
-
onFocus(
|
|
332
|
-
this.hasFocus = !0, this.$refs.richTextEditor.focusEditor(), this.$emit("focus",
|
|
328
|
+
onFocus(t) {
|
|
329
|
+
this.hasFocus = !0, this.$refs.richTextEditor.focusEditor(), this.$emit("focus", t);
|
|
333
330
|
},
|
|
334
|
-
onBlur(
|
|
335
|
-
this.hasFocus = !1, this.$emit("blur",
|
|
331
|
+
onBlur(t) {
|
|
332
|
+
this.hasFocus = !1, this.$emit("blur", t);
|
|
336
333
|
},
|
|
337
|
-
onInput(
|
|
338
|
-
this.$emit("input",
|
|
334
|
+
onInput(t) {
|
|
335
|
+
this.$emit("input", t);
|
|
339
336
|
}
|
|
340
337
|
}
|
|
341
338
|
}, H = { class: "d-d-flex d-jc-space-between d-mx8 d-my4" }, N = { class: "d-d-flex" }, K = { class: "d-d-flex" }, W = { key: 0 };
|
|
342
|
-
function X(
|
|
339
|
+
function X(t, e, n, b, a, i) {
|
|
343
340
|
const w = r("dt-rich-text-editor"), h = r("dt-icon"), f = r("dt-button"), P = r("dt-input"), g = r("dt-tooltip"), y = r("dt-emoji-picker"), C = r("dt-popover");
|
|
344
341
|
return u(), k("div", {
|
|
345
342
|
"data-qa": "dt-message-input",
|
|
@@ -353,7 +350,7 @@ function X(n, e, t, b, a, i) {
|
|
|
353
350
|
"d-c-text",
|
|
354
351
|
{ "d-bc-bold d-bs-sm": a.hasFocus, "d-bc-default": !a.hasFocus }
|
|
355
352
|
]),
|
|
356
|
-
onClick: e[15] || (e[15] = (o) =>
|
|
353
|
+
onClick: e[15] || (e[15] = (o) => t.$refs.richTextEditor.focusEditor()),
|
|
357
354
|
onDragEnter: e[16] || (e[16] = (...o) => i.onDrag && i.onDrag(...o)),
|
|
358
355
|
onDragOver: e[17] || (e[17] = (...o) => i.onDrag && i.onDrag(...o)),
|
|
359
356
|
onDrop: e[18] || (e[18] = (...o) => i.onDrop && i.onDrop(...o)),
|
|
@@ -361,33 +358,33 @@ function X(n, e, t, b, a, i) {
|
|
|
361
358
|
}, [
|
|
362
359
|
d("div", {
|
|
363
360
|
class: "d-of-auto d-mx16 d-mt8 d-mb4",
|
|
364
|
-
style: M({ "max-height":
|
|
361
|
+
style: M({ "max-height": n.maxHeight })
|
|
365
362
|
}, [
|
|
366
363
|
l(w, j({
|
|
367
364
|
ref: "richTextEditor",
|
|
368
365
|
modelValue: a.internalInputValue,
|
|
369
366
|
"onUpdate:modelValue": e[0] || (e[0] = (o) => a.internalInputValue = o),
|
|
370
|
-
editable:
|
|
371
|
-
"input-aria-label":
|
|
372
|
-
"input-class":
|
|
373
|
-
"output-format":
|
|
374
|
-
"auto-focus":
|
|
375
|
-
link:
|
|
376
|
-
placeholder:
|
|
377
|
-
"mention-suggestion":
|
|
378
|
-
},
|
|
367
|
+
editable: n.editable,
|
|
368
|
+
"input-aria-label": n.inputAriaLabel,
|
|
369
|
+
"input-class": n.inputClass,
|
|
370
|
+
"output-format": n.outputFormat,
|
|
371
|
+
"auto-focus": n.autoFocus,
|
|
372
|
+
link: n.link,
|
|
373
|
+
placeholder: n.placeholder,
|
|
374
|
+
"mention-suggestion": n.mentionSuggestion
|
|
375
|
+
}, t.$attrs, {
|
|
379
376
|
onFocus: i.onFocus,
|
|
380
377
|
onBlur: i.onBlur,
|
|
381
378
|
onInput: e[1] || (e[1] = (o) => i.onInput(o))
|
|
382
379
|
}), null, 16, ["modelValue", "editable", "input-aria-label", "input-class", "output-format", "auto-focus", "link", "placeholder", "mention-suggestion", "onFocus", "onBlur"])
|
|
383
380
|
], 4),
|
|
384
|
-
R(
|
|
381
|
+
R(t.$slots, "middle"),
|
|
385
382
|
d("section", H, [
|
|
386
383
|
d("div", N, [
|
|
387
|
-
|
|
384
|
+
n.showImagePicker ? (u(), c(g, {
|
|
388
385
|
key: 0,
|
|
389
386
|
placement: "top-start",
|
|
390
|
-
message:
|
|
387
|
+
message: n.showImagePicker.tooltipLabel,
|
|
391
388
|
offset: [-4, -4]
|
|
392
389
|
}, {
|
|
393
390
|
anchor: s(() => [
|
|
@@ -397,7 +394,7 @@ function X(n, e, t, b, a, i) {
|
|
|
397
394
|
circle: "",
|
|
398
395
|
kind: a.imagePickerFocus ? "default" : "muted",
|
|
399
396
|
importance: "clear",
|
|
400
|
-
"aria-label":
|
|
397
|
+
"aria-label": n.showImagePicker.ariaLabel,
|
|
401
398
|
onClick: i.onSelectImage,
|
|
402
399
|
onMouseenter: e[2] || (e[2] = (o) => a.imagePickerFocus = !0),
|
|
403
400
|
onMouseleave: e[3] || (e[3] = (o) => a.imagePickerFocus = !1),
|
|
@@ -424,7 +421,7 @@ function X(n, e, t, b, a, i) {
|
|
|
424
421
|
]),
|
|
425
422
|
_: 1
|
|
426
423
|
}, 8, ["message"])) : m("", !0),
|
|
427
|
-
|
|
424
|
+
n.showEmojiPicker ? (u(), c(C, {
|
|
428
425
|
key: 1,
|
|
429
426
|
"data-qa": "dt-message-input-emoji-picker-popover",
|
|
430
427
|
open: a.emojiPickerOpened,
|
|
@@ -436,7 +433,7 @@ function X(n, e, t, b, a, i) {
|
|
|
436
433
|
}, {
|
|
437
434
|
anchor: s(() => [
|
|
438
435
|
l(g, {
|
|
439
|
-
message:
|
|
436
|
+
message: n.emojiTooltipMessage,
|
|
440
437
|
offset: [0, -4]
|
|
441
438
|
}, {
|
|
442
439
|
anchor: s(() => [
|
|
@@ -446,7 +443,7 @@ function X(n, e, t, b, a, i) {
|
|
|
446
443
|
circle: "",
|
|
447
444
|
kind: i.emojiPickerHovered ? "default" : "muted",
|
|
448
445
|
importance: "clear",
|
|
449
|
-
"aria-label":
|
|
446
|
+
"aria-label": n.emojiButtonAriaLabel,
|
|
450
447
|
offset: [0, 0],
|
|
451
448
|
onClick: i.toggleEmojiPicker,
|
|
452
449
|
onMouseenter: e[6] || (e[6] = (o) => a.emojiPickerFocus = !0),
|
|
@@ -467,7 +464,7 @@ function X(n, e, t, b, a, i) {
|
|
|
467
464
|
}, 8, ["message"])
|
|
468
465
|
]),
|
|
469
466
|
content: s(() => [
|
|
470
|
-
l(y, j(
|
|
467
|
+
l(y, j(n.emojiPickerProps, {
|
|
471
468
|
onSkinTone: i.onSkinTone,
|
|
472
469
|
onSelectedEmoji: i.onSelectEmoji
|
|
473
470
|
}), null, 16, ["onSkinTone", "onSelectedEmoji"])
|
|
@@ -476,44 +473,44 @@ function X(n, e, t, b, a, i) {
|
|
|
476
473
|
}, 8, ["open"])) : m("", !0)
|
|
477
474
|
]),
|
|
478
475
|
d("div", K, [
|
|
479
|
-
|
|
476
|
+
n.showCharacterLimit ? (u(), c(g, {
|
|
480
477
|
key: 0,
|
|
481
478
|
class: "dt-message-input--remaining-char-tooltip",
|
|
482
479
|
placement: "top-end",
|
|
483
480
|
enabled: i.characterLimitTooltipEnabled,
|
|
484
|
-
message:
|
|
481
|
+
message: n.showCharacterLimit.message,
|
|
485
482
|
offset: [10, -8]
|
|
486
483
|
}, {
|
|
487
484
|
anchor: s(() => [
|
|
488
485
|
U(d("p", {
|
|
489
486
|
class: "d-fc-error d-mr16 dt-message-input--remaining-char",
|
|
490
487
|
"data-qa": "dt-message-input-character-limit"
|
|
491
|
-
}, p(
|
|
488
|
+
}, p(n.showCharacterLimit.count - i.inputLength), 513), [
|
|
492
489
|
[q, i.displayCharacterLimitWarning]
|
|
493
490
|
])
|
|
494
491
|
]),
|
|
495
492
|
_: 1
|
|
496
493
|
}, 8, ["enabled", "message"])) : m("", !0),
|
|
497
|
-
|
|
494
|
+
n.showCancel ? (u(), c(f, {
|
|
498
495
|
key: 1,
|
|
499
496
|
"data-qa": "dt-message-input-cancel-button",
|
|
500
497
|
class: "dt-message-input--cancel-button",
|
|
501
498
|
size: "sm",
|
|
502
499
|
kind: "muted",
|
|
503
500
|
importance: "clear",
|
|
504
|
-
"aria-label":
|
|
501
|
+
"aria-label": n.showCancel.ariaLabel,
|
|
505
502
|
onClick: i.onCancel
|
|
506
503
|
}, {
|
|
507
504
|
default: s(() => [
|
|
508
|
-
d("p", null, p(
|
|
505
|
+
d("p", null, p(n.showCancel.text), 1)
|
|
509
506
|
]),
|
|
510
507
|
_: 1
|
|
511
508
|
}, 8, ["aria-label", "onClick"])) : m("", !0),
|
|
512
|
-
|
|
509
|
+
n.showSend ? (u(), c(g, {
|
|
513
510
|
key: 2,
|
|
514
511
|
placement: "top-end",
|
|
515
|
-
enabled: !
|
|
516
|
-
message:
|
|
512
|
+
enabled: !n.showSend,
|
|
513
|
+
message: n.showSend.tooltipLabel,
|
|
517
514
|
show: !i.isSendDisabled && a.sendButtonFocus,
|
|
518
515
|
offset: [6, -8]
|
|
519
516
|
}, {
|
|
@@ -521,13 +518,15 @@ function X(n, e, t, b, a, i) {
|
|
|
521
518
|
l(f, {
|
|
522
519
|
"data-qa": "dt-message-input-send-btn",
|
|
523
520
|
size: "sm",
|
|
524
|
-
kind:
|
|
525
|
-
circle: !!t.showSend.icon,
|
|
521
|
+
kind: "default",
|
|
526
522
|
importance: "primary",
|
|
527
|
-
class: S(
|
|
528
|
-
"
|
|
529
|
-
|
|
530
|
-
|
|
523
|
+
class: S([
|
|
524
|
+
"d-btn--circle",
|
|
525
|
+
{
|
|
526
|
+
"message-input-button__disabled d-fc-muted": i.isSendDisabled
|
|
527
|
+
}
|
|
528
|
+
]),
|
|
529
|
+
"aria-label": n.showSend.ariaLabel,
|
|
531
530
|
"aria-disabled": i.isSendDisabled,
|
|
532
531
|
onClick: i.onSend,
|
|
533
532
|
onMouseenter: e[11] || (e[11] = (o) => a.sendButtonFocus = !0),
|
|
@@ -536,21 +535,21 @@ function X(n, e, t, b, a, i) {
|
|
|
536
535
|
onBlur: e[14] || (e[14] = (o) => a.sendButtonFocus = !1)
|
|
537
536
|
}, z({
|
|
538
537
|
default: s(() => [
|
|
539
|
-
|
|
538
|
+
n.showSend.text ? (u(), k("p", W, p(n.showSend.text), 1)) : m("", !0)
|
|
540
539
|
]),
|
|
541
540
|
_: 2
|
|
542
541
|
}, [
|
|
543
|
-
|
|
542
|
+
n.showSend.icon ? {
|
|
544
543
|
name: "icon",
|
|
545
544
|
fn: s(() => [
|
|
546
545
|
l(h, {
|
|
547
|
-
name:
|
|
546
|
+
name: n.showSend.icon,
|
|
548
547
|
size: "300"
|
|
549
548
|
}, null, 8, ["name"])
|
|
550
549
|
]),
|
|
551
550
|
key: "0"
|
|
552
551
|
} : void 0
|
|
553
|
-
]), 1032, ["
|
|
552
|
+
]), 1032, ["class", "aria-label", "aria-disabled", "onClick"])
|
|
554
553
|
]),
|
|
555
554
|
_: 1
|
|
556
555
|
}, 8, ["enabled", "message", "show"])) : m("", !0)
|
|
@@ -562,6 +561,6 @@ const $ = /* @__PURE__ */ x(A, [["render", X]]);
|
|
|
562
561
|
export {
|
|
563
562
|
$ as DtRecipeMessageInput,
|
|
564
563
|
L as DtRichTextEditor,
|
|
565
|
-
|
|
566
|
-
|
|
564
|
+
F as RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,
|
|
565
|
+
I as RICH_TEXT_EDITOR_OUTPUT_FORMATS
|
|
567
566
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { _ as de, g as gi, d as Ga, h as qi, u as Ya, e as Xa, P as Qa, i as Es, j as Za, k as ec, l as tc, m as nc, n as rc, o as ic, p as sc, q as oc, T as Ts, t as Cr, r as lc, s as ac } from "./tooltip-S6S4up2q.js";
|
|
2
|
-
import { B as cc, w as Er, I as dc, L as uc, C as hc, t as el, D as tl, E as fc, m as pc, o as nl } from "./emoji-
|
|
2
|
+
import { B as cc, w as Er, I as dc, L as uc, C as hc, t as el, D as tl, E as fc, m as pc, o as nl } from "./emoji-DpXo7Avz.js";
|
|
3
3
|
import { openBlock as O, createElementBlock as j, toDisplayString as ut, createCommentVNode as J, createElementVNode as ht, normalizeClass as X, resolveComponent as $, createBlock as z, resolveDynamicComponent as kt, withCtx as q, mergeProps as Tr, renderSlot as se, withKeys as Ot, withModifiers as Xt, createVNode as nt, toHandlers as rl, createSlots as mc, renderList as il, Teleport as sl, defineComponent as $t, ref as Mr, onMounted as ol, onBeforeUnmount as Ki, h as ft, getCurrentInstance as gc, watchEffect as yc, nextTick as bc, unref as kc, markRaw as wr, reactive as ll, provide as Ms, customRef as Sc, withDirectives as xc, Fragment as Cc, vShow as Ec, createTextVNode as Wi } from "vue";
|
|
4
4
|
const Ut = {
|
|
5
5
|
BUSY: "busy",
|