@dialpad/dialtone 9.66.0 → 9.67.0

package/dist/vue3/lib/tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.cjs","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 />\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","name","mixins","Modal","inject","props","id","type","String","required","tabId","hidden","Boolean","default","tabPanelClass","Array","Object","data","isFirstElementFocusable","computed","hidePanel","groupContext","selected","mounted","firstFocusableElement","getFirstFocusableElement","$el","isFirstElementOfPanel","methods","element","current","isFirstElement","previousElementSibling","parentNode","_createElementBlock","$props","role","tabindex","$data","$options","class","_renderSlot","_ctx","$slots"],"mappings":";;;;;;;;;;AAuBA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,QAAQ,CAACC,MAAAA,KAAK;AAAA,EAEdC,QAAQ,CAAC,cAAc;AAAA,EAEvBC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,IAAI;AAAA,MACFC,MAAMC;AAAAA,MACNC,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKDC,OAAO;AAAA,MACLH,MAAMC;AAAAA,MACNC,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMDE,QAAQ;AAAA,MACNJ,MAAMK;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDC,eAAe;AAAA,MACbP,MAAM,CAACC,QAAQO,OAAOC,MAAM;AAAA,MAC5BH,SAAS;AAAA,IACX;AAAA,EACD;AAAA,EAEDI,OAAQ;AACN,WAAO;AAAA,MACLC,yBAAyB;AAAA;EAE5B;AAAA,EAEDC,UAAU;AAAA,IACRC,YAAa;AACX,aAAO,KAAKC,aAAaC,aAAa,KAAKhB,MAAM,KAAKK;AAAAA,IACxD;AAAA,EACD;AAAA,EAED,MAAMY,UAAW;AACf,UAAMC,wBAAwB,MAAM,KAAKC,yBAAyB,KAAKC,GAAG;AAE1E,QAAI,CAACF,uBAAuB;AAC1B,WAAKN,0BAA0B;AAAA,IACjC,OAAO;AAIL,WAAKA,0BAA0B,KAAKS,sBAAsBH,qBAAqB;AAAA,IACjF;AAAA,EACD;AAAA,EAEDI,SAAS;AAAA,IACPD,sBAAuBE,SAAS;AAC9B,UAAIC,UAAUD;AACd,UAAIE,iBAAiB;AAErB,aAAOD,SAAS;AACd,YAAIA,QAAQE,2BAA2B,MAAM;AAC3CD,2BAAiB;AACjB;AAAA,QACF;AACAD,kBAAUA,QAAQG,eAAe,KAAKP,MAAMI,QAAQG,aAAa;AAAA,MACnE;AAEA,aAAOF;AAAAA,IACT;AAAA,EACF;AACF;;;8CAzGEG,IAAAA,mBAYM,OAAA;AAAA,IAVH5B,gBAAgB6B,OAAE7B,EAAA;AAAA,IACnB8B,MAAK;AAAA,IACJC,UAAUC,MAAuBpB,0BAAA,KAAA;AAAA,IACjC,6BAA2BiB,OAAKzB,KAAA;AAAA,IAChC,kBAAgB6B,SAASnB,SAAA;AAAA,IACzBoB,0BAAOL,OAAarB,aAAA;AAAA,IACrB,WAAQ;AAAA,MAGR2B,IAAQ,WAAAC,KAAAC,QAAA,SAAA,CAAA,mCAVCJ,SAASnB,SAAA,CAAA;;;;;;;;;;"}
+{"version":3,"file":"tabs.cjs","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 />\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":["Modal","_createElementBlock","_renderSlot"],"mappings":";;;;;;;;;;AAuBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,QAAQ,CAACA,MAAAA,KAAK;AAAA,EAEd,QAAQ,CAAC,cAAc;AAAA,EAEvB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,yBAAyB;AAAA;EAE5B;AAAA,EAED,UAAU;AAAA,IACR,YAAa;AACX,aAAO,KAAK,aAAa,aAAa,KAAK,MAAM,KAAK;AAAA,IACvD;AAAA,EACF;AAAA,EAED,MAAM,UAAW;AACf,UAAM,wBAAwB,MAAM,KAAK,yBAAyB,KAAK,GAAG;AAE1E,QAAI,CAAC,uBAAuB;AAC1B,WAAK,0BAA0B;AAAA,WAC1B;AAIL,WAAK,0BAA0B,KAAK,sBAAsB,qBAAqB;AAAA,IACjF;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,sBAAuB,SAAS;AAC9B,UAAI,UAAU;AACd,UAAI,iBAAiB;AAErB,aAAO,SAAS;AACd,YAAI,QAAQ,2BAA2B,MAAM;AAC3C,2BAAiB;AACjB;AAAA,QACF;AACA,kBAAU,QAAQ,eAAe,KAAK,MAAM,QAAQ,aAAa;AAAA,MACnE;AAEA,aAAO;AAAA,IACR;AAAA,EACF;AACH;;;8CAzGEC,IAAAA,mBAYM,OAAA;AAAA,IAVH,gBAAgB,OAAE,EAAA;AAAA,IACnB,MAAK;AAAA,IACJ,UAAU,MAAuB,0BAAA,KAAA;AAAA,IACjC,6BAA2B,OAAK,KAAA;AAAA,IAChC,kBAAgB,SAAS,SAAA;AAAA,IACzB,0BAAO,OAAa,aAAA;AAAA,IACrB,WAAQ;AAAA;IAGRC,eAAQ,KAAA,QAAA,SAAA;AAAA;iBAVC,SAAS,SAAA;AAAA;;;;;;;;;;"}

