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

package/dist/lib/stack.js

@@ -0,0 +1,118 @@
+import { D as n, a as u, b as l } from "../chunks/stack_constants-u7tNqGtc.js";
+import { n as i } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+function a(t) {
+  return t === n.default;
+}
+function s(t) {
+  if (r(t) === "string")
+    return a(t) ? null : n[t];
+  if (r(t) === "object") {
+    const { default: e } = t;
+    return a(e) ? null : n[e];
+  } else
+    return null;
+}
+function r(t) {
+  return typeof t;
+}
+function o(t) {
+  return s(t) ? `d-stack--${n[s(t)]}` : null;
+}
+function f(t) {
+  return r(t) === "object" ? [
+    ...u.map((e) => t[e] ? `d-stack--${e}--${t[e]}` : null)
+  ] : null;
+}
+function d(t) {
+  return l.includes(t) ? `d-stack--gap-${t}` : null;
+}
+function p(t) {
+  if (r(t) === "string")
+    return Object.keys(n).includes(t);
+  if (r(t) === "object") {
+    const { default: e } = t;
+    return Object.keys(n).includes(e);
+  } else
+    return null;
+}
+function _(t) {
+  return l.includes(t);
+}
+const m = {
+  name: "DtStack",
+  props: {
+    /**
+     * Set this prop to the direction to stack the items.
+     * You can override the default direction with 'default' key.
+     * All the undefined breakpoints will have 'default' value.
+     * By default, for the column direction it will have `justify-content: flex-start`
+     * and for the row direction `align-items: center`. This can be overriden
+     * by utility classes.
+     */
+    direction: {
+      type: [String, Object],
+      default: "column",
+      validator: (t) => p(t)
+    },
+    /**
+     * Set this prop to render stack as a specific HTML element.
+     */
+    as: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * Set this prop to have the space between each stack item
+     * @values 0, 100, 200, 300, 400, 500, 600
+     */
+    gap: {
+      type: String,
+      default: "0",
+      validator: (t) => _(t)
+    }
+  },
+  data() {
+    return {
+      DT_STACK_DIRECTION: n,
+      DT_STACK_GAP: l,
+      DT_STACK_RESPONSIVE_BREAKPOINTS: u
+    };
+  },
+  computed: {
+    stackGap() {
+      return d(this.gap);
+    },
+    defaultDirection() {
+      return o(this.direction);
+    },
+    stackResponsive() {
+      return f(this.direction);
+    }
+  }
+};
+var D = function() {
+  var e = this, c = e._self._c;
+  return c(e.as, { tag: "component", class: [
+    "d-stack",
+    e.defaultDirection,
+    e.stackResponsive,
+    e.stackGap
+  ] }, [e._t("default")], 2);
+}, g = [], S = /* @__PURE__ */ i(
+  m,
+  D,
+  g,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const y = S.exports;
+export {
+  n as DT_STACK_DIRECTION,
+  l as DT_STACK_GAP,
+  u as DT_STACK_RESPONSIVE_BREAKPOINTS,
+  y as DtStack
+};
+//# sourceMappingURL=stack.js.map

package/dist/lib/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n  if (directionPropType(direction) === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\nexport function directionPropType (value) {\n  return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nexport function getResponsiveClasses (direction) {\n  if (directionPropType(direction) === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return direction[breakpoint]\n          ? `d-stack--${breakpoint}--${direction[breakpoint]}`\n          : null;\n      })];\n  } else { return null; }\n}\n\nexport function getGapClass (gap) {\n  return DT_STACK_GAP.includes(gap) ? `d-stack--gap-${gap}` : null;\n}\n","import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  return DT_STACK_GAP.includes(gap);\n}\n","<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      stackResponsive,\n      stackGap,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getGapClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overriden\n     * by utility classes.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to have the space between each stack item\n     * @values 0, 100, 200, 300, 400, 500, 600\n     */\n    gap: {\n      type: String,\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    stackGap () {\n      return getGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction);\n    },\n  },\n};\n</script>\n"],"names":["_isDefaultDirection","direction","DT_STACK_DIRECTION","_getValidDirection","directionPropType","defaultStyle","value","getDefaultDirectionClass","getResponsiveClasses","DT_STACK_RESPONSIVE_BREAKPOINTS","breakpoint","getGapClass","gap","DT_STACK_GAP","directionValidator","gapValidator","_sfc_main"],"mappings":";;AAEA,SAASA,EAAqBC,GAAW;AACvC,SAAOA,MAAcC,EAAmB;AAC1C;AAEA,SAASC,EAAoBF,GAAW;AACtC,MAAIG,EAAkBH,CAAS,MAAM;AACnC,WAAQD,EAAoBC,CAAS,IAAoC,OAAhCC,EAAmBD,CAAS;AAChE,MAAIG,EAAkBH,CAAS,MAAM,UAAU;AACpD,UAAM,EAAE,SAASI,EAAc,IAAGJ;AAElC,WAAQD,EAAoBK,CAAY,IAAuC,OAAnCH,EAAmBG,CAAY;AAAA,EAC/E;AAAW,WAAO;AAClB;AAEO,SAASD,EAAmBE,GAAO;AACxC,SAAO,OAAOA;AAChB;AAEO,SAASC,EAA0BN,GAAW;AACnD,SAAOE,EAAmBF,CAAS,IAC/B,YAAYC,EAAmBC,EAAmBF,CAAS,CAAC,CAAC,KAC7D;AACN;AAEO,SAASO,EAAsBP,GAAW;AAC/C,SAAIG,EAAkBH,CAAS,MAAM,WAC5B;AAAA,IACL,GAAGQ,EAAgC,IAAI,CAACC,MAC/BT,EAAUS,CAAU,IACvB,YAAYA,CAAU,KAAKT,EAAUS,CAAU,CAAC,KAChD,IACL;AAAA,EAAC,IACU;AAClB;AAEO,SAASC,EAAaC,GAAK;AAChC,SAAOC,EAAa,SAASD,CAAG,IAAI,gBAAgBA,CAAG,KAAK;AAC9D;ACpCO,SAASE,EAAoBb,GAAW;AAC7C,MAAIG,EAAkBH,CAAS,MAAM;AACnC,WAAO,OAAO,KAAKC,CAAkB,EAAE,SAASD,CAAS;AACpD,MAAIG,EAAkBH,CAAS,MAAM,UAAU;AACpD,UAAM,EAAE,SAASI,EAAc,IAAGJ;AAElC,WAAO,OAAO,KAAKC,CAAkB,EAAE,SAASG,CAAY;AAAA,EAChE;AAAW,WAAO;AAClB;AAEO,SAASU,EAAcH,GAAK;AACjC,SAAOC,EAAa,SAASD,CAAG;AAClC;ACKA,MAAAI,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAf,MAAAa,EAAAb,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAW,MAAAG,EAAAH,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,oBAAAV;AAAA,MACA,cAAAW;AAAA,MACA,iCAAAJ;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAAE,EAAA,KAAA,GAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAAJ,EAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAAC,EAAA,KAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/tabs.js

