@dialpad/dialtone-vue 3.120.0 → 3.120.2

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":["COLOR_CODES","_sfc_main","kind","_hoisted_1","_hoisted_3","_createElementBlock","_normalizeClass","$options","_createElementVNode","_renderSlot","_ctx","_hoisted_2"],"mappings":"oKAAaA,EAAc,CAAC,WAAY,WAAY,SAAU,SAAU,UACtE,UAAW,WAAY,OAAO,ECyB3BC,EAAU,CACb,KAAM,wBAEN,MAAO,CAIL,UAAW,CACT,KAAM,OACN,QAAS,WACT,UAAW,SAAUC,EAAM,CACzB,OAAOF,EAAY,SAASE,CAAI,CACjC,CACF,CACF,EAED,SAAU,CACR,iBAAmB,CAajB,MAAO,CAZU,CAGf,SAAU,gBACV,SAAU,gBACV,OAAQ,iBACR,OAAQ,iBACR,QAAS,gBACT,QAAS,gBACT,SAAU,aACV,MAAO,iBAEQ,KAAK,SAAS,CAAC,CACjC,CACF,CACH,EArDSC,EAAA,CAAA,MAAM,0BAA0B,KAKnC,MAAM,6BACN,UAAQ,uBAKLC,EAAA,CAAA,MAAM,2BAA2B,+CAhBxCC,EAmBM,mBAAA,MAAA,CAlBJ,MAAKC,EAAAA,eAAA,CAAC,qBACEC,EAAe,eAAA,CAAA,EACvB,UAAQ,gBAERC,EAAA,mBAEM,MAFNL,EAEM,CADJM,aAAoBC,EAAA,OAAA,MAAA,IAGtBF,EAAA,mBAKM,MALNG,EAKM,CADJF,aAAQC,EAAA,OAAA,SAAA,IAGVF,EAAA,mBAEM,MAFNJ,EAEM,CADJK,aAAqBC,EAAA,OAAA,OAAA"}
+{"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":["_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot"],"mappings":";;;;AAAY,MAAC,cAAc;AAAA,EAAC;AAAA,EAAY;AAAA,EAAY;AAAA,EAAU;AAAA,EAAU;AAAA,EACtE;AAAA,EAAW;AAAA,EAAY;AAAO;ACyBhC,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,SAAU,MAAM;AACzB,eAAO,YAAY,SAAS,IAAI;AAAA,MACjC;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,kBAAmB;AACjB,YAAM,WAAW;AAAA;AAAA;AAAA,QAGf,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,OAAO;AAAA;AAET,aAAO,CAAC,SAAS,KAAK,SAAS,CAAC;AAAA,IACjC;AAAA,EACF;AACH;AArDS,MAAA,aAAA,EAAA,OAAM,2BAA0B;;EAKnC,OAAM;AAAA,EACN,WAAQ;;AAKL,MAAA,aAAA,EAAA,OAAM,4BAA2B;;0BAhBxCA,IAmBM,mBAAA,OAAA;AAAA,IAlBJ,OAAKC,IAAAA,eAAA,CAAC,sBACE,SAAe,eAAA,CAAA;AAAA,IACvB,WAAQ;AAAA;IAERC,IAAA,mBAEM,OAFN,YAEM;AAAA,MADJC,eAAoB,KAAA,QAAA,MAAA;AAAA;IAGtBD,IAAA,mBAKM,OALN,YAKM;AAAA,MADJC,eAAQ,KAAA,QAAA,SAAA;AAAA;IAGVD,IAAA,mBAEM,OAFN,YAEM;AAAA,MADJC,eAAqB,KAAA,QAAA,OAAA;AAAA;;;;;;"}

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

