@adyen/bento-vue2 1.4.1 → 1.5.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 (201) hide show
  1. package/dist/@types/components.d.ts +4 -0
  2. package/dist/@types/packages/vue2/src/components/code-snippet/code-snippet.vue.d.ts +1 -1
  3. package/dist/@types/packages/vue2/src/components/data-grid/components/data-grid-lazy-load/data-grid-lazy-load.vue.d.ts +17 -0
  4. package/dist/@types/packages/vue2/src/components/data-grid/components/index.d.ts +1 -0
  5. package/dist/@types/packages/vue2/src/components/data-grid/composables/index.d.ts +1 -0
  6. package/dist/@types/packages/vue2/src/components/data-grid/composables/useCalculateColumnHeadersTopPosition/useCalculateColumnHeadersTopPosition.d.ts +2 -0
  7. package/dist/@types/packages/vue2/src/components/data-grid/composables/useLazyLoading/useLazyLoading.d.ts +8 -0
  8. package/dist/@types/packages/vue2/src/components/data-grid/data-grid.types.d.ts +3 -1
  9. package/dist/@types/packages/vue2/src/components/data-grid/data-grid.vue.d.ts +27 -2
  10. package/dist/@types/packages/vue2/src/components/dropdown/components/dropdown-options-container/dropdown-options-container.vue.d.ts +522 -114
  11. package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue.d.ts +3 -3
  12. package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue.d.ts +3 -3
  13. package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue.d.ts +3 -3
  14. package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue.d.ts +3 -3
  15. package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue.d.ts +3 -3
  16. package/dist/@types/packages/vue2/src/components/dropdown/dropdown.vue.d.ts +3 -3
  17. package/dist/@types/packages/vue2/src/components/filter-bar/components/all-filters-modal/all-filters-modal.vue.d.ts +13 -13
  18. package/dist/@types/packages/vue2/src/components/filter-bar/components/all-filters-modal/components/all-filters-modal-button/all-filters-modal-button.vue.d.ts +4 -4
  19. package/dist/@types/packages/vue2/src/components/filter-bar/components/base-filter/base-filter.vue.d.ts +12 -3
  20. package/dist/@types/packages/vue2/src/components/filter-bar/components/base-filter-button/base-filter-button.vue.d.ts +3 -3
  21. package/dist/@types/packages/vue2/src/components/filter-bar/components/date-range-filter/date-range-filter.vue.d.ts +5 -1
  22. package/dist/@types/packages/vue2/src/components/filter-bar/components/filter-bar-button/filter-bar-button.vue.d.ts +12 -3
  23. package/dist/@types/packages/vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue.d.ts +1 -1
  24. package/dist/@types/packages/vue2/src/components/filter-bar/components/select-filter/variants/select-tag-filter/select-tag-filter.vue.d.ts +1 -1
  25. package/dist/@types/packages/vue2/src/components/form-layout/components/form-layout-group/form-layout-group.types.d.ts +2 -1
  26. package/dist/@types/packages/vue2/src/components/form-layout/components/form-layout-group/form-layout-group.vue.d.ts +2 -0
  27. package/dist/@types/packages/vue2/src/components/image/index.d.ts +1 -0
  28. package/dist/@types/packages/vue2/src/components/internal/base-button/base-button.vue.d.ts +2 -0
  29. package/dist/@types/packages/vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.vue.d.ts +24 -0
  30. package/dist/@types/packages/vue2/src/components/internal/listbox/listbox.vue.d.ts +3 -3
  31. package/dist/@types/packages/vue2/src/components/modal/components/base-modal/base-modal.vue.d.ts +3 -1
  32. package/dist/@types/packages/vue2/src/components/popover/popover.vue.d.ts +13 -3
  33. package/dist/@types/packages/vue2/src/components/popper-container/popper-container.types.d.ts +1 -9
  34. package/dist/@types/packages/vue2/src/components/popper-container/popper-container.utils.d.ts +5 -21
  35. package/dist/@types/packages/vue2/src/components/popper-container/popper-container.vue.d.ts +119 -71
  36. package/dist/@types/packages/vue2/src/components/segmented-control/segmented-control.vue.d.ts +3 -2
  37. package/dist/@types/packages/vue2/src/components/stepper/components/step/index.d.ts +1 -0
  38. package/dist/@types/packages/vue2/src/components/stepper/components/step/step.vue.d.ts +33 -0
  39. package/dist/@types/packages/vue2/src/components/stepper/composables/useKeyboardNavigation/useKeyboardNavigation.d.ts +15 -0
  40. package/dist/@types/packages/vue2/src/components/stepper/index.d.ts +3 -0
  41. package/dist/@types/packages/vue2/src/components/stepper/stepper.keys.d.ts +3 -0
  42. package/dist/@types/packages/vue2/src/components/stepper/stepper.types.d.ts +24 -0
  43. package/dist/@types/packages/vue2/src/components/stepper/stepper.vue.d.ts +42 -0
  44. package/dist/@types/packages/vue2/src/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.vue.d.ts +1 -1
  45. package/dist/@types/packages/vue2/src/components/tooltip/tooltip.vue.d.ts +389 -50
  46. package/dist/@types/packages/vue2/src/index.d.ts +1 -0
  47. package/dist/@types/packages/vue2/src/types/index.d.ts +1 -0
  48. package/dist/@types/packages/vue2/src/types/lazy-load.d.ts +1 -0
  49. package/dist/accordion.js +1 -1
  50. package/dist/alert.js +1 -1
  51. package/dist/assets/base-button.css +1 -1
  52. package/dist/assets/base-modal.css +1 -1
  53. package/dist/assets/button.css +1 -1
  54. package/dist/assets/calendar.css +1 -1
  55. package/dist/assets/checkbox.css +1 -1
  56. package/dist/assets/dropdown-default-textbox.css +1 -1
  57. package/dist/assets/dropdown.css +1 -1
  58. package/dist/assets/index.css +1 -1
  59. package/dist/assets/index10.css +1 -1
  60. package/dist/assets/index11.css +1 -1
  61. package/dist/assets/index12.css +1 -1
  62. package/dist/assets/index13.css +1 -1
  63. package/dist/assets/index14.css +1 -1
  64. package/dist/assets/index15.css +1 -1
  65. package/dist/assets/index16.css +1 -1
  66. package/dist/assets/index17.css +1 -1
  67. package/dist/assets/index18.css +1 -1
  68. package/dist/assets/index19.css +1 -1
  69. package/dist/assets/index2.css +1 -1
  70. package/dist/assets/index20.css +1 -1
  71. package/dist/assets/index21.css +1 -1
  72. package/dist/assets/index22.css +1 -1
  73. package/dist/assets/index23.css +1 -1
  74. package/dist/assets/index24.css +1 -1
  75. package/dist/assets/index25.css +1 -1
  76. package/dist/assets/index26.css +1 -1
  77. package/dist/assets/index27.css +1 -1
  78. package/dist/assets/index28.css +1 -1
  79. package/dist/assets/index29.css +1 -1
  80. package/dist/assets/index3.css +1 -1
  81. package/dist/assets/index30.css +1 -1
  82. package/dist/assets/index31.css +1 -1
  83. package/dist/assets/index32.css +1 -1
  84. package/dist/assets/index34.css +1 -1
  85. package/dist/assets/index35.css +1 -1
  86. package/dist/assets/index36.css +1 -1
  87. package/dist/assets/index37.css +1 -1
  88. package/dist/assets/index38.css +1 -1
  89. package/dist/assets/index39.css +1 -1
  90. package/dist/assets/index4.css +1 -1
  91. package/dist/assets/index40.css +1 -1
  92. package/dist/assets/index41.css +1 -1
  93. package/dist/assets/index42.css +1 -1
  94. package/dist/assets/index43.css +1 -0
  95. package/dist/assets/index5.css +1 -1
  96. package/dist/assets/index6.css +1 -1
  97. package/dist/assets/index7.css +1 -1
  98. package/dist/assets/index8.css +1 -1
  99. package/dist/assets/index9.css +1 -1
  100. package/dist/assets/tooltip.css +1 -1
  101. package/dist/avatar-image.js +1 -1
  102. package/dist/badge.js +1 -1
  103. package/dist/button.js +1 -1
  104. package/dist/card.js +1 -1
  105. package/dist/checkbox.js +3 -3
  106. package/dist/chunks/base-button.89e9efbd.js +88 -0
  107. package/dist/chunks/base-button.89e9efbd.js.map +1 -0
  108. package/dist/chunks/base-modal.6eaa7e53.js +211 -0
  109. package/dist/chunks/base-modal.6eaa7e53.js.map +1 -0
  110. package/dist/chunks/{calendar.c20df708.js → calendar.44459d87.js} +2 -2
  111. package/dist/chunks/{calendar.c20df708.js.map → calendar.44459d87.js.map} +1 -1
  112. package/dist/chunks/{checkbox.5a69ce9d.js → checkbox.b69b8f22.js} +16 -16
  113. package/dist/chunks/{checkbox.5a69ce9d.js.map → checkbox.b69b8f22.js.map} +1 -1
  114. package/dist/chunks/{copy.982e1b19.js → copy.57f969d4.js} +2 -2
  115. package/dist/chunks/{copy.982e1b19.js.map → copy.57f969d4.js.map} +1 -1
  116. package/dist/chunks/debounce.b5ef6acf.js +10 -0
  117. package/dist/chunks/debounce.b5ef6acf.js.map +1 -0
  118. package/dist/chunks/{dropdown-default-textbox.9bef4138.js → dropdown-default-textbox.2d093874.js} +8 -7
  119. package/dist/chunks/{dropdown-default-textbox.9bef4138.js.map → dropdown-default-textbox.2d093874.js.map} +1 -1
  120. package/dist/chunks/{dropdown.15cc1c45.js → dropdown.10ea8304.js} +33 -31
  121. package/dist/chunks/dropdown.10ea8304.js.map +1 -0
  122. package/dist/chunks/{index.c39c64c9.js → index.0f8690c4.js} +2 -2
  123. package/dist/chunks/{index.c39c64c9.js.map → index.0f8690c4.js.map} +1 -1
  124. package/dist/chunks/{index.58ce168a.js → index.4a11da21.js} +179 -170
  125. package/dist/chunks/index.4a11da21.js.map +1 -0
  126. package/dist/chunks/{index.876ea5bf.js → index.660f2f2e.js} +2 -2
  127. package/dist/chunks/{index.876ea5bf.js.map → index.660f2f2e.js.map} +1 -1
  128. package/dist/chunks/{index.b9c8c99a.js → index.f607a3f1.js} +4 -4
  129. package/dist/chunks/{index.b9c8c99a.js.map → index.f607a3f1.js.map} +1 -1
  130. package/dist/chunks/{debounce.f8d92e44.js → keyboard-navigation.ca47dfa8.js} +11 -17
  131. package/dist/chunks/keyboard-navigation.ca47dfa8.js.map +1 -0
  132. package/dist/chunks/{listbox-option-tag.f8b467a7.js → listbox-option-tag.e2688e54.js} +2 -2
  133. package/dist/chunks/{listbox-option-tag.f8b467a7.js.map → listbox-option-tag.e2688e54.js.map} +1 -1
  134. package/dist/chunks/{listbox.cbf47484.js → listbox.201a8521.js} +6 -5
  135. package/dist/chunks/{listbox.cbf47484.js.map → listbox.201a8521.js.map} +1 -1
  136. package/dist/chunks/{tooltip.0297fd5d.js → tooltip.f89cb0cd.js} +18 -18
  137. package/dist/chunks/{tooltip.0297fd5d.js.map → tooltip.f89cb0cd.js.map} +1 -1
  138. package/dist/chunks/use-has-slot.6052d56a.js.map +1 -1
  139. package/dist/code-snippet.js +193 -191
  140. package/dist/code-snippet.js.map +1 -1
  141. package/dist/country.js +1 -1
  142. package/dist/data-grid.js +750 -640
  143. package/dist/data-grid.js.map +1 -1
  144. package/dist/date-picker.js +5 -5
  145. package/dist/date-range-picker.js +2 -2
  146. package/dist/divider.js +1 -1
  147. package/dist/dropdown.js +3 -3
  148. package/dist/empty-state.js +10 -10
  149. package/dist/empty-state.js.map +1 -1
  150. package/dist/filter-bar.js +533 -491
  151. package/dist/filter-bar.js.map +1 -1
  152. package/dist/focus-trap.js +1 -1
  153. package/dist/form-layout.js +71 -50
  154. package/dist/form-layout.js.map +1 -1
  155. package/dist/header.js +181 -102
  156. package/dist/header.js.map +1 -1
  157. package/dist/image.js +3 -1
  158. package/dist/index.js +200 -193
  159. package/dist/index.js.map +1 -1
  160. package/dist/info-icon.js +2 -2
  161. package/dist/input-field.js +2 -2
  162. package/dist/internal.js +4 -4
  163. package/dist/link.js +1 -1
  164. package/dist/loading-indicator.js +1 -1
  165. package/dist/menu.js +39 -30
  166. package/dist/menu.js.map +1 -1
  167. package/dist/modal.js +29 -26
  168. package/dist/modal.js.map +1 -1
  169. package/dist/pagination.js +2 -2
  170. package/dist/payment-method.js +1 -1
  171. package/dist/popover.js +43 -31
  172. package/dist/popover.js.map +1 -1
  173. package/dist/popper-container.js +1228 -180
  174. package/dist/popper-container.js.map +1 -1
  175. package/dist/radio-group.js +1 -1
  176. package/dist/search-bar.js +3 -3
  177. package/dist/segmented-control.js +9 -9
  178. package/dist/segmented-control.js.map +1 -1
  179. package/dist/sidepanel.js +13 -13
  180. package/dist/sidepanel.js.map +1 -1
  181. package/dist/status.js +1 -1
  182. package/dist/stepper.js +229 -0
  183. package/dist/stepper.js.map +1 -0
  184. package/dist/structured-list.js +1 -1
  185. package/dist/summary-grid.js +2 -2
  186. package/dist/tabs.js +1 -1
  187. package/dist/tag.js +2 -2
  188. package/dist/textarea.js +1 -1
  189. package/dist/timeline.js +2 -2
  190. package/dist/toast.js +1 -1
  191. package/dist/toggle.js +14 -14
  192. package/dist/toggle.js.map +1 -1
  193. package/dist/web-types.json +279 -60
  194. package/package.json +3 -3
  195. package/dist/chunks/base-button.7a676605.js +0 -82
  196. package/dist/chunks/base-button.7a676605.js.map +0 -1
  197. package/dist/chunks/base-modal.a51d2395.js +0 -207
  198. package/dist/chunks/base-modal.a51d2395.js.map +0 -1
  199. package/dist/chunks/debounce.f8d92e44.js.map +0 -1
  200. package/dist/chunks/dropdown.15cc1c45.js.map +0 -1
  201. package/dist/chunks/index.58ce168a.js.map +0 -1
