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

package/dist/lib/dates.js

@@ -0,0 +1,57 @@
+import { intervalToDuration as i, isToday as l, isYesterday as c, isThisWeek as u, isThisYear as s, format as f, formatDuration as m, formatDistance as M } from "date-fns";
+import { capitalizeFirstLetter as D } from "./utils.js";
+import "./constants.js";
+import "vue";
+let r;
+function n(e, t) {
+  return o(), f(e, t, {
+    locale: r
+  });
+}
+function d(e, t) {
+  return o(), m(e, {
+    locale: r,
+    format: t
+  });
+}
+function p(e, t) {
+  return o(), M(e, t, {
+    locale: r
+  });
+}
+function E() {
+  return r !== void 0;
+}
+function o() {
+  if (!E())
+    throw new Error("Locale not set, please call setDateLocale(locale) and pass in a datefns locale object as the locale param before calling this function");
+}
+function _(e) {
+  r = e;
+}
+function b(e) {
+  return n(e, "MMMM d, y");
+}
+function v(e) {
+  if (e < 60)
+    return p(0, 29 * 1e3);
+  const t = i({
+    start: 0,
+    end: e * 1e3
+  });
+  return d(t, ["hours", "minutes"]);
+}
+function a(e) {
+  const t = new Intl.RelativeTimeFormat(r.code, { numeric: "auto" });
+  return D(t.formatToParts(e, "day")[0].value, r.code);
+}
+function F(e) {
+  return l(e) ? a(0) : c(e) ? a(-1) : u(e) ? n(e, "EEEE") : s(e) ? n(e, "EEEE, MMMM d") : n(e, "MMMM d, y");
+}
+export {
+  v as durationInHHMM,
+  b as getDateMedium,
+  F as relativeDate,
+  _ as setDateLocale
+};
+//# sourceMappingURL=dates.js.map

