@dialpad/dialtone-vue 2.157.1-beta.1 → 2.158.0

package/dist/components/badge/badge.vue.cjs

@@ -0,0 +1,157 @@
+"use strict";
+const badge_constants = require("./badge_constants.cjs");
+const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
+const icon = require("../icon/icon.vue.cjs");
+const _sfc_main = {
+  name: "DtBadge",
+  components: {
+    DtIcon: icon
+  },
+  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_constants.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_constants.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_constants.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_constants.BADGE_TYPE_MODIFIERS,
+      BADGE_KIND_MODIFIERS: badge_constants.BADGE_KIND_MODIFIERS,
+      BADGE_DECORATION_MODIFIERS: badge_constants.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.");
+      }
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", { class: [
+    "d-badge",
+    _vm.BADGE_TYPE_MODIFIERS[_vm.type],
+    _vm.BADGE_KIND_MODIFIERS[_vm.kind],
+    _vm.BADGE_DECORATION_MODIFIERS[_vm.decoration],
+    { "d-badge--subtle": _vm.subtle },
+    { "d-badge--outlined": _vm.outlined }
+  ], attrs: { "data-qa": "dt-badge" } }, [_vm.decoration ? _c("span", { staticClass: "d-badge__decorative" }) : _vm._e(), _vm.iconLeft ? _c("span", { staticClass: "d-badge__icon-left" }, [_c("dt-icon", { attrs: { "name": _vm.iconLeft, "size": "200" } })], 1) : _vm._e(), _c("span", { class: ["d-badge__label", _vm.labelClass] }, [_vm._t("default", function() {
+    return [_vm._v(" " + _vm._s(_vm.text) + " ")];
+  })], 2), _vm.iconRight ? _c("span", { staticClass: "d-badge__icon-right" }, [_c("dt-icon", { attrs: { "name": _vm.iconRight, "size": "200" } })], 1) : _vm._e()]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const DtBadge = __component__.exports;
+module.exports = DtBadge;
+//# sourceMappingURL=badge.vue.cjs.map

package/dist/components/badge/badge.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.vue.cjs","sources":["../../../components/badge/badge.vue"],"sourcesContent":["<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","BADGE_KIND_MODIFIERS","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS"],"mappings":";;;;AAoDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAA;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAAC,oCAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAAC,oCAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAAC,0CAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,sBAAAD,gBAAA;AAAA,MACA,sBAAAD,gBAAA;AAAA,MACA,4BAAAE,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,KAAA,aAAA,MAAA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AACA,aAAA,cAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA;AACA,WAAA,4BAAA;AACA,WAAA,kCAAA;AAAA,IACA;AAAA,IAEA,8BAAA;AACA,UAAA,KAAA,SAAA,QAAA,KAAA,SAAA,SAAA;AACA,gBAAA,MAAA,yEAAA;AAAA,MACA;AACA,UAAA,KAAA,SAAA,cAAA,KAAA,QAAA;AACA,gBAAA,MAAA,6DAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,oCAAA;AACA,UAAA,CAAA,KAAA,WAAA;AAEA,UAAA,KAAA,SAAA,WAAA,KAAA,SAAA,WAAA;AACA,gBAAA,MAAA,yFAAA;AAAA,MACA;AAEA,UAAA,KAAA,UAAA;AACA,gBAAA,MAAA,2EAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/badge/badge.vue.js

