@dialpad/dialtone-vue 3.223.0-next.3 → 3.223.0-next.4

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.
Files changed (387) hide show
  1. package/dist/Combobox-CYEmi3dv.cjs +3 -0
  2. package/dist/Combobox-CYEmi3dv.cjs.map +1 -0
  3. package/dist/{Combobox-By01ETlj.js → Combobox-D8nQeBIf.js} +33 -32
  4. package/dist/Combobox-D8nQeBIf.js.map +1 -0
  5. package/dist/TextList-B6XFfQfD.js +88 -0
  6. package/dist/TextList-B6XFfQfD.js.map +1 -0
  7. package/dist/TextList-Dd-ROFiI.cjs +2 -0
  8. package/dist/TextList-Dd-ROFiI.cjs.map +1 -0
  9. package/dist/TextListItem-DIlrCkaM.cjs +2 -0
  10. package/dist/TextListItem-DIlrCkaM.cjs.map +1 -0
  11. package/dist/TextListItem-ImUi_FWh.js +62 -0
  12. package/dist/TextListItem-ImUi_FWh.js.map +1 -0
  13. package/dist/{Toast-CHbVmbBg.js → Toast-BIHkIpZP.js} +95 -94
  14. package/dist/Toast-BIHkIpZP.js.map +1 -0
  15. package/dist/Toast-D8ARDEgT.cjs +2 -0
  16. package/dist/Toast-D8ARDEgT.cjs.map +1 -0
  17. package/dist/{attachment_carousel-BFIAXWOZ.js → attachment_carousel-CyiexPBk.js} +1 -1
  18. package/dist/{attachment_carousel-BFIAXWOZ.js.map → attachment_carousel-CyiexPBk.js.map} +1 -1
  19. package/dist/{attachment_carousel-BJxqNJ5T.cjs → attachment_carousel-DJqILY7f.cjs} +1 -1
  20. package/dist/{attachment_carousel-BJxqNJ5T.cjs.map → attachment_carousel-DJqILY7f.cjs.map} +1 -1
  21. package/dist/common/mixins/input.d.ts +4 -4
  22. package/dist/common/mixins/input_group.d.ts +2 -2
  23. package/dist/common/sr_only_close_button.vue.d.ts +30 -30
  24. package/dist/common/sr_only_close_button.vue.d.ts.map +1 -1
  25. package/dist/common/validators/index.cjs +1 -1
  26. package/dist/common/validators/index.cjs.map +1 -1
  27. package/dist/common/validators/index.d.ts +2 -0
  28. package/dist/common/validators/index.d.ts.map +1 -1
  29. package/dist/common/validators/index.js +9 -2
  30. package/dist/common/validators/index.js.map +1 -1
  31. package/dist/component-documentation.json +1 -1
  32. package/dist/components/Avatar/Avatar.vue.d.ts +10 -10
  33. package/dist/components/Avatar/Avatar.vue.d.ts.map +1 -1
  34. package/dist/components/Badge/Badge.vue.d.ts +13 -13
  35. package/dist/components/Banner/Banner.vue.d.ts +106 -106
  36. package/dist/components/Banner/Banner.vue.d.ts.map +1 -1
  37. package/dist/components/Box/Box.vue.d.ts +18 -0
  38. package/dist/components/Box/Box.vue.d.ts.map +1 -1
  39. package/dist/components/Box/BoxConstants.d.ts +4 -0
  40. package/dist/components/Box/BoxConstants.d.ts.map +1 -1
  41. package/dist/components/Box/Validators.d.ts +4 -0
  42. package/dist/components/Box/Validators.d.ts.map +1 -1
  43. package/dist/components/Box/index.d.ts +1 -1
  44. package/dist/components/Breadcrumbs/BreadcrumbItem.vue.d.ts +1 -0
  45. package/dist/components/Breadcrumbs/BreadcrumbItem.vue.d.ts.map +1 -1
  46. package/dist/components/Breadcrumbs/Breadcrumbs.vue.d.ts +3 -2
  47. package/dist/components/Button/Button.vue.d.ts +25 -25
  48. package/dist/components/Button/Button.vue.d.ts.map +1 -1
  49. package/dist/components/Card/Card.vue.d.ts +6 -6
  50. package/dist/components/Checkbox/Checkbox.vue.d.ts +26 -26
  51. package/dist/components/Checkbox/Checkbox.vue.d.ts.map +1 -1
  52. package/dist/components/CheckboxGroup/CheckboxGroup.vue.d.ts +46 -46
  53. package/dist/components/CheckboxGroup/CheckboxGroup.vue.d.ts.map +1 -1
  54. package/dist/components/Chip/Chip.vue.d.ts +40 -40
  55. package/dist/components/Chip/Chip.vue.d.ts.map +1 -1
  56. package/dist/components/Codeblock/Codeblock.vue.d.ts +2 -2
  57. package/dist/components/Collapsible/Collapsible.vue.d.ts +39 -39
  58. package/dist/components/Collapsible/Collapsible.vue.d.ts.map +1 -1
  59. package/dist/components/Combobox/Combobox.vue.d.ts +66 -66
  60. package/dist/components/Combobox/Combobox.vue.d.ts.map +1 -1
  61. package/dist/components/Combobox/ComboboxEmptyList.vue.d.ts +29 -29
  62. package/dist/components/Combobox/ComboboxEmptyList.vue.d.ts.map +1 -1
  63. package/dist/components/Combobox/ComboboxLoadingList.vue.d.ts +35 -35
  64. package/dist/components/Combobox/ComboboxLoadingList.vue.d.ts.map +1 -1
  65. package/dist/components/ComboboxWithPopover/ComboboxWithPopover.vue.d.ts +216 -216
  66. package/dist/components/ComboboxWithPopover/ComboboxWithPopover.vue.d.ts.map +1 -1
  67. package/dist/components/DescriptionList/DescriptionList.vue.d.ts +4 -4
  68. package/dist/components/Dropdown/Dropdown.vue.d.ts +82 -82
  69. package/dist/components/Dropdown/Dropdown.vue.d.ts.map +1 -1
  70. package/dist/components/Emoji/Emoji.vue.d.ts +17 -17
  71. package/dist/components/EmojiPicker/EmojiPicker.vue.d.ts +37 -37
  72. package/dist/components/EmojiPicker/EmojiPicker.vue.d.ts.map +1 -1
  73. package/dist/components/EmojiPicker/Modules/EmojiSearch.vue.d.ts +37 -37
  74. package/dist/components/EmojiPicker/Modules/EmojiSearch.vue.d.ts.map +1 -1
  75. package/dist/components/EmojiTextWrapper/EmojiTextWrapper.vue.d.ts +24 -24
  76. package/dist/components/EmojiTextWrapper/EmojiTextWrapper.vue.d.ts.map +1 -1
  77. package/dist/components/EmptyState/EmptyState.vue.d.ts.map +1 -1
  78. package/dist/components/FilterPill/FilterPill.vue.d.ts +308 -308
  79. package/dist/components/FilterPill/FilterPill.vue.d.ts.map +1 -1
  80. package/dist/components/Hovercard/Hovercard.vue.d.ts +156 -156
  81. package/dist/components/Hovercard/Hovercard.vue.d.ts.map +1 -1
  82. package/dist/components/Icon/Icon.vue.d.ts +7 -7
  83. package/dist/components/ImageViewer/ImageViewer.vue.d.ts +60 -60
  84. package/dist/components/ImageViewer/ImageViewer.vue.d.ts.map +1 -1
  85. package/dist/components/Input/Input.vue.d.ts +37 -37
  86. package/dist/components/Input/Input.vue.d.ts.map +1 -1
  87. package/dist/components/InputGroup/InputGroup.vue.d.ts +46 -46
  88. package/dist/components/InputGroup/InputGroup.vue.d.ts.map +1 -1
  89. package/dist/components/ItemLayout/ItemLayout.vue.d.ts +20 -20
  90. package/dist/components/KeyboardShortcut/KeyboardShortcut.vue.d.ts +80 -80
  91. package/dist/components/KeyboardShortcut/KeyboardShortcut.vue.d.ts.map +1 -1
  92. package/dist/components/Link/Link.vue.d.ts +1 -0
  93. package/dist/components/Link/LinkConstants.d.ts +3 -0
  94. package/dist/components/Link/LinkConstants.d.ts.map +1 -1
  95. package/dist/components/ListItem/ListItem.vue.d.ts +27 -27
  96. package/dist/components/ListItem/ListItem.vue.d.ts.map +1 -1
  97. package/dist/components/ListItemGroup/ListItemGroup.vue.d.ts +4 -4
  98. package/dist/components/Loader/Loader.vue.d.ts +7 -7
  99. package/dist/components/Modal/Modal.vue.d.ts +79 -85
  100. package/dist/components/Modal/Modal.vue.d.ts.map +1 -1
  101. package/dist/components/Modal/ModalConstants.d.ts +0 -5
  102. package/dist/components/Modal/index.d.ts +1 -1
  103. package/dist/components/Notice/Notice.vue.d.ts +106 -106
  104. package/dist/components/Notice/Notice.vue.d.ts.map +1 -1
  105. package/dist/components/Notice/NoticeAction.vue.d.ts +62 -62
  106. package/dist/components/Notice/NoticeAction.vue.d.ts.map +1 -1
  107. package/dist/components/Notice/NoticeContent.vue.d.ts +4 -4
  108. package/dist/components/Notice/NoticeIcon.vue.d.ts +32 -32
  109. package/dist/components/Notice/NoticeIcon.vue.d.ts.map +1 -1
  110. package/dist/components/Pagination/Pagination.vue.d.ts +40 -40
  111. package/dist/components/Pagination/Pagination.vue.d.ts.map +1 -1
  112. package/dist/components/Popover/Popover.vue.d.ts +78 -78
  113. package/dist/components/Popover/Popover.vue.d.ts.map +1 -1
  114. package/dist/components/Popover/PopoverHeaderFooter.vue.d.ts +34 -34
  115. package/dist/components/Popover/PopoverHeaderFooter.vue.d.ts.map +1 -1
  116. package/dist/components/ProgressCircle/ProgressCircle.vue.d.ts +7 -7
  117. package/dist/components/Prose/Prose.vue.d.ts.map +1 -1
  118. package/dist/components/Radio/Radio.vue.d.ts +26 -26
  119. package/dist/components/Radio/Radio.vue.d.ts.map +1 -1
  120. package/dist/components/RadioGroup/RadioGroup.vue.d.ts +46 -46
  121. package/dist/components/RadioGroup/RadioGroup.vue.d.ts.map +1 -1
  122. package/dist/components/RichTextEditor/Extensions/Channels/ChannelComponent.vue.d.ts +6 -5
  123. package/dist/components/RichTextEditor/Extensions/Channels/ChannelComponent.vue.d.ts.map +1 -1
  124. package/dist/components/RichTextEditor/Extensions/Channels/ChannelSuggestion.vue.d.ts +10 -10
  125. package/dist/components/RichTextEditor/Extensions/Channels/ChannelSuggestion.vue.d.ts.map +1 -1
  126. package/dist/components/RichTextEditor/Extensions/Emoji/EmojiComponent.vue.d.ts +17 -17
  127. package/dist/components/RichTextEditor/Extensions/Emoji/EmojiSuggestion.vue.d.ts +17 -17
  128. package/dist/components/RichTextEditor/Extensions/Mentions/MentionComponent.vue.d.ts +1 -0
  129. package/dist/components/RichTextEditor/Extensions/Mentions/MentionSuggestion.vue.d.ts +10 -10
  130. package/dist/components/RichTextEditor/Extensions/Suggestion/SuggestionList.vue.d.ts +27 -27
  131. package/dist/components/RichTextEditor/Extensions/Suggestion/SuggestionList.vue.d.ts.map +1 -1
  132. package/dist/components/RichTextEditor/Extensions/Variable/VariableComponent.vue.d.ts +153 -153
  133. package/dist/components/RichTextEditor/Extensions/Variable/VariableComponent.vue.d.ts.map +1 -1
  134. package/dist/components/RootLayout/RootLayout.vue.d.ts +10 -10
  135. package/dist/components/SegmentedControl/SegmentedControl.vue.d.ts.map +1 -1
  136. package/dist/components/SelectMenu/SelectMenu.vue.d.ts +33 -33
  137. package/dist/components/SelectMenu/SelectMenu.vue.d.ts.map +1 -1
  138. package/dist/components/Skeleton/Skeleton.vue.d.ts +8 -8
  139. package/dist/components/Skeleton/SkeletonListItem.vue.d.ts +4 -4
  140. package/dist/components/Skeleton/SkeletonParagraph.vue.d.ts +2 -2
  141. package/dist/components/Skeleton/SkeletonShape.vue.d.ts +2 -2
  142. package/dist/components/SplitButton/SplitButton.vue.d.ts +157 -157
  143. package/dist/components/SplitButton/SplitButton.vue.d.ts.map +1 -1
  144. package/dist/components/SplitButton/SplitButtonEnd.vue.d.ts +30 -30
  145. package/dist/components/SplitButton/SplitButtonEnd.vue.d.ts.map +1 -1
  146. package/dist/components/SplitButton/SplitButtonStart.vue.d.ts +31 -31
  147. package/dist/components/Tab/Tab.vue.d.ts +33 -33
  148. package/dist/components/Tab/TabGroup.vue.d.ts +6 -6
  149. package/dist/components/Tab/TabPanel.vue.d.ts +2 -2
  150. package/dist/components/TextList/TextList.vue.d.ts +87 -0
  151. package/dist/components/TextList/TextList.vue.d.ts.map +1 -0
  152. package/dist/components/TextList/TextListConstants.d.ts +20 -0
  153. package/dist/components/TextList/TextListConstants.d.ts.map +1 -0
  154. package/dist/components/TextList/TextListItem.vue.d.ts +60 -0
  155. package/dist/components/TextList/TextListItem.vue.d.ts.map +1 -0
  156. package/dist/components/TextList/Validators.d.ts +5 -0
  157. package/dist/components/TextList/Validators.d.ts.map +1 -0
  158. package/dist/components/TextList/index.d.ts +4 -0
  159. package/dist/components/TextList/index.d.ts.map +1 -0
  160. package/dist/components/Toast/Layouts/ToastLayoutAlternate.vue.d.ts +108 -108
  161. package/dist/components/Toast/Layouts/ToastLayoutAlternate.vue.d.ts.map +1 -1
  162. package/dist/components/Toast/Layouts/ToastLayoutAlternateIcon.vue.d.ts +34 -34
  163. package/dist/components/Toast/Layouts/ToastLayoutAlternateIcon.vue.d.ts.map +1 -1
  164. package/dist/components/Toast/Layouts/ToastLayoutDefault.vue.d.ts +106 -106
  165. package/dist/components/Toast/Layouts/ToastLayoutDefault.vue.d.ts.map +1 -1
  166. package/dist/components/Toast/Toast.vue.d.ts +436 -436
  167. package/dist/components/Toast/Toast.vue.d.ts.map +1 -1
  168. package/dist/components/Toggle/Toggle.vue.d.ts +4 -4
  169. package/dist/components/Toggle/Toggle.vue.d.ts.map +1 -1
  170. package/dist/components/Tooltip/Tooltip.vue.d.ts +4 -4
  171. package/dist/components/ValidationMessages/ValidationMessages.vue.d.ts +22 -22
  172. package/dist/components/ValidationMessages/ValidationMessages.vue.d.ts.map +1 -1
  173. package/dist/dialtone-vue.cjs +1 -1
  174. package/dist/dialtone-vue.js +134 -130
  175. package/dist/index.d.ts +1 -0
  176. package/dist/lib/attachment-carousel/attachment-carousel.cjs +1 -1
  177. package/dist/lib/attachment-carousel/attachment-carousel.js +1 -1
  178. package/dist/lib/attachment-carousel/index.cjs +1 -1
  179. package/dist/lib/attachment-carousel/index.js +1 -1
  180. package/dist/lib/avatar/avatar.cjs +1 -1
  181. package/dist/lib/avatar/avatar.cjs.map +1 -1
  182. package/dist/lib/avatar/avatar.js +55 -54
  183. package/dist/lib/avatar/avatar.js.map +1 -1
  184. package/dist/lib/badge/badge.cjs +1 -1
  185. package/dist/lib/badge/badge.cjs.map +1 -1
  186. package/dist/lib/badge/badge.js +36 -35
  187. package/dist/lib/badge/badge.js.map +1 -1
  188. package/dist/lib/box/box-constants.cjs +1 -1
  189. package/dist/lib/box/box-constants.cjs.map +1 -1
  190. package/dist/lib/box/box-constants.js +34 -7
  191. package/dist/lib/box/box-constants.js.map +1 -1
  192. package/dist/lib/box/box.cjs +1 -1
  193. package/dist/lib/box/box.cjs.map +1 -1
  194. package/dist/lib/box/box.js +93 -34
  195. package/dist/lib/box/box.js.map +1 -1
  196. package/dist/lib/box/index.cjs +1 -1
  197. package/dist/lib/box/index.js +3 -3
  198. package/dist/lib/box/validators.cjs +1 -1
  199. package/dist/lib/box/validators.cjs.map +1 -1
  200. package/dist/lib/box/validators.js +4 -4
  201. package/dist/lib/box/validators.js.map +1 -1
  202. package/dist/lib/button/button.cjs +1 -1
  203. package/dist/lib/button/button.cjs.map +1 -1
  204. package/dist/lib/button/button.js +69 -68
  205. package/dist/lib/button/button.js.map +1 -1
  206. package/dist/lib/chip/chip.cjs +1 -1
  207. package/dist/lib/chip/chip.cjs.map +1 -1
  208. package/dist/lib/chip/chip.js +36 -35
  209. package/dist/lib/chip/chip.js.map +1 -1
  210. package/dist/lib/codeblock/codeblock.cjs +1 -1
  211. package/dist/lib/codeblock/codeblock.cjs.map +1 -1
  212. package/dist/lib/codeblock/codeblock.js +11 -10
  213. package/dist/lib/codeblock/codeblock.js.map +1 -1
  214. package/dist/lib/combobox/combobox.cjs +1 -1
  215. package/dist/lib/combobox/combobox.js +1 -1
  216. package/dist/lib/combobox/index.cjs +1 -1
  217. package/dist/lib/combobox/index.js +1 -1
  218. package/dist/lib/combobox-multi-select/combobox-multi-select.cjs +1 -1
  219. package/dist/lib/combobox-multi-select/combobox-multi-select.cjs.map +1 -1
  220. package/dist/lib/combobox-multi-select/combobox-multi-select.js +53 -53
  221. package/dist/lib/combobox-multi-select/combobox-multi-select.js.map +1 -1
  222. package/dist/lib/combobox-with-popover/combobox-with-popover.cjs +1 -1
  223. package/dist/lib/combobox-with-popover/combobox-with-popover.cjs.map +1 -1
  224. package/dist/lib/combobox-with-popover/combobox-with-popover.js +48 -47
  225. package/dist/lib/combobox-with-popover/combobox-with-popover.js.map +1 -1
  226. package/dist/lib/editor/editor.cjs +1 -1
  227. package/dist/lib/editor/editor.js +1 -1
  228. package/dist/lib/emoji/emoji.cjs +1 -1
  229. package/dist/lib/emoji/emoji.cjs.map +1 -1
  230. package/dist/lib/emoji/emoji.js +25 -24
  231. package/dist/lib/emoji/emoji.js.map +1 -1
  232. package/dist/lib/emoji-text-wrapper/emoji-text-wrapper.cjs +1 -1
  233. package/dist/lib/emoji-text-wrapper/emoji-text-wrapper.cjs.map +1 -1
  234. package/dist/lib/emoji-text-wrapper/emoji-text-wrapper.js +20 -19
  235. package/dist/lib/emoji-text-wrapper/emoji-text-wrapper.js.map +1 -1
  236. package/dist/lib/empty-state/empty-state.cjs +1 -1
  237. package/dist/lib/empty-state/empty-state.cjs.map +1 -1
  238. package/dist/lib/empty-state/empty-state.js +31 -30
  239. package/dist/lib/empty-state/empty-state.js.map +1 -1
  240. package/dist/lib/filter-pill/filter-pill.cjs +1 -1
  241. package/dist/lib/filter-pill/filter-pill.cjs.map +1 -1
  242. package/dist/lib/filter-pill/filter-pill.js +73 -72
  243. package/dist/lib/filter-pill/filter-pill.js.map +1 -1
  244. package/dist/lib/icon/icon.cjs +1 -1
  245. package/dist/lib/icon/icon.cjs.map +1 -1
  246. package/dist/lib/icon/icon.js +16 -15
  247. package/dist/lib/icon/icon.js.map +1 -1
  248. package/dist/lib/input/input.cjs +1 -1
  249. package/dist/lib/input/input.cjs.map +1 -1
  250. package/dist/lib/input/input.js +64 -63
  251. package/dist/lib/input/input.js.map +1 -1
  252. package/dist/lib/link/link-constants.cjs +1 -1
  253. package/dist/lib/link/link-constants.cjs.map +1 -1
  254. package/dist/lib/link/link-constants.js +11 -9
  255. package/dist/lib/link/link-constants.js.map +1 -1
  256. package/dist/lib/link/link.cjs +1 -1
  257. package/dist/lib/link/link.cjs.map +1 -1
  258. package/dist/lib/link/link.js +17 -14
  259. package/dist/lib/link/link.js.map +1 -1
  260. package/dist/lib/loader/loader.cjs +3 -3
  261. package/dist/lib/loader/loader.cjs.map +1 -1
  262. package/dist/lib/loader/loader.js +21 -20
  263. package/dist/lib/loader/loader.js.map +1 -1
  264. package/dist/lib/message-input/index.cjs +1 -1
  265. package/dist/lib/message-input/index.js +1 -1
  266. package/dist/lib/message-input/message-input.cjs +1 -1
  267. package/dist/lib/message-input/message-input.js +1 -1
  268. package/dist/lib/modal/index.cjs +1 -1
  269. package/dist/lib/modal/index.js +3 -3
  270. package/dist/lib/modal/modal-constants.cjs +1 -1
  271. package/dist/lib/modal/modal-constants.cjs.map +1 -1
  272. package/dist/lib/modal/modal-constants.js +1 -4
  273. package/dist/lib/modal/modal-constants.js.map +1 -1
  274. package/dist/lib/modal/modal.cjs +1 -1
  275. package/dist/lib/modal/modal.cjs.map +1 -1
  276. package/dist/lib/modal/modal.js +40 -42
  277. package/dist/lib/modal/modal.js.map +1 -1
  278. package/dist/lib/progress-circle/progress-circle.cjs +1 -1
  279. package/dist/lib/progress-circle/progress-circle.cjs.map +1 -1
  280. package/dist/lib/progress-circle/progress-circle.js +33 -32
  281. package/dist/lib/progress-circle/progress-circle.js.map +1 -1
  282. package/dist/lib/prose/prose.cjs +1 -1
  283. package/dist/lib/prose/prose.cjs.map +1 -1
  284. package/dist/lib/prose/prose.js +23 -22
  285. package/dist/lib/prose/prose.js.map +1 -1
  286. package/dist/lib/segmented-control/segmented-control.cjs +1 -1
  287. package/dist/lib/segmented-control/segmented-control.cjs.map +1 -1
  288. package/dist/lib/segmented-control/segmented-control.js +42 -41
  289. package/dist/lib/segmented-control/segmented-control.js.map +1 -1
  290. package/dist/lib/select-menu/select-menu.cjs +1 -1
  291. package/dist/lib/select-menu/select-menu.cjs.map +1 -1
  292. package/dist/lib/select-menu/select-menu.js +48 -47
  293. package/dist/lib/select-menu/select-menu.js.map +1 -1
  294. package/dist/lib/split-button/split-button.cjs +1 -1
  295. package/dist/lib/split-button/split-button.cjs.map +1 -1
  296. package/dist/lib/split-button/split-button.js +45 -44
  297. package/dist/lib/split-button/split-button.js.map +1 -1
  298. package/dist/lib/tab/tab-group.cjs +1 -1
  299. package/dist/lib/tab/tab-group.cjs.map +1 -1
  300. package/dist/lib/tab/tab-group.js +34 -35
  301. package/dist/lib/tab/tab-group.js.map +1 -1
  302. package/dist/lib/text-list/index.cjs +1 -0
  303. package/dist/lib/text-list/index.js +4 -0
  304. package/dist/lib/text-list/text-list-constants.cjs +2 -0
  305. package/dist/lib/text-list/text-list-constants.cjs.map +1 -0
  306. package/dist/lib/text-list/text-list-constants.js +31 -0
  307. package/dist/lib/text-list/text-list-constants.js.map +1 -0
  308. package/dist/lib/text-list/text-list-item.cjs +1 -0
  309. package/dist/lib/text-list/text-list-item.js +2 -0
  310. package/dist/lib/text-list/text-list.cjs +1 -0
  311. package/dist/lib/text-list/text-list.js +2 -0
  312. package/dist/lib/text-list/validators.cjs +2 -0
  313. package/dist/lib/text-list/validators.cjs.map +1 -0
  314. package/dist/lib/text-list/validators.js +10 -0
  315. package/dist/lib/text-list/validators.js.map +1 -0
  316. package/dist/lib/toast/index.cjs +1 -1
  317. package/dist/lib/toast/index.js +1 -1
  318. package/dist/lib/toast/toast.cjs +1 -1
  319. package/dist/lib/toast/toast.js +1 -1
  320. package/dist/lib/toggle/toggle.cjs +1 -1
  321. package/dist/lib/toggle/toggle.cjs.map +1 -1
  322. package/dist/lib/toggle/toggle.js +23 -22
  323. package/dist/lib/toggle/toggle.js.map +1 -1
  324. package/dist/{message_input-DOE5NEU9.js → message_input-C6BcWqr8.js} +1 -1
  325. package/dist/{message_input-DOE5NEU9.js.map → message_input-C6BcWqr8.js.map} +1 -1
  326. package/dist/{message_input-DMyIOe4y.cjs → message_input-ftx8f8wC.cjs} +1 -1
  327. package/dist/{message_input-DMyIOe4y.cjs.map → message_input-ftx8f8wC.cjs.map} +1 -1
  328. package/dist/recipes/buttons/callbar_button/callbar_button.vue.d.ts +33 -33
  329. package/dist/recipes/buttons/callbar_button_with_dropdown/callbar_button_with_dropdown.vue.d.ts +149 -149
  330. package/dist/recipes/buttons/callbar_button_with_dropdown/callbar_button_with_dropdown.vue.d.ts.map +1 -1
  331. package/dist/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.d.ts +147 -147
  332. package/dist/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.d.ts.map +1 -1
  333. package/dist/recipes/cards/ivr_node/ivr_node.vue.d.ts +173 -173
  334. package/dist/recipes/cards/ivr_node/ivr_node.vue.d.ts.map +1 -1
  335. package/dist/recipes/chips/grouped_chip/grouped_chip.vue.d.ts +40 -40
  336. package/dist/recipes/chips/grouped_chip/grouped_chip.vue.d.ts.map +1 -1
  337. package/dist/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.d.ts +132 -132
  338. package/dist/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.d.ts.map +1 -1
  339. package/dist/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.d.ts +97 -97
  340. package/dist/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.d.ts.map +1 -1
  341. package/dist/recipes/conversation_view/editor/EditorToolbarButton.vue.d.ts +25 -25
  342. package/dist/recipes/conversation_view/editor/EditorToolbarDropdownButton.vue.d.ts +107 -107
  343. package/dist/recipes/conversation_view/editor/EditorToolbarDropdownButton.vue.d.ts.map +1 -1
  344. package/dist/recipes/conversation_view/editor/EditorToolbarPopoverButton.vue.d.ts +103 -103
  345. package/dist/recipes/conversation_view/editor/EditorToolbarPopoverButton.vue.d.ts.map +1 -1
  346. package/dist/recipes/conversation_view/editor/editor.vue.d.ts +636 -636
  347. package/dist/recipes/conversation_view/editor/editor.vue.d.ts.map +1 -1
  348. package/dist/recipes/conversation_view/emoji_row/emoji_row.vue.d.ts +70 -70
  349. package/dist/recipes/conversation_view/emoji_row/emoji_row.vue.d.ts.map +1 -1
  350. package/dist/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.d.ts +66 -66
  351. package/dist/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.d.ts.map +1 -1
  352. package/dist/recipes/conversation_view/feed_item_row/feed_item_row.vue.d.ts +55 -55
  353. package/dist/recipes/conversation_view/feed_item_row/feed_item_row.vue.d.ts.map +1 -1
  354. package/dist/recipes/conversation_view/message_input/extensions/meeting_pill/MeetingPill.vue.d.ts +55 -55
  355. package/dist/recipes/conversation_view/message_input/extensions/meeting_pill/MeetingPill.vue.d.ts.map +1 -1
  356. package/dist/recipes/conversation_view/message_input/message_input.vue.d.ts +604 -604
  357. package/dist/recipes/conversation_view/message_input/message_input.vue.d.ts.map +1 -1
  358. package/dist/recipes/conversation_view/message_input/message_input_button.vue.d.ts +109 -109
  359. package/dist/recipes/conversation_view/message_input/message_input_button.vue.d.ts.map +1 -1
  360. package/dist/recipes/conversation_view/message_input/message_input_link.vue.d.ts +254 -254
  361. package/dist/recipes/conversation_view/message_input/message_input_link.vue.d.ts.map +1 -1
  362. package/dist/recipes/conversation_view/message_input/message_input_topbar.vue.d.ts +149 -149
  363. package/dist/recipes/conversation_view/message_input/message_input_topbar.vue.d.ts.map +1 -1
  364. package/dist/recipes/header/settings_menu_button/settings_menu_button.vue.d.ts +30 -30
  365. package/dist/recipes/header/settings_menu_button/settings_menu_button.vue.d.ts.map +1 -1
  366. package/dist/recipes/item_layout/contact_info/contact_info.vue.d.ts +30 -30
  367. package/dist/recipes/leftbar/callbox/callbox.vue.d.ts +28 -28
  368. package/dist/recipes/leftbar/callbox/callbox.vue.d.ts.map +1 -1
  369. package/dist/recipes/leftbar/contact_centers_row/contact_centers_row.vue.d.ts +72 -72
  370. package/dist/recipes/leftbar/contact_centers_row/contact_centers_row.vue.d.ts.map +1 -1
  371. package/dist/recipes/leftbar/contact_row/contact_row.vue.d.ts +215 -215
  372. package/dist/recipes/leftbar/contact_row/contact_row.vue.d.ts.map +1 -1
  373. package/dist/recipes/leftbar/general_row/general_row.vue.d.ts +176 -176
  374. package/dist/recipes/leftbar/general_row/general_row.vue.d.ts.map +1 -1
  375. package/dist/recipes/leftbar/general_row/leftbar_general_row_icon.vue.d.ts +80 -80
  376. package/dist/recipes/leftbar/general_row/leftbar_general_row_icon.vue.d.ts.map +1 -1
  377. package/dist/recipes/leftbar/group_row/group_row.vue.d.ts +181 -181
  378. package/dist/recipes/leftbar/group_row/group_row.vue.d.ts.map +1 -1
  379. package/dist/recipes/leftbar/unread_pill/unread_pill.vue.d.ts +10 -10
  380. package/dist/recipes/leftbar/unread_pill/unread_pill.vue.d.ts.map +1 -1
  381. package/package.json +4 -4
  382. package/dist/Combobox-By01ETlj.js.map +0 -1
  383. package/dist/Combobox-D4hc1-41.cjs +0 -3
  384. package/dist/Combobox-D4hc1-41.cjs.map +0 -1
  385. package/dist/Toast-CHbVmbBg.js.map +0 -1
  386. package/dist/Toast-DX-REYXG.cjs +0 -2
  387. package/dist/Toast-DX-REYXG.cjs.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"tab-group.cjs","names":[],"sources":["../../../components/Tab/TabGroup.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"dt-tab-group\"\n :class=\"['d-tab-neux', { 'd-tab-neux--vertical': orientation === 'vertical' }]\"\n >\n <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n <div\n ref=\"tabs\"\n :class=\"[\n 'd-tablist',\n TAB_LIST_SIZE_MODIFIERS[String(size)],\n TAB_ORIENTATION_MODIFIERS[orientation],\n orientation !== 'vertical' && TAB_SPREAD_MODIFIERS[spread],\n {\n [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n },\n resolvedTabsClass,\n ]\"\n v-bind=\"tabListChildProps\"\n role=\"tablist\"\n :aria-label=\"label\"\n :aria-orientation=\"orientation\"\n @keydown.left=\"tabLeft\"\n @keydown.right=\"tabRight\"\n @keydown.up=\"tabUp\"\n @keydown.down=\"tabDown\"\n @keydown.enter=\"selectTab\"\n @keydown.space=\"selectTab\"\n @click=\"selectTab\"\n @keydown.home.prevent=\"onHomeButton\"\n @keydown.end.prevent=\"onEndButton\"\n >\n <!-- @slot Slot for Tabs -->\n <slot name=\"tabs\" />\n </div>\n <!-- @slot Default slot for Panel -->\n <slot />\n </div>\n</template>\n\n<script>\nimport {\n TAB_LIST_SIZES,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_LIST_SIZE_MODIFIERS,\n TAB_ORIENTATIONS,\n TAB_ORIENTATION_MODIFIERS,\n TAB_ACTIVATION_MODES,\n TAB_GROUP_KINDS,\n TAB_SPREADS,\n TAB_SPREAD_MODIFIERS,\n} from './TabsConstants';\nimport { ref } from 'vue';\nimport { useIndicatorAnimation } from '@/common/composables/useIndicatorAnimation';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n name: 'DtTabGroup',\n\n provide () {\n return {\n groupContext: this.provideObj,\n setFocus: this.setFocus,\n };\n },\n\n props: {\n /**\n * Identifies the tab group\n */\n label: {\n type: String,\n default: '',\n },\n\n /**\n * The id of the selected tab panel which should be displayed\n */\n selected: {\n type: String,\n default: '',\n },\n\n /**\n * If true, disables the tab group\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * If true, applies inverted styles to the tab group\n * @deprecated Use v-dt-mode directive instead.\n * @values true, false\n */\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * If true, applies borderless styles to the tab group\n * @values true, false\n */\n borderless: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls how tabs distribute available space within the tab list.\n * @values none, grow, equal\n */\n spread: {\n type: String,\n default: 'none',\n validator (value) {\n return TAB_SPREADS.includes(value);\n },\n },\n\n /**\n * The orientation of the tab list\n * @values horizontal, vertical\n */\n orientation: {\n type: String,\n default: 'horizontal',\n validator (value) {\n return TAB_ORIENTATIONS.includes(value);\n },\n },\n\n /**\n * If provided, applies size styles to the tab group\n * @values 100, 200, 300, 400, 500\n */\n size: {\n type: [String, Number],\n default: 300,\n validator (size) {\n return TAB_LIST_SIZES.includes(String(size));\n },\n },\n\n /**\n * Pass through classes, used to customize the tab list\n */\n tabsClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Pass through classes, used to customize the tab list\n * @deprecated Use tabsClass\n */\n tabListClass: {\n type: [String, Array, Object],\n default: undefined,\n },\n\n /**\n * Pass through props, used to customize the tab list\n */\n tabListChildProps: {\n type: Object,\n default: () => ({}),\n },\n\n /**\n * The visual style kind applied to tabs within this group.\n * Maps to specific DtButton kind/importance combinations for selected/unselected states.\n * @values default, muted\n */\n kind: {\n type: String,\n default: 'default',\n validator (value) {\n return TAB_GROUP_KINDS.includes(value);\n },\n },\n\n /**\n * If true, the selected tab renders with outlined importance instead of clear.\n * @values true, false\n */\n outlined: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls whether tabs are selected on focus (auto) or on click/keypress (manual)\n * @values auto, manual\n */\n activationMode: {\n type: String,\n default: 'manual',\n validator (value) {\n return TAB_ACTIVATION_MODES.includes(value);\n },\n },\n\n /**\n * If true, the selection indicator animates between tabs on click.\n * @values true, false\n */\n showIndicatorTransition: {\n type: Boolean,\n default: true,\n },\n },\n\n emits: [\n /**\n * Change tab event with the arguments: selected id of the current tab and disabled value\n *\n * @event change\n * @type {Object}\n */\n 'change',\n\n /**\n * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n *\n * @event before-change\n * @type {Event}\n */\n 'before-change',\n ],\n\n setup () {\n const tabs = ref(null);\n const indicator = useIndicatorAnimation(\n tabs, '--tab-indicator-duration', '--tab-indicator-easing',\n );\n return { tabs, indicator };\n },\n\n data () {\n return {\n provideObj: {\n selected: '', // the currently displayed tab id\n disabled: false, // disable group\n size: 300,\n kind: 'default',\n outlined: false,\n orientation: 'horizontal',\n spread: 'none',\n focusedTabId: null, // tracks last-focused tab for roving tabindex\n },\n\n tabItems: [],\n TAB_LIST_SIZE_MODIFIERS,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_ORIENTATION_MODIFIERS,\n TAB_SPREAD_MODIFIERS,\n };\n },\n\n computed: {\n resolvedTabsClass () {\n return this.tabListClass ?? this.tabsClass;\n },\n },\n\n watch: {\n disabled: {\n immediate: true,\n handler () {\n this.provideObj.disabled = this.disabled;\n },\n },\n\n selected: {\n immediate: true,\n handler (newVal, oldVal) {\n this.provideObj.selected = this.selected;\n if (newVal !== oldVal) {\n this.provideObj.focusedTabId = null;\n }\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.provideObj.size = this.size;\n },\n },\n\n kind: {\n immediate: true,\n handler () {\n this.provideObj.kind = this.kind;\n },\n },\n\n outlined: {\n immediate: true,\n handler () {\n this.provideObj.outlined = this.outlined;\n },\n },\n\n orientation: {\n immediate: true,\n handler () {\n this.provideObj.orientation = this.orientation;\n },\n },\n\n spread: {\n immediate: true,\n handler () {\n this.provideObj.spread = this.spread;\n },\n },\n },\n\n mounted () {\n this.updateSelected();\n },\n\n updated () {\n this.updateSelected();\n },\n\n methods: {\n updateSelected () {\n /**\n * Prevent override tab selected by default\n */\n if (!this.provideObj.selected) {\n this.provideObj.selected = this.selected;\n }\n this.tabItems = this.getTabChildren();\n\n // Clear stale focusedTabId if the focused tab was removed\n if (this.provideObj.focusedTabId && !this.tabItems.some(t => t.tabId === this.provideObj.focusedTabId)) {\n this.provideObj.focusedTabId = null;\n }\n },\n\n setFocus (focusId) {\n if (this.provideObj.focusedTabId !== focusId) {\n this.provideObj.focusedTabId = focusId;\n }\n },\n\n getTabChildren () {\n const tabs = Array.from(this.$refs.tabs.querySelectorAll('[role=\"tab\"]'));\n return tabs\n .map(el => {\n return ({\n context: el,\n panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n isSelected: el.getAttribute('aria-selected') === 'true',\n isDisabled: el.getAttribute('aria-disabled') === 'true',\n });\n });\n },\n\n onChange () {\n this.$emit('change', { ...this.provideObj });\n },\n\n tabLeft () {\n if (this.orientation !== 'horizontal') return;\n this.navigatePrevious();\n },\n\n tabRight () {\n if (this.orientation !== 'horizontal') return;\n this.navigateNext();\n },\n\n tabUp (event) {\n if (this.orientation !== 'vertical') return;\n event.preventDefault();\n this.navigatePrevious();\n },\n\n tabDown (event) {\n if (this.orientation !== 'vertical') return;\n event.preventDefault();\n this.navigateNext();\n },\n\n navigatePrevious () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const nextIndex = this.findNextTab(index, -1);\n this.selectFocusOnTab(nextIndex);\n },\n\n navigateNext () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const nextIndex = this.findNextTab(index, 1);\n this.selectFocusOnTab(nextIndex);\n },\n\n findNextTab (fromIndex, direction) {\n const len = this.tabItems.length;\n return (fromIndex + direction + len) % len;\n },\n\n transitionIndicator (panelId, newContext) {\n if (!newContext || !this.showIndicatorTransition) {\n this.provideObj.selected = panelId;\n return;\n }\n\n const old = this.indicator.snapshot('[aria-selected=\"true\"]');\n\n this.provideObj.selected = panelId;\n if (!old) return;\n\n this.$nextTick(() => {\n let hideProps = { backgroundColor: 'transparent' };\n let indicatorExtra = {};\n let pseudoElement = '::after';\n\n if (this.outlined) {\n hideProps = { borderColor: 'transparent', backgroundColor: 'transparent' };\n indicatorExtra = { boxShadow: `inset 0 0 0 ${old.style.borderWidth} ${old.style.borderColor}` };\n pseudoElement = '::before';\n } else if (this.kind === 'muted') {\n indicatorExtra = { backgroundColor: old.style.backgroundColor };\n pseudoElement = '::before';\n }\n\n this.indicator.animate({\n oldRect: old.rect,\n newEl: newContext,\n orientation: this.orientation,\n hideProps,\n indicatorExtra,\n pseudoElement,\n });\n });\n },\n\n selectFocusOnTab (index) {\n const { context, panelId, isDisabled } = this.tabItems[index];\n context.focus();\n if (this.activationMode === 'auto' && !isDisabled) {\n this.indicator.cancel();\n this.provideObj.selected = panelId;\n this.onChange();\n }\n },\n\n selectTab (event) {\n const tabEl = event.target.closest('[role=\"tab\"]');\n const index = tabEl\n ? this.tabItems.findIndex(t => t.context === tabEl)\n : this.getFocusedTabIndex();\n\n if (index === -1) return;\n if (this.tabItems[index]?.isDisabled) return;\n if (this.provideObj.selected === this.tabItems[index]?.panelId) return;\n\n this.$emit('before-change', event);\n if (event.defaultPrevented) return;\n\n // Prevent keyboard defaults (Space scroll, Enter form submit)\n // after confirming the tab change will proceed\n event.preventDefault();\n\n this.selectTabByIndex(index);\n this.onChange();\n },\n\n selectTabByIndex (index) {\n const { context, panelId } = this.tabItems[index];\n this.transitionIndicator(panelId, context);\n context.focus();\n },\n\n getFocusedTabIndex () {\n const focusedId = this.provideObj.focusedTabId;\n const index = this.tabItems.findIndex((context) =>\n focusedId ? context.tabId === focusedId : context.isSelected,\n );\n\n return index === -1 ? 0 : index;\n },\n\n onHomeButton () {\n if (this.tabItems.length) this.selectFocusOnTab(0);\n },\n\n onEndButton () {\n if (this.tabItems.length) this.selectFocusOnTab(this.tabItems.length - 1);\n },\n\n },\n};\n</script>\n"],"mappings":"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"}
