@dialpad/dialtone 9.110.1 → 9.111.0

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

@@ -1,199 +0,0 @@
-import { ref, watchEffect, computed, openBlock, createElementBlock, withDirectives, createElementVNode, Fragment, renderList, normalizeClass, unref, vShow, createVNode, withCtx, createTextVNode, toDisplayString, nextTick } from "vue";
-import { CDN_URL, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from "../emoji_picker_constants.js";
-import DtTooltip from "../../tooltip/tooltip.vue.js";
-const _hoisted_1 = { "data-qa": "skin-selector" };
-const _hoisted_2 = { class: "d-emoji-picker__skin-list" };
-const _hoisted_3 = ["onKeydown", "onClick"];
-const _hoisted_4 = ["alt", "aria-label", "title", "src"];
-const _hoisted_5 = { class: "d-emoji-picker__skin-selected" };
-const _hoisted_6 = ["aria-label"];
-const _hoisted_7 = ["alt", "aria-label", "title", "src"];
-const _sfc_main = {
-  __name: "emoji_skin_selector",
-  props: {
-    /**
-     * The skin tone to apply to the emoji list
-     * @type {String}
-     * @required
-     */
-    skinTone: {
-      type: String,
-      required: true
-    },
-    isHovering: {
-      type: Boolean,
-      default: false
-    },
-    skinSelectorButtonTooltipLabel: {
-      type: String,
-      required: true
-    }
-  },
-  emits: [
-    /**
-     * The skin tone that was selected
-     * @event skin-tone
-     * @type {Number}
-     */
-    "skin-tone",
-    "focus-tabset",
-    "focus-last-emoji"
-  ],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const skinList = [
-      {
-        name: ":wave_tone1:",
-        unicode_output: "1f44b-1f3fb",
-        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,
-        skinCode: "_tone1"
-      },
-      {
-        name: ":wave_tone2:",
-        unicode_output: "1f44b-1f3fc",
-        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
-        skinCode: "_tone2"
-      },
-      {
-        name: ":wave_tone3:",
-        unicode_output: "1f44b-1f3fd",
-        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
-        skinCode: "_tone3"
-      },
-      {
-        name: ":wave_tone4:",
-        unicode_output: "1f44b-1f3fe",
-        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
-        skinCode: "_tone4"
-      },
-      {
-        name: ":wave_tone5:",
-        unicode_output: "1f44b-1f3ff",
-        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
-        skinCode: "_tone5"
-      },
-      {
-        name: ":wave:",
-        unicode_output: "1f44b",
-        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
-        skinCode: ""
-      }
-    ];
-    const isOpen = ref(false);
-    const skinSelectorRef = ref(null);
-    const skinsRef = ref([]);
-    watchEffect(
-      () => props.isHovering && (isOpen.value = false)
-    );
-    const skinPassedIn = computed(() => skinList.find((skin) => skin.skinTone === props.skinTone));
-    const skinSelected = ref(skinPassedIn.value);
-    watchEffect(() => skinPassedIn.value && (skinSelected.value = skinPassedIn.value));
-    function setSkinsRef(ref2) {
-      skinsRef.value.push(ref2);
-    }
-    function focusSkinSelector() {
-      skinSelectorRef.value.focus();
-    }
-    function selectSkin(skin) {
-      skinSelected.value = skin;
-      isOpen.value = false;
-      emits("skin-tone", skin.skinTone);
-      nextTick(() => focusSkinSelector());
-    }
-    const handleKeyDown = (event, skin, index) => {
-      var _a, _b, _c;
-      event.preventDefault();
-      if (event.key === "ArrowLeft") {
-        if (index === 0) (_a = skinsRef.value[skinsRef.value.length - 1]) == null ? void 0 : _a.focus();
-        (_b = skinsRef.value[index - 1]) == null ? void 0 : _b.focus();
-      }
-      if (event.key === "ArrowRight") {
-        (_c = skinsRef.value[index + 1]) == null ? void 0 : _c.focus();
-      }
-      if (event.key === "Enter") {
-        if (skin) {
-          selectSkin(skin);
-        } else {
-          toggleSkinList();
-        }
-      }
-      if (event.key === "Tab") {
-        if (event.shiftKey) {
-          emits("focus-last-emoji");
-        } else {
-          emits("focus-tabset");
-        }
-      }
-    };
-    function toggleSkinList() {
-      isOpen.value = !isOpen.value;
-      nextTick(() => skinsRef.value[0].focus());
-    }
-    __expose({
-      focusSkinSelector
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        withDirectives(createElementVNode("div", _hoisted_2, [
-          (openBlock(), createElementBlock(Fragment, null, renderList(skinList, (skin, index) => {
-            return createElementVNode("button", {
-              ref_for: true,
-              ref: (el) => {
-                if (el) setSkinsRef(el);
-              },
-              key: skin.name,
-              class: normalizeClass({
-                "selected": skinSelected.value.skinCode === skin.skinCode
-              }),
-              onKeydown: (event) => handleKeyDown(event, skin, index),
-              onClick: ($event) => selectSkin(skin)
-            }, [
-              createElementVNode("img", {
-                class: "d-icon d-icon--size-500",
-                alt: skin.name,
-                "aria-label": skin.name,
-                title: skin.name,
-                src: `${unref(CDN_URL) + skin.unicode_output}.png`
-              }, null, 8, _hoisted_4)
-            ], 42, _hoisted_3);
-          }), 64))
-        ], 512), [
-          [vShow, isOpen.value]
-        ]),
-        withDirectives(createElementVNode("div", _hoisted_5, [
-          createVNode(unref(DtTooltip), { placement: "top-end" }, {
-            anchor: withCtx(() => [
-              createElementVNode("button", {
-                ref_key: "skinSelectorRef",
-                ref: skinSelectorRef,
-                "aria-label": __props.skinSelectorButtonTooltipLabel,
-                tabindex: "-1",
-                onClick: toggleSkinList,
-                onKeydown: _cache[0] || (_cache[0] = (event) => handleKeyDown(event))
-              }, [
-                createElementVNode("img", {
-                  class: "d-icon d-icon--size-500",
-                  alt: skinSelected.value.name,
-                  "aria-label": skinSelected.value.name,
-                  title: skinSelected.value.name,
-                  src: `${unref(CDN_URL) + skinSelected.value.unicode_output}.png`
-                }, null, 8, _hoisted_7)
-              ], 40, _hoisted_6)
-            ]),
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(__props.skinSelectorButtonTooltipLabel) + " ", 1)
-            ]),
-            _: 1
-          })
-        ], 512), [
-          [vShow, !isOpen.value]
-        ])
-      ]);
-    };
-  }
-};
-export {
-  _sfc_main as default
-};
-//# sourceMappingURL=emoji_skin_selector.vue.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"emoji_skin_selector.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_skin_selector.vue"],"sourcesContent":["<template>\n  <div data-qa=\"skin-selector\">\n    <div\n      v-show=\"isOpen\"\n      class=\"d-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        :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            :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            >\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/emoji_picker/emoji_picker_constants.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"],"names":["ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,UAAM,QAAQ;AAsBd,UAAM,QAAQ;AAWd,UAAM,WAAW;AAAA,MACf;AAAA,QACE,MAAM;AAAA,QACN,gBAAgB;AAAA,QAChB,UAAU,iCAAiC;AAAA,QAC3C,UAAU;AAAA,MACX;AAAA,MACD;AAAA,QACE,MAAM;AAAA,QACN,gBAAgB;AAAA,QAChB,UAAU,iCAAiC;AAAA,QAC3C,UAAU;AAAA,MACX;AAAA,MACD;AAAA,QACE,MAAM;AAAA,QACN,gBAAgB;AAAA,QAChB,UAAU,iCAAiC;AAAA,QAC3C,UAAU;AAAA,MACX;AAAA,MACD;AAAA,QACE,MAAM;AAAA,QACN,gBAAgB;AAAA,QAChB,UAAU,iCAAiC;AAAA,QAC3C,UAAU;AAAA,MACX;AAAA,MACD;AAAA,QACE,MAAM;AAAA,QACN,gBAAgB;AAAA,QAChB,UAAU,iCAAiC;AAAA,QAC3C,UAAU;AAAA,MACX;AAAA,MACD;AAAA,QACE,MAAM;AAAA,QACN,gBAAgB;AAAA,QAChB,UAAU,iCAAiC;AAAA,QAC3C,UAAU;AAAA,MACX;AAAA,IACH;AAEA,UAAM,SAAS,IAAI,KAAK;AAExB,UAAM,kBAAkB,IAAI,IAAI;AAEhC,UAAM,WAAW,IAAI,CAAA,CAAE;AAKvB;AAAA,MACE,MAAM,MAAM,eAAe,OAAO,QAAQ;AAAA,IAC5C;AAMA,UAAM,eAAe,SAAS,MAAM,SAAS,KAAK,CAAC,SAAS,KAAK,aAAa,MAAM,QAAQ,CAAC;AAC7F,UAAM,eAAe,IAAI,aAAa,KAAK;AAC3C,gBAAY,MAAM,aAAa,UAAU,aAAa,QAAQ,aAAa,MAAM;AAEjF,aAAS,YAAaA,MAAK;AACzB,eAAS,MAAM,KAAKA,IAAG;AAAA,IACzB;AACA,aAAS,oBAAqB;AAC5B,sBAAgB,MAAM;IACxB;AAEA,aAAS,WAAY,MAAM;AACzB,mBAAa,QAAQ;AACrB,aAAO,QAAQ;AACf,YAAM,aAAa,KAAK,QAAQ;AAChC,eAAS,MAAM,kBAAiB,CAAE;AAAA,IACpC;AAEA,UAAM,gBAAgB,CAAC,OAAO,MAAM,UAAU;;AAC5C,YAAM,eAAc;AAEpB,UAAI,MAAM,QAAQ,aAAa;AAC7B,YAAI,UAAU,EAAG,gBAAS,MAAM,SAAS,MAAM,SAAS,CAAC,MAAxC,mBAA2C;AAC5D,uBAAS,MAAM,QAAQ,CAAC,MAAxB,mBAA2B;AAAA,MAC5B;AAED,UAAI,MAAM,QAAQ,cAAc;AAC9B,uBAAS,MAAM,QAAQ,CAAC,MAAxB,mBAA2B;AAAA,MAC5B;AAED,UAAI,MAAM,QAAQ,SAAS;AACzB,YAAI,MAAM;AAAE,qBAAW,IAAI;AAAA,QAAE,OAAQ;AACnC;QACD;AAAA,MACF;AAED,UAAI,MAAM,QAAQ,OAAO;AACvB,YAAI,MAAM,UAAU;AAClB,gBAAM,kBAAkB;AAAA,QAC9B,OAAW;AACL,gBAAM,cAAc;AAAA,QACrB;AAAA,MACF;AAAA,IACH;AAEA,aAAS,iBAAkB;AACzB,aAAO,QAAQ,CAAC,OAAO;AACvB,eAAS,MAAM,SAAS,MAAM,CAAC,EAAE,MAAK,CAAE;AAAA,IAC1C;AAEA,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,161 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-const common_utils = require("../../../common/utils.cjs");
-const emoji_picker_constants = require("../emoji_picker_constants.cjs");
-const vue3 = require("@dialpad/dialtone-icons/vue3");
-const tab_group = require("../../tab/tab_group.vue.cjs");
-const tab = require("../../tab/tab.vue.cjs");
-const _hoisted_1 = { class: "d-emoji-picker__tabset" };
-const _sfc_main = {
-  __name: "emoji_tabset",
-  props: {
-    /**
-     * Whether to show the recently used tab or not
-     * @type {Boolean}
-     * @default false
-     */
-    showRecentlyUsedTab: {
-      type: Boolean,
-      default: false
-    },
-    scrollIntoTab: {
-      type: Number,
-      required: true
-    },
-    emojiFilter: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The labels for the aria-label
-     * @type {Array}
-     * @required
-     */
-    tabsetLabels: {
-      type: Array,
-      required: true
-    }
-  },
-  emits: [
-    /**
-     * Emitted when a tab is selected
-     * @event selected-tabset
-     * @param {String} tabId - The name of the tab that was selected
-     */
-    "selected-tabset",
-    "focus-search-input",
-    "focus-skin-selector"
-  ],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const TABS_DATA = [
-      { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: vue3.DtIconClock },
-      { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: vue3.DtIconSatisfied },
-      { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.NATURE, icon: vue3.DtIconLivingThing },
-      { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.FOOD, icon: vue3.DtIconFood },
-      { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: vue3.DtIconObject },
-      { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.TRAVEL, icon: vue3.DtIconTransportation },
-      { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.OBJECTS, icon: vue3.DtIconLightbulb },
-      { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: vue3.DtIconHeart },
-      { label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.FLAGS, icon: vue3.DtIconFlag }
-    ];
-    const tabs = vue.computed(() => {
-      const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);
-      return tabsData.map((tab2, index) => ({
-        ...tab2,
-        label: props.tabsetLabels[index],
-        // IDs on dt-tab component need to be on string
-        id: (index + 1).toString(),
-        panelId: (index + 1).toString()
-      }));
-    });
-    const isSearching = vue.computed(() => props.emojiFilter.length > 0);
-    const selectedTab = vue.ref("1");
-    const tabsetRef = vue.ref([]);
-    vue.watch(
-      () => props.scrollIntoTab,
-      () => {
-        if (!isSearching.value) {
-          selectedTab.value = (props.scrollIntoTab + 1).toString();
-        }
-      }
-    );
-    vue.watch(
-      isSearching,
-      () => {
-        if (isSearching.value) {
-          selectedTab.value = null;
-        }
-      }
-    );
-    function selectTabset(id) {
-      const parseId = parseInt(id);
-      selectedTab.value = id;
-      emits("selected-tabset", parseId);
-    }
-    function setTabsetRef(ref) {
-      tabsetRef.value.push(common_utils.returnFirstEl(ref.$el));
-    }
-    function focusTabset() {
-      tabsetRef.value[0].focus();
-    }
-    function handleKeyDown(event, tabId) {
-      if (event.key === "Enter") {
-        selectTabset(tabId);
-        tabsetRef.value[tabId - 1].blur();
-      }
-      if (event.key === "Tab") {
-        event.preventDefault();
-        if (event.shiftKey) {
-          emits("focus-skin-selector");
-        } else {
-          emits("focus-search-input");
-        }
-      }
-      if (event.key === "ArrowDown") {
-        emits("focus-search-input");
-      }
-    }
-    __expose({
-      focusTabset
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        vue.createVNode(vue.unref(tab_group.default), {
-          size: "sm",
-          "tab-list-class": "d-emoji-picker__tabset-list",
-          selected: selectedTab.value
-        }, {
-          tabs: vue.withCtx(() => [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tabs.value, (tab$1, index) => {
-              return vue.openBlock(), vue.createBlock(vue.unref(tab.default), {
-                id: tab$1.id,
-                ref_for: true,
-                ref: (el) => {
-                  if (el) setTabsetRef(el);
-                },
-                key: tab$1.id,
-                "panel-id": tab$1.panelId,
-                label: tab$1.label,
-                "aria-controls": "d-emoji-picker-list",
-                tabindex: index + 1,
-                onClickCapture: vue.withModifiers(($event) => selectTabset(tab$1.id), ["stop"]),
-                onKeydown: ($event) => handleKeyDown($event, tab$1.id)
-              }, {
-                default: vue.withCtx(() => [
-                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tab$1.icon), { size: "400" }))
-                ]),
-                _: 2
-              }, 1032, ["id", "panel-id", "label", "tabindex", "onClickCapture", "onKeydown"]);
-            }), 128))
-          ]),
-          _: 1
-        }, 8, ["selected"])
-      ]);
-    };
-  }
-};
-exports.default = _sfc_main;
-//# sourceMappingURL=emoji_tabset.vue.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"emoji_tabset.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_tabset.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__tabset\">\n    <dt-tab-group\n      size=\"sm\"\n      tab-list-class=\"d-emoji-picker__tabset-list\"\n      :selected=\"selectedTab\"\n    >\n      <template #tabs>\n        <dt-tab\n          v-for=\"(tab, index) in tabs\"\n          :id=\"tab.id\"\n          :ref=\"el => { if (el) setTabsetRef(el) }\"\n          :key=\"tab.id\"\n          :panel-id=\"tab.panelId\"\n          :label=\"tab.label\"\n          aria-controls=\"d-emoji-picker-list\"\n          :tabindex=\"index + 1\"\n          @click.capture.stop=\"selectTabset(tab.id)\"\n          @keydown=\"handleKeyDown($event, 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 { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker/emoji_picker_constants.js';\nimport {\n  DtIconClock,\n  DtIconSatisfied,\n  DtIconLivingThing,\n  DtIconFood,\n  DtIconObject,\n  DtIconTransportation,\n  DtIconLightbulb,\n  DtIconHeart,\n  DtIconFlag,\n} from '@dialpad/dialtone-icons/vue3';\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  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: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: DtIconClock },\n  { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: DtIconSatisfied },\n  { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: DtIconLivingThing },\n  { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: DtIconFood },\n  { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: DtIconObject },\n  { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: DtIconTransportation },\n  { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: DtIconLightbulb },\n  { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: DtIconHeart },\n  { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: DtIconFlag },\n];\n\nconst tabs = computed(() => {\n  const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);\n\n  return tabsData.map((tab, index) => ({\n    ...tab,\n    label: props.tabsetLabels[index],\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"],"names":["EMOJI_PICKER_CATEGORIES","DtIconClock","DtIconSatisfied","DtIconLivingThing","DtIconFood","DtIconObject","DtIconTransportation","DtIconLightbulb","DtIconHeart","DtIconFlag","computed","tab","ref","watch","returnFirstEl"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,UAAM,QAAQ;AAgCd,UAAM,QAAQ;AAYd,UAAM,YAAY;AAAA,MAChB,EAAE,OAAOA,uBAAuB,wBAAC,oBAAoB,MAAMC,KAAAA,YAAa;AAAA,MACxE,EAAE,OAAOD,uBAAuB,wBAAC,oBAAoB,MAAME,KAAAA,gBAAiB;AAAA,MAC5E,EAAE,OAAOF,uBAAuB,wBAAC,QAAQ,MAAMG,KAAAA,kBAAmB;AAAA,MAClE,EAAE,OAAOH,uBAAuB,wBAAC,MAAM,MAAMI,KAAAA,WAAY;AAAA,MACzD,EAAE,OAAOJ,uBAAuB,wBAAC,UAAU,MAAMK,KAAAA,aAAc;AAAA,MAC/D,EAAE,OAAOL,uBAAuB,wBAAC,QAAQ,MAAMM,KAAAA,qBAAsB;AAAA,MACrE,EAAE,OAAON,uBAAuB,wBAAC,SAAS,MAAMO,KAAAA,gBAAiB;AAAA,MACjE,EAAE,OAAOP,uBAAuB,wBAAC,SAAS,MAAMQ,KAAAA,YAAa;AAAA,MAC7D,EAAE,OAAOR,uBAAuB,wBAAC,OAAO,MAAMS,KAAAA,WAAY;AAAA,IAC5D;AAEA,UAAM,OAAOC,IAAQ,SAAC,MAAM;AAC1B,YAAM,WAAW,MAAM,sBAAsB,YAAY,UAAU,MAAM,CAAC;AAE1E,aAAO,SAAS,IAAI,CAACC,MAAK,WAAW;AAAA,QACnC,GAAGA;AAAA,QACH,OAAO,MAAM,aAAa,KAAK;AAAA;AAAA,QAE/B,KAAK,QAAQ,GAAG,SAAU;AAAA,QAC1B,UAAU,QAAQ,GAAG,SAAU;AAAA,MAChC,EAAC;AAAA,IACJ,CAAC;AAED,UAAM,cAAcD,IAAQ,SAAC,MAAM,MAAM,YAAY,SAAS,CAAC;AAE/D,UAAM,cAAcE,IAAAA,IAAI,GAAG;AAE3B,UAAM,YAAYA,IAAAA,IAAI,CAAA,CAAE;AAExBC,QAAAA;AAAAA,MAAM,MAAM,MAAM;AAAA,MAChB,MAAM;AACJ,YAAI,CAAC,YAAY,OAAO;AACtB,sBAAY,SAAS,MAAM,gBAAgB,GAAG;QAC/C;AAAA,MACL;AAAA,IAAG;AAEHA,QAAAA;AAAAA,MAAM;AAAA,MACJ,MAAM;AACJ,YAAI,YAAY,OAAO;AACrB,sBAAY,QAAQ;AAAA,QACrB;AAAA,MACL;AAAA,IAAG;AAOH,aAAS,aAAc,IAAI;AAEzB,YAAM,UAAU,SAAS,EAAE;AAE3B,kBAAY,QAAQ;AACpB,YAAM,mBAAmB,OAAO;AAAA,IAClC;AAEA,aAAS,aAAc,KAAK;AAG1B,gBAAU,MAAM,KAAKC,aAAa,cAAC,IAAI,GAAG,CAAC;AAAA,IAC7C;AAEA,aAAS,cAAe;AACtB,gBAAU,MAAM,CAAC,EAAE,MAAK;AAAA,IAC1B;AAEA,aAAS,cAAe,OAAO,OAAO;AACpC,UAAI,MAAM,QAAQ,SAAS;AACzB,qBAAa,KAAK;AAElB,kBAAU,MAAM,QAAQ,CAAC,EAAE,KAAI;AAAA,MAChC;AAED,UAAI,MAAM,QAAQ,OAAO;AACvB,cAAM,eAAc;AACpB,YAAI,MAAM,UAAU;AAClB,gBAAM,qBAAqB;AAAA,QACjC,OAAW;AACL,gBAAM,oBAAoB;AAAA,QAC3B;AAAA,MACF;AAED,UAAI,MAAM,QAAQ,aAAa;AAE7B,cAAM,oBAAoB;AAAA,MAC3B;AAAA,IACH;AAEA,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,161 +0,0 @@
-import { computed, ref, watch, openBlock, createElementBlock, createVNode, unref, withCtx, Fragment, renderList, createBlock, withModifiers, resolveDynamicComponent } from "vue";
-import { returnFirstEl } from "../../../common/utils.js";
-import { EMOJI_PICKER_CATEGORIES } from "../emoji_picker_constants.js";
-import { DtIconClock, DtIconSatisfied, DtIconLivingThing, DtIconFood, DtIconObject, DtIconTransportation, DtIconLightbulb, DtIconHeart, DtIconFlag } from "@dialpad/dialtone-icons/vue3";
-import DtTabGroup from "../../tab/tab_group.vue.js";
-import DtTab from "../../tab/tab.vue.js";
-const _hoisted_1 = { class: "d-emoji-picker__tabset" };
-const _sfc_main = {
-  __name: "emoji_tabset",
-  props: {
-    /**
-     * Whether to show the recently used tab or not
-     * @type {Boolean}
-     * @default false
-     */
-    showRecentlyUsedTab: {
-      type: Boolean,
-      default: false
-    },
-    scrollIntoTab: {
-      type: Number,
-      required: true
-    },
-    emojiFilter: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The labels for the aria-label
-     * @type {Array}
-     * @required
-     */
-    tabsetLabels: {
-      type: Array,
-      required: true
-    }
-  },
-  emits: [
-    /**
-     * Emitted when a tab is selected
-     * @event selected-tabset
-     * @param {String} tabId - The name of the tab that was selected
-     */
-    "selected-tabset",
-    "focus-search-input",
-    "focus-skin-selector"
-  ],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const TABS_DATA = [
-      { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: DtIconClock },
-      { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: DtIconSatisfied },
-      { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: DtIconLivingThing },
-      { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: DtIconFood },
-      { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: DtIconObject },
-      { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: DtIconTransportation },
-      { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: DtIconLightbulb },
-      { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: DtIconHeart },
-      { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: DtIconFlag }
-    ];
-    const tabs = computed(() => {
-      const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);
-      return tabsData.map((tab, index) => ({
-        ...tab,
-        label: props.tabsetLabels[index],
-        // IDs on dt-tab component need to be on string
-        id: (index + 1).toString(),
-        panelId: (index + 1).toString()
-      }));
-    });
-    const isSearching = computed(() => props.emojiFilter.length > 0);
-    const selectedTab = ref("1");
-    const tabsetRef = ref([]);
-    watch(
-      () => props.scrollIntoTab,
-      () => {
-        if (!isSearching.value) {
-          selectedTab.value = (props.scrollIntoTab + 1).toString();
-        }
-      }
-    );
-    watch(
-      isSearching,
-      () => {
-        if (isSearching.value) {
-          selectedTab.value = null;
-        }
-      }
-    );
-    function selectTabset(id) {
-      const parseId = parseInt(id);
-      selectedTab.value = id;
-      emits("selected-tabset", parseId);
-    }
-    function setTabsetRef(ref2) {
-      tabsetRef.value.push(returnFirstEl(ref2.$el));
-    }
-    function focusTabset() {
-      tabsetRef.value[0].focus();
-    }
-    function handleKeyDown(event, tabId) {
-      if (event.key === "Enter") {
-        selectTabset(tabId);
-        tabsetRef.value[tabId - 1].blur();
-      }
-      if (event.key === "Tab") {
-        event.preventDefault();
-        if (event.shiftKey) {
-          emits("focus-skin-selector");
-        } else {
-          emits("focus-search-input");
-        }
-      }
-      if (event.key === "ArrowDown") {
-        emits("focus-search-input");
-      }
-    }
-    __expose({
-      focusTabset
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(unref(DtTabGroup), {
-          size: "sm",
-          "tab-list-class": "d-emoji-picker__tabset-list",
-          selected: selectedTab.value
-        }, {
-          tabs: withCtx(() => [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(tabs.value, (tab, index) => {
-              return openBlock(), createBlock(unref(DtTab), {
-                id: tab.id,
-                ref_for: true,
-                ref: (el) => {
-                  if (el) setTabsetRef(el);
-                },
-                key: tab.id,
-                "panel-id": tab.panelId,
-                label: tab.label,
-                "aria-controls": "d-emoji-picker-list",
-                tabindex: index + 1,
-                onClickCapture: withModifiers(($event) => selectTabset(tab.id), ["stop"]),
-                onKeydown: ($event) => handleKeyDown($event, tab.id)
-              }, {
-                default: withCtx(() => [
-                  (openBlock(), createBlock(resolveDynamicComponent(tab.icon), { size: "400" }))
-                ]),
-                _: 2
-              }, 1032, ["id", "panel-id", "label", "tabindex", "onClickCapture", "onKeydown"]);
-            }), 128))
-          ]),
-          _: 1
-        }, 8, ["selected"])
-      ]);
-    };
-  }
-};
-export {
-  _sfc_main as default
-};
-//# sourceMappingURL=emoji_tabset.vue.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"emoji_tabset.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_tabset.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__tabset\">\n    <dt-tab-group\n      size=\"sm\"\n      tab-list-class=\"d-emoji-picker__tabset-list\"\n      :selected=\"selectedTab\"\n    >\n      <template #tabs>\n        <dt-tab\n          v-for=\"(tab, index) in tabs\"\n          :id=\"tab.id\"\n          :ref=\"el => { if (el) setTabsetRef(el) }\"\n          :key=\"tab.id\"\n          :panel-id=\"tab.panelId\"\n          :label=\"tab.label\"\n          aria-controls=\"d-emoji-picker-list\"\n          :tabindex=\"index + 1\"\n          @click.capture.stop=\"selectTabset(tab.id)\"\n          @keydown=\"handleKeyDown($event, 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 { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker/emoji_picker_constants.js';\nimport {\n  DtIconClock,\n  DtIconSatisfied,\n  DtIconLivingThing,\n  DtIconFood,\n  DtIconObject,\n  DtIconTransportation,\n  DtIconLightbulb,\n  DtIconHeart,\n  DtIconFlag,\n} from '@dialpad/dialtone-icons/vue3';\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  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: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: DtIconClock },\n  { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: DtIconSatisfied },\n  { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: DtIconLivingThing },\n  { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: DtIconFood },\n  { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: DtIconObject },\n  { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: DtIconTransportation },\n  { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: DtIconLightbulb },\n  { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: DtIconHeart },\n  { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: DtIconFlag },\n];\n\nconst tabs = computed(() => {\n  const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);\n\n  return tabsData.map((tab, index) => ({\n    ...tab,\n    label: props.tabsetLabels[index],\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"],"names":["ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,UAAM,QAAQ;AAgCd,UAAM,QAAQ;AAYd,UAAM,YAAY;AAAA,MAChB,EAAE,OAAO,wBAAwB,oBAAoB,MAAM,YAAa;AAAA,MACxE,EAAE,OAAO,wBAAwB,oBAAoB,MAAM,gBAAiB;AAAA,MAC5E,EAAE,OAAO,wBAAwB,QAAQ,MAAM,kBAAmB;AAAA,MAClE,EAAE,OAAO,wBAAwB,MAAM,MAAM,WAAY;AAAA,MACzD,EAAE,OAAO,wBAAwB,UAAU,MAAM,aAAc;AAAA,MAC/D,EAAE,OAAO,wBAAwB,QAAQ,MAAM,qBAAsB;AAAA,MACrE,EAAE,OAAO,wBAAwB,SAAS,MAAM,gBAAiB;AAAA,MACjE,EAAE,OAAO,wBAAwB,SAAS,MAAM,YAAa;AAAA,MAC7D,EAAE,OAAO,wBAAwB,OAAO,MAAM,WAAY;AAAA,IAC5D;AAEA,UAAM,OAAO,SAAS,MAAM;AAC1B,YAAM,WAAW,MAAM,sBAAsB,YAAY,UAAU,MAAM,CAAC;AAE1E,aAAO,SAAS,IAAI,CAAC,KAAK,WAAW;AAAA,QACnC,GAAG;AAAA,QACH,OAAO,MAAM,aAAa,KAAK;AAAA;AAAA,QAE/B,KAAK,QAAQ,GAAG,SAAU;AAAA,QAC1B,UAAU,QAAQ,GAAG,SAAU;AAAA,MAChC,EAAC;AAAA,IACJ,CAAC;AAED,UAAM,cAAc,SAAS,MAAM,MAAM,YAAY,SAAS,CAAC;AAE/D,UAAM,cAAc,IAAI,GAAG;AAE3B,UAAM,YAAY,IAAI,CAAA,CAAE;AAExB;AAAA,MAAM,MAAM,MAAM;AAAA,MAChB,MAAM;AACJ,YAAI,CAAC,YAAY,OAAO;AACtB,sBAAY,SAAS,MAAM,gBAAgB,GAAG;QAC/C;AAAA,MACL;AAAA,IAAG;AAEH;AAAA,MAAM;AAAA,MACJ,MAAM;AACJ,YAAI,YAAY,OAAO;AACrB,sBAAY,QAAQ;AAAA,QACrB;AAAA,MACL;AAAA,IAAG;AAOH,aAAS,aAAc,IAAI;AAEzB,YAAM,UAAU,SAAS,EAAE;AAE3B,kBAAY,QAAQ;AACpB,YAAM,mBAAmB,OAAO;AAAA,IAClC;AAEA,aAAS,aAAcA,MAAK;AAG1B,gBAAU,MAAM,KAAK,cAAcA,KAAI,GAAG,CAAC;AAAA,IAC7C;AAEA,aAAS,cAAe;AACtB,gBAAU,MAAM,CAAC,EAAE,MAAK;AAAA,IAC1B;AAEA,aAAS,cAAe,OAAO,OAAO;AACpC,UAAI,MAAM,QAAQ,SAAS;AACzB,qBAAa,KAAK;AAElB,kBAAU,MAAM,QAAQ,CAAC,EAAE,KAAI;AAAA,MAChC;AAED,UAAI,MAAM,QAAQ,OAAO;AACvB,cAAM,eAAc;AACpB,YAAI,MAAM,UAAU;AAClB,gBAAM,qBAAqB;AAAA,QACjC,OAAW;AACL,gBAAM,oBAAoB;AAAA,QAC3B;AAAA,MACF;AAED,UAAI,MAAM,QAAQ,aAAa;AAE7B,cAAM,oBAAoB;AAAA,MAC3B;AAAA,IACH;AAEA,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/emoji_text_wrapper/emoji_text_wrapper.vue.cjs