@@ -1,6 +1,6 @@
-import { openBlock as t, createElementBlock as s, normalizeClass as a, createElementVNode as n, renderSlot as o } from "vue";
-import { _ as d } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-const c = [
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+const COLOR_CODES = [
   "green300",
   "green100",
   "red200",
@@ -9,7 +9,8 @@ const c = [
   "gold200",
   "black100",
   "white"
-], i = {
+];
+const _sfc_main = {
   name: "DtRecipeTopBannerInfo",
   props: {
     /**
@@ -18,14 +19,14 @@ const c = [
     colorCode: {
       type: String,
       default: "green300",
-      validator: function(e) {
-        return c.includes(e);
+      validator: function(kind) {
+        return COLOR_CODES.includes(kind);
       }
     }
   },
   computed: {
     bannerInfoClass() {
-      return [{
+      const bgColors = {
         // these are too specific, so for now I'm at least updating the resultant semantic value
         // TODO: breaking change: update to be more abstract
         green300: "d-bgc-success",
@@ -36,32 +37,36 @@ const c = [
         gold100: "d-bgc-warning",
         black100: "d-bgc-info",
         white: "d-bgc-primary"
-      }[this.colorCode]];
+      };
+      return [bgColors[this.colorCode]];
     }
   }
-}, l = { class: "dt-top-banner-info__left" }, g = {
+};
+const _hoisted_1 = { class: "dt-top-banner-info__left" };
+const _hoisted_2 = {
   class: "dt-top-banner-info__middle",
   "data-qa": "banner-info--middle"
-}, f = { class: "dt-top-banner-info__right" };
-function p(e, b, _, m, u, r) {
-  return t(), s("div", {
-    class: a(["dt-top-banner-info", r.bannerInfoClass]),
+};
+const _hoisted_3 = { class: "dt-top-banner-info__right" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["dt-top-banner-info", $options.bannerInfoClass]),
     "data-qa": "banner-info"
   }, [
-    n("div", l, [
-      o(e.$slots, "left")
+    createElementVNode("div", _hoisted_1, [
+      renderSlot(_ctx.$slots, "left")
     ]),
-    n("div", g, [
-      o(e.$slots, "default")
+    createElementVNode("div", _hoisted_2, [
+      renderSlot(_ctx.$slots, "default")
     ]),
-    n("div", f, [
-      o(e.$slots, "right")
+    createElementVNode("div", _hoisted_3, [
+      renderSlot(_ctx.$slots, "right")
     ])
   ], 2);
 }
-const $ = /* @__PURE__ */ d(i, [["render", p]]);
+const top_banner_info = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  c as COLOR_CODES,
-  $ as DtRecipeTopBannerInfo
+  COLOR_CODES,
+  top_banner_info as DtRecipeTopBannerInfo
 };
 //# sourceMappingURL=top-banner-info.js.map

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":["COLOR_CODES","_sfc_main","kind","_hoisted_1","_hoisted_3","_createElementBlock","_normalizeClass","$options","_createElementVNode","_renderSlot","_ctx","_hoisted_2"],"mappings":";;AAAY,MAACA,IAAc;AAAA,EAAC;AAAA,EAAY;AAAA,EAAY;AAAA,EAAU;AAAA,EAAU;AAAA,EACtE;AAAA,EAAW;AAAA,EAAY;AAAO,GCyB3BC,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,SAAUC,GAAM;AACzB,eAAOF,EAAY,SAASE,CAAI;AAAA,MACjC;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,kBAAmB;AAajB,aAAO,CAZU;AAAA;AAAA;AAAA,QAGf,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,OAAO;AAAA,QAEQ,KAAK,SAAS,CAAC;AAAA,IACjC;AAAA,EACF;AACH,GArDSC,IAAA,EAAA,OAAM,2BAA0B;EAKnC,OAAM;AAAA,EACN,WAAQ;GAKLC,IAAA,EAAA,OAAM,4BAA2B;;cAhBxCC,EAmBM,OAAA;AAAA,IAlBJ,OAAKC,EAAA,CAAC,sBACEC,EAAe,eAAA,CAAA;AAAA,IACvB,WAAQ;AAAA;IAERC,EAEM,OAFNL,GAEM;AAAA,MADJM,EAAoBC,EAAA,QAAA,MAAA;AAAA;IAGtBF,EAKM,OALNG,GAKM;AAAA,MADJF,EAAQC,EAAA,QAAA,SAAA;AAAA;IAGVF,EAEM,OAFNJ,GAEM;AAAA,MADJK,EAAqBC,EAAA,QAAA,OAAA;AAAA;;;;"}
+{"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":["_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot"],"mappings":";;AAAY,MAAC,cAAc;AAAA,EAAC;AAAA,EAAY;AAAA,EAAY;AAAA,EAAU;AAAA,EAAU;AAAA,EACtE;AAAA,EAAW;AAAA,EAAY;AAAO;ACyBhC,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,SAAU,MAAM;AACzB,eAAO,YAAY,SAAS,IAAI;AAAA,MACjC;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,kBAAmB;AACjB,YAAM,WAAW;AAAA;AAAA;AAAA,QAGf,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,OAAO;AAAA;AAET,aAAO,CAAC,SAAS,KAAK,SAAS,CAAC;AAAA,IACjC;AAAA,EACF;AACH;AArDS,MAAA,aAAA,EAAA,OAAM,2BAA0B;;EAKnC,OAAM;AAAA,EACN,WAAQ;;AAKL,MAAA,aAAA,EAAA,OAAM,4BAA2B;;sBAhBxCA,mBAmBM,OAAA;AAAA,IAlBJ,OAAKC,eAAA,CAAC,sBACE,SAAe,eAAA,CAAA;AAAA,IACvB,WAAQ;AAAA;IAERC,mBAEM,OAFN,YAEM;AAAA,MADJC,WAAoB,KAAA,QAAA,MAAA;AAAA;IAGtBD,mBAKM,OALN,YAKM;AAAA,MADJC,WAAQ,KAAA,QAAA,SAAA;AAAA;IAGVD,mBAEM,OAFN,YAEM;AAAA,MADJC,WAAqB,KAAA,QAAA,OAAA;AAAA;;;;"}

package/dist/lib/unread-pill.cjs

@@ -1,2 +1,74 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),a=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),c=require("./icon.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const n=["up","down"],i=["mentions","messages"],d={name:"DtRecipeUnreadPill",components:{DtIcon:c.DtIcon},props:{kind:{type:String,required:!0,validator:t=>i.includes(t)},direction:{type:String,required:!0,validator:t=>n.includes(t)}},emits:["click"],computed:{unreadChipListeners(){return{click:t=>this.$emit("click",t)}}}},s={"data-qa":"dt-leftbar-unread-pill__label"};function u(t,_,r,m,D,o){const l=e.resolveComponent("dt-icon");return e.openBlock(),e.createElementBlock("button",e.mergeProps({class:["dt-leftbar-unread-pill",`dt-leftbar-unread-pill--${r.kind}`],type:"button","data-qa":"dt-leftbar-unread-pill"},e.toHandlers(o.unreadChipListeners,!0)),[e.createVNode(l,{name:`arrow-${r.direction}`,size:"300"},null,8,["name"]),e.createElementVNode("span",s,[e.renderSlot(t.$slots,"default")])],16)}const p=a._(d,[["render",u]]);exports.DtRecipeUnreadPill=p;exports.UNREAD_PILL_DIRECTIONS=n;exports.UNREAD_PILL_KINDS=i;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+const lib_icon = require("./icon.cjs");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+const UNREAD_PILL_DIRECTIONS = ["up", "down"];
+const UNREAD_PILL_KINDS = ["mentions", "messages"];
+const _sfc_main = {
+  name: "DtRecipeUnreadPill",
+  components: {
+    DtIcon: lib_icon.DtIcon
+  },
+  props: {
+    /**
+     * The kind of unread pill which determines the styling
+     * @values 'mentions', 'messages'
+     **/
+    kind: {
+      type: String,
+      required: true,
+      validator: (kind) => UNREAD_PILL_KINDS.includes(kind)
+    },
+    /**
+     * The direction of the arrow icon
+     * @values 'up', 'down'
+     **/
+    direction: {
+      type: String,
+      required: true,
+      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir)
+    }
+  },
+  emits: [
+    /**
+     * Native click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  computed: {
+    unreadChipListeners() {
+      return {
+        click: (event) => this.$emit("click", event)
+      };
+    }
+  }
+};
+const _hoisted_1 = { "data-qa": "dt-leftbar-unread-pill__label" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  return vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+    class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${$props.kind}`],
+    type: "button",
+    "data-qa": "dt-leftbar-unread-pill"
+  }, vue.toHandlers($options.unreadChipListeners, true)), [
+    vue.createVNode(_component_dt_icon, {
+      name: `arrow-${$props.direction}`,
+      size: "300"
+    }, null, 8, ["name"]),
+    vue.createElementVNode("span", _hoisted_1, [
+      vue.renderSlot(_ctx.$slots, "default")
+    ])
+  ], 16);
+}
+const unread_pill = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.DtRecipeUnreadPill = unread_pill;
+exports.UNREAD_PILL_DIRECTIONS = UNREAD_PILL_DIRECTIONS;
+exports.UNREAD_PILL_KINDS = UNREAD_PILL_KINDS;
 //# sourceMappingURL=unread-pill.cjs.map

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=\"unreadChipListeners\"\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  computed: {\n    unreadChipListeners () {\n      return {\n        click: event => this.$emit('click', event),\n      };\n    },\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","DtIcon","kind","dir","event","_hoisted_1","_openBlock","_createElementBlock","_mergeProps","$props","_toHandlers","$options","_createVNode","_component_dt_icon","_createElementVNode","_renderSlot","_ctx"],"mappings":"kUAAY,MAACA,EAAyB,CAAC,KAAM,MAAM,EACtCC,EAAoB,CAAC,WAAY,UAAU,ECmBnDC,EAAU,CACb,KAAM,qBAEN,WAAY,CACV,OAAAC,EAAM,MACP,EAED,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,SAAU,GACV,UAAYC,GAASH,EAAkB,SAASG,CAAI,CACrD,EAMD,UAAW,CACT,KAAM,OACN,SAAU,GACV,UAAYC,GAAQL,EAAuB,SAASK,CAAG,CACxD,CACF,EAED,MAAO,CAOL,OACD,EAED,SAAU,CACR,qBAAuB,CACrB,MAAO,CACL,MAAOC,GAAS,KAAK,MAAM,QAASA,CAAK,EAE5C,CACF,CACH,EAvDUC,EAAA,CAAA,UAAQ,+BAA+B,gEAV/C,OAAAC,YAAA,EAAAC,qBAaS,SAbTC,EAAAA,WAaS,CAZN,2DAA6DC,EAAI,IAAA,EAAA,EAClE,KAAK,SACL,UAAQ,wBACR,EAAAC,EAAA,WAAMC,EAAmB,oBAAA,EAAA,CAAA,EAAA,CAEzBC,EAAAA,YAGEC,EAAA,CAFC,cAAeJ,EAAS,SAAA,GACzB,KAAK,wBAEPK,EAAA,mBAEO,OAFPT,EAEO,CADLU,aAAQC,EAAA,OAAA,SAAA"}
+{"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=\"unreadChipListeners\"\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  computed: {\n    unreadChipListeners () {\n      return {\n        click: event => this.$emit('click', event),\n      };\n    },\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","_openBlock","_createElementBlock","_mergeProps","_toHandlers","_createVNode","_createElementVNode","_renderSlot"],"mappings":";;;;;;;;AAAY,MAAC,yBAAyB,CAAC,MAAM,MAAM;AACvC,MAAC,oBAAoB,CAAC,YAAY,UAAU;ACmBxD,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAA,SAAM;AAAA,EACP;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,SAAS,kBAAkB,SAAS,IAAI;AAAA,IACrD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,QAAQ,uBAAuB,SAAS,GAAG;AAAA,IACxD;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,sBAAuB;AACrB,aAAO;AAAA,QACL,OAAO,WAAS,KAAK,MAAM,SAAS,KAAK;AAAA;IAE5C;AAAA,EACF;AACH;AAvDU,MAAA,aAAA,EAAA,WAAQ,gCAA+B;;;AAV/C,SAAAC,cAAA,GAAAC,uBAaS,UAbTC,IAAAA,WAaS;AAAA,IAZN,6DAA6D,OAAI,IAAA,EAAA;AAAA,IAClE,MAAK;AAAA,IACL,WAAQ;AAAA,EACR,GAAAC,IAAA,WAAM,SAAmB,qBAAA,IAAA,CAAA,GAAA;AAAA,IAEzBC,IAAAA,YAGE,oBAAA;AAAA,MAFC,eAAe,OAAS,SAAA;AAAA,MACzB,MAAK;AAAA;IAEPC,IAAA,mBAEO,QAFP,YAEO;AAAA,MADLC,eAAQ,KAAA,QAAA,SAAA;AAAA;;;;;;;"}

package/dist/lib/unread-pill.js

@@ -1,13 +1,15 @@
-import { resolveComponent as o, openBlock as i, createElementBlock as a, mergeProps as l, toHandlers as d, createVNode as c, createElementVNode as s, renderSlot as p } from "vue";
-import { _ as m } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { DtIcon as u } from "./icon.js";
+import { resolveComponent, openBlock, createElementBlock, mergeProps, toHandlers, createVNode, createElementVNode, renderSlot } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import { DtIcon } from "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-const _ = ["up", "down"], f = ["mentions", "messages"], b = {
+const UNREAD_PILL_DIRECTIONS = ["up", "down"];
+const UNREAD_PILL_KINDS = ["mentions", "messages"];
+const _sfc_main = {
   name: "DtRecipeUnreadPill",
   components: {
-    DtIcon: u
+    DtIcon
   },
   props: {
     /**
@@ -16,8 +18,8 @@ const _ = ["up", "down"], f = ["mentions", "messages"], b = {
      **/
     kind: {
       type: String,
-      required: !0,
-      validator: (e) => f.includes(e)
+      required: true,
+      validator: (kind) => UNREAD_PILL_KINDS.includes(kind)
     },
     /**
      * The direction of the arrow icon
@@ -25,8 +27,8 @@ const _ = ["up", "down"], f = ["mentions", "messages"], b = {
      **/
     direction: {
       type: String,
-      required: !0,
-      validator: (e) => _.includes(e)
+      required: true,
+      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir)
     }
   },
   emits: [
@@ -41,31 +43,32 @@ const _ = ["up", "down"], f = ["mentions", "messages"], b = {
   computed: {
     unreadChipListeners() {
       return {
-        click: (e) => this.$emit("click", e)
+        click: (event) => this.$emit("click", event)
       };
     }
   }
-}, k = { "data-qa": "dt-leftbar-unread-pill__label" };
-function D(e, I, t, L, N, r) {
-  const n = o("dt-icon");
-  return i(), a("button", l({
-    class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${t.kind}`],
+};
+const _hoisted_1 = { "data-qa": "dt-leftbar-unread-pill__label" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = resolveComponent("dt-icon");
+  return openBlock(), createElementBlock("button", mergeProps({
+    class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${$props.kind}`],
     type: "button",
     "data-qa": "dt-leftbar-unread-pill"
-  }, d(r.unreadChipListeners, !0)), [
-    c(n, {
-      name: `arrow-${t.direction}`,
+  }, toHandlers($options.unreadChipListeners, true)), [
+    createVNode(_component_dt_icon, {
+      name: `arrow-${$props.direction}`,
       size: "300"
     }, null, 8, ["name"]),
-    s("span", k, [
-      p(e.$slots, "default")
+    createElementVNode("span", _hoisted_1, [
+      renderSlot(_ctx.$slots, "default")
     ])
   ], 16);
 }
-const g = /* @__PURE__ */ m(b, [["render", D]]);
+const unread_pill = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  g as DtRecipeUnreadPill,
-  _ as UNREAD_PILL_DIRECTIONS,
-  f as UNREAD_PILL_KINDS
+  unread_pill as DtRecipeUnreadPill,
+  UNREAD_PILL_DIRECTIONS,
+  UNREAD_PILL_KINDS
 };
 //# sourceMappingURL=unread-pill.js.map

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=\"unreadChipListeners\"\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  computed: {\n    unreadChipListeners () {\n      return {\n        click: event => this.$emit('click', event),\n      };\n    },\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","DtIcon","kind","dir","event","_hoisted_1","_openBlock","_createElementBlock","_mergeProps","$props","_toHandlers","$options","_createVNode","_component_dt_icon","_createElementVNode","_renderSlot","_ctx"],"mappings":";;;;;;AAAY,MAACA,IAAyB,CAAC,MAAM,MAAM,GACtCC,IAAoB,CAAC,YAAY,UAAU,GCmBnDC,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAC;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAACC,MAASH,EAAkB,SAASG,CAAI;AAAA,IACrD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAACC,MAAQL,EAAuB,SAASK,CAAG;AAAA,IACxD;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,sBAAuB;AACrB,aAAO;AAAA,QACL,OAAO,CAAAC,MAAS,KAAK,MAAM,SAASA,CAAK;AAAA;IAE5C;AAAA,EACF;AACH,GAvDUC,IAAA,EAAA,WAAQ,gCAA+B;;;AAV/C,SAAAC,EAAA,GAAAC,EAaS,UAbTC,EAaS;AAAA,IAZN,6DAA6DC,EAAI,IAAA,EAAA;AAAA,IAClE,MAAK;AAAA,IACL,WAAQ;AAAA,EACR,GAAAC,EAAMC,EAAmB,qBAAA,EAAA,CAAA,GAAA;AAAA,IAEzBC,EAGEC,GAAA;AAAA,MAFC,eAAeJ,EAAS,SAAA;AAAA,MACzB,MAAK;AAAA;IAEPK,EAEO,QAFPT,GAEO;AAAA,MADLU,EAAQC,EAAA,QAAA,SAAA;AAAA;;;;"}
+{"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=\"unreadChipListeners\"\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  computed: {\n    unreadChipListeners () {\n      return {\n        click: event => this.$emit('click', event),\n      };\n    },\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":["_openBlock","_createElementBlock","_mergeProps","_toHandlers","_createVNode","_createElementVNode","_renderSlot"],"mappings":";;;;;;AAAY,MAAC,yBAAyB,CAAC,MAAM,MAAM;AACvC,MAAC,oBAAoB,CAAC,YAAY,UAAU;ACmBxD,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,SAAS,kBAAkB,SAAS,IAAI;AAAA,IACrD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,QAAQ,uBAAuB,SAAS,GAAG;AAAA,IACxD;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,sBAAuB;AACrB,aAAO;AAAA,QACL,OAAO,WAAS,KAAK,MAAM,SAAS,KAAK;AAAA;IAE5C;AAAA,EACF;AACH;AAvDU,MAAA,aAAA,EAAA,WAAQ,gCAA+B;;;AAV/C,SAAAA,UAAA,GAAAC,mBAaS,UAbTC,WAaS;AAAA,IAZN,6DAA6D,OAAI,IAAA,EAAA;AAAA,IAClE,MAAK;AAAA,IACL,WAAQ;AAAA,EACR,GAAAC,WAAM,SAAmB,qBAAA,IAAA,CAAA,GAAA;AAAA,IAEzBC,YAGE,oBAAA;AAAA,MAFC,eAAe,OAAS,SAAA;AAAA,MACzB,MAAK;AAAA;IAEPC,mBAEO,QAFP,YAEO;AAAA,MADLC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;;"}

package/dist/lib/validation-messages.cjs

@@ -1,2 +1,90 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./validators.cjs"),i=require("./utils.cjs"),e=require("vue"),g=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("./constants.cjs");const u={name:"DtValidationMessages",props:{id:{type:String,default(){return i.getUniqueString()}},validationMessages:{type:Array,default:()=>[],validator:s=>d.validationMessageValidator(s)},showMessages:{type:Boolean,default:!0}},computed:{isFilteredValidationMessagesEmpty(){return this.filteredValidationMessages.length===0},filteredValidationMessages(){return i.filterFormattedMessages(this.validationMessages)},validationState(){return i.getValidationState(this.validationMessages)}},methods:{getMessageKey(s,t){return`validation-message-${s}-${t}-${this.id}`},messageTypeClass(s){return{error:"base-input__message--error d-validation-message--error",warning:"base-input__message--warning d-validation-message--warning",success:"base-input__message--success d-validation-message--success"}[s]}}},c={key:0,class:"base-input__messages d-validation-message__container","data-qa":"validation-messages-container"},m=["innerHTML"];function _(s,t,r,v,M,a){return r.showMessages&&!a.isFilteredValidationMessagesEmpty?(e.openBlock(),e.createElementBlock("div",c,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.filteredValidationMessages,({message:l,type:n},o)=>(e.openBlock(),e.createElementBlock("div",{key:a.getMessageKey(n,o),role:"status","aria-live":"polite","data-qa":"validation-message",class:e.normalizeClass(["base-input__message","d-validation-message",a.messageTypeClass(n)])},[e.createElementVNode("p",{innerHTML:l},null,8,m)],2))),128))])):e.createCommentVNode("",!0)}const p=g._(u,[["render",_]]);exports.DtValidationMessages=p;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const common_validators = require("../common/validators.cjs");
+const common_utils = require("../common/utils.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+require("../common/constants.cjs");
+const _sfc_main = {
+  name: "DtValidationMessages",
+  props: {
+    /**
+     * The id of the validation message
+     */
+    id: {
+      type: String,
+      default() {
+        return common_utils.getUniqueString();
+      }
+    },
+    /**
+     * Array of validation messages. Each message has the following structure:
+     * `{ message: "Some informative message", type: "error|warning|success"}`
+     */
+    validationMessages: {
+      type: Array,
+      default: () => [],
+      validator: (messages) => common_validators.validationMessageValidator(messages)
+    },
+    /**
+     * Show Validation messages
+     * @values true, false
+     */
+    showMessages: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    isFilteredValidationMessagesEmpty() {
+      return this.filteredValidationMessages.length === 0;
+    },
+    filteredValidationMessages() {
+      return common_utils.filterFormattedMessages(this.validationMessages);
+    },
+    validationState() {
+      return common_utils.getValidationState(this.validationMessages);
+    }
+  },
+  methods: {
+    getMessageKey(type, index) {
+      return `validation-message-${type}-${index}-${this.id}`;
+    },
+    messageTypeClass(type) {
+      const messageTypesClasses = {
+        error: "base-input__message--error d-validation-message--error",
+        warning: "base-input__message--warning d-validation-message--warning",
+        success: "base-input__message--success d-validation-message--success"
+      };
+      return messageTypesClasses[type];
+    }
+  }
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "base-input__messages d-validation-message__container",
+  "data-qa": "validation-messages-container"
+};
+const _hoisted_2 = ["innerHTML"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return $props.showMessages && !$options.isFilteredValidationMessagesEmpty ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.filteredValidationMessages, ({ message, type }, index) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        key: $options.getMessageKey(type, index),
+        role: "status",
+        "aria-live": "polite",
+        "data-qa": "validation-message",
+        class: vue.normalizeClass([
+          "base-input__message",
+          "d-validation-message",
+          $options.messageTypeClass(type)
+        ])
+      }, [
+        vue.createElementVNode("p", { innerHTML: message }, null, 8, _hoisted_2)
+      ], 2);
+    }), 128))
+  ])) : vue.createCommentVNode("", true);
+}
+const DtValidationMessages = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+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":["_sfc_main","getUniqueString","messages","validationMessageValidator","filterFormattedMessages","getValidationState","type","index","$props","$options","_openBlock","_createElementBlock","_hoisted_1","_Fragment","message","_normalizeClass","_createElementVNode","_hoisted_2"],"mappings":"sPAoCA,MAAKA,EAAU,CACb,KAAM,uBAEN,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAW,CACT,OAAOC,EAAe,gBAAA,CACvB,CACF,EAMD,mBAAoB,CAClB,KAAM,MACN,QAAS,IAAM,CAAE,EACjB,UAAWC,GAAYC,EAA0B,2BAACD,CAAQ,CAC3D,EAMD,aAAc,CACZ,KAAM,QACN,QAAS,EACV,CACF,EAED,SAAU,CACR,mCAAqC,CACnC,OAAO,KAAK,2BAA2B,SAAW,CACnD,EAED,4BAA8B,CAC5B,OAAOE,EAAuB,wBAAC,KAAK,kBAAkB,CACvD,EAED,iBAAmB,CACjB,OAAOC,EAAkB,mBAAC,KAAK,kBAAkB,CAClD,CACF,EAED,QAAS,CACP,cAAeC,EAAMC,EAAO,CAC1B,MAAO,sBAAsBD,CAAI,IAAIC,CAAK,IAAI,KAAK,EAAE,EACtD,EAED,iBAAkBD,EAAM,CAOtB,MAN4B,CAC1B,MAAO,yDACP,QAAS,6DACT,QAAS,8DAGgBA,CAAI,CAChC,CACF,CACH,WAhGI,MAAM,uDACN,UAAQ,yEAFF,OAAAE,EAAA,eAAiBC,EAAiC,mCAD1DC,EAAAA,YAAAC,EAAAA,mBAmBM,MAnBNC,EAmBM,EAdJF,EAAAA,UAAA,EAAA,EAAAC,qBAaME,EAAAA,2BAZiCJ,EAA0B,2BAAA,CAAA,CAArD,QAAAK,EAAS,KAAAR,CAAI,EAAIC,mBAD7BI,EAaM,mBAAA,MAAA,CAXH,IAAKF,EAAA,cAAcH,EAAMC,CAAK,EAC/B,KAAK,SACL,YAAU,SACV,UAAQ,qBACP,MAAKQ,EAAAA,eAAA,8CAA2EN,EAAA,iBAAiBH,CAAI,MAMtGU,EAAsB,mBAAA,IAAA,CAAnB,UAAQF,CAAO,EAAA,KAAA,EAAAG,CAAA"}
+{"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","_openBlock","_createElementBlock","_Fragment","_normalizeClass","_createElementVNode"],"mappings":";;;;;;;AAoCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AACT,eAAOA,aAAe,gBAAA;AAAA,MACvB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,WAAW,cAAYC,kBAA0B,2BAAC,QAAQ;AAAA,IAC3D;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,oCAAqC;AACnC,aAAO,KAAK,2BAA2B,WAAW;AAAA,IACnD;AAAA,IAED,6BAA8B;AAC5B,aAAOC,aAAuB,wBAAC,KAAK,kBAAkB;AAAA,IACvD;AAAA,IAED,kBAAmB;AACjB,aAAOC,aAAkB,mBAAC,KAAK,kBAAkB;AAAA,IAClD;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,cAAe,MAAM,OAAO;AAC1B,aAAO,sBAAsB,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IACtD;AAAA,IAED,iBAAkB,MAAM;AACtB,YAAM,sBAAsB;AAAA,QAC1B,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA;AAGX,aAAO,oBAAoB,IAAI;AAAA,IAChC;AAAA,EACF;AACH;;;EAhGI,OAAM;AAAA,EACN,WAAQ;;;;AAFF,SAAA,OAAA,iBAAiB,SAAiC,qCAD1DC,IAAAA,aAAAC,IAAAA,mBAmBM,OAnBN,YAmBM;AAAA,KAdJD,IAAAA,UAAA,IAAA,GAAAC,uBAaMC,IAAAA,+BAZiC,SAA0B,4BAAA,CAAA,EAArD,SAAS,KAAI,GAAI,UAAK;8BADlCD,IAaM,mBAAA,OAAA;AAAA,QAXH,KAAK,SAAA,cAAc,MAAM,KAAK;AAAA,QAC/B,MAAK;AAAA,QACL,aAAU;AAAA,QACV,WAAQ;AAAA,QACP,OAAKE,IAAAA,eAAA;AAAA;;UAA2E,SAAA,iBAAiB,IAAI;AAAA;;QAMtGC,IAAsB,mBAAA,KAAA,EAAnB,WAAQ,QAAO,GAAA,MAAA,GAAA,UAAA;AAAA;;;;;;"}

