@dialpad/dialtone-vue 2.127.0 → 2.127.2

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

@@ -1,5 +1,5 @@
-import { n as r } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-const a = [
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+const COLOR_CODES = [
   "green300",
   "green100",
   "red200",
@@ -8,7 +8,8 @@ const a = [
   "gold200",
   "black100",
   "white"
-], o = {
+];
+const _sfc_main = {
   name: "DtRecipeTopBannerInfo",
   props: {
     /**
@@ -17,14 +18,14 @@ const a = [
     colorCode: {
       type: String,
       default: "green300",
-      validator: function(t) {
-        return a.includes(t);
+      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",
@@ -35,26 +36,29 @@ const a = [
         gold100: "d-bgc-warning",
         black100: "d-bgc-info",
         white: "d-bgc-primary"
-      }[this.colorCode]];
+      };
+      return [bgColors[this.colorCode]];
     }
   }
 };
-var s = function() {
-  var n = this, e = n._self._c;
-  return e("div", { staticClass: "dt-top-banner-info", class: n.bannerInfoClass, attrs: { "data-qa": "banner-info" } }, [e("div", { staticClass: "dt-top-banner-info__left" }, [n._t("left")], 2), e("div", { staticClass: "dt-top-banner-info__middle", attrs: { "data-qa": "banner-info--middle" } }, [n._t("default")], 2), e("div", { staticClass: "dt-top-banner-info__right" }, [n._t("right")], 2)]);
-}, c = [], i = /* @__PURE__ */ r(
-  o,
-  s,
-  c,
-  !1,
+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)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const l = i.exports;
+const top_banner_info = __component__.exports;
 export {
-  a as COLOR_CODES,
-  l 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"],"mappings":";AAAY,MAACA,IAAc;AAAA,EAAC;AAAA,EAAY;AAAA,EAAY;AAAA,EAAU;AAAA,EAAU;AAAA,EACtE;AAAA,EAAW;AAAA,EAAY;AAAO,GCyBhCC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,SAAAC,GAAA;AACA,eAAAF,EAAA,SAAAE,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,kBAAA;AAaA,aAAA,CAZA;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,EACA,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":[],"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;;;;;;;;;;;;;;;;;"}

package/dist/lib/unread-pill.cjs

@@ -1,2 +1,64 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),a=require("./icon.cjs");require("@dialpad/dialtone-icons/vue2");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const n=["up","down"],i=["mentions","messages"],s={name:"DtRecipeUnreadPill",components:{DtIcon:a.DtIcon},props:{kind:{type:String,required:!0,validator:t=>i.includes(t)},direction:{type:String,required:!0,validator:t=>n.includes(t)}},emits:["click"]};var d=function(){var e=this,r=e._self._c;return r("button",e._g({class:["dt-leftbar-unread-pill",`dt-leftbar-unread-pill--${e.kind}`],attrs:{type:"button","data-qa":"dt-leftbar-unread-pill"}},e.$listeners),[r("dt-icon",{attrs:{name:`arrow-${e.direction}`,size:"300"}}),r("span",{attrs:{"data-qa":"dt-leftbar-unread-pill__label"}},[e._t("default")],2)],1)},o=[],u=l.n(s,d,o,!1,null,null,null,null);const c=u.exports;exports.DtRecipeUnreadPill=c;exports.UNREAD_PILL_DIRECTIONS=n;exports.UNREAD_PILL_KINDS=i;
+"use strict";
+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("@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"
+  ]
+};
+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);
+};
+var _sfc_staticRenderFns = [];
+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;
+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=\"$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","DtIcon","kind","dir"],"mappings":"+SAAY,MAACA,EAAyB,CAAC,KAAM,MAAM,EACtCC,EAAoB,CAAC,WAAY,UAAU,ECmBxDC,EAAA,CACA,KAAA,qBAEA,WAAA,CACA,OAAAC,EAAA,MACA,EAEA,MAAA,CAKA,KAAA,CACA,KAAA,OACA,SAAA,GACA,UAAAC,GAAAH,EAAA,SAAAG,CAAA,CACA,EAMA,UAAA,CACA,KAAA,OACA,SAAA,GACA,UAAAC,GAAAL,EAAA,SAAAK,CAAA,CACA,CACA,EAEA,MAAA,CAOA,OACA,CACA"}
+{"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;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/unread-pill.js

@@ -1,12 +1,14 @@
-import { n } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import { DtIcon as a } from "./icon.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import { DtIcon } from "./icon.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-const i = ["up", "down"], l = ["mentions", "messages"], o = {
+const UNREAD_PILL_DIRECTIONS = ["up", "down"];
+const UNREAD_PILL_KINDS = ["mentions", "messages"];
+const _sfc_main = {
   name: "DtRecipeUnreadPill",
   components: {
-    DtIcon: a
+    DtIcon
   },
   props: {
     /**
@@ -15,8 +17,8 @@ const i = ["up", "down"], l = ["mentions", "messages"], o = {
      **/
     kind: {
       type: String,
-      required: !0,
-      validator: (e) => l.includes(e)
+      required: true,
+      validator: (kind) => UNREAD_PILL_KINDS.includes(kind)
     },
     /**
      * The direction of the arrow icon
@@ -24,8 +26,8 @@ const i = ["up", "down"], l = ["mentions", "messages"], o = {
      **/
     direction: {
       type: String,
-      required: !0,
-      validator: (e) => i.includes(e)
+      required: true,
+      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir)
     }
   },
   emits: [
@@ -38,23 +40,25 @@ const i = ["up", "down"], l = ["mentions", "messages"], o = {
     "click"
   ]
 };
-var s = function() {
-  var t = this, r = t._self._c;
-  return r("button", t._g({ class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${t.kind}`], attrs: { type: "button", "data-qa": "dt-leftbar-unread-pill" } }, t.$listeners), [r("dt-icon", { attrs: { name: `arrow-${t.direction}`, size: "300" } }), r("span", { attrs: { "data-qa": "dt-leftbar-unread-pill__label" } }, [t._t("default")], 2)], 1);
-}, d = [], c = /* @__PURE__ */ n(
-  o,
-  s,
-  d,
-  !1,
+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);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const b = c.exports;
+const unread_pill = __component__.exports;
 export {
-  b as DtRecipeUnreadPill,
-  i as UNREAD_PILL_DIRECTIONS,
-  l 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=\"$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","DtIcon","kind","dir"],"mappings":";;;;;AAAY,MAACA,IAAyB,CAAC,MAAM,MAAM,GACtCC,IAAoB,CAAC,YAAY,UAAU,GCmBxDC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAC,MAAAH,EAAA,SAAAG,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAC,MAAAL,EAAA,SAAAK,CAAA;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":[],"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;;;;;;;;;;;;;;;;;"}

package/dist/lib/validation-messages.cjs

@@ -1,2 +1,86 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./validators.cjs"),t=require("./utils.cjs"),o=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js");require("./constants.cjs");require("vue");const d={name:"DtValidationMessages",props:{id:{type:String,default(){return t.getUniqueString()}},validationMessages:{type:Array,default:()=>[],validator:s=>l.validationMessageValidator(s)},showMessages:{type:Boolean,default:!0}},computed:{isFilteredValidationMessagesEmpty(){return this.filteredValidationMessages.length===0},filteredValidationMessages(){return t.filterFormattedMessages(this.validationMessages)},validationState(){return t.getValidationState(this.validationMessages)}},methods:{getMessageKey(s,e){return`validation-message-${s}-${e}-${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]}}};var g=function(){var e=this,a=e._self._c;return e.showMessages&&!e.isFilteredValidationMessagesEmpty?a("div",{staticClass:"base-input__messages d-validation-message__container",attrs:{"data-qa":"validation-messages-container"}},e._l(e.filteredValidationMessages,function({message:n,type:i},r){return a("div",{key:e.getMessageKey(i,r),class:["base-input__message","d-validation-message",e.messageTypeClass(i)],attrs:{role:"status","aria-live":"polite","data-qa":"validation-message"}},[a("p",{domProps:{innerHTML:e._s(n)}})])}),0):e._e()},u=[],_=o.n(d,g,u,!1,null,null,null,null);const m=_.exports;exports.DtValidationMessages=m;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const common_validators = require("../common/validators.cjs");
+const common_utils = require("../common/utils.cjs");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+require("../common/constants.cjs");
+require("vue");
+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];
+    }
+  }
+};
+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) } })]);
+  }), 0) : _vm._e();
+};
+var _sfc_staticRenderFns = [];
+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":["_sfc_main","getUniqueString","messages","validationMessageValidator","filterFormattedMessages","getValidationState","type","index"],"mappings":"kPAoCA,MAAAA,EAAA,CACA,KAAA,uBAEA,MAAA,CAIA,GAAA,CACA,KAAA,OACA,SAAA,CACA,OAAAC,EAAA,gBAAA,CACA,CACA,EAMA,mBAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,EACA,UAAAC,GAAAC,EAAA,2BAAAD,CAAA,CACA,EAMA,aAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,SAAA,CACA,mCAAA,CACA,OAAA,KAAA,2BAAA,SAAA,CACA,EAEA,4BAAA,CACA,OAAAE,EAAA,wBAAA,KAAA,kBAAA,CACA,EAEA,iBAAA,CACA,OAAAC,EAAA,mBAAA,KAAA,kBAAA,CACA,CACA,EAEA,QAAA,CACA,cAAAC,EAAAC,EAAA,CACA,MAAA,sBAAAD,CAAA,IAAAC,CAAA,IAAA,KAAA,EAAA,EACA,EAEA,iBAAAD,EAAA,CAOA,MANA,CACA,MAAA,yDACA,QAAA,6DACA,QAAA,4DACA,EAEAA,CAAA,CACA,CACA,CACA"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/validation-messages.js