package/dist/vue3/lib/tabs.js

@@ -1,5 +1,5 @@
-import { DtTab, DtTabGroup, TAB_IMPORTANCE_MODIFIERS, TAB_LIST_IMPORTANCE_MODIFIERS, TAB_LIST_KIND_MODIFIERS, TAB_LIST_SIZES } from "../chunks/tab-aD6t0MNo.js";
-import { Modal } from "../chunks/modal-8X6poIZW.js";
+import { DtTab, DtTabGroup, TAB_IMPORTANCE_MODIFIERS, TAB_LIST_IMPORTANCE_MODIFIERS, TAB_LIST_KIND_MODIFIERS, TAB_LIST_SIZES } from "../chunks/tab-RTDgnD9-.js";
+import { Modal } from "../chunks/modal-XOr4kiNZ.js";
 import { withDirectives, openBlock, createElementBlock, normalizeClass, renderSlot, vShow } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import "./button.js";
@@ -84,7 +84,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-hidden": `${$options.hidePanel}`,
     class: normalizeClass($props.tabPanelClass),
     "data-qa": "dt-tab-panel"
-  }, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1)), [[vShow, !$options.hidePanel]]);
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 10, _hoisted_1)), [
+    [vShow, !$options.hidePanel]
+  ]);
 }
 const tab_panel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/vue3/lib/tabs.js.map

