@adyen/bento-vue2 1.7.0 → 1.8.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 (223) hide show
  1. package/dist/@types/components.d.ts +2 -0
  2. package/dist/@types/packages/core/src/components/button/button.types.d.ts +1 -1
  3. package/dist/@types/packages/vue2/src/components/action-bar/action-bar.vue.d.ts +11 -0
  4. package/dist/@types/packages/vue2/src/components/button/components/button-actions/button-actions.types.d.ts +1 -1
  5. package/dist/@types/packages/vue2/src/components/button/components/button-actions/button-actions.vue.d.ts +7 -2
  6. package/dist/@types/packages/vue2/src/components/button/components/loading-button/loading-button.vue.d.ts +28 -18
  7. package/dist/@types/packages/vue2/src/components/checkbox/checkbox.vue.d.ts +25 -0
  8. package/dist/@types/packages/vue2/src/components/data-grid/data-grid.vue.d.ts +13 -1
  9. package/dist/@types/packages/vue2/src/components/date-picker/date-picker.vue.d.ts +9 -0
  10. package/dist/@types/packages/vue2/src/components/date-range-picker/components/date-range-picker-calendar/date-range-picker-calendar.types.d.ts +6 -2
  11. package/dist/@types/packages/vue2/src/components/date-range-picker/components/date-range-picker-calendar/date-range-picker-calendar.vue.d.ts +153 -12
  12. package/dist/@types/packages/vue2/src/components/date-range-picker/date-range-picker.types.d.ts +1 -1
  13. package/dist/@types/packages/vue2/src/components/date-range-picker/date-range-picker.vue.d.ts +18 -0
  14. package/dist/@types/packages/vue2/src/components/dropdown/components/dropdown-options-container/dropdown-options-container.vue.d.ts +320 -21
  15. package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue.d.ts +9 -0
  16. package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue.d.ts +9 -0
  17. package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue.d.ts +9 -0
  18. package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue.d.ts +9 -0
  19. package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue.d.ts +9 -0
  20. package/dist/@types/packages/vue2/src/components/dropdown/dropdown.vue.d.ts +12 -3
  21. package/dist/@types/packages/vue2/src/components/filter-bar/components/all-filters-modal/all-filters-modal.vue.d.ts +30 -24
  22. package/dist/@types/packages/vue2/src/components/filter-bar/components/date-range-filter/date-range-filter.vue.d.ts +1 -0
  23. package/dist/@types/packages/vue2/src/components/input-field/input-field.vue.d.ts +9 -0
  24. package/dist/@types/packages/vue2/src/components/internal/calendar/calendar.types.d.ts +12 -0
  25. package/dist/@types/packages/vue2/src/components/internal/calendar/calendar.vue.d.ts +11 -1
  26. package/dist/@types/packages/vue2/src/components/internal/calendar/components/calendar-month/composables/granular-min-max-date.d.ts +2 -0
  27. package/dist/@types/packages/vue2/src/components/internal/calendar/components/calendar-month/composables/granular-min-max-date.types.d.ts +13 -0
  28. package/dist/@types/packages/vue2/src/components/internal/calendar/composables/use-granularity-adjustments.d.ts +2 -0
  29. package/dist/@types/packages/vue2/src/components/internal/calendar/composables/use-granularity-adjustments.types.d.ts +14 -0
  30. package/dist/@types/packages/vue2/src/components/internal/calendar/composables/use-granularity-memory.d.ts +2 -0
  31. package/dist/@types/packages/vue2/src/components/internal/calendar/composables/use-granularity-memory.types.d.ts +22 -0
  32. package/dist/@types/packages/vue2/src/components/internal/controls-group/controls-group.vue.d.ts +1 -1
  33. package/dist/@types/packages/vue2/src/components/internal/field-label/field-label.vue.d.ts +48 -0
  34. package/dist/@types/packages/vue2/src/components/internal/field-label/index.d.ts +1 -0
  35. package/dist/@types/packages/vue2/src/components/internal/grid-layout/grid-layout.vue.d.ts +11 -0
  36. package/dist/@types/packages/vue2/src/components/internal/index.d.ts +1 -0
  37. package/dist/@types/packages/vue2/src/components/modal/components/base-modal/base-modal.vue.d.ts +2 -1
  38. package/dist/@types/packages/vue2/src/components/popover/popover.keys.d.ts +1 -0
  39. package/dist/@types/packages/vue2/src/components/popover/popover.vue.d.ts +16 -22
  40. package/dist/@types/packages/vue2/src/components/structured-list/components/structered-list-item/structured-list-item.vue.d.ts +1 -0
  41. package/dist/@types/packages/vue2/src/components/structured-list/structured-list.keys.d.ts +1 -0
  42. package/dist/@types/packages/vue2/src/components/structured-list/structured-list.vue.d.ts +20 -1
  43. package/dist/@types/packages/vue2/src/components/summary-grid/summary-grid.types.d.ts +4 -4
  44. package/dist/@types/packages/vue2/src/components/textarea/textarea.vue.d.ts +9 -0
  45. package/dist/@types/packages/vue2/src/components/timeline/components/timeline-item/timeline-item.vue.d.ts +19 -2
  46. package/dist/@types/packages/vue2/src/components/timeline/timeline.types.d.ts +4 -2
  47. package/dist/@types/packages/vue2/src/components/timeline/timeline.vue.d.ts +18 -2
  48. package/dist/@types/packages/vue2/src/index.d.ts +1 -0
  49. package/dist/accordion.js +1 -1
  50. package/dist/action-bar.js +112 -93
  51. package/dist/action-bar.js.map +1 -1
  52. package/dist/alert.js +1 -1
  53. package/dist/assets/base-modal.css +1 -1
  54. package/dist/assets/calendar.css +1 -1
  55. package/dist/assets/checkbox.css +1 -1
  56. package/dist/assets/controls-group.css +1 -1
  57. package/dist/assets/dropdown.css +1 -1
  58. package/dist/assets/field-label.css +1 -0
  59. package/dist/assets/grid-layout.css +1 -1
  60. package/dist/assets/index.css +1 -1
  61. package/dist/assets/index11.css +1 -1
  62. package/dist/assets/index12.css +1 -1
  63. package/dist/assets/index13.css +1 -1
  64. package/dist/assets/index14.css +1 -1
  65. package/dist/assets/index15.css +1 -1
  66. package/dist/assets/index16.css +1 -1
  67. package/dist/assets/index17.css +1 -1
  68. package/dist/assets/index18.css +1 -1
  69. package/dist/assets/index19.css +1 -1
  70. package/dist/assets/index2.css +1 -1
  71. package/dist/assets/index20.css +1 -1
  72. package/dist/assets/index21.css +1 -1
  73. package/dist/assets/index22.css +1 -1
  74. package/dist/assets/index23.css +1 -1
  75. package/dist/assets/index24.css +1 -1
  76. package/dist/assets/index25.css +1 -1
  77. package/dist/assets/index26.css +1 -1
  78. package/dist/assets/index27.css +1 -1
  79. package/dist/assets/index28.css +1 -1
  80. package/dist/assets/index29.css +1 -1
  81. package/dist/assets/index3.css +1 -1
  82. package/dist/assets/index30.css +1 -1
  83. package/dist/assets/index32.css +1 -1
  84. package/dist/assets/index33.css +1 -1
  85. package/dist/assets/index34.css +1 -1
  86. package/dist/assets/index35.css +1 -1
  87. package/dist/assets/index36.css +1 -1
  88. package/dist/assets/index37.css +1 -1
  89. package/dist/assets/index38.css +1 -1
  90. package/dist/assets/index39.css +1 -1
  91. package/dist/assets/index4.css +1 -1
  92. package/dist/assets/index40.css +1 -1
  93. package/dist/assets/index41.css +1 -1
  94. package/dist/assets/index42.css +1 -1
  95. package/dist/assets/index43.css +1 -1
  96. package/dist/assets/index44.css +1 -1
  97. package/dist/assets/index45.css +1 -1
  98. package/dist/assets/index5.css +1 -1
  99. package/dist/assets/index6.css +1 -1
  100. package/dist/assets/index7.css +1 -1
  101. package/dist/assets/index8.css +1 -1
  102. package/dist/assets/index9.css +1 -1
  103. package/dist/assets/loading-button.css +1 -1
  104. package/dist/avatar-image.js +1 -1
  105. package/dist/badge.js +1 -1
  106. package/dist/button.js +38 -35
  107. package/dist/button.js.map +1 -1
  108. package/dist/card.js +1 -1
  109. package/dist/checkbox.js +5 -5
  110. package/dist/chunks/{base-modal.88e7b9d4.js → base-modal.31634fe8.js} +60 -49
  111. package/dist/chunks/base-modal.31634fe8.js.map +1 -0
  112. package/dist/chunks/{button-actions-with-menu.a5413243.js → button-actions-with-menu.5faea13e.js} +5 -5
  113. package/dist/chunks/{button-actions-with-menu.a5413243.js.map → button-actions-with-menu.5faea13e.js.map} +1 -1
  114. package/dist/chunks/button.e09d5980.js.map +1 -1
  115. package/dist/chunks/calendar.47e9e755.js +959 -0
  116. package/dist/chunks/calendar.47e9e755.js.map +1 -0
  117. package/dist/chunks/{checkbox.5343e28e.js → checkbox.2277450e.js} +67 -56
  118. package/dist/chunks/checkbox.2277450e.js.map +1 -0
  119. package/dist/chunks/controls-group.6c5bfccd.js +79 -0
  120. package/dist/chunks/controls-group.6c5bfccd.js.map +1 -0
  121. package/dist/chunks/{copy.346eadb1.js → copy.a85c2e9f.js} +3 -3
  122. package/dist/chunks/{copy.346eadb1.js.map → copy.a85c2e9f.js.map} +1 -1
  123. package/dist/chunks/{dropdown.f1253a54.js → dropdown.ce937989.js} +200 -196
  124. package/dist/chunks/dropdown.ce937989.js.map +1 -0
  125. package/dist/chunks/field-label.330edb60.js +107 -0
  126. package/dist/chunks/field-label.330edb60.js.map +1 -0
  127. package/dist/chunks/{grid-layout.b7e0d964.js → grid-layout.a806acb2.js} +36 -27
  128. package/dist/chunks/grid-layout.a806acb2.js.map +1 -0
  129. package/dist/chunks/index.210d2169.js +290 -0
  130. package/dist/chunks/index.210d2169.js.map +1 -0
  131. package/dist/chunks/{index.8ac70774.js → index.66503760.js} +3 -3
  132. package/dist/chunks/{index.8ac70774.js.map → index.66503760.js.map} +1 -1
  133. package/dist/chunks/{index.2625175a.js → index.86fc63ca.js} +30 -28
  134. package/dist/chunks/{index.2625175a.js.map → index.86fc63ca.js.map} +1 -1
  135. package/dist/chunks/{index.a201f750.js → index.89942d3a.js} +4 -5
  136. package/dist/chunks/{index.a201f750.js.map → index.89942d3a.js.map} +1 -1
  137. package/dist/chunks/index.a5de5242.js +130 -0
  138. package/dist/chunks/index.a5de5242.js.map +1 -0
  139. package/dist/chunks/index.a99ffd48.js +634 -0
  140. package/dist/chunks/index.a99ffd48.js.map +1 -0
  141. package/dist/chunks/index.d80206ed.js +10 -0
  142. package/dist/chunks/index.d80206ed.js.map +1 -0
  143. package/dist/chunks/{index.37283390.js → index.d8bd7596.js} +96 -99
  144. package/dist/chunks/{index.37283390.js.map → index.d8bd7596.js.map} +1 -1
  145. package/dist/chunks/{listbox-option-tag.6a09e8e2.js → listbox-option-tag.97af47fc.js} +6 -7
  146. package/dist/chunks/{listbox-option-tag.6a09e8e2.js.map → listbox-option-tag.97af47fc.js.map} +1 -1
  147. package/dist/chunks/{listbox.73c38f38.js → listbox.d039b178.js} +5 -6
  148. package/dist/chunks/{listbox.73c38f38.js.map → listbox.d039b178.js.map} +1 -1
  149. package/dist/chunks/loading-button.9a9cbbad.js +89 -0
  150. package/dist/chunks/loading-button.9a9cbbad.js.map +1 -0
  151. package/dist/chunks/{tooltip.104e5fac.js → tooltip.ecd0f707.js} +2 -2
  152. package/dist/chunks/{tooltip.104e5fac.js.map → tooltip.ecd0f707.js.map} +1 -1
  153. package/dist/code-snippet.js +4 -4
  154. package/dist/code-snippet.js.map +1 -1
  155. package/dist/country.js +1 -1
  156. package/dist/data-grid.js +563 -541
  157. package/dist/data-grid.js.map +1 -1
  158. package/dist/date-picker.js +83 -80
  159. package/dist/date-picker.js.map +1 -1
  160. package/dist/date-range-picker.js +2 -2
  161. package/dist/divider.js +1 -1
  162. package/dist/dropdown.js +3 -3
  163. package/dist/empty-state.js +1 -1
  164. package/dist/filter-bar.js +13 -12
  165. package/dist/filter-bar.js.map +1 -1
  166. package/dist/focus-trap.js +1 -1
  167. package/dist/form-layout.js +1 -1
  168. package/dist/header.js +63 -67
  169. package/dist/header.js.map +1 -1
  170. package/dist/index.js +211 -209
  171. package/dist/index.js.map +1 -1
  172. package/dist/info-icon.js +3 -3
  173. package/dist/input-field.js +57 -55
  174. package/dist/input-field.js.map +1 -1
  175. package/dist/internal.js +13 -12
  176. package/dist/link.js +1 -1
  177. package/dist/loading-indicator.js +1 -1
  178. package/dist/menu.js +1 -1
  179. package/dist/modal.js +2 -2
  180. package/dist/modal.js.map +1 -1
  181. package/dist/pagination.js +2 -2
  182. package/dist/payment-method.js +1 -1
  183. package/dist/popover.js +3 -305
  184. package/dist/popover.js.map +1 -1
  185. package/dist/popper-container.js +1 -1
  186. package/dist/radio-group.js +3 -3
  187. package/dist/search-bar.js +2 -2
  188. package/dist/segmented-control.js +2 -2
  189. package/dist/sidepanel.js +2 -2
  190. package/dist/status.js +1 -1
  191. package/dist/stepper.js +1 -1
  192. package/dist/structured-list.js +1 -1
  193. package/dist/summary-grid.js +3 -3
  194. package/dist/summary-grid.js.map +1 -1
  195. package/dist/tabs.js +1 -1
  196. package/dist/tag.js +2 -2
  197. package/dist/textarea.js +59 -56
  198. package/dist/textarea.js.map +1 -1
  199. package/dist/timeline.js +226 -173
  200. package/dist/timeline.js.map +1 -1
  201. package/dist/toast.js +1 -1
  202. package/dist/toggle.js +1 -1
  203. package/dist/tutorial.js +7 -7
  204. package/dist/web-types.json +519 -393
  205. package/package.json +3 -3
  206. package/dist/@types/packages/vue2/src/components/modal/components/base-modal/__mocks__/base-modal.vue.d.ts +0 -118
  207. package/dist/assets/error-message.css +0 -1
  208. package/dist/chunks/base-modal.88e7b9d4.js.map +0 -1
  209. package/dist/chunks/calendar.24d0ac04.js +0 -821
  210. package/dist/chunks/calendar.24d0ac04.js.map +0 -1
  211. package/dist/chunks/checkbox.5343e28e.js.map +0 -1
  212. package/dist/chunks/controls-group.2a21bd83.js +0 -87
  213. package/dist/chunks/controls-group.2a21bd83.js.map +0 -1
  214. package/dist/chunks/dropdown.f1253a54.js.map +0 -1
  215. package/dist/chunks/error-message.8302a46c.js +0 -47
  216. package/dist/chunks/error-message.8302a46c.js.map +0 -1
  217. package/dist/chunks/grid-layout.b7e0d964.js.map +0 -1
  218. package/dist/chunks/index.d6b5f5e1.js +0 -112
  219. package/dist/chunks/index.d6b5f5e1.js.map +0 -1
  220. package/dist/chunks/index.e566354f.js +0 -532
  221. package/dist/chunks/index.e566354f.js.map +0 -1
  222. package/dist/chunks/loading-button.c65682d6.js +0 -86
  223. package/dist/chunks/loading-button.c65682d6.js.map +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adyen/bento-vue2",