1
+ {"version":3,"file":"tab-group.cjs","names":[],"sources":["../../../components/Tab/TabGroup.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"dt-tab-group\"\n :class=\"['d-tab-neux', { 'd-tab-neux--vertical': orientation === 'vertical' }]\"\n >\n <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n <div\n ref=\"tabs\"\n :class=\"[\n 'd-tablist',\n TAB_LIST_SIZE_MODIFIERS[String(size)],\n TAB_ORIENTATION_MODIFIERS[orientation],\n orientation !== 'vertical' && TAB_SPREAD_MODIFIERS[spread],\n {\n [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n },\n resolvedTabsClass,\n ]\"\n v-bind=\"tabListChildProps\"\n role=\"tablist\"\n :aria-label=\"label\"\n :aria-orientation=\"orientation\"\n @keydown.left=\"tabLeft\"\n @keydown.right=\"tabRight\"\n @keydown.up=\"tabUp\"\n @keydown.down=\"tabDown\"\n @keydown.enter=\"selectTab\"\n @keydown.space=\"selectTab\"\n @click=\"selectTab\"\n @keydown.home.prevent=\"onHomeButton\"\n @keydown.end.prevent=\"onEndButton\"\n >\n <!-- @slot Slot for Tabs -->\n <slot name=\"tabs\" />\n </div>\n <!-- @slot Default slot for Panel -->\n <slot />\n </div>\n</template>\n\n<script>\nimport {\n TAB_LIST_SIZES,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_LIST_SIZE_MODIFIERS,\n TAB_ORIENTATIONS,\n TAB_ORIENTATION_MODIFIERS,\n TAB_ACTIVATION_MODES,\n TAB_GROUP_KINDS,\n TAB_SPREADS,\n TAB_SPREAD_MODIFIERS,\n} from './TabsConstants';\nimport { ref } from 'vue';\nimport { useIndicatorAnimation } from '@/common/composables/useIndicatorAnimation';\nimport { ordinalSizeValidator } from '@/common/validators';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n name: 'DtTabGroup',\n\n provide () {\n return {\n groupContext: this.provideObj,\n setFocus: this.setFocus,\n };\n },\n\n props: {\n /**\n * Identifies the tab group\n */\n label: {\n type: String,\n default: '',\n },\n\n /**\n * The id of the selected tab panel which should be displayed\n */\n selected: {\n type: String,\n default: '',\n },\n\n /**\n * If true, disables the tab group\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * If true, applies inverted styles to the tab group\n * @deprecated Use v-dt-mode directive instead.\n * @values true, false\n */\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * If true, applies borderless styles to the tab group\n * @values true, false\n */\n borderless: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls how tabs distribute available space within the tab list.\n * @values none, grow, equal\n */\n spread: {\n type: String,\n default: 'none',\n validator (value) {\n return TAB_SPREADS.includes(value);\n },\n },\n\n /**\n * The orientation of the tab list\n * @values horizontal, vertical\n */\n orientation: {\n type: String,\n default: 'horizontal',\n validator (value) {\n return TAB_ORIENTATIONS.includes(value);\n },\n },\n\n /**\n * If provided, applies size styles to the tab group\n * @values 100, 200, 300, 400, 500\n */\n size: {\n type: [String, Number],\n default: 300,\n validator: ordinalSizeValidator(TAB_LIST_SIZES),\n },\n\n /**\n * Pass through classes, used to customize the tab list\n */\n tabsClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Pass through classes, used to customize the tab list\n * @deprecated Use tabsClass\n */\n tabListClass: {\n type: [String, Array, Object],\n default: undefined,\n },\n\n /**\n * Pass through props, used to customize the tab list\n */\n tabListChildProps: {\n type: Object,\n default: () => ({}),\n },\n\n /**\n * The visual style kind applied to tabs within this group.\n * Maps to specific DtButton kind/importance combinations for selected/unselected states.\n * @values default, muted\n */\n kind: {\n type: String,\n default: 'default',\n validator (value) {\n return TAB_GROUP_KINDS.includes(value);\n },\n },\n\n /**\n * If true, the selected tab renders with outlined importance instead of clear.\n * @values true, false\n */\n outlined: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls whether tabs are selected on focus (auto) or on click/keypress (manual)\n * @values auto, manual\n */\n activationMode: {\n type: String,\n default: 'manual',\n validator (value) {\n return TAB_ACTIVATION_MODES.includes(value);\n },\n },\n\n /**\n * If true, the selection indicator animates between tabs on click.\n * @values true, false\n */\n showIndicatorTransition: {\n type: Boolean,\n default: true,\n },\n },\n\n emits: [\n /**\n * Change tab event with the arguments: selected id of the current tab and disabled value\n *\n * @event change\n * @type {Object}\n */\n 'change',\n\n /**\n * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n *\n * @event before-change\n * @type {Event}\n */\n 'before-change',\n ],\n\n setup () {\n const tabs = ref(null);\n const indicator = useIndicatorAnimation(\n tabs, '--tab-indicator-duration', '--tab-indicator-easing',\n );\n return { tabs, indicator };\n },\n\n data () {\n return {\n provideObj: {\n selected: '', // the currently displayed tab id\n disabled: false, // disable group\n size: 300,\n kind: 'default',\n outlined: false,\n orientation: 'horizontal',\n spread: 'none',\n focusedTabId: null, // tracks last-focused tab for roving tabindex\n },\n\n tabItems: [],\n TAB_LIST_SIZE_MODIFIERS,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_ORIENTATION_MODIFIERS,\n TAB_SPREAD_MODIFIERS,\n };\n },\n\n computed: {\n resolvedTabsClass () {\n return this.tabListClass ?? this.tabsClass;\n },\n },\n\n watch: {\n disabled: {\n immediate: true,\n handler () {\n this.provideObj.disabled = this.disabled;\n },\n },\n\n selected: {\n immediate: true,\n handler (newVal, oldVal) {\n this.provideObj.selected = this.selected;\n if (newVal !== oldVal) {\n this.provideObj.focusedTabId = null;\n }\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.provideObj.size = this.size;\n },\n },\n\n kind: {\n immediate: true,\n handler () {\n this.provideObj.kind = this.kind;\n },\n },\n\n outlined: {\n immediate: true,\n handler () {\n this.provideObj.outlined = this.outlined;\n },\n },\n\n orientation: {\n immediate: true,\n handler () {\n this.provideObj.orientation = this.orientation;\n },\n },\n\n spread: {\n immediate: true,\n handler () {\n this.provideObj.spread = this.spread;\n },\n },\n },\n\n mounted () {\n this.updateSelected();\n },\n\n updated () {\n this.updateSelected();\n },\n\n methods: {\n updateSelected () {\n /**\n * Prevent override tab selected by default\n */\n if (!this.provideObj.selected) {\n this.provideObj.selected = this.selected;\n }\n this.tabItems = this.getTabChildren();\n\n // Clear stale focusedTabId if the focused tab was removed\n if (this.provideObj.focusedTabId && !this.tabItems.some(t => t.tabId === this.provideObj.focusedTabId)) {\n this.provideObj.focusedTabId = null;\n }\n },\n\n setFocus (focusId) {\n if (this.provideObj.focusedTabId !== focusId) {\n this.provideObj.focusedTabId = focusId;\n }\n },\n\n getTabChildren () {\n const tabs = Array.from(this.$refs.tabs.querySelectorAll('[role=\"tab\"]'));\n return tabs\n .map(el => {\n return ({\n context: el,\n panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n isSelected: el.getAttribute('aria-selected') === 'true',\n isDisabled: el.getAttribute('aria-disabled') === 'true',\n });\n });\n },\n\n onChange () {\n this.$emit('change', { ...this.provideObj });\n },\n\n tabLeft () {\n if (this.orientation !== 'horizontal') return;\n this.navigatePrevious();\n },\n\n tabRight () {\n if (this.orientation !== 'horizontal') return;\n this.navigateNext();\n },\n\n tabUp (event) {\n if (this.orientation !== 'vertical') return;\n event.preventDefault();\n this.navigatePrevious();\n },\n\n tabDown (event) {\n if (this.orientation !== 'vertical') return;\n event.preventDefault();\n this.navigateNext();\n },\n\n navigatePrevious () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const nextIndex = this.findNextTab(index, -1);\n this.selectFocusOnTab(nextIndex);\n },\n\n navigateNext () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const nextIndex = this.findNextTab(index, 1);\n this.selectFocusOnTab(nextIndex);\n },\n\n findNextTab (fromIndex, direction) {\n const len = this.tabItems.length;\n return (fromIndex + direction + len) % len;\n },\n\n transitionIndicator (panelId, newContext) {\n if (!newContext || !this.showIndicatorTransition) {\n this.provideObj.selected = panelId;\n return;\n }\n\n const old = this.indicator.snapshot('[aria-selected=\"true\"]');\n\n this.provideObj.selected = panelId;\n if (!old) return;\n\n this.$nextTick(() => {\n let hideProps = { backgroundColor: 'transparent' };\n let indicatorExtra = {};\n let pseudoElement = '::after';\n\n if (this.outlined) {\n hideProps = { borderColor: 'transparent', backgroundColor: 'transparent' };\n indicatorExtra = { boxShadow: `inset 0 0 0 ${old.style.borderWidth} ${old.style.borderColor}` };\n pseudoElement = '::before';\n } else if (this.kind === 'muted') {\n indicatorExtra = { backgroundColor: old.style.backgroundColor };\n pseudoElement = '::before';\n }\n\n this.indicator.animate({\n oldRect: old.rect,\n newEl: newContext,\n orientation: this.orientation,\n hideProps,\n indicatorExtra,\n pseudoElement,\n });\n });\n },\n\n selectFocusOnTab (index) {\n const { context, panelId, isDisabled } = this.tabItems[index];\n context.focus();\n if (this.activationMode === 'auto' && !isDisabled) {\n this.indicator.cancel();\n this.provideObj.selected = panelId;\n this.onChange();\n }\n },\n\n selectTab (event) {\n const tabEl = event.target.closest('[role=\"tab\"]');\n const index = tabEl\n ? this.tabItems.findIndex(t => t.context === tabEl)\n : this.getFocusedTabIndex();\n\n if (index === -1) return;\n if (this.tabItems[index]?.isDisabled) return;\n if (this.provideObj.selected === this.tabItems[index]?.panelId) return;\n\n this.$emit('before-change', event);\n if (event.defaultPrevented) return;\n\n // Prevent keyboard defaults (Space scroll, Enter form submit)\n // after confirming the tab change will proceed\n event.preventDefault();\n\n this.selectTabByIndex(index);\n this.onChange();\n },\n\n selectTabByIndex (index) {\n const { context, panelId } = this.tabItems[index];\n this.transitionIndicator(panelId, context);\n context.focus();\n },\n\n getFocusedTabIndex () {\n const focusedId = this.provideObj.focusedTabId;\n const index = this.tabItems.findIndex((context) =>\n focusedId ? context.tabId === focusedId : context.isSelected,\n );\n\n return index === -1 ? 0 : index;\n },\n\n onHomeButton () {\n if (this.tabItems.length) this.selectFocusOnTab(0);\n },\n\n onEndButton () {\n if (this.tabItems.length) this.selectFocusOnTab(this.tabItems.length - 1);\n },\n\n },\n};\n</script>\n"],"mappings":"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"}
@@ -1,9 +1,10 @@
1
- import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
2
- import { TAB_ACTIVATION_MODES as t, TAB_GROUP_KINDS as n, TAB_LIST_IMPORTANCE_MODIFIERS as r, TAB_LIST_KIND_MODIFIERS as i, TAB_LIST_SIZES as a, TAB_LIST_SIZE_MODIFIERS as o, TAB_ORIENTATIONS as s, TAB_ORIENTATION_MODIFIERS as c, TAB_SPREADS as l, TAB_SPREAD_MODIFIERS as u } from "./tabs-constants.js";
3
- import { useIndicatorAnimation as d } from "../../common/composables/use-indicator-animation.js";
4
- import { createElementBlock as f, createElementVNode as p, mergeProps as m, normalizeClass as h, openBlock as g, ref as _, renderSlot as v, withKeys as y, withModifiers as b } from "vue";
1
+ import { ordinalSizeValidator as e } from "../../common/validators/index.js";
2
+ import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
3
+ import { TAB_ACTIVATION_MODES as n, TAB_GROUP_KINDS as r, TAB_LIST_IMPORTANCE_MODIFIERS as i, TAB_LIST_KIND_MODIFIERS as a, TAB_LIST_SIZES as o, TAB_LIST_SIZE_MODIFIERS as s, TAB_ORIENTATIONS as c, TAB_ORIENTATION_MODIFIERS as l, TAB_SPREADS as u, TAB_SPREAD_MODIFIERS as d } from "./tabs-constants.js";
4
+ import { useIndicatorAnimation as f } from "../../common/composables/use-indicator-animation.js";
5
+ import { createElementBlock as p, createElementVNode as m, mergeProps as h, normalizeClass as g, openBlock as _, ref as v, renderSlot as y, withKeys as b, withModifiers as x } from "vue";
5
6
  //#region components/Tab/TabGroup.vue
