@adyen/bento-vue2 1.7.0 → 1.7.1
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/accordion.js +2 -2
- package/dist/action-bar.js +4 -4
- package/dist/alert.js +3 -3
- package/dist/assets/base-modal.css +1 -1
- package/dist/assets/index.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/index2.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/index28.css +1 -1
- package/dist/assets/index29.css +1 -1
- package/dist/assets/index3.css +1 -1
- package/dist/assets/index30.css +1 -1
- package/dist/assets/index31.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/index4.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/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/badge.js +1 -1
- package/dist/button.js +5 -5
- package/dist/card.js +1 -1
- package/dist/checkbox.js +6 -6
- package/dist/chunks/{base-button.7886a7e6.js → base-button.9ec79f68.js} +2 -2
- package/dist/chunks/{base-button.7886a7e6.js.map → base-button.9ec79f68.js.map} +1 -1
- package/dist/chunks/{base-modal.88e7b9d4.js → base-modal.ab0f82b2.js} +4 -4
- package/dist/chunks/{base-modal.88e7b9d4.js.map → base-modal.ab0f82b2.js.map} +1 -1
- package/dist/chunks/{button-actions-with-menu.a5413243.js → button-actions-with-menu.9d1365e9.js} +2 -2
- package/dist/chunks/{button-actions-with-menu.a5413243.js.map → button-actions-with-menu.9d1365e9.js.map} +1 -1
- package/dist/chunks/{button.e09d5980.js → button.1dfed6fa.js} +2 -2
- package/dist/chunks/{button.e09d5980.js.map → button.1dfed6fa.js.map} +1 -1
- package/dist/chunks/{calendar.24d0ac04.js → calendar.10c1c697.js} +4 -4
- package/dist/chunks/{calendar.24d0ac04.js.map → calendar.10c1c697.js.map} +1 -1
- package/dist/chunks/{checkbox.5343e28e.js → checkbox.65480106.js} +3 -3
- package/dist/chunks/{checkbox.5343e28e.js.map → checkbox.65480106.js.map} +1 -1
- package/dist/chunks/{controls-group.2a21bd83.js → controls-group.066adff1.js} +2 -2
- package/dist/chunks/{controls-group.2a21bd83.js.map → controls-group.066adff1.js.map} +1 -1
- package/dist/chunks/{copy.346eadb1.js → copy.c41143ac.js} +4 -4
- package/dist/chunks/{copy.346eadb1.js.map → copy.c41143ac.js.map} +1 -1
- package/dist/chunks/{dropdown-default-textbox.25134789.js → dropdown-default-textbox.62feef5c.js} +2 -2
- package/dist/chunks/{dropdown-default-textbox.25134789.js.map → dropdown-default-textbox.62feef5c.js.map} +1 -1
- package/dist/chunks/{dropdown.f1253a54.js → dropdown.805b5c7d.js} +6 -6
- package/dist/chunks/{dropdown.f1253a54.js.map → dropdown.805b5c7d.js.map} +1 -1
- package/dist/chunks/{error-message.8302a46c.js → error-message.a7c6edb2.js} +2 -2
- package/dist/chunks/{error-message.8302a46c.js.map → error-message.a7c6edb2.js.map} +1 -1
- package/dist/chunks/{fixed-scroller.8994e30a.js → fixed-scroller.92574ff8.js} +2 -2
- package/dist/chunks/{fixed-scroller.8994e30a.js.map → fixed-scroller.92574ff8.js.map} +1 -1
- package/dist/chunks/{footer-actions.c9b2cb74.js → footer-actions.55ce06ef.js} +3 -3
- package/dist/chunks/{footer-actions.c9b2cb74.js.map → footer-actions.55ce06ef.js.map} +1 -1
- package/dist/chunks/{index.965ac1af.js → index.4de86bd4.js} +2 -2
- package/dist/chunks/{index.965ac1af.js.map → index.4de86bd4.js.map} +1 -1
- package/dist/chunks/{index.2625175a.js → index.77d9d16d.js} +2 -2
- package/dist/chunks/{index.2625175a.js.map → index.77d9d16d.js.map} +1 -1
- package/dist/chunks/{index.37283390.js → index.9da73645.js} +5 -5
- package/dist/chunks/{index.37283390.js.map → index.9da73645.js.map} +1 -1
- package/dist/chunks/{index.b83f8b7e.js → index.c2dde601.js} +2 -2
- package/dist/chunks/{index.b83f8b7e.js.map → index.c2dde601.js.map} +1 -1
- package/dist/chunks/{index.a201f750.js → index.e1602f79.js} +3 -3
- package/dist/chunks/{index.a201f750.js.map → index.e1602f79.js.map} +1 -1
- package/dist/chunks/{index.e566354f.js → index.e350b173.js} +8 -8
- package/dist/chunks/{index.e566354f.js.map → index.e350b173.js.map} +1 -1
- package/dist/chunks/{index.8ac70774.js → index.eec7f750.js} +3 -3
- package/dist/chunks/{index.8ac70774.js.map → index.eec7f750.js.map} +1 -1
- package/dist/chunks/{index.d6b5f5e1.js → index.f649c9af.js} +6 -6
- package/dist/chunks/{index.d6b5f5e1.js.map → index.f649c9af.js.map} +1 -1
- package/dist/chunks/{listbox-option-tag.6a09e8e2.js → listbox-option-tag.9ddbbdad.js} +3 -3
- package/dist/chunks/{listbox-option-tag.6a09e8e2.js.map → listbox-option-tag.9ddbbdad.js.map} +1 -1
- package/dist/chunks/{listbox.73c38f38.js → listbox.a144a5c8.js} +4 -4
- package/dist/chunks/{listbox.73c38f38.js.map → listbox.a144a5c8.js.map} +1 -1
- package/dist/chunks/{loading-button.c65682d6.js → loading-button.70de254a.js} +2 -2
- package/dist/chunks/{loading-button.c65682d6.js.map → loading-button.70de254a.js.map} +1 -1
- package/dist/chunks/{tooltip.104e5fac.js → tooltip.57d6cc22.js} +3 -3
- package/dist/chunks/{tooltip.104e5fac.js.map → tooltip.57d6cc22.js.map} +1 -1
- package/dist/code-snippet.js +7 -7
- package/dist/country.js +2 -2
- package/dist/currency.js +1 -1
- package/dist/data-grid.js +8 -8
- package/dist/date-picker.js +7 -7
- package/dist/date-range-picker.js +2 -2
- package/dist/date.js +1 -1
- package/dist/divider.js +1 -1
- package/dist/dropdown.js +4 -4
- package/dist/empty-state.js +3 -3
- package/dist/filter-bar.js +13 -13
- package/dist/focus-trap.js +1 -1
- package/dist/form-layout.js +2 -2
- package/dist/header.js +3 -3
- package/dist/index.js +13 -13
- package/dist/info-icon.js +3 -3
- package/dist/input-field.js +4 -4
- package/dist/internal.js +7 -7
- package/dist/link.js +2 -2
- package/dist/loading-indicator.js +1 -1
- package/dist/menu.js +1 -1
- package/dist/modal.js +3 -3
- package/dist/pagination.js +4 -4
- package/dist/payment-method.js +2 -2
- package/dist/popover.js +4 -4
- package/dist/popper-container.js +1 -1
- package/dist/radio-group.js +4 -4
- package/dist/search-bar.js +2 -2
- package/dist/segmented-control.js +3 -3
- package/dist/sidepanel.js +5 -5
- package/dist/status.js +2 -2
- 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 +5 -5
- package/dist/toast.js +3 -3
- package/dist/toggle.js +2 -2
- package/dist/tutorial.js +4 -4
- package/dist/typography.js +1 -1
- package/dist/web-types.json +7 -7
- package/package.json +3 -3
package/dist/assets/index44.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
.b-status[data-v-4eb7001b]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;column-gap:var(--b-status-column-gap);display:flex}.b-status[data-v-4eb7001b],.b-status[data-v-4eb7001b]:before,.b-status[data-v-4eb7001b]:after{box-sizing:border-box}.b-status *[data-v-4eb7001b],.b-status *[data-v-4eb7001b]:before,.b-status *[data-v-4eb7001b]:after{box-sizing:border-box}.b-status[data-v-4eb7001b] ::-webkit-scrollbar{height:14px;width:14px}.b-status[data-v-4eb7001b] ::-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-status__indicator[data-v-4eb7001b]{border-radius:50%;flex-shrink:0;height:var(--b-status-indicator-size);order:0;width:var(--b-status-indicator-size)}.b-status__indicator--blue[data-v-4eb7001b]{background:var(--b-status-indicator-blue-background-color)}.b-status__indicator--green[data-v-4eb7001b]{background:var(--b-status-indicator-green-background-color)}.b-status__indicator--grey[data-v-4eb7001b]{background:var(--b-status-indicator-grey-background-color)}.b-status__indicator--orange[data-v-4eb7001b]{background:var(--b-status-indicator-orange-background-color)}.b-status__indicator--red[data-v-4eb7001b]{background:var(--b-status-indicator-red-background-color)}.b-status__indicator--yellow[data-v-4eb7001b]{background:var(--b-status-indicator-yellow-background-color)}
|
package/dist/assets/index45.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
button[data-v-b3ad119c]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-b3ad119c]:focus-visible{outline:none}.b-filter-bar-button[data-v-b3ad119c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;appearance:none;background-color:var(--b-filter-bar-button-background-color);border:var(--b-filter-bar-button-border);border-radius:var(--b-filter-bar-button-border-radius);color:var(--b-filter-bar-button-color);cursor:pointer;display:inline-flex;height:var(--b-filter-bar-button-height);justify-content:center;text-decoration:none;user-select:none}.b-filter-bar-button[data-v-b3ad119c],.b-filter-bar-button[data-v-b3ad119c]:before,.b-filter-bar-button[data-v-b3ad119c]:after{box-sizing:border-box}.b-filter-bar-button *[data-v-b3ad119c],.b-filter-bar-button *[data-v-b3ad119c]:before,.b-filter-bar-button *[data-v-b3ad119c]:after{box-sizing:border-box}.b-filter-bar-button[data-v-b3ad119c] ::-webkit-scrollbar{height:14px;width:14px}.b-filter-bar-button[data-v-b3ad119c] ::-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)}@media (hover: hover){.b-filter-bar-button[data-v-b3ad119c]:hover{background-color:var(--b-filter-bar-button-hover-background-color);color:var(--b-filter-bar-button-hover-color)}.b-filter-bar-button:hover .b-filter-bar-button__counter[data-v-b3ad119c]{background-color:var(--b-filter-bar-button-counter-hover-background-color)}}.b-legacy-theme .b-filter-bar-button__counter[data-v-b3ad119c]{font-weight:400;line-height:19px}.b-legacy-theme .b-filter-bar-button__label[data-v-b3ad119c]{font-weight:400}.b-legacy-theme .b-filter-bar-button--with-counter[data-v-b3ad119c]{background-color:var(--b-filter-bar-button-with-counter-background-color);border:var(--b-filter-bar-button-with-counter-border);color:var(--b-filter-bar-button-with-counter-color)}.b-legacy-theme .b-filter-bar-button--with-counter[data-v-b3ad119c]:active:not(:disabled){background-color:var(--b-filter-bar-button-with-counter-active-background-color);border-color:var(--b-filter-bar-button-with-counter-active-border-color);color:var(--b-filter-bar-button-with-counter-active-color)}.b-legacy-theme .b-filter-bar-button--with-counter:active:not(:disabled) .b-filter-bar-button__counter[data-v-b3ad119c]{color:var(--b-filter-bar-button-with-counter-active-counter-color)}.b-filter-bar-button[data-v-b3ad119c]:active:not(:disabled){border:var(--b-filter-bar-button-active-border)}.b-filter-bar-button[data-v-b3ad119c]:disabled,.b-filter-bar-button[data-v-b3ad119c]:disabled:not(:focus){background-color:var(--b-filter-bar-button-disabled-background-color);color:var(--b-filter-bar-button-disabled-color);cursor:not-allowed}.b-filter-bar-button:disabled .b-filter-bar-button__counter[data-v-b3ad119c],.b-filter-bar-button:disabled:not(:focus) .b-filter-bar-button__counter[data-v-b3ad119c]{background-color:var(--b-filter-bar-button-counter-disabled-background-color);color:var(--b-filter-bar-button-counter-disabled-color)}.b-filter-bar-button[data-v-b3ad119c]:focus-visible{animation:outer-ring-default-b3ad119c 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);z-index:1}@keyframes outer-ring-default-b3ad119c{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-filter-bar-button--filter-open[data-v-b3ad119c]:not(:hover){border:var(--b-filter-bar-button-filter-open-border)}.b-filter-bar-button--with-chevron .b-filter-bar-button__container[data-v-b3ad119c]{padding-right:var(--b-filter-bar-button-with-chevron-container-padding-right)}.b-filter-bar-button__chevron[data-v-b3ad119c]{display:flex;justify-content:center;padding-right:var(--b-filter-bar-button-chevron-padding-right)}.b-filter-bar-button__container[data-v-b3ad119c]{align-items:center;display:inline-flex;gap:var(--b-filter-bar-button-container-gap);justify-content:center;padding:var(--b-filter-bar-button-container-padding);vertical-align:bottom}.b-filter-bar-button__counter[data-v-b3ad119c]{background-color:var(--b-filter-bar-button-counter-background-color);border-radius:var(--b-filter-bar-button-counter-border-radius);color:var(--b-filter-bar-button-counter-color);margin-right:var(--b-filter-bar-button-counter-margin-right);padding:var(--b-filter-bar-button-counter-padding)}.b-filter-bar-button__label-container[data-v-b3ad119c]{display:inline-flex;gap:var(--b-filter-bar-button-label-container-gap)}.b-filter-bar-button__label[data-v-b3ad119c],.b-filter-bar-button__secondary-label[data-v-b3ad119c]{display:inline-flex;line-height:var(--b-filter-bar-button-label-line-height);vertical-align:middle}.b-filter-bar-button__secondary-label[data-v-b3ad119c]{color:var(--b-filter-bar-button-secondary-label-color)}.b-filter-bar-button__icon-left[data-v-b3ad119c],.b-filter-bar-button__icon-right[data-v-b3ad119c]{display:inline-flex}.b-base-filter[data-v-32ce792b]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block}.b-base-filter[data-v-32ce792b],.b-base-filter[data-v-32ce792b]:before,.b-base-filter[data-v-32ce792b]:after{box-sizing:border-box}.b-base-filter *[data-v-32ce792b],.b-base-filter *[data-v-32ce792b]:before,.b-base-filter *[data-v-32ce792b]:after{box-sizing:border-box}.b-base-filter[data-v-32ce792b] ::-webkit-scrollbar{height:14px;width:14px}.b-base-filter[data-v-32ce792b] ::-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-base-filter__popover[data-v-32ce792b] .b-button-actions__container-wrapper{flex-direction:row;justify-content:space-between}.b-input-filter[data-v-93dbdf1c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:var(--b-filter-bar-input-filter-padding)}.b-input-filter[data-v-93dbdf1c],.b-input-filter[data-v-93dbdf1c]:before,.b-input-filter[data-v-93dbdf1c]:after{box-sizing:border-box}.b-input-filter *[data-v-93dbdf1c],.b-input-filter *[data-v-93dbdf1c]:before,.b-input-filter *[data-v-93dbdf1c]:after{box-sizing:border-box}.b-input-filter[data-v-93dbdf1c] ::-webkit-scrollbar{height:14px;width:14px}.b-input-filter[data-v-93dbdf1c] ::-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-input-filter--only-slot[data-v-93dbdf1c]{padding:var(--b-filter-bar-input-filter-only-slot-padding)}.b-date-filter[data-v-3a27d7af]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:var(--b-filter-bar-date-filter-padding)}.b-date-filter[data-v-3a27d7af],.b-date-filter[data-v-3a27d7af]:before,.b-date-filter[data-v-3a27d7af]:after{box-sizing:border-box}.b-date-filter *[data-v-3a27d7af],.b-date-filter *[data-v-3a27d7af]:before,.b-date-filter *[data-v-3a27d7af]:after{box-sizing:border-box}.b-date-filter[data-v-3a27d7af] ::-webkit-scrollbar{height:14px;width:14px}.b-date-filter[data-v-3a27d7af] ::-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-date-filter__divider[data-v-3a27d7af]{margin-top:var(--b-filter-bar-date-filter-divider-margin-top)}@container (max-width: 260px){.b-base-filter-date-range-filter[data-v-be19ef58] .b-filter-bar-button__secondary-label{display:block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.b-date-range-filter[data-v-be19ef58]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-date-range-filter[data-v-be19ef58],.b-date-range-filter[data-v-be19ef58]:before,.b-date-range-filter[data-v-be19ef58]:after{box-sizing:border-box}.b-date-range-filter *[data-v-be19ef58],.b-date-range-filter *[data-v-be19ef58]:before,.b-date-range-filter *[data-v-be19ef58]:after{box-sizing:border-box}.b-date-range-filter[data-v-be19ef58] ::-webkit-scrollbar{height:14px;width:14px}.b-date-range-filter[data-v-be19ef58] ::-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-date-range-filter__actions[data-v-be19ef58]{padding:var(--b-filter-bar-date-range-filter-actions-padding)}.b-legacy-theme .b-date-range-filter__actions[data-v-be19ef58] .b-button-actions__container-wrapper{flex-direction:initial;justify-content:space-between}.b-date-range-filter__divider[data-v-be19ef58]{margin:var(--b-filter-bar-date-range-filter-divider-margin)}.b-select-filter[data-v-63e9e788]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-select-filter[data-v-63e9e788],.b-select-filter[data-v-63e9e788]:before,.b-select-filter[data-v-63e9e788]:after{box-sizing:border-box}.b-select-filter *[data-v-63e9e788],.b-select-filter *[data-v-63e9e788]:before,.b-select-filter *[data-v-63e9e788]:after{box-sizing:border-box}.b-select-filter[data-v-63e9e788] ::-webkit-scrollbar{height:14px;width:14px}.b-select-filter[data-v-63e9e788] ::-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-select-filter__divider[data-v-63e9e788]{background-color:var(--b-filter-bar-select-filter-divider-background-color);border-width:var(--b-filter-bar-select-filter-divider-border-width);height:1px;margin:var(--b-filter-bar-select-filter-divider-margin)}.b-select-filter__search-bar[data-v-63e9e788]{padding:var(--b-filter-bar-select-filter-search-bar-padding)}.b-select-filter__wrapper[data-v-63e9e788]{max-height:270px}.b-boolean-filter[data-v-af2f275e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:var(--b-filter-bar-boolean-filter-padding)}.b-boolean-filter[data-v-af2f275e],.b-boolean-filter[data-v-af2f275e]:before,.b-boolean-filter[data-v-af2f275e]:after{box-sizing:border-box}.b-boolean-filter *[data-v-af2f275e],.b-boolean-filter *[data-v-af2f275e]:before,.b-boolean-filter *[data-v-af2f275e]:after{box-sizing:border-box}.b-boolean-filter[data-v-af2f275e] ::-webkit-scrollbar{height:14px;width:14px}.b-boolean-filter[data-v-af2f275e] ::-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-boolean-filter--only-slot[data-v-af2f275e]{padding:var(--b-filter-bar-boolean-filter-only-slot-padding)}.b-range-filter[data-v-7cfba883]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:var(--b-filter-bar-range-filter-padding)}.b-range-filter[data-v-7cfba883],.b-range-filter[data-v-7cfba883]:before,.b-range-filter[data-v-7cfba883]:after{box-sizing:border-box}.b-range-filter *[data-v-7cfba883],.b-range-filter *[data-v-7cfba883]:before,.b-range-filter *[data-v-7cfba883]:after{box-sizing:border-box}.b-range-filter[data-v-7cfba883] ::-webkit-scrollbar{height:14px;width:14px}.b-range-filter[data-v-7cfba883] ::-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-range-filter__input-field[data-v-7cfba883]{padding-top:var(--b-filter-bar-range-filter-item-padding)}.b-range-filter--only-slot[data-v-7cfba883]{padding:var(--b-filter-bar-range-filter-only-slot-padding)}button[data-v-66b170d4]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-66b170d4]:focus-visible{outline:none}.b-base-filter-button[data-v-66b170d4]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;appearance:none;background-color:var(--b-filter-button-background-color);color:var(--b-filter-button-font-color);cursor:pointer;display:inline-flex;height:40px;justify-content:center;padding:var(--b-filter-button-padding);text-decoration:none;user-select:none;width:100%}.b-base-filter-button[data-v-66b170d4],.b-base-filter-button[data-v-66b170d4]:before,.b-base-filter-button[data-v-66b170d4]:after{box-sizing:border-box}.b-base-filter-button *[data-v-66b170d4],.b-base-filter-button *[data-v-66b170d4]:before,.b-base-filter-button *[data-v-66b170d4]:after{box-sizing:border-box}.b-base-filter-button[data-v-66b170d4] ::-webkit-scrollbar{height:14px;width:14px}.b-base-filter-button[data-v-66b170d4] ::-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)}@media (hover: hover){.b-base-filter-button[data-v-66b170d4]:hover{background-color:var(--b-filter-button-hover-background-color);color:var(--b-filter-button-hover-text-color)}.b-base-filter-button:hover .b-base-filter-button__counter[data-v-66b170d4]{background-color:var(--b-filter-button-counter-hover-background-color)}}.b-legacy-theme .b-base-filter-button__counter[data-v-66b170d4]{font-weight:400;line-height:19px}.b-legacy-theme .b-base-filter-button__label[data-v-66b170d4]{font-weight:400}.b-base-filter-button[data-v-66b170d4] .b-base-button__label{width:100%}.b-base-filter-button[data-v-66b170d4]:active:not(:disabled){background-color:var(--b-filter-button-active-background-color)}.b-base-filter-button:active:not(:disabled) .b-base-filter-button__counter[data-v-66b170d4]{background-color:var(--b-filter-button-counter-active-background-color)}.b-base-filter-button[data-v-66b170d4]:disabled,.b-base-filter-button[data-v-66b170d4]:disabled:not(:focus){background-color:var(--b-filter-button-disabled-background-color);color:var(--b-filter-button-disabled-font-color);cursor:not-allowed}.b-base-filter-button:disabled .b-base-filter-button__counter[data-v-66b170d4],.b-base-filter-button:disabled:not(:focus) .b-base-filter-button__counter[data-v-66b170d4]{background-color:var(--b-filter-button-counter-disabled-background-color);color:var(--b-filter-button-counter-disabled-font-color)}.b-base-filter-button[data-v-66b170d4]:focus-visible{background-color:var(--b-filter-button-modal-focus-background-color)}.b-base-filter-button:focus-visible .b-base-filter-button__counter[data-v-66b170d4]{background-color:var(--b-filter-button-modal-counter-focus-background-color)}.b-base-filter-button--filter-open[data-v-66b170d4]{background-color:var(--b-filter-button-modal-open-background-color)}.b-base-filter-button--filter-open .b-base-filter-button__counter[data-v-66b170d4]{background-color:var(--b-filter-button-counter-open-background-color)}.b-base-filter-button__default-container[data-v-66b170d4]{align-items:center;display:flex;gap:var(--b-filter-button-default-container-gap);width:100%}.b-base-filter-button__counter[data-v-66b170d4]{background-color:var(--b-filter-button-counter-background-color);border-radius:var(--b-filter-button-counter-border-radius);color:var(--b-filter-button-counter-font-color);padding:var(--b-filter-button-counter-padding)}.b-base-filter-button__counter-wrapper[data-v-66b170d4]{align-items:center;display:flex}.b-base-filter-button__label[data-v-66b170d4]{display:block;overflow:hidden;text-overflow:ellipsis}.b-base-filter-button__label-container[data-v-66b170d4]{overflow:hidden;white-space:nowrap;width:100%}.b-base-filter-button__icon-left[data-v-66b170d4],.b-base-filter-button__icon-right[data-v-66b170d4]{display:inline-flex}.b-all-filters-modal-button[data-v-4c415ac7]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-all-filters-modal-button[data-v-4c415ac7],.b-all-filters-modal-button[data-v-4c415ac7]:before,.b-all-filters-modal-button[data-v-4c415ac7]:after{box-sizing:border-box}.b-all-filters-modal-button *[data-v-4c415ac7],.b-all-filters-modal-button *[data-v-4c415ac7]:before,.b-all-filters-modal-button *[data-v-4c415ac7]:after{box-sizing:border-box}.b-all-filters-modal-button[data-v-4c415ac7] ::-webkit-scrollbar{height:14px;width:14px}.b-all-filters-modal-button[data-v-4c415ac7] ::-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)}@media (hover: hover){.b-all-filters-modal-button[data-v-4c415ac7]:hover{background-color:var(--b-filter-button-modal-hover-background-color);color:var(--b-filter-button-modal-hover-color)}}.b-legacy-theme .b-all-filters-modal-button[data-v-4c415ac7]{border-radius:var(--b-filter-button-modal-border-radius)}@media (hover: hover){.b-legacy-theme .b-all-filters-modal-button[data-v-4c415ac7]:hover{background-color:var(--b-filter-button-modal-hover-background-color)}.b-legacy-theme .b-all-filters-modal-button[data-v-4c415ac7]:hover:is(.b-all-filters-modal-button--filter-open){background-color:var(--b-filter-button-modal-open-background-color)}}.b-legacy-theme .b-all-filters-modal-button[data-v-4c415ac7]:disabled,.b-legacy-theme .b-all-filters-modal-button[data-v-4c415ac7]:disabled:not(:focus){background-color:var(--b-filter-button-modal-disabled-background-color);color:var(--b-filter-button-modal-disabled-color)}.b-legacy-theme .b-all-filters-modal-button[data-v-4c415ac7]:disabled .b-base-filter-button__counter,.b-legacy-theme .b-all-filters-modal-button[data-v-4c415ac7]:disabled:not(:focus) .b-base-filter-button__counter{background-color:var(--b-filter-button-modal-disabled-counter-background-color);color:var(--b-filter-button-modal-disabled-counter-color)}.b-legacy-theme .b-all-filters-modal-button[data-v-4c415ac7]:focus-visible{box-shadow:var(--b-filter-button-modal-focus-box-shadow)}.b-legacy-theme .b-all-filters-modal-button[data-v-4c415ac7]:focus-visible:is(.b-all-filters-modal-button--filter-open){background-color:var(--b-filter-button-modal-open-background-color)}.b-legacy-theme .b-all-filters-modal-button[data-v-4c415ac7] .b-base-filter-button__counter{background-color:var(--b-filter-button-modal-counter-background-color);color:var(--b-filter-button-modal-counter-color)}svg[data-v-6a35173c]{display:inline-flex;flex-shrink:0}svg[data-v-6a35173c],svg *[data-v-6a35173c]{fill:currentcolor}.b-all-filters-modal[data-v-97626423]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-all-filters-modal[data-v-97626423],.b-all-filters-modal[data-v-97626423]:before,.b-all-filters-modal[data-v-97626423]:after{box-sizing:border-box}.b-all-filters-modal *[data-v-97626423],.b-all-filters-modal *[data-v-97626423]:before,.b-all-filters-modal *[data-v-97626423]:after{box-sizing:border-box}.b-all-filters-modal[data-v-97626423] ::-webkit-scrollbar{height:14px;width:14px}.b-all-filters-modal[data-v-97626423] ::-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-all-filters-modal[data-v-97626423] .b-modal-base__wrapper{height:calc(100vh - 128px);max-height:800px;overflow:hidden;padding-bottom:68px;position:relative}.b-all-filters-modal[data-v-97626423] .b-modal-base__content{flex:1;height:fit-content;max-height:calc(100% - 63px);padding:var(--b-filter-bar-all-filters-modal-content-padding)}.b-all-filters-modal[data-v-97626423] .b-modal-base__content>.b-typography{height:100%}.b-all-filters-modal[data-v-97626423] .b-modal-base__grid{overflow:hidden}.b-all-filters-modal[data-v-97626423] .b-modal-base__grid>:nth-child(1){-ms-overflow-style:none;scrollbar-width:none;height:100%;overflow-y:auto;padding-bottom:var(--b-filter-bar-all-filters-modal-filters-list-margin);padding-right:var(--b-filter-bar-all-filters-modal-filters-list-margin)}.b-all-filters-modal[data-v-97626423] .b-modal-base__grid>:nth-child(1) ::-webkit-scrollbar{display:none}.b-all-filters-modal[data-v-97626423] .b-modal-base__grid>:nth-child(2){max-height:100%}.b-all-filters-modal[data-v-97626423] .b-grid-layout{gap:0;height:100%}.b-all-filters-modal[data-v-97626423] .b-modal-base__actions-container{bottom:0;position:absolute;width:100%}.b-all-filters-modal__filters[data-v-97626423]{display:flex;flex-direction:column;gap:var(--b-filter-bar-all-filters-modal-filters-gap)}.b-all-filters-modal__search-bar[data-v-97626423]{padding:var(--b-filter-bar-all-filters-modal-search-bar-padding)}.b-all-filters-modal__empty-search-message[data-v-97626423]{color:var(--b-filter-bar-all-filters-modal-filters-list-empty-search-message-color);padding:var(--b-filter-bar-all-filters-modal-filters-list-empty-search-message-padding);text-align:center}.b-all-filters-modal__filters-list[data-v-97626423]{list-style:none;margin:var(--b-filter-bar-all-filters-modal-filters-list-margin);padding:var(--b-filter-bar-all-filters-modal-filters-list-padding)}.b-all-filters-modal__filters-section[data-v-97626423]{display:flex;flex-direction:column;gap:var(--b-filter-bar-all-filters-modal-filters-list-gap)}.b-all-filters-modal__filters-section-title[data-v-97626423]{color:var(--b-filter-bar-all-filters-modal-filters-list-title-color);padding:var(--b-filter-bar-all-filters-modal-filters-list-title-padding)}.b-all-filters-modal__selected-filter-content[data-v-97626423]{display:flex;flex-direction:column;height:100%;padding:var(--b-filter-bar-all-filters-modal-selected-filter-content-padding)}.b-all-filters-modal__selected-filter-component[data-v-97626423]{flex:1}.b-all-filters-modal__clear-button[data-v-97626423]{display:flex;justify-content:flex-end}.b-all-filters-modal__selected-filter-text[data-v-97626423]{display:flex;flex-direction:column;gap:var(--b-filter-bar-all-filters-modal-content-text-gap);margin-bottom:var(--b-filter-bar-all-filters-modal-content-text-margin-bottom)}.b-filter-bar[data-v-39eb8244]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;container-type:inline-size;display:flex;flex-wrap:wrap;gap:var(--b-filter-bar-gap);width:100%}.b-filter-bar[data-v-39eb8244],.b-filter-bar[data-v-39eb8244]:before,.b-filter-bar[data-v-39eb8244]:after{box-sizing:border-box}.b-filter-bar *[data-v-39eb8244],.b-filter-bar *[data-v-39eb8244]:before,.b-filter-bar *[data-v-39eb8244]:after{box-sizing:border-box}.b-filter-bar[data-v-39eb8244] ::-webkit-scrollbar{height:14px;width:14px}.b-filter-bar[data-v-39eb8244] ::-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-filter-bar[data-v-39eb8244]:focus-within{position:relative;z-index:var(--b-filter-bar-z-index)}.b-filter-bar__search-bar[data-v-39eb8244]{width:200px}
|
|
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-uqx176q-01c3158a var(--b-accordion-item-animation-duration) var(--b-animation-easing-linear),enter-uqx176q-01c3158a var(--b-accordion-item-animation-duration) var(--b-animation-easing-enter),scale-up-uqx176q-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-uqx176q-01c3158a{0%{opacity:0}to{opacity:1}}@keyframes scale-up-uqx176q-01c3158a{0%{scale:1}to{scale:1}}@keyframes enter-uqx176q-01c3158a{0%{translate:0 -8px}to{translate:0 0}}.b-accordion-item__animation--content-leave-active[data-v-01c3158a]{animation:fade-out-uqx176w-01c3158a var(--b-accordion-item-animation-duration) var(--b-animation-easing-linear),exit-uqx176w-01c3158a var(--b-accordion-item-animation-duration) var(--b-animation-easing-exit),scale-down-uqx176w-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-uqx176w-01c3158a{0%{opacity:1}to{opacity:0}}@keyframes scale-down-uqx176w-01c3158a{0%{scale:1}to{scale:1}}@keyframes exit-uqx176w-01c3158a{0%{translate:0 0}to{translate:0 -8px}}
|
package/dist/assets/index5.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.b-
|
|
1
|
+
.b-button-actions[data-v-d176e497]{container-type:inline-size;flex-grow:1}.b-button-actions__container-wrapper[data-v-d176e497]{display:flex;flex-direction:column;gap:var(--b-button-actions-vertical-stack-row-gap)}.b-button-actions__button-wrapper>*[data-v-d176e497]{width:100%}@container (min-width: 242px){.b-button-actions--buttons-start[data-v-d176e497]{flex-direction:row;justify-content:start}.b-button-actions--buttons-end[data-v-d176e497]{column-gap:var(--b-button-actions-buttons-end-column-gap);flex-direction:row;justify-content:flex-end}.b-button-actions--fill-container[data-v-d176e497]{column-gap:var(--b-button-actions-fill-container-column-gap);display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}.b-button-actions--space-between[data-v-d176e497]{flex-direction:unset;justify-content:space-between}}
|
package/dist/assets/index6.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.b-
|
|
1
|
+
.b-divider[data-v-2d159f60]{background-color:var(--b-divider-background-color);border:var(--b-divider-border);height:var(--b-divider-height);margin-block-end:0;margin-block-start:0;width:100%}
|
package/dist/assets/index7.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.b-
|
|
1
|
+
.b-link[data-v-5bfdba21]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--b-link-color);text-decoration:var(--b-link-text-decoration)}.b-link[data-v-5bfdba21],.b-link[data-v-5bfdba21]:before,.b-link[data-v-5bfdba21]:after{box-sizing:border-box}.b-link *[data-v-5bfdba21],.b-link *[data-v-5bfdba21]:before,.b-link *[data-v-5bfdba21]:after{box-sizing:border-box}.b-link[data-v-5bfdba21] ::-webkit-scrollbar{height:14px;width:14px}.b-link[data-v-5bfdba21] ::-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-link[data-v-5bfdba21]:focus-visible{outline:none}.b-link[data-v-5bfdba21]:hover{color:var(--b-link-hover-color);text-decoration:var(--b-link-hover-text-decoration)}.b-link[data-v-5bfdba21]:active{color:var(--b-link-active-color)}.b-link[data-v-5bfdba21]:focus-visible{animation:outer-ring-default-5bfdba21 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);border-radius:var(--b-link-border-radius)}@keyframes outer-ring-default-5bfdba21{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-link--quiet[data-v-5bfdba21]{color:var(--b-link-quiet-color);text-decoration:none}.b-link--quiet[data-v-5bfdba21]:hover{color:var(--b-link-quiet-hover-color);text-decoration:underline}.b-link--quiet[data-v-5bfdba21]:active{color:var(--b-link-quiet-active-color);text-decoration:underline}.b-link--quiet[data-v-5bfdba21]:focus-visible{text-decoration:underline}
|
package/dist/assets/index8.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.b-
|
|
1
|
+
.b-loading-indicator[data-v-6d66904c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;display:inline-block;height:var(--b-loading-indicator-height);position:relative;width:var(--b-loading-indicator-width)}.b-loading-indicator[data-v-6d66904c],.b-loading-indicator[data-v-6d66904c]:before,.b-loading-indicator[data-v-6d66904c]:after{box-sizing:border-box}.b-loading-indicator *[data-v-6d66904c],.b-loading-indicator *[data-v-6d66904c]:before,.b-loading-indicator *[data-v-6d66904c]:after{box-sizing:border-box}.b-loading-indicator[data-v-6d66904c] ::-webkit-scrollbar{height:14px;width:14px}.b-loading-indicator[data-v-6d66904c] ::-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)}@keyframes spin-6d66904c{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.b-loading-indicator[data-v-6d66904c]:before,.b-loading-indicator[data-v-6d66904c]:after{animation:spin-6d66904c 1s cubic-bezier(.785,.135,.15,.86) infinite;border:3px solid transparent;border-radius:50%;box-sizing:border-box;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.b-loading-indicator[data-v-6d66904c]:before{border-color:var(--b-loading-indicator-background-color);border-top-color:transparent;opacity:.1}.b-loading-indicator[data-v-6d66904c]:after{border-color:transparent;border-top-color:var(--b-loading-indicator-color)}.b-loading-indicator--inverse[data-v-6d66904c]:before{border-color:var(--b-loading-indicator-inverse-background-color);border-top-color:transparent;opacity:.2}.b-loading-indicator--inverse[data-v-6d66904c]:after{border-color:transparent;border-top-color:var(--b-loading-indicator-inverse-color)}.b-loading-indicator--small[data-v-6d66904c]{height:var(--b-loading-indicator-small-height);width:var(--b-loading-indicator-small-width)}.b-loading-indicator--small[data-v-6d66904c]:before,.b-loading-indicator--small[data-v-6d66904c]:after{border-width:var(--b-loading-indicator-small-border-width)}.b-loading-indicator--large[data-v-6d66904c]{height:var(--b-loading-indicator-large-height);width:var(--b-loading-indicator-large-width)}.b-loading-indicator--large[data-v-6d66904c]:before,.b-loading-indicator--large[data-v-6d66904c]:after{border-width:var(--b-loading-indicator-large-border-width)}
|
package/dist/assets/index9.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.b-
|
|
1
|
+
.b-pagination-results-per-page[data-v-b9985b4c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;display:flex}.b-pagination-results-per-page[data-v-b9985b4c],.b-pagination-results-per-page[data-v-b9985b4c]:before,.b-pagination-results-per-page[data-v-b9985b4c]:after{box-sizing:border-box}.b-pagination-results-per-page *[data-v-b9985b4c],.b-pagination-results-per-page *[data-v-b9985b4c]:before,.b-pagination-results-per-page *[data-v-b9985b4c]:after{box-sizing:border-box}.b-pagination-results-per-page[data-v-b9985b4c] ::-webkit-scrollbar{height:14px;width:14px}.b-pagination-results-per-page[data-v-b9985b4c] ::-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-pagination-results-per-page__dropdown-container[data-v-b9985b4c]{align-items:center;display:flex}.b-pagination-results-per-page__dropdown[data-v-b9985b4c]{margin:var(--b-pagination-results-per-page-margin);width:90px}.b-pagination-context[data-v-242cfbeb]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-pagination-context[data-v-242cfbeb],.b-pagination-context[data-v-242cfbeb]:before,.b-pagination-context[data-v-242cfbeb]:after{box-sizing:border-box}.b-pagination-context *[data-v-242cfbeb],.b-pagination-context *[data-v-242cfbeb]:before,.b-pagination-context *[data-v-242cfbeb]:after{box-sizing:border-box}.b-pagination-context[data-v-242cfbeb] ::-webkit-scrollbar{height:14px;width:14px}.b-pagination-context[data-v-242cfbeb] ::-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-pagination-context__dropdown[data-v-242cfbeb]{display:inline-block;margin:var(--b-pagination-context-margin);width:80px}svg[data-v-d0300c1f]{display:inline-flex;flex-shrink:0}svg[data-v-d0300c1f],svg *[data-v-d0300c1f]{fill:currentcolor}svg[data-v-526f9959]{display:inline-flex;flex-shrink:0}svg[data-v-526f9959],svg *[data-v-526f9959]{fill:currentcolor}svg[data-v-ad07f9f1]{display:inline-flex;flex-shrink:0}svg[data-v-ad07f9f1],svg *[data-v-ad07f9f1]{fill:currentcolor}svg[data-v-5d0b9449]{display:inline-flex;flex-shrink:0}svg[data-v-5d0b9449],svg *[data-v-5d0b9449]{fill:currentcolor}.b-pagination-controls[data-v-e062fb92]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;gap:var(--b-pagination-controls-gap);list-style:none;margin:0;padding:0}.b-pagination-controls[data-v-e062fb92],.b-pagination-controls[data-v-e062fb92]:before,.b-pagination-controls[data-v-e062fb92]:after{box-sizing:border-box}.b-pagination-controls *[data-v-e062fb92],.b-pagination-controls *[data-v-e062fb92]:before,.b-pagination-controls *[data-v-e062fb92]:after{box-sizing:border-box}.b-pagination-controls[data-v-e062fb92] ::-webkit-scrollbar{height:14px;width:14px}.b-pagination-controls[data-v-e062fb92] ::-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-pagination-controls__item[data-v-e062fb92]{display:flex}.b-pagination[data-v-79d93a5d]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;container-type:inline-size}.b-pagination[data-v-79d93a5d],.b-pagination[data-v-79d93a5d]:before,.b-pagination[data-v-79d93a5d]:after{box-sizing:border-box}.b-pagination *[data-v-79d93a5d],.b-pagination *[data-v-79d93a5d]:before,.b-pagination *[data-v-79d93a5d]:after{box-sizing:border-box}.b-pagination[data-v-79d93a5d] ::-webkit-scrollbar{height:14px;width:14px}.b-pagination[data-v-79d93a5d] ::-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-pagination__navigation[data-v-79d93a5d]{align-items:center;display:flex;flex-direction:column-reverse;gap:var(--b-pagination-navigation-small-container-gap)}.b-pagination__controls[data-v-79d93a5d],.b-pagination__context[data-v-79d93a5d]{align-items:center;display:flex;justify-content:center}.b-pagination__page-navigator[data-v-79d93a5d]{display:flex;flex-direction:column-reverse;gap:var(--b-pagination-page-navigator-small-container-gap)}.b-pagination__divider[data-v-79d93a5d]{display:none}@container (min-width: 410px){.b-pagination__page-navigator[data-v-79d93a5d]{flex-direction:row;gap:0;justify-content:center}.b-pagination__divider[data-v-79d93a5d]{border-right:var(--b-pagination-divider-border-width) solid var(--b-pagination-divider-border-color);display:block;margin:var(--b-pagination-divider-margin);width:0}}@container (min-width: 620px){.b-pagination__navigation[data-v-79d93a5d]{flex-direction:row;justify-content:space-between}.b-pagination__navigation--no-results-per-page[data-v-79d93a5d]{justify-content:flex-end}.b-pagination__page-navigator[data-v-79d93a5d]{justify-content:unset}.b-pagination__results-per-page[data-v-79d93a5d]{display:block}}
|
package/dist/avatar-image.js
CHANGED
package/dist/badge.js
CHANGED
|
@@ -2,7 +2,7 @@ import { defineComponent as n, computed as r } from "vue";
|
|
|
2
2
|
import { u as o } from "./chunks/aria-label.ac9651a5.js";
|
|
3
3
|
import { g as c } from "./chunks/get-slot-text.c1114034.js";
|
|
4
4
|
import { n as i } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
|
|
5
|
-
import "./assets/
|
|
5
|
+
import "./assets/index12.css";
|
|
6
6
|
var s = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.ATTENTION = "attention", e.WARNING = "warning", e.CRITICAL = "critical", e.SUCCESS = "success", e))(s || {});
|
|
7
7
|
const _ = n({
|
|
8
8
|
name: "adl-badge",
|
package/dist/button.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { a as d, B as r } from "./chunks/button.
|
|
2
|
-
import { b as N } from "./chunks/button.
|
|
1
|
+
import { a as d, B as r } from "./chunks/button.1dfed6fa.js";
|
|
2
|
+
import { b as N } from "./chunks/button.1dfed6fa.js";
|
|
3
3
|
import { defineComponent as u, computed as o } from "vue";
|
|
4
|
-
import { B as p } from "./chunks/loading-button.
|
|
5
|
-
import { a as k } from "./chunks/loading-button.
|
|
4
|
+
import { B as p } from "./chunks/loading-button.70de254a.js";
|
|
5
|
+
import { a as k } from "./chunks/loading-button.70de254a.js";
|
|
6
6
|
import { n as v } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
|
|
7
|
-
import "./assets/
|
|
7
|
+
import "./assets/index5.css";
|
|
8
8
|
var l = /* @__PURE__ */ ((e) => (e.BUTTONS_END = "buttons-end", e.FILL_CONTAINER = "fill-container", e.SPACE_BETWEEN = "space-between", e.VERTICAL_STACK = "vertical-stack", e))(l || {}), c = /* @__PURE__ */ ((e) => (e.BUTTONS_START = "buttons-start", e))(c || {});
|
|
9
9
|
const i = { ...l, ...c }, f = u({
|
|
10
10
|
name: "bento-button-actions",
|
package/dist/card.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
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.
|
|
2
|
+
import { B as H } from "./chunks/index.4de86bd4.js";
|
|
3
3
|
import { a as I, C as D } from "./chunks/chevron-up.674ec2e5.js";
|
|
4
4
|
import { u as M } from "./chunks/use-has-slot.6052d56a.js";
|
|
5
5
|
import { g as O } from "./chunks/unique-id.a2a2b458.js";
|
package/dist/checkbox.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { B as h, b as a } from "./chunks/checkbox.
|
|
2
|
-
import { a as N } from "./chunks/checkbox.
|
|
1
|
+
import { B as h, b as a } from "./chunks/checkbox.65480106.js";
|
|
2
|
+
import { a as N } from "./chunks/checkbox.65480106.js";
|
|
3
3
|
import { defineComponent as f, toRef as b, computed as d, ref as m, watch as _ } from "vue";
|
|
4
4
|
import { g } from "./chunks/unique-id.a2a2b458.js";
|
|
5
|
-
import { d as y } from "./chunks/index.
|
|
5
|
+
import { d as y } from "./chunks/index.4de86bd4.js";
|
|
6
6
|
import { u as x } from "./chunks/use-form-layout-loading.d03e5d48.js";
|
|
7
|
-
import { C as v } from "./chunks/controls-group.
|
|
8
|
-
import { E } from "./chunks/error-message.
|
|
7
|
+
import { C as v } from "./chunks/controls-group.066adff1.js";
|
|
8
|
+
import { E } from "./chunks/error-message.a7c6edb2.js";
|
|
9
9
|
import { n as k } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
|
|
10
|
-
import "./assets/
|
|
10
|
+
import "./assets/index23.css";
|
|
11
11
|
var s = /* @__PURE__ */ ((r) => (r.HORIZONTAL = "horizontal", r.VERTICAL = "vertical", r))(s || {});
|
|
12
12
|
const C = f({
|
|
13
13
|
name: "bento-checkbox-group",
|
|
@@ -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.4de86bd4.js";
|
|
3
3
|
import { u as f } from "./use-has-slot.6052d56a.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.9ec79f68.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-button.
|
|
1
|
+
{"version":3,"file":"base-button.9ec79f68.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,8 +1,8 @@
|
|
|
1
1
|
import { defineComponent as G, useAttrs as I, ref as v, computed as i, watch as p, onMounted as R } from "vue";
|
|
2
|
-
import { B as k } from "./index.
|
|
3
|
-
import { a as P } from "./button.
|
|
2
|
+
import { B as k } from "./index.4de86bd4.js";
|
|
3
|
+
import { a as P } from "./button.1dfed6fa.js";
|
|
4
4
|
import { BentoDivider as T } from "../divider.js";
|
|
5
|
-
import { B as w } from "./index.
|
|
5
|
+
import { B as w } from "./index.77d9d16d.js";
|
|
6
6
|
import { u as F } from "./use-has-slot.6052d56a.js";
|
|
7
7
|
import { u as N } from "./i18n.155748d6.js";
|
|
8
8
|
import { C as x } from "./cross.a2cadac5.js";
|
|
@@ -208,4 +208,4 @@ export {
|
|
|
208
208
|
C as e,
|
|
209
209
|
dt as f
|
|
210
210
|
};
|
|
211
|
-
//# sourceMappingURL=base-modal.
|
|
211
|
+
//# sourceMappingURL=base-modal.ab0f82b2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-modal.88e7b9d4.js","sources":["../../src/components/modal/modal.types.ts","../../src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariant {\n DEFAULT = 'BentoModalDefault',\n DIALOG = 'BentoModalDialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalSize {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalColumnLayoutVariant {\n SMALLER = 'smaller',\n EQUAL = 'equal',\n BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n DIALOG = 'dialog',\n ALERT_DIALOG = 'alertdialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalDialogType {\n CONFIRMATION = 'confirmation',\n DESTRUCTIVE = 'destructive',\n INFO = 'info',\n ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n CLOSE_MODAL = 'close-modal',\n}\n","<template>\n <div class=\"b-modal-base\">\n <dialog\n ref=\"modal\"\n :role=\"modalRole\"\n :aria-label=\"computedAriaLabel\"\n class=\"b-modal-base__container\"\n :class=\"modalConditionalClasses\"\n :open=\"initiallyOpen\"\n @animationend=\"closeModalAfterAnimation\"\n @click=\"isDismissible && closeModalOnClickOutside($event)\"\n @keydown.esc=\"internalModalActionClose\"\n >\n <bento-focus-trap>\n <div class=\"b-modal-base__wrapper\">\n <div\n v-if=\"hasSlot('default') || !hideCloseButton\"\n class=\"b-modal-base__header-container\"\n :style=\"customPaddingStyles.header\"\n >\n <div class=\"b-modal-base__header\">\n <bento-typography\n class=\"b-modal-base__title\"\n aria-label=\"base modal title\"\n el=\"span\"\n variant=\"title\"\n stronger\n >\n <slot v-if=\"hasSlot('default')\" />\n </bento-typography>\n <bento-button\n v-if=\"!hideCloseButton\"\n class=\"b-modal-base__close-button\"\n variant=\"tertiary\"\n type=\"button\"\n @click=\"internalModalActionClose\"\n >\n <cross-icon svg-title=\"close\" />\n </bento-button>\n </div>\n\n <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" />\n </div>\n\n <div\n class=\"b-modal-base__content\"\n :class=\"modalContentConditionalClasses\"\n :style=\"customPaddingStyles.content\"\n >\n <bento-typography\n v-if=\"hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))\"\n aria-label=\"base modal content\"\n el=\"div\"\n variant=\"body\"\n stronger\n >\n <grid-layout\n v-if=\"hasColumnLayout\"\n :column-width=\"computedColumnWidth\"\n :container-type=\"GridLayoutContainerType.NORMAL\"\n class=\"b-modal-base__grid\"\n >\n <template #col-1><slot name=\"content-col-1\"></slot></template>\n <template #col-2><slot name=\"content-col-2\"></slot></template>\n </grid-layout>\n <slot v-else name=\"content\" />\n </bento-typography>\n </div>\n\n <div\n v-if=\"hasSlot('actions')\"\n class=\"b-modal-base__actions-container\"\n :style=\"customPaddingStyles.actions\"\n >\n <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" />\n\n <div aria-label=\"modal actions\" class=\"b-modal-base__actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n </div>\n </bento-focus-trap>\n </dialog>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, onMounted, PropType, ref, useAttrs, watch } from 'vue';\n import {\n BentoModalColumnLayoutVariant,\n BentoModalEvent,\n BentoModalRole,\n BentoModalSize,\n } from '@/components/modal/modal.types';\n\n import { BentoTypography } from '@/components/typography';\n import { BentoButton, BentoButtonActionsList } from '@/components/button';\n import { BentoDivider } from '@/components/divider';\n import { BentoFocusTrap } from '@/components/focus-trap';\n import { GridLayout, GridLayoutContainerType } from '@/internal';\n import { useHasSlot } from '@/composables';\n import { useI18n } from '@/utils/ts/i18n';\n import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n export default defineComponent({\n i18n: { messages },\n name: 'base-modal',\n components: { CrossIcon, BentoTypography, BentoButton, BentoDivider, BentoFocusTrap, GridLayout },\n props: {\n /**\n * List of actions that will be used to render the buttons.\n * First element in the list will be rendered as \"primary\".\n * All elements after the first will be rendered as \"secondary\".\n * But you may change the color of 1-st action to red with 'critial' key\n * Not more than 3 action buttons can be provided\n * Or 2 action buttons and 1 Label for them\n *\n * Each object in the list should have a `title`, an `event` and\n * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n *\n * `title`: Button's text.\n *\n * `event`: Event triggered when clicking the Button.\n *\n * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n *\n * ```\n * [{\n * title: 'Primary',2\n * event: () => { ... },\n * icon: FourPeopleIcon\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * }]\n * ```\n */\n actions: {\n type: Array as PropType<BentoButtonActionsList>,\n default: null,\n },\n\n /**\n * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n */\n columnsSize: {\n type: String as PropType<BentoModalColumnLayoutVariant>,\n default: BentoModalColumnLayoutVariant.SMALLER,\n },\n\n /**\n * If provided, manages the padding of the whole modal container\n */\n customPadding: { type: String, default: null },\n\n /**\n * Hides a cross icon on the right side of the title\n */\n hideCloseButton: { type: Boolean, required: true },\n\n /**\n * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n */\n initiallyOpen: { type: Boolean, default: false },\n\n /**\n * If set to true, it allows the modal to be closed by clicking outside of it\n */\n isDismissible: { type: Boolean, required: true },\n\n /**\n * Controls the modal's state from the outside. Set it to true to open the modal\n */\n isOpen: { type: Boolean, required: true },\n\n /**\n * Defines whether the modal will be an alert modal\n */\n modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n /**\n * Allows the inner elments to overflow the dialog\n */\n overflowVisible: { type: Boolean, default: false },\n\n /**\n * Sets the width of the modal\n */\n size: {\n type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n default: BentoModalSize.SMALL,\n },\n\n /**\n * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n */\n withColumnLayout: { type: Boolean, default: false },\n },\n emits: [BentoModalEvent.CLOSE_MODAL],\n setup(props, { slots, emit }) {\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const attrs = useAttrs();\n const hasSlot = useHasSlot(slots);\n const modal = ref(null);\n const isClosing = ref(false);\n\n const customPaddingStyles = computed(() => {\n if (!props.customPadding) {\n return {};\n }\n\n const xPadding = {\n paddingLeft: props.customPadding,\n paddingRight: props.customPadding,\n };\n\n const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n if (!hasSlot('default')) {\n content.paddingTop = props.customPadding;\n }\n\n if (!hasSlot('actions')) {\n content.paddingBottom = props.customPadding;\n }\n\n return {\n header: { ...xPadding, paddingTop: props.customPadding },\n content,\n actions: { ...xPadding, paddingBottom: props.customPadding },\n };\n });\n\n const computedAriaLabel = computed(\n () => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string)\n );\n const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n const openModal = (): void => {\n modal.value.showModal();\n };\n\n const emitCloseEvent = (): void => {\n emit(BentoModalEvent.CLOSE_MODAL);\n };\n\n // Handle closing and closing animation for dialog element\n const closeModalAfterAnimation = () => {\n if (isClosing.value) {\n modal.value.close();\n emitCloseEvent();\n isClosing.value = false;\n }\n };\n\n const startCloseModalAnimation = () => {\n if (!modal.value.open) {\n return;\n }\n isClosing.value = true;\n };\n\n // If the user has pressed escape, clicked outside or clicked the close icon\n const internalModalActionClose = (event?: Event) => {\n if (event) {\n event.preventDefault();\n }\n if (!props.isDismissible) {\n return;\n }\n startCloseModalAnimation();\n };\n\n /**\n * Since the dialog HTML element doesn't automatically close when clicking outside, a check on when the user is clicking is needed.\n * If the click doesn't happen in the dialog box itself, the modal closes\n */\n const closeModalOnClickOutside = ({ target }: Event): void => {\n if (target && (target as HTMLElement).tagName === BentoModalRole.DIALOG.toUpperCase()) {\n internalModalActionClose();\n }\n };\n\n const modalConditionalClasses = computed(() => ({\n [`b-modal-base__container--${props.size}`]: props.size,\n 'b-modal-base__container--hide': isClosing.value,\n 'b-modal-base__container--overflow-visible': props.overflowVisible,\n 'b-modal-base__container--column-layout': hasColumnLayout.value,\n }));\n\n const modalContentConditionalClasses = computed(() => ({\n 'b-modal-base__content--column-layout': hasColumnLayout.value,\n 'b-modal-base__content--with-header': hasSlot('default'),\n 'b-modal-base__content--with-actions': hasSlot('actions'),\n }));\n\n const computedColumnWidth = computed(() => {\n if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n return [{ small: 4, medium: 4, large: 4 }];\n }\n if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n return [{ small: 8, medium: 8, large: 8 }];\n }\n return [{ small: 6, medium: 6, large: 6 }];\n });\n\n watch(\n () => [props.isOpen, modal.value],\n ([newIsOpen, newModalValue], [, oldModalValue]): void => {\n if (!newModalValue) {\n return;\n }\n\n const isFirstMutation = !oldModalValue;\n if (newIsOpen) {\n openModal();\n } else if (!isFirstMutation) {\n startCloseModalAnimation();\n }\n }\n );\n\n // If the first button is a loading button then close the modal have 0.5 seconds\n // if the state is changed to 'success'.\n watch(\n () => props.actions,\n () => {\n if (props.actions?.[0]?.state === 'success') {\n setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n }\n },\n { deep: true }\n );\n\n onMounted(() => {\n if (props.isOpen && modal.value) {\n openModal();\n }\n });\n\n return {\n // Refs\n modal,\n computedAriaLabel,\n\n // Handling the state\n openModal,\n closeModalOnClickOutside,\n closeModalAfterAnimation,\n startCloseModalAnimation,\n\n // Methods\n internalModalActionClose,\n hasSlot,\n emitCloseEvent,\n t,\n\n // Styles\n modalConditionalClasses,\n modalContentConditionalClasses,\n customPaddingStyles,\n hasColumnLayout,\n computedColumnWidth,\n\n // Enums\n GridLayoutContainerType,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME","_sfc_main","defineComponent","messages","CrossIcon","BentoTypography","BentoButton","BentoDivider","BentoFocusTrap","GridLayout","props","slots","emit","t","useI18n","attrs","useAttrs","hasSlot","useHasSlot","modal","ref","isClosing","customPaddingStyles","computed","xPadding","content","computedAriaLabel","hasColumnLayout","openModal","emitCloseEvent","closeModalAfterAnimation","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","target","modalConditionalClasses","modalContentConditionalClasses","computedColumnWidth","watch","newIsOpen","newModalValue","oldModalValue","_b","_a","onMounted","GridLayoutContainerType"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"base-modal.ab0f82b2.js","sources":["../../src/components/modal/modal.types.ts","../../src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariant {\n DEFAULT = 'BentoModalDefault',\n DIALOG = 'BentoModalDialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalSize {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalColumnLayoutVariant {\n SMALLER = 'smaller',\n EQUAL = 'equal',\n BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n DIALOG = 'dialog',\n ALERT_DIALOG = 'alertdialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalDialogType {\n CONFIRMATION = 'confirmation',\n DESTRUCTIVE = 'destructive',\n INFO = 'info',\n ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n CLOSE_MODAL = 'close-modal',\n}\n","<template>\n <div class=\"b-modal-base\">\n <dialog\n ref=\"modal\"\n :role=\"modalRole\"\n :aria-label=\"computedAriaLabel\"\n class=\"b-modal-base__container\"\n :class=\"modalConditionalClasses\"\n :open=\"initiallyOpen\"\n @animationend=\"closeModalAfterAnimation\"\n @click=\"isDismissible && closeModalOnClickOutside($event)\"\n @keydown.esc=\"internalModalActionClose\"\n >\n <bento-focus-trap>\n <div class=\"b-modal-base__wrapper\">\n <div\n v-if=\"hasSlot('default') || !hideCloseButton\"\n class=\"b-modal-base__header-container\"\n :style=\"customPaddingStyles.header\"\n >\n <div class=\"b-modal-base__header\">\n <bento-typography\n class=\"b-modal-base__title\"\n aria-label=\"base modal title\"\n el=\"span\"\n variant=\"title\"\n stronger\n >\n <slot v-if=\"hasSlot('default')\" />\n </bento-typography>\n <bento-button\n v-if=\"!hideCloseButton\"\n class=\"b-modal-base__close-button\"\n variant=\"tertiary\"\n type=\"button\"\n @click=\"internalModalActionClose\"\n >\n <cross-icon svg-title=\"close\" />\n </bento-button>\n </div>\n\n <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" />\n </div>\n\n <div\n class=\"b-modal-base__content\"\n :class=\"modalContentConditionalClasses\"\n :style=\"customPaddingStyles.content\"\n >\n <bento-typography\n v-if=\"hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))\"\n aria-label=\"base modal content\"\n el=\"div\"\n variant=\"body\"\n stronger\n >\n <grid-layout\n v-if=\"hasColumnLayout\"\n :column-width=\"computedColumnWidth\"\n :container-type=\"GridLayoutContainerType.NORMAL\"\n class=\"b-modal-base__grid\"\n >\n <template #col-1><slot name=\"content-col-1\"></slot></template>\n <template #col-2><slot name=\"content-col-2\"></slot></template>\n </grid-layout>\n <slot v-else name=\"content\" />\n </bento-typography>\n </div>\n\n <div\n v-if=\"hasSlot('actions')\"\n class=\"b-modal-base__actions-container\"\n :style=\"customPaddingStyles.actions\"\n >\n <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" />\n\n <div aria-label=\"modal actions\" class=\"b-modal-base__actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n </div>\n </bento-focus-trap>\n </dialog>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, onMounted, PropType, ref, useAttrs, watch } from 'vue';\n import {\n BentoModalColumnLayoutVariant,\n BentoModalEvent,\n BentoModalRole,\n BentoModalSize,\n } from '@/components/modal/modal.types';\n\n import { BentoTypography } from '@/components/typography';\n import { BentoButton, BentoButtonActionsList } from '@/components/button';\n import { BentoDivider } from '@/components/divider';\n import { BentoFocusTrap } from '@/components/focus-trap';\n import { GridLayout, GridLayoutContainerType } from '@/internal';\n import { useHasSlot } from '@/composables';\n import { useI18n } from '@/utils/ts/i18n';\n import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n export default defineComponent({\n i18n: { messages },\n name: 'base-modal',\n components: { CrossIcon, BentoTypography, BentoButton, BentoDivider, BentoFocusTrap, GridLayout },\n props: {\n /**\n * List of actions that will be used to render the buttons.\n * First element in the list will be rendered as \"primary\".\n * All elements after the first will be rendered as \"secondary\".\n * But you may change the color of 1-st action to red with 'critial' key\n * Not more than 3 action buttons can be provided\n * Or 2 action buttons and 1 Label for them\n *\n * Each object in the list should have a `title`, an `event` and\n * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n *\n * `title`: Button's text.\n *\n * `event`: Event triggered when clicking the Button.\n *\n * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n *\n * ```\n * [{\n * title: 'Primary',2\n * event: () => { ... },\n * icon: FourPeopleIcon\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * }]\n * ```\n */\n actions: {\n type: Array as PropType<BentoButtonActionsList>,\n default: null,\n },\n\n /**\n * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n */\n columnsSize: {\n type: String as PropType<BentoModalColumnLayoutVariant>,\n default: BentoModalColumnLayoutVariant.SMALLER,\n },\n\n /**\n * If provided, manages the padding of the whole modal container\n */\n customPadding: { type: String, default: null },\n\n /**\n * Hides a cross icon on the right side of the title\n */\n hideCloseButton: { type: Boolean, required: true },\n\n /**\n * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n */\n initiallyOpen: { type: Boolean, default: false },\n\n /**\n * If set to true, it allows the modal to be closed by clicking outside of it\n */\n isDismissible: { type: Boolean, required: true },\n\n /**\n * Controls the modal's state from the outside. Set it to true to open the modal\n */\n isOpen: { type: Boolean, required: true },\n\n /**\n * Defines whether the modal will be an alert modal\n */\n modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n /**\n * Allows the inner elments to overflow the dialog\n */\n overflowVisible: { type: Boolean, default: false },\n\n /**\n * Sets the width of the modal\n */\n size: {\n type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n default: BentoModalSize.SMALL,\n },\n\n /**\n * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n */\n withColumnLayout: { type: Boolean, default: false },\n },\n emits: [BentoModalEvent.CLOSE_MODAL],\n setup(props, { slots, emit }) {\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const attrs = useAttrs();\n const hasSlot = useHasSlot(slots);\n const modal = ref(null);\n const isClosing = ref(false);\n\n const customPaddingStyles = computed(() => {\n if (!props.customPadding) {\n return {};\n }\n\n const xPadding = {\n paddingLeft: props.customPadding,\n paddingRight: props.customPadding,\n };\n\n const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n if (!hasSlot('default')) {\n content.paddingTop = props.customPadding;\n }\n\n if (!hasSlot('actions')) {\n content.paddingBottom = props.customPadding;\n }\n\n return {\n header: { ...xPadding, paddingTop: props.customPadding },\n content,\n actions: { ...xPadding, paddingBottom: props.customPadding },\n };\n });\n\n const computedAriaLabel = computed(\n () => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string)\n );\n const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n const openModal = (): void => {\n modal.value.showModal();\n };\n\n const emitCloseEvent = (): void => {\n emit(BentoModalEvent.CLOSE_MODAL);\n };\n\n // Handle closing and closing animation for dialog element\n const closeModalAfterAnimation = () => {\n if (isClosing.value) {\n modal.value.close();\n emitCloseEvent();\n isClosing.value = false;\n }\n };\n\n const startCloseModalAnimation = () => {\n if (!modal.value.open) {\n return;\n }\n isClosing.value = true;\n };\n\n // If the user has pressed escape, clicked outside or clicked the close icon\n const internalModalActionClose = (event?: Event) => {\n if (event) {\n event.preventDefault();\n }\n if (!props.isDismissible) {\n return;\n }\n startCloseModalAnimation();\n };\n\n /**\n * Since the dialog HTML element doesn't automatically close when clicking outside, a check on when the user is clicking is needed.\n * If the click doesn't happen in the dialog box itself, the modal closes\n */\n const closeModalOnClickOutside = ({ target }: Event): void => {\n if (target && (target as HTMLElement).tagName === BentoModalRole.DIALOG.toUpperCase()) {\n internalModalActionClose();\n }\n };\n\n const modalConditionalClasses = computed(() => ({\n [`b-modal-base__container--${props.size}`]: props.size,\n 'b-modal-base__container--hide': isClosing.value,\n 'b-modal-base__container--overflow-visible': props.overflowVisible,\n 'b-modal-base__container--column-layout': hasColumnLayout.value,\n }));\n\n const modalContentConditionalClasses = computed(() => ({\n 'b-modal-base__content--column-layout': hasColumnLayout.value,\n 'b-modal-base__content--with-header': hasSlot('default'),\n 'b-modal-base__content--with-actions': hasSlot('actions'),\n }));\n\n const computedColumnWidth = computed(() => {\n if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n return [{ small: 4, medium: 4, large: 4 }];\n }\n if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n return [{ small: 8, medium: 8, large: 8 }];\n }\n return [{ small: 6, medium: 6, large: 6 }];\n });\n\n watch(\n () => [props.isOpen, modal.value],\n ([newIsOpen, newModalValue], [, oldModalValue]): void => {\n if (!newModalValue) {\n return;\n }\n\n const isFirstMutation = !oldModalValue;\n if (newIsOpen) {\n openModal();\n } else if (!isFirstMutation) {\n startCloseModalAnimation();\n }\n }\n );\n\n // If the first button is a loading button then close the modal have 0.5 seconds\n // if the state is changed to 'success'.\n watch(\n () => props.actions,\n () => {\n if (props.actions?.[0]?.state === 'success') {\n setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n }\n },\n { deep: true }\n );\n\n onMounted(() => {\n if (props.isOpen && modal.value) {\n openModal();\n }\n });\n\n return {\n // Refs\n modal,\n computedAriaLabel,\n\n // Handling the state\n openModal,\n closeModalOnClickOutside,\n closeModalAfterAnimation,\n startCloseModalAnimation,\n\n // Methods\n internalModalActionClose,\n hasSlot,\n emitCloseEvent,\n t,\n\n // Styles\n modalConditionalClasses,\n modalContentConditionalClasses,\n customPaddingStyles,\n hasColumnLayout,\n computedColumnWidth,\n\n // Enums\n GridLayoutContainerType,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME","_sfc_main","defineComponent","messages","CrossIcon","BentoTypography","BentoButton","BentoDivider","BentoFocusTrap","GridLayout","props","slots","emit","t","useI18n","attrs","useAttrs","hasSlot","useHasSlot","modal","ref","isClosing","customPaddingStyles","computed","xPadding","content","computedAriaLabel","hasColumnLayout","openModal","emitCloseEvent","closeModalAfterAnimation","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","target","modalConditionalClasses","modalContentConditionalClasses","computedColumnWidth","watch","newIsOpen","newModalValue","oldModalValue","_b","_a","onMounted","GridLayoutContainerType"],"mappings":"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"}
|
package/dist/chunks/{button-actions-with-menu.a5413243.js → button-actions-with-menu.9d1365e9.js}
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
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.
|
|
2
|
+
import { M as d, B as p } from "./index.9da73645.js";
|
|
3
3
|
import { BentoPopoverPositions as _ } from "../popover.js";
|
|
4
4
|
import { BentoButtonActions as l } from "../button.js";
|
|
5
5
|
import { n as m } from "./_plugin-vue2_normalizer.71e2aa87.js";
|
|
@@ -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.9d1365e9.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-actions-with-menu.
|
|
1
|
+
{"version":3,"file":"button-actions-with-menu.9d1365e9.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,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent as f, computed as i } from "vue";
|
|
2
|
-
import { B as m } from "./index.
|
|
2
|
+
import { B as m } from "./index.4de86bd4.js";
|
|
3
3
|
import { u as y } from "./use-has-slot.6052d56a.js";
|
|
4
4
|
import { BentoLink as p, BentoLinkVariant as v } from "../link.js";
|
|
5
5
|
import { n as S } from "./_plugin-vue2_normalizer.71e2aa87.js";
|
|
@@ -122,4 +122,4 @@ export {
|
|
|
122
122
|
L as a,
|
|
123
123
|
o as b
|
|
124
124
|
};
|
|
125
|
-
//# sourceMappingURL=button.
|
|
125
|
+
//# sourceMappingURL=button.1dfed6fa.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.
|
|
1
|
+
{"version":3,"file":"button.1dfed6fa.js","sources":["../../../core/src/components/button/button.types.ts","../../src/components/button/button.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoButtonVariant {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n TERTIARY = 'tertiary',\n}\n\nexport enum BentoButtonPropClass {\n CONDENSED = 'condensed',\n DESTRUCTIVE = 'critical',\n DISABLED = 'disabled',\n ICON_ONLY = 'icon-only',\n INVERSE = 'inverse',\n}\n\nexport interface BentoButtonProps {\n condensed?: boolean;\n critical?: boolean;\n disabled?: boolean;\n inverse?: boolean;\n variant?: BentoButtonVariant;\n type?: string;\n link?: object;\n}\n","<template>\n <component\n :is=\"componentType\"\n v-bind=\"componentProps\"\n class=\"b-button\"\n :class=\"conditionalClasses\"\n @click.capture=\"onClickButton\"\n >\n <span v-if=\"hasSlot('iconLeft')\" class=\"b-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-button__label\">\n <slot />\n </bento-typography>\n <span v-if=\"hasSlot('iconRight')\" class=\"b-button__icon-right\" data-testid=\"icon-button-right\">\n <slot name=\"iconRight\" />\n </span>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { BentoButtonPropClass, BentoButtonVariant } from '@/core/components/button/button.types';\n import { BentoTypography } from '@/components/typography';\n import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n import { Booleanish } from '@/types/prop-types';\n import type { RouterLinkProps } from 'vue-router/types/router';\n import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx';\n import { BentoLink, BentoLinkVariant } from '@/components/link';\n\n // TODO: replace all this code when migrated to Vue 3 is complete as this is the only\n // current way to extend the `router-link` component in Vue 2 and Vue Router 3\n export interface LinkProps extends RouterLinkProps, AnchorHTMLAttributes {\n // eslint-disable-next-line vue/require-default-prop\n args?: { props: RouterLinkProps };\n\n /**\n * Set the rendered link to a regular external anchor link.\n */\n external: boolean;\n }\n\n /**\n * Button component for all the various types of bento buttons.\n *\n * @usage\n * import { BentoButton, AdlIconPosition } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoButton },\n * template: `\n * <bento-button\n * disabled\n * :icon-position=\"AdlIconPosition.AFTER\"\n * >\n * Button text\n * </bento-button>\n * `,\n * }\n */\n export default defineComponent({\n name: 'bento-button',\n components: { BentoTypography },\n props: {\n /**\n * Reduces sizing of button\n */\n condensed: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Displays button as critical\n */\n critical: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Disables button functionality\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Sets color set to inverse\n */\n inverse: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.\n */\n link: {\n type: Object,\n default: undefined,\n },\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 /**\n * Types of flavour of Button\n * @values primary, secondary, tertiary\n */\n variant: {\n type: String as PropType<BentoButtonVariant | `${BentoButtonVariant}`>,\n default: BentoButtonVariant.PRIMARY,\n validator: (value: BentoButtonVariant) => Object.values(BentoButtonVariant).includes(value),\n },\n },\n emits: ['click', 'focus', 'blur', 'keydown.esc'],\n setup(props, { slots, emit, attrs }) {\n const componentType = computed(() => {\n if (props?.link !== undefined) {\n return BentoLink;\n }\n return 'button';\n });\n const ariaAttributes = computed(() => ({\n 'aria-controls': attrs['aria-controls']?.toString() as string,\n 'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n }));\n\n const componentProps = computed(() =>\n componentType.value === 'button'\n ? {\n ...ariaAttributes.value,\n disabled: props.disabled,\n type: props.type,\n }\n : { ...props.link, disableTypography: true, variant: BentoLinkVariant.DEFAULT }\n );\n\n const variantClass = computed((): { [x: string]: boolean } => ({\n [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true,\n }));\n\n const conditionalClasses = computed(\n (): {\n [x: string]: boolean;\n } => ({\n ...variantClass.value,\n [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed,\n [`b-button--${BentoButtonPropClass.DISABLED}`]: props.disabled,\n [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !slots.default,\n [`b-button--${BentoButtonPropClass.INVERSE}`]: props.inverse,\n })\n );\n\n const onClickButton = (e: MouseEvent) => {\n if (!props.disabled) {\n emit('click', e);\n } else {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n return {\n // Values\n ariaAttributes,\n conditionalClasses,\n componentType,\n componentProps,\n\n // Methods\n onClickButton,\n hasSlot: useHasSlot(slots),\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/button/button.scss\" />\n"],"names":["BentoButtonVariant","BentoButtonVariant2","BentoButtonPropClass","BentoButtonPropClass2","_sfc_main","defineComponent","BentoTypography","value","props","slots","emit","attrs","componentType","computed","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","e","useHasSlot"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { defineComponent as ae, computed as h, ref as x, watch as Y, nextTick as _e, toRef as C, reactive as ve } from "vue";
|
|
2
2
|
import { r as y, t as _, g as le, e as te, d as ge, f as ye } from "./index.f55fdc32.js";
|
|
3
|
-
import { t as T, B as he, a as Ne, f as ie } from "./index.
|
|
4
|
-
import { a as Ee } from "./button.
|
|
5
|
-
import { B as Te } from "./index.
|
|
3
|
+
import { t as T, B as he, a as Ne, f as ie } from "./index.c2dde601.js";
|
|
4
|
+
import { a as Ee } from "./button.1dfed6fa.js";
|
|
5
|
+
import { B as Te } from "./index.4de86bd4.js";
|
|
6
6
|
import { u as be } from "./i18n.155748d6.js";
|
|
7
7
|
import { g as Me } from "./unique-id.a2a2b458.js";
|
|
8
8
|
import { C as Se, a as Oe } from "./chevron-left.c10778d3.js";
|
|
@@ -818,4 +818,4 @@ export {
|
|
|
818
818
|
U as b,
|
|
819
819
|
F as i
|
|
820
820
|
};
|
|
821
|
-
//# sourceMappingURL=calendar.
|
|
821
|
+
//# sourceMappingURL=calendar.10c1c697.js.map
|