@dialpad/dialtone-vue 4.4.1 → 4.5.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.
Files changed (196) hide show
  1. package/dist/{Datepicker-CGFa1nGm.js → Datepicker-D-Lgvthq.js} +17 -5
  2. package/dist/Datepicker-D-Lgvthq.js.map +1 -0
  3. package/dist/Datepicker-DmKOuf5y.cjs +2 -0
  4. package/dist/Datepicker-DmKOuf5y.cjs.map +1 -0
  5. package/dist/EmojiPicker-CXFd-iVj.cjs +2 -0
  6. package/dist/EmojiPicker-CXFd-iVj.cjs.map +1 -0
  7. package/dist/{EmojiPicker-BllVwJf4.js → EmojiPicker-D46lLRMp.js} +75 -41
  8. package/dist/EmojiPicker-D46lLRMp.js.map +1 -0
  9. package/dist/{ForceLinkify-bO3ug94b.js → ForceLinkify-DuAo3TMB.js} +1 -1
  10. package/dist/{ForceLinkify-bO3ug94b.js.map → ForceLinkify-DuAo3TMB.js.map} +1 -1
  11. package/dist/{ForceLinkify-CI1tkUBf.cjs → ForceLinkify-kQ_kWKVm.cjs} +1 -1
  12. package/dist/{ForceLinkify-CI1tkUBf.cjs.map → ForceLinkify-kQ_kWKVm.cjs.map} +1 -1
  13. package/dist/{MarkdownRenderer-B6oyniLV.cjs → MarkdownRenderer-C5wdjC5_.cjs} +1 -1
  14. package/dist/{MarkdownRenderer-B6oyniLV.cjs.map → MarkdownRenderer-C5wdjC5_.cjs.map} +1 -1
  15. package/dist/{MarkdownRenderer-D-EV50_M.js → MarkdownRenderer-eMwmPygx.js} +1 -1
  16. package/dist/{MarkdownRenderer-D-EV50_M.js.map → MarkdownRenderer-eMwmPygx.js.map} +1 -1
  17. package/dist/RichTextEditor-7eY8gy9u.cjs +11 -0
  18. package/dist/RichTextEditor-7eY8gy9u.cjs.map +1 -0
  19. package/dist/{RichTextEditor-Cz2VXb7-.js → RichTextEditor-DaOHmXD_.js} +362 -1254
  20. package/dist/RichTextEditor-DaOHmXD_.js.map +1 -0
  21. package/dist/{Scroller-JDoDYC5V.js → Scroller-B1xwv6TG.js} +1 -1
  22. package/dist/{Scroller-JDoDYC5V.js.map → Scroller-B1xwv6TG.js.map} +1 -1
  23. package/dist/{Scroller-Du2kJsTR.cjs → Scroller-pAU8UWIH.cjs} +1 -1
  24. package/dist/{Scroller-Du2kJsTR.cjs.map → Scroller-pAU8UWIH.cjs.map} +1 -1
  25. package/dist/Slider-D2cDYZcJ.cjs +2 -0
  26. package/dist/Slider-D2cDYZcJ.cjs.map +1 -0
  27. package/dist/Slider-Du45PVLU.js +1188 -0
  28. package/dist/Slider-Du45PVLU.js.map +1 -0
  29. package/dist/{TextList-D40u4g4T.js → TextList-7RwngSie.js} +1 -1
  30. package/dist/{TextList-D40u4g4T.js.map → TextList-7RwngSie.js.map} +1 -1
  31. package/dist/{TextList-rS1MQdPB.cjs → TextList-CLUdOdlp.cjs} +1 -1
  32. package/dist/{TextList-rS1MQdPB.cjs.map → TextList-CLUdOdlp.cjs.map} +1 -1
  33. package/dist/{TextListItem-CF6DzdvT.cjs → TextListItem-B-bhrqik.cjs} +1 -1
  34. package/dist/{TextListItem-CF6DzdvT.cjs.map → TextListItem-B-bhrqik.cjs.map} +1 -1
  35. package/dist/{TextListItem-PHgDIWV1.js → TextListItem-D0UmIR_q.js} +1 -1
  36. package/dist/{TextListItem-PHgDIWV1.js.map → TextListItem-D0UmIR_q.js.map} +1 -1
  37. package/dist/{Toast-CN9x3jKH.cjs → Toast-57Ts-hX9.cjs} +1 -1
  38. package/dist/{Toast-CN9x3jKH.cjs.map → Toast-57Ts-hX9.cjs.map} +1 -1
  39. package/dist/{Toast-DVUE2_fV.js → Toast-BNhGD6l8.js} +1 -1
  40. package/dist/{Toast-DVUE2_fV.js.map → Toast-BNhGD6l8.js.map} +1 -1
  41. package/dist/component-documentation.json +1 -1
  42. package/dist/components/ButtonGroup/ButtonGroup.vue.d.ts.map +1 -1
  43. package/dist/components/Codeblock/Codeblock.vue.d.ts.map +1 -1
  44. package/dist/components/Datepicker/Datepicker.vue.d.ts.map +1 -1
  45. package/dist/components/Datepicker/Modules/Calendar.vue.d.ts.map +1 -1
  46. package/dist/components/Datepicker/Modules/MonthYearPicker.vue.d.ts.map +1 -1
  47. package/dist/components/DescriptionList/DescriptionList.vue.d.ts.map +1 -1
  48. package/dist/components/Emoji/Emoji.vue.d.ts.map +1 -1
  49. package/dist/components/EmojiPicker/EmojiPicker.vue.d.ts.map +1 -1
  50. package/dist/components/EmojiPicker/Modules/EmojiDescription.vue.d.ts.map +1 -1
  51. package/dist/components/EmojiPicker/Modules/EmojiSearch.vue.d.ts.map +1 -1
  52. package/dist/components/EmojiPicker/Modules/EmojiSelector.vue.d.ts.map +1 -1
  53. package/dist/components/EmojiPicker/Modules/EmojiSkinSelector.vue.d.ts.map +1 -1
  54. package/dist/components/EmojiPicker/Modules/EmojiTabset.vue.d.ts.map +1 -1
  55. package/dist/components/EmptyState/EmptyState.vue.d.ts.map +1 -1
  56. package/dist/components/KeyboardShortcut/KeyboardShortcut.vue.d.ts.map +1 -1
  57. package/dist/components/LazyShow/LazyShow.vue.d.ts.map +1 -1
  58. package/dist/components/ModeIsland/ModeIsland.vue.d.ts.map +1 -1
  59. package/dist/components/MotionText/MotionText.vue.d.ts.map +1 -1
  60. package/dist/components/MotionText/MotionTextConstants.d.ts +72 -0
  61. package/dist/components/MotionText/MotionTextConstants.d.ts.map +1 -1
  62. package/dist/components/MotionText/index.d.ts +1 -1
  63. package/dist/components/MotionText/utils.d.ts +9 -0
  64. package/dist/components/MotionText/utils.d.ts.map +1 -0
  65. package/dist/components/Skeleton/Skeleton.vue.d.ts.map +1 -1
  66. package/dist/components/Slider/Composables/UseSliderCollisionAvoidance.d.ts +25 -0
  67. package/dist/components/Slider/Composables/UseSliderCollisionAvoidance.d.ts.map +1 -0
  68. package/dist/components/Slider/Composables/UseSliderDevWarnings.d.ts +5 -0
  69. package/dist/components/Slider/Composables/UseSliderDevWarnings.d.ts.map +1 -0
  70. package/dist/components/Slider/Composables/UseSliderDirection.d.ts +4 -0
  71. package/dist/components/Slider/Composables/UseSliderDirection.d.ts.map +1 -0
  72. package/dist/components/Slider/Composables/UseSliderGeometry.d.ts +88 -0
  73. package/dist/components/Slider/Composables/UseSliderGeometry.d.ts.map +1 -0
  74. package/dist/components/Slider/Composables/UseSliderInteraction.d.ts +33 -0
  75. package/dist/components/Slider/Composables/UseSliderInteraction.d.ts.map +1 -0
  76. package/dist/components/Slider/Composables/UseSliderMagneticSnap.d.ts +8 -0
  77. package/dist/components/Slider/Composables/UseSliderMagneticSnap.d.ts.map +1 -0
  78. package/dist/components/Slider/Composables/UseSliderMarksAndTicks.d.ts +13 -0
  79. package/dist/components/Slider/Composables/UseSliderMarksAndTicks.d.ts.map +1 -0
  80. package/dist/components/Slider/Composables/UseSliderTooltipReadout.d.ts +10 -0
  81. package/dist/components/Slider/Composables/UseSliderTooltipReadout.d.ts.map +1 -0
  82. package/dist/components/Slider/Composables/UseSliderValue.d.ts +16 -0
  83. package/dist/components/Slider/Composables/UseSliderValue.d.ts.map +1 -0
  84. package/dist/components/Slider/Slider.vue.d.ts +304 -0
  85. package/dist/components/Slider/Slider.vue.d.ts.map +1 -0
  86. package/dist/components/Slider/SliderConstants.d.ts +7 -0
  87. package/dist/components/Slider/SliderConstants.d.ts.map +1 -0
  88. package/dist/components/Slider/index.d.ts +3 -0
  89. package/dist/components/Slider/index.d.ts.map +1 -0
  90. package/dist/components/Slider/utils.d.ts +8 -0
  91. package/dist/components/Slider/utils.d.ts.map +1 -0
  92. package/dist/dialtone-vue.cjs +1 -1
  93. package/dist/dialtone-vue.js +26 -24
  94. package/dist/floating-ui.dom-D2zQ_96p.cjs +2 -0
  95. package/dist/floating-ui.dom-D2zQ_96p.cjs.map +1 -0
  96. package/dist/floating-ui.dom-j5GI2lJG.js +963 -0
  97. package/dist/floating-ui.dom-j5GI2lJG.js.map +1 -0
  98. package/dist/index.d.ts +1 -0
  99. package/dist/lib/button-group/button-group.cjs +1 -1
  100. package/dist/lib/button-group/button-group.cjs.map +1 -1
  101. package/dist/lib/button-group/button-group.js +2 -1
  102. package/dist/lib/button-group/button-group.js.map +1 -1
  103. package/dist/lib/codeblock/codeblock.cjs +1 -1
  104. package/dist/lib/codeblock/codeblock.cjs.map +1 -1
  105. package/dist/lib/codeblock/codeblock.js +7 -1
  106. package/dist/lib/codeblock/codeblock.js.map +1 -1
  107. package/dist/lib/datepicker/datepicker.cjs +1 -1
  108. package/dist/lib/datepicker/datepicker.js +1 -1
  109. package/dist/lib/datepicker/index.cjs +1 -1
  110. package/dist/lib/datepicker/index.js +1 -1
  111. package/dist/lib/description-list/description-list.cjs +1 -1
  112. package/dist/lib/description-list/description-list.cjs.map +1 -1
  113. package/dist/lib/description-list/description-list.js +14 -5
  114. package/dist/lib/description-list/description-list.js.map +1 -1
  115. package/dist/lib/emoji/emoji.cjs +1 -1
  116. package/dist/lib/emoji/emoji.cjs.map +1 -1
  117. package/dist/lib/emoji/emoji.js +5 -1
  118. package/dist/lib/emoji/emoji.js.map +1 -1
  119. package/dist/lib/emoji-picker/emoji-picker.cjs +1 -1
  120. package/dist/lib/emoji-picker/emoji-picker.js +1 -1
  121. package/dist/lib/emoji-picker/index.cjs +1 -1
  122. package/dist/lib/emoji-picker/index.js +1 -1
  123. package/dist/lib/empty-state/empty-state.cjs +1 -1
  124. package/dist/lib/empty-state/empty-state.cjs.map +1 -1
  125. package/dist/lib/empty-state/empty-state.js +6 -3
  126. package/dist/lib/empty-state/empty-state.js.map +1 -1
  127. package/dist/lib/keyboard-shortcut/keyboard-shortcut.cjs +1 -1
  128. package/dist/lib/keyboard-shortcut/keyboard-shortcut.cjs.map +1 -1
  129. package/dist/lib/keyboard-shortcut/keyboard-shortcut.js +8 -2
  130. package/dist/lib/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
  131. package/dist/lib/lazy-show/lazy-show.cjs +1 -1
  132. package/dist/lib/lazy-show/lazy-show.cjs.map +1 -1
  133. package/dist/lib/lazy-show/lazy-show.js +10 -10
  134. package/dist/lib/lazy-show/lazy-show.js.map +1 -1
  135. package/dist/lib/mode-island/mode-island.cjs +1 -1
  136. package/dist/lib/mode-island/mode-island.cjs.map +1 -1
  137. package/dist/lib/mode-island/mode-island.js +1 -0
  138. package/dist/lib/mode-island/mode-island.js.map +1 -1
  139. package/dist/lib/motion-text/index.cjs +1 -1
  140. package/dist/lib/motion-text/index.js +3 -3
  141. package/dist/lib/motion-text/motion-text-constants.cjs +1 -1
  142. package/dist/lib/motion-text/motion-text-constants.cjs.map +1 -1
  143. package/dist/lib/motion-text/motion-text-constants.js +64 -2
  144. package/dist/lib/motion-text/motion-text-constants.js.map +1 -1
  145. package/dist/lib/motion-text/motion-text.cjs +1 -1
  146. package/dist/lib/motion-text/motion-text.cjs.map +1 -1
  147. package/dist/lib/motion-text/motion-text.js +186 -146
  148. package/dist/lib/motion-text/motion-text.js.map +1 -1
  149. package/dist/lib/motion-text/utils.cjs +2 -0
  150. package/dist/lib/motion-text/utils.cjs.map +1 -0
  151. package/dist/lib/motion-text/utils.js +24 -0
  152. package/dist/lib/motion-text/utils.js.map +1 -0
  153. package/dist/lib/rich-text-editor/force-linkify.cjs +1 -1
  154. package/dist/lib/rich-text-editor/force-linkify.js +1 -1
  155. package/dist/lib/rich-text-editor/index.cjs +1 -1
  156. package/dist/lib/rich-text-editor/index.js +1 -1
  157. package/dist/lib/rich-text-editor/markdown-renderer.cjs +1 -1
  158. package/dist/lib/rich-text-editor/markdown-renderer.js +1 -1
  159. package/dist/lib/rich-text-editor/rich-text-editor.cjs +1 -1
  160. package/dist/lib/rich-text-editor/rich-text-editor.js +1 -1
  161. package/dist/lib/scroller/index.cjs +1 -1
  162. package/dist/lib/scroller/index.js +1 -1
  163. package/dist/lib/scroller/scroller.cjs +1 -1
  164. package/dist/lib/scroller/scroller.js +1 -1
  165. package/dist/lib/skeleton/skeleton.cjs +1 -1
  166. package/dist/lib/skeleton/skeleton.cjs.map +1 -1
  167. package/dist/lib/skeleton/skeleton.js +1 -0
  168. package/dist/lib/skeleton/skeleton.js.map +1 -1
  169. package/dist/lib/slider/index.cjs +1 -0
  170. package/dist/lib/slider/index.js +2 -0
  171. package/dist/lib/slider/slider.cjs +1 -0
  172. package/dist/lib/slider/slider.js +2 -0
  173. package/dist/lib/slider/utils.cjs +2 -0
  174. package/dist/lib/slider/utils.cjs.map +1 -0
  175. package/dist/lib/slider/utils.js +32 -0
  176. package/dist/lib/slider/utils.js.map +1 -0
  177. package/dist/lib/text-list/index.cjs +1 -1
  178. package/dist/lib/text-list/index.js +2 -2
  179. package/dist/lib/text-list/text-list-item.cjs +1 -1
  180. package/dist/lib/text-list/text-list-item.js +1 -1
  181. package/dist/lib/text-list/text-list.cjs +1 -1
  182. package/dist/lib/text-list/text-list.js +1 -1
  183. package/dist/lib/toast/index.cjs +1 -1
  184. package/dist/lib/toast/index.js +1 -1
  185. package/dist/lib/toast/toast.cjs +1 -1
  186. package/dist/lib/toast/toast.js +1 -1
  187. package/package.json +5 -5
  188. package/dist/Datepicker-CGFa1nGm.js.map +0 -1
  189. package/dist/Datepicker-DkGmnVc8.cjs +0 -2
  190. package/dist/Datepicker-DkGmnVc8.cjs.map +0 -1
  191. package/dist/EmojiPicker-BllVwJf4.js.map +0 -1
  192. package/dist/EmojiPicker-KO1yhODv.cjs +0 -2
  193. package/dist/EmojiPicker-KO1yhODv.cjs.map +0 -1
  194. package/dist/RichTextEditor-Cz2VXb7-.js.map +0 -1
  195. package/dist/RichTextEditor-EHgahp8r.cjs +0 -11
  196. package/dist/RichTextEditor-EHgahp8r.cjs.map +0 -1
