@dialpad/dialtone-vue 2.159.0-beta.2 → 2.159.0

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 (220) hide show
  1. package/dist/common/sr_only_close_button.vue.cjs +3 -3
  2. package/dist/common/sr_only_close_button.vue.cjs.map +1 -1
  3. package/dist/common/sr_only_close_button.vue.js +3 -3
  4. package/dist/common/sr_only_close_button.vue.js.map +1 -1
  5. package/dist/common/storybook_utils.cjs +8 -0
  6. package/dist/common/storybook_utils.cjs.map +1 -0
  7. package/dist/common/storybook_utils.js +8 -0
  8. package/dist/common/storybook_utils.js.map +1 -0
  9. package/dist/component-documentation.json +1 -1
  10. package/dist/components/avatar/avatar.vue.cjs +24 -13
  11. package/dist/components/avatar/avatar.vue.cjs.map +1 -1
  12. package/dist/components/avatar/avatar.vue.js +24 -13
  13. package/dist/components/avatar/avatar.vue.js.map +1 -1
  14. package/dist/components/badge/badge.vue.cjs +34 -13
  15. package/dist/components/badge/badge.vue.cjs.map +1 -1
  16. package/dist/components/badge/badge.vue.js +34 -13
  17. package/dist/components/badge/badge.vue.js.map +1 -1
  18. package/dist/components/chip/chip.vue.cjs +4 -4
  19. package/dist/components/chip/chip.vue.cjs.map +1 -1
  20. package/dist/components/chip/chip.vue.js +4 -4
  21. package/dist/components/chip/chip.vue.js.map +1 -1
  22. package/dist/components/collapsible/collapsible.vue.cjs +3 -4
  23. package/dist/components/collapsible/collapsible.vue.cjs.map +1 -1
  24. package/dist/components/collapsible/collapsible.vue.js +3 -4
  25. package/dist/components/collapsible/collapsible.vue.js.map +1 -1
  26. package/dist/components/datepicker/modules/month-year-picker.vue.cjs +6 -14
  27. package/dist/components/datepicker/modules/month-year-picker.vue.cjs.map +1 -1
  28. package/dist/components/datepicker/modules/month-year-picker.vue.js +6 -14
  29. package/dist/components/datepicker/modules/month-year-picker.vue.js.map +1 -1
  30. package/dist/components/emoji_picker/modules/emoji_search.vue.cjs +5 -6
  31. package/dist/components/emoji_picker/modules/emoji_search.vue.cjs.map +1 -1
  32. package/dist/components/emoji_picker/modules/emoji_search.vue.js +5 -6
  33. package/dist/components/emoji_picker/modules/emoji_search.vue.js.map +1 -1
  34. package/dist/components/emoji_picker/modules/emoji_tabset.vue.cjs +14 -23
  35. package/dist/components/emoji_picker/modules/emoji_tabset.vue.cjs.map +1 -1
  36. package/dist/components/emoji_picker/modules/emoji_tabset.vue.js +14 -23
  37. package/dist/components/emoji_picker/modules/emoji_tabset.vue.js.map +1 -1
  38. package/dist/components/empty_state/empty_state.vue.cjs +80 -20
  39. package/dist/components/empty_state/empty_state.vue.cjs.map +1 -1
  40. package/dist/components/empty_state/empty_state.vue.js +81 -21
  41. package/dist/components/empty_state/empty_state.vue.js.map +1 -1
  42. package/dist/components/empty_state/empty_state_constants.cjs +0 -18
  43. package/dist/components/empty_state/empty_state_constants.cjs.map +1 -1
  44. package/dist/components/empty_state/empty_state_constants.js +0 -18
  45. package/dist/components/empty_state/empty_state_constants.js.map +1 -1
  46. package/dist/components/icon/icon.vue.cjs +2 -2
  47. package/dist/components/icon/icon.vue.js +2 -2
  48. package/dist/components/illustration/illustration.vue.cjs +2 -2
  49. package/dist/components/illustration/illustration.vue.js +2 -2
  50. package/dist/components/image_viewer/image_viewer.vue.cjs +4 -4
  51. package/dist/components/image_viewer/image_viewer.vue.cjs.map +1 -1
  52. package/dist/components/image_viewer/image_viewer.vue.js +4 -4
  53. package/dist/components/image_viewer/image_viewer.vue.js.map +1 -1
  54. package/dist/components/keyboard_shortcut/keyboard_shortcut.vue.cjs +9 -24
  55. package/dist/components/keyboard_shortcut/keyboard_shortcut.vue.cjs.map +1 -1
  56. package/dist/components/keyboard_shortcut/keyboard_shortcut.vue.js +7 -22
  57. package/dist/components/keyboard_shortcut/keyboard_shortcut.vue.js.map +1 -1
  58. package/dist/components/keyboard_shortcut/keyboard_shortcut_constants.cjs +14 -8
  59. package/dist/components/keyboard_shortcut/keyboard_shortcut_constants.cjs.map +1 -1
  60. package/dist/components/keyboard_shortcut/keyboard_shortcut_constants.js +15 -9
  61. package/dist/components/keyboard_shortcut/keyboard_shortcut_constants.js.map +1 -1
  62. package/dist/components/list_item/list_item.vue.cjs +3 -3
  63. package/dist/components/list_item/list_item.vue.cjs.map +1 -1
  64. package/dist/components/list_item/list_item.vue.js +3 -3
  65. package/dist/components/list_item/list_item.vue.js.map +1 -1
  66. package/dist/components/modal/modal.vue.cjs +4 -4
  67. package/dist/components/modal/modal.vue.cjs.map +1 -1
  68. package/dist/components/modal/modal.vue.js +4 -4
  69. package/dist/components/modal/modal.vue.js.map +1 -1
  70. package/dist/components/notice/notice_action.vue.cjs +4 -4
  71. package/dist/components/notice/notice_action.vue.cjs.map +1 -1
  72. package/dist/components/notice/notice_action.vue.js +4 -4
  73. package/dist/components/notice/notice_action.vue.js.map +1 -1
  74. package/dist/components/notice/notice_icon.vue.cjs +8 -12
  75. package/dist/components/notice/notice_icon.vue.cjs.map +1 -1
  76. package/dist/components/notice/notice_icon.vue.js +8 -12
  77. package/dist/components/notice/notice_icon.vue.js.map +1 -1
  78. package/dist/components/pagination/pagination.vue.cjs +5 -11
  79. package/dist/components/pagination/pagination.vue.cjs.map +1 -1
  80. package/dist/components/pagination/pagination.vue.js +5 -11
  81. package/dist/components/pagination/pagination.vue.js.map +1 -1
  82. package/dist/components/popover/popover_header_footer.vue.cjs +4 -4
  83. package/dist/components/popover/popover_header_footer.vue.cjs.map +1 -1
  84. package/dist/components/popover/popover_header_footer.vue.js +4 -4
  85. package/dist/components/popover/popover_header_footer.vue.js.map +1 -1
  86. package/dist/dialtone-vue.cjs +3 -0
  87. package/dist/dialtone-vue.cjs.map +1 -1
  88. package/dist/dialtone-vue.js +5 -2
  89. package/dist/lib/general-row.cjs +1 -0
  90. package/dist/lib/general-row.cjs.map +1 -1
  91. package/dist/lib/general-row.js +2 -1
  92. package/dist/lib/keyboard-shortcut.cjs +2 -0
  93. package/dist/lib/keyboard-shortcut.cjs.map +1 -1
  94. package/dist/lib/keyboard-shortcut.js +4 -2
  95. package/dist/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.cjs +5 -5
  96. package/dist/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.cjs.map +1 -1
  97. package/dist/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.js +5 -5
  98. package/dist/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.js.map +1 -1
  99. package/dist/recipes/cards/ivr_node/ivr_node.vue.cjs +5 -25
  100. package/dist/recipes/cards/ivr_node/ivr_node.vue.cjs.map +1 -1
  101. package/dist/recipes/cards/ivr_node/ivr_node.vue.js +6 -26
  102. package/dist/recipes/cards/ivr_node/ivr_node.vue.js.map +1 -1
  103. package/dist/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.cjs +19 -6
  104. package/dist/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.cjs.map +1 -1
  105. package/dist/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.js +19 -6
  106. package/dist/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.js.map +1 -1
  107. package/dist/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.cjs +4 -5
  108. package/dist/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.cjs.map +1 -1
  109. package/dist/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.js +4 -5
  110. package/dist/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.js.map +1 -1
  111. package/dist/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.cjs +3 -3
  112. package/dist/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.cjs.map +1 -1
  113. package/dist/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.js +3 -3
  114. package/dist/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.js.map +1 -1
  115. package/dist/recipes/conversation_view/editor/editor.vue.cjs +22 -35
  116. package/dist/recipes/conversation_view/editor/editor.vue.cjs.map +1 -1
  117. package/dist/recipes/conversation_view/editor/editor.vue.js +22 -35
  118. package/dist/recipes/conversation_view/editor/editor.vue.js.map +1 -1
  119. package/dist/recipes/conversation_view/feed_item_row/feed_item_row.vue.cjs +6 -7
  120. package/dist/recipes/conversation_view/feed_item_row/feed_item_row.vue.cjs.map +1 -1
  121. package/dist/recipes/conversation_view/feed_item_row/feed_item_row.vue.js +6 -7
  122. package/dist/recipes/conversation_view/feed_item_row/feed_item_row.vue.js.map +1 -1
  123. package/dist/recipes/conversation_view/feed_pill/feed_item_pill.vue.cjs +17 -9
  124. package/dist/recipes/conversation_view/feed_pill/feed_item_pill.vue.cjs.map +1 -1
  125. package/dist/recipes/conversation_view/feed_pill/feed_item_pill.vue.js +17 -9
  126. package/dist/recipes/conversation_view/feed_pill/feed_item_pill.vue.js.map +1 -1
  127. package/dist/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.cjs +5 -6
  128. package/dist/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.cjs.map +1 -1
  129. package/dist/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.js +5 -6
  130. package/dist/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.js.map +1 -1
  131. package/dist/recipes/conversation_view/message_input/message_input.vue.cjs +11 -22
  132. package/dist/recipes/conversation_view/message_input/message_input.vue.cjs.map +1 -1
  133. package/dist/recipes/conversation_view/message_input/message_input.vue.js +11 -22
  134. package/dist/recipes/conversation_view/message_input/message_input.vue.js.map +1 -1
  135. package/dist/recipes/header/settings_menu_button/settings_menu_button.vue.cjs +6 -6
  136. package/dist/recipes/header/settings_menu_button/settings_menu_button.vue.cjs.map +1 -1
  137. package/dist/recipes/header/settings_menu_button/settings_menu_button.vue.js +6 -6
  138. package/dist/recipes/header/settings_menu_button/settings_menu_button.vue.js.map +1 -1
  139. package/dist/recipes/item_layout/contact_info/contact_info.vue.cjs +10 -14
  140. package/dist/recipes/item_layout/contact_info/contact_info.vue.cjs.map +1 -1
  141. package/dist/recipes/item_layout/contact_info/contact_info.vue.js +10 -14
  142. package/dist/recipes/item_layout/contact_info/contact_info.vue.js.map +1 -1
  143. package/dist/recipes/leftbar/callbox/callbox.vue.cjs +3 -6
  144. package/dist/recipes/leftbar/callbox/callbox.vue.cjs.map +1 -1
  145. package/dist/recipes/leftbar/callbox/callbox.vue.js +3 -6
  146. package/dist/recipes/leftbar/callbox/callbox.vue.js.map +1 -1
  147. package/dist/recipes/leftbar/contact_row/contact_row.vue.cjs +5 -6
  148. package/dist/recipes/leftbar/contact_row/contact_row.vue.cjs.map +1 -1
  149. package/dist/recipes/leftbar/contact_row/contact_row.vue.js +5 -6
  150. package/dist/recipes/leftbar/contact_row/contact_row.vue.js.map +1 -1
  151. package/dist/recipes/leftbar/general_row/general_row.vue.cjs +7 -8
  152. package/dist/recipes/leftbar/general_row/general_row.vue.cjs.map +1 -1
  153. package/dist/recipes/leftbar/general_row/general_row.vue.js +7 -8
  154. package/dist/recipes/leftbar/general_row/general_row.vue.js.map +1 -1
  155. package/dist/recipes/leftbar/general_row/general_row_constants.cjs +17 -0
  156. package/dist/recipes/leftbar/general_row/general_row_constants.cjs.map +1 -1
  157. package/dist/recipes/leftbar/general_row/general_row_constants.js +17 -0
  158. package/dist/recipes/leftbar/general_row/general_row_constants.js.map +1 -1
  159. package/dist/recipes/leftbar/general_row/leftbar_general_row_icon.vue.cjs +4 -36
  160. package/dist/recipes/leftbar/general_row/leftbar_general_row_icon.vue.cjs.map +1 -1
  161. package/dist/recipes/leftbar/general_row/leftbar_general_row_icon.vue.js +5 -37
  162. package/dist/recipes/leftbar/general_row/leftbar_general_row_icon.vue.js.map +1 -1
  163. package/dist/recipes/leftbar/group_row/group_row.vue.cjs +3 -3
  164. package/dist/recipes/leftbar/group_row/group_row.vue.cjs.map +1 -1
  165. package/dist/recipes/leftbar/group_row/group_row.vue.js +3 -3
  166. package/dist/recipes/leftbar/group_row/group_row.vue.js.map +1 -1
  167. package/dist/recipes/leftbar/unread_pill/unread_pill.vue.cjs +3 -4
  168. package/dist/recipes/leftbar/unread_pill/unread_pill.vue.cjs.map +1 -1
  169. package/dist/recipes/leftbar/unread_pill/unread_pill.vue.js +3 -4
  170. package/dist/recipes/leftbar/unread_pill/unread_pill.vue.js.map +1 -1
  171. package/dist/style.css +132 -135
  172. package/dist/types/common/storybook_utils.d.ts +35 -0
  173. package/dist/types/common/storybook_utils.d.ts.map +1 -0
  174. package/dist/types/components/avatar/avatar.vue.d.ts +34 -4
  175. package/dist/types/components/avatar/avatar.vue.d.ts.map +1 -1
  176. package/dist/types/components/badge/badge.vue.d.ts +45 -16
  177. package/dist/types/components/badge/badge.vue.d.ts.map +1 -1
  178. package/dist/types/components/chip/chip.vue.d.ts +1 -1
  179. package/dist/types/components/collapsible/collapsible.vue.d.ts +1 -1
  180. package/dist/types/components/collapsible/collapsible.vue.d.ts.map +1 -1
  181. package/dist/types/components/emoji_picker/modules/emoji_tabset.vue.d.ts +67 -1
  182. package/dist/types/components/empty_state/empty_state_constants.d.ts +0 -27
  183. package/dist/types/components/keyboard_shortcut/index.d.ts +1 -1
  184. package/dist/types/components/keyboard_shortcut/keyboard_shortcut.vue.d.ts +15 -7
  185. package/dist/types/components/keyboard_shortcut/keyboard_shortcut.vue.d.ts.map +1 -1
  186. package/dist/types/components/keyboard_shortcut/keyboard_shortcut_constants.d.ts +11 -0
  187. package/dist/types/components/keyboard_shortcut/keyboard_shortcut_constants.d.ts.map +1 -1
  188. package/dist/types/components/modal/modal.vue.d.ts +6 -4
  189. package/dist/types/components/modal/modal.vue.d.ts.map +1 -1
  190. package/dist/types/components/notice/notice_action.vue.d.ts +4 -5
  191. package/dist/types/components/notice/notice_action.vue.d.ts.map +1 -1
  192. package/dist/types/components/notice/notice_icon.vue.d.ts +1 -1
  193. package/dist/types/components/notice/notice_icon.vue.d.ts.map +1 -1
  194. package/dist/types/components/pagination/pagination.vue.d.ts.map +1 -1
  195. package/dist/types/components/split_button/split_button-omega.vue.d.ts +1 -1
  196. package/dist/types/recipes/buttons/callbar_button/callbar_button.vue.d.ts +1 -1
  197. package/dist/types/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.d.ts +1 -1
  198. package/dist/types/recipes/cards/ivr_node/ivr_node.vue.d.ts.map +1 -1
  199. package/dist/types/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.d.ts.map +1 -1
  200. package/dist/types/recipes/conversation_view/editor/editor.vue.d.ts +8 -8
  201. package/dist/types/recipes/conversation_view/editor/editor.vue.d.ts.map +1 -1
  202. package/dist/types/recipes/conversation_view/feed_item_row/feed_item_row.vue.d.ts +1 -0
  203. package/dist/types/recipes/conversation_view/feed_item_row/feed_item_row.vue.d.ts.map +1 -1
  204. package/dist/types/recipes/conversation_view/feed_pill/feed_item_pill.vue.d.ts +16 -2
  205. package/dist/types/recipes/conversation_view/feed_pill/feed_item_pill.vue.d.ts.map +1 -1
  206. package/dist/types/recipes/conversation_view/message_input/message_input.vue.d.ts +6 -4
  207. package/dist/types/recipes/conversation_view/message_input/message_input.vue.d.ts.map +1 -1
  208. package/dist/types/recipes/item_layout/contact_info/contact_info.vue.d.ts +16 -3
  209. package/dist/types/recipes/item_layout/contact_info/contact_info.vue.d.ts.map +1 -1
  210. package/dist/types/recipes/leftbar/callbox/callbox.vue.d.ts.map +1 -1
  211. package/dist/types/recipes/leftbar/contact_row/contact_row.vue.d.ts +1 -0
  212. package/dist/types/recipes/leftbar/contact_row/contact_row.vue.d.ts.map +1 -1
  213. package/dist/types/recipes/leftbar/general_row/general_row.vue.d.ts +1 -1
  214. package/dist/types/recipes/leftbar/general_row/general_row.vue.d.ts.map +1 -1
  215. package/dist/types/recipes/leftbar/general_row/general_row_constants.d.ts +6 -0
  216. package/dist/types/recipes/leftbar/general_row/general_row_constants.d.ts.map +1 -1
  217. package/dist/types/recipes/leftbar/general_row/index.d.ts +1 -1
  218. package/dist/types/recipes/leftbar/general_row/leftbar_general_row_icon.vue.d.ts +1 -1
  219. package/dist/types/recipes/leftbar/unread_pill/unread_pill.vue.d.ts.map +1 -1
  220. package/package.json +3 -3
