@dialpad/dialtone-vue 3.120.0 → 3.120.2

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      >\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","DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","utils","role","kind","NOTICE_KINDS","duration","show","event","_hoisted_2","$data","_createElementBlock","_normalizeClass","$options","$props","_createElementVNode","_createBlock","_component_dt_notice_icon","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"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/lib/toast.js

@@ -1,24 +1,26 @@
-import l from "./utils.js";
-import { a as p } from "../chunks/sr_only_close_button-7O-Ev8uM.js";
-import { resolveComponent as s, openBlock as d, createElementBlock as _, normalizeClass as y, createElementVNode as S, createBlock as T, withCtx as o, renderSlot as i, createCommentVNode as r, createVNode as c, createTextVNode as g, toDisplayString as C } from "vue";
-import { _ as k } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { a as v, b as w, D as N } from "../chunks/notice_action-tJfD5Qw1.js";
-import { N as b } from "../chunks/notice_constants-c--hBFQw.js";
-import "./constants.js";
+import utils from "../common/utils.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-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-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "./button.js";
-import "../chunks/link_constants-vIUB92L4.js";
-const B = ["status", "alert"], u = 6e3, D = {
+import "../chunks/link_constants-nWVlXQBs.js";
+const TOAST_ROLES = ["status", "alert"];
+const TOAST_MIN_DURATION = 6e3;
+const _sfc_main = {
   name: "DtToast",
   components: {
-    DtNoticeIcon: v,
-    DtNoticeContent: w,
-    DtNoticeAction: N
+    DtNoticeIcon,
+    DtNoticeContent,
+    DtNoticeAction
   },
-  mixins: [p],
+  mixins: [SrOnlyCloseButtonMixin],
   props: {
     /**
      * Sets an ID on the title element of the component. Useful for aria-describedby
@@ -27,7 +29,7 @@ const B = ["status", "alert"], u = 6e3, D = {
     titleId: {
       type: String,
       default() {
-        return l.getUniqueString();
+        return utils.getUniqueString();
       }
     },
     /**
@@ -37,7 +39,7 @@ const B = ["status", "alert"], u = 6e3, D = {
     contentId: {
       type: String,
       default() {
-        return l.getUniqueString();
+        return utils.getUniqueString();
       }
     },
     /**
@@ -62,7 +64,9 @@ const B = ["status", "alert"], u = 6e3, D = {
     role: {
       type: String,
       default: "status",
-      validator: (t) => B.includes(t)
+      validator: (role) => {
+        return TOAST_ROLES.includes(role);
+      }
     },
     /**
      * Severity level of the toast, sets the icon and background
@@ -71,7 +75,9 @@ const B = ["status", "alert"], u = 6e3, D = {
     kind: {
       type: String,
       default: "base",
-      validator: (t) => b.includes(t)
+      validator: (kind) => {
+        return NOTICE_KINDS.includes(kind);
+      }
     },
     /**
      * Used in scenarios where the message needs to visually dominate the screen.
@@ -79,7 +85,7 @@ const B = ["status", "alert"], u = 6e3, D = {
      */
     important: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear
@@ -90,7 +96,7 @@ const B = ["status", "alert"], u = 6e3, D = {
      */
     show: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Props for the toast close button.
@@ -105,7 +111,7 @@ const B = ["status", "alert"], u = 6e3, D = {
      */
     hideClose: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Hides the icon from the notice
@@ -113,7 +119,7 @@ const B = ["status", "alert"], u = 6e3, D = {
      */
     hideIcon: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Hides the action from the notice
@@ -121,7 +127,7 @@ const B = ["status", "alert"], u = 6e3, D = {
      */
     hideAction: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * The duration in ms the toast will display before disappearing.
@@ -131,7 +137,9 @@ const B = ["status", "alert"], u = 6e3, D = {
     duration: {
       type: Number,
       default: null,
-      validator: (t) => t >= u
+      validator: (duration) => {
+        return duration >= TOAST_MIN_DURATION;
+      }
     }
   },
   emits: [
@@ -157,19 +165,20 @@ const B = ["status", "alert"], u = 6e3, D = {
   ],
   data() {
     return {
-      isShown: !1,
-      minDuration: u
+      isShown: false,
+      minDuration: TOAST_MIN_DURATION
     };
   },
   computed: {
     kindClass() {
-      return {
+      const kindClasses = {
         error: "d-toast--error",
         info: "d-toast--info",
         success: "d-toast--success",
         warning: "d-toast--warning",
         base: "d-toast--base"
-      }[this.kind];
+      };
+      return kindClasses[this.kind];
     },
     shouldSetTimeout() {
       return !!this.duration && this.duration >= this.minDuration;
@@ -177,84 +186,97 @@ const B = ["status", "alert"], u = 6e3, D = {
   },
   watch: {
     show: {
-      handler: function(t) {
-        this.isShown = t, t ? this.setTimeout() : clearTimeout(this.displayTimer);
+      handler: function(show) {
+        this.isShown = show;
+        if (show) {
+          this.setTimeout();
+        } else {
+          clearTimeout(this.displayTimer);
+        }
       },
-      immediate: !0
+      immediate: true
     }
   },
   unmounted() {
     clearTimeout(this.displayTimer);
   },
   methods: {
-    closeToast(t) {
-      this.$emit("update:show", !1), this.$emit("close", t);
+    closeToast(event) {
+      this.$emit("update:show", false);
+      this.$emit("close", event);
     },
     setTimeout() {
-      this.shouldSetTimeout && (this.displayTimer = setTimeout(() => {
-        this.isShown = !1, this.$emit("update:show", !1);
-      }, this.duration));
+      if (this.shouldSetTimeout) {
+        this.displayTimer = setTimeout(() => {
+          this.isShown = false;
+          this.$emit("update:show", false);
+        }, this.duration);
+      }
     }
   }
-}, I = ["aria-hidden"], O = { class: "d-toast__dialog" };
-function A(t, E, e, V, n, a) {
-  const m = s("dt-notice-icon"), h = s("dt-notice-content"), f = s("dt-notice-action");
-  return n.isShown ? (d(), _("div", {
+};
+const _hoisted_1 = ["aria-hidden"];
+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: y([
+    class: normalizeClass([
       "d-toast",
-      a.kindClass,
-      { "d-toast--important": e.important }
+      $options.kindClass,
+      { "d-toast--important": $props.important }
     ]),
     "data-qa": "dt-toast",
-    "aria-hidden": (!n.isShown).toString()
+    "aria-hidden": (!$data.isShown).toString()
   }, [
-    S("div", O, [
-      e.hideIcon ? r("", !0) : (d(), T(m, {
+    createElementVNode("div", _hoisted_2, [
+      !$props.hideIcon ? (openBlock(), createBlock(_component_dt_notice_icon, {
         key: 0,
-        kind: e.kind
+        kind: $props.kind
       }, {
-        default: o(() => [
-          i(t.$slots, "icon")
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "icon")
         ]),
         _: 3
-      }, 8, ["kind"])),
-      c(h, {
-        "title-id": e.titleId,
-        "content-id": e.contentId,
-        title: e.title,
-        role: e.role
+      }, 8, ["kind"])) : createCommentVNode("", true),
+      createVNode(_component_dt_notice_content, {
+        "title-id": $props.titleId,
+        "content-id": $props.contentId,
+        title: $props.title,
+        role: $props.role
       }, {
-        titleOverride: o(() => [
-          i(t.$slots, "titleOverride")
+        titleOverride: withCtx(() => [
+          renderSlot(_ctx.$slots, "titleOverride")
         ]),
-        default: o(() => [
-          i(t.$slots, "default", {}, () => [
-            g(C(e.message), 1)
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString($props.message), 1)
           ])
         ]),
         _: 3
       }, 8, ["title-id", "content-id", "title", "role"]),
-      c(f, {
-        "hide-action": e.hideAction,
-        "hide-close": e.hideClose,
-        "close-button-props": e.closeButtonProps,
-        "visually-hidden-close": t.visuallyHiddenClose,
-        "visually-hidden-close-label": t.visuallyHiddenCloseLabel,
-        onClose: a.closeToast
+      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: o(() => [
-          i(t.$slots, "action")
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "action")
         ]),
         _: 3
       }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label", "onClose"])
     ])
-  ], 10, I)) : r("", !0);
+  ], 10, _hoisted_1)) : createCommentVNode("", true);
 }
-const J = /* @__PURE__ */ k(D, [["render", A]]);
+const toast = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  J as DtToast,
-  u as TOAST_MIN_DURATION,
-  B as TOAST_ROLES
+  toast as DtToast,
+  TOAST_MIN_DURATION,
+  TOAST_ROLES
 };
 //# sourceMappingURL=toast.js.map

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      >\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","DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","utils","role","kind","NOTICE_KINDS","duration","show","event","_hoisted_2","$data","_createElementBlock","_normalizeClass","$options","$props","_createElementVNode","_createBlock","_component_dt_notice_icon","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"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/lib/toggle.cjs

@@ -1,2 +1,193 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=require("./utils.cjs"),d=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("./constants.cjs");const i={sm:"d-toggle--small",md:""},r=[!1,!0,"mixed"],c={name:"DtToggle",inheritAttrs:!1,model:{prop:"checked",event:"change"},props:{id:{type:String,default(){return o.getUniqueString()}},disabled:{type:Boolean,default:!1},checked:{type:[Boolean,String],default:!1,validator:t=>r.includes(t)},toggleOnClick:{type:Boolean,default:!0},size:{type:String,default:"md",validator:t=>Object.keys(i).includes(t)},showIcon:{type:Boolean,default:!0},labelClass:{type:[String,Array,Object],default:""},labelChildProps:{type:Object,default:()=>({})}},emits:["change"],data(){return{internalChecked:this.checked,hasSlotContent:o.hasSlotContent}},computed:{inputListeners(){return{...this.$attrs,onClick:t=>this.toggleCheckedValue()}},isIndeterminate(){return this.internalChecked==="mixed"},toggleRole(){return this.isIndeterminate?"checkbox":"switch"},toggleClasses(){return["d-toggle",i[this.size],{"d-toggle--checked":this.internalChecked===!0,"d-toggle--disabled":this.disabled,"d-toggle--indeterminate":this.isIndeterminate}]}},watch:{checked(t){this.internalChecked=t}},mounted(){this.runValidations()},methods:{toggleCheckedValue(){this.$emit("change",!this.internalChecked),this.toggleOnClick&&(this.internalChecked=!this.internalChecked)},hasSlotLabel(){return!!this.$slots.default},runValidations(){this.validateInputLabels(this.hasSlotLabel(),this.$attrs["aria-label"])},validateInputLabels(t,s){!t&&!s&&e.warn("You must provide an aria-label when there is no label passed",this)}}},h={class:"d-toggle-wrapper"},u=["for"],g=["id","role","aria-checked","disabled","aria-disabled"],b={key:0,class:"d-toggle__inner"};function k(t,s,l,C,n,a){return e.openBlock(),e.createElementBlock("div",h,[n.hasSlotContent(t.$slots.default)?(e.openBlock(),e.createElementBlock("label",e.mergeProps({key:0,class:l.labelClass,for:l.id},l.labelChildProps,{"data-qa":"toggle-label"}),[e.renderSlot(t.$slots,"default")],16,u)):e.createCommentVNode("",!0),e.createElementVNode("button",e.mergeProps({id:l.id,role:a.toggleRole,type:"button","aria-checked":n.internalChecked.toString(),disabled:l.disabled,"aria-disabled":l.disabled.toString(),class:a.toggleClasses},a.inputListeners),[l.showIcon?(e.openBlock(),e.createElementBlock("span",b)):e.createCommentVNode("",!0)],16,g)])}const m=d._(c,[["render",k]]);exports.DtToggle=m;exports.TOGGLE_CHECKED_VALUES=r;exports.TOGGLE_SIZE_MODIFIERS=i;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const common_utils = require("../common/utils.cjs");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+require("../common/constants.cjs");
+const TOGGLE_SIZE_MODIFIERS = {
+  sm: "d-toggle--small",
+  md: ""
+};
+const TOGGLE_CHECKED_VALUES = [false, true, "mixed"];
+const _sfc_main = {
+  name: "DtToggle",
+  inheritAttrs: false,
+  model: {
+    prop: "checked",
+    event: "change"
+  },
+  props: {
+    /**
+     * The id of the toggle
+     */
+    id: {
+      type: String,
+      default() {
+        return common_utils.getUniqueString();
+      }
+    },
+    /**
+     * Disables the toggle interactions
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Value of the toggle
+     * @model checked
+     * @values true, false, 'mixed'
+     */
+    checked: {
+      type: [Boolean, String],
+      default: false,
+      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v)
+    },
+    /**
+     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually
+     * via the checked prop or v-model. Change events will still be triggered.
+     * @values true, false
+     */
+    toggleOnClick: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * The size of the toggle.
+     * @values sm, md
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s)
+    },
+    /**
+     * Shows the icon
+     * @values true, false
+     */
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Used to customize the label container
+     */
+    labelClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * A set of props that are passed into the label container
+     */
+    labelChildProps: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: [
+    /**
+     * Toggle change event
+     *
+     * @event change
+     * @type {Boolean}
+     * @model change
+     */
+    "change"
+  ],
+  data() {
+    return {
+      internalChecked: this.checked,
+      hasSlotContent: common_utils.hasSlotContent
+    };
+  },
+  computed: {
+    inputListeners() {
+      return {
+        ...this.$attrs,
+        onClick: (_) => this.toggleCheckedValue()
+      };
+    },
+    isIndeterminate() {
+      return this.internalChecked === "mixed";
+    },
+    toggleRole() {
+      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
+        }
+      ];
+    }
+  },
+  watch: {
+    checked(newChecked) {
+      this.internalChecked = newChecked;
+    }
+  },
+  mounted() {
+    this.runValidations();
+  },
+  methods: {
+    toggleCheckedValue() {
+      this.$emit("change", !this.internalChecked);
+      if (this.toggleOnClick) {
+        this.internalChecked = !this.internalChecked;
+      }
+    },
+    hasSlotLabel() {
+      return !!this.$slots.default;
+    },
+    runValidations() {
+      this.validateInputLabels(this.hasSlotLabel(), this.$attrs["aria-label"]);
+    },
+    validateInputLabels(hasLabel, ariaLabel) {
+      if (!hasLabel && !ariaLabel) {
+        vue.warn(
+          "You must provide an aria-label when there is no label passed",
+          this
+        );
+      }
+    }
+  }
+};
+const _hoisted_1 = { class: "d-toggle-wrapper" };
+const _hoisted_2 = ["for"];
+const _hoisted_3 = ["id", "role", "aria-checked", "disabled", "aria-disabled"];
+const _hoisted_4 = {
+  key: 0,
+  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)
+  ]);
+}
+const toggle = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.DtToggle = toggle;
+exports.TOGGLE_CHECKED_VALUES = TOGGLE_CHECKED_VALUES;
+exports.TOGGLE_SIZE_MODIFIERS = TOGGLE_SIZE_MODIFIERS;
 //# sourceMappingURL=toggle.cjs.map