@dialpad/dialtone-vue 3.219.0 → 3.220.0-next.2

package/dist/lib/message-input/message-input-topbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"message-input-topbar.cjs","names":[],"sources":["../../../recipes/conversation_view/message_input/message_input_topbar.vue"],"sourcesContent":["<template>\n  <dt-stack\n    direction=\"row\"\n    gap=\"200\"\n    class=\"d-recipe-message-input__button-stack\"\n  >\n    <dt-recipe-message-input-button\n      :aria-label=\"boldButtonLabel['aria-label']\"\n      :tooltip-text=\"boldButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"boldButtonOptions.keyboardShortcutText\"\n      data-qa=\"bold\"\n      :is-active=\"isSelectionActive('bold')\"\n      @click=\"$emit('click', 'bold', $event)\"\n    >\n      <template #icon>\n        <dt-icon-bold\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"italicButtonLabel['aria-label']\"\n      :tooltip-text=\"italicButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"italicButtonOptions.keyboardShortcutText\"\n      data-qa=\"italic\"\n      :is-active=\"isSelectionActive('italic')\"\n      @click=\"$emit('click', 'italic', $event)\"\n    >\n      <template #icon>\n        <dt-icon-italic\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"strikeButtonLabel['aria-label']\"\n      :tooltip-text=\"strikeButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"strikeButtonOptions.keyboardShortcutText\"\n      data-qa=\"strikethrough\"\n      :is-active=\"isSelectionActive('strike')\"\n      @click=\"$emit('click', 'strike', $event)\"\n    >\n      <template #icon>\n        <dt-icon-strikethrough\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <!-- @slot special slot for link button, since links require a custom dialog -->\n    <slot name=\"link\" />\n\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <dt-recipe-message-input-button\n      :aria-label=\"bulletListButtonLabel['aria-label']\"\n      :tooltip-text=\"bulletListButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"bulletListButtonOptions.keyboardShortcutText\"\n      data-qa=\"bullet-list\"\n      :is-active=\"isSelectionActive('bulletList')\"\n      @click=\"$emit('click', 'bulletList', $event)\"\n    >\n      <template #icon>\n        <dt-icon-list-bullet\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"orderedListButtonLabel['aria-label']\"\n      :tooltip-text=\"orderedListButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"orderedListButtonOptions.keyboardShortcutText\"\n      data-qa=\"ordered-list\"\n      :is-active=\"isSelectionActive('orderedList')\"\n      @click=\"$emit('click', 'orderedList', $event)\"\n    >\n      <template #icon>\n        <dt-icon-list-ordered\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <dt-recipe-message-input-button\n      :aria-label=\"blockQuoteButtonLabel['aria-label']\"\n      :tooltip-text=\"blockQuoteButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"blockQuoteButtonOptions.keyboardShortcutText\"\n      data-qa=\"blockquote\"\n      :is-active=\"isSelectionActive('blockquote')\"\n      @click=\"$emit('click', 'blockquote', $event)\"\n    >\n      <template #icon>\n        <dt-icon-quote\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <dt-recipe-message-input-button\n      :aria-label=\"codeButtonLabel['aria-label']\"\n      :tooltip-text=\"codeButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"codeButtonOptions.keyboardShortcutText\"\n      data-qa=\"code\"\n      :is-active=\"isSelectionActive('code')\"\n      @click=\"$emit('click', 'code', $event)\"\n    >\n      <template #icon>\n        <dt-icon-code\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"codeBlockButtonLabel['aria-label']\"\n      :tooltip-text=\"codeBlockButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"codeBlockButtonOptions.keyboardShortcutText\"\n      data-qa=\"code-block\"\n      :is-active=\"isSelectionActive('codeBlock')\"\n      @click=\"$emit('click', 'codeBlock', $event)\"\n    >\n      <template #icon>\n        <dt-icon-code-block\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n  </dt-stack>\n</template>\n\n<script>\nimport { DtStack } from '@/components/stack';\nimport {\n  DtIconListBullet,\n  DtIconBold,\n  DtIconItalic,\n  DtIconStrikethrough,\n  DtIconListOrdered,\n  DtIconQuote,\n  DtIconCode,\n  DtIconCodeBlock,\n} from '@dialpad/dialtone-icons/vue3';\nimport DtRecipeMessageInputButton from './message_input_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeMessageInputTopbar',\n  components: {\n    DtStack,\n    DtIconListBullet,\n    DtIconBold,\n    DtIconItalic,\n    DtIconStrikethrough,\n    DtIconListOrdered,\n    DtIconQuote,\n    DtIconCode,\n    DtIconCodeBlock,\n    DtRecipeMessageInputButton,\n  },\n\n  props: {\n    boldButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    italicButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    strikeButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    bulletListButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    orderedListButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    blockQuoteButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    codeButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    codeBlockButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    isSelectionActive: {\n      type: Function,\n      default: () => {},\n    },\n  },\n\n  emits: ['click'],\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    boldButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_BOLD_BUTTON_LABEL'); },\n    italicButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_ITALIC_BUTTON_LABEL'); },\n    strikeButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_STRIKETHROUGH_BUTTON_LABEL'); },\n    bulletListButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_BULLET_LIST_BUTTON_LABEL'); },\n    orderedListButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_ORDERED_LIST_BUTTON_LABEL'); },\n    blockQuoteButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_BLOCK_QUOTE_BUTTON_LABEL'); },\n    codeButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_CODE_BUTTON_LABEL'); },\n    codeBlockButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_CODE_BLOCK_BUTTON_LABEL'); },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"message-input-topbar.cjs","names":[],"sources":["../../../recipes/conversation_view/message_input/message_input_topbar.vue"],"sourcesContent":["<template>\n  <dt-stack\n    direction=\"row\"\n    gap=\"25\"\n    class=\"d-recipe-message-input__button-stack\"\n  >\n    <dt-recipe-message-input-button\n      :aria-label=\"boldButtonLabel['aria-label']\"\n      :tooltip-text=\"boldButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"boldButtonOptions.keyboardShortcutText\"\n      data-qa=\"bold\"\n      :is-active=\"isSelectionActive('bold')\"\n      @click=\"$emit('click', 'bold', $event)\"\n    >\n      <template #icon>\n        <dt-icon-bold\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"italicButtonLabel['aria-label']\"\n      :tooltip-text=\"italicButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"italicButtonOptions.keyboardShortcutText\"\n      data-qa=\"italic\"\n      :is-active=\"isSelectionActive('italic')\"\n      @click=\"$emit('click', 'italic', $event)\"\n    >\n      <template #icon>\n        <dt-icon-italic\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"strikeButtonLabel['aria-label']\"\n      :tooltip-text=\"strikeButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"strikeButtonOptions.keyboardShortcutText\"\n      data-qa=\"strikethrough\"\n      :is-active=\"isSelectionActive('strike')\"\n      @click=\"$emit('click', 'strike', $event)\"\n    >\n      <template #icon>\n        <dt-icon-strikethrough\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <!-- @slot special slot for link button, since links require a custom dialog -->\n    <slot name=\"link\" />\n\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <dt-recipe-message-input-button\n      :aria-label=\"bulletListButtonLabel['aria-label']\"\n      :tooltip-text=\"bulletListButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"bulletListButtonOptions.keyboardShortcutText\"\n      data-qa=\"bullet-list\"\n      :is-active=\"isSelectionActive('bulletList')\"\n      @click=\"$emit('click', 'bulletList', $event)\"\n    >\n      <template #icon>\n        <dt-icon-list-bullet\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"orderedListButtonLabel['aria-label']\"\n      :tooltip-text=\"orderedListButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"orderedListButtonOptions.keyboardShortcutText\"\n      data-qa=\"ordered-list\"\n      :is-active=\"isSelectionActive('orderedList')\"\n      @click=\"$emit('click', 'orderedList', $event)\"\n    >\n      <template #icon>\n        <dt-icon-list-ordered\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <dt-recipe-message-input-button\n      :aria-label=\"blockQuoteButtonLabel['aria-label']\"\n      :tooltip-text=\"blockQuoteButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"blockQuoteButtonOptions.keyboardShortcutText\"\n      data-qa=\"blockquote\"\n      :is-active=\"isSelectionActive('blockquote')\"\n      @click=\"$emit('click', 'blockquote', $event)\"\n    >\n      <template #icon>\n        <dt-icon-quote\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <dt-recipe-message-input-button\n      :aria-label=\"codeButtonLabel['aria-label']\"\n      :tooltip-text=\"codeButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"codeButtonOptions.keyboardShortcutText\"\n      data-qa=\"code\"\n      :is-active=\"isSelectionActive('code')\"\n      @click=\"$emit('click', 'code', $event)\"\n    >\n      <template #icon>\n        <dt-icon-code\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"codeBlockButtonLabel['aria-label']\"\n      :tooltip-text=\"codeBlockButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"codeBlockButtonOptions.keyboardShortcutText\"\n      data-qa=\"code-block\"\n      :is-active=\"isSelectionActive('codeBlock')\"\n      @click=\"$emit('click', 'codeBlock', $event)\"\n    >\n      <template #icon>\n        <dt-icon-code-block\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n  </dt-stack>\n</template>\n\n<script>\nimport { DtStack } from '@/components/stack';\nimport {\n  DtIconListBullet,\n  DtIconBold,\n  DtIconItalic,\n  DtIconStrikethrough,\n  DtIconListOrdered,\n  DtIconQuote,\n  DtIconCode,\n  DtIconCodeBlock,\n} from '@dialpad/dialtone-icons/vue';\nimport DtRecipeMessageInputButton from './message_input_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeMessageInputTopbar',\n  components: {\n    DtStack,\n    DtIconListBullet,\n    DtIconBold,\n    DtIconItalic,\n    DtIconStrikethrough,\n    DtIconListOrdered,\n    DtIconQuote,\n    DtIconCode,\n    DtIconCodeBlock,\n    DtRecipeMessageInputButton,\n  },\n\n  props: {\n    boldButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    italicButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    strikeButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    bulletListButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    orderedListButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    blockQuoteButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    codeButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    codeBlockButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    isSelectionActive: {\n      type: Function,\n      default: () => {},\n    },\n  },\n\n  emits: ['click'],\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    boldButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_BOLD_BUTTON_LABEL'); },\n    italicButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_ITALIC_BUTTON_LABEL'); },\n    strikeButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_STRIKETHROUGH_BUTTON_LABEL'); },\n    bulletListButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_BULLET_LIST_BUTTON_LABEL'); },\n    orderedListButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_ORDERED_LIST_BUTTON_LABEL'); },\n    blockQuoteButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_BLOCK_QUOTE_BUTTON_LABEL'); },\n    codeButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_CODE_BUTTON_LABEL'); },\n    codeBlockButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_CODE_BLOCK_BUTTON_LABEL'); },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/message-input/message-input-topbar.js

@@ -3,7 +3,7 @@ import { DialtoneLocalization as t } from "../../localization/index.js";
 import n from "../stack/stack.js";
 import r from "./message-input-button.js";
 import { createBlock as i, createElementVNode as a, createVNode as o, openBlock as s, renderSlot as c, resolveComponent as l, withCtx as u } from "vue";
-import { DtIconBold as d, DtIconCode as f, DtIconCodeBlock as p, DtIconItalic as m, DtIconListBullet as h, DtIconListOrdered as g, DtIconQuote as _, DtIconStrikethrough as v } from "@dialpad/dialtone-icons/vue3";
+import { DtIconBold as d, DtIconCode as f, DtIconCodeBlock as p, DtIconItalic as m, DtIconListBullet as h, DtIconListOrdered as g, DtIconQuote as _, DtIconStrikethrough as v } from "@dialpad/dialtone-icons/vue";
 //#region recipes/conversation_view/message_input/message_input_topbar.vue
 var y = {
 	compatConfig: { MODE: 3 },
@@ -93,7 +93,7 @@ function b(e, t, n, r, d, f) {
 	let p = l("dt-icon-bold"), m = l("dt-recipe-message-input-button"), h = l("dt-icon-italic"), g = l("dt-icon-strikethrough"), _ = l("dt-icon-list-bullet"), v = l("dt-icon-list-ordered"), y = l("dt-icon-quote"), b = l("dt-icon-code"), x = l("dt-icon-code-block"), S = l("dt-stack");
 	return s(), i(S, {
 		direction: "row",
-		gap: "200",
+		gap: "25",
 		class: "d-recipe-message-input__button-stack"
 	}, {
 		default: u(() => [

package/dist/lib/message-input/message-input-topbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-input-topbar.js","names":[],"sources":["../../../recipes/conversation_view/message_input/message_input_topbar.vue"],"sourcesContent":["<template>\n  <dt-stack\n    direction=\"row\"\n    gap=\"200\"\n    class=\"d-recipe-message-input__button-stack\"\n  >\n    <dt-recipe-message-input-button\n      :aria-label=\"boldButtonLabel['aria-label']\"\n      :tooltip-text=\"boldButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"boldButtonOptions.keyboardShortcutText\"\n      data-qa=\"bold\"\n      :is-active=\"isSelectionActive('bold')\"\n      @click=\"$emit('click', 'bold', $event)\"\n    >\n      <template #icon>\n        <dt-icon-bold\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"italicButtonLabel['aria-label']\"\n      :tooltip-text=\"italicButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"italicButtonOptions.keyboardShortcutText\"\n      data-qa=\"italic\"\n      :is-active=\"isSelectionActive('italic')\"\n      @click=\"$emit('click', 'italic', $event)\"\n    >\n      <template #icon>\n        <dt-icon-italic\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"strikeButtonLabel['aria-label']\"\n      :tooltip-text=\"strikeButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"strikeButtonOptions.keyboardShortcutText\"\n      data-qa=\"strikethrough\"\n      :is-active=\"isSelectionActive('strike')\"\n      @click=\"$emit('click', 'strike', $event)\"\n    >\n      <template #icon>\n        <dt-icon-strikethrough\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <!-- @slot special slot for link button, since links require a custom dialog -->\n    <slot name=\"link\" />\n\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <dt-recipe-message-input-button\n      :aria-label=\"bulletListButtonLabel['aria-label']\"\n      :tooltip-text=\"bulletListButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"bulletListButtonOptions.keyboardShortcutText\"\n      data-qa=\"bullet-list\"\n      :is-active=\"isSelectionActive('bulletList')\"\n      @click=\"$emit('click', 'bulletList', $event)\"\n    >\n      <template #icon>\n        <dt-icon-list-bullet\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"orderedListButtonLabel['aria-label']\"\n      :tooltip-text=\"orderedListButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"orderedListButtonOptions.keyboardShortcutText\"\n      data-qa=\"ordered-list\"\n      :is-active=\"isSelectionActive('orderedList')\"\n      @click=\"$emit('click', 'orderedList', $event)\"\n    >\n      <template #icon>\n        <dt-icon-list-ordered\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <dt-recipe-message-input-button\n      :aria-label=\"blockQuoteButtonLabel['aria-label']\"\n      :tooltip-text=\"blockQuoteButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"blockQuoteButtonOptions.keyboardShortcutText\"\n      data-qa=\"blockquote\"\n      :is-active=\"isSelectionActive('blockquote')\"\n      @click=\"$emit('click', 'blockquote', $event)\"\n    >\n      <template #icon>\n        <dt-icon-quote\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <dt-recipe-message-input-button\n      :aria-label=\"codeButtonLabel['aria-label']\"\n      :tooltip-text=\"codeButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"codeButtonOptions.keyboardShortcutText\"\n      data-qa=\"code\"\n      :is-active=\"isSelectionActive('code')\"\n      @click=\"$emit('click', 'code', $event)\"\n    >\n      <template #icon>\n        <dt-icon-code\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"codeBlockButtonLabel['aria-label']\"\n      :tooltip-text=\"codeBlockButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"codeBlockButtonOptions.keyboardShortcutText\"\n      data-qa=\"code-block\"\n      :is-active=\"isSelectionActive('codeBlock')\"\n      @click=\"$emit('click', 'codeBlock', $event)\"\n    >\n      <template #icon>\n        <dt-icon-code-block\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n  </dt-stack>\n</template>\n\n<script>\nimport { DtStack } from '@/components/stack';\nimport {\n  DtIconListBullet,\n  DtIconBold,\n  DtIconItalic,\n  DtIconStrikethrough,\n  DtIconListOrdered,\n  DtIconQuote,\n  DtIconCode,\n  DtIconCodeBlock,\n} from '@dialpad/dialtone-icons/vue3';\nimport DtRecipeMessageInputButton from './message_input_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeMessageInputTopbar',\n  components: {\n    DtStack,\n    DtIconListBullet,\n    DtIconBold,\n    DtIconItalic,\n    DtIconStrikethrough,\n    DtIconListOrdered,\n    DtIconQuote,\n    DtIconCode,\n    DtIconCodeBlock,\n    DtRecipeMessageInputButton,\n  },\n\n  props: {\n    boldButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    italicButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    strikeButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    bulletListButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    orderedListButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    blockQuoteButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    codeButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    codeBlockButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    isSelectionActive: {\n      type: Function,\n      default: () => {},\n    },\n  },\n\n  emits: ['click'],\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    boldButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_BOLD_BUTTON_LABEL'); },\n    italicButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_ITALIC_BUTTON_LABEL'); },\n    strikeButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_STRIKETHROUGH_BUTTON_LABEL'); },\n    bulletListButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_BULLET_LIST_BUTTON_LABEL'); },\n    orderedListButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_ORDERED_LIST_BUTTON_LABEL'); },\n    blockQuoteButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_BLOCK_QUOTE_BUTTON_LABEL'); },\n    codeButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_CODE_BUTTON_LABEL'); },\n    codeBlockButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_CODE_BLOCK_BUTTON_LABEL'); },\n  },\n};\n</script>\n"],"mappings":";;;;;;;AA4JA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CACN,YAAY;EACV,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,4BAAA;EACD;CAED,OAAO;EACL,mBAAmB;GACjB,MAAM;GACN,gBAAgB,EAAE;GACnB;EAED,qBAAqB;GACnB,MAAM;GACN,gBAAgB,EAAE;GACnB;EAED,qBAAqB;GACnB,MAAM;GACN,gBAAgB,EAAE;GACnB;EAED,yBAAyB;GACvB,MAAM;GACN,gBAAgB,EAAE;GACnB;EAED,0BAA0B;GACxB,MAAM;GACN,gBAAgB,EAAE;GACnB;EAED,yBAAyB;GACvB,MAAM;GACN,gBAAgB,EAAE;GACnB;EAED,mBAAmB;GACjB,MAAM;GACN,gBAAgB,EAAE;GACnB;EAED,wBAAwB;GACtB,MAAM;GACN,gBAAgB,EAAE;GACnB;EAED,mBAAmB;GACjB,MAAM;GACN,eAAe;GAChB;EACF;CAED,OAAO,CAAC,QAAQ;CAEhB,OAAQ;AACN,SAAO,EACL,MAAM,IAAI,GAAsB,EACjC;;CAGH,UAAU;EACR,kBAAmB;AAAE,UAAO,KAAK,KAAK,IAAI,2CAA2C;;EACrF,oBAAqB;AAAE,UAAO,KAAK,KAAK,IAAI,6CAA6C;;EACzF,oBAAqB;AAAE,UAAO,KAAK,KAAK,IAAI,oDAAoD;;EAChG,wBAAyB;AAAE,UAAO,KAAK,KAAK,IAAI,kDAAkD;;EAClG,yBAA0B;AAAE,UAAO,KAAK,KAAK,IAAI,mDAAmD;;EACpG,wBAAyB;AAAE,UAAO,KAAK,KAAK,IAAI,kDAAkD;;EAClG,kBAAmB;AAAE,UAAO,KAAK,KAAK,IAAI,2CAA2C;;EACrF,uBAAwB;AAAE,UAAO,KAAK,KAAK,IAAI,iDAAiD;;EACjG;CACF;;;aA5OC,EAyIW,GAAA;EAxIT,WAAU;EACV,KAAI;EACJ,OAAM;;mBAgB2B;GAdjC,EAciC,GAAA;IAb9B,cAAY,EAAA,gBAAe;IAC3B,gBAAc,EAAA,gBAAe;IAC7B,0BAAwB,EAAA,kBAAkB;IAC3C,WAAQ;IACP,aAAW,EAAA,kBAAiB,OAAA;IAC5B,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,SAAA,QAAkB,EAAM;;IAE1B,MAAI,QAIX,CAHF,EAGE,GAAA;KAFA,OAAM;KACN,MAAK;;;;;;;;;GAIX,EAciC,GAAA;IAb9B,cAAY,EAAA,kBAAiB;IAC7B,gBAAc,EAAA,kBAAiB;IAC/B,0BAAwB,EAAA,oBAAoB;IAC7C,WAAQ;IACP,aAAW,EAAA,kBAAiB,SAAA;IAC5B,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,SAAA,UAAoB,EAAM;;IAE5B,MAAI,QAIX,CAHF,EAGE,GAAA;KAFA,OAAM;KACN,MAAK;;;;;;;;;GAIX,EAciC,GAAA;IAb9B,cAAY,EAAA,kBAAiB;IAC7B,gBAAc,EAAA,kBAAiB;IAC/B,0BAAwB,EAAA,oBAAoB;IAC7C,WAAQ;IACP,aAAW,EAAA,kBAAiB,SAAA;IAC5B,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,SAAA,UAAoB,EAAM;;IAE5B,MAAI,QAIX,CAHF,EAGE,GAAA;KAFA,OAAM;KACN,MAAK;;;;;;;;;mBAIX,EAA4D,OAAA,EAAvD,OAAM,gDAA8C,EAAA,MAAA,GAAA;GAGzD,EAAoB,EAAA,QAAA,OAAA;mBAEpB,EAA4D,OAAA,EAAvD,OAAM,gDAA8C,EAAA,MAAA,GAAA;GAEzD,EAciC,GAAA;IAb9B,cAAY,EAAA,sBAAqB;IACjC,gBAAc,EAAA,sBAAqB;IACnC,0BAAwB,EAAA,wBAAwB;IACjD,WAAQ;IACP,aAAW,EAAA,kBAAiB,aAAA;IAC5B,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,SAAA,cAAwB,EAAM;;IAEhC,MAAI,QAIX,CAHF,EAGE,GAAA;KAFA,OAAM;KACN,MAAK;;;;;;;;;GAIX,EAciC,GAAA;IAb9B,cAAY,EAAA,uBAAsB;IAClC,gBAAc,EAAA,uBAAsB;IACpC,0BAAwB,EAAA,yBAAyB;IAClD,WAAQ;IACP,aAAW,EAAA,kBAAiB,cAAA;IAC5B,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,SAAA,eAAyB,EAAM;;IAEjC,MAAI,QAIX,CAHF,EAGE,GAAA;KAFA,OAAM;KACN,MAAK;;;;;;;;;qBAIX,EAA4D,OAAA,EAAvD,OAAM,gDAA8C,EAAA,MAAA,GAAA;GAEzD,EAciC,GAAA;IAb9B,cAAY,EAAA,sBAAqB;IACjC,gBAAc,EAAA,sBAAqB;IACnC,0BAAwB,EAAA,wBAAwB;IACjD,WAAQ;IACP,aAAW,EAAA,kBAAiB,aAAA;IAC5B,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,SAAA,cAAwB,EAAM;;IAEhC,MAAI,QAIX,CAHF,EAGE,GAAA;KAFA,OAAM;KACN,MAAK;;;;;;;;;qBAKX,EAA4D,OAAA,EAAvD,OAAM,gDAA8C,EAAA,MAAA,GAAA;GAEzD,EAciC,GAAA;IAb9B,cAAY,EAAA,gBAAe;IAC3B,gBAAc,EAAA,gBAAe;IAC7B,0BAAwB,EAAA,kBAAkB;IAC3C,WAAQ;IACP,aAAW,EAAA,kBAAiB,OAAA;IAC5B,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,SAAA,QAAkB,EAAM;;IAE1B,MAAI,QAIX,CAHF,EAGE,GAAA;KAFA,OAAM;KACN,MAAK;;;;;;;;;GAIX,EAciC,GAAA;IAb9B,cAAY,EAAA,qBAAoB;IAChC,gBAAc,EAAA,qBAAoB;IAClC,0BAAwB,EAAA,uBAAuB;IAChD,WAAQ;IACP,aAAW,EAAA,kBAAiB,YAAA;IAC5B,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,SAAA,aAAuB,EAAM;;IAE/B,MAAI,QAIX,CAHF,EAGE,GAAA;KAFA,OAAM;KACN,MAAK"}
+{"version":3,"file":"message-input-topbar.js","names":[],"sources":["../../../recipes/conversation_view/message_input/message_input_topbar.vue"],"sourcesContent":["<template>\n  <dt-stack\n    direction=\"row\"\n    gap=\"25\"\n    class=\"d-recipe-message-input__button-stack\"\n  >\n    <dt-recipe-message-input-button\n      :aria-label=\"boldButtonLabel['aria-label']\"\n      :tooltip-text=\"boldButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"boldButtonOptions.keyboardShortcutText\"\n      data-qa=\"bold\"\n      :is-active=\"isSelectionActive('bold')\"\n      @click=\"$emit('click', 'bold', $event)\"\n    >\n      <template #icon>\n        <dt-icon-bold\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"italicButtonLabel['aria-label']\"\n      :tooltip-text=\"italicButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"italicButtonOptions.keyboardShortcutText\"\n      data-qa=\"italic\"\n      :is-active=\"isSelectionActive('italic')\"\n      @click=\"$emit('click', 'italic', $event)\"\n    >\n      <template #icon>\n        <dt-icon-italic\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"strikeButtonLabel['aria-label']\"\n      :tooltip-text=\"strikeButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"strikeButtonOptions.keyboardShortcutText\"\n      data-qa=\"strikethrough\"\n      :is-active=\"isSelectionActive('strike')\"\n      @click=\"$emit('click', 'strike', $event)\"\n    >\n      <template #icon>\n        <dt-icon-strikethrough\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <!-- @slot special slot for link button, since links require a custom dialog -->\n    <slot name=\"link\" />\n\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <dt-recipe-message-input-button\n      :aria-label=\"bulletListButtonLabel['aria-label']\"\n      :tooltip-text=\"bulletListButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"bulletListButtonOptions.keyboardShortcutText\"\n      data-qa=\"bullet-list\"\n      :is-active=\"isSelectionActive('bulletList')\"\n      @click=\"$emit('click', 'bulletList', $event)\"\n    >\n      <template #icon>\n        <dt-icon-list-bullet\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"orderedListButtonLabel['aria-label']\"\n      :tooltip-text=\"orderedListButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"orderedListButtonOptions.keyboardShortcutText\"\n      data-qa=\"ordered-list\"\n      :is-active=\"isSelectionActive('orderedList')\"\n      @click=\"$emit('click', 'orderedList', $event)\"\n    >\n      <template #icon>\n        <dt-icon-list-ordered\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <dt-recipe-message-input-button\n      :aria-label=\"blockQuoteButtonLabel['aria-label']\"\n      :tooltip-text=\"blockQuoteButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"blockQuoteButtonOptions.keyboardShortcutText\"\n      data-qa=\"blockquote\"\n      :is-active=\"isSelectionActive('blockquote')\"\n      @click=\"$emit('click', 'blockquote', $event)\"\n    >\n      <template #icon>\n        <dt-icon-quote\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <dt-recipe-message-input-button\n      :aria-label=\"codeButtonLabel['aria-label']\"\n      :tooltip-text=\"codeButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"codeButtonOptions.keyboardShortcutText\"\n      data-qa=\"code\"\n      :is-active=\"isSelectionActive('code')\"\n      @click=\"$emit('click', 'code', $event)\"\n    >\n      <template #icon>\n        <dt-icon-code\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"codeBlockButtonLabel['aria-label']\"\n      :tooltip-text=\"codeBlockButtonLabel['tooltip-text']\"\n      :keyboard-shortcut-text=\"codeBlockButtonOptions.keyboardShortcutText\"\n      data-qa=\"code-block\"\n      :is-active=\"isSelectionActive('codeBlock')\"\n      @click=\"$emit('click', 'codeBlock', $event)\"\n    >\n      <template #icon>\n        <dt-icon-code-block\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n  </dt-stack>\n</template>\n\n<script>\nimport { DtStack } from '@/components/stack';\nimport {\n  DtIconListBullet,\n  DtIconBold,\n  DtIconItalic,\n  DtIconStrikethrough,\n  DtIconListOrdered,\n  DtIconQuote,\n  DtIconCode,\n  DtIconCodeBlock,\n} from '@dialpad/dialtone-icons/vue';\nimport DtRecipeMessageInputButton from './message_input_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeMessageInputTopbar',\n  components: {\n    DtStack,\n    DtIconListBullet,\n    DtIconBold,\n    DtIconItalic,\n    DtIconStrikethrough,\n    DtIconListOrdered,\n    DtIconQuote,\n    DtIconCode,\n    DtIconCodeBlock,\n    DtRecipeMessageInputButton,\n  },\n\n  props: {\n    boldButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    italicButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    strikeButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    bulletListButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    orderedListButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    blockQuoteButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    codeButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    codeBlockButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    isSelectionActive: {\n      type: Function,\n      default: () => {},\n    },\n  },\n\n  emits: ['click'],\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    boldButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_BOLD_BUTTON_LABEL'); },\n    italicButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_ITALIC_BUTTON_LABEL'); },\n    strikeButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_STRIKETHROUGH_BUTTON_LABEL'); },\n    bulletListButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_BULLET_LIST_BUTTON_LABEL'); },\n    orderedListButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_ORDERED_LIST_BUTTON_LABEL'); },\n    blockQuoteButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_BLOCK_QUOTE_BUTTON_LABEL'); },\n    codeButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_CODE_BUTTON_LABEL'); },\n    codeBlockButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_CODE_BLOCK_BUTTON_LABEL'); },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/message-input/message-input.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../message_input-AWgvtwMV.cjs`);exports.default=e.t;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../message_input-sSCHhaeC.cjs`);exports.default=e.t;

package/dist/lib/message-input/message-input.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../message_input-CHlTsBGK.js";
+import { t as e } from "../../message_input-BYy1xKCy.js";
 export { e as default };

package/dist/lib/modal/modal-constants.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={default:``,danger:`d-modal--danger`},t={default:``,full:`d-modal--full`},n={error:`d-modal__banner--critical`,info:`d-modal__banner--info`,success:`d-modal__banner--success`,warning:`d-modal__banner--warning`,base:`d-modal__banner--general`};exports.MODAL_BANNER_KINDS=n,exports.MODAL_KIND_MODIFIERS=e,exports.MODAL_SIZE_MODIFIERS=t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={default:``,critical:`d-modal--critical`},t={default:``,full:`d-modal--full`},n={critical:`d-modal__banner--critical`,info:`d-modal__banner--info`,positive:`d-modal__banner--positive`,warning:`d-modal__banner--warning`,base:`d-modal__banner--general`};exports.MODAL_BANNER_KINDS=n,exports.MODAL_KIND_MODIFIERS=e,exports.MODAL_SIZE_MODIFIERS=t;
 //# sourceMappingURL=modal-constants.cjs.map

package/dist/lib/modal/modal-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal-constants.cjs","names":[],"sources":["../../../components/modal/modal_constants.js"],"sourcesContent":["// Modal style modifiers\nexport const MODAL_KIND_MODIFIERS = {\n  default: '',\n  danger: 'd-modal--danger',\n};\n\n// Modal size modifiers\nexport const MODAL_SIZE_MODIFIERS = {\n  default: '',\n  full: 'd-modal--full',\n};\n\nexport const MODAL_BANNER_KINDS = {\n  error: 'd-modal__banner--critical',\n  info: 'd-modal__banner--info',\n  success: 'd-modal__banner--success',\n  warning: 'd-modal__banner--warning',\n  base: 'd-modal__banner--general',\n};\n"],"mappings":"mEACA,IAAa,EAAuB,CAClC,QAAS,GACT,OAAQ,kBACT,CAGY,EAAuB,CAClC,QAAS,GACT,KAAM,gBACP,CAEY,EAAqB,CAChC,MAAO,4BACP,KAAM,wBACN,QAAS,2BACT,QAAS,2BACT,KAAM,2BACP"}
+{"version":3,"file":"modal-constants.cjs","names":[],"sources":["../../../components/modal/modal_constants.js"],"sourcesContent":["// Modal style modifiers\nexport const MODAL_KIND_MODIFIERS = {\n  default: '',\n  critical: 'd-modal--critical',\n};\n\n// Modal size modifiers\nexport const MODAL_SIZE_MODIFIERS = {\n  default: '',\n  full: 'd-modal--full',\n};\n\nexport const MODAL_BANNER_KINDS = {\n  critical: 'd-modal__banner--critical',\n  info: 'd-modal__banner--info',\n  positive: 'd-modal__banner--positive',\n  warning: 'd-modal__banner--warning',\n  base: 'd-modal__banner--general',\n};\n"],"mappings":"mEACA,IAAa,EAAuB,CAClC,QAAS,GACT,SAAU,oBACX,CAGY,EAAuB,CAClC,QAAS,GACT,KAAM,gBACP,CAEY,EAAqB,CAChC,SAAU,4BACV,KAAM,wBACN,SAAU,4BACV,QAAS,2BACT,KAAM,2BACP"}

package/dist/lib/modal/modal-constants.js

@@ -1,14 +1,14 @@
 //#region components/modal/modal_constants.js
 var e = {
 	default: "",
-	danger: "d-modal--danger"
+	critical: "d-modal--critical"
 }, t = {
 	default: "",
 	full: "d-modal--full"
 }, n = {
-	error: "d-modal__banner--critical",
+	critical: "d-modal__banner--critical",
 	info: "d-modal__banner--info",
-	success: "d-modal__banner--success",
+	positive: "d-modal__banner--positive",
 	warning: "d-modal__banner--warning",
 	base: "d-modal__banner--general"
 };

package/dist/lib/modal/modal-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-constants.js","names":[],"sources":["../../../components/modal/modal_constants.js"],"sourcesContent":["// Modal style modifiers\nexport const MODAL_KIND_MODIFIERS = {\n  default: '',\n  danger: 'd-modal--danger',\n};\n\n// Modal size modifiers\nexport const MODAL_SIZE_MODIFIERS = {\n  default: '',\n  full: 'd-modal--full',\n};\n\nexport const MODAL_BANNER_KINDS = {\n  error: 'd-modal__banner--critical',\n  info: 'd-modal__banner--info',\n  success: 'd-modal__banner--success',\n  warning: 'd-modal__banner--warning',\n  base: 'd-modal__banner--general',\n};\n"],"mappings":";AACA,IAAa,IAAuB;CAClC,SAAS;CACT,QAAQ;CACT,EAGY,IAAuB;CAClC,SAAS;CACT,MAAM;CACP,EAEY,IAAqB;CAChC,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACT,MAAM;CACP"}
+{"version":3,"file":"modal-constants.js","names":[],"sources":["../../../components/modal/modal_constants.js"],"sourcesContent":["// Modal style modifiers\nexport const MODAL_KIND_MODIFIERS = {\n  default: '',\n  critical: 'd-modal--critical',\n};\n\n// Modal size modifiers\nexport const MODAL_SIZE_MODIFIERS = {\n  default: '',\n  full: 'd-modal--full',\n};\n\nexport const MODAL_BANNER_KINDS = {\n  critical: 'd-modal__banner--critical',\n  info: 'd-modal__banner--info',\n  positive: 'd-modal__banner--positive',\n  warning: 'd-modal__banner--warning',\n  base: 'd-modal__banner--general',\n};\n"],"mappings":";AACA,IAAa,IAAuB;CAClC,SAAS;CACT,UAAU;CACX,EAGY,IAAuB;CAClC,SAAS;CACT,MAAM;CACP,EAEY,IAAqB;CAChC,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,MAAM;CACP"}

package/dist/lib/modal/modal.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../../common/mixins/modal.cjs`),i=require(`../notice/notice-constants.cjs`),a=require(`../../localization/index.cjs`),o=require(`../button/button.cjs`),s=require(`../../shared/sr_only_close_button.cjs`),c=require(`../lazy-show/lazy-show.cjs`),l=require(`./modal-constants.cjs`);let u=require(`vue`),d=require(`@dialpad/dialtone-icons/vue3`);var f={compatConfig:{MODE:3},name:`DtModal`,components:{DtLazyShow:c.default,DtButton:o.default,DtIconClose:d.DtIconClose,SrOnlyCloseButton:s.default},mixins:[r.default],props:{copy:{type:String,default:``},describedById:{type:String,default:``},labelledById:{type:String,default:function(){return t.getUniqueString()}},show:{type:Boolean,default:!1},title:{type:String,default:``},bannerTitle:{type:String,default:``},kind:{type:String,default:`default`,validator:e=>Object.keys(l.MODAL_KIND_MODIFIERS).includes(e)},size:{type:String,default:`default`,validator:e=>Object.keys(l.MODAL_SIZE_MODIFIERS).includes(e)},modalClass:{type:[String,Object,Array],default:``},dialogClass:{type:[String,Object,Array],default:``},contentClass:{type:[String,Object,Array],default:``},bannerKind:{type:String,default:`warning`,validate(e){return i.NOTICE_KINDS.includes(e)}},bannerClass:{type:[String,Object,Array],default:``},hideClose:{type:Boolean,default:!1},closeOnClick:{type:Boolean,default:!0},fixedHeaderFooter:{type:Boolean,default:!0},initialFocusElement:{type:[String,HTMLElement],default:`first`,validator:e=>e===`first`||e instanceof HTMLElement||e.startsWith(`#`)},appendTo:{type:String,default:void 0}},emits:[`click`,`keydown`,`update:show`],data(){return{MODAL_KIND_MODIFIERS:l.MODAL_KIND_MODIFIERS,MODAL_SIZE_MODIFIERS:l.MODAL_SIZE_MODIFIERS,MODAL_BANNER_KINDS:l.MODAL_BANNER_KINDS,EVENT_KEYNAMES:e.EVENT_KEYNAMES,hasSlotContent:t.hasSlotContent,i18n:new a.DialtoneLocalization}},computed:{modalListeners(){return{click:e=>{this.closeOnClick&&e.target===e.currentTarget?this.close():this.show&&e.target!==e.currentTarget&&this.handleModalClick(e),this.$emit(`click`,e)},keydown:t=>{switch(t.code){case e.EVENT_KEYNAMES.esc:case e.EVENT_KEYNAMES.escape:this.close();break;case e.EVENT_KEYNAMES.tab:this.trapFocus(t);break}this.$emit(`keydown`,t)},"after-enter":async()=>{this.$emit(`update:show`,!0),await this.setFocusAfterTransition()},focusin:e=>{let t=this.$refs.modalRoot?.$el||this.$el;this.show&&t&&!t.contains(e.target)&&(e.preventDefault(),this.focusFirstElement(t))}}},open(){return`${!this.show}`},hasFooterSlot(){return!!this.$slots.footer},bannerKindClass(){return l.MODAL_BANNER_KINDS[this.bannerKind]},closeButtonTitle(){return this.i18n.$t(`DIALTONE_CLOSE_BUTTON`)}},watch:{show:{handler(e){e?(this.previousActiveElement=document.activeElement,t.disableRootScrolling(t.returnFirstEl(this.$refs.modalRoot?.$el||this.$el).getRootNode().host)):(t.enableRootScrolling(t.returnFirstEl(this.$refs.modalRoot?.$el||this.$el).getRootNode().host),this.previousActiveElement?.focus(),this.previousActiveElement=null)}}},methods:{close(){this.$emit(`update:show`,!1)},async setFocusAfterTransition(){let e=this.$refs.modalRoot?.$el||this.$el;this.initialFocusElement===`first`?await this.focusFirstElement(e):this.initialFocusElement.startsWith(`#`)?await this.focusElementById(this.initialFocusElement):this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},trapFocus(e){if(this.show){let t=this.$refs.modalRoot?.$el||this.$el;this.focusTrappedTabPress(e,t)}},handleModalClick(e){let t=e.target,n=this.$refs.modalRoot?.$el||this.$el,r=this._getFocusableElements(n);r.length&&!r.includes(t)&&(r.includes(document.activeElement)||this.focusFirstElement(n))}}},p=[`aria-describedby`,`aria-labelledby`],m=[`id`],h=[`id`],g={key:4,class:`d-modal__footer`};function _(e,t,n,r,i,a){let o=(0,u.resolveComponent)(`sr-only-close-button`),s=(0,u.resolveComponent)(`dt-icon-close`),c=(0,u.resolveComponent)(`dt-button`),l=(0,u.resolveComponent)(`dt-lazy-show`);return(0,u.openBlock)(),(0,u.createBlock)(u.Teleport,{disabled:!n.appendTo,to:n.appendTo},[(0,u.createVNode)(l,(0,u.mergeProps)({ref:`modalRoot`,transition:`d-zoom`,show:n.show,class:[`d-modal`,i.MODAL_KIND_MODIFIERS[n.kind],i.MODAL_SIZE_MODIFIERS[n.size],n.modalClass],"data-qa":`dt-modal`,"aria-hidden":a.open},(0,u.toHandlers)(a.modalListeners)),{default:(0,u.withCtx)(()=>[n.show&&(i.hasSlotContent(e.$slots.banner)||n.bannerTitle)?((0,u.openBlock)(),(0,u.createElementBlock)(`div`,{key:0,"data-qa":`dt-modal-banner`,class:(0,u.normalizeClass)([`d-modal__banner`,n.bannerClass,a.bannerKindClass])},[(0,u.renderSlot)(e.$slots,`banner`,{},()=>[(0,u.createTextVNode)((0,u.toDisplayString)(n.bannerTitle),1)])],2)):(0,u.createCommentVNode)(``,!0),(0,u.createVNode)(u.Transition,{appear:``,name:`d-modal__dialog`},{default:(0,u.withCtx)(()=>[(0,u.withDirectives)((0,u.createElementVNode)(`div`,{class:(0,u.normalizeClass)([`d-modal__dialog`,{"d-modal__dialog--scrollable":n.fixedHeaderFooter},n.dialogClass]),role:`dialog`,"aria-modal":`true`,"aria-describedby":n.describedById,"aria-labelledby":n.labelledById},[i.hasSlotContent(e.$slots.header)?((0,u.openBlock)(),(0,u.createElementBlock)(`div`,{key:0,id:n.labelledById,class:`d-modal__header`,"data-qa":`dt-modal-title`},[(0,u.renderSlot)(e.$slots,`header`)],8,m)):((0,u.openBlock)(),(0,u.createElementBlock)(`h2`,{key:1,id:n.labelledById,class:`d-modal__header`,"data-qa":`dt-modal-title`},(0,u.toDisplayString)(n.title),9,h)),i.hasSlotContent(e.$slots.default)?((0,u.openBlock)(),(0,u.createElementBlock)(`div`,{key:2,class:(0,u.normalizeClass)([`d-modal__content`,n.contentClass]),"data-qa":`dt-modal-copy`},[(0,u.renderSlot)(e.$slots,`default`)],2)):((0,u.openBlock)(),(0,u.createElementBlock)(`p`,{key:3,class:(0,u.normalizeClass)([`d-modal__content`,n.contentClass]),"data-qa":`dt-modal-copy`},(0,u.toDisplayString)(n.copy),3)),a.hasFooterSlot?((0,u.openBlock)(),(0,u.createElementBlock)(`footer`,g,[(0,u.renderSlot)(e.$slots,`footer`)])):(0,u.createCommentVNode)(``,!0),n.hideClose?((0,u.openBlock)(),(0,u.createBlock)(o,{key:5,onClose:a.close},null,8,[`onClose`])):((0,u.openBlock)(),(0,u.createBlock)(c,{key:6,class:`d-modal__close`,"data-qa":`dt-modal-close-button`,size:`md`,kind:`muted`,importance:`clear`,"aria-label":a.closeButtonTitle,title:a.closeButtonTitle,onClick:a.close},{icon:(0,u.withCtx)(({iconSize:e})=>[(0,u.createVNode)(s,{size:e},null,8,[`size`])]),_:1},8,[`aria-label`,`title`,`onClick`]))],10,p),[[u.vShow,n.show]])]),_:3})]),_:3},16,[`show`,`class`,`aria-hidden`])],8,[`disabled`,`to`])}var v=n.t(f,[[`render`,_]]);exports.default=v;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../common/mixins/mode.cjs`),r=require(`../notice/notice-constants.cjs`),i=require(`../text/text.cjs`),a=require(`../../localization/index.cjs`),o=require(`../button/button.cjs`),s=require(`../../shared/sr_only_close_button.cjs`),c=require(`./modal-constants.cjs`);let l=require(`vue`),u=require(`@dialpad/dialtone-icons/vue`);var d=`button:not(:disabled),[href],input:not(:disabled),select:not(:disabled),textarea:not(:disabled),details,[tabindex]:not([tabindex="-1"]):not(:disabled):not([aria-disabled="true"])`,f={compatConfig:{MODE:3},name:`DtModal`,components:{DtButton:o.default,DtText:i.default,DtIconClose:u.DtIconClose,SrOnlyCloseButton:s.default},mixins:[n.default],props:{copy:{type:String,default:``},describedById:{type:String,default:``},labelledById:{type:String,default:function(){return e.getUniqueString()}},open:{type:Boolean,default:!1},title:{type:String,default:``},bannerTitle:{type:String,default:``},kind:{type:String,default:`default`,validator:e=>Object.keys(c.MODAL_KIND_MODIFIERS).includes(e)},size:{type:String,default:`default`,validator:e=>Object.keys(c.MODAL_SIZE_MODIFIERS).includes(e)},modalClass:{type:[String,Object,Array],default:``},dialogClass:{type:[String,Object,Array],default:``},contentClass:{type:[String,Object,Array],default:``},bannerKind:{type:String,default:`warning`,validator(e){return r.NOTICE_KINDS.includes(e)}},bannerClass:{type:[String,Object,Array],default:``},showClose:{type:Boolean,default:!0},closeOnClick:{type:Boolean,default:!0},fixedHeaderFooter:{type:Boolean,default:!0},initialFocusElement:{type:[String,HTMLElement],default:`first`,validator:e=>e===`first`||e instanceof HTMLElement||e.startsWith(`#`)},appendTo:{type:String,default:void 0}},emits:[`click`,`keydown`,`update:open`],data(){return{MODAL_KIND_MODIFIERS:c.MODAL_KIND_MODIFIERS,MODAL_SIZE_MODIFIERS:c.MODAL_SIZE_MODIFIERS,MODAL_BANNER_KINDS:c.MODAL_BANNER_KINDS,hasSlotContent:e.hasSlotContent,i18n:new a.DialtoneLocalization}},computed:{hasFooterSlot(){return!!this.$slots.footer},bannerKindClass(){return c.MODAL_BANNER_KINDS[this.bannerKind]},closeButtonTitle(){return this.i18n.$t(`DIALTONE_CLOSE_BUTTON`)}},watch:{open(e){this.syncDialogState(e)}},mounted(){this.open&&this.syncDialogState(!0)},beforeUnmount(){let t=this.$refs.dialogEl;t?.open&&(t.close(),e.enableRootScrolling(this.getScrollRoot())),this.previousActiveElement=null},methods:{getScrollRoot(){return e.returnFirstEl(this.$refs.dialogEl)?.getRootNode()?.host},syncDialogState(t){let n=this.$refs.dialogEl;n&&(t?(this.previousActiveElement=document.activeElement,n.open||n.showModal(),e.disableRootScrolling(this.getScrollRoot())):n.open&&e.enableRootScrolling(this.getScrollRoot()))},close(){this.$emit(`update:open`,!1)},onBackdropClick(e){this.closeOnClick&&e.target===e.currentTarget&&this.close(),this.$emit(`click`,e)},onKeydown(e){this.$emit(`keydown`,e)},async onAfterEnter(){this.$emit(`update:open`,!0),await this.setFocusAfterTransition()},onAfterLeave(){let e=this.$refs.dialogEl;e?.open&&e.close(),this.previousActiveElement?.focus(),this.previousActiveElement=null},focusFirstTabbable(e){let t=[...e.querySelectorAll(d)];if(!t.length)return;let n=t[0];n.matches(`[type="radio"]:not(:checked)`)&&(n=t.find(e=>e.checked&&e.name===n.name)||n),n.focus({preventScroll:!0})},async setFocusAfterTransition(){let e=this.$refs.dialogEl;if(e)if(await this.$nextTick(),this.initialFocusElement===`first`)this.focusFirstTabbable(e);else if(typeof this.initialFocusElement==`string`&&this.initialFocusElement.startsWith(`#`)){let t=e.querySelector(this.initialFocusElement);t?t.focus():(console.warn(`Could not find the element specified in dt-modal prop "initialFocusElement". Defaulting to focusing the first element.`),this.focusFirstTabbable(e))}else this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()}}},p=[`aria-describedby`,`aria-labelledby`],m=[`id`],h={key:4,class:`d-modal__footer`};function g(e,t,n,r,i,a){let o=(0,l.resolveComponent)(`dt-text`),s=(0,l.resolveComponent)(`sr-only-close-button`),c=(0,l.resolveComponent)(`dt-icon-close`),u=(0,l.resolveComponent)(`dt-button`);return(0,l.openBlock)(),(0,l.createBlock)(l.Teleport,{disabled:!n.appendTo,to:n.appendTo},[(0,l.createElementVNode)(`dialog`,(0,l.mergeProps)({ref:`dialogEl`,class:[`d-modal`,i.MODAL_KIND_MODIFIERS[n.kind],i.MODAL_SIZE_MODIFIERS[n.size],n.modalClass],"data-qa":`dt-modal`,"aria-describedby":n.describedById||void 0,"aria-labelledby":n.labelledById},e.modeAttrs,{onCancel:t[0]||(t[0]=(0,l.withModifiers)((...e)=>a.close&&a.close(...e),[`prevent`])),onClick:t[1]||(t[1]=(...e)=>a.onBackdropClick&&a.onBackdropClick(...e)),onKeydown:t[2]||(t[2]=(...e)=>a.onKeydown&&a.onKeydown(...e))}),[n.open&&(i.hasSlotContent(e.$slots.banner)||n.bannerTitle)?((0,l.openBlock)(),(0,l.createElementBlock)(`div`,{key:0,"data-qa":`dt-modal-banner`,class:(0,l.normalizeClass)([`d-modal__banner`,n.bannerClass,a.bannerKindClass])},[(0,l.renderSlot)(e.$slots,`banner`,{},()=>[(0,l.createTextVNode)((0,l.toDisplayString)(n.bannerTitle),1)])],2)):(0,l.createCommentVNode)(``,!0),(0,l.createVNode)(l.Transition,{appear:n.open,name:`d-modal__dialog`,onAfterEnter:a.onAfterEnter,onAfterLeave:a.onAfterLeave},{default:(0,l.withCtx)(()=>[(0,l.withDirectives)((0,l.createElementVNode)(`div`,{class:(0,l.normalizeClass)([`d-modal__dialog`,{"d-modal__dialog--scrollable":n.fixedHeaderFooter},n.dialogClass])},[i.hasSlotContent(e.$slots.header)?((0,l.openBlock)(),(0,l.createElementBlock)(`div`,{key:0,id:n.labelledById,class:`d-modal__header`,"data-qa":`dt-modal-title`},[(0,l.renderSlot)(e.$slots,`header`)],8,m)):((0,l.openBlock)(),(0,l.createBlock)(o,{key:1,id:n.labelledById,kind:`headline`,size:600,strength:`medium`,density:`100`,"text-box-trim":`start`,as:`h2`,class:`d-modal__header`,"data-qa":`dt-modal-title`},{default:(0,l.withCtx)(()=>[(0,l.createTextVNode)((0,l.toDisplayString)(n.title),1)]),_:1},8,[`id`])),i.hasSlotContent(e.$slots.default)?((0,l.openBlock)(),(0,l.createElementBlock)(`div`,{key:2,class:(0,l.normalizeClass)([`d-modal__content`,n.contentClass]),"data-qa":`dt-modal-copy`},[(0,l.renderSlot)(e.$slots,`default`)],2)):((0,l.openBlock)(),(0,l.createElementBlock)(`p`,{key:3,class:(0,l.normalizeClass)([`d-modal__content`,n.contentClass]),"data-qa":`dt-modal-copy`},(0,l.toDisplayString)(n.copy),3)),a.hasFooterSlot?((0,l.openBlock)(),(0,l.createElementBlock)(`footer`,h,[(0,l.renderSlot)(e.$slots,`footer`)])):(0,l.createCommentVNode)(``,!0),n.showClose?((0,l.openBlock)(),(0,l.createBlock)(u,{key:6,class:`d-modal__close`,"data-qa":`dt-modal-close-button`,size:300,kind:`muted`,importance:`clear`,"aria-label":a.closeButtonTitle,title:a.closeButtonTitle,onClick:a.close},{icon:(0,l.withCtx)(({iconSize:e})=>[(0,l.createVNode)(c,{size:e},null,8,[`size`])]),_:1},8,[`aria-label`,`title`,`onClick`])):((0,l.openBlock)(),(0,l.createBlock)(s,{key:5,onClose:a.close},null,8,[`onClose`]))],2),[[l.vShow,n.open]])]),_:3},8,[`appear`,`onAfterEnter`,`onAfterLeave`])],16,p)],8,[`disabled`,`to`])}var _=t.t(f,[[`render`,g]]);exports.default=_;
 //# sourceMappingURL=modal.cjs.map

package/dist/lib/modal/modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal.cjs","names":[],"sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <teleport\n    :disabled=\"!appendTo\"\n    :to=\"appendTo\"\n  >\n    <dt-lazy-show\n      ref=\"modalRoot\"\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          <sr-only-close-button\n            v-if=\"hideClose\"\n            @close=\"close\"\n          />\n          <dt-button\n            v-else\n            class=\"d-modal__close\"\n            data-qa=\"dt-modal-close-button\"\n            size=\"md\"\n            kind=\"muted\"\n            importance=\"clear\"\n            :aria-label=\"closeButtonTitle\"\n            :title=\"closeButtonTitle\"\n            @click=\"close\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <dt-icon-close\n                :size=\"iconSize\"\n              />\n            </template>\n          </dt-button>\n        </div>\n      </transition>\n    </dt-lazy-show>\n  </teleport>\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 { returnFirstEl, getUniqueString, hasSlotContent, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\nimport { DialtoneLocalization } from '@/localization';\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  compatConfig: { MODE: 3 },\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIconClose,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal],\n\n  props: {\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     * A CSS selector string for the element to portal the modal to. If not provided, the modal will be rendered in its default location.\n     */\n    appendTo: {\n      type: String,\n      default: undefined,\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      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          // Handle backdrop clicks for closing modal\n          if (this.closeOnClick && event.target === event.currentTarget) {\n            this.close();\n          } else if (this.show && event.target !== event.currentTarget) {\n            // Ensure focus stays within modal when clicking inside it\n            this.handleModalClick(event);\n          }\n\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': async () => {\n          this.$emit('update:show', true);\n          await this.setFocusAfterTransition();\n        },\n\n        focusin: event => {\n          // Ensure focus stays within modal\n          const modalEl = this.$refs.modalRoot?.$el || this.$el;\n          if (this.show && modalEl && !modalEl.contains(event.target)) {\n            event.preventDefault();\n            this.focusFirstElement(modalEl);\n          }\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    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  watch: {\n    show: {\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          const modalEl = this.$refs.modalRoot?.$el || this.$el;\n          disableRootScrolling(returnFirstEl(modalEl).getRootNode().host);\n        } else {\n          const modalEl = this.$refs.modalRoot?.$el || this.$el;\n          enableRootScrolling(returnFirstEl(modalEl).getRootNode().host);\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\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    async setFocusAfterTransition () {\n      const modalEl = this.$refs.modalRoot?.$el || this.$el;\n      if (this.initialFocusElement === 'first') {\n        await this.focusFirstElement(modalEl);\n      } else if (this.initialFocusElement.startsWith('#')) {\n        await 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        const modalEl = this.$refs.modalRoot?.$el || this.$el;\n        this.focusTrappedTabPress(e, modalEl);\n      }\n    },\n\n    handleModalClick (event) {\n      // Ensure focus stays within modal when clicking inside it\n      const clickedElement = event.target;\n      const modalEl = this.$refs.modalRoot?.$el || this.$el;\n      const focusableElements = this._getFocusableElements(modalEl);\n\n      // If the clicked element is not focusable, ensure focus stays in modal\n      if (focusableElements.length && !focusableElements.includes(clickedElement)) {\n        // Check if current active element is still within the modal\n        if (!focusableElements.includes(document.activeElement)) {\n          this.focusFirstElement(modalEl);\n        }\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"modal.cjs","names":[],"sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <teleport\n    :disabled=\"!appendTo\"\n    :to=\"appendTo\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <dialog\n      ref=\"dialogEl\"\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-describedby=\"describedById || undefined\"\n      :aria-labelledby=\"labelledById\"\n      v-bind=\"modeAttrs\"\n      @cancel.prevent=\"close\"\n      @click=\"onBackdropClick\"\n      @keydown=\"onKeydown\"\n    >\n      <div\n        v-if=\"open && (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=\"open\"\n        name=\"d-modal__dialog\"\n        @after-enter=\"onAfterEnter\"\n        @after-leave=\"onAfterLeave\"\n      >\n        <div\n          v-show=\"open\"\n          :class=\"[\n            'd-modal__dialog',\n            { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n            dialogClass,\n          ]\"\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          <dt-text\n            v-else\n            :id=\"labelledById\"\n            kind=\"headline\"\n            :size=\"600\"\n            strength=\"medium\"\n            density=\"100\"\n            text-box-trim=\"start\"\n            as=\"h2\"\n            class=\"d-modal__header\"\n            data-qa=\"dt-modal-title\"\n          >\n            {{ title }}\n          </dt-text>\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          <sr-only-close-button\n            v-if=\"!showClose\"\n            @close=\"close\"\n          />\n          <dt-button\n            v-else\n            class=\"d-modal__close\"\n            data-qa=\"dt-modal-close-button\"\n            :size=\"300\"\n            kind=\"muted\"\n            importance=\"clear\"\n            :aria-label=\"closeButtonTitle\"\n            :title=\"closeButtonTitle\"\n            @click=\"close\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <dt-icon-close\n                :size=\"iconSize\"\n              />\n            </template>\n          </dt-button>\n        </div>\n      </transition>\n    </dialog>\n  </teleport>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtText } from '@/components/text';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport ModeMixin from '@/common/mixins/mode';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString, hasSlotContent, returnFirstEl, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\nimport { DialtoneLocalization } from '@/localization';\n\nconst focusableSelector = 'button:not(:disabled),[href],input:not(:disabled),select:not(:disabled),' +\n  'textarea:not(:disabled),details,[tabindex]:not([tabindex=\"-1\"]):not(:disabled):not([aria-disabled=\"true\"])';\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  compatConfig: { MODE: 3 },\n  name: 'DtModal',\n\n  components: {\n    DtButton,\n    DtText,\n    DtIconClose,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [ModeMixin],\n\n  props: {\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    open: {\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.\n     * @values default, critical\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, critical, info, positive, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validator (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     * Shows the close button on the modal\n     * @values true, false\n     */\n    showClose: {\n      type: Boolean,\n      default: true,\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     * A CSS selector string for the element to portal the modal to. If not provided, the modal will be rendered in its default location.\n     */\n    appendTo: {\n      type: String,\n      default: undefined,\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:open\n     * @type {Boolean}\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  watch: {\n    open (isShowing) {\n      this.syncDialogState(isShowing);\n    },\n  },\n\n  mounted () {\n    if (this.open) {\n      this.syncDialogState(true);\n    }\n  },\n\n  beforeUnmount () {\n    const dialogEl = this.$refs.dialogEl;\n    if (dialogEl?.open) {\n      dialogEl.close();\n      enableRootScrolling(this.getScrollRoot());\n    }\n    this.previousActiveElement = null;\n  },\n\n  methods: {\n    getScrollRoot () {\n      return returnFirstEl(this.$refs.dialogEl)?.getRootNode()?.host;\n    },\n\n    syncDialogState (isShowing) {\n      const dialogEl = this.$refs.dialogEl;\n      if (!dialogEl) return;\n\n      if (isShowing) {\n        this.previousActiveElement = document.activeElement;\n        if (!dialogEl.open) {\n          dialogEl.showModal();\n        }\n        disableRootScrolling(this.getScrollRoot());\n      } else if (dialogEl.open) {\n        // Leave transition plays via v-show on inner content.\n        // close() is called in onAfterLeave when transition completes.\n        enableRootScrolling(this.getScrollRoot());\n      }\n    },\n\n    close () {\n      this.$emit('update:open', false);\n    },\n\n    onBackdropClick (event) {\n      if (this.closeOnClick && event.target === event.currentTarget) {\n        this.close();\n      }\n      this.$emit('click', event);\n    },\n\n    onKeydown (event) {\n      this.$emit('keydown', event);\n    },\n\n    async onAfterEnter () {\n      this.$emit('update:open', true);\n      await this.setFocusAfterTransition();\n    },\n\n    onAfterLeave () {\n      const dialogEl = this.$refs.dialogEl;\n      if (dialogEl?.open) {\n        dialogEl.close();\n      }\n      this.previousActiveElement?.focus();\n      this.previousActiveElement = null;\n    },\n\n    focusFirstTabbable (container) {\n      const focusable = [...container.querySelectorAll(focusableSelector)];\n      if (!focusable.length) return;\n      let target = focusable[0];\n      // If first focusable is an unchecked radio, prefer the checked radio in the same group.\n      if (target.matches('[type=\"radio\"]:not(:checked)')) {\n        target = focusable.find(el => el.checked && el.name === target.name) || target;\n      }\n      target.focus({ preventScroll: true });\n    },\n\n    async setFocusAfterTransition () {\n      const dialogEl = this.$refs.dialogEl;\n      if (!dialogEl) return;\n\n      await this.$nextTick();\n\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstTabbable(dialogEl);\n      } else if (typeof this.initialFocusElement === 'string' && this.initialFocusElement.startsWith('#')) {\n        const el = dialogEl.querySelector(this.initialFocusElement);\n        if (el) {\n          el.focus();\n        } else {\n          // eslint-disable-next-line no-console\n          console.warn('Could not find the element specified in dt-modal prop \"initialFocusElement\". ' +\n            'Defaulting to focusing the first element.');\n          this.focusFirstTabbable(dialogEl);\n        }\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}