@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/lib/badge.cjs

@@ -1,227 +1,9 @@
 "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-da57m7BZ.js");
-require("@dialpad/dialtone-icons/icons.js");
-const BADGE_TYPE_MODIFIERS = {
-  default: "",
-  info: "d-badge--info",
-  success: "d-badge--success",
-  warning: "d-badge--warning",
-  critical: "d-badge--critical",
-  bulletin: "d-badge--bulletin",
-  ai: "d-badge--ai"
-};
-const BADGE_KIND_MODIFIERS = {
-  label: "",
-  count: "d-badge--count"
-};
-const BADGE_DECORATION_MODIFIERS = {
-  "black-400": "d-badge--decorate-black-400",
-  "black-500": "d-badge--decorate-black-500",
-  "black-900": "d-badge--decorate-black-900",
-  "red-200": "d-badge--decorate-red-200",
-  "red-300": "d-badge--decorate-red-300",
-  "red-400": "d-badge--decorate-red-400",
-  "purple-200": "d-badge--decorate-purple-200",
-  "purple-300": "d-badge--decorate-purple-300",
-  "purple-400": "d-badge--decorate-purple-400",
-  "purple-500": "d-badge--decorate-purple-500",
-  "blue-200": "d-badge--decorate-blue-200",
-  "blue-300": "d-badge--decorate-blue-300",
-  "blue-400": "d-badge--decorate-blue-400",
-  "green-300": "d-badge--decorate-green-300",
-  "green-400": "d-badge--decorate-green-400",
-  "green-500": "d-badge--decorate-green-500",
-  "gold-300": "d-badge--decorate-gold-300",
-  "gold-400": "d-badge--decorate-gold-400",
-  "gold-500": "d-badge--decorate-gold-500",
-  "magenta-200": "d-badge--decorate-magenta-200",
-  "magenta-300": "d-badge--decorate-magenta-300",
-  "magenta-400": "d-badge--decorate-magenta-400"
-};
-const _sfc_main = {
-  name: "DtBadge",
-  components: {
-    DtIcon: lib_icon.DtIcon
-  },
-  props: {
-    /**
-     * Icon on the left side of the badge. Supports any valid icon name from the icon catalog at
-     * https://dialtone.dialpad.com/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon
-     * will automatically be shown here, but this can be overridden by setting this prop.
-     */
-    iconLeft: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Icon on the right side of the badge. Supports any valid icon name from the icon catalog at
-     * https://dialtone.dialpad.com/components/icon.html#icon-catalog
-     */
-    iconRight: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Text for the badge content
-     */
-    text: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The kind of badge which determines the styling
-     * @values label, count
-     */
-    kind: {
-      type: String,
-      default: "label",
-      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind)
-    },
-    /**
-     * Color for the badge background
-     * @values default, info, success, warning, critical, bulletin, ai
-     */
-    type: {
-      type: String,
-      default: "default",
-      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type)
-    },
-    /**
-     * Decoration for the badge. This can be only used with kind: label and type: default
-     * with no iconLeft and iconRight
-     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,
-     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,
-     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400
-     */
-    decoration: {
-      type: String,
-      default: void 0,
-      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type)
-    },
-    /**
-     * Used to customize the label container
-     */
-    labelClass: {
-      type: [String, Array, Object],
-      default: ""
-    },
-    /**
-     * Shows a subtle appearance for the badge
-     * Currently only affects the badge when type is bulletin.
-     */
-    subtle: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Outlines the badge with a border
-     */
-    outlined: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      BADGE_TYPE_MODIFIERS,
-      BADGE_KIND_MODIFIERS,
-      BADGE_DECORATION_MODIFIERS
-    };
-  },
-  computed: {
-    hasIcons() {
-      return this.iconLeft !== "" || this.iconRight !== "";
-    }
-  },
-  watch: {
-    $props: {
-      immediate: true,
-      deep: true,
-      handler() {
-        this.validateProps();
-      }
-    }
-  },
-  methods: {
-    validateProps() {
-      this.validateTypePropCombination();
-      this.validateDecorationPropCombination();
-    },
-    validateTypePropCombination() {
-      if (this.type === "ai" && this.kind === "count") {
-        console.error("DtBadge error: type: 'ai' with kind: 'count' is an invalid combination.");
-      }
-      if (this.type !== "bulletin" && this.subtle) {
-        console.error("DtBadge error: subtle can only be used with type 'bulletin'");
-      }
-    },
-    validateDecorationPropCombination() {
-      if (!this.decoration)
-        return;
-      if (this.kind !== "label" || this.type !== "default") {
-        console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'.");
-      }
-      if (this.hasIcons) {
-        console.error("DtBadge error: decoration prop cannot be used with iconLeft or iconRight.");
-      }
-    }
-  }
-};
-const _hoisted_1 = {
-  key: 0,
-  class: "d-badge__decorative"
-};
-const _hoisted_2 = {
-  key: 1,
-  class: "d-badge__icon-left"
-};
-const _hoisted_3 = {
-  key: 2,
-  class: "d-badge__icon-right"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = vue.resolveComponent("dt-icon");
-  return vue.openBlock(), vue.createElementBlock("span", {
-    class: vue.normalizeClass([
-      "d-badge",
-      $data.BADGE_TYPE_MODIFIERS[$props.type],
-      $data.BADGE_KIND_MODIFIERS[$props.kind],
-      $data.BADGE_DECORATION_MODIFIERS[$props.decoration],
-      { "d-badge--subtle": $props.subtle },
-      { "d-badge--outlined": $props.outlined }
-    ]),
-    "data-qa": "dt-badge"
-  }, [
-    $props.decoration ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1)) : vue.createCommentVNode("", true),
-    $props.iconLeft ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
-      vue.createVNode(_component_dt_icon, {
-        name: $props.iconLeft,
-        size: "200"
-      }, null, 8, ["name"])
-    ])) : vue.createCommentVNode("", true),
-    vue.createElementVNode("span", {
-      class: vue.normalizeClass(["d-badge__label", $props.labelClass])
-    }, [
-      vue.renderSlot(_ctx.$slots, "default", {}, () => [
-        vue.createTextVNode(vue.toDisplayString($props.text), 1)
-      ])
-    ], 2),
-    $props.iconRight ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [
-      vue.createVNode(_component_dt_icon, {
-        name: $props.iconRight,
-        size: "200"
-      }, null, 8, ["name"])
-    ])) : vue.createCommentVNode("", true)
-  ], 2);
-}
-const DtBadge = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
-exports.BADGE_DECORATION_MODIFIERS = BADGE_DECORATION_MODIFIERS;
-exports.BADGE_KIND_MODIFIERS = BADGE_KIND_MODIFIERS;
-exports.BADGE_TYPE_MODIFIERS = BADGE_TYPE_MODIFIERS;
-exports.DtBadge = DtBadge;
+const badge = require("../components/badge/badge.vue.cjs");
+const badge_constants = require("../components/badge/badge_constants.cjs");
+exports.DtBadge = badge;
+exports.BADGE_DECORATION_MODIFIERS = badge_constants.BADGE_DECORATION_MODIFIERS;
+exports.BADGE_KIND_MODIFIERS = badge_constants.BADGE_KIND_MODIFIERS;
+exports.BADGE_TYPE_MODIFIERS = badge_constants.BADGE_TYPE_MODIFIERS;
 //# sourceMappingURL=badge.cjs.map