@@ -1 +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 />\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","name","mixins","Modal","inject","props","id","type","String","required","tabId","hidden","Boolean","default","tabPanelClass","Array","Object","data","isFirstElementFocusable","computed","hidePanel","groupContext","selected","mounted","firstFocusableElement","getFirstFocusableElement","$el","isFirstElementOfPanel","methods","element","current","isFirstElement","previousElementSibling","parentNode","_createElementBlock","$props","role","tabindex","$data","$options","class","_renderSlot","_ctx","$slots"],"mappings":";;;;;;;;AAuBA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,QAAQ,CAACC,KAAK;AAAA,EAEdC,QAAQ,CAAC,cAAc;AAAA,EAEvBC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,IAAI;AAAA,MACFC,MAAMC;AAAAA,MACNC,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKDC,OAAO;AAAA,MACLH,MAAMC;AAAAA,MACNC,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMDE,QAAQ;AAAA,MACNJ,MAAMK;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDC,eAAe;AAAA,MACbP,MAAM,CAACC,QAAQO,OAAOC,MAAM;AAAA,MAC5BH,SAAS;AAAA,IACX;AAAA,EACD;AAAA,EAEDI,OAAQ;AACN,WAAO;AAAA,MACLC,yBAAyB;AAAA;EAE5B;AAAA,EAEDC,UAAU;AAAA,IACRC,YAAa;AACX,aAAO,KAAKC,aAAaC,aAAa,KAAKhB,MAAM,KAAKK;AAAAA,IACxD;AAAA,EACD;AAAA,EAED,MAAMY,UAAW;AACf,UAAMC,wBAAwB,MAAM,KAAKC,yBAAyB,KAAKC,GAAG;AAE1E,QAAI,CAACF,uBAAuB;AAC1B,WAAKN,0BAA0B;AAAA,IACjC,OAAO;AAIL,WAAKA,0BAA0B,KAAKS,sBAAsBH,qBAAqB;AAAA,IACjF;AAAA,EACD;AAAA,EAEDI,SAAS;AAAA,IACPD,sBAAuBE,SAAS;AAC9B,UAAIC,UAAUD;AACd,UAAIE,iBAAiB;AAErB,aAAOD,SAAS;AACd,YAAIA,QAAQE,2BAA2B,MAAM;AAC3CD,2BAAiB;AACjB;AAAA,QACF;AACAD,kBAAUA,QAAQG,eAAe,KAAKP,MAAMI,QAAQG,aAAa;AAAA,MACnE;AAEA,aAAOF;AAAAA,IACT;AAAA,EACF;AACF;;;sCAzGEG,mBAYM,OAAA;AAAA,IAVH5B,gBAAgB6B,OAAE7B,EAAA;AAAA,IACnB8B,MAAK;AAAA,IACJC,UAAUC,MAAuBpB,0BAAA,KAAA;AAAA,IACjC,6BAA2BiB,OAAKzB,KAAA;AAAA,IAChC,kBAAgB6B,SAASnB,SAAA;AAAA,IACzBoB,sBAAOL,OAAarB,aAAA;AAAA,IACrB,WAAQ;AAAA,MAGR2B,WAAQC,KAAAC,QAAA,SAAA,CAAA,+BAVCJ,SAASnB,SAAA,CAAA;;;"}
+{"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 />\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":["_createElementBlock","_renderSlot"],"mappings":";;;;;;;;AAuBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,QAAQ,CAAC,KAAK;AAAA,EAEd,QAAQ,CAAC,cAAc;AAAA,EAEvB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,yBAAyB;AAAA;EAE5B;AAAA,EAED,UAAU;AAAA,IACR,YAAa;AACX,aAAO,KAAK,aAAa,aAAa,KAAK,MAAM,KAAK;AAAA,IACvD;AAAA,EACF;AAAA,EAED,MAAM,UAAW;AACf,UAAM,wBAAwB,MAAM,KAAK,yBAAyB,KAAK,GAAG;AAE1E,QAAI,CAAC,uBAAuB;AAC1B,WAAK,0BAA0B;AAAA,WAC1B;AAIL,WAAK,0BAA0B,KAAK,sBAAsB,qBAAqB;AAAA,IACjF;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,sBAAuB,SAAS;AAC9B,UAAI,UAAU;AACd,UAAI,iBAAiB;AAErB,aAAO,SAAS;AACd,YAAI,QAAQ,2BAA2B,MAAM;AAC3C,2BAAiB;AACjB;AAAA,QACF;AACA,kBAAU,QAAQ,eAAe,KAAK,MAAM,QAAQ,aAAa;AAAA,MACnE;AAEA,aAAO;AAAA,IACR;AAAA,EACF;AACH;;;sCAzGEA,mBAYM,OAAA;AAAA,IAVH,gBAAgB,OAAE,EAAA;AAAA,IACnB,MAAK;AAAA,IACJ,UAAU,MAAuB,0BAAA,KAAA;AAAA,IACjC,6BAA2B,OAAK,KAAA;AAAA,IAChC,kBAAgB,SAAS,SAAA;AAAA,IACzB,sBAAO,OAAa,aAAA;AAAA,IACrB,WAAQ;AAAA;IAGRC,WAAQ,KAAA,QAAA,SAAA;AAAA;aAVC,SAAS,SAAA;AAAA;;;"}

