@dialpad/dialtone-vue 2.152.0 → 2.153.0

package/dist/lib/top-banner-info.cjs

@@ -1,16 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
-const COLOR_CODES = [
-  "green300",
-  "green100",
-  "red200",
-  "red100",
-  "gold100",
-  "gold200",
-  "black100",
-  "white"
-];
+const COLOR_CODES = ["green300", "green100", "red200", "red100", "gold100", "gold200", "black100", "white"];
 const _sfc_main = {
   name: "DtRecipeTopBannerInfo",
   props: {
@@ -45,19 +36,25 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "dt-top-banner-info", class: _vm.bannerInfoClass, attrs: { "data-qa": "banner-info" } }, [_c("div", { staticClass: "dt-top-banner-info__left" }, [_vm._t("left")], 2), _c("div", { staticClass: "dt-top-banner-info__middle", attrs: { "data-qa": "banner-info--middle" } }, [_vm._t("default")], 2), _c("div", { staticClass: "dt-top-banner-info__right" }, [_vm._t("right")], 2)]);
+  return _c("div", {
+    staticClass: "dt-top-banner-info",
+    class: _vm.bannerInfoClass,
+    attrs: {
+      "data-qa": "banner-info"
+    }
+  }, [_c("div", {
+    staticClass: "dt-top-banner-info__left"
+  }, [_vm._t("left")], 2), _c("div", {
+    staticClass: "dt-top-banner-info__middle",
+    attrs: {
+      "data-qa": "banner-info--middle"
+    }
+  }, [_vm._t("default")], 2), _c("div", {
+    staticClass: "dt-top-banner-info__right"
+  }, [_vm._t("right")], 2)]);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const top_banner_info = __component__.exports;
 exports.COLOR_CODES = COLOR_CODES;
 exports.DtRecipeTopBannerInfo = top_banner_info;

