@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/components/dropdown/dropdown_separator.vue.cjs

@@ -0,0 +1,17 @@
+"use strict";
+const vue = require("vue");
+;/* empty css                          */
+const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
+const _sfc_main = {
+  name: "DtDropdownSeparator"
+};
+const _hoisted_1 = {
+  "aria-hidden": "true",
+  class: "dt-list-separator"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("li", _hoisted_1);
+}
+const dropdown_separator = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = dropdown_separator;
+//# sourceMappingURL=dropdown_separator.vue.cjs.map

package/dist/components/dropdown/dropdown_separator.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown_separator.vue.cjs","sources":["../../../components/dropdown/dropdown_separator.vue"],"sourcesContent":["<template>\n  <li\n    aria-hidden=\"true\"\n    class=\"dt-list-separator\"\n  />\n</template>\n\n<script>\nexport default {\n  name: 'DtDropdownSeparator',\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item[role=\"menuitem\"] {\n  border-radius: var(--dt-size-300);\n}\n.dt-list-separator {\n  border-top: var(--dt-size-100) solid var(--dt-color-border-default);\n  list-style: none;\n  margin: var(--dt-space-300) var(--dt-space-300-negative);\n}\n</style>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;AAQA,MAAK,YAAU;AAAA,EACb,MAAM;AACR;;EARI,eAAY;AAAA,EACZ,OAAM;;;AAFR,SAAAA,IAAA,UAAA,GAAAC,IAAAA,mBAGE,MAHF,UAGE;;;;"}

package/dist/components/dropdown/dropdown_separator.vue.js

@@ -0,0 +1,18 @@
+import { openBlock, createElementBlock } from "vue";
+/* empty css                        */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "DtDropdownSeparator"
+};
+const _hoisted_1 = {
+  "aria-hidden": "true",
+  class: "dt-list-separator"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("li", _hoisted_1);
+}
+const dropdown_separator = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  dropdown_separator as default
+};
+//# sourceMappingURL=dropdown_separator.vue.js.map

package/dist/components/dropdown/dropdown_separator.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown_separator.vue.js","sources":["../../../components/dropdown/dropdown_separator.vue"],"sourcesContent":["<template>\n  <li\n    aria-hidden=\"true\"\n    class=\"dt-list-separator\"\n  />\n</template>\n\n<script>\nexport default {\n  name: 'DtDropdownSeparator',\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item[role=\"menuitem\"] {\n  border-radius: var(--dt-size-300);\n}\n.dt-list-separator {\n  border-top: var(--dt-size-100) solid var(--dt-color-border-default);\n  list-style: none;\n  margin: var(--dt-space-300) var(--dt-space-300-negative);\n}\n</style>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;AAQA,MAAK,YAAU;AAAA,EACb,MAAM;AACR;;EARI,eAAY;AAAA,EACZ,OAAM;;;AAFR,SAAAA,UAAA,GAAAC,mBAGE,MAHF,UAGE;;;"}

package/dist/components/emoji/emoji.vue.cjs