package/dist/vue3/lib/time-pill.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"time-pill.cjs","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  border: var(--dt-size-100) solid;\n  border-radius: var(--dt-size-radius-pill);\n  border-width: var(--dt-size-100);\n  --bco: 100%;\n  border-color: var(--dt-color-black-300);\n  padding-left: var(--dt-space-500);\n  padding-right: var(--dt-space-500);\n  padding-top: var(--dt-space-300);\n  padding-bottom: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n}\n</style>\n"],"names":["_sfc_main","name","props","dateTimeDisplay","type","String","required","dateTime","validator","t","x","Date","isNaN","_createElementBlock","$props","class","_hoisted_1"],"mappings":";;;;AAaA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,iBAAiB;AAAA,MACfC,MAAMC;AAAAA,MACNC,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMDC,UAAU;AAAA,MACRH,MAAMC;AAAAA,MACNC,UAAU;AAAA,MACVE,WAAYC,OAAM;AAEhB,cAAMC,IAAI,IAAIC,KAAKF,CAAC;AACpB,YAAIC,aAAaC,QAAQ,CAACC,MAAMF,CAAC,GAAG;AAClC,iBAAO;AAAA,QACT;AACA,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;;;0BAzCEG,IAMO,mBAAA,QAAA;AAAA,IALL,WAAQ;AAAA,IACPN,UAAUO,OAAQP;AAAAA,IACnBQ,OAAM;AAAA,yBAEHD,OAAeX,eAAA,GAAA,GAAAa,UAAA;;;;"}
+{"version":3,"file":"time-pill.cjs","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  border: var(--dt-size-100) solid;\n  border-radius: var(--dt-size-radius-pill);\n  border-width: var(--dt-size-100);\n  --bco: 100%;\n  border-color: var(--dt-color-black-300);\n  padding-left: var(--dt-space-500);\n  padding-right: var(--dt-space-500);\n  padding-top: var(--dt-space-300);\n  padding-bottom: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n}\n</style>\n"],"names":["_createElementBlock"],"mappings":";;;;AAaA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,MAAM;AAEhB,cAAM,IAAI,IAAI,KAAK,CAAC;AACpB,YAAI,aAAa,QAAQ,CAAC,MAAM,CAAC,GAAG;AAClC,iBAAO;AAAA,QACT;AACA,eAAO;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACH;;;0BAzCEA,IAMO,mBAAA,QAAA;AAAA,IALL,WAAQ;AAAA,IACP,UAAU,OAAQ;AAAA,IACnB,OAAM;AAAA,yBAEH,OAAe,eAAA,GAAA,GAAA,UAAA;;;;"}

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

@@ -1 +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  border: var(--dt-size-100) solid;\n  border-radius: var(--dt-size-radius-pill);\n  border-width: var(--dt-size-100);\n  --bco: 100%;\n  border-color: var(--dt-color-black-300);\n  padding-left: var(--dt-space-500);\n  padding-right: var(--dt-space-500);\n  padding-top: var(--dt-space-300);\n  padding-bottom: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n}\n</style>\n"],"names":["_sfc_main","name","props","dateTimeDisplay","type","String","required","dateTime","validator","t","x","Date","isNaN","_createElementBlock","$props","class","_hoisted_1"],"mappings":";;AAaA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,iBAAiB;AAAA,MACfC,MAAMC;AAAAA,MACNC,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMDC,UAAU;AAAA,MACRH,MAAMC;AAAAA,MACNC,UAAU;AAAA,MACVE,WAAYC,OAAM;AAEhB,cAAMC,IAAI,IAAIC,KAAKF,CAAC;AACpB,YAAIC,aAAaC,QAAQ,CAACC,MAAMF,CAAC,GAAG;AAClC,iBAAO;AAAA,QACT;AACA,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;;;sBAzCEG,mBAMO,QAAA;AAAA,IALL,WAAQ;AAAA,IACPN,UAAUO,OAAQP;AAAAA,IACnBQ,OAAM;AAAA,qBAEHD,OAAeX,eAAA,GAAA,GAAAa,UAAA;;;"}
+{"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  border: var(--dt-size-100) solid;\n  border-radius: var(--dt-size-radius-pill);\n  border-width: var(--dt-size-100);\n  --bco: 100%;\n  border-color: var(--dt-color-black-300);\n  padding-left: var(--dt-space-500);\n  padding-right: var(--dt-space-500);\n  padding-top: var(--dt-space-300);\n  padding-bottom: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n}\n</style>\n"],"names":["_createElementBlock"],"mappings":";;AAaA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,MAAM;AAEhB,cAAM,IAAI,IAAI,KAAK,CAAC;AACpB,YAAI,aAAa,QAAQ,CAAC,MAAM,CAAC,GAAG;AAClC,iBAAO;AAAA,QACT;AACA,eAAO;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACH;;;sBAzCEA,mBAMO,QAAA;AAAA,IALL,WAAQ;AAAA,IACP,UAAU,OAAQ;AAAA,IACnB,OAAM;AAAA,qBAEH,OAAe,eAAA,GAAA,GAAA,UAAA;;;"}

