@dialpad/dialtone-vue 2.153.0 → 2.154.1

package/dist/lib/time-pill.js

@@ -28,16 +28,19 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("time", {
-    staticClass: "dt-time-pill",
-    attrs: {
-      "data-qa": "dt-time-pill",
-      "dateTime": _vm.dateTime
-    }
-  }, [_vm._v(" " + _vm._s(_vm.dateTimeDisplay) + " ")]);
+  return _c("time", { staticClass: "dt-time-pill", attrs: { "data-qa": "dt-time-pill", "dateTime": _vm.dateTime } }, [_vm._v(" " + _vm._s(_vm.dateTimeDisplay) + " ")]);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const time_pill = __component__.exports;
 export {
   time_pill as DtRecipeTimePill

package/dist/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  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","name","props","dateTimeDisplay","type","String","required","dateTime","validator","t","x","Date","isNaN"],"mappings":";AAaA,MAAAA,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAC,iBAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAC,UAAA;AAAA,MACAH,MAAAC;AAAAA,MACAC,UAAA;AAAA,MACAE,WAAAC,OAAA;AAEA,cAAAC,IAAA,IAAAC,KAAAF,CAAA;AACA,YAAAC,aAAAC,QAAA,CAAAC,MAAAF,CAAA,GAAA;AACA,iBAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;"}
+{"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":[],"mappings":";AAaA,MAAA,YAAA;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,cAAA,IAAA,IAAA,KAAA,CAAA;AACA,YAAA,aAAA,QAAA,CAAA,MAAA,CAAA,GAAA;AACA,iBAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/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-2Q9Ny1Nc.js");
+const sr_only_close_button = require("../chunks/sr_only_close_button-ZaGdAHz7.js");
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
-const notice_action = require("../chunks/notice_action-tEvvMg7Q.js");
+const notice_action = require("../chunks/notice_action-P6uDyE9x.js");
 const notice_constants = require("../chunks/notice_constants-UXo9e3bS.js");
 require("../common/constants.cjs");
 require("vue");
 require("./icon.cjs");
 require("@dialpad/dialtone-icons/vue2");
-require("../chunks/icon_constants-VEA0wI5C.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("./button.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
@@ -220,48 +220,27 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _vm.isShown ? _c("div", {
-    class: ["d-toast", _vm.kindClass, {
-      "d-toast--important": _vm.important
-    }],
-    attrs: {
-      "data-qa": "dt-toast",
-      "aria-hidden": (!_vm.isShown).toString()
-    }
-  }, [_c("div", {
-    staticClass: "d-toast__dialog"
-  }, [!_vm.hideIcon ? _c("dt-notice-icon", _vm._g({
-    attrs: {
-      "kind": _vm.kind
-    }
-  }, _vm.$listeners), [_vm._t("icon")], 2) : _vm._e(), _c("dt-notice-content", _vm._g({
-    attrs: {
-      "title-id": _vm.titleId,
-      "content-id": _vm.contentId,
-      "title": _vm.title,
-      "role": _vm.role
-    },
-    scopedSlots: _vm._u([{
-      key: "titleOverride",
-      fn: function() {
-        return [_vm._t("titleOverride")];
-      },
-      proxy: true
-    }], null, true)
-  }, _vm.$listeners), [_vm._t("default", function() {
+  return _vm.isShown ? _c("div", { class: [
+    "d-toast",
+    _vm.kindClass,
+    { "d-toast--important": _vm.important }
+  ], attrs: { "data-qa": "dt-toast", "aria-hidden": (!_vm.isShown).toString() } }, [_c("div", { staticClass: "d-toast__dialog" }, [!_vm.hideIcon ? _c("dt-notice-icon", _vm._g({ attrs: { "kind": _vm.kind } }, _vm.$listeners), [_vm._t("icon")], 2) : _vm._e(), _c("dt-notice-content", _vm._g({ attrs: { "title-id": _vm.titleId, "content-id": _vm.contentId, "title": _vm.title, "role": _vm.role }, scopedSlots: _vm._u([{ key: "titleOverride", fn: function() {
+    return [_vm._t("titleOverride")];
+  }, proxy: true }], null, true) }, _vm.$listeners), [_vm._t("default", function() {
     return [_vm._v(" " + _vm._s(_vm.message) + " ")];
-  })], 2), _c("dt-notice-action", _vm._g({
-    attrs: {
-      "hide-action": _vm.hideAction,
-      "hide-close": _vm.hideClose,
-      "close-button-props": _vm.closeButtonProps,
-      "visually-hidden-close": _vm.visuallyHiddenClose,
-      "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel
-    }
-  }, _vm.noticeActionListeners), [_vm._t("action")], 2)], 1)]) : _vm._e();
+  })], 2), _c("dt-notice-action", _vm._g({ attrs: { "hide-action": _vm.hideAction, "hide-close": _vm.hideClose, "close-button-props": _vm.closeButtonProps, "visually-hidden-close": _vm.visuallyHiddenClose, "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel } }, _vm.noticeActionListeners), [_vm._t("action")], 2)], 1)]) : _vm._e();
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const toast = __component__.exports;
 exports.DtToast = toast;
 exports.TOAST_MIN_DURATION = TOAST_MIN_DURATION;

package/dist/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        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","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","noticeActionListeners","$listeners","close","event","$emit","shouldSetTimeout","watch","handler","setTimeout","clearTimeout","displayTimer","immediate","destroyed","methods"],"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        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":["DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","utils","NOTICE_KINDS"],"mappings":"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"}

package/dist/lib/toast.js

@@ -1,13 +1,13 @@
 import utils from "../common/utils.js";
-import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-IjMVfBDE.js";
+import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-81bHIpPu.js";
 import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
-import { DtNoticeIcon, DtNoticeContent, DtNoticeAction } from "../chunks/notice_action-qQr3K2TC.js";
+import { DtNoticeIcon, DtNoticeContent, DtNoticeAction } from "../chunks/notice_action-IRUoLX2d.js";
 import { NOTICE_KINDS } from "../chunks/notice_constants-7Qt2CQEY.js";
 import "../common/constants.js";
 import "vue";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-TdxqLsS2.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "./button.js";
 import "../chunks/link_constants-AfTWrr-n.js";
@@ -218,48 +218,27 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _vm.isShown ? _c("div", {
-    class: ["d-toast", _vm.kindClass, {
-      "d-toast--important": _vm.important
-    }],
-    attrs: {
-      "data-qa": "dt-toast",
-      "aria-hidden": (!_vm.isShown).toString()
-    }
-  }, [_c("div", {
-    staticClass: "d-toast__dialog"
-  }, [!_vm.hideIcon ? _c("dt-notice-icon", _vm._g({
-    attrs: {
-      "kind": _vm.kind
-    }
-  }, _vm.$listeners), [_vm._t("icon")], 2) : _vm._e(), _c("dt-notice-content", _vm._g({
-    attrs: {
-      "title-id": _vm.titleId,
-      "content-id": _vm.contentId,
-      "title": _vm.title,
-      "role": _vm.role
-    },
-    scopedSlots: _vm._u([{
-      key: "titleOverride",
-      fn: function() {
-        return [_vm._t("titleOverride")];
-      },
-      proxy: true
-    }], null, true)
-  }, _vm.$listeners), [_vm._t("default", function() {
+  return _vm.isShown ? _c("div", { class: [
+    "d-toast",
+    _vm.kindClass,
+    { "d-toast--important": _vm.important }
+  ], attrs: { "data-qa": "dt-toast", "aria-hidden": (!_vm.isShown).toString() } }, [_c("div", { staticClass: "d-toast__dialog" }, [!_vm.hideIcon ? _c("dt-notice-icon", _vm._g({ attrs: { "kind": _vm.kind } }, _vm.$listeners), [_vm._t("icon")], 2) : _vm._e(), _c("dt-notice-content", _vm._g({ attrs: { "title-id": _vm.titleId, "content-id": _vm.contentId, "title": _vm.title, "role": _vm.role }, scopedSlots: _vm._u([{ key: "titleOverride", fn: function() {
+    return [_vm._t("titleOverride")];
+  }, proxy: true }], null, true) }, _vm.$listeners), [_vm._t("default", function() {
     return [_vm._v(" " + _vm._s(_vm.message) + " ")];
-  })], 2), _c("dt-notice-action", _vm._g({
-    attrs: {
-      "hide-action": _vm.hideAction,
-      "hide-close": _vm.hideClose,
-      "close-button-props": _vm.closeButtonProps,
-      "visually-hidden-close": _vm.visuallyHiddenClose,
-      "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel
-    }
-  }, _vm.noticeActionListeners), [_vm._t("action")], 2)], 1)]) : _vm._e();
+  })], 2), _c("dt-notice-action", _vm._g({ attrs: { "hide-action": _vm.hideAction, "hide-close": _vm.hideClose, "close-button-props": _vm.closeButtonProps, "visually-hidden-close": _vm.visuallyHiddenClose, "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel } }, _vm.noticeActionListeners), [_vm._t("action")], 2)], 1)]) : _vm._e();
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const toast = __component__.exports;
 export {
   toast as DtToast,

package/dist/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        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","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","noticeActionListeners","$listeners","close","event","$emit","shouldSetTimeout","watch","handler","setTimeout","clearTimeout","displayTimer","immediate","destroyed","methods"],"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        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":[],"mappings":"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"}

package/dist/lib/toggle.cjs

@@ -114,11 +114,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: {
@@ -144,37 +148,29 @@ const _sfc_main = {
     },
     validateInputLabels(hasLabel, ariaLabel) {
       if (!hasLabel && !ariaLabel) {
-        Vue.util.warn("You must provide an aria-label when there is no label passed", this);
+        Vue.util.warn(
+          "You must provide an aria-label when there is no label passed",
+          this
+        );
       }
     }
   }
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    staticClass: "d-toggle-wrapper"
-  }, [_vm.$slots.default ? _c("label", _vm._b({
-    class: _vm.labelClass,
-    attrs: {
-      "for": _vm.id,
-      "data-qa": "toggle-label"
-    }
-  }, "label", _vm.labelChildProps, false), [_vm._t("default")], 2) : _vm._e(), _c("button", _vm._g(_vm._b({
-    class: _vm.toggleClasses,
-    attrs: {
-      "id": _vm.id,
-      "role": _vm.toggleRole,
-      "type": "button",
-      "aria-checked": _vm.internalChecked.toString(),
-      "disabled": _vm.disabled,
-      "aria-disabled": _vm.disabled.toString()
-    }
-  }, "button", _vm.$attrs, false), _vm.inputListeners), [_vm.showIcon ? _c("span", {
-    staticClass: "d-toggle__inner"
-  }) : _vm._e()])]);
+  return _c("div", { staticClass: "d-toggle-wrapper" }, [_vm.$slots.default ? _c("label", _vm._b({ class: _vm.labelClass, attrs: { "for": _vm.id, "data-qa": "toggle-label" } }, "label", _vm.labelChildProps, false), [_vm._t("default")], 2) : _vm._e(), _c("button", _vm._g(_vm._b({ class: _vm.toggleClasses, attrs: { "id": _vm.id, "role": _vm.toggleRole, "type": "button", "aria-checked": _vm.internalChecked.toString(), "disabled": _vm.disabled, "aria-disabled": _vm.disabled.toString() } }, "button", _vm.$attrs, false), _vm.inputListeners), [_vm.showIcon ? _c("span", { staticClass: "d-toggle__inner" }) : _vm._e()])]);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const toggle = __component__.exports;
 exports.DtToggle = toggle;
 exports.TOGGLE_CHECKED_VALUES = TOGGLE_CHECKED_VALUES;

package/dist/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=\"$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=\"$attrs\"\n      v-on=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport utils 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 utils.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    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        click: _ => 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        Vue.util.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","utils","getUniqueString","disabled","Boolean","checked","validator","v","includes","toggleOnClick","size","s","Object","keys","showIcon","labelClass","Array","labelChildProps","emits","data","internalChecked","computed","inputListeners","$listeners","click","_","toggleCheckedValue","isIndeterminate","toggleRole","toggleClasses","watch","newChecked","mounted","runValidations","methods","$emit","hasSlotLabel","$slots","validateInputLabels","$attrs","hasLabel","ariaLabel","Vue","util","warn"],"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=\"$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=\"$attrs\"\n      v-on=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport utils 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 utils.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    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        click: _ => 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        Vue.util.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":["utils"],"mappings":"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"}

package/dist/lib/toggle.js

@@ -112,11 +112,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: {
@@ -142,37 +146,29 @@ const _sfc_main = {
     },
     validateInputLabels(hasLabel, ariaLabel) {
       if (!hasLabel && !ariaLabel) {
-        Vue.util.warn("You must provide an aria-label when there is no label passed", this);
+        Vue.util.warn(
+          "You must provide an aria-label when there is no label passed",
+          this
+        );
       }
     }
   }
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    staticClass: "d-toggle-wrapper"
-  }, [_vm.$slots.default ? _c("label", _vm._b({
-    class: _vm.labelClass,
-    attrs: {
-      "for": _vm.id,
-      "data-qa": "toggle-label"
-    }
-  }, "label", _vm.labelChildProps, false), [_vm._t("default")], 2) : _vm._e(), _c("button", _vm._g(_vm._b({
-    class: _vm.toggleClasses,
-    attrs: {
-      "id": _vm.id,
-      "role": _vm.toggleRole,
-      "type": "button",
-      "aria-checked": _vm.internalChecked.toString(),
-      "disabled": _vm.disabled,
-      "aria-disabled": _vm.disabled.toString()
-    }
-  }, "button", _vm.$attrs, false), _vm.inputListeners), [_vm.showIcon ? _c("span", {
-    staticClass: "d-toggle__inner"
-  }) : _vm._e()])]);
+  return _c("div", { staticClass: "d-toggle-wrapper" }, [_vm.$slots.default ? _c("label", _vm._b({ class: _vm.labelClass, attrs: { "for": _vm.id, "data-qa": "toggle-label" } }, "label", _vm.labelChildProps, false), [_vm._t("default")], 2) : _vm._e(), _c("button", _vm._g(_vm._b({ class: _vm.toggleClasses, attrs: { "id": _vm.id, "role": _vm.toggleRole, "type": "button", "aria-checked": _vm.internalChecked.toString(), "disabled": _vm.disabled, "aria-disabled": _vm.disabled.toString() } }, "button", _vm.$attrs, false), _vm.inputListeners), [_vm.showIcon ? _c("span", { staticClass: "d-toggle__inner" }) : _vm._e()])]);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const toggle = __component__.exports;
 export {
   toggle as DtToggle,

package/dist/lib/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","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=\"$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=\"$attrs\"\n      v-on=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport utils 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 utils.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    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        click: _ => 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        Vue.util.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","utils","getUniqueString","disabled","Boolean","checked","validator","v","includes","toggleOnClick","size","s","Object","keys","showIcon","labelClass","Array","labelChildProps","emits","data","internalChecked","computed","inputListeners","$listeners","click","_","toggleCheckedValue","isIndeterminate","toggleRole","toggleClasses","watch","newChecked","mounted","runValidations","methods","$emit","hasSlotLabel","$slots","validateInputLabels","$attrs","hasLabel","ariaLabel","Vue","util","warn"],"mappings":"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"}
+{"version":3,"file":"toggle.js","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=\"$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=\"$attrs\"\n      v-on=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport utils 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 utils.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    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        click: _ => 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        Vue.util.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":[],"mappings":"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"}