@dialpad/dialtone 9.110.1-beta.2 → 9.110.2

package/dist/vue3/components/emoji_picker/emoji_picker.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_picker.vue.js","sources":["../../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-emoji-picker\"\n  >\n    <div class=\"d-emoji-picker--header\">\n      <emoji-tabset\n        ref=\"tabsetRef\"\n        :emoji-filter=\"internalSearchQuery\"\n        :show-recently-used-tab=\"showRecentlyUsedTab\"\n        :scroll-into-tab=\"scrollIntoTab\"\n        :tabset-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 class=\"d-emoji-picker--body\">\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        :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      />\n    </div>\n    <div class=\"d-emoji-picker--footer\">\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/emoji_search.vue';\nimport EmojiTabset from './modules/emoji_tabset.vue';\nimport EmojiSelector from './modules/emoji_selector.vue';\nimport EmojiSkinSelector from './modules/emoji_skin_selector.vue';\nimport EmojiDescription from './modules/emoji_description.vue';\nimport { computed, ref, watch } from 'vue';\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 placeholder text for the search input\n   * @type {String}\n   * @required\n   * @example\n   * <dt-emoji-picker :searchPlaceholderLabel=\"'Search...'\" />\n   */\n  searchPlaceholderLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The label for the search results tab\n   * @type {String}\n   * @required\n   * @example\n   * <dt-emoji-picker :searchResultsLabel=\"'Search results'\" />\n   */\n  searchResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The label for the search no results\n   * @type {String}\n   * @required\n   * @example\n   * <dt-emoji-picker :searchNoResultsLabel=\"'No results'\" />\n   */\n  searchNoResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The list of tabsets to show, it is necessary to be updated with the correct language\n   * It must respect the provided order.\n   * @type {Array}\n   * @required\n   * @example\n   * <dt-emoji-picker\n   *  :tabSetLabels=\"['Most recently used', 'Smileys and people', 'Nature',\n   *    'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags']\" />\n   */\n  tabSetLabels: {\n    type: Array,\n    required: true,\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   * Tooltip shown when skin selector button is hovered.\n   * @type {String}\n   * @required\n   * @example\n   * <dt-emoji-picker :skin-selector-button-tooltip-label=\"'Change default skin tone'\" />\n   */\n  skinSelectorButtonTooltipLabel: {\n    type: String,\n    required: true,\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\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     * 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\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);\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 tabName {String} - The name of the tab that was selected\n */\nfunction scrollToSelectedTabset (tabId) {\n  internalSearchQuery.value = '';\n  selectedTabset.value = tabId;\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"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,UAAM,QAAQ;AAmHd,UAAM,QAAQ;AAwBd,UAAM,sBAAsB,IAAI,MAAM,YAAY,KAAK;AACvD,UAAM,mBAAmB,IAAI,IAAI;AACjC,UAAM,iBAAiB,IAAI,CAAA,CAAE;AAE7B,UAAM,gBAAgB,IAAI,CAAC;AAE3B,UAAM,sBAAsB,SAAS,MAAM,MAAM,mBAAmB,SAAS,CAAC;AAE9E;AAAA,MACE,MAAM,MAAM;AAAA,MACZ,CAAC,aAAa;AACZ,4BAAoB,QAAQ;AAAA,MAC7B;AAAA,IACH;AAWA,aAAS,uBAAwB,OAAO;AACtC,0BAAoB,QAAQ;AAC5B,qBAAe,QAAQ;AACvB,qBAAe,QAAQ,EAAE,GAAG,eAAe,OAAO,MAAK;AAAA,IACzD;AAEA,aAAS,oBAAqB,OAAO;AACnC,oBAAc,QAAQ;AAAA,IACxB;AAEA,aAAS,uBAAwB,OAAO;AACtC,uBAAiB,QAAQ;AAAA,IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/emoji_picker/emoji_picker_constants.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ARROW_KEYS = {
+  ARROW_UP: "ArrowUp",
+  ARROW_DOWN: "ArrowDown",
+  ARROW_LEFT: "ArrowLeft",
+  ARROW_RIGHT: "ArrowRight"
+};
+const CDN_URL = "https://static.dialpadcdn.com/joypixels/png/unicode/32/";
+const EMOJIS_PER_ROW = 9;
+const EMOJI_PICKER_SKIN_TONE_MODIFIERS = {
+  DEFAULT: "Default",
+  LIGHT: "Light",
+  MEDIUM_LIGHT: "MediumLight",
+  MEDIUM: "Medium",
+  MEDIUM_DARK: "MediumDark",
+  DARK: "Dark"
+};
+const EMOJI_PICKER_CATEGORIES = {
+  MOST_RECENTLY_USED: "Most recently used",
+  SMILEYS_AND_PEOPLE: "Smileys and people",
+  NATURE: "Nature",
+  FOOD: "Food",
+  ACTIVITY: "Activity",
+  TRAVEL: "Travel",
+  OBJECTS: "Objects",
+  SYMBOLS: "Symbols",
+  FLAGS: "Flags"
+};
+exports.ARROW_KEYS = ARROW_KEYS;
+exports.CDN_URL = CDN_URL;
+exports.EMOJIS_PER_ROW = EMOJIS_PER_ROW;
+exports.EMOJI_PICKER_CATEGORIES = EMOJI_PICKER_CATEGORIES;
+exports.EMOJI_PICKER_SKIN_TONE_MODIFIERS = EMOJI_PICKER_SKIN_TONE_MODIFIERS;
+//# sourceMappingURL=emoji_picker_constants.cjs.map

