@dialpad/dialtone 9.76.0 → 9.77.0-beta.1

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\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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"}
+{"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-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 { DtIconClose } from '@dialpad/dialtone-icons/vue3';\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    DtIconClose,\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","DtIconClose","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

@@ -1,3 +1,4 @@
+import { DtIconClose } from "@dialpad/dialtone-icons/vue3";
 import Modal from "../../common/mixins/modal.js";
 import { MODAL_KIND_MODIFIERS, MODAL_SIZE_MODIFIERS, MODAL_BANNER_KINDS } from "./modal_constants.js";
 import { getUniqueString, hasSlotContent } from "../../common/utils.js";
@@ -8,14 +9,13 @@ import { resolveComponent, openBlock, createBlock, mergeProps, toHandlers, withC
 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";
-import DtIcon from "../icon/icon.vue.js";
 import { NOTICE_KINDS } from "../notice/notice_constants.js";
 const _sfc_main = {
   name: "DtModal",
   components: {
     DtLazyShow,
     DtButton,
-    DtIcon,
+    DtIconClose,
     SrOnlyCloseButton
   },
   mixins: [Modal, SrOnlyCloseButtonMixin],
@@ -307,7 +307,7 @@ const _hoisted_4 = {
   class: "d-modal__footer"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = resolveComponent("dt-icon");
+  const _component_dt_icon_close = resolveComponent("dt-icon-close");
   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");
@@ -395,10 +395,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               "aria-label": $props.closeButtonProps.ariaLabel
             }, $props.closeButtonProps, { onClick: $options.close }), {
               icon: withCtx(() => [
-                createVNode(_component_dt_icon, {
-                  name: "close",
-                  size: "400"
-                })
+                createVNode(_component_dt_icon_close, { size: "400" })
               ]),
               _: 1
             }, 16, ["aria-label", "onClick"])) : 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\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":"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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-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 { DtIconClose } from '@dialpad/dialtone-icons/vue3';\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    DtIconClose,\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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"}

package/dist/vue3/components/notice/notice_action.vue.cjs

@@ -1,14 +1,14 @@
 "use strict";
+const vue3 = require("@dialpad/dialtone-icons/vue3");
 const sr_only_close_button$1 = require("../../common/mixins/sr_only_close_button.cjs");
 const sr_only_close_button = require("../../common/sr_only_close_button.vue.cjs");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
-const icon = require("../icon/icon.vue.cjs");
 const button = require("../button/button.vue.cjs");
 const _sfc_main = {
   name: "DtNoticeAction",
   components: {
-    DtIcon: icon,
+    DtIconClose: vue3.DtIconClose,
     DtButton: button,
     SrOnlyCloseButton: sr_only_close_button
   },
@@ -71,7 +71,7 @@ const _hoisted_1 = {
   "data-qa": "notice-content-actions"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_icon_close = vue.resolveComponent("dt-icon-close");
   const _component_dt_button = vue.resolveComponent("dt-button");
   const _component_sr_only_close_button = vue.resolveComponent("sr-only-close-button");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
@@ -86,10 +86,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-label": $props.closeButtonProps.ariaLabel ? $props.closeButtonProps.ariaLabel : "Close"
     }, $props.closeButtonProps, { onClick: $options.close }), {
       icon: vue.withCtx(() => [
-        vue.createVNode(_component_dt_icon, {
-          name: "close",
-          size: "200"
-        })
+        vue.createVNode(_component_dt_icon_close, { size: "200" })
       ]),
       _: 1
     }, 16, ["aria-label", "onClick"])) : vue.createCommentVNode("", true),

