@dialpad/dialtone-vue 2.124.0 → 2.125.1-alpha.1

package/dist/lib/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../components/avatar/avatar_constants.js","../../common/storybook_utils.js","../../components/avatar/utils.js","../../components/avatar/avatar.vue"],"sourcesContent":["export const AVATAR_SIZE_MODIFIERS = {\n  xs: 'd-avatar--xs',\n  sm: 'd-avatar--sm',\n  md: 'd-avatar--md',\n  lg: 'd-avatar--lg',\n  xl: 'd-avatar--xl',\n};\n\nexport const AVATAR_KIND_MODIFIERS = {\n  default: '',\n  icon: 'd-avatar__icon',\n  initials: 'd-avatar__initials',\n};\n\nexport const AVATAR_PRESENCE_SIZE_MODIFIERS = {\n  md: 'd-avatar__presence--md',\n  lg: 'd-avatar__presence--lg',\n};\n\nexport const AVATAR_PRESENCE_STATES = {\n  NONE: '',\n  BUSY: 'busy',\n  AWAY: 'away',\n  OFFLINE: 'offline',\n  ACTIVE: 'active',\n};\n\nexport const AVATAR_ICON_SIZES = {\n  xs: '100',\n  sm: '200',\n  md: '300',\n  lg: '500',\n  xl: '600',\n};\n\nexport const AVATAR_COLORS = [\n  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  '1000',\n  '1100',\n  '1200',\n  '1300',\n  '1400',\n  '1500',\n  '1600',\n  '1700',\n  '1800',\n];\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\nexport default {\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_ICON_SIZES,\n  AVATAR_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n","import iconNames from '@dialpad/dialtone-icons/icons.json';\n\n/**\n * Will use a Vue SFC to render the template rather than a template string.\n * This is useful for more complex components that are hard to work with and\n * get messy when rendered via a template string. Will pass args and argTypes\n * into the component, so it is able to be live edited with storybook controls addon.\n * @param component this will get the component name\n * @param defaultTemplate we will mount in this component\n * @param argsData storybook control args\n * @returns {component} the template component with props and args added.\n */\n\nexport function createRenderConfig (component, defaultTemplate, argsData) {\n  return {\n    components: { [component.name]: defaultTemplate },\n    props: [...Object.keys(component.props ?? {}), ...Object.keys(argsData)],\n    setup (props) {\n      return { props };\n    },\n    template: `<${component.name} v-bind=\"props\" />`,\n  };\n}\n\n/**\n * Gets the full list of icon component names from the dialtone package\n * @returns {string[]} icon component names\n */\nexport function getIconNames () {\n  return [undefined, ...iconNames];\n}\n\nexport const generateTemplate = (component,\n  { props = [], excludeProps = [], customProps = [], childTemplate } = {}) => {\n  if (!component) {\n    console.warn('Generate template: Please provide a component');\n    return '';\n  }\n\n  const { name, props: componentProps } = component;\n  const finalProps = props.length ? props : Object.keys(componentProps);\n  const normalizedName = name.split(/(?=[A-Z])/).join('-').toLowerCase();\n\n  const startFragment = `<${normalizedName}`;\n\n  const propFragments = finalProps\n    .filter(prop => !excludeProps.includes(prop))\n    .map(prop => `:${prop}=\"${prop}\"`);\n\n  const endFragment = childTemplate ? `>${childTemplate}</${normalizedName}>` : ' />';\n\n  return [startFragment, ...propFragments, ...customProps, endFragment].join(' ');\n};\n\nexport default {\n  generateTemplate,\n  getIconNames,\n  createRenderConfig,\n};\n","export const extractInitialsFromName = (fullName) => {\n  if (typeof fullName !== 'string' || !fullName.trim()) return '';\n\n  const names = fullName.trim().split(/\\s+/g);\n\n  return names.length === 1\n    ? names.join('').substring(0, 2)\n    : names.filter((_, index) => (index === 0 || index === names.length - 1))\n      .map(name => name.slice(0, 1).toUpperCase())\n      .join('');\n};\n","<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <dt-icon\n        v-else-if=\"iconName\"\n        :name=\"iconName\"\n        :aria-label=\"iconAriaLabel\"\n        :size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        data-qa=\"dt-avatar-icon\"\n      />\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"overlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <dt-icon\n        v-if=\"overlayIcon\"\n        class=\"d-avatar__overlay-icon\"\n        :name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport { DtIcon } from '@/components/icon';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { getIconNames } from '@/common/storybook_utils.js';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\nconst ICONS_LIST = getIconNames();\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  name: 'DtAvatar',\n  components: { DtPresence, DtIcon },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The icon that overlays the avatar\n     */\n    overlayIcon: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon name to be displayed on the avatar\n     */\n    iconName: {\n      type: String,\n      default: undefined,\n      validator: (name) => ICONS_LIST.includes(name),\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n    };\n  },\n\n  computed: {\n    isNotIconType () {\n      return !this.iconName;\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,\n          'd-avatar--clickable': this.clickable,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n//TODO: Move these classes to dialtone and document.\n.d-avatar--image-loaded {\n  background-color: transparent;\n  background-image: unset;\n}\n\n.d-avatar__count {\n  z-index: var(--zi-base);\n}\n\n.d-avatar__presence {\n  z-index: var(--zi-base);\n}\n\n.d-avatar__overlay {\n  background-color: var(--dt-color-surface-contrast-opaque);\n  opacity: var(--dt-opacity-900);\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dt-size-radius-circle);\n  z-index: var(--zi-base);\n}\n\n.d-avatar__overlay-icon {\n  color: var(--dt-color-foreground-primary-inverted);\n  width: 100%;\n}\n\n.d-avatar__overlay-text {\n  color: var(--dt-color-foreground-primary-inverted);\n  font-weight: var(--dt-font-weight-bold);\n  font-size: var(--dt-font-size-200);\n  width: 100%;\n  text-align: center;\n}\n\n.d-avatar--clickable {\n  --avatar-color-border: transparent;\n\n  cursor: pointer;\n  padding: 0;\n  background-color: transparent;\n\n  border-radius: var(--dt-size-radius-circle);\n  border: var(--dt-size-border-100) solid var(--avatar-color-border);\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n\n  &:hover {\n    --avatar-color-border: var(--dt-color-border-default);\n  }\n\n  &:active {\n    --avatar-color-border: var(--dt-color-border-moderate);\n\n    transform: scale(0.98);\n  }\n}\n</style>\n"],"names":["AVATAR_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_ICON_SIZES","AVATAR_COLORS","AVATAR_GROUP_VALIDATOR","group","getIconNames","iconNames","extractInitialsFromName","fullName","names","_","index","name","ICONS_LIST","_sfc_main","DtPresence","DtIcon","getUniqueString","size","state","ICON_SIZE_MODIFIERS","newSrc","el","initials","getRandomElement","e"],"mappings":"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"}

