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

package/dist/lib/group-row.js

@@ -0,0 +1,115 @@
+import { DtIcon as r } from "./icon.js";
+import { safeConcatStrings as o } from "./utils.js";
+import { n } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtRecipeGeneralRow as i } from "./general-row.js";
+import "@dialpad/dialtone-icons/vue2";
+import "../chunks/icon_constants-OpYAAKwF.js";
+import "@dialpad/dialtone-icons/icons.json";
+import "./skeleton.js";
+import "./constants.js";
+import "vue";
+import "./emoji-text-wrapper.js";
+import "../chunks/index-o4OMWMuv.js";
+import "emoji-regex";
+import "emoji-toolkit/emoji_strategy.json";
+import "./badge.js";
+import "./button.js";
+import "../chunks/link_constants-vIUB92L4.js";
+import "./tooltip.js";
+import "../chunks/popover_constants-qjlEkroB.js";
+import "tippy.js";
+import "./lazy-show.js";
+const a = {
+  name: "DtRecipeGroupRow",
+  components: {
+    DtIcon: r,
+    DtRecipeGeneralRow: i
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Screen reader will read out the number of users in the group using this text. Ex: "2 users"
+     */
+    groupCountText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Names of the group members
+     */
+    names: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Number of unread messages
+     */
+    unreadCount: {
+      type: String,
+      default: null
+    },
+    /**
+     * Text shown when the unread count is hovered.
+     */
+    unreadCountTooltip: {
+      type: String,
+      default: null
+    },
+    /**
+     * Styles the row with an increased font weight to convey it has unreads. This must be true to see
+     * the unread count badge.
+     */
+    hasUnreads: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Determines if the row is selected
+     */
+    selected: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Shows an "is typing" animation over the avatar when true.
+     */
+    isTyping: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    /**
+     * Native click event on the row itself
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  computed: {
+    ariaLabel() {
+      return o([this.groupCountText, this.names]);
+    }
+  }
+};
+var p = function() {
+  var t = this, e = t._self._c;
+  return e("dt-recipe-general-row", t._g(t._b({ attrs: { description: t.names, "aria-label": t.ariaLabel, "unread-count": t.unreadCount, "has-unreads": t.hasUnreads, "unread-count-tooltip": t.unreadCountTooltip, selected: t.selected, "is-typing": t.isTyping }, scopedSlots: t._u([{ key: "left", fn: function() {
+    return [e("dt-icon", { attrs: { name: "users", size: "300" } })];
+  }, proxy: !0 }]) }, "dt-recipe-general-row", t.$attrs, !1), t.$listeners));
+}, s = [], l = /* @__PURE__ */ n(
+  a,
+  p,
+  s,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const L = l.exports;
+export {
+  L as DtRecipeGroupRow
+};
+//# sourceMappingURL=group-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group-row.js","sources":["../../recipes/leftbar/group_row/group_row.vue"],"sourcesContent":["<template>\n  <dt-recipe-general-row\n    :description=\"names\"\n    :aria-label=\"ariaLabel\"\n    :unread-count=\"unreadCount\"\n    :has-unreads=\"hasUnreads\"\n    :unread-count-tooltip=\"unreadCountTooltip\"\n    :selected=\"selected\"\n    :is-typing=\"isTyping\"\n    v-bind=\"$attrs\"\n    v-on=\"$listeners\"\n  >\n    <template #left>\n      <dt-icon\n        name=\"users\"\n        size=\"300\"\n      />\n    </template>\n  </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport DtIcon from '@/components/icon/icon.vue';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGroupRow',\n\n  components: {\n    DtIcon,\n    DtRecipeGeneralRow,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * Screen reader will read out the number of users in the group using this text. Ex: \"2 users\"\n     */\n    groupCountText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Names of the group members\n     */\n    names: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text shown when the unread count is hovered.\n     */\n    unreadCountTooltip: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    ariaLabel () {\n      return safeConcatStrings([this.groupCountText, this.names]);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtIcon","DtRecipeGeneralRow","safeConcatStrings"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0BA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAC;AAAA,IACA,oBAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,oBAAA;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,UAAA;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AACA,aAAAC,EAAA,CAAA,KAAA,gBAAA,KAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/lib/grouped-chip.js

@@ -0,0 +1,45 @@
+import { n as o } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtChip as n } from "./chip.js";
+import "./utils.js";
+import "./constants.js";
+import "vue";
+import "./button.js";
+import "../chunks/link_constants-vIUB92L4.js";
+import "./icon.js";
+import "@dialpad/dialtone-icons/vue2";
+import "../chunks/icon_constants-OpYAAKwF.js";
+import "@dialpad/dialtone-icons/icons.json";
+import "./skeleton.js";
+const r = {
+  name: "DtRecipeGroupedChip",
+  components: {
+    DtChip: n
+  },
+  computed: {}
+};
+var i = function() {
+  var t = this, e = t._self._c;
+  return e("div", { staticClass: "dt-grouped-chip", attrs: { "data-qa": "grouped-chip" } }, [e("dt-chip", { staticClass: "dt-chip-content dt-chip-content--left", attrs: { "hide-close": !0, interactive: !1, "content-class": "d-fs100", size: "xs", "grouped-chip": !0 }, scopedSlots: t._u([t.$slots.leftIcon ? { key: "icon", fn: function() {
+    return [t.$slots.leftIcon ? e("div", { attrs: { "data-qa": "left-grouped-chip-icon" } }, [t._t("leftIcon")], 2) : t._e()];
+  }, proxy: !0 } : null, { key: "default", fn: function() {
+    return [t.$slots.leftContent ? e("div", { attrs: { "data-qa": "left-grouped-chip-content" } }, [t._t("leftContent")], 2) : t._e()];
+  }, proxy: !0 }], null, !0) }), e("dt-chip", { staticClass: "dt-chip-content dt-chip-content--right", attrs: { "hide-close": !0, interactive: !1, "content-class": "d-fs100", size: "xs", "grouped-chip": !0 }, scopedSlots: t._u([{ key: "icon", fn: function() {
+    return [t.$slots.rightIcon ? e("div", { attrs: { "data-qa": "right-grouped-chip-icon" } }, [t._t("rightIcon")], 2) : t._e()];
+  }, proxy: !0 }, { key: "default", fn: function() {
+    return [t.$slots.rightContent ? e("div", { attrs: { "data-qa": "right-grouped-chip-content" } }, [t._t("rightContent")], 2) : t._e()];
+  }, proxy: !0 }], null, !0) })], 1);
+}, c = [], s = /* @__PURE__ */ o(
+  r,
+  i,
+  c,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const y = s.exports;
+export {
+  y as DtRecipeGroupedChip
+};
+//# sourceMappingURL=grouped-chip.js.map

package/dist/lib/grouped-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grouped-chip.js","sources":["../../recipes/chips/grouped_chip/grouped_chip.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"grouped-chip\"\n    class=\"dt-grouped-chip\"\n  >\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"dt-chip-content dt-chip-content--left\"\n    >\n      <template\n        v-if=\"$slots.leftIcon\"\n        #icon\n      >\n        <!-- @slot Slot for left chip icon information -->\n        <div\n          v-if=\"$slots.leftIcon\"\n          data-qa=\"left-grouped-chip-icon\"\n        >\n          <slot name=\"leftIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"$slots.leftContent\"\n          data-qa=\"left-grouped-chip-content\"\n        >\n          <!-- @slot Slot for left chip content information -->\n          <slot name=\"leftContent\" />\n        </div>\n      </template>\n    </dt-chip>\n\n    <!-- Right side split chip -->\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"dt-chip-content dt-chip-content--right\"\n    >\n      <template #icon>\n        <div\n          v-if=\"$slots.rightIcon\"\n          data-qa=\"right-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"$slots.rightContent\"\n          data-qa=\"right-grouped-chip-content\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightContent\" />\n        </div>\n      </template>\n    </dt-chip>\n  </div>\n</template>\n\n<script>\nimport { DtChip } from '@/components/chip';\n\nexport default {\n  name: 'DtRecipeGroupedChip',\n\n  components: {\n    DtChip,\n  },\n\n  computed: {},\n};\n</script>\n\n<style lang=\"less\">\n.dt-grouped-chip {\n  display: inline-flex;\n  white-space: nowrap;\n  background-color: unset;\n  background-image: unset;\n}\n\n.dt-chip-content {\n  font-variant-numeric: tabular-nums;\n\n  &--left {\n    border-top-left-radius: var(--dt-size-radius-pill);\n    border-bottom-left-radius: var(--dt-size-radius-pill);\n    background-color: var(--dt-color-surface-moderate-opaque);\n    max-width: var(--dt-size-730);\n  }\n\n  &--right {\n    border-top-right-radius: var(--dt-size-radius-pill);\n    border-bottom-right-radius: var(--dt-size-radius-pill);\n    background-color: var(--dt-color-purple-200);\n    max-width: var(--dt-size-730);\n  }\n}\n</style>\n"],"names":["_sfc_main","DtChip"],"mappings":";;;;;;;;;;;;AAsEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAC;AAAA,EACA;AAAA,EAEA,UAAA,CAAA;AACA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/hovercard.js

@@ -0,0 +1,194 @@
+import { getUniqueString as p } from "./utils.js";
+import { h as u, T as f, P as m, e as d } from "../chunks/popover_constants-qjlEkroB.js";
+import { n as _ } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtPopover as y } from "./popover.js";
+import "./constants.js";
+import "vue";
+import "tippy.js";
+import "@linusborg/vue-simple-portal";
+import "../chunks/modal-VuMFkZFH.js";
+import "./button.js";
+import "../chunks/link_constants-vIUB92L4.js";
+import "./icon.js";
+import "@dialpad/dialtone-icons/vue2";
+import "../chunks/icon_constants-OpYAAKwF.js";
+import "@dialpad/dialtone-icons/icons.json";
+import "./skeleton.js";
+import "../chunks/sr_only_close_button-JGole5Xi.js";
+import "./lazy-show.js";
+const v = /* @__PURE__ */ function() {
+  const e = { value: null };
+  let t, n, r = null, o = null;
+  function s(a) {
+    if (o) {
+      const i = Date.now() - r + 100;
+      t && clearTimeout(t), o !== a && (t = setTimeout(
+        () => {
+          e.value !== null && (r = Date.now()), e.value = null;
+        },
+        i
+      ), n && clearTimeout(n), n = setTimeout(
+        () => {
+          e.value = a, o = a;
+        },
+        i
+      ));
+    } else
+      n = setTimeout(() => {
+        e.value = a, o = a;
+      }, u);
+  }
+  function c() {
+    n && (clearTimeout(n), n = null), r = Date.now(), t = setTimeout(() => {
+      e.value = null, o = null;
+    }, u);
+  }
+  let l = null;
+  return () => (l === null && (l = { current: e, enter: s, leave: c }), l);
+}(), T = {
+  name: "DtHovercard",
+  components: {
+    DtPopover: y
+  },
+  props: {
+    /**
+     * Fade transition when the content display is toggled.
+     * @type boolean
+     * @values true, false
+     */
+    transition: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+      * If the popover does not fit in the direction described by "placement",
+     * it will attempt to change its direction to the "fallbackPlacements".
+     * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements"
+     */
+    fallbackPlacements: {
+      type: Array,
+      default: () => ["auto"]
+    },
+    /**
+    * The direction the popover displays relative to the anchor.
+    * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement"
+    * @values top, top-start, top-end,
+    * right, right-start, right-end,
+    * left, left-start, left-end,
+    * bottom, bottom-start, bottom-end,
+    * auto, auto-start, auto-end
+    */
+    placement: {
+      type: String,
+      default: "top-start",
+      validator(e) {
+        return f.includes(e);
+      }
+    },
+    /**
+    * Padding size class for the popover content.
+    * @values none, small, medium, large
+    */
+    padding: {
+      type: String,
+      default: "large",
+      validator: (e) => Object.keys(m).some((t) => t === e)
+    },
+    /**
+     * Displaces the content box from its anchor element
+     * by the specified number of pixels.
+     * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset"
+     */
+    offset: {
+      type: Array,
+      default: () => [0, 16]
+    },
+    /**
+    * The id of the tooltip
+    */
+    id: {
+      type: String,
+      default() {
+        return p();
+      }
+    },
+    /**
+    * Additional class name for the header content wrapper element.
+    */
+    headerClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+    * Additional class name for the footer content wrapper element.
+    */
+    footerClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+    * Additional class name for the dialog element.
+    */
+    dialogClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+    * Sets the element to which the popover is going to append to.
+    * 'body' will append to the nearest body (supports shadow DOM).
+    * @values 'body', 'parent', HTMLElement,
+    */
+    appendTo: {
+      type: [HTMLElement, String],
+      default: "body",
+      validator: (e) => d.includes(e) || e instanceof HTMLElement
+    }
+  },
+  emits: [
+    /**
+     * Emitted when popover is shown or hidden
+     *
+     * @event opened
+     * @type {Boolean | Array}
+     */
+    "opened"
+  ],
+  data() {
+    return {
+      timer: v()
+    };
+  }
+};
+var S = function() {
+  var t = this, n = t._self._c;
+  return n("dt-popover", { attrs: { id: t.id, placement: t.placement, "content-class": t.contentClass, "fallback-placements": t.fallbackPlacements, padding: t.padding, transition: t.transition ? "fade" : null, offset: t.offset, modal: !1, "initial-focus-element": "none", "header-class": t.headerClass, "footer-class": t.footerClass, "append-to": t.appendTo, hovercard: !0, timer: t.timer, "data-qa": "dt-hovercard" }, on: { opened: (r) => t.$emit("opened", r) }, scopedSlots: t._u([{ key: "anchor", fn: function({ attrs: r }) {
+    return [t._t("anchor", null, null, r)];
+  } }, { key: "content", fn: function() {
+    return [t._t("content")];
+  }, proxy: !0 }, { key: "headerContent", fn: function() {
+    return [t._t("headerContent")];
+  }, proxy: !0 }, { key: "footerContent", fn: function() {
+    return [t._t("footerContent")];
+  }, proxy: !0 }], null, !0) });
+}, g = [], C = /* @__PURE__ */ _(
+  T,
+  S,
+  g,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const q = C.exports;
+export {
+  q as DtHovercard
+};
+//# sourceMappingURL=hovercard.js.map

package/dist/lib/hovercard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hovercard.js","sources":["../../components/hovercard/timer.js","../../components/hovercard/hovercard.vue"],"sourcesContent":["import { TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\n\nexport default (function () {\n  const current = { value: null };\n  let timerLeave, timerEnter;\n  let start = null;\n  let prevCard = null;\n\n  // Handles the timer for when the event that opens the hovercard\n  // is triggered.\n  // If no hovercard is active, it sets a delay of TOOLTIP_DELAY_MS.\n  // If there was an active hovercard, the delay depends on the time it takes\n  // to move from one anchor to the other.\n  function enter (id) {\n    if (prevCard) {\n      const time = Date.now() - start + 100;\n      if (timerLeave) clearTimeout(timerLeave);\n      if (prevCard !== id) {\n        timerLeave = setTimeout(\n          () => {\n            if (current.value !== null) {\n              start = Date.now();\n            }\n            current.value = null;\n          },\n          time,\n        );\n        if (timerEnter) clearTimeout(timerEnter);\n        timerEnter = setTimeout(\n          () => {\n            current.value = id;\n            prevCard = id;\n          },\n          time,\n        );\n      }\n    } else {\n      timerEnter = setTimeout(() => {\n        current.value = id;\n        prevCard = id;\n      }, TOOLTIP_DELAY_MS);\n    }\n  }\n\n  // Handles the timer for when the event that closes the hovercard\n  // is triggered.\n  function leave () {\n    if (timerEnter) {\n      clearTimeout(timerEnter);\n      timerEnter = null;\n    }\n    start = Date.now();\n    timerLeave = setTimeout(() => {\n      current.value = null;\n      prevCard = null;\n    }, TOOLTIP_DELAY_MS);\n  }\n\n  let instance = null;\n\n  return () => {\n    if (instance === null) {\n      instance = { current, enter, leave };\n    }\n    return instance;\n  };\n})();\n","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-popover\n    :id=\"id\"\n    :placement=\"placement\"\n    :content-class=\"contentClass\"\n    :fallback-placements=\"fallbackPlacements\"\n    :padding=\"padding\"\n    :transition=\"transition ? 'fade' : null\"\n    :offset=\"offset\"\n    :modal=\"false\"\n    initial-focus-element=\"none\"\n    :header-class=\"headerClass\"\n    :footer-class=\"footerClass\"\n    :append-to=\"appendTo\"\n    :hovercard=\"true\"\n    :timer=\"timer\"\n    data-qa=\"dt-hovercard\"\n    @opened=\"(e) => ($emit('opened', e))\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <slot\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content>\n      <slot name=\"content\" />\n    </template>\n    <template #headerContent>\n      <slot name=\"headerContent\" />\n    </template>\n\n    <template #footerContent>\n      <slot name=\"footerContent\" />\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\nimport useTimer from './timer';\n\nexport default {\n  name: 'DtHovercard',\n\n  components: {\n    DtPopover,\n  },\n\n  props: {\n  /**\n   * Fade transition when the content display is toggled.\n   * @type boolean\n   * @values true, false\n   */\n    transition: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n      * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\".\n     * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     */\n    fallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n   * The direction the popover displays relative to the anchor.\n   * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n   * @values top, top-start, top-end,\n   * right, right-start, right-end,\n   * left, left-start, left-end,\n   * bottom, bottom-start, bottom-end,\n   * auto, auto-start, auto-end\n   */\n    placement: {\n      type: String,\n      default: 'top-start',\n      validator (placement) {\n        return TOOLTIP_DIRECTIONS.includes(placement);\n      },\n    },\n\n    /**\n   * Padding size class for the popover content.\n   * @values none, small, medium, large\n   */\n    padding: {\n      type: String,\n      default: 'large',\n      validator: (padding) => {\n        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Displaces the content box from its anchor element\n     * by the specified number of pixels.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 16],\n    },\n\n    /**\n   * The id of the tooltip\n   */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n   * Additional class name for the header content wrapper element.\n   */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n   * Additional class name for the footer content wrapper element.\n   */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n   * Additional class name for the dialog element.\n   */\n    dialogClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n   * Sets the element to which the popover is going to append to.\n   * 'body' will append to the nearest body (supports shadow DOM).\n   * @values 'body', 'parent', HTMLElement,\n   */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      timer: useTimer(),\n    };\n  },\n};\n</script>\n"],"names":["useTimer","current","timerLeave","timerEnter","start","prevCard","enter","id","time","TOOLTIP_DELAY_MS","leave","instance","_sfc_main","DtPopover","placement","TOOLTIP_DIRECTIONS","padding","POPOVER_PADDING_CLASSES","item","getUniqueString","appendTo","POPOVER_APPEND_TO_VALUES"],"mappings":"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"}

package/dist/lib/icon.js

@@ -0,0 +1,82 @@
+import * as n from "@dialpad/dialtone-icons/vue2";
+import { I as o, a as i } from "../chunks/icon_constants-OpYAAKwF.js";
+import { n as r } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtSkeleton as s } from "./skeleton.js";
+import "@dialpad/dialtone-icons/icons.json";
+const c = {
+  name: "DtIcon",
+  components: {
+    DtSkeleton: s,
+    ...n
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The size of the icon.
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (a) => Object.keys(o).includes(a)
+    },
+    /**
+     * The icon name in kebab-case
+     */
+    name: {
+      type: String,
+      required: !0,
+      validator: (a) => i.includes(a)
+    },
+    /**
+     * The label of the icon as read out by a screenreader. Leave this unset if your icon is purely presentational
+     */
+    ariaLabel: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Shows a skeleton loader while the emoji asset is loading.
+     * @values true, false
+     */
+    showSkeleton: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  data() {
+    return {
+      iconLoaded: !1
+    };
+  },
+  computed: {
+    iconSize() {
+      return o[this.size];
+    },
+    icon() {
+      return `dt-icon-${this.name}`;
+    }
+  }
+};
+var l = function() {
+  var e = this, t = e._self._c;
+  return t("span", { staticClass: "d-icon__wrapper" }, [t("dt-skeleton", { directives: [{ name: "show", rawName: "v-show", value: !e.iconLoaded && e.showSkeleton, expression: "!iconLoaded && showSkeleton" }], class: ["d-icon", e.iconSize], attrs: { offset: 0, "shape-option": { shape: "circle", size: "100%" }, "aria-label": e.ariaLabel } }), t(e.icon, e._b({ directives: [{ name: "show", rawName: "v-show", value: e.iconLoaded, expression: "iconLoaded" }], tag: "component", attrs: { size: e.size, "aria-label": e.ariaLabel, "data-qa": e.$attrs["data-qa"] ?? "dt-icon" }, on: { loaded: function(m) {
+    e.iconLoaded = !0;
+  } } }, "component", e.$attrs, !1))], 1);
+}, d = [], p = /* @__PURE__ */ r(
+  c,
+  l,
+  d,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const h = p.exports;
+export {
+  h as DtIcon,
+  i as ICON_NAMES,
+  o as ICON_SIZE_MODIFIERS
+};
+//# sourceMappingURL=icon.js.map

package/dist/lib/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":["../../components/icon/icon.vue"],"sourcesContent":["<template>\n  <span class=\"d-icon__wrapper\">\n    <dt-skeleton\n      v-show=\"!iconLoaded && showSkeleton\"\n      :offset=\"0\"\n      :shape-option=\"{ shape: 'circle', size: '100%' }\"\n      :aria-label=\"ariaLabel\"\n      :class=\"['d-icon', iconSize]\"\n    />\n    <component\n      :is=\"icon\"\n      v-show=\"iconLoaded\"\n      :size=\"size\"\n      :aria-label=\"ariaLabel\"\n      :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n      v-bind=\"$attrs\"\n      @loaded=\"iconLoaded = true\"\n    />\n  </span>\n</template>\n\n<script>\nimport { DtSkeleton } from '../skeleton';\nimport * as icons from '@dialpad/dialtone-icons/vue2';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './icon_constants';\n\n/**\n * The Icon component provides a set of glyphs and sizes to provide context your application.\n * @see https://dialtone.dialpad.com/components/icon.html\n */\nexport default {\n  name: 'DtIcon',\n\n  components: {\n    DtSkeleton,\n    ...icons,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The icon name in kebab-case\n     */\n    name: {\n      type: String,\n      required: true,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * The label of the icon as read out by a screenreader. Leave this unset if your icon is purely presentational\n     */\n    ariaLabel: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Shows a skeleton loader while the emoji asset is loading.\n     * @values true, false\n     */\n    showSkeleton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      iconLoaded: false,\n    };\n  },\n\n  computed: {\n    iconSize () {\n      return ICON_SIZE_MODIFIERS[this.size];\n    },\n\n    icon () {\n      return `dt-icon-${this.name}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtSkeleton","icons","s","ICON_SIZE_MODIFIERS","name","ICON_NAMES"],"mappings":";;;;;AA8BA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,YAAAC;AAAA,IACA,GAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAAD,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,OAAA;AACA,aAAA,WAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/lib/image-viewer.js

@@ -0,0 +1,171 @@
+import { M as r } from "../chunks/modal-VuMFkZFH.js";
+import { EVENT_KEYNAMES as a } from "./constants.js";
+import { Portal as o } from "@linusborg/vue-simple-portal";
+import { n } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtButton as l } from "./button.js";
+import { DtIcon as u } from "./icon.js";
+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 c = {
+  name: "DtImageViewer",
+  components: {
+    Portal: o,
+    DtButton: l,
+    DtIcon: u
+  },
+  mixins: [r],
+  props: {
+    /**
+     * Controls whether the image modal is shown. Leaving this null will have the image modal
+     * trigger on click by default.
+     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.
+     * Supports .sync modifier
+     * @values null, true, false
+     */
+    open: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * URL of the image to be shown
+     */
+    imageSrc: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Alt text of image
+     */
+    imageAlt: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Image Class
+     */
+    imageButtonClass: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    /**
+     * Aria label
+     */
+    ariaLabel: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Aria label for close button
+     */
+    closeAriaLabel: {
+      type: String,
+      required: !0
+    }
+  },
+  emits: [
+    /**
+     * Emitted when popover is shown or hidden
+     *
+     * @event opened
+     * @type {Boolean}
+     */
+    "opened",
+    /**
+     * Event fired to sync the open prop with the parent component
+     * @event update:open
+     */
+    "update:open"
+  ],
+  data() {
+    return {
+      showCloseButton: !0,
+      isOpen: !1
+    };
+  },
+  computed: {
+    modalListeners() {
+      return {
+        ...this.$listeners,
+        click: (t) => {
+          t.target === t.currentTarget && this.close();
+        },
+        keydown: (t) => {
+          switch (t.code) {
+            case a.esc:
+            case a.escape:
+              this.close();
+              break;
+            case a.tab:
+              this.trapFocus(t);
+              break;
+          }
+        }
+      };
+    }
+  },
+  watch: {
+    isOpen: {
+      immediate: !0,
+      handler(t) {
+        var e;
+        t ? this.previousActiveElement = document.activeElement : ((e = this.previousActiveElement) == null || e.focus(), this.previousActiveElement = null);
+      }
+    },
+    open: {
+      handler: function(t) {
+        t !== null && (this.isOpen = t);
+      },
+      immediate: !0
+    }
+  },
+  methods: {
+    openModal() {
+      this.open === null && (this.isOpen = !0, this.showCloseButton = !0, this.$emit("opened", !0), setTimeout(() => {
+        this.focusAfterOpen();
+      }));
+    },
+    close() {
+      this.isOpen = !1, this.$emit("opened", !1), this.open !== null && this.$emit("update:open", !1);
+    },
+    focusAfterOpen() {
+      var t;
+      (t = this.$refs.closeImage) == null || t.$el.focus();
+    },
+    trapFocus(t) {
+      this.isOpen && this.focusTrappedTabPress(t);
+    }
+  }
+};
+var m = function() {
+  var e = this, i = e._self._c;
+  return i("div", [i("dt-button", { staticClass: "d-image-viewer__preview-button", attrs: { "data-qa": "dt-image-viewer-preview", "aria-label": e.ariaLabel, importance: "clear" }, on: { click: e.openModal } }, [i("img", { class: e.imageButtonClass, attrs: { src: e.imageSrc, alt: e.imageAlt } })]), e.isOpen ? i("portal", [i("div", e._g({ staticClass: "d-modal", attrs: { "aria-hidden": e.isOpen ? "false" : "true", "data-qa": "dt-modal" }, on: { mouseover: function(s) {
+    e.showCloseButton = !0;
+  }, mouseleave: function(s) {
+    e.showCloseButton = !1;
+  }, focusin: function(s) {
+    e.showCloseButton = !0;
+  }, focusout: function(s) {
+    e.showCloseButton = !1;
+  } } }, e.modalListeners), [i("div", { staticClass: "d-image-viewer__full", attrs: { "data-qa": "dt-image-viewer-full", role: "dialog", "aria-modal": "true" } }, [i("img", { staticClass: "d-image-viewer__full__image", attrs: { src: e.imageSrc, alt: e.imageAlt } })]), i("transition", { attrs: { name: "fade" } }, [e.showCloseButton ? i("dt-button", { ref: "closeImage", staticClass: "d-modal__close", attrs: { "data-qa": "dt-image-viewer-close-btn", circle: "", size: "lg", importance: "clear", kind: "inverted", "aria-label": e.closeAriaLabel }, on: { click: e.close }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [i("dt-icon", { staticClass: "d-image-viewer__close-button", attrs: { name: "close", size: "400" } })];
+  }, proxy: !0 }], null, !1, 1620344283) }) : e._e()], 1)], 1)]) : e._e()], 1);
+}, p = [], d = /* @__PURE__ */ n(
+  c,
+  m,
+  p,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const $ = d.exports;
+export {
+  $ as DtImageViewer
+};
+//# sourceMappingURL=image-viewer.js.map