@dialpad/dialtone-vue 3.223.0-next.3 → 3.223.0-next.4

package/dist/lib/emoji/emoji.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.cjs","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  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":"gVAsCA,IAAK,EAAU,CACb,KAAM,UAEN,WAAY,CACV,WAAA,EAAA,QACD,CAED,MAAO,CAML,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAOD,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAY,GAAM,OAAO,KAAK,EAAA,oBAAoB,CAAC,SAAS,EAAE,CAC/D,CAOD,SAAU,CACR,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CAQD,UAAW,CACT,KAAM,OACN,QAAS,KACV,CAMD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,UAAW,KACX,WAAY,GACb,EAGH,SAAU,CACR,gBAAkB,CAChB,MAAO,CAAC,CAAC,KAAK,WAGhB,UAAY,CAWR,OAVG,KAAK,eAGN,KAAK,WAAW,OACX,KAAK,UAAU,MAGpB,CAAC,MAAO,MAAM,CAAC,SAAS,KAAK,KAAK,CAC7B,EAAA,mBAAqB,KAAK,UAAU,IAAM,EAAA,wBAE1C,EAAA,mBAAqB,KAAK,UAAU,IAAM,EAAA,wBAVhB,WAcrC,UAAY,CACL,QAAK,eACV,OAAO,KAAK,UAAU,eAAiB,EAAA,gBAAgB,KAAK,UAAU,eAAc,CAAI,KAAK,UAAU,MAGzG,YAAc,CAEZ,OADK,KAAK,eACH,KAAK,UAAY,KAAK,UAAY,KAAK,UAAU,KADrB,iBAIrC,WAAa,CACX,OAAO,EAAA,oBAAoB,KAAK,OAEnC,CAED,MAAO,CACL,KAAM,CACJ,QAAS,UAAY,CACnB,KAAK,cAAc,EAGrB,UAAW,GACZ,CAED,SAAU,CACR,QAAS,gBAAkB,CACzB,KAAK,WAAa,IAGpB,UAAW,GACZ,CACF,CAED,QAAS,CACP,cAAgB,CACd,KAAK,UAAY,EAAA,gBAAgB,KAAK,KAAK,EAG7C,aAAe,CACb,KAAK,WAAa,IAGpB,cAAgB,CACd,KAAK,WAAa,IAErB,CACF,2JAxJQ,OAAA,CAlBA,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAqB,EAAA,UAAS,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,aAMtC,EAAA,CAHC,OAAQ,EACR,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAa,EAAA,UAAS,CAAA,CAC3B,eAAc,CAAA,MAAA,SAAA,KAAA,OAAiC,8BAHxC,EAAA,YAAc,EAAA,aAAY,CAAA,CAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,oBAenC,MAAA,CARC,IAAI,WACH,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAa,EAAA,UAAW,EAAA,SAAQ,CAAA,CACrC,aAAY,EAAA,WACZ,IAAK,EAAA,SACL,MAAO,EAAA,WACP,IAAK,EAAA,SACL,OAAI,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,aAAA,EAAA,YAAA,GAAA,EAAW,EACjB,QAAK,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,cAAA,EAAA,aAAA,GAAA,EAAY,yBARX,EAAA,WAAU,CAAA,CAAA,CAAA,CAAA,EAAA"}
+{"version":3,"file":"emoji.cjs","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 { ordinalSizeValidator } from '@/common/validators';\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  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, Number],\n      default: 500,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\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(String(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":"+XAuCA,IAAK,EAAU,CACb,KAAM,UAEN,WAAY,CACV,WAAA,EAAA,QACD,CAED,MAAO,CAML,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAOD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAW,EAAA,qBAAqB,EAAA,oBAAoB,CACrD,CAOD,SAAU,CACR,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CAQD,UAAW,CACT,KAAM,OACN,QAAS,KACV,CAMD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,UAAW,KACX,WAAY,GACb,EAGH,SAAU,CACR,gBAAkB,CAChB,MAAO,CAAC,CAAC,KAAK,WAGhB,UAAY,CAWR,OAVG,KAAK,eAGN,KAAK,WAAW,OACX,KAAK,UAAU,MAGpB,CAAC,MAAO,MAAM,CAAC,SAAS,OAAO,KAAK,KAAK,CAAC,CACrC,EAAA,mBAAqB,KAAK,UAAU,IAAM,EAAA,wBAE1C,EAAA,mBAAqB,KAAK,UAAU,IAAM,EAAA,wBAVhB,WAcrC,UAAY,CACL,QAAK,eACV,OAAO,KAAK,UAAU,eAAiB,EAAA,gBAAgB,KAAK,UAAU,eAAc,CAAI,KAAK,UAAU,MAGzG,YAAc,CAEZ,OADK,KAAK,eACH,KAAK,UAAY,KAAK,UAAY,KAAK,UAAU,KADrB,iBAIrC,WAAa,CACX,OAAO,EAAA,oBAAoB,KAAK,OAEnC,CAED,MAAO,CACL,KAAM,CACJ,QAAS,UAAY,CACnB,KAAK,cAAc,EAGrB,UAAW,GACZ,CAED,SAAU,CACR,QAAS,gBAAkB,CACzB,KAAK,WAAa,IAGpB,UAAW,GACZ,CACF,CAED,QAAS,CACP,cAAgB,CACd,KAAK,UAAY,EAAA,gBAAgB,KAAK,KAAK,EAG7C,aAAe,CACb,KAAK,WAAa,IAGpB,cAAgB,CACd,KAAK,WAAa,IAErB,CACF,2JAzJQ,OAAA,CAlBA,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAqB,EAAA,UAAS,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,aAMtC,EAAA,CAHC,OAAQ,EACR,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAa,EAAA,UAAS,CAAA,CAC3B,eAAc,CAAA,MAAA,SAAA,KAAA,OAAiC,8BAHxC,EAAA,YAAc,EAAA,aAAY,CAAA,CAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,oBAenC,MAAA,CARC,IAAI,WACH,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAa,EAAA,UAAW,EAAA,SAAQ,CAAA,CACrC,aAAY,EAAA,WACZ,IAAK,EAAA,SACL,MAAO,EAAA,WACP,IAAK,EAAA,SACL,OAAI,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,aAAA,EAAA,YAAA,GAAA,EAAW,EACjB,QAAK,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,cAAA,EAAA,aAAA,GAAA,EAAY,yBARX,EAAA,WAAU,CAAA,CAAA,CAAA,CAAA,EAAA"}

package/dist/lib/emoji/emoji.js

@@ -1,21 +1,22 @@
-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";
-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";
+import { ordinalSizeValidator as e } from "../../common/validators/index.js";
+import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { codeToEmojiData as n, emojiFileExtensionLarge as r, emojiFileExtensionSmall as i, emojiImageUrlLarge as a, emojiImageUrlSmall as o, stringToUnicode as s } from "../../common/emoji/index.js";
+import { ICON_SIZE_MODIFIERS as c } from "../icon/icon-constants.js";
+import l from "../skeleton/skeleton.js";
+import { createElementBlock as u, createElementVNode as d, createVNode as f, normalizeClass as p, openBlock as m, resolveComponent as h, vShow as g, withDirectives as _ } from "vue";
 //#region components/Emoji/Emoji.vue
