@dialpad/dialtone 9.74.3 → 9.75.0

package/dist/vue2/components/modal/modal.vue.cjs

@@ -302,13 +302,13 @@ var _sfc_render = function render() {
     "d-modal__dialog",
     { "d-modal__dialog--scrollable": _vm.fixedHeaderFooter },
     _vm.dialogClass
-  ], attrs: { "role": "dialog", "aria-modal": "true", "aria-describedby": _vm.describedById, "aria-labelledby": _vm.labelledById } }, [_vm.$slots.header ? _c("div", { staticClass: "d-modal__header", attrs: { "id": _vm.labelledById, "data-qa": "dt-modal-title" } }, [_vm._t("header")], 2) : _c("h2", { staticClass: "d-modal__header", attrs: { "id": _vm.labelledById, "data-qa": "dt-modal-title" } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _c("div", { directives: [{ name: "dt-scrollbar", rawName: "v-dt-scrollbar" }] }, [_vm.$slots.default ? _c("div", { class: [
+  ], attrs: { "role": "dialog", "aria-modal": "true", "aria-describedby": _vm.describedById, "aria-labelledby": _vm.labelledById } }, [_vm.$slots.header ? _c("div", { staticClass: "d-modal__header", attrs: { "id": _vm.labelledById, "data-qa": "dt-modal-title" } }, [_vm._t("header")], 2) : _c("h2", { staticClass: "d-modal__header", attrs: { "id": _vm.labelledById, "data-qa": "dt-modal-title" } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _vm.$slots.default ? _c("div", { class: [
     "d-modal__content",
     _vm.contentClass
   ], attrs: { "data-qa": "dt-modal-copy" } }, [_vm._t("default")], 2) : _c("p", { class: [
     "d-modal__content",
     _vm.contentClass
-  ], attrs: { "data-qa": "dt-modal-copy" } }, [_vm._v(" " + _vm._s(_vm.copy) + " ")])]), _vm.hasFooterSlot ? _c("footer", { staticClass: "d-modal__footer" }, [_vm._t("footer")], 2) : _vm._e(), !_vm.hideClose ? _c("dt-button", _vm._b({ staticClass: "d-modal__close", attrs: { "circle": "", "size": "lg", "importance": "clear", "aria-label": _vm.closeButtonProps.ariaLabel }, on: { "click": _vm.close }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+  ], attrs: { "data-qa": "dt-modal-copy" } }, [_vm._v(" " + _vm._s(_vm.copy) + " ")]), _vm.hasFooterSlot ? _c("footer", { staticClass: "d-modal__footer" }, [_vm._t("footer")], 2) : _vm._e(), !_vm.hideClose ? _c("dt-button", _vm._b({ staticClass: "d-modal__close", attrs: { "circle": "", "size": "lg", "importance": "clear", "aria-label": _vm.closeButtonProps.ariaLabel }, on: { "click": _vm.close }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
     return [_c("dt-icon", { attrs: { "name": "close", "size": "400" } })];
   }, proxy: true }], null, false, 1709155279) }, "dt-button", _vm.closeButtonProps, false)) : _vm._e(), _vm.showVisuallyHiddenClose ? _c("sr-only-close-button", { attrs: { "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel }, on: { "close": _vm.close } }) : _vm._e()], 1)])], 1);
 };

package/dist/vue2/components/modal/modal.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal.vue.cjs","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && ($slots.banner || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"$slots.header\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div v-dt-scrollbar>\n          <div\n            v-if=\"$slots.default\"\n            :class=\"[\n              'd-modal__content',\n              contentClass,\n            ]\"\n            data-qa=\"dt-modal-copy\"\n          >\n            <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n            <slot />\n          </div>\n          <p\n            v-else\n            :class=\"[\n              'd-modal__content',\n              contentClass,\n            ]\"\n            data-qa=\"dt-modal-copy\"\n          >\n            {{ copy }}\n          </p>\n        </div>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <dt-button\n          v-if=\"!hideClose\"\n          class=\"d-modal__close\"\n          circle\n          size=\"lg\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonProps.ariaLabel\"\n          v-bind=\"closeButtonProps\"\n          @click=\"close\"\n        >\n          <template #icon>\n            <dt-icon\n              name=\"close\"\n              size=\"400\"\n            />\n          </template>\n        </dt-button>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"close\"\n        />\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIcon,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      required: true,\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        ...this.$listeners,\n\n        click: event => {\n          if (!this.closeOnClick) return;\n          (event.target === event.currentTarget) && this.close();\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': event => {\n          this.$emit('update:show', true);\n          (event.target === event.currentTarget) && this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n  },\n\n  watch: {\n    show: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    validateProps () {\n      if (this.hideClose && !this.visuallyHiddenClose) {\n        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props\n        need to be set so the component always includes a close button`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtLazyShow","DtButton","DtIcon","SrOnlyCloseButton","Modal","SrOnlyCloseButtonMixin","getUniqueString","MODAL_KIND_MODIFIERS","MODAL_SIZE_MODIFIERS","NOTICE_KINDS","MODAL_BANNER_KINDS","EVENT_KEYNAMES"],"mappings":"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"}
+{"version":3,"file":"modal.vue.cjs","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && ($slots.banner || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"$slots.header\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div\n          v-if=\"$slots.default\"\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n          <slot />\n        </div>\n        <p\n          v-else\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          {{ copy }}\n        </p>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <dt-button\n          v-if=\"!hideClose\"\n          class=\"d-modal__close\"\n          circle\n          size=\"lg\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonProps.ariaLabel\"\n          v-bind=\"closeButtonProps\"\n          @click=\"close\"\n        >\n          <template #icon>\n            <dt-icon\n              name=\"close\"\n              size=\"400\"\n            />\n          </template>\n        </dt-button>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"close\"\n        />\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIcon,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      required: true,\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        ...this.$listeners,\n\n        click: event => {\n          if (!this.closeOnClick) return;\n          (event.target === event.currentTarget) && this.close();\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': event => {\n          this.$emit('update:show', true);\n          (event.target === event.currentTarget) && this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n  },\n\n  watch: {\n    show: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    validateProps () {\n      if (this.hideClose && !this.visuallyHiddenClose) {\n        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props\n        need to be set so the component always includes a close button`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtLazyShow","DtButton","DtIcon","SrOnlyCloseButton","Modal","SrOnlyCloseButtonMixin","getUniqueString","MODAL_KIND_MODIFIERS","MODAL_SIZE_MODIFIERS","NOTICE_KINDS","MODAL_BANNER_KINDS","EVENT_KEYNAMES"],"mappings":"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"}

package/dist/vue2/components/modal/modal.vue.js

@@ -301,13 +301,13 @@ var _sfc_render = function render() {
     "d-modal__dialog",
     { "d-modal__dialog--scrollable": _vm.fixedHeaderFooter },
     _vm.dialogClass
-  ], attrs: { "role": "dialog", "aria-modal": "true", "aria-describedby": _vm.describedById, "aria-labelledby": _vm.labelledById } }, [_vm.$slots.header ? _c("div", { staticClass: "d-modal__header", attrs: { "id": _vm.labelledById, "data-qa": "dt-modal-title" } }, [_vm._t("header")], 2) : _c("h2", { staticClass: "d-modal__header", attrs: { "id": _vm.labelledById, "data-qa": "dt-modal-title" } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _c("div", { directives: [{ name: "dt-scrollbar", rawName: "v-dt-scrollbar" }] }, [_vm.$slots.default ? _c("div", { class: [
+  ], attrs: { "role": "dialog", "aria-modal": "true", "aria-describedby": _vm.describedById, "aria-labelledby": _vm.labelledById } }, [_vm.$slots.header ? _c("div", { staticClass: "d-modal__header", attrs: { "id": _vm.labelledById, "data-qa": "dt-modal-title" } }, [_vm._t("header")], 2) : _c("h2", { staticClass: "d-modal__header", attrs: { "id": _vm.labelledById, "data-qa": "dt-modal-title" } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _vm.$slots.default ? _c("div", { class: [
     "d-modal__content",
     _vm.contentClass
   ], attrs: { "data-qa": "dt-modal-copy" } }, [_vm._t("default")], 2) : _c("p", { class: [
     "d-modal__content",
     _vm.contentClass
-  ], attrs: { "data-qa": "dt-modal-copy" } }, [_vm._v(" " + _vm._s(_vm.copy) + " ")])]), _vm.hasFooterSlot ? _c("footer", { staticClass: "d-modal__footer" }, [_vm._t("footer")], 2) : _vm._e(), !_vm.hideClose ? _c("dt-button", _vm._b({ staticClass: "d-modal__close", attrs: { "circle": "", "size": "lg", "importance": "clear", "aria-label": _vm.closeButtonProps.ariaLabel }, on: { "click": _vm.close }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+  ], attrs: { "data-qa": "dt-modal-copy" } }, [_vm._v(" " + _vm._s(_vm.copy) + " ")]), _vm.hasFooterSlot ? _c("footer", { staticClass: "d-modal__footer" }, [_vm._t("footer")], 2) : _vm._e(), !_vm.hideClose ? _c("dt-button", _vm._b({ staticClass: "d-modal__close", attrs: { "circle": "", "size": "lg", "importance": "clear", "aria-label": _vm.closeButtonProps.ariaLabel }, on: { "click": _vm.close }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
     return [_c("dt-icon", { attrs: { "name": "close", "size": "400" } })];
   }, proxy: true }], null, false, 1709155279) }, "dt-button", _vm.closeButtonProps, false)) : _vm._e(), _vm.showVisuallyHiddenClose ? _c("sr-only-close-button", { attrs: { "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel }, on: { "close": _vm.close } }) : _vm._e()], 1)])], 1);
 };

package/dist/vue2/components/modal/modal.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.vue.js","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && ($slots.banner || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"$slots.header\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div v-dt-scrollbar>\n          <div\n            v-if=\"$slots.default\"\n            :class=\"[\n              'd-modal__content',\n              contentClass,\n            ]\"\n            data-qa=\"dt-modal-copy\"\n          >\n            <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n            <slot />\n          </div>\n          <p\n            v-else\n            :class=\"[\n              'd-modal__content',\n              contentClass,\n            ]\"\n            data-qa=\"dt-modal-copy\"\n          >\n            {{ copy }}\n          </p>\n        </div>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <dt-button\n          v-if=\"!hideClose\"\n          class=\"d-modal__close\"\n          circle\n          size=\"lg\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonProps.ariaLabel\"\n          v-bind=\"closeButtonProps\"\n          @click=\"close\"\n        >\n          <template #icon>\n            <dt-icon\n              name=\"close\"\n              size=\"400\"\n            />\n          </template>\n        </dt-button>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"close\"\n        />\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIcon,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      required: true,\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        ...this.$listeners,\n\n        click: event => {\n          if (!this.closeOnClick) return;\n          (event.target === event.currentTarget) && this.close();\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': event => {\n          this.$emit('update:show', true);\n          (event.target === event.currentTarget) && this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n  },\n\n  watch: {\n    show: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    validateProps () {\n      if (this.hideClose && !this.visuallyHiddenClose) {\n        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props\n        need to be set so the component always includes a close button`);\n      }\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;AA4IA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA,CAAA,OAAA,sBAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAA,UAAA;AACA,eAAA,CAAA,CAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,WAAA;AAAA,eAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,oBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,oBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,MAAA;AACA,eAAA,aAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,qBAAA;AAAA,MACA,MAAA,CAAA,QAAA,WAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,yBAAA;AACA,eAAA,wBAAA,WACA,+BAAA,eACA,oBAAA,WAAA,GAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QAEA,OAAA,WAAA;AACA,cAAA,CAAA,KAAA,aAAA;AACA,UAAA,MAAA,WAAA,MAAA,iBAAA,KAAA;AACA,eAAA,MAAA,SAAA,KAAA;AAAA,QACA;AAAA,QAEA,SAAA,WAAA;AACA,kBAAA,MAAA,MAAA;AAAA,YACA,KAAA,eAAA;AAAA,YACA,KAAA,eAAA;AACA,mBAAA,MAAA;AACA;AAAA,YACA,KAAA,eAAA;AACA,mBAAA,UAAA,KAAA;AACA;AAAA,UACA;AACA,eAAA,MAAA,WAAA,KAAA;AAAA,QACA;AAAA,QAEA,eAAA,WAAA;AACA,eAAA,MAAA,eAAA,IAAA;AACA,UAAA,MAAA,WAAA,MAAA,iBAAA,KAAA;QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,OAAA;AACA,aAAA,GAAA,CAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,mBAAA,KAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA,WAAA;;AACA,YAAA,WAAA;AAEA,eAAA,wBAAA,SAAA;AAAA,QACA,OAAA;AAEA,qBAAA,0BAAA,mBAAA;AACA,eAAA,wBAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AACA,aAAA,cAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,QAAA;AACA,WAAA,MAAA,eAAA,KAAA;AAAA,IACA;AAAA,IAEA,0BAAA;AACA,UAAA,KAAA,wBAAA,SAAA;AACA,aAAA,kBAAA;AAAA,MACA,WAAA,KAAA,oBAAA,WAAA,GAAA,GAAA;AACA,aAAA,iBAAA,KAAA,mBAAA;AAAA,MACA,WAAA,KAAA,+BAAA,aAAA;AACA,aAAA,oBAAA;MACA;AAAA,IACA;AAAA,IAEA,UAAA,GAAA;AACA,UAAA,KAAA,MAAA;AACA,aAAA,qBAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,UAAA,KAAA,aAAA,CAAA,KAAA,qBAAA;AACA,gBAAA,MAAA;AAAA,uEACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"modal.vue.js","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && ($slots.banner || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"$slots.header\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div\n          v-if=\"$slots.default\"\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n          <slot />\n        </div>\n        <p\n          v-else\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          {{ copy }}\n        </p>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <dt-button\n          v-if=\"!hideClose\"\n          class=\"d-modal__close\"\n          circle\n          size=\"lg\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonProps.ariaLabel\"\n          v-bind=\"closeButtonProps\"\n          @click=\"close\"\n        >\n          <template #icon>\n            <dt-icon\n              name=\"close\"\n              size=\"400\"\n            />\n          </template>\n        </dt-button>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"close\"\n        />\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIcon,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      required: true,\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        ...this.$listeners,\n\n        click: event => {\n          if (!this.closeOnClick) return;\n          (event.target === event.currentTarget) && this.close();\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': event => {\n          this.$emit('update:show', true);\n          (event.target === event.currentTarget) && this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n  },\n\n  watch: {\n    show: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    validateProps () {\n      if (this.hideClose && !this.visuallyHiddenClose) {\n        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props\n        need to be set so the component always includes a close button`);\n      }\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}

package/dist/vue3/components/modal/modal.vue.cjs

@@ -304,7 +304,7 @@ const _hoisted_1 = ["aria-describedby", "aria-labelledby"];
 const _hoisted_2 = ["id"];
 const _hoisted_3 = ["id"];
 const _hoisted_4 = {
-  key: 2,
+  key: 4,
   class: "d-modal__footer"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -312,7 +312,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = vue.resolveComponent("dt-button");
   const _component_sr_only_close_button = vue.resolveComponent("sr-only-close-button");
   const _component_dt_lazy_show = vue.resolveComponent("dt-lazy-show");
-  const _directive_dt_scrollbar = vue.resolveDirective("dt-scrollbar");
   return vue.openBlock(), vue.createBlock(_component_dt_lazy_show, vue.mergeProps({
     transition: "d-zoom",
     show: $props.show,
@@ -368,32 +367,28 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               class: "d-modal__header",
               "data-qa": "dt-modal-title"
             }, vue.toDisplayString($props.title), 9, _hoisted_3)),
-            vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", null, [
-              $data.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("div", {
-                key: 0,
-                class: vue.normalizeClass([
-                  "d-modal__content",
-                  $props.contentClass
-                ]),
-                "data-qa": "dt-modal-copy"
-              }, [
-                vue.renderSlot(_ctx.$slots, "default")
-              ], 2)) : (vue.openBlock(), vue.createElementBlock("p", {
-                key: 1,
-                class: vue.normalizeClass([
-                  "d-modal__content",
-                  $props.contentClass
-                ]),
-                "data-qa": "dt-modal-copy"
-              }, vue.toDisplayString($props.copy), 3))
-            ])), [
-              [_directive_dt_scrollbar]
-            ]),
+            $data.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 2,
+              class: vue.normalizeClass([
+                "d-modal__content",
+                $props.contentClass
+              ]),
+              "data-qa": "dt-modal-copy"
+            }, [
+              vue.renderSlot(_ctx.$slots, "default")
+            ], 2)) : (vue.openBlock(), vue.createElementBlock("p", {
+              key: 3,
+              class: vue.normalizeClass([
+                "d-modal__content",
+                $props.contentClass
+              ]),
+              "data-qa": "dt-modal-copy"
+            }, vue.toDisplayString($props.copy), 3)),
             $options.hasFooterSlot ? (vue.openBlock(), vue.createElementBlock("footer", _hoisted_4, [
               vue.renderSlot(_ctx.$slots, "footer")
             ])) : vue.createCommentVNode("", true),
             !$props.hideClose ? (vue.openBlock(), vue.createBlock(_component_dt_button, vue.mergeProps({
-              key: 3,
+              key: 5,
               class: "d-modal__close",
               circle: "",
               size: "lg",
@@ -409,7 +404,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               _: 1
             }, 16, ["aria-label", "onClick"])) : vue.createCommentVNode("", true),
             _ctx.showVisuallyHiddenClose ? (vue.openBlock(), vue.createBlock(_component_sr_only_close_button, {
-              key: 4,
+              key: 6,
               "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
               onClose: $options.close
             }, null, 8, ["visually-hidden-close-label", "onClose"])) : vue.createCommentVNode("", true)

package/dist/vue3/components/modal/modal.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal.vue.cjs","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && (hasSlotContent($slots.banner) || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"hasSlotContent($slots.header)\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div v-dt-scrollbar>\n          <div\n            v-if=\"hasSlotContent($slots.default)\"\n            :class=\"[\n              'd-modal__content',\n              contentClass,\n            ]\"\n            data-qa=\"dt-modal-copy\"\n          >\n            <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n            <slot />\n          </div>\n          <p\n            v-else\n            :class=\"[\n              'd-modal__content',\n              contentClass,\n            ]\"\n            data-qa=\"dt-modal-copy\"\n          >\n            {{ copy }}\n          </p>\n        </div>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <dt-button\n          v-if=\"!hideClose\"\n          class=\"d-modal__close\"\n          circle\n          size=\"lg\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonProps.ariaLabel\"\n          v-bind=\"closeButtonProps\"\n          @click=\"close\"\n        >\n          <template #icon>\n            <dt-icon\n              name=\"close\"\n              size=\"400\"\n            />\n          </template>\n        </dt-button>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"close\"\n        />\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIcon,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      required: true,\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          if (!this.closeOnClick) return;\n          (event.target === event.currentTarget) && this.close();\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': event => {\n          this.$emit('update:show', true);\n          (event.target === event.currentTarget) && this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n  },\n\n  watch: {\n    show: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    validateProps () {\n      if (this.hideClose && !this.visuallyHiddenClose) {\n        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props\n        need to be set so the component always includes a close button`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtLazyShow","DtButton","DtIcon","SrOnlyCloseButton","Modal","SrOnlyCloseButtonMixin","getUniqueString","MODAL_KIND_MODIFIERS","MODAL_SIZE_MODIFIERS","NOTICE_KINDS","MODAL_BANNER_KINDS","EVENT_KEYNAMES","hasSlotContent","_openBlock","_createBlock","_mergeProps","_toHandlers","_createElementBlock","_normalizeClass","_renderSlot","_createVNode","_Transition","_createElementVNode"],"mappings":"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"}
+{"version":3,"file":"modal.vue.cjs","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && (hasSlotContent($slots.banner) || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"hasSlotContent($slots.header)\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div\n          v-if=\"hasSlotContent($slots.default)\"\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n          <slot />\n        </div>\n        <p\n          v-else\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          {{ copy }}\n        </p>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <dt-button\n          v-if=\"!hideClose\"\n          class=\"d-modal__close\"\n          circle\n          size=\"lg\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonProps.ariaLabel\"\n          v-bind=\"closeButtonProps\"\n          @click=\"close\"\n        >\n          <template #icon>\n            <dt-icon\n              name=\"close\"\n              size=\"400\"\n            />\n          </template>\n        </dt-button>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"close\"\n        />\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIcon,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      required: true,\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          if (!this.closeOnClick) return;\n          (event.target === event.currentTarget) && this.close();\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': event => {\n          this.$emit('update:show', true);\n          (event.target === event.currentTarget) && this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n  },\n\n  watch: {\n    show: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    validateProps () {\n      if (this.hideClose && !this.visuallyHiddenClose) {\n        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props\n        need to be set so the component always includes a close button`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtLazyShow","DtButton","DtIcon","SrOnlyCloseButton","Modal","SrOnlyCloseButtonMixin","getUniqueString","MODAL_KIND_MODIFIERS","MODAL_SIZE_MODIFIERS","NOTICE_KINDS","MODAL_BANNER_KINDS","EVENT_KEYNAMES","hasSlotContent","_openBlock","_createBlock","_mergeProps","_toHandlers","_createElementBlock","_normalizeClass","_renderSlot","_createVNode","_Transition","_createElementVNode"],"mappings":"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"}

package/dist/vue3/components/modal/modal.vue.js

@@ -4,7 +4,7 @@ import { getUniqueString, hasSlotContent } from "../../common/utils.js";
 import { EVENT_KEYNAMES } from "../../common/constants.js";
 import SrOnlyCloseButtonMixin from "../../common/mixins/sr_only_close_button.js";
 import SrOnlyCloseButton from "../../common/sr_only_close_button.vue.js";
-import { resolveComponent, resolveDirective, openBlock, createBlock, mergeProps, toHandlers, withCtx, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, Transition, withDirectives, createElementVNode, vShow } from "vue";
+import { resolveComponent, openBlock, createBlock, mergeProps, toHandlers, withCtx, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, Transition, withDirectives, createElementVNode, vShow } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 import DtLazyShow from "../lazy_show/lazy_show.vue.js";
 import DtButton from "../button/button.vue.js";
@@ -303,7 +303,7 @@ const _hoisted_1 = ["aria-describedby", "aria-labelledby"];
 const _hoisted_2 = ["id"];
 const _hoisted_3 = ["id"];
 const _hoisted_4 = {
-  key: 2,
+  key: 4,
   class: "d-modal__footer"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -311,7 +311,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = resolveComponent("dt-button");
   const _component_sr_only_close_button = resolveComponent("sr-only-close-button");
   const _component_dt_lazy_show = resolveComponent("dt-lazy-show");
-  const _directive_dt_scrollbar = resolveDirective("dt-scrollbar");
   return openBlock(), createBlock(_component_dt_lazy_show, mergeProps({
     transition: "d-zoom",
     show: $props.show,
@@ -367,32 +366,28 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               class: "d-modal__header",
               "data-qa": "dt-modal-title"
             }, toDisplayString($props.title), 9, _hoisted_3)),
-            withDirectives((openBlock(), createElementBlock("div", null, [
-              $data.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                class: normalizeClass([
-                  "d-modal__content",
-                  $props.contentClass
-                ]),
-                "data-qa": "dt-modal-copy"
-              }, [
-                renderSlot(_ctx.$slots, "default")
-              ], 2)) : (openBlock(), createElementBlock("p", {
-                key: 1,
-                class: normalizeClass([
-                  "d-modal__content",
-                  $props.contentClass
-                ]),
-                "data-qa": "dt-modal-copy"
-              }, toDisplayString($props.copy), 3))
-            ])), [
-              [_directive_dt_scrollbar]
-            ]),
+            $data.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("div", {
+              key: 2,
+              class: normalizeClass([
+                "d-modal__content",
+                $props.contentClass
+              ]),
+              "data-qa": "dt-modal-copy"
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 2)) : (openBlock(), createElementBlock("p", {
+              key: 3,
+              class: normalizeClass([
+                "d-modal__content",
+                $props.contentClass
+              ]),
+              "data-qa": "dt-modal-copy"
+            }, toDisplayString($props.copy), 3)),
             $options.hasFooterSlot ? (openBlock(), createElementBlock("footer", _hoisted_4, [
               renderSlot(_ctx.$slots, "footer")
             ])) : createCommentVNode("", true),
             !$props.hideClose ? (openBlock(), createBlock(_component_dt_button, mergeProps({
-              key: 3,
+              key: 5,
               class: "d-modal__close",
               circle: "",
               size: "lg",
@@ -408,7 +403,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               _: 1
             }, 16, ["aria-label", "onClick"])) : createCommentVNode("", true),
             _ctx.showVisuallyHiddenClose ? (openBlock(), createBlock(_component_sr_only_close_button, {
-              key: 4,
+              key: 6,
               "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
               onClose: $options.close
             }, null, 8, ["visually-hidden-close-label", "onClose"])) : createCommentVNode("", true)

package/dist/vue3/components/modal/modal.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.vue.js","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && (hasSlotContent($slots.banner) || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"hasSlotContent($slots.header)\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div v-dt-scrollbar>\n          <div\n            v-if=\"hasSlotContent($slots.default)\"\n            :class=\"[\n              'd-modal__content',\n              contentClass,\n            ]\"\n            data-qa=\"dt-modal-copy\"\n          >\n            <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n            <slot />\n          </div>\n          <p\n            v-else\n            :class=\"[\n              'd-modal__content',\n              contentClass,\n            ]\"\n            data-qa=\"dt-modal-copy\"\n          >\n            {{ copy }}\n          </p>\n        </div>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <dt-button\n          v-if=\"!hideClose\"\n          class=\"d-modal__close\"\n          circle\n          size=\"lg\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonProps.ariaLabel\"\n          v-bind=\"closeButtonProps\"\n          @click=\"close\"\n        >\n          <template #icon>\n            <dt-icon\n              name=\"close\"\n              size=\"400\"\n            />\n          </template>\n        </dt-button>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"close\"\n        />\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIcon,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      required: true,\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          if (!this.closeOnClick) return;\n          (event.target === event.currentTarget) && this.close();\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': event => {\n          this.$emit('update:show', true);\n          (event.target === event.currentTarget) && this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n  },\n\n  watch: {\n    show: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    validateProps () {\n      if (this.hideClose && !this.visuallyHiddenClose) {\n        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props\n        need to be set so the component always includes a close button`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_mergeProps","_toHandlers","_createElementBlock","_normalizeClass","_renderSlot","_createVNode","_Transition","_createElementVNode"],"mappings":"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"}
+{"version":3,"file":"modal.vue.js","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && (hasSlotContent($slots.banner) || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"hasSlotContent($slots.header)\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div\n          v-if=\"hasSlotContent($slots.default)\"\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n          <slot />\n        </div>\n        <p\n          v-else\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          {{ copy }}\n        </p>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <dt-button\n          v-if=\"!hideClose\"\n          class=\"d-modal__close\"\n          circle\n          size=\"lg\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonProps.ariaLabel\"\n          v-bind=\"closeButtonProps\"\n          @click=\"close\"\n        >\n          <template #icon>\n            <dt-icon\n              name=\"close\"\n              size=\"400\"\n            />\n          </template>\n        </dt-button>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"close\"\n        />\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIcon,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      required: true,\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          if (!this.closeOnClick) return;\n          (event.target === event.currentTarget) && this.close();\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': event => {\n          this.$emit('update:show', true);\n          (event.target === event.currentTarget) && this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n  },\n\n  watch: {\n    show: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    validateProps () {\n      if (this.hideClose && !this.visuallyHiddenClose) {\n        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props\n        need to be set so the component always includes a close button`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_mergeProps","_toHandlers","_createElementBlock","_normalizeClass","_renderSlot","_createVNode","_Transition","_createElementVNode"],"mappings":";;;;;;;;;;;;AA0IA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,QAAQ,CAAC,OAAO,sBAAsB;AAAA,EAEtC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,UAAU;AACpB,eAAO,CAAC,CAAC,MAAM;AAAA,MAChB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS,WAAY;AAAE,eAAO,gBAAe;AAAA,MAAK;AAAA,IACnD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAK,oBAAoB,EAAE,SAAS,CAAC;AAAA,IAC/D;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAK,oBAAoB,EAAE,SAAS,CAAC;AAAA,IAC/D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAU,MAAM;AACd,eAAO,aAAa,SAAS,IAAI;AAAA,MAClC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,qBAAqB;AAAA,MACnB,MAAM,CAAC,QAAQ,WAAW;AAAA,MAC1B,SAAS;AAAA,MACT,WAAW,yBAAuB;AAChC,eAAO,wBAAwB,WAC5B,+BAA+B,eAChC,oBAAoB,WAAW,GAAG;AAAA,MACrC;AAAA,IACF;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,iBAAkB;AAChB,aAAO;AAAA,QACL,OAAO,WAAS;AACd,cAAI,CAAC,KAAK,aAAc;AACxB,UAAC,MAAM,WAAW,MAAM,iBAAkB,KAAK;AAC/C,eAAK,MAAM,SAAS,KAAK;AAAA,QAC1B;AAAA,QAED,SAAS,WAAS;AAChB,kBAAQ,MAAM,MAAI;AAAA,YAChB,KAAK,eAAe;AAAA,YACpB,KAAK,eAAe;AAClB,mBAAK,MAAK;AACV;AAAA,YACF,KAAK,eAAe;AAClB,mBAAK,UAAU,KAAK;AACpB;AAAA,UACJ;AACA,eAAK,MAAM,WAAW,KAAK;AAAA,QAC5B;AAAA,QAED,eAAe,WAAS;AACtB,eAAK,MAAM,eAAe,IAAI;AAC9B,UAAC,MAAM,WAAW,MAAM,iBAAkB,KAAK;QAChD;AAAA;IAEJ;AAAA,IAED,OAAQ;AACN,aAAO,GAAG,CAAC,KAAK,IAAI;AAAA,IACrB;AAAA,IAED,gBAAiB;AACf,aAAO,CAAC,CAAC,KAAK,OAAO;AAAA,IACtB;AAAA,IAED,kBAAmB;AACjB,aAAO,mBAAmB,KAAK,UAAU;AAAA,IAC1C;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,WAAW;AAAA,MACX,QAAS,WAAW;;AAClB,YAAI,WAAW;AAEb,eAAK,wBAAwB,SAAS;AAAA,eACjC;AAEL,qBAAK,0BAAL,mBAA4B;AAC5B,eAAK,wBAAwB;AAAA,QAC/B;AAAA,MACD;AAAA,IACF;AAAA,IAED,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,MAAM;AAAA,MACN,UAAW;AACT,aAAK,cAAa;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,eAAe,KAAK;AAAA,IAChC;AAAA,IAED,0BAA2B;AACzB,UAAI,KAAK,wBAAwB,SAAS;AACxC,aAAK,kBAAiB;AAAA,MACtB,WAAS,KAAK,oBAAoB,WAAW,GAAG,GAAG;AACnD,aAAK,iBAAiB,KAAK,mBAAmB;AAAA,iBACrC,KAAK,+BAA+B,aAAa;AAC1D,aAAK,oBAAoB;MAC3B;AAAA,IACD;AAAA,IAED,UAAW,GAAG;AACZ,UAAI,KAAK,MAAM;AACb,aAAK,qBAAqB,CAAC;AAAA,MAC7B;AAAA,IACD;AAAA,IAED,gBAAiB;AACf,UAAI,KAAK,aAAa,CAAC,KAAK,qBAAqB;AAC/C,gBAAQ,MAAM;AAAA,uEACiD;AAAA,MACjE;AAAA,IACD;AAAA,EACF;AACH;;;;;;EA3XU,OAAM;;;;;;;AAnFd,SAAAA,UAAA,GAAAC,YAgHe,yBAhHfC,WAgHe;AAAA,IA/Gb,YAAW;AAAA,IACV,MAAM,OAAI;AAAA,IACV,OAAK;AAAA;MAA2B,MAAA,qBAAqB,OAAI,IAAA;AAAA,MAAS,MAAA,qBAAqB,OAAI,IAAA;AAAA,MAAS,OAAU;AAAA;IAM/G,WAAQ;AAAA,IACP,eAAa,SAAI;AAAA,EAClB,GAAAC,WAAM,SAAc,cAAA,CAAA,GAAA;AAAA,qBAEpB,MAaM;AAAA,MAZE,OAAA,SAAS,MAAc,eAAC,YAAO,MAAM,KAAK,OAAW,6BAD7DC,mBAaM,OAAA;AAAA;QAXJ,WAAQ;AAAA,QACP,OAAKC,eAAA;AAAA;UAAuC,OAAW;AAAA,UAAU,SAAe;AAAA;;QAOjFC,WAEO,2BAFP,MAEO;AAAA,0CADF,OAAW,WAAA,GAAA,CAAA;AAAA;;MAGlBC,YAoFaC,YAAA;AAAA,QAnFX,QAAA;AAAA,QACA,MAAK;AAAA;yBAEL,MA+EM;AAAA,yBA/ENC,mBA+EM,OAAA;AAAA,YA7EH,OAAKJ,eAAA;AAAA;+CAA4E,OAAiB,kBAAA;AAAA,cAAc,OAAW;AAAA;YAK5H,MAAK;AAAA,YACL,cAAW;AAAA,YACV,oBAAkB,OAAa;AAAA,YAC/B,mBAAiB,OAAY;AAAA;YAGtB,MAAc,eAAC,KAAM,OAAC,MAAM,kBADpCD,mBAQM,OAAA;AAAA;cANH,IAAI,OAAY;AAAA,cACjB,OAAM;AAAA,cACN,WAAQ;AAAA;cAGRE,WAAsB,KAAA,QAAA,QAAA;AAAA,+CAExBF,mBAOK,MAAA;AAAA;cALF,IAAI,OAAY;AAAA,cACjB,OAAM;AAAA,cACN,WAAQ;AAAA,+BAEL,OAAK,KAAA,GAAA,GAAA,UAAA;AAAA,YAGF,MAAc,eAAC,KAAM,OAAC,OAAO,kBADrCA,mBAUM,OAAA;AAAA;cARH,OAAKC,eAAA;AAAA;gBAAgD,OAAY;AAAA;cAIlE,WAAQ;AAAA;cAGRC,WAAQ,KAAA,QAAA,SAAA;AAAA,mCAEVF,mBASI,KAAA;AAAA;cAPD,OAAKC,eAAA;AAAA;gBAAgD,OAAY;AAAA;cAIlE,WAAQ;AAAA,+BAEL,OAAI,IAAA,GAAA,CAAA;AAAA,YAGD,SAAa,iBADrBL,aAAAI,mBAMS,UANT,YAMS;AAAA,cADPE,WAAsB,KAAA,QAAA,QAAA;AAAA;aAGf,OAAS,aADlBN,aAAAC,YAgBY,sBAhBZC,WAgBY;AAAA;cAdV,OAAM;AAAA,cACN,QAAA;AAAA,cACA,MAAK;AAAA,cACL,YAAW;AAAA,cACV,cAAY,OAAgB,iBAAC;AAAA,eACtB,OAAgB,kBAAA,EACvB,SAAO,SAAK,MAAA,CAAA,GAAA;AAAA,cAEF,cACT,MAGE;AAAA,gBAHFK,YAGE,oBAAA;AAAA,kBAFA,MAAK;AAAA,kBACL,MAAK;AAAA;;;;YAKH,KAAuB,wCAD/BN,YAIE,iCAAA;AAAA;cAFC,+BAA6B,KAAwB;AAAA,cACrD,SAAO,SAAK;AAAA;;oBA5EP,OAAI,IAAA;AAAA;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/dialtone",
-  "version": "9.74.3",
+  "version": "9.75.0",
   "description": "Dialpad's Dialtone design system monorepo",
   "files": [
     "dist"
@@ -75,7 +75,7 @@
     "tippy.js": "6.3.7",
     "@dialpad/dialtone-emojis": "1.0.8",
     "@dialpad/dialtone-icons": "4.27.1",
-    "@dialpad/dialtone-tokens": "1.36.1"
+    "@dialpad/dialtone-tokens": "1.36.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.3",