package/dist/lib/dates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dates.js","sources":["../../common/dates/index.js"],"sourcesContent":["import {\n  format,\n  formatDuration,\n  intervalToDuration,\n  formatDistance,\n  isToday,\n  isYesterday,\n  isThisWeek,\n  isThisYear,\n} from 'date-fns';\nimport { capitalizeFirstLetter } from '../utils';\n\nlet dialtoneLocale;\n\n// Base functions just wrap core date-fns functions, but this allows us to do checks and set default options.\n\nfunction _baseFormat (date, formatString) {\n  _checkLocaleSet();\n  return format(date, formatString, {\n    locale: dialtoneLocale,\n  });\n}\n\nfunction _baseFormatDuration (duration, formatString) {\n  _checkLocaleSet();\n  return formatDuration(duration, {\n    locale: dialtoneLocale,\n    format: formatString,\n  });\n}\n\nfunction _baseFormatDistance (date, baseDate) {\n  _checkLocaleSet();\n  return formatDistance(date, baseDate, {\n    locale: dialtoneLocale,\n  });\n}\n\nfunction _isLocaleSet () {\n  return dialtoneLocale !== undefined;\n}\n\nfunction _checkLocaleSet () {\n  if (!_isLocaleSet()) {\n    throw new Error('Locale not set, please call setDateLocale(locale) and pass ' +\n    'in a datefns locale object as the locale param before calling this function');\n  }\n}\n\n/**\n * Sets the locale for date-fns. This should be called before any date-fns functions are called.\n * @param {Locale} locale A date-fns locale object\n */\nexport function setDateLocale (locale) {\n  dialtoneLocale = locale;\n}\n\n/**\n * This formats a date to the Dialtone standard medium date format as shown here:\n * https://dialtone.dialpad.com/guides/writing-guidelines/#formats-by-length\n * @param {Date} date A javascript date object\n * @returns {string} A string in the format of 'September 2, 2022'\n */\nexport function getDateMedium (date) {\n  return _baseFormat(date, 'MMMM d, y');\n}\n\n/**\n * Converts a call duration in total number of seconds to a human readable string\n * such as 'less than a minute' or '4 hours 34 minutes'.\n * @param {number} durationInSeconds The duration of the call in seconds\n * @returns {string} A human readable string representing the duration of the call\n */\nexport function durationInHHMM (durationInSeconds) {\n  if (durationInSeconds < 60) {\n    // returns 'less than a minute', we're doing it like this instead of returning a string\n    // so datefns handles i18n.\n    return _baseFormatDistance(0, 29 * 1000);\n  }\n  const duration = intervalToDuration({\n    start: 0,\n    end: durationInSeconds * 1000,\n  });\n  return _baseFormatDuration(duration, ['hours', 'minutes']);\n}\n\n/**\n * gets the human readable name of the day relative to the current time. For example, if you pass in -1 it will\n * say \"Yesterday\" if you pass in 0 it will say \"Today\", if you pass in 1 it will say \"Tomorrow\".\n * @param {number} days The number of days relative to the current time\n * @returns {string} A human readable string representing the distance between the date and now\n */\nfunction _getRelativeDaysText (days) {\n  const rtl = new Intl.RelativeTimeFormat(dialtoneLocale.code, { numeric: 'auto' });\n  return capitalizeFirstLetter(rtl.formatToParts(days, 'day')[0].value, dialtoneLocale.code);\n}\n\n/**\n * Returns the distance between the passed in date and now in a human readable format, typically used\n * when showing a history of items in a log such as a feed list.\n *\n * datefns does not support 'today' and 'yesterday' without showing time so we use Intl for these cases.\n *\n * examples below to explain\n * the different potential formats:\n *\n * If current day:\n * Today\n *\n * If previous day:\n * Yesterday\n *\n * Older than yesterday, but in the same calendar week:\n * Monday\n *\n * Older than the most recent calendar week, but in the same year:\n * Monday, October 14\n *\n * older than a calendar year:\n * October 14, 2022\n *\n *\n * @param {Date} date The timestamp of the item's date\n * @returns {string} A human readable string representing the distance between the date and now\n */\nexport function relativeDate (date) {\n  if (isToday(date)) {\n    return _getRelativeDaysText(0);\n  } else if (isYesterday(date)) {\n    return _getRelativeDaysText(-1);\n  } else if (isThisWeek(date)) {\n    return _baseFormat(date, 'EEEE');\n  } else if (isThisYear(date)) {\n    return _baseFormat(date, 'EEEE, MMMM d');\n  } else {\n    return _baseFormat(date, 'MMMM d, y');\n  }\n}\n"],"names":["dialtoneLocale","_baseFormat","date","formatString","_checkLocaleSet","format","_baseFormatDuration","duration","formatDuration","_baseFormatDistance","baseDate","formatDistance","_isLocaleSet","setDateLocale","locale","getDateMedium","durationInHHMM","durationInSeconds","intervalToDuration","_getRelativeDaysText","days","rtl","capitalizeFirstLetter","relativeDate","isToday","isYesterday","isThisWeek","isThisYear"],"mappings":";;;;AAYA,IAAIA;AAIJ,SAASC,EAAaC,GAAMC,GAAc;AACxC,SAAAC,KACOC,EAAOH,GAAMC,GAAc;AAAA,IAChC,QAAQH;AAAA,EACZ,CAAG;AACH;AAEA,SAASM,EAAqBC,GAAUJ,GAAc;AACpD,SAAAC,KACOI,EAAeD,GAAU;AAAA,IAC9B,QAAQP;AAAA,IACR,QAAQG;AAAA,EACZ,CAAG;AACH;AAEA,SAASM,EAAqBP,GAAMQ,GAAU;AAC5C,SAAAN,KACOO,EAAeT,GAAMQ,GAAU;AAAA,IACpC,QAAQV;AAAA,EACZ,CAAG;AACH;AAEA,SAASY,IAAgB;AACvB,SAAOZ,MAAmB;AAC5B;AAEA,SAASI,IAAmB;AAC1B,MAAI,CAACQ,EAAY;AACf,UAAM,IAAI,MAAM,wIAC6D;AAEjF;AAMO,SAASC,EAAeC,GAAQ;AACrC,EAAAd,IAAiBc;AACnB;AAQO,SAASC,EAAeb,GAAM;AACnC,SAAOD,EAAYC,GAAM,WAAW;AACtC;AAQO,SAASc,EAAgBC,GAAmB;AACjD,MAAIA,IAAoB;AAGtB,WAAOR,EAAoB,GAAG,KAAK,GAAI;AAEzC,QAAMF,IAAWW,EAAmB;AAAA,IAClC,OAAO;AAAA,IACP,KAAKD,IAAoB;AAAA,EAC7B,CAAG;AACD,SAAOX,EAAoBC,GAAU,CAAC,SAAS,SAAS,CAAC;AAC3D;AAQA,SAASY,EAAsBC,GAAM;AACnC,QAAMC,IAAM,IAAI,KAAK,mBAAmBrB,EAAe,MAAM,EAAE,SAAS,OAAM,CAAE;AAChF,SAAOsB,EAAsBD,EAAI,cAAcD,GAAM,KAAK,EAAE,CAAC,EAAE,OAAOpB,EAAe,IAAI;AAC3F;AA8BO,SAASuB,EAAcrB,GAAM;AAClC,SAAIsB,EAAQtB,CAAI,IACPiB,EAAqB,CAAC,IACpBM,EAAYvB,CAAI,IAClBiB,EAAqB,EAAE,IACrBO,EAAWxB,CAAI,IACjBD,EAAYC,GAAM,MAAM,IACtByB,EAAWzB,CAAI,IACjBD,EAAYC,GAAM,cAAc,IAEhCD,EAAYC,GAAM,WAAW;AAExC;"}