-var _ = {
+var v = {
 	name: "DtEmoji",
-	components: { DtSkeleton: c },
+	components: { DtSkeleton: l },
 	props: {
 		code: {
 			type: String,
 			required: !0
 		},
 		size: {
-			type: String,
-			default: "500",
-			validator: (e) => Object.keys(s).includes(e)
+			type: [String, Number],
+			default: 500,
+			validator: e(c)
 		},
 		imgClass: {
 			type: [
@@ -45,16 +46,16 @@ var _ = {
 			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";
+			return this.emojiDataValid ? this.emojiData?.custom ? this.emojiData.image : ["100", "200"].includes(String(this.size)) ? o + this.emojiData.key + i : a + this.emojiData.key + r : "invalid";
 		},
 		emojiAlt() {
-			if (this.emojiDataValid) return this.emojiData.unicode_output ? o(this.emojiData.unicode_output) : this.emojiData.name;
+			if (this.emojiDataValid) return this.emojiData.unicode_output ? s(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];
+			return c[this.size];
 		}
 	},
 	watch: {
@@ -73,7 +74,7 @@ var _ = {
 	},
 	methods: {
 		getEmojiData() {
-			this.emojiData = t(this.code);
+			this.emojiData = n(this.code);
 		},
 		imageLoaded() {
 			this.imgLoading = !1;
@@ -82,24 +83,24 @@ var _ = {
 			this.imgLoading = !1;
 		}
 	}
-}, v = [
+}, y = [
 	"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, {
+function b(e, t, n, r, i, a) {
+	let o = h("dt-skeleton");
+	return m(), u("span", { class: p(["d-emoji d-icon", a.emojiSize]) }, [_(f(o, {
 		offset: 0,
-		class: f(["d-icon", a.emojiSize]),
+		class: p(["d-icon", a.emojiSize]),
 		"shape-option": {
 			shape: "circle",
 			size: "100%"
 		}
-	}, null, 8, ["class"]), [[h, i.imgLoading && n.showSkeleton]]), g(u("img", {
+	}, null, 8, ["class"]), [[g, i.imgLoading && n.showSkeleton]]), _(d("img", {
 		ref: "emojiImg",
-		class: f([
+		class: p([
 			"d-icon",
 			a.emojiSize,
 			n.imgClass
@@ -110,10 +111,10 @@ function y(e, t, n, r, i, a) {
 		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);
+	}, null, 42, y), [[g, !i.imgLoading]])], 2);
 }
-var b = /* @__PURE__ */ e(_, [["render", y]]);
+var x = /* @__PURE__ */ t(v, [["render", b]]);
 //#endregion
-export { b as default };
+export { x as default };
 
 //# sourceMappingURL=emoji.js.map

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

@@ -1 +1 @@
-{"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  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,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;;;;;;;;aA1KC,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"}
+{"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 { ordinalSizeValidator } from '@/common/validators';\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  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, Number],\n      default: 500,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\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(String(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":";;;;;;;AAuCA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY,EACV,YAAA,GACD;CAED,OAAO;EAML,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EAOD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,WAAW,EAAqB,EAAoB;GACrD;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,OAAO,KAAK,KAAK,CAAC,GACrC,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-text-wrapper/emoji-text-wrapper.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/emoji/index.cjs`),t=require(`../icon/icon-constants.cjs`),n=require(`../emoji/emoji.cjs`);let r=require(`vue`);var i=(0,r.h)((0,r.resolveDynamicComponent)(null)).type,a={name:`DtEmojiTextWrapper`,components:{DtEmoji:n.default},props:{elementType:{type:String,default:`div`},size:{type:String,default:`500`,validator:e=>Object.keys(t.ICON_SIZE_MODIFIERS).includes(e)}},data(){return{loadingEmojiJson:!0}},async created(){this.loadingEmojiJson=!1},methods:{replaceDtEmojis(e,t){if(!e.length)return t;let i=e.map(e=>e.replace(/\*/g,`\\*`)),a=RegExp(`(${i.join(`|`)})`,`g`);return t.split(a).filter(e=>e.trim()!==``).map(t=>e.includes(t)?(0,r.h)(n.default,{code:t,size:this.size}):(0,r.h)(`span`,{class:`d-emoji-text-wrapper__text`},t))},searchVNodes(e){if(!e)return;if(typeof e==`string`)return this.searchCodes(e);if(e.type===i)return e;if(typeof e.type==`symbol`)return this.searchCodes(e.children);if(e.props?.innerHTML)return this.searchVNodes(e.props.innerHTML);let t=Array.isArray(e.children)?e.children:[e.children];return(0,r.h)(e.type,e.props,t.map(e=>this.searchVNodes(e)))},replaceVueComponentVNodeContent(){},searchCodes(t){let n=e.findShortCodes(t),r=e.findEmojis(t),i=[...n,...r];return i.length===0?t:this.replaceDtEmojis(i,t)}},render(){let e=this.$slots.default?this.$slots.default():[];return(0,r.h)(this.elementType,{"data-qa":`emoji-text-wrapper`,class:`d-emoji-text-wrapper`},this.loadingEmojiJson?e:e.map(e=>this.searchVNodes(e)))}};exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/emoji/index.cjs`),n=require(`../icon/icon-constants.cjs`),r=require(`../emoji/emoji.cjs`);let i=require(`vue`);var a=(0,i.h)((0,i.resolveDynamicComponent)(null)).type,o={name:`DtEmojiTextWrapper`,components:{DtEmoji:r.default},props:{elementType:{type:String,default:`div`},size:{type:[String,Number],default:500,validator:e.ordinalSizeValidator(n.ICON_SIZE_MODIFIERS)}},data(){return{loadingEmojiJson:!0}},async created(){this.loadingEmojiJson=!1},methods:{replaceDtEmojis(e,t){if(!e.length)return t;let n=e.map(e=>e.replace(/\*/g,`\\*`)),a=RegExp(`(${n.join(`|`)})`,`g`);return t.split(a).filter(e=>e.trim()!==``).map(t=>e.includes(t)?(0,i.h)(r.default,{code:t,size:this.size}):(0,i.h)(`span`,{class:`d-emoji-text-wrapper__text`},t))},searchVNodes(e){if(!e)return;if(typeof e==`string`)return this.searchCodes(e);if(e.type===a)return e;if(typeof e.type==`symbol`)return this.searchCodes(e.children);if(e.props?.innerHTML)return this.searchVNodes(e.props.innerHTML);let t=Array.isArray(e.children)?e.children:[e.children];return(0,i.h)(e.type,e.props,t.map(e=>this.searchVNodes(e)))},replaceVueComponentVNodeContent(){},searchCodes(e){let n=t.findShortCodes(e),r=t.findEmojis(e),i=[...n,...r];return i.length===0?e:this.replaceDtEmojis(i,e)}},render(){let e=this.$slots.default?this.$slots.default():[];return(0,i.h)(this.elementType,{"data-qa":`emoji-text-wrapper`,class:`d-emoji-text-wrapper`},this.loadingEmojiJson?e:e.map(e=>this.searchVNodes(e)))}};exports.default=o;
 //# sourceMappingURL=emoji-text-wrapper.cjs.map

package/dist/lib/emoji-text-wrapper/emoji-text-wrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji-text-wrapper.cjs","names":[],"sources":["../../../components/EmojiTextWrapper/EmojiTextWrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../Emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h, resolveDynamicComponent } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon/IconConstants';\n\nconst COMMENT_TYPE = h(resolveDynamicComponent(null)).type;\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at.\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  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      if (!replaceList.length) return textContent;\n      // Escape the asterisk to avoid breaking the regex for the asterisk emoji\n      const escapedReplaceList = replaceList.map(item =>\n        item.replace(/\\*/g, '\\\\*'),\n      );\n\n      const regexp = new RegExp(`(${escapedReplaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          if (replaceList.includes(item)) {\n            return h(DtEmoji, { code: item, size: this.size });\n          }\n          return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n        });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      if (!VNode) return;\n      if (typeof VNode === 'string') return this.searchCodes(VNode);\n      if (VNode.type === COMMENT_TYPE) return VNode;\n      if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n      if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n      return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent () {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      if (replaceList.length === 0) return textContent;\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render () {\n    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"mappings":"gRAMA,IAAM,GAAA,EAAA,EAAA,IAAA,EAAA,EAAA,yBAAyC,KAAK,CAAC,CAAC,KAMjD,EAAU,CACb,KAAM,qBAEN,WAAY,CACV,QAAA,EAAA,QACD,CAED,MAAO,CAIL,YAAa,CACX,KAAM,OACN,QAAS,MACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAY,GAAM,OAAO,KAAK,EAAA,oBAAoB,CAAC,SAAS,EAAE,CAC/D,CACF,CAED,MAAQ,CACN,MAAO,CACL,iBAAkB,GACnB,EAGH,MAAM,SAAW,CACf,KAAK,iBAAmB,IAG1B,QAAS,CAKP,gBAAiB,EAAa,EAAa,CACzC,GAAI,CAAC,EAAY,OAAQ,OAAO,EAEhC,IAAM,EAAqB,EAAY,IAAI,GACzC,EAAK,QAAQ,MAAO,MAAM,CAC3B,CAEK,EAAa,OAAO,IAAI,EAAmB,KAAK,IAAI,CAAC,GAAI,IAAI,CAGnE,OAFc,EAAY,MAAM,EAAO,CAGpC,OAAO,GAAQ,EAAK,MAAK,GAAM,GAAE,CACjC,IAAK,GACA,EAAY,SAAS,EAAK,EAC5B,EAAA,EAAA,GAAS,EAAA,QAAS,CAAE,KAAM,EAAM,KAAM,KAAK,KAAM,CAAC,EAEpD,EAAA,EAAA,GAAS,OAAQ,CAAE,MAAO,6BAA8B,CAAE,EAAK,CAC/D,EAQN,aAAc,EAAO,CACnB,GAAI,CAAC,EAAO,OACZ,GAAI,OAAO,GAAU,SAAU,OAAO,KAAK,YAAY,EAAM,CAC7D,GAAI,EAAM,OAAS,EAAc,OAAO,EACxC,GAAI,OAAO,EAAM,MAAS,SAAU,OAAO,KAAK,YAAY,EAAM,SAAS,CAC3E,GAAI,EAAM,OAAO,UAAW,OAAO,KAAK,aAAa,EAAM,MAAM,UAAU,CAE3E,IAAM,EAAW,MAAM,QAAQ,EAAM,SAAQ,CAAI,EAAM,SAAW,CAAC,EAAM,SAAS,CAClF,OAAA,EAAA,EAAA,GAAS,EAAM,KAAM,EAAM,MAAO,EAAS,IAAI,GAAc,KAAK,aAAa,EAAW,CAAC,CAAC,EAI9F,iCAAmC,GASnC,YAAa,EAAa,CACxB,IAAM,EAAa,EAAA,eAAe,EAAY,CACxC,EAAS,EAAA,WAAW,EAAY,CAEhC,EAAc,CAAC,GAAG,EAAY,GAAG,EAAO,CAE9C,OADI,EAAY,SAAW,EAAU,EAC9B,KAAK,gBAAgB,EAAa,EAAY,EAExD,CAED,QAAU,CACR,IAAM,EAAqB,KAAK,OAAO,QAAU,KAAK,OAAO,SAAQ,CAAI,EAAE,CAC3E,OAAA,EAAA,EAAA,GACE,KAAK,YACL,CACE,UAAW,qBACX,MAAO,uBACR,CACD,KAAK,iBACD,EACA,EAAmB,IAAI,GAAS,KAAK,aAAa,EAAM,CAAC,CAC9D,EAEJ"}
+{"version":3,"file":"emoji-text-wrapper.cjs","names":[],"sources":["../../../components/EmojiTextWrapper/EmojiTextWrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../Emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h, resolveDynamicComponent } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon/IconConstants';\nimport { ordinalSizeValidator } from '@/common/validators';\n\nconst COMMENT_TYPE = h(resolveDynamicComponent(null)).type;\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: [String, Number],\n      default: 500,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      if (!replaceList.length) return textContent;\n      // Escape the asterisk to avoid breaking the regex for the asterisk emoji\n      const escapedReplaceList = replaceList.map(item =>\n        item.replace(/\\*/g, '\\\\*'),\n      );\n\n      const regexp = new RegExp(`(${escapedReplaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          if (replaceList.includes(item)) {\n            return h(DtEmoji, { code: item, size: this.size });\n          }\n          return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n        });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      if (!VNode) return;\n      if (typeof VNode === 'string') return this.searchCodes(VNode);\n      if (VNode.type === COMMENT_TYPE) return VNode;\n      if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n      if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n      return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent () {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      if (replaceList.length === 0) return textContent;\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render () {\n    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"mappings":"+TAOA,IAAM,GAAA,EAAA,EAAA,IAAA,EAAA,EAAA,yBAAyC,KAAK,CAAC,CAAC,KAMjD,EAAU,CACb,KAAM,qBAEN,WAAY,CACV,QAAA,EAAA,QACD,CAED,MAAO,CAIL,YAAa,CACX,KAAM,OACN,QAAS,MACV,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAW,EAAA,qBAAqB,EAAA,oBAAoB,CACrD,CACF,CAED,MAAQ,CACN,MAAO,CACL,iBAAkB,GACnB,EAGH,MAAM,SAAW,CACf,KAAK,iBAAmB,IAG1B,QAAS,CAKP,gBAAiB,EAAa,EAAa,CACzC,GAAI,CAAC,EAAY,OAAQ,OAAO,EAEhC,IAAM,EAAqB,EAAY,IAAI,GACzC,EAAK,QAAQ,MAAO,MAAM,CAC3B,CAEK,EAAa,OAAO,IAAI,EAAmB,KAAK,IAAI,CAAC,GAAI,IAAI,CAGnE,OAFc,EAAY,MAAM,EAAO,CAGpC,OAAO,GAAQ,EAAK,MAAK,GAAM,GAAE,CACjC,IAAK,GACA,EAAY,SAAS,EAAK,EAC5B,EAAA,EAAA,GAAS,EAAA,QAAS,CAAE,KAAM,EAAM,KAAM,KAAK,KAAM,CAAC,EAEpD,EAAA,EAAA,GAAS,OAAQ,CAAE,MAAO,6BAA8B,CAAE,EAAK,CAC/D,EAQN,aAAc,EAAO,CACnB,GAAI,CAAC,EAAO,OACZ,GAAI,OAAO,GAAU,SAAU,OAAO,KAAK,YAAY,EAAM,CAC7D,GAAI,EAAM,OAAS,EAAc,OAAO,EACxC,GAAI,OAAO,EAAM,MAAS,SAAU,OAAO,KAAK,YAAY,EAAM,SAAS,CAC3E,GAAI,EAAM,OAAO,UAAW,OAAO,KAAK,aAAa,EAAM,MAAM,UAAU,CAE3E,IAAM,EAAW,MAAM,QAAQ,EAAM,SAAQ,CAAI,EAAM,SAAW,CAAC,EAAM,SAAS,CAClF,OAAA,EAAA,EAAA,GAAS,EAAM,KAAM,EAAM,MAAO,EAAS,IAAI,GAAc,KAAK,aAAa,EAAW,CAAC,CAAC,EAI9F,iCAAmC,GASnC,YAAa,EAAa,CACxB,IAAM,EAAa,EAAA,eAAe,EAAY,CACxC,EAAS,EAAA,WAAW,EAAY,CAEhC,EAAc,CAAC,GAAG,EAAY,GAAG,EAAO,CAE9C,OADI,EAAY,SAAW,EAAU,EAC9B,KAAK,gBAAgB,EAAa,EAAY,EAExD,CAED,QAAU,CACR,IAAM,EAAqB,KAAK,OAAO,QAAU,KAAK,OAAO,SAAQ,CAAI,EAAE,CAC3E,OAAA,EAAA,EAAA,GACE,KAAK,YACL,CACE,UAAW,qBACX,MAAO,uBACR,CACD,KAAK,iBACD,EACA,EAAmB,IAAI,GAAS,KAAK,aAAa,EAAM,CAAC,CAC9D,EAEJ"}

package/dist/lib/emoji-text-wrapper/emoji-text-wrapper.js

@@ -1,20 +1,21 @@
-import { findEmojis as e, findShortCodes as t } from "../../common/emoji/index.js";
-import { ICON_SIZE_MODIFIERS as n } from "../icon/icon-constants.js";
-import r from "../emoji/emoji.js";
-import { h as i, resolveDynamicComponent as a } from "vue";
+import { ordinalSizeValidator as e } from "../../common/validators/index.js";
+import { findEmojis as t, findShortCodes as n } from "../../common/emoji/index.js";
+import { ICON_SIZE_MODIFIERS as r } from "../icon/icon-constants.js";
+import i from "../emoji/emoji.js";
+import { h as a, resolveDynamicComponent as o } from "vue";
 //#region components/EmojiTextWrapper/EmojiTextWrapper.vue
-var o = i(a(null)).type, s = {
+var s = a(o(null)).type, c = {
 	name: "DtEmojiTextWrapper",
-	components: { DtEmoji: r },
+	components: { DtEmoji: i },
 	props: {
 		elementType: {
 			type: String,
 			default: "div"
 		},
 		size: {
-			type: String,
-			default: "500",
-			validator: (e) => Object.keys(n).includes(e)
+			type: [String, Number],
+			default: 500,
+			validator: e(r)
 		}
 	},
 	data() {
@@ -26,36 +27,36 @@ var o = i(a(null)).type, s = {
 	methods: {
 		replaceDtEmojis(e, t) {
 			if (!e.length) return t;
-			let n = e.map((e) => e.replace(/\*/g, "\\*")), a = RegExp(`(${n.join("|")})`, "g");
-			return t.split(a).filter((e) => e.trim() !== "").map((t) => e.includes(t) ? i(r, {
+			let n = e.map((e) => e.replace(/\*/g, "\\*")), r = RegExp(`(${n.join("|")})`, "g");
+			return t.split(r).filter((e) => e.trim() !== "").map((t) => e.includes(t) ? a(i, {
 				code: t,
 				size: this.size
-			}) : i("span", { class: "d-emoji-text-wrapper__text" }, t));
+			}) : a("span", { class: "d-emoji-text-wrapper__text" }, t));
 		},
 		searchVNodes(e) {
 			if (!e) return;
 			if (typeof e == "string") return this.searchCodes(e);
-			if (e.type === o) return e;
+			if (e.type === s) return e;
 			if (typeof e.type == "symbol") return this.searchCodes(e.children);
 			if (e.props?.innerHTML) return this.searchVNodes(e.props.innerHTML);
 			let t = Array.isArray(e.children) ? e.children : [e.children];
-			return i(e.type, e.props, t.map((e) => this.searchVNodes(e)));
+			return a(e.type, e.props, t.map((e) => this.searchVNodes(e)));
 		},
 		replaceVueComponentVNodeContent() {},
-		searchCodes(n) {
-			let r = t(n), i = e(n), a = [...r, ...i];
-			return a.length === 0 ? n : this.replaceDtEmojis(a, n);
+		searchCodes(e) {
+			let r = n(e), i = t(e), a = [...r, ...i];
+			return a.length === 0 ? e : this.replaceDtEmojis(a, e);
 		}
 	},
 	render() {
 		let e = this.$slots.default ? this.$slots.default() : [];
-		return i(this.elementType, {
+		return a(this.elementType, {
 			"data-qa": "emoji-text-wrapper",
 			class: "d-emoji-text-wrapper"
 		}, this.loadingEmojiJson ? e : e.map((e) => this.searchVNodes(e)));
 	}
 };
 //#endregion
-export { s as default };
+export { c as default };
 
 //# sourceMappingURL=emoji-text-wrapper.js.map

package/dist/lib/emoji-text-wrapper/emoji-text-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji-text-wrapper.js","names":[],"sources":["../../../components/EmojiTextWrapper/EmojiTextWrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../Emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h, resolveDynamicComponent } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon/IconConstants';\n\nconst COMMENT_TYPE = h(resolveDynamicComponent(null)).type;\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at.\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  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      if (!replaceList.length) return textContent;\n      // Escape the asterisk to avoid breaking the regex for the asterisk emoji\n      const escapedReplaceList = replaceList.map(item =>\n        item.replace(/\\*/g, '\\\\*'),\n      );\n\n      const regexp = new RegExp(`(${escapedReplaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          if (replaceList.includes(item)) {\n            return h(DtEmoji, { code: item, size: this.size });\n          }\n          return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n        });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      if (!VNode) return;\n      if (typeof VNode === 'string') return this.searchCodes(VNode);\n      if (VNode.type === COMMENT_TYPE) return VNode;\n      if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n      if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n      return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent () {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      if (replaceList.length === 0) return textContent;\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render () {\n    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"mappings":";;;;;AAMA,IAAM,IAAe,EAAE,EAAwB,KAAK,CAAC,CAAC,MAMjD,IAAU;CACb,MAAM;CAEN,YAAY,EACV,SAAA,GACD;CAED,OAAO;EAIL,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAoB,CAAC,SAAS,EAAE;GAC/D;EACF;CAED,OAAQ;AACN,SAAO,EACL,kBAAkB,IACnB;;CAGH,MAAM,UAAW;AACf,OAAK,mBAAmB;;CAG1B,SAAS;EAKP,gBAAiB,GAAa,GAAa;AACzC,OAAI,CAAC,EAAY,OAAQ,QAAO;GAEhC,IAAM,IAAqB,EAAY,KAAI,MACzC,EAAK,QAAQ,OAAO,MAAM,CAC3B,EAEK,IAAa,OAAO,IAAI,EAAmB,KAAK,IAAI,CAAC,IAAI,IAAI;AAGnE,UAFc,EAAY,MAAM,EAAO,CAGpC,QAAO,MAAQ,EAAK,MAAK,KAAM,GAAE,CACjC,KAAK,MACA,EAAY,SAAS,EAAK,GACrB,EAAE,GAAS;IAAE,MAAM;IAAM,MAAM,KAAK;IAAM,CAAC,GAE7C,EAAE,QAAQ,EAAE,OAAO,8BAA8B,EAAE,EAAK,CAC/D;;EAQN,aAAc,GAAO;AACnB,OAAI,CAAC,EAAO;AACZ,OAAI,OAAO,KAAU,SAAU,QAAO,KAAK,YAAY,EAAM;AAC7D,OAAI,EAAM,SAAS,EAAc,QAAO;AACxC,OAAI,OAAO,EAAM,QAAS,SAAU,QAAO,KAAK,YAAY,EAAM,SAAS;AAC3E,OAAI,EAAM,OAAO,UAAW,QAAO,KAAK,aAAa,EAAM,MAAM,UAAU;GAE3E,IAAM,IAAW,MAAM,QAAQ,EAAM,SAAQ,GAAI,EAAM,WAAW,CAAC,EAAM,SAAS;AAClF,UAAO,EAAE,EAAM,MAAM,EAAM,OAAO,EAAS,KAAI,MAAc,KAAK,aAAa,EAAW,CAAC,CAAC;;EAI9F,kCAAmC;EASnC,YAAa,GAAa;GACxB,IAAM,IAAa,EAAe,EAAY,EACxC,IAAS,EAAW,EAAY,EAEhC,IAAc,CAAC,GAAG,GAAY,GAAG,EAAO;AAE9C,UADI,EAAY,WAAW,IAAU,IAC9B,KAAK,gBAAgB,GAAa,EAAY;;EAExD;CAED,SAAU;EACR,IAAM,IAAqB,KAAK,OAAO,UAAU,KAAK,OAAO,SAAQ,GAAI,EAAE;AAC3E,SAAO,EACL,KAAK,aACL;GACE,WAAW;GACX,OAAO;GACR,EACD,KAAK,mBACD,IACA,EAAmB,KAAI,MAAS,KAAK,aAAa,EAAM,CAAC,CAC9D;;CAEJ"}
+{"version":3,"file":"emoji-text-wrapper.js","names":[],"sources":["../../../components/EmojiTextWrapper/EmojiTextWrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../Emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { h, resolveDynamicComponent } from 'vue';\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon/IconConstants';\nimport { ordinalSizeValidator } from '@/common/validators';\n\nconst COMMENT_TYPE = h(resolveDynamicComponent(null)).type;\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: [String, Number],\n      default: 500,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      if (!replaceList.length) return textContent;\n      // Escape the asterisk to avoid breaking the regex for the asterisk emoji\n      const escapedReplaceList = replaceList.map(item =>\n        item.replace(/\\*/g, '\\\\*'),\n      );\n\n      const regexp = new RegExp(`(${escapedReplaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          if (replaceList.includes(item)) {\n            return h(DtEmoji, { code: item, size: this.size });\n          }\n          return h('span', { class: 'd-emoji-text-wrapper__text' }, item);\n        });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      if (!VNode) return;\n      if (typeof VNode === 'string') return this.searchCodes(VNode);\n      if (VNode.type === COMMENT_TYPE) return VNode;\n      if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n      if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n      return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent () {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      if (replaceList.length === 0) return textContent;\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render () {\n    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"mappings":";;;;;;AAOA,IAAM,IAAe,EAAE,EAAwB,KAAK,CAAC,CAAC,MAMjD,IAAU;CACb,MAAM;CAEN,YAAY,EACV,SAAA,GACD;CAED,OAAO;EAIL,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,WAAW,EAAqB,EAAoB;GACrD;EACF;CAED,OAAQ;AACN,SAAO,EACL,kBAAkB,IACnB;;CAGH,MAAM,UAAW;AACf,OAAK,mBAAmB;;CAG1B,SAAS;EAKP,gBAAiB,GAAa,GAAa;AACzC,OAAI,CAAC,EAAY,OAAQ,QAAO;GAEhC,IAAM,IAAqB,EAAY,KAAI,MACzC,EAAK,QAAQ,OAAO,MAAM,CAC3B,EAEK,IAAa,OAAO,IAAI,EAAmB,KAAK,IAAI,CAAC,IAAI,IAAI;AAGnE,UAFc,EAAY,MAAM,EAAO,CAGpC,QAAO,MAAQ,EAAK,MAAK,KAAM,GAAE,CACjC,KAAK,MACA,EAAY,SAAS,EAAK,GACrB,EAAE,GAAS;IAAE,MAAM;IAAM,MAAM,KAAK;IAAM,CAAC,GAE7C,EAAE,QAAQ,EAAE,OAAO,8BAA8B,EAAE,EAAK,CAC/D;;EAQN,aAAc,GAAO;AACnB,OAAI,CAAC,EAAO;AACZ,OAAI,OAAO,KAAU,SAAU,QAAO,KAAK,YAAY,EAAM;AAC7D,OAAI,EAAM,SAAS,EAAc,QAAO;AACxC,OAAI,OAAO,EAAM,QAAS,SAAU,QAAO,KAAK,YAAY,EAAM,SAAS;AAC3E,OAAI,EAAM,OAAO,UAAW,QAAO,KAAK,aAAa,EAAM,MAAM,UAAU;GAE3E,IAAM,IAAW,MAAM,QAAQ,EAAM,SAAQ,GAAI,EAAM,WAAW,CAAC,EAAM,SAAS;AAClF,UAAO,EAAE,EAAM,MAAM,EAAM,OAAO,EAAS,KAAI,MAAc,KAAK,aAAa,EAAW,CAAC,CAAC;;EAI9F,kCAAmC;EASnC,YAAa,GAAa;GACxB,IAAM,IAAa,EAAe,EAAY,EACxC,IAAS,EAAW,EAAY,EAEhC,IAAc,CAAC,GAAG,GAAY,GAAG,EAAO;AAE9C,UADI,EAAY,WAAW,IAAU,IAC9B,KAAK,gBAAgB,GAAa,EAAY;;EAExD;CAED,SAAU;EACR,IAAM,IAAqB,KAAK,OAAO,UAAU,KAAK,OAAO,SAAQ,GAAI,EAAE;AAC3E,SAAO,EACL,KAAK,aACL;GACE,WAAW;GACX,OAAO;GACR,EACD,KAAK,mBACD,IACA,EAAmB,KAAI,MAAS,KAAK,aAAa,EAAM,CAAC,CAC9D;;CAEJ"}

package/dist/lib/empty-state/empty-state.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../text/text.cjs`),n=require(`../stack/stack.cjs`),r=require(`./empty-state-constants.cjs`);let i=require(`vue`);var a=Object.assign({name:`DtEmptyState`},{__name:`EmptyState`,props:{size:{type:[String,Number],default:400,validator:e=>Object.keys(r.EMPTY_STATE_SIZE_MODIFIERS).includes(String(e))},headerText:{type:String,required:!0},bodyText:{type:String,default:null},illustrationClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},bodyClass:{type:[String,Array,Object],default:``}},setup(a){let o=(0,i.useSlots)(),s=a,c=(0,i.computed)(()=>e.hasSlotContent(o.icon)),l=(0,i.computed)(()=>e.hasSlotContent(o.illustration)),u=(0,i.computed)(()=>c.value&&(!l.value||p.value)),d=(0,i.computed)(()=>l.value&&!p.value),f=(0,i.computed)(()=>String(s.size)),p=(0,i.computed)(()=>f.value===`sm`||f.value===`200`),m=(0,i.computed)(()=>r.EMPTY_STATE_SIZE_MODIFIERS[f.value]),h=(0,i.computed)(()=>[`d-empty-state`,m.value]),g=(0,i.computed)(()=>r.EMPTY_STATE_CONTENT_SIZE_MODIFIERS[f.value]),_=(0,i.computed)(()=>r.EMPTY_STATE_HEADLINE_SIZES[f.value]),v=(0,i.computed)(()=>r.EMPTY_STATE_HEADLINE_DENSITIES[f.value]),y=(0,i.computed)(()=>r.EMPTY_STATE_BODY_SIZES[f.value]),b=(0,i.computed)(()=>r.EMPTY_STATE_BODY_DENSITIES[f.value]);return(0,i.onMounted)(()=>{!s.bodyText&&!e.hasSlotContent(o.body)&&console.error(`DtEmptyState: You should provide either bodyText or content on body slot.`)}),(r,s)=>((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(n.default),{class:(0,i.normalizeClass)(h.value)},{default:(0,i.withCtx)(()=>[d.value?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,{key:0,class:(0,i.normalizeClass)([`d-empty-state__illustration`,a.illustrationClass])},[(0,i.renderSlot)(r.$slots,`illustration`)],2)):(0,i.createCommentVNode)(``,!0),u.value?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,{key:1,class:(0,i.normalizeClass)([`d-empty-state__icon`,a.iconClass])},[(0,i.renderSlot)(r.$slots,`icon`,{iconSize:`800`})],2)):(0,i.createCommentVNode)(``,!0),(0,i.createVNode)((0,i.unref)(n.default),{gap:`150`,class:(0,i.normalizeClass)([`d-empty-state__content`,g.value])},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(t.default),{kind:`headline`,size:_.value,density:v.value,wrap:`balance`,as:`div`,class:`d-empty-state__header-text`},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(a.headerText),1)]),_:1},8,[`size`,`density`]),a.bodyText?((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(t.default),{key:0,kind:`body`,size:y.value,density:b.value,tone:`secondary`,wrap:`balance`,as:`p`,class:`d-empty-state__body-text`},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(a.bodyText),1)]),_:1},8,[`size`,`density`])):(0,i.createCommentVNode)(``,!0)]),_:1},8,[`class`]),(0,i.unref)(e.hasSlotContent)((0,i.unref)(o).body)?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,{key:2,class:(0,i.normalizeClass)(a.bodyClass)},[(0,i.renderSlot)(r.$slots,`body`)],2)):(0,i.createCommentVNode)(``,!0)]),_:3},8,[`class`]))}});exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../text/text.cjs`),r=require(`../stack/stack.cjs`),i=require(`./empty-state-constants.cjs`);let a=require(`vue`);var o=Object.assign({name:`DtEmptyState`},{__name:`EmptyState`,props:{size:{type:[String,Number],default:400,validator:e.ordinalSizeValidator(i.EMPTY_STATE_SIZE_MODIFIERS)},headerText:{type:String,required:!0},bodyText:{type:String,default:null},illustrationClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},bodyClass:{type:[String,Array,Object],default:``}},setup(e){let o=(0,a.useSlots)(),s=e,c=(0,a.computed)(()=>t.hasSlotContent(o.icon)),l=(0,a.computed)(()=>t.hasSlotContent(o.illustration)),u=(0,a.computed)(()=>c.value&&(!l.value||p.value)),d=(0,a.computed)(()=>l.value&&!p.value),f=(0,a.computed)(()=>String(s.size)),p=(0,a.computed)(()=>f.value===`sm`||f.value===`200`),m=(0,a.computed)(()=>i.EMPTY_STATE_SIZE_MODIFIERS[f.value]),h=(0,a.computed)(()=>[`d-empty-state`,m.value]),g=(0,a.computed)(()=>i.EMPTY_STATE_CONTENT_SIZE_MODIFIERS[f.value]),_=(0,a.computed)(()=>i.EMPTY_STATE_HEADLINE_SIZES[f.value]),v=(0,a.computed)(()=>i.EMPTY_STATE_HEADLINE_DENSITIES[f.value]),y=(0,a.computed)(()=>i.EMPTY_STATE_BODY_SIZES[f.value]),b=(0,a.computed)(()=>i.EMPTY_STATE_BODY_DENSITIES[f.value]);return(0,a.onMounted)(()=>{!s.bodyText&&!t.hasSlotContent(o.body)&&console.error(`DtEmptyState: You should provide either bodyText or content on body slot.`)}),(i,s)=>((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(r.default),{class:(0,a.normalizeClass)(h.value)},{default:(0,a.withCtx)(()=>[d.value?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:0,class:(0,a.normalizeClass)([`d-empty-state__illustration`,e.illustrationClass])},[(0,a.renderSlot)(i.$slots,`illustration`)],2)):(0,a.createCommentVNode)(``,!0),u.value?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:1,class:(0,a.normalizeClass)([`d-empty-state__icon`,e.iconClass])},[(0,a.renderSlot)(i.$slots,`icon`,{iconSize:`800`})],2)):(0,a.createCommentVNode)(``,!0),(0,a.createVNode)((0,a.unref)(r.default),{gap:`150`,class:(0,a.normalizeClass)([`d-empty-state__content`,g.value])},{default:(0,a.withCtx)(()=>[(0,a.createVNode)((0,a.unref)(n.default),{kind:`headline`,size:_.value,density:v.value,wrap:`balance`,as:`div`,class:`d-empty-state__header-text`},{default:(0,a.withCtx)(()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.headerText),1)]),_:1},8,[`size`,`density`]),e.bodyText?((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(n.default),{key:0,kind:`body`,size:y.value,density:b.value,tone:`secondary`,wrap:`balance`,as:`p`,class:`d-empty-state__body-text`},{default:(0,a.withCtx)(()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.bodyText),1)]),_:1},8,[`size`,`density`])):(0,a.createCommentVNode)(``,!0)]),_:1},8,[`class`]),(0,a.unref)(t.hasSlotContent)((0,a.unref)(o).body)?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,{key:2,class:(0,a.normalizeClass)(e.bodyClass)},[(0,a.renderSlot)(i.$slots,`body`)],2)):(0,a.createCommentVNode)(``,!0)]),_:3},8,[`class`]))}});exports.default=o;
 //# sourceMappingURL=empty-state.cjs.map

package/dist/lib/empty-state/empty-state.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.cjs","names":[],"sources":["../../../components/EmptyState/EmptyState.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <span\n      v-if=\"showIllustration\"\n      :class=\"['d-empty-state__illustration', illustrationClass]\"\n    >\n      <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n      <slot name=\"illustration\" />\n    </span>\n\n    <span\n      v-if=\"showIcon\"\n      :class=\"['d-empty-state__icon', iconClass]\"\n    >\n      <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"'800'\"\n      />\n    </span>\n\n    <dt-stack\n      gap=\"150\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <dt-text\n        kind=\"headline\"\n        :size=\"headlineSize\"\n        :density=\"headlineDensity\"\n        wrap=\"balance\"\n        as=\"div\"\n        class=\"d-empty-state__header-text\"\n      >\n        {{ headerText }}\n      </dt-text>\n\n      <dt-text\n        v-if=\"bodyText\"\n        kind=\"body\"\n        :size=\"bodySize\"\n        :density=\"bodyDensity\"\n        tone=\"secondary\"\n        wrap=\"balance\"\n        as=\"p\"\n        class=\"d-empty-state__body-text\"\n      >\n        {{ bodyText }}\n      </dt-text>\n    </dt-stack>\n\n    <div\n      v-if=\"hasSlotContent(slots.body)\"\n      :class=\"bodyClass\"\n    >\n      <slot name=\"body\" />\n    </div>\n  </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent } from '@/common/utils';\nimport {\n  EMPTY_STATE_BODY_DENSITIES,\n  EMPTY_STATE_BODY_SIZES,\n  EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n  EMPTY_STATE_HEADLINE_DENSITIES,\n  EMPTY_STATE_HEADLINE_SIZES,\n  EMPTY_STATE_SIZE_MODIFIERS,\n} from './EmptyStateConstants.js';\n\ndefineOptions({\n  name: 'DtEmptyState',\n});\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 200, 300, 400\n    */\n  size: {\n    type: [String, Number],\n    default: 400,\n    validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(String(s)),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n\n  /**\n    * Additional class name for the illustration wrapper element.\n    */\n  illustrationClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n    * Additional class name for the icon wrapper element.\n    */\n  iconClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n    * Additional class name for the body slot wrapper element.\n    */\n  bodyClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n});\n\nconst hasIcon = computed(() => {\n  return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\n\n/**\n * Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n */\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value || isSmallSize.value));\n\n/**\n * Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeKey = computed(() => String(props.size));\nconst isSmallSize = computed(() => sizeKey.value === 'sm' || sizeKey.value === '200');\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[sizeKey.value]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[sizeKey.value]);\n\nconst headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[sizeKey.value]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[sizeKey.value]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[sizeKey.value]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[sizeKey.value]);\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"mappings":"ytBA+EA,IAAM,GAAA,EAAA,EAAA,WAAkB,CAElB,EAAQ,EAsDR,GAAA,EAAA,EAAA,cACG,EAAA,eAAe,EAAM,KAAK,CACjC,CACI,GAAA,EAAA,EAAA,cAAiC,EAAA,eAAe,EAAM,aAAa,CAAC,CAMpE,GAAA,EAAA,EAAA,cAA0B,EAAQ,QAAU,CAAC,EAAgB,OAAS,EAAY,OAAO,CAMzF,GAAA,EAAA,EAAA,cAAkC,EAAgB,OAAS,CAAC,EAAY,MAAM,CAE9E,GAAA,EAAA,EAAA,cAAyB,OAAO,EAAM,KAAK,CAAC,CAC5C,GAAA,EAAA,EAAA,cAA6B,EAAQ,QAAU,MAAQ,EAAQ,QAAU,MAAM,CAE/E,GAAA,EAAA,EAAA,cAA2B,EAAA,2BAA2B,EAAQ,OAAO,CAErE,GAAA,EAAA,EAAA,cAAmC,CAAC,gBAAiB,EAAU,MAAM,CAAC,CAEtE,GAAA,EAAA,EAAA,cAA8B,EAAA,mCAAmC,EAAQ,OAAO,CAEhF,GAAA,EAAA,EAAA,cAA8B,EAAA,2BAA2B,EAAQ,OAAO,CACxE,GAAA,EAAA,EAAA,cAAiC,EAAA,+BAA+B,EAAQ,OAAO,CAE/E,GAAA,EAAA,EAAA,cAA0B,EAAA,uBAAuB,EAAQ,OAAO,CAChE,GAAA,EAAA,EAAA,cAA6B,EAAA,2BAA2B,EAAQ,OAAO,QAE7E,EAAA,EAAA,eAAgB,CACV,CAAC,EAAM,UAAY,CAAC,EAAA,eAAe,EAAM,KAAK,EAChD,QAAQ,MAAM,4EAA4E,EAE5F,yDAjHW,EAAA,QAAA,CAAA,CAxDR,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAiB,CAAA,CAAA,2BAQlB,CALC,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAKD,OAAA,OAJJ,OAAA,EAAA,EAAA,gBAAK,CAAA,8BAAkC,EAAA,kBAAiB,CAAA,oBAG7B,EAAA,OAAA,eAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAItB,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQD,OAAA,OAPJ,OAAA,EAAA,EAAA,gBAAK,CAAA,sBAA0B,EAAA,UAAS,CAAA,oBAMvC,EAAA,OAAA,OAAA,CADC,SAAW,MAAK,CAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,+BA+BV,EAAA,QAAA,CAAA,CA1BT,IAAI,MACH,OAAA,EAAA,EAAA,gBAAK,CAAA,yBAA6B,EAAA,MAAY,CAAA,6BAWrC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CARR,KAAK,WACJ,KAAM,EAAA,MACN,QAAS,EAAA,MACV,KAAK,UACL,GAAG,MACH,MAAM,yDAEU,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAb,EAAA,WAAU,CAAA,EAAA,CAAA,CAAA,4BAIP,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAUE,EAAA,QAAA,CAAA,OATR,KAAK,OACJ,KAAM,EAAA,MACN,QAAS,EAAA,MACV,KAAK,YACL,KAAK,UACL,GAAG,IACH,MAAM,uDAEQ,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAX,EAAA,SAAQ,CAAA,EAAA,CAAA,CAAA,6FAKP,EAAA,eAAc,EAAA,EAAA,EAAA,OAAC,EAAK,CAAC,KAAI,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAI3B,MAAA,OAHH,OAAA,EAAA,EAAA,gBAAO,EAAA,UAAS,oBAEG,EAAA,OAAA,OAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA"}
+{"version":3,"file":"empty-state.cjs","names":[],"sources":["../../../components/EmptyState/EmptyState.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <span\n      v-if=\"showIllustration\"\n      :class=\"['d-empty-state__illustration', illustrationClass]\"\n    >\n      <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n      <slot name=\"illustration\" />\n    </span>\n\n    <span\n      v-if=\"showIcon\"\n      :class=\"['d-empty-state__icon', iconClass]\"\n    >\n      <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"'800'\"\n      />\n    </span>\n\n    <dt-stack\n      gap=\"150\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <dt-text\n        kind=\"headline\"\n        :size=\"headlineSize\"\n        :density=\"headlineDensity\"\n        wrap=\"balance\"\n        as=\"div\"\n        class=\"d-empty-state__header-text\"\n      >\n        {{ headerText }}\n      </dt-text>\n\n      <dt-text\n        v-if=\"bodyText\"\n        kind=\"body\"\n        :size=\"bodySize\"\n        :density=\"bodyDensity\"\n        tone=\"secondary\"\n        wrap=\"balance\"\n        as=\"p\"\n        class=\"d-empty-state__body-text\"\n      >\n        {{ bodyText }}\n      </dt-text>\n    </dt-stack>\n\n    <div\n      v-if=\"hasSlotContent(slots.body)\"\n      :class=\"bodyClass\"\n    >\n      <slot name=\"body\" />\n    </div>\n  </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n  EMPTY_STATE_BODY_DENSITIES,\n  EMPTY_STATE_BODY_SIZES,\n  EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n  EMPTY_STATE_HEADLINE_DENSITIES,\n  EMPTY_STATE_HEADLINE_SIZES,\n  EMPTY_STATE_SIZE_MODIFIERS,\n} from './EmptyStateConstants.js';\n\ndefineOptions({\n  name: 'DtEmptyState',\n});\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 200, 300, 400\n    */\n  size: {\n    type: [String, Number],\n    default: 400,\n    validator: ordinalSizeValidator(EMPTY_STATE_SIZE_MODIFIERS),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n\n  /**\n    * Additional class name for the illustration wrapper element.\n    */\n  illustrationClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n    * Additional class name for the icon wrapper element.\n    */\n  iconClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n    * Additional class name for the body slot wrapper element.\n    */\n  bodyClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n});\n\nconst hasIcon = computed(() => {\n  return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\n\n/**\n * Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n */\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value || isSmallSize.value));\n\n/**\n * Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeKey = computed(() => String(props.size));\nconst isSmallSize = computed(() => sizeKey.value === 'sm' || sizeKey.value === '200');\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[sizeKey.value]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[sizeKey.value]);\n\nconst headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[sizeKey.value]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[sizeKey.value]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[sizeKey.value]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[sizeKey.value]);\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"mappings":"4vBAgFA,IAAM,GAAA,EAAA,EAAA,WAAkB,CAElB,EAAQ,EAsDR,GAAA,EAAA,EAAA,cACG,EAAA,eAAe,EAAM,KAAK,CACjC,CACI,GAAA,EAAA,EAAA,cAAiC,EAAA,eAAe,EAAM,aAAa,CAAC,CAMpE,GAAA,EAAA,EAAA,cAA0B,EAAQ,QAAU,CAAC,EAAgB,OAAS,EAAY,OAAO,CAMzF,GAAA,EAAA,EAAA,cAAkC,EAAgB,OAAS,CAAC,EAAY,MAAM,CAE9E,GAAA,EAAA,EAAA,cAAyB,OAAO,EAAM,KAAK,CAAC,CAC5C,GAAA,EAAA,EAAA,cAA6B,EAAQ,QAAU,MAAQ,EAAQ,QAAU,MAAM,CAE/E,GAAA,EAAA,EAAA,cAA2B,EAAA,2BAA2B,EAAQ,OAAO,CAErE,GAAA,EAAA,EAAA,cAAmC,CAAC,gBAAiB,EAAU,MAAM,CAAC,CAEtE,GAAA,EAAA,EAAA,cAA8B,EAAA,mCAAmC,EAAQ,OAAO,CAEhF,GAAA,EAAA,EAAA,cAA8B,EAAA,2BAA2B,EAAQ,OAAO,CACxE,GAAA,EAAA,EAAA,cAAiC,EAAA,+BAA+B,EAAQ,OAAO,CAE/E,GAAA,EAAA,EAAA,cAA0B,EAAA,uBAAuB,EAAQ,OAAO,CAChE,GAAA,EAAA,EAAA,cAA6B,EAAA,2BAA2B,EAAQ,OAAO,QAE7E,EAAA,EAAA,eAAgB,CACV,CAAC,EAAM,UAAY,CAAC,EAAA,eAAe,EAAM,KAAK,EAChD,QAAQ,MAAM,4EAA4E,EAE5F,yDAlHW,EAAA,QAAA,CAAA,CAxDR,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAiB,CAAA,CAAA,2BAQlB,CALC,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAKD,OAAA,OAJJ,OAAA,EAAA,EAAA,gBAAK,CAAA,8BAAkC,EAAA,kBAAiB,CAAA,oBAG7B,EAAA,OAAA,eAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAItB,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQD,OAAA,OAPJ,OAAA,EAAA,EAAA,gBAAK,CAAA,sBAA0B,EAAA,UAAS,CAAA,oBAMvC,EAAA,OAAA,OAAA,CADC,SAAW,MAAK,CAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,+BA+BV,EAAA,QAAA,CAAA,CA1BT,IAAI,MACH,OAAA,EAAA,EAAA,gBAAK,CAAA,yBAA6B,EAAA,MAAY,CAAA,6BAWrC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CARR,KAAK,WACJ,KAAM,EAAA,MACN,QAAS,EAAA,MACV,KAAK,UACL,GAAG,MACH,MAAM,yDAEU,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAb,EAAA,WAAU,CAAA,EAAA,CAAA,CAAA,4BAIP,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAUE,EAAA,QAAA,CAAA,OATR,KAAK,OACJ,KAAM,EAAA,MACN,QAAS,EAAA,MACV,KAAK,YACL,KAAK,UACL,GAAG,IACH,MAAM,uDAEQ,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAX,EAAA,SAAQ,CAAA,EAAA,CAAA,CAAA,6FAKP,EAAA,eAAc,EAAA,EAAA,EAAA,OAAC,EAAK,CAAC,KAAI,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAI3B,MAAA,OAHH,OAAA,EAAA,EAAA,gBAAO,EAAA,UAAS,oBAEG,EAAA,OAAA,OAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA"}

package/dist/lib/empty-state/empty-state.js

@@ -1,16 +1,17 @@
-import { hasSlotContent as e } from "../../common/utils/index.js";
-import t from "../text/text.js";
-import n from "../stack/stack.js";
-import { EMPTY_STATE_BODY_DENSITIES as r, EMPTY_STATE_BODY_SIZES as i, EMPTY_STATE_CONTENT_SIZE_MODIFIERS as a, EMPTY_STATE_HEADLINE_DENSITIES as o, EMPTY_STATE_HEADLINE_SIZES as s, EMPTY_STATE_SIZE_MODIFIERS as c } from "./empty-state-constants.js";
-import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createTextVNode as p, createVNode as m, normalizeClass as h, onMounted as g, openBlock as _, renderSlot as v, toDisplayString as y, unref as b, useSlots as x, withCtx as S } from "vue";
+import { ordinalSizeValidator as e } from "../../common/validators/index.js";
+import { hasSlotContent as t } from "../../common/utils/index.js";
+import n from "../text/text.js";
+import r from "../stack/stack.js";
+import { EMPTY_STATE_BODY_DENSITIES as i, EMPTY_STATE_BODY_SIZES as a, EMPTY_STATE_CONTENT_SIZE_MODIFIERS as o, EMPTY_STATE_HEADLINE_DENSITIES as s, EMPTY_STATE_HEADLINE_SIZES as c, EMPTY_STATE_SIZE_MODIFIERS as l } from "./empty-state-constants.js";
+import { computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createTextVNode as m, createVNode as h, normalizeClass as g, onMounted as _, openBlock as v, renderSlot as y, toDisplayString as b, unref as x, useSlots as S, withCtx as C } from "vue";
 //#region components/EmptyState/EmptyState.vue
-var C = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
+var w = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
 	__name: "EmptyState",
 	props: {
 		size: {
 			type: [String, Number],
 			default: 400,
-			validator: (e) => Object.keys(c).includes(String(e))
+			validator: e(l)
 		},
 		headerText: {
 			type: String,
@@ -45,25 +46,25 @@ var C = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
 			default: ""
 		}
 	},
-	setup(C) {
-		let w = x(), T = C, E = l(() => e(w.icon)), D = l(() => e(w.illustration)), O = l(() => E.value && (!D.value || j.value)), k = l(() => D.value && !j.value), A = l(() => String(T.size)), j = l(() => A.value === "sm" || A.value === "200"), M = l(() => c[A.value]), N = l(() => ["d-empty-state", M.value]), P = l(() => a[A.value]), F = l(() => s[A.value]), I = l(() => o[A.value]), L = l(() => i[A.value]), R = l(() => r[A.value]);
-		return g(() => {
-			!T.bodyText && !e(w.body) && console.error("DtEmptyState: You should provide either bodyText or content on body slot.");
-		}), (r, i) => (_(), u(b(n), { class: h(N.value) }, {
-			default: S(() => [
-				k.value ? (_(), f("span", {
+	setup(e) {
+		let w = S(), T = e, E = u(() => t(w.icon)), D = u(() => t(w.illustration)), O = u(() => E.value && (!D.value || j.value)), k = u(() => D.value && !j.value), A = u(() => String(T.size)), j = u(() => A.value === "sm" || A.value === "200"), M = u(() => l[A.value]), N = u(() => ["d-empty-state", M.value]), P = u(() => o[A.value]), F = u(() => c[A.value]), I = u(() => s[A.value]), L = u(() => a[A.value]), R = u(() => i[A.value]);
+		return _(() => {
+			!T.bodyText && !t(w.body) && console.error("DtEmptyState: You should provide either bodyText or content on body slot.");
+		}), (i, a) => (v(), d(x(r), { class: g(N.value) }, {
+			default: C(() => [
+				k.value ? (v(), p("span", {
 					key: 0,
-					class: h(["d-empty-state__illustration", C.illustrationClass])
-				}, [v(r.$slots, "illustration")], 2)) : d("", !0),
-				O.value ? (_(), f("span", {
+					class: g(["d-empty-state__illustration", e.illustrationClass])
+				}, [y(i.$slots, "illustration")], 2)) : f("", !0),
+				O.value ? (v(), p("span", {
 					key: 1,
-					class: h(["d-empty-state__icon", C.iconClass])
-				}, [v(r.$slots, "icon", { iconSize: "800" })], 2)) : d("", !0),
-				m(b(n), {
+					class: g(["d-empty-state__icon", e.iconClass])
+				}, [y(i.$slots, "icon", { iconSize: "800" })], 2)) : f("", !0),
+				h(x(r), {
 					gap: "150",
-					class: h(["d-empty-state__content", P.value])
+					class: g(["d-empty-state__content", P.value])
 				}, {
-					default: S(() => [m(b(t), {
+					default: C(() => [h(x(n), {
 						kind: "headline",
 						size: F.value,
 						density: I.value,
@@ -71,9 +72,9 @@ var C = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
 						as: "div",
 						class: "d-empty-state__header-text"
 					}, {
-						default: S(() => [p(y(C.headerText), 1)]),
+						default: C(() => [m(b(e.headerText), 1)]),
 						_: 1
-					}, 8, ["size", "density"]), C.bodyText ? (_(), u(b(t), {
+					}, 8, ["size", "density"]), e.bodyText ? (v(), d(x(n), {
 						key: 0,
 						kind: "body",
 						size: L.value,
@@ -83,21 +84,21 @@ var C = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
 						as: "p",
 						class: "d-empty-state__body-text"
 					}, {
-						default: S(() => [p(y(C.bodyText), 1)]),
+						default: C(() => [m(b(e.bodyText), 1)]),
 						_: 1
-					}, 8, ["size", "density"])) : d("", !0)]),
+					}, 8, ["size", "density"])) : f("", !0)]),
 					_: 1
 				}, 8, ["class"]),
-				b(e)(b(w).body) ? (_(), f("div", {
+				x(t)(x(w).body) ? (v(), p("div", {
 					key: 2,
-					class: h(C.bodyClass)
-				}, [v(r.$slots, "body")], 2)) : d("", !0)
+					class: g(e.bodyClass)
+				}, [y(i.$slots, "body")], 2)) : f("", !0)
 			]),
 			_: 3
 		}, 8, ["class"]));
 	}
 });
 //#endregion
-export { C as default };
+export { w as default };
 
 //# sourceMappingURL=empty-state.js.map

package/dist/lib/empty-state/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","names":[],"sources":["../../../components/EmptyState/EmptyState.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <span\n      v-if=\"showIllustration\"\n      :class=\"['d-empty-state__illustration', illustrationClass]\"\n    >\n      <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n      <slot name=\"illustration\" />\n    </span>\n\n    <span\n      v-if=\"showIcon\"\n      :class=\"['d-empty-state__icon', iconClass]\"\n    >\n      <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"'800'\"\n      />\n    </span>\n\n    <dt-stack\n      gap=\"150\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <dt-text\n        kind=\"headline\"\n        :size=\"headlineSize\"\n        :density=\"headlineDensity\"\n        wrap=\"balance\"\n        as=\"div\"\n        class=\"d-empty-state__header-text\"\n      >\n        {{ headerText }}\n      </dt-text>\n\n      <dt-text\n        v-if=\"bodyText\"\n        kind=\"body\"\n        :size=\"bodySize\"\n        :density=\"bodyDensity\"\n        tone=\"secondary\"\n        wrap=\"balance\"\n        as=\"p\"\n        class=\"d-empty-state__body-text\"\n      >\n        {{ bodyText }}\n      </dt-text>\n    </dt-stack>\n\n    <div\n      v-if=\"hasSlotContent(slots.body)\"\n      :class=\"bodyClass\"\n    >\n      <slot name=\"body\" />\n    </div>\n  </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent } from '@/common/utils';\nimport {\n  EMPTY_STATE_BODY_DENSITIES,\n  EMPTY_STATE_BODY_SIZES,\n  EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n  EMPTY_STATE_HEADLINE_DENSITIES,\n  EMPTY_STATE_HEADLINE_SIZES,\n  EMPTY_STATE_SIZE_MODIFIERS,\n} from './EmptyStateConstants.js';\n\ndefineOptions({\n  name: 'DtEmptyState',\n});\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 200, 300, 400\n    */\n  size: {\n    type: [String, Number],\n    default: 400,\n    validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(String(s)),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n\n  /**\n    * Additional class name for the illustration wrapper element.\n    */\n  illustrationClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n    * Additional class name for the icon wrapper element.\n    */\n  iconClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n    * Additional class name for the body slot wrapper element.\n    */\n  bodyClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n});\n\nconst hasIcon = computed(() => {\n  return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\n\n/**\n * Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n */\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value || isSmallSize.value));\n\n/**\n * Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeKey = computed(() => String(props.size));\nconst isSmallSize = computed(() => sizeKey.value === 'sm' || sizeKey.value === '200');\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[sizeKey.value]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[sizeKey.value]);\n\nconst headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[sizeKey.value]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[sizeKey.value]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[sizeKey.value]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[sizeKey.value]);\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+EA,IAAM,IAAQ,GAAU,EAElB,IAAQ,GAsDR,IAAU,QACP,EAAe,EAAM,KAAK,CACjC,EACI,IAAkB,QAAe,EAAe,EAAM,aAAa,CAAC,EAMpE,IAAW,QAAe,EAAQ,UAAU,CAAC,EAAgB,SAAS,EAAY,OAAO,EAMzF,IAAmB,QAAe,EAAgB,SAAS,CAAC,EAAY,MAAM,EAE9E,IAAU,QAAe,OAAO,EAAM,KAAK,CAAC,EAC5C,IAAc,QAAe,EAAQ,UAAU,QAAQ,EAAQ,UAAU,MAAM,EAE/E,IAAY,QAAe,EAA2B,EAAQ,OAAO,EAErE,IAAoB,QAAe,CAAC,iBAAiB,EAAU,MAAM,CAAC,EAEtE,IAAe,QAAe,EAAmC,EAAQ,OAAO,EAEhF,IAAe,QAAe,EAA2B,EAAQ,OAAO,EACxE,IAAkB,QAAe,EAA+B,EAAQ,OAAO,EAE/E,IAAW,QAAe,EAAuB,EAAQ,OAAO,EAChE,IAAc,QAAe,EAA2B,EAAQ,OAAO;SAE7E,QAAgB;AACd,GAAI,CAAC,EAAM,YAAY,CAAC,EAAe,EAAM,KAAK,IAChD,QAAQ,MAAM,4EAA4E;IAE5F,kBA1KA,EAyDW,EAAA,EAAA,EAAA,EAxDR,OAAK,EAAE,EAAA,MAAiB,EAAA,EAAA;oBAQlB;IALC,EAAA,SAAA,GAAA,EADR,EAMO,QAAA;;KAJJ,OAAK,EAAA,CAAA,+BAAkC,EAAA,kBAAiB,CAAA;QAGzD,EAA4B,EAAA,QAAA,eAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAItB,EAAA,SAAA,GAAA,EADR,EASO,QAAA;;KAPJ,OAAK,EAAA,CAAA,uBAA0B,EAAA,UAAS,CAAA;QAGzC,EAGE,EAAA,QAAA,QAAA,EADC,UAAW,OAAK,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAIrB,EA2BW,EAAA,EAAA,EAAA;KA1BT,KAAI;KACH,OAAK,EAAA,CAAA,0BAA6B,EAAA,MAAY,CAAA;;sBAWrC,CATV,EASU,EAAA,EAAA,EAAA;MARR,MAAK;MACJ,MAAM,EAAA;MACN,SAAS,EAAA;MACV,MAAK;MACL,IAAG;MACH,OAAM;;uBAEU,CAAA,EAAA,EAAb,EAAA,WAAU,EAAA,EAAA,CAAA,CAAA;;iCAIP,EAAA,YAAA,GAAA,EADR,EAWU,EAAA,EAAA,EAAA;;MATR,MAAK;MACJ,MAAM,EAAA;MACN,SAAS,EAAA;MACV,MAAK;MACL,MAAK;MACL,IAAG;MACH,OAAM;;uBAEQ,CAAA,EAAA,EAAX,EAAA,SAAQ,EAAA,EAAA,CAAA,CAAA;;;;;IAKP,EAAA,EAAc,CAAC,EAAA,EAAK,CAAC,KAAI,IAAA,GAAA,EADjC,EAKM,OAAA;;KAHH,OAAK,EAAE,EAAA,UAAS;QAEjB,EAAoB,EAAA,QAAA,OAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../../components/EmptyState/EmptyState.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <span\n      v-if=\"showIllustration\"\n      :class=\"['d-empty-state__illustration', illustrationClass]\"\n    >\n      <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n      <slot name=\"illustration\" />\n    </span>\n\n    <span\n      v-if=\"showIcon\"\n      :class=\"['d-empty-state__icon', iconClass]\"\n    >\n      <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"'800'\"\n      />\n    </span>\n\n    <dt-stack\n      gap=\"150\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <dt-text\n        kind=\"headline\"\n        :size=\"headlineSize\"\n        :density=\"headlineDensity\"\n        wrap=\"balance\"\n        as=\"div\"\n        class=\"d-empty-state__header-text\"\n      >\n        {{ headerText }}\n      </dt-text>\n\n      <dt-text\n        v-if=\"bodyText\"\n        kind=\"body\"\n        :size=\"bodySize\"\n        :density=\"bodyDensity\"\n        tone=\"secondary\"\n        wrap=\"balance\"\n        as=\"p\"\n        class=\"d-empty-state__body-text\"\n      >\n        {{ bodyText }}\n      </dt-text>\n    </dt-stack>\n\n    <div\n      v-if=\"hasSlotContent(slots.body)\"\n      :class=\"bodyClass\"\n    >\n      <slot name=\"body\" />\n    </div>\n  </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n  EMPTY_STATE_BODY_DENSITIES,\n  EMPTY_STATE_BODY_SIZES,\n  EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n  EMPTY_STATE_HEADLINE_DENSITIES,\n  EMPTY_STATE_HEADLINE_SIZES,\n  EMPTY_STATE_SIZE_MODIFIERS,\n} from './EmptyStateConstants.js';\n\ndefineOptions({\n  name: 'DtEmptyState',\n});\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 200, 300, 400\n    */\n  size: {\n    type: [String, Number],\n    default: 400,\n    validator: ordinalSizeValidator(EMPTY_STATE_SIZE_MODIFIERS),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n\n  /**\n    * Additional class name for the illustration wrapper element.\n    */\n  illustrationClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n    * Additional class name for the icon wrapper element.\n    */\n  iconClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n    * Additional class name for the body slot wrapper element.\n    */\n  bodyClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n});\n\nconst hasIcon = computed(() => {\n  return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\n\n/**\n * Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n */\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value || isSmallSize.value));\n\n/**\n * Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeKey = computed(() => String(props.size));\nconst isSmallSize = computed(() => sizeKey.value === 'sm' || sizeKey.value === '200');\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[sizeKey.value]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[sizeKey.value]);\n\nconst headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[sizeKey.value]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[sizeKey.value]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[sizeKey.value]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[sizeKey.value]);\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgFA,IAAM,IAAQ,GAAU,EAElB,IAAQ,GAsDR,IAAU,QACP,EAAe,EAAM,KAAK,CACjC,EACI,IAAkB,QAAe,EAAe,EAAM,aAAa,CAAC,EAMpE,IAAW,QAAe,EAAQ,UAAU,CAAC,EAAgB,SAAS,EAAY,OAAO,EAMzF,IAAmB,QAAe,EAAgB,SAAS,CAAC,EAAY,MAAM,EAE9E,IAAU,QAAe,OAAO,EAAM,KAAK,CAAC,EAC5C,IAAc,QAAe,EAAQ,UAAU,QAAQ,EAAQ,UAAU,MAAM,EAE/E,IAAY,QAAe,EAA2B,EAAQ,OAAO,EAErE,IAAoB,QAAe,CAAC,iBAAiB,EAAU,MAAM,CAAC,EAEtE,IAAe,QAAe,EAAmC,EAAQ,OAAO,EAEhF,IAAe,QAAe,EAA2B,EAAQ,OAAO,EACxE,IAAkB,QAAe,EAA+B,EAAQ,OAAO,EAE/E,IAAW,QAAe,EAAuB,EAAQ,OAAO,EAChE,IAAc,QAAe,EAA2B,EAAQ,OAAO;SAE7E,QAAgB;AACd,GAAI,CAAC,EAAM,YAAY,CAAC,EAAe,EAAM,KAAK,IAChD,QAAQ,MAAM,4EAA4E;IAE5F,kBA3KA,EAyDW,EAAA,EAAA,EAAA,EAxDR,OAAK,EAAE,EAAA,MAAiB,EAAA,EAAA;oBAQlB;IALC,EAAA,SAAA,GAAA,EADR,EAMO,QAAA;;KAJJ,OAAK,EAAA,CAAA,+BAAkC,EAAA,kBAAiB,CAAA;QAGzD,EAA4B,EAAA,QAAA,eAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAItB,EAAA,SAAA,GAAA,EADR,EASO,QAAA;;KAPJ,OAAK,EAAA,CAAA,uBAA0B,EAAA,UAAS,CAAA;QAGzC,EAGE,EAAA,QAAA,QAAA,EADC,UAAW,OAAK,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAIrB,EA2BW,EAAA,EAAA,EAAA;KA1BT,KAAI;KACH,OAAK,EAAA,CAAA,0BAA6B,EAAA,MAAY,CAAA;;sBAWrC,CATV,EASU,EAAA,EAAA,EAAA;MARR,MAAK;MACJ,MAAM,EAAA;MACN,SAAS,EAAA;MACV,MAAK;MACL,IAAG;MACH,OAAM;;uBAEU,CAAA,EAAA,EAAb,EAAA,WAAU,EAAA,EAAA,CAAA,CAAA;;iCAIP,EAAA,YAAA,GAAA,EADR,EAWU,EAAA,EAAA,EAAA;;MATR,MAAK;MACJ,MAAM,EAAA;MACN,SAAS,EAAA;MACV,MAAK;MACL,MAAK;MACL,IAAG;MACH,OAAM;;uBAEQ,CAAA,EAAA,EAAX,EAAA,SAAQ,EAAA,EAAA,CAAA,CAAA;;;;;IAKP,EAAA,EAAc,CAAC,EAAA,EAAK,CAAC,KAAI,IAAA,GAAA,EADjC,EAKM,OAAA;;KAHH,OAAK,EAAE,EAAA,UAAS;QAEjB,EAAoB,EAAA,QAAA,OAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/lib/filter-pill/filter-pill.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../mode_constants-CzYJW9ua.cjs`),r=require(`../button/button-constants.cjs`),i=require(`../../localization/index.cjs`),a=require(`../button/button.cjs`),o=require(`../checkbox/checkbox.cjs`),s=require(`../checkbox-group/checkbox-group.cjs`),c=require(`../list-item/list-item.cjs`),l=require(`../stack/stack.cjs`),u=require(`../popover/popover-constants.cjs`),d=require(`../popover/popover.cjs`),f=require(`../dropdown/dropdown.cjs`);let p=require(`vue`),m=require(`@dialpad/dialtone-icons/vue`);var h={name:`DtFilterPill`,components:{DtCheckboxGroup:s.default,DtCheckbox:o.default,DtPopover:d.default,DtButton:a.default,DtIconClose:m.DtIconClose,DtIconChevronDown:m.DtIconChevronDown,DtDropdown:f.default,DtListItem:c.default,DtStack:l.default},props:{useDropdown:{type:Boolean,default:!1},deferSelection:{type:Boolean,default:!1},modelValue:{type:Array,default:()=>[]},startTooltipText:{type:String,default:``},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},showClear:{type:Boolean,default:!0},label:{type:String,default:void 0},endTooltipText:{type:String,default:``},popoverAppendTo:{type:[e.HTML_ELEMENT_TYPE,String],default:`body`,validator:e=>u.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},popoverFallbackPlacements:{type:Array,default:()=>[`auto`]},popoverMaxHeight:{type:String,default:``},popoverMaxWidth:{type:String,default:``},popoverPadding:{type:String,default:`large`,validator:e=>Object.keys(u.POPOVER_PADDING_CLASSES).some(t=>t===e)},popoverPlacement:{type:String,default:`bottom-start`},labelClass:{type:[String,Array,Object],default:``},popoverContentClass:{type:[String,Array,Object],default:``},popoverHeaderClass:{type:[String,Array,Object],default:``},popoverFooterClass:{type:[String,Array,Object],default:``},popoverDialogClass:{type:[String,Array,Object],default:``},dropdownListClass:{type:[String,Array,Object],default:``},contentMode:n.t,size:{type:[String,Number],default:200,validator:e=>Object.keys(r.BUTTON_SIZE_MODIFIERS).includes(String(e))}},emits:[`clear`,`open`,`update:modelValue`,`apply`],data(){return{isOpen:!1,i18n:new i.DialtoneLocalization,filters:this.modelValue,pendingFilters:null}},computed:{overlayComponent(){return this.useDropdown?`dt-dropdown`:`dt-popover`},overlayProps(){let e={"append-to":this.popoverAppendTo,"fallback-placements":this.popoverFallbackPlacements,"max-height":this.popoverMaxHeight,"max-width":this.popoverMaxWidth,modal:!0,placement:this.popoverPlacement};return this.useDropdown?e[`list-class`]=this.dropdownListClass:(e.padding=this.popoverPadding,e[`content-class`]=this.popoverContentClass,e[`header-wrapper-class`]=this.popoverHeaderClass,e[`footer-wrapper-class`]=this.popoverFooterClass,e[`dialog-class`]=this.popoverDialogClass),e},buttonKind(){return this.isActive&&!this.disabled?`default`:`muted`},resolvedStartTooltipText(){return this.readOnly?this.startTooltipText||this.i18n.$t(`DIALTONE_FILTER_PILL_READ_ONLY_TOOLTIP`):this.startTooltipText},clearButtonAriaLabel(){return this.endTooltipText||this.i18n.$t(`DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL`)},clearButtonTitle(){if(!this.endTooltipText)return this.clearButtonAriaLabel},activeFilters(){return this.filters.filter(e=>e.active).map(e=>e.name)},activeFilterList(){return this.activeFilters.length===this.filters.length&&this.filters.length>1?`All`:this.activeFilters[0]??``},activeFilterOverflow(){return this.activeFilters.length<=1||this.activeFilters.length===this.filters.length&&this.filters.length>1?``:`+`+(this.activeFilters.length-1)},isActive(){return this.activeFilterList.length>0},hasClear(){return!this.readOnly&&this.showClear&&this.activeFilterList.length>0},displayFilters(){return this.deferSelection&&this.pendingFilters?this.pendingFilters:this.filters},pendingActiveFilters(){return this.pendingFilters?this.pendingFilters.filter(e=>e.active).map(e=>e.name):[]},cancelButtonLabel(){return this.i18n.$t(`DIALTONE_FILTER_PILL_CANCEL_BUTTON_LABEL`)},applyButtonLabel(){return this.i18n.$t(`DIALTONE_FILTER_PILL_APPLY_BUTTON_LABEL`)},clearIconSize(){return String(this.size)===`100`?`100`:r.BUTTON_ICON_SIZES[String(this.size)]}},watch:{isOpen(e){this.$emit(`open`,e),this.deferSelection&&(e?this.pendingFilters=JSON.parse(JSON.stringify(this.filters)):this.pendingFilters=null)},filters:{deep:!0,handler(e){this.$emit(`update:modelValue`,e)}}},mounted(){this.modelValue?.length||this.$slots.content&&this.$slots.content()||console.warn(`Please provide content through the v-model or the "content" slot.`),this.deferSelection&&this.useDropdown&&console.warn(`deferSelection has no effect when useDropdown is true.`)},methods:{clearFilter(e){this.filters.forEach(e=>delete e.active),this.$emit(`clear`,e)},openPopover(){this.readOnly||(this.isOpen=!0)},selectFilter(e,t){this.filters.forEach(t=>{t.active=t===e}),t()},applySelection(){this.pendingFilters&&(this.filters.forEach((e,t)=>{this.pendingFilters[t]?e.active=this.pendingFilters[t].active:delete e.active}),this.$emit(`apply`),this.isOpen=!1)},cancelSelection(){this.isOpen=!1}}},g=[`title`,`textContent`],_=[`title`,`textContent`],v=[`title`,`textContent`];function y(e,t,n,r,i,a){let o=(0,p.resolveComponent)(`dt-icon-chevron-down`),s=(0,p.resolveComponent)(`dt-button`),c=(0,p.resolveComponent)(`dt-checkbox`),l=(0,p.resolveComponent)(`dt-checkbox-group`),u=(0,p.resolveComponent)(`dt-stack`),d=(0,p.resolveComponent)(`dt-list-item`),f=(0,p.resolveComponent)(`dt-icon-close`),m=(0,p.resolveDirective)(`dt-tooltip`);return(0,p.openBlock)(),(0,p.createElementBlock)(`div`,{class:(0,p.normalizeClass)([`d-filter-pill`,{"d-filter-pill--read-only":n.readOnly}]),"data-qa":`dt-filter-pill`},[((0,p.openBlock)(),(0,p.createBlock)((0,p.resolveDynamicComponent)(a.overlayComponent),(0,p.mergeProps)({open:i.isOpen,"onUpdate:open":t[0]||(t[0]=e=>i.isOpen=e)},a.overlayProps,{"content-mode":n.contentMode}),(0,p.createSlots)({anchor:(0,p.withCtx)(t=>[(0,p.withDirectives)(((0,p.openBlock)(),(0,p.createBlock)(s,(0,p.mergeProps)(n.useDropdown?t:t.attrs,{active:a.isActive,"aria-disabled":n.readOnly||void 0,class:[`d-filter-pill__primary`,{"d-filter-pill--selected":a.isActive}],disabled:n.disabled,kind:a.buttonKind,size:n.size,"data-qa":`dt-filter-pill__button`,importance:`outlined`,onClick:a.openPopover,onKeydown:(0,p.withKeys)((0,p.withModifiers)(a.openPopover,[`prevent`]),[`up`,`down`])}),(0,p.createSlots)({default:(0,p.withCtx)(()=>[(0,p.createElementVNode)(`span`,{class:(0,p.normalizeClass)([`d-filter-pill__label`,n.labelClass])},[(0,p.renderSlot)(e.$slots,`default`,{label:n.label,filters:i.filters,activeFilters:a.activeFilters,activeFilterList:a.activeFilterList,activeFilterOverflow:a.activeFilterOverflow},()=>[(0,p.createElementVNode)(`span`,{class:`d-filter-pill__label-start`,title:n.label,textContent:(0,p.toDisplayString)(n.label)},null,8,g),a.activeFilterList?((0,p.openBlock)(),(0,p.createElementBlock)(`span`,{key:0,class:`d-filter-pill__label-end`,title:a.activeFilterList,textContent:(0,p.toDisplayString)(a.activeFilterList)},null,8,_)):(0,p.createCommentVNode)(``,!0),a.activeFilterOverflow?((0,p.openBlock)(),(0,p.createElementBlock)(`span`,{key:1,class:`d-filter-pill__label-end-overflow`,title:`plus ${a.activeFilters.length-1} others`,textContent:(0,p.toDisplayString)(a.activeFilterOverflow)},null,8,v)):(0,p.createCommentVNode)(``,!0)])],2)]),_:2},[e.$slots.startIcon?{name:`startIcon`,fn:(0,p.withCtx)(({iconSize:t})=>[(0,p.renderSlot)(e.$slots,`startIcon`,{iconSize:t})]),key:`0`}:void 0,n.readOnly?void 0:{name:`endIcon`,fn:(0,p.withCtx)(({iconSize:e})=>[(0,p.createVNode)(o,{size:e,class:`d-filter-pill__icon`,"data-qa":`dt-filter-pill__icon`},null,8,[`size`])]),key:`1`}]),1040,[`active`,`aria-disabled`,`class`,`disabled`,`kind`,`size`,`onClick`,`onKeydown`])),[[m,a.resolvedStartTooltipText]])]),_:2},[n.useDropdown?void 0:{name:`content`,fn:(0,p.withCtx)(({close:t})=>[(0,p.renderSlot)(e.$slots,`content`,{close:t,apply:a.applySelection,cancel:a.cancelSelection,pendingFilters:i.pendingFilters},()=>[n.modelValue?.length?((0,p.openBlock)(),(0,p.createBlock)(l,{key:0,"model-value":n.deferSelection?a.pendingActiveFilters:a.activeFilters,"aria-label":n.label,name:n.label||`filter-pill`},{default:(0,p.withCtx)(()=>[((0,p.openBlock)(!0),(0,p.createElementBlock)(p.Fragment,null,(0,p.renderList)(a.displayFilters,e=>((0,p.openBlock)(),(0,p.createBlock)(c,{key:e.name,label:e.name,value:e.name,"onUpdate:modelValue":t=>e.active=t},null,8,[`label`,`value`,`onUpdate:modelValue`]))),128))]),_:1},8,[`model-value`,`aria-label`,`name`])):(0,p.createCommentVNode)(``,!0)])]),key:`0`},!n.useDropdown&&e.$slots.headerContent?{name:`headerContent`,fn:(0,p.withCtx)(({close:t})=>[(0,p.renderSlot)(e.$slots,`headerContent`,{close:t})]),key:`1`}:void 0,!n.useDropdown&&(n.deferSelection||e.$slots.footerContent)?{name:`footerContent`,fn:(0,p.withCtx)(({close:t})=>[(0,p.renderSlot)(e.$slots,`footerContent`,{close:t,apply:a.applySelection,cancel:a.cancelSelection},()=>[n.deferSelection?((0,p.openBlock)(),(0,p.createBlock)(u,{key:0,direction:`row`,gap:`400`,justify:`end`,"data-qa":`dt-filter-pill__deferred-footer`},{default:(0,p.withCtx)(()=>[(0,p.createVNode)(s,{importance:`clear`,kind:`muted`,size:200,"data-qa":`dt-filter-pill__cancel-button`,onClick:a.cancelSelection},{default:(0,p.withCtx)(()=>[(0,p.createTextVNode)((0,p.toDisplayString)(a.cancelButtonLabel),1)]),_:1},8,[`onClick`]),(0,p.createVNode)(s,{importance:`primary`,size:200,"data-qa":`dt-filter-pill__apply-button`,onClick:a.applySelection},{default:(0,p.withCtx)(()=>[(0,p.createTextVNode)((0,p.toDisplayString)(a.applyButtonLabel),1)]),_:1},8,[`onClick`])]),_:1})):(0,p.createCommentVNode)(``,!0)])]),key:`2`}:void 0,n.useDropdown?{name:`list`,fn:(0,p.withCtx)(({close:t})=>[(0,p.renderSlot)(e.$slots,`content`,{close:t},()=>[((0,p.openBlock)(!0),(0,p.createElementBlock)(p.Fragment,null,(0,p.renderList)(i.filters,e=>((0,p.openBlock)(),(0,p.createBlock)(d,{key:e.name,role:`menuitem`,"navigation-type":`arrow-keys`,selected:e.active,onClick:n=>a.selectFilter(e,t)},{default:(0,p.withCtx)(()=>[(0,p.createTextVNode)((0,p.toDisplayString)(e.name),1)]),_:2},1032,[`selected`,`onClick`]))),128))])]),key:`3`}:void 0]),1040,[`open`,`content-mode`])),a.hasClear?(0,p.withDirectives)(((0,p.openBlock)(),(0,p.createBlock)(s,{key:0,active:a.isActive,"aria-label":a.clearButtonAriaLabel,class:(0,p.normalizeClass)([`d-filter-pill__clear`,{"d-filter-pill__clear--selected":a.isActive}]),disabled:n.disabled,kind:a.buttonKind,size:n.size,title:a.clearButtonTitle,"data-qa":`dt-filter-pill__clear-button`,importance:`outlined`,onClick:a.clearFilter},{icon:(0,p.withCtx)(()=>[(0,p.createVNode)(f,{size:a.clearIconSize},null,8,[`size`])]),_:1},8,[`active`,`aria-label`,`class`,`disabled`,`kind`,`size`,`title`,`onClick`])),[[m,n.endTooltipText]]):(0,p.createCommentVNode)(``,!0)],2)}var b=t.t(h,[[`render`,y]]);exports.default=b;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/validators/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../../mode_constants-CzYJW9ua.cjs`),i=require(`../button/button-constants.cjs`),a=require(`../../localization/index.cjs`),o=require(`../button/button.cjs`),s=require(`../checkbox/checkbox.cjs`),c=require(`../checkbox-group/checkbox-group.cjs`),l=require(`../list-item/list-item.cjs`),u=require(`../stack/stack.cjs`),d=require(`../popover/popover-constants.cjs`),f=require(`../popover/popover.cjs`),p=require(`../dropdown/dropdown.cjs`);let m=require(`vue`),h=require(`@dialpad/dialtone-icons/vue`);var g={name:`DtFilterPill`,components:{DtCheckboxGroup:c.default,DtCheckbox:s.default,DtPopover:f.default,DtButton:o.default,DtIconClose:h.DtIconClose,DtIconChevronDown:h.DtIconChevronDown,DtDropdown:p.default,DtListItem:l.default,DtStack:u.default},props:{useDropdown:{type:Boolean,default:!1},deferSelection:{type:Boolean,default:!1},modelValue:{type:Array,default:()=>[]},startTooltipText:{type:String,default:``},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},showClear:{type:Boolean,default:!0},label:{type:String,default:void 0},endTooltipText:{type:String,default:``},popoverAppendTo:{type:[e.HTML_ELEMENT_TYPE,String],default:`body`,validator:e=>d.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},popoverFallbackPlacements:{type:Array,default:()=>[`auto`]},popoverMaxHeight:{type:String,default:``},popoverMaxWidth:{type:String,default:``},popoverPadding:{type:String,default:`large`,validator:e=>Object.keys(d.POPOVER_PADDING_CLASSES).some(t=>t===e)},popoverPlacement:{type:String,default:`bottom-start`},labelClass:{type:[String,Array,Object],default:``},popoverContentClass:{type:[String,Array,Object],default:``},popoverHeaderClass:{type:[String,Array,Object],default:``},popoverFooterClass:{type:[String,Array,Object],default:``},popoverDialogClass:{type:[String,Array,Object],default:``},dropdownListClass:{type:[String,Array,Object],default:``},contentMode:r.t,size:{type:[String,Number],default:200,validator:t.ordinalSizeValidator(i.BUTTON_SIZE_MODIFIERS)}},emits:[`clear`,`open`,`update:modelValue`,`apply`],data(){return{isOpen:!1,i18n:new a.DialtoneLocalization,filters:this.modelValue,pendingFilters:null}},computed:{overlayComponent(){return this.useDropdown?`dt-dropdown`:`dt-popover`},overlayProps(){let e={"append-to":this.popoverAppendTo,"fallback-placements":this.popoverFallbackPlacements,"max-height":this.popoverMaxHeight,"max-width":this.popoverMaxWidth,modal:!0,placement:this.popoverPlacement};return this.useDropdown?e[`list-class`]=this.dropdownListClass:(e.padding=this.popoverPadding,e[`content-class`]=this.popoverContentClass,e[`header-wrapper-class`]=this.popoverHeaderClass,e[`footer-wrapper-class`]=this.popoverFooterClass,e[`dialog-class`]=this.popoverDialogClass),e},buttonKind(){return this.isActive&&!this.disabled?`default`:`muted`},resolvedStartTooltipText(){return this.readOnly?this.startTooltipText||this.i18n.$t(`DIALTONE_FILTER_PILL_READ_ONLY_TOOLTIP`):this.startTooltipText},clearButtonAriaLabel(){return this.endTooltipText||this.i18n.$t(`DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL`)},clearButtonTitle(){if(!this.endTooltipText)return this.clearButtonAriaLabel},activeFilters(){return this.filters.filter(e=>e.active).map(e=>e.name)},activeFilterList(){return this.activeFilters.length===this.filters.length&&this.filters.length>1?`All`:this.activeFilters[0]??``},activeFilterOverflow(){return this.activeFilters.length<=1||this.activeFilters.length===this.filters.length&&this.filters.length>1?``:`+`+(this.activeFilters.length-1)},isActive(){return this.activeFilterList.length>0},hasClear(){return!this.readOnly&&this.showClear&&this.activeFilterList.length>0},displayFilters(){return this.deferSelection&&this.pendingFilters?this.pendingFilters:this.filters},pendingActiveFilters(){return this.pendingFilters?this.pendingFilters.filter(e=>e.active).map(e=>e.name):[]},cancelButtonLabel(){return this.i18n.$t(`DIALTONE_FILTER_PILL_CANCEL_BUTTON_LABEL`)},applyButtonLabel(){return this.i18n.$t(`DIALTONE_FILTER_PILL_APPLY_BUTTON_LABEL`)},clearIconSize(){return String(this.size)===`100`?`100`:i.BUTTON_ICON_SIZES[String(this.size)]}},watch:{isOpen(e){this.$emit(`open`,e),this.deferSelection&&(e?this.pendingFilters=JSON.parse(JSON.stringify(this.filters)):this.pendingFilters=null)},filters:{deep:!0,handler(e){this.$emit(`update:modelValue`,e)}}},mounted(){this.modelValue?.length||this.$slots.content&&this.$slots.content()||console.warn(`Please provide content through the v-model or the "content" slot.`),this.deferSelection&&this.useDropdown&&console.warn(`deferSelection has no effect when useDropdown is true.`)},methods:{clearFilter(e){this.filters.forEach(e=>delete e.active),this.$emit(`clear`,e)},openPopover(){this.readOnly||(this.isOpen=!0)},selectFilter(e,t){this.filters.forEach(t=>{t.active=t===e}),t()},applySelection(){this.pendingFilters&&(this.filters.forEach((e,t)=>{this.pendingFilters[t]?e.active=this.pendingFilters[t].active:delete e.active}),this.$emit(`apply`),this.isOpen=!1)},cancelSelection(){this.isOpen=!1}}},_=[`title`,`textContent`],v=[`title`,`textContent`],y=[`title`,`textContent`];function b(e,t,n,r,i,a){let o=(0,m.resolveComponent)(`dt-icon-chevron-down`),s=(0,m.resolveComponent)(`dt-button`),c=(0,m.resolveComponent)(`dt-checkbox`),l=(0,m.resolveComponent)(`dt-checkbox-group`),u=(0,m.resolveComponent)(`dt-stack`),d=(0,m.resolveComponent)(`dt-list-item`),f=(0,m.resolveComponent)(`dt-icon-close`),p=(0,m.resolveDirective)(`dt-tooltip`);return(0,m.openBlock)(),(0,m.createElementBlock)(`div`,{class:(0,m.normalizeClass)([`d-filter-pill`,{"d-filter-pill--read-only":n.readOnly}]),"data-qa":`dt-filter-pill`},[((0,m.openBlock)(),(0,m.createBlock)((0,m.resolveDynamicComponent)(a.overlayComponent),(0,m.mergeProps)({open:i.isOpen,"onUpdate:open":t[0]||(t[0]=e=>i.isOpen=e)},a.overlayProps,{"content-mode":n.contentMode}),(0,m.createSlots)({anchor:(0,m.withCtx)(t=>[(0,m.withDirectives)(((0,m.openBlock)(),(0,m.createBlock)(s,(0,m.mergeProps)(n.useDropdown?t:t.attrs,{active:a.isActive,"aria-disabled":n.readOnly||void 0,class:[`d-filter-pill__primary`,{"d-filter-pill--selected":a.isActive}],disabled:n.disabled,kind:a.buttonKind,size:n.size,"data-qa":`dt-filter-pill__button`,importance:`outlined`,onClick:a.openPopover,onKeydown:(0,m.withKeys)((0,m.withModifiers)(a.openPopover,[`prevent`]),[`up`,`down`])}),(0,m.createSlots)({default:(0,m.withCtx)(()=>[(0,m.createElementVNode)(`span`,{class:(0,m.normalizeClass)([`d-filter-pill__label`,n.labelClass])},[(0,m.renderSlot)(e.$slots,`default`,{label:n.label,filters:i.filters,activeFilters:a.activeFilters,activeFilterList:a.activeFilterList,activeFilterOverflow:a.activeFilterOverflow},()=>[(0,m.createElementVNode)(`span`,{class:`d-filter-pill__label-start`,title:n.label,textContent:(0,m.toDisplayString)(n.label)},null,8,_),a.activeFilterList?((0,m.openBlock)(),(0,m.createElementBlock)(`span`,{key:0,class:`d-filter-pill__label-end`,title:a.activeFilterList,textContent:(0,m.toDisplayString)(a.activeFilterList)},null,8,v)):(0,m.createCommentVNode)(``,!0),a.activeFilterOverflow?((0,m.openBlock)(),(0,m.createElementBlock)(`span`,{key:1,class:`d-filter-pill__label-end-overflow`,title:`plus ${a.activeFilters.length-1} others`,textContent:(0,m.toDisplayString)(a.activeFilterOverflow)},null,8,y)):(0,m.createCommentVNode)(``,!0)])],2)]),_:2},[e.$slots.startIcon?{name:`startIcon`,fn:(0,m.withCtx)(({iconSize:t})=>[(0,m.renderSlot)(e.$slots,`startIcon`,{iconSize:t})]),key:`0`}:void 0,n.readOnly?void 0:{name:`endIcon`,fn:(0,m.withCtx)(({iconSize:e})=>[(0,m.createVNode)(o,{size:e,class:`d-filter-pill__icon`,"data-qa":`dt-filter-pill__icon`},null,8,[`size`])]),key:`1`}]),1040,[`active`,`aria-disabled`,`class`,`disabled`,`kind`,`size`,`onClick`,`onKeydown`])),[[p,a.resolvedStartTooltipText]])]),_:2},[n.useDropdown?void 0:{name:`content`,fn:(0,m.withCtx)(({close:t})=>[(0,m.renderSlot)(e.$slots,`content`,{close:t,apply:a.applySelection,cancel:a.cancelSelection,pendingFilters:i.pendingFilters},()=>[n.modelValue?.length?((0,m.openBlock)(),(0,m.createBlock)(l,{key:0,"model-value":n.deferSelection?a.pendingActiveFilters:a.activeFilters,"aria-label":n.label,name:n.label||`filter-pill`},{default:(0,m.withCtx)(()=>[((0,m.openBlock)(!0),(0,m.createElementBlock)(m.Fragment,null,(0,m.renderList)(a.displayFilters,e=>((0,m.openBlock)(),(0,m.createBlock)(c,{key:e.name,label:e.name,value:e.name,"onUpdate:modelValue":t=>e.active=t},null,8,[`label`,`value`,`onUpdate:modelValue`]))),128))]),_:1},8,[`model-value`,`aria-label`,`name`])):(0,m.createCommentVNode)(``,!0)])]),key:`0`},!n.useDropdown&&e.$slots.headerContent?{name:`headerContent`,fn:(0,m.withCtx)(({close:t})=>[(0,m.renderSlot)(e.$slots,`headerContent`,{close:t})]),key:`1`}:void 0,!n.useDropdown&&(n.deferSelection||e.$slots.footerContent)?{name:`footerContent`,fn:(0,m.withCtx)(({close:t})=>[(0,m.renderSlot)(e.$slots,`footerContent`,{close:t,apply:a.applySelection,cancel:a.cancelSelection},()=>[n.deferSelection?((0,m.openBlock)(),(0,m.createBlock)(u,{key:0,direction:`row`,gap:`400`,justify:`end`,"data-qa":`dt-filter-pill__deferred-footer`},{default:(0,m.withCtx)(()=>[(0,m.createVNode)(s,{importance:`clear`,kind:`muted`,size:200,"data-qa":`dt-filter-pill__cancel-button`,onClick:a.cancelSelection},{default:(0,m.withCtx)(()=>[(0,m.createTextVNode)((0,m.toDisplayString)(a.cancelButtonLabel),1)]),_:1},8,[`onClick`]),(0,m.createVNode)(s,{importance:`primary`,size:200,"data-qa":`dt-filter-pill__apply-button`,onClick:a.applySelection},{default:(0,m.withCtx)(()=>[(0,m.createTextVNode)((0,m.toDisplayString)(a.applyButtonLabel),1)]),_:1},8,[`onClick`])]),_:1})):(0,m.createCommentVNode)(``,!0)])]),key:`2`}:void 0,n.useDropdown?{name:`list`,fn:(0,m.withCtx)(({close:t})=>[(0,m.renderSlot)(e.$slots,`content`,{close:t},()=>[((0,m.openBlock)(!0),(0,m.createElementBlock)(m.Fragment,null,(0,m.renderList)(i.filters,e=>((0,m.openBlock)(),(0,m.createBlock)(d,{key:e.name,role:`menuitem`,"navigation-type":`arrow-keys`,selected:e.active,onClick:n=>a.selectFilter(e,t)},{default:(0,m.withCtx)(()=>[(0,m.createTextVNode)((0,m.toDisplayString)(e.name),1)]),_:2},1032,[`selected`,`onClick`]))),128))])]),key:`3`}:void 0]),1040,[`open`,`content-mode`])),a.hasClear?(0,m.withDirectives)(((0,m.openBlock)(),(0,m.createBlock)(s,{key:0,active:a.isActive,"aria-label":a.clearButtonAriaLabel,class:(0,m.normalizeClass)([`d-filter-pill__clear`,{"d-filter-pill__clear--selected":a.isActive}]),disabled:n.disabled,kind:a.buttonKind,size:n.size,title:a.clearButtonTitle,"data-qa":`dt-filter-pill__clear-button`,importance:`outlined`,onClick:a.clearFilter},{icon:(0,m.withCtx)(()=>[(0,m.createVNode)(f,{size:a.clearIconSize},null,8,[`size`])]),_:1},8,[`active`,`aria-label`,`class`,`disabled`,`kind`,`size`,`title`,`onClick`])),[[p,n.endTooltipText]]):(0,m.createCommentVNode)(``,!0)],2)}var x=n.t(g,[[`render`,b]]);exports.default=x;
 //# sourceMappingURL=filter-pill.cjs.map