@adyen/bento-vue3 1.79.1 → 1.80.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@types/index.d.ts +397 -918
- package/dist/action-bar.js +1 -1
- package/dist/assets/accordion-item.css +1 -1
- package/dist/assets/action-bar.css +1 -1
- package/dist/assets/base-modal.css +1 -1
- package/dist/assets/button-actions.css +1 -1
- package/dist/assets/card.css +1 -1
- package/dist/assets/data-grid.css +1 -1
- package/dist/assets/date-picker.css +1 -1
- package/dist/assets/dialog-page.css +1 -1
- package/dist/assets/file-uploader.css +1 -1
- package/dist/assets/filter-bar.css +1 -1
- package/dist/assets/focus-trap.css +1 -1
- package/dist/assets/inspector.css +1 -1
- package/dist/assets/modal-fullscreen.css +1 -1
- package/dist/assets/sidepanel.css +1 -1
- package/dist/assets/timeline-item.css +1 -1
- package/dist/button.js +1 -1
- package/dist/card.js +1 -1
- package/dist/checkbox.js +3 -3
- package/dist/chunks/{action-bar.QX16Mu4L.js → action-bar.C4v95Cp5.js} +3 -3
- package/dist/chunks/{action-bar.QX16Mu4L.js.map → action-bar.C4v95Cp5.js.map} +1 -1
- package/dist/chunks/{base-modal.CHYvJ_xU.js → base-modal.DoMod4Z4.js} +3 -3
- package/dist/chunks/{base-modal.CHYvJ_xU.js.map → base-modal.DoMod4Z4.js.map} +1 -1
- package/dist/chunks/{button-actions-with-menu.B8qBBN82.js → button-actions-with-menu.BZ1cNOvQ.js} +2 -2
- package/dist/chunks/{button-actions-with-menu.B8qBBN82.js.map → button-actions-with-menu.BZ1cNOvQ.js.map} +1 -1
- package/dist/chunks/{button-actions.Bg38lywL.js → button-actions.C-dLiuIO.js} +2 -2
- package/dist/chunks/{button-actions.Bg38lywL.js.map → button-actions.C-dLiuIO.js.map} +1 -1
- package/dist/chunks/{card.BqkufnQe.js → card.CvEtsRsw.js} +2 -2
- package/dist/chunks/{card.BqkufnQe.js.map → card.CvEtsRsw.js.map} +1 -1
- package/dist/chunks/{checkbox-group.BRQiuU3y.js → checkbox-group.DEvATYiK.js} +6 -6
- package/dist/chunks/{checkbox-group.BRQiuU3y.js.map → checkbox-group.DEvATYiK.js.map} +1 -1
- package/dist/chunks/{checkbox.BRTK_DHj.js → checkbox.BIT67SNO.js} +3 -3
- package/dist/chunks/{checkbox.BRTK_DHj.js.map → checkbox.BIT67SNO.js.map} +1 -1
- package/dist/chunks/{code-snippet.YxZ3_4ye.js → code-snippet.CnkSxC1n.js} +4 -4
- package/dist/chunks/{code-snippet.YxZ3_4ye.js.map → code-snippet.CnkSxC1n.js.map} +1 -1
- package/dist/chunks/{controls-group.CJe5J84d.js → controls-group.B2Qci77U.js} +2 -2
- package/dist/chunks/{controls-group.CJe5J84d.js.map → controls-group.B2Qci77U.js.map} +1 -1
- package/dist/chunks/{copy.mq0o1Rag.js → copy.D5CBHqUB.js} +3 -3
- package/dist/chunks/{copy.mq0o1Rag.js.map → copy.D5CBHqUB.js.map} +1 -1
- package/dist/chunks/{dashboard-section.CNCqp74F.js → dashboard-section.CJa7cm4o.js} +2 -2
- package/dist/chunks/{dashboard-section.CNCqp74F.js.map → dashboard-section.CJa7cm4o.js.map} +1 -1
- package/dist/chunks/{dashed-underline.CtTu1AOE.js → dashed-underline.BzWB6Q4E.js} +3 -3
- package/dist/chunks/{dashed-underline.CtTu1AOE.js.map → dashed-underline.BzWB6Q4E.js.map} +1 -1
- package/dist/chunks/{data-grid-template.CLpaJvTj.js → data-grid-template.CVPMnQcb.js} +3 -3
- package/dist/chunks/{data-grid-template.CLpaJvTj.js.map → data-grid-template.CVPMnQcb.js.map} +1 -1
- package/dist/chunks/{data-grid.CD3Nb4pg.js → data-grid.O3irn4sl.js} +518 -509
- package/dist/chunks/data-grid.O3irn4sl.js.map +1 -0
- package/dist/chunks/{date-picker.C3BH0Bsr.js → date-picker.9zM8Cx1u.js} +88 -87
- package/dist/chunks/date-picker.9zM8Cx1u.js.map +1 -0
- package/dist/chunks/{date-range-picker.BPZE6r01.js → date-range-picker.DI-2cYg5.js} +6 -6
- package/dist/chunks/{date-range-picker.BPZE6r01.js.map → date-range-picker.DI-2cYg5.js.map} +1 -1
- package/dist/chunks/{dropdown-tag.B0LtUuUk.js → dropdown-tag.moDZXXVR.js} +3 -3
- package/dist/chunks/{dropdown-tag.B0LtUuUk.js.map → dropdown-tag.moDZXXVR.js.map} +1 -1
- package/dist/chunks/{dropdown.B5tPWVxg.js → dropdown.DedOkb8I.js} +5 -5
- package/dist/chunks/{dropdown.B5tPWVxg.js.map → dropdown.DedOkb8I.js.map} +1 -1
- package/dist/chunks/es6.MoTTyETW.js.map +1 -1
- package/dist/chunks/{field-label.B1rMWIWY.js → field-label.Cu6X9V0_.js} +2 -2
- package/dist/chunks/{field-label.B1rMWIWY.js.map → field-label.Cu6X9V0_.js.map} +1 -1
- package/dist/chunks/{file-uploader.BwmQdkmz.js → file-uploader.B7Mbz48o.js} +3 -3
- package/dist/chunks/{file-uploader.BwmQdkmz.js.map → file-uploader.B7Mbz48o.js.map} +1 -1
- package/dist/chunks/filter-bar.CzMIJP2V.js +3199 -0
- package/dist/chunks/filter-bar.CzMIJP2V.js.map +1 -0
- package/dist/chunks/{focus-trap.CpNGD7PH.js → focus-trap.BaHvK7aT.js} +54 -51
- package/dist/chunks/focus-trap.BaHvK7aT.js.map +1 -0
- package/dist/chunks/{footer-actions.pC1mxLQm.js → footer-actions.DTbfJdED.js} +2 -2
- package/dist/chunks/{footer-actions.pC1mxLQm.js.map → footer-actions.DTbfJdED.js.map} +1 -1
- package/dist/chunks/{header-meta.DZ8Gx4XE.js → header-meta.D_ChP1El.js} +3 -3
- package/dist/chunks/{header-meta.DZ8Gx4XE.js.map → header-meta.D_ChP1El.js.map} +1 -1
- package/dist/chunks/{header-with-views.b1gt2wud.js → header-with-views.CjF-jtB0.js} +8 -8
- package/dist/chunks/{header-with-views.b1gt2wud.js.map → header-with-views.CjF-jtB0.js.map} +1 -1
- package/dist/chunks/{header.BQAAmjUF.js → header.DzaZc0dQ.js} +3 -3
- package/dist/chunks/{header.BQAAmjUF.js.map → header.DzaZc0dQ.js.map} +1 -1
- package/dist/chunks/{info-icon.DB0MI-dH.js → info-icon.C7RAAeQQ.js} +3 -3
- package/dist/chunks/{info-icon.DB0MI-dH.js.map → info-icon.C7RAAeQQ.js.map} +1 -1
- package/dist/chunks/{input-field-password.noxsH61p.js → input-field-password.Bu97g6Ot.js} +5 -5
- package/dist/chunks/{input-field-password.noxsH61p.js.map → input-field-password.Bu97g6Ot.js.map} +1 -1
- package/dist/chunks/{input-field-phone-number.B_uFvUXP.js → input-field-phone-number.Bold8Mln.js} +3 -3
- package/dist/chunks/{input-field-phone-number.B_uFvUXP.js.map → input-field-phone-number.Bold8Mln.js.map} +1 -1
- package/dist/chunks/{input-field.C9ABE4cI.js → input-field.BGwhh69z.js} +3 -3
- package/dist/chunks/{input-field.C9ABE4cI.js.map → input-field.BGwhh69z.js.map} +1 -1
- package/dist/chunks/{inspector.BKP15cx6.js → inspector.BBhrSgO6.js} +2 -2
- package/dist/chunks/{inspector.BKP15cx6.js.map → inspector.BBhrSgO6.js.map} +1 -1
- package/dist/chunks/{listbox-option-tag.C1cZs38g.js → listbox-option-tag.VRGb_04i.js} +2 -2
- package/dist/chunks/{listbox-option-tag.C1cZs38g.js.map → listbox-option-tag.VRGb_04i.js.map} +1 -1
- package/dist/chunks/{modal-fullscreen.B69QJ8D6.js → modal-fullscreen.B8SjtIoX.js} +3 -3
- package/dist/chunks/{modal-fullscreen.B69QJ8D6.js.map → modal-fullscreen.B8SjtIoX.js.map} +1 -1
- package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.BYqbdsty.js → modal.vue_vue_type_script_setup_true_lang.Jj1Lcx13.js} +4 -4
- package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.BYqbdsty.js.map → modal.vue_vue_type_script_setup_true_lang.Jj1Lcx13.js.map} +1 -1
- package/dist/chunks/{pagination.Dst8Y6DD.js → pagination.C8NKDQvi.js} +2 -2
- package/dist/chunks/{pagination.Dst8Y6DD.js.map → pagination.C8NKDQvi.js.map} +1 -1
- package/dist/chunks/popover.types.DgfeurkF.js +6 -0
- package/dist/chunks/{popover.types.BFFy1ChU.js.map → popover.types.DgfeurkF.js.map} +1 -1
- package/dist/chunks/{popper-container.Uod3yjsR.js → popper-container.I9gzp1NR.js} +2 -2
- package/dist/chunks/{popper-container.Uod3yjsR.js.map → popper-container.I9gzp1NR.js.map} +1 -1
- package/dist/chunks/{radio-group.CVDDBCP4.js → radio-group.C0qJThJ2.js} +4 -4
- package/dist/chunks/{radio-group.CVDDBCP4.js.map → radio-group.C0qJThJ2.js.map} +1 -1
- package/dist/chunks/{rich-text-editor.DyC-Nnc8.js → rich-text-editor.DYx5i67c.js} +4 -4
- package/dist/chunks/{rich-text-editor.DyC-Nnc8.js.map → rich-text-editor.DYx5i67c.js.map} +1 -1
- package/dist/chunks/{search-bar.BwrFcw9L.js → search-bar.DQ-9ejqq.js} +3 -3
- package/dist/chunks/{search-bar.BwrFcw9L.js.map → search-bar.DQ-9ejqq.js.map} +1 -1
- package/dist/chunks/{secondary-nav.D7l9h0_t.js → secondary-nav.C4_UkHBv.js} +2 -2
- package/dist/chunks/{secondary-nav.D7l9h0_t.js.map → secondary-nav.C4_UkHBv.js.map} +1 -1
- package/dist/chunks/{segmented-control.CwDOwDIu.js → segmented-control.PlGfqyxH.js} +2 -2
- package/dist/chunks/{segmented-control.CwDOwDIu.js.map → segmented-control.PlGfqyxH.js.map} +1 -1
- package/dist/chunks/{selection-card-group.CZfusjo0.js → selection-card-group.CudK75gJ.js} +3 -3
- package/dist/chunks/{selection-card-group.CZfusjo0.js.map → selection-card-group.CudK75gJ.js.map} +1 -1
- package/dist/chunks/{sidepanel.BFz_7DKg.js → sidepanel.BmlRQuWw.js} +3 -3
- package/dist/chunks/{sidepanel.BFz_7DKg.js.map → sidepanel.BmlRQuWw.js.map} +1 -1
- package/dist/chunks/{structured-list-item.DjbvVIwI.js → structured-list-item.CsUD3M_V.js} +4 -4
- package/dist/chunks/{structured-list-item.DjbvVIwI.js.map → structured-list-item.CsUD3M_V.js.map} +1 -1
- package/dist/chunks/{summary-grid.types.KVqau_I-.js → summary-grid.types.Bs4dbLqr.js} +5 -5
- package/dist/chunks/{summary-grid.types.KVqau_I-.js.map → summary-grid.types.Bs4dbLqr.js.map} +1 -1
- package/dist/chunks/{tag.BmMnGJMp.js → tag.EDED27n5.js} +2 -2
- package/dist/chunks/{tag.BmMnGJMp.js.map → tag.EDED27n5.js.map} +1 -1
- package/dist/chunks/{textarea.BZjnJf5q.js → textarea.7MePsezm.js} +2 -2
- package/dist/chunks/{textarea.BZjnJf5q.js.map → textarea.7MePsezm.js.map} +1 -1
- package/dist/chunks/timeline-item.BKS_D2Rm.js +428 -0
- package/dist/chunks/timeline-item.BKS_D2Rm.js.map +1 -0
- package/dist/chunks/{tooltip.CeX5eGnw.js → tooltip.B76ucISL.js} +2 -2
- package/dist/chunks/{tooltip.CeX5eGnw.js.map → tooltip.B76ucISL.js.map} +1 -1
- package/dist/chunks/{tutorial.vue_vue_type_script_setup_true_lang.Cqimmacx.js → tutorial.vue_vue_type_script_setup_true_lang.DAFpeoOd.js} +4 -4
- package/dist/chunks/{tutorial.vue_vue_type_script_setup_true_lang.Cqimmacx.js.map → tutorial.vue_vue_type_script_setup_true_lang.DAFpeoOd.js.map} +1 -1
- package/dist/chunks/{use-cached-selected-values.os3Yp7Tw.js → use-cached-selected-values.DCxMCy_n.js} +2 -2
- package/dist/chunks/{use-cached-selected-values.os3Yp7Tw.js.map → use-cached-selected-values.DCxMCy_n.js.map} +1 -1
- package/dist/code-snippet.js +1 -1
- package/dist/dashboard-template.js +1 -1
- package/dist/dashed-underline.js +1 -1
- package/dist/data-grid-template.js +1 -1
- package/dist/data-grid.js +1 -1
- package/dist/date-picker.js +1 -1
- package/dist/date-range-picker.js +1 -1
- package/dist/dropdown.js +3 -3
- package/dist/file-uploader.js +1 -1
- package/dist/filter-bar.js +1 -1
- package/dist/focus-trap.js +1 -1
- package/dist/header-with-views.js +1 -1
- package/dist/header.js +1 -1
- package/dist/index.js +358 -395
- package/dist/index.js.map +1 -1
- package/dist/info-icon.js +1 -1
- package/dist/input-field-password.js +1 -1
- package/dist/input-field-phone-number.js +1 -1
- package/dist/input-field.js +1 -1
- package/dist/inspector.js +1 -1
- package/dist/internal.js +9 -9
- package/dist/menu.js +1 -1
- package/dist/modal-fullscreen.js +1 -1
- package/dist/modal.js +2 -2
- package/dist/pagination.js +1 -1
- package/dist/popover.js +2 -2
- package/dist/popper-container.js +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/rich-text-editor.js +1 -1
- package/dist/search-bar.js +2 -2
- package/dist/secondary-nav.js +1 -1
- package/dist/segmented-control.js +1 -1
- package/dist/selection-card.js +1 -1
- package/dist/sidepanel.js +1 -1
- package/dist/structured-list.js +1 -1
- package/dist/styles/bento-dark.css +4 -0
- package/dist/styles/bento-light.css +4 -0
- package/dist/styles/bento.css +4 -0
- package/dist/styles/legacy.css +4 -0
- package/dist/styles/styleguide.css +4 -0
- package/dist/summary-grid.js +1 -1
- package/dist/tag.js +1 -1
- package/dist/textarea.js +1 -1
- package/dist/timeline.js +1 -1
- package/dist/tutorial.js +1 -1
- package/dist/web-types.json +1 -1
- package/package.json +5 -5
- package/dist/chunks/data-grid.CD3Nb4pg.js.map +0 -1
- package/dist/chunks/date-picker.C3BH0Bsr.js.map +0 -1
- package/dist/chunks/filter-bar.B9yGivxl.js +0 -2986
- package/dist/chunks/filter-bar.B9yGivxl.js.map +0 -1
- package/dist/chunks/focus-trap.CpNGD7PH.js.map +0 -1
- package/dist/chunks/popover.types.BFFy1ChU.js +0 -6
- package/dist/chunks/timeline-item.YjC_8BBB.js +0 -556
- package/dist/chunks/timeline-item.YjC_8BBB.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
button[data-v-3556e231]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-3556e231]:focus-visible{outline:none}.b-filter-bar-button[data-v-3556e231]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:none;-moz-appearance:none;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;padding:var(--b-filter-bar-button-container-padding);text-decoration:none;-webkit-user-select:none;user-select:none}.b-filter-bar-button[data-v-3556e231],.b-filter-bar-button[data-v-3556e231]:before,.b-filter-bar-button[data-v-3556e231]:after{box-sizing:border-box}.b-filter-bar-button[data-v-3556e231] *,.b-filter-bar-button[data-v-3556e231] *:before,.b-filter-bar-button[data-v-3556e231] *:after{box-sizing:border-box}.b-filter-bar-button[data-v-3556e231] ::-webkit-scrollbar{height:14px;width:14px}.b-filter-bar-button[data-v-3556e231] ::-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-3556e231]: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__secondary-label[data-v-3556e231]{color:var(--b-filter-bar-button-hover-color)}.b-filter-bar-button:hover .b-filter-bar-button__counter[data-v-3556e231]{background-color:var(--b-filter-bar-button-counter-hover-background-color);color:var(--b-filter-bar-button-counter-hover-color)}}.b-filter-bar-button[data-v-3556e231]:disabled,.b-filter-bar-button[data-v-3556e231]: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__secondary-label[data-v-3556e231],.b-filter-bar-button:disabled:not(:focus) .b-filter-bar-button__secondary-label[data-v-3556e231]{color:var(--b-filter-bar-button-disabled-color)}.b-filter-bar-button:disabled .b-filter-bar-button__counter[data-v-3556e231],.b-filter-bar-button:disabled:not(:focus) .b-filter-bar-button__counter[data-v-3556e231]{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-3556e231]:focus-visible{animation:outer-ring-default-3556e231 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-3556e231{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--icon-only[data-v-3556e231]{padding:var(--b-filter-bar-button-icon-only-padding)}.b-filter-bar-button--icon-only .b-filter-bar-button__container[data-v-3556e231]{display:flex;gap:0}.b-filter-bar-button--filter-open[data-v-3556e231]:not(:hover){background-color:var(--b-filter-bar-button-filter-open-background-color);border:var(--b-filter-bar-button-filter-open-border);color:var(--b-filter-bar-button-filter-open-color)}.b-filter-bar-button--filter-open-applied[data-v-3556e231]:not(:hover){background-color:var(--b-filter-bar-button-applied-filter-open-background-color);border:var(--b-filter-bar-button-applied-filter-open-border);color:var(--b-filter-bar-button-applied-filter-open-color)}.b-filter-bar-button--with-counter[data-v-3556e231]:not(.b-filter-bar-button--icon-only){padding-right:var(--b-filter-bar-button-with-counter-padding-right)}.b-filter-bar-button--with-counter:not(.b-filter-bar-button--icon-only) .b-filter-bar-button__container[data-v-3556e231]{padding-right:var(--b-filter-bar-button-with-counter-container-padding-right)}.b-filter-bar-button--applied[data-v-3556e231]{background-color:var(--b-filter-bar-button-applied-background-color);border:var(--b-filter-bar-button-applied-border);color:var(--b-filter-bar-button-applied-color)}.b-filter-bar-button--applied .b-filter-bar-button__secondary-label[data-v-3556e231]{color:var(--b-filter-bar-button-applied-color)}.b-filter-bar-button--applied[data-v-3556e231]:hover{background-color:var(--b-filter-bar-button-applied-hover-background-color);border:var(--b-filter-bar-button-applied-hover-border);color:var(--b-filter-bar-button-applied-hover-color)}.b-filter-bar-button--applied:hover .b-filter-bar-button__secondary-label[data-v-3556e231]{color:var(--b-filter-bar-button-applied-hover-color)}.b-filter-bar-button--applied[data-v-3556e231]:disabled,.b-filter-bar-button--applied[data-v-3556e231]:disabled:not(:focus){background-color:var(--b-filter-bar-button-applied-disabled-background-color);border:var(--b-filter-bar-button-applied-disabled-border);color:var(--b-filter-bar-button-applied-disabled-color)}.b-filter-bar-button--applied:disabled .b-filter-bar-button__secondary-label[data-v-3556e231],.b-filter-bar-button--applied:disabled:not(:focus) .b-filter-bar-button__secondary-label[data-v-3556e231]{color:var(--b-filter-bar-button-applied-disabled-color)}.b-filter-bar-button__container[data-v-3556e231]{align-items:center;display:flex;gap:var(--b-filter-bar-button-container-gap);justify-content:center;vertical-align:bottom}.b-filter-bar-button__counter[data-v-3556e231]{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);padding:var(--b-filter-bar-button-counter-padding)}.b-filter-bar-button__label-container[data-v-3556e231]{align-items:center;display:inline-flex;gap:var(--b-filter-bar-button-label-container-gap)}.b-filter-bar-button__label[data-v-3556e231],.b-filter-bar-button__secondary-label[data-v-3556e231]{display:inline-flex;line-height:var(--b-filter-bar-button-label-line-height);vertical-align:middle}.b-filter-bar-button__icon-left[data-v-3556e231],.b-filter-bar-button__icon-right[data-v-3556e231]{display:inline-flex}button[data-v-9ce16194]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-9ce16194]:focus-visible{outline:none}.b-filter-bar-button-group[data-v-9ce16194]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex}.b-filter-bar-button-group[data-v-9ce16194],.b-filter-bar-button-group[data-v-9ce16194]:before,.b-filter-bar-button-group[data-v-9ce16194]:after{box-sizing:border-box}.b-filter-bar-button-group[data-v-9ce16194] *,.b-filter-bar-button-group[data-v-9ce16194] *:before,.b-filter-bar-button-group[data-v-9ce16194] *:after{box-sizing:border-box}.b-filter-bar-button-group[data-v-9ce16194] ::-webkit-scrollbar{height:14px;width:14px}.b-filter-bar-button-group[data-v-9ce16194] ::-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-button-group--grouped[data-v-9ce16194] button:first-child{border-end-end-radius:0;border-start-end-radius:0}.b-filter-bar-button-group--grouped[data-v-9ce16194] button:last-child{border-end-start-radius:0;border-start-start-radius:0}.b-filter-bar-button-group--grouped[data-v-9ce16194] button:not(:last-child){border-inline-end:var(--b-filter-bar-button-group-button-border);padding-inline-end:var(--b-filter-bar-button-group-button-padding)}.b-filter-bar-button-group--grouped[data-v-9ce16194] button:not(:last-child):hover{border-inline-end:var(--b-filter-bar-button-group-button-hover-border)}.b-filter-bar-button-group--grouped[data-v-9ce16194] button:not(:first-child){border-inline-start:var(--b-filter-bar-button-group-button-border);padding-inline-start:var(--b-filter-bar-button-group-button-padding)}.b-filter-bar-button-group--grouped[data-v-9ce16194] button:not(:first-child):hover{border-inline-start:var(--b-filter-bar-button-group-button-hover-border)}.b-filter-bar-button-group--grouped.b-filter-bar-button-group--active[data-v-9ce16194] button:not(:last-child){border-inline-end:var(--b-filter-bar-button-group-button-active-border)}.b-filter-bar-button-group--grouped.b-filter-bar-button-group--active[data-v-9ce16194] button:not(:first-child){border-inline-start:var(--b-filter-bar-button-group-button-active-border)}.b-base-filter[data-v-0b7847c0]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;flex-shrink:0}.b-base-filter[data-v-0b7847c0],.b-base-filter[data-v-0b7847c0]:before,.b-base-filter[data-v-0b7847c0]:after{box-sizing:border-box}.b-base-filter[data-v-0b7847c0] *,.b-base-filter[data-v-0b7847c0] *:before,.b-base-filter[data-v-0b7847c0] *:after{box-sizing:border-box}.b-base-filter[data-v-0b7847c0] ::-webkit-scrollbar{height:14px;width:14px}.b-base-filter[data-v-0b7847c0] ::-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[data-v-57f2a128]{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-57f2a128],.b-input-filter[data-v-57f2a128]:before,.b-input-filter[data-v-57f2a128]:after{box-sizing:border-box}.b-input-filter[data-v-57f2a128] *,.b-input-filter[data-v-57f2a128] *:before,.b-input-filter[data-v-57f2a128] *:after{box-sizing:border-box}.b-input-filter[data-v-57f2a128] ::-webkit-scrollbar{height:14px;width:14px}.b-input-filter[data-v-57f2a128] ::-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-57f2a128]{padding:var(--b-filter-bar-input-filter-only-slot-padding)}.b-input-with-dropdown-filter[data-v-db04529c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:var(--b-filter-bar-input-with-dropdown-filter-padding)}.b-input-with-dropdown-filter[data-v-db04529c],.b-input-with-dropdown-filter[data-v-db04529c]:before,.b-input-with-dropdown-filter[data-v-db04529c]:after{box-sizing:border-box}.b-input-with-dropdown-filter[data-v-db04529c] *,.b-input-with-dropdown-filter[data-v-db04529c] *:before,.b-input-with-dropdown-filter[data-v-db04529c] *:after{box-sizing:border-box}.b-input-with-dropdown-filter[data-v-db04529c] ::-webkit-scrollbar{height:14px;width:14px}.b-input-with-dropdown-filter[data-v-db04529c] ::-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-with-dropdown-filter--only-slot[data-v-db04529c]{padding:var(--b-filter-bar-input-with-dropdown-filter-only-slot-padding)}.b-date-filter[data-v-28d8abb7]{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-28d8abb7],.b-date-filter[data-v-28d8abb7]:before,.b-date-filter[data-v-28d8abb7]:after{box-sizing:border-box}.b-date-filter[data-v-28d8abb7] *,.b-date-filter[data-v-28d8abb7] *:before,.b-date-filter[data-v-28d8abb7] *:after{box-sizing:border-box}.b-date-filter[data-v-28d8abb7] ::-webkit-scrollbar{height:14px;width:14px}.b-date-filter[data-v-28d8abb7] ::-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-28d8abb7]{margin-top:var(--b-filter-bar-date-filter-divider-margin-top)}@container (max-width: 260px){.b-base-filter-date-range-filter[data-v-e3901321] .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-e3901321]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-date-range-filter[data-v-e3901321],.b-date-range-filter[data-v-e3901321]:before,.b-date-range-filter[data-v-e3901321]:after{box-sizing:border-box}.b-date-range-filter[data-v-e3901321] *,.b-date-range-filter[data-v-e3901321] *:before,.b-date-range-filter[data-v-e3901321] *:after{box-sizing:border-box}.b-date-range-filter[data-v-e3901321] ::-webkit-scrollbar{height:14px;width:14px}.b-date-range-filter[data-v-e3901321] ::-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-e3901321]{padding:var(--b-filter-bar-date-range-filter-actions-padding)}.b-date-range-filter__divider[data-v-e3901321]{margin:var(--b-filter-bar-date-range-filter-divider-margin)}.b-select-filter-button[data-v-425e708e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-select-filter-button[data-v-425e708e],.b-select-filter-button[data-v-425e708e]:before,.b-select-filter-button[data-v-425e708e]:after{box-sizing:border-box}.b-select-filter-button[data-v-425e708e] *,.b-select-filter-button[data-v-425e708e] *:before,.b-select-filter-button[data-v-425e708e] *:after{box-sizing:border-box}.b-select-filter-button[data-v-425e708e] ::-webkit-scrollbar{height:14px;width:14px}.b-select-filter-button[data-v-425e708e] ::-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-button__divider[data-v-425e708e]{margin:var(--b-filter-bar-select-filter-button-divider-margin)}.b-select-filter-button__search-bar[data-v-425e708e]{padding:var(--b-filter-bar-select-filter-button-search-bar-padding)}.b-select-filter-button__search-bar-wrapper[data-v-425e708e]{margin-top:var(--b-filter-bar-select-filter-button-search-bar-wrapper-margin-top)}.b-select-filter-button__wrapper[data-v-425e708e]{max-height:270px}.b-boolean-filter[data-v-7772a6d5]{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-7772a6d5],.b-boolean-filter[data-v-7772a6d5]:before,.b-boolean-filter[data-v-7772a6d5]:after{box-sizing:border-box}.b-boolean-filter[data-v-7772a6d5] *,.b-boolean-filter[data-v-7772a6d5] *:before,.b-boolean-filter[data-v-7772a6d5] *:after{box-sizing:border-box}.b-boolean-filter[data-v-7772a6d5] ::-webkit-scrollbar{height:14px;width:14px}.b-boolean-filter[data-v-7772a6d5] ::-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-7772a6d5]{padding:var(--b-filter-bar-boolean-filter-only-slot-padding)}.b-range-filter[data-v-c71c8dbd]{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-c71c8dbd],.b-range-filter[data-v-c71c8dbd]:before,.b-range-filter[data-v-c71c8dbd]:after{box-sizing:border-box}.b-range-filter[data-v-c71c8dbd] *,.b-range-filter[data-v-c71c8dbd] *:before,.b-range-filter[data-v-c71c8dbd] *:after{box-sizing:border-box}.b-range-filter[data-v-c71c8dbd] ::-webkit-scrollbar{height:14px;width:14px}.b-range-filter[data-v-c71c8dbd] ::-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-c71c8dbd]{padding-top:var(--b-filter-bar-range-filter-item-padding)}.b-range-filter--only-slot[data-v-c71c8dbd]{padding:var(--b-filter-bar-range-filter-only-slot-padding)}button[data-v-af9efc73]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-af9efc73]:focus-visible{outline:none}.b-base-filter-button[data-v-af9efc73]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--b-filter-button-background-color);color:var(--b-filter-button-font-color);cursor:pointer;height:40px;justify-content:center;padding:var(--b-filter-button-padding);text-decoration:none;-webkit-user-select:none;user-select:none;width:100%}.b-base-filter-button[data-v-af9efc73],.b-base-filter-button[data-v-af9efc73]:before,.b-base-filter-button[data-v-af9efc73]:after{box-sizing:border-box}.b-base-filter-button[data-v-af9efc73] *,.b-base-filter-button[data-v-af9efc73] *:before,.b-base-filter-button[data-v-af9efc73] *:after{box-sizing:border-box}.b-base-filter-button[data-v-af9efc73] ::-webkit-scrollbar{height:14px;width:14px}.b-base-filter-button[data-v-af9efc73] ::-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-af9efc73]:hover{background-color:var(--b-filter-button-hover-background-color);color:var(--b-filter-button-hover-text-color)}}.b-base-filter-button[data-v-af9efc73] .b-base-button__label{width:100%}.b-base-filter-button[data-v-af9efc73]:active:not(:disabled){background-color:var(--b-filter-button-active-background-color)}.b-base-filter-button[data-v-af9efc73]:disabled,.b-base-filter-button[data-v-af9efc73]: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-af9efc73],.b-base-filter-button:disabled:not(:focus) .b-base-filter-button__counter[data-v-af9efc73]{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-af9efc73]:focus-visible{background-color:var(--b-filter-button-modal-focus-background-color)}.b-base-filter-button--filter-open[data-v-af9efc73]{background-color:var(--b-filter-button-modal-open-background-color)}.b-base-filter-button__default-container[data-v-af9efc73]{align-items:center;display:flex;gap:var(--b-filter-button-default-container-gap);width:100%}.b-base-filter-button__counter[data-v-af9efc73]{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-af9efc73]{align-items:center;display:flex}.b-base-filter-button__label[data-v-af9efc73]{display:block;overflow:hidden;text-overflow:ellipsis}.b-base-filter-button__label-container[data-v-af9efc73]{overflow:hidden;white-space:nowrap;width:100%}.b-base-filter-button__icon-left[data-v-af9efc73],.b-base-filter-button__icon-right[data-v-af9efc73]{display:inline-flex}.b-all-filters-modal-button[data-v-b96a672f]{background-color:var(--b-filter-button-modal-background-color);scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-all-filters-modal-button--filter-open[data-v-b96a672f]{background-color:var(--b-filter-button-modal-open-background-color)}.b-all-filters-modal-button[data-v-b96a672f],.b-all-filters-modal-button[data-v-b96a672f]:before,.b-all-filters-modal-button[data-v-b96a672f]:after{box-sizing:border-box}.b-all-filters-modal-button[data-v-b96a672f] *,.b-all-filters-modal-button[data-v-b96a672f] *:before,.b-all-filters-modal-button[data-v-b96a672f] *:after{box-sizing:border-box}.b-all-filters-modal-button[data-v-b96a672f] ::-webkit-scrollbar{height:14px;width:14px}.b-all-filters-modal-button[data-v-b96a672f] ::-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-b96a672f]:hover{background-color:var(--b-filter-button-modal-hover-background-color);color:var(--b-filter-button-modal-hover-color)}}.b-all-filters-modal[data-v-cf3baf81]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-all-filters-modal[data-v-cf3baf81],.b-all-filters-modal[data-v-cf3baf81]:before,.b-all-filters-modal[data-v-cf3baf81]:after{box-sizing:border-box}.b-all-filters-modal[data-v-cf3baf81] *,.b-all-filters-modal[data-v-cf3baf81] *:before,.b-all-filters-modal[data-v-cf3baf81] *:after{box-sizing:border-box}.b-all-filters-modal[data-v-cf3baf81] ::-webkit-scrollbar{height:14px;width:14px}.b-all-filters-modal[data-v-cf3baf81] ::-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-cf3baf81] .b-modal-page{height:calc(100vh - 128px);max-height:800px;position:relative}.b-all-filters-modal[data-v-cf3baf81] .b-modal-base__container{height:calc(100vh - 128px)!important;max-height:800px}.b-all-filters-modal[data-v-cf3baf81] .b-dialog-page__content{display:flex}.b-all-filters-modal[data-v-cf3baf81] .b-modal-page__content{flex:1;padding:var(--b-filter-bar-all-filters-modal-content-padding)}.b-all-filters-modal[data-v-cf3baf81] .b-modal-page__content>.b-typography{height:100%}.b-all-filters-modal[data-v-cf3baf81] .b-modal-page__grid{overflow:hidden}.b-all-filters-modal[data-v-cf3baf81] .b-modal-page__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-cf3baf81] .b-modal-page__grid>:nth-child(1) ::-webkit-scrollbar{display:none}.b-all-filters-modal[data-v-cf3baf81] .b-modal-page__grid>:nth-child(2){max-height:100%}.b-all-filters-modal[data-v-cf3baf81] .b-grid-layout{gap:0;height:100%}.b-all-filters-modal__filters[data-v-cf3baf81]{display:flex;flex-direction:column;gap:var(--b-filter-bar-all-filters-modal-filters-gap)}.b-all-filters-modal__search-bar[data-v-cf3baf81]{padding:var(--b-filter-bar-all-filters-modal-search-bar-padding)}.b-all-filters-modal__empty-search-message[data-v-cf3baf81]{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-cf3baf81]{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-cf3baf81]{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-cf3baf81]{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-cf3baf81]{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-cf3baf81]{flex:1}.b-all-filters-modal__clear-button[data-v-cf3baf81]{display:flex;justify-content:flex-end}.b-all-filters-modal__selected-filter-text[data-v-cf3baf81]{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-08825006]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;container-type:inline-size;width:100%}.b-filter-bar[data-v-08825006],.b-filter-bar[data-v-08825006]:before,.b-filter-bar[data-v-08825006]:after{box-sizing:border-box}.b-filter-bar[data-v-08825006] *,.b-filter-bar[data-v-08825006] *:before,.b-filter-bar[data-v-08825006] *:after{box-sizing:border-box}.b-filter-bar[data-v-08825006] ::-webkit-scrollbar{height:14px;width:14px}.b-filter-bar[data-v-08825006] ::-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__all-filters-modal[data-v-08825006],.b-filter-bar__clear-all[data-v-08825006],.b-filter-bar__reset-all[data-v-08825006]{display:inline-block;flex-shrink:0}.b-filter-bar__search-external-container[data-v-08825006]{margin-bottom:var(--b-filter-bar-search-external-container-margin-bottom)}.b-filter-bar__fixed-scroller[data-v-08825006] .b-fixed-scroller__right .b-button--condensed,.b-filter-bar__fixed-scroller[data-v-08825006] .b-fixed-scroller__left .b-button--condensed{height:var(--b-filter-bar-fixed-scroller-button-condensed-height);max-height:var(--b-filter-bar-fixed-scroller-button-condensed-max-height)}.b-filter-bar__container[data-v-08825006]{display:flex;flex-direction:row}.b-filter-bar__filters[data-v-08825006]{display:flex;flex-wrap:wrap;gap:var(--b-filter-bar-filters-gap)}@container (min-width: 700px){.b-filter-bar__search-bar[data-v-08825006]{max-width:200px;min-width:200px}}.b-filter-bar__scroller-content[data-v-08825006]{display:flex;gap:var(--b-filter-bar-scroller-content-gap)}.b-filter-bar__scroller-content .b-filter-bar__search-bar[data-v-08825006]{min-width:180px}
|
|
1
|
+
button[data-v-3556e231]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-3556e231]:focus-visible{outline:none}.b-filter-bar-button[data-v-3556e231]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:none;-moz-appearance:none;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;padding:var(--b-filter-bar-button-container-padding);text-decoration:none;-webkit-user-select:none;user-select:none}.b-filter-bar-button[data-v-3556e231],.b-filter-bar-button[data-v-3556e231]:before,.b-filter-bar-button[data-v-3556e231]:after{box-sizing:border-box}.b-filter-bar-button[data-v-3556e231] *,.b-filter-bar-button[data-v-3556e231] *:before,.b-filter-bar-button[data-v-3556e231] *:after{box-sizing:border-box}.b-filter-bar-button[data-v-3556e231] ::-webkit-scrollbar{height:14px;width:14px}.b-filter-bar-button[data-v-3556e231] ::-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-3556e231]: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__secondary-label[data-v-3556e231]{color:var(--b-filter-bar-button-hover-color)}.b-filter-bar-button:hover .b-filter-bar-button__counter[data-v-3556e231]{background-color:var(--b-filter-bar-button-counter-hover-background-color);color:var(--b-filter-bar-button-counter-hover-color)}}.b-filter-bar-button[data-v-3556e231]:disabled,.b-filter-bar-button[data-v-3556e231]: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__secondary-label[data-v-3556e231],.b-filter-bar-button:disabled:not(:focus) .b-filter-bar-button__secondary-label[data-v-3556e231]{color:var(--b-filter-bar-button-disabled-color)}.b-filter-bar-button:disabled .b-filter-bar-button__counter[data-v-3556e231],.b-filter-bar-button:disabled:not(:focus) .b-filter-bar-button__counter[data-v-3556e231]{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-3556e231]:focus-visible{animation:outer-ring-default-3556e231 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-3556e231{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--icon-only[data-v-3556e231]{padding:var(--b-filter-bar-button-icon-only-padding)}.b-filter-bar-button--icon-only .b-filter-bar-button__container[data-v-3556e231]{display:flex;gap:0}.b-filter-bar-button--filter-open[data-v-3556e231]:not(:hover){background-color:var(--b-filter-bar-button-filter-open-background-color);border:var(--b-filter-bar-button-filter-open-border);color:var(--b-filter-bar-button-filter-open-color)}.b-filter-bar-button--filter-open-applied[data-v-3556e231]:not(:hover){background-color:var(--b-filter-bar-button-applied-filter-open-background-color);border:var(--b-filter-bar-button-applied-filter-open-border);color:var(--b-filter-bar-button-applied-filter-open-color)}.b-filter-bar-button--with-counter[data-v-3556e231]:not(.b-filter-bar-button--icon-only){padding-right:var(--b-filter-bar-button-with-counter-padding-right)}.b-filter-bar-button--with-counter:not(.b-filter-bar-button--icon-only) .b-filter-bar-button__container[data-v-3556e231]{padding-right:var(--b-filter-bar-button-with-counter-container-padding-right)}.b-filter-bar-button--applied[data-v-3556e231]{background-color:var(--b-filter-bar-button-applied-background-color);border:var(--b-filter-bar-button-applied-border);color:var(--b-filter-bar-button-applied-color)}.b-filter-bar-button--applied .b-filter-bar-button__secondary-label[data-v-3556e231]{color:var(--b-filter-bar-button-applied-color)}.b-filter-bar-button--applied[data-v-3556e231]:hover{background-color:var(--b-filter-bar-button-applied-hover-background-color);border:var(--b-filter-bar-button-applied-hover-border);color:var(--b-filter-bar-button-applied-hover-color)}.b-filter-bar-button--applied:hover .b-filter-bar-button__secondary-label[data-v-3556e231]{color:var(--b-filter-bar-button-applied-hover-color)}.b-filter-bar-button--applied[data-v-3556e231]:disabled,.b-filter-bar-button--applied[data-v-3556e231]:disabled:not(:focus){background-color:var(--b-filter-bar-button-applied-disabled-background-color);border:var(--b-filter-bar-button-applied-disabled-border);color:var(--b-filter-bar-button-applied-disabled-color)}.b-filter-bar-button--applied:disabled .b-filter-bar-button__secondary-label[data-v-3556e231],.b-filter-bar-button--applied:disabled:not(:focus) .b-filter-bar-button__secondary-label[data-v-3556e231]{color:var(--b-filter-bar-button-applied-disabled-color)}.b-filter-bar-button__container[data-v-3556e231]{align-items:center;display:flex;gap:var(--b-filter-bar-button-container-gap);justify-content:center;vertical-align:bottom}.b-filter-bar-button__counter[data-v-3556e231]{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);padding:var(--b-filter-bar-button-counter-padding)}.b-filter-bar-button__label-container[data-v-3556e231]{align-items:center;display:inline-flex;gap:var(--b-filter-bar-button-label-container-gap)}.b-filter-bar-button__label[data-v-3556e231],.b-filter-bar-button__secondary-label[data-v-3556e231]{display:inline-flex;line-height:var(--b-filter-bar-button-label-line-height);vertical-align:middle}.b-filter-bar-button__icon-left[data-v-3556e231],.b-filter-bar-button__icon-right[data-v-3556e231]{display:inline-flex}button[data-v-9ce16194]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-9ce16194]:focus-visible{outline:none}.b-filter-bar-button-group[data-v-9ce16194]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex}.b-filter-bar-button-group[data-v-9ce16194],.b-filter-bar-button-group[data-v-9ce16194]:before,.b-filter-bar-button-group[data-v-9ce16194]:after{box-sizing:border-box}.b-filter-bar-button-group[data-v-9ce16194] *,.b-filter-bar-button-group[data-v-9ce16194] *:before,.b-filter-bar-button-group[data-v-9ce16194] *:after{box-sizing:border-box}.b-filter-bar-button-group[data-v-9ce16194] ::-webkit-scrollbar{height:14px;width:14px}.b-filter-bar-button-group[data-v-9ce16194] ::-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-button-group--grouped[data-v-9ce16194] button:first-child{border-end-end-radius:0;border-start-end-radius:0}.b-filter-bar-button-group--grouped[data-v-9ce16194] button:last-child{border-end-start-radius:0;border-start-start-radius:0}.b-filter-bar-button-group--grouped[data-v-9ce16194] button:not(:last-child){border-inline-end:var(--b-filter-bar-button-group-button-border);padding-inline-end:var(--b-filter-bar-button-group-button-padding)}.b-filter-bar-button-group--grouped[data-v-9ce16194] button:not(:last-child):hover{border-inline-end:var(--b-filter-bar-button-group-button-hover-border)}.b-filter-bar-button-group--grouped[data-v-9ce16194] button:not(:first-child){border-inline-start:var(--b-filter-bar-button-group-button-border);padding-inline-start:var(--b-filter-bar-button-group-button-padding)}.b-filter-bar-button-group--grouped[data-v-9ce16194] button:not(:first-child):hover{border-inline-start:var(--b-filter-bar-button-group-button-hover-border)}.b-filter-bar-button-group--grouped.b-filter-bar-button-group--active[data-v-9ce16194] button:not(:last-child){border-inline-end:var(--b-filter-bar-button-group-button-active-border)}.b-filter-bar-button-group--grouped.b-filter-bar-button-group--active[data-v-9ce16194] button:not(:first-child){border-inline-start:var(--b-filter-bar-button-group-button-active-border)}.b-base-filter[data-v-79ccf445]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;flex-shrink:0}.b-base-filter[data-v-79ccf445],.b-base-filter[data-v-79ccf445]:before,.b-base-filter[data-v-79ccf445]:after{box-sizing:border-box}.b-base-filter[data-v-79ccf445] *,.b-base-filter[data-v-79ccf445] *:before,.b-base-filter[data-v-79ccf445] *:after{box-sizing:border-box}.b-base-filter[data-v-79ccf445] ::-webkit-scrollbar{height:14px;width:14px}.b-base-filter[data-v-79ccf445] ::-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[data-v-57f2a128]{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-57f2a128],.b-input-filter[data-v-57f2a128]:before,.b-input-filter[data-v-57f2a128]:after{box-sizing:border-box}.b-input-filter[data-v-57f2a128] *,.b-input-filter[data-v-57f2a128] *:before,.b-input-filter[data-v-57f2a128] *:after{box-sizing:border-box}.b-input-filter[data-v-57f2a128] ::-webkit-scrollbar{height:14px;width:14px}.b-input-filter[data-v-57f2a128] ::-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-57f2a128]{padding:var(--b-filter-bar-input-filter-only-slot-padding)}.b-input-with-dropdown-filter[data-v-db04529c]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:var(--b-filter-bar-input-with-dropdown-filter-padding)}.b-input-with-dropdown-filter[data-v-db04529c],.b-input-with-dropdown-filter[data-v-db04529c]:before,.b-input-with-dropdown-filter[data-v-db04529c]:after{box-sizing:border-box}.b-input-with-dropdown-filter[data-v-db04529c] *,.b-input-with-dropdown-filter[data-v-db04529c] *:before,.b-input-with-dropdown-filter[data-v-db04529c] *:after{box-sizing:border-box}.b-input-with-dropdown-filter[data-v-db04529c] ::-webkit-scrollbar{height:14px;width:14px}.b-input-with-dropdown-filter[data-v-db04529c] ::-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-with-dropdown-filter--only-slot[data-v-db04529c]{padding:var(--b-filter-bar-input-with-dropdown-filter-only-slot-padding)}.b-date-filter[data-v-28d8abb7]{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-28d8abb7],.b-date-filter[data-v-28d8abb7]:before,.b-date-filter[data-v-28d8abb7]:after{box-sizing:border-box}.b-date-filter[data-v-28d8abb7] *,.b-date-filter[data-v-28d8abb7] *:before,.b-date-filter[data-v-28d8abb7] *:after{box-sizing:border-box}.b-date-filter[data-v-28d8abb7] ::-webkit-scrollbar{height:14px;width:14px}.b-date-filter[data-v-28d8abb7] ::-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-28d8abb7]{margin-top:var(--b-filter-bar-date-filter-divider-margin-top)}@container (max-width: 260px){.b-base-filter-date-range-filter[data-v-e3901321] .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-e3901321]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-date-range-filter[data-v-e3901321],.b-date-range-filter[data-v-e3901321]:before,.b-date-range-filter[data-v-e3901321]:after{box-sizing:border-box}.b-date-range-filter[data-v-e3901321] *,.b-date-range-filter[data-v-e3901321] *:before,.b-date-range-filter[data-v-e3901321] *:after{box-sizing:border-box}.b-date-range-filter[data-v-e3901321] ::-webkit-scrollbar{height:14px;width:14px}.b-date-range-filter[data-v-e3901321] ::-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-e3901321]{padding:var(--b-filter-bar-date-range-filter-actions-padding)}.b-date-range-filter__divider[data-v-e3901321]{margin:var(--b-filter-bar-date-range-filter-divider-margin)}.b-radio-group-filter[data-v-b1a70e21]{padding:var(--b-filter-bar-radio-group-filter-padding)}.b-radio-group-filter--only-slot[data-v-b1a70e21]{padding:var(--b-filter-bar-radio-group-filter-only-slot-padding)}.b-select-filter-button[data-v-425e708e]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-select-filter-button[data-v-425e708e],.b-select-filter-button[data-v-425e708e]:before,.b-select-filter-button[data-v-425e708e]:after{box-sizing:border-box}.b-select-filter-button[data-v-425e708e] *,.b-select-filter-button[data-v-425e708e] *:before,.b-select-filter-button[data-v-425e708e] *:after{box-sizing:border-box}.b-select-filter-button[data-v-425e708e] ::-webkit-scrollbar{height:14px;width:14px}.b-select-filter-button[data-v-425e708e] ::-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-button__divider[data-v-425e708e]{margin:var(--b-filter-bar-select-filter-button-divider-margin)}.b-select-filter-button__search-bar[data-v-425e708e]{padding:var(--b-filter-bar-select-filter-button-search-bar-padding)}.b-select-filter-button__search-bar-wrapper[data-v-425e708e]{margin-top:var(--b-filter-bar-select-filter-button-search-bar-wrapper-margin-top)}.b-select-filter-button__wrapper[data-v-425e708e]{max-height:270px}.b-boolean-filter[data-v-7772a6d5]{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-7772a6d5],.b-boolean-filter[data-v-7772a6d5]:before,.b-boolean-filter[data-v-7772a6d5]:after{box-sizing:border-box}.b-boolean-filter[data-v-7772a6d5] *,.b-boolean-filter[data-v-7772a6d5] *:before,.b-boolean-filter[data-v-7772a6d5] *:after{box-sizing:border-box}.b-boolean-filter[data-v-7772a6d5] ::-webkit-scrollbar{height:14px;width:14px}.b-boolean-filter[data-v-7772a6d5] ::-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-7772a6d5]{padding:var(--b-filter-bar-boolean-filter-only-slot-padding)}.b-range-filter[data-v-c71c8dbd]{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-c71c8dbd],.b-range-filter[data-v-c71c8dbd]:before,.b-range-filter[data-v-c71c8dbd]:after{box-sizing:border-box}.b-range-filter[data-v-c71c8dbd] *,.b-range-filter[data-v-c71c8dbd] *:before,.b-range-filter[data-v-c71c8dbd] *:after{box-sizing:border-box}.b-range-filter[data-v-c71c8dbd] ::-webkit-scrollbar{height:14px;width:14px}.b-range-filter[data-v-c71c8dbd] ::-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-c71c8dbd]{padding-top:var(--b-filter-bar-range-filter-item-padding)}.b-range-filter--only-slot[data-v-c71c8dbd]{padding:var(--b-filter-bar-range-filter-only-slot-padding)}.b-checkbox-group-filter[data-v-a691cbf8]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:var(--b-filter-bar-checkbox-group-filter-padding)}.b-checkbox-group-filter[data-v-a691cbf8],.b-checkbox-group-filter[data-v-a691cbf8]:before,.b-checkbox-group-filter[data-v-a691cbf8]:after{box-sizing:border-box}.b-checkbox-group-filter[data-v-a691cbf8] *,.b-checkbox-group-filter[data-v-a691cbf8] *:before,.b-checkbox-group-filter[data-v-a691cbf8] *:after{box-sizing:border-box}.b-checkbox-group-filter[data-v-a691cbf8] ::-webkit-scrollbar{height:14px;width:14px}.b-checkbox-group-filter[data-v-a691cbf8] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-checkbox-group-filter--only-slot[data-v-a691cbf8]{padding:var(--b-filter-bar-checkbox-group-filter-only-slot-padding)}button[data-v-af9efc73]{background-color:transparent;border:0;font:inherit;text-align:inherit}button[data-v-af9efc73]:focus-visible{outline:none}.b-base-filter-button[data-v-af9efc73]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--b-filter-button-background-color);color:var(--b-filter-button-font-color);cursor:pointer;height:40px;justify-content:center;padding:var(--b-filter-button-padding);text-decoration:none;-webkit-user-select:none;user-select:none;width:100%}.b-base-filter-button[data-v-af9efc73],.b-base-filter-button[data-v-af9efc73]:before,.b-base-filter-button[data-v-af9efc73]:after{box-sizing:border-box}.b-base-filter-button[data-v-af9efc73] *,.b-base-filter-button[data-v-af9efc73] *:before,.b-base-filter-button[data-v-af9efc73] *:after{box-sizing:border-box}.b-base-filter-button[data-v-af9efc73] ::-webkit-scrollbar{height:14px;width:14px}.b-base-filter-button[data-v-af9efc73] ::-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-af9efc73]:hover{background-color:var(--b-filter-button-hover-background-color);color:var(--b-filter-button-hover-text-color)}}.b-base-filter-button[data-v-af9efc73] .b-base-button__label{width:100%}.b-base-filter-button[data-v-af9efc73]:active:not(:disabled){background-color:var(--b-filter-button-active-background-color)}.b-base-filter-button[data-v-af9efc73]:disabled,.b-base-filter-button[data-v-af9efc73]: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-af9efc73],.b-base-filter-button:disabled:not(:focus) .b-base-filter-button__counter[data-v-af9efc73]{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-af9efc73]:focus-visible{background-color:var(--b-filter-button-modal-focus-background-color)}.b-base-filter-button--filter-open[data-v-af9efc73]{background-color:var(--b-filter-button-modal-open-background-color)}.b-base-filter-button__default-container[data-v-af9efc73]{align-items:center;display:flex;gap:var(--b-filter-button-default-container-gap);width:100%}.b-base-filter-button__counter[data-v-af9efc73]{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-af9efc73]{align-items:center;display:flex}.b-base-filter-button__label[data-v-af9efc73]{display:block;overflow:hidden;text-overflow:ellipsis}.b-base-filter-button__label-container[data-v-af9efc73]{overflow:hidden;white-space:nowrap;width:100%}.b-base-filter-button__icon-left[data-v-af9efc73],.b-base-filter-button__icon-right[data-v-af9efc73]{display:inline-flex}.b-all-filters-modal-button[data-v-b96a672f]{background-color:var(--b-filter-button-modal-background-color);scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-all-filters-modal-button--filter-open[data-v-b96a672f]{background-color:var(--b-filter-button-modal-open-background-color)}.b-all-filters-modal-button[data-v-b96a672f],.b-all-filters-modal-button[data-v-b96a672f]:before,.b-all-filters-modal-button[data-v-b96a672f]:after{box-sizing:border-box}.b-all-filters-modal-button[data-v-b96a672f] *,.b-all-filters-modal-button[data-v-b96a672f] *:before,.b-all-filters-modal-button[data-v-b96a672f] *:after{box-sizing:border-box}.b-all-filters-modal-button[data-v-b96a672f] ::-webkit-scrollbar{height:14px;width:14px}.b-all-filters-modal-button[data-v-b96a672f] ::-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-b96a672f]:hover{background-color:var(--b-filter-button-modal-hover-background-color);color:var(--b-filter-button-modal-hover-color)}}.b-all-filters-modal[data-v-769345e3]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-all-filters-modal[data-v-769345e3],.b-all-filters-modal[data-v-769345e3]:before,.b-all-filters-modal[data-v-769345e3]:after{box-sizing:border-box}.b-all-filters-modal[data-v-769345e3] *,.b-all-filters-modal[data-v-769345e3] *:before,.b-all-filters-modal[data-v-769345e3] *:after{box-sizing:border-box}.b-all-filters-modal[data-v-769345e3] ::-webkit-scrollbar{height:14px;width:14px}.b-all-filters-modal[data-v-769345e3] ::-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-769345e3] .b-modal-page{height:calc(100vh - 128px);max-height:800px;position:relative}.b-all-filters-modal[data-v-769345e3] .b-modal-base__container{height:calc(100vh - 128px)!important;max-height:800px}.b-all-filters-modal[data-v-769345e3] .b-dialog-page__content{display:flex}.b-all-filters-modal[data-v-769345e3] .b-modal-page__content{flex:1;padding:var(--b-filter-bar-all-filters-modal-content-padding)}.b-all-filters-modal[data-v-769345e3] .b-modal-page__content>.b-typography{height:100%}.b-all-filters-modal[data-v-769345e3] .b-modal-page__grid{overflow:hidden}.b-all-filters-modal[data-v-769345e3] .b-modal-page__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-769345e3] .b-modal-page__grid>:nth-child(1) ::-webkit-scrollbar{display:none}.b-all-filters-modal[data-v-769345e3] .b-modal-page__grid>:nth-child(2){max-height:100%}.b-all-filters-modal[data-v-769345e3] .b-grid-layout{gap:0;height:100%}.b-all-filters-modal__filters[data-v-769345e3]{display:flex;flex-direction:column;gap:var(--b-filter-bar-all-filters-modal-filters-gap)}.b-all-filters-modal__search-bar[data-v-769345e3]{padding:var(--b-filter-bar-all-filters-modal-search-bar-padding)}.b-all-filters-modal__empty-search-message[data-v-769345e3]{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-769345e3]{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-769345e3]{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-769345e3]{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-769345e3]{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-769345e3]{flex:1}.b-all-filters-modal__clear-button[data-v-769345e3]{display:flex;justify-content:flex-end}.b-all-filters-modal__selected-filter-text[data-v-769345e3]{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-eff7add3]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;container-type:inline-size;width:100%}.b-filter-bar[data-v-eff7add3],.b-filter-bar[data-v-eff7add3]:before,.b-filter-bar[data-v-eff7add3]:after{box-sizing:border-box}.b-filter-bar[data-v-eff7add3] *,.b-filter-bar[data-v-eff7add3] *:before,.b-filter-bar[data-v-eff7add3] *:after{box-sizing:border-box}.b-filter-bar[data-v-eff7add3] ::-webkit-scrollbar{height:14px;width:14px}.b-filter-bar[data-v-eff7add3] ::-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__all-filters-modal[data-v-eff7add3],.b-filter-bar__clear-all[data-v-eff7add3],.b-filter-bar__reset-all[data-v-eff7add3]{display:inline-block;flex-shrink:0}.b-filter-bar__search-external-container[data-v-eff7add3]{margin-bottom:var(--b-filter-bar-search-external-container-margin-bottom)}.b-filter-bar__fixed-scroller[data-v-eff7add3] .b-fixed-scroller__right .b-button--condensed,.b-filter-bar__fixed-scroller[data-v-eff7add3] .b-fixed-scroller__left .b-button--condensed{height:var(--b-filter-bar-fixed-scroller-button-condensed-height);max-height:var(--b-filter-bar-fixed-scroller-button-condensed-max-height)}.b-filter-bar__container[data-v-eff7add3]{display:flex;flex-direction:row}.b-filter-bar__filters[data-v-eff7add3]{display:flex;flex-wrap:wrap;gap:var(--b-filter-bar-filters-gap)}@container (min-width: 700px){.b-filter-bar__search-bar[data-v-eff7add3]{max-width:200px;min-width:200px}}.b-filter-bar__scroller-content[data-v-eff7add3]{display:flex;gap:var(--b-filter-bar-scroller-content-gap)}.b-filter-bar__scroller-content .b-filter-bar__search-bar[data-v-eff7add3]{min-width:180px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.b-focus-trap[data-v-
|
|
1
|
+
.b-focus-trap[data-v-702f14c9]{outline:none}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.b-inspector[data-v-7df4c2ca]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;height:100%;position:relative}.b-inspector[data-v-7df4c2ca],.b-inspector[data-v-7df4c2ca]:before,.b-inspector[data-v-7df4c2ca]:after{box-sizing:border-box}.b-inspector[data-v-7df4c2ca] *,.b-inspector[data-v-7df4c2ca] *:before,.b-inspector[data-v-7df4c2ca] *:after{box-sizing:border-box}.b-inspector[data-v-7df4c2ca] ::-webkit-scrollbar{height:14px;width:14px}.b-inspector[data-v-7df4c2ca] ::-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-inspector--overlay-content .b-inspector__container-wrapper[data-v-7df4c2ca]{box-shadow:var(--b-inspector-container-wrapper-box-shadow);position:absolute;right:0;z-index:var(--b-inspector-container-wrapper-z-index)}.b-inspector__page-wrapper[data-v-7df4c2ca]{flex-grow:1;height:100%;overflow:auto}.b-inspector__page[data-v-7df4c2ca]{height:100%}.b-inspector__container-wrapper[data-v-7df4c2ca]{background-color:var(--b-inspector-container-wrapper-background-color);border-left:var(--b-inspector-container-wrapper-border-left);flex-shrink:0;height:100%;overflow-x:hidden}.b-inspector__container[data-v-7df4c2ca]{display:flex;flex-direction:column;height:100%;padding:var(--b-inspector-container-padding)}.b-inspector__header[data-v-7df4c2ca]{color:var(--b-inspector-header-color);display:flex;gap:var(--b-inspector-header-gap);padding-bottom:var(--b-inspector-header-padding-bottom)}.b-inspector__title[data-v-7df4c2ca]{flex-grow:1}.b-inspector__icons[data-v-7df4c2ca]{display:flex;flex-shrink:0;gap:var(--b-inspector-icons-gap)}.b-inspector__content[data-v-7df4c2ca]{flex-grow:1}.b-inspector__loading-indicator[data-v-7df4c2ca]{top:50%;right:50%;bottom:50%;left:50%;transform:translate(-50%,-50%)}.b-inspector__return-content[data-v-7df4c2ca]{clip:rect(0,0,0,0);height:1px;opacity:0;overflow:hidden;position:absolute;right:0;width:1px}.b-inspector__return-content[data-v-7df4c2ca]:focus-visible{clip:auto;height:auto;opacity:1;right:var(--b-inspector-return-content-right);width:auto;z-index:1}.b-inspector__return-content-description[data-v-7df4c2ca]{display:none}.b-inspector--small .b-inspector__container-wrapper[data-v-7df4c2ca]{width:420px}.b-inspector--small .b-inspector__container[data-v-7df4c2ca]{width:419px}@keyframes expand-small-7df4c2ca{0%{width:0}to{width:420px}}@keyframes shrink-small-7df4c2ca{0%{width:420px}to{width:0}}.b-inspector--small .b-inspector__animation-enter-active[data-v-7df4c2ca]{animation:expand-small-7df4c2ca var(--b-inspector-animation-duration) var(--b-inspector-animation-enter-active-easing)}.b-inspector--small .b-inspector__animation-leave-active[data-v-7df4c2ca]{animation:shrink-small-7df4c2ca var(--b-inspector-animation-duration) var(--b-inspector-animation-leave-active-easing)}.b-inspector--small.b-inspector--is-compact .b-inspector__container-wrapper[data-v-7df4c2ca]{border-left:0;position:absolute;width:100%;z-index:var(--b-inspector-container-wrapper-z-index)}.b-inspector--small.b-inspector--is-compact .b-inspector__container[data-v-7df4c2ca]{width:100%}.b-inspector--small.b-inspector--is-compact .b-inspector__animation-enter-active[data-v-7df4c2ca]{animation:enter-
|
|
1
|
+
.b-inspector[data-v-7df4c2ca]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;height:100%;position:relative}.b-inspector[data-v-7df4c2ca],.b-inspector[data-v-7df4c2ca]:before,.b-inspector[data-v-7df4c2ca]:after{box-sizing:border-box}.b-inspector[data-v-7df4c2ca] *,.b-inspector[data-v-7df4c2ca] *:before,.b-inspector[data-v-7df4c2ca] *:after{box-sizing:border-box}.b-inspector[data-v-7df4c2ca] ::-webkit-scrollbar{height:14px;width:14px}.b-inspector[data-v-7df4c2ca] ::-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-inspector--overlay-content .b-inspector__container-wrapper[data-v-7df4c2ca]{box-shadow:var(--b-inspector-container-wrapper-box-shadow);position:absolute;right:0;z-index:var(--b-inspector-container-wrapper-z-index)}.b-inspector__page-wrapper[data-v-7df4c2ca]{flex-grow:1;height:100%;overflow:auto}.b-inspector__page[data-v-7df4c2ca]{height:100%}.b-inspector__container-wrapper[data-v-7df4c2ca]{background-color:var(--b-inspector-container-wrapper-background-color);border-left:var(--b-inspector-container-wrapper-border-left);flex-shrink:0;height:100%;overflow-x:hidden}.b-inspector__container[data-v-7df4c2ca]{display:flex;flex-direction:column;height:100%;padding:var(--b-inspector-container-padding)}.b-inspector__header[data-v-7df4c2ca]{color:var(--b-inspector-header-color);display:flex;gap:var(--b-inspector-header-gap);padding-bottom:var(--b-inspector-header-padding-bottom)}.b-inspector__title[data-v-7df4c2ca]{flex-grow:1}.b-inspector__icons[data-v-7df4c2ca]{display:flex;flex-shrink:0;gap:var(--b-inspector-icons-gap)}.b-inspector__content[data-v-7df4c2ca]{flex-grow:1}.b-inspector__loading-indicator[data-v-7df4c2ca]{top:50%;right:50%;bottom:50%;left:50%;transform:translate(-50%,-50%)}.b-inspector__return-content[data-v-7df4c2ca]{clip:rect(0,0,0,0);height:1px;opacity:0;overflow:hidden;position:absolute;right:0;width:1px}.b-inspector__return-content[data-v-7df4c2ca]:focus-visible{clip:auto;height:auto;opacity:1;right:var(--b-inspector-return-content-right);width:auto;z-index:1}.b-inspector__return-content-description[data-v-7df4c2ca]{display:none}.b-inspector--small .b-inspector__container-wrapper[data-v-7df4c2ca]{width:420px}.b-inspector--small .b-inspector__container[data-v-7df4c2ca]{width:419px}@keyframes expand-small-7df4c2ca{0%{width:0}to{width:420px}}@keyframes shrink-small-7df4c2ca{0%{width:420px}to{width:0}}.b-inspector--small .b-inspector__animation-enter-active[data-v-7df4c2ca]{animation:expand-small-7df4c2ca var(--b-inspector-animation-duration) var(--b-inspector-animation-enter-active-easing)}.b-inspector--small .b-inspector__animation-leave-active[data-v-7df4c2ca]{animation:shrink-small-7df4c2ca var(--b-inspector-animation-duration) var(--b-inspector-animation-leave-active-easing)}.b-inspector--small.b-inspector--is-compact .b-inspector__container-wrapper[data-v-7df4c2ca]{border-left:0;position:absolute;width:100%;z-index:var(--b-inspector-container-wrapper-z-index)}.b-inspector--small.b-inspector--is-compact .b-inspector__container[data-v-7df4c2ca]{width:100%}.b-inspector--small.b-inspector--is-compact .b-inspector__animation-enter-active[data-v-7df4c2ca]{animation:enter-u34td95-7df4c2ca var(--b-inspector-animation-duration) var(--b-animation-easing-enter)}@keyframes enter-u34td95-7df4c2ca{0%{translate:100% 0}to{translate:0 0}}.b-inspector--small.b-inspector--is-compact .b-inspector__animation-leave-active[data-v-7df4c2ca]{animation:exit-u34td99-7df4c2ca var(--b-inspector-animation-duration) var(--b-animation-easing-exit)}@keyframes exit-u34td99-7df4c2ca{0%{translate:0 0}to{translate:100% 0}}.b-inspector--large .b-inspector__container-wrapper[data-v-7df4c2ca]{width:595px}.b-inspector--large .b-inspector__container[data-v-7df4c2ca]{width:594px}@keyframes expand-large-7df4c2ca{0%{width:0}to{width:595px}}@keyframes shrink-large-7df4c2ca{0%{width:595px}to{width:0}}.b-inspector--large .b-inspector__animation-enter-active[data-v-7df4c2ca]{animation:expand-large-7df4c2ca var(--b-inspector-animation-duration) var(--b-inspector-animation-enter-active-easing)}.b-inspector--large .b-inspector__animation-leave-active[data-v-7df4c2ca]{animation:shrink-large-7df4c2ca var(--b-inspector-animation-duration) var(--b-inspector-animation-leave-active-easing)}.b-inspector--large.b-inspector--is-compact .b-inspector__container-wrapper[data-v-7df4c2ca]{border-left:0;position:absolute;width:100%;z-index:var(--b-inspector-container-wrapper-z-index)}.b-inspector--large.b-inspector--is-compact .b-inspector__container[data-v-7df4c2ca]{width:100%}.b-inspector--large.b-inspector--is-compact .b-inspector__animation-enter-active[data-v-7df4c2ca]{animation:enter-u34tda7-7df4c2ca var(--b-inspector-animation-duration) var(--b-animation-easing-enter)}@keyframes enter-u34tda7-7df4c2ca{0%{translate:100% 0}to{translate:0 0}}.b-inspector--large.b-inspector--is-compact .b-inspector__animation-leave-active[data-v-7df4c2ca]{animation:exit-u34tdae-7df4c2ca var(--b-inspector-animation-duration) var(--b-animation-easing-exit)}@keyframes exit-u34tdae-7df4c2ca{0%{translate:0 0}to{translate:100% 0}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.b-modal-fullscreen-page[data-v-a1480899]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;height:100%;overflow:hidden;position:absolute;width:100%}.b-modal-fullscreen-page[data-v-a1480899],.b-modal-fullscreen-page[data-v-a1480899]:before,.b-modal-fullscreen-page[data-v-a1480899]:after{box-sizing:border-box}.b-modal-fullscreen-page[data-v-a1480899] *,.b-modal-fullscreen-page[data-v-a1480899] *:before,.b-modal-fullscreen-page[data-v-a1480899] *:after{box-sizing:border-box}.b-modal-fullscreen-page[data-v-a1480899] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen-page[data-v-a1480899] ::-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-modal-fullscreen-page__header[data-v-a1480899]{align-items:center;display:flex;flex-grow:1;gap:var(--b-modal-fullscreen-header-gap);height:64px;overflow-x:auto;overflow-y:hidden;padding:var(--b-modal-fullscreen-header-padding)}.b-modal-fullscreen-page__header-section[data-v-a1480899]{display:flex;flex:1 1 0}.b-modal-fullscreen-page__header-section--title[data-v-a1480899]{min-width:150px;overflow:hidden}.b-modal-fullscreen-page__header-section--slot[data-v-a1480899]{flex-grow:0;justify-content:center}.b-modal-fullscreen-page__header-section--actions[data-v-a1480899]{align-items:center;gap:var(--b-modal-fullscreen-header-gap);justify-content:end}.b-modal-fullscreen-page__title[data-v-a1480899]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-modal-fullscreen-page__contextual-label[data-v-a1480899]{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden}.b-modal-fullscreen-page__actions[data-v-a1480899]{container-type:normal;flex-grow:unset}.b-modal-fullscreen-page__actions[data-v-a1480899] .b-button-actions__container-wrapper{flex-direction:row}.b-modal-fullscreen-page__separator[data-v-a1480899]{border-left:var(--b-modal-fullscreen-separator-border-left);height:26px;margin-right:var(--b-modal-fullscreen-separator-margin-right)}.b-modal-fullscreen-page__content[data-v-a1480899]{height:100%;overflow:auto}.b-modal-fullscreen[data-v-cf7e82c0]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-modal-fullscreen-background-color);border:0;color:var(--b-modal-fullscreen-color);height:100%;max-height:100%;max-width:100%;overflow:hidden;padding:0;width:100%}.b-modal-fullscreen[data-v-cf7e82c0],.b-modal-fullscreen[data-v-cf7e82c0]:before,.b-modal-fullscreen[data-v-cf7e82c0]:after{box-sizing:border-box}.b-modal-fullscreen[data-v-cf7e82c0] *,.b-modal-fullscreen[data-v-cf7e82c0] *:before,.b-modal-fullscreen[data-v-cf7e82c0] *:after{box-sizing:border-box}.b-modal-fullscreen[data-v-cf7e82c0] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen[data-v-cf7e82c0] ::-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-modal-fullscreen__wrapper[data-v-cf7e82c0]{display:flex;flex-direction:column;height:100%}.b-modal-fullscreen__close-button[data-v-cf7e82c0]{align-items:center;background-color:var(--b-modal-fullscreen-background-color);display:flex;height:64px;padding-inline:var(--b-modal-fullscreen-close-button-padding-inline);position:absolute;right:0;z-index:var(--b-modal-fullscreen-close-button-z-index)}.b-modal-fullscreen[data-v-cf7e82c0]::backdrop{background-color:transparent}.b-modal-fullscreen[open][data-v-cf7e82c0]{animation:fade-in-
|
|
1
|
+
.b-modal-fullscreen-page[data-v-a1480899]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;height:100%;overflow:hidden;position:absolute;width:100%}.b-modal-fullscreen-page[data-v-a1480899],.b-modal-fullscreen-page[data-v-a1480899]:before,.b-modal-fullscreen-page[data-v-a1480899]:after{box-sizing:border-box}.b-modal-fullscreen-page[data-v-a1480899] *,.b-modal-fullscreen-page[data-v-a1480899] *:before,.b-modal-fullscreen-page[data-v-a1480899] *:after{box-sizing:border-box}.b-modal-fullscreen-page[data-v-a1480899] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen-page[data-v-a1480899] ::-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-modal-fullscreen-page__header[data-v-a1480899]{align-items:center;display:flex;flex-grow:1;gap:var(--b-modal-fullscreen-header-gap);height:64px;overflow-x:auto;overflow-y:hidden;padding:var(--b-modal-fullscreen-header-padding)}.b-modal-fullscreen-page__header-section[data-v-a1480899]{display:flex;flex:1 1 0}.b-modal-fullscreen-page__header-section--title[data-v-a1480899]{min-width:150px;overflow:hidden}.b-modal-fullscreen-page__header-section--slot[data-v-a1480899]{flex-grow:0;justify-content:center}.b-modal-fullscreen-page__header-section--actions[data-v-a1480899]{align-items:center;gap:var(--b-modal-fullscreen-header-gap);justify-content:end}.b-modal-fullscreen-page__title[data-v-a1480899]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-modal-fullscreen-page__contextual-label[data-v-a1480899]{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden}.b-modal-fullscreen-page__actions[data-v-a1480899]{container-type:normal;flex-grow:unset}.b-modal-fullscreen-page__actions[data-v-a1480899] .b-button-actions__container-wrapper{flex-direction:row}.b-modal-fullscreen-page__separator[data-v-a1480899]{border-left:var(--b-modal-fullscreen-separator-border-left);height:26px;margin-right:var(--b-modal-fullscreen-separator-margin-right)}.b-modal-fullscreen-page__content[data-v-a1480899]{height:100%;overflow:auto}.b-modal-fullscreen[data-v-cf7e82c0]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-modal-fullscreen-background-color);border:0;color:var(--b-modal-fullscreen-color);height:100%;max-height:100%;max-width:100%;overflow:hidden;padding:0;width:100%}.b-modal-fullscreen[data-v-cf7e82c0],.b-modal-fullscreen[data-v-cf7e82c0]:before,.b-modal-fullscreen[data-v-cf7e82c0]:after{box-sizing:border-box}.b-modal-fullscreen[data-v-cf7e82c0] *,.b-modal-fullscreen[data-v-cf7e82c0] *:before,.b-modal-fullscreen[data-v-cf7e82c0] *:after{box-sizing:border-box}.b-modal-fullscreen[data-v-cf7e82c0] ::-webkit-scrollbar{height:14px;width:14px}.b-modal-fullscreen[data-v-cf7e82c0] ::-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-modal-fullscreen__wrapper[data-v-cf7e82c0]{display:flex;flex-direction:column;height:100%}.b-modal-fullscreen__close-button[data-v-cf7e82c0]{align-items:center;background-color:var(--b-modal-fullscreen-background-color);display:flex;height:64px;padding-inline:var(--b-modal-fullscreen-close-button-padding-inline);position:absolute;right:0;z-index:var(--b-modal-fullscreen-close-button-z-index)}.b-modal-fullscreen[data-v-cf7e82c0]::backdrop{background-color:transparent}.b-modal-fullscreen[open][data-v-cf7e82c0]{animation:fade-in-u34tdck-cf7e82c0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear),enter-u34tdck-cf7e82c0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-enter),scale-up-u34tdck-cf7e82c0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-in-u34tdck-cf7e82c0{0%{opacity:0}to{opacity:1}}@keyframes scale-up-u34tdck-cf7e82c0{0%{scale:1}to{scale:1}}@keyframes enter-u34tdck-cf7e82c0{0%{translate:0 64px}to{translate:0 0}}.b-modal-fullscreen--hide[open][data-v-cf7e82c0]{animation:fade-out-u34tdd0-cf7e82c0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear),exit-u34tdd0-cf7e82c0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-exit),scale-down-u34tdd0-cf7e82c0 var(--b-modal-fullscreen-animation-duration) var(--b-animation-easing-linear)}@keyframes fade-out-u34tdd0-cf7e82c0{0%{opacity:1}to{opacity:0}}@keyframes scale-down-u34tdd0-cf7e82c0{0%{scale:1}to{scale:1}}@keyframes exit-u34tdd0-cf7e82c0{0%{translate:0 0}to{translate:0 64px}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.b-sidepanel-page[data-v-42613cdd]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;height:100%;position:absolute;width:100%}.b-sidepanel-page[data-v-42613cdd],.b-sidepanel-page[data-v-42613cdd]:before,.b-sidepanel-page[data-v-42613cdd]:after{box-sizing:border-box}.b-sidepanel-page[data-v-42613cdd] *,.b-sidepanel-page[data-v-42613cdd] *:before,.b-sidepanel-page[data-v-42613cdd] *:after{box-sizing:border-box}.b-sidepanel-page[data-v-42613cdd] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel-page[data-v-42613cdd] ::-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-sidepanel-page__header[data-v-42613cdd]{align-items:center;background-color:var(--b-sidepanel-page-header-background-color);border-top-left-radius:var(--b-sidepanel-border-radius);display:flex;overflow:hidden;padding:var(--b-sidepanel-page-header-padding);position:sticky;white-space:nowrap;width:100%}.b-sidepanel-page__title[data-v-42613cdd]{color:var(--b-sidepanel-page-header-color);flex-grow:1;overflow:hidden;text-overflow:ellipsis}.b-sidepanel-page__content[data-v-42613cdd]{color:var(--b-sidepanel-page-content-color);flex-grow:1;overflow:overlay;padding:var(--b-sidepanel-page-content-padding)}.b-sidepanel-page__actions[data-v-42613cdd]{background-color:var(--b-sidepanel-page-actions-background-color);border-bottom-left-radius:var(--b-sidepanel-border-radius);color:var(--b-sidepanel-page-actions-color);padding:var(--b-sidepanel-page-actions-padding)}.b-sidepanel[data-v-42a38803]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-sidepanel-background-color);border:0;height:100%;max-height:100%;max-width:100%;overflow:visible;padding:0;width:100%}.b-sidepanel[data-v-42a38803],.b-sidepanel[data-v-42a38803]:before,.b-sidepanel[data-v-42a38803]:after{box-sizing:border-box}.b-sidepanel[data-v-42a38803] *,.b-sidepanel[data-v-42a38803] *:before,.b-sidepanel[data-v-42a38803] *:after{box-sizing:border-box}.b-sidepanel[data-v-42a38803] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel[data-v-42a38803] ::-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(min-width:500px){.b-sidepanel[data-v-42a38803]{border-radius:var(--b-sidepanel-border-radius) 0 0 var(--b-sidepanel-border-radius);margin:0 0 0 auto;width:var(--b-sidepanel-width)}}@media(min-width:768px){.b-sidepanel[data-v-42a38803]{max-width:var(--b-sidepanel-l-and-up-max-width);min-width:var(--b-sidepanel-l-and-up-min-width);width:33%}}.b-sidepanel__close-button[data-v-42a38803]{align-items:center;display:flex;height:var(--b-sidepanel-close-button-height);position:absolute;right:var(--b-sidepanel-close-button-right);z-index:var(--b-sidepanel-close-button-z-index)}.b-sidepanel--animation[data-v-42a38803]{overflow:hidden}.b-sidepanel[data-v-42a38803]::backdrop{background-color:var(--b-sidepanel-backdrop-background-color, #00112c);opacity:.5}.b-sidepanel[open][data-v-42a38803]{animation:enter-
|
|
1
|
+
.b-sidepanel-page[data-v-42613cdd]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;height:100%;position:absolute;width:100%}.b-sidepanel-page[data-v-42613cdd],.b-sidepanel-page[data-v-42613cdd]:before,.b-sidepanel-page[data-v-42613cdd]:after{box-sizing:border-box}.b-sidepanel-page[data-v-42613cdd] *,.b-sidepanel-page[data-v-42613cdd] *:before,.b-sidepanel-page[data-v-42613cdd] *:after{box-sizing:border-box}.b-sidepanel-page[data-v-42613cdd] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel-page[data-v-42613cdd] ::-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-sidepanel-page__header[data-v-42613cdd]{align-items:center;background-color:var(--b-sidepanel-page-header-background-color);border-top-left-radius:var(--b-sidepanel-border-radius);display:flex;overflow:hidden;padding:var(--b-sidepanel-page-header-padding);position:sticky;white-space:nowrap;width:100%}.b-sidepanel-page__title[data-v-42613cdd]{color:var(--b-sidepanel-page-header-color);flex-grow:1;overflow:hidden;text-overflow:ellipsis}.b-sidepanel-page__content[data-v-42613cdd]{color:var(--b-sidepanel-page-content-color);flex-grow:1;overflow:overlay;padding:var(--b-sidepanel-page-content-padding)}.b-sidepanel-page__actions[data-v-42613cdd]{background-color:var(--b-sidepanel-page-actions-background-color);border-bottom-left-radius:var(--b-sidepanel-border-radius);color:var(--b-sidepanel-page-actions-color);padding:var(--b-sidepanel-page-actions-padding)}.b-sidepanel[data-v-42a38803]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-sidepanel-background-color);border:0;height:100%;max-height:100%;max-width:100%;overflow:visible;padding:0;width:100%}.b-sidepanel[data-v-42a38803],.b-sidepanel[data-v-42a38803]:before,.b-sidepanel[data-v-42a38803]:after{box-sizing:border-box}.b-sidepanel[data-v-42a38803] *,.b-sidepanel[data-v-42a38803] *:before,.b-sidepanel[data-v-42a38803] *:after{box-sizing:border-box}.b-sidepanel[data-v-42a38803] ::-webkit-scrollbar{height:14px;width:14px}.b-sidepanel[data-v-42a38803] ::-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(min-width:500px){.b-sidepanel[data-v-42a38803]{border-radius:var(--b-sidepanel-border-radius) 0 0 var(--b-sidepanel-border-radius);margin:0 0 0 auto;width:var(--b-sidepanel-width)}}@media(min-width:768px){.b-sidepanel[data-v-42a38803]{max-width:var(--b-sidepanel-l-and-up-max-width);min-width:var(--b-sidepanel-l-and-up-min-width);width:33%}}.b-sidepanel__close-button[data-v-42a38803]{align-items:center;display:flex;height:var(--b-sidepanel-close-button-height);position:absolute;right:var(--b-sidepanel-close-button-right);z-index:var(--b-sidepanel-close-button-z-index)}.b-sidepanel--animation[data-v-42a38803]{overflow:hidden}.b-sidepanel[data-v-42a38803]::backdrop{background-color:var(--b-sidepanel-backdrop-background-color, #00112c);opacity:.5}.b-sidepanel[open][data-v-42a38803]{animation:enter-u34tdcr-42a38803 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-enter)}@keyframes enter-u34tdcr-42a38803{0%{translate:100% 0}to{translate:0 0}}.b-sidepanel[open][data-v-42a38803]::backdrop{animation:fade-in-u34tdcs-42a38803 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-linear)}@keyframes fade-in-u34tdcs-42a38803{0%{opacity:0}to{opacity:.5}}.b-sidepanel--hide[open][data-v-42a38803]{animation:exit-u34tdee-42a38803 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-exit)}@keyframes exit-u34tdee-42a38803{0%{translate:0 0}to{translate:100% 0}}.b-sidepanel--hide[open][data-v-42a38803]::backdrop{animation:fade-out-u34tdfr-42a38803 var(--b-sidepanel-animation-duration, .25s) var(--b-animation-easing-linear)}@keyframes fade-out-u34tdfr-42a38803{0%{opacity:.5}to{opacity:0}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.b-timeline[data-v-
|
|
1
|
+
.b-timeline[data-v-db82849a]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;max-width:var(--b-timeline-max-width)}.b-timeline[data-v-db82849a],.b-timeline[data-v-db82849a]:before,.b-timeline[data-v-db82849a]:after{box-sizing:border-box}.b-timeline[data-v-db82849a] *,.b-timeline[data-v-db82849a] *:before,.b-timeline[data-v-db82849a] *:after{box-sizing:border-box}.b-timeline[data-v-db82849a] ::-webkit-scrollbar{height:14px;width:14px}.b-timeline[data-v-db82849a] ::-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-timeline__add-note-section[data-v-db82849a]{padding-bottom:var(--b-timeline-add-note-section-padding-bottom)}.b-timeline__items[data-v-db82849a]{all:unset}.b-timeline-item[data-v-b4bbe490]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;list-style-type:none;max-width:500px}.b-timeline-item[data-v-b4bbe490],.b-timeline-item[data-v-b4bbe490]:before,.b-timeline-item[data-v-b4bbe490]:after{box-sizing:border-box}.b-timeline-item[data-v-b4bbe490] *,.b-timeline-item[data-v-b4bbe490] *:before,.b-timeline-item[data-v-b4bbe490] *:after{box-sizing:border-box}.b-timeline-item[data-v-b4bbe490] ::-webkit-scrollbar{height:14px;width:14px}.b-timeline-item[data-v-b4bbe490] ::-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-timeline-item__row[data-v-b4bbe490]{display:flex;gap:var(--b-timeline-item-row-gap)}.b-timeline-item__marker[data-v-b4bbe490]{display:flex;flex-flow:column;max-width:16px;width:100%}.b-timeline-item__separator[data-v-b4bbe490]{flex-grow:1;position:relative}.b-timeline-item__separator[data-v-b4bbe490]:before{background-color:var(--b-timeline-item-separator-background-color);content:"";height:100%;left:50%;position:absolute;transform:translate(-50%);width:1px}.b-timeline-item__icon[data-v-b4bbe490]{color:var(--b-timeline-item-icon-color);margin:var(--b-timeline-item-icon-margin)}.b-timeline-item__icon--grey[data-v-b4bbe490]{color:var(--b-timeline-item-icon-grey-color)}.b-timeline-item__icon--blue[data-v-b4bbe490]{color:var(--b-timeline-item-icon-blue-color)}.b-timeline-item__icon--green[data-v-b4bbe490]{color:var(--b-timeline-item-icon-green-color)}.b-timeline-item__icon--yellow[data-v-b4bbe490]{color:var(--b-timeline-item-icon-yellow-color)}.b-timeline-item__icon--orange[data-v-b4bbe490]{color:var(--b-timeline-item-icon-orange-color)}.b-timeline-item__icon--red[data-v-b4bbe490]{color:var(--b-timeline-item-icon-red-color)}.b-timeline-item__icon--timegap[data-v-b4bbe490]{border-bottom:var(--b-timeline-item-icon-timegap-border);border-top:var(--b-timeline-item-icon-timegap-border);margin:var(--b-timeline-item-icon-timegap-margin);padding-bottom:var(--b-timeline-item-icon-timegap-padding-bottom);width:9px}.b-timeline-item__content[data-v-b4bbe490]{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;padding-bottom:var(--b-timeline-item-content-padding-bottom)}.b-timeline-item__title[data-v-b4bbe490]{color:var(--b-timeline-item-title-color);margin-bottom:var(--b-timeline-item-title-margin-bottom)}.b-timeline-item__timestamp[data-v-b4bbe490]{align-items:baseline;color:var(--b-timeline-item-timestamp-color);column-gap:var(--b-timeline-item-timestamp-gap);display:flex;flex-wrap:wrap}.b-timeline-item__timestamp[data-v-b4bbe490] .b-date{color:var(--b-timeline-item-timestamp-color)}.b-timeline-item__description[data-v-b4bbe490]{color:var(--b-timeline-item-description-color);margin-top:var(--b-timeline-item-description-margin-top)}.b-timeline-item__data-list[data-v-b4bbe490]{margin-top:var(--b-timeline-item-data-list-margin-top);width:100%}.b-timeline-item__tag[data-v-b4bbe490]{margin-top:var(--b-timeline-item-tag-margin-top)}.b-timeline-item__timegap[data-v-b4bbe490]{color:var(--b-timeline-item-timegap-color)}.b-timeline-item--note .b-timeline-item__description[data-v-b4bbe490]{margin-top:unset}.b-timeline-item--note .b-timeline-item__timestamp[data-v-b4bbe490]{margin-top:var(--b-timeline-note-timestamp-margin-top)}.b-timeline-item:last-of-type .b-timeline-item__row:last-of-type .b-timeline-item__content[data-v-b4bbe490]{padding-bottom:0}
|
package/dist/button.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { B as n, b as B, a } from "./chunks/button.DhcxX2GJ.js";
|
|
2
2
|
import { a as s } from "./chunks/ai-button.DaRuea3x.js";
|
|
3
|
-
import { B as r, a as i, b as c, c as p } from "./chunks/button-actions.
|
|
3
|
+
import { B as r, a as i, b as c, c as p } from "./chunks/button-actions.C-dLiuIO.js";
|
|
4
4
|
import { B as A, a as L, b as d } from "./chunks/button-actions.types.BptAXjD8.js";
|
|
5
5
|
export {
|
|
6
6
|
s as BentoAiButton,
|
package/dist/card.js
CHANGED
package/dist/checkbox.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { B as t, a } from "./chunks/checkbox.
|
|
1
|
+
import { B as t, a } from "./chunks/checkbox.BIT67SNO.js";
|
|
2
2
|
import { C as x } from "./chunks/minus-small.DYIyF5XW.js";
|
|
3
|
-
import {
|
|
3
|
+
import { B, a as C } from "./chunks/checkbox-group.DEvATYiK.js";
|
|
4
4
|
export {
|
|
5
5
|
t as BentoCheckbox,
|
|
6
6
|
a as BentoCheckboxEvent,
|
|
7
7
|
B as BentoCheckboxGroup,
|
|
8
|
-
|
|
8
|
+
C as BentoCheckboxGroupVariant,
|
|
9
9
|
x as BentoCheckboxState
|
|
10
10
|
};
|
|
11
11
|
//# sourceMappingURL=checkbox.js.map
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { defineComponent as F, computed as c, ref as _, toRefs as G, watch as E, provide as U, nextTick as f, createBlock as b, openBlock as d, Transition as L, withCtx as B, createElementVNode as h, unref as t, normalizeClass as W, createElementBlock as K, createCommentVNode as M, createVNode as y, createTextVNode as z, toDisplayString as S } from "vue";
|
|
2
2
|
import { B as D } from "./button.DhcxX2GJ.js";
|
|
3
3
|
import { B as J } from "./typography.yBEME_Gu.js";
|
|
4
|
-
import { B as Z } from "./button-actions-with-menu.
|
|
4
|
+
import { B as Z } from "./button-actions-with-menu.BZ1cNOvQ.js";
|
|
5
5
|
import { C as j } from "./cross.B92GxFTY.js";
|
|
6
6
|
import { u as q } from "./index.pdBj0KQU.js";
|
|
7
7
|
import { u as Y } from "./index.E60QniEu.js";
|
|
8
|
-
import { P as $, B as H } from "./button-actions.
|
|
8
|
+
import { P as $, B as H } from "./button-actions.C-dLiuIO.js";
|
|
9
9
|
import { _ as Q } from "./_plugin-vue_export-helper.CHgC5LLL.js";
|
|
10
10
|
import "../assets/action-bar.css";
|
|
11
11
|
const N = {
|
|
@@ -199,4 +199,4 @@ const N = {
|
|
|
199
199
|
export {
|
|
200
200
|
fe as B
|
|
201
201
|
};
|
|
202
|
-
//# sourceMappingURL=action-bar.
|
|
202
|
+
//# sourceMappingURL=action-bar.C4v95Cp5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action-bar.QX16Mu4L.js","sources":["../../../vue2/src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n <Transition name=\"b-action-bar__animation\" appear>\n <section class=\"b-action-bar\" :class=\"conditionalClasses\" :aria-label=\"t('actionBar')\">\n <div ref=\"actionBar\" class=\"b-action-bar__container\">\n <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n </bento-button>\n </div>\n <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n {{ n(itemCounter) }}\n {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n </bento-typography>\n <bento-button-actions\n v-if=\"isConfirmationVariant\"\n :actions=\"confirmationActions\"\n class=\"b-action-bar__actions\"\n inverse\n />\n <button-actions-with-menu\n v-else\n :actions=\"actionsInternal\"\n class=\"b-action-bar__actions\"\n :displayed-actions=\"internalDisplayedActions\"\n menu-position=\"top-end\"\n disable-responsive-behavior\n inverse\n />\n </div>\n </section>\n </Transition>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, type PropType, provide, ref, toRefs, watch } from 'vue';\n import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n import { BentoTypography } from '@/components/typography';\n\n import { type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n import { useI18n } from '@/utils/ts/i18n';\n import { useWindowSize } from '@vueuse/core';\n\n import messages from './messages.json';\n import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n // Constants\n const AVERAGE_BUTTON_SIZE = 100;\n const MENU_OFFSET = 7;\n const RESPONSIVE_BREAKPOINT = 500;\n const SPACING = 32;\n\n const props = defineProps({\n /**\n * List of actions that will be used to render the buttons.\n * Required and used for the `default` variant.\n *\n * Each object in the list should have a `title`, an `event` and,\n * optionally, an `icon`.\n *\n * The component will display 4 actions and the hide the rest inside a menu.\n *\n * @see BentoButton for a list of all the other props supported by each button action.\n */\n actions: {\n type: Array as PropType<BentoButtonActionsList>,\n default: () => [],\n },\n /**\n * How many actions should be visible outside the menu, cannot be more than 4\n */\n visibleActions: {\n type: Number,\n default: 4,\n validator: (value: number) => value > 0 && value <= 4,\n },\n /**\n * Use when there are sticky elements at the bottom, like sticky pagination\n */\n extraBottomSpacing: {\n type: Boolean,\n default: false,\n },\n /**\n * Show how many items are selected\n */\n itemCounter: {\n type: Number,\n required: true,\n },\n /**\n * Label for the selection, e.g. 'selected'/'changed'\n */\n selectionLabel: {\n type: String,\n default: null,\n },\n /**\n * Variant for the action bar\n * @values default, confirmation\n */\n variant: {\n type: String as PropType<BentoActionBarVariant>,\n default: 'default',\n },\n });\n\n const emit = defineEmits<{\n /**\n * Event emitted when the user click the close button\n */\n (e: 'close'): void;\n (e: 'cancel'): void;\n (e: 'save'): void;\n }>();\n\n const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n // Refs\n const actionBar = ref<HTMLDivElement>(null);\n const { extraBottomSpacing, visibleActions } = toRefs(props);\n const { width } = useWindowSize();\n const internalDisplayedActions = ref(null);\n const internalVisibleActions = ref(null);\n\n const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n watch(\n () => visibleActions.value,\n value => {\n internalVisibleActions.value = value <= 4 ? value : 4;\n internalDisplayedActions.value = internalVisibleActions.value;\n },\n { immediate: true }\n );\n\n // Styling\n const conditionalClasses = computed(() => ({\n 'b-action-bar--extra-spacing': extraBottomSpacing.value,\n 'b-action-bar--confirmation': isConfirmationVariant.value,\n }));\n\n // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n // Manipulate actions array to display as intended\n const actionsInternal = computed(() => {\n // All buttons should be of type secondary in the action bar\n const actions = props.actions.map(action => ({\n ...action,\n variant: 'secondary',\n })) as BentoButtonActionsList;\n // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n return [...shownActions, ...hiddenActions];\n });\n\n const confirmationActions = computed<BentoButtonActionsList>(() => [\n {\n title: t('save'),\n event: () => emit('save'),\n },\n {\n title: t('cancel'),\n variant: 'secondary',\n event: () => emit('cancel'),\n },\n ]);\n\n // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n const showActions = async () => {\n await nextTick();\n if (\n width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n internalDisplayedActions.value < internalVisibleActions.value\n ) {\n internalDisplayedActions.value += 1;\n showActions();\n }\n };\n\n const hideActions = async () => {\n await nextTick();\n if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n internalDisplayedActions.value -= 1;\n hideActions();\n }\n };\n\n // Screen width watcher to toggle hidden/visible actions\n watch(\n () => width.value,\n async (newValue, oldValue) => {\n await nextTick();\n if (!actionBar.value) {\n return;\n }\n const isIncreasing = newValue > oldValue;\n if (width.value < RESPONSIVE_BREAKPOINT) {\n internalDisplayedActions.value = 0;\n } else if (isIncreasing) {\n showActions();\n } else {\n hideActions();\n }\n },\n { immediate: true }\n );\n</script>\n\n<script lang=\"ts\">\n /**\n * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n *\n * @example\n * import { BentoActionBar } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoActionBar },\n * template: `\n * <bento-action-bar\n * :actions='[\n * {\n * title: 'Delete',\n * critical: true,\n * icon: BinIcon,\n * event: () => true,\n * },\n * {\n * title: 'Edit',\n * icon: EditIcon,\n * event: () => true,\n * }\n * ]'\n * @close=\"closeAction\"\n * :item-counter=\"5\"\n * />\n * `\n * }\n */\n export default {\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","props","__props","emit","__emit","t","tc","n","useI18n","label","computed","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuPIA,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAjMA,UAAAC,IAAAC,GAuDAC,IAAAC,GASA,EAAA,GAAAC,GAAA,IAAAC,GAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAR,EAAA,CAAA,GACAS,IAAAC,EAAA,MAAAT,EAAA,iBAAAA,EAAA,iBAAAI,EAAA,UAAA,CAAA,GAGAM,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAd,CAAA,GACA,EAAA,OAAAe,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAV,EAAA,MAAAT,EAAA,YAAA,cAAA;AAEA,IAAAoB;AAAA,MAAA,MAAAP,EAAA;AAAA,MACyB,CAAAQ,MAAA;AAEjB,QAAAH,EAAA,QAAAG,KAAA,IAAAA,IAAA,GACAJ,EAAA,QAAAC,EAAA;AAAA,MAAwD;AAAA,MAC5D,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAI,IAAAb,EAAA,OAAA;AAAA,MAA2C,+BAAAG,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAA,CAAA;AAGA,UAAAC,IAAAhB,EAAA,MAAA;AAEI,YAAAiB,IAAA1B,EAAA,QAAA,IAAA,CAAA2B,OAAA;AAAA,QAA6C,GAAAA;AAAA,QACtC,SAAA;AAAA,MACM,EAAA,GAGbC,IAAAF,EAAA,MAAA,GAAAT,EAAA,KAAA,EAAA,QAAA,GACAY,IAAAH,EAAA,MAAAT,EAAA,KAAA;AAEA,aAAA,CAAA,GAAAW,GAAA,GAAAC,CAAA;AAAA,IAAyC,CAAA,GAG7CC,IAAArB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAL,EAAA,MAAA;AAAA,QACmB,OAAA,MAAAF,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAAE,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAAF,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJ6B,IAAA,YAAA;AACI,YAAAC,EAAA,GACAjB,EAAA,QAAAL,EAAA,MAAA,cAAA,KAAA,OAAAO,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAc,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAjB,EAAA,QAAAL,EAAA,MAAA,cAAA,MAAAO,EAAA,QAAA,MACIA,EAAA,SAAA,GACAgB,EAAA;AAAA,IACJ;AAIJ,WAAAb;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAmB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAtB,EAAA;AACI;AAEJ,cAAA0B,IAAAF,IAAAC;AACA,QAAApB,EAAA,QAAA,MACIE,EAAA,QAAA,IAAiCmB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"action-bar.C4v95Cp5.js","sources":["../../../vue2/src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n <Transition name=\"b-action-bar__animation\" appear>\n <section class=\"b-action-bar\" :class=\"conditionalClasses\" :aria-label=\"t('actionBar')\">\n <div ref=\"actionBar\" class=\"b-action-bar__container\">\n <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n </bento-button>\n </div>\n <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n {{ n(itemCounter) }}\n {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n </bento-typography>\n <bento-button-actions\n v-if=\"isConfirmationVariant\"\n :actions=\"confirmationActions\"\n class=\"b-action-bar__actions\"\n inverse\n />\n <button-actions-with-menu\n v-else\n :actions=\"actionsInternal\"\n class=\"b-action-bar__actions\"\n :displayed-actions=\"internalDisplayedActions\"\n menu-position=\"top-end\"\n disable-responsive-behavior\n inverse\n />\n </div>\n </section>\n </Transition>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, type PropType, provide, ref, toRefs, watch } from 'vue';\n import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n import { BentoTypography } from '@/components/typography';\n\n import { type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n import { useI18n } from '@/utils/ts/i18n';\n import { useWindowSize } from '@vueuse/core';\n\n import messages from './messages.json';\n import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n // Constants\n const AVERAGE_BUTTON_SIZE = 100;\n const MENU_OFFSET = 7;\n const RESPONSIVE_BREAKPOINT = 500;\n const SPACING = 32;\n\n const props = defineProps({\n /**\n * List of actions that will be used to render the buttons.\n * Required and used for the `default` variant.\n *\n * Each object in the list should have a `title`, an `event` and,\n * optionally, an `icon`.\n *\n * The component will display 4 actions and the hide the rest inside a menu.\n *\n * @see BentoButton for a list of all the other props supported by each button action.\n */\n actions: {\n type: Array as PropType<BentoButtonActionsList>,\n default: () => [],\n },\n /**\n * How many actions should be visible outside the menu, cannot be more than 4\n */\n visibleActions: {\n type: Number,\n default: 4,\n validator: (value: number) => value > 0 && value <= 4,\n },\n /**\n * Use when there are sticky elements at the bottom, like sticky pagination\n */\n extraBottomSpacing: {\n type: Boolean,\n default: false,\n },\n /**\n * Show how many items are selected\n */\n itemCounter: {\n type: Number,\n required: true,\n },\n /**\n * Label for the selection, e.g. 'selected'/'changed'\n */\n selectionLabel: {\n type: String,\n default: null,\n },\n /**\n * Variant for the action bar\n * @values default, confirmation\n */\n variant: {\n type: String as PropType<BentoActionBarVariant>,\n default: 'default',\n },\n });\n\n const emit = defineEmits<{\n /**\n * Event emitted when the user click the close button\n */\n (e: 'close'): void;\n (e: 'cancel'): void;\n (e: 'save'): void;\n }>();\n\n const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n // Refs\n const actionBar = ref<HTMLDivElement>(null);\n const { extraBottomSpacing, visibleActions } = toRefs(props);\n const { width } = useWindowSize();\n const internalDisplayedActions = ref(null);\n const internalVisibleActions = ref(null);\n\n const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n watch(\n () => visibleActions.value,\n value => {\n internalVisibleActions.value = value <= 4 ? value : 4;\n internalDisplayedActions.value = internalVisibleActions.value;\n },\n { immediate: true }\n );\n\n // Styling\n const conditionalClasses = computed(() => ({\n 'b-action-bar--extra-spacing': extraBottomSpacing.value,\n 'b-action-bar--confirmation': isConfirmationVariant.value,\n }));\n\n // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n // Manipulate actions array to display as intended\n const actionsInternal = computed(() => {\n // All buttons should be of type secondary in the action bar\n const actions = props.actions.map(action => ({\n ...action,\n variant: 'secondary',\n })) as BentoButtonActionsList;\n // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n return [...shownActions, ...hiddenActions];\n });\n\n const confirmationActions = computed<BentoButtonActionsList>(() => [\n {\n title: t('save'),\n event: () => emit('save'),\n },\n {\n title: t('cancel'),\n variant: 'secondary',\n event: () => emit('cancel'),\n },\n ]);\n\n // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n const showActions = async () => {\n await nextTick();\n if (\n width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n internalDisplayedActions.value < internalVisibleActions.value\n ) {\n internalDisplayedActions.value += 1;\n showActions();\n }\n };\n\n const hideActions = async () => {\n await nextTick();\n if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n internalDisplayedActions.value -= 1;\n hideActions();\n }\n };\n\n // Screen width watcher to toggle hidden/visible actions\n watch(\n () => width.value,\n async (newValue, oldValue) => {\n await nextTick();\n if (!actionBar.value) {\n return;\n }\n const isIncreasing = newValue > oldValue;\n if (width.value < RESPONSIVE_BREAKPOINT) {\n internalDisplayedActions.value = 0;\n } else if (isIncreasing) {\n showActions();\n } else {\n hideActions();\n }\n },\n { immediate: true }\n );\n</script>\n\n<script lang=\"ts\">\n /**\n * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n *\n * @example\n * import { BentoActionBar } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoActionBar },\n * template: `\n * <bento-action-bar\n * :actions='[\n * {\n * title: 'Delete',\n * critical: true,\n * icon: BinIcon,\n * event: () => true,\n * },\n * {\n * title: 'Edit',\n * icon: EditIcon,\n * event: () => true,\n * }\n * ]'\n * @close=\"closeAction\"\n * :item-counter=\"5\"\n * />\n * `\n * }\n */\n export default {\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","props","__props","emit","__emit","t","tc","n","useI18n","label","computed","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuPIA,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAjMA,UAAAC,IAAAC,GAuDAC,IAAAC,GASA,EAAA,GAAAC,GAAA,IAAAC,GAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAR,EAAA,CAAA,GACAS,IAAAC,EAAA,MAAAT,EAAA,iBAAAA,EAAA,iBAAAI,EAAA,UAAA,CAAA,GAGAM,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAd,CAAA,GACA,EAAA,OAAAe,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAV,EAAA,MAAAT,EAAA,YAAA,cAAA;AAEA,IAAAoB;AAAA,MAAA,MAAAP,EAAA;AAAA,MACyB,CAAAQ,MAAA;AAEjB,QAAAH,EAAA,QAAAG,KAAA,IAAAA,IAAA,GACAJ,EAAA,QAAAC,EAAA;AAAA,MAAwD;AAAA,MAC5D,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAI,IAAAb,EAAA,OAAA;AAAA,MAA2C,+BAAAG,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAA,CAAA;AAGA,UAAAC,IAAAhB,EAAA,MAAA;AAEI,YAAAiB,IAAA1B,EAAA,QAAA,IAAA,CAAA2B,OAAA;AAAA,QAA6C,GAAAA;AAAA,QACtC,SAAA;AAAA,MACM,EAAA,GAGbC,IAAAF,EAAA,MAAA,GAAAT,EAAA,KAAA,EAAA,QAAA,GACAY,IAAAH,EAAA,MAAAT,EAAA,KAAA;AAEA,aAAA,CAAA,GAAAW,GAAA,GAAAC,CAAA;AAAA,IAAyC,CAAA,GAG7CC,IAAArB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAL,EAAA,MAAA;AAAA,QACmB,OAAA,MAAAF,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAAE,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAAF,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJ6B,IAAA,YAAA;AACI,YAAAC,EAAA,GACAjB,EAAA,QAAAL,EAAA,MAAA,cAAA,KAAA,OAAAO,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAc,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAjB,EAAA,QAAAL,EAAA,MAAA,cAAA,MAAAO,EAAA,QAAA,MACIA,EAAA,SAAA,GACAgB,EAAA;AAAA,IACJ;AAIJ,WAAAb;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAmB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAtB,EAAA;AACI;AAEJ,cAAA0B,IAAAF,IAAAC;AACA,QAAApB,EAAA,QAAA,MACIE,EAAA,QAAA,IAAiCmB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as $, useSlots as ee, ref as g, computed as d, inject as ce, watch as Y, nextTick as re, onUnmounted as me, createBlock as P, openBlock as A, normalizeClass as J, createSlots as te, withCtx as l, createElementVNode as L, normalizeStyle as O, createCommentVNode as w, unref as t, renderSlot as c, createVNode as q, useAttrs as ge, toRefs as ve, onMounted as pe, provide as G, createElementBlock as fe, withKeys as _e, withDirectives as ye } from "vue";
|
|
2
2
|
import { B as be } from "./button.DhcxX2GJ.js";
|
|
3
|
-
import { B as he } from "./focus-trap.
|
|
3
|
+
import { B as he } from "./focus-trap.BaHvK7aT.js";
|
|
4
4
|
import { u as ae } from "./use-has-slot.B7eQSabc.js";
|
|
5
5
|
import { u as Le } from "./index.pdBj0KQU.js";
|
|
6
6
|
import { a as Ae } from "./teleport.CHhznja1.js";
|
|
@@ -9,7 +9,7 @@ import { B as Ee } from "./directive.Cbdox5VL.js";
|
|
|
9
9
|
import { C as Ie } from "./cross.B92GxFTY.js";
|
|
10
10
|
import { D as Oe, B as Pe, b as Se, a as De } from "./dialog-page.BY6T1jYZ.js";
|
|
11
11
|
import { B as x } from "./typography.yBEME_Gu.js";
|
|
12
|
-
import { F as ke } from "./footer-actions.
|
|
12
|
+
import { F as ke } from "./footer-actions.DTbfJdED.js";
|
|
13
13
|
import { o as Be } from "./resize.Bqks3WUm.js";
|
|
14
14
|
import { G as Te, a as Ne } from "./grid-layout.DDaRNz4-.js";
|
|
15
15
|
import { _ as oe } from "./_plugin-vue_export-helper.CHgC5LLL.js";
|
|
@@ -438,4 +438,4 @@ export {
|
|
|
438
438
|
Ke as g,
|
|
439
439
|
dt as h
|
|
440
440
|
};
|
|
441
|
-
//# sourceMappingURL=base-modal.
|
|
441
|
+
//# sourceMappingURL=base-modal.DoMod4Z4.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-modal.CHYvJ_xU.js","sources":["../../../vue2/src/components/modal/modal.types.ts","../../../vue2/src/components/modal/modal.keys.ts","../../../vue2/src/components/modal/components/modal-page/modal-page.vue","../../../vue2/src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["import { type ComputedRef, type Ref } from 'vue';\n\n/**\n * Public\n */\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariant {\n DEFAULT = 'default',\n DIALOG = 'dialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariantMapping {\n DEFAULT = 'BentoModalDefault',\n DIALOG = 'BentoModalDialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalSize {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalColumnLayoutVariant {\n SMALLER = 'smaller',\n EQUAL = 'equal',\n BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n DIALOG = 'dialog',\n ALERT_DIALOG = 'alertdialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalDialogType {\n CONFIRMATION = 'confirmation',\n DESTRUCTIVE = 'destructive',\n INFO = 'info',\n ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n CLOSE_MODAL = 'close-modal',\n}\n\n/**\n * Private\n */\nexport interface BentoModalConfigData {\n activePage: Ref<string>;\n height: Ref<string>;\n isAnimationActive: Ref<boolean>;\n pageCustomPadding: Ref<string>;\n showCloseButton: ComputedRef<boolean>;\n size: Ref<BentoModalSize | `${BentoModalSize}`>;\n}\n","export const MODAL_CONFIG_INJECTION_KEY = Symbol('modal config data injection key');\n","<template>\n <dialog-page\n ref=\"page\"\n class=\"b-modal-page\"\n :class=\"modalPageConditionalClasses\"\n :page-id=\"pageId\"\n :always-show-border=\"hasColumnLayout\"\n :back-button-styling=\"customPaddingStyles?.backButton\"\n :previous-page=\"previousPage\"\n @animationend=\"isAnimationActive = false\"\n >\n <template v-if=\"hasSlot('default') || showCloseButton\" #header>\n <div class=\"b-modal-page__header-container\" :style=\"customPaddingStyles.header\">\n <div class=\"b-modal-page__header\">\n <bento-typography class=\"b-modal-page__title\" el=\"span\" variant=\"title\" stronger>\n <slot v-if=\"hasSlot('default')\" />\n </bento-typography>\n </div>\n </div>\n </template>\n\n <template #content>\n <div\n class=\"b-modal-page__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 el=\"div\"\n >\n <grid-layout\n v-if=\"hasColumnLayout\"\n :column-width=\"computedColumnWidth\"\n :container-type=\"GridLayoutContainerType.NORMAL\"\n no-gap\n class=\"b-modal-page__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 </template>\n <template v-if=\"hasSlot('actions')\" #footer>\n <div class=\"b-modal-page__actions-container\" :style=\"customPaddingStyles.actions\">\n <div aria-label=\"modal actions\" class=\"b-modal-page__actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n </template>\n <template v-else-if=\"actions && actions.length > 0\" #footer>\n <div class=\"b-modal-page__actions-container\" :style=\"customPaddingStyles.actions\">\n <footer-actions\n :actions=\"actions\"\n :actions-label=\"actionsLabel\"\n :destructive-actions=\"destructiveActions\"\n />\n </div>\n </template>\n </dialog-page>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, inject, nextTick, onUnmounted, ref, useSlots, watch } from 'vue';\n import {\n BentoModalColumnLayoutVariant,\n type BentoModalConfigData,\n BentoModalSize,\n } from '@/components/modal/modal.types';\n import { BentoTypography } from '@/components/typography';\n import { GridLayout, GridLayoutContainerType } from '@/internal';\n import { useHasSlot } from '@/composables';\n\n import { FooterActions } from '@/components/internal/footer-actions';\n\n import DialogPage from '@/internal/dialog-page/dialog-page.vue';\n import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys';\n import { observeSizeOfElement } from '@/utils/ts/resize';\n import type { BentoModalPageProps } from './modal-page.types';\n\n const CLOSE_BUTTON_ICON_WIDTH = 26;\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n const page = ref<InstanceType<typeof DialogPage>>(null);\n\n const props = withDefaults(defineProps<BentoModalPageProps>(), {\n actions: null,\n actionsLabel: null,\n columnsSize: BentoModalColumnLayoutVariant.SMALLER,\n customPadding: null,\n destructiveActions: false,\n withColumnLayout: false,\n pageId: undefined,\n previousPage: undefined,\n });\n\n const modalPageConditionalClasses = computed(() => ({\n 'b-modal-page--custom-padding': props.customPadding,\n }));\n\n const modalContentConditionalClasses = computed(() => ({\n 'b-modal-page__content--with-header': hasSlot('default'),\n 'b-modal-page__content--with-actions': hasSlot('actions') || props.actions?.length,\n }));\n\n // Setting custom padding styles\n const customPaddingStyles = computed(() => {\n if (!props.customPadding) {\n return {};\n }\n\n const xPadding = {\n paddingLeft: props.customPadding,\n paddingRight: props.customPadding,\n };\n\n const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n if (!hasSlot('default')) {\n content.paddingTop = props.customPadding;\n }\n\n if (!hasSlot('actions')) {\n content.paddingBottom = props.customPadding;\n }\n\n return {\n header: {\n ...xPadding,\n paddingTop: props.customPadding,\n paddingRight: `${parseInt(props.customPadding, 10) + CLOSE_BUTTON_ICON_WIDTH}px`,\n flex: 1,\n },\n content,\n actions: { ...xPadding, paddingBottom: props.customPadding },\n backButton: { top: props.customPadding, paddingLeft: props.customPadding },\n };\n });\n\n // Column layout styles\n const hasColumnLayout = computed(() => props.withColumnLayout && size.value === BentoModalSize.LARGE);\n\n const computedColumnWidth = computed(() => {\n if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n return [\n { small: 4, medium: 4, large: 4 },\n { small: 8, medium: 8, large: 8 },\n ];\n }\n if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n return [\n { small: 8, medium: 8, large: 8 },\n { small: 4, medium: 4, large: 4 },\n ];\n }\n return [\n { small: 6, medium: 6, large: 6 },\n { small: 6, medium: 6, large: 6 },\n ];\n });\n\n // Register page to parent component and inject data from parent component\n const { activePage, height, isAnimationActive, pageCustomPadding, showCloseButton, size } =\n inject<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY);\n\n const isCurrentPage = computed(() => activePage.value === props.pageId || !activePage.value);\n\n // Animation\n // Set resize observer on mount of update the height of the dialog on resize\n let pageElementObserver: ResizeObserver | null = null;\n\n // Watching activePage changes to set the height of the page and set isAnimationActive\n watch(\n () => activePage.value,\n async (value, oldValue) => {\n if (isCurrentPage.value) {\n await nextTick();\n height.value = `${page.value?.$el?.clientHeight}px`;\n pageCustomPadding.value = props.customPadding;\n // only set isAnimationActive to true if its going from two different pages and not from null to the first page\n isAnimationActive.value = oldValue !== undefined;\n\n pageElementObserver = observeSizeOfElement(page.value, () => {\n const pageHeight = `${page.value?.$el?.clientHeight}px`;\n if (pageHeight && pageHeight !== height.value) {\n height.value = pageHeight;\n }\n });\n }\n },\n { immediate: true }\n );\n\n // Disconnect observer on unmounting the page\n onUnmounted(() => {\n pageElementObserver?.disconnect();\n });\n</script>\n\n<script lang=\"ts\">\n /**\n * ModalPage is used to render different pages of the Modal component\n *\n * @example\n * import { BentoModal, BentoModalPage } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoModal, BentoModalPage },\n * template: `\n * <bento-modal active-page='page1' :is-open='true'>\n * <bento-modal-page\n * pageId='page1'\n * actions-label='Move to next page'\n * :actions=\"[\n * {\n * title: 'Next page',\n * event: () => {\n * activePage.value = 'page2';\n * },\n * }]\">\n * Page 1\n * <template #content>\n * Page 1 content\n * </template>\n * </bento-modal-page>\n * <bento-modal-page\n * pageId='page2'\n * :actions=\"[\n * {\n * title: 'Save',\n * event: () => {},\n * }]\">\n * Page 2\n * <template #content>\n * Page 2 content\n * </template>\n * </bento-modal-page>\n * </bento-modal>\n * `\n * }\n */\n export default defineComponent({});\n</script>\n\n<style lang=\"scss\" scoped src=\"./modal-page.scss\" />\n","<template>\n <div class=\"b-modal-base\">\n <dialog\n ref=\"modal\"\n :role=\"modalRole\"\n :aria-label=\"computedAriaLabel\"\n :style=\"{ height: height }\"\n class=\"b-modal-base__container\"\n :class=\"modalConditionalClasses\"\n :open=\"initiallyOpen\"\n @animationend=\"closeModalAfterAnimation\"\n @keydown.esc=\"internalModalActionClose\"\n >\n <bento-focus-trap\n v-if=\"isOpen || initiallyOpen\"\n :id=\"modalId\"\n v-bento-click-outside-directive=\"closeModalOnClickOutside\"\n >\n <bento-button\n v-if=\"showCloseButton\"\n class=\"b-modal-base__close-button\"\n variant=\"tertiary\"\n type=\"button\"\n :style=\"customPaddingStyles\"\n @click=\"internalModalActionClose\"\n >\n <cross-icon :svg-title=\"t('close')\" />\n </bento-button>\n <template v-if=\"props.activePage\">\n <slot />\n </template>\n <bento-modal-page\n v-else\n :with-column-layout=\"withColumnLayout\"\n :size=\"size\"\n :custom-padding=\"customPadding\"\n :columns-size=\"columnsSize\"\n >\n <template v-if=\"hasSlot('default')\" #default>\n <slot></slot>\n </template>\n <template v-if=\"hasSlot('content-col-1')\" #content-col-1\n ><slot name=\"content-col-1\"></slot\n ></template>\n <template v-if=\"hasSlot('content-col-2')\" #content-col-2\n ><slot name=\"content-col-2\"></slot\n ></template>\n <template v-if=\"hasSlot('content')\" #content><slot name=\"content\"></slot></template>\n <template v-if=\"hasSlot('actions')\" #actions><slot name=\"actions\"></slot></template>\n </bento-modal-page>\n </bento-focus-trap>\n </dialog>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import {\n computed,\n defineComponent,\n onMounted,\n type PropType,\n provide,\n ref,\n toRefs,\n useAttrs,\n useSlots,\n watch,\n } from 'vue';\n import {\n BentoModalColumnLayoutVariant,\n type BentoModalConfigData,\n BentoModalRole,\n BentoModalSize,\n } from '@/components/modal/modal.types';\n import { BentoButton, type BentoButtonActionsList } from '@/components/button';\n import { BentoFocusTrap } from '@/components/focus-trap';\n import { useHasSlot } from '@/composables';\n import { useI18n } from '@/utils/ts/i18n';\n import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys';\n import { generateUid } from '@/core/utils/ts';\n import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n import messages from './messages.json';\n\n import { BentoModalPage } from '@/components/modal/components/modal-page';\n import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys';\n import {\n BentoDialogPageAnimation,\n type BentoDialogPageConfigData,\n type BentoDialogPageRegisterPage,\n DIALOG_PAGE_CONFIG_INJECTION_KEY,\n DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n } from '@/internal';\n\n type MessageSchema = (typeof messages)['en-US'];\n const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const slots = useSlots();\n const attrs = useAttrs();\n const hasSlot = useHasSlot(slots);\n const modal = ref<HTMLDialogElement>(null);\n const isClosing = ref(false);\n const modalId = generateUid('modal');\n\n const emit = defineEmits<{\n /**\n * Emits update event when page is changed internally\n */\n (e: 'update:active-page', page: string): void;\n /**\n * Emitted when the modal is closed.\n */\n (e: 'close-modal');\n }>();\n\n const props = defineProps({\n /**\n * List of actions that will be used to render the buttons.\n * First element in the list will be rendered as \"primary\".\n * All elements after the first will be rendered as \"secondary\".\n * But you may change the color of 1-st action to red with 'critial' key\n * Not more than 3 action buttons can be provided\n * Or 2 action buttons and 1 Label for them\n *\n * Each object in the list should have a `title`, an `event` and\n * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n *\n * `title`: Button's text.\n *\n * `event`: Event triggered when clicking the Button.\n *\n * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n *\n * ```\n * [{\n * title: 'Primary',2\n * event: () => { ... },\n * icon: FourPeopleIcon\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * }]\n * ```\n */\n actions: {\n type: Array as PropType<BentoButtonActionsList>,\n default: null,\n },\n\n /**\n * The id of the current active page\n * Should be the same id as the BentoModalPage to be displayed\n */\n activePage: {\n type: String,\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 * If passed - sets first button color to red\n */\n destructiveActions: { type: Boolean, default: false },\n\n /**\n * Hides a cross icon on the right side of the title\n */\n hideCloseButton: { type: Boolean, required: true },\n\n /**\n * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n */\n initiallyOpen: { type: Boolean, default: false },\n\n /**\n * If set to true, it allows the modal to be closed by clicking outside of it\n */\n isDismissible: { type: Boolean, required: true },\n\n /**\n * Controls the modal's state from the outside. Set it to true to open the modal\n */\n isOpen: { type: Boolean, required: true },\n\n /**\n * Defines whether the modal will be an alert modal\n */\n modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n /**\n * Sets the width of the modal\n */\n size: {\n type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n default: BentoModalSize.SMALL,\n },\n\n /**\n * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n */\n withColumnLayout: { type: Boolean, default: false },\n });\n\n const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton);\n\n const pageCustomPadding = ref(props.customPadding);\n\n const customPaddingStyles = computed(() => {\n if (!pageCustomPadding.value) {\n return {};\n }\n\n return { top: pageCustomPadding.value, right: pageCustomPadding.value };\n });\n\n const computedAriaLabel = computed(() => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string));\n const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n const openModal = (): void => {\n modal.value.showModal();\n };\n\n const emitCloseEvent = (): void => {\n emit('close-modal');\n };\n\n // Handle closing and closing animation for dialog element\n const closeModalAfterAnimation = () => {\n if (isClosing.value) {\n modal.value.close();\n if (previousPages.value[0]) {\n emit('update:active-page', previousPages.value[0]);\n }\n previousPages.value = [];\n isClosing.value = false;\n emitCloseEvent();\n }\n };\n\n const startCloseModalAnimation = () => {\n if (!modal.value.open) {\n return;\n }\n isClosing.value = true;\n };\n\n /**\n * If the user has pressed escape, clicked outside or clicked the close icon.\n * Needs to be called from outside, following the \"dialog.close()\" pattern,\n * when the closing event is triggered outside of the \"base-modal\"\n * component (e.g. from a closing action).\n */\n const internalModalActionClose = (event?: Event) => {\n if (event) {\n event.preventDefault();\n }\n if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) {\n return;\n }\n startCloseModalAnimation();\n };\n\n const closeModalOnClickOutside = () => {\n if (props.isDismissible) {\n internalModalActionClose();\n }\n };\n\n const modalConditionalClasses = computed(() => ({\n [`b-modal-base__container--${props.size}`]: props.size,\n 'b-modal-base__container--hide': isClosing.value,\n 'b-modal-base__container--column-layout': hasColumnLayout.value,\n 'b-modal-base__container--animation': isAnimationActive.value,\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 // add the first page to the array when the modal opens\n if (!previousPages.value.length) {\n previousPages.value.push(activePage.value);\n }\n } else if (!isFirstMutation) {\n startCloseModalAnimation();\n }\n }\n );\n\n // If the first button is a loading button then close the modal have 0.5 seconds\n // if the state is changed to 'success'.\n watch(\n () => props.actions,\n () => {\n if (props.actions?.[0]?.state === 'success') {\n setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n }\n },\n { deep: true }\n );\n\n onMounted(() => {\n if (props.isOpen && modal.value) {\n openModal();\n }\n });\n\n /**\n * Expose methods through its 'ref'\n */\n defineExpose({\n internalModalActionClose,\n });\n\n // Let's Children components know they are inside a Modal (dialog element)\n provide(MODAL_DIALOG_ID_INJECTION_KEY, modalId);\n\n // Modal pagination\n const { activePage, isOpen, size } = toRefs(props);\n const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n\n const pages = ref<Array<string>>([]);\n const previousPages = ref([]);\n\n const updatePage = page => emit('update:active-page', page);\n\n // unregister page if removed / destroyed\n const unregisterPage = (pageIdToRemove: string) => () => {\n pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n };\n\n // Provide data and function to register page to subcomponent\n const registerPage: BentoDialogPageRegisterPage = pageId => {\n if (pageId) {\n pages.value.push(pageId);\n }\n\n return { unregisterPage: unregisterPage(pageId) };\n };\n\n const height = ref('');\n const isAnimationActive = ref(false);\n\n provide<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY, {\n activePage,\n height,\n isAnimationActive,\n pageCustomPadding,\n showCloseButton,\n size,\n });\n\n provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n activePage,\n animation,\n isOpen,\n pages,\n previousPages,\n updatePage,\n });\n\n provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n</script>\n\n<script lang=\"ts\">\n /**\n * Dialog container. It creates a dialog HTML element for the modal to use.\n *\n * @example\n * import BaseModal from './components/base-modal/base-modal.vue';\n *\n * export default {\n * components: { BaseModal },\n * template: `\n * <base-modal\n * :hide-close-button=\"true\"\n * :is-dismissible=\"false\"\n * :is-open=\"isOpen\"\n * @close-modal=\"isOpen = false\"\n * >\n * <template #content-col-1>\n * // Content on the left side column\n * </template>\n *\n * <template #content-col-2>\n * // Content on the right side column\n * </template>\n *\n * <template v-if=\"actions\" #actions>\n * <footer-actions :actions=\"actions\" />\n * </template>\n * </base-modal>\n * `,\n * setup() {\n * const isOpen = ref(true)\n * const footerActions = [{\n * title: 'Primary action',\n * event: () => { ... }\n * }]\n * }\n * }\n */\n export default defineComponent({\n i18n: { messages },\n name: 'base-modal',\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalVariantMapping","BentoModalVariantMapping2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","MODAL_CONFIG_INJECTION_KEY","__default__$1","defineComponent","slots","useSlots","hasSlot","useHasSlot","page","ref","props","__props","modalPageConditionalClasses","computed","modalContentConditionalClasses","_a","customPaddingStyles","xPadding","content","hasColumnLayout","size","computedColumnWidth","activePage","height","isAnimationActive","pageCustomPadding","showCloseButton","inject","isCurrentPage","pageElementObserver","watch","value","oldValue","nextTick","_b","observeSizeOfElement","pageHeight","onUnmounted","__default__","messages","t","useI18n","attrs","useAttrs","modal","isClosing","modalId","generateUid","emit","__emit","computedAriaLabel","openModal","emitCloseEvent","closeModalAfterAnimation","previousPages","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","modalConditionalClasses","newIsOpen","newModalValue","oldModalValue","onMounted","__expose","provide","MODAL_DIALOG_ID_INJECTION_KEY","isOpen","toRefs","animation","BentoDialogPageAnimation","pages","updatePage","unregisterPage","pageIdToRemove","pageId","registerPage","DIALOG_PAGE_CONFIG_INJECTION_KEY","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY"],"mappings":";;;;;;;;;;;;;;;;AASY,IAAAA,KAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,SAAA,UAFQA,IAAAD,MAAA,CAAA,CAAA,GAQAE,KAAA,kBAAAC,OACRA,EAAA,UAAA,qBACAA,EAAA,SAAA,oBAFQA,IAAAD,MAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA,GASAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,QAAA,SACAA,EAAA,SAAA,UAHQA,IAAAD,KAAA,CAAA,CAAA,GAMAE,IAAA,kBAAAC,OACRA,EAAA,SAAA,UACAA,EAAA,eAAA,eAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,KAAA,kBAAAC,OACRA,EAAA,eAAA,gBACAA,EAAA,cAAA,eACAA,EAAA,OAAA,QACAA,EAAA,kBAAA,mBAJQA,IAAAD,MAAA,CAAA,CAAA,GAOAE,KAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,MAAA,CAAA,CAAA;;;;;;;;;;;;GCvDCE,KAAA,uBAAA,iCAAA;;;GCoPTC,KAAAC,EAAA,CAAA,CAAA;;;;;;;;;;;;;;AAhKA,UAAAC,IAAAC,GAAA,GACAC,IAAAC,GAAAH,CAAA,GACAI,IAAAC,EAAA,IAAA,GAEAC,IAAAC,GAWAC,IAAAC,EAAA,OAAA;AAAA,MAAoD,gCAAAH,EAAA;AAAA,IACV,EAAA,GAG1CI,IAAAD,EAAA,MAAA;;AAAA;AAAA,QAAuD,sCAAAP,EAAA,SAAA;AAAA,QACI,uCAAAA,EAAA,SAAA,OAAAS,IAAAL,EAAA,YAAA,gBAAAK,EAAA;AAAA,MACqB;AAAA,KAAA,GAIhFC,IAAAH,EAAA,MAAA;AACI,UAAA,CAAAH,EAAA;AACI,eAAA,CAAA;AAGJ,YAAAO,IAAA;AAAA,QAAiB,aAAAP,EAAA;AAAA,QACM,cAAAA,EAAA;AAAA,MACC,GAGxBQ,IAAA,EAAA,GAAAD,GAAA,YAAA,QAAA,eAAA,OAAA;AAEA,aAAAX,EAAA,SAAA,MACIY,EAAA,aAAAR,EAAA,gBAGJJ,EAAA,SAAA,MACIY,EAAA,gBAAAR,EAAA,gBAGJ;AAAA,QAAO,QAAA;AAAA,UACK,GAAAO;AAAA,UACD,YAAAP,EAAA;AAAA,UACe,cAAA,GAAA,SAAAA,EAAA,eAAA,EAAA,IAAA,EAAA;AAAA,UAC0D,MAAA;AAAA,QACtE;AAAA,QACV,SAAAQ;AAAA,QACA,SAAA,EAAA,GAAAD,GAAA,eAAAP,EAAA,cAAA;AAAA,QAC2D,YAAA,EAAA,KAAAA,EAAA,eAAA,aAAAA,EAAA,cAAA;AAAA,MACc;AAAA,IAC7E,CAAA,GAIJS,IAAAN,EAAA,MAAAH,EAAA,oBAAAU,EAAA,UAAA7B,EAAA,KAAA,GAEA8B,IAAAR,EAAA,MACIH,EAAA,gBAAAjB,EAAA,UACI;AAAA,MAAO,EAAA,OAAA,GAAA,QAAA,GAAA,OAAA,EAAA;AAAA,MAC6B,EAAA,OAAA,GAAA,QAAA,GAAA,OAAA,EAAA;AAAA,IACA,IAGxCiB,EAAA,gBAAAjB,EAAA,SACI;AAAA,MAAO,EAAA,OAAA,GAAA,QAAA,GAAA,OAAA,EAAA;AAAA,MAC6B,EAAA,OAAA,GAAA,QAAA,GAAA,OAAA,EAAA;AAAA,IACA,IAGxC;AAAA,MAAO,EAAA,OAAA,GAAA,QAAA,GAAA,OAAA,EAAA;AAAA,MAC6B,EAAA,OAAA,GAAA,QAAA,GAAA,OAAA,EAAA;AAAA,IACA,CACpC,GAIJ,EAAA,YAAA6B,GAAA,QAAAC,GAAA,mBAAAC,GAAA,mBAAAC,GAAA,iBAAAC,GAAA,MAAAN,EAAA,IAAAO,GAAA1B,EAAA,GAGA2B,IAAAf,EAAA,MAAAS,EAAA,UAAAZ,EAAA,UAAA,CAAAY,EAAA,KAAA;AAIA,QAAAO,IAAA;AAGA,WAAAC;AAAA,MAAA,MAAAR,EAAA;AAAA,MACqB,OAAAS,GAAAC,MAAA;;AAEb,QAAAJ,EAAA,UACI,MAAAK,GAAA,GACAV,EAAA,QAAA,IAAAW,KAAAnB,IAAAP,EAAA,UAAA,gBAAAO,EAAA,QAAA,gBAAAmB,EAAA,YAAA,MACAT,EAAA,QAAAf,EAAA,eAEAc,EAAA,QAAAQ,MAAA,QAEAH,IAAAM,GAAA3B,EAAA,OAAA,MAAA;;AACI,gBAAA4B,IAAA,IAAAF,KAAAnB,IAAAP,EAAA,UAAA,gBAAAO,EAAA,QAAA,gBAAAmB,EAAA,YAAA;AACA,UAAAE,KAAAA,MAAAb,EAAA,UACIA,EAAA,QAAAa;AAAA,QACJ,CAAA;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB,GAItBC,GAAA,MAAA;AACI,MAAAR,KAAA,QAAAA,EAAA;AAAA,IAAgC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0ICgOpCS,KAAAnC,EAAA;AAAA,EAA+B,MAAA,EAAA,UAAAoC,GAAA;AAAA,EACV,MAAA;AAErB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAvUA,UAAA,EAAA,GAAAC,EAAA,IAAAC,GAAA,EAAA,UAAAF,GAAA,CAAA,GACAnC,IAAAC,GAAA,GACAqC,IAAAC,GAAA,GACArC,IAAAC,GAAAH,CAAA,GACAwC,IAAAnC,EAAA,IAAA,GACAoC,IAAApC,EAAA,EAAA,GACAqC,IAAAC,GAAA,OAAA,GAEAC,IAAAC,GAWAvC,IAAAC,GAoGAe,IAAAb,EAAA,MAAAH,EAAA,iBAAA,CAAAA,EAAA,eAAA,GAEAe,IAAAhB,EAAAC,EAAA,aAAA,GAEAM,IAAAH,EAAA,MACIY,EAAA,QAIA,EAAA,KAAAA,EAAA,OAAA,OAAAA,EAAA,MAAA,IAHI,CAAA,CAGkE,GAG1EyB,IAAArC,EAAA,MAAA6B,EAAA,YAAA,KAAAF,EAAA,mBAAA,CAAA,GACArB,IAAAN,EAAA,MAAAH,EAAA,oBAAAA,EAAA,SAAAnB,EAAA,KAAA,GAEA4D,IAAA,MAAA;AACI,MAAAP,EAAA,MAAA,UAAA;AAAA,IAAsB,GAG1BQ,IAAA,MAAA;AACI,MAAAJ,EAAA,aAAA;AAAA,IAAkB,GAItBK,IAAA,MAAA;AACI,MAAAR,EAAA,UACID,EAAA,MAAA,MAAA,GACAU,EAAA,MAAA,CAAA,KACIN,EAAA,sBAAAM,EAAA,MAAA,CAAA,CAAA,GAEJA,EAAA,QAAA,CAAA,GACAT,EAAA,QAAA,IACAO,EAAA;AAAA,IACJ,GAGJG,IAAA,MAAA;AACI,MAAAX,EAAA,MAAA,SAGAC,EAAA,QAAA;AAAA,IAAkB,GAStBW,IAAA,CAAAC,MAAA;AAII,MAHAA,KACIA,EAAA,eAAA,GAEJ,GAAA/C,EAAA,iBAAAA,EAAA,cAAAf,EAAA,WAGA4D,EAAA;AAAA,IAAyB,GAG7BG,IAAA,MAAA;AACI,MAAAhD,EAAA,iBACI8C,EAAA;AAAA,IACJ,GAGJG,IAAA9C,EAAA,OAAA;AAAA,MAAgD,CAAA,4BAAAH,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACM,iCAAAmC,EAAA;AAAA,MACP,0CAAA1B,EAAA;AAAA,MACe,sCAAAK,EAAA;AAAA,IACF,EAAA;AAG5D,IAAAM;AAAA,MAAA,MAAA,CAAApB,EAAA,QAAAkC,EAAA,KAAA;AAAA,MACoC,CAAA,CAAAgB,GAAAC,CAAA,GAAA,CAAA,EAAAC,CAAA,MAAA;AAE5B,YAAA,CAAAD;AACI;AAIJ,QAAAD,KACIT,EAAA,GAEAG,EAAA,MAAA,UACIA,EAAA,MAAA,KAAAhC,EAAA,KAAA,KALR,CAAAwC,KAQIP,EAAA;AAAA,MACJ;AAAA,IACJ,GAKJzB;AAAA,MAAA,MAAApB,EAAA;AAAA,MACgB,MAAA;;AAER,UAAAwB,KAAAnB,IAAAL,EAAA,YAAA,gBAAAK,EAAA,OAAA,gBAAAmB,EAAA,WAAA,aACI,WAAAqB,GAAA,GAAA;AAAA,MACJ;AAAA,MACJ,EAAA,MAAA,GAAA;AAAA,IACa,GAGjBQ,GAAA,MAAA;AACI,MAAArD,EAAA,UAAAkC,EAAA,SACIO,EAAA;AAAA,IACJ,CAAA,GAMJa,EAAA;AAAA,MAAa,0BAAAR;AAAA,IACT,CAAA,GAIJS,EAAAC,IAAApB,CAAA;AAGA,UAAA,EAAA,YAAAxB,GAAA,QAAA6C,GAAA,MAAA/C,EAAA,IAAAgD,GAAA1D,CAAA,GACA2D,KAAA5D,EAAA6D,GAAA,uBAAA,GAEAC,IAAA9D,EAAA,CAAA,CAAA,GACA6C,IAAA7C,EAAA,CAAA,CAAA,GAEA+D,KAAA,CAAAhE,MAAAwC,EAAA,sBAAAxC,CAAA,GAGAiE,KAAA,CAAAC,MAAA,MAAA;;AACI,MAAAH,EAAA,SAAAxD,IAAAwD,EAAA,UAAA,gBAAAxD,EAAA,OAAA,CAAA4D,MAAAA,MAAAD;AAAA,IAAqE,GAIzEE,KAAA,CAAAD,OACIA,KACIJ,EAAA,MAAA,KAAAI,CAAA,GAGJ,EAAA,gBAAAF,GAAAE,CAAA,EAAA,IAGJpD,IAAAd,EAAA,EAAA,GACAe,IAAAf,EAAA,EAAA;AAEA,WAAAwD,EAAAhE,IAAA;AAAA,MAA0D,YAAAqB;AAAA,MACtD,QAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,MAAAN;AAAA,IACA,CAAA,GAGJ6C,EAAAY,IAAA;AAAA,MAAqE,YAAAvD;AAAA,MACjE,WAAA+C;AAAA,MACA,QAAAF;AAAA,MACA,OAAAI;AAAA,MACA,eAAAjB;AAAA,MACA,YAAAkB;AAAA,IACA,CAAA,GAGJP,EAAAa,IAAAF,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"base-modal.DoMod4Z4.js","sources":["../../../vue2/src/components/modal/modal.types.ts","../../../vue2/src/components/modal/modal.keys.ts","../../../vue2/src/components/modal/components/modal-page/modal-page.vue","../../../vue2/src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["import { type ComputedRef, type Ref } from 'vue';\n\n/**\n * Public\n */\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariant {\n DEFAULT = 'default',\n DIALOG = 'dialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariantMapping {\n DEFAULT = 'BentoModalDefault',\n DIALOG = 'BentoModalDialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalSize {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalColumnLayoutVariant {\n SMALLER = 'smaller',\n EQUAL = 'equal',\n BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n DIALOG = 'dialog',\n ALERT_DIALOG = 'alertdialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalDialogType {\n CONFIRMATION = 'confirmation',\n DESTRUCTIVE = 'destructive',\n INFO = 'info',\n ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n CLOSE_MODAL = 'close-modal',\n}\n\n/**\n * Private\n */\nexport interface BentoModalConfigData {\n activePage: Ref<string>;\n height: Ref<string>;\n isAnimationActive: Ref<boolean>;\n pageCustomPadding: Ref<string>;\n showCloseButton: ComputedRef<boolean>;\n size: Ref<BentoModalSize | `${BentoModalSize}`>;\n}\n","export const MODAL_CONFIG_INJECTION_KEY = Symbol('modal config data injection key');\n","<template>\n <dialog-page\n ref=\"page\"\n class=\"b-modal-page\"\n :class=\"modalPageConditionalClasses\"\n :page-id=\"pageId\"\n :always-show-border=\"hasColumnLayout\"\n :back-button-styling=\"customPaddingStyles?.backButton\"\n :previous-page=\"previousPage\"\n @animationend=\"isAnimationActive = false\"\n >\n <template v-if=\"hasSlot('default') || showCloseButton\" #header>\n <div class=\"b-modal-page__header-container\" :style=\"customPaddingStyles.header\">\n <div class=\"b-modal-page__header\">\n <bento-typography class=\"b-modal-page__title\" el=\"span\" variant=\"title\" stronger>\n <slot v-if=\"hasSlot('default')\" />\n </bento-typography>\n </div>\n </div>\n </template>\n\n <template #content>\n <div\n class=\"b-modal-page__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 el=\"div\"\n >\n <grid-layout\n v-if=\"hasColumnLayout\"\n :column-width=\"computedColumnWidth\"\n :container-type=\"GridLayoutContainerType.NORMAL\"\n no-gap\n class=\"b-modal-page__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 </template>\n <template v-if=\"hasSlot('actions')\" #footer>\n <div class=\"b-modal-page__actions-container\" :style=\"customPaddingStyles.actions\">\n <div aria-label=\"modal actions\" class=\"b-modal-page__actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n </template>\n <template v-else-if=\"actions && actions.length > 0\" #footer>\n <div class=\"b-modal-page__actions-container\" :style=\"customPaddingStyles.actions\">\n <footer-actions\n :actions=\"actions\"\n :actions-label=\"actionsLabel\"\n :destructive-actions=\"destructiveActions\"\n />\n </div>\n </template>\n </dialog-page>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, inject, nextTick, onUnmounted, ref, useSlots, watch } from 'vue';\n import {\n BentoModalColumnLayoutVariant,\n type BentoModalConfigData,\n BentoModalSize,\n } from '@/components/modal/modal.types';\n import { BentoTypography } from '@/components/typography';\n import { GridLayout, GridLayoutContainerType } from '@/internal';\n import { useHasSlot } from '@/composables';\n\n import { FooterActions } from '@/components/internal/footer-actions';\n\n import DialogPage from '@/internal/dialog-page/dialog-page.vue';\n import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys';\n import { observeSizeOfElement } from '@/utils/ts/resize';\n import type { BentoModalPageProps } from './modal-page.types';\n\n const CLOSE_BUTTON_ICON_WIDTH = 26;\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n const page = ref<InstanceType<typeof DialogPage>>(null);\n\n const props = withDefaults(defineProps<BentoModalPageProps>(), {\n actions: null,\n actionsLabel: null,\n columnsSize: BentoModalColumnLayoutVariant.SMALLER,\n customPadding: null,\n destructiveActions: false,\n withColumnLayout: false,\n pageId: undefined,\n previousPage: undefined,\n });\n\n const modalPageConditionalClasses = computed(() => ({\n 'b-modal-page--custom-padding': props.customPadding,\n }));\n\n const modalContentConditionalClasses = computed(() => ({\n 'b-modal-page__content--with-header': hasSlot('default'),\n 'b-modal-page__content--with-actions': hasSlot('actions') || props.actions?.length,\n }));\n\n // Setting custom padding styles\n const customPaddingStyles = computed(() => {\n if (!props.customPadding) {\n return {};\n }\n\n const xPadding = {\n paddingLeft: props.customPadding,\n paddingRight: props.customPadding,\n };\n\n const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n if (!hasSlot('default')) {\n content.paddingTop = props.customPadding;\n }\n\n if (!hasSlot('actions')) {\n content.paddingBottom = props.customPadding;\n }\n\n return {\n header: {\n ...xPadding,\n paddingTop: props.customPadding,\n paddingRight: `${parseInt(props.customPadding, 10) + CLOSE_BUTTON_ICON_WIDTH}px`,\n flex: 1,\n },\n content,\n actions: { ...xPadding, paddingBottom: props.customPadding },\n backButton: { top: props.customPadding, paddingLeft: props.customPadding },\n };\n });\n\n // Column layout styles\n const hasColumnLayout = computed(() => props.withColumnLayout && size.value === BentoModalSize.LARGE);\n\n const computedColumnWidth = computed(() => {\n if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n return [\n { small: 4, medium: 4, large: 4 },\n { small: 8, medium: 8, large: 8 },\n ];\n }\n if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n return [\n { small: 8, medium: 8, large: 8 },\n { small: 4, medium: 4, large: 4 },\n ];\n }\n return [\n { small: 6, medium: 6, large: 6 },\n { small: 6, medium: 6, large: 6 },\n ];\n });\n\n // Register page to parent component and inject data from parent component\n const { activePage, height, isAnimationActive, pageCustomPadding, showCloseButton, size } =\n inject<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY);\n\n const isCurrentPage = computed(() => activePage.value === props.pageId || !activePage.value);\n\n // Animation\n // Set resize observer on mount of update the height of the dialog on resize\n let pageElementObserver: ResizeObserver | null = null;\n\n // Watching activePage changes to set the height of the page and set isAnimationActive\n watch(\n () => activePage.value,\n async (value, oldValue) => {\n if (isCurrentPage.value) {\n await nextTick();\n height.value = `${page.value?.$el?.clientHeight}px`;\n pageCustomPadding.value = props.customPadding;\n // only set isAnimationActive to true if its going from two different pages and not from null to the first page\n isAnimationActive.value = oldValue !== undefined;\n\n pageElementObserver = observeSizeOfElement(page.value, () => {\n const pageHeight = `${page.value?.$el?.clientHeight}px`;\n if (pageHeight && pageHeight !== height.value) {\n height.value = pageHeight;\n }\n });\n }\n },\n { immediate: true }\n );\n\n // Disconnect observer on unmounting the page\n onUnmounted(() => {\n pageElementObserver?.disconnect();\n });\n</script>\n\n<script lang=\"ts\">\n /**\n * ModalPage is used to render different pages of the Modal component\n *\n * @example\n * import { BentoModal, BentoModalPage } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoModal, BentoModalPage },\n * template: `\n * <bento-modal active-page='page1' :is-open='true'>\n * <bento-modal-page\n * pageId='page1'\n * actions-label='Move to next page'\n * :actions=\"[\n * {\n * title: 'Next page',\n * event: () => {\n * activePage.value = 'page2';\n * },\n * }]\">\n * Page 1\n * <template #content>\n * Page 1 content\n * </template>\n * </bento-modal-page>\n * <bento-modal-page\n * pageId='page2'\n * :actions=\"[\n * {\n * title: 'Save',\n * event: () => {},\n * }]\">\n * Page 2\n * <template #content>\n * Page 2 content\n * </template>\n * </bento-modal-page>\n * </bento-modal>\n * `\n * }\n */\n export default defineComponent({});\n</script>\n\n<style lang=\"scss\" scoped src=\"./modal-page.scss\" />\n","<template>\n <div class=\"b-modal-base\">\n <dialog\n ref=\"modal\"\n :role=\"modalRole\"\n :aria-label=\"computedAriaLabel\"\n :style=\"{ height: height }\"\n class=\"b-modal-base__container\"\n :class=\"modalConditionalClasses\"\n :open=\"initiallyOpen\"\n @animationend=\"closeModalAfterAnimation\"\n @keydown.esc=\"internalModalActionClose\"\n >\n <bento-focus-trap\n v-if=\"isOpen || initiallyOpen\"\n :id=\"modalId\"\n v-bento-click-outside-directive=\"closeModalOnClickOutside\"\n >\n <bento-button\n v-if=\"showCloseButton\"\n class=\"b-modal-base__close-button\"\n variant=\"tertiary\"\n type=\"button\"\n :style=\"customPaddingStyles\"\n @click=\"internalModalActionClose\"\n >\n <cross-icon :svg-title=\"t('close')\" />\n </bento-button>\n <template v-if=\"props.activePage\">\n <slot />\n </template>\n <bento-modal-page\n v-else\n :with-column-layout=\"withColumnLayout\"\n :size=\"size\"\n :custom-padding=\"customPadding\"\n :columns-size=\"columnsSize\"\n >\n <template v-if=\"hasSlot('default')\" #default>\n <slot></slot>\n </template>\n <template v-if=\"hasSlot('content-col-1')\" #content-col-1\n ><slot name=\"content-col-1\"></slot\n ></template>\n <template v-if=\"hasSlot('content-col-2')\" #content-col-2\n ><slot name=\"content-col-2\"></slot\n ></template>\n <template v-if=\"hasSlot('content')\" #content><slot name=\"content\"></slot></template>\n <template v-if=\"hasSlot('actions')\" #actions><slot name=\"actions\"></slot></template>\n </bento-modal-page>\n </bento-focus-trap>\n </dialog>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import {\n computed,\n defineComponent,\n onMounted,\n type PropType,\n provide,\n ref,\n toRefs,\n useAttrs,\n useSlots,\n watch,\n } from 'vue';\n import {\n BentoModalColumnLayoutVariant,\n type BentoModalConfigData,\n BentoModalRole,\n BentoModalSize,\n } from '@/components/modal/modal.types';\n import { BentoButton, type BentoButtonActionsList } from '@/components/button';\n import { BentoFocusTrap } from '@/components/focus-trap';\n import { useHasSlot } from '@/composables';\n import { useI18n } from '@/utils/ts/i18n';\n import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys';\n import { generateUid } from '@/core/utils/ts';\n import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n import messages from './messages.json';\n\n import { BentoModalPage } from '@/components/modal/components/modal-page';\n import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys';\n import {\n BentoDialogPageAnimation,\n type BentoDialogPageConfigData,\n type BentoDialogPageRegisterPage,\n DIALOG_PAGE_CONFIG_INJECTION_KEY,\n DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n } from '@/internal';\n\n type MessageSchema = (typeof messages)['en-US'];\n const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const slots = useSlots();\n const attrs = useAttrs();\n const hasSlot = useHasSlot(slots);\n const modal = ref<HTMLDialogElement>(null);\n const isClosing = ref(false);\n const modalId = generateUid('modal');\n\n const emit = defineEmits<{\n /**\n * Emits update event when page is changed internally\n */\n (e: 'update:active-page', page: string): void;\n /**\n * Emitted when the modal is closed.\n */\n (e: 'close-modal');\n }>();\n\n const props = defineProps({\n /**\n * List of actions that will be used to render the buttons.\n * First element in the list will be rendered as \"primary\".\n * All elements after the first will be rendered as \"secondary\".\n * But you may change the color of 1-st action to red with 'critial' key\n * Not more than 3 action buttons can be provided\n * Or 2 action buttons and 1 Label for them\n *\n * Each object in the list should have a `title`, an `event` and\n * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n *\n * `title`: Button's text.\n *\n * `event`: Event triggered when clicking the Button.\n *\n * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n *\n * ```\n * [{\n * title: 'Primary',2\n * event: () => { ... },\n * icon: FourPeopleIcon\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * }]\n * ```\n */\n actions: {\n type: Array as PropType<BentoButtonActionsList>,\n default: null,\n },\n\n /**\n * The id of the current active page\n * Should be the same id as the BentoModalPage to be displayed\n */\n activePage: {\n type: String,\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 * If passed - sets first button color to red\n */\n destructiveActions: { type: Boolean, default: false },\n\n /**\n * Hides a cross icon on the right side of the title\n */\n hideCloseButton: { type: Boolean, required: true },\n\n /**\n * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n */\n initiallyOpen: { type: Boolean, default: false },\n\n /**\n * If set to true, it allows the modal to be closed by clicking outside of it\n */\n isDismissible: { type: Boolean, required: true },\n\n /**\n * Controls the modal's state from the outside. Set it to true to open the modal\n */\n isOpen: { type: Boolean, required: true },\n\n /**\n * Defines whether the modal will be an alert modal\n */\n modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n /**\n * Sets the width of the modal\n */\n size: {\n type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n default: BentoModalSize.SMALL,\n },\n\n /**\n * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n */\n withColumnLayout: { type: Boolean, default: false },\n });\n\n const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton);\n\n const pageCustomPadding = ref(props.customPadding);\n\n const customPaddingStyles = computed(() => {\n if (!pageCustomPadding.value) {\n return {};\n }\n\n return { top: pageCustomPadding.value, right: pageCustomPadding.value };\n });\n\n const computedAriaLabel = computed(() => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string));\n const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n const openModal = (): void => {\n modal.value.showModal();\n };\n\n const emitCloseEvent = (): void => {\n emit('close-modal');\n };\n\n // Handle closing and closing animation for dialog element\n const closeModalAfterAnimation = () => {\n if (isClosing.value) {\n modal.value.close();\n if (previousPages.value[0]) {\n emit('update:active-page', previousPages.value[0]);\n }\n previousPages.value = [];\n isClosing.value = false;\n emitCloseEvent();\n }\n };\n\n const startCloseModalAnimation = () => {\n if (!modal.value.open) {\n return;\n }\n isClosing.value = true;\n };\n\n /**\n * If the user has pressed escape, clicked outside or clicked the close icon.\n * Needs to be called from outside, following the \"dialog.close()\" pattern,\n * when the closing event is triggered outside of the \"base-modal\"\n * component (e.g. from a closing action).\n */\n const internalModalActionClose = (event?: Event) => {\n if (event) {\n event.preventDefault();\n }\n if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) {\n return;\n }\n startCloseModalAnimation();\n };\n\n const closeModalOnClickOutside = () => {\n if (props.isDismissible) {\n internalModalActionClose();\n }\n };\n\n const modalConditionalClasses = computed(() => ({\n [`b-modal-base__container--${props.size}`]: props.size,\n 'b-modal-base__container--hide': isClosing.value,\n 'b-modal-base__container--column-layout': hasColumnLayout.value,\n 'b-modal-base__container--animation': isAnimationActive.value,\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 // add the first page to the array when the modal opens\n if (!previousPages.value.length) {\n previousPages.value.push(activePage.value);\n }\n } else if (!isFirstMutation) {\n startCloseModalAnimation();\n }\n }\n );\n\n // If the first button is a loading button then close the modal have 0.5 seconds\n // if the state is changed to 'success'.\n watch(\n () => props.actions,\n () => {\n if (props.actions?.[0]?.state === 'success') {\n setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n }\n },\n { deep: true }\n );\n\n onMounted(() => {\n if (props.isOpen && modal.value) {\n openModal();\n }\n });\n\n /**\n * Expose methods through its 'ref'\n */\n defineExpose({\n internalModalActionClose,\n });\n\n // Let's Children components know they are inside a Modal (dialog element)\n provide(MODAL_DIALOG_ID_INJECTION_KEY, modalId);\n\n // Modal pagination\n const { activePage, isOpen, size } = toRefs(props);\n const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n\n const pages = ref<Array<string>>([]);\n const previousPages = ref([]);\n\n const updatePage = page => emit('update:active-page', page);\n\n // unregister page if removed / destroyed\n const unregisterPage = (pageIdToRemove: string) => () => {\n pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n };\n\n // Provide data and function to register page to subcomponent\n const registerPage: BentoDialogPageRegisterPage = pageId => {\n if (pageId) {\n pages.value.push(pageId);\n }\n\n return { unregisterPage: unregisterPage(pageId) };\n };\n\n const height = ref('');\n const isAnimationActive = ref(false);\n\n provide<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY, {\n activePage,\n height,\n isAnimationActive,\n pageCustomPadding,\n showCloseButton,\n size,\n });\n\n provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n activePage,\n animation,\n isOpen,\n pages,\n previousPages,\n updatePage,\n });\n\n provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n</script>\n\n<script lang=\"ts\">\n /**\n * Dialog container. It creates a dialog HTML element for the modal to use.\n *\n * @example\n * import BaseModal from './components/base-modal/base-modal.vue';\n *\n * export default {\n * components: { BaseModal },\n * template: `\n * <base-modal\n * :hide-close-button=\"true\"\n * :is-dismissible=\"false\"\n * :is-open=\"isOpen\"\n * @close-modal=\"isOpen = false\"\n * >\n * <template #content-col-1>\n * // Content on the left side column\n * </template>\n *\n * <template #content-col-2>\n * // Content on the right side column\n * </template>\n *\n * <template v-if=\"actions\" #actions>\n * <footer-actions :actions=\"actions\" />\n * </template>\n * </base-modal>\n * `,\n * setup() {\n * const isOpen = ref(true)\n * const footerActions = [{\n * title: 'Primary action',\n * event: () => { ... }\n * }]\n * }\n * }\n */\n export default defineComponent({\n i18n: { messages },\n name: 'base-modal',\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalVariantMapping","BentoModalVariantMapping2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","MODAL_CONFIG_INJECTION_KEY","__default__$1","defineComponent","slots","useSlots","hasSlot","useHasSlot","page","ref","props","__props","modalPageConditionalClasses","computed","modalContentConditionalClasses","_a","customPaddingStyles","xPadding","content","hasColumnLayout","size","computedColumnWidth","activePage","height","isAnimationActive","pageCustomPadding","showCloseButton","inject","isCurrentPage","pageElementObserver","watch","value","oldValue","nextTick","_b","observeSizeOfElement","pageHeight","onUnmounted","__default__","messages","t","useI18n","attrs","useAttrs","modal","isClosing","modalId","generateUid","emit","__emit","computedAriaLabel","openModal","emitCloseEvent","closeModalAfterAnimation","previousPages","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","modalConditionalClasses","newIsOpen","newModalValue","oldModalValue","onMounted","__expose","provide","MODAL_DIALOG_ID_INJECTION_KEY","isOpen","toRefs","animation","BentoDialogPageAnimation","pages","updatePage","unregisterPage","pageIdToRemove","pageId","registerPage","DIALOG_PAGE_CONFIG_INJECTION_KEY","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY"],"mappings":"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"}
|
package/dist/chunks/{button-actions-with-menu.B8qBBN82.js → button-actions-with-menu.BZ1cNOvQ.js}
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ref as v, watch as h, nextTick as m, defineComponent as w, toRef as b, computed as p, provide as A, createElementBlock as B, openBlock as y, createElementVNode as N, normalizeClass as k, createVNode as E, createBlock as T, createCommentVNode as C, unref as I } from "vue";
|
|
2
|
-
import { M as W, d as M, B as R, e as g } from "./button-actions.
|
|
2
|
+
import { M as W, d as M, B as R, e as g } from "./button-actions.C-dLiuIO.js";
|
|
3
3
|
import { u as O } from "./index.E60QniEu.js";
|
|
4
4
|
import { _ as L } from "./_plugin-vue_export-helper.CHgC5LLL.js";
|
|
5
5
|
import "../assets/button-actions-with-menu.css";
|
|
@@ -90,4 +90,4 @@ const S = (f) => {
|
|
|
90
90
|
export {
|
|
91
91
|
J as B
|
|
92
92
|
};
|
|
93
|
-
//# sourceMappingURL=button-actions-with-menu.
|
|
93
|
+
//# sourceMappingURL=button-actions-with-menu.BZ1cNOvQ.js.map
|