@dialpad/dialtone 9.110.2 → 9.111.1

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

@@ -1 +0,0 @@
-{"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

@@ -1,35 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

@@ -1,35 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,38 +0,0 @@
-"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

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

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

@@ -1,38 +0,0 @@
-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

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

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

@@ -1,82 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

@@ -1,82 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}