package/dist/lib/top-banner-info.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"top-banner-info.cjs","sources":["../../recipes/notices/top_banner_info/top_banner_info_constants.js","../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["export const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100',\n  'gold200', 'black100', 'white'];\n\nexport default {\n  COLOR_CODES,\n};\n","<template>\n  <div\n    class=\"dt-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"dt-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"dt-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"dt-top-banner-info__right\">\n      <slot name=\"right\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n  name: 'DtRecipeTopBannerInfo',\n\n  props: {\n    /**\n     * color of the banner background\n     */\n    colorCode: {\n      type: String,\n      default: 'green300',\n      validator: function (kind) {\n        return COLOR_CODES.includes(kind);\n      },\n    },\n  },\n\n  computed: {\n    bannerInfoClass () {\n      const bgColors = {\n        // these are too specific, so for now I'm at least updating the resultant semantic value\n        // TODO: breaking change: update to be more abstract\n        green300: 'd-bgc-success',\n        green100: 'd-bgc-success',\n        red200: 'd-bgc-critical',\n        red100: 'd-bgc-critical',\n        gold200: 'd-bgc-warning',\n        gold100: 'd-bgc-warning',\n        black100: 'd-bgc-info',\n        white: 'd-bgc-primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-top-banner-info {\n  font-size: var(--dt-font-size-100);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--dt-color-foreground-primary);\n\n   &__left {\n     margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);\n     min-width: 20%;\n  }\n  &__middle {\n     display: flex;\n     align-items: center;\n     gap: var(--dt-size-300);\n     margin-top: var(--dt-space-300);\n    margin-bottom: var(--dt-space-300);\n  }\n  &__right {\n     display: flex;\n     align-items: baseline;\n     justify-content: flex-end;\n     gap: var(--dt-size-300);\n     margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;\n     min-width: 20%;\n     text-align: right;\n  }\n}\n</style>\n"],"names":[],"mappings":";;;AAAY,MAAC,cAAc;AAAA,EAAC;AAAA,EAAY;AAAA,EAAY;AAAA,EAAU;AAAA,EAAU;AAAA,EACtE;AAAA,EAAW;AAAA,EAAY;AAAO;ACyBhC,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,SAAA,MAAA;AACA,eAAA,YAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,kBAAA;AACA,YAAA,WAAA;AAAA;AAAA;AAAA,QAGA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,UAAA;AAAA,QACA,OAAA;AAAA,MACA;AACA,aAAA,CAAA,SAAA,KAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"top-banner-info.cjs","sources":["../../recipes/notices/top_banner_info/top_banner_info_constants.js","../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["export const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100',\n  'gold200', 'black100', 'white'];\n\nexport default {\n  COLOR_CODES,\n};\n","<template>\n  <div\n    class=\"dt-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"dt-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"dt-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"dt-top-banner-info__right\">\n      <slot name=\"right\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n  name: 'DtRecipeTopBannerInfo',\n\n  props: {\n    /**\n     * color of the banner background\n     */\n    colorCode: {\n      type: String,\n      default: 'green300',\n      validator: function (kind) {\n        return COLOR_CODES.includes(kind);\n      },\n    },\n  },\n\n  computed: {\n    bannerInfoClass () {\n      const bgColors = {\n        // these are too specific, so for now I'm at least updating the resultant semantic value\n        // TODO: breaking change: update to be more abstract\n        green300: 'd-bgc-success',\n        green100: 'd-bgc-success',\n        red200: 'd-bgc-critical',\n        red100: 'd-bgc-critical',\n        gold200: 'd-bgc-warning',\n        gold100: 'd-bgc-warning',\n        black100: 'd-bgc-info',\n        white: 'd-bgc-primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-top-banner-info {\n  font-size: var(--dt-font-size-100);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--dt-color-foreground-primary);\n\n   &__left {\n     margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);\n     min-width: 20%;\n  }\n  &__middle {\n     display: flex;\n     align-items: center;\n     gap: var(--dt-size-300);\n     margin-top: var(--dt-space-300);\n    margin-bottom: var(--dt-space-300);\n  }\n  &__right {\n     display: flex;\n     align-items: baseline;\n     justify-content: flex-end;\n     gap: var(--dt-size-300);\n     margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;\n     min-width: 20%;\n     text-align: right;\n  }\n}\n</style>\n"],"names":["COLOR_CODES","_sfc_main","name","props","colorCode","type","String","default","validator","kind","includes","computed","bannerInfoClass","bgColors","green300","green100","red200","red100","gold200","gold100","black100","white"],"mappings":";;;MAAaA,cAAc,CAAC,YAAY,YAAY,UAAU,UAAU,WACtE,WAAW,YAAY,OAAO;ACyBhC,MAAAC,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAC,WAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,SAAA;AAAA,MACAC,WAAA,SAAAC,MAAA;AACA,eAAAT,YAAAU,SAAAD,IAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEAE,UAAA;AAAA,IACAC,kBAAA;AACA,YAAAC,WAAA;AAAA;AAAA;AAAA,QAGAC,UAAA;AAAA,QACAC,UAAA;AAAA,QACAC,QAAA;AAAA,QACAC,QAAA;AAAA,QACAC,SAAA;AAAA,QACAC,SAAA;AAAA,QACAC,UAAA;AAAA,QACAC,OAAA;AAAA;AAEA,aAAA,CAAAR,SAAA,KAAAT,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/top-banner-info.js

@@ -1,14 +1,5 @@
 import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
-const COLOR_CODES = [
-  "green300",
-  "green100",
-  "red200",
-  "red100",
-  "gold100",
-  "gold200",
-  "black100",
-  "white"
-];
+const COLOR_CODES = ["green300", "green100", "red200", "red100", "gold100", "gold200", "black100", "white"];
 const _sfc_main = {
   name: "DtRecipeTopBannerInfo",
   props: {
@@ -43,19 +34,25 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "dt-top-banner-info", class: _vm.bannerInfoClass, attrs: { "data-qa": "banner-info" } }, [_c("div", { staticClass: "dt-top-banner-info__left" }, [_vm._t("left")], 2), _c("div", { staticClass: "dt-top-banner-info__middle", attrs: { "data-qa": "banner-info--middle" } }, [_vm._t("default")], 2), _c("div", { staticClass: "dt-top-banner-info__right" }, [_vm._t("right")], 2)]);
+  return _c("div", {
+    staticClass: "dt-top-banner-info",
+    class: _vm.bannerInfoClass,
+    attrs: {
+      "data-qa": "banner-info"
+    }
+  }, [_c("div", {
+    staticClass: "dt-top-banner-info__left"
+  }, [_vm._t("left")], 2), _c("div", {
+    staticClass: "dt-top-banner-info__middle",
+    attrs: {
+      "data-qa": "banner-info--middle"
+    }
+  }, [_vm._t("default")], 2), _c("div", {
+    staticClass: "dt-top-banner-info__right"
+  }, [_vm._t("right")], 2)]);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const top_banner_info = __component__.exports;
 export {
   COLOR_CODES,

package/dist/lib/top-banner-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-banner-info.js","sources":["../../recipes/notices/top_banner_info/top_banner_info_constants.js","../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["export const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100',\n  'gold200', 'black100', 'white'];\n\nexport default {\n  COLOR_CODES,\n};\n","<template>\n  <div\n    class=\"dt-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"dt-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"dt-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"dt-top-banner-info__right\">\n      <slot name=\"right\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n  name: 'DtRecipeTopBannerInfo',\n\n  props: {\n    /**\n     * color of the banner background\n     */\n    colorCode: {\n      type: String,\n      default: 'green300',\n      validator: function (kind) {\n        return COLOR_CODES.includes(kind);\n      },\n    },\n  },\n\n  computed: {\n    bannerInfoClass () {\n      const bgColors = {\n        // these are too specific, so for now I'm at least updating the resultant semantic value\n        // TODO: breaking change: update to be more abstract\n        green300: 'd-bgc-success',\n        green100: 'd-bgc-success',\n        red200: 'd-bgc-critical',\n        red100: 'd-bgc-critical',\n        gold200: 'd-bgc-warning',\n        gold100: 'd-bgc-warning',\n        black100: 'd-bgc-info',\n        white: 'd-bgc-primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-top-banner-info {\n  font-size: var(--dt-font-size-100);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--dt-color-foreground-primary);\n\n   &__left {\n     margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);\n     min-width: 20%;\n  }\n  &__middle {\n     display: flex;\n     align-items: center;\n     gap: var(--dt-size-300);\n     margin-top: var(--dt-space-300);\n    margin-bottom: var(--dt-space-300);\n  }\n  &__right {\n     display: flex;\n     align-items: baseline;\n     justify-content: flex-end;\n     gap: var(--dt-size-300);\n     margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;\n     min-width: 20%;\n     text-align: right;\n  }\n}\n</style>\n"],"names":[],"mappings":";AAAY,MAAC,cAAc;AAAA,EAAC;AAAA,EAAY;AAAA,EAAY;AAAA,EAAU;AAAA,EAAU;AAAA,EACtE;AAAA,EAAW;AAAA,EAAY;AAAO;ACyBhC,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,SAAA,MAAA;AACA,eAAA,YAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,kBAAA;AACA,YAAA,WAAA;AAAA;AAAA;AAAA,QAGA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,UAAA;AAAA,QACA,OAAA;AAAA,MACA;AACA,aAAA,CAAA,SAAA,KAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"top-banner-info.js","sources":["../../recipes/notices/top_banner_info/top_banner_info_constants.js","../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["export const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100',\n  'gold200', 'black100', 'white'];\n\nexport default {\n  COLOR_CODES,\n};\n","<template>\n  <div\n    class=\"dt-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"dt-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"dt-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"dt-top-banner-info__right\">\n      <slot name=\"right\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n  name: 'DtRecipeTopBannerInfo',\n\n  props: {\n    /**\n     * color of the banner background\n     */\n    colorCode: {\n      type: String,\n      default: 'green300',\n      validator: function (kind) {\n        return COLOR_CODES.includes(kind);\n      },\n    },\n  },\n\n  computed: {\n    bannerInfoClass () {\n      const bgColors = {\n        // these are too specific, so for now I'm at least updating the resultant semantic value\n        // TODO: breaking change: update to be more abstract\n        green300: 'd-bgc-success',\n        green100: 'd-bgc-success',\n        red200: 'd-bgc-critical',\n        red100: 'd-bgc-critical',\n        gold200: 'd-bgc-warning',\n        gold100: 'd-bgc-warning',\n        black100: 'd-bgc-info',\n        white: 'd-bgc-primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-top-banner-info {\n  font-size: var(--dt-font-size-100);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--dt-color-foreground-primary);\n\n   &__left {\n     margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);\n     min-width: 20%;\n  }\n  &__middle {\n     display: flex;\n     align-items: center;\n     gap: var(--dt-size-300);\n     margin-top: var(--dt-space-300);\n    margin-bottom: var(--dt-space-300);\n  }\n  &__right {\n     display: flex;\n     align-items: baseline;\n     justify-content: flex-end;\n     gap: var(--dt-size-300);\n     margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;\n     min-width: 20%;\n     text-align: right;\n  }\n}\n</style>\n"],"names":["COLOR_CODES","_sfc_main","name","props","colorCode","type","String","default","validator","kind","includes","computed","bannerInfoClass","bgColors","green300","green100","red200","red100","gold200","gold100","black100","white"],"mappings":";MAAaA,cAAc,CAAC,YAAY,YAAY,UAAU,UAAU,WACtE,WAAW,YAAY,OAAO;ACyBhC,MAAAC,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAC,WAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,SAAA;AAAA,MACAC,WAAA,SAAAC,MAAA;AACA,eAAAT,YAAAU,SAAAD,IAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEAE,UAAA;AAAA,IACAC,kBAAA;AACA,YAAAC,WAAA;AAAA;AAAA;AAAA,QAGAC,UAAA;AAAA,QACAC,UAAA;AAAA,QACAC,QAAA;AAAA,QACAC,QAAA;AAAA,QACAC,SAAA;AAAA,QACAC,SAAA;AAAA,QACAC,UAAA;AAAA,QACAC,OAAA;AAAA;AAEA,aAAA,CAAAR,SAAA,KAAAT,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/unread-pill.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
 const lib_icon = require("./icon.cjs");
 require("@dialpad/dialtone-icons/vue2");
-require("../chunks/icon_constants-QYpmdE0R.js");
+require("../chunks/icon_constants-VEA0wI5C.js");
 require("@dialpad/dialtone-icons/icons.json");
 const UNREAD_PILL_DIRECTIONS = ["up", "down"];
 const UNREAD_PILL_KINDS = ["mentions", "messages"];
@@ -44,19 +44,25 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("button", _vm._g({ class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${_vm.kind}`], attrs: { "type": "button", "data-qa": "dt-leftbar-unread-pill" } }, _vm.$listeners), [_c("dt-icon", { attrs: { "name": `arrow-${_vm.direction}`, "size": "300" } }), _c("span", { attrs: { "data-qa": "dt-leftbar-unread-pill__label" } }, [_vm._t("default")], 2)], 1);
+  return _c("button", _vm._g({
+    class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${_vm.kind}`],
+    attrs: {
+      "type": "button",
+      "data-qa": "dt-leftbar-unread-pill"
+    }
+  }, _vm.$listeners), [_c("dt-icon", {
+    attrs: {
+      "name": `arrow-${_vm.direction}`,
+      "size": "300"
+    }
+  }), _c("span", {
+    attrs: {
+      "data-qa": "dt-leftbar-unread-pill__label"
+    }
+  }, [_vm._t("default")], 2)], 1);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const unread_pill = __component__.exports;
 exports.DtRecipeUnreadPill = unread_pill;
 exports.UNREAD_PILL_DIRECTIONS = UNREAD_PILL_DIRECTIONS;

package/dist/lib/unread-pill.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"unread-pill.cjs","sources":["../../recipes/leftbar/unread_pill/unread_pill_constants.js","../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["export const UNREAD_PILL_DIRECTIONS = ['up', 'down'];\nexport const UNREAD_PILL_KINDS = ['mentions', 'messages'];\n\nexport default {\n  UNREAD_PILL_DIRECTIONS,\n  UNREAD_PILL_KINDS,\n};\n","<template>\n  <button\n    :class=\"['dt-leftbar-unread-pill', `dt-leftbar-unread-pill--${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-leftbar-unread-pill\"\n    v-on=\"$listeners\"\n  >\n    <dt-icon\n      :name=\"`arrow-${direction}`\"\n      size=\"300\"\n    />\n    <span data-qa=\"dt-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n};\n</script>\n\n<style lang=\"less\">\n.dt-leftbar-unread-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);\n  gap: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n  box-shadow: var(--dt-shadow-medium);\n  border-radius: var(--dt-size-radius-pill);\n  border: none;\n  line-height: var(--dt-font-line-height-600);\n  cursor: pointer;\n\n  &--mentions {\n    font-weight: var(--dt-font-weight-bold);\n    background-color: var(--dt-theme-mention-color-background);\n    color: var(--dt-theme-mention-color-foreground);\n  }\n\n  &--messages {\n    background-color: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-secondary-inverted);\n  }\n}\n</style>\n"],"names":["DtIcon"],"mappings":";;;;;;;AAAY,MAAC,yBAAyB,CAAC,MAAM,MAAM;AACvC,MAAC,oBAAoB,CAAC,YAAY,UAAU;ACmBxD,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAA,SAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAA,SAAA,kBAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAA,QAAA,uBAAA,SAAA,GAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"unread-pill.cjs","sources":["../../recipes/leftbar/unread_pill/unread_pill_constants.js","../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["export const UNREAD_PILL_DIRECTIONS = ['up', 'down'];\nexport const UNREAD_PILL_KINDS = ['mentions', 'messages'];\n\nexport default {\n  UNREAD_PILL_DIRECTIONS,\n  UNREAD_PILL_KINDS,\n};\n","<template>\n  <button\n    :class=\"['dt-leftbar-unread-pill', `dt-leftbar-unread-pill--${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-leftbar-unread-pill\"\n    v-on=\"$listeners\"\n  >\n    <dt-icon\n      :name=\"`arrow-${direction}`\"\n      size=\"300\"\n    />\n    <span data-qa=\"dt-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n};\n</script>\n\n<style lang=\"less\">\n.dt-leftbar-unread-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);\n  gap: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n  box-shadow: var(--dt-shadow-medium);\n  border-radius: var(--dt-size-radius-pill);\n  border: none;\n  line-height: var(--dt-font-line-height-600);\n  cursor: pointer;\n\n  &--mentions {\n    font-weight: var(--dt-font-weight-bold);\n    background-color: var(--dt-theme-mention-color-background);\n    color: var(--dt-theme-mention-color-foreground);\n  }\n\n  &--messages {\n    background-color: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-secondary-inverted);\n  }\n}\n</style>\n"],"names":["UNREAD_PILL_DIRECTIONS","UNREAD_PILL_KINDS","_sfc_main","name","components","DtIcon","props","kind","type","String","required","validator","includes","direction","dir","emits"],"mappings":";;;;;;;MAAaA,yBAAyB,CAAC,MAAM,MAAM;MACtCC,oBAAoB,CAAC,YAAY,UAAU;ACmBxD,MAAAC,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,YAAA;AAAA,IACAC,QAAAA,SAAAA;AAAAA,EACA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKAC,MAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,UAAA;AAAA,MACAC,WAAAJ,UAAAN,kBAAAW,SAAAL,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAM,WAAA;AAAA,MACAL,MAAAC;AAAAA,MACAC,UAAA;AAAA,MACAC,WAAAG,SAAAd,uBAAAY,SAAAE,GAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EAAA;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/unread-pill.js

@@ -1,7 +1,7 @@
 import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
 import { DtIcon } from "./icon.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-TdxqLsS2.js";
 import "@dialpad/dialtone-icons/icons.json";
 const UNREAD_PILL_DIRECTIONS = ["up", "down"];
 const UNREAD_PILL_KINDS = ["mentions", "messages"];
@@ -42,19 +42,25 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("button", _vm._g({ class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${_vm.kind}`], attrs: { "type": "button", "data-qa": "dt-leftbar-unread-pill" } }, _vm.$listeners), [_c("dt-icon", { attrs: { "name": `arrow-${_vm.direction}`, "size": "300" } }), _c("span", { attrs: { "data-qa": "dt-leftbar-unread-pill__label" } }, [_vm._t("default")], 2)], 1);
+  return _c("button", _vm._g({
+    class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${_vm.kind}`],
+    attrs: {
+      "type": "button",
+      "data-qa": "dt-leftbar-unread-pill"
+    }
+  }, _vm.$listeners), [_c("dt-icon", {
+    attrs: {
+      "name": `arrow-${_vm.direction}`,
+      "size": "300"
+    }
+  }), _c("span", {
+    attrs: {
+      "data-qa": "dt-leftbar-unread-pill__label"
+    }
+  }, [_vm._t("default")], 2)], 1);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const unread_pill = __component__.exports;
 export {
   unread_pill as DtRecipeUnreadPill,

package/dist/lib/unread-pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"unread-pill.js","sources":["../../recipes/leftbar/unread_pill/unread_pill_constants.js","../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["export const UNREAD_PILL_DIRECTIONS = ['up', 'down'];\nexport const UNREAD_PILL_KINDS = ['mentions', 'messages'];\n\nexport default {\n  UNREAD_PILL_DIRECTIONS,\n  UNREAD_PILL_KINDS,\n};\n","<template>\n  <button\n    :class=\"['dt-leftbar-unread-pill', `dt-leftbar-unread-pill--${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-leftbar-unread-pill\"\n    v-on=\"$listeners\"\n  >\n    <dt-icon\n      :name=\"`arrow-${direction}`\"\n      size=\"300\"\n    />\n    <span data-qa=\"dt-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n};\n</script>\n\n<style lang=\"less\">\n.dt-leftbar-unread-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);\n  gap: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n  box-shadow: var(--dt-shadow-medium);\n  border-radius: var(--dt-size-radius-pill);\n  border: none;\n  line-height: var(--dt-font-line-height-600);\n  cursor: pointer;\n\n  &--mentions {\n    font-weight: var(--dt-font-weight-bold);\n    background-color: var(--dt-theme-mention-color-background);\n    color: var(--dt-theme-mention-color-foreground);\n  }\n\n  &--messages {\n    background-color: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-secondary-inverted);\n  }\n}\n</style>\n"],"names":[],"mappings":";;;;;AAAY,MAAC,yBAAyB,CAAC,MAAM,MAAM;AACvC,MAAC,oBAAoB,CAAC,YAAY,UAAU;ACmBxD,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAA,SAAA,kBAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAA,QAAA,uBAAA,SAAA,GAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"unread-pill.js","sources":["../../recipes/leftbar/unread_pill/unread_pill_constants.js","../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["export const UNREAD_PILL_DIRECTIONS = ['up', 'down'];\nexport const UNREAD_PILL_KINDS = ['mentions', 'messages'];\n\nexport default {\n  UNREAD_PILL_DIRECTIONS,\n  UNREAD_PILL_KINDS,\n};\n","<template>\n  <button\n    :class=\"['dt-leftbar-unread-pill', `dt-leftbar-unread-pill--${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-leftbar-unread-pill\"\n    v-on=\"$listeners\"\n  >\n    <dt-icon\n      :name=\"`arrow-${direction}`\"\n      size=\"300\"\n    />\n    <span data-qa=\"dt-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n};\n</script>\n\n<style lang=\"less\">\n.dt-leftbar-unread-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);\n  gap: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n  box-shadow: var(--dt-shadow-medium);\n  border-radius: var(--dt-size-radius-pill);\n  border: none;\n  line-height: var(--dt-font-line-height-600);\n  cursor: pointer;\n\n  &--mentions {\n    font-weight: var(--dt-font-weight-bold);\n    background-color: var(--dt-theme-mention-color-background);\n    color: var(--dt-theme-mention-color-foreground);\n  }\n\n  &--messages {\n    background-color: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-secondary-inverted);\n  }\n}\n</style>\n"],"names":["UNREAD_PILL_DIRECTIONS","UNREAD_PILL_KINDS","_sfc_main","name","components","DtIcon","props","kind","type","String","required","validator","includes","direction","dir","emits"],"mappings":";;;;;MAAaA,yBAAyB,CAAC,MAAM,MAAM;MACtCC,oBAAoB,CAAC,YAAY,UAAU;ACmBxD,MAAAC,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,YAAA;AAAA,IACAC;AAAAA,EACA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKAC,MAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,UAAA;AAAA,MACAC,WAAAJ,UAAAN,kBAAAW,SAAAL,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAM,WAAA;AAAA,MACAL,MAAAC;AAAAA,MACAC,UAAA;AAAA,MACAC,WAAAG,SAAAd,uBAAAY,SAAAE,GAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EAAA;AAEA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/validation-messages.cjs

@@ -62,25 +62,32 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _vm.showMessages && !_vm.isFilteredValidationMessagesEmpty ? _c("div", { staticClass: "base-input__messages d-validation-message__container", attrs: { "data-qa": "validation-messages-container" } }, _vm._l(_vm.filteredValidationMessages, function({ message, type }, index) {
-    return _c("div", { key: _vm.getMessageKey(type, index), class: [
-      "base-input__message",
-      "d-validation-message",
-      _vm.messageTypeClass(type)
-    ], attrs: { "role": "status", "aria-live": "polite", "data-qa": "validation-message" } }, [_c("p", { domProps: { "innerHTML": _vm._s(message) } })]);
+  return _vm.showMessages && !_vm.isFilteredValidationMessagesEmpty ? _c("div", {
+    staticClass: "base-input__messages d-validation-message__container",
+    attrs: {
+      "data-qa": "validation-messages-container"
+    }
+  }, _vm._l(_vm.filteredValidationMessages, function({
+    message,
+    type
+  }, index) {
+    return _c("div", {
+      key: _vm.getMessageKey(type, index),
+      class: ["base-input__message", "d-validation-message", _vm.messageTypeClass(type)],
+      attrs: {
+        "role": "status",
+        "aria-live": "polite",
+        "data-qa": "validation-message"
+      }
+    }, [_c("p", {
+      domProps: {
+        "innerHTML": _vm._s(message)
+      }
+    })]);
   }), 0) : _vm._e();
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const DtValidationMessages = __component__.exports;
 exports.DtValidationMessages = DtValidationMessages;
 //# sourceMappingURL=validation-messages.cjs.map

package/dist/lib/validation-messages.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"validation-messages.cjs","sources":["../../components/validation_messages/validation_messages.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"showMessages && !isFilteredValidationMessagesEmpty\"\n    class=\"base-input__messages d-validation-message__container\"\n    data-qa=\"validation-messages-container\"\n  >\n    <div\n      v-for=\"({ message, type }, index) in filteredValidationMessages\"\n      :key=\"getMessageKey(type, index)\"\n      role=\"status\"\n      aria-live=\"polite\"\n      data-qa=\"validation-message\"\n      :class=\"[\n        'base-input__message',\n        'd-validation-message',\n        messageTypeClass(type),\n      ]\"\n    >\n      <p v-html=\"message\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  getUniqueString,\n  filterFormattedMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * Validation messages are used to convey information to the user about the current state of the input element.\n * These messages can have an error, warning or success type.\n * @see https://dialtone.dialpad.com/components/validation_messages.html\n */\nexport default {\n  name: 'DtValidationMessages',\n\n  props: {\n    /**\n     * The id of the validation message\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * Array of validation messages. Each message has the following structure:\n     * `{ message: \"Some informative message\", type: \"error|warning|success\"}`\n     */\n    validationMessages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show Validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  computed: {\n    isFilteredValidationMessagesEmpty () {\n      return this.filteredValidationMessages.length === 0;\n    },\n\n    filteredValidationMessages () {\n      return filterFormattedMessages(this.validationMessages);\n    },\n\n    validationState () {\n      return getValidationState(this.validationMessages);\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `validation-message-${type}-${index}-${this.id}`;\n    },\n\n    messageTypeClass (type) {\n      const messageTypesClasses = {\n        error: 'base-input__message--error d-validation-message--error',\n        warning: 'base-input__message--warning d-validation-message--warning',\n        success: 'base-input__message--success d-validation-message--success',\n      };\n\n      return messageTypesClasses[type];\n    },\n  },\n};\n</script>\n"],"names":["getUniqueString","validationMessageValidator","filterFormattedMessages","getValidationState"],"mappings":";;;;;;;AAoCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AACA,eAAAA,aAAA,gBAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,cAAAC,kBAAA,2BAAA,QAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,oCAAA;AACA,aAAA,KAAA,2BAAA,WAAA;AAAA,IACA;AAAA,IAEA,6BAAA;AACA,aAAAC,aAAA,wBAAA,KAAA,kBAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAAC,aAAA,mBAAA,KAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,cAAA,MAAA,OAAA;AACA,aAAA,sBAAA,IAAA,IAAA,KAAA,IAAA,KAAA,EAAA;AAAA,IACA;AAAA,IAEA,iBAAA,MAAA;AACA,YAAA,sBAAA;AAAA,QACA,OAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,MACA;AAEA,aAAA,oBAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"validation-messages.cjs","sources":["../../components/validation_messages/validation_messages.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"showMessages && !isFilteredValidationMessagesEmpty\"\n    class=\"base-input__messages d-validation-message__container\"\n    data-qa=\"validation-messages-container\"\n  >\n    <div\n      v-for=\"({ message, type }, index) in filteredValidationMessages\"\n      :key=\"getMessageKey(type, index)\"\n      role=\"status\"\n      aria-live=\"polite\"\n      data-qa=\"validation-message\"\n      :class=\"[\n        'base-input__message',\n        'd-validation-message',\n        messageTypeClass(type),\n      ]\"\n    >\n      <p v-html=\"message\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  getUniqueString,\n  filterFormattedMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * Validation messages are used to convey information to the user about the current state of the input element.\n * These messages can have an error, warning or success type.\n * @see https://dialtone.dialpad.com/components/validation_messages.html\n */\nexport default {\n  name: 'DtValidationMessages',\n\n  props: {\n    /**\n     * The id of the validation message\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * Array of validation messages. Each message has the following structure:\n     * `{ message: \"Some informative message\", type: \"error|warning|success\"}`\n     */\n    validationMessages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show Validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  computed: {\n    isFilteredValidationMessagesEmpty () {\n      return this.filteredValidationMessages.length === 0;\n    },\n\n    filteredValidationMessages () {\n      return filterFormattedMessages(this.validationMessages);\n    },\n\n    validationState () {\n      return getValidationState(this.validationMessages);\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `validation-message-${type}-${index}-${this.id}`;\n    },\n\n    messageTypeClass (type) {\n      const messageTypesClasses = {\n        error: 'base-input__message--error d-validation-message--error',\n        warning: 'base-input__message--warning d-validation-message--warning',\n        success: 'base-input__message--success d-validation-message--success',\n      };\n\n      return messageTypesClasses[type];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","props","id","type","String","default","getUniqueString","validationMessages","Array","validator","messages","validationMessageValidator","showMessages","Boolean","computed","isFilteredValidationMessagesEmpty","filteredValidationMessages","length","filterFormattedMessages","validationState","getValidationState","methods","getMessageKey","index","messageTypeClass","messageTypesClasses","error","warning","success"],"mappings":";;;;;;;AAoCA,MAAAA,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAC,IAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,UAAA;AACA,eAAAC,aAAA,gBAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAC,oBAAA;AAAA,MACAJ,MAAAK;AAAAA,MACAH,SAAAA,MAAA,CAAA;AAAA,MACAI,WAAAC,cAAAC,kBAAA,2BAAAD,QAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAE,cAAA;AAAA,MACAT,MAAAU;AAAAA,MACAR,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAS,UAAA;AAAA,IACAC,oCAAA;AACA,aAAA,KAAAC,2BAAAC,WAAA;AAAA,IACA;AAAA,IAEAD,6BAAA;AACA,aAAAE,aAAA,wBAAA,KAAAX,kBAAA;AAAA,IACA;AAAA,IAEAY,kBAAA;AACA,aAAAC,aAAA,mBAAA,KAAAb,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAc,SAAA;AAAA,IACAC,cAAAnB,MAAAoB,OAAA;AACA,aAAA,sBAAApB,IAAA,IAAAoB,KAAA,IAAA,KAAArB,EAAA;AAAA,IACA;AAAA,IAEAsB,iBAAArB,MAAA;AACA,YAAAsB,sBAAA;AAAA,QACAC,OAAA;AAAA,QACAC,SAAA;AAAA,QACAC,SAAA;AAAA;AAGA,aAAAH,oBAAAtB,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/validation-messages.js

@@ -60,25 +60,32 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _vm.showMessages && !_vm.isFilteredValidationMessagesEmpty ? _c("div", { staticClass: "base-input__messages d-validation-message__container", attrs: { "data-qa": "validation-messages-container" } }, _vm._l(_vm.filteredValidationMessages, function({ message, type }, index) {
-    return _c("div", { key: _vm.getMessageKey(type, index), class: [
-      "base-input__message",
-      "d-validation-message",
-      _vm.messageTypeClass(type)
-    ], attrs: { "role": "status", "aria-live": "polite", "data-qa": "validation-message" } }, [_c("p", { domProps: { "innerHTML": _vm._s(message) } })]);
+  return _vm.showMessages && !_vm.isFilteredValidationMessagesEmpty ? _c("div", {
+    staticClass: "base-input__messages d-validation-message__container",
+    attrs: {
+      "data-qa": "validation-messages-container"
+    }
+  }, _vm._l(_vm.filteredValidationMessages, function({
+    message,
+    type
+  }, index) {
+    return _c("div", {
+      key: _vm.getMessageKey(type, index),
+      class: ["base-input__message", "d-validation-message", _vm.messageTypeClass(type)],
+      attrs: {
+        "role": "status",
+        "aria-live": "polite",
+        "data-qa": "validation-message"
+      }
+    }, [_c("p", {
+      domProps: {
+        "innerHTML": _vm._s(message)
+      }
+    })]);
   }), 0) : _vm._e();
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const DtValidationMessages = __component__.exports;
 export {
   DtValidationMessages

package/dist/lib/validation-messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"validation-messages.js","sources":["../../components/validation_messages/validation_messages.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"showMessages && !isFilteredValidationMessagesEmpty\"\n    class=\"base-input__messages d-validation-message__container\"\n    data-qa=\"validation-messages-container\"\n  >\n    <div\n      v-for=\"({ message, type }, index) in filteredValidationMessages\"\n      :key=\"getMessageKey(type, index)\"\n      role=\"status\"\n      aria-live=\"polite\"\n      data-qa=\"validation-message\"\n      :class=\"[\n        'base-input__message',\n        'd-validation-message',\n        messageTypeClass(type),\n      ]\"\n    >\n      <p v-html=\"message\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  getUniqueString,\n  filterFormattedMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * Validation messages are used to convey information to the user about the current state of the input element.\n * These messages can have an error, warning or success type.\n * @see https://dialtone.dialpad.com/components/validation_messages.html\n */\nexport default {\n  name: 'DtValidationMessages',\n\n  props: {\n    /**\n     * The id of the validation message\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * Array of validation messages. Each message has the following structure:\n     * `{ message: \"Some informative message\", type: \"error|warning|success\"}`\n     */\n    validationMessages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show Validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  computed: {\n    isFilteredValidationMessagesEmpty () {\n      return this.filteredValidationMessages.length === 0;\n    },\n\n    filteredValidationMessages () {\n      return filterFormattedMessages(this.validationMessages);\n    },\n\n    validationState () {\n      return getValidationState(this.validationMessages);\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `validation-message-${type}-${index}-${this.id}`;\n    },\n\n    messageTypeClass (type) {\n      const messageTypesClasses = {\n        error: 'base-input__message--error d-validation-message--error',\n        warning: 'base-input__message--warning d-validation-message--warning',\n        success: 'base-input__message--success d-validation-message--success',\n      };\n\n      return messageTypesClasses[type];\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;AAoCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AACA,eAAA,gBAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,cAAA,2BAAA,QAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,oCAAA;AACA,aAAA,KAAA,2BAAA,WAAA;AAAA,IACA;AAAA,IAEA,6BAAA;AACA,aAAA,wBAAA,KAAA,kBAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,mBAAA,KAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,cAAA,MAAA,OAAA;AACA,aAAA,sBAAA,IAAA,IAAA,KAAA,IAAA,KAAA,EAAA;AAAA,IACA;AAAA,IAEA,iBAAA,MAAA;AACA,YAAA,sBAAA;AAAA,QACA,OAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,MACA;AAEA,aAAA,oBAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"validation-messages.js","sources":["../../components/validation_messages/validation_messages.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"showMessages && !isFilteredValidationMessagesEmpty\"\n    class=\"base-input__messages d-validation-message__container\"\n    data-qa=\"validation-messages-container\"\n  >\n    <div\n      v-for=\"({ message, type }, index) in filteredValidationMessages\"\n      :key=\"getMessageKey(type, index)\"\n      role=\"status\"\n      aria-live=\"polite\"\n      data-qa=\"validation-message\"\n      :class=\"[\n        'base-input__message',\n        'd-validation-message',\n        messageTypeClass(type),\n      ]\"\n    >\n      <p v-html=\"message\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  getUniqueString,\n  filterFormattedMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * Validation messages are used to convey information to the user about the current state of the input element.\n * These messages can have an error, warning or success type.\n * @see https://dialtone.dialpad.com/components/validation_messages.html\n */\nexport default {\n  name: 'DtValidationMessages',\n\n  props: {\n    /**\n     * The id of the validation message\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * Array of validation messages. Each message has the following structure:\n     * `{ message: \"Some informative message\", type: \"error|warning|success\"}`\n     */\n    validationMessages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show Validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  computed: {\n    isFilteredValidationMessagesEmpty () {\n      return this.filteredValidationMessages.length === 0;\n    },\n\n    filteredValidationMessages () {\n      return filterFormattedMessages(this.validationMessages);\n    },\n\n    validationState () {\n      return getValidationState(this.validationMessages);\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `validation-message-${type}-${index}-${this.id}`;\n    },\n\n    messageTypeClass (type) {\n      const messageTypesClasses = {\n        error: 'base-input__message--error d-validation-message--error',\n        warning: 'base-input__message--warning d-validation-message--warning',\n        success: 'base-input__message--success d-validation-message--success',\n      };\n\n      return messageTypesClasses[type];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","props","id","type","String","default","getUniqueString","validationMessages","Array","validator","messages","validationMessageValidator","showMessages","Boolean","computed","isFilteredValidationMessagesEmpty","filteredValidationMessages","length","filterFormattedMessages","validationState","getValidationState","methods","getMessageKey","index","messageTypeClass","messageTypesClasses","error","warning","success"],"mappings":";;;;;AAoCA,MAAAA,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAC,IAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,UAAA;AACA,eAAAC,gBAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAC,oBAAA;AAAA,MACAJ,MAAAK;AAAAA,MACAH,SAAAA,MAAA,CAAA;AAAA,MACAI,WAAAC,cAAAC,2BAAAD,QAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAE,cAAA;AAAA,MACAT,MAAAU;AAAAA,MACAR,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAS,UAAA;AAAA,IACAC,oCAAA;AACA,aAAA,KAAAC,2BAAAC,WAAA;AAAA,IACA;AAAA,IAEAD,6BAAA;AACA,aAAAE,wBAAA,KAAAX,kBAAA;AAAA,IACA;AAAA,IAEAY,kBAAA;AACA,aAAAC,mBAAA,KAAAb,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAc,SAAA;AAAA,IACAC,cAAAnB,MAAAoB,OAAA;AACA,aAAA,sBAAApB,IAAA,IAAAoB,KAAA,IAAA,KAAArB,EAAA;AAAA,IACA;AAAA,IAEAsB,iBAAArB,MAAA;AACA,YAAAsB,sBAAA;AAAA,QACAC,OAAA;AAAA,QACAC,SAAA;AAAA,QACAC,SAAA;AAAA;AAGA,aAAAH,oBAAAtB,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/style.css

@@ -132,6 +132,11 @@
 .dt-suggestion-list--item {
   border: var(--dt-size-100) solid transparent;
 }
+.mention-suggestion-name[data-v-65bcbd51] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .dt-rich-text-editor--code-block {
   background: var(--dt-color-surface-secondary);
   padding: var(--dt-space-400);