@dialpad/dialtone-vue 3.218.2 → 3.218.4

package/dist/lib/emoji/emoji.js

@@ -1,141 +1,120 @@
-import { codeToEmojiData as c, stringToUnicode as u, emojiImageUrlSmall as j, emojiFileExtensionSmall as g, emojiImageUrlLarge as h, emojiFileExtensionLarge as f } from "../../common/emoji/index.js";
-import { resolveComponent as D, openBlock as S, createElementBlock as L, normalizeClass as o, withDirectives as n, createVNode as E, vShow as l, createElementVNode as p } from "vue";
-import { _ } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import b from "../skeleton/skeleton.js";
+import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { codeToEmojiData as t, emojiFileExtensionLarge as n, emojiFileExtensionSmall as r, emojiImageUrlLarge as i, emojiImageUrlSmall as a, stringToUnicode as o } from "../../common/emoji/index.js";
 import { ICON_SIZE_MODIFIERS as s } from "../icon/icon-constants.js";
-const k = {
-  compatConfig: { MODE: 3 },
-  name: "DtEmoji",
-  components: {
-    DtSkeleton: b
-  },
-  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: !0
-    },
-    /**
-     * 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: (i) => Object.keys(s).includes(i)
-    },
-    /**
-     * 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: !0
-    }
-  },
-  data() {
-    return {
-      emojiData: null,
-      imgLoading: !1
-    };
-  },
-  computed: {
-    emojiDataValid() {
-      return !!this.emojiData;
-    },
-    emojiSrc() {
-      var i;
-      return this.emojiDataValid ? (i = this.emojiData) != null && i.custom ? this.emojiData.image : ["100", "200"].includes(this.size) ? j + this.emojiData.key + g : h + this.emojiData.key + f : "invalid";
-    },
-    emojiAlt() {
-      if (this.emojiDataValid)
-        return this.emojiData.unicode_output ? u(this.emojiData.unicode_output) : this.emojiData.name;
-    },
-    emojiLabel() {
-      return this.emojiDataValid ? this.ariaLabel ? this.ariaLabel : this.emojiData.name : "Invalid Emoji";
-    },
-    emojiSize() {
-      return s[this.size];
-    }
-  },
-  watch: {
-    code: {
-      handler: function() {
-        this.getEmojiData();
-      },
-      immediate: !0
-    },
-    emojiSrc: {
-      handler: async function() {
-        this.imgLoading = !0;
-      },
-      immediate: !0
-    }
-  },
-  methods: {
-    getEmojiData() {
-      this.emojiData = c(this.code);
-    },
-    imageLoaded() {
-      this.imgLoading = !1;
-    },
-    imageErrored() {
-      this.imgLoading = !1;
-    }
-  }
-}, y = ["aria-label", "alt", "title", "src"];
-function z(i, t, r, I, m, e) {
-  const d = D("dt-skeleton");
-  return S(), L("span", {
-    class: o(["d-emoji d-icon", e.emojiSize])
-  }, [
-    n(E(d, {
-      offset: 0,
-      class: o(["d-icon", e.emojiSize]),
-      "shape-option": { shape: "circle", size: "100%" }
-    }, null, 8, ["class"]), [
-      [l, m.imgLoading && r.showSkeleton]
-    ]),
-    n(p("img", {
-      ref: "emojiImg",
-      class: o(["d-icon", e.emojiSize, r.imgClass]),
-      "aria-label": e.emojiLabel,
-      alt: e.emojiAlt,
-      title: e.emojiLabel,
-      src: e.emojiSrc,
-      onLoad: t[0] || (t[0] = (...a) => e.imageLoaded && e.imageLoaded(...a)),
-      onError: t[1] || (t[1] = (...a) => e.imageErrored && e.imageErrored(...a))
-    }, null, 42, y), [
-      [l, !m.imgLoading]
-    ])
-  ], 2);
+import c from "../skeleton/skeleton.js";
+import { createElementBlock as l, createElementVNode as u, createVNode as d, normalizeClass as f, openBlock as p, resolveComponent as m, vShow as h, withDirectives as g } from "vue";
+//#region components/emoji/emoji.vue
+var _ = {
+	compatConfig: { MODE: 3 },
+	name: "DtEmoji",
+	components: { DtSkeleton: c },
+	props: {
+		code: {
+			type: String,
+			required: !0
+		},
+		size: {
+			type: String,
+			default: "500",
+			validator: (e) => Object.keys(s).includes(e)
+		},
+		imgClass: {
+			type: [
+				String,
+				Object,
+				Array
+			],
+			default: ""
+		},
+		ariaLabel: {
+			type: String,
+			default: null
+		},
+		showSkeleton: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	data() {
+		return {
+			emojiData: null,
+			imgLoading: !1
+		};
+	},
+	computed: {
+		emojiDataValid() {
+			return !!this.emojiData;
+		},
+		emojiSrc() {
+			return this.emojiDataValid ? this.emojiData?.custom ? this.emojiData.image : ["100", "200"].includes(this.size) ? a + this.emojiData.key + r : i + this.emojiData.key + n : "invalid";
+		},
+		emojiAlt() {
+			if (this.emojiDataValid) return this.emojiData.unicode_output ? o(this.emojiData.unicode_output) : this.emojiData.name;
+		},
+		emojiLabel() {
+			return this.emojiDataValid ? this.ariaLabel ? this.ariaLabel : this.emojiData.name : "Invalid Emoji";
+		},
+		emojiSize() {
+			return s[this.size];
+		}
+	},
+	watch: {
+		code: {
+			handler: function() {
+				this.getEmojiData();
+			},
+			immediate: !0
+		},
+		emojiSrc: {
+			handler: async function() {
+				this.imgLoading = !0;
+			},
+			immediate: !0
+		}
+	},
+	methods: {
+		getEmojiData() {
+			this.emojiData = t(this.code);
+		},
+		imageLoaded() {
+			this.imgLoading = !1;
+		},
+		imageErrored() {
+			this.imgLoading = !1;
+		}
+	}
+}, v = [
+	"aria-label",
+	"alt",
+	"title",
+	"src"
+];
+function y(e, t, n, r, i, a) {
+	let o = m("dt-skeleton");
+	return p(), l("span", { class: f(["d-emoji d-icon", a.emojiSize]) }, [g(d(o, {
+		offset: 0,
+		class: f(["d-icon", a.emojiSize]),
+		"shape-option": {
+			shape: "circle",
+			size: "100%"
+		}
+	}, null, 8, ["class"]), [[h, i.imgLoading && n.showSkeleton]]), g(u("img", {
+		ref: "emojiImg",
+		class: f([
+			"d-icon",
+			a.emojiSize,
+			n.imgClass
+		]),
+		"aria-label": a.emojiLabel,
+		alt: a.emojiAlt,
+		title: a.emojiLabel,
+		src: a.emojiSrc,
+		onLoad: t[0] || (t[0] = (...e) => a.imageLoaded && a.imageLoaded(...e)),
+		onError: t[1] || (t[1] = (...e) => a.imageErrored && a.imageErrored(...e))
+	}, null, 42, v), [[h, !i.imgLoading]])], 2);
 }
-const O = /* @__PURE__ */ _(k, [["render", z]]);
-export {
-  O as default
-};
-//# sourceMappingURL=emoji.js.map
+var b = /* @__PURE__ */ e(_, [["render", y]]);
+//#endregion
+export { b as default };
+
+//# sourceMappingURL=emoji.js.map