package/dist/vue3/components/emoji_picker/emoji_picker_constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_picker_constants.cjs","sources":["../../../components/emoji_picker/emoji_picker_constants.js"],"sourcesContent":["export const ARROW_KEYS = {\n  ARROW_UP: 'ArrowUp',\n  ARROW_DOWN: 'ArrowDown',\n  ARROW_LEFT: 'ArrowLeft',\n  ARROW_RIGHT: 'ArrowRight',\n};\n\nexport const CDN_URL = 'https://static.dialpadcdn.com/joypixels/png/unicode/32/';\nexport const EMOJIS_PER_ROW = 9;\nexport const EMOJI_PICKER_SKIN_TONE_MODIFIERS = {\n  DEFAULT: 'Default',\n  LIGHT: 'Light',\n  MEDIUM_LIGHT: 'MediumLight',\n  MEDIUM: 'Medium',\n  MEDIUM_DARK: 'MediumDark',\n  DARK: 'Dark',\n};\n\nexport const EMOJI_PICKER_CATEGORIES = {\n  MOST_RECENTLY_USED: 'Most recently used',\n  SMILEYS_AND_PEOPLE: 'Smileys and people',\n  NATURE: 'Nature',\n  FOOD: 'Food',\n  ACTIVITY: 'Activity',\n  TRAVEL: 'Travel',\n  OBJECTS: 'Objects',\n  SYMBOLS: 'Symbols',\n  FLAGS: 'Flags',\n};\n\nexport default {\n  EMOJI_PICKER_SKIN_TONE_MODIFIERS,\n  EMOJI_PICKER_CATEGORIES,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,aAAa;AAAA,EACxB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AACf;AAEY,MAAC,UAAU;AACX,MAAC,iBAAiB;AAClB,MAAC,mCAAmC;AAAA,EAC9C,SAAS;AAAA,EACT,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,MAAM;AACR;AAEY,MAAC,0BAA0B;AAAA,EACrC,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;;;;;;"}

package/dist/vue3/components/emoji_picker/emoji_picker_constants.js

@@ -0,0 +1,35 @@
+const ARROW_KEYS = {
+  ARROW_UP: "ArrowUp",
+  ARROW_DOWN: "ArrowDown",
+  ARROW_LEFT: "ArrowLeft",
+  ARROW_RIGHT: "ArrowRight"
+};
+const CDN_URL = "https://static.dialpadcdn.com/joypixels/png/unicode/32/";
+const EMOJIS_PER_ROW = 9;
+const EMOJI_PICKER_SKIN_TONE_MODIFIERS = {
+  DEFAULT: "Default",
+  LIGHT: "Light",
+  MEDIUM_LIGHT: "MediumLight",
+  MEDIUM: "Medium",
+  MEDIUM_DARK: "MediumDark",
+  DARK: "Dark"
+};
+const EMOJI_PICKER_CATEGORIES = {
+  MOST_RECENTLY_USED: "Most recently used",
+  SMILEYS_AND_PEOPLE: "Smileys and people",
+  NATURE: "Nature",
+  FOOD: "Food",
+  ACTIVITY: "Activity",
+  TRAVEL: "Travel",
+  OBJECTS: "Objects",
+  SYMBOLS: "Symbols",
+  FLAGS: "Flags"
+};
+export {
+  ARROW_KEYS,
+  CDN_URL,
+  EMOJIS_PER_ROW,
+  EMOJI_PICKER_CATEGORIES,
+  EMOJI_PICKER_SKIN_TONE_MODIFIERS
+};
+//# sourceMappingURL=emoji_picker_constants.js.map

package/dist/vue3/components/emoji_picker/emoji_picker_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_picker_constants.js","sources":["../../../components/emoji_picker/emoji_picker_constants.js"],"sourcesContent":["export const ARROW_KEYS = {\n  ARROW_UP: 'ArrowUp',\n  ARROW_DOWN: 'ArrowDown',\n  ARROW_LEFT: 'ArrowLeft',\n  ARROW_RIGHT: 'ArrowRight',\n};\n\nexport const CDN_URL = 'https://static.dialpadcdn.com/joypixels/png/unicode/32/';\nexport const EMOJIS_PER_ROW = 9;\nexport const EMOJI_PICKER_SKIN_TONE_MODIFIERS = {\n  DEFAULT: 'Default',\n  LIGHT: 'Light',\n  MEDIUM_LIGHT: 'MediumLight',\n  MEDIUM: 'Medium',\n  MEDIUM_DARK: 'MediumDark',\n  DARK: 'Dark',\n};\n\nexport const EMOJI_PICKER_CATEGORIES = {\n  MOST_RECENTLY_USED: 'Most recently used',\n  SMILEYS_AND_PEOPLE: 'Smileys and people',\n  NATURE: 'Nature',\n  FOOD: 'Food',\n  ACTIVITY: 'Activity',\n  TRAVEL: 'Travel',\n  OBJECTS: 'Objects',\n  SYMBOLS: 'Symbols',\n  FLAGS: 'Flags',\n};\n\nexport default {\n  EMOJI_PICKER_SKIN_TONE_MODIFIERS,\n  EMOJI_PICKER_CATEGORIES,\n};\n"],"names":[],"mappings":"AAAY,MAAC,aAAa;AAAA,EACxB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AACf;AAEY,MAAC,UAAU;AACX,MAAC,iBAAiB;AAClB,MAAC,mCAAmC;AAAA,EAC9C,SAAS;AAAA,EACT,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,MAAM;AACR;AAEY,MAAC,0BAA0B;AAAA,EACrC,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;"}

package/dist/vue3/components/emoji_picker/modules/emoji_description.vue.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const emoji_picker_constants = require("../emoji_picker_constants.cjs");
+const _hoisted_1 = { class: "d-emoji-picker__data" };
+const _hoisted_2 = ["alt", "aria-label", "title", "src"];
+const _sfc_main = {
+  __name: "emoji_description",
+  props: {
+    /**
+     * Emoji data
+     * @type {Object}
+     * @default null
+     */
+    emoji: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      var _a;
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        __props.emoji ? (vue.openBlock(), vue.createElementBlock("img", {
+          key: 0,
+          class: "d-icon d-icon--size-500",
+          alt: __props.emoji.name,
+          "aria-label": __props.emoji.name,
+          title: __props.emoji.name,
+          src: `${vue.unref(emoji_picker_constants.CDN_URL) + __props.emoji.unicode_character}.png`
+        }, null, 8, _hoisted_2)) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", null, vue.toDisplayString((_a = __props.emoji) == null ? void 0 : _a.name), 1)
+      ]);
+    };
+  }
+};
+exports.default = _sfc_main;
+//# sourceMappingURL=emoji_description.vue.cjs.map

