@dialpad/dialtone 9.29.1 → 9.30.1

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

@@ -1 +1 @@
-{"version":3,"file":"message-input.js","sources":["../../recipes/conversation_view/message_input/message_input.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <div\n    data-qa=\"dt-message-input\"\n    role=\"presentation\"\n    :class=\"['d-d-flex', 'd-fd-column', 'd-bar8', 'd-baw1', 'd-ba', 'd-c-text',\n             { 'd-bc-bold d-bs-sm': hasFocus, 'd-bc-default': !hasFocus }]\"\n    @click=\"$refs.richTextEditor?.focusEditor()\"\n    @drag-enter=\"onDrag\"\n    @drag-over=\"onDrag\"\n    @drop=\"onDrop\"\n    @keydown.enter.exact=\"onSend\"\n    @paste=\"onPaste\"\n  >\n    <!-- Some wrapper to restrict the height and show the scrollbar -->\n    <div\n      class=\"d-of-auto d-mx16 d-mt8 d-mb4\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <dt-rich-text-editor\n        ref=\"richTextEditor\"\n        v-model=\"internalInputValue\"\n        :editable=\"editable\"\n        :input-aria-label=\"inputAriaLabel\"\n        :input-class=\"inputClass\"\n        :output-format=\"outputFormat\"\n        :auto-focus=\"autoFocus\"\n        :link=\"link\"\n        :placeholder=\"placeholder\"\n        :mention-suggestion=\"mentionSuggestion\"\n        :allow-blockquote=\"allowBlockquote\"\n        :allow-bold=\"allowBold\"\n        :allow-bullet-list=\"allowBulletList\"\n        :allow-italic=\"allowItalic\"\n        :allow-strike=\"allowStrike\"\n        :allow-underline=\"allowUnderline\"\n        v-bind=\"$attrs\"\n        @focus=\"onFocus\"\n        @blur=\"onBlur\"\n        @input=\"onInput($event)\"\n      />\n    </div>\n    <!-- @slot Slot for attachment carousel -->\n    <slot name=\"middle\" />\n    <!-- Section for the bottom UI -->\n    <section class=\"d-d-flex d-jc-space-between d-mx8 d-my4\">\n      <!-- Left content -->\n      <div class=\"d-d-flex\">\n        <dt-tooltip\n          v-if=\"showImagePicker\"\n          placement=\"top-start\"\n          :message=\"showImagePicker.tooltipLabel\"\n          :offset=\"[-4, -4]\"\n        >\n          <template #anchor>\n            <dt-button\n              data-qa=\"dt-message-input-image-btn\"\n              size=\"sm\"\n              circle\n              :kind=\"imagePickerFocus ? 'default' : 'muted'\"\n              importance=\"clear\"\n              :aria-label=\"showImagePicker.ariaLabel\"\n              @click=\"onSelectImage\"\n              @mouseenter=\"imagePickerFocus = true\"\n              @mouseleave=\"imagePickerFocus = false\"\n              @focus=\"imagePickerFocus = true\"\n              @blur=\"imagePickerFocus = false\"\n            >\n              <template #icon>\n                <dt-icon\n                  name=\"image\"\n                  size=\"300\"\n                />\n              </template>\n            </dt-button>\n            <dt-input\n              ref=\"messageInputImageUpload\"\n              data-qa=\"dt-message-input-image-input\"\n              type=\"file\"\n              class=\"d-ps-absolute\"\n              multiple\n              hidden\n              @input=\"onImageUpload\"\n            />\n          </template>\n        </dt-tooltip>\n        <dt-popover\n          v-if=\"showEmojiPicker\"\n          data-qa=\"dt-message-input-emoji-picker-popover\"\n          :open=\"emojiPickerOpened\"\n          initial-focus-element=\"#searchInput\"\n          padding=\"none\"\n          @opened=\"(open) => { emojiPickerOpened = open }\"\n        >\n          <template #anchor>\n            <dt-tooltip\n              :message=\"emojiTooltipMessage\"\n              :offset=\"[0, -4]\"\n            >\n              <template #anchor>\n                <dt-button\n                  data-qa=\"dt-message-input-emoji-picker-btn\"\n                  size=\"sm\"\n                  circle\n                  :kind=\"emojiPickerHovered ? 'default' : 'muted'\"\n                  importance=\"clear\"\n                  :aria-label=\"emojiButtonAriaLabel\"\n                  :offset=\"[0, 0]\"\n                  @click=\"toggleEmojiPicker\"\n                  @mouseenter=\"emojiPickerFocus = true\"\n                  @mouseleave=\"emojiPickerFocus = false\"\n                  @focus=\"emojiPickerFocus = true\"\n                  @blur=\"emojiPickerFocus = false\"\n                >\n                  <template #icon>\n                    <dt-icon\n                      :name=\"!emojiPickerHovered ? 'satisfied' : 'very-satisfied'\"\n                      size=\"300\"\n                    />\n                  </template>\n                </dt-button>\n              </template>\n            </dt-tooltip>\n          </template>\n          <template #content>\n            <dt-emoji-picker\n              v-bind=\"emojiPickerProps\"\n              @skin-tone=\"onSkinTone\"\n              @selected-emoji=\"onSelectEmoji\"\n            />\n          </template>\n        </dt-popover>\n      </div>\n      <!-- Right content -->\n      <div class=\"d-d-flex\">\n        <!-- Optionally displayed remaining character counter -->\n        <dt-tooltip\n          v-if=\"Boolean(showCharacterLimit)\"\n          class=\"dt-message-input--remaining-char-tooltip\"\n          placement=\"top-end\"\n          :enabled=\"characterLimitTooltipEnabled\"\n          :message=\"showCharacterLimit.message\"\n          :offset=\"[10, -8]\"\n        >\n          <template #anchor>\n            <p\n              v-show=\"displayCharacterLimitWarning\"\n              class=\"d-fc-error d-mr16 dt-message-input--remaining-char\"\n              data-qa=\"dt-message-input-character-limit\"\n            >\n              {{ showCharacterLimit.count - inputLength }}\n            </p>\n          </template>\n        </dt-tooltip>\n\n        <!-- Cancel button for edit mode -->\n        <dt-button\n          v-if=\"showCancel\"\n          data-qa=\"dt-message-input-cancel-button\"\n          class=\"dt-message-input--cancel-button\"\n          size=\"sm\"\n          kind=\"muted\"\n          importance=\"clear\"\n          :aria-label=\"showCancel.ariaLabel\"\n          @click=\"onCancel\"\n        >\n          <p>{{ showCancel.text }}</p>\n        </dt-button>\n\n        <!-- Send button -->\n        <dt-tooltip\n          v-if=\"showSend\"\n          placement=\"top-end\"\n          :enabled=\"!showSend\"\n          :message=\"showSend.tooltipLabel\"\n          :show=\"!isSendDisabled && sendButtonFocus\"\n          :offset=\"[6, -8]\"\n        >\n          <template #anchor>\n            <!-- Right positioned UI - send button -->\n            <dt-button\n              data-qa=\"dt-message-input-send-btn\"\n              size=\"sm\"\n              kind=\"default\"\n              importance=\"primary\"\n              :class=\"[\n                {\n                  'message-input-button__disabled d-fc-muted': isSendDisabled,\n                  'd-btn--circle': showSend.icon,\n                },\n              ]\"\n              :aria-label=\"showSend.ariaLabel\"\n              :aria-disabled=\"isSendDisabled\"\n              @click=\"onSend\"\n              @mouseenter=\"sendButtonFocus = true\"\n              @mouseleave=\"sendButtonFocus = false\"\n              @focus=\"sendButtonFocus = true\"\n              @blur=\"sendButtonFocus = false\"\n            >\n              <template\n                v-if=\"showSend.icon\"\n                #icon\n              >\n                <dt-icon\n                  :name=\"showSend.icon\"\n                  size=\"300\"\n                />\n              </template>\n              <template\n                v-if=\"showSend.text\"\n              >\n                <p>{{ showSend.text }}</p>\n              </template>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  DtRichTextEditor,\n  RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n  RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport { DtEmojiPicker } from '@/components/emoji_picker';\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\n\nexport default {\n  name: 'DtRecipeMessageInput',\n\n  components: {\n    DtButton,\n    DtEmojiPicker,\n    DtIcon,\n    DtInput,\n    DtPopover,\n    DtRichTextEditor,\n    DtTooltip,\n  },\n\n  mixins: [],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Value of the input. The object format should match TipTap's JSON\n     * document structure: https://tiptap.dev/guide/output#option-1-json\n     */\n    value: {\n      type: [Object, String],\n      default: '',\n    },\n\n    /**\n     * Whether the input is editable\n     */\n    editable: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Descriptive label for the input element\n     */\n    inputAriaLabel: {\n      type: String,\n      required: true,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element. Only accepts a String value\n     * because this is passed to the editor via options. For multiple classes,\n     * join them into one string, e.g. \"d-p8 d-hmx96\"\n     */\n    inputClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the input should receive focus after the component has been\n     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n     * - `start`  Sets the focus to the beginning of the input\n     * - `end`    Sets the focus to the end of the input\n     * - `all`    Selects the whole contents of the input\n     * - `Number` Sets the focus to a specific position in the input\n     * - `true`   Defaults to `start`\n     * - `false`  Disables autofocus\n     * @values true, false, start, end, all, number\n     */\n    autoFocus: {\n      type: [Boolean, String, Number],\n      default: false,\n      validator (autoFocus) {\n        if (typeof autoFocus === 'string') {\n          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n        }\n        return true;\n      },\n    },\n\n    /**\n     * The output format that the editor uses when emitting the \"@input\" event.\n     * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for\n     * examples.\n     * @values text, json, html\n     */\n    outputFormat: {\n      type: String,\n      default: 'text',\n      validator (outputFormat) {\n        return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);\n      },\n    },\n\n    /**\n     * Enables the Link extension and optionally passes configurations to it\n     */\n    link: {\n      type: [Boolean, Object],\n      default: false,\n    },\n\n    /**\n     * Placeholder text\n     */\n    placeholder: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disable Send Button\n     */\n    disableSend: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Content area needs to dynamically adjust height based on the conversation area height.\n     * can be vh|px|rem|em|%\n     */\n    maxHeight: {\n      type: String,\n      default: 'unset',\n    },\n\n    // Emoji picker props\n    showEmojiPicker: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Props to pass into the emoji picker.\n     */\n    emojiPickerProps: {\n      type: Object,\n      default: () => ({}),\n      validate (emojiPickerProps) {\n        return [\n          'searchNoResultsLabel',\n          'searchResultsLabel',\n          'searchPlaceholderLabel',\n          'skinSelectorButtonTooltipLabel',\n          'tabSetLabels',\n        ].every(prop => emojiPickerProps[prop] != null);\n      },\n    },\n\n    /**\n     * Emoji button tooltip label\n     */\n    emojiTooltipMessage: {\n      type: String,\n      default: 'Emoji',\n    },\n\n    // Aria label for buttons\n    /**\n     * Emoji button aria label\n     */\n    emojiButtonAriaLabel: {\n      type: String,\n      default: 'emoji button',\n    },\n\n    /**\n     * Enable character Limit warning\n     */\n    showCharacterLimit: {\n      type: [Boolean, Object],\n      default: () => ({ count: 1500, warning: 500, message: '' }),\n    },\n\n    showImagePicker: {\n      type: [Boolean, Object],\n      default: () => ({ tooltipLabel: 'Attach Image', ariaLabel: 'image button' }),\n    },\n\n    /**\n     * Send button defaults.\n     */\n    showSend: {\n      type: [Boolean, Object],\n      default: () => ({ icon: 'send' }),\n    },\n\n    /**\n     * Cancel button defaults.\n     */\n    showCancel: {\n      type: [Boolean, Object],\n      default: () => ({ text: 'Cancel' }),\n    },\n\n    /**\n     * suggestion object containing the items query function.\n     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n     *\n     * The only required key is the items function which is used to query the contacts for suggestion.\n     * items({ query }) => { return [ContactObject]; }\n     * ContactObject format:\n     * { name: string, avatarSrc: string, id: string }\n     *\n     * When null, it does not add the plugin.\n     */\n    mentionSuggestion: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * Whether the input allows for block quote.\n     */\n    allowBlockquote: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the input allows for bold to be introduced in the text.\n     */\n    allowBold: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the input allows for bullet list to be introduced in the text.\n    */\n    allowBulletList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the input allows for italic to be introduced in the text.\n     */\n    allowItalic: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the input allows for strike to be introduced in the text.\n     */\n    allowStrike: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the input allows for underline to be introduced in the text.\n     */\n    allowUnderline: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Fires when send button is clicked\n     *\n     * @event submit\n     * @type {String}\n     */\n    'submit',\n\n    /**\n     * Fires when media is selected from image button\n     *\n     * @event select-media\n     * @type {Array}\n     */\n    'select-media',\n\n    /**\n     * Fires when media is dropped into the message input\n     *\n     * @event add-media\n     * @type {Array}\n     */\n    'add-media',\n\n    /**\n     * Fires when media is pasted into the message input\n     *\n     * @event paste-media\n     * @type {Array}\n     */\n    'paste-media',\n\n    /**\n     * Fires when cancel button is pressed (only on edit mode)\n     *\n     * @event cancel\n     * @type {Boolean}\n     */\n    'cancel',\n\n    /**\n     * Fires when skin tone is selected from the emoji picker\n     *\n     * @event skin-tone\n     * @type {String}\n     */\n    'skin-tone',\n\n    /**\n     * Fires when emoji is selected from the emoji picker\n     *\n     * @event selected-emoji\n     * @type {String}\n     */\n    'selected-emoji',\n\n    /**\n     * Native focus event\n     * @event input\n     * @type {String|JSON}\n     */\n    'focus',\n\n    /**\n     * Native blur event\n     * @event input\n     * @type {String|JSON}\n     */\n    'blur',\n\n    /**\n     * Native input event\n     * @event input\n     * @type {String|JSON}\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalInputValue: this.value, // internal input content\n      hasFocus: false,\n      imagePickerFocus: false,\n      emojiPickerFocus: false,\n      sendButtonFocus: false,\n      emojiPickerOpened: false,\n    };\n  },\n\n  computed: {\n    inputLength () {\n      return this.internalInputValue.length;\n    },\n\n    displayCharacterLimitWarning () {\n      return Boolean(this.showCharacterLimit) &&\n        ((this.showCharacterLimit.count - this.inputLength) <= this.showCharacterLimit.warning);\n    },\n\n    characterLimitTooltipEnabled () {\n      return this.showCharacterLimit.message && (this.showCharacterLimit.count - this.inputLength < 0);\n    },\n\n    isSendDisabled () {\n      return this.disableSend ||\n      (this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count);\n    },\n\n    computedCloseButtonProps () {\n      return {\n        ariaLabel: 'Close',\n      };\n    },\n\n    emojiPickerHovered () {\n      return this.emojiPickerFocus || this.emojiPickerOpened;\n    },\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalInputValue = newValue;\n    },\n  },\n\n  methods: {\n    onDrag (e) {\n      e.stopPropagation();\n      e.preventDefault();\n    },\n\n    onDrop (e) {\n      e.stopPropagation();\n      e.preventDefault();\n\n      const dt = e.dataTransfer;\n      const files = Array.from(dt.files);\n      this.$emit('add-media', files);\n    },\n\n    onPaste (e) {\n      if (e.clipboardData.files.length) {\n        e.stopPropagation();\n        e.preventDefault();\n        const files = [...e.clipboardData.files];\n        this.$emit('paste-media', files);\n      }\n    },\n\n    onSkinTone (skinTone) {\n      this.$emit('skin-tone', skinTone);\n    },\n\n    onSelectEmoji (emoji) {\n      if (!emoji) {\n        this.emojiPickerOpened = false;\n        return;\n      }\n\n      // Insert emoji into the editor\n      this.$refs.richTextEditor.editor.commands.insertContent({\n        type: 'emoji',\n        attrs: {\n          code: emoji.shortname,\n        },\n      });\n      this.emojiPickerOpened = false;\n      this.$emit('selected-emoji', emoji);\n    },\n\n    onSelectImage () {\n      this.$refs.messageInputImageUpload.$refs.input.click();\n    },\n\n    onImageUpload () {\n      this.$emit('select-media', this.$refs.messageInputImageUpload.$refs.input.files);\n    },\n\n    toggleEmojiPicker () {\n      this.emojiPickerOpened = !this.emojiPickerOpened;\n    },\n\n    onSend () {\n      if (this.isSendDisabled) {\n        return;\n      }\n      this.$emit('submit', this.internalInputValue);\n    },\n\n    onCancel () {\n      this.$emit('cancel');\n    },\n\n    onFocus (event) {\n      this.hasFocus = true;\n      this.$refs.richTextEditor?.focusEditor();\n      this.$emit('focus', event);\n    },\n\n    onBlur (event) {\n      this.hasFocus = false;\n      this.$emit('blur', event);\n    },\n\n    onInput (event) {\n      this.$emit('input', event);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input--remaining-char-tooltip {\n  margin-top: auto;\n  margin-bottom: auto;\n}\n.dt-message-input--remaining-char {\n  font-size: 1.2rem;\n}\n\n.message-input-button__disabled {\n  background-color: unset;\n  color: var(--theme-sidebar-icon-color);\n  cursor: default;\n}\n\n.dt-message-input--cancel-button {\n  margin-right: var(--dt-space-300);\n}\n</style>\n"],"names":["_sfc_main","DtButton","DtEmojiPicker","DtIcon","DtInput","DtPopover","DtRichTextEditor","DtTooltip","autoFocus","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","outputFormat","RICH_TEXT_EDITOR_OUTPUT_FORMATS","emojiPickerProps","prop","newValue","e","dt","files","skinTone","emoji","event","_a"],"mappings":"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"}
+{"version":3,"file":"message-input.js","sources":["../../recipes/conversation_view/message_input/message_input.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <div\n    data-qa=\"dt-message-input\"\n    role=\"presentation\"\n    :class=\"['d-d-flex', 'd-fd-column', 'd-bar8', 'd-baw1', 'd-ba', 'd-c-text',\n             { 'd-bc-bold d-bs-sm': hasFocus, 'd-bc-default': !hasFocus }]\"\n    @click=\"$refs.richTextEditor?.focusEditor()\"\n    @drag-enter=\"onDrag\"\n    @drag-over=\"onDrag\"\n    @drop=\"onDrop\"\n    @keydown.enter.exact=\"onSend\"\n    @paste=\"onPaste\"\n  >\n    <!-- Some wrapper to restrict the height and show the scrollbar -->\n    <div\n      class=\"d-of-auto d-mx16 d-mt8 d-mb4\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <dt-rich-text-editor\n        ref=\"richTextEditor\"\n        v-model=\"internalInputValue\"\n        :editable=\"editable\"\n        :input-aria-label=\"inputAriaLabel\"\n        :input-class=\"inputClass\"\n        :output-format=\"outputFormat\"\n        :auto-focus=\"autoFocus\"\n        :link=\"link\"\n        :placeholder=\"placeholder\"\n        :mention-suggestion=\"mentionSuggestion\"\n        :allow-blockquote=\"allowBlockquote\"\n        :allow-bold=\"allowBold\"\n        :allow-bullet-list=\"allowBulletList\"\n        :allow-italic=\"allowItalic\"\n        :allow-strike=\"allowStrike\"\n        :allow-underline=\"allowUnderline\"\n        v-bind=\"$attrs\"\n        @focus=\"onFocus\"\n        @blur=\"onBlur\"\n        @input=\"onInput($event)\"\n      />\n    </div>\n    <!-- @slot Slot for attachment carousel -->\n    <slot name=\"middle\" />\n    <!-- Section for the bottom UI -->\n    <section class=\"d-d-flex d-jc-space-between d-mx8 d-my4\">\n      <!-- Left content -->\n      <div class=\"d-d-flex\">\n        <dt-tooltip\n          v-if=\"showImagePicker\"\n          placement=\"top-start\"\n          :message=\"showImagePicker.tooltipLabel\"\n          :offset=\"[-4, -4]\"\n        >\n          <template #anchor>\n            <dt-button\n              data-qa=\"dt-message-input-image-btn\"\n              size=\"sm\"\n              circle\n              :kind=\"imagePickerFocus ? 'default' : 'muted'\"\n              importance=\"clear\"\n              :aria-label=\"showImagePicker.ariaLabel\"\n              @click=\"onSelectImage\"\n              @mouseenter=\"imagePickerFocus = true\"\n              @mouseleave=\"imagePickerFocus = false\"\n              @focus=\"imagePickerFocus = true\"\n              @blur=\"imagePickerFocus = false\"\n            >\n              <template #icon>\n                <dt-icon\n                  name=\"image\"\n                  size=\"300\"\n                />\n              </template>\n            </dt-button>\n            <dt-input\n              ref=\"messageInputImageUpload\"\n              data-qa=\"dt-message-input-image-input\"\n              type=\"file\"\n              class=\"d-ps-absolute\"\n              multiple\n              hidden\n              @input=\"onImageUpload\"\n            />\n          </template>\n        </dt-tooltip>\n        <dt-popover\n          v-if=\"showEmojiPicker\"\n          data-qa=\"dt-message-input-emoji-picker-popover\"\n          :open=\"emojiPickerOpened\"\n          initial-focus-element=\"#searchInput\"\n          padding=\"none\"\n          @opened=\"(open) => { emojiPickerOpened = open }\"\n        >\n          <template #anchor>\n            <dt-tooltip\n              :message=\"emojiTooltipMessage\"\n              :offset=\"[0, -4]\"\n            >\n              <template #anchor>\n                <dt-button\n                  data-qa=\"dt-message-input-emoji-picker-btn\"\n                  size=\"sm\"\n                  circle\n                  :kind=\"emojiPickerHovered ? 'default' : 'muted'\"\n                  importance=\"clear\"\n                  :aria-label=\"emojiButtonAriaLabel\"\n                  :offset=\"[0, 0]\"\n                  @click=\"toggleEmojiPicker\"\n                  @mouseenter=\"emojiPickerFocus = true\"\n                  @mouseleave=\"emojiPickerFocus = false\"\n                  @focus=\"emojiPickerFocus = true\"\n                  @blur=\"emojiPickerFocus = false\"\n                >\n                  <template #icon>\n                    <dt-icon\n                      :name=\"!emojiPickerHovered ? 'satisfied' : 'very-satisfied'\"\n                      size=\"300\"\n                    />\n                  </template>\n                </dt-button>\n              </template>\n            </dt-tooltip>\n          </template>\n          <template #content>\n            <dt-emoji-picker\n              v-bind=\"emojiPickerProps\"\n              @skin-tone=\"onSkinTone\"\n              @selected-emoji=\"onSelectEmoji\"\n            />\n          </template>\n        </dt-popover>\n      </div>\n      <!-- Right content -->\n      <div class=\"d-d-flex\">\n        <!-- Optionally displayed remaining character counter -->\n        <dt-tooltip\n          v-if=\"Boolean(showCharacterLimit)\"\n          class=\"dt-message-input--remaining-char-tooltip\"\n          placement=\"top-end\"\n          :enabled=\"characterLimitTooltipEnabled\"\n          :message=\"showCharacterLimit.message\"\n          :offset=\"[10, -8]\"\n        >\n          <template #anchor>\n            <p\n              v-show=\"displayCharacterLimitWarning\"\n              class=\"d-fc-error d-mr16 dt-message-input--remaining-char\"\n              data-qa=\"dt-message-input-character-limit\"\n            >\n              {{ showCharacterLimit.count - inputLength }}\n            </p>\n          </template>\n        </dt-tooltip>\n\n        <!-- Cancel button for edit mode -->\n        <dt-button\n          v-if=\"showCancel\"\n          data-qa=\"dt-message-input-cancel-button\"\n          class=\"dt-message-input--cancel-button\"\n          size=\"sm\"\n          kind=\"muted\"\n          importance=\"clear\"\n          :aria-label=\"showCancel.ariaLabel\"\n          @click=\"onCancel\"\n        >\n          <p>{{ showCancel.text }}</p>\n        </dt-button>\n\n        <!-- Send button -->\n        <dt-tooltip\n          v-if=\"showSend\"\n          placement=\"top-end\"\n          :enabled=\"!showSend\"\n          :message=\"showSend.tooltipLabel\"\n          :show=\"!isSendDisabled && sendButtonFocus\"\n          :offset=\"[6, -8]\"\n        >\n          <template #anchor>\n            <!-- Right positioned UI - send button -->\n            <dt-button\n              data-qa=\"dt-message-input-send-btn\"\n              size=\"sm\"\n              kind=\"default\"\n              importance=\"primary\"\n              :class=\"[\n                {\n                  'message-input-button__disabled d-fc-muted': isSendDisabled,\n                  'd-btn--circle': showSend.icon,\n                },\n              ]\"\n              :aria-label=\"showSend.ariaLabel\"\n              :aria-disabled=\"isSendDisabled\"\n              @click=\"onSend\"\n              @mouseenter=\"sendButtonFocus = true\"\n              @mouseleave=\"sendButtonFocus = false\"\n              @focus=\"sendButtonFocus = true\"\n              @blur=\"sendButtonFocus = false\"\n            >\n              <template\n                v-if=\"showSend.icon\"\n                #icon\n              >\n                <dt-icon\n                  :name=\"showSend.icon\"\n                  size=\"300\"\n                />\n              </template>\n              <template\n                v-if=\"showSend.text\"\n              >\n                <p>{{ showSend.text }}</p>\n              </template>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  DtRichTextEditor,\n  RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n  RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport { DtEmojiPicker } from '@/components/emoji_picker';\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\n\nexport default {\n  name: 'DtRecipeMessageInput',\n\n  components: {\n    DtButton,\n    DtEmojiPicker,\n    DtIcon,\n    DtInput,\n    DtPopover,\n    DtRichTextEditor,\n    DtTooltip,\n  },\n\n  mixins: [],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Value of the input. The object format should match TipTap's JSON\n     * document structure: https://tiptap.dev/guide/output#option-1-json\n     */\n    value: {\n      type: [Object, String],\n      default: '',\n    },\n\n    /**\n     * Whether the input is editable\n     */\n    editable: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Descriptive label for the input element\n     */\n    inputAriaLabel: {\n      type: String,\n      required: true,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element. Only accepts a String value\n     * because this is passed to the editor via options. For multiple classes,\n     * join them into one string, e.g. \"d-p8 d-hmx96\"\n     */\n    inputClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the input should receive focus after the component has been\n     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n     * - `start`  Sets the focus to the beginning of the input\n     * - `end`    Sets the focus to the end of the input\n     * - `all`    Selects the whole contents of the input\n     * - `Number` Sets the focus to a specific position in the input\n     * - `true`   Defaults to `start`\n     * - `false`  Disables autofocus\n     * @values true, false, start, end, all, number\n     */\n    autoFocus: {\n      type: [Boolean, String, Number],\n      default: false,\n      validator (autoFocus) {\n        if (typeof autoFocus === 'string') {\n          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n        }\n        return true;\n      },\n    },\n\n    /**\n     * The output format that the editor uses when emitting the \"@input\" event.\n     * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for\n     * examples.\n     * @values text, json, html\n     */\n    outputFormat: {\n      type: String,\n      default: 'text',\n      validator (outputFormat) {\n        return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);\n      },\n    },\n\n    /**\n     * Enables the Link extension and optionally passes configurations to it\n     */\n    link: {\n      type: [Boolean, Object],\n      default: false,\n    },\n\n    /**\n     * Placeholder text\n     */\n    placeholder: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disable Send Button\n     */\n    disableSend: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Content area needs to dynamically adjust height based on the conversation area height.\n     * can be vh|px|rem|em|%\n     */\n    maxHeight: {\n      type: String,\n      default: 'unset',\n    },\n\n    // Emoji picker props\n    showEmojiPicker: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Props to pass into the emoji picker.\n     */\n    emojiPickerProps: {\n      type: Object,\n      default: () => ({}),\n      validate (emojiPickerProps) {\n        return [\n          'searchNoResultsLabel',\n          'searchResultsLabel',\n          'searchPlaceholderLabel',\n          'skinSelectorButtonTooltipLabel',\n          'tabSetLabels',\n        ].every(prop => emojiPickerProps[prop] != null);\n      },\n    },\n\n    /**\n     * Emoji button tooltip label\n     */\n    emojiTooltipMessage: {\n      type: String,\n      default: 'Emoji',\n    },\n\n    // Aria label for buttons\n    /**\n     * Emoji button aria label\n     */\n    emojiButtonAriaLabel: {\n      type: String,\n      default: 'emoji button',\n    },\n\n    /**\n     * Enable character Limit warning\n     */\n    showCharacterLimit: {\n      type: [Boolean, Object],\n      default: () => ({ count: 1500, warning: 500, message: '' }),\n    },\n\n    showImagePicker: {\n      type: [Boolean, Object],\n      default: () => ({ tooltipLabel: 'Attach Image', ariaLabel: 'image button' }),\n    },\n\n    /**\n     * Send button defaults.\n     */\n    showSend: {\n      type: [Boolean, Object],\n      default: () => ({ icon: 'send' }),\n    },\n\n    /**\n     * Cancel button defaults.\n     */\n    showCancel: {\n      type: [Boolean, Object],\n      default: () => ({ text: 'Cancel' }),\n    },\n\n    /**\n     * suggestion object containing the items query function.\n     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n     *\n     * The only required key is the items function which is used to query the contacts for suggestion.\n     * items({ query }) => { return [ContactObject]; }\n     * ContactObject format:\n     * { name: string, avatarSrc: string, id: string }\n     *\n     * When null, it does not add the plugin.\n     */\n    mentionSuggestion: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * Whether the input allows for block quote.\n     */\n    allowBlockquote: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the input allows for bold to be introduced in the text.\n     */\n    allowBold: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the input allows for bullet list to be introduced in the text.\n    */\n    allowBulletList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the input allows for italic to be introduced in the text.\n     */\n    allowItalic: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the input allows for strike to be introduced in the text.\n     */\n    allowStrike: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the input allows for underline to be introduced in the text.\n     */\n    allowUnderline: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Fires when send button is clicked\n     *\n     * @event submit\n     * @type {String}\n     */\n    'submit',\n\n    /**\n     * Fires when media is selected from image button\n     *\n     * @event select-media\n     * @type {Array}\n     */\n    'select-media',\n\n    /**\n     * Fires when media is dropped into the message input\n     *\n     * @event add-media\n     * @type {Array}\n     */\n    'add-media',\n\n    /**\n     * Fires when media is pasted into the message input\n     *\n     * @event paste-media\n     * @type {Array}\n     */\n    'paste-media',\n\n    /**\n     * Fires when cancel button is pressed (only on edit mode)\n     *\n     * @event cancel\n     * @type {Boolean}\n     */\n    'cancel',\n\n    /**\n     * Fires when skin tone is selected from the emoji picker\n     *\n     * @event skin-tone\n     * @type {String}\n     */\n    'skin-tone',\n\n    /**\n     * Fires when emoji is selected from the emoji picker\n     *\n     * @event selected-emoji\n     * @type {String}\n     */\n    'selected-emoji',\n\n    /**\n     * Native focus event\n     * @event input\n     * @type {String|JSON}\n     */\n    'focus',\n\n    /**\n     * Native blur event\n     * @event input\n     * @type {String|JSON}\n     */\n    'blur',\n\n    /**\n     * Native input event\n     * @event input\n     * @type {String|JSON}\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalInputValue: this.value, // internal input content\n      hasFocus: false,\n      imagePickerFocus: false,\n      emojiPickerFocus: false,\n      sendButtonFocus: false,\n      emojiPickerOpened: false,\n    };\n  },\n\n  computed: {\n    inputLength () {\n      return this.internalInputValue.length;\n    },\n\n    displayCharacterLimitWarning () {\n      return Boolean(this.showCharacterLimit) &&\n        ((this.showCharacterLimit.count - this.inputLength) <= this.showCharacterLimit.warning);\n    },\n\n    characterLimitTooltipEnabled () {\n      return this.showCharacterLimit.message && (this.showCharacterLimit.count - this.inputLength < 0);\n    },\n\n    isSendDisabled () {\n      return this.disableSend ||\n      (this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count);\n    },\n\n    computedCloseButtonProps () {\n      return {\n        ariaLabel: 'Close',\n      };\n    },\n\n    emojiPickerHovered () {\n      return this.emojiPickerFocus || this.emojiPickerOpened;\n    },\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalInputValue = newValue;\n    },\n  },\n\n  methods: {\n    onDrag (e) {\n      e.stopPropagation();\n      e.preventDefault();\n    },\n\n    onDrop (e) {\n      e.stopPropagation();\n      e.preventDefault();\n\n      const dt = e.dataTransfer;\n      const files = Array.from(dt.files);\n      this.$emit('add-media', files);\n    },\n\n    onPaste (e) {\n      if (e.clipboardData.files.length) {\n        e.stopPropagation();\n        e.preventDefault();\n        const files = [...e.clipboardData.files];\n        this.$emit('paste-media', files);\n      }\n    },\n\n    onSkinTone (skinTone) {\n      this.$emit('skin-tone', skinTone);\n    },\n\n    onSelectEmoji (emoji) {\n      if (!emoji) {\n        this.emojiPickerOpened = false;\n        return;\n      }\n\n      // Insert emoji into the editor\n      this.$refs.richTextEditor.editor.commands.insertContent({\n        type: 'emoji',\n        attrs: {\n          code: emoji.shortname,\n        },\n      });\n      this.emojiPickerOpened = false;\n      this.$emit('selected-emoji', emoji);\n    },\n\n    onSelectImage () {\n      this.$refs.messageInputImageUpload.$refs.input.click();\n    },\n\n    onImageUpload () {\n      this.$emit('select-media', this.$refs.messageInputImageUpload.$refs.input.files);\n    },\n\n    toggleEmojiPicker () {\n      this.emojiPickerOpened = !this.emojiPickerOpened;\n    },\n\n    onSend () {\n      if (this.isSendDisabled) {\n        return;\n      }\n      this.$emit('submit', this.internalInputValue);\n    },\n\n    onCancel () {\n      this.$emit('cancel');\n    },\n\n    onFocus (event) {\n      this.hasFocus = true;\n      this.$refs.richTextEditor?.focusEditor();\n      this.$emit('focus', event);\n    },\n\n    onBlur (event) {\n      this.hasFocus = false;\n      this.$emit('blur', event);\n    },\n\n    onInput (event) {\n      this.$emit('input', event);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input--remaining-char-tooltip {\n  margin-top: auto;\n  margin-bottom: auto;\n}\n.dt-message-input--remaining-char {\n  font-size: 1.2rem;\n}\n\n.message-input-button__disabled {\n  background-color: unset;\n  color: var(--theme-sidebar-icon-color);\n  cursor: default;\n}\n\n.dt-message-input--cancel-button {\n  margin-right: var(--dt-space-300);\n}\n</style>\n"],"names":[],"mappings":"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"}