package/dist/vue3/components/notice/notice_action.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"notice_action.vue.cjs","sources":["../../../components/notice/notice_action.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-notice__actions\"\n    data-qa=\"notice-content-actions\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot v-if=\"!hideAction\" />\n    <dt-button\n      v-if=\"!hideClose\"\n      ref=\"closeButton\"\n      data-qa=\"dt-notice-action-close-button\"\n      size=\"sm\"\n      importance=\"clear\"\n      circle\n      :aria-label=\"closeButtonProps.ariaLabel ? closeButtonProps.ariaLabel : 'Close'\"\n      v-bind=\"closeButtonProps\"\n      @click=\"close\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"close\"\n          size=\"200\"\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</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n  name: 'DtNoticeAction',\n\n  components: {\n    DtIcon,\n    DtButton,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  created () {\n    if (!this.hideClose && !this.closeButtonProps.ariaLabel) {\n      console.error('Invalid props: you must pass in closeButtonProps.ariaLabel if the close button is displayed.');\n    }\n  },\n\n  mounted () {\n    if (!this.hideClose) {\n      this.lastFocusedElement = document.activeElement;\n    }\n  },\n\n  beforeUnmount () {\n    this.lastFocusedElement?.focus();\n  },\n\n  methods: {\n    close () {\n      this.$emit('close');\n    },\n  },\n};\n</script>\n"],"names":["DtIcon","DtButton","SrOnlyCloseButton","SrOnlyCloseButtonMixin","_openBlock","_createElementBlock","_renderSlot","_createBlock","_mergeProps","_createVNode"],"mappings":";;;;;;;AAuCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAA;AAAAA,IACA,UAAAC;AAAAA,IACA,mBAAAC;AAAAA,EACD;AAAA,EAED,QAAQ,CAACC,sBAAsB;AAAA,EAE/B,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA,EACD;AAAA,EAED,UAAW;AACT,QAAI,CAAC,KAAK,aAAa,CAAC,KAAK,iBAAiB,WAAW;AACvD,cAAQ,MAAM,8FAA8F;AAAA,IAC9G;AAAA,EACD;AAAA,EAED,UAAW;AACT,QAAI,CAAC,KAAK,WAAW;AACnB,WAAK,qBAAqB,SAAS;AAAA,IACrC;AAAA,EACD;AAAA,EAED,gBAAiB;;AACf,eAAK,uBAAL,mBAAyB;AAAA,EAC1B;AAAA,EAED,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACnB;AAAA,EACF;AACH;;EA1GI,OAAM;AAAA,EACN,WAAQ;;;;;;AAFV,SAAAC,cAAA,GAAAC,uBA6BM,OA7BN,YA6BM;AAAA,KAxBS,OAAU,aAAvBC,IAA2B,WAAA,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA;KAElB,OAAS,aADlBF,IAAAA,aAAAG,IAAAA,YAiBY,sBAjBZC,eAiBY;AAAA;MAfV,KAAI;AAAA,MACJ,WAAQ;AAAA,MACR,MAAK;AAAA,MACL,YAAW;AAAA,MACX,QAAA;AAAA,MACC,cAAY,OAAgB,iBAAC,YAAY,OAAA,iBAAiB,YAAS;AAAA,OAC5D,OAAgB,kBAAA,EACvB,SAAO,SAAK,MAAA,CAAA,GAAA;AAAA,MAEF,kBACT,MAGE;AAAA,QAHFC,IAAAA,YAGE,oBAAA;AAAA,UAFA,MAAK;AAAA,UACL,MAAK;AAAA;;;;IAKH,KAAuB,4CAD/BF,IAIE,YAAA,iCAAA;AAAA;MAFC,+BAA6B,KAAwB;AAAA,MACrD,SAAO,SAAK;AAAA;;;;;"}
+{"version":3,"file":"notice_action.vue.cjs","sources":["../../../components/notice/notice_action.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-notice__actions\"\n    data-qa=\"notice-content-actions\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot v-if=\"!hideAction\" />\n    <dt-button\n      v-if=\"!hideClose\"\n      ref=\"closeButton\"\n      data-qa=\"dt-notice-action-close-button\"\n      size=\"sm\"\n      importance=\"clear\"\n      circle\n      :aria-label=\"closeButtonProps.ariaLabel ? closeButtonProps.ariaLabel : 'Close'\"\n      v-bind=\"closeButtonProps\"\n      @click=\"close\"\n    >\n      <template #icon>\n        <dt-icon-close\n          size=\"200\"\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</template>\n\n<script>\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n  name: 'DtNoticeAction',\n\n  components: {\n    DtIconClose,\n    DtButton,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  created () {\n    if (!this.hideClose && !this.closeButtonProps.ariaLabel) {\n      console.error('Invalid props: you must pass in closeButtonProps.ariaLabel if the close button is displayed.');\n    }\n  },\n\n  mounted () {\n    if (!this.hideClose) {\n      this.lastFocusedElement = document.activeElement;\n    }\n  },\n\n  beforeUnmount () {\n    this.lastFocusedElement?.focus();\n  },\n\n  methods: {\n    close () {\n      this.$emit('close');\n    },\n  },\n};\n</script>\n"],"names":["DtIconClose","DtButton","SrOnlyCloseButton","SrOnlyCloseButtonMixin","_openBlock","_createElementBlock","_renderSlot","_createBlock","_mergeProps","_createVNode"],"mappings":";;;;;;;AAsCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,iBACVA,KAAW;AAAA,IACX,UAAAC;AAAAA,IACA,mBAAAC;AAAAA,EACD;AAAA,EAED,QAAQ,CAACC,sBAAsB;AAAA,EAE/B,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA,EACD;AAAA,EAED,UAAW;AACT,QAAI,CAAC,KAAK,aAAa,CAAC,KAAK,iBAAiB,WAAW;AACvD,cAAQ,MAAM,8FAA8F;AAAA,IAC9G;AAAA,EACD;AAAA,EAED,UAAW;AACT,QAAI,CAAC,KAAK,WAAW;AACnB,WAAK,qBAAqB,SAAS;AAAA,IACrC;AAAA,EACD;AAAA,EAED,gBAAiB;;AACf,eAAK,uBAAL,mBAAyB;AAAA,EAC1B;AAAA,EAED,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACnB;AAAA,EACF;AACH;;EAzGI,OAAM;AAAA,EACN,WAAQ;;;;;;AAFV,SAAAC,cAAA,GAAAC,uBA4BM,OA5BN,YA4BM;AAAA,KAvBS,OAAU,aAAvBC,IAA2B,WAAA,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA;KAElB,OAAS,aADlBF,IAAAA,aAAAG,IAAAA,YAgBY,sBAhBZC,eAgBY;AAAA;MAdV,KAAI;AAAA,MACJ,WAAQ;AAAA,MACR,MAAK;AAAA,MACL,YAAW;AAAA,MACX,QAAA;AAAA,MACC,cAAY,OAAgB,iBAAC,YAAY,OAAA,iBAAiB,YAAS;AAAA,OAC5D,OAAgB,kBAAA,EACvB,SAAO,SAAK,MAAA,CAAA,GAAA;AAAA,MAEF,kBACT,MAEE;AAAA,QAFFC,IAAAA,YAEE,0BAAA,EADA,MAAK,MAAK,CAAA;AAAA;;;IAKR,KAAuB,4CAD/BF,IAIE,YAAA,iCAAA;AAAA;MAFC,+BAA6B,KAAwB;AAAA,MACrD,SAAO,SAAK;AAAA;;;;;"}