package/dist/lib/badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge.cjs","sources":["../../components/badge/badge_constants.js","../../components/badge/badge.vue"],"sourcesContent":["export const BADGE_TYPE_MODIFIERS = {\n  default: '',\n  info: 'd-badge--info',\n  success: 'd-badge--success',\n  warning: 'd-badge--warning',\n  critical: 'd-badge--critical',\n  bulletin: 'd-badge--bulletin',\n  ai: 'd-badge--ai',\n};\n\nexport const BADGE_KIND_MODIFIERS = {\n  label: '',\n  count: 'd-badge--count',\n};\n\nexport const BADGE_DECORATION_MODIFIERS = {\n  'black-400': 'd-badge--decorate-black-400',\n  'black-500': 'd-badge--decorate-black-500',\n  'black-900': 'd-badge--decorate-black-900',\n  'red-200': 'd-badge--decorate-red-200',\n  'red-300': 'd-badge--decorate-red-300',\n  'red-400': 'd-badge--decorate-red-400',\n  'purple-200': 'd-badge--decorate-purple-200',\n  'purple-300': 'd-badge--decorate-purple-300',\n  'purple-400': 'd-badge--decorate-purple-400',\n  'purple-500': 'd-badge--decorate-purple-500',\n  'blue-200': 'd-badge--decorate-blue-200',\n  'blue-300': 'd-badge--decorate-blue-300',\n  'blue-400': 'd-badge--decorate-blue-400',\n  'green-300': 'd-badge--decorate-green-300',\n  'green-400': 'd-badge--decorate-green-400',\n  'green-500': 'd-badge--decorate-green-500',\n  'gold-300': 'd-badge--decorate-gold-300',\n  'gold-400': 'd-badge--decorate-gold-400',\n  'gold-500': 'd-badge--decorate-gold-500',\n  'magenta-200': 'd-badge--decorate-magenta-200',\n  'magenta-300': 'd-badge--decorate-magenta-300',\n  'magenta-400': 'd-badge--decorate-magenta-400',\n};\n","<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"iconLeft\"\n      class=\"d-badge__icon-left\"\n    >\n      <dt-icon\n        :name=\"iconLeft\"\n        size=\"200\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"iconRight\"\n      class=\"d-badge__icon-right\"\n    >\n      <dt-icon\n        :name=\"iconRight\"\n        size=\"200\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  name: 'DtBadge',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Icon on the left side of the badge. Supports any valid icon name from the icon catalog at\n     * https://dialtone.dialpad.com/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon\n     * will automatically be shown here, but this can be overridden by setting this prop.\n     */\n    iconLeft: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Icon on the right side of the badge. Supports any valid icon name from the icon catalog at\n     * https://dialtone.dialpad.com/components/icon.html#icon-catalog\n     */\n    iconRight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, success, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no iconLeft and iconRight\n     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  computed: {\n    hasIcons () {\n      return this.iconLeft !== '' || this.iconRight !== '';\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons) {\n        console.error('DtBadge error: decoration prop cannot be used with iconLeft or iconRight.');\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtIcon","_createElementBlock","_normalizeClass","_openBlock","_createVNode","_createElementVNode","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"badge.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/lib/badge.js