package/dist/lib/emoji/emoji.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.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} 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  compatConfig: { MODE: 3 },\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 this.emojiData.image;\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":["_sfc_main","DtSkeleton","t","ICON_SIZE_MODIFIERS","_a","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","stringToUnicode","codeToEmojiData","_createElementBlock","$options","_createVNode","_component_dt_skeleton","_vShow","$data","$props","_createElementVNode","_normalizeClass","args"],"mappings":";;;;;AAsCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,YAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA;;;;;;IAQZ,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACC,MAAM,OAAO,KAAKC,CAAmB,EAAE,SAASD,CAAC;AAAA;;;;;;IAQ/D,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,SAAS;AAAA;;;;;;;IASX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,WAAW;AAAA,MACX,YAAY;AAAA;EAEhB;AAAA,EAEA,UAAU;AAAA,IACR,iBAAkB;AAChB,aAAO,CAAC,CAAC,KAAK;AAAA,IAChB;AAAA,IAEA,WAAY;;AACV,aAAK,KAAK,kBAGNE,IAAA,KAAK,cAAL,QAAAA,EAAgB,SACX,KAAK,UAAU,QAGpB,CAAC,OAAO,KAAK,EAAE,SAAS,KAAK,IAAI,IAC5BC,IAAqB,KAAK,UAAU,MAAMC,IAE1CC,IAAqB,KAAK,UAAU,MAAMC,IAVhB;AAAA,IAYrC;AAAA,IAEA,WAAY;AACV,UAAK,KAAK;AACV,eAAO,KAAK,UAAU,iBAAiBC,EAAgB,KAAK,UAAU,cAAc,IAAI,KAAK,UAAU;AAAA,IACzG;AAAA,IAEA,aAAc;AACZ,aAAK,KAAK,iBACH,KAAK,YAAY,KAAK,YAAY,KAAK,UAAU,OADrB;AAAA,IAErC;AAAA,IAEA,YAAa;AACX,aAAON,EAAoB,KAAK,IAAI;AAAA,IACtC;AAAA;EAGF,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,SAAS,WAAY;AACnB,aAAK,aAAY;AAAA,MACnB;AAAA,MAEA,WAAW;AAAA;IAGb,UAAU;AAAA,MACR,SAAS,iBAAkB;AACzB,aAAK,aAAa;AAAA,MACpB;AAAA,MAEA,WAAW;AAAA;;EAIf,SAAS;AAAA,IACP,eAAgB;AACd,WAAK,YAAYO,EAAgB,KAAK,IAAI;AAAA,IAC5C;AAAA,IAEA,cAAe;AACb,WAAK,aAAa;AAAA,IACpB;AAAA,IAEA,eAAgB;AACd,WAAK,aAAa;AAAA,IACpB;AAAA;AAEJ;;;cA3KEC,EAkBO,QAAA;AAAA,IAlBA,4BAA0BC,EAAA,SAAS,CAAA;AAAA;MACxCC,EAKEC,GAAA;AAAA,MAHC,QAAQ;AAAA,MACR,oBAAkBF,EAAA,SAAS,CAAA;AAAA,MAC3B,gBAAc,EAAA,OAAA,UAAA,MAAA,OAAA;AAAA;MAHP,CAAAG,GAAAC,EAAA,cAAcC,EAAA,YAAY;AAAA;MAKpCC,EAUC,OAAA;AAAA,MARC,KAAI;AAAA,MACH,OAAKC,EAAA,CAAA,UAAaP,EAAA,WAAWK,EAAA,QAAQ,CAAA;AAAA,MACrC,cAAYL,EAAA;AAAA,MACZ,KAAKA,EAAA;AAAA,MACL,OAAOA,EAAA;AAAA,MACP,KAAKA,EAAA;AAAA,MACL,kCAAMA,EAAA,eAAAA,EAAA,YAAA,GAAAQ,CAAA;AAAA,MACN,mCAAOR,EAAA,gBAAAA,EAAA,aAAA,GAAAQ,CAAA;AAAA;WARCJ,EAAA,UAAU;AAAA;;;;"}
+{"version":3,"file":"emoji.js","names":[],"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} 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  compatConfig: { MODE: 3 },\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 this.emojiData.image;\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"],"mappings":";;;;;;AAsCA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY,EACV,YAAA,GACD;CAED,OAAO;EAML,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EAOD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAoB,CAAC,SAAS,EAAE;GAC/D;EAOD,UAAU;GACR,MAAM;IAAC;IAAQ;IAAQ;IAAM;GAC7B,SAAS;GACV;EAQD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL,WAAW;GACX,YAAY;GACb;;CAGH,UAAU;EACR,iBAAkB;AAChB,UAAO,CAAC,CAAC,KAAK;;EAGhB,WAAY;AAWR,UAVG,KAAK,iBAGN,KAAK,WAAW,SACX,KAAK,UAAU,QAGpB,CAAC,OAAO,MAAM,CAAC,SAAS,KAAK,KAAK,GAC7B,IAAqB,KAAK,UAAU,MAAM,IAE1C,IAAqB,KAAK,UAAU,MAAM,IAVhB;;EAcrC,WAAY;AACL,YAAK,eACV,QAAO,KAAK,UAAU,iBAAiB,EAAgB,KAAK,UAAU,eAAc,GAAI,KAAK,UAAU;;EAGzG,aAAc;AAEZ,UADK,KAAK,iBACH,KAAK,YAAY,KAAK,YAAY,KAAK,UAAU,OADrB;;EAIrC,YAAa;AACX,UAAO,EAAoB,KAAK;;EAEnC;CAED,OAAO;EACL,MAAM;GACJ,SAAS,WAAY;AACnB,SAAK,cAAc;;GAGrB,WAAW;GACZ;EAED,UAAU;GACR,SAAS,iBAAkB;AACzB,SAAK,aAAa;;GAGpB,WAAW;GACZ;EACF;CAED,SAAS;EACP,eAAgB;AACd,QAAK,YAAY,EAAgB,KAAK,KAAK;;EAG7C,cAAe;AACb,QAAK,aAAa;;EAGpB,eAAgB;AACd,QAAK,aAAa;;EAErB;CACF;;;;;;;;aA3KC,EAkBO,QAAA,EAlBA,OAAK,EAAA,CAAA,kBAAqB,EAAA,UAAS,CAAA,EAAA,EAAA,CAAA,EACxC,EAKE,GAAA;EAHC,QAAQ;EACR,OAAK,EAAA,CAAA,UAAa,EAAA,UAAS,CAAA;EAC3B,gBAAc;GAAA,OAAA;GAAA,MAAA;GAAiC;8BAHxC,EAAA,cAAc,EAAA,aAAY,CAAA,CAAA,EAAA,EAKpC,EAUC,OAAA;EARC,KAAI;EACH,OAAK,EAAA;GAAA;GAAa,EAAA;GAAW,EAAA;GAAQ,CAAA;EACrC,cAAY,EAAA;EACZ,KAAK,EAAA;EACL,OAAO,EAAA;EACP,KAAK,EAAA;EACL,QAAI,EAAA,OAAA,EAAA,MAAA,GAAA,MAAE,EAAA,eAAA,EAAA,YAAA,GAAA,EAAW;EACjB,SAAK,EAAA,OAAA,EAAA,MAAA,GAAA,MAAE,EAAA,gBAAA,EAAA,aAAA,GAAA,EAAY;wBARX,EAAA,WAAU,CAAA,CAAA,CAAA,EAAA,EAAA"}

