@slotted/angular 0.1.0-beta.1 → 0.1.0-beta.11
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 +4 -0
- package/docs/AGENTS.snippet.md +12 -0
- package/docs/action-bar.json +4 -4
- package/docs/action-bar.md +3 -3
- package/docs/alert.json +7 -1
- package/docs/alert.md +3 -3
- package/docs/app-shell.examples.md +1 -1
- package/docs/app-shell.json +5 -5
- package/docs/app-shell.md +2 -2
- package/docs/avatar.json +22 -1
- package/docs/avatar.md +5 -3
- package/docs/badge.json +7 -1
- package/docs/badge.md +3 -3
- package/docs/button-group.json +2 -0
- package/docs/button-group.md +1 -1
- package/docs/button.json +51 -11
- package/docs/button.md +10 -6
- package/docs/calendar.json +8 -1
- package/docs/calendar.md +3 -2
- package/docs/cascader.json +1 -0
- package/docs/cascader.md +1 -1
- package/docs/chart.examples.md +1 -1
- package/docs/chart.json +10 -1
- package/docs/chart.md +3 -2
- package/docs/checkbox.json +7 -0
- package/docs/checkbox.md +1 -0
- package/docs/code-block.json +92 -92
- package/docs/code-block.md +69 -69
- package/docs/combobox.json +1 -0
- package/docs/combobox.md +1 -1
- package/docs/command-palette.json +1 -0
- package/docs/command-palette.md +1 -1
- package/docs/currency-field.json +40 -1
- package/docs/currency-field.md +5 -1
- package/docs/data-grid.examples.md +2 -2
- package/docs/data-grid.json +45 -7
- package/docs/data-grid.md +3 -1
- package/docs/data-grid.props.md +7 -4
- package/docs/data-list.json +2 -1
- package/docs/data-list.md +1 -1
- package/docs/date-field.json +9 -1
- package/docs/date-field.md +3 -2
- package/docs/date-picker.examples.md +36 -0
- package/docs/date-picker.json +20 -5
- package/docs/date-picker.md +5 -4
- package/docs/datetime-field.json +1 -0
- package/docs/datetime-field.md +1 -1
- package/docs/detail-panel.json +4 -2
- package/docs/detail-panel.md +8 -3
- package/docs/dialog.examples.md +158 -136
- package/docs/dialog.json +36 -11
- package/docs/dialog.md +4 -2
- package/docs/dialog.props.md +1 -1
- package/docs/drawer.json +11 -4
- package/docs/drawer.md +4 -3
- package/docs/entity-picker.json +19 -4
- package/docs/entity-picker.md +8 -6
- package/docs/event-calendar.json +7 -0
- package/docs/event-calendar.md +3 -2
- package/docs/filter-bar.json +118 -118
- package/docs/filter-bar.md +79 -79
- package/docs/form.json +2 -1
- package/docs/form.md +1 -1
- package/docs/guidelines/README.md +27 -0
- package/docs/guidelines/async-feedback.md +129 -0
- package/docs/guidelines/browsing.md +74 -0
- package/docs/guidelines/builders.md +97 -0
- package/docs/guidelines/composition.md +143 -0
- package/docs/guidelines/conversations.md +59 -0
- package/docs/guidelines/errors-and-conflicts.md +71 -0
- package/docs/guidelines/forms.md +202 -0
- package/docs/guidelines/index.md +130 -0
- package/docs/guidelines/layout-alignment.md +105 -0
- package/docs/guidelines/ledgers.md +45 -0
- package/docs/guidelines/list-pages.md +206 -0
- package/docs/guidelines/overviews.md +76 -0
- package/docs/guidelines/own-elements.md +115 -0
- package/docs/guidelines/reading-permissions.md +55 -0
- package/docs/guidelines/record-pages.md +178 -0
- package/docs/guidelines/reports.md +123 -0
- package/docs/guidelines/shell-composition.md +94 -0
- package/docs/guidelines/workspaces.md +46 -0
- package/docs/icon.json +3 -1
- package/docs/icon.md +3 -3
- package/docs/index.md +12 -0
- package/docs/inline-message.json +14 -2
- package/docs/inline-message.md +4 -3
- package/docs/list-item.json +9 -1
- package/docs/list-item.md +3 -3
- package/docs/list.json +19 -1
- package/docs/list.md +3 -1
- package/docs/markdown.json +79 -79
- package/docs/markdown.md +65 -65
- package/docs/menu.json +12 -0
- package/docs/menu.md +2 -0
- package/docs/message.json +7 -1
- package/docs/message.md +3 -3
- package/docs/multi-select.json +1 -0
- package/docs/multi-select.md +1 -1
- package/docs/notification-center.json +4 -0
- package/docs/notification-center.md +2 -2
- package/docs/number-field.json +1 -0
- package/docs/number-field.md +1 -1
- package/docs/otp-input.json +1 -0
- package/docs/otp-input.md +1 -1
- package/docs/page-header.json +22 -5
- package/docs/page-header.md +6 -4
- package/docs/page.json +2 -0
- package/docs/page.md +2 -1
- package/docs/popover.json +1 -1
- package/docs/progress-indicator.json +4 -3
- package/docs/progress-indicator.md +4 -4
- package/docs/prompt-composer.json +41 -1
- package/docs/prompt-composer.md +5 -1
- package/docs/rating.json +5 -3
- package/docs/rating.md +6 -6
- package/docs/section.json +28 -16
- package/docs/section.md +12 -10
- package/docs/segmented-control.json +36 -12
- package/docs/segmented-control.md +17 -1
- package/docs/select.json +1 -0
- package/docs/select.md +1 -1
- package/docs/side-navigation.json +1 -0
- package/docs/side-navigation.md +1 -1
- package/docs/skills/build-own-element/SKILL.md +90 -0
- package/docs/skills/compose-screen/SKILL.md +103 -0
- package/docs/skills/index.md +9 -0
- package/docs/skills/review-screen/SKILL.md +79 -0
- package/docs/skills/theme-app/SKILL.md +98 -0
- package/docs/skills/waiting-states/SKILL.md +143 -0
- package/docs/sparkline.json +5 -2
- package/docs/sparkline.md +4 -4
- package/docs/split-button.json +4 -1
- package/docs/split-button.md +3 -3
- package/docs/stat-card.json +5 -1
- package/docs/stat-card.md +3 -3
- package/docs/table.examples.md +3 -3
- package/docs/table.json +85 -3
- package/docs/table.md +12 -1
- package/docs/tabs.json +17 -7
- package/docs/tabs.md +3 -2
- package/docs/tag.json +14 -4
- package/docs/tag.md +6 -6
- package/docs/tags-input.json +29 -2
- package/docs/tags-input.md +4 -1
- package/docs/text-field.json +2 -1
- package/docs/text-field.md +2 -2
- package/docs/textarea.json +1 -0
- package/docs/textarea.md +1 -1
- package/docs/time-field.json +1 -0
- package/docs/time-field.md +1 -1
- package/docs/timeline.json +138 -132
- package/docs/timeline.md +125 -125
- package/docs/toast.json +8 -1
- package/docs/toast.md +3 -3
- package/docs/toggle-group.json +14 -3
- package/docs/toggle-group.md +3 -3
- package/docs/toggle.json +12 -3
- package/docs/toggle.md +3 -3
- package/docs/tokens.md +467 -0
- package/docs/toolbar.json +1 -1
- package/docs/toolbar.md +1 -1
- package/docs/tour.json +1 -1
- package/docs/typography.json +4 -2
- package/docs/typography.md +5 -5
- package/fesm2022/slotted-angular-accordion.mjs +4 -2
- package/fesm2022/slotted-angular-accordion.mjs.map +1 -1
- package/fesm2022/slotted-angular-action-bar.mjs +27 -12
- package/fesm2022/slotted-angular-action-bar.mjs.map +1 -1
- package/fesm2022/slotted-angular-action-sheet.mjs +48 -29
- package/fesm2022/slotted-angular-action-sheet.mjs.map +1 -1
- package/fesm2022/slotted-angular-alert.mjs +18 -11
- package/fesm2022/slotted-angular-alert.mjs.map +1 -1
- package/fesm2022/slotted-angular-app-shell.mjs +111 -61
- package/fesm2022/slotted-angular-app-shell.mjs.map +1 -1
- package/fesm2022/slotted-angular-aspect-ratio.mjs +4 -2
- package/fesm2022/slotted-angular-aspect-ratio.mjs.map +1 -1
- package/fesm2022/slotted-angular-attachment.mjs +31 -20
- package/fesm2022/slotted-angular-attachment.mjs.map +1 -1
- package/fesm2022/slotted-angular-avatar-group.mjs +9 -6
- package/fesm2022/slotted-angular-avatar-group.mjs.map +1 -1
- package/fesm2022/slotted-angular-avatar.mjs +14 -7
- package/fesm2022/slotted-angular-avatar.mjs.map +1 -1
- package/fesm2022/slotted-angular-badge.mjs +14 -10
- package/fesm2022/slotted-angular-badge.mjs.map +1 -1
- package/fesm2022/slotted-angular-breadcrumb.mjs +26 -18
- package/fesm2022/slotted-angular-breadcrumb.mjs.map +1 -1
- package/fesm2022/slotted-angular-button-group.mjs +7 -4
- package/fesm2022/slotted-angular-button-group.mjs.map +1 -1
- package/fesm2022/slotted-angular-button.mjs +120 -29
- package/fesm2022/slotted-angular-button.mjs.map +1 -1
- package/fesm2022/slotted-angular-calendar.mjs +235 -58
- package/fesm2022/slotted-angular-calendar.mjs.map +1 -1
- package/fesm2022/slotted-angular-card.mjs +18 -16
- package/fesm2022/slotted-angular-card.mjs.map +1 -1
- package/fesm2022/slotted-angular-carousel.mjs +22 -11
- package/fesm2022/slotted-angular-carousel.mjs.map +1 -1
- package/fesm2022/slotted-angular-cascader.mjs +180 -66
- package/fesm2022/slotted-angular-cascader.mjs.map +1 -1
- package/fesm2022/slotted-angular-chart.mjs +53 -20
- package/fesm2022/slotted-angular-chart.mjs.map +1 -1
- package/fesm2022/slotted-angular-checkbox-group.mjs +5 -3
- package/fesm2022/slotted-angular-checkbox-group.mjs.map +1 -1
- package/fesm2022/slotted-angular-checkbox.mjs +23 -9
- package/fesm2022/slotted-angular-checkbox.mjs.map +1 -1
- package/fesm2022/slotted-angular-code-block.mjs +29 -15
- package/fesm2022/slotted-angular-code-block.mjs.map +1 -1
- package/fesm2022/slotted-angular-collapsible.mjs +20 -15
- package/fesm2022/slotted-angular-collapsible.mjs.map +1 -1
- package/fesm2022/slotted-angular-color-picker.mjs +77 -22
- package/fesm2022/slotted-angular-color-picker.mjs.map +1 -1
- package/fesm2022/slotted-angular-column-manager.mjs +68 -31
- package/fesm2022/slotted-angular-column-manager.mjs.map +1 -1
- package/fesm2022/slotted-angular-combobox.mjs +118 -39
- package/fesm2022/slotted-angular-combobox.mjs.map +1 -1
- package/fesm2022/slotted-angular-command-palette.mjs +162 -54
- package/fesm2022/slotted-angular-command-palette.mjs.map +1 -1
- package/fesm2022/slotted-angular-container.mjs +6 -4
- package/fesm2022/slotted-angular-container.mjs.map +1 -1
- package/fesm2022/slotted-angular-context-menu.mjs +5 -4
- package/fesm2022/slotted-angular-context-menu.mjs.map +1 -1
- package/fesm2022/slotted-angular-currency-field.mjs +149 -32
- package/fesm2022/slotted-angular-currency-field.mjs.map +1 -1
- package/fesm2022/slotted-angular-dashboard-grid.mjs +142 -63
- package/fesm2022/slotted-angular-dashboard-grid.mjs.map +1 -1
- package/fesm2022/slotted-angular-data-grid.mjs +480 -129
- package/fesm2022/slotted-angular-data-grid.mjs.map +1 -1
- package/fesm2022/slotted-angular-data-list.mjs +83 -50
- package/fesm2022/slotted-angular-data-list.mjs.map +1 -1
- package/fesm2022/slotted-angular-date-field.mjs +74 -25
- package/fesm2022/slotted-angular-date-field.mjs.map +1 -1
- package/fesm2022/slotted-angular-date-picker.mjs +112 -40
- package/fesm2022/slotted-angular-date-picker.mjs.map +1 -1
- package/fesm2022/slotted-angular-date-range-picker.mjs +45 -22
- package/fesm2022/slotted-angular-date-range-picker.mjs.map +1 -1
- package/fesm2022/slotted-angular-datetime-field.mjs +48 -16
- package/fesm2022/slotted-angular-datetime-field.mjs.map +1 -1
- package/fesm2022/slotted-angular-datetime-picker.mjs +41 -29
- package/fesm2022/slotted-angular-datetime-picker.mjs.map +1 -1
- package/fesm2022/slotted-angular-datetime-range-picker.mjs +115 -48
- package/fesm2022/slotted-angular-datetime-range-picker.mjs.map +1 -1
- package/fesm2022/slotted-angular-description-list.mjs +33 -19
- package/fesm2022/slotted-angular-description-list.mjs.map +1 -1
- package/fesm2022/slotted-angular-detail-panel.mjs +48 -30
- package/fesm2022/slotted-angular-detail-panel.mjs.map +1 -1
- package/fesm2022/slotted-angular-dialog.mjs +72 -30
- package/fesm2022/slotted-angular-dialog.mjs.map +1 -1
- package/fesm2022/slotted-angular-divider.mjs +7 -5
- package/fesm2022/slotted-angular-divider.mjs.map +1 -1
- package/fesm2022/slotted-angular-drawer.mjs +91 -37
- package/fesm2022/slotted-angular-drawer.mjs.map +1 -1
- package/fesm2022/slotted-angular-entity-picker.mjs +474 -75
- package/fesm2022/slotted-angular-entity-picker.mjs.map +1 -1
- package/fesm2022/slotted-angular-event-calendar.mjs +275 -108
- package/fesm2022/slotted-angular-event-calendar.mjs.map +1 -1
- package/fesm2022/slotted-angular-field-group.mjs +14 -7
- package/fesm2022/slotted-angular-field-group.mjs.map +1 -1
- package/fesm2022/slotted-angular-field.mjs +35 -15
- package/fesm2022/slotted-angular-field.mjs.map +1 -1
- package/fesm2022/slotted-angular-filter-bar.mjs +118 -51
- package/fesm2022/slotted-angular-filter-bar.mjs.map +1 -1
- package/fesm2022/slotted-angular-form.mjs +18 -10
- package/fesm2022/slotted-angular-form.mjs.map +1 -1
- package/fesm2022/slotted-angular-fullscreen.mjs +14 -8
- package/fesm2022/slotted-angular-fullscreen.mjs.map +1 -1
- package/fesm2022/slotted-angular-grid.mjs +4 -2
- package/fesm2022/slotted-angular-grid.mjs.map +1 -1
- package/fesm2022/slotted-angular-highlight.mjs +5 -3
- package/fesm2022/slotted-angular-highlight.mjs.map +1 -1
- package/fesm2022/slotted-angular-hover-card.mjs +5 -4
- package/fesm2022/slotted-angular-hover-card.mjs.map +1 -1
- package/fesm2022/slotted-angular-icon.mjs +6 -3
- package/fesm2022/slotted-angular-icon.mjs.map +1 -1
- package/fesm2022/slotted-angular-image.mjs +13 -10
- package/fesm2022/slotted-angular-image.mjs.map +1 -1
- package/fesm2022/slotted-angular-import-export-center.mjs +175 -99
- package/fesm2022/slotted-angular-import-export-center.mjs.map +1 -1
- package/fesm2022/slotted-angular-inline-message.mjs +88 -13
- package/fesm2022/slotted-angular-inline-message.mjs.map +1 -1
- package/fesm2022/slotted-angular-inline.mjs +4 -2
- package/fesm2022/slotted-angular-inline.mjs.map +1 -1
- package/fesm2022/slotted-angular-kbd.mjs +11 -7
- package/fesm2022/slotted-angular-kbd.mjs.map +1 -1
- package/fesm2022/slotted-angular-link.mjs +5 -3
- package/fesm2022/slotted-angular-link.mjs.map +1 -1
- package/fesm2022/slotted-angular-list-item.mjs +21 -18
- package/fesm2022/slotted-angular-list-item.mjs.map +1 -1
- package/fesm2022/slotted-angular-list.mjs +37 -22
- package/fesm2022/slotted-angular-list.mjs.map +1 -1
- package/fesm2022/slotted-angular-listbox.mjs +39 -21
- package/fesm2022/slotted-angular-listbox.mjs.map +1 -1
- package/fesm2022/slotted-angular-loading-overlay.mjs +59 -22
- package/fesm2022/slotted-angular-loading-overlay.mjs.map +1 -1
- package/fesm2022/slotted-angular-markdown.mjs +31 -19
- package/fesm2022/slotted-angular-markdown.mjs.map +1 -1
- package/fesm2022/slotted-angular-menu.mjs +51 -29
- package/fesm2022/slotted-angular-menu.mjs.map +1 -1
- package/fesm2022/slotted-angular-menubar.mjs +4 -2
- package/fesm2022/slotted-angular-menubar.mjs.map +1 -1
- package/fesm2022/slotted-angular-message-scroller.mjs +34 -15
- package/fesm2022/slotted-angular-message-scroller.mjs.map +1 -1
- package/fesm2022/slotted-angular-message.mjs +119 -51
- package/fesm2022/slotted-angular-message.mjs.map +1 -1
- package/fesm2022/slotted-angular-multi-select.mjs +195 -87
- package/fesm2022/slotted-angular-multi-select.mjs.map +1 -1
- package/fesm2022/slotted-angular-navigation-menu.mjs +34 -26
- package/fesm2022/slotted-angular-navigation-menu.mjs.map +1 -1
- package/fesm2022/slotted-angular-notification-center.mjs +108 -65
- package/fesm2022/slotted-angular-notification-center.mjs.map +1 -1
- package/fesm2022/slotted-angular-number-field.mjs +23 -11
- package/fesm2022/slotted-angular-number-field.mjs.map +1 -1
- package/fesm2022/slotted-angular-otp-input.mjs +13 -8
- package/fesm2022/slotted-angular-otp-input.mjs.map +1 -1
- package/fesm2022/slotted-angular-page-header.mjs +90 -48
- package/fesm2022/slotted-angular-page-header.mjs.map +1 -1
- package/fesm2022/slotted-angular-page.mjs +38 -10
- package/fesm2022/slotted-angular-page.mjs.map +1 -1
- package/fesm2022/slotted-angular-pagination.mjs +35 -22
- package/fesm2022/slotted-angular-pagination.mjs.map +1 -1
- package/fesm2022/slotted-angular-popover.mjs +32 -19
- package/fesm2022/slotted-angular-popover.mjs.map +1 -1
- package/fesm2022/slotted-angular-progress-indicator.mjs +236 -52
- package/fesm2022/slotted-angular-progress-indicator.mjs.map +1 -1
- package/fesm2022/slotted-angular-prompt-composer.mjs +57 -20
- package/fesm2022/slotted-angular-prompt-composer.mjs.map +1 -1
- package/fesm2022/slotted-angular-prose.mjs +14 -11
- package/fesm2022/slotted-angular-prose.mjs.map +1 -1
- package/fesm2022/slotted-angular-radio-group.mjs +15 -9
- package/fesm2022/slotted-angular-radio-group.mjs.map +1 -1
- package/fesm2022/slotted-angular-rating.mjs +138 -82
- package/fesm2022/slotted-angular-rating.mjs.map +1 -1
- package/fesm2022/slotted-angular-result-state.mjs +16 -12
- package/fesm2022/slotted-angular-result-state.mjs.map +1 -1
- package/fesm2022/slotted-angular-saved-views.mjs +43 -16
- package/fesm2022/slotted-angular-saved-views.mjs.map +1 -1
- package/fesm2022/slotted-angular-scroll-area.mjs +13 -5
- package/fesm2022/slotted-angular-scroll-area.mjs.map +1 -1
- package/fesm2022/slotted-angular-section.mjs +53 -18
- package/fesm2022/slotted-angular-section.mjs.map +1 -1
- package/fesm2022/slotted-angular-segmented-control.mjs +37 -11
- package/fesm2022/slotted-angular-segmented-control.mjs.map +1 -1
- package/fesm2022/slotted-angular-select.mjs +190 -94
- package/fesm2022/slotted-angular-select.mjs.map +1 -1
- package/fesm2022/slotted-angular-side-navigation.mjs +46 -35
- package/fesm2022/slotted-angular-side-navigation.mjs.map +1 -1
- package/fesm2022/slotted-angular-skeleton.mjs +32 -16
- package/fesm2022/slotted-angular-skeleton.mjs.map +1 -1
- package/fesm2022/slotted-angular-slider.mjs +31 -11
- package/fesm2022/slotted-angular-slider.mjs.map +1 -1
- package/fesm2022/slotted-angular-sparkline.mjs +41 -14
- package/fesm2022/slotted-angular-sparkline.mjs.map +1 -1
- package/fesm2022/slotted-angular-split-button.mjs +37 -11
- package/fesm2022/slotted-angular-split-button.mjs.map +1 -1
- package/fesm2022/slotted-angular-splitter.mjs +11 -9
- package/fesm2022/slotted-angular-splitter.mjs.map +1 -1
- package/fesm2022/slotted-angular-stack.mjs +4 -2
- package/fesm2022/slotted-angular-stack.mjs.map +1 -1
- package/fesm2022/slotted-angular-stat-card.mjs +35 -28
- package/fesm2022/slotted-angular-stat-card.mjs.map +1 -1
- package/fesm2022/slotted-angular-status-indicator.mjs +22 -8
- package/fesm2022/slotted-angular-status-indicator.mjs.map +1 -1
- package/fesm2022/slotted-angular-stepper.mjs +40 -15
- package/fesm2022/slotted-angular-stepper.mjs.map +1 -1
- package/fesm2022/slotted-angular-switch.mjs +15 -10
- package/fesm2022/slotted-angular-switch.mjs.map +1 -1
- package/fesm2022/slotted-angular-table-of-contents.mjs +29 -21
- package/fesm2022/slotted-angular-table-of-contents.mjs.map +1 -1
- package/fesm2022/slotted-angular-table.mjs +243 -73
- package/fesm2022/slotted-angular-table.mjs.map +1 -1
- package/fesm2022/slotted-angular-tabs.mjs +42 -18
- package/fesm2022/slotted-angular-tabs.mjs.map +1 -1
- package/fesm2022/slotted-angular-tag.mjs +19 -12
- package/fesm2022/slotted-angular-tag.mjs.map +1 -1
- package/fesm2022/slotted-angular-tags-input.mjs +253 -28
- package/fesm2022/slotted-angular-tags-input.mjs.map +1 -1
- package/fesm2022/slotted-angular-text-field.mjs +55 -15
- package/fesm2022/slotted-angular-text-field.mjs.map +1 -1
- package/fesm2022/slotted-angular-textarea.mjs +5 -3
- package/fesm2022/slotted-angular-textarea.mjs.map +1 -1
- package/fesm2022/slotted-angular-time-field.mjs +48 -14
- package/fesm2022/slotted-angular-time-field.mjs.map +1 -1
- package/fesm2022/slotted-angular-time-picker.mjs +32 -20
- package/fesm2022/slotted-angular-time-picker.mjs.map +1 -1
- package/fesm2022/slotted-angular-time-range-picker.mjs +113 -46
- package/fesm2022/slotted-angular-time-range-picker.mjs.map +1 -1
- package/fesm2022/slotted-angular-timeline.mjs +147 -64
- package/fesm2022/slotted-angular-timeline.mjs.map +1 -1
- package/fesm2022/slotted-angular-toast.mjs +43 -31
- package/fesm2022/slotted-angular-toast.mjs.map +1 -1
- package/fesm2022/slotted-angular-toggle-group.mjs +25 -8
- package/fesm2022/slotted-angular-toggle-group.mjs.map +1 -1
- package/fesm2022/slotted-angular-toggle.mjs +9 -4
- package/fesm2022/slotted-angular-toggle.mjs.map +1 -1
- package/fesm2022/slotted-angular-toolbar.mjs +27 -12
- package/fesm2022/slotted-angular-toolbar.mjs.map +1 -1
- package/fesm2022/slotted-angular-tooltip.mjs +15 -6
- package/fesm2022/slotted-angular-tooltip.mjs.map +1 -1
- package/fesm2022/slotted-angular-top-navigation.mjs +64 -44
- package/fesm2022/slotted-angular-top-navigation.mjs.map +1 -1
- package/fesm2022/slotted-angular-tour.mjs +47 -22
- package/fesm2022/slotted-angular-tour.mjs.map +1 -1
- package/fesm2022/slotted-angular-transfer.mjs +69 -30
- package/fesm2022/slotted-angular-transfer.mjs.map +1 -1
- package/fesm2022/slotted-angular-tree.mjs +80 -26
- package/fesm2022/slotted-angular-tree.mjs.map +1 -1
- package/fesm2022/slotted-angular-typography.mjs +8 -4
- package/fesm2022/slotted-angular-typography.mjs.map +1 -1
- package/fesm2022/slotted-angular-upload.mjs +125 -57
- package/fesm2022/slotted-angular-upload.mjs.map +1 -1
- package/fesm2022/slotted-angular-visually-hidden.mjs +4 -2
- package/fesm2022/slotted-angular-visually-hidden.mjs.map +1 -1
- package/fesm2022/slotted-angular-wizard.mjs +163 -65
- package/fesm2022/slotted-angular-wizard.mjs.map +1 -1
- package/package.json +3 -3
- package/types/slotted-angular-accordion.d.ts.map +1 -1
- package/types/slotted-angular-action-bar.d.ts +2 -0
- package/types/slotted-angular-action-bar.d.ts.map +1 -1
- package/types/slotted-angular-action-sheet.d.ts.map +1 -1
- package/types/slotted-angular-alert.d.ts +2 -2
- package/types/slotted-angular-alert.d.ts.map +1 -1
- package/types/slotted-angular-app-shell.d.ts +11 -3
- package/types/slotted-angular-app-shell.d.ts.map +1 -1
- package/types/slotted-angular-aspect-ratio.d.ts.map +1 -1
- package/types/slotted-angular-attachment.d.ts +1 -1
- package/types/slotted-angular-attachment.d.ts.map +1 -1
- package/types/slotted-angular-avatar-group.d.ts.map +1 -1
- package/types/slotted-angular-avatar.d.ts +11 -3
- package/types/slotted-angular-avatar.d.ts.map +1 -1
- package/types/slotted-angular-badge.d.ts +1 -1
- package/types/slotted-angular-badge.d.ts.map +1 -1
- package/types/slotted-angular-breadcrumb.d.ts.map +1 -1
- package/types/slotted-angular-button-group.d.ts +1 -1
- package/types/slotted-angular-button-group.d.ts.map +1 -1
- package/types/slotted-angular-button.d.ts +33 -13
- package/types/slotted-angular-button.d.ts.map +1 -1
- package/types/slotted-angular-calendar.d.ts +30 -2
- package/types/slotted-angular-calendar.d.ts.map +1 -1
- package/types/slotted-angular-card.d.ts.map +1 -1
- package/types/slotted-angular-carousel.d.ts.map +1 -1
- package/types/slotted-angular-cascader.d.ts.map +1 -1
- package/types/slotted-angular-chart.d.ts +10 -0
- package/types/slotted-angular-chart.d.ts.map +1 -1
- package/types/slotted-angular-checkbox-group.d.ts.map +1 -1
- package/types/slotted-angular-checkbox.d.ts +7 -1
- package/types/slotted-angular-checkbox.d.ts.map +1 -1
- package/types/slotted-angular-code-block.d.ts +1 -1
- package/types/slotted-angular-code-block.d.ts.map +1 -1
- package/types/slotted-angular-collapsible.d.ts +1 -1
- package/types/slotted-angular-collapsible.d.ts.map +1 -1
- package/types/slotted-angular-color-picker.d.ts.map +1 -1
- package/types/slotted-angular-column-manager.d.ts.map +1 -1
- package/types/slotted-angular-combobox.d.ts +5 -1
- package/types/slotted-angular-combobox.d.ts.map +1 -1
- package/types/slotted-angular-command-palette.d.ts +10 -1
- package/types/slotted-angular-command-palette.d.ts.map +1 -1
- package/types/slotted-angular-container.d.ts.map +1 -1
- package/types/slotted-angular-context-menu.d.ts.map +1 -1
- package/types/slotted-angular-currency-field.d.ts +63 -15
- package/types/slotted-angular-currency-field.d.ts.map +1 -1
- package/types/slotted-angular-dashboard-grid.d.ts.map +1 -1
- package/types/slotted-angular-data-grid.d.ts +72 -4
- package/types/slotted-angular-data-grid.d.ts.map +1 -1
- package/types/slotted-angular-data-list.d.ts.map +1 -1
- package/types/slotted-angular-date-field.d.ts +11 -1
- package/types/slotted-angular-date-field.d.ts.map +1 -1
- package/types/slotted-angular-date-picker.d.ts +38 -12
- package/types/slotted-angular-date-picker.d.ts.map +1 -1
- package/types/slotted-angular-date-range-picker.d.ts +0 -1
- package/types/slotted-angular-date-range-picker.d.ts.map +1 -1
- package/types/slotted-angular-datetime-field.d.ts.map +1 -1
- package/types/slotted-angular-datetime-picker.d.ts +0 -1
- package/types/slotted-angular-datetime-picker.d.ts.map +1 -1
- package/types/slotted-angular-datetime-range-picker.d.ts +0 -1
- package/types/slotted-angular-datetime-range-picker.d.ts.map +1 -1
- package/types/slotted-angular-description-list.d.ts.map +1 -1
- package/types/slotted-angular-detail-panel.d.ts.map +1 -1
- package/types/slotted-angular-dialog.d.ts +10 -3
- package/types/slotted-angular-dialog.d.ts.map +1 -1
- package/types/slotted-angular-divider.d.ts.map +1 -1
- package/types/slotted-angular-drawer.d.ts +12 -1
- package/types/slotted-angular-drawer.d.ts.map +1 -1
- package/types/slotted-angular-entity-picker.d.ts +63 -15
- package/types/slotted-angular-entity-picker.d.ts.map +1 -1
- package/types/slotted-angular-event-calendar.d.ts +9 -2
- package/types/slotted-angular-event-calendar.d.ts.map +1 -1
- package/types/slotted-angular-field-group.d.ts.map +1 -1
- package/types/slotted-angular-field.d.ts.map +1 -1
- package/types/slotted-angular-filter-bar.d.ts.map +1 -1
- package/types/slotted-angular-form.d.ts.map +1 -1
- package/types/slotted-angular-fullscreen.d.ts.map +1 -1
- package/types/slotted-angular-grid.d.ts.map +1 -1
- package/types/slotted-angular-highlight.d.ts.map +1 -1
- package/types/slotted-angular-hover-card.d.ts.map +1 -1
- package/types/slotted-angular-icon.d.ts +2 -2
- package/types/slotted-angular-icon.d.ts.map +1 -1
- package/types/slotted-angular-image.d.ts.map +1 -1
- package/types/slotted-angular-import-export-center.d.ts.map +1 -1
- package/types/slotted-angular-inline-message.d.ts +25 -25
- package/types/slotted-angular-inline-message.d.ts.map +1 -1
- package/types/slotted-angular-inline.d.ts.map +1 -1
- package/types/slotted-angular-kbd.d.ts.map +1 -1
- package/types/slotted-angular-link.d.ts.map +1 -1
- package/types/slotted-angular-list-item.d.ts +1 -1
- package/types/slotted-angular-list-item.d.ts.map +1 -1
- package/types/slotted-angular-list.d.ts +42 -27
- package/types/slotted-angular-list.d.ts.map +1 -1
- package/types/slotted-angular-listbox.d.ts.map +1 -1
- package/types/slotted-angular-loading-overlay.d.ts.map +1 -1
- package/types/slotted-angular-markdown.d.ts.map +1 -1
- package/types/slotted-angular-menu.d.ts +11 -2
- package/types/slotted-angular-menu.d.ts.map +1 -1
- package/types/slotted-angular-menubar.d.ts.map +1 -1
- package/types/slotted-angular-message-scroller.d.ts.map +1 -1
- package/types/slotted-angular-message.d.ts +1 -1
- package/types/slotted-angular-message.d.ts.map +1 -1
- package/types/slotted-angular-multi-select.d.ts +15 -1
- package/types/slotted-angular-multi-select.d.ts.map +1 -1
- package/types/slotted-angular-navigation-menu.d.ts.map +1 -1
- package/types/slotted-angular-notification-center.d.ts +1 -1
- package/types/slotted-angular-notification-center.d.ts.map +1 -1
- package/types/slotted-angular-number-field.d.ts.map +1 -1
- package/types/slotted-angular-otp-input.d.ts.map +1 -1
- package/types/slotted-angular-page-header.d.ts +15 -6
- package/types/slotted-angular-page-header.d.ts.map +1 -1
- package/types/slotted-angular-page.d.ts.map +1 -1
- package/types/slotted-angular-pagination.d.ts.map +1 -1
- package/types/slotted-angular-popover.d.ts.map +1 -1
- package/types/slotted-angular-progress-indicator.d.ts +8 -1
- package/types/slotted-angular-progress-indicator.d.ts.map +1 -1
- package/types/slotted-angular-prompt-composer.d.ts +11 -2
- package/types/slotted-angular-prompt-composer.d.ts.map +1 -1
- package/types/slotted-angular-prose.d.ts.map +1 -1
- package/types/slotted-angular-radio-group.d.ts.map +1 -1
- package/types/slotted-angular-rating.d.ts +1 -1
- package/types/slotted-angular-rating.d.ts.map +1 -1
- package/types/slotted-angular-result-state.d.ts.map +1 -1
- package/types/slotted-angular-saved-views.d.ts.map +1 -1
- package/types/slotted-angular-scroll-area.d.ts.map +1 -1
- package/types/slotted-angular-section.d.ts +11 -3
- package/types/slotted-angular-section.d.ts.map +1 -1
- package/types/slotted-angular-segmented-control.d.ts +15 -2
- package/types/slotted-angular-segmented-control.d.ts.map +1 -1
- package/types/slotted-angular-select.d.ts +12 -2
- package/types/slotted-angular-select.d.ts.map +1 -1
- package/types/slotted-angular-side-navigation.d.ts.map +1 -1
- package/types/slotted-angular-skeleton.d.ts.map +1 -1
- package/types/slotted-angular-slider.d.ts.map +1 -1
- package/types/slotted-angular-sparkline.d.ts +7 -1
- package/types/slotted-angular-sparkline.d.ts.map +1 -1
- package/types/slotted-angular-split-button.d.ts +2 -2
- package/types/slotted-angular-split-button.d.ts.map +1 -1
- package/types/slotted-angular-splitter.d.ts.map +1 -1
- package/types/slotted-angular-stack.d.ts.map +1 -1
- package/types/slotted-angular-stat-card.d.ts +1 -1
- package/types/slotted-angular-stat-card.d.ts.map +1 -1
- package/types/slotted-angular-status-indicator.d.ts +1 -1
- package/types/slotted-angular-status-indicator.d.ts.map +1 -1
- package/types/slotted-angular-stepper.d.ts +1 -1
- package/types/slotted-angular-stepper.d.ts.map +1 -1
- package/types/slotted-angular-switch.d.ts.map +1 -1
- package/types/slotted-angular-table-of-contents.d.ts.map +1 -1
- package/types/slotted-angular-table.d.ts +63 -6
- package/types/slotted-angular-table.d.ts.map +1 -1
- package/types/slotted-angular-tabs.d.ts +3 -4
- package/types/slotted-angular-tabs.d.ts.map +1 -1
- package/types/slotted-angular-tag.d.ts +1 -1
- package/types/slotted-angular-tag.d.ts.map +1 -1
- package/types/slotted-angular-tags-input.d.ts +33 -1
- package/types/slotted-angular-tags-input.d.ts.map +1 -1
- package/types/slotted-angular-text-field.d.ts.map +1 -1
- package/types/slotted-angular-textarea.d.ts.map +1 -1
- package/types/slotted-angular-theme.d.ts +1 -1
- package/types/slotted-angular-time-field.d.ts.map +1 -1
- package/types/slotted-angular-time-picker.d.ts +0 -1
- package/types/slotted-angular-time-picker.d.ts.map +1 -1
- package/types/slotted-angular-time-range-picker.d.ts +0 -1
- package/types/slotted-angular-time-range-picker.d.ts.map +1 -1
- package/types/slotted-angular-timeline.d.ts +1 -1
- package/types/slotted-angular-timeline.d.ts.map +1 -1
- package/types/slotted-angular-toast.d.ts +3 -3
- package/types/slotted-angular-toast.d.ts.map +1 -1
- package/types/slotted-angular-toggle-group.d.ts +8 -2
- package/types/slotted-angular-toggle-group.d.ts.map +1 -1
- package/types/slotted-angular-toggle.d.ts +1 -1
- package/types/slotted-angular-toggle.d.ts.map +1 -1
- package/types/slotted-angular-toolbar.d.ts +2 -0
- package/types/slotted-angular-toolbar.d.ts.map +1 -1
- package/types/slotted-angular-tooltip.d.ts.map +1 -1
- package/types/slotted-angular-top-navigation.d.ts.map +1 -1
- package/types/slotted-angular-tour.d.ts.map +1 -1
- package/types/slotted-angular-transfer.d.ts.map +1 -1
- package/types/slotted-angular-tree.d.ts.map +1 -1
- package/types/slotted-angular-typography.d.ts +1 -1
- package/types/slotted-angular-typography.d.ts.map +1 -1
- package/types/slotted-angular-upload.d.ts +2 -2
- package/types/slotted-angular-upload.d.ts.map +1 -1
- package/types/slotted-angular-visually-hidden.d.ts.map +1 -1
- package/types/slotted-angular-wizard.d.ts.map +1 -1
package/docs/filter-bar.json
CHANGED
|
@@ -114,211 +114,211 @@
|
|
|
114
114
|
"part": "root",
|
|
115
115
|
"element": "div",
|
|
116
116
|
"required": true,
|
|
117
|
-
"purpose": "
|
|
117
|
+
"purpose": "The role=\"search\" landmark with the family name. Carries data-ui=\"filter-bar\", data-apply, data-size, data-dirty, data-open, data-sticky, data-readonly, data-disabled, data-loading. It is the query container; nothing on it changes grid."
|
|
118
118
|
},
|
|
119
119
|
{
|
|
120
120
|
"part": "frame",
|
|
121
121
|
"element": "div",
|
|
122
122
|
"required": true,
|
|
123
|
-
"purpose": "
|
|
123
|
+
"purpose": "The grid, an element inside the root, because a container query does not restyle the element it measures. Above 36rem, two rows: the search, the consumer’s controls and the count; then the bar, which wraps. Below, the search, the bar as a row that scrolls sideways, and the count."
|
|
124
124
|
},
|
|
125
125
|
{
|
|
126
126
|
"part": "search",
|
|
127
127
|
"element": "div",
|
|
128
128
|
"required": true,
|
|
129
|
-
"purpose": "
|
|
129
|
+
"purpose": "The global search field — a wrapped text-field — the first tab stop. Escape clears the query; the shortcut key lands here."
|
|
130
130
|
},
|
|
131
131
|
{
|
|
132
132
|
"part": "bar",
|
|
133
133
|
"element": "div",
|
|
134
134
|
"required": true,
|
|
135
|
-
"purpose": "
|
|
135
|
+
"purpose": "The role=\"toolbar\" that holds everything that is not the search: one tab stop, and the arrows move through the summary, the pills, each segment of each chip, more, add, clear and the actions, from row to row. data-revealed while the folded chips are in view."
|
|
136
136
|
},
|
|
137
137
|
{
|
|
138
138
|
"part": "pill",
|
|
139
139
|
"element": "button",
|
|
140
140
|
"required": false,
|
|
141
|
-
"purpose": "
|
|
141
|
+
"purpose": "A pinned field without a condition: dashed edge, plus glyph, the name. Pressed, it gives way to the field’s chip, incomplete, with the value popover open; on a phone it opens the builder with the rule’s card."
|
|
142
142
|
},
|
|
143
143
|
{
|
|
144
144
|
"part": "add",
|
|
145
145
|
"element": "button",
|
|
146
146
|
"required": true,
|
|
147
|
-
"purpose": "
|
|
147
|
+
"purpose": "The trigger of the menu with the fields that have no rule yet, grouped by section and with each one’s glyph. With a chip on the bar it draws only the glyph, in a circle, data-compact; the label stays as name and title."
|
|
148
148
|
},
|
|
149
149
|
{
|
|
150
150
|
"part": "clear",
|
|
151
151
|
"element": "button",
|
|
152
152
|
"required": false,
|
|
153
|
-
"purpose": "
|
|
153
|
+
"purpose": "Drawn while something is applied. Returns a required field to its defaultValue and erases the rest, with the reason clear."
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
156
|
"part": "preset",
|
|
157
157
|
"element": "div",
|
|
158
158
|
"required": false,
|
|
159
|
-
"purpose": "
|
|
159
|
+
"purpose": "A wrapped select with the saved views. Choosing one replaces the tree with the reason select."
|
|
160
160
|
},
|
|
161
161
|
{
|
|
162
162
|
"part": "actions",
|
|
163
163
|
"element": "div",
|
|
164
164
|
"required": false,
|
|
165
|
-
"purpose": "
|
|
165
|
+
"purpose": "Under apply=\"manual\": reset and apply. In a builder group: add-rule, add-group, remove-group."
|
|
166
166
|
},
|
|
167
167
|
{
|
|
168
168
|
"part": "apply",
|
|
169
169
|
"element": "button",
|
|
170
170
|
"required": false,
|
|
171
|
-
"purpose": "
|
|
171
|
+
"purpose": "Applies the draft with the reason submit. Refuses while a required field has no value."
|
|
172
172
|
},
|
|
173
173
|
{
|
|
174
174
|
"part": "reset",
|
|
175
175
|
"element": "button",
|
|
176
176
|
"required": false,
|
|
177
|
-
"purpose": "
|
|
177
|
+
"purpose": "Discards the draft."
|
|
178
178
|
},
|
|
179
179
|
{
|
|
180
180
|
"part": "summary",
|
|
181
181
|
"element": "button",
|
|
182
182
|
"required": true,
|
|
183
|
-
"purpose": "
|
|
183
|
+
"purpose": "First on the bar, drawn only below 36rem: \"Filters (n)\", which opens the builder. Outside the narrow width it is hidden and out of the focus ring."
|
|
184
184
|
},
|
|
185
185
|
{
|
|
186
186
|
"part": "end",
|
|
187
187
|
"element": "div",
|
|
188
188
|
"required": true,
|
|
189
|
-
"purpose": "
|
|
189
|
+
"purpose": "The consumer’s controls — a sort, a column picker — projected as children."
|
|
190
190
|
},
|
|
191
191
|
{
|
|
192
192
|
"part": "chip",
|
|
193
193
|
"element": "div",
|
|
194
194
|
"required": false,
|
|
195
|
-
"purpose": "
|
|
195
|
+
"purpose": "A condition written in segments, role=\"group\" named \"<field>: <phrase>\". data-pinned on a pinned field, data-incomplete while the operand is missing, data-folded beyond chipLimit, data-invalid on an unknown field or a required field without a value. Delete on any segment removes the condition."
|
|
196
196
|
},
|
|
197
197
|
{
|
|
198
198
|
"part": "chip-field",
|
|
199
199
|
"element": "span",
|
|
200
200
|
"required": false,
|
|
201
|
-
"purpose": "
|
|
201
|
+
"purpose": "The field’s glyph and its name. Read only: the field of a condition is fixed."
|
|
202
202
|
},
|
|
203
203
|
{
|
|
204
204
|
"part": "chip-operator",
|
|
205
205
|
"element": "button",
|
|
206
206
|
"required": false,
|
|
207
|
-
"purpose": "
|
|
207
|
+
"purpose": "The operator, lighter than the ends. Opens a menu with the operators of the kind; an operator that needs a missing operand moves on to the value."
|
|
208
208
|
},
|
|
209
209
|
{
|
|
210
210
|
"part": "chip-value",
|
|
211
211
|
"element": "button",
|
|
212
212
|
"required": false,
|
|
213
|
-
"purpose": "
|
|
213
|
+
"purpose": "The value: two items and the rest as a number, the whole list in the name and the title. Opens a popover with the operand only; on a phone it also carries the operator’s words and opens the builder."
|
|
214
214
|
},
|
|
215
215
|
{
|
|
216
216
|
"part": "chip-remove",
|
|
217
217
|
"element": "button",
|
|
218
218
|
"required": false,
|
|
219
|
-
"purpose": "
|
|
219
|
+
"purpose": "Removes the condition with the reason remove. Absent on a required field and under readOnly."
|
|
220
220
|
},
|
|
221
221
|
{
|
|
222
222
|
"part": "more",
|
|
223
223
|
"element": "button",
|
|
224
224
|
"required": false,
|
|
225
|
-
"purpose": "\"+n more\"
|
|
225
|
+
"purpose": "\"+n more\" while chips are folded; \"Show less\" when they are revealed."
|
|
226
226
|
},
|
|
227
227
|
{
|
|
228
228
|
"part": "count",
|
|
229
229
|
"element": "p",
|
|
230
230
|
"required": false,
|
|
231
|
-
"purpose": "
|
|
231
|
+
"purpose": "The count, in aria-live=\"polite\": count of total in the figures of the current locale. With loading, a spinner and aria-busy."
|
|
232
232
|
},
|
|
233
233
|
{
|
|
234
234
|
"part": "builder",
|
|
235
235
|
"element": "div",
|
|
236
236
|
"required": true,
|
|
237
|
-
"purpose": "
|
|
237
|
+
"purpose": "The editor of the whole tree, inside a drawer. Carries its own data-ui because the drawer portals it."
|
|
238
238
|
},
|
|
239
239
|
{
|
|
240
240
|
"part": "group",
|
|
241
241
|
"element": "fieldset",
|
|
242
242
|
"required": true,
|
|
243
|
-
"purpose": "
|
|
243
|
+
"purpose": "A group of the tree: the header, the rows and the controls. From data-depth 1 on it is a box over the sunken surface, with its own remove in the header."
|
|
244
244
|
},
|
|
245
245
|
{
|
|
246
246
|
"part": "join",
|
|
247
247
|
"element": "div",
|
|
248
248
|
"required": true,
|
|
249
|
-
"purpose": "
|
|
249
|
+
"purpose": "The group header: \"Match\", the All/Any segmented-control, \"of the following\" and, in a nested group, Remove group at the end."
|
|
250
250
|
},
|
|
251
251
|
{
|
|
252
252
|
"part": "rules",
|
|
253
253
|
"element": "div",
|
|
254
254
|
"required": true,
|
|
255
|
-
"purpose": "
|
|
255
|
+
"purpose": "The group’s rows in a two-column grid: the joining word and the rule or the group, so that every field aligns."
|
|
256
256
|
},
|
|
257
257
|
{
|
|
258
258
|
"part": "conjunction",
|
|
259
259
|
"element": "span",
|
|
260
260
|
"required": true,
|
|
261
|
-
"purpose": "
|
|
261
|
+
"purpose": "The word before each row: \"Where\" on the first, \"and\" or \"or\" on the following ones, the group’s join."
|
|
262
262
|
},
|
|
263
263
|
{
|
|
264
264
|
"part": "rule",
|
|
265
265
|
"element": "div",
|
|
266
266
|
"required": false,
|
|
267
|
-
"purpose": "
|
|
267
|
+
"purpose": "A rule: field, operator, operand, remove. data-kind and data-operands for the grid; data-invalid on an unknown field; data-expanded on the open card of the narrow form."
|
|
268
268
|
},
|
|
269
269
|
{
|
|
270
270
|
"part": "rule-summary",
|
|
271
271
|
"element": "button",
|
|
272
272
|
"required": false,
|
|
273
|
-
"purpose": "
|
|
273
|
+
"purpose": "The rule’s phrase, header of the card when the builder is narrower than 30rem. Pressed, it opens or closes the card, one at a time; aria-expanded and aria-controls on the three controls."
|
|
274
274
|
},
|
|
275
275
|
{
|
|
276
276
|
"part": "field",
|
|
277
277
|
"element": "div",
|
|
278
278
|
"required": false,
|
|
279
|
-
"purpose": "
|
|
279
|
+
"purpose": "The field select, wrapped."
|
|
280
280
|
},
|
|
281
281
|
{
|
|
282
282
|
"part": "operator",
|
|
283
283
|
"element": "div",
|
|
284
284
|
"required": false,
|
|
285
|
-
"purpose": "
|
|
285
|
+
"purpose": "The operator select, with the names of the map that table already translates."
|
|
286
286
|
},
|
|
287
287
|
{
|
|
288
288
|
"part": "operand",
|
|
289
289
|
"element": "div",
|
|
290
290
|
"required": false,
|
|
291
|
-
"purpose": "
|
|
291
|
+
"purpose": "The control for the kind — text-field, number-field, date-picker, time-picker, datetime-picker, true/false select, multi-select — or whatever renderOperand returns. Two columns for between."
|
|
292
292
|
},
|
|
293
293
|
{
|
|
294
294
|
"part": "remove",
|
|
295
295
|
"element": "button",
|
|
296
296
|
"required": false,
|
|
297
|
-
"purpose": "
|
|
297
|
+
"purpose": "Removes the rule from the group. Absent on a rule of a required field."
|
|
298
298
|
},
|
|
299
299
|
{
|
|
300
300
|
"part": "add-rule",
|
|
301
301
|
"element": "button",
|
|
302
302
|
"required": true,
|
|
303
|
-
"purpose": "
|
|
303
|
+
"purpose": "Adds a rule to the group, on the first field."
|
|
304
304
|
},
|
|
305
305
|
{
|
|
306
306
|
"part": "add-group",
|
|
307
307
|
"element": "button",
|
|
308
308
|
"required": true,
|
|
309
|
-
"purpose": "
|
|
309
|
+
"purpose": "Adds a group with the opposite join and one rule inside."
|
|
310
310
|
},
|
|
311
311
|
{
|
|
312
312
|
"part": "remove-group",
|
|
313
313
|
"element": "button",
|
|
314
314
|
"required": false,
|
|
315
|
-
"purpose": "
|
|
315
|
+
"purpose": "The trash glyph, named Remove group: removes a nested group with everything inside it. The root cannot be removed."
|
|
316
316
|
},
|
|
317
317
|
{
|
|
318
318
|
"part": "save-preset",
|
|
319
319
|
"element": "button",
|
|
320
320
|
"required": false,
|
|
321
|
-
"purpose": "
|
|
321
|
+
"purpose": "Asks the application to save the tree as a view, when onPresetSave exists. The application asks for the name."
|
|
322
322
|
}
|
|
323
323
|
],
|
|
324
324
|
"api": [
|
|
@@ -327,196 +327,196 @@
|
|
|
327
327
|
"type": "FilterBarField[]",
|
|
328
328
|
"defaultValue": "—",
|
|
329
329
|
"appliesTo": "FilterBar",
|
|
330
|
-
"description": "
|
|
330
|
+
"description": "The filterable fields: key, label, kind, icon (glyph name or TemplateRef), operators, pinned, required, defaultValue, section, options, searchable"
|
|
331
331
|
},
|
|
332
332
|
{
|
|
333
333
|
"name": "value",
|
|
334
334
|
"type": "model<FilterGroup | null | undefined>",
|
|
335
335
|
"defaultValue": "—",
|
|
336
336
|
"appliesTo": "FilterBar",
|
|
337
|
-
"description": "[(value)]:
|
|
337
|
+
"description": "[(value)]: the tree the consumer owns. Present means controlled, for the life of the bar"
|
|
338
338
|
},
|
|
339
339
|
{
|
|
340
340
|
"name": "defaultValue",
|
|
341
341
|
"type": "FilterGroup | null",
|
|
342
342
|
"defaultValue": "—",
|
|
343
343
|
"appliesTo": "FilterBar",
|
|
344
|
-
"description": "
|
|
344
|
+
"description": "Where an uncontrolled bar starts, read once"
|
|
345
345
|
},
|
|
346
346
|
{
|
|
347
347
|
"name": "query",
|
|
348
348
|
"type": "model<string | undefined>",
|
|
349
349
|
"defaultValue": "—",
|
|
350
350
|
"appliesTo": "FilterBar",
|
|
351
|
-
"description": "[(query)]:
|
|
351
|
+
"description": "[(query)]: the global search"
|
|
352
352
|
},
|
|
353
353
|
{
|
|
354
354
|
"name": "defaultQuery",
|
|
355
355
|
"type": "string",
|
|
356
356
|
"defaultValue": "",
|
|
357
357
|
"appliesTo": "FilterBar",
|
|
358
|
-
"description": "
|
|
358
|
+
"description": "The search an uncontrolled bar starts with"
|
|
359
359
|
},
|
|
360
360
|
{
|
|
361
361
|
"name": "presets",
|
|
362
362
|
"type": "FilterBarPreset[]",
|
|
363
363
|
"defaultValue": "—",
|
|
364
364
|
"appliesTo": "FilterBar",
|
|
365
|
-
"description": "
|
|
365
|
+
"description": "The saved views: key, label, value"
|
|
366
366
|
},
|
|
367
367
|
{
|
|
368
368
|
"name": "preset",
|
|
369
369
|
"type": "model<string | null | undefined>",
|
|
370
370
|
"defaultValue": "—",
|
|
371
371
|
"appliesTo": "FilterBar",
|
|
372
|
-
"description": "[(preset)]:
|
|
372
|
+
"description": "[(preset)]: the current view"
|
|
373
373
|
},
|
|
374
374
|
{
|
|
375
375
|
"name": "defaultPreset",
|
|
376
376
|
"type": "string | null",
|
|
377
377
|
"defaultValue": "null",
|
|
378
378
|
"appliesTo": "FilterBar",
|
|
379
|
-
"description": "
|
|
379
|
+
"description": "The view it starts with"
|
|
380
380
|
},
|
|
381
381
|
{
|
|
382
382
|
"name": "open",
|
|
383
383
|
"type": "model<boolean | undefined>",
|
|
384
384
|
"defaultValue": "—",
|
|
385
385
|
"appliesTo": "FilterBar",
|
|
386
|
-
"description": "[(open)]:
|
|
386
|
+
"description": "[(open)]: whether the builder is open"
|
|
387
387
|
},
|
|
388
388
|
{
|
|
389
389
|
"name": "defaultOpen",
|
|
390
390
|
"type": "boolean",
|
|
391
391
|
"defaultValue": "false",
|
|
392
392
|
"appliesTo": "FilterBar",
|
|
393
|
-
"description": "
|
|
393
|
+
"description": "Whether it starts open"
|
|
394
394
|
},
|
|
395
395
|
{
|
|
396
396
|
"name": "revealed",
|
|
397
397
|
"type": "model<boolean | undefined>",
|
|
398
398
|
"defaultValue": "—",
|
|
399
399
|
"appliesTo": "FilterBar",
|
|
400
|
-
"description": "[(revealed)]:
|
|
400
|
+
"description": "[(revealed)]: whether the folded chips are in view"
|
|
401
401
|
},
|
|
402
402
|
{
|
|
403
403
|
"name": "defaultRevealed",
|
|
404
404
|
"type": "boolean",
|
|
405
405
|
"defaultValue": "false",
|
|
406
406
|
"appliesTo": "FilterBar",
|
|
407
|
-
"description": "
|
|
407
|
+
"description": "Whether they start in view"
|
|
408
408
|
},
|
|
409
409
|
{
|
|
410
410
|
"name": "apply",
|
|
411
411
|
"type": "'live' | 'manual'",
|
|
412
412
|
"defaultValue": "live",
|
|
413
413
|
"appliesTo": "FilterBar",
|
|
414
|
-
"description": "
|
|
414
|
+
"description": "Requests on every edit, or edits a draft until Apply"
|
|
415
415
|
},
|
|
416
416
|
{
|
|
417
417
|
"name": "sticky",
|
|
418
418
|
"type": "boolean",
|
|
419
419
|
"defaultValue": "false",
|
|
420
420
|
"appliesTo": "FilterBar",
|
|
421
|
-
"description": "
|
|
421
|
+
"description": "Sticks under the page header and adds its height to what follows"
|
|
422
422
|
},
|
|
423
423
|
{
|
|
424
424
|
"name": "container",
|
|
425
425
|
"type": "Element | null",
|
|
426
426
|
"defaultValue": "—",
|
|
427
427
|
"appliesTo": "FilterBar",
|
|
428
|
-
"description": "
|
|
428
|
+
"description": "A parent for the builder drawer only, instead of the shared portal root"
|
|
429
429
|
},
|
|
430
430
|
{
|
|
431
431
|
"name": "size",
|
|
432
432
|
"type": "'sm' | 'md' | 'lg'",
|
|
433
433
|
"defaultValue": "md",
|
|
434
434
|
"appliesTo": "FilterBar",
|
|
435
|
-
"description": "
|
|
435
|
+
"description": "The step of the controls"
|
|
436
436
|
},
|
|
437
437
|
{
|
|
438
438
|
"name": "queryDelay",
|
|
439
439
|
"type": "number",
|
|
440
440
|
"defaultValue": "320",
|
|
441
441
|
"appliesTo": "FilterBar",
|
|
442
|
-
"description": "
|
|
442
|
+
"description": "Milliseconds the search and a text operand wait under live"
|
|
443
443
|
},
|
|
444
444
|
{
|
|
445
445
|
"name": "chipLimit",
|
|
446
446
|
"type": "number",
|
|
447
447
|
"defaultValue": "6",
|
|
448
448
|
"appliesTo": "FilterBar",
|
|
449
|
-
"description": "Chips
|
|
449
|
+
"description": "Chips in view before folding"
|
|
450
450
|
},
|
|
451
451
|
{
|
|
452
452
|
"name": "shortcut",
|
|
453
453
|
"type": "string | null",
|
|
454
454
|
"defaultValue": "null",
|
|
455
455
|
"appliesTo": "FilterBar",
|
|
456
|
-
"description": "
|
|
456
|
+
"description": "The document key that focuses the search, outside an editable field"
|
|
457
457
|
},
|
|
458
458
|
{
|
|
459
459
|
"name": "disabled",
|
|
460
460
|
"type": "boolean",
|
|
461
461
|
"defaultValue": "false",
|
|
462
462
|
"appliesTo": "FilterBar",
|
|
463
|
-
"description": "
|
|
463
|
+
"description": "Turns off every control"
|
|
464
464
|
},
|
|
465
465
|
{
|
|
466
466
|
"name": "readOnly",
|
|
467
467
|
"type": "boolean",
|
|
468
468
|
"defaultValue": "false",
|
|
469
469
|
"appliesTo": "FilterBar",
|
|
470
|
-
"description": "
|
|
470
|
+
"description": "Every condition reachable and readable, none changeable: no X, add, clear or empty pills"
|
|
471
471
|
},
|
|
472
472
|
{
|
|
473
473
|
"name": "loading",
|
|
474
474
|
"type": "boolean",
|
|
475
475
|
"defaultValue": "false",
|
|
476
476
|
"appliesTo": "FilterBar",
|
|
477
|
-
"description": "
|
|
477
|
+
"description": "Keeps the width, turns off Apply, spinner in place of the count"
|
|
478
478
|
},
|
|
479
479
|
{
|
|
480
480
|
"name": "count",
|
|
481
481
|
"type": "number",
|
|
482
482
|
"defaultValue": "—",
|
|
483
483
|
"appliesTo": "FilterBar",
|
|
484
|
-
"description": "
|
|
484
|
+
"description": "How many rows the filter kept"
|
|
485
485
|
},
|
|
486
486
|
{
|
|
487
487
|
"name": "total",
|
|
488
488
|
"type": "number",
|
|
489
489
|
"defaultValue": "—",
|
|
490
490
|
"appliesTo": "FilterBar",
|
|
491
|
-
"description": "
|
|
491
|
+
"description": "How many there are"
|
|
492
492
|
},
|
|
493
493
|
{
|
|
494
494
|
"name": "messages",
|
|
495
495
|
"type": "Partial<FilterBarMessages>",
|
|
496
496
|
"defaultValue": "—",
|
|
497
497
|
"appliesTo": "FilterBar",
|
|
498
|
-
"description": "
|
|
498
|
+
"description": "Words over those of the current locale, key by key: the landmark name (bar), the controls, the chip names, the count and the announcements"
|
|
499
499
|
},
|
|
500
500
|
{
|
|
501
501
|
"name": "savePresetEnabled",
|
|
502
502
|
"type": "boolean",
|
|
503
503
|
"defaultValue": "false",
|
|
504
504
|
"appliesTo": "FilterBar",
|
|
505
|
-
"description": "
|
|
505
|
+
"description": "Draws \"Save as view…\" in the builder and emits savePreset"
|
|
506
506
|
},
|
|
507
507
|
{
|
|
508
508
|
"name": "ng-template[slFilterBarOperand]",
|
|
509
|
-
"type": "
|
|
509
|
+
"type": "projection",
|
|
510
510
|
"defaultValue": "—",
|
|
511
511
|
"appliesTo": "FilterBar",
|
|
512
|
-
"description": "
|
|
512
|
+
"description": "Replaces the operand control of the named field, or of every field with \"*\""
|
|
513
513
|
},
|
|
514
514
|
{
|
|
515
515
|
"name": "[slFilterBarEnd]",
|
|
516
|
-
"type": "
|
|
516
|
+
"type": "projection",
|
|
517
517
|
"defaultValue": "—",
|
|
518
518
|
"appliesTo": "FilterBar",
|
|
519
|
-
"description": "
|
|
519
|
+
"description": "The consumer’s controls in the end slot"
|
|
520
520
|
}
|
|
521
521
|
],
|
|
522
522
|
"composition": [
|
|
@@ -525,76 +525,76 @@
|
|
|
525
525
|
"type": "let-field, let-operator=\"operator\", let-value=\"value\", let-set=\"set\", let-apply=\"apply\"",
|
|
526
526
|
"defaultValue": "—",
|
|
527
527
|
"appliesTo": "FilterBar",
|
|
528
|
-
"description": "
|
|
528
|
+
"description": "The seam table uses: date-range-picker on a between, tags-input on a large set"
|
|
529
529
|
},
|
|
530
530
|
{
|
|
531
531
|
"name": "[slFilterBarEnd]",
|
|
532
532
|
"type": "ng-content",
|
|
533
533
|
"defaultValue": "—",
|
|
534
534
|
"appliesTo": "FilterBar",
|
|
535
|
-
"description": "
|
|
535
|
+
"description": "The end slot: a sort, a column picker, outside the toolbar ring"
|
|
536
536
|
},
|
|
537
537
|
{
|
|
538
538
|
"name": "exportAs",
|
|
539
539
|
"type": "slFilterBar",
|
|
540
540
|
"defaultValue": "—",
|
|
541
541
|
"appliesTo": "FilterBar",
|
|
542
|
-
"description": "
|
|
542
|
+
"description": "Reaches the instance from the template: #bar=\"slFilterBar\" and bar.focusSearch() or bar.openBuilder()"
|
|
543
543
|
},
|
|
544
544
|
{
|
|
545
545
|
"name": "provideFilterBarDefaults()",
|
|
546
546
|
"type": "apply | chipLimit | queryDelay | shortcut | size",
|
|
547
547
|
"defaultValue": "—",
|
|
548
548
|
"appliesTo": "Injector",
|
|
549
|
-
"description": "
|
|
549
|
+
"description": "Decides once for everything below; an input on the bar wins"
|
|
550
550
|
},
|
|
551
551
|
{
|
|
552
552
|
"name": "id, aria-label, dir, data-*, (keydown)",
|
|
553
|
-
"type": "
|
|
553
|
+
"type": "native attributes",
|
|
554
554
|
"defaultValue": "—",
|
|
555
555
|
"appliesTo": "FilterBar",
|
|
556
|
-
"description": "
|
|
556
|
+
"description": "Stay on the host element; aria-label names the landmark, the consumer’s listener runs alongside the family’s"
|
|
557
557
|
}
|
|
558
558
|
],
|
|
559
559
|
"events": [
|
|
560
560
|
{
|
|
561
561
|
"name": "(valueChangeRequest)",
|
|
562
562
|
"payload": "ChangeRequest<FilterGroup | null>",
|
|
563
|
-
"when": "
|
|
563
|
+
"when": "Before the tree moves; [(value)] is the other half, the value. The reason is pointer, keyboard, clear, remove, select, submit or programmatic; cancelling moves nothing. The tree arrives normalized: no incomplete rules, null when nothing is left."
|
|
564
564
|
},
|
|
565
565
|
{
|
|
566
566
|
"name": "(queryChangeRequest)",
|
|
567
567
|
"payload": "ChangeRequest<string>",
|
|
568
|
-
"when": "
|
|
568
|
+
"when": "After queryDelay under live, or with submit under manual; clear when Escape or the field’s X clears it. [(query)] is the value."
|
|
569
569
|
},
|
|
570
570
|
{
|
|
571
571
|
"name": "(presetChangeRequest)",
|
|
572
572
|
"payload": "ChangeRequest<string | null>",
|
|
573
|
-
"when": "
|
|
573
|
+
"when": "When a view is chosen in the select, with select; clear when the select is emptied. [(preset)] is the value."
|
|
574
574
|
},
|
|
575
575
|
{
|
|
576
576
|
"name": "(savePreset)",
|
|
577
577
|
"payload": "FilterGroup | null",
|
|
578
|
-
"when": "
|
|
578
|
+
"when": "When the reader presses \"Save as view…\" in the builder, drawn by savePresetEnabled. The family does not save: it asks."
|
|
579
579
|
},
|
|
580
580
|
{
|
|
581
581
|
"name": "(openChangeRequest)",
|
|
582
582
|
"payload": "ChangeRequest<boolean>",
|
|
583
|
-
"when": "
|
|
583
|
+
"when": "Before the builder opens or closes: pointer, keyboard, escape, outsidePress, dismiss, submit, programmatic. [(open)] is the value."
|
|
584
584
|
},
|
|
585
585
|
{
|
|
586
586
|
"name": "(revealedChangeRequest)",
|
|
587
587
|
"payload": "ChangeRequest<boolean>",
|
|
588
|
-
"when": "
|
|
588
|
+
"when": "Before the folded chips appear or fold again. [(revealed)] is the value."
|
|
589
589
|
}
|
|
590
590
|
],
|
|
591
591
|
"accessibility": [
|
|
592
|
-
"
|
|
593
|
-
"
|
|
594
|
-
"
|
|
595
|
-
"
|
|
596
|
-
"
|
|
597
|
-
"
|
|
592
|
+
"The root is role=\"search\", not role=\"toolbar\": the APG Toolbar pattern asks a toolbar to avoid controls that need the arrows, and the search field is one. The search is the first tab stop and the toolbar the second — two stops however many fields there are; the APG note on multi-row toolbars lets the arrows move from row to row.",
|
|
593
|
+
"A chip is role=\"group\" named \"<field>: <phrase>\", the same phrase describeFilter gives to the table announcement, and \", incomplete\" while the value is missing. The operator has aria-haspopup=\"menu\", the value aria-haspopup=\"dialog\" and the name with the whole list, the X \"Remove <field>\". Delete and Backspace on any segment remove with the reason remove and focus goes to the segment of the same role on the next chip, the previous one, or Add filter.",
|
|
594
|
+
"A pill has aria-haspopup=\"dialog\"; under readOnly the toolbar carries aria-description=\"Read only\" and the segments keep their stop with aria-disabled, and a locked value names the whole list the popover no longer shows.",
|
|
595
|
+
"The count is itself the live region, in polite, so the effect of a filter is heard; applying, clearing, removing a chip and choosing a view are announced by the shared live-announcer.",
|
|
596
|
+
"The builder is a drawer: modal, Escape closes and discards, focus returns to the trigger. Each group is a fieldset with a legend, each rule three named controls — Field, Operator, Value or From and To.",
|
|
597
|
+
"Below 36rem the operator, more, add and clear leave the focus ring with visibility hidden, not only the drawing: a stop where nothing is seen is a stop that does not exist. The builder’s closed cards take the three controls out of the ring the same way; the card’s phrase has aria-expanded and aria-controls."
|
|
598
598
|
]
|
|
599
599
|
}
|
|
600
600
|
},
|
|
@@ -680,137 +680,137 @@
|
|
|
680
680
|
{
|
|
681
681
|
"id": "playground",
|
|
682
682
|
"title": "Playground",
|
|
683
|
-
"note": "
|
|
683
|
+
"note": "The bar’s axes over a list of orders, moved by the controls below the stage. Switch apply to manual and the bar edits a draft instead.",
|
|
684
684
|
"language": "html",
|
|
685
685
|
"source": "<div\n slFilterBar\n [count]=\"kept().length\"\n [fields]=\"fields\"\n [total]=\"orders.length\"\n [(value)]=\"filter\"\n></div>\n",
|
|
686
686
|
"verdict": "excerpt"
|
|
687
687
|
},
|
|
688
688
|
{
|
|
689
689
|
"id": "listing",
|
|
690
|
-
"title": "
|
|
691
|
-
"note": "
|
|
690
|
+
"title": "The bar over the table, and the same rule in both places",
|
|
691
|
+
"note": "The consumer applies the tree with createFilterGroupPredicate and createSearchPredicate; the table below shrinks and the count says by how much. The Status column filter in the header edits the same object as the bar’s Status chip.",
|
|
692
692
|
"language": "ts",
|
|
693
693
|
"source": "const kept = computed(() => {\n const keep = createFilterGroupPredicate(filter(), (row, field) => row[field]);\n const find = createSearchPredicate(query(), (row, field) => row[field], ['customer', 'id']);\n return orders.filter((row) => keep(row) && find(row));\n});\n",
|
|
694
694
|
"verdict": "excerpt"
|
|
695
695
|
},
|
|
696
696
|
{
|
|
697
697
|
"id": "pinned",
|
|
698
|
-
"title": "
|
|
699
|
-
"note": "pinned
|
|
698
|
+
"title": "Pinned fields: a dashed place that becomes a chip",
|
|
699
|
+
"note": "pinned keeps the field always in view. Without a condition it is a dashed pill with + and the name — a place waiting to be filled; pressed, it gives way to the field’s chip, in the same place, incomplete and with the value popover open. Removing the condition brings the pill back.",
|
|
700
700
|
"language": "ts",
|
|
701
701
|
"source": "const FIELDS: FilterBarField[] = [\n {\n key: 'status',\n kind: 'set',\n label: 'Status',\n options: STATUSES,\n pinned: true,\n },\n { key: 'customer', kind: 'text', label: 'Customer', pinned: true },\n { key: 'amount', kind: 'number', label: 'Amount' },\n];\n",
|
|
702
702
|
"verdict": "excerpt"
|
|
703
703
|
},
|
|
704
704
|
{
|
|
705
705
|
"id": "chips",
|
|
706
|
-
"title": "
|
|
707
|
-
"note": "
|
|
706
|
+
"title": "Each condition written in segments",
|
|
707
|
+
"note": "A chip is the condition’s phrase in segments: the field with its glyph, the lighter operator, the value, and the X. The operator opens a menu, the value a popover with the operand only — changing the comparison does not reopen the values. A long list writes two values and the rest as a number (Paid, Refunded +2), whole in the name and the title; a list of one reads as equality. Add filter creates the chip at once, dashed until it has a value, and left out of the emitted value until then. Beyond chipLimit the chips fold behind +n more.",
|
|
708
708
|
"language": "html",
|
|
709
709
|
"source": "<div slFilterBar chipLimit=\"6\" [fields]=\"fields\" [value]=\"filter\"></div>\n",
|
|
710
710
|
"verdict": "excerpt"
|
|
711
711
|
},
|
|
712
712
|
{
|
|
713
713
|
"id": "builder",
|
|
714
|
-
"title": "
|
|
715
|
-
"note": "Add filter,
|
|
714
|
+
"title": "The builder in a drawer",
|
|
715
|
+
"note": "Add filter, a group chip or Filters (n) open the whole tree in a drawer; on a phone the drawer rises from the bottom as a sheet. Wider than 30rem each rule is a row of field, operator, operand and X; narrower, a card with the phrase that expands in place, one at a time. Apply requests the tree with the reason submit, Cancel and Escape discard.",
|
|
716
716
|
"language": "html",
|
|
717
|
-
"source": "<div\n slFilterBar\n #bar=\"slFilterBar\"\n [fields]=\"fields\"\n (openChangeRequest)=\"log($event.reason)\"\n></div>\n<button slButton type=\"button\" (click)=\"bar.openBuilder()\">
|
|
717
|
+
"source": "<div\n slFilterBar\n #bar=\"slFilterBar\"\n [fields]=\"fields\"\n (openChangeRequest)=\"log($event.reason)\"\n></div>\n<button slButton type=\"button\" (click)=\"bar.openBuilder()\">Open the builder</button>\n",
|
|
718
718
|
"verdict": "excerpt"
|
|
719
719
|
},
|
|
720
720
|
{
|
|
721
721
|
"id": "groups",
|
|
722
|
-
"title": "
|
|
723
|
-
"note": "
|
|
722
|
+
"title": "Nested AND/OR groups",
|
|
723
|
+
"note": "A group inside a group is a box over the sunken surface, with the opposite join and the trash that removes it; in a narrow builder it becomes a rail on the start edge, which costs ten pixels per level instead of eighty. On the bar it appears as a single chip, with the phrase in parentheses, that opens the builder.",
|
|
724
724
|
"language": "ts",
|
|
725
725
|
"source": "const filter: FilterGroup = {\n join: 'and',\n rules: [\n { field: 'status', filter: setFilter(['paid']) },\n {\n join: 'or',\n rules: [\n {\n field: 'amount',\n filter: {\n kind: 'number',\n join: 'and',\n conditions: [{ operator: 'greaterThan', value: 1000 }],\n },\n },\n {\n field: 'priority',\n filter: { kind: 'boolean', join: 'and', conditions: [{ operator: 'is', value: true }] },\n },\n ],\n },\n ],\n};\n",
|
|
726
726
|
"verdict": "excerpt"
|
|
727
727
|
},
|
|
728
728
|
{
|
|
729
729
|
"id": "manual",
|
|
730
|
-
"title": "
|
|
731
|
-
"note": "
|
|
730
|
+
"title": "Applying in a batch",
|
|
731
|
+
"note": "With apply=\"manual\" each edit goes to a draft: the root becomes data-dirty, Reset discards, Apply requests the tree and the query with the reason submit. Enter on an operand applies. It is the Go of Fiori and the batch of Carbon.",
|
|
732
732
|
"language": "html",
|
|
733
733
|
"source": "<div\n slFilterBar\n apply=\"manual\"\n [fields]=\"fields\"\n (queryChangeRequest)=\"$event.reason === 'submit' && fetch($event.value)\"\n (valueChangeRequest)=\"$event.reason === 'submit' && fetch($event.value)\"\n></div>\n",
|
|
734
734
|
"verdict": "excerpt"
|
|
735
735
|
},
|
|
736
736
|
{
|
|
737
737
|
"id": "required",
|
|
738
|
-
"title": "
|
|
739
|
-
"note": "required
|
|
738
|
+
"title": "A required field with a default",
|
|
739
|
+
"note": "required pins the field and gives it a defaultValue: Clear returns it to the default instead of erasing it, the chip has no X, and an Apply with the field empty is refused — the chip stays dashed and data-invalid, and the message is announced.",
|
|
740
740
|
"language": "ts",
|
|
741
741
|
"source": "const company: FilterBarField = {\n key: 'company',\n kind: 'set',\n label: 'Company',\n options: COMPANIES,\n required: true,\n defaultValue: setFilter(['acme']),\n};\n",
|
|
742
742
|
"verdict": "excerpt"
|
|
743
743
|
},
|
|
744
744
|
{
|
|
745
745
|
"id": "presets",
|
|
746
|
-
"title": "
|
|
747
|
-
"note": "presets
|
|
746
|
+
"title": "Saved views",
|
|
747
|
+
"note": "presets appears as a select at the end of the bar: choosing one replaces the tree with the reason select; editing afterwards keeps the chosen view and marks the root data-dirty. Saving belongs to the application — onPresetSave hands over the tree, and the application asks for the name.",
|
|
748
748
|
"language": "html",
|
|
749
749
|
"source": "<div\n slFilterBar\n [fields]=\"fields\"\n [(preset)]=\"view\"\n [presets]=\"[{ key: 'overdue', label: 'Overdue this month', value: overdue }]\"\n savePresetEnabled\n (savePreset)=\"askForName($event)\"\n></div>\n",
|
|
750
750
|
"verdict": "excerpt"
|
|
751
751
|
},
|
|
752
752
|
{
|
|
753
753
|
"id": "query",
|
|
754
|
-
"title": "
|
|
755
|
-
"note": "
|
|
754
|
+
"title": "The global search",
|
|
755
|
+
"note": "The query is the only field that belongs to no column. Debounced by queryDelay under live; Escape clears with the reason clear; shortcut is the document key that reaches the field, drawn inside it with kbd — and hidden where the primary input is a touch screen, where there is no key to press.",
|
|
756
756
|
"language": "html",
|
|
757
757
|
"source": "<div slFilterBar [fields]=\"fields\" [(query)]=\"query\" queryDelay=\"120\" shortcut=\"/\"></div>\n",
|
|
758
758
|
"verdict": "excerpt"
|
|
759
759
|
},
|
|
760
760
|
{
|
|
761
761
|
"id": "url",
|
|
762
|
-
"title": "
|
|
763
|
-
"note": "toFilterBarParams
|
|
762
|
+
"title": "The state in a URL",
|
|
763
|
+
"note": "toFilterBarParams writes f=and(…) and q=; fromFilterBarParams reads them back, and an f.<column> written by a table without a bar becomes a top-level group. parseFilterGroup is total: a marker from an older version degrades to no filter.",
|
|
764
764
|
"language": "ts",
|
|
765
765
|
"source": "const params = toFilterBarParams({ filter, query });\nhistory.replaceState(null, '', `?${params}`);\nconst restored = fromFilterBarParams(location.search);\n",
|
|
766
766
|
"verdict": "excerpt"
|
|
767
767
|
},
|
|
768
768
|
{
|
|
769
769
|
"id": "count",
|
|
770
|
-
"title": "
|
|
771
|
-
"note": "count
|
|
770
|
+
"title": "The count as a live region",
|
|
771
|
+
"note": "count and total are the consumer’s numbers, written in the figures of the current locale. The part is aria-live=\"polite\", so a change in the filter is heard as its effect; with loading the count gives way to a spinner and aria-busy.",
|
|
772
772
|
"language": "html",
|
|
773
773
|
"source": "<div slFilterBar count=\"128\" [fields]=\"fields\" [loading]=\"fetching()\" total=\"3412\"></div>\n",
|
|
774
774
|
"verdict": "excerpt"
|
|
775
775
|
},
|
|
776
776
|
{
|
|
777
777
|
"id": "narrow",
|
|
778
|
-
"title": "
|
|
779
|
-
"note": "
|
|
778
|
+
"title": "On a phone: a row that scrolls sideways and a sheet",
|
|
779
|
+
"note": "Below 36rem the search sits on top and the bar becomes a row that scrolls sideways: Filters (n) first, every chip — the folded ones too —, then the empty pills; the chip cut at the edge says the row continues. Each chip has three targets: the field, the value with the operator’s words, the X. Tapping a value, a pill or Filters opens the builder as a sheet, with the rule’s card open. Resize the stage.",
|
|
780
780
|
"language": "html",
|
|
781
781
|
"source": "<div class=\"listing listing--narrow\">\n <div slFilterBar [fields]=\"fields\" [value]=\"filter\"></div>\n</div>\n",
|
|
782
782
|
"verdict": "excerpt"
|
|
783
783
|
},
|
|
784
784
|
{
|
|
785
785
|
"id": "sticky",
|
|
786
|
-
"title": "
|
|
787
|
-
"note": "sticky
|
|
786
|
+
"title": "Stuck under the page header",
|
|
787
|
+
"note": "sticky reads --slotted-page-sticky-top, sticks the bar there, and adds its own height to the property on the parent element for what comes next — a table with a sticky header sticks below the bar, not below the title.",
|
|
788
788
|
"language": "html",
|
|
789
789
|
"source": "<div slFilterBar [fields]=\"fields\" sticky [value]=\"filter\"></div>\n<table slTable stickyHeader>\n …\n</table>\n",
|
|
790
790
|
"verdict": "excerpt"
|
|
791
791
|
},
|
|
792
792
|
{
|
|
793
793
|
"id": "states",
|
|
794
|
-
"title": "
|
|
795
|
-
"note": "disabled
|
|
794
|
+
"title": "Disabled, loading, read only",
|
|
795
|
+
"note": "disabled turns off every control and keeps the width; loading keeps the controls, turns off Apply and puts the spinner in place of the count; readOnly leaves every condition reachable and readable — the segments keep their stop with aria-disabled — and draws no X, add, clear or empty pills.",
|
|
796
796
|
"language": "html",
|
|
797
797
|
"source": "<div slFilterBar disabled [fields]=\"fields\"></div>\n<div slFilterBar [fields]=\"fields\" loading></div>\n",
|
|
798
798
|
"verdict": "excerpt"
|
|
799
799
|
},
|
|
800
800
|
{
|
|
801
801
|
"id": "content",
|
|
802
|
-
"title": "
|
|
803
|
-
"note": "
|
|
802
|
+
"title": "Content the family did not choose",
|
|
803
|
+
"note": "A value of eleven items writes two and the rest as a number, whole in the title and in the accessible name; a long value truncates at 12rem; an Arabic label next to an ISO date does not reorder the date, because field, operator and value are isolated runs; an unknown field is an invalid, removable chip.",
|
|
804
804
|
"language": "html",
|
|
805
805
|
"source": "<div\n slFilterBar\n dir=\"rtl\"\n [fields]=\"[{ key: 'city', kind: 'set', label: 'المدينة', options: cities }]\"\n [value]=\"filter\"\n></div>\n",
|
|
806
806
|
"verdict": "excerpt"
|
|
807
807
|
},
|
|
808
808
|
{
|
|
809
809
|
"id": "keyboard",
|
|
810
|
-
"title": "
|
|
811
|
-
"note": "Tab:
|
|
810
|
+
"title": "Keyboard",
|
|
811
|
+
"note": "Tab: the search, then the bar — two stops. The arrows move through every control of the bar, segment by segment, from row to row and mirrored in RTL; Home and End at the ends. Enter on the operator opens the menu, on the value the popover; Delete on any segment removes the condition with the reason remove and focus goes to the same segment of the next chip; Escape clears the search or closes the surface.",
|
|
812
812
|
"language": "html",
|
|
813
|
-
"source": "<!-- \"Amount filter removed\" —
|
|
813
|
+
"source": "<!-- \"Amount filter removed\" — and focus moves to the next chip, or to Add filter when none is left. -->\n<div slFilterBar [fields]=\"fields\" (valueChangeRequest)=\"log($event.reason === 'remove')\"></div>\n",
|
|
814
814
|
"verdict": "excerpt"
|
|
815
815
|
}
|
|
816
816
|
]
|