@@ -1,102 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const common_emoji = require("../../common/emoji.cjs");
-const vue = require("vue");
-const icon_constants = require("../icon/icon_constants.cjs");
-const emoji = require("../emoji/emoji.vue.cjs");
-const COMMENT_TYPE = vue.h(vue.resolveDynamicComponent(null)).type;
-const _sfc_main = {
-  compatConfig: { MODE: 3 },
-  name: "DtEmojiTextWrapper",
-  components: {
-    DtEmoji: emoji.default
-  },
-  props: {
-    /**
-     * Element type (tag name) to use for the wrapper.
-     */
-    elementType: {
-      type: String,
-      default: "div"
-    },
-    /**
-     * The icon size to render the emojis at: 100 to 800
-     */
-    size: {
-      type: String,
-      default: "500",
-      validator: (t) => Object.keys(icon_constants.ICON_SIZE_MODIFIERS).includes(t)
-    }
-  },
-  data() {
-    return {
-      loadingEmojiJson: true
-    };
-  },
-  async created() {
-    this.loadingEmojiJson = false;
-  },
-  methods: {
-    /**
-     * Replaces the valid codes from the text content with a DtEmoji component.
-     * @returns {Array<VNode|string>}
-     */
-    replaceDtEmojis(replaceList, textContent) {
-      if (!replaceList.length) return textContent;
-      const escapedReplaceList = replaceList.map(
-        (item) => item.replace(/\*/g, "\\*")
-      );
-      const regexp = new RegExp(`(${escapedReplaceList.join("|")})`, "g");
-      const items = textContent.split(regexp);
-      return items.filter((item) => item.trim() !== "").map((item) => {
-        if (replaceList.includes(item)) {
-          return vue.h(emoji.default, { code: item, size: this.size });
-        }
-        return vue.h("span", { class: "d-emoji-text-wrapper__text" }, item);
-      });
-    },
-    /**
-     * Recursively search the Vue virtual DOM to find text
-     * @param VNode
-     * @returns {VNode|*}
-     */
-    searchVNodes(VNode) {
-      var _a;
-      if (typeof VNode === "string") return this.searchCodes(VNode);
-      if (VNode.type === COMMENT_TYPE) return VNode;
-      if (typeof VNode.type === "symbol") return this.searchCodes(VNode.children);
-      if ((_a = VNode.props) == null ? void 0 : _a.innerHTML) return this.searchVNodes(VNode.props.innerHTML);
-      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];
-      return vue.h(VNode.type, VNode.props, children.map((VNodeChild) => this.searchVNodes(VNodeChild)));
-    },
-    // TODO: Find a way to crawl vue components
-    replaceVueComponentVNodeContent(VNode) {
-    },
-    /**
-     * Find codes in text.
-     * @param textContent string
-     * @returns {Array<VNode|string>|string}
-     */
-    searchCodes(textContent) {
-      const shortcodes = common_emoji.findShortCodes(textContent);
-      const emojis = common_emoji.findEmojis(textContent);
-      const replaceList = [...shortcodes, ...emojis];
-      if (replaceList.length === 0) return textContent;
-      return this.replaceDtEmojis(replaceList, textContent);
-    }
-  },
-  render() {
-    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];
-    return vue.h(
-      this.elementType,
-      {
-        "data-qa": "emoji-text-wrapper",
-        class: "d-emoji-text-wrapper"
-      },
-      this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode))
-    );
-  }
-};
-const DtEmojiTextWrapper = _sfc_main;
-exports.default = DtEmojiTextWrapper;
-//# sourceMappingURL=emoji_text_wrapper.vue.cjs.map