@@ -1,22 +1,18 @@
1
1
  "use strict";
2
- const vue2 = require("@dialpad/dialtone-icons/vue2");
3
2
  const notice_constants = require("./notice_constants.cjs");
4
3
  const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
4
+ const icon = require("../icon/icon.vue.cjs");
5
5
  const kindToIcon = /* @__PURE__ */ new Map([
6
- ["info", vue2.DtIconInfo],
7
- ["success", vue2.DtIconCheckCircle],
8
- ["warning", vue2.DtIconAlertTriangle],
9
- ["error", vue2.DtIconAlertCircle],
10
- ["base", vue2.DtIconBell]
6
+ ["info", "info"],
7
+ ["success", "check-circle"],
8
+ ["warning", "alert-triangle"],
9
+ ["error", "alert-circle"],
10
+ ["base", "bell"]
11
11
  ]);
12
12
  const _sfc_main = {
13
13
  name: "DtNoticeIcon",
14
14
  components: {
15
- DtIconInfo: vue2.DtIconInfo,
16
- DtIconCheckCircle: vue2.DtIconCheckCircle,
17
- DtIconAlertTriangle: vue2.DtIconAlertTriangle,
18
- DtIconAlertCircle: vue2.DtIconAlertCircle,
19
- DtIconBell: vue2.DtIconBell
15
+ DtIcon: icon
20
16
  },
21
17
  props: {
22
18
  /**
@@ -40,7 +36,7 @@ const _sfc_main = {
40
36
  var _sfc_render = function render() {
41
37
  var _vm = this, _c = _vm._self._c;
42
38
  return _vm.defaultIcon || _vm.$slots.default ? _c("div", { staticClass: "d-notice__icon", attrs: { "aria-hidden": "true" } }, [_vm._t("default", function() {
43
- return [_c(_vm.defaultIcon, { tag: "component", attrs: { "size": "400" } })];
39
+ return [_c("dt-icon", { attrs: { "name": _vm.defaultIcon, "size": "400" } })];
44
40
  })], 2) : _vm._e();
45
41
  };
46
42
  var _sfc_staticRenderFns = [];
@@ -1 +1 @@
1
- {"version":3,"file":"notice_icon.vue.cjs","sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n <div\n v-if=\"defaultIcon || $slots.default\"\n aria-hidden=\"true\"\n class=\"d-notice__icon\"\n >\n <!-- @slot Slot for the main content -->\n <slot>\n <component\n :is=\"defaultIcon\"\n size=\"400\"\n />\n </slot>\n </div>\n</template>\n\n<script>\nimport {\n DtIconInfo,\n DtIconCheckCircle,\n DtIconAlertTriangle,\n DtIconAlertCircle,\n DtIconBell,\n} from '@dialpad/dialtone-icons/vue2';\nimport { NOTICE_KINDS } from './notice_constants.js';\n\nconst kindToIcon = new Map([\n ['info', DtIconInfo],\n ['success', DtIconCheckCircle],\n ['warning', DtIconAlertTriangle],\n ['error', DtIconAlertCircle],\n ['base', DtIconBell],\n]);\n\nexport default {\n name: 'DtNoticeIcon',\n\n components: {\n DtIconInfo,\n DtIconCheckCircle,\n DtIconAlertTriangle,\n DtIconAlertCircle,\n DtIconBell,\n },\n\n props: {\n /**\n * Kind of icon\n * @values base, error, info, success, warning\n */\n kind: {\n type: String,\n default: 'base',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n },\n\n computed: {\n defaultIcon () {\n return kindToIcon.get(this.kind);\n },\n },\n};\n</script>\n"],"names":["DtIconInfo","DtIconCheckCircle","DtIconAlertTriangle","DtIconAlertCircle","DtIconBell","NOTICE_KINDS"],"mappings":";;;;AA0BA,MAAA,aAAA,oBAAA,IAAA;AAAA,EACA,CAAA,QAAAA,KAAAA,UAAA;AAAA,EACA,CAAA,WAAAC,KAAAA,iBAAA;AAAA,EACA,CAAA,WAAAC,KAAAA,mBAAA;AAAA,EACA,CAAA,SAAAC,KAAAA,iBAAA;AAAA,EACA,CAAA,QAAAC,KAAAA,UAAA;AACA,CAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,YAAAJ,KAAA;AAAA,IACA,mBAAAC,KAAA;AAAA,IACA,qBAAAC,KAAA;AAAA,IACA,mBAAAC,KAAA;AAAA,IACA,YAAAC,KAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,MAAA;AACA,eAAAC,iBAAA,aAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,WAAA,IAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"notice_icon.vue.cjs","sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n <div\n v-if=\"defaultIcon || $slots.default\"\n aria-hidden=\"true\"\n class=\"d-notice__icon\"\n >\n <!-- @slot Slot for the main content -->\n <slot>\n <dt-icon\n :name=\"defaultIcon\"\n size=\"400\"\n />\n </slot>\n </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { NOTICE_KINDS } from './notice_constants';\n\nconst kindToIcon = new Map([\n ['info', 'info'],\n ['success', 'check-circle'],\n ['warning', 'alert-triangle'],\n ['error', 'alert-circle'],\n ['base', 'bell'],\n]);\n\nexport default {\n name: 'DtNoticeIcon',\n\n components: {\n DtIcon,\n },\n\n props: {\n /**\n * Kind of icon\n * @values base, error, info, success, warning\n */\n kind: {\n type: String,\n default: 'base',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n },\n\n computed: {\n defaultIcon () {\n return kindToIcon.get(this.kind);\n },\n },\n};\n</script>\n"],"names":["DtIcon","NOTICE_KINDS"],"mappings":";;;;AAoBA,MAAA,aAAA,oBAAA,IAAA;AAAA,EACA,CAAA,QAAA,MAAA;AAAA,EACA,CAAA,WAAA,cAAA;AAAA,EACA,CAAA,WAAA,gBAAA;AAAA,EACA,CAAA,SAAA,cAAA;AAAA,EACA,CAAA,QAAA,MAAA;AACA,CAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAA;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,MAAA;AACA,eAAAC,iBAAA,aAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,WAAA,IAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
@@ -1,21 +1,17 @@
1
- import { DtIconInfo, DtIconCheckCircle, DtIconAlertTriangle, DtIconAlertCircle, DtIconBell } from "@dialpad/dialtone-icons/vue2";
2
1
  import { NOTICE_KINDS } from "./notice_constants.js";
3
2
  import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
3
+ import DtIcon from "../icon/icon.vue.js";
4
4
  const kindToIcon = /* @__PURE__ */ new Map([
5
- ["info", DtIconInfo],
6
- ["success", DtIconCheckCircle],
7
- ["warning", DtIconAlertTriangle],
8
- ["error", DtIconAlertCircle],
9
- ["base", DtIconBell]
5
+ ["info", "info"],
6
+ ["success", "check-circle"],
7
+ ["warning", "alert-triangle"],
8
+ ["error", "alert-circle"],
9
+ ["base", "bell"]
10
10
  ]);
