@dialpad/dialtone-vue 3.23.1 → 3.25.0

package/dist/emoji.common.js

@@ -543,7 +543,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
   "DtEmoji": () => (/* reexport */ emoji),
   "DtEmojiTextWrapper": () => (/* reexport */ emoji_text_wrapper),
-  "EMOJI_SIZES": () => (/* reexport */ EMOJI_SIZES),
+  "EMOJI_SIZES": () => (/* reexport */ emoji_constants_namespaceObject.EMOJI_SIZES),
   "codeToEmojiData": () => (/* reexport */ codeToEmojiData),
   "customEmojiAssetUrl": () => (/* reexport */ customEmojiAssetUrl),
   "defaultEmojiAssetUrl": () => (/* reexport */ defaultEmojiAssetUrl),
@@ -567,6 +567,10 @@ __webpack_require__.d(__webpack_exports__, {
   "validateCustomEmojiJson": () => (/* reexport */ validateCustomEmojiJson)
 });
 
+// NAMESPACE OBJECT: ./components/emoji/emoji_constants.js
+var emoji_constants_namespaceObject = {};
+__webpack_require__.r(emoji_constants_namespaceObject);
+
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 /* eslint-disable no-var */
 // This file is imported into lib/wc client bundles.
@@ -780,25 +784,25 @@ function findEmojis(textContent) {
 }
 ;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/emoji/emoji.vue?vue&type=template&id=a9cdd478
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/emoji/emoji.vue?vue&type=template&id=147e0534
 
 const _hoisted_1 = ["aria-label", "alt", "title", "src"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_skeleton = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-skeleton");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.skeletonSizeClass)
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.emojiSize)
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withDirectives)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_skeleton, {
     offset: 0,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.skeletonSizeClass),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.emojiSize),
     "shape-option": {
       shape: 'square',
-      contentClass: $options.skeletonSizeClass,
+      contentClass: $options.emojiSize,
       size: 'auto'
     }
   }, null, 8, ["class", "shape-option"]), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $data.imgLoading && $props.showSkeleton]]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withDirectives)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
     ref: "emojiImg",
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([$props.size, $props.imgClass]),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-icon', $options.emojiSize, $props.imgClass]),
     "aria-label": $options.emojiLabel,
     alt: $options.emojiAlt,
     title: $options.emojiLabel,
@@ -811,22 +815,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, null, 42, _hoisted_1), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, !$data.imgLoading]])], 2);
 }
