@dialpad/dialtone-vue 3.67.1 → 3.67.2

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.
@@ -1,6 +1,6 @@
1
1
  import { openBlock as a, createElementBlock as r, toDisplayString as I, createCommentVNode as m, createElementVNode as f, normalizeClass as y, warn as we, resolveComponent as p, normalizeStyle as ie, renderSlot as u, createBlock as S, mergeProps as C, createVNode as g, createTextVNode as D, withKeys as V, withModifiers as W, withCtx as c, Fragment as Y, renderList as ee, resolveDynamicComponent as X, toHandlers as M, createSlots as ke, normalizeProps as Ee, Transition as Ue, withDirectives as Se, guardReactiveProps as Ze, vShow as Ce, Teleport as Wt, reactive as Et, ref as fe, computed as Re, watch as Ut, onMounted as Is, nextTick as ws, unref as Zt, markRaw as ks, shallowReactive as Es, h as Os, provide as Ls, createStaticVNode as Ts } from "vue";
2
- import { _ as v, D as R, g as F, a as Ke, s as As, h as z, b as K, u as J, L as Ds, c as xs, I as Ps, M as Rs, d as Bs, e as ze, f as Ye, T as zs, i as Ns, j as $s, k as Ms, E as H, l as me, v as Yt, m as Ot, n as We, o as Qt, C as Xt, G as Jt, p as Qe, q as Hs, r as Vs, t as qs, w as Xe, x as Je, y as Fs } from "./emoji_text_wrapper-206321c9.js";
3
- import { A as Pd, z as Rd, Y as Bd, a0 as zd, $ as Nd, Z as $d, K as Md, J as Hd, a6 as Vd, H as qd, F as Fd, a5 as Kd, a1 as jd, a2 as Gd, a4 as Wd, a3 as Ud, Q as Zd, P as Yd, N as Qd, O as Xd, S as Jd, R as ec, X as tc, U as sc, W as ic, V as nc, B as ac } from "./emoji_text_wrapper-206321c9.js";
2
+ import { _ as v, D as R, g as F, a as Ke, s as As, h as z, b as K, u as J, L as Ds, c as xs, I as Ps, M as Rs, d as Bs, e as ze, f as Ye, T as zs, i as Ns, j as $s, k as Ms, E as H, l as me, v as Yt, m as Ot, n as We, o as Qt, C as Xt, G as Jt, p as Qe, q as Hs, r as Vs, t as qs, w as Xe, x as Je, y as Fs } from "./emoji_text_wrapper-746c639d.js";
3
+ import { A as Pd, z as Rd, Y as Bd, a0 as zd, $ as Nd, Z as $d, K as Md, J as Hd, a6 as Vd, H as qd, F as Fd, a5 as Kd, a1 as jd, a2 as Gd, a4 as Wd, a3 as Ud, Q as Zd, P as Yd, N as Qd, O as Xd, S as Jd, R as ec, X as tc, U as sc, W as ic, V as nc, B as ac } from "./emoji_text_wrapper-746c639d.js";
4
4
  const be = {
5
5
  BUSY: "busy",
6
6
  AWAY: "away",
@@ -3102,14 +3102,15 @@ const Rn = {
3102
3102
  this.modal && this.initialFocusElement === "none" && console.error('If the popover is modal you must set the initialFocusElement prop. Possible values: "dialog", "first", HTMLElement');
3103
3103
  },
3104
3104
  calculateAnchorZindex() {
3105
+ var e;
3105
3106
  return this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]') || // Special case because we don't have any dialtone drawer component yet. Render at 650 when
3106
3107
  // anchor of popover is within a drawer.
3107
- this.anchorEl.closest(".d-zi-drawer") ? 650 : 300;
3108
+ (e = this.anchorEl) != null && e.closest(".d-zi-drawer") ? 650 : 300;
3108
3109
  },