11
11
  const _sfc_main = {
12
12
  name: "DtNoticeIcon",
13
13
  components: {
14
- DtIconInfo,
15
- DtIconCheckCircle,
16
- DtIconAlertTriangle,
17
- DtIconAlertCircle,
18
- DtIconBell
14
+ DtIcon
19
15
  },
20
16
  props: {
21
17
  /**
@@ -39,7 +35,7 @@ const _sfc_main = {
39
35
  var _sfc_render = function render() {
40
36
  var _vm = this, _c = _vm._self._c;
41
37
  return _vm.defaultIcon || _vm.$slots.default ? _c("div", { staticClass: "d-notice__icon", attrs: { "aria-hidden": "true" } }, [_vm._t("default", function() {
42
- return [_c(_vm.defaultIcon, { tag: "component", attrs: { "size": "400" } })];
38
+ return [_c("dt-icon", { attrs: { "name": _vm.defaultIcon, "size": "400" } })];
43
39
  })], 2) : _vm._e();
44
40
  };
45
41
  var _sfc_staticRenderFns = [];
@@ -1 +1 @@
1
- {"version":3,"file":"notice_icon.vue.js","sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n <div\n v-if=\"defaultIcon || $slots.default\"\n aria-hidden=\"true\"\n class=\"d-notice__icon\"\n >\n <!-- @slot Slot for the main content -->\n <slot>\n <component\n :is=\"defaultIcon\"\n size=\"400\"\n />\n </slot>\n </div>\n</template>\n\n<script>\nimport {\n DtIconInfo,\n DtIconCheckCircle,\n DtIconAlertTriangle,\n DtIconAlertCircle,\n DtIconBell,\n} from '@dialpad/dialtone-icons/vue2';\nimport { NOTICE_KINDS } from './notice_constants.js';\n\nconst kindToIcon = new Map([\n ['info', DtIconInfo],\n ['success', DtIconCheckCircle],\n ['warning', DtIconAlertTriangle],\n ['error', DtIconAlertCircle],\n ['base', DtIconBell],\n]);\n\nexport default {\n name: 'DtNoticeIcon',\n\n components: {\n DtIconInfo,\n DtIconCheckCircle,\n DtIconAlertTriangle,\n DtIconAlertCircle,\n DtIconBell,\n },\n\n props: {\n /**\n * Kind of icon\n * @values base, error, info, success, warning\n */\n kind: {\n type: String,\n default: 'base',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n },\n\n computed: {\n defaultIcon () {\n return kindToIcon.get(this.kind);\n },\n },\n};\n</script>\n"],"names":[],"mappings":";;;AA0BA,MAAA,aAAA,oBAAA,IAAA;AAAA,EACA,CAAA,QAAA,UAAA;AAAA,EACA,CAAA,WAAA,iBAAA;AAAA,EACA,CAAA,WAAA,mBAAA;AAAA,EACA,CAAA,SAAA,iBAAA;AAAA,EACA,CAAA,QAAA,UAAA;AACA,CAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,MAAA;AACA,eAAA,aAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,WAAA,IAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"notice_icon.vue.js","sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n <div\n v-if=\"defaultIcon || $slots.default\"\n aria-hidden=\"true\"\n class=\"d-notice__icon\"\n >\n <!-- @slot Slot for the main content -->\n <slot>\n <dt-icon\n :name=\"defaultIcon\"\n size=\"400\"\n />\n </slot>\n </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { NOTICE_KINDS } from './notice_constants';\n\nconst kindToIcon = new Map([\n ['info', 'info'],\n ['success', 'check-circle'],\n ['warning', 'alert-triangle'],\n ['error', 'alert-circle'],\n ['base', 'bell'],\n]);\n\nexport default {\n name: 'DtNoticeIcon',\n\n components: {\n DtIcon,\n },\n\n props: {\n /**\n * Kind of icon\n * @values base, error, info, success, warning\n */\n kind: {\n type: String,\n default: 'base',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n },\n\n computed: {\n defaultIcon () {\n return kindToIcon.get(this.kind);\n },\n },\n};\n</script>\n"],"names":[],"mappings":";;;AAoBA,MAAA,aAAA,oBAAA,IAAA;AAAA,EACA,CAAA,QAAA,MAAA;AAAA,EACA,CAAA,WAAA,cAAA;AAAA,EACA,CAAA,WAAA,gBAAA;AAAA,EACA,CAAA,SAAA,cAAA;AAAA,EACA,CAAA,QAAA,MAAA;AACA,CAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,MAAA;AACA,eAAA,aAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,WAAA,IAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
@@ -1,14 +1,12 @@
1
1
  "use strict";
2
- const vue2 = require("@dialpad/dialtone-icons/vue2");
3
2
  const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
4
3
  const button = require("../button/button.vue.cjs");