@@ -0,0 +1,93 @@
+import { a as h, D as F, d as E, c as I, T, b as P } from "../chunks/tab-Qm9LVkYj.js";
+import { M as s } from "../chunks/modal-VuMFkZFH.js";
+import { n } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import "./button.js";
+import "vue";
+import "../chunks/link_constants-vIUB92L4.js";
+const l = {
+  name: "DtTabPanel",
+  mixins: [s],
+  inject: ["groupContext"],
+  props: {
+    /**
+     * Id of the panel
+     */
+    id: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Id of the associated tab
+     */
+    tabId: {
+      type: String,
+      required: !0
+    },
+    /**
+    * If true, hides the tab content
+     * @values true, false
+    */
+    hidden: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Used to customize the tab element
+     */
+    tabPanelClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  data() {
+    return {
+      isFirstElementFocusable: !1
+    };
+  },
+  computed: {
+    hidePanel() {
+      return this.groupContext.selected !== this.id || this.hidden;
+    }
+  },
+  async mounted() {
+    const t = await this.getFirstFocusableElement(this.$el);
+    t ? this.isFirstElementFocusable = this.isFirstElementOfPanel(t) : this.isFirstElementFocusable = !1;
+  },
+  methods: {
+    isFirstElementOfPanel(t) {
+      let e = t, a = !0;
+      for (; e; ) {
+        if (e.previousElementSibling !== null) {
+          a = !1;
+          break;
+        }
+        e = e.parentNode !== this.$el ? e.parentNode : null;
+      }
+      return a;
+    }
+  }
+};
+var i = function() {
+  var e = this, a = e._self._c;
+  return a("div", { directives: [{ name: "show", rawName: "v-show", value: !e.hidePanel, expression: "!hidePanel" }], class: e.tabPanelClass, attrs: { id: `dt-panel-${e.id}`, role: "tabpanel", tabindex: e.isFirstElementFocusable ? -1 : 0, "aria-labelledby": `dt-tab-${e.tabId}`, "aria-hidden": `${e.hidePanel}`, "data-qa": "dt-tab-panel" } }, [e._t("default")], 2);
+}, r = [], o = /* @__PURE__ */ n(
+  l,
+  i,
+  r,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const _ = o.exports;
+export {
+  h as DtTab,
+  F as DtTabGroup,
+  _ as DtTabPanel,
+  E as TAB_IMPORTANCE_MODIFIERS,
+  I as TAB_LIST_IMPORTANCE_MODIFIERS,
+  T as TAB_LIST_KIND_MODIFIERS,
+  P as TAB_LIST_SIZES
+};
+//# sourceMappingURL=tabs.js.map

package/dist/lib/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../components/tabs/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <slot v-show=\"!hidden\" />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  name: 'DtTabPanel',\n\n  mixins: [Modal],\n\n  inject: ['groupContext'],\n\n  props: {\n    /**\n     * Id of the panel\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated tab\n     */\n    tabId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n    * If true, hides the tab content\n     * @values true, false\n    */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabPanelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      isFirstElementFocusable: false,\n    };\n  },\n\n  computed: {\n    hidePanel () {\n      return this.groupContext.selected !== this.id || this.hidden;\n    },\n  },\n\n  async mounted () {\n    const firstFocusableElement = await this.getFirstFocusableElement(this.$el);\n\n    if (!firstFocusableElement) {\n      this.isFirstElementFocusable = false;\n    } else {\n      // If the first focusable element isn't the first element in the panel,\n      // then we need to set the panel tabindex to 0.\n      // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n    }\n  },\n\n  methods: {\n    isFirstElementOfPanel (element) {\n      let current = element;\n      let isFirstElement = true;\n\n      while (current) {\n        if (current.previousElementSibling !== null) {\n          isFirstElement = false;\n          break;\n        }\n        current = current.parentNode !== this.$el ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","Modal","firstFocusableElement","element","current","isFirstElement"],"mappings":";;;;;;AAuBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,QAAA,CAAA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,yBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AACA,aAAA,KAAA,aAAA,aAAA,KAAA,MAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,UAAAC,IAAA,MAAA,KAAA,yBAAA,KAAA,GAAA;AAEA,IAAAA,IAMA,KAAA,0BAAA,KAAA,sBAAAA,CAAA,IALA,KAAA,0BAAA;AAAA,EAOA;AAAA,EAEA,SAAA;AAAA,IACA,sBAAAC,GAAA;AACA,UAAAC,IAAAD,GACAE,IAAA;AAEA,aAAAD,KAAA;AACA,YAAAA,EAAA,2BAAA,MAAA;AACA,UAAAC,IAAA;AACA;AAAA,QACA;AACA,QAAAD,IAAAA,EAAA,eAAA,KAAA,MAAAA,EAAA,aAAA;AAAA,MACA;AAEA,aAAAC;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/lib/time-pill.js

@@ -0,0 +1,43 @@
+import { n as r } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+const a = {
+  name: "DtRecipeTimePill",
+  props: {
+    /**
+     * Date time display value
+     */
+    dateTimeDisplay: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Machine-readable attribute
+     * Accepts a string value of YYYY-MM-DD or YYYY-MM-DDThh:mm:ssTZD
+     */
+    dateTime: {
+      type: String,
+      required: !0,
+      validator: (t) => {
+        const e = new Date(t);
+        return e instanceof Date && !isNaN(e);
+      }
+    }
+  }
+};
+var n = function() {
+  var e = this, i = e._self._c;
+  return i("time", { staticClass: "dt-time-pill", attrs: { "data-qa": "dt-time-pill", dateTime: e.dateTime } }, [e._v(" " + e._s(e.dateTimeDisplay) + " ")]);
+}, l = [], s = /* @__PURE__ */ r(
+  a,
+  n,
+  l,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const _ = s.exports;
+export {
+  _ as DtRecipeTimePill
+};
+//# sourceMappingURL=time-pill.js.map

package/dist/lib/time-pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-pill.js","sources":["../../recipes/conversation_view/time_pill/time_pill.vue"],"sourcesContent":["<template>\n  <time\n    data-qa=\"dt-time-pill\"\n    :dateTime=\"dateTime\"\n    class=\"dt-time-pill\"\n  >\n    {{ dateTimeDisplay }}\n  </time>\n</template>\n\n<script>\nimport {} from './time_pill_constants';\n\nexport default {\n  name: 'DtRecipeTimePill',\n\n  props: {\n    /**\n     * Date time display value\n     */\n    dateTimeDisplay: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Machine-readable attribute\n     * Accepts a string value of YYYY-MM-DD or YYYY-MM-DDThh:mm:ssTZD\n     */\n    dateTime: {\n      type: String,\n      required: true,\n      validator: (t) => {\n        // Since this will only ever be used in the context of a date, we're rejecting non date inputs\n        const x = new Date(t);\n        if (x instanceof Date && !isNaN(x)) {\n          return true;\n        }\n        return false;\n      },\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-time-pill {\n  color: var(--dt-color-foreground-primary);\n  border-radius: var(--dt-size-radius-pill);\n  line-height: var(--dt-font-line-height-300);\n  font-size: var(--dt-font-size-100);\n  border: var(--dt-size-border-100) solid var(--dt-color-border-default);\n  background-color: var(--dt-color-surface-primary);\n  padding: var(--dt-space-300) var(--dt-space-500);\n}\n</style>\n"],"names":["_sfc_main","x"],"mappings":";AAaA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAA,MAAA;AAEA,cAAAC,IAAA,IAAA,KAAA,CAAA;AACA,eAAAA,aAAA,QAAA,CAAA,MAAAA,CAAA;AAAA,MAIA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/lib/toast.js

@@ -0,0 +1,226 @@
+import s from "./utils.js";
+import { a as n } from "../chunks/sr_only_close_button-JGole5Xi.js";
+import { n as a } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { a as r, b as l, D as d } from "../chunks/notice_action-9NmtQRai.js";
+import { N as u } 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 c = ["status", "alert"], o = 6e3, m = {
+  name: "DtToast",
+  components: {
+    DtNoticeIcon: r,
+    DtNoticeContent: l,
+    DtNoticeAction: d
+  },
+  mixins: [n],
+  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 s.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 s.getUniqueString();
+      }
+    },
+    /**
+     * Title header of the toast. This can be left blank to remove the title from the toast entirely.
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Message of the toast. Overridden by default slot.
+     */
+    message: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to
+     * communicate an important message like an error that does not contain any interactive elements.
+     * @values status, alert
+     */
+    role: {
+      type: String,
+      default: "status",
+      validator: (e) => c.includes(e)
+    },
+    /**
+     * Severity level of the toast, sets the icon and background
+     * @values base, error, info, success, warning
+     */
+    kind: {
+      type: String,
+      default: "base",
+      validator: (e) => u.includes(e)
+    },
+    /**
+     * Used in scenarios where the message needs to visually dominate the screen.
+     * @values true, false
+     */
+    important: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear
+     * after reaching the duration time, so it's convenient to use `.sync` modifier with this prop to update
+     * the data in your component.
+     * Supports .sync modifier
+     * @values true, false
+     */
+    show: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Props for the toast close button.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Hides the close button from the toast
+     * @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
+    },
+    /**
+     * The duration in ms the toast will display before disappearing.
+     * The toast won't disappear if the duration is not provided.
+     * If it's provided, it should be equal to or greater than 6000.
+     */
+    duration: {
+      type: Number,
+      default: null,
+      validator: (e) => e >= o
+    }
+  },
+  emits: [
+    /**
+     * Close button click event
+     *
+     * @event close
+     */
+    "close",
+    /**
+     * Sync show value
+     *
+     * @event update:show
+     */
+    "update:show"
+  ],
+  data() {
+    return {
+      isShown: !1,
+      minDuration: o
+    };
+  },
+  computed: {
+    kindClass() {
+      return {
+        error: "d-toast--error",
+        info: "d-toast--info",
+        success: "d-toast--success",
+        warning: "d-toast--warning",
+        base: "d-toast--base"
+      }[this.kind];
+    },
+    noticeActionListeners() {
+      return {
+        ...this.$listeners,
+        close: (e) => {
+          this.isShown = !1, this.$emit("update:show", !1), this.$emit("close", e);
+        }
+      };
+    },
+    shouldSetTimeout() {
+      return !!this.duration && this.duration >= this.minDuration;
+    }
+  },
+  watch: {
+    show: {
+      handler: function(e) {
+        this.isShown = e, e ? this.setTimeout() : clearTimeout(this.displayTimer);
+      },
+      immediate: !0
+    }
+  },
+  destroyed() {
+    this.shouldSetTimeout && clearTimeout(this.displayTimer);
+  },
+  methods: {
+    setTimeout() {
+      this.shouldSetTimeout && (this.displayTimer = setTimeout(() => {
+        this.isShown = !1, this.$emit("update:show", !1);
+      }, this.duration));
+    }
+  }
+};
+var p = function() {
+  var t = this, i = t._self._c;
+  return t.isShown ? i("div", { class: [
+    "d-toast",
+    t.kindClass,
+    { "d-toast--important": t.important }
+  ], attrs: { "data-qa": "dt-toast", "aria-hidden": (!t.isShown).toString() } }, [i("div", { staticClass: "d-toast__dialog" }, [t.hideIcon ? t._e() : i("dt-notice-icon", t._g({ attrs: { kind: t.kind } }, t.$listeners), [t._t("icon")], 2), i("dt-notice-content", t._g({ attrs: { "title-id": t.titleId, "content-id": t.contentId, title: t.title, role: t.role }, scopedSlots: t._u([{ key: "titleOverride", fn: function() {
+    return [t._t("titleOverride")];
+  }, proxy: !0 }], null, !0) }, t.$listeners), [t._t("default", function() {
+    return [t._v(" " + t._s(t.message) + " ")];
+  })], 2), i("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.noticeActionListeners), [t._t("action")], 2)], 1)]) : t._e();
+}, h = [], f = /* @__PURE__ */ a(
+  m,
+  p,
+  h,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const A = f.exports;
+export {
+  A as DtToast,
+  o as TOAST_MIN_DURATION,
+  c as TOAST_ROLES
+};
+//# sourceMappingURL=toast.js.map

package/dist/lib/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sources":["../../components/toast/toast_constants.js","../../components/toast/toast.vue"],"sourcesContent":["export const TOAST_ROLES = ['status', 'alert'];\nexport const TOAST_MIN_DURATION = 6000;\n\nexport default {\n  TOAST_ROLES,\n  TOAST_MIN_DURATION,\n};\n","<template>\n  <div\n    v-if=\"isShown\"\n    :class=\"[\n      'd-toast',\n      kindClass,\n      { 'd-toast--important': important },\n    ]\"\n    data-qa=\"dt-toast\"\n    :aria-hidden=\"(!isShown).toString()\"\n  >\n    <div class=\"d-toast__dialog\">\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        :role=\"role\"\n        v-on=\"$listeners\"\n      >\n        <template #titleOverride>\n          <!-- @slot Allows you to override the title, only use this if you need to override\n          with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the toast -->\n        <slot>\n          {{ message }}\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=\"noticeActionListeners\"\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  </div>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport utils from '@/common/utils';\nimport { TOAST_ROLES, TOAST_MIN_DURATION } from './toast_constants.js';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions.\n * It contains at-a-glance information about outcomes and can be paired with actions.\n * @see https://dialtone.dialpad.com/components/toast.html\n */\nexport default {\n  name: 'DtToast',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [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 toast. This can be left blank to remove the title from the toast entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Message of the toast. Overridden by default slot.\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to\n     * communicate an important message like an error that does not contain any interactive elements.\n     * @values status, alert\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validator: (role) => {\n        return TOAST_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Severity level of the toast, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator: (kind) => {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear\n     * after reaching the duration time, so it's convenient to use `.sync` modifier with this prop to update\n     * the data in your component.\n     * Supports .sync modifier\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Props for the toast close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the toast\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     * The duration in ms the toast will display before disappearing.\n     * The toast won't disappear if the duration is not provided.\n     * If it's provided, it should be equal to or greater than 6000.\n     */\n    duration: {\n      type: Number,\n      default: null,\n      validator: (duration) => {\n        return duration >= TOAST_MIN_DURATION;\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      isShown: false,\n      minDuration: TOAST_MIN_DURATION,\n    };\n  },\n\n  computed: {\n    kindClass () {\n      const kindClasses = {\n        error: 'd-toast--error',\n        info: 'd-toast--info',\n        success: 'd-toast--success',\n        warning: 'd-toast--warning',\n        base: 'd-toast--base',\n      };\n\n      return kindClasses[this.kind];\n    },\n\n    noticeActionListeners () {\n      return {\n        ...this.$listeners,\n\n        close: event => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n          this.$emit('close', event);\n        },\n      };\n    },\n\n    shouldSetTimeout () {\n      return !!this.duration && this.duration >= this.minDuration;\n    },\n  },\n\n  watch: {\n    show: {\n      handler: function (show) {\n        this.isShown = show;\n        if (show) {\n          this.setTimeout();\n        } else {\n          clearTimeout(this.displayTimer);\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  destroyed () {\n    if (this.shouldSetTimeout) {\n      clearTimeout(this.displayTimer);\n    }\n  },\n\n  methods: {\n    setTimeout () {\n      if (this.shouldSetTimeout) {\n        this.displayTimer = setTimeout(() => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n        }, this.duration);\n      }\n    },\n  },\n};\n</script>\n"],"names":["TOAST_ROLES","TOAST_MIN_DURATION","_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","utils","role","kind","NOTICE_KINDS","duration","event","show"],"mappings":"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"}