package/dist/lib/description-list.js

@@ -0,0 +1,83 @@
+import { b as i } from "../chunks/stack_constants-u7tNqGtc.js";
+import { n } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+const a = ["row", "column"], l = (t) => t.term ? typeof t.term == "string" : !1, o = (t) => t.description ? typeof t.description == "string" : !1, d = (t) => Array.isArray(t) ? t.every((r) => !(typeof r != "object" || !l(r) || !o(r))) : !1, c = {
+  name: "DtDescriptionList",
+  props: {
+    /**
+     * The direction for the list
+     * @values row, column
+     */
+    direction: {
+      type: String,
+      default: "row",
+      validator: (t) => a.includes(t)
+    },
+    /**
+     * A list of items that represent the term and the description
+     */
+    items: {
+      type: Array,
+      default: () => [],
+      validator: (t) => d(t),
+      required: !0
+    },
+    /**
+     * Set the space between the elements
+     * @values 0, 100, 200, 300, 400, 500, 600
+     */
+    gap: {
+      type: String,
+      default: "400",
+      validator: (t) => i.includes(t)
+    },
+    /**
+     * Used to customize the term element
+     */
+    termClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Used to customize the description element
+     */
+    descriptionClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  computed: {
+    dtClass() {
+      return ["dt-description-list__term", this.termClass];
+    },
+    ddClass() {
+      return ["dt-description-list__description", this.descriptionClass];
+    },
+    getDirectionClass() {
+      return `dt-description-list--${this.direction}`;
+    },
+    getGapClass() {
+      return `dt-description-list--gap-${this.gap}`;
+    }
+  }
+};
+var p = function() {
+  var r = this, e = r._self._c;
+  return e("dl", { class: ["dt-description-list", r.getDirectionClass, r.getGapClass] }, [r._l(r.items, function(s) {
+    return [e("dt", { key: `dt-${s.term}`, class: r.dtClass }, [r._v(" " + r._s(s.term) + " ")]), e("dd", { key: `dd-${s.term}`, class: r.ddClass }, [r._v(" " + r._s(s.description) + " ")])];
+  })], 2);
+}, u = [], f = /* @__PURE__ */ n(
+  c,
+  p,
+  u,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const y = f.exports;
+export {
+  a as DT_DESCRIPTION_LIST_DIRECTION,
+  y as DtDescriptionList
+};
+//# sourceMappingURL=description-list.js.map

package/dist/lib/description-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"description-list.js","sources":["../../components/description_list/description_list_constants.js","../../components/description_list/description_list_validators.js","../../components/description_list/description_list.vue"],"sourcesContent":["export const DT_DESCRIPTION_LIST_DIRECTION = ['row', 'column'];\n","const hasValidTerm = item => {\n  if (!item.term) {\n    return false;\n  }\n\n  return typeof item.term === 'string';\n};\n\nconst hasValidDescription = item => {\n  if (!item.description) {\n    return false;\n  }\n\n  return typeof item.description === 'string';\n};\n\nexport const itemsValidator = items => {\n  if (!Array.isArray(items)) {\n    return false;\n  }\n\n  return items.every(item => {\n    if (typeof item !== 'object') {\n      return false;\n    }\n\n    if (!hasValidTerm(item)) {\n      return false;\n    }\n\n    if (!hasValidDescription(item)) {\n      return false;\n    }\n\n    return true;\n  });\n};\n","<template>\n  <dl :class=\"['dt-description-list', getDirectionClass, getGapClass]\">\n    <template\n      v-for=\"item in items\"\n    >\n      <dt\n        :key=\"`dt-${item.term}`\"\n        :class=\"dtClass\"\n      >\n        {{ item.term }}\n      </dt>\n      <dd\n        :key=\"`dd-${item.term}`\"\n        :class=\"ddClass\"\n      >\n        {{ item.description }}\n      </dd>\n    </template>\n  </dl>\n</template>\n\n<script>\nimport { DT_STACK_GAP } from '../stack/stack_constants';\nimport { DT_DESCRIPTION_LIST_DIRECTION } from './description_list_constants';\nimport { itemsValidator } from './description_list_validators';\n\nexport default {\n  name: 'DtDescriptionList',\n\n  props: {\n    /**\n     * The direction for the list\n     * @values row, column\n     */\n    direction: {\n      type: String,\n      default: 'row',\n      validator: direction => DT_DESCRIPTION_LIST_DIRECTION.includes(direction),\n    },\n\n    /**\n     * A list of items that represent the term and the description\n     */\n    items: {\n      type: Array,\n      default: () => [],\n      validator: items => itemsValidator(items),\n      required: true,\n    },\n\n    /**\n     * Set the space between the elements\n     * @values 0, 100, 200, 300, 400, 500, 600\n     */\n    gap: {\n      type: String,\n      default: '400',\n      validator: (gap) => DT_STACK_GAP.includes(gap),\n    },\n\n    /**\n     * Used to customize the term element\n     */\n    termClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description element\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  computed: {\n    dtClass () {\n      return ['dt-description-list__term', this.termClass];\n    },\n\n    ddClass () {\n      return ['dt-description-list__description', this.descriptionClass];\n    },\n\n    getDirectionClass () {\n      return `dt-description-list--${this.direction}`;\n    },\n\n    getGapClass () {\n      return `dt-description-list--gap-${this.gap}`;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-description-list {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  flex-direction: row;\n  line-height: var(--dt-font-line-height-300);\n  font-size: var(--dt-font-size-100);\n  --description-list-gap: var(--dt-space-400);\n  gap: var(--description-list-gap);\n  each(range(0, 600, 100), {\n    &--gap-@{value} {\n     --description-list-gap: ~\"var(--dt-space-@{value})\";\n    }\n  });\n  &--column {\n    flex-direction: column;\n  }\n  &__term {\n    color: var(--dt-color-foreground-tertiary);\n    flex: 0 1 40%;\n  }\n  &__description {\n    color: var(--dt-color-foreground-primary);\n    flex: 1 1 50%;\n    margin-left: 0;\n  }\n}\n</style>\n"],"names":["DT_DESCRIPTION_LIST_DIRECTION","hasValidTerm","item","hasValidDescription","itemsValidator","items","_sfc_main","direction","gap","DT_STACK_GAP"],"mappings":";;AAAY,MAACA,IAAgC,CAAC,OAAO,QAAQ,GCAvDC,IAAe,CAAAC,MACdA,EAAK,OAIH,OAAOA,EAAK,QAAS,WAHnB,IAMLC,IAAsB,CAAAD,MACrBA,EAAK,cAIH,OAAOA,EAAK,eAAgB,WAH1B,IAMEE,IAAiB,CAAAC,MACvB,MAAM,QAAQA,CAAK,IAIjBA,EAAM,MAAM,CAAAH,MACb,SAAOA,KAAS,YAIhB,CAACD,EAAaC,CAAI,KAIlB,CAACC,EAAoBD,CAAI,EAK9B,IAjBQ,ICQXI,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAAP,EAAA,SAAAO,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAAF,MAAAD,EAAAC,CAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAG,MAAAC,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,CAAA,6BAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,UAAA;AACA,aAAA,CAAA,oCAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,wBAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,4BAAA,KAAA,GAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/lib/dropdown.js

@@ -0,0 +1,45 @@
+import { D as G } from "../chunks/dropdown-SMWaTWyF.js";
+import { n as t } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { D as L } from "../chunks/dropdown_constants-EUcDxBrX.js";
+import "../chunks/keyboard_list_navigation-F0O8nht0.js";
+import "./utils.js";
+import "./constants.js";
+import "vue";
+import "../chunks/sr_only_close_button-JGole5Xi.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 "./button.js";
+import "../chunks/link_constants-vIUB92L4.js";
+import "./popover.js";
+import "../chunks/popover_constants-qjlEkroB.js";
+import "tippy.js";
+import "@linusborg/vue-simple-portal";
+import "../chunks/modal-VuMFkZFH.js";
+import "./lazy-show.js";
+import "../chunks/list_item_constants-LTUc74pD.js";
+const p = {
+  name: "DtDropdownSeparator"
+};
+var i = function() {
+  var r = this, o = r._self._c;
+  return o("li", { staticClass: "dt-list-separator", attrs: { "aria-hidden": "true" } });
+}, m = [], a = /* @__PURE__ */ t(
+  p,
+  i,
+  m,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const z = a.exports;
+export {
+  L as DROPDOWN_PADDING_CLASSES,
+  G as DtDropdown,
+  z as DtDropdownSeparator
+};
+//# sourceMappingURL=dropdown.js.map

package/dist/lib/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sources":["../../components/dropdown/dropdown_separator.vue"],"sourcesContent":["<template>\n  <li\n    aria-hidden=\"true\"\n    class=\"dt-list-separator\"\n  />\n</template>\n\n<script>\nexport default {\n  name: 'DtDropdownSeparator',\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item[role=\"menuitem\"] {\n  border-radius: var(--dt-size-300);\n}\n.dt-list-separator {\n  border-top: var(--dt-size-100) solid var(--dt-color-border-default);\n  list-style: none;\n  margin: var(--dt-space-300) var(--dt-space-300-negative);\n}\n</style>\n"],"names":["_sfc_main"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAQA,MAAAA,IAAA;AAAA,EACA,MAAA;AACA;;;;;;;;;;;;;;;"}