package/dist/lib/emoji/index.cjs

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./emoji.cjs");exports.DtEmoji=e.default;
-//# sourceMappingURL=index.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./emoji.cjs`);exports.DtEmoji=e.default;

package/dist/lib/emoji/index.js

@@ -1,5 +1,2 @@
-import { default as a } from "./emoji.js";
-export {
-  a as DtEmoji
-};
-//# sourceMappingURL=index.js.map
+import e from "./emoji.js";
+export { e as DtEmoji };

package/dist/lib/emoji-picker/emoji-picker-constants.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _={ARROW_UP:"ArrowUp",ARROW_DOWN:"ArrowDown",ARROW_LEFT:"ArrowLeft",ARROW_RIGHT:"ArrowRight"},t="https://static.dialpadcdn.com/joypixels/png/unicode/32/",e=9,R={DEFAULT:"Default",LIGHT:"Light",MEDIUM_LIGHT:"MediumLight",MEDIUM:"Medium",MEDIUM_DARK:"MediumDark",DARK:"Dark"},o={EMOJI_PICKER_SKIN_TONE_MODIFIERS:R};exports.ARROW_KEYS=_;exports.CDN_URL=t;exports.EMOJIS_PER_ROW=e;exports.EMOJI_PICKER_SKIN_TONE_MODIFIERS=R;exports.default=o;
-//# sourceMappingURL=emoji-picker-constants.cjs.map
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={ARROW_UP:`ArrowUp`,ARROW_DOWN:`ArrowDown`,ARROW_LEFT:`ArrowLeft`,ARROW_RIGHT:`ArrowRight`},t=`https://static.dialpadcdn.com/joypixels/png/unicode/32/`,n=9,r={DEFAULT:`Default`,LIGHT:`Light`,MEDIUM_LIGHT:`MediumLight`,MEDIUM:`Medium`,MEDIUM_DARK:`MediumDark`,DARK:`Dark`},i={EMOJI_PICKER_SKIN_TONE_MODIFIERS:r};exports.ARROW_KEYS=e,exports.CDN_URL=t,exports.EMOJIS_PER_ROW=n,exports.EMOJI_PICKER_SKIN_TONE_MODIFIERS=r,exports.default=i;
+//# sourceMappingURL=emoji-picker-constants.cjs.map

package/dist/lib/emoji-picker/emoji-picker-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji-picker-constants.cjs","sources":["../../../components/emoji_picker/emoji_picker_constants.js"],"sourcesContent":["export const ARROW_KEYS = {\n  ARROW_UP: 'ArrowUp',\n  ARROW_DOWN: 'ArrowDown',\n  ARROW_LEFT: 'ArrowLeft',\n  ARROW_RIGHT: 'ArrowRight',\n};\n\nexport const CDN_URL = 'https://static.dialpadcdn.com/joypixels/png/unicode/32/';\nexport const EMOJIS_PER_ROW = 9;\nexport const EMOJI_PICKER_SKIN_TONE_MODIFIERS = {\n  DEFAULT: 'Default',\n  LIGHT: 'Light',\n  MEDIUM_LIGHT: 'MediumLight',\n  MEDIUM: 'Medium',\n  MEDIUM_DARK: 'MediumDark',\n  DARK: 'Dark',\n};\n\nexport default {\n  EMOJI_PICKER_SKIN_TONE_MODIFIERS,\n};\n"],"names":["ARROW_KEYS","CDN_URL","EMOJIS_PER_ROW","EMOJI_PICKER_SKIN_TONE_MODIFIERS","emoji_picker_constants"],"mappings":"4GAAY,MAACA,EAAa,CACxB,SAAU,UACV,WAAY,YACZ,WAAY,YACZ,YAAa,YACf,EAEaC,EAAU,0DACVC,EAAiB,EACjBC,EAAmC,CAC9C,QAAS,UACT,MAAO,QACP,aAAc,cACd,OAAQ,SACR,YAAa,aACb,KAAM,MACR,EAEAC,EAAe,CACb,iCAAAD,CACF"}
+{"version":3,"file":"emoji-picker-constants.cjs","names":[],"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 default {\n  EMOJI_PICKER_SKIN_TONE_MODIFIERS,\n};\n"],"mappings":"+FAAA,IAAa,EAAa,CACxB,SAAU,UACV,WAAY,YACZ,WAAY,YACZ,YAAa,aACd,CAEY,EAAU,0DACV,EAAiB,EACjB,EAAmC,CAC9C,QAAS,UACT,MAAO,QACP,aAAc,cACd,OAAQ,SACR,YAAa,aACb,KAAM,OACP,CAED,EAAe,CACb,mCACD"}