package/dist/vue3/lib/toast.cjs

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const common_utils = require("../common/utils.cjs");
-const sr_only_close_button = require("../chunks/sr_only_close_button-gKr0Vlbz.js");
+const sr_only_close_button = require("../chunks/sr_only_close_button-xGrHFjwA.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
-const notice_action = require("../chunks/notice_action-3ed0uIMN.js");
+const notice_action = require("../chunks/notice_action-WTucGhvr.js");
 const notice_constants = require("../chunks/notice_constants-UXo9e3bS.js");
 require("../common/constants.cjs");
 require("./icon.cjs");
 require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-bvhFNOPu.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("./button.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
@@ -218,46 +218,62 @@ const _sfc_main = {
   }
 };
 const _hoisted_1 = ["aria-hidden"];
-const _hoisted_2 = {
-  class: "d-toast__dialog"
-};
+const _hoisted_2 = { class: "d-toast__dialog" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_notice_icon = vue.resolveComponent("dt-notice-icon");
   const _component_dt_notice_content = vue.resolveComponent("dt-notice-content");
   const _component_dt_notice_action = vue.resolveComponent("dt-notice-action");
   return $data.isShown ? (vue.openBlock(), vue.createElementBlock("div", {
     key: 0,
-    class: vue.normalizeClass(["d-toast", $options.kindClass, {
-      "d-toast--important": $props.important
-    }]),
+    class: vue.normalizeClass([
+      "d-toast",
+      $options.kindClass,
+      { "d-toast--important": $props.important }
+    ]),
     "data-qa": "dt-toast",
     "aria-hidden": (!$data.isShown).toString()
-  }, [vue.createElementVNode("div", _hoisted_2, [!$props.hideIcon ? (vue.openBlock(), vue.createBlock(_component_dt_notice_icon, {
-    key: 0,
-    kind: $props.kind
-  }, {
-    default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "icon")]),
-    _: 3
-  }, 8, ["kind"])) : vue.createCommentVNode("", true), vue.createVNode(_component_dt_notice_content, {
-    "title-id": $props.titleId,
-    "content-id": $props.contentId,
-    title: $props.title,
-    role: $props.role
-  }, {
-    titleOverride: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "titleOverride")]),
-    default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString($props.message), 1)])]),
-    _: 3
-  }, 8, ["title-id", "content-id", "title", "role"]), vue.createVNode(_component_dt_notice_action, {
-    "hide-action": $props.hideAction,
-    "hide-close": $props.hideClose,
-    "close-button-props": $props.closeButtonProps,
-    "visually-hidden-close": _ctx.visuallyHiddenClose,
-    "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
-    onClose: $options.closeToast
-  }, {
-    default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "action")]),
-    _: 3
-  }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label", "onClose"])])], 10, _hoisted_1)) : vue.createCommentVNode("", true);
+  }, [
+    vue.createElementVNode("div", _hoisted_2, [
+      !$props.hideIcon ? (vue.openBlock(), vue.createBlock(_component_dt_notice_icon, {
+        key: 0,
+        kind: $props.kind
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "icon")
+        ]),
+        _: 3
+      }, 8, ["kind"])) : vue.createCommentVNode("", true),
+      vue.createVNode(_component_dt_notice_content, {
+        "title-id": $props.titleId,
+        "content-id": $props.contentId,
+        title: $props.title,
+        role: $props.role
+      }, {
+        titleOverride: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "titleOverride")
+        ]),
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default", {}, () => [
+            vue.createTextVNode(vue.toDisplayString($props.message), 1)
+          ])
+        ]),
+        _: 3
+      }, 8, ["title-id", "content-id", "title", "role"]),
+      vue.createVNode(_component_dt_notice_action, {
+        "hide-action": $props.hideAction,
+        "hide-close": $props.hideClose,
+        "close-button-props": $props.closeButtonProps,
+        "visually-hidden-close": _ctx.visuallyHiddenClose,
+        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+        onClose: $options.closeToast
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "action")
+        ]),
+        _: 3
+      }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label", "onClose"])
+    ])
+  ], 10, _hoisted_1)) : vue.createCommentVNode("", true);
 }
 const toast = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtToast = toast;

