@adyen/bento-vue2 1.19.0 → 1.20.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.
- package/dist/@types/packages/vue2/src/components/code-snippet/utils/indent-same-as-line-before-extension.d.ts +8 -0
- package/dist/@types/packages/vue2/src/components/code-snippet/utils/index.d.ts +2 -0
- package/dist/@types/packages/vue2/src/components/date-range-picker/components/date-range-picker-calendar/date-range-picker-calendar.types.d.ts +2 -1
- package/dist/@types/packages/vue2/src/components/filter-bar/components/all-filters-modal/all-filters-modal.vue.d.ts +2 -2
- package/dist/@types/packages/vue2/src/components/filter-bar/components/date-range-filter/date-range-filter.vue.d.ts +1 -0
- package/dist/@types/packages/vue2/src/components/link/link.vue.d.ts +1 -0
- package/dist/@types/packages/vue2/src/components/payment-method/payment-method.types.d.ts +3 -1079
- package/dist/@types/packages/vue2/src/components/payment-method/payment-method.vue.d.ts +7 -8
- package/dist/@types/packages/vue2/src/components/segmented-control/components/segmented-control-button/segmented-control-button.vue.d.ts +1 -1
- package/dist/accordion.js +3 -3
- package/dist/action-bar.js +7 -7
- package/dist/alert.js +7 -7
- package/dist/assets/base-modal.css +1 -1
- package/dist/assets/dialog-page.css +1 -1
- package/dist/assets/dropdown-default-textbox.css +1 -1
- package/dist/assets/index10.css +1 -1
- package/dist/assets/index11.css +1 -1
- package/dist/assets/index12.css +1 -1
- package/dist/assets/index13.css +1 -1
- package/dist/assets/index14.css +1 -1
- package/dist/assets/index15.css +1 -1
- package/dist/assets/index16.css +1 -1
- package/dist/assets/index17.css +1 -1
- package/dist/assets/index18.css +1 -1
- package/dist/assets/index19.css +1 -1
- package/dist/assets/index20.css +1 -1
- package/dist/assets/index21.css +1 -1
- package/dist/assets/index22.css +1 -1
- package/dist/assets/index23.css +1 -1
- package/dist/assets/index24.css +1 -1
- package/dist/assets/index25.css +1 -1
- package/dist/assets/index26.css +1 -1
- package/dist/assets/index27.css +1 -1
- package/dist/assets/index29.css +1 -1
- package/dist/assets/index3.css +1 -1
- package/dist/assets/index32.css +1 -1
- package/dist/assets/index33.css +1 -1
- package/dist/assets/index34.css +1 -1
- package/dist/assets/index35.css +1 -1
- package/dist/assets/index36.css +1 -1
- package/dist/assets/index37.css +1 -1
- package/dist/assets/index38.css +1 -1
- package/dist/assets/index39.css +1 -1
- package/dist/assets/index40.css +1 -1
- package/dist/assets/index41.css +1 -1
- package/dist/assets/index42.css +1 -1
- package/dist/assets/index43.css +1 -1
- package/dist/assets/index44.css +1 -1
- package/dist/assets/index45.css +1 -1
- package/dist/assets/index46.css +1 -1
- package/dist/assets/index47.css +1 -1
- package/dist/assets/index48.css +1 -1
- package/dist/assets/index5.css +1 -1
- package/dist/assets/index6.css +1 -1
- package/dist/assets/index7.css +1 -1
- package/dist/assets/index8.css +1 -1
- package/dist/assets/index9.css +1 -1
- package/dist/avatar-image.js +1 -1
- package/dist/button.js +5 -5
- package/dist/card.js +4 -4
- package/dist/checkbox.js +6 -6
- package/dist/chunks/{arrow-left.2db60716.js → arrow-left.93ae08f5.js} +2 -2
- package/dist/chunks/{arrow-left.2db60716.js.map → arrow-left.93ae08f5.js.map} +1 -1
- package/dist/chunks/{base-button.3c3d473d.js → base-button.2abda566.js} +2 -2
- package/dist/chunks/{base-button.3c3d473d.js.map → base-button.2abda566.js.map} +1 -1
- package/dist/chunks/{base-modal.27c6f2db.js → base-modal.9d4f6201.js} +38 -33
- package/dist/chunks/base-modal.9d4f6201.js.map +1 -0
- package/dist/chunks/{button-actions-with-menu.a38327c2.js → button-actions-with-menu.db38aa1d.js} +4 -4
- package/dist/chunks/{button-actions-with-menu.a38327c2.js.map → button-actions-with-menu.db38aa1d.js.map} +1 -1
- package/dist/chunks/{button-actions.1dc90a19.js → button-actions.0ed5f462.js} +3 -3
- package/dist/chunks/{button-actions.1dc90a19.js.map → button-actions.0ed5f462.js.map} +1 -1
- package/dist/chunks/{button.0b6cda85.js → button.8738aa07.js} +3 -3
- package/dist/chunks/{button.0b6cda85.js.map → button.8738aa07.js.map} +1 -1
- package/dist/chunks/{calendar.263cfc88.js → calendar.ce3f34b7.js} +137 -137
- package/dist/chunks/{calendar.263cfc88.js.map → calendar.ce3f34b7.js.map} +1 -1
- package/dist/chunks/{checkbox.c7a74005.js → checkbox.4f4e8f67.js} +4 -4
- package/dist/chunks/{checkbox.c7a74005.js.map → checkbox.4f4e8f67.js.map} +1 -1
- package/dist/chunks/{checkmark-circle-fill.345311d2.js → checkmark-circle-fill.d1cdb44b.js} +2 -2
- package/dist/chunks/{checkmark-circle-fill.345311d2.js.map → checkmark-circle-fill.d1cdb44b.js.map} +1 -1
- package/dist/chunks/{checkmark-small.520f01b1.js → checkmark-small.73cf8f1d.js} +2 -2
- package/dist/chunks/{checkmark-small.520f01b1.js.map → checkmark-small.73cf8f1d.js.map} +1 -1
- package/dist/chunks/{checkmark.a6ed8f47.js → checkmark.b6d2d4d1.js} +2 -2
- package/dist/chunks/{checkmark.a6ed8f47.js.map → checkmark.b6d2d4d1.js.map} +1 -1
- package/dist/chunks/{chevron-left.5edf02ac.js → chevron-left.ddc658ff.js} +2 -2
- package/dist/chunks/{chevron-left.5edf02ac.js.map → chevron-left.ddc658ff.js.map} +1 -1
- package/dist/chunks/{chevron-up.81185563.js → chevron-up.52aea493.js} +2 -2
- package/dist/chunks/{chevron-up.81185563.js.map → chevron-up.52aea493.js.map} +1 -1
- package/dist/chunks/{controls-group.8abe0bd1.js → controls-group.0e3d1fc5.js} +3 -3
- package/dist/chunks/{controls-group.8abe0bd1.js.map → controls-group.0e3d1fc5.js.map} +1 -1
- package/dist/chunks/{copy.647aae54.js → copy.2aca9aaf.js} +4 -4
- package/dist/chunks/{copy.647aae54.js.map → copy.2aca9aaf.js.map} +1 -1
- package/dist/chunks/{cross-circle-fill.27580c4b.js → cross-circle-fill.42f9b938.js} +2 -2
- package/dist/chunks/{cross-circle-fill.27580c4b.js.map → cross-circle-fill.42f9b938.js.map} +1 -1
- package/dist/chunks/{cross-small.e851e0de.js → cross-small.3aadf170.js} +2 -2
- package/dist/chunks/{cross-small.e851e0de.js.map → cross-small.3aadf170.js.map} +1 -1
- package/dist/chunks/{cross.04678d81.js → cross.eaaaf355.js} +2 -2
- package/dist/chunks/{cross.04678d81.js.map → cross.eaaaf355.js.map} +1 -1
- package/dist/chunks/{dialog-page.f787969c.js → dialog-page.6bc19d1a.js} +4 -4
- package/dist/chunks/{dialog-page.f787969c.js.map → dialog-page.6bc19d1a.js.map} +1 -1
- package/dist/chunks/{dropdown-default-textbox.59803edd.js → dropdown-default-textbox.a55b9de3.js} +94 -92
- package/dist/chunks/dropdown-default-textbox.a55b9de3.js.map +1 -0
- package/dist/chunks/{dropdown.0574f613.js → dropdown.7ad3a860.js} +7 -7
- package/dist/chunks/{dropdown.0574f613.js.map → dropdown.7ad3a860.js.map} +1 -1
- package/dist/chunks/{error-message.75666843.js → error-message.775f9114.js} +3 -3
- package/dist/chunks/{error-message.75666843.js.map → error-message.775f9114.js.map} +1 -1
- package/dist/chunks/{fixed-scroller.06574a66.js → fixed-scroller.5764a0d4.js} +3 -3
- package/dist/chunks/{fixed-scroller.06574a66.js.map → fixed-scroller.5764a0d4.js.map} +1 -1
- package/dist/chunks/{footer-actions.0268a57b.js → footer-actions.093f0cbe.js} +4 -4
- package/dist/chunks/{footer-actions.0268a57b.js.map → footer-actions.093f0cbe.js.map} +1 -1
- package/dist/chunks/{index.302e9cf2.js → index.096f3429.js} +2 -2
- package/dist/chunks/{index.302e9cf2.js.map → index.096f3429.js.map} +1 -1
- package/dist/chunks/{index.932c230b.js → index.4c011bf9.js} +7 -7
- package/dist/chunks/{index.932c230b.js.map → index.4c011bf9.js.map} +1 -1
- package/dist/chunks/index.7e9406c4.js +32 -0
- package/dist/chunks/{index.026ae47b.js.map → index.7e9406c4.js.map} +1 -1
- package/dist/chunks/{index.45cd2344.js → index.973e0dbe.js} +15 -15
- package/dist/chunks/{index.45cd2344.js.map → index.973e0dbe.js.map} +1 -1
- package/dist/chunks/{index.408e1419.js → index.9e16359f.js} +138 -137
- package/dist/chunks/index.9e16359f.js.map +1 -0
- package/dist/chunks/{index.0bb773a7.js → index.9f7e23cb.js} +7 -7
- package/dist/chunks/{index.0bb773a7.js.map → index.9f7e23cb.js.map} +1 -1
- package/dist/chunks/{index.10b9618d.js → index.b86a901b.js} +2 -2
- package/dist/chunks/{index.10b9618d.js.map → index.b86a901b.js.map} +1 -1
- package/dist/chunks/{index.5bfc67d1.js → index.e1f51235.js} +2 -2
- package/dist/chunks/{index.5bfc67d1.js.map → index.e1f51235.js.map} +1 -1
- package/dist/chunks/{index.5b47c56b.js → index.e537c4f4.js} +18 -16
- package/dist/chunks/index.e537c4f4.js.map +1 -0
- package/dist/chunks/{index.a52b98d1.js → index.efda8afc.js} +8 -8
- package/dist/chunks/{index.a52b98d1.js.map → index.efda8afc.js.map} +1 -1
- package/dist/chunks/{index.dc985e76.js → index.f03831cf.js} +3 -3
- package/dist/chunks/{index.dc985e76.js.map → index.f03831cf.js.map} +1 -1
- package/dist/chunks/{index.de687404.js → index.f64eee15.js} +22 -22
- package/dist/chunks/{index.de687404.js.map → index.f64eee15.js.map} +1 -1
- package/dist/chunks/{info-filled.c37e091d.js → info-filled.c7bd493a.js} +2 -2
- package/dist/chunks/{info-filled.c37e091d.js.map → info-filled.c7bd493a.js.map} +1 -1
- package/dist/chunks/{info.8b6328aa.js → info.04ff164c.js} +2 -2
- package/dist/chunks/{info.8b6328aa.js.map → info.04ff164c.js.map} +1 -1
- package/dist/chunks/{listbox-option-tag.89846151.js → listbox-option-tag.1c6a0605.js} +3 -3
- package/dist/chunks/{listbox-option-tag.89846151.js.map → listbox-option-tag.1c6a0605.js.map} +1 -1
- package/dist/chunks/{listbox.a8180c4a.js → listbox.2a5fb14f.js} +8 -8
- package/dist/chunks/{listbox.a8180c4a.js.map → listbox.2a5fb14f.js.map} +1 -1
- package/dist/chunks/{loading-button.50dddf2f.js → loading-button.c7b30923.js} +4 -4
- package/dist/chunks/{loading-button.50dddf2f.js.map → loading-button.c7b30923.js.map} +1 -1
- package/dist/chunks/{refresh.71a03998.js → refresh.14e39831.js} +2 -2
- package/dist/chunks/{refresh.71a03998.js.map → refresh.14e39831.js.map} +1 -1
- package/dist/chunks/{search.471270fe.js → search.eca6bd88.js} +2 -2
- package/dist/chunks/{search.471270fe.js.map → search.eca6bd88.js.map} +1 -1
- package/dist/chunks/{tooltip.6748027a.js → tooltip.a76de645.js} +3 -3
- package/dist/chunks/{tooltip.6748027a.js.map → tooltip.a76de645.js.map} +1 -1
- package/dist/code-snippet.js +181 -165
- package/dist/code-snippet.js.map +1 -1
- package/dist/country.js +2 -2
- package/dist/currency.js +1 -1
- package/dist/data-grid.js +1 -1
- package/dist/date-picker.js +8 -8
- package/dist/date-range-picker.js +2 -2
- package/dist/date.js +1 -1
- package/dist/divider.js +1 -1
- package/dist/dropdown.js +6 -6
- package/dist/empty-state.js +3 -3
- package/dist/filter-bar.js +608 -602
- package/dist/filter-bar.js.map +1 -1
- package/dist/focus-trap.js +1 -1
- package/dist/form-layout.js +2 -2
- package/dist/header.js +5 -5
- package/dist/index.js +19 -19
- package/dist/info-icon.js +4 -4
- package/dist/input-field.js +4 -4
- package/dist/internal.js +8 -8
- package/dist/link.js +1 -1
- package/dist/loading-indicator.js +1 -1
- package/dist/menu.js +1 -1
- package/dist/modal-fullscreen.js +7 -7
- package/dist/modal.js +6 -6
- package/dist/pagination.js +4 -4
- package/dist/payment-method.js +43 -43
- package/dist/payment-method.js.map +1 -1
- package/dist/popover.js +1 -1
- package/dist/popper-container.js +1 -1
- package/dist/radio-group.js +4 -4
- package/dist/search-bar.js +10 -10
- package/dist/search-bar.js.map +1 -1
- package/dist/secondary-nav.js +2 -2
- package/dist/segmented-control.js +3 -3
- package/dist/sidepanel.js +6 -6
- package/dist/status.js +1 -1
- package/dist/stepper.js +3 -3
- package/dist/structured-list.js +1 -1
- package/dist/summary-grid.js +3 -3
- package/dist/tabs.js +3 -3
- package/dist/tag.js +3 -3
- package/dist/textarea.js +4 -4
- package/dist/timeline.js +7 -7
- package/dist/toast.js +5 -5
- package/dist/toggle.js +3 -3
- package/dist/tutorial.js +7 -7
- package/dist/typography.js +1 -1
- package/dist/web-types.json +10 -1
- package/package.json +3 -3
- package/dist/chunks/base-modal.27c6f2db.js.map +0 -1
- package/dist/chunks/dropdown-default-textbox.59803edd.js.map +0 -1
- package/dist/chunks/index.026ae47b.js +0 -32
- package/dist/chunks/index.408e1419.js.map +0 -1
- package/dist/chunks/index.5b47c56b.js.map +0 -1
- /package/dist/assets/{cross.css → checkmark-circle-fill.css} +0 -0
package/dist/assets/index6.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.b-
|
|
1
|
+
svg.ui-assets-icons-16{display:inline-flex;flex-shrink:0}svg.ui-assets-icons-16,svg.ui-assets-icons-16 *{fill:currentcolor}.b-alert[data-v-cc29b5e1]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;container-type:inline-size;display:flex;width:100%}.b-alert[data-v-cc29b5e1],.b-alert[data-v-cc29b5e1]:before,.b-alert[data-v-cc29b5e1]:after{box-sizing:border-box}.b-alert *[data-v-cc29b5e1],.b-alert *[data-v-cc29b5e1]:before,.b-alert *[data-v-cc29b5e1]:after{box-sizing:border-box}.b-alert[data-v-cc29b5e1] ::-webkit-scrollbar{height:14px;width:14px}.b-alert[data-v-cc29b5e1] ::-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-legacy-theme .b-alert__title[data-v-cc29b5e1]{line-height:16px}.b-alert__inner-container[data-v-cc29b5e1]{align-items:flex-start;border-radius:var(--b-alert-border-radius);display:flex;gap:var(--b-alert-gap-mobile);padding:var(--b-alert-padding-mobile);width:100%}@container (min-width: 460px){.b-alert__inner-container[data-v-cc29b5e1]{gap:var(--b-alert-gap);padding:var(--b-alert-padding)}}.b-alert__icon[data-v-cc29b5e1]{align-items:center;display:flex;height:var(--b-alert-icon-height)}.b-alert--tip .b-alert__icon[data-v-cc29b5e1]{height:var(--b-alert-tip-icon-height)}.b-alert--tip.b-alert__inner-container[data-v-cc29b5e1]{gap:var(--b-alert-tip-gap);padding:var(--b-alert-tip-padding)}.b-alert__content[data-v-cc29b5e1]{max-width:700px;width:100%}.b-alert__title[data-v-cc29b5e1]{flex-grow:1}.b-alert__description[data-v-cc29b5e1]:not(:first-child){margin-top:var(--b-alert-description-margin-top)}.b-alert__actions[data-v-cc29b5e1]{display:flex;gap:var(--b-alert-actions-gap);margin-top:var(--b-alert-actions-margin-top)}.b-alert__close-button[data-v-cc29b5e1]{display:flex;flex-grow:1;justify-content:flex-end}.b-alert--success[data-v-cc29b5e1]{background-color:var(--b-alert-success-background-color)}.b-alert--success .b-alert__icon[data-v-cc29b5e1]{color:var(--b-alert-success-icon-color)}.b-alert--success .b-alert__title[data-v-cc29b5e1],.b-alert--success .b-alert__description[data-v-cc29b5e1],.b-alert--success .b-alert__close-button[data-v-cc29b5e1]{color:var(--b-alert-success-color)}.b-alert--highlight[data-v-cc29b5e1]{background-color:var(--b-alert-highlight-background-color)}.b-alert--highlight .b-alert__icon[data-v-cc29b5e1]{color:var(--b-alert-highlight-icon-color)}.b-alert--highlight .b-alert__title[data-v-cc29b5e1],.b-alert--highlight .b-alert__description[data-v-cc29b5e1],.b-alert--highlight .b-alert__close-button[data-v-cc29b5e1]{color:var(--b-alert-highlight-color)}.b-alert--warning[data-v-cc29b5e1]{background-color:var(--b-alert-warning-background-color)}.b-alert--warning .b-alert__icon[data-v-cc29b5e1]{color:var(--b-alert-warning-icon-color)}.b-alert--warning .b-alert__title[data-v-cc29b5e1],.b-alert--warning .b-alert__description[data-v-cc29b5e1],.b-alert--warning .b-alert__close-button[data-v-cc29b5e1]{color:var(--b-alert-warning-color)}.b-alert--critical[data-v-cc29b5e1]{background-color:var(--b-alert-critical-background-color)}.b-alert--critical .b-alert__icon[data-v-cc29b5e1]{color:var(--b-alert-critical-icon-color)}.b-alert--critical .b-alert__title[data-v-cc29b5e1],.b-alert--critical .b-alert__description[data-v-cc29b5e1],.b-alert--critical .b-alert__close-button[data-v-cc29b5e1]{color:var(--b-alert-critical-color)}
|
package/dist/assets/index7.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.b-
|
|
1
|
+
.b-accordion[data-v-fb182a1c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-accordion[data-v-fb182a1c],.b-accordion[data-v-fb182a1c]:before,.b-accordion[data-v-fb182a1c]:after{box-sizing:border-box}.b-accordion *[data-v-fb182a1c],.b-accordion *[data-v-fb182a1c]:before,.b-accordion *[data-v-fb182a1c]:after{box-sizing:border-box}.b-accordion[data-v-fb182a1c] ::-webkit-scrollbar{height:14px;width:14px}.b-accordion[data-v-fb182a1c] ::-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-accordion-item[data-v-01c3158a]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-accordion-item-background-color);border-bottom:var(--b-accordion-item-border)}.b-accordion-item[data-v-01c3158a],.b-accordion-item[data-v-01c3158a]:before,.b-accordion-item[data-v-01c3158a]:after{box-sizing:border-box}.b-accordion-item *[data-v-01c3158a],.b-accordion-item *[data-v-01c3158a]:before,.b-accordion-item *[data-v-01c3158a]:after{box-sizing:border-box}.b-accordion-item[data-v-01c3158a] ::-webkit-scrollbar{height:14px;width:14px}.b-accordion-item[data-v-01c3158a] ::-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-accordion-item button[data-v-01c3158a]{background-color:transparent;border:0;font:inherit;text-align:inherit}.b-accordion-item button[data-v-01c3158a]:focus-visible{outline:none}.b-legacy-theme .b-accordion-item__heading[data-v-01c3158a]{font-size:var(--b-font-size-regular);line-height:1.4}.b-accordion-item[data-v-01c3158a]:first-of-type{border-top:var(--b-accordion-item-border)}.b-accordion-item__button[data-v-01c3158a]{align-items:center;cursor:pointer;display:flex;gap:var(--b-accordion-item-button-gap);padding:var(--b-accordion-item-button-padding);position:relative;width:100%;z-index:0}.b-accordion-item__button[data-v-01c3158a]:hover{background-color:var(--b-accordion-item-button-hover-background-color)}.b-accordion-item__button[data-v-01c3158a]:active{background-color:var(--b-accordion-item-button-active-background-color)}.b-accordion-item__button[data-v-01c3158a]:focus-visible{animation:outer-ring-default-01c3158a var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color);outline:none}@keyframes outer-ring-default-01c3158a{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-accordion-item__content[data-v-01c3158a]{padding:var(--b-accordion-item-content-padding)}.b-accordion-item__animation--content-enter-active[data-v-01c3158a]{animation:fade-in-upb65fd-01c3158a var(--b-accordion-item-animation-duration) var(--b-animation-easing-linear),enter-upb65fd-01c3158a var(--b-accordion-item-animation-duration) var(--b-animation-easing-enter),scale-up-upb65fd-01c3158a var(--b-accordion-item-animation-duration) var(--b-animation-easing-linear);overflow:hidden;transition:max-height var(--b-accordion-item-animation-duration) var(--b-accordion-item-animation-easing)}@keyframes fade-in-upb65fd-01c3158a{0%{opacity:0}to{opacity:1}}@keyframes scale-up-upb65fd-01c3158a{0%{scale:1}to{scale:1}}@keyframes enter-upb65fd-01c3158a{0%{translate:0 -8px}to{translate:0 0}}.b-accordion-item__animation--content-leave-active[data-v-01c3158a]{animation:fade-out-upb65fo-01c3158a var(--b-accordion-item-animation-duration) var(--b-animation-easing-linear),exit-upb65fo-01c3158a var(--b-accordion-item-animation-duration) var(--b-animation-easing-exit),scale-down-upb65fo-01c3158a var(--b-accordion-item-animation-duration) var(--b-animation-easing-linear);max-height:0!important;overflow:hidden;transition:max-height var(--b-accordion-item-animation-duration) var(--b-accordion-item-animation-easing)}@keyframes fade-out-upb65fo-01c3158a{0%{opacity:1}to{opacity:0}}@keyframes scale-down-upb65fo-01c3158a{0%{scale:1}to{scale:1}}@keyframes exit-upb65fo-01c3158a{0%{translate:0 0}to{translate:0 -8px}}
|
package/dist/assets/index8.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
.b-card[data-v-17b60dc8]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-card-background-color);border:var(--b-card-border-width) solid var(--b-card-border-color);border-radius:var(--b-card-border-radius);display:flex;flex-direction:column}.b-card[data-v-17b60dc8],.b-card[data-v-17b60dc8]:before,.b-card[data-v-17b60dc8]:after{box-sizing:border-box}.b-card *[data-v-17b60dc8],.b-card *[data-v-17b60dc8]:before,.b-card *[data-v-17b60dc8]:after{box-sizing:border-box}.b-card[data-v-17b60dc8] ::-webkit-scrollbar{height:14px;width:14px}.b-card[data-v-17b60dc8] ::-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-card--secondary[data-v-17b60dc8]{background-color:var(--b-card-secondary-background-color)}.b-legacy-theme .b-card--secondary[data-v-17b60dc8]{border-color:var(--b-card-secondary-border-color)}@media (hover: hover){.b-card--secondary.b-card--expandable:not(.b-card--disabled) .b-card__header[data-v-17b60dc8]:hover{background-color:var(--b-card-secondary-header-hover-background-color)}}.b-card--secondary.b-card--expandable:not(.b-card--disabled) .b-card__header[data-v-17b60dc8]:focus-visible{background-color:var(--b-card-secondary-header-focus-background-color)}.b-card--secondary.b-card--expandable:not(.b-card--disabled) .b-card__header[data-v-17b60dc8]:active{background-color:var(--b-card-secondary-header-active-background-color)}@media (hover: hover){.b-card--expandable:not(.b-card--disabled) .b-card__header[data-v-17b60dc8]:hover{background-color:var(--b-card-header-hover-background-color)}}.b-card--expandable:not(.b-card--disabled) .b-card__header[data-v-17b60dc8]:focus-visible{animation:outer-ring-default-17b60dc8 var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color);background-color:var(--b-card-header-focus-background-color);outline:none}@keyframes outer-ring-default-17b60dc8{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-card--expandable:not(.b-card--disabled) .b-card__header[data-v-17b60dc8]:active{background-color:var(--b-card-header-active-background-color)}.b-card--expandable .b-card__header[data-v-17b60dc8]{cursor:pointer}.b-card--expandable .b-card__header[data-v-17b60dc8]:focus-visible{outline:none}.b-card--expandable .b-card__description[data-v-17b60dc8]{margin-left:var(--b-card-description-margin-left)}.b-card--expandable .b-card__body[data-v-17b60dc8]{background-color:var(--b-card-header-margin-top)}.b-card--disabled .b-card__header[data-v-17b60dc8]{color:var(--b-card-disabled-color);cursor:not-allowed}.b-card__wrapper[data-v-17b60dc8]{display:flex;flex:1;flex-direction:column}.b-card__image[data-v-17b60dc8]{border-top-left-radius:var(--b-card-border-radius);border-top-right-radius:var(--b-card-border-radius);overflow:hidden}.b-card__image[data-v-17b60dc8] img{width:100%}.b-card__header[data-v-17b60dc8]{border-radius:var(--b-card-header-border-radius);color:var(--b-card-header-color);display:flex;gap:18px;padding:var(--b-card-header-padding)}.b-card__header--expandable[data-v-17b60dc8]{padding-bottom:var(--b-card-expandable-header-padding-bottom)}.b-card__header--without-body[data-v-17b60dc8]{padding-bottom:var(--b-card-header-padding-bottom)}.b-card__header-wrapper[data-v-17b60dc8]{display:flex;flex:1;flex-direction:column;gap:var(--b-spacer-020);overflow:hidden}.b-card__header-slot-wrapper[data-v-17b60dc8]{align-items:center;display:flex;gap:var(--b-spacer-070);justify-content:space-between;min-height:36px}.b-card__title-wrapper[data-v-17b60dc8]{display:flex;gap:var(--b-card-title-wrapper-gap)}.b-card__title-wrapper--truncated[data-v-17b60dc8]{overflow:hidden;white-space:nowrap}.b-card__title-wrapper--truncated .b-card__title[data-v-17b60dc8]{overflow:hidden;text-overflow:ellipsis}.b-card__toggle[data-v-17b60dc8]{align-items:center;display:flex;height:var(--b-card-toggle-height)}.b-card__toggle--small-text[data-v-17b60dc8]{height:var(--b-card-toggle-small-text-height)}.b-card__content[data-v-17b60dc8]{flex:1;padding:var(--b-card-content-padding)}.b-card__content--without-header[data-v-17b60dc8]{padding-top:var(--b-card-content-padding-top)}.b-card__content--expandable[data-v-17b60dc8]{padding-top:0}.b-card__description[data-v-17b60dc8]{color:var(--b-card-description-color)}.b-card__body[data-v-17b60dc8]{display:flex;flex:1;flex-direction:column;gap:16px;margin-top:-4px;padding:var(--b-card-body-padding)}.b-card__body--without-header[data-v-17b60dc8]{padding-top:var(--b-card-body-padding-top)}.b-card__body--expandable[data-v-17b60dc8]{padding-top:var(--b-card-body-expandable-padding-top)}.b-card__actions[data-v-17b60dc8]{margin-top:auto}.b-card__actions--without-content[data-v-17b60dc8]{padding-top:var(--b-card-actions-padding-top)}.b-card__actions--without-content .b-card__header[data-v-17b60dc8]{padding-bottom:var(--b-card-header-padding-bottom)}.b-card__actions--without-content-and-with-header[data-v-17b60dc8]{padding-top:var(--b-card-actions-without-content-padding-top)}.b-card__animation-enter-active[data-v-17b60dc8]{animation:fade-in-upb65fy-17b60dc8 var(--b-card-animation-duration) var(--b-animation-easing-linear),enter-upb65fy-17b60dc8 var(--b-card-animation-duration) var(--b-animation-easing-enter),scale-up-upb65fy-17b60dc8 var(--b-card-animation-duration) var(--b-animation-easing-linear);overflow:hidden;transition:max-height var(--b-card-animation-duration) var(--b-card-animation-easing)}@keyframes fade-in-upb65fy-17b60dc8{0%{opacity:0}to{opacity:1}}@keyframes scale-up-upb65fy-17b60dc8{0%{scale:1}to{scale:1}}@keyframes enter-upb65fy-17b60dc8{0%{translate:0 -8px}to{translate:0 0}}.b-card__animation-leave-active[data-v-17b60dc8]{animation:fade-out-upb65fz-17b60dc8 var(--b-card-animation-duration) var(--b-animation-easing-linear),exit-upb65fz-17b60dc8 var(--b-card-animation-duration) var(--b-animation-easing-exit),scale-down-upb65fz-17b60dc8 var(--b-card-animation-duration) var(--b-animation-easing-linear);max-height:0!important;overflow:hidden;transition:max-height var(--b-card-animation-duration) var(--b-card-animation-easing)}@keyframes fade-out-upb65fz-17b60dc8{0%{opacity:1}to{opacity:0}}@keyframes scale-down-upb65fz-17b60dc8{0%{scale:1}to{scale:1}}@keyframes exit-upb65fz-17b60dc8{0%{translate:0 0}to{translate:0 -8px}}
|
package/dist/assets/index9.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.b-
|
|
1
|
+
.b-checkbox-group[data-v-9e93a4d5]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-checkbox-group[data-v-9e93a4d5],.b-checkbox-group[data-v-9e93a4d5]:before,.b-checkbox-group[data-v-9e93a4d5]:after{box-sizing:border-box}.b-checkbox-group *[data-v-9e93a4d5],.b-checkbox-group *[data-v-9e93a4d5]:before,.b-checkbox-group *[data-v-9e93a4d5]:after{box-sizing:border-box}.b-checkbox-group[data-v-9e93a4d5] ::-webkit-scrollbar{height:14px;width:14px}.b-checkbox-group[data-v-9e93a4d5] ::-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-checkbox-group__checkboxes[data-v-9e93a4d5]{display:flex;flex-direction:column;gap:var(--b-checkbox-group-checkboxes-vertical-gap)}.b-checkbox-group__checkboxes--horizontal[data-v-9e93a4d5]{flex-flow:row wrap;gap:var(--b-checkbox-group-checkboxes-vertical-gap) var(--b-checkbox-group-checkboxes-horizontal-gap)}.b-checkbox-group__error-message[data-v-9e93a4d5]{margin-top:var(--b-checkbox-group-error-message-margin-top)}
|
package/dist/avatar-image.js
CHANGED
package/dist/button.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { a as s } from "./chunks/button.
|
|
2
|
-
import { b as P, B as S } from "./chunks/button.
|
|
3
|
-
import { B as I, c as K, a as h, b as z } from "./chunks/button-actions.
|
|
4
|
-
import { B as F, a as N } from "./chunks/loading-button.
|
|
1
|
+
import { a as s } from "./chunks/button.8738aa07.js";
|
|
2
|
+
import { b as P, B as S } from "./chunks/button.8738aa07.js";
|
|
3
|
+
import { B as I, c as K, a as h, b as z } from "./chunks/button-actions.0ed5f462.js";
|
|
4
|
+
import { B as F, a as N } from "./chunks/loading-button.c7b30923.js";
|
|
5
5
|
import { defineComponent as u, computed as d, useSlots as i } from "vue";
|
|
6
6
|
import "./chunks/index.4c062058.js";
|
|
7
7
|
import { n as c } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
|
|
8
|
-
import "./assets/
|
|
8
|
+
import "./assets/index3.css";
|
|
9
9
|
const _ = {}, g = /* @__PURE__ */ u({
|
|
10
10
|
..._,
|
|
11
11
|
__name: "toggle-button",
|
package/dist/card.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { defineComponent as T, ref as h, watch as p, computed as n } from "vue";
|
|
2
|
-
import { B as H } from "./chunks/index.
|
|
3
|
-
import { a as I, C as D } from "./chunks/chevron-up.
|
|
2
|
+
import { B as H } from "./chunks/index.f64eee15.js";
|
|
3
|
+
import { a as I, C as D } from "./chunks/chevron-up.52aea493.js";
|
|
4
4
|
import { u as M } from "./chunks/use-has-slot.fbeb19ec.js";
|
|
5
5
|
import { g as O } from "./chunks/unique-id.a2a2b458.js";
|
|
6
6
|
import { u as U } from "./chunks/i18n.eb5b985b.js";
|
|
7
7
|
import { o as z } from "./chunks/resize.a041304d.js";
|
|
8
8
|
import { u as R } from "./chunks/use-expandable-content-height.62fc84e5.js";
|
|
9
|
-
import { B as W, c as y } from "./chunks/button-actions.
|
|
9
|
+
import { B as W, c as y } from "./chunks/button-actions.0ed5f462.js";
|
|
10
10
|
import { n as F } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
|
|
11
|
-
import "./assets/
|
|
11
|
+
import "./assets/index8.css";
|
|
12
12
|
var u = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e))(u || {}), i = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.SMALL = "small", e))(i || {});
|
|
13
13
|
const N = {
|
|
14
14
|
"en-US": {
|
package/dist/checkbox.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { B as y, a as l } from "./chunks/checkbox.
|
|
2
|
-
import { C as D } from "./chunks/checkbox.
|
|
1
|
+
import { B as y, a as l } from "./chunks/checkbox.4f4e8f67.js";
|
|
2
|
+
import { C as D } from "./chunks/checkbox.4f4e8f67.js";
|
|
3
3
|
import { defineComponent as g, toRef as v, computed as n, watch as c, ref as x } from "vue";
|
|
4
4
|
import { g as E } from "./chunks/unique-id.a2a2b458.js";
|
|
5
|
-
import { d as k } from "./chunks/index.
|
|
5
|
+
import { d as k } from "./chunks/index.f64eee15.js";
|
|
6
6
|
import { u as C } from "./chunks/use-form-layout-loading.d03e5d48.js";
|
|
7
|
-
import { C as S } from "./chunks/controls-group.
|
|
8
|
-
import { E as M } from "./chunks/error-message.
|
|
7
|
+
import { C as S } from "./chunks/controls-group.0e3d1fc5.js";
|
|
8
|
+
import { E as M } from "./chunks/error-message.775f9114.js";
|
|
9
9
|
import { n as I } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
|
|
10
|
-
import "./assets/
|
|
10
|
+
import "./assets/index9.css";
|
|
11
11
|
var s = /* @__PURE__ */ ((r) => (r.HORIZONTAL = "horizontal", r.VERTICAL = "vertical", r))(s || {});
|
|
12
12
|
const p = "bento-checkbox-group", T = g({
|
|
13
13
|
name: p,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { n as r } from "./_plugin-vue2_normalizer.71e2aa87.js";
|
|
2
|
-
import "../assets/
|
|
2
|
+
import "../assets/checkmark-circle-fill.css";
|
|
3
3
|
let e = 0;
|
|
4
4
|
const n = {
|
|
5
5
|
beforeCreate() {
|
|
@@ -23,4 +23,4 @@ const c = a.exports;
|
|
|
23
23
|
export {
|
|
24
24
|
c as A
|
|
25
25
|
};
|
|
26
|
-
//# sourceMappingURL=arrow-left.
|
|
26
|
+
//# sourceMappingURL=arrow-left.93ae08f5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow-left.
|
|
1
|
+
{"version":3,"file":"arrow-left.93ae08f5.js","sources":["../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/arrow-left.vue"],"sourcesContent":["\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M3.80655 7.25434L8.06077 3.00011L7.00011 1.93945L0.939453 8.00011L7.00011 14.0608L8.06077 13.0001L3.81499 8.75433L14.7508 8.74316L14.7492 7.24316L3.80655 7.25434Z\"/></svg>\n</template>\n<script>\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n<style>\n @import '../css/main.css';\n</style>\n"],"names":["uuid","_sfc_main"],"mappings":";;AAKA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent as b, computed as r, ref as _ } from "vue";
|
|
2
|
-
import { B as d } from "./index.
|
|
2
|
+
import { B as d } from "./index.f64eee15.js";
|
|
3
3
|
import { u as f } from "./use-has-slot.fbeb19ec.js";
|
|
4
4
|
import { n as p } from "./_plugin-vue2_normalizer.71e2aa87.js";
|
|
5
5
|
import "../assets/base-button.css";
|
|
@@ -85,4 +85,4 @@ export {
|
|
|
85
85
|
U as B,
|
|
86
86
|
s as a
|
|
87
87
|
};
|
|
88
|
-
//# sourceMappingURL=base-button.
|
|
88
|
+
//# sourceMappingURL=base-button.2abda566.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-button.
|
|
1
|
+
{"version":3,"file":"base-button.2abda566.js","sources":["../../src/components/internal/base-button/base-button.types.ts","../../src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n DESTRUCTIVE = 'critical',\n ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n BLUR = 'blur',\n CLICK = 'click',\n FOCUS = 'focus',\n KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n BUTTON = 'button',\n RESET = 'reset',\n SUBMIT = 'submit',\n}\n","<template>\n <button\n ref=\"bentoBaseButtonRef\"\n class=\"b-base-button\"\n :class=\"conditionalClasses\"\n :disabled=\"disabled\"\n :type=\"type\"\n :aria-expanded=\"ariaAttributes['aria-expanded']\"\n @click=\"onClickButton\"\n @focus=\"onFocusButton\"\n @blur=\"onBlurButton\"\n >\n <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n <slot name=\"iconLeft\" />\n </span>\n <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n <slot />\n </bento-typography>\n <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n <slot name=\"iconRight\" />\n </span>\n </button>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType, ref } from 'vue';\n import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n import type { ButtonHTMLAttributes } from 'vue/types/jsx';\n import { BentoTypography } from '@/components/typography';\n import { useHasSlot } from '@/composables';\n import { Booleanish } from '@/types';\n\n /**\n * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n *\n * * @example\n * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n *\n * export default {\n * components: { BaseButton, YourImportedIcon },\n * props: {\n * text:\n * },\n * template: `\n * <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n * <template #iconLeft><your-imported-icon></template>\n * Button text\n * <template #iconRight><your-imported-icon></template>\n * </base-button>\n * `,\n * emits: [BentoButtonEvent.CLICK],\n * setup: (prps, { emit }) => {\n * const onClick = value => emit(BaseButtonEvent.CLICK, value);\n *\n * return {\n * onClick,\n * };\n * }\n * }\n */\n export default defineComponent({\n name: 'base-button',\n components: { BentoTypography },\n props: {\n /**\n * Disables button functionality\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n /**\n * Displays button as critical\n */\n critical: {\n type: Boolean,\n default: false,\n },\n /**\n * The default behavior of the button.\n * Possible values are: 'button', 'reset', 'submit'\n */\n type: {\n type: String as PropType<ButtonHTMLAttributes['type']>,\n default: 'button',\n },\n },\n emits: [\n BentoBaseButtonEvent.CLICK,\n BentoBaseButtonEvent.FOCUS,\n BentoBaseButtonEvent.BLUR,\n BentoBaseButtonEvent.KEYDOWN_ESC,\n ],\n setup(props, { slots, emit, attrs }) {\n const ariaAttributes = computed(() => ({\n 'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n }));\n\n const bentoBaseButtonRef = ref(null);\n\n const conditionalClasses = computed(() => ({\n [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n }));\n\n const onClickButton = (e: MouseEvent) => {\n if (!props.disabled) {\n emit(BentoBaseButtonEvent.CLICK, e);\n } else {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const onFocusButton = (e: FocusEvent) => {\n emit(BentoBaseButtonEvent.FOCUS, e);\n };\n\n const onBlurButton = (e: FocusEvent) => {\n emit(BentoBaseButtonEvent.BLUR, e);\n };\n\n return {\n // Values\n ariaAttributes,\n conditionalClasses,\n\n // Methods\n onClickButton,\n onFocusButton,\n onBlurButton,\n hasSlot: useHasSlot(slots),\n\n // Refs\n bentoBaseButtonRef,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","e","useHasSlot"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACwDZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,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,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACAJ,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAZ,EAAA,aAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,WAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AAoBA,WAAA;AAAA;AAAA,MAAA,gBAAAG;AAAA,MAEA,oBAAAK;AAAA;AAAA,MACA,eApBA,CAAAC,MAAA;AACA,QAAAV,EAAA,YAGAU,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAIA;AAAA,MAiBA,eAdA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAAA;AAAA,MAcA,cAXA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,MAAAe,CAAA;AAAA,MAAA;AAAA,MAWA,SAAAC,EAAAV,CAAA;AAAA;AAAA,MACA,oBAAAM;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}
|
|
@@ -1,26 +1,25 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { B as
|
|
3
|
-
import { a as
|
|
4
|
-
import { B as
|
|
5
|
-
import { B as q } from "./index.302e9cf2.js";
|
|
1
|
+
import { defineComponent as E, useSlots as w, useAttrs as N, ref as O, computed as i, watch as S, onMounted as F, provide as x } from "vue";
|
|
2
|
+
import { B as U } from "./index.f64eee15.js";
|
|
3
|
+
import { a as z } from "./button.8738aa07.js";
|
|
4
|
+
import { B as q } from "./index.096f3429.js";
|
|
6
5
|
import { u as W } from "./use-has-slot.fbeb19ec.js";
|
|
7
|
-
import { u as
|
|
8
|
-
import { M as
|
|
9
|
-
import { g as
|
|
10
|
-
import { C as J } from "./cross.
|
|
6
|
+
import { u as H } from "./i18n.eb5b985b.js";
|
|
7
|
+
import { M as K } from "./base-modal.keys.b08a6bdf.js";
|
|
8
|
+
import { g as Y } from "./unique-id.a2a2b458.js";
|
|
9
|
+
import { C as J } from "./cross.eaaaf355.js";
|
|
11
10
|
import { G as Q, a as j } from "./grid-layout.e0025286.js";
|
|
12
11
|
import { n as X } from "./_plugin-vue2_normalizer.71e2aa87.js";
|
|
13
12
|
import "../assets/base-modal.css";
|
|
14
|
-
var Z = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.DIALOG = "dialog", a))(Z || {}), $ = /* @__PURE__ */ ((a) => (a.DEFAULT = "BentoModalDefault", a.DIALOG = "BentoModalDialog", a))($ || {}),
|
|
13
|
+
var Z = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.DIALOG = "dialog", a))(Z || {}), $ = /* @__PURE__ */ ((a) => (a.DEFAULT = "BentoModalDefault", a.DIALOG = "BentoModalDialog", a))($ || {}), b = /* @__PURE__ */ ((a) => (a.SMALL = "small", a.MEDIUM = "medium", a.LARGE = "large", a))(b || {}), m = /* @__PURE__ */ ((a) => (a.SMALLER = "smaller", a.EQUAL = "equal", a.BIGGER = "bigger", a))(m || {}), _ = /* @__PURE__ */ ((a) => (a.DIALOG = "dialog", a.ALERT_DIALOG = "alertdialog", a))(_ || {}), V = /* @__PURE__ */ ((a) => (a.CONFIRMATION = "confirmation", a.DESTRUCTIVE = "destructive", a.INFO = "info", a.ACKNOWLEDGEMENT = "acknowledgement", a))(V || {}), tt = /* @__PURE__ */ ((a) => (a.CLOSE_MODAL = "close-modal", a))(tt || {});
|
|
15
14
|
const at = {
|
|
16
15
|
"en-US": {
|
|
17
16
|
ariaLabelFallback: "modal",
|
|
18
17
|
close: "Close"
|
|
19
18
|
}
|
|
20
|
-
}, et =
|
|
19
|
+
}, et = E({
|
|
21
20
|
i18n: { messages: at },
|
|
22
21
|
name: "base-modal"
|
|
23
|
-
}), ot = /* @__PURE__ */
|
|
22
|
+
}), ot = /* @__PURE__ */ E({
|
|
24
23
|
...et,
|
|
25
24
|
props: {
|
|
26
25
|
/**
|
|
@@ -91,7 +90,7 @@ const at = {
|
|
|
91
90
|
*/
|
|
92
91
|
size: {
|
|
93
92
|
type: String,
|
|
94
|
-
default:
|
|
93
|
+
default: b.SMALL
|
|
95
94
|
},
|
|
96
95
|
/**
|
|
97
96
|
* If provided, renders the modal's content in a two-column layout an wth dividers separating its content
|
|
@@ -100,7 +99,7 @@ const at = {
|
|
|
100
99
|
},
|
|
101
100
|
emits: ["close-modal"],
|
|
102
101
|
setup(a, { expose: e, emit: o }) {
|
|
103
|
-
const t = a, n = 500, { t:
|
|
102
|
+
const t = a, n = 500, C = 26, { t: y } = H(), L = w(), v = N(), d = W(L), r = O(null), c = O(!1), A = Y("modal"), I = i(() => t.isDismissible && !t.hideCloseButton), B = i(() => {
|
|
104
103
|
if (!t.customPadding)
|
|
105
104
|
return {};
|
|
106
105
|
const s = {
|
|
@@ -108,27 +107,33 @@ const at = {
|
|
|
108
107
|
paddingRight: t.customPadding
|
|
109
108
|
}, l = { ...s, paddingTop: void 0, paddingBottom: void 0 };
|
|
110
109
|
return d("default") || (l.paddingTop = t.customPadding), d("actions") || (l.paddingBottom = t.customPadding), {
|
|
111
|
-
header: {
|
|
110
|
+
header: {
|
|
111
|
+
...s,
|
|
112
|
+
paddingTop: t.customPadding,
|
|
113
|
+
flex: 0,
|
|
114
|
+
paddingRight: `${parseInt(t.customPadding, 10) + C}px`
|
|
115
|
+
},
|
|
112
116
|
content: l,
|
|
117
|
+
closeButton: { top: t.customPadding, right: t.customPadding },
|
|
113
118
|
actions: { ...s, paddingBottom: t.customPadding }
|
|
114
119
|
};
|
|
115
|
-
}),
|
|
120
|
+
}), D = i(() => v["aria-label"] ?? y("ariaLabelFallback")), p = i(() => t.withColumnLayout && t.size === b.LARGE), f = () => {
|
|
116
121
|
r.value.showModal();
|
|
117
|
-
},
|
|
122
|
+
}, h = () => {
|
|
118
123
|
o("close-modal");
|
|
119
|
-
},
|
|
120
|
-
c.value && (r.value.close(),
|
|
124
|
+
}, T = () => {
|
|
125
|
+
c.value && (r.value.close(), h(), c.value = !1);
|
|
121
126
|
}, u = () => {
|
|
122
127
|
r.value.open && (c.value = !0);
|
|
123
|
-
},
|
|
128
|
+
}, g = (s) => {
|
|
124
129
|
s && s.preventDefault(), !(!t.isDismissible && t.modalRole === _.DIALOG) && u();
|
|
125
130
|
}, G = ({ target: s }) => {
|
|
126
|
-
s && s.tagName === _.DIALOG.toUpperCase() &&
|
|
131
|
+
s && s.tagName === _.DIALOG.toUpperCase() && g();
|
|
127
132
|
}, M = i(() => ({
|
|
128
133
|
[`b-modal-base__container--${t.size}`]: t.size,
|
|
129
134
|
"b-modal-base__container--hide": c.value,
|
|
130
135
|
"b-modal-base__container--column-layout": p.value
|
|
131
|
-
})),
|
|
136
|
+
})), P = i(() => ({
|
|
132
137
|
"b-modal-base__content--column-layout": p.value,
|
|
133
138
|
"b-modal-base__content--with-header": d("default"),
|
|
134
139
|
"b-modal-base__content--with-actions": d("actions")
|
|
@@ -142,14 +147,14 @@ const at = {
|
|
|
142
147
|
{ small: 6, medium: 6, large: 6 },
|
|
143
148
|
{ small: 6, medium: 6, large: 6 }
|
|
144
149
|
]);
|
|
145
|
-
return
|
|
150
|
+
return S(
|
|
146
151
|
() => [t.isOpen, r.value],
|
|
147
152
|
([s, l], [, k]) => {
|
|
148
153
|
if (!l)
|
|
149
154
|
return;
|
|
150
155
|
s ? f() : !k || u();
|
|
151
156
|
}
|
|
152
|
-
),
|
|
157
|
+
), S(
|
|
153
158
|
() => t.actions,
|
|
154
159
|
() => {
|
|
155
160
|
var s, l;
|
|
@@ -159,8 +164,8 @@ const at = {
|
|
|
159
164
|
), F(() => {
|
|
160
165
|
t.isOpen && r.value && f();
|
|
161
166
|
}), e({
|
|
162
|
-
internalModalActionClose:
|
|
163
|
-
}),
|
|
167
|
+
internalModalActionClose: g
|
|
168
|
+
}), x(K, A), { __sfc: !0, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME: n, CLOSE_BUTTON_ICON_WIDTH: C, t: y, slots: L, attrs: v, hasSlot: d, modal: r, isClosing: c, modalId: A, emit: o, props: t, showCloseButton: I, customPaddingStyles: B, computedAriaLabel: D, hasColumnLayout: p, openModal: f, emitCloseEvent: h, closeModalAfterAnimation: T, startCloseModalAnimation: u, internalModalActionClose: g, closeModalOnClickOutside: G, modalConditionalClasses: M, modalContentConditionalClasses: P, computedColumnWidth: R, BentoTypography: U, BentoButton: z, BentoFocusTrap: q, GridLayout: Q, GridLayoutContainerType: j, CrossIcon: J };
|
|
164
169
|
}
|
|
165
170
|
});
|
|
166
171
|
var st = function() {
|
|
@@ -169,30 +174,30 @@ var st = function() {
|
|
|
169
174
|
e.isDismissible && t.closeModalOnClickOutside(n);
|
|
170
175
|
}, keydown: function(n) {
|
|
171
176
|
return !n.type.indexOf("key") && e._k(n.keyCode, "esc", 27, n.key, ["Esc", "Escape"]) ? null : t.internalModalActionClose.apply(null, arguments);
|
|
172
|
-
} } }, [e.isOpen || e.initiallyOpen ? o(t.BentoFocusTrap, [o("div", { staticClass: "b-modal-base__wrapper" }, [t.hasSlot("default") || t.showCloseButton ? o("div", { staticClass: "b-modal-base__header-container", style: t.customPaddingStyles.header }, [o("div", { staticClass: "b-modal-base__header" }, [o(t.BentoTypography, { staticClass: "b-modal-base__title", attrs: { "aria-label": "base modal title", el: "span", variant: "title", stronger: "" } }, [t.hasSlot("default") ? e._t("default") : e._e()], 2)
|
|
177
|
+
} } }, [e.isOpen || e.initiallyOpen ? o(t.BentoFocusTrap, [t.showCloseButton ? o(t.BentoButton, { staticClass: "b-modal-base__close-button", style: t.customPaddingStyles.closeButton, attrs: { variant: "tertiary", type: "button" }, on: { click: t.internalModalActionClose } }, [o(t.CrossIcon, { attrs: { "svg-title": t.t("close") } })], 1) : e._e(), o("div", { staticClass: "b-modal-base__wrapper" }, [t.hasSlot("default") || t.showCloseButton ? o("div", { staticClass: "b-modal-base__header-container", style: t.customPaddingStyles.header }, [o("div", { staticClass: "b-modal-base__header" }, [o(t.BentoTypography, { staticClass: "b-modal-base__title", attrs: { "aria-label": "base modal title", el: "span", variant: "title", stronger: "" } }, [t.hasSlot("default") ? e._t("default") : e._e()], 2)], 1)]) : e._e(), o("div", { staticClass: "b-modal-base__content", class: t.modalContentConditionalClasses, style: t.customPaddingStyles.content }, [t.hasSlot("content") || t.hasSlot("content-col-1") && t.hasSlot("content-col-2") ? o(t.BentoTypography, { attrs: { "aria-label": "base modal content", el: "div", variant: "body", stronger: "" } }, [t.hasColumnLayout ? o(t.GridLayout, { staticClass: "b-modal-base__grid", attrs: { "column-width": t.computedColumnWidth, "container-type": t.GridLayoutContainerType.NORMAL, "no-gap": "" }, scopedSlots: e._u([{ key: "col-1", fn: function() {
|
|
173
178
|
return [e._t("content-col-1")];
|
|
174
179
|
}, proxy: !0 }, { key: "col-2", fn: function() {
|
|
175
180
|
return [e._t("content-col-2")];
|
|
176
|
-
}, proxy: !0 }], null, !0) }) : e._t("content")], 2) : e._e()], 1), t.hasSlot("actions") ? o("div", { staticClass: "b-modal-base__actions-container", style: t.customPaddingStyles.actions }, [
|
|
181
|
+
}, proxy: !0 }], null, !0) }) : e._t("content")], 2) : e._e()], 1), t.hasSlot("actions") ? o("div", { staticClass: "b-modal-base__actions-container", style: t.customPaddingStyles.actions }, [o("div", { staticClass: "b-modal-base__actions", attrs: { "aria-label": "modal actions" } }, [e._t("actions")], 2)]) : e._e()])], 1) : e._e()], 1)]);
|
|
177
182
|
}, nt = [], lt = /* @__PURE__ */ X(
|
|
178
183
|
ot,
|
|
179
184
|
st,
|
|
180
185
|
nt,
|
|
181
186
|
!1,
|
|
182
187
|
null,
|
|
183
|
-
"
|
|
188
|
+
"5f27120d",
|
|
184
189
|
null,
|
|
185
190
|
null
|
|
186
191
|
);
|
|
187
|
-
const
|
|
192
|
+
const yt = lt.exports;
|
|
188
193
|
export {
|
|
189
194
|
Z as B,
|
|
190
195
|
$ as a,
|
|
191
|
-
|
|
196
|
+
b,
|
|
192
197
|
m as c,
|
|
193
198
|
_ as d,
|
|
194
199
|
V as e,
|
|
195
200
|
tt as f,
|
|
196
|
-
|
|
201
|
+
yt as g
|
|
197
202
|
};
|
|
198
|
-
//# sourceMappingURL=base-modal.
|
|
203
|
+
//# sourceMappingURL=base-modal.9d4f6201.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base-modal.9d4f6201.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 = 'default',\n DIALOG = 'dialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariantMapping {\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 :id=\"modalId\"\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 v-if=\"isOpen || initiallyOpen\">\n <bento-button\n v-if=\"showCloseButton\"\n class=\"b-modal-base__close-button\"\n variant=\"tertiary\"\n type=\"button\"\n :style=\"customPaddingStyles.closeButton\"\n @click=\"internalModalActionClose\"\n >\n <cross-icon :svg-title=\"t('close')\" />\n </bento-button>\n <div class=\"b-modal-base__wrapper\">\n <div\n v-if=\"hasSlot('default') || showCloseButton\"\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 </div>\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 no-gap\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 <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 setup lang=\"ts\">\n import { computed, defineComponent, onMounted, PropType, provide, ref, useAttrs, useSlots, watch } from 'vue';\n import { BentoModalColumnLayoutVariant, BentoModalRole, BentoModalSize } from '@/components/modal/modal.types';\n import { BentoTypography } from '@/components/typography';\n import { BentoButton, BentoButtonActionsList } from '@/components/button';\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 { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys';\n import { generateUid } from '@/utils/ts/unique-id';\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 const CLOSE_BUTTON_ICON_WIDTH = 26;\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const slots = useSlots();\n const attrs = useAttrs();\n const hasSlot = useHasSlot(slots);\n const modal = ref<HTMLDialogElement>(null);\n const isClosing = ref(false);\n const modalId = generateUid('modal');\n\n const emit = defineEmits<{\n /**\n * Emitted when the modal is closed.\n */\n (e: 'close-modal');\n }>();\n\n const props = defineProps({\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 * 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\n const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton);\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: {\n ...xPadding,\n paddingTop: props.customPadding,\n flex: 0,\n paddingRight: `${parseInt(props.customPadding, 10) + CLOSE_BUTTON_ICON_WIDTH}px`,\n },\n content,\n closeButton: { top: props.customPadding, right: props.customPadding },\n actions: { ...xPadding, paddingBottom: props.customPadding },\n };\n });\n\n const computedAriaLabel = computed(() => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string));\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('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 /**\n * If the user has pressed escape, clicked outside or clicked the close icon.\n * Needs to be called from outside, following the \"dialog.close()\" pattern,\n * when the closing event is triggered outside of the \"base-modal\"\n * component (e.g. from a closing action).\n */\n const internalModalActionClose = (event?: Event) => {\n if (event) {\n event.preventDefault();\n }\n if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) {\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--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 [\n { small: 4, medium: 4, large: 4 },\n { small: 8, medium: 8, large: 8 },\n ];\n }\n if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n return [\n { small: 8, medium: 8, large: 8 },\n { small: 4, medium: 4, large: 4 },\n ];\n }\n return [\n { small: 6, medium: 6, large: 6 },\n { small: 6, medium: 6, large: 6 },\n ];\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 /**\n * Expose methods through its 'ref'\n */\n defineExpose({\n internalModalActionClose,\n });\n\n // Let's Children components know they are inside a Modal (dialog element)\n provide(MODAL_DIALOG_ID_INJECTION_KEY, modalId);\n</script>\n\n<script lang=\"ts\">\n /**\n * Dialog container. It creates a dialog HTML element for the modal to use.\n *\n * @example\n * import BaseModal from './components/base-modal/base-modal.vue';\n *\n * export default {\n * components: { BaseModal },\n * template: `\n * <base-modal\n * :hide-close-button=\"true\"\n * :is-dismissible=\"false\"\n * :is-open=\"isOpen\"\n * @close-modal=\"isOpen = false\"\n * >\n * <template #content-col-1>\n * // Content on the left side column\n * </template>\n *\n * <template #content-col-2>\n * // Content on the right side column\n * </template>\n *\n * <template v-if=\"actions\" #actions>\n * <footer-actions :actions=\"actions\" />\n * </template>\n * </base-modal>\n * `,\n * setup() {\n * const isOpen = ref(true)\n * const footerActions = [{\n * title: 'Primary action',\n * event: () => { ... }\n * }]\n * }\n * }\n */\n export default defineComponent({\n i18n: { messages },\n name: 'base-modal',\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalVariantMapping","BentoModalVariantMapping2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","__default__","defineComponent","messages","LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME","CLOSE_BUTTON_ICON_WIDTH","t","useI18n","slots","useSlots","attrs","useAttrs","hasSlot","useHasSlot","modal","ref","isClosing","modalId","generateUid","showCloseButton","computed","props","customPaddingStyles","xPadding","content","computedAriaLabel","hasColumnLayout","openModal","emitCloseEvent","emit","closeModalAfterAnimation","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","target","modalConditionalClasses","modalContentConditionalClasses","computedColumnWidth","watch","newIsOpen","newModalValue","oldModalValue","_b","_a","onMounted","expose","provide","MODAL_DIALOG_ID_INJECTION_KEY"],"mappings":"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"}
|
package/dist/chunks/{button-actions-with-menu.a38327c2.js → button-actions-with-menu.db38aa1d.js}
RENAMED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { defineComponent as a, computed as i, toRef as r, provide as u } from "vue";
|
|
2
|
-
import { M as d, B as p } from "./index.
|
|
3
|
-
import { B as _ } from "./index.
|
|
4
|
-
import { B as l } from "./button-actions.
|
|
2
|
+
import { M as d, B as p } from "./index.efda8afc.js";
|
|
3
|
+
import { B as _ } from "./index.4c011bf9.js";
|
|
4
|
+
import { B as l } from "./button-actions.0ed5f462.js";
|
|
5
5
|
import { n as m } from "./_plugin-vue2_normalizer.71e2aa87.js";
|
|
6
6
|
import "../assets/button-actions-with-menu.css";
|
|
7
7
|
const f = {}, v = /* @__PURE__ */ a({
|
|
@@ -102,4 +102,4 @@ const C = B.exports;
|
|
|
102
102
|
export {
|
|
103
103
|
C as B
|
|
104
104
|
};
|
|
105
|
-
//# sourceMappingURL=button-actions-with-menu.
|
|
105
|
+
//# sourceMappingURL=button-actions-with-menu.db38aa1d.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-actions-with-menu.
|
|
1
|
+
{"version":3,"file":"button-actions-with-menu.db38aa1d.js","sources":["../../src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["<template>\n <div class=\"b-button-actions-with-menu\">\n <div role=\"group\" class=\"b-button-actions-with-menu__container-wrapper\">\n <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" />\n <bento-menu v-if=\"computedMenuActions.length\" :data=\"computedMenuActions\" :menu-position=\"menuPosition\" />\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, PropType, provide, toRef } from 'vue';\n import BentoMenu from '@/components/menu/menu.vue';\n import { BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n import { BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n import { BentoPopoverPositions } from '@/components/popover';\n\n /**\n * An internal button actions component with the option to display some of the actions in a menu.\n *\n * @example\n * <button-actions-with-menu\n * :actions=\"[\n * title: 'Primary',\n * event: () => { ... },\n * icon: FourPeopleIcon,\n * link: {\n * variant: 'default',\n * external: true,\n * to: 'https://www.adyen.com/'\n * },\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * disabled: true,\n * variant: BentoButtonVariant.PRIMARY,\n * critical: true\n * }]\n * :displayedActions=\"2\"\n * />\n */\n const props = defineProps({\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 *\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` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n *\n * @see BentoButton for a list of all the other props supported by each button action.\n *\n * ```\n * [{\n * title: 'Primary',\n * event: () => { ... },\n * icon: FourPeopleIcon,\n * link: {\n variant: 'default',\n external: true,\n to: 'https://www.adyen.com/'\n },\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * disabled: true,\n * variant: 'primary',\n * critical: true\n * }]\n * ```\n */\n actions: {\n type: Array as PropType<BentoButtonActionsList>,\n required: true,\n },\n\n /**\n * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n */\n displayedActions: {\n type: Number,\n default: undefined,\n },\n\n /**\n * Set inverse color scheme to buttons and menu\n */\n inverse: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The position of where the menu should open.\n */\n menuPosition: {\n type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n default: 'bottom-start',\n validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n },\n });\n\n const computedActions = computed(() => props.actions.slice(0, props.displayedActions));\n const inverseRef = toRef(props, 'inverse');\n\n provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n const computedMenuActions = computed(() =>\n props.displayedActions !== undefined && props.displayedActions < props.actions.length\n ? (props.actions.slice(props.displayedActions, props.actions.length).map(el => ({\n text: el.title,\n handler: el.event,\n icon: el.icon,\n critical: el.critical,\n disabled: el.disabled,\n })) as BentoMenuItem[])\n : []\n );\n</script>\n\n<script lang=\"ts\">\n /**\n * An internal button actions component with the option to display some of the actions in a menu.\n *\n * @example\n * <button-actions-with-menu\n * :actions=\"[\n * title: 'Primary',\n * event: () => { ... },\n * icon: FourPeopleIcon,\n * link: {\n * variant: 'default',\n * external: true,\n * to: 'https://www.adyen.com/'\n * },\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * disabled: true,\n * variant: BentoButtonVariant.PRIMARY,\n * critical: true\n * }]\n * :displayedActions=\"2\"\n * />\n */\n\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["__default__","computedActions","computed","props","inverseRef","toRef","provide","MENU_INVERSE_INJECTION_KEY","computedMenuActions","el"],"mappings":";;;;;;AAwJI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA5CAC,IAAAC,EAAA,MAAAC,EAAA,QAAA,MAAA,GAAAA,EAAA,gBAAA,CAAA,GACAC,IAAAC,EAAAF,GAAA,SAAA;AAEA,IAAAG,EAAAC,GAAAH,CAAA;AAEA,UAAAI,IAAAN;AAAA,MAA4B,MAAAC,EAAA,qBAAA,UAAAA,EAAA,mBAAAA,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAA,EAAA,kBAAAA,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAM,OAAA;AAAA,QAE4D,MAAAA,EAAA;AAAA,QACjE,SAAAA,EAAA;AAAA,QACG,MAAAA,EAAA;AAAA,QACH,UAAAA,EAAA;AAAA,QACI,UAAAA,EAAA;AAAA,MACA,EAAA,IAAA,CAAA;AAAA,IAEhB;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as v, computed as o } from "vue";
|
|
2
|
-
import { a as p } from "./button.
|
|
3
|
-
import { B as f } from "./loading-button.
|
|
2
|
+
import { a as p } from "./button.8738aa07.js";
|
|
3
|
+
import { B as f } from "./loading-button.c7b30923.js";
|
|
4
4
|
import { n as u } from "./_plugin-vue2_normalizer.71e2aa87.js";
|
|
5
5
|
import "../assets/button-actions.css";
|
|
6
6
|
var l = /* @__PURE__ */ ((n) => (n.BUTTONS_END = "buttons-end", n.FILL_CONTAINER = "fill-container", n.SPACE_BETWEEN = "space-between", n.VERTICAL_STACK = "vertical-stack", n))(l || {}), _ = /* @__PURE__ */ ((n) => (n.BUTTONS_START = "buttons-start", n))(_ || {});
|
|
@@ -108,4 +108,4 @@ export {
|
|
|
108
108
|
_ as b,
|
|
109
109
|
c
|
|
110
110
|
};
|
|
111
|
-
//# sourceMappingURL=button-actions.
|
|
111
|
+
//# sourceMappingURL=button-actions.0ed5f462.js.map
|