@@ -0,0 +1,155 @@
+"use strict";
+const common_emoji = require("../../common/emoji.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
+const skeleton = require("../skeleton/skeleton.vue.cjs");
+const icon_constants = require("../icon/icon_constants.cjs");
+const _sfc_main = {
+  name: "DtEmoji",
+  components: {
+    DtSkeleton: skeleton
+  },
+  props: {
+    /**
+     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.
+     * <a class="d-link" href="https://emojipedia.org/joypixels/" target="_blank">JoyPixels</a>
+     * for all supported shortcode/unicode or the docs for setting up custom emojis.
+     */
+    code: {
+      type: String,
+      required: true
+    },
+    /**
+     * The size of the emoji. Can be any of the icon size utility classes from
+     * <a class="d-link" href="https://dialtone.dialpad.com/components/icon.html" target="_blank"> Dialpad Icon Size</a>
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (t) => Object.keys(icon_constants.ICON_SIZE_MODIFIERS).includes(t)
+    },
+    /**
+     * Additional class name for the emoji img element.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
+     */
+    imgClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    /**
+     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n
+     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will
+     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the
+     * getEmojiData() function
+     */
+    ariaLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * Shows a skeleton loader while the emoji asset is loading.
+     * @values true, false
+     */
+    showSkeleton: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      emojiData: null,
+      imgLoading: false
+    };
+  },
+  computed: {
+    emojiDataValid() {
+      return !!this.emojiData;
+    },
+    emojiSrc() {
+      var _a;
+      if (!this.emojiDataValid) {
+        return "invalid";
+      }
+      if ((_a = this.emojiData) == null ? void 0 : _a.custom) {
+        return common_emoji.customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;
+      }
+      if (["100", "200"].includes(this.size)) {
+        return common_emoji.emojiImageUrlSmall + this.emojiData.key + common_emoji.emojiFileExtensionSmall;
+      } else {
+        return common_emoji.emojiImageUrlLarge + this.emojiData.key + common_emoji.emojiFileExtensionLarge;
+      }
+    },
+    emojiAlt() {
+      if (!this.emojiDataValid) {
+        return void 0;
+      }
+      return this.emojiData.unicode_output ? common_emoji.stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;
+    },
+    emojiLabel() {
+      if (!this.emojiDataValid) {
+        return "Invalid Emoji";
+      }
+      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;
+    },
+    emojiSize() {
+      return icon_constants.ICON_SIZE_MODIFIERS[this.size];
+    }
+  },
+  watch: {
+    code: {
+      handler: function() {
+        this.getEmojiData();
+      },
+      immediate: true
+    },
+    emojiSrc: {
+      handler: async function() {
+        this.imgLoading = true;
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    getEmojiData() {
+      this.emojiData = common_emoji.codeToEmojiData(this.code);
+    },
+    imageLoaded() {
+      this.imgLoading = false;
+    },
+    imageErrored() {
+      this.imgLoading = false;
+    }
+  }
+};
+const _hoisted_1 = ["aria-label", "alt", "title", "src"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_skeleton = vue.resolveComponent("dt-skeleton");
+  return vue.openBlock(), vue.createElementBlock("span", {
+    class: vue.normalizeClass(["d-emoji d-icon", $options.emojiSize])
+  }, [
+    vue.withDirectives(vue.createVNode(_component_dt_skeleton, {
+      offset: 0,
+      class: vue.normalizeClass(["d-icon", $options.emojiSize]),
+      "shape-option": { shape: "circle", size: "100%" }
+    }, null, 8, ["class"]), [
+      [vue.vShow, $data.imgLoading && $props.showSkeleton]
+    ]),
+    vue.withDirectives(vue.createElementVNode("img", {
+      ref: "emojiImg",
+      class: vue.normalizeClass(["d-icon", $options.emojiSize, $props.imgClass]),
+      "aria-label": $options.emojiLabel,
+      alt: $options.emojiAlt,
+      title: $options.emojiLabel,
+      src: $options.emojiSrc,
+      onLoad: _cache[0] || (_cache[0] = (...args) => $options.imageLoaded && $options.imageLoaded(...args)),
+      onError: _cache[1] || (_cache[1] = (...args) => $options.imageErrored && $options.imageErrored(...args))
+    }, null, 42, _hoisted_1), [
+      [vue.vShow, !$data.imgLoading]
+    ])
+  ], 2);
+}
+const DtEmoji = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = DtEmoji;
+//# sourceMappingURL=emoji.vue.cjs.map

package/dist/components/emoji/emoji.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji.vue.cjs","sources":["../../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n  <span :class=\"['d-emoji d-icon', emojiSize]\">\n    <dt-skeleton\n      v-show=\"imgLoading && showSkeleton\"\n      :offset=\"0\"\n      :class=\"['d-icon', emojiSize]\"\n      :shape-option=\"{ shape: 'circle', size: '100%' }\"\n    />\n    <img\n      v-show=\"!imgLoading\"\n      ref=\"emojiImg\"\n      :class=\"['d-icon', emojiSize, imgClass]\"\n      :aria-label=\"emojiLabel\"\n      :alt=\"emojiAlt\"\n      :title=\"emojiLabel\"\n      :src=\"emojiSrc\"\n      @load=\"imageLoaded\"\n      @error=\"imageErrored\"\n    >\n  </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport {\n  codeToEmojiData,\n  stringToUnicode,\n  emojiImageUrlSmall,\n  emojiFileExtensionSmall,\n  emojiImageUrlLarge,\n  emojiFileExtensionLarge,\n  customEmojiAssetUrl,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n  name: 'DtEmoji',\n\n  components: {\n    DtSkeleton,\n  },\n\n  props: {\n    /**\n     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n     * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n     * for all supported shortcode/unicode or the docs for setting up custom emojis.\n     */\n    code: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The size of the emoji. Can be any of the icon size utility classes from\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n\n    /**\n     * Additional class name for the emoji img element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    imgClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n     * getEmojiData() function\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Shows a skeleton loader while the emoji asset is loading.\n     * @values true, false\n     */\n    showSkeleton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      emojiData: null,\n      imgLoading: false,\n    };\n  },\n\n  computed: {\n    emojiDataValid () {\n      return !!this.emojiData;\n    },\n\n    emojiSrc () {\n      if (!this.emojiDataValid) { return 'invalid'; }\n\n      // custom emoji\n      if (this.emojiData?.custom) {\n        return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;\n      }\n\n      if (['100', '200'].includes(this.size)) {\n        return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n      } else {\n        return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n      }\n    },\n\n    emojiAlt () {\n      if (!this.emojiDataValid) { return undefined; }\n      return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n    },\n\n    emojiLabel () {\n      if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n    },\n\n    emojiSize () {\n      return ICON_SIZE_MODIFIERS[this.size];\n    },\n  },\n\n  watch: {\n    code: {\n      handler: function () {\n        this.getEmojiData();\n      },\n\n      immediate: true,\n    },\n\n    emojiSrc: {\n      handler: async function () {\n        this.imgLoading = true;\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    getEmojiData () {\n      this.emojiData = codeToEmojiData(this.code);\n    },\n\n    imageLoaded () {\n      this.imgLoading = false;\n    },\n\n    imageErrored () {\n      this.imgLoading = false;\n    },\n  },\n};\n</script>\n"],"names":["DtSkeleton","ICON_SIZE_MODIFIERS","customEmojiAssetUrl","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","stringToUnicode","codeToEmojiData","_createElementBlock","_createVNode","_vShow","_createElementVNode","_normalizeClass"],"mappings":"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"}