package/dist/vue3/lib/toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toast.cjs","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      >\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      >\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        @close=\"closeToast\"\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 `v-model` with this prop to update\n     * the data in your component.\n     * Supports v-model\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     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\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    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  unmounted () {\n    clearTimeout(this.displayTimer);\n  },\n\n  methods: {\n    closeToast (event) {\n      this.$emit('update:show', false);\n      this.$emit('close', event);\n    },\n\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","name","components","DtNoticeIcon","DtNoticeContent","DtNoticeAction","mixins","SrOnlyCloseButtonMixin","props","titleId","type","String","default","utils","getUniqueString","contentId","title","message","role","validator","includes","kind","NOTICE_KINDS","important","Boolean","show","closeButtonProps","Object","hideClose","hideIcon","hideAction","duration","Number","emits","data","isShown","minDuration","computed","kindClass","kindClasses","error","info","success","warning","base","shouldSetTimeout","watch","handler","setTimeout","clearTimeout","displayTimer","immediate","unmounted","methods","closeToast","event","$emit","_hoisted_2","class","$data","_createElementBlock","_normalizeClass","$options","$props","toString","_createElementVNode","_createBlock","_component_dt_notice_icon","_renderSlot","_ctx","$slots","_createVNode","_component_dt_notice_content","titleOverride","_component_dt_notice_action","visuallyHiddenClose","visuallyHiddenCloseLabel","onClose"],"mappings":"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"}
+{"version":3,"file":"toast.cjs","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      >\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      >\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        @close=\"closeToast\"\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 `v-model` with this prop to update\n     * the data in your component.\n     * Supports v-model\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     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\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    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  unmounted () {\n    clearTimeout(this.displayTimer);\n  },\n\n  methods: {\n    closeToast (event) {\n      this.$emit('update:show', false);\n      this.$emit('close', event);\n    },\n\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":["DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","utils","NOTICE_KINDS","_createElementBlock","_normalizeClass","_createElementVNode","_createBlock","_renderSlot","_createVNode"],"mappings":"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"}

package/dist/vue3/lib/toast.js

@@ -1,13 +1,13 @@
 import utils from "../common/utils.js";
-import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-Ji3Zlts6.js";
+import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-3EdsV-dH.js";
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, withCtx, renderSlot, createCommentVNode, createVNode, createTextVNode, toDisplayString } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
-import { DtNoticeIcon, DtNoticeContent, DtNoticeAction } from "../chunks/notice_action-e08Lw5W6.js";
+import { DtNoticeIcon, DtNoticeContent, DtNoticeAction } from "../chunks/notice_action-p-ePanW_.js";
 import { NOTICE_KINDS } from "../chunks/notice_constants-7Qt2CQEY.js";
 import "../common/constants.js";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-gIQj4mf7.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "./button.js";
 import "../chunks/link_constants-AfTWrr-n.js";
@@ -216,46 +216,62 @@ const _sfc_main = {
   }
 };
 const _hoisted_1 = ["aria-hidden"];
-const _hoisted_2 = {
-  class: "d-toast__dialog"
-};
+const _hoisted_2 = { class: "d-toast__dialog" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_notice_icon = resolveComponent("dt-notice-icon");
   const _component_dt_notice_content = resolveComponent("dt-notice-content");
   const _component_dt_notice_action = resolveComponent("dt-notice-action");
   return $data.isShown ? (openBlock(), createElementBlock("div", {
     key: 0,
-    class: normalizeClass(["d-toast", $options.kindClass, {
-      "d-toast--important": $props.important
-    }]),
+    class: normalizeClass([
+      "d-toast",
+      $options.kindClass,
+      { "d-toast--important": $props.important }
+    ]),
     "data-qa": "dt-toast",
     "aria-hidden": (!$data.isShown).toString()
-  }, [createElementVNode("div", _hoisted_2, [!$props.hideIcon ? (openBlock(), createBlock(_component_dt_notice_icon, {
-    key: 0,
-    kind: $props.kind
-  }, {
-    default: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
-    _: 3
-  }, 8, ["kind"])) : createCommentVNode("", true), createVNode(_component_dt_notice_content, {
-    "title-id": $props.titleId,
-    "content-id": $props.contentId,
-    title: $props.title,
-    role: $props.role
-  }, {
-    titleOverride: withCtx(() => [renderSlot(_ctx.$slots, "titleOverride")]),
-    default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString($props.message), 1)])]),
-    _: 3
-  }, 8, ["title-id", "content-id", "title", "role"]), createVNode(_component_dt_notice_action, {
-    "hide-action": $props.hideAction,
-    "hide-close": $props.hideClose,
-    "close-button-props": $props.closeButtonProps,
-    "visually-hidden-close": _ctx.visuallyHiddenClose,
-    "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
-    onClose: $options.closeToast
-  }, {
-    default: withCtx(() => [renderSlot(_ctx.$slots, "action")]),
-    _: 3
-  }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label", "onClose"])])], 10, _hoisted_1)) : createCommentVNode("", true);
+  }, [
+    createElementVNode("div", _hoisted_2, [
+      !$props.hideIcon ? (openBlock(), createBlock(_component_dt_notice_icon, {
+        key: 0,
+        kind: $props.kind
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "icon")
+        ]),
+        _: 3
+      }, 8, ["kind"])) : createCommentVNode("", true),
+      createVNode(_component_dt_notice_content, {
+        "title-id": $props.titleId,
+        "content-id": $props.contentId,
+        title: $props.title,
+        role: $props.role
+      }, {
+        titleOverride: withCtx(() => [
+          renderSlot(_ctx.$slots, "titleOverride")
+        ]),
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString($props.message), 1)
+          ])
+        ]),
+        _: 3
+      }, 8, ["title-id", "content-id", "title", "role"]),
+      createVNode(_component_dt_notice_action, {
+        "hide-action": $props.hideAction,
+        "hide-close": $props.hideClose,
+        "close-button-props": $props.closeButtonProps,
+        "visually-hidden-close": _ctx.visuallyHiddenClose,
+        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+        onClose: $options.closeToast
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "action")
+        ]),
+        _: 3
+      }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label", "onClose"])
+    ])
+  ], 10, _hoisted_1)) : createCommentVNode("", true);
 }
 const toast = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/vue3/lib/toast.js.map