package/dist/lib/badge.js

@@ -0,0 +1,169 @@
+import { n } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtIcon as i } from "./icon.js";
+import "@dialpad/dialtone-icons/vue2";
+import "../chunks/icon_constants-OpYAAKwF.js";
+import "@dialpad/dialtone-icons/icons.json";
+import "./skeleton.js";
+const d = {
+  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"
+}, r = {
+  label: "",
+  count: "d-badge--count"
+}, o = {
+  "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"
+}, c = {
+  name: "DtBadge",
+  components: {
+    DtIcon: i
+  },
+  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: (t) => Object.keys(r).includes(t)
+    },
+    /**
+     * Color for the badge background
+     * @values default, info, success, warning, critical, bulletin, ai
+     */
+    type: {
+      type: String,
+      default: "default",
+      validator: (t) => Object.keys(d).includes(t)
+    },
+    /**
+     * 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: (t) => Object.keys(o).includes(t)
+    },
+    /**
+     * Used to customize the label container
+     */
+    labelClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  data() {
+    return {
+      BADGE_TYPE_MODIFIERS: d,
+      BADGE_KIND_MODIFIERS: r,
+      BADGE_DECORATION_MODIFIERS: o
+    };
+  },
+  computed: {
+    hasIcons() {
+      return this.iconLeft !== "" || this.iconRight !== "";
+    }
+  },
+  watch: {
+    $props: {
+      immediate: !0,
+      deep: !0,
+      handler() {
+        this.validateProps();
+      }
+    }
+  },
+  methods: {
+    validateProps() {
+      this.validateTypePropCombination(), this.validateDecorationPropCombination();
+    },
+    validateTypePropCombination() {
+      this.type === "ai" && this.kind === "count" && console.error("DtBadge error: type: 'ai' with kind: 'count' is an invalid combination.");
+    },
+    validateDecorationPropCombination() {
+      this.decoration && ((this.kind !== "label" || this.type !== "default") && console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'."), this.hasIcons && console.error("DtBadge error: decoration prop cannot be used with iconLeft or iconRight."));
+    }
+  }
+};
+var l = function() {
+  var e = this, a = e._self._c;
+  return a("span", { class: [
+    "d-badge",
+    e.BADGE_TYPE_MODIFIERS[e.type],
+    e.BADGE_KIND_MODIFIERS[e.kind],
+    e.BADGE_DECORATION_MODIFIERS[e.decoration]
+  ], attrs: { "data-qa": "dt-badge" } }, [e.decoration ? a("span", { staticClass: "d-badge__decorative" }) : e._e(), e.iconLeft || e.type === "ai" ? a("span", { staticClass: "d-badge__icon-left" }, [a("dt-icon", { attrs: { name: e.iconLeft || "dialpad-ai", size: "200" } })], 1) : e._e(), a("span", { class: ["d-badge__label", e.labelClass] }, [e._t("default", function() {
+    return [e._v(" " + e._s(e.text) + " ")];
+  })], 2), e.iconRight ? a("span", { staticClass: "d-badge__icon-right" }, [a("dt-icon", { attrs: { name: e.iconRight, size: "200" } })], 1) : e._e()]);
+}, s = [], g = /* @__PURE__ */ n(
+  c,
+  l,
+  s,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const h = g.exports;
+export {
+  o as BADGE_DECORATION_MODIFIERS,
+  r as BADGE_KIND_MODIFIERS,
+  d as BADGE_TYPE_MODIFIERS,
+  h as DtBadge
+};
+//# sourceMappingURL=badge.js.map

package/dist/lib/badge.js.map

@@ -0,0 +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    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"iconLeft || type === 'ai'\"\n      class=\"d-badge__icon-left\"\n    >\n      <dt-icon\n        :name=\"iconLeft || 'dialpad-ai'\"\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  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    },\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":["BADGE_TYPE_MODIFIERS","BADGE_KIND_MODIFIERS","BADGE_DECORATION_MODIFIERS","_sfc_main","DtIcon","kind","type"],"mappings":";;;;;;AAAY,MAACA,IAAuB;AAAA,EAClC,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,IAAI;AACN,GAEaC,IAAuB;AAAA,EAClC,OAAO;AAAA,EACP,OAAO;AACT,GAEaC,IAA6B;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,GCYAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAC;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,CAAAC,MAAA,OAAA,KAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAN,CAAA,EAAA,SAAAM,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAA,MAAA,OAAA,KAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,sBAAAN;AAAA,MACA,sBAAAC;AAAA,MACA,4BAAAC;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,GACA,KAAA,kCAAA;AAAA,IACA;AAAA,IAEA,8BAAA;AACA,MAAA,KAAA,SAAA,QAAA,KAAA,SAAA,WACA,QAAA,MAAA,yEAAA;AAAA,IAEA;AAAA,IAEA,oCAAA;AACA,MAAA,KAAA,gBAEA,KAAA,SAAA,WAAA,KAAA,SAAA,cACA,QAAA,MAAA,yFAAA,GAGA,KAAA,YACA,QAAA,MAAA,2EAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/banner.js

@@ -0,0 +1,200 @@
+import { M as a } from "../chunks/modal-VuMFkZFH.js";
+import r from "./utils.js";
+import { a as o } from "../chunks/sr_only_close_button-JGole5Xi.js";
+import { n as s } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { a as l, b as d, D as u } from "../chunks/notice_action-9NmtQRai.js";
+import { N as c } from "../chunks/notice_constants-c--hBFQw.js";
+import "./constants.js";
+import "vue";
+import "./icon.js";
+import "@dialpad/dialtone-icons/vue2";
+import "../chunks/icon_constants-OpYAAKwF.js";
+import "@dialpad/dialtone-icons/icons.json";
+import "./skeleton.js";
+import "./button.js";
+import "../chunks/link_constants-vIUB92L4.js";
+const p = {
+  name: "DtBanner",
+  components: {
+    DtNoticeIcon: l,
+    DtNoticeContent: d,
+    DtNoticeAction: u
+  },
+  mixins: [a, o],
+  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 r.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 r.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: !1
+    },
+    /**
+     * Pins the banner to the top of the window and pushes all app content down.
+     * @values true, false
+     */
+    pinned: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Severity level of the notice, sets the icon and background
+     * @values base, error, info, success, warning
+     */
+    kind: {
+      type: String,
+      default: "base",
+      validate(e) {
+        return c.includes(e);
+      }
+    },
+    /**
+     * Props for the notice close button.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Hides the close button from the notice
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Hides the icon from the notice
+     * @values true, false
+     */
+    hideIcon: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Hides the action from the notice
+     * @values true, false
+     */
+    hideAction: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * 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() {
+      return [
+        "d-banner",
+        {
+          error: "d-banner--error",
+          info: "d-banner--info",
+          success: "d-banner--success",
+          warning: "d-banner--warning",
+          base: "d-banner--base"
+        }[this.kind],
+        {
+          "d-banner--important": this.important,
+          "d-banner--pinned": this.pinned
+        }
+      ];
+    },
+    bannerBackgroundImage() {
+      return this.backgroundImage === "" ? null : `background-image: url(${this.backgroundImage});
+              background-size: ${this.backgroundSize};`;
+    }
+  },
+  mounted() {
+    this.important && this.focusFirstElement();
+  },
+  methods: {
+    trapFocus(e) {
+      this.important && this.focusTrappedTabPress(e);
+    }
+  }
+};
+var m = function() {
+  var t = this, n = t._self._c;
+  return n("aside", { class: t.bannerClass, style: t.bannerBackgroundImage, on: { keydown: function(i) {
+    return !i.type.indexOf("key") && t._k(i.keyCode, "tab", 9, i.key, "Tab") ? null : t.trapFocus.apply(null, arguments);
+  } } }, [n("div", { staticClass: "d-banner__dialog", class: t.dialogClass, attrs: { role: t.role, "aria-labelledby": t.titleId, "aria-describedby": t.contentId } }, [t.hideIcon ? t._e() : n("dt-notice-icon", t._g({ attrs: { kind: t.kind } }, t.$listeners), [t._t("icon")], 2), n("dt-notice-content", t._g({ attrs: { "title-id": t.titleId, "content-id": t.contentId, title: t.title }, scopedSlots: t._u([{ key: "titleOverride", fn: function() {
+    return [t._t("titleOverride")];
+  }, proxy: !0 }], null, !0) }, t.$listeners), [t._t("default")], 2), n("dt-notice-action", t._g({ attrs: { "hide-action": t.hideAction, "hide-close": t.hideClose, "close-button-props": t.closeButtonProps, "visually-hidden-close": t.visuallyHiddenClose, "visually-hidden-close-label": t.visuallyHiddenCloseLabel } }, t.$listeners), [t._t("action")], 2)], 1)]);
+}, f = [], b = /* @__PURE__ */ s(
+  p,
+  m,
+  f,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const F = b.exports;
+export {
+  F as DtBanner
+};
+//# sourceMappingURL=banner.js.map

package/dist/lib/banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner.js","sources":["../../components/banner/banner.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <aside\n    :class=\"bannerClass\"\n    :style=\"bannerBackgroundImage\"\n    @keydown.tab=\"trapFocus\"\n  >\n    <div\n      class=\"d-banner__dialog\"\n      :class=\"dialogClass\"\n      :role=\"role\"\n      :aria-labelledby=\"titleId\"\n      :aria-describedby=\"contentId\"\n    >\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n        v-on=\"$listeners\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n        v-on=\"$listeners\"\n      >\n        <template #titleOverride>\n          <!-- eslint-disable-next-line max-len -->\n          <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the banner -->\n        <slot />\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        :close-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        v-on=\"$listeners\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n */\nexport default {\n  name: 'DtBanner',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alertdialog.\n     * and will modally trap the keyboard focus in the dialog as soon as it displays.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Pins the banner to the top of the window and pushes all app content down.\n     * @values true, false\n     */\n    pinned: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Inner dialog class\n     */\n    dialogClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Banner background image\n     */\n    backgroundImage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Background image size, follows the background-size CSS property values\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n     *   CSS background-sizes\n     * </a>\n     */\n    backgroundSize: {\n      type: String,\n      default: 'cover',\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    role () {\n      return this.important ? 'alertdialog' : 'status';\n    },\n\n    bannerClass () {\n      const kindClasses = {\n        error: 'd-banner--error',\n        info: 'd-banner--info',\n        success: 'd-banner--success',\n        warning: 'd-banner--warning',\n        base: 'd-banner--base',\n      };\n\n      return [\n        'd-banner',\n        kindClasses[this.kind],\n        {\n          'd-banner--important': this.important,\n          'd-banner--pinned': this.pinned,\n        },\n      ];\n    },\n\n    bannerBackgroundImage () {\n      if (this.backgroundImage === '') return null;\n\n      return `background-image: url(${this.backgroundImage});\n              background-size: ${this.backgroundSize};`;\n    },\n  },\n\n  mounted () {\n    if (this.important) {\n      this.focusFirstElement();\n    }\n  },\n\n  methods: {\n    trapFocus (e) {\n      if (this.important) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","SrOnlyCloseButtonMixin","utils","kind","NOTICE_KINDS"],"mappings":";;;;;;;;;;;;;;;AA8DA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,GAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAC,EAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAA,EAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,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;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAAC,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA,KAAA,YAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AASA,aAAA;AAAA,QACA;AAAA,QATA;AAAA,UACA,OAAA;AAAA,UACA,MAAA;AAAA,UACA,SAAA;AAAA,UACA,SAAA;AAAA,UACA,MAAA;AAAA,QACA,EAIA,KAAA,IAAA;AAAA,QACA;AAAA,UACA,uBAAA,KAAA;AAAA,UACA,oBAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,oBAAA,KAAA,OAEA,yBAAA,KAAA,eAAA;AAAA,iCACA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,IAAA,KAAA,aACA,KAAA,kBAAA;AAAA,EAEA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA,GAAA;AACA,MAAA,KAAA,aACA,KAAA,qBAAA,CAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/breadcrumbs.js