@@ -1,227 +1,9 @@
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createCommentVNode, createVNode, createElementVNode, renderSlot, createTextVNode, toDisplayString } 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-H9ahUVCG.js";
-import "@dialpad/dialtone-icons/icons.js";
-const BADGE_TYPE_MODIFIERS = {
-  default: "",
-  info: "d-badge--info",
-  success: "d-badge--success",
-  warning: "d-badge--warning",
-  critical: "d-badge--critical",
-  bulletin: "d-badge--bulletin",
-  ai: "d-badge--ai"
-};
-const BADGE_KIND_MODIFIERS = {
-  label: "",
-  count: "d-badge--count"
-};
-const BADGE_DECORATION_MODIFIERS = {
-  "black-400": "d-badge--decorate-black-400",
-  "black-500": "d-badge--decorate-black-500",
-  "black-900": "d-badge--decorate-black-900",
-  "red-200": "d-badge--decorate-red-200",
-  "red-300": "d-badge--decorate-red-300",
-  "red-400": "d-badge--decorate-red-400",
-  "purple-200": "d-badge--decorate-purple-200",
-  "purple-300": "d-badge--decorate-purple-300",
-  "purple-400": "d-badge--decorate-purple-400",
-  "purple-500": "d-badge--decorate-purple-500",
-  "blue-200": "d-badge--decorate-blue-200",
-  "blue-300": "d-badge--decorate-blue-300",
-  "blue-400": "d-badge--decorate-blue-400",
-  "green-300": "d-badge--decorate-green-300",
-  "green-400": "d-badge--decorate-green-400",
-  "green-500": "d-badge--decorate-green-500",
-  "gold-300": "d-badge--decorate-gold-300",
-  "gold-400": "d-badge--decorate-gold-400",
-  "gold-500": "d-badge--decorate-gold-500",
-  "magenta-200": "d-badge--decorate-magenta-200",
-  "magenta-300": "d-badge--decorate-magenta-300",
-  "magenta-400": "d-badge--decorate-magenta-400"
-};
-const _sfc_main = {
-  name: "DtBadge",
-  components: {
-    DtIcon
-  },
-  props: {
-    /**
-     * Icon on the left side of the badge. Supports any valid icon name from the icon catalog at
-     * https://dialtone.dialpad.com/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon
-     * will automatically be shown here, but this can be overridden by setting this prop.
-     */
-    iconLeft: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Icon on the right side of the badge. Supports any valid icon name from the icon catalog at
-     * https://dialtone.dialpad.com/components/icon.html#icon-catalog
-     */
-    iconRight: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Text for the badge content
-     */
-    text: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The kind of badge which determines the styling
-     * @values label, count
-     */
-    kind: {
-      type: String,
-      default: "label",
-      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind)
-    },
-    /**
-     * Color for the badge background
-     * @values default, info, success, warning, critical, bulletin, ai
-     */
-    type: {
-      type: String,
-      default: "default",
-      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type)
-    },
-    /**
-     * Decoration for the badge. This can be only used with kind: label and type: default
-     * with no iconLeft and iconRight
-     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,
-     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,
-     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400
-     */
-    decoration: {
-      type: String,
-      default: void 0,
-      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type)
-    },
-    /**
-     * Used to customize the label container
-     */
-    labelClass: {
-      type: [String, Array, Object],
-      default: ""
-    },
-    /**
-     * Shows a subtle appearance for the badge
-     * Currently only affects the badge when type is bulletin.
-     */
-    subtle: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Outlines the badge with a border
-     */
-    outlined: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      BADGE_TYPE_MODIFIERS,
-      BADGE_KIND_MODIFIERS,
-      BADGE_DECORATION_MODIFIERS
-    };
-  },
-  computed: {
-    hasIcons() {
-      return this.iconLeft !== "" || this.iconRight !== "";
-    }
-  },
-  watch: {
-    $props: {
-      immediate: true,
-      deep: true,
-      handler() {
-        this.validateProps();
-      }
-    }
-  },
-  methods: {
-    validateProps() {
-      this.validateTypePropCombination();
-      this.validateDecorationPropCombination();
-    },
-    validateTypePropCombination() {
-      if (this.type === "ai" && this.kind === "count") {
-        console.error("DtBadge error: type: 'ai' with kind: 'count' is an invalid combination.");
-      }
-      if (this.type !== "bulletin" && this.subtle) {
-        console.error("DtBadge error: subtle can only be used with type 'bulletin'");
-      }
-    },
-    validateDecorationPropCombination() {
-      if (!this.decoration)
-        return;
-      if (this.kind !== "label" || this.type !== "default") {
-        console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'.");
-      }
-      if (this.hasIcons) {
-        console.error("DtBadge error: decoration prop cannot be used with iconLeft or iconRight.");
-      }
-    }
-  }
-};
-const _hoisted_1 = {
-  key: 0,
-  class: "d-badge__decorative"
-};
-const _hoisted_2 = {
-  key: 1,
-  class: "d-badge__icon-left"
-};
-const _hoisted_3 = {
-  key: 2,
-  class: "d-badge__icon-right"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = resolveComponent("dt-icon");
-  return openBlock(), createElementBlock("span", {
-    class: normalizeClass([
-      "d-badge",
-      $data.BADGE_TYPE_MODIFIERS[$props.type],
-      $data.BADGE_KIND_MODIFIERS[$props.kind],
-      $data.BADGE_DECORATION_MODIFIERS[$props.decoration],
-      { "d-badge--subtle": $props.subtle },
-      { "d-badge--outlined": $props.outlined }
-    ]),
-    "data-qa": "dt-badge"
-  }, [
-    $props.decoration ? (openBlock(), createElementBlock("span", _hoisted_1)) : createCommentVNode("", true),
-    $props.iconLeft ? (openBlock(), createElementBlock("span", _hoisted_2, [
-      createVNode(_component_dt_icon, {
-        name: $props.iconLeft,
-        size: "200"
-      }, null, 8, ["name"])
-    ])) : createCommentVNode("", true),
-    createElementVNode("span", {
-      class: normalizeClass(["d-badge__label", $props.labelClass])
-    }, [
-      renderSlot(_ctx.$slots, "default", {}, () => [
-        createTextVNode(toDisplayString($props.text), 1)
-      ])
-    ], 2),
-    $props.iconRight ? (openBlock(), createElementBlock("span", _hoisted_3, [
-      createVNode(_component_dt_icon, {
-        name: $props.iconRight,
-        size: "200"
-      }, null, 8, ["name"])
-    ])) : createCommentVNode("", true)
-  ], 2);
-}
-const DtBadge = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+import { default as default2 } from "../components/badge/badge.vue.js";
+import { BADGE_DECORATION_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_TYPE_MODIFIERS } from "../components/badge/badge_constants.js";
 export {
   BADGE_DECORATION_MODIFIERS,
   BADGE_KIND_MODIFIERS,
   BADGE_TYPE_MODIFIERS,
-  DtBadge
+  default2 as DtBadge
 };
 //# sourceMappingURL=badge.js.map