package/dist/toggle.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent as I, ref as p, computed as u, toRefs as k, watch as A } from "vue";
1
+ import { defineComponent as k, ref as p, computed as u, toRefs as I, watch as A } from "vue";
2
2
  import { C as B } from "./chunks/checkmark-small.5ca15f00.js";
3
3
  import { B as L } from "./chunks/index.1645ffcb.js";
4
4
  import { g as E } from "./chunks/unique-id.a2a2b458.js";
@@ -7,9 +7,9 @@ import { u as R } from "./chunks/use-default-slot-validator.cbdfe693.js";
7
7
  import { g } from "./chunks/get-slot-text.c1114034.js";
8
8
  import { u as x } from "./chunks/aria-label.ac9651a5.js";
9
9
  import { n as T } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
10
- import "./assets/index34.css";
10
+ import "./assets/index32.css";
11
11
  var f = /* @__PURE__ */ ((t) => (t.LABEL_FIRST = "label-first", t))(f || {}), d = /* @__PURE__ */ ((t) => (t.BEFORE = "before", t.AFTER = "after", t))(d || {});
12
- const D = I({
12
+ const D = k({
13
13
  name: "bento-toggle",
14
14
  components: { BentoTypography: L, CheckmarkSmall: B },
15
15
  props: {
@@ -56,9 +56,9 @@ const D = I({
56
56
  },
57
57
  emits: ["input"],
58
58
  setup(t, { attrs: e, slots: a, emit: n }) {
59
- const l = F(a), s = p(t.value), i = E("toggle-description"), c = g(a)("default"), o = g(a)("description");
59
+ const l = F(a), r = p(t.value), i = E("toggle-description"), c = g(a)("default"), o = g(a)("description");
60
60
  R("bento-toggle", a.default, a.description);
61
- const _ = u(() => l("default") ? g(a)("default") : null), b = p(e["aria-label"]), { ariaLabel: m } = k(t), y = x({
61
+ const _ = u(() => l("default") ? g(a)("default") : null), b = p(e["aria-label"]), { ariaLabel: m } = I(t), y = x({
62
62
  ariaLabel: b.value,
63
63
  // TODO: take this line away when the aria-label props is removed
64
64
  label: m,
@@ -67,19 +67,19 @@ const D = I({
67
67
  [`b-toggle--${f.LABEL_FIRST}`]: t.labelPosition === d.BEFORE,
68
68
  "b-toggle--disabled": t.disabled,
69
69
  "b-toggle--readonly": t.readonly
70
- })), C = (r) => {
71
- n("input", r.target.checked);
72
- }, S = (r) => {
73
- t.readonly && r.preventDefault();
70
+ })), C = (s) => {
71
+ n("input", s.target.checked);
72
+ }, S = (s) => {
73
+ t.readonly && s.preventDefault();
74
74
  };
75
75
  return A(
76
76
  () => t.value,
77
- (r) => {
78
- s.value = r;
77
+ (s) => {
78
+ r.value = s;
79
79
  }
80
80
  ), {
81
81
  // Refs
82
- toggleInput: s,
82
+ toggleInput: r,
83
83
  // Values
84
84
  computedAriaLabel: y,
85
85
  computedDescription: h,
@@ -97,10 +97,10 @@ const D = I({
97
97
  var O = function() {
98
98
  var e = this, a = e._self._c;
99
99
  return e._self._setupProxy, a("label", { staticClass: "b-toggle", class: e.conditionalClasses, attrs: { "data-testid": "label" } }, [a("input", { directives: [{ name: "model", rawName: "v-model", value: e.toggleInput, expression: "toggleInput" }], staticClass: "b-toggle__input", attrs: { "aria-label": e.computedAriaLabel, "aria-describedby": e.computedDescription, disabled: e.disabled, "aria-readonly": e.readonly, role: "switch", type: "checkbox" }, domProps: { checked: Array.isArray(e.toggleInput) ? e._i(e.toggleInput, null) > -1 : e.toggleInput }, on: { change: [function(n) {
100
- var l = e.toggleInput, s = n.target, i = !!s.checked;
100
+ var l = e.toggleInput, r = n.target, i = !!r.checked;
101
101
  if (Array.isArray(l)) {
102
102
  var c = null, o = e._i(l, c);
103
- s.checked ? o < 0 && (e.toggleInput = l.concat([c])) : o > -1 && (e.toggleInput = l.slice(0, o).concat(l.slice(o + 1)));
103
+ r.checked ? o < 0 && (e.toggleInput = l.concat([c])) : o > -1 && (e.toggleInput = l.slice(0, o).concat(l.slice(o + 1)));
104
104
  } else
105
105
  e.toggleInput = i;
106
106
  }, (n) => e.onChange(n)], click: e.onClick } }), a("span", { staticClass: "b-toggle__track", attrs: { "aria-hidden": "true" } }, [a("span", { staticClass: "b-toggle__handle" }, [e.toggleInput ? a("checkmark-small") : e._e()], 1)]), e.hasSlot("default") ? a("span", { staticClass: "b-toggle__label-container" }, [e.hasSlot("default") ? a("bento-typography", { attrs: { el: "span", variant: "body", "data-testid": "inner-label" } }, [e._t("default")], 2) : e._e(), e.hasSlot("default") && e.hasSlot("description") ? a("bento-typography", { staticClass: "b-toggle__description", attrs: { id: e.descriptionId, el: "span", variant: "body" } }, [e._t("description")], 2) : e._e()], 1) : e._e()]);
@@ -1 +1 @@
1
- {"version":3,"file":"toggle.js","sources":["../src/components/toggle/toggle.types.ts","../src/components/toggle/toggle.vue"],"sourcesContent":["export enum BentoTogglePropClass {\n LABEL_FIRST = 'label-first',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoToggleLabelPosition {\n BEFORE = 'before',\n AFTER = 'after',\n}\n","<template>\n <label class=\"b-toggle\" :class=\"conditionalClasses\" data-testid=\"label\">\n <input\n v-model=\"toggleInput\"\n :aria-label=\"computedAriaLabel\"\n :aria-describedby=\"computedDescription\"\n :disabled=\"disabled\"\n :aria-readonly=\"readonly\"\n role=\"switch\"\n class=\"b-toggle__input\"\n type=\"checkbox\"\n @change=\"$event => onChange($event)\"\n @click=\"onClick\"\n />\n <span class=\"b-toggle__track\" aria-hidden=\"true\">\n <span class=\"b-toggle__handle\">\n <checkmark-small v-if=\"toggleInput\" />\n </span>\n </span>\n <span v-if=\"hasSlot('default')\" class=\"b-toggle__label-container\">\n <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" data-testid=\"inner-label\">\n <slot></slot>\n </bento-typography>\n <bento-typography\n v-if=\"hasSlot('default') && hasSlot('description')\"\n :id=\"descriptionId\"\n el=\"span\"\n variant=\"body\"\n class=\"b-toggle__description\"\n >\n <slot name=\"description\" />\n </bento-typography>\n </span>\n </label>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType, ref, toRefs, watch } from 'vue';\n import CheckmarkSmall from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n import { BentoToggleLabelPosition, BentoTogglePropClass } from './toggle.types';\n import { BentoTypography } from '@/components/typography';\n import { generateUid } from '@/utils/ts/unique-id';\n import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n import { getSlotText } from '@/utils/ts/get-slot-text/get-slot-text';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n\n /**\n * A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle\n *\n * @usage\n * import { BentoToggle, BentoLabelPosition } from '@adyen/adl-vue2';\n *\n * export default {\n * components: { BentoToggle },\n * template: `\n * <bento-toggle\n * :value=\"toggleValue\"`\n * label-position=\"LabelPosition.BEFORE\"\n * @input=\"optionalHandler($event)\"\n * >\n * Label Text\n * </bento-toggle>\n * `,\n * }\n */\n export default defineComponent({\n name: 'bento-toggle',\n components: { BentoTypography, CheckmarkSmall },\n props: {\n /**\n * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n */\n /**\n * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label\n */\n ariaLabel: {\n type: String,\n default: undefined,\n },\n /**\n * Disable the toggle (optional)\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n /**\n * Position of the label relative to the toggle (optional)\n * @values before, after\n */\n labelPosition: {\n type: String as PropType<BentoToggleLabelPosition | `${BentoToggleLabelPosition}`>,\n default: BentoToggleLabelPosition.BEFORE,\n validator: (value: BentoToggleLabelPosition) => Object.values(BentoToggleLabelPosition).includes(value),\n },\n /**\n * Setting this property to true will set the toggle to read only state.\n */\n readonly: {\n type: Boolean,\n default: false,\n },\n /**\n * Indicates if the switch is \"on\" or \"off\"\n */\n value: {\n type: Boolean,\n default: false,\n },\n },\n emits: ['input'],\n setup(props, { attrs, slots, emit }) {\n const hasSlot = useHasSlot(slots);\n\n const toggleInput = ref(props.value);\n const descriptionId: string = generateUid('toggle-description');\n\n const defaultSlotValue = getSlotText(slots)('default');\n const descriptionSlotValue = getSlotText(slots)('description');\n\n useDefaultSlotValidator('bento-toggle', slots.default, slots.description);\n\n const labelSlot = computed((): string => (hasSlot('default') ? getSlotText(slots)('default') : null));\n\n const ariaLabelAttribute = ref(attrs['aria-label']);\n const { ariaLabel } = toRefs(props);\n const computedAriaLabel = useAriaLabel({\n ariaLabel: ariaLabelAttribute.value as string,\n // TODO: take this line away when the aria-label props is removed\n label: ariaLabel,\n defaultFallback: labelSlot,\n });\n\n const computedDescription = computed((): string | null => descriptionId ?? null);\n\n const conditionalClasses = computed((): { [key: string]: boolean } => ({\n [`b-toggle--${BentoTogglePropClass.LABEL_FIRST}`]:\n props.labelPosition === BentoToggleLabelPosition.BEFORE,\n 'b-toggle--disabled': props.disabled,\n 'b-toggle--readonly': props.readonly,\n }));\n\n const onChange = (event: Event) => {\n emit('input', (event.target as HTMLInputElement).checked);\n };\n\n // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n const onClick = (event: Event) => {\n if (props.readonly) {\n event.preventDefault();\n }\n };\n\n watch(\n () => props.value,\n newValue => {\n toggleInput.value = newValue;\n }\n );\n\n return {\n // Refs\n toggleInput,\n\n // Values\n computedAriaLabel,\n computedDescription,\n defaultSlotValue,\n descriptionSlotValue,\n conditionalClasses,\n descriptionId,\n\n // Method\n hasSlot,\n onChange,\n onClick,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle.scss\" />\n"],"names":["BentoTogglePropClass","BentoTogglePropClass2","BentoToggleLabelPosition","BentoToggleLabelPosition2","_sfc_main","defineComponent","BentoTypography","CheckmarkSmall","value","props","attrs","slots","emit","hasSlot","useHasSlot","toggleInput","ref","descriptionId","generateUid","defaultSlotValue","getSlotText","descriptionSlotValue","useDefaultSlotValidator","labelSlot","computed","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","computedDescription","conditionalClasses","onChange","event","onClick","watch","newValue"],"mappings":";;;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,SAAA,UACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;AC0DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,GAAA,gBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAOA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,eAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAL,EAAA;AAAA,MACA,WAAA,CAAAM,MAAA,OAAA,OAAAN,CAAA,EAAA,SAAAM,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,GAAA,OAAAC,GAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAAP,EAAA,KAAA,GACAQ,IAAAC,EAAA,oBAAA,GAEAC,IAAAC,EAAAT,CAAA,EAAA,SAAA,GACAU,IAAAD,EAAAT,CAAA,EAAA,aAAA;AAEA,IAAAW,EAAA,gBAAAX,EAAA,SAAAA,EAAA,WAAA;AAEA,UAAAY,IAAAC,EAAA,MAAAX,EAAA,SAAA,IAAAO,EAAAT,CAAA,EAAA,SAAA,IAAA,IAAA,GAEAc,IAAAT,EAAAN,EAAA,YAAA,CAAA,GACA,EAAA,WAAAgB,EAAA,IAAAC,EAAAlB,CAAA,GACAmB,IAAAC,EAAA;AAAA,MAAA,WAAAJ,EAAA;AAAA;AAAA,MACA,OAAAC;AAAA,MAEA,iBAAAH;AAAA,IACA,CAAA,GAGAO,IAAAN,EAAA,MAAAP,KAAA,IAAA,GAEAc,IAAAP,EAAA,OAAA;AAAA,MAAA,CAAA,aAAAxB,EAAA,aAAA,GAAAS,EAAA,kBAAAP,EAAA;AAAA,MAEA,sBAAAO,EAAA;AAAA,MACA,sBAAAA,EAAA;AAAA,IACA,EAAA,GAGAuB,IAAA,CAAAC,MAAA;AACA,MAAArB,EAAA,SAAAqB,EAAA,OAAA,OAAA;AAAA,IAAA,GAIAC,IAAA,CAAAD,MAAA;AACA,MAAAxB,EAAA,YACAwB,EAAA,eAAA;AAAA,IACA;AAGA,WAAAE;AAAA,MAAA,MAAA1B,EAAA;AAAA,MACA,CAAA2B,MAAA;AAEA,QAAArB,EAAA,QAAAqB;AAAA,MAAA;AAAA,IACA,GAGA;AAAA;AAAA,MAAA,aAAArB;AAAA;AAAA,MAEA,mBAAAa;AAAA,MAGA,qBAAAE;AAAA,MACA,kBAAAX;AAAA,MACA,sBAAAE;AAAA,MACA,oBAAAU;AAAA,MACA,eAAAd;AAAA;AAAA,MACA,SAAAJ;AAAA,MAGA,UAAAmB;AAAA,MACA,SAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"toggle.js","sources":["../src/components/toggle/toggle.types.ts","../src/components/toggle/toggle.vue"],"sourcesContent":["export enum BentoTogglePropClass {\n LABEL_FIRST = 'label-first',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoToggleLabelPosition {\n BEFORE = 'before',\n AFTER = 'after',\n}\n","<template>\n <label class=\"b-toggle\" :class=\"conditionalClasses\" data-testid=\"label\">\n <input\n v-model=\"toggleInput\"\n :aria-label=\"computedAriaLabel\"\n :aria-describedby=\"computedDescription\"\n :disabled=\"disabled\"\n :aria-readonly=\"readonly\"\n role=\"switch\"\n class=\"b-toggle__input\"\n type=\"checkbox\"\n @change=\"$event => onChange($event)\"\n @click=\"onClick\"\n />\n <span class=\"b-toggle__track\" aria-hidden=\"true\">\n <span class=\"b-toggle__handle\">\n <checkmark-small v-if=\"toggleInput\" />\n </span>\n </span>\n <span v-if=\"hasSlot('default')\" class=\"b-toggle__label-container\">\n <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" data-testid=\"inner-label\">\n <slot></slot>\n </bento-typography>\n <bento-typography\n v-if=\"hasSlot('default') && hasSlot('description')\"\n :id=\"descriptionId\"\n el=\"span\"\n variant=\"body\"\n class=\"b-toggle__description\"\n >\n <slot name=\"description\" />\n </bento-typography>\n </span>\n </label>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType, ref, toRefs, watch } from 'vue';\n import CheckmarkSmall from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n import { BentoToggleLabelPosition, BentoTogglePropClass } from './toggle.types';\n import { BentoTypography } from '@/components/typography';\n import { generateUid } from '@/utils/ts/unique-id';\n import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n import { getSlotText } from '@/utils/ts/get-slot-text/get-slot-text';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n\n /**\n * A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle\n *\n * @usage\n * import { BentoToggle, BentoLabelPosition } from '@adyen/adl-vue2';\n *\n * export default {\n * components: { BentoToggle },\n * template: `\n * <bento-toggle\n * :value=\"toggleValue\"`\n * label-position=\"LabelPosition.BEFORE\"\n * @input=\"optionalHandler($event)\"\n * >\n * Label Text\n * </bento-toggle>\n * `,\n * }\n */\n export default defineComponent({\n name: 'bento-toggle',\n components: { BentoTypography, CheckmarkSmall },\n props: {\n /**\n * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n */\n /**\n * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label\n */\n ariaLabel: {\n type: String,\n default: undefined,\n },\n /**\n * Disable the toggle (optional)\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n /**\n * Position of the label relative to the toggle (optional)\n * @values before, after\n */\n labelPosition: {\n type: String as PropType<BentoToggleLabelPosition | `${BentoToggleLabelPosition}`>,\n default: BentoToggleLabelPosition.BEFORE,\n validator: (value: BentoToggleLabelPosition) => Object.values(BentoToggleLabelPosition).includes(value),\n },\n /**\n * Setting this property to true will set the toggle to read only state.\n */\n readonly: {\n type: Boolean,\n default: false,\n },\n /**\n * Indicates if the switch is \"on\" or \"off\"\n */\n value: {\n type: Boolean,\n default: false,\n },\n },\n emits: ['input'],\n setup(props, { attrs, slots, emit }) {\n const hasSlot = useHasSlot(slots);\n\n const toggleInput = ref(props.value);\n const descriptionId: string = generateUid('toggle-description');\n\n const defaultSlotValue = getSlotText(slots)('default');\n const descriptionSlotValue = getSlotText(slots)('description');\n\n useDefaultSlotValidator('bento-toggle', slots.default, slots.description);\n\n const labelSlot = computed((): string => (hasSlot('default') ? getSlotText(slots)('default') : null));\n\n const ariaLabelAttribute = ref(attrs['aria-label']);\n const { ariaLabel } = toRefs(props);\n const computedAriaLabel = useAriaLabel({\n ariaLabel: ariaLabelAttribute.value as string,\n // TODO: take this line away when the aria-label props is removed\n label: ariaLabel,\n defaultFallback: labelSlot,\n });\n\n const computedDescription = computed((): string | null => descriptionId ?? null);\n\n const conditionalClasses = computed((): { [key: string]: boolean } => ({\n [`b-toggle--${BentoTogglePropClass.LABEL_FIRST}`]:\n props.labelPosition === BentoToggleLabelPosition.BEFORE,\n 'b-toggle--disabled': props.disabled,\n 'b-toggle--readonly': props.readonly,\n }));\n\n const onChange = (event: Event) => {\n emit('input', (event.target as HTMLInputElement).checked);\n };\n\n // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n const onClick = (event: Event) => {\n if (props.readonly) {\n event.preventDefault();\n }\n };\n\n watch(\n () => props.value,\n newValue => {\n toggleInput.value = newValue;\n }\n );\n\n return {\n // Refs\n toggleInput,\n\n // Values\n computedAriaLabel,\n computedDescription,\n defaultSlotValue,\n descriptionSlotValue,\n conditionalClasses,\n descriptionId,\n\n // Method\n hasSlot,\n onChange,\n onClick,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle.scss\" />\n"],"names":["BentoTogglePropClass","BentoTogglePropClass2","BentoToggleLabelPosition","BentoToggleLabelPosition2","_sfc_main","defineComponent","BentoTypography","CheckmarkSmallIcon","value","props","attrs","slots","emit","hasSlot","useHasSlot","toggleInput","ref","descriptionId","generateUid","defaultSlotValue","getSlotText","descriptionSlotValue","useDefaultSlotValidator","labelSlot","computed","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","computedDescription","conditionalClasses","onChange","event","onClick","watch","newValue"],"mappings":";;;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,SAAA,UACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;AC0DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,GAAA,gBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAOA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,eAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAL,EAAA;AAAA,MACA,WAAA,CAAAM,MAAA,OAAA,OAAAN,CAAA,EAAA,SAAAM,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,GAAA,OAAAC,GAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAAP,EAAA,KAAA,GACAQ,IAAAC,EAAA,oBAAA,GAEAC,IAAAC,EAAAT,CAAA,EAAA,SAAA,GACAU,IAAAD,EAAAT,CAAA,EAAA,aAAA;AAEA,IAAAW,EAAA,gBAAAX,EAAA,SAAAA,EAAA,WAAA;AAEA,UAAAY,IAAAC,EAAA,MAAAX,EAAA,SAAA,IAAAO,EAAAT,CAAA,EAAA,SAAA,IAAA,IAAA,GAEAc,IAAAT,EAAAN,EAAA,YAAA,CAAA,GACA,EAAA,WAAAgB,EAAA,IAAAC,EAAAlB,CAAA,GACAmB,IAAAC,EAAA;AAAA,MAAA,WAAAJ,EAAA;AAAA;AAAA,MACA,OAAAC;AAAA,MAEA,iBAAAH;AAAA,IACA,CAAA,GAGAO,IAAAN,EAAA,MAAAP,KAAA,IAAA,GAEAc,IAAAP,EAAA,OAAA;AAAA,MAAA,CAAA,aAAAxB,EAAA,aAAA,GAAAS,EAAA,kBAAAP,EAAA;AAAA,MAEA,sBAAAO,EAAA;AAAA,MACA,sBAAAA,EAAA;AAAA,IACA,EAAA,GAGAuB,IAAA,CAAAC,MAAA;AACA,MAAArB,EAAA,SAAAqB,EAAA,OAAA,OAAA;AAAA,IAAA,GAIAC,IAAA,CAAAD,MAAA;AACA,MAAAxB,EAAA,YACAwB,EAAA,eAAA;AAAA,IACA;AAGA,WAAAE;AAAA,MAAA,MAAA1B,EAAA;AAAA,MACA,CAAA2B,MAAA;AAEA,QAAArB,EAAA,QAAAqB;AAAA,MAAA;AAAA,IACA,GAGA;AAAA;AAAA,MAAA,aAAArB;AAAA;AAAA,MAEA,mBAAAa;AAAA,MAGA,qBAAAE;AAAA,MACA,kBAAAX;AAAA,MACA,sBAAAE;AAAA,MACA,oBAAAU;AAAA,MACA,eAAAd;AAAA;AAAA,MACA,SAAAJ;AAAA,MAGA,UAAAmB;AAAA,MACA,SAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;;;;"}