4
+ const icon = require("../icon/icon.vue.cjs");
5
5
  const _sfc_main = {
6
6
  name: "DtPagination",
7
7
  components: {
8
8
  DtButton: button,
9
- DtIconChevronLeft: vue2.DtIconChevronLeft,
10
- DtIconChevronRight: vue2.DtIconChevronRight,
11
- DtIconMoreHorizontal: vue2.DtIconMoreHorizontal
9
+ DtIcon: icon
12
10
  },
13
11
  props: {
14
12
  /**
@@ -125,17 +123,13 @@ var _sfc_render = function render() {
125
123
  var _vm = this, _c = _vm._self._c;
126
124
  return _c("nav", { staticClass: "d-pagination", attrs: { "aria-label": _vm.ariaLabel } }, [_c("dt-button", { staticClass: "d-pagination__button", class: _vm.isFirstPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary", attrs: { "data-qa": "dt-pagination-prev", "aria-label": _vm.prevAriaLabel, "kind": _vm.isFirstPage ? "default" : "muted", "importance": _vm.isFirstPage ? "primary" : "clear", "disabled": _vm.isFirstPage }, on: { "click": function($event) {
127
125
  return _vm.changePage(_vm.currentPage - 1);
128
- } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
129
- return [_c("dt-icon-chevron-left", { attrs: { "size": "300" } })];
130
- }, proxy: true }]) }), _vm._l(_vm.pages, function(page, index) {
131
- return _c("div", { key: `page-${page}-${index}`, class: { "d-pagination__separator": isNaN(Number(page)) } }, [isNaN(Number(page)) ? _c("div", { staticClass: "d-pagination__separator-icon", attrs: { "data-qa": "dt-pagination-separator" } }, [_c("dt-icon-more-horizontal", { attrs: { "size": "300" } })], 1) : _c("dt-button", { attrs: { "aria-label": _vm.pageNumberAriaLabel(page), "kind": _vm.currentPage === page ? "default" : "muted", "importance": _vm.currentPage === page ? "primary" : "clear", "label-class": "" }, on: { "click": function($event) {
126
+ } } }, [_c("template", { slot: "icon" }, [_c("dt-icon", { attrs: { "name": "chevron-left", "size": "300" } })], 1)], 2), _vm._l(_vm.pages, function(page, index) {
127
+ return _c("div", { key: `page-${page}-${index}`, class: { "d-pagination__separator": isNaN(Number(page)) } }, [isNaN(Number(page)) ? _c("div", { staticClass: "d-pagination__separator-icon", attrs: { "data-qa": "dt-pagination-separator" } }, [_c("dt-icon", { attrs: { "name": "more-horizontal", "size": "300" } })], 1) : _c("dt-button", { attrs: { "aria-label": _vm.pageNumberAriaLabel(page), "kind": _vm.currentPage === page ? "default" : "muted", "importance": _vm.currentPage === page ? "primary" : "clear", "label-class": "" }, on: { "click": function($event) {
132
128
  return _vm.changePage(page);
133
129
  } } }, [_vm._v(" " + _vm._s(page) + " ")])], 1);
134
130
  }), _c("dt-button", { staticClass: "d-pagination__button", class: _vm.isLastPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary", attrs: { "data-qa": "dt-pagination-next", "aria-label": _vm.nextAriaLabel, "disabled": _vm.isLastPage, "kind": "muted", "importance": _vm.isLastPage ? "primary" : "clear" }, on: { "click": function($event) {
135
131
  return _vm.changePage(_vm.currentPage + 1);
136
- } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
137
- return [_c("dt-icon-chevron-right", { attrs: { "size": "300" } })];
138
- }, proxy: true }]) })], 2);
132
+ } } }, [_c("template", { slot: "icon" }, [_c("dt-icon", { attrs: { "name": "chevron-right", "size": "300" } })], 1)], 2)], 2);
139
133
  };
140
134
  var _sfc_staticRenderFns = [];
141
135
  var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
@@ -1 +1 @@
1
- {"version":3,"file":"pagination.vue.cjs","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n <nav\n :aria-label=\"ariaLabel\"\n class=\"d-pagination\"\n >\n <dt-button\n class=\"d-pagination__button\"\n data-qa=\"dt-pagination-prev\"\n :aria-label=\"prevAriaLabel\"\n :kind=\"isFirstPage ? 'default' : 'muted'\"\n :importance=\"isFirstPage ? 'primary' : 'clear'\"\n :disabled=\"isFirstPage\"\n :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n @click=\"changePage(currentPage - 1)\"\n >\n <template #icon>\n <dt-icon-chevron-left\n size=\"300\"\n />\n </template>\n </dt-button>\n <div\n v-for=\"(page, index) in pages\"\n :key=\"`page-${page}-${index}`\"\n :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n >\n <!-- eslint-disable vue/no-bare-strings-in-template -->\n <div\n v-if=\"isNaN(Number(page))\"\n class=\"d-pagination__separator-icon\"\n data-qa=\"dt-pagination-separator\"\n >\n <dt-icon-more-horizontal\n size=\"300\"\n />\n <!-- … -->\n </div>\n <!-- eslint-enable vue/no-bare-strings-in-template -->\n <dt-button\n v-else\n :aria-label=\"pageNumberAriaLabel(page)\"\n :kind=\"currentPage === page ? 'default' : 'muted'\"\n :importance=\"currentPage === page ? 'primary' : 'clear'\"\n label-class=\"\"\n @click=\"changePage(page)\"\n >\n {{ page }}\n </dt-button>\n </div>\n <dt-button\n class=\"d-pagination__button\"\n data-qa=\"dt-pagination-next\"\n :aria-label=\"nextAriaLabel\"\n :disabled=\"isLastPage\"\n kind=\"muted\"\n :importance=\"isLastPage ? 'primary' : 'clear'\"\n :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n @click=\"changePage(currentPage + 1)\"\n >\n <template #icon>\n <dt-icon-chevron-right\n size=\"300\"\n />\n </template>\n </dt-button>\n </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from '@dialpad/dialtone-icons/vue2';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n name: 'DtPagination',\n\n components: {\n DtButton,\n DtIconChevronLeft,\n DtIconChevronRight,\n DtIconMoreHorizontal,\n },\n\n props: {\n /**\n * Descriptive label for the pagination content.\n */\n ariaLabel: {\n type: String,\n required: true,\n },\n\n /**\n * The total number of the pages\n */\n totalPages: {\n type: Number,\n required: true,\n },\n\n /**\n * Descriptive label for the previous button.\n */\n prevAriaLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Descriptive label for the next button.\n */\n nextAriaLabel: {\n type: String,\n required: true,\n },\n\n /**\n * A method that will be called to get the aria label of each page.\n */\n pageNumberAriaLabel: {\n type: Function,\n required: true,\n },\n\n /**\n * The active current page in the list of pages, defaults to the first page\n */\n activePage: {\n type: Number,\n default: 1,\n },\n\n /**\n * Determines the max pages to be shown in the list. Using an odd number is recommended.\n * If an even number is given, then it will be rounded down to the nearest odd number to always\n * keep current page in the middle when current page is in the mid-range.\n */\n maxVisible: {\n type: Number,\n default: 5,\n },\n },\n\n emits: [\n /**\n * Page change event\n *\n * @event change\n * @type {Number}\n */\n 'change',\n ],\n\n data () {\n return {\n currentPage: this.activePage,\n };\n },\n\n computed: {\n isFirstPage () {\n return this.currentPage === 1;\n },\n\n isLastPage () {\n return this.currentPage === this.totalPages;\n },\n\n pages () {\n if (this.maxVisible === 0) {\n return [];\n }\n if (this.totalPages <= this.maxVisible) {\n return this.range(1, this.totalPages);\n }\n\n const start = this.maxVisible - 1;\n const end = this.totalPages - start + 1;\n\n if (this.currentPage < start) {\n return [...this.range(1, start), '...', this.totalPages];\n }\n\n if (this.currentPage > end) {\n return [1, '...', ...this.range(end, this.totalPages)];\n }\n\n // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n const total = this.maxVisible - (3 - this.maxVisible % 2);\n const centerIndex = Math.floor(total / 2);\n const left = this.currentPage - centerIndex;\n const right = this.currentPage + centerIndex;\n return [1, '...', ...this.range(left, right), '...', this.totalPages];\n },\n },\n\n methods: {\n range (from, to) {\n const range = [];\n from = from > 0 ? from : 1;\n for (let i = from; i <= to; i++) {\n range.push(i);\n }\n return range;\n },\n\n changePage (page) {\n this.currentPage = page;\n this.$emit('change', this.currentPage);\n },\n },\n};\n</script>\n"],"names":["DtButton","DtIconChevronLeft","DtIconChevronRight","DtIconMoreHorizontal"],"mappings":";;;;AA4EA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA;AAAAA,IACA,mBAAAC,KAAA;AAAA,IACA,oBAAAC,KAAA;AAAA,IACA,sBAAAC,KAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,aAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,gBAAA,KAAA;AAAA,IACA;AAAA,IAEA,QAAA;AACA,UAAA,KAAA,eAAA,GAAA;AACA,eAAA;MACA;AACA,UAAA,KAAA,cAAA,KAAA,YAAA;AACA,eAAA,KAAA,MAAA,GAAA,KAAA,UAAA;AAAA,MACA;AAEA,YAAA,QAAA,KAAA,aAAA;AACA,YAAA,MAAA,KAAA,aAAA,QAAA;AAEA,UAAA,KAAA,cAAA,OAAA;AACA,eAAA,CAAA,GAAA,KAAA,MAAA,GAAA,KAAA,GAAA,OAAA,KAAA,UAAA;AAAA,MACA;AAEA,UAAA,KAAA,cAAA,KAAA;AACA,eAAA,CAAA,GAAA,OAAA,GAAA,KAAA,MAAA,KAAA,KAAA,UAAA,CAAA;AAAA,MACA;AAGA,YAAA,QAAA,KAAA,cAAA,IAAA,KAAA,aAAA;AACA,YAAA,cAAA,KAAA,MAAA,QAAA,CAAA;AACA,YAAA,OAAA,KAAA,cAAA;AACA,YAAA,QAAA,KAAA,cAAA;AACA,aAAA,CAAA,GAAA,OAAA,GAAA,KAAA,MAAA,MAAA,KAAA,GAAA,OAAA,KAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,MAAA,MAAA,IAAA;AACA,YAAA,QAAA,CAAA;AACA,aAAA,OAAA,IAAA,OAAA;AACA,eAAA,IAAA,MAAA,KAAA,IAAA,KAAA;AACA,cAAA,KAAA,CAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,WAAA,MAAA;AACA,WAAA,cAAA;AACA,WAAA,MAAA,UAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"pagination.vue.cjs","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n <nav\n :aria-label=\"ariaLabel\"\n class=\"d-pagination\"\n >\n <dt-button\n class=\"d-pagination__button\"\n data-qa=\"dt-pagination-prev\"\n :aria-label=\"prevAriaLabel\"\n :kind=\"isFirstPage ? 'default' : 'muted'\"\n :importance=\"isFirstPage ? 'primary' : 'clear'\"\n :disabled=\"isFirstPage\"\n :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n @click=\"changePage(currentPage - 1)\"\n >\n <template slot=\"icon\">\n <dt-icon\n name=\"chevron-left\"\n size=\"300\"\n />\n </template>\n </dt-button>\n <div\n v-for=\"(page, index) in pages\"\n :key=\"`page-${page}-${index}`\"\n :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n >\n <!-- eslint-disable vue/no-bare-strings-in-template -->\n <div\n v-if=\"isNaN(Number(page))\"\n class=\"d-pagination__separator-icon\"\n data-qa=\"dt-pagination-separator\"\n >\n <dt-icon\n name=\"more-horizontal\"\n size=\"300\"\n />\n <!-- … -->\n </div>\n <!-- eslint-enable vue/no-bare-strings-in-template -->\n <dt-button\n v-else\n :aria-label=\"pageNumberAriaLabel(page)\"\n :kind=\"currentPage === page ? 'default' : 'muted'\"\n :importance=\"currentPage === page ? 'primary' : 'clear'\"\n label-class=\"\"\n @click=\"changePage(page)\"\n >\n {{ page }}\n </dt-button>\n </div>\n <dt-button\n class=\"d-pagination__button\"\n data-qa=\"dt-pagination-next\"\n :aria-label=\"nextAriaLabel\"\n :disabled=\"isLastPage\"\n kind=\"muted\"\n :importance=\"isLastPage ? 'primary' : 'clear'\"\n :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n @click=\"changePage(currentPage + 1)\"\n >\n <template slot=\"icon\">\n <dt-icon\n name=\"chevron-right\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n name: 'DtPagination',\n\n components: {\n DtButton,\n DtIcon,\n },\n\n props: {\n /**\n * Descriptive label for the pagination content.\n */\n ariaLabel: {\n type: String,\n required: true,\n },\n\n /**\n * The total number of the pages\n */\n totalPages: {\n type: Number,\n required: true,\n },\n\n /**\n * Descriptive label for the previous button.\n */\n prevAriaLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Descriptive label for the next button.\n */\n nextAriaLabel: {\n type: String,\n required: true,\n },\n\n /**\n * A method that will be called to get the aria label of each page.\n */\n pageNumberAriaLabel: {\n type: Function,\n required: true,\n },\n\n /**\n * The active current page in the list of pages, defaults to the first page\n */\n activePage: {\n type: Number,\n default: 1,\n },\n\n /**\n * Determines the max pages to be shown in the list. Using an odd number is recommended.\n * If an even number is given, then it will be rounded down to the nearest odd number to always\n * keep current page in the middle when current page is in the mid-range.\n */\n maxVisible: {\n type: Number,\n default: 5,\n },\n },\n\n emits: [\n /**\n * Page change event\n *\n * @event change\n * @type {Number}\n */\n 'change',\n ],\n\n data () {\n return {\n currentPage: this.activePage,\n };\n },\n\n computed: {\n isFirstPage () {\n return this.currentPage === 1;\n },\n\n isLastPage () {\n return this.currentPage === this.totalPages;\n },\n\n pages () {\n if (this.maxVisible === 0) {\n return [];\n }\n if (this.totalPages <= this.maxVisible) {\n return this.range(1, this.totalPages);\n }\n\n const start = this.maxVisible - 1;\n const end = this.totalPages - start + 1;\n\n if (this.currentPage < start) {\n return [...this.range(1, start), '...', this.totalPages];\n }\n\n if (this.currentPage > end) {\n return [1, '...', ...this.range(end, this.totalPages)];\n }\n\n // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n const total = this.maxVisible - (3 - this.maxVisible % 2);\n const centerIndex = Math.floor(total / 2);\n const left = this.currentPage - centerIndex;\n const right = this.currentPage + centerIndex;\n return [1, '...', ...this.range(left, right), '...', this.totalPages];\n },\n },\n\n methods: {\n range (from, to) {\n const range = [];\n from = from > 0 ? from : 1;\n for (let i = from; i <= to; i++) {\n range.push(i);\n }\n return range;\n },\n\n changePage (page) {\n this.currentPage = page;\n this.$emit('change', this.currentPage);\n },\n },\n};\n</script>\n"],"names":["DtButton","DtIcon"],"mappings":";;;;AA+EA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA;AAAAA,IACA,QAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,aAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,gBAAA,KAAA;AAAA,IACA;AAAA,IAEA,QAAA;AACA,UAAA,KAAA,eAAA,GAAA;AACA,eAAA;MACA;AACA,UAAA,KAAA,cAAA,KAAA,YAAA;AACA,eAAA,KAAA,MAAA,GAAA,KAAA,UAAA;AAAA,MACA;AAEA,YAAA,QAAA,KAAA,aAAA;AACA,YAAA,MAAA,KAAA,aAAA,QAAA;AAEA,UAAA,KAAA,cAAA,OAAA;AACA,eAAA,CAAA,GAAA,KAAA,MAAA,GAAA,KAAA,GAAA,OAAA,KAAA,UAAA;AAAA,MACA;AAEA,UAAA,KAAA,cAAA,KAAA;AACA,eAAA,CAAA,GAAA,OAAA,GAAA,KAAA,MAAA,KAAA,KAAA,UAAA,CAAA;AAAA,MACA;AAGA,YAAA,QAAA,KAAA,cAAA,IAAA,KAAA,aAAA;AACA,YAAA,cAAA,KAAA,MAAA,QAAA,CAAA;AACA,YAAA,OAAA,KAAA,cAAA;AACA,YAAA,QAAA,KAAA,cAAA;AACA,aAAA,CAAA,GAAA,OAAA,GAAA,KAAA,MAAA,MAAA,KAAA,GAAA,OAAA,KAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,MAAA,MAAA,IAAA;AACA,YAAA,QAAA,CAAA;AACA,aAAA,OAAA,IAAA,OAAA;AACA,eAAA,IAAA,MAAA,KAAA,IAAA,KAAA;AACA,cAAA,KAAA,CAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,WAAA,MAAA;AACA,WAAA,cAAA;AACA,WAAA,MAAA,UAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,13 +1,11 @@
1
- import { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from "@dialpad/dialtone-icons/vue2";
2
1
  import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
3
2
  import DtButton from "../button/button.vue.js";
3
+ import DtIcon from "../icon/icon.vue.js";
4
4
  const _sfc_main = {
5
5
  name: "DtPagination",
6
6
  components: {
7
7
  DtButton,
8
- DtIconChevronLeft,
9
- DtIconChevronRight,
10
- DtIconMoreHorizontal
8
+ DtIcon
11
9
  },
12
10
  props: {
13
11
  /**
@@ -124,17 +122,13 @@ var _sfc_render = function render() {
124
122
  var _vm = this, _c = _vm._self._c;
125
123
  return _c("nav", { staticClass: "d-pagination", attrs: { "aria-label": _vm.ariaLabel } }, [_c("dt-button", { staticClass: "d-pagination__button", class: _vm.isFirstPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary", attrs: { "data-qa": "dt-pagination-prev", "aria-label": _vm.prevAriaLabel, "kind": _vm.isFirstPage ? "default" : "muted", "importance": _vm.isFirstPage ? "primary" : "clear", "disabled": _vm.isFirstPage }, on: { "click": function($event) {
126
124
  return _vm.changePage(_vm.currentPage - 1);
127
- } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
128
- return [_c("dt-icon-chevron-left", { attrs: { "size": "300" } })];
129
- }, proxy: true }]) }), _vm._l(_vm.pages, function(page, index) {
130
- return _c("div", { key: `page-${page}-${index}`, class: { "d-pagination__separator": isNaN(Number(page)) } }, [isNaN(Number(page)) ? _c("div", { staticClass: "d-pagination__separator-icon", attrs: { "data-qa": "dt-pagination-separator" } }, [_c("dt-icon-more-horizontal", { attrs: { "size": "300" } })], 1) : _c("dt-button", { attrs: { "aria-label": _vm.pageNumberAriaLabel(page), "kind": _vm.currentPage === page ? "default" : "muted", "importance": _vm.currentPage === page ? "primary" : "clear", "label-class": "" }, on: { "click": function($event) {
125
+ } } }, [_c("template", { slot: "icon" }, [_c("dt-icon", { attrs: { "name": "chevron-left", "size": "300" } })], 1)], 2), _vm._l(_vm.pages, function(page, index) {
126
+ return _c("div", { key: `page-${page}-${index}`, class: { "d-pagination__separator": isNaN(Number(page)) } }, [isNaN(Number(page)) ? _c("div", { staticClass: "d-pagination__separator-icon", attrs: { "data-qa": "dt-pagination-separator" } }, [_c("dt-icon", { attrs: { "name": "more-horizontal", "size": "300" } })], 1) : _c("dt-button", { attrs: { "aria-label": _vm.pageNumberAriaLabel(page), "kind": _vm.currentPage === page ? "default" : "muted", "importance": _vm.currentPage === page ? "primary" : "clear", "label-class": "" }, on: { "click": function($event) {
131
127
  return _vm.changePage(page);
132
128
  } } }, [_vm._v(" " + _vm._s(page) + " ")])], 1);
133
129
  }), _c("dt-button", { staticClass: "d-pagination__button", class: _vm.isLastPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary", attrs: { "data-qa": "dt-pagination-next", "aria-label": _vm.nextAriaLabel, "disabled": _vm.isLastPage, "kind": "muted", "importance": _vm.isLastPage ? "primary" : "clear" }, on: { "click": function($event) {
134
130
  return _vm.changePage(_vm.currentPage + 1);
135
- } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
136
- return [_c("dt-icon-chevron-right", { attrs: { "size": "300" } })];
137
- }, proxy: true }]) })], 2);
131
+ } } }, [_c("template", { slot: "icon" }, [_c("dt-icon", { attrs: { "name": "chevron-right", "size": "300" } })], 1)], 2)], 2);
138
132
  };
139
133
  var _sfc_staticRenderFns = [];
140
134
  var __component__ = /* @__PURE__ */ normalizeComponent(
@@ -1 +1 @@
1
- {"version":3,"file":"pagination.vue.js","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n <nav\n :aria-label=\"ariaLabel\"\n class=\"d-pagination\"\n >\n <dt-button\n class=\"d-pagination__button\"\n data-qa=\"dt-pagination-prev\"\n :aria-label=\"prevAriaLabel\"\n :kind=\"isFirstPage ? 'default' : 'muted'\"\n :importance=\"isFirstPage ? 'primary' : 'clear'\"\n :disabled=\"isFirstPage\"\n :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n @click=\"changePage(currentPage - 1)\"\n >\n <template #icon>\n <dt-icon-chevron-left\n size=\"300\"\n />\n </template>\n </dt-button>\n <div\n v-for=\"(page, index) in pages\"\n :key=\"`page-${page}-${index}`\"\n :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n >\n <!-- eslint-disable vue/no-bare-strings-in-template -->\n <div\n v-if=\"isNaN(Number(page))\"\n class=\"d-pagination__separator-icon\"\n data-qa=\"dt-pagination-separator\"\n >\n <dt-icon-more-horizontal\n size=\"300\"\n />\n <!-- … -->\n </div>\n <!-- eslint-enable vue/no-bare-strings-in-template -->\n <dt-button\n v-else\n :aria-label=\"pageNumberAriaLabel(page)\"\n :kind=\"currentPage === page ? 'default' : 'muted'\"\n :importance=\"currentPage === page ? 'primary' : 'clear'\"\n label-class=\"\"\n @click=\"changePage(page)\"\n >\n {{ page }}\n </dt-button>\n </div>\n <dt-button\n class=\"d-pagination__button\"\n data-qa=\"dt-pagination-next\"\n :aria-label=\"nextAriaLabel\"\n :disabled=\"isLastPage\"\n kind=\"muted\"\n :importance=\"isLastPage ? 'primary' : 'clear'\"\n :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n @click=\"changePage(currentPage + 1)\"\n >\n <template #icon>\n <dt-icon-chevron-right\n size=\"300\"\n />\n </template>\n </dt-button>\n </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from '@dialpad/dialtone-icons/vue2';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n name: 'DtPagination',\n\n components: {\n DtButton,\n DtIconChevronLeft,\n DtIconChevronRight,\n DtIconMoreHorizontal,\n },\n\n props: {\n /**\n * Descriptive label for the pagination content.\n */\n ariaLabel: {\n type: String,\n required: true,\n },\n\n /**\n * The total number of the pages\n */\n totalPages: {\n type: Number,\n required: true,\n },\n\n /**\n * Descriptive label for the previous button.\n */\n prevAriaLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Descriptive label for the next button.\n */\n nextAriaLabel: {\n type: String,\n required: true,\n },\n\n /**\n * A method that will be called to get the aria label of each page.\n */\n pageNumberAriaLabel: {\n type: Function,\n required: true,\n },\n\n /**\n * The active current page in the list of pages, defaults to the first page\n */\n activePage: {\n type: Number,\n default: 1,\n },\n\n /**\n * Determines the max pages to be shown in the list. Using an odd number is recommended.\n * If an even number is given, then it will be rounded down to the nearest odd number to always\n * keep current page in the middle when current page is in the mid-range.\n */\n maxVisible: {\n type: Number,\n default: 5,\n },\n },\n\n emits: [\n /**\n * Page change event\n *\n * @event change\n * @type {Number}\n */\n 'change',\n ],\n\n data () {\n return {\n currentPage: this.activePage,\n };\n },\n\n computed: {\n isFirstPage () {\n return this.currentPage === 1;\n },\n\n isLastPage () {\n return this.currentPage === this.totalPages;\n },\n\n pages () {\n if (this.maxVisible === 0) {\n return [];\n }\n if (this.totalPages <= this.maxVisible) {\n return this.range(1, this.totalPages);\n }\n\n const start = this.maxVisible - 1;\n const end = this.totalPages - start + 1;\n\n if (this.currentPage < start) {\n return [...this.range(1, start), '...', this.totalPages];\n }\n\n if (this.currentPage > end) {\n return [1, '...', ...this.range(end, this.totalPages)];\n }\n\n // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n const total = this.maxVisible - (3 - this.maxVisible % 2);\n const centerIndex = Math.floor(total / 2);\n const left = this.currentPage - centerIndex;\n const right = this.currentPage + centerIndex;\n return [1, '...', ...this.range(left, right), '...', this.totalPages];\n },\n },\n\n methods: {\n range (from, to) {\n const range = [];\n from = from > 0 ? from : 1;\n for (let i = from; i <= to; i++) {\n range.push(i);\n }\n return range;\n },\n\n changePage (page) {\n this.currentPage = page;\n this.$emit('change', this.currentPage);\n },\n },\n};\n</script>\n"],"names":[],"mappings":";;;AA4EA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,aAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,gBAAA,KAAA;AAAA,IACA;AAAA,IAEA,QAAA;AACA,UAAA,KAAA,eAAA,GAAA;AACA,eAAA;MACA;AACA,UAAA,KAAA,cAAA,KAAA,YAAA;AACA,eAAA,KAAA,MAAA,GAAA,KAAA,UAAA;AAAA,MACA;AAEA,YAAA,QAAA,KAAA,aAAA;AACA,YAAA,MAAA,KAAA,aAAA,QAAA;AAEA,UAAA,KAAA,cAAA,OAAA;AACA,eAAA,CAAA,GAAA,KAAA,MAAA,GAAA,KAAA,GAAA,OAAA,KAAA,UAAA;AAAA,MACA;AAEA,UAAA,KAAA,cAAA,KAAA;AACA,eAAA,CAAA,GAAA,OAAA,GAAA,KAAA,MAAA,KAAA,KAAA,UAAA,CAAA;AAAA,MACA;AAGA,YAAA,QAAA,KAAA,cAAA,IAAA,KAAA,aAAA;AACA,YAAA,cAAA,KAAA,MAAA,QAAA,CAAA;AACA,YAAA,OAAA,KAAA,cAAA;AACA,YAAA,QAAA,KAAA,cAAA;AACA,aAAA,CAAA,GAAA,OAAA,GAAA,KAAA,MAAA,MAAA,KAAA,GAAA,OAAA,KAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,MAAA,MAAA,IAAA;AACA,YAAA,QAAA,CAAA;AACA,aAAA,OAAA,IAAA,OAAA;AACA,eAAA,IAAA,MAAA,KAAA,IAAA,KAAA;AACA,cAAA,KAAA,CAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,WAAA,MAAA;AACA,WAAA,cAAA;AACA,WAAA,MAAA,UAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"pagination.vue.js","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n <nav\n :aria-label=\"ariaLabel\"\n class=\"d-pagination\"\n >\n <dt-button\n class=\"d-pagination__button\"\n data-qa=\"dt-pagination-prev\"\n :aria-label=\"prevAriaLabel\"\n :kind=\"isFirstPage ? 'default' : 'muted'\"\n :importance=\"isFirstPage ? 'primary' : 'clear'\"\n :disabled=\"isFirstPage\"\n :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n @click=\"changePage(currentPage - 1)\"\n >\n <template slot=\"icon\">\n <dt-icon\n name=\"chevron-left\"\n size=\"300\"\n />\n </template>\n </dt-button>\n <div\n v-for=\"(page, index) in pages\"\n :key=\"`page-${page}-${index}`\"\n :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n >\n <!-- eslint-disable vue/no-bare-strings-in-template -->\n <div\n v-if=\"isNaN(Number(page))\"\n class=\"d-pagination__separator-icon\"\n data-qa=\"dt-pagination-separator\"\n >\n <dt-icon\n name=\"more-horizontal\"\n size=\"300\"\n />\n <!-- … -->\n </div>\n <!-- eslint-enable vue/no-bare-strings-in-template -->\n <dt-button\n v-else\n :aria-label=\"pageNumberAriaLabel(page)\"\n :kind=\"currentPage === page ? 'default' : 'muted'\"\n :importance=\"currentPage === page ? 'primary' : 'clear'\"\n label-class=\"\"\n @click=\"changePage(page)\"\n >\n {{ page }}\n </dt-button>\n </div>\n <dt-button\n class=\"d-pagination__button\"\n data-qa=\"dt-pagination-next\"\n :aria-label=\"nextAriaLabel\"\n :disabled=\"isLastPage\"\n kind=\"muted\"\n :importance=\"isLastPage ? 'primary' : 'clear'\"\n :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n @click=\"changePage(currentPage + 1)\"\n >\n <template slot=\"icon\">\n <dt-icon\n name=\"chevron-right\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n name: 'DtPagination',\n\n components: {\n DtButton,\n DtIcon,\n },\n\n props: {\n /**\n * Descriptive label for the pagination content.\n */\n ariaLabel: {\n type: String,\n required: true,\n },\n\n /**\n * The total number of the pages\n */\n totalPages: {\n type: Number,\n required: true,\n },\n\n /**\n * Descriptive label for the previous button.\n */\n prevAriaLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Descriptive label for the next button.\n */\n nextAriaLabel: {\n type: String,\n required: true,\n },\n\n /**\n * A method that will be called to get the aria label of each page.\n */\n pageNumberAriaLabel: {\n type: Function,\n required: true,\n },\n\n /**\n * The active current page in the list of pages, defaults to the first page\n */\n activePage: {\n type: Number,\n default: 1,\n },\n\n /**\n * Determines the max pages to be shown in the list. Using an odd number is recommended.\n * If an even number is given, then it will be rounded down to the nearest odd number to always\n * keep current page in the middle when current page is in the mid-range.\n */\n maxVisible: {\n type: Number,\n default: 5,\n },\n },\n\n emits: [\n /**\n * Page change event\n *\n * @event change\n * @type {Number}\n */\n 'change',\n ],\n\n data () {\n return {\n currentPage: this.activePage,\n };\n },\n\n computed: {\n isFirstPage () {\n return this.currentPage === 1;\n },\n\n isLastPage () {\n return this.currentPage === this.totalPages;\n },\n\n pages () {\n if (this.maxVisible === 0) {\n return [];\n }\n if (this.totalPages <= this.maxVisible) {\n return this.range(1, this.totalPages);\n }\n\n const start = this.maxVisible - 1;\n const end = this.totalPages - start + 1;\n\n if (this.currentPage < start) {\n return [...this.range(1, start), '...', this.totalPages];\n }\n\n if (this.currentPage > end) {\n return [1, '...', ...this.range(end, this.totalPages)];\n }\n\n // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n const total = this.maxVisible - (3 - this.maxVisible % 2);\n const centerIndex = Math.floor(total / 2);\n const left = this.currentPage - centerIndex;\n const right = this.currentPage + centerIndex;\n return [1, '...', ...this.range(left, right), '...', this.totalPages];\n },\n },\n\n methods: {\n range (from, to) {\n const range = [];\n from = from > 0 ? from : 1;\n for (let i = from; i <= to; i++) {\n range.push(i);\n }\n return range;\n },\n\n changePage (page) {\n this.currentPage = page;\n this.$emit('change', this.currentPage);\n },\n },\n};\n</script>\n"],"names":[],"mappings":";;;AA+EA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,aAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,gBAAA,KAAA;AAAA,IACA;AAAA,IAEA,QAAA;AACA,UAAA,KAAA,eAAA,GAAA;AACA,eAAA;MACA;AACA,UAAA,KAAA,cAAA,KAAA,YAAA;AACA,eAAA,KAAA,MAAA,GAAA,KAAA,UAAA;AAAA,MACA;AAEA,YAAA,QAAA,KAAA,aAAA;AACA,YAAA,MAAA,KAAA,aAAA,QAAA;AAEA,UAAA,KAAA,cAAA,OAAA;AACA,eAAA,CAAA,GAAA,KAAA,MAAA,GAAA,KAAA,GAAA,OAAA,KAAA,UAAA;AAAA,MACA;AAEA,UAAA,KAAA,cAAA,KAAA;AACA,eAAA,CAAA,GAAA,OAAA,GAAA,KAAA,MAAA,KAAA,KAAA,UAAA,CAAA;AAAA,MACA;AAGA,YAAA,QAAA,KAAA,cAAA,IAAA,KAAA,aAAA;AACA,YAAA,cAAA,KAAA,MAAA,QAAA,CAAA;AACA,YAAA,OAAA,KAAA,cAAA;AACA,YAAA,QAAA,KAAA,cAAA;AACA,aAAA,CAAA,GAAA,OAAA,GAAA,KAAA,MAAA,MAAA,KAAA,GAAA,OAAA,KAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,MAAA,MAAA,IAAA;AACA,YAAA,QAAA,CAAA;AACA,aAAA,OAAA,IAAA,OAAA;AACA,eAAA,IAAA,MAAA,KAAA,IAAA,KAAA;AACA,cAAA,KAAA,CAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,WAAA,MAAA;AACA,WAAA,cAAA;AACA,WAAA,MAAA,UAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,12 +1,12 @@
1
1
  "use strict";
2
- const vue2 = require("@dialpad/dialtone-icons/vue2");
3
2
  const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
4
3
  const button = require("../button/button.vue.cjs");
4
+ const icon = require("../icon/icon.vue.cjs");
5
5
  const _sfc_main = {
6
6
  name: "PopoverHeaderFooter",
7
7
  components: {
8
8
  DtButton: button,
9
- DtIconClose: vue2.DtIconClose
9
+ DtIcon: icon
10
10
  },
11
11
  props: {
12
12
  // eslint-disable-next-line vue/require-default-prop
@@ -72,8 +72,8 @@ var _sfc_render = function render() {
72
72
  }, attrs: { "data-qa": "dt-popover-close", "importance": "outlined", "kind": "muted", "circle": "" }, on: { "click": function($event) {
73
73
  return _vm.$emit("close");
74
74
  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
75
- return [_c("dt-icon-close", { attrs: { "size": "300" } })];
76
- }, proxy: true }], null, false, 2465905460) }, "dt-button", _vm.closeButtonProps, false)) : _vm._e()], 1);
75
+ return [_c("dt-icon", { attrs: { "name": "close", "size": "300" } })];
76
+ }, proxy: true }], null, false, 2538694920) }, "dt-button", _vm.closeButtonProps, false)) : _vm._e()], 1);
77
77
  };
