@ds-mo/ui 16.1.1 → 16.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +133 -32
- package/dist/angular/boolean-value-accessor.js +3 -3
- package/dist/angular/ds-agent-activity.js +3 -3
- package/dist/angular/ds-agent-questionnaire.js +3 -3
- package/dist/angular/ds-agent-response.js +3 -3
- package/dist/angular/ds-agent-source-list.js +3 -3
- package/dist/angular/ds-agent-tool-call.js +3 -3
- package/dist/angular/ds-attachment-list.js +3 -3
- package/dist/angular/ds-avatar.js +3 -3
- package/dist/angular/ds-badge.js +3 -3
- package/dist/angular/ds-banner.js +3 -3
- package/dist/angular/ds-bar-action.js +3 -3
- package/dist/angular/ds-bar-nav.js +3 -3
- package/dist/angular/ds-bar-page-title.js +3 -3
- package/dist/angular/ds-bar-title.js +3 -3
- package/dist/angular/ds-bar-workflow.js +3 -3
- package/dist/angular/ds-breadcrumb.js +3 -3
- package/dist/angular/ds-button-filled.js +3 -3
- package/dist/angular/ds-button-inverted.js +3 -3
- package/dist/angular/ds-button-unfilled.js +3 -3
- package/dist/angular/ds-calendar.js +3 -3
- package/dist/angular/ds-card-action-center.js +3 -3
- package/dist/angular/ds-card-chart.js +3 -3
- package/dist/angular/ds-card-navigation.js +3 -3
- package/dist/angular/ds-card-overview.js +3 -3
- package/dist/angular/ds-card-setting.js +3 -3
- package/dist/angular/ds-card-settings-scope.js +3 -3
- package/dist/angular/ds-chart-legend.js +3 -3
- package/dist/angular/ds-chart.js +3 -3
- package/dist/angular/ds-checkbox-group.js +3 -3
- package/dist/angular/ds-checkbox.js +3 -3
- package/dist/angular/ds-chip.js +3 -3
- package/dist/angular/ds-code-block.js +3 -3
- package/dist/angular/ds-conversation-list-item.js +3 -3
- package/dist/angular/ds-conversation-list-section.js +3 -3
- package/dist/angular/ds-conversation-list.js +3 -3
- package/dist/angular/ds-data-customize.js +3 -3
- package/dist/angular/ds-data-filter.js +3 -3
- package/dist/angular/ds-data-group.js +3 -3
- package/dist/angular/ds-data-preferences.js +3 -3
- package/dist/angular/ds-data-saved-views.js +3 -3
- package/dist/angular/ds-data-search.js +3 -3
- package/dist/angular/ds-data-sort.js +3 -3
- package/dist/angular/ds-data-toolbar.js +3 -3
- package/dist/angular/ds-divider.js +3 -3
- package/dist/angular/ds-empty-state.js +3 -3
- package/dist/angular/ds-field.js +3 -3
- package/dist/angular/ds-filter-menu.js +3 -3
- package/dist/angular/ds-icon.js +3 -3
- package/dist/angular/ds-inline-banner-settings.js +3 -3
- package/dist/angular/ds-input-date.js +3 -3
- package/dist/angular/ds-input-time.js +3 -3
- package/dist/angular/ds-input.js +3 -3
- package/dist/angular/ds-loader.js +3 -3
- package/dist/angular/ds-map-cluster-marker.js +3 -3
- package/dist/angular/ds-map-entity-marker.js +3 -3
- package/dist/angular/ds-map-marker.js +3 -3
- package/dist/angular/ds-markdown.js +3 -3
- package/dist/angular/ds-menu.js +3 -3
- package/dist/angular/ds-message-actions.js +3 -3
- package/dist/angular/ds-message-bubble.js +3 -3
- package/dist/angular/ds-message-composer.js +3 -3
- package/dist/angular/ds-message-scroller.js +3 -3
- package/dist/angular/ds-message.js +3 -3
- package/dist/angular/ds-mobile-bar-nav.js +3 -3
- package/dist/angular/ds-mobile-header.js +3 -3
- package/dist/angular/ds-mobile-section-switcher.js +3 -3
- package/dist/angular/ds-mobile-sheet-nav.js +3 -3
- package/dist/angular/ds-modal.js +3 -3
- package/dist/angular/ds-navigation-tab-group.js +3 -3
- package/dist/angular/ds-pagination.js +3 -3
- package/dist/angular/ds-panel-nav.js +3 -3
- package/dist/angular/ds-panel-sub-nav.js +3 -3
- package/dist/angular/ds-panel-tool-header.js +3 -3
- package/dist/angular/ds-panel-tool-search.js +3 -3
- package/dist/angular/ds-panel-tools.js +3 -3
- package/dist/angular/ds-paper-texture.js +3 -3
- package/dist/angular/ds-radio-tile.js +3 -3
- package/dist/angular/ds-radio.js +3 -3
- package/dist/angular/ds-score.js +3 -3
- package/dist/angular/ds-scroll-overlay.js +3 -3
- package/dist/angular/ds-select-toggle.js +3 -3
- package/dist/angular/ds-select.js +3 -3
- package/dist/angular/ds-setting-row-checkbox.js +3 -3
- package/dist/angular/ds-setting-row-radio.js +3 -3
- package/dist/angular/ds-setting-row-toggle.js +3 -3
- package/dist/angular/ds-shell-app.js +3 -3
- package/dist/angular/ds-shell-page.js +3 -3
- package/dist/angular/ds-shell-tools.js +3 -3
- package/dist/angular/ds-skeleton.js +3 -3
- package/dist/angular/ds-slider.js +3 -3
- package/dist/angular/ds-swatch-picker.js +3 -3
- package/dist/angular/ds-switch.js +3 -3
- package/dist/angular/ds-tab-group.js +3 -3
- package/dist/angular/ds-table.js +3 -3
- package/dist/angular/ds-tag.js +3 -3
- package/dist/angular/ds-text.js +3 -3
- package/dist/angular/ds-textarea.js +3 -3
- package/dist/angular/ds-time-picker.js +3 -3
- package/dist/angular/ds-toast.js +3 -3
- package/dist/angular/ds-tooltip-chart.js +3 -3
- package/dist/angular/ds-tooltip.js +3 -3
- package/dist/angular/ds-typing-indicator.js +3 -3
- package/dist/angular/number-value-accessor.js +3 -3
- package/dist/angular/radio-value-accessor.js +3 -3
- package/dist/angular/select-value-accessor.js +3 -3
- package/dist/angular/text-value-accessor.js +3 -3
- package/dist/angular/value-accessor.js +3 -3
- package/dist/components/THIRD-PARTY-NOTICES +2 -2
- package/dist/components/bundled-dependencies.json +2 -2
- package/dist/components/ds-agent-activity.js +1 -1
- package/dist/components/ds-agent-questionnaire.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-source-list.js +1 -1
- package/dist/components/ds-agent-tool-call.js +1 -1
- package/dist/components/ds-attachment-list.js +1 -1
- package/dist/components/ds-avatar.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-page-title.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-inverted.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-calendar.js +1 -1
- package/dist/components/ds-card-action-center.js +1 -1
- package/dist/components/ds-card-chart.js +1 -1
- package/dist/components/ds-card-navigation.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-legend.js.map +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-data-customize.js +1 -1
- package/dist/components/ds-data-customize.js.map +1 -1
- package/dist/components/ds-data-filter.js +1 -1
- package/dist/components/ds-data-group.js +1 -1
- package/dist/components/ds-data-preferences.js +1 -1
- package/dist/components/ds-data-saved-views.js +1 -1
- package/dist/components/ds-data-search.js +1 -1
- package/dist/components/ds-data-sort.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-filter-menu.js +1 -1
- package/dist/components/ds-icon.js +1 -1
- package/dist/components/ds-input-date.js +1 -1
- package/dist/components/ds-input-time.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-map-entity-marker.js +1 -1
- package/dist/components/ds-map-marker.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-mobile-bar-nav.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-navigation-tab-group.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-select-toggle.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/{p-C3nUi5Lo.js → p-1lWK_LMY.js} +2 -2
- package/dist/components/{p-BdJqRDKY.js → p-6r60E0i4.js} +2 -2
- package/dist/components/{p-BKd0e8k8.js → p-BFgJoeVV.js} +2 -2
- package/dist/components/{p-BK_SriZN.js → p-BI-XuQKW.js} +2 -2
- package/dist/components/{p-DOazC0iw.js → p-BNvZM4jP.js} +2 -2
- package/dist/components/{p-BNySDuzx.js → p-BckLHaey.js} +2 -2
- package/dist/components/{p-ZcZ0N7Ok.js → p-BctjNfzt.js} +2 -2
- package/dist/components/{p-CwL5zodA.js → p-Bt1Ybvz-.js} +2 -2
- package/dist/components/{p-CcWT4SzP.js → p-BuvVFyAA.js} +2 -2
- package/dist/components/p-C942uiH1.js +3 -0
- package/dist/components/p-C942uiH1.js.map +1 -0
- package/dist/components/{p-DXAY6GB5.js → p-CE_S4oQ_.js} +2 -2
- package/dist/components/{p-BLQgaSh-.js → p-CMZAEySh.js} +2 -2
- package/dist/components/{p-DMjOjrHi.js → p-CXrOGz7X.js} +2 -2
- package/dist/components/{p-B8jrUwL-.js → p-CbyZ7BDJ.js} +2 -2
- package/dist/components/{p-ZumxIz-2.js → p-Cc8p57pS.js} +2 -2
- package/dist/components/{p-xouEdChm.js → p-ClgJZFkb.js} +2 -2
- package/dist/components/{p-Cm1FS7D-.js → p-ClhfXMaD.js} +2 -2
- package/dist/components/{p-zdiRX3Sf.js → p-CnsuVR2e.js} +2 -2
- package/dist/components/{p-txmcXZdy.js → p-CsGkdf4W.js} +2 -2
- package/dist/components/{p-CymFzY_N.js → p-CtomYv1z.js} +2 -2
- package/dist/components/{p-BxkhBlKJ.js → p-D-Lo5uuI.js} +2 -2
- package/dist/components/{p-9zDZcSc0.js → p-D3FrQk7o.js} +2 -2
- package/dist/components/{p-Bn-tsogb.js → p-D5-hqLPK.js} +2 -2
- package/dist/components/{p-D_kOVT6i.js → p-D8iNLSCa.js} +2 -2
- package/dist/components/{p-qnp-yeXl.js → p-DQ-wfTOw.js} +2 -2
- package/dist/components/{p-BknNUjWh.js → p-DYI6UlOP.js} +2 -2
- package/dist/components/{p-B3-zImxn.js → p-Dc_zSOKq.js} +2 -2
- package/dist/components/{p-DI5GEmid.js → p-DiNEjFpy.js} +2 -2
- package/dist/components/{p-BJB6kfA2.js → p-M-Sxsv7V.js} +2 -2
- package/dist/components/{p-CvK-Gy-b.js → p-cvVUXaen.js} +2 -2
- package/dist/components/{p-BgMeLCj3.js → p-hFe35P2l.js} +2 -2
- package/dist/components/{p-DfGJX_Eo.js → p-hom6svhE.js} +2 -2
- package/dist/components/{p-D9MqUHig.js → p-lnCWfvuA.js} +2 -2
- package/dist/components/{p-Ddkyu_wE.js → p-oBBzQpg_.js} +2 -2
- package/dist/components/p-omfGVBEt.js +2 -0
- package/dist/components/p-omfGVBEt.js.map +1 -0
- package/dist/docs/components.json +359 -39
- package/dist/lint/THIRD-PARTY-NOTICES +1 -1
- package/dist/lint/bundled-dependencies.json +1 -1
- package/dist/lint/index.js +18 -10
- package/dist/mcp-data/registry/agent-activity.json +1 -1
- package/dist/mcp-data/registry/agent-questionnaire.json +1 -1
- package/dist/mcp-data/registry/agent-response.json +31 -3
- package/dist/mcp-data/registry/agent-source-list.json +1 -1
- package/dist/mcp-data/registry/agent-tool-call.json +23 -3
- package/dist/mcp-data/registry/attachment-list.json +1 -1
- package/dist/mcp-data/registry/avatar.json +1 -1
- package/dist/mcp-data/registry/badge.json +1 -1
- package/dist/mcp-data/registry/banner.json +11 -3
- package/dist/mcp-data/registry/bar-action.json +11 -3
- package/dist/mcp-data/registry/bar-nav.json +1 -1
- package/dist/mcp-data/registry/bar-page-title.json +1 -1
- package/dist/mcp-data/registry/bar-title.json +1 -1
- package/dist/mcp-data/registry/bar-workflow.json +1 -1
- package/dist/mcp-data/registry/breadcrumb.json +1 -1
- package/dist/mcp-data/registry/button-filled.json +1 -1
- package/dist/mcp-data/registry/button-inverted.json +1 -1
- package/dist/mcp-data/registry/button-unfilled.json +1 -1
- package/dist/mcp-data/registry/calendar.json +1 -1
- package/dist/mcp-data/registry/card-action-center.json +1 -1
- package/dist/mcp-data/registry/card-chart.json +31 -3
- package/dist/mcp-data/registry/card-navigation.json +13 -3
- package/dist/mcp-data/registry/card-overview.json +23 -3
- package/dist/mcp-data/registry/card-setting.json +19 -3
- package/dist/mcp-data/registry/card-settings-scope.json +1 -1
- package/dist/mcp-data/registry/chart-legend.json +7 -7
- package/dist/mcp-data/registry/chart.json +1 -1
- package/dist/mcp-data/registry/checkbox-group.json +13 -3
- package/dist/mcp-data/registry/checkbox.json +1 -1
- package/dist/mcp-data/registry/chip.json +1 -1
- package/dist/mcp-data/registry/code-block.json +1 -1
- package/dist/mcp-data/registry/conversation-list-item.json +23 -3
- package/dist/mcp-data/registry/conversation-list-section.json +13 -3
- package/dist/mcp-data/registry/conversation-list.json +25 -3
- package/dist/mcp-data/registry/data-customize.json +1 -1
- package/dist/mcp-data/registry/data-filter.json +1 -1
- package/dist/mcp-data/registry/data-group.json +1 -1
- package/dist/mcp-data/registry/data-preferences.json +1 -1
- package/dist/mcp-data/registry/data-saved-views.json +1 -1
- package/dist/mcp-data/registry/data-search.json +1 -1
- package/dist/mcp-data/registry/data-sort.json +1 -1
- package/dist/mcp-data/registry/data-toolbar.json +29 -3
- package/dist/mcp-data/registry/divider.json +1 -1
- package/dist/mcp-data/registry/empty-state.json +1 -1
- package/dist/mcp-data/registry/field.json +13 -3
- package/dist/mcp-data/registry/filter-menu.json +1 -1
- package/dist/mcp-data/registry/icon.json +2 -2
- package/dist/mcp-data/registry/inline-banner-settings.json +1 -1
- package/dist/mcp-data/registry/input-date.json +1 -1
- package/dist/mcp-data/registry/input-time.json +1 -1
- package/dist/mcp-data/registry/input.json +17 -3
- package/dist/mcp-data/registry/loader.json +1 -1
- package/dist/mcp-data/registry/map-cluster-marker.json +1 -1
- package/dist/mcp-data/registry/map-entity-marker.json +1 -1
- package/dist/mcp-data/registry/map-marker.json +1 -1
- package/dist/mcp-data/registry/markdown.json +1 -1
- package/dist/mcp-data/registry/menu.json +1 -1
- package/dist/mcp-data/registry/message-actions.json +1 -1
- package/dist/mcp-data/registry/message-bubble.json +13 -3
- package/dist/mcp-data/registry/message-composer.json +29 -3
- package/dist/mcp-data/registry/message-scroller.json +25 -3
- package/dist/mcp-data/registry/message.json +37 -3
- package/dist/mcp-data/registry/mobile-bar-nav.json +1 -1
- package/dist/mcp-data/registry/mobile-header.json +17 -3
- package/dist/mcp-data/registry/mobile-section-switcher.json +1 -1
- package/dist/mcp-data/registry/mobile-sheet-nav.json +1 -1
- package/dist/mcp-data/registry/modal.json +19 -3
- package/dist/mcp-data/registry/navigation-tab-group.json +1 -1
- package/dist/mcp-data/registry/pagination.json +1 -1
- package/dist/mcp-data/registry/panel-nav.json +1 -1
- package/dist/mcp-data/registry/panel-sub-nav.json +1 -1
- package/dist/mcp-data/registry/panel-tool-header.json +1 -1
- package/dist/mcp-data/registry/panel-tool-search.json +1 -1
- package/dist/mcp-data/registry/panel-tools.json +1 -1
- package/dist/mcp-data/registry/paper-texture.json +1 -1
- package/dist/mcp-data/registry/radio-tile.json +1 -1
- package/dist/mcp-data/registry/radio.json +1 -1
- package/dist/mcp-data/registry/registry.json +133 -32
- package/dist/mcp-data/registry/score.json +1 -1
- package/dist/mcp-data/registry/scroll-overlay.json +19 -3
- package/dist/mcp-data/registry/select-toggle.json +1 -1
- package/dist/mcp-data/registry/select.json +1 -1
- package/dist/mcp-data/registry/setting-row-checkbox.json +13 -3
- package/dist/mcp-data/registry/setting-row-radio.json +13 -3
- package/dist/mcp-data/registry/setting-row-toggle.json +1 -1
- package/dist/mcp-data/registry/shell-app.json +61 -3
- package/dist/mcp-data/registry/shell-page.json +25 -3
- package/dist/mcp-data/registry/shell-tools.json +1 -1
- package/dist/mcp-data/registry/skeleton.json +1 -1
- package/dist/mcp-data/registry/slider.json +1 -1
- package/dist/mcp-data/registry/swatch-picker.json +1 -1
- package/dist/mcp-data/registry/switch.json +1 -1
- package/dist/mcp-data/registry/tab-group.json +1 -1
- package/dist/mcp-data/registry/table.json +25 -1
- package/dist/mcp-data/registry/tag.json +1 -1
- package/dist/mcp-data/registry/text.json +13 -3
- package/dist/mcp-data/registry/textarea.json +1 -1
- package/dist/mcp-data/registry/time-picker.json +1 -1
- package/dist/mcp-data/registry/toast.json +1 -1
- package/dist/mcp-data/registry/tooltip-chart.json +1 -1
- package/dist/mcp-data/registry/tooltip.json +13 -3
- package/dist/mcp-data/registry/typing-indicator.json +1 -1
- package/dist/types/components/ChartLegend/ChartLegend.d.ts +2 -2
- package/dist/types/components.d.ts +3 -3
- package/dist/types/stencil-public-runtime.d.ts +73 -55
- package/package.json +3 -3
- package/dist/components/p-Ckar-ZZa.js +0 -2
- package/dist/components/p-Ckar-ZZa.js.map +0 -1
- package/dist/components/p-GP7Dz3qO.js +0 -3
- package/dist/components/p-GP7Dz3qO.js.map +0 -1
- /package/dist/components/{p-C3nUi5Lo.js.map → p-1lWK_LMY.js.map} +0 -0
- /package/dist/components/{p-BdJqRDKY.js.map → p-6r60E0i4.js.map} +0 -0
- /package/dist/components/{p-BKd0e8k8.js.map → p-BFgJoeVV.js.map} +0 -0
- /package/dist/components/{p-BK_SriZN.js.map → p-BI-XuQKW.js.map} +0 -0
- /package/dist/components/{p-DOazC0iw.js.map → p-BNvZM4jP.js.map} +0 -0
- /package/dist/components/{p-BNySDuzx.js.map → p-BckLHaey.js.map} +0 -0
- /package/dist/components/{p-ZcZ0N7Ok.js.map → p-BctjNfzt.js.map} +0 -0
- /package/dist/components/{p-CwL5zodA.js.map → p-Bt1Ybvz-.js.map} +0 -0
- /package/dist/components/{p-CcWT4SzP.js.map → p-BuvVFyAA.js.map} +0 -0
- /package/dist/components/{p-DXAY6GB5.js.map → p-CE_S4oQ_.js.map} +0 -0
- /package/dist/components/{p-BLQgaSh-.js.map → p-CMZAEySh.js.map} +0 -0
- /package/dist/components/{p-DMjOjrHi.js.map → p-CXrOGz7X.js.map} +0 -0
- /package/dist/components/{p-B8jrUwL-.js.map → p-CbyZ7BDJ.js.map} +0 -0
- /package/dist/components/{p-ZumxIz-2.js.map → p-Cc8p57pS.js.map} +0 -0
- /package/dist/components/{p-xouEdChm.js.map → p-ClgJZFkb.js.map} +0 -0
- /package/dist/components/{p-Cm1FS7D-.js.map → p-ClhfXMaD.js.map} +0 -0
- /package/dist/components/{p-zdiRX3Sf.js.map → p-CnsuVR2e.js.map} +0 -0
- /package/dist/components/{p-txmcXZdy.js.map → p-CsGkdf4W.js.map} +0 -0
- /package/dist/components/{p-CymFzY_N.js.map → p-CtomYv1z.js.map} +0 -0
- /package/dist/components/{p-BxkhBlKJ.js.map → p-D-Lo5uuI.js.map} +0 -0
- /package/dist/components/{p-9zDZcSc0.js.map → p-D3FrQk7o.js.map} +0 -0
- /package/dist/components/{p-Bn-tsogb.js.map → p-D5-hqLPK.js.map} +0 -0
- /package/dist/components/{p-D_kOVT6i.js.map → p-D8iNLSCa.js.map} +0 -0
- /package/dist/components/{p-qnp-yeXl.js.map → p-DQ-wfTOw.js.map} +0 -0
- /package/dist/components/{p-BknNUjWh.js.map → p-DYI6UlOP.js.map} +0 -0
- /package/dist/components/{p-B3-zImxn.js.map → p-Dc_zSOKq.js.map} +0 -0
- /package/dist/components/{p-DI5GEmid.js.map → p-DiNEjFpy.js.map} +0 -0
- /package/dist/components/{p-BJB6kfA2.js.map → p-M-Sxsv7V.js.map} +0 -0
- /package/dist/components/{p-CvK-Gy-b.js.map → p-cvVUXaen.js.map} +0 -0
- /package/dist/components/{p-BgMeLCj3.js.map → p-hFe35P2l.js.map} +0 -0
- /package/dist/components/{p-DfGJX_Eo.js.map → p-hom6svhE.js.map} +0 -0
- /package/dist/components/{p-D9MqUHig.js.map → p-lnCWfvuA.js.map} +0 -0
- /package/dist/components/{p-Ddkyu_wE.js.map → p-oBBzQpg_.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as i,H as n,c as a,h as o,a as r,t as d}from"./index.js";import{d as t}from"./p-GP7Dz3qO.js";import{d as s}from"./p-DcvPY30Q.js";import{d as e}from"./p-DMPn_dt7.js";import{r as c}from"./p-CbrDF2gA.js";const l=()=>`.sc-ds-card-navigation-h,.sc-ds-card-navigation:where(.ds-table),.sc-ds-card-navigation:where(.tooltip-popup),.sc-ds-card-navigation:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-card-navigation,.ds-control--lg.sc-ds-card-navigation-h,.ds-control--md.sc-ds-card-navigation-h,.ds-control--md.sc-ds-card-navigation,.ds-control--sm.sc-ds-card-navigation-h,.ds-control--sm.sc-ds-card-navigation,.ds-control--xs.sc-ds-card-navigation-h,.ds-control--xs.sc-ds-card-navigation{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-card-navigation-h,.ds-control--lg.sc-ds-card-navigation{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-navigation-h,.ds-control--md.sc-ds-card-navigation{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-navigation-h,.ds-control--sm.sc-ds-card-navigation{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-navigation-h,.ds-control--xs.sc-ds-card-navigation{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-card-navigation{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-card-navigation{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-card-navigation{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-card-navigation,.ds-chrome-header__trailing.sc-ds-card-navigation{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-card-navigation{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-card-navigation{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-card-navigation{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-card-navigation{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-card-navigation,.ds-chrome-header__description.sc-ds-card-navigation{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-card-navigation{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-card-navigation .ds-chrome-header__description.sc-ds-card-navigation{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-card-navigation:root,.sc-ds-card-navigation-h,.ds-forced-colors-scope.sc-ds-card-navigation{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-card-navigation-h,.ds-interaction-fill.sc-ds-card-navigation{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-card-navigation-h::before,.ds-interaction-fill.sc-ds-card-navigation::before,.ds-interaction-fill.sc-ds-card-navigation-h::after,.ds-interaction-fill.sc-ds-card-navigation::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-card-navigation-h::before,.ds-interaction-fill.sc-ds-card-navigation::before{z-index:1}.ds-interaction-fill.sc-ds-card-navigation-h::after,.ds-interaction-fill.sc-ds-card-navigation::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-card-navigation-h,.ds-interaction-fill--bordered.sc-ds-card-navigation{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-card-navigation-h::before,.ds-interaction-fill--selected.sc-ds-card-navigation::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-card-navigation-h,.ds-interaction-fill--selected.sc-ds-card-navigation{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-navigation-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-navigation:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-card-navigation-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-navigation:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-card-navigation-h::after,.ds-interaction-fill--grouped.sc-ds-card-navigation::after,.ds-interaction-fill--grouped.sc-ds-card-navigation-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-navigation:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-card-navigation-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-navigation:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-card-navigation-h,.ds-interaction-fill--grouped.sc-ds-card-navigation{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-card-navigation-h>.ds-interaction-fill__content.sc-ds-card-navigation,.ds-interaction-fill.sc-ds-card-navigation>.ds-interaction-fill__content.sc-ds-card-navigation,.ds-interaction-fill__content.sc-ds-card-navigation{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-card-navigation-h,.ds-interaction-fill--on-faint.sc-ds-card-navigation{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-card-navigation-h,.ds-interaction-fill--on-medium.sc-ds-card-navigation{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-card-navigation-h,.ds-interaction-fill--on-bold.sc-ds-card-navigation{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-card-navigation-h,.ds-interaction-fill--on-strong.sc-ds-card-navigation{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-card-navigation-h,.ds-interaction-fill--on-translucent.sc-ds-card-navigation{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-card-navigation-h,.ds-interaction-fill--on-inverted.sc-ds-card-navigation{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-card-navigation-h,.ds-interaction-fill--on-media.sc-ds-card-navigation{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-card-navigation-h,.ds-interaction-fill--on-always-dark.sc-ds-card-navigation{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-card-navigation-h,.ds-interaction-fill--on-chrome.sc-ds-card-navigation{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-card-navigation-h,.ds-interaction-fill--on-navigation.sc-ds-card-navigation{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-card-navigation-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-card-navigation:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-card-navigation-h::after,.ds-interaction-fill.sc-ds-card-navigation::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-card-navigation-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-card-navigation:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-card-navigation-h::before,.ds-interaction-fill--selected.sc-ds-card-navigation::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-navigation-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-card-navigation:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-card-navigation:root,.sc-ds-card-navigation-h,.ds-forced-colors-scope.sc-ds-card-navigation{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-navigation-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-card-navigation-h,.ds-focus-ring.sc-ds-card-navigation,.ds-focus-ring-inset.sc-ds-card-navigation-h,.ds-focus-ring-inset.sc-ds-card-navigation{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-card-navigation-h:focus-visible,.ds-focus-ring.sc-ds-card-navigation:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-navigation-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-navigation{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-card-navigation-h:focus-visible,.ds-focus-ring-inset.sc-ds-card-navigation:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-card-navigation-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-card-navigation:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-navigation-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-navigation{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-navigation-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-navigation::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-card-navigation-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-card-navigation:root,.sc-ds-card-navigation-h,.ds-forced-colors-scope.sc-ds-card-navigation{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-navigation-h{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-navigation-width);max-width:100%;overflow:hidden;border:none;border-radius:var(--ds-radius-card);background-color:var(--color-background-primary);box-shadow:var(--effect-shadow-elevated-sm)}.card-navigation--content.sc-ds-card-navigation-h{min-height:var(--_card-navigation-min-height)}.sc-ds-card-navigation-h::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-sm);pointer-events:none}.card-navigation__target.sc-ds-card-navigation{color:inherit;text-decoration:none;cursor:pointer}.card-navigation__header.sc-ds-card-navigation{flex:0 0 auto;align-items:flex-start;border-radius:inherit}.card-navigation--content.sc-ds-card-navigation-h .card-navigation__header.sc-ds-card-navigation{border-radius:var(--ds-radius-card) var(--ds-radius-card) 0 0;--ds-interaction-divider-width:var(--dimension-stroke-width-012);--ds-interaction-divider-color:var(--color-border-tertiary)}.card-navigation__copy.sc-ds-card-navigation{min-height:var(--dimension-size-400);justify-content:flex-start}.card-navigation__line.sc-ds-card-navigation{display:grid;min-width:0;align-items:start}.card-navigation__line.sc-ds-card-navigation>*.sc-ds-card-navigation{grid-area:1 / 1}.card-navigation--loading.sc-ds-card-navigation-h ds-text.sc-ds-card-navigation{visibility:hidden}ds-text.card-navigation__title.sc-ds-card-navigation,ds-text.card-navigation__description.sc-ds-card-navigation{overflow-wrap:anywhere}.card-navigation__chevron.sc-ds-card-navigation{align-self:center;justify-content:center;width:var(--dimension-size-400);color:var(--color-foreground-secondary)}.card-navigation__body.sc-ds-card-navigation{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--ds-radius-card) var(--ds-radius-card)}@media (forced-colors: active){.sc-ds-card-navigation-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.sc-ds-card-navigation-h::after{box-shadow:none}}`;const v={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const g={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const h=i(class i extends n{constructor(i){super();if(i!==false){this.__registerHost()}this.dsNavigate=a(this,"dsNavigate",7);this.isLoading=false;this.variant="navigation-only";this.cardWidth="md"}handleNavigation(i,n){const a=this.dsNavigate.emit({href:i,originalEvent:n});if(a.defaultPrevented)n.preventDefault()}renderHeader(i){const n=i?"a":"div";const a=this.description?.trim();return o(n,{class:{"card-navigation__target":true,"card-navigation__header":true,"ds-chrome-header":true,"ds-interaction-fill":!!i,"ds-focus-ring-inset":!!i},href:i,inert:this.isLoading,onClick:i?n=>this.handleNavigation(i,n):undefined},o("div",{class:{"card-navigation__copy":true,"ds-chrome-header__copy":true,"ds-chrome-header__copy--stacked":true,"ds-control--md":true,"ds-interaction-fill__content":true}},o("div",{class:"card-navigation__line"},o("ds-text",{class:"card-navigation__title ds-chrome-header__heading",variant:"text-title-small",emphasis:true,color:"primary",as:"h2"},this.heading),this.isLoading&&o("ds-skeleton",{width:"min(60%, calc(var(--dimension-size-800) * 2))",textVariant:"text-title-small"})),a?o("div",{class:"card-navigation__line"},o("ds-text",{class:"card-navigation__description ds-chrome-header__description",variant:"text-body-small",color:"secondary",as:"span"},a),this.isLoading&&o("ds-skeleton",{width:"95%",textVariant:"text-body-small"})):null),o("span",{class:"card-navigation__chevron ds-chrome-header__trailing ds-interaction-fill__content"},this.isLoading?o("ds-skeleton",{variant:"icon",iconSize:"md"}):o("ds-icon",{name:"ChevronRight",size:"md",color:"inherit","aria-hidden":"true"})))}render(){const i=this.isLoading?undefined:c(this.href);const n=this.variant==="content";return o(r,{key:"3a9d57e694e5931074edfdf8c1ac74a143d4ad46","aria-busy":this.isLoading?"true":undefined,class:{"card-navigation":true,"card-navigation--loading":this.isLoading,"card-navigation--navigation-only":!n,"card-navigation--content":n},style:{"--_card-navigation-width":v[this.cardWidth],"--_card-navigation-min-height":g[this.cardWidth]}},this.renderHeader(i),n?o("div",{class:"card-navigation__body"},o("slot",null)):null)}static get style(){return l()}},[262,"ds-card-navigation",{href:[1],heading:[1],description:[1],isLoading:[4,"is-loading"],variant:[1],cardWidth:[1,"card-width"]}]);function f(){if(typeof customElements==="undefined"){return}const i=["ds-card-navigation","ds-icon","ds-skeleton","ds-text"];i.forEach((i=>{switch(i){case"ds-card-navigation":if(!customElements.get(d(i))){customElements.define(d(i),h)}break;case"ds-icon":if(!customElements.get(d(i))){t()}break;case"ds-skeleton":if(!customElements.get(d(i))){s()}break;case"ds-text":if(!customElements.get(d(i))){e()}break}}))}f();const u=h;const m=f;export{u as DsCardNavigation,m as defineCustomElement};
|
|
1
|
+
import{p as i,H as n,c as a,h as o,a as r,t as d}from"./index.js";import{d as t}from"./p-C942uiH1.js";import{d as s}from"./p-DcvPY30Q.js";import{d as e}from"./p-DMPn_dt7.js";import{r as c}from"./p-CbrDF2gA.js";const l=()=>`.sc-ds-card-navigation-h,.sc-ds-card-navigation:where(.ds-table),.sc-ds-card-navigation:where(.tooltip-popup),.sc-ds-card-navigation:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-card-navigation,.ds-control--lg.sc-ds-card-navigation-h,.ds-control--md.sc-ds-card-navigation-h,.ds-control--md.sc-ds-card-navigation,.ds-control--sm.sc-ds-card-navigation-h,.ds-control--sm.sc-ds-card-navigation,.ds-control--xs.sc-ds-card-navigation-h,.ds-control--xs.sc-ds-card-navigation{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-card-navigation-h,.ds-control--lg.sc-ds-card-navigation{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-navigation-h,.ds-control--md.sc-ds-card-navigation{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-navigation-h,.ds-control--sm.sc-ds-card-navigation{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-navigation-h,.ds-control--xs.sc-ds-card-navigation{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-card-navigation{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-card-navigation{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-card-navigation{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-card-navigation,.ds-chrome-header__trailing.sc-ds-card-navigation{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-card-navigation{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-card-navigation{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-card-navigation{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-card-navigation{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-card-navigation,.ds-chrome-header__description.sc-ds-card-navigation{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-card-navigation{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-card-navigation .ds-chrome-header__description.sc-ds-card-navigation{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-card-navigation:root,.sc-ds-card-navigation-h,.ds-forced-colors-scope.sc-ds-card-navigation{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-card-navigation-h,.ds-interaction-fill.sc-ds-card-navigation{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-card-navigation-h::before,.ds-interaction-fill.sc-ds-card-navigation::before,.ds-interaction-fill.sc-ds-card-navigation-h::after,.ds-interaction-fill.sc-ds-card-navigation::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-card-navigation-h::before,.ds-interaction-fill.sc-ds-card-navigation::before{z-index:1}.ds-interaction-fill.sc-ds-card-navigation-h::after,.ds-interaction-fill.sc-ds-card-navigation::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-card-navigation-h,.ds-interaction-fill--bordered.sc-ds-card-navigation{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-card-navigation-h::before,.ds-interaction-fill--selected.sc-ds-card-navigation::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-card-navigation-h,.ds-interaction-fill--selected.sc-ds-card-navigation{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-navigation-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-navigation:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-card-navigation-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-navigation:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-card-navigation-h::after,.ds-interaction-fill--grouped.sc-ds-card-navigation::after,.ds-interaction-fill--grouped.sc-ds-card-navigation-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-navigation:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-card-navigation-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-navigation:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-card-navigation-h,.ds-interaction-fill--grouped.sc-ds-card-navigation{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-card-navigation-h>.ds-interaction-fill__content.sc-ds-card-navigation,.ds-interaction-fill.sc-ds-card-navigation>.ds-interaction-fill__content.sc-ds-card-navigation,.ds-interaction-fill__content.sc-ds-card-navigation{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-card-navigation-h,.ds-interaction-fill--on-faint.sc-ds-card-navigation{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-card-navigation-h,.ds-interaction-fill--on-medium.sc-ds-card-navigation{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-card-navigation-h,.ds-interaction-fill--on-bold.sc-ds-card-navigation{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-card-navigation-h,.ds-interaction-fill--on-strong.sc-ds-card-navigation{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-card-navigation-h,.ds-interaction-fill--on-translucent.sc-ds-card-navigation{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-card-navigation-h,.ds-interaction-fill--on-inverted.sc-ds-card-navigation{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-card-navigation-h,.ds-interaction-fill--on-media.sc-ds-card-navigation{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-card-navigation-h,.ds-interaction-fill--on-always-dark.sc-ds-card-navigation{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-card-navigation-h,.ds-interaction-fill--on-chrome.sc-ds-card-navigation{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-card-navigation-h,.ds-interaction-fill--on-navigation.sc-ds-card-navigation{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-card-navigation-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-card-navigation:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-card-navigation-h::after,.ds-interaction-fill.sc-ds-card-navigation::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-card-navigation-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-card-navigation:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-card-navigation-h::before,.ds-interaction-fill--selected.sc-ds-card-navigation::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-navigation-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-card-navigation:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-card-navigation:root,.sc-ds-card-navigation-h,.ds-forced-colors-scope.sc-ds-card-navigation{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-navigation-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-card-navigation-h,.ds-focus-ring.sc-ds-card-navigation,.ds-focus-ring-inset.sc-ds-card-navigation-h,.ds-focus-ring-inset.sc-ds-card-navigation{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-card-navigation-h:focus-visible,.ds-focus-ring.sc-ds-card-navigation:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-navigation-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-navigation{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-card-navigation-h:focus-visible,.ds-focus-ring-inset.sc-ds-card-navigation:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-card-navigation-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-card-navigation:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-navigation-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-navigation{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-navigation-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-navigation::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-card-navigation-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-card-navigation:root,.sc-ds-card-navigation-h,.ds-forced-colors-scope.sc-ds-card-navigation{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-navigation-h{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-navigation-width);max-width:100%;overflow:hidden;border:none;border-radius:var(--ds-radius-card);background-color:var(--color-background-primary);box-shadow:var(--effect-shadow-elevated-sm)}.card-navigation--content.sc-ds-card-navigation-h{min-height:var(--_card-navigation-min-height)}.sc-ds-card-navigation-h::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-sm);pointer-events:none}.card-navigation__target.sc-ds-card-navigation{color:inherit;text-decoration:none;cursor:pointer}.card-navigation__header.sc-ds-card-navigation{flex:0 0 auto;align-items:flex-start;border-radius:inherit}.card-navigation--content.sc-ds-card-navigation-h .card-navigation__header.sc-ds-card-navigation{border-radius:var(--ds-radius-card) var(--ds-radius-card) 0 0;--ds-interaction-divider-width:var(--dimension-stroke-width-012);--ds-interaction-divider-color:var(--color-border-tertiary)}.card-navigation__copy.sc-ds-card-navigation{min-height:var(--dimension-size-400);justify-content:flex-start}.card-navigation__line.sc-ds-card-navigation{display:grid;min-width:0;align-items:start}.card-navigation__line.sc-ds-card-navigation>*.sc-ds-card-navigation{grid-area:1 / 1}.card-navigation--loading.sc-ds-card-navigation-h ds-text.sc-ds-card-navigation{visibility:hidden}ds-text.card-navigation__title.sc-ds-card-navigation,ds-text.card-navigation__description.sc-ds-card-navigation{overflow-wrap:anywhere}.card-navigation__chevron.sc-ds-card-navigation{align-self:center;justify-content:center;width:var(--dimension-size-400);color:var(--color-foreground-secondary)}.card-navigation__body.sc-ds-card-navigation{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--ds-radius-card) var(--ds-radius-card)}@media (forced-colors: active){.sc-ds-card-navigation-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.sc-ds-card-navigation-h::after{box-shadow:none}}`;const v={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const g={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const h=i(class i extends n{constructor(i){super();if(i!==false){this.__registerHost()}this.dsNavigate=a(this,"dsNavigate",7);this.isLoading=false;this.variant="navigation-only";this.cardWidth="md"}handleNavigation(i,n){const a=this.dsNavigate.emit({href:i,originalEvent:n});if(a.defaultPrevented)n.preventDefault()}renderHeader(i){const n=i?"a":"div";const a=this.description?.trim();return o(n,{class:{"card-navigation__target":true,"card-navigation__header":true,"ds-chrome-header":true,"ds-interaction-fill":!!i,"ds-focus-ring-inset":!!i},href:i,inert:this.isLoading,onClick:i?n=>this.handleNavigation(i,n):undefined},o("div",{class:{"card-navigation__copy":true,"ds-chrome-header__copy":true,"ds-chrome-header__copy--stacked":true,"ds-control--md":true,"ds-interaction-fill__content":true}},o("div",{class:"card-navigation__line"},o("ds-text",{class:"card-navigation__title ds-chrome-header__heading",variant:"text-title-small",emphasis:true,color:"primary",as:"h2"},this.heading),this.isLoading&&o("ds-skeleton",{width:"min(60%, calc(var(--dimension-size-800) * 2))",textVariant:"text-title-small"})),a?o("div",{class:"card-navigation__line"},o("ds-text",{class:"card-navigation__description ds-chrome-header__description",variant:"text-body-small",color:"secondary",as:"span"},a),this.isLoading&&o("ds-skeleton",{width:"95%",textVariant:"text-body-small"})):null),o("span",{class:"card-navigation__chevron ds-chrome-header__trailing ds-interaction-fill__content"},this.isLoading?o("ds-skeleton",{variant:"icon",iconSize:"md"}):o("ds-icon",{name:"ChevronRight",size:"md",color:"inherit","aria-hidden":"true"})))}render(){const i=this.isLoading?undefined:c(this.href);const n=this.variant==="content";return o(r,{key:"3a9d57e694e5931074edfdf8c1ac74a143d4ad46","aria-busy":this.isLoading?"true":undefined,class:{"card-navigation":true,"card-navigation--loading":this.isLoading,"card-navigation--navigation-only":!n,"card-navigation--content":n},style:{"--_card-navigation-width":v[this.cardWidth],"--_card-navigation-min-height":g[this.cardWidth]}},this.renderHeader(i),n?o("div",{class:"card-navigation__body"},o("slot",null)):null)}static get style(){return l()}},[262,"ds-card-navigation",{href:[1],heading:[1],description:[1],isLoading:[4,"is-loading"],variant:[1],cardWidth:[1,"card-width"]}]);function f(){if(typeof customElements==="undefined"){return}const i=["ds-card-navigation","ds-icon","ds-skeleton","ds-text"];i.forEach((i=>{switch(i){case"ds-card-navigation":if(!customElements.get(d(i))){customElements.define(d(i),h)}break;case"ds-icon":if(!customElements.get(d(i))){t()}break;case"ds-skeleton":if(!customElements.get(d(i))){s()}break;case"ds-text":if(!customElements.get(d(i))){e()}break}}))}f();const u=h;const m=f;export{u as DsCardNavigation,m as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-card-navigation.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as e,c as t,h as i,a as d,t as n}from"./index.js";import{d as a}from"./p-ClOvX8cD.js";import{d as r}from"./p-DOazC0iw.js";import{d as o}from"./p-Bn-tsogb.js";import{d as c}from"./p-GP7Dz3qO.js";import{d as l}from"./p-0XTyQNRG.js";import{d as g}from"./p-DcvPY30Q.js";import{d as h}from"./p-DMPn_dt7.js";import{d as m}from"./p-DTlNtCX1.js";const b=()=>`.sc-ds-card-setting-h,.sc-ds-card-setting:where(.ds-table),.sc-ds-card-setting:where(.tooltip-popup),.sc-ds-card-setting:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-card-setting,.ds-control--lg.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting,.ds-control--sm.sc-ds-card-setting-h,.ds-control--sm.sc-ds-card-setting,.ds-control--xs.sc-ds-card-setting-h,.ds-control--xs.sc-ds-card-setting{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-card-setting-h,.ds-control--lg.sc-ds-card-setting{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-setting-h,.ds-control--sm.sc-ds-card-setting{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-setting-h,.ds-control--xs.sc-ds-card-setting{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-card-setting{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-card-setting{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-card-setting{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-card-setting,.ds-chrome-header__trailing.sc-ds-card-setting{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-card-setting{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-card-setting{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-card-setting{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-card-setting{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-card-setting,.ds-chrome-header__description.sc-ds-card-setting{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-card-setting{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-card-setting .ds-chrome-header__description.sc-ds-card-setting{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-card-setting:root,.sc-ds-card-setting-h,.ds-forced-colors-scope.sc-ds-card-setting{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-setting-h{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-setting-width);min-height:var(--_card-setting-min-height);max-width:100%;overflow:hidden;border:none;border-radius:var(--ds-radius-card);background-color:var(--color-background-primary);box-shadow:var(--effect-shadow-elevated-sm)}.sc-ds-card-setting-h::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-sm);pointer-events:none}.card-setting--editing.sc-ds-card-setting-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card-setting--editing.sc-ds-card-setting-h::after{box-shadow:none}.card-setting__header.sc-ds-card-setting{flex:0 0 auto;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{border-bottom-color:transparent}.card-setting__copy.sc-ds-card-setting{align-items:center;position:relative}ds-text.card-setting__title.sc-ds-card-setting{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{flex-shrink:0;position:relative}.card-setting--loading.sc-ds-card-setting-h .card-setting__title.sc-ds-card-setting{visibility:hidden}.card-setting__heading-skeleton.sc-ds-card-setting{position:absolute;inset-inline-start:var(--dimension-space-100)}.card-setting__panel.sc-ds-card-setting{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--ds-radius-card) var(--ds-radius-card)}.card-setting--editing.sc-ds-card-setting-h .card-setting__panel.sc-ds-card-setting{border-radius:var(--ds-radius-card)}.card-setting__banner.sc-ds-card-setting{flex:0 0 auto;min-width:0}.card-setting__banner--empty.sc-ds-card-setting{display:none}.card-setting__body.sc-ds-card-setting{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;padding-block:var(--dimension-space-100)}@media (forced-colors: active){.sc-ds-card-setting-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.sc-ds-card-setting-h::after{box-shadow:none}}`;const p={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const f={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const u="var(--color-foreground-faint-brand)";const v=s=>{if(s.nodeType===Node.ELEMENT_NODE){return s.tagName!=="SLOT"}return s.nodeType===Node.TEXT_NODE&&Boolean(s.textContent?.trim())};const _=s=>s.nodeType===Node.ELEMENT_NODE?s.getAttribute("slot"):null;const x=s=>v(s)&&!_(s);const y=s=>v(s)&&_(s)==="banner";const k=s=>Boolean(s?.assignedNodes({flatten:true}).some(v));const w=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsAction=t(this,"dsAction",7);this.cardWidth="md";this.variant="editable";this.editing=false;this.isLoading=false;this.editLabel="Edit";this.cancelLabel="Cancel";this.saveLabel="Save";this.hasBannerContent=false;this.hasBodyContent=false;this.syncBannerContent=s=>{const e=this.readSlotContent(s,":scope > .card-setting__panel > .card-setting__banner > slot",":scope > .card-setting__panel > .card-setting__banner");if(e!==this.hasBannerContent)this.hasBannerContent=e};this.syncBodyContent=s=>{const e=this.readSlotContent(s,":scope > .card-setting__panel > .card-setting__body > slot",":scope > .card-setting__panel > .card-setting__body");if(e!==this.hasBodyContent)this.hasBodyContent=e}}componentWillLoad(){const s=Array.from(this.el.childNodes);this.hasBannerContent=s.some(y);this.hasBodyContent=s.some(x)}componentDidLoad(){this.syncBannerContent();this.syncBodyContent()}emitAction(s,e){this.dsAction.emit({action:s,originalEvent:e})}readSlotContent(s,e,t){const i=s?.target instanceof HTMLSlotElement?s.target:this.el.querySelector(e);if(k(i))return true;const d=this.el.querySelector(t);return Array.from(d?.childNodes??[]).some(v)}get hugContent(){return this.variant==="immediate"||this.hasBannerContent||this.hasBodyContent}render(){const s=this.variant==="editable"&&this.editing;return i(d,{key:"1fca8fb43cc1dfe486a1ce798feb2e12fde21fb7","aria-busy":this.isLoading?"true":undefined,class:{"card-setting":true,"card-setting--loading":this.isLoading,"card-setting--editing":s,"card-setting--immediate":this.variant==="immediate","card-setting--empty":!this.hugContent},style:{"--_card-setting-width":p[this.cardWidth],"--_card-setting-min-height":this.hugContent?"0":f[this.cardWidth]}},i("header",{key:"ede74b46bb2061241c73acae6448ccbda39bae0f",class:"card-setting__header ds-chrome-header"},i("div",{key:"fc1e00483c72ed0564492781dce6652ebf46e7e5",class:"card-setting__copy ds-chrome-header__copy ds-control--md"},i("ds-text",{key:"b0fcebd06b1e0e8427333a7bca7a6eceacd85555",class:"card-setting__title ds-chrome-header__heading",variant:"text-title-small",emphasis:true,color:s?u:"primary",as:"h2"},this.heading),this.isLoading&&i("ds-skeleton",{key:"198a873c2657bddcf215f94b9f468e05a8bd2982",class:"card-setting__heading-skeleton",width:"min(60%, calc(var(--dimension-size-800) * 2))",textVariant:"text-title-small"})),this.variant==="editable"&&i("div",{key:"08cd095494e82213544135f5f72f1c39edb9857f",class:"card-setting__actions ds-chrome-header__trailing",inert:this.isLoading},!s?i("ds-skeleton",{preserveLayout:true,isLoading:this.isLoading,variant:"control",controlAppearance:"outlined",controlContent:"icon"},i("ds-button-unfilled",{variant:"icon",type:"button",icon:"Pencil","aria-label":this.editLabel,onDsClick:s=>this.emitAction("edit",s.detail)})):[i("ds-skeleton",{key:"cancel",preserveLayout:true,isLoading:this.isLoading,variant:"control",controlAppearance:"outlined",controlContent:"icon",background:"bold"},i("ds-button-unfilled",{variant:"icon",type:"button",icon:"Cross",background:"bold","aria-label":this.cancelLabel,onDsClick:s=>this.emitAction("cancel",s.detail)})),i("ds-skeleton",{key:"save",preserveLayout:true,isLoading:this.isLoading,variant:"control"},i("ds-button-filled",{variant:"icon",type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":this.saveLabel,onDsClick:s=>this.emitAction("save",s.detail)}))])),i("div",{key:"db11762c0fd2596c68d09aa2d35747bbc014af34",class:"card-setting__panel"},i("div",{key:"0070ad4349ed6989835ce7c32b8540030550f305",class:{"card-setting__banner":true,"card-setting__banner--empty":!this.hasBannerContent}},i("slot",{key:"4cece08eb15ac16593a06874028a60986faf9502",name:"banner",onSlotchange:this.syncBannerContent})),i("div",{key:"510e947b0e43feef501f4e8a9254c88c2a115faa",class:"card-setting__body"},i("slot",{key:"dac599748ae743102d61022890d86cc7c27251cf",onSlotchange:this.syncBodyContent}))))}get el(){return this}static get style(){return b()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],variant:[1],editing:[4],isLoading:[4,"is-loading"],editLabel:[1,"edit-label"],cancelLabel:[1,"cancel-label"],saveLabel:[1,"save-label"],hasBannerContent:[32],hasBodyContent:[32]}]);function C(){if(typeof customElements==="undefined"){return}const s=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-skeleton","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-card-setting":if(!customElements.get(n(s))){customElements.define(n(s),w)}break;case"ds-badge":if(!customElements.get(n(s))){a()}break;case"ds-button-filled":if(!customElements.get(n(s))){r()}break;case"ds-button-unfilled":if(!customElements.get(n(s))){o()}break;case"ds-icon":if(!customElements.get(n(s))){c()}break;case"ds-loader":if(!customElements.get(n(s))){l()}break;case"ds-skeleton":if(!customElements.get(n(s))){g()}break;case"ds-text":if(!customElements.get(n(s))){h()}break;case"ds-tooltip":if(!customElements.get(n(s))){m()}break}}))}C();const z=w;const E=C;export{z as DsCardSetting,E as defineCustomElement};
|
|
1
|
+
import{p as s,H as e,c as t,h as i,a as d,t as n}from"./index.js";import{d as a}from"./p-ClOvX8cD.js";import{d as r}from"./p-BNvZM4jP.js";import{d as o}from"./p-D5-hqLPK.js";import{d as c}from"./p-C942uiH1.js";import{d as l}from"./p-0XTyQNRG.js";import{d as g}from"./p-DcvPY30Q.js";import{d as h}from"./p-DMPn_dt7.js";import{d as m}from"./p-DTlNtCX1.js";const b=()=>`.sc-ds-card-setting-h,.sc-ds-card-setting:where(.ds-table),.sc-ds-card-setting:where(.tooltip-popup),.sc-ds-card-setting:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-card-setting,.ds-control--lg.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting,.ds-control--sm.sc-ds-card-setting-h,.ds-control--sm.sc-ds-card-setting,.ds-control--xs.sc-ds-card-setting-h,.ds-control--xs.sc-ds-card-setting{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-card-setting-h,.ds-control--lg.sc-ds-card-setting{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-setting-h,.ds-control--sm.sc-ds-card-setting{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-setting-h,.ds-control--xs.sc-ds-card-setting{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-card-setting{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-card-setting{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-card-setting{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-card-setting,.ds-chrome-header__trailing.sc-ds-card-setting{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-card-setting{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-card-setting{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-card-setting{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-card-setting{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-card-setting,.ds-chrome-header__description.sc-ds-card-setting{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-card-setting{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-card-setting .ds-chrome-header__description.sc-ds-card-setting{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-card-setting:root,.sc-ds-card-setting-h,.ds-forced-colors-scope.sc-ds-card-setting{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-setting-h{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-setting-width);min-height:var(--_card-setting-min-height);max-width:100%;overflow:hidden;border:none;border-radius:var(--ds-radius-card);background-color:var(--color-background-primary);box-shadow:var(--effect-shadow-elevated-sm)}.sc-ds-card-setting-h::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-sm);pointer-events:none}.card-setting--editing.sc-ds-card-setting-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card-setting--editing.sc-ds-card-setting-h::after{box-shadow:none}.card-setting__header.sc-ds-card-setting{flex:0 0 auto;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{border-bottom-color:transparent}.card-setting__copy.sc-ds-card-setting{align-items:center;position:relative}ds-text.card-setting__title.sc-ds-card-setting{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{flex-shrink:0;position:relative}.card-setting--loading.sc-ds-card-setting-h .card-setting__title.sc-ds-card-setting{visibility:hidden}.card-setting__heading-skeleton.sc-ds-card-setting{position:absolute;inset-inline-start:var(--dimension-space-100)}.card-setting__panel.sc-ds-card-setting{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--ds-radius-card) var(--ds-radius-card)}.card-setting--editing.sc-ds-card-setting-h .card-setting__panel.sc-ds-card-setting{border-radius:var(--ds-radius-card)}.card-setting__banner.sc-ds-card-setting{flex:0 0 auto;min-width:0}.card-setting__banner--empty.sc-ds-card-setting{display:none}.card-setting__body.sc-ds-card-setting{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;padding-block:var(--dimension-space-100)}@media (forced-colors: active){.sc-ds-card-setting-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.sc-ds-card-setting-h::after{box-shadow:none}}`;const p={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const u={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const f="var(--color-foreground-faint-brand)";const v=s=>{if(s.nodeType===Node.ELEMENT_NODE){return s.tagName!=="SLOT"}return s.nodeType===Node.TEXT_NODE&&Boolean(s.textContent?.trim())};const _=s=>s.nodeType===Node.ELEMENT_NODE?s.getAttribute("slot"):null;const x=s=>v(s)&&!_(s);const y=s=>v(s)&&_(s)==="banner";const k=s=>Boolean(s?.assignedNodes({flatten:true}).some(v));const w=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsAction=t(this,"dsAction",7);this.cardWidth="md";this.variant="editable";this.editing=false;this.isLoading=false;this.editLabel="Edit";this.cancelLabel="Cancel";this.saveLabel="Save";this.hasBannerContent=false;this.hasBodyContent=false;this.syncBannerContent=s=>{const e=this.readSlotContent(s,":scope > .card-setting__panel > .card-setting__banner > slot",":scope > .card-setting__panel > .card-setting__banner");if(e!==this.hasBannerContent)this.hasBannerContent=e};this.syncBodyContent=s=>{const e=this.readSlotContent(s,":scope > .card-setting__panel > .card-setting__body > slot",":scope > .card-setting__panel > .card-setting__body");if(e!==this.hasBodyContent)this.hasBodyContent=e}}componentWillLoad(){const s=Array.from(this.el.childNodes);this.hasBannerContent=s.some(y);this.hasBodyContent=s.some(x)}componentDidLoad(){this.syncBannerContent();this.syncBodyContent()}emitAction(s,e){this.dsAction.emit({action:s,originalEvent:e})}readSlotContent(s,e,t){const i=s?.target instanceof HTMLSlotElement?s.target:this.el.querySelector(e);if(k(i))return true;const d=this.el.querySelector(t);return Array.from(d?.childNodes??[]).some(v)}get hugContent(){return this.variant==="immediate"||this.hasBannerContent||this.hasBodyContent}render(){const s=this.variant==="editable"&&this.editing;return i(d,{key:"1fca8fb43cc1dfe486a1ce798feb2e12fde21fb7","aria-busy":this.isLoading?"true":undefined,class:{"card-setting":true,"card-setting--loading":this.isLoading,"card-setting--editing":s,"card-setting--immediate":this.variant==="immediate","card-setting--empty":!this.hugContent},style:{"--_card-setting-width":p[this.cardWidth],"--_card-setting-min-height":this.hugContent?"0":u[this.cardWidth]}},i("header",{key:"ede74b46bb2061241c73acae6448ccbda39bae0f",class:"card-setting__header ds-chrome-header"},i("div",{key:"fc1e00483c72ed0564492781dce6652ebf46e7e5",class:"card-setting__copy ds-chrome-header__copy ds-control--md"},i("ds-text",{key:"b0fcebd06b1e0e8427333a7bca7a6eceacd85555",class:"card-setting__title ds-chrome-header__heading",variant:"text-title-small",emphasis:true,color:s?f:"primary",as:"h2"},this.heading),this.isLoading&&i("ds-skeleton",{key:"198a873c2657bddcf215f94b9f468e05a8bd2982",class:"card-setting__heading-skeleton",width:"min(60%, calc(var(--dimension-size-800) * 2))",textVariant:"text-title-small"})),this.variant==="editable"&&i("div",{key:"08cd095494e82213544135f5f72f1c39edb9857f",class:"card-setting__actions ds-chrome-header__trailing",inert:this.isLoading},!s?i("ds-skeleton",{preserveLayout:true,isLoading:this.isLoading,variant:"control",controlAppearance:"outlined",controlContent:"icon"},i("ds-button-unfilled",{variant:"icon",type:"button",icon:"Pencil","aria-label":this.editLabel,onDsClick:s=>this.emitAction("edit",s.detail)})):[i("ds-skeleton",{key:"cancel",preserveLayout:true,isLoading:this.isLoading,variant:"control",controlAppearance:"outlined",controlContent:"icon",background:"bold"},i("ds-button-unfilled",{variant:"icon",type:"button",icon:"Cross",background:"bold","aria-label":this.cancelLabel,onDsClick:s=>this.emitAction("cancel",s.detail)})),i("ds-skeleton",{key:"save",preserveLayout:true,isLoading:this.isLoading,variant:"control"},i("ds-button-filled",{variant:"icon",type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":this.saveLabel,onDsClick:s=>this.emitAction("save",s.detail)}))])),i("div",{key:"db11762c0fd2596c68d09aa2d35747bbc014af34",class:"card-setting__panel"},i("div",{key:"0070ad4349ed6989835ce7c32b8540030550f305",class:{"card-setting__banner":true,"card-setting__banner--empty":!this.hasBannerContent}},i("slot",{key:"4cece08eb15ac16593a06874028a60986faf9502",name:"banner",onSlotchange:this.syncBannerContent})),i("div",{key:"510e947b0e43feef501f4e8a9254c88c2a115faa",class:"card-setting__body"},i("slot",{key:"dac599748ae743102d61022890d86cc7c27251cf",onSlotchange:this.syncBodyContent}))))}get el(){return this}static get style(){return b()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],variant:[1],editing:[4],isLoading:[4,"is-loading"],editLabel:[1,"edit-label"],cancelLabel:[1,"cancel-label"],saveLabel:[1,"save-label"],hasBannerContent:[32],hasBodyContent:[32]}]);function C(){if(typeof customElements==="undefined"){return}const s=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-skeleton","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-card-setting":if(!customElements.get(n(s))){customElements.define(n(s),w)}break;case"ds-badge":if(!customElements.get(n(s))){a()}break;case"ds-button-filled":if(!customElements.get(n(s))){r()}break;case"ds-button-unfilled":if(!customElements.get(n(s))){o()}break;case"ds-icon":if(!customElements.get(n(s))){c()}break;case"ds-loader":if(!customElements.get(n(s))){l()}break;case"ds-skeleton":if(!customElements.get(n(s))){g()}break;case"ds-text":if(!customElements.get(n(s))){h()}break;case"ds-tooltip":if(!customElements.get(n(s))){m()}break}}))}C();const L=w;const z=C;export{L as DsCardSetting,z as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-card-setting.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as n,c as i,h as t,a as r,t as s}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d}from"./p-DMPn_dt7.js";import{r as c}from"./p-CbrDF2gA.js";import{n as a}from"./p-Dka0lUI_.js";const l=[{threshold:1e9,suffix:"b"},{threshold:1e6,suffix:"m"},{threshold:1e3,suffix:"k"}];function h(e,n){if(n){return a(n,{notation:"compact",compactDisplay:"short",maximumFractionDigits:1}).format(e)}const i=e<0?"-":"";const t=Math.abs(e);if(t<1e3)return String(e);for(let e=0;e<l.length;e++){const n=l[e];if(t<n.threshold)continue;let r=Math.round(t/n.threshold*10)/10;if(r>=1e3&&e>0){const n=l[e-1];r=Math.round(t/n.threshold*10)/10;return`${i}${r}${n.suffix}`}return`${i}${r}${n.suffix}`}return String(e)}function g(e,n=1,i){const t=n===2?2:1;const r=Number.isFinite(e)?e:0;return a(i,{style:"percent",minimumFractionDigits:t,maximumFractionDigits:t}).format(r)}const f=()=>`.sc-ds-chart-legend-h,.sc-ds-chart-legend:where(.ds-table),.sc-ds-chart-legend:where(.tooltip-popup),.sc-ds-chart-legend:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-chart-legend,.ds-control--lg.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend,.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend,.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-chart-legend-h,.ds-control--lg.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before,.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before{z-index:1}.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chart-legend-h,.ds-interaction-fill--bordered.sc-ds-chart-legend{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chart-legend-h,.ds-interaction-fill--selected.sc-ds-chart-legend{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-chart-legend-h::after,.ds-interaction-fill--grouped.sc-ds-chart-legend::after,.ds-interaction-fill--grouped.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-chart-legend-h,.ds-interaction-fill--grouped.sc-ds-chart-legend{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-chart-legend-h>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill.sc-ds-chart-legend>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill__content.sc-ds-chart-legend{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-chart-legend-h,.ds-interaction-fill--on-faint.sc-ds-chart-legend{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chart-legend-h,.ds-interaction-fill--on-medium.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chart-legend-h,.ds-interaction-fill--on-bold.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chart-legend-h,.ds-interaction-fill--on-strong.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-chart-legend-h,.ds-interaction-fill--on-translucent.sc-ds-chart-legend{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chart-legend-h,.ds-interaction-fill--on-inverted.sc-ds-chart-legend{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chart-legend-h,.ds-interaction-fill--on-media.sc-ds-chart-legend{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chart-legend-h,.ds-interaction-fill--on-always-dark.sc-ds-chart-legend{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-chart-legend-h,.ds-interaction-fill--on-chrome.sc-ds-chart-legend{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chart-legend-h,.ds-interaction-fill--on-navigation.sc-ds-chart-legend{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-chart-legend-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-chart-legend:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-chart-legend-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-chart-legend:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-chart-legend-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chart-legend-h,.ds-focus-ring.sc-ds-chart-legend,.ds-focus-ring-inset.sc-ds-chart-legend-h,.ds-focus-ring-inset.sc-ds-chart-legend{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring.sc-ds-chart-legend:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-chart-legend-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-chart-legend-h{display:block;font-family:var(--typography-font-family-ui);user-select:none}.chart-legend__list.sc-ds-chart-legend{margin:0;padding:0;list-style:none}.chart-legend__list-item.sc-ds-chart-legend{display:contents}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:grid;grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600);column-gap:var(--dimension-space-075);row-gap:var(--dimension-space-050)}.chart-legend--vertical.chart-legend--show-percentage.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex;gap:var(--dimension-space-100)}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}.chart-legend__item--dimmed.sc-ds-chart-legend{opacity:var(--effect-opacity-medium)}@media (prefers-reduced-motion: reduce){.chart-legend__item.sc-ds-chart-legend{transition:none}}.chart-legend__item--interactive.sc-ds-chart-legend{cursor:pointer}.chart-legend__item.sc-ds-chart-legend>*.sc-ds-chart-legend{position:relative;z-index:2}.chart-legend__swatch-box.sc-ds-chart-legend{width:var(--dimension-size-250);height:var(--dimension-size-250);display:flex;align-items:center;justify-content:center;flex-shrink:0}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0}.chart-legend__label.sc-ds-chart-legend{min-width:0}.chart-legend__percentage.sc-ds-chart-legend{width:100%;min-width:0;text-align:right}.chart-legend__value.sc-ds-chart-legend{width:100%;text-align:right;min-width:0}@media (forced-colors: active){.chart-legend__swatch.sc-ds-chart-legend{forced-color-adjust:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content)}}`;const v=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=i(this,"dsItemHover",7);this.dsItemClick=i(this,"dsItemClick",7);this.items=[];this.direction="vertical";this.showPercentage=true;this.percentageDecimals=1;this.highlightOnHover=true;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,n)=>{this.dsItemClick.emit({item:e,originalEvent:n})}}handleHighlightOnHoverChange(e){if(!e)this.hoveredLabel=null}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,n)=>e+(n.value??0)),0);const n=this.activeLabel??(this.highlightOnHover?this.hoveredLabel:null);return t(r,{key:"5f00698916de6213ba85f78e04cfce9bac6e088a",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true,"chart-legend--show-percentage":this.showPercentage}},t("ul",{key:"4a262fb166f972ea1ed35b853e7da62ca0b2939e",class:"chart-legend__list",onMouseLeave:this.highlightOnHover?()=>this.handleHover(null):undefined},this.items.map(((i,r)=>{const s=n!=null&&i.label!==n;const d=c(i.href);const a=d?"a":"div";const l=i.value!=null?g(e?i.value/e:0,this.percentageDecimals,this.locale):"";return t("li",{class:"chart-legend__list-item",key:i.label},t(a,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!d,"chart-legend__item--dimmed":s,"ds-control--md":true,"ds-interaction-fill":this.highlightOnHover||!!d,"ds-focus-ring-inset":!!d},href:d,onClick:d?e=>this.handleClick(i,e):undefined,onMouseEnter:this.highlightOnHover?()=>this.handleHover(i):undefined,onFocus:this.highlightOnHover?()=>this.handleHover(i):undefined,onBlur:this.highlightOnHover?()=>this.handleHover(null):undefined},t("span",{class:"chart-legend__swatch-box"},t("span",{class:"chart-legend__swatch",style:{backgroundColor:i.color??o(r)}})),t("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:i.label},i.label),i.value!=null&&t("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:String(i.value)},h(i.value,this.locale)),i.value!=null&&this.showPercentage&&t("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:l},l)))}))))}static get watchers(){return{highlightOnHover:[{handleHighlightOnHoverChange:0}]}}static get style(){return f()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],percentageDecimals:[2,"percentage-decimals"],highlightOnHover:[4,"highlight-on-hover"],activeLabel:[1,"active-label"],hoveredLabel:[32]},undefined,{highlightOnHover:[{handleHighlightOnHoverChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(s(e))){customElements.define(s(e),v)}break;case"ds-text":if(!customElements.get(s(e))){d()}break}}))}u();const m=v;const p=u;export{m as DsChartLegend,p as defineCustomElement};
|
|
1
|
+
import{p as e,H as n,c as i,h as t,a as r,t as s}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d}from"./p-DMPn_dt7.js";import{r as c}from"./p-CbrDF2gA.js";import{n as a}from"./p-Dka0lUI_.js";const l=[{threshold:1e9,suffix:"b"},{threshold:1e6,suffix:"m"},{threshold:1e3,suffix:"k"}];function h(e,n){if(n){return a(n,{notation:"compact",compactDisplay:"short",maximumFractionDigits:1}).format(e)}const i=e<0?"-":"";const t=Math.abs(e);if(t<1e3)return String(e);for(let e=0;e<l.length;e++){const n=l[e];if(t<n.threshold)continue;let r=Math.round(t/n.threshold*10)/10;if(r>=1e3&&e>0){const n=l[e-1];r=Math.round(t/n.threshold*10)/10;return`${i}${r}${n.suffix}`}return`${i}${r}${n.suffix}`}return String(e)}function g(e,n=1,i){const t=n===2?2:1;const r=Number.isFinite(e)?e:0;return a(i,{style:"percent",minimumFractionDigits:t,maximumFractionDigits:t}).format(r)}const v=()=>`.sc-ds-chart-legend-h,.sc-ds-chart-legend:where(.ds-table),.sc-ds-chart-legend:where(.tooltip-popup),.sc-ds-chart-legend:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-chart-legend,.ds-control--lg.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend,.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend,.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-chart-legend-h,.ds-control--lg.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before,.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before{z-index:1}.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chart-legend-h,.ds-interaction-fill--bordered.sc-ds-chart-legend{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chart-legend-h,.ds-interaction-fill--selected.sc-ds-chart-legend{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-chart-legend-h::after,.ds-interaction-fill--grouped.sc-ds-chart-legend::after,.ds-interaction-fill--grouped.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-chart-legend-h,.ds-interaction-fill--grouped.sc-ds-chart-legend{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-chart-legend-h>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill.sc-ds-chart-legend>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill__content.sc-ds-chart-legend{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-chart-legend-h,.ds-interaction-fill--on-faint.sc-ds-chart-legend{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chart-legend-h,.ds-interaction-fill--on-medium.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chart-legend-h,.ds-interaction-fill--on-bold.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chart-legend-h,.ds-interaction-fill--on-strong.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-chart-legend-h,.ds-interaction-fill--on-translucent.sc-ds-chart-legend{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chart-legend-h,.ds-interaction-fill--on-inverted.sc-ds-chart-legend{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chart-legend-h,.ds-interaction-fill--on-media.sc-ds-chart-legend{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chart-legend-h,.ds-interaction-fill--on-always-dark.sc-ds-chart-legend{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-chrome.sc-ds-chart-legend-h,.ds-interaction-fill--on-chrome.sc-ds-chart-legend{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chart-legend-h,.ds-interaction-fill--on-navigation.sc-ds-chart-legend{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-chart-legend-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-chart-legend:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-chart-legend-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-chart-legend:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-chart-legend-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chart-legend-h,.ds-focus-ring.sc-ds-chart-legend,.ds-focus-ring-inset.sc-ds-chart-legend-h,.ds-focus-ring-inset.sc-ds-chart-legend{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring.sc-ds-chart-legend:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-chart-legend-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-chart-legend-h{display:block;font-family:var(--typography-font-family-ui);user-select:none}.chart-legend__list.sc-ds-chart-legend{margin:0;padding:0;list-style:none}.chart-legend__list-item.sc-ds-chart-legend{display:contents}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:grid;grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600);column-gap:var(--dimension-space-075);row-gap:var(--dimension-space-050)}.chart-legend--vertical.chart-legend--show-percentage.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex;gap:var(--dimension-space-100)}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit}.chart-legend__item--interactive.sc-ds-chart-legend{cursor:pointer}.chart-legend__item.sc-ds-chart-legend>*.sc-ds-chart-legend{position:relative;z-index:2}.chart-legend__swatch-box.sc-ds-chart-legend{width:var(--dimension-size-250);height:var(--dimension-size-250);display:flex;align-items:center;justify-content:center;flex-shrink:0}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0;transition:opacity var(--effect-motion-short-2)}.chart-legend__item--dimmed.sc-ds-chart-legend .chart-legend__swatch.sc-ds-chart-legend{opacity:var(--effect-opacity-medium)}@media (prefers-reduced-motion: reduce){.chart-legend__swatch.sc-ds-chart-legend{transition:none}}.chart-legend__label.sc-ds-chart-legend{min-width:0}.chart-legend__percentage.sc-ds-chart-legend{width:100%;min-width:0;text-align:right}.chart-legend__value.sc-ds-chart-legend{width:100%;text-align:right;min-width:0}@media (forced-colors: active){.chart-legend__swatch.sc-ds-chart-legend{forced-color-adjust:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content)}}`;const f=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=i(this,"dsItemHover",7);this.dsItemClick=i(this,"dsItemClick",7);this.items=[];this.direction="vertical";this.showPercentage=true;this.percentageDecimals=1;this.highlightOnHover=true;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,n)=>{this.dsItemClick.emit({item:e,originalEvent:n})}}handleHighlightOnHoverChange(e){if(!e)this.hoveredLabel=null}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,n)=>e+(n.value??0)),0);const n=this.activeLabel??(this.highlightOnHover?this.hoveredLabel:null);return t(r,{key:"4b2831f57593611456302247e85889ac6e727ec3",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true,"chart-legend--show-percentage":this.showPercentage}},t("ul",{key:"c3a47b7800883593035ed12491937ec85545cbf7",class:"chart-legend__list",onMouseLeave:this.highlightOnHover?()=>this.handleHover(null):undefined},this.items.map(((i,r)=>{const s=n!=null&&i.label!==n;const d=c(i.href);const a=d?"a":"div";const l=i.value!=null?g(e?i.value/e:0,this.percentageDecimals,this.locale):"";return t("li",{class:"chart-legend__list-item",key:i.label},t(a,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!d,"chart-legend__item--dimmed":s,"ds-control--md":true,"ds-interaction-fill":this.highlightOnHover||!!d,"ds-focus-ring-inset":!!d},href:d,onClick:d?e=>this.handleClick(i,e):undefined,onMouseEnter:this.highlightOnHover?()=>this.handleHover(i):undefined,onFocus:this.highlightOnHover?()=>this.handleHover(i):undefined,onBlur:this.highlightOnHover?()=>this.handleHover(null):undefined},t("span",{class:"chart-legend__swatch-box"},t("span",{class:"chart-legend__swatch",style:{backgroundColor:i.color??o(r)}})),t("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:i.label},i.label),i.value!=null&&t("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:String(i.value)},h(i.value,this.locale)),i.value!=null&&this.showPercentage&&t("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:l},l)))}))))}static get watchers(){return{highlightOnHover:[{handleHighlightOnHoverChange:0}]}}static get style(){return v()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],percentageDecimals:[2,"percentage-decimals"],highlightOnHover:[4,"highlight-on-hover"],activeLabel:[1,"active-label"],hoveredLabel:[32]},undefined,{highlightOnHover:[{handleHighlightOnHoverChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(s(e))){customElements.define(s(e),f)}break;case"ds-text":if(!customElements.get(s(e))){d()}break}}))}u();const m=f;const p=u;export{m as DsChartLegend,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chart-legend.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["COMPACT_UNITS","threshold","suffix","formatCompactNumber","value","locale","numberFormatter","notation","compactDisplay","maximumFractionDigits","format","sign","abs","Math","String","i","length","unit","scaled","round","next","formatPercentage","ratio","decimals","precision","Number","isFinite","style","minimumFractionDigits","chartLegendCss","ChartLegend","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","direction","showPercentage","percentageDecimals","highlightOnHover","activeLabel","hoveredLabel","handleClick","item","originalEvent","dsItemClick","emit","handleHighlightOnHoverChange","enabled","handleHover","label","dsItemHover","render","total","reduce","sum","highlightLabel","h","Host","key","class","onMouseLeave","undefined","map","isDimmed","href","resolveSafeUrl","RowTag","percentage","onClick","e","onMouseEnter","onFocus","onBlur","backgroundColor","color","categoryColor","as","variant","lineTruncation","title","align","fontFeature"],"sources":["src/wc/utils/format-compact-number.ts","src/wc/utils/format-percentage.ts","src/wc/components/ChartLegend/ChartLegend.css?tag=ds-chart-legend&encapsulation=scoped","src/wc/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":["import { numberFormatter } from './intl-formatters';\nconst COMPACT_UNITS: { threshold: number; suffix: string }[] = [\n { threshold: 1_000_000_000, suffix: 'b' },\n { threshold: 1_000_000, suffix: 'm' },\n { threshold: 1_000, suffix: 'k' },\n];\n\n/** Compact large numbers for display: 1000 -> \"1k\", 1500 -> \"1.5k\", 110100 -> \"110.1k\", 1000000 -> \"1m\". */\nexport function formatCompactNumber(value: number, locale?: string): string {\n if (locale) {\n return numberFormatter(locale, {\n notation: 'compact',\n compactDisplay: 'short',\n maximumFractionDigits: 1,\n }).format(value);\n }\n const sign = value < 0 ? '-' : '';\n const abs = Math.abs(value);\n if (abs < 1000) return String(value);\n\n for (let i = 0; i < COMPACT_UNITS.length; i++) {\n const unit = COMPACT_UNITS[i];\n if (abs < unit.threshold) continue;\n\n let scaled = Math.round((abs / unit.threshold) * 10) / 10;\n // Carry over, e.g. 999.96k rounds to \"1000k\" — bump to the next unit instead.\n if (scaled >= 1000 && i > 0) {\n const next = COMPACT_UNITS[i - 1];\n scaled = Math.round((abs / next.threshold) * 10) / 10;\n return `${sign}${scaled}${next.suffix}`;\n }\n return `${sign}${scaled}${unit.suffix}`;\n }\n return String(value);\n}\n","import { numberFormatter } from './intl-formatters';\nexport type PercentageDecimals = 1 | 2;\n\n/** Format a ratio as a percentage (English by default) with an exact, supported precision. */\nexport function formatPercentage(\n ratio: number,\n decimals: PercentageDecimals = 1,\n locale?: string\n): string {\n const precision = decimals === 2 ? 2 : 1;\n const value = Number.isFinite(ratio) ? ratio : 0;\n\n return numberFormatter(locale, {\n style: 'percent',\n minimumFractionDigits: precision,\n maximumFractionDigits: precision,\n }).format(value);\n}\n","@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n display: block;\n font-family: var(--typography-font-family-ui);\n user-select: none;\n}\n\n.chart-legend__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so optional highlight/link\n affordances cover the whole row while children align to the shared grid columns. */\n.chart-legend__list-item {\n display: contents;\n}\n\n:host(.chart-legend--vertical) .chart-legend__list {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600);\n column-gap: var(--dimension-space-075);\n row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical.chart-legend--show-percentage) .chart-legend__list {\n grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n display: flex;\n flex-wrap: wrap;\n gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n display: flex;\n gap: var(--dimension-space-100);\n}\n\n/*\n * Density: md control recipe (height / pad / radius / label inset).\n * Hover/press: `.ds-interaction-fill` (token overlay on ::after).\n */\n.chart-legend__item {\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n align-items: center;\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n text-decoration: none;\n color: inherit;\n transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-legend__item--dimmed {\n opacity: var(--effect-opacity-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .chart-legend__item {\n transition: none;\n }\n}\n\n.chart-legend__item--interactive {\n cursor: pointer;\n}\n\n/* Raise row content above interaction fills (positive z-index on util layers). */\n.chart-legend__item > * {\n position: relative;\n z-index: 2;\n}\n\n.chart-legend__swatch-box {\n width: var(--dimension-size-250);\n height: var(--dimension-size-250);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.chart-legend__swatch {\n width: var(--dimension-space-150);\n height: var(--dimension-space-150);\n border-radius: var(--dimension-radius-025);\n flex-shrink: 0;\n}\n\n.chart-legend__label {\n min-width: 0;\n}\n\n.chart-legend__percentage {\n width: 100%;\n min-width: 0;\n text-align: right;\n}\n\n.chart-legend__value {\n width: 100%;\n text-align: right;\n min-width: 0;\n}\n\n@media (forced-colors: active) {\n .chart-legend__swatch {\n forced-color-adjust: none;\n outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n }\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber, formatPercentage, resolveSafeUrl } from '../../utils';\nimport type { ChartLegendItem } from '../../utils/chart-types';\n\nexport type ChartLegendDirection = 'vertical' | 'horizontal';\nexport type ChartLegendPercentageDecimals = 1 | 2;\n\n/**\n * Base legend for `ds-chart-*` components. Webapp's Overview widgets each style\n * legends differently (list w/ values, compact chips, bare swatches, external\n * stat callouts) — this covers the common \"swatch + label + optional value\" case.\n * Consumers who need a different treatment skip this component entirely and\n * render their own markup against the same `ChartLegendItem[]` data.\n */\n@Component({\n tag: 'ds-chart-legend',\n styleUrl: 'ChartLegend.css',\n scoped: true,\n})\nexport class ChartLegend {\n @Prop() locale: string | undefined;\n /** Legend entries. Set as a JS property (not an HTML attribute). */\n @Prop() items: ChartLegendItem[] = [];\n @Prop() direction: ChartLegendDirection = 'vertical';\n /** Show each item's share of the total (of items with a `value`) alongside its count. */\n @Prop() showPercentage: boolean = true;\n /** Fixed number of decimal places shown for percentages. */\n @Prop() percentageDecimals: ChartLegendPercentageDecimals = 1;\n /** Let local pointer/focus movement highlight one item and emit `dsItemHover`. */\n @Prop() highlightOnHover: boolean = true;\n /**\n * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n * chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other\n * rows' opacity (like a chart dimming its other slices) — it never shows the hover-fill,\n * since that's reserved for a real pointer/keyboard interaction on this row.\n */\n @Prop() activeLabel: string | null = null;\n\n /** Own pointer/focus hover, kept separate from `activeLabel` so the hover-fill (a \"you can\n * click here\" affordance) never shows just because an external row was synced in. */\n @State() private hoveredLabel: string | null = null;\n\n /** Fires on row hover/focus with the item, or `null` on leave/blur. */\n @Event() dsItemHover!: EventEmitter<ChartLegendItem | null>;\n /** Fires when a deep-linkable row (`item.href` set) is activated. */\n @Event() dsItemClick!: EventEmitter<{ item: ChartLegendItem; originalEvent: MouseEvent }>;\n\n @Watch('highlightOnHover')\n handleHighlightOnHoverChange(enabled: boolean) {\n if (!enabled) this.hoveredLabel = null;\n }\n\n private handleHover(item: ChartLegendItem | null) {\n this.hoveredLabel = item?.label ?? null;\n this.dsItemHover.emit(item);\n }\n\n private handleClick = (item: ChartLegendItem, originalEvent: MouseEvent) => {\n this.dsItemClick.emit({ item, originalEvent });\n };\n\n render() {\n const total = this.items.reduce((sum, item) => sum + (item.value ?? 0), 0);\n // Highlight/dim from either this component's own hover or an externally-synced label\n // (e.g. an application-owned chart focus state).\n const highlightLabel = this.activeLabel ?? (this.highlightOnHover ? this.hoveredLabel : null);\n\n return (\n <Host\n class={{\n 'chart-legend': true,\n [`chart-legend--${this.direction}`]: true,\n 'chart-legend--show-percentage': this.showPercentage,\n }}\n >\n {/* mouseleave lives on the list, not each row — the row-gap between items is still\n inside the list's box, so crossing it while moving between rows never fires this.\n Only actually leaving the whole list does, and that clears with no delay. */}\n <ul\n class=\"chart-legend__list\"\n onMouseLeave={this.highlightOnHover ? () => this.handleHover(null) : undefined}\n >\n {this.items.map((item, i) => {\n const isDimmed = highlightLabel != null && item.label !== highlightLabel;\n const href = resolveSafeUrl(item.href);\n const RowTag = href ? 'a' : 'div';\n const percentage =\n item.value != null\n ? formatPercentage(\n total ? item.value / total : 0,\n this.percentageDecimals,\n this.locale\n )\n : '';\n\n return (\n <li class=\"chart-legend__list-item\" key={item.label}>\n <RowTag\n class={{\n 'chart-legend__item': true,\n 'chart-legend__item--interactive': !!href,\n 'chart-legend__item--dimmed': isDimmed,\n 'ds-control--md': true,\n 'ds-interaction-fill': this.highlightOnHover || !!href,\n 'ds-focus-ring-inset': !!href,\n }}\n href={href}\n onClick={href ? (e: MouseEvent) => this.handleClick(item, e) : undefined}\n onMouseEnter={this.highlightOnHover ? () => this.handleHover(item) : undefined}\n onFocus={this.highlightOnHover ? () => this.handleHover(item) : undefined}\n onBlur={this.highlightOnHover ? () => this.handleHover(null) : undefined}\n >\n <span class=\"chart-legend__swatch-box\">\n <span\n class=\"chart-legend__swatch\"\n style={{ backgroundColor: item.color ?? categoryColor(i) }}\n />\n </span>\n <ds-text\n class=\"chart-legend__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"secondary\"\n lineTruncation={1}\n title={item.label}\n >\n {item.label}\n </ds-text>\n {item.value != null && (\n <ds-text\n class=\"chart-legend__value\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"primary\"\n lineTruncation={1}\n align=\"right\"\n fontFeature=\"tabular-nums\"\n title={String(item.value)}\n >\n {formatCompactNumber(item.value, this.locale)}\n </ds-text>\n )}\n {item.value != null && this.showPercentage && (\n <ds-text\n class=\"chart-legend__percentage\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"primary\"\n lineTruncation={1}\n align=\"right\"\n fontFeature=\"tabular-nums\"\n title={percentage}\n >\n {percentage}\n </ds-text>\n )}\n </RowTag>\n </li>\n );\n })}\n </ul>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["COMPACT_UNITS","threshold","suffix","formatCompactNumber","value","locale","numberFormatter","notation","compactDisplay","maximumFractionDigits","format","sign","abs","Math","String","i","length","unit","scaled","round","next","formatPercentage","ratio","decimals","precision","Number","isFinite","style","minimumFractionDigits","chartLegendCss","ChartLegend","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","direction","showPercentage","percentageDecimals","highlightOnHover","activeLabel","hoveredLabel","handleClick","item","originalEvent","dsItemClick","emit","handleHighlightOnHoverChange","enabled","handleHover","label","dsItemHover","render","total","reduce","sum","highlightLabel","h","Host","key","class","onMouseLeave","undefined","map","isDimmed","href","resolveSafeUrl","RowTag","percentage","onClick","e","onMouseEnter","onFocus","onBlur","backgroundColor","color","categoryColor","as","variant","lineTruncation","title","align","fontFeature"],"sources":["src/wc/utils/format-compact-number.ts","src/wc/utils/format-percentage.ts","src/wc/components/ChartLegend/ChartLegend.css?tag=ds-chart-legend&encapsulation=scoped","src/wc/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":["import { numberFormatter } from './intl-formatters';\nconst COMPACT_UNITS: { threshold: number; suffix: string }[] = [\n { threshold: 1_000_000_000, suffix: 'b' },\n { threshold: 1_000_000, suffix: 'm' },\n { threshold: 1_000, suffix: 'k' },\n];\n\n/** Compact large numbers for display: 1000 -> \"1k\", 1500 -> \"1.5k\", 110100 -> \"110.1k\", 1000000 -> \"1m\". */\nexport function formatCompactNumber(value: number, locale?: string): string {\n if (locale) {\n return numberFormatter(locale, {\n notation: 'compact',\n compactDisplay: 'short',\n maximumFractionDigits: 1,\n }).format(value);\n }\n const sign = value < 0 ? '-' : '';\n const abs = Math.abs(value);\n if (abs < 1000) return String(value);\n\n for (let i = 0; i < COMPACT_UNITS.length; i++) {\n const unit = COMPACT_UNITS[i];\n if (abs < unit.threshold) continue;\n\n let scaled = Math.round((abs / unit.threshold) * 10) / 10;\n // Carry over, e.g. 999.96k rounds to \"1000k\" — bump to the next unit instead.\n if (scaled >= 1000 && i > 0) {\n const next = COMPACT_UNITS[i - 1];\n scaled = Math.round((abs / next.threshold) * 10) / 10;\n return `${sign}${scaled}${next.suffix}`;\n }\n return `${sign}${scaled}${unit.suffix}`;\n }\n return String(value);\n}\n","import { numberFormatter } from './intl-formatters';\nexport type PercentageDecimals = 1 | 2;\n\n/** Format a ratio as a percentage (English by default) with an exact, supported precision. */\nexport function formatPercentage(\n ratio: number,\n decimals: PercentageDecimals = 1,\n locale?: string\n): string {\n const precision = decimals === 2 ? 2 : 1;\n const value = Number.isFinite(ratio) ? ratio : 0;\n\n return numberFormatter(locale, {\n style: 'percent',\n minimumFractionDigits: precision,\n maximumFractionDigits: precision,\n }).format(value);\n}\n","@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n display: block;\n font-family: var(--typography-font-family-ui);\n user-select: none;\n}\n\n.chart-legend__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so optional highlight/link\n affordances cover the whole row while children align to the shared grid columns. */\n.chart-legend__list-item {\n display: contents;\n}\n\n:host(.chart-legend--vertical) .chart-legend__list {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600);\n column-gap: var(--dimension-space-075);\n row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical.chart-legend--show-percentage) .chart-legend__list {\n grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n display: flex;\n flex-wrap: wrap;\n gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n display: flex;\n gap: var(--dimension-space-100);\n}\n\n/*\n * Density: md control recipe (height / pad / radius / label inset).\n * Hover/press: `.ds-interaction-fill` (token overlay on ::after).\n */\n.chart-legend__item {\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n align-items: center;\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n text-decoration: none;\n color: inherit;\n}\n\n.chart-legend__item--interactive {\n cursor: pointer;\n}\n\n/* Raise row content above interaction fills (positive z-index on util layers). */\n.chart-legend__item > * {\n position: relative;\n z-index: 2;\n}\n\n.chart-legend__swatch-box {\n width: var(--dimension-size-250);\n height: var(--dimension-size-250);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.chart-legend__swatch {\n width: var(--dimension-space-150);\n height: var(--dimension-space-150);\n border-radius: var(--dimension-radius-025);\n flex-shrink: 0;\n transition: opacity var(--effect-motion-short-2);\n}\n\n/* Highlight the swatches without reducing contrast for labels and numeric details. */\n.chart-legend__item--dimmed .chart-legend__swatch {\n opacity: var(--effect-opacity-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .chart-legend__swatch {\n transition: none;\n }\n}\n\n.chart-legend__label {\n min-width: 0;\n}\n\n.chart-legend__percentage {\n width: 100%;\n min-width: 0;\n text-align: right;\n}\n\n.chart-legend__value {\n width: 100%;\n text-align: right;\n min-width: 0;\n}\n\n@media (forced-colors: active) {\n .chart-legend__swatch {\n forced-color-adjust: none;\n outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n }\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber, formatPercentage, resolveSafeUrl } from '../../utils';\nimport type { ChartLegendItem } from '../../utils/chart-types';\n\nexport type ChartLegendDirection = 'vertical' | 'horizontal';\nexport type ChartLegendPercentageDecimals = 1 | 2;\n\n/**\n * Base legend for `ds-chart-*` components. Webapp's Overview widgets each style\n * legends differently (list w/ values, compact chips, bare swatches, external\n * stat callouts) — this covers the common \"swatch + label + optional value\" case.\n * Consumers who need a different treatment skip this component entirely and\n * render their own markup against the same `ChartLegendItem[]` data.\n */\n@Component({\n tag: 'ds-chart-legend',\n styleUrl: 'ChartLegend.css',\n scoped: true,\n})\nexport class ChartLegend {\n @Prop() locale: string | undefined;\n /** Legend entries. Set as a JS property (not an HTML attribute). */\n @Prop() items: ChartLegendItem[] = [];\n @Prop() direction: ChartLegendDirection = 'vertical';\n /** Show each item's share of the total (of items with a `value`) alongside its count. */\n @Prop() showPercentage: boolean = true;\n /** Fixed number of decimal places shown for percentages. */\n @Prop() percentageDecimals: ChartLegendPercentageDecimals = 1;\n /** Let local pointer/focus movement highlight one item and emit `dsItemHover`. */\n @Prop() highlightOnHover: boolean = true;\n /**\n * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n * chart's `dsSliceHover` event to keep chart and legend hover in sync. Dims the other\n * rows' swatches while keeping their text fully readable. It never shows the hover-fill,\n * since that's reserved for a real pointer/keyboard interaction on this row.\n */\n @Prop() activeLabel: string | null = null;\n\n /** Own pointer/focus hover, kept separate from `activeLabel` so the hover-fill (a \"you can\n * click here\" affordance) never shows just because an external row was synced in. */\n @State() private hoveredLabel: string | null = null;\n\n /** Fires on row hover/focus with the item, or `null` on leave/blur. */\n @Event() dsItemHover!: EventEmitter<ChartLegendItem | null>;\n /** Fires when a deep-linkable row (`item.href` set) is activated. */\n @Event() dsItemClick!: EventEmitter<{ item: ChartLegendItem; originalEvent: MouseEvent }>;\n\n @Watch('highlightOnHover')\n handleHighlightOnHoverChange(enabled: boolean) {\n if (!enabled) this.hoveredLabel = null;\n }\n\n private handleHover(item: ChartLegendItem | null) {\n this.hoveredLabel = item?.label ?? null;\n this.dsItemHover.emit(item);\n }\n\n private handleClick = (item: ChartLegendItem, originalEvent: MouseEvent) => {\n this.dsItemClick.emit({ item, originalEvent });\n };\n\n render() {\n const total = this.items.reduce((sum, item) => sum + (item.value ?? 0), 0);\n // Highlight/dim from either this component's own hover or an externally-synced label\n // (e.g. an application-owned chart focus state).\n const highlightLabel = this.activeLabel ?? (this.highlightOnHover ? this.hoveredLabel : null);\n\n return (\n <Host\n class={{\n 'chart-legend': true,\n [`chart-legend--${this.direction}`]: true,\n 'chart-legend--show-percentage': this.showPercentage,\n }}\n >\n {/* mouseleave lives on the list, not each row — the row-gap between items is still\n inside the list's box, so crossing it while moving between rows never fires this.\n Only actually leaving the whole list does, and that clears with no delay. */}\n <ul\n class=\"chart-legend__list\"\n onMouseLeave={this.highlightOnHover ? () => this.handleHover(null) : undefined}\n >\n {this.items.map((item, i) => {\n const isDimmed = highlightLabel != null && item.label !== highlightLabel;\n const href = resolveSafeUrl(item.href);\n const RowTag = href ? 'a' : 'div';\n const percentage =\n item.value != null\n ? formatPercentage(\n total ? item.value / total : 0,\n this.percentageDecimals,\n this.locale\n )\n : '';\n\n return (\n <li class=\"chart-legend__list-item\" key={item.label}>\n <RowTag\n class={{\n 'chart-legend__item': true,\n 'chart-legend__item--interactive': !!href,\n 'chart-legend__item--dimmed': isDimmed,\n 'ds-control--md': true,\n 'ds-interaction-fill': this.highlightOnHover || !!href,\n 'ds-focus-ring-inset': !!href,\n }}\n href={href}\n onClick={href ? (e: MouseEvent) => this.handleClick(item, e) : undefined}\n onMouseEnter={this.highlightOnHover ? () => this.handleHover(item) : undefined}\n onFocus={this.highlightOnHover ? () => this.handleHover(item) : undefined}\n onBlur={this.highlightOnHover ? () => this.handleHover(null) : undefined}\n >\n <span class=\"chart-legend__swatch-box\">\n <span\n class=\"chart-legend__swatch\"\n style={{ backgroundColor: item.color ?? categoryColor(i) }}\n />\n </span>\n <ds-text\n class=\"chart-legend__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"secondary\"\n lineTruncation={1}\n title={item.label}\n >\n {item.label}\n </ds-text>\n {item.value != null && (\n <ds-text\n class=\"chart-legend__value\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"primary\"\n lineTruncation={1}\n align=\"right\"\n fontFeature=\"tabular-nums\"\n title={String(item.value)}\n >\n {formatCompactNumber(item.value, this.locale)}\n </ds-text>\n )}\n {item.value != null && this.showPercentage && (\n <ds-text\n class=\"chart-legend__percentage\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"primary\"\n lineTruncation={1}\n align=\"right\"\n fontFeature=\"tabular-nums\"\n title={percentage}\n >\n {percentage}\n </ds-text>\n )}\n </RowTag>\n </li>\n );\n })}\n </ul>\n </Host>\n );\n }\n}\n"],"mappings":"6MACA,MAAMA,EAAyD,CAC7D,CAAEC,UAAW,IAAeC,OAAQ,KACpC,CAAED,UAAW,IAAWC,OAAQ,KAChC,CAAED,UAAW,IAAOC,OAAQ,MAIxB,SAAUC,EAAoBC,EAAeC,GACjD,GAAIA,EAAQ,CACV,OAAOC,EAAgBD,EAAQ,CAC7BE,SAAU,UACVC,eAAgB,QAChBC,sBAAuB,IACtBC,OAAON,E,CAEZ,MAAMO,EAAOP,EAAQ,EAAI,IAAM,GAC/B,MAAMQ,EAAMC,KAAKD,IAAIR,GACrB,GAAIQ,EAAM,IAAM,OAAOE,OAAOV,GAE9B,IAAK,IAAIW,EAAI,EAAGA,EAAIf,EAAcgB,OAAQD,IAAK,CAC7C,MAAME,EAAOjB,EAAce,GAC3B,GAAIH,EAAMK,EAAKhB,UAAW,SAE1B,IAAIiB,EAASL,KAAKM,MAAOP,EAAMK,EAAKhB,UAAa,IAAM,GAEvD,GAAIiB,GAAU,KAAQH,EAAI,EAAG,CAC3B,MAAMK,EAAOpB,EAAce,EAAI,GAC/BG,EAASL,KAAKM,MAAOP,EAAMQ,EAAKnB,UAAa,IAAM,GACnD,MAAO,GAAGU,IAAOO,IAASE,EAAKlB,Q,CAEjC,MAAO,GAAGS,IAAOO,IAASD,EAAKf,Q,CAEjC,OAAOY,OAAOV,EAChB,CC9BM,SAAUiB,EACdC,EACAC,EAA+B,EAC/BlB,GAEA,MAAMmB,EAAYD,IAAa,EAAI,EAAI,EACvC,MAAMnB,EAAQqB,OAAOC,SAASJ,GAASA,EAAQ,EAE/C,OAAOhB,EAAgBD,EAAQ,CAC7BsB,MAAO,UACPC,sBAAuBJ,EACvBf,sBAAuBe,IACtBd,OAAON,EACZ,CCjBA,MAAMyB,EAAiB,IAAM,mkhB,MCoBhBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,8HAQUC,KAAAC,MAA2B,GAC3BD,KAAAE,UAAkC,WAElCF,KAAAG,eAA0B,KAE1BH,KAAAI,mBAAoD,EAEpDJ,KAAAK,iBAA4B,KAO5BL,KAAAM,YAA6B,KAIpBN,KAAAO,aAA8B,KAiBvCP,KAAAQ,YAAc,CAACC,EAAuBC,KAC5CV,KAAKW,YAAYC,KAAK,CAAEH,OAAMC,iBAAgB,CA0GjD,CApHC,4BAAAG,CAA6BC,GAC3B,IAAKA,EAASd,KAAKO,aAAe,I,CAG5B,WAAAQ,CAAYN,GAClBT,KAAKO,aAAeE,GAAMO,OAAS,KACnChB,KAAKiB,YAAYL,KAAKH,E,CAOxB,MAAAS,GACE,MAAMC,EAAQnB,KAAKC,MAAMmB,QAAO,CAACC,EAAKZ,IAASY,GAAOZ,EAAKxC,OAAS,IAAI,GAGxE,MAAMqD,EAAiBtB,KAAKM,cAAgBN,KAAKK,iBAAmBL,KAAKO,aAAe,MAExF,OACEgB,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,eAAgB,KAChB,CAAC,iBAAiB1B,KAAKE,aAAc,KACrC,gCAAiCF,KAAKG,iBAMxCoB,EAAA,MAAAE,IAAA,2CACEC,MAAM,qBACNC,aAAc3B,KAAKK,iBAAmB,IAAML,KAAKe,YAAY,MAAQa,WAEpE5B,KAAKC,MAAM4B,KAAI,CAACpB,EAAM7B,KACrB,MAAMkD,EAAWR,GAAkB,MAAQb,EAAKO,QAAUM,EAC1D,MAAMS,EAAOC,EAAevB,EAAKsB,MACjC,MAAME,EAASF,EAAO,IAAM,MAC5B,MAAMG,EACJzB,EAAKxC,OAAS,KACViB,EACEiC,EAAQV,EAAKxC,MAAQkD,EAAQ,EAC7BnB,KAAKI,mBACLJ,KAAK9B,QAEP,GAEN,OACEqD,EAAA,MAAIG,MAAM,0BAA0BD,IAAKhB,EAAKO,OAC5CO,EAACU,EAAM,CACLP,MAAO,CACL,qBAAsB,KACtB,oCAAqCK,EACrC,6BAA8BD,EAC9B,iBAAkB,KAClB,sBAAuB9B,KAAKK,oBAAsB0B,EAClD,wBAAyBA,GAE3BA,KAAMA,EACNI,QAASJ,EAAQK,GAAkBpC,KAAKQ,YAAYC,EAAM2B,GAAKR,UAC/DS,aAAcrC,KAAKK,iBAAmB,IAAML,KAAKe,YAAYN,GAAQmB,UACrEU,QAAStC,KAAKK,iBAAmB,IAAML,KAAKe,YAAYN,GAAQmB,UAChEW,OAAQvC,KAAKK,iBAAmB,IAAML,KAAKe,YAAY,MAAQa,WAE/DL,EAAA,QAAMG,MAAM,4BACVH,EAAA,QACEG,MAAM,uBACNlC,MAAO,CAAEgD,gBAAiB/B,EAAKgC,OAASC,EAAc9D,OAG1D2C,EAAA,WACEG,MAAM,sBACNiB,GAAG,OACHC,QAAQ,mBACRH,MAAM,YACNI,eAAgB,EAChBC,MAAOrC,EAAKO,OAEXP,EAAKO,OAEPP,EAAKxC,OAAS,MACbsD,EAAA,WACEG,MAAM,sBACNiB,GAAG,OACHC,QAAQ,mBACRH,MAAM,UACNI,eAAgB,EAChBE,MAAM,QACNC,YAAY,eACZF,MAAOnE,OAAO8B,EAAKxC,QAElBD,EAAoByC,EAAKxC,MAAO+B,KAAK9B,SAGzCuC,EAAKxC,OAAS,MAAQ+B,KAAKG,gBAC1BoB,EAAA,WACEG,MAAM,2BACNiB,GAAG,OACHC,QAAQ,mBACRH,MAAM,UACNI,eAAgB,EAChBE,MAAM,QACNC,YAAY,eACZF,MAAOZ,GAENA,IAIJ,K","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{C as o,d as s}from"./p-
|
|
1
|
+
import{C as o,d as s}from"./p-CMZAEySh.js";const t=o;const p=s;export{t as DsChip,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chip.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{C as
|
|
1
|
+
import{C as s,d as o}from"./p-CnsuVR2e.js";const t=s;const n=o;export{t as DsCodeBlock,n as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-code-block.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as e,c as t,h as i,a,t as
|
|
1
|
+
import{p as s,H as e,c as t,h as i,a,t as n}from"./index.js";import{l as o,r,t as d}from"./p-HMDczkQf.js";import{d as h}from"./p-ClOvX8cD.js";import{d as l}from"./p-D5-hqLPK.js";import{d as c}from"./p-C942uiH1.js";import{d as m}from"./p-0XTyQNRG.js";import{d as u}from"./p-D8iNLSCa.js";import{d as f}from"./p-Nx52go85.js";import{d as p}from"./p-KTaiJztz.js";import{d as b}from"./p-Bt1Ybvz-.js";import{d as g}from"./p-DMPn_dt7.js";import{d as k}from"./p-DTlNtCX1.js";const z=()=>`.sc-ds-data-customize-h{display:inline-flex;min-inline-size:0;max-inline-size:var(--dimension-menu-width-xs)}[hidden].sc-ds-data-customize-h{display:none}`;let E=0;const C=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsFieldsConfigChange=t(this,"dsFieldsConfigChange",3);this.dsOptionChange=t(this,"dsOptionChange",3);this.hasBorder=true;this.fields=[];this.hiddenFieldIds=[];this.fieldOrder=[];this.reorderable=false;this.minVisible=0;this.options=[];this.optionsHeader="Options";this.ariaLabel=null;this.label="Customize";this.menuOpen=false;this.menuSurfaceOpen=false;this.initialFocusVisible=false;this.componentId=`ds-data-customize-${++E}`;this.triggerId=`${this.componentId}-trigger`;this.menuId=`${this.componentId}-menu`}async setFocus(){const s=this.el.querySelector(`#${CSS.escape(this.triggerId)}`);await(s?.setFocus?.())}get customizerOptions(){return{minVisible:this.minVisible,reorderable:this.reorderable}}get catalog(){return this.fields.map((s=>({id:s.id,label:s.label.trim()||s.accessibleLabel?.trim()||s.id})))}get sections(){const s=o(this.catalog,this.hiddenFieldIds,this.fieldOrder,this.customizerOptions);return[...s.length?[{header:this.catalogHeader??(this.options.length?"Data":undefined),items:s}]:[],...this.options.length?[{header:this.optionsHeader,items:this.options}]:[]]}render(){const s=this.ariaLabel?.trim()||this.label?.trim()||"Customize";const e=this.fields.length===0&&this.options.length===0;return i(a,{key:"70a02499cf87d2d5e599bfddf78b5497fbaac2fe",hidden:e?true:undefined},e?null:i("ds-button-unfilled",{hasBorder:this.hasBorder,id:this.triggerId,variant:"icon-label",size:"md",icon:"Preferences",label:this.label,labelEmphasis:false,pressScale:false,"aria-label":s,haspopup:"menu",collapseLabel:true,expanded:this.menuOpen,surfaceOpen:this.menuSurfaceOpen,controls:this.menuId,onDsClick:s=>{this.toggle(s.detail.detail===0)}}),e?null:i("ds-menu",{id:this.menuId,open:this.menuOpen,anchorId:this.triggerId,align:"start",side:"bottom",menuLabel:s,selectionMode:"none",initialFocusVisible:this.initialFocusVisible,sections:this.sections,onDsClose:()=>this.close(),onDsAfterClose:()=>{if(!this.menuOpen)this.menuSurfaceOpen=false},onDsSelect:s=>this.handleSelect(s.detail),onDsReorder:s=>this.handleReorder(s.detail.items)}))}toggle(s=false){if(this.menuOpen)this.close();else this.open(s)}open(s=false){if(this.menuOpen)return;this.initialFocusVisible=s;this.menuOpen=true;this.menuSurfaceOpen=true}close(){this.menuOpen=false}handleSelect(s){const e=s.value;if(!e||s.isInactive)return;if(this.options.some((s=>s.value===e))){this.dsOptionChange.emit(e);return}const t=this.catalog.map((s=>s.id));this.dsFieldsConfigChange.emit({hiddenFieldIds:d(t,this.hiddenFieldIds,e,this.customizerOptions),fieldOrder:r(t,this.fieldOrder)})}handleReorder(s){if(!this.reorderable)return;const e=s.filter((s=>s.reorderable&&s.value)).map((s=>s.value));if(e.length===0)return;this.dsFieldsConfigChange.emit({hiddenFieldIds:this.hiddenFieldIds,fieldOrder:r(this.catalog.map((s=>s.id)),e)})}get el(){return this}static get style(){return z()}},[2,"ds-data-customize",{hasBorder:[4,"has-border"],fields:[16],hiddenFieldIds:[16],fieldOrder:[16],reorderable:[4],minVisible:[2,"min-visible"],catalogHeader:[1,"catalog-header"],options:[16],optionsHeader:[1,"options-header"],ariaLabel:[1,"aria-label"],label:[1],menuOpen:[32],menuSurfaceOpen:[32],initialFocusVisible:[32],setFocus:[64]}]);function j(){if(typeof customElements==="undefined"){return}const s=["ds-data-customize","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-tag","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-data-customize":if(!customElements.get(n(s))){customElements.define(n(s),C)}break;case"ds-badge":if(!customElements.get(n(s))){h()}break;case"ds-button-unfilled":if(!customElements.get(n(s))){l()}break;case"ds-icon":if(!customElements.get(n(s))){c()}break;case"ds-loader":if(!customElements.get(n(s))){m()}break;case"ds-menu":if(!customElements.get(n(s))){u()}break;case"ds-swatch-picker":if(!customElements.get(n(s))){f()}break;case"ds-switch":if(!customElements.get(n(s))){p()}break;case"ds-tag":if(!customElements.get(n(s))){b()}break;case"ds-text":if(!customElements.get(n(s))){g()}break;case"ds-tooltip":if(!customElements.get(n(s))){k()}break}}))}j();const D=C;const x=j;export{D as DsDataCustomize,x as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-data-customize.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["dataCustomizeCss","dataCustomizeSeq","DataCustomize","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","hasBorder","fields","hiddenFieldIds","fieldOrder","reorderable","minVisible","options","optionsHeader","ariaLabel","label","menuOpen","menuSurfaceOpen","initialFocusVisible","componentId","triggerId","menuId","setFocus","trigger","el","querySelector","CSS","escape","customizerOptions","catalog","map","field","id","trim","accessibleLabel","sections","rows","listCustomizerMenuItems","length","header","catalogHeader","undefined","items","render","name","empty","h","Host","key","hidden","variant","size","icon","labelEmphasis","pressScale","haspopup","collapseLabel","expanded","surfaceOpen","controls","onDsClick","event","toggle","detail","open","anchorId","align","side","menuLabel","selectionMode","onDsClose","close","onDsAfterClose","onDsSelect","handleSelect","onDsReorder","handleReorder","fromKeyboard","item","value","isInactive","some","option","dsOptionChange","emit","ids","entry","dsFieldsConfigChange","toggleListHidden","resolveListOrder","next","filter"],"sources":["src/wc/components/DataCustomize/DataCustomize.css?tag=ds-data-customize&encapsulation=scoped","src/wc/components/DataCustomize/DataCustomize.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n min-inline-size: 0;\n max-inline-size: var(--dimension-menu-width-xs);\n}\n\n:host([hidden]) {\n display: none;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport type { DataField } from '../../utils/data-field';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n listCustomizerMenuItems,\n resolveListOrder,\n toggleListHidden,\n type ListCustomizerOptions,\n} from '../../utils/list-customizer';\n\nexport interface DataCustomizeChangeDetail {\n /** Fields the viewer has hidden, in the order they were hidden. */\n hiddenFieldIds: string[];\n /** Field ids in display order. Unchanged unless the catalog reorders. */\n fieldOrder: string[];\n}\n\nlet dataCustomizeSeq = 0;\n\n/**\n * Show, hide and optionally reorder the data points a view renders.\n *\n * The table owns its own column customizer inside the caption, because a table\n * locks its last visible column and reorders columns. This control is the same\n * catalog for every other surface — a card list, a map overlay — where the\n * fields are independent and usually only show and hide.\n */\n@Component({\n tag: 'ds-data-customize',\n styleUrl: 'DataCustomize.css',\n scoped: true,\n})\nexport class DataCustomize {\n @Element() private el!: HTMLElement;\n\n /** Show the trigger border. */\n @Prop() hasBorder: boolean = true;\n /** Catalog of data points the view can render. */\n @Prop() fields: DataField[] = [];\n /** Controlled hidden field ids. */\n @Prop() hiddenFieldIds: string[] = [];\n /** Controlled display order. Ids missing from it keep catalog order. */\n @Prop() fieldOrder: string[] = [];\n /**\n * Drag-reorder the catalog rows. Off by default: most surfaces only show and\n * hide, and a card layout has no column order to express.\n */\n @Prop() reorderable: boolean = false;\n /**\n * Fields that must stay visible. Zero by default, so a view whose identity\n * lives outside this catalog can hide every entry in it.\n */\n @Prop() minVisible: number = 0;\n /** Section header above the catalog rows. Omitted when there is no second section. */\n @Prop() catalogHeader?: string;\n /** Extra switch rows rendered in their own Options section. */\n @Prop() options: MenuItemData[] = [];\n /** Header for the options section. */\n @Prop() optionsHeader: string = 'Options';\n /** Accessible name for the trigger and menu. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n /** Visible trigger label. Collapses to the icon when space is tight. */\n @Prop() label: string = 'Customize';\n\n @Event({ bubbles: false }) dsFieldsConfigChange!: EventEmitter<DataCustomizeChangeDetail>;\n @Event({ bubbles: false }) dsOptionChange!: EventEmitter<string>;\n\n @State() private menuOpen = false;\n @State() private menuSurfaceOpen = false;\n @State() private initialFocusVisible = false;\n\n private readonly componentId = `ds-data-customize-${++dataCustomizeSeq}`;\n private readonly triggerId = `${this.componentId}-trigger`;\n private readonly menuId = `${this.componentId}-menu`;\n\n @Method()\n async setFocus() {\n const trigger = this.el.querySelector<HTMLElement & { setFocus?: () => Promise<void> }>(\n `#${CSS.escape(this.triggerId)}`\n );\n await trigger?.setFocus?.();\n }\n\n private get customizerOptions(): ListCustomizerOptions {\n return { minVisible: this.minVisible, reorderable: this.reorderable };\n }\n\n private get catalog(): { id: string; label: string }[] {\n return this.fields.map(field => ({\n id: field.id,\n label: field.label.trim() || field.accessibleLabel?.trim() || field.id,\n }));\n }\n\n private get sections(): MenuSection[] {\n const rows = listCustomizerMenuItems(\n this.catalog,\n this.hiddenFieldIds,\n this.fieldOrder,\n this.customizerOptions\n );\n\n return [\n ...(rows.length\n ? [\n {\n header: this.catalogHeader ?? (this.options.length ? 'Data' : undefined),\n items: rows,\n },\n ]\n : []),\n ...(this.options.length ? [{ header: this.optionsHeader, items: this.options }] : []),\n ];\n }\n\n render() {\n const name = this.ariaLabel?.trim() || this.label?.trim() || 'Customize';\n const empty = this.fields.length === 0 && this.options.length === 0;\n\n return (\n <Host hidden={empty ? true : undefined}>\n {empty ? null : (\n <ds-button-unfilled\n hasBorder={this.hasBorder}\n id={this.triggerId}\n variant=\"icon-label\"\n size=\"md\"\n icon=\"Preferences\"\n label={this.label}\n labelEmphasis={false}\n pressScale={false}\n aria-label={name}\n haspopup=\"menu\"\n collapseLabel={true}\n expanded={this.menuOpen}\n surfaceOpen={this.menuSurfaceOpen}\n controls={this.menuId}\n onDsClick={(event: CustomEvent<MouseEvent>) => {\n this.toggle(event.detail.detail === 0);\n }}\n />\n )}\n {empty ? null : (\n <ds-menu\n id={this.menuId}\n open={this.menuOpen}\n anchorId={this.triggerId}\n align=\"start\"\n side=\"bottom\"\n menuLabel={name}\n selectionMode=\"none\"\n initialFocusVisible={this.initialFocusVisible}\n sections={this.sections}\n onDsClose={() => this.close()}\n onDsAfterClose={() => {\n if (!this.menuOpen) this.menuSurfaceOpen = false;\n }}\n onDsSelect={event => this.handleSelect(event.detail)}\n onDsReorder={event => this.handleReorder(event.detail.items)}\n />\n )}\n </Host>\n );\n }\n\n private toggle(fromKeyboard = false): void {\n if (this.menuOpen) this.close();\n else this.open(fromKeyboard);\n }\n\n private open(fromKeyboard = false): void {\n if (this.menuOpen) return;\n this.initialFocusVisible = fromKeyboard;\n this.menuOpen = true;\n this.menuSurfaceOpen = true;\n }\n\n private close(): void {\n this.menuOpen = false;\n }\n\n private handleSelect(item: MenuItemData): void {\n const value = item.value;\n if (!value || item.isInactive) return;\n\n if (this.options.some(option => option.value === value)) {\n this.dsOptionChange.emit(value);\n return;\n }\n\n const ids = this.catalog.map(entry => entry.id);\n this.dsFieldsConfigChange.emit({\n hiddenFieldIds: toggleListHidden(ids, this.hiddenFieldIds, value, this.customizerOptions),\n fieldOrder: resolveListOrder(ids, this.fieldOrder),\n });\n }\n\n private handleReorder(items: MenuItemData[]): void {\n if (!this.reorderable) return;\n\n // Menu reports the new order of the reorderable run. resolveListOrder\n // rebuilds the full order from it, appending anything the run omitted.\n const next = items\n .filter(item => item.reorderable && item.value)\n .map(item => item.value as string);\n if (next.length === 0) return;\n\n this.dsFieldsConfigChange.emit({\n hiddenFieldIds: this.hiddenFieldIds,\n fieldOrder: resolveListOrder(\n this.catalog.map(entry => entry.id),\n next\n ),\n });\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["dataCustomizeCss","dataCustomizeSeq","DataCustomize","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","hasBorder","fields","hiddenFieldIds","fieldOrder","reorderable","minVisible","options","optionsHeader","ariaLabel","label","menuOpen","menuSurfaceOpen","initialFocusVisible","componentId","triggerId","menuId","setFocus","trigger","el","querySelector","CSS","escape","customizerOptions","catalog","map","field","id","trim","accessibleLabel","sections","rows","listCustomizerMenuItems","length","header","catalogHeader","undefined","items","render","name","empty","h","Host","key","hidden","variant","size","icon","labelEmphasis","pressScale","haspopup","collapseLabel","expanded","surfaceOpen","controls","onDsClick","event","toggle","detail","open","anchorId","align","side","menuLabel","selectionMode","onDsClose","close","onDsAfterClose","onDsSelect","handleSelect","onDsReorder","handleReorder","fromKeyboard","item","value","isInactive","some","option","dsOptionChange","emit","ids","entry","dsFieldsConfigChange","toggleListHidden","resolveListOrder","next","filter"],"sources":["src/wc/components/DataCustomize/DataCustomize.css?tag=ds-data-customize&encapsulation=scoped","src/wc/components/DataCustomize/DataCustomize.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n min-inline-size: 0;\n max-inline-size: var(--dimension-menu-width-xs);\n}\n\n:host([hidden]) {\n display: none;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport type { DataField } from '../../utils/data-field';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n listCustomizerMenuItems,\n resolveListOrder,\n toggleListHidden,\n type ListCustomizerOptions,\n} from '../../utils/list-customizer';\n\nexport interface DataCustomizeChangeDetail {\n /** Fields the viewer has hidden, in the order they were hidden. */\n hiddenFieldIds: string[];\n /** Field ids in display order. Unchanged unless the catalog reorders. */\n fieldOrder: string[];\n}\n\nlet dataCustomizeSeq = 0;\n\n/**\n * Show, hide and optionally reorder the data points a view renders.\n *\n * The table owns its own column customizer inside the caption, because a table\n * locks its last visible column and reorders columns. This control is the same\n * catalog for every other surface — a card list, a map overlay — where the\n * fields are independent and usually only show and hide.\n */\n@Component({\n tag: 'ds-data-customize',\n styleUrl: 'DataCustomize.css',\n scoped: true,\n})\nexport class DataCustomize {\n @Element() private el!: HTMLElement;\n\n /** Show the trigger border. */\n @Prop() hasBorder: boolean = true;\n /** Catalog of data points the view can render. */\n @Prop() fields: DataField[] = [];\n /** Controlled hidden field ids. */\n @Prop() hiddenFieldIds: string[] = [];\n /** Controlled display order. Ids missing from it keep catalog order. */\n @Prop() fieldOrder: string[] = [];\n /**\n * Drag-reorder the catalog rows. Off by default: most surfaces only show and\n * hide, and a card layout has no column order to express.\n */\n @Prop() reorderable: boolean = false;\n /**\n * Fields that must stay visible. Zero by default, so a view whose identity\n * lives outside this catalog can hide every entry in it.\n */\n @Prop() minVisible: number = 0;\n /** Section header above the catalog rows. Omitted when there is no second section. */\n @Prop() catalogHeader?: string;\n /** Extra switch rows rendered in their own Options section. */\n @Prop() options: MenuItemData[] = [];\n /** Header for the options section. */\n @Prop() optionsHeader: string = 'Options';\n /** Accessible name for the trigger and menu. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n /** Visible trigger label. Collapses to the icon when space is tight. */\n @Prop() label: string = 'Customize';\n\n @Event({ bubbles: false }) dsFieldsConfigChange!: EventEmitter<DataCustomizeChangeDetail>;\n @Event({ bubbles: false }) dsOptionChange!: EventEmitter<string>;\n\n @State() private menuOpen = false;\n @State() private menuSurfaceOpen = false;\n @State() private initialFocusVisible = false;\n\n private readonly componentId = `ds-data-customize-${++dataCustomizeSeq}`;\n private readonly triggerId = `${this.componentId}-trigger`;\n private readonly menuId = `${this.componentId}-menu`;\n\n @Method()\n async setFocus() {\n const trigger = this.el.querySelector<HTMLElement & { setFocus?: () => Promise<void> }>(\n `#${CSS.escape(this.triggerId)}`\n );\n await trigger?.setFocus?.();\n }\n\n private get customizerOptions(): ListCustomizerOptions {\n return { minVisible: this.minVisible, reorderable: this.reorderable };\n }\n\n private get catalog(): { id: string; label: string }[] {\n return this.fields.map(field => ({\n id: field.id,\n label: field.label.trim() || field.accessibleLabel?.trim() || field.id,\n }));\n }\n\n private get sections(): MenuSection[] {\n const rows = listCustomizerMenuItems(\n this.catalog,\n this.hiddenFieldIds,\n this.fieldOrder,\n this.customizerOptions\n );\n\n return [\n ...(rows.length\n ? [\n {\n header: this.catalogHeader ?? (this.options.length ? 'Data' : undefined),\n items: rows,\n },\n ]\n : []),\n ...(this.options.length ? [{ header: this.optionsHeader, items: this.options }] : []),\n ];\n }\n\n render() {\n const name = this.ariaLabel?.trim() || this.label?.trim() || 'Customize';\n const empty = this.fields.length === 0 && this.options.length === 0;\n\n return (\n <Host hidden={empty ? true : undefined}>\n {empty ? null : (\n <ds-button-unfilled\n hasBorder={this.hasBorder}\n id={this.triggerId}\n variant=\"icon-label\"\n size=\"md\"\n icon=\"Preferences\"\n label={this.label}\n labelEmphasis={false}\n pressScale={false}\n aria-label={name}\n haspopup=\"menu\"\n collapseLabel={true}\n expanded={this.menuOpen}\n surfaceOpen={this.menuSurfaceOpen}\n controls={this.menuId}\n onDsClick={(event: CustomEvent<MouseEvent>) => {\n this.toggle(event.detail.detail === 0);\n }}\n />\n )}\n {empty ? null : (\n <ds-menu\n id={this.menuId}\n open={this.menuOpen}\n anchorId={this.triggerId}\n align=\"start\"\n side=\"bottom\"\n menuLabel={name}\n selectionMode=\"none\"\n initialFocusVisible={this.initialFocusVisible}\n sections={this.sections}\n onDsClose={() => this.close()}\n onDsAfterClose={() => {\n if (!this.menuOpen) this.menuSurfaceOpen = false;\n }}\n onDsSelect={event => this.handleSelect(event.detail)}\n onDsReorder={event => this.handleReorder(event.detail.items)}\n />\n )}\n </Host>\n );\n }\n\n private toggle(fromKeyboard = false): void {\n if (this.menuOpen) this.close();\n else this.open(fromKeyboard);\n }\n\n private open(fromKeyboard = false): void {\n if (this.menuOpen) return;\n this.initialFocusVisible = fromKeyboard;\n this.menuOpen = true;\n this.menuSurfaceOpen = true;\n }\n\n private close(): void {\n this.menuOpen = false;\n }\n\n private handleSelect(item: MenuItemData): void {\n const value = item.value;\n if (!value || item.isInactive) return;\n\n if (this.options.some(option => option.value === value)) {\n this.dsOptionChange.emit(value);\n return;\n }\n\n const ids = this.catalog.map(entry => entry.id);\n this.dsFieldsConfigChange.emit({\n hiddenFieldIds: toggleListHidden(ids, this.hiddenFieldIds, value, this.customizerOptions),\n fieldOrder: resolveListOrder(ids, this.fieldOrder),\n });\n }\n\n private handleReorder(items: MenuItemData[]): void {\n if (!this.reorderable) return;\n\n // Menu reports the new order of the reorderable run. resolveListOrder\n // rebuilds the full order from it, appending anything the run omitted.\n const next = items\n .filter(item => item.reorderable && item.value)\n .map(item => item.value as string);\n if (next.length === 0) return;\n\n this.dsFieldsConfigChange.emit({\n hiddenFieldIds: this.hiddenFieldIds,\n fieldOrder: resolveListOrder(\n this.catalog.map(entry => entry.id),\n next\n ),\n });\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as e,c as t,h as i,a,t as r}from"./index.js";import{d as o}from"./p-ClOvX8cD.js";import{d as l}from"./p-
|
|
1
|
+
import{p as s,H as e,c as t,h as i,a,t as r}from"./index.js";import{d as o}from"./p-ClOvX8cD.js";import{d as l}from"./p-D5-hqLPK.js";import{d}from"./p-DiNEjFpy.js";import{d as n}from"./p-BYo1-6b5.js";import{d as c}from"./p-CMZAEySh.js";import{d as h}from"./p-G6r6yYg8.js";import{d as m}from"./p-Dc_zSOKq.js";import{d as f}from"./p-BI-XuQKW.js";import{d as u}from"./p-C942uiH1.js";import{d as p}from"./p-CsGkdf4W.js";import{d as b}from"./p-0XTyQNRG.js";import{d as g}from"./p-CXrOGz7X.js";import{d as C}from"./p-Bt1Ybvz-.js";import{d as k}from"./p-DMPn_dt7.js";import{d as E}from"./p-DTlNtCX1.js";const j=()=>`.sc-ds-data-filter-h{display:inline-flex;min-inline-size:0;max-inline-size:var(--dimension-menu-width-xs)}ds-filter-menu.sc-ds-data-filter{min-inline-size:0;max-inline-size:100%;--ds-choice-popup-min-inline-size:var(--dimension-menu-width-xs)}`;const x=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=t(this,"dsChange",7);this.dsClear=t(this,"dsClear",7);this.dsMatchModeChange=t(this,"dsMatchModeChange",7);this.dsActiveFilterChange=t(this,"dsActiveFilterChange",7);this.dsClose=t(this,"dsClose",7);this.dsOpenChange=t(this,"dsOpenChange",7);this.dsAfterClose=t(this,"dsAfterClose",7);this.open=false;this.hasBorder=true;this.filters=[];this.values={};this.matchModes={};this.label="Filter";this.ariaLabel=null;this.menuLabel=null;this.categoriesLabel="Filter categories";this.clearLabel="Clear";this.searchPlaceholder="Search";this.noResultsText="No results"}render(){const s=this.ariaLabel?.trim()||"Filter table";const e=this.menuLabel?.trim()||s;return i(a,{key:"6a2e64f81769c05b0894265eb38f94fe56284037"},i("ds-filter-menu",{key:"921e14ddd69e4f156abe3aeecbddc6b9803745b2",neutralTrigger:true,applyRequired:true,open:this.open,triggerLabel:this.label,showSelectedCount:false,showIndicator:false,icon:"Filters",size:"md",width:"hug",hasBorder:this.hasBorder,activeFill:false,collapseLabel:true,align:"start","aria-label":s,filters:this.filters,values:this.values,matchModes:this.matchModes,activeFilterId:this.activeFilterId,menuLabel:e,categoriesLabel:this.categoriesLabel,clearLabel:this.clearLabel,searchPlaceholder:this.searchPlaceholder,noResultsText:this.noResultsText,footerLayout:"categories-clear",onDsChange:s=>this.forward(s,this.dsChange),onDsClear:s=>this.forward(s,this.dsClear),onDsMatchModeChange:s=>this.forward(s,this.dsMatchModeChange),onDsActiveFilterChange:s=>this.forward(s,this.dsActiveFilterChange),onDsClose:s=>this.forward(s,this.dsClose),onDsOpenChange:s=>{s.stopPropagation();this.open=s.detail;this.dsOpenChange.emit(s.detail)},onDsAfterClose:s=>this.forward(s,this.dsAfterClose)}))}forward(s,e){s.stopPropagation();e.emit(s.detail)}static get style(){return j()}},[2,"ds-data-filter",{open:[1028],hasBorder:[4,"has-border"],filters:[16],values:[16],matchModes:[16],activeFilterId:[1,"active-filter-id"],label:[1],ariaLabel:[1,"aria-label"],menuLabel:[1,"menu-label"],categoriesLabel:[1,"categories-label"],clearLabel:[1,"clear-label"],searchPlaceholder:[1,"search-placeholder"],noResultsText:[1,"no-results-text"]}]);function v(){if(typeof customElements==="undefined"){return}const s=["ds-data-filter","ds-badge","ds-button-unfilled","ds-calendar","ds-checkbox","ds-chip","ds-divider","ds-empty-state","ds-filter-menu","ds-icon","ds-input","ds-loader","ds-tab-group","ds-tag","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-data-filter":if(!customElements.get(r(s))){customElements.define(r(s),x)}break;case"ds-badge":if(!customElements.get(r(s))){o()}break;case"ds-button-unfilled":if(!customElements.get(r(s))){l()}break;case"ds-calendar":if(!customElements.get(r(s))){d()}break;case"ds-checkbox":if(!customElements.get(r(s))){n()}break;case"ds-chip":if(!customElements.get(r(s))){c()}break;case"ds-divider":if(!customElements.get(r(s))){h()}break;case"ds-empty-state":if(!customElements.get(r(s))){m()}break;case"ds-filter-menu":if(!customElements.get(r(s))){f()}break;case"ds-icon":if(!customElements.get(r(s))){u()}break;case"ds-input":if(!customElements.get(r(s))){p()}break;case"ds-loader":if(!customElements.get(r(s))){b()}break;case"ds-tab-group":if(!customElements.get(r(s))){g()}break;case"ds-tag":if(!customElements.get(r(s))){C()}break;case"ds-text":if(!customElements.get(r(s))){k()}break;case"ds-tooltip":if(!customElements.get(r(s))){E()}break}}))}v();const y=x;const D=v;export{y as DsDataFilter,D as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-data-filter.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{D as o,d as s}from"./p-
|
|
1
|
+
import{D as o,d as s}from"./p-oBBzQpg_.js";const p=o;const t=s;export{p as DsDataGroup,t as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-data-group.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as t,h as i,a,t as r}from"./index.js";import{A as d,r as o,d as n}from"./p-DTlNtCX1.js";import{d as h,n as c}from"./p-CJuc20pQ.js";import{t as l,a as f,b as p,r as m,c as u,d as b,e as g}from"./p-DuCfCvPs.js";import{l as v,r as k,t as y}from"./p-HMDczkQf.js";import{C as w}from"./p-DlsjHRU3.js";import{A as x}from"./p-CwUXroLs.js";import{r as C}from"./p-CVYjLzYI.js";import{T as j}from"./p-mSCnWLhL.js";import{d as z}from"./p-ClOvX8cD.js";import{d as D}from"./p-Bn-tsogb.js";import{d as E}from"./p-DI5GEmid.js";import{d as O}from"./p-BYo1-6b5.js";import{d as _}from"./p-BLQgaSh-.js";import{d as M}from"./p-Ddkyu_wE.js";import{d as F}from"./p-G6r6yYg8.js";import{d as L}from"./p-B3-zImxn.js";import{d as I}from"./p-BK_SriZN.js";import{d as P}from"./p-GP7Dz3qO.js";import{d as T}from"./p-txmcXZdy.js";import{d as A}from"./p-0XTyQNRG.js";import{d as R}from"./p-D_kOVT6i.js";import{d as S}from"./p-Nx52go85.js";import{d as $}from"./p-KTaiJztz.js";import{d as B}from"./p-DMjOjrHi.js";import{d as G}from"./p-CwL5zodA.js";import{d as H}from"./p-DMPn_dt7.js";const X=()=>`.sc-ds-data-preferences-h,.sc-ds-data-preferences:where(.ds-table),.sc-ds-data-preferences:where(.tooltip-popup),.sc-ds-data-preferences:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.sc-ds-data-preferences-h{display:inline-flex}.data-preferences.sc-ds-data-preferences{position:fixed;margin:0;padding:0;border:0;border-radius:var(--ds-radius-menu);width:min(var(--dimension-menu-width-lg), calc(100vw - var(--dimension-space-200)));max-height:calc(100dvh - var(--dimension-space-400));display:flex;flex-direction:column;overflow:hidden;background:var(--color-background-primary);color:var(--color-foreground-secondary);box-shadow:var(--effect-shadow-elevated-floating)}.data-preferences.sc-ds-data-preferences::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-floating);pointer-events:none;z-index:4}.data-preferences__tabs.sc-ds-data-preferences{display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;flex:0 0 var(--dimension-size-500);min-block-size:var(--dimension-size-500);padding:var(--dimension-space-050);background:var(--color-background-primary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.data-preferences__body.sc-ds-data-preferences{min-height:0;overflow:auto;overscroll-behavior:contain}.data-preferences-panel.sc-ds-data-preferences .data-preferences__body.sc-ds-data-preferences{--ds-chrome-space-sm-padding:var(--dimension-space-100)}.sc-ds-data-preferences-h:has(.data-preferences-panel){display:flex;flex:1;min-height:0}.data-preferences-panel.sc-ds-data-preferences{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}.data-preferences-panel.sc-ds-data-preferences .data-preferences__tabs.sc-ds-data-preferences{flex:0 0 auto;padding:var(--dimension-space-200);background:transparent}`;const K={minVisible:0,reorderable:false};let N=0;const Q=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsCustomizeOptionChange=t(this,"dsCustomizeOptionChange",7);this.dsPreferencesTabChange=t(this,"dsPreferencesTabChange",7);this.dsFilterChange=t(this,"dsFilterChange",7);this.dsFilterMatchModeChange=t(this,"dsFilterMatchModeChange",7);this.dsActiveFilterChange=t(this,"dsActiveFilterChange",7);this.dsFiltersClear=t(this,"dsFiltersClear",7);this.dsSortChange=t(this,"dsSortChange",7);this.dsGroupChange=t(this,"dsGroupChange",7);this.dsGroupClear=t(this,"dsGroupClear",7);this.dsFieldsConfigChange=t(this,"dsFieldsConfigChange",7);this.hasBorder=true;this.filters=[];this.values={};this.matchModes={};this.fields=[];this.customizeOptions=[];this.customizeSections=[];this.customizeLabel="Customize table";this.catalogReorderable=true;this.sort=null;this.groupingOptions=[];this.grouping=null;this.hiddenFieldIds=[];this.fieldOrder=[];this.pinnedFieldIds=[];this.embedded=false;this.activeTab="filters";this.label="Configure view";this.open=false;this.tab="filters";this.pos={x:0,y:0};this.ready=false;this.popupId=`ds-data-preferences-${++N}`;this.tasks=new w((()=>this.el.isConnected));this.position=new d({getAnchor:()=>this.trigger??null,getPopup:()=>this.popup??null,getOwnerDocument:()=>this.el.ownerDocument,measure:(e,s)=>{const t=o(e);const i=C(j.space100,8);s.style.maxWidth=`${Math.max(0,Math.min(window.innerWidth,t?.width??window.innerWidth)-i*2)}px`;s.style.maxHeight=`${Math.max(0,Math.min(window.innerHeight,t?.height??window.innerHeight)-i*2)}px`;return{anchorRect:e.getBoundingClientRect(),popupWidth:s.offsetWidth,popupHeight:s.offsetHeight,side:"bottom",align:"end",sideOffsetPx:C(j.space050,4),alignOffsetPx:0,viewportPadPx:C(j.space100,8),viewportWidth:window.innerWidth,viewportHeight:window.innerHeight,collisionRect:t}},apply:({x:e,y:s})=>{this.pos={x:e,y:s}},onReady:()=>{this.ready=true},topLayer:true,observeResize:true,observeAnchorMotion:true,liveUpdate:"double-frame"});this.interaction=new x({getAnchor:()=>this.trigger??null,getPopup:()=>this.popup??null,getOwnerDocument:()=>this.el.ownerDocument,onOutsideActivation:()=>this.close()})}catalogItems(){return l(this.fields).map((e=>({id:e.id,label:f(e)})))}customizeMenuSections(){const e=!this.fields.length?[]:this.catalogReorderable?p(this.fields,this.hiddenFieldIds,this.fieldOrder,this.pinnedFieldIds).map(((e,s,t)=>s===0&&t.length===1&&this.catalogHeader?{...e,header:this.catalogHeader}:e)):[{header:this.catalogHeader??(this.customizeOptions.length?"Columns":undefined),items:v(this.catalogItems(),this.hiddenFieldIds,this.fieldOrder,K)}];return[...e,...this.customizeSections,...this.customizeOptions.length?[{header:"Options",items:this.customizeOptions}]:[]]}disconnectedCallback(){this.close(false)}close(e=true){this.tasks.cancel();this.position.unobserve();this.interaction.disconnect();if(this.popup?.matches(":popover-open"))this.popup.hidePopover();this.open=false;this.ready=false;if(e)void this.trigger?.setFocus()}toggle(){if(!this.el.isConnected)return;if(this.open){this.close();return}this.open=true;this.ready=false;this.position.observe();this.interaction.connect();this.position.schedule((async()=>{const e=this.tasks.guard((()=>{this.tasks.frame((()=>{if(this.open)this.popup?.querySelector('[role="tab"][aria-selected="true"]')?.focus()}))}));await(this.popup?.querySelector("ds-tab-group")?.componentOnReady?.());e()}))}onKeydown(e){if(this.embedded||!this.open||e.defaultPrevented)return;if(e.key==="Escape"){e.preventDefault();e.stopPropagation();this.close()}else if(e.key==="Tab"&&this.interaction.tabLeavesPopup(e)){e.preventDefault();this.close();this.interaction.moveFocusAfterTab(e.shiftKey)}}forward(e,s){e.stopPropagation();s.emit(e.detail)}render(){const e=this.embedded?this.activeTab:this.tab;const s=["filters","sort","group","customize"].map((e=>({id:e,label:e==="filters"?"Filters":e[0].toUpperCase()+e.slice(1),panelId:`${this.popupId}-${e}`})));return i(a,{key:"b8538485e08facc97d794b1adfe701935358aa10"},!this.embedded&&i("ds-tooltip",{key:"7624345d2bda1d2d8591fde02164e3513d2e7187",label:this.label,side:"bottom",size:"sm"},i("ds-button-unfilled",{key:"c803092504b1485385a8469b5eb1c6edb8a3011a",hasBorder:this.hasBorder,ref:e=>{this.trigger=e},variant:"icon",icon:"Preferences",size:"md",ariaLabel:this.label,haspopup:"dialog",expanded:this.open,surfaceOpen:this.open,controls:this.popupId,onDsClick:()=>this.toggle()})),(this.open||this.embedded)&&i("div",{key:"bda4a126f21b86960b7b028db88bf4f227e5ae72",ref:e=>{this.popup=e},id:this.popupId,popover:this.embedded?undefined:"manual",role:this.embedded?undefined:"dialog","aria-label":this.label,class:{"data-preferences":!this.embedded,"data-preferences-panel":this.embedded},style:this.embedded?undefined:{left:`${this.pos.x}px`,top:`${this.pos.y}px`,visibility:this.ready?"visible":"hidden"}},i("div",{key:"64140dd567aaa44d3c78c705aa9e4b29560e2ba3",class:"data-preferences__tabs"},i("ds-tab-group",{key:"86aff54a273053a2f0de9c26443bb8c3e56c8bab",ariaLabel:"Table preference sections",size:"md",presentation:this.embedded?"segmented":"tabs",width:this.embedded?"fill":"hug",tabs:s,value:e,onDsChange:e=>{e.stopPropagation();this.tab=e.detail;this.dsPreferencesTabChange.emit(this.tab)}})),i("div",{key:"05cd6da2f2f3e2270867a5ac8d40f618bcda606e",class:"data-preferences__body",id:`${this.popupId}-${e}`,role:"tabpanel","aria-label":s.find((s=>s.id===e))?.label},i("div",{key:"7fce579d01002a2015a3ec7ed2c82c60048323cd",hidden:e!=="filters"},i("ds-filter-menu",{key:"1dfaac5975981dc6f39764fcf184ed52d1d2024c",embedded:true,vertical:this.embedded,applyRequired:!this.embedded,filters:this.filters,values:this.values,matchModes:this.matchModes,activeFilterId:this.activeFilterId,footerLayout:"categories-clear",onDsChange:e=>this.forward(e,this.dsFilterChange),onDsMatchModeChange:e=>this.forward(e,this.dsFilterMatchModeChange),onDsActiveFilterChange:e=>this.forward(e,this.dsActiveFilterChange),onDsClear:e=>this.forward(e,this.dsFiltersClear)})),e==="sort"&&i("ds-menu",{key:"c785906f8feb2a1c1eba453311825cf3672b994a",embedded:true,menuLabel:"Sort table",sections:h(this.sortColumns??this.fields,this.sort),onDsSelect:e=>{e.stopPropagation();this.dsSortChange.emit({sort:c(this.sortColumns??this.fields,this.sort,e.detail)})}}),e==="group"&&i("ds-data-group",{key:"32ef15483c5c714e68b00bee39fed2fa3d6e2ed2",embedded:true,vertical:this.embedded,options:this.groupingOptions,grouping:this.grouping,onDsGroupChange:e=>this.forward(e,this.dsGroupChange),onDsClear:e=>this.forward(e,this.dsGroupClear)}),e==="customize"&&i("ds-menu",{key:"a87ec218bc4aadd4e579821603c8d2933ff04932",embedded:true,menuLabel:this.customizeLabel,sections:this.customizeMenuSections(),onDsSelect:e=>{e.stopPropagation();if(!e.detail.value||e.detail.isInactive)return;if([...this.customizeOptions,...this.customizeSections.flatMap((e=>"items"in e?e.items:[]))].some((s=>s.value===e.detail.value))){this.dsCustomizeOptionChange.emit(e.detail.value);return}if(!this.catalogReorderable){const s=this.catalogItems().map((e=>e.id));this.dsFieldsConfigChange.emit({hiddenFieldIds:y(s,this.hiddenFieldIds,e.detail.value,K),fieldOrder:k(s,this.fieldOrder),pinnedFieldIds:this.pinnedFieldIds});return}this.dsFieldsConfigChange.emit(u(this.fields,b(this.fields,this.hiddenFieldIds,e.detail.value),this.fieldOrder,this.pinnedFieldIds))},onDsItemToggle:e=>{e.stopPropagation();if(!this.catalogReorderable||!e.detail.item.value)return;if(e.detail.action?.id==="visibility"){this.dsFieldsConfigChange.emit(u(this.fields,b(this.fields,this.hiddenFieldIds,e.detail.item.value),this.fieldOrder,this.pinnedFieldIds));return}if(e.detail.action?.id!=="pin")return;this.dsFieldsConfigChange.emit(g(this.fields,this.hiddenFieldIds,this.fieldOrder,this.pinnedFieldIds,e.detail.item.value))},onDsReorder:e=>{e.stopPropagation();if(!this.catalogReorderable)return;this.dsFieldsConfigChange.emit(m(this.fields,this.hiddenFieldIds,this.fieldOrder,this.pinnedFieldIds,e.detail.items.filter((e=>e.reorderable)).map((e=>e.value)).filter(Boolean)))}}))))}get el(){return this}static get style(){return X()}},[2,"ds-data-preferences",{hasBorder:[4,"has-border"],filters:[16],values:[16],matchModes:[16],activeFilterId:[1,"active-filter-id"],fields:[16],customizeOptions:[16],customizeSections:[16],customizeLabel:[1,"customize-label"],catalogHeader:[1,"catalog-header"],catalogReorderable:[4,"catalog-reorderable"],sortColumns:[16],sort:[16],groupingOptions:[16],grouping:[16],hiddenFieldIds:[16],fieldOrder:[16],pinnedFieldIds:[16],embedded:[4],activeTab:[1,"active-tab"],label:[1],open:[32],tab:[32],pos:[32],ready:[32]},[[0,"keydown","onKeydown"]]]);function Y(){if(typeof customElements==="undefined"){return}const e=["ds-data-preferences","ds-badge","ds-button-unfilled","ds-calendar","ds-checkbox","ds-chip","ds-data-group","ds-divider","ds-empty-state","ds-filter-menu","ds-icon","ds-input","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-tab-group","ds-tag","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-data-preferences":if(!customElements.get(r(e))){customElements.define(r(e),Q)}break;case"ds-badge":if(!customElements.get(r(e))){z()}break;case"ds-button-unfilled":if(!customElements.get(r(e))){D()}break;case"ds-calendar":if(!customElements.get(r(e))){E()}break;case"ds-checkbox":if(!customElements.get(r(e))){O()}break;case"ds-chip":if(!customElements.get(r(e))){_()}break;case"ds-data-group":if(!customElements.get(r(e))){M()}break;case"ds-divider":if(!customElements.get(r(e))){F()}break;case"ds-empty-state":if(!customElements.get(r(e))){L()}break;case"ds-filter-menu":if(!customElements.get(r(e))){I()}break;case"ds-icon":if(!customElements.get(r(e))){P()}break;case"ds-input":if(!customElements.get(r(e))){T()}break;case"ds-loader":if(!customElements.get(r(e))){A()}break;case"ds-menu":if(!customElements.get(r(e))){R()}break;case"ds-swatch-picker":if(!customElements.get(r(e))){S()}break;case"ds-switch":if(!customElements.get(r(e))){$()}break;case"ds-tab-group":if(!customElements.get(r(e))){B()}break;case"ds-tag":if(!customElements.get(r(e))){G()}break;case"ds-text":if(!customElements.get(r(e))){H()}break;case"ds-tooltip":if(!customElements.get(r(e))){n()}break}}))}Y();const U=Q;const V=Y;export{U as DsDataPreferences,V as defineCustomElement};
|
|
1
|
+
import{p as e,H as s,c as t,h as i,a,t as r}from"./index.js";import{A as d,r as o,d as n}from"./p-DTlNtCX1.js";import{d as h,n as c}from"./p-CJuc20pQ.js";import{t as l,a as p,b as f,r as m,c as u,d as b,e as g}from"./p-DuCfCvPs.js";import{l as v,r as y,t as k}from"./p-HMDczkQf.js";import{C as w}from"./p-DlsjHRU3.js";import{A as C}from"./p-CwUXroLs.js";import{r as x}from"./p-CVYjLzYI.js";import{T as j}from"./p-mSCnWLhL.js";import{d as z}from"./p-ClOvX8cD.js";import{d as E}from"./p-D5-hqLPK.js";import{d as D}from"./p-DiNEjFpy.js";import{d as M}from"./p-BYo1-6b5.js";import{d as O}from"./p-CMZAEySh.js";import{d as _}from"./p-oBBzQpg_.js";import{d as F}from"./p-G6r6yYg8.js";import{d as L}from"./p-Dc_zSOKq.js";import{d as I}from"./p-BI-XuQKW.js";import{d as P}from"./p-C942uiH1.js";import{d as S}from"./p-CsGkdf4W.js";import{d as A}from"./p-0XTyQNRG.js";import{d as R}from"./p-D8iNLSCa.js";import{d as T}from"./p-Nx52go85.js";import{d as $}from"./p-KTaiJztz.js";import{d as B}from"./p-CXrOGz7X.js";import{d as G}from"./p-Bt1Ybvz-.js";import{d as X}from"./p-DMPn_dt7.js";const H=()=>`.sc-ds-data-preferences-h,.sc-ds-data-preferences:where(.ds-table),.sc-ds-data-preferences:where(.tooltip-popup),.sc-ds-data-preferences:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.sc-ds-data-preferences-h{display:inline-flex}.data-preferences.sc-ds-data-preferences{position:fixed;margin:0;padding:0;border:0;border-radius:var(--ds-radius-menu);width:min(var(--dimension-menu-width-lg), calc(100vw - var(--dimension-space-200)));max-height:calc(100dvh - var(--dimension-space-400));display:flex;flex-direction:column;overflow:hidden;background:var(--color-background-primary);color:var(--color-foreground-secondary);box-shadow:var(--effect-shadow-elevated-floating)}.data-preferences.sc-ds-data-preferences::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-floating);pointer-events:none;z-index:4}.data-preferences__tabs.sc-ds-data-preferences{display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;flex:0 0 var(--dimension-size-500);min-block-size:var(--dimension-size-500);padding:var(--dimension-space-050);background:var(--color-background-primary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.data-preferences__body.sc-ds-data-preferences{min-height:0;overflow:auto;overscroll-behavior:contain}.data-preferences-panel.sc-ds-data-preferences .data-preferences__body.sc-ds-data-preferences{--ds-chrome-space-sm-padding:var(--dimension-space-100)}.sc-ds-data-preferences-h:has(.data-preferences-panel){display:flex;flex:1;min-height:0}.data-preferences-panel.sc-ds-data-preferences{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}.data-preferences-panel.sc-ds-data-preferences .data-preferences__tabs.sc-ds-data-preferences{flex:0 0 auto;padding:var(--dimension-space-200);background:transparent}`;const K={minVisible:0,reorderable:false};let N=0;const Q=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsCustomizeOptionChange=t(this,"dsCustomizeOptionChange",7);this.dsPreferencesTabChange=t(this,"dsPreferencesTabChange",7);this.dsFilterChange=t(this,"dsFilterChange",7);this.dsFilterMatchModeChange=t(this,"dsFilterMatchModeChange",7);this.dsActiveFilterChange=t(this,"dsActiveFilterChange",7);this.dsFiltersClear=t(this,"dsFiltersClear",7);this.dsSortChange=t(this,"dsSortChange",7);this.dsGroupChange=t(this,"dsGroupChange",7);this.dsGroupClear=t(this,"dsGroupClear",7);this.dsFieldsConfigChange=t(this,"dsFieldsConfigChange",7);this.hasBorder=true;this.filters=[];this.values={};this.matchModes={};this.fields=[];this.customizeOptions=[];this.customizeSections=[];this.customizeLabel="Customize table";this.catalogReorderable=true;this.sort=null;this.groupingOptions=[];this.grouping=null;this.hiddenFieldIds=[];this.fieldOrder=[];this.pinnedFieldIds=[];this.embedded=false;this.activeTab="filters";this.label="Configure view";this.open=false;this.tab="filters";this.pos={x:0,y:0};this.ready=false;this.popupId=`ds-data-preferences-${++N}`;this.tasks=new w((()=>this.el.isConnected));this.position=new d({getAnchor:()=>this.trigger??null,getPopup:()=>this.popup??null,getOwnerDocument:()=>this.el.ownerDocument,measure:(e,s)=>{const t=o(e);const i=x(j.space100,8);s.style.maxWidth=`${Math.max(0,Math.min(window.innerWidth,t?.width??window.innerWidth)-i*2)}px`;s.style.maxHeight=`${Math.max(0,Math.min(window.innerHeight,t?.height??window.innerHeight)-i*2)}px`;return{anchorRect:e.getBoundingClientRect(),popupWidth:s.offsetWidth,popupHeight:s.offsetHeight,side:"bottom",align:"end",sideOffsetPx:x(j.space050,4),alignOffsetPx:0,viewportPadPx:x(j.space100,8),viewportWidth:window.innerWidth,viewportHeight:window.innerHeight,collisionRect:t}},apply:({x:e,y:s})=>{this.pos={x:e,y:s}},onReady:()=>{this.ready=true},topLayer:true,observeResize:true,observeAnchorMotion:true,liveUpdate:"double-frame"});this.interaction=new C({getAnchor:()=>this.trigger??null,getPopup:()=>this.popup??null,getOwnerDocument:()=>this.el.ownerDocument,onOutsideActivation:()=>this.close()})}catalogItems(){return l(this.fields).map((e=>({id:e.id,label:p(e)})))}customizeMenuSections(){const e=!this.fields.length?[]:this.catalogReorderable?f(this.fields,this.hiddenFieldIds,this.fieldOrder,this.pinnedFieldIds).map(((e,s,t)=>s===0&&t.length===1&&this.catalogHeader?{...e,header:this.catalogHeader}:e)):[{header:this.catalogHeader??(this.customizeOptions.length?"Columns":undefined),items:v(this.catalogItems(),this.hiddenFieldIds,this.fieldOrder,K)}];return[...e,...this.customizeSections,...this.customizeOptions.length?[{header:"Options",items:this.customizeOptions}]:[]]}disconnectedCallback(){this.close(false)}close(e=true){this.tasks.cancel();this.position.unobserve();this.interaction.disconnect();if(this.popup?.matches(":popover-open"))this.popup.hidePopover();this.open=false;this.ready=false;if(e)void this.trigger?.setFocus()}toggle(){if(!this.el.isConnected)return;if(this.open){this.close();return}this.open=true;this.ready=false;this.position.observe();this.interaction.connect();this.position.schedule((async()=>{const e=this.tasks.guard((()=>{this.tasks.frame((()=>{if(this.open)this.popup?.querySelector('[role="tab"][aria-selected="true"]')?.focus()}))}));await(this.popup?.querySelector("ds-tab-group")?.componentOnReady?.());e()}))}onKeydown(e){if(this.embedded||!this.open||e.defaultPrevented)return;if(e.key==="Escape"){e.preventDefault();e.stopPropagation();this.close()}else if(e.key==="Tab"&&this.interaction.tabLeavesPopup(e)){e.preventDefault();this.close();this.interaction.moveFocusAfterTab(e.shiftKey)}}forward(e,s){e.stopPropagation();s.emit(e.detail)}render(){const e=this.embedded?this.activeTab:this.tab;const s=["filters","sort","group","customize"].map((e=>({id:e,label:e==="filters"?"Filters":e[0].toUpperCase()+e.slice(1),panelId:`${this.popupId}-${e}`})));return i(a,{key:"b8538485e08facc97d794b1adfe701935358aa10"},!this.embedded&&i("ds-tooltip",{key:"7624345d2bda1d2d8591fde02164e3513d2e7187",label:this.label,side:"bottom",size:"sm"},i("ds-button-unfilled",{key:"c803092504b1485385a8469b5eb1c6edb8a3011a",hasBorder:this.hasBorder,ref:e=>{this.trigger=e},variant:"icon",icon:"Preferences",size:"md",ariaLabel:this.label,haspopup:"dialog",expanded:this.open,surfaceOpen:this.open,controls:this.popupId,onDsClick:()=>this.toggle()})),(this.open||this.embedded)&&i("div",{key:"bda4a126f21b86960b7b028db88bf4f227e5ae72",ref:e=>{this.popup=e},id:this.popupId,popover:this.embedded?undefined:"manual",role:this.embedded?undefined:"dialog","aria-label":this.label,class:{"data-preferences":!this.embedded,"data-preferences-panel":this.embedded},style:this.embedded?undefined:{left:`${this.pos.x}px`,top:`${this.pos.y}px`,visibility:this.ready?"visible":"hidden"}},i("div",{key:"64140dd567aaa44d3c78c705aa9e4b29560e2ba3",class:"data-preferences__tabs"},i("ds-tab-group",{key:"86aff54a273053a2f0de9c26443bb8c3e56c8bab",ariaLabel:"Table preference sections",size:"md",presentation:this.embedded?"segmented":"tabs",width:this.embedded?"fill":"hug",tabs:s,value:e,onDsChange:e=>{e.stopPropagation();this.tab=e.detail;this.dsPreferencesTabChange.emit(this.tab)}})),i("div",{key:"05cd6da2f2f3e2270867a5ac8d40f618bcda606e",class:"data-preferences__body",id:`${this.popupId}-${e}`,role:"tabpanel","aria-label":s.find((s=>s.id===e))?.label},i("div",{key:"7fce579d01002a2015a3ec7ed2c82c60048323cd",hidden:e!=="filters"},i("ds-filter-menu",{key:"1dfaac5975981dc6f39764fcf184ed52d1d2024c",embedded:true,vertical:this.embedded,applyRequired:!this.embedded,filters:this.filters,values:this.values,matchModes:this.matchModes,activeFilterId:this.activeFilterId,footerLayout:"categories-clear",onDsChange:e=>this.forward(e,this.dsFilterChange),onDsMatchModeChange:e=>this.forward(e,this.dsFilterMatchModeChange),onDsActiveFilterChange:e=>this.forward(e,this.dsActiveFilterChange),onDsClear:e=>this.forward(e,this.dsFiltersClear)})),e==="sort"&&i("ds-menu",{key:"c785906f8feb2a1c1eba453311825cf3672b994a",embedded:true,menuLabel:"Sort table",sections:h(this.sortColumns??this.fields,this.sort),onDsSelect:e=>{e.stopPropagation();this.dsSortChange.emit({sort:c(this.sortColumns??this.fields,this.sort,e.detail)})}}),e==="group"&&i("ds-data-group",{key:"32ef15483c5c714e68b00bee39fed2fa3d6e2ed2",embedded:true,vertical:this.embedded,options:this.groupingOptions,grouping:this.grouping,onDsGroupChange:e=>this.forward(e,this.dsGroupChange),onDsClear:e=>this.forward(e,this.dsGroupClear)}),e==="customize"&&i("ds-menu",{key:"a87ec218bc4aadd4e579821603c8d2933ff04932",embedded:true,menuLabel:this.customizeLabel,sections:this.customizeMenuSections(),onDsSelect:e=>{e.stopPropagation();if(!e.detail.value||e.detail.isInactive)return;if([...this.customizeOptions,...this.customizeSections.flatMap((e=>"items"in e?e.items:[]))].some((s=>s.value===e.detail.value))){this.dsCustomizeOptionChange.emit(e.detail.value);return}if(!this.catalogReorderable){const s=this.catalogItems().map((e=>e.id));this.dsFieldsConfigChange.emit({hiddenFieldIds:k(s,this.hiddenFieldIds,e.detail.value,K),fieldOrder:y(s,this.fieldOrder),pinnedFieldIds:this.pinnedFieldIds});return}this.dsFieldsConfigChange.emit(u(this.fields,b(this.fields,this.hiddenFieldIds,e.detail.value),this.fieldOrder,this.pinnedFieldIds))},onDsItemToggle:e=>{e.stopPropagation();if(!this.catalogReorderable||!e.detail.item.value)return;if(e.detail.action?.id==="visibility"){this.dsFieldsConfigChange.emit(u(this.fields,b(this.fields,this.hiddenFieldIds,e.detail.item.value),this.fieldOrder,this.pinnedFieldIds));return}if(e.detail.action?.id!=="pin")return;this.dsFieldsConfigChange.emit(g(this.fields,this.hiddenFieldIds,this.fieldOrder,this.pinnedFieldIds,e.detail.item.value))},onDsReorder:e=>{e.stopPropagation();if(!this.catalogReorderable)return;this.dsFieldsConfigChange.emit(m(this.fields,this.hiddenFieldIds,this.fieldOrder,this.pinnedFieldIds,e.detail.items.filter((e=>e.reorderable)).map((e=>e.value)).filter(Boolean)))}}))))}get el(){return this}static get style(){return H()}},[2,"ds-data-preferences",{hasBorder:[4,"has-border"],filters:[16],values:[16],matchModes:[16],activeFilterId:[1,"active-filter-id"],fields:[16],customizeOptions:[16],customizeSections:[16],customizeLabel:[1,"customize-label"],catalogHeader:[1,"catalog-header"],catalogReorderable:[4,"catalog-reorderable"],sortColumns:[16],sort:[16],groupingOptions:[16],grouping:[16],hiddenFieldIds:[16],fieldOrder:[16],pinnedFieldIds:[16],embedded:[4],activeTab:[1,"active-tab"],label:[1],open:[32],tab:[32],pos:[32],ready:[32]},[[0,"keydown","onKeydown"]]]);function W(){if(typeof customElements==="undefined"){return}const e=["ds-data-preferences","ds-badge","ds-button-unfilled","ds-calendar","ds-checkbox","ds-chip","ds-data-group","ds-divider","ds-empty-state","ds-filter-menu","ds-icon","ds-input","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-tab-group","ds-tag","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-data-preferences":if(!customElements.get(r(e))){customElements.define(r(e),Q)}break;case"ds-badge":if(!customElements.get(r(e))){z()}break;case"ds-button-unfilled":if(!customElements.get(r(e))){E()}break;case"ds-calendar":if(!customElements.get(r(e))){D()}break;case"ds-checkbox":if(!customElements.get(r(e))){M()}break;case"ds-chip":if(!customElements.get(r(e))){O()}break;case"ds-data-group":if(!customElements.get(r(e))){_()}break;case"ds-divider":if(!customElements.get(r(e))){F()}break;case"ds-empty-state":if(!customElements.get(r(e))){L()}break;case"ds-filter-menu":if(!customElements.get(r(e))){I()}break;case"ds-icon":if(!customElements.get(r(e))){P()}break;case"ds-input":if(!customElements.get(r(e))){S()}break;case"ds-loader":if(!customElements.get(r(e))){A()}break;case"ds-menu":if(!customElements.get(r(e))){R()}break;case"ds-swatch-picker":if(!customElements.get(r(e))){T()}break;case"ds-switch":if(!customElements.get(r(e))){$()}break;case"ds-tab-group":if(!customElements.get(r(e))){B()}break;case"ds-tag":if(!customElements.get(r(e))){G()}break;case"ds-text":if(!customElements.get(r(e))){X()}break;case"ds-tooltip":if(!customElements.get(r(e))){n()}break}}))}W();const Y=Q;const q=W;export{Y as DsDataPreferences,q as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-data-preferences.js.map
|