3109
3110
  defaultToggleOpen(e) {
3110
- var s;
3111
+ var s, t, o;
3111
3112
  if (!this.openOnContext && (this.open === null || this.open === void 0)) {
3112
- if (!this.anchorEl.contains(e.target) && !this.anchorEl.isEqualNode(e.target) || (s = this.anchorEl) != null && s.disabled)
3113
+ if (!((s = this.anchorEl) != null && s.contains(e.target)) && !((t = this.anchorEl) != null && t.isEqualNode(e.target)) || (o = this.anchorEl) != null && o.disabled)
3113
3114
  return;
3114
3115
  this.toggleOpen();
3115
3116
  }
@@ -3131,7 +3132,8 @@ const Rn = {
3131
3132
  this.isOpen = !this.isOpen;
3132
3133
  },
3133
3134
  onArrowKeyPress(e) {
3134
- this.open === null && (this.openWithArrowKeys && this.anchorEl.contains(e.target) && (this.isOpen || (this.isOpen = !0)), this.$emit("keydown", e));
3135
+ var s;
3136
+ this.open === null && (this.openWithArrowKeys && ((s = this.anchorEl) != null && s.contains(e.target)) && (this.isOpen || (this.isOpen = !0)), this.$emit("keydown", e));
3135
3137
  },
3136
3138
  addEventListeners() {
3137
3139
  window.addEventListener("dt-popover-close", this.closePopover), this.contentWidth === "anchor" && window.addEventListener("resize", this.onResize);
@@ -3149,18 +3151,19 @@ const Rn = {
3149
3151
  * since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.
3150
3152
  **/
3151
3153
  preventScrolling() {
3154
+ var e;
3152
3155
  if (this.modal) {
3153
- const e = this.anchorEl.closest("body, .tippy-box");
3154
- e.tagName.toLowerCase() === "body" ? (e.classList.add("d-of-hidden"), this.tip.setProps({ offset: this.offset })) : e.classList.add("d-zi-popover");
3156
+ const s = (e = this.anchorEl) == null ? void 0 : e.closest("body, .tippy-box");
3157
+ s.tagName.toLowerCase() === "body" ? (s.classList.add("d-of-hidden"), this.tip.setProps({ offset: this.offset })) : s.classList.add("d-zi-popover");
3155
3158
  }
3156
3159
  },
3157
3160
  /*
3158
3161
  * Resets the prevent scrolling properties set in preventScrolling() back to normal.
3159
3162
  **/
3160
3163
  enableScrolling() {
3161
- var s;
3162
- const e = this.anchorEl.closest("body, .tippy-box");
3163
- e && (((s = e.tagName) == null ? void 0 : s.toLowerCase()) === "body" ? (e.classList.remove("d-of-hidden"), this.tip.setProps({ offset: this.offset })) : e.classList.remove("d-zi-popover"));
3164
+ var s, t;
3165
+ const e = (s = this.anchorEl) == null ? void 0 : s.closest("body, .tippy-box");
3166
+ e && (((t = e.tagName) == null ? void 0 : t.toLowerCase()) === "body" ? (e.classList.remove("d-of-hidden"), this.tip.setProps({ offset: this.offset })) : e.classList.remove("d-zi-popover"));
3164
3167
  },
3165
3168
  removeReferences() {
3166
3169
  this.anchorEl = null, this.popoverContentEl = null, this.tip = null;
@@ -3195,7 +3198,8 @@ const Rn = {
3195
3198
  e.key === "Tab" && this.modal && this.focusTrappedTabPress(e, this.popoverContentEl), e.key === "Escape" && this.closePopover(), this.$emit("keydown", e);
3196
3199
  },
3197
3200
  async setPopoverContentAnchorWidth() {
3198
- await this.$nextTick(), this.popoverContentEl.style.width = `${this.anchorEl.clientWidth}px`;
3201
+ var e;
3202
+ await this.$nextTick(), this.popoverContentEl.style.width = `${(e = this.anchorEl) == null ? void 0 : e.clientWidth}px`;
3199
3203
  },
3200
3204
  focusFirstElementIfNeeded(e) {
3201
3205
  var t, o;
package/dist/emoji.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./emoji_text_wrapper-97be1afb.cjs"),e=require("vue");const w={class:"d-emoji-picker__search d-emoji-picker__alignment"},D={class:"d-emoji-picker__search-button"},U={__name:"emoji_search",props:{searchPlaceholderLabel:{type:String,required:!0},modelValue:{type:String,default:""}},emits:["update:modelValue"],setup(o){return(p,n)=>(e.openBlock(),e.createElementBlock("div",w,[e.createVNode(t.DtInput,{placeholder:o.searchPlaceholderLabel,"model-value":o.modelValue,"onUpdate:modelValue":n[1]||(n[1]=s=>p.$emit("update:modelValue",s))},e.createSlots({leftIcon:e.withCtx(()=>[e.createVNode(t.DtIcon,{name:"search"})]),_:2},[o.modelValue.length>0?{name:"rightIcon",fn:e.withCtx(()=>[e.createElementVNode("button",D,[e.createVNode(t.DtIcon,{name:"close",onClick:n[0]||(n[0]=s=>p.$emit("update:modelValue",""))})])]),key:"0"}:void 0]),1032,["placeholder","model-value"])]))}},I=t._export_sfc(U,[["__scopeId","data-v-20dd73b1"]]);const F={class:"d-emoji-picker__tabset"},A={__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"],setup(o,{emit:p}){const n=o,s=[{label:"Recently used",icon:"clock"},{label:"Smiley’s and people",icon:"satisfied"},{label:"Nature",icon:"living-thing"},{label:"Food",icon:"food"},{label:"Activity",icon:"object"},{label:"Travel",icon:"transportation"},{label:"Objects",icon:"lightbulb"},{label:"Symbols",icon:"heart"},{label:"Flags",icon:"flag"}],b=e.computed(()=>(n.showRecentlyUsedTab?s:s.slice(1)).map((k,f)=>({...k,label:n.tabsetLabels[f],id:(f+1).toString(),panelId:(f+1).toString()}))),c=e.computed(()=>n.emojiFilter.length>0),_=e.ref("1"),{isScrolling:u}=e.toRefs(n);e.watch(()=>n.scrollIntoTab,()=>{!u.value&&!c.value&&(_.value=(n.scrollIntoTab+1).toString())}),e.watch(c,()=>{c.value&&(_.value=null)});function g(d){u.value||(_.value=d),p("selected-tabset",d)}return(d,k)=>(e.openBlock(),e.createElementBlock("div",F,[e.createVNode(t.DtTabGroup,{"tab-list-class":"d-emoji-picker__tabset-list",selected:_.value},{tabs:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(b),f=>(e.openBlock(),e.createBlock(t.DtTab,{id:f.id,key:f.id,"panel-id":f.panelId,label:f.label,"aria-controls":"d-emoji-picker-list",onClickCapture:e.withModifiers($=>g(f.id),["stop"])},{default:e.withCtx(()=>[e.createVNode(t.DtIcon,{size:"400",name:f.icon},null,8,["name"])]),_:2},1032,["id","panel-id","label","onClickCapture"]))),128))]),_:1},8,["selected"])]))}},T="https://static.dialpadcdn.com/joypixels/png/unicode/32/";const R={class:"d-emoji-picker__selector"},q={key:0,class:"d-emoji-picker__search-label d-emoji-picker__alignment"},x={key:0},O={class:"d-emoji-picker__tab"},G=["aria-label","onClick","onFocusin","onMouseover"],P=["alt","aria-label","title","src"],M={key:2,class:"d-emoji-picker__alignment"},z={class:"d-emoji-picker__tab"},J=["aria-label","onClick","onFocusin","onMouseover"],H=["alt","aria-label","title","src"],K={__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"],setup(o,{emit:p}){const n=o,s=e.ref(null),b=e.ref(null),c=e.ref(null),_=["Recently used","People","Nature","Food","Activity","Travel","Objects","Symbols","Flags"],u=e.computed(()=>n.recentlyUsedEmojis.length?n.tabsetLabels.map(l=>({label:l,ref:e.ref(null)})):n.tabsetLabels.slice(1).map(l=>({label:l,ref:e.ref(null)}))),g=e.ref(u.value[0].label),d=e.computed(()=>n.recentlyUsedEmojis.length?_:_.slice(1)),k=e.ref([]),f=e.computed(()=>[...t.emojisGrouped[`People${n.skinTone}`],...t.emojisGrouped.Nature,...t.emojisGrouped.Food,...t.emojisGrouped[`Activity${n.skinTone}`],...t.emojisGrouped.Travel,...t.emojisGrouped[`Objects${n.skinTone}`],...t.emojisGrouped.Symbols,...t.emojisGrouped.Flags]),$=j(()=>{v()});e.watch(f,()=>{v()},{immediate:!0}),e.watch(()=>n.recentlyUsedEmojis,()=>{t.emojisGrouped["Recently used"]=n.recentlyUsedEmojis},{immediate:!0}),e.watch(()=>n.emojiFilter,()=>{V(),$()}),e.watch(()=>n.selectedTabset,l=>{L(l.tabId)},{deep:!0});function v(){const l=n.emojiFilter.toLowerCase();k.value=f.value.filter(r=>{const a=r.name.toLowerCase().includes(l),i=r.keywords.some(m=>m.toLowerCase().includes(l));return a||i})}function j(l,r=300){let a;return(...i)=>{clearTimeout(a),a=setTimeout(()=>l(...i),r)}}function E(l){return`${T+l}.png`}function C(l){l.target.parentNode.style.display="none"}function L(l){const a=u.value[l-1].ref.value[0];e.nextTick(()=>{const i=b.value,m=l==="1"?0:a.offsetTop-20;let h=!0,S=i.scrollTop;p("is-scrolling",!0),i.addEventListener("scroll",()=>{if(h){const y=i.scrollTop;(S<y&&y>=m||S>y&&y<=m)&&(h=!1,p("is-scrolling",!1)),S=y}}),i.scrollTop=m})}function V(){const l=b.value;l.scrollTop=0}function N(){c.value=new IntersectionObserver(l=>{l.forEach(r=>{var m,h,S,y,B;const{target:a}=r,i=parseInt(a.dataset.index);r.isIntersecting&&a.offsetTop<=s.value.offsetTop+50?(g.value=((m=u.value[i-1])==null?void 0:m.label)??((h=u.value[0])==null?void 0:h.label),p("scroll-into-tab",i-1)):r.boundingClientRect.bottom<=((S=s.value)==null?void 0:S.getBoundingClientRect().bottom)?(p("scroll-into-tab",i),g.value=(y=u.value[i])==null?void 0:y.label):i===1&&(p("scroll-into-tab",i),g.value=(B=u.value[0])==null?void 0:B.label)})}),c.value.observe(s.value),Array.from(b.value.children).forEach((l,r)=>{c.value.observe(l),l.dataset.index=r})}return e.onMounted(()=>{N()}),e.onUnmounted(()=>{c.value.disconnect()}),(l,r)=>(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("div",{id:"d-emoji-picker-list",ref_key:"listRef",ref:b,class:"d-emoji-picker__list"},[o.emojiFilter?(e.openBlock(),e.createElementBlock("p",q,e.toDisplayString(k.value.length>0?o.searchResultsLabel:o.searchNoResultsLabel),1)):(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"tabCategoryRef",ref:s,class:"d-emoji-picker__category d-emoji-picker__alignment"},[e.createElementVNode("p",null,e.toDisplayString(g.value),1)],512)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(u),(a,i)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:i,ref_for:!0,ref:a.ref,class:"d-emoji-picker__alignment"},[i?(e.openBlock(),e.createElementBlock("p",x,e.toDisplayString(a.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",O,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(t.emojisGrouped)[e.unref(d)[i]+o.skinTone]?e.unref(t.emojisGrouped)[e.unref(d)[i]+o.skinTone]:e.unref(t.emojisGrouped)[e.unref(d)[i]],m=>(e.openBlock(),e.createElementBlock("button",{key:m.shortname,type:"button","aria-label":m.name,onClick:h=>l.$emit("selected-emoji",m),onFocusin:h=>l.$emit("highlighted-emoji",m),onFocusout:r[0]||(r[0]=h=>l.$emit("highlighted-emoji",null)),onMouseover:h=>l.$emit("highlighted-emoji",m),onMouseleave:r[1]||(r[1]=h=>l.$emit("highlighted-emoji",null))},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:m.name,"aria-label":m.name,title:m.name,src:E(m.unicode_character),onError:C},null,40,P)],40,G))),128))])])),[[e.vShow,!o.emojiFilter]])),128)),o.emojiFilter?(e.openBlock(),e.createElementBlock("div",M,[e.createElementVNode("div",z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(k.value,a=>(e.openBlock(),e.createElementBlock("button",{key:a.shortname,type:"button","aria-label":a.name,onClick:i=>l.$emit("selected-emoji",a),onFocusin:i=>l.$emit("highlighted-emoji",a),onFocusout:r[2]||(r[2]=i=>l.$emit("highlighted-emoji",null)),onMouseover:i=>l.$emit("highlighted-emoji",a),onMouseleave:r[3]||(r[3]=i=>l.$emit("highlighted-emoji",null))},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:a.name,"aria-label":a.name,title:a.name,src:`${e.unref(T)+a.unicode_character}.png`},null,8,H)],40,J))),128))])])):e.createCommentVNode("",!0)],512)]))}},Q=t._export_sfc(K,[["__scopeId","data-v-183240d8"]]);const W={class:"d-emoji-picker__skin-list"},X=["onClick"],Y=["alt","aria-label","title","src"],Z={class:"d-emoji-picker__skin-selected"},ee=["alt","aria-label","title","src"],te={__name:"emoji_skin_selector",props:{skinTone:{type:String,required:!0},isHovering:{type:Boolean,default:!1},skinSelectorButtonTooltipLabel:{type:String,required:!0}},emits:["skin-tone"],setup(o,{emit:p}){const n=o,s=[{name:":wave_tone1:",unicode_output:"1f44b-1f3fb",skinTone:"Light",skinCode:"_tone1"},{name:":wave_tone2:",unicode_output:"1f44b-1f3fc",skinTone:"MediumLight",skinCode:"_tone2"},{name:":wave_tone3:",unicode_output:"1f44b-1f3fd",skinTone:"Medium",skinCode:"_tone3"},{name:":wave_tone4:",unicode_output:"1f44b-1f3fe",skinTone:"MediumDark",skinCode:"_tone4"},{name:":wave_tone5:",unicode_output:"1f44b-1f3ff",skinTone:"Dark",skinCode:"_tone5"},{name:":wave:",unicode_output:"1f44b",skinTone:"Default",skinCode:""}],b=e.ref(s.find(u=>u.skinTone===n.skinTone)),c=e.ref(!1);e.watchEffect(()=>n.isHovering&&(c.value=!1));function _(u){b.value=u,c.value=!1,p("skin-tone",u.skinTone)}return(u,g)=>(e.openBlock(),e.createElementBlock("div",null,[e.withDirectives(e.createElementVNode("div",W,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(s,d=>e.createElementVNode("button",{key:d.name,class:e.normalizeClass({selected:b.value.skinCode===d.skinCode}),onClick:k=>_(d)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:d.name,"aria-label":d.name,title:d.name,src:`${e.unref(T)+d.unicode_output}.png`},null,8,Y)],10,X)),64))],512),[[e.vShow,c.value]]),e.withDirectives(e.createElementVNode("div",Z,[e.createVNode(t.DtTooltip,{placement:"top-end"},{anchor:e.withCtx(()=>[e.createElementVNode("button",{onClick:g[0]||(g[0]=d=>c.value=!0)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:b.value.name,"aria-label":b.value.name,title:b.value.name,src:`${e.unref(T)+b.value.unicode_output}.png`},null,8,ee)])]),default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.skinSelectorButtonTooltipLabel)+" ",1)]),_:1})],512),[[e.vShow,!c.value]])]))}},oe=t._export_sfc(te,[["__scopeId","data-v-5c3fd4f6"]]);const le={class:"d-emoji-picker__data"},ne=["alt","aria-label","title","src"],ie={__name:"emoji_description",props:{emoji:{type:Object,default:null}},setup(o){return(p,n)=>{var s;return e.openBlock(),e.createElementBlock("div",le,[o.emoji?(e.openBlock(),e.createElementBlock("img",{key:0,class:"d-icon d-icon--size-500",alt:o.emoji.name,"aria-label":o.emoji.name,title:o.emoji.name,src:`${e.unref(T)+o.emoji.unicode_character}.png`},null,8,ne)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString((s=o.emoji)==null?void 0:s.name),1)])}}},se=t._export_sfc(ie,[["__scopeId","data-v-48c61881"]]);const ae={class:"d-emoji-picker"},re={class:"d-emoji-picker--header"},ce={class:"d-emoji-picker--body"},ue={class:"d-emoji-picker--footer"},de={__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"],setup(o,{emit:p}){const n=o,s=e.ref(""),b=e.ref(null),c=e.ref({}),_=e.ref(0),u=e.ref(!1),g=e.computed(()=>n.recentlyUsedEmojis.length>0);function d(v){s.value="",c.value=v,c.value={...c.value,tabId:v}}function k(v){_.value=v}function f(v){u.value=v}function $(v){b.value=v}return(v,j)=>(e.openBlock(),e.createElementBlock("div",ae,[e.createElementVNode("div",re,[e.createVNode(A,{"emoji-filter":s.value,"show-recently-used-tab":e.unref(g),"scroll-into-tab":_.value,"tabset-labels":o.tabSetLabels,"is-scrolling":u.value,onSelectedTabset:d},null,8,["emoji-filter","show-recently-used-tab","scroll-into-tab","tabset-labels","is-scrolling"])]),e.createElementVNode("div",ce,[e.createVNode(I,{modelValue:s.value,"onUpdate:modelValue":j[0]||(j[0]=E=>s.value=E),"search-placeholder-label":o.searchPlaceholderLabel},null,8,["modelValue","search-placeholder-label"]),e.createVNode(Q,{"emoji-filter":s.value,"skin-tone":o.skinTone,"tabset-labels":o.tabSetLabels,"search-results-label":o.searchResultsLabel,"search-no-results-label":o.searchNoResultsLabel,"recently-used-emojis":o.recentlyUsedEmojis,"selected-tabset":c.value,onScrollIntoTab:k,onIsScrolling:f,onHighlightedEmoji:$,onSelectedEmoji:j[1]||(j[1]=E=>p("selected-emoji",E))},null,8,["emoji-filter","skin-tone","tabset-labels","search-results-label","search-no-results-label","recently-used-emojis","selected-tabset"])]),e.createElementVNode("div",ue,[e.createVNode(se,{emoji:b.value},null,8,["emoji"]),e.createVNode(oe,{"is-hovering":!!b.value,"skin-selector-button-tooltip-label":o.skinSelectorButtonTooltipLabel,"skin-tone":o.skinTone,onSkinTone:j[2]||(j[2]=E=>p("skin-tone",E))},null,8,["is-hovering","skin-selector-button-tooltip-label","skin-tone"])])]))}};exports.DtEmoji=t.DtEmoji;exports.DtEmojiTextWrapper=t._sfc_main;exports.codeToEmojiData=t.codeToEmojiData;Object.defineProperty(exports,"customEmojiAssetUrl",{enumerable:!0,get:()=>t.customEmojiAssetUrl});exports.defaultEmojiAssetUrl=t.defaultEmojiAssetUrl;Object.defineProperty(exports,"emojiFileExtensionLarge",{enumerable:!0,get:()=>t.emojiFileExtensionLarge});Object.defineProperty(exports,"emojiFileExtensionSmall",{enumerable:!0,get:()=>t.emojiFileExtensionSmall});Object.defineProperty(exports,"emojiImageUrlLarge",{enumerable:!0,get:()=>t.emojiImageUrlLarge});Object.defineProperty(exports,"emojiImageUrlSmall",{enumerable:!0,get:()=>t.emojiImageUrlSmall});exports.emojiJson=t.emojiJson;exports.emojiVersion=t.emojiVersion;exports.filterValidShortCodes=t.filterValidShortCodes;exports.findEmojis=t.findEmojis;exports.findShortCodes=t.findShortCodes;exports.getEmojiData=t.getEmojiData;exports.setCustomEmojiJson=t.setCustomEmojiJson;exports.setCustomEmojiUrl=t.setCustomEmojiUrl;exports.setEmojiAssetUrlLarge=t.setEmojiAssetUrlLarge;exports.setEmojiAssetUrlSmall=t.setEmojiAssetUrlSmall;exports.shortcodeToEmojiData=t.shortcodeToEmojiData;exports.stringToUnicode=t.stringToUnicode;exports.unicodeToString=t.unicodeToString;exports.validateCustomEmojiJson=t.validateCustomEmojiJson;exports.DtEmojiPicker=de;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./emoji_text_wrapper-9da760df.cjs"),e=require("vue");const w={class:"d-emoji-picker__search d-emoji-picker__alignment"},D={class:"d-emoji-picker__search-button"},U={__name:"emoji_search",props:{searchPlaceholderLabel:{type:String,required:!0},modelValue:{type:String,default:""}},emits:["update:modelValue"],setup(o){return(p,n)=>(e.openBlock(),e.createElementBlock("div",w,[e.createVNode(t.DtInput,{placeholder:o.searchPlaceholderLabel,"model-value":o.modelValue,"onUpdate:modelValue":n[1]||(n[1]=s=>p.$emit("update:modelValue",s))},e.createSlots({leftIcon:e.withCtx(()=>[e.createVNode(t.DtIcon,{name:"search"})]),_:2},[o.modelValue.length>0?{name:"rightIcon",fn:e.withCtx(()=>[e.createElementVNode("button",D,[e.createVNode(t.DtIcon,{name:"close",onClick:n[0]||(n[0]=s=>p.$emit("update:modelValue",""))})])]),key:"0"}:void 0]),1032,["placeholder","model-value"])]))}},I=t._export_sfc(U,[["__scopeId","data-v-20dd73b1"]]);const F={class:"d-emoji-picker__tabset"},A={__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"],setup(o,{emit:p}){const n=o,s=[{label:"Recently used",icon:"clock"},{label:"Smiley’s and people",icon:"satisfied"},{label:"Nature",icon:"living-thing"},{label:"Food",icon:"food"},{label:"Activity",icon:"object"},{label:"Travel",icon:"transportation"},{label:"Objects",icon:"lightbulb"},{label:"Symbols",icon:"heart"},{label:"Flags",icon:"flag"}],b=e.computed(()=>(n.showRecentlyUsedTab?s:s.slice(1)).map((k,f)=>({...k,label:n.tabsetLabels[f],id:(f+1).toString(),panelId:(f+1).toString()}))),c=e.computed(()=>n.emojiFilter.length>0),_=e.ref("1"),{isScrolling:u}=e.toRefs(n);e.watch(()=>n.scrollIntoTab,()=>{!u.value&&!c.value&&(_.value=(n.scrollIntoTab+1).toString())}),e.watch(c,()=>{c.value&&(_.value=null)});function g(d){u.value||(_.value=d),p("selected-tabset",d)}return(d,k)=>(e.openBlock(),e.createElementBlock("div",F,[e.createVNode(t.DtTabGroup,{"tab-list-class":"d-emoji-picker__tabset-list",selected:_.value},{tabs:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(b),f=>(e.openBlock(),e.createBlock(t.DtTab,{id:f.id,key:f.id,"panel-id":f.panelId,label:f.label,"aria-controls":"d-emoji-picker-list",onClickCapture:e.withModifiers($=>g(f.id),["stop"])},{default:e.withCtx(()=>[e.createVNode(t.DtIcon,{size:"400",name:f.icon},null,8,["name"])]),_:2},1032,["id","panel-id","label","onClickCapture"]))),128))]),_:1},8,["selected"])]))}},T="https://static.dialpadcdn.com/joypixels/png/unicode/32/";const R={class:"d-emoji-picker__selector"},q={key:0,class:"d-emoji-picker__search-label d-emoji-picker__alignment"},x={key:0},O={class:"d-emoji-picker__tab"},G=["aria-label","onClick","onFocusin","onMouseover"],P=["alt","aria-label","title","src"],M={key:2,class:"d-emoji-picker__alignment"},z={class:"d-emoji-picker__tab"},J=["aria-label","onClick","onFocusin","onMouseover"],H=["alt","aria-label","title","src"],K={__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"],setup(o,{emit:p}){const n=o,s=e.ref(null),b=e.ref(null),c=e.ref(null),_=["Recently used","People","Nature","Food","Activity","Travel","Objects","Symbols","Flags"],u=e.computed(()=>n.recentlyUsedEmojis.length?n.tabsetLabels.map(l=>({label:l,ref:e.ref(null)})):n.tabsetLabels.slice(1).map(l=>({label:l,ref:e.ref(null)}))),g=e.ref(u.value[0].label),d=e.computed(()=>n.recentlyUsedEmojis.length?_:_.slice(1)),k=e.ref([]),f=e.computed(()=>[...t.emojisGrouped[`People${n.skinTone}`],...t.emojisGrouped.Nature,...t.emojisGrouped.Food,...t.emojisGrouped[`Activity${n.skinTone}`],...t.emojisGrouped.Travel,...t.emojisGrouped[`Objects${n.skinTone}`],...t.emojisGrouped.Symbols,...t.emojisGrouped.Flags]),$=j(()=>{v()});e.watch(f,()=>{v()},{immediate:!0}),e.watch(()=>n.recentlyUsedEmojis,()=>{t.emojisGrouped["Recently used"]=n.recentlyUsedEmojis},{immediate:!0}),e.watch(()=>n.emojiFilter,()=>{V(),$()}),e.watch(()=>n.selectedTabset,l=>{L(l.tabId)},{deep:!0});function v(){const l=n.emojiFilter.toLowerCase();k.value=f.value.filter(r=>{const a=r.name.toLowerCase().includes(l),i=r.keywords.some(m=>m.toLowerCase().includes(l));return a||i})}function j(l,r=300){let a;return(...i)=>{clearTimeout(a),a=setTimeout(()=>l(...i),r)}}function E(l){return`${T+l}.png`}function C(l){l.target.parentNode.style.display="none"}function L(l){const a=u.value[l-1].ref.value[0];e.nextTick(()=>{const i=b.value,m=l==="1"?0:a.offsetTop-20;let h=!0,S=i.scrollTop;p("is-scrolling",!0),i.addEventListener("scroll",()=>{if(h){const y=i.scrollTop;(S<y&&y>=m||S>y&&y<=m)&&(h=!1,p("is-scrolling",!1)),S=y}}),i.scrollTop=m})}function V(){const l=b.value;l.scrollTop=0}function N(){c.value=new IntersectionObserver(l=>{l.forEach(r=>{var m,h,S,y,B;const{target:a}=r,i=parseInt(a.dataset.index);r.isIntersecting&&a.offsetTop<=s.value.offsetTop+50?(g.value=((m=u.value[i-1])==null?void 0:m.label)??((h=u.value[0])==null?void 0:h.label),p("scroll-into-tab",i-1)):r.boundingClientRect.bottom<=((S=s.value)==null?void 0:S.getBoundingClientRect().bottom)?(p("scroll-into-tab",i),g.value=(y=u.value[i])==null?void 0:y.label):i===1&&(p("scroll-into-tab",i),g.value=(B=u.value[0])==null?void 0:B.label)})}),c.value.observe(s.value),Array.from(b.value.children).forEach((l,r)=>{c.value.observe(l),l.dataset.index=r})}return e.onMounted(()=>{N()}),e.onUnmounted(()=>{c.value.disconnect()}),(l,r)=>(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("div",{id:"d-emoji-picker-list",ref_key:"listRef",ref:b,class:"d-emoji-picker__list"},[o.emojiFilter?(e.openBlock(),e.createElementBlock("p",q,e.toDisplayString(k.value.length>0?o.searchResultsLabel:o.searchNoResultsLabel),1)):(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"tabCategoryRef",ref:s,class:"d-emoji-picker__category d-emoji-picker__alignment"},[e.createElementVNode("p",null,e.toDisplayString(g.value),1)],512)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(u),(a,i)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:i,ref_for:!0,ref:a.ref,class:"d-emoji-picker__alignment"},[i?(e.openBlock(),e.createElementBlock("p",x,e.toDisplayString(a.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",O,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(t.emojisGrouped)[e.unref(d)[i]+o.skinTone]?e.unref(t.emojisGrouped)[e.unref(d)[i]+o.skinTone]:e.unref(t.emojisGrouped)[e.unref(d)[i]],m=>(e.openBlock(),e.createElementBlock("button",{key:m.shortname,type:"button","aria-label":m.name,onClick:h=>l.$emit("selected-emoji",m),onFocusin:h=>l.$emit("highlighted-emoji",m),onFocusout:r[0]||(r[0]=h=>l.$emit("highlighted-emoji",null)),onMouseover:h=>l.$emit("highlighted-emoji",m),onMouseleave:r[1]||(r[1]=h=>l.$emit("highlighted-emoji",null))},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:m.name,"aria-label":m.name,title:m.name,src:E(m.unicode_character),onError:C},null,40,P)],40,G))),128))])])),[[e.vShow,!o.emojiFilter]])),128)),o.emojiFilter?(e.openBlock(),e.createElementBlock("div",M,[e.createElementVNode("div",z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(k.value,a=>(e.openBlock(),e.createElementBlock("button",{key:a.shortname,type:"button","aria-label":a.name,onClick:i=>l.$emit("selected-emoji",a),onFocusin:i=>l.$emit("highlighted-emoji",a),onFocusout:r[2]||(r[2]=i=>l.$emit("highlighted-emoji",null)),onMouseover:i=>l.$emit("highlighted-emoji",a),onMouseleave:r[3]||(r[3]=i=>l.$emit("highlighted-emoji",null))},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:a.name,"aria-label":a.name,title:a.name,src:`${e.unref(T)+a.unicode_character}.png`},null,8,H)],40,J))),128))])])):e.createCommentVNode("",!0)],512)]))}},Q=t._export_sfc(K,[["__scopeId","data-v-183240d8"]]);const W={class:"d-emoji-picker__skin-list"},X=["onClick"],Y=["alt","aria-label","title","src"],Z={class:"d-emoji-picker__skin-selected"},ee=["alt","aria-label","title","src"],te={__name:"emoji_skin_selector",props:{skinTone:{type:String,required:!0},isHovering:{type:Boolean,default:!1},skinSelectorButtonTooltipLabel:{type:String,required:!0}},emits:["skin-tone"],setup(o,{emit:p}){const n=o,s=[{name:":wave_tone1:",unicode_output:"1f44b-1f3fb",skinTone:"Light",skinCode:"_tone1"},{name:":wave_tone2:",unicode_output:"1f44b-1f3fc",skinTone:"MediumLight",skinCode:"_tone2"},{name:":wave_tone3:",unicode_output:"1f44b-1f3fd",skinTone:"Medium",skinCode:"_tone3"},{name:":wave_tone4:",unicode_output:"1f44b-1f3fe",skinTone:"MediumDark",skinCode:"_tone4"},{name:":wave_tone5:",unicode_output:"1f44b-1f3ff",skinTone:"Dark",skinCode:"_tone5"},{name:":wave:",unicode_output:"1f44b",skinTone:"Default",skinCode:""}],b=e.ref(s.find(u=>u.skinTone===n.skinTone)),c=e.ref(!1);e.watchEffect(()=>n.isHovering&&(c.value=!1));function _(u){b.value=u,c.value=!1,p("skin-tone",u.skinTone)}return(u,g)=>(e.openBlock(),e.createElementBlock("div",null,[e.withDirectives(e.createElementVNode("div",W,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(s,d=>e.createElementVNode("button",{key:d.name,class:e.normalizeClass({selected:b.value.skinCode===d.skinCode}),onClick:k=>_(d)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:d.name,"aria-label":d.name,title:d.name,src:`${e.unref(T)+d.unicode_output}.png`},null,8,Y)],10,X)),64))],512),[[e.vShow,c.value]]),e.withDirectives(e.createElementVNode("div",Z,[e.createVNode(t.DtTooltip,{placement:"top-end"},{anchor:e.withCtx(()=>[e.createElementVNode("button",{onClick:g[0]||(g[0]=d=>c.value=!0)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:b.value.name,"aria-label":b.value.name,title:b.value.name,src:`${e.unref(T)+b.value.unicode_output}.png`},null,8,ee)])]),default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.skinSelectorButtonTooltipLabel)+" ",1)]),_:1})],512),[[e.vShow,!c.value]])]))}},oe=t._export_sfc(te,[["__scopeId","data-v-5c3fd4f6"]]);const le={class:"d-emoji-picker__data"},ne=["alt","aria-label","title","src"],ie={__name:"emoji_description",props:{emoji:{type:Object,default:null}},setup(o){return(p,n)=>{var s;return e.openBlock(),e.createElementBlock("div",le,[o.emoji?(e.openBlock(),e.createElementBlock("img",{key:0,class:"d-icon d-icon--size-500",alt:o.emoji.name,"aria-label":o.emoji.name,title:o.emoji.name,src:`${e.unref(T)+o.emoji.unicode_character}.png`},null,8,ne)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString((s=o.emoji)==null?void 0:s.name),1)])}}},se=t._export_sfc(ie,[["__scopeId","data-v-48c61881"]]);const ae={class:"d-emoji-picker"},re={class:"d-emoji-picker--header"},ce={class:"d-emoji-picker--body"},ue={class:"d-emoji-picker--footer"},de={__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"],setup(o,{emit:p}){const n=o,s=e.ref(""),b=e.ref(null),c=e.ref({}),_=e.ref(0),u=e.ref(!1),g=e.computed(()=>n.recentlyUsedEmojis.length>0);function d(v){s.value="",c.value=v,c.value={...c.value,tabId:v}}function k(v){_.value=v}function f(v){u.value=v}function $(v){b.value=v}return(v,j)=>(e.openBlock(),e.createElementBlock("div",ae,[e.createElementVNode("div",re,[e.createVNode(A,{"emoji-filter":s.value,"show-recently-used-tab":e.unref(g),"scroll-into-tab":_.value,"tabset-labels":o.tabSetLabels,"is-scrolling":u.value,onSelectedTabset:d},null,8,["emoji-filter","show-recently-used-tab","scroll-into-tab","tabset-labels","is-scrolling"])]),e.createElementVNode("div",ce,[e.createVNode(I,{modelValue:s.value,"onUpdate:modelValue":j[0]||(j[0]=E=>s.value=E),"search-placeholder-label":o.searchPlaceholderLabel},null,8,["modelValue","search-placeholder-label"]),e.createVNode(Q,{"emoji-filter":s.value,"skin-tone":o.skinTone,"tabset-labels":o.tabSetLabels,"search-results-label":o.searchResultsLabel,"search-no-results-label":o.searchNoResultsLabel,"recently-used-emojis":o.recentlyUsedEmojis,"selected-tabset":c.value,onScrollIntoTab:k,onIsScrolling:f,onHighlightedEmoji:$,onSelectedEmoji:j[1]||(j[1]=E=>p("selected-emoji",E))},null,8,["emoji-filter","skin-tone","tabset-labels","search-results-label","search-no-results-label","recently-used-emojis","selected-tabset"])]),e.createElementVNode("div",ue,[e.createVNode(se,{emoji:b.value},null,8,["emoji"]),e.createVNode(oe,{"is-hovering":!!b.value,"skin-selector-button-tooltip-label":o.skinSelectorButtonTooltipLabel,"skin-tone":o.skinTone,onSkinTone:j[2]||(j[2]=E=>p("skin-tone",E))},null,8,["is-hovering","skin-selector-button-tooltip-label","skin-tone"])])]))}};exports.DtEmoji=t.DtEmoji;exports.DtEmojiTextWrapper=t._sfc_main;exports.codeToEmojiData=t.codeToEmojiData;Object.defineProperty(exports,"customEmojiAssetUrl",{enumerable:!0,get:()=>t.customEmojiAssetUrl});exports.defaultEmojiAssetUrl=t.defaultEmojiAssetUrl;Object.defineProperty(exports,"emojiFileExtensionLarge",{enumerable:!0,get:()=>t.emojiFileExtensionLarge});Object.defineProperty(exports,"emojiFileExtensionSmall",{enumerable:!0,get:()=>t.emojiFileExtensionSmall});Object.defineProperty(exports,"emojiImageUrlLarge",{enumerable:!0,get:()=>t.emojiImageUrlLarge});Object.defineProperty(exports,"emojiImageUrlSmall",{enumerable:!0,get:()=>t.emojiImageUrlSmall});exports.emojiJson=t.emojiJson;exports.emojiVersion=t.emojiVersion;exports.filterValidShortCodes=t.filterValidShortCodes;exports.findEmojis=t.findEmojis;exports.findShortCodes=t.findShortCodes;exports.getEmojiData=t.getEmojiData;exports.setCustomEmojiJson=t.setCustomEmojiJson;exports.setCustomEmojiUrl=t.setCustomEmojiUrl;exports.setEmojiAssetUrlLarge=t.setEmojiAssetUrlLarge;exports.setEmojiAssetUrlSmall=t.setEmojiAssetUrlSmall;exports.shortcodeToEmojiData=t.shortcodeToEmojiData;exports.stringToUnicode=t.stringToUnicode;exports.unicodeToString=t.unicodeToString;exports.validateCustomEmojiJson=t.validateCustomEmojiJson;exports.DtEmojiPicker=de;
package/dist/emoji.js CHANGED
@@ -1,5 +1,5 @@
1
- import { _ as N, t as Q, D as B, J as W, K as X, a7 as k, w as Y } from "./emoji_text_wrapper-206321c9.js";
2
- import { y as Je, x as Ge, ap as Ke, aa as Qe, a9 as We, ae as Xe, ac as Ye, ad as Ze, ab as et, af as tt, a8 as lt, ar as ot, as as st, aq as nt, ag as at, ak as it, aj as rt, ai as ct, ah as ut, am as dt, ao as mt, an as bt, al as _t } from "./emoji_text_wrapper-206321c9.js";
1
+ import { _ as N, t as Q, D as B, J as W, K as X, a7 as k, w as Y } from "./emoji_text_wrapper-746c639d.js";
2
+ import { y as Je, x as Ge, ap as Ke, aa as Qe, a9 as We, ae as Xe, ac as Ye, ad as Ze, ab as et, af as tt, a8 as lt, ar as ot, as as st, aq as nt, ag as at, ak as it, aj as rt, ai as ct, ah as ut, am as dt, ao as mt, an as bt, al as _t } from "./emoji_text_wrapper-746c639d.js";
3
3
  import { openBlock as i, createElementBlock as d, createVNode as T, createSlots as Z, withCtx as F, createElementVNode as v, computed as D, ref as f, toRefs as ee, watch as w, Fragment as U, renderList as R, unref as h, createBlock as te, withModifiers as le, nextTick as oe, onMounted as se, onUnmounted as ne, toDisplayString as A, withDirectives as M, createCommentVNode as O, vShow as x, watchEffect as ae, normalizeClass as ie, createTextVNode as P } from "vue";
4
4
  const re = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ce = { class: "d-emoji-picker__search-button" }, ue = {
5
5
  __name: "emoji_search",
@@ -16284,7 +16284,7 @@ function zme(e, t, o, n, c, r) {
16284
16284
  c.hasSlotContent(e.$slots.default) ? (i(), s("span", {
16285
16285
  key: 1,
16286
16286
  "data-qa": "dt-button-label",
16287
- class: T(["d-w100p", "d-btn__label", "base-button__label", o.labelClass])
16287
+ class: T(["d-btn__label", "base-button__label", o.labelClass])
16288
16288
  }, [
16289
16289
  oe(e.$slots, "default")
16290
16290
  ], 2)) : te("", !0)