@aceshooting/lyra-ui 16.0.0 → 18.0.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/CHANGELOG.md +758 -0
- package/README.md +2 -2
- package/custom-elements.json +1 -1
- package/dist/cli/migration-contract.json +1 -1
- package/dist/components/agent-tools/browser-frame/browser-frame.class.d.ts +3 -3
- package/dist/components/agent-tools/browser-frame/browser-frame.class.js +2 -2
- package/dist/components/agent-tools/compare-panel/compare-panel.class.d.ts +2 -2
- package/dist/components/agent-tools/compare-panel/compare-panel.class.js +3 -3
- package/dist/components/agent-tools/confirm-bar/confirm-bar.class.d.ts +37 -13
- package/dist/components/agent-tools/confirm-bar/confirm-bar.class.js +2 -2
- package/dist/components/agent-tools/task-list/task-list.class.js +2 -2
- package/dist/components/agent-tools/tool-call-chip/tool-call-chip.class.d.ts +4 -0
- package/dist/components/agent-tools/tool-call-chip/tool-call-chip.class.js +2 -2
- package/dist/components/agent-tools/tool-param-form/tool-param-form.class.d.ts +3 -3
- package/dist/components/agent-tools/tool-param-form/tool-param-form.class.js +1 -1
- package/dist/components/charts/chart/chart.class.d.ts +117 -17
- package/dist/components/charts/chart/chart.class.js +3 -3
- package/dist/components/charts/chart/histogram-bin.d.ts +5 -1
- package/dist/components/charts/chart/histogram-bin.js +1 -1
- package/dist/components/charts/chart/lite-chart.class.d.ts +9 -0
- package/dist/components/conversation/code-block/code-block.styles.js +1 -1
- package/dist/components/conversation/message-actions/message-actions.styles.js +1 -1
- package/dist/components/conversation/model-select/model-select.class.d.ts +13 -4
- package/dist/components/conversation/model-select/model-select.class.js +2 -1
- package/dist/components/conversation/model-select/model-select.styles.js +1 -1
- package/dist/components/conversation/streaming-text/streaming-text-base.class.d.ts +40 -2
- package/dist/components/conversation/streaming-text/streaming-text-base.class.js +2 -2
- package/dist/components/conversation/streaming-text/streaming-text-core.class.d.ts +27 -3
- package/dist/components/conversation/streaming-text/streaming-text-core.class.js +11 -0
- package/dist/components/conversation/streaming-text/streaming-text.class.d.ts +31 -3
- package/dist/components/conversation/streaming-text/streaming-text.class.js +11 -0
- package/dist/components/conversation/suggestion-chips/suggestion-chips.class.d.ts +30 -2
- package/dist/components/conversation/suggestion-chips/suggestion-chips.class.js +4 -3
- package/dist/components/conversation/suggestion-chips/suggestion-chips.styles.js +1 -1
- package/dist/components/conversation/thread-list/thread-list.class.js +1 -1
- package/dist/components/conversation/transcript-feed/transcript-feed.class.js +1 -1
- package/dist/components/conversation/usage-badge/usage-badge-overlay-runtime.js +1 -1
- package/dist/components/conversation/usage-badge/usage-badge.class.d.ts +4 -0
- package/dist/components/conversation/voice-picker/voice-picker.class.d.ts +16 -4
- package/dist/components/conversation/voice-picker/voice-picker.class.js +2 -1
- package/dist/components/conversation/voice-picker/voice-picker.styles.js +1 -1
- package/dist/components/data/context-meter/context-meter.class.d.ts +23 -4
- package/dist/components/data/context-meter/context-meter.class.js +10 -7
- package/dist/components/data/context-meter/context-meter.styles.js +1 -1
- package/dist/components/data/data-grid/data-grid.class.d.ts +5 -2
- package/dist/components/data/data-grid/data-grid.class.js +1 -1
- package/dist/components/data/flow-canvas/flow-canvas.class.d.ts +32 -5
- package/dist/components/data/flow-canvas/flow-canvas.class.js +3 -1
- package/dist/components/data/flow-canvas/flow-canvas.styles.js +1 -1
- package/dist/components/data/flow-canvas/flow-model.js +1 -1
- package/dist/components/data/flow-canvas/flow-types.d.ts +10 -1
- package/dist/components/data/gauge/gauge.class.d.ts +15 -2
- package/dist/components/data/gauge/gauge.class.js +20 -20
- package/dist/components/data/gauge/gauge.styles.js +1 -1
- package/dist/components/data/graph-query-builder/graph-query-builder.class.d.ts +14 -5
- package/dist/components/data/graph-query-builder/graph-query-builder.class.js +2 -2
- package/dist/components/data/sequence-strip/sequence-strip.class.d.ts +28 -2
- package/dist/components/data/sequence-strip/sequence-strip.class.js +3 -2
- package/dist/components/data/sequence-strip/sequence-strip.styles.js +1 -1
- package/dist/components/data/table/table.class.d.ts +155 -30
- package/dist/components/data/table/table.class.js +6 -4
- package/dist/components/data/table/table.styles.js +1 -1
- package/dist/components/data/timeline/timeline-item.class.d.ts +9 -1
- package/dist/components/data/timeline/timeline-item.class.js +2 -2
- package/dist/components/data/word-cloud/word-cloud.class.js +1 -1
- package/dist/components/data/word-cloud/word-cloud.styles.js +1 -1
- package/dist/components/forms/button/button.class.d.ts +30 -1
- package/dist/components/forms/button/button.class.js +2 -2
- package/dist/components/forms/checkbox/checkbox.class.d.ts +8 -6
- package/dist/components/forms/checkbox/checkbox.class.js +2 -2
- package/dist/components/forms/checkbox-group/checkbox-group.class.d.ts +7 -5
- package/dist/components/forms/checkbox-group/checkbox-group.class.js +1 -1
- package/dist/components/forms/color-picker/color-picker.class.d.ts +16 -2
- package/dist/components/forms/color-picker/color-picker.class.js +2 -2
- package/dist/components/forms/color-picker/color-picker.styles.js +1 -1
- package/dist/components/forms/combobox/combobox.class.d.ts +52 -7
- package/dist/components/forms/combobox/combobox.class.js +2 -2
- package/dist/components/forms/combobox/combobox.styles.js +1 -1
- package/dist/components/forms/date-picker/date-input.class.d.ts +4 -0
- package/dist/components/forms/date-picker/date-input.class.js +1 -1
- package/dist/components/forms/icon-button/icon-button.class.d.ts +20 -3
- package/dist/components/forms/icon-button/icon-button.class.js +1 -1
- package/dist/components/forms/icon-button/icon-button.styles.js +1 -1
- package/dist/components/forms/input/input.class.d.ts +5 -2
- package/dist/components/forms/input/input.class.js +1 -1
- package/dist/components/forms/input/time-input.class.d.ts +4 -0
- package/dist/components/forms/input/time-input.class.js +1 -1
- package/dist/components/forms/locale-picker/locale-picker.class.d.ts +11 -5
- package/dist/components/forms/locale-picker/locale-picker.class.js +1 -1
- package/dist/components/forms/otp-input/otp-input.class.d.ts +7 -2
- package/dist/components/forms/otp-input/otp-input.class.js +2 -2
- package/dist/components/forms/radio/radio-button.class.d.ts +2 -1
- package/dist/components/forms/radio/radio-group.class.d.ts +9 -4
- package/dist/components/forms/radio/radio-group.class.js +1 -1
- package/dist/components/forms/radio/radio.class.d.ts +13 -7
- package/dist/components/forms/radio/radio.class.js +1 -1
- package/dist/components/forms/rubric-form/rubric-form.class.d.ts +16 -6
- package/dist/components/forms/rubric-form/rubric-form.class.js +2 -2
- package/dist/components/forms/select/select.class.d.ts +50 -13
- package/dist/components/forms/select/select.class.js +2 -2
- package/dist/components/forms/slider/slider.class.d.ts +4 -2
- package/dist/components/forms/slider/slider.class.js +1 -1
- package/dist/components/forms/switch/switch.class.d.ts +8 -6
- package/dist/components/forms/switch/switch.class.js +1 -1
- package/dist/components/forms/textarea/textarea.class.d.ts +5 -3
- package/dist/components/forms/textarea/textarea.class.js +1 -1
- package/dist/components/forms/time-range/time-range.class.d.ts +12 -7
- package/dist/components/forms/time-range/time-range.class.js +1 -1
- package/dist/components/forms/time-range/time-range.styles.js +1 -1
- package/dist/components/forms/token-input/token-input.class.d.ts +6 -4
- package/dist/components/forms/token-input/token-input.class.js +1 -1
- package/dist/components/layout/app-rail/app-rail-item.class.d.ts +109 -4
- package/dist/components/layout/app-rail/app-rail-item.class.js +34 -29
- package/dist/components/layout/app-rail/app-rail-item.styles.js +1 -1
- package/dist/components/layout/app-rail/app-rail.class.d.ts +25 -3
- package/dist/components/layout/app-rail/app-rail.styles.js +1 -1
- package/dist/components/layout/app-rail-group/app-rail-group.class.d.ts +2 -2
- package/dist/components/layout/app-rail-group/app-rail-group.class.js +2 -2
- package/dist/components/layout/carousel/carousel.class.d.ts +1 -1
- package/dist/components/layout/carousel/carousel.class.js +1 -1
- package/dist/components/layout/details/accordion.class.d.ts +2 -2
- package/dist/components/layout/details/accordion.class.js +2 -2
- package/dist/components/layout/filter-bar/filter-bar-register.d.ts +1 -0
- package/dist/components/layout/filter-bar/filter-bar-register.js +1 -0
- package/dist/components/layout/filter-bar/filter-bar.class.d.ts +153 -16
- package/dist/components/layout/filter-bar/filter-bar.class.js +8 -5
- package/dist/components/layout/menu/menu-item.class.d.ts +3 -3
- package/dist/components/layout/menu/menu-item.class.js +3 -3
- package/dist/components/layout/menu/menu.class.d.ts +5 -1
- package/dist/components/layout/menu/menu.class.js +2 -2
- package/dist/components/layout/reorder-list/reorder-item.styles.js +1 -1
- package/dist/components/layout/reorder-list/reorder-list.class.js +1 -1
- package/dist/components/layout/virtual-list/virtual-list.class.d.ts +107 -2
- package/dist/components/layout/virtual-list/virtual-list.class.js +12 -7
- package/dist/components/media/attachment-trigger/attachment-trigger.styles.js +1 -1
- package/dist/components/media/avatar-group/avatar-group.class.d.ts +12 -1
- package/dist/components/media/avatar-group/avatar-group.class.js +2 -2
- package/dist/components/media/drop-zone/drop-zone.class.d.ts +32 -11
- package/dist/components/media/drop-zone/drop-zone.class.js +2 -2
- package/dist/components/media/file-input/file-input.class.d.ts +40 -19
- package/dist/components/media/file-input/file-input.class.js +2 -2
- package/dist/components/media/map/map.class.d.ts +138 -12
- package/dist/components/media/map/map.class.js +25 -20
- package/dist/components/media/map/map.styles.js +1 -1
- package/dist/components/overlays/callout/callout.styles.js +1 -1
- package/dist/components/overlays/dialog/dialog.styles.js +1 -1
- package/dist/components/overlays/overlay/dropdown.class.d.ts +13 -3
- package/dist/components/overlays/overlay/dropdown.class.js +2 -2
- package/dist/components/overlays/overlay/popover.class.d.ts +12 -3
- package/dist/components/overlays/overlay/popover.class.js +2 -2
- package/dist/components/overlays/rating/rating.class.d.ts +9 -7
- package/dist/components/overlays/rating/rating.class.js +1 -1
- package/dist/components/retrieval/citation-badge/citation-badge.class.d.ts +5 -1
- package/dist/components/retrieval/citation-badge/citation-badge.class.js +1 -1
- package/dist/components/retrieval/embedding-explorer/embedding-explorer.styles.js +1 -1
- package/dist/components/retrieval/entity-chip/entity-chip.class.d.ts +5 -1
- package/dist/components/retrieval/entity-chip/entity-chip.class.js +1 -1
- package/dist/components/retrieval/graph-legend/graph-legend.styles.js +1 -1
- package/dist/components/retrieval/retrieval-value-format.js +1 -1
- package/dist/components/retrieval/source-list/source-list.styles.js +1 -1
- package/dist/components/utility/copy-button/copy-button.class.d.ts +23 -11
- package/dist/components/utility/copy-button/copy-button.class.js +2 -2
- package/dist/components/utility/copy-button/copy-button.styles.js +1 -1
- package/dist/components/utility/diff-view/diff-view.styles.js +1 -1
- package/dist/components/utility/export-button/export-button.class.d.ts +4 -0
- package/dist/components/utility/export-button/export-button.class.js +1 -1
- package/dist/components/utility/json-viewer/json-viewer.styles.js +1 -1
- package/dist/components/utility/known-date/known-date.class.js +1 -1
- package/dist/components/utility/mention-popover/mention-popover.class.d.ts +38 -3
- package/dist/components/utility/mention-popover/mention-popover.class.js +2 -1
- package/dist/components/utility/mention-popover/mention-popover.styles.js +1 -1
- package/dist/components/utility/poll-status/poll-status.styles.js +1 -1
- package/dist/components/utility/tour/tour.class.d.ts +4 -0
- package/dist/components/utility/tour/tour.class.js +1 -1
- package/dist/components/utility/tour/tour.styles.js +1 -1
- package/dist/components/viewers/document-preview/document-preview.class.js +2 -2
- package/dist/components/viewers/docx-viewer/docx-viewer.class.js +2 -2
- package/dist/components/viewers/ebook-viewer/ebook-viewer.class.js +2 -2
- package/dist/components/viewers/highlight-layer/highlight-layer.class.js +2 -2
- package/dist/components/viewers/notebook-viewer/notebook-viewer.class.js +2 -2
- package/dist/components/viewers/pdf-viewer/pdf-viewer.class.js +2 -2
- package/dist/components/viewers/pptx-viewer/pptx-viewer.class.js +2 -2
- package/dist/components/viewers/xml-viewer/xml-viewer.class.js +2 -2
- package/dist/custom-elements-jsx.d.ts +2 -2
- package/dist/events.d.ts +20 -13
- package/dist/internal/aggregate-file-limits.d.ts +33 -0
- package/dist/internal/aggregate-file-limits.js +1 -0
- package/dist/internal/catalog-picker.d.ts +15 -2
- package/dist/internal/catalog-picker.js +1 -1
- package/dist/internal/debounce-controller.d.ts +14 -0
- package/dist/internal/debounce-controller.js +1 -1
- package/dist/internal/default-strings.generated.d.ts +1 -1
- package/dist/internal/default-strings.generated.js +2 -2
- package/dist/internal/focus-navigation.d.ts +45 -0
- package/dist/internal/focus-navigation.js +1 -1
- package/dist/internal/form-associated.js +1 -1
- package/dist/internal/initial-slot-collection.d.ts +30 -0
- package/dist/internal/initial-slot-collection.js +1 -0
- package/dist/internal/intl-cache.js +1 -1
- package/dist/internal/invalid-event-alias.d.ts +46 -0
- package/dist/internal/invalid-event-alias.js +1 -1
- package/dist/internal/localization-runtime.d.ts +24 -0
- package/dist/internal/localization-runtime.js +1 -1
- package/dist/internal/localization-types.d.ts +1 -1
- package/dist/internal/localization.js +1 -1
- package/dist/internal/package-metadata.d.ts +1 -1
- package/dist/internal/package-metadata.js +1 -1
- package/dist/internal/positioning-strategy.d.ts +3 -1
- package/dist/internal/state-part.d.ts +49 -0
- package/dist/internal/state-part.js +1 -0
- package/dist/internal/variants.styles.js +1 -1
- package/dist/lyra.d.ts +1 -1
- package/dist/lyra.js +1 -1
- package/dist/svelte.d.ts +2 -2
- package/dist/testing/index.d.ts +1 -1
- package/dist/testing/index.js +1 -1
- package/dist/testing/lyra-tag-event-map.d.ts +2 -2
- package/dist/testing/lyra-tag-event-map.js +1 -1
- package/dist/testing/wait-for-mount.d.ts +46 -0
- package/dist/testing/wait-for-mount.js +1 -0
- package/dist/theme/theme-bootstrap.js +1 -1
- package/dist/theme/theme.d.ts +11 -2
- package/dist/theme/theme.js +1 -1
- package/dist/translations/ar/layout.js +1 -1
- package/dist/translations/ar/retrieval.js +1 -1
- package/dist/translations/ar/shared.js +1 -1
- package/dist/translations/de/layout.js +1 -1
- package/dist/translations/de/retrieval.js +1 -1
- package/dist/translations/de/shared.js +1 -1
- package/dist/translations/es/layout.js +1 -1
- package/dist/translations/es/retrieval.js +1 -1
- package/dist/translations/es/shared.js +1 -1
- package/dist/translations/fa/layout.js +1 -1
- package/dist/translations/fa/retrieval.js +1 -1
- package/dist/translations/fa/shared.js +1 -1
- package/dist/translations/fr/layout.js +1 -1
- package/dist/translations/fr/retrieval.js +1 -1
- package/dist/translations/fr/shared.js +1 -1
- package/dist/translations/he/layout.js +1 -1
- package/dist/translations/he/retrieval.js +1 -1
- package/dist/translations/he/shared.js +1 -1
- package/dist/translations/it/layout.js +1 -1
- package/dist/translations/it/retrieval.js +1 -1
- package/dist/translations/it/shared.js +1 -1
- package/dist/translations/ja/layout.js +1 -1
- package/dist/translations/ja/retrieval.js +1 -1
- package/dist/translations/ja/shared.js +1 -1
- package/dist/translations/pt-BR/layout.js +1 -1
- package/dist/translations/pt-BR/retrieval.js +1 -1
- package/dist/translations/pt-BR/shared.js +1 -1
- package/dist/translations/ro/agent-tools.d.ts +1 -0
- package/dist/translations/ro/agent-tools.js +1 -0
- package/dist/translations/ro/charts.d.ts +1 -0
- package/dist/translations/ro/charts.js +1 -0
- package/dist/translations/ro/conversation.d.ts +1 -0
- package/dist/translations/ro/conversation.js +1 -0
- package/dist/translations/ro/data.d.ts +1 -0
- package/dist/translations/ro/data.js +1 -0
- package/dist/translations/ro/forms.d.ts +1 -0
- package/dist/translations/ro/forms.js +1 -0
- package/dist/translations/ro/layout.d.ts +1 -0
- package/dist/translations/ro/layout.js +1 -0
- package/dist/translations/ro/media.d.ts +1 -0
- package/dist/translations/ro/media.js +1 -0
- package/dist/translations/ro/overlays.d.ts +1 -0
- package/dist/translations/ro/overlays.js +1 -0
- package/dist/translations/ro/retrieval.d.ts +1 -0
- package/dist/translations/ro/retrieval.js +1 -0
- package/dist/translations/ro/shared.d.ts +1 -0
- package/dist/translations/ro/shared.js +1 -0
- package/dist/translations/ro/utility.d.ts +1 -0
- package/dist/translations/ro/utility.js +1 -0
- package/dist/translations/ro/viewers.d.ts +1 -0
- package/dist/translations/ro/viewers.js +5 -0
- package/dist/translations/ro.d.ts +1 -0
- package/dist/translations/ro.js +1 -0
- package/dist/translations/ru/layout.js +1 -1
- package/dist/translations/ru/retrieval.js +1 -1
- package/dist/translations/ru/shared.js +1 -1
- package/dist/translations/zh-CN/layout.js +1 -1
- package/dist/translations/zh-CN/retrieval.js +1 -1
- package/dist/translations/zh-CN/shared.js +1 -1
- package/dist/utilities/format.d.ts +17 -0
- package/dist/utilities/format.js +1 -1
- package/dist/vue.d.ts +2 -2
- package/llms/components/lr-app-rail-group.md +87 -10
- package/llms/components/lr-app-rail-item.md +88 -11
- package/llms/components/lr-app-rail.md +88 -11
- package/llms/components/lr-attachment-trigger.md +21 -0
- package/llms/components/lr-bar-chart.md +3 -2
- package/llms/components/lr-bubble-chart.md +3 -2
- package/llms/components/lr-button.md +5 -4
- package/llms/components/lr-callout.md +10 -0
- package/llms/components/lr-card.md +2 -1
- package/llms/components/lr-chart.md +43 -12
- package/llms/components/lr-citation-badge.md +7 -1
- package/llms/components/lr-code-block.md +21 -0
- package/llms/components/lr-color-picker.md +12 -7
- package/llms/components/lr-combobox.md +20 -1
- package/llms/components/lr-confirm-bar.md +36 -7
- package/llms/components/lr-context-meter.md +17 -4
- package/llms/components/lr-date-input.md +7 -1
- package/llms/components/lr-date-picker.md +6 -0
- package/llms/components/lr-dialog.md +21 -0
- package/llms/components/lr-doughnut-chart.md +3 -2
- package/llms/components/lr-drawer.md +10 -0
- package/llms/components/lr-drop-zone.md +16 -7
- package/llms/components/lr-dropdown-item.md +7 -0
- package/llms/components/lr-entity-chip.md +7 -1
- package/llms/components/lr-export-button.md +7 -1
- package/llms/components/lr-file-input.md +21 -10
- package/llms/components/lr-filter-bar.md +177 -18
- package/llms/components/lr-flow-canvas.md +16 -9
- package/llms/components/lr-gauge.md +22 -2
- package/llms/components/lr-histogram.md +7 -2
- package/llms/components/lr-icon-button.md +17 -8
- package/llms/components/lr-input.md +3 -1
- package/llms/components/lr-line-chart.md +3 -2
- package/llms/components/lr-lite-chart.md +13 -0
- package/llms/components/lr-locale-picker.md +7 -1
- package/llms/components/lr-map.md +63 -6
- package/llms/components/lr-mention-popover.md +16 -3
- package/llms/components/lr-menu-item.md +7 -0
- package/llms/components/lr-menu.md +8 -1
- package/llms/components/lr-message-actions.md +10 -0
- package/llms/components/lr-model-select.md +8 -3
- package/llms/components/lr-native-time-input.md +8 -1
- package/llms/components/lr-number-input.md +8 -1
- package/llms/components/lr-option.md +19 -0
- package/llms/components/lr-otp-input.md +6 -0
- package/llms/components/lr-pie-chart.md +3 -2
- package/llms/components/lr-polar-area-chart.md +3 -2
- package/llms/components/lr-prompt-input.md +2 -2
- package/llms/components/lr-radar-chart.md +3 -2
- package/llms/components/lr-reorder-item.md +12 -0
- package/llms/components/lr-reorder-list.md +12 -0
- package/llms/components/lr-scatter-chart.md +3 -2
- package/llms/components/lr-select.md +19 -2
- package/llms/components/lr-sequence-strip.md +10 -4
- package/llms/components/lr-streaming-text-core.md +28 -11
- package/llms/components/lr-streaming-text.md +41 -6
- package/llms/components/lr-suggestion-chips.md +8 -4
- package/llms/components/lr-table.md +47 -10
- package/llms/components/lr-textarea.md +1 -1
- package/llms/components/lr-time-input.md +7 -1
- package/llms/components/lr-tool-call-chip.md +7 -1
- package/llms/components/lr-tour.md +7 -1
- package/llms/components/lr-usage-badge.md +7 -1
- package/llms/components/lr-virtual-list.md +53 -0
- package/llms/components/lr-voice-picker.md +7 -3
- package/llms/shared.md +175 -19
- package/llms/tokens.md +17 -1
- package/llms-full.txt +1214 -169
- package/package.json +43 -3
- package/registrations.json +1 -1
- package/vscode-css-data.json +1 -1
- package/vscode-html-data.json +1 -1
- package/web-types.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{activeElementIn}from"../../../internal/active-element.js";import{collectFocusableElements,deepActiveElement}from"../../../internal/overlay-manager.js";import{getDateTimeFormat,getListFormat}from"../../../internal/intl-cache.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{DebounceController}from"../../../internal/debounce-controller.js";import{styles}from"./filter-bar.styles.js";import"../../forms/select/select.class.js";import"../../forms/combobox/combobox.class.js";import"../../overlays/overlay/dropdown.class.js";import"../menu/dropdown-item.class.js";import"../../forms/combobox/option.class.js";import"../../forms/date-picker/date-input.class.js";import"../../forms/input/input.class.js";import"../../overlays/chip/chip.class.js";import"../../overlays/chip/chip-group.class.js";import"../../forms/button/button.class.js";import"../../overlays/spinner/spinner.class.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_filterBarActiveFilters,LYRA_DEFAULT_filterBarReset,LYRA_DEFAULT_loading,LYRA_DEFAULT_noData,LYRA_DEFAULT_retry,LYRA_DEFAULT_tableLoadFailed}from"../../../internal/default-strings.generated.js";const MAX_FILTER_COLLECTION_ENTRIES=1e4,MAX_FILTER_COLLECTION_NODES=5e4,MAX_FILTER_COLLECTION_DEPTH=16,OMIT_FILTER_VALUE=Symbol("omit-filter-value"),EMPTY_FILTERS=Object.freeze([]),EMPTY_VALUE=Object.freeze({}),EMPTY_DATE_PRESETS=Object.freeze([]);function isPlainFilterRecord(value){try{const prototype=Object.getPrototypeOf(value);return prototype===null||Object.getPrototypeOf(prototype)===null}catch{return!1}}function snapshotFilterEntry(value,budget,depth){if(value===null||typeof value!="object"&&typeof value!="function"||typeof value=="function")return value;if(depth>MAX_FILTER_COLLECTION_DEPTH||budget.remaining<=0)return OMIT_FILTER_VALUE;const existing=budget.seen.get(value);if(existing!==void 0)return existing;let isArray=!1;try{isArray=Array.isArray(value)}catch{return OMIT_FILTER_VALUE}if(isArray){const output2=[];budget.seen.set(value,output2);let length=0;try{const descriptor=Object.getOwnPropertyDescriptor(value,"length");descriptor&&"value"in descriptor&&typeof descriptor.value=="number"&&Number.isSafeInteger(descriptor.value)&&descriptor.value>=0&&(length=Math.min(descriptor.value,MAX_FILTER_COLLECTION_ENTRIES))}catch{return Object.freeze(output2)}for(let index=0;index<length&&budget.remaining>0;index+=1){let descriptor;try{descriptor=Object.getOwnPropertyDescriptor(value,String(index))}catch{continue}if(!descriptor||!("value"in descriptor))continue;budget.remaining-=1;const entry=snapshotFilterEntry(descriptor.value,budget,depth+1);entry!==OMIT_FILTER_VALUE&&output2.push(entry)}return Object.freeze(output2)}if(!isPlainFilterRecord(value))return value;const output={};budget.seen.set(value,output);let descriptors;try{descriptors=Object.getOwnPropertyDescriptors(value)}catch{return OMIT_FILTER_VALUE}let retained=0;for(const key of Reflect.ownKeys(descriptors)){if(retained>=MAX_FILTER_COLLECTION_ENTRIES||budget.remaining<=0)break;const descriptor=descriptors[key];if(!descriptor?.enumerable||!("value"in descriptor))continue;retained+=1,budget.remaining-=1;const entry=key==="icon"?descriptor.value:snapshotFilterEntry(descriptor.value,budget,depth+1);entry!==OMIT_FILTER_VALUE&&Object.defineProperty(output,key,{value:entry,enumerable:!0,configurable:!1,writable:!1})}return Object.freeze(output)}function snapshotFilterDefinitions(value){let isArray=!1;try{isArray=Array.isArray(value)}catch{return EMPTY_FILTERS}return isArray?snapshotFilterEntry(value,{remaining:MAX_FILTER_COLLECTION_NODES,seen:new WeakMap},0):EMPTY_FILTERS}function snapshotFilterFieldValue(value){let isArray=!1;try{isArray=Array.isArray(value)}catch{return}if(!isArray)return typeof value=="string"||typeof value=="boolean"||value===void 0?value:void 0;const output=[];let sourceLength=0;try{const descriptor=Object.getOwnPropertyDescriptor(value,"length");descriptor&&"value"in descriptor&&typeof descriptor.value=="number"&&Number.isSafeInteger(descriptor.value)&&descriptor.value>=0&&(sourceLength=descriptor.value)}catch{return Object.freeze(output)}const length=Math.min(sourceLength,MAX_FILTER_COLLECTION_ENTRIES);for(let index=0;index<length;index+=1){let descriptor;try{descriptor=Object.getOwnPropertyDescriptor(value,String(index))}catch{continue}descriptor&&"value"in descriptor&&typeof descriptor.value=="string"&&output.push(descriptor.value)}return Object.freeze(output)}const SELECT_EXPORT_PARTS=["form-control-label: filter-control-label","trigger: filter-control-field","display-input: filter-control-input","start: filter-control-start","end: filter-control-end","listbox: filter-control-listbox","option: filter-control-option","clear-button: filter-control-clear-button","expand-icon: filter-control-expand-icon","error: filter-control-error","hint: filter-control-hint"].join(", "),COMBOBOX_EXPORT_PARTS=["form-control-label: filter-control-label","combobox: filter-control-field","combobox-input: filter-control-input","start: filter-control-start","end: filter-control-end","listbox: filter-control-listbox","option: filter-control-option","tags: filter-control-tags","tag: filter-control-tag","tag-label: filter-control-tag-label","clear-button: filter-control-clear-button","expand-icon: filter-control-expand-icon","error: filter-control-error","hint: filter-control-hint"].join(", "),INPUT_EXPORT_PARTS=["form-control-label: filter-control-label","input-wrapper: filter-control-field","input: filter-control-input","start: filter-control-start","end: filter-control-end","clear-button: filter-control-clear-button","error: filter-control-error","hint: filter-control-hint"].join(", "),CHECKBOX_MENU_EXPORT_PARTS=["base: filter-control-listbox"].join(", "),CHECKBOX_MENU_TRIGGER_EXPORT_PARTS=["base: filter-control-field","start: filter-control-start"].join(", "),DATE_INPUT_EXPORT_PARTS=["form-control-label: filter-control-label","input-wrapper: filter-control-field","input: filter-control-input","start: filter-control-start","end: filter-control-end","clear-button: filter-control-clear-button","expand-button: filter-control-expand-button","expand-icon: filter-control-expand-icon","popup: filter-control-popup","error: filter-control-error","hint: filter-control-hint"].join(", "),SAFE_FILTER_ID_PART=/^[a-zA-Z][a-zA-Z0-9_-]*$/;function fieldPartNames(filterId){return SAFE_FILTER_ID_PART.test(filterId)?`field field-${filterId}`:"field"}function isChoiceDefinition(definition){return definition.type==="select"||definition.type==="combobox"||definition.type==="checkbox-menu"}function isBuiltInSet(value){return value==null?!1:typeof value=="boolean"?value:Array.isArray(value)?value.length>0:value!==""}function defineFilterValueEntry(record,key,value){Object.defineProperty(record,key,{value,enumerable:!0,configurable:!0,writable:!0})}function cloneFilterValueRecord(value){const clone={},descriptors=Object.getOwnPropertyDescriptors(value);let retained=0;for(const key of Reflect.ownKeys(descriptors)){if(retained>=MAX_FILTER_COLLECTION_ENTRIES)break;const descriptor=descriptors[key];if(typeof key!="string"||!descriptor?.enumerable||!("value"in descriptor))continue;retained+=1;const fieldValue=snapshotFilterFieldValue(descriptor.value);fieldValue!==void 0&&defineFilterValueEntry(clone,key,fieldValue)}return clone}function cloneFilterValue(value){return Object.freeze(cloneFilterValueRecord(value))}class LyraFilterBar extends LyraElement{constructor(){super(...arguments),this.label="",this.disabled=!1,this.loading=!1,this.touchedFilters=new Set,this.slotPresence=new SlotPresenceController(this),this._filters=EMPTY_FILTERS,this._value=EMPTY_VALUE,this.rawValue=EMPTY_VALUE,this.debounceControllers=new Map,this.chipFocusGeneration=0,this.schemaGeneration=0,this.onControlChange=(def,e)=>{const control=e.target;if(def.type==="combobox"&&this.isDebounced(def.debounce)){this.scheduleDebounce(def.filterId,control.value,def.debounce);return}this.setFilterValue(def.filterId,control.value,control.appliedPreset)},this.stopControlAlias=event=>{event.stopPropagation()},this.onCustomControlChange=(def,generation,e)=>{e.stopPropagation();const next=def.custom.adapter.valueFromEvent(e);if(this.isDebounced(def.debounce)){this.scheduleDebounce(def.filterId,next,def.debounce,pending=>this.setCustomContextValue(def,generation,pending));return}this.setCustomContextValue(def,generation,next)}}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,filterBarActiveFilters:LYRA_DEFAULT_filterBarActiveFilters,filterBarReset:LYRA_DEFAULT_filterBarReset,loading:LYRA_DEFAULT_loading,noData:LYRA_DEFAULT_noData,retry:LYRA_DEFAULT_retry,tableLoadFailed:LYRA_DEFAULT_tableLoadFailed}}static{this.styles=[LyraElement.styles,styles]}static{this.immutableEventDetails=Object.freeze(["lr-validity-change"])}static{this.properties={filters:{attribute:!1,noAccessor:!0},value:{attribute:!1,noAccessor:!0}}}get filters(){return this._filters}set filters(next){const old=this._filters,widened=next;this.cancelDebounce(),this.renewSchemaContext();const seen=new Set;this._filters=Object.freeze(snapshotFilterDefinitions(widened).filter(definition=>{try{return!definition||typeof definition.filterId!="string"||definition.filterId.length===0||definition.filterId!==definition.filterId.trim()||typeof definition.label!="string"||definition.label.trim().length===0||seen.has(definition.filterId)||isChoiceDefinition(definition)&&!Array.isArray(definition.options)||definition.type==="custom"&&(!definition.custom?.adapter||typeof definition.custom.render!="function")?!1:(seen.add(definition.filterId),!0)}catch{return!1}}).map(definition=>{if(!isChoiceDefinition(definition))return definition;const options=definition.options.filter(option=>{try{return option!==null&&typeof option=="object"&&typeof Object.getOwnPropertyDescriptor(option,"value")?.value=="string"&&typeof Object.getOwnPropertyDescriptor(option,"label")?.value=="string"}catch{return!1}});return Object.freeze({...definition,options:Object.freeze(options)})}));const ids=new Set(this._filters.map(definition=>definition.filterId));this.touchedFilters=new Set([...this.touchedFilters].filter(id=>ids.has(id)));const oldValue=this._value;this._value=this.normalizeValue(this.rawValue),this.requestUpdate("filters",old),this._value!==oldValue&&this.requestUpdate("value",oldValue)}get value(){return cloneFilterValue(this._value)}set value(next){const old=this._value,widened=next;try{this.rawValue=cloneFilterValue(widened??EMPTY_VALUE)}catch{this.rawValue=EMPTY_VALUE}this._value=this.normalizeValue(widened),this.requestUpdate("value",old)}renewSchemaContext(){this.schemaAbortController?.abort();const AbortControllerCtor=this.ownerDocument.defaultView?.AbortController??AbortController;this.schemaAbortController=new AbortControllerCtor,this.schemaGeneration+=1}get schemaSignal(){return this.schemaAbortController||this.renewSchemaContext(),this.schemaAbortController.signal}isEmpty(def,value){if(def.type!=="custom")return!isBuiltInSet(value);const{adapter}=def.custom;if(adapter.isEmpty)return adapter.isEmpty(value);const clear=adapter.clearValue;return Array.isArray(value)&&Array.isArray(clear)?value.length===clear.length&&value.every((entry,index)=>entry===clear[index]):Object.is(value,clear)}valueFor(def){return Object.prototype.hasOwnProperty.call(this._value,def.filterId)?this._value[def.filterId]:def.type==="custom"?def.custom.adapter.clearValue:void 0}normalizeValue(value){const normalized={};for(const def of this._filters){let descriptor;try{descriptor=Object.getOwnPropertyDescriptor(value??{},def.filterId)}catch{continue}if(!descriptor||!("value"in descriptor))continue;const fieldValue=snapshotFilterFieldValue(descriptor.value);this.isEmpty(def,fieldValue)||defineFilterValueEntry(normalized,def.filterId,fieldValue)}return Object.freeze(normalized)}get hasActiveFilters(){return this._filters.some(def=>!this.isEmpty(def,this.valueFor(def)))}get invalidFilterIds(){return Object.freeze(this._filters.filter(def=>def.required&&this.isEmpty(def,this.valueFor(def))).map(def=>def.filterId))}checkValidity(){return this.invalidFilterIds.length===0}reportValidity(){const invalid=this.invalidFilterIds;return invalid.length&&(this.touchedFilters=new Set([...this.touchedFilters,...invalid])),invalid.length===0}reset(){if(this.disabled)return;this.cancelDebounce(),this.touchedFilters=new Set;const self=this;self.value=self.resetValue,self.emit("lr-input",Object.freeze({value:self.value,filterId:void 0,appliedPreset:void 0})),self.emit("lr-reset",Object.freeze({value:self.value}))}get resetValue(){const out={};for(const def of this._filters)if(def.defaultValue!==void 0&&!this.isEmpty(def,def.defaultValue)){const value=Array.isArray(def.defaultValue)?Object.freeze([...def.defaultValue]):def.defaultValue;defineFilterValueEntry(out,def.filterId,value)}return Object.freeze(out)}setFilterValue(id,value,appliedPreset){const definition=this._filters.find(candidate=>candidate.filterId===id);if(this.disabled||!definition)return;const next={...this._value};this.isEmpty(definition,value)?delete next[id]:defineFilterValueEntry(next,id,value);const self=this;self.value=next,self.emit("lr-input",Object.freeze({value:self.value,filterId:id,appliedPreset}))}setCustomContextValue(definition,generation,value){generation!==this.schemaGeneration||this.schemaSignal.aborted||!this.isConnected||!this._filters.includes(definition)||this.setFilterValue(definition.filterId,value)}markTouched(id){this.disabled||this.touchedFilters.has(id)||(this.touchedFilters=new Set(this.touchedFilters).add(id))}isDebounced(delay){return typeof delay=="number"&&Number.isFinite(delay)&&delay>0}scheduleDebounce(id,value,delay,commit=pending=>this.setFilterValue(id,pending)){let controller=this.debounceControllers.get(id);if(!controller){const created=new DebounceController(delay,pending=>{this.debounceControllers.get(id)===created&&this.debounceControllers.delete(id),pending!==void 0&&commit(pending)});controller=created,this.debounceControllers.set(id,created)}controller.delayMs=delay,controller.push(value)}hasPendingDebounce(id){return this.debounceControllers.get(id)?.pending??!1}onTextInput(def,e){if(this.disabled)return;const next=e.target.value??"";if(!this.isDebounced(def.debounce)){this.cancelDebounce(def.filterId),this.setFilterValue(def.filterId,next);return}this.scheduleDebounce(def.filterId,next,def.debounce)}flushDebounce(id){this.debounceControllers.get(id)?.flush()}cancelDebounce(id){for(const[key,controller]of this.debounceControllers)id!==void 0&&key!==id||(controller.dispose(),this.debounceControllers.delete(key))}onFieldFocusout(id){this.flushDebounce(id),this.markTouched(id)}repairFocusAfterChipRemoval(index,filterId,shouldRepairFocus){const generation=++this.chipFocusGeneration;shouldRepairFocus&&this.updateComplete.then(()=>{if(!this.isConnected||this.disabled||generation!==this.chipFocusGeneration||deepActiveElement(this.ownerDocument)!==this.ownerDocument.body)return;const chips=this.renderRoot.querySelectorAll('[part="chip"]'),chip=chips[Math.min(index,chips.length-1)],target=chip?collectFocusableElements(chip)[0]:void 0;if(target){target.focus();return}for(const control of this.renderRoot.querySelectorAll("[data-filter-id]"))if(control.dataset.filterId===filterId){collectFocusableElements(control)[0]?.focus();return}})}clearFilter(id,shouldRepairFocus=!1){if(this.disabled)return;this.cancelDebounce(id);const index=this.activeEntries.findIndex(entry=>entry.def.filterId===id),def=this._filters.find(f=>f.filterId===id);if(!def)return;const clearValue=def.type==="custom"?def.custom.adapter.clearValue:def.type==="checkbox-menu"||def.type==="combobox"&&def.multiple?[]:"";this.setFilterValue(id,clearValue),this.repairFocusAfterChipRemoval(Math.max(0,index),id,shouldRepairFocus)}displayValueFor(def,value){if(def.type==="custom"){const formatted=def.custom?.adapter.formatValue?.(value,this.effectiveLocale);return formatted!==void 0?formatted:Array.isArray(value)?getListFormat(this.effectiveLocale,{style:"long",type:"conjunction"}).format(value):value===void 0?"":String(value)}if(isChoiceDefinition(def)){const labels=(Array.isArray(value)?value.filter(entry=>typeof entry=="string"):typeof value=="string"?[value]:[]).map(v=>def.options?.find(o=>o.value===v)?.label??v);return labels.length>1?getListFormat(this.effectiveLocale,{style:"long",type:"conjunction"}).format(labels):labels[0]??""}if(def.type==="text")return typeof value=="string"?value:"";if(typeof value!="string")return"";const formatter=getDateTimeFormat(this.effectiveLocale,{year:"numeric",month:"short",day:"numeric",timeZone:"UTC"}),parseIso=input=>{const match=/^(\d{4})-(\d{2})-(\d{2})$/.exec(input);if(!match)return;const year=Number(match[1]),month=Number(match[2]),day=Number(match[3]),date=new Date(0);return date.setUTCHours(0,0,0,0),date.setUTCFullYear(year,month-1,day),date.getUTCFullYear()===year&&date.getUTCMonth()===month-1&&date.getUTCDate()===day?date:void 0},segments=value.split("/");if(def.type==="date"&&segments.length!==1||def.type==="date-range"&&segments.length!==2)return value;const[startText,endText]=segments,start=parseIso(startText??""),end=endText===void 0?void 0:parseIso(endText);return!start||endText!==void 0&&(!end||end.getTime()<start.getTime())?value:end?formatter.formatRange(start,end):formatter.format(start)}get activeEntries(){return this._filters.filter(def=>!this.isEmpty(def,this.valueFor(def))).map(def=>({def,display:this.displayValueFor(def,this.valueFor(def))}))}disconnectedCallback(){super.disconnectedCallback(),this.cancelDebounce(),this.closeCheckboxMenus(),this.schemaAbortController?.abort(),this.schemaAbortController=void 0,this.schemaGeneration+=1}closeCheckboxMenus(){for(const menu of this.renderRoot?.querySelectorAll("lr-dropdown[data-filter-id]")??[])menu.open&&(menu.open=!1)}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.closeCheckboxMenus(),(!this.schemaAbortController||this.schemaAbortController.signal.aborted)&&(this.renewSchemaContext(),this.hasUpdated&&this.requestUpdate()),this.hasUpdated&&queueMicrotask(()=>{this.isConnected&&this.syncTextControls()})}syncTextControls(){if(!this._filters.some(def=>def.type==="text"))return;const fields=new Map;for(const node of this.renderRoot.querySelectorAll("lr-input[data-filter-id]")){const element=node,id=element.dataset.filterId;id!==void 0&&fields.set(id,element)}for(const def of this._filters){if(def.type!=="text"||this.hasPendingDebounce(def.filterId))continue;const field=fields.get(def.filterId);if(!field)continue;const raw=this._value[def.filterId],next=typeof raw=="string"?raw:"";field.value!==next&&(field.value=next)}}willUpdate(changed){super.willUpdate(changed),changed.has("disabled")&&this.disabled&&this.cancelDebounce()}updated(changed){if(super.updated(changed),this.syncTextControls(),changed.has("value")||changed.has("filters")){const invalidFilterIds=this.invalidFilterIds,valid=invalidFilterIds.length===0,key=JSON.stringify({valid,invalidFilterIds});key!==this.lastValidityKey&&(this.lastValidityKey=key,this.emit("lr-validity-change",Object.freeze({valid,invalidFilterIds:Object.freeze([...invalidFilterIds])})))}}renderStartAdornment(icon,slotName="start"){return icon==null?nothing:html`<span slot=${slotName} aria-hidden="true" inert>${icon}</span>`}renderOption(option){return html`<lr-option
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{activeElementIn}from"../../../internal/active-element.js";import{collectFocusableElements,deepActiveElement}from"../../../internal/overlay-manager.js";import{getDateTimeFormat,getListFormat}from"../../../internal/intl-cache.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{DebounceController}from"../../../internal/debounce-controller.js";import{srOnly}from"../../../internal/a11y.js";import{styles}from"./filter-bar.styles.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_filterBarActiveFilters,LYRA_DEFAULT_filterBarReset}from"../../../internal/default-strings.generated.js";const MAX_FILTER_COLLECTION_ENTRIES=1e4,MAX_FILTER_COLLECTION_NODES=5e4,MAX_FILTER_COLLECTION_DEPTH=16,OMIT_FILTER_VALUE=Symbol("omit-filter-value"),EMPTY_FILTERS=Object.freeze([]),EMPTY_VALUE=Object.freeze({}),EMPTY_DATE_PRESETS=Object.freeze([]);function isPlainFilterRecord(value){try{const prototype=Object.getPrototypeOf(value);return prototype===null||Object.getPrototypeOf(prototype)===null}catch{return!1}}function snapshotFilterEntry(value,budget,depth){if(value===null||typeof value!="object"&&typeof value!="function"||typeof value=="function")return value;if(depth>MAX_FILTER_COLLECTION_DEPTH||budget.remaining<=0)return OMIT_FILTER_VALUE;const existing=budget.seen.get(value);if(existing!==void 0)return existing;let isArray=!1;try{isArray=Array.isArray(value)}catch{return OMIT_FILTER_VALUE}if(isArray){const output2=[];budget.seen.set(value,output2);let length=0;try{const descriptor=Object.getOwnPropertyDescriptor(value,"length");descriptor&&"value"in descriptor&&typeof descriptor.value=="number"&&Number.isSafeInteger(descriptor.value)&&descriptor.value>=0&&(length=Math.min(descriptor.value,MAX_FILTER_COLLECTION_ENTRIES))}catch{return Object.freeze(output2)}for(let index=0;index<length&&budget.remaining>0;index+=1){let descriptor;try{descriptor=Object.getOwnPropertyDescriptor(value,String(index))}catch{continue}if(!descriptor||!("value"in descriptor))continue;budget.remaining-=1;const entry=snapshotFilterEntry(descriptor.value,budget,depth+1);entry!==OMIT_FILTER_VALUE&&output2.push(entry)}return Object.freeze(output2)}if(!isPlainFilterRecord(value))return value;const output={};budget.seen.set(value,output);let descriptors;try{descriptors=Object.getOwnPropertyDescriptors(value)}catch{return OMIT_FILTER_VALUE}let retained=0;for(const key of Reflect.ownKeys(descriptors)){if(retained>=MAX_FILTER_COLLECTION_ENTRIES||budget.remaining<=0)break;const descriptor=descriptors[key];if(!descriptor?.enumerable||!("value"in descriptor))continue;retained+=1,budget.remaining-=1;const entry=key==="icon"?descriptor.value:snapshotFilterEntry(descriptor.value,budget,depth+1);entry!==OMIT_FILTER_VALUE&&Object.defineProperty(output,key,{value:entry,enumerable:!0,configurable:!1,writable:!1})}return Object.freeze(output)}function snapshotFilterDefinitions(value){let isArray=!1;try{isArray=Array.isArray(value)}catch{return EMPTY_FILTERS}return isArray?snapshotFilterEntry(value,{remaining:MAX_FILTER_COLLECTION_NODES,seen:new WeakMap},0):EMPTY_FILTERS}function snapshotFilterFieldValue(value){let isArray=!1;try{isArray=Array.isArray(value)}catch{return}if(!isArray)return typeof value=="string"||typeof value=="boolean"||value===void 0?value:void 0;const output=[];let sourceLength=0;try{const descriptor=Object.getOwnPropertyDescriptor(value,"length");descriptor&&"value"in descriptor&&typeof descriptor.value=="number"&&Number.isSafeInteger(descriptor.value)&&descriptor.value>=0&&(sourceLength=descriptor.value)}catch{return Object.freeze(output)}const length=Math.min(sourceLength,MAX_FILTER_COLLECTION_ENTRIES);for(let index=0;index<length;index+=1){let descriptor;try{descriptor=Object.getOwnPropertyDescriptor(value,String(index))}catch{continue}descriptor&&"value"in descriptor&&typeof descriptor.value=="string"&&output.push(descriptor.value)}return Object.freeze(output)}const SELECT_EXPORT_PARTS=["form-control-label: filter-control-label","trigger: filter-control-field","display-input: filter-control-input","start: filter-control-start","end: filter-control-end","listbox: filter-control-listbox","option: filter-control-option","clear-button: filter-control-clear-button","expand-icon: filter-control-expand-icon","error: filter-control-error","hint: filter-control-hint"].join(", "),COMBOBOX_EXPORT_PARTS=["form-control-label: filter-control-label","combobox: filter-control-field","combobox-input: filter-control-input","start: filter-control-start","end: filter-control-end","listbox: filter-control-listbox","option: filter-control-option","tags: filter-control-tags","tag: filter-control-tag","tag-label: filter-control-tag-label","tag__remove-button: filter-control-tag-remove-button","tag__remove-button__base: filter-control-tag-remove-button-base","clear-button: filter-control-clear-button","expand-icon: filter-control-expand-icon","error: filter-control-error","hint: filter-control-hint"].join(", "),INPUT_EXPORT_PARTS=["form-control-label: filter-control-label","input-wrapper: filter-control-field","input: filter-control-input","start: filter-control-start","end: filter-control-end","clear-button: filter-control-clear-button","error: filter-control-error","hint: filter-control-hint"].join(", "),CHECKBOX_MENU_EXPORT_PARTS=["base: filter-control-listbox"].join(", "),CHECKBOX_MENU_TRIGGER_EXPORT_PARTS=["base: filter-control-field","start: filter-control-start","label: filter-control-label-group","caret: filter-control-expand-icon"].join(", "),DATE_INPUT_EXPORT_PARTS=["form-control-label: filter-control-label","input-wrapper: filter-control-field","input: filter-control-input","start: filter-control-start","end: filter-control-end","clear-button: filter-control-clear-button","expand-button: filter-control-expand-button","expand-icon: filter-control-expand-icon","popup: filter-control-popup","error: filter-control-error","hint: filter-control-hint"].join(", "),SAFE_FILTER_ID_PART=/^[a-zA-Z][a-zA-Z0-9_-]*$/;function fieldPartNames(filterId){return SAFE_FILTER_ID_PART.test(filterId)?`field field-${filterId}`:"field"}function isChoiceDefinition(definition){return definition.type==="select"||definition.type==="combobox"||definition.type==="checkbox-menu"}function isBuiltInSet(value){return value==null?!1:typeof value=="boolean"?value:Array.isArray(value)?value.length>0:value!==""}function filterValueEqualsDefault(value,defaultValue){const valueIsArray=Array.isArray(value),defaultIsArray=Array.isArray(defaultValue);return valueIsArray||defaultIsArray?!valueIsArray||!defaultIsArray?!1:value.length===defaultValue.length&&value.every((entry,index)=>entry===defaultValue[index]):Object.is(value,defaultValue)}function defineFilterValueEntry(record,key,value){Object.defineProperty(record,key,{value,enumerable:!0,configurable:!0,writable:!0})}function cloneFilterValueRecord(value){const clone={},descriptors=Object.getOwnPropertyDescriptors(value);let retained=0;for(const key of Reflect.ownKeys(descriptors)){if(retained>=MAX_FILTER_COLLECTION_ENTRIES)break;const descriptor=descriptors[key];if(typeof key!="string"||!descriptor?.enumerable||!("value"in descriptor))continue;retained+=1;const fieldValue=snapshotFilterFieldValue(descriptor.value);fieldValue!==void 0&&defineFilterValueEntry(clone,key,fieldValue)}return clone}function cloneFilterValue(value){return Object.freeze(cloneFilterValueRecord(value))}class LyraFilterBar extends LyraElement{constructor(){super(...arguments),this.label="",this.disabled=!1,this.loading=!1,this.activeFiltersDisplay="all",this.touchedFilters=new Set,this.slotPresence=new SlotPresenceController(this),this._filters=EMPTY_FILTERS,this._value=EMPTY_VALUE,this.rawValue=EMPTY_VALUE,this.debounceControllers=new Map,this.chipFocusGeneration=0,this.schemaGeneration=0,this.onControlChange=(def,e)=>{const control=e.target;if(def.type==="combobox"&&this.isDebounced(def.debounce)){this.scheduleDebounce(def.filterId,control.value,def.debounce);return}this.setFilterValue(def.filterId,control.value,control.appliedPreset)},this.stopControlAlias=event=>{event.stopPropagation()},this.onCustomControlChange=(def,generation,e)=>{e.stopPropagation();const next=def.custom.adapter.valueFromEvent(e);if(this.isDebounced(def.debounce)){this.scheduleDebounce(def.filterId,next,def.debounce,pending=>this.setCustomContextValue(def,generation,pending));return}this.setCustomContextValue(def,generation,next)}}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,filterBarActiveFilters:LYRA_DEFAULT_filterBarActiveFilters,filterBarReset:LYRA_DEFAULT_filterBarReset}}static{this.styles=[LyraElement.styles,srOnly,styles]}static{this.immutableEventDetails=Object.freeze(["lr-validity-change"])}static{this.properties={filters:{attribute:!1,noAccessor:!0},value:{attribute:!1,noAccessor:!0}}}get filters(){return this._filters}set filters(next){const old=this._filters,widened=next;this.cancelDebounce(),this.renewSchemaContext();const seen=new Set;this._filters=Object.freeze(snapshotFilterDefinitions(widened).filter(definition=>{try{return!definition||typeof definition.filterId!="string"||definition.filterId.length===0||definition.filterId!==definition.filterId.trim()||typeof definition.label!="string"||definition.label.trim().length===0||seen.has(definition.filterId)||isChoiceDefinition(definition)&&!Array.isArray(definition.options)||definition.type==="custom"&&(!definition.custom?.adapter||typeof definition.custom.render!="function")?!1:(seen.add(definition.filterId),!0)}catch{return!1}}).map(definition=>{if(!isChoiceDefinition(definition))return definition;const options=definition.options.filter(option=>{try{return option!==null&&typeof option=="object"&&typeof Object.getOwnPropertyDescriptor(option,"value")?.value=="string"&&typeof Object.getOwnPropertyDescriptor(option,"label")?.value=="string"}catch{return!1}});return Object.freeze({...definition,options:Object.freeze(options)})}));const ids=new Set(this._filters.map(definition=>definition.filterId));this.touchedFilters=new Set([...this.touchedFilters].filter(id=>ids.has(id)));const oldValue=this._value;this._value=this.normalizeValue(this.rawValue),this.requestUpdate("filters",old),this._value!==oldValue&&this.requestUpdate("value",oldValue)}get value(){return cloneFilterValue(this._value)}set value(next){const old=this._value,widened=next;try{this.rawValue=cloneFilterValue(widened??EMPTY_VALUE)}catch{this.rawValue=EMPTY_VALUE}this._value=this.normalizeValue(widened),this.requestUpdate("value",old)}renewSchemaContext(){this.schemaAbortController?.abort();const AbortControllerCtor=this.ownerDocument.defaultView?.AbortController??AbortController;this.schemaAbortController=new AbortControllerCtor,this.schemaGeneration+=1}get schemaSignal(){return this.schemaAbortController||this.renewSchemaContext(),this.schemaAbortController.signal}isEmpty(def,value){if(def.type==="chip")return typeof def.isEmpty=="function"?def.isEmpty(value):!isBuiltInSet(value);if(def.type!=="custom")return!isBuiltInSet(value);const{adapter}=def.custom;if(adapter.isEmpty)return adapter.isEmpty(value);const clear=adapter.clearValue;return Array.isArray(value)&&Array.isArray(clear)?value.length===clear.length&&value.every((entry,index)=>entry===clear[index]):Object.is(value,clear)}valueFor(def){return Object.prototype.hasOwnProperty.call(this._value,def.filterId)?this._value[def.filterId]:def.type==="custom"?def.custom.adapter.clearValue:def.type==="chip"?def.clearValue:void 0}normalizeValue(value){const normalized={};for(const def of this._filters){let descriptor;try{descriptor=Object.getOwnPropertyDescriptor(value??{},def.filterId)}catch{continue}if(!descriptor||!("value"in descriptor))continue;const fieldValue=snapshotFilterFieldValue(descriptor.value);this.isEmpty(def,fieldValue)||defineFilterValueEntry(normalized,def.filterId,fieldValue)}return Object.freeze(normalized)}get hasActiveFilters(){return this._filters.some(def=>!this.isEmpty(def,this.valueFor(def)))}get invalidFilterIds(){return Object.freeze(this._filters.filter(def=>def.required&&this.isEmpty(def,this.valueFor(def))).map(def=>def.filterId))}checkValidity(){return this.invalidFilterIds.length===0}reportValidity(){const invalid=this.invalidFilterIds;return invalid.length&&(this.touchedFilters=new Set([...this.touchedFilters,...invalid])),invalid.length===0}reset(){if(this.disabled)return;this.cancelDebounce(),this.touchedFilters=new Set;const self=this;self.value=self.resetValue,self.emit("lr-input",Object.freeze({value:self.value,filterId:void 0,appliedPreset:void 0})),self.emit("lr-reset",Object.freeze({value:self.value}))}get resetValue(){const out={};for(const def of this._filters)if(def.defaultValue!==void 0&&!this.isEmpty(def,def.defaultValue)){const value=Array.isArray(def.defaultValue)?Object.freeze([...def.defaultValue]):def.defaultValue;defineFilterValueEntry(out,def.filterId,value)}return Object.freeze(out)}setFilterValue(id,value,appliedPreset){const definition=this._filters.find(candidate=>candidate.filterId===id);if(this.disabled||!definition)return;const next={...this._value};this.isEmpty(definition,value)?delete next[id]:defineFilterValueEntry(next,id,value);const self=this;self.value=next,self.emit("lr-input",Object.freeze({value:self.value,filterId:id,appliedPreset}))}setCustomContextValue(definition,generation,value){generation!==this.schemaGeneration||this.schemaSignal.aborted||!this.isConnected||!this._filters.includes(definition)||this.setFilterValue(definition.filterId,value)}markTouched(id){this.disabled||this.touchedFilters.has(id)||(this.touchedFilters=new Set(this.touchedFilters).add(id))}isDebounced(delay){return typeof delay=="number"&&Number.isFinite(delay)&&delay>0}scheduleDebounce(id,value,delay,commit=pending=>this.setFilterValue(id,pending)){let controller=this.debounceControllers.get(id);if(!controller){const created=new DebounceController(delay,pending=>{this.debounceControllers.get(id)===created&&this.debounceControllers.delete(id),pending!==void 0&&commit(pending)});controller=created,this.debounceControllers.set(id,created)}controller.delayMs=delay,controller.push(value)}hasPendingDebounce(id){return this.debounceControllers.get(id)?.pending??!1}onTextInput(def,e){if(this.disabled)return;const next=e.target.value??"";if(!this.isDebounced(def.debounce)){this.cancelDebounce(def.filterId),this.setFilterValue(def.filterId,next);return}this.scheduleDebounce(def.filterId,next,def.debounce)}flushDebounce(id){this.debounceControllers.get(id)?.flush()}cancelDebounce(id){for(const[key,controller]of this.debounceControllers)id!==void 0&&key!==id||(controller.dispose(),this.debounceControllers.delete(key))}onFieldFocusout(id){this.flushDebounce(id),this.markTouched(id)}repairFocusAfterChipRemoval(index,filterId,shouldRepairFocus){const generation=++this.chipFocusGeneration;shouldRepairFocus&&this.updateComplete.then(()=>{if(!this.isConnected||this.disabled||generation!==this.chipFocusGeneration||deepActiveElement(this.ownerDocument)!==this.ownerDocument.body)return;const chips=this.renderRoot.querySelectorAll('[part="chip"]'),chip=chips[Math.min(index,chips.length-1)],target=chip?collectFocusableElements(chip)[0]:void 0;if(target){target.focus();return}for(const control of this.renderRoot.querySelectorAll("[data-filter-id]"))if(control.dataset.filterId===filterId){collectFocusableElements(control)[0]?.focus();return}})}clearFilter(id,shouldRepairFocus=!1){if(this.disabled)return;this.cancelDebounce(id);const index=this.activeEntries.findIndex(entry=>entry.def.filterId===id),def=this._filters.find(f=>f.filterId===id);if(!def)return;const clearValue=def.type==="custom"?def.custom.adapter.clearValue:def.type==="chip"?def.clearValue??"":def.type==="checkbox-menu"||def.type==="combobox"&&def.multiple?[]:"";this.setFilterValue(id,clearValue),this.repairFocusAfterChipRemoval(Math.max(0,index),id,shouldRepairFocus)}displayValueFor(def,value){if(def.type==="custom"){const formatted=def.custom?.adapter.formatValue?.(value,this.effectiveLocale);return formatted!==void 0?formatted:Array.isArray(value)?getListFormat(this.effectiveLocale,{style:"long",type:"conjunction"}).format(value):value===void 0?"":String(value)}if(def.type==="chip"){const formatted=typeof def.formatValue=="function"?def.formatValue(value,this.effectiveLocale):void 0;return formatted!==void 0?formatted:Array.isArray(value)?getListFormat(this.effectiveLocale,{style:"long",type:"conjunction"}).format(value):value===void 0?"":String(value)}if(isChoiceDefinition(def)){const labels=(Array.isArray(value)?value.filter(entry=>typeof entry=="string"):typeof value=="string"?[value]:[]).map(v=>def.options?.find(o=>o.value===v)?.label??v);return labels.length>1?getListFormat(this.effectiveLocale,{style:"long",type:"conjunction"}).format(labels):labels[0]??""}if(def.type==="text")return typeof value=="string"?value:"";if(typeof value!="string")return"";const formatter=getDateTimeFormat(this.effectiveLocale,{year:"numeric",month:"short",day:"numeric",timeZone:"UTC"}),parseIso=input=>{const match=/^(\d{4})-(\d{2})-(\d{2})$/.exec(input);if(!match)return;const year=Number(match[1]),month=Number(match[2]),day=Number(match[3]),date=new Date(0);return date.setUTCHours(0,0,0,0),date.setUTCFullYear(year,month-1,day),date.getUTCFullYear()===year&&date.getUTCMonth()===month-1&&date.getUTCDate()===day?date:void 0},segments=value.split("/");if(def.type==="date"&&segments.length!==1||def.type==="date-range"&&segments.length!==2)return value;const[startText,endText]=segments,start=parseIso(startText??""),end=endText===void 0?void 0:parseIso(endText);return!start||endText!==void 0&&(!end||end.getTime()<start.getTime())?value:end?formatter.formatRange(start,end):formatter.format(start)}get activeEntries(){return this.activeFiltersDisplay==="hidden"?[]:this._filters.filter(def=>!this.isEmpty(def,this.valueFor(def))).filter(def=>this.activeFiltersDisplay!=="changed"||!filterValueEqualsDefault(this.valueFor(def),def.defaultValue)).map(def=>({def,display:this.displayValueFor(def,this.valueFor(def))}))}disconnectedCallback(){super.disconnectedCallback(),this.cancelDebounce(),this.closeCheckboxMenus(),this.schemaAbortController?.abort(),this.schemaAbortController=void 0,this.schemaGeneration+=1}closeCheckboxMenus(){for(const menu of this.renderRoot?.querySelectorAll("lr-dropdown[data-filter-id]")??[])menu.open&&(menu.open=!1)}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.closeCheckboxMenus(),(!this.schemaAbortController||this.schemaAbortController.signal.aborted)&&(this.renewSchemaContext(),this.hasUpdated&&this.requestUpdate()),this.hasUpdated&&queueMicrotask(()=>{this.isConnected&&this.syncTextControls()})}syncTextControls(){if(!this._filters.some(def=>def.type==="text"))return;const fields=new Map;for(const node of this.renderRoot.querySelectorAll("lr-input[data-filter-id]")){const element=node,id=element.dataset.filterId;id!==void 0&&fields.set(id,element)}for(const def of this._filters){if(def.type!=="text"||this.hasPendingDebounce(def.filterId))continue;const field=fields.get(def.filterId);if(!field)continue;const raw=this._value[def.filterId],next=typeof raw=="string"?raw:"";field.value!==next&&(field.value=next)}}willUpdate(changed){super.willUpdate(changed),changed.has("disabled")&&this.disabled&&this.cancelDebounce()}updated(changed){if(super.updated(changed),this.syncTextControls(),changed.has("value")||changed.has("filters")){const invalidFilterIds=this.invalidFilterIds,valid=invalidFilterIds.length===0,key=JSON.stringify({valid,invalidFilterIds});key!==this.lastValidityKey&&(this.lastValidityKey=key,this.emit("lr-validity-change",Object.freeze({valid,invalidFilterIds:Object.freeze([...invalidFilterIds])})))}}renderStartAdornment(icon,slotName="start"){return icon==null?nothing:html`<span slot=${slotName} aria-hidden="true" inert>${icon}</span>`}renderOption(option){return html`<lr-option
|
|
2
2
|
value=${option.value}
|
|
3
3
|
search-text=${option.searchText??nothing}
|
|
4
|
+
?disabled=${option.disabled===!0}
|
|
4
5
|
>${this.renderStartAdornment(option.icon)}${option.label}</lr-option
|
|
5
6
|
>`}labelRouting(def){const hidden=def.labelVisibility==="hidden";return{label:hidden?"":def.label,placeholder:def.placeholder||(hidden?def.label:""),accessibleLabel:hidden?def.label:nothing}}onCheckboxMenuToggle(def,event){if(event.stopPropagation(),event.preventDefault(),this.disabled)return;const detail=event.detail,current=this.valueFor(def),selected=Array.isArray(current)?current.filter(entry=>typeof entry=="string"):[],next=detail.checked?selected.includes(detail.value)?selected:[...selected,detail.value]:selected.filter(entry=>entry!==detail.value);this.setFilterValue(def.filterId,Object.freeze(next))}renderCheckboxMenu(def,value,errorText){const selected=Array.isArray(value)?value.filter(entry=>typeof entry=="string"):[],size=def.size??"m",routing=this.labelRouting(def),summary=selected.length>0?this.displayValueFor(def,value):routing.placeholder,showLabel=def.labelVisibility!=="hidden"||summary!==def.label;return html`<div part="filter-control" class="checkbox-menu">
|
|
6
7
|
<lr-dropdown
|
|
@@ -17,6 +18,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
17
18
|
slot="trigger"
|
|
18
19
|
exportparts=${CHECKBOX_MENU_TRIGGER_EXPORT_PARTS}
|
|
19
20
|
appearance="outlined"
|
|
21
|
+
with-caret
|
|
20
22
|
.size=${size}
|
|
21
23
|
?disabled=${this.disabled}
|
|
22
24
|
>${this.renderStartAdornment(def.icon)}${showLabel?html`<span
|
|
@@ -30,6 +32,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
30
32
|
type="checkbox"
|
|
31
33
|
value=${option.value}
|
|
32
34
|
?checked=${selected.includes(option.value)}
|
|
35
|
+
?disabled=${option.disabled===!0}
|
|
33
36
|
@lr-menu-item-change=${event=>this.onCheckboxMenuToggle(def,event)}
|
|
34
37
|
>${this.renderStartAdornment(option.icon,"icon")}${option.label}</lr-dropdown-item
|
|
35
38
|
>`)}
|
|
@@ -40,7 +43,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
40
43
|
data-filter-id=${def.filterId}
|
|
41
44
|
@lr-input=${event=>event.stopPropagation()}
|
|
42
45
|
@lr-change=${event=>event.stopPropagation()}
|
|
43
|
-
>${custom.render(context)}</div>`}if(def.type==="checkbox-menu")return this.renderCheckboxMenu(def,value,errorText);const routing=this.labelRouting(def);if(def.type==="combobox"){const multiple=!!def.multiple,pending=this.debounceControllers.get(def.filterId)?.pendingValue,effectiveValue=pending!==void 0?pending:value,comboValue=multiple?Array.isArray(effectiveValue)?effectiveValue:[]:typeof effectiveValue=="string"?effectiveValue:
|
|
46
|
+
>${custom.render(context)}</div>`}if(def.type==="checkbox-menu")return this.renderCheckboxMenu(def,value,errorText);const routing=this.labelRouting(def);if(def.type==="combobox"){const multiple=!!def.multiple,pending=this.debounceControllers.get(def.filterId)?.pendingValue,effectiveValue=pending!==void 0?pending:value,comboValue=multiple?Array.isArray(effectiveValue)?effectiveValue:[]:typeof effectiveValue=="string"?effectiveValue:void 0;return html`<lr-combobox
|
|
44
47
|
part="filter-control"
|
|
45
48
|
exportparts=${COMBOBOX_EXPORT_PARTS}
|
|
46
49
|
data-filter-id=${def.filterId}
|
|
@@ -111,7 +114,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
111
114
|
?clearable=${!!def.clearable}
|
|
112
115
|
.size=${def.size??"m"}
|
|
113
116
|
.errorText=${errorText}
|
|
114
|
-
.value=${typeof value=="string"?value:
|
|
117
|
+
.value=${typeof value=="string"?value:void 0}
|
|
115
118
|
?disabled=${this.disabled}
|
|
116
119
|
@change=${onChange}
|
|
117
120
|
@lr-activate=${this.stopControlAlias}
|
|
@@ -122,7 +125,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
122
125
|
>`}rendersValidationError(def){return!!def.required&&this.touchedFilters.has(def.filterId)&&this.isEmpty(def,this.valueFor(def))}render(){const accessibleLabel=this.hasAttribute("aria-label")?this.getAttribute("aria-label"):this.label||nothing,active=this.activeEntries;return html`
|
|
123
126
|
<div part="base" role="group" aria-label=${accessibleLabel}>
|
|
124
127
|
<div part="controls">
|
|
125
|
-
${this._filters.map(def=>html`<div part=${fieldPartNames(def.filterId)}>
|
|
128
|
+
${this._filters.filter(def=>def.type!=="chip").map(def=>html`<div part=${fieldPartNames(def.filterId)}>
|
|
126
129
|
${this.renderControl(def)}
|
|
127
130
|
<span
|
|
128
131
|
class="validation-spacer"
|
|
@@ -162,4 +165,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
162
165
|
</lr-chip-group>
|
|
163
166
|
</div>`:nothing}
|
|
164
167
|
</div>
|
|
165
|
-
`}}__decorate([property()],LyraFilterBar.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraFilterBar.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraFilterBar.prototype,"loading",void 0),__decorate([state()],LyraFilterBar.prototype,"touchedFilters",void 0);export{LyraFilterBar};
|
|
168
|
+
`}}__decorate([property()],LyraFilterBar.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraFilterBar.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraFilterBar.prototype,"loading",void 0),__decorate([property({reflect:!0,attribute:"active-filters-display"})],LyraFilterBar.prototype,"activeFiltersDisplay",void 0),__decorate([state()],LyraFilterBar.prototype,"touchedFilters",void 0);export{LyraFilterBar};
|
|
@@ -228,7 +228,7 @@ download?:string;
|
|
|
228
228
|
private get resolvedRel();
|
|
229
229
|
/** Resolved, safety-checked `href` for the rendered anchor, or `undefined` when `href` is unset
|
|
230
230
|
* or fails the allowlist for its sink (`download` present narrows to `safeDownloadHref`). */
|
|
231
|
-
private get resolvedHref();private hasIconSlot;private hasDetailsSlot;private hasSuffixSlot;private submenuAssigned;private submenuExpanded;private submenuKind;private slottedLabel;private submenuPanel;private submenuPanelAttached;
|
|
231
|
+
private get resolvedHref();private hasIconSlot;private hasDetailsSlot;private hasSuffixSlot;private detailsSlot?;private submenuAssigned;private submenuExpanded;private submenuKind;private slottedLabel;private submenuPanel;private submenuPanelAttached;
|
|
232
232
|
/** Increments whenever the owned submenu identity becomes stale, so async show/hide continuations
|
|
233
233
|
* cannot write disclosure state or popup ownership back onto a replacement panel. */
|
|
234
234
|
private submenuPanelGeneration;
|
|
@@ -275,9 +275,9 @@ select():void;
|
|
|
275
275
|
openSubmenu(focus?:MenuFocusTarget):Promise<void>;
|
|
276
276
|
/** Closes this item's submenu (and, through it, any of its own descendants). A no-op without
|
|
277
277
|
* one. Focus is left alone — the caller that moved it knows where it belongs. */
|
|
278
|
-
closeSubmenu():Promise<void>;private onIconSlotChange;private onDetailsSlotChange;private onSuffixSlotChange;private defaultLabelSlot;private isDefaultLabelBranch;private labelForwardingSlots;private composedParentForNode;private isLabelSubtreeExcluded;private readSlottedLabel;private observeLabelAncestors;private observeLabelContent;private syncSlottedLabel;private onLabelSlotChange;private onForwardedLabelSlotChange;private onSubmenuSlotChange;private syncSubmenuSlot;private connectSubmenuPanel;
|
|
278
|
+
closeSubmenu():Promise<void>;private onIconSlotChange;private onDetailsSlotChange;private syncDetailsSlot;private onSuffixSlotChange;private defaultLabelSlot;private isDefaultLabelBranch;private labelForwardingSlots;private composedParentForNode;private isLabelSubtreeExcluded;private readSlottedLabel;private observeLabelAncestors;private observeLabelContent;private syncSlottedLabel;private onLabelSlotChange;private onForwardedLabelSlotChange;private onSubmenuSlotChange;private syncSubmenuSlot;private connectSubmenuPanel;
|
|
279
279
|
/** Whether an async submenu operation still owns this item after an awaited panel transition. */
|
|
280
|
-
private isCurrentSubmenuPanel;protected updated(changed:PropertyValues):void;
|
|
280
|
+
private isCurrentSubmenuPanel;protected updated(changed:PropertyValues):void;protected firstUpdated(changed:PropertyValues):void;
|
|
281
281
|
/** The private submenu controller reports every state transition, including Escape, outside
|
|
282
282
|
* dismissal, selection, ancestor teardown, and panel replacement. */
|
|
283
283
|
private onPanelStateChange;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing,svg}from"lit";import{html as staticHtml,unsafeStatic}from"lit/static-html.js";import{property,state}from"lit/decorators.js";import{composedParentElement,isAccessibilitySubtreeExcluded}from"../../../internal/a11y.js";import{composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{LyraElement}from"../../../internal/lyra-element.js";import{chevronIcon,spinnerIcon}from"../../../internal/icons.js";import{tag}from"../../../internal/prefix.js";import{safeDownloadHref,safeLinkHref}from"../../../internal/safe-url.js";import{sizes}from"../../../internal/sizes.styles.js";import{menuItemOwner,submenuPanelController}from"./menu-shared.js";import{styles}from"./menu-item.styles.js";import{activeElementIn}from"../../../internal/active-element.js";const menuTag=unsafeStatic(tag("menu")),GLYPH_VIEW_BOX="0 0 24 24",GLYPH_STROKE_WIDTH="1.75";function checkmarkGlyph(){return svg`
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing,svg}from"lit";import{html as staticHtml,unsafeStatic}from"lit/static-html.js";import{property,query,state}from"lit/decorators.js";import{composedParentElement,isAccessibilitySubtreeExcluded}from"../../../internal/a11y.js";import{composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{LyraElement}from"../../../internal/lyra-element.js";import{chevronIcon,spinnerIcon}from"../../../internal/icons.js";import{tag}from"../../../internal/prefix.js";import{safeDownloadHref,safeLinkHref}from"../../../internal/safe-url.js";import{sizes}from"../../../internal/sizes.styles.js";import{menuItemOwner,submenuPanelController}from"./menu-shared.js";import{styles}from"./menu-item.styles.js";import{activeElementIn}from"../../../internal/active-element.js";const menuTag=unsafeStatic(tag("menu")),GLYPH_VIEW_BOX="0 0 24 24",GLYPH_STROKE_WIDTH="1.75";function checkmarkGlyph(){return svg`
|
|
2
2
|
<svg
|
|
3
3
|
part="checkmark"
|
|
4
4
|
width="1em"
|
|
@@ -12,7 +12,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
12
12
|
aria-hidden="true"
|
|
13
13
|
focusable="false"
|
|
14
14
|
><polyline points="5 12.5 10 17.5 19 6.5"></polyline></svg>
|
|
15
|
-
`}class LyraMenuItem extends LyraElement{constructor(){super(...arguments),this.value="",this.size="m",this.disabled=!1,this.variant="default",this.type="normal",this.checked=!1,this.loading=!1,this.hasIconSlot=!1,this.hasDetailsSlot=!1,this.hasSuffixSlot=!1,this.submenuAssigned=!1,this.submenuExpanded=!1,this.slottedLabel="",this.submenuPanel=null,this.submenuPanelAttached=!1,this.submenuPanelGeneration=0,this.labelObservationGeneration=0,this.announcedNativeState="",this.owningMenu=null,this.ownsAriaLabel=!1,this.ownedAriaLabelValue=null,this.ownsPanelAriaLabel=!1,this.ownedPanelAriaLabelValue=null,this.onNativeStateMutation=()=>{const signature=this.nativeStateSignature();signature!==this.announcedNativeState&&(this.announcedNativeState=signature,this.emitStateChange())},this.onIconSlotChange=()=>{this.hasIconSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="icon"||el.getAttribute("slot")==="prefix")},this.onDetailsSlotChange=e=>{this.hasDetailsSlot=e.target.assignedNodes({flatten:!0}).some(node=>(node.textContent??"").trim()!=="")},this.onSuffixSlotChange=()=>{this.hasSuffixSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="suffix")},this.onLabelSlotChange=event=>{this.observeLabelContent(),this.syncSlottedLabel(event.target)},this.onForwardedLabelSlotChange=event=>{const slot=event.target;this.labelForwardingSlots().includes(slot)&&(this.observeLabelContent(),this.syncSlottedLabel())},this.onSubmenuSlotChange=e=>{this.syncSubmenuSlot(e.target)},this.onPanelStateChange=open=>{this.submenuExpanded=open}}static{this.knownUnobservedAttributes=["submenu-open"]}static{this.styles=[LyraElement.styles,sizes,styles]}get resolvedRel(){const authored=(this.rel??"").split(/\s+/).filter(token=>token&&token!=="opener");if(this.target)for(const guard of["noopener","noreferrer"])authored.includes(guard)||authored.push(guard);return authored.length?authored.join(" "):void 0}get resolvedHref(){return(this.download!==void 0?safeDownloadHref(this.href):safeLinkHref(this.href))??void 0}get isLinkItem(){return this.resolvedHref!==void 0}get hasSubmenu(){return this.submenuAssigned}get submenuOpen(){return this.submenuExpanded}[menuItemOwner](owner,expectedOwner){owner===null&&expectedOwner&&this.owningMenu!==expectedOwner||(this.owningMenu=owner)}set submenuOpen(next){!!next!==this.submenuExpanded&&(next?this.openSubmenu("none"):this.closeSubmenu())}get interactionDisabled(){return this.disabled||this.loading}connectedCallback(){super.connectedCallback();const initialLabel=this.readSlottedLabel(null,!1);initialLabel!==this.slottedLabel&&(this.slottedLabel=initialLabel),this.applyComputedName(),this.tabIndex!==0&&(this.tabIndex=-1),this.announcedNativeState=this.nativeStateSignature();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.nativeStateObserver=new MutationObserverCtor(this.onNativeStateMutation),this.nativeStateObserver.observe(this,{attributes:!0,attributeFilter:["hidden","inert","aria-hidden"]}),this.labelObserver=new MutationObserverCtor(()=>{this.observeLabelContent(),this.syncSlottedLabel()}),this.observeLabelContent()),this.addEventListener("slotchange",this.onForwardedLabelSlotChange);const labelGeneration=++this.labelObservationGeneration;this.updateComplete.then(()=>{if(!this.isConnected||labelGeneration!==this.labelObservationGeneration)return;this.observeLabelContent(),this.syncSlottedLabel();const submenuSlot=this.renderRoot.querySelector('slot[name="submenu"]');submenuSlot&&this.syncSubmenuSlot(submenuSlot)})}disconnectedCallback(){super.disconnectedCallback(),this.submenuPanelGeneration+=1,this.submenuExpanded=!1,this.nativeStateObserver?.disconnect(),this.nativeStateObserver=void 0,this.labelObservationGeneration+=1,this.removeEventListener("slotchange",this.onForwardedLabelSlotChange),this.labelObserver?.disconnect(),this.labelObserver=void 0,this.submenuPanel&&this.submenuPanelAttached&&(this.submenuPanel[submenuPanelController].detach(this),this.submenuPanelAttached=!1)}nativeStateSignature(){return`${this.hidden}|${this.inert}|${this.getAttribute("aria-hidden")}`}emitStateChange(){this.emit("lr-menu-item-state-change",{disabled:this.interactionDisabled,hidden:!!this.hidden,inert:this.inert})}willUpdate(changed){super.willUpdate(changed);const isCheckbox=this.type==="checkbox"&&!this.submenuAssigned,isRadio=this.type==="radio"&&!this.submenuAssigned;this.setAttribute("role",isCheckbox?"menuitemcheckbox":isRadio?"menuitemradio":"menuitem"),isCheckbox||isRadio?this.setAttribute("aria-checked",this.checked?"true":"false"):this.removeAttribute("aria-checked"),this.submenuAssigned?(this.setAttribute("aria-haspopup","menu"),this.setAttribute("aria-expanded",this.submenuExpanded?"true":"false")):(this.removeAttribute("aria-haspopup"),this.removeAttribute("aria-expanded")),this.applyComputedName(),this.toggleAttribute("submenu-open",this.submenuExpanded),this.setAttribute("aria-disabled",String(this.interactionDisabled)),this.interactionDisabled&&(changed.has("disabled")||changed.has("loading"))&&(this.tabIndex=-1,activeElementIn(this.ownerDocument)===this&&this.blur()),(changed.has("disabled")||changed.has("loading"))&&this.emitStateChange()}click(){this.interactionDisabled||this.renderRoot.querySelector('[part~="base"]')?.click()}select(){if(!this.interactionDisabled){if(this.submenuPanel){this.openSubmenu("none");return}if(this.type==="checkbox"){const checked=!this.checked;this.emit("lr-menu-item-change",{value:this.value,checked},{cancelable:!0}).defaultPrevented||(this.checked=checked)}else this.type==="radio"&&!this.checked&&(this.emit("lr-menu-item-change",{value:this.value,checked:!0},{cancelable:!0}).defaultPrevented||(this.checked=!0,this.owningMenu?.uncheckRadioGroup(this,this.group)));this.owningMenu?.activate(this)}}async openSubmenu(focus="first"){const panel=this.submenuPanel,generation=this.submenuPanelGeneration;if(!panel||this.interactionDisabled||!this.isCurrentSubmenuPanel(panel,generation))return;const controller=panel[submenuPanelController],shown=controller.show(focus);this.isCurrentSubmenuPanel(panel,generation)&&(this.submenuExpanded=controller.open,await shown,this.isCurrentSubmenuPanel(panel,generation)&&(panel.updateComplete&&await panel.updateComplete,this.isCurrentSubmenuPanel(panel,generation)&&(this.submenuExpanded=controller.open,await this.updateComplete)))}async closeSubmenu(){const panel=this.submenuPanel,generation=this.submenuPanelGeneration;if(!panel||!this.isCurrentSubmenuPanel(panel,generation))return;const controller=panel[submenuPanelController],hidden=controller.hide();this.isCurrentSubmenuPanel(panel,generation)&&(this.submenuExpanded=controller.open,await hidden,this.isCurrentSubmenuPanel(panel,generation)&&(panel.updateComplete&&await panel.updateComplete,this.isCurrentSubmenuPanel(panel,generation)&&(this.submenuExpanded=controller.open,await this.updateComplete)))}defaultLabelSlot(){return this.renderRoot?.querySelector("slot:not([name])")??null}isDefaultLabelBranch(node){let top=node;for(;top.parentNode&&top.parentNode!==this;)top=top.parentNode;return top.parentNode!==this?!1:top.nodeType!==1||(top.getAttribute("slot")??"")===""}labelForwardingSlots(){return Array.from(this.querySelectorAll("slot")).filter(slot=>this.isDefaultLabelBranch(slot))}composedParentForNode(node){const assignedSlot=node.assignedSlot;if(assignedSlot)return assignedSlot;if(node.parentElement)return node.parentElement;const root=node.getRootNode();return"host"in root&&root.host.nodeType===1?root.host:null}isLabelSubtreeExcluded(element){return!(element.getRootNode()===this.renderRoot&&element.matches('[part~="label"][aria-hidden="true"][inert]:not([hidden])'))&&isAccessibilitySubtreeExcluded(element)}readSlottedLabel(slot=this.defaultLabelSlot(),requireRendered=!0){const nodes=slot?slot.assignedNodes({flatten:!0}):Array.from(this.childNodes).filter(node=>this.isDefaultLabelBranch(node));return composedAccessibilityText(nodes,{ancestorBoundary:this,isSubtreeExcluded:element=>this.isLabelSubtreeExcluded(element),requireRendered,ignoreInheritedVisibility:!0}).replace(/\s+/g," ").trim()}observeLabelAncestors(node,options){const observer=this.labelObserver;if(!observer)return;let current=this.composedParentForNode(node);for(;current;)current!==this&&!this.contains(current)&&observer.observe(current,options),current=composedParentElement(current)}observeLabelContent(){const observer=this.labelObserver;if(!observer)return;observer.disconnect();const options={attributes:!0,attributeFilter:["aria-hidden","aria-label","aria-labelledby","alt","class","data-hidden","hidden","inert","id","label","open","slot","style"],characterData:!0,childList:!0,subtree:!0};observer.observe(this,options);const slot=this.defaultLabelSlot();for(const assigned of slot?.assignedNodes({flatten:!0})??[])this.contains(assigned)||observer.observe(assigned,options),this.observeLabelAncestors(assigned,{attributes:!0,attributeFilter:options.attributeFilter})}syncSlottedLabel(slot=this.defaultLabelSlot()){const next=this.readSlottedLabel(slot);next!==this.slottedLabel&&(this.slottedLabel=next),this.applyComputedName(),this.applyPanelName()}syncSubmenuSlot(submenuSlot){if(!submenuSlot.isConnected||submenuSlot.getRootNode()!==this.renderRoot)return;const assigned=submenuSlot.assignedElements({flatten:!0}),authoredPanel=assigned.find(element=>element.localName===tag("menu")),hasDirectItems=assigned.some(element=>element.localName===tag("menu-item")||element.localName===tag("dropdown-item")),kind=authoredPanel?"panel":hasDirectItems?"items":void 0;if(this.submenuKind=kind,this.submenuAssigned=kind!==void 0,kind==="items"){const generated=this.renderRoot.querySelector("[data-generated-submenu]");generated&&this.connectSubmenuPanel(generated);return}this.connectSubmenuPanel(authoredPanel??null)}connectSubmenuPanel(next){const samePanel=next===this.submenuPanel;if(samePanel&&(next===null||this.submenuPanelAttached))return;const previous=this.submenuPanel;if(++this.submenuPanelGeneration,previous&&this.submenuPanelAttached&&previous[submenuPanelController].detach(this),this.submenuPanelAttached=!1,samePanel||(this.submenuPanel=next,this.ownsPanelAriaLabel=!1,this.ownedPanelAriaLabelValue=null),!this.submenuPanel){this.submenuExpanded=!1;return}const controller=this.submenuPanel[submenuPanelController];controller.attach(this,this.onPanelStateChange),this.submenuPanelAttached=!0,this.submenuExpanded=controller.open,this.applyPanelName()}isCurrentSubmenuPanel(panel,generation){return this.isConnected&&this.submenuPanel===panel&&this.submenuPanelGeneration===generation}updated(changed){if(super.updated(changed),changed.has("submenuKind")&&this.submenuKind==="items"){const generated=this.renderRoot.querySelector("[data-generated-submenu]");this.connectSubmenuPanel(generated)}}applyComputedName(){if(this.ownsAriaLabel&&this.getAttribute("aria-label")!==this.ownedAriaLabelValue&&(this.ownsAriaLabel=!1,this.ownedAriaLabelValue=null),this.hasAttribute("aria-labelledby")){this.ownsAriaLabel&&this.removeAttribute("aria-label"),this.ownsAriaLabel=!1,this.ownedAriaLabelValue=null;return}if(!(this.hasAttribute("aria-label")&&!this.ownsAriaLabel)){if(this.ownsAriaLabel=!0,this.slottedLabel===""){this.ownedAriaLabelValue=null,this.hasAttribute("aria-label")&&this.removeAttribute("aria-label");return}this.ownedAriaLabelValue=this.slottedLabel,this.getAttribute("aria-label")!==this.slottedLabel&&this.setAttribute("aria-label",this.slottedLabel)}}applyPanelName(){const panel=this.submenuPanel;if(panel){if(this.ownsPanelAriaLabel&&panel.getAttribute("aria-label")!==this.ownedPanelAriaLabelValue&&(this.ownsPanelAriaLabel=!1,this.ownedPanelAriaLabelValue=null),panel.hasAttribute("label")){this.ownsPanelAriaLabel&&(panel.removeAttribute("aria-label"),this.ownsPanelAriaLabel=!1,this.ownedPanelAriaLabelValue=null);return}if(!(panel.hasAttribute("aria-label")&&!this.ownsPanelAriaLabel)){if(this.ownsPanelAriaLabel=!0,this.slottedLabel===""){this.ownedPanelAriaLabelValue=null,panel.hasAttribute("aria-label")&&panel.removeAttribute("aria-label");return}this.ownedPanelAriaLabelValue=this.slottedLabel,panel.getAttribute("aria-label")!==this.slottedLabel&&panel.setAttribute("aria-label",this.slottedLabel)}}}getTextLabel(){return this.readSlottedLabel()}render(){const baseContent=html`
|
|
15
|
+
`}class LyraMenuItem extends LyraElement{constructor(){super(...arguments),this.value="",this.size="m",this.disabled=!1,this.variant="default",this.type="normal",this.checked=!1,this.loading=!1,this.hasIconSlot=!1,this.hasDetailsSlot=!1,this.hasSuffixSlot=!1,this.submenuAssigned=!1,this.submenuExpanded=!1,this.slottedLabel="",this.submenuPanel=null,this.submenuPanelAttached=!1,this.submenuPanelGeneration=0,this.labelObservationGeneration=0,this.announcedNativeState="",this.owningMenu=null,this.ownsAriaLabel=!1,this.ownedAriaLabelValue=null,this.ownsPanelAriaLabel=!1,this.ownedPanelAriaLabelValue=null,this.onNativeStateMutation=()=>{const signature=this.nativeStateSignature();signature!==this.announcedNativeState&&(this.announcedNativeState=signature,this.emitStateChange())},this.onIconSlotChange=()=>{this.hasIconSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="icon"||el.getAttribute("slot")==="prefix")},this.onDetailsSlotChange=e=>{this.syncDetailsSlot(e.target)},this.onSuffixSlotChange=()=>{this.hasSuffixSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="suffix")},this.onLabelSlotChange=event=>{this.observeLabelContent(),this.syncSlottedLabel(event.target)},this.onForwardedLabelSlotChange=event=>{const slot=event.target;this.labelForwardingSlots().includes(slot)&&(this.observeLabelContent(),this.syncSlottedLabel())},this.onSubmenuSlotChange=e=>{this.syncSubmenuSlot(e.target)},this.onPanelStateChange=open=>{this.submenuExpanded=open}}static{this.knownUnobservedAttributes=["submenu-open"]}static{this.styles=[LyraElement.styles,sizes,styles]}get resolvedRel(){const authored=(this.rel??"").split(/\s+/).filter(token=>token&&token!=="opener");if(this.target)for(const guard of["noopener","noreferrer"])authored.includes(guard)||authored.push(guard);return authored.length?authored.join(" "):void 0}get resolvedHref(){return(this.download!==void 0?safeDownloadHref(this.href):safeLinkHref(this.href))??void 0}get isLinkItem(){return this.resolvedHref!==void 0}get hasSubmenu(){return this.submenuAssigned}get submenuOpen(){return this.submenuExpanded}[menuItemOwner](owner,expectedOwner){owner===null&&expectedOwner&&this.owningMenu!==expectedOwner||(this.owningMenu=owner)}set submenuOpen(next){!!next!==this.submenuExpanded&&(next?this.openSubmenu("none"):this.closeSubmenu())}get interactionDisabled(){return this.disabled||this.loading}connectedCallback(){super.connectedCallback();const initialLabel=this.readSlottedLabel(null,!1);initialLabel!==this.slottedLabel&&(this.slottedLabel=initialLabel),this.applyComputedName(),this.tabIndex!==0&&(this.tabIndex=-1),this.announcedNativeState=this.nativeStateSignature();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.nativeStateObserver=new MutationObserverCtor(this.onNativeStateMutation),this.nativeStateObserver.observe(this,{attributes:!0,attributeFilter:["hidden","inert","aria-hidden"]}),this.labelObserver=new MutationObserverCtor(()=>{this.observeLabelContent(),this.syncSlottedLabel()}),this.observeLabelContent()),this.addEventListener("slotchange",this.onForwardedLabelSlotChange);const labelGeneration=++this.labelObservationGeneration;this.updateComplete.then(()=>{if(!this.isConnected||labelGeneration!==this.labelObservationGeneration)return;this.observeLabelContent(),this.syncSlottedLabel();const submenuSlot=this.renderRoot.querySelector('slot[name="submenu"]');submenuSlot&&this.syncSubmenuSlot(submenuSlot)})}disconnectedCallback(){super.disconnectedCallback(),this.submenuPanelGeneration+=1,this.submenuExpanded=!1,this.nativeStateObserver?.disconnect(),this.nativeStateObserver=void 0,this.labelObservationGeneration+=1,this.removeEventListener("slotchange",this.onForwardedLabelSlotChange),this.labelObserver?.disconnect(),this.labelObserver=void 0,this.submenuPanel&&this.submenuPanelAttached&&(this.submenuPanel[submenuPanelController].detach(this),this.submenuPanelAttached=!1)}nativeStateSignature(){return`${this.hidden}|${this.inert}|${this.getAttribute("aria-hidden")}`}emitStateChange(){this.emit("lr-menu-item-state-change",{disabled:this.interactionDisabled,hidden:!!this.hidden,inert:this.inert})}willUpdate(changed){super.willUpdate(changed);const isCheckbox=this.type==="checkbox"&&!this.submenuAssigned,isRadio=this.type==="radio"&&!this.submenuAssigned;this.setAttribute("role",isCheckbox?"menuitemcheckbox":isRadio?"menuitemradio":"menuitem"),isCheckbox||isRadio?this.setAttribute("aria-checked",this.checked?"true":"false"):this.removeAttribute("aria-checked"),this.submenuAssigned?(this.setAttribute("aria-haspopup","menu"),this.setAttribute("aria-expanded",this.submenuExpanded?"true":"false")):(this.removeAttribute("aria-haspopup"),this.removeAttribute("aria-expanded")),this.applyComputedName(),this.toggleAttribute("submenu-open",this.submenuExpanded),this.setAttribute("aria-disabled",String(this.interactionDisabled)),this.interactionDisabled&&(changed.has("disabled")||changed.has("loading"))&&(this.tabIndex=-1,activeElementIn(this.ownerDocument)===this&&this.blur()),(changed.has("disabled")||changed.has("loading"))&&this.emitStateChange()}click(){this.interactionDisabled||this.renderRoot.querySelector('[part~="base"]')?.click()}select(){if(!this.interactionDisabled){if(this.submenuPanel){this.openSubmenu("none");return}if(this.type==="checkbox"){const checked=!this.checked;this.emit("lr-menu-item-change",{value:this.value,checked},{cancelable:!0}).defaultPrevented||(this.checked=checked)}else this.type==="radio"&&!this.checked&&(this.emit("lr-menu-item-change",{value:this.value,checked:!0},{cancelable:!0}).defaultPrevented||(this.checked=!0,this.owningMenu?.uncheckRadioGroup(this,this.group)));this.owningMenu?.activate(this)}}async openSubmenu(focus="first"){const panel=this.submenuPanel,generation=this.submenuPanelGeneration;if(!panel||this.interactionDisabled||!this.isCurrentSubmenuPanel(panel,generation))return;const controller=panel[submenuPanelController],shown=controller.show(focus);this.isCurrentSubmenuPanel(panel,generation)&&(this.submenuExpanded=controller.open,await shown,this.isCurrentSubmenuPanel(panel,generation)&&(panel.updateComplete&&await panel.updateComplete,this.isCurrentSubmenuPanel(panel,generation)&&(this.submenuExpanded=controller.open,await this.updateComplete)))}async closeSubmenu(){const panel=this.submenuPanel,generation=this.submenuPanelGeneration;if(!panel||!this.isCurrentSubmenuPanel(panel,generation))return;const controller=panel[submenuPanelController],hidden=controller.hide();this.isCurrentSubmenuPanel(panel,generation)&&(this.submenuExpanded=controller.open,await hidden,this.isCurrentSubmenuPanel(panel,generation)&&(panel.updateComplete&&await panel.updateComplete,this.isCurrentSubmenuPanel(panel,generation)&&(this.submenuExpanded=controller.open,await this.updateComplete)))}syncDetailsSlot(slot){this.hasDetailsSlot=slot.assignedNodes({flatten:!0}).some(node=>(node.textContent??"").trim()!=="")}defaultLabelSlot(){return this.renderRoot?.querySelector("slot:not([name])")??null}isDefaultLabelBranch(node){let top=node;for(;top.parentNode&&top.parentNode!==this;)top=top.parentNode;return top.parentNode!==this?!1:top.nodeType!==1||(top.getAttribute("slot")??"")===""}labelForwardingSlots(){return Array.from(this.querySelectorAll("slot")).filter(slot=>this.isDefaultLabelBranch(slot))}composedParentForNode(node){const assignedSlot=node.assignedSlot;if(assignedSlot)return assignedSlot;if(node.parentElement)return node.parentElement;const root=node.getRootNode();return"host"in root&&root.host.nodeType===1?root.host:null}isLabelSubtreeExcluded(element){return!(element.getRootNode()===this.renderRoot&&element.matches('[part~="label"][aria-hidden="true"][inert]:not([hidden])'))&&isAccessibilitySubtreeExcluded(element)}readSlottedLabel(slot=this.defaultLabelSlot(),requireRendered=!0){const nodes=slot?slot.assignedNodes({flatten:!0}):Array.from(this.childNodes).filter(node=>this.isDefaultLabelBranch(node));return composedAccessibilityText(nodes,{ancestorBoundary:this,isSubtreeExcluded:element=>this.isLabelSubtreeExcluded(element),requireRendered,ignoreInheritedVisibility:!0}).replace(/\s+/g," ").trim()}observeLabelAncestors(node,options){const observer=this.labelObserver;if(!observer)return;let current=this.composedParentForNode(node);for(;current;)current!==this&&!this.contains(current)&&observer.observe(current,options),current=composedParentElement(current)}observeLabelContent(){const observer=this.labelObserver;if(!observer)return;observer.disconnect();const options={attributes:!0,attributeFilter:["aria-hidden","aria-label","aria-labelledby","alt","class","data-hidden","hidden","inert","id","label","open","slot","style"],characterData:!0,childList:!0,subtree:!0};observer.observe(this,options);const slot=this.defaultLabelSlot();for(const assigned of slot?.assignedNodes({flatten:!0})??[])this.contains(assigned)||observer.observe(assigned,options),this.observeLabelAncestors(assigned,{attributes:!0,attributeFilter:options.attributeFilter})}syncSlottedLabel(slot=this.defaultLabelSlot()){const next=this.readSlottedLabel(slot);next!==this.slottedLabel&&(this.slottedLabel=next),this.applyComputedName(),this.applyPanelName()}syncSubmenuSlot(submenuSlot){if(!submenuSlot.isConnected||submenuSlot.getRootNode()!==this.renderRoot)return;const assigned=submenuSlot.assignedElements({flatten:!0}),authoredPanel=assigned.find(element=>element.localName===tag("menu")),hasDirectItems=assigned.some(element=>element.localName===tag("menu-item")||element.localName===tag("dropdown-item")),kind=authoredPanel?"panel":hasDirectItems?"items":void 0;if(this.submenuKind=kind,this.submenuAssigned=kind!==void 0,kind==="items"){const generated=this.renderRoot.querySelector("[data-generated-submenu]");generated&&this.connectSubmenuPanel(generated);return}this.connectSubmenuPanel(authoredPanel??null)}connectSubmenuPanel(next){const samePanel=next===this.submenuPanel;if(samePanel&&(next===null||this.submenuPanelAttached))return;const previous=this.submenuPanel;if(++this.submenuPanelGeneration,previous&&this.submenuPanelAttached&&previous[submenuPanelController].detach(this),this.submenuPanelAttached=!1,samePanel||(this.submenuPanel=next,this.ownsPanelAriaLabel=!1,this.ownedPanelAriaLabelValue=null),!this.submenuPanel){this.submenuExpanded=!1;return}const controller=this.submenuPanel[submenuPanelController];controller.attach(this,this.onPanelStateChange),this.submenuPanelAttached=!0,this.submenuExpanded=controller.open,this.applyPanelName()}isCurrentSubmenuPanel(panel,generation){return this.isConnected&&this.submenuPanel===panel&&this.submenuPanelGeneration===generation}updated(changed){if(super.updated(changed),changed.has("submenuKind")&&this.submenuKind==="items"){const generated=this.renderRoot.querySelector("[data-generated-submenu]");this.connectSubmenuPanel(generated)}}firstUpdated(changed){super.firstUpdated(changed);const detailsSlot=this.detailsSlot;queueMicrotask(()=>{this.onIconSlotChange(),this.onSuffixSlotChange(),collectInitialSlotAssignment(detailsSlot,s=>this.syncDetailsSlot(s))})}applyComputedName(){if(this.ownsAriaLabel&&this.getAttribute("aria-label")!==this.ownedAriaLabelValue&&(this.ownsAriaLabel=!1,this.ownedAriaLabelValue=null),this.hasAttribute("aria-labelledby")){this.ownsAriaLabel&&this.removeAttribute("aria-label"),this.ownsAriaLabel=!1,this.ownedAriaLabelValue=null;return}if(!(this.hasAttribute("aria-label")&&!this.ownsAriaLabel)){if(this.ownsAriaLabel=!0,this.slottedLabel===""){this.ownedAriaLabelValue=null,this.hasAttribute("aria-label")&&this.removeAttribute("aria-label");return}this.ownedAriaLabelValue=this.slottedLabel,this.getAttribute("aria-label")!==this.slottedLabel&&this.setAttribute("aria-label",this.slottedLabel)}}applyPanelName(){const panel=this.submenuPanel;if(panel){if(this.ownsPanelAriaLabel&&panel.getAttribute("aria-label")!==this.ownedPanelAriaLabelValue&&(this.ownsPanelAriaLabel=!1,this.ownedPanelAriaLabelValue=null),panel.hasAttribute("label")){this.ownsPanelAriaLabel&&(panel.removeAttribute("aria-label"),this.ownsPanelAriaLabel=!1,this.ownedPanelAriaLabelValue=null);return}if(!(panel.hasAttribute("aria-label")&&!this.ownsPanelAriaLabel)){if(this.ownsPanelAriaLabel=!0,this.slottedLabel===""){this.ownedPanelAriaLabelValue=null,panel.hasAttribute("aria-label")&&panel.removeAttribute("aria-label");return}this.ownedPanelAriaLabelValue=this.slottedLabel,panel.getAttribute("aria-label")!==this.slottedLabel&&panel.setAttribute("aria-label",this.slottedLabel)}}}getTextLabel(){return this.readSlottedLabel()}render(){const baseContent=html`
|
|
16
16
|
<span part="icon" aria-hidden="true" inert ?hidden=${!this.hasIconSlot}>
|
|
17
17
|
<slot name="icon" @slotchange=${this.onIconSlotChange}></slot>
|
|
18
18
|
<span part="prefix"
|
|
@@ -69,4 +69,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
69
69
|
name="submenu"
|
|
70
70
|
@slotchange=${this.onSubmenuSlotChange}
|
|
71
71
|
></slot>`}
|
|
72
|
-
`}}__decorate([property()],LyraMenuItem.prototype,"value",void 0),__decorate([property({reflect:!0})],LyraMenuItem.prototype,"size",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraMenuItem.prototype,"disabled",void 0),__decorate([property({reflect:!0})],LyraMenuItem.prototype,"variant",void 0),__decorate([property({reflect:!0})],LyraMenuItem.prototype,"type",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraMenuItem.prototype,"checked",void 0),__decorate([property()],LyraMenuItem.prototype,"group",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraMenuItem.prototype,"loading",void 0),__decorate([property({reflect:!0})],LyraMenuItem.prototype,"href",void 0),__decorate([property()],LyraMenuItem.prototype,"target",void 0),__decorate([property()],LyraMenuItem.prototype,"rel",void 0),__decorate([property()],LyraMenuItem.prototype,"download",void 0),__decorate([state()],LyraMenuItem.prototype,"hasIconSlot",void 0),__decorate([state()],LyraMenuItem.prototype,"hasDetailsSlot",void 0),__decorate([state()],LyraMenuItem.prototype,"hasSuffixSlot",void 0),__decorate([state()],LyraMenuItem.prototype,"submenuAssigned",void 0),__decorate([state()],LyraMenuItem.prototype,"submenuExpanded",void 0),__decorate([state()],LyraMenuItem.prototype,"submenuKind",void 0),__decorate([state()],LyraMenuItem.prototype,"slottedLabel",void 0);export{LyraMenuItem};
|
|
72
|
+
`}}__decorate([property()],LyraMenuItem.prototype,"value",void 0),__decorate([property({reflect:!0})],LyraMenuItem.prototype,"size",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraMenuItem.prototype,"disabled",void 0),__decorate([property({reflect:!0})],LyraMenuItem.prototype,"variant",void 0),__decorate([property({reflect:!0})],LyraMenuItem.prototype,"type",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraMenuItem.prototype,"checked",void 0),__decorate([property()],LyraMenuItem.prototype,"group",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraMenuItem.prototype,"loading",void 0),__decorate([property({reflect:!0})],LyraMenuItem.prototype,"href",void 0),__decorate([property()],LyraMenuItem.prototype,"target",void 0),__decorate([property()],LyraMenuItem.prototype,"rel",void 0),__decorate([property()],LyraMenuItem.prototype,"download",void 0),__decorate([state()],LyraMenuItem.prototype,"hasIconSlot",void 0),__decorate([state()],LyraMenuItem.prototype,"hasDetailsSlot",void 0),__decorate([state()],LyraMenuItem.prototype,"hasSuffixSlot",void 0),__decorate([query('slot[name="details"]')],LyraMenuItem.prototype,"detailsSlot",void 0),__decorate([state()],LyraMenuItem.prototype,"submenuAssigned",void 0),__decorate([state()],LyraMenuItem.prototype,"submenuExpanded",void 0),__decorate([state()],LyraMenuItem.prototype,"submenuKind",void 0),__decorate([state()],LyraMenuItem.prototype,"slottedLabel",void 0);export{LyraMenuItem};
|
|
@@ -62,6 +62,10 @@ export interface MenuItemSelectDetail{readonly item:LyraMenuItem;}export interfa
|
|
|
62
62
|
* same two surfaces.
|
|
63
63
|
* @cssprop [--lr-overlay-shadow-anchored=var(--lr-shadow-m)] - Elevation of the anchored submenu
|
|
64
64
|
* surface.
|
|
65
|
+
* @cssprop --lr-positioning-strategy - Cascading `absolute`/`fixed` override for the private
|
|
66
|
+
* submenu surface's `fixed` default, read from computed style when a submenu is (re)positioned.
|
|
67
|
+
* Set it once on `:root`, a theme, or one clipping ancestor to change every unset submenu
|
|
68
|
+
* beneath it; an unrecognized value falls back to `fixed`.
|
|
65
69
|
* @status stable
|
|
66
70
|
* @since 4.0.0
|
|
67
71
|
*/
|
|
@@ -75,7 +79,7 @@ export declare class LyraMenu extends LyraElement<LyraMenuEventMap>{protected st
|
|
|
75
79
|
* matching `lr-select`/`lr-model-select`'s established
|
|
76
80
|
* `this.getAttribute('aria-label') ?? <computed default>` precedence
|
|
77
81
|
* (see `effectiveLabel`). */
|
|
78
|
-
label?:string;get dropdownOpen():boolean;set dropdownOpen(next:boolean);private items;private activeIndex;private cleanup?;private presentationPositioned;private itemStateObserver?;private pointerDocument?;private pendingFocus;private submenuOpenTimer?;private submenuCloseTimer?;private readonly listId;private readonly owningMenu;private typeAheadBuffer;
|
|
82
|
+
label?:string;get dropdownOpen():boolean;set dropdownOpen(next:boolean);private items;private activeIndex;private itemsSlot?;private cleanup?;private presentationPositioned;private itemStateObserver?;private pointerDocument?;private pendingFocus;private submenuOpenTimer?;private submenuCloseTimer?;private readonly listId;private readonly owningMenu;private typeAheadBuffer;
|
|
79
83
|
/** The buffer's reset debounce. Every printable keystroke restarts it; the buffer clears only
|
|
80
84
|
* once the quiet window passes, which is what makes "d" then "e" narrow to "de". Scheduled on
|
|
81
85
|
* -- and cancelled through -- the realm this menu lives in at the time, the same ownership the
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r},_a;import{html}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{deferredPlaceReady as place,waitForDeferredPlacement}from"../../../internal/anchored-overlay-runtime.js";import{DebounceController}from"../../../internal/debounce-controller.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{nextId,resolveAccessibleTrigger}from"../../../internal/a11y.js";import{collectFocusableElements,composedContains}from"../../../internal/overlay-manager.js";import{styles}from"./menu.styles.js";import{menuItemOwner,submenuPanelController}from"./menu-shared.js";import{composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{tag}from"../../../internal/prefix.js";import{activeElementIn}from"../../../internal/active-element.js";import{syncAriaDescribedByElements}from"../../../internal/aria-reflection.js";import"./menu-item.class.js";import{LYRA_DEFAULT_menuLabel}from"../../../internal/default-strings.generated.js";const SUBMENU_PLACEMENT="right-start",SUBMENU_OPEN_DELAY=150,SUBMENU_CLOSE_DELAY=300,TYPE_AHEAD_RESET_MS=500;function isLyraMenuItemElement(value){return isHtmlElement(value)?value.localName===tag("menu-item")||value.localName===tag("dropdown-item"):!1}function isLyraMenuElement(value){return isHtmlElement(value)&&value.localName===tag("menu")}function isUsableActiveElement(value){if(typeof value!="object"&&typeof value!="function"||value===null)return!1;try{const candidate=value;if(candidate.nodeType!==1)return!1;const NodeConstructor=candidate.ownerDocument?.defaultView?.Node??(typeof Node>"u"?void 0:Node);return NodeConstructor?(NodeConstructor.prototype.getRootNode.call(candidate),!0):!1}catch{return!1}}function safeDeepActiveElement(root){const initial=activeElementIn(root);if(!isUsableActiveElement(initial))return null;let active=initial;for(;;){let shadowRoot;try{shadowRoot=active.shadowRoot}catch{return null}if(!shadowRoot)return active;const nested=activeElementIn(shadowRoot);if(nested===null)return active;if(!isUsableActiveElement(nested))return null;active=nested}}let menuWidthScaleRegistered=!1;function registerMenuWidthScale(){if(!menuWidthScaleRegistered&&(menuWidthScaleRegistered=!0,!(typeof CSS>"u"||typeof CSS.registerProperty!="function")))try{CSS.registerProperty({name:"--_lr-menu-max-inline-size",syntax:"<length-percentage>",inherits:!1,initialValue:"100%"})}catch{}}class LyraMenu extends LyraElement{constructor(){super(...arguments),this.presentationOpen=!1,this.submenuAnchor=null,this.submenuStateChange=null,this.dropdownContained=!1,this.dropdownOwner=null,this._dropdownOpen=!1,this.dropdownRendersMenuRole=!1,this.dropdownStayOpenOnSelect=!1,this.items=[],this.activeIndex=-1,this.presentationPositioned=!1,this.pendingFocus="first",this.listId=nextId("menu-list"),this.owningMenu={activate:item=>this.onOwnedItemSelect(item),uncheckRadioGroup:(item,group)=>this.uncheckRadioGroupSiblings(item,group)},this.typeAheadBuffer="",this.typeAheadReset=new DebounceController(TYPE_AHEAD_RESET_MS,()=>{this.typeAheadBuffer=""},()=>this.ownerDocument.defaultView),this[_a]=this.createSubmenuController(),this.onRegionSlotChange=()=>{this.syncRegionState()},this.onDocPointer=e=>{const path=e.composedPath();path.includes(this)||this.submenuAnchor&&path.includes(this.submenuAnchor)||this.closePresentation()},this.onItemsSlotChange=e=>{this.syncItemsFromSlot(e.target)},this.onItemStateChange=event=>{event?.stopPropagation();const navigable=this.items.filter(item=>this.isNavigable(item));if(this.activeIndex>=0&&!this.isNavigable(this.items[this.activeIndex])){const current=this.activeIndex,displaced=this.items[current],focused=safeDeepActiveElement(this.ownerDocument),displacedHadFocus=focused===null||focused===this.ownerDocument.body||focused===displaced||composedContains(displaced,focused),next=navigable.find(item=>this.items.indexOf(item)>current)??navigable.find(item=>this.items.indexOf(item)<current);next?this.setActiveItem(next,displacedHadFocus):(this.activeIndex=-1,this.applyRovingTabIndex(),displacedHadFocus&&this.rehomeZeroSurvivorFocus());return}this.applyRovingTabIndex()},this.onListFocusIn=e=>{const target=e.target;if(!isLyraMenuItemElement(target))return;const index=this.items.indexOf(target);index===-1||index===this.activeIndex||(this.activeIndex=index,this.applyRovingTabIndex(),this.closeSubmenus(target))},this.onListKeyDown=e=>{if(this.isForeignEvent(e))return;const isItemTarget=isLyraMenuItemElement(e.target);if(e.key==="Escape"&&isItemTarget&&!this.hasStandalonePresentation){e.preventDefault(),this.closePresentation({focusTrigger:!0});return}if(!isItemTarget)return;const navigable=this.items.filter(i=>this.isNavigable(i)),current=this.activeIndex>=0?this.items[this.activeIndex]:void 0,currentNavIndex=current?navigable.indexOf(current):-1,intoSubmenuKey=this.effectiveDirection==="rtl"?"ArrowLeft":"ArrowRight";switch(e.key){case"ArrowRight":case"ArrowLeft":e.key===intoSubmenuKey?current?.hasSubmenu&&this.isNavigable(current)&&(e.preventDefault(),this.closeSubmenus(current),current.openSubmenu("first")):this.submenuAnchor&&(e.preventDefault(),this.closePresentation({focusTrigger:!0}));break;case"ArrowDown":if(e.preventDefault(),navigable.length){const next=navigable[(currentNavIndex+1+navigable.length)%navigable.length];next&&this.setActiveItem(next)}break;case"ArrowUp":if(e.preventDefault(),navigable.length){const prevIndex=currentNavIndex<=0?navigable.length-1:currentNavIndex-1,prev=navigable[prevIndex];prev&&this.setActiveItem(prev)}break;case"Home":e.preventDefault(),navigable.length&&this.setActiveItem(navigable[0]);break;case"End":e.preventDefault(),navigable.length&&this.setActiveItem(navigable[navigable.length-1]);break;case"Enter":case" ":e.preventDefault(),current?.hasSubmenu?(this.closeSubmenus(current),current.openSubmenu("first")):current?.isLinkItem?current.click():current?.select();break;default:e.key.length===1&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&this.typeAhead(e.key);return}},this.onPopupPointerOver=e=>{if(!this.interactionOpen)return;const hovered=this.ownItemFromEvent(e);this.clearOwnedTimeout(this.submenuOpenTimer),this.submenuOpenTimer=void 0;const opened=this.openSubmenuItem();opened&&opened===hovered?(this.clearOwnedTimeout(this.submenuCloseTimer),this.submenuCloseTimer=void 0):opened&&this.scheduleSubmenuClose(opened),!(!hovered||hovered===opened||!hovered.hasSubmenu||!this.isNavigable(hovered))&&(this.submenuOpenTimer=this.scheduleOwnedTimeout(()=>{this.submenuOpenTimer=void 0,!(!this.interactionOpen||!this.items.includes(hovered))&&(this.closeSubmenus(hovered),hovered.openSubmenu("none"))},SUBMENU_OPEN_DELAY))},this.onPopupPointerLeave=()=>{this.clearOwnedTimeout(this.submenuOpenTimer),this.submenuOpenTimer=void 0;const opened=this.openSubmenuItem();opened&&this.scheduleSubmenuClose(opened)},this.onNestedSelect=e=>{if(e.target===this)return;const event=e;this.dropdownStayOpenOnSelect&&event.preventDefault(),queueMicrotask(()=>{event.defaultPrevented||this.dismissAfterSelection(!0)})},this.onPopupKeyDown=e=>{const listEl=this.popupPart("list");if(e.key==="Escape"){if(listEl&&e.composedPath().includes(listEl)||this.hasStandalonePresentation)return;e.preventDefault(),this.closePresentation({focusTrigger:!0});return}e.key==="Tab"&&this.tabWouldLeavePopup(e)&&this.closePresentation()}}static{_a=submenuPanelController}static{this.defaultStrings={...super.defaultStrings,menuLabel:LYRA_DEFAULT_menuLabel}}static{this.immutableEventDetails=Object.freeze(["lr-select"])}static{this.identityEventDetailProperties=Object.freeze({"lr-select":Object.freeze(["item"])})}static{this.styles=[LyraElement.styles,styles]}get dropdownOpen(){return this._dropdownOpen}set dropdownOpen(next){const normalized=!!next;if(normalized===this._dropdownOpen)return;const old=this._dropdownOpen;this._dropdownOpen=normalized,this.presentationOpen=normalized,this.requestUpdate("dropdownOpen",old)}createSubmenuController(){const menu=this;return{get open(){return menu.submenuAnchor!==null&&menu.presentationOpen},attach(anchor,onStateChange){menu.submenuAnchor&&menu.submenuAnchor!==anchor&&menu.closePresentation(),menu.submenuAnchor=anchor,menu.submenuStateChange=onStateChange,menu.syncPresentationState(),menu.requestUpdate()},detach(anchor){menu.submenuAnchor===anchor&&(menu.closePresentation(),menu.submenuAnchor=null,menu.submenuStateChange=null,menu.cleanup?.(),menu.cleanup=void 0,menu.syncPresentationState(),menu.requestUpdate())},async show(focus="first"){menu.submenuAnchor&&(menu.openPresentation(focus),await menu.updateComplete,await menu.focusAfterPlacement(focus))},async hide(options){menu.closePresentation(options),await menu.updateComplete}}}connectedCallback(){if(super.connectedCallback(),registerMenuWidthScale(),this.hasUpdated){const slot=this.renderRoot.querySelector("slot:not([name])");slot&&this.syncItemsFromSlot(slot)}}firstUpdated(changed){super.firstUpdated(changed),this.syncRegionState(),this.syncPresentationState()}get hasStandalonePresentation(){return!this.dropdownContained&&!this.submenuAnchor}get interactionOpen(){return this.hasStandalonePresentation||this.presentationOpen}syncPresentationState(){const standalone=this.hasStandalonePresentation;if(this.toggleAttribute("data-inline",standalone),this.toggleAttribute("data-submenu",this.submenuAnchor!==null),this.toggleAttribute("data-contained",this.dropdownContained),standalone){const active=this.activeIndex>=0?this.items[this.activeIndex]:void 0;if(!active||!this.isNavigable(active)){const first=this.items.find(item=>this.isNavigable(item));this.activeIndex=first?this.items.indexOf(first):-1}}else this.presentationOpen||(this.activeIndex=-1);this.applyRovingTabIndex()}syncRegionState(){const assigned=selector=>this.renderRoot.querySelector(selector)?.assignedElements({flatten:!0}).length??0;this.toggleAttribute("data-has-header",assigned('slot[name="header"]')>0),this.toggleAttribute("data-has-footer",assigned('slot[name="footer"]')>0),this.toggleAttribute("data-list-empty",assigned("slot:not([name])")===0)}updated(changed){super.updated(changed);const list=this.renderRoot.querySelector('[part~="list"]')??void 0;syncAriaDescribedByElements(this,list,this.getAttribute("aria-describedby")),(changed.has("presentationOpen")||changed.has("dropdownOpen")||changed.has("dropdownContained"))&&(this.cleanup?.(),this.cleanup=void 0,this.presentationPositioned=!1,this.presentationOpen?this.submenuAnchor?(this.bindDocumentPointer(),this.reposition()):(this.unbindDocumentPointer(),this.presentationPositioned=!0,this.focusRoving(this.pendingFocus)):(this.unbindDocumentPointer(),this.resetTypeAhead(),this.activeIndex=-1,this.applyRovingTabIndex(),this.clearSubmenuTimers(),this.closeSubmenus())),changed.has("dropdownContained")&&this.syncPresentationState(),changed.has("dropdownSize")&&this.applyDropdownSize()}reposition(){this.cleanup?.(),this.cleanup=void 0,this.presentationPositioned=!1;const popup=this.renderRoot.querySelector(".submenu-surface");if(this.submenuAnchor&&popup){const placement=rtlAwarePlacement(SUBMENU_PLACEMENT,this);this.cleanup=place(this.submenuAnchor,popup,{placement})}}async focusAfterPlacement(focus){if(!this.presentationOpen||!this.submenuAnchor)return;const positioned=this.cleanup!==void 0&&(this.presentationPositioned||await waitForDeferredPlacement(()=>this.cleanup));if(!(!this.presentationOpen||!this.submenuAnchor)){if(!positioned){this.closePresentation(),await this.updateComplete;return}this.presentationPositioned=!0,this.focusRoving(focus)}}disconnectedCallback(){super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.presentationPositioned=!1,this.resetTypeAhead(),this.clearSubmenuTimers(),this.itemStateObserver?.disconnect(),this.itemStateObserver=void 0,this.unbindDocumentPointer();for(const item of this.items)this.releaseItemOwner(item);this._dropdownOpen=!1,this.presentationOpen=!1,this.submenuStateChange?.(!1)}bindDocumentPointer(){const owner=this.ownerDocument;this.pointerDocument!==owner&&(this.unbindDocumentPointer(),owner.addEventListener("pointerdown",this.onDocPointer),this.pointerDocument=owner)}unbindDocumentPointer(){this.pointerDocument?.removeEventListener("pointerdown",this.onDocPointer),this.pointerDocument=void 0}scheduleOwnedTimeout(callback,delay){const owner=this.ownerDocument.defaultView;if(owner)return{owner,handle:owner.setTimeout(callback,delay)}}clearOwnedTimeout(timer){timer&&timer.owner.clearTimeout(timer.handle)}focusContained(focus="first"){if(this.dropdownContained&&this.dropdownOwner)if(this.dropdownOwner.open)this.pendingFocus=focus,this.focusRoving(focus);else{const transition=this.dropdownOwner.show();this.dropdownOwner.open&&(this.pendingFocus=focus)}}openPresentation(focus="first"){if(this.dropdownContained&&this.dropdownOwner){this.focusContained(focus);return}this.pendingFocus=focus,this.presentationOpen?(!this.submenuAnchor||this.presentationPositioned)&&this.focusRoving(focus):(this.presentationOpen=!0,this.submenuStateChange?.(!0))}closePresentation(options){if(this.dropdownContained&&this.dropdownOwner){this.dropdownOwner.hide(options);return}this.presentationOpen&&(this.presentationOpen=!1,this.submenuStateChange?.(!1),options?.focusTrigger&&this.submenuAnchor&&resolveAccessibleTrigger(this.submenuAnchor).focus())}syncItemsFromSlot(slot){this.itemStateObserver?.disconnect();const previousItems=this.items,previouslyActive=this.activeIndex>=0?this.items[this.activeIndex]:void 0,focusedBefore=safeDeepActiveElement(this.ownerDocument),activeItemLostFocus=!!previouslyActive&&(focusedBefore===null||focusedBefore===this.ownerDocument.body||focusedBefore===previouslyActive||composedContains(previouslyActive,focusedBefore));this.items=slot.assignedElements({flatten:!0}).filter(isLyraMenuItemElement);for(const item of previousItems)this.items.includes(item)||this.releaseItemOwner(item);for(const item of this.items)this.acquireItemOwner(item);this.applyDropdownSize();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;if(MutationObserverCtor){const owner=this.ownerDocument;let observer;observer=new MutationObserverCtor(()=>{this.itemStateObserver!==observer||this.ownerDocument!==owner||this.onItemStateChange()}),this.itemStateObserver=observer;for(const item of this.items)this.itemStateObserver.observe(item,{attributes:!0,attributeFilter:["disabled","hidden","aria-hidden","inert"]})}if(this.activeIndex=previouslyActive?this.items.indexOf(previouslyActive):-1,this.syncPresentationState(),this.syncRegionState(),this.interactionOpen)if(this.activeIndex===-1){const successor=this.items.find(item=>this.isNavigable(item));previouslyActive&&successor?this.setActiveItem(successor,activeItemLostFocus):this.focusRoving(this.pendingFocus),activeItemLostFocus&&!this.items.some(item=>this.isNavigable(item))&&this.rehomeZeroSurvivorFocus()}else{const active=activeElementIn(this.ownerDocument);!(isUsableActiveElement(active)&&this.contains(active))&&activeItemLostFocus&&this.items[this.activeIndex].focus()}}acquireItemOwner(item){item[menuItemOwner]?.(this.owningMenu)}releaseItemOwner(item){item[menuItemOwner]?.(null,this.owningMenu)}uncheckRadioGroupSiblings(item,group){for(const sibling of this.items)sibling!==item&&sibling.type==="radio"&&sibling.group===group&&sibling.checked&&(sibling.checked=!1)}isNavigable(item){return!item.interactionDisabled&&!item.hidden&&item.getAttribute("aria-hidden")!=="true"&&!item.inert&&!item.closest("[inert]")}applyDropdownSize(){if(this.dropdownSize)for(const item of this.items)item.size=this.dropdownSize}rehomeZeroSurvivorFocus(){if(this.dropdownContained&&this.dropdownOwner){this.dropdownOwner.hide({focusTrigger:!0});return}if(this.submenuAnchor){this.closePresentation({focusTrigger:!0});return}const list=this.renderRoot.querySelector('[part~="list"]');list&&(list.tabIndex=-1,list.focus({preventScroll:!0}))}onOwnedItemSelect(item){if(!isLyraMenuItemElement(item)||!this.items.includes(item))return;!this.emit("lr-select",{item},{cancelable:!0}).defaultPrevented&&!this.dropdownStayOpenOnSelect&&this.dismissAfterSelection(!0)}dismissAfterSelection(focusTrigger){this.closeSubmenus(),this.dropdownContained?this.dropdownOwner&&this.dropdownOwner.hide({focusTrigger}):this.submenuAnchor&&this.closePresentation({focusTrigger})}applyRovingTabIndex(){this.items.forEach((item,i)=>{item.tabIndex=i===this.activeIndex?0:-1})}focusRoving(which){if(which==="none")return;const navigable=this.items.filter(i=>this.isNavigable(i));if(!navigable.length)return;const item=which==="first"?navigable[0]:navigable[navigable.length-1];item&&this.setActiveItem(item)}setActiveItem(item,moveFocus=!0){this.activeIndex=this.items.indexOf(item),this.applyRovingTabIndex(),this.closeSubmenus(item),moveFocus&&item.focus()}closeSubmenus(keep){for(const item of this.items)item!==keep&&item.submenuOpen&&item.closeSubmenu()}openSubmenuItem(){return this.items.find(item=>item.submenuOpen)}clearSubmenuTimers(){this.clearOwnedTimeout(this.submenuOpenTimer),this.clearOwnedTimeout(this.submenuCloseTimer),this.submenuOpenTimer=void 0,this.submenuCloseTimer=void 0}ownItemFromEvent(e){let owner;for(const node of e.composedPath()){if(node===this)break;isLyraMenuItemElement(node)&&(owner=node)}return owner}isForeignEvent(e){for(const node of e.composedPath()){if(node===this)return!1;if(isLyraMenuElement(node))return!0}return!1}scheduleSubmenuClose(item){this.submenuCloseTimer||(this.submenuCloseTimer=this.scheduleOwnedTimeout(()=>{this.submenuCloseTimer=void 0,item.submenuOpen&&(composedContains(item,safeDeepActiveElement(this.ownerDocument))||item.closeSubmenu())},SUBMENU_CLOSE_DELAY))}popupPart(name){return this.renderRoot.querySelector(`[part="${name}"]`)}tabWouldLeavePopup(e){const header=this.popupPart("header"),footer=this.popupPart("footer"),listEl=this.popupPart("list"),backwards=e.shiftKey,active=safeDeepActiveElement(this.ownerDocument),headerStops=header?collectFocusableElements(header):[],footerStops=footer?collectFocusableElements(footer):[],listStops=listEl?collectFocusableElements(listEl):[],hasNeighbor=stops=>{const index=active?stops.indexOf(active):-1;return index===-1?!1:backwards?index>0:index<stops.length-1},path=e.composedPath();return footer&&path.includes(footer)?hasNeighbor(footerStops)?!1:backwards?listStops.length===0&&headerStops.length===0:!0:header&&path.includes(header)?hasNeighbor(headerStops)?!1:backwards?!0:listStops.length===0&&footerStops.length===0:!isLyraMenuItemElement(e.target)&&hasNeighbor(listStops)?!1:backwards?headerStops.length===0:footerStops.length===0}typeAhead(char){this.typeAheadReset.cancel(),this.typeAheadBuffer+=char.toLocaleLowerCase(this.effectiveLocale),this.ownerDocument.defaultView&&this.typeAheadReset.push(void 0);const navigable=this.items.filter(i=>this.isNavigable(i));if(!navigable.length)return;const current=this.activeIndex>=0?this.items[this.activeIndex]:void 0,currentIndex=current?navigable.indexOf(current):-1,n=navigable.length;for(let step=1;step<=n;step++){const candidate=navigable[(currentIndex+step+n)%n];if(candidate&&this.itemText(candidate).toLocaleLowerCase(this.effectiveLocale).startsWith(this.typeAheadBuffer)){this.setActiveItem(candidate);return}}}resetTypeAhead(){this.typeAheadReset.cancel(),this.typeAheadBuffer=""}itemText(item){return composedAccessibilityText(item).trim()}get effectiveLabel(){const hostLabel=this.getAttribute("aria-label");return hostLabel!==null?hostLabel:this.label!==void 0?this.label:this.dropdownLabel!==void 0?this.dropdownLabel:this.localize("menuLabel")}renderContents(){return html`
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r},_a;import{html}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{deferredPlaceReady as place,waitForDeferredPlacement}from"../../../internal/anchored-overlay-runtime.js";import{DebounceController}from"../../../internal/debounce-controller.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{nextId,resolveAccessibleTrigger}from"../../../internal/a11y.js";import{collectFocusableElements,composedContains}from"../../../internal/overlay-manager.js";import{styles}from"./menu.styles.js";import{menuItemOwner,submenuPanelController}from"./menu-shared.js";import{composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{tag}from"../../../internal/prefix.js";import{activeElementIn}from"../../../internal/active-element.js";import{syncAriaDescribedByElements}from"../../../internal/aria-reflection.js";import"./menu-item.class.js";import{LYRA_DEFAULT_menuLabel}from"../../../internal/default-strings.generated.js";const SUBMENU_PLACEMENT="right-start",SUBMENU_OPEN_DELAY=150,SUBMENU_CLOSE_DELAY=300,TYPE_AHEAD_RESET_MS=500;function isLyraMenuItemElement(value){return isHtmlElement(value)?value.localName===tag("menu-item")||value.localName===tag("dropdown-item"):!1}function isLyraMenuElement(value){return isHtmlElement(value)&&value.localName===tag("menu")}function isUsableActiveElement(value){if(typeof value!="object"&&typeof value!="function"||value===null)return!1;try{const candidate=value;if(candidate.nodeType!==1)return!1;const NodeConstructor=candidate.ownerDocument?.defaultView?.Node??(typeof Node>"u"?void 0:Node);return NodeConstructor?(NodeConstructor.prototype.getRootNode.call(candidate),!0):!1}catch{return!1}}function safeDeepActiveElement(root){const initial=activeElementIn(root);if(!isUsableActiveElement(initial))return null;let active=initial;for(;;){let shadowRoot;try{shadowRoot=active.shadowRoot}catch{return null}if(!shadowRoot)return active;const nested=activeElementIn(shadowRoot);if(nested===null)return active;if(!isUsableActiveElement(nested))return null;active=nested}}let menuWidthScaleRegistered=!1;function registerMenuWidthScale(){if(!menuWidthScaleRegistered&&(menuWidthScaleRegistered=!0,!(typeof CSS>"u"||typeof CSS.registerProperty!="function")))try{CSS.registerProperty({name:"--_lr-menu-max-inline-size",syntax:"<length-percentage>",inherits:!1,initialValue:"100%"})}catch{}}class LyraMenu extends LyraElement{constructor(){super(...arguments),this.presentationOpen=!1,this.submenuAnchor=null,this.submenuStateChange=null,this.dropdownContained=!1,this.dropdownOwner=null,this._dropdownOpen=!1,this.dropdownRendersMenuRole=!1,this.dropdownStayOpenOnSelect=!1,this.items=[],this.activeIndex=-1,this.presentationPositioned=!1,this.pendingFocus="first",this.listId=nextId("menu-list"),this.owningMenu={activate:item=>this.onOwnedItemSelect(item),uncheckRadioGroup:(item,group)=>this.uncheckRadioGroupSiblings(item,group)},this.typeAheadBuffer="",this.typeAheadReset=new DebounceController(TYPE_AHEAD_RESET_MS,()=>{this.typeAheadBuffer=""},()=>this.ownerDocument.defaultView),this[_a]=this.createSubmenuController(),this.onRegionSlotChange=()=>{this.syncRegionState()},this.onDocPointer=e=>{const path=e.composedPath();path.includes(this)||this.submenuAnchor&&path.includes(this.submenuAnchor)||this.closePresentation()},this.onItemsSlotChange=e=>{this.syncItemsFromSlot(e.target)},this.onItemStateChange=event=>{event?.stopPropagation();const navigable=this.items.filter(item=>this.isNavigable(item));if(this.activeIndex>=0&&!this.isNavigable(this.items[this.activeIndex])){const current=this.activeIndex,displaced=this.items[current],focused=safeDeepActiveElement(this.ownerDocument),displacedHadFocus=focused===null||focused===this.ownerDocument.body||focused===displaced||composedContains(displaced,focused),next=navigable.find(item=>this.items.indexOf(item)>current)??navigable.find(item=>this.items.indexOf(item)<current);next?this.setActiveItem(next,displacedHadFocus):(this.activeIndex=-1,this.applyRovingTabIndex(),displacedHadFocus&&this.rehomeZeroSurvivorFocus());return}this.applyRovingTabIndex()},this.onListFocusIn=e=>{const target=e.target;if(!isLyraMenuItemElement(target))return;const index=this.items.indexOf(target);index===-1||index===this.activeIndex||(this.activeIndex=index,this.applyRovingTabIndex(),this.closeSubmenus(target))},this.onListKeyDown=e=>{if(this.isForeignEvent(e))return;const isItemTarget=isLyraMenuItemElement(e.target);if(e.key==="Escape"&&isItemTarget&&!this.hasStandalonePresentation){e.preventDefault(),this.closePresentation({focusTrigger:!0});return}if(!isItemTarget)return;const navigable=this.items.filter(i=>this.isNavigable(i)),current=this.activeIndex>=0?this.items[this.activeIndex]:void 0,currentNavIndex=current?navigable.indexOf(current):-1,intoSubmenuKey=this.effectiveDirection==="rtl"?"ArrowLeft":"ArrowRight";switch(e.key){case"ArrowRight":case"ArrowLeft":e.key===intoSubmenuKey?current?.hasSubmenu&&this.isNavigable(current)&&(e.preventDefault(),this.closeSubmenus(current),current.openSubmenu("first")):this.submenuAnchor&&(e.preventDefault(),this.closePresentation({focusTrigger:!0}));break;case"ArrowDown":if(e.preventDefault(),navigable.length){const next=navigable[(currentNavIndex+1+navigable.length)%navigable.length];next&&this.setActiveItem(next)}break;case"ArrowUp":if(e.preventDefault(),navigable.length){const prevIndex=currentNavIndex<=0?navigable.length-1:currentNavIndex-1,prev=navigable[prevIndex];prev&&this.setActiveItem(prev)}break;case"Home":e.preventDefault(),navigable.length&&this.setActiveItem(navigable[0]);break;case"End":e.preventDefault(),navigable.length&&this.setActiveItem(navigable[navigable.length-1]);break;case"Enter":case" ":e.preventDefault(),current?.hasSubmenu?(this.closeSubmenus(current),current.openSubmenu("first")):current?.isLinkItem?current.click():current?.select();break;default:e.key.length===1&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&this.typeAhead(e.key);return}},this.onPopupPointerOver=e=>{if(!this.interactionOpen)return;const hovered=this.ownItemFromEvent(e);this.clearOwnedTimeout(this.submenuOpenTimer),this.submenuOpenTimer=void 0;const opened=this.openSubmenuItem();opened&&opened===hovered?(this.clearOwnedTimeout(this.submenuCloseTimer),this.submenuCloseTimer=void 0):opened&&this.scheduleSubmenuClose(opened),!(!hovered||hovered===opened||!hovered.hasSubmenu||!this.isNavigable(hovered))&&(this.submenuOpenTimer=this.scheduleOwnedTimeout(()=>{this.submenuOpenTimer=void 0,!(!this.interactionOpen||!this.items.includes(hovered))&&(this.closeSubmenus(hovered),hovered.openSubmenu("none"))},SUBMENU_OPEN_DELAY))},this.onPopupPointerLeave=()=>{this.clearOwnedTimeout(this.submenuOpenTimer),this.submenuOpenTimer=void 0;const opened=this.openSubmenuItem();opened&&this.scheduleSubmenuClose(opened)},this.onNestedSelect=e=>{if(e.target===this)return;const event=e;this.dropdownStayOpenOnSelect&&event.preventDefault(),queueMicrotask(()=>{event.defaultPrevented||this.dismissAfterSelection(!0)})},this.onPopupKeyDown=e=>{const listEl=this.popupPart("list");if(e.key==="Escape"){if(listEl&&e.composedPath().includes(listEl)||this.hasStandalonePresentation)return;e.preventDefault(),this.closePresentation({focusTrigger:!0});return}e.key==="Tab"&&this.tabWouldLeavePopup(e)&&this.closePresentation()}}static{_a=submenuPanelController}static{this.defaultStrings={...super.defaultStrings,menuLabel:LYRA_DEFAULT_menuLabel}}static{this.immutableEventDetails=Object.freeze(["lr-select"])}static{this.identityEventDetailProperties=Object.freeze({"lr-select":Object.freeze(["item"])})}static{this.styles=[LyraElement.styles,styles]}get dropdownOpen(){return this._dropdownOpen}set dropdownOpen(next){const normalized=!!next;if(normalized===this._dropdownOpen)return;const old=this._dropdownOpen;this._dropdownOpen=normalized,this.presentationOpen=normalized,this.requestUpdate("dropdownOpen",old)}createSubmenuController(){const menu=this;return{get open(){return menu.submenuAnchor!==null&&menu.presentationOpen},attach(anchor,onStateChange){menu.submenuAnchor&&menu.submenuAnchor!==anchor&&menu.closePresentation(),menu.submenuAnchor=anchor,menu.submenuStateChange=onStateChange,menu.syncPresentationState(),menu.requestUpdate()},detach(anchor){menu.submenuAnchor===anchor&&(menu.closePresentation(),menu.submenuAnchor=null,menu.submenuStateChange=null,menu.cleanup?.(),menu.cleanup=void 0,menu.syncPresentationState(),menu.requestUpdate())},async show(focus="first"){menu.submenuAnchor&&(menu.openPresentation(focus),await menu.updateComplete,await menu.focusAfterPlacement(focus))},async hide(options){menu.closePresentation(options),await menu.updateComplete}}}connectedCallback(){if(super.connectedCallback(),registerMenuWidthScale(),this.hasUpdated){const slot=this.renderRoot.querySelector("slot:not([name])");slot&&this.syncItemsFromSlot(slot)}}firstUpdated(changed){super.firstUpdated(changed),this.syncRegionState(),this.syncPresentationState();const slot=this.itemsSlot;queueMicrotask(()=>{collectInitialSlotAssignment(slot,s=>this.syncItemsFromSlot(s))})}get hasStandalonePresentation(){return!this.dropdownContained&&!this.submenuAnchor}get interactionOpen(){return this.hasStandalonePresentation||this.presentationOpen}syncPresentationState(){const standalone=this.hasStandalonePresentation;if(this.toggleAttribute("data-inline",standalone),this.toggleAttribute("data-submenu",this.submenuAnchor!==null),this.toggleAttribute("data-contained",this.dropdownContained),standalone){const active=this.activeIndex>=0?this.items[this.activeIndex]:void 0;if(!active||!this.isNavigable(active)){const first=this.items.find(item=>this.isNavigable(item));this.activeIndex=first?this.items.indexOf(first):-1}}else this.presentationOpen||(this.activeIndex=-1);this.applyRovingTabIndex()}syncRegionState(){const assigned=selector=>this.renderRoot.querySelector(selector)?.assignedElements({flatten:!0}).length??0;this.toggleAttribute("data-has-header",assigned('slot[name="header"]')>0),this.toggleAttribute("data-has-footer",assigned('slot[name="footer"]')>0),this.toggleAttribute("data-list-empty",assigned("slot:not([name])")===0)}updated(changed){super.updated(changed);const list=this.renderRoot.querySelector('[part~="list"]')??void 0;syncAriaDescribedByElements(this,list,this.getAttribute("aria-describedby")),(changed.has("presentationOpen")||changed.has("dropdownOpen")||changed.has("dropdownContained"))&&(this.cleanup?.(),this.cleanup=void 0,this.presentationPositioned=!1,this.presentationOpen?this.submenuAnchor?(this.bindDocumentPointer(),this.reposition()):(this.unbindDocumentPointer(),this.presentationPositioned=!0,this.focusRoving(this.pendingFocus)):(this.unbindDocumentPointer(),this.resetTypeAhead(),this.activeIndex=-1,this.applyRovingTabIndex(),this.clearSubmenuTimers(),this.closeSubmenus())),changed.has("dropdownContained")&&this.syncPresentationState(),changed.has("dropdownSize")&&this.applyDropdownSize()}reposition(){this.cleanup?.(),this.cleanup=void 0,this.presentationPositioned=!1;const popup=this.renderRoot.querySelector(".submenu-surface");if(this.submenuAnchor&&popup){const placement=rtlAwarePlacement(SUBMENU_PLACEMENT,this);this.cleanup=place(this.submenuAnchor,popup,{placement,strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")})}}async focusAfterPlacement(focus){if(!this.presentationOpen||!this.submenuAnchor)return;const positioned=this.cleanup!==void 0&&(this.presentationPositioned||await waitForDeferredPlacement(()=>this.cleanup));if(!(!this.presentationOpen||!this.submenuAnchor)){if(!positioned){this.closePresentation(),await this.updateComplete;return}this.presentationPositioned=!0,this.focusRoving(focus)}}disconnectedCallback(){super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.presentationPositioned=!1,this.resetTypeAhead(),this.clearSubmenuTimers(),this.itemStateObserver?.disconnect(),this.itemStateObserver=void 0,this.unbindDocumentPointer();for(const item of this.items)this.releaseItemOwner(item);this._dropdownOpen=!1,this.presentationOpen=!1,this.submenuStateChange?.(!1)}bindDocumentPointer(){const owner=this.ownerDocument;this.pointerDocument!==owner&&(this.unbindDocumentPointer(),owner.addEventListener("pointerdown",this.onDocPointer),this.pointerDocument=owner)}unbindDocumentPointer(){this.pointerDocument?.removeEventListener("pointerdown",this.onDocPointer),this.pointerDocument=void 0}scheduleOwnedTimeout(callback,delay){const owner=this.ownerDocument.defaultView;if(owner)return{owner,handle:owner.setTimeout(callback,delay)}}clearOwnedTimeout(timer){timer&&timer.owner.clearTimeout(timer.handle)}focusContained(focus="first"){if(this.dropdownContained&&this.dropdownOwner)if(this.dropdownOwner.open)this.pendingFocus=focus,this.focusRoving(focus);else{const transition=this.dropdownOwner.show();this.dropdownOwner.open&&(this.pendingFocus=focus)}}openPresentation(focus="first"){if(this.dropdownContained&&this.dropdownOwner){this.focusContained(focus);return}this.pendingFocus=focus,this.presentationOpen?(!this.submenuAnchor||this.presentationPositioned)&&this.focusRoving(focus):(this.presentationOpen=!0,this.submenuStateChange?.(!0))}closePresentation(options){if(this.dropdownContained&&this.dropdownOwner){this.dropdownOwner.hide(options);return}this.presentationOpen&&(this.presentationOpen=!1,this.submenuStateChange?.(!1),options?.focusTrigger&&this.submenuAnchor&&resolveAccessibleTrigger(this.submenuAnchor).focus())}syncItemsFromSlot(slot){const assigned=slot.assignedElements({flatten:!0}).filter(isLyraMenuItemElement);if(assigned.length===this.items.length&&assigned.every((item,index)=>item===this.items[index]))return;this.itemStateObserver?.disconnect();const previousItems=this.items,previouslyActive=this.activeIndex>=0?this.items[this.activeIndex]:void 0,focusedBefore=safeDeepActiveElement(this.ownerDocument),activeItemLostFocus=!!previouslyActive&&(focusedBefore===null||focusedBefore===this.ownerDocument.body||focusedBefore===previouslyActive||composedContains(previouslyActive,focusedBefore));this.items=assigned;for(const item of previousItems)this.items.includes(item)||this.releaseItemOwner(item);for(const item of this.items)this.acquireItemOwner(item);this.applyDropdownSize();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;if(MutationObserverCtor){const owner=this.ownerDocument;let observer;observer=new MutationObserverCtor(()=>{this.itemStateObserver!==observer||this.ownerDocument!==owner||this.onItemStateChange()}),this.itemStateObserver=observer;for(const item of this.items)this.itemStateObserver.observe(item,{attributes:!0,attributeFilter:["disabled","hidden","aria-hidden","inert"]})}if(this.activeIndex=previouslyActive?this.items.indexOf(previouslyActive):-1,this.syncPresentationState(),this.syncRegionState(),this.interactionOpen)if(this.activeIndex===-1){const successor=this.items.find(item=>this.isNavigable(item));previouslyActive&&successor?this.setActiveItem(successor,activeItemLostFocus):this.focusRoving(this.pendingFocus),activeItemLostFocus&&!this.items.some(item=>this.isNavigable(item))&&this.rehomeZeroSurvivorFocus()}else{const active=activeElementIn(this.ownerDocument);!(isUsableActiveElement(active)&&this.contains(active))&&activeItemLostFocus&&this.items[this.activeIndex].focus()}}acquireItemOwner(item){item[menuItemOwner]?.(this.owningMenu)}releaseItemOwner(item){item[menuItemOwner]?.(null,this.owningMenu)}uncheckRadioGroupSiblings(item,group){for(const sibling of this.items)sibling!==item&&sibling.type==="radio"&&sibling.group===group&&sibling.checked&&(sibling.checked=!1)}isNavigable(item){return!item.interactionDisabled&&!item.hidden&&item.getAttribute("aria-hidden")!=="true"&&!item.inert&&!item.closest("[inert]")}applyDropdownSize(){if(this.dropdownSize)for(const item of this.items)item.size=this.dropdownSize}rehomeZeroSurvivorFocus(){if(this.dropdownContained&&this.dropdownOwner){this.dropdownOwner.hide({focusTrigger:!0});return}if(this.submenuAnchor){this.closePresentation({focusTrigger:!0});return}const list=this.renderRoot.querySelector('[part~="list"]');list&&(list.tabIndex=-1,list.focus({preventScroll:!0}))}onOwnedItemSelect(item){if(!isLyraMenuItemElement(item)||!this.items.includes(item))return;!this.emit("lr-select",{item},{cancelable:!0}).defaultPrevented&&!this.dropdownStayOpenOnSelect&&this.dismissAfterSelection(!0)}dismissAfterSelection(focusTrigger){this.closeSubmenus(),this.dropdownContained?this.dropdownOwner&&this.dropdownOwner.hide({focusTrigger}):this.submenuAnchor&&this.closePresentation({focusTrigger})}applyRovingTabIndex(){this.items.forEach((item,i)=>{item.tabIndex=i===this.activeIndex?0:-1})}focusRoving(which){if(which==="none")return;const navigable=this.items.filter(i=>this.isNavigable(i));if(!navigable.length)return;const item=which==="first"?navigable[0]:navigable[navigable.length-1];item&&this.setActiveItem(item)}setActiveItem(item,moveFocus=!0){this.activeIndex=this.items.indexOf(item),this.applyRovingTabIndex(),this.closeSubmenus(item),moveFocus&&item.focus()}closeSubmenus(keep){for(const item of this.items)item!==keep&&item.submenuOpen&&item.closeSubmenu()}openSubmenuItem(){return this.items.find(item=>item.submenuOpen)}clearSubmenuTimers(){this.clearOwnedTimeout(this.submenuOpenTimer),this.clearOwnedTimeout(this.submenuCloseTimer),this.submenuOpenTimer=void 0,this.submenuCloseTimer=void 0}ownItemFromEvent(e){let owner;for(const node of e.composedPath()){if(node===this)break;isLyraMenuItemElement(node)&&(owner=node)}return owner}isForeignEvent(e){for(const node of e.composedPath()){if(node===this)return!1;if(isLyraMenuElement(node))return!0}return!1}scheduleSubmenuClose(item){this.submenuCloseTimer||(this.submenuCloseTimer=this.scheduleOwnedTimeout(()=>{this.submenuCloseTimer=void 0,item.submenuOpen&&(composedContains(item,safeDeepActiveElement(this.ownerDocument))||item.closeSubmenu())},SUBMENU_CLOSE_DELAY))}popupPart(name){return this.renderRoot.querySelector(`[part="${name}"]`)}tabWouldLeavePopup(e){const header=this.popupPart("header"),footer=this.popupPart("footer"),listEl=this.popupPart("list"),backwards=e.shiftKey,active=safeDeepActiveElement(this.ownerDocument),headerStops=header?collectFocusableElements(header):[],footerStops=footer?collectFocusableElements(footer):[],listStops=listEl?collectFocusableElements(listEl):[],hasNeighbor=stops=>{const index=active?stops.indexOf(active):-1;return index===-1?!1:backwards?index>0:index<stops.length-1},path=e.composedPath();return footer&&path.includes(footer)?hasNeighbor(footerStops)?!1:backwards?listStops.length===0&&headerStops.length===0:!0:header&&path.includes(header)?hasNeighbor(headerStops)?!1:backwards?!0:listStops.length===0&&footerStops.length===0:!isLyraMenuItemElement(e.target)&&hasNeighbor(listStops)?!1:backwards?headerStops.length===0:footerStops.length===0}typeAhead(char){this.typeAheadReset.cancel(),this.typeAheadBuffer+=char.toLocaleLowerCase(this.effectiveLocale),this.ownerDocument.defaultView&&this.typeAheadReset.push(void 0);const navigable=this.items.filter(i=>this.isNavigable(i));if(!navigable.length)return;const current=this.activeIndex>=0?this.items[this.activeIndex]:void 0,currentIndex=current?navigable.indexOf(current):-1,n=navigable.length;for(let step=1;step<=n;step++){const candidate=navigable[(currentIndex+step+n)%n];if(candidate&&this.itemText(candidate).toLocaleLowerCase(this.effectiveLocale).startsWith(this.typeAheadBuffer)){this.setActiveItem(candidate);return}}}resetTypeAhead(){this.typeAheadReset.cancel(),this.typeAheadBuffer=""}itemText(item){return composedAccessibilityText(item).trim()}get effectiveLabel(){const hostLabel=this.getAttribute("aria-label");return hostLabel!==null?hostLabel:this.label!==void 0?this.label:this.dropdownLabel!==void 0?this.dropdownLabel:this.localize("menuLabel")}renderContents(){return html`
|
|
2
2
|
<div part="header">
|
|
3
3
|
<slot name="header" @slotchange=${this.onRegionSlotChange}></slot>
|
|
4
4
|
</div>
|
|
@@ -28,4 +28,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
|
|
|
28
28
|
>
|
|
29
29
|
${this.renderContents()}
|
|
30
30
|
</div>
|
|
31
|
-
`:this.renderContents()}}__decorate([state()],LyraMenu.prototype,"presentationOpen",void 0),__decorate([property()],LyraMenu.prototype,"label",void 0),__decorate([property({type:Boolean,attribute:!1})],LyraMenu.prototype,"dropdownContained",void 0),__decorate([property({type:Boolean,attribute:!1})],LyraMenu.prototype,"dropdownOpen",null),__decorate([property({type:Boolean,attribute:!1})],LyraMenu.prototype,"dropdownRendersMenuRole",void 0),__decorate([property({type:Boolean,attribute:!1})],LyraMenu.prototype,"dropdownStayOpenOnSelect",void 0),__decorate([property({attribute:!1})],LyraMenu.prototype,"dropdownSize",void 0),__decorate([property({attribute:!1})],LyraMenu.prototype,"dropdownLabel",void 0);export{LyraMenu};
|
|
31
|
+
`:this.renderContents()}}__decorate([state()],LyraMenu.prototype,"presentationOpen",void 0),__decorate([property()],LyraMenu.prototype,"label",void 0),__decorate([property({type:Boolean,attribute:!1})],LyraMenu.prototype,"dropdownContained",void 0),__decorate([property({type:Boolean,attribute:!1})],LyraMenu.prototype,"dropdownOpen",null),__decorate([property({type:Boolean,attribute:!1})],LyraMenu.prototype,"dropdownRendersMenuRole",void 0),__decorate([property({type:Boolean,attribute:!1})],LyraMenu.prototype,"dropdownStayOpenOnSelect",void 0),__decorate([property({attribute:!1})],LyraMenu.prototype,"dropdownSize",void 0),__decorate([property({attribute:!1})],LyraMenu.prototype,"dropdownLabel",void 0),__decorate([query("slot:not([name])")],LyraMenu.prototype,"itemsSlot",void 0);export{LyraMenu};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";const styles=css`:host{--_lr-reorder-item-move-bg:
|
|
1
|
+
import{css}from"lit";const styles=css`:host{--_lr-reorder-item-move-bg:transparent;--_lr-reorder-item-move-bg-hover:var(--lr-color-brand-quiet);--_lr-reorder-item-move-bg-active:color-mix(in oklab, var(--lr-icon-button-background-hover,var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active));--_lr-reorder-item-move-color:var(--lr-color-text-quiet);--_lr-reorder-item-move-color-hover:var(--lr-color-brand);--_lr-reorder-item-move-color-active:var(--lr-icon-button-color-hover,var(--lr-color-brand));--_lr-reorder-item-move-radius:var(--lr-radius);min-inline-size:0;max-inline-size:100%;display:block}[part=base]{align-items:center;gap:var(--lr-reorder-item-gap,var(--lr-space-xs));min-inline-size:0;max-inline-size:100%;display:flex}[part=move-up-button],[part=move-down-button]{font-size:var(--lr-font-size-m);--_lr-icon-button-background-default:var(--_lr-reorder-item-move-bg);--_lr-icon-button-background-hover-default:var(--lr-reorder-item-move-button-hover-bg,var(--_lr-reorder-item-move-bg-hover));--_lr-icon-button-background-active-default:var(--lr-reorder-item-move-button-active-bg,var(--_lr-reorder-item-move-bg-active));--_lr-icon-button-color-default:var(--_lr-reorder-item-move-color);--_lr-icon-button-color-hover-default:var(--lr-reorder-item-move-button-hover-color,var(--_lr-reorder-item-move-color-hover));--_lr-icon-button-color-active-default:var(--lr-reorder-item-move-button-active-color,var(--_lr-reorder-item-move-color-active));--_lr-icon-button-radius-default:var(--_lr-reorder-item-move-radius);flex:none}[part=move-up-button]{transform:rotate(-90deg)}[part=move-down-button]{transform:rotate(90deg)}[part=move-up-button][disabled],[part=move-down-button][disabled]{--_lr-icon-button-background-hover-default:var(--_lr-reorder-item-move-bg);--_lr-icon-button-background-active-default:var(--_lr-reorder-item-move-bg);--_lr-icon-button-color-hover-default:var(--_lr-reorder-item-move-color);--_lr-icon-button-color-active-default:var(--_lr-reorder-item-move-color)}[part=content]{overflow-wrap:anywhere;flex:auto;min-inline-size:0;max-inline-size:100%}@media (prefers-reduced-motion:reduce){[part=move-up-button],[part=move-down-button]{transition:none!important}}`;export{styles};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{tag}from"../../../internal/prefix.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{releaseReorderOwnerState,reorderIdentityChange,updateReorderOwnerState}from"./reorder-owner.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{styles}from"./reorder-list.styles.js";import{LYRA_DEFAULT_reorderItemMoved,LYRA_DEFAULT_reorderMoveCancelled,LYRA_DEFAULT_reorderMovePending}from"../../../internal/default-strings.generated.js";class LyraReorderList extends LyraElement{constructor(){super(...arguments),this.label="",this.disabled=!1,this.controlled=!1,this.pendingFocusTarget=null,this.focusRestoreGeneration=0,this.stateItems=new Set,this.moveToken=0,this.pendingMove=null,this.pendingReconciliation=null,this.onSlotChange=()=>{this.pendingMove&&this.pendingMove.phase==="held"&&!this.pendingMembershipIsCurrent()&&this.revertPendingMove(),this.pendingReconciliation&&this.tryCompleteControlledReconciliation(),this.syncBoundaryState()},this.onMoveRequest=e=>{const item=e.target?.closest?.(tag("reorder-item"));if(!item||item.parentElement!==this)return;const{direction}=e.detail;e.stopPropagation(),this.moveItem(item,direction)},this.onKeyDown=e=>{if(!(e.ctrlKey||e.metaKey)||e.altKey||e.shiftKey||e.key!=="ArrowUp"&&e.key!=="ArrowDown")return;const path=e.composedPath(),item=path.find(target=>target instanceof Element&&target.localName===tag("reorder-item")&&target.parentElement===this);if(!item)return;const itemIndex=path.indexOf(item);if(path.slice(0,itemIndex).some(target=>{if(!(target instanceof Element)||target.getRootNode()===item.shadowRoot)return!1;const name=target.localName;return name==="a"||name==="button"||name==="input"||name==="select"||name==="textarea"||target.hasAttribute("contenteditable")||name.includes("-")&&target!==item}))return;const items=this.itemElements,fromIndex=items.indexOf(item),toIndex=e.key==="ArrowDown"?fromIndex+1:fromIndex-1;this.disabled||this.pendingMove||this.pendingReconciliation||item.disabled||fromIndex<0||toIndex<0||toIndex>=items.length||(e.preventDefault(),this.moveItem(item,e.key==="ArrowDown"?"down":"up"))}}static{this.defaultStrings={...super.defaultStrings,reorderItemMoved:LYRA_DEFAULT_reorderItemMoved,reorderMoveCancelled:LYRA_DEFAULT_reorderMoveCancelled,reorderMovePending:LYRA_DEFAULT_reorderMovePending}}static{this.styles=[LyraElement.styles,styles]}static{this.immutableEventDetails=Object.freeze(["lr-reorder"])}get directItemElements(){const itemTag=tag("reorder-item");return[...this.children].filter(element=>element.localName===itemTag)}get itemElements(){const seen=new Set;return this.directItemElements.filter(item=>{const value=item.value;return typeof value!="string"||value.trim()===""||seen.has(value)?!1:(seen.add(value),!0)})}syncBoundaryState(){const directItems=this.directItemElements,items=this.itemElements,validItems=new Set(items),heldMove=this.pendingMove?.phase==="held",reconciliation=this.pendingReconciliation,busy=heldMove||reconciliation!==null,nextStateItems=new Set(directItems);for(const item of this.stateItems)nextStateItems.has(item)||releaseReorderOwnerState(item,this);directItems.forEach(item=>{const i=items.indexOf(item);updateReorderOwnerState(item,this,{atStart:i===0,atEnd:i>=0&&i===items.length-1,listDisabled:this.disabled,pending:heldMove&&this.pendingMove?.item===item||reconciliation!==null&&item.value===reconciliation.value,busy,validIdentity:validItems.has(item)})}),this.stateItems=nextStateItems,this.requestUpdate()}tryCompleteControlledReconciliation(){const reconciliation=this.pendingReconciliation;if(!reconciliation)return;const items=this.itemElements,currentValues=items.map(entry=>entry.value);if(!(currentValues.length===reconciliation.expectedValues.length&¤tValues.every((value,index)=>value===reconciliation.expectedValues[index]))){currentValues.includes(reconciliation.value)||(this.pendingReconciliation=null);return}const movedItem=items[reconciliation.toIndex];this.pendingReconciliation=null,movedItem&&this.finishMove(movedItem,reconciliation.direction,reconciliation.toIndex)}[reorderIdentityChange](item){item.parentElement===this&&this.onSlotChange()}refreshItemObserver(){this.itemObserver?.disconnect();const Observer=this.ownerDocument.defaultView?.MutationObserver;!Observer||!this.isConnected||(this.itemObserver=new Observer(()=>this.onSlotChange()),this.itemObserver.observe(this,{attributes:!0,childList:!0,attributeFilter:["disabled","value"]}))}pendingMembershipIsCurrent(){if(!this.pendingMove)return!1;const current=this.itemElements;return!this.disabled&&!this.pendingMove.item.disabled&&!this.pendingMove.target.disabled&¤t.length===this.pendingMove.members.length&¤t.every((item,index)=>item===this.pendingMove.members[index]&&item.value===this.pendingMove.values[index])&¤t[this.pendingMove.toIndex]===this.pendingMove.target}connectedCallback(){super.connectedCallback(),this.refreshItemObserver(),this.syncBoundaryState()}willUpdate(changed){super.willUpdate(changed),changed.has("disabled")&&this.syncBoundaryState(),changed.has("controlled")&&this.pendingReconciliation&&(this.pendingReconciliation=null,this.syncBoundaryState())}disconnectedCallback(){this.itemObserver?.disconnect(),this.itemObserver=void 0,this.pendingFocusTarget=null,this.focusRestoreGeneration+=1,this.pendingMove=null,this.pendingReconciliation=null,this.moveToken+=1;for(const item of this.stateItems)releaseReorderOwnerState(item,this);this.stateItems.clear(),super.disconnectedCallback()}orderValues(items){return Object.freeze(items.map(item=>item.value))}scheduleFocusRestore(){this.scheduleAfterUpdate(()=>{const focusTarget=this.pendingFocusTarget;focusTarget&&this.restoreFocusAfterItemUpdate(focusTarget,this.focusRestoreGeneration)},"reorder-focus")}async restoreFocusAfterItemUpdate(focusTarget,generation){await focusTarget.item.updateComplete,!(!this.isConnected||generation!==this.focusRestoreGeneration||this.pendingFocusTarget!==focusTarget)&&(this.pendingFocusTarget=null,focusTarget.item.focusMoveButton(focusTarget.direction))}applyMove(item,direction,_fromIndex,toIndex){const target=this.itemElements[toIndex];direction==="up"?this.insertBefore(item,target):this.insertBefore(item,target.nextElementSibling),this.finishMove(item,direction,toIndex)}finishMove(item,direction,toIndex){this.syncBoundaryState();const focusDirection=(direction==="up"?item.atStart:item.atEnd)?direction==="up"?"down":"up":direction;this.pendingFocusTarget={item,direction:focusDirection},this.focusRestoreGeneration+=1,this.scheduleFocusRestore();const newItems=this.itemElements,number=getNumberFormat(this.effectiveLocale);this.liveRegion?.announce(this.localize("reorderItemMoved",void 0,{index:number.format(toIndex+1),total:number.format(newItems.length)}),{force:!0})}commitMove(item,direction,fromIndex,toIndex,expectedValues){this.controlled?(this.pendingReconciliation={value:item.value,direction,toIndex,expectedValues},this.syncBoundaryState()):this.applyMove(item,direction,fromIndex,toIndex)}moveItem(item,direction){if(this.disabled||item.disabled||this.pendingMove||this.pendingReconciliation)return;const items=this.itemElements,fromIndex=items.indexOf(item);if(fromIndex<0)return;const toIndex=direction==="up"?fromIndex-1:fromIndex+1;if(toIndex<0||toIndex>=items.length)return;const reordered=items.slice();reordered.splice(fromIndex,1),reordered.splice(toIndex,0,item);const expectedValues=this.orderValues(reordered),transaction={token:++this.moveToken,phase:"dispatching",resolution:null,item,target:items[toIndex],direction,fromIndex,toIndex,members:[...items],values:items.map(member=>member.value),expectedValues};this.pendingMove=transaction;const event=this.emit("lr-reorder",Object.freeze({order:expectedValues,fromIndex,toIndex}),{cancelable:!0});if(!(this.pendingMove!==transaction||transaction.token!==this.moveToken)){if(!this.pendingMembershipIsCurrent()){this.pendingMove=null,this.syncBoundaryState();return}if(event.defaultPrevented){if(transaction.resolution==="revert"){this.pendingMove=null,this.syncBoundaryState();return}if(transaction.resolution==="finalize"){this.pendingMove=null,this.syncBoundaryState(),this.commitMove(item,direction,fromIndex,toIndex,expectedValues);return}this.pendingMove={...transaction,phase:"held"},this.syncBoundaryState(),this.liveRegion?.announce(this.localize("reorderMovePending"),{force:!0});return}this.pendingMove=null,this.syncBoundaryState(),this.commitMove(item,direction,fromIndex,toIndex,expectedValues)}}finalizePendingMove(){if(!this.pendingMove)return;if(this.pendingMove.phase==="dispatching"){this.pendingMove.resolution="finalize";return}if(!this.pendingMembershipIsCurrent()){this.revertPendingMove();return}const{item,direction,fromIndex,toIndex,expectedValues}=this.pendingMove;this.pendingMove=null,this.syncBoundaryState(),this.commitMove(item,direction,fromIndex,toIndex,expectedValues)}revertPendingMove(options){if(!this.pendingMove)return;if(this.pendingMove.phase==="dispatching"){this.pendingMove.resolution="revert";return}const wasHeld=this.pendingMove.phase==="held";this.pendingMove=null,this.syncBoundaryState(),wasHeld&&!(options?.silent??!1)&&this.liveRegion?.announce(this.localize("reorderMoveCancelled"),{force:!0})}render(){return html`
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{tag}from"../../../internal/prefix.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{releaseReorderOwnerState,reorderIdentityChange,updateReorderOwnerState}from"./reorder-owner.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{styles}from"./reorder-list.styles.js";import{LYRA_DEFAULT_reorderItemMoved,LYRA_DEFAULT_reorderMoveCancelled,LYRA_DEFAULT_reorderMovePending}from"../../../internal/default-strings.generated.js";function isRowOwnChrome(node,item){let root=node.getRootNode();for(;root instanceof ShadowRoot;){if(root===item.shadowRoot)return!0;root=root.host.getRootNode()}return!1}function deepActiveElement(doc){let active=doc.activeElement;for(;active?.shadowRoot?.activeElement;)active=active.shadowRoot.activeElement;return active}function composedContains(root,node){let current=node;for(;current;){if(current instanceof Element&&root.contains(current))return!0;current=current instanceof ShadowRoot?current.host:current.parentNode}return!1}class LyraReorderList extends LyraElement{constructor(){super(...arguments),this.label="",this.disabled=!1,this.controlled=!1,this.pendingFocusTarget=null,this.focusRestoreGeneration=0,this.stateItems=new Set,this.moveToken=0,this.pendingMove=null,this.pendingReconciliation=null,this.onSlotChange=()=>{this.pendingMove&&this.pendingMove.phase==="held"&&!this.pendingMembershipIsCurrent()&&this.revertPendingMove(),this.pendingReconciliation&&this.tryCompleteControlledReconciliation(),this.syncBoundaryState()},this.onMoveRequest=e=>{const item=e.target?.closest?.(tag("reorder-item"));if(!item||item.parentElement!==this)return;const{direction}=e.detail;e.stopPropagation(),this.moveItem(item,direction)},this.onKeyDown=e=>{if(!(e.ctrlKey||e.metaKey)||e.altKey||e.shiftKey||e.key!=="ArrowUp"&&e.key!=="ArrowDown")return;const path=e.composedPath(),item=path.find(target=>target instanceof Element&&target.localName===tag("reorder-item")&&target.parentElement===this);if(!item)return;const itemIndex=path.indexOf(item);if(path.slice(0,itemIndex).some(target=>{if(!(target instanceof Element)||isRowOwnChrome(target,item))return!1;const name=target.localName;return name==="a"||name==="button"||name==="input"||name==="select"||name==="textarea"||target.hasAttribute("contenteditable")||name.includes("-")&&target!==item}))return;const items=this.itemElements,fromIndex=items.indexOf(item),toIndex=e.key==="ArrowDown"?fromIndex+1:fromIndex-1;this.disabled||this.pendingMove||this.pendingReconciliation||item.disabled||fromIndex<0||toIndex<0||toIndex>=items.length||(e.preventDefault(),this.moveItem(item,e.key==="ArrowDown"?"down":"up"))}}static{this.defaultStrings={...super.defaultStrings,reorderItemMoved:LYRA_DEFAULT_reorderItemMoved,reorderMoveCancelled:LYRA_DEFAULT_reorderMoveCancelled,reorderMovePending:LYRA_DEFAULT_reorderMovePending}}static{this.styles=[LyraElement.styles,styles]}static{this.immutableEventDetails=Object.freeze(["lr-reorder"])}get directItemElements(){const itemTag=tag("reorder-item");return[...this.children].filter(element=>element.localName===itemTag)}get itemElements(){const seen=new Set;return this.directItemElements.filter(item=>{const value=item.value;return typeof value!="string"||value.trim()===""||seen.has(value)?!1:(seen.add(value),!0)})}syncBoundaryState(){const directItems=this.directItemElements,items=this.itemElements,validItems=new Set(items),heldMove=this.pendingMove?.phase==="held",reconciliation=this.pendingReconciliation,busy=heldMove||reconciliation!==null,nextStateItems=new Set(directItems);for(const item of this.stateItems)nextStateItems.has(item)||releaseReorderOwnerState(item,this);directItems.forEach(item=>{const i=items.indexOf(item);updateReorderOwnerState(item,this,{atStart:i===0,atEnd:i>=0&&i===items.length-1,listDisabled:this.disabled,pending:heldMove&&this.pendingMove?.item===item||reconciliation!==null&&item.value===reconciliation.value,busy,validIdentity:validItems.has(item)})}),this.stateItems=nextStateItems,this.requestUpdate()}tryCompleteControlledReconciliation(){const reconciliation=this.pendingReconciliation;if(!reconciliation)return;const items=this.itemElements,currentValues=items.map(entry=>entry.value);if(!(currentValues.length===reconciliation.expectedValues.length&¤tValues.every((value,index)=>value===reconciliation.expectedValues[index]))){currentValues.includes(reconciliation.value)||(this.pendingReconciliation=null);return}const movedItem=items[reconciliation.toIndex];this.pendingReconciliation=null,movedItem&&this.finishMove(movedItem,reconciliation.direction,reconciliation.toIndex)}[reorderIdentityChange](item){item.parentElement===this&&this.onSlotChange()}refreshItemObserver(){this.itemObserver?.disconnect();const Observer=this.ownerDocument.defaultView?.MutationObserver;!Observer||!this.isConnected||(this.itemObserver=new Observer(()=>this.onSlotChange()),this.itemObserver.observe(this,{attributes:!0,childList:!0,attributeFilter:["disabled","value"]}))}pendingMembershipIsCurrent(){if(!this.pendingMove)return!1;const current=this.itemElements;return!this.disabled&&!this.pendingMove.item.disabled&&!this.pendingMove.target.disabled&¤t.length===this.pendingMove.members.length&¤t.every((item,index)=>item===this.pendingMove.members[index]&&item.value===this.pendingMove.values[index])&¤t[this.pendingMove.toIndex]===this.pendingMove.target}connectedCallback(){super.connectedCallback(),this.refreshItemObserver(),this.syncBoundaryState()}willUpdate(changed){super.willUpdate(changed),changed.has("disabled")&&this.syncBoundaryState(),changed.has("controlled")&&this.pendingReconciliation&&(this.pendingReconciliation=null,this.syncBoundaryState())}disconnectedCallback(){this.itemObserver?.disconnect(),this.itemObserver=void 0,this.pendingFocusTarget=null,this.focusRestoreGeneration+=1,this.pendingMove=null,this.pendingReconciliation=null,this.moveToken+=1;for(const item of this.stateItems)releaseReorderOwnerState(item,this);this.stateItems.clear(),super.disconnectedCallback()}orderValues(items){return Object.freeze(items.map(item=>item.value))}scheduleFocusRestore(){this.scheduleAfterUpdate(()=>{const focusTarget=this.pendingFocusTarget;focusTarget&&this.restoreFocusAfterItemUpdate(focusTarget,this.focusRestoreGeneration)},"reorder-focus")}async restoreFocusAfterItemUpdate(focusTarget,generation){if(await focusTarget.item.updateComplete,!this.isConnected||generation!==this.focusRestoreGeneration||this.pendingFocusTarget!==focusTarget)return;this.pendingFocusTarget=null;const captured=focusTarget.preScheduleFocus;captured!=null&&captured!==this.ownerDocument.body&&captured.isConnected&&!composedContains(this,captured)||focusTarget.item.focusMoveButton(focusTarget.direction)}applyMove(item,direction,_fromIndex,toIndex){const target=this.itemElements[toIndex];direction==="up"?this.insertBefore(item,target):this.insertBefore(item,target.nextElementSibling),this.finishMove(item,direction,toIndex)}finishMove(item,direction,toIndex){this.syncBoundaryState();const focusDirection=(direction==="up"?item.atStart:item.atEnd)?direction==="up"?"down":"up":direction;this.pendingFocusTarget={item,direction:focusDirection,preScheduleFocus:deepActiveElement(this.ownerDocument)},this.focusRestoreGeneration+=1,this.scheduleFocusRestore();const newItems=this.itemElements,number=getNumberFormat(this.effectiveLocale);this.liveRegion?.announce(this.localize("reorderItemMoved",void 0,{index:number.format(toIndex+1),total:number.format(newItems.length)}),{force:!0})}commitMove(item,direction,fromIndex,toIndex,expectedValues){this.controlled?(this.pendingReconciliation={value:item.value,direction,toIndex,expectedValues},this.syncBoundaryState()):this.applyMove(item,direction,fromIndex,toIndex)}moveItem(item,direction){if(this.disabled||item.disabled||this.pendingMove||this.pendingReconciliation)return;const items=this.itemElements,fromIndex=items.indexOf(item);if(fromIndex<0)return;const toIndex=direction==="up"?fromIndex-1:fromIndex+1;if(toIndex<0||toIndex>=items.length)return;const reordered=items.slice();reordered.splice(fromIndex,1),reordered.splice(toIndex,0,item);const expectedValues=this.orderValues(reordered),transaction={token:++this.moveToken,phase:"dispatching",resolution:null,item,target:items[toIndex],direction,fromIndex,toIndex,members:[...items],values:items.map(member=>member.value),expectedValues};this.pendingMove=transaction;const event=this.emit("lr-reorder",Object.freeze({order:expectedValues,fromIndex,toIndex}),{cancelable:!0});if(!(this.pendingMove!==transaction||transaction.token!==this.moveToken)){if(!this.pendingMembershipIsCurrent()){this.pendingMove=null,this.syncBoundaryState();return}if(event.defaultPrevented){if(transaction.resolution==="revert"){this.pendingMove=null,this.syncBoundaryState();return}if(transaction.resolution==="finalize"){this.pendingMove=null,this.syncBoundaryState(),this.commitMove(item,direction,fromIndex,toIndex,expectedValues);return}this.pendingMove={...transaction,phase:"held"},this.syncBoundaryState(),this.liveRegion?.announce(this.localize("reorderMovePending"),{force:!0});return}this.pendingMove=null,this.syncBoundaryState(),this.commitMove(item,direction,fromIndex,toIndex,expectedValues)}}finalizePendingMove(){if(!this.pendingMove)return;if(this.pendingMove.phase==="dispatching"){this.pendingMove.resolution="finalize";return}if(!this.pendingMembershipIsCurrent()){this.revertPendingMove();return}const{item,direction,fromIndex,toIndex,expectedValues}=this.pendingMove;this.pendingMove=null,this.syncBoundaryState(),this.commitMove(item,direction,fromIndex,toIndex,expectedValues)}revertPendingMove(options){if(!this.pendingMove)return;if(this.pendingMove.phase==="dispatching"){this.pendingMove.resolution="revert";return}const wasHeld=this.pendingMove.phase==="held";this.pendingMove=null,this.syncBoundaryState(),wasHeld&&!(options?.silent??!1)&&this.liveRegion?.announce(this.localize("reorderMoveCancelled"),{force:!0})}render(){return html`
|
|
2
2
|
<div
|
|
3
3
|
part="base"
|
|
4
4
|
role="list"
|