@dialpad/dialtone 9.126.4 → 9.126.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tokens/doc.json +26079 -26079
- package/dist/vue2/lib/emoji-row/emoji-row-constants.cjs +1 -1
- package/dist/vue2/lib/emoji-row/emoji-row-constants.cjs.map +1 -1
- package/dist/vue2/lib/emoji-row/emoji-row-constants.js +1 -0
- package/dist/vue2/lib/emoji-row/emoji-row-constants.js.map +1 -1
- package/dist/vue2/lib/emoji-row/emoji-row.cjs +1 -1
- package/dist/vue2/lib/emoji-row/emoji-row.cjs.map +1 -1
- package/dist/vue2/lib/emoji-row/emoji-row.js +28 -30
- package/dist/vue2/lib/emoji-row/emoji-row.js.map +1 -1
- package/dist/vue2/lib/modal/modal.cjs +1 -1
- package/dist/vue2/lib/modal/modal.cjs.map +1 -1
- package/dist/vue2/lib/modal/modal.js +13 -9
- package/dist/vue2/lib/modal/modal.js.map +1 -1
- package/dist/vue2/lib/rich-text-editor/rich-text-editor.cjs +3 -3
- package/dist/vue2/lib/rich-text-editor/rich-text-editor.cjs.map +1 -1
- package/dist/vue2/lib/rich-text-editor/rich-text-editor.js +34 -38
- package/dist/vue2/lib/rich-text-editor/rich-text-editor.js.map +1 -1
- package/dist/vue2/localization/en-US.cjs +1 -11
- package/dist/vue2/localization/en-US.cjs.map +1 -1
- package/dist/vue2/localization/en-US.js +1 -11
- package/dist/vue2/localization/en-US.js.map +1 -1
- package/dist/vue2/types/components/modal/modal.vue.d.ts +3 -2
- package/dist/vue2/types/components/rich_text_editor/rich_text_editor.vue.d.ts.map +1 -1
- package/dist/vue2/types/recipes/conversation_view/emoji_row/emoji_row_constants.d.ts.map +1 -1
- package/dist/vue3/lib/modal/modal.cjs +2 -2
- package/dist/vue3/lib/modal/modal.cjs.map +1 -1
- package/dist/vue3/lib/modal/modal.js +55 -48
- package/dist/vue3/lib/modal/modal.js.map +1 -1
- package/dist/vue3/lib/rich-text-editor/rich-text-editor.cjs +2 -2
- package/dist/vue3/lib/rich-text-editor/rich-text-editor.cjs.map +1 -1
- package/dist/vue3/lib/rich-text-editor/rich-text-editor.js +18 -22
- package/dist/vue3/lib/rich-text-editor/rich-text-editor.js.map +1 -1
- package/dist/vue3/types/components/modal/modal.vue.d.ts +4 -2
- package/dist/vue3/types/components/modal/modal.vue.d.ts.map +1 -1
- package/dist/vue3/types/components/rich_text_editor/rich_text_editor.vue.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"en-US.cjs","sources":["../../localization/en-US.ftl?raw"],"sourcesContent":["export default \"# Dialtone\\nDIALTONE_CLOSE_BUTTON = Click to close\\nDIALTONE_BREADCRUMBS_ARIA_LABEL = breadcrumbs\\nDIALTONE_LOADING = loading\\nDIALTONE_UNREAD_MESSAGE_COUNT_TEXT =\\n { $unreadCount ->\\n [0] No unread messages\\n [1] 1 unread message\\n *[other] {$unreadCount} unread messages\\n }\\nDIALTONE_UNREAD_MENTION_COUNT_TEXT =\\n { $unreadCount ->\\n [0] No unread mentions\\n [1] 1 unread mention\\n *[other] {$unreadCount} unread mentions\\n }\\nDIALTONE_TYPING_TEXT = Typing\\n\\nDIALTONE_ATTACHMENT_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL = Click to open\\nDIALTONE_ATTACHMENT_CAROUSEL_PROGRESS_BAR_ARIA_LABEL = Uploading\\nDIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL = Previous\\nDIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL = Next\\n\\nDIALTONE_CALLBAR_BUTTON_WITH_DROPDOWN_ARROW_BUTTON_ARIA_LABEL = Open dropdown\\nDIALTONE_CALLBAR_BUTTON_WITH_POPOVER_ARROW_BUTTON_ARIA_LABEL = Open popover\\n\\nDIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL = Open menu\\n\\nDIALTONE_DATEPICKER_PREVIOUS_MONTH = Previous month\\nDIALTONE_DATEPICKER_NEXT_MONTH = Next month\\nDIALTONE_DATEPICKER_PREVIOUS_YEAR = Previous year\\nDIALTONE_DATEPICKER_NEXT_YEAR = Next year\\nDIALTONE_DATEPICKER_SELECT_DAY = Select day\\nDIALTONE_DATEPICKER_CHANGE_TO = Change to\\n\\nDIALTONE_EDITOR_CONFIRM_SET_LINK_BUTTON =\\n .title = Confirm\\n .aria-label = Confirm set link\\nDIALTONE_EDITOR_REMOVE_LINK_BUTTON =\\n .title = Remove\\n .aria-label = Remove link\\nDIALTONE_EDITOR_CANCEL_SET_LINK_BUTTON =\\n .title = Cancel\\n .aria-label = Cancel set link\\n\\nDIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL = Quick reply\\nDIALTONE_EDITOR_BOLD_BUTTON_LABEL = Bold\\nDIALTONE_EDITOR_ITALICS_BUTTON_LABEL = Italics\\nDIALTONE_EDITOR_UNDERLINE_BUTTON_LABEL = Underline\\nDIALTONE_EDITOR_STRIKE_BUTTON_LABEL = Strike\\nDIALTONE_EDITOR_ALIGN_LEFT_BUTTON_LABEL = Align Left\\nDIALTONE_EDITOR_ALIGN_CENTER_BUTTON_LABEL = Align Center\\nDIALTONE_EDITOR_ALIGN_RIGHT_BUTTON_LABEL = Align Right\\nDIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL = Align Justify\\nDIALTONE_EDITOR_BULLET_LIST_BUTTON_LABEL = Bullet List\\nDIALTONE_EDITOR_ORDERED_LIST_BUTTON_LABEL = Ordered List\\nDIALTONE_EDITOR_QUOTE_BUTTON_LABEL = Quote\\nDIALTONE_EDITOR_CODE_BUTTON_LABEL = Code\\nDIALTONE_EDITOR_IMAGE_BUTTON_LABEL = Image\\nDIALTONE_EDITOR_LINK_BUTTON_LABEL = Link\\nDIALTONE_EDITOR_ADD_LINK_BUTTON =\\n .title = Add Link\\n .aria-label = Input field to add link\\n\\nDIALTONE_EMOJI_ROW_REACTION_LABEL
|
|
1
|
+
{"version":3,"file":"en-US.cjs","sources":["../../localization/en-US.ftl?raw"],"sourcesContent":["export default \"# Dialtone\\nDIALTONE_CLOSE_BUTTON = Click to close\\nDIALTONE_BREADCRUMBS_ARIA_LABEL = breadcrumbs\\nDIALTONE_LOADING = loading\\nDIALTONE_UNREAD_MESSAGE_COUNT_TEXT =\\n { $unreadCount ->\\n [0] No unread messages\\n [1] 1 unread message\\n *[other] {$unreadCount} unread messages\\n }\\nDIALTONE_UNREAD_MENTION_COUNT_TEXT =\\n { $unreadCount ->\\n [0] No unread mentions\\n [1] 1 unread mention\\n *[other] {$unreadCount} unread mentions\\n }\\nDIALTONE_TYPING_TEXT = Typing\\n\\nDIALTONE_ATTACHMENT_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL = Click to open\\nDIALTONE_ATTACHMENT_CAROUSEL_PROGRESS_BAR_ARIA_LABEL = Uploading\\nDIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL = Previous\\nDIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL = Next\\n\\nDIALTONE_CALLBAR_BUTTON_WITH_DROPDOWN_ARROW_BUTTON_ARIA_LABEL = Open dropdown\\nDIALTONE_CALLBAR_BUTTON_WITH_POPOVER_ARROW_BUTTON_ARIA_LABEL = Open popover\\n\\nDIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL = Open menu\\n\\nDIALTONE_DATEPICKER_PREVIOUS_MONTH = Previous month\\nDIALTONE_DATEPICKER_NEXT_MONTH = Next month\\nDIALTONE_DATEPICKER_PREVIOUS_YEAR = Previous year\\nDIALTONE_DATEPICKER_NEXT_YEAR = Next year\\nDIALTONE_DATEPICKER_SELECT_DAY = Select day\\nDIALTONE_DATEPICKER_CHANGE_TO = Change to\\n\\nDIALTONE_EDITOR_CONFIRM_SET_LINK_BUTTON =\\n .title = Confirm\\n .aria-label = Confirm set link\\nDIALTONE_EDITOR_REMOVE_LINK_BUTTON =\\n .title = Remove\\n .aria-label = Remove link\\nDIALTONE_EDITOR_CANCEL_SET_LINK_BUTTON =\\n .title = Cancel\\n .aria-label = Cancel set link\\n\\nDIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL = Quick reply\\nDIALTONE_EDITOR_BOLD_BUTTON_LABEL = Bold\\nDIALTONE_EDITOR_ITALICS_BUTTON_LABEL = Italics\\nDIALTONE_EDITOR_UNDERLINE_BUTTON_LABEL = Underline\\nDIALTONE_EDITOR_STRIKE_BUTTON_LABEL = Strike\\nDIALTONE_EDITOR_ALIGN_LEFT_BUTTON_LABEL = Align Left\\nDIALTONE_EDITOR_ALIGN_CENTER_BUTTON_LABEL = Align Center\\nDIALTONE_EDITOR_ALIGN_RIGHT_BUTTON_LABEL = Align Right\\nDIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL = Align Justify\\nDIALTONE_EDITOR_BULLET_LIST_BUTTON_LABEL = Bullet List\\nDIALTONE_EDITOR_ORDERED_LIST_BUTTON_LABEL = Ordered List\\nDIALTONE_EDITOR_QUOTE_BUTTON_LABEL = Quote\\nDIALTONE_EDITOR_CODE_BUTTON_LABEL = Code\\nDIALTONE_EDITOR_IMAGE_BUTTON_LABEL = Image\\nDIALTONE_EDITOR_LINK_BUTTON_LABEL = Link\\nDIALTONE_EDITOR_ADD_LINK_BUTTON =\\n .title = Add Link\\n .aria-label = Input field to add link\\n\\nDIALTONE_EMOJI_ROW_REACTION_LABEL = { $names } reacted with { $reaction }\\n\\nDIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL = Add emoji\\nDIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL = No results\\nDIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL = Search results\\nDIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL = Search...\\nDIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL = Change default skin tone\\nDIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL = Most recently used\\nDIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL = Smileys and people\\nDIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL = Nature\\nDIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL = Food\\nDIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL = Activity\\nDIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL = Travel\\nDIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL = Objects\\nDIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL = Symbols\\nDIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL = Flags\\nDIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL = Custom\\n\\nDIALTONE_FEED_ITEM_PILL_ARIA_LABEL = Click to expand\\n\\nDIALTONE_GENERAL_ROW_ACTIVE_VOICE_CHAT_TEXT = Active voice chat\\nDIALTONE_GENERAL_ROW_CALL_BUTTON_TOOLTIP = Call\\nDIALTONE_GENERAL_ROW_DND_TEXT_TOOLTIP = Do not disturb\\n\\nDIALTONE_GROUP_ROW_GROUP_COUNT_TEXT =\\n { $count ->\\n [1] 1 user\\n *[other] {$count} users\\n }\\n\\nDIALTONE_IVR_NODE_MENU_BUTTON_ARIA_LABEL = Open menu\\nDIALTONE_IVR_NODE_PROMPTMENU_ARIA_LABEL = prompt menu node\\nDIALTONE_IVR_NODE_PROMPTCOLLECT_ARIA_LABEL = prompt collect node\\nDIALTONE_IVR_NODE_PROMPTPLAY_ARIA_LABEL = prompt play node\\nDIALTONE_IVR_NODE_GOTOEXPERT_ARIA_LABEL = go to expert node\\nDIALTONE_IVR_NODE_BRANCH_ARIA_LABEL = branch node\\nDIALTONE_IVR_NODE_GOTO_ARIA_LABEL = go to node\\nDIALTONE_IVR_NODE_ASSIGN_ARIA_LABEL = assign node\\nDIALTONE_IVR_NODE_CUSTOMERDATA_ARIA_LABEL = customer data node\\nDIALTONE_IVR_NODE_TRANSFER_ARIA_LABEL = transfer node\\nDIALTONE_IVR_NODE_HANGUP_ARIA_LABEL = hangup node\\n\\nDIALTONE_MESSAGE_INPUT_SEND_BUTTON_ARIA_LABEL = Send\\nDIALTONE_MESSAGE_INPUT_IMAGE_PICKER_BUTTON_ARIA_LABEL = Attach Image\\nDIALTONE_MESSAGE_INPUT_EMOJI_PICKER_BUTTON_ARIA_LABEL = Select Emoji\\nDIALTONE_MESSAGE_INPUT_CANCEL_BUTTON_ARIA_LABEL = Cancel\\nDIALTONE_MESSAGE_INPUT_BOLD_BUTTON_LABEL =\\n .aria-label = Toggle bold on selected text\\n .tooltip-text = Bold\\nDIALTONE_MESSAGE_INPUT_ITALIC_BUTTON_LABEL =\\n .aria-label = Toggle italic on selected text\\n .tooltip-text = Italic\\nDIALTONE_MESSAGE_INPUT_STRIKETHROUGH_BUTTON_LABEL =\\n .aria-label = Toggle strikethrough on selected text\\n .tooltip-text = Strikethrough\\nDIALTONE_MESSAGE_INPUT_BULLET_LIST_BUTTON_LABEL =\\n .aria-label = Create or edit bullet list on selected text\\n .tooltip-text = Bullet list\\nDIALTONE_MESSAGE_INPUT_ORDERED_LIST_BUTTON_LABEL =\\n .aria-label = Create or edit ordered list on selected text\\n .tooltip-text = Ordered list\\nDIALTONE_MESSAGE_INPUT_BLOCK_QUOTE_BUTTON_LABEL =\\n .aria-label = Create or edit block quote on selected text\\n .tooltip-text = Block quote\\nDIALTONE_MESSAGE_INPUT_CODE_BUTTON_LABEL =\\n .aria-label = Create or edit code on selected text\\n .tooltip-text = Code\\nDIALTONE_MESSAGE_INPUT_CODE_BLOCK_BUTTON_LABEL =\\n .aria-label = Create or edit code block on selected text\\n .tooltip-text = Code block\\nDIALTONE_MESSAGE_INPUT_LINK_BUTTON_LABEL =\\n .aria-label = Create or edit link on selected text\\n .tooltip-text = Link\\nDIALTONE_MESSAGE_INPUT_LINK_DIALOG_TITLE = Add a link\\nDIALTONE_MESSAGE_INPUT_LINK_TEXT_LABEL = Text to display (optional)\\nDIALTONE_MESSAGE_INPUT_LINK_LINK_LABEL = Link\\nDIALTONE_MESSAGE_INPUT_LINK_LINK_PLACEHOLDER = e.g. https://www.dialpad.com\\nDIALTONE_MESSAGE_INPUT_LINK_REMOVE_LABEL = Remove\\nDIALTONE_MESSAGE_INPUT_LINK_CANCEL_LABEL = Cancel\\nDIALTONE_MESSAGE_INPUT_LINK_CONFIRM_LABEL = Done\\n\\nDIALTONE_PAGINATION_FIRST_PAGE = First page\\nDIALTONE_PAGINATION_PREVIOUS_PAGE = Previous page\\nDIALTONE_PAGINATION_NEXT_PAGE = Next page\\nDIALTONE_PAGINATION_LAST_PAGE = Last page\\nDIALTONE_PAGINATION_PAGE_NUMBER = Page number {$page}\\n\\nDIALTONE_RICH_TEXT_EDITOR_EDIT_BUTTON_LABEL = Edit\\nDIALTONE_RICH_TEXT_EDITOR_OPEN_LINK_BUTTON_LABEL = Open link\\nDIALTONE_RICH_TEXT_EDITOR_REMOVE_BUTTON_LABEL = Remove\\n\\nDIALTONE_SETTINGS_MENU_DEFAULT_BUTTON_LABEL = Settings\\nDIALTONE_SETTINGS_MENU_UPDATE_BUTTON_LABEL = Update\\n\\nDIALTONE_UNREAD_PILL_MENTIONS_TEXT = Unread mentions\\nDIALTONE_UNREAD_PILL_MESSAGES_TEXT = Unread messages\\n\\n# Storybook only\\nSTORYBOOK_LANGUAGE_ENGLISH = English\\nSTORYBOOK_LANGUAGE_CHINESE = Chinese\\nSTORYBOOK_LANGUAGE_DUTCH = Dutch\\nSTORYBOOK_LANGUAGE_FRENCH = French\\nSTORYBOOK_LANGUAGE_GERMAN = German\\nSTORYBOOK_LANGUAGE_ITALIAN = Italian\\nSTORYBOOK_LANGUAGE_JAPANESE = Japanese\\nSTORYBOOK_LANGUAGE_PORTUGUESE = Portuguese\\nSTORYBOOK_LANGUAGE_RUSSIAN = Russian\\nSTORYBOOK_LANGUAGE_SPANISH = Spanish\\nSTORYBOOK_SET_LANGUAGE = Set language\\n\""],"names":["enUS"],"mappings":"4GAAA,MAAeA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
|
|
@@ -62,17 +62,7 @@ DIALTONE_EDITOR_ADD_LINK_BUTTON =
|
|
|
62
62
|
.title = Add Link
|
|
63
63
|
.aria-label = Input field to add link
|
|
64
64
|
|
|
65
|
-
DIALTONE_EMOJI_ROW_REACTION_LABEL =
|
|
66
|
-
{ $reactionCount ->
|
|
67
|
-
*[other] { $selected ->
|
|
68
|
-
*[false] { $reactionCount } people reacted with { $reaction }.
|
|
69
|
-
[true] { $reactionCount } people including you reacted with { $reaction }.
|
|
70
|
-
}
|
|
71
|
-
[one] { $selected ->
|
|
72
|
-
*[false] { $name } reacted with { $reaction }.
|
|
73
|
-
[true] You reacted with { $reaction }.
|
|
74
|
-
}
|
|
75
|
-
}
|
|
65
|
+
DIALTONE_EMOJI_ROW_REACTION_LABEL = { $names } reacted with { $reaction }
|
|
76
66
|
|
|
77
67
|
DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL = Add emoji
|
|
78
68
|
DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL = No results
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"en-US.js","sources":["../../localization/en-US.ftl?raw"],"sourcesContent":["export default \"# Dialtone\\nDIALTONE_CLOSE_BUTTON = Click to close\\nDIALTONE_BREADCRUMBS_ARIA_LABEL = breadcrumbs\\nDIALTONE_LOADING = loading\\nDIALTONE_UNREAD_MESSAGE_COUNT_TEXT =\\n { $unreadCount ->\\n [0] No unread messages\\n [1] 1 unread message\\n *[other] {$unreadCount} unread messages\\n }\\nDIALTONE_UNREAD_MENTION_COUNT_TEXT =\\n { $unreadCount ->\\n [0] No unread mentions\\n [1] 1 unread mention\\n *[other] {$unreadCount} unread mentions\\n }\\nDIALTONE_TYPING_TEXT = Typing\\n\\nDIALTONE_ATTACHMENT_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL = Click to open\\nDIALTONE_ATTACHMENT_CAROUSEL_PROGRESS_BAR_ARIA_LABEL = Uploading\\nDIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL = Previous\\nDIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL = Next\\n\\nDIALTONE_CALLBAR_BUTTON_WITH_DROPDOWN_ARROW_BUTTON_ARIA_LABEL = Open dropdown\\nDIALTONE_CALLBAR_BUTTON_WITH_POPOVER_ARROW_BUTTON_ARIA_LABEL = Open popover\\n\\nDIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL = Open menu\\n\\nDIALTONE_DATEPICKER_PREVIOUS_MONTH = Previous month\\nDIALTONE_DATEPICKER_NEXT_MONTH = Next month\\nDIALTONE_DATEPICKER_PREVIOUS_YEAR = Previous year\\nDIALTONE_DATEPICKER_NEXT_YEAR = Next year\\nDIALTONE_DATEPICKER_SELECT_DAY = Select day\\nDIALTONE_DATEPICKER_CHANGE_TO = Change to\\n\\nDIALTONE_EDITOR_CONFIRM_SET_LINK_BUTTON =\\n .title = Confirm\\n .aria-label = Confirm set link\\nDIALTONE_EDITOR_REMOVE_LINK_BUTTON =\\n .title = Remove\\n .aria-label = Remove link\\nDIALTONE_EDITOR_CANCEL_SET_LINK_BUTTON =\\n .title = Cancel\\n .aria-label = Cancel set link\\n\\nDIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL = Quick reply\\nDIALTONE_EDITOR_BOLD_BUTTON_LABEL = Bold\\nDIALTONE_EDITOR_ITALICS_BUTTON_LABEL = Italics\\nDIALTONE_EDITOR_UNDERLINE_BUTTON_LABEL = Underline\\nDIALTONE_EDITOR_STRIKE_BUTTON_LABEL = Strike\\nDIALTONE_EDITOR_ALIGN_LEFT_BUTTON_LABEL = Align Left\\nDIALTONE_EDITOR_ALIGN_CENTER_BUTTON_LABEL = Align Center\\nDIALTONE_EDITOR_ALIGN_RIGHT_BUTTON_LABEL = Align Right\\nDIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL = Align Justify\\nDIALTONE_EDITOR_BULLET_LIST_BUTTON_LABEL = Bullet List\\nDIALTONE_EDITOR_ORDERED_LIST_BUTTON_LABEL = Ordered List\\nDIALTONE_EDITOR_QUOTE_BUTTON_LABEL = Quote\\nDIALTONE_EDITOR_CODE_BUTTON_LABEL = Code\\nDIALTONE_EDITOR_IMAGE_BUTTON_LABEL = Image\\nDIALTONE_EDITOR_LINK_BUTTON_LABEL = Link\\nDIALTONE_EDITOR_ADD_LINK_BUTTON =\\n .title = Add Link\\n .aria-label = Input field to add link\\n\\nDIALTONE_EMOJI_ROW_REACTION_LABEL
|
|
1
|
+
{"version":3,"file":"en-US.js","sources":["../../localization/en-US.ftl?raw"],"sourcesContent":["export default \"# Dialtone\\nDIALTONE_CLOSE_BUTTON = Click to close\\nDIALTONE_BREADCRUMBS_ARIA_LABEL = breadcrumbs\\nDIALTONE_LOADING = loading\\nDIALTONE_UNREAD_MESSAGE_COUNT_TEXT =\\n { $unreadCount ->\\n [0] No unread messages\\n [1] 1 unread message\\n *[other] {$unreadCount} unread messages\\n }\\nDIALTONE_UNREAD_MENTION_COUNT_TEXT =\\n { $unreadCount ->\\n [0] No unread mentions\\n [1] 1 unread mention\\n *[other] {$unreadCount} unread mentions\\n }\\nDIALTONE_TYPING_TEXT = Typing\\n\\nDIALTONE_ATTACHMENT_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL = Click to open\\nDIALTONE_ATTACHMENT_CAROUSEL_PROGRESS_BAR_ARIA_LABEL = Uploading\\nDIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL = Previous\\nDIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL = Next\\n\\nDIALTONE_CALLBAR_BUTTON_WITH_DROPDOWN_ARROW_BUTTON_ARIA_LABEL = Open dropdown\\nDIALTONE_CALLBAR_BUTTON_WITH_POPOVER_ARROW_BUTTON_ARIA_LABEL = Open popover\\n\\nDIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL = Open menu\\n\\nDIALTONE_DATEPICKER_PREVIOUS_MONTH = Previous month\\nDIALTONE_DATEPICKER_NEXT_MONTH = Next month\\nDIALTONE_DATEPICKER_PREVIOUS_YEAR = Previous year\\nDIALTONE_DATEPICKER_NEXT_YEAR = Next year\\nDIALTONE_DATEPICKER_SELECT_DAY = Select day\\nDIALTONE_DATEPICKER_CHANGE_TO = Change to\\n\\nDIALTONE_EDITOR_CONFIRM_SET_LINK_BUTTON =\\n .title = Confirm\\n .aria-label = Confirm set link\\nDIALTONE_EDITOR_REMOVE_LINK_BUTTON =\\n .title = Remove\\n .aria-label = Remove link\\nDIALTONE_EDITOR_CANCEL_SET_LINK_BUTTON =\\n .title = Cancel\\n .aria-label = Cancel set link\\n\\nDIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL = Quick reply\\nDIALTONE_EDITOR_BOLD_BUTTON_LABEL = Bold\\nDIALTONE_EDITOR_ITALICS_BUTTON_LABEL = Italics\\nDIALTONE_EDITOR_UNDERLINE_BUTTON_LABEL = Underline\\nDIALTONE_EDITOR_STRIKE_BUTTON_LABEL = Strike\\nDIALTONE_EDITOR_ALIGN_LEFT_BUTTON_LABEL = Align Left\\nDIALTONE_EDITOR_ALIGN_CENTER_BUTTON_LABEL = Align Center\\nDIALTONE_EDITOR_ALIGN_RIGHT_BUTTON_LABEL = Align Right\\nDIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL = Align Justify\\nDIALTONE_EDITOR_BULLET_LIST_BUTTON_LABEL = Bullet List\\nDIALTONE_EDITOR_ORDERED_LIST_BUTTON_LABEL = Ordered List\\nDIALTONE_EDITOR_QUOTE_BUTTON_LABEL = Quote\\nDIALTONE_EDITOR_CODE_BUTTON_LABEL = Code\\nDIALTONE_EDITOR_IMAGE_BUTTON_LABEL = Image\\nDIALTONE_EDITOR_LINK_BUTTON_LABEL = Link\\nDIALTONE_EDITOR_ADD_LINK_BUTTON =\\n .title = Add Link\\n .aria-label = Input field to add link\\n\\nDIALTONE_EMOJI_ROW_REACTION_LABEL = { $names } reacted with { $reaction }\\n\\nDIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL = Add emoji\\nDIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL = No results\\nDIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL = Search results\\nDIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL = Search...\\nDIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL = Change default skin tone\\nDIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL = Most recently used\\nDIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL = Smileys and people\\nDIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL = Nature\\nDIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL = Food\\nDIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL = Activity\\nDIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL = Travel\\nDIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL = Objects\\nDIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL = Symbols\\nDIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL = Flags\\nDIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL = Custom\\n\\nDIALTONE_FEED_ITEM_PILL_ARIA_LABEL = Click to expand\\n\\nDIALTONE_GENERAL_ROW_ACTIVE_VOICE_CHAT_TEXT = Active voice chat\\nDIALTONE_GENERAL_ROW_CALL_BUTTON_TOOLTIP = Call\\nDIALTONE_GENERAL_ROW_DND_TEXT_TOOLTIP = Do not disturb\\n\\nDIALTONE_GROUP_ROW_GROUP_COUNT_TEXT =\\n { $count ->\\n [1] 1 user\\n *[other] {$count} users\\n }\\n\\nDIALTONE_IVR_NODE_MENU_BUTTON_ARIA_LABEL = Open menu\\nDIALTONE_IVR_NODE_PROMPTMENU_ARIA_LABEL = prompt menu node\\nDIALTONE_IVR_NODE_PROMPTCOLLECT_ARIA_LABEL = prompt collect node\\nDIALTONE_IVR_NODE_PROMPTPLAY_ARIA_LABEL = prompt play node\\nDIALTONE_IVR_NODE_GOTOEXPERT_ARIA_LABEL = go to expert node\\nDIALTONE_IVR_NODE_BRANCH_ARIA_LABEL = branch node\\nDIALTONE_IVR_NODE_GOTO_ARIA_LABEL = go to node\\nDIALTONE_IVR_NODE_ASSIGN_ARIA_LABEL = assign node\\nDIALTONE_IVR_NODE_CUSTOMERDATA_ARIA_LABEL = customer data node\\nDIALTONE_IVR_NODE_TRANSFER_ARIA_LABEL = transfer node\\nDIALTONE_IVR_NODE_HANGUP_ARIA_LABEL = hangup node\\n\\nDIALTONE_MESSAGE_INPUT_SEND_BUTTON_ARIA_LABEL = Send\\nDIALTONE_MESSAGE_INPUT_IMAGE_PICKER_BUTTON_ARIA_LABEL = Attach Image\\nDIALTONE_MESSAGE_INPUT_EMOJI_PICKER_BUTTON_ARIA_LABEL = Select Emoji\\nDIALTONE_MESSAGE_INPUT_CANCEL_BUTTON_ARIA_LABEL = Cancel\\nDIALTONE_MESSAGE_INPUT_BOLD_BUTTON_LABEL =\\n .aria-label = Toggle bold on selected text\\n .tooltip-text = Bold\\nDIALTONE_MESSAGE_INPUT_ITALIC_BUTTON_LABEL =\\n .aria-label = Toggle italic on selected text\\n .tooltip-text = Italic\\nDIALTONE_MESSAGE_INPUT_STRIKETHROUGH_BUTTON_LABEL =\\n .aria-label = Toggle strikethrough on selected text\\n .tooltip-text = Strikethrough\\nDIALTONE_MESSAGE_INPUT_BULLET_LIST_BUTTON_LABEL =\\n .aria-label = Create or edit bullet list on selected text\\n .tooltip-text = Bullet list\\nDIALTONE_MESSAGE_INPUT_ORDERED_LIST_BUTTON_LABEL =\\n .aria-label = Create or edit ordered list on selected text\\n .tooltip-text = Ordered list\\nDIALTONE_MESSAGE_INPUT_BLOCK_QUOTE_BUTTON_LABEL =\\n .aria-label = Create or edit block quote on selected text\\n .tooltip-text = Block quote\\nDIALTONE_MESSAGE_INPUT_CODE_BUTTON_LABEL =\\n .aria-label = Create or edit code on selected text\\n .tooltip-text = Code\\nDIALTONE_MESSAGE_INPUT_CODE_BLOCK_BUTTON_LABEL =\\n .aria-label = Create or edit code block on selected text\\n .tooltip-text = Code block\\nDIALTONE_MESSAGE_INPUT_LINK_BUTTON_LABEL =\\n .aria-label = Create or edit link on selected text\\n .tooltip-text = Link\\nDIALTONE_MESSAGE_INPUT_LINK_DIALOG_TITLE = Add a link\\nDIALTONE_MESSAGE_INPUT_LINK_TEXT_LABEL = Text to display (optional)\\nDIALTONE_MESSAGE_INPUT_LINK_LINK_LABEL = Link\\nDIALTONE_MESSAGE_INPUT_LINK_LINK_PLACEHOLDER = e.g. https://www.dialpad.com\\nDIALTONE_MESSAGE_INPUT_LINK_REMOVE_LABEL = Remove\\nDIALTONE_MESSAGE_INPUT_LINK_CANCEL_LABEL = Cancel\\nDIALTONE_MESSAGE_INPUT_LINK_CONFIRM_LABEL = Done\\n\\nDIALTONE_PAGINATION_FIRST_PAGE = First page\\nDIALTONE_PAGINATION_PREVIOUS_PAGE = Previous page\\nDIALTONE_PAGINATION_NEXT_PAGE = Next page\\nDIALTONE_PAGINATION_LAST_PAGE = Last page\\nDIALTONE_PAGINATION_PAGE_NUMBER = Page number {$page}\\n\\nDIALTONE_RICH_TEXT_EDITOR_EDIT_BUTTON_LABEL = Edit\\nDIALTONE_RICH_TEXT_EDITOR_OPEN_LINK_BUTTON_LABEL = Open link\\nDIALTONE_RICH_TEXT_EDITOR_REMOVE_BUTTON_LABEL = Remove\\n\\nDIALTONE_SETTINGS_MENU_DEFAULT_BUTTON_LABEL = Settings\\nDIALTONE_SETTINGS_MENU_UPDATE_BUTTON_LABEL = Update\\n\\nDIALTONE_UNREAD_PILL_MENTIONS_TEXT = Unread mentions\\nDIALTONE_UNREAD_PILL_MESSAGES_TEXT = Unread messages\\n\\n# Storybook only\\nSTORYBOOK_LANGUAGE_ENGLISH = English\\nSTORYBOOK_LANGUAGE_CHINESE = Chinese\\nSTORYBOOK_LANGUAGE_DUTCH = Dutch\\nSTORYBOOK_LANGUAGE_FRENCH = French\\nSTORYBOOK_LANGUAGE_GERMAN = German\\nSTORYBOOK_LANGUAGE_ITALIAN = Italian\\nSTORYBOOK_LANGUAGE_JAPANESE = Japanese\\nSTORYBOOK_LANGUAGE_PORTUGUESE = Portuguese\\nSTORYBOOK_LANGUAGE_RUSSIAN = Russian\\nSTORYBOOK_LANGUAGE_SPANISH = Spanish\\nSTORYBOOK_SET_LANGUAGE = Set language\\n\""],"names":["enUS"],"mappings":"AAAA,MAAeA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
|
|
@@ -112,7 +112,7 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
112
112
|
modalListeners(): {
|
|
113
113
|
click: (event: any) => void;
|
|
114
114
|
keydown: (event: any) => void;
|
|
115
|
-
'after-enter': (
|
|
115
|
+
'after-enter': () => Promise<void>;
|
|
116
116
|
};
|
|
117
117
|
open(): string;
|
|
118
118
|
hasFooterSlot(): boolean;
|
|
@@ -120,8 +120,9 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
120
120
|
closeButtonTitle(): string;
|
|
121
121
|
}, {
|
|
122
122
|
close(): void;
|
|
123
|
-
setFocusAfterTransition(): void
|
|
123
|
+
setFocusAfterTransition(): Promise<void>;
|
|
124
124
|
trapFocus(e: any): void;
|
|
125
|
+
handleModalClick(event: any): void;
|
|
125
126
|
}, {
|
|
126
127
|
data(): {
|
|
127
128
|
i18n: import('../..').DialtoneLocalization;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rich_text_editor.vue.d.ts","sourceRoot":"","sources":["../../../../components/rich_text_editor/rich_text_editor.vue"],"names":[],"mappings":"AAoDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"rich_text_editor.vue.d.ts","sourceRoot":"","sources":["../../../../components/rich_text_editor/rich_text_editor.vue"],"names":[],"mappings":"AAoDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAuiC0B,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emoji_row_constants.d.ts","sourceRoot":"","sources":["../../../../../recipes/conversation_view/emoji_row/emoji_row_constants.js"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"emoji_row_constants.d.ts","sourceRoot":"","sources":["../../../../../recipes/conversation_view/emoji_row/emoji_row_constants.js"],"names":[],"mappings":"AAAA,4CAKE"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
2
|
-
need to be set so the component always includes a close button`)}}},g=["aria-describedby","aria-labelledby"],I=["id"],
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("@dialpad/dialtone-icons/vue3"),_=require("../../common/mixins/modal.cjs"),s=require("./modal-constants.cjs"),a=require("../../common/utils/index.cjs"),r=require("../../common/constants/index.cjs"),f=require("../../common/mixins/sr-only-close-button.cjs"),y=require("../../shared/sr_only_close_button.cjs"),e=require("vue"),b=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),E=require("../lazy-show/lazy-show.cjs"),S=require("../button/button.cjs"),C=require("../notice/notice-constants.cjs"),k={compatConfig:{MODE:3},name:"DtModal",components:{DtLazyShow:E.default,DtButton:S.default,DtIconClose:h.DtIconClose,SrOnlyCloseButton:y.default},mixins:[_.default,f.default],props:{closeButtonProps:{type:Object,required:!0,validator:t=>!!t.ariaLabel},copy:{type:String,default:""},describedById:{type:String,default:""},labelledById:{type:String,default:function(){return a.getUniqueString()}},show:{type:Boolean,default:!1},title:{type:String,default:""},bannerTitle:{type:String,default:""},kind:{type:String,default:"default",validator:t=>Object.keys(s.MODAL_KIND_MODIFIERS).includes(t)},size:{type:String,default:"default",validator:t=>Object.keys(s.MODAL_SIZE_MODIFIERS).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 C.NOTICE_KINDS.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:["click","keydown","update:show"],data(){return{MODAL_KIND_MODIFIERS:s.MODAL_KIND_MODIFIERS,MODAL_SIZE_MODIFIERS:s.MODAL_SIZE_MODIFIERS,MODAL_BANNER_KINDS:s.MODAL_BANNER_KINDS,EVENT_KEYNAMES:r.EVENT_KEYNAMES,hasSlotContent:a.hasSlotContent}},computed:{modalListeners(){return{click:t=>{this.closeOnClick&&t.target===t.currentTarget?this.close():this.show&&t.target!==t.currentTarget&&this.handleModalClick(t),this.$emit("click",t)},keydown:t=>{switch(t.code){case r.EVENT_KEYNAMES.esc:case r.EVENT_KEYNAMES.escape:this.close();break;case r.EVENT_KEYNAMES.tab:this.trapFocus(t);break}this.$emit("keydown",t)},"after-enter":async()=>{this.$emit("update:show",!0),await this.setFocusAfterTransition()},focusin:t=>{this.show&&!this.$el.contains(t.target)&&(t.preventDefault(),this.focusFirstElement())}}},open(){return`${!this.show}`},hasFooterSlot(){return!!this.$slots.footer},bannerKindClass(){return s.MODAL_BANNER_KINDS[this.bannerKind]}},watch:{show:{handler(t){var n;t?(this.previousActiveElement=document.activeElement,a.disableRootScrolling(a.returnFirstEl(this.$el).getRootNode().host)):(a.enableRootScrolling(a.returnFirstEl(this.$el).getRootNode().host),(n=this.previousActiveElement)==null||n.focus(),this.previousActiveElement=null)}},$props:{immediate:!0,deep:!0,handler(){this.validateProps()}}},methods:{close(){this.$emit("update:show",!1)},async setFocusAfterTransition(){this.initialFocusElement==="first"?await this.focusFirstElement():this.initialFocusElement.startsWith("#")?await this.focusElementById(this.initialFocusElement):this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},trapFocus(t){this.show&&this.focusTrappedTabPress(t)},handleModalClick(t){const n=t.target,o=this._getFocusableElements();o.length&&!o.includes(n)&&(o.includes(document.activeElement)||this.focusFirstElement())},validateProps(){this.hideClose&&!this.visuallyHiddenClose&&console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props
|
|
2
|
+
need to be set so the component always includes a close button`)}}},g=["aria-describedby","aria-labelledby"],I=["id"],p=["id"],B={key:4,class:"d-modal__footer"};function D(t,n,o,N,i,l){const d=e.resolveComponent("dt-icon-close"),c=e.resolveComponent("dt-button"),u=e.resolveComponent("sr-only-close-button"),m=e.resolveComponent("dt-lazy-show");return e.openBlock(),e.createBlock(m,e.mergeProps({transition:"d-zoom",show:o.show,class:["d-modal",i.MODAL_KIND_MODIFIERS[o.kind],i.MODAL_SIZE_MODIFIERS[o.size],o.modalClass],"data-qa":"dt-modal","aria-hidden":l.open},e.toHandlers(l.modalListeners)),{default:e.withCtx(()=>[o.show&&(i.hasSlotContent(t.$slots.banner)||o.bannerTitle)?(e.openBlock(),e.createElementBlock("div",{key:0,"data-qa":"dt-modal-banner",class:e.normalizeClass(["d-modal__banner",o.bannerClass,l.bannerKindClass])},[e.renderSlot(t.$slots,"banner",{},()=>[e.createTextVNode(e.toDisplayString(o.bannerTitle),1)])],2)):e.createCommentVNode("",!0),e.createVNode(e.Transition,{appear:"",name:"d-modal__dialog"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["d-modal__dialog",{"d-modal__dialog--scrollable":o.fixedHeaderFooter},o.dialogClass]),role:"dialog","aria-modal":"true","aria-describedby":o.describedById,"aria-labelledby":o.labelledById},[i.hasSlotContent(t.$slots.header)?(e.openBlock(),e.createElementBlock("div",{key:0,id:o.labelledById,class:"d-modal__header","data-qa":"dt-modal-title"},[e.renderSlot(t.$slots,"header")],8,I)):(e.openBlock(),e.createElementBlock("h2",{key:1,id:o.labelledById,class:"d-modal__header","data-qa":"dt-modal-title"},e.toDisplayString(o.title),9,p)),i.hasSlotContent(t.$slots.default)?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["d-modal__content",o.contentClass]),"data-qa":"dt-modal-copy"},[e.renderSlot(t.$slots,"default")],2)):(e.openBlock(),e.createElementBlock("p",{key:3,class:e.normalizeClass(["d-modal__content",o.contentClass]),"data-qa":"dt-modal-copy"},e.toDisplayString(o.copy),3)),l.hasFooterSlot?(e.openBlock(),e.createElementBlock("footer",B,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0),o.hideClose?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(c,e.mergeProps({key:5,class:"d-modal__close",circle:"",size:"lg",importance:"clear","aria-label":o.closeButtonProps.ariaLabel},o.closeButtonProps,{onClick:l.close}),{icon:e.withCtx(()=>[e.createVNode(d,{size:"400"})]),_:1},16,["aria-label","onClick"])),t.showVisuallyHiddenClose?(e.openBlock(),e.createBlock(u,{key:6,"visually-hidden-close-label":t.visuallyHiddenCloseLabel,onClose:l.close},null,8,["visually-hidden-close-label","onClose"])):e.createCommentVNode("",!0)],10,g),[[e.vShow,o.show]])]),_:3})]),_:3},16,["show","class","aria-hidden"])}const w=b._(k,[["render",D]]);exports.default=w;
|
|
3
3
|
//# sourceMappingURL=modal.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.cjs","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n <dt-lazy-show\n transition=\"d-zoom\"\n :show=\"show\"\n :class=\"[\n 'd-modal',\n MODAL_KIND_MODIFIERS[kind],\n MODAL_SIZE_MODIFIERS[size],\n modalClass,\n ]\"\n data-qa=\"dt-modal\"\n :aria-hidden=\"open\"\n v-on=\"modalListeners\"\n >\n <div\n v-if=\"show && (hasSlotContent($slots.banner) || bannerTitle)\"\n data-qa=\"dt-modal-banner\"\n :class=\"[\n 'd-modal__banner',\n bannerClass,\n bannerKindClass,\n ]\"\n >\n <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n <slot name=\"banner\">\n {{ bannerTitle }}\n </slot>\n </div>\n <transition\n appear\n name=\"d-modal__dialog\"\n >\n <div\n v-show=\"show\"\n :class=\"[\n 'd-modal__dialog',\n { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n dialogClass,\n ]\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-describedby=\"describedById\"\n :aria-labelledby=\"labelledById\"\n >\n <div\n v-if=\"hasSlotContent($slots.header)\"\n :id=\"labelledById\"\n class=\"d-modal__header\"\n data-qa=\"dt-modal-title\"\n >\n <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n <slot name=\"header\" />\n </div>\n <h2\n v-else\n :id=\"labelledById\"\n class=\"d-modal__header\"\n data-qa=\"dt-modal-title\"\n >\n {{ title }}\n </h2>\n <div\n v-if=\"hasSlotContent($slots.default)\"\n :class=\"[\n 'd-modal__content',\n contentClass,\n ]\"\n data-qa=\"dt-modal-copy\"\n >\n <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n <slot />\n </div>\n <p\n v-else\n :class=\"[\n 'd-modal__content',\n contentClass,\n ]\"\n data-qa=\"dt-modal-copy\"\n >\n {{ copy }}\n </p>\n <footer\n v-if=\"hasFooterSlot\"\n class=\"d-modal__footer\"\n >\n <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n <slot name=\"footer\" />\n </footer>\n <dt-button\n v-if=\"!hideClose\"\n class=\"d-modal__close\"\n circle\n size=\"lg\"\n importance=\"clear\"\n :aria-label=\"closeButtonProps.ariaLabel\"\n v-bind=\"closeButtonProps\"\n @click=\"close\"\n >\n <template #icon>\n <dt-icon-close\n size=\"400\"\n />\n </template>\n </dt-button>\n <sr-only-close-button\n v-if=\"showVisuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n @close=\"close\"\n />\n </div>\n </transition>\n </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport Modal from '@/common/mixins/modal';\nimport {\n MODAL_BANNER_KINDS,\n MODAL_KIND_MODIFIERS,\n MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { returnFirstEl, getUniqueString, hasSlotContent, disableRootScrolling, enableRootScrolling } 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 compatConfig: { MODE: 3 },\n name: 'DtModal',\n\n components: {\n DtLazyShow,\n DtButton,\n DtIconClose,\n SrOnlyCloseButton,\n },\n\n mixins: [Modal, SrOnlyCloseButtonMixin],\n\n props: {\n /**\n * A set of props to be passed into the modal's close button.\n * Requires an 'ariaLabel' property.\n */\n closeButtonProps: {\n type: Object,\n required: true,\n validator: (props) => {\n return !!props.ariaLabel;\n },\n },\n\n /**\n * Body text to display as the modal's main content.\n */\n copy: {\n type: String,\n default: '',\n },\n\n /**\n * Id to use for the dialog's aria-describedby.\n * Recommended only if the dialog content itself isn't enough to give full context,\n * as screen readers should recite the dialog contents by default before any aria-description.\n */\n describedById: {\n type: String,\n default: '',\n },\n\n /**\n * Id to use for the dialog's aria-labelledby.\n */\n labelledById: {\n type: String,\n default: function () { return getUniqueString(); },\n },\n\n /**\n * Whether the modal should be shown.\n * Parent component can sync on this value to control the modal's visibility.\n * @values true, false\n */\n show: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Title text to display in the modal header.\n */\n title: {\n type: String,\n default: '',\n },\n\n /**\n * Title text to display in the modal banner.\n */\n bannerTitle: {\n type: String,\n default: '',\n },\n\n /**\n * The theme of the modal. kind - default or danger,\n * @values default, danger\n */\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n },\n\n /**\n * The size of the modal. size - default or full,\n * @values default, full\n */\n size: {\n type: String,\n default: 'default',\n validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n },\n\n /**\n * Additional class name for the root modal element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n modalClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Additional class name for the dialog element within the modal.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n dialogClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Additional class name for the content element within the modal.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n contentClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Sets the color of the banner.\n * @values base, error, info, success, warning\n */\n bannerKind: {\n type: String,\n default: 'warning',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n\n /**\n * Additional class name for the banner element within the modal.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n bannerClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Hides the close button on the modal\n * @values true, false\n */\n hideClose: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Whether the modal will close when you click outside of the dialog on the overlay.\n * @values true, false\n */\n closeOnClick: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n * @values true, false\n */\n fixedHeaderFooter: {\n type: Boolean,\n default: true,\n },\n\n /**\n * The element that is focused when the modal is opened. This can be an\n * HTMLElement within the modal, a string starting with '#' which will\n * find the element by ID. 'first' which will automatically focus\n * the first element, or 'dialog' which will focus the dialog window itself.\n * If the dialog is modal this prop cannot be 'none'.\n */\n initialFocusElement: {\n type: [String, HTMLElement],\n default: 'first',\n validator: initialFocusElement => {\n return initialFocusElement === 'first' ||\n (initialFocusElement instanceof HTMLElement) ||\n initialFocusElement.startsWith('#');\n },\n },\n },\n\n emits: [\n /**\n * Native button click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n\n /**\n * Native keydown event\n *\n * @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n\n /**\n * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n *\n * @event update:show\n * @type {Boolean}\n */\n 'update:show',\n ],\n\n data () {\n return {\n MODAL_KIND_MODIFIERS,\n MODAL_SIZE_MODIFIERS,\n MODAL_BANNER_KINDS,\n EVENT_KEYNAMES,\n hasSlotContent,\n };\n },\n\n computed: {\n modalListeners () {\n return {\n click: event => {\n if (!this.closeOnClick) return;\n (event.target === event.currentTarget) && this.close();\n this.$emit('click', event);\n },\n\n keydown: event => {\n switch (event.code) {\n case EVENT_KEYNAMES.esc:\n case EVENT_KEYNAMES.escape:\n this.close();\n break;\n case EVENT_KEYNAMES.tab:\n this.trapFocus(event);\n break;\n }\n this.$emit('keydown', event);\n },\n\n 'after-enter': event => {\n this.$emit('update:show', true);\n (event.target === event.currentTarget) && this.setFocusAfterTransition();\n },\n };\n },\n\n open () {\n return `${!this.show}`;\n },\n\n hasFooterSlot () {\n return !!this.$slots.footer;\n },\n\n bannerKindClass () {\n return MODAL_BANNER_KINDS[this.bannerKind];\n },\n },\n\n watch: {\n show: {\n 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 disableRootScrolling(returnFirstEl(this.$el).getRootNode().host);\n } else {\n enableRootScrolling(returnFirstEl(this.$el).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 $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":["_sfc_main","DtLazyShow","DtButton","DtIconClose","SrOnlyCloseButton","Modal","SrOnlyCloseButtonMixin","props","getUniqueString","k","MODAL_KIND_MODIFIERS","s","MODAL_SIZE_MODIFIERS","kind","NOTICE_KINDS","initialFocusElement","MODAL_BANNER_KINDS","EVENT_KEYNAMES","hasSlotContent","event","isShowing","disableRootScrolling","returnFirstEl","enableRootScrolling","_a","e","_hoisted_1","_hoisted_2","_hoisted_3","_openBlock","_createBlock","_component_dt_lazy_show","_mergeProps","$props","$data","$options","_toHandlers","_withCtx","_ctx","_createElementBlock","_normalizeClass","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","_Transition","_createElementVNode","_hoisted_4","_component_dt_button","_component_dt_icon_close","_component_sr_only_close_button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"modal.cjs","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n <dt-lazy-show\n transition=\"d-zoom\"\n :show=\"show\"\n :class=\"[\n 'd-modal',\n MODAL_KIND_MODIFIERS[kind],\n MODAL_SIZE_MODIFIERS[size],\n modalClass,\n ]\"\n data-qa=\"dt-modal\"\n :aria-hidden=\"open\"\n v-on=\"modalListeners\"\n >\n <div\n v-if=\"show && (hasSlotContent($slots.banner) || bannerTitle)\"\n data-qa=\"dt-modal-banner\"\n :class=\"[\n 'd-modal__banner',\n bannerClass,\n bannerKindClass,\n ]\"\n >\n <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n <slot name=\"banner\">\n {{ bannerTitle }}\n </slot>\n </div>\n <transition\n appear\n name=\"d-modal__dialog\"\n >\n <div\n v-show=\"show\"\n :class=\"[\n 'd-modal__dialog',\n { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n dialogClass,\n ]\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-describedby=\"describedById\"\n :aria-labelledby=\"labelledById\"\n >\n <div\n v-if=\"hasSlotContent($slots.header)\"\n :id=\"labelledById\"\n class=\"d-modal__header\"\n data-qa=\"dt-modal-title\"\n >\n <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n <slot name=\"header\" />\n </div>\n <h2\n v-else\n :id=\"labelledById\"\n class=\"d-modal__header\"\n data-qa=\"dt-modal-title\"\n >\n {{ title }}\n </h2>\n <div\n v-if=\"hasSlotContent($slots.default)\"\n :class=\"[\n 'd-modal__content',\n contentClass,\n ]\"\n data-qa=\"dt-modal-copy\"\n >\n <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n <slot />\n </div>\n <p\n v-else\n :class=\"[\n 'd-modal__content',\n contentClass,\n ]\"\n data-qa=\"dt-modal-copy\"\n >\n {{ copy }}\n </p>\n <footer\n v-if=\"hasFooterSlot\"\n class=\"d-modal__footer\"\n >\n <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n <slot name=\"footer\" />\n </footer>\n <dt-button\n v-if=\"!hideClose\"\n class=\"d-modal__close\"\n circle\n size=\"lg\"\n importance=\"clear\"\n :aria-label=\"closeButtonProps.ariaLabel\"\n v-bind=\"closeButtonProps\"\n @click=\"close\"\n >\n <template #icon>\n <dt-icon-close\n size=\"400\"\n />\n </template>\n </dt-button>\n <sr-only-close-button\n v-if=\"showVisuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n @close=\"close\"\n />\n </div>\n </transition>\n </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport Modal from '@/common/mixins/modal';\nimport {\n MODAL_BANNER_KINDS,\n MODAL_KIND_MODIFIERS,\n MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { returnFirstEl, getUniqueString, hasSlotContent, disableRootScrolling, enableRootScrolling } 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 compatConfig: { MODE: 3 },\n name: 'DtModal',\n\n components: {\n DtLazyShow,\n DtButton,\n DtIconClose,\n SrOnlyCloseButton,\n },\n\n mixins: [Modal, SrOnlyCloseButtonMixin],\n\n props: {\n /**\n * A set of props to be passed into the modal's close button.\n * Requires an 'ariaLabel' property.\n */\n closeButtonProps: {\n type: Object,\n required: true,\n validator: (props) => {\n return !!props.ariaLabel;\n },\n },\n\n /**\n * Body text to display as the modal's main content.\n */\n copy: {\n type: String,\n default: '',\n },\n\n /**\n * Id to use for the dialog's aria-describedby.\n * Recommended only if the dialog content itself isn't enough to give full context,\n * as screen readers should recite the dialog contents by default before any aria-description.\n */\n describedById: {\n type: String,\n default: '',\n },\n\n /**\n * Id to use for the dialog's aria-labelledby.\n */\n labelledById: {\n type: String,\n default: function () { return getUniqueString(); },\n },\n\n /**\n * Whether the modal should be shown.\n * Parent component can sync on this value to control the modal's visibility.\n * @values true, false\n */\n show: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Title text to display in the modal header.\n */\n title: {\n type: String,\n default: '',\n },\n\n /**\n * Title text to display in the modal banner.\n */\n bannerTitle: {\n type: String,\n default: '',\n },\n\n /**\n * The theme of the modal. kind - default or danger,\n * @values default, danger\n */\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n },\n\n /**\n * The size of the modal. size - default or full,\n * @values default, full\n */\n size: {\n type: String,\n default: 'default',\n validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n },\n\n /**\n * Additional class name for the root modal element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n modalClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Additional class name for the dialog element within the modal.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n dialogClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Additional class name for the content element within the modal.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n contentClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Sets the color of the banner.\n * @values base, error, info, success, warning\n */\n bannerKind: {\n type: String,\n default: 'warning',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n\n /**\n * Additional class name for the banner element within the modal.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n bannerClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Hides the close button on the modal\n * @values true, false\n */\n hideClose: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Whether the modal will close when you click outside of the dialog on the overlay.\n * @values true, false\n */\n closeOnClick: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n * @values true, false\n */\n fixedHeaderFooter: {\n type: Boolean,\n default: true,\n },\n\n /**\n * The element that is focused when the modal is opened. This can be an\n * HTMLElement within the modal, a string starting with '#' which will\n * find the element by ID. 'first' which will automatically focus\n * the first element, or 'dialog' which will focus the dialog window itself.\n * If the dialog is modal this prop cannot be 'none'.\n */\n initialFocusElement: {\n type: [String, HTMLElement],\n default: 'first',\n validator: initialFocusElement => {\n return initialFocusElement === 'first' ||\n (initialFocusElement instanceof HTMLElement) ||\n initialFocusElement.startsWith('#');\n },\n },\n },\n\n emits: [\n /**\n * Native button click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n\n /**\n * Native keydown event\n *\n * @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n\n /**\n * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n *\n * @event update:show\n * @type {Boolean}\n */\n 'update:show',\n ],\n\n data () {\n return {\n MODAL_KIND_MODIFIERS,\n MODAL_SIZE_MODIFIERS,\n MODAL_BANNER_KINDS,\n EVENT_KEYNAMES,\n hasSlotContent,\n };\n },\n\n computed: {\n modalListeners () {\n return {\n click: event => {\n // 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 if (this.show && !this.$el.contains(event.target)) {\n event.preventDefault();\n this.focusFirstElement();\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\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 disableRootScrolling(returnFirstEl(this.$el).getRootNode().host);\n } else {\n enableRootScrolling(returnFirstEl(this.$el).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 $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 async setFocusAfterTransition () {\n if (this.initialFocusElement === 'first') {\n await this.focusFirstElement();\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 this.focusTrappedTabPress(e);\n }\n },\n\n handleModalClick (event) {\n // Ensure focus stays within modal when clicking inside it\n const clickedElement = event.target;\n const focusableElements = this._getFocusableElements();\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();\n }\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":["_sfc_main","DtLazyShow","DtButton","DtIconClose","SrOnlyCloseButton","Modal","SrOnlyCloseButtonMixin","props","getUniqueString","k","MODAL_KIND_MODIFIERS","s","MODAL_SIZE_MODIFIERS","kind","NOTICE_KINDS","initialFocusElement","MODAL_BANNER_KINDS","EVENT_KEYNAMES","hasSlotContent","event","isShowing","disableRootScrolling","returnFirstEl","enableRootScrolling","_a","e","clickedElement","focusableElements","_hoisted_1","_hoisted_2","_hoisted_3","_openBlock","_createBlock","_component_dt_lazy_show","_mergeProps","$props","$data","$options","_toHandlers","_withCtx","_ctx","_createElementBlock","_normalizeClass","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","_Transition","_createElementVNode","_hoisted_4","_component_dt_button","_component_dt_icon_close","_component_sr_only_close_button"],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { DtIconClose as I } from "@dialpad/dialtone-icons/vue3";
|
|
2
|
-
import
|
|
2
|
+
import O from "../../common/mixins/modal.js";
|
|
3
3
|
import { MODAL_KIND_MODIFIERS as y, MODAL_SIZE_MODIFIERS as _, MODAL_BANNER_KINDS as b } from "./modal-constants.js";
|
|
4
|
-
import { getUniqueString as
|
|
5
|
-
import { EVENT_KEYNAMES as
|
|
4
|
+
import { getUniqueString as v, hasSlotContent as B, disableRootScrolling as D, returnFirstEl as C, enableRootScrolling as F } from "../../common/utils/index.js";
|
|
5
|
+
import { EVENT_KEYNAMES as n } from "../../common/constants/index.js";
|
|
6
6
|
import M from "../../common/mixins/sr-only-close-button.js";
|
|
7
7
|
import A from "../../shared/sr_only_close_button.js";
|
|
8
|
-
import { resolveComponent as
|
|
8
|
+
import { resolveComponent as d, openBlock as l, createBlock as m, mergeProps as g, toHandlers as T, withCtx as h, createElementBlock as a, normalizeClass as r, renderSlot as c, createTextVNode as L, toDisplayString as f, createCommentVNode as u, createVNode as S, Transition as N, withDirectives as H, createElementVNode as z, vShow as K } from "vue";
|
|
9
9
|
import { _ as R } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
|
|
10
10
|
import q from "../lazy-show/lazy-show.js";
|
|
11
11
|
import j from "../button/button.js";
|
|
@@ -19,7 +19,7 @@ const V = {
|
|
|
19
19
|
DtIconClose: I,
|
|
20
20
|
SrOnlyCloseButton: A
|
|
21
21
|
},
|
|
22
|
-
mixins: [
|
|
22
|
+
mixins: [O, M],
|
|
23
23
|
props: {
|
|
24
24
|
/**
|
|
25
25
|
* A set of props to be passed into the modal's close button.
|
|
@@ -52,7 +52,7 @@ const V = {
|
|
|
52
52
|
labelledById: {
|
|
53
53
|
type: String,
|
|
54
54
|
default: function() {
|
|
55
|
-
return
|
|
55
|
+
return v();
|
|
56
56
|
}
|
|
57
57
|
},
|
|
58
58
|
/**
|
|
@@ -209,7 +209,7 @@ const V = {
|
|
|
209
209
|
MODAL_KIND_MODIFIERS: y,
|
|
210
210
|
MODAL_SIZE_MODIFIERS: _,
|
|
211
211
|
MODAL_BANNER_KINDS: b,
|
|
212
|
-
EVENT_KEYNAMES:
|
|
212
|
+
EVENT_KEYNAMES: n,
|
|
213
213
|
hasSlotContent: B
|
|
214
214
|
};
|
|
215
215
|
},
|
|
@@ -217,22 +217,25 @@ const V = {
|
|
|
217
217
|
modalListeners() {
|
|
218
218
|
return {
|
|
219
219
|
click: (e) => {
|
|
220
|
-
this.closeOnClick &&
|
|
220
|
+
this.closeOnClick && e.target === e.currentTarget ? this.close() : this.show && e.target !== e.currentTarget && this.handleModalClick(e), this.$emit("click", e);
|
|
221
221
|
},
|
|
222
222
|
keydown: (e) => {
|
|
223
223
|
switch (e.code) {
|
|
224
|
-
case
|
|
225
|
-
case
|
|
224
|
+
case n.esc:
|
|
225
|
+
case n.escape:
|
|
226
226
|
this.close();
|
|
227
227
|
break;
|
|
228
|
-
case
|
|
228
|
+
case n.tab:
|
|
229
229
|
this.trapFocus(e);
|
|
230
230
|
break;
|
|
231
231
|
}
|
|
232
232
|
this.$emit("keydown", e);
|
|
233
233
|
},
|
|
234
|
-
"after-enter": (
|
|
235
|
-
this.$emit("update:show", !0),
|
|
234
|
+
"after-enter": async () => {
|
|
235
|
+
this.$emit("update:show", !0), await this.setFocusAfterTransition();
|
|
236
|
+
},
|
|
237
|
+
focusin: (e) => {
|
|
238
|
+
this.show && !this.$el.contains(e.target) && (e.preventDefault(), this.focusFirstElement());
|
|
236
239
|
}
|
|
237
240
|
};
|
|
238
241
|
},
|
|
@@ -249,8 +252,8 @@ const V = {
|
|
|
249
252
|
watch: {
|
|
250
253
|
show: {
|
|
251
254
|
handler(e) {
|
|
252
|
-
var
|
|
253
|
-
e ? (this.previousActiveElement = document.activeElement, D(C(this.$el).getRootNode().host)) : (F(C(this.$el).getRootNode().host), (
|
|
255
|
+
var s;
|
|
256
|
+
e ? (this.previousActiveElement = document.activeElement, D(C(this.$el).getRootNode().host)) : (F(C(this.$el).getRootNode().host), (s = this.previousActiveElement) == null || s.focus(), this.previousActiveElement = null);
|
|
254
257
|
}
|
|
255
258
|
},
|
|
256
259
|
$props: {
|
|
@@ -265,12 +268,16 @@ const V = {
|
|
|
265
268
|
close() {
|
|
266
269
|
this.$emit("update:show", !1);
|
|
267
270
|
},
|
|
268
|
-
setFocusAfterTransition() {
|
|
269
|
-
this.initialFocusElement === "first" ? this.focusFirstElement() : this.initialFocusElement.startsWith("#") ? this.focusElementById(this.initialFocusElement) : this.initialFocusElement instanceof HTMLElement && this.initialFocusElement.focus();
|
|
271
|
+
async setFocusAfterTransition() {
|
|
272
|
+
this.initialFocusElement === "first" ? await this.focusFirstElement() : this.initialFocusElement.startsWith("#") ? await this.focusElementById(this.initialFocusElement) : this.initialFocusElement instanceof HTMLElement && this.initialFocusElement.focus();
|
|
270
273
|
},
|
|
271
274
|
trapFocus(e) {
|
|
272
275
|
this.show && this.focusTrappedTabPress(e);
|
|
273
276
|
},
|
|
277
|
+
handleModalClick(e) {
|
|
278
|
+
const s = e.target, t = this._getFocusableElements();
|
|
279
|
+
t.length && !t.includes(s) && (t.includes(document.activeElement) || this.focusFirstElement());
|
|
280
|
+
},
|
|
274
281
|
validateProps() {
|
|
275
282
|
this.hideClose && !this.visuallyHiddenClose && console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props
|
|
276
283
|
need to be set so the component always includes a close button`);
|
|
@@ -280,41 +287,41 @@ const V = {
|
|
|
280
287
|
key: 4,
|
|
281
288
|
class: "d-modal__footer"
|
|
282
289
|
};
|
|
283
|
-
function x(e,
|
|
284
|
-
const
|
|
285
|
-
return
|
|
290
|
+
function x(e, s, t, G, i, o) {
|
|
291
|
+
const E = d("dt-icon-close"), p = d("dt-button"), w = d("sr-only-close-button"), k = d("dt-lazy-show");
|
|
292
|
+
return l(), m(k, g({
|
|
286
293
|
transition: "d-zoom",
|
|
287
294
|
show: t.show,
|
|
288
295
|
class: [
|
|
289
296
|
"d-modal",
|
|
290
|
-
|
|
291
|
-
|
|
297
|
+
i.MODAL_KIND_MODIFIERS[t.kind],
|
|
298
|
+
i.MODAL_SIZE_MODIFIERS[t.size],
|
|
292
299
|
t.modalClass
|
|
293
300
|
],
|
|
294
301
|
"data-qa": "dt-modal",
|
|
295
|
-
"aria-hidden":
|
|
296
|
-
}, T(
|
|
302
|
+
"aria-hidden": o.open
|
|
303
|
+
}, T(o.modalListeners)), {
|
|
297
304
|
default: h(() => [
|
|
298
|
-
t.show && (
|
|
305
|
+
t.show && (i.hasSlotContent(e.$slots.banner) || t.bannerTitle) ? (l(), a("div", {
|
|
299
306
|
key: 0,
|
|
300
307
|
"data-qa": "dt-modal-banner",
|
|
301
|
-
class:
|
|
308
|
+
class: r([
|
|
302
309
|
"d-modal__banner",
|
|
303
310
|
t.bannerClass,
|
|
304
|
-
|
|
311
|
+
o.bannerKindClass
|
|
305
312
|
])
|
|
306
313
|
}, [
|
|
307
|
-
|
|
314
|
+
c(e.$slots, "banner", {}, () => [
|
|
308
315
|
L(f(t.bannerTitle), 1)
|
|
309
316
|
])
|
|
310
|
-
], 2)) :
|
|
311
|
-
|
|
317
|
+
], 2)) : u("", !0),
|
|
318
|
+
S(N, {
|
|
312
319
|
appear: "",
|
|
313
320
|
name: "d-modal__dialog"
|
|
314
321
|
}, {
|
|
315
322
|
default: h(() => [
|
|
316
323
|
H(z("div", {
|
|
317
|
-
class:
|
|
324
|
+
class: r([
|
|
318
325
|
"d-modal__dialog",
|
|
319
326
|
{ "d-modal__dialog--scrollable": t.fixedHeaderFooter },
|
|
320
327
|
t.dialogClass
|
|
@@ -324,57 +331,57 @@ function x(e, u, t, G, s, l) {
|
|
|
324
331
|
"aria-describedby": t.describedById,
|
|
325
332
|
"aria-labelledby": t.labelledById
|
|
326
333
|
}, [
|
|
327
|
-
|
|
334
|
+
i.hasSlotContent(e.$slots.header) ? (l(), a("div", {
|
|
328
335
|
key: 0,
|
|
329
336
|
id: t.labelledById,
|
|
330
337
|
class: "d-modal__header",
|
|
331
338
|
"data-qa": "dt-modal-title"
|
|
332
339
|
}, [
|
|
333
|
-
|
|
334
|
-
], 8, Z)) : (
|
|
340
|
+
c(e.$slots, "header")
|
|
341
|
+
], 8, Z)) : (l(), a("h2", {
|
|
335
342
|
key: 1,
|
|
336
343
|
id: t.labelledById,
|
|
337
344
|
class: "d-modal__header",
|
|
338
345
|
"data-qa": "dt-modal-title"
|
|
339
346
|
}, f(t.title), 9, U)),
|
|
340
|
-
|
|
347
|
+
i.hasSlotContent(e.$slots.default) ? (l(), a("div", {
|
|
341
348
|
key: 2,
|
|
342
|
-
class:
|
|
349
|
+
class: r([
|
|
343
350
|
"d-modal__content",
|
|
344
351
|
t.contentClass
|
|
345
352
|
]),
|
|
346
353
|
"data-qa": "dt-modal-copy"
|
|
347
354
|
}, [
|
|
348
|
-
|
|
349
|
-
], 2)) : (
|
|
355
|
+
c(e.$slots, "default")
|
|
356
|
+
], 2)) : (l(), a("p", {
|
|
350
357
|
key: 3,
|
|
351
|
-
class:
|
|
358
|
+
class: r([
|
|
352
359
|
"d-modal__content",
|
|
353
360
|
t.contentClass
|
|
354
361
|
]),
|
|
355
362
|
"data-qa": "dt-modal-copy"
|
|
356
363
|
}, f(t.copy), 3)),
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
])) :
|
|
360
|
-
t.hideClose ?
|
|
364
|
+
o.hasFooterSlot ? (l(), a("footer", Y, [
|
|
365
|
+
c(e.$slots, "footer")
|
|
366
|
+
])) : u("", !0),
|
|
367
|
+
t.hideClose ? u("", !0) : (l(), m(p, g({
|
|
361
368
|
key: 5,
|
|
362
369
|
class: "d-modal__close",
|
|
363
370
|
circle: "",
|
|
364
371
|
size: "lg",
|
|
365
372
|
importance: "clear",
|
|
366
373
|
"aria-label": t.closeButtonProps.ariaLabel
|
|
367
|
-
}, t.closeButtonProps, { onClick:
|
|
374
|
+
}, t.closeButtonProps, { onClick: o.close }), {
|
|
368
375
|
icon: h(() => [
|
|
369
|
-
|
|
376
|
+
S(E, { size: "400" })
|
|
370
377
|
]),
|
|
371
378
|
_: 1
|
|
372
379
|
}, 16, ["aria-label", "onClick"])),
|
|
373
|
-
e.showVisuallyHiddenClose ? (
|
|
380
|
+
e.showVisuallyHiddenClose ? (l(), m(w, {
|
|
374
381
|
key: 6,
|
|
375
382
|
"visually-hidden-close-label": e.visuallyHiddenCloseLabel,
|
|
376
|
-
onClose:
|
|
377
|
-
}, null, 8, ["visually-hidden-close-label", "onClose"])) :
|
|
383
|
+
onClose: o.close
|
|
384
|
+
}, null, 8, ["visually-hidden-close-label", "onClose"])) : u("", !0)
|
|
378
385
|
], 10, W), [
|
|
379
386
|
[K, t.show]
|
|
380
387
|
])
|