package/dist/lib/emoji-picker/emoji-picker-constants.js

@@ -1,23 +1,18 @@
-const t = {
-  ARROW_UP: "ArrowUp",
-  ARROW_DOWN: "ArrowDown",
-  ARROW_LEFT: "ArrowLeft",
-  ARROW_RIGHT: "ArrowRight"
-}, o = "https://static.dialpadcdn.com/joypixels/png/unicode/32/", _ = 9, R = {
-  DEFAULT: "Default",
-  LIGHT: "Light",
-  MEDIUM_LIGHT: "MediumLight",
-  MEDIUM: "Medium",
-  MEDIUM_DARK: "MediumDark",
-  DARK: "Dark"
-}, D = {
-  EMOJI_PICKER_SKIN_TONE_MODIFIERS: R
-};
-export {
-  t as ARROW_KEYS,
-  o as CDN_URL,
-  _ as EMOJIS_PER_ROW,
-  R as EMOJI_PICKER_SKIN_TONE_MODIFIERS,
-  D as default
-};
-//# sourceMappingURL=emoji-picker-constants.js.map
+//#region components/emoji_picker/emoji_picker_constants.js
+var e = {
+	ARROW_UP: "ArrowUp",
+	ARROW_DOWN: "ArrowDown",
+	ARROW_LEFT: "ArrowLeft",
+	ARROW_RIGHT: "ArrowRight"
+}, t = "https://static.dialpadcdn.com/joypixels/png/unicode/32/", n = 9, r = {
+	DEFAULT: "Default",
+	LIGHT: "Light",
+	MEDIUM_LIGHT: "MediumLight",
+	MEDIUM: "Medium",
+	MEDIUM_DARK: "MediumDark",
+	DARK: "Dark"
+}, i = { EMOJI_PICKER_SKIN_TONE_MODIFIERS: r };
+//#endregion
+export { e as ARROW_KEYS, t as CDN_URL, n as EMOJIS_PER_ROW, r as EMOJI_PICKER_SKIN_TONE_MODIFIERS, i as default };
+
+//# sourceMappingURL=emoji-picker-constants.js.map

package/dist/lib/emoji-picker/emoji-picker-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji-picker-constants.js","sources":["../../../components/emoji_picker/emoji_picker_constants.js"],"sourcesContent":["export const ARROW_KEYS = {\n  ARROW_UP: 'ArrowUp',\n  ARROW_DOWN: 'ArrowDown',\n  ARROW_LEFT: 'ArrowLeft',\n  ARROW_RIGHT: 'ArrowRight',\n};\n\nexport const CDN_URL = 'https://static.dialpadcdn.com/joypixels/png/unicode/32/';\nexport const EMOJIS_PER_ROW = 9;\nexport const EMOJI_PICKER_SKIN_TONE_MODIFIERS = {\n  DEFAULT: 'Default',\n  LIGHT: 'Light',\n  MEDIUM_LIGHT: 'MediumLight',\n  MEDIUM: 'Medium',\n  MEDIUM_DARK: 'MediumDark',\n  DARK: 'Dark',\n};\n\nexport default {\n  EMOJI_PICKER_SKIN_TONE_MODIFIERS,\n};\n"],"names":["ARROW_KEYS","CDN_URL","EMOJIS_PER_ROW","EMOJI_PICKER_SKIN_TONE_MODIFIERS","emoji_picker_constants"],"mappings":"AAAY,MAACA,IAAa;AAAA,EACxB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AACf,GAEaC,IAAU,2DACVC,IAAiB,GACjBC,IAAmC;AAAA,EAC9C,SAAS;AAAA,EACT,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,MAAM;AACR,GAEAC,IAAe;AAAA,EACb,kCAAAD;AACF;"}
+{"version":3,"file":"emoji-picker-constants.js","names":[],"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 default {\n  EMOJI_PICKER_SKIN_TONE_MODIFIERS,\n};\n"],"mappings":";AAAA,IAAa,IAAa;CACxB,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,aAAa;CACd,EAEY,IAAU,2DACV,IAAiB,GACjB,IAAmC;CAC9C,SAAS;CACT,OAAO;CACP,cAAc;CACd,QAAQ;CACR,aAAa;CACb,MAAM;CACP,EAED,IAAe,EACb,qCACD"}

package/dist/lib/emoji-picker/emoji-picker.cjs