package/dist/vue3/components/notice/notice_action.vue.js

@@ -1,13 +1,13 @@
+import { DtIconClose } from "@dialpad/dialtone-icons/vue3";
 import SrOnlyCloseButtonMixin from "../../common/mixins/sr_only_close_button.js";
 import SrOnlyCloseButton from "../../common/sr_only_close_button.vue.js";
 import { resolveComponent, openBlock, createElementBlock, renderSlot, createCommentVNode, createBlock, mergeProps, withCtx, createVNode } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
-import DtIcon from "../icon/icon.vue.js";
 import DtButton from "../button/button.vue.js";
 const _sfc_main = {
   name: "DtNoticeAction",
   components: {
-    DtIcon,
+    DtIconClose,
     DtButton,
     SrOnlyCloseButton
   },
@@ -70,7 +70,7 @@ const _hoisted_1 = {
   "data-qa": "notice-content-actions"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = resolveComponent("dt-icon");
+  const _component_dt_icon_close = resolveComponent("dt-icon-close");
   const _component_dt_button = resolveComponent("dt-button");
   const _component_sr_only_close_button = resolveComponent("sr-only-close-button");
   return openBlock(), createElementBlock("div", _hoisted_1, [
@@ -85,10 +85,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-label": $props.closeButtonProps.ariaLabel ? $props.closeButtonProps.ariaLabel : "Close"
     }, $props.closeButtonProps, { onClick: $options.close }), {
       icon: withCtx(() => [
-        createVNode(_component_dt_icon, {
-          name: "close",
-          size: "200"
-        })
+        createVNode(_component_dt_icon_close, { size: "200" })
       ]),
       _: 1
     }, 16, ["aria-label", "onClick"])) : createCommentVNode("", true),