@@ -10,7 +10,10 @@ import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p
10
10
  import { DtIconClock as I, DtIconClose as L, DtIconDialpadStar as R, DtIconFlag as z, DtIconFood as B, DtIconHeart as V, DtIconLightbulb as H, DtIconLivingThing as U, DtIconObject as W, DtIconSatisfied as ee, DtIconSearch as te, DtIconTransportation as G } from "@dialpad/dialtone-icons/vue";
11
11
  import { emojisGrouped as K } from "@dialpad/dialtone-emojis";
12
12
  //#region components/EmojiPicker/Modules/EmojiSearch.vue
13
- var q = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, J = {
13
+ var q = {
14
+ class: "d-emoji-picker__search d-emoji-picker__alignment",
15
+ "data-qa": "dt-emoji-picker-search"
16
+ }, J = {
14
17
  __name: "EmojiSearch",
15
18
  props: {
16
19
  searchPlaceholderLabel: {
@@ -69,7 +72,10 @@ var q = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, J = {
69
72
  key: "0"
70
73
  } : void 0]), 1032, ["placeholder", "model-value"])]));
71
74
  }
72
- }, Y = { class: "d-emoji-picker__tabset" }, X = {
75
+ }, Y = {
76
+ class: "d-emoji-picker__tabset",
77
+ "data-qa": "dt-emoji-picker-tabset"
78
+ }, X = {
73
79
  __name: "EmojiTabset",
74
80
  props: {
75
81
  showRecentlyUsedTab: {
@@ -275,33 +281,37 @@ function ne() {
275
281
  }
276
282
  //#endregion
277
283
  //#region components/EmojiPicker/Modules/EmojiSelector.vue
278
- var re = { class: "d-emoji-picker__selector" }, ie = {
284
+ var re = {
285
+ class: "d-emoji-picker__selector",
286
+ "data-qa": "dt-emoji-picker-selector"
287
+ }, ie = {
279
288
  key: 0,
280
- class: "d-emoji-picker__search-label d-emoji-picker__alignment"
281
- }, ae = { key: 0 }, oe = { class: "d-emoji-picker__tab" }, se = [
289
+ class: "d-emoji-picker__search-label d-emoji-picker__alignment",
290
+ "data-qa": "dt-emoji-picker-search-results-label"
291
+ }, ae = { "data-qa": "dt-emoji-picker-sticky-label" }, oe = { key: 0 }, se = { class: "d-emoji-picker__tab" }, ce = [
282
292
  "aria-label",
283
293
  "onClick",
284
294
  "onFocusin",
285
295
  "onMouseover",
286
296
  "onKeydown"
287
- ], ce = [
297
+ ], le = [
288
298
  "alt",
289
299
  "aria-label",
290
300
  "title",
291
301
  "src"
292
- ], le = {
302
+ ], ue = {
293
303
  key: 2,
294
304
  class: "d-emoji-picker__alignment"
295
- }, ue = {
305
+ }, de = {
296
306
  class: "d-emoji-picker__tab",
297
307
  "data-qa": "filtered-emojis"
298
- }, de = [
308
+ }, fe = [
299
309
  "aria-label",
300
310
  "onClick",
301
311
  "onFocusin",
302
312
  "onMouseover",
303
313
  "onKeydown"
304
- ], fe = [
314
+ ], pe = [
305
315
  "alt",
306
316
  "aria-label",
307
317
  "title",
@@ -462,7 +472,7 @@ var re = { class: "d-emoji-picker__selector" }, ie = {
462
472
  break;
463
473
  default: break;
464
474
  }
465
- }, pe = (e, t, n, r) => {
475
+ }, me = (e, t, n, r) => {
466
476
  if (e.preventDefault(), Object.values(s).includes(e.key)) {
467
477
  E(e.key, t, n);
468
478
  return;
@@ -486,10 +496,10 @@ var re = { class: "d-emoji-picker__selector" }, ie = {
486
496
  function $(e) {
487
497
  i("highlighted-emoji", e);
488
498
  }
489
- function me() {
499
+ function he() {
490
500
  _(0, 0);
491
501
  }
492
- function he() {
502
+ function ge() {
493
503
  q(R.value.length, !0);
494
504
  }
495
505
  return S(() => {
@@ -497,8 +507,8 @@ var re = { class: "d-emoji-picker__selector" }, ie = {
497
507
  }), x(() => {
498
508
  P.value.disconnect(), M.value.removeEventListener("scroll", H);
499
509
  }), t({
500
- focusEmojiSelector: me,
501
- focusLastEmoji: he
510
+ focusEmojiSelector: he,
511
+ focusLastEmoji: ge
502
512
  }), (t, n) => (C(), m("div", re, [h("div", {
503
513
  id: "d-emoji-picker-list",
504
514
  ref_key: "listRef",
@@ -510,18 +520,20 @@ var re = { class: "d-emoji-picker__selector" }, ie = {
510
520
  ref_key: "tabCategoryRef",
511
521
  ref: j,
512
522
  class: "d-emoji-picker__category d-emoji-picker__alignment"
513
- }, [h("p", null, D(L.value), 1)], 512)),
523
+ }, [h("p", ae, D(L.value), 1)], 512)),
514
524
  (C(!0), m(u, null, T(I.value, (t, r) => N((C(), m("div", {
515
525
  key: r,
516
526
  ref_for: !0,
517
527
  ref: t.ref,
528
+ "data-qa": "dt-emoji-picker-group",
518
529
  class: "d-emoji-picker__alignment"
519
- }, [r ? (C(), m("p", ae, D(t.label), 1)) : p("", !0), h("div", oe, [(C(!0), m(u, null, T(O(K)[R.value[r] + e.skinTone] ? O(K)[R.value[r] + e.skinTone] : O(K)[R.value[r]], (e, t) => (C(), m("button", {
530
+ }, [r ? (C(), m("p", oe, D(t.label), 1)) : p("", !0), h("div", se, [(C(!0), m(u, null, T(O(K)[R.value[r] + e.skinTone] ? O(K)[R.value[r] + e.skinTone] : O(K)[R.value[r]], (e, t) => (C(), m("button", {
520
531
  key: e.shortname,
521
532
  ref_for: !0,
522
533
  ref: (e) => {
523
534
  e && O(f)(e, r, t);
524
535
  },
536
+ "data-qa": "dt-emoji-picker-emoji",
525
537
  type: "button",
526
538
  "aria-label": e.name,
527
539
  onClick: (t) => Q(e, t),
@@ -529,7 +541,7 @@ var re = { class: "d-emoji-picker__selector" }, ie = {
529
541
  onFocusout: n[0] || (n[0] = (e) => $(null)),
530
542
  onMouseover: (t) => $(e),
531
543
  onMouseleave: n[1] || (n[1] = (e) => $(null)),
532
- onKeydown: (n) => pe(n, r, t, e)
544
+ onKeydown: (n) => me(n, r, t, e)
533
545
  }, [h("img", {
534
546
  class: "d-icon d-icon--size-500",
535
547
  alt: e.name,
@@ -537,13 +549,14 @@ var re = { class: "d-emoji-picker__selector" }, ie = {
537
549
  title: e.name,
538
550
  src: te(e),
539
551
  onError: G
540
- }, null, 40, ce)], 40, se))), 128))])])), [[k, !e.emojiFilter]])), 128)),
541
- e.emojiFilter ? (C(), m("div", le, [h("div", ue, [(C(!0), m(u, null, T(z.value, (e, t) => (C(), m("button", {
552
+ }, null, 40, le)], 40, ce))), 128))])])), [[k, !e.emojiFilter]])), 128)),
553
+ e.emojiFilter ? (C(), m("div", ue, [h("div", de, [(C(!0), m(u, null, T(z.value, (e, t) => (C(), m("button", {
542
554
  key: e.shortname,
543
555
  ref_for: !0,
544
556
  ref: (e) => {
545
557
  e && O(g)(e, t);
546
558
  },
559
+ "data-qa": "dt-emoji-picker-emoji",
547
560
  type: "button",
548
561
  "aria-label": e.name,
549
562
  class: b({ "hover-emoji": t === 0 && O(l) }),
@@ -559,20 +572,23 @@ var re = { class: "d-emoji-picker__selector" }, ie = {
559
572
  "aria-label": e.name,
560
573
  title: e.name,
561
574
  src: `${O(c) + e.unicode_character}.png`
562
- }, null, 8, fe)], 42, de))), 128))])])) : p("", !0)
575
+ }, null, 8, pe)], 42, fe))), 128))])])) : p("", !0)
563
576
  ], 512)]));