78
78
  var _sfc_staticRenderFns = [];
79
79
  var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
@@ -1 +1 @@
1
- {"version":3,"file":"popover_header_footer.vue.cjs","sources":["../../../components/popover/popover_header_footer.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"dt-popover-header-footer\"\n :class=\"{\n 'd-popover__header': type === 'header',\n 'd-popover__footer': type === 'footer',\n }\"\n >\n <div\n v-if=\"$slots.content\"\n data-qa=\"dt-popover-header-footer-content\"\n :class=\"[{\n 'd-popover__header__content': type === 'header',\n 'd-popover__footer__content': type === 'footer',\n }, contentClass]\"\n >\n <!-- @slot Slot for main content -->\n <slot name=\"content\" />\n </div>\n <dt-button\n v-if=\"showCloseButton\"\n ref=\"popover__close-button\"\n data-qa=\"dt-popover-close\"\n :class=\"{\n 'd-popover__header__close-button': type === 'header',\n 'd-popover__footer__close-button': type === 'footer',\n }\"\n importance=\"outlined\"\n kind=\"muted\"\n circle\n v-bind=\"closeButtonProps\"\n @click=\"$emit('close')\"\n >\n <template #icon>\n <dt-icon-close\n size=\"300\"\n />\n </template>\n </dt-button>\n </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'PopoverHeaderFooter',\n components: {\n DtButton,\n DtIconClose,\n },\n\n props: {\n // eslint-disable-next-line vue/require-default-prop\n type: {\n type: String,\n validator: function (value) {\n return ['header', 'footer'].includes(value);\n },\n },\n\n /**\n * Additional class name for the content wrapper element.\n */\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Determines visibility for close button\n * @values true, false\n */\n showCloseButton: {\n type: Boolean,\n default: false,\n },\n\n /**\n * A set of props to be passed into the popover's header close button.\n * Requires an 'ariaLabel' property.\n */\n closeButtonProps: {\n type: Object,\n default: () => {},\n },\n },\n\n emits: [\n /**\n * Emitted when popover is closed\n *\n * @event close\n * @type { Boolean }\n */\n 'close',\n ],\n\n methods: {\n focusCloseButton () {\n const closeButton = this.$refs['popover__close-button']?.$el;\n closeButton?.focus();\n },\n },\n};\n</script>\n"],"names":["DtButton","DtIconClose"],"mappings":";;;;AA8CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA;AAAAA,IACA,aAAAC,KAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA,IAEA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA,SAAA,OAAA;AACA,eAAA,CAAA,UAAA,QAAA,EAAA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,mBAAA;;AACA,YAAA,eAAA,UAAA,MAAA,uBAAA,MAAA,mBAAA;AACA,iDAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"popover_header_footer.vue.cjs","sources":["../../../components/popover/popover_header_footer.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"dt-popover-header-footer\"\n :class=\"{\n 'd-popover__header': type === 'header',\n 'd-popover__footer': type === 'footer',\n }\"\n >\n <div\n v-if=\"$slots.content\"\n data-qa=\"dt-popover-header-footer-content\"\n :class=\"[{\n 'd-popover__header__content': type === 'header',\n 'd-popover__footer__content': type === 'footer',\n }, contentClass]\"\n >\n <!-- @slot Slot for main content -->\n <slot name=\"content\" />\n </div>\n <dt-button\n v-if=\"showCloseButton\"\n ref=\"popover__close-button\"\n data-qa=\"dt-popover-close\"\n :class=\"{\n 'd-popover__header__close-button': type === 'header',\n 'd-popover__footer__close-button': type === 'footer',\n }\"\n importance=\"outlined\"\n kind=\"muted\"\n circle\n v-bind=\"closeButtonProps\"\n @click=\"$emit('close')\"\n >\n <template #icon>\n <dt-icon\n name=\"close\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\nexport default {\n name: 'PopoverHeaderFooter',\n components: {\n DtButton,\n DtIcon,\n },\n\n props: {\n // eslint-disable-next-line vue/require-default-prop\n type: {\n type: String,\n validator: function (value) {\n return ['header', 'footer'].includes(value);\n },\n },\n\n /**\n * Additional class name for the content wrapper element.\n */\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Determines visibility for close button\n * @values true, false\n */\n showCloseButton: {\n type: Boolean,\n default: false,\n },\n\n /**\n * A set of props to be passed into the popover's header close button.\n * Requires an 'ariaLabel' property.\n */\n closeButtonProps: {\n type: Object,\n default: () => {},\n },\n },\n\n emits: [\n /**\n * Emitted when popover is closed\n *\n * @event close\n * @type { Boolean }\n */\n 'close',\n ],\n\n methods: {\n focusCloseButton () {\n const closeButton = this.$refs['popover__close-button']?.$el;\n closeButton?.focus();\n },\n },\n};\n</script>\n"],"names":["DtButton","DtIcon"],"mappings":";;;;AA+CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA;AAAAA,IACA,QAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA,IAEA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA,SAAA,OAAA;AACA,eAAA,CAAA,UAAA,QAAA,EAAA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,mBAAA;;AACA,YAAA,eAAA,UAAA,MAAA,uBAAA,MAAA,mBAAA;AACA,iDAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,11 +1,11 @@
1
- import { DtIconClose } from "@dialpad/dialtone-icons/vue2";
2
1
  import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