-;// CONCATENATED MODULE: ./components/emoji/emoji.vue?vue&type=template&id=a9cdd478
-
-;// CONCATENATED MODULE: ./components/emoji/emoji_constants.js
-const EMOJI_SIZES = {
-  SIZE_14: 'd-svg--size14',
-  SIZE_16: 'd-svg--size16',
-  SIZE_18: 'd-svg--size18',
-  SIZE_20: 'd-svg--size20',
-  SIZE_24: 'd-svg--size24',
-  SIZE_32: 'd-svg--size32',
-  SIZE_48: 'd-svg--size48',
-  SIZE_64: 'd-svg--size64',
-  SIZE_100p: 'd-svg--size100p'
+;// CONCATENATED MODULE: ./components/emoji/emoji.vue?vue&type=template&id=147e0534
+
+;// CONCATENATED MODULE: ./components/icon/icon_constants.js
+const ICON_SIZE_MODIFIERS = {
+  100: 'd-icon--size-100',
+  200: 'd-icon--size-200',
+  300: 'd-icon--size-300',
+  400: 'd-icon--size-400',
+  500: 'd-icon--size-500',
+  600: 'd-icon--size-600',
+  700: 'd-icon--size-700',
+  800: 'd-icon--size-800'
 };
-/* harmony default export */ const emoji_constants = ({
-  EMOJI_SIZES
+/* harmony default export */ const icon_constants = ({
+  ICON_SIZE_MODIFIERS
 });
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/skeleton/skeleton.vue?vue&type=template&id=47dbc65e
 
@@ -1656,15 +1659,14 @@ const skeleton_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(skeletonv
     },
 
     /**
-     * The size of the emoji. Can be any of the svg size utility classes from
-     * <a href="https://dialpad.design/utilities/svg/size" target="_blank"> Dialpad SVG Size</a>
-     * @values d-svg--size14, d-svg--size16, d-svg--size18, d-svg--size20
-     * d-svg--size24, d-svg--size32, d-svg--size48, d-svg--size64, d-svg--size100p
+     * The size of the emoji. Can be any of the icon size utility classes from
+     * <a href="https://dialpad.design/components/icon.html" target="_blank"> Dialpad Icon Size</a>
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
      */
     size: {
       type: String,
-      default: EMOJI_SIZES.SIZE_20,
-      validator: t => Object.values(EMOJI_SIZES).includes(t)
+      default: '500',
+      validator: t => Object.keys(ICON_SIZE_MODIFIERS).includes(t)
     },
 
     /**
@@ -1722,7 +1724,7 @@ const skeleton_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(skeletonv
         return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;
       }
 
-      if (['d-svg--size14', 'd-svg--size16'].includes(this.size)) {
+      if (['100', '200'].includes(this.size)) {
         return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;
       } else {
         return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;
@@ -1745,8 +1747,8 @@ const skeleton_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(skeletonv
       return this.ariaLabel ? this.ariaLabel : this.emojiData.name;
     },
 
-    skeletonSizeClass() {
-      return this.size === 'd-svg--size100p' ? ['d-h100p', 'd-w100p'] : this.size;
+    emojiSize() {
+      return ICON_SIZE_MODIFIERS[this.size];
     }
 
   },
@@ -1789,6 +1791,8 @@ const skeleton_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(skeletonv
 const emoji_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(emojivue_type_script_lang_js, [['render',render]])
 
 /* harmony default export */ const emoji = (emoji_exports_);
+;// CONCATENATED MODULE: ./components/emoji/emoji_constants.js
+/* harmony default export */ const emoji_constants = ({});
 ;// CONCATENATED MODULE: ./components/emoji/index.js
 
 

package/dist/emoji.umd.js

@@ -553,7 +553,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
   "DtEmoji": () => (/* reexport */ emoji),
   "DtEmojiTextWrapper": () => (/* reexport */ emoji_text_wrapper),
-  "EMOJI_SIZES": () => (/* reexport */ EMOJI_SIZES),
+  "EMOJI_SIZES": () => (/* reexport */ emoji_constants_namespaceObject.EMOJI_SIZES),
   "codeToEmojiData": () => (/* reexport */ codeToEmojiData),
   "customEmojiAssetUrl": () => (/* reexport */ customEmojiAssetUrl),
   "defaultEmojiAssetUrl": () => (/* reexport */ defaultEmojiAssetUrl),
@@ -577,6 +577,10 @@ __webpack_require__.d(__webpack_exports__, {
   "validateCustomEmojiJson": () => (/* reexport */ validateCustomEmojiJson)
 });
 
+// NAMESPACE OBJECT: ./components/emoji/emoji_constants.js
+var emoji_constants_namespaceObject = {};
+__webpack_require__.r(emoji_constants_namespaceObject);
+
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 /* eslint-disable no-var */
 // This file is imported into lib/wc client bundles.
@@ -790,25 +794,25 @@ function findEmojis(textContent) {
 }
 ;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/emoji/emoji.vue?vue&type=template&id=a9cdd478
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/emoji/emoji.vue?vue&type=template&id=147e0534
 
 const _hoisted_1 = ["aria-label", "alt", "title", "src"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_skeleton = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-skeleton");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.skeletonSizeClass)
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.emojiSize)
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withDirectives)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_skeleton, {
     offset: 0,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.skeletonSizeClass),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.emojiSize),
     "shape-option": {
       shape: 'square',
-      contentClass: $options.skeletonSizeClass,
+      contentClass: $options.emojiSize,
       size: 'auto'
     }
   }, null, 8, ["class", "shape-option"]), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $data.imgLoading && $props.showSkeleton]]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withDirectives)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
     ref: "emojiImg",
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([$props.size, $props.imgClass]),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-icon', $options.emojiSize, $props.imgClass]),
     "aria-label": $options.emojiLabel,
     alt: $options.emojiAlt,
     title: $options.emojiLabel,