@@ -1,2 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("@dialpad/dialtone-icons/vue3"),x=require("../input/input.cjs"),J=require("../button/button.cjs"),ee=require("../../common/utils/index.cjs"),te=require("../tab/tab-group.cjs"),oe=require("../tab/tab.cjs"),O=require("@dialpad/dialtone-emojis"),E=require("./emoji-picker-constants.cjs"),le=require("../tooltip/tooltip.cjs"),ne=require("../../localization/index.cjs"),se={class:"d-emoji-picker__search d-emoji-picker__alignment"},ie={__name:"emoji_search",props:{searchPlaceholderLabel:{type:String,required:!0},modelValue:{type:String,default:""}},emits:["update:modelValue","focus-emoji-selector","focus-tabset","select-first-emoji"],setup(o,{expose:S,emit:I}){const n=I,d=e.ref(null);function j(){n("update:modelValue",""),R()}function R(){d.value.focus()}return e.onMounted(()=>{R()}),S({focusSearchInput:R}),(y,_)=>(e.openBlock(),e.createElementBlock("div",se,[e.createVNode(e.unref(x.default),{id:"searchInput",ref_key:"searchInput",ref:d,placeholder:o.searchPlaceholderLabel,"model-value":o.modelValue,"onUpdate:modelValue":_[0]||(_[0]=a=>y.$emit("update:modelValue",a)),onKeydown:[_[1]||(_[1]=e.withKeys(a=>y.$emit("focus-tabset"),["up"])),_[2]||(_[2]=e.withKeys(e.withModifiers(a=>y.$emit("focus-emoji-selector"),["prevent"]),["down"])),_[3]||(_[3]=e.withKeys(a=>y.$emit("select-first-emoji"),["enter"]))]},e.createSlots({leftIcon:e.withCtx(()=>[e.createVNode(e.unref(w.DtIconSearch),{size:"200"})]),_:2},[o.modelValue.length>0?{name:"rightIcon",fn:e.withCtx(()=>[e.createVNode(e.unref(J.default),{importance:"clear",size:"xs",class:"d-emoji-picker__search-x-button",circle:"",kind:"muted",onClick:j},{icon:e.withCtx(()=>[e.createVNode(e.unref(w.DtIconClose),{size:"200"})]),_:1})]),key:"0"}:void 0]),1032,["placeholder","model-value"])]))}},re={class:"d-emoji-picker__tabset"},ae={__name:"emoji_tabset",props:{showRecentlyUsedTab:{type:Boolean,default:!1},showCustomEmojisTab:{type:Boolean,default:!1},scrollIntoTab:{type:Number,required:!0},emojiFilter:{type:String,default:""},tabSetLabels:{type:Array,required:!0}},emits:["selected-tabset","focus-search-input","focus-skin-selector"],setup(o,{expose:S,emit:I}){const n=o,d=I,j=[{label:n.tabSetLabels[0],icon:w.DtIconClock},{label:n.tabSetLabels[1],icon:w.DtIconSatisfied},{label:n.tabSetLabels[2],icon:w.DtIconLivingThing},{label:n.tabSetLabels[3],icon:w.DtIconFood},{label:n.tabSetLabels[4],icon:w.DtIconObject},{label:n.tabSetLabels[5],icon:w.DtIconTransportation},{label:n.tabSetLabels[6],icon:w.DtIconLightbulb},{label:n.tabSetLabels[7],icon:w.DtIconHeart},{label:n.tabSetLabels[8],icon:w.DtIconFlag},{label:n.tabSetLabels[9],icon:w.DtIconDialpadStar}],R=e.computed(()=>{const l=n.showRecentlyUsedTab?j:j.slice(1);return n.showCustomEmojisTab||l.pop(),l.map((t,i)=>({...t,id:(i+1).toString(),panelId:(i+1).toString()}))}),y=e.computed(()=>n.emojiFilter.length>0),_=e.ref("1"),a=e.ref([]);e.watch(()=>n.scrollIntoTab,()=>{y.value||(_.value=(n.scrollIntoTab+1).toString())}),e.watch(y,()=>{y.value&&(_.value=null)});function m(l){const t=parseInt(l);_.value=l,d("selected-tabset",t)}function A(l){a.value.push(ee.returnFirstEl(l.$el))}function B(){a.value[0].focus()}function L(l,t){l.key==="Enter"&&(m(t),a.value[t-1].blur()),l.key==="Tab"&&(l.preventDefault(),l.shiftKey?d("focus-skin-selector"):d("focus-search-input")),l.key==="ArrowDown"&&d("focus-search-input")}return S({focusTabset:B}),(l,t)=>(e.openBlock(),e.createElementBlock("div",re,[e.createVNode(e.unref(te.default),{selected:_.value,size:"sm","tab-list-class":"d-emoji-picker__tabset-list"},{tabs:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(R.value,(i,v)=>(e.openBlock(),e.createBlock(e.unref(oe.default),{id:i.id,key:i.id,ref_for:!0,ref:f=>{f&&A(f)},label:i.label,"panel-id":i.panelId,tabindex:v+1,"aria-controls":"d-emoji-picker-list",onKeydown:f=>L(f,i.id),onClickCapture:e.withModifiers(f=>m(i.id),["stop"])},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.icon),{size:"400"}))]),_:2},1032,["id","label","panel-id","tabindex","onKeydown","onClickCapture"]))),128))]),_:1},8,["selected"])]))}};function ce(){const o=e.ref([]),S=e.ref([]),I=e.ref(!1),n=e.ref(!0);function d(l,t){a(l,t-1)||(o.value[l-1]?a(l-1,o.value[l-1].length-1):a(o.value.length-1,o.value[o.value.length-1].length-1))}function j(l,t){a(l,t+1)||a(l+1,0)||a(0,0)}function R(l,t){a(0,t-1)||a(0,S.value.length-1)}function y(l,t){a(0,t+1)||a(0,0)}function _(l,t,i){I.value?l==="left"?R(t,i):l==="right"&&y(t,i):l==="left"?d(t,i):l==="right"&&j(t,i)}function a(l,t){var v,f,g;const i=I.value?(v=S.value)==null?void 0:v[t]:(g=(f=o.value)==null?void 0:f[l])==null?void 0:g[t];return i?(i.focus(),!0):!1}function m(l,t,i){o.value[t]||(o.value[t]=[]),o.value[t][i]=l}function A(l,t){S.value[t]=l}function B(l,t){var i;if(n.value=!1,l===E.ARROW_KEYS.ARROW_UP){const v=t%E.EMOJIS_PER_ROW;if(!a(0,t-E.EMOJIS_PER_ROW)){const f=S.value.length-S.value.length%E.EMOJIS_PER_ROW+v;a(0,f),a(0,f)||a(0,S.value.length-1)}}if(l===E.ARROW_KEYS.ARROW_DOWN&&!a(0,t+E.EMOJIS_PER_ROW)){const v=t%E.EMOJIS_PER_ROW;(i=S.value)!=null&&i[t+(E.EMOJIS_PER_ROW-v)]?a(0,S.value.length-1):a(0,v)}l===E.ARROW_KEYS.ARROW_LEFT&&_("left",0,t),l===E.ARROW_KEYS.ARROW_RIGHT&&_("right",0,t)}function L(l,t,i){var v,f;if(l==="ArrowUp"){const g=i%E.EMOJIS_PER_ROW;if(t===0){const c=E.EMOJIS_PER_ROW-o.value[o.value.length-1].length%E.EMOJIS_PER_ROW,r=o.value[o.value.length-1].length+c-(E.EMOJIS_PER_ROW-g);a(o.value.length-1,r)||a(o.value.length-1,o.value[o.value.length-1].length-1);return}if(!a(t,i-E.EMOJIS_PER_ROW)){const c=t-1<0?0:t-1,r=o.value[c].length,k=r-r%E.EMOJIS_PER_ROW+g;a(c,k)||a(t-1,o.value[t-1].length-1)}}if(l==="ArrowDown"&&!a(t,i+E.EMOJIS_PER_ROW)){const g=i%E.EMOJIS_PER_ROW;(f=(v=o.value)==null?void 0:v[t])!=null&&f[i+(E.EMOJIS_PER_ROW-g)]?a(t,o.value[t].length-1):a(t+1,g)||a(0,g)||a(0,o.value[0].length-1)}l==="ArrowLeft"&&_("left",t,i),l==="ArrowRight"&&_("right",t,i)}return{emojiFilteredRefs:S,isFiltering:I,hoverFirstEmoji:n,setEmojiRef:m,setFilteredRef:A,focusEmoji:a,handleArrowNavigationFiltered:B,handleArrowNavigation:L}}const ue={class:"d-emoji-picker__selector"},fe={key:0,class:"d-emoji-picker__search-label d-emoji-picker__alignment"},de={key:0},me={class:"d-emoji-picker__tab"},Ee=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],_e=["alt","aria-label","title","src"],ve={key:2,class:"d-emoji-picker__alignment"},be={class:"d-emoji-picker__tab","data-qa":"filtered-emojis"},pe=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],he=["alt","aria-label","title","src"],ke={__name:"emoji_selector",props:{emojiFilter:{type:String,default:""},skinTone:{type:String,required:!0},tabsetLabels:{type:Array,required:!0},selectedTabset:{type:Object,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},recentlyUsedEmojis:{type:Array,default:()=>[]},customEmojis:{type:Array,default:()=>[]}},emits:["highlighted-emoji","selected-emoji","scroll-into-tab","scroll-bottom-reached","focus-skin-selector","focus-search-input"],setup(o,{expose:S,emit:I}){const n=o,d=I,{emojiFilteredRefs:j,isFiltering:R,hoverFirstEmoji:y,setEmojiRef:_,setFilteredRef:a,focusEmoji:m,handleArrowNavigationFiltered:A,handleArrowNavigation:B}=ce(),L=e.ref(null),l=e.ref(null),t=e.ref(null),i=["Recently used","People","Nature","Food","Activity","Travel","Objects","Symbols","Flags","Custom"],v=e.computed(()=>{let s=n.tabsetLabels.map(u=>({label:u,ref:e.ref(null)}));return n.recentlyUsedEmojis&&!n.recentlyUsedEmojis.length&&(s=n.tabsetLabels.slice(1).map(u=>({label:u,ref:e.ref(null)}))),n.customEmojis&&!n.customEmojis.length&&s.pop(),s}),f=e.ref(v.value[0].label),g=e.computed(()=>{const s=n.recentlyUsedEmojis.length?i.slice():i.slice(1);return n.customEmojis&&!n.customEmojis.length&&s.pop(),s}),c=e.ref([]),r=e.computed(()=>[...O.emojisGrouped[`People${n.skinTone}`],...O.emojisGrouped.Nature,...O.emojisGrouped.Food,...O.emojisGrouped[`Activity${n.skinTone}`],...O.emojisGrouped.Travel,...O.emojisGrouped[`Objects${n.skinTone}`],...O.emojisGrouped.Symbols,...O.emojisGrouped.Flags]),k=U(()=>{j.value=[],F()}),M=()=>{const s=l.value;s.scrollTop+s.clientHeight>=s.scrollHeight&&d("scroll-bottom-reached")};e.watch(r,()=>{F()},{immediate:!0}),e.watch(()=>n.recentlyUsedEmojis,()=>{O.emojisGrouped["Recently used"]=n.recentlyUsedEmojis},{immediate:!0}),e.watch(()=>n.customEmojis,()=>{O.emojisGrouped.Custom=n.customEmojis},{immediate:!0}),e.watch(()=>n.emojiFilter,()=>{G(),n.emojiFilter?R.value=!0:(R.value=!1,C(null)),k()}),e.watch(()=>n.selectedTabset,s=>{$(s.tabId)},{deep:!0});function K(s,u=!1){y.value=u,d("highlighted-emoji",s)}function F(){const s=n.emojiFilter.toLowerCase();c.value=r.value.filter(u=>{const p=u.name.toLowerCase().includes(s),h=u.keywords.some(b=>b.toLowerCase().includes(s));return p||h}),e.nextTick(()=>{s&&K(c.value[0],!0)})}function U(s,u=300){let p;return(...h)=>{clearTimeout(p),p=setTimeout(()=>s(...h),u)}}function W(s){return s.date_added?s.image:E.CDN_URL+s.unicode_character+".png"}function q(s){s.target.parentNode.style.display="none"}function $(s,u=!0){const h=v.value[s-1].ref.value[0];e.nextTick(()=>{const b=l.value,N=s===1?0:h.offsetTop-15;b.scrollTop=N,u&&m(s-1,0)})}function G(){const s=l.value;s.scrollTop=0}function z(){l.value.addEventListener("scroll",M)}function H(){t.value=new IntersectionObserver(async s=>{s.forEach(u=>{var b,N,T,P,V;const{target:p}=u,h=parseInt(p.dataset.index);u.isIntersecting&&p.offsetTop<=L.value.offsetTop+50?(f.value=((b=v.value[h-1])==null?void 0:b.label)??((N=v.value[0])==null?void 0:N.label),d("scroll-into-tab",h-1)):u.boundingClientRect.bottom<=((T=L.value)==null?void 0:T.getBoundingClientRect().bottom)?(d("scroll-into-tab",h),f.value=(P=v.value[h])==null?void 0:P.label):h===1&&(d("scroll-into-tab",h),f.value=(V=v.value[0])==null?void 0:V.label)})}),t.value.observe(L.value),Array.from(l.value.children).forEach((s,u)=>{t.value.observe(s),s.dataset.index=u})}const Y=(s,u,p)=>{if(s.preventDefault(),Object.values(E.ARROW_KEYS).includes(s.key)){A(s.key,u);return}switch(s.key){case"Tab":d("focus-skin-selector");break;case"Enter":D(p,s);break}},Q=(s,u,p,h)=>{if(s.preventDefault(),Object.values(E.ARROW_KEYS).includes(s.key)){B(s.key,u,p);return}switch(s.key){case"Tab":s.shiftKey?m(u,0)&&u>0?$(u,!0):($(1,!1),d("focus-search-input")):m(u+1,0)?$(u+1+1,!1):d("focus-skin-selector");break;case"Enter":D(h,s);break}};function D(s,u){d("selected-emoji",{...s,shift_key:u.shiftKey})}function C(s){d("highlighted-emoji",s)}function X(){m(0,0)}function Z(){$(g.value.length,!0)}return e.onMounted(()=>{H(),z()}),e.onBeforeUnmount(()=>{t.value.disconnect(),l.value.removeEventListener("scroll",M)}),S({focusEmojiSelector:X,focusLastEmoji:Z}),(s,u)=>(e.openBlock(),e.createElementBlock("div",ue,[e.createElementVNode("div",{id:"d-emoji-picker-list",ref_key:"listRef",ref:l,class:"d-emoji-picker__list"},[o.emojiFilter?(e.openBlock(),e.createElementBlock("p",fe,e.toDisplayString(c.value.length>0?o.searchResultsLabel:o.searchNoResultsLabel),1)):(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"tabCategoryRef",ref:L,class:"d-emoji-picker__category d-emoji-picker__alignment"},[e.createElementVNode("p",null,e.toDisplayString(f.value),1)],512)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v.value,(p,h)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:h,ref_for:!0,ref:p.ref,class:"d-emoji-picker__alignment"},[h?(e.openBlock(),e.createElementBlock("p",de,e.toDisplayString(p.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",me,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(O.emojisGrouped)[g.value[h]+o.skinTone]?e.unref(O.emojisGrouped)[g.value[h]+o.skinTone]:e.unref(O.emojisGrouped)[g.value[h]],(b,N)=>(e.openBlock(),e.createElementBlock("button",{key:b.shortname,ref_for:!0,ref:T=>{T&&e.unref(_)(T,h,N)},type:"button","aria-label":b.name,onClick:T=>D(b,T),onFocusin:T=>C(b),onFocusout:u[0]||(u[0]=T=>C(null)),onMouseover:T=>C(b),onMouseleave:u[1]||(u[1]=T=>C(null)),onKeydown:T=>Q(T,h,N,b)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:b.name,"aria-label":b.name,title:b.name,src:W(b),onError:q},null,40,_e)],40,Ee))),128))])])),[[e.vShow,!o.emojiFilter]])),128)),o.emojiFilter?(e.openBlock(),e.createElementBlock("div",ve,[e.createElementVNode("div",be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,(p,h)=>(e.openBlock(),e.createElementBlock("button",{key:p.shortname,ref_for:!0,ref:b=>{b&&e.unref(a)(b,h)},type:"button","aria-label":p.name,class:e.normalizeClass({"hover-emoji":h===0&&e.unref(y)}),onClick:b=>D(p,b),onFocusin:b=>C(p),onFocusout:u[2]||(u[2]=b=>C(null)),onMouseover:b=>K(p),onMouseleave:u[3]||(u[3]=b=>K(null)),onKeydown:b=>Y(b,h,p)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:p.name,"aria-label":p.name,title:p.name,src:`${e.unref(E.CDN_URL)+p.unicode_character}.png`},null,8,he)],42,pe))),128))])])):e.createCommentVNode("",!0)],512)]))}},Se={"data-qa":"skin-selector"},Ie={class:"d-emoji-picker__skin-list"},Re=["onKeydown","onClick"],ge=["alt","aria-label","title","src"],ye={class:"d-emoji-picker__skin-selected"},je=["aria-label"],Le=["alt","aria-label","title","src"],Te={__name:"emoji_skin_selector",props:{skinTone:{type:String,required:!0},isHovering:{type:Boolean,default:!1},skinSelectorButtonTooltipLabel:{type:String,required:!0}},emits:["skin-tone","focus-tabset","focus-last-emoji"],setup(o,{expose:S,emit:I}){const n=o,d=I,j=[{name:":wave_tone1:",unicode_output:"1f44b-1f3fb",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,skinCode:"_tone1"},{name:":wave_tone2:",unicode_output:"1f44b-1f3fc",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,skinCode:"_tone2"},{name:":wave_tone3:",unicode_output:"1f44b-1f3fd",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,skinCode:"_tone3"},{name:":wave_tone4:",unicode_output:"1f44b-1f3fe",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,skinCode:"_tone4"},{name:":wave_tone5:",unicode_output:"1f44b-1f3ff",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,skinCode:"_tone5"},{name:":wave:",unicode_output:"1f44b",skinTone:E.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,skinCode:""}],R=e.ref(!1),y=e.ref(null),_=e.ref([]);e.watchEffect(()=>n.isHovering&&(R.value=!1));const a=e.computed(()=>j.find(i=>i.skinTone===n.skinTone)),m=e.ref(a.value);e.watchEffect(()=>a.value&&(m.value=a.value));function A(i){_.value.push(i)}function B(){y.value.focus()}function L(i){m.value=i,R.value=!1,d("skin-tone",i.skinTone),e.nextTick(()=>B())}const l=(i,v,f)=>{var g,c,r;i.preventDefault(),i.key==="ArrowLeft"&&(f===0&&((g=_.value[_.value.length-1])==null||g.focus()),(c=_.value[f-1])==null||c.focus()),i.key==="ArrowRight"&&((r=_.value[f+1])==null||r.focus()),i.key==="Enter"&&(v?L(v):t()),i.key==="Tab"&&(i.shiftKey?d("focus-last-emoji"):d("focus-tabset"))};function t(){R.value=!R.value,e.nextTick(()=>_.value[0].focus())}return S({focusSkinSelector:B}),(i,v)=>(e.openBlock(),e.createElementBlock("div",Se,[e.withDirectives(e.createElementVNode("div",Ie,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(j,(f,g)=>e.createElementVNode("button",{ref_for:!0,ref:c=>{c&&A(c)},key:f.name,class:e.normalizeClass({selected:m.value.skinCode===f.skinCode}),onKeydown:c=>l(c,f,g),onClick:c=>L(f)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:f.name,"aria-label":f.name,title:f.name,src:`${e.unref(E.CDN_URL)+f.unicode_output}.png`},null,8,ge)],42,Re)),64))],512),[[e.vShow,R.value]]),e.withDirectives(e.createElementVNode("div",ye,[e.createVNode(e.unref(le.default),{placement:"top-end"},{anchor:e.withCtx(()=>[e.createElementVNode("button",{ref_key:"skinSelectorRef",ref:y,"aria-label":o.skinSelectorButtonTooltipLabel,tabindex:"-1",onClick:t,onKeydown:v[0]||(v[0]=f=>l(f))},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:m.value.name,"aria-label":m.value.name,title:m.value.name,src:`${e.unref(E.CDN_URL)+m.value.unicode_output}.png`},null,8,Le)],40,je)]),default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.skinSelectorButtonTooltipLabel)+" ",1)]),_:1})],512),[[e.vShow,!R.value]])]))}},Oe={class:"d-emoji-picker__data"},we=["alt","aria-label","title","src"],Ae={__name:"emoji_description",props:{emoji:{type:Object,default:null}},setup(o){function S(I){return I.date_added?I.image:`${E.CDN_URL+I.unicode_character}.png`}return(I,n)=>{var d;return e.openBlock(),e.createElementBlock("div",Oe,[o.emoji?(e.openBlock(),e.createElementBlock("img",{key:0,class:"d-icon d-icon--size-500",alt:o.emoji.name,"aria-label":o.emoji.name,title:o.emoji.name,src:S(o.emoji)},null,8,we)):e.createCommentVNode("",!0),e.createElementVNode("div",null,e.toDisplayString((d=o.emoji)==null?void 0:d.name),1)])}}},Be={class:"d-emoji-picker"},Ce={class:"d-emoji-picker--header"},Ne={class:"d-emoji-picker--body"},$e={class:"d-emoji-picker--footer"},De={__name:"emoji_picker",props:{recentlyUsedEmojis:{type:Array,default:()=>[]},customEmojis:{type:Array},skinTone:{type:String,default:"Default"},searchQuery:{type:String,default:""},showSearch:{type:Boolean,default:!0},showAddEmojiButton:{type:Boolean,default:!1}},emits:["selected-emoji","scroll-bottom-reached","skin-tone","close","add-emoji"],setup(o,{emit:S}){const I=o,n=S,d=e.ref(I.searchQuery.value),j=e.ref(null),R=e.ref({}),y=e.ref(0),_=e.computed(()=>{var c;return((c=I.recentlyUsedEmojis)==null?void 0:c.length)>0}),a=e.computed(()=>{var c;return((c=I.customEmojis)==null?void 0:c.length)>0}),m=new ne.DialtoneLocalization,A=[m.$t("DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL"),m.$t("DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL")],B=m.$t("DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL"),L=m.$t("DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL"),l=m.$t("DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL"),t=m.$t("DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL"),i=m.$t("DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL");e.watch(()=>I.searchQuery,c=>{d.value=c});function v(c){d.value="",R.value={...R.value,tabId:c}}function f(c){y.value=c}function g(c){j.value=c}return(c,r)=>(e.openBlock(),e.createElementBlock("div",Be,[e.createElementVNode("div",Ce,[e.createVNode(ae,{ref:"tabsetRef","emoji-filter":d.value,"show-custom-emojis-tab":a.value,"show-recently-used-tab":_.value,"scroll-into-tab":y.value,"tab-set-labels":A,onFocusSkinSelector:r[0]||(r[0]=k=>c.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:r[1]||(r[1]=k=>o.showSearch?c.$refs.searchInputRef.focusSearchInput():c.$refs.emojiSelectorRef.focusEmojiSelector()),onSelectedTabset:v,onKeydown:r[2]||(r[2]=e.withKeys(k=>n("close"),["esc"]))},null,8,["emoji-filter","show-custom-emojis-tab","show-recently-used-tab","scroll-into-tab"])]),e.createElementVNode("div",Ne,[o.showSearch?(e.openBlock(),e.createBlock(ie,{key:0,ref:"searchInputRef",modelValue:d.value,"onUpdate:modelValue":r[3]||(r[3]=k=>d.value=k),"search-placeholder-label":e.unref(B),onSelectFirstEmoji:r[4]||(r[4]=k=>n("selected-emoji",j.value)),onFocusTabset:r[5]||(r[5]=k=>c.$refs.tabsetRef.focusTabset()),onFocusEmojiSelector:r[6]||(r[6]=k=>c.$refs.emojiSelectorRef.focusEmojiSelector()),onKeydown:r[7]||(r[7]=e.withKeys(k=>n("close"),["esc"]))},null,8,["modelValue","search-placeholder-label"])):e.createCommentVNode("",!0),e.createVNode(ke,{ref:"emojiSelectorRef","emoji-filter":d.value,"skin-tone":o.skinTone,"tabset-labels":A,"search-results-label":e.unref(L),"search-no-results-label":e.unref(l),"recently-used-emojis":o.recentlyUsedEmojis,"custom-emojis":o.customEmojis,"selected-tabset":R.value,onScrollIntoTab:f,onHighlightedEmoji:g,onSelectedEmoji:r[8]||(r[8]=k=>n("selected-emoji",k)),onFocusSkinSelector:r[9]||(r[9]=k=>c.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:r[10]||(r[10]=k=>o.showSearch?c.$refs.searchInputRef.focusSearchInput():c.$refs.tabsetRef.focusTabset()),onKeydown:r[11]||(r[11]=e.withKeys(k=>n("close"),["esc"])),onScrollBottomReached:r[12]||(r[12]=k=>n("scroll-bottom-reached"))},null,8,["emoji-filter","skin-tone","search-results-label","search-no-results-label","recently-used-emojis","custom-emojis","selected-tabset"])]),e.createElementVNode("div",$e,[o.showAddEmojiButton&&!j.value?(e.openBlock(),e.createBlock(e.unref(J.default),{key:0,importance:"outlined","aria-label":e.unref(i),class:"d-emoji-picker__add-emoji",onClick:r[13]||(r[13]=k=>n("add-emoji"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(i)),1)]),_:1},8,["aria-label"])):e.createCommentVNode("",!0),e.createVNode(Ae,{emoji:j.value},null,8,["emoji"]),e.createVNode(Te,{ref:"skinSelectorRef","is-hovering":!!j.value,"skin-selector-button-tooltip-label":e.unref(t),"skin-tone":o.skinTone,onSkinTone:r[14]||(r[14]=k=>n("skin-tone",k)),onFocusTabset:r[15]||(r[15]=k=>c.$refs.tabsetRef.focusTabset()),onFocusLastEmoji:r[16]||(r[16]=k=>c.$refs.emojiSelectorRef.focusLastEmoji()),onKeydown:r[17]||(r[17]=e.withKeys(k=>n("close"),["esc"]))},null,8,["is-hovering","skin-selector-button-tooltip-label","skin-tone"])])]))}};exports.default=De;
-//# sourceMappingURL=emoji-picker.cjs.map
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../emoji_picker-Cl-T4BXK.cjs`);exports.default=e.t;