package/dist/vue2/lib/modal.cjs

@@ -1,3 +1,351 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../chunks/modal-qEzlo0Sj.js"),d=require("./utils.cjs"),s=require("./constants.cjs"),i=require("../chunks/sr_only_close_button-ErijKGYR.js"),c=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),u=require("./lazy-show.cjs"),_=require("./button.cjs"),m=require("./icon.cjs"),f=require("../chunks/notice_constants-mC6al2Dm.js");require("vue");require("../chunks/link_constants-Kn6kP4i1.js");require("@dialpad/dialtone-icons/vue2");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const l={default:"",danger:"d-modal--danger"},o={default:"",full:"d-modal--full"},r={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"},h={name:"DtModal",components:{DtLazyShow:u.DtLazyShow,DtButton:_.DtButton,DtIcon:m.DtIcon,SrOnlyCloseButton:i.S},mixins:[n.M,i.a],props:{closeButtonProps:{type:Object,required:!0,validator:t=>!!t.ariaLabel},copy:{type:String,default:""},describedById:{type:String,default:""},labelledById:{type:String,default:function(){return d.getUniqueString()}},show:{type:Boolean,default:!1},title:{type:String,default:""},bannerTitle:{type:String,default:""},kind:{type:String,default:"default",validator:t=>Object.keys(l).includes(t)},size:{type:String,default:"default",validator:t=>Object.keys(o).includes(t)},modalClass:{type:[String,Object,Array],default:""},dialogClass:{type:[String,Object,Array],default:""},contentClass:{type:[String,Object,Array],default:""},bannerKind:{type:String,default:"warning",validate(t){return f.N.includes(t)}},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:t=>t==="first"||t instanceof HTMLElement||t.startsWith("#")}},emits:["update:show"],data(){return{MODAL_KIND_MODIFIERS:l,MODAL_SIZE_MODIFIERS:o,MODAL_BANNER_KINDS:r,EVENT_KEYNAMES:s.EVENT_KEYNAMES}},computed:{modalListeners(){return{...this.$listeners,click:t=>{this.closeOnClick&&(t.target===t.currentTarget&&this.close(),this.$emit("click",t))},keydown:t=>{switch(t.code){case s.EVENT_KEYNAMES.esc:case s.EVENT_KEYNAMES.escape:this.close();break;case s.EVENT_KEYNAMES.tab:this.trapFocus(t);break}this.$emit("keydown",t)},"after-enter":t=>{this.$emit("update:show",!0),t.target===t.currentTarget&&this.setFocusAfterTransition()}}},open(){return`${!this.show}`},hasFooterSlot(){return!!this.$slots.footer},bannerKindClass(){return r[this.bannerKind]}},watch:{show:{immediate:!0,handler(t){var e;t?this.previousActiveElement=document.activeElement:((e=this.previousActiveElement)==null||e.focus(),this.previousActiveElement=null)}},$props:{immediate:!0,deep:!0,handler(){this.validateProps()}}},methods:{close(){this.$emit("update:show",!1)},setFocusAfterTransition(){this.initialFocusElement==="first"?this.focusFirstElement():this.initialFocusElement.startsWith("#")?this.focusElementById(this.initialFocusElement):this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},trapFocus(t){this.show&&this.focusTrappedTabPress(t)},validateProps(){this.hideClose&&!this.visuallyHiddenClose&&console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props
-        need to be set so the component always includes a close button`)}}};var p=function(){var e=this,a=e._self._c;return a("dt-lazy-show",e._g({class:["d-modal",e.MODAL_KIND_MODIFIERS[e.kind],e.MODAL_SIZE_MODIFIERS[e.size],e.modalClass],attrs:{transition:"d-zoom",show:e.show,"data-qa":"dt-modal","aria-hidden":e.open}},e.modalListeners),[e.show&&(e.$slots.banner||e.bannerTitle)?a("div",{class:["d-modal__banner",e.bannerClass,e.bannerKindClass],attrs:{"data-qa":"dt-modal-banner"}},[e._t("banner",function(){return[e._v(" "+e._s(e.bannerTitle)+" ")]})],2):e._e(),a("transition",{attrs:{appear:"",name:"d-modal__dialog"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:e.show,expression:"show"}],class:["d-modal__dialog",{"d-modal__dialog--scrollable":e.fixedHeaderFooter},e.dialogClass],attrs:{role:"dialog","aria-modal":"true","aria-describedby":e.describedById,"aria-labelledby":e.labelledById}},[e.$slots.header?a("div",{staticClass:"d-modal__header",attrs:{id:e.labelledById,"data-qa":"dt-modal-title"}},[e._t("header")],2):a("h2",{staticClass:"d-modal__header",attrs:{id:e.labelledById,"data-qa":"dt-modal-title"}},[e._v(" "+e._s(e.title)+" ")]),e.$slots.default?a("div",{class:["d-modal__content",e.contentClass],attrs:{"data-qa":"dt-modal-copy"}},[e._t("default")],2):a("p",{class:["d-modal__content",e.contentClass],attrs:{"data-qa":"dt-modal-copy"}},[e._v(" "+e._s(e.copy)+" ")]),e.hasFooterSlot?a("footer",{staticClass:"d-modal__footer"},[e._t("footer")],2):e._e(),e.hideClose?e._e():a("dt-button",e._b({staticClass:"d-modal__close",attrs:{circle:"",size:"lg",importance:"clear","aria-label":e.closeButtonProps.ariaLabel},on:{click:e.close},scopedSlots:e._u([{key:"icon",fn:function(){return[a("dt-icon",{attrs:{name:"close",size:"400"}})]},proxy:!0}],null,!1,1709155279)},"dt-button",e.closeButtonProps,!1)),e.showVisuallyHiddenClose?a("sr-only-close-button",{attrs:{"visually-hidden-close-label":e.visuallyHiddenCloseLabel},on:{close:e.close}}):e._e()],1)])],1)},b=[],y=c.n(h,p,b,!1,null,null,null,null);const E=y.exports;exports.DtModal=E;exports.MODAL_BANNER_KINDS=r;exports.MODAL_KIND_MODIFIERS=l;exports.MODAL_SIZE_MODIFIERS=o;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const modal$1 = require("../chunks/modal-VgxXAQFP.js");
+const common_utils = require("../common/utils.cjs");
+const common_constants = require("../common/constants.cjs");
+const sr_only_close_button = require("../chunks/sr_only_close_button-ZaGdAHz7.js");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const lib_lazyShow = require("./lazy-show.cjs");
+const lib_button = require("./button.cjs");
+const lib_icon = require("./icon.cjs");
+const notice_constants = require("../chunks/notice_constants-UXo9e3bS.js");
+require("vue");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("@dialpad/dialtone-icons/vue2");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+const MODAL_KIND_MODIFIERS = {
+  default: "",
+  danger: "d-modal--danger"
+};
+const MODAL_SIZE_MODIFIERS = {
+  default: "",
+  full: "d-modal--full"
+};
+const MODAL_BANNER_KINDS = {
+  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"
+};
+const _sfc_main = {
+  name: "DtModal",
+  components: {
+    DtLazyShow: lib_lazyShow.DtLazyShow,
+    DtButton: lib_button.DtButton,
+    DtIcon: lib_icon.DtIcon,
+    SrOnlyCloseButton: sr_only_close_button.SrOnlyCloseButton
+  },
+  mixins: [modal$1.Modal, sr_only_close_button.SrOnlyCloseButtonMixin],
+  props: {
+    /**
+     * A set of props to be passed into the modal's close button.
+     * Requires an 'ariaLabel' property.
+     */
+    closeButtonProps: {
+      type: Object,
+      required: true,
+      validator: (props) => {
+        return !!props.ariaLabel;
+      }
+    },
+    /**
+     * Body text to display as the modal's main content.
+     */
+    copy: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Id to use for the dialog's aria-describedby.
+     * Recommended only if the dialog content itself isn't enough to give full context,
+     * as screen readers should recite the dialog contents by default before any aria-description.
+     */
+    describedById: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Id to use for the dialog's aria-labelledby.
+     */
+    labelledById: {
+      type: String,
+      default: function() {
+        return common_utils.getUniqueString();
+      }
+    },
+    /**
+     * Whether the modal should be shown.
+     * Parent component can sync on this value to control the modal's visibility.
+     * @values true, false
+     */
+    show: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Title text to display in the modal header.
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Title text to display in the modal banner.
+     */
+    bannerTitle: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The theme of the modal. kind - default or danger,
+     * @values default, danger
+     */
+    kind: {
+      type: String,
+      default: "default",
+      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k)
+    },
+    /**
+     * The size of the modal. size - default or full,
+     * @values default, full
+     */
+    size: {
+      type: String,
+      default: "default",
+      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s)
+    },
+    /**
+     * Additional class name for the root modal element.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
+     */
+    modalClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    /**
+     * Additional class name for the dialog element within the modal.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
+     */
+    dialogClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    /**
+     * Additional class name for the content element within the modal.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
+     */
+    contentClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    /**
+     * Sets the color of the banner.
+     * @values base, error, info, success, warning
+     */
+    bannerKind: {
+      type: String,
+      default: "warning",
+      validate(kind) {
+        return notice_constants.NOTICE_KINDS.includes(kind);
+      }
+    },
+    /**
+     * Additional class name for the banner element within the modal.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
+     */
+    bannerClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    /**
+     * Hides the close button on the modal
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether the modal will close when you click outside of the dialog on the overlay.
+     * @values true, false
+     */
+    closeOnClick: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed
+     * @values true, false
+     */
+    fixedHeaderFooter: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * The element that is focused when the modal is opened. This can be an
+     * HTMLElement within the modal, a string starting with '#' which will
+     * find the element by ID. 'first' which will automatically focus
+     * the first element, or 'dialog' which will focus the dialog window itself.
+     * If the dialog is modal this prop cannot be 'none'.
+     */
+    initialFocusElement: {
+      type: [String, HTMLElement],
+      default: "first",
+      validator: (initialFocusElement) => {
+        return initialFocusElement === "first" || initialFocusElement instanceof HTMLElement || initialFocusElement.startsWith("#");
+      }
+    }
+  },
+  emits: [
+    /**
+     * The modal will emit a "false" boolean value for this event when the user performs a modal-closing action.
+     * Parent components can sync on this value to create a 2-way binding to control modal visibility.
+     *
+     * @event update:show
+     * @type {Boolean}
+     */
+    "update:show"
+  ],
+  data() {
+    return {
+      MODAL_KIND_MODIFIERS,
+      MODAL_SIZE_MODIFIERS,
+      MODAL_BANNER_KINDS,
+      EVENT_KEYNAMES: common_constants.EVENT_KEYNAMES
+    };
+  },
+  computed: {
+    modalListeners() {
+      return {
+        ...this.$listeners,
+        click: (event) => {
+          if (!this.closeOnClick)
+            return;
+          event.target === event.currentTarget && this.close();
+          this.$emit("click", event);
+        },
+        keydown: (event) => {
+          switch (event.code) {
+            case common_constants.EVENT_KEYNAMES.esc:
+            case common_constants.EVENT_KEYNAMES.escape:
+              this.close();
+              break;
+            case common_constants.EVENT_KEYNAMES.tab:
+              this.trapFocus(event);
+              break;
+          }
+          this.$emit("keydown", event);
+        },
+        "after-enter": (event) => {
+          this.$emit("update:show", true);
+          event.target === event.currentTarget && this.setFocusAfterTransition();
+        }
+      };
+    },
+    open() {
+      return `${!this.show}`;
+    },
+    hasFooterSlot() {
+      return !!this.$slots.footer;
+    },
+    bannerKindClass() {
+      return MODAL_BANNER_KINDS[this.bannerKind];
+    }
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(isShowing) {
+        var _a;
+        if (isShowing) {
+          this.previousActiveElement = document.activeElement;
+        } else {
+          (_a = this.previousActiveElement) == null ? void 0 : _a.focus();
+          this.previousActiveElement = null;
+        }
+      }
+    },
+    $props: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.validateProps();
+      }
+    }
+  },
+  methods: {
+    close() {
+      this.$emit("update:show", false);
+    },
+    setFocusAfterTransition() {
+      if (this.initialFocusElement === "first") {
+        this.focusFirstElement();
+      } else if (this.initialFocusElement.startsWith("#")) {
+        this.focusElementById(this.initialFocusElement);
+      } else if (this.initialFocusElement instanceof HTMLElement) {
+        this.initialFocusElement.focus();
+      }
+    },
+    trapFocus(e) {
+      if (this.show) {
+        this.focusTrappedTabPress(e);
+      }
+    },
+    validateProps() {
+      if (this.hideClose && !this.visuallyHiddenClose) {
+        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props
+        need to be set so the component always includes a close button`);
+      }
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("dt-lazy-show", _vm._g({ class: [
+    "d-modal",
+    _vm.MODAL_KIND_MODIFIERS[_vm.kind],
+    _vm.MODAL_SIZE_MODIFIERS[_vm.size],
+    _vm.modalClass
+  ], attrs: { "transition": "d-zoom", "show": _vm.show, "data-qa": "dt-modal", "aria-hidden": _vm.open } }, _vm.modalListeners), [_vm.show && (_vm.$slots.banner || _vm.bannerTitle) ? _c("div", { class: [
+    "d-modal__banner",
+    _vm.bannerClass,
+    _vm.bannerKindClass
+  ], attrs: { "data-qa": "dt-modal-banner" } }, [_vm._t("banner", function() {
+    return [_vm._v(" " + _vm._s(_vm.bannerTitle) + " ")];
+  })], 2) : _vm._e(), _c("transition", { attrs: { "appear": "", "name": "d-modal__dialog" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.show, expression: "show" }], class: [
+    "d-modal__dialog",
+    { "d-modal__dialog--scrollable": _vm.fixedHeaderFooter },
+    _vm.dialogClass
+  ], attrs: { "role": "dialog", "aria-modal": "true", "aria-describedby": _vm.describedById, "aria-labelledby": _vm.labelledById } }, [_vm.$slots.header ? _c("div", { staticClass: "d-modal__header", attrs: { "id": _vm.labelledById, "data-qa": "dt-modal-title" } }, [_vm._t("header")], 2) : _c("h2", { staticClass: "d-modal__header", attrs: { "id": _vm.labelledById, "data-qa": "dt-modal-title" } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _vm.$slots.default ? _c("div", { class: [
+    "d-modal__content",
+    _vm.contentClass
+  ], attrs: { "data-qa": "dt-modal-copy" } }, [_vm._t("default")], 2) : _c("p", { class: [
+    "d-modal__content",
+    _vm.contentClass
+  ], attrs: { "data-qa": "dt-modal-copy" } }, [_vm._v(" " + _vm._s(_vm.copy) + " ")]), _vm.hasFooterSlot ? _c("footer", { staticClass: "d-modal__footer" }, [_vm._t("footer")], 2) : _vm._e(), !_vm.hideClose ? _c("dt-button", _vm._b({ staticClass: "d-modal__close", attrs: { "circle": "", "size": "lg", "importance": "clear", "aria-label": _vm.closeButtonProps.ariaLabel }, on: { "click": _vm.close }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon", { attrs: { "name": "close", "size": "400" } })];
+  }, proxy: true }], null, false, 1709155279) }, "dt-button", _vm.closeButtonProps, false)) : _vm._e(), _vm.showVisuallyHiddenClose ? _c("sr-only-close-button", { attrs: { "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel }, on: { "close": _vm.close } }) : _vm._e()], 1)])], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const modal = __component__.exports;
+exports.DtModal = modal;
+exports.MODAL_BANNER_KINDS = MODAL_BANNER_KINDS;
+exports.MODAL_KIND_MODIFIERS = MODAL_KIND_MODIFIERS;
+exports.MODAL_SIZE_MODIFIERS = MODAL_SIZE_MODIFIERS;
 //# sourceMappingURL=modal.cjs.map

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

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