@@ -821,22 +825,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, null, 42, _hoisted_1), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, !$data.imgLoading]])], 2);
 }
-;// CONCATENATED MODULE: ./components/emoji/emoji.vue?vue&type=template&id=a9cdd478
-
-;// CONCATENATED MODULE: ./components/emoji/emoji_constants.js
-const EMOJI_SIZES = {
-  SIZE_14: 'd-svg--size14',
-  SIZE_16: 'd-svg--size16',
-  SIZE_18: 'd-svg--size18',
-  SIZE_20: 'd-svg--size20',
-  SIZE_24: 'd-svg--size24',
-  SIZE_32: 'd-svg--size32',
-  SIZE_48: 'd-svg--size48',
-  SIZE_64: 'd-svg--size64',
-  SIZE_100p: 'd-svg--size100p'
+;// CONCATENATED MODULE: ./components/emoji/emoji.vue?vue&type=template&id=147e0534
+
+;// CONCATENATED MODULE: ./components/icon/icon_constants.js
+const ICON_SIZE_MODIFIERS = {
+  100: 'd-icon--size-100',
+  200: 'd-icon--size-200',
+  300: 'd-icon--size-300',
+  400: 'd-icon--size-400',
+  500: 'd-icon--size-500',
+  600: 'd-icon--size-600',
+  700: 'd-icon--size-700',
+  800: 'd-icon--size-800'
 };
-/* harmony default export */ const emoji_constants = ({
-  EMOJI_SIZES
+/* harmony default export */ const icon_constants = ({
+  ICON_SIZE_MODIFIERS
 });
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/skeleton/skeleton.vue?vue&type=template&id=47dbc65e
 
@@ -1666,15 +1669,14 @@ const skeleton_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(skeletonv
     },
 
     /**
-     * The size of the emoji. Can be any of the svg size utility classes from
-     * <a href="https://dialpad.design/utilities/svg/size" target="_blank"> Dialpad SVG Size</a>
-     * @values d-svg--size14, d-svg--size16, d-svg--size18, d-svg--size20
-     * d-svg--size24, d-svg--size32, d-svg--size48, d-svg--size64, d-svg--size100p
+     * The size of the emoji. Can be any of the icon size utility classes from
+     * <a href="https://dialpad.design/components/icon.html" target="_blank"> Dialpad Icon Size</a>
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
      */
     size: {
       type: String,
-      default: EMOJI_SIZES.SIZE_20,
-      validator: t => Object.values(EMOJI_SIZES).includes(t)
+      default: '500',
+      validator: t => Object.keys(ICON_SIZE_MODIFIERS).includes(t)
     },
 
     /**
@@ -1732,7 +1734,7 @@ const skeleton_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(skeletonv
         return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;
       }
 
-      if (['d-svg--size14', 'd-svg--size16'].includes(this.size)) {
+      if (['100', '200'].includes(this.size)) {
         return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;
       } else {
         return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;
@@ -1755,8 +1757,8 @@ const skeleton_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(skeletonv
       return this.ariaLabel ? this.ariaLabel : this.emojiData.name;
     },
 
-    skeletonSizeClass() {
-      return this.size === 'd-svg--size100p' ? ['d-h100p', 'd-w100p'] : this.size;
+    emojiSize() {
+      return ICON_SIZE_MODIFIERS[this.size];
     }
 
   },
@@ -1799,6 +1801,8 @@ const skeleton_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(skeletonv
 const emoji_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(emojivue_type_script_lang_js, [['render',render]])
 
 /* harmony default export */ const emoji = (emoji_exports_);
+;// CONCATENATED MODULE: ./components/emoji/emoji_constants.js
+/* harmony default export */ const emoji_constants = ({});
 ;// CONCATENATED MODULE: ./components/emoji/index.js