package/dist/vue3/components/notice/notice_action.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"notice_action.vue.js","sources":["../../../components/notice/notice_action.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-notice__actions\"\n    data-qa=\"notice-content-actions\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot v-if=\"!hideAction\" />\n    <dt-button\n      v-if=\"!hideClose\"\n      ref=\"closeButton\"\n      data-qa=\"dt-notice-action-close-button\"\n      size=\"sm\"\n      importance=\"clear\"\n      circle\n      :aria-label=\"closeButtonProps.ariaLabel ? closeButtonProps.ariaLabel : 'Close'\"\n      v-bind=\"closeButtonProps\"\n      @click=\"close\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"close\"\n          size=\"200\"\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</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n  name: 'DtNoticeAction',\n\n  components: {\n    DtIcon,\n    DtButton,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  created () {\n    if (!this.hideClose && !this.closeButtonProps.ariaLabel) {\n      console.error('Invalid props: you must pass in closeButtonProps.ariaLabel if the close button is displayed.');\n    }\n  },\n\n  mounted () {\n    if (!this.hideClose) {\n      this.lastFocusedElement = document.activeElement;\n    }\n  },\n\n  beforeUnmount () {\n    this.lastFocusedElement?.focus();\n  },\n\n  methods: {\n    close () {\n      this.$emit('close');\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_createBlock","_mergeProps","_createVNode"],"mappings":";;;;;;AAuCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,QAAQ,CAAC,sBAAsB;AAAA,EAE/B,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA,EACD;AAAA,EAED,UAAW;AACT,QAAI,CAAC,KAAK,aAAa,CAAC,KAAK,iBAAiB,WAAW;AACvD,cAAQ,MAAM,8FAA8F;AAAA,IAC9G;AAAA,EACD;AAAA,EAED,UAAW;AACT,QAAI,CAAC,KAAK,WAAW;AACnB,WAAK,qBAAqB,SAAS;AAAA,IACrC;AAAA,EACD;AAAA,EAED,gBAAiB;;AACf,eAAK,uBAAL,mBAAyB;AAAA,EAC1B;AAAA,EAED,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACnB;AAAA,EACF;AACH;;EA1GI,OAAM;AAAA,EACN,WAAQ;;;;;;AAFV,SAAAA,UAAA,GAAAC,mBA6BM,OA7BN,YA6BM;AAAA,KAxBS,OAAU,aAAvBC,WAA2B,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA;KAElB,OAAS,aADlBF,aAAAG,YAiBY,sBAjBZC,WAiBY;AAAA;MAfV,KAAI;AAAA,MACJ,WAAQ;AAAA,MACR,MAAK;AAAA,MACL,YAAW;AAAA,MACX,QAAA;AAAA,MACC,cAAY,OAAgB,iBAAC,YAAY,OAAA,iBAAiB,YAAS;AAAA,OAC5D,OAAgB,kBAAA,EACvB,SAAO,SAAK,MAAA,CAAA,GAAA;AAAA,MAEF,cACT,MAGE;AAAA,QAHFC,YAGE,oBAAA;AAAA,UAFA,MAAK;AAAA,UACL,MAAK;AAAA;;;;IAKH,KAAuB,wCAD/BF,YAIE,iCAAA;AAAA;MAFC,+BAA6B,KAAwB;AAAA,MACrD,SAAO,SAAK;AAAA;;;;"}
+{"version":3,"file":"notice_action.vue.js","sources":["../../../components/notice/notice_action.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-notice__actions\"\n    data-qa=\"notice-content-actions\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot v-if=\"!hideAction\" />\n    <dt-button\n      v-if=\"!hideClose\"\n      ref=\"closeButton\"\n      data-qa=\"dt-notice-action-close-button\"\n      size=\"sm\"\n      importance=\"clear\"\n      circle\n      :aria-label=\"closeButtonProps.ariaLabel ? closeButtonProps.ariaLabel : 'Close'\"\n      v-bind=\"closeButtonProps\"\n      @click=\"close\"\n    >\n      <template #icon>\n        <dt-icon-close\n          size=\"200\"\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</template>\n\n<script>\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n  name: 'DtNoticeAction',\n\n  components: {\n    DtIconClose,\n    DtButton,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  created () {\n    if (!this.hideClose && !this.closeButtonProps.ariaLabel) {\n      console.error('Invalid props: you must pass in closeButtonProps.ariaLabel if the close button is displayed.');\n    }\n  },\n\n  mounted () {\n    if (!this.hideClose) {\n      this.lastFocusedElement = document.activeElement;\n    }\n  },\n\n  beforeUnmount () {\n    this.lastFocusedElement?.focus();\n  },\n\n  methods: {\n    close () {\n      this.$emit('close');\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_createBlock","_mergeProps","_createVNode"],"mappings":";;;;;;AAsCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,QAAQ,CAAC,sBAAsB;AAAA,EAE/B,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA,EACD;AAAA,EAED,UAAW;AACT,QAAI,CAAC,KAAK,aAAa,CAAC,KAAK,iBAAiB,WAAW;AACvD,cAAQ,MAAM,8FAA8F;AAAA,IAC9G;AAAA,EACD;AAAA,EAED,UAAW;AACT,QAAI,CAAC,KAAK,WAAW;AACnB,WAAK,qBAAqB,SAAS;AAAA,IACrC;AAAA,EACD;AAAA,EAED,gBAAiB;;AACf,eAAK,uBAAL,mBAAyB;AAAA,EAC1B;AAAA,EAED,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACnB;AAAA,EACF;AACH;;EAzGI,OAAM;AAAA,EACN,WAAQ;;;;;;AAFV,SAAAA,UAAA,GAAAC,mBA4BM,OA5BN,YA4BM;AAAA,KAvBS,OAAU,aAAvBC,WAA2B,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA;KAElB,OAAS,aADlBF,aAAAG,YAgBY,sBAhBZC,WAgBY;AAAA;MAdV,KAAI;AAAA,MACJ,WAAQ;AAAA,MACR,MAAK;AAAA,MACL,YAAW;AAAA,MACX,QAAA;AAAA,MACC,cAAY,OAAgB,iBAAC,YAAY,OAAA,iBAAiB,YAAS;AAAA,OAC5D,OAAgB,kBAAA,EACvB,SAAO,SAAK,MAAA,CAAA,GAAA;AAAA,MAEF,cACT,MAEE;AAAA,QAFFC,YAEE,0BAAA,EADA,MAAK,MAAK,CAAA;AAAA;;;IAKR,KAAuB,wCAD/BF,YAIE,iCAAA;AAAA;MAFC,+BAA6B,KAAwB;AAAA,MACrD,SAAO,SAAK;AAAA;;;;"}

package/dist/vue3/components/notice/notice_icon.vue.cjs