package/dist/lib/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../components/badge/badge_constants.js","../../components/badge/badge.vue"],"sourcesContent":["export const BADGE_TYPE_MODIFIERS = {\n  default: '',\n  info: 'd-badge--info',\n  success: 'd-badge--success',\n  warning: 'd-badge--warning',\n  critical: 'd-badge--critical',\n  bulletin: 'd-badge--bulletin',\n  ai: 'd-badge--ai',\n};\n\nexport const BADGE_KIND_MODIFIERS = {\n  label: '',\n  count: 'd-badge--count',\n};\n\nexport const BADGE_DECORATION_MODIFIERS = {\n  'black-400': 'd-badge--decorate-black-400',\n  'black-500': 'd-badge--decorate-black-500',\n  'black-900': 'd-badge--decorate-black-900',\n  'red-200': 'd-badge--decorate-red-200',\n  'red-300': 'd-badge--decorate-red-300',\n  'red-400': 'd-badge--decorate-red-400',\n  'purple-200': 'd-badge--decorate-purple-200',\n  'purple-300': 'd-badge--decorate-purple-300',\n  'purple-400': 'd-badge--decorate-purple-400',\n  'purple-500': 'd-badge--decorate-purple-500',\n  'blue-200': 'd-badge--decorate-blue-200',\n  'blue-300': 'd-badge--decorate-blue-300',\n  'blue-400': 'd-badge--decorate-blue-400',\n  'green-300': 'd-badge--decorate-green-300',\n  'green-400': 'd-badge--decorate-green-400',\n  'green-500': 'd-badge--decorate-green-500',\n  'gold-300': 'd-badge--decorate-gold-300',\n  'gold-400': 'd-badge--decorate-gold-400',\n  'gold-500': 'd-badge--decorate-gold-500',\n  'magenta-200': 'd-badge--decorate-magenta-200',\n  'magenta-300': 'd-badge--decorate-magenta-300',\n  'magenta-400': 'd-badge--decorate-magenta-400',\n};\n","<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"iconLeft\"\n      class=\"d-badge__icon-left\"\n    >\n      <dt-icon\n        :name=\"iconLeft\"\n        size=\"200\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"iconRight\"\n      class=\"d-badge__icon-right\"\n    >\n      <dt-icon\n        :name=\"iconRight\"\n        size=\"200\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  name: 'DtBadge',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Icon on the left side of the badge. Supports any valid icon name from the icon catalog at\n     * https://dialtone.dialpad.com/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon\n     * will automatically be shown here, but this can be overridden by setting this prop.\n     */\n    iconLeft: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Icon on the right side of the badge. Supports any valid icon name from the icon catalog at\n     * https://dialtone.dialpad.com/components/icon.html#icon-catalog\n     */\n    iconRight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, success, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no iconLeft and iconRight\n     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  computed: {\n    hasIcons () {\n      return this.iconLeft !== '' || this.iconRight !== '';\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons) {\n        console.error('DtBadge error: decoration prop cannot be used with iconLeft or iconRight.');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_openBlock","_createVNode","_createElementVNode","_renderSlot"],"mappings":";;;;;;AAAY,MAAC,uBAAuB;AAAA,EAClC,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,IAAI;AACN;AAEY,MAAC,uBAAuB;AAAA,EAClC,OAAO;AAAA,EACP,OAAO;AACT;AAEY,MAAC,6BAA6B;AAAA,EACxC,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AACjB;ACcA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,OAAO,KAAK,oBAAoB,EAAE,SAAS,IAAI;AAAA,IACrE;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,OAAO,KAAK,oBAAoB,EAAE,SAAS,IAAI;AAAA,IACrE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,OAAO,KAAK,0BAA0B,EAAE,SAAS,IAAI;AAAA,IAC3E;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,WAAY;AACV,aAAO,KAAK,aAAa,MAAM,KAAK,cAAc;AAAA,IACnD;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,MAAM;AAAA,MACN,UAAW;AACT,aAAK,cAAa;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,gBAAiB;AACf,WAAK,4BAA2B;AAChC,WAAK,kCAAiC;AAAA,IACvC;AAAA,IAED,8BAA+B;AAC7B,UAAI,KAAK,SAAS,QAAQ,KAAK,SAAS,SAAS;AAC/C,gBAAQ,MAAM,yEAA6E;AAAA,MAC7F;AACA,UAAI,KAAK,SAAS,cAAc,KAAK,QAAQ;AAC3C,gBAAQ,MAAM,6DAA+D;AAAA,MAC/E;AAAA,IACD;AAAA,IAED,oCAAqC;AACnC,UAAI,CAAC,KAAK;AAAY;AAEtB,UAAI,KAAK,SAAS,WAAW,KAAK,SAAS,WAAW;AACpD,gBAAQ,MAAM,yFAA6F;AAAA,MAC7G;AAEA,UAAI,KAAK,UAAU;AACjB,gBAAQ,MAAM,2EAA2E;AAAA,MAC3F;AAAA,IACD;AAAA,EACF;AACH;;;EAvLM,OAAM;;;;EAIN,OAAM;;;;EAeN,OAAM;;;;sBAhCVA,mBAuCO,QAAA;AAAA,IAtCJ,OAAKC,eAAA;AAAA;MAA2B,MAAA,qBAAqB,OAAI,IAAA;AAAA,MAAS,MAAA,qBAAqB,OAAI,IAAA;AAAA,MAAS,MAAA,2BAA2B,OAAU,UAAA;AAAA,2BAA8B,OAAM,OAAA;AAAA,6BAAiC,OAAQ,SAAA;AAAA;IAQvN,WAAQ;AAAA;IAGA,OAAU,cADlBC,aAAAF,mBAGE,QAHF,UAGE;IAEM,OAAQ,YADhBE,aAAAF,mBAQO,QARP,YAQO;AAAA,MAJLG,YAGE,oBAAA;AAAA,QAFC,MAAM,OAAQ;AAAA,QACf,MAAK;AAAA;;IAGTC,mBAKO,QAAA;AAAA,MALA,yCAA0B,OAAU,UAAA,CAAA;AAAA;MAEzCC,WAEO,4BAFP,MAEO;AAAA,wCADF,OAAI,IAAA,GAAA,CAAA;AAAA;;IAIH,OAAS,aADjBH,aAAAF,mBAQO,QARP,YAQO;AAAA,MAJLG,YAGE,oBAAA;AAAA,QAFC,MAAM,OAAS;AAAA,QAChB,MAAK;AAAA;;;;;"}
+{"version":3,"file":"badge.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}