564
577
  }
565
- }, pe = { "data-qa": "skin-selector" }, Q = { class: "d-emoji-picker__skin-list" }, $ = ["onKeydown", "onClick"], me = [
578
+ }, me = { "data-qa": "skin-selector" }, Q = {
579
+ class: "d-emoji-picker__skin-list",
580
+ "data-qa": "dt-emoji-picker-skin-list"
581
+ }, $ = ["onKeydown", "onClick"], he = [
566
582
  "alt",
567
583
  "aria-label",
568
584
  "title",
569
585
  "src"
570
- ], he = { class: "d-emoji-picker__skin-selected" }, ge = ["aria-label"], _e = [
586
+ ], ge = { class: "d-emoji-picker__skin-selected" }, _e = ["aria-label"], ve = [
571
587
  "alt",
572
588
  "aria-label",
573
589
  "title",
574
590
  "src"
575
- ], ve = {
591
+ ], ye = {
576
592
  __name: "EmojiSkinSelector",
577
593
  props: {
578
594
  skinTone: {
@@ -650,12 +666,13 @@ var re = { class: "d-emoji-picker__selector" }, ie = {
650
666
  function F() {
651
667
  s.value = !s.value, y(() => p.value[0].focus());
652
668
  }
653
- return t({ focusSkinSelector: E }), (t, n) => (C(), m("div", pe, [N(h("div", Q, [(C(), m(u, null, T(o, (e, t) => h("button", {
669
+ return t({ focusSkinSelector: E }), (t, n) => (C(), m("div", me, [N(h("div", Q, [(C(), m(u, null, T(o, (e, t) => h("button", {
654
670
  ref_for: !0,
655
671
  ref: (e) => {
656
672
  e && S(e);
657
673
  },
658
674
  key: e.name,
675
+ "data-qa": "dt-emoji-picker-skin-option",
659
676
  class: b({ selected: x.value.skinCode === e.skinCode }),
660
677
  onKeydown: (n) => P(n, e, t),
661
678
  onClick: (t) => A(e)
@@ -665,10 +682,11 @@ var re = { class: "d-emoji-picker__selector" }, ie = {
665
682
  "aria-label": e.name,
666
683
  title: e.name,
667
684
  src: `${O(c) + e.unicode_output}.png`
668
- }, null, 8, me)], 42, $)), 64))], 512), [[k, s.value]]), N(h("div", he, [v(O(r), { placement: "top-end" }, {
685
+ }, null, 8, he)], 42, $)), 64))], 512), [[k, s.value]]), N(h("div", ge, [v(O(r), { placement: "top-end" }, {
669
686
  anchor: M(() => [h("button", {
670
687
  ref_key: "skinSelectorRef",
671
688
  ref: f,
689
+ "data-qa": "dt-emoji-picker-skin-toggle",
672
690
  "aria-label": e.skinSelectorButtonTooltipLabel,
673
691
  tabindex: "-1",
674
692
  onClick: F,
@@ -678,18 +696,22 @@ var re = { class: "d-emoji-picker__selector" }, ie = {
678
696
  alt: x.value.name,
679
697
  "aria-label": x.value.name,
680
698
  title: x.value.name,
681
- src: `${O(c) + x.value.unicode_output}.png`
682
- }, null, 8, _e)], 40, ge)]),
699
+ src: `${O(c) + x.value.unicode_output}.png`,
700
+ "data-qa": "dt-emoji-picker-skin-image"
701
+ }, null, 8, ve)], 40, _e)]),
683
702
  default: M(() => [_(D(e.skinSelectorButtonTooltipLabel) + " ", 1)]),
684
703
  _: 1
685
704
  })], 512), [[k, !s.value]])]));
686
705
  }
687
- }, ye = { class: "d-emoji-picker__data" }, be = [
706
+ }, be = {
707
+ class: "d-emoji-picker__data",
708
+ "data-qa": "dt-emoji-picker-description"
709
+ }, xe = [
688
710
  "alt",
689
711
  "aria-label",
690
712
  "title",
691
713
  "src"
692
- ], xe = {
714
+ ], Se = {
693
715
  __name: "EmojiDescription",
694
716
  props: { emoji: {
695
717
  type: Object,
@@ -699,16 +721,28 @@ var re = { class: "d-emoji-picker__selector" }, ie = {
699
721
  function t(e) {
700
722
  return e.date_added ? e.image : `${c + e.unicode_character}.png`;
701
723
  }
702
- return (n, r) => (C(), m("div", ye, [e.emoji ? (C(), m("img", {
724
+ return (n, r) => (C(), m("div", be, [e.emoji ? (C(), m("img", {
703
725
  key: 0,
704
726
  class: "d-icon d-icon--size-500",
705
727
  alt: e.emoji.name,
706
728
  "aria-label": e.emoji.name,
707
729
  title: e.emoji.name,
708
730
  src: t(e.emoji)
709
- }, null, 8, be)) : p("", !0), h("div", null, D(e.emoji?.name), 1)]));
731
+ }, null, 8, xe)) : p("", !0), h("div", null, D(e.emoji?.name), 1)]));
710
732
  }
711
- }, Se = { class: "d-emoji-picker" }, Ce = { class: "d-emoji-picker--header" }, we = { class: "d-emoji-picker--body" }, Te = { class: "d-emoji-picker--footer" }, Ee = /* @__PURE__ */ Object.assign({ name: "DtEmojiPicker" }, {
733
+ }, Ce = {
734
+ class: "d-emoji-picker",
735
+ "data-qa": "dt-emoji-picker"
736
+ }, we = {
737
+ class: "d-emoji-picker--header",
738
+ "data-qa": "dt-emoji-picker-header"
739
+ }, Te = {
740
+ class: "d-emoji-picker--body",
741
+ "data-qa": "dt-emoji-picker-body"
742
+ }, Ee = {
743
+ class: "d-emoji-picker--footer",
744
+ "data-qa": "dt-emoji-picker-footer"
745
+ }, De = /* @__PURE__ */ Object.assign({ name: "DtEmojiPicker" }, {
712
746
  __name: "EmojiPicker",
713
747
  props: {
714
748
  recentlyUsedEmojis: {
@@ -768,8 +802,8 @@ var re = { class: "d-emoji-picker__selector" }, ie = {
768
802
  function F(e) {
769
803
  s.value = e;
770
804
  }
771
- return (t, r) => (C(), m("div", Se, [
772
- h("div", Ce, [v(X, {
805
+ return (t, r) => (C(), m("div", Ce, [
806
+ h("div", we, [v(X, {
773
807
  ref: "tabsetRef",
774
808
  "emoji-filter": o.value,
775
809
  "show-custom-emojis-tab": g.value,
@@ -786,7 +820,7 @@ var re = { class: "d-emoji-picker__selector" }, ie = {
786
820
  "show-recently-used-tab",
787
821
  "scroll-into-tab"
788
822
  ])]),
789
- h("div", we, [e.showSearch ? (C(), f(J, {
823
+ h("div", Te, [e.showSearch ? (C(), f(J, {
790
824
  key: 0,
791
825
  ref: "searchInputRef",
792
826
  modelValue: o.value,
@@ -822,7 +856,7 @@ var re = { class: "d-emoji-picker__selector" }, ie = {
822
856
  "custom-emojis",
823
857
  "selected-tabset"
824
858
  ])]),
825
- h("div", Te, [
859
+ h("div", Ee, [
826
860
  e.showAddEmojiButton && !s.value ? (C(), f(O(n), {
827
861
  key: 0,
828
862
  importance: "outlined",
@@ -833,8 +867,8 @@ var re = { class: "d-emoji-picker__selector" }, ie = {
833
867
  default: M(() => [_(D(O(k)), 1)]),
834
868
  _: 1
835
869
  }, 8, ["aria-label"])) : p("", !0),
836
- v(xe, { emoji: s.value }, null, 8, ["emoji"]),
837
- v(ve, {
870
+ v(Se, { emoji: s.value }, null, 8, ["emoji"]),
871
+ v(ye, {
838
872
  ref: "skinSelectorRef",
839
873
  "is-hovering": !!s.value,
840
874
  "skin-selector-button-tooltip-label": O(E),
@@ -853,6 +887,6 @@ var re = { class: "d-emoji-picker__selector" }, ie = {
853
887
  }
854
888
  });
855
889
  //#endregion
856
- export { Ee as t };
890
+ export { De as t };
857
891
 
858
- //# sourceMappingURL=EmojiPicker-BllVwJf4.js.map
892
+ //# sourceMappingURL=EmojiPicker-D46lLRMp.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EmojiPicker-D46lLRMp.js","names":["$emit","$refs"],"sources":["../components/EmojiPicker/Modules/EmojiSearch.vue","../components/EmojiPicker/Modules/EmojiTabset.vue","../components/EmojiPicker/Composables/UseKeyboardNavigation.js","../components/EmojiPicker/Modules/EmojiSelector.vue","../components/EmojiPicker/Modules/EmojiSkinSelector.vue","../components/EmojiPicker/Modules/EmojiDescription.vue","../components/EmojiPicker/EmojiPicker.vue"],"sourcesContent":["<template>\n <div\n class=\"d-emoji-picker__search d-emoji-picker__alignment\"\n data-qa=\"dt-emoji-picker-search\"\n >\n <dt-input\n id=\"searchInput\"\n ref=\"searchInput\"\n :placeholder=\"searchPlaceholderLabel\"\n :model-value=\"modelValue\"\n @update:model-value=\"$emit('update:modelValue', $event)\"\n @keydown.up=\"$emit('focus-tabset')\"\n @keydown.down.prevent=\"$emit('focus-emoji-selector')\"\n @keydown.enter=\"$emit('select-first-emoji')\"\n >\n <template #startIcon>\n <dt-icon-search\n size=\"200\"\n />\n </template>\n <template\n v-if=\"modelValue.length > 0\"\n #endIcon\n >\n <dt-button\n importance=\"clear\"\n :size=\"100\"\n class=\"d-emoji-picker__search-x-button\"\n circle\n kind=\"muted\"\n @click=\"clearSearch\"\n >\n <template #icon>\n <dt-icon-close\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-input>\n </div>\n</template>\n\n<script setup>\nimport { DtIconSearch, DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport { DtInput } from '@/components/Input';\nimport { DtButton } from '@/components/Button';\nimport { onMounted, ref } from 'vue';\n\ndefineProps({\n searchPlaceholderLabel: {\n type: String,\n required: true,\n },\n modelValue: {\n type: String,\n default: '',\n },\n});\n\nconst emits = defineEmits(['update:modelValue', 'focus-emoji-selector', 'focus-tabset', 'select-first-emoji']);\n\nconst searchInput = ref(null);\n\nfunction clearSearch () {\n emits('update:modelValue', '');\n focusSearchInput();\n}\n\nfunction focusSearchInput () {\n searchInput.value.focus();\n}\nonMounted(() => {\n focusSearchInput();\n});\n\ndefineExpose({\n focusSearchInput,\n});\n</script>\n","<template>\n <div\n class=\"d-emoji-picker__tabset\"\n data-qa=\"dt-emoji-picker-tabset\"\n >\n <dt-tab-group\n :selected=\"selectedTab\"\n :size=\"200\"\n spread=\"equal\"\n tab-list-class=\"d-emoji-picker__tabset-list\"\n >\n <template #tabs>\n <dt-tab\n v-for=\"(tab, index) in tabs\"\n :id=\"tab.id\"\n :key=\"tab.id\"\n :ref=\"el => { if (el) setTabsetRef(el) }\"\n :label=\"tab.label\"\n :panel-id=\"tab.panelId\"\n :tabindex=\"index + 1\"\n aria-controls=\"d-emoji-picker-list\"\n @keydown=\"handleKeyDown($event, tab.id)\"\n @click.capture.stop=\"selectTabset(tab.id)\"\n >\n <component\n :is=\"tab.icon\"\n size=\"400\"\n />\n </dt-tab>\n </template>\n </dt-tab-group>\n </div>\n</template>\n\n<script setup>\nimport { computed, ref, watch } from 'vue';\nimport { DtTab, DtTabGroup } from '@/components/Tab';\nimport { returnFirstEl } from '@/common/utils';\nimport {\n DtIconClock,\n DtIconSatisfied,\n DtIconLivingThing,\n DtIconFood,\n DtIconObject,\n DtIconTransportation,\n DtIconLightbulb,\n DtIconHeart,\n DtIconFlag,\n DtIconDialpadStar,\n} from '@dialpad/dialtone-icons/vue';\n\nconst props = defineProps({\n /**\n * Whether to show the recently used tab or not\n * @type {Boolean}\n * @default false\n */\n showRecentlyUsedTab: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Whether to show the custom emojis tab or not\n * @type {Boolean}\n * @default false\n */\n showCustomEmojisTab: {\n type: Boolean,\n default: false,\n },\n\n scrollIntoTab: {\n type: Number,\n required: true,\n },\n\n emojiFilter: {\n type: String,\n default: '',\n },\n\n /**\n * The labels for the aria-label\n * @type {Array}\n * @required\n */\n tabSetLabels: {\n type: Array,\n required: true,\n },\n});\n\nconst emits = defineEmits([\n /**\n * Emitted when a tab is selected\n * @event selected-tabset\n * @param {String} tabId - The name of the tab that was selected\n */\n 'selected-tabset',\n\n 'focus-search-input',\n 'focus-skin-selector',\n]);\n\nconst TABS_DATA = [\n { label: props.tabSetLabels[0], icon: DtIconClock },\n { label: props.tabSetLabels[1], icon: DtIconSatisfied },\n { label: props.tabSetLabels[2], icon: DtIconLivingThing },\n { label: props.tabSetLabels[3], icon: DtIconFood },\n { label: props.tabSetLabels[4], icon: DtIconObject },\n { label: props.tabSetLabels[5], icon: DtIconTransportation },\n { label: props.tabSetLabels[6], icon: DtIconLightbulb },\n { label: props.tabSetLabels[7], icon: DtIconHeart },\n { label: props.tabSetLabels[8], icon: DtIconFlag },\n { label: props.tabSetLabels[9], icon: DtIconDialpadStar },\n];\n\nconst tabs = computed(() => {\n const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);\n // if showCustomEmojisTab is false remove last index of TABS_DATA\n if (!props.showCustomEmojisTab) {\n tabsData.pop();\n }\n\n return tabsData.map((tab, index) => ({\n ...tab,\n // IDs on dt-tab component need to be on string\n id: (index + 1).toString(),\n panelId: (index + 1).toString(),\n }));\n});\n\nconst isSearching = computed(() => props.emojiFilter.length > 0);\n\nconst selectedTab = ref('1');\n\nconst tabsetRef = ref([]);\n\nwatch(() => props.scrollIntoTab,\n () => {\n if (!isSearching.value) {\n selectedTab.value = (props.scrollIntoTab + 1).toString();\n }\n });\n\nwatch(isSearching,\n () => {\n if (isSearching.value) {\n selectedTab.value = null;\n }\n });\n\n/**\n * We are using .capture.stop modifiers on the click event\n * because we don't want to trigger the click event of the\n * dt-tab component\n */\nfunction selectTabset (id) {\n // IDs on scrollToTab need to be on number\n const parseId = parseInt(id);\n // IDs on dt-tab component need to be on string\n selectedTab.value = id;\n emits('selected-tabset', parseId);\n}\n\nfunction setTabsetRef (ref) {\n // We push the $el, because $el is the button inside the dt-tab component\n // and we need the button to focus it\n tabsetRef.value.push(returnFirstEl(ref.$el));\n}\n\nfunction focusTabset () {\n tabsetRef.value[0].focus();\n}\n\nfunction handleKeyDown (event, tabId) {\n if (event.key === 'Enter') {\n selectTabset(tabId);\n // We blur because seems like the tab component override the selected prop, and it removes the selected style\n tabsetRef.value[tabId - 1].blur();\n }\n\n if (event.key === 'Tab') {\n event.preventDefault();\n if (event.shiftKey) {\n emits('focus-skin-selector');\n } else {\n emits('focus-search-input');\n }\n }\n\n if (event.key === 'ArrowDown') {\n // Jump to search input\n emits('focus-search-input');\n }\n}\n\ndefineExpose({\n focusTabset,\n});\n</script>\n","import { ref } from 'vue';\nimport { EMOJIS_PER_ROW, ARROW_KEYS } from '@/components/EmojiPicker/EmojiPickerConstants';\n\nexport function useKeyboardNavigation () {\n const emojiRefs = ref([]);\n const emojiFilteredRefs = ref([]);\n const isFiltering = ref(false);\n const hoverFirstEmoji = ref(true);\n\n function _handleArrowLeft (indexTab, indexEmoji) {\n if (!focusEmoji(indexTab, indexEmoji - 1)) {\n if (emojiRefs.value[indexTab - 1]) {\n focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);\n } else {\n focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);\n }\n }\n }\n\n function _handleArrowRight (indexTab, indexEmoji) {\n if (!focusEmoji(indexTab, indexEmoji + 1)) {\n if (!focusEmoji(indexTab + 1, 0)) {\n focusEmoji(0, 0);\n }\n }\n }\n\n function _handleArrowLeftFiltered (indexTab, indexEmoji) {\n if (!focusEmoji(0, indexEmoji - 1)) {\n focusEmoji(0, emojiFilteredRefs.value.length - 1);\n }\n }\n\n function _handleArrowRightFiltered (indexTab, indexEmoji) {\n if (!focusEmoji(0, indexEmoji + 1)) {\n focusEmoji(0, 0);\n }\n }\n\n function _handleHorizontalNavigation (direction, indexTab, indexEmoji) {\n if (isFiltering.value) {\n if (direction === 'left') {\n _handleArrowLeftFiltered(indexTab, indexEmoji);\n } else if (direction === 'right') {\n _handleArrowRightFiltered(indexTab, indexEmoji);\n }\n } else {\n if (direction === 'left') {\n _handleArrowLeft(indexTab, indexEmoji);\n } else if (direction === 'right') {\n _handleArrowRight(indexTab, indexEmoji);\n }\n }\n }\n\n function focusEmoji (indexTab, indexEmoji) {\n const emojiRef = isFiltering.value\n ? emojiFilteredRefs.value?.[indexEmoji]\n : emojiRefs.value?.[indexTab]?.[indexEmoji];\n\n if (emojiRef) {\n emojiRef.focus();\n return true;\n }\n\n return false;\n }\n\n function setEmojiRef (el, indexTab, indexEmoji) {\n if (!emojiRefs.value[indexTab]) {\n emojiRefs.value[indexTab] = [];\n }\n emojiRefs.value[indexTab][indexEmoji] = el;\n }\n\n function setFilteredRef (el, index) {\n emojiFilteredRefs.value[index] = el;\n }\n\n function handleArrowNavigationFiltered (key, indexEmoji) {\n hoverFirstEmoji.value = false;\n\n if (key === ARROW_KEYS.ARROW_UP) {\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n if (!focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {\n const lastEmojiPosition =\n emojiFilteredRefs.value.length - (emojiFilteredRefs.value.length % EMOJIS_PER_ROW) + position;\n\n focusEmoji(0, lastEmojiPosition);\n\n if (!focusEmoji(0, lastEmojiPosition)) {\n focusEmoji(0, emojiFilteredRefs.value.length - 1);\n }\n }\n }\n\n if (key === ARROW_KEYS.ARROW_DOWN) {\n if (!focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n if (emojiFilteredRefs.value?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n focusEmoji(0, emojiFilteredRefs.value.length - 1);\n } else {\n focusEmoji(0, position);\n }\n }\n }\n\n if (key === ARROW_KEYS.ARROW_LEFT) {\n _handleHorizontalNavigation('left', 0, indexEmoji);\n }\n\n if (key === ARROW_KEYS.ARROW_RIGHT) {\n _handleHorizontalNavigation('right', 0, indexEmoji);\n }\n }\n\n function handleArrowNavigation (key, indexTab, indexEmoji) {\n if (key === 'ArrowUp') {\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n if (indexTab === 0) {\n // we are on the first emoji tab, then we should jump to the last row of the last emoji tab\n const numberOfMissingEmojis =\n EMOJIS_PER_ROW - (emojiRefs.value[emojiRefs.value.length - 1].length % EMOJIS_PER_ROW);\n\n const emojiToJump =\n emojiRefs.value[emojiRefs.value.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);\n\n if (!focusEmoji(emojiRefs.value.length - 1, emojiToJump)) {\n // if there is no emoji in this position, jump to the last emoji of the row\n focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);\n }\n return;\n }\n\n // if we are not on the first tab, we should jump to the previous row of the current tab\n if (!focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {\n // if there is no previous row, we should jump to emoji in the sampe position of the previous tab\n const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;\n const emojisInPreviousTab = emojiRefs.value[previousTab].length;\n const lastEmojiPosition = emojisInPreviousTab - (emojisInPreviousTab % EMOJIS_PER_ROW) + position;\n\n if (!focusEmoji(previousTab, lastEmojiPosition)) {\n // if there is no emoji in this position, jump to the last emoji of the row\n focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);\n }\n }\n }\n\n if (key === 'ArrowDown') {\n if (!focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {\n // if cannot go down\n\n // Calculate position from cell 0 to cell 8\n const position = indexEmoji % EMOJIS_PER_ROW;\n\n // check if it exists a next row in the current tab\n if (emojiRefs.value?.[indexTab]?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n // if it exists, we should focus the last emoji of the next row in the current tab\n focusEmoji(indexTab, emojiRefs.value[indexTab].length - 1);\n // if we are at the end of the list it will do nothing\n } else {\n // We don't have next row, we are in the last of the tab, then jump\n // to the next tab but in the equal emoji position in row 0.\n\n if (!focusEmoji(indexTab + 1, position)) {\n // We are on the bottom!, should jump to the same position emoji in the first row of the first tabset\n // if it doesn't has, jump to the last\n if (!focusEmoji(0, position)) {\n focusEmoji(0, emojiRefs.value[0].length - 1);\n }\n }\n }\n }\n }\n\n if (key === 'ArrowLeft') {\n _handleHorizontalNavigation('left', indexTab, indexEmoji);\n }\n\n if (key === 'ArrowRight') {\n _handleHorizontalNavigation('right', indexTab, indexEmoji);\n }\n }\n\n return {\n emojiFilteredRefs,\n isFiltering,\n hoverFirstEmoji,\n setEmojiRef,\n setFilteredRef,\n focusEmoji,\n handleArrowNavigationFiltered,\n handleArrowNavigation,\n };\n}\n","<template>\n <div\n class=\"d-emoji-picker__selector\"\n data-qa=\"dt-emoji-picker-selector\"\n >\n <div\n id=\"d-emoji-picker-list\"\n ref=\"listRef\"\n class=\"d-emoji-picker__list\"\n >\n <p\n v-if=\"emojiFilter\"\n class=\"d-emoji-picker__search-label d-emoji-picker__alignment\"\n data-qa=\"dt-emoji-picker-search-results-label\"\n >\n {{ filteredEmojis.length > 0 ? searchResultsLabel : searchNoResultsLabel }}\n </p>\n <div\n v-else\n ref=\"tabCategoryRef\"\n class=\"d-emoji-picker__category d-emoji-picker__alignment\"\n >\n <p data-qa=\"dt-emoji-picker-sticky-label\">\n {{ fixedLabel }}\n </p>\n </div>\n <div\n v-for=\"(tabLabel, indexTab) in tabLabels\"\n v-show=\"!emojiFilter\"\n :key=\"indexTab\"\n :ref=\"tabLabel.ref\"\n data-qa=\"dt-emoji-picker-group\"\n class=\"d-emoji-picker__alignment\"\n >\n <p\n v-if=\"indexTab\"\n >\n {{ tabLabel.label }}\n </p>\n <div\n class=\"d-emoji-picker__tab\"\n >\n <button\n v-for=\"(emoji, indexEmoji) in\n (emojis[tabs[indexTab] + skinTone] ? emojis[tabs[indexTab] + skinTone] : emojis[tabs[indexTab]])\"\n :key=\"emoji.shortname\"\n :ref=\"el => { if (el) setEmojiRef(el, indexTab, indexEmoji) }\"\n data-qa=\"dt-emoji-picker-emoji\"\n type=\"button\"\n :aria-label=\"emoji.name\"\n @click=\"event => selectEmoji(emoji, event)\"\n @focusin=\"highlightEmoji(emoji)\"\n @focusout=\"highlightEmoji(null)\"\n @mouseover=\"highlightEmoji(emoji)\"\n @mouseleave=\"highlightEmoji(null)\"\n @keydown=\"event => handleKeyDown(event, indexTab, indexEmoji, emoji)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"emoji.name\"\n :aria-label=\"emoji.name\"\n :title=\"emoji.name\"\n :src=\"getImgSrc(emoji)\"\n @error=\"handleImageError\"\n >\n </button>\n </div>\n </div>\n <div\n v-if=\"emojiFilter\"\n class=\"d-emoji-picker__alignment\"\n >\n <div\n class=\"d-emoji-picker__tab \"\n data-qa=\"filtered-emojis\"\n >\n <button\n v-for=\"(emoji, index) in filteredEmojis\"\n :key=\"emoji.shortname\"\n :ref=\"el => { if (el) setFilteredRef(el, index) }\"\n data-qa=\"dt-emoji-picker-emoji\"\n type=\"button\"\n :aria-label=\"emoji.name\"\n :class=\"{\n 'hover-emoji': (index === 0 && hoverFirstEmoji),\n }\"\n @click=\"event => selectEmoji(emoji, event)\"\n @focusin=\"highlightEmoji(emoji)\"\n @focusout=\"highlightEmoji(null)\"\n @mouseover=\"hoverEmoji(emoji)\"\n @mouseleave=\"hoverEmoji(null)\"\n @keydown=\"event => handleKeyDownFilteredEmojis(event, index, emoji)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"emoji.name\"\n :aria-label=\"emoji.name\"\n :title=\"emoji.name\"\n :src=\"`${CDN_URL + emoji.unicode_character}.png`\"\n >\n </button>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script setup>\n/* eslint-disable max-lines */\nimport { emojisGrouped as emojis } from '@dialpad/dialtone-emojis';\nimport { computed, onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue';\nimport { CDN_URL, ARROW_KEYS } from '@/components/EmojiPicker/EmojiPickerConstants';\nimport { useKeyboardNavigation } from '@/components/EmojiPicker/Composables/UseKeyboardNavigation';\n\nconst props = defineProps({\n /**\n * The filter to apply to the emoji list\n * @type {String}\n * @default ''\n */\n emojiFilter: {\n type: String,\n default: '',\n },\n\n /**\n * The skin tone to apply to the emoji list\n * @type {String}\n * @required\n */\n skinTone: {\n type: String,\n required: true,\n },\n\n /**\n * The labels for the tabset\n * @type {Array}\n * @required\n */\n tabsetLabels: {\n type: Array,\n required: true,\n },\n\n selectedTabset: {\n type: Object,\n required: true,\n },\n\n /**\n * The label for the search results tab\n * @type {String}\n * @required\n */\n searchResultsLabel: {\n type: String,\n required: true,\n },\n\n searchNoResultsLabel: {\n type: String,\n required: true,\n },\n\n /**\n * The list of recently used emojis\n * @type {Array}\n */\n recentlyUsedEmojis: {\n type: Array,\n default: () => [],\n },\n\n /**\n * The list of custom emojis\n * @type {Array}\n */\n customEmojis: {\n type: Array,\n default: () => [],\n },\n});\n\nconst emits = defineEmits([\n /**\n * Emitted when the user hover over an emoji\n * @event highlighted-emoji\n * @param {Object} emoji - The emoji data that was hovered\n */\n 'highlighted-emoji',\n\n /**\n * Emitted when the user select an emoji\n * @event selected-emoji\n * @param {Object} emoji - The emoji data that was selected\n */\n 'selected-emoji',\n\n /**\n * Emitted when the user scroll into an emoji tab\n * @event scroll-into-tab\n * @param {Number} tab-index - The tab that was scrolled into\n */\n 'scroll-into-tab',\n\n /**\n * Emitted when the user reach bottom scroll\n * This event is used on handleScroll method\n * @event scroll-bottom-reached\n */\n 'scroll-bottom-reached',\n\n /**\n * Emitted when the user reach the end of the emoji list\n * @event focus-skin-selector\n */\n 'focus-skin-selector',\n\n /**\n * Emitted when the user shift tab in first tab of emoji selector\n * @event focus-search-input\n */\n 'focus-search-input',\n]);\n\nconst {\n emojiFilteredRefs,\n isFiltering,\n hoverFirstEmoji,\n setEmojiRef,\n setFilteredRef,\n focusEmoji,\n handleArrowNavigationFiltered,\n handleArrowNavigation,\n} = useKeyboardNavigation();\n\n/**\n * The ref for the tab category\n * This is used to display the fixed label\n */\nconst tabCategoryRef = ref(null);\n\n/**\n * The ref for the list\n * This is used to display the tabs\n */\nconst listRef = ref(null);\n\n/**\n * The ref for the tab label observer\n * This is used to update the fixed label\n */\nconst tabLabelObserver = ref(null);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n */\nconst TABS_DATA = ['Recently used', 'People', 'Nature', 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags', 'Custom'];\n\n/**\n * The list of tab labels\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis or custom emojis list is empty\n * If it is empty, it will remove it\n */\nconst tabLabels = computed(() => {\n let updateTabLabels = props.tabsetLabels.map((label) => ({ label, ref: ref(null) }));\n\n if (props.recentlyUsedEmojis && !props.recentlyUsedEmojis.length) {\n updateTabLabels = props.tabsetLabels.slice(1).map((label) => ({ label, ref: ref(null) }));\n }\n\n if (props.customEmojis && !props.customEmojis.length) {\n updateTabLabels.pop();\n }\n\n return updateTabLabels;\n});\n\n/**\n * The label of the fixed tab\n * This is used to display the fixed label\n */\nconst fixedLabel = ref(tabLabels.value[0].label);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list or custom emojis is empty\n * If it is empty, it will remove it\n * The difference between this and the tab labels is that this one will set the structure of tabs\n * and the tab labels will set the labels\n */\nconst tabs = computed(() => {\n const updateTabsOrder = props.recentlyUsedEmojis.length ? TABS_DATA.slice() : TABS_DATA.slice(1);\n\n if (props.customEmojis && !props.customEmojis.length) {\n updateTabsOrder.pop();\n }\n\n return updateTabsOrder;\n});\n\n/**\n * The list of current emojis that match the filter\n * This will be updated when the emojiFilter changes\n * This is used to display the search results\n * The difference between this and the current emojis list is that this one will not have the skin tone applied\n */\nconst filteredEmojis = ref([]);\n\n/**\n * The current emojis list we are displaying\n * This will be updated when the skin tone changes\n * The difference between this and the emojis list is that this one will have only the skin tone applied\n */\nconst currentEmojis = computed(() => {\n return [\n ...emojis[`People${props.skinTone}`],\n ...emojis.Nature,\n ...emojis.Food,\n ...emojis[`Activity${props.skinTone}`],\n ...emojis.Travel,\n ...emojis[`Objects${props.skinTone}`],\n ...emojis.Symbols,\n ...emojis.Flags,\n ];\n});\n\n/**\n * This will trigger the searchByNameAndKeywords function with debounce of 300 milliseconds\n */\nconst debouncedSearch = debounce(() => {\n // We clean the emojiFilteredRefs to have an updated ref list for the search results\n emojiFilteredRefs.value = [];\n searchByNameAndKeywords();\n});\n\n/**\n * handleScroll will be defined when user scroll\n */\nconst handleScroll = () => {\n const container = listRef.value;\n // TODO -- this will probably need to be updated if we add more emojis.\n // because the container height will change.\n // maybe with a nextTick similar of scrollToTab.\n if (container.scrollTop + container.clientHeight >= container.scrollHeight) {\n emits('scroll-bottom-reached');\n }\n};\n\n/**\n * Update the current emojis list on skin tone changes\n * Also update the filtered emojis list\n * @listens skinTone\n */\nwatch(currentEmojis, () => {\n searchByNameAndKeywords();\n}, { immediate: true });\n\n/**\n * Update the recently used emojis list on recently used emojis prop changes\n * @listens recentlyUsedEmojis\n */\nwatch(() => props.recentlyUsedEmojis,\n () => {\n emojis['Recently used'] = props.recentlyUsedEmojis;\n }, { immediate: true });\n\n/**\n * Update the custom emojis list on custom emojis prop changes\n * @listens customEmojis\n */\nwatch(() => props.customEmojis,\n () => {\n emojis.Custom = props.customEmojis;\n }, { immediate: true });\n\n/**\n * Search for emojis by name and keywords\n * Will update the filtered emojis list on emojiFilter update\n * @listens emojiFilter\n */\nwatch(() => props.emojiFilter, () => {\n resetScroll();\n if (props.emojiFilter) {\n isFiltering.value = true;\n } else {\n isFiltering.value = false;\n // If the emoji filter is empty, emit null to remove the highlighted emoji\n // of the previous search\n highlightEmoji(null);\n }\n debouncedSearch();\n});\n\nwatch(\n () => props.selectedTabset,\n (tab) => {\n scrollToTab(tab.tabId);\n },\n { deep: true },\n);\n\nfunction hoverEmoji (emoji, isFirst = false) {\n hoverFirstEmoji.value = isFirst;\n emits('highlighted-emoji', emoji);\n}\n\n/**\n * Filters an array of emoji objects based on a search string that matches both the name and keywords.\n * Will update the filtered emojis list\n */\nfunction searchByNameAndKeywords () {\n const searchStr = props.emojiFilter.toLowerCase();\n filteredEmojis.value = currentEmojis.value.filter(obj => {\n const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);\n const keywordsIncludeSearchStr = obj.keywords.some(keyword => keyword.toLowerCase().includes(searchStr));\n return nameIncludesSearchStr || keywordsIncludeSearchStr;\n });\n nextTick(() => {\n if (searchStr) {\n hoverEmoji(filteredEmojis.value[0], true);\n }\n });\n}\n\nfunction debounce (fn, delay = 300) {\n let timeout;\n\n return (...args) => {\n clearTimeout(timeout);\n timeout = setTimeout(() => fn(...args), delay);\n };\n}\n\nfunction getImgSrc (emoji) {\n // TODO Update json structure to have a property for custom emojis and avoid using date_added\n if (emoji.date_added) { // if custom emoji\n return emoji.image;\n } else { // if regular emoji\n return CDN_URL + emoji.unicode_character + '.png';\n }\n}\n\n/**\n * Handle image error - We hide the entire button if the image is not found\n */\nfunction handleImageError (event) {\n event.target.parentNode.style.display = 'none';\n}\n\n/**\n * Scroll to the selected tab\n */\nfunction scrollToTab (tabIndex, focusFirstEmoji = true) {\n const tabLabel = tabLabels.value[tabIndex - 1];\n const tabElement = tabLabel.ref.value[0];\n\n nextTick(() => {\n const container = listRef.value;\n const offsetTop = tabIndex === 1 ? 0 : tabElement.offsetTop - 15;\n\n container.scrollTop = offsetTop;\n\n if (focusFirstEmoji) {\n focusEmoji((tabIndex - 1), 0);\n }\n });\n}\n\nfunction resetScroll () {\n const container = listRef.value;\n\n container.scrollTop = 0;\n}\n\nfunction setBottomScrollListener () {\n listRef.value.addEventListener('scroll', handleScroll);\n}\n\n/**\n * This code creates an IntersectionObserver object that monitors the intersection between\n * the root element (tabCategoryRef) and its targets (the child elements of listRef),\n * and updates the value of the fixedLabel variable accordingly.\n */\nfunction setTabLabelObserver () {\n /**\n * The code extracts the target element and its index from the IntersectionObserverEntry object,\n * and checks whether the target intersects with the root and is positioned above or below it.\n */\n tabLabelObserver.value = new IntersectionObserver(async (entries) => {\n // eslint-disable-next-line complexity\n entries.forEach(entry => {\n const { target } = entry;\n const index = parseInt(target.dataset.index);\n\n /**\n * If the target is positioned above the root,\n * the code updates the value of the fixed label to the label of the previous tab,\n * or the first tab if the current tab is the first one. If the target is positioned below the root, the code\n * updates the value of the fixed label to the label of the current tab.\n * If the target stops intersecting with the root and its index is 1 (the second tab),\n * the code updates the value of the fixed label to the label of the first tab.\n * NOTES:\n * This last condition is needed because sometimes it is\n * not detect the intersection between the root and the target.\n * We also provide a 50 pixels offset to the root element in the first condition to always get the\n * first tab if it has fewer emojis, because in some cases if you quickly scroll the observer does not detect it.\n */\n if (entry.isIntersecting && target.offsetTop <= tabCategoryRef.value.offsetTop + 50) {\n fixedLabel.value = tabLabels.value[index - 1]?.label ?? tabLabels.value[0]?.label;\n emits('scroll-into-tab', index - 1);\n } else if (entry.boundingClientRect.bottom <= tabCategoryRef.value?.getBoundingClientRect().bottom) {\n emits('scroll-into-tab', index);\n fixedLabel.value = tabLabels.value[index]?.label;\n } else if (index === 1) {\n emits('scroll-into-tab', index);\n fixedLabel.value = tabLabels.value[0]?.label;\n }\n });\n });\n\n /**\n * The tabLabelObserver is set to observe the root element and all its children elements with\n * the IntersectionObserver object, and sets their data-index attribute to their index.\n */\n tabLabelObserver.value.observe(tabCategoryRef.value);\n\n Array.from(listRef.value.children).forEach((child, index) => {\n tabLabelObserver.value.observe(child);\n child.dataset.index = index;\n });\n}\n\nconst handleKeyDownFilteredEmojis = (event, indexEmoji, emoji) => {\n event.preventDefault();\n\n if (Object.values(ARROW_KEYS).includes(event.key)) {\n handleArrowNavigationFiltered(event.key, indexEmoji);\n return;\n }\n\n switch (event.key) {\n case 'Tab':\n emits('focus-skin-selector');\n break;\n case 'Enter':\n selectEmoji(emoji, event);\n break;\n default:\n break;\n }\n};\n\n \nconst handleKeyDown = (event, indexTab, indexEmoji, emoji) => {\n event.preventDefault();\n\n if (Object.values(ARROW_KEYS).includes(event.key)) {\n handleArrowNavigation(event.key, indexTab, indexEmoji);\n return;\n }\n\n switch (event.key) {\n case 'Tab':\n if (event.shiftKey) {\n if (focusEmoji(indexTab, 0) && indexTab > 0) {\n scrollToTab(indexTab, true);\n } else {\n scrollToTab(1, false);\n emits('focus-search-input');\n }\n } else {\n if (focusEmoji(indexTab + 1, 0)) {\n scrollToTab(indexTab + 1 + 1, false);\n } else {\n // We are on the last emoji tabset, jump to the skin selector\n emits('focus-skin-selector');\n }\n }\n break;\n\n case 'Enter':\n selectEmoji(emoji, event);\n break;\n\n default:\n break;\n }\n};\n\nfunction selectEmoji (emoji, event) {\n emits('selected-emoji', { ...emoji, shift_key: event.shiftKey });\n}\n\nfunction highlightEmoji (emoji) {\n emits('highlighted-emoji', emoji);\n}\n\nfunction focusEmojiSelector () {\n focusEmoji(0, 0);\n}\n\nfunction focusLastEmoji () {\n scrollToTab(tabs.value.length, true);\n}\n\nonMounted(() => {\n setTabLabelObserver();\n setBottomScrollListener();\n});\n\nonBeforeUnmount(() => {\n tabLabelObserver.value.disconnect();\n listRef.value.removeEventListener('scroll', handleScroll);\n});\n\ndefineExpose({\n focusEmojiSelector,\n focusLastEmoji,\n});\n</script>\n","<template>\n <div data-qa=\"skin-selector\">\n <div\n v-show=\"isOpen\"\n class=\"d-emoji-picker__skin-list\"\n data-qa=\"dt-emoji-picker-skin-list\"\n >\n <button\n v-for=\"(skin, index) in skinList\"\n :ref=\"el => { if (el) setSkinsRef(el) }\"\n :key=\"skin.name\"\n data-qa=\"dt-emoji-picker-skin-option\"\n :class=\"{\n 'selected': skinSelected.skinCode === skin.skinCode,\n }\"\n @keydown=\"event => handleKeyDown(event, skin, index)\"\n @click=\"selectSkin(skin)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"skin.name\"\n :aria-label=\"skin.name\"\n :title=\"skin.name\"\n :src=\"`${CDN_URL + skin.unicode_output}.png`\"\n >\n </button>\n </div>\n <div\n v-show=\"!isOpen\"\n class=\"d-emoji-picker__skin-selected\"\n >\n <dt-tooltip placement=\"top-end\">\n {{ skinSelectorButtonTooltipLabel }}\n <template #anchor>\n <button\n ref=\"skinSelectorRef\"\n data-qa=\"dt-emoji-picker-skin-toggle\"\n :aria-label=\"skinSelectorButtonTooltipLabel\"\n tabindex=\"-1\"\n @click=\"toggleSkinList\"\n @keydown=\"event => handleKeyDown(event)\"\n >\n <img\n class=\"d-icon d-icon--size-500\"\n :alt=\"skinSelected.name\"\n :aria-label=\"skinSelected.name\"\n :title=\"skinSelected.name\"\n :src=\"`${CDN_URL + skinSelected.unicode_output}.png`\"\n data-qa=\"dt-emoji-picker-skin-image\"\n >\n </button>\n </template>\n </dt-tooltip>\n </div>\n </div>\n</template>\n\n<script setup>\nimport { computed, nextTick, ref, watchEffect } from 'vue';\nimport { CDN_URL, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from '@/components/EmojiPicker/EmojiPickerConstants.js';\nimport { DtTooltip } from '@/components/Tooltip';\n\nconst props = defineProps({\n /**\n * The skin tone to apply to the emoji list\n * @type {String}\n * @required\n */\n skinTone: {\n type: String,\n required: true,\n },\n\n isHovering: {\n type: Boolean,\n default: false,\n },\n\n skinSelectorButtonTooltipLabel: {\n type: String,\n required: true,\n },\n});\n\nconst emits = defineEmits([\n /**\n * The skin tone that was selected\n * @event skin-tone\n * @type {Number}\n */\n 'skin-tone',\n 'focus-tabset',\n 'focus-last-emoji',\n]);\n\nconst skinList = [\n {\n name: ':wave_tone1:',\n unicode_output: '1f44b-1f3fb',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,\n skinCode: '_tone1',\n },\n {\n name: ':wave_tone2:',\n unicode_output: '1f44b-1f3fc',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,\n skinCode: '_tone2',\n },\n {\n name: ':wave_tone3:',\n unicode_output: '1f44b-1f3fd',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,\n skinCode: '_tone3',\n },\n {\n name: ':wave_tone4:',\n unicode_output: '1f44b-1f3fe',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,\n skinCode: '_tone4',\n },\n {\n name: ':wave_tone5:',\n unicode_output: '1f44b-1f3ff',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,\n skinCode: '_tone5',\n },\n {\n name: ':wave:',\n unicode_output: '1f44b',\n skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,\n skinCode: '',\n },\n];\n\nconst isOpen = ref(false);\n\nconst skinSelectorRef = ref(null);\n\nconst skinsRef = ref([]);\n\n/**\n * It will close the skin selector if the user is hovering over the emoji list\n */\nwatchEffect(\n () => props.isHovering && (isOpen.value = false),\n);\n\n/**\n * It will initially display props.skinTone. If a new skin tone is selected,\n * it will display that until props.skinTone changes.\n */\nconst skinPassedIn = computed(() => skinList.find((skin) => skin.skinTone === props.skinTone));\nconst skinSelected = ref(skinPassedIn.value);\nwatchEffect(() => skinPassedIn.value && (skinSelected.value = skinPassedIn.value));\n\nfunction setSkinsRef (ref) {\n skinsRef.value.push(ref);\n}\nfunction focusSkinSelector () {\n skinSelectorRef.value.focus();\n}\n\nfunction selectSkin (skin) {\n skinSelected.value = skin;\n isOpen.value = false;\n emits('skin-tone', skin.skinTone);\n nextTick(() => focusSkinSelector());\n}\n\nconst handleKeyDown = (event, skin, index) => {\n event.preventDefault();\n\n if (event.key === 'ArrowLeft') {\n if (index === 0) skinsRef.value[skinsRef.value.length - 1]?.focus();\n skinsRef.value[index - 1]?.focus();\n }\n\n if (event.key === 'ArrowRight') {\n skinsRef.value[index + 1]?.focus();\n }\n\n if (event.key === 'Enter') {\n if (skin) { selectSkin(skin); } else {\n toggleSkinList();\n }\n }\n\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n emits('focus-last-emoji');\n } else {\n emits('focus-tabset');\n }\n }\n};\n\nfunction toggleSkinList () {\n isOpen.value = !isOpen.value;\n nextTick(() => skinsRef.value[0].focus());\n}\n\ndefineExpose({\n focusSkinSelector,\n});\n</script>\n","<template>\n <div\n class=\"d-emoji-picker__data\"\n data-qa=\"dt-emoji-picker-description\"\n >\n <img\n v-if=\"emoji\"\n class=\"d-icon d-icon--size-500\"\n :alt=\"emoji.name\"\n :aria-label=\"emoji.name\"\n :title=\"emoji.name\"\n :src=\"getImgSrc(emoji)\"\n >\n <div>{{ emoji?.name }}</div>\n </div>\n</template>\n\n<script setup>\nimport { CDN_URL } from '@/components/EmojiPicker/EmojiPickerConstants';\n\ndefineProps({\n /**\n * Emoji data\n * @type {Object}\n * @default null\n */\n emoji: {\n type: Object,\n default: null,\n },\n});\n\nfunction getImgSrc (emoji) {\n if (emoji.date_added) { // if custom emoji\n return emoji.image;\n } else { // if regular emoji\n return `${CDN_URL + emoji.unicode_character}.png`;\n }\n}\n</script>\n","<template>\n <div\n class=\"d-emoji-picker\"\n data-qa=\"dt-emoji-picker\"\n >\n <div\n class=\"d-emoji-picker--header\"\n data-qa=\"dt-emoji-picker-header\"\n >\n <emoji-tabset\n ref=\"tabsetRef\"\n :emoji-filter=\"internalSearchQuery\"\n :show-custom-emojis-tab=\"showCustomEmojisTab\"\n :show-recently-used-tab=\"showRecentlyUsedTab\"\n :scroll-into-tab=\"scrollIntoTab\"\n :tab-set-labels=\"tabSetLabels\"\n @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n @focus-search-input=\"showSearch\n ? $refs.searchInputRef.focusSearchInput()\n : $refs.emojiSelectorRef.focusEmojiSelector()\"\n @selected-tabset=\"scrollToSelectedTabset\"\n @keydown.esc=\"emits('close')\"\n />\n </div>\n <div\n class=\"d-emoji-picker--body\"\n data-qa=\"dt-emoji-picker-body\"\n >\n <emoji-search\n v-if=\"showSearch\"\n ref=\"searchInputRef\"\n v-model=\"internalSearchQuery\"\n :search-placeholder-label=\"searchPlaceholderLabel\"\n @select-first-emoji=\"emits('selected-emoji', highlightedEmoji)\"\n @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n @focus-emoji-selector=\"$refs.emojiSelectorRef.focusEmojiSelector()\"\n @keydown.esc=\"emits('close')\"\n />\n <emoji-selector\n ref=\"emojiSelectorRef\"\n :emoji-filter=\"internalSearchQuery\"\n :skin-tone=\"skinTone\"\n :tabset-labels=\"tabSetLabels\"\n :search-results-label=\"searchResultsLabel\"\n :search-no-results-label=\"searchNoResultsLabel\"\n :recently-used-emojis=\"recentlyUsedEmojis\"\n :custom-emojis=\"customEmojis\"\n :selected-tabset=\"selectedTabset\"\n @scroll-into-tab=\"updateScrollIntoTab\"\n @highlighted-emoji=\"updateHighlightedEmoji\"\n @selected-emoji=\"emits('selected-emoji', $event)\"\n @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.tabsetRef.focusTabset()\"\n @keydown.esc=\"emits('close')\"\n @scroll-bottom-reached=\"emits('scroll-bottom-reached')\"\n />\n </div>\n <div\n class=\"d-emoji-picker--footer\"\n data-qa=\"dt-emoji-picker-footer\"\n >\n <dt-button\n v-if=\"showAddEmojiButton && !highlightedEmoji\"\n importance=\"outlined\"\n :aria-label=\"addEmojiLabel\"\n class=\"d-emoji-picker__add-emoji\"\n @click=\"emits('add-emoji')\"\n >\n {{ addEmojiLabel }}\n </dt-button>\n <emoji-description :emoji=\"highlightedEmoji\" />\n <emoji-skin-selector\n ref=\"skinSelectorRef\"\n :is-hovering=\"!!highlightedEmoji\"\n :skin-selector-button-tooltip-label=\"skinSelectorButtonTooltipLabel\"\n :skin-tone=\"skinTone\"\n @skin-tone=\"emits('skin-tone', $event)\"\n @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n @focus-last-emoji=\"$refs.emojiSelectorRef.focusLastEmoji()\"\n @keydown.esc=\"emits('close')\"\n />\n </div>\n </div>\n</template>\n\n<script setup>\nimport EmojiSearch from './Modules/EmojiSearch.vue';\nimport EmojiTabset from './Modules/EmojiTabset.vue';\nimport EmojiSelector from './Modules/EmojiSelector.vue';\nimport EmojiSkinSelector from './Modules/EmojiSkinSelector.vue';\nimport EmojiDescription from './Modules/EmojiDescription.vue';\nimport { DtButton } from '../Button';\nimport { computed, ref, watch } from 'vue';\nimport { DialtoneLocalization } from '@/localization';\n\ndefineOptions({\n name: 'DtEmojiPicker',\n});\n\nconst props = defineProps({\n /**\n * The array with recently used emoji object\n * This list is necessary to fill the recently used tab\n * @type {Array}\n * @default []\n * @example\n * <dt-emoji-picker :recentlyUsedEmojis=\"[emojiObject, emojiObject]\" />\n */\n // TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object\n recentlyUsedEmojis: {\n type: Array,\n default: () => [],\n },\n\n /**\n * The array with custom emojis object\n * This list is necessary to fill the custom tab\n * @type {Array}\n * @default []\n * @example\n * <dt-emoji-picker :customEmojis=\"[emojiObject, emojiObject]\" />\n */\n customEmojis: {\n type: Array,\n },\n\n /**\n * The skin tone to show the emojis\n * This prop gives the possibility to use the skin tone selected by the user previously\n * @type {String}\n * @default 'Default'\n * @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'\n * @example\n * <dt-emoji-picker :skinTone=\"'Default'\" />\n */\n skinTone: {\n type: String,\n default: 'Default',\n },\n\n /**\n\n * Sets the search query that filters emojis.\n * @type {String}\n * @example\n * <dt-emoji-picker search-query=\"smile\" />\n */\n searchQuery: {\n type: String,\n default: '',\n },\n\n /**\n * Shows the search input\n * @type {Boolean}\n * @example\n * <dt-emoji-picker :show-search=\"false\" />\n */\n showSearch: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Shows the add emoji button in the footer when no emoji is highlighted\n * @type {Boolean}\n * @example\n * <dt-emoji-picker :show-add-emoji-button=\"true\" />\n */\n showAddEmojiButton: {\n type: Boolean,\n default: false,\n },\n});\n\nconst emits = defineEmits(\n [\n /**\n * It will emit the selected emoji\n * @event selected-emoji\n * @param {Object} emoji - The selected emoji from the emoji selector\n */\n 'selected-emoji',\n\n /**\n * Emitted when the user reach bottom scroll\n * This is being handled by handleScroll method\n * @event scroll-bottom-reached\n */\n 'scroll-bottom-reached',\n\n /**\n * It will emit the selected skin tone\n * @event skin-tone\n * @param {String} skin - The selected skin tone from the skin selector\n */\n 'skin-tone',\n\n /**\n * Since the keyboard events are encapsulated, we emit this event to close the picker\n * @event close\n */\n 'close',\n\n /**\n * Emitted when the user clicks on the add emoji button\n * @event add-emoji\n */\n 'add-emoji',\n ],\n);\n\nconst internalSearchQuery = ref(props.searchQuery.value);\nconst highlightedEmoji = ref(null);\nconst selectedTabset = ref({});\n\nconst scrollIntoTab = ref(0);\n\nconst showRecentlyUsedTab = computed(() => props.recentlyUsedEmojis?.length > 0);\nconst showCustomEmojisTab = computed(() => props.customEmojis?.length > 0);\n\nconst i18n = new DialtoneLocalization();\n\nconst tabSetLabels = [\n i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL'),\n i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL'),\n i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL'),\n i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL'),\n i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL'),\n i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL'),\n i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL'),\n i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL'),\n i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL'),\n i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL'),\n];\n\nconst searchPlaceholderLabel = i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL');\nconst searchResultsLabel = i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL');\nconst searchNoResultsLabel = i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL');\nconst skinSelectorButtonTooltipLabel = i18n.$t('DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL');\nconst addEmojiLabel = i18n.$t('DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL');\n\nwatch(\n () => props.searchQuery,\n (newValue) => {\n internalSearchQuery.value = newValue;\n },\n);\n\n/**\n * Handle the selected tabset event\n * We're creating a new object with the same value as selectedTabset and assigning it back to selectedTabset.\n * Vue will see this as a new object and trigger the watcher in the child component.\n * Using this method, we are able to trigger the watcher in the child component even if the value being passed is the\n * same as the previous value.\n * @event selectedTabset\n * @param tabId {String} - The id of the tab that was selected\n */\nfunction scrollToSelectedTabset (tabId) {\n internalSearchQuery.value = '';\n selectedTabset.value = { ...selectedTabset.value, tabId };\n}\n\nfunction updateScrollIntoTab (value) {\n scrollIntoTab.value = value;\n}\n\nfunction updateHighlightedEmoji (emoji) {\n highlightedEmoji.value = emoji;\n}\n</script>\n"],"mappings":"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"}
@@ -541,4 +541,4 @@ function at(e) {
541
541
  //#endregion
542
542
  export { nt as n, rt as r, at as t };
543
543
 
544
- //# sourceMappingURL=ForceLinkify-bO3ug94b.js.map
544
+ //# sourceMappingURL=ForceLinkify-DuAo3TMB.js.map