package/dist/components/emoji/emoji.vue.js

@@ -0,0 +1,156 @@
+import { customEmojiAssetUrl, emojiImageUrlSmall, emojiFileExtensionSmall, emojiImageUrlLarge, emojiFileExtensionLarge, stringToUnicode, codeToEmojiData } from "../../common/emoji.js";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, withDirectives, createVNode, vShow, createElementVNode } from "vue";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+import DtSkeleton from "../skeleton/skeleton.vue.js";
+import { ICON_SIZE_MODIFIERS } from "../icon/icon_constants.js";
+const _sfc_main = {
+  name: "DtEmoji",
+  components: {
+    DtSkeleton
+  },
+  props: {
+    /**
+     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.
+     * <a class="d-link" href="https://emojipedia.org/joypixels/" target="_blank">JoyPixels</a>
+     * for all supported shortcode/unicode or the docs for setting up custom emojis.
+     */
+    code: {
+      type: String,
+      required: true
+    },
+    /**
+     * The size of the emoji. Can be any of the icon size utility classes from
+     * <a class="d-link" href="https://dialtone.dialpad.com/components/icon.html" target="_blank"> Dialpad Icon Size</a>
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t)
+    },
+    /**
+     * Additional class name for the emoji img element.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
+     */
+    imgClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    /**
+     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n
+     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will
+     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the
+     * getEmojiData() function
+     */
+    ariaLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * Shows a skeleton loader while the emoji asset is loading.
+     * @values true, false
+     */
+    showSkeleton: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      emojiData: null,
+      imgLoading: false
+    };
+  },
+  computed: {
+    emojiDataValid() {
+      return !!this.emojiData;
+    },
+    emojiSrc() {
+      var _a;
+      if (!this.emojiDataValid) {
+        return "invalid";
+      }
+      if ((_a = this.emojiData) == null ? void 0 : _a.custom) {
+        return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;
+      }
+      if (["100", "200"].includes(this.size)) {
+        return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;
+      } else {
+        return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;
+      }
+    },
+    emojiAlt() {
+      if (!this.emojiDataValid) {
+        return void 0;
+      }
+      return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;
+    },
+    emojiLabel() {
+      if (!this.emojiDataValid) {
+        return "Invalid Emoji";
+      }
+      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;
+    },
+    emojiSize() {
+      return ICON_SIZE_MODIFIERS[this.size];
+    }
+  },
+  watch: {
+    code: {
+      handler: function() {
+        this.getEmojiData();
+      },
+      immediate: true
+    },
+    emojiSrc: {
+      handler: async function() {
+        this.imgLoading = true;
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    getEmojiData() {
+      this.emojiData = codeToEmojiData(this.code);
+    },
+    imageLoaded() {
+      this.imgLoading = false;
+    },
+    imageErrored() {
+      this.imgLoading = false;
+    }
+  }
+};
+const _hoisted_1 = ["aria-label", "alt", "title", "src"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_skeleton = resolveComponent("dt-skeleton");
+  return openBlock(), createElementBlock("span", {
+    class: normalizeClass(["d-emoji d-icon", $options.emojiSize])
+  }, [
+    withDirectives(createVNode(_component_dt_skeleton, {
+      offset: 0,
+      class: normalizeClass(["d-icon", $options.emojiSize]),
+      "shape-option": { shape: "circle", size: "100%" }
+    }, null, 8, ["class"]), [
+      [vShow, $data.imgLoading && $props.showSkeleton]
+    ]),
+    withDirectives(createElementVNode("img", {
+      ref: "emojiImg",
+      class: normalizeClass(["d-icon", $options.emojiSize, $props.imgClass]),
+      "aria-label": $options.emojiLabel,
+      alt: $options.emojiAlt,
+      title: $options.emojiLabel,
+      src: $options.emojiSrc,
+      onLoad: _cache[0] || (_cache[0] = (...args) => $options.imageLoaded && $options.imageLoaded(...args)),
+      onError: _cache[1] || (_cache[1] = (...args) => $options.imageErrored && $options.imageErrored(...args))
+    }, null, 42, _hoisted_1), [
+      [vShow, !$data.imgLoading]
+    ])
+  ], 2);
+}
+const DtEmoji = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DtEmoji as default
+};
+//# sourceMappingURL=emoji.vue.js.map

