@dialpad/dialtone-vue 2.125.0 → 2.125.1

package/dist/lib/attachment-carousel.js

@@ -0,0 +1,250 @@
+import { n as i } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtImageViewer as c } from "./image-viewer.js";
+import { DtButton as o } from "./button.js";
+import { DtIcon as l } from "./icon.js";
+import "../chunks/modal-VuMFkZFH.js";
+import "./constants.js";
+import "@linusborg/vue-simple-portal";
+import "vue";
+import "../chunks/link_constants-vIUB92L4.js";
+import "@dialpad/dialtone-icons/vue2";
+import "../chunks/icon_constants-OpYAAKwF.js";
+import "@dialpad/dialtone-icons/icons.json";
+import "./skeleton.js";
+const n = {
+  name: "DtProgressBar",
+  props: {
+    progressbarAriaLabel: {
+      type: String,
+      required: !0
+    },
+    progress: {
+      type: Number,
+      default: 20
+    }
+  },
+  data: () => ({
+    circleCircumference: 50
+  }),
+  computed: {
+    cssVars() {
+      return {
+        "--stroke-dashoffset": this.circleCircumference - this.circleCircumference * this.progress / 100,
+        "--stroke-dasharray": this.circleCircumference
+      };
+    }
+  },
+  mounted() {
+    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();
+  }
+};
+var m = function() {
+  var e = this, t = e._self._c;
+  return t("div", { attrs: { role: "progressbar", "aria-label": e.progressbarAriaLabel, tabindex: "-1", "aria-valuenow": e.progress, "aria-valuemin": "0", "aria-valuemax": "100" } }, [t("svg", { staticClass: "progress-bar", style: e.cssVars }, [t("circle", { ref: "progressbarCircle", staticClass: "progress-bar__circle", attrs: { r: "8", cx: "12", cy: "12" } }), t("circle", { staticClass: "progress-bar__circle", attrs: { r: "8", cx: "12", cy: "12" } })])]);
+}, u = [], d = /* @__PURE__ */ i(
+  n,
+  m,
+  u,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const h = d.exports, p = {
+  name: "DtImageCarousel",
+  components: {
+    DtImageViewer: c,
+    DtButton: o,
+    DtIcon: l,
+    DtProgressBar: h
+  },
+  props: {
+    mediaItem: {
+      type: Object,
+      required: !0
+    },
+    index: {
+      type: Number,
+      required: !0
+    },
+    closeAriaLabel: {
+      type: String,
+      required: !0
+    },
+    clickToOpenAriaLabel: {
+      type: String,
+      required: !0
+    },
+    progressbarAriaLabel: {
+      type: String,
+      required: !0
+    }
+  },
+  emits: [
+    /**
+     * Emitted when media close button is clicked to remove the image
+     *
+     * @event remove-media
+     * @type {Number}
+     */
+    "remove-media"
+  ],
+  methods: {
+    removeMediaItem(r) {
+      this.$emit("remove-media", r);
+    }
+  }
+};
+var f = function() {
+  var e = this, t = e._self._c;
+  return t("li", { staticClass: "dt-attachment-image" }, [t("dt-image-viewer", { attrs: { "image-button-class": "dt-attachment-image__image-viewer", "image-src": e.mediaItem.path, "image-alt": e.mediaItem.altText, "close-aria-label": e.closeAriaLabel, "aria-label": e.clickToOpenAriaLabel } }), t("div", { staticClass: "dt-attachment-image__top-right" }, [e.mediaItem.isUploading ? t("dt-progress-bar", { staticClass: "dt-attachment-image__progress-bar", attrs: { progress: e.mediaItem.progress, "progressbar-aria-label": e.progressbarAriaLabel } }) : e._e(), t("dt-button", { staticClass: "dt-attachment-image__close-button", attrs: { id: `closeButton-${e.index}`, tabindex: "0", circle: "", size: "xs", importance: "clear", "aria-label": e.closeAriaLabel }, on: { click: function(a) {
+    return e.removeMediaItem(e.index);
+  } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [t("dt-icon", { attrs: { name: "close", size: "200" } })];
+  }, proxy: !0 }]) })], 1)], 1);
+}, _ = [], g = /* @__PURE__ */ i(
+  p,
+  f,
+  _,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const b = g.exports, w = 64, v = {
+  name: "DtRecipeAttachmentCarousel",
+  components: {
+    DtButton: o,
+    DtIcon: l,
+    DtImageCarousel: b
+  },
+  mixins: [],
+  /* inheritAttrs: false is generally an option we want to set on library
+    components. This allows any attributes passed in that are not recognized
+    as props to be passed down to another element or component using v-bind:$attrs
+    more info: https://vuejs.org/v2/api/#inheritAttrs */
+  // inheritAttrs: false,
+  props: {
+    /**
+     * media - object array of media objects
+     * @type {Array}
+     *
+     * Object: {
+     *  path: String,
+     *  altText: String | null,
+     * }
+     */
+    mediaList: {
+      type: Array,
+      default: () => []
+    },
+    closeAriaLabel: {
+      type: String,
+      required: !0
+    },
+    clickToOpenAriaLabel: {
+      type: String,
+      required: !0
+    },
+    progressbarAriaLabel: {
+      type: String,
+      required: !0
+    },
+    leftArrowAriaLabel: {
+      type: String,
+      required: !0
+    },
+    rightArrowAriaLabel: {
+      type: String,
+      required: !0
+    }
+  },
+  emits: [
+    /**
+     * Emitted when popover is shown or hidden
+     *
+     * @event remove-media
+     * @type {Number}
+     */
+    "remove-media"
+  ],
+  data() {
+    return {
+      showCloseButton: {},
+      showRightArrow: !0,
+      showLeftArrow: !1,
+      isMounted: !1
+    };
+  },
+  computed: {
+    filteredMediaList() {
+      return this.mediaList.filter((r) => r.type === "image" || r.type === "video");
+    }
+  },
+  mounted: function() {
+    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0, this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;
+  },
+  methods: {
+    onItemFocus(r) {
+      r.currentTarget.scrollIntoView({ behavior: "smooth" });
+    },
+    mediaComponent(r) {
+      switch (r) {
+        case "image":
+          return "dt-image-carousel";
+        default:
+          return null;
+      }
+    },
+    removeMediaItem(r) {
+      this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth + w, this.$emit("remove-media", r);
+    },
+    closeButton(r, e) {
+      this.showCloseButton[e] = r;
+    },
+    handleScroll() {
+      const r = this.$refs.carousel;
+      this.showLeftArrow = r.scrollLeft > 0, this.showRightArrow = r.scrollLeft + r.clientWidth !== r.scrollWidth;
+    },
+    leftScroll() {
+      this.$refs.carousel.scrollTo({
+        left: this.$refs.carousel.scrollLeft - 100,
+        behavior: "smooth"
+      });
+    },
+    rightScroll() {
+      this.$refs.carousel.scrollTo({
+        left: this.$refs.carousel.scrollLeft + 100,
+        behavior: "smooth"
+      });
+    }
+  }
+};
+var A = function() {
+  var e = this, t = e._self._c;
+  return t("div", { staticClass: "dt-attachment-carousel", attrs: { role: "presentation" } }, [e.mediaList.length > 0 ? t("ul", { ref: "carousel", staticClass: "dt-attachment-carousel__media-list", on: { scroll: e.handleScroll } }, e._l(e.filteredMediaList, function(a, s) {
+    return t(e.mediaComponent(a.type), { key: `media-${s}`, tag: "component", attrs: { index: s, "media-item": a, "close-aria-label": e.closeAriaLabel, "click-to-open-aria-label": e.clickToOpenAriaLabel, "progressbar-aria-label": e.progressbarAriaLabel }, on: { "remove-media": function(C) {
+      return e.removeMediaItem(s);
+    }, focusin: e.onItemFocus } });
+  }), 1) : e._e(), t("dt-button", { directives: [{ name: "show", rawName: "v-show", value: e.showLeftArrow, expression: "showLeftArrow" }], staticClass: "dt-attachment-carousel__arrow dt-attachment-carousel__arrow--left", attrs: { tabindex: "-1", "aria-label": e.leftArrowAriaLabel, circle: "", size: "xs", importance: "clear" }, on: { click: e.leftScroll }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [t("dt-icon", { attrs: { name: "arrow-left", size: "100" } })];
+  }, proxy: !0 }]) }), t("dt-button", { directives: [{ name: "show", rawName: "v-show", value: e.showRightArrow, expression: "showRightArrow" }], staticClass: "dt-attachment-carousel__arrow dt-attachment-carousel__arrow--right", attrs: { tabindex: "-1", "aria-label": e.rightArrowAriaLabel, circle: "", size: "xs", importance: "clear" }, on: { click: e.rightScroll }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [t("dt-icon", { attrs: { name: "arrow-right", size: "100" } })];
+  }, proxy: !0 }]) })], 1);
+}, L = [], y = /* @__PURE__ */ i(
+  v,
+  A,
+  L,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const F = y.exports;
+export {
+  F as DtRecipeAttachmentCarousel
+};
+//# sourceMappingURL=attachment-carousel.js.map

package/dist/lib/attachment-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment-carousel.js","sources":["../../recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue","../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<script>\nexport default {\n  name: 'DtProgressBar',\n  props: {\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progress: {\n      type: Number,\n      default: 20,\n    },\n  },\n\n  data: () => ({\n    circleCircumference: 50,\n  }),\n\n  computed: {\n    cssVars () {\n      return {\n        '--stroke-dashoffset':\n          (this.circleCircumference - (this.circleCircumference * this.progress / 100)),\n\n        '--stroke-dasharray': this.circleCircumference,\n      };\n    },\n  },\n\n  mounted () {\n    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();\n  },\n};\n</script>\n\n<template>\n  <div\n    role=\"progressbar\"\n    :aria-label=\"progressbarAriaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <svg\n      class=\"progress-bar\"\n      :style=\"cssVars\"\n    >\n      <circle\n        ref=\"progressbarCircle\"\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"progress-bar__circle\"\n      />\n      <circle\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"progress-bar__circle\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style lang=\"less\">\n.progress-bar {\n  width: var(--dt-size-550);\n  height: var(--dt-size-550);\n}\n\n.progress-bar__circle {\n  fill: none;\n  stroke-width: 2;\n  stroke-dasharray: var(--stroke-dasharray);\n}\n\n.progress-bar__circle:nth-child(1) {\n  stroke-dashoffset: 0;\n  stroke: var(--dt-color-black-100);\n}\n\n.progress-bar__circle:nth-child(2) {\n  stroke-dashoffset: var(--stroke-dashoffset);\n  stroke: var(--dt-color-purple-500);\n  transition: stroke-dashoffset 500ms linear;\n}\n</style>\n","<template>\n  <li\n    class=\"dt-attachment-image\"\n  >\n    <dt-image-viewer\n      image-button-class=\"dt-attachment-image__image-viewer\"\n      :image-src=\"mediaItem.path\"\n      :image-alt=\"mediaItem.altText\"\n      :close-aria-label=\"closeAriaLabel\"\n      :aria-label=\"clickToOpenAriaLabel\"\n    />\n\n    <!-- Loader / Close button -->\n    <div\n      class=\"dt-attachment-image__top-right\"\n    >\n      <dt-progress-bar\n        v-if=\"mediaItem.isUploading\"\n        class=\"dt-attachment-image__progress-bar\"\n        :progress=\"mediaItem.progress\"\n        :progressbar-aria-label=\"progressbarAriaLabel\"\n      />\n      <dt-button\n        :id=\"`closeButton-${index}`\"\n        tabindex=\"0\"\n        class=\"dt-attachment-image__close-button\"\n        circle\n        size=\"xs\"\n        importance=\"clear\"\n        :aria-label=\"closeAriaLabel\"\n        @click=\"removeMediaItem(index)\"\n      >\n        <template #icon>\n          <dt-icon\n            name=\"close\"\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </div>\n  </li>\n</template>\n\n<script>\nimport { DtImageViewer } from '@/components/image_viewer';\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIcon,\n    DtProgressBar,\n  },\n\n  props: {\n    mediaItem: {\n      type: Object,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      required: true,\n    },\n\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    clickToOpenAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when media close button is clicked to remove the image\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  methods: {\n    removeMediaItem (index) {\n      this.$emit('remove-media', index);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-attachment-image {\n  position: relative;\n\n  &:focus-within .dt-attachment-image__close-button, &:hover .dt-attachment-image__close-button {\n    opacity: 1;\n  }\n}\n.dt-attachment-image__image-viewer {\n  height: var(--dt-size-700);\n  width: var(--dt-size-700);\n  border: var(--dt-space-100) solid;\n  border-radius: var(--br4);\n  border-width: var(--dt-size-350);\n  border-color: var(--dt-color-border-subtle);\n  object-fit: cover;\n}\n.dt-attachment-image__top-right {\n  position: absolute;\n  top: var(--dt-size-100);\n  right: var(--dt-size-100);\n}\n.dt-attachment-image__close-button {\n  opacity: 0;\n  position: absolute;\n  top: inherit;\n  right: inherit;\n  color: var(--dt-color-neutral-white);\n  background-color: var(--dt-color-black-400);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-200);\n  border-color: var(--dt-color-neutral-white);\n}\n.dt-attachment-image__progress-bar {\n  position: absolute;\n  top: inherit;\n  right: inherit;\n  background-color: var(--dt-color-neutral-white);\n  border-radius: 50%;\n  display: flex;\n  transform: rotate(-90deg);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-200);\n  border-color: var(--dt-color-border-subtle);\n}\n</style>\n","<template>\n  <div\n    class=\"dt-attachment-carousel\"\n    role=\"presentation\"\n  >\n    <ul\n      v-if=\"mediaList.length > 0\"\n      ref=\"carousel\"\n      class=\"dt-attachment-carousel__media-list\"\n      @scroll=\"handleScroll\"\n    >\n      <!-- media list -->\n      <component\n        :is=\"mediaComponent(mediaItem.type)\"\n        v-for=\"(mediaItem, index) in filteredMediaList\"\n        :key=\"`media-${index}`\"\n        :index=\"index\"\n        :media-item=\"mediaItem\"\n        :close-aria-label=\"closeAriaLabel\"\n        :click-to-open-aria-label=\"clickToOpenAriaLabel\"\n        :progressbar-aria-label=\"progressbarAriaLabel\"\n        @remove-media=\"removeMediaItem(index)\"\n        @focusin=\"onItemFocus\"\n      />\n    </ul>\n\n    <!-- Carousel Arrows -->\n    <dt-button\n      v-show=\"showLeftArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"leftArrowAriaLabel\"\n      class=\"dt-attachment-carousel__arrow dt-attachment-carousel__arrow--left\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"leftScroll\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"arrow-left\"\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n    <dt-button\n      v-show=\"showRightArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"rightArrowAriaLabel\"\n      class=\"dt-attachment-carousel__arrow dt-attachment-carousel__arrow--right\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"rightScroll\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"arrow-right\"\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    DtIcon,\n    DtImageCarousel,\n  },\n\n  mixins: [],\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * media - object array of media objects\n     * @type {Array}\n     *\n     * Object: {\n     *  path: String,\n     *  altText: String | null,\n     * }\n     */\n    mediaList: {\n      type: Array,\n      default: () => [],\n    },\n\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    clickToOpenAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    leftArrowAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    rightArrowAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      showCloseButton: {},\n      showRightArrow: true,\n      showLeftArrow: false,\n      isMounted: false,\n    };\n  },\n\n  computed: {\n    filteredMediaList () {\n      return this.mediaList.filter((mediaItem) => mediaItem.type === 'image' || mediaItem.type === 'video');\n    },\n  },\n\n  mounted: function () {\n    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;\n    this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;\n  },\n\n  methods: {\n    onItemFocus (e) {\n      e.currentTarget.scrollIntoView({ behavior: 'smooth' });\n    },\n\n    mediaComponent (type) {\n      switch (type) {\n        case 'image':\n          return 'dt-image-carousel';\n        default:\n          // unknown media type\n          return null;\n      }\n    },\n\n    removeMediaItem (index) {\n      // make sure the carousel arrows is updated. 64 is the width of each media item\n      this.showRightArrow = this.$refs.carousel.scrollWidth > (this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH);\n      this.$emit('remove-media', index);\n    },\n\n    closeButton (val, index) {\n      this.showCloseButton[index] = val;\n    },\n\n    handleScroll () {\n      const carousel = this.$refs.carousel;\n      this.showLeftArrow = carousel.scrollLeft > 0;\n      this.showRightArrow = !((carousel.scrollLeft + carousel.clientWidth) === carousel.scrollWidth);\n    },\n\n    leftScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft - 100,\n        behavior: 'smooth',\n      });\n    },\n\n    rightScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft + 100,\n        behavior: 'smooth',\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-attachment-carousel {\n  position: relative;\n  max-height: 100px;\n  width: var(--dt-space-1000);\n}\n\n.dt-attachment-carousel__media-list {\n  display: flex;\n  flex-direction: row;\n  padding-left: 0px;\n  overflow-x: scroll;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n}\n\n.dt-attachment-carousel__arrow {\n  position: absolute;\n  opacity: 0;\n\n  .dt-attachment-carousel:hover & {\n    opacity: 1;\n  }\n  background-color: var(--dt-color-neutral-white);\n  top: var(--dt-space-30-percent);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-100);\n  border-color: var(--bc-default);\n}\n.dt-attachment-carousel__arrow--left {\n  left: var(--dt-space-300);\n}\n.dt-attachment-carousel__arrow--right {\n  right: var(--dt-space-300);\n}\n\n.dt-attachment-carousel__image-viewer {\n  height: var(--dt-size-700);\n  width: var(--dt-size-700);\n  border-radius: var(--br4);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-350);\n  border-color: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["_sfc_main","DtImageViewer","DtButton","DtIcon","DtProgressBar","index","MEDIA_ITEM_WIDTH","DtImageCarousel","mediaItem","e","type","val","carousel"],"mappings":"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"}

package/dist/lib/avatar.js

@@ -0,0 +1,369 @@
+import { getUniqueString as l, getRandomElement as o } from "./utils.js";
+import d from "@dialpad/dialtone-icons/icons.json";
+import { I as c } from "../chunks/icon_constants-OpYAAKwF.js";
+import { n as m } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtPresence as u } from "./presence.js";
+import { DtIcon as v } from "./icon.js";
+import "./constants.js";
+import "vue";
+import "@dialpad/dialtone-icons/vue2";
+import "./skeleton.js";
+const s = {
+  xs: "d-avatar--xs",
+  sm: "d-avatar--sm",
+  md: "d-avatar--md",
+  lg: "d-avatar--lg",
+  xl: "d-avatar--xl"
+}, f = {
+  default: "",
+  icon: "d-avatar__icon",
+  initials: "d-avatar__initials"
+}, p = {
+  md: "d-avatar__presence--md",
+  lg: "d-avatar__presence--lg"
+}, i = {
+  NONE: "",
+  BUSY: "busy",
+  AWAY: "away",
+  OFFLINE: "offline",
+  ACTIVE: "active"
+}, _ = {
+  xs: "100",
+  sm: "200",
+  md: "300",
+  lg: "500",
+  xl: "600"
+}, g = [
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "1000",
+  "1100",
+  "1200",
+  "1300",
+  "1400",
+  "1500",
+  "1600",
+  "1700",
+  "1800"
+], n = (a) => a > 1;
+function I() {
+  return [void 0, ...d];
+}
+const h = (a) => {
+  if (typeof a != "string" || !a.trim())
+    return "";
+  const e = a.trim().split(/\s+/g);
+  return e.length === 1 ? e.join("").substring(0, 2) : e.filter((t, r) => r === 0 || r === e.length - 1).map((t) => t.slice(0, 1).toUpperCase()).join("");
+}, S = I(), y = {
+  name: "DtAvatar",
+  components: { DtPresence: u, DtIcon: v },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Id of the avatar content wrapper element
+     */
+    id: {
+      type: String,
+      default() {
+        return l();
+      }
+    },
+    /**
+     * Pass in a seed to get the random color generation based on that string. For example if you pass in a
+     * user ID as the string it will return the same randomly generated colors every time for that user.
+     */
+    seed: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic
+     * if the seed prop is set.
+     */
+    color: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The size of the avatar
+     * @values xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (a) => Object.keys(s).includes(a)
+    },
+    /**
+     * Used to customize the avatar container
+     */
+    avatarClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Set classes on the avatar canvas. Wrapper around the core avatar image.
+     */
+    canvasClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Pass through classes. Used to customize the avatar icon
+     */
+    iconClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Determines whether to show the presence indicator for
+     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
+     * or 'active'. By default, it's null and nothing is shown.
+     * @values null, busy, away, offline, active
+     */
+    presence: {
+      type: String,
+      default: i.NONE,
+      validator: (a) => Object.values(i).includes(a)
+    },
+    /**
+     * A set of props to be passed into the presence component.
+     */
+    presenceProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Determines whether to show a group avatar.
+     * Limit to 2 digits max, more than 99 will be rendered as “99+”.
+     * if the number is 1 or less it would just show the regular avatar as if group had not been set.
+     */
+    group: {
+      type: Number,
+      default: void 0,
+      validator: (a) => n(a)
+    },
+    /**
+     * The icon that overlays the avatar
+     */
+    overlayIcon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The text that overlays the avatar
+     */
+    overlayText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Used to customize the avatar overlay
+     */
+    overlayClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Source of the image
+     */
+    imageSrc: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Alt attribute of the image, required if imageSrc is provided.
+     * Can be set to '' (empty string) if the image is described
+     * in text nearby
+     */
+    imageAlt: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Icon name to be displayed on the avatar
+     */
+    iconName: {
+      type: String,
+      default: void 0,
+      validator: (a) => S.includes(a)
+    },
+    /**
+     * Icon size to be displayed on the avatar
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    iconSize: {
+      type: String,
+      default: "",
+      validator: (a) => !a || Object.keys(c).includes(a)
+    },
+    /**
+     * Full name used to extract initials.
+     */
+    fullName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Makes the avatar focusable and clickable,
+     * emits a click event when clicked.
+     */
+    clickable: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Descriptive label for the icon.
+     * To avoid a11y issues, set this prop if clickable and iconName are set.
+     */
+    iconAriaLabel: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: [
+    /**
+     * Avatar click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  data() {
+    return {
+      AVATAR_SIZE_MODIFIERS: s,
+      AVATAR_KIND_MODIFIERS: f,
+      AVATAR_PRESENCE_SIZE_MODIFIERS: p,
+      AVATAR_ICON_SIZES: _,
+      imageLoadedSuccessfully: null,
+      formattedInitials: "",
+      initializing: !1
+    };
+  },
+  computed: {
+    isNotIconType() {
+      return !this.iconName;
+    },
+    avatarClasses() {
+      return [
+        "d-avatar",
+        s[this.validatedSize],
+        this.avatarClass,
+        {
+          "d-avatar--group": this.showGroup,
+          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,
+          "d-avatar--clickable": this.clickable
+        }
+      ];
+    },
+    overlayClasses() {
+      return [
+        "d-avatar__overlay",
+        this.overlayClass
+      ];
+    },
+    showGroup() {
+      return n(this.group);
+    },
+    formattedGroup() {
+      return this.group > 99 ? "99+" : this.group;
+    },
+    validatedSize() {
+      return this.group ? "xs" : this.size;
+    },
+    showImage() {
+      return this.imageLoadedSuccessfully !== !1 && this.imageSrc;
+    }
+  },
+  watch: {
+    fullName: {
+      immediate: !0,
+      handler() {
+        this.formatInitials();
+      }
+    },
+    size: {
+      immediate: !0,
+      handler() {
+        this.formatInitials();
+      }
+    },
+    group: {
+      immediate: !0,
+      handler() {
+        this.formatInitials();
+      }
+    },
+    imageSrc(a) {
+      this.imageLoadedSuccessfully = null, a && (this.validateProps(), this.setImageListeners());
+    }
+  },
+  mounted() {
+    this.validateProps(), this.setImageListeners();
+  },
+  methods: {
+    async setImageListeners() {
+      await this.$nextTick();
+      const a = this.$refs.avatarImage;
+      a && (a.addEventListener("load", () => this._loadedImageEventHandler(a), { once: !0 }), a.addEventListener("error", () => this._erroredImageEventHandler(a), { once: !0 }));
+    },
+    formatInitials() {
+      const a = h(this.fullName);
+      this.validatedSize === "xs" ? this.formattedInitials = "" : this.validatedSize === "sm" ? this.formattedInitials = a[0] : this.formattedInitials = a;
+    },
+    getColor() {
+      return this.color ?? o(g, this.seed);
+    },
+    _loadedImageEventHandler(a) {
+      this.imageLoadedSuccessfully = !0, a.classList.remove("d-d-none");
+    },
+    _erroredImageEventHandler(a) {
+      this.imageLoadedSuccessfully = !1, a.classList.add("d-d-none");
+    },
+    validateProps() {
+      this.imageSrc && this.imageAlt === void 0 && console.error('image-alt required if image-src is provided. Can be set to "" (empty string) if the image is described in text nearby');
+    },
+    handleClick(a) {
+      this.clickable && this.$emit("click", a);
+    }
+  }
+};
+var A = function() {
+  var e = this, t = e._self._c;
+  return t(e.clickable ? "button" : "div", { tag: "component", class: e.avatarClasses, attrs: { id: e.id, "data-qa": "dt-avatar" }, on: { click: e.handleClick } }, [t("div", { ref: "canvas", class: [
+    e.canvasClass,
+    "d-avatar__canvas",
+    { "d-avatar--image-loaded": e.imageLoadedSuccessfully }
+  ] }, [e.showImage ? t("img", { ref: "avatarImage", staticClass: "d-avatar__image", attrs: { "data-qa": "dt-avatar-image", src: e.imageSrc, alt: e.imageAlt } }) : e.iconName ? t("dt-icon", { class: [e.iconClass, e.AVATAR_KIND_MODIFIERS.icon], attrs: { name: e.iconName, "aria-label": e.iconAriaLabel, size: e.iconSize || e.AVATAR_ICON_SIZES[e.size], "data-qa": "dt-avatar-icon" } }) : t("span", { class: [e.AVATAR_KIND_MODIFIERS.initials] }, [e._v(" " + e._s(e.formattedInitials) + " ")])], 1), e.overlayIcon || e.overlayText ? t("div", { class: e.overlayClasses }, [e.overlayIcon ? t("dt-icon", { staticClass: "d-avatar__overlay-icon", attrs: { name: e.overlayIcon } }) : e.overlayText ? t("p", { staticClass: "d-avatar__overlay-text" }, [e._v(" " + e._s(e.overlayText) + " ")]) : e._e()], 1) : e._e(), e.showGroup ? t("span", { staticClass: "d-avatar__count", attrs: { "data-qa": "dt-avatar-count" } }, [e._v(e._s(e.formattedGroup))]) : e._e(), e.presence && !e.showGroup ? t("dt-presence", e._b({ class: [
+    "d-avatar__presence",
+    e.AVATAR_PRESENCE_SIZE_MODIFIERS[e.size]
+  ], attrs: { presence: e.presence, "data-qa": "dt-presence" } }, "dt-presence", e.presenceProps, !1)) : e._e()], 1);
+}, E = [], C = /* @__PURE__ */ m(
+  y,
+  A,
+  E,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const V = C.exports;
+export {
+  g as AVATAR_COLORS,
+  n as AVATAR_GROUP_VALIDATOR,
+  _ as AVATAR_ICON_SIZES,
+  f as AVATAR_KIND_MODIFIERS,
+  p as AVATAR_PRESENCE_SIZE_MODIFIERS,
+  i as AVATAR_PRESENCE_STATES,
+  s as AVATAR_SIZE_MODIFIERS,
+  V as DtAvatar
+};
+//# sourceMappingURL=avatar.js.map