3
- "version": "1.7.0",
3
+ "version": "1.8.0",
4
4
  "description": "Adyen Bento Vue2 components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
@@ -57,8 +57,8 @@
57
57
  "url": "git@github.com:Adyen/bento.git"
58
58
  },
59
59
  "dependencies": {
60
- "@adyen/bento-design-tokens": "1.7.0",
61
- "@adyen/ui-assets-icons-16": "file:/x",
60
+ "@adyen/bento-design-tokens": "1.8.0",
61
+ "@adyen/ui-assets-icons-16": "3.1.0",
62
62
  "@adyen/ui-assets-payment-method-icons": "5.2.0",
63
63
  "@codemirror/commands": "6.3.3",
64
64
  "@codemirror/language-data": "6.4.0",
@@ -1,118 +0,0 @@
1
- import { PropType } from 'vue';
2
- import { BentoModalColumnLayoutVariant, BentoModalEvent, BentoModalRole, BentoModalSize } from "../../../modal.types";
3
- declare const _default: import("vue").DefineComponent<{
4
- modalRole: {
5
- type: StringConstructor;
6
- default: BentoModalRole;
7
- };
8
- isDismissible: {
9
- type: BooleanConstructor;
10
- required: true;
11
- };
12
- hideCloseButton: {
13
- type: BooleanConstructor;
14
- required: true;
15
- };
16
- customPadding: {
17
- type: StringConstructor;
18
- default: any;
19
- };
20
- withColumnLayout: {
21
- type: BooleanConstructor;
22
- default: boolean;
23
- };
24
- columnsSize: {
25
- type: PropType<BentoModalColumnLayoutVariant>;
26
- default: BentoModalColumnLayoutVariant;
27
- };
28
- isOpen: {
29
- type: BooleanConstructor;
30
- required: true;
31
- };
32
- size: {
33
- type: PropType<BentoModalSize>;
34
- default: BentoModalSize;
35
- };
36
- initiallyOpen: {
37
- type: BooleanConstructor;
38
- default: boolean;
39
- };
40
- }, {
41
- modal: any;
42
- computedAriaLabel: import("vue").ComputedRef<string>;
43
- openModal: () => void;
44
- closeModalOnClickOutside: ({ target }: Event) => void;
45
- onCloseButtonClick: () => void;
46
- hasSlot: (name: string) => boolean;
47
- emitCloseEvent: () => void;
48
- modalConditionalClasses: import("vue").ComputedRef<{
49
- [x: string]: boolean | BentoModalSize;
50
- "b-modal-base__container--visible": boolean;
51
- }>;
52
- modalContentConditionalClasses: import("vue").ComputedRef<{
53
- 'b-modal-base__content--column-layout': boolean;
54
- }>;
55
- wrapperStyles: import("vue").ComputedRef<{
56
- padding: string;
57
- } | {
58
- padding?: undefined;
59
- }>;
60
- dividerStyles: import("vue").ComputedRef<{
61
- marginLeft: string;
62
- width: string;
63
- } | {
64
- marginLeft?: undefined;
65
- width?: undefined;
66
- }>;
67
- hasColumnLayout: import("vue").ComputedRef<boolean>;
68
- computedColumnWidth: import("vue").ComputedRef<{
69
- small: number;
70
- medium: number;
71
- large: number;
72
- }[]>;
73
- }, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, BentoModalEvent[], string, Readonly<import("vue").ExtractPropTypes<{
74
- modalRole: {
75
- type: StringConstructor;
76
- default: BentoModalRole;
77
- };
78
- isDismissible: {
79
- type: BooleanConstructor;
80
- required: true;
81
- };
82
- hideCloseButton: {
83
- type: BooleanConstructor;
84
- required: true;
85
- };
86
- customPadding: {
87
- type: StringConstructor;
88
- default: any;
89
- };
90
- withColumnLayout: {
91
- type: BooleanConstructor;
92
- default: boolean;
93
- };
94
- columnsSize: {
95
- type: PropType<BentoModalColumnLayoutVariant>;
96
- default: BentoModalColumnLayoutVariant;
97
- };
98
- isOpen: {
99
- type: BooleanConstructor;
100
- required: true;
101
- };
102
- size: {
103
- type: PropType<BentoModalSize>;
104
- default: BentoModalSize;
105
- };
106
- initiallyOpen: {
107
- type: BooleanConstructor;
108
- default: boolean;
109
- };
110
- }>>, {
111
- size: BentoModalSize;
112
- columnsSize: BentoModalColumnLayoutVariant;
113
- customPadding: string;
114
- initiallyOpen: boolean;
115
- modalRole: string;
116
- withColumnLayout: boolean;
117
- }>;
118
- export default _default;
@@ -1 +0,0 @@
1
- .b-error-message[data-v-2490b85a]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:flex-start;color:var(--b-error-message-color);display:flex}.b-error-message[data-v-2490b85a],.b-error-message[data-v-2490b85a]:before,.b-error-message[data-v-2490b85a]:after{box-sizing:border-box}.b-error-message *[data-v-2490b85a],.b-error-message *[data-v-2490b85a]:before,.b-error-message *[data-v-2490b85a]:after{box-sizing:border-box}.b-error-message[data-v-2490b85a] ::-webkit-scrollbar{height:14px;width:14px}.b-error-message[data-v-2490b85a] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-error-message__icon[data-v-2490b85a]{align-items:center;display:flex;height:var(--b-error-message-icon-height);margin-right:var(--b-error-message-icon-margin-right)}
@@ -1 +0,0 @@
1
- {"version":3,"file":"base-modal.88e7b9d4.js","sources":["../../src/components/modal/modal.types.ts","../../src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariant {\n DEFAULT = 'BentoModalDefault',\n DIALOG = 'BentoModalDialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalSize {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalColumnLayoutVariant {\n SMALLER = 'smaller',\n EQUAL = 'equal',\n BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n DIALOG = 'dialog',\n ALERT_DIALOG = 'alertdialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalDialogType {\n CONFIRMATION = 'confirmation',\n DESTRUCTIVE = 'destructive',\n INFO = 'info',\n ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n CLOSE_MODAL = 'close-modal',\n}\n","<template>\n <div class=\"b-modal-base\">\n <dialog\n ref=\"modal\"\n :role=\"modalRole\"\n :aria-label=\"computedAriaLabel\"\n class=\"b-modal-base__container\"\n :class=\"modalConditionalClasses\"\n :open=\"initiallyOpen\"\n @animationend=\"closeModalAfterAnimation\"\n @click=\"isDismissible && closeModalOnClickOutside($event)\"\n @keydown.esc=\"internalModalActionClose\"\n >\n <bento-focus-trap>\n <div class=\"b-modal-base__wrapper\">\n <div\n v-if=\"hasSlot('default') || !hideCloseButton\"\n class=\"b-modal-base__header-container\"\n :style=\"customPaddingStyles.header\"\n >\n <div class=\"b-modal-base__header\">\n <bento-typography\n class=\"b-modal-base__title\"\n aria-label=\"base modal title\"\n el=\"span\"\n variant=\"title\"\n stronger\n >\n <slot v-if=\"hasSlot('default')\" />\n </bento-typography>\n <bento-button\n v-if=\"!hideCloseButton\"\n class=\"b-modal-base__close-button\"\n variant=\"tertiary\"\n type=\"button\"\n @click=\"internalModalActionClose\"\n >\n <cross-icon svg-title=\"close\" />\n </bento-button>\n </div>\n\n <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" />\n </div>\n\n <div\n class=\"b-modal-base__content\"\n :class=\"modalContentConditionalClasses\"\n :style=\"customPaddingStyles.content\"\n >\n <bento-typography\n v-if=\"hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))\"\n aria-label=\"base modal content\"\n el=\"div\"\n variant=\"body\"\n stronger\n >\n <grid-layout\n v-if=\"hasColumnLayout\"\n :column-width=\"computedColumnWidth\"\n :container-type=\"GridLayoutContainerType.NORMAL\"\n class=\"b-modal-base__grid\"\n >\n <template #col-1><slot name=\"content-col-1\"></slot></template>\n <template #col-2><slot name=\"content-col-2\"></slot></template>\n </grid-layout>\n <slot v-else name=\"content\" />\n </bento-typography>\n </div>\n\n <div\n v-if=\"hasSlot('actions')\"\n class=\"b-modal-base__actions-container\"\n :style=\"customPaddingStyles.actions\"\n >\n <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" />\n\n <div aria-label=\"modal actions\" class=\"b-modal-base__actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n </div>\n </bento-focus-trap>\n </dialog>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, onMounted, PropType, ref, useAttrs, watch } from 'vue';\n import {\n BentoModalColumnLayoutVariant,\n BentoModalEvent,\n BentoModalRole,\n BentoModalSize,\n } from '@/components/modal/modal.types';\n\n import { BentoTypography } from '@/components/typography';\n import { BentoButton, BentoButtonActionsList } from '@/components/button';\n import { BentoDivider } from '@/components/divider';\n import { BentoFocusTrap } from '@/components/focus-trap';\n import { GridLayout, GridLayoutContainerType } from '@/internal';\n import { useHasSlot } from '@/composables';\n import { useI18n } from '@/utils/ts/i18n';\n import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n export default defineComponent({\n i18n: { messages },\n name: 'base-modal',\n components: { CrossIcon, BentoTypography, BentoButton, BentoDivider, BentoFocusTrap, GridLayout },\n props: {\n /**\n * List of actions that will be used to render the buttons.\n * First element in the list will be rendered as \"primary\".\n * All elements after the first will be rendered as \"secondary\".\n * But you may change the color of 1-st action to red with 'critial' key\n * Not more than 3 action buttons can be provided\n * Or 2 action buttons and 1 Label for them\n *\n * Each object in the list should have a `title`, an `event` and\n * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n *\n * `title`: Button's text.\n *\n * `event`: Event triggered when clicking the Button.\n *\n * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n *\n * ```\n * [{\n * title: 'Primary',2\n * event: () => { ... },\n * icon: FourPeopleIcon\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * }]\n * ```\n */\n actions: {\n type: Array as PropType<BentoButtonActionsList>,\n default: null,\n },\n\n /**\n * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n */\n columnsSize: {\n type: String as PropType<BentoModalColumnLayoutVariant>,\n default: BentoModalColumnLayoutVariant.SMALLER,\n },\n\n /**\n * If provided, manages the padding of the whole modal container\n */\n customPadding: { type: String, default: null },\n\n /**\n * Hides a cross icon on the right side of the title\n */\n hideCloseButton: { type: Boolean, required: true },\n\n /**\n * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n */\n initiallyOpen: { type: Boolean, default: false },\n\n /**\n * If set to true, it allows the modal to be closed by clicking outside of it\n */\n isDismissible: { type: Boolean, required: true },\n\n /**\n * Controls the modal's state from the outside. Set it to true to open the modal\n */\n isOpen: { type: Boolean, required: true },\n\n /**\n * Defines whether the modal will be an alert modal\n */\n modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n /**\n * Allows the inner elments to overflow the dialog\n */\n overflowVisible: { type: Boolean, default: false },\n\n /**\n * Sets the width of the modal\n */\n size: {\n type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n default: BentoModalSize.SMALL,\n },\n\n /**\n * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n */\n withColumnLayout: { type: Boolean, default: false },\n },\n emits: [BentoModalEvent.CLOSE_MODAL],\n setup(props, { slots, emit }) {\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const attrs = useAttrs();\n const hasSlot = useHasSlot(slots);\n const modal = ref(null);\n const isClosing = ref(false);\n\n const customPaddingStyles = computed(() => {\n if (!props.customPadding) {\n return {};\n }\n\n const xPadding = {\n paddingLeft: props.customPadding,\n paddingRight: props.customPadding,\n };\n\n const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n if (!hasSlot('default')) {\n content.paddingTop = props.customPadding;\n }\n\n if (!hasSlot('actions')) {\n content.paddingBottom = props.customPadding;\n }\n\n return {\n header: { ...xPadding, paddingTop: props.customPadding },\n content,\n actions: { ...xPadding, paddingBottom: props.customPadding },\n };\n });\n\n const computedAriaLabel = computed(\n () => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string)\n );\n const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n const openModal = (): void => {\n modal.value.showModal();\n };\n\n const emitCloseEvent = (): void => {\n emit(BentoModalEvent.CLOSE_MODAL);\n };\n\n // Handle closing and closing animation for dialog element\n const closeModalAfterAnimation = () => {\n if (isClosing.value) {\n modal.value.close();\n emitCloseEvent();\n isClosing.value = false;\n }\n };\n\n const startCloseModalAnimation = () => {\n if (!modal.value.open) {\n return;\n }\n isClosing.value = true;\n };\n\n // If the user has pressed escape, clicked outside or clicked the close icon\n const internalModalActionClose = (event?: Event) => {\n if (event) {\n event.preventDefault();\n }\n if (!props.isDismissible) {\n return;\n }\n startCloseModalAnimation();\n };\n\n /**\n * Since the dialog HTML element doesn't automatically close when clicking outside, a check on when the user is clicking is needed.\n * If the click doesn't happen in the dialog box itself, the modal closes\n */\n const closeModalOnClickOutside = ({ target }: Event): void => {\n if (target && (target as HTMLElement).tagName === BentoModalRole.DIALOG.toUpperCase()) {\n internalModalActionClose();\n }\n };\n\n const modalConditionalClasses = computed(() => ({\n [`b-modal-base__container--${props.size}`]: props.size,\n 'b-modal-base__container--hide': isClosing.value,\n 'b-modal-base__container--overflow-visible': props.overflowVisible,\n 'b-modal-base__container--column-layout': hasColumnLayout.value,\n }));\n\n const modalContentConditionalClasses = computed(() => ({\n 'b-modal-base__content--column-layout': hasColumnLayout.value,\n 'b-modal-base__content--with-header': hasSlot('default'),\n 'b-modal-base__content--with-actions': hasSlot('actions'),\n }));\n\n const computedColumnWidth = computed(() => {\n if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n return [{ small: 4, medium: 4, large: 4 }];\n }\n if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n return [{ small: 8, medium: 8, large: 8 }];\n }\n return [{ small: 6, medium: 6, large: 6 }];\n });\n\n watch(\n () => [props.isOpen, modal.value],\n ([newIsOpen, newModalValue], [, oldModalValue]): void => {\n if (!newModalValue) {\n return;\n }\n\n const isFirstMutation = !oldModalValue;\n if (newIsOpen) {\n openModal();\n } else if (!isFirstMutation) {\n startCloseModalAnimation();\n }\n }\n );\n\n // If the first button is a loading button then close the modal have 0.5 seconds\n // if the state is changed to 'success'.\n watch(\n () => props.actions,\n () => {\n if (props.actions?.[0]?.state === 'success') {\n setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n }\n },\n { deep: true }\n );\n\n onMounted(() => {\n if (props.isOpen && modal.value) {\n openModal();\n }\n });\n\n return {\n // Refs\n modal,\n computedAriaLabel,\n\n // Handling the state\n openModal,\n closeModalOnClickOutside,\n closeModalAfterAnimation,\n startCloseModalAnimation,\n\n // Methods\n internalModalActionClose,\n hasSlot,\n emitCloseEvent,\n t,\n\n // Styles\n modalConditionalClasses,\n modalContentConditionalClasses,\n customPaddingStyles,\n hasColumnLayout,\n computedColumnWidth,\n\n // Enums\n GridLayoutContainerType,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME","_sfc_main","defineComponent","messages","CrossIcon","BentoTypography","BentoButton","BentoDivider","BentoFocusTrap","GridLayout","props","slots","emit","t","useI18n","attrs","useAttrs","hasSlot","useHasSlot","modal","ref","isClosing","customPaddingStyles","computed","xPadding","content","computedAriaLabel","hasColumnLayout","openModal","emitCloseEvent","closeModalAfterAnimation","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","target","modalConditionalClasses","modalContentConditionalClasses","computedColumnWidth","watch","newIsOpen","newModalValue","oldModalValue","_b","_a","onMounted","GridLayoutContainerType"],"mappings":"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"}