package/dist/vue3/components/emoji_picker/modules/emoji_description.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_description.vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/emoji_picker/modules/emoji_description.vue.js

@@ -0,0 +1,38 @@
+import { openBlock, createElementBlock, unref, createCommentVNode, createElementVNode, toDisplayString } from "vue";
+import { CDN_URL } from "../emoji_picker_constants.js";
+const _hoisted_1 = { class: "d-emoji-picker__data" };
+const _hoisted_2 = ["alt", "aria-label", "title", "src"];
+const _sfc_main = {
+  __name: "emoji_description",
+  props: {
+    /**
+     * Emoji data
+     * @type {Object}
+     * @default null
+     */
+    emoji: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        __props.emoji ? (openBlock(), createElementBlock("img", {
+          key: 0,
+          class: "d-icon d-icon--size-500",
+          alt: __props.emoji.name,
+          "aria-label": __props.emoji.name,
+          title: __props.emoji.name,
+          src: `${unref(CDN_URL) + __props.emoji.unicode_character}.png`
+        }, null, 8, _hoisted_2)) : createCommentVNode("", true),
+        createElementVNode("div", null, toDisplayString((_a = __props.emoji) == null ? void 0 : _a.name), 1)
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=emoji_description.vue.js.map

package/dist/vue3/components/emoji_picker/modules/emoji_description.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_description.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/emoji_picker/modules/emoji_search.vue.cjs

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const vue3 = require("@dialpad/dialtone-icons/vue3");
+const input = require("../../input/input.vue.cjs");
+const button = require("../../button/button.vue.cjs");
+const _hoisted_1 = { class: "d-emoji-picker__search d-emoji-picker__alignment" };
+const _sfc_main = {
+  __name: "emoji_search",
+  props: {
+    searchPlaceholderLabel: {
+      type: String,
+      required: true
+    },
+    modelValue: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emits = __emit;
+    const searchInput = vue.ref(null);
+    function clearSearch() {
+      emits("update:modelValue", "");
+      focusSearchInput();
+    }
+    function focusSearchInput() {
+      searchInput.value.focus();
+    }
+    vue.onMounted(() => {
+      focusSearchInput();
+    });
+    __expose({
+      focusSearchInput
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(vue.unref(input.default), {
+          id: "searchInput",
+          ref_key: "searchInput",
+          ref: searchInput,
+          placeholder: __props.searchPlaceholderLabel,
+          "model-value": __props.modelValue,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event)),
+          onKeydown: [
+            _cache[1] || (_cache[1] = vue.withKeys(($event) => _ctx.$emit("focus-tabset"), ["up"])),
+            _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers(($event) => _ctx.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
+            _cache[3] || (_cache[3] = vue.withKeys(($event) => _ctx.$emit("select-first-emoji"), ["enter"]))
+          ]
+        }, vue.createSlots({
+          leftIcon: vue.withCtx(() => [
+            vue.createVNode(vue.unref(vue3.DtIconSearch), { size: "200" })
+          ]),
+          _: 2
+        }, [
+          __props.modelValue.length > 0 ? {
+            name: "rightIcon",
+            fn: vue.withCtx(() => [
+              vue.createVNode(vue.unref(button.default), {
+                importance: "clear",
+                size: "xs",
+                class: "d-emoji-picker__search-x-button",
+                circle: "",
+                kind: "muted",
+                onClick: clearSearch
+              }, {
+                icon: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(vue3.DtIconClose), { size: "200" })
+                ]),
+                _: 1
+              })
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["placeholder", "model-value"])
+      ]);
+    };
+  }
+};
+exports.default = _sfc_main;
+//# sourceMappingURL=emoji_search.vue.cjs.map

package/dist/vue3/components/emoji_picker/modules/emoji_search.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_search.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_search.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\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 #leftIcon>\n        <dt-icon-search\n          size=\"200\"\n        />\n      </template>\n      <template\n        v-if=\"modelValue.length > 0\"\n        #rightIcon\n      >\n        <dt-button\n          importance=\"clear\"\n          size=\"xs\"\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/vue3';\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"],"names":["ref","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyDA,UAAM,QAAQ;AAEd,UAAM,cAAcA,IAAAA,IAAI,IAAI;AAE5B,aAAS,cAAe;AACtB,YAAM,qBAAqB,EAAE;AAC7B;IACF;AAEA,aAAS,mBAAoB;AAC3B,kBAAY,MAAM;IACpB;AACAC,QAAAA,UAAU,MAAM;AACd;IACF,CAAC;AAED,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/emoji_picker/modules/emoji_search.vue.js

@@ -0,0 +1,82 @@
+import { ref, onMounted, openBlock, createElementBlock, createVNode, unref, withKeys, withModifiers, createSlots, withCtx } from "vue";
+import { DtIconSearch, DtIconClose } from "@dialpad/dialtone-icons/vue3";
+import DtInput from "../../input/input.vue.js";
+import DtButton from "../../button/button.vue.js";
+const _hoisted_1 = { class: "d-emoji-picker__search d-emoji-picker__alignment" };
+const _sfc_main = {
+  __name: "emoji_search",
+  props: {
+    searchPlaceholderLabel: {
+      type: String,
+      required: true
+    },
+    modelValue: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emits = __emit;
+    const searchInput = ref(null);
+    function clearSearch() {
+      emits("update:modelValue", "");
+      focusSearchInput();
+    }
+    function focusSearchInput() {
+      searchInput.value.focus();
+    }
+    onMounted(() => {
+      focusSearchInput();
+    });
+    __expose({
+      focusSearchInput
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(DtInput), {
+          id: "searchInput",
+          ref_key: "searchInput",
+          ref: searchInput,
+          placeholder: __props.searchPlaceholderLabel,
+          "model-value": __props.modelValue,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event)),
+          onKeydown: [
+            _cache[1] || (_cache[1] = withKeys(($event) => _ctx.$emit("focus-tabset"), ["up"])),
+            _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => _ctx.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
+            _cache[3] || (_cache[3] = withKeys(($event) => _ctx.$emit("select-first-emoji"), ["enter"]))
+          ]
+        }, createSlots({
+          leftIcon: withCtx(() => [
+            createVNode(unref(DtIconSearch), { size: "200" })
+          ]),
+          _: 2
+        }, [
+          __props.modelValue.length > 0 ? {
+            name: "rightIcon",
+            fn: withCtx(() => [
+              createVNode(unref(DtButton), {
+                importance: "clear",
+                size: "xs",
+                class: "d-emoji-picker__search-x-button",
+                circle: "",
+                kind: "muted",
+                onClick: clearSearch
+              }, {
+                icon: withCtx(() => [
+                  createVNode(unref(DtIconClose), { size: "200" })
+                ]),
+                _: 1
+              })
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["placeholder", "model-value"])
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=emoji_search.vue.js.map

package/dist/vue3/components/emoji_picker/modules/emoji_search.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_search.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_search.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\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 #leftIcon>\n        <dt-icon-search\n          size=\"200\"\n        />\n      </template>\n      <template\n        v-if=\"modelValue.length > 0\"\n        #rightIcon\n      >\n        <dt-button\n          importance=\"clear\"\n          size=\"xs\"\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/vue3';\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"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAyDA,UAAM,QAAQ;AAEd,UAAM,cAAc,IAAI,IAAI;AAE5B,aAAS,cAAe;AACtB,YAAM,qBAAqB,EAAE;AAC7B;IACF;AAEA,aAAS,mBAAoB;AAC3B,kBAAY,MAAM;IACpB;AACA,cAAU,MAAM;AACd;IACF,CAAC;AAED,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}