@@ -0,0 +1,158 @@
+import { BADGE_KIND_MODIFIERS, BADGE_TYPE_MODIFIERS, BADGE_DECORATION_MODIFIERS } from "./badge_constants.js";
+import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
+import DtIcon from "../icon/icon.vue.js";
+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.");
+      }
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", { class: [
+    "d-badge",
+    _vm.BADGE_TYPE_MODIFIERS[_vm.type],
+    _vm.BADGE_KIND_MODIFIERS[_vm.kind],
+    _vm.BADGE_DECORATION_MODIFIERS[_vm.decoration],
+    { "d-badge--subtle": _vm.subtle },
+    { "d-badge--outlined": _vm.outlined }
+  ], attrs: { "data-qa": "dt-badge" } }, [_vm.decoration ? _c("span", { staticClass: "d-badge__decorative" }) : _vm._e(), _vm.iconLeft ? _c("span", { staticClass: "d-badge__icon-left" }, [_c("dt-icon", { attrs: { "name": _vm.iconLeft, "size": "200" } })], 1) : _vm._e(), _c("span", { class: ["d-badge__label", _vm.labelClass] }, [_vm._t("default", function() {
+    return [_vm._v(" " + _vm._s(_vm.text) + " ")];
+  })], 2), _vm.iconRight ? _c("span", { staticClass: "d-badge__icon-right" }, [_c("dt-icon", { attrs: { "name": _vm.iconRight, "size": "200" } })], 1) : _vm._e()]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const DtBadge = __component__.exports;
+export {
+  DtBadge as default
+};
+//# sourceMappingURL=badge.vue.js.map

package/dist/components/badge/badge.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.vue.js","sources":["../../../components/badge/badge.vue"],"sourcesContent":["<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":[],"mappings":";;;AAoDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAA,oBAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAA,oBAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAA,0BAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,KAAA,aAAA,MAAA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AACA,aAAA,cAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA;AACA,WAAA,4BAAA;AACA,WAAA,kCAAA;AAAA,IACA;AAAA,IAEA,8BAAA;AACA,UAAA,KAAA,SAAA,QAAA,KAAA,SAAA,SAAA;AACA,gBAAA,MAAA,yEAAA;AAAA,MACA;AACA,UAAA,KAAA,SAAA,cAAA,KAAA,QAAA;AACA,gBAAA,MAAA,6DAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,oCAAA;AACA,UAAA,CAAA,KAAA,WAAA;AAEA,UAAA,KAAA,SAAA,WAAA,KAAA,SAAA,WAAA;AACA,gBAAA,MAAA,yFAAA;AAAA,MACA;AAEA,UAAA,KAAA,UAAA;AACA,gBAAA,MAAA,2EAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/badge/badge_constants.cjs

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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"
+};
+exports.BADGE_DECORATION_MODIFIERS = BADGE_DECORATION_MODIFIERS;
+exports.BADGE_KIND_MODIFIERS = BADGE_KIND_MODIFIERS;
+exports.BADGE_TYPE_MODIFIERS = BADGE_TYPE_MODIFIERS;
+//# sourceMappingURL=badge_constants.cjs.map

package/dist/components/badge/badge_constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge_constants.cjs","sources":["../../../components/badge/badge_constants.js"],"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"],"names":[],"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;;;;"}

package/dist/components/badge/badge_constants.js

@@ -0,0 +1,43 @@
+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"
+};
+export {
+  BADGE_DECORATION_MODIFIERS,
+  BADGE_KIND_MODIFIERS,
+  BADGE_TYPE_MODIFIERS
+};
+//# sourceMappingURL=badge_constants.js.map

package/dist/components/badge/badge_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge_constants.js","sources":["../../../components/badge/badge_constants.js"],"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"],"names":[],"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;"}

package/dist/components/banner/banner.vue.cjs

