@aceshooting/lyra-ui 14.0.0 → 14.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +155 -19
- package/custom-elements.json +1 -1
- package/dist/components/agent-tools/commit-card/commit-card.class.d.ts +3 -1
- package/dist/components/agent-tools/commit-card/commit-card.class.js +2 -2
- package/dist/components/agent-tools/compare-panel/compare-panel.class.d.ts +2 -1
- package/dist/components/agent-tools/compare-panel/compare-panel.styles.js +1 -1
- package/dist/components/agent-tools/prompt-studio/prompt-studio.class.d.ts +6 -2
- package/dist/components/agent-tools/prompt-studio/prompt-studio.class.js +4 -4
- package/dist/components/agent-tools/result-card/result-card.class.d.ts +1 -1
- package/dist/components/agent-tools/result-card/result-card.class.js +1 -1
- package/dist/components/agent-tools/result-card/result-field.class.d.ts +1 -1
- package/dist/components/agent-tools/result-card/result-field.class.js +1 -1
- package/dist/components/agent-tools/stack-trace/stack-trace.class.d.ts +1 -1
- package/dist/components/agent-tools/stack-trace/stack-trace.class.js +1 -1
- package/dist/components/agent-tools/terminal/terminal.class.d.ts +1 -1
- package/dist/components/agent-tools/terminal/terminal.class.js +2 -2
- package/dist/components/agent-tools/tool-call-chip/tool-call-chip.class.d.ts +2 -2
- package/dist/components/agent-tools/tool-call-chip/tool-call-chip.class.js +1 -1
- package/dist/components/agent-tools/tool-param-form/tool-param-form.class.js +1 -1
- package/dist/components/agent-tools/tool-result-dialog/tool-result-dialog.class.js +2 -2
- package/dist/components/agent-tools/tool-select-dialog/tool-select-dialog.class.js +4 -4
- package/dist/components/agent-tools/trace-tree/span.d.ts +3 -1
- package/dist/components/agent-tools/trace-tree/span.js +1 -1
- package/dist/components/charts/chart/box-plot.class.d.ts +2 -0
- package/dist/components/charts/chart/box-plot.class.js +1 -1
- package/dist/components/charts/chart/chart.class.d.ts +6 -1
- package/dist/components/charts/chart/chart.class.js +1 -1
- package/dist/components/charts/chart/lite-chart.class.d.ts +20 -11
- package/dist/components/charts/chart/lite-chart.class.js +10 -8
- package/dist/components/conversation/chat-message/chat-message.class.d.ts +4 -3
- package/dist/components/conversation/code-block/code-block-core.class.d.ts +4 -3
- package/dist/components/conversation/code-block/code-block-core.class.js +1 -1
- package/dist/components/conversation/code-block/code-block-shared.d.ts +3 -3
- package/dist/components/conversation/code-block/code-block-shared.js +2 -2
- package/dist/components/conversation/code-block/code-block.class.d.ts +4 -3
- package/dist/components/conversation/code-block/code-block.class.js +1 -1
- package/dist/components/conversation/code-block/shiki-types.d.ts +2 -0
- package/dist/components/conversation/code-block/shiki-types.js +1 -1
- package/dist/components/conversation/conversation-item/conversation-item.class.js +1 -1
- package/dist/components/conversation/markdown/markdown-base.class.js +1 -1
- package/dist/components/conversation/markdown/markdown-core.class.d.ts +1 -1
- package/dist/components/conversation/markdown/markdown.class.d.ts +1 -1
- package/dist/components/conversation/message-actions/message-actions.class.d.ts +2 -0
- package/dist/components/conversation/message-actions/message-actions.class.js +1 -1
- package/dist/components/conversation/message-feedback/message-feedback.class.d.ts +3 -1
- package/dist/components/conversation/message-feedback/message-feedback.class.js +2 -2
- package/dist/components/conversation/message-parts/message-parts.class.d.ts +3 -0
- package/dist/components/conversation/model-select/model-select.class.js +3 -3
- package/dist/components/conversation/thread-list/thread-list.class.js +1 -1
- package/dist/components/conversation/transcript-feed/transcript-feed.class.d.ts +2 -0
- package/dist/components/conversation/transcript-feed/transcript-feed.class.js +1 -1
- package/dist/components/conversation/typing-indicator/typing-indicator.class.d.ts +2 -1
- package/dist/components/conversation/typing-indicator/typing-indicator.class.js +1 -1
- package/dist/components/conversation/usage-badge/usage-badge-overlay-runtime.d.ts +3 -0
- package/dist/components/conversation/usage-badge/usage-badge-overlay-runtime.js +1 -0
- package/dist/components/conversation/usage-badge/usage-badge.class.d.ts +4 -2
- package/dist/components/conversation/usage-badge/usage-badge.class.js +1 -1
- package/dist/components/conversation/voice-picker/voice-picker.class.js +3 -3
- package/dist/components/conversation/widget-renderer/resolve.d.ts +4 -6
- package/dist/components/conversation/widget-renderer/resolve.js +1 -1
- package/dist/components/data/calendar/calendar.class.d.ts +6 -3
- package/dist/components/data/calendar/calendar.class.js +1 -1
- package/dist/components/data/calendar/calendar.styles.js +1 -1
- package/dist/components/data/condition-builder/condition-builder.class.d.ts +3 -1
- package/dist/components/data/condition-builder/condition-builder.class.js +15 -1
- package/dist/components/data/context-meter/context-meter.class.js +2 -2
- package/dist/components/data/data-grid/data-grid.class.d.ts +6 -2
- package/dist/components/data/data-grid/data-grid.class.js +1 -1
- package/dist/components/data/document-library/document-library.class.d.ts +5 -2
- package/dist/components/data/document-library/document-library.class.js +1 -1
- package/dist/components/data/file-tree/file-tree.class.d.ts +2 -1
- package/dist/components/data/file-tree/file-tree.class.js +1 -1
- package/dist/components/data/flow-canvas/flow-canvas.class.d.ts +5 -2
- 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 +2 -1
- package/dist/components/data/funnel/funnel.class.d.ts +1 -0
- package/dist/components/data/funnel/funnel.class.js +1 -1
- package/dist/components/data/gauge/gauge.class.d.ts +4 -1
- package/dist/components/data/gauge/gauge.class.js +6 -6
- package/dist/components/data/graph-query-builder/graph-query-builder.class.d.ts +5 -2
- package/dist/components/data/graph-query-builder/graph-query-builder.class.js +15 -1
- package/dist/components/data/heatmap/heatmap.class.d.ts +7 -4
- package/dist/components/data/heatmap/heatmap.class.js +1 -1
- package/dist/components/data/sparkline/sparkline.class.d.ts +2 -1
- package/dist/components/data/sparkline/sparkline.class.js +1 -1
- package/dist/components/data/stat/stat.class.d.ts +6 -2
- package/dist/components/data/stat/stat.class.js +1 -1
- package/dist/components/data/table/table.class.d.ts +5 -2
- package/dist/components/data/table/table.class.js +2 -2
- package/dist/components/data/timeline/timeline.class.d.ts +7 -2
- package/dist/components/data/timeline/timeline.class.js +1 -1
- package/dist/components/data/timeline/timeline.styles.js +1 -1
- package/dist/components/data/tree/tree-item.class.d.ts +3 -1
- package/dist/components/data/tree/tree-item.class.js +1 -1
- package/dist/components/data/tree/tree.class.d.ts +4 -1
- package/dist/components/data/tree/tree.class.js +1 -1
- package/dist/components/data/word-cloud/word-cloud-layout.d.ts +2 -1
- package/dist/components/data/word-cloud/word-cloud-layout.js +1 -1
- package/dist/components/data/word-cloud/word-cloud.class.d.ts +2 -1
- package/dist/components/forms/button/button.class.d.ts +5 -3
- package/dist/components/forms/button/button.class.js +1 -1
- package/dist/components/forms/checkbox/checkbox.class.d.ts +3 -0
- package/dist/components/forms/checkbox/checkbox.class.js +1 -1
- package/dist/components/forms/code-editor/code-editor.class.d.ts +11 -3
- package/dist/components/forms/code-editor/code-editor.class.js +6 -7
- package/dist/components/forms/code-editor/code-editor.styles.js +1 -1
- package/dist/components/forms/color-picker/color-picker.class.d.ts +5 -1
- package/dist/components/forms/color-picker/color-picker.class.js +4 -4
- package/dist/components/forms/combobox/combobox.class.d.ts +19 -8
- package/dist/components/forms/combobox/combobox.class.js +3 -3
- package/dist/components/forms/combobox/option.class.d.ts +4 -0
- package/dist/components/forms/combobox/option.class.js +2 -2
- package/dist/components/forms/date-picker/calendar-core.d.ts +1 -1
- package/dist/components/forms/date-picker/calendar-core.js +1 -1
- package/dist/components/forms/date-picker/date-input.class.d.ts +20 -10
- package/dist/components/forms/date-picker/date-input.class.js +4 -4
- package/dist/components/forms/date-picker/date-picker.class.d.ts +24 -13
- package/dist/components/forms/date-picker/date-picker.class.js +7 -7
- package/dist/components/forms/date-picker/date-picker.styles.js +1 -1
- package/dist/components/forms/emoji-picker/emoji-picker.class.d.ts +11 -3
- package/dist/components/forms/emoji-picker/emoji-picker.class.js +3 -3
- package/dist/components/forms/emoji-picker/emoji-types.d.ts +2 -2
- package/dist/components/forms/icon-button/icon-button.class.d.ts +4 -2
- package/dist/components/forms/icon-button/icon-button.class.js +1 -1
- package/dist/components/forms/input/input.class.d.ts +5 -1
- package/dist/components/forms/input/input.class.js +1 -1
- package/dist/components/forms/input/native-time-input.class.d.ts +3 -0
- package/dist/components/forms/input/number-input.class.d.ts +3 -0
- package/dist/components/forms/input/time-input.class.d.ts +3 -0
- package/dist/components/forms/input/time-input.class.js +1 -1
- package/dist/components/forms/locale-picker/locale-picker.class.d.ts +5 -1
- package/dist/components/forms/locale-picker/locale-picker.class.js +2 -2
- package/dist/components/forms/otp-input/otp-input.class.d.ts +5 -1
- package/dist/components/forms/otp-input/otp-input.class.js +1 -1
- package/dist/components/forms/phone-input/phone-input.class.d.ts +21 -8
- package/dist/components/forms/phone-input/phone-input.class.js +1 -1
- package/dist/components/forms/radio/radio-button.class.d.ts +4 -0
- package/dist/components/forms/radio/radio-group.class.d.ts +4 -1
- package/dist/components/forms/radio/radio-group.class.js +1 -1
- package/dist/components/forms/radio/radio.class.d.ts +6 -2
- package/dist/components/forms/radio/radio.class.js +1 -1
- package/dist/components/forms/rubric-form/rubric-form.class.d.ts +7 -1
- package/dist/components/forms/rubric-form/rubric-form.class.js +3 -3
- package/dist/components/forms/select/select.class.d.ts +8 -2
- package/dist/components/forms/select/select.class.js +2 -2
- package/dist/components/forms/slider/slider.class.d.ts +12 -6
- package/dist/components/forms/slider/slider.class.js +2 -2
- package/dist/components/forms/swatch-picker/swatch-picker.class.d.ts +4 -0
- package/dist/components/forms/swatch-picker/swatch-picker.class.js +1 -1
- package/dist/components/forms/switch/switch.class.d.ts +5 -1
- package/dist/components/forms/switch/switch.class.js +1 -1
- package/dist/components/forms/textarea/textarea.class.d.ts +3 -0
- package/dist/components/forms/textarea/textarea.class.js +1 -1
- package/dist/components/forms/time-range/time-range.class.d.ts +3 -0
- package/dist/components/forms/time-range/time-range.class.js +1 -1
- package/dist/components/forms/token-input/token-input.class.d.ts +8 -2
- package/dist/components/forms/token-input/token-input.class.js +2 -2
- package/dist/components/forms/token-input/token-input.styles.js +1 -1
- package/dist/components/layout/app-rail/app-rail.class.d.ts +3 -1
- package/dist/components/layout/app-rail/app-rail.class.js +1 -1
- package/dist/components/layout/carousel/carousel.class.d.ts +3 -2
- package/dist/components/layout/carousel/carousel.class.js +1 -1
- package/dist/components/layout/command-palette/command-palette.class.js +1 -1
- package/dist/components/layout/dashboard-grid/dashboard-grid.class.d.ts +2 -0
- package/dist/components/layout/dashboard-grid/dashboard-grid.class.js +1 -1
- package/dist/components/layout/details/details.class.d.ts +3 -3
- package/dist/components/layout/filter-bar/filter-bar.class.d.ts +3 -1
- package/dist/components/layout/filter-bar/filter-bar.class.js +1 -1
- package/dist/components/layout/menu/menu-label.class.d.ts +3 -3
- package/dist/components/layout/menu/menu.class.d.ts +4 -1
- package/dist/components/layout/menu/menu.class.js +1 -1
- package/dist/components/layout/multi-split/multi-split.class.d.ts +9 -3
- package/dist/components/layout/multi-split/multi-split.class.js +1 -1
- package/dist/components/layout/multi-split/multi-split.styles.js +1 -1
- package/dist/components/layout/reorder-list/reorder-item.class.d.ts +2 -1
- package/dist/components/layout/reorder-list/reorder-item.class.js +1 -1
- package/dist/components/layout/reorder-list/reorder-list.class.js +1 -1
- package/dist/components/layout/reorder-list/reorder-owner.js +1 -1
- package/dist/components/layout/split-panel/split-panel.class.d.ts +2 -1
- package/dist/components/layout/split-panel/split-panel.class.js +1 -1
- package/dist/components/layout/tab-group/tab-group.class.d.ts +3 -1
- package/dist/components/layout/tab-group/tab-group.class.js +1 -1
- package/dist/components/layout/widget/widget.class.d.ts +6 -2
- package/dist/components/layout/widget/widget.class.js +1 -1
- package/dist/components/media/animation/animation.class.d.ts +3 -2
- package/dist/components/media/animation/animation.class.js +1 -1
- package/dist/components/media/attachment-chip/attachment-chip.class.d.ts +4 -3
- package/dist/components/media/attachment-chip/attachment-chip.class.js +1 -1
- package/dist/components/media/av-player/av-metadata.d.ts +3 -2
- package/dist/components/media/av-player/av-player.class.d.ts +4 -3
- package/dist/components/media/av-player/av-player.class.js +3 -3
- package/dist/components/media/av-player/av-player.styles.js +1 -1
- package/dist/components/media/avatar/avatar.class.d.ts +2 -1
- package/dist/components/media/avatar/avatar.class.js +1 -1
- package/dist/components/media/file-input/file-input.class.d.ts +4 -2
- package/dist/components/media/file-input/file-input.class.js +1 -1
- package/dist/components/media/file-input/file-input.styles.js +1 -1
- package/dist/components/media/image-viewer/image-viewer.class.d.ts +2 -1
- package/dist/components/media/image-viewer/image-viewer.class.js +1 -1
- package/dist/components/media/image-viewer/image-viewer.styles.js +1 -1
- package/dist/components/media/map/map.class.d.ts +5 -3
- package/dist/components/media/map/map.class.js +1 -1
- package/dist/components/media/map/map.styles.js +1 -1
- package/dist/components/media/media-card/media-card.class.d.ts +1 -1
- package/dist/components/media/media-card/media-card.class.js +1 -1
- package/dist/components/media/pan-zoom/pan-zoom.class.js +1 -1
- package/dist/components/media/sequence-playback/sequence-playback.class.d.ts +1 -1
- package/dist/components/media/sequence-playback/sequence-playback.styles.js +1 -1
- package/dist/components/media/video/video.class.d.ts +2 -1
- package/dist/components/media/video/video.styles.js +1 -1
- package/dist/components/media/zoomable-frame/zoomable-frame.class.d.ts +3 -2
- package/dist/components/media/zoomable-frame/zoomable-frame.class.js +2 -2
- package/dist/components/overlays/chip/chip-group.class.d.ts +2 -0
- package/dist/components/overlays/chip/chip-group.class.js +1 -1
- package/dist/components/overlays/dialog/dialog.class.d.ts +2 -0
- package/dist/components/overlays/dialog/dialog.class.js +1 -1
- package/dist/components/overlays/empty/empty.class.d.ts +2 -0
- package/dist/components/overlays/empty/empty.class.js +1 -1
- package/dist/components/overlays/kbd/kbd.class.d.ts +2 -0
- package/dist/components/overlays/kbd/kbd.class.js +1 -1
- package/dist/components/overlays/overlay/popover.class.d.ts +3 -1
- package/dist/components/overlays/overlay/popover.class.js +1 -1
- package/dist/components/overlays/overlay/tooltip.class.d.ts +3 -1
- package/dist/components/overlays/overlay/tooltip.class.js +1 -1
- package/dist/components/overlays/rating/rating.class.d.ts +2 -0
- package/dist/components/overlays/rating/rating.class.js +1 -1
- package/dist/components/retrieval/embedding-explorer/embedding-explorer.class.js +2 -2
- package/dist/components/retrieval/entity-card/entity-card.class.d.ts +5 -2
- package/dist/components/retrieval/entity-card/entity-card.class.js +1 -1
- package/dist/components/retrieval/entity-chip/entity-chip.class.d.ts +4 -2
- package/dist/components/retrieval/entity-chip/entity-chip.class.js +1 -1
- package/dist/components/retrieval/graph/graph-canvas.js +1 -1
- package/dist/components/retrieval/graph/graph.class.d.ts +9 -7
- package/dist/components/retrieval/graph/graph.class.js +1 -1
- package/dist/components/retrieval/grounding-summary/grounding-summary.class.d.ts +1 -3
- package/dist/components/retrieval/ingestion-queue/ingestion-queue.class.d.ts +2 -0
- package/dist/components/retrieval/ingestion-queue/ingestion-queue.class.js +1 -1
- package/dist/components/retrieval/knowledge-graph-explorer/knowledge-graph-explorer.class.d.ts +3 -2
- package/dist/components/retrieval/knowledge-graph-explorer/knowledge-graph-explorer.class.js +7 -3
- package/dist/components/retrieval/provenance-panel/provenance-panel.class.d.ts +2 -1
- package/dist/components/retrieval/provenance-panel/provenance-panel.class.js +1 -1
- package/dist/components/retrieval/source-picker/source-picker.class.d.ts +2 -1
- package/dist/components/retrieval/source-picker/source-picker.class.js +1 -1
- package/dist/components/utility/format/format-number.class.d.ts +3 -1
- package/dist/components/utility/format/format-options.js +1 -1
- package/dist/components/utility/json-viewer/json-viewer.class.d.ts +3 -2
- package/dist/components/utility/json-viewer/json-viewer.class.js +2 -2
- package/dist/components/utility/known-date/known-date.class.d.ts +9 -5
- package/dist/components/utility/known-date/known-date.class.js +2 -2
- package/dist/components/utility/known-date/known-date.styles.js +1 -1
- package/dist/components/utility/mention-popover/mention-popover.class.d.ts +3 -1
- package/dist/components/utility/mention-popover/mention-popover.class.js +1 -1
- package/dist/components/utility/poll-status/poll-status.class.d.ts +3 -0
- package/dist/components/utility/poll-status/poll-status.styles.js +1 -1
- package/dist/components/viewers/calendar-viewer/calendar-viewer.class.d.ts +1 -0
- package/dist/components/viewers/calendar-viewer/calendar-viewer.class.js +1 -1
- package/dist/components/viewers/dataset-viewer/dataset-viewer.class.d.ts +2 -1
- package/dist/components/viewers/dataset-viewer/dataset-viewer.styles.js +1 -1
- package/dist/components/viewers/document-preview/document-preview.class.d.ts +4 -2
- package/dist/components/viewers/document-preview/document-preview.class.js +1 -1
- package/dist/components/viewers/document-preview/document-preview.styles.js +1 -1
- package/dist/components/viewers/document-viewer/document-viewer.class.d.ts +3 -2
- package/dist/components/viewers/document-viewer/document-viewer.class.js +2 -2
- package/dist/components/viewers/document-viewer/registry-ownership.d.ts +1 -0
- package/dist/components/viewers/document-viewer/registry-ownership.js +1 -0
- package/dist/components/viewers/document-viewer/registry.js +1 -1
- package/dist/components/viewers/ebook-viewer/ebook-viewer.class.d.ts +7 -1
- package/dist/components/viewers/ebook-viewer/ebook-viewer.class.js +1 -1
- package/dist/components/viewers/email-viewer/email-viewer.class.d.ts +2 -1
- package/dist/components/viewers/email-viewer/email-viewer.class.js +2 -2
- package/dist/components/viewers/include/include-resource.js +1 -1
- package/dist/components/viewers/include/include.class.d.ts +3 -1
- package/dist/components/viewers/notebook-viewer/notebook-viewer.class.d.ts +4 -2
- package/dist/components/viewers/notebook-viewer/notebook-viewer.class.js +4 -4
- package/dist/components/viewers/notebook-viewer/notebook-viewer.styles.js +1 -1
- package/dist/components/viewers/passive-markup.js +1 -1
- package/dist/components/viewers/svg-viewer/svg-viewer.class.d.ts +2 -1
- package/dist/components/viewers/svg-viewer/svg-viewer.styles.js +1 -1
- package/dist/components/viewers/xml-viewer/xml-viewer.class.d.ts +2 -1
- package/dist/components/viewers/xml-viewer/xml-viewer.class.js +1 -1
- package/dist/components/viewers/xml-viewer/xml-viewer.js +1 -1
- package/dist/custom-elements-jsx.d.ts +1 -1
- package/dist/internal/aria-reflection.js +1 -1
- package/dist/internal/catalog-picker.js +1 -1
- package/dist/internal/default-strings.generated.d.ts +1 -1
- package/dist/internal/default-strings.generated.js +1 -1
- package/dist/internal/dev-mode-attribute-warning.d.ts +3 -0
- package/dist/internal/dev-mode-attribute-warning.js +1 -1
- package/dist/internal/form-associated.js +1 -1
- package/dist/internal/localization-types.d.ts +1 -1
- package/dist/internal/localization.js +1 -1
- package/dist/internal/lyra-element.js +1 -1
- package/dist/internal/native-control-description.d.ts +7 -0
- package/dist/internal/native-control-description.js +1 -0
- package/dist/internal/option-selection.js +1 -1
- package/dist/internal/overlay-order.d.ts +6 -0
- package/dist/internal/overlay-order.js +1 -0
- package/dist/internal/overlay-stack.d.ts +1 -1
- package/dist/internal/overlay-stack.js +1 -1
- package/dist/internal/package-metadata.d.ts +1 -1
- package/dist/internal/package-metadata.js +1 -1
- package/dist/internal/positioner.d.ts +5 -4
- package/dist/internal/reactive-property-writes.d.ts +1 -0
- package/dist/internal/reactive-property-writes.js +1 -0
- package/dist/internal/svg-title.d.ts +3 -0
- package/dist/internal/svg-title.js +1 -0
- package/dist/svelte.d.ts +1 -1
- package/dist/translations/ar.js +1 -1
- package/dist/translations/de.js +1 -1
- package/dist/translations/es.js +1 -1
- package/dist/translations/fa.js +1 -1
- package/dist/translations/fr.js +1 -1
- package/dist/translations/he.js +1 -1
- package/dist/translations/ja.js +1 -1
- package/dist/translations/pt-BR.js +1 -1
- package/dist/translations/ru.js +1 -1
- package/dist/translations/zh-CN.js +1 -1
- package/dist/vue.d.ts +1 -1
- package/llms/components/lr-accordion-item.md +4 -0
- package/llms/components/lr-accordion.md +4 -0
- package/llms/components/lr-agent-trace.md +3 -0
- package/llms/components/lr-animation.md +4 -0
- package/llms/components/lr-app-rail-item.md +4 -2
- package/llms/components/lr-app-rail.md +4 -2
- package/llms/components/lr-attachment-chip.md +6 -0
- package/llms/components/lr-av-player.md +14 -0
- package/llms/components/lr-avatar.md +4 -0
- package/llms/components/lr-box-plot.md +6 -0
- package/llms/components/lr-button.md +11 -3
- package/llms/components/lr-calendar-viewer.md +4 -0
- package/llms/components/lr-calendar.md +5 -0
- package/llms/components/lr-carousel.md +5 -0
- package/llms/components/lr-chart.md +13 -4
- package/llms/components/lr-chat-message.md +4 -0
- package/llms/components/lr-checkbox.md +3 -0
- package/llms/components/lr-chip-group.md +3 -0
- package/llms/components/lr-chip.md +3 -0
- package/llms/components/lr-code-block-core.md +16 -4
- package/llms/components/lr-code-block.md +7 -0
- package/llms/components/lr-code-editor.md +18 -5
- package/llms/components/lr-color-picker.md +9 -0
- package/llms/components/lr-combobox.md +35 -4
- package/llms/components/lr-command-palette.md +4 -0
- package/llms/components/lr-commit-card.md +3 -0
- package/llms/components/lr-compare-panel.md +7 -0
- package/llms/components/lr-condition-builder.md +5 -0
- package/llms/components/lr-conversation-item.md +3 -0
- package/llms/components/lr-copy-button.md +6 -0
- package/llms/components/lr-dashboard-grid.md +5 -0
- package/llms/components/lr-data-grid.md +11 -1
- package/llms/components/lr-dataset-viewer.md +3 -2
- package/llms/components/lr-date-input.md +46 -6
- package/llms/components/lr-date-picker.md +46 -6
- package/llms/components/lr-details.md +4 -0
- package/llms/components/lr-dialog.md +4 -0
- package/llms/components/lr-document-library.md +4 -0
- package/llms/components/lr-document-preview.md +7 -1
- package/llms/components/lr-document-viewer.md +9 -3
- package/llms/components/lr-dropdown-item.md +4 -0
- package/llms/components/lr-dropdown.md +3 -0
- package/llms/components/lr-ebook-viewer.md +4 -0
- package/llms/components/lr-email-viewer.md +5 -0
- package/llms/components/lr-emoji-picker.md +17 -3
- package/llms/components/lr-empty.md +3 -0
- package/llms/components/lr-entity-card.md +3 -0
- package/llms/components/lr-entity-chip.md +4 -0
- package/llms/components/lr-file-input.md +7 -0
- package/llms/components/lr-file-tree.md +5 -1
- package/llms/components/lr-filter-bar.md +5 -0
- package/llms/components/lr-flow-canvas.md +8 -1
- package/llms/components/lr-flow-node.md +2 -1
- package/llms/components/lr-flow-run-status.md +1 -1
- package/llms/components/lr-format-number.md +4 -0
- package/llms/components/lr-funnel.md +4 -0
- package/llms/components/lr-gauge.md +4 -0
- package/llms/components/lr-generation-metrics.md +5 -0
- package/llms/components/lr-graph-query-builder.md +6 -0
- package/llms/components/lr-graph.md +8 -2
- package/llms/components/lr-heatmap.md +13 -0
- package/llms/components/lr-icon-button.md +7 -0
- package/llms/components/lr-image-viewer.md +9 -0
- package/llms/components/lr-include.md +5 -0
- package/llms/components/lr-ingestion-queue.md +4 -0
- package/llms/components/lr-input.md +22 -8
- package/llms/components/lr-json-viewer.md +4 -0
- package/llms/components/lr-kbd.md +3 -0
- package/llms/components/lr-knowledge-graph-explorer.md +7 -0
- package/llms/components/lr-known-date.md +7 -0
- package/llms/components/lr-lite-chart.md +21 -4
- package/llms/components/lr-live-region.md +3 -0
- package/llms/components/lr-locale-picker.md +6 -0
- package/llms/components/lr-map.md +8 -0
- package/llms/components/lr-markdown-core.md +4 -0
- package/llms/components/lr-markdown.md +8 -4
- package/llms/components/lr-media-card.md +5 -2
- package/llms/components/lr-mention-popover.md +5 -0
- package/llms/components/lr-menu-item.md +4 -0
- package/llms/components/lr-menu-label.md +4 -3
- package/llms/components/lr-menu.md +4 -0
- package/llms/components/lr-message-actions.md +3 -0
- package/llms/components/lr-message-feedback.md +4 -0
- package/llms/components/lr-message-parts.md +3 -2
- package/llms/components/lr-model-select.md +8 -0
- package/llms/components/lr-multi-split.md +15 -6
- package/llms/components/lr-native-time-input.md +10 -0
- package/llms/components/lr-node-palette.md +3 -0
- package/llms/components/lr-notebook-viewer.md +4 -1
- package/llms/components/lr-number-input.md +12 -1
- package/llms/components/lr-option.md +35 -4
- package/llms/components/lr-otp-input.md +10 -0
- package/llms/components/lr-pan-zoom.md +1 -2
- package/llms/components/lr-phone-input.md +20 -5
- package/llms/components/lr-poll-status.md +4 -0
- package/llms/components/lr-popover.md +3 -0
- package/llms/components/lr-popup.md +3 -2
- package/llms/components/lr-prompt-studio.md +7 -0
- package/llms/components/lr-provenance-panel.md +3 -0
- package/llms/components/lr-push-to-talk.md +3 -0
- package/llms/components/lr-radio-button.md +13 -4
- package/llms/components/lr-radio-group.md +5 -0
- package/llms/components/lr-radio.md +9 -0
- package/llms/components/lr-rating.md +3 -0
- package/llms/components/lr-reorder-item.md +6 -0
- package/llms/components/lr-reorder-list.md +6 -0
- package/llms/components/lr-result-card.md +3 -0
- package/llms/components/lr-result-field.md +3 -0
- package/llms/components/lr-rubric-form.md +12 -0
- package/llms/components/lr-select.md +9 -0
- package/llms/components/lr-sequence-playback.md +4 -0
- package/llms/components/lr-slider.md +16 -4
- package/llms/components/lr-source-picker.md +4 -0
- package/llms/components/lr-span-waterfall.md +3 -0
- package/llms/components/lr-sparkline.md +4 -0
- package/llms/components/lr-split-panel.md +4 -0
- package/llms/components/lr-stack-trace.md +3 -0
- package/llms/components/lr-stat.md +10 -0
- package/llms/components/lr-subagent-panel.md +3 -2
- package/llms/components/lr-svg-viewer.md +3 -0
- package/llms/components/lr-swatch-picker.md +4 -0
- package/llms/components/lr-switch.md +6 -0
- package/llms/components/lr-tab-group.md +4 -0
- package/llms/components/lr-table.md +10 -2
- package/llms/components/lr-terminal.md +3 -0
- package/llms/components/lr-textarea.md +9 -0
- package/llms/components/lr-thread-list.md +6 -3
- package/llms/components/lr-time-input.md +3 -0
- package/llms/components/lr-time-range.md +5 -0
- package/llms/components/lr-timeline-item.md +6 -0
- package/llms/components/lr-timeline.md +6 -0
- package/llms/components/lr-token-input.md +14 -0
- package/llms/components/lr-tool-call-chip.md +5 -3
- package/llms/components/lr-tool-param-form.md +4 -0
- package/llms/components/lr-tool-result-dialog.md +4 -0
- package/llms/components/lr-tool-select-dialog.md +4 -0
- package/llms/components/lr-tooltip.md +6 -0
- package/llms/components/lr-trace-tree.md +3 -0
- package/llms/components/lr-transcript-feed.md +3 -0
- package/llms/components/lr-tree-item.md +12 -5
- package/llms/components/lr-tree.md +12 -5
- package/llms/components/lr-typing-indicator.md +3 -0
- package/llms/components/lr-usage-badge.md +4 -0
- package/llms/components/lr-video.md +8 -2
- package/llms/components/lr-virtual-list.md +5 -3
- package/llms/components/lr-voice-picker.md +8 -0
- package/llms/components/lr-widget-renderer.md +9 -0
- package/llms/components/lr-widget.md +4 -2
- package/llms/components/lr-word-cloud.md +4 -0
- package/llms/components/lr-xml-viewer.md +9 -2
- package/llms/components/lr-zoomable-frame.md +6 -3
- package/llms-full.txt +4080 -2711
- package/package.json +4 -4
- package/vscode-css-data.json +1 -1
- package/vscode-html-data.json +1 -1
- package/web-types.json +1 -1
|
@@ -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{activateOverlay}from"../../../internal/overlay-manager.js";import{isRtl}from"../../../internal/rtl.js";import{finiteRange}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{CollapseBreakpointController,OrientationBreakpointController}from"../../../internal/orientation-breakpoint.js";import{readPersistedState,writePersistedState}from"../../../internal/persisted-state.js";import{resolveCssLength}from"../../../internal/css-length.js";import{styles}from"./multi-split.styles.js";import{LYRA_DEFAULT_resizeDivider,LYRA_DEFAULT_resizeValuePercent}from"../../../internal/default-strings.generated.js";const KEYBOARD_STEP=2;function isPersistedPanelLayout(value){if(typeof value!="object"||value===null)return!1;const candidate=value;return candidate.version!==1||!Array.isArray(candidate.panels)?!1:candidate.panels.every(panel=>{if(typeof panel!="object"||panel===null)return!1;const record=panel;return typeof record.panelId=="string"&&record.panelId!==""&&record.panelId.trim()===record.panelId&&typeof record.size=="number"&&Number.isFinite(record.size)&&record.size>=0})}const NO_MIN_PX=0,NO_MAX_PX=1e6,OWNED_PANEL_STYLE_PROPERTIES=["flex","order","inline-size"];class LyraMultiSplit extends LyraElement{constructor(){super(...arguments),this.toggleProposalDepth=0,this.toggleProposalMutationVersion=0,this.forcedCloseVersion=0,this.sizes=[],this.defaultSizes=[],this.min=10,this.orientation="horizontal",this.orientationBreakpointBasis="container",this.narrowOrientation="vertical",this.panelConstraints=[],this.collapse="none",this.railWidth="3.5rem",this.railBreakpoint=640,this.floatBreakpoint=400,this.collapseBreakpointBasis="container",this.open=!1,this.panelCount=0,this.sizesReconciledForMembership=!1,this._collapseState="wide",this._forced=!1,this.overlayActive=!1,this.justOpened=!1,this.drags=new Map,this.ownedPanels=[],this.panelOwnership=new Map,this.panelOwnershipObserverGeneration=0,this.constraintIssueKey="",this.initializedSizes=!1,this.measuredInlineSize=Number.POSITIVE_INFINITY,this._effectiveOrientation="horizontal",this.collapseObserverGeneration=0,this.orientationBreakpoints=new OrientationBreakpointController(this,()=>this.updateEffectiveOrientation(this.measuredInlineSize,!0)),this.collapseBreakpoints=new CollapseBreakpointController(this,()=>this.updateCollapseState(this.measuredInlineSize,!0)),this.onSlotChange=()=>{this.updateBrowserDerivedState(()=>this.syncPanelMembership())},this.onBackdropClick=()=>{this.overlayHandle?.dismissBackdrop()},this.onModalLayerClick=event=>{event.target===this.baseEl&&this.overlayHandle?.dismissBackdrop()},this.onPointerDown=(e,index)=>{if(e.button!==0||this.isDividerDisabled(index))return;const divider=e.currentTarget,ownerWindow=divider.ownerDocument.defaultView;ownerWindow&&(this.drags.size>0&&this.dragOwnerWindow!==ownerWindow||(this.drags.set(e.pointerId,{index,startPos:this.effectiveOrientation==="vertical"?e.clientY:e.clientX,base:this.baseEl,appliedDelta:0,acceptedResize:!1}),divider.setPointerCapture(e.pointerId),this.drags.size===1&&(this.dragOwnerWindow=ownerWindow,ownerWindow.addEventListener("pointermove",this.onPointerMove),ownerWindow.addEventListener("pointerup",this.onPointerUp),ownerWindow.addEventListener("pointercancel",this.onPointerUp),ownerWindow.addEventListener("lostpointercapture",this.onPointerUp))))},this.onPointerMove=e=>{const drag=this.drags.get(e.pointerId);if(!drag)return;if(this.isDividerDisabled(drag.index)){this.endDragGestures();return}const total=this.effectiveOrientation==="vertical"?drag.base.clientHeight:drag.base.clientWidth;if(!Number.isFinite(total)||total<=0){this.endDragGestures();return}let cumulativeDelta=((this.effectiveOrientation==="vertical"?e.clientY:e.clientX)-drag.startPos)/total*100;this.effectiveOrientation==="horizontal"&&isRtl(this)&&(cumulativeDelta=-cumulativeDelta);const incremental=cumulativeDelta-drag.appliedDelta,priorValue=this.sizes[drag.index];if(priorValue===void 0)return;const paired=this.clampPair(this.sizes,drag.index,incremental,total),pairedA=paired[drag.index],pairedB=paired[drag.index+1];if(pairedA===void 0||pairedB===void 0)return;const next=[...this.sizes];next[drag.index]=pairedA,next[drag.index+1]=pairedB,this.requestResize(next,!1)&&(drag.appliedDelta+=pairedA-priorValue,drag.acceptedResize=!0)},this.onPointerUp=e=>{const drag=this.drags.get(e.pointerId);drag&&(this.drags.delete(e.pointerId),e.type==="pointerup"&&drag.acceptedResize&&this.persist(),this.drags.size===0&&this.removeDragListeners())},this.onDividerKeyDown=(e,index)=>{if(this.isDividerDisabled(index))return;const rtl=this.effectiveOrientation==="horizontal"&&isRtl(this),forwardKey=this.effectiveOrientation==="vertical"?"ArrowDown":rtl?"ArrowLeft":"ArrowRight",backwardKey=this.effectiveOrientation==="vertical"?"ArrowUp":rtl?"ArrowRight":"ArrowLeft";if(e.key==="Home"||e.key==="End"){const{min,max}=this.dividerValueRange(index),current=this.sizes[index];if(current!==void 0){const target=e.key==="Home"?min:max;this.applyDelta(index,target-current,!0)&&e.preventDefault()}}else e.key===forwardKey?this.applyDelta(index,KEYBOARD_STEP,!0)&&e.preventDefault():e.key===backwardKey&&this.applyDelta(index,-KEYBOARD_STEP,!0)&&e.preventDefault()}}static{this.defaultStrings={...super.defaultStrings,resizeDivider:LYRA_DEFAULT_resizeDivider,resizeValuePercent:LYRA_DEFAULT_resizeValuePercent}}static{this.ownedCollectionProperties=Object.freeze(["sizes","defaultSizes","panelConstraints"])}static{this.styles=[LyraElement.styles,styles]}static{this.immutableEventDetails=Object.freeze(["lr-resize-request","lr-resize"])}static{this.properties={collapseState:{reflect:!0,attribute:"collapse-state",noAccessor:!0}}}connectedCallback(){super.connectedCallback();const hostWidth=this.getBoundingClientRect().width;hostWidth>0&&(this.measuredInlineSize=hostWidth),this.seedFirstRenderState(()=>this.syncPanelMembership(!1)),this.hasUpdated&&this.syncPanelMembership(!1),this.initializedSizes&&this.ensureSizes(),this.responsiveObservationEnabled&&this.armCollapseObserver(),this.hasUpdated&&this.overlayActive&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateFloatingOverlay(),queueMicrotask(()=>this.overlayHandle?.focusInitial()))}disconnectedCallback(){super.disconnectedCallback(),this.endDragGestures(),this.resetCollapseObserver(),this.overlayHandle?.suspend(),this.releaseOwnedPanels()}adoptedCallback(){super.adoptedCallback(),this.endDragGestures(),this.resetCollapseObserver(),this.releaseOwnedPanels()}firstUpdated(changed){super.firstUpdated(changed),this.responsiveObservationEnabled&&this.armCollapseObserver()}willUpdate(changed){if(super.willUpdate(changed),!this.ownerDocument&&this.panelCount===0&&(this.panelCount=Math.max(this.sizes.length,this.defaultSizes.length,this.panelConstraints.length)),!this.initializedSizes)this.initializeSizes(),this.initializedSizes=!0;else if(changed.has("sizes")){const previous=changed.get("sizes");this.sizesReconciledForMembership?this.sizesReconciledForMembership=!1:this.validLiveSizes(this.sizes)||(Array.isArray(previous)&&this.validLiveSizes(previous)?this.sizes=[...previous]:(this.sizes=[],this.ensureSizes()))}else this.sizes.length===0&&this.ensureSizes();if((changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&this.orientationBreakpoints.configure(this.orientationBreakpoint,this.orientationBreakpointBasis),(changed.has("orientation")||changed.has("narrowOrientation")||changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&this.updateEffectiveOrientation(this.measuredInlineSize,this.hasUpdated&&this.orientationBreakpointBasis==="viewport"),changed.has("collapse")||changed.has("railBreakpoint")||changed.has("floatBreakpoint")||changed.has("collapseBreakpointBasis")){const previousEffective=changed.has("collapse")?this.effectiveCollapseStateFor(changed.get("collapse")??"none"):this.collapseState;changed.has("collapse")&&previousEffective!=="wide"&&this.endDragGestures(),this.collapseBreakpoints.configure(this.railBreakpoint,this.floatBreakpoint,this.collapseBreakpointBasis),this.collapsingIndex!==-1&&!this._forced&&(this._collapseState=this.collapseBreakpoints.classify(this.measuredInlineSize)),this.applyEffectiveCollapseTransition(previousEffective,this.collapseState,this.hasUpdated)}if(changed.has("open")||changed.has("collapseState")||changed.has("collapse")||changed.has("panelCount")){const next=this.collapseState==="floating"&&this.open;next!==this.overlayActive&&(this.overlayActive=next,next?(this.justOpened=!0,this.activateFloatingOverlay()):this.deactivateFloatingOverlay())}}get collapseState(){return this.effectiveCollapseStateFor(this.collapse)}set collapseState(next){if(next==="auto"){this._forced=!1,this.updateCollapseState(this.currentMeasuredWidth());return}this._forced=!0,this.setRequestedCollapseState(next)}get effectiveOrientation(){return this._effectiveOrientation}get responsiveObservationEnabled(){return this.collapse!=="none"||this.orientationBreakpoints.containerObservationEnabled}updateEffectiveOrientation(width,shouldEmit){const next=this.orientationBreakpoints.isBelow(width)?this.narrowOrientation:this.orientation;next!==this._effectiveOrientation&&(this.endDragGestures(),this._effectiveOrientation=next,this.requestUpdate(),shouldEmit&&this.emit("lr-multi-split-orientation-change",{orientation:next}))}currentMeasuredWidth(){return this.baseEl?.clientWidth??0}effectiveCollapseStateFor(collapse){return collapse!=="none"&&this.panelCount>=2?this._collapseState:"wide"}applyEffectiveCollapseTransition(previous,next,shouldEmit=!0){if(previous===next)return;this.endDragGestures(),this.requestUpdate("collapseState",previous);const forceClose=previous==="floating"&&next!=="floating"&&this.open,forcedCloseVersion=this.forcedCloseVersion;shouldEmit&&this.emit("lr-multi-split-collapse-change",{state:next}),forceClose&&this.forcedCloseVersion===forcedCloseVersion&&this.collapseState!=="floating"&&this.setOpen(!1,{force:!0})}setOpen(next,options){if(options?.force){this.open=next,this.forcedCloseVersion+=1,this.emit("lr-toggle",{open:next});return}if(this.open===next)return;const collapseState=this.collapseState,open=this.open,mutationVersion=this.toggleProposalMutationVersion;this.toggleProposalDepth+=1;try{if(this.emit("lr-toggle",{open:next},{cancelable:!0}).defaultPrevented||this.toggleProposalMutationVersion!==mutationVersion||this.collapseState!==collapseState||this.open!==open)return}finally{this.toggleProposalDepth-=1}this.open=next}requestUpdate(name,oldValue,options){this.toggleProposalDepth>0&&(name==="open"&&oldValue!==this.open||name==="collapse"&&oldValue!==this.collapse||name==="collapseState"&&oldValue!==this.collapseState)&&(this.toggleProposalMutationVersion+=1),super.requestUpdate(name,oldValue,options)}setRequestedCollapseState(next,shouldEmit=!0){const previousEffective=this.collapseState;if(next===this._collapseState)return;this._collapseState=next;const nextEffective=this.collapseState;this.applyEffectiveCollapseTransition(previousEffective,nextEffective,shouldEmit),previousEffective===nextEffective&&next!==nextEffective&&this.requestUpdate("collapseState",next)}get storageFullKey(){return this.storageKey?`lr-multi-split:${this.storageKey}:panels`:void 0}panelIdsFor(panels){const ids=[],seen=new Set;for(const panel of panels){const panelId=panel.getAttribute("panel-id")??"";if(!panelId||panelId.trim()!==panelId||seen.has(panelId))return null;seen.add(panelId),ids.push(panelId)}return ids}reconcileIdentitySizes(previousIds,previousValues,nextIds){if(previousIds.length!==previousValues.length||nextIds.length===0)return null;const previousSizes=new Map;previousIds.forEach((panelId,index)=>{previousSizes.set(panelId,previousValues[index])});const retainedTotal=nextIds.reduce((total,panelId)=>total+(previousSizes.get(panelId)??0),0),missingCount=nextIds.filter(panelId=>!previousSizes.has(panelId)).length;if(!(retainedTotal>0)){const equal=100/nextIds.length;return nextIds.map(()=>equal)}const newShare=100/nextIds.length,retainedScale=(100-newShare*missingCount)/retainedTotal;return nextIds.map(panelId=>{const previous=previousSizes.get(panelId);return previous===void 0?newShare:previous*retainedScale})}reconcileSizesByPanelId(previousPanels,nextPanels){if(previousPanels.length!==this.sizes.length||nextPanels.length===0)return null;const previousIds=this.panelIdsFor(previousPanels),nextIds=this.panelIdsFor(nextPanels);return!previousIds||!nextIds?null:this.reconcileIdentitySizes(previousIds,this.sizes,nextIds)}validInitialSizes(value){return!Array.isArray(value)||value.length!==this.panelCount||!value.every(size=>Number.isFinite(size)&&size>=this.safeMin)?!1:Math.abs(value.reduce((sum,size)=>sum+size,0)-100)<.01}validLiveSizes(value){if(!Array.isArray(value)||value.length!==this.panelCount)return!1;const floor=this.normalizedDefaultMin();return value.every(size=>Number.isFinite(size)&&size>=floor)?Math.abs(value.reduce((sum,size)=>sum+size,0)-100)<.01:!1}resolveDefaultSizes(){if(this.defaultSizes.length===0)return null;if(!this.defaultSizes.some(entry=>typeof entry=="string")){const numbers=this.defaultSizes;return this.validInitialSizes(numbers)?[...numbers]:null}const containerSize=this.currentMeasuredWidth()||this.getBoundingClientRect().width;if(!(containerSize>0))return null;const resolvedPx=[];for(const entry of this.defaultSizes){if(typeof entry=="number"){if(!Number.isFinite(entry))return null;resolvedPx.push(entry/100*containerSize);continue}const px=resolveCssLength(entry,{host:this,percentBase:containerSize,viewportBasis:this.ownerDocument.defaultView??void 0});if(px==null||!(px>=0))return null;resolvedPx.push(px)}const sum=resolvedPx.reduce((total,size)=>total+size,0);if(!(sum>0))return null;const normalized=resolvedPx.map(size=>size/sum*100);return this.validInitialSizes(normalized)?normalized:null}initializeSizes(){if(this.loadPersisted()||this.validInitialSizes(this.sizes))return;const resolved=this.resolveDefaultSizes();if(resolved){this.sizes=resolved;return}this.sizes=[],this.ensureSizes()}loadPersisted(){const panelIds=this.panelIdsFor(this.ownedPanels);if(!panelIds)return!1;const parsed=readPersistedState(this.storageFullKey,isPersistedPanelLayout);if(!parsed||parsed.panels.length===0)return!1;const persistedIds=[],persistedSizes=[],seen=new Set;for(const panel of parsed.panels){if(seen.has(panel.panelId))return!1;seen.add(panel.panelId),persistedIds.push(panel.panelId),persistedSizes.push(panel.size)}if(Math.abs(persistedSizes.reduce((sum,size)=>sum+size,0)-100)>=.01)return!1;const normalized=this.reconcileIdentitySizes(persistedIds,persistedSizes,panelIds);return normalized&&this.validInitialSizes(normalized)?(this.sizes=normalized,!0):!1}persist(){const panelIds=this.panelIdsFor(this.ownedPanels);if(!panelIds||panelIds.length!==this.sizes.length)return;const layout={version:1,panels:panelIds.map((panelId,index)=>({panelId,size:this.sizes[index]}))};writePersistedState(this.storageFullKey,layout)}ensureSizes(){if(this.panelCount===this.sizes.length)return;if(this.panelCount<=0){this.sizes=[];return}if(this.sizes.length===0){const equal=100/this.panelCount;this.sizes=Array.from({length:this.panelCount},()=>equal);return}const diff=this.panelCount-this.sizes.length;if(diff>0){const newShare=100/this.panelCount,scale=(100-newShare*diff)/100;this.sizes=[...this.sizes.map(s=>s*scale),...Array.from({length:diff},()=>newShare)]}else{const kept=this.sizes.slice(0,this.panelCount),removedTotal=this.sizes.slice(this.panelCount).reduce((sum,s)=>sum+s,0),keptTotal=kept.reduce((sum,s)=>sum+s,0)||1;this.sizes=kept.map(s=>s+s/keptTotal*removedTotal)}}readPanelStyle(panel,property2){return{value:panel.style.getPropertyValue(property2),priority:panel.style.getPropertyPriority(property2)}}samePanelStyle(left,right){return left.value===right.value&&left.priority===right.priority}snapshotPanelOwnership(panel){const styles2=new Map;for(const property2 of OWNED_PANEL_STYLE_PROPERTIES)styles2.set(property2,this.readPanelStyle(panel,property2));return{styles:styles2,appliedStyles:new Map,hidden:panel.hidden,collapseState:panel.getAttribute("data-collapse-state")}}adoptPanelOwnership(panel,snapshot){for(const property2 of OWNED_PANEL_STYLE_PROPERTIES){const current=this.readPanelStyle(panel,property2),applied=snapshot.appliedStyles.get(property2);(applied&&!this.samePanelStyle(current,applied)||!applied&&!this.samePanelStyle(current,snapshot.styles.get(property2)))&&snapshot.styles.set(property2,current)}(snapshot.appliedHidden!==void 0&&panel.hidden!==snapshot.appliedHidden||snapshot.appliedHidden===void 0&&panel.hidden!==snapshot.hidden)&&(snapshot.hidden=panel.hidden);const collapseState=panel.getAttribute("data-collapse-state");(snapshot.appliedCollapseState!==void 0&&collapseState!==snapshot.appliedCollapseState||snapshot.appliedCollapseState===void 0&&collapseState!==snapshot.collapseState)&&(snapshot.collapseState=collapseState)}applyOwnedPanelStyle(panel,snapshot,property2,value){value.value===""?panel.style.removeProperty(property2):panel.style.setProperty(property2,value.value,value.priority),snapshot.appliedStyles.set(property2,this.readPanelStyle(panel,property2))}applyOwnedPanelStyleValue(panel,snapshot,property2,value){this.applyOwnedPanelStyle(panel,snapshot,property2,{value,priority:""})}applyOwnedPanelHidden(panel,snapshot,hidden){panel.hidden=hidden,snapshot.appliedHidden=panel.hidden}applyOwnedPanelCollapseState(panel,snapshot,state){state===null?panel.removeAttribute("data-collapse-state"):panel.setAttribute("data-collapse-state",state),snapshot.appliedCollapseState=panel.getAttribute("data-collapse-state")}restorePanelOwnership(panel,snapshot){this.adoptPanelOwnership(panel,snapshot);for(const property2 of OWNED_PANEL_STYLE_PROPERTIES){const value=snapshot.styles.get(property2);value.value===""?panel.style.removeProperty(property2):panel.style.setProperty(property2,value.value,value.priority)}panel.hidden=snapshot.hidden,snapshot.collapseState===null?panel.removeAttribute("data-collapse-state"):panel.setAttribute("data-collapse-state",snapshot.collapseState)}panelProjectionDiverged(panel,snapshot){for(const property2 of OWNED_PANEL_STYLE_PROPERTIES){const current=this.readPanelStyle(panel,property2),expected=snapshot.appliedStyles.get(property2)??snapshot.styles.get(property2);if(!this.samePanelStyle(current,expected))return!0}if(panel.hidden!==(snapshot.appliedHidden??snapshot.hidden))return!0;const expectedCollapseState=snapshot.appliedCollapseState!==void 0?snapshot.appliedCollapseState:snapshot.collapseState;return panel.getAttribute("data-collapse-state")!==expectedCollapseState}resetPanelOwnershipObserver(){this.panelOwnershipObserverGeneration+=1,this.panelOwnershipObserver?.disconnect(),this.panelOwnershipObserver=void 0,this.panelOwnershipObserverDocument=void 0}observeOwnedPanels(){this.resetPanelOwnershipObserver();const ownerDocument=this.ownerDocument,MutationObserverConstructor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverConstructor||!this.isConnected||this.ownedPanels.length===0)return;const generation=this.panelOwnershipObserverGeneration,observer=new MutationObserverConstructor(records=>{if(this.panelOwnershipObserver!==observer||this.panelOwnershipObserverDocument!==this.ownerDocument||this.panelOwnershipObserverGeneration!==generation||!this.isConnected)return;records.some(record=>{const panel=record.target,snapshot=this.panelOwnership.get(panel);return snapshot?this.panelProjectionDiverged(panel,snapshot):!1})&&this.requestUpdate()});this.panelOwnershipObserver=observer,this.panelOwnershipObserverDocument=ownerDocument;for(const panel of this.ownedPanels)observer.observe(panel,{attributes:!0,attributeFilter:["style","hidden","data-collapse-state"]})}samePanelSequence(next){return next.length===this.ownedPanels.length&&next.every((panel,index)=>panel===this.ownedPanels[index])}syncPanelMembership(reconcileSizes=!0){const next=[...this.children];if(this.samePanelSequence(next))return;const previousPanels=this.ownedPanels,identitySizes=reconcileSizes?this.reconcileSizesByPanelId(previousPanels,next):null,previousEffective=this.collapseState,nextSet=new Set(next);for(const panel of this.ownedPanels){if(nextSet.has(panel))continue;const snapshot=this.panelOwnership.get(panel);snapshot&&this.restorePanelOwnership(panel,snapshot),this.panelOwnership.delete(panel)}for(const panel of next)this.panelOwnership.has(panel)||this.panelOwnership.set(panel,this.snapshotPanelOwnership(panel));const countChanged=next.length!==this.panelCount;this.ownedPanels=next,this.panelCount=next.length,this.collapsingIndex!==-1&&!this._forced&&(this._collapseState=this.collapseBreakpoints.classify(this.currentMeasuredWidth())),this.applyEffectiveCollapseTransition(previousEffective,this.collapseState,this.hasUpdated),identitySizes?(this.sizesReconciledForMembership=!0,this.sizes=identitySizes):countChanged&&reconcileSizes&&(this.sizesReconciledForMembership=!0,this.ensureSizes()),this.observeOwnedPanels(),this.hasUpdated&&this.requestUpdate()}releaseOwnedPanels(){this.resetPanelOwnershipObserver();for(const panel of this.ownedPanels){const snapshot=this.panelOwnership.get(panel);snapshot&&this.restorePanelOwnership(panel,snapshot)}this.ownedPanels=[],this.panelOwnership.clear()}getContainerSize(){return this.baseEl?this.effectiveOrientation==="vertical"?this.baseEl.clientHeight:this.baseEl.clientWidth:0}get collapsingIndex(){return this.collapse==="none"||this.panelCount<2?-1:this.collapse==="start"?0:this.panelCount-1}get collapseActive(){return this.collapsingIndex!==-1&&this.collapseState!=="wide"}isDividerDisabled(index){if(!this.collapseActive)return!1;const adjacent=this.collapsingIndex===0?0:this.panelCount-2;return index===adjacent}updateCollapseState(width,shouldEmit=!0){this.collapse!=="none"&&(this._forced||this.setRequestedCollapseState(this.collapseBreakpoints.classify(width),shouldEmit))}armCollapseObserver(){const observedElement=this.baseEl;if(!this.isConnected||!observedElement)return;const ownerDocument=this.ownerDocument;if(this.collapseResizeObserver&&this.collapseObservedElement===observedElement&&this.collapseObserverOwnerDocument===ownerDocument)return;this.resetCollapseObserver();const ResizeObserverConstructor=ownerDocument.defaultView?.ResizeObserver;if(!ResizeObserverConstructor)return;const generation=this.collapseObserverGeneration,observer=new ResizeObserverConstructor(entries=>{if(this.collapseResizeObserver!==observer||this.collapseObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.baseEl!==observedElement)return;const box=entries[0]?.contentBoxSize?.[0],width=box?box.inlineSize:observedElement.getBoundingClientRect().width;this.measuredInlineSize=width,this.updateCollapseState(width),this.updateEffectiveOrientation(width,!0)});this.collapseResizeObserver=observer,this.collapseObservedElement=observedElement,this.collapseObserverOwnerDocument=ownerDocument,observer.observe(observedElement)}resetCollapseObserver(){this.collapseObserverGeneration+=1,this.collapseResizeObserver?.disconnect(),this.collapseResizeObserver=void 0,this.collapseObservedElement=void 0,this.collapseObserverOwnerDocument=void 0}syncCollapseObserver(){if(!this.responsiveObservationEnabled){this.resetCollapseObserver();return}this.armCollapseObserver()}get safeMin(){return finiteRange(this.min,10,0)}normalizedDefaultMin(){if(this.panelCount<=0)return 0;const requested=this.safeMin,available=Math.max(0,100-KEYBOARD_STEP);return Math.min(requested,available/this.panelCount)}resolveConstraintBounds(containerSize){const fallbackMin=this.normalizedDefaultMin(),fallback=Array.from({length:this.panelCount},()=>({min:fallbackMin,max:1/0}));if(this.panelCount<=0)return{bounds:[],usePanelConstraints:!0};const bounds=[];let minimumTotal=0,maximumTotal=0,hasUnboundedMaximum=!1,issueReason;for(let index=0;index<this.panelCount;index++){const constraint=this.panelConstraints[index];let min=this.safeMin,max=1/0,minSet=!1,maxSet=!1;constraint&&(constraint.minPx!=null&&Number.isFinite(constraint.minPx)&&constraint.minPx>=0&&containerSize>0&&(min=constraint.minPx/containerSize*100,minSet=!0),constraint.minPercent!=null&&Number.isFinite(constraint.minPercent)&&constraint.minPercent>=0&&(min=minSet?Math.max(min,constraint.minPercent):constraint.minPercent,minSet=!0),constraint.maxPx!=null&&Number.isFinite(constraint.maxPx)&&constraint.maxPx>=0&&containerSize>0&&(max=constraint.maxPx/containerSize*100,maxSet=!0),constraint.maxPercent!=null&&Number.isFinite(constraint.maxPercent)&&constraint.maxPercent>=0&&(max=maxSet?Math.min(max,constraint.maxPercent):constraint.maxPercent,maxSet=!0),(constraint.minPx!=null&&(!Number.isFinite(constraint.minPx)||constraint.minPx<0)||constraint.maxPx!=null&&(!Number.isFinite(constraint.maxPx)||constraint.maxPx<0)||constraint.minPercent!=null&&(!Number.isFinite(constraint.minPercent)||constraint.minPercent<0)||constraint.maxPercent!=null&&(!Number.isFinite(constraint.maxPercent)||constraint.maxPercent<0))&&(issueReason??="minimum-exceeds-maximum")),min>max&&(issueReason??="minimum-exceeds-maximum"),bounds.push({min,max}),minimumTotal+=min,Number.isFinite(max)?maximumTotal+=max:hasUnboundedMaximum=!0}return issueReason==null&&minimumTotal>100+1e-9&&(issueReason="minimum-total"),issueReason==null&&!hasUnboundedMaximum&&maximumTotal<100-1e-9&&(issueReason="maximum-total"),issueReason==null?{bounds,usePanelConstraints:!0}:{bounds:fallback,usePanelConstraints:!1,issue:{reason:issueReason,panelCount:this.panelCount,minimumTotal,maximumTotal:hasUnboundedMaximum?null:maximumTotal,containerSize}}}percentBounds(index,containerSize){return this.resolveConstraintBounds(containerSize).bounds[index]??{min:0,max:1/0}}hasClampConstraint(constraint){return!!constraint&&(constraint.minPx!=null||constraint.maxPx!=null||constraint.minPercent!=null||constraint.maxPercent!=null)}minSideExpr(constraint){const terms=[];return constraint?.minPx!=null&&Number.isFinite(constraint.minPx)&&constraint.minPx>=0&&terms.push(`${constraint.minPx}px`),constraint?.minPercent!=null&&Number.isFinite(constraint.minPercent)&&constraint.minPercent>=0&&terms.push(`${constraint.minPercent}%`),terms.length===0?`${NO_MIN_PX}px`:terms.length===1?terms[0]:`max(${this.safeMin}%, ${terms.join(", ")})`}maxSideExpr(constraint){const terms=[];return constraint?.maxPx!=null&&Number.isFinite(constraint.maxPx)&&constraint.maxPx>=0&&terms.push(`${constraint.maxPx}px`),constraint?.maxPercent!=null&&Number.isFinite(constraint.maxPercent)&&constraint.maxPercent>=0&&terms.push(`${constraint.maxPercent}%`),terms.length===0?`${NO_MAX_PX}px`:terms.length===1?terms[0]:`min(${terms.join(", ")})`}clampPair(sizes,i,delta,containerSize=0){const next=[...sizes],currentA=next[i],currentB=next[i+1];if(currentA===void 0||currentB===void 0)return next;const pairTotal=currentA+currentB,a=this.percentBounds(i,containerSize),b=this.percentBounds(i+1,containerSize),loRaw=Math.max(a.min,pairTotal-b.max),hiRaw=Math.min(a.max,pairTotal-b.min),lo=Math.min(loRaw,pairTotal),hi=Math.max(hiRaw,lo),clampedA=Math.min(Math.max(currentA+delta,lo),hi);return next[i]=clampedA,next[i+1]=pairTotal-clampedA,next}requestResize(next,commit){return next.length===this.sizes.length&&next.every((size,index)=>Math.abs(size-this.sizes[index])<=1e-9)||this.emit("lr-resize-request",{sizes:[...next]},{cancelable:!0}).defaultPrevented?!1:(this.sizes=next,this.emit("lr-resize",{sizes:[...this.sizes]}),commit&&this.persist(),!0)}applyDelta(index,delta,commit){const next=this.clampPair(this.sizes,index,delta,this.getContainerSize());return next.length!==this.sizes.length||next.some((size,currentIndex)=>Math.abs(size-this.sizes[currentIndex])>1e-9)?(this.requestResize(next,commit),!0):!1}get floatingPanelEl(){const index=this.collapsingIndex;return index===-1?null:this.ownedPanels[index]??null}activateFloatingOverlay(){this.overlayHandle=activateOverlay({host:this,panel:()=>this.floatingPanelEl,modalRoot:()=>this.floatingPanelEl,onEscape:()=>this.setOpen(!1),onBackdrop:()=>this.setOpen(!1),lockScroll:!0,suspendWhenUnrendered:!0})}deactivateFloatingOverlay(){this.overlayHandle?.deactivate(),this.overlayHandle=void 0}removeDragListeners(){const ownerWindow=this.dragOwnerWindow;this.dragOwnerWindow=void 0,ownerWindow?.removeEventListener("pointermove",this.onPointerMove),ownerWindow?.removeEventListener("pointerup",this.onPointerUp),ownerWindow?.removeEventListener("pointercancel",this.onPointerUp),ownerWindow?.removeEventListener("lostpointercapture",this.onPointerUp)}endDragGestures(){this.drags.clear(),this.removeDragListeners()}dividerValueRange(index,bounds=this.resolveConstraintBounds(this.getContainerSize()).bounds){const pairTotal=(this.sizes[index]??0)+(this.sizes[index+1]??0),leading=bounds[index],trailing=bounds[index+1],min=Math.max(leading.min,pairTotal-trailing.max);return{min,max:Math.max(min,Math.min(leading.max,pairTotal-trailing.min))}}updated(changed){super.updated(changed),(changed.has("collapse")||changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&this.syncCollapseObserver(),this.orientationBreakpoints.active?this.setAttribute("data-effective-orientation",this._effectiveOrientation):this.removeAttribute("data-effective-orientation");const constraintResolution=this.resolveConstraintBounds(this.getContainerSize()),issue=constraintResolution.issue,issueKey=issue?`${issue.reason}:${issue.panelCount}:${issue.minimumTotal}:${issue.maximumTotal??"unbounded"}`:"";issueKey!==this.constraintIssueKey&&(this.constraintIssueKey=issueKey,issue&&this.emit("lr-multi-split-constraints-invalid",issue));const panels=this.ownedPanels;for(const panel of panels){const snapshot=this.panelOwnership.get(panel);snapshot&&this.adoptPanelOwnership(panel,snapshot)}const collapsingIndex=this.collapseActive?this.collapsingIndex:-1,redistributedShare=new Array(panels.length).fill(0);if(collapsingIndex===-1){let freedPercent=0;const growableIndexes=[];let growableTotal=0;for(let i=0;i<panels.length;i++){const percent=this.sizes[i]??0,constraint=constraintResolution.usePanelConstraints?this.panelConstraints[i]:void 0;if(this.hasClampConstraint(constraint)){const bounds=constraintResolution.bounds[i],clamped=bounds?Math.min(Math.max(percent,bounds.min),bounds.max):percent;clamped<percent&&(freedPercent+=percent-clamped)}else growableIndexes.push(i),growableTotal+=percent}if(freedPercent>0&&growableTotal>0)for(const i of growableIndexes)redistributedShare[i]=freedPercent*((this.sizes[i]??0)/growableTotal)}panels.forEach((panel,i)=>{const snapshot=this.panelOwnership.get(panel);if(!snapshot)return;const percent=this.sizes[i]??0,constraint=constraintResolution.usePanelConstraints?this.panelConstraints[i]:void 0;if(this.applyOwnedPanelStyle(panel,snapshot,"inline-size",snapshot.styles.get("inline-size")),this.applyOwnedPanelHidden(panel,snapshot,snapshot.hidden),collapsingIndex===i&&this.collapseState==="rail")this.applyOwnedPanelStyleValue(panel,snapshot,"flex",`0 0 ${this.railWidth}`);else if(collapsingIndex===i&&this.collapseState==="floating"&&!this.open)this.applyOwnedPanelStyleValue(panel,snapshot,"flex","none"),this.applyOwnedPanelHidden(panel,snapshot,!0);else if(collapsingIndex===i&&this.collapseState==="floating")this.applyOwnedPanelStyleValue(panel,snapshot,"flex","none"),this.applyOwnedPanelStyleValue(panel,snapshot,"inline-size",`${percent}%`);else if(collapsingIndex!==-1&&i!==collapsingIndex)this.applyOwnedPanelStyleValue(panel,snapshot,"flex",this.hasClampConstraint(constraint)?`0 1 clamp(${this.minSideExpr(constraint)}, ${percent}%, ${this.maxSideExpr(constraint)})`:`${percent} 1 0%`);else{const adjustedPercent=percent+(redistributedShare[i]??0);this.applyOwnedPanelStyleValue(panel,snapshot,"flex",this.hasClampConstraint(constraint)?`0 1 clamp(${this.minSideExpr(constraint)}, ${percent}%, ${this.maxSideExpr(constraint)})`:`0 1 ${adjustedPercent}%`)}this.applyOwnedPanelStyleValue(panel,snapshot,"order",String(i*2)),collapsingIndex===i?this.applyOwnedPanelCollapseState(panel,snapshot,this.collapseState):this.applyOwnedPanelCollapseState(panel,snapshot,null)}),collapsingIndex!==-1?this.setAttribute("data-collapse-state",this.collapseState):this.removeAttribute("data-collapse-state"),this.justOpened&&(this.justOpened=!1,this.overlayHandle?.focusInitial())}render(){const dividers=[],bounds=this.resolveConstraintBounds(this.getContainerSize()).bounds;for(let i=0;i<this.panelCount-1;i++){const{min:valueMin,max:valueMax}=this.dividerValueRange(i,bounds),disabled=this.isDividerDisabled(i);dividers.push(html`<div
|
|
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{activateOverlay}from"../../../internal/overlay-manager.js";import{isRtl}from"../../../internal/rtl.js";import{finiteRange}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{CollapseBreakpointController,OrientationBreakpointController}from"../../../internal/orientation-breakpoint.js";import{readPersistedState,writePersistedState}from"../../../internal/persisted-state.js";import{resolveCssLength}from"../../../internal/css-length.js";import{styles}from"./multi-split.styles.js";import{LYRA_DEFAULT_resizeDivider,LYRA_DEFAULT_resizeValuePercent}from"../../../internal/default-strings.generated.js";const KEYBOARD_STEP=2;function isPersistedPanelLayout(value){if(typeof value!="object"||value===null)return!1;const candidate=value;return candidate.version!==1||!Array.isArray(candidate.panels)?!1:candidate.panels.every(panel=>{if(typeof panel!="object"||panel===null)return!1;const record=panel;return typeof record.panelId=="string"&&record.panelId!==""&&record.panelId.trim()===record.panelId&&typeof record.size=="number"&&Number.isFinite(record.size)&&record.size>=0})}const NO_MIN_PX=0,NO_MAX_PX=1e6,OWNED_PANEL_STYLE_PROPERTIES=["flex","order","inline-size","--_lr-multi-split-panel-min"];class LyraMultiSplit extends LyraElement{constructor(){super(...arguments),this.toggleProposalDepth=0,this.toggleProposalMutationVersion=0,this.forcedCloseVersion=0,this.sizes=[],this.defaultSizes=[],this.min=10,this.orientation="horizontal",this.orientationBreakpointBasis="container",this.narrowOrientation="vertical",this.panelConstraints=[],this.collapse="none",this.railWidth="3.5rem",this.railBreakpoint=640,this.floatBreakpoint=400,this.collapseBreakpointBasis="container",this.open=!1,this.panelCount=0,this.sizesReconciledForMembership=!1,this._collapseState="wide",this._forced=!1,this.overlayActive=!1,this.justOpened=!1,this.drags=new Map,this.ownedPanels=[],this.panelOwnership=new Map,this.panelOwnershipObserverGeneration=0,this.constraintIssueKey="",this.initializedSizes=!1,this.measuredInlineSize=Number.POSITIVE_INFINITY,this._effectiveOrientation="horizontal",this.collapseObserverGeneration=0,this.gutterObservedDividers=[],this.gutterObservedContainerSize=0,this.orientationBreakpoints=new OrientationBreakpointController(this,()=>this.updateEffectiveOrientation(this.measuredInlineSize,!0)),this.collapseBreakpoints=new CollapseBreakpointController(this,()=>this.updateCollapseState(this.measuredInlineSize,!0)),this.onSlotChange=()=>{this.updateBrowserDerivedState(()=>this.syncPanelMembership())},this.onBackdropClick=()=>{this.overlayHandle?.dismissBackdrop()},this.onModalLayerClick=event=>{event.target===this.baseEl&&this.overlayHandle?.dismissBackdrop()},this.onPointerDown=(e,index)=>{if(e.button!==0||this.isDividerDisabled(index))return;const divider=e.currentTarget,ownerWindow=divider.ownerDocument.defaultView;ownerWindow&&(this.drags.size>0&&this.dragOwnerWindow!==ownerWindow||(this.drags.set(e.pointerId,{index,startPos:this.effectiveOrientation==="vertical"?e.clientY:e.clientX,base:this.baseEl,appliedDelta:0,acceptedResize:!1}),divider.setPointerCapture(e.pointerId),this.drags.size===1&&(this.dragOwnerWindow=ownerWindow,ownerWindow.addEventListener("pointermove",this.onPointerMove),ownerWindow.addEventListener("pointerup",this.onPointerUp),ownerWindow.addEventListener("pointercancel",this.onPointerUp),ownerWindow.addEventListener("lostpointercapture",this.onPointerUp))))},this.onPointerMove=e=>{const drag=this.drags.get(e.pointerId);if(!drag)return;if(this.isDividerDisabled(drag.index)){this.endDragGestures();return}const total=this.effectiveOrientation==="vertical"?drag.base.clientHeight:drag.base.clientWidth;if(!Number.isFinite(total)||total<=0){this.endDragGestures();return}let cumulativeDelta=((this.effectiveOrientation==="vertical"?e.clientY:e.clientX)-drag.startPos)/total*100;this.effectiveOrientation==="horizontal"&&isRtl(this)&&(cumulativeDelta=-cumulativeDelta);const incremental=cumulativeDelta-drag.appliedDelta,priorValue=this.sizes[drag.index];if(priorValue===void 0)return;const paired=this.clampPair(this.sizes,drag.index,incremental,total),pairedA=paired[drag.index],pairedB=paired[drag.index+1];if(pairedA===void 0||pairedB===void 0)return;const next=[...this.sizes];next[drag.index]=pairedA,next[drag.index+1]=pairedB,this.requestResize(next,!1)&&(drag.appliedDelta+=pairedA-priorValue,drag.acceptedResize=!0)},this.onPointerUp=e=>{const drag=this.drags.get(e.pointerId);drag&&(this.drags.delete(e.pointerId),e.type==="pointerup"&&drag.acceptedResize&&this.persist(),this.drags.size===0&&this.removeDragListeners())},this.onDividerKeyDown=(e,index)=>{if(this.isDividerDisabled(index))return;const rtl=this.effectiveOrientation==="horizontal"&&isRtl(this),forwardKey=this.effectiveOrientation==="vertical"?"ArrowDown":rtl?"ArrowLeft":"ArrowRight",backwardKey=this.effectiveOrientation==="vertical"?"ArrowUp":rtl?"ArrowRight":"ArrowLeft";if(e.key==="Home"||e.key==="End"){const{min,max}=this.dividerValueRange(index),current=this.sizes[index];if(current!==void 0){const target=e.key==="Home"?min:max;this.applyDelta(index,target-current,!0)&&e.preventDefault()}}else e.key===forwardKey?this.applyDelta(index,KEYBOARD_STEP,!0)&&e.preventDefault():e.key===backwardKey&&this.applyDelta(index,-KEYBOARD_STEP,!0)&&e.preventDefault()}}static{this.defaultStrings={...super.defaultStrings,resizeDivider:LYRA_DEFAULT_resizeDivider,resizeValuePercent:LYRA_DEFAULT_resizeValuePercent}}static{this.ownedCollectionProperties=Object.freeze(["sizes","defaultSizes","panelConstraints"])}static{this.styles=[LyraElement.styles,styles]}static{this.immutableEventDetails=Object.freeze(["lr-resize-request","lr-resize"])}static{this.properties={collapseState:{reflect:!0,attribute:"collapse-state",noAccessor:!0}}}connectedCallback(){super.connectedCallback();const hostWidth=this.getBoundingClientRect().width;hostWidth>0&&(this.measuredInlineSize=hostWidth),this.seedFirstRenderState(()=>this.syncPanelMembership(!1)),this.hasUpdated&&this.syncPanelMembership(!1),this.initializedSizes&&this.ensureSizes(),this.responsiveObservationEnabled&&this.armCollapseObserver(),this.hasUpdated&&this.overlayActive&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateFloatingOverlay(),queueMicrotask(()=>this.overlayHandle?.focusInitial()))}disconnectedCallback(){super.disconnectedCallback(),this.endDragGestures(),this.resetCollapseObserver(),this.resetGutterObserver(),this.overlayHandle?.suspend(),this.releaseOwnedPanels()}adoptedCallback(){super.adoptedCallback(),this.endDragGestures(),this.resetCollapseObserver(),this.resetGutterObserver(),this.releaseOwnedPanels()}firstUpdated(changed){super.firstUpdated(changed),this.responsiveObservationEnabled&&this.armCollapseObserver()}willUpdate(changed){if(super.willUpdate(changed),!this.ownerDocument&&this.panelCount===0&&(this.panelCount=Math.max(this.sizes.length,this.defaultSizes.length,this.panelConstraints.length)),!this.initializedSizes)this.initializeSizes(),this.initializedSizes=!0;else if(changed.has("sizes")){const previous=changed.get("sizes");this.sizesReconciledForMembership?this.sizesReconciledForMembership=!1:this.validLiveSizes(this.sizes)||(Array.isArray(previous)&&this.validLiveSizes(previous)?this.sizes=[...previous]:(this.sizes=[],this.ensureSizes()))}else this.sizes.length===0&&this.ensureSizes();if((changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&this.orientationBreakpoints.configure(this.orientationBreakpoint,this.orientationBreakpointBasis),(changed.has("orientation")||changed.has("narrowOrientation")||changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&this.updateEffectiveOrientation(this.measuredInlineSize,this.hasUpdated&&this.orientationBreakpointBasis==="viewport"),changed.has("collapse")||changed.has("railBreakpoint")||changed.has("floatBreakpoint")||changed.has("collapseBreakpointBasis")){const previousEffective=changed.has("collapse")?this.effectiveCollapseStateFor(changed.get("collapse")??"none"):this.collapseState;changed.has("collapse")&&previousEffective!=="wide"&&this.endDragGestures(),this.collapseBreakpoints.configure(this.railBreakpoint,this.floatBreakpoint,this.collapseBreakpointBasis),this.collapsingIndex!==-1&&!this._forced&&(this._collapseState=this.collapseBreakpoints.classify(this.measuredInlineSize)),this.applyEffectiveCollapseTransition(previousEffective,this.collapseState,this.hasUpdated)}if(changed.has("open")||changed.has("collapseState")||changed.has("collapse")||changed.has("panelCount")){const next=this.collapseState==="floating"&&this.open;next!==this.overlayActive&&(this.overlayActive=next,next?(this.justOpened=!0,this.activateFloatingOverlay()):this.deactivateFloatingOverlay())}}get collapseState(){return this.effectiveCollapseStateFor(this.collapse)}set collapseState(next){if(next==="auto"){this._forced=!1,this.updateCollapseState(this.currentMeasuredWidth());return}this._forced=!0,this.setRequestedCollapseState(next)}get effectiveOrientation(){return this._effectiveOrientation}get responsiveObservationEnabled(){return this.collapse!=="none"||this.orientationBreakpoints.containerObservationEnabled}updateEffectiveOrientation(width,shouldEmit){const next=this.orientationBreakpoints.isBelow(width)?this.narrowOrientation:this.orientation;next!==this._effectiveOrientation&&(this.endDragGestures(),this._effectiveOrientation=next,this.requestUpdate(),shouldEmit&&this.emit("lr-multi-split-orientation-change",{orientation:next}))}currentMeasuredWidth(){return this.baseEl?.clientWidth??0}effectiveCollapseStateFor(collapse){return collapse!=="none"&&this.panelCount>=2?this._collapseState:"wide"}applyEffectiveCollapseTransition(previous,next,shouldEmit=!0){if(previous===next)return;this.endDragGestures(),this.requestUpdate("collapseState",previous);const forceClose=previous==="floating"&&next!=="floating"&&this.open,forcedCloseVersion=this.forcedCloseVersion;shouldEmit&&this.emit("lr-multi-split-collapse-change",{state:next}),forceClose&&this.forcedCloseVersion===forcedCloseVersion&&this.collapseState!=="floating"&&this.setOpen(!1,{force:!0})}setOpen(next,options){if(options?.force){this.open=next,this.forcedCloseVersion+=1,this.emit("lr-toggle",{open:next});return}if(this.open===next)return;const collapseState=this.collapseState,open=this.open,mutationVersion=this.toggleProposalMutationVersion;this.toggleProposalDepth+=1;try{if(this.emit("lr-toggle",{open:next},{cancelable:!0}).defaultPrevented||this.toggleProposalMutationVersion!==mutationVersion||this.collapseState!==collapseState||this.open!==open)return}finally{this.toggleProposalDepth-=1}this.open=next}requestUpdate(name,oldValue,options){this.toggleProposalDepth>0&&(name==="open"&&oldValue!==this.open||name==="collapse"&&oldValue!==this.collapse||name==="collapseState"&&oldValue!==this.collapseState)&&(this.toggleProposalMutationVersion+=1),super.requestUpdate(name,oldValue,options)}setRequestedCollapseState(next,shouldEmit=!0){const previousEffective=this.collapseState;if(next===this._collapseState)return;this._collapseState=next;const nextEffective=this.collapseState;this.applyEffectiveCollapseTransition(previousEffective,nextEffective,shouldEmit),previousEffective===nextEffective&&next!==nextEffective&&this.requestUpdate("collapseState",next)}get storageFullKey(){return this.storageKey?`lr-multi-split:${this.storageKey}:panels`:void 0}panelIdsFor(panels){const ids=[],seen=new Set;for(const panel of panels){const panelId=panel.getAttribute("panel-id")??"";if(!panelId||panelId.trim()!==panelId||seen.has(panelId))return null;seen.add(panelId),ids.push(panelId)}return ids}reconcileIdentitySizes(previousIds,previousValues,nextIds){if(previousIds.length!==previousValues.length||nextIds.length===0)return null;const previousSizes=new Map;previousIds.forEach((panelId,index)=>{previousSizes.set(panelId,previousValues[index])});const retainedTotal=nextIds.reduce((total,panelId)=>total+(previousSizes.get(panelId)??0),0),missingCount=nextIds.filter(panelId=>!previousSizes.has(panelId)).length;if(!(retainedTotal>0)){const equal=100/nextIds.length;return nextIds.map(()=>equal)}const newShare=100/nextIds.length,retainedScale=(100-newShare*missingCount)/retainedTotal;return nextIds.map(panelId=>{const previous=previousSizes.get(panelId);return previous===void 0?newShare:previous*retainedScale})}reconcileSizesByPanelId(previousPanels,nextPanels){if(previousPanels.length!==this.sizes.length||nextPanels.length===0)return null;const previousIds=this.panelIdsFor(previousPanels),nextIds=this.panelIdsFor(nextPanels);return!previousIds||!nextIds?null:this.reconcileIdentitySizes(previousIds,this.sizes,nextIds)}validInitialSizes(value){return!Array.isArray(value)||value.length!==this.panelCount||!value.every(size=>Number.isFinite(size)&&size>=this.safeMin)?!1:Math.abs(value.reduce((sum,size)=>sum+size,0)-100)<.01}validLiveSizes(value){if(!Array.isArray(value)||value.length!==this.panelCount)return!1;const floor=this.normalizedDefaultMin();return value.every(size=>Number.isFinite(size)&&size>=floor)?Math.abs(value.reduce((sum,size)=>sum+size,0)-100)<.01:!1}resolveDefaultSizes(){if(this.defaultSizes.length===0)return null;if(!this.defaultSizes.some(entry=>typeof entry=="string")){const numbers=this.defaultSizes;return this.validInitialSizes(numbers)?[...numbers]:null}const containerSize=this.currentMeasuredWidth()||this.getBoundingClientRect().width;if(!(containerSize>0))return null;const resolvedPx=[];for(const entry of this.defaultSizes){if(typeof entry=="number"){if(!Number.isFinite(entry))return null;resolvedPx.push(entry/100*containerSize);continue}const px=resolveCssLength(entry,{host:this,percentBase:containerSize,viewportBasis:this.ownerDocument.defaultView??void 0});if(px==null||!(px>=0))return null;resolvedPx.push(px)}const sum=resolvedPx.reduce((total,size)=>total+size,0);if(!(sum>0))return null;const normalized=resolvedPx.map(size=>size/sum*100);return this.validInitialSizes(normalized)?normalized:null}initializeSizes(){if(this.loadPersisted()||this.validInitialSizes(this.sizes))return;const resolved=this.resolveDefaultSizes();if(resolved){this.sizes=resolved;return}this.sizes=[],this.ensureSizes()}loadPersisted(){const panelIds=this.panelIdsFor(this.ownedPanels);if(!panelIds)return!1;const parsed=readPersistedState(this.storageFullKey,isPersistedPanelLayout);if(!parsed||parsed.panels.length===0)return!1;const persistedIds=[],persistedSizes=[],seen=new Set;for(const panel of parsed.panels){if(seen.has(panel.panelId))return!1;seen.add(panel.panelId),persistedIds.push(panel.panelId),persistedSizes.push(panel.size)}if(Math.abs(persistedSizes.reduce((sum,size)=>sum+size,0)-100)>=.01)return!1;const normalized=this.reconcileIdentitySizes(persistedIds,persistedSizes,panelIds);return normalized&&this.validInitialSizes(normalized)?(this.sizes=normalized,!0):!1}persist(){const panelIds=this.panelIdsFor(this.ownedPanels);if(!panelIds||panelIds.length!==this.sizes.length)return;const layout={version:1,panels:panelIds.map((panelId,index)=>({panelId,size:this.sizes[index]}))};writePersistedState(this.storageFullKey,layout)}ensureSizes(){if(this.panelCount===this.sizes.length)return;if(this.panelCount<=0){this.sizes=[];return}if(this.sizes.length===0){const equal=100/this.panelCount;this.sizes=Array.from({length:this.panelCount},()=>equal);return}const diff=this.panelCount-this.sizes.length;if(diff>0){const newShare=100/this.panelCount,scale=(100-newShare*diff)/100;this.sizes=[...this.sizes.map(s=>s*scale),...Array.from({length:diff},()=>newShare)]}else{const kept=this.sizes.slice(0,this.panelCount),removedTotal=this.sizes.slice(this.panelCount).reduce((sum,s)=>sum+s,0),keptTotal=kept.reduce((sum,s)=>sum+s,0)||1;this.sizes=kept.map(s=>s+s/keptTotal*removedTotal)}}readPanelStyle(panel,property2){return{value:panel.style.getPropertyValue(property2),priority:panel.style.getPropertyPriority(property2)}}samePanelStyle(left,right){return left.value===right.value&&left.priority===right.priority}snapshotPanelOwnership(panel){const styles2=new Map;for(const property2 of OWNED_PANEL_STYLE_PROPERTIES)styles2.set(property2,this.readPanelStyle(panel,property2));return{styles:styles2,appliedStyles:new Map,hidden:panel.hidden,collapseState:panel.getAttribute("data-collapse-state")}}adoptPanelOwnership(panel,snapshot){for(const property2 of OWNED_PANEL_STYLE_PROPERTIES){const current=this.readPanelStyle(panel,property2),applied=snapshot.appliedStyles.get(property2);(applied&&!this.samePanelStyle(current,applied)||!applied&&!this.samePanelStyle(current,snapshot.styles.get(property2)))&&snapshot.styles.set(property2,current)}(snapshot.appliedHidden!==void 0&&panel.hidden!==snapshot.appliedHidden||snapshot.appliedHidden===void 0&&panel.hidden!==snapshot.hidden)&&(snapshot.hidden=panel.hidden);const collapseState=panel.getAttribute("data-collapse-state");(snapshot.appliedCollapseState!==void 0&&collapseState!==snapshot.appliedCollapseState||snapshot.appliedCollapseState===void 0&&collapseState!==snapshot.collapseState)&&(snapshot.collapseState=collapseState)}applyOwnedPanelStyle(panel,snapshot,property2,value){value.value===""?panel.style.removeProperty(property2):panel.style.setProperty(property2,value.value,value.priority),snapshot.appliedStyles.set(property2,this.readPanelStyle(panel,property2))}applyOwnedPanelStyleValue(panel,snapshot,property2,value){this.applyOwnedPanelStyle(panel,snapshot,property2,{value,priority:""})}applyOwnedPanelHidden(panel,snapshot,hidden){panel.hidden=hidden,snapshot.appliedHidden=panel.hidden}applyOwnedPanelCollapseState(panel,snapshot,state){state===null?panel.removeAttribute("data-collapse-state"):panel.setAttribute("data-collapse-state",state),snapshot.appliedCollapseState=panel.getAttribute("data-collapse-state")}restorePanelOwnership(panel,snapshot){this.adoptPanelOwnership(panel,snapshot);for(const property2 of OWNED_PANEL_STYLE_PROPERTIES){const value=snapshot.styles.get(property2);value.value===""?panel.style.removeProperty(property2):panel.style.setProperty(property2,value.value,value.priority)}panel.hidden=snapshot.hidden,snapshot.collapseState===null?panel.removeAttribute("data-collapse-state"):panel.setAttribute("data-collapse-state",snapshot.collapseState)}panelProjectionDiverged(panel,snapshot){for(const property2 of OWNED_PANEL_STYLE_PROPERTIES){const current=this.readPanelStyle(panel,property2),expected=snapshot.appliedStyles.get(property2)??snapshot.styles.get(property2);if(!this.samePanelStyle(current,expected))return!0}if(panel.hidden!==(snapshot.appliedHidden??snapshot.hidden))return!0;const expectedCollapseState=snapshot.appliedCollapseState!==void 0?snapshot.appliedCollapseState:snapshot.collapseState;return panel.getAttribute("data-collapse-state")!==expectedCollapseState}resetPanelOwnershipObserver(){this.panelOwnershipObserverGeneration+=1,this.panelOwnershipObserver?.disconnect(),this.panelOwnershipObserver=void 0,this.panelOwnershipObserverDocument=void 0}observeOwnedPanels(){this.resetPanelOwnershipObserver();const ownerDocument=this.ownerDocument,MutationObserverConstructor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverConstructor||!this.isConnected||this.ownedPanels.length===0)return;const generation=this.panelOwnershipObserverGeneration,observer=new MutationObserverConstructor(records=>{if(this.panelOwnershipObserver!==observer||this.panelOwnershipObserverDocument!==this.ownerDocument||this.panelOwnershipObserverGeneration!==generation||!this.isConnected)return;records.some(record=>{const panel=record.target,snapshot=this.panelOwnership.get(panel);return snapshot?this.panelProjectionDiverged(panel,snapshot):!1})&&this.requestUpdate()});this.panelOwnershipObserver=observer,this.panelOwnershipObserverDocument=ownerDocument;for(const panel of this.ownedPanels)observer.observe(panel,{attributes:!0,attributeFilter:["style","hidden","data-collapse-state"]})}samePanelSequence(next){return next.length===this.ownedPanels.length&&next.every((panel,index)=>panel===this.ownedPanels[index])}syncPanelMembership(reconcileSizes=!0){const next=[...this.children];if(this.samePanelSequence(next))return;const previousPanels=this.ownedPanels,identitySizes=reconcileSizes?this.reconcileSizesByPanelId(previousPanels,next):null,previousEffective=this.collapseState,nextSet=new Set(next);for(const panel of this.ownedPanels){if(nextSet.has(panel))continue;const snapshot=this.panelOwnership.get(panel);snapshot&&this.restorePanelOwnership(panel,snapshot),this.panelOwnership.delete(panel)}for(const panel of next)this.panelOwnership.has(panel)||this.panelOwnership.set(panel,this.snapshotPanelOwnership(panel));const countChanged=next.length!==this.panelCount;this.ownedPanels=next,this.panelCount=next.length,this.collapsingIndex!==-1&&!this._forced&&(this._collapseState=this.collapseBreakpoints.classify(this.currentMeasuredWidth())),this.applyEffectiveCollapseTransition(previousEffective,this.collapseState,this.hasUpdated),identitySizes?(this.sizesReconciledForMembership=!0,this.sizes=identitySizes):countChanged&&reconcileSizes&&(this.sizesReconciledForMembership=!0,this.ensureSizes()),this.observeOwnedPanels(),this.hasUpdated&&this.requestUpdate()}releaseOwnedPanels(){this.resetPanelOwnershipObserver();for(const panel of this.ownedPanels){const snapshot=this.panelOwnership.get(panel);snapshot&&this.restorePanelOwnership(panel,snapshot)}this.ownedPanels=[],this.panelOwnership.clear()}getContainerSize(){return this.baseEl?this.effectiveOrientation==="vertical"?this.baseEl.clientHeight:this.baseEl.clientWidth:0}resetGutterObserver(){this.gutterObserverFrame!==void 0&&(this.gutterObserverDocument?.defaultView?.cancelAnimationFrame(this.gutterObserverFrame),this.gutterObserverFrame=void 0),this.gutterResizeObserver?.disconnect(),this.gutterResizeObserver=void 0,this.gutterObserverDocument=void 0,this.gutterObservedDividers=[],this.baseEl?.style.removeProperty("--_lr-multi-split-gutters")}updateGutterBudget(){const view=this.ownerDocument.defaultView,base=this.baseEl;if(!view||!base)return;const vertical=this.effectiveOrientation==="vertical",value=`${this.gutterObservedDividers.reduce((total,divider)=>{const style=view.getComputedStyle(divider),properties=vertical?["height","padding-top","padding-bottom","border-top-width","border-bottom-width"]:["width","padding-left","padding-right","border-left-width","border-right-width"],boxProperties=style.boxSizing==="border-box"?properties.slice(0,1):properties;return total+boxProperties.reduce((size,property2)=>size+finiteRange(parseFloat(style.getPropertyValue(property2)),0,0),0)},0)}px`;base.style.getPropertyValue("--_lr-multi-split-gutters")!==value&&base.style.setProperty("--_lr-multi-split-gutters",value)}syncGutterObserver(enabled){const base=this.baseEl;if(!enabled||!this.isConnected||!base){this.resetGutterObserver();return}const ownerDocument=this.ownerDocument,dividers=[...base.querySelectorAll('[part="divider"]')];if(this.gutterResizeObserver&&this.gutterObserverDocument===ownerDocument&÷rs.length===this.gutterObservedDividers.length&÷rs.every((divider,index)=>divider===this.gutterObservedDividers[index])){this.updateGutterBudget();return}this.resetGutterObserver(),this.gutterObservedDividers=dividers,this.gutterObserverDocument=ownerDocument,this.gutterObservedContainerSize=this.getContainerSize(),this.updateGutterBudget();const ownerWindow=ownerDocument.defaultView,ResizeObserverConstructor=ownerWindow?.ResizeObserver;if(!ownerWindow||!ResizeObserverConstructor)return;const observer=new ResizeObserverConstructor(()=>{if(this.gutterResizeObserver!==observer||!this.isConnected||this.ownerDocument!==ownerDocument)return;this.updateGutterBudget();const size=this.getContainerSize();size!==this.gutterObservedContainerSize&&(this.gutterObservedContainerSize=size,this.requestUpdate())});this.gutterResizeObserver=observer;const frame=ownerWindow.requestAnimationFrame(()=>{if(!(this.gutterObserverFrame!==frame||this.gutterResizeObserver!==observer||!this.isConnected||this.ownerDocument!==ownerDocument||this.baseEl!==base)){this.gutterObserverFrame=void 0,observer.observe(base,{box:"border-box"});for(const divider of dividers)observer.observe(divider,{box:"border-box"})}});this.gutterObserverFrame=frame}get collapsingIndex(){return this.collapse==="none"||this.panelCount<2?-1:this.collapse==="start"?0:this.panelCount-1}get collapseActive(){return this.collapsingIndex!==-1&&this.collapseState!=="wide"}isDividerDisabled(index){if(!this.collapseActive)return!1;const adjacent=this.collapsingIndex===0?0:this.panelCount-2;return index===adjacent}updateCollapseState(width,shouldEmit=!0){this.collapse!=="none"&&(this._forced||this.setRequestedCollapseState(this.collapseBreakpoints.classify(width),shouldEmit))}armCollapseObserver(){const observedElement=this.baseEl;if(!this.isConnected||!observedElement)return;const ownerDocument=this.ownerDocument;if(this.collapseResizeObserver&&this.collapseObservedElement===observedElement&&this.collapseObserverOwnerDocument===ownerDocument)return;this.resetCollapseObserver();const ResizeObserverConstructor=ownerDocument.defaultView?.ResizeObserver;if(!ResizeObserverConstructor)return;const generation=this.collapseObserverGeneration,observer=new ResizeObserverConstructor(entries=>{if(this.collapseResizeObserver!==observer||this.collapseObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.baseEl!==observedElement)return;const box=entries[0]?.contentBoxSize?.[0],width=box?box.inlineSize:observedElement.getBoundingClientRect().width;this.measuredInlineSize=width,this.updateCollapseState(width),this.updateEffectiveOrientation(width,!0)});this.collapseResizeObserver=observer,this.collapseObservedElement=observedElement,this.collapseObserverOwnerDocument=ownerDocument,observer.observe(observedElement)}resetCollapseObserver(){this.collapseObserverGeneration+=1,this.collapseResizeObserver?.disconnect(),this.collapseResizeObserver=void 0,this.collapseObservedElement=void 0,this.collapseObserverOwnerDocument=void 0}syncCollapseObserver(){if(!this.responsiveObservationEnabled){this.resetCollapseObserver();return}this.armCollapseObserver()}get safeMin(){return finiteRange(this.min,10,0)}normalizedDefaultMin(){if(this.panelCount<=0)return 0;const requested=this.safeMin,available=Math.max(0,100-KEYBOARD_STEP);return Math.min(requested,available/this.panelCount)}resolveConstraintBounds(containerSize){const fallbackMin=this.normalizedDefaultMin(),fallback=Array.from({length:this.panelCount},()=>({min:fallbackMin,max:1/0}));if(this.panelCount<=0)return{bounds:[],usePanelConstraints:!0};const bounds=[];let minimumTotal=0,maximumTotal=0,hasUnboundedMaximum=!1,issueReason;for(let index=0;index<this.panelCount;index++){const constraint=this.panelConstraints[index];let min=this.safeMin,max=1/0,minSet=!1,maxSet=!1;constraint&&(constraint.minPx!=null&&Number.isFinite(constraint.minPx)&&constraint.minPx>=0&&containerSize>0&&(min=constraint.minPx/containerSize*100,minSet=!0),constraint.minPercent!=null&&Number.isFinite(constraint.minPercent)&&constraint.minPercent>=0&&(min=minSet?Math.max(min,constraint.minPercent):constraint.minPercent,minSet=!0),constraint.maxPx!=null&&Number.isFinite(constraint.maxPx)&&constraint.maxPx>=0&&containerSize>0&&(max=constraint.maxPx/containerSize*100,maxSet=!0),constraint.maxPercent!=null&&Number.isFinite(constraint.maxPercent)&&constraint.maxPercent>=0&&(max=maxSet?Math.min(max,constraint.maxPercent):constraint.maxPercent,maxSet=!0),(constraint.minPx!=null&&(!Number.isFinite(constraint.minPx)||constraint.minPx<0)||constraint.maxPx!=null&&(!Number.isFinite(constraint.maxPx)||constraint.maxPx<0)||constraint.minPercent!=null&&(!Number.isFinite(constraint.minPercent)||constraint.minPercent<0)||constraint.maxPercent!=null&&(!Number.isFinite(constraint.maxPercent)||constraint.maxPercent<0))&&(issueReason??="minimum-exceeds-maximum")),min>max&&(issueReason??="minimum-exceeds-maximum"),bounds.push({min,max}),minimumTotal+=min,Number.isFinite(max)?maximumTotal+=max:hasUnboundedMaximum=!0}return issueReason==null&&minimumTotal>100+1e-9&&(issueReason="minimum-total"),issueReason==null&&!hasUnboundedMaximum&&maximumTotal<100-1e-9&&(issueReason="maximum-total"),issueReason==null?{bounds,usePanelConstraints:!0}:{bounds:fallback,usePanelConstraints:!1,issue:{reason:issueReason,panelCount:this.panelCount,minimumTotal,maximumTotal:hasUnboundedMaximum?null:maximumTotal,containerSize}}}percentBounds(index,containerSize){return this.resolveConstraintBounds(containerSize).bounds[index]??{min:0,max:1/0}}hasClampConstraint(constraint){return!!constraint&&(constraint.minPx!=null||constraint.maxPx!=null||constraint.minPercent!=null||constraint.maxPercent!=null)}minSideExpr(constraint){const terms=[];return constraint?.minPx!=null&&Number.isFinite(constraint.minPx)&&constraint.minPx>=0&&terms.push(`${constraint.minPx}px`),constraint?.minPercent!=null&&Number.isFinite(constraint.minPercent)&&constraint.minPercent>=0&&terms.push(`${constraint.minPercent}%`),terms.length===0?`${NO_MIN_PX}px`:terms.length===1?terms[0]:`max(${this.safeMin}%, ${terms.join(", ")})`}maxSideExpr(constraint){const terms=[];return constraint?.maxPx!=null&&Number.isFinite(constraint.maxPx)&&constraint.maxPx>=0&&terms.push(`${constraint.maxPx}px`),constraint?.maxPercent!=null&&Number.isFinite(constraint.maxPercent)&&constraint.maxPercent>=0&&terms.push(`${constraint.maxPercent}%`),terms.length===0?`${NO_MAX_PX}px`:terms.length===1?terms[0]:`min(${terms.join(", ")})`}clampPair(sizes,i,delta,containerSize=0){const next=[...sizes],currentA=next[i],currentB=next[i+1];if(currentA===void 0||currentB===void 0)return next;const pairTotal=currentA+currentB,a=this.percentBounds(i,containerSize),b=this.percentBounds(i+1,containerSize),loRaw=Math.max(a.min,pairTotal-b.max),hiRaw=Math.min(a.max,pairTotal-b.min),lo=Math.min(loRaw,pairTotal),hi=Math.max(hiRaw,lo),clampedA=Math.min(Math.max(currentA+delta,lo),hi);return next[i]=clampedA,next[i+1]=pairTotal-clampedA,next}requestResize(next,commit){return next.length===this.sizes.length&&next.every((size,index)=>Math.abs(size-this.sizes[index])<=1e-9)||this.emit("lr-resize-request",{sizes:[...next]},{cancelable:!0}).defaultPrevented?!1:(this.sizes=next,this.emit("lr-resize",{sizes:[...this.sizes]}),commit&&this.persist(),!0)}applyDelta(index,delta,commit){const next=this.clampPair(this.sizes,index,delta,this.getContainerSize());return next.length!==this.sizes.length||next.some((size,currentIndex)=>Math.abs(size-this.sizes[currentIndex])>1e-9)?(this.requestResize(next,commit),!0):!1}get floatingPanelEl(){const index=this.collapsingIndex;return index===-1?null:this.ownedPanels[index]??null}activateFloatingOverlay(){this.overlayHandle=activateOverlay({host:this,panel:()=>this.floatingPanelEl,modalRoot:()=>this.floatingPanelEl,onEscape:()=>this.setOpen(!1),onBackdrop:()=>this.setOpen(!1),lockScroll:!0,suspendWhenUnrendered:!0})}deactivateFloatingOverlay(){this.overlayHandle?.deactivate(),this.overlayHandle=void 0}removeDragListeners(){const ownerWindow=this.dragOwnerWindow;this.dragOwnerWindow=void 0,ownerWindow?.removeEventListener("pointermove",this.onPointerMove),ownerWindow?.removeEventListener("pointerup",this.onPointerUp),ownerWindow?.removeEventListener("pointercancel",this.onPointerUp),ownerWindow?.removeEventListener("lostpointercapture",this.onPointerUp)}endDragGestures(){this.drags.clear(),this.removeDragListeners()}dividerValueRange(index,bounds=this.resolveConstraintBounds(this.getContainerSize()).bounds){const pairTotal=(this.sizes[index]??0)+(this.sizes[index+1]??0),leading=bounds[index],trailing=bounds[index+1],min=Math.max(leading.min,pairTotal-trailing.max);return{min,max:Math.max(min,Math.min(leading.max,pairTotal-trailing.min))}}updated(changed){super.updated(changed),(changed.has("collapse")||changed.has("orientationBreakpoint")||changed.has("orientationBreakpointBasis"))&&this.syncCollapseObserver(),this.orientationBreakpoints.active?this.setAttribute("data-effective-orientation",this._effectiveOrientation):this.removeAttribute("data-effective-orientation");const constraintResolution=this.resolveConstraintBounds(this.getContainerSize()),issue=constraintResolution.issue,issueKey=issue?`${issue.reason}:${issue.panelCount}:${issue.minimumTotal}:${issue.maximumTotal??"unbounded"}`:"";issueKey!==this.constraintIssueKey&&(this.constraintIssueKey=issueKey,issue&&this.emit("lr-multi-split-constraints-invalid",issue));const panels=this.ownedPanels;for(const panel of panels){const snapshot=this.panelOwnership.get(panel);snapshot&&this.adoptPanelOwnership(panel,snapshot)}const collapsingIndex=this.collapseActive?this.collapsingIndex:-1;this.syncGutterObserver(collapsingIndex===-1&&this.panelConstraints.some(constraint=>finiteRange(constraint?.minPx??0,0,0)>0));const pixelMinimumTotal=constraintResolution.usePanelConstraints?this.panelConstraints.slice(0,this.panelCount).reduce((total,constraint)=>total+finiteRange(constraint?.minPx??0,0,0),0):0,redistributedShare=new Array(panels.length).fill(0);if(collapsingIndex===-1){let freedPercent=0;const growableIndexes=[];let growableTotal=0;for(let i=0;i<panels.length;i++){const percent=this.sizes[i]??0,constraint=constraintResolution.usePanelConstraints?this.panelConstraints[i]:void 0;if(this.hasClampConstraint(constraint)){const bounds=constraintResolution.bounds[i],clamped=bounds?Math.min(Math.max(percent,bounds.min),bounds.max):percent;clamped<percent&&(freedPercent+=percent-clamped)}else growableIndexes.push(i),growableTotal+=percent}if(freedPercent>0&&growableTotal>0)for(const i of growableIndexes)redistributedShare[i]=freedPercent*((this.sizes[i]??0)/growableTotal)}panels.forEach((panel,i)=>{const snapshot=this.panelOwnership.get(panel);if(!snapshot)return;const percent=this.sizes[i]??0,constraint=constraintResolution.usePanelConstraints?this.panelConstraints[i]:void 0,pixelMinimum=finiteRange(constraint?.minPx??0,0,0);if(collapsingIndex===-1&&pixelMinimum>0&&pixelMinimumTotal>0?this.applyOwnedPanelStyleValue(panel,snapshot,"--_lr-multi-split-panel-min",`min(${pixelMinimum}px, max(0px, calc((100% - var(--_lr-multi-split-gutters, 0px)) * ${pixelMinimum/pixelMinimumTotal})))`):this.applyOwnedPanelStyle(panel,snapshot,"--_lr-multi-split-panel-min",snapshot.styles.get("--_lr-multi-split-panel-min")),this.applyOwnedPanelStyle(panel,snapshot,"inline-size",snapshot.styles.get("inline-size")),this.applyOwnedPanelHidden(panel,snapshot,snapshot.hidden),collapsingIndex===i&&this.collapseState==="rail")this.applyOwnedPanelStyleValue(panel,snapshot,"flex",`0 0 ${this.railWidth}`);else if(collapsingIndex===i&&this.collapseState==="floating"&&!this.open)this.applyOwnedPanelStyleValue(panel,snapshot,"flex","none"),this.applyOwnedPanelHidden(panel,snapshot,!0);else if(collapsingIndex===i&&this.collapseState==="floating")this.applyOwnedPanelStyleValue(panel,snapshot,"flex","none"),this.applyOwnedPanelStyleValue(panel,snapshot,"inline-size",`${percent}%`);else if(collapsingIndex!==-1&&i!==collapsingIndex)this.applyOwnedPanelStyleValue(panel,snapshot,"flex",this.hasClampConstraint(constraint)?`0 1 clamp(${this.minSideExpr(constraint)}, ${percent}%, ${this.maxSideExpr(constraint)})`:`${percent} 1 0%`);else{const adjustedPercent=percent+(redistributedShare[i]??0);this.applyOwnedPanelStyleValue(panel,snapshot,"flex",this.hasClampConstraint(constraint)?`0 1 clamp(${this.minSideExpr(constraint)}, ${percent}%, ${this.maxSideExpr(constraint)})`:`0 1 ${adjustedPercent}%`)}this.applyOwnedPanelStyleValue(panel,snapshot,"order",String(i*2)),collapsingIndex===i?this.applyOwnedPanelCollapseState(panel,snapshot,this.collapseState):this.applyOwnedPanelCollapseState(panel,snapshot,null)}),collapsingIndex!==-1?this.setAttribute("data-collapse-state",this.collapseState):this.removeAttribute("data-collapse-state"),this.justOpened&&(this.justOpened=!1,this.overlayHandle?.focusInitial())}render(){const dividers=[],bounds=this.resolveConstraintBounds(this.getContainerSize()).bounds;for(let i=0;i<this.panelCount-1;i++){const{min:valueMin,max:valueMax}=this.dividerValueRange(i,bounds),disabled=this.isDividerDisabled(i);dividers.push(html`<div
|
|
2
2
|
part="divider"
|
|
3
3
|
role="separator"
|
|
4
4
|
aria-label=${this.dividerLabel?this.dividerLabel(i,this.panelCount):this.localize("resizeDivider",void 0,{a:getNumberFormat(this.effectiveLocale).format(i+1),b:getNumberFormat(this.effectiveLocale).format(i+2)})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";const styles=css`:host{--_lr-multi-split-overlay-color:var(--lr-color-overlay);--_lr-multi-split-divider-target-size:max(var(--lr-icon-button-size), var(--lr-size-3px));block-size:100%;inline-size:100%;min-inline-size:0;max-inline-size:100%;display:block}[part=base]{block-size:100%;inline-size:100%;min-inline-size:0;max-inline-size:100%;display:flex;position:relative}::slotted(*){overflow-wrap:anywhere;flex:1 1 0;min-block-size:0;max-block-size:100%;
|
|
1
|
+
import{css}from"lit";const styles=css`:host{--_lr-multi-split-overlay-color:var(--lr-color-overlay);--_lr-multi-split-divider-target-size:max(var(--lr-icon-button-size), var(--lr-size-3px));block-size:100%;inline-size:100%;min-inline-size:0;max-inline-size:100%;display:block}[part=base]{--_lr-multi-split-panel-min:0;--_lr-multi-split-gutters:0;block-size:100%;inline-size:100%;min-inline-size:0;max-inline-size:100%;display:flex;position:relative}::slotted(*){min-inline-size:var(--_lr-multi-split-panel-min,0);overflow-wrap:anywhere;flex:1 1 0;min-block-size:0;max-block-size:100%;max-inline-size:100%;overflow:auto}:host([orientation=vertical]) [part=base]{flex-direction:column}:host([orientation=vertical]) ::slotted(*),:host([data-effective-orientation=vertical]) ::slotted(*){min-inline-size:0;min-block-size:var(--_lr-multi-split-panel-min,0)}:host([data-effective-orientation=horizontal]) ::slotted(*){min-inline-size:var(--_lr-multi-split-panel-min,0);min-block-size:0}[part=divider]{inline-size:var(--lr-multi-split-divider-target-size,var(--_lr-multi-split-divider-target-size));min-block-size:min(100%, var(--lr-multi-split-divider-target-size,var(--_lr-multi-split-divider-target-size)));cursor:col-resize;touch-action:none;background:0 0;flex:none;max-block-size:100%;position:relative}[part=divider]:before{content:"";inset-block:0;inset-inline:calc((100% - var(--lr-size-3px)) / 2);background:var(--lr-color-border);pointer-events:none;position:absolute}:host(:where([orientation=vertical])) [part=divider]{inline-size:100%;min-inline-size:min(100%, var(--lr-multi-split-divider-target-size,var(--_lr-multi-split-divider-target-size)));min-block-size:0;max-inline-size:100%;block-size:var(--lr-multi-split-divider-target-size,var(--_lr-multi-split-divider-target-size));cursor:row-resize}:host(:where([orientation=vertical])) [part=divider]:before{inset-block:calc((100% - var(--lr-size-3px)) / 2);inset-inline:0}:host([data-effective-orientation=vertical]) [part=base]{flex-direction:column}:host([data-effective-orientation=horizontal]) [part=base]{flex-direction:row}:host(:where([data-effective-orientation=vertical])) [part=divider]{inline-size:100%;min-inline-size:min(100%, var(--lr-multi-split-divider-target-size,var(--_lr-multi-split-divider-target-size)));min-block-size:0;max-inline-size:100%;block-size:var(--lr-multi-split-divider-target-size,var(--_lr-multi-split-divider-target-size));cursor:row-resize}:host(:where([data-effective-orientation=vertical])) [part=divider]:before{inset-block:calc((100% - var(--lr-size-3px)) / 2);inset-inline:0}:host(:where([data-effective-orientation=horizontal])) [part=divider]{inline-size:var(--lr-multi-split-divider-target-size,var(--_lr-multi-split-divider-target-size));min-block-size:min(100%, var(--lr-multi-split-divider-target-size,var(--_lr-multi-split-divider-target-size)));cursor:col-resize;block-size:auto;max-block-size:100%}:host(:where([data-effective-orientation=horizontal])) [part=divider]:before{inset-block:0;inset-inline:calc((100% - var(--lr-size-3px)) / 2)}[part=divider]:hover:before{background:var(--lr-color-brand)}[part=divider]:active:before{background:color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=divider]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=divider][aria-disabled=true]{cursor:default;pointer-events:none}::slotted([data-collapse-state=floating]){z-index:var(--lr-layer-content);background:var(--lr-color-surface);border-radius:var(--lr-radius);box-shadow:var(--lr-shadow-l);position:absolute;inset-block:0}:host([collapse=start]) ::slotted([data-collapse-state=floating]){inset-inline-start:0}:host([collapse=end]) ::slotted([data-collapse-state=floating]){inset-inline-end:0}[part=backdrop]{z-index:var(--lr-layer-base);background:var(--lr-multi-split-overlay-color,var(--_lr-multi-split-overlay-color));position:absolute;inset:0}::slotted([data-collapse-state=rail]){overflow:hidden}`;export{styles};
|
|
@@ -37,7 +37,8 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
|
|
|
37
37
|
export declare class LyraReorderItem extends LyraElement<LyraReorderItemEventMap>{static styles:import("lit").CSSResultGroup[];private readonly reorderInternals;private readonly moveUpLabelId;private readonly moveDownLabelId;private readonly itemLabelId;private owner;private ownerState;private contentObserver?;
|
|
38
38
|
/** Required unique, nonempty stable identifier included in the parent list's emitted
|
|
39
39
|
* `lr-reorder` order array. An owning list excludes an item with a missing, whitespace-only, or
|
|
40
|
-
* duplicate value from movement until its identity becomes valid.
|
|
40
|
+
* duplicate value from movement until its identity becomes valid. Direct property or attribute
|
|
41
|
+
* edits refresh the owner's movement boundaries. Removed standalone values render as absent. */
|
|
41
42
|
value:string;
|
|
42
43
|
/** Explicit item identity used to correlate this row's repeated move actions. When absent, a
|
|
43
44
|
* bounded accessible-text projection of the row content is used. */
|
|
@@ -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}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{nextId}from"../../../internal/a11y.js";import{composedAccessibilityTextResult}from"../../../internal/accessibility-visibility.js";import{chevronIcon}from"../../../internal/icons.js";import{setCustomState}from"../../../internal/custom-states.js";import{attachInternalsSafely}from"../../../internal/element-internals.js";import{styles}from"./reorder-item.styles.js";import{reorderOwnerUpdate}from"./reorder-owner.js";import{LYRA_DEFAULT_moveDown,LYRA_DEFAULT_moveUp}from"../../../internal/default-strings.generated.js";function isReorderOwnerState(value){if(typeof value!="object"||value===null)return!1;const candidate=value;return typeof candidate.atStart=="boolean"&&typeof candidate.atEnd=="boolean"&&typeof candidate.listDisabled=="boolean"&&typeof candidate.pending=="boolean"&&typeof candidate.busy=="boolean"&&typeof candidate.validIdentity=="boolean"}class LyraReorderItem extends LyraElement{constructor(){super(...arguments),this.reorderInternals=attachInternalsSafely(this),this.moveUpLabelId=nextId("reorder-move-up"),this.moveDownLabelId=nextId("reorder-move-down"),this.itemLabelId=nextId("reorder-item-label"),this.owner=null,this.ownerState={atStart:!1,atEnd:!1,listDisabled:!1,pending:!1,busy:!1,validIdentity:!1},this.value="",this.disabled=!1,this.onMoveUpClick=()=>{this.moveUpDisabled||this.emit("lr-move-request",{direction:"up"})},this.onMoveDownClick=()=>{this.moveDownDisabled||this.emit("lr-move-request",{direction:"down"})}}static{this.defaultStrings={...super.defaultStrings,moveDown:LYRA_DEFAULT_moveDown,moveUp:LYRA_DEFAULT_moveUp}}static{this.styles=[LyraElement.styles,styles]}get atStart(){return this.ownerState.atStart}get atEnd(){return this.ownerState.atEnd}get listDisabled(){return this.ownerState.listDisabled}get pending(){return this.ownerState.pending}[reorderOwnerUpdate](owner,state){if(!isReorderOwnerState(state)){this.owner===owner&&(this.owner=null,this.setOwnerState({atStart:!1,atEnd:!1,listDisabled:!1,pending:!1,busy:!1,validIdentity:!1}));return}this.owner=owner,this.setOwnerState(state)}setOwnerState(state){const previous=this.ownerState;previous.atStart===state.atStart&&previous.atEnd===state.atEnd&&previous.listDisabled===state.listDisabled&&previous.pending===state.pending&&previous.busy===state.busy&&previous.validIdentity===state.validIdentity||(this.ownerState=state,setCustomState(this.reorderInternals,"at-start",state.atStart),setCustomState(this.reorderInternals,"at-end",state.atEnd),setCustomState(this.reorderInternals,"list-disabled",state.listDisabled),setCustomState(this.reorderInternals,"pending",state.pending),setCustomState(this.reorderInternals,"busy",state.busy),setCustomState(this.reorderInternals,"invalid-identity",!state.validIdentity),this.requestUpdate())}get moveUpDisabled(){const hasValidIdentity=this.owner===null?this.value.trim().length>0:this.ownerState.validIdentity;return this.disabled||this.listDisabled||this.ownerState.busy||!hasValidIdentity||this.atStart}get moveDownDisabled(){const hasValidIdentity=this.owner===null?this.value.trim().length>0:this.ownerState.validIdentity;return this.disabled||this.listDisabled||this.ownerState.busy||!hasValidIdentity||this.atEnd}get resolvedItemLabel(){return this.accessibleLabel!==void 0?this.accessibleLabel:composedAccessibilityTextResult(this.childNodes,{ancestorBoundary:this,maxCharacters:256,maxDepth:16,maxNodes:128,requireRendered:!1,skipRootAncestorValidation:!0}).text}refreshContentObserver(){this.contentObserver?.disconnect();const Observer=this.ownerDocument.defaultView?.MutationObserver;!Observer||!this.isConnected||(this.contentObserver=new Observer(()=>this.requestUpdate()),this.contentObserver.observe(this,{attributes:!0,childList:!0,characterData:!0,subtree:!0,attributeFilter:["alt","aria-label","aria-labelledby","hidden","inert","title"]}))}connectedCallback(){super.connectedCallback(),this.refreshContentObserver()}disconnectedCallback(){this.contentObserver?.disconnect(),this.contentObserver=void 0,super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),this.setAttribute("role","listitem")}render(){const itemLabel=this.resolvedItemLabel;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}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{nextId}from"../../../internal/a11y.js";import{composedAccessibilityTextResult}from"../../../internal/accessibility-visibility.js";import{chevronIcon}from"../../../internal/icons.js";import{setCustomState}from"../../../internal/custom-states.js";import{attachInternalsSafely}from"../../../internal/element-internals.js";import{styles}from"./reorder-item.styles.js";import{reorderIdentityChange,reorderOwnerUpdate}from"./reorder-owner.js";import{LYRA_DEFAULT_moveDown,LYRA_DEFAULT_moveUp}from"../../../internal/default-strings.generated.js";function isReorderOwnerState(value){if(typeof value!="object"||value===null)return!1;const candidate=value;return typeof candidate.atStart=="boolean"&&typeof candidate.atEnd=="boolean"&&typeof candidate.listDisabled=="boolean"&&typeof candidate.pending=="boolean"&&typeof candidate.busy=="boolean"&&typeof candidate.validIdentity=="boolean"}class LyraReorderItem extends LyraElement{constructor(){super(...arguments),this.reorderInternals=attachInternalsSafely(this),this.moveUpLabelId=nextId("reorder-move-up"),this.moveDownLabelId=nextId("reorder-move-down"),this.itemLabelId=nextId("reorder-item-label"),this.owner=null,this.ownerState={atStart:!1,atEnd:!1,listDisabled:!1,pending:!1,busy:!1,validIdentity:!1},this.value="",this.disabled=!1,this.onMoveUpClick=()=>{this.moveUpDisabled||this.emit("lr-move-request",{direction:"up"})},this.onMoveDownClick=()=>{this.moveDownDisabled||this.emit("lr-move-request",{direction:"down"})}}static{this.defaultStrings={...super.defaultStrings,moveDown:LYRA_DEFAULT_moveDown,moveUp:LYRA_DEFAULT_moveUp}}static{this.styles=[LyraElement.styles,styles]}get atStart(){return this.ownerState.atStart}get atEnd(){return this.ownerState.atEnd}get listDisabled(){return this.ownerState.listDisabled}get pending(){return this.ownerState.pending}[reorderOwnerUpdate](owner,state){if(!isReorderOwnerState(state)){this.owner===owner&&(this.owner=null,this.setOwnerState({atStart:!1,atEnd:!1,listDisabled:!1,pending:!1,busy:!1,validIdentity:!1}));return}this.owner=owner,this.setOwnerState(state)}setOwnerState(state){const previous=this.ownerState;previous.atStart===state.atStart&&previous.atEnd===state.atEnd&&previous.listDisabled===state.listDisabled&&previous.pending===state.pending&&previous.busy===state.busy&&previous.validIdentity===state.validIdentity||(this.ownerState=state,setCustomState(this.reorderInternals,"at-start",state.atStart),setCustomState(this.reorderInternals,"at-end",state.atEnd),setCustomState(this.reorderInternals,"list-disabled",state.listDisabled),setCustomState(this.reorderInternals,"pending",state.pending),setCustomState(this.reorderInternals,"busy",state.busy),setCustomState(this.reorderInternals,"invalid-identity",!state.validIdentity),this.requestUpdate())}get moveUpDisabled(){const hasValidIdentity=this.owner===null?(this.value??"").trim().length>0:this.ownerState.validIdentity;return this.disabled||this.listDisabled||this.ownerState.busy||!hasValidIdentity||this.atStart}get moveDownDisabled(){const hasValidIdentity=this.owner===null?(this.value??"").trim().length>0:this.ownerState.validIdentity;return this.disabled||this.listDisabled||this.ownerState.busy||!hasValidIdentity||this.atEnd}get resolvedItemLabel(){return this.accessibleLabel!==void 0?this.accessibleLabel:composedAccessibilityTextResult(this.childNodes,{ancestorBoundary:this,maxCharacters:256,maxDepth:16,maxNodes:128,requireRendered:!1,skipRootAncestorValidation:!0}).text}refreshContentObserver(){this.contentObserver?.disconnect();const Observer=this.ownerDocument.defaultView?.MutationObserver;!Observer||!this.isConnected||(this.contentObserver=new Observer(()=>this.requestUpdate()),this.contentObserver.observe(this,{attributes:!0,childList:!0,characterData:!0,subtree:!0,attributeFilter:["alt","aria-label","aria-labelledby","hidden","inert","title"]}))}connectedCallback(){super.connectedCallback(),this.refreshContentObserver()}disconnectedCallback(){this.contentObserver?.disconnect(),this.contentObserver=void 0,super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),changed.has("value")&&this.owner?.[reorderIdentityChange]?.(this),this.setAttribute("role","listitem")}render(){const itemLabel=this.resolvedItemLabel;return html`
|
|
2
2
|
<div part="base">
|
|
3
3
|
<span id=${this.moveUpLabelId} hidden>${this.localize("moveUp")}</span>
|
|
4
4
|
<span id=${this.moveDownLabelId} hidden
|
|
@@ -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,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.pendingFocusTarget=null,this.focusRestoreGeneration=0,this.stateItems=new Set,this.moveToken=0,this.pendingMove=null,this.onSlotChange=()=>{this.pendingMove&&this.pendingMove.phase==="held"&&!this.pendingMembershipIsCurrent()&&this.revertPendingMove(),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 instanceof HTMLButtonElement&&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||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),busy=this.pendingMove?.phase==="held",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:busy&&this.pendingMove?.item===item,busy,validIdentity:validItems.has(item)})}),this.stateItems=nextStateItems,this.requestUpdate()}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()}disconnectedCallback(){this.itemObserver?.disconnect(),this.itemObserver=void 0,this.pendingFocusTarget=null,this.focusRestoreGeneration+=1,this.pendingMove=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 button=focusTarget.item.shadowRoot?.querySelector(`[part='${focusTarget.buttonPart}']`);button?.disabled||button?.focus()}applyMove(item,direction,_fromIndex,toIndex){const target=this.itemElements[toIndex];direction==="up"?this.insertBefore(item,target):this.insertBefore(item,target.nextElementSibling),this.syncBoundaryState();const buttonPart=(direction==="up"?item.atStart:item.atEnd)?direction==="up"?"move-down-button":"move-up-button":direction==="up"?"move-up-button":"move-down-button";this.pendingFocusTarget={item,buttonPart},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})}moveItem(item,direction){if(this.disabled||item.disabled||this.pendingMove)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 transaction={token:++this.moveToken,phase:"dispatching",resolution:null,item,target:items[toIndex],direction,fromIndex,toIndex,members:[...items],values:items.map(member=>member.value)};this.pendingMove=transaction;const event=this.emit("lr-reorder",Object.freeze({order:this.orderValues(reordered),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.applyMove(item,direction,fromIndex,toIndex);return}this.pendingMove={...transaction,phase:"held"},this.syncBoundaryState(),this.liveRegion?.announce(this.localize("reorderMovePending"),{force:!0});return}this.pendingMove=null,this.syncBoundaryState(),this.applyMove(item,direction,fromIndex,toIndex)}}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}=this.pendingMove;this.pendingMove=null,this.syncBoundaryState(),this.applyMove(item,direction,fromIndex,toIndex)}revertPendingMove(){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&&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";class LyraReorderList extends LyraElement{constructor(){super(...arguments),this.label="",this.disabled=!1,this.pendingFocusTarget=null,this.focusRestoreGeneration=0,this.stateItems=new Set,this.moveToken=0,this.pendingMove=null,this.onSlotChange=()=>{this.pendingMove&&this.pendingMove.phase==="held"&&!this.pendingMembershipIsCurrent()&&this.revertPendingMove(),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 instanceof HTMLButtonElement&&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||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),busy=this.pendingMove?.phase==="held",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:busy&&this.pendingMove?.item===item,busy,validIdentity:validItems.has(item)})}),this.stateItems=nextStateItems,this.requestUpdate()}[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()}disconnectedCallback(){this.itemObserver?.disconnect(),this.itemObserver=void 0,this.pendingFocusTarget=null,this.focusRestoreGeneration+=1,this.pendingMove=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 button=focusTarget.item.shadowRoot?.querySelector(`[part='${focusTarget.buttonPart}']`);button?.disabled||button?.focus()}applyMove(item,direction,_fromIndex,toIndex){const target=this.itemElements[toIndex];direction==="up"?this.insertBefore(item,target):this.insertBefore(item,target.nextElementSibling),this.syncBoundaryState();const buttonPart=(direction==="up"?item.atStart:item.atEnd)?direction==="up"?"move-down-button":"move-up-button":direction==="up"?"move-up-button":"move-down-button";this.pendingFocusTarget={item,buttonPart},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})}moveItem(item,direction){if(this.disabled||item.disabled||this.pendingMove)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 transaction={token:++this.moveToken,phase:"dispatching",resolution:null,item,target:items[toIndex],direction,fromIndex,toIndex,members:[...items],values:items.map(member=>member.value)};this.pendingMove=transaction;const event=this.emit("lr-reorder",Object.freeze({order:this.orderValues(reordered),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.applyMove(item,direction,fromIndex,toIndex);return}this.pendingMove={...transaction,phase:"held"},this.syncBoundaryState(),this.liveRegion?.announce(this.localize("reorderMovePending"),{force:!0});return}this.pendingMove=null,this.syncBoundaryState(),this.applyMove(item,direction,fromIndex,toIndex)}}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}=this.pendingMove;this.pendingMove=null,this.syncBoundaryState(),this.applyMove(item,direction,fromIndex,toIndex)}revertPendingMove(){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&&this.liveRegion?.announce(this.localize("reorderMoveCancelled"),{force:!0})}render(){return html`
|
|
2
2
|
<div
|
|
3
3
|
part="base"
|
|
4
4
|
role="list"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const reorderOwnerUpdate=Symbol("lyra-reorder-owner-update");function updateReorderOwnerState(item,owner,state){item[reorderOwnerUpdate](owner,state)}function releaseReorderOwnerState(item,owner){item[reorderOwnerUpdate](owner)}export{releaseReorderOwnerState,reorderOwnerUpdate,updateReorderOwnerState};
|
|
1
|
+
const reorderOwnerUpdate=Symbol("lyra-reorder-owner-update"),reorderIdentityChange=Symbol("lyra-reorder-identity-change");function updateReorderOwnerState(item,owner,state){item[reorderOwnerUpdate](owner,state)}function releaseReorderOwnerState(item,owner){item[reorderOwnerUpdate](owner)}export{releaseReorderOwnerState,reorderIdentityChange,reorderOwnerUpdate,updateReorderOwnerState};
|
|
@@ -31,7 +31,8 @@ positionInPixels:number;}export interface LyraSplitPanelEventMap{
|
|
|
31
31
|
* @slot divider - Optional decorative content rendered inside the draggable divider. Assigned
|
|
32
32
|
* content is inert, so the separator remains the sole resize control.
|
|
33
33
|
* @event lr-reposition-request - A cancelable proposed divider position from a pointer drag or
|
|
34
|
-
* keyboard interaction.
|
|
34
|
+
* keyboard interaction. Both detail values measure from the selected primary edge and match
|
|
35
|
+
* accepted public readback. Call `preventDefault()` to keep `position` unchanged. Not fired when a
|
|
35
36
|
* consumer sets `position` or `positionInPixels` directly. `detail: LyraSplitPanelRepositionDetail`.
|
|
36
37
|
* @event lr-reposition - Non-cancelable post-commit notification after a pointer or keyboard
|
|
37
38
|
* interaction moves the divider. Not fired when a consumer sets `position` or
|
|
@@ -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}from"lit";import{property,query}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{finiteRange}from"../../../internal/numbers.js";import{styles}from"./split-panel.styles.js";import{LYRA_DEFAULT_resizeDivider,LYRA_DEFAULT_resizeValuePercent}from"../../../internal/default-strings.generated.js";const DEFAULT_POSITION=50,DEFAULT_SNAP_THRESHOLD=12,KEYBOARD_STEP_PERCENT=1,MAX_SNAP_SOURCE_CODE_UNITS=16384,MAX_SNAP_TOKENS=256,POSITION_EPSILON=1e-4,SNAP_NONE=({pos})=>pos,snapConverter={fromAttribute(value){return value??""},toAttribute(value){return typeof value=="string"&&value!==""?value:null}};function isAsciiDigit(code){return code>=48&&code<=57}function matchesAsciiToken(source,index,token){if(index+token.length>source.length)return!1;for(let offset=0;offset<token.length;offset+=1){const sourceCode=source.charCodeAt(index+offset);if((sourceCode>=65&&sourceCode<=90?sourceCode+32:sourceCode)!==token.charCodeAt(offset))return!1}return!0}function isSnapWhitespace(code){return code>=9&&code<=13||code===32||code===160||code===5760||code>=8192&&code<=8202||code===8232||code===8233||code===8239||code===8287||code===12288||code===65279}function skipSnapWhitespace(source,start){let cursor=start;for(;cursor<source.length&&isSnapWhitespace(source.charCodeAt(cursor));)cursor+=1;return cursor}function scanSnapLength(source,start){let cursor=start;if(isAsciiDigit(source.charCodeAt(cursor))){for(;isAsciiDigit(source.charCodeAt(cursor));)cursor+=1;if(source.charCodeAt(cursor)===46&&isAsciiDigit(source.charCodeAt(cursor+1)))for(cursor+=2;isAsciiDigit(source.charCodeAt(cursor));)cursor+=1}else if(source.charCodeAt(cursor)===46&&isAsciiDigit(source.charCodeAt(cursor+1)))for(cursor+=2;isAsciiDigit(source.charCodeAt(cursor));)cursor+=1;else return{end:start+1,recognized:!1};const numberEnd=cursor;let unit;if(source.charCodeAt(cursor)===37?(unit="%",cursor+=1):matchesAsciiToken(source,cursor,"px")&&(unit="px",cursor+=2),unit===void 0)return{end:Math.max(start+1,numberEnd),recognized:!1};const numericValue=Number(source.slice(start,numberEnd));return{end:cursor,recognized:!0,token:Number.isFinite(numericValue)?Object.freeze({value:numericValue,unit}):void 0}}function normalizeSnapTokens(value){const source=value.slice(0,MAX_SNAP_SOURCE_CODE_UNITS),tokens=[];let index=0;for(;index<source.length&&tokens.length<MAX_SNAP_TOKENS;){if(matchesAsciiToken(source,index,"repeat(")){const innerStart=skipSnapWhitespace(source,index+7),scanned2=scanSnapLength(source,innerStart);if(scanned2.recognized){const close=skipSnapWhitespace(source,scanned2.end);if(source.charCodeAt(close)===41){scanned2.token&&tokens.push(Object.freeze({repeated:!0,...scanned2.token})),index=close+1;continue}scanned2.token&&tokens.push(Object.freeze({repeated:!1,...scanned2.token}))}index=Math.max(index+7,scanned2.end);continue}const scanned=scanSnapLength(source,index);scanned.recognized&&scanned.token&&tokens.push(Object.freeze({repeated:!1,...scanned.token})),index=Math.max(index+1,scanned.end)}return Object.freeze(tokens)}function nearlyEqual(left,right){return left===right?!0:left==null||right==null?!1:Math.abs(left-right)<=POSITION_EPSILON}class LyraSplitPanel extends LyraElement{constructor(){super(...arguments),this._startPosition=DEFAULT_POSITION,this._orientation="horizontal",this._snapThreshold=DEFAULT_SNAP_THRESHOLD,this.availableSize=0,this.dividerSourceSnapshots=new Map,this.dividerSourceObserverGeneration=0,this.cachedNormalizedSnapTokens=Object.freeze([]),this.disabled=!1,this._snap="",this.onWindowResize=()=>{this.measureAndSynchronize(!1)},this.onDividerSlotChange=()=>{this.syncDividerSources()},this.onPointerMove=event=>{const drag=this.drag;if(!drag||event.pointerId!==drag.pointerId||this.disabled)return;let delta=this.pointerCoordinate(event)-drag.startCoordinate;this.effectiveOrientation==="horizontal"&&this.effectiveDirection==="rtl"&&(delta*=-1),this.primary==="end"&&(delta*=-1),this.requestReposition(drag.startPrimaryPixels+delta,!0)},this.onPointerEnd=event=>{!this.drag||event.pointerId!==this.drag.pointerId||this.stopDragging()}}static{this.defaultStrings={...super.defaultStrings,resizeDivider:LYRA_DEFAULT_resizeDivider,resizeValuePercent:LYRA_DEFAULT_resizeValuePercent}}static{this.styles=[LyraElement.styles,styles]}get position(){const start=finiteRange(this._startPosition,DEFAULT_POSITION,0,100);return this.primary==="end"?100-start:start}set position(value){const oldPosition=this.position,oldPixels=this.positionInPixels,next=finiteRange(value,DEFAULT_POSITION,0,100);this.pendingPositionInPixels=void 0;const layoutSize=this.measuredLayoutSize();if(layoutSize>0){this.availableSize=layoutSize,this.applyPrimaryPixels(next/100*layoutSize,!1,oldPosition,oldPixels);return}this._startPosition=this.primary==="end"?100-next:next,this.preservedPrimaryPixels=void 0,this.requestSynchronizedUpdate(oldPosition,oldPixels)}get positionInPixels(){return this.pendingPositionInPixels!=null?this.pendingPositionInPixels:this.availableSize<=0?0:this.position/100*this.availableSize}set positionInPixels(value){const oldPosition=this.position,oldPixels=this.positionInPixels;if(value==null){this.pendingPositionInPixels=void 0,this.preservedPrimaryPixels=this.availableSize>0?this.positionInPixels:void 0,this.requestSynchronizedUpdate(oldPosition,oldPixels);return}const fallback=this.positionInPixels??DEFAULT_POSITION/100*this.availableSize,layoutSize=this.measuredLayoutSize(),next=finiteRange(value,fallback,0,layoutSize>0?layoutSize:Number.MAX_VALUE);if(layoutSize>0){this.availableSize=layoutSize,this.applyPrimaryPixels(next,!1,oldPosition,oldPixels);return}this.pendingPositionInPixels=next,this.preservedPrimaryPixels=next,this.requestSynchronizedUpdate(oldPosition,oldPixels)}get orientation(){return this._orientation}set orientation(value){const next=value==="vertical"?"vertical":"horizontal";if(next===this._orientation)return;const old=this._orientation,oldVertical=this.vertical;this._orientation=next,this.requestUpdate("orientation",old),this.requestUpdate("vertical",oldVertical)}get vertical(){return this.orientation==="vertical"}set vertical(value){this.orientation=value?"vertical":"horizontal"}get primary(){return this._primary}set primary(value){const next=value==="start"||value==="end"?value:void 0;if(next===this._primary)return;this.stopDragging();const oldPrimary=this._primary,oldPosition=this.position,oldPixels=this.positionInPixels,layoutSize=this.measuredLayoutSize(),referencePixels=layoutSize>0&&!oldPrimary?oldPosition/100*layoutSize:oldPixels;this._primary=next,layoutSize>0?(this.availableSize=layoutSize,this.applyPrimaryPixels(referencePixels,!1,oldPosition,oldPixels)):(this._startPosition=next==="end"?100-oldPosition:oldPosition,this.preservedPrimaryPixels=this.pendingPositionInPixels??oldPixels),this.requestUpdate("primary",oldPrimary)}get snap(){return this._snap}set snap(value){const old=this._snap;this._snap=value??"",this.requestUpdate("snap",old)}get snapThreshold(){return this._snapThreshold}set snapThreshold(value){const old=this._snapThreshold;this._snapThreshold=finiteRange(value,DEFAULT_SNAP_THRESHOLD,0,Number.MAX_VALUE),this.requestUpdate("snapThreshold",old)}get effectiveOrientation(){return this.orientation}measuredLayoutSize(){return this.isConnected?this.axisSize(this.baseElement):0}connectedCallback(){const authoredOrientation=this.getAttribute("orientation");super.connectedCallback(),authoredOrientation!==null&&(this.orientation=authoredOrientation==="vertical"?"vertical":"horizontal"),this.hasUpdated&&queueMicrotask(()=>{this.isConnected&&(this.syncDividerSources(),this.observeSize(),this.measureAndSynchronize(!1))})}disconnectedCallback(){this.stopDragging(),this.resetDividerSourceObserver(),this.restoreDividerSources(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0,super.disconnectedCallback()}firstUpdated(changed){super.firstUpdated(changed),this.syncDividerSources(),this.measureAndSynchronize(!0),this.observeSize()}updated(changed){super.updated(changed),changed.has("disabled")&&this.disabled&&this.stopDragging(),(changed.has("orientation")||changed.has("vertical"))&&(this.stopDragging(),this.measureAndSynchronize(!1))}requestSynchronizedUpdate(oldPosition,oldPixels){nearlyEqual(oldPosition,this.position)||this.requestUpdate("position",oldPosition),nearlyEqual(oldPixels,this.positionInPixels)||this.requestUpdate("positionInPixels",oldPixels)}axisSize(element){if(!element)return 0;const rect=element.getBoundingClientRect(),measured=this.effectiveOrientation==="vertical"?rect.height:rect.width;return finiteRange(measured,0,0,Number.MAX_VALUE)}constraintBounds(){const size=this.availableSize,min=finiteRange(this.axisSize(this.minProbe),0,0,size),rawMax=this.maxProbe?this.axisSize(this.maxProbe):size,max=finiteRange(rawMax,size,min,size);return{min,max}}resolvePrimaryPixels(requestedPixels,useSnap,fallbackPixels){const size=this.availableSize,proposed=finiteRange(requestedPixels,fallbackPixels??DEFAULT_POSITION/100*size,0,size),snapped=useSnap?this.applySnap(proposed,size):proposed,{min,max}=this.constraintBounds();return finiteRange(snapped,proposed,min,max)}applyPrimaryPixels(requestedPixels,useSnap,oldPosition=this.position,oldPixels=this.positionInPixels,scheduleUpdate=!0,resolvedPrimaryPixels){const size=this.availableSize;if(size<=0)return this.pendingPositionInPixels=finiteRange(requestedPixels,0,0,Number.MAX_VALUE),this.preservedPrimaryPixels=this.pendingPositionInPixels,scheduleUpdate&&this.requestSynchronizedUpdate(oldPosition,oldPixels),!1;const primaryPixels=resolvedPrimaryPixels??this.resolvePrimaryPixels(requestedPixels,useSnap,oldPixels),primaryPercent=primaryPixels/size*100;return this._startPosition=this.primary==="end"?100-primaryPercent:primaryPercent,this.pendingPositionInPixels=void 0,this.preservedPrimaryPixels=primaryPixels,scheduleUpdate&&this.requestSynchronizedUpdate(oldPosition,oldPixels),!nearlyEqual(oldPosition,this.position)||!nearlyEqual(oldPixels,this.positionInPixels)}requestReposition(requestedPixels,useSnap){if(this.availableSize<=0)return!1;const oldPosition=this.position,oldPixels=this.positionInPixels,primaryPixels=this.resolvePrimaryPixels(requestedPixels,useSnap,oldPixels),primaryPercent=primaryPixels/this.availableSize*100,position=this.primary==="end"?100-primaryPercent:primaryPercent;return nearlyEqual(oldPosition,position)&&nearlyEqual(oldPixels,primaryPixels)||this.emit("lr-reposition-request",{position,positionInPixels:primaryPixels},{cancelable:!0}).defaultPrevented||!this.applyPrimaryPixels(requestedPixels,useSnap,oldPosition,oldPixels,!0,primaryPixels)?!1:(this.emit("lr-reposition",null),!0)}measureAndSynchronize(initial){const nextSize=this.axisSize(this.baseElement);if(nextSize<=0)return;const oldPosition=this.position,oldPixels=this.positionInPixels,pending=this.pendingPositionInPixels,preserved=this.preservedPrimaryPixels,sizeChanged=!nearlyEqual(this.availableSize,nextSize);this.availableSize=nextSize,pending!=null?this.applyPrimaryPixels(pending,!1,oldPosition,oldPixels,!1):!initial&&sizeChanged&&this.primary&&preserved!=null?this.applyPrimaryPixels(preserved,!1,oldPosition,oldPixels,!1):this.applyPrimaryPixels(this.position/100*nextSize,!1,oldPosition,oldPixels,!1),this.synchronizeMeasuredDom()}synchronizeMeasuredDom(){const startPosition=finiteRange(this._startPosition,DEFAULT_POSITION,0,100);if(this.baseElement?.style.setProperty("--_lr-split-panel-start-position",`${startPosition}%`),this.dividerElement){const bounds=this.ariaBounds,position=Math.round(this.position);this.dividerElement.setAttribute("aria-valuenow",String(position)),this.dividerElement.setAttribute("aria-valuetext",this.resizeValueText(position)),this.dividerElement.setAttribute("aria-valuemin",String(Math.round(bounds.min))),this.dividerElement.setAttribute("aria-valuemax",String(Math.round(bounds.max)))}const reflectedPosition=String(this.position);this.getAttribute("position")!==reflectedPosition&&this.setAttribute("position",reflectedPosition)}observeSize(){if(this.resizeObserver||this.resizeView||!this.isConnected)return;const view=this.ownerDocument.defaultView,ResizeObserverConstructor=view?.ResizeObserver;if(ResizeObserverConstructor){this.resizeObserver=new ResizeObserverConstructor(()=>this.measureAndSynchronize(!1)),this.baseElement&&this.resizeObserver.observe(this.baseElement),this.minProbe&&this.resizeObserver.observe(this.minProbe),this.maxProbe&&this.resizeObserver.observe(this.maxProbe);return}view&&(this.resizeView=view,view.addEventListener("resize",this.onWindowResize))}snapshotDividerSource(source){const inert=source.getAttribute("inert");return{inert,appliedInert:inert}}adoptDividerSourceInert(source,snapshot){const current=source.getAttribute("inert");current!==snapshot.appliedInert&&(snapshot.inert=current)}makeDividerSourceInert(source,snapshot){source.hasAttribute("inert")||source.setAttribute("inert",""),snapshot.appliedInert=source.getAttribute("inert")}restoreDividerSource(source,snapshot){this.adoptDividerSourceInert(source,snapshot),snapshot.inert===null?source.removeAttribute("inert"):source.setAttribute("inert",snapshot.inert)}restoreDividerSources(){for(const[source,snapshot]of this.dividerSourceSnapshots)this.restoreDividerSource(source,snapshot);this.dividerSourceSnapshots.clear()}resetDividerSourceObserver(){this.dividerSourceObserverGeneration+=1,this.dividerSourceObserver?.disconnect(),this.dividerSourceObserver=void 0,this.dividerSourceObserverDocument=void 0}observeDividerSources(){this.resetDividerSourceObserver();const MutationObserverConstructor=this.ownerDocument.defaultView?.MutationObserver;if(!MutationObserverConstructor||!this.isConnected||this.dividerSourceSnapshots.size===0)return;const generation=this.dividerSourceObserverGeneration,observer=new MutationObserverConstructor(records=>{this.dividerSourceObserver!==observer||this.dividerSourceObserverDocument!==this.ownerDocument||this.dividerSourceObserverGeneration!==generation||!this.isConnected||records.some(record=>this.dividerSourceSnapshots.has(record.target))&&this.syncDividerSources()});this.dividerSourceObserver=observer,this.dividerSourceObserverDocument=this.ownerDocument;for(const source of this.dividerSourceSnapshots.keys())observer.observe(source,{attributes:!0,attributeFilter:["inert"]})}syncDividerSources(){const assigned=new Set(this.dividerSlot?.assignedElements({flatten:!0})??[]);for(const[source,snapshot]of this.dividerSourceSnapshots)this.adoptDividerSourceInert(source,snapshot),assigned.has(source)||(this.restoreDividerSource(source,snapshot),this.dividerSourceSnapshots.delete(source));for(const source of assigned){const snapshot=this.dividerSourceSnapshots.get(source)??this.snapshotDividerSource(source);this.dividerSourceSnapshots.set(source,snapshot),this.adoptDividerSourceInert(source,snapshot),this.makeDividerSourceInert(source,snapshot)}this.observeDividerSources()}resolveNormalizedSnapLength(token,size){const resolved=token.unit==="%"?token.value/100*size:token.value;return Number.isFinite(resolved)&&resolved>=0?resolved:void 0}get normalizedSnapTokens(){const source=typeof this.snap=="string"?this.snap:"";return source===this.normalizedSnapSource?this.cachedNormalizedSnapTokens:(this.normalizedSnapSource=source,this.cachedNormalizedSnapTokens=normalizeSnapTokens(source),this.cachedNormalizedSnapTokens)}applySnap(position,size){const threshold=finiteRange(this.snapThreshold,DEFAULT_SNAP_THRESHOLD,0,Number.MAX_VALUE);if(typeof this.snap=="function")try{return finiteRange(this.snap({pos:position,size,snapThreshold:threshold}),position,0,size)}catch{return position}const tokens=this.normalizedSnapTokens;if(tokens.length===0)return position;let nearest=position,nearestDistance=Number.POSITIVE_INFINITY;for(const token of tokens){const point=this.resolveNormalizedSnapLength(token,size);if(point==null||point<0)continue;const candidates=token.repeated?[Math.floor(position/point)*point,Math.round(position/point)*point,Math.ceil(position/point)*point]:[point];for(const candidate of candidates){if(!Number.isFinite(candidate)||candidate<0||candidate>size)continue;const distance=Math.abs(position-candidate);distance<nearestDistance&&(nearest=candidate,nearestDistance=distance)}}return nearestDistance<=threshold?nearest:position}pointerCoordinate(event){return this.effectiveOrientation==="vertical"?event.clientY:event.clientX}onPointerDown(event){if(this.disabled||this.drag||event.button!==0)return;const primaryPixels=this.positionInPixels;if(primaryPixels==null||this.availableSize<=0)return;event.preventDefault(),this.drag={pointerId:event.pointerId,startCoordinate:this.pointerCoordinate(event),startPrimaryPixels:primaryPixels},this.dividerElement?.setAttribute("data-dragging","");try{event.currentTarget.setPointerCapture(event.pointerId)}catch{}const view=this.ownerDocument.defaultView;this.dragView=view??void 0,view?.addEventListener("pointermove",this.onPointerMove),view?.addEventListener("pointerup",this.onPointerEnd),view?.addEventListener("pointercancel",this.onPointerEnd)}onLostPointerCapture(event){!this.drag||event.pointerId!==this.drag.pointerId||this.stopDragging()}stopDragging(){const pointerId=this.drag?.pointerId;if(this.drag=void 0,this.dividerElement?.removeAttribute("data-dragging"),this.dragView?.removeEventListener("pointermove",this.onPointerMove),this.dragView?.removeEventListener("pointerup",this.onPointerEnd),this.dragView?.removeEventListener("pointercancel",this.onPointerEnd),this.dragView=void 0,pointerId!=null&&this.dividerElement?.hasPointerCapture(pointerId))try{this.dividerElement.releasePointerCapture(pointerId)}catch{}}onKeyDown(event){if(this.disabled||this.availableSize<=0)return;const current=this.positionInPixels;if(current==null)return;let next;const{min,max}=this.constraintBounds();if(event.key==="Home")next=min;else if(event.key==="End")next=max;else{let physicalDirection=0;if(this.effectiveOrientation==="vertical"?event.key==="ArrowDown"?physicalDirection=1:event.key==="ArrowUp"&&(physicalDirection=-1):event.key==="ArrowRight"?physicalDirection=this.effectiveDirection==="rtl"?-1:1:event.key==="ArrowLeft"&&(physicalDirection=this.effectiveDirection==="rtl"?1:-1),physicalDirection!==0){const primaryDirection=this.primary==="end"?-physicalDirection:physicalDirection;next=current+primaryDirection*KEYBOARD_STEP_PERCENT*this.availableSize/100}}next!=null&&(event.preventDefault(),this.requestReposition(next,!1))}get separatorLabel(){const hostLabel=this.getAttribute("aria-label");if(hostLabel!==null)return hostLabel;const number=getNumberFormat(this.effectiveLocale);return this.localize("resizeDivider",void 0,{a:number.format(1),b:number.format(2)})}resizeValueText(position){return this.localize("resizeValuePercent",void 0,{value:getNumberFormat(this.effectiveLocale).format(Math.round(position))})}get ariaBounds(){if(this.availableSize<=0)return{min:0,max:100};const bounds=this.constraintBounds();return{min:bounds.min/this.availableSize*100,max:bounds.max/this.availableSize*100}}render(){const orientation=this.effectiveOrientation,startPosition=finiteRange(this._startPosition,DEFAULT_POSITION,0,100),ariaBounds=this.ariaBounds,position=Math.round(this.position);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}from"lit";import{property,query}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{finiteRange}from"../../../internal/numbers.js";import{styles}from"./split-panel.styles.js";import{LYRA_DEFAULT_resizeDivider,LYRA_DEFAULT_resizeValuePercent}from"../../../internal/default-strings.generated.js";const DEFAULT_POSITION=50,DEFAULT_SNAP_THRESHOLD=12,KEYBOARD_STEP_PERCENT=1,MAX_SNAP_SOURCE_CODE_UNITS=16384,MAX_SNAP_TOKENS=256,POSITION_EPSILON=1e-4,SNAP_NONE=({pos})=>pos,snapConverter={fromAttribute(value){return value??""},toAttribute(value){return typeof value=="string"&&value!==""?value:null}};function isAsciiDigit(code){return code>=48&&code<=57}function matchesAsciiToken(source,index,token){if(index+token.length>source.length)return!1;for(let offset=0;offset<token.length;offset+=1){const sourceCode=source.charCodeAt(index+offset);if((sourceCode>=65&&sourceCode<=90?sourceCode+32:sourceCode)!==token.charCodeAt(offset))return!1}return!0}function isSnapWhitespace(code){return code>=9&&code<=13||code===32||code===160||code===5760||code>=8192&&code<=8202||code===8232||code===8233||code===8239||code===8287||code===12288||code===65279}function skipSnapWhitespace(source,start){let cursor=start;for(;cursor<source.length&&isSnapWhitespace(source.charCodeAt(cursor));)cursor+=1;return cursor}function scanSnapLength(source,start){let cursor=start;if(isAsciiDigit(source.charCodeAt(cursor))){for(;isAsciiDigit(source.charCodeAt(cursor));)cursor+=1;if(source.charCodeAt(cursor)===46&&isAsciiDigit(source.charCodeAt(cursor+1)))for(cursor+=2;isAsciiDigit(source.charCodeAt(cursor));)cursor+=1}else if(source.charCodeAt(cursor)===46&&isAsciiDigit(source.charCodeAt(cursor+1)))for(cursor+=2;isAsciiDigit(source.charCodeAt(cursor));)cursor+=1;else return{end:start+1,recognized:!1};const numberEnd=cursor;let unit;if(source.charCodeAt(cursor)===37?(unit="%",cursor+=1):matchesAsciiToken(source,cursor,"px")&&(unit="px",cursor+=2),unit===void 0)return{end:Math.max(start+1,numberEnd),recognized:!1};const numericValue=Number(source.slice(start,numberEnd));return{end:cursor,recognized:!0,token:Number.isFinite(numericValue)?Object.freeze({value:numericValue,unit}):void 0}}function normalizeSnapTokens(value){const source=value.slice(0,MAX_SNAP_SOURCE_CODE_UNITS),tokens=[];let index=0;for(;index<source.length&&tokens.length<MAX_SNAP_TOKENS;){if(matchesAsciiToken(source,index,"repeat(")){const innerStart=skipSnapWhitespace(source,index+7),scanned2=scanSnapLength(source,innerStart);if(scanned2.recognized){const close=skipSnapWhitespace(source,scanned2.end);if(source.charCodeAt(close)===41){scanned2.token&&tokens.push(Object.freeze({repeated:!0,...scanned2.token})),index=close+1;continue}scanned2.token&&tokens.push(Object.freeze({repeated:!1,...scanned2.token}))}index=Math.max(index+7,scanned2.end);continue}const scanned=scanSnapLength(source,index);scanned.recognized&&scanned.token&&tokens.push(Object.freeze({repeated:!1,...scanned.token})),index=Math.max(index+1,scanned.end)}return Object.freeze(tokens)}function nearlyEqual(left,right){return left===right?!0:left==null||right==null?!1:Math.abs(left-right)<=POSITION_EPSILON}class LyraSplitPanel extends LyraElement{constructor(){super(...arguments),this._startPosition=DEFAULT_POSITION,this._orientation="horizontal",this._snapThreshold=DEFAULT_SNAP_THRESHOLD,this.availableSize=0,this.dividerSourceSnapshots=new Map,this.dividerSourceObserverGeneration=0,this.cachedNormalizedSnapTokens=Object.freeze([]),this.disabled=!1,this._snap="",this.onWindowResize=()=>{this.measureAndSynchronize(!1)},this.onDividerSlotChange=()=>{this.syncDividerSources()},this.onPointerMove=event=>{const drag=this.drag;if(!drag||event.pointerId!==drag.pointerId||this.disabled)return;let delta=this.pointerCoordinate(event)-drag.startCoordinate;this.effectiveOrientation==="horizontal"&&this.effectiveDirection==="rtl"&&(delta*=-1),this.primary==="end"&&(delta*=-1),this.requestReposition(drag.startPrimaryPixels+delta,!0)},this.onPointerEnd=event=>{!this.drag||event.pointerId!==this.drag.pointerId||this.stopDragging()}}static{this.defaultStrings={...super.defaultStrings,resizeDivider:LYRA_DEFAULT_resizeDivider,resizeValuePercent:LYRA_DEFAULT_resizeValuePercent}}static{this.styles=[LyraElement.styles,styles]}get position(){const start=finiteRange(this._startPosition,DEFAULT_POSITION,0,100);return this.primary==="end"?100-start:start}set position(value){const oldPosition=this.position,oldPixels=this.positionInPixels,next=finiteRange(value,DEFAULT_POSITION,0,100);this.pendingPositionInPixels=void 0;const layoutSize=this.measuredLayoutSize();if(layoutSize>0){this.availableSize=layoutSize,this.applyPrimaryPixels(next/100*layoutSize,!1,oldPosition,oldPixels);return}this._startPosition=this.primary==="end"?100-next:next,this.preservedPrimaryPixels=void 0,this.requestSynchronizedUpdate(oldPosition,oldPixels)}get positionInPixels(){return this.pendingPositionInPixels!=null?this.pendingPositionInPixels:this.availableSize<=0?0:this.position/100*this.availableSize}set positionInPixels(value){const oldPosition=this.position,oldPixels=this.positionInPixels;if(value==null){this.pendingPositionInPixels=void 0,this.preservedPrimaryPixels=this.availableSize>0?this.positionInPixels:void 0,this.requestSynchronizedUpdate(oldPosition,oldPixels);return}const fallback=this.positionInPixels??DEFAULT_POSITION/100*this.availableSize,layoutSize=this.measuredLayoutSize(),next=finiteRange(value,fallback,0,layoutSize>0?layoutSize:Number.MAX_VALUE);if(layoutSize>0){this.availableSize=layoutSize,this.applyPrimaryPixels(next,!1,oldPosition,oldPixels);return}this.pendingPositionInPixels=next,this.preservedPrimaryPixels=next,this.requestSynchronizedUpdate(oldPosition,oldPixels)}get orientation(){return this._orientation}set orientation(value){const next=value==="vertical"?"vertical":"horizontal";if(next===this._orientation)return;const old=this._orientation,oldVertical=this.vertical;this._orientation=next,this.requestUpdate("orientation",old),this.requestUpdate("vertical",oldVertical)}get vertical(){return this.orientation==="vertical"}set vertical(value){this.orientation=value?"vertical":"horizontal"}get primary(){return this._primary}set primary(value){const next=value==="start"||value==="end"?value:void 0;if(next===this._primary)return;this.stopDragging();const oldPrimary=this._primary,oldPosition=this.position,oldPixels=this.positionInPixels,layoutSize=this.measuredLayoutSize(),referencePixels=layoutSize>0&&!oldPrimary?oldPosition/100*layoutSize:oldPixels;this._primary=next,layoutSize>0?(this.availableSize=layoutSize,this.applyPrimaryPixels(referencePixels,!1,oldPosition,oldPixels)):(this._startPosition=next==="end"?100-oldPosition:oldPosition,this.preservedPrimaryPixels=this.pendingPositionInPixels??oldPixels),this.requestUpdate("primary",oldPrimary)}get snap(){return this._snap}set snap(value){const old=this._snap;this._snap=value??"",this.requestUpdate("snap",old)}get snapThreshold(){return this._snapThreshold}set snapThreshold(value){const old=this._snapThreshold;this._snapThreshold=finiteRange(value,DEFAULT_SNAP_THRESHOLD,0,Number.MAX_VALUE),this.requestUpdate("snapThreshold",old)}get effectiveOrientation(){return this.orientation}measuredLayoutSize(){return this.isConnected?this.axisSize(this.baseElement):0}connectedCallback(){const authoredOrientation=this.getAttribute("orientation");super.connectedCallback(),authoredOrientation!==null&&(this.orientation=authoredOrientation==="vertical"?"vertical":"horizontal"),this.hasUpdated&&queueMicrotask(()=>{this.isConnected&&(this.syncDividerSources(),this.observeSize(),this.measureAndSynchronize(!1))})}disconnectedCallback(){this.stopDragging(),this.resetDividerSourceObserver(),this.restoreDividerSources(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0,super.disconnectedCallback()}firstUpdated(changed){super.firstUpdated(changed),this.syncDividerSources(),this.measureAndSynchronize(!0),this.observeSize()}updated(changed){super.updated(changed),changed.has("disabled")&&this.disabled&&this.stopDragging(),(changed.has("orientation")||changed.has("vertical"))&&(this.stopDragging(),this.measureAndSynchronize(!1))}requestSynchronizedUpdate(oldPosition,oldPixels){nearlyEqual(oldPosition,this.position)||this.requestUpdate("position",oldPosition),nearlyEqual(oldPixels,this.positionInPixels)||this.requestUpdate("positionInPixels",oldPixels)}axisSize(element){if(!element)return 0;const rect=element.getBoundingClientRect(),measured=this.effectiveOrientation==="vertical"?rect.height:rect.width;return finiteRange(measured,0,0,Number.MAX_VALUE)}constraintBounds(){const size=this.availableSize,min=finiteRange(this.axisSize(this.minProbe),0,0,size),rawMax=this.maxProbe?this.axisSize(this.maxProbe):size,max=finiteRange(rawMax,size,min,size);return{min,max}}resolvePrimaryPixels(requestedPixels,useSnap,fallbackPixels){const size=this.availableSize,proposed=finiteRange(requestedPixels,fallbackPixels??DEFAULT_POSITION/100*size,0,size),snapped=useSnap?this.applySnap(proposed,size):proposed,{min,max}=this.constraintBounds();return finiteRange(snapped,proposed,min,max)}applyPrimaryPixels(requestedPixels,useSnap,oldPosition=this.position,oldPixels=this.positionInPixels,scheduleUpdate=!0,resolvedPrimaryPixels){const size=this.availableSize;if(size<=0)return this.pendingPositionInPixels=finiteRange(requestedPixels,0,0,Number.MAX_VALUE),this.preservedPrimaryPixels=this.pendingPositionInPixels,scheduleUpdate&&this.requestSynchronizedUpdate(oldPosition,oldPixels),!1;const primaryPixels=resolvedPrimaryPixels??this.resolvePrimaryPixels(requestedPixels,useSnap,oldPixels),primaryPercent=primaryPixels/size*100;return this._startPosition=this.primary==="end"?100-primaryPercent:primaryPercent,this.pendingPositionInPixels=void 0,this.preservedPrimaryPixels=primaryPixels,scheduleUpdate&&this.requestSynchronizedUpdate(oldPosition,oldPixels),!nearlyEqual(oldPosition,this.position)||!nearlyEqual(oldPixels,this.positionInPixels)}requestReposition(requestedPixels,useSnap){if(this.availableSize<=0)return!1;const oldPosition=this.position,oldPixels=this.positionInPixels,primaryPixels=this.resolvePrimaryPixels(requestedPixels,useSnap,oldPixels),position=primaryPixels/this.availableSize*100;return nearlyEqual(oldPosition,position)&&nearlyEqual(oldPixels,primaryPixels)||this.emit("lr-reposition-request",{position,positionInPixels:primaryPixels},{cancelable:!0}).defaultPrevented||!this.applyPrimaryPixels(requestedPixels,useSnap,oldPosition,oldPixels,!0,primaryPixels)?!1:(this.emit("lr-reposition",null),!0)}measureAndSynchronize(initial){const nextSize=this.axisSize(this.baseElement);if(nextSize<=0)return;const oldPosition=this.position,oldPixels=this.positionInPixels,pending=this.pendingPositionInPixels,preserved=this.preservedPrimaryPixels,sizeChanged=!nearlyEqual(this.availableSize,nextSize);this.availableSize=nextSize,pending!=null?this.applyPrimaryPixels(pending,!1,oldPosition,oldPixels,!1):!initial&&sizeChanged&&this.primary&&preserved!=null?this.applyPrimaryPixels(preserved,!1,oldPosition,oldPixels,!1):this.applyPrimaryPixels(this.position/100*nextSize,!1,oldPosition,oldPixels,!1),this.synchronizeMeasuredDom()}synchronizeMeasuredDom(){const startPosition=finiteRange(this._startPosition,DEFAULT_POSITION,0,100);if(this.baseElement?.style.setProperty("--_lr-split-panel-start-position",`${startPosition}%`),this.dividerElement){const bounds=this.ariaBounds,position=Math.round(this.position);this.dividerElement.setAttribute("aria-valuenow",String(position)),this.dividerElement.setAttribute("aria-valuetext",this.resizeValueText(position)),this.dividerElement.setAttribute("aria-valuemin",String(Math.round(bounds.min))),this.dividerElement.setAttribute("aria-valuemax",String(Math.round(bounds.max)))}const reflectedPosition=String(this.position);this.getAttribute("position")!==reflectedPosition&&this.setAttribute("position",reflectedPosition)}observeSize(){if(this.resizeObserver||this.resizeView||!this.isConnected)return;const view=this.ownerDocument.defaultView,ResizeObserverConstructor=view?.ResizeObserver;if(ResizeObserverConstructor){this.resizeObserver=new ResizeObserverConstructor(()=>this.measureAndSynchronize(!1)),this.baseElement&&this.resizeObserver.observe(this.baseElement),this.minProbe&&this.resizeObserver.observe(this.minProbe),this.maxProbe&&this.resizeObserver.observe(this.maxProbe);return}view&&(this.resizeView=view,view.addEventListener("resize",this.onWindowResize))}snapshotDividerSource(source){const inert=source.getAttribute("inert");return{inert,appliedInert:inert}}adoptDividerSourceInert(source,snapshot){const current=source.getAttribute("inert");current!==snapshot.appliedInert&&(snapshot.inert=current)}makeDividerSourceInert(source,snapshot){source.hasAttribute("inert")||source.setAttribute("inert",""),snapshot.appliedInert=source.getAttribute("inert")}restoreDividerSource(source,snapshot){this.adoptDividerSourceInert(source,snapshot),snapshot.inert===null?source.removeAttribute("inert"):source.setAttribute("inert",snapshot.inert)}restoreDividerSources(){for(const[source,snapshot]of this.dividerSourceSnapshots)this.restoreDividerSource(source,snapshot);this.dividerSourceSnapshots.clear()}resetDividerSourceObserver(){this.dividerSourceObserverGeneration+=1,this.dividerSourceObserver?.disconnect(),this.dividerSourceObserver=void 0,this.dividerSourceObserverDocument=void 0}observeDividerSources(){this.resetDividerSourceObserver();const MutationObserverConstructor=this.ownerDocument.defaultView?.MutationObserver;if(!MutationObserverConstructor||!this.isConnected||this.dividerSourceSnapshots.size===0)return;const generation=this.dividerSourceObserverGeneration,observer=new MutationObserverConstructor(records=>{this.dividerSourceObserver!==observer||this.dividerSourceObserverDocument!==this.ownerDocument||this.dividerSourceObserverGeneration!==generation||!this.isConnected||records.some(record=>this.dividerSourceSnapshots.has(record.target))&&this.syncDividerSources()});this.dividerSourceObserver=observer,this.dividerSourceObserverDocument=this.ownerDocument;for(const source of this.dividerSourceSnapshots.keys())observer.observe(source,{attributes:!0,attributeFilter:["inert"]})}syncDividerSources(){const assigned=new Set(this.dividerSlot?.assignedElements({flatten:!0})??[]);for(const[source,snapshot]of this.dividerSourceSnapshots)this.adoptDividerSourceInert(source,snapshot),assigned.has(source)||(this.restoreDividerSource(source,snapshot),this.dividerSourceSnapshots.delete(source));for(const source of assigned){const snapshot=this.dividerSourceSnapshots.get(source)??this.snapshotDividerSource(source);this.dividerSourceSnapshots.set(source,snapshot),this.adoptDividerSourceInert(source,snapshot),this.makeDividerSourceInert(source,snapshot)}this.observeDividerSources()}resolveNormalizedSnapLength(token,size){const resolved=token.unit==="%"?token.value/100*size:token.value;return Number.isFinite(resolved)&&resolved>=0?resolved:void 0}get normalizedSnapTokens(){const source=typeof this.snap=="string"?this.snap:"";return source===this.normalizedSnapSource?this.cachedNormalizedSnapTokens:(this.normalizedSnapSource=source,this.cachedNormalizedSnapTokens=normalizeSnapTokens(source),this.cachedNormalizedSnapTokens)}applySnap(position,size){const threshold=finiteRange(this.snapThreshold,DEFAULT_SNAP_THRESHOLD,0,Number.MAX_VALUE);if(typeof this.snap=="function")try{return finiteRange(this.snap({pos:position,size,snapThreshold:threshold}),position,0,size)}catch{return position}const tokens=this.normalizedSnapTokens;if(tokens.length===0)return position;let nearest=position,nearestDistance=Number.POSITIVE_INFINITY;for(const token of tokens){const point=this.resolveNormalizedSnapLength(token,size);if(point==null||point<0)continue;const candidates=token.repeated?[Math.floor(position/point)*point,Math.round(position/point)*point,Math.ceil(position/point)*point]:[point];for(const candidate of candidates){if(!Number.isFinite(candidate)||candidate<0||candidate>size)continue;const distance=Math.abs(position-candidate);distance<nearestDistance&&(nearest=candidate,nearestDistance=distance)}}return nearestDistance<=threshold?nearest:position}pointerCoordinate(event){return this.effectiveOrientation==="vertical"?event.clientY:event.clientX}onPointerDown(event){if(this.disabled||this.drag||event.button!==0)return;const primaryPixels=this.positionInPixels;if(primaryPixels==null||this.availableSize<=0)return;event.preventDefault(),this.drag={pointerId:event.pointerId,startCoordinate:this.pointerCoordinate(event),startPrimaryPixels:primaryPixels},this.dividerElement?.setAttribute("data-dragging","");try{event.currentTarget.setPointerCapture(event.pointerId)}catch{}const view=this.ownerDocument.defaultView;this.dragView=view??void 0,view?.addEventListener("pointermove",this.onPointerMove),view?.addEventListener("pointerup",this.onPointerEnd),view?.addEventListener("pointercancel",this.onPointerEnd)}onLostPointerCapture(event){!this.drag||event.pointerId!==this.drag.pointerId||this.stopDragging()}stopDragging(){const pointerId=this.drag?.pointerId;if(this.drag=void 0,this.dividerElement?.removeAttribute("data-dragging"),this.dragView?.removeEventListener("pointermove",this.onPointerMove),this.dragView?.removeEventListener("pointerup",this.onPointerEnd),this.dragView?.removeEventListener("pointercancel",this.onPointerEnd),this.dragView=void 0,pointerId!=null&&this.dividerElement?.hasPointerCapture(pointerId))try{this.dividerElement.releasePointerCapture(pointerId)}catch{}}onKeyDown(event){if(this.disabled||this.availableSize<=0)return;const current=this.positionInPixels;if(current==null)return;let next;const{min,max}=this.constraintBounds();if(event.key==="Home")next=min;else if(event.key==="End")next=max;else{let physicalDirection=0;if(this.effectiveOrientation==="vertical"?event.key==="ArrowDown"?physicalDirection=1:event.key==="ArrowUp"&&(physicalDirection=-1):event.key==="ArrowRight"?physicalDirection=this.effectiveDirection==="rtl"?-1:1:event.key==="ArrowLeft"&&(physicalDirection=this.effectiveDirection==="rtl"?1:-1),physicalDirection!==0){const primaryDirection=this.primary==="end"?-physicalDirection:physicalDirection;next=current+primaryDirection*KEYBOARD_STEP_PERCENT*this.availableSize/100}}next!=null&&(event.preventDefault(),this.requestReposition(next,!1))}get separatorLabel(){const hostLabel=this.getAttribute("aria-label");if(hostLabel!==null)return hostLabel;const number=getNumberFormat(this.effectiveLocale);return this.localize("resizeDivider",void 0,{a:number.format(1),b:number.format(2)})}resizeValueText(position){return this.localize("resizeValuePercent",void 0,{value:getNumberFormat(this.effectiveLocale).format(Math.round(position))})}get ariaBounds(){if(this.availableSize<=0)return{min:0,max:100};const bounds=this.constraintBounds();return{min:bounds.min/this.availableSize*100,max:bounds.max/this.availableSize*100}}render(){const orientation=this.effectiveOrientation,startPosition=finiteRange(this._startPosition,DEFAULT_POSITION,0,100),ariaBounds=this.ariaBounds,position=Math.round(this.position);return html`
|
|
2
2
|
<div
|
|
3
3
|
part="base split-panel"
|
|
4
4
|
data-orientation=${orientation}
|
|
@@ -16,7 +16,9 @@ export type LyraTabGroupActivation='auto'|'manual';export interface LyraTabGroup
|
|
|
16
16
|
* Implements the WAI-ARIA APG tabs pattern. With the default `activation="auto"`, Left/Right
|
|
17
17
|
* (swapped under RTL, or Up/Down when `placement` is `start`/`end`) move focus *and* selection
|
|
18
18
|
* together; with `activation="manual"` they move focus only and Enter/Space commits, which the APG
|
|
19
|
-
* requires whenever revealing a panel is expensive.
|
|
19
|
+
* requires whenever revealing a panel is expensive. Removing a focused unselected tab silently
|
|
20
|
+
* rehomes focus to a survivor while retaining a valid selection and preserving outside focus.
|
|
21
|
+
* Home/End jump to the first/last enabled tab,
|
|
20
22
|
* and a roving `tabindex` follows the focused tab. An enabled closable `<lr-tab>` adds
|
|
21
23
|
* `aria-keyshortcuts="Delete"` to that same real tab button; Delete routes the close request through
|
|
22
24
|
* the descriptor so `lr-close` still targets `<lr-tab>`. The visual close affordance stays
|
|
@@ -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,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{LyraElement}from"../../../internal/lyra-element.js";import{isRtl}from"../../../internal/rtl.js";import{nextId}from"../../../internal/a11y.js";import{composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{chevronIcon}from"../../../internal/icons.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{tag}from"../../../internal/prefix.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{styles}from"./tab-group.styles.js";import{activeElementIn}from"../../../internal/active-element.js";import{LYRA_DEFAULT_scrollNext,LYRA_DEFAULT_scrollPrevious}from"../../../internal/default-strings.generated.js";function isHtmlElement(child){return child.nodeType===1&&child.namespaceURI==="http://www.w3.org/1999/xhtml"}function isInertChild(child){return isHtmlElement(child)&&child.inert}function isTabLabelSubtreeExcludedWithoutInert(element){if(element.hasAttribute("hidden")||element.getAttribute("aria-hidden")?.trim().toLowerCase()==="true")return!0;const rendered=element.ownerDocument.defaultView?.getComputedStyle(element);return rendered?.display==="none"||rendered?.contentVisibility==="hidden"}const SYNTHETIC_PANEL_PREFIX="lr-tab-",SCROLL_STEP_RATIO=.8;class LyraTabGroup extends LyraElement{constructor(){super(...arguments),this.active="",this.accessibleLabel=null,this.placement="top",this.activation="auto",this.withoutScrollControls=!1,this.noScrollControls=!1,this.fixedScrollControls=!1,this.tabs=[],this.focusedTab="",this.baseId=nextId("tab-group"),this.nextOpaqueId=0,this.idsBySlot=new Map,this.mutationObserverGeneration=0,this.projectedSourceSnapshots=new Map,this.projectedSlotSnapshots=new Map,this.projectedSourceObserverGeneration=0,this.rehomeTabFocus=!1,this.scrollStartAvailable=!1,this.scrollEndAvailable=!1,this.scrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part~="tablist"]'),()=>this.measureTabScrollEdges()),this.syncTabs=()=>{const children=Array.from(this.children);this.adoptProjectedSourceInertStates(),this.adoptProjectedSlotStates();const projectedSlots=new Set,next=this.readElementModel(children,projectedSlots);this.syncProjectedSlots(projectedSlots),this.syncProjectedSources(next);const liveSlots=new Set(next.map(tab=>tab.slotName));for(const slotName of this.idsBySlot.keys())liveSlots.has(slotName)||this.idsBySlot.delete(slotName);this.tabs=next},this.onTabListKeyDown=e=>{const navigable=this.tabs.filter(t=>this.isNavigable(t));if(navigable.length===0)return;const origin=this.keyboardOriginTab(e,navigable),currentIndex=origin?navigable.indexOf(origin):-1;if(e.key==="Delete"){if(!origin?.element.closable)return;e.preventDefault(),origin.element.requestCloseFromOwner();return}const rtl=isRtl(this),forwardKey=this.isVertical?"ArrowDown":rtl?"ArrowLeft":"ArrowRight",backwardKey=this.isVertical?"ArrowUp":rtl?"ArrowRight":"ArrowLeft";if(this.activation==="manual"&&(e.key==="Enter"||e.key===" "||e.key==="Spacebar")){if(!origin)return;e.preventDefault(),this.selectTab(origin);return}let targetIndex;switch(e.key){case forwardKey:targetIndex=currentIndex<0?0:(currentIndex+1)%navigable.length;break;case backwardKey:targetIndex=currentIndex<0?navigable.length-1:(currentIndex-1+navigable.length)%navigable.length;break;case"Home":targetIndex=0;break;case"End":targetIndex=navigable.length-1;break;default:return}e.preventDefault();const target=navigable[targetIndex];if(this.activation==="manual"){this.focusOnly(target);return}this.selectTab(target),this.focusTab(target.slotName)},this.onTabListScroll=()=>{this.measureTabScrollEdges()},this.onScrollControlMouseDown=event=>{event.preventDefault()},this.onScrollControlPointerDown=event=>{const control=event.currentTarget;control instanceof HTMLElement&&(control.setAttribute("data-pressed",""),control.setPointerCapture(event.pointerId))},this.onScrollControlPointerEnd=event=>{const control=event.currentTarget;control instanceof HTMLElement&&(control.removeAttribute("data-pressed"),control.hasPointerCapture(event.pointerId)&&control.releasePointerCapture(event.pointerId))}}static{this.defaultStrings={...super.defaultStrings,scrollNext:LYRA_DEFAULT_scrollNext,scrollPrevious:LYRA_DEFAULT_scrollPrevious}}static{this.styles=[LyraElement.styles,styles]}connectedCallback(){super.connectedCallback(),this.hasUpdated?this.syncTabs():this.seedFirstRenderState(this.syncTabs),this.resetMutationObserver();const ownerDocument=this.ownerDocument,MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.mutationObserverGeneration,observer=new MutationObserverCtor(records=>{if(this.mutationObserver!==observer||this.mutationObserverDocument!==ownerDocument||this.mutationObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument)return;const isDirectChild=node=>node.parentNode===this,isElementTabContent=node=>{let current=node.nodeType===1?node:node.parentElement;for(;current&¤t!==this;){if(current.localName===tag("tab")&¤t.parentNode===this)return!0;current=current.parentElement}return!1};records.some(record=>record.type==="childList"?record.target===this||isElementTabContent(record.target):record.type==="characterData"?isElementTabContent(record.target):record.attributeName==="inert"&&this.projectedSourceSnapshots.has(record.target)?!1:isDirectChild(record.target)||isElementTabContent(record.target))&&this.syncTabs()});this.mutationObserver=observer,this.mutationObserverDocument=ownerDocument,observer.observe(this,{childList:!0,subtree:!0,attributes:!0,characterData:!0,attributeFilter:["alt","aria-hidden","aria-label","aria-labelledby","class","closable","disabled","hidden","inert","id","label","name","open","panel","slot","style"]})}disconnectedCallback(){this.resetMutationObserver(),this.resetProjectedSourceObserver(),this.restoreProjectedSources(),this.restoreProjectedSlots(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resetMutationObserver(),this.resetProjectedSourceObserver()}resetMutationObserver(){this.mutationObserverGeneration+=1,this.mutationObserver?.disconnect(),this.mutationObserver=void 0,this.mutationObserverDocument=void 0}readElementModel(children,projectedSlots){const seen=new Set,next=[],panels=children.filter(child=>child.localName===tag("tab-panel")),authoredNames=new Set(children.flatMap(child=>{if(child.localName===tag("tab")){const name=child.getAttribute("panel");return name?[name]:[]}if(child.localName===tag("tab-panel")){const name=child.getAttribute("name");return name?[name]:[]}return[]}));let index=0;for(const child of children){if(child.localName!==tag("tab"))continue;const authoredPanel=child.getAttribute("panel")||void 0;let slotName=authoredPanel??`${SYNTHETIC_PANEL_PREFIX}${index}`;if(!authoredPanel){let collision=0;for(;authoredNames.has(slotName)||seen.has(slotName);)collision+=1,slotName=`${SYNTHETIC_PANEL_PREFIX}${index}-${collision}`}if(index+=1,!authoredPanel&&!this.readElementLabel(child,{allowUnprojected:!0})||seen.has(slotName))continue;seen.add(slotName);const tabSlot=this.tabSlotName(slotName);this.projectSlot(child,tabSlot,projectedSlots);const visibleLabel=this.readElementLabel(child);if(!authoredPanel&&!visibleLabel)continue;const label=visibleLabel||slotName,panel=panels.find(candidate=>candidate.getAttribute("name")===slotName);panel&&this.projectSlot(panel,slotName,projectedSlots),next.push({slotName,label,disabled:child.hasAttribute("disabled"),inert:isInertChild(child),element:child}),!this.active&&child.hasAttribute("active")&&(this.active=slotName)}return next}readElementLabel(tab,options={}){const labelNodes=Array.from(tab.childNodes).filter(node=>node.nodeType!==Node.ELEMENT_NODE||node.getAttribute("slot")===null||node.getAttribute("slot")==="");return composedAccessibilityText(labelNodes,{ancestorBoundary:tab,isSubtreeExcluded:element=>this.isTabLabelSubtreeExcluded(element),requireRendered:!options.allowUnprojected,skipRootAncestorValidation:options.allowUnprojected}).replace(/\s+/g," ").trim()}libraryOwnsSourceInert(element){return this.projectedSourceSnapshots.get(element)?.libraryOwnsInert===!0}isTabLabelSubtreeExcluded(element){return isTabLabelSubtreeExcludedWithoutInert(element)||element.hasAttribute("inert")&&!this.libraryOwnsSourceInert(element)}snapshotProjectedSource(source){const inert=source.getAttribute("inert");return{inert,appliedInert:inert,libraryOwnsInert:!1}}adoptProjectedSourceInert(source,snapshot){const current=source.getAttribute("inert");current!==snapshot.appliedInert&&(snapshot.inert=current,snapshot.libraryOwnsInert=!1)}makeProjectedSourceInert(source,snapshot){source.hasAttribute("inert")||(source.setAttribute("inert",""),snapshot.libraryOwnsInert=!0),snapshot.appliedInert=source.getAttribute("inert")}restoreProjectedSource(source,snapshot){this.adoptProjectedSourceInert(source,snapshot),snapshot.inert===null?source.removeAttribute("inert"):source.setAttribute("inert",snapshot.inert)}restoreProjectedSources(){for(const[source,snapshot]of this.projectedSourceSnapshots)this.restoreProjectedSource(source,snapshot);this.projectedSourceSnapshots.clear()}resetProjectedSourceObserver(){this.projectedSourceObserverGeneration+=1,this.projectedSourceObserver?.disconnect(),this.projectedSourceObserver=void 0,this.projectedSourceObserverDocument=void 0}observeProjectedSources(){this.resetProjectedSourceObserver();const ownerDocument=this.ownerDocument,MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor||!this.isConnected||this.projectedSourceSnapshots.size===0)return;const generation=this.projectedSourceObserverGeneration,observer=new MutationObserverCtor(records=>{this.projectedSourceObserver!==observer||this.projectedSourceObserverDocument!==ownerDocument||this.projectedSourceObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||records.some(record=>this.projectedSourceSnapshots.has(record.target))&&this.syncTabs()});this.projectedSourceObserver=observer,this.projectedSourceObserverDocument=ownerDocument;for(const source of this.projectedSourceSnapshots.keys())observer.observe(source,{attributes:!0,attributeFilter:["inert"]})}projectedSources(tabs){const sources=new Set;for(const tab of tabs)for(const child of Array.from(tab.element.children))(child.getAttribute("slot")??"")===""&&sources.add(child);return sources}syncProjectedSources(tabs){const sources=this.projectedSources(tabs);for(const[source,snapshot]of this.projectedSourceSnapshots)this.adoptProjectedSourceInert(source,snapshot),sources.has(source)||(this.restoreProjectedSource(source,snapshot),this.projectedSourceSnapshots.delete(source));for(const source of sources){const snapshot=this.projectedSourceSnapshots.get(source)??this.snapshotProjectedSource(source);this.projectedSourceSnapshots.set(source,snapshot),this.adoptProjectedSourceInert(source,snapshot),this.makeProjectedSourceInert(source,snapshot)}this.observeProjectedSources()}adoptProjectedSourceInertStates(){for(const[source,snapshot]of this.projectedSourceSnapshots)this.adoptProjectedSourceInert(source,snapshot)}snapshotProjectedSlot(source){const slot=source.getAttribute("slot");return{slot,appliedSlot:slot,libraryOwnsSlot:!1}}adoptProjectedSlot(source,snapshot){const current=source.getAttribute("slot");current!==snapshot.appliedSlot&&(snapshot.slot=current,snapshot.libraryOwnsSlot=!1)}projectSlot(source,slot,projectedSlots){const snapshot=this.projectedSlotSnapshots.get(source)??this.snapshotProjectedSlot(source);this.projectedSlotSnapshots.set(source,snapshot),this.adoptProjectedSlot(source,snapshot),source.getAttribute("slot")!==slot&&(source.setAttribute("slot",slot),snapshot.libraryOwnsSlot=!0),snapshot.appliedSlot=source.getAttribute("slot"),projectedSlots.add(source)}restoreProjectedSlot(source,snapshot){this.adoptProjectedSlot(source,snapshot),snapshot.slot===null?source.removeAttribute("slot"):source.setAttribute("slot",snapshot.slot)}syncProjectedSlots(projectedSlots){for(const[source,snapshot]of this.projectedSlotSnapshots)projectedSlots.has(source)||(this.restoreProjectedSlot(source,snapshot),this.projectedSlotSnapshots.delete(source))}restoreProjectedSlots(){for(const[source,snapshot]of this.projectedSlotSnapshots)this.restoreProjectedSlot(source,snapshot);this.projectedSlotSnapshots.clear()}adoptProjectedSlotStates(){for(const[source,snapshot]of this.projectedSlotSnapshots)this.adoptProjectedSlot(source,snapshot)}isNavigable(tab){return!tab.disabled&&!tab.inert}willUpdate(changed){if(super.willUpdate(changed),!changed.has("tabs")&&!changed.has("active"))return;const current=this.tabs.find(t=>t.slotName===this.active);current&&this.isNavigable(current)||(this.rehomeTabFocus=activeElementIn(this.renderRoot)?.getAttribute("part")==="tab",this.active=this.tabs.find(t=>this.isNavigable(t))?.slotName??"",this.focusedTab=this.active)}updated(changed){super.updated(changed),(changed.has("active")||changed.has("tabs"))&&this.syncElementActiveState(),this.scrollOverflow.observeExtra(this.renderRoot.querySelectorAll('[part="tab"]')),this.measureTabScrollEdges(),this.rehomeTabFocus&&(this.rehomeTabFocus=!1,this.renderRoot.querySelector('[part="tab"][tabindex="0"]')?.focus())}selectTab(tab){if(!this.isNavigable(tab)||tab.slotName===this.active)return;const previous=this.active;this.active=tab.slotName,this.focusedTab=tab.slotName,previous&&this.emit("lr-tab-hide",{name:previous}),this.emit("lr-tab-show",{name:tab.slotName})}show(panel){const tab=this.tabs.find(candidate=>candidate.slotName===panel);tab&&this.selectTab(tab)}syncElementActiveState(){for(const child of Array.from(this.children))if(child.localName===tag("tab")){const definition=this.tabs.find(tab=>tab.element===child);child.toggleAttribute("active",definition?.slotName===this.active)}else child.localName===tag("tab-panel")&&child.toggleAttribute("active",child.getAttribute("name")===this.active)}focusOnly(tab){this.focusedTab=tab.slotName,this.focusTab(tab.slotName)}get rovingTab(){if(this.activation!=="manual")return this.active;const candidate=this.tabs.find(t=>t.slotName===this.focusedTab&&this.isNavigable(t));return candidate?candidate.slotName:this.active}keyboardOriginTab(event,navigable){const eventButton=event.composedPath().find(candidate=>candidate.nodeType===1&&candidate.getAttribute?.("part")==="tab"&&candidate.getRootNode()===this.renderRoot),focused=activeElementIn(this.renderRoot),owned=(eventButton??(focused?.getAttribute("part")==="tab"?focused:void 0))?.dataset.slot;return navigable.find(tab=>tab.slotName===owned)??navigable.find(tab=>tab.slotName===this.rovingTab)}focusTab(slotName){const buttons=this.renderRoot.querySelectorAll('[part="tab"]');for(const button of Array.from(buttons))if(button.dataset.slot===slotName){button.focus();return}}get isVertical(){return this.placement==="start"||this.placement==="end"}tabId(slotName){return this.idsFor(slotName).tab}panelId(slotName){return this.idsFor(slotName).panel}idsFor(slotName){const existing=this.idsBySlot.get(slotName);if(existing)return existing;const token=`${this.baseId}-${this.nextOpaqueId++}`,ids={tab:`${token}-tab`,panel:`${token}-panel`};return this.idsBySlot.set(slotName,ids),ids}tabSlotName(slotName){return`${slotName}-tab`}get scrollControlsSuppressed(){return this.withoutScrollControls||this.noScrollControls}measureTabScrollEdges(){const tablist=this.renderRoot.querySelector('[part~="tablist"]');if(!tablist||this.isVertical){this.setTabScrollEdges(!1,!1,tablist);return}const maximum=Math.max(0,tablist.scrollWidth-tablist.clientWidth),position=Math.max(0,Math.min(maximum,this.effectiveDirection==="rtl"?-tablist.scrollLeft:tablist.scrollLeft));this.setTabScrollEdges(position>1,position<maximum-1,tablist)}setTabScrollEdges(start,end,tablist){tablist?.toggleAttribute("data-scroll-start",start),tablist?.toggleAttribute("data-scroll-end",end),!(start===this.scrollStartAvailable&&end===this.scrollEndAvailable)&&(this.scrollStartAvailable=start,this.scrollEndAvailable=end)}scrollTabs(edge){const tablist=this.renderRoot.querySelector('[part~="tablist"]');if(!tablist||!isHtmlElement(tablist)||typeof tablist.scrollBy!="function")return;const step=Math.max(1,tablist.clientWidth*SCROLL_STEP_RATIO),towardEnd=edge==="end"?1:-1,physical=this.effectiveDirection==="rtl"?-towardEnd:towardEnd;tablist.scrollBy({left:step*physical,behavior:prefersReducedMotion(this.ownerDocument.defaultView)?"instant":"smooth"})}renderScrollControl(edge){if(this.isVertical||this.scrollControlsSuppressed)return nothing;const available=edge==="start"?this.scrollStartAvailable:this.scrollEndAvailable;return html`<button
|
|
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,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{LyraElement}from"../../../internal/lyra-element.js";import{isRtl}from"../../../internal/rtl.js";import{nextId}from"../../../internal/a11y.js";import{composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{chevronIcon}from"../../../internal/icons.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{tag}from"../../../internal/prefix.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{styles}from"./tab-group.styles.js";import{activeElementIn}from"../../../internal/active-element.js";import{LYRA_DEFAULT_scrollNext,LYRA_DEFAULT_scrollPrevious}from"../../../internal/default-strings.generated.js";function isHtmlElement(child){return child.nodeType===1&&child.namespaceURI==="http://www.w3.org/1999/xhtml"}function isInertChild(child){return isHtmlElement(child)&&child.inert}function isTabLabelSubtreeExcludedWithoutInert(element){if(element.hasAttribute("hidden")||element.getAttribute("aria-hidden")?.trim().toLowerCase()==="true")return!0;const rendered=element.ownerDocument.defaultView?.getComputedStyle(element);return rendered?.display==="none"||rendered?.contentVisibility==="hidden"}const SYNTHETIC_PANEL_PREFIX="lr-tab-",SCROLL_STEP_RATIO=.8;class LyraTabGroup extends LyraElement{constructor(){super(...arguments),this.active="",this.accessibleLabel=null,this.placement="top",this.activation="auto",this.withoutScrollControls=!1,this.noScrollControls=!1,this.fixedScrollControls=!1,this.tabs=[],this.focusedTab="",this.baseId=nextId("tab-group"),this.nextOpaqueId=0,this.idsBySlot=new Map,this.mutationObserverGeneration=0,this.projectedSourceSnapshots=new Map,this.projectedSlotSnapshots=new Map,this.projectedSourceObserverGeneration=0,this.rehomeTabFocus=!1,this.scrollStartAvailable=!1,this.scrollEndAvailable=!1,this.scrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part~="tablist"]'),()=>this.measureTabScrollEdges()),this.syncTabs=()=>{const children=Array.from(this.children);this.adoptProjectedSourceInertStates(),this.adoptProjectedSlotStates();const projectedSlots=new Set,next=this.readElementModel(children,projectedSlots);this.syncProjectedSlots(projectedSlots),this.syncProjectedSources(next);const liveSlots=new Set(next.map(tab=>tab.slotName));for(const slotName of this.idsBySlot.keys())liveSlots.has(slotName)||this.idsBySlot.delete(slotName);this.tabs=next},this.onTabListKeyDown=e=>{const navigable=this.tabs.filter(t=>this.isNavigable(t));if(navigable.length===0)return;const origin=this.keyboardOriginTab(e,navigable),currentIndex=origin?navigable.indexOf(origin):-1;if(e.key==="Delete"){if(!origin?.element.closable)return;e.preventDefault(),origin.element.requestCloseFromOwner();return}const rtl=isRtl(this),forwardKey=this.isVertical?"ArrowDown":rtl?"ArrowLeft":"ArrowRight",backwardKey=this.isVertical?"ArrowUp":rtl?"ArrowRight":"ArrowLeft";if(this.activation==="manual"&&(e.key==="Enter"||e.key===" "||e.key==="Spacebar")){if(!origin)return;e.preventDefault(),this.selectTab(origin);return}let targetIndex;switch(e.key){case forwardKey:targetIndex=currentIndex<0?0:(currentIndex+1)%navigable.length;break;case backwardKey:targetIndex=currentIndex<0?navigable.length-1:(currentIndex-1+navigable.length)%navigable.length;break;case"Home":targetIndex=0;break;case"End":targetIndex=navigable.length-1;break;default:return}e.preventDefault();const target=navigable[targetIndex];if(this.activation==="manual"){this.focusOnly(target);return}this.selectTab(target),this.focusTab(target.slotName)},this.onTabListScroll=()=>{this.measureTabScrollEdges()},this.onScrollControlMouseDown=event=>{event.preventDefault()},this.onScrollControlPointerDown=event=>{const control=event.currentTarget;control instanceof HTMLElement&&(control.setAttribute("data-pressed",""),control.setPointerCapture(event.pointerId))},this.onScrollControlPointerEnd=event=>{const control=event.currentTarget;control instanceof HTMLElement&&(control.removeAttribute("data-pressed"),control.hasPointerCapture(event.pointerId)&&control.releasePointerCapture(event.pointerId))}}static{this.defaultStrings={...super.defaultStrings,scrollNext:LYRA_DEFAULT_scrollNext,scrollPrevious:LYRA_DEFAULT_scrollPrevious}}static{this.styles=[LyraElement.styles,styles]}connectedCallback(){super.connectedCallback(),this.hasUpdated?this.syncTabs():this.seedFirstRenderState(this.syncTabs),this.resetMutationObserver();const ownerDocument=this.ownerDocument,MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.mutationObserverGeneration,observer=new MutationObserverCtor(records=>{if(this.mutationObserver!==observer||this.mutationObserverDocument!==ownerDocument||this.mutationObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument)return;const isDirectChild=node=>node.parentNode===this,isElementTabContent=node=>{let current=node.nodeType===1?node:node.parentElement;for(;current&¤t!==this;){if(current.localName===tag("tab")&¤t.parentNode===this)return!0;current=current.parentElement}return!1};records.some(record=>record.type==="childList"?record.target===this||isElementTabContent(record.target):record.type==="characterData"?isElementTabContent(record.target):record.attributeName==="inert"&&this.projectedSourceSnapshots.has(record.target)?!1:isDirectChild(record.target)||isElementTabContent(record.target))&&this.syncTabs()});this.mutationObserver=observer,this.mutationObserverDocument=ownerDocument,observer.observe(this,{childList:!0,subtree:!0,attributes:!0,characterData:!0,attributeFilter:["alt","aria-hidden","aria-label","aria-labelledby","class","closable","disabled","hidden","inert","id","label","name","open","panel","slot","style"]})}disconnectedCallback(){this.resetMutationObserver(),this.resetProjectedSourceObserver(),this.restoreProjectedSources(),this.restoreProjectedSlots(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resetMutationObserver(),this.resetProjectedSourceObserver()}resetMutationObserver(){this.mutationObserverGeneration+=1,this.mutationObserver?.disconnect(),this.mutationObserver=void 0,this.mutationObserverDocument=void 0}readElementModel(children,projectedSlots){const seen=new Set,next=[],panels=children.filter(child=>child.localName===tag("tab-panel")),authoredNames=new Set(children.flatMap(child=>{if(child.localName===tag("tab")){const name=child.getAttribute("panel");return name?[name]:[]}if(child.localName===tag("tab-panel")){const name=child.getAttribute("name");return name?[name]:[]}return[]}));let index=0;for(const child of children){if(child.localName!==tag("tab"))continue;const authoredPanel=child.getAttribute("panel")||void 0;let slotName=authoredPanel??`${SYNTHETIC_PANEL_PREFIX}${index}`;if(!authoredPanel){let collision=0;for(;authoredNames.has(slotName)||seen.has(slotName);)collision+=1,slotName=`${SYNTHETIC_PANEL_PREFIX}${index}-${collision}`}if(index+=1,!authoredPanel&&!this.readElementLabel(child,{allowUnprojected:!0})||seen.has(slotName))continue;seen.add(slotName);const tabSlot=this.tabSlotName(slotName);this.projectSlot(child,tabSlot,projectedSlots);const visibleLabel=this.readElementLabel(child);if(!authoredPanel&&!visibleLabel)continue;const label=visibleLabel||slotName,panel=panels.find(candidate=>candidate.getAttribute("name")===slotName);panel&&this.projectSlot(panel,slotName,projectedSlots),next.push({slotName,label,disabled:child.hasAttribute("disabled"),inert:isInertChild(child),element:child}),!this.active&&child.hasAttribute("active")&&(this.active=slotName)}return next}readElementLabel(tab,options={}){const labelNodes=Array.from(tab.childNodes).filter(node=>node.nodeType!==Node.ELEMENT_NODE||node.getAttribute("slot")===null||node.getAttribute("slot")==="");return composedAccessibilityText(labelNodes,{ancestorBoundary:tab,isSubtreeExcluded:element=>this.isTabLabelSubtreeExcluded(element),requireRendered:!options.allowUnprojected,skipRootAncestorValidation:options.allowUnprojected}).replace(/\s+/g," ").trim()}libraryOwnsSourceInert(element){return this.projectedSourceSnapshots.get(element)?.libraryOwnsInert===!0}isTabLabelSubtreeExcluded(element){return isTabLabelSubtreeExcludedWithoutInert(element)||element.hasAttribute("inert")&&!this.libraryOwnsSourceInert(element)}snapshotProjectedSource(source){const inert=source.getAttribute("inert");return{inert,appliedInert:inert,libraryOwnsInert:!1}}adoptProjectedSourceInert(source,snapshot){const current=source.getAttribute("inert");current!==snapshot.appliedInert&&(snapshot.inert=current,snapshot.libraryOwnsInert=!1)}makeProjectedSourceInert(source,snapshot){source.hasAttribute("inert")||(source.setAttribute("inert",""),snapshot.libraryOwnsInert=!0),snapshot.appliedInert=source.getAttribute("inert")}restoreProjectedSource(source,snapshot){this.adoptProjectedSourceInert(source,snapshot),snapshot.inert===null?source.removeAttribute("inert"):source.setAttribute("inert",snapshot.inert)}restoreProjectedSources(){for(const[source,snapshot]of this.projectedSourceSnapshots)this.restoreProjectedSource(source,snapshot);this.projectedSourceSnapshots.clear()}resetProjectedSourceObserver(){this.projectedSourceObserverGeneration+=1,this.projectedSourceObserver?.disconnect(),this.projectedSourceObserver=void 0,this.projectedSourceObserverDocument=void 0}observeProjectedSources(){this.resetProjectedSourceObserver();const ownerDocument=this.ownerDocument,MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor||!this.isConnected||this.projectedSourceSnapshots.size===0)return;const generation=this.projectedSourceObserverGeneration,observer=new MutationObserverCtor(records=>{this.projectedSourceObserver!==observer||this.projectedSourceObserverDocument!==ownerDocument||this.projectedSourceObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||records.some(record=>this.projectedSourceSnapshots.has(record.target))&&this.syncTabs()});this.projectedSourceObserver=observer,this.projectedSourceObserverDocument=ownerDocument;for(const source of this.projectedSourceSnapshots.keys())observer.observe(source,{attributes:!0,attributeFilter:["inert"]})}projectedSources(tabs){const sources=new Set;for(const tab of tabs)for(const child of Array.from(tab.element.children))(child.getAttribute("slot")??"")===""&&sources.add(child);return sources}syncProjectedSources(tabs){const sources=this.projectedSources(tabs);for(const[source,snapshot]of this.projectedSourceSnapshots)this.adoptProjectedSourceInert(source,snapshot),sources.has(source)||(this.restoreProjectedSource(source,snapshot),this.projectedSourceSnapshots.delete(source));for(const source of sources){const snapshot=this.projectedSourceSnapshots.get(source)??this.snapshotProjectedSource(source);this.projectedSourceSnapshots.set(source,snapshot),this.adoptProjectedSourceInert(source,snapshot),this.makeProjectedSourceInert(source,snapshot)}this.observeProjectedSources()}adoptProjectedSourceInertStates(){for(const[source,snapshot]of this.projectedSourceSnapshots)this.adoptProjectedSourceInert(source,snapshot)}snapshotProjectedSlot(source){const slot=source.getAttribute("slot");return{slot,appliedSlot:slot,libraryOwnsSlot:!1}}adoptProjectedSlot(source,snapshot){const current=source.getAttribute("slot");current!==snapshot.appliedSlot&&(snapshot.slot=current,snapshot.libraryOwnsSlot=!1)}projectSlot(source,slot,projectedSlots){const snapshot=this.projectedSlotSnapshots.get(source)??this.snapshotProjectedSlot(source);this.projectedSlotSnapshots.set(source,snapshot),this.adoptProjectedSlot(source,snapshot),source.getAttribute("slot")!==slot&&(source.setAttribute("slot",slot),snapshot.libraryOwnsSlot=!0),snapshot.appliedSlot=source.getAttribute("slot"),projectedSlots.add(source)}restoreProjectedSlot(source,snapshot){this.adoptProjectedSlot(source,snapshot),snapshot.slot===null?source.removeAttribute("slot"):source.setAttribute("slot",snapshot.slot)}syncProjectedSlots(projectedSlots){for(const[source,snapshot]of this.projectedSlotSnapshots)projectedSlots.has(source)||(this.restoreProjectedSlot(source,snapshot),this.projectedSlotSnapshots.delete(source))}restoreProjectedSlots(){for(const[source,snapshot]of this.projectedSlotSnapshots)this.restoreProjectedSlot(source,snapshot);this.projectedSlotSnapshots.clear()}adoptProjectedSlotStates(){for(const[source,snapshot]of this.projectedSlotSnapshots)this.adoptProjectedSlot(source,snapshot)}isNavigable(tab){return!tab.disabled&&!tab.inert}willUpdate(changed){if(super.willUpdate(changed),!changed.has("tabs")&&!changed.has("active"))return;const focused=activeElementIn(this.renderRoot),focusedSlot=focused?.getAttribute("part")==="tab"?focused.getAttribute("data-slot"):null;focusedSlot!==null&&!this.tabs.some(tab=>tab.slotName===focusedSlot&&this.isNavigable(tab))&&(this.rehomeTabFocus=!0,this.focusedTab=this.active);const current=this.tabs.find(t=>t.slotName===this.active);current&&this.isNavigable(current)||(this.rehomeTabFocus=this.rehomeTabFocus||focusedSlot!==null,this.active=this.tabs.find(t=>this.isNavigable(t))?.slotName??"",this.focusedTab=this.active)}updated(changed){super.updated(changed),(changed.has("active")||changed.has("tabs"))&&this.syncElementActiveState(),this.scrollOverflow.observeExtra(this.renderRoot.querySelectorAll('[part="tab"]')),this.measureTabScrollEdges(),this.rehomeTabFocus&&(this.rehomeTabFocus=!1,this.renderRoot.querySelector('[part="tab"][tabindex="0"]')?.focus())}selectTab(tab){if(!this.isNavigable(tab)||tab.slotName===this.active)return;const previous=this.active;this.active=tab.slotName,this.focusedTab=tab.slotName,previous&&this.emit("lr-tab-hide",{name:previous}),this.emit("lr-tab-show",{name:tab.slotName})}show(panel){const tab=this.tabs.find(candidate=>candidate.slotName===panel);tab&&this.selectTab(tab)}syncElementActiveState(){for(const child of Array.from(this.children))if(child.localName===tag("tab")){const definition=this.tabs.find(tab=>tab.element===child);child.toggleAttribute("active",definition?.slotName===this.active)}else child.localName===tag("tab-panel")&&child.toggleAttribute("active",child.getAttribute("name")===this.active)}focusOnly(tab){this.focusedTab=tab.slotName,this.focusTab(tab.slotName)}get rovingTab(){if(this.activation!=="manual")return this.active;const candidate=this.tabs.find(t=>t.slotName===this.focusedTab&&this.isNavigable(t));return candidate?candidate.slotName:this.active}keyboardOriginTab(event,navigable){const eventButton=event.composedPath().find(candidate=>candidate.nodeType===1&&candidate.getAttribute?.("part")==="tab"&&candidate.getRootNode()===this.renderRoot),focused=activeElementIn(this.renderRoot),owned=(eventButton??(focused?.getAttribute("part")==="tab"?focused:void 0))?.dataset.slot;return navigable.find(tab=>tab.slotName===owned)??navigable.find(tab=>tab.slotName===this.rovingTab)}focusTab(slotName){const buttons=this.renderRoot.querySelectorAll('[part="tab"]');for(const button of Array.from(buttons))if(button.dataset.slot===slotName){button.focus();return}}get isVertical(){return this.placement==="start"||this.placement==="end"}tabId(slotName){return this.idsFor(slotName).tab}panelId(slotName){return this.idsFor(slotName).panel}idsFor(slotName){const existing=this.idsBySlot.get(slotName);if(existing)return existing;const token=`${this.baseId}-${this.nextOpaqueId++}`,ids={tab:`${token}-tab`,panel:`${token}-panel`};return this.idsBySlot.set(slotName,ids),ids}tabSlotName(slotName){return`${slotName}-tab`}get scrollControlsSuppressed(){return this.withoutScrollControls||this.noScrollControls}measureTabScrollEdges(){const tablist=this.renderRoot.querySelector('[part~="tablist"]');if(!tablist||this.isVertical){this.setTabScrollEdges(!1,!1,tablist);return}const maximum=Math.max(0,tablist.scrollWidth-tablist.clientWidth),position=Math.max(0,Math.min(maximum,this.effectiveDirection==="rtl"?-tablist.scrollLeft:tablist.scrollLeft));this.setTabScrollEdges(position>1,position<maximum-1,tablist)}setTabScrollEdges(start,end,tablist){tablist?.toggleAttribute("data-scroll-start",start),tablist?.toggleAttribute("data-scroll-end",end),!(start===this.scrollStartAvailable&&end===this.scrollEndAvailable)&&(this.scrollStartAvailable=start,this.scrollEndAvailable=end)}scrollTabs(edge){const tablist=this.renderRoot.querySelector('[part~="tablist"]');if(!tablist||!isHtmlElement(tablist)||typeof tablist.scrollBy!="function")return;const step=Math.max(1,tablist.clientWidth*SCROLL_STEP_RATIO),towardEnd=edge==="end"?1:-1,physical=this.effectiveDirection==="rtl"?-towardEnd:towardEnd;tablist.scrollBy({left:step*physical,behavior:prefersReducedMotion(this.ownerDocument.defaultView)?"instant":"smooth"})}renderScrollControl(edge){if(this.isVertical||this.scrollControlsSuppressed)return nothing;const available=edge==="start"?this.scrollStartAvailable:this.scrollEndAvailable;return html`<button
|
|
2
2
|
type="button"
|
|
3
3
|
part=${edge==="start"?"scroll-button scroll-button__base scroll-button-start scroll-button--start":"scroll-button scroll-button__base scroll-button-end scroll-button--end"}
|
|
4
4
|
tabindex="-1"
|
|
@@ -104,12 +104,16 @@ ariaLabel?:string;}export interface LyraWidgetEventMap{'lr-collapse-request':Cus
|
|
|
104
104
|
* @status stable
|
|
105
105
|
* @since 4.0.0
|
|
106
106
|
*/
|
|
107
|
-
export declare class LyraWidget extends LyraElement<LyraWidgetEventMap>{static styles:import("lit").CSSResultGroup[];private actionsScrollOverflow;private viewTogglesScrollOverflow;
|
|
107
|
+
export declare class LyraWidget extends LyraElement<LyraWidgetEventMap>{static styles:import("lit").CSSResultGroup[];private actionsScrollOverflow;private viewTogglesScrollOverflow;
|
|
108
|
+
/** Header title. Removing the attribute omits the copy without changing null readback. */
|
|
109
|
+
label:string;
|
|
108
110
|
/** Overrides the fullscreen dialog's accessible name, taking precedence over both `label` and a
|
|
109
111
|
* slotted `label`. An explicitly empty value remains an explicit name; fallbacks apply only when
|
|
110
112
|
* the value is absent. Fed only by a host `aria-label`, matching `lr-scroller`'s/`lr-carousel`'s
|
|
111
113
|
* own host-override pattern. */
|
|
112
|
-
accessibleLabel:string|null;
|
|
114
|
+
accessibleLabel:string|null;
|
|
115
|
+
/** Secondary header copy. Removed or empty attributes render no fallback text. */
|
|
116
|
+
sublabel:string;collapsible:boolean;collapsed:boolean;
|
|
113
117
|
/** Persists `collapsed` to `localStorage` across reloads when set. Namespaced as
|
|
114
118
|
* `lr-widget:${storageKey}` -- mirrors `lr-app-rail`'s/`lr-table`'s identical `storage-key`
|
|
115
119
|
* pattern. Unset (the default) touches storage not at all. */
|