package/dist/components/emoji/emoji.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji.vue.js","sources":["../../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n  <span :class=\"['d-emoji d-icon', emojiSize]\">\n    <dt-skeleton\n      v-show=\"imgLoading && showSkeleton\"\n      :offset=\"0\"\n      :class=\"['d-icon', emojiSize]\"\n      :shape-option=\"{ shape: 'circle', size: '100%' }\"\n    />\n    <img\n      v-show=\"!imgLoading\"\n      ref=\"emojiImg\"\n      :class=\"['d-icon', emojiSize, imgClass]\"\n      :aria-label=\"emojiLabel\"\n      :alt=\"emojiAlt\"\n      :title=\"emojiLabel\"\n      :src=\"emojiSrc\"\n      @load=\"imageLoaded\"\n      @error=\"imageErrored\"\n    >\n  </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport {\n  codeToEmojiData,\n  stringToUnicode,\n  emojiImageUrlSmall,\n  emojiFileExtensionSmall,\n  emojiImageUrlLarge,\n  emojiFileExtensionLarge,\n  customEmojiAssetUrl,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n  name: 'DtEmoji',\n\n  components: {\n    DtSkeleton,\n  },\n\n  props: {\n    /**\n     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n     * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n     * for all supported shortcode/unicode or the docs for setting up custom emojis.\n     */\n    code: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The size of the emoji. Can be any of the icon size utility classes from\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n\n    /**\n     * Additional class name for the emoji img element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    imgClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n     * getEmojiData() function\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Shows a skeleton loader while the emoji asset is loading.\n     * @values true, false\n     */\n    showSkeleton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      emojiData: null,\n      imgLoading: false,\n    };\n  },\n\n  computed: {\n    emojiDataValid () {\n      return !!this.emojiData;\n    },\n\n    emojiSrc () {\n      if (!this.emojiDataValid) { return 'invalid'; }\n\n      // custom emoji\n      if (this.emojiData?.custom) {\n        return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;\n      }\n\n      if (['100', '200'].includes(this.size)) {\n        return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n      } else {\n        return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n      }\n    },\n\n    emojiAlt () {\n      if (!this.emojiDataValid) { return undefined; }\n      return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n    },\n\n    emojiLabel () {\n      if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n    },\n\n    emojiSize () {\n      return ICON_SIZE_MODIFIERS[this.size];\n    },\n  },\n\n  watch: {\n    code: {\n      handler: function () {\n        this.getEmojiData();\n      },\n\n      immediate: true,\n    },\n\n    emojiSrc: {\n      handler: async function () {\n        this.imgLoading = true;\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    getEmojiData () {\n      this.emojiData = codeToEmojiData(this.code);\n    },\n\n    imageLoaded () {\n      this.imgLoading = false;\n    },\n\n    imageErrored () {\n      this.imgLoading = false;\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_createVNode","_vShow","_createElementVNode","_normalizeClass"],"mappings":"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"}