@@ -1,20 +1,24 @@
 "use strict";
+const vue3 = require("@dialpad/dialtone-icons/vue3");
 const notice_constants = require("./notice_constants.cjs");
 const common_utils = require("../../common/utils.cjs");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
-const icon = require("../icon/icon.vue.cjs");
 const kindToIcon = /* @__PURE__ */ new Map([
-  ["info", "info"],
-  ["success", "check-circle"],
-  ["warning", "alert-triangle"],
-  ["error", "alert-circle"],
-  ["base", "bell"]
+  ["info", vue3.DtIconInfo],
+  ["success", vue3.DtIconCheckCircle],
+  ["warning", vue3.DtIconAlertTriangle],
+  ["error", vue3.DtIconAlertCircle],
+  ["base", vue3.DtIconBell]
 ]);
 const _sfc_main = {
   name: "DtNoticeIcon",
   components: {
-    DtIcon: icon
+    DtIconInfo: vue3.DtIconInfo,
+    DtIconCheckCircle: vue3.DtIconCheckCircle,
+    DtIconAlertTriangle: vue3.DtIconAlertTriangle,
+    DtIconAlertCircle: vue3.DtIconAlertCircle,
+    DtIconBell: vue3.DtIconBell
   },
   props: {
     /**
@@ -46,13 +50,9 @@ const _hoisted_1 = {
   class: "d-notice__icon"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = vue.resolveComponent("dt-icon");
   return $options.defaultIcon || $data.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
     vue.renderSlot(_ctx.$slots, "default", {}, () => [
-      vue.createVNode(_component_dt_icon, {
-        name: $options.defaultIcon,
-        size: "400"
-      }, null, 8, ["name"])
+      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.defaultIcon), { size: "400" }))
     ])
   ])) : vue.createCommentVNode("", true);
 }

package/dist/vue3/components/notice/notice_icon.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"notice_icon.vue.cjs","sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"defaultIcon || hasSlotContent($slots.default)\"\n    aria-hidden=\"true\"\n    class=\"d-notice__icon\"\n  >\n    <!-- @slot Slot for the main content -->\n    <slot>\n      <dt-icon\n        :name=\"defaultIcon\"\n        size=\"400\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { NOTICE_KINDS } from './notice_constants.js';\nimport { hasSlotContent } from '@/common/utils';\n\nconst kindToIcon = new Map([\n  ['info', 'info'],\n  ['success', 'check-circle'],\n  ['warning', 'alert-triangle'],\n  ['error', 'alert-circle'],\n  ['base', 'bell'],\n]);\n\nexport default {\n  name: 'DtNoticeIcon',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Kind of icon\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    defaultIcon () {\n      return kindToIcon.get(this.kind);\n    },\n  },\n};\n</script>\n"],"names":["DtIcon","NOTICE_KINDS","hasSlotContent","_openBlock","_createElementBlock","_renderSlot","_createVNode"],"mappings":";;;;;;AAqBA,MAAM,aAAa,oBAAI,IAAI;AAAA,EACzB,CAAC,QAAQ,MAAM;AAAA,EACf,CAAC,WAAW,cAAc;AAAA,EAC1B,CAAC,WAAW,gBAAgB;AAAA,EAC5B,CAAC,SAAS,cAAc;AAAA,EACxB,CAAC,QAAQ,MAAM;AACjB,CAAC;AAED,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAA;AAAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAU,MAAM;AACd,eAAOC,iBAAY,aAAC,SAAS,IAAI;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC,aAAc;AAAA;EAEjB;AAAA,EAED,UAAU;AAAA,IACR,cAAe;AACb,aAAO,WAAW,IAAI,KAAK,IAAI;AAAA,IAChC;AAAA,EACF;AACH;;;EA1DI,eAAY;AAAA,EACZ,OAAM;;;;AAFA,SAAA,SAAA,eAAe,MAAA,eAAe,KAAA,OAAO,OAAO,KADpDC,IAAAA,aAAAC,IAAAA,mBAYM,OAZN,YAYM;AAAA,IANJC,IAAAA,WAKO,4BALP,MAKO;AAAA,MAJLC,IAAAA,YAGE,oBAAA;AAAA,QAFC,MAAM,SAAW;AAAA,QAClB,MAAK;AAAA;;;;;;"}
+{"version":3,"file":"notice_icon.vue.cjs","sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"defaultIcon || hasSlotContent($slots.default)\"\n    aria-hidden=\"true\"\n    class=\"d-notice__icon\"\n  >\n    <!-- @slot Slot for the main content -->\n    <slot>\n      <component\n        :is=\"defaultIcon\"\n        size=\"400\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconInfo,\n  DtIconCheckCircle,\n  DtIconAlertTriangle,\n  DtIconAlertCircle,\n  DtIconBell,\n} from '@dialpad/dialtone-icons/vue3';\nimport { NOTICE_KINDS } from './notice_constants.js';\nimport { hasSlotContent } from '@/common/utils';\n\nconst kindToIcon = new Map([\n  ['info', DtIconInfo],\n  ['success', DtIconCheckCircle],\n  ['warning', DtIconAlertTriangle],\n  ['error', DtIconAlertCircle],\n  ['base', DtIconBell],\n]);\n\nexport default {\n  name: 'DtNoticeIcon',\n\n  components: {\n    DtIconInfo,\n    DtIconCheckCircle,\n    DtIconAlertTriangle,\n    DtIconAlertCircle,\n    DtIconBell,\n  },\n\n  props: {\n    /**\n     * Kind of icon\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    defaultIcon () {\n      return kindToIcon.get(this.kind);\n    },\n  },\n};\n</script>\n"],"names":["DtIconInfo","DtIconCheckCircle","DtIconAlertTriangle","DtIconAlertCircle","DtIconBell","NOTICE_KINDS","hasSlotContent","_openBlock","_createElementBlock","_renderSlot","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;;AA2BA,MAAM,aAAa,oBAAI,IAAI;AAAA,EACzB,CAAC,QAAQA,KAAAA,UAAU;AAAA,EACnB,CAAC,WAAWC,KAAAA,iBAAiB;AAAA,EAC7B,CAAC,WAAWC,KAAAA,mBAAmB;AAAA,EAC/B,CAAC,SAASC,KAAAA,iBAAiB;AAAA,EAC3B,CAAC,QAAQC,KAAAA,UAAU;AACrB,CAAC;AAED,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,gBACVJ,KAAU;AAAA,IACV,mBAAAC,KAAiB;AAAA,IACjB,qBAAAC,KAAmB;AAAA,IACnB,mBAAAC,KAAiB;AAAA,gBACjBC,KAAU;AAAA,EACX;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAU,MAAM;AACd,eAAOC,iBAAY,aAAC,SAAS,IAAI;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC,aAAc;AAAA;EAEjB;AAAA,EAED,UAAU;AAAA,IACR,cAAe;AACb,aAAO,WAAW,IAAI,KAAK,IAAI;AAAA,IAChC;AAAA,EACF;AACH;;;EApEI,eAAY;AAAA,EACZ,OAAM;;;AAFA,SAAA,SAAA,eAAe,MAAA,eAAe,KAAA,OAAO,OAAO,KADpDC,IAAAA,aAAAC,IAAAA,mBAYM,OAZN,YAYM;AAAA,IANJC,IAAAA,WAKO,4BALP,MAKO;AAAA,OAJLF,cAAA,GAAAG,IAAA,YAGEC,4BAFK,SAAA,WAAW,GAChB,EAAA,MAAK,OAAK;AAAA;;;;;"}

package/dist/vue3/components/notice/notice_icon.vue.js

@@ -1,19 +1,23 @@
+import { DtIconInfo, DtIconCheckCircle, DtIconAlertTriangle, DtIconAlertCircle, DtIconBell } from "@dialpad/dialtone-icons/vue3";
 import { NOTICE_KINDS } from "./notice_constants.js";
 import { hasSlotContent } from "../../common/utils.js";
-import { resolveComponent, openBlock, createElementBlock, renderSlot, createVNode, createCommentVNode } from "vue";
+import { openBlock, createElementBlock, renderSlot, createBlock, resolveDynamicComponent, createCommentVNode } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
-import DtIcon from "../icon/icon.vue.js";
 const kindToIcon = /* @__PURE__ */ new Map([
-  ["info", "info"],
-  ["success", "check-circle"],
-  ["warning", "alert-triangle"],
-  ["error", "alert-circle"],
-  ["base", "bell"]
+  ["info", DtIconInfo],
+  ["success", DtIconCheckCircle],
+  ["warning", DtIconAlertTriangle],
+  ["error", DtIconAlertCircle],
+  ["base", DtIconBell]
 ]);
 const _sfc_main = {
   name: "DtNoticeIcon",
   components: {
-    DtIcon
+    DtIconInfo,
+    DtIconCheckCircle,
+    DtIconAlertTriangle,
+    DtIconAlertCircle,
+    DtIconBell
   },
   props: {
     /**
@@ -45,13 +49,9 @@ const _hoisted_1 = {
   class: "d-notice__icon"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = resolveComponent("dt-icon");
   return $options.defaultIcon || $data.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("div", _hoisted_1, [
     renderSlot(_ctx.$slots, "default", {}, () => [
-      createVNode(_component_dt_icon, {
-        name: $options.defaultIcon,
-        size: "400"
-      }, null, 8, ["name"])
+      (openBlock(), createBlock(resolveDynamicComponent($options.defaultIcon), { size: "400" }))
     ])
   ])) : createCommentVNode("", true);
 }

package/dist/vue3/components/notice/notice_icon.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"notice_icon.vue.js","sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"defaultIcon || hasSlotContent($slots.default)\"\n    aria-hidden=\"true\"\n    class=\"d-notice__icon\"\n  >\n    <!-- @slot Slot for the main content -->\n    <slot>\n      <dt-icon\n        :name=\"defaultIcon\"\n        size=\"400\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { NOTICE_KINDS } from './notice_constants.js';\nimport { hasSlotContent } from '@/common/utils';\n\nconst kindToIcon = new Map([\n  ['info', 'info'],\n  ['success', 'check-circle'],\n  ['warning', 'alert-triangle'],\n  ['error', 'alert-circle'],\n  ['base', 'bell'],\n]);\n\nexport default {\n  name: 'DtNoticeIcon',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Kind of icon\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    defaultIcon () {\n      return kindToIcon.get(this.kind);\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_createVNode"],"mappings":";;;;;AAqBA,MAAM,aAAa,oBAAI,IAAI;AAAA,EACzB,CAAC,QAAQ,MAAM;AAAA,EACf,CAAC,WAAW,cAAc;AAAA,EAC1B,CAAC,WAAW,gBAAgB;AAAA,EAC5B,CAAC,SAAS,cAAc;AAAA,EACxB,CAAC,QAAQ,MAAM;AACjB,CAAC;AAED,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAU,MAAM;AACd,eAAO,aAAa,SAAS,IAAI;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,cAAe;AACb,aAAO,WAAW,IAAI,KAAK,IAAI;AAAA,IAChC;AAAA,EACF;AACH;;;EA1DI,eAAY;AAAA,EACZ,OAAM;;;;AAFA,SAAA,SAAA,eAAe,MAAA,eAAe,KAAA,OAAO,OAAO,KADpDA,aAAAC,mBAYM,OAZN,YAYM;AAAA,IANJC,WAKO,4BALP,MAKO;AAAA,MAJLC,YAGE,oBAAA;AAAA,QAFC,MAAM,SAAW;AAAA,QAClB,MAAK;AAAA;;;;;"}
+{"version":3,"file":"notice_icon.vue.js","sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"defaultIcon || hasSlotContent($slots.default)\"\n    aria-hidden=\"true\"\n    class=\"d-notice__icon\"\n  >\n    <!-- @slot Slot for the main content -->\n    <slot>\n      <component\n        :is=\"defaultIcon\"\n        size=\"400\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconInfo,\n  DtIconCheckCircle,\n  DtIconAlertTriangle,\n  DtIconAlertCircle,\n  DtIconBell,\n} from '@dialpad/dialtone-icons/vue3';\nimport { NOTICE_KINDS } from './notice_constants.js';\nimport { hasSlotContent } from '@/common/utils';\n\nconst kindToIcon = new Map([\n  ['info', DtIconInfo],\n  ['success', DtIconCheckCircle],\n  ['warning', DtIconAlertTriangle],\n  ['error', DtIconAlertCircle],\n  ['base', DtIconBell],\n]);\n\nexport default {\n  name: 'DtNoticeIcon',\n\n  components: {\n    DtIconInfo,\n    DtIconCheckCircle,\n    DtIconAlertTriangle,\n    DtIconAlertCircle,\n    DtIconBell,\n  },\n\n  props: {\n    /**\n     * Kind of icon\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    defaultIcon () {\n      return kindToIcon.get(this.kind);\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;AA2BA,MAAM,aAAa,oBAAI,IAAI;AAAA,EACzB,CAAC,QAAQ,UAAU;AAAA,EACnB,CAAC,WAAW,iBAAiB;AAAA,EAC7B,CAAC,WAAW,mBAAmB;AAAA,EAC/B,CAAC,SAAS,iBAAiB;AAAA,EAC3B,CAAC,QAAQ,UAAU;AACrB,CAAC;AAED,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAU,MAAM;AACd,eAAO,aAAa,SAAS,IAAI;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,cAAe;AACb,aAAO,WAAW,IAAI,KAAK,IAAI;AAAA,IAChC;AAAA,EACF;AACH;;;EApEI,eAAY;AAAA,EACZ,OAAM;;;AAFA,SAAA,SAAA,eAAe,MAAA,eAAe,KAAA,OAAO,OAAO,KADpDA,aAAAC,mBAYM,OAZN,YAYM;AAAA,IANJC,WAKO,4BALP,MAKO;AAAA,OAJLF,UAAA,GAAAG,YAGEC,wBAFK,SAAA,WAAW,GAChB,EAAA,MAAK,OAAK;AAAA;;;;"}

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

@@ -1,13 +1,15 @@
 "use strict";
+const vue3 = require("@dialpad/dialtone-icons/vue3");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const button = require("../button/button.vue.cjs");
-const icon = require("../icon/icon.vue.cjs");
 const _sfc_main = {
   name: "DtPagination",
   components: {
     DtButton: button,
-    DtIcon: icon
+    DtIconChevronLeft: vue3.DtIconChevronLeft,
+    DtIconChevronRight: vue3.DtIconChevronRight,
+    DtIconMoreHorizontal: vue3.DtIconMoreHorizontal
   },
   props: {
     /**
@@ -127,8 +129,10 @@ const _hoisted_2 = {
   "data-qa": "dt-pagination-separator"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_icon_chevron_left = vue.resolveComponent("dt-icon-chevron-left");
   const _component_dt_button = vue.resolveComponent("dt-button");
+  const _component_dt_icon_more_horizontal = vue.resolveComponent("dt-icon-more-horizontal");
+  const _component_dt_icon_chevron_right = vue.resolveComponent("dt-icon-chevron-right");
   return vue.openBlock(), vue.createElementBlock("nav", {
     "aria-label": $props.ariaLabel,
     class: "d-pagination"
@@ -143,10 +147,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = ($event) => $options.changePage($data.currentPage - 1))
     }, {
       icon: vue.withCtx(() => [
-        vue.createVNode(_component_dt_icon, {
-          name: "chevron-left",
-          size: "300"
-        })
+        vue.createVNode(_component_dt_icon_chevron_left, { size: "300" })
       ]),
       _: 1
     }, 8, ["aria-label", "kind", "importance", "disabled", "class"]),
@@ -156,10 +157,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         class: vue.normalizeClass({ "d-pagination__separator": isNaN(Number(page)) })
       }, [
         isNaN(Number(page)) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-          vue.createVNode(_component_dt_icon, {
-            name: "more-horizontal",
-            size: "300"
-          })
+          vue.createVNode(_component_dt_icon_more_horizontal, { size: "300" })
         ])) : (vue.openBlock(), vue.createBlock(_component_dt_button, {
           key: 1,
           "aria-label": $props.pageNumberAriaLabel(page),
@@ -185,10 +183,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[1] || (_cache[1] = ($event) => $options.changePage($data.currentPage + 1))
     }, {
       icon: vue.withCtx(() => [
-        vue.createVNode(_component_dt_icon, {
-          name: "chevron-right",
-          size: "300"
-        })
+        vue.createVNode(_component_dt_icon_chevron_right, { size: "300" })
       ]),
       _: 1
     }, 8, ["aria-label", "disabled", "importance", "class"])

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.vue.cjs","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      :kind=\"isFirstPage ? 'default' : 'muted'\"\n      :importance=\"isFirstPage ? 'primary' : 'clear'\"\n      :disabled=\"isFirstPage\"\n      :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"chevron-left\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon\n          name=\"more-horizontal\"\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <!-- eslint-enable vue/no-bare-strings-in-template -->\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      :importance=\"isLastPage ? 'primary' : 'clear'\"\n      :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"chevron-right\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the previous button.\n     */\n    prevAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the next button.\n     */\n    nextAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * A method that will be called to get the aria label of each page.\n     */\n    pageNumberAriaLabel: {\n      type: Function,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      const start = this.maxVisible - 1;\n      const end = this.totalPages - start + 1;\n\n      if (this.currentPage < start) {\n        return [...this.range(1, start), '...', this.totalPages];\n      }\n\n      if (this.currentPage > end) {\n        return [1, '...', ...this.range(end, this.totalPages)];\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      const left = this.currentPage - centerIndex;\n      const right = this.currentPage + centerIndex;\n      return [1, '...', ...this.range(left, right), '...', this.totalPages];\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtIcon","_createElementBlock","_createVNode","_normalizeClass","_openBlock","_Fragment","_renderList","_createBlock"],"mappings":"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"}
+{"version":3,"file":"pagination.vue.cjs","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      :kind=\"isFirstPage ? 'default' : 'muted'\"\n      :importance=\"isFirstPage ? 'primary' : 'clear'\"\n      :disabled=\"isFirstPage\"\n      :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-left\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon-more-horizontal\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <!-- eslint-enable vue/no-bare-strings-in-template -->\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      :importance=\"isLastPage ? 'primary' : 'clear'\"\n      :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-right\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from '@dialpad/dialtone-icons/vue3';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIconChevronLeft,\n    DtIconChevronRight,\n    DtIconMoreHorizontal,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the previous button.\n     */\n    prevAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the next button.\n     */\n    nextAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * A method that will be called to get the aria label of each page.\n     */\n    pageNumberAriaLabel: {\n      type: Function,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      const start = this.maxVisible - 1;\n      const end = this.totalPages - start + 1;\n\n      if (this.currentPage < start) {\n        return [...this.range(1, start), '...', this.totalPages];\n      }\n\n      if (this.currentPage > end) {\n        return [1, '...', ...this.range(end, this.totalPages)];\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      const left = this.currentPage - centerIndex;\n      const right = this.currentPage + centerIndex;\n      return [1, '...', ...this.range(left, right), '...', this.totalPages];\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtIconChevronLeft","DtIconChevronRight","DtIconMoreHorizontal","_createElementBlock","_createVNode","_normalizeClass","_openBlock","_Fragment","_renderList","_createBlock"],"mappings":"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"}