@govbr-ds/webcomponents 2.4.0 → 2.6.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/README.md +2 -2
- package/cem/custom-elements.json +4438 -1034
- package/cem/webcomponents.html-custom-data.json +491 -160
- package/dist/cjs/br-avatar.cjs.entry.js +4 -4
- package/dist/cjs/br-breadcrumb-item.cjs.entry.js +2 -2
- package/dist/cjs/br-breadcrumb.cjs.entry.js +11 -11
- package/dist/cjs/br-button_2.cjs.entry.js +6 -6
- package/dist/cjs/br-card.cjs.entry.js +4 -4
- package/dist/cjs/br-carousel-page.cjs.entry.js +3 -3
- package/dist/cjs/br-carousel.cjs.entry.js +5 -5
- package/dist/cjs/br-checkbox-group.cjs.entry.js +4 -4
- package/dist/cjs/br-checkbox.cjs.entry.js +5 -5
- package/dist/cjs/br-checkgroup.cjs.entry.js +2 -2
- package/dist/cjs/br-collapse_2.cjs.entry.js +10 -10
- package/dist/cjs/br-cookiebar-cookie.cjs.entry.js +3 -3
- package/dist/cjs/br-cookiebar-group.cjs.entry.js +4 -4
- package/dist/cjs/br-cookiebar-header.cjs.entry.js +3 -3
- package/dist/cjs/br-cookiebar-link.cjs.entry.js +3 -3
- package/dist/cjs/br-cookiebar-note-group.cjs.entry.js +3 -3
- package/dist/cjs/br-cookiebar-note.cjs.entry.js +3 -3
- package/dist/cjs/br-cookiebar.cjs.entry.js +5 -5
- package/dist/cjs/br-crumb.cjs.entry.js +2 -2
- package/dist/cjs/br-date-picker_3.cjs.entry.js +165 -78
- package/dist/cjs/br-datetime-picker.cjs.entry.js +11 -28
- package/dist/cjs/br-divider.cjs.entry.js +4 -4
- package/dist/cjs/br-dropdown.cjs.entry.js +677 -0
- package/dist/cjs/br-footer-category.cjs.entry.js +4 -4
- package/dist/cjs/br-footer-item.cjs.entry.js +3 -3
- package/dist/cjs/br-footer-legal.cjs.entry.js +3 -3
- package/dist/cjs/br-footer-logo.cjs.entry.js +3 -3
- package/dist/cjs/br-footer-social.cjs.entry.js +3 -3
- package/dist/cjs/br-footer.cjs.entry.js +5 -5
- package/dist/cjs/br-header-function.cjs.entry.js +3 -3
- package/dist/cjs/br-header-link.cjs.entry.js +3 -3
- package/dist/cjs/br-header-list.cjs.entry.js +4 -4
- package/dist/cjs/br-header-logo.cjs.entry.js +3 -3
- package/dist/cjs/br-header.cjs.entry.js +6 -6
- package/dist/cjs/br-icon.cjs.entry.js +173 -159
- package/dist/cjs/br-input_2.cjs.entry.js +1427 -0
- package/dist/cjs/br-item.cjs.entry.js +4 -4
- package/dist/cjs/br-link.cjs.entry.js +9 -9
- package/dist/cjs/br-magic-button.cjs.entry.js +11 -12
- package/dist/cjs/br-menu-group.cjs.entry.js +3 -3
- package/dist/cjs/br-menu-header.cjs.entry.js +3 -3
- package/dist/cjs/br-menu-info.cjs.entry.js +3 -3
- package/dist/cjs/br-menu-item.cjs.entry.js +3 -3
- package/dist/cjs/br-menu-link.cjs.entry.js +3 -3
- package/dist/cjs/br-menu-list.cjs.entry.js +2 -2
- package/dist/cjs/br-menu-logo.cjs.entry.js +3 -3
- package/dist/cjs/br-menu-social.cjs.entry.js +2 -2
- package/dist/cjs/br-menu.cjs.entry.js +5 -5
- package/dist/cjs/br-modal.cjs.entry.js +2 -2
- package/dist/cjs/br-notification-body.cjs.entry.js +3 -3
- package/dist/cjs/br-notification-header.cjs.entry.js +3 -3
- package/dist/cjs/br-notification-item.cjs.entry.js +3 -3
- package/dist/cjs/br-notification.cjs.entry.js +4 -4
- package/dist/cjs/br-pagination_2.cjs.entry.js +2578 -0
- package/dist/cjs/br-radio-group.cjs.entry.js +5 -5
- package/dist/cjs/br-radio.cjs.entry.js +5 -5
- package/dist/cjs/br-scrim.cjs.entry.js +4 -4
- package/dist/cjs/br-select-input_3.cjs.entry.js +49 -103
- package/dist/cjs/br-sign-in.cjs.entry.js +4 -4
- package/dist/cjs/br-skip-link-item.cjs.entry.js +2 -2
- package/dist/cjs/br-skip-link.cjs.entry.js +3 -3
- package/dist/cjs/br-skiplink-item.cjs.entry.js +3 -3
- package/dist/cjs/br-slider.cjs.entry.js +4 -4
- package/dist/cjs/br-step_2.cjs.entry.js +7 -7
- package/dist/cjs/br-switch.cjs.entry.js +5 -5
- package/dist/cjs/br-tab-item.cjs.entry.js +3 -3
- package/dist/cjs/br-tab.cjs.entry.js +8 -8
- package/dist/cjs/br-table-action_6.cjs.entry.js +1500 -0
- package/dist/cjs/br-table-body.cjs.entry.js +4 -16
- package/dist/cjs/br-table-header.cjs.entry.js +4 -16
- package/dist/cjs/br-table.cjs.entry.js +2616 -433
- package/dist/cjs/br-tag.cjs.entry.js +5 -5
- package/dist/cjs/br-textarea.cjs.entry.js +4 -4
- package/dist/cjs/br-tooltip.cjs.entry.js +5 -29
- package/dist/cjs/br-upload.cjs.entry.js +5 -5
- package/dist/cjs/br-wizard-panel.cjs.entry.js +3 -3
- package/dist/cjs/br-wizard.cjs.entry.js +3 -3
- package/dist/cjs/{datetime-picker-constants-CCeI5iW7.js → datetime-picker-constants-CTf1kVJ1.js} +1 -0
- package/dist/cjs/helpers-DkkDubv1.js +28 -0
- package/dist/cjs/{icon.utils-DF6kMskA.js → icon.utils-CMs0ukvR.js} +1 -1
- package/dist/cjs/{iconify-icon-DfODV9bf.js → iconify-icon-LjavbM-D.js} +103 -57
- package/dist/cjs/{index-Bc30P_6z.js → index-BP8UIQro.js} +34 -34
- package/dist/cjs/{index-C-IpVFDH.js → index-Caoez3xb.js} +64 -16
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/{isValid-CduHZTFc.js → isValid-DgJ-noPS.js} +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/{slot-DAllytTj.js → slot-CjaqqX7y.js} +1 -1
- package/dist/cjs/table.utils-De-9_NgJ.js +749 -0
- package/dist/cjs/webcomponents.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +3 -0
- package/dist/collection/components/avatar/avatar.css +1 -1
- package/dist/collection/components/avatar/avatar.js +21 -21
- package/dist/collection/components/breadcrumb/breadcrumb-item/breadcrumb-item.js +4 -12
- package/dist/collection/components/breadcrumb/breadcrumb.css +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb.js +39 -34
- package/dist/collection/components/breadcrumb/crumb/crumb.js +2 -13
- package/dist/collection/components/button/button.css +1 -1
- package/dist/collection/components/button/button.js +22 -22
- package/dist/collection/components/card/card.css +1 -1
- package/dist/collection/components/card/card.js +20 -22
- package/dist/collection/components/carousel/carousel-page/carousel-page.css +1 -1
- package/dist/collection/components/carousel/carousel-page/carousel-page.js +3 -13
- package/dist/collection/components/carousel/carousel.css +1 -1
- package/dist/collection/components/carousel/carousel.js +25 -32
- package/dist/collection/components/checkbox/checkbox.css +1 -1
- package/dist/collection/components/checkbox/checkbox.js +18 -24
- package/dist/collection/components/checkbox-group/checkbox-group.css +1 -1
- package/dist/collection/components/checkbox-group/checkbox-group.js +19 -20
- package/dist/collection/components/checkgroup/checkgroup.js +2 -14
- package/dist/collection/components/collapse/collapse.css +1 -1
- package/dist/collection/components/collapse/collapse.js +33 -29
- package/dist/collection/components/cookiebar/cookiebar-cookie/cookiebar-cookie.css +1 -1
- package/dist/collection/components/cookiebar/cookiebar-cookie/cookiebar-cookie.js +3 -16
- package/dist/collection/components/cookiebar/cookiebar-group/cookiebar-group.css +1 -1
- package/dist/collection/components/cookiebar/cookiebar-group/cookiebar-group.js +4 -17
- package/dist/collection/components/cookiebar/cookiebar-header/cookiebar-header.css +1 -1
- package/dist/collection/components/cookiebar/cookiebar-header/cookiebar-header.js +3 -16
- package/dist/collection/components/cookiebar/cookiebar-link/cookiebar-link.css +1 -1
- package/dist/collection/components/cookiebar/cookiebar-link/cookiebar-link.js +3 -15
- package/dist/collection/components/cookiebar/cookiebar-note/cookiebar-note.css +1 -1
- package/dist/collection/components/cookiebar/cookiebar-note/cookiebar-note.js +3 -14
- package/dist/collection/components/cookiebar/cookiebar-note-group/cookiebar-note-group.css +1 -1
- package/dist/collection/components/cookiebar/cookiebar-note-group/cookiebar-note-group.js +3 -14
- package/dist/collection/components/cookiebar/cookiebar.css +1 -1
- package/dist/collection/components/cookiebar/cookiebar.js +33 -28
- package/dist/collection/components/datetime-picker/date-picker/date-picker-locale.js +62 -15
- package/dist/collection/components/datetime-picker/date-picker/date-picker.css +1 -1
- package/dist/collection/components/datetime-picker/date-picker/date-picker.js +123 -74
- package/dist/collection/components/datetime-picker/datetime-input/datetime-input.css +1 -1
- package/dist/collection/components/datetime-picker/datetime-input/datetime-input.js +5 -15
- package/dist/collection/components/datetime-picker/datetime-picker.css +1 -1
- package/dist/collection/components/datetime-picker/datetime-picker.js +23 -27
- package/dist/collection/components/datetime-picker/datetime-picker.utils.js +6 -6
- package/dist/collection/components/datetime-picker/time-picker/time-picker.css +1 -1
- package/dist/collection/components/datetime-picker/time-picker/time-picker.js +7 -17
- package/dist/collection/components/divider/divider.css +1 -1
- package/dist/collection/components/divider/divider.js +15 -19
- package/dist/collection/components/dropdown/dropdown.css +1 -1
- package/dist/collection/components/dropdown/dropdown.js +27 -28
- package/dist/collection/components/footer/footer-category/footer-category.css +1 -1
- package/dist/collection/components/footer/footer-category/footer-category.js +4 -17
- package/dist/collection/components/footer/footer-item/footer-item.css +1 -1
- package/dist/collection/components/footer/footer-item/footer-item.js +3 -16
- package/dist/collection/components/footer/footer-legal/footer-legal.css +1 -1
- package/dist/collection/components/footer/footer-legal/footer-legal.js +2 -16
- package/dist/collection/components/footer/footer-logo/footer-logo.css +1 -1
- package/dist/collection/components/footer/footer-logo/footer-logo.js +3 -16
- package/dist/collection/components/footer/footer-social/footer-social.css +1 -1
- package/dist/collection/components/footer/footer-social/footer-social.js +4 -16
- package/dist/collection/components/footer/footer.css +1 -1
- package/dist/collection/components/footer/footer.js +25 -29
- package/dist/collection/components/header/header-function/header-function.css +1 -1
- package/dist/collection/components/header/header-function/header-function.js +10 -14
- package/dist/collection/components/header/header-link/header-link.css +1 -1
- package/dist/collection/components/header/header-link/header-link.js +3 -16
- package/dist/collection/components/header/header-list/header-list.css +1 -1
- package/dist/collection/components/header/header-list/header-list.js +4 -17
- package/dist/collection/components/header/header-logo/header-logo.css +1 -1
- package/dist/collection/components/header/header-logo/header-logo.js +3 -16
- package/dist/collection/components/header/header.css +1 -1
- package/dist/collection/components/header/header.js +33 -30
- package/dist/collection/components/icon/default-icons-cache.js +159 -146
- package/dist/collection/components/icon/icon.css +1 -1
- package/dist/collection/components/icon/icon.js +38 -29
- package/dist/collection/components/icon/icon.utils.js +1 -1
- package/dist/collection/components/input/input.css +1 -1
- package/dist/collection/components/input/input.js +216 -30
- package/dist/collection/components/item/item.css +1 -1
- package/dist/collection/components/item/item.js +18 -22
- package/dist/collection/components/link/link.css +1 -1
- package/dist/collection/components/link/link.js +25 -29
- package/dist/collection/components/list/list.css +1 -1
- package/dist/collection/components/list/list.js +17 -21
- package/dist/collection/components/loading/loading.css +1 -1
- package/dist/collection/components/loading/loading.js +17 -24
- package/dist/collection/components/magic-button/magic-button.css +1 -1
- package/dist/collection/components/magic-button/magic-button.js +21 -29
- package/dist/collection/components/menu/menu-group/menu-group.css +1 -1
- package/dist/collection/components/menu/menu-group/menu-group.js +3 -16
- package/dist/collection/components/menu/menu-header/menu-header.css +1 -1
- package/dist/collection/components/menu/menu-header/menu-header.js +3 -16
- package/dist/collection/components/menu/menu-info/menu-info.css +1 -1
- package/dist/collection/components/menu/menu-info/menu-info.js +2 -15
- package/dist/collection/components/menu/menu-item/menu-item.css +1 -1
- package/dist/collection/components/menu/menu-item/menu-item.js +3 -16
- package/dist/collection/components/menu/menu-link/menu-link.css +1 -1
- package/dist/collection/components/menu/menu-link/menu-link.js +5 -17
- package/dist/collection/components/menu/menu-list/menu-list.css +1 -1
- package/dist/collection/components/menu/menu-list/menu-list.js +2 -15
- package/dist/collection/components/menu/menu-logo/menu-logo.css +1 -1
- package/dist/collection/components/menu/menu-logo/menu-logo.js +2 -15
- package/dist/collection/components/menu/menu-social/menu-social.css +1 -1
- package/dist/collection/components/menu/menu-social/menu-social.js +3 -16
- package/dist/collection/components/menu/menu.css +1 -1
- package/dist/collection/components/menu/menu.js +28 -35
- package/dist/collection/components/message/message.css +1 -1
- package/dist/collection/components/message/message.js +22 -25
- package/dist/collection/components/modal/modal.css +1 -1
- package/dist/collection/components/modal/modal.js +18 -21
- package/dist/collection/components/notification/notification-body/notification-body.css +1 -1
- package/dist/collection/components/notification/notification-body/notification-body.js +3 -13
- package/dist/collection/components/notification/notification-header/notification-header.css +1 -1
- package/dist/collection/components/notification/notification-header/notification-header.js +3 -14
- package/dist/collection/components/notification/notification-item/notification-item.css +1 -1
- package/dist/collection/components/notification/notification-item/notification-item.js +3 -16
- package/dist/collection/components/notification/notification.css +1 -1
- package/dist/collection/components/notification/notification.js +20 -29
- package/dist/collection/components/pagination/pagination.css +1 -1
- package/dist/collection/components/pagination/pagination.js +19 -27
- package/dist/collection/components/radio/radio.css +1 -1
- package/dist/collection/components/radio/radio.js +17 -20
- package/dist/collection/components/radio-group/radio-group.css +1 -1
- package/dist/collection/components/radio-group/radio-group.js +20 -20
- package/dist/collection/components/scrim/scrim.css +1 -1
- package/dist/collection/components/scrim/scrim.js +14 -17
- package/dist/collection/components/select/select-input/select-input.css +1 -1
- package/dist/collection/components/select/select-input/select-input.js +48 -102
- package/dist/collection/components/select/select-list/select-list.css +1 -1
- package/dist/collection/components/select/select-list/select-list.js +52 -15
- package/dist/collection/components/select/select-option/select-option.css +1 -1
- package/dist/collection/components/select/select-option/select-option.js +13 -17
- package/dist/collection/components/select/select.css +1 -1
- package/dist/collection/components/select/select.js +104 -110
- package/dist/collection/components/sign-in/sign-in.css +1 -1
- package/dist/collection/components/sign-in/sign-in.js +12 -16
- package/dist/collection/components/skip-link/skip-link-item/skip-link-item-alias.js +8 -4
- package/dist/collection/components/skip-link/skip-link-item/skip-link-item.css +1 -1
- package/dist/collection/components/skip-link/skip-link-item/skip-link-item.js +5 -15
- package/dist/collection/components/skip-link/skip-link.css +1 -1
- package/dist/collection/components/skip-link/skip-link.js +18 -24
- package/dist/collection/components/slider/slider.css +1 -1
- package/dist/collection/components/slider/slider.js +18 -28
- package/dist/collection/components/step/step-item/step-item.css +1 -1
- package/dist/collection/components/step/step-item/step-item.js +5 -15
- package/dist/collection/components/step/step.css +1 -1
- package/dist/collection/components/step/step.js +16 -25
- package/dist/collection/components/switch/switch.css +1 -1
- package/dist/collection/components/switch/switch.js +16 -20
- package/dist/collection/components/tab/tab-item/tab-item.css +1 -1
- package/dist/collection/components/tab/tab-item/tab-item.js +6 -16
- package/dist/collection/components/tab/tab.css +1 -1
- package/dist/collection/components/tab/tab.js +24 -31
- package/dist/collection/components/table/table-action/table-action.css +1 -0
- package/dist/collection/components/table/table-action/table-action.js +349 -0
- package/dist/collection/components/table/table-bar/table-bar.css +1 -0
- package/dist/collection/components/table/table-bar/table-bar.js +652 -0
- package/dist/collection/components/table/table-body/table-body.css +1 -1
- package/dist/collection/components/table/table-body/table-body.js +11 -26
- package/dist/collection/components/table/table-cell/table-cell.css +1 -1
- package/dist/collection/components/table/table-cell/table-cell.js +555 -91
- package/dist/collection/components/table/table-footer/table-footer.css +1 -0
- package/dist/collection/components/table/table-footer/table-footer.js +233 -0
- package/dist/collection/components/table/table-header/table-header.css +1 -1
- package/dist/collection/components/table/table-header/table-header.js +10 -26
- package/dist/collection/components/table/table-header-cell/table-header-cell.css +1 -1
- package/dist/collection/components/table/table-header-cell/table-header-cell.js +286 -95
- package/dist/collection/components/table/table-row/table-row.css +1 -1
- package/dist/collection/components/table/table-row/table-row.js +311 -66
- package/dist/collection/components/table/table.actions-tooltip.js +33 -0
- package/dist/collection/components/table/{table-constants.js → table.constants.js} +54 -77
- package/dist/collection/components/table/table.css +1 -1
- package/dist/collection/components/table/table.data.js +461 -0
- package/dist/collection/components/table/table.expansion.elements.js +70 -0
- package/dist/collection/components/table/table.expansion.js +179 -0
- package/dist/collection/components/table/table.grouping.js +97 -0
- package/dist/collection/components/table/table.header-height.js +47 -0
- package/dist/collection/components/table/table.js +2499 -625
- package/dist/collection/components/table/table.keyboard.js +340 -0
- package/dist/collection/components/table/table.scroll-shadows.js +36 -0
- package/dist/collection/components/table/table.selection.elements.js +63 -0
- package/dist/collection/components/table/table.selection.js +239 -0
- package/dist/collection/components/table/table.tokens.js +28 -0
- package/dist/collection/components/table/table.types.js +1 -0
- package/dist/collection/components/table/table.utils.js +75 -0
- package/dist/collection/components/table/table.virtual-list.js +342 -0
- package/dist/collection/components/tag/tag.css +1 -1
- package/dist/collection/components/tag/tag.js +17 -26
- package/dist/collection/components/textarea/textarea.css +1 -1
- package/dist/collection/components/textarea/textarea.js +14 -22
- package/dist/collection/components/tooltip/tooltip.css +1 -1
- package/dist/collection/components/tooltip/tooltip.js +15 -45
- package/dist/collection/components/upload/upload.css +1 -1
- package/dist/collection/components/upload/upload.js +36 -29
- package/dist/collection/components/wizard/wizard-panel/wizard-panel.css +1 -1
- package/dist/collection/components/wizard/wizard-panel/wizard-panel.js +3 -13
- package/dist/collection/components/wizard/wizard.css +1 -1
- package/dist/collection/components/wizard/wizard.js +22 -26
- package/dist/collection/pages/components/select/remote-options.js +87 -0
- package/dist/collection/pages/scripts/code-editor.js +28 -3
- package/dist/collection/pages/scripts/pageLoader.js +286 -20
- package/dist/collection/pages/scripts/pageloader-preview.js +3 -1
- package/dist/collection/shared/utils/slot.js +1 -1
- package/dist/components/br-avatar.js +1 -1
- package/dist/components/br-breadcrumb-item.js +1 -1
- package/dist/components/br-breadcrumb.js +1 -1
- package/dist/components/br-button.js +1 -1
- package/dist/components/br-card.js +1 -1
- package/dist/components/br-carousel-page.js +1 -1
- package/dist/components/br-carousel.js +1 -1
- package/dist/components/br-checkbox-group.js +1 -1
- package/dist/components/br-checkbox.js +1 -1
- package/dist/components/br-checkgroup.js +1 -1
- package/dist/components/br-collapse.js +1 -1
- package/dist/components/br-cookiebar-cookie.js +1 -1
- package/dist/components/br-cookiebar-group.js +1 -1
- package/dist/components/br-cookiebar-header.js +1 -1
- package/dist/components/br-cookiebar-link.js +1 -1
- package/dist/components/br-cookiebar-note-group.js +1 -1
- package/dist/components/br-cookiebar-note.js +1 -1
- package/dist/components/br-cookiebar.js +1 -1
- package/dist/components/br-crumb.js +1 -1
- package/dist/components/br-date-picker.js +1 -1
- package/dist/components/br-datetime-input.js +1 -1
- package/dist/components/br-datetime-picker.js +1 -1
- package/dist/components/br-divider.js +1 -1
- package/dist/components/br-dropdown.js +1 -1
- package/dist/components/br-footer-category.js +1 -1
- package/dist/components/br-footer-item.js +1 -1
- package/dist/components/br-footer-legal.js +1 -1
- package/dist/components/br-footer-logo.js +1 -1
- package/dist/components/br-footer-social.js +1 -1
- package/dist/components/br-footer.js +1 -1
- package/dist/components/br-header-function.js +1 -1
- package/dist/components/br-header-link.js +1 -1
- package/dist/components/br-header-list.js +1 -1
- package/dist/components/br-header-logo.js +1 -1
- package/dist/components/br-header.js +1 -1
- package/dist/components/br-icon.js +1 -1
- package/dist/components/br-input.js +1 -1
- package/dist/components/br-item.js +1 -1
- package/dist/components/br-link.js +1 -1
- package/dist/components/br-list.js +1 -1
- package/dist/components/br-loading.js +1 -1
- package/dist/components/br-magic-button.js +1 -1
- package/dist/components/br-menu-group.js +1 -1
- package/dist/components/br-menu-header.js +1 -1
- package/dist/components/br-menu-info.js +1 -1
- package/dist/components/br-menu-item.js +1 -1
- package/dist/components/br-menu-link.js +1 -1
- package/dist/components/br-menu-list.js +1 -1
- package/dist/components/br-menu-logo.js +1 -1
- package/dist/components/br-menu-social.js +1 -1
- package/dist/components/br-menu.js +1 -1
- package/dist/components/br-message.js +1 -1
- package/dist/components/br-modal.js +1 -1
- package/dist/components/br-notification-body.js +1 -1
- package/dist/components/br-notification-header.js +1 -1
- package/dist/components/br-notification-item.js +1 -1
- package/dist/components/br-notification.js +1 -1
- package/dist/components/br-pagination.js +1 -1
- package/dist/components/br-radio-group.js +1 -1
- package/dist/components/br-radio.js +1 -1
- package/dist/components/br-scrim.js +1 -1
- package/dist/components/br-select-input.js +1 -1
- package/dist/components/br-select-list.js +1 -1
- package/dist/components/br-select-option.js +1 -1
- package/dist/components/br-select.js +1 -1
- package/dist/components/br-sign-in.js +1 -1
- package/dist/components/br-skip-link-item.js +1 -1
- package/dist/components/br-skip-link.js +1 -1
- package/dist/components/br-skiplink-item.js +1 -1
- package/dist/components/br-slider.js +1 -1
- package/dist/components/br-step-item.js +1 -1
- package/dist/components/br-step.js +1 -1
- package/dist/components/br-switch.js +1 -1
- package/dist/components/br-tab-item.js +1 -1
- package/dist/components/br-tab.js +1 -1
- package/dist/components/br-table-action.d.ts +11 -0
- package/dist/components/br-table-action.js +5 -0
- package/dist/components/br-table-bar.d.ts +11 -0
- package/dist/components/br-table-bar.js +5 -0
- package/dist/components/br-table-body.js +1 -1
- package/dist/components/br-table-cell.js +1 -1
- package/dist/components/br-table-footer.d.ts +11 -0
- package/dist/components/br-table-footer.js +5 -0
- package/dist/components/br-table-header-cell.js +1 -1
- package/dist/components/br-table-header.js +1 -1
- package/dist/components/br-table-row.js +1 -1
- package/dist/components/br-table.js +1 -1
- package/dist/components/br-tag.js +1 -1
- package/dist/components/br-textarea.js +1 -1
- package/dist/components/br-time-picker.js +1 -1
- package/dist/components/br-tooltip.js +1 -1
- package/dist/components/br-upload.js +1 -1
- package/dist/components/br-wizard-panel.js +1 -1
- package/dist/components/br-wizard.js +1 -1
- package/dist/components/index.d.ts +6 -0
- package/dist/components/index.js +1 -1
- package/dist/components/p-082jxuTj.js +5 -0
- package/dist/components/p-381n6AwK.js +5 -0
- package/dist/components/p-B5_zbRAr.js +5 -0
- package/dist/components/p-BE1gDPwC.js +5 -0
- package/dist/components/p-BV-c2pxt.js +5 -0
- package/dist/components/p-BfFbYAuJ.js +5 -0
- package/dist/components/{p-ta-24T1Z.js → p-Bi2E_w9Q.js} +1 -1
- package/dist/components/p-Bk8YcMql.js +5 -0
- package/dist/components/p-C3ISxUGw.js +5 -0
- package/dist/components/p-C3J0TVQO.js +5 -0
- package/dist/components/p-C6m13lCc.js +5 -0
- package/dist/components/{p-DBmwzG9E.js → p-CCWJ-H33.js} +1 -1
- package/dist/components/p-CJuHirYK.js +5 -0
- package/dist/components/{p-PV731d8s.js → p-CKS7ggLM.js} +1 -1
- package/dist/components/p-COSFBwu9.js +5 -0
- package/dist/components/{p-DsO4F0Cz.js → p-CVz_akHx.js} +1 -1
- package/dist/components/p-CWPrXYam.js +5 -0
- package/dist/components/p-C_DC6oQW.js +16 -0
- package/dist/components/p-Ca89D_0s.js +5 -0
- package/dist/components/p-CbN58CFi.js +5 -0
- package/dist/components/p-CjjxTkKb.js +5 -0
- package/dist/components/p-Ck9t4WSb.js +5 -0
- package/dist/components/p-CvfVwD6_.js +5 -0
- package/dist/components/p-D-1sfjhG.js +5 -0
- package/dist/components/p-D-p4vLlP.js +5 -0
- package/dist/components/p-D6DArHGH.js +5 -0
- package/dist/components/p-DD3BItoS.js +5 -0
- package/dist/components/{p-jOb1hCPi.js → p-DEIKwFIf.js} +1 -1
- package/dist/components/p-DHHAIESt.js +5 -0
- package/dist/components/{p-Jk_KQE5V.js → p-DMj5iO7_.js} +1 -1
- package/dist/components/p-DUI-S07G.js +5 -0
- package/dist/components/p-D_K9JH6J.js +5 -0
- package/dist/components/p-DiQp2Lap.js +5 -0
- package/dist/components/{p-rMnkh3Cy.js → p-Dn36Mj2E.js} +1 -1
- package/dist/components/{p-D-3G3Ioq.js → p-Dvbqhybt.js} +1 -1
- package/dist/components/p-Dy7MSvt-.js +5 -0
- package/dist/components/p-DywTXNHQ.js +5 -0
- package/dist/components/p-Ft_P7Roz.js +5 -0
- package/dist/components/{p-CbgKdASU.js → p-JkJjzmGm.js} +1 -1
- package/dist/components/p-KuiFoKDl.js +5 -0
- package/dist/components/p-MiiczSWA.js +5 -0
- package/dist/components/p-Um3K2SHu.js +5 -0
- package/dist/components/p-YxddSP6q.js +5 -0
- package/dist/components/p-Zk91ebVT.js +5 -0
- package/dist/components/p-jv2oG0vH.js +5 -0
- package/dist/components/p-nrG_Gd0c.js +5 -0
- package/dist/components/p-syLEZrcg.js +5 -0
- package/dist/components/p-ydfWTgrA.js +5 -0
- package/dist/esm/br-avatar.entry.js +5 -5
- package/dist/esm/br-breadcrumb-item.entry.js +2 -2
- package/dist/esm/br-breadcrumb.entry.js +12 -12
- package/dist/esm/br-button_2.entry.js +7 -7
- package/dist/esm/br-card.entry.js +4 -4
- package/dist/esm/br-carousel-page.entry.js +3 -3
- package/dist/esm/br-carousel.entry.js +6 -6
- package/dist/esm/br-checkbox-group.entry.js +5 -5
- package/dist/esm/br-checkbox.entry.js +6 -6
- package/dist/esm/br-checkgroup.entry.js +2 -2
- package/dist/esm/br-collapse_2.entry.js +11 -11
- package/dist/esm/br-cookiebar-cookie.entry.js +3 -3
- package/dist/esm/br-cookiebar-group.entry.js +4 -4
- package/dist/esm/br-cookiebar-header.entry.js +3 -3
- package/dist/esm/br-cookiebar-link.entry.js +4 -4
- package/dist/esm/br-cookiebar-note-group.entry.js +3 -3
- package/dist/esm/br-cookiebar-note.entry.js +3 -3
- package/dist/esm/br-cookiebar.entry.js +6 -6
- package/dist/esm/br-crumb.entry.js +2 -2
- package/dist/esm/br-date-picker_3.entry.js +165 -78
- package/dist/esm/br-datetime-picker.entry.js +10 -27
- package/dist/esm/br-divider.entry.js +5 -5
- package/dist/esm/br-dropdown.entry.js +675 -0
- package/dist/esm/br-footer-category.entry.js +4 -4
- package/dist/esm/br-footer-item.entry.js +4 -4
- package/dist/esm/br-footer-legal.entry.js +3 -3
- package/dist/esm/br-footer-logo.entry.js +4 -4
- package/dist/esm/br-footer-social.entry.js +4 -4
- package/dist/esm/br-footer.entry.js +6 -6
- package/dist/esm/br-header-function.entry.js +4 -4
- package/dist/esm/br-header-link.entry.js +4 -4
- package/dist/esm/br-header-list.entry.js +4 -4
- package/dist/esm/br-header-logo.entry.js +4 -4
- package/dist/esm/br-header.entry.js +7 -7
- package/dist/esm/br-icon.entry.js +174 -160
- package/dist/esm/br-input_2.entry.js +1424 -0
- package/dist/esm/br-item.entry.js +5 -5
- package/dist/esm/br-link.entry.js +10 -10
- package/dist/esm/br-magic-button.entry.js +12 -13
- package/dist/esm/br-menu-group.entry.js +3 -3
- package/dist/esm/br-menu-header.entry.js +3 -3
- package/dist/esm/br-menu-info.entry.js +3 -3
- package/dist/esm/br-menu-item.entry.js +4 -4
- package/dist/esm/br-menu-link.entry.js +4 -4
- package/dist/esm/br-menu-list.entry.js +2 -2
- package/dist/esm/br-menu-logo.entry.js +3 -3
- package/dist/esm/br-menu-social.entry.js +3 -3
- package/dist/esm/br-menu.entry.js +6 -6
- package/dist/esm/br-modal.entry.js +3 -3
- package/dist/esm/br-notification-body.entry.js +3 -3
- package/dist/esm/br-notification-header.entry.js +3 -3
- package/dist/esm/br-notification-item.entry.js +4 -4
- package/dist/esm/br-notification.entry.js +5 -5
- package/dist/esm/br-pagination_2.entry.js +2575 -0
- package/dist/esm/br-radio-group.entry.js +6 -6
- package/dist/esm/br-radio.entry.js +6 -6
- package/dist/esm/br-scrim.entry.js +5 -5
- package/dist/esm/br-select-input_3.entry.js +50 -104
- package/dist/esm/br-sign-in.entry.js +5 -5
- package/dist/esm/br-skip-link-item.entry.js +2 -2
- package/dist/esm/br-skip-link.entry.js +4 -4
- package/dist/esm/br-skiplink-item.entry.js +4 -4
- package/dist/esm/br-slider.entry.js +5 -5
- package/dist/esm/br-step_2.entry.js +8 -8
- package/dist/esm/br-switch.entry.js +6 -6
- package/dist/esm/br-tab-item.entry.js +4 -4
- package/dist/esm/br-tab.entry.js +9 -9
- package/dist/esm/br-table-action_6.entry.js +1493 -0
- package/dist/esm/br-table-body.entry.js +4 -16
- package/dist/esm/br-table-header.entry.js +4 -16
- package/dist/esm/br-table.entry.js +2591 -408
- package/dist/esm/br-tag.entry.js +6 -6
- package/dist/esm/br-textarea.entry.js +5 -5
- package/dist/esm/br-tooltip.entry.js +6 -30
- package/dist/esm/br-upload.entry.js +6 -6
- package/dist/esm/br-wizard-panel.entry.js +3 -3
- package/dist/esm/br-wizard.entry.js +4 -4
- package/dist/esm/{datetime-picker-constants-DDc4sADe.js → datetime-picker-constants-1l4_-FEJ.js} +1 -1
- package/dist/esm/helpers-BNW9pAhl.js +26 -0
- package/dist/esm/{icon.utils-zlORkiHQ.js → icon.utils-CXDYKUBz.js} +1 -1
- package/dist/esm/{iconify-icon-D3usVJE2.js → iconify-icon-C_DC6oQW.js} +103 -57
- package/dist/esm/{index-CytVKoHT.js → index-BQRBKuY0.js} +64 -17
- package/dist/esm/{index-ConyRdJe.js → index-CwL52661.js} +34 -35
- package/dist/esm/index.js +2 -2
- package/dist/esm/{isValid-Bee0Uvqc.js → isValid-wU7S6MI2.js} +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{props-D07GjR4_.js → props-BbxNgEcJ.js} +1 -1
- package/dist/esm/{slot-BIG-yees.js → slot-Bt01zQ7-.js} +1 -1
- package/dist/esm/table.utils-CtVdlcgI.js +706 -0
- package/dist/esm/webcomponents.js +3 -3
- package/dist/hydrate/index.js +6573 -3030
- package/dist/hydrate/index.mjs +6573 -3030
- package/dist/types/components/avatar/avatar.d.ts +20 -20
- package/dist/types/components/breadcrumb/breadcrumb-item/breadcrumb-item.d.ts +3 -11
- package/dist/types/components/breadcrumb/breadcrumb.d.ts +30 -25
- package/dist/types/components/breadcrumb/crumb/crumb.d.ts +1 -12
- package/dist/types/components/button/button.d.ts +20 -20
- package/dist/types/components/card/card.d.ts +19 -21
- package/dist/types/components/carousel/carousel-page/carousel-page.d.ts +2 -12
- package/dist/types/components/carousel/carousel.d.ts +22 -29
- package/dist/types/components/checkbox/checkbox.d.ts +16 -22
- package/dist/types/components/checkbox-group/checkbox-group.d.ts +17 -18
- package/dist/types/components/checkgroup/checkgroup.d.ts +1 -13
- package/dist/types/components/collapse/collapse.d.ts +26 -22
- package/dist/types/components/cookiebar/cookiebar-cookie/cookiebar-cookie.d.ts +2 -15
- package/dist/types/components/cookiebar/cookiebar-group/cookiebar-group.d.ts +2 -15
- package/dist/types/components/cookiebar/cookiebar-header/cookiebar-header.d.ts +2 -15
- package/dist/types/components/cookiebar/cookiebar-link/cookiebar-link.d.ts +2 -14
- package/dist/types/components/cookiebar/cookiebar-note/cookiebar-note.d.ts +2 -13
- package/dist/types/components/cookiebar/cookiebar-note-group/cookiebar-note-group.d.ts +2 -13
- package/dist/types/components/cookiebar/cookiebar.d.ts +30 -25
- package/dist/types/components/datetime-picker/date-picker/date-picker-locale.d.ts +12 -4
- package/dist/types/components/datetime-picker/date-picker/date-picker.d.ts +57 -11
- package/dist/types/components/datetime-picker/datetime-input/datetime-input.d.ts +2 -12
- package/dist/types/components/datetime-picker/datetime-picker.d.ts +22 -26
- package/dist/types/components/datetime-picker/time-picker/time-picker.d.ts +3 -13
- package/dist/types/components/divider/divider.d.ts +14 -18
- package/dist/types/components/dropdown/dropdown.d.ts +21 -20
- package/dist/types/components/footer/footer-category/footer-category.d.ts +2 -15
- package/dist/types/components/footer/footer-item/footer-item.d.ts +2 -15
- package/dist/types/components/footer/footer-legal/footer-legal.d.ts +1 -15
- package/dist/types/components/footer/footer-logo/footer-logo.d.ts +2 -15
- package/dist/types/components/footer/footer-social/footer-social.d.ts +4 -17
- package/dist/types/components/footer/footer.d.ts +23 -27
- package/dist/types/components/header/header-function/header-function.d.ts +9 -13
- package/dist/types/components/header/header-link/header-link.d.ts +2 -15
- package/dist/types/components/header/header-list/header-list.d.ts +2 -15
- package/dist/types/components/header/header-logo/header-logo.d.ts +2 -15
- package/dist/types/components/header/header.d.ts +29 -26
- package/dist/types/components/icon/icon.d.ts +27 -22
- package/dist/types/components/icon/icon.utils.d.ts +1 -1
- package/dist/types/components/input/input.d.ts +46 -23
- package/dist/types/components/input/input.types.d.ts +18 -0
- package/dist/types/components/item/item.d.ts +17 -21
- package/dist/types/components/link/link.d.ts +18 -22
- package/dist/types/components/list/list.d.ts +16 -20
- package/dist/types/components/loading/loading.d.ts +16 -23
- package/dist/types/components/magic-button/magic-button.d.ts +17 -25
- package/dist/types/components/menu/menu-group/menu-group.d.ts +2 -15
- package/dist/types/components/menu/menu-header/menu-header.d.ts +2 -15
- package/dist/types/components/menu/menu-info/menu-info.d.ts +1 -14
- package/dist/types/components/menu/menu-item/menu-item.d.ts +2 -15
- package/dist/types/components/menu/menu-link/menu-link.d.ts +4 -16
- package/dist/types/components/menu/menu-list/menu-list.d.ts +2 -15
- package/dist/types/components/menu/menu-logo/menu-logo.d.ts +1 -14
- package/dist/types/components/menu/menu-social/menu-social.d.ts +4 -18
- package/dist/types/components/menu/menu.d.ts +25 -32
- package/dist/types/components/message/message.d.ts +21 -24
- package/dist/types/components/modal/modal.d.ts +18 -21
- package/dist/types/components/notification/notification-body/notification-body.d.ts +2 -12
- package/dist/types/components/notification/notification-header/notification-header.d.ts +2 -13
- package/dist/types/components/notification/notification-item/notification-item.d.ts +2 -15
- package/dist/types/components/notification/notification.d.ts +18 -27
- package/dist/types/components/pagination/pagination.d.ts +13 -21
- package/dist/types/components/radio/radio.d.ts +15 -18
- package/dist/types/components/radio-group/radio-group.d.ts +18 -18
- package/dist/types/components/scrim/scrim.d.ts +12 -15
- package/dist/types/components/select/select-input/select-input.d.ts +12 -14
- package/dist/types/components/select/select-list/select-list.d.ts +13 -12
- package/dist/types/components/select/select-option/select-option.d.ts +8 -11
- package/dist/types/components/select/select.d.ts +42 -94
- package/dist/types/components/sign-in/sign-in.d.ts +11 -15
- package/dist/types/components/skip-link/skip-link-item/skip-link-item-alias.d.ts +7 -3
- package/dist/types/components/skip-link/skip-link-item/skip-link-item.d.ts +4 -14
- package/dist/types/components/skip-link/skip-link.d.ts +17 -23
- package/dist/types/components/slider/slider.d.ts +18 -28
- package/dist/types/components/step/step-item/step-item.d.ts +2 -12
- package/dist/types/components/step/step.d.ts +15 -24
- package/dist/types/components/switch/switch.d.ts +14 -18
- package/dist/types/components/tab/tab-item/tab-item.d.ts +6 -16
- package/dist/types/components/tab/tab.d.ts +20 -27
- package/dist/types/components/table/table-action/table-action.d.ts +107 -0
- package/dist/types/components/table/table-bar/table-bar.d.ts +193 -0
- package/dist/types/components/table/table-body/table-body.d.ts +10 -25
- package/dist/types/components/table/table-cell/table-cell.d.ts +177 -46
- package/dist/types/components/table/table-footer/table-footer.d.ts +40 -0
- package/dist/types/components/table/table-footer/table-footer.types.d.ts +12 -0
- package/dist/types/components/table/table-header/table-header.d.ts +9 -25
- package/dist/types/components/table/table-header-cell/table-header-cell.d.ts +101 -62
- package/dist/types/components/table/table-row/table-row.d.ts +87 -38
- package/dist/types/components/table/table.actions-tooltip.d.ts +11 -0
- package/dist/types/components/table/{table-constants.d.ts → table.constants.d.ts} +50 -77
- package/dist/types/components/table/table.d.ts +601 -229
- package/dist/types/components/table/table.data.d.ts +78 -0
- package/dist/types/components/table/table.expansion.d.ts +65 -0
- package/dist/types/components/table/table.expansion.elements.d.ts +30 -0
- package/dist/types/components/table/table.grouping.d.ts +25 -0
- package/dist/types/components/table/table.header-height.d.ts +17 -0
- package/dist/types/components/table/table.keyboard.d.ts +53 -0
- package/dist/types/components/table/table.scroll-shadows.d.ts +11 -0
- package/dist/types/components/table/table.selection.d.ts +84 -0
- package/dist/types/components/table/table.selection.elements.d.ts +42 -0
- package/dist/types/components/table/table.tokens.d.ts +24 -0
- package/dist/types/components/table/table.types.d.ts +199 -0
- package/dist/types/components/table/table.utils.d.ts +52 -0
- package/dist/types/components/table/table.virtual-list.d.ts +96 -0
- package/dist/types/components/tag/tag.d.ts +15 -24
- package/dist/types/components/textarea/textarea.d.ts +13 -21
- package/dist/types/components/tooltip/tooltip.d.ts +12 -18
- package/dist/types/components/upload/upload.d.ts +20 -27
- package/dist/types/components/wizard/wizard-panel/wizard-panel.d.ts +2 -12
- package/dist/types/components/wizard/wizard.d.ts +21 -25
- package/dist/types/components.d.ts +4646 -5087
- package/dist/webcomponents/index.esm.js +1 -1
- package/dist/webcomponents/{p-6f1a4fbe.entry.js → p-07e80bf8.entry.js} +1 -1
- package/dist/webcomponents/p-10d81622.entry.js +5 -0
- package/dist/webcomponents/p-12d5f533.entry.js +5 -0
- package/dist/webcomponents/p-15699e8a.entry.js +5 -0
- package/dist/webcomponents/{p-7fda8b89.entry.js → p-15e2f5cc.entry.js} +1 -1
- package/dist/webcomponents/{p-198aa844.entry.js → p-16d27d5c.entry.js} +1 -1
- package/dist/webcomponents/p-18d3fab8.entry.js +5 -0
- package/dist/webcomponents/{p-DDc4sADe.js → p-1l4_-FEJ.js} +1 -1
- package/dist/webcomponents/p-23c916d9.entry.js +5 -0
- package/dist/webcomponents/p-2aee69fd.entry.js +5 -0
- package/dist/webcomponents/p-2d3db296.entry.js +5 -0
- package/dist/webcomponents/p-2ed6afdd.entry.js +5 -0
- package/dist/webcomponents/{p-42b60169.entry.js → p-30c865e6.entry.js} +1 -1
- package/dist/webcomponents/p-32afb78c.entry.js +5 -0
- package/dist/webcomponents/p-33d24cbd.entry.js +5 -0
- package/dist/webcomponents/p-35d63edd.entry.js +5 -0
- package/dist/webcomponents/p-3b1ff55e.entry.js +5 -0
- package/dist/webcomponents/p-3c7246cf.entry.js +5 -0
- package/dist/webcomponents/{p-6a293be8.entry.js → p-407e7b69.entry.js} +1 -1
- package/dist/webcomponents/p-41b12e3c.entry.js +5 -0
- package/dist/webcomponents/p-47adc17f.entry.js +5 -0
- package/dist/webcomponents/{p-18cf093a.entry.js → p-48fc8e56.entry.js} +1 -1
- package/dist/webcomponents/p-4a44c8b8.entry.js +5 -0
- package/dist/webcomponents/{p-ac68355e.entry.js → p-4b0f3701.entry.js} +1 -1
- package/dist/webcomponents/p-4b66200c.entry.js +5 -0
- package/dist/webcomponents/{p-5a7c2031.entry.js → p-4c0a1c05.entry.js} +1 -1
- package/dist/webcomponents/p-4c72d706.entry.js +5 -0
- package/dist/webcomponents/p-505173e0.entry.js +5 -0
- package/dist/webcomponents/p-50caea68.entry.js +5 -0
- package/dist/webcomponents/p-5419fd2c.entry.js +5 -0
- package/dist/webcomponents/{p-20477061.entry.js → p-5693e0e7.entry.js} +1 -1
- package/dist/webcomponents/p-58247764.entry.js +5 -0
- package/dist/webcomponents/p-5d0f4851.entry.js +5 -0
- package/dist/webcomponents/p-60c949c8.entry.js +5 -0
- package/dist/webcomponents/p-61b84035.entry.js +5 -0
- package/dist/webcomponents/p-62a74e0a.entry.js +5 -0
- package/dist/webcomponents/p-6450913e.entry.js +5 -0
- package/dist/webcomponents/p-66c8b8d9.entry.js +5 -0
- package/dist/webcomponents/{p-b55425b7.entry.js → p-67281ef1.entry.js} +1 -1
- package/dist/webcomponents/{p-0fc112fc.entry.js → p-6e128c7a.entry.js} +1 -1
- package/dist/webcomponents/p-725e92ab.entry.js +5 -0
- package/dist/webcomponents/{p-09c79c1d.entry.js → p-74726f20.entry.js} +1 -1
- package/dist/webcomponents/p-75bd655b.entry.js +5 -0
- package/dist/webcomponents/p-7bf78e48.entry.js +5 -0
- package/dist/webcomponents/p-7cc28ecf.entry.js +5 -0
- package/dist/webcomponents/p-7ec01a99.entry.js +5 -0
- package/dist/webcomponents/{p-2c8595d3.entry.js → p-7f17dbca.entry.js} +1 -1
- package/dist/webcomponents/p-8120f3ce.entry.js +5 -0
- package/dist/webcomponents/p-8ded7870.entry.js +5 -0
- package/dist/webcomponents/p-9ab989d1.entry.js +5 -0
- package/dist/webcomponents/p-9be642ff.entry.js +5 -0
- package/dist/webcomponents/p-9d41995a.entry.js +5 -0
- package/dist/webcomponents/p-C_DC6oQW.js +16 -0
- package/dist/webcomponents/{p-EbtQZm5s.js → p-CjVabz-h.js} +1 -1
- package/dist/webcomponents/{p-fOJu6uZR.js → p-CpE_G6IZ.js} +1 -1
- package/dist/webcomponents/{p-ConyRdJe.js → p-CwL52661.js} +2 -2
- package/dist/webcomponents/p-DnwERaeQ.js +5 -0
- package/dist/webcomponents/p-Zk91ebVT.js +5 -0
- package/dist/webcomponents/p-_BMaB_68.js +5 -0
- package/dist/webcomponents/p-a150b61d.entry.js +5 -0
- package/dist/webcomponents/p-a264acf6.entry.js +5 -0
- package/dist/webcomponents/p-a5616523.entry.js +5 -0
- package/dist/webcomponents/p-ae3dfb9c.entry.js +5 -0
- package/dist/webcomponents/p-b1aeb805.entry.js +5 -0
- package/dist/webcomponents/p-b8eea3ef.entry.js +5 -0
- package/dist/webcomponents/p-c6952f8d.entry.js +5 -0
- package/dist/webcomponents/p-c743e5c5.entry.js +5 -0
- package/dist/webcomponents/p-d0c659c3.entry.js +5 -0
- package/dist/webcomponents/p-d3dec923.entry.js +5 -0
- package/dist/webcomponents/{p-31a4694a.entry.js → p-d5405bbe.entry.js} +1 -1
- package/dist/webcomponents/{p-794b701b.entry.js → p-d6d3a552.entry.js} +1 -1
- package/dist/webcomponents/p-dab66328.entry.js +5 -0
- package/dist/webcomponents/{p-8116ee93.entry.js → p-db02533d.entry.js} +1 -1
- package/dist/webcomponents/p-dda22999.entry.js +5 -0
- package/dist/webcomponents/p-e2a46f44.entry.js +5 -0
- package/dist/webcomponents/{p-67774920.entry.js → p-e3680ff8.entry.js} +1 -1
- package/dist/webcomponents/p-e5b9652d.entry.js +5 -0
- package/dist/webcomponents/{p-fb76b1e0.entry.js → p-e7f02302.entry.js} +1 -1
- package/dist/webcomponents/p-f0720e23.entry.js +5 -0
- package/dist/webcomponents/p-f244009d.entry.js +5 -0
- package/dist/webcomponents/p-f32c40ee.entry.js +5 -0
- package/dist/webcomponents/p-f697abbd.entry.js +5 -0
- package/dist/webcomponents/p-f7ed35ef.entry.js +5 -0
- package/dist/webcomponents/p-f8576e0a.entry.js +5 -0
- package/dist/webcomponents/p-fcc62731.entry.js +5 -0
- package/dist/webcomponents/webcomponents.esm.js +1 -1
- package/package.json +1 -1
- package/dist/cjs/br-dropdown_2.cjs.entry.js +0 -2299
- package/dist/cjs/br-input.cjs.entry.js +0 -715
- package/dist/cjs/br-loading.cjs.entry.js +0 -567
- package/dist/cjs/br-pagination.cjs.entry.js +0 -916
- package/dist/cjs/br-table-cell.cjs.entry.js +0 -201
- package/dist/cjs/br-table-header-cell.cjs.entry.js +0 -189
- package/dist/cjs/br-table-row.cjs.entry.js +0 -95
- package/dist/cjs/table-constants-BOPSay0B.js +0 -183
- package/dist/collection/components/table/table-tokens.js +0 -50
- package/dist/collection/components/table/table-utils.js +0 -44
- package/dist/collection/pages/components/select/remote.js +0 -33
- package/dist/collection/pages/components/select/virtualized.js +0 -13
- package/dist/components/p-5h-W9_JR.js +0 -5
- package/dist/components/p-848QkYoM.js +0 -5
- package/dist/components/p-BFHvuEnN.js +0 -5
- package/dist/components/p-BH6QYnAr.js +0 -5
- package/dist/components/p-BcW8O6h2.js +0 -5
- package/dist/components/p-BicHMcSS.js +0 -5
- package/dist/components/p-Bs7iRQTG.js +0 -5
- package/dist/components/p-Bvrw9yWR.js +0 -5
- package/dist/components/p-BzQFMh9j.js +0 -5
- package/dist/components/p-CBHd0-fF.js +0 -5
- package/dist/components/p-CCPHCJjw.js +0 -5
- package/dist/components/p-CXMwM9m4.js +0 -5
- package/dist/components/p-CeNELttN.js +0 -5
- package/dist/components/p-CjtmJTLO.js +0 -5
- package/dist/components/p-D3usVJE2.js +0 -16
- package/dist/components/p-DDu3JV_r.js +0 -5
- package/dist/components/p-DFWqyfUe.js +0 -5
- package/dist/components/p-DL6xuxGG.js +0 -5
- package/dist/components/p-DOX9Uwk1.js +0 -5
- package/dist/components/p-DUq7uT2-.js +0 -5
- package/dist/components/p-Devw08cc.js +0 -5
- package/dist/components/p-Di96UxvH.js +0 -5
- package/dist/components/p-DiLI514I.js +0 -5
- package/dist/components/p-Dp3MsSXu.js +0 -5
- package/dist/components/p-DuLHFTpa.js +0 -5
- package/dist/components/p-DusornQ0.js +0 -5
- package/dist/components/p-OQpiDEK9.js +0 -5
- package/dist/components/p-XW6Hp_Jk.js +0 -5
- package/dist/esm/br-dropdown_2.entry.js +0 -2296
- package/dist/esm/br-input.entry.js +0 -713
- package/dist/esm/br-loading.entry.js +0 -565
- package/dist/esm/br-pagination.entry.js +0 -914
- package/dist/esm/br-table-cell.entry.js +0 -199
- package/dist/esm/br-table-header-cell.entry.js +0 -187
- package/dist/esm/br-table-row.entry.js +0 -93
- package/dist/esm/table-constants-CXMwM9m4.js +0 -170
- package/dist/types/components/table/table-tokens.d.ts +0 -46
- package/dist/types/components/table/table-types.d.ts +0 -107
- package/dist/types/components/table/table-utils.d.ts +0 -47
- package/dist/webcomponents/p-01801ac1.entry.js +0 -5
- package/dist/webcomponents/p-05b459f2.entry.js +0 -5
- package/dist/webcomponents/p-08ac6f09.entry.js +0 -5
- package/dist/webcomponents/p-09817344.entry.js +0 -5
- package/dist/webcomponents/p-13babfc4.entry.js +0 -5
- package/dist/webcomponents/p-15022ab7.entry.js +0 -5
- package/dist/webcomponents/p-172d42c2.entry.js +0 -5
- package/dist/webcomponents/p-1ba60d13.entry.js +0 -5
- package/dist/webcomponents/p-1bb96641.entry.js +0 -5
- package/dist/webcomponents/p-21feda62.entry.js +0 -5
- package/dist/webcomponents/p-23a5cfd7.entry.js +0 -5
- package/dist/webcomponents/p-32ea6342.entry.js +0 -5
- package/dist/webcomponents/p-3658adcf.entry.js +0 -5
- package/dist/webcomponents/p-37914e63.entry.js +0 -5
- package/dist/webcomponents/p-3b0dd0ff.entry.js +0 -5
- package/dist/webcomponents/p-42c9c6c5.entry.js +0 -5
- package/dist/webcomponents/p-473561f2.entry.js +0 -5
- package/dist/webcomponents/p-47c490ef.entry.js +0 -5
- package/dist/webcomponents/p-4b01c60f.entry.js +0 -5
- package/dist/webcomponents/p-5a5ed7d8.entry.js +0 -5
- package/dist/webcomponents/p-609cf652.entry.js +0 -5
- package/dist/webcomponents/p-614683d9.entry.js +0 -5
- package/dist/webcomponents/p-67605757.entry.js +0 -5
- package/dist/webcomponents/p-67d62559.entry.js +0 -5
- package/dist/webcomponents/p-695dbeb0.entry.js +0 -5
- package/dist/webcomponents/p-7352d459.entry.js +0 -5
- package/dist/webcomponents/p-745213f7.entry.js +0 -5
- package/dist/webcomponents/p-7ee564a1.entry.js +0 -5
- package/dist/webcomponents/p-821341dc.entry.js +0 -5
- package/dist/webcomponents/p-8aa6f07c.entry.js +0 -5
- package/dist/webcomponents/p-8ddf3ce3.entry.js +0 -5
- package/dist/webcomponents/p-95f3c44a.entry.js +0 -5
- package/dist/webcomponents/p-96dbb585.entry.js +0 -5
- package/dist/webcomponents/p-9815ab95.entry.js +0 -5
- package/dist/webcomponents/p-9e0324a7.entry.js +0 -5
- package/dist/webcomponents/p-CJipT0in.js +0 -5
- package/dist/webcomponents/p-CXMwM9m4.js +0 -5
- package/dist/webcomponents/p-D3usVJE2.js +0 -16
- package/dist/webcomponents/p-a038be16.entry.js +0 -5
- package/dist/webcomponents/p-a32d17cb.entry.js +0 -5
- package/dist/webcomponents/p-a46f068e.entry.js +0 -5
- package/dist/webcomponents/p-a89b684d.entry.js +0 -5
- package/dist/webcomponents/p-af888d13.entry.js +0 -5
- package/dist/webcomponents/p-b0124459.entry.js +0 -5
- package/dist/webcomponents/p-b063c12f.entry.js +0 -5
- package/dist/webcomponents/p-b07bfdc5.entry.js +0 -5
- package/dist/webcomponents/p-b5d25332.entry.js +0 -5
- package/dist/webcomponents/p-b609b464.entry.js +0 -5
- package/dist/webcomponents/p-b66ab52d.entry.js +0 -5
- package/dist/webcomponents/p-b8d4ace3.entry.js +0 -5
- package/dist/webcomponents/p-c717c745.entry.js +0 -5
- package/dist/webcomponents/p-ce3d689c.entry.js +0 -5
- package/dist/webcomponents/p-d08b6266.entry.js +0 -5
- package/dist/webcomponents/p-d6165aa0.entry.js +0 -5
- package/dist/webcomponents/p-dacb7e2c.entry.js +0 -5
- package/dist/webcomponents/p-db309a11.entry.js +0 -5
- package/dist/webcomponents/p-dc23cb2e.entry.js +0 -5
- package/dist/webcomponents/p-e241caf3.entry.js +0 -5
- package/dist/webcomponents/p-e661c024.entry.js +0 -5
- package/dist/webcomponents/p-e7107869.entry.js +0 -5
- package/dist/webcomponents/p-eb94199d.entry.js +0 -5
- package/dist/webcomponents/p-f8993ae4.entry.js +0 -5
- package/dist/webcomponents/p-f99d8c9c.entry.js +0 -5
- package/dist/webcomponents/p-fdcb54a3.entry.js +0 -5
- package/dist/webcomponents/p-fed02286.entry.js +0 -5
- /package/dist/collection/components/table/{table-types.js → table-footer/table-footer.types.js} +0 -0
- /package/dist/components/{p-5z6jgH1D.js → p-BNckUhK6.js} +0 -0
- /package/dist/webcomponents/{p-BIG-yees.js → p-Bt01zQ7-.js} +0 -0
- /package/dist/webcomponents/{p-zlORkiHQ.js → p-CXDYKUBz.js} +0 -0
|
@@ -0,0 +1,2578 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Construído por SERPRO
|
|
3
|
+
* © https://serpro.gov.br/ - MIT License.
|
|
4
|
+
*/
|
|
5
|
+
'use strict';
|
|
6
|
+
|
|
7
|
+
var index = require('./index-BP8UIQro.js');
|
|
8
|
+
var id = require('./id-DE4jSi-L.js');
|
|
9
|
+
var propWarning = require('./prop-warning-xvEHQz8H.js');
|
|
10
|
+
var props = require('./props-D8dybmr0.js');
|
|
11
|
+
var event = require('./event-CmVdNHxl.js');
|
|
12
|
+
var floatingSurfaceDismiss = require('./floating-surface-dismiss-ccdiD0KF.js');
|
|
13
|
+
var validator = require('./validator-GkkueMOx.js');
|
|
14
|
+
var ownership = require('./ownership-UnpufyCx.js');
|
|
15
|
+
var slot = require('./slot-CjaqqX7y.js');
|
|
16
|
+
var select_utils = require('./select.utils-C38f5Kea.js');
|
|
17
|
+
|
|
18
|
+
const paginationCss = () => `*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media (min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media (min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@media (min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{flex-basis:25%;max-width:25%}}@media (min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-out{animation-timing-function:cubic-bezier(0, 0, 0.58, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fast{animation-duration:var(--duration-fast)}.slow{animation-duration:var(--duration-slow)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.pt-half{padding-top:var(--spacing-scale-half) !important}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}fieldset[disabled]{opacity:1}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media (min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media (min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background:var(--background);--table-color:var(--color);--table-border-color:var(--gray-20);--table-border-style:solid;--table-border-width:1px;--table-hover:var(--color-rgb);--table-padding:var(--spacing-scale-3x);--table-font-weight:var(--font-weight-medium);--table-th-background:var(--background-alternative);--table-th-font-weight:var(--font-weight-semi-bold);--table-row-size:var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}mark,.mark{background:var(--red-warm-vivid-10);color:var(--color)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}@media (prefers-reduced-motion: reduce){:host,:host::before,:host::after,:host *,:host *::before,:host *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}}:host-context([data-wbc-reduced-motion=true])::before,:host-context([data-wbc-reduced-motion=true])::after,:host-context([data-wbc-reduced-motion=true]) *,:host-context([data-wbc-reduced-motion=true]) *::before,:host-context([data-wbc-reduced-motion=true]) *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}.br-pagination{--pagination-margin:var(--spacing-scale-base);--pagination-select-width:88px;--pagination-size:var(--pagination-medium);--pagination-small:24px;--pagination-medium:32px;--pagination-large:40px;color:var(--color);display:flex;flex-wrap:wrap;font-weight:var(--font-weight);justify-content:center}.br-pagination ul{align-items:center;display:flex;list-style:none;margin:0;padding:0}.br-pagination li{padding:0}.br-pagination.dark-mode .page{color:var(--color-dark)}.br-pagination.dark-mode .br-select .br-item label{color:var(--color-dark)}.br-pagination .page:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}.br-pagination .page{align-items:center;border:1px solid rgba(0,0,0,0);border-radius:100em;color:var(--interactive);display:inline-flex;justify-content:center;margin:0 calc(var(--pagination-margin)*.5);min-height:var(--pagination-size);min-width:var(--pagination-size);padding:0 var(--spacing-scale-base);white-space:nowrap}.br-pagination .page.active{background:var(--active);color:var(--color-dark);font-weight:var(--font-weight-semi-bold)}.br-pagination .pagination-ellipsis{margin:0 calc(var(--pagination-margin)*.5);position:relative}.br-pagination .pagination-ellipsis .br-button{--button-size:var(--pagination-size)}.br-pagination .pagination-ellipsis .br-list::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-pagination .pagination-ellipsis .br-list::-webkit-scrollbar-track{background:var(--gray-10)}.br-pagination .pagination-ellipsis .br-list::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-pagination .pagination-ellipsis .br-list:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-pagination .pagination-ellipsis .br-list{max-height:220px;min-width:4em;overflow-y:auto;z-index:var(--z-index-layer-1)}.br-pagination.small{--pagination-size:var(--pagination-small)}.br-pagination.medium{--pagination-size:var(--pagination-medium)}.br-pagination.large{--pagination-size:var(--pagination-large)}.br-pagination .pagination-information{align-items:center;display:flex}.br-pagination .pagination-per-page,.br-pagination .pagination-go-to-page{align-items:center;display:flex}.br-pagination .pagination-per-page .br-input,.br-pagination .pagination-go-to-page .br-input{align-items:center;display:flex}.br-pagination .pagination-per-page .br-input label,.br-pagination .pagination-go-to-page .br-input label{font-weight:var(--font-weight-regular);margin-bottom:0;margin-right:var(--spacing-scale-base);padding-bottom:0}.br-pagination .pagination-per-page .br-input input,.br-pagination .pagination-go-to-page .br-input input{--input-size:var(--pagination-medium);padding-left:var(--spacing-scale-base);padding-right:calc(var(--spacing-scale-baseh) + 32px);text-align:right;width:var(--pagination-select-width)}.br-pagination .pagination-per-page .br-input input:not(:focus),.br-pagination .pagination-go-to-page .br-input input:not(:focus){border-color:rgba(0,0,0,0)}.br-pagination .pagination-per-page .br-list,.br-pagination .pagination-go-to-page .br-list{min-width:5em;right:0;width:auto}.br-pagination .pagination-arrows{align-items:center;display:flex}.br-pagination .br-select .br-input .br-button{bottom:auto;margin-top:0;position:absolute;right:var(--spacing-scale-half);top:auto;transform:none}.br-pagination .br-divider{border-right-width:var(--divider-size);border-top:0}.br-pagination.inverted,.br-pagination.dark-mode{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.br-pagination.inverted.inverted .br-input,.br-pagination.inverted.inverted .br-input label,.br-pagination.inverted.dark-mode .br-input,.br-pagination.inverted.dark-mode .br-input label,.br-pagination.dark-mode.inverted .br-input,.br-pagination.dark-mode.inverted .br-input label,.br-pagination.dark-mode.dark-mode .br-input,.br-pagination.dark-mode.dark-mode .br-input label{--color:var(--color-dark);--focus-color:var(--focus-color-dark)}.br-pagination.inverted .page.active,.br-pagination.dark-mode .page.active{--interactive-rgb:var(--active-rgb);background-color:var(--background-light);color:var(--active)}.br-pagination .input-group .input-icon{display:none}.br-divider,hr{--divider-size:var(--surface-width-sm);border-color:var(--border-color);border-style:solid;border-width:0;border-top-width:var(--divider-size);display:block}.br-divider.content,hr.content{align-items:center;border:0;display:flex;justify-content:center}.br-divider.content::after,.br-divider.content::before,hr.content::after,hr.content::before{border-color:var(--border-color);border-style:solid;border-width:0;border-top-width:var(--divider-size);content:"";flex:1}.br-divider.content::after,hr.content::after{margin-left:var(--spacing-scale-base)}.br-divider.content::before,hr.content::before{margin-right:var(--spacing-scale-base)}.br-divider.vertical,hr.vertical{align-self:stretch;border-right-width:var(--divider-size);border-top-width:0}.br-divider.vertical.content,hr.vertical.content{flex-direction:column}.br-divider.vertical.content::after,.br-divider.vertical.content::before,hr.vertical.content::after,hr.vertical.content::before{border-right-width:var(--divider-size);border-top-width:0;margin:0}.br-divider.inverted,.br-divider.dark-mode,hr.inverted,hr.dark-mode{--border-color:var(--pure-0)}.br-divider.dashed,hr.dashed{border-style:dashed}.br-divider.sm,hr.sm{--divider-size:var(--surface-width-sm)}hr{--divider-padding:var(--spacing-scale-2x);margin:var(--divider-padding) 0}:host{display:block}:host .pagination-ellipsis br-list{max-height:none;overflow:visible}:host .pagination-ellipsis br-list.has-scroll{max-height:220px;overflow-y:auto}:host .pagination-ellipsis br-list.has-scroll::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}:host .pagination-ellipsis br-list.has-scroll::-webkit-scrollbar-track{background:var(--gray-10)}:host .pagination-ellipsis br-list.has-scroll::-webkit-scrollbar-thumb{background:var(--gray-30)}:host .pagination-ellipsis br-list.has-scroll:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}:host .pagination-ellipsis .pagination-ellipsis-virtual-spacer{display:block;width:100%}:host .br-pagination button.page:not(.active){background-color:rgba(0,0,0,0)}:host([variant=contextual]) .br-pagination{justify-content:space-between}.pagination-leading,.pagination-trailing{display:flex;align-items:center;min-width:0}.pagination-leading{flex:0 1 auto}.pagination-trailing{flex:0 0 auto}:host([variant=contextual]) .pagination-divider{flex:0 0 auto;width:0;height:calc(var(--pagination-size) + var(--spacing-scale-base));margin-inline:var(--spacing-scale-base);border:0;border-right:var(--divider-size) solid var(--border-color)}:host([variant=contextual]) .pagination-per-page,:host([variant=contextual]) .pagination-go-to-page{flex:0 0 auto;width:max-content}:host([variant=contextual]) .pagination-per-page br-select,:host([variant=contextual]) .pagination-go-to-page br-select{width:max-content}.pagination-per-page br-select,.pagination-go-to-page br-select{--input-size:var(--pagination-size);--br-input-margin-bottom:0}.pagination-per-page br-select::part(input-container),.pagination-go-to-page br-select::part(input-container){transform:translateY(2px)}.pagination-per-page br-select::part(input-label),.pagination-go-to-page br-select::part(input-label){display:inline-flex;align-items:center;height:var(--pagination-medium);line-height:1;font-weight:var(--font-weight-regular);margin-bottom:0;margin-right:var(--spacing-scale-base);padding-bottom:0}.pagination-per-page br-select::part(input-clear),.pagination-go-to-page br-select::part(input-clear){display:none}.pagination-per-page br-select::part(input-field),.pagination-go-to-page br-select::part(input-field){--input-size:var(--pagination-medium);margin-top:0;padding-left:var(--spacing-scale-base);text-align:left}:host(:not([variant=contextual])) .br-pagination{justify-content:center}:host([variant=contextual]) .br-pagination ul{justify-content:center;width:100%}:host([color-mode=dark]) br-select{--color:var(--color-dark);--focus-color:var(--focus-color-dark)}:host([color-mode=dark]) br-select::part(label){color:var(--color-dark)}:host([color-mode=dark]) .br-pagination a.page:not(.active),:host([color-mode=dark]) .br-pagination button.page:not(.active){color:var(--color);background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.br-pagination.dark-mode .br-select .br-item label,.br-pagination.dark-mode .page{color:var(--color-dark);background-color:rgba(0,0,0,0)}:host([color-mode=dark]) .br-pagination a.page:not(.active):hover,:host([color-mode=dark]) .br-pagination a.page:not(.active):focus,:host([color-mode=dark]) .br-pagination a.page:not(.active):focus-visible,:host([color-mode=dark]) .br-pagination button.page:not(.active):hover,:host([color-mode=dark]) .br-pagination button.page:not(.active):focus,:host([color-mode=dark]) .br-pagination button.page:not(.active):focus-visible{color:var(--interactive)}.br-pagination .page:focus-visible{outline:var(--focus) var(--focus-style) var(--focus-width);outline-offset:var(--focus-offset)}.pagination-ellipsis br-button::part(button){--button-size:var(--pagination-size)}.pagination-ellipsis br-button:focus-visible{outline:var(--focus) var(--focus-style) var(--focus-width);outline-offset:var(--focus-offset);border-radius:50%}.br-pagination>ul{position:relative}:host([loading]) .br-pagination>ul>li.pagination-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;visibility:visible}:host([loading]) .br-pagination>ul>li.pagination-loading .pagination-loading{display:flex;align-items:center;justify-content:center}:host([loading]) .br-pagination>ul>li:not(.pagination-loading):not(:first-child):not(:last-child){visibility:hidden}.pagination-information{position:relative}.pagination-information .pagination-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([color-mode=dark]) br-select::part(radio-label){color:var(--color-dark)}`;
|
|
19
|
+
|
|
20
|
+
const PAGINATION_COLOR_MODES = ['dark'];
|
|
21
|
+
const PAGINATION_VARIANTS = ['default', 'contextual'];
|
|
22
|
+
const Pagination = class {
|
|
23
|
+
constructor(hostRef) {
|
|
24
|
+
index.registerInstance(this, hostRef);
|
|
25
|
+
this.pageChange = index.createEvent(this, "pageChange", 7);
|
|
26
|
+
this.brPaginationPageChange = index.createEvent(this, "brPaginationPageChange", 6);
|
|
27
|
+
this.perPageChange = index.createEvent(this, "perPageChange", 7);
|
|
28
|
+
this.brPaginationPerPageChange = index.createEvent(this, "brPaginationPerPageChange", 6);
|
|
29
|
+
/**
|
|
30
|
+
* Estado interno para responsividade. Verdadeiro quando viewport < sm.
|
|
31
|
+
*/
|
|
32
|
+
this.isSmall = false;
|
|
33
|
+
/** Materializa as opções completas somente após a primeira abertura do seletor. */
|
|
34
|
+
this.goToOptionsReady = false;
|
|
35
|
+
this.goToSearchTerm = '';
|
|
36
|
+
/**
|
|
37
|
+
* Controla a janela visível de cada dropdown de reticências.
|
|
38
|
+
*/
|
|
39
|
+
this.ellipsisScrollOffsets = {};
|
|
40
|
+
/**
|
|
41
|
+
* Altura efetiva dos itens do dropdown de reticências.
|
|
42
|
+
* O valor fixo é usado somente até a primeira medição válida do DOM.
|
|
43
|
+
*/
|
|
44
|
+
this.ellipsisItemHeight = Pagination.ELLIPSIS_ITEM_HEIGHT_FALLBACK;
|
|
45
|
+
/**
|
|
46
|
+
* Identificador único do componente.
|
|
47
|
+
* Quando omitido, um valor é gerado automaticamente.
|
|
48
|
+
*
|
|
49
|
+
* > **Padrão:** valor único gerado por `generateUniqueId()`.
|
|
50
|
+
*
|
|
51
|
+
* > **Uso compartilhado:** mantenha esta descrição idêntica em todos os componentes que usam `customId`.
|
|
52
|
+
*/
|
|
53
|
+
this.customId = id.generateUniqueId();
|
|
54
|
+
/** Quantidade total de páginas (inteiro mínimo 1). Valores inválidos usam 1. */
|
|
55
|
+
this.total = 1;
|
|
56
|
+
/** Página atual (inteira e 1-indexada). Valores inválidos usam 1; valores fora do intervalo são ajustados. */
|
|
57
|
+
this.current = 1;
|
|
58
|
+
/**
|
|
59
|
+
* Rótulo acessível do botão de página anterior.
|
|
60
|
+
*/
|
|
61
|
+
this.previousLabel = 'Voltar página';
|
|
62
|
+
/**
|
|
63
|
+
* Rótulo acessível do botão de próxima página.
|
|
64
|
+
*/
|
|
65
|
+
this.nextLabel = 'Página seguinte';
|
|
66
|
+
/**
|
|
67
|
+
* Rótulo acessível do botão de reticências que abre a lista de páginas ocultas.
|
|
68
|
+
*/
|
|
69
|
+
this.ellipsisLabel = 'Abrir ou fechar a lista de paginação';
|
|
70
|
+
/**
|
|
71
|
+
* Define a densidade visual do componente.
|
|
72
|
+
*
|
|
73
|
+
* - `small`: Alta densidade (componente menor, mais compacto e com menos espaçamento).
|
|
74
|
+
* - `medium`: Densidade intermediária, padrão recomendado para a maioria dos casos.
|
|
75
|
+
* - `large`: Baixa densidade (componente maior, mais espaçamento e altura).
|
|
76
|
+
*
|
|
77
|
+
* > **Uso compartilhado:** mantenha esta descrição idêntica em todos os componentes que usam `density`.
|
|
78
|
+
* Valores inválidos usam `medium`.
|
|
79
|
+
*/
|
|
80
|
+
this.density = 'medium';
|
|
81
|
+
/**
|
|
82
|
+
* Variante de renderização do componente. Valores inválidos usam `default`.
|
|
83
|
+
* - `default`: paginação numérica (padrão)
|
|
84
|
+
* - `contextual`: paginação contextual com seletores e informação de itens
|
|
85
|
+
*/
|
|
86
|
+
this.variant = 'default';
|
|
87
|
+
/**
|
|
88
|
+
* Mantém `current` e `perPage` sob controle da aplicação.
|
|
89
|
+
*
|
|
90
|
+
* Quando ativo, interações apenas emitem a intenção de mudança. A aplicação
|
|
91
|
+
* deve atualizar a propriedade correspondente após concluir seu processamento.
|
|
92
|
+
*
|
|
93
|
+
* @default false
|
|
94
|
+
*/
|
|
95
|
+
this.controlled = false;
|
|
96
|
+
/** Indica que a página solicitada ainda está sendo carregada pelo consumidor.
|
|
97
|
+
* @default false
|
|
98
|
+
*/
|
|
99
|
+
this.loading = false;
|
|
100
|
+
/** Itens por página (inteiro positivo, aplicável na variante contextual). Valores inválidos usam 10. */
|
|
101
|
+
this.perPage = 10;
|
|
102
|
+
/**
|
|
103
|
+
* Opções disponíveis de itens por página na variante `contextual`.
|
|
104
|
+
* Passe o array por property binding; atributos HTML não representam arrays.
|
|
105
|
+
*
|
|
106
|
+
* @example
|
|
107
|
+
* ```js
|
|
108
|
+
* const pagination = document.querySelector('br-pagination');
|
|
109
|
+
* pagination.perPageOptions = [10, 25, 50, 100];
|
|
110
|
+
* ```
|
|
111
|
+
*/
|
|
112
|
+
this.perPageOptions = [10, 20, 30];
|
|
113
|
+
/**
|
|
114
|
+
* Rótulo do seletor de itens por página (variante contextual).
|
|
115
|
+
*/
|
|
116
|
+
this.perPageLabel = 'Exibir';
|
|
117
|
+
/**
|
|
118
|
+
* Rótulo do seletor "ir para página" (variante contextual).
|
|
119
|
+
*/
|
|
120
|
+
this.goToPageLabel = 'Página';
|
|
121
|
+
/**
|
|
122
|
+
* Sufixo textual para a informação de quantidade de itens (variante contextual).
|
|
123
|
+
*/
|
|
124
|
+
this.itemsText = 'itens';
|
|
125
|
+
this.ellipsisScrollFrame = null;
|
|
126
|
+
this.pendingEllipsisScrollOffsets = {};
|
|
127
|
+
this.pendingEllipsisFocus = null;
|
|
128
|
+
this.goToOptionsCache = null;
|
|
129
|
+
this.pendingGoToResetFrame = null;
|
|
130
|
+
this.goTo = (page) => {
|
|
131
|
+
if (this.loading)
|
|
132
|
+
return;
|
|
133
|
+
const next = this.clampPage(page);
|
|
134
|
+
if (next !== this.effectiveCurrent) {
|
|
135
|
+
if (!this.controlled) {
|
|
136
|
+
this.current = next;
|
|
137
|
+
if (this.currentPage !== undefined)
|
|
138
|
+
this.currentPage = next;
|
|
139
|
+
}
|
|
140
|
+
this.pageChange.emit({ page: next });
|
|
141
|
+
this.brPaginationPageChange.emit({ page: next });
|
|
142
|
+
}
|
|
143
|
+
// Gerenciar foco após mudanças iniciadas pelo usuário
|
|
144
|
+
this.queueFocusAfterNavigation();
|
|
145
|
+
};
|
|
146
|
+
this.handlePrevClick = (event) => {
|
|
147
|
+
event.preventDefault();
|
|
148
|
+
if (this.effectiveCurrent > 1) {
|
|
149
|
+
this.goTo(this.effectiveCurrent - 1);
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
this.handleNextClick = (event) => {
|
|
153
|
+
event.preventDefault();
|
|
154
|
+
const maxPages = this.effectiveVariant === 'contextual' ? this.getTotalPages() : this.getDefaultTotalPages();
|
|
155
|
+
if (this.effectiveCurrent < maxPages) {
|
|
156
|
+
this.goTo(this.effectiveCurrent + 1);
|
|
157
|
+
}
|
|
158
|
+
};
|
|
159
|
+
this.handlePageClickFactory = (page) => {
|
|
160
|
+
return (event) => {
|
|
161
|
+
event.preventDefault();
|
|
162
|
+
if (this.loading)
|
|
163
|
+
return;
|
|
164
|
+
this.lastInteraction = 'number';
|
|
165
|
+
this.goTo(page);
|
|
166
|
+
};
|
|
167
|
+
};
|
|
168
|
+
this.handleEllipsisItemClickFactory = (page) => {
|
|
169
|
+
return () => {
|
|
170
|
+
if (this.loading)
|
|
171
|
+
return;
|
|
172
|
+
this.lastInteraction = 'ellipsis';
|
|
173
|
+
this.goTo(page);
|
|
174
|
+
};
|
|
175
|
+
};
|
|
176
|
+
this.handlePageKeyDown = (ev) => {
|
|
177
|
+
const target = ev.target;
|
|
178
|
+
// Aceita tanto o botão de página quanto o botão de reticências
|
|
179
|
+
if (!(target?.matches('button.page[part="page"]') || target?.matches('.pagination-ellipsis br-button[slot="trigger"]'))) {
|
|
180
|
+
return;
|
|
181
|
+
}
|
|
182
|
+
const buttons = this.getVisiblePageButtons();
|
|
183
|
+
const idx = buttons.indexOf(target);
|
|
184
|
+
if (idx === -1)
|
|
185
|
+
return;
|
|
186
|
+
switch (ev.key) {
|
|
187
|
+
case 'ArrowRight':
|
|
188
|
+
case 'ArrowDown':
|
|
189
|
+
ev.preventDefault();
|
|
190
|
+
this.focusPageButtonByIndex(idx + 1);
|
|
191
|
+
break;
|
|
192
|
+
case 'ArrowLeft':
|
|
193
|
+
case 'ArrowUp':
|
|
194
|
+
ev.preventDefault();
|
|
195
|
+
this.focusPageButtonByIndex(idx - 1);
|
|
196
|
+
break;
|
|
197
|
+
case 'Home':
|
|
198
|
+
ev.preventDefault();
|
|
199
|
+
this.focusPageButtonByIndex(0);
|
|
200
|
+
break;
|
|
201
|
+
case 'End':
|
|
202
|
+
ev.preventDefault();
|
|
203
|
+
this.focusPageButtonByIndex(buttons.length - 1);
|
|
204
|
+
break;
|
|
205
|
+
}
|
|
206
|
+
};
|
|
207
|
+
this.handleEllipsisScrollFactory = (key, totalItems) => {
|
|
208
|
+
return (event) => {
|
|
209
|
+
const list = event.currentTarget;
|
|
210
|
+
if (list === null)
|
|
211
|
+
return;
|
|
212
|
+
this.pendingEllipsisScrollOffsets[key] = list.scrollTop;
|
|
213
|
+
if (this.ellipsisScrollFrame !== null)
|
|
214
|
+
return;
|
|
215
|
+
this.ellipsisScrollFrame = requestAnimationFrame(() => {
|
|
216
|
+
this.ellipsisScrollFrame = null;
|
|
217
|
+
const offsets = this.pendingEllipsisScrollOffsets;
|
|
218
|
+
this.pendingEllipsisScrollOffsets = {};
|
|
219
|
+
Object.entries(offsets).forEach(([offsetKey, scrollTop]) => {
|
|
220
|
+
this.setEllipsisScrollOffset(offsetKey, scrollTop, totalItems);
|
|
221
|
+
});
|
|
222
|
+
});
|
|
223
|
+
};
|
|
224
|
+
};
|
|
225
|
+
this.handleEllipsisItemKeyDownFactory = (key, totalItems) => {
|
|
226
|
+
return (event) => {
|
|
227
|
+
const item = event.currentTarget;
|
|
228
|
+
const pageIndex = Number(item?.getAttribute('data-page-index'));
|
|
229
|
+
if (item === null || !Number.isInteger(pageIndex))
|
|
230
|
+
return;
|
|
231
|
+
if (event.key === 'Escape') {
|
|
232
|
+
event.preventDefault();
|
|
233
|
+
event.stopImmediatePropagation();
|
|
234
|
+
this.handleEllipsisEscape(item, key);
|
|
235
|
+
return;
|
|
236
|
+
}
|
|
237
|
+
this.handleEllipsisBoundaryNavigation(event, key, totalItems, pageIndex);
|
|
238
|
+
};
|
|
239
|
+
};
|
|
240
|
+
this.handlePerPageChange = (event) => {
|
|
241
|
+
if (this.loading)
|
|
242
|
+
return;
|
|
243
|
+
const value = Number(event.detail);
|
|
244
|
+
// Ignora se o valor não for um número finito ou não tiver mudado
|
|
245
|
+
if (!Number.isFinite(value) || value === this.effectivePerPage) {
|
|
246
|
+
return;
|
|
247
|
+
}
|
|
248
|
+
const nextPerPage = props.resolveIntegerPropValue(this.el, 'perPage', value, 1, Number.MAX_SAFE_INTEGER, 10);
|
|
249
|
+
if (!this.controlled) {
|
|
250
|
+
this.perPage = nextPerPage;
|
|
251
|
+
this.current = this.clampPage(this.current); // Ajusta a página atual
|
|
252
|
+
}
|
|
253
|
+
const detail = { perPage: nextPerPage };
|
|
254
|
+
this.perPageChange.emit(detail);
|
|
255
|
+
this.brPaginationPerPageChange.emit(detail);
|
|
256
|
+
// Gerencia o foco após a interação
|
|
257
|
+
this.lastInteraction = 'perPage';
|
|
258
|
+
this.queueFocusAfterNavigation();
|
|
259
|
+
};
|
|
260
|
+
this.handleGoToPageChange = (event) => {
|
|
261
|
+
if (this.loading)
|
|
262
|
+
return;
|
|
263
|
+
const value = Number(event.detail);
|
|
264
|
+
if (this.pendingGoToPage !== undefined)
|
|
265
|
+
return;
|
|
266
|
+
// O fallback para this.current garante que não tentemos navegar para NaN.
|
|
267
|
+
const next = this.clampPage(Number.isFinite(value) ? value : this.effectiveCurrent);
|
|
268
|
+
if (next !== this.effectiveCurrent) {
|
|
269
|
+
this.lastInteraction = 'goTo';
|
|
270
|
+
this.pendingGoToPage = next;
|
|
271
|
+
if (this.pendingGoToResetFrame !== null)
|
|
272
|
+
cancelAnimationFrame(this.pendingGoToResetFrame);
|
|
273
|
+
this.pendingGoToResetFrame = requestAnimationFrame(() => {
|
|
274
|
+
this.pendingGoToResetFrame = null;
|
|
275
|
+
this.pendingGoToPage = undefined;
|
|
276
|
+
});
|
|
277
|
+
this.goTo(next);
|
|
278
|
+
}
|
|
279
|
+
};
|
|
280
|
+
this.handleGoToSelectOpened = () => {
|
|
281
|
+
if (this.goToOptionsReady)
|
|
282
|
+
return;
|
|
283
|
+
this.goToOptionsReady = true;
|
|
284
|
+
};
|
|
285
|
+
}
|
|
286
|
+
handleTotalChange() {
|
|
287
|
+
this.goToOptionsCache = null;
|
|
288
|
+
this.goToOptionsReady = false;
|
|
289
|
+
this.resetAllEllipsisScrollOffsets();
|
|
290
|
+
this.current = this.clampPage(this.current);
|
|
291
|
+
}
|
|
292
|
+
handleTotalPagesChange(newValue) {
|
|
293
|
+
this.goToOptionsCache = null;
|
|
294
|
+
this.goToOptionsReady = false;
|
|
295
|
+
if (newValue !== undefined && newValue !== this.total)
|
|
296
|
+
this.total = newValue;
|
|
297
|
+
}
|
|
298
|
+
handleCurrentChange(newValue) {
|
|
299
|
+
this.resetAllEllipsisScrollOffsets();
|
|
300
|
+
const clamped = this.clampPage(newValue);
|
|
301
|
+
if (clamped !== newValue) {
|
|
302
|
+
this.current = clamped;
|
|
303
|
+
}
|
|
304
|
+
if (this.currentPage !== undefined && this.currentPage !== clamped)
|
|
305
|
+
this.currentPage = clamped;
|
|
306
|
+
}
|
|
307
|
+
handleCurrentPageChange(newValue) {
|
|
308
|
+
if (newValue !== undefined && newValue !== this.current)
|
|
309
|
+
this.current = newValue;
|
|
310
|
+
}
|
|
311
|
+
handlePerPagePropChange(newValue) {
|
|
312
|
+
this.goToOptionsCache = null;
|
|
313
|
+
this.goToOptionsReady = false;
|
|
314
|
+
if (this.effectiveVariant !== 'contextual')
|
|
315
|
+
return;
|
|
316
|
+
const nextPerPage = this.effectivePerPage;
|
|
317
|
+
if (nextPerPage !== newValue) {
|
|
318
|
+
this.perPage = nextPerPage;
|
|
319
|
+
return;
|
|
320
|
+
}
|
|
321
|
+
this.current = this.clampPage(this.current);
|
|
322
|
+
}
|
|
323
|
+
handleTotalItemsChange() {
|
|
324
|
+
this.goToOptionsCache = null;
|
|
325
|
+
this.goToOptionsReady = false;
|
|
326
|
+
if (this.effectiveVariant !== 'contextual')
|
|
327
|
+
return;
|
|
328
|
+
this.current = this.clampPage(this.current);
|
|
329
|
+
}
|
|
330
|
+
handleDensityChange() {
|
|
331
|
+
this.ellipsisScrollOffsets = {};
|
|
332
|
+
this.pendingEllipsisFocus = null;
|
|
333
|
+
this.ellipsisItemHeight = this.computeItemHeightForDensity();
|
|
334
|
+
}
|
|
335
|
+
connectedCallback() {
|
|
336
|
+
this.setupMediaQuery();
|
|
337
|
+
}
|
|
338
|
+
disconnectedCallback() {
|
|
339
|
+
this.cleanupMediaQuery();
|
|
340
|
+
this.pendingEllipsisFocus = null;
|
|
341
|
+
if (this.ellipsisScrollFrame !== null) {
|
|
342
|
+
cancelAnimationFrame(this.ellipsisScrollFrame);
|
|
343
|
+
this.ellipsisScrollFrame = null;
|
|
344
|
+
}
|
|
345
|
+
if (this.pendingGoToResetFrame !== null) {
|
|
346
|
+
cancelAnimationFrame(this.pendingGoToResetFrame);
|
|
347
|
+
this.pendingGoToResetFrame = null;
|
|
348
|
+
}
|
|
349
|
+
this.pendingGoToPage = undefined;
|
|
350
|
+
}
|
|
351
|
+
componentWillLoad() {
|
|
352
|
+
if (this.totalPages !== undefined)
|
|
353
|
+
this.total = this.effectiveTotalPages ?? this.effectiveTotal;
|
|
354
|
+
if (this.currentPage !== undefined)
|
|
355
|
+
this.current = this.effectiveCurrentPage ?? this.effectiveCurrent;
|
|
356
|
+
this.current = this.clampPage(this.current);
|
|
357
|
+
}
|
|
358
|
+
componentDidLoad() {
|
|
359
|
+
this.ellipsisItemHeight = this.computeItemHeightForDensity();
|
|
360
|
+
}
|
|
361
|
+
componentDidRender() {
|
|
362
|
+
this.flushPendingEllipsisFocus();
|
|
363
|
+
}
|
|
364
|
+
/**
|
|
365
|
+
* Define programaticamente a página atual dentro do intervalo permitido.
|
|
366
|
+
* @param page Página desejada (1-indexada).
|
|
367
|
+
* Em `controlled`, emite a solicitação sem alterar `current`.
|
|
368
|
+
*/
|
|
369
|
+
async setPage(page) {
|
|
370
|
+
this.goTo(page);
|
|
371
|
+
}
|
|
372
|
+
/**
|
|
373
|
+
* Solicita navegação programática para uma página (1-indexada).
|
|
374
|
+
* Em `controlled`, aguarda a confirmação externa para alterar `current`.
|
|
375
|
+
*/
|
|
376
|
+
async goToPage(page) {
|
|
377
|
+
this.goTo(page);
|
|
378
|
+
}
|
|
379
|
+
// Calcula a altura do item com base nos tokens de density do GovBR-DS.
|
|
380
|
+
// py-3 = spacing-scale-2x (medium), py-4 = spacing-scale-3x (large), base para small.
|
|
381
|
+
computeItemHeightForDensity() {
|
|
382
|
+
if (typeof window === 'undefined')
|
|
383
|
+
return Pagination.ELLIPSIS_ITEM_HEIGHT_FALLBACK;
|
|
384
|
+
const style = getComputedStyle(this.el);
|
|
385
|
+
const spacingBase = parseFloat(style.getPropertyValue('--spacing-scale-base'));
|
|
386
|
+
const fontSize = parseFloat(style.getPropertyValue('--font-size-scale-base'));
|
|
387
|
+
const lineHeight = parseFloat(style.getPropertyValue('--font-line-height-medium'));
|
|
388
|
+
if (!Number.isFinite(spacingBase) || !Number.isFinite(fontSize) || !Number.isFinite(lineHeight)) {
|
|
389
|
+
return Pagination.ELLIPSIS_ITEM_HEIGHT_FALLBACK;
|
|
390
|
+
}
|
|
391
|
+
const paddingY = this.effectiveDensity === 'large'
|
|
392
|
+
? spacingBase * 3
|
|
393
|
+
: this.effectiveDensity === 'medium'
|
|
394
|
+
? spacingBase * 2
|
|
395
|
+
: spacingBase;
|
|
396
|
+
return Math.ceil(fontSize * lineHeight + paddingY * 2);
|
|
397
|
+
}
|
|
398
|
+
setupMediaQuery() {
|
|
399
|
+
if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
|
|
400
|
+
return;
|
|
401
|
+
const query = '(max-width: 575.98px)';
|
|
402
|
+
this.cleanupMediaQuery();
|
|
403
|
+
try {
|
|
404
|
+
this.mqlSmall = window.matchMedia(query);
|
|
405
|
+
this.isSmall = this.mqlSmall.matches;
|
|
406
|
+
this.mqlSmallHandler = (event) => {
|
|
407
|
+
this.isSmall = event.matches;
|
|
408
|
+
};
|
|
409
|
+
const legacyMediaQueryList = this.mqlSmall;
|
|
410
|
+
if (typeof this.mqlSmall.addEventListener === 'function') {
|
|
411
|
+
this.mqlSmall.addEventListener('change', this.mqlSmallHandler);
|
|
412
|
+
}
|
|
413
|
+
else if (typeof legacyMediaQueryList.addListener === 'function') {
|
|
414
|
+
legacyMediaQueryList.addListener(this.mqlSmallHandler);
|
|
415
|
+
}
|
|
416
|
+
}
|
|
417
|
+
catch {
|
|
418
|
+
console.warn(`Media Query "${query}" is not supported in this browser.`);
|
|
419
|
+
this.mqlSmall = undefined;
|
|
420
|
+
this.mqlSmallHandler = undefined;
|
|
421
|
+
this.isSmall = false;
|
|
422
|
+
}
|
|
423
|
+
}
|
|
424
|
+
cleanupMediaQuery() {
|
|
425
|
+
if (this.mqlSmall === undefined || this.mqlSmallHandler === undefined) {
|
|
426
|
+
this.mqlSmall = undefined;
|
|
427
|
+
this.mqlSmallHandler = undefined;
|
|
428
|
+
return;
|
|
429
|
+
}
|
|
430
|
+
if (typeof this.mqlSmall.removeEventListener === 'function') {
|
|
431
|
+
this.mqlSmall.removeEventListener('change', this.mqlSmallHandler);
|
|
432
|
+
}
|
|
433
|
+
else {
|
|
434
|
+
const legacyMediaQueryList = this.mqlSmall;
|
|
435
|
+
if (typeof legacyMediaQueryList.removeListener === 'function') {
|
|
436
|
+
legacyMediaQueryList.removeListener(this.mqlSmallHandler);
|
|
437
|
+
}
|
|
438
|
+
}
|
|
439
|
+
this.mqlSmall = undefined;
|
|
440
|
+
this.mqlSmallHandler = undefined;
|
|
441
|
+
}
|
|
442
|
+
getCssClassMap() {
|
|
443
|
+
const density = this.effectiveDensity;
|
|
444
|
+
return {
|
|
445
|
+
'br-pagination': true,
|
|
446
|
+
small: density === 'small',
|
|
447
|
+
large: density === 'large',
|
|
448
|
+
medium: density === 'medium',
|
|
449
|
+
'dark-mode': this.effectiveColorMode === 'dark',
|
|
450
|
+
};
|
|
451
|
+
}
|
|
452
|
+
get effectiveDensity() {
|
|
453
|
+
return props.resolveDensity(this.el, this.density);
|
|
454
|
+
}
|
|
455
|
+
get effectiveColorMode() {
|
|
456
|
+
return props.resolveAllowedPropValue(this.el, 'colorMode', this.colorMode, PAGINATION_COLOR_MODES, undefined, {
|
|
457
|
+
allowUndefined: true,
|
|
458
|
+
});
|
|
459
|
+
}
|
|
460
|
+
get effectiveVariant() {
|
|
461
|
+
return props.resolveAllowedPropValue(this.el, 'variant', this.variant, PAGINATION_VARIANTS, 'default');
|
|
462
|
+
}
|
|
463
|
+
get effectiveTotal() {
|
|
464
|
+
return props.resolveIntegerPropValue(this.el, 'total', this.total, 1, Number.MAX_SAFE_INTEGER, 1);
|
|
465
|
+
}
|
|
466
|
+
get effectiveTotalPages() {
|
|
467
|
+
return props.resolveIntegerPropValue(this.el, 'totalPages', this.totalPages, 1, Number.MAX_SAFE_INTEGER, 1, {
|
|
468
|
+
allowUndefined: true,
|
|
469
|
+
});
|
|
470
|
+
}
|
|
471
|
+
get effectiveCurrentPage() {
|
|
472
|
+
return props.resolveIntegerPropValue(this.el, 'currentPage', this.currentPage, 1, Number.MAX_SAFE_INTEGER, 1, {
|
|
473
|
+
allowUndefined: true,
|
|
474
|
+
});
|
|
475
|
+
}
|
|
476
|
+
get effectiveTotalItems() {
|
|
477
|
+
return (props.resolveIntegerPropValue(this.el, 'totalItems', this.totalItems, 0, Number.MAX_SAFE_INTEGER, 0, {
|
|
478
|
+
allowUndefined: true,
|
|
479
|
+
}) ?? 0);
|
|
480
|
+
}
|
|
481
|
+
get effectivePerPage() {
|
|
482
|
+
return props.resolveIntegerPropValue(this.el, 'perPage', this.perPage, 1, Number.MAX_SAFE_INTEGER, 10);
|
|
483
|
+
}
|
|
484
|
+
get effectivePerPageOptions() {
|
|
485
|
+
const options = Array.isArray(this.perPageOptions)
|
|
486
|
+
? this.perPageOptions.map((option) => Number(option)).filter((option) => Number.isInteger(option) && option >= 1)
|
|
487
|
+
: [];
|
|
488
|
+
const uniqueOptions = [...new Set(options)];
|
|
489
|
+
if (!Array.isArray(this.perPageOptions) ||
|
|
490
|
+
uniqueOptions.length === 0 ||
|
|
491
|
+
uniqueOptions.length !== this.perPageOptions.length) {
|
|
492
|
+
propWarning.reportInvalidPropValue(this.el, 'perPageOptions', this.perPageOptions, 'Informe uma lista com inteiros positivos, sem valores inválidos ou duplicados.', 'Aplicando fallback [10, 20, 30] quando nenhuma opção válida for informada e ignorando entradas inválidas.');
|
|
493
|
+
}
|
|
494
|
+
return uniqueOptions.length > 0 ? uniqueOptions : [10, 20, 30];
|
|
495
|
+
}
|
|
496
|
+
getDefaultTotalPages() {
|
|
497
|
+
return this.effectiveTotalPages ?? this.effectiveTotal;
|
|
498
|
+
}
|
|
499
|
+
get effectiveCurrent() {
|
|
500
|
+
return this.clampPage(props.resolveIntegerPropValue(this.el, 'current', this.current, 1, Number.MAX_SAFE_INTEGER, 1));
|
|
501
|
+
}
|
|
502
|
+
clampPage(value) {
|
|
503
|
+
const total = this.effectiveVariant === 'contextual' ? this.getTotalPages() : this.getDefaultTotalPages();
|
|
504
|
+
const clampedValue = Math.max(1, props.resolveIntegerPropValue(this.el, 'current', value, 1, Number.MAX_SAFE_INTEGER, 1));
|
|
505
|
+
return Math.min(clampedValue, total);
|
|
506
|
+
}
|
|
507
|
+
getVisiblePageButtons() {
|
|
508
|
+
const root = this.el.shadowRoot;
|
|
509
|
+
if (root === null)
|
|
510
|
+
return [];
|
|
511
|
+
return Array.from(root.querySelectorAll('button.page[part="page"], .pagination-ellipsis br-button[slot="trigger"]'));
|
|
512
|
+
}
|
|
513
|
+
focusPageButtonByIndex(index) {
|
|
514
|
+
const buttons = this.getVisiblePageButtons();
|
|
515
|
+
if (buttons.length === 0)
|
|
516
|
+
return;
|
|
517
|
+
const clamped = Math.max(0, Math.min(index, buttons.length - 1));
|
|
518
|
+
const btn = buttons[clamped];
|
|
519
|
+
// Garantir roving tabindex
|
|
520
|
+
buttons.forEach((b, i) => {
|
|
521
|
+
b.tabIndex = i === clamped ? 0 : -1;
|
|
522
|
+
});
|
|
523
|
+
btn.focus();
|
|
524
|
+
}
|
|
525
|
+
queueFocusAfterNavigation() {
|
|
526
|
+
// Diferir para após renderização (fallback em ambientes sem RAF)
|
|
527
|
+
const defer = typeof requestAnimationFrame === 'function'
|
|
528
|
+
? requestAnimationFrame
|
|
529
|
+
: (cb) => setTimeout(() => cb(0), 0);
|
|
530
|
+
defer(() => {
|
|
531
|
+
if (this.effectiveVariant === 'contextual') {
|
|
532
|
+
this.lastInteraction = undefined;
|
|
533
|
+
return;
|
|
534
|
+
}
|
|
535
|
+
// Variant default: focar no botão da página atual ao vir de reticências
|
|
536
|
+
if (this.lastInteraction === 'ellipsis' || this.lastInteraction === 'number') {
|
|
537
|
+
const buttons = this.getVisiblePageButtons();
|
|
538
|
+
const currentBtn = buttons.find((b) => b.getAttribute('aria-current') === 'page');
|
|
539
|
+
if (currentBtn !== null && currentBtn !== undefined) {
|
|
540
|
+
// Roving tabindex: somente o atual recebe 0
|
|
541
|
+
buttons.forEach((b) => {
|
|
542
|
+
b.tabIndex = b === currentBtn ? 0 : -1;
|
|
543
|
+
});
|
|
544
|
+
currentBtn.focus();
|
|
545
|
+
}
|
|
546
|
+
}
|
|
547
|
+
this.lastInteraction = undefined;
|
|
548
|
+
});
|
|
549
|
+
}
|
|
550
|
+
getComputedNavAriaLabel() {
|
|
551
|
+
// Respeita o valor fornecido externamente
|
|
552
|
+
if (this.ariaLabel && String(this.ariaLabel).trim().length > 0)
|
|
553
|
+
return this.ariaLabel;
|
|
554
|
+
const totalPages = this.effectiveVariant === 'contextual' ? this.getTotalPages() : this.getDefaultTotalPages();
|
|
555
|
+
return `Paginação: página ${this.effectiveCurrent} de ${totalPages}`;
|
|
556
|
+
}
|
|
557
|
+
renderPageButton(page) {
|
|
558
|
+
return (index.h("li", { key: page }, index.h("button", { part: "page", class: { page: true, active: page === this.effectiveCurrent }, "aria-label": `Página ${page}`, "aria-current": page === this.effectiveCurrent ? 'page' : null, type: "button", tabIndex: page === this.effectiveCurrent ? 0 : -1, onClick: this.handlePageClickFactory(page), onKeyDown: this.handlePageKeyDown, disabled: this.loading }, page)));
|
|
559
|
+
}
|
|
560
|
+
getEllipsisRangeKey(position, from, to) {
|
|
561
|
+
return `${position}:${from}:${to}`;
|
|
562
|
+
}
|
|
563
|
+
resetAllEllipsisScrollOffsets() {
|
|
564
|
+
this.pendingEllipsisFocus = null;
|
|
565
|
+
if (Object.keys(this.ellipsisScrollOffsets).length === 0)
|
|
566
|
+
return;
|
|
567
|
+
this.ellipsisScrollOffsets = {};
|
|
568
|
+
}
|
|
569
|
+
resetEllipsisScrollOffset(key) {
|
|
570
|
+
if (this.pendingEllipsisFocus?.key === key) {
|
|
571
|
+
this.pendingEllipsisFocus = null;
|
|
572
|
+
}
|
|
573
|
+
if (!(key in this.ellipsisScrollOffsets))
|
|
574
|
+
return;
|
|
575
|
+
const nextOffsets = { ...this.ellipsisScrollOffsets };
|
|
576
|
+
delete nextOffsets[key];
|
|
577
|
+
this.ellipsisScrollOffsets = nextOffsets;
|
|
578
|
+
}
|
|
579
|
+
getEllipsisMetrics(key, totalItems) {
|
|
580
|
+
const itemHeight = this.ellipsisItemHeight;
|
|
581
|
+
const safeTotalItems = Math.max(0, totalItems);
|
|
582
|
+
const shouldVirtualize = safeTotalItems > Pagination.ELLIPSIS_VISIBLE_ITEMS;
|
|
583
|
+
const visibleItems = Math.min(safeTotalItems, Pagination.ELLIPSIS_VISIBLE_ITEMS);
|
|
584
|
+
const viewportHeight = visibleItems * itemHeight;
|
|
585
|
+
const maxScrollTop = Math.max(0, safeTotalItems * itemHeight - viewportHeight);
|
|
586
|
+
const storedScrollTop = shouldVirtualize ? (this.ellipsisScrollOffsets[key] ?? 0) : 0;
|
|
587
|
+
const scrollTop = Math.min(Math.max(0, storedScrollTop), maxScrollTop);
|
|
588
|
+
if (safeTotalItems === 0) {
|
|
589
|
+
return {
|
|
590
|
+
shouldVirtualize,
|
|
591
|
+
visibleItems,
|
|
592
|
+
scrollTop: 0,
|
|
593
|
+
renderedStartIndex: 0,
|
|
594
|
+
renderedEndIndex: -1,
|
|
595
|
+
viewportHeight,
|
|
596
|
+
};
|
|
597
|
+
}
|
|
598
|
+
const firstVisibleIndex = Math.min(safeTotalItems - 1, Math.floor(scrollTop / itemHeight));
|
|
599
|
+
const lastVisibleIndex = shouldVirtualize
|
|
600
|
+
? Math.min(safeTotalItems - 1, Math.ceil((scrollTop + viewportHeight) / itemHeight) - 1)
|
|
601
|
+
: safeTotalItems - 1;
|
|
602
|
+
const renderedStartIndex = shouldVirtualize
|
|
603
|
+
? Math.max(0, Math.min(safeTotalItems - 1, firstVisibleIndex - Pagination.ELLIPSIS_OVERSCAN))
|
|
604
|
+
: 0;
|
|
605
|
+
const renderedEndIndex = shouldVirtualize
|
|
606
|
+
? Math.max(renderedStartIndex, Math.min(safeTotalItems - 1, lastVisibleIndex + Pagination.ELLIPSIS_OVERSCAN))
|
|
607
|
+
: safeTotalItems - 1;
|
|
608
|
+
return {
|
|
609
|
+
shouldVirtualize,
|
|
610
|
+
visibleItems,
|
|
611
|
+
scrollTop,
|
|
612
|
+
renderedStartIndex,
|
|
613
|
+
renderedEndIndex,
|
|
614
|
+
viewportHeight,
|
|
615
|
+
};
|
|
616
|
+
}
|
|
617
|
+
setEllipsisScrollOffset(key, scrollTop, totalItems) {
|
|
618
|
+
const viewportHeight = Math.min(totalItems ?? 0, Pagination.ELLIPSIS_VISIBLE_ITEMS) * this.ellipsisItemHeight;
|
|
619
|
+
const maxScrollTop = totalItems === undefined
|
|
620
|
+
? Number.POSITIVE_INFINITY
|
|
621
|
+
: Math.max(0, totalItems * this.ellipsisItemHeight - viewportHeight);
|
|
622
|
+
const nextScrollTop = Math.min(Math.max(0, scrollTop), maxScrollTop);
|
|
623
|
+
if ((this.ellipsisScrollOffsets[key] ?? 0) === nextScrollTop)
|
|
624
|
+
return;
|
|
625
|
+
this.ellipsisScrollOffsets = {
|
|
626
|
+
...this.ellipsisScrollOffsets,
|
|
627
|
+
[key]: nextScrollTop,
|
|
628
|
+
};
|
|
629
|
+
}
|
|
630
|
+
getEllipsisListElement(key) {
|
|
631
|
+
return (this.el.shadowRoot?.querySelector(`.pagination-ellipsis[data-ellipsis-key="${key}"] br-list`) ?? null);
|
|
632
|
+
}
|
|
633
|
+
focusEllipsisItemNow(key, pageIndex) {
|
|
634
|
+
const item = this.el.shadowRoot?.querySelector(`.pagination-ellipsis[data-ellipsis-key="${key}"] br-item[data-page-index="${pageIndex}"]`);
|
|
635
|
+
if (item === null || item === undefined)
|
|
636
|
+
return false;
|
|
637
|
+
if ('setFocus' in item) {
|
|
638
|
+
void item.setFocus();
|
|
639
|
+
return true;
|
|
640
|
+
}
|
|
641
|
+
item.focus();
|
|
642
|
+
return true;
|
|
643
|
+
}
|
|
644
|
+
flushPendingEllipsisFocus() {
|
|
645
|
+
const pendingFocus = this.pendingEllipsisFocus;
|
|
646
|
+
if (pendingFocus === null)
|
|
647
|
+
return;
|
|
648
|
+
const list = this.getEllipsisListElement(pendingFocus.key);
|
|
649
|
+
if (list === null)
|
|
650
|
+
return;
|
|
651
|
+
list.scrollTop = pendingFocus.scrollTop;
|
|
652
|
+
if (!this.focusEllipsisItemNow(pendingFocus.key, pendingFocus.pageIndex)) {
|
|
653
|
+
return;
|
|
654
|
+
}
|
|
655
|
+
this.pendingEllipsisFocus = null;
|
|
656
|
+
}
|
|
657
|
+
ensureEllipsisItemVisible(key, totalItems, pageIndex) {
|
|
658
|
+
const { scrollTop, viewportHeight } = this.getEllipsisMetrics(key, totalItems);
|
|
659
|
+
const itemHeight = this.ellipsisItemHeight;
|
|
660
|
+
const maxScrollTop = Math.max(0, totalItems * itemHeight - viewportHeight);
|
|
661
|
+
const itemTop = pageIndex * itemHeight;
|
|
662
|
+
const itemBottom = itemTop + itemHeight;
|
|
663
|
+
let nextScrollTop = scrollTop;
|
|
664
|
+
if (itemTop < scrollTop) {
|
|
665
|
+
nextScrollTop = itemTop;
|
|
666
|
+
}
|
|
667
|
+
else if (itemBottom > scrollTop + viewportHeight) {
|
|
668
|
+
nextScrollTop = itemBottom - viewportHeight;
|
|
669
|
+
}
|
|
670
|
+
nextScrollTop = Math.min(Math.max(0, nextScrollTop), maxScrollTop);
|
|
671
|
+
if (nextScrollTop !== scrollTop) {
|
|
672
|
+
this.pendingEllipsisFocus = {
|
|
673
|
+
key,
|
|
674
|
+
pageIndex,
|
|
675
|
+
scrollTop: nextScrollTop,
|
|
676
|
+
};
|
|
677
|
+
this.setEllipsisScrollOffset(key, nextScrollTop, totalItems);
|
|
678
|
+
return;
|
|
679
|
+
}
|
|
680
|
+
this.focusEllipsisItemNow(key, pageIndex);
|
|
681
|
+
}
|
|
682
|
+
getEllipsisBoundaryNavigationIndex(eventKey, pageIndex, totalItems, visibleItems, renderedStartIndex, renderedEndIndex) {
|
|
683
|
+
if (eventKey === 'Home')
|
|
684
|
+
return 0;
|
|
685
|
+
if (eventKey === 'End')
|
|
686
|
+
return totalItems - 1;
|
|
687
|
+
if (eventKey === 'PageDown')
|
|
688
|
+
return Math.min(totalItems - 1, pageIndex + visibleItems);
|
|
689
|
+
if (eventKey === 'PageUp')
|
|
690
|
+
return Math.max(0, pageIndex - visibleItems);
|
|
691
|
+
if (eventKey === 'ArrowDown') {
|
|
692
|
+
if (pageIndex === totalItems - 1)
|
|
693
|
+
return pageIndex;
|
|
694
|
+
if (pageIndex + 1 > renderedEndIndex)
|
|
695
|
+
return pageIndex + 1;
|
|
696
|
+
}
|
|
697
|
+
if (eventKey === 'ArrowUp') {
|
|
698
|
+
if (pageIndex === 0)
|
|
699
|
+
return pageIndex;
|
|
700
|
+
if (pageIndex - 1 < renderedStartIndex)
|
|
701
|
+
return pageIndex - 1;
|
|
702
|
+
}
|
|
703
|
+
return null;
|
|
704
|
+
}
|
|
705
|
+
handleEllipsisEscape(item, key) {
|
|
706
|
+
this.resetEllipsisScrollOffset(key);
|
|
707
|
+
const dropdown = item.closest('br-dropdown');
|
|
708
|
+
void dropdown?.hide();
|
|
709
|
+
}
|
|
710
|
+
handleEllipsisBoundaryNavigation(event, key, totalItems, pageIndex) {
|
|
711
|
+
const { visibleItems, renderedStartIndex, renderedEndIndex } = this.getEllipsisMetrics(key, totalItems);
|
|
712
|
+
const nextIndex = this.getEllipsisBoundaryNavigationIndex(event.key, pageIndex, totalItems, visibleItems, renderedStartIndex, renderedEndIndex);
|
|
713
|
+
if (nextIndex === null)
|
|
714
|
+
return;
|
|
715
|
+
event.preventDefault();
|
|
716
|
+
event.stopImmediatePropagation();
|
|
717
|
+
if (nextIndex === pageIndex)
|
|
718
|
+
return;
|
|
719
|
+
this.ensureEllipsisItemVisible(key, totalItems, nextIndex);
|
|
720
|
+
}
|
|
721
|
+
renderEllipsis(from, to, position) {
|
|
722
|
+
if (to < from)
|
|
723
|
+
return null;
|
|
724
|
+
const totalItems = to - from + 1;
|
|
725
|
+
const key = this.getEllipsisRangeKey(position, from, to);
|
|
726
|
+
const { shouldVirtualize, renderedStartIndex, renderedEndIndex, viewportHeight } = this.getEllipsisMetrics(key, totalItems);
|
|
727
|
+
const items = [];
|
|
728
|
+
for (let pageIndex = renderedStartIndex; pageIndex <= renderedEndIndex; pageIndex++) {
|
|
729
|
+
const page = from + pageIndex;
|
|
730
|
+
items.push(index.h("br-item", { key: `ellipsis-item-${key}-${page}`, "data-page-index": pageIndex, "prop:density": this.effectiveDensity, isButton: true, role: "menuitem", "aria-posinset": pageIndex + 1, "aria-setsize": totalItems, onBrDidClick: this.handleEllipsisItemClickFactory(page), onKeyDown: this.handleEllipsisItemKeyDownFactory(key, totalItems), "aria-label": `Página ${page}` }, page));
|
|
731
|
+
}
|
|
732
|
+
const topSpacerHeight = renderedStartIndex * this.ellipsisItemHeight;
|
|
733
|
+
const bottomSpacerHeight = Math.max(0, totalItems - renderedEndIndex - 1) * this.ellipsisItemHeight;
|
|
734
|
+
return (index.h("li", { class: "pagination-ellipsis", part: "ellipsis", key: `ellipsis-${key}`, "data-ellipsis-key": key, "data-ellipsis-position": position }, index.h("br-dropdown", null, index.h("br-button", { part: "ellipsis", exportparts: "button: ellipsis-button", slot: "trigger", shape: "circle", density: this.effectiveDensity, type: "button", "prop:ariaLabel": this.ellipsisLabel, tabIndex: -1, disabled: this.loading, onClick: () => {
|
|
735
|
+
this.resetEllipsisScrollOffset(key);
|
|
736
|
+
}, onKeyDown: this.handlePageKeyDown }, index.h("br-icon", { "attr:iconName": "fa-solid:ellipsis-h", width: "16", height: "16", "aria-hidden": "true" }), index.h("span", { class: "visually-hidden" }, this.ellipsisLabel)), index.h("br-list", { class: { 'has-scroll': shouldVirtualize, 'is-virtualized': shouldVirtualize }, density: this.effectiveDensity, slot: "target", role: "menu", "aria-label": `Páginas ocultas de ${from} até ${to}`, "aria-orientation": "vertical", onScroll: shouldVirtualize ? this.handleEllipsisScrollFactory(key, totalItems) : undefined, style: shouldVirtualize ? { maxHeight: `${viewportHeight}px` } : undefined }, shouldVirtualize && topSpacerHeight > 0 ? (index.h("div", { class: "pagination-ellipsis-virtual-spacer", role: "presentation", "aria-hidden": "true", style: { height: `${topSpacerHeight}px` } })) : null, items, shouldVirtualize && bottomSpacerHeight > 0 ? (index.h("div", { class: "pagination-ellipsis-virtual-spacer", role: "presentation", "aria-hidden": "true", style: { height: `${bottomSpacerHeight}px` } })) : null))));
|
|
737
|
+
}
|
|
738
|
+
renderPagesSmall(total, current) {
|
|
739
|
+
const nodes = [];
|
|
740
|
+
if (total <= 3) {
|
|
741
|
+
for (let p = 1; p <= total; p++)
|
|
742
|
+
nodes.push(this.renderPageButton(p));
|
|
743
|
+
return nodes;
|
|
744
|
+
}
|
|
745
|
+
if (current <= 2) {
|
|
746
|
+
nodes.push(this.renderPageButton(1));
|
|
747
|
+
nodes.push(this.renderPageButton(2));
|
|
748
|
+
nodes.push(this.renderEllipsis(3, total - 1, 'start'));
|
|
749
|
+
nodes.push(this.renderPageButton(total));
|
|
750
|
+
return nodes;
|
|
751
|
+
}
|
|
752
|
+
if (current >= total - 1) {
|
|
753
|
+
nodes.push(this.renderPageButton(1));
|
|
754
|
+
nodes.push(this.renderEllipsis(2, total - 2, 'end'));
|
|
755
|
+
nodes.push(this.renderPageButton(total - 1));
|
|
756
|
+
nodes.push(this.renderPageButton(total));
|
|
757
|
+
return nodes;
|
|
758
|
+
}
|
|
759
|
+
nodes.push(this.renderPageButton(1));
|
|
760
|
+
nodes.push(this.renderEllipsis(2, current - 1, 'left'));
|
|
761
|
+
nodes.push(this.renderPageButton(current));
|
|
762
|
+
nodes.push(this.renderEllipsis(current + 1, total - 1, 'right'));
|
|
763
|
+
nodes.push(this.renderPageButton(total));
|
|
764
|
+
return nodes;
|
|
765
|
+
}
|
|
766
|
+
renderPagesStandard(total, current) {
|
|
767
|
+
const nodes = [];
|
|
768
|
+
if (total <= 7) {
|
|
769
|
+
for (let p = 1; p <= total; p++)
|
|
770
|
+
nodes.push(this.renderPageButton(p));
|
|
771
|
+
return nodes;
|
|
772
|
+
}
|
|
773
|
+
if (current <= 4) {
|
|
774
|
+
for (let p = 1; p <= 4; p++)
|
|
775
|
+
nodes.push(this.renderPageButton(p));
|
|
776
|
+
nodes.push(this.renderEllipsis(5, total - 1, 'start'));
|
|
777
|
+
nodes.push(this.renderPageButton(total));
|
|
778
|
+
return nodes;
|
|
779
|
+
}
|
|
780
|
+
if (current >= total - 3) {
|
|
781
|
+
nodes.push(this.renderPageButton(1));
|
|
782
|
+
nodes.push(this.renderEllipsis(2, total - 4, 'end'));
|
|
783
|
+
for (let p = total - 3; p <= total; p++)
|
|
784
|
+
nodes.push(this.renderPageButton(p));
|
|
785
|
+
return nodes;
|
|
786
|
+
}
|
|
787
|
+
nodes.push(this.renderPageButton(1));
|
|
788
|
+
nodes.push(this.renderEllipsis(2, current - 2, 'left'));
|
|
789
|
+
for (let p = current - 1; p <= current + 1; p++)
|
|
790
|
+
nodes.push(this.renderPageButton(p));
|
|
791
|
+
nodes.push(this.renderEllipsis(current + 2, total - 1, 'right'));
|
|
792
|
+
nodes.push(this.renderPageButton(total));
|
|
793
|
+
return nodes;
|
|
794
|
+
}
|
|
795
|
+
renderPages() {
|
|
796
|
+
const total = this.getDefaultTotalPages();
|
|
797
|
+
const current = this.effectiveCurrent;
|
|
798
|
+
return this.isSmall ? this.renderPagesSmall(total, current) : this.renderPagesStandard(total, current);
|
|
799
|
+
}
|
|
800
|
+
renderLoading() {
|
|
801
|
+
if (!this.loading)
|
|
802
|
+
return null;
|
|
803
|
+
return (index.h("span", { part: "loading", class: "pagination-loading", role: "status", "aria-live": "polite", "aria-label": "Carregando" }, index.h("slot", { name: "loading" }, index.h("br-loading", { size: "small", compact: true, label: "Carregando" }))));
|
|
804
|
+
}
|
|
805
|
+
getTotalPages() {
|
|
806
|
+
const items = this.effectiveTotalItems;
|
|
807
|
+
const perPage = this.effectivePerPage;
|
|
808
|
+
return Math.max(1, Math.ceil(items / perPage));
|
|
809
|
+
}
|
|
810
|
+
getRangeInfo() {
|
|
811
|
+
const total = this.effectiveTotalItems;
|
|
812
|
+
const perPage = this.effectivePerPage;
|
|
813
|
+
const current = this.effectiveCurrent;
|
|
814
|
+
if (total === 0)
|
|
815
|
+
return { start: 0, end: 0, total };
|
|
816
|
+
const start = (current - 1) * perPage + 1;
|
|
817
|
+
const end = Math.min(current * perPage, total);
|
|
818
|
+
return { start, end, total };
|
|
819
|
+
}
|
|
820
|
+
handleContextualSelectChange(event) {
|
|
821
|
+
const select = event
|
|
822
|
+
.composedPath()
|
|
823
|
+
.find((node) => node instanceof HTMLElement && node.tagName === 'BR-SELECT');
|
|
824
|
+
if (!(select instanceof HTMLElement) || select.tagName !== 'BR-SELECT')
|
|
825
|
+
return;
|
|
826
|
+
const container = select.parentElement;
|
|
827
|
+
if (container?.classList.contains('pagination-per-page'))
|
|
828
|
+
this.handlePerPageChange(event);
|
|
829
|
+
else if (container?.classList.contains('pagination-go-to-page'))
|
|
830
|
+
this.handleGoToPageChange(event);
|
|
831
|
+
}
|
|
832
|
+
renderPerPageDropdown() {
|
|
833
|
+
return (index.h("br-select", { part: "per-page", exportparts: "container: per-page-container, input: per-page-input, input-container: per-page-input-container, input-field: per-page-input-field, input-label: per-page-input-label, input-action: per-page-input-action, list: per-page-list", label: this.perPageLabel, isInline: true, inputWidth: "88px", borderless: true, density: this.effectiveDensity, disabled: this.loading, hideSearchIcon: true }, this.effectivePerPageOptions.map((perPageOption) => (index.h("br-select-option", { key: String(perPageOption), value: String(perPageOption), selected: perPageOption === this.effectivePerPage }, perPageOption)))));
|
|
834
|
+
}
|
|
835
|
+
renderPerPageSelect() {
|
|
836
|
+
return (index.h("div", { class: "pagination-per-page", part: "per-page" }, this.renderPerPageDropdown()));
|
|
837
|
+
}
|
|
838
|
+
renderGoToSelect() {
|
|
839
|
+
const totalPages = this.getTotalPages();
|
|
840
|
+
const largePageSet = totalPages > Pagination.LARGE_PAGE_THRESHOLD;
|
|
841
|
+
const goToInputWidth = `${Math.max(88, String(totalPages).length * 16 + 48)}px`;
|
|
842
|
+
return (index.h("div", { class: "pagination-go-to-page d-none d-sm-flex" }, index.h("br-select", { part: "go-to", exportparts: "container: go-to-container, input: go-to-input, input-container: go-to-input-container, input-field: go-to-input-field, input-label: go-to-input-label, input-action: go-to-input-action, list: go-to-list", label: this.goToPageLabel, options: largePageSet
|
|
843
|
+
? this.getWindowedGoToOptions(totalPages, this.goToSearchTerm)
|
|
844
|
+
: this.goToOptionsReady
|
|
845
|
+
? this.getGoToOptions(totalPages)
|
|
846
|
+
: this.getCurrentGoToOption(totalPages), onOpened: this.handleGoToSelectOpened, onClosed: () => (this.goToSearchTerm = ''), onBrSelectSearch: (event) => (this.goToSearchTerm = event.detail.query), value: String(this.effectiveCurrent), isInline: true, inputWidth: goToInputWidth, density: this.effectiveDensity, "visible-items": 7, filterable: true, searchMode: largePageSet ? 'remote' : 'local', borderless: true, disabled: this.loading, hideSearchIcon: true })));
|
|
847
|
+
}
|
|
848
|
+
getWindowedGoToOptions(totalPages, query) {
|
|
849
|
+
const parsed = Number.parseInt(query.trim(), 10);
|
|
850
|
+
const center = Number.isInteger(parsed) && parsed >= 1 && parsed <= totalPages ? parsed : this.effectiveCurrent;
|
|
851
|
+
const radius = query.trim() ? 10 : 50;
|
|
852
|
+
const pages = new Set([1, totalPages]);
|
|
853
|
+
if (!query.trim())
|
|
854
|
+
pages.add(Math.min(Math.max(this.effectiveCurrent, 1), totalPages));
|
|
855
|
+
for (let page = center - radius; page <= center + radius; page++) {
|
|
856
|
+
if (page >= 1 && page <= totalPages)
|
|
857
|
+
pages.add(page);
|
|
858
|
+
}
|
|
859
|
+
if (query.trim() && (!Number.isInteger(parsed) || parsed < 1 || parsed > totalPages))
|
|
860
|
+
return [];
|
|
861
|
+
return [...pages]
|
|
862
|
+
.sort((a, b) => a - b)
|
|
863
|
+
.map((page) => ({ value: String(page), label: String(page), selected: page === this.effectiveCurrent }));
|
|
864
|
+
}
|
|
865
|
+
getCurrentGoToOption(totalPages) {
|
|
866
|
+
const current = Math.min(Math.max(this.effectiveCurrent, 1), totalPages);
|
|
867
|
+
return [{ value: String(current), label: String(current), selected: true }];
|
|
868
|
+
}
|
|
869
|
+
getGoToOptions(totalPages) {
|
|
870
|
+
if (this.goToOptionsCache !== null && this.goToOptionsCache.length === totalPages) {
|
|
871
|
+
return this.goToOptionsCache;
|
|
872
|
+
}
|
|
873
|
+
this.goToOptionsCache = Array.from({ length: totalPages }, (_, index) => {
|
|
874
|
+
const page = index + 1;
|
|
875
|
+
return { value: String(page), label: String(page) };
|
|
876
|
+
});
|
|
877
|
+
return this.goToOptionsCache;
|
|
878
|
+
}
|
|
879
|
+
renderContextual() {
|
|
880
|
+
const { start, end, total } = this.getRangeInfo();
|
|
881
|
+
const totalPages = this.getTotalPages();
|
|
882
|
+
return (index.h("nav", { part: "nav", class: this.getCssClassMap(), "aria-busy": this.loading ? 'true' : null, "aria-label": this.getComputedNavAriaLabel(), tabIndex: -1, "data-total": total, "data-current": this.effectiveCurrent, "data-per-page": this.effectivePerPage, id: this.customId }, index.h("div", { class: "pagination-leading" }, this.renderPerPageSelect(), index.h("span", { class: "br-divider pagination-divider d-none d-sm-block" }), index.h("div", { class: "pagination-information d-none d-sm-flex", "aria-live": "polite" }, index.h("slot", { name: "pagination-info" }, index.h("span", { class: "current" }, start), "-", index.h("span", { class: "per-page" }, end), "\u00A0de\u00A0", index.h("span", { class: "total" }, total), "\u00A0", this.itemsText), this.renderLoading())), index.h("div", { class: "pagination-trailing" }, this.renderGoToSelect(), index.h("span", { class: "br-divider pagination-divider d-none d-sm-block" }), index.h("div", { class: "pagination-arrows" }, index.h("br-button", { part: "prev-button", exportparts: "button: prev-button-inner", shape: "circle", density: this.effectiveDensity, type: "button", "data-previous-page": true, "prop:ariaLabel": this.previousLabel, onClick: this.handlePrevClick, disabled: this.loading || this.effectiveCurrent <= 1 }, index.h("br-icon", { "attr:iconName": "fa-solid:angle-left", width: "16", height: "16", "aria-hidden": "true" }), index.h("span", { class: "visually-hidden" }, this.previousLabel)), index.h("br-button", { part: "next-button", exportparts: "button: next-button-inner", shape: "circle", density: this.effectiveDensity, type: "button", "data-next-page": true, "prop:ariaLabel": this.nextLabel, onClick: this.handleNextClick, disabled: this.loading || this.effectiveCurrent >= totalPages }, index.h("br-icon", { "attr:iconName": "fa-solid:angle-right", width: "16", height: "16", "aria-hidden": "true" }), index.h("span", { class: "visually-hidden" }, this.nextLabel)))), index.h("span", { class: "visually-hidden", "aria-live": "polite" }, "P\u00E1gina ", this.effectiveCurrent, " de ", totalPages)));
|
|
883
|
+
}
|
|
884
|
+
render() {
|
|
885
|
+
if (this.effectiveVariant === 'contextual') {
|
|
886
|
+
return index.h(index.Host, null, this.renderContextual());
|
|
887
|
+
}
|
|
888
|
+
const totalPages = this.getDefaultTotalPages();
|
|
889
|
+
return (index.h(index.Host, null, index.h("nav", { part: "nav", class: this.getCssClassMap(), "aria-busy": this.loading ? 'true' : null, "aria-label": this.getComputedNavAriaLabel(), tabIndex: -1, "data-total": totalPages, "data-current": this.effectiveCurrent, id: this.customId }, index.h("ul", { part: "list" }, index.h("li", null, index.h("br-button", { part: "prev-button", exportparts: "button: prev-button-inner", shape: "circle", density: this.effectiveDensity, type: "button", "data-previous-page": true, "prop:ariaLabel": this.previousLabel, onClick: this.handlePrevClick, disabled: this.loading || this.effectiveCurrent <= 1 }, index.h("br-icon", { "attr:iconName": "fa-solid:angle-left", width: "16", height: "16", "aria-hidden": "true" }), index.h("span", { class: "visually-hidden" }, this.previousLabel))), this.renderPages(), this.loading ? (index.h("li", { part: "loading", class: "pagination-loading" }, this.renderLoading())) : null, index.h("li", null, index.h("br-button", { part: "next-button", exportparts: "button: next-button-inner", shape: "circle", density: this.effectiveDensity, type: "button", "data-next-page": true, "prop:ariaLabel": this.nextLabel, onClick: this.handleNextClick, disabled: this.loading || this.effectiveCurrent >= totalPages }, index.h("br-icon", { "attr:iconName": "fa-solid:angle-right", width: "16", height: "16", "aria-hidden": "true" }), index.h("span", { class: "visually-hidden" }, this.nextLabel)))), index.h("span", { class: "visually-hidden", "aria-live": "polite" }, "P\u00E1gina ", this.effectiveCurrent, " de ", totalPages))));
|
|
890
|
+
}
|
|
891
|
+
get el() { return index.getElement(this); }
|
|
892
|
+
static get watchers() { return {
|
|
893
|
+
"total": [{
|
|
894
|
+
"handleTotalChange": 0
|
|
895
|
+
}],
|
|
896
|
+
"totalPages": [{
|
|
897
|
+
"handleTotalPagesChange": 0
|
|
898
|
+
}],
|
|
899
|
+
"current": [{
|
|
900
|
+
"handleCurrentChange": 0
|
|
901
|
+
}],
|
|
902
|
+
"currentPage": [{
|
|
903
|
+
"handleCurrentPageChange": 0
|
|
904
|
+
}],
|
|
905
|
+
"perPage": [{
|
|
906
|
+
"handlePerPagePropChange": 0
|
|
907
|
+
}],
|
|
908
|
+
"totalItems": [{
|
|
909
|
+
"handleTotalItemsChange": 0
|
|
910
|
+
}],
|
|
911
|
+
"density": [{
|
|
912
|
+
"handleDensityChange": 0
|
|
913
|
+
}]
|
|
914
|
+
}; }
|
|
915
|
+
};
|
|
916
|
+
Pagination.ELLIPSIS_VISIBLE_ITEMS = 4;
|
|
917
|
+
Pagination.ELLIPSIS_ITEM_HEIGHT_FALLBACK = 56;
|
|
918
|
+
Pagination.ELLIPSIS_OVERSCAN = 1;
|
|
919
|
+
Pagination.LARGE_PAGE_THRESHOLD = 10000;
|
|
920
|
+
Pagination.style = paginationCss();
|
|
921
|
+
|
|
922
|
+
const selectCss = () => `*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media (min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media (min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@media (min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{flex-basis:25%;max-width:25%}}@media (min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-out{animation-timing-function:cubic-bezier(0, 0, 0.58, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fast{animation-duration:var(--duration-fast)}.slow{animation-duration:var(--duration-slow)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.pt-half{padding-top:var(--spacing-scale-half) !important}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}fieldset[disabled]{opacity:1}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media (min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media (min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background:var(--background);--table-color:var(--color);--table-border-color:var(--gray-20);--table-border-style:solid;--table-border-width:1px;--table-hover:var(--color-rgb);--table-padding:var(--spacing-scale-3x);--table-font-weight:var(--font-weight-medium);--table-th-background:var(--background-alternative);--table-th-font-weight:var(--font-weight-semi-bold);--table-row-size:var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}mark,.mark{background:var(--red-warm-vivid-10);color:var(--color)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}@media (prefers-reduced-motion: reduce){:host,:host::before,:host::after,:host *,:host *::before,:host *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}}:host-context([data-wbc-reduced-motion=true])::before,:host-context([data-wbc-reduced-motion=true])::after,:host-context([data-wbc-reduced-motion=true]) *,:host-context([data-wbc-reduced-motion=true]) *::before,:host-context([data-wbc-reduced-motion=true]) *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}.br-select{--select-divider:1px solid var(--color-secondary-04);--select-shadow:var(--surface-shadow-md)}.br-select .br-input input{padding-right:29px;text-overflow:ellipsis}.br-select .br-input input::after{bottom:0;padding:0 5px;position:absolute;right:0}.br-select{max-width:400px;min-width:100px;position:relative}.br-select .br-list{background:var(--bg-color);box-shadow:var(--select-shadow);display:none;margin-top:-2px;max-height:404px;overflow:auto;position:absolute;resize:none;width:100%;z-index:1}.br-select .br-list::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-select .br-list::-webkit-scrollbar-track{background:var(--gray-10)}.br-select .br-list::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-select .br-list:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-select .br-list:focus,.br-select .br-list:active{color:var(--color-secondary-09);outline:none}.br-select .br-list:hover::-webkit-scrollbar-thumb{background:var(--color-secondary-07)}.br-select .br-list[expanded]{display:block}.br-select .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x)}.br-select .br-item .content{padding:0}.br-select .br-item .br-checkbox,.br-select .br-item .br-radio{--item-padding-x:var(--spacing-scale-2x);--item-padding-y:var(--spacing-scale-2x)}.br-select .br-item .br-checkbox input:hover:not(:disabled)+label::before,.br-select .br-item .br-radio input:hover:not(:disabled)+label::before{background-image:none}.br-select .br-item .br-checkbox input+label,.br-select .br-item .br-radio input+label{padding-left:calc(var(--checkbox-padding) + var(--checkbox-size) + var(--item-padding-x))}.br-select .br-item .br-radio input+label{color:var(--text-color);display:block;height:auto;min-height:0;padding:var(--item-padding)}.br-select .br-item .br-radio input+label::before,.br-select .br-item .br-radio input+label::after{content:none}.br-select .br-item:not(:last-child){border-bottom:var(--select-divider)}.br-select .br-item:not([disabled]){--focus-offset:calc(var(--spacing-scale-half) * -1)}.br-select .br-item:not([disabled]):focus{outline:none}.br-select .br-item:not([disabled]).focus-visible,.br-select .br-item:not([disabled]):focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-select .br-item:not([disabled]):not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-select .br-item.selected,.br-select .br-item[selected]{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.br-select .br-item.selected:focus,.br-select .br-item[selected]:focus{outline:none}.br-select .br-item.selected.focus-visible,.br-select .br-item.selected:focus-visible,.br-select .br-item[selected].focus-visible,.br-select .br-item[selected]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-select .br-item.selected:not(:disabled):hover,.br-select .br-item[selected]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-select .br-item.disabled{line-height:calc(var(--font-line-height-high)*2);padding-left:calc(var(--item-padding) + var(--spacing-scale-base))}.br-select.inverted .br-input,.br-select.inverted .br-input label,.br-select.dark-mode .br-input,.br-select.dark-mode .br-input label{--color:var(--color-dark);--focus-color:var(--focus-color-dark)}:host{box-sizing:border-box;display:block;max-width:100%;width:100%}.br-select{box-sizing:border-box;min-width:0;position:relative;width:100%;max-width:100%}:host([hide-search-icon]) br-select-input::part(icon){display:none}:host([multiple]) .br-select{min-width:0}`;
|
|
923
|
+
|
|
924
|
+
const SELECT_SEARCH_MODES = ['local', 'remote'];
|
|
925
|
+
const SELECT_AUTOCOMPLETE_VALUES = ['on', 'off'];
|
|
926
|
+
const Select = class {
|
|
927
|
+
constructor(hostRef) {
|
|
928
|
+
index.registerInstance(this, hostRef);
|
|
929
|
+
this.brSelectStateChange = index.createEvent(this, "brSelectStateChange", 7);
|
|
930
|
+
this.valueChange = index.createEvent(this, "valueChange", 7);
|
|
931
|
+
this.optionHover = index.createEvent(this, "optionHover", 7);
|
|
932
|
+
this.brSelectSearch = index.createEvent(this, "brSelectSearch", 6);
|
|
933
|
+
this.opened = index.createEvent(this, "opened", 7);
|
|
934
|
+
this.closed = index.createEvent(this, "closed", 7);
|
|
935
|
+
this.brSelectValidationChange = index.createEvent(this, "brSelectValidationChange", 7);
|
|
936
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
937
|
+
this.elementInternals = hostRef.$hostElement$["s-ei"];
|
|
938
|
+
}
|
|
939
|
+
else {
|
|
940
|
+
this.elementInternals = hostRef.$hostElement$.attachInternals();
|
|
941
|
+
hostRef.$hostElement$["s-ei"] = this.elementInternals;
|
|
942
|
+
}
|
|
943
|
+
/**
|
|
944
|
+
* Remove a borda do input quando o componente não está em foco.
|
|
945
|
+
*
|
|
946
|
+
* @default false
|
|
947
|
+
*/
|
|
948
|
+
this.borderless = false;
|
|
949
|
+
/**
|
|
950
|
+
* Desativa toda a interação do select.
|
|
951
|
+
*
|
|
952
|
+
* @default false
|
|
953
|
+
*/
|
|
954
|
+
this.disabled = false;
|
|
955
|
+
/**
|
|
956
|
+
* Define a densidade visual compartilhada pelo campo e pela lista de opções.
|
|
957
|
+
* Aceita `small`, `medium` ou `large`. Valores inválidos usam `medium`.
|
|
958
|
+
* A opção sintética de selecionar todos permanece com densidade `small`.
|
|
959
|
+
*
|
|
960
|
+
* @default 'medium'
|
|
961
|
+
*/
|
|
962
|
+
this.density = 'medium';
|
|
963
|
+
/**
|
|
964
|
+
* Exibe label e campo na mesma linha.
|
|
965
|
+
*
|
|
966
|
+
* @default false
|
|
967
|
+
* @deprecated Use `inline`.
|
|
968
|
+
*/
|
|
969
|
+
this.isInline = false;
|
|
970
|
+
/**
|
|
971
|
+
* Habilita o modo de seleção múltipla.
|
|
972
|
+
*
|
|
973
|
+
* @default false
|
|
974
|
+
* @deprecated Use `multiple`.
|
|
975
|
+
*/
|
|
976
|
+
this.isMultiple = false;
|
|
977
|
+
/**
|
|
978
|
+
* Mantém a lista aberta depois de uma seleção.
|
|
979
|
+
*
|
|
980
|
+
* @default false
|
|
981
|
+
* @deprecated O comportamento atual usa o fechamento padrão do select; mantenha esta prop
|
|
982
|
+
* apenas para compatibilidade com integrações legadas.
|
|
983
|
+
*/
|
|
984
|
+
this.keepOpenOnSelect = false;
|
|
985
|
+
/**
|
|
986
|
+
* Define quantas linhas visuais ficam visíveis na janela da lista.
|
|
987
|
+
* Cabeçalhos de grupo também ocupam uma linha quando existem.
|
|
988
|
+
* Deve ser um inteiro positivo; valores inválidos usam 6.
|
|
989
|
+
*
|
|
990
|
+
* @default 6
|
|
991
|
+
*/
|
|
992
|
+
this.visibleItems = 6;
|
|
993
|
+
/**
|
|
994
|
+
* Informa a altura base de cada opção ou cabeçalho para o cálculo de virtual scroll.
|
|
995
|
+
* Deve ser um número finito positivo; valores inválidos usam 40.
|
|
996
|
+
*
|
|
997
|
+
* @default 40
|
|
998
|
+
*/
|
|
999
|
+
this.itemHeight = 40;
|
|
1000
|
+
/**
|
|
1001
|
+
* Controla a largura do campo de entrada.
|
|
1002
|
+
*
|
|
1003
|
+
* @type {string}
|
|
1004
|
+
* @example '20rem'
|
|
1005
|
+
*/
|
|
1006
|
+
this.inputWidth = undefined;
|
|
1007
|
+
/**
|
|
1008
|
+
* Define quantas opções extras são renderizadas antes e depois da área visível no virtual scroll.
|
|
1009
|
+
* Deve ser um inteiro não negativo; valores inválidos usam 1.
|
|
1010
|
+
*
|
|
1011
|
+
* @default 1
|
|
1012
|
+
*/
|
|
1013
|
+
this.overscan = 1;
|
|
1014
|
+
/**
|
|
1015
|
+
* Oculta os divisores entre opções consecutivas, sem alterar a altura das linhas.
|
|
1016
|
+
* @default false
|
|
1017
|
+
*/
|
|
1018
|
+
this.hideDividers = false;
|
|
1019
|
+
/**
|
|
1020
|
+
* Controla o estado aberto/fechado da lista.
|
|
1021
|
+
*
|
|
1022
|
+
* @default false
|
|
1023
|
+
* @deprecated Use `open`.
|
|
1024
|
+
*/
|
|
1025
|
+
this.isOpen = false;
|
|
1026
|
+
/**
|
|
1027
|
+
* Valor público do select baseado nas opções atualmente selecionadas.
|
|
1028
|
+
*
|
|
1029
|
+
* @type {string | string[] | undefined}
|
|
1030
|
+
* @remarks Em modo múltiplo, o valor público é um array de strings.
|
|
1031
|
+
* @example
|
|
1032
|
+
* ```js
|
|
1033
|
+
* const select = document.querySelector('br-select');
|
|
1034
|
+
* select.multiple = true;
|
|
1035
|
+
* select.value = ['df', 'sp'];
|
|
1036
|
+
* ```
|
|
1037
|
+
*/
|
|
1038
|
+
this.value = '';
|
|
1039
|
+
/**
|
|
1040
|
+
* Texto exibido quando não há seleção.
|
|
1041
|
+
*
|
|
1042
|
+
* @type {string | undefined}
|
|
1043
|
+
*/
|
|
1044
|
+
this.placeholder = '';
|
|
1045
|
+
/**
|
|
1046
|
+
* Indica que o preenchimento do select é obrigatório.
|
|
1047
|
+
*
|
|
1048
|
+
* @default false
|
|
1049
|
+
*/
|
|
1050
|
+
this.required = false;
|
|
1051
|
+
/**
|
|
1052
|
+
* Rótulo apresentado para a opção de selecionar todos no modo múltiplo.
|
|
1053
|
+
*
|
|
1054
|
+
* @default 'Selecionar todos'
|
|
1055
|
+
*/
|
|
1056
|
+
this.selectAllLabel = Select.SELECT_ALL_LABEL;
|
|
1057
|
+
/**
|
|
1058
|
+
* Habilita a filtragem textual das opções por rótulo ou valor.
|
|
1059
|
+
*
|
|
1060
|
+
* @default true
|
|
1061
|
+
*/
|
|
1062
|
+
this.filterable = true;
|
|
1063
|
+
/**
|
|
1064
|
+
* Define se as opções são filtradas localmente ou fornecidas por uma busca remota.
|
|
1065
|
+
* Em `remote`, o componente emite `brSelectSearch` e exibe as opções recebidas
|
|
1066
|
+
* sem filtrá-las de novo pelo termo digitado; a aplicação deve buscar, validar e
|
|
1067
|
+
* aplicar a resposta com `setOptions()` ou re-renderizando os `br-select-option`.
|
|
1068
|
+
* A seleção é preservada mesmo quando não aparece na resposta seguinte.
|
|
1069
|
+
* @default 'local'
|
|
1070
|
+
*/
|
|
1071
|
+
this.searchMode = 'local';
|
|
1072
|
+
/**
|
|
1073
|
+
* Indica que uma busca remota de opções está pendente.
|
|
1074
|
+
* Enquanto ativo, a lista exibe o slot `loading` (padrão: "Pesquisando…") e novas
|
|
1075
|
+
* opções não podem ser selecionadas; a aplicação continua responsável por
|
|
1076
|
+
* debounce, cancelamento, erros e autenticação.
|
|
1077
|
+
* @default false
|
|
1078
|
+
*/
|
|
1079
|
+
this.loading = false;
|
|
1080
|
+
/**
|
|
1081
|
+
* Exibe a lupa mesmo quando o select não é filtrável; selects com `filterable`
|
|
1082
|
+
* já a exibem. A lupa é omitida quando o campo é estreito demais (menos de
|
|
1083
|
+
* 128px) para comportar lupa, valor e seta.
|
|
1084
|
+
*
|
|
1085
|
+
* @default false
|
|
1086
|
+
*/
|
|
1087
|
+
this.showSearchIcon = false;
|
|
1088
|
+
/**
|
|
1089
|
+
* Oculta a lupa mesmo quando `filterable` está ativo, sem desabilitar a busca.
|
|
1090
|
+
* Tem precedência visual sobre `showSearchIcon` e não altera o comportamento padrão.
|
|
1091
|
+
*
|
|
1092
|
+
* @default false
|
|
1093
|
+
*/
|
|
1094
|
+
this.hideSearchIcon = false;
|
|
1095
|
+
/**
|
|
1096
|
+
* Rótulo apresentado quando todas as opções já estão selecionadas no modo múltiplo.
|
|
1097
|
+
*
|
|
1098
|
+
* @default 'Desselecionar todos'
|
|
1099
|
+
*/
|
|
1100
|
+
this.unselectAllLabel = Select.DESELECT_ALL_LABEL;
|
|
1101
|
+
/**
|
|
1102
|
+
* Fornece opções como array ou JSON, além das opções projetadas por slot.
|
|
1103
|
+
* Use property binding para arrays em JavaScript e frameworks; no atributo
|
|
1104
|
+
* HTML, informe uma string JSON válida. Na inicialização, opções no slot têm
|
|
1105
|
+
* precedência quando existem. Depois de uma alteração nesta prop ou de uma
|
|
1106
|
+
* chamada a `setOptions()`, a coleção imperativa passa a ser a fonte de dados.
|
|
1107
|
+
* Não use em código novo. Declare `br-select-option` no slot padrão ou, para
|
|
1108
|
+
* respostas dinâmicas/remotas, atualize a coleção com `setOptions()`.
|
|
1109
|
+
*
|
|
1110
|
+
* @example
|
|
1111
|
+
* ```html
|
|
1112
|
+
* <!-- Compatibilidade legada; prefira elementos br-select-option. -->
|
|
1113
|
+
* <br-select options='[{"label":"Distrito Federal","value":"df"}]'></br-select>
|
|
1114
|
+
* ```
|
|
1115
|
+
* @deprecated Use `br-select-option` no slot padrão ou `setOptions()` para respostas dinâmicas/remotas.
|
|
1116
|
+
*/
|
|
1117
|
+
this.options = [];
|
|
1118
|
+
/** Identificador público do controle. */
|
|
1119
|
+
this.customId = id.generateUniqueId('br-select');
|
|
1120
|
+
/** Quantidade mínima de opções selecionadas no modo múltiplo. Deve ser um inteiro não negativo; valores inválidos usam 0. */
|
|
1121
|
+
this.minSelections = 0;
|
|
1122
|
+
/** Quantidade máxima de opções selecionadas no modo múltiplo. Deve ser um inteiro não negativo; valores inválidos usam 0. */
|
|
1123
|
+
this.maxSelections = 0;
|
|
1124
|
+
this.shouldRestoreSelectedOptionOnOpen = false;
|
|
1125
|
+
this.isSelectInputPointerDown = false;
|
|
1126
|
+
this.skipSelectInputClickToggle = false;
|
|
1127
|
+
this.pendingOptions = null;
|
|
1128
|
+
this.slotElement = null;
|
|
1129
|
+
this.handleSlotChange = () => this.slotReconciler.schedule();
|
|
1130
|
+
this.slotReconciler = ownership.createMicrotaskReconciler(() => this.syncOptionsFromSlot());
|
|
1131
|
+
this.lastEmittedStateKey = '';
|
|
1132
|
+
this.isStateChangeReady = false;
|
|
1133
|
+
this.isValueChangeReady = false;
|
|
1134
|
+
this.listboxId = `${this.customId}-listbox`;
|
|
1135
|
+
this.checkingValidity = false;
|
|
1136
|
+
this.showValidationErrors = false;
|
|
1137
|
+
this.validationErrorMessage = '';
|
|
1138
|
+
this.activeOptionIndex = -1;
|
|
1139
|
+
/**
|
|
1140
|
+
* Oculta o indicador visual da opção ativa após interação por ponteiro, como `:focus-visible`.
|
|
1141
|
+
* O índice ativo e o `aria-activedescendant` são preservados; o teclado volta a exibi-lo.
|
|
1142
|
+
*/
|
|
1143
|
+
this.isActiveIndicatorHidden = false;
|
|
1144
|
+
this.searchTerm = '';
|
|
1145
|
+
this.formDisabled = false;
|
|
1146
|
+
this.isValidating = false;
|
|
1147
|
+
this.validatorMessage = null;
|
|
1148
|
+
this.hasFeedbackSlot = false;
|
|
1149
|
+
this.hasValidationLoadingSlot = false;
|
|
1150
|
+
this.selectedValuesState = [];
|
|
1151
|
+
this.customValidationMessage = '';
|
|
1152
|
+
this.validationRunId = 0;
|
|
1153
|
+
this.lastAnnouncedOpen = false;
|
|
1154
|
+
this.isApplyingExternalValue = false;
|
|
1155
|
+
this.suppressValueChange = false;
|
|
1156
|
+
this.hasImperativeOptions = false;
|
|
1157
|
+
this.remoteSelectedOptions = new Map();
|
|
1158
|
+
this.selectionInitialized = false;
|
|
1159
|
+
this.typeAhead = '';
|
|
1160
|
+
this.lastTypeAheadTime = 0;
|
|
1161
|
+
this.selectedValues = [];
|
|
1162
|
+
/**
|
|
1163
|
+
* Sincroniza as opções declaradas no slot com a lista interna renderizada.
|
|
1164
|
+
*
|
|
1165
|
+
* @remarks
|
|
1166
|
+
* Esse passo mantém alinhados o estado visual da lista e o texto exibido no input
|
|
1167
|
+
* quando as opções são adicionadas, removidas ou alteradas dinamicamente.
|
|
1168
|
+
*/
|
|
1169
|
+
this.syncOptionsFromSlot = (updateDisplayValue = true) => {
|
|
1170
|
+
if (this.hasImperativeOptions)
|
|
1171
|
+
return;
|
|
1172
|
+
const nodes = this.slotElement?.assignedNodes({ flatten: true }) ?? Array.from(this.el.childNodes);
|
|
1173
|
+
const options = nodes.map((n) => this.nodeToOption(n)).filter((o) => Boolean(o));
|
|
1174
|
+
// Envia opções para o br-select-list
|
|
1175
|
+
if (this.selectListElement)
|
|
1176
|
+
this.selectListElement.options = this.getListOptions(options);
|
|
1177
|
+
if (updateDisplayValue)
|
|
1178
|
+
this.syncDisplayValue(options);
|
|
1179
|
+
};
|
|
1180
|
+
}
|
|
1181
|
+
formDisabledCallback(disabled) {
|
|
1182
|
+
this.formDisabled = disabled;
|
|
1183
|
+
}
|
|
1184
|
+
formResetCallback() {
|
|
1185
|
+
this.showValidationErrors = false;
|
|
1186
|
+
this.validationErrorMessage = '';
|
|
1187
|
+
this.validationRunId++;
|
|
1188
|
+
this.validatorMessage = null;
|
|
1189
|
+
this.customValidationMessage = '';
|
|
1190
|
+
this.applySelectedValue(this.initialValue);
|
|
1191
|
+
}
|
|
1192
|
+
formStateRestoreCallback(state) {
|
|
1193
|
+
if (typeof state !== 'string' || state === '')
|
|
1194
|
+
return;
|
|
1195
|
+
try {
|
|
1196
|
+
this.applySelectedValue(JSON.parse(state));
|
|
1197
|
+
}
|
|
1198
|
+
catch {
|
|
1199
|
+
this.applySelectedValue(state);
|
|
1200
|
+
}
|
|
1201
|
+
}
|
|
1202
|
+
get effectiveVisibleItems() {
|
|
1203
|
+
return props.resolveIntegerPropValue(this.el, 'visibleItems', this.visibleItems, 1, Number.MAX_SAFE_INTEGER, 6);
|
|
1204
|
+
}
|
|
1205
|
+
get effectiveDensity() {
|
|
1206
|
+
return props.resolveDensity(this.el, this.density);
|
|
1207
|
+
}
|
|
1208
|
+
get effectiveItemHeight() {
|
|
1209
|
+
return props.resolveNumberPropValue(this.el, 'itemHeight', this.itemHeight, 1, Number.MAX_SAFE_INTEGER, 40);
|
|
1210
|
+
}
|
|
1211
|
+
get effectiveOverscan() {
|
|
1212
|
+
return props.resolveIntegerPropValue(this.el, 'overscan', this.overscan, 0, Number.MAX_SAFE_INTEGER, 1);
|
|
1213
|
+
}
|
|
1214
|
+
/**
|
|
1215
|
+
* Termo repassado à lista. Ela só filtra no modo local; no remoto, usa o termo
|
|
1216
|
+
* apenas para exibir a mensagem de lista vazia.
|
|
1217
|
+
*/
|
|
1218
|
+
get listSearchTerm() {
|
|
1219
|
+
return this.filterable ? this.searchTerm : '';
|
|
1220
|
+
}
|
|
1221
|
+
get effectiveSearchMode() {
|
|
1222
|
+
return props.resolveAllowedPropValue(this.el, 'searchMode', this.searchMode, SELECT_SEARCH_MODES, 'local');
|
|
1223
|
+
}
|
|
1224
|
+
get effectiveMinSelections() {
|
|
1225
|
+
return props.resolveIntegerPropValue(this.el, 'minSelections', this.minSelections, 0, Number.MAX_SAFE_INTEGER, 0);
|
|
1226
|
+
}
|
|
1227
|
+
get effectiveAutocomplete() {
|
|
1228
|
+
return props.resolveAllowedPropValue(this.el, 'autocomplete', this.autocomplete, SELECT_AUTOCOMPLETE_VALUES, undefined, { allowUndefined: true });
|
|
1229
|
+
}
|
|
1230
|
+
get effectiveMaxSelections() {
|
|
1231
|
+
return props.resolveIntegerPropValue(this.el, 'maxSelections', this.maxSelections, 0, Number.MAX_SAFE_INTEGER, 0);
|
|
1232
|
+
}
|
|
1233
|
+
componentWillLoad() {
|
|
1234
|
+
this.hasFeedbackSlot = slot.hasNamedLightDomSlot(this.el, 'feedback');
|
|
1235
|
+
this.hasValidationLoadingSlot = slot.hasNamedLightDomSlot(this.el, 'validation-loading');
|
|
1236
|
+
this.setSelectionMode(this.effectiveMultiple);
|
|
1237
|
+
const initialOptions = this.getHostOptions();
|
|
1238
|
+
const propOptions = this.getOptionsProp();
|
|
1239
|
+
const sourceOptions = initialOptions.length === 0 && propOptions.length > 0 ? propOptions : initialOptions;
|
|
1240
|
+
this.setSelectedValues(this.valueFromPublicValue(this.value) ??
|
|
1241
|
+
sourceOptions.filter((option) => option.selected).map((option) => option.value));
|
|
1242
|
+
this.selectionInitialized = true;
|
|
1243
|
+
if (initialOptions.length === 0 && propOptions.length > 0) {
|
|
1244
|
+
this.pendingOptions = propOptions;
|
|
1245
|
+
this.syncDisplayValue(propOptions);
|
|
1246
|
+
}
|
|
1247
|
+
else {
|
|
1248
|
+
this.syncDisplayValue(initialOptions);
|
|
1249
|
+
}
|
|
1250
|
+
this.initialValue = Array.isArray(this.value) ? [...this.value] : this.value;
|
|
1251
|
+
this.syncFormState();
|
|
1252
|
+
}
|
|
1253
|
+
componentDidLoad() {
|
|
1254
|
+
this.lastEmittedStateKey = this.getStateChangeKey();
|
|
1255
|
+
this.isStateChangeReady = true;
|
|
1256
|
+
this.setSelectionMode(this.effectiveMultiple);
|
|
1257
|
+
// Inicializa sincronização de opções a partir do slot
|
|
1258
|
+
this.slotElement = this.el.shadowRoot?.querySelector('slot:not([name])');
|
|
1259
|
+
if (this.slotElement) {
|
|
1260
|
+
this.syncOptionsFromSlot(false);
|
|
1261
|
+
this.slotElement.addEventListener('slotchange', this.handleSlotChange);
|
|
1262
|
+
}
|
|
1263
|
+
if (this.pendingOptions && this.selectListElement) {
|
|
1264
|
+
this.selectListElement.options = this.getListOptions(this.pendingOptions);
|
|
1265
|
+
this.pendingOptions = null;
|
|
1266
|
+
}
|
|
1267
|
+
this.isValueChangeReady = true;
|
|
1268
|
+
this.lastAnnouncedOpen = this.effectiveOpen;
|
|
1269
|
+
if (this.effectiveOpen)
|
|
1270
|
+
this.attachBlockingSurfaceListener();
|
|
1271
|
+
this.updateValidity();
|
|
1272
|
+
}
|
|
1273
|
+
componentDidRender() {
|
|
1274
|
+
this.syncNativeSelectSelection();
|
|
1275
|
+
this.updateValidity();
|
|
1276
|
+
}
|
|
1277
|
+
disconnectedCallback() {
|
|
1278
|
+
this.slotReconciler.cancel();
|
|
1279
|
+
if (this.slotElement) {
|
|
1280
|
+
this.slotElement.removeEventListener('slotchange', this.handleSlotChange);
|
|
1281
|
+
this.slotElement = null;
|
|
1282
|
+
}
|
|
1283
|
+
this.detachBlockingSurfaceListener();
|
|
1284
|
+
}
|
|
1285
|
+
get effectiveMultiple() {
|
|
1286
|
+
return this.multiple ?? this.isMultiple;
|
|
1287
|
+
}
|
|
1288
|
+
get effectiveInline() {
|
|
1289
|
+
return this.inline ?? this.isInline;
|
|
1290
|
+
}
|
|
1291
|
+
get effectiveOpen() {
|
|
1292
|
+
return this.open ?? this.isOpen;
|
|
1293
|
+
}
|
|
1294
|
+
valueFromPublicValue(value) {
|
|
1295
|
+
if (this.effectiveMultiple)
|
|
1296
|
+
return Array.isArray(value) ? [...new Set(value.filter(Boolean))] : null;
|
|
1297
|
+
return typeof value === 'string' && value ? [value] : null;
|
|
1298
|
+
}
|
|
1299
|
+
setSelectedValues(values) {
|
|
1300
|
+
const next = [...new Set(values.filter(Boolean))];
|
|
1301
|
+
if (!this.effectiveMultiple && next.length > 1)
|
|
1302
|
+
next.splice(1);
|
|
1303
|
+
if (this.selectedValues.length === next.length &&
|
|
1304
|
+
this.selectedValues.every((value, index) => value === next[index]))
|
|
1305
|
+
return;
|
|
1306
|
+
this.selectedValues = next;
|
|
1307
|
+
this.selectedValuesState = next;
|
|
1308
|
+
}
|
|
1309
|
+
get canonicalSelectedValues() {
|
|
1310
|
+
return this.selectedValues;
|
|
1311
|
+
}
|
|
1312
|
+
applyCanonicalSelection(options, values = this.canonicalSelectedValues) {
|
|
1313
|
+
if (!this.selectionInitialized)
|
|
1314
|
+
return options.map((option) => ({ ...option }));
|
|
1315
|
+
const selected = new Set(values);
|
|
1316
|
+
return options.map((option) => ({ ...option, selected: selected.has(option.value) }));
|
|
1317
|
+
}
|
|
1318
|
+
getListOptions(options) {
|
|
1319
|
+
const normalized = this.applyCanonicalSelection(options).filter((option) => !this.isSelectAllOption(option));
|
|
1320
|
+
if (!this.effectiveMultiple)
|
|
1321
|
+
return normalized;
|
|
1322
|
+
const selectable = normalized.filter((option) => !this.isSelectAllOption(option));
|
|
1323
|
+
const allSelected = selectable.length > 0 && selectable.every((option) => Boolean(option.selected));
|
|
1324
|
+
const anySelected = selectable.some((option) => Boolean(option.selected));
|
|
1325
|
+
return [
|
|
1326
|
+
{
|
|
1327
|
+
value: select_utils.SELECT_ALL_OPTION_VALUE,
|
|
1328
|
+
label: allSelected ? this.unselectAllLabel : this.selectAllLabel,
|
|
1329
|
+
selected: allSelected,
|
|
1330
|
+
indeterminate: anySelected && !allSelected,
|
|
1331
|
+
},
|
|
1332
|
+
...selectable,
|
|
1333
|
+
];
|
|
1334
|
+
}
|
|
1335
|
+
isDisabled() {
|
|
1336
|
+
return validator.isFormControlDisabled(this.disabled, this.formDisabled);
|
|
1337
|
+
}
|
|
1338
|
+
handleDisabledChange(isDisabled) {
|
|
1339
|
+
if (isDisabled && this.effectiveOpen) {
|
|
1340
|
+
this.close();
|
|
1341
|
+
return;
|
|
1342
|
+
}
|
|
1343
|
+
this.emitStateChange();
|
|
1344
|
+
}
|
|
1345
|
+
handleIsOpenChange(isOpen) {
|
|
1346
|
+
if (this.open === undefined)
|
|
1347
|
+
this.syncOpenState(isOpen);
|
|
1348
|
+
}
|
|
1349
|
+
handleFilterableChange(filterable) {
|
|
1350
|
+
if (!filterable) {
|
|
1351
|
+
this.clearSearch();
|
|
1352
|
+
}
|
|
1353
|
+
}
|
|
1354
|
+
handleLoadingChange(loading) {
|
|
1355
|
+
if (this.selectListElement)
|
|
1356
|
+
this.selectListElement.loading = loading;
|
|
1357
|
+
}
|
|
1358
|
+
handleIsMultipleChange(isMultiple) {
|
|
1359
|
+
if (this.multiple === undefined)
|
|
1360
|
+
this.setSelectionMode(isMultiple);
|
|
1361
|
+
this.syncDisplayValue();
|
|
1362
|
+
}
|
|
1363
|
+
handleMultipleChange(multiple) {
|
|
1364
|
+
if (multiple !== undefined)
|
|
1365
|
+
this.setSelectionMode(multiple);
|
|
1366
|
+
this.syncDisplayValue();
|
|
1367
|
+
}
|
|
1368
|
+
handleOpenChange(open) {
|
|
1369
|
+
if (open !== undefined)
|
|
1370
|
+
this.syncOpenState(open);
|
|
1371
|
+
}
|
|
1372
|
+
handleExternalValueChange(value) {
|
|
1373
|
+
if (this.isApplyingExternalValue)
|
|
1374
|
+
return;
|
|
1375
|
+
this.applySelectedValue(value);
|
|
1376
|
+
}
|
|
1377
|
+
handleOptionsChange() {
|
|
1378
|
+
const options = this.getOptionsProp();
|
|
1379
|
+
void this.setOptions(options);
|
|
1380
|
+
}
|
|
1381
|
+
syncOpenState(isOpen) {
|
|
1382
|
+
if (this.lastAnnouncedOpen !== isOpen) {
|
|
1383
|
+
(isOpen ? this.opened : this.closed).emit();
|
|
1384
|
+
this.lastAnnouncedOpen = isOpen;
|
|
1385
|
+
}
|
|
1386
|
+
if (isOpen) {
|
|
1387
|
+
this.attachBlockingSurfaceListener();
|
|
1388
|
+
this.selectInputElement?.flipUp();
|
|
1389
|
+
void this.openListAndRestorePointerFocus();
|
|
1390
|
+
}
|
|
1391
|
+
else {
|
|
1392
|
+
this.detachBlockingSurfaceListener();
|
|
1393
|
+
this.selectInputElement?.flipDown();
|
|
1394
|
+
void this.selectListElement?.close();
|
|
1395
|
+
}
|
|
1396
|
+
this.emitStateChange();
|
|
1397
|
+
}
|
|
1398
|
+
attachBlockingSurfaceListener() {
|
|
1399
|
+
this.cleanupBlockingSurfaceDismissal ?? (this.cleanupBlockingSurfaceDismissal = floatingSurfaceDismiss.listenForExternalBlockingSurface(this.el, () => void this.close()));
|
|
1400
|
+
}
|
|
1401
|
+
detachBlockingSurfaceListener() {
|
|
1402
|
+
this.cleanupBlockingSurfaceDismissal?.();
|
|
1403
|
+
this.cleanupBlockingSurfaceDismissal = undefined;
|
|
1404
|
+
}
|
|
1405
|
+
handleSelectFocusOut(event) {
|
|
1406
|
+
if (!this.getEventPath(event).includes(this.selectInputElement))
|
|
1407
|
+
return;
|
|
1408
|
+
// Aguarda o foco atravessar os Shadow Roots antes de decidir se saiu do select.
|
|
1409
|
+
queueMicrotask(() => {
|
|
1410
|
+
if (!this.el.isConnected || this.el.matches(':focus-within') || this.isDisabled())
|
|
1411
|
+
return;
|
|
1412
|
+
void this.validate();
|
|
1413
|
+
});
|
|
1414
|
+
}
|
|
1415
|
+
handleSelectInvalid(event) {
|
|
1416
|
+
if (event.target !== this.el || this.checkingValidity)
|
|
1417
|
+
return;
|
|
1418
|
+
this.showValidationErrors = true;
|
|
1419
|
+
void this.syncComboboxAccessibility();
|
|
1420
|
+
}
|
|
1421
|
+
handleSelectInputFocus() {
|
|
1422
|
+
if (this.effectiveOpen)
|
|
1423
|
+
return;
|
|
1424
|
+
this.activeOptionIndex = -1;
|
|
1425
|
+
this.skipSelectInputClickToggle = this.isSelectInputPointerDown;
|
|
1426
|
+
void this.show();
|
|
1427
|
+
}
|
|
1428
|
+
handleSelectPointerDown(event) {
|
|
1429
|
+
this.isActiveIndicatorHidden = true;
|
|
1430
|
+
this.skipSelectInputClickToggle = false;
|
|
1431
|
+
this.isSelectInputPointerDown = this.getEventPath(event).includes(this.selectInputElement);
|
|
1432
|
+
}
|
|
1433
|
+
handleSelectInputValueChange(event) {
|
|
1434
|
+
if (!this.filterable || this.isDisabled())
|
|
1435
|
+
return;
|
|
1436
|
+
const nextSearchTerm = event.detail ?? '';
|
|
1437
|
+
this.searchTerm = nextSearchTerm;
|
|
1438
|
+
this.activeOptionIndex = -1;
|
|
1439
|
+
this.brSelectSearch.emit({ query: nextSearchTerm });
|
|
1440
|
+
/*
|
|
1441
|
+
* A chamada imperativa garante que a transição para string vazia também
|
|
1442
|
+
* alcance a lista interna. Isso evita depender apenas da remoção/atualização
|
|
1443
|
+
* do atributo `search-term` no custom element.
|
|
1444
|
+
*/
|
|
1445
|
+
void this.getSelectListController()?.setSearchTerm?.(this.listSearchTerm);
|
|
1446
|
+
if (!this.effectiveOpen) {
|
|
1447
|
+
void this.show();
|
|
1448
|
+
}
|
|
1449
|
+
}
|
|
1450
|
+
handleSelectInputActionClick() {
|
|
1451
|
+
// O botão de ação fica dentro do campo: o foco do mesmo clique já abriu a lista.
|
|
1452
|
+
if (this.consumeFocusOpenClick())
|
|
1453
|
+
return;
|
|
1454
|
+
this.toggleOpenFromPointer();
|
|
1455
|
+
}
|
|
1456
|
+
handleSelectInputClick() {
|
|
1457
|
+
if (this.consumeFocusOpenClick())
|
|
1458
|
+
return;
|
|
1459
|
+
if (this.filterable) {
|
|
1460
|
+
if (!this.effectiveOpen)
|
|
1461
|
+
void this.show();
|
|
1462
|
+
return;
|
|
1463
|
+
}
|
|
1464
|
+
this.shouldRestoreSelectedOptionOnOpen = true;
|
|
1465
|
+
void this.toggleOpenFromPointer();
|
|
1466
|
+
}
|
|
1467
|
+
handleSelectOptionStateChange(event$1, restoreFocus = true) {
|
|
1468
|
+
event$1.stopPropagation();
|
|
1469
|
+
const detail = event$1.detail;
|
|
1470
|
+
if (detail.disabled)
|
|
1471
|
+
return;
|
|
1472
|
+
// Use a lista interna para preservar rótulos e opções remotas enquanto as
|
|
1473
|
+
// props projetadas aguardam a próxima renderização.
|
|
1474
|
+
const listOptions = this.getSelectListController()?.options;
|
|
1475
|
+
const sourceOptions = Array.isArray(listOptions) && listOptions.length > 0
|
|
1476
|
+
? listOptions.map((option) => ({ ...option }))
|
|
1477
|
+
: this.getCurrentOptions();
|
|
1478
|
+
// No modo simples, o evento é a decisão final da interação. A lista
|
|
1479
|
+
// virtualizada e as opções projetadas podem ainda conter o snapshot da
|
|
1480
|
+
// interação anterior durante cliques consecutivos; derivar a coleção a
|
|
1481
|
+
// partir do valor do evento evita que esse snapshot reapareça no valor
|
|
1482
|
+
// público ou no formulário.
|
|
1483
|
+
const selectableValues = sourceOptions
|
|
1484
|
+
.filter((option) => !this.isSelectAllOption(option) && !option.disabled)
|
|
1485
|
+
.map((option) => option.value);
|
|
1486
|
+
const transition = this.isSelectAllOption(detail)
|
|
1487
|
+
? select_utils.transitionAllSelection(this.selectedValues, Boolean(detail.selected), selectableValues)
|
|
1488
|
+
: select_utils.transitionSelection({
|
|
1489
|
+
currentValues: this.selectedValues,
|
|
1490
|
+
multiple: this.effectiveMultiple,
|
|
1491
|
+
value: detail.value,
|
|
1492
|
+
selected: Boolean(detail.selected),
|
|
1493
|
+
});
|
|
1494
|
+
this.setSelectedValues(transition.values);
|
|
1495
|
+
const options = this.applyCanonicalSelection(sourceOptions, transition.values);
|
|
1496
|
+
if (this.selectListElement)
|
|
1497
|
+
this.selectListElement.options = this.getListOptions(options);
|
|
1498
|
+
this.reflectRenderedListSelection(transition.values, options);
|
|
1499
|
+
this.syncSlottedOptionSelection(transition.values);
|
|
1500
|
+
this.rememberRemoteSelections(options);
|
|
1501
|
+
this.syncDisplayValue(options);
|
|
1502
|
+
this.syncActiveOptionIndex(event$1.detail);
|
|
1503
|
+
this.emitStateChange(detail);
|
|
1504
|
+
this.updateValidity();
|
|
1505
|
+
if (!this.effectiveMultiple && restoreFocus) {
|
|
1506
|
+
void this.selectInputElement?.setFocus?.();
|
|
1507
|
+
void this.close();
|
|
1508
|
+
}
|
|
1509
|
+
if (!transition.changed)
|
|
1510
|
+
return;
|
|
1511
|
+
event.dispatchNativeFormEvent(this.el, 'input');
|
|
1512
|
+
event.dispatchNativeFormEvent(this.el, 'change');
|
|
1513
|
+
}
|
|
1514
|
+
/**
|
|
1515
|
+
* Recalcula a coleção quando uma opção projetada muda por atribuição direta
|
|
1516
|
+
* de `selected`, `disabled`, `label`, `group` ou `value`. A lista virtualizada em
|
|
1517
|
+
* Shadow DOM não é uma fonte independente; ela recebe o snapshot pelo seu
|
|
1518
|
+
* contrato público `options`.
|
|
1519
|
+
*/
|
|
1520
|
+
handleSelectOptionPropsChange(event) {
|
|
1521
|
+
const path = event.composedPath();
|
|
1522
|
+
const target = path.find((node) => node.tagName?.toLowerCase() === 'br-select-option');
|
|
1523
|
+
// O slot também atravessa br-select-list; filtre a origem, não os ancestrais do evento.
|
|
1524
|
+
if (!(target instanceof HTMLElement) ||
|
|
1525
|
+
!this.el.contains(target) ||
|
|
1526
|
+
ownership.findComposedOwner(target, 'br-select') !== this.el)
|
|
1527
|
+
return;
|
|
1528
|
+
if (this.hasImperativeOptions)
|
|
1529
|
+
return;
|
|
1530
|
+
const option = this.optionElementToData(target);
|
|
1531
|
+
if (Boolean(option.selected) !== this.selectedValues.includes(option.value)) {
|
|
1532
|
+
const values = this.isSelectAllOption(option)
|
|
1533
|
+
? select_utils.transitionAllSelection(this.selectedValues, Boolean(option.selected), this.getHostOptions()
|
|
1534
|
+
.filter((item) => !this.isSelectAllOption(item) && !item.disabled)
|
|
1535
|
+
.map((item) => item.value)).values
|
|
1536
|
+
: select_utils.transitionSelection({
|
|
1537
|
+
currentValues: this.selectedValues,
|
|
1538
|
+
multiple: this.effectiveMultiple,
|
|
1539
|
+
value: option.value,
|
|
1540
|
+
selected: Boolean(option.selected),
|
|
1541
|
+
}).values;
|
|
1542
|
+
this.applySelectedValue(this.effectiveMultiple ? values : (values[0] ?? ''));
|
|
1543
|
+
}
|
|
1544
|
+
this.slotReconciler.schedule();
|
|
1545
|
+
}
|
|
1546
|
+
handleSelectOptionHover(event) {
|
|
1547
|
+
this.optionHover.emit(event.detail);
|
|
1548
|
+
}
|
|
1549
|
+
// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: centraliza a navegação por teclado do componente.
|
|
1550
|
+
async handleKeyDown(event) {
|
|
1551
|
+
if (this.isDisabled() || event.isComposing)
|
|
1552
|
+
return;
|
|
1553
|
+
const path = this.getEventPath(event);
|
|
1554
|
+
const isFromInput = path.includes(this.selectInputElement);
|
|
1555
|
+
const isFromList = path.includes(this.selectListElement);
|
|
1556
|
+
if (!isFromInput && !isFromList)
|
|
1557
|
+
return;
|
|
1558
|
+
this.isActiveIndicatorHidden = false;
|
|
1559
|
+
if (event.altKey && event.key === 'ArrowDown') {
|
|
1560
|
+
if (!this.effectiveOpen) {
|
|
1561
|
+
event.preventDefault();
|
|
1562
|
+
await this.show();
|
|
1563
|
+
}
|
|
1564
|
+
return;
|
|
1565
|
+
}
|
|
1566
|
+
if (event.altKey && event.key === 'ArrowUp') {
|
|
1567
|
+
if (this.effectiveOpen) {
|
|
1568
|
+
event.preventDefault();
|
|
1569
|
+
await this.close();
|
|
1570
|
+
this.activeOptionIndex = -1;
|
|
1571
|
+
}
|
|
1572
|
+
return;
|
|
1573
|
+
}
|
|
1574
|
+
if (event.altKey || event.ctrlKey || event.metaKey)
|
|
1575
|
+
return;
|
|
1576
|
+
switch (event.key) {
|
|
1577
|
+
case 'ArrowDown':
|
|
1578
|
+
event.preventDefault();
|
|
1579
|
+
await this.openAndFocusBoundary(isFromInput, 1);
|
|
1580
|
+
return;
|
|
1581
|
+
case 'ArrowUp':
|
|
1582
|
+
event.preventDefault();
|
|
1583
|
+
await this.openAndFocusBoundary(isFromInput, -1);
|
|
1584
|
+
return;
|
|
1585
|
+
case 'Home':
|
|
1586
|
+
if (isFromInput && this.filterable)
|
|
1587
|
+
return;
|
|
1588
|
+
event.preventDefault();
|
|
1589
|
+
if (!this.effectiveOpen)
|
|
1590
|
+
await this.show();
|
|
1591
|
+
await this.focusOptionByIndex(this.getNavigableOptions().findIndex((option) => !option.disabled));
|
|
1592
|
+
return;
|
|
1593
|
+
case 'End':
|
|
1594
|
+
if (isFromInput && this.filterable)
|
|
1595
|
+
return;
|
|
1596
|
+
event.preventDefault();
|
|
1597
|
+
if (!this.effectiveOpen)
|
|
1598
|
+
await this.show();
|
|
1599
|
+
await this.focusOptionByIndex(this.getNavigableOptions()
|
|
1600
|
+
.map((option) => !option.disabled)
|
|
1601
|
+
.lastIndexOf(true), true);
|
|
1602
|
+
return;
|
|
1603
|
+
case 'Enter':
|
|
1604
|
+
case ' ':
|
|
1605
|
+
if (isFromInput && this.filterable && event.key === ' ') {
|
|
1606
|
+
return;
|
|
1607
|
+
}
|
|
1608
|
+
// No campo editável fechado, Enter mantém a ação nativa do formulário.
|
|
1609
|
+
if (isFromInput && this.filterable && event.key === 'Enter' && !this.effectiveOpen)
|
|
1610
|
+
return;
|
|
1611
|
+
event.preventDefault();
|
|
1612
|
+
if (!this.effectiveOpen) {
|
|
1613
|
+
await this.show();
|
|
1614
|
+
return;
|
|
1615
|
+
}
|
|
1616
|
+
if (this.activeOptionIndex < 0) {
|
|
1617
|
+
await this.close();
|
|
1618
|
+
this.activeOptionIndex = -1;
|
|
1619
|
+
return;
|
|
1620
|
+
}
|
|
1621
|
+
await this.selectFocusedOption();
|
|
1622
|
+
return;
|
|
1623
|
+
case 'Escape':
|
|
1624
|
+
if (!this.effectiveOpen)
|
|
1625
|
+
return;
|
|
1626
|
+
event.preventDefault();
|
|
1627
|
+
await this.close();
|
|
1628
|
+
this.activeOptionIndex = -1;
|
|
1629
|
+
await this.selectInputElement?.setFocus?.();
|
|
1630
|
+
return;
|
|
1631
|
+
case 'Tab':
|
|
1632
|
+
if (!this.effectiveOpen)
|
|
1633
|
+
return;
|
|
1634
|
+
await this.close();
|
|
1635
|
+
this.activeOptionIndex = -1;
|
|
1636
|
+
return;
|
|
1637
|
+
default:
|
|
1638
|
+
if (!this.filterable && event.key.length === 1 && event.key !== ' ') {
|
|
1639
|
+
event.preventDefault();
|
|
1640
|
+
await this.focusOptionByTypedCharacters(event.key);
|
|
1641
|
+
}
|
|
1642
|
+
return;
|
|
1643
|
+
}
|
|
1644
|
+
}
|
|
1645
|
+
handleWindowClick(ev) {
|
|
1646
|
+
this.handleOutsideClick(ev);
|
|
1647
|
+
}
|
|
1648
|
+
/**
|
|
1649
|
+
* Habilita o select para interação do usuário.
|
|
1650
|
+
*
|
|
1651
|
+
* @returns Uma promise concluída após a atualização do estado.
|
|
1652
|
+
*/
|
|
1653
|
+
async enable() {
|
|
1654
|
+
this.disabled = false;
|
|
1655
|
+
}
|
|
1656
|
+
/**
|
|
1657
|
+
* Desabilita o select e impede novas interações.
|
|
1658
|
+
*
|
|
1659
|
+
* @returns Uma promise concluída após a atualização do estado.
|
|
1660
|
+
*/
|
|
1661
|
+
async disable() {
|
|
1662
|
+
this.disabled = true;
|
|
1663
|
+
}
|
|
1664
|
+
/**
|
|
1665
|
+
* Abre a lista de opções quando o componente está habilitado.
|
|
1666
|
+
*
|
|
1667
|
+
* @returns Uma promise concluída após a atualização do estado.
|
|
1668
|
+
*/
|
|
1669
|
+
async show() {
|
|
1670
|
+
if (this.isDisabled())
|
|
1671
|
+
return;
|
|
1672
|
+
if (this.open !== undefined)
|
|
1673
|
+
this.open = true;
|
|
1674
|
+
else
|
|
1675
|
+
this.isOpen = true;
|
|
1676
|
+
}
|
|
1677
|
+
/**
|
|
1678
|
+
* Fecha a lista de opções quando o componente está habilitado.
|
|
1679
|
+
*
|
|
1680
|
+
* @returns Uma promise concluída após a atualização do estado.
|
|
1681
|
+
*/
|
|
1682
|
+
async close() {
|
|
1683
|
+
if (this.isDisabled())
|
|
1684
|
+
return;
|
|
1685
|
+
if (this.open !== undefined)
|
|
1686
|
+
this.open = false;
|
|
1687
|
+
else
|
|
1688
|
+
this.isOpen = false;
|
|
1689
|
+
this.typeAhead = '';
|
|
1690
|
+
this.clearSearch();
|
|
1691
|
+
}
|
|
1692
|
+
/**
|
|
1693
|
+
* Alterna entre os estados aberto e fechado do select.
|
|
1694
|
+
*
|
|
1695
|
+
* @returns {Promise<void>} Uma promise concluída após a atualização do estado.
|
|
1696
|
+
*/
|
|
1697
|
+
async toggleOpen() {
|
|
1698
|
+
if (this.isDisabled())
|
|
1699
|
+
return;
|
|
1700
|
+
if (this.open !== undefined)
|
|
1701
|
+
this.open = !this.open;
|
|
1702
|
+
else
|
|
1703
|
+
this.isOpen = !this.isOpen;
|
|
1704
|
+
}
|
|
1705
|
+
/**
|
|
1706
|
+
* Limpa a seleção atual.
|
|
1707
|
+
*
|
|
1708
|
+
* @deprecated Use `setValue('')` ou a API de formulário.
|
|
1709
|
+
*/
|
|
1710
|
+
async clear() {
|
|
1711
|
+
await this.setValue(this.effectiveMultiple ? [] : '');
|
|
1712
|
+
}
|
|
1713
|
+
/**
|
|
1714
|
+
* Retorna o valor público atual.
|
|
1715
|
+
*
|
|
1716
|
+
* @deprecated Leia a propriedade `value` diretamente.
|
|
1717
|
+
*/
|
|
1718
|
+
async getValue() {
|
|
1719
|
+
return this.value ?? (this.effectiveMultiple ? [] : '');
|
|
1720
|
+
}
|
|
1721
|
+
/**
|
|
1722
|
+
* Define o valor público do select.
|
|
1723
|
+
*
|
|
1724
|
+
* @deprecated Atribua a propriedade `value` diretamente.
|
|
1725
|
+
*/
|
|
1726
|
+
async setValue(value) {
|
|
1727
|
+
this.applySelectedValue(value);
|
|
1728
|
+
}
|
|
1729
|
+
/**
|
|
1730
|
+
* Move o foco para o campo interno.
|
|
1731
|
+
*
|
|
1732
|
+
* @deprecated Use o foco nativo do componente quando possível.
|
|
1733
|
+
*/
|
|
1734
|
+
async setFocus() {
|
|
1735
|
+
await this.selectInputElement?.setFocus?.();
|
|
1736
|
+
}
|
|
1737
|
+
async checkValidity() {
|
|
1738
|
+
this.checkingValidity = true;
|
|
1739
|
+
try {
|
|
1740
|
+
return this.elementInternals?.checkValidity?.() ?? true;
|
|
1741
|
+
}
|
|
1742
|
+
finally {
|
|
1743
|
+
this.checkingValidity = false;
|
|
1744
|
+
}
|
|
1745
|
+
}
|
|
1746
|
+
async reportValidity() {
|
|
1747
|
+
this.showValidationErrors = true;
|
|
1748
|
+
this.updateValidity();
|
|
1749
|
+
await this.syncComboboxAccessibility();
|
|
1750
|
+
return this.elementInternals?.reportValidity?.() ?? true;
|
|
1751
|
+
}
|
|
1752
|
+
async setCustomValidity(message) {
|
|
1753
|
+
this.customValidationMessage = message;
|
|
1754
|
+
this.updateValidity();
|
|
1755
|
+
}
|
|
1756
|
+
async getValidationState() {
|
|
1757
|
+
return validator.getFormValidationState(this.elementInternals);
|
|
1758
|
+
}
|
|
1759
|
+
async validate() {
|
|
1760
|
+
this.showValidationErrors = true;
|
|
1761
|
+
this.updateValidity();
|
|
1762
|
+
await this.syncComboboxAccessibility();
|
|
1763
|
+
const validator = this.resolveValidator();
|
|
1764
|
+
if (!validator || this.isDisabled())
|
|
1765
|
+
return this.checkValidity();
|
|
1766
|
+
const runId = ++this.validationRunId;
|
|
1767
|
+
this.isValidating = true;
|
|
1768
|
+
this.validatorMessage = null;
|
|
1769
|
+
this.updateValidity();
|
|
1770
|
+
this.brSelectValidationChange.emit({ validating: true, valid: null, message: null });
|
|
1771
|
+
let message = null;
|
|
1772
|
+
try {
|
|
1773
|
+
const currentValue = this.effectiveMultiple
|
|
1774
|
+
? [...(Array.isArray(this.value) ? this.value : [])]
|
|
1775
|
+
: String(this.value ?? '');
|
|
1776
|
+
message = (await validator(currentValue)) || null;
|
|
1777
|
+
}
|
|
1778
|
+
catch {
|
|
1779
|
+
message = 'Não foi possível validar a seleção.';
|
|
1780
|
+
}
|
|
1781
|
+
if (runId !== this.validationRunId)
|
|
1782
|
+
return false;
|
|
1783
|
+
this.validatorMessage = message;
|
|
1784
|
+
this.isValidating = false;
|
|
1785
|
+
this.updateValidity();
|
|
1786
|
+
const valid = message === null && (await this.checkValidity());
|
|
1787
|
+
this.brSelectValidationChange.emit({ validating: false, valid, message });
|
|
1788
|
+
return valid;
|
|
1789
|
+
}
|
|
1790
|
+
/**
|
|
1791
|
+
* Substitui a coleção atual de opções por uma nova lista.
|
|
1792
|
+
*
|
|
1793
|
+
* @param options Opções que devem ser exibidas pela lista interna.
|
|
1794
|
+
* Em `search-mode="remote"`, a seleção atual é preservada mesmo quando não
|
|
1795
|
+
* aparece na resposta recebida.
|
|
1796
|
+
* @returns Uma promise concluída após a sincronização das opções.
|
|
1797
|
+
*/
|
|
1798
|
+
async setOptions(options) {
|
|
1799
|
+
this.hasImperativeOptions = true;
|
|
1800
|
+
const nextOptions = this.effectiveSearchMode === 'remote' ? this.applyRemoteSelection(options) : options;
|
|
1801
|
+
this.suppressValueChange = true;
|
|
1802
|
+
try {
|
|
1803
|
+
if (this.selectListElement) {
|
|
1804
|
+
this.selectListElement.options = this.getListOptions(nextOptions);
|
|
1805
|
+
}
|
|
1806
|
+
else {
|
|
1807
|
+
this.pendingOptions = nextOptions;
|
|
1808
|
+
}
|
|
1809
|
+
this.syncDisplayValue(nextOptions);
|
|
1810
|
+
}
|
|
1811
|
+
finally {
|
|
1812
|
+
this.suppressValueChange = false;
|
|
1813
|
+
}
|
|
1814
|
+
}
|
|
1815
|
+
/**
|
|
1816
|
+
* Adiciona ou atualiza uma única opção na coleção interna.
|
|
1817
|
+
*
|
|
1818
|
+
* @param option Opção que deve ser inserida ou atualizada.
|
|
1819
|
+
* @returns Uma promise concluída após a sincronização da opção.
|
|
1820
|
+
*/
|
|
1821
|
+
async setOption(option) {
|
|
1822
|
+
this.hasImperativeOptions = true;
|
|
1823
|
+
const currentOptions = this.getCurrentOptions();
|
|
1824
|
+
const index = currentOptions.findIndex((currentOption) => currentOption.value === option.value);
|
|
1825
|
+
const nextOptions = [...currentOptions];
|
|
1826
|
+
if (index === -1)
|
|
1827
|
+
nextOptions.push(option);
|
|
1828
|
+
else
|
|
1829
|
+
nextOptions[index] = option;
|
|
1830
|
+
if (this.selectListElement) {
|
|
1831
|
+
this.selectListElement.options = this.getListOptions(nextOptions);
|
|
1832
|
+
}
|
|
1833
|
+
else {
|
|
1834
|
+
this.pendingOptions = nextOptions;
|
|
1835
|
+
}
|
|
1836
|
+
this.syncDisplayValue(nextOptions);
|
|
1837
|
+
}
|
|
1838
|
+
getHostOptions() {
|
|
1839
|
+
return Array.from(this.el.childNodes)
|
|
1840
|
+
.map((node) => this.nodeToOption(node))
|
|
1841
|
+
.filter((option) => Boolean(option));
|
|
1842
|
+
}
|
|
1843
|
+
nodeToOption(node) {
|
|
1844
|
+
if (node.nodeType === Node.ELEMENT_NODE)
|
|
1845
|
+
return this.elementToOption(node);
|
|
1846
|
+
if (node.nodeType === Node.TEXT_NODE)
|
|
1847
|
+
return this.textNodeToOption(node);
|
|
1848
|
+
return null;
|
|
1849
|
+
}
|
|
1850
|
+
elementToOption(el) {
|
|
1851
|
+
if (el.tagName.toLowerCase() === 'br-select-option')
|
|
1852
|
+
return this.optionElementToData(el);
|
|
1853
|
+
const text = (el.textContent || '').trim();
|
|
1854
|
+
return text ? { value: text, label: text } : null;
|
|
1855
|
+
}
|
|
1856
|
+
textNodeToOption(textNode) {
|
|
1857
|
+
const text = (textNode.textContent || '').trim();
|
|
1858
|
+
return text ? { value: text, label: text } : null;
|
|
1859
|
+
}
|
|
1860
|
+
optionElementToData(el) {
|
|
1861
|
+
const rawValue = el.getAttribute('value') ?? el.value ?? '';
|
|
1862
|
+
const rawLabel = el.getAttribute('label') ?? el.label ?? '';
|
|
1863
|
+
let value = String(rawValue || '').trim();
|
|
1864
|
+
let label = String(rawLabel || '').trim();
|
|
1865
|
+
const group = this.getOptionElementGroup(el);
|
|
1866
|
+
const inner = this.extractInnerTextFromOption(el);
|
|
1867
|
+
const content = (el.innerHTML || '').trim();
|
|
1868
|
+
const selected = el.selected ?? el.hasAttribute('selected');
|
|
1869
|
+
const disabled = el.disabled ?? el.hasAttribute('disabled');
|
|
1870
|
+
if (!value && inner)
|
|
1871
|
+
value = inner.trim();
|
|
1872
|
+
if (!label)
|
|
1873
|
+
label = inner?.trim() || value;
|
|
1874
|
+
return {
|
|
1875
|
+
value: value || '',
|
|
1876
|
+
label: label || undefined,
|
|
1877
|
+
group,
|
|
1878
|
+
selected,
|
|
1879
|
+
disabled,
|
|
1880
|
+
content: content || undefined,
|
|
1881
|
+
};
|
|
1882
|
+
}
|
|
1883
|
+
getOptionElementGroup(el) {
|
|
1884
|
+
return String(el.getAttribute('group') ?? el.group ?? '').trim() || undefined;
|
|
1885
|
+
}
|
|
1886
|
+
extractInnerTextFromOption(el) {
|
|
1887
|
+
const fallback = (el.textContent || '').trim();
|
|
1888
|
+
return fallback || null;
|
|
1889
|
+
}
|
|
1890
|
+
getOptionLabel(option) {
|
|
1891
|
+
return (option.label ?? option.value).trim();
|
|
1892
|
+
}
|
|
1893
|
+
getDisplayValue(options = this.getCurrentOptions()) {
|
|
1894
|
+
const selectedOptions = options.filter((option) => {
|
|
1895
|
+
if (!option.selected)
|
|
1896
|
+
return false;
|
|
1897
|
+
const optionLabel = this.getOptionLabel(option);
|
|
1898
|
+
return !this.isSelectAllLabel(optionLabel);
|
|
1899
|
+
});
|
|
1900
|
+
if (selectedOptions.length === 0)
|
|
1901
|
+
return '';
|
|
1902
|
+
if (!this.effectiveMultiple) {
|
|
1903
|
+
return this.getOptionLabel(selectedOptions[0]);
|
|
1904
|
+
}
|
|
1905
|
+
const [firstSelected, ...otherSelected] = selectedOptions;
|
|
1906
|
+
const firstLabel = this.getOptionLabel(firstSelected);
|
|
1907
|
+
if (otherSelected.length === 0)
|
|
1908
|
+
return firstLabel;
|
|
1909
|
+
return `${firstLabel} + (${otherSelected.length})`;
|
|
1910
|
+
}
|
|
1911
|
+
syncDisplayValue(options) {
|
|
1912
|
+
const resolvedOptions = this.getFormOptions(options ?? this.getCurrentOptions());
|
|
1913
|
+
this.displayValue = this.getDisplayValue(resolvedOptions);
|
|
1914
|
+
this.syncValue(resolvedOptions);
|
|
1915
|
+
}
|
|
1916
|
+
syncValue(options) {
|
|
1917
|
+
this.setSelectedValues(options
|
|
1918
|
+
.filter((option) => option.selected && !this.isSelectAllLabel(this.getOptionLabel(option)))
|
|
1919
|
+
.map((option) => option.value));
|
|
1920
|
+
const nextValue = this.getSerializedValue(options);
|
|
1921
|
+
this.syncFormState(options);
|
|
1922
|
+
if (this.value === nextValue)
|
|
1923
|
+
return;
|
|
1924
|
+
this.isApplyingExternalValue = true;
|
|
1925
|
+
this.value = nextValue;
|
|
1926
|
+
this.isApplyingExternalValue = false;
|
|
1927
|
+
if (!this.isValueChangeReady || this.suppressValueChange)
|
|
1928
|
+
return;
|
|
1929
|
+
this.valueChange.emit(Array.isArray(nextValue) ? nextValue.join(',') : nextValue);
|
|
1930
|
+
}
|
|
1931
|
+
getSerializedValue(options) {
|
|
1932
|
+
const selectedValues = options
|
|
1933
|
+
.filter((option) => {
|
|
1934
|
+
if (!option.selected)
|
|
1935
|
+
return false;
|
|
1936
|
+
const optionLabel = this.getOptionLabel(option);
|
|
1937
|
+
return !this.isSelectAllLabel(optionLabel);
|
|
1938
|
+
})
|
|
1939
|
+
.map((option) => option.value);
|
|
1940
|
+
if (this.effectiveMultiple)
|
|
1941
|
+
return selectedValues;
|
|
1942
|
+
if (selectedValues.length === 0)
|
|
1943
|
+
return '';
|
|
1944
|
+
return selectedValues[0];
|
|
1945
|
+
}
|
|
1946
|
+
getOptionsProp() {
|
|
1947
|
+
let parsed = this.options;
|
|
1948
|
+
if (!Array.isArray(this.options)) {
|
|
1949
|
+
try {
|
|
1950
|
+
parsed = JSON.parse(this.options || '[]');
|
|
1951
|
+
}
|
|
1952
|
+
catch {
|
|
1953
|
+
propWarning.reportInvalidPropValue(this.el, 'options', this.options, 'Informe um array de opções ou uma string JSON válida.', 'Aplicando fallback [].');
|
|
1954
|
+
return [];
|
|
1955
|
+
}
|
|
1956
|
+
}
|
|
1957
|
+
if (!Array.isArray(parsed)) {
|
|
1958
|
+
propWarning.reportInvalidPropValue(this.el, 'options', this.options, 'Informe um array de opções ou uma string JSON válida.', 'Aplicando fallback [].');
|
|
1959
|
+
return [];
|
|
1960
|
+
}
|
|
1961
|
+
const validOptions = parsed.filter((option) => {
|
|
1962
|
+
return typeof option === 'object' && option !== null && typeof option.value === 'string';
|
|
1963
|
+
});
|
|
1964
|
+
const hasInvalidLabels = parsed.some((option) => {
|
|
1965
|
+
if (typeof option !== 'object' || option === null)
|
|
1966
|
+
return false;
|
|
1967
|
+
const label = option.label;
|
|
1968
|
+
return label !== undefined && typeof label !== 'string';
|
|
1969
|
+
});
|
|
1970
|
+
const hasInvalidGroups = parsed.some((option) => {
|
|
1971
|
+
if (typeof option !== 'object' || option === null)
|
|
1972
|
+
return false;
|
|
1973
|
+
const group = option.group;
|
|
1974
|
+
return group !== undefined && typeof group !== 'string';
|
|
1975
|
+
});
|
|
1976
|
+
const normalizedOptions = validOptions.map((option) => ({
|
|
1977
|
+
...option,
|
|
1978
|
+
group: typeof option.group === 'string' ? option.group.trim() || undefined : undefined,
|
|
1979
|
+
label: typeof option.label === 'string' ? option.label : undefined,
|
|
1980
|
+
}));
|
|
1981
|
+
if (validOptions.length !== parsed.length || hasInvalidLabels || hasInvalidGroups) {
|
|
1982
|
+
propWarning.reportInvalidPropValue(this.el, 'options', this.options, 'Cada opção deve ter `value` string e pode ter `label` e `group` como strings.', 'Ignorando opções inválidas e removendo rótulos ou grupos com tipo incompatível.');
|
|
1983
|
+
}
|
|
1984
|
+
return normalizedOptions;
|
|
1985
|
+
}
|
|
1986
|
+
applySelectedValue(value) {
|
|
1987
|
+
const currentOptions = this.getCurrentOptions();
|
|
1988
|
+
const requestedValues = this.valueFromPublicValue(value) ?? [];
|
|
1989
|
+
this.setSelectedValues(requestedValues);
|
|
1990
|
+
this.syncSlottedOptionSelection(requestedValues);
|
|
1991
|
+
const options = currentOptions.map((option) => ({
|
|
1992
|
+
...option,
|
|
1993
|
+
selected: requestedValues.includes(option.value),
|
|
1994
|
+
}));
|
|
1995
|
+
this.isApplyingExternalValue = true;
|
|
1996
|
+
if (this.selectListElement)
|
|
1997
|
+
this.selectListElement.options = this.getListOptions(options);
|
|
1998
|
+
else
|
|
1999
|
+
this.pendingOptions = options;
|
|
2000
|
+
this.reflectRenderedListSelection(requestedValues, options);
|
|
2001
|
+
this.value = value;
|
|
2002
|
+
this.isApplyingExternalValue = false;
|
|
2003
|
+
this.remoteSelectedOptions.clear();
|
|
2004
|
+
this.rememberRemoteSelections(options);
|
|
2005
|
+
if (this.effectiveSearchMode === 'remote') {
|
|
2006
|
+
const selectedValues = new Set(Array.isArray(value) ? value : [value ?? '']);
|
|
2007
|
+
selectedValues.forEach((selectedValue) => {
|
|
2008
|
+
if (selectedValue && !currentOptions.some((option) => option.value === selectedValue)) {
|
|
2009
|
+
this.remoteSelectedOptions.set(selectedValue, {
|
|
2010
|
+
value: selectedValue,
|
|
2011
|
+
label: selectedValue,
|
|
2012
|
+
selected: true,
|
|
2013
|
+
});
|
|
2014
|
+
}
|
|
2015
|
+
});
|
|
2016
|
+
this.syncDisplayValue(this.getCurrentOptions());
|
|
2017
|
+
return;
|
|
2018
|
+
}
|
|
2019
|
+
this.syncDisplayValue(options);
|
|
2020
|
+
}
|
|
2021
|
+
applyRemoteSelection(options) {
|
|
2022
|
+
this.rememberRemoteSelections(this.getCurrentOptions());
|
|
2023
|
+
const selectedValues = new Set(this.selectedValues);
|
|
2024
|
+
const nextOptions = options.map((option) => ({
|
|
2025
|
+
...option,
|
|
2026
|
+
selected: selectedValues.has(option.value) || Boolean(option.selected),
|
|
2027
|
+
}));
|
|
2028
|
+
this.rememberRemoteSelections(nextOptions);
|
|
2029
|
+
return nextOptions;
|
|
2030
|
+
}
|
|
2031
|
+
rememberRemoteSelections(options) {
|
|
2032
|
+
if (this.effectiveSearchMode !== 'remote')
|
|
2033
|
+
return;
|
|
2034
|
+
const visibleValues = new Set(options.map((option) => option.value));
|
|
2035
|
+
options.forEach((option) => {
|
|
2036
|
+
if (option.selected)
|
|
2037
|
+
this.remoteSelectedOptions.set(option.value, { ...option, selected: true });
|
|
2038
|
+
else if (visibleValues.has(option.value))
|
|
2039
|
+
this.remoteSelectedOptions.delete(option.value);
|
|
2040
|
+
});
|
|
2041
|
+
}
|
|
2042
|
+
getFormOptions(options) {
|
|
2043
|
+
if (this.effectiveSearchMode !== 'remote')
|
|
2044
|
+
return options;
|
|
2045
|
+
const result = options.map((option) => ({ ...option }));
|
|
2046
|
+
const existingValues = new Set(result.map((option) => option.value));
|
|
2047
|
+
this.remoteSelectedOptions.forEach((option, value) => {
|
|
2048
|
+
if (!existingValues.has(value))
|
|
2049
|
+
result.push({ ...option, selected: true });
|
|
2050
|
+
});
|
|
2051
|
+
return result;
|
|
2052
|
+
}
|
|
2053
|
+
syncFormState(options = this.getCurrentOptions()) {
|
|
2054
|
+
const selected = this.getFormOptions(options).filter((option) => option.selected && !this.isSelectAllLabel(this.getOptionLabel(option)));
|
|
2055
|
+
const selectedValues = selected.map((option) => option.value);
|
|
2056
|
+
const formValue = this.effectiveMultiple ? JSON.stringify(selectedValues) : (selectedValues[0] ?? null);
|
|
2057
|
+
validator.safeSetFormValue(this.elementInternals, formValue);
|
|
2058
|
+
this.syncNativeSelectSelection(selectedValues);
|
|
2059
|
+
this.updateValidity(selectedValues.length);
|
|
2060
|
+
}
|
|
2061
|
+
syncNativeSelectSelection(values = this.getSelectedValues()) {
|
|
2062
|
+
const nativeSelect = this.getNativeSelect();
|
|
2063
|
+
if (!nativeSelect)
|
|
2064
|
+
return;
|
|
2065
|
+
const selectedValues = new Set(values);
|
|
2066
|
+
Array.from(nativeSelect.options).forEach((option) => {
|
|
2067
|
+
option.selected = option.value === '' ? selectedValues.size === 0 : selectedValues.has(option.value);
|
|
2068
|
+
});
|
|
2069
|
+
}
|
|
2070
|
+
getSelectedValues() {
|
|
2071
|
+
return [...this.selectedValues];
|
|
2072
|
+
}
|
|
2073
|
+
updateValidity(selectedCount = this.getSelectedValues().length) {
|
|
2074
|
+
const nativeSelect = this.getNativeSelect();
|
|
2075
|
+
if (!nativeSelect)
|
|
2076
|
+
return;
|
|
2077
|
+
const selectionMessage = this.effectiveMultiple && this.effectiveMinSelections > 0 && selectedCount < this.effectiveMinSelections
|
|
2078
|
+
? `Selecione pelo menos ${this.effectiveMinSelections} opções.`
|
|
2079
|
+
: this.effectiveMultiple && this.effectiveMaxSelections > 0 && selectedCount > this.effectiveMaxSelections
|
|
2080
|
+
? `Selecione no máximo ${this.effectiveMaxSelections} opções.`
|
|
2081
|
+
: '';
|
|
2082
|
+
nativeSelect.setCustomValidity(this.customValidationMessage || this.validatorMessage || selectionMessage);
|
|
2083
|
+
validator.syncNativeFormValidity(this.elementInternals, nativeSelect);
|
|
2084
|
+
void this.syncComboboxAccessibility();
|
|
2085
|
+
}
|
|
2086
|
+
getNativeSelect() {
|
|
2087
|
+
return (this.el.shadowRoot?.querySelector('select[part="hidden-select"]') ??
|
|
2088
|
+
this.nativeSelect);
|
|
2089
|
+
}
|
|
2090
|
+
resolveValidator() {
|
|
2091
|
+
return validator.resolveFormValidator(this.validator);
|
|
2092
|
+
}
|
|
2093
|
+
getRenderedDisplayValue() {
|
|
2094
|
+
return this.displayValue ?? this.getDisplayValue();
|
|
2095
|
+
}
|
|
2096
|
+
/**
|
|
2097
|
+
* Retorna o id da opção atualmente ativa para consumo do `aria-activedescendant`.
|
|
2098
|
+
*
|
|
2099
|
+
* @returns O id da opção ativa ou `undefined` quando a lista está fechada.
|
|
2100
|
+
*/
|
|
2101
|
+
async syncComboboxAccessibility() {
|
|
2102
|
+
const nativeSelect = this.getNativeSelect();
|
|
2103
|
+
const invalid = this.showValidationErrors && Boolean(nativeSelect && !nativeSelect.validity.valid);
|
|
2104
|
+
const errorMessage = !invalid
|
|
2105
|
+
? ''
|
|
2106
|
+
: nativeSelect?.validity.customError
|
|
2107
|
+
? nativeSelect.validationMessage
|
|
2108
|
+
: nativeSelect?.validity.valueMissing
|
|
2109
|
+
? 'Este campo é obrigatório.'
|
|
2110
|
+
: nativeSelect?.validationMessage || '';
|
|
2111
|
+
this.validationErrorMessage = errorMessage;
|
|
2112
|
+
await this.selectInputElement?.syncCombobox?.({
|
|
2113
|
+
options: this.getNavigableOptions(),
|
|
2114
|
+
activeIndex: this.effectiveOpen ? this.activeOptionIndex : -1,
|
|
2115
|
+
expanded: this.effectiveOpen,
|
|
2116
|
+
multiple: this.effectiveMultiple,
|
|
2117
|
+
label: this.getAccessibleLabel(),
|
|
2118
|
+
loading: this.loading,
|
|
2119
|
+
required: this.required,
|
|
2120
|
+
invalid,
|
|
2121
|
+
errorMessage,
|
|
2122
|
+
});
|
|
2123
|
+
}
|
|
2124
|
+
/**
|
|
2125
|
+
* Indica se o clique atual foi o mesmo que deu foco ao campo e abriu a lista,
|
|
2126
|
+
* limpando o estado do ponteiro. Esse clique não deve alternar a lista de novo.
|
|
2127
|
+
*/
|
|
2128
|
+
consumeFocusOpenClick() {
|
|
2129
|
+
const skip = this.skipSelectInputClickToggle;
|
|
2130
|
+
this.skipSelectInputClickToggle = false;
|
|
2131
|
+
this.isSelectInputPointerDown = false;
|
|
2132
|
+
return skip;
|
|
2133
|
+
}
|
|
2134
|
+
toggleOpenFromPointer() {
|
|
2135
|
+
if (!this.effectiveOpen) {
|
|
2136
|
+
this.shouldRestoreSelectedOptionOnOpen = true;
|
|
2137
|
+
}
|
|
2138
|
+
void this.toggleOpen();
|
|
2139
|
+
}
|
|
2140
|
+
async openListAndRestorePointerFocus() {
|
|
2141
|
+
await this.selectListElement?.open();
|
|
2142
|
+
if (!this.shouldRestoreSelectedOptionOnOpen)
|
|
2143
|
+
return;
|
|
2144
|
+
this.shouldRestoreSelectedOptionOnOpen = false;
|
|
2145
|
+
await this.scrollFirstSelectedOptionToTop();
|
|
2146
|
+
}
|
|
2147
|
+
async scrollFirstSelectedOptionToTop() {
|
|
2148
|
+
const options = this.getNavigableOptions();
|
|
2149
|
+
const firstSelectedIndex = options.findIndex((option) => !this.isSelectAllLabel(this.getOptionLabel(option)) && Boolean(option.selected));
|
|
2150
|
+
if (firstSelectedIndex < 0)
|
|
2151
|
+
return;
|
|
2152
|
+
const didScroll = await this.getSelectListController()?.scrollFirstSelectedOptionToTop?.();
|
|
2153
|
+
if (didScroll) {
|
|
2154
|
+
this.activeOptionIndex = firstSelectedIndex;
|
|
2155
|
+
}
|
|
2156
|
+
}
|
|
2157
|
+
async openAndFocusBoundary(fromInput, direction) {
|
|
2158
|
+
if (!this.effectiveOpen) {
|
|
2159
|
+
await this.show();
|
|
2160
|
+
await this.selectListElement?.open?.();
|
|
2161
|
+
await this.focusInitialOption(direction);
|
|
2162
|
+
return;
|
|
2163
|
+
}
|
|
2164
|
+
if (fromInput && this.activeOptionIndex < 0) {
|
|
2165
|
+
await this.focusInitialOption(direction);
|
|
2166
|
+
return;
|
|
2167
|
+
}
|
|
2168
|
+
await this.moveActiveOption(direction);
|
|
2169
|
+
}
|
|
2170
|
+
async focusOptionByTypedCharacters(character) {
|
|
2171
|
+
const now = Date.now();
|
|
2172
|
+
this.typeAhead = now - this.lastTypeAheadTime < 700 ? this.typeAhead + character : character;
|
|
2173
|
+
this.lastTypeAheadTime = now;
|
|
2174
|
+
const options = this.getNavigableOptions();
|
|
2175
|
+
if (!options.length)
|
|
2176
|
+
return;
|
|
2177
|
+
const normalize = (value) => value
|
|
2178
|
+
.normalize('NFD')
|
|
2179
|
+
.replace(/[\u0300-\u036f]/g, '')
|
|
2180
|
+
.toLocaleLowerCase('pt-BR');
|
|
2181
|
+
const search = (query) => {
|
|
2182
|
+
for (let offset = 1; offset <= options.length; offset++) {
|
|
2183
|
+
const index = (this.activeOptionIndex + offset + options.length) % options.length;
|
|
2184
|
+
const option = options[index];
|
|
2185
|
+
if (!option.disabled && normalize(this.getOptionLabel(option)).startsWith(normalize(query)))
|
|
2186
|
+
return index;
|
|
2187
|
+
}
|
|
2188
|
+
return -1;
|
|
2189
|
+
};
|
|
2190
|
+
let index = search(this.typeAhead);
|
|
2191
|
+
if (index < 0 && /^(.)(\1)+$/u.test(this.typeAhead))
|
|
2192
|
+
index = search(character);
|
|
2193
|
+
if (index < 0)
|
|
2194
|
+
return;
|
|
2195
|
+
if (!this.effectiveOpen)
|
|
2196
|
+
await this.show();
|
|
2197
|
+
await this.focusOptionByIndex(index);
|
|
2198
|
+
}
|
|
2199
|
+
/**
|
|
2200
|
+
* Define qual opção deve receber foco ao abrir ou iniciar a navegação pelo teclado.
|
|
2201
|
+
*
|
|
2202
|
+
* @param direction Direção inicial da navegação. `1` avança e `-1` recua.
|
|
2203
|
+
*/
|
|
2204
|
+
async focusInitialOption(direction) {
|
|
2205
|
+
const options = this.getNavigableOptions();
|
|
2206
|
+
if (options.length === 0)
|
|
2207
|
+
return;
|
|
2208
|
+
const selectedIndex = options.findIndex((option) => !option.disabled && !this.isSelectAllOption(option) && Boolean(option.selected));
|
|
2209
|
+
if (selectedIndex >= 0) {
|
|
2210
|
+
let nextIndex = selectedIndex + direction;
|
|
2211
|
+
while (nextIndex >= 0 && nextIndex < options.length && options[nextIndex].disabled)
|
|
2212
|
+
nextIndex += direction;
|
|
2213
|
+
await this.focusOptionByIndex(nextIndex >= 0 && nextIndex < options.length ? nextIndex : selectedIndex, true);
|
|
2214
|
+
return;
|
|
2215
|
+
}
|
|
2216
|
+
const fallbackIndex = direction > 0
|
|
2217
|
+
? options.findIndex((option) => !option.disabled)
|
|
2218
|
+
: options.map((option) => !option.disabled).lastIndexOf(true);
|
|
2219
|
+
const initialIndex = selectedIndex >= 0 ? selectedIndex : fallbackIndex;
|
|
2220
|
+
await this.focusOptionByIndex(initialIndex);
|
|
2221
|
+
}
|
|
2222
|
+
async moveActiveOption(step) {
|
|
2223
|
+
const options = this.getNavigableOptions();
|
|
2224
|
+
if (options.length === 0)
|
|
2225
|
+
return;
|
|
2226
|
+
const baseIndex = this.getCurrentActiveIndex();
|
|
2227
|
+
let nextIndex = baseIndex + step;
|
|
2228
|
+
while (nextIndex >= 0 && nextIndex < options.length && options[nextIndex].disabled)
|
|
2229
|
+
nextIndex += step;
|
|
2230
|
+
if (nextIndex >= 0 && nextIndex < options.length)
|
|
2231
|
+
await this.focusOptionByIndex(nextIndex);
|
|
2232
|
+
}
|
|
2233
|
+
/**
|
|
2234
|
+
* Resolve o índice ativo atual a partir do estado local ou da opção já selecionada.
|
|
2235
|
+
*
|
|
2236
|
+
* @returns O índice que deve servir como base para a próxima navegação por teclado.
|
|
2237
|
+
*/
|
|
2238
|
+
getCurrentActiveIndex() {
|
|
2239
|
+
if (this.activeOptionIndex >= 0)
|
|
2240
|
+
return this.activeOptionIndex;
|
|
2241
|
+
const options = this.getNavigableOptions();
|
|
2242
|
+
const selectedIndex = options.findIndex((option) => !option.disabled && !this.isSelectAllOption(option) && Boolean(option.selected));
|
|
2243
|
+
return selectedIndex >= 0 ? selectedIndex : 0;
|
|
2244
|
+
}
|
|
2245
|
+
/**
|
|
2246
|
+
* Encaminha o foco lógico para uma opção específica da lista interna.
|
|
2247
|
+
*
|
|
2248
|
+
* @param index Índice da opção que deve receber foco.
|
|
2249
|
+
* @param scrollToTop Posiciona a opção no topo da viewport quando verdadeiro.
|
|
2250
|
+
*/
|
|
2251
|
+
async focusOptionByIndex(index, scrollToTop = false) {
|
|
2252
|
+
if (!this.getNavigableOptions()[index] || this.getNavigableOptions()[index].disabled)
|
|
2253
|
+
return;
|
|
2254
|
+
this.activeOptionIndex = index;
|
|
2255
|
+
const listController = this.getSelectListController();
|
|
2256
|
+
if (scrollToTop)
|
|
2257
|
+
await listController?.scrollOptionToTop?.(index);
|
|
2258
|
+
else
|
|
2259
|
+
await listController?.revealOption?.(index);
|
|
2260
|
+
}
|
|
2261
|
+
/**
|
|
2262
|
+
* Seleciona a opção atualmente ativa sem duplicar a lógica de seleção da lista.
|
|
2263
|
+
*
|
|
2264
|
+
* @remarks
|
|
2265
|
+
* Em modo simples, confirma a opção ativa; no múltiplo, alterna sua seleção.
|
|
2266
|
+
*/
|
|
2267
|
+
async selectFocusedOption(restoreFocus = true) {
|
|
2268
|
+
const options = this.getNavigableOptions();
|
|
2269
|
+
if (options.length === 0)
|
|
2270
|
+
return;
|
|
2271
|
+
const index = this.activeOptionIndex;
|
|
2272
|
+
const option = options[index];
|
|
2273
|
+
if (!option || option.disabled)
|
|
2274
|
+
return;
|
|
2275
|
+
this.handleSelectOptionStateChange(new CustomEvent('brSelectOptionStateChange', {
|
|
2276
|
+
detail: { ...option, selected: this.effectiveMultiple ? !option.selected : true },
|
|
2277
|
+
}), restoreFocus);
|
|
2278
|
+
if (!this.effectiveMultiple && restoreFocus) {
|
|
2279
|
+
await this.close();
|
|
2280
|
+
await this.selectInputElement?.setFocus();
|
|
2281
|
+
}
|
|
2282
|
+
}
|
|
2283
|
+
syncActiveOptionIndex(detail) {
|
|
2284
|
+
const options = this.getNavigableOptions();
|
|
2285
|
+
const optionIndex = options.findIndex((option) => option.value === detail.value);
|
|
2286
|
+
if (optionIndex >= 0) {
|
|
2287
|
+
this.activeOptionIndex = optionIndex;
|
|
2288
|
+
}
|
|
2289
|
+
}
|
|
2290
|
+
/**
|
|
2291
|
+
* Reflete no slot a seleção que foi consolidada pela lista interna.
|
|
2292
|
+
*
|
|
2293
|
+
* @param detail Estado emitido pela opção que disparou a mudança.
|
|
2294
|
+
* @remarks
|
|
2295
|
+
* Essa sincronização mantém as props/atributos das opções declaradas pelo consumidor em
|
|
2296
|
+
* conformidade com o estado calculado internamente, inclusive no caso do "selecionar todos".
|
|
2297
|
+
*/
|
|
2298
|
+
syncSlottedOptionSelection(values = this.selectedValues) {
|
|
2299
|
+
const slottedOptions = Array.from(this.el.children).filter((el) => el.tagName.toLowerCase() === 'br-select-option');
|
|
2300
|
+
if (slottedOptions.length === 0)
|
|
2301
|
+
return;
|
|
2302
|
+
const selectedValues = new Set(values);
|
|
2303
|
+
slottedOptions.forEach((option) => {
|
|
2304
|
+
const resolved = this.optionElementToData(option).value;
|
|
2305
|
+
option.selected = selectedValues.has(resolved);
|
|
2306
|
+
option.indeterminate = false;
|
|
2307
|
+
if (option.selected)
|
|
2308
|
+
option.setAttribute('selected', '');
|
|
2309
|
+
else
|
|
2310
|
+
option.removeAttribute('selected');
|
|
2311
|
+
});
|
|
2312
|
+
if (!this.effectiveMultiple)
|
|
2313
|
+
return;
|
|
2314
|
+
const selectableOptions = slottedOptions.filter((option) => {
|
|
2315
|
+
const optionLabel = (option.label ?? option.value ?? '').trim();
|
|
2316
|
+
return !this.isSelectAllLabel(optionLabel);
|
|
2317
|
+
});
|
|
2318
|
+
const allSelected = selectableOptions.length > 0 && selectableOptions.every((option) => Boolean(option.selected));
|
|
2319
|
+
const anySelected = selectableOptions.some((option) => Boolean(option.selected));
|
|
2320
|
+
slottedOptions.forEach((option) => {
|
|
2321
|
+
const optionLabel = (option.label ?? option.value ?? '').trim();
|
|
2322
|
+
if (!this.isSelectAllLabel(optionLabel))
|
|
2323
|
+
return;
|
|
2324
|
+
option.indeterminate = anySelected && !allSelected;
|
|
2325
|
+
option.selected = allSelected;
|
|
2326
|
+
this.normalizeSelectAllState(option);
|
|
2327
|
+
if (option.selected)
|
|
2328
|
+
option.setAttribute('selected', '');
|
|
2329
|
+
else
|
|
2330
|
+
option.removeAttribute('selected');
|
|
2331
|
+
});
|
|
2332
|
+
}
|
|
2333
|
+
reflectRenderedListSelection(values, sourceOptions) {
|
|
2334
|
+
if (!this.selectListElement)
|
|
2335
|
+
return;
|
|
2336
|
+
const options = sourceOptions ?? this.getCurrentOptions();
|
|
2337
|
+
// `select-list` expõe uma coleção controlada; o pai não precisa conhecer
|
|
2338
|
+
// os nós internos (nem atravessar `shadowRoot`) para refletir a seleção.
|
|
2339
|
+
this.selectListElement.options = this.getListOptions(options.map((option) => ({ ...option, selected: values.includes(option.value) })));
|
|
2340
|
+
}
|
|
2341
|
+
isSelectAllLabel(label) {
|
|
2342
|
+
return label === this.selectAllLabel || label === this.unselectAllLabel;
|
|
2343
|
+
}
|
|
2344
|
+
isSelectAllOption(option) {
|
|
2345
|
+
return option.value === select_utils.SELECT_ALL_OPTION_VALUE || this.isSelectAllLabel(this.getOptionLabel(option));
|
|
2346
|
+
}
|
|
2347
|
+
getSelectAllLabel(selected, indeterminate) {
|
|
2348
|
+
return selected && !indeterminate ? this.unselectAllLabel : this.selectAllLabel;
|
|
2349
|
+
}
|
|
2350
|
+
normalizeSelectAllState(option) {
|
|
2351
|
+
const selected = Boolean(option.selected) && !option.indeterminate;
|
|
2352
|
+
const indeterminate = Boolean(option.indeterminate);
|
|
2353
|
+
option.selected = selected;
|
|
2354
|
+
option.indeterminate = indeterminate;
|
|
2355
|
+
option.label = this.getSelectAllLabel(selected, indeterminate);
|
|
2356
|
+
}
|
|
2357
|
+
handleOutsideClick(ev) {
|
|
2358
|
+
if (!this.effectiveOpen)
|
|
2359
|
+
return;
|
|
2360
|
+
const clickPath = this.getEventPath(ev);
|
|
2361
|
+
const isClickInsideSelect = clickPath.includes(this.el);
|
|
2362
|
+
if (isClickInsideSelect)
|
|
2363
|
+
return;
|
|
2364
|
+
this.close();
|
|
2365
|
+
}
|
|
2366
|
+
emitStateChange(option) {
|
|
2367
|
+
const payload = this.getStateChangeDetail(option);
|
|
2368
|
+
const nextStateKey = JSON.stringify(payload);
|
|
2369
|
+
if (!this.isStateChangeReady) {
|
|
2370
|
+
this.lastEmittedStateKey = nextStateKey;
|
|
2371
|
+
return;
|
|
2372
|
+
}
|
|
2373
|
+
if (this.lastEmittedStateKey === nextStateKey)
|
|
2374
|
+
return;
|
|
2375
|
+
this.lastEmittedStateKey = nextStateKey;
|
|
2376
|
+
this.brSelectStateChange.emit(payload);
|
|
2377
|
+
}
|
|
2378
|
+
getStateChangeDetail(optionChange) {
|
|
2379
|
+
const payload = {
|
|
2380
|
+
isOpen: this.effectiveOpen,
|
|
2381
|
+
};
|
|
2382
|
+
const currentOptions = this.getFormOptions(this.getCurrentOptions());
|
|
2383
|
+
if (this.effectiveMultiple) {
|
|
2384
|
+
payload.options = currentOptions
|
|
2385
|
+
.filter((option) => !this.isSelectAllLabel((option.label ?? option.value).trim()))
|
|
2386
|
+
.map((option) => this.normalizeOptionForOutput(option));
|
|
2387
|
+
return payload;
|
|
2388
|
+
}
|
|
2389
|
+
const selectedOption = currentOptions.find((option) => Boolean(option.selected));
|
|
2390
|
+
if (selectedOption) {
|
|
2391
|
+
payload.option = this.normalizeOptionForOutput(selectedOption);
|
|
2392
|
+
return payload;
|
|
2393
|
+
}
|
|
2394
|
+
if (optionChange?.value) {
|
|
2395
|
+
const { disabled: _disabled, ...normalizedOption } = optionChange;
|
|
2396
|
+
payload.option = {
|
|
2397
|
+
...normalizedOption,
|
|
2398
|
+
label: optionChange.label ?? optionChange.value,
|
|
2399
|
+
};
|
|
2400
|
+
}
|
|
2401
|
+
return payload;
|
|
2402
|
+
}
|
|
2403
|
+
normalizeOptionForOutput(option) {
|
|
2404
|
+
const optionLabel = (option.label ?? option.value).trim();
|
|
2405
|
+
const isSelectAll = this.isSelectAllLabel(optionLabel);
|
|
2406
|
+
const { disabled: _disabled, ...optionWithoutDisabled } = option;
|
|
2407
|
+
if (isSelectAll) {
|
|
2408
|
+
return optionWithoutDisabled;
|
|
2409
|
+
}
|
|
2410
|
+
const { indeterminate, ...normalized } = optionWithoutDisabled;
|
|
2411
|
+
return normalized;
|
|
2412
|
+
}
|
|
2413
|
+
getStateChangeKey() {
|
|
2414
|
+
return JSON.stringify(this.getStateChangeDetail());
|
|
2415
|
+
}
|
|
2416
|
+
/**
|
|
2417
|
+
* Obtém o snapshot atual das opções respeitando a fonte mais atual disponível.
|
|
2418
|
+
*
|
|
2419
|
+
* @returns A coleção de opções normalizadas para leitura do estado público.
|
|
2420
|
+
* @remarks
|
|
2421
|
+
* A precedência é: lista interna, opções pendentes, conteúdo do slot e, por último,
|
|
2422
|
+
* os filhos atuais do host.
|
|
2423
|
+
*/
|
|
2424
|
+
getCurrentOptions() {
|
|
2425
|
+
// As opções projetadas são a fonte principal quando não há coleção
|
|
2426
|
+
// imperativa: a lista virtualizada pode manter um snapshot enquanto o
|
|
2427
|
+
// consumidor altera `selected` diretamente no slot.
|
|
2428
|
+
if (!this.hasImperativeOptions && this.slotElement) {
|
|
2429
|
+
const nodes = this.slotElement.assignedNodes({ flatten: true }) ?? [];
|
|
2430
|
+
const slotOptions = nodes
|
|
2431
|
+
.map((node) => this.nodeToOption(node))
|
|
2432
|
+
.filter((option) => Boolean(option));
|
|
2433
|
+
if (slotOptions.length > 0) {
|
|
2434
|
+
const normalizedSlotOptions = this.applyCanonicalSelection(slotOptions);
|
|
2435
|
+
return this.getListOptions(normalizedSlotOptions);
|
|
2436
|
+
}
|
|
2437
|
+
}
|
|
2438
|
+
const listOptions = this.getSelectListController()?.options;
|
|
2439
|
+
if (Array.isArray(listOptions) && listOptions.length > 0) {
|
|
2440
|
+
const normalizedListOptions = listOptions.map((option) => ({ ...option }));
|
|
2441
|
+
const hasRealOptions = normalizedListOptions.some((option) => !this.isSelectAllLabel(this.getOptionLabel(option)));
|
|
2442
|
+
if (hasRealOptions) {
|
|
2443
|
+
return this.getListOptions(normalizedListOptions);
|
|
2444
|
+
}
|
|
2445
|
+
}
|
|
2446
|
+
if (this.pendingOptions) {
|
|
2447
|
+
return this.getListOptions(this.pendingOptions);
|
|
2448
|
+
}
|
|
2449
|
+
// Depois de setOptions(), a coleção imperativa é a fonte: uma resposta vazia
|
|
2450
|
+
// não volta a exibir as opções declaradas no HTML.
|
|
2451
|
+
if (this.hasImperativeOptions)
|
|
2452
|
+
return this.getListOptions([]);
|
|
2453
|
+
const hostOptions = this.applyCanonicalSelection(this.getHostOptions());
|
|
2454
|
+
return this.getListOptions(hostOptions);
|
|
2455
|
+
}
|
|
2456
|
+
getNavigableOptions() {
|
|
2457
|
+
const currentOptions = this.getCurrentOptions();
|
|
2458
|
+
const hostOptions = this.hasImperativeOptions ? [] : this.getHostOptions();
|
|
2459
|
+
const hostDisabledState = new Map(hostOptions.map((option) => [option.value, Boolean(option.disabled)]));
|
|
2460
|
+
const options = currentOptions.map((option) => hostDisabledState.has(option.value) ? { ...option, disabled: hostDisabledState.get(option.value) } : option);
|
|
2461
|
+
const localSearchTerm = this.effectiveSearchMode === 'local' ? this.listSearchTerm : '';
|
|
2462
|
+
return select_utils.filterSelectOptions(options, localSearchTerm, this.selectAllLabel, this.unselectAllLabel);
|
|
2463
|
+
}
|
|
2464
|
+
clearSearch() {
|
|
2465
|
+
if (!this.searchTerm)
|
|
2466
|
+
return;
|
|
2467
|
+
this.searchTerm = '';
|
|
2468
|
+
this.activeOptionIndex = -1;
|
|
2469
|
+
void this.getSelectListController()?.setSearchTerm?.('');
|
|
2470
|
+
}
|
|
2471
|
+
getEventPath(ev) {
|
|
2472
|
+
return ev.composedPath ? ev.composedPath() : (ev.path ?? []);
|
|
2473
|
+
}
|
|
2474
|
+
getSelectListController() {
|
|
2475
|
+
return this.selectListElement;
|
|
2476
|
+
}
|
|
2477
|
+
getCssClassMap() {
|
|
2478
|
+
return {
|
|
2479
|
+
'br-select': true,
|
|
2480
|
+
};
|
|
2481
|
+
}
|
|
2482
|
+
getAccessibleLabel() {
|
|
2483
|
+
return this.label?.trim() || this.placeholder?.trim() || 'Selecao';
|
|
2484
|
+
}
|
|
2485
|
+
setSelectionMode(isMultiple) {
|
|
2486
|
+
this.selectListElement?.setMultiple(isMultiple);
|
|
2487
|
+
}
|
|
2488
|
+
renderSelectInput() {
|
|
2489
|
+
return (index.h("br-select-input", { part: "input", exportparts: "container:input-container, input:input-field, label:input-label, group:input-group, icon:input-icon, action:input-action, action-button:input-action-button, clear:input-clear", ref: (el) => (this.selectInputElement = el), "aria-disabled": String(this.isDisabled()), "aria-label": this.getAccessibleLabel(), borderless: this.borderless, density: this.effectiveDensity, "is-inline": this.effectiveInline, "is-open": this.effectiveOpen, label: this.label, name: this.name, placeholder: this.placeholder, required: this.required, disabled: this.isDisabled(), filterable: this.filterable, showSearchIcon: this.showSearchIcon, clearable: this.filterable && this.effectiveOpen, autocomplete: this.effectiveAutocomplete, "input-width": this.inputWidth, value: this.filterable && this.effectiveOpen ? this.searchTerm : this.getRenderedDisplayValue() }));
|
|
2490
|
+
}
|
|
2491
|
+
renderSelectList() {
|
|
2492
|
+
return (index.h("br-select-list", { part: "list", "aria-hidden": "true", onMouseDown: (event) => {
|
|
2493
|
+
event.preventDefault();
|
|
2494
|
+
void this.selectInputElement?.setFocus();
|
|
2495
|
+
}, options: this.getListOptions(this.getCurrentOptions()), exportparts: "list, option, checkbox, select-all, empty-option, option-checkbox, option-radio, option-group", "active-option-index": this.isActiveIndicatorHidden ? -1 : this.activeOptionIndex, "aria-label": this.getAccessibleLabel(), "aria-multiselectable": this.effectiveMultiple ? 'true' : 'false', density: this.effectiveDensity, id: this.listboxId, "visible-items": this.effectiveVisibleItems, "item-height": this.effectiveItemHeight, overscan: this.effectiveOverscan, hideDividers: this.hideDividers, "search-term": this.listSearchTerm, "search-mode": this.effectiveSearchMode, role: "listbox", "select-all-label": this.selectAllLabel, "unselect-all-label": this.unselectAllLabel, ref: (el) => {
|
|
2496
|
+
this.selectListElement = el;
|
|
2497
|
+
this.selectListElement.loading = this.loading;
|
|
2498
|
+
this.setSelectionMode(this.effectiveMultiple);
|
|
2499
|
+
void this.getSelectListController()?.setSearchTerm?.(this.listSearchTerm);
|
|
2500
|
+
} }, index.h("slot", null), index.h("slot", { name: "loading", slot: "loading" }, index.h("br-loading", { size: "small", label: "Pesquisando\u2026", labelPosition: "right" }))));
|
|
2501
|
+
}
|
|
2502
|
+
renderHiddenSelect() {
|
|
2503
|
+
const options = this.getFormOptions(this.getCurrentOptions()).filter((option) => !this.isSelectAllLabel(this.getOptionLabel(option)));
|
|
2504
|
+
const hasSelection = options.some((option) => option.selected);
|
|
2505
|
+
return (index.h("select", { ref: (el) => (this.nativeSelect = el), part: "hidden-select", name: this.name, autocomplete: this.effectiveAutocomplete, multiple: this.effectiveMultiple, required: this.required, disabled: this.isDisabled(), tabIndex: -1, "aria-hidden": "true", style: {
|
|
2506
|
+
position: 'absolute',
|
|
2507
|
+
width: '1px',
|
|
2508
|
+
height: '1px',
|
|
2509
|
+
padding: '0',
|
|
2510
|
+
margin: '-1px',
|
|
2511
|
+
overflow: 'hidden',
|
|
2512
|
+
clip: 'rect(0, 0, 0, 0)',
|
|
2513
|
+
whiteSpace: 'nowrap',
|
|
2514
|
+
border: '0',
|
|
2515
|
+
}, onChange: (event) => event.preventDefault() }, index.h("option", { value: "", selected: !hasSelection }), this.getNativeOptionGroups(options).map((optionGroup, groupIndex) => {
|
|
2516
|
+
const nativeOptions = optionGroup.options.map((option) => this.renderNativeOption(option));
|
|
2517
|
+
if (!optionGroup.group)
|
|
2518
|
+
return nativeOptions;
|
|
2519
|
+
return (index.h("optgroup", { key: `${optionGroup.group}:${groupIndex}`, label: optionGroup.group }, nativeOptions));
|
|
2520
|
+
})));
|
|
2521
|
+
}
|
|
2522
|
+
getNativeOptionGroups(options) {
|
|
2523
|
+
return options.reduce((groups, option) => {
|
|
2524
|
+
const group = option.group?.trim() || undefined;
|
|
2525
|
+
const currentGroup = groups.at(-1);
|
|
2526
|
+
if (!currentGroup || currentGroup.group !== group) {
|
|
2527
|
+
groups.push({ group, options: [option] });
|
|
2528
|
+
}
|
|
2529
|
+
else {
|
|
2530
|
+
currentGroup.options.push(option);
|
|
2531
|
+
}
|
|
2532
|
+
return groups;
|
|
2533
|
+
}, []);
|
|
2534
|
+
}
|
|
2535
|
+
renderNativeOption(option) {
|
|
2536
|
+
return (index.h("option", { key: option.value, value: option.value, selected: option.selected, disabled: option.disabled }));
|
|
2537
|
+
}
|
|
2538
|
+
render() {
|
|
2539
|
+
return (index.h(index.Host, { key: '069ea9baa54541cd5a244ec5844076688667fb2f', "aria-busy": this.isValidating || this.loading ? 'true' : null }, index.h("div", { key: '06f1ad8ab886e38e44dc32aba6e9844fa8f7005d', class: this.getCssClassMap(), part: "container" }, this.renderSelectInput(), this.renderSelectList(), index.h("div", { key: '854c1652fdd2f7898161bf5e2b1f421777b13f67', part: "feedback", hidden: !this.hasFeedbackSlot && !this.validationErrorMessage }, index.h("slot", { key: 'e2f9e8d2cf923c141ad99548199a83220875c856', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = slot.hasAssignedSlotContent(event.currentTarget)) }, this.validationErrorMessage ? (index.h("br-message", { "is-feedback": true, state: "danger", message: this.validationErrorMessage })) : null)), index.h("div", { key: 'eeae8b42349885ab811d70e713efcd8d07a14901', part: "validation-loading", hidden: !this.hasValidationLoadingSlot || !this.isValidating }, index.h("slot", { key: 'c0f8cf4f917845629b34e32f597409571abf402e', name: "validation-loading" })), this.renderHiddenSelect())));
|
|
2540
|
+
}
|
|
2541
|
+
static get formAssociated() { return true; }
|
|
2542
|
+
get el() { return index.getElement(this); }
|
|
2543
|
+
static get watchers() { return {
|
|
2544
|
+
"disabled": [{
|
|
2545
|
+
"handleDisabledChange": 0
|
|
2546
|
+
}],
|
|
2547
|
+
"isOpen": [{
|
|
2548
|
+
"handleIsOpenChange": 0
|
|
2549
|
+
}],
|
|
2550
|
+
"filterable": [{
|
|
2551
|
+
"handleFilterableChange": 0
|
|
2552
|
+
}],
|
|
2553
|
+
"loading": [{
|
|
2554
|
+
"handleLoadingChange": 0
|
|
2555
|
+
}],
|
|
2556
|
+
"isMultiple": [{
|
|
2557
|
+
"handleIsMultipleChange": 0
|
|
2558
|
+
}],
|
|
2559
|
+
"multiple": [{
|
|
2560
|
+
"handleMultipleChange": 0
|
|
2561
|
+
}],
|
|
2562
|
+
"open": [{
|
|
2563
|
+
"handleOpenChange": 0
|
|
2564
|
+
}],
|
|
2565
|
+
"value": [{
|
|
2566
|
+
"handleExternalValueChange": 0
|
|
2567
|
+
}],
|
|
2568
|
+
"options": [{
|
|
2569
|
+
"handleOptionsChange": 0
|
|
2570
|
+
}]
|
|
2571
|
+
}; }
|
|
2572
|
+
};
|
|
2573
|
+
Select.SELECT_ALL_LABEL = 'Selecionar todos';
|
|
2574
|
+
Select.DESELECT_ALL_LABEL = 'Desselecionar todos';
|
|
2575
|
+
Select.style = selectCss();
|
|
2576
|
+
|
|
2577
|
+
exports.br_pagination = Pagination;
|
|
2578
|
+
exports.br_select = Select;
|