6
- var x = {
7
+ var S = {
7
8
  name: "DtTabGroup",
8
9
  provide() {
9
10
  return {
@@ -36,22 +37,20 @@ var x = {
36
37
  type: String,
37
38
  default: "none",
38
39
  validator(e) {
39
- return l.includes(e);
40
+ return u.includes(e);
40
41
  }
41
42
  },
42
43
  orientation: {
43
44
  type: String,
44
45
  default: "horizontal",
45
46
  validator(e) {
46
- return s.includes(e);
47
+ return c.includes(e);
47
48
  }
48
49
  },
49
50
  size: {
50
51
  type: [String, Number],
51
52
  default: 300,
52
- validator(e) {
53
- return a.includes(String(e));
54
- }
53
+ validator: e(o)
55
54
  },
56
55
  tabsClass: {
57
56
  type: [
@@ -77,7 +76,7 @@ var x = {
77
76
  type: String,
78
77
  default: "default",
79
78
  validator(e) {
80
- return n.includes(e);
79
+ return r.includes(e);
81
80
  }
82
81
  },
83
82
  outlined: {
@@ -88,7 +87,7 @@ var x = {
88
87
  type: String,
89
88
  default: "manual",
90
89
  validator(e) {
91
- return t.includes(e);
90
+ return n.includes(e);
92
91
  }
93
92
  },
94
93
  showIndicatorTransition: {
@@ -98,10 +97,10 @@ var x = {
98
97
  },
99
98
  emits: ["change", "before-change"],
100
99
  setup() {
101
- let e = _(null);
100
+ let e = v(null);
102
101
  return {
103
102
  tabs: e,
104
- indicator: d(e, "--tab-indicator-duration", "--tab-indicator-easing")
103
+ indicator: f(e, "--tab-indicator-duration", "--tab-indicator-easing")
105
104
  };
106
105
  },
107
106
  data() {
@@ -117,11 +116,11 @@ var x = {
117
116
  focusedTabId: null
118
117
  },
119
118
  tabItems: [],
120
- TAB_LIST_SIZE_MODIFIERS: o,
121
- TAB_LIST_KIND_MODIFIERS: i,
122
- TAB_LIST_IMPORTANCE_MODIFIERS: r,
123
- TAB_ORIENTATION_MODIFIERS: c,
124
- TAB_SPREAD_MODIFIERS: u
119
+ TAB_LIST_SIZE_MODIFIERS: s,
120
+ TAB_LIST_KIND_MODIFIERS: a,
121
+ TAB_LIST_IMPORTANCE_MODIFIERS: i,
122
+ TAB_ORIENTATION_MODIFIERS: l,
123
+ TAB_SPREAD_MODIFIERS: d
125
124
  };
126
125
  },
127
126
  computed: { resolvedTabsClass() {
@@ -268,12 +267,12 @@ var x = {
268
267
  this.tabItems.length && this.selectFocusOnTab(this.tabItems.length - 1);
269
268
  }
270
269
  }
271
- }, S = ["aria-label", "aria-orientation"];
272
- function C(e, t, n, r, i, a) {
273
- return g(), f("div", {
270
+ }, C = ["aria-label", "aria-orientation"];
271
+ function w(e, t, n, r, i, a) {
272
+ return _(), p("div", {
274
273
  "data-qa": "dt-tab-group",
275
- class: h(["d-tab-neux", { "d-tab-neux--vertical": n.orientation === "vertical" }])
276
- }, [p("div", m({
274
+ class: g(["d-tab-neux", { "d-tab-neux--vertical": n.orientation === "vertical" }])
275
+ }, [m("div", h({
277
276
  ref: "tabs",
278
277
  class: [
279
278
  "d-tablist",
@@ -291,20 +290,20 @@ function C(e, t, n, r, i, a) {
291
290
  "aria-label": n.label,
292
291
  "aria-orientation": n.orientation,
293
292
  onKeydown: [
294
- t[0] || (t[0] = y((...e) => a.tabLeft && a.tabLeft(...e), ["left"])),
295
- t[1] || (t[1] = y((...e) => a.tabRight && a.tabRight(...e), ["right"])),
296
- t[2] || (t[2] = y((...e) => a.tabUp && a.tabUp(...e), ["up"])),
297
- t[3] || (t[3] = y((...e) => a.tabDown && a.tabDown(...e), ["down"])),
298
- t[4] || (t[4] = y((...e) => a.selectTab && a.selectTab(...e), ["enter"])),
299
- t[5] || (t[5] = y((...e) => a.selectTab && a.selectTab(...e), ["space"])),
300
- t[7] || (t[7] = y(b((...e) => a.onHomeButton && a.onHomeButton(...e), ["prevent"]), ["home"])),
301
- t[8] || (t[8] = y(b((...e) => a.onEndButton && a.onEndButton(...e), ["prevent"]), ["end"]))
293
+ t[0] || (t[0] = b((...e) => a.tabLeft && a.tabLeft(...e), ["left"])),
294
+ t[1] || (t[1] = b((...e) => a.tabRight && a.tabRight(...e), ["right"])),
295
+ t[2] || (t[2] = b((...e) => a.tabUp && a.tabUp(...e), ["up"])),
296
+ t[3] || (t[3] = b((...e) => a.tabDown && a.tabDown(...e), ["down"])),
297
+ t[4] || (t[4] = b((...e) => a.selectTab && a.selectTab(...e), ["enter"])),
298
+ t[5] || (t[5] = b((...e) => a.selectTab && a.selectTab(...e), ["space"])),
299
+ t[7] || (t[7] = b(x((...e) => a.onHomeButton && a.onHomeButton(...e), ["prevent"]), ["home"])),
300
+ t[8] || (t[8] = b(x((...e) => a.onEndButton && a.onEndButton(...e), ["prevent"]), ["end"]))
302
301
  ],
303
302
  onClick: t[6] || (t[6] = (...e) => a.selectTab && a.selectTab(...e))
304
- }), [v(e.$slots, "tabs")], 16, S), v(e.$slots, "default")], 2);
303
+ }), [y(e.$slots, "tabs")], 16, C), y(e.$slots, "default")], 2);
305
304
  }
306
- var w = /* @__PURE__ */ e(x, [["render", C]]);
305
+ var T = /* @__PURE__ */ t(S, [["render", w]]);
307
306
  //#endregion
308
- export { w as default };
307
+ export { T as default };
309
308
 
310
309
  //# sourceMappingURL=tab-group.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"tab-group.js","names":[],"sources":["../../../components/Tab/TabGroup.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"dt-tab-group\"\n :class=\"['d-tab-neux', { 'd-tab-neux--vertical': orientation === 'vertical' }]\"\n >\n <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n <div\n ref=\"tabs\"\n :class=\"[\n 'd-tablist',\n TAB_LIST_SIZE_MODIFIERS[String(size)],\n TAB_ORIENTATION_MODIFIERS[orientation],\n orientation !== 'vertical' && TAB_SPREAD_MODIFIERS[spread],\n {\n [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n },\n resolvedTabsClass,\n ]\"\n v-bind=\"tabListChildProps\"\n role=\"tablist\"\n :aria-label=\"label\"\n :aria-orientation=\"orientation\"\n @keydown.left=\"tabLeft\"\n @keydown.right=\"tabRight\"\n @keydown.up=\"tabUp\"\n @keydown.down=\"tabDown\"\n @keydown.enter=\"selectTab\"\n @keydown.space=\"selectTab\"\n @click=\"selectTab\"\n @keydown.home.prevent=\"onHomeButton\"\n @keydown.end.prevent=\"onEndButton\"\n >\n <!-- @slot Slot for Tabs -->\n <slot name=\"tabs\" />\n </div>\n <!-- @slot Default slot for Panel -->\n <slot />\n </div>\n</template>\n\n<script>\nimport {\n TAB_LIST_SIZES,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_LIST_SIZE_MODIFIERS,\n TAB_ORIENTATIONS,\n TAB_ORIENTATION_MODIFIERS,\n TAB_ACTIVATION_MODES,\n TAB_GROUP_KINDS,\n TAB_SPREADS,\n TAB_SPREAD_MODIFIERS,\n} from './TabsConstants';\nimport { ref } from 'vue';\nimport { useIndicatorAnimation } from '@/common/composables/useIndicatorAnimation';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n name: 'DtTabGroup',\n\n provide () {\n return {\n groupContext: this.provideObj,\n setFocus: this.setFocus,\n };\n },\n\n props: {\n /**\n * Identifies the tab group\n */\n label: {\n type: String,\n default: '',\n },\n\n /**\n * The id of the selected tab panel which should be displayed\n */\n selected: {\n type: String,\n default: '',\n },\n\n /**\n * If true, disables the tab group\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * If true, applies inverted styles to the tab group\n * @deprecated Use v-dt-mode directive instead.\n * @values true, false\n */\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * If true, applies borderless styles to the tab group\n * @values true, false\n */\n borderless: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls how tabs distribute available space within the tab list.\n * @values none, grow, equal\n */\n spread: {\n type: String,\n default: 'none',\n validator (value) {\n return TAB_SPREADS.includes(value);\n },\n },\n\n /**\n * The orientation of the tab list\n * @values horizontal, vertical\n */\n orientation: {\n type: String,\n default: 'horizontal',\n validator (value) {\n return TAB_ORIENTATIONS.includes(value);\n },\n },\n\n /**\n * If provided, applies size styles to the tab group\n * @values 100, 200, 300, 400, 500\n */\n size: {\n type: [String, Number],\n default: 300,\n validator (size) {\n return TAB_LIST_SIZES.includes(String(size));\n },\n },\n\n /**\n * Pass through classes, used to customize the tab list\n */\n tabsClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Pass through classes, used to customize the tab list\n * @deprecated Use tabsClass\n */\n tabListClass: {\n type: [String, Array, Object],\n default: undefined,\n },\n\n /**\n * Pass through props, used to customize the tab list\n */\n tabListChildProps: {\n type: Object,\n default: () => ({}),\n },\n\n /**\n * The visual style kind applied to tabs within this group.\n * Maps to specific DtButton kind/importance combinations for selected/unselected states.\n * @values default, muted\n */\n kind: {\n type: String,\n default: 'default',\n validator (value) {\n return TAB_GROUP_KINDS.includes(value);\n },\n },\n\n /**\n * If true, the selected tab renders with outlined importance instead of clear.\n * @values true, false\n */\n outlined: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls whether tabs are selected on focus (auto) or on click/keypress (manual)\n * @values auto, manual\n */\n activationMode: {\n type: String,\n default: 'manual',\n validator (value) {\n return TAB_ACTIVATION_MODES.includes(value);\n },\n },\n\n /**\n * If true, the selection indicator animates between tabs on click.\n * @values true, false\n */\n showIndicatorTransition: {\n type: Boolean,\n default: true,\n },\n },\n\n emits: [\n /**\n * Change tab event with the arguments: selected id of the current tab and disabled value\n *\n * @event change\n * @type {Object}\n */\n 'change',\n\n /**\n * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n *\n * @event before-change\n * @type {Event}\n */\n 'before-change',\n ],\n\n setup () {\n const tabs = ref(null);\n const indicator = useIndicatorAnimation(\n tabs, '--tab-indicator-duration', '--tab-indicator-easing',\n );\n return { tabs, indicator };\n },\n\n data () {\n return {\n provideObj: {\n selected: '', // the currently displayed tab id\n disabled: false, // disable group\n size: 300,\n kind: 'default',\n outlined: false,\n orientation: 'horizontal',\n spread: 'none',\n focusedTabId: null, // tracks last-focused tab for roving tabindex\n },\n\n tabItems: [],\n TAB_LIST_SIZE_MODIFIERS,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_ORIENTATION_MODIFIERS,\n TAB_SPREAD_MODIFIERS,\n };\n },\n\n computed: {\n resolvedTabsClass () {\n return this.tabListClass ?? this.tabsClass;\n },\n },\n\n watch: {\n disabled: {\n immediate: true,\n handler () {\n this.provideObj.disabled = this.disabled;\n },\n },\n\n selected: {\n immediate: true,\n handler (newVal, oldVal) {\n this.provideObj.selected = this.selected;\n if (newVal !== oldVal) {\n this.provideObj.focusedTabId = null;\n }\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.provideObj.size = this.size;\n },\n },\n\n kind: {\n immediate: true,\n handler () {\n this.provideObj.kind = this.kind;\n },\n },\n\n outlined: {\n immediate: true,\n handler () {\n this.provideObj.outlined = this.outlined;\n },\n },\n\n orientation: {\n immediate: true,\n handler () {\n this.provideObj.orientation = this.orientation;\n },\n },\n\n spread: {\n immediate: true,\n handler () {\n this.provideObj.spread = this.spread;\n },\n },\n },\n\n mounted () {\n this.updateSelected();\n },\n\n updated () {\n this.updateSelected();\n },\n\n methods: {\n updateSelected () {\n /**\n * Prevent override tab selected by default\n */\n if (!this.provideObj.selected) {\n this.provideObj.selected = this.selected;\n }\n this.tabItems = this.getTabChildren();\n\n // Clear stale focusedTabId if the focused tab was removed\n if (this.provideObj.focusedTabId && !this.tabItems.some(t => t.tabId === this.provideObj.focusedTabId)) {\n this.provideObj.focusedTabId = null;\n }\n },\n\n setFocus (focusId) {\n if (this.provideObj.focusedTabId !== focusId) {\n this.provideObj.focusedTabId = focusId;\n }\n },\n\n getTabChildren () {\n const tabs = Array.from(this.$refs.tabs.querySelectorAll('[role=\"tab\"]'));\n return tabs\n .map(el => {\n return ({\n context: el,\n panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n isSelected: el.getAttribute('aria-selected') === 'true',\n isDisabled: el.getAttribute('aria-disabled') === 'true',\n });\n });\n },\n\n onChange () {\n this.$emit('change', { ...this.provideObj });\n },\n\n tabLeft () {\n if (this.orientation !== 'horizontal') return;\n this.navigatePrevious();\n },\n\n tabRight () {\n if (this.orientation !== 'horizontal') return;\n this.navigateNext();\n },\n\n tabUp (event) {\n if (this.orientation !== 'vertical') return;\n event.preventDefault();\n this.navigatePrevious();\n },\n\n tabDown (event) {\n if (this.orientation !== 'vertical') return;\n event.preventDefault();\n this.navigateNext();\n },\n\n navigatePrevious () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const nextIndex = this.findNextTab(index, -1);\n this.selectFocusOnTab(nextIndex);\n },\n\n navigateNext () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const nextIndex = this.findNextTab(index, 1);\n this.selectFocusOnTab(nextIndex);\n },\n\n findNextTab (fromIndex, direction) {\n const len = this.tabItems.length;\n return (fromIndex + direction + len) % len;\n },\n\n transitionIndicator (panelId, newContext) {\n if (!newContext || !this.showIndicatorTransition) {\n this.provideObj.selected = panelId;\n return;\n }\n\n const old = this.indicator.snapshot('[aria-selected=\"true\"]');\n\n this.provideObj.selected = panelId;\n if (!old) return;\n\n this.$nextTick(() => {\n let hideProps = { backgroundColor: 'transparent' };\n let indicatorExtra = {};\n let pseudoElement = '::after';\n\n if (this.outlined) {\n hideProps = { borderColor: 'transparent', backgroundColor: 'transparent' };\n indicatorExtra = { boxShadow: `inset 0 0 0 ${old.style.borderWidth} ${old.style.borderColor}` };\n pseudoElement = '::before';\n } else if (this.kind === 'muted') {\n indicatorExtra = { backgroundColor: old.style.backgroundColor };\n pseudoElement = '::before';\n }\n\n this.indicator.animate({\n oldRect: old.rect,\n newEl: newContext,\n orientation: this.orientation,\n hideProps,\n indicatorExtra,\n pseudoElement,\n });\n });\n },\n\n selectFocusOnTab (index) {\n const { context, panelId, isDisabled } = this.tabItems[index];\n context.focus();\n if (this.activationMode === 'auto' && !isDisabled) {\n this.indicator.cancel();\n this.provideObj.selected = panelId;\n this.onChange();\n }\n },\n\n selectTab (event) {\n const tabEl = event.target.closest('[role=\"tab\"]');\n const index = tabEl\n ? this.tabItems.findIndex(t => t.context === tabEl)\n : this.getFocusedTabIndex();\n\n if (index === -1) return;\n if (this.tabItems[index]?.isDisabled) return;\n if (this.provideObj.selected === this.tabItems[index]?.panelId) return;\n\n this.$emit('before-change', event);\n if (event.defaultPrevented) return;\n\n // Prevent keyboard defaults (Space scroll, Enter form submit)\n // after confirming the tab change will proceed\n event.preventDefault();\n\n this.selectTabByIndex(index);\n this.onChange();\n },\n\n selectTabByIndex (index) {\n const { context, panelId } = this.tabItems[index];\n this.transitionIndicator(panelId, context);\n context.focus();\n },\n\n getFocusedTabIndex () {\n const focusedId = this.provideObj.focusedTabId;\n const index = this.tabItems.findIndex((context) =>\n focusedId ? context.tabId === focusedId : context.isSelected,\n );\n\n return index === -1 ? 0 : index;\n },\n\n onHomeButton () {\n if (this.tabItems.length) this.selectFocusOnTab(0);\n },\n\n onEndButton () {\n if (this.tabItems.length) this.selectFocusOnTab(this.tabItems.length - 1);\n },\n\n },\n};\n</script>\n"],"mappings":"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"}
1
+ {"version":3,"file":"tab-group.js","names":[],"sources":["../../../components/Tab/TabGroup.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"dt-tab-group\"\n :class=\"['d-tab-neux', { 'd-tab-neux--vertical': orientation === 'vertical' }]\"\n >\n <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n <div\n ref=\"tabs\"\n :class=\"[\n 'd-tablist',\n TAB_LIST_SIZE_MODIFIERS[String(size)],\n TAB_ORIENTATION_MODIFIERS[orientation],\n orientation !== 'vertical' && TAB_SPREAD_MODIFIERS[spread],\n {\n [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n },\n resolvedTabsClass,\n ]\"\n v-bind=\"tabListChildProps\"\n role=\"tablist\"\n :aria-label=\"label\"\n :aria-orientation=\"orientation\"\n @keydown.left=\"tabLeft\"\n @keydown.right=\"tabRight\"\n @keydown.up=\"tabUp\"\n @keydown.down=\"tabDown\"\n @keydown.enter=\"selectTab\"\n @keydown.space=\"selectTab\"\n @click=\"selectTab\"\n @keydown.home.prevent=\"onHomeButton\"\n @keydown.end.prevent=\"onEndButton\"\n >\n <!-- @slot Slot for Tabs -->\n <slot name=\"tabs\" />\n </div>\n <!-- @slot Default slot for Panel -->\n <slot />\n </div>\n</template>\n\n<script>\nimport {\n TAB_LIST_SIZES,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_LIST_SIZE_MODIFIERS,\n TAB_ORIENTATIONS,\n TAB_ORIENTATION_MODIFIERS,\n TAB_ACTIVATION_MODES,\n TAB_GROUP_KINDS,\n TAB_SPREADS,\n TAB_SPREAD_MODIFIERS,\n} from './TabsConstants';\nimport { ref } from 'vue';\nimport { useIndicatorAnimation } from '@/common/composables/useIndicatorAnimation';\nimport { ordinalSizeValidator } from '@/common/validators';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n name: 'DtTabGroup',\n\n provide () {\n return {\n groupContext: this.provideObj,\n setFocus: this.setFocus,\n };\n },\n\n props: {\n /**\n * Identifies the tab group\n */\n label: {\n type: String,\n default: '',\n },\n\n /**\n * The id of the selected tab panel which should be displayed\n */\n selected: {\n type: String,\n default: '',\n },\n\n /**\n * If true, disables the tab group\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * If true, applies inverted styles to the tab group\n * @deprecated Use v-dt-mode directive instead.\n * @values true, false\n */\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * If true, applies borderless styles to the tab group\n * @values true, false\n */\n borderless: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls how tabs distribute available space within the tab list.\n * @values none, grow, equal\n */\n spread: {\n type: String,\n default: 'none',\n validator (value) {\n return TAB_SPREADS.includes(value);\n },\n },\n\n /**\n * The orientation of the tab list\n * @values horizontal, vertical\n */\n orientation: {\n type: String,\n default: 'horizontal',\n validator (value) {\n return TAB_ORIENTATIONS.includes(value);\n },\n },\n\n /**\n * If provided, applies size styles to the tab group\n * @values 100, 200, 300, 400, 500\n */\n size: {\n type: [String, Number],\n default: 300,\n validator: ordinalSizeValidator(TAB_LIST_SIZES),\n },\n\n /**\n * Pass through classes, used to customize the tab list\n */\n tabsClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Pass through classes, used to customize the tab list\n * @deprecated Use tabsClass\n */\n tabListClass: {\n type: [String, Array, Object],\n default: undefined,\n },\n\n /**\n * Pass through props, used to customize the tab list\n */\n tabListChildProps: {\n type: Object,\n default: () => ({}),\n },\n\n /**\n * The visual style kind applied to tabs within this group.\n * Maps to specific DtButton kind/importance combinations for selected/unselected states.\n * @values default, muted\n */\n kind: {\n type: String,\n default: 'default',\n validator (value) {\n return TAB_GROUP_KINDS.includes(value);\n },\n },\n\n /**\n * If true, the selected tab renders with outlined importance instead of clear.\n * @values true, false\n */\n outlined: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls whether tabs are selected on focus (auto) or on click/keypress (manual)\n * @values auto, manual\n */\n activationMode: {\n type: String,\n default: 'manual',\n validator (value) {\n return TAB_ACTIVATION_MODES.includes(value);\n },\n },\n\n /**\n * If true, the selection indicator animates between tabs on click.\n * @values true, false\n */\n showIndicatorTransition: {\n type: Boolean,\n default: true,\n },\n },\n\n emits: [\n /**\n * Change tab event with the arguments: selected id of the current tab and disabled value\n *\n * @event change\n * @type {Object}\n */\n 'change',\n\n /**\n * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n *\n * @event before-change\n * @type {Event}\n */\n 'before-change',\n ],\n\n setup () {\n const tabs = ref(null);\n const indicator = useIndicatorAnimation(\n tabs, '--tab-indicator-duration', '--tab-indicator-easing',\n );\n return { tabs, indicator };\n },\n\n data () {\n return {\n provideObj: {\n selected: '', // the currently displayed tab id\n disabled: false, // disable group\n size: 300,\n kind: 'default',\n outlined: false,\n orientation: 'horizontal',\n spread: 'none',\n focusedTabId: null, // tracks last-focused tab for roving tabindex\n },\n\n tabItems: [],\n TAB_LIST_SIZE_MODIFIERS,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_ORIENTATION_MODIFIERS,\n TAB_SPREAD_MODIFIERS,\n };\n },\n\n computed: {\n resolvedTabsClass () {\n return this.tabListClass ?? this.tabsClass;\n },\n },\n\n watch: {\n disabled: {\n immediate: true,\n handler () {\n this.provideObj.disabled = this.disabled;\n },\n },\n\n selected: {\n immediate: true,\n handler (newVal, oldVal) {\n this.provideObj.selected = this.selected;\n if (newVal !== oldVal) {\n this.provideObj.focusedTabId = null;\n }\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.provideObj.size = this.size;\n },\n },\n\n kind: {\n immediate: true,\n handler () {\n this.provideObj.kind = this.kind;\n },\n },\n\n outlined: {\n immediate: true,\n handler () {\n this.provideObj.outlined = this.outlined;\n },\n },\n\n orientation: {\n immediate: true,\n handler () {\n this.provideObj.orientation = this.orientation;\n },\n },\n\n spread: {\n immediate: true,\n handler () {\n this.provideObj.spread = this.spread;\n },\n },\n },\n\n mounted () {\n this.updateSelected();\n },\n\n updated () {\n this.updateSelected();\n },\n\n methods: {\n updateSelected () {\n /**\n * Prevent override tab selected by default\n */\n if (!this.provideObj.selected) {\n this.provideObj.selected = this.selected;\n }\n this.tabItems = this.getTabChildren();\n\n // Clear stale focusedTabId if the focused tab was removed\n if (this.provideObj.focusedTabId && !this.tabItems.some(t => t.tabId === this.provideObj.focusedTabId)) {\n this.provideObj.focusedTabId = null;\n }\n },\n\n setFocus (focusId) {\n if (this.provideObj.focusedTabId !== focusId) {\n this.provideObj.focusedTabId = focusId;\n }\n },\n\n getTabChildren () {\n const tabs = Array.from(this.$refs.tabs.querySelectorAll('[role=\"tab\"]'));\n return tabs\n .map(el => {\n return ({\n context: el,\n panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n isSelected: el.getAttribute('aria-selected') === 'true',\n isDisabled: el.getAttribute('aria-disabled') === 'true',\n });\n });\n },\n\n onChange () {\n this.$emit('change', { ...this.provideObj });\n },\n\n tabLeft () {\n if (this.orientation !== 'horizontal') return;\n this.navigatePrevious();\n },\n\n tabRight () {\n if (this.orientation !== 'horizontal') return;\n this.navigateNext();\n },\n\n tabUp (event) {\n if (this.orientation !== 'vertical') return;\n event.preventDefault();\n this.navigatePrevious();\n },\n\n tabDown (event) {\n if (this.orientation !== 'vertical') return;\n event.preventDefault();\n this.navigateNext();\n },\n\n navigatePrevious () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const nextIndex = this.findNextTab(index, -1);\n this.selectFocusOnTab(nextIndex);\n },\n\n navigateNext () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const nextIndex = this.findNextTab(index, 1);\n this.selectFocusOnTab(nextIndex);\n },\n\n findNextTab (fromIndex, direction) {\n const len = this.tabItems.length;\n return (fromIndex + direction + len) % len;\n },\n\n transitionIndicator (panelId, newContext) {\n if (!newContext || !this.showIndicatorTransition) {\n this.provideObj.selected = panelId;\n return;\n }\n\n const old = this.indicator.snapshot('[aria-selected=\"true\"]');\n\n this.provideObj.selected = panelId;\n if (!old) return;\n\n this.$nextTick(() => {\n let hideProps = { backgroundColor: 'transparent' };\n let indicatorExtra = {};\n let pseudoElement = '::after';\n\n if (this.outlined) {\n hideProps = { borderColor: 'transparent', backgroundColor: 'transparent' };\n indicatorExtra = { boxShadow: `inset 0 0 0 ${old.style.borderWidth} ${old.style.borderColor}` };\n pseudoElement = '::before';\n } else if (this.kind === 'muted') {\n indicatorExtra = { backgroundColor: old.style.backgroundColor };\n pseudoElement = '::before';\n }\n\n this.indicator.animate({\n oldRect: old.rect,\n newEl: newContext,\n orientation: this.orientation,\n hideProps,\n indicatorExtra,\n pseudoElement,\n });\n });\n },\n\n selectFocusOnTab (index) {\n const { context, panelId, isDisabled } = this.tabItems[index];\n context.focus();\n if (this.activationMode === 'auto' && !isDisabled) {\n this.indicator.cancel();\n this.provideObj.selected = panelId;\n this.onChange();\n }\n },\n\n selectTab (event) {\n const tabEl = event.target.closest('[role=\"tab\"]');\n const index = tabEl\n ? this.tabItems.findIndex(t => t.context === tabEl)\n : this.getFocusedTabIndex();\n\n if (index === -1) return;\n if (this.tabItems[index]?.isDisabled) return;\n if (this.provideObj.selected === this.tabItems[index]?.panelId) return;\n\n this.$emit('before-change', event);\n if (event.defaultPrevented) return;\n\n // Prevent keyboard defaults (Space scroll, Enter form submit)\n // after confirming the tab change will proceed\n event.preventDefault();\n\n this.selectTabByIndex(index);\n this.onChange();\n },\n\n selectTabByIndex (index) {\n const { context, panelId } = this.tabItems[index];\n this.transitionIndicator(panelId, context);\n context.focus();\n },\n\n getFocusedTabIndex () {\n const focusedId = this.provideObj.focusedTabId;\n const index = this.tabItems.findIndex((context) =>\n focusedId ? context.tabId === focusedId : context.isSelected,\n );\n\n return index === -1 ? 0 : index;\n },\n\n onHomeButton () {\n if (this.tabItems.length) this.selectFocusOnTab(0);\n },\n\n onEndButton () {\n if (this.tabItems.length) this.selectFocusOnTab(this.tabItems.length - 1);\n },\n\n },\n};\n</script>\n"],"mappings":";;;;;;AA8DA,IAAK,IAAU;CACb,MAAM;CAEN,UAAW;AACT,SAAO;GACL,cAAc,KAAK;GACnB,UAAU,KAAK;GAChB;;CAGH,OAAO;EAIL,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAOD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACT,UAAW,GAAO;AAChB,WAAO,EAAY,SAAS,EAAM;;GAErC;EAMD,aAAa;GACX,MAAM;GACN,SAAS;GACT,UAAW,GAAO;AAChB,WAAO,EAAiB,SAAS,EAAM;;GAE1C;EAMD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,WAAW,EAAqB,EAAe;GAChD;EAKD,WAAW;GACT,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,cAAc;GACZ,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS,KAAA;GACV;EAKD,mBAAmB;GACjB,MAAM;GACN,gBAAgB,EAAE;GACnB;EAOD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,UAAW,GAAO;AAChB,WAAO,EAAgB,SAAS,EAAM;;GAEzC;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,gBAAgB;GACd,MAAM;GACN,SAAS;GACT,UAAW,GAAO;AAChB,WAAO,EAAqB,SAAS,EAAM;;GAE9C;EAMD,yBAAyB;GACvB,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO,CAOL,UAQA,gBACD;CAED,QAAS;EACP,IAAM,IAAO,EAAI,KAAK;AAItB,SAAO;GAAE;GAAM,WAHG,EAChB,GAAM,4BAA4B,yBACnC;GACyB;;CAG5B,OAAQ;AACN,SAAO;GACL,YAAY;IACV,UAAU;IACV,UAAU;IACV,MAAM;IACN,MAAM;IACN,UAAU;IACV,aAAa;IACb,QAAQ;IACR,cAAc;IACf;GAED,UAAU,EAAE;GACZ;GACA;GACA;GACA;GACA;GACD;;CAGH,UAAU,EACR,oBAAqB;AACnB,SAAO,KAAK,gBAAgB,KAAK;IAEpC;CAED,OAAO;EACL,UAAU;GACR,WAAW;GACX,UAAW;AACT,SAAK,WAAW,WAAW,KAAK;;GAEnC;EAED,UAAU;GACR,WAAW;GACX,QAAS,GAAQ,GAAQ;AAEvB,IADA,KAAK,WAAW,WAAW,KAAK,UAC5B,MAAW,MACb,KAAK,WAAW,eAAe;;GAGpC;EAED,MAAM;GACJ,WAAW;GACX,UAAW;AACT,SAAK,WAAW,OAAO,KAAK;;GAE/B;EAED,MAAM;GACJ,WAAW;GACX,UAAW;AACT,SAAK,WAAW,OAAO,KAAK;;GAE/B;EAED,UAAU;GACR,WAAW;GACX,UAAW;AACT,SAAK,WAAW,WAAW,KAAK;;GAEnC;EAED,aAAa;GACX,WAAW;GACX,UAAW;AACT,SAAK,WAAW,cAAc,KAAK;;GAEtC;EAED,QAAQ;GACN,WAAW;GACX,UAAW;AACT,SAAK,WAAW,SAAS,KAAK;;GAEjC;EACF;CAED,UAAW;AACT,OAAK,gBAAgB;;CAGvB,UAAW;AACT,OAAK,gBAAgB;;CAGvB,SAAS;EACP,iBAAkB;AAUhB,GANK,KAAK,WAAW,aACnB,KAAK,WAAW,WAAW,KAAK,WAElC,KAAK,WAAW,KAAK,gBAAgB,EAGjC,KAAK,WAAW,gBAAgB,CAAC,KAAK,SAAS,MAAK,MAAK,EAAE,UAAU,KAAK,WAAW,aAAa,KACpG,KAAK,WAAW,eAAe;;EAInC,SAAU,GAAS;AACjB,GAAI,KAAK,WAAW,iBAAiB,MACnC,KAAK,WAAW,eAAe;;EAInC,iBAAkB;AAEhB,UADa,MAAM,KAAK,KAAK,MAAM,KAAK,iBAAiB,iBAAe,CAAC,CAEtE,KAAI,OACK;IACN,SAAS;IACT,SAAS,EAAG,aAAa,gBAAgB,EAAE,QAAQ,aAAa,GAAG;IACnE,OAAO,EAAG,aAAa,KAAK,EAAE,QAAQ,WAAW,GAAG;IACpD,YAAY,EAAG,aAAa,gBAAe,KAAM;IACjD,YAAY,EAAG,aAAa,gBAAe,KAAM;IAClD,EACD;;EAGN,WAAY;AACV,QAAK,MAAM,UAAU,EAAE,GAAG,KAAK,YAAY,CAAC;;EAG9C,UAAW;AACL,QAAK,gBAAgB,gBACzB,KAAK,kBAAkB;;EAGzB,WAAY;AACN,QAAK,gBAAgB,gBACzB,KAAK,cAAc;;EAGrB,MAAO,GAAO;AACR,QAAK,gBAAgB,eACzB,EAAM,gBAAgB,EACtB,KAAK,kBAAkB;;EAGzB,QAAS,GAAO;AACV,QAAK,gBAAgB,eACzB,EAAM,gBAAgB,EACtB,KAAK,cAAc;;EAGrB,mBAAoB;GAClB,IAAM,IAAQ,KAAK,oBAAoB;AACvC,OAAI,MAAU,GAAI;GAElB,IAAM,IAAY,KAAK,YAAY,GAAO,GAAG;AAC7C,QAAK,iBAAiB,EAAU;;EAGlC,eAAgB;GACd,IAAM,IAAQ,KAAK,oBAAoB;AACvC,OAAI,MAAU,GAAI;GAElB,IAAM,IAAY,KAAK,YAAY,GAAO,EAAE;AAC5C,QAAK,iBAAiB,EAAU;;EAGlC,YAAa,GAAW,GAAW;GACjC,IAAM,IAAM,KAAK,SAAS;AAC1B,WAAQ,IAAY,IAAY,KAAO;;EAGzC,oBAAqB,GAAS,GAAY;AACxC,OAAI,CAAC,KAAc,CAAC,KAAK,yBAAyB;AAChD,SAAK,WAAW,WAAW;AAC3B;;GAGF,IAAM,IAAM,KAAK,UAAU,SAAS,2BAAyB;AAE7D,QAAK,WAAW,WAAW,GACtB,KAEL,KAAK,gBAAgB;IACnB,IAAI,IAAY,EAAE,iBAAiB,eAAe,EAC9C,IAAiB,EAAE,EACnB,IAAgB;AAWpB,IATI,KAAK,YACP,IAAY;KAAE,aAAa;KAAe,iBAAiB;KAAe,EAC1E,IAAiB,EAAE,WAAW,eAAe,EAAI,MAAM,YAAW,GAAI,EAAI,MAAM,eAAe,EAC/F,IAAgB,cACP,KAAK,SAAS,YACvB,IAAiB,EAAE,iBAAiB,EAAI,MAAM,iBAAiB,EAC/D,IAAgB,aAGlB,KAAK,UAAU,QAAQ;KACrB,SAAS,EAAI;KACb,OAAO;KACP,aAAa,KAAK;KAClB;KACA;KACA;KACD,CAAC;KACF;;EAGJ,iBAAkB,GAAO;GACvB,IAAM,EAAE,YAAS,YAAS,kBAAe,KAAK,SAAS;AAEvD,GADA,EAAQ,OAAO,EACX,KAAK,mBAAmB,UAAU,CAAC,MACrC,KAAK,UAAU,QAAQ,EACvB,KAAK,WAAW,WAAW,GAC3B,KAAK,UAAU;;EAInB,UAAW,GAAO;GAChB,IAAM,IAAQ,EAAM,OAAO,QAAQ,iBAAe,EAC5C,IAAQ,IACV,KAAK,SAAS,WAAU,MAAK,EAAE,YAAY,EAAK,GAChD,KAAK,oBAAoB;AAEzB,SAAU,OACV,KAAK,SAAS,IAAQ,cACtB,KAAK,WAAW,aAAa,KAAK,SAAS,IAAQ,YAEvD,KAAK,MAAM,iBAAiB,EAAM,EAC9B,GAAM,qBAIV,EAAM,gBAAgB,EAEtB,KAAK,iBAAiB,EAAM,EAC5B,KAAK,UAAU;;EAGjB,iBAAkB,GAAO;GACvB,IAAM,EAAE,YAAS,eAAY,KAAK,SAAS;AAE3C,GADA,KAAK,oBAAoB,GAAS,EAAQ,EAC1C,EAAQ,OAAO;;EAGjB,qBAAsB;GACpB,IAAM,IAAY,KAAK,WAAW,cAC5B,IAAQ,KAAK,SAAS,WAAW,MACrC,IAAY,EAAQ,UAAU,IAAY,EAAQ,WACnD;AAED,UAAO,MAAU,KAAK,IAAI;;EAG5B,eAAgB;AACd,GAAI,KAAK,SAAS,UAAQ,KAAK,iBAAiB,EAAE;;EAGpD,cAAe;AACb,GAAI,KAAK,SAAS,UAAQ,KAAK,iBAAiB,KAAK,SAAS,SAAS,EAAE;;EAG5E;CACF;;aA7fC,EAqCM,OAAA;EApCJ,WAAQ;EACP,OAAK,EAAA,CAAA,cAAA,EAAA,wBAA2C,EAAA,gBAAW,YAAA,CAAA,CAAA;KAG5D,EA6BM,OA7BN,EA6BM;EA5BJ,KAAI;EACH,OAAK;;GAAiC,EAAA,wBAAwB,OAAO,EAAA,KAAI;GAAY,EAAA,0BAA0B,EAAA;GAAsB,EAAA,gBAAW,cAAmB,EAAA,qBAAqB,EAAA;;KAA8B,EAAA,wBAAwB,WAAW,EAAA;KAAqB,EAAA,8BAA8B,aAAa,EAAA;;GAA+B,EAAA;;IAWjV,EAAA,mBAAiB;EACzB,MAAK;EACJ,cAAY,EAAA;EACZ,oBAAkB,EAAA;EAClB,WAAO;+BAAO,EAAA,WAAA,EAAA,QAAA,GAAA,EAAO,EAAA,CAAA,OAAA,CAAA;+BACN,EAAA,YAAA,EAAA,SAAA,GAAA,EAAQ,EAAA,CAAA,QAAA,CAAA;+BACX,EAAA,SAAA,EAAA,MAAA,GAAA,EAAK,EAAA,CAAA,KAAA,CAAA;+BACH,EAAA,WAAA,EAAA,QAAA,GAAA,EAAO,EAAA,CAAA,OAAA,CAAA;+BACN,EAAA,aAAA,EAAA,UAAA,GAAA,EAAS,EAAA,CAAA,QAAA,CAAA;+BACT,EAAA,aAAA,EAAA,UAAA,GAAA,EAAS,EAAA,CAAA,QAAA,CAAA;iCAEF,EAAA,gBAAA,EAAA,aAAA,GAAA,EAAY,EAAA,CAAA,UAAA,CAAA,EAAA,CAAA,OAAA,CAAA;iCACb,EAAA,eAAA,EAAA,YAAA,GAAA,EAAW,EAAA,CAAA,UAAA,CAAA,EAAA,CAAA,MAAA,CAAA;;EAFhC,SAAK,EAAA,OAAA,EAAA,MAAA,GAAA,MAAE,EAAA,aAAA,EAAA,UAAA,GAAA,EAAS;MAKjB,EAAoB,EAAA,QAAA,OAAA,CAAA,EAAA,IAAA,EAAA,EAGtB,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
@@ -0,0 +1 @@
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./text-list-constants.cjs`),t=require(`../../TextList-Dd-ROFiI.cjs`),n=require(`../../TextListItem-DIlrCkaM.cjs`);exports.DT_TEXT_LIST_DEFAULT_TYPE=e.DT_TEXT_LIST_DEFAULT_TYPE,exports.DT_TEXT_LIST_GAP=e.DT_TEXT_LIST_GAP,exports.DT_TEXT_LIST_MARKERS=e.DT_TEXT_LIST_MARKERS,exports.DT_TEXT_LIST_MARKER_TONES=e.DT_TEXT_LIST_MARKER_TONES,exports.DT_TEXT_LIST_ORDERED_MARKERS=e.DT_TEXT_LIST_ORDERED_MARKERS,exports.DT_TEXT_LIST_TYPES=e.DT_TEXT_LIST_TYPES,exports.DT_TEXT_LIST_UNORDERED_MARKERS=e.DT_TEXT_LIST_UNORDERED_MARKERS,exports.DtTextList=t.t,exports.DtTextListItem=n.t;
@@ -0,0 +1,4 @@
1
+ import { DT_TEXT_LIST_DEFAULT_TYPE as e, DT_TEXT_LIST_GAP as t, DT_TEXT_LIST_MARKERS as n, DT_TEXT_LIST_MARKER_TONES as r, DT_TEXT_LIST_ORDERED_MARKERS as i, DT_TEXT_LIST_TYPES as a, DT_TEXT_LIST_UNORDERED_MARKERS as o } from "./text-list-constants.js";
2
+ import { t as s } from "../../TextList-B6XFfQfD.js";
3
+ import { t as c } from "../../TextListItem-ImUi_FWh.js";
4
+ export { e as DT_TEXT_LIST_DEFAULT_TYPE, t as DT_TEXT_LIST_GAP, n as DT_TEXT_LIST_MARKERS, r as DT_TEXT_LIST_MARKER_TONES, i as DT_TEXT_LIST_ORDERED_MARKERS, a as DT_TEXT_LIST_TYPES, o as DT_TEXT_LIST_UNORDERED_MARKERS, s as DtTextList, c as DtTextListItem };
@@ -0,0 +1,2 @@
1
+ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../text/text-constants.cjs`),t=require(`../stack/stack-constants.cjs`);var n=`unordered`,r=t.DT_STACK_GAP.filter(e=>Number(e)<=400),i=Symbol(`DtTextListContext`),a=[`unordered`,`ordered`],o=[`disc`,`circle`,`square`],s=[`decimal`,`lower-alpha`,`upper-alpha`,`lower-roman`,`upper-roman`],c=[...o,...s,`none`],l=Object.keys(e.TEXT_TONE_MODIFIERS),u={DT_TEXT_LIST_DEFAULT_TYPE:n,DT_TEXT_LIST_GAP:r,DT_TEXT_LIST_CONTEXT:i,DT_TEXT_LIST_TYPES:a,DT_TEXT_LIST_UNORDERED_MARKERS:o,DT_TEXT_LIST_ORDERED_MARKERS:s,DT_TEXT_LIST_MARKERS:c,DT_TEXT_LIST_MARKER_TONES:l};exports.DT_TEXT_LIST_CONTEXT=i,exports.DT_TEXT_LIST_DEFAULT_TYPE=n,exports.DT_TEXT_LIST_GAP=r,exports.DT_TEXT_LIST_MARKERS=c,exports.DT_TEXT_LIST_MARKER_TONES=l,exports.DT_TEXT_LIST_ORDERED_MARKERS=s,exports.DT_TEXT_LIST_TYPES=a,exports.DT_TEXT_LIST_UNORDERED_MARKERS=o,exports.default=u;
2
+ //# sourceMappingURL=text-list-constants.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"text-list-constants.cjs","names":["DT_STACK_GAP","TEXT_TONE_MODIFIERS"],"sources":["../../../components/TextList/TextListConstants.js"],"sourcesContent":["import { TEXT_TONE_MODIFIERS } from '@/components/Text/TextConstants';\nimport { DT_STACK_GAP } from '@/components/Stack/StackConstants';\n\nexport const DT_TEXT_LIST_DEFAULT_TYPE = 'unordered';\nexport const DT_TEXT_LIST_GAP = DT_STACK_GAP.filter(gap => Number(gap) <= 400);\n\nexport const DT_TEXT_LIST_CONTEXT = Symbol('DtTextListContext');\n\nexport const DT_TEXT_LIST_TYPES = ['unordered', 'ordered'];\n\nexport const DT_TEXT_LIST_UNORDERED_MARKERS = ['disc', 'circle', 'square'];\nexport const DT_TEXT_LIST_ORDERED_MARKERS = ['decimal', 'lower-alpha', 'upper-alpha', 'lower-roman', 'upper-roman'];\nexport const DT_TEXT_LIST_MARKERS = [\n ...DT_TEXT_LIST_UNORDERED_MARKERS,\n ...DT_TEXT_LIST_ORDERED_MARKERS,\n 'none',\n];\n\nexport const DT_TEXT_LIST_MARKER_TONES = Object.keys(TEXT_TONE_MODIFIERS);\n\nexport default {\n DT_TEXT_LIST_DEFAULT_TYPE,\n DT_TEXT_LIST_GAP,\n DT_TEXT_LIST_CONTEXT,\n DT_TEXT_LIST_TYPES,\n DT_TEXT_LIST_UNORDERED_MARKERS,\n DT_TEXT_LIST_ORDERED_MARKERS,\n DT_TEXT_LIST_MARKERS,\n DT_TEXT_LIST_MARKER_TONES,\n};\n"],"mappings":"uLAGA,IAAa,EAA4B,YAC5B,EAAmBA,EAAAA,aAAa,OAAO,GAAO,OAAO,EAAI,EAAI,IAAI,CAEjE,EAAuB,OAAO,oBAAoB,CAElD,EAAqB,CAAC,YAAa,UAAU,CAE7C,EAAiC,CAAC,OAAQ,SAAU,SAAS,CAC7D,EAA+B,CAAC,UAAW,cAAe,cAAe,cAAe,cAAc,CACtG,EAAuB,CAClC,GAAG,EACH,GAAG,EACH,OACD,CAEY,EAA4B,OAAO,KAAKC,EAAAA,oBAAoB,CAEzE,EAAe,CACb,4BACA,mBACA,uBACA,qBACA,iCACA,+BACA,uBACA,4BACD"}
@@ -0,0 +1,31 @@
1
+ import { TEXT_TONE_MODIFIERS as e } from "../text/text-constants.js";
2
+ import { DT_STACK_GAP as t } from "../stack/stack-constants.js";
3
+ //#region components/TextList/TextListConstants.js
4
+ var n = "unordered", r = t.filter((e) => Number(e) <= 400), i = Symbol("DtTextListContext"), a = ["unordered", "ordered"], o = [
5
+ "disc",
6
+ "circle",
7
+ "square"
8
+ ], s = [
9
+ "decimal",
10
+ "lower-alpha",
11
+ "upper-alpha",
12
+ "lower-roman",
13
+ "upper-roman"
14
+ ], c = [
15
+ ...o,
16
+ ...s,
17
+ "none"
18
+ ], l = Object.keys(e), u = {
19
+ DT_TEXT_LIST_DEFAULT_TYPE: n,
20
+ DT_TEXT_LIST_GAP: r,
21
+ DT_TEXT_LIST_CONTEXT: i,
22
+ DT_TEXT_LIST_TYPES: a,
23
+ DT_TEXT_LIST_UNORDERED_MARKERS: o,
24
+ DT_TEXT_LIST_ORDERED_MARKERS: s,
25
+ DT_TEXT_LIST_MARKERS: c,
26
+ DT_TEXT_LIST_MARKER_TONES: l
27
+ };
28
+ //#endregion
29
+ export { i as DT_TEXT_LIST_CONTEXT, n as DT_TEXT_LIST_DEFAULT_TYPE, r as DT_TEXT_LIST_GAP, c as DT_TEXT_LIST_MARKERS, l as DT_TEXT_LIST_MARKER_TONES, s as DT_TEXT_LIST_ORDERED_MARKERS, a as DT_TEXT_LIST_TYPES, o as DT_TEXT_LIST_UNORDERED_MARKERS, u as default };
30
+
31
+ //# sourceMappingURL=text-list-constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"text-list-constants.js","names":[],"sources":["../../../components/TextList/TextListConstants.js"],"sourcesContent":["import { TEXT_TONE_MODIFIERS } from '@/components/Text/TextConstants';\nimport { DT_STACK_GAP } from '@/components/Stack/StackConstants';\n\nexport const DT_TEXT_LIST_DEFAULT_TYPE = 'unordered';\nexport const DT_TEXT_LIST_GAP = DT_STACK_GAP.filter(gap => Number(gap) <= 400);\n\nexport const DT_TEXT_LIST_CONTEXT = Symbol('DtTextListContext');\n\nexport const DT_TEXT_LIST_TYPES = ['unordered', 'ordered'];\n\nexport const DT_TEXT_LIST_UNORDERED_MARKERS = ['disc', 'circle', 'square'];\nexport const DT_TEXT_LIST_ORDERED_MARKERS = ['decimal', 'lower-alpha', 'upper-alpha', 'lower-roman', 'upper-roman'];\nexport const DT_TEXT_LIST_MARKERS = [\n ...DT_TEXT_LIST_UNORDERED_MARKERS,\n ...DT_TEXT_LIST_ORDERED_MARKERS,\n 'none',\n];\n\nexport const DT_TEXT_LIST_MARKER_TONES = Object.keys(TEXT_TONE_MODIFIERS);\n\nexport default {\n DT_TEXT_LIST_DEFAULT_TYPE,\n DT_TEXT_LIST_GAP,\n DT_TEXT_LIST_CONTEXT,\n DT_TEXT_LIST_TYPES,\n DT_TEXT_LIST_UNORDERED_MARKERS,\n DT_TEXT_LIST_ORDERED_MARKERS,\n DT_TEXT_LIST_MARKERS,\n DT_TEXT_LIST_MARKER_TONES,\n};\n"],"mappings":";;;AAGA,IAAa,IAA4B,aAC5B,IAAmB,EAAa,QAAO,MAAO,OAAO,EAAI,IAAI,IAAI,EAEjE,IAAuB,OAAO,oBAAoB,EAElD,IAAqB,CAAC,aAAa,UAAU,EAE7C,IAAiC;CAAC;CAAQ;CAAU;CAAS,EAC7D,IAA+B;CAAC;CAAW;CAAe;CAAe;CAAe;CAAc,EACtG,IAAuB;CAClC,GAAG;CACH,GAAG;CACH;CACD,EAEY,IAA4B,OAAO,KAAK,EAAoB,EAEzE,IAAe;CACb;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
@@ -0,0 +1 @@
1
+ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../TextListItem-DIlrCkaM.cjs`);exports.default=e.t;
@@ -0,0 +1,2 @@
1
+ import { t as e } from "../../TextListItem-ImUi_FWh.js";
2
+ export { e as default };
@@ -0,0 +1 @@
1
+ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../TextList-Dd-ROFiI.cjs`);exports.default=e.t;
@@ -0,0 +1,2 @@
1
+ import { t as e } from "../../TextList-B6XFfQfD.js";
2
+ export { e as default };
@@ -0,0 +1,2 @@
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./text-list-constants.cjs`);function t(e){return t=>t==null||e.includes(String(t))}var n=t=>e.DT_TEXT_LIST_TYPES.includes(String(t)),r=t(e.DT_TEXT_LIST_MARKERS),i=t(e.DT_TEXT_LIST_MARKER_TONES),a=t(e.DT_TEXT_LIST_GAP);exports.textListGapValidator=a,exports.textListMarkerToneValidator=i,exports.textListMarkerValidator=r,exports.textListTypeValidator=n;
2
+ //# sourceMappingURL=validators.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"validators.cjs","names":["DT_TEXT_LIST_TYPES","DT_TEXT_LIST_MARKERS","DT_TEXT_LIST_MARKER_TONES","DT_TEXT_LIST_GAP"],"sources":["../../../components/TextList/Validators.js"],"sourcesContent":["import {\n DT_TEXT_LIST_TYPES,\n DT_TEXT_LIST_MARKERS,\n DT_TEXT_LIST_MARKER_TONES,\n DT_TEXT_LIST_GAP,\n} from './TextListConstants';\n\nfunction optionalListValidator (list) {\n return value => value == null || list.includes(String(value));\n}\n\nexport const textListTypeValidator = value => DT_TEXT_LIST_TYPES.includes(String(value));\nexport const textListMarkerValidator = optionalListValidator(DT_TEXT_LIST_MARKERS);\nexport const textListMarkerToneValidator = optionalListValidator(DT_TEXT_LIST_MARKER_TONES);\nexport const textListGapValidator = optionalListValidator(DT_TEXT_LIST_GAP);\n"],"mappings":"gHAOA,SAAS,EAAuB,EAAM,CACpC,MAAO,IAAS,GAAS,MAAQ,EAAK,SAAS,OAAO,EAAM,CAAC,CAG/D,IAAa,EAAwB,GAASA,EAAAA,mBAAmB,SAAS,OAAO,EAAM,CAAC,CAC3E,EAA0B,EAAsBC,EAAAA,qBAAqB,CACrE,EAA8B,EAAsBC,EAAAA,0BAA0B,CAC9E,EAAuB,EAAsBC,EAAAA,iBAAiB"}
@@ -0,0 +1,10 @@
1
+ import { DT_TEXT_LIST_GAP as e, DT_TEXT_LIST_MARKERS as t, DT_TEXT_LIST_MARKER_TONES as n, DT_TEXT_LIST_TYPES as r } from "./text-list-constants.js";
2
+ //#region components/TextList/Validators.js
3
+ function i(e) {
4
+ return (t) => t == null || e.includes(String(t));
5
+ }
6
+ var a = (e) => r.includes(String(e)), o = i(t), s = i(n), c = i(e);
7
+ //#endregion
8
+ export { c as textListGapValidator, s as textListMarkerToneValidator, o as textListMarkerValidator, a as textListTypeValidator };
9
+
10
+ //# sourceMappingURL=validators.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"validators.js","names":[],"sources":["../../../components/TextList/Validators.js"],"sourcesContent":["import {\n DT_TEXT_LIST_TYPES,\n DT_TEXT_LIST_MARKERS,\n DT_TEXT_LIST_MARKER_TONES,\n DT_TEXT_LIST_GAP,\n} from './TextListConstants';\n\nfunction optionalListValidator (list) {\n return value => value == null || list.includes(String(value));\n}\n\nexport const textListTypeValidator = value => DT_TEXT_LIST_TYPES.includes(String(value));\nexport const textListMarkerValidator = optionalListValidator(DT_TEXT_LIST_MARKERS);\nexport const textListMarkerToneValidator = optionalListValidator(DT_TEXT_LIST_MARKER_TONES);\nexport const textListGapValidator = optionalListValidator(DT_TEXT_LIST_GAP);\n"],"mappings":";;AAOA,SAAS,EAAuB,GAAM;AACpC,SAAO,MAAS,KAAS,QAAQ,EAAK,SAAS,OAAO,EAAM,CAAC;;AAG/D,IAAa,KAAwB,MAAS,EAAmB,SAAS,OAAO,EAAM,CAAC,EAC3E,IAA0B,EAAsB,EAAqB,EACrE,IAA8B,EAAsB,EAA0B,EAC9E,IAAuB,EAAsB,EAAiB"}
@@ -1 +1 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./toast-constants.cjs`),t=require(`../../Toast-DX-REYXG.cjs`);exports.DtToast=t.t,exports.TOAST_MIN_DURATION=e.TOAST_MIN_DURATION,exports.TOAST_ROLES=e.TOAST_ROLES;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./toast-constants.cjs`),t=require(`../../Toast-D8ARDEgT.cjs`);exports.DtToast=t.t,exports.TOAST_MIN_DURATION=e.TOAST_MIN_DURATION,exports.TOAST_ROLES=e.TOAST_ROLES;
@@ -1,3 +1,3 @@
1
1
  import { TOAST_MIN_DURATION as e, TOAST_ROLES as t } from "./toast-constants.js";
2
- import { t as n } from "../../Toast-CHbVmbBg.js";
2
+ import { t as n } from "../../Toast-BIHkIpZP.js";
3
3
  export { n as DtToast, e as TOAST_MIN_DURATION, t as TOAST_ROLES };
@@ -1 +1 @@
1
- Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../Toast-DX-REYXG.cjs`);exports.default=e.t;
1
+ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../Toast-D8ARDEgT.cjs`);exports.default=e.t;
@@ -1,2 +1,2 @@
1
- import { t as e } from "../../Toast-CHbVmbBg.js";
1
+ import { t as e } from "../../Toast-BIHkIpZP.js";
2
2
  export { e as default };
@@ -1,2 +1,2 @@
1
- Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`./toggle-constants.cjs`);let r=require(`vue`);var i={name:`DtToggle`,inheritAttrs:!1,props:{id:{type:String,default(){return e.getUniqueString()}},disabled:{type:Boolean,default:!1},modelValue:{type:[Boolean,String],default:!1,validator:e=>n.TOGGLE_CHECKED_VALUES.includes(e)},toggleOnClick:{type:Boolean,default:!0},size:{type:[String,Number],default:300,validator:e=>Object.keys(n.TOGGLE_SIZE_MODIFIERS).includes(String(e))},showLabel:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0},labelClass:{type:[String,Array,Object],default:``},labelChildProps:{type:Object,default:()=>({})}},emits:[`update:modelValue`],data(){return{internalChecked:this.modelValue,hasSlotContent:e.hasSlotContent}},computed:{inputListeners(){return{...e.removeClassStyleAttrs(this.$attrs),onClick:()=>this.toggleCheckedValue()}},isIndeterminate(){return this.internalChecked===`mixed`},toggleRole(){return this.isIndeterminate?`checkbox`:`switch`},toggleClasses(){return[`d-toggle`,n.TOGGLE_SIZE_MODIFIERS[String(this.size)],{"d-toggle--checked":this.internalChecked===!0,"d-toggle--disabled":this.disabled,"d-toggle--indeterminate":this.isIndeterminate}]}},watch:{modelValue(e){this.internalChecked=e}},mounted(){this.runValidations()},methods:{toggleCheckedValue(){this.$emit(`update:modelValue`,!this.internalChecked),this.toggleOnClick&&(this.internalChecked=!this.internalChecked)},hasSlotLabel(){return!!this.$slots.default},runValidations(){!(this.showLabel&&this.hasSlotLabel())&&!this.$attrs[`aria-label`]&&console.info(`[Dialtone] A label is required for accessibility. Provide a label and use show-label="false" to hide it visually.`)}}},a=[`for`],o=[`id`,`role`,`aria-checked`,`disabled`,`aria-disabled`],s={key:0,class:`d-toggle__inner`};function c(e,t,n,i,c,l){return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,{class:(0,r.normalizeClass)([`d-toggle-wrapper`,e.$attrs.class]),style:(0,r.normalizeStyle)(e.$attrs.style)},[n.showLabel&&c.hasSlotContent(e.$slots.default)?((0,r.openBlock)(),(0,r.createElementBlock)(`label`,(0,r.mergeProps)({key:0,class:n.labelClass,for:n.id},n.labelChildProps,{"data-qa":`toggle-label`}),[(0,r.renderSlot)(e.$slots,`default`)],16,a)):(0,r.createCommentVNode)(``,!0),(0,r.createElementVNode)(`button`,(0,r.mergeProps)({id:n.id,role:l.toggleRole,type:`button`,"aria-checked":c.internalChecked.toString(),disabled:n.disabled,"aria-disabled":n.disabled.toString(),class:l.toggleClasses},l.inputListeners),[n.showIcon?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,s)):(0,r.createCommentVNode)(``,!0)],16,o)],6)}var l=t.t(i,[[`render`,c]]);exports.default=l;
1
+ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`./toggle-constants.cjs`);let i=require(`vue`);var a={name:`DtToggle`,inheritAttrs:!1,props:{id:{type:String,default(){return t.getUniqueString()}},disabled:{type:Boolean,default:!1},modelValue:{type:[Boolean,String],default:!1,validator:e=>r.TOGGLE_CHECKED_VALUES.includes(e)},toggleOnClick:{type:Boolean,default:!0},size:{type:[String,Number],default:300,validator:e.ordinalSizeValidator(r.TOGGLE_SIZE_MODIFIERS)},showLabel:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0},labelClass:{type:[String,Array,Object],default:``},labelChildProps:{type:Object,default:()=>({})}},emits:[`update:modelValue`],data(){return{internalChecked:this.modelValue,hasSlotContent:t.hasSlotContent}},computed:{inputListeners(){return{...t.removeClassStyleAttrs(this.$attrs),onClick:()=>this.toggleCheckedValue()}},isIndeterminate(){return this.internalChecked===`mixed`},toggleRole(){return this.isIndeterminate?`checkbox`:`switch`},toggleClasses(){return[`d-toggle`,r.TOGGLE_SIZE_MODIFIERS[String(this.size)],{"d-toggle--checked":this.internalChecked===!0,"d-toggle--disabled":this.disabled,"d-toggle--indeterminate":this.isIndeterminate}]}},watch:{modelValue(e){this.internalChecked=e}},mounted(){this.runValidations()},methods:{toggleCheckedValue(){this.$emit(`update:modelValue`,!this.internalChecked),this.toggleOnClick&&(this.internalChecked=!this.internalChecked)},hasSlotLabel(){return!!this.$slots.default},runValidations(){!(this.showLabel&&this.hasSlotLabel())&&!this.$attrs[`aria-label`]&&console.info(`[Dialtone] A label is required for accessibility. Provide a label and use show-label="false" to hide it visually.`)}}},o=[`for`],s=[`id`,`role`,`aria-checked`,`disabled`,`aria-disabled`],c={key:0,class:`d-toggle__inner`};function l(e,t,n,r,a,l){return(0,i.openBlock)(),(0,i.createElementBlock)(`div`,{class:(0,i.normalizeClass)([`d-toggle-wrapper`,e.$attrs.class]),style:(0,i.normalizeStyle)(e.$attrs.style)},[n.showLabel&&a.hasSlotContent(e.$slots.default)?((0,i.openBlock)(),(0,i.createElementBlock)(`label`,(0,i.mergeProps)({key:0,class:n.labelClass,for:n.id},n.labelChildProps,{"data-qa":`toggle-label`}),[(0,i.renderSlot)(e.$slots,`default`)],16,o)):(0,i.createCommentVNode)(``,!0),(0,i.createElementVNode)(`button`,(0,i.mergeProps)({id:n.id,role:l.toggleRole,type:`button`,"aria-checked":a.internalChecked.toString(),disabled:n.disabled,"aria-disabled":n.disabled.toString(),class:l.toggleClasses},l.inputListeners),[n.showIcon?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,c)):(0,i.createCommentVNode)(``,!0)],16,s)],6)}var u=n.t(a,[[`render`,l]]);exports.default=u;
2
2
  //# sourceMappingURL=toggle.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"toggle.cjs","names":[],"sources":["../../../components/Toggle/Toggle.vue"],"sourcesContent":["<template>\n <div\n :class=\"['d-toggle-wrapper', $attrs.class]\"\n :style=\"$attrs.style\"\n >\n <label\n v-if=\"showLabel && hasSlotContent($slots.default)\"\n :class=\"labelClass\"\n :for=\"id\"\n v-bind=\"labelChildProps\"\n data-qa=\"toggle-label\"\n >\n <!-- @slot Slot for the main content -->\n <slot />\n </label>\n <button\n :id=\"id\"\n :role=\"toggleRole\"\n type=\"button\"\n :aria-checked=\"internalChecked.toString()\"\n :disabled=\"disabled\"\n :aria-disabled=\"disabled.toString()\"\n :class=\"toggleClasses\"\n v-bind=\"inputListeners\"\n >\n <span\n v-if=\"showIcon\"\n class=\"d-toggle__inner\"\n />\n </button>\n </div>\n</template>\n\n<script>\nimport { getUniqueString, hasSlotContent, removeClassStyleAttrs } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/Toggle/ToggleConstants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n name: 'DtToggle',\n\n inheritAttrs: false,\n\n props: {\n\n /**\n * The id of the toggle\n */\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * Disables the toggle interactions\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Value of the toggle\n * @values true, false, 'mixed'\n */\n modelValue: {\n type: [Boolean, String],\n default: false,\n validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n },\n\n /**\n * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n * via the checked prop or v-model. Change events will still be triggered.\n * @values true, false\n */\n toggleOnClick: {\n type: Boolean,\n default: true,\n },\n\n /**\n * The size of the toggle.\n * @values 200, 300\n */\n size: {\n type: [String, Number],\n default: 300,\n validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(String(s)),\n },\n\n /**\n * Determines visibility of toggle label.\n * @values true, false\n */\n showLabel: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Shows the icon\n * @values true, false\n */\n showIcon: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Used to customize the label container\n */\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * A set of props that are passed into the label container\n */\n labelChildProps: {\n type: Object,\n default: () => ({}),\n },\n },\n\n emits: [\n /**\n * Event fired to sync the modelValue prop with the parent component\n *\n * @event update:modelValue\n * @type {Boolean}\n */\n 'update:modelValue',\n ],\n\n data () {\n return {\n internalChecked: this.modelValue,\n hasSlotContent,\n };\n },\n\n computed: {\n inputListeners () {\n return {\n ...removeClassStyleAttrs(this.$attrs),\n onClick: () => this.toggleCheckedValue(),\n };\n },\n\n isIndeterminate () {\n return this.internalChecked === 'mixed';\n },\n\n toggleRole () {\n return this.isIndeterminate ? 'checkbox' : 'switch';\n },\n\n toggleClasses () {\n return [\n 'd-toggle',\n TOGGLE_SIZE_MODIFIERS[String(this.size)],\n {\n 'd-toggle--checked': this.internalChecked === true,\n 'd-toggle--disabled': this.disabled,\n 'd-toggle--indeterminate': this.isIndeterminate,\n },\n ];\n },\n },\n\n watch: {\n modelValue (newChecked) {\n this.internalChecked = newChecked;\n },\n },\n\n mounted () {\n this.runValidations();\n },\n\n methods: {\n toggleCheckedValue () {\n this.$emit('update:modelValue', !this.internalChecked);\n\n if (this.toggleOnClick) {\n this.internalChecked = !this.internalChecked;\n }\n },\n\n hasSlotLabel () {\n return !!(this.$slots.default);\n },\n\n runValidations () {\n const hasVisibleLabel = this.showLabel && this.hasSlotLabel();\n if (!hasVisibleLabel && !this.$attrs['aria-label']) {\n console.info(\n '[Dialtone] A label is required for accessibility. Provide a label and use show-label=\"false\" to hide it visually.',\n );\n }\n },\n },\n};\n</script>\n"],"mappings":"sSAyCA,IAAK,EAAU,CAEb,KAAM,WAEN,aAAc,GAEd,MAAO,CAKL,GAAI,CACF,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,iBAAiB,EACtC,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,CAAC,QAAS,OAAO,CACvB,QAAS,GACT,UAAY,GAAM,EAAA,sBAAsB,SAAS,EAAE,CACpD,CAOD,cAAe,CACb,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAY,GAAM,OAAO,KAAK,EAAA,sBAAsB,CAAC,SAAS,OAAO,EAAE,CAAC,CACzE,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,gBAAiB,CACf,KAAM,OACN,aAAgB,EAAE,EACnB,CACF,CAED,MAAO,CAOL,oBACD,CAED,MAAQ,CACN,MAAO,CACL,gBAAiB,KAAK,WACtB,eAAA,EAAA,eACD,EAGH,SAAU,CACR,gBAAkB,CAChB,MAAO,CACL,GAAG,EAAA,sBAAsB,KAAK,OAAO,CACrC,YAAe,KAAK,oBAAoB,CACzC,EAGH,iBAAmB,CACjB,OAAO,KAAK,kBAAoB,SAGlC,YAAc,CACZ,OAAO,KAAK,gBAAkB,WAAa,UAG7C,eAAiB,CACf,MAAO,CACL,WACA,EAAA,sBAAsB,OAAO,KAAK,KAAK,EACvC,CACE,oBAAqB,KAAK,kBAAoB,GAC9C,qBAAsB,KAAK,SAC3B,0BAA2B,KAAK,gBACjC,CACF,EAEJ,CAED,MAAO,CACL,WAAY,EAAY,CACtB,KAAK,gBAAkB,GAE1B,CAED,SAAW,CACT,KAAK,gBAAgB,EAGvB,QAAS,CACP,oBAAsB,CACpB,KAAK,MAAM,oBAAqB,CAAC,KAAK,gBAAgB,CAElD,KAAK,gBACP,KAAK,gBAAkB,CAAC,KAAK,kBAIjC,cAAgB,CACd,MAAO,CAAC,CAAE,KAAK,OAAO,SAGxB,gBAAkB,CAEZ,EADoB,KAAK,WAAa,KAAK,cAAc,GACrC,CAAC,KAAK,OAAO,eACnC,QAAQ,KACN,oHACD,EAGN,CACF,8EAtLO,MAAM,4FAGN,MAAA,CA5BH,OAAA,EAAA,EAAA,gBAAK,CAAA,mBAAuB,EAAA,OAAO,MAAK,CAAA,CACxC,OAAA,EAAA,EAAA,gBAAO,EAAA,OAAO,MAAK,GAGZ,EAAA,WAAa,EAAA,eAAe,EAAA,OAAO,QAAO,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQ1C,SAAA,EAAA,EAAA,YAAA,OAPL,MAAO,EAAA,WACP,IAAK,EAAA,IACE,EAAA,gBAAe,CACvB,UAAQ,eAAc,CAAA,CAAA,EAAA,EAAA,EAAA,YAGd,EAAA,OAAA,UAAA,CAAA,CAAA,GAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,EAAA,EAAA,EAAA,oBAgBD,UAAA,EAAA,EAAA,YAAA,CAbN,GAAI,EAAA,GACJ,KAAM,EAAA,WACP,KAAK,SACJ,eAAc,EAAA,gBAAgB,UAAQ,CACtC,SAAU,EAAA,SACV,gBAAe,EAAA,SAAS,UAAQ,CAChC,MAAO,EAAA,eACA,EAAA,eAAc,CAAA,CAGd,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEN,OAHF,EAGE,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,GAAA,EAAA,CAAA,CAAA,EAAA"}
1
+ {"version":3,"file":"toggle.cjs","names":[],"sources":["../../../components/Toggle/Toggle.vue"],"sourcesContent":["<template>\n <div\n :class=\"['d-toggle-wrapper', $attrs.class]\"\n :style=\"$attrs.style\"\n >\n <label\n v-if=\"showLabel && hasSlotContent($slots.default)\"\n :class=\"labelClass\"\n :for=\"id\"\n v-bind=\"labelChildProps\"\n data-qa=\"toggle-label\"\n >\n <!-- @slot Slot for the main content -->\n <slot />\n </label>\n <button\n :id=\"id\"\n :role=\"toggleRole\"\n type=\"button\"\n :aria-checked=\"internalChecked.toString()\"\n :disabled=\"disabled\"\n :aria-disabled=\"disabled.toString()\"\n :class=\"toggleClasses\"\n v-bind=\"inputListeners\"\n >\n <span\n v-if=\"showIcon\"\n class=\"d-toggle__inner\"\n />\n </button>\n </div>\n</template>\n\n<script>\nimport { getUniqueString, hasSlotContent, removeClassStyleAttrs } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/Toggle/ToggleConstants';\nimport { ordinalSizeValidator } from '@/common/validators';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n name: 'DtToggle',\n\n inheritAttrs: false,\n\n props: {\n\n /**\n * The id of the toggle\n */\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /**\n * Disables the toggle interactions\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Value of the toggle\n * @values true, false, 'mixed'\n */\n modelValue: {\n type: [Boolean, String],\n default: false,\n validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n },\n\n /**\n * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n * via the checked prop or v-model. Change events will still be triggered.\n * @values true, false\n */\n toggleOnClick: {\n type: Boolean,\n default: true,\n },\n\n /**\n * The size of the toggle.\n * @values 200, 300\n */\n size: {\n type: [String, Number],\n default: 300,\n validator: ordinalSizeValidator(TOGGLE_SIZE_MODIFIERS),\n },\n\n /**\n * Determines visibility of toggle label.\n * @values true, false\n */\n showLabel: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Shows the icon\n * @values true, false\n */\n showIcon: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Used to customize the label container\n */\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * A set of props that are passed into the label container\n */\n labelChildProps: {\n type: Object,\n default: () => ({}),\n },\n },\n\n emits: [\n /**\n * Event fired to sync the modelValue prop with the parent component\n *\n * @event update:modelValue\n * @type {Boolean}\n */\n 'update:modelValue',\n ],\n\n data () {\n return {\n internalChecked: this.modelValue,\n hasSlotContent,\n };\n },\n\n computed: {\n inputListeners () {\n return {\n ...removeClassStyleAttrs(this.$attrs),\n onClick: () => this.toggleCheckedValue(),\n };\n },\n\n isIndeterminate () {\n return this.internalChecked === 'mixed';\n },\n\n toggleRole () {\n return this.isIndeterminate ? 'checkbox' : 'switch';\n },\n\n toggleClasses () {\n return [\n 'd-toggle',\n TOGGLE_SIZE_MODIFIERS[String(this.size)],\n {\n 'd-toggle--checked': this.internalChecked === true,\n 'd-toggle--disabled': this.disabled,\n 'd-toggle--indeterminate': this.isIndeterminate,\n },\n ];\n },\n },\n\n watch: {\n modelValue (newChecked) {\n this.internalChecked = newChecked;\n },\n },\n\n mounted () {\n this.runValidations();\n },\n\n methods: {\n toggleCheckedValue () {\n this.$emit('update:modelValue', !this.internalChecked);\n\n if (this.toggleOnClick) {\n this.internalChecked = !this.internalChecked;\n }\n },\n\n hasSlotLabel () {\n return !!(this.$slots.default);\n },\n\n runValidations () {\n const hasVisibleLabel = this.showLabel && this.hasSlotLabel();\n if (!hasVisibleLabel && !this.$attrs['aria-label']) {\n console.info(\n '[Dialtone] A label is required for accessibility. Provide a label and use show-label=\"false\" to hide it visually.',\n );\n }\n },\n },\n};\n</script>\n"],"mappings":"qVA0CA,IAAK,EAAU,CAEb,KAAM,WAEN,aAAc,GAEd,MAAO,CAKL,GAAI,CACF,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,iBAAiB,EACtC,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,CAAC,QAAS,OAAO,CACvB,QAAS,GACT,UAAY,GAAM,EAAA,sBAAsB,SAAS,EAAE,CACpD,CAOD,cAAe,CACb,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAW,EAAA,qBAAqB,EAAA,sBAAsB,CACvD,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,gBAAiB,CACf,KAAM,OACN,aAAgB,EAAE,EACnB,CACF,CAED,MAAO,CAOL,oBACD,CAED,MAAQ,CACN,MAAO,CACL,gBAAiB,KAAK,WACtB,eAAA,EAAA,eACD,EAGH,SAAU,CACR,gBAAkB,CAChB,MAAO,CACL,GAAG,EAAA,sBAAsB,KAAK,OAAO,CACrC,YAAe,KAAK,oBAAoB,CACzC,EAGH,iBAAmB,CACjB,OAAO,KAAK,kBAAoB,SAGlC,YAAc,CACZ,OAAO,KAAK,gBAAkB,WAAa,UAG7C,eAAiB,CACf,MAAO,CACL,WACA,EAAA,sBAAsB,OAAO,KAAK,KAAK,EACvC,CACE,oBAAqB,KAAK,kBAAoB,GAC9C,qBAAsB,KAAK,SAC3B,0BAA2B,KAAK,gBACjC,CACF,EAEJ,CAED,MAAO,CACL,WAAY,EAAY,CACtB,KAAK,gBAAkB,GAE1B,CAED,SAAW,CACT,KAAK,gBAAgB,EAGvB,QAAS,CACP,oBAAsB,CACpB,KAAK,MAAM,oBAAqB,CAAC,KAAK,gBAAgB,CAElD,KAAK,gBACP,KAAK,gBAAkB,CAAC,KAAK,kBAIjC,cAAgB,CACd,MAAO,CAAC,CAAE,KAAK,OAAO,SAGxB,gBAAkB,CAEZ,EADoB,KAAK,WAAa,KAAK,cAAc,GACrC,CAAC,KAAK,OAAO,eACnC,QAAQ,KACN,oHACD,EAGN,CACF,8EAvLO,MAAM,4FAGN,MAAA,CA5BH,OAAA,EAAA,EAAA,gBAAK,CAAA,mBAAuB,EAAA,OAAO,MAAK,CAAA,CACxC,OAAA,EAAA,EAAA,gBAAO,EAAA,OAAO,MAAK,GAGZ,EAAA,WAAa,EAAA,eAAe,EAAA,OAAO,QAAO,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQ1C,SAAA,EAAA,EAAA,YAAA,OAPL,MAAO,EAAA,WACP,IAAK,EAAA,IACE,EAAA,gBAAe,CACvB,UAAQ,eAAc,CAAA,CAAA,EAAA,EAAA,EAAA,YAGd,EAAA,OAAA,UAAA,CAAA,CAAA,GAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,EAAA,EAAA,EAAA,oBAgBD,UAAA,EAAA,EAAA,YAAA,CAbN,GAAI,EAAA,GACJ,KAAM,EAAA,WACP,KAAK,SACJ,eAAc,EAAA,gBAAgB,UAAQ,CACtC,SAAU,EAAA,SACV,gBAAe,EAAA,SAAS,UAAQ,CAChC,MAAO,EAAA,eACA,EAAA,eAAc,CAAA,CAGd,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEN,OAHF,EAGE,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,GAAA,EAAA,CAAA,CAAA,EAAA"}