@@ -0,0 +1,138 @@
+import { I as s, M as l } from "../chunks/link_constants-vIUB92L4.js";
+import { n as a } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtLink as i } from "./link.js";
+import u from "./utils.js";
+import "./constants.js";
+import "vue";
+const c = "d-breadcrumbs__item--selected", m = "d-breadcrumbs--inverted", _ = {
+  name: "DtBreadcrumbItem",
+  components: {
+    DtLink: i
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Passed through to link. If true, applies inverted styles to the link.
+     */
+    inverted: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Applies selected styles to the breadcrumb
+     */
+    selected: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Describes the breadcrumb. Overridden by default slot
+     */
+    label: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      BREADCRUMB_ITEM_SELECTED_MODIFIER: c
+    };
+  },
+  computed: {
+    linkKind() {
+      return this.inverted ? s : l;
+    },
+    ariaCurrent() {
+      return this.selected ? "location" : void 0;
+    }
+  }
+};
+var o = function() {
+  var e = this, r = e._self._c;
+  return r("li", { class: [
+    "d-breadcrumbs__item",
+    { [e.BREADCRUMB_ITEM_SELECTED_MODIFIER]: e.selected }
+  ], attrs: { "data-qa": "dt-breadcrumb-item" } }, [r("dt-link", e._b({ attrs: { kind: e.linkKind, "aria-current": e.ariaCurrent, "data-qa": "breadcrumb-item" } }, "dt-link", e.$attrs, !1), [e._t("default", function() {
+    return [e._v(" " + e._s(e.label) + " ")];
+  })], 2)], 1);
+}, b = [], f = /* @__PURE__ */ a(
+  _,
+  o,
+  b,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const p = f.exports, E = {
+  name: "DtBreadcrumbs",
+  components: {
+    DtBreadcrumbItem: p
+  },
+  props: {
+    /**
+     * A provided list of breadcrumbs. Overridden by default slot
+     */
+    breadcrumbs: {
+      type: Array,
+      default: () => [],
+      validate(t) {
+        return t.every(({ href: e, label: r }) => e !== void 0 && r !== void 0);
+      }
+    },
+    /**
+     * Passed through to link. If true, applies inverted styles to the link.
+     * @values true, false
+     */
+    inverted: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Descriptive label for the navigation content.
+     */
+    ariaLabel: {
+      type: String,
+      default: "breadcrumb"
+    }
+  },
+  data() {
+    return {
+      BREADCRUMBS_INVERTED_MODIFIER: m
+    };
+  },
+  methods: {
+    getBreadcrumbItemKey(t) {
+      return `breadcrumbs-item-${t}-${u.getUniqueString()}`;
+    }
+  }
+};
+var v = function() {
+  var e = this, r = e._self._c;
+  return r("nav", { class: [
+    "d-breadcrumbs",
+    { [e.BREADCRUMBS_INVERTED_MODIFIER]: e.inverted }
+  ], attrs: { "aria-label": e.ariaLabel, "data-qa": "dt-breadcrumbs" } }, [r("ol", [e._t("default", function() {
+    return e._l(e.breadcrumbs, function(n, d) {
+      return r("dt-breadcrumb-item", e._g(e._b({ key: e.getBreadcrumbItemKey(d), attrs: { inverted: e.inverted } }, "dt-breadcrumb-item", n, !1), e.$listeners));
+    });
+  })], 2)]);
+}, D = [], I = /* @__PURE__ */ a(
+  E,
+  v,
+  D,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const $ = I.exports;
+export {
+  m as BREADCRUMBS_INVERTED_MODIFIER,
+  c as BREADCRUMB_ITEM_SELECTED_MODIFIER,
+  p as DtBreadcrumbItem,
+  $ as DtBreadcrumbs
+};
+//# sourceMappingURL=breadcrumbs.js.map

package/dist/lib/breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.js","sources":["../../components/breadcrumbs/breadcrumbs_constants.js","../../components/breadcrumbs/breadcrumb_item.vue","../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["export const BREADCRUMB_ITEM_SELECTED_MODIFIER = 'd-breadcrumbs__item--selected';\nexport const BREADCRUMBS_INVERTED_MODIFIER = 'd-breadcrumbs--inverted';\n","<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :aria-current=\"ariaCurrent\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot default slot for breadcrumb item's label -->\n      <slot>\n        {{ label }}\n      </slot>\n    </dt-link>\n  </li>\n</template>\n\n<script>\nimport { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './breadcrumbs_constants';\nimport { DtLink } from '../link';\nimport { INVERTED, MUTED } from '../link/link_constants';\n\nexport default {\n  name: 'DtBreadcrumbItem',\n\n  components: {\n    DtLink,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies selected styles to the breadcrumb\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Describes the breadcrumb. Overridden by default slot\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\n    };\n  },\n\n  computed: {\n    linkKind () {\n      return this.inverted ? INVERTED : MUTED;\n    },\n\n    ariaCurrent () {\n      return this.selected ? 'location' : undefined;\n    },\n  },\n};\n</script>\n","<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n          v-on=\"$listeners\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: 'breadcrumb',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"names":["BREADCRUMB_ITEM_SELECTED_MODIFIER","BREADCRUMBS_INVERTED_MODIFIER","_sfc_main","DtLink","INVERTED","MUTED","DtBreadcrumbItem","breadcrumbs","href","label","index","utils"],"mappings":";;;;;;AAAY,MAACA,IAAoC,iCACpCC,IAAgC,2BC0B7CC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,mCAAAH;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,KAAA,WAAAI,IAAAC;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;qBC3CAH,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAI;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,SAAAC,GAAA;AACA,eAAAA,EAAA,MAAA,CAAA,EAAA,MAAAC,GAAA,OAAAC,EAAA,MACAD,MAAA,UAAAC,MAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,+BAAAR;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,qBAAAS,GAAA;AACA,aAAA,oBAAAA,CAAA,IAAAC,EAAA,gBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/button-group.js

@@ -0,0 +1,45 @@
+import { n as o } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+const e = {
+  start: "d-btn-group--start",
+  end: "d-btn-group--end",
+  "space-between": "d-btn-group--space-between"
+}, a = {
+  name: "DtButtonGroup",
+  props: {
+    /**
+     * Alignment of the buttons inside the container
+     */
+    alignment: {
+      type: String,
+      default: "start",
+      validator: (n) => Object.keys(e).includes(n)
+    }
+  },
+  data() {
+    return {
+      BUTTON_GROUP_ALIGNMENT: e
+    };
+  }
+};
+var s = function() {
+  var t = this, r = t._self._c;
+  return r("div", { class: [
+    "d-btn-group",
+    t.BUTTON_GROUP_ALIGNMENT[t.alignment]
+  ], attrs: { role: "group" } }, [t._t("default")], 2);
+}, u = [], _ = /* @__PURE__ */ o(
+  a,
+  s,
+  u,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const p = _.exports;
+export {
+  e as BUTTON_GROUP_ALIGNMENT,
+  p as DtButtonGroup
+};
+//# sourceMappingURL=button-group.js.map

package/dist/lib/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","sources":["../../components/button_group/button_group_constants.js","../../components/button_group/button_group.vue"],"sourcesContent":["export const BUTTON_GROUP_ALIGNMENT = {\n  start: 'd-btn-group--start',\n  end: 'd-btn-group--end',\n  'space-between': 'd-btn-group--space-between',\n};\n","<template>\n  <div\n    :class=\"[\n      'd-btn-group',\n      BUTTON_GROUP_ALIGNMENT[alignment],\n    ]\"\n    role=\"group\"\n  >\n    <!-- @slot Default slot for button items -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { BUTTON_GROUP_ALIGNMENT } from './button_group_constants';\n\nexport default {\n  name: 'DtButtonGroup',\n\n  props: {\n    /**\n     * Alignment of the buttons inside the container\n     */\n    alignment: {\n      type: String,\n      default: 'start',\n      validator: (alignment) => Object.keys(BUTTON_GROUP_ALIGNMENT).includes(alignment),\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_GROUP_ALIGNMENT,\n    };\n  },\n};\n</script>\n"],"names":["BUTTON_GROUP_ALIGNMENT","_sfc_main","alignment"],"mappings":";AAAY,MAACA,IAAyB;AAAA,EACpC,OAAO;AAAA,EACP,KAAK;AAAA,EACL,iBAAiB;AACnB,GCYAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAF,CAAA,EAAA,SAAAE,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,wBAAAF;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}