@@ -0,0 +1,199 @@
+"use strict";
+const modal = require("../../common/mixins/modal.cjs");
+const common_utils = require("../../common/utils.cjs");
+const sr_only_close_button = require("../../common/mixins/sr_only_close_button.cjs");
+const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
+const notice_icon = require("../notice/notice_icon.vue.cjs");
+const notice_content = require("../notice/notice_content.vue.cjs");
+const notice_action = require("../notice/notice_action.vue.cjs");
+const notice_constants = require("../notice/notice_constants.cjs");
+const _sfc_main = {
+  name: "DtBanner",
+  components: {
+    DtNoticeIcon: notice_icon,
+    DtNoticeContent: notice_content,
+    DtNoticeAction: notice_action
+  },
+  mixins: [modal, sr_only_close_button],
+  props: {
+    /**
+     * Sets an ID on the title element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the title.
+     */
+    titleId: {
+      type: String,
+      default() {
+        return common_utils.default.getUniqueString();
+      }
+    },
+    /**
+     * Sets an ID on the content element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the content.
+     */
+    contentId: {
+      type: String,
+      default() {
+        return common_utils.default.getUniqueString();
+      }
+    },
+    /**
+     * Title header of the notice. This can be left blank to remove the title from the notice entirely.
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Used in scenarios where the message needs to visually dominate the screen.
+     * This will also change the aria role from status to alertdialog.
+     * and will modally trap the keyboard focus in the dialog as soon as it displays.
+     * @values true, false
+     */
+    important: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Pins the banner to the top of the window and pushes all app content down.
+     * @values true, false
+     */
+    pinned: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Severity level of the notice, sets the icon and background
+     * @values base, error, info, success, warning
+     */
+    kind: {
+      type: String,
+      default: "base",
+      validate(kind) {
+        return notice_constants.NOTICE_KINDS.includes(kind);
+      }
+    },
+    /**
+     * Props for the notice close button.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Hides the close button from the notice
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Hides the icon from the notice
+     * @values true, false
+     */
+    hideIcon: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Hides the action from the notice
+     * @values true, false
+     */
+    hideAction: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Inner dialog class
+     */
+    dialogClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Banner background image
+     */
+    backgroundImage: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Background image size, follows the background-size CSS property values
+     * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size" target="_blank">
+     *   CSS background-sizes
+     * </a>
+     */
+    backgroundSize: {
+      type: String,
+      default: "cover"
+    }
+  },
+  emits: [
+    /**
+     * Close button click event
+     *
+     * @event close
+     */
+    "close"
+  ],
+  computed: {
+    role() {
+      return this.important ? "alertdialog" : "status";
+    },
+    bannerClass() {
+      const kindClasses = {
+        error: "d-banner--error",
+        info: "d-banner--info",
+        success: "d-banner--success",
+        warning: "d-banner--warning",
+        base: "d-banner--base"
+      };
+      return [
+        "d-banner",
+        kindClasses[this.kind],
+        {
+          "d-banner--important": this.important,
+          "d-banner--pinned": this.pinned
+        }
+      ];
+    },
+    bannerBackgroundImage() {
+      if (this.backgroundImage === "") return null;
+      return `background-image: url(${this.backgroundImage});
+              background-size: ${this.backgroundSize};`;
+    }
+  },
+  mounted() {
+    if (this.important) {
+      this.focusFirstElement();
+    }
+  },
+  methods: {
+    trapFocus(e) {
+      if (this.important) {
+        this.focusTrappedTabPress(e);
+      }
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("aside", { class: _vm.bannerClass, style: _vm.bannerBackgroundImage, on: { "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) return null;
+    return _vm.trapFocus.apply(null, arguments);
+  } } }, [_c("div", { staticClass: "d-banner__dialog", class: _vm.dialogClass, attrs: { "role": _vm.role, "aria-labelledby": _vm.titleId, "aria-describedby": _vm.contentId } }, [!_vm.hideIcon ? _c("dt-notice-icon", _vm._g({ attrs: { "kind": _vm.kind } }, _vm.$listeners), [_vm._t("icon")], 2) : _vm._e(), _c("dt-notice-content", _vm._g({ attrs: { "title-id": _vm.titleId, "content-id": _vm.contentId, "title": _vm.title }, scopedSlots: _vm._u([{ key: "titleOverride", fn: function() {
+    return [_vm._t("titleOverride")];
+  }, proxy: true }], null, true) }, _vm.$listeners), [_vm._t("default")], 2), _c("dt-notice-action", _vm._g({ attrs: { "hide-action": _vm.hideAction, "hide-close": _vm.hideClose, "close-button-props": _vm.closeButtonProps, "visually-hidden-close": _vm.visuallyHiddenClose, "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel } }, _vm.$listeners), [_vm._t("action")], 2)], 1)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const banner = __component__.exports;
+module.exports = banner;
+//# sourceMappingURL=banner.vue.cjs.map