@@ -1,9 +1,9 @@
-import { validationMessageValidator as r } from "./validators.js";
-import { getUniqueString as o, filterFormattedMessages as l, getValidationState as d } from "./utils.js";
-import { n as g } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import "./constants.js";
+import { validationMessageValidator } from "../common/validators.js";
+import { getUniqueString, filterFormattedMessages, getValidationState } from "../common/utils.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import "../common/constants.js";
 import "vue";
-const m = {
+const _sfc_main = {
   name: "DtValidationMessages",
   props: {
     /**
@@ -12,7 +12,7 @@ const m = {
     id: {
       type: String,
       default() {
-        return o();
+        return getUniqueString();
       }
     },
     /**
@@ -22,7 +22,7 @@ const m = {
     validationMessages: {
       type: Array,
       default: () => [],
-      validator: (s) => r(s)
+      validator: (messages) => validationMessageValidator(messages)
     },
     /**
      * Show Validation messages
@@ -30,7 +30,7 @@ const m = {
      */
     showMessages: {
       type: Boolean,
-      default: !0
+      default: true
     }
   },
   computed: {
@@ -38,46 +38,49 @@ const m = {
       return this.filteredValidationMessages.length === 0;
     },
     filteredValidationMessages() {
-      return l(this.validationMessages);
+      return filterFormattedMessages(this.validationMessages);
     },
     validationState() {
-      return d(this.validationMessages);
+      return getValidationState(this.validationMessages);
     }
   },
   methods: {
-    getMessageKey(s, e) {
-      return `validation-message-${s}-${e}-${this.id}`;
+    getMessageKey(type, index) {
+      return `validation-message-${type}-${index}-${this.id}`;
     },
-    messageTypeClass(s) {
-      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"
-      }[s];
+      };
+      return messageTypesClasses[type];
     }
   }
 };