@@ -1 +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      >\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      >\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        @close=\"closeToast\"\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 `v-model` with this prop to update\n     * the data in your component.\n     * Supports v-model\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     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\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    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  unmounted () {\n    clearTimeout(this.displayTimer);\n  },\n\n  methods: {\n    closeToast (event) {\n      this.$emit('update:show', false);\n      this.$emit('close', event);\n    },\n\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","name","components","DtNoticeIcon","DtNoticeContent","DtNoticeAction","mixins","SrOnlyCloseButtonMixin","props","titleId","type","String","default","utils","getUniqueString","contentId","title","message","role","validator","includes","kind","NOTICE_KINDS","important","Boolean","show","closeButtonProps","Object","hideClose","hideIcon","hideAction","duration","Number","emits","data","isShown","minDuration","computed","kindClass","kindClasses","error","info","success","warning","base","shouldSetTimeout","watch","handler","setTimeout","clearTimeout","displayTimer","immediate","unmounted","methods","closeToast","event","$emit","_hoisted_2","class","$data","_createElementBlock","_normalizeClass","$options","$props","toString","_createElementVNode","_createBlock","_component_dt_notice_icon","_renderSlot","_ctx","$slots","_createVNode","_component_dt_notice_content","titleOverride","_component_dt_notice_action","visuallyHiddenClose","visuallyHiddenCloseLabel","onClose"],"mappings":"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"}
+{"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      >\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      >\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        @close=\"closeToast\"\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 `v-model` with this prop to update\n     * the data in your component.\n     * Supports v-model\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     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\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    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  unmounted () {\n    clearTimeout(this.displayTimer);\n  },\n\n  methods: {\n    closeToast (event) {\n      this.$emit('update:show', false);\n      this.$emit('close', event);\n    },\n\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":["_createElementBlock","_normalizeClass","_createElementVNode","_createBlock","_renderSlot","_createVNode"],"mappings":"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"}

package/dist/vue3/lib/toggle.cjs

@@ -115,11 +115,15 @@ const _sfc_main = {
       return this.isIndeterminate ? "checkbox" : "switch";
     },
     toggleClasses() {
-      return ["d-toggle", TOGGLE_SIZE_MODIFIERS[this.size], {
-        "d-toggle--checked": this.internalChecked === true,
-        "d-toggle--disabled": this.disabled,
-        "d-toggle--indeterminate": this.isIndeterminate
-      }];
+      return [
+        "d-toggle",
+        TOGGLE_SIZE_MODIFIERS[this.size],
+        {
+          "d-toggle--checked": this.internalChecked === true,
+          "d-toggle--disabled": this.disabled,
+          "d-toggle--indeterminate": this.isIndeterminate
+        }
+      ];
     }
   },
   watch: {
@@ -145,14 +149,15 @@ const _sfc_main = {
     },
     validateInputLabels(hasLabel, ariaLabel) {
       if (!hasLabel && !ariaLabel) {
-        vue.warn("You must provide an aria-label when there is no label passed", this);
+        vue.warn(
+          "You must provide an aria-label when there is no label passed",
+          this
+        );
       }
     }
   }
 };