package/dist/components/emoji_picker/composables/useKeyboardNavigation.cjs

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const emoji_picker_constants = require("../emoji_picker_constants.cjs");
+function useKeyboardNavigation() {
+  const emojiRefs = vue.ref([]);
+  const emojiFilteredRefs = vue.ref([]);
+  const isFiltering = vue.ref(false);
+  const hoverFirstEmoji = vue.ref(true);
+  function _handleArrowLeft(indexTab, indexEmoji) {
+    if (!focusEmoji(indexTab, indexEmoji - 1)) {
+      if (emojiRefs.value[indexTab - 1]) {
+        focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);
+      } else {
+        focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);
+      }
+    }
+  }
+  function _handleArrowRight(indexTab, indexEmoji) {
+    if (!focusEmoji(indexTab, indexEmoji + 1)) {
+      if (!focusEmoji(indexTab + 1, 0)) {
+        focusEmoji(0, 0);
+      }
+    }
+  }
+  function _handleArrowLeftFiltered(indexTab, indexEmoji) {
+    if (!focusEmoji(0, indexEmoji - 1)) {
+      focusEmoji(0, emojiFilteredRefs.value.length - 1);
+    }
+  }
+  function _handleArrowRightFiltered(indexTab, indexEmoji) {
+    if (!focusEmoji(0, indexEmoji + 1)) {
+      focusEmoji(0, 0);
+    }
+  }
+  function _handleHorizontalNavigation(direction, indexTab, indexEmoji) {
+    if (isFiltering.value) {
+      if (direction === "left") {
+        _handleArrowLeftFiltered(indexTab, indexEmoji);
+      } else if (direction === "right") {
+        _handleArrowRightFiltered(indexTab, indexEmoji);
+      }
+    } else {
+      if (direction === "left") {
+        _handleArrowLeft(indexTab, indexEmoji);
+      } else if (direction === "right") {
+        _handleArrowRight(indexTab, indexEmoji);
+      }
+    }
+  }
+  function focusEmoji(indexTab, indexEmoji) {
+    var _a, _b, _c;
+    const emojiRef = isFiltering.value ? (_a = emojiFilteredRefs.value) == null ? void 0 : _a[indexEmoji] : (_c = (_b = emojiRefs.value) == null ? void 0 : _b[indexTab]) == null ? void 0 : _c[indexEmoji];
+    if (emojiRef) {
+      emojiRef.focus();
+      return true;
+    }
+    return false;
+  }
+  function setEmojiRef(el, indexTab, indexEmoji) {
+    if (!emojiRefs.value[indexTab]) {
+      emojiRefs.value[indexTab] = [];
+    }
+    emojiRefs.value[indexTab][indexEmoji] = el;
+  }
+  function setFilteredRef(el, index) {
+    emojiFilteredRefs.value[index] = el;
+  }
+  function handleArrowNavigationFiltered(key, indexEmoji) {
+    var _a;
+    hoverFirstEmoji.value = false;
+    if (key === emoji_picker_constants.ARROW_KEYS.ARROW_UP) {
+      const position = indexEmoji % emoji_picker_constants.EMOJIS_PER_ROW;
+      if (!focusEmoji(0, indexEmoji - emoji_picker_constants.EMOJIS_PER_ROW)) {
+        const lastEmojiPosition = emojiFilteredRefs.value.length - emojiFilteredRefs.value.length % emoji_picker_constants.EMOJIS_PER_ROW + position;
+        focusEmoji(0, lastEmojiPosition);
+        if (!focusEmoji(0, lastEmojiPosition)) {
+          focusEmoji(0, emojiFilteredRefs.value.length - 1);
+        }
+      }
+    }
+    if (key === emoji_picker_constants.ARROW_KEYS.ARROW_DOWN) {
+      if (!focusEmoji(0, indexEmoji + emoji_picker_constants.EMOJIS_PER_ROW)) {
+        const position = indexEmoji % emoji_picker_constants.EMOJIS_PER_ROW;
+        if ((_a = emojiFilteredRefs.value) == null ? void 0 : _a[indexEmoji + (emoji_picker_constants.EMOJIS_PER_ROW - position)]) {
+          focusEmoji(0, emojiFilteredRefs.value.length - 1);
+        } else {
+          focusEmoji(0, position);
+        }
+      }
+    }
+    if (key === emoji_picker_constants.ARROW_KEYS.ARROW_LEFT) {
+      _handleHorizontalNavigation("left", 0, indexEmoji);
+    }
+    if (key === emoji_picker_constants.ARROW_KEYS.ARROW_RIGHT) {
+      _handleHorizontalNavigation("right", 0, indexEmoji);
+    }
+  }
+  function handleArrowNavigation(key, indexTab, indexEmoji) {
+    var _a, _b;
+    if (key === "ArrowUp") {
+      const position = indexEmoji % emoji_picker_constants.EMOJIS_PER_ROW;
+      if (indexTab === 0) {
+        const numberOfMissingEmojis = emoji_picker_constants.EMOJIS_PER_ROW - emojiRefs.value[emojiRefs.value.length - 1].length % emoji_picker_constants.EMOJIS_PER_ROW;
+        const emojiToJump = emojiRefs.value[emojiRefs.value.length - 1].length + numberOfMissingEmojis - (emoji_picker_constants.EMOJIS_PER_ROW - position);
+        if (!focusEmoji(emojiRefs.value.length - 1, emojiToJump)) {
+          focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);
+        }
+        return;
+      }
+      if (!focusEmoji(indexTab, indexEmoji - emoji_picker_constants.EMOJIS_PER_ROW)) {
+        const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;
+        const emojisInPreviousTab = emojiRefs.value[previousTab].length;
+        const lastEmojiPosition = emojisInPreviousTab - emojisInPreviousTab % emoji_picker_constants.EMOJIS_PER_ROW + position;
+        if (!focusEmoji(previousTab, lastEmojiPosition)) {
+          focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);
+        }
+      }
+    }
+    if (key === "ArrowDown") {
+      if (!focusEmoji(indexTab, indexEmoji + emoji_picker_constants.EMOJIS_PER_ROW)) {
+        const position = indexEmoji % emoji_picker_constants.EMOJIS_PER_ROW;
+        if ((_b = (_a = emojiRefs.value) == null ? void 0 : _a[indexTab]) == null ? void 0 : _b[indexEmoji + (emoji_picker_constants.EMOJIS_PER_ROW - position)]) {
+          focusEmoji(indexTab, emojiRefs.value[indexTab].length - 1);
+        } else {
+          if (!focusEmoji(indexTab + 1, position)) {
+            if (!focusEmoji(0, position)) {
+              focusEmoji(0, emojiRefs.value[0].length - 1);
+            }
+          }
+        }
+      }
+    }
+    if (key === "ArrowLeft") {
+      _handleHorizontalNavigation("left", indexTab, indexEmoji);
+    }
+    if (key === "ArrowRight") {
+      _handleHorizontalNavigation("right", indexTab, indexEmoji);
+    }
+  }
+  return {
+    emojiFilteredRefs,
+    isFiltering,
+    hoverFirstEmoji,
+    setEmojiRef,
+    setFilteredRef,
+    focusEmoji,
+    handleArrowNavigationFiltered,
+    handleArrowNavigation
+  };
+}
+exports.useKeyboardNavigation = useKeyboardNavigation;
+//# sourceMappingURL=useKeyboardNavigation.cjs.map