-var u = function() {
-  var e = this, a = e._self._c;
-  return e.showMessages && !e.isFilteredValidationMessagesEmpty ? a("div", { staticClass: "base-input__messages d-validation-message__container", attrs: { "data-qa": "validation-messages-container" } }, e._l(e.filteredValidationMessages, function({ message: i, type: t }, n) {
-    return a("div", { key: e.getMessageKey(t, n), class: [
+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",
-      e.messageTypeClass(t)
-    ], attrs: { role: "status", "aria-live": "polite", "data-qa": "validation-message" } }, [a("p", { domProps: { innerHTML: e._s(i) } })]);
-  }), 0) : e._e();
-}, _ = [], p = /* @__PURE__ */ g(
-  m,
-  u,
-  _,
-  !1,
+      _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
 );
-const h = p.exports;
+const DtValidationMessages = __component__.exports;
 export {
-  h as DtValidationMessages
+  DtValidationMessages
 };
 //# sourceMappingURL=validation-messages.js.map

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":["_sfc_main","getUniqueString","messages","validationMessageValidator","filterFormattedMessages","getValidationState","type","index"],"mappings":";;;;;AAoCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AACA,eAAAC,EAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAAC,MAAAC,EAAAD,CAAA;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,aAAAE,EAAA,KAAA,kBAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAAC,EAAA,KAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,cAAAC,GAAAC,GAAA;AACA,aAAA,sBAAAD,CAAA,IAAAC,CAAA,IAAA,KAAA,EAAA;AAAA,IACA;AAAA,IAEA,iBAAAD,GAAA;AAOA,aANA;AAAA,QACA,OAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,MACA,EAEAA,CAAA;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":[],"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;;;;;;;;;;;;;;;;;;;;;;;"}