-const _hoisted_1 = {
-  class: "d-toggle-wrapper"
-};
+const _hoisted_1 = { class: "d-toggle-wrapper" };
 const _hoisted_2 = ["for"];
 const _hoisted_3 = ["id", "role", "aria-checked", "disabled", "aria-disabled"];
 const _hoisted_4 = {
@@ -160,21 +165,26 @@ const _hoisted_4 = {
   class: "d-toggle__inner"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [$data.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("label", vue.mergeProps({
-    key: 0,
-    class: $props.labelClass,
-    for: $props.id
-  }, $props.labelChildProps, {
-    "data-qa": "toggle-label"
-  }), [vue.renderSlot(_ctx.$slots, "default")], 16, _hoisted_2)) : vue.createCommentVNode("", true), vue.createElementVNode("button", vue.mergeProps({
-    id: $props.id,
-    role: $options.toggleRole,
-    type: "button",
-    "aria-checked": $data.internalChecked.toString(),
-    disabled: $props.disabled,
-    "aria-disabled": $props.disabled.toString(),
-    class: $options.toggleClasses
-  }, $options.inputListeners), [$props.showIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4)) : vue.createCommentVNode("", true)], 16, _hoisted_3)]);
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    $data.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("label", vue.mergeProps({
+      key: 0,
+      class: $props.labelClass,
+      for: $props.id
+    }, $props.labelChildProps, { "data-qa": "toggle-label" }), [
+      vue.renderSlot(_ctx.$slots, "default")
+    ], 16, _hoisted_2)) : vue.createCommentVNode("", true),
+    vue.createElementVNode("button", vue.mergeProps({
+      id: $props.id,
+      role: $options.toggleRole,
+      type: "button",
+      "aria-checked": $data.internalChecked.toString(),
+      disabled: $props.disabled,
+      "aria-disabled": $props.disabled.toString(),
+      class: $options.toggleClasses
+    }, $options.inputListeners), [
+      $props.showIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4)) : vue.createCommentVNode("", true)
+    ], 16, _hoisted_3)
+  ]);
 }
 const toggle = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtToggle = toggle;

package/dist/vue3/lib/toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.cjs","sources":["../../components/toggle/toggle_constants.js","../../components/toggle/toggle.vue"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n  sm: 'd-toggle--small',\n  md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n  TOGGLE_SIZE_MODIFIERS,\n  TOGGLE_CHECKED_VALUES,\n};\n","<template>\n  <div class=\"d-toggle-wrapper\">\n    <label\n      v-if=\"hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  model: {\n    prop: 'checked',\n    event: 'change',\n  },\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model checked\n     * @values true, false, 'mixed'\n     */\n    checked: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.checked,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$attrs,\n        onClick: _ => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    checked (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('change', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":["TOGGLE_SIZE_MODIFIERS","sm","md","TOGGLE_CHECKED_VALUES","_sfc_main","name","inheritAttrs","model","prop","event","props","id","type","String","default","getUniqueString","disabled","Boolean","checked","validator","v","includes","toggleOnClick","size","s","Object","keys","showIcon","labelClass","Array","labelChildProps","emits","data","internalChecked","hasSlotContent","computed","inputListeners","$attrs","onClick","_","toggleCheckedValue","isIndeterminate","toggleRole","toggleClasses","watch","newChecked","mounted","runValidations","methods","$emit","hasSlotLabel","$slots","validateInputLabels","hasLabel","ariaLabel","warn","_hoisted_1","class","_openBlock","_createElementBlock","$data","_ctx","_mergeProps","$props","for","_renderSlot","_createElementVNode","role","$options","toString","_hoisted_4"],"mappings":"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"}
+{"version":3,"file":"toggle.cjs","sources":["../../components/toggle/toggle_constants.js","../../components/toggle/toggle.vue"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n  sm: 'd-toggle--small',\n  md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n  TOGGLE_SIZE_MODIFIERS,\n  TOGGLE_CHECKED_VALUES,\n};\n","<template>\n  <div class=\"d-toggle-wrapper\">\n    <label\n      v-if=\"hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  model: {\n    prop: 'checked',\n    event: 'change',\n  },\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model checked\n     * @values true, false, 'mixed'\n     */\n    checked: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.checked,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$attrs,\n        onClick: _ => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    checked (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('change', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":["getUniqueString","hasSlotContent","warn","_openBlock","_createElementBlock","_mergeProps","_renderSlot","_createElementVNode"],"mappings":"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"}