package/dist/components/emoji_picker/composables/useKeyboardNavigation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNavigation.cjs","sources":["../../../../components/emoji_picker/composables/useKeyboardNavigation.js"],"sourcesContent":["import { ref } from 'vue';\nimport { EMOJIS_PER_ROW, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport function useKeyboardNavigation () {\n  const emojiRefs = ref([]);\n  const emojiFilteredRefs = ref([]);\n  const isFiltering = ref(false);\n  const hoverFirstEmoji = ref(true);\n\n  function _handleArrowLeft (indexTab, indexEmoji) {\n    if (!focusEmoji(indexTab, indexEmoji - 1)) {\n      if (emojiRefs.value[indexTab - 1]) {\n        focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);\n      } else {\n        focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);\n      }\n    }\n  }\n\n  function _handleArrowRight (indexTab, indexEmoji) {\n    if (!focusEmoji(indexTab, indexEmoji + 1)) {\n      if (!focusEmoji(indexTab + 1, 0)) {\n        focusEmoji(0, 0);\n      }\n    }\n  }\n\n  function _handleArrowLeftFiltered (indexTab, indexEmoji) {\n    if (!focusEmoji(0, indexEmoji - 1)) {\n      focusEmoji(0, emojiFilteredRefs.value.length - 1);\n    }\n  }\n\n  function _handleArrowRightFiltered (indexTab, indexEmoji) {\n    if (!focusEmoji(0, indexEmoji + 1)) {\n      focusEmoji(0, 0);\n    }\n  }\n\n  function _handleHorizontalNavigation (direction, indexTab, indexEmoji) {\n    if (isFiltering.value) {\n      if (direction === 'left') {\n        _handleArrowLeftFiltered(indexTab, indexEmoji);\n      } else if (direction === 'right') {\n        _handleArrowRightFiltered(indexTab, indexEmoji);\n      }\n    } else {\n      if (direction === 'left') {\n        _handleArrowLeft(indexTab, indexEmoji);\n      } else if (direction === 'right') {\n        _handleArrowRight(indexTab, indexEmoji);\n      }\n    }\n  }\n\n  function focusEmoji (indexTab, indexEmoji) {\n    const emojiRef = isFiltering.value\n      ? emojiFilteredRefs.value?.[indexEmoji]\n      : emojiRefs.value?.[indexTab]?.[indexEmoji];\n\n    if (emojiRef) {\n      emojiRef.focus();\n      return true;\n    }\n\n    return false;\n  }\n\n  function setEmojiRef (el, indexTab, indexEmoji) {\n    if (!emojiRefs.value[indexTab]) {\n      emojiRefs.value[indexTab] = [];\n    }\n    emojiRefs.value[indexTab][indexEmoji] = el;\n  }\n\n  function setFilteredRef (el, index) {\n    emojiFilteredRefs.value[index] = el;\n  }\n\n  function handleArrowNavigationFiltered (key, indexEmoji) {\n    hoverFirstEmoji.value = false;\n\n    if (key === ARROW_KEYS.ARROW_UP) {\n      const position = indexEmoji % EMOJIS_PER_ROW;\n\n      if (!focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {\n        const lastEmojiPosition =\n        emojiFilteredRefs.value.length - (emojiFilteredRefs.value.length % EMOJIS_PER_ROW) + position;\n\n        focusEmoji(0, lastEmojiPosition);\n\n        if (!focusEmoji(0, lastEmojiPosition)) {\n          focusEmoji(0, emojiFilteredRefs.value.length - 1);\n        }\n      }\n    }\n\n    if (key === ARROW_KEYS.ARROW_DOWN) {\n      if (!focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {\n        const position = indexEmoji % EMOJIS_PER_ROW;\n\n        if (emojiFilteredRefs.value?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n          focusEmoji(0, emojiFilteredRefs.value.length - 1);\n        } else {\n          focusEmoji(0, position);\n        }\n      }\n    }\n\n    if (key === ARROW_KEYS.ARROW_LEFT) {\n      _handleHorizontalNavigation('left', 0, indexEmoji);\n    }\n\n    if (key === ARROW_KEYS.ARROW_RIGHT) {\n      _handleHorizontalNavigation('right', 0, indexEmoji);\n    }\n  }\n\n  function handleArrowNavigation (key, indexTab, indexEmoji) {\n    if (key === 'ArrowUp') {\n      const position = indexEmoji % EMOJIS_PER_ROW;\n\n      if (indexTab === 0) {\n      // we are on the first emoji tab, then we should jump to the last row of the last emoji tab\n        const numberOfMissingEmojis =\n        EMOJIS_PER_ROW - (emojiRefs.value[emojiRefs.value.length - 1].length % EMOJIS_PER_ROW);\n\n        const emojiToJump =\n        emojiRefs.value[emojiRefs.value.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);\n\n        if (!focusEmoji(emojiRefs.value.length - 1, emojiToJump)) {\n        // if there is no emoji in this position, jump to the last emoji of the row\n          focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);\n        }\n        return;\n      }\n\n      // if we are not on the first tab, we should jump to the previous row of the current tab\n      if (!focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {\n      // if there is no previous row, we should jump to emoji in the sampe position of the previous tab\n        const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;\n        const emojisInPreviousTab = emojiRefs.value[previousTab].length;\n        const lastEmojiPosition = emojisInPreviousTab - (emojisInPreviousTab % EMOJIS_PER_ROW) + position;\n\n        if (!focusEmoji(previousTab, lastEmojiPosition)) {\n        // if there is no emoji in this position, jump to the last emoji of the row\n          focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);\n        }\n      }\n    }\n\n    if (key === 'ArrowDown') {\n      if (!focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {\n      // if cannot go down\n\n        // Calculate position from cell 0 to cell 8\n        const position = indexEmoji % EMOJIS_PER_ROW;\n\n        // check if it exists a next row in the current tab\n        if (emojiRefs.value?.[indexTab]?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n        // if it exists, we should focus the last emoji of the next row in the current tab\n          focusEmoji(indexTab, emojiRefs.value[indexTab].length - 1);\n        // if we are at the end of the list it will do nothing\n        } else {\n        // We don't have next row, we are in the last of the tab, then jump\n        // to the next tab but in the equal emoji position in row 0.\n\n          if (!focusEmoji(indexTab + 1, position)) {\n          // We are on the bottom!, should jump to the same position emoji in the first row of the first tabset\n          // if it doesn't has, jump to the last\n            if (!focusEmoji(0, position)) {\n              focusEmoji(0, emojiRefs.value[0].length - 1);\n            }\n          }\n        }\n      }\n    }\n\n    if (key === 'ArrowLeft') {\n      _handleHorizontalNavigation('left', indexTab, indexEmoji);\n    }\n\n    if (key === 'ArrowRight') {\n      _handleHorizontalNavigation('right', indexTab, indexEmoji);\n    }\n  }\n\n  return {\n    emojiFilteredRefs,\n    isFiltering,\n    hoverFirstEmoji,\n    setEmojiRef,\n    setFilteredRef,\n    focusEmoji,\n    handleArrowNavigationFiltered,\n    handleArrowNavigation,\n  };\n}\n"],"names":["ref","ARROW_KEYS","EMOJIS_PER_ROW"],"mappings":"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"}