package/dist/lib/validation-messages.js

@@ -1,9 +1,9 @@
-import { validationMessageValidator as l } from "./validators.js";
-import { getUniqueString as g, filterFormattedMessages as m, getValidationState as u } from "./utils.js";
-import { openBlock as t, createElementBlock as i, Fragment as c, renderList as _, normalizeClass as p, createElementVNode as M, createCommentVNode as v } from "vue";
-import { _ as f } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import "./constants.js";
-const y = {
+import { validationMessageValidator } from "../common/validators.js";
+import { getUniqueString, filterFormattedMessages, getValidationState } from "../common/utils.js";
+import { openBlock, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, createCommentVNode } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import "../common/constants.js";
+const _sfc_main = {
   name: "DtValidationMessages",
   props: {
     /**
@@ -12,7 +12,7 @@ const y = {
     id: {
       type: String,
       default() {
-        return g();
+        return getUniqueString();
       }
     },
     /**
@@ -22,7 +22,7 @@ const y = {
     validationMessages: {
       type: Array,
       default: () => [],
-      validator: (e) => l(e)
+      validator: (messages) => validationMessageValidator(messages)
     },
     /**
      * Show Validation messages
@@ -30,7 +30,7 @@ const y = {
      */
     showMessages: {
       type: Boolean,
-      default: !0
+      default: true
     }
   },
   computed: {
@@ -38,48 +38,53 @@ const y = {
       return this.filteredValidationMessages.length === 0;
     },
     filteredValidationMessages() {
-      return m(this.validationMessages);
+      return filterFormattedMessages(this.validationMessages);
     },
     validationState() {
-      return u(this.validationMessages);
+      return getValidationState(this.validationMessages);
     }
   },
   methods: {
-    getMessageKey(e, a) {
-      return `validation-message-${e}-${a}-${this.id}`;
+    getMessageKey(type, index) {
+      return `validation-message-${type}-${index}-${this.id}`;
     },
-    messageTypeClass(e) {
-      return {
+    messageTypeClass(type) {
+      const messageTypesClasses = {
         error: "base-input__message--error d-validation-message--error",
         warning: "base-input__message--warning d-validation-message--warning",
         success: "base-input__message--success d-validation-message--success"
-      }[e];
+      };
+      return messageTypesClasses[type];
     }
   }
-}, h = {
+};
+const _hoisted_1 = {
   key: 0,
   class: "base-input__messages d-validation-message__container",
   "data-qa": "validation-messages-container"
-}, V = ["innerHTML"];
-function C(e, a, n, T, b, s) {
-  return n.showMessages && !s.isFilteredValidationMessagesEmpty ? (t(), i("div", h, [
-    (t(!0), i(c, null, _(s.filteredValidationMessages, ({ message: o, type: r }, d) => (t(), i("div", {
-      key: s.getMessageKey(r, d),
-      role: "status",
-      "aria-live": "polite",
-      "data-qa": "validation-message",
-      class: p([
-        "base-input__message",
-        "d-validation-message",
-        s.messageTypeClass(r)
-      ])
-    }, [
-      M("p", { innerHTML: o }, null, 8, V)
-    ], 2))), 128))
-  ])) : v("", !0);
+};
+const _hoisted_2 = ["innerHTML"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return $props.showMessages && !$options.isFilteredValidationMessagesEmpty ? (openBlock(), createElementBlock("div", _hoisted_1, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList($options.filteredValidationMessages, ({ message, type }, index) => {
+      return openBlock(), createElementBlock("div", {
+        key: $options.getMessageKey(type, index),
+        role: "status",
+        "aria-live": "polite",
+        "data-qa": "validation-message",
+        class: normalizeClass([
+          "base-input__message",
+          "d-validation-message",
+          $options.messageTypeClass(type)
+        ])
+      }, [
+        createElementVNode("p", { innerHTML: message }, null, 8, _hoisted_2)
+      ], 2);
+    }), 128))
+  ])) : createCommentVNode("", true);
 }
-const q = /* @__PURE__ */ f(y, [["render", C]]);
+const DtValidationMessages = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  q as DtValidationMessages
+  DtValidationMessages
 };
 //# sourceMappingURL=validation-messages.js.map