3
2
  import DtButton from "../button/button.vue.js";
3
+ import DtIcon from "../icon/icon.vue.js";
4
4
  const _sfc_main = {
5
5
  name: "PopoverHeaderFooter",
6
6
  components: {
7
7
  DtButton,
8
- DtIconClose
8
+ DtIcon
9
9
  },
10
10
  props: {
11
11
  // eslint-disable-next-line vue/require-default-prop
@@ -71,8 +71,8 @@ var _sfc_render = function render() {
71
71
  }, attrs: { "data-qa": "dt-popover-close", "importance": "outlined", "kind": "muted", "circle": "" }, on: { "click": function($event) {
72
72
  return _vm.$emit("close");
73
73
  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
74
- return [_c("dt-icon-close", { attrs: { "size": "300" } })];
75
- }, proxy: true }], null, false, 2465905460) }, "dt-button", _vm.closeButtonProps, false)) : _vm._e()], 1);
74
+ return [_c("dt-icon", { attrs: { "name": "close", "size": "300" } })];
75
+ }, proxy: true }], null, false, 2538694920) }, "dt-button", _vm.closeButtonProps, false)) : _vm._e()], 1);
76
76
  };
77
77
  var _sfc_staticRenderFns = [];
78
78
  var __component__ = /* @__PURE__ */ normalizeComponent(
@@ -1 +1 @@
1
- {"version":3,"file":"popover_header_footer.vue.js","sources":["../../../components/popover/popover_header_footer.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"dt-popover-header-footer\"\n :class=\"{\n 'd-popover__header': type === 'header',\n 'd-popover__footer': type === 'footer',\n }\"\n >\n <div\n v-if=\"$slots.content\"\n data-qa=\"dt-popover-header-footer-content\"\n :class=\"[{\n 'd-popover__header__content': type === 'header',\n 'd-popover__footer__content': type === 'footer',\n }, contentClass]\"\n >\n <!-- @slot Slot for main content -->\n <slot name=\"content\" />\n </div>\n <dt-button\n v-if=\"showCloseButton\"\n ref=\"popover__close-button\"\n data-qa=\"dt-popover-close\"\n :class=\"{\n 'd-popover__header__close-button': type === 'header',\n 'd-popover__footer__close-button': type === 'footer',\n }\"\n importance=\"outlined\"\n kind=\"muted\"\n circle\n v-bind=\"closeButtonProps\"\n @click=\"$emit('close')\"\n >\n <template #icon>\n <dt-icon-close\n size=\"300\"\n />\n </template>\n </dt-button>\n </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'PopoverHeaderFooter',\n components: {\n DtButton,\n DtIconClose,\n },\n\n props: {\n // eslint-disable-next-line vue/require-default-prop\n type: {\n type: String,\n validator: function (value) {\n return ['header', 'footer'].includes(value);\n },\n },\n\n /**\n * Additional class name for the content wrapper element.\n */\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Determines visibility for close button\n * @values true, false\n */\n showCloseButton: {\n type: Boolean,\n default: false,\n },\n\n /**\n * A set of props to be passed into the popover's header close button.\n * Requires an 'ariaLabel' property.\n */\n closeButtonProps: {\n type: Object,\n default: () => {},\n },\n },\n\n emits: [\n /**\n * Emitted when popover is closed\n *\n * @event close\n * @type { Boolean }\n */\n 'close',\n ],\n\n methods: {\n focusCloseButton () {\n const closeButton = this.$refs['popover__close-button']?.$el;\n closeButton?.focus();\n },\n },\n};\n</script>\n"],"names":[],"mappings":";;;AA8CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA,IAEA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA,SAAA,OAAA;AACA,eAAA,CAAA,UAAA,QAAA,EAAA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,mBAAA;;AACA,YAAA,eAAA,UAAA,MAAA,uBAAA,MAAA,mBAAA;AACA,iDAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"popover_header_footer.vue.js","sources":["../../../components/popover/popover_header_footer.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"dt-popover-header-footer\"\n :class=\"{\n 'd-popover__header': type === 'header',\n 'd-popover__footer': type === 'footer',\n }\"\n >\n <div\n v-if=\"$slots.content\"\n data-qa=\"dt-popover-header-footer-content\"\n :class=\"[{\n 'd-popover__header__content': type === 'header',\n 'd-popover__footer__content': type === 'footer',\n }, contentClass]\"\n >\n <!-- @slot Slot for main content -->\n <slot name=\"content\" />\n </div>\n <dt-button\n v-if=\"showCloseButton\"\n ref=\"popover__close-button\"\n data-qa=\"dt-popover-close\"\n :class=\"{\n 'd-popover__header__close-button': type === 'header',\n 'd-popover__footer__close-button': type === 'footer',\n }\"\n importance=\"outlined\"\n kind=\"muted\"\n circle\n v-bind=\"closeButtonProps\"\n @click=\"$emit('close')\"\n >\n <template #icon>\n <dt-icon\n name=\"close\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\nexport default {\n name: 'PopoverHeaderFooter',\n components: {\n DtButton,\n DtIcon,\n },\n\n props: {\n // eslint-disable-next-line vue/require-default-prop\n type: {\n type: String,\n validator: function (value) {\n return ['header', 'footer'].includes(value);\n },\n },\n\n /**\n * Additional class name for the content wrapper element.\n */\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Determines visibility for close button\n * @values true, false\n */\n showCloseButton: {\n type: Boolean,\n default: false,\n },\n\n /**\n * A set of props to be passed into the popover's header close button.\n * Requires an 'ariaLabel' property.\n */\n closeButtonProps: {\n type: Object,\n default: () => {},\n },\n },\n\n emits: [\n /**\n * Emitted when popover is closed\n *\n * @event close\n * @type { Boolean }\n */\n 'close',\n ],\n\n methods: {\n focusCloseButton () {\n const closeButton = this.$refs['popover__close-button']?.$el;\n closeButton?.focus();\n },\n },\n};\n</script>\n"],"names":[],"mappings":";;;AA+CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA,IAEA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA,SAAA,OAAA;AACA,eAAA,CAAA,UAAA,QAAA,EAAA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,mBAAA;;AACA,YAAA,eAAA,UAAA,MAAA,uBAAA,MAAA,mBAAA;AACA,iDAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -264,6 +264,8 @@ exports.DtInputGroup = input_group$1;
264
264
  exports.DtItemLayout = item_layout;
265
265
  exports.DtKeyboardShortcut = keyboard_shortcut;
266
266
  exports.SHORTCUTS_ALIASES_LIST = keyboard_shortcut_constants.SHORTCUTS_ALIASES_LIST;
267
+ exports.SHORTCUTS_ICON_ALIASES = keyboard_shortcut_constants.SHORTCUTS_ICON_ALIASES;
268
+ exports.SHORTCUTS_ICON_SEPARATOR = keyboard_shortcut_constants.SHORTCUTS_ICON_SEPARATOR;
267
269
  exports.DtLazyShow = lazy_show;
268
270
  exports.DtLink = link;
269
271
  exports.LINK_KIND_MODIFIERS = link_constants.LINK_KIND_MODIFIERS;
@@ -388,6 +390,7 @@ exports.DtRecipeContactRow = contact_row;
388
390
  exports.DtRecipeGeneralRow = general_row;
389
391
  exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = general_row_constants.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS;
390
392
  exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = general_row_constants.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR;
393
+ exports.LEFTBAR_GENERAL_ROW_ICON_MAPPING = general_row_constants.LEFTBAR_GENERAL_ROW_ICON_MAPPING;
391
394
  exports.LEFTBAR_GENERAL_ROW_ICON_SIZES = general_row_constants.LEFTBAR_GENERAL_ROW_ICON_SIZES;
392
395
  exports.LEFTBAR_GENERAL_ROW_TYPES = general_row_constants.LEFTBAR_GENERAL_ROW_TYPES;
393
396
  exports.DtRecipeGroupRow = group_row;
@@ -1 +1 @@
1
- {"version":3,"file":"dialtone-vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"dialtone-vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -51,7 +51,7 @@ import { INPUT_SIZES, INPUT_TYPES } from "./components/input/input_constants.js"
51
51
  import { default as default30 } from "./components/input_group/input_group.vue.js";
52
52
  import { default as default31 } from "./components/item_layout/item_layout.vue.js";
53
53
  import { default as default32 } from "./components/keyboard_shortcut/keyboard_shortcut.vue.js";
54
- import { SHORTCUTS_ALIASES_LIST } from "./components/keyboard_shortcut/keyboard_shortcut_constants.js";
54
+ import { SHORTCUTS_ALIASES_LIST, SHORTCUTS_ICON_ALIASES, SHORTCUTS_ICON_SEPARATOR } from "./components/keyboard_shortcut/keyboard_shortcut_constants.js";
55
55
  import { default as default33 } from "./components/lazy_show/lazy_show.vue.js";
56
56
  import { default as default34 } from "./components/link/link.vue.js";
57
57
  import { LINK_KIND_MODIFIERS, LINK_VARIANTS, getLinkKindModifier } from "./components/link/link_constants.js";
@@ -128,7 +128,7 @@ import { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from "./recipes/leftbar/c
128
128
  import { default as default82 } from "./recipes/leftbar/contact_centers_row/contact_centers_row.vue.js";
129
129
  import { default as default83 } from "./recipes/leftbar/contact_row/contact_row.vue.js";
130
130
  import { default as default84 } from "./recipes/leftbar/general_row/general_row.vue.js";
131
- import { LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR, LEFTBAR_GENERAL_ROW_ICON_SIZES, LEFTBAR_GENERAL_ROW_TYPES } from "./recipes/leftbar/general_row/general_row_constants.js";
131
+ import { LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR, LEFTBAR_GENERAL_ROW_ICON_MAPPING, LEFTBAR_GENERAL_ROW_ICON_SIZES, LEFTBAR_GENERAL_ROW_TYPES } from "./recipes/leftbar/general_row/general_row_constants.js";
132
132
  import { default as default85 } from "./recipes/leftbar/group_row/group_row.vue.js";
133
133
  import { default as default86 } from "./recipes/leftbar/unread_pill/unread_pill.vue.js";
134
134
  import { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from "./recipes/leftbar/unread_pill/unread_pill_constants.js";
@@ -289,6 +289,7 @@ export {
289
289
  LABEL_SIZES,
290
290
  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,
291
291
  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,
292
+ LEFTBAR_GENERAL_ROW_ICON_MAPPING,
292
293
  LEFTBAR_GENERAL_ROW_ICON_SIZES,
293
294
  LEFTBAR_GENERAL_ROW_TYPES,
294
295
  LINK_KIND_MODIFIERS,
@@ -320,6 +321,8 @@ export {
320
321
  SELECT_SIZE_MODIFIERS,
321
322
  SELECT_STATE_MODIFIERS,
322
323
  SHORTCUTS_ALIASES_LIST,
324
+ SHORTCUTS_ICON_ALIASES,
325
+ SHORTCUTS_ICON_SEPARATOR,
323
326
  SKELETON_HEADING_HEIGHTS,
324
327
  SKELETON_RIPPLE_DURATION,
325
328
  SKELETON_SHAPES,
@@ -5,6 +5,7 @@ const general_row_constants = require("../recipes/leftbar/general_row/general_ro
5
5
  exports.DtRecipeGeneralRow = general_row;
6
6
  exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = general_row_constants.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS;
7
7
  exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = general_row_constants.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR;
8
+ exports.LEFTBAR_GENERAL_ROW_ICON_MAPPING = general_row_constants.LEFTBAR_GENERAL_ROW_ICON_MAPPING;
8
9
  exports.LEFTBAR_GENERAL_ROW_ICON_SIZES = general_row_constants.LEFTBAR_GENERAL_ROW_ICON_SIZES;
9
10
  exports.LEFTBAR_GENERAL_ROW_TYPES = general_row_constants.LEFTBAR_GENERAL_ROW_TYPES;
10
11
  //# sourceMappingURL=general-row.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"general-row.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
1
+ {"version":3,"file":"general-row.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
@@ -1,9 +1,10 @@
1
1
  import { default as default2 } from "../recipes/leftbar/general_row/general_row.vue.js";
2
- import { LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR, LEFTBAR_GENERAL_ROW_ICON_SIZES, LEFTBAR_GENERAL_ROW_TYPES } from "../recipes/leftbar/general_row/general_row_constants.js";
2
+ import { LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR, LEFTBAR_GENERAL_ROW_ICON_MAPPING, LEFTBAR_GENERAL_ROW_ICON_SIZES, LEFTBAR_GENERAL_ROW_TYPES } from "../recipes/leftbar/general_row/general_row_constants.js";
3
3
  export {
4
4
  default2 as DtRecipeGeneralRow,
5
5
  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,
6
6
  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,
7
+ LEFTBAR_GENERAL_ROW_ICON_MAPPING,
7
8
  LEFTBAR_GENERAL_ROW_ICON_SIZES,
8
9
  LEFTBAR_GENERAL_ROW_TYPES
9
10
  };
@@ -4,4 +4,6 @@ const keyboard_shortcut = require("../components/keyboard_shortcut/keyboard_shor
4
4
  const keyboard_shortcut_constants = require("../components/keyboard_shortcut/keyboard_shortcut_constants.cjs");
5
5
  exports.DtKeyboardShortcut = keyboard_shortcut;
6
6
  exports.SHORTCUTS_ALIASES_LIST = keyboard_shortcut_constants.SHORTCUTS_ALIASES_LIST;
7
+ exports.SHORTCUTS_ICON_ALIASES = keyboard_shortcut_constants.SHORTCUTS_ICON_ALIASES;
8
+ exports.SHORTCUTS_ICON_SEPARATOR = keyboard_shortcut_constants.SHORTCUTS_ICON_SEPARATOR;
7
9
  //# sourceMappingURL=keyboard-shortcut.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"keyboard-shortcut.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
1
+ {"version":3,"file":"keyboard-shortcut.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -1,7 +1,9 @@
1
1
  import { default as default2 } from "../components/keyboard_shortcut/keyboard_shortcut.vue.js";
2
- import { SHORTCUTS_ALIASES_LIST } from "../components/keyboard_shortcut/keyboard_shortcut_constants.js";
2
+ import { SHORTCUTS_ALIASES_LIST, SHORTCUTS_ICON_ALIASES, SHORTCUTS_ICON_SEPARATOR } from "../components/keyboard_shortcut/keyboard_shortcut_constants.js";
3
3
  export {
4
4
  default2 as DtKeyboardShortcut,
5
- SHORTCUTS_ALIASES_LIST
5
+ SHORTCUTS_ALIASES_LIST,
6
+ SHORTCUTS_ICON_ALIASES,
7
+ SHORTCUTS_ICON_SEPARATOR
6
8
  };
7
9
  //# sourceMappingURL=keyboard-shortcut.js.map
@@ -1,15 +1,15 @@
1
1
  "use strict";
2
- const vue2 = require("@dialpad/dialtone-icons/vue2");
3
2
  const common_utils = require("../../../common/utils.cjs");
4
3
  ;/* empty css */
5
4
  const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
6
5
  const callbar_button = require("../callbar_button/callbar_button.vue.cjs");
7
6
  const popover = require("../../../components/popover/popover.vue.cjs");
8
7
  const button = require("../../../components/button/button.vue.cjs");
8
+ const icon = require("../../../components/icon/icon.vue.cjs");
9
9
  const callbar_button_constants = require("../callbar_button/callbar_button_constants.cjs");
10
10
  const _sfc_main = {
11
11
  name: "DtRecipeCallbarButtonWithPopover",
12
- components: { DtRecipeCallbarButton: callbar_button, DtPopover: popover, DtButton: button, DtIconChevronUp: vue2.DtIconChevronUp },
12
+ components: { DtRecipeCallbarButton: callbar_button, DtPopover: popover, DtButton: button, DtIcon: icon },
13
13
  /* inheritAttrs: false is generally an option we want to set on library
14
14
  components. This allows any attributes passed in that are not recognized
15
15
  as props to be passed down to another element or component using v-bind:$attrs
@@ -233,9 +233,9 @@ var _sfc_render = function render() {
233
233
  "dt-recipe--callbar-button-with-popover--arrow",
234
234
  { "dt-recipe--callbar-button-with-popover--arrow--large": !_vm.isCompactMode }
235
235
  ], attrs: { "circle": "", "importance": "clear", "size": "lg", "width": "2rem", "aria-label": _vm.arrowButtonLabel, "active": _vm.open }, on: { "click": _vm.arrowClick }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
236
- return [_c("dt-icon-chevron-up", { staticClass: "dt-recipe--callbar-button-with-popover--arrow__icon", attrs: { "size": "200" } })];
237
- }, proxy: true }], null, false, 2938859436) })];
238
- }, proxy: true }], null, false, 3932808238) }, "dt-popover", _vm.$attrs, false), [_vm._t("content", null, { "slot": "content" }), _vm._t("headerContent", null, { "slot": "headerContent" }), _vm._t("footerContent", null, { "slot": "footerContent" })], 2) : _vm._e()], 1);
236
+ return [_c("dt-icon", { staticClass: "dt-recipe--callbar-button-with-popover--arrow__icon", attrs: { "name": "chevron-up", "size": "200" } })];
237
+ }, proxy: true }], null, false, 982444464) })];
238
+ }, proxy: true }], null, false, 3818376870) }, "dt-popover", _vm.$attrs, false), [_vm._t("content", null, { "slot": "content" }), _vm._t("headerContent", null, { "slot": "headerContent" }), _vm._t("footerContent", null, { "slot": "footerContent" })], 2) : _vm._e()], 1);
239
239
  };
240
240
  var _sfc_staticRenderFns = [];
241
241
  var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
@@ -1 +1 @@
1
- {"version":3,"file":"callbar_button_with_popover.vue.cjs","sources":["../../../../recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue"],"sourcesContent":["<template>\n <div\n class=\"dt-recipe--callbar-button-with-popover\"\n >\n <dt-recipe-callbar-button\n :aria-label=\"ariaLabel\"\n :disabled=\"disabled\"\n :active=\"active\"\n :danger=\"danger\"\n :button-class=\"buttonClass\"\n :button-width-size=\"buttonWidthSize\"\n :text-class=\"textClass\"\n class=\"dt-recipe--callbar-button-with-popover--main-button\"\n @click=\"buttonClick\"\n >\n <slot\n slot=\"icon\"\n name=\"icon\"\n />\n <slot\n slot=\"tooltip\"\n name=\"tooltip\"\n />\n <slot />\n </dt-recipe-callbar-button>\n <dt-popover\n v-if=\"showArrowButton\"\n :id=\"id\"\n :modal=\"false\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"initialFocusElement\"\n :show-close-button=\"showCloseButton\"\n :offset=\"offset\"\n padding=\"none\"\n class=\"dt-recipe--callbar-button-with-popover--popover-wrapper\"\n :dialog-class=\"['dt-recipe--callbar-button-with-popover--popover', contentClass]\"\n header-class=\"d-d-flex d-ai-center d-fw-normal d-px12\"\n v-bind=\"$attrs\"\n :open-popover=\"showPopover\"\n @opened=\"onModalIsOpened\"\n >\n <template #anchor>\n <dt-button\n circle\n importance=\"clear\"\n size=\"lg\"\n :class=\"['dt-recipe--callbar-button-with-popover--arrow',\n { 'dt-recipe--callbar-button-with-popover--arrow--large': !isCompactMode }]\"\n width=\"2rem\"\n :aria-label=\"arrowButtonLabel\"\n :active=\"open\"\n @click=\"arrowClick\"\n >\n <template #icon>\n <dt-icon-chevron-up\n class=\"dt-recipe--callbar-button-with-popover--arrow__icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n <slot\n slot=\"content\"\n name=\"content\"\n />\n <slot\n slot=\"headerContent\"\n name=\"headerContent\"\n />\n <slot\n slot=\"footerContent\"\n name=\"footerContent\"\n />\n </dt-popover>\n </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtIconChevronUp } from '@dialpad/dialtone-icons/vue2';\nimport { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';\nimport utils from '@/common/utils';\n\nexport default {\n name: 'DtRecipeCallbarButtonWithPopover',\n\n components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIconChevronUp },\n\n /* inheritAttrs: false is generally an option we want to set on library\n components. This allows any attributes passed in that are not recognized\n as props to be passed down to another element or component using v-bind:$attrs\n more info: https://vuejs.org/v2/api/#inheritAttrs */\n inheritAttrs: false,\n\n props: {\n /**\n * Id for the item.\n */\n id: {\n type: String,\n default () {\n return utils.getUniqueString();\n },\n },\n\n /**\n * Aria label for the button. If empty, it takes its value from the default slot.\n */\n ariaLabel: {\n type: String,\n default: null,\n validator: (label) => {\n return label || this.$slots.default;\n },\n },\n\n /**\n * Aria label for the arrow. Cannot be empty.\n */\n arrowButtonLabel: {\n type: String,\n required: true,\n validator: (label) => {\n return !!label;\n },\n },\n\n /**\n * The direction the popover displays relative to the anchor.\n * @values 'bottom', 'bottom-start', 'bottom-end',\n * 'right', 'right-start', 'right-end',\n * 'left', 'left-start', 'left-end',\n * 'top', 'top-start', 'top-end'\n * @default 'top'\n */\n placement: {\n type: String,\n default: 'top',\n },\n\n /**\n * Displaces the content box from its anchor element\n * by the specified number of pixels.\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n */\n offset: {\n type: Array,\n default: () => [0, 16],\n },\n\n /**\n * The element that is focused when the popover is opened. This can be an\n * HTMLElement within the popover, a string starting with '#' which will\n * find the element by ID. 'first' which will automatically focus\n * the first element, or 'dialog' which will focus the dialog window itself.\n * If the dialog is modal this prop cannot be 'none'.\n */\n initialFocusElement: {\n type: String,\n default: 'first',\n },\n\n /**\n * Determines visibility for close button\n */\n showCloseButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Determines whether the button should be disabled\n * default is false.\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Forces showing the arrow, even if the button is disabled.\n * default is false\n * @values true, false\n */\n forceShowArrow: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines whether the button should have active styling\n * default is false.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n */\n active: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines whether the button should have danger styling\n * default is false.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n */\n danger: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Additional class name for the button wrapper element.\n */\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the button text.\n */\n textClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /*\n * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n */\n buttonWidthSize: {\n type: String,\n default: 'xl',\n validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n },\n\n /**\n * Additional class name for the popover content wrapper element.\n */\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * To auto open the modal popover.\n */\n openPopover: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Emitted when the arrow is clicked\n */\n 'arrow-click',\n\n /**\n * Native click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n\n /**\n * Emitted when modal popover is opened or closed.\n */\n 'opened',\n ],\n\n data () {\n return {\n open: false,\n };\n },\n\n computed: {\n showArrowButton () {\n return this.forceShowArrow || !this.disabled;\n },\n\n isCompactMode () {\n return this.buttonWidthSize === 'sm' || this.buttonWidthSize === 'md';\n },\n\n showPopover () {\n if (!this.openPopover || this.open) {\n this.syncOpenState();\n return false;\n }\n\n return this.toggleOpen();\n },\n },\n\n methods: {\n arrowClick (ev) {\n this.$emit('arrow-click', ev);\n return this.toggleOpen();\n },\n\n toggleOpen () {\n return (this.open = !this.open);\n },\n\n syncOpenState () {\n this.open = this.openPopover;\n },\n\n buttonClick (ev) {\n // If no listener for the click event, the button click opens the popover\n // the same as if the arrow was clicked.\n if (!this.$listeners.click) {\n this.arrowClick(ev);\n } else {\n this.$emit('click', ev);\n }\n },\n\n onModalIsOpened (isOpened) {\n this.open = isOpened;\n this.$emit('opened', isOpened);\n },\n },\n\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe--callbar-button-with-popover--arrow {\n margin-top: var(--dt-space-350-negative);\n margin-left: calc(var(--dt-space-300-negative) * 5);\n width: var(--dt-size-500);\n height: var(--dt-size-500);\n padding: var(--dt-space-400);\n border-radius: var(--dt-size-300);\n\n &.d-btn--active {\n background: var(--dt-color-surface-moderate-opaque);\n }\n\n &--large {\n margin-left: var(--dt-space-550-negative);\n }\n\n &__icon {\n color: var(--dt-color-black-800);\n }\n}\n\n.dt-recipe--callbar-button-with-popover--popover {\n .d-popover__header {\n background: var(--dt-color-surface-contrast);\n color: var(--dt-color-foreground-primary-inverted);\n\n .d-btn {\n color: var(--dt-color-foreground-primary-inverted);\n }\n }\n}\n\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected::after,\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover::after {\n --tab--bgc: var(--dt-color-surface-contrast);\n}\n.dt-recipe--callbar-button-with-popover--button .tab-group {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.dt-recipe--callbar-button-with-popover--button .tab-content {\n flex: 1 1 100%;\n overflow-y: auto;\n}\n\n.dt-recipe--callbar-button-with-popover {\n display: flex;\n align-items: center;\n}\n</style>\n"],"names":["DtRecipeCallbarButton","DtPopover","DtButton","DtIconChevronUp","utils","this","CALLBAR_BUTTON_VALID_WIDTH_SIZE"],"mappings":";;;;;;;;;AAqFA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,uBAAAA,gBAAA,WAAAC,SAAAC,UAAAA,QAAAC,iBAAAA,KAAAA,gBAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AACA,eAAAC,aAAAA,QAAA;MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA;AACA,eAAA,SAAAC,SAAA,OAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAA,UAAA;AACA,eAAA,CAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA,GAAA,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,UAAAC,yDAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,kBAAA;AACA,aAAA,KAAA,kBAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,oBAAA,QAAA,KAAA,oBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,UAAA,CAAA,KAAA,eAAA,KAAA,MAAA;AACA,aAAA,cAAA;AACA,eAAA;AAAA,MACA;AAEA,aAAA,KAAA;IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,WAAA,IAAA;AACA,WAAA,MAAA,eAAA,EAAA;AACA,aAAA,KAAA;IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,OAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,WAAA,OAAA,KAAA;AAAA,IACA;AAAA,IAEA,YAAA,IAAA;AAGA,UAAA,CAAA,KAAA,WAAA,OAAA;AACA,aAAA,WAAA,EAAA;AAAA,MACA,OAAA;AACA,aAAA,MAAA,SAAA,EAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,gBAAA,UAAA;AACA,WAAA,OAAA;AACA,WAAA,MAAA,UAAA,QAAA;AAAA,IACA;AAAA,EACA;AAEA;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"callbar_button_with_popover.vue.cjs","sources":["../../../../recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue"],"sourcesContent":["<template>\n <div\n class=\"dt-recipe--callbar-button-with-popover\"\n >\n <dt-recipe-callbar-button\n :aria-label=\"ariaLabel\"\n :disabled=\"disabled\"\n :active=\"active\"\n :danger=\"danger\"\n :button-class=\"buttonClass\"\n :button-width-size=\"buttonWidthSize\"\n :text-class=\"textClass\"\n class=\"dt-recipe--callbar-button-with-popover--main-button\"\n @click=\"buttonClick\"\n >\n <slot\n slot=\"icon\"\n name=\"icon\"\n />\n <slot\n slot=\"tooltip\"\n name=\"tooltip\"\n />\n <slot />\n </dt-recipe-callbar-button>\n <dt-popover\n v-if=\"showArrowButton\"\n :id=\"id\"\n :modal=\"false\"\n :open=\"open\"\n :placement=\"placement\"\n :initial-focus-element=\"initialFocusElement\"\n :show-close-button=\"showCloseButton\"\n :offset=\"offset\"\n padding=\"none\"\n class=\"dt-recipe--callbar-button-with-popover--popover-wrapper\"\n :dialog-class=\"['dt-recipe--callbar-button-with-popover--popover', contentClass]\"\n header-class=\"d-d-flex d-ai-center d-fw-normal d-px12\"\n v-bind=\"$attrs\"\n :open-popover=\"showPopover\"\n @opened=\"onModalIsOpened\"\n >\n <template #anchor>\n <dt-button\n circle\n importance=\"clear\"\n size=\"lg\"\n :class=\"['dt-recipe--callbar-button-with-popover--arrow',\n { 'dt-recipe--callbar-button-with-popover--arrow--large': !isCompactMode }]\"\n width=\"2rem\"\n :aria-label=\"arrowButtonLabel\"\n :active=\"open\"\n @click=\"arrowClick\"\n >\n <template #icon>\n <dt-icon\n name=\"chevron-up\"\n class=\"dt-recipe--callbar-button-with-popover--arrow__icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n <slot\n slot=\"content\"\n name=\"content\"\n />\n <slot\n slot=\"headerContent\"\n name=\"headerContent\"\n />\n <slot\n slot=\"footerContent\"\n name=\"footerContent\"\n />\n </dt-popover>\n </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtIcon } from '@/components/icon';\nimport { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';\nimport utils from '@/common/utils';\n\nexport default {\n name: 'DtRecipeCallbarButtonWithPopover',\n\n components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIcon },\n\n /* inheritAttrs: false is generally an option we want to set on library\n components. This allows any attributes passed in that are not recognized\n as props to be passed down to another element or component using v-bind:$attrs\n more info: https://vuejs.org/v2/api/#inheritAttrs */\n inheritAttrs: false,\n\n props: {\n /**\n * Id for the item.\n */\n id: {\n type: String,\n default () {\n return utils.getUniqueString();\n },\n },\n\n /**\n * Aria label for the button. If empty, it takes its value from the default slot.\n */\n ariaLabel: {\n type: String,\n default: null,\n validator: (label) => {\n return label || this.$slots.default;\n },\n },\n\n /**\n * Aria label for the arrow. Cannot be empty.\n */\n arrowButtonLabel: {\n type: String,\n required: true,\n validator: (label) => {\n return !!label;\n },\n },\n\n /**\n * The direction the popover displays relative to the anchor.\n * @values 'bottom', 'bottom-start', 'bottom-end',\n * 'right', 'right-start', 'right-end',\n * 'left', 'left-start', 'left-end',\n * 'top', 'top-start', 'top-end'\n * @default 'top'\n */\n placement: {\n type: String,\n default: 'top',\n },\n\n /**\n * Displaces the content box from its anchor element\n * by the specified number of pixels.\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n */\n offset: {\n type: Array,\n default: () => [0, 16],\n },\n\n /**\n * The element that is focused when the popover is opened. This can be an\n * HTMLElement within the popover, a string starting with '#' which will\n * find the element by ID. 'first' which will automatically focus\n * the first element, or 'dialog' which will focus the dialog window itself.\n * If the dialog is modal this prop cannot be 'none'.\n */\n initialFocusElement: {\n type: String,\n default: 'first',\n },\n\n /**\n * Determines visibility for close button\n */\n showCloseButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Determines whether the button should be disabled\n * default is false.\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Forces showing the arrow, even if the button is disabled.\n * default is false\n * @values true, false\n */\n forceShowArrow: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines whether the button should have active styling\n * default is false.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n */\n active: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines whether the button should have danger styling\n * default is false.\n * @values true, false\n * @see https://dialtone.dialpad.com/components/button/\n */\n danger: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Additional class name for the button wrapper element.\n */\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Additional class name for the button text.\n */\n textClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /*\n * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n */\n buttonWidthSize: {\n type: String,\n default: 'xl',\n validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n },\n\n /**\n * Additional class name for the popover content wrapper element.\n */\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * To auto open the modal popover.\n */\n openPopover: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Emitted when the arrow is clicked\n */\n 'arrow-click',\n\n /**\n * Native click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n\n /**\n * Emitted when modal popover is opened or closed.\n */\n 'opened',\n ],\n\n data () {\n return {\n open: false,\n };\n },\n\n computed: {\n showArrowButton () {\n return this.forceShowArrow || !this.disabled;\n },\n\n isCompactMode () {\n return this.buttonWidthSize === 'sm' || this.buttonWidthSize === 'md';\n },\n\n showPopover () {\n if (!this.openPopover || this.open) {\n this.syncOpenState();\n return false;\n }\n\n return this.toggleOpen();\n },\n },\n\n methods: {\n arrowClick (ev) {\n this.$emit('arrow-click', ev);\n return this.toggleOpen();\n },\n\n toggleOpen () {\n return (this.open = !this.open);\n },\n\n syncOpenState () {\n this.open = this.openPopover;\n },\n\n buttonClick (ev) {\n // If no listener for the click event, the button click opens the popover\n // the same as if the arrow was clicked.\n if (!this.$listeners.click) {\n this.arrowClick(ev);\n } else {\n this.$emit('click', ev);\n }\n },\n\n onModalIsOpened (isOpened) {\n this.open = isOpened;\n this.$emit('opened', isOpened);\n },\n },\n\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe--callbar-button-with-popover--arrow {\n margin-top: var(--dt-space-350-negative);\n margin-left: calc(var(--dt-space-300-negative) * 5);\n width: var(--dt-size-500);\n height: var(--dt-size-500);\n padding: var(--dt-space-400);\n border-radius: var(--dt-size-300);\n\n &.d-btn--active {\n background: var(--dt-color-surface-moderate-opaque);\n }\n\n &--large {\n margin-left: var(--dt-space-550-negative);\n }\n\n &__icon {\n color: var(--dt-color-black-800);\n }\n}\n\n.dt-recipe--callbar-button-with-popover--popover {\n .d-popover__header {\n background: var(--dt-color-surface-contrast);\n color: var(--dt-color-foreground-primary-inverted);\n\n .d-btn {\n color: var(--dt-color-foreground-primary-inverted);\n }\n }\n}\n\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected::after,\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover::after {\n --tab--bgc: var(--dt-color-surface-contrast);\n}\n.dt-recipe--callbar-button-with-popover--button .tab-group {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.dt-recipe--callbar-button-with-popover--button .tab-content {\n flex: 1 1 100%;\n overflow-y: auto;\n}\n\n.dt-recipe--callbar-button-with-popover {\n display: flex;\n align-items: center;\n}\n</style>\n"],"names":["DtRecipeCallbarButton","DtPopover","DtButton","DtIcon","utils","this","CALLBAR_BUTTON_VALID_WIDTH_SIZE"],"mappings":"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"}