@ds-mo/ui 12.7.0 → 12.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.build-stamp +1 -1
- package/dist/agent-patterns.json +22 -9
- package/dist/agent.json +230 -18
- package/dist/angular/ds-button-filled.d.ts +1 -1
- package/dist/angular/ds-button-filled.js +3 -3
- package/dist/angular/ds-button-unfilled.d.ts +1 -1
- package/dist/angular/ds-button-unfilled.js +3 -3
- package/dist/angular/ds-card-overview.d.ts +19 -0
- package/dist/angular/ds-card-overview.js +42 -0
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +1 -0
- package/dist/angular/proxies.d.ts +1 -0
- package/dist/angular/proxies.js +1 -0
- package/dist/components/ds-agent-activity.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-badge.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-title.js.map +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-breadcrumb.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-data-viz-bar.js +1 -1
- package/dist/components/ds-card-data-viz-bar.js.map +1 -1
- package/dist/components/ds-card-data-viz-donut.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js.map +1 -1
- package/dist/components/ds-card-data-viz-line.js +1 -1
- package/dist/components/ds-card-data-viz-line.js.map +1 -1
- package/dist/components/ds-card-overview.d.ts +11 -0
- package/dist/components/ds-card-overview.js +2 -0
- package/dist/components/ds-card-overview.js.map +1 -0
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card-shell-data-viz.js +1 -1
- package/dist/components/ds-chart-bar-stacked.js +1 -1
- package/dist/components/ds-chart-bar-stacked.js.map +1 -1
- package/dist/components/ds-chart-bar.js +1 -1
- package/dist/components/ds-chart-bar.js.map +1 -1
- package/dist/components/ds-chart-donut.js +1 -1
- package/dist/components/ds-chart-donut.js.map +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-line.js +1 -1
- package/dist/components/ds-chart-line.js.map +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-item.js.map +1 -1
- package/dist/components/ds-conversation-list-section.js +1 -1
- package/dist/components/ds-conversation-list.js +1 -1
- package/dist/components/ds-conversation-list.js.map +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-bubble.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-message-scroller.js.map +1 -1
- package/dist/components/ds-message.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-modal.js.map +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-panel-sub-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-radio.js +1 -1
- package/dist/components/ds-scroll-overlay.js +1 -1
- package/dist/components/ds-scroll-overlay.js.map +1 -1
- package/dist/components/ds-select-multi.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-app.js.map +1 -1
- package/dist/components/ds-shell-gradient-picker.js +1 -1
- package/dist/components/ds-shell-gradient-picker.js.map +1 -1
- package/dist/components/ds-shell-gradient-swatch.js +1 -1
- package/dist/components/ds-shell-page.js +1 -1
- package/dist/components/ds-shell-page.js.map +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-skeleton.js.map +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-swatch-picker.js +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-toast.js.map +1 -1
- package/dist/components/ds-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/ds-typing-indicator.js +1 -1
- package/dist/components/p-2foAUsDN.js +2 -0
- package/dist/components/p-2foAUsDN.js.map +1 -0
- package/dist/components/{p-C9h13YnX.js → p-38PfdMkF.js} +2 -2
- package/dist/components/p-69lHhJiX.js +2 -0
- package/dist/components/p-69lHhJiX.js.map +1 -0
- package/dist/components/{p-CnAkobDW.js → p-B6NvVdeO.js} +2 -2
- package/dist/components/p-B6Vuayt6.js +2 -0
- package/dist/components/p-B6Vuayt6.js.map +1 -0
- package/dist/components/p-B6vE3ujd.js +2 -0
- package/dist/components/p-B6vE3ujd.js.map +1 -0
- package/dist/components/p-BBePKRHC.js +2 -0
- package/dist/components/p-BBePKRHC.js.map +1 -0
- package/dist/components/{p-BT5hgg5i.js → p-BFRMwl93.js} +2 -2
- package/dist/components/p-BKOlvCGS.js +2 -0
- package/dist/components/p-BKOlvCGS.js.map +1 -0
- package/dist/components/{p-C7bZ-jiU.js → p-BO5aqZcf.js} +2 -2
- package/dist/components/p-BX0BMhgz.js +2 -0
- package/dist/components/p-BX0BMhgz.js.map +1 -0
- package/dist/components/{p-C_9ZH0A3.js → p-BXaieghV.js} +2 -2
- package/dist/components/p-BlHzmszE.js +2 -0
- package/dist/components/{p-Bl001G0Y.js.map → p-BlHzmszE.js.map} +1 -1
- package/dist/components/p-By_s1wNN.js +2 -0
- package/dist/components/p-By_s1wNN.js.map +1 -0
- package/dist/components/p-CNgPwd11.js +2 -0
- package/dist/components/{p-1darPzys.js.map → p-CNgPwd11.js.map} +1 -1
- package/dist/components/{p-BcfC6phQ.js → p-CNjOyUQu.js} +2 -2
- package/dist/components/p-CNjOyUQu.js.map +1 -0
- package/dist/components/{p-k0Hmj1KV.js → p-CPwpgUWT.js} +2 -2
- package/dist/components/{p-DIa73GJP.js → p-CU2673IJ.js} +2 -2
- package/dist/components/{p-Crsn82rz.js → p-CsX3ICz7.js} +2 -2
- package/dist/components/{p-B-9A0e_0.js → p-D0e77tkd.js} +2 -2
- package/dist/components/p-D1bNvIpb.js +2 -0
- package/dist/components/p-D1bNvIpb.js.map +1 -0
- package/dist/components/{p-CvyTZ4Mg.js → p-D9u1_OEZ.js} +2 -2
- package/dist/components/{p-B_5nxOeB.js → p-DB9XJm2c.js} +2 -2
- package/dist/components/{p-CUAYsK44.js → p-DIFUsoM-.js} +2 -2
- package/dist/components/p-DhKvqh5G.js +2 -0
- package/dist/components/p-DhKvqh5G.js.map +1 -0
- package/dist/components/{p-guQ7hv6W.js → p-DhLmoCe_.js} +2 -2
- package/dist/components/{p-CqWV4Hl_.js → p-DmAHufd5.js} +2 -2
- package/dist/components/p-DzM3SzPz.js +2 -0
- package/dist/components/p-DzM3SzPz.js.map +1 -0
- package/dist/components/{p-DNFd4Ao-.js → p-G3qIxpQj.js} +2 -2
- package/dist/components/{p-C6xC48hG.js → p-Re2kPrXm.js} +2 -2
- package/dist/components/{p--eKXTylf.js → p-Utr23NC-.js} +2 -2
- package/dist/components/{p-5-QAFB4j.js → p-Vdufoj7G.js} +2 -2
- package/dist/components/{p-BuiZcSga.js → p-huw1oRbt.js} +2 -2
- package/dist/components/p-huw1oRbt.js.map +1 -0
- package/dist/components/p-ukB-dPOK.js +2 -0
- package/dist/components/{p-pgxlkvUy.js.map → p-ukB-dPOK.js.map} +1 -1
- package/dist/components/p-yhj1lIPx.js +2 -0
- package/dist/docs/components.json +599 -11
- package/dist/lib/components/Menu/menu-position.d.ts +6 -6
- package/dist/lib/toast/toast-types.d.ts +3 -3
- package/dist/lib/utils/anchored-position.d.ts +34 -0
- package/dist/lib/utils/choice-popup-alignment.d.ts +2 -2
- package/dist/lib/utils/index.d.ts +2 -0
- package/dist/lib/utils/index.js +31 -0
- package/dist/lib/utils/index.js.map +3 -3
- package/dist/lib/utils/metric-change.d.ts +52 -0
- package/dist/lib/utils/token-defaults.d.ts +3 -0
- package/dist/mcp-data/registry/agent-activity.json +1 -1
- package/dist/mcp-data/registry/agent-response.json +1 -1
- package/dist/mcp-data/registry/agent-source-list.json +1 -1
- package/dist/mcp-data/registry/agent-tool-call.json +1 -1
- 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/bar-nav.json +1 -1
- package/dist/mcp-data/registry/bar-title.json +2 -2
- 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 +122 -6
- package/dist/mcp-data/registry/button-unfilled.json +49 -5
- package/dist/mcp-data/registry/card-data-viz-bar.json +2 -2
- package/dist/mcp-data/registry/card-data-viz-donut.json +2 -1
- package/dist/mcp-data/registry/card-data-viz-line.json +2 -2
- package/dist/mcp-data/registry/card-overview.json +317 -0
- package/dist/mcp-data/registry/card-setting.json +1 -1
- package/dist/mcp-data/registry/card-shell-data-viz.json +1 -1
- package/dist/mcp-data/registry/chart-bar-stacked.json +14 -9
- package/dist/mcp-data/registry/chart-bar.json +15 -10
- package/dist/mcp-data/registry/chart-donut.json +3 -2
- package/dist/mcp-data/registry/chart-legend.json +1 -1
- package/dist/mcp-data/registry/chart-line.json +15 -10
- 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 +1 -1
- package/dist/mcp-data/registry/conversation-list-section.json +1 -1
- package/dist/mcp-data/registry/conversation-list.json +1 -1
- 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 +1 -1
- package/dist/mcp-data/registry/icon.json +1 -1
- package/dist/mcp-data/registry/input.json +1 -1
- package/dist/mcp-data/registry/loader.json +1 -1
- package/dist/mcp-data/registry/markdown.json +1 -1
- package/dist/mcp-data/registry/menu.json +3 -3
- package/dist/mcp-data/registry/message-bubble.json +1 -1
- package/dist/mcp-data/registry/message-composer.json +1 -1
- package/dist/mcp-data/registry/message-scroller.json +1 -1
- package/dist/mcp-data/registry/message.json +1 -1
- package/dist/mcp-data/registry/mobile-bar-nav.json +1 -1
- package/dist/mcp-data/registry/mobile-header.json +1 -1
- 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 +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 +3 -2
- package/dist/mcp-data/registry/radio.json +1 -1
- package/dist/mcp-data/registry/registry.json +233 -18
- package/dist/mcp-data/registry/scroll-overlay.json +1 -1
- package/dist/mcp-data/registry/select-multi.json +1 -1
- package/dist/mcp-data/registry/select.json +1 -1
- package/dist/mcp-data/registry/shell-app.json +1 -1
- package/dist/mcp-data/registry/shell-gradient-picker.json +1 -1
- package/dist/mcp-data/registry/shell-gradient-swatch.json +1 -1
- package/dist/mcp-data/registry/shell-page.json +5 -4
- 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/tag.json +1 -1
- package/dist/mcp-data/registry/text.json +1 -1
- package/dist/mcp-data/registry/toast.json +2 -2
- package/dist/mcp-data/registry/tooltip-data-viz.json +3 -1
- package/dist/mcp-data/registry/tooltip.json +3 -8
- package/dist/mcp-data/registry/typing-indicator.json +1 -1
- package/dist/react/components.d.ts +1 -0
- package/dist/react/components.js +1 -0
- package/dist/react/ds-card-overview.d.ts +12 -0
- package/dist/react/ds-card-overview.js +12 -0
- package/dist/styles/control-elevation.css +11 -0
- package/dist/types/components/ButtonFilled/ButtonFilled.d.ts +32 -0
- package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts +20 -0
- package/dist/types/components/CardOverview/CardOverview.d.ts +59 -0
- package/dist/types/components/CardOverview/card-overview-types.d.ts +32 -0
- package/dist/types/components/CardOverview/index.d.ts +2 -0
- package/dist/types/components/ChartBar/ChartBar.d.ts +11 -0
- package/dist/types/components/ChartBarStacked/ChartBarStacked.d.ts +11 -0
- package/dist/types/components/ChartLine/ChartLine.d.ts +11 -0
- package/dist/types/components/Menu/Menu.d.ts +7 -4
- package/dist/types/components/Menu/menu-position.d.ts +6 -6
- package/dist/types/components/ShellPage/ShellPage.d.ts +1 -0
- package/dist/types/components/Tooltip/Tooltip.d.ts +1 -4
- package/dist/types/components.d.ts +212 -2
- package/dist/types/toast/toast-types.d.ts +3 -3
- package/dist/types/utils/anchored-position-controller.d.ts +96 -0
- package/dist/types/utils/anchored-position.d.ts +35 -0
- package/dist/types/utils/cartesian-chart-layout.d.ts +13 -0
- package/dist/types/utils/chart-viewport-controller.d.ts +21 -0
- package/dist/types/utils/choice-popup-alignment.d.ts +2 -2
- package/dist/types/utils/index.d.ts +2 -0
- package/dist/types/utils/metric-change.d.ts +53 -0
- package/dist/types/utils/select-controller.d.ts +3 -3
- package/dist/types/utils/token-defaults.d.ts +3 -0
- package/package.json +3 -3
- package/dist/components/p-1darPzys.js +0 -2
- package/dist/components/p-B8C_yfLQ.js +0 -2
- package/dist/components/p-B8C_yfLQ.js.map +0 -1
- package/dist/components/p-BcfC6phQ.js.map +0 -1
- package/dist/components/p-Bl001G0Y.js +0 -2
- package/dist/components/p-BuiZcSga.js.map +0 -1
- package/dist/components/p-Bv9frkvW.js +0 -2
- package/dist/components/p-Bv9frkvW.js.map +0 -1
- package/dist/components/p-C0-K8vnW.js +0 -2
- package/dist/components/p-C0-K8vnW.js.map +0 -1
- package/dist/components/p-C2ym_Ich.js +0 -2
- package/dist/components/p-C_ewSXTT.js +0 -2
- package/dist/components/p-C_ewSXTT.js.map +0 -1
- package/dist/components/p-Ca9-fnFl.js +0 -2
- package/dist/components/p-Ca9-fnFl.js.map +0 -1
- package/dist/components/p-CydY-v7X.js +0 -2
- package/dist/components/p-CydY-v7X.js.map +0 -1
- package/dist/components/p-De7NquTI.js +0 -2
- package/dist/components/p-De7NquTI.js.map +0 -1
- package/dist/components/p-Dg3xLna0.js +0 -2
- package/dist/components/p-Dg3xLna0.js.map +0 -1
- package/dist/components/p-pgxlkvUy.js +0 -2
- package/dist/lib/utils/anchored-popup.d.ts +0 -23
- package/dist/types/components/Tooltip/tooltip-position.d.ts +0 -21
- package/dist/types/utils/anchored-popup.d.ts +0 -24
- /package/dist/components/{p-C9h13YnX.js.map → p-38PfdMkF.js.map} +0 -0
- /package/dist/components/{p-CnAkobDW.js.map → p-B6NvVdeO.js.map} +0 -0
- /package/dist/components/{p-BT5hgg5i.js.map → p-BFRMwl93.js.map} +0 -0
- /package/dist/components/{p-C7bZ-jiU.js.map → p-BO5aqZcf.js.map} +0 -0
- /package/dist/components/{p-C_9ZH0A3.js.map → p-BXaieghV.js.map} +0 -0
- /package/dist/components/{p-k0Hmj1KV.js.map → p-CPwpgUWT.js.map} +0 -0
- /package/dist/components/{p-DIa73GJP.js.map → p-CU2673IJ.js.map} +0 -0
- /package/dist/components/{p-Crsn82rz.js.map → p-CsX3ICz7.js.map} +0 -0
- /package/dist/components/{p-B-9A0e_0.js.map → p-D0e77tkd.js.map} +0 -0
- /package/dist/components/{p-CvyTZ4Mg.js.map → p-D9u1_OEZ.js.map} +0 -0
- /package/dist/components/{p-B_5nxOeB.js.map → p-DB9XJm2c.js.map} +0 -0
- /package/dist/components/{p-CUAYsK44.js.map → p-DIFUsoM-.js.map} +0 -0
- /package/dist/components/{p-guQ7hv6W.js.map → p-DhLmoCe_.js.map} +0 -0
- /package/dist/components/{p-CqWV4Hl_.js.map → p-DmAHufd5.js.map} +0 -0
- /package/dist/components/{p-DNFd4Ao-.js.map → p-G3qIxpQj.js.map} +0 -0
- /package/dist/components/{p-C6xC48hG.js.map → p-Re2kPrXm.js.map} +0 -0
- /package/dist/components/{p--eKXTylf.js.map → p-Utr23NC-.js.map} +0 -0
- /package/dist/components/{p-5-QAFB4j.js.map → p-Vdufoj7G.js.map} +0 -0
- /package/dist/components/{p-C2ym_Ich.js.map → p-yhj1lIPx.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as n,c as t,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as c}from"./p-k0Hmj1KV.js";import{f as d}from"./p-DXewjzkM.js";import{f as a}from"./p-BBpASejH.js";const l=()=>`.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(--dimension-radius-025)}.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}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:relative;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-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 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.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);--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);--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);--ds-focus-ring-color:var(--color-always-dark-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)}.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))}.sc-ds-chart-legend-h{display:block;font-family:var(--typography-font-family);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)}@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}`;const h=.25;const g=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=t(this,"dsItemHover");this.dsItemClick=t(this,"dsItemClick");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 i(s,{key:"61e7b39a0b841a1e74ce1b8610dde5864273e0d7",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true,"chart-legend--show-percentage":this.showPercentage}},i("ul",{key:"cc9d08b329743fb4744ba19e6d8b71c2d7497bae",class:"chart-legend__list",onMouseLeave:this.highlightOnHover?()=>this.handleHover(null):undefined},this.items.map(((t,s)=>{const r=n!=null&&t.label!==n;const c=t.href?"a":"div";const l=t.value!=null?d(e?t.value/e:0,this.percentageDecimals,this.locale):"";return i("li",{class:"chart-legend__list-item",key:t.label},i(c,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!t.href,"ds-control--md":true,"ds-interaction-fill":this.highlightOnHover||!!t.href,"ds-focus-ring-inset":!!t.href},style:{opacity:r?String(h):"1"},href:t.href,onClick:t.href?e=>this.handleClick(t,e):undefined,onMouseEnter:this.highlightOnHover?()=>this.handleHover(t):undefined,onFocus:this.highlightOnHover?()=>this.handleHover(t):undefined,onBlur:this.highlightOnHover?()=>this.handleHover(null):undefined},i("span",{class:"chart-legend__swatch-box"},i("span",{class:"chart-legend__swatch",style:{backgroundColor:t.color??o(s)}})),i("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:t.label},t.label),t.value!=null&&i("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:String(t.value)},a(t.value,this.locale)),t.value!=null&&this.showPercentage&&i("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 l()}},[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 v(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(r(e))){customElements.define(r(e),g)}break;case"ds-text":if(!customElements.get(r(e))){c()}break}}))}v();const u=g;const f=v;export{u as DsChartLegend,f as defineCustomElement};
|
|
1
|
+
import{p as e,H as n,c as t,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as c}from"./p-CPwpgUWT.js";import{f as d}from"./p-DXewjzkM.js";import{f as a}from"./p-BBpASejH.js";const l=()=>`.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(--dimension-radius-025)}.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}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:relative;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-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 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.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);--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);--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);--ds-focus-ring-color:var(--color-always-dark-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)}.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))}.sc-ds-chart-legend-h{display:block;font-family:var(--typography-font-family);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)}@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}`;const h=.25;const g=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=t(this,"dsItemHover");this.dsItemClick=t(this,"dsItemClick");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 i(s,{key:"1b1fd023a443ffa0bf2b6609f95f2b656a4683af",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true,"chart-legend--show-percentage":this.showPercentage}},i("ul",{key:"858fdb48c3c8aece0ece2d7d5e0166e43d0a9d66",class:"chart-legend__list",onMouseLeave:this.highlightOnHover?()=>this.handleHover(null):undefined},this.items.map(((t,s)=>{const r=n!=null&&t.label!==n;const c=t.href?"a":"div";const l=t.value!=null?d(e?t.value/e:0,this.percentageDecimals,this.locale):"";return i("li",{class:"chart-legend__list-item",key:t.label},i(c,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!t.href,"ds-control--md":true,"ds-interaction-fill":this.highlightOnHover||!!t.href,"ds-focus-ring-inset":!!t.href},style:{opacity:r?String(h):"1"},href:t.href,onClick:t.href?e=>this.handleClick(t,e):undefined,onMouseEnter:this.highlightOnHover?()=>this.handleHover(t):undefined,onFocus:this.highlightOnHover?()=>this.handleHover(t):undefined,onBlur:this.highlightOnHover?()=>this.handleHover(null):undefined},i("span",{class:"chart-legend__swatch-box"},i("span",{class:"chart-legend__swatch",style:{backgroundColor:t.color??o(s)}})),i("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:t.label},t.label),t.value!=null&&i("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:String(t.value)},a(t.value,this.locale)),t.value!=null&&this.showPercentage&&i("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 l()}},[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 v(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(r(e))){customElements.define(r(e),g)}break;case"ds-text":if(!customElements.get(r(e))){c()}break}}))}v();const f=g;const u=v;export{f as DsChartLegend,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chart-legend.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as i,h as n,a as
|
|
1
|
+
import{p as t,H as i,h as n,a as e,t as s}from"./index.js";import{c as r}from"./p-CMv_7vFs.js";import{C as a,r as o,p as c,l as h}from"./p-2foAUsDN.js";import{m as l}from"./p-CH3w-P2H.js";import{w as f,c as d,a as u}from"./p-CrCGIx8s.js";function p(t){this._context=t}p.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._point=0},lineEnd:function(){if(this._line||this._line!==0&&this._point===1)this._context.closePath();this._line=1-this._line},point:function(t,i){t=+t,i=+i;switch(this._point){case 0:this._point=1;this._line?this._context.lineTo(t,i):this._context.moveTo(t,i);break;case 1:this._point=2;default:this._context.lineTo(t,i);break}}};function m(t){return new p(t)}function g(t){return t[0]}function y(t){return t[1]}function k(t,i){var n=d(true),e=null,s=m,r=null,a=f(o);t=typeof t==="function"?t:t===undefined?g:d(t);i=typeof i==="function"?i:i===undefined?y:d(i);function o(o){var c,h=(o=u(o)).length,l,f=false,d;if(e==null)r=s(d=a());for(c=0;c<=h;++c){if(!(c<h&&n(l=o[c],c,o))===f){if(f=!f)r.lineStart();else r.lineEnd()}if(f)r.point(+t(l,c,o),+i(l,c,o))}if(d)return r=null,d+""||null}o.x=function(i){return arguments.length?(t=typeof i==="function"?i:d(+i),o):t};o.y=function(t){return arguments.length?(i=typeof t==="function"?t:d(+t),o):i};o.defined=function(t){return arguments.length?(n=typeof t==="function"?t:d(!!t),o):n};o.curve=function(t){return arguments.length?(s=t,e!=null&&(r=s(e)),o):s};o.context=function(t){return arguments.length?(t==null?e=r=null:r=s(e=t),o):e};return o}const w=()=>`.sc-ds-chart-line-h{display:inline-block;max-width:100%;font-family:var(--typography-font-family)}.chart-line__svg.sc-ds-chart-line{display:block;width:100%;height:100%}.chart-line__gridline.sc-ds-chart-line{stroke:var(--color-border-tertiary);stroke-width:var(--dimension-stroke-width-012);vector-effect:non-scaling-stroke}.chart-line__axis-label.sc-ds-chart-line{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.chart-line__path.sc-ds-chart-line{fill:none;stroke-width:var(--dimension-stroke-width-025);vector-effect:non-scaling-stroke}.chart-line__point.sc-ds-chart-line{stroke:var(--color-background-primary);stroke-width:var(--dimension-stroke-width-018);r:calc(var(--dimension-size-075) / 2);vector-effect:non-scaling-stroke}`;const v=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.series=[];this.categories=[];this.width=480;this.height=240;this.showPoints=true;this.viewportController=null;this.svgEl=null}componentDidLoad(){this.connectViewportController()}connectedCallback(){if(this.svgEl&&!this.viewportController)this.connectViewportController()}componentDidRender(){if(!this.viewportController)this.connectViewportController()}connectViewportController(){if(!this.svgEl)return;this.viewportController=new a(this.svgEl,(t=>{if(t.width!==this.viewport?.width||t.height!==this.viewport?.height){this.viewport=t}}));this.viewportController.connect()}disconnectedCallback(){this.viewportController?.disconnect();this.viewportController=null}handleIntrinsicSizeChange(){this.viewport=undefined;if(typeof requestAnimationFrame==="function"){requestAnimationFrame((()=>this.viewportController?.measure()))}}render(){const t=this.viewport?.width??this.width;const i=this.viewport?.height??this.height;const{margin:s,axisLabelGap:a,categoryLabelOffset:f}=o();const d=Math.max(0,t-s.left-s.right);const u=Math.max(0,i-s.top-s.bottom);const p=this.series.flatMap((t=>t.data));const m=l(p)??0;const g=c().domain(this.categories.map(((t,i)=>i))).range([0,d]);const y=h().domain([0,m||1]).range([u,0]).nice();const w=k().x(((t,i)=>g(i)??0)).y((t=>y(t)));const v=y.ticks(4);return n(e,{key:"42e2c1a101ed0c17ca8bf638eea3aa930882a506",class:"chart-line"},n("svg",{key:"24828bc0e71e7f734660666838031b39fa088fb2",class:"chart-line__svg",ref:t=>{this.svgEl=t??null},width:t,height:i,role:"img","aria-label":this.series.map((t=>t.name)).join(", ")},n("g",{key:"7761ca80ae1506b81c334f0133cc7e9663fdae41",transform:`translate(${s.left}, ${s.top})`},v.map((t=>n("g",{key:`grid-${t}`,transform:`translate(0, ${y(t)})`},n("line",{class:"chart-line__gridline",x1:0,x2:d}),n("text",{class:"chart-line__axis-label",x:-a,"text-anchor":"end","dominant-baseline":"middle"},t)))),this.categories.map(((t,i)=>n("text",{key:`x-${t}`,class:"chart-line__axis-label",x:g(i)??0,y:u+f,"text-anchor":"middle"},t))),this.series.map(((t,i)=>{const e=t.color??r(i);return n("g",{key:t.name},n("path",{class:"chart-line__path",d:w(t.data)??undefined,stroke:e}),this.showPoints&&t.data.map(((i,s)=>n("circle",{key:`${t.name}-${s}`,class:"chart-line__point",cx:g(s)??0,cy:y(i),fill:e}))))})))))}static get watchers(){return{width:[{handleIntrinsicSizeChange:0}],height:[{handleIntrinsicSizeChange:0}]}}static get style(){return w()}},[2,"ds-chart-line",{series:[16],categories:[16],width:[2],height:[2],showPoints:[4,"show-points"],viewport:[32]},undefined,{width:[{handleIntrinsicSizeChange:0}],height:[{handleIntrinsicSizeChange:0}]}]);function _(){if(typeof customElements==="undefined"){return}const t=["ds-chart-line"];t.forEach((t=>{switch(t){case"ds-chart-line":if(!customElements.get(s(t))){customElements.define(s(t),v)}break}}))}_();const b=v;const x=_;export{b as DsChartLine,x as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chart-line.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Linear","context","this","_context","prototype","areaStart","_line","areaEnd","NaN","lineStart","_point","lineEnd","closePath","point","x","y","lineTo","moveTo","curveLinear","p","lineShape","defined","constant","curve","output","path","withPath","line","undefined","pointX","pointY","data","i","n","array","length","d","defined0","buffer","_","arguments","chartLineCss","MARGIN","top","right","bottom","left","ChartLine","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","series","categories","width","height","showPoints","render","innerWidth","innerHeight","allValues","flatMap","s","yMax","max","xScale","scalePoint","domain","map","range","yScale","scaleLinear","nice","lineGenerator","yTicks","ticks","h","Host","key","class","viewBox","role","name","join","transform","tick","x1","x2","label","si","color","categoryColor","stroke","cx","cy","r","fill"],"sources":["node_modules/d3-shape/src/curve/linear.js","node_modules/d3-shape/src/point.js","node_modules/d3-shape/src/line.js","src/wc/components/ChartLine/ChartLine.css?tag=ds-chart-line&encapsulation=scoped","src/wc/components/ChartLine/ChartLine.tsx"],"sourcesContent":["function Linear(context) {\n this._context = context;\n}\n\nLinear.prototype = {\n areaStart: function() {\n this._line = 0;\n },\n areaEnd: function() {\n this._line = NaN;\n },\n lineStart: function() {\n this._point = 0;\n },\n lineEnd: function() {\n if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();\n this._line = 1 - this._line;\n },\n point: function(x, y) {\n x = +x, y = +y;\n switch (this._point) {\n case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;\n case 1: this._point = 2; // falls through\n default: this._context.lineTo(x, y); break;\n }\n }\n};\n\nexport default function(context) {\n return new Linear(context);\n}\n","export function x(p) {\n return p[0];\n}\n\nexport function y(p) {\n return p[1];\n}\n","import array from \"./array.js\";\nimport constant from \"./constant.js\";\nimport curveLinear from \"./curve/linear.js\";\nimport {withPath} from \"./path.js\";\nimport {x as pointX, y as pointY} from \"./point.js\";\n\nexport default function(x, y) {\n var defined = constant(true),\n context = null,\n curve = curveLinear,\n output = null,\n path = withPath(line);\n\n x = typeof x === \"function\" ? x : (x === undefined) ? pointX : constant(x);\n y = typeof y === \"function\" ? y : (y === undefined) ? pointY : constant(y);\n\n function line(data) {\n var i,\n n = (data = array(data)).length,\n d,\n defined0 = false,\n buffer;\n\n if (context == null) output = curve(buffer = path());\n\n for (i = 0; i <= n; ++i) {\n if (!(i < n && defined(d = data[i], i, data)) === defined0) {\n if (defined0 = !defined0) output.lineStart();\n else output.lineEnd();\n }\n if (defined0) output.point(+x(d, i, data), +y(d, i, data));\n }\n\n if (buffer) return output = null, buffer + \"\" || null;\n }\n\n line.x = function(_) {\n return arguments.length ? (x = typeof _ === \"function\" ? _ : constant(+_), line) : x;\n };\n\n line.y = function(_) {\n return arguments.length ? (y = typeof _ === \"function\" ? _ : constant(+_), line) : y;\n };\n\n line.defined = function(_) {\n return arguments.length ? (defined = typeof _ === \"function\" ? _ : constant(!!_), line) : defined;\n };\n\n line.curve = function(_) {\n return arguments.length ? (curve = _, context != null && (output = curve(context)), line) : curve;\n };\n\n line.context = function(_) {\n return arguments.length ? (_ == null ? context = output = null : output = curve(context = _), line) : context;\n };\n\n return line;\n}\n",":host {\n display: inline-block;\n max-width: 100%;\n font-family: var(--typography-font-family);\n}\n\n.chart-line__svg {\n display: block;\n max-width: 100%;\n height: auto;\n}\n\n.chart-line__gridline {\n stroke: var(--color-border-tertiary);\n stroke-width: 1;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-line__axis-label {\n fill: var(--color-foreground-secondary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-xs);\n font-weight: var(--typography-weight-medium);\n letter-spacing: var(--typography-letterspacing-positive);\n text-transform: uppercase;\n}\n\n.chart-line__path {\n fill: none;\n stroke-width: 2;\n}\n\n.chart-line__point {\n stroke: var(--color-background-primary);\n stroke-width: 1.5;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { line as lineShape } from 'd3-shape';\nimport { scaleLinear, scalePoint } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport type { ChartSeries } from '../../utils/chart-types';\n\nconst MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };\n\n@Component({\n tag: 'ds-chart-line',\n styleUrl: 'ChartLine.css',\n scoped: true,\n})\nexport class ChartLine {\n /** One or more series to plot. Set as a JS property (not an HTML attribute). */\n @Prop() series: ChartSeries[] = [];\n /** X-axis labels — must match each series' `data` length. Set as a JS property. */\n @Prop() categories: string[] = [];\n @Prop() width: number = 480;\n @Prop() height: number = 240;\n @Prop() showPoints: boolean = true;\n\n render() {\n const innerWidth = this.width - MARGIN.left - MARGIN.right;\n const innerHeight = this.height - MARGIN.top - MARGIN.bottom;\n\n const allValues = this.series.flatMap(s => s.data);\n const yMax = max(allValues) ?? 0;\n\n const xScale = scalePoint<number>()\n .domain(this.categories.map((_, i) => i))\n .range([0, innerWidth]);\n\n const yScale = scaleLinear()\n .domain([0, yMax || 1])\n .range([innerHeight, 0])\n .nice();\n\n const lineGenerator = lineShape<number>()\n .x((_, i) => xScale(i) ?? 0)\n .y(d => yScale(d));\n\n const yTicks = yScale.ticks(4);\n\n return (\n <Host class=\"chart-line\">\n <svg\n class=\"chart-line__svg\"\n viewBox={`0 0 ${this.width} ${this.height}`}\n width={this.width}\n height={this.height}\n role=\"img\"\n aria-label={this.series.map(s => s.name).join(', ')}\n >\n <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>\n {yTicks.map(tick => (\n <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n <line class=\"chart-line__gridline\" x1={0} x2={innerWidth} />\n <text class=\"chart-line__axis-label\" x={-8} text-anchor=\"end\" dominant-baseline=\"middle\">\n {tick}\n </text>\n </g>\n ))}\n\n {this.categories.map((label, i) => (\n <text\n key={`x-${label}`}\n class=\"chart-line__axis-label\"\n x={xScale(i) ?? 0}\n y={innerHeight + 16}\n text-anchor=\"middle\"\n >\n {label}\n </text>\n ))}\n\n {this.series.map((s, si) => {\n const color = s.color ?? categoryColor(si);\n return (\n <g key={s.name}>\n <path class=\"chart-line__path\" d={lineGenerator(s.data) ?? undefined} stroke={color} />\n {this.showPoints &&\n s.data.map((d, i) => (\n <circle\n key={`${s.name}-${i}`}\n class=\"chart-line__point\"\n cx={xScale(i) ?? 0}\n cy={yScale(d)}\n r={3}\n fill={color}\n />\n ))}\n </g>\n );\n })}\n </g>\n </svg>\n </Host>\n );\n }\n}\n"],"mappings":"gOAAA,SAASA,EAAOC,GACdC,KAAKC,SAAWF,CAClB,CAEAD,EAAOI,UAAY,CACjBC,UAAW,WACTH,KAAKI,MAAQ,CACjB,EACEC,QAAS,WACPL,KAAKI,MAAQE,GACjB,EACEC,UAAW,WACTP,KAAKQ,OAAS,CAClB,EACEC,QAAS,WACP,GAAIT,KAAKI,OAAUJ,KAAKI,QAAU,GAAKJ,KAAKQ,SAAW,EAAIR,KAAKC,SAASS,YACzEV,KAAKI,MAAQ,EAAIJ,KAAKI,KAC1B,EACEO,MAAO,SAASC,EAAGC,GACjBD,GAAKA,EAAGC,GAAKA,EACb,OAAQb,KAAKQ,QACX,KAAK,EAAGR,KAAKQ,OAAS,EAAGR,KAAKI,MAAQJ,KAAKC,SAASa,OAAOF,EAAGC,GAAKb,KAAKC,SAASc,OAAOH,EAAGC,GAAI,MAC/F,KAAK,EAAGb,KAAKQ,OAAS,EACtB,QAASR,KAAKC,SAASa,OAAOF,EAAGC,GAAI,MAE3C,GAGe,SAAAG,EAASjB,GACtB,OAAO,IAAID,EAAOC,EACpB,CC9BO,SAASa,EAAEK,GAChB,OAAOA,EAAE,EACX,CAEO,SAASJ,EAAEI,GAChB,OAAOA,EAAE,EACX,CCAe,SAAAC,EAASN,EAAGC,GACzB,IAAIM,EAAUC,EAAS,MACnBrB,EAAU,KACVsB,EAAQL,EACRM,EAAS,KACTC,EAAOC,EAASC,GAEpBb,SAAWA,IAAM,WAAaA,EAAKA,IAAMc,UAAaC,EAASP,EAASR,GACxEC,SAAWA,IAAM,WAAaA,EAAKA,IAAMa,UAAaE,EAASR,EAASP,GAExE,SAASY,EAAKI,GACZ,IAAIC,EACAC,GAAKF,EAAOG,EAAMH,IAAOI,OACzBC,EACAC,EAAW,MACXC,EAEJ,GAAIrC,GAAW,KAAMuB,EAASD,EAAMe,EAASb,KAE7C,IAAKO,EAAI,EAAGA,GAAKC,IAAKD,EAAG,CACvB,KAAMA,EAAIC,GAAKZ,EAAQe,EAAIL,EAAKC,GAAIA,EAAGD,MAAWM,EAAU,CAC1D,GAAIA,GAAYA,EAAUb,EAAOf,iBAC5Be,EAAOb,SACpB,CACM,GAAI0B,EAAUb,EAAOX,OAAOC,EAAEsB,EAAGJ,EAAGD,IAAQhB,EAAEqB,EAAGJ,EAAGD,GAC1D,CAEI,GAAIO,EAAQ,OAAOd,EAAS,KAAMc,EAAS,IAAM,IACrD,CAEEX,EAAKb,EAAI,SAASyB,GAChB,OAAOC,UAAUL,QAAUrB,SAAWyB,IAAM,WAAaA,EAAIjB,GAAUiB,GAAIZ,GAAQb,CACvF,EAEEa,EAAKZ,EAAI,SAASwB,GAChB,OAAOC,UAAUL,QAAUpB,SAAWwB,IAAM,WAAaA,EAAIjB,GAAUiB,GAAIZ,GAAQZ,CACvF,EAEEY,EAAKN,QAAU,SAASkB,GACtB,OAAOC,UAAUL,QAAUd,SAAiBkB,IAAM,WAAaA,EAAIjB,IAAWiB,GAAIZ,GAAQN,CAC9F,EAEEM,EAAKJ,MAAQ,SAASgB,GACpB,OAAOC,UAAUL,QAAUZ,EAAQgB,EAAGtC,GAAW,OAASuB,EAASD,EAAMtB,IAAW0B,GAAQJ,CAChG,EAEEI,EAAK1B,QAAU,SAASsC,GACtB,OAAOC,UAAUL,QAAUI,GAAK,KAAOtC,EAAUuB,EAAS,KAAOA,EAASD,EAAMtB,EAAUsC,GAAIZ,GAAQ1B,CAC1G,EAEE,OAAO0B,CACT,CCzDA,MAAMc,EAAe,IAAM,isBCO3B,MAAMC,EAAS,CAAEC,IAAK,GAAIC,MAAO,GAAIC,OAAQ,GAAIC,KAAM,I,MAO1CC,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,4CAOUjD,KAAAkD,OAAwB,GAExBlD,KAAAmD,WAAuB,GACvBnD,KAAAoD,MAAgB,IAChBpD,KAAAqD,OAAiB,IACjBrD,KAAAsD,WAAsB,IAgF/B,CA9EC,MAAAC,GACE,MAAMC,EAAaxD,KAAKoD,MAAQZ,EAAOI,KAAOJ,EAAOE,MACrD,MAAMe,EAAczD,KAAKqD,OAASb,EAAOC,IAAMD,EAAOG,OAEtD,MAAMe,EAAY1D,KAAKkD,OAAOS,SAAQC,GAAKA,EAAE/B,OAC7C,MAAMgC,EAAOC,EAAIJ,IAAc,EAE/B,MAAMK,EAASC,IACZC,OAAOjE,KAAKmD,WAAWe,KAAI,CAAC7B,EAAGP,IAAMA,KACrCqC,MAAM,CAAC,EAAGX,IAEb,MAAMY,EAASC,IACZJ,OAAO,CAAC,EAAGJ,GAAQ,IACnBM,MAAM,CAACV,EAAa,IACpBa,OAEH,MAAMC,EAAgBrD,IACnBN,GAAE,CAACyB,EAAGP,IAAMiC,EAAOjC,IAAM,IACzBjB,GAAEqB,GAAKkC,EAAOlC,KAEjB,MAAMsC,EAASJ,EAAOK,MAAM,GAE5B,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,cACVH,EAAA,OAAAE,IAAA,2CACEC,MAAM,kBACNC,QAAS,OAAO9E,KAAKoD,SAASpD,KAAKqD,SACnCD,MAAOpD,KAAKoD,MACZC,OAAQrD,KAAKqD,OACb0B,KAAK,MAAK,aACE/E,KAAKkD,OAAOgB,KAAIN,GAAKA,EAAEoB,OAAMC,KAAK,OAE9CP,EAAA,KAAAE,IAAA,2CAAGM,UAAW,aAAa1C,EAAOI,SAASJ,EAAOC,QAC/C+B,EAAON,KAAIiB,GACVT,EAAA,KAAGE,IAAK,QAAQO,IAAQD,UAAW,gBAAgBd,EAAOe,OACxDT,EAAA,QAAMG,MAAM,uBAAuBO,GAAI,EAAGC,GAAI7B,IAC9CkB,EAAA,QAAMG,MAAM,yBAAyBjE,GAAG,EAAE,cAAc,MAAK,oBAAmB,UAC7EuE,MAKNnF,KAAKmD,WAAWe,KAAI,CAACoB,EAAOxD,IAC3B4C,EAAA,QACEE,IAAK,KAAKU,IACVT,MAAM,yBACNjE,EAAGmD,EAAOjC,IAAM,EAChBjB,EAAG4C,EAAc,GAAE,cACP,UAEX6B,KAIJtF,KAAKkD,OAAOgB,KAAI,CAACN,EAAG2B,KACnB,MAAMC,EAAQ5B,EAAE4B,OAASC,EAAcF,GACvC,OACEb,EAAA,KAAGE,IAAKhB,EAAEoB,MACRN,EAAA,QAAMG,MAAM,mBAAmB3C,EAAGqC,EAAcX,EAAE/B,OAASH,UAAWgE,OAAQF,IAC7ExF,KAAKsD,YACJM,EAAE/B,KAAKqC,KAAI,CAAChC,EAAGJ,IACb4C,EAAA,UACEE,IAAK,GAAGhB,EAAEoB,QAAQlD,IAClB+C,MAAM,oBACNc,GAAI5B,EAAOjC,IAAM,EACjB8D,GAAIxB,EAAOlC,GACX2D,EAAG,EACHC,KAAMN,MAGV,M","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["Linear","context","this","_context","prototype","areaStart","_line","areaEnd","NaN","lineStart","_point","lineEnd","closePath","point","x","y","lineTo","moveTo","curveLinear","p","lineShape","defined","constant","curve","output","path","withPath","line","undefined","pointX","pointY","data","i","n","array","length","d","defined0","buffer","_","arguments","chartLineCss","ChartLine","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","series","categories","width","height","showPoints","viewportController","svgEl","componentDidLoad","connectViewportController","connectedCallback","componentDidRender","ChartViewportController","viewport","connect","disconnectedCallback","disconnect","handleIntrinsicSizeChange","requestAnimationFrame","measure","render","viewportWidth","viewportHeight","margin","axisLabelGap","categoryLabelOffset","resolveCartesianChartLayout","innerWidth","Math","max","left","right","innerHeight","top","bottom","allValues","flatMap","s","yMax","xScale","scalePoint","domain","map","range","yScale","scaleLinear","nice","lineGenerator","yTicks","ticks","h","Host","key","class","ref","element","role","name","join","transform","tick","x1","x2","label","si","color","categoryColor","stroke","cx","cy","fill"],"sources":["node_modules/d3-shape/src/curve/linear.js","node_modules/d3-shape/src/point.js","node_modules/d3-shape/src/line.js","src/wc/components/ChartLine/ChartLine.css?tag=ds-chart-line&encapsulation=scoped","src/wc/components/ChartLine/ChartLine.tsx"],"sourcesContent":["function Linear(context) {\n this._context = context;\n}\n\nLinear.prototype = {\n areaStart: function() {\n this._line = 0;\n },\n areaEnd: function() {\n this._line = NaN;\n },\n lineStart: function() {\n this._point = 0;\n },\n lineEnd: function() {\n if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();\n this._line = 1 - this._line;\n },\n point: function(x, y) {\n x = +x, y = +y;\n switch (this._point) {\n case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;\n case 1: this._point = 2; // falls through\n default: this._context.lineTo(x, y); break;\n }\n }\n};\n\nexport default function(context) {\n return new Linear(context);\n}\n","export function x(p) {\n return p[0];\n}\n\nexport function y(p) {\n return p[1];\n}\n","import array from \"./array.js\";\nimport constant from \"./constant.js\";\nimport curveLinear from \"./curve/linear.js\";\nimport {withPath} from \"./path.js\";\nimport {x as pointX, y as pointY} from \"./point.js\";\n\nexport default function(x, y) {\n var defined = constant(true),\n context = null,\n curve = curveLinear,\n output = null,\n path = withPath(line);\n\n x = typeof x === \"function\" ? x : (x === undefined) ? pointX : constant(x);\n y = typeof y === \"function\" ? y : (y === undefined) ? pointY : constant(y);\n\n function line(data) {\n var i,\n n = (data = array(data)).length,\n d,\n defined0 = false,\n buffer;\n\n if (context == null) output = curve(buffer = path());\n\n for (i = 0; i <= n; ++i) {\n if (!(i < n && defined(d = data[i], i, data)) === defined0) {\n if (defined0 = !defined0) output.lineStart();\n else output.lineEnd();\n }\n if (defined0) output.point(+x(d, i, data), +y(d, i, data));\n }\n\n if (buffer) return output = null, buffer + \"\" || null;\n }\n\n line.x = function(_) {\n return arguments.length ? (x = typeof _ === \"function\" ? _ : constant(+_), line) : x;\n };\n\n line.y = function(_) {\n return arguments.length ? (y = typeof _ === \"function\" ? _ : constant(+_), line) : y;\n };\n\n line.defined = function(_) {\n return arguments.length ? (defined = typeof _ === \"function\" ? _ : constant(!!_), line) : defined;\n };\n\n line.curve = function(_) {\n return arguments.length ? (curve = _, context != null && (output = curve(context)), line) : curve;\n };\n\n line.context = function(_) {\n return arguments.length ? (_ == null ? context = output = null : output = curve(context = _), line) : context;\n };\n\n return line;\n}\n",":host {\n display: inline-block;\n max-width: 100%;\n font-family: var(--typography-font-family);\n}\n\n.chart-line__svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.chart-line__gridline {\n stroke: var(--color-border-tertiary);\n stroke-width: var(--dimension-stroke-width-012);\n vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-line__axis-label {\n fill: var(--color-foreground-secondary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-xs);\n font-weight: var(--typography-weight-medium);\n letter-spacing: var(--typography-letterspacing-positive);\n text-transform: uppercase;\n}\n\n.chart-line__path {\n fill: none;\n stroke-width: var(--dimension-stroke-width-025);\n vector-effect: non-scaling-stroke;\n}\n\n.chart-line__point {\n stroke: var(--color-background-primary);\n stroke-width: var(--dimension-stroke-width-018);\n r: calc(var(--dimension-size-075) / 2);\n vector-effect: non-scaling-stroke;\n}\n","import { Component, Prop, State, Watch, h, Host } from '@stencil/core';\nimport { line as lineShape } from 'd3-shape';\nimport { scaleLinear, scalePoint } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { resolveCartesianChartLayout } from '../../utils/cartesian-chart-layout';\nimport {\n ChartViewportController,\n type ChartViewportSize,\n} from '../../utils/chart-viewport-controller';\nimport type { ChartSeries } from '../../utils/chart-types';\n\n@Component({\n tag: 'ds-chart-line',\n styleUrl: 'ChartLine.css',\n scoped: true,\n})\nexport class ChartLine {\n /** One or more series to plot. Set as a JS property (not an HTML attribute). */\n @Prop() series: ChartSeries[] = [];\n /** X-axis labels — must match each series' `data` length. Set as a JS property. */\n @Prop() categories: string[] = [];\n /** Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size. */\n @Prop() width: number = 480;\n /** Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size. */\n @Prop() height: number = 240;\n @Prop() showPoints: boolean = true;\n\n @State() private viewport: ChartViewportSize | undefined;\n\n private viewportController: ChartViewportController | null = null;\n private svgEl: SVGElement | null = null;\n\n componentDidLoad() {\n this.connectViewportController();\n }\n\n connectedCallback() {\n if (this.svgEl && !this.viewportController) this.connectViewportController();\n }\n\n componentDidRender() {\n if (!this.viewportController) this.connectViewportController();\n }\n\n private connectViewportController() {\n if (!this.svgEl) return;\n this.viewportController = new ChartViewportController(this.svgEl, viewport => {\n if (\n viewport.width !== this.viewport?.width ||\n viewport.height !== this.viewport?.height\n ) {\n this.viewport = viewport;\n }\n });\n this.viewportController.connect();\n }\n\n disconnectedCallback() {\n this.viewportController?.disconnect();\n this.viewportController = null;\n }\n\n @Watch('width')\n @Watch('height')\n handleIntrinsicSizeChange() {\n this.viewport = undefined;\n if (typeof requestAnimationFrame === 'function') {\n requestAnimationFrame(() => this.viewportController?.measure());\n }\n }\n\n render() {\n const viewportWidth = this.viewport?.width ?? this.width;\n const viewportHeight = this.viewport?.height ?? this.height;\n const { margin, axisLabelGap, categoryLabelOffset } =\n resolveCartesianChartLayout();\n const innerWidth = Math.max(0, viewportWidth - margin.left - margin.right);\n const innerHeight = Math.max(0, viewportHeight - margin.top - margin.bottom);\n\n const allValues = this.series.flatMap(s => s.data);\n const yMax = max(allValues) ?? 0;\n\n const xScale = scalePoint<number>()\n .domain(this.categories.map((_, i) => i))\n .range([0, innerWidth]);\n\n const yScale = scaleLinear()\n .domain([0, yMax || 1])\n .range([innerHeight, 0])\n .nice();\n\n const lineGenerator = lineShape<number>()\n .x((_, i) => xScale(i) ?? 0)\n .y(d => yScale(d));\n\n const yTicks = yScale.ticks(4);\n\n return (\n <Host class=\"chart-line\">\n <svg\n class=\"chart-line__svg\"\n ref={element => {\n this.svgEl = element ?? null;\n }}\n width={viewportWidth}\n height={viewportHeight}\n role=\"img\"\n aria-label={this.series.map(s => s.name).join(', ')}\n >\n <g transform={`translate(${margin.left}, ${margin.top})`}>\n {yTicks.map(tick => (\n <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n <line class=\"chart-line__gridline\" x1={0} x2={innerWidth} />\n <text\n class=\"chart-line__axis-label\"\n x={-axisLabelGap}\n text-anchor=\"end\"\n dominant-baseline=\"middle\"\n >\n {tick}\n </text>\n </g>\n ))}\n\n {this.categories.map((label, i) => (\n <text\n key={`x-${label}`}\n class=\"chart-line__axis-label\"\n x={xScale(i) ?? 0}\n y={innerHeight + categoryLabelOffset}\n text-anchor=\"middle\"\n >\n {label}\n </text>\n ))}\n\n {this.series.map((s, si) => {\n const color = s.color ?? categoryColor(si);\n return (\n <g key={s.name}>\n <path class=\"chart-line__path\" d={lineGenerator(s.data) ?? undefined} stroke={color} />\n {this.showPoints &&\n s.data.map((d, i) => (\n <circle\n key={`${s.name}-${i}`}\n class=\"chart-line__point\"\n cx={xScale(i) ?? 0}\n cy={yScale(d)}\n fill={color}\n />\n ))}\n </g>\n );\n })}\n </g>\n </svg>\n </Host>\n );\n }\n}\n"],"mappings":"8OAAA,SAASA,EAAOC,GACdC,KAAKC,SAAWF,CAClB,CAEAD,EAAOI,UAAY,CACjBC,UAAW,WACTH,KAAKI,MAAQ,CACjB,EACEC,QAAS,WACPL,KAAKI,MAAQE,GACjB,EACEC,UAAW,WACTP,KAAKQ,OAAS,CAClB,EACEC,QAAS,WACP,GAAIT,KAAKI,OAAUJ,KAAKI,QAAU,GAAKJ,KAAKQ,SAAW,EAAIR,KAAKC,SAASS,YACzEV,KAAKI,MAAQ,EAAIJ,KAAKI,KAC1B,EACEO,MAAO,SAASC,EAAGC,GACjBD,GAAKA,EAAGC,GAAKA,EACb,OAAQb,KAAKQ,QACX,KAAK,EAAGR,KAAKQ,OAAS,EAAGR,KAAKI,MAAQJ,KAAKC,SAASa,OAAOF,EAAGC,GAAKb,KAAKC,SAASc,OAAOH,EAAGC,GAAI,MAC/F,KAAK,EAAGb,KAAKQ,OAAS,EACtB,QAASR,KAAKC,SAASa,OAAOF,EAAGC,GAAI,MAE3C,GAGe,SAAAG,EAASjB,GACtB,OAAO,IAAID,EAAOC,EACpB,CC9BO,SAASa,EAAEK,GAChB,OAAOA,EAAE,EACX,CAEO,SAASJ,EAAEI,GAChB,OAAOA,EAAE,EACX,CCAe,SAAAC,EAASN,EAAGC,GACzB,IAAIM,EAAUC,EAAS,MACnBrB,EAAU,KACVsB,EAAQL,EACRM,EAAS,KACTC,EAAOC,EAASC,GAEpBb,SAAWA,IAAM,WAAaA,EAAKA,IAAMc,UAAaC,EAASP,EAASR,GACxEC,SAAWA,IAAM,WAAaA,EAAKA,IAAMa,UAAaE,EAASR,EAASP,GAExE,SAASY,EAAKI,GACZ,IAAIC,EACAC,GAAKF,EAAOG,EAAMH,IAAOI,OACzBC,EACAC,EAAW,MACXC,EAEJ,GAAIrC,GAAW,KAAMuB,EAASD,EAAMe,EAASb,KAE7C,IAAKO,EAAI,EAAGA,GAAKC,IAAKD,EAAG,CACvB,KAAMA,EAAIC,GAAKZ,EAAQe,EAAIL,EAAKC,GAAIA,EAAGD,MAAWM,EAAU,CAC1D,GAAIA,GAAYA,EAAUb,EAAOf,iBAC5Be,EAAOb,SACpB,CACM,GAAI0B,EAAUb,EAAOX,OAAOC,EAAEsB,EAAGJ,EAAGD,IAAQhB,EAAEqB,EAAGJ,EAAGD,GAC1D,CAEI,GAAIO,EAAQ,OAAOd,EAAS,KAAMc,EAAS,IAAM,IACrD,CAEEX,EAAKb,EAAI,SAASyB,GAChB,OAAOC,UAAUL,QAAUrB,SAAWyB,IAAM,WAAaA,EAAIjB,GAAUiB,GAAIZ,GAAQb,CACvF,EAEEa,EAAKZ,EAAI,SAASwB,GAChB,OAAOC,UAAUL,QAAUpB,SAAWwB,IAAM,WAAaA,EAAIjB,GAAUiB,GAAIZ,GAAQZ,CACvF,EAEEY,EAAKN,QAAU,SAASkB,GACtB,OAAOC,UAAUL,QAAUd,SAAiBkB,IAAM,WAAaA,EAAIjB,IAAWiB,GAAIZ,GAAQN,CAC9F,EAEEM,EAAKJ,MAAQ,SAASgB,GACpB,OAAOC,UAAUL,QAAUZ,EAAQgB,EAAGtC,GAAW,OAASuB,EAASD,EAAMtB,IAAW0B,GAAQJ,CAChG,EAEEI,EAAK1B,QAAU,SAASsC,GACtB,OAAOC,UAAUL,QAAUI,GAAK,KAAOtC,EAAUuB,EAAS,KAAOA,EAASD,EAAMtB,EAAUsC,GAAIZ,GAAQ1B,CAC1G,EAEE,OAAO0B,CACT,CCzDA,MAAMc,EAAe,IAAM,o6B,MCiBdC,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,4CAOU5C,KAAA6C,OAAwB,GAExB7C,KAAA8C,WAAuB,GAEvB9C,KAAA+C,MAAgB,IAEhB/C,KAAAgD,OAAiB,IACjBhD,KAAAiD,WAAsB,KAItBjD,KAAAkD,mBAAqD,KACrDlD,KAAAmD,MAA2B,IAiIpC,CA/HC,gBAAAC,GACEpD,KAAKqD,2B,CAGP,iBAAAC,GACE,GAAItD,KAAKmD,QAAUnD,KAAKkD,mBAAoBlD,KAAKqD,2B,CAGnD,kBAAAE,GACE,IAAKvD,KAAKkD,mBAAoBlD,KAAKqD,2B,CAG7B,yBAAAA,GACN,IAAKrD,KAAKmD,MAAO,OACjBnD,KAAKkD,mBAAqB,IAAIM,EAAwBxD,KAAKmD,OAAOM,IAChE,GACEA,EAASV,QAAU/C,KAAKyD,UAAUV,OAClCU,EAAST,SAAWhD,KAAKyD,UAAUT,OACnC,CACAhD,KAAKyD,SAAWA,C,KAGpBzD,KAAKkD,mBAAmBQ,S,CAG1B,oBAAAC,GACE3D,KAAKkD,oBAAoBU,aACzB5D,KAAKkD,mBAAqB,I,CAK5B,yBAAAW,GACE7D,KAAKyD,SAAW/B,UAChB,UAAWoC,wBAA0B,WAAY,CAC/CA,uBAAsB,IAAM9D,KAAKkD,oBAAoBa,W,EAIzD,MAAAC,GACE,MAAMC,EAAgBjE,KAAKyD,UAAUV,OAAS/C,KAAK+C,MACnD,MAAMmB,EAAiBlE,KAAKyD,UAAUT,QAAUhD,KAAKgD,OACrD,MAAMmB,OAAEA,EAAMC,aAAEA,EAAYC,oBAAEA,GAC5BC,IACF,MAAMC,EAAaC,KAAKC,IAAI,EAAGR,EAAgBE,EAAOO,KAAOP,EAAOQ,OACpE,MAAMC,EAAcJ,KAAKC,IAAI,EAAGP,EAAiBC,EAAOU,IAAMV,EAAOW,QAErE,MAAMC,EAAY/E,KAAK6C,OAAOmC,SAAQC,GAAKA,EAAEpD,OAC7C,MAAMqD,EAAOT,EAAIM,IAAc,EAE/B,MAAMI,EAASC,IACZC,OAAOrF,KAAK8C,WAAWwC,KAAI,CAACjD,EAAGP,IAAMA,KACrCyD,MAAM,CAAC,EAAGhB,IAEb,MAAMiB,EAASC,IACZJ,OAAO,CAAC,EAAGH,GAAQ,IACnBK,MAAM,CAACX,EAAa,IACpBc,OAEH,MAAMC,EAAgBzE,IACnBN,GAAE,CAACyB,EAAGP,IAAMqD,EAAOrD,IAAM,IACzBjB,GAAEqB,GAAKsD,EAAOtD,KAEjB,MAAM0D,EAASJ,EAAOK,MAAM,GAE5B,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,cACVH,EAAA,OAAAE,IAAA,2CACEC,MAAM,kBACNC,IAAKC,IACHnG,KAAKmD,MAAQgD,GAAW,IAAI,EAE9BpD,MAAOkB,EACPjB,OAAQkB,EACRkC,KAAK,MAAK,aACEpG,KAAK6C,OAAOyC,KAAIL,GAAKA,EAAEoB,OAAMC,KAAK,OAE9CR,EAAA,KAAAE,IAAA,2CAAGO,UAAW,aAAapC,EAAOO,SAASP,EAAOU,QAC/Ce,EAAON,KAAIkB,GACVV,EAAA,KAAGE,IAAK,QAAQQ,IAAQD,UAAW,gBAAgBf,EAAOgB,OACxDV,EAAA,QAAMG,MAAM,uBAAuBQ,GAAI,EAAGC,GAAInC,IAC9CuB,EAAA,QACEG,MAAM,yBACNrF,GAAIwD,EAAY,cACJ,MAAK,oBACC,UAEjBoC,MAKNxG,KAAK8C,WAAWwC,KAAI,CAACqB,EAAO7E,IAC3BgE,EAAA,QACEE,IAAK,KAAKW,IACVV,MAAM,yBACNrF,EAAGuE,EAAOrD,IAAM,EAChBjB,EAAG+D,EAAcP,EAAmB,cACxB,UAEXsC,KAIJ3G,KAAK6C,OAAOyC,KAAI,CAACL,EAAG2B,KACnB,MAAMC,EAAQ5B,EAAE4B,OAASC,EAAcF,GACvC,OACEd,EAAA,KAAGE,IAAKf,EAAEoB,MACRP,EAAA,QAAMG,MAAM,mBAAmB/D,EAAGyD,EAAcV,EAAEpD,OAASH,UAAWqF,OAAQF,IAC7E7G,KAAKiD,YACJgC,EAAEpD,KAAKyD,KAAI,CAACpD,EAAGJ,IACbgE,EAAA,UACEE,IAAK,GAAGf,EAAEoB,QAAQvE,IAClBmE,MAAM,oBACNe,GAAI7B,EAAOrD,IAAM,EACjBmF,GAAIzB,EAAOtD,GACXgF,KAAML,MAGV,M","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-CU2673IJ.js";const t=o;const p=s;export{t as DsCheckbox,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-checkbox.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as i,H as o,c as s,h as n,a as r,t as c}from"./index.js";import{d as e}from"./p-BAfG3M8z.js";import{d as t}from"./p-k0Hmj1KV.js";import{C as d}from"./p-CuwopElg.js";const a=()=>`.ds-control--lg.sc-ds-chip,.ds-control--lg.sc-ds-chip-h,.ds-control--md.sc-ds-chip-h,.ds-control--md.sc-ds-chip,.ds-control--sm.sc-ds-chip-h,.ds-control--sm.sc-ds-chip,.ds-control--xs.sc-ds-chip-h,.ds-control--xs.sc-ds-chip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-chip-h,.ds-control--lg.sc-ds-chip{--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-chip-h,.ds-control--md.sc-ds-chip{--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-chip-h,.ds-control--sm.sc-ds-chip{--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-chip-h,.ds-control--xs.sc-ds-chip{--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-interaction-fill.sc-ds-chip-h,.ds-interaction-fill.sc-ds-chip{position:relative;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-fill.sc-ds-chip-h::before,.ds-interaction-fill.sc-ds-chip::before,.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-chip-h::before,.ds-interaction-fill.sc-ds-chip::before{z-index:1}.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chip-h,.ds-interaction-fill--bordered.sc-ds-chip{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chip-h::before,.ds-interaction-fill--selected.sc-ds-chip::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chip-h,.ds-interaction-fill--selected.sc-ds-chip{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chip-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-chip-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chip-h>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill.sc-ds-chip>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill__content.sc-ds-chip{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-chip-h,.ds-interaction-fill--on-faint.sc-ds-chip{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chip-h,.ds-interaction-fill--on-medium.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-bold.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-strong.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-translucent.sc-ds-chip{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chip-h,.ds-interaction-fill--on-inverted.sc-ds-chip{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chip-h,.ds-interaction-fill--on-media.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-always-dark.sc-ds-chip{--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);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chip-h,.ds-interaction-fill--on-navigation.sc-ds-chip{--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)}.sc-ds-chip-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-chip-h,.ds-focus-ring.sc-ds-chip,.ds-focus-ring-inset.sc-ds-chip-h,.ds-focus-ring-inset.sc-ds-chip{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-chip-h:focus-visible,.ds-focus-ring.sc-ds-chip: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-chip-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chip{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-chip-h:focus-visible,.ds-focus-ring-inset.sc-ds-chip:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chip-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chip: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-chip-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-chip-h,.ds-control-inactive.sc-ds-chip{opacity:0.5;pointer-events:none;cursor:not-allowed}.sc-ds-chip-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-chip-h{border-radius:var(--dimension-radius-half)}.tag__label.sc-ds-chip{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.chip--default.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.chip--active.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.chip--error.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.chip--caution.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag__remove.sc-ds-chip{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:default;color:inherit;flex-shrink:0;position:relative;z-index:2;border-radius:var(--dimension-radius-half)}.tag__remove.sc-ds-chip::before{content:'';position:absolute;inset:var(--dimension-space-n025);border-radius:var(--dimension-radius-half);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-chip:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-chip:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:var(--dimension-space-n012)}.tag--size-xs.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:0}.tag__remove-x.sc-ds-chip{display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}`;const l={md:"md",sm:"sm",xs:"xs"};const h=i(class i extends o{constructor(i){super();if(i!==false){this.__registerHost()}this.dsRemove=s(this,"dsRemove");this.state="default";this.size="md";this.rounded=false;this.isInactive=false;this.removeLabel="Remove {label}";this.handleRemove=i=>{i.stopPropagation();if(this.isInactive)return;this.dsRemove.emit()}}render(){const i=d[this.size];const o=l[this.size];const s=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;return n(r,{key:"b71fc10291bea9c4caf2400c4b498a4ddf845b39",class:{tag:true,chip:true,[`chip--${this.state}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","tag--rounded":this.rounded,"tag--removable":true,"ds-interaction-fill":!this.isInactive,"ds-control-inactive":this.isInactive},style:s,"aria-disabled":this.isInactive?"true":undefined},n("ds-text",{key:"19481f7717c57bd5099b1db9388a1a041850235c",class:"tag__label",as:"span",variant:i,color:"inherit"},this.label),n("button",{key:"35bfb4dc194146bf8b4371dedd5e4fd341388a9e",type:"button",class:"tag__remove ds-focus-ring-inset",onClick:this.handleRemove,"aria-label":this.removeLabel.replace("{label}",this.label),disabled:this.isInactive||undefined},n("ds-icon",{key:"bac96b51eafcbd66d165df947fb7a94ee4892051",class:"tag__remove-x",name:"Cross",size:o,color:"inherit"})))}static get style(){return a()}},[2,"ds-chip",{label:[1],state:[1],size:[1],rounded:[4],maxWidth:[8,"max-width"],isInactive:[4,"is-inactive"],removeLabel:[1,"remove-label"]}]);function v(){if(typeof customElements==="undefined"){return}const i=["ds-chip","ds-icon","ds-text"];i.forEach((i=>{switch(i){case"ds-chip":if(!customElements.get(c(i))){customElements.define(c(i),h)}break;case"ds-icon":if(!customElements.get(c(i))){e()}break;case"ds-text":if(!customElements.get(c(i))){t()}break}}))}v();const f=h;const p=v;export{f as DsChip,p as defineCustomElement};
|
|
1
|
+
import{p as i,H as o,c as s,h as n,a as r,t as c}from"./index.js";import{d as e}from"./p-BAfG3M8z.js";import{d as t}from"./p-CPwpgUWT.js";import{C as d}from"./p-CuwopElg.js";const a=()=>`.ds-control--lg.sc-ds-chip,.ds-control--lg.sc-ds-chip-h,.ds-control--md.sc-ds-chip-h,.ds-control--md.sc-ds-chip,.ds-control--sm.sc-ds-chip-h,.ds-control--sm.sc-ds-chip,.ds-control--xs.sc-ds-chip-h,.ds-control--xs.sc-ds-chip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-chip-h,.ds-control--lg.sc-ds-chip{--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-chip-h,.ds-control--md.sc-ds-chip{--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-chip-h,.ds-control--sm.sc-ds-chip{--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-chip-h,.ds-control--xs.sc-ds-chip{--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-interaction-fill.sc-ds-chip-h,.ds-interaction-fill.sc-ds-chip{position:relative;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-fill.sc-ds-chip-h::before,.ds-interaction-fill.sc-ds-chip::before,.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-chip-h::before,.ds-interaction-fill.sc-ds-chip::before{z-index:1}.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chip-h,.ds-interaction-fill--bordered.sc-ds-chip{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chip-h::before,.ds-interaction-fill--selected.sc-ds-chip::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chip-h,.ds-interaction-fill--selected.sc-ds-chip{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chip-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-chip-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chip-h>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill.sc-ds-chip>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill__content.sc-ds-chip{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-chip-h,.ds-interaction-fill--on-faint.sc-ds-chip{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chip-h,.ds-interaction-fill--on-medium.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-bold.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-strong.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-translucent.sc-ds-chip{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chip-h,.ds-interaction-fill--on-inverted.sc-ds-chip{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chip-h,.ds-interaction-fill--on-media.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-always-dark.sc-ds-chip{--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);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chip-h,.ds-interaction-fill--on-navigation.sc-ds-chip{--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)}.sc-ds-chip-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-chip-h,.ds-focus-ring.sc-ds-chip,.ds-focus-ring-inset.sc-ds-chip-h,.ds-focus-ring-inset.sc-ds-chip{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-chip-h:focus-visible,.ds-focus-ring.sc-ds-chip: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-chip-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chip{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-chip-h:focus-visible,.ds-focus-ring-inset.sc-ds-chip:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chip-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chip: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-chip-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-chip-h,.ds-control-inactive.sc-ds-chip{opacity:0.5;pointer-events:none;cursor:not-allowed}.sc-ds-chip-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-chip-h{border-radius:var(--dimension-radius-half)}.tag__label.sc-ds-chip{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.chip--default.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.chip--active.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.chip--error.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.chip--caution.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag__remove.sc-ds-chip{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:default;color:inherit;flex-shrink:0;position:relative;z-index:2;border-radius:var(--dimension-radius-half)}.tag__remove.sc-ds-chip::before{content:'';position:absolute;inset:var(--dimension-space-n025);border-radius:var(--dimension-radius-half);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-chip:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-chip:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:var(--dimension-space-n012)}.tag--size-xs.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:0}.tag__remove-x.sc-ds-chip{display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}`;const l={md:"md",sm:"sm",xs:"xs"};const h=i(class i extends o{constructor(i){super();if(i!==false){this.__registerHost()}this.dsRemove=s(this,"dsRemove");this.state="default";this.size="md";this.rounded=false;this.isInactive=false;this.removeLabel="Remove {label}";this.handleRemove=i=>{i.stopPropagation();if(this.isInactive)return;this.dsRemove.emit()}}render(){const i=d[this.size];const o=l[this.size];const s=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;return n(r,{key:"b571d80fe826b7731164c269d25d50f28cd1453b",class:{tag:true,chip:true,[`chip--${this.state}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","tag--rounded":this.rounded,"tag--removable":true,"ds-interaction-fill":!this.isInactive,"ds-control-inactive":this.isInactive},style:s,"aria-disabled":this.isInactive?"true":undefined},n("ds-text",{key:"f77a3476630f115a0c590dfdd38128aba7087bde",class:"tag__label",as:"span",variant:i,color:"inherit"},this.label),n("button",{key:"470cfa3efae1070476249020b15bf590294a55a6",type:"button",class:"tag__remove ds-focus-ring-inset",onClick:this.handleRemove,"aria-label":this.removeLabel.replace("{label}",this.label),disabled:this.isInactive||undefined},n("ds-icon",{key:"c4f5d03ee7cffcbe88131efff3a9a4debbba9145",class:"tag__remove-x",name:"Cross",size:o,color:"inherit"})))}static get style(){return a()}},[2,"ds-chip",{label:[1],state:[1],size:[1],rounded:[4],maxWidth:[8,"max-width"],isInactive:[4,"is-inactive"],removeLabel:[1,"remove-label"]}]);function v(){if(typeof customElements==="undefined"){return}const i=["ds-chip","ds-icon","ds-text"];i.forEach((i=>{switch(i){case"ds-chip":if(!customElements.get(c(i))){customElements.define(c(i),h)}break;case"ds-icon":if(!customElements.get(c(i))){e()}break;case"ds-text":if(!customElements.get(c(i))){t()}break}}))}v();const f=h;const p=v;export{f as DsChip,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chip.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{C as o,d as s}from"./p-
|
|
1
|
+
import{C as o,d as s}from"./p-38PfdMkF.js";const t=o;const p=s;export{t as DsCodeBlock,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-code-block.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as i,H as s,c as e,h as t,a as o,t as n}from"./index.js";import{d as r}from"./p-BT5hgg5i.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as a}from"./p-k0Hmj1KV.js";const d=()=>`.sc-ds-conversation-list-item-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-conversation-list-item-h,.ds-focus-ring.sc-ds-conversation-list-item,.ds-focus-ring-inset.sc-ds-conversation-list-item-h,.ds-focus-ring-inset.sc-ds-conversation-list-item{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-conversation-list-item-h:focus-visible,.ds-focus-ring.sc-ds-conversation-list-item: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-conversation-list-item-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-conversation-list-item{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-conversation-list-item-h:focus-visible,.ds-focus-ring-inset.sc-ds-conversation-list-item:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-conversation-list-item-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-conversation-list-item: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-conversation-list-item-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-conversation-list-item-h,.ds-interaction-fill.sc-ds-conversation-list-item{position:relative;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-fill.sc-ds-conversation-list-item-h::before,.ds-interaction-fill.sc-ds-conversation-list-item::before,.ds-interaction-fill.sc-ds-conversation-list-item-h::after,.ds-interaction-fill.sc-ds-conversation-list-item::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-conversation-list-item-h::before,.ds-interaction-fill.sc-ds-conversation-list-item::before{z-index:1}.ds-interaction-fill.sc-ds-conversation-list-item-h::after,.ds-interaction-fill.sc-ds-conversation-list-item::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-conversation-list-item-h,.ds-interaction-fill--bordered.sc-ds-conversation-list-item{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-conversation-list-item-h::before,.ds-interaction-fill--selected.sc-ds-conversation-list-item::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-conversation-list-item-h,.ds-interaction-fill--selected.sc-ds-conversation-list-item{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-conversation-list-item-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-conversation-list-item:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-conversation-list-item-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-conversation-list-item:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-conversation-list-item-h>.ds-interaction-fill__content.sc-ds-conversation-list-item,.ds-interaction-fill.sc-ds-conversation-list-item>.ds-interaction-fill__content.sc-ds-conversation-list-item,.ds-interaction-fill__content.sc-ds-conversation-list-item{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-faint.sc-ds-conversation-list-item{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-medium.sc-ds-conversation-list-item{--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-conversation-list-item-h,.ds-interaction-fill--on-bold.sc-ds-conversation-list-item{--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-conversation-list-item-h,.ds-interaction-fill--on-strong.sc-ds-conversation-list-item{--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-conversation-list-item-h,.ds-interaction-fill--on-translucent.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-inverted.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-media.sc-ds-conversation-list-item{--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-conversation-list-item-h,.ds-interaction-fill--on-always-dark.sc-ds-conversation-list-item{--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);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-navigation.sc-ds-conversation-list-item{--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-control-inactive.sc-ds-conversation-list-item-h,.ds-control-inactive.sc-ds-conversation-list-item{opacity:0.5;pointer-events:none;cursor:not-allowed}.ds-control--lg.sc-ds-conversation-list-item,.ds-control--lg.sc-ds-conversation-list-item-h,.ds-control--md.sc-ds-conversation-list-item-h,.ds-control--md.sc-ds-conversation-list-item,.ds-control--sm.sc-ds-conversation-list-item-h,.ds-control--sm.sc-ds-conversation-list-item,.ds-control--xs.sc-ds-conversation-list-item-h,.ds-control--xs.sc-ds-conversation-list-item{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-conversation-list-item-h,.ds-control--lg.sc-ds-conversation-list-item{--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-conversation-list-item-h,.ds-control--md.sc-ds-conversation-list-item{--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-conversation-list-item-h,.ds-control--sm.sc-ds-conversation-list-item{--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-conversation-list-item-h,.ds-control--xs.sc-ds-conversation-list-item{--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-space--sm.sc-ds-conversation-list-item-h,.ds-chrome-space--sm.sc-ds-conversation-list-item{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-conversation-list-item-h,.ds-chrome-space--md.sc-ds-conversation-list-item{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-conversation-list-item-h,.ds-chrome-space--lg.sc-ds-conversation-list-item{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-conversation-list-item-h,.ds-chrome-row.sc-ds-conversation-list-item,.ds-chrome-column.sc-ds-conversation-list-item-h,.ds-chrome-column.sc-ds-conversation-list-item,.ds-chrome-grid.sc-ds-conversation-list-item-h,.ds-chrome-grid.sc-ds-conversation-list-item{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-conversation-list-item-h,.ds-chrome-row.sc-ds-conversation-list-item{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-conversation-list-item-h,.ds-chrome-column.sc-ds-conversation-list-item{flex-direction:column}.ds-chrome-grid.sc-ds-conversation-list-item-h,.ds-chrome-grid.sc-ds-conversation-list-item{display:grid;align-items:center}.ds-control-frame.sc-ds-conversation-list-item{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-conversation-list-item{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-conversation-list-item{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-empty-region.sc-ds-conversation-list-item{display:flex;flex:1 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:0}.ds-empty-region--padded.sc-ds-conversation-list-item{padding:var(--dimension-space-200)}.ds-choice-popup.sc-ds-conversation-list-item{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:min( var(--dimension-panel-width-lg), calc(100vw - var(--dimension-space-200)) );max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;inset:auto;margin:0;padding:0;border:0;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-conversation-list-item::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-conversation-list-item{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-conversation-list-item{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-conversation-list-item{opacity:0}}.ds-choice-list.sc-ds-conversation-list-item{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section--divided.sc-ds-conversation-list-item{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-conversation-list-item{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) );text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-item.sc-ds-conversation-list-item{width:100%;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:default;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-conversation-list-item:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item__content.sc-ds-conversation-list-item{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-conversation-list-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-conversation-list-item{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-conversation-list-item,.ds-choice-item__suffix.sc-ds-conversation-list-item{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.ds-choice-empty.sc-ds-conversation-list-item,.ds-choice-loading.sc-ds-conversation-list-item{min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-conversation-list-item{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-conversation-list-item::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-conversation-list-item{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400))}.ds-choice-footer__summary.sc-ds-conversation-list-item,.ds-choice-footer__clear.sc-ds-conversation-list-item ds-text.sc-ds-conversation-list-item{padding-inline:calc( var(--dimension-space-050) + var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-choice-footer__clear.sc-ds-conversation-list-item{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-bold-brand);cursor:default}.ds-choice-footer__clear.sc-ds-conversation-list-item:hover{text-decoration:underline;text-decoration-color:var(--color-foreground-tertiary)}.ds-visually-hidden.sc-ds-conversation-list-item-h,.ds-visually-hidden.sc-ds-conversation-list-item{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.ds-control-elevation.sc-ds-conversation-list-item{position:relative;overflow:visible;box-shadow:var(--ds-control-elevation-shadow, none)}.ds-control-elevation.sc-ds-conversation-list-item::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--ds-control-elevation-highlight, none);pointer-events:none}.ds-control-elevation--sm.sc-ds-conversation-list-item{--ds-control-elevation-shadow:var(--effect-shadow-elevated-sm);--ds-control-elevation-highlight:var(--effect-highlight-elevated-sm)}.ds-control-elevation--md.sc-ds-conversation-list-item{--ds-control-elevation-shadow:var(--effect-shadow-elevated-md);--ds-control-elevation-highlight:var(--effect-highlight-elevated-md)}.ds-control-elevation--floating.sc-ds-conversation-list-item{--ds-control-elevation-shadow:var(--effect-shadow-elevated-floating);--ds-control-elevation-highlight:var(--effect-highlight-elevated-floating)}.ds-control-elevation--press-scale.sc-ds-conversation-list-item{--ds-control-press-active-scale:var(--dimension-scale-default);transition:scale var(--effect-motion-short-2)}.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-conversation-list-item{scale:var(--dimension-scale-subtle)}@media (prefers-reduced-motion: reduce){.ds-control-elevation--press-scale.sc-ds-conversation-list-item,.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-conversation-list-item{scale:none;transition:none}}.sc-ds-conversation-list-item-h{display:block;box-sizing:border-box;-webkit-user-select:none;user-select:none}.sc-ds-conversation-list-item-h:hover,.sc-ds-conversation-list-item-h:focus-within,.conversation-list-item--actions-open.sc-ds-conversation-list-item-h{position:relative;z-index:var(--dimension-z-index-floating)}.conversation-list-item__row.sc-ds-conversation-list-item{position:relative;isolation:isolate}.conversation-list-item.sc-ds-conversation-list-item{color:var(--color-foreground-primary)}.conversation-list-item--error.sc-ds-conversation-list-item{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-bold-negative)}.conversation-list-item__leading.sc-ds-conversation-list-item:empty,.conversation-list-item__trailing.sc-ds-conversation-list-item:empty{display:none}.conversation-list-item__leading.sc-ds-conversation-list-item,.conversation-list-item__trailing.sc-ds-conversation-list-item,.conversation-list-item__preview-row.sc-ds-conversation-list-item{display:flex;align-items:center}.conversation-list-item__leading.sc-ds-conversation-list-item{align-self:center;width:auto;height:auto;margin-inline-start:var(--ds-control-label-inset, var(--dimension-space-025));margin-inline-end:var(--dimension-space-050)}.conversation-list-item__content.sc-ds-conversation-list-item{min-width:0}.conversation-list-item__title-row.sc-ds-conversation-list-item{display:flex;align-items:center;min-width:0}.conversation-list-item__preview-row.sc-ds-conversation-list-item{min-width:0;gap:var(--dimension-space-050)}ds-text.conversation-list-item__title.sc-ds-conversation-list-item,ds-text.conversation-list-item__preview.sc-ds-conversation-list-item{display:block;min-width:0}ds-text.conversation-list-item__title.sc-ds-conversation-list-item{flex:1}.conversation-list-item__unread.sc-ds-conversation-list-item{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-size-200);margin-inline-end:var(--dimension-space-025)}ds-text.conversation-list-item__preview.ds-choice-item__subtext.sc-ds-conversation-list-item{-webkit-line-clamp:1}.conversation-list-item__actions.sc-ds-conversation-list-item{position:absolute;top:50%;right:var(--dimension-space-100);z-index:var(--dimension-z-index-floating);display:flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-half);background:var(--color-background-transparent);-webkit-backdrop-filter:blur(var(--effect-blur-sm));backdrop-filter:blur(var(--effect-blur-sm));opacity:0;pointer-events:none;transform:translateY(-50%)}.conversation-list-item__row.sc-ds-conversation-list-item:hover .conversation-list-item__actions.sc-ds-conversation-list-item,.conversation-list-item__row.sc-ds-conversation-list-item:has(:focus-visible) .conversation-list-item__actions.sc-ds-conversation-list-item,.conversation-list-item--actions-open.sc-ds-conversation-list-item-h .conversation-list-item__actions.sc-ds-conversation-list-item{opacity:1;pointer-events:auto}.conversation-list-item__row.sc-ds-conversation-list-item:hover .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-hover)}.conversation-list-item--actions-open.sc-ds-conversation-list-item-h .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-hover)}.conversation-list-item__row.sc-ds-conversation-list-item:active .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-pressed)}@media (hover: none){.conversation-list-item__actions.sc-ds-conversation-list-item{opacity:1;pointer-events:auto}.conversation-list-item--has-actions.sc-ds-conversation-list-item-h .conversation-list-item__title-row.sc-ds-conversation-list-item{padding-inline-end:var(--dimension-size-400)}}`;const l=i(class i extends s{constructor(i){super();if(i!==false){this.__registerHost()}this.dsSelect=e(this,"dsSelect");this.conversationId="";this.conversationTitle="";this.preview="";this.updatedAt="";this.selected=false;this.state="default";this.statusLabel="";this.unreadCount=0;this.actionsOpen=false;this.handleClick=()=>this.dsSelect.emit({id:this.conversationId});this.handleActionsSlotChange=i=>{const s=i.target;this.el.classList.toggle("conversation-list-item--has-actions",s.assignedElements().length>0)}}render(){const i=this.state==="busy";const s=i&&this.statusLabel?this.statusLabel:this.preview;const e=[this.conversationTitle,s,this.unreadCount>0?`${this.unreadCount} unread`:""].filter(Boolean).join(". ");return t(o,{key:"c6cace7654ee7722d2bf89d25102ad1d3d140815",role:"listitem",class:{"conversation-list-item--actions-open":this.actionsOpen}},t("div",{key:"d929afe75f9f8ca5e0222cc5f94ae8fc9095c8d2",class:"conversation-list-item__row"},t("button",{key:"783331306fd9a6b1d81e5d858534780df54bf8cd",type:"button",class:{"conversation-list-item":true,"ds-choice-item":true,"ds-control-frame":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.selected,"conversation-list-item--error":this.state==="error"},"aria-label":e,"aria-current":this.selected?"true":undefined,"aria-busy":i?"true":undefined,onClick:this.handleClick},t("span",{key:"685def5c94e61e98d77ead59f00367357836617d",class:"conversation-list-item__leading ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content"},t("slot",{key:"4aa0aefaba3dcb63cb7564ab3bb33f0ebc061baf",name:"leading"})),t("span",{key:"13e279a09ff4be7a2d49f958e36d735028c5b0db",class:"conversation-list-item__content ds-choice-item__content ds-interaction-fill__content"},t("span",{key:"5e43df9ccc66a5a13157e339de3f222f6b8fabeb",class:"conversation-list-item__title-row"},t("ds-text",{key:"914292728062c5b287a0e09acbdf420a1d341fab",class:"conversation-list-item__title ds-choice-item__label ds-control-label-box",as:"span",variant:"text-body-medium",emphasis:this.unreadCount>0,color:this.unreadCount>0?"primary":"secondary",lineTruncation:1},this.conversationTitle),this.unreadCount>0?t("span",{class:"conversation-list-item__unread"},t("ds-badge",{variant:"dot",surface:"secondary",hasRing:false})):null),t("span",{key:"2daa635205652270d5838fcaea79efe59ba9935a",class:"conversation-list-item__preview-row"},i?t("ds-loader",{size:"sm",color:"secondary"}):null,t("ds-text",{key:"a00e0b9f2e6c2668cec089d93737bdfae52cba85",class:"conversation-list-item__preview ds-choice-item__subtext ds-control-label-box",as:"span",variant:"text-body-small",color:this.state==="error"?"negative":"secondary",lineTruncation:1},s)),this.updatedAt?t("time",{class:"conversation-list-item__time ds-visually-hidden",dateTime:this.updatedAt},this.updatedAt):null),t("span",{key:"733a52bc689a84b27c90008541d1eb4b14a975bc",class:"conversation-list-item__trailing ds-interaction-fill__content"},t("slot",{key:"a06a5bf1b4679922f4652133951fe1d9979ddc1b",name:"trailing"}))),t("div",{key:"a82357bfe028cf5ab92c8b072572fa0b54cdb4e8",class:"conversation-list-item__actions ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale"},t("slot",{key:"37c957779ce444095712310eb9ff7f3643cf27e6",name:"actions",onSlotchange:this.handleActionsSlotChange}))))}get el(){return this}static get style(){return d()}},[262,"ds-conversation-list-item",{conversationId:[1,"conversation-id"],conversationTitle:[1,"conversation-title"],preview:[1],updatedAt:[1,"updated-at"],selected:[4],state:[1],statusLabel:[1,"status-label"],unreadCount:[2,"unread-count"],actionsOpen:[516,"actions-open"]}]);function v(){if(typeof customElements==="undefined"){return}const i=["ds-conversation-list-item","ds-badge","ds-loader","ds-text"];i.forEach((i=>{switch(i){case"ds-conversation-list-item":if(!customElements.get(n(i))){customElements.define(n(i),l)}break;case"ds-badge":if(!customElements.get(n(i))){r()}break;case"ds-loader":if(!customElements.get(n(i))){c()}break;case"ds-text":if(!customElements.get(n(i))){a()}break}}))}v();const m=l;const h=v;export{m as DsConversationListItem,h as defineCustomElement};
|
|
1
|
+
import{p as i,H as s,c as e,h as t,a as o,t as n}from"./index.js";import{d as r}from"./p-BFRMwl93.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as a}from"./p-CPwpgUWT.js";const d=()=>`.sc-ds-conversation-list-item-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-conversation-list-item-h,.ds-focus-ring.sc-ds-conversation-list-item,.ds-focus-ring-inset.sc-ds-conversation-list-item-h,.ds-focus-ring-inset.sc-ds-conversation-list-item{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-conversation-list-item-h:focus-visible,.ds-focus-ring.sc-ds-conversation-list-item: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-conversation-list-item-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-conversation-list-item{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-conversation-list-item-h:focus-visible,.ds-focus-ring-inset.sc-ds-conversation-list-item:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-conversation-list-item-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-conversation-list-item: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-conversation-list-item-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-conversation-list-item-h,.ds-interaction-fill.sc-ds-conversation-list-item{position:relative;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-fill.sc-ds-conversation-list-item-h::before,.ds-interaction-fill.sc-ds-conversation-list-item::before,.ds-interaction-fill.sc-ds-conversation-list-item-h::after,.ds-interaction-fill.sc-ds-conversation-list-item::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-conversation-list-item-h::before,.ds-interaction-fill.sc-ds-conversation-list-item::before{z-index:1}.ds-interaction-fill.sc-ds-conversation-list-item-h::after,.ds-interaction-fill.sc-ds-conversation-list-item::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-conversation-list-item-h,.ds-interaction-fill--bordered.sc-ds-conversation-list-item{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-conversation-list-item-h::before,.ds-interaction-fill--selected.sc-ds-conversation-list-item::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-conversation-list-item-h,.ds-interaction-fill--selected.sc-ds-conversation-list-item{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-conversation-list-item-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-conversation-list-item:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-conversation-list-item-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-conversation-list-item:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-conversation-list-item-h>.ds-interaction-fill__content.sc-ds-conversation-list-item,.ds-interaction-fill.sc-ds-conversation-list-item>.ds-interaction-fill__content.sc-ds-conversation-list-item,.ds-interaction-fill__content.sc-ds-conversation-list-item{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-faint.sc-ds-conversation-list-item{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-medium.sc-ds-conversation-list-item{--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-conversation-list-item-h,.ds-interaction-fill--on-bold.sc-ds-conversation-list-item{--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-conversation-list-item-h,.ds-interaction-fill--on-strong.sc-ds-conversation-list-item{--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-conversation-list-item-h,.ds-interaction-fill--on-translucent.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-inverted.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-media.sc-ds-conversation-list-item{--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-conversation-list-item-h,.ds-interaction-fill--on-always-dark.sc-ds-conversation-list-item{--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);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-navigation.sc-ds-conversation-list-item{--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-control-inactive.sc-ds-conversation-list-item-h,.ds-control-inactive.sc-ds-conversation-list-item{opacity:0.5;pointer-events:none;cursor:not-allowed}.ds-control--lg.sc-ds-conversation-list-item,.ds-control--lg.sc-ds-conversation-list-item-h,.ds-control--md.sc-ds-conversation-list-item-h,.ds-control--md.sc-ds-conversation-list-item,.ds-control--sm.sc-ds-conversation-list-item-h,.ds-control--sm.sc-ds-conversation-list-item,.ds-control--xs.sc-ds-conversation-list-item-h,.ds-control--xs.sc-ds-conversation-list-item{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-conversation-list-item-h,.ds-control--lg.sc-ds-conversation-list-item{--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-conversation-list-item-h,.ds-control--md.sc-ds-conversation-list-item{--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-conversation-list-item-h,.ds-control--sm.sc-ds-conversation-list-item{--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-conversation-list-item-h,.ds-control--xs.sc-ds-conversation-list-item{--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-space--sm.sc-ds-conversation-list-item-h,.ds-chrome-space--sm.sc-ds-conversation-list-item{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-conversation-list-item-h,.ds-chrome-space--md.sc-ds-conversation-list-item{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-conversation-list-item-h,.ds-chrome-space--lg.sc-ds-conversation-list-item{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-conversation-list-item-h,.ds-chrome-row.sc-ds-conversation-list-item,.ds-chrome-column.sc-ds-conversation-list-item-h,.ds-chrome-column.sc-ds-conversation-list-item,.ds-chrome-grid.sc-ds-conversation-list-item-h,.ds-chrome-grid.sc-ds-conversation-list-item{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-conversation-list-item-h,.ds-chrome-row.sc-ds-conversation-list-item{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-conversation-list-item-h,.ds-chrome-column.sc-ds-conversation-list-item{flex-direction:column}.ds-chrome-grid.sc-ds-conversation-list-item-h,.ds-chrome-grid.sc-ds-conversation-list-item{display:grid;align-items:center}.ds-control-frame.sc-ds-conversation-list-item{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-conversation-list-item{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-conversation-list-item{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-empty-region.sc-ds-conversation-list-item{display:flex;flex:1 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:0}.ds-empty-region--padded.sc-ds-conversation-list-item{padding:var(--dimension-space-200)}.ds-choice-popup.sc-ds-conversation-list-item{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:min( var(--dimension-panel-width-lg), calc(100vw - var(--dimension-space-200)) );max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;inset:auto;margin:0;padding:0;border:0;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-conversation-list-item::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-conversation-list-item{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-conversation-list-item{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-conversation-list-item{opacity:0}}.ds-choice-list.sc-ds-conversation-list-item{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section--divided.sc-ds-conversation-list-item{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-conversation-list-item{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) );text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-item.sc-ds-conversation-list-item{width:100%;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:default;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-conversation-list-item:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item__content.sc-ds-conversation-list-item{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-conversation-list-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-conversation-list-item{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-conversation-list-item,.ds-choice-item__suffix.sc-ds-conversation-list-item{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.ds-choice-empty.sc-ds-conversation-list-item,.ds-choice-loading.sc-ds-conversation-list-item{min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-conversation-list-item{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-conversation-list-item::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-conversation-list-item{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400))}.ds-choice-footer__summary.sc-ds-conversation-list-item,.ds-choice-footer__clear.sc-ds-conversation-list-item ds-text.sc-ds-conversation-list-item{padding-inline:calc( var(--dimension-space-050) + var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-choice-footer__clear.sc-ds-conversation-list-item{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-bold-brand);cursor:default}.ds-choice-footer__clear.sc-ds-conversation-list-item:hover{text-decoration:underline;text-decoration-color:var(--color-foreground-tertiary)}.ds-visually-hidden.sc-ds-conversation-list-item-h,.ds-visually-hidden.sc-ds-conversation-list-item{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.ds-control-elevation.sc-ds-conversation-list-item-h,.ds-control-elevation.sc-ds-conversation-list-item{position:relative;overflow:visible;box-shadow:var(--ds-control-elevation-shadow, none)}.ds-control-elevation.sc-ds-conversation-list-item-h::after,.ds-control-elevation.sc-ds-conversation-list-item::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--ds-control-elevation-highlight, none);pointer-events:none}.ds-control-elevation--sm.sc-ds-conversation-list-item-h,.ds-control-elevation--sm.sc-ds-conversation-list-item{--ds-control-elevation-shadow:var(--effect-shadow-elevated-sm);--ds-control-elevation-highlight:var(--effect-highlight-elevated-sm)}.ds-control-elevation--md.sc-ds-conversation-list-item-h,.ds-control-elevation--md.sc-ds-conversation-list-item{--ds-control-elevation-shadow:var(--effect-shadow-elevated-md);--ds-control-elevation-highlight:var(--effect-highlight-elevated-md)}.ds-control-elevation--floating.sc-ds-conversation-list-item-h,.ds-control-elevation--floating.sc-ds-conversation-list-item{--ds-control-elevation-shadow:var(--effect-shadow-elevated-floating);--ds-control-elevation-highlight:var(--effect-highlight-elevated-floating)}.ds-control-elevation--press-scale.sc-ds-conversation-list-item{--ds-control-press-active-scale:var(--dimension-scale-default);transition:scale var(--effect-motion-short-2)}.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-conversation-list-item{scale:var(--dimension-scale-subtle)}@media (prefers-reduced-motion: reduce){.ds-control-elevation--press-scale.sc-ds-conversation-list-item,.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-conversation-list-item{scale:none;transition:none}}.sc-ds-conversation-list-item-h{display:block;box-sizing:border-box;-webkit-user-select:none;user-select:none}.sc-ds-conversation-list-item-h:hover,.sc-ds-conversation-list-item-h:focus-within,.conversation-list-item--actions-open.sc-ds-conversation-list-item-h{position:relative;z-index:var(--dimension-z-index-floating)}.conversation-list-item__row.sc-ds-conversation-list-item{position:relative;isolation:isolate}.conversation-list-item.sc-ds-conversation-list-item{color:var(--color-foreground-primary)}.conversation-list-item--error.sc-ds-conversation-list-item{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-bold-negative)}.conversation-list-item__leading.sc-ds-conversation-list-item:empty,.conversation-list-item__trailing.sc-ds-conversation-list-item:empty{display:none}.conversation-list-item__leading.sc-ds-conversation-list-item,.conversation-list-item__trailing.sc-ds-conversation-list-item,.conversation-list-item__preview-row.sc-ds-conversation-list-item{display:flex;align-items:center}.conversation-list-item__leading.sc-ds-conversation-list-item{align-self:center;width:auto;height:auto;margin-inline-start:var(--ds-control-label-inset, var(--dimension-space-025));margin-inline-end:var(--dimension-space-050)}.conversation-list-item__content.sc-ds-conversation-list-item{min-width:0}.conversation-list-item__title-row.sc-ds-conversation-list-item{display:flex;align-items:center;min-width:0}.conversation-list-item__preview-row.sc-ds-conversation-list-item{min-width:0;gap:var(--dimension-space-050)}ds-text.conversation-list-item__title.sc-ds-conversation-list-item,ds-text.conversation-list-item__preview.sc-ds-conversation-list-item{display:block;min-width:0}ds-text.conversation-list-item__title.sc-ds-conversation-list-item{flex:1}.conversation-list-item__unread.sc-ds-conversation-list-item{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-size-200);margin-inline-end:var(--dimension-space-025)}ds-text.conversation-list-item__preview.ds-choice-item__subtext.sc-ds-conversation-list-item{-webkit-line-clamp:1}.conversation-list-item__actions.sc-ds-conversation-list-item{position:absolute;top:50%;right:var(--dimension-space-100);z-index:var(--dimension-z-index-floating);display:flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-half);background:var(--color-background-transparent);-webkit-backdrop-filter:blur(var(--effect-blur-sm));backdrop-filter:blur(var(--effect-blur-sm));opacity:0;pointer-events:none;transform:translateY(-50%)}.conversation-list-item__row.sc-ds-conversation-list-item:hover .conversation-list-item__actions.sc-ds-conversation-list-item,.conversation-list-item__row.sc-ds-conversation-list-item:has(:focus-visible) .conversation-list-item__actions.sc-ds-conversation-list-item,.conversation-list-item--actions-open.sc-ds-conversation-list-item-h .conversation-list-item__actions.sc-ds-conversation-list-item{opacity:1;pointer-events:auto}.conversation-list-item__row.sc-ds-conversation-list-item:hover .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-hover)}.conversation-list-item--actions-open.sc-ds-conversation-list-item-h .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-hover)}.conversation-list-item__row.sc-ds-conversation-list-item:active .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-pressed)}@media (hover: none){.conversation-list-item__actions.sc-ds-conversation-list-item{opacity:1;pointer-events:auto}.conversation-list-item--has-actions.sc-ds-conversation-list-item-h .conversation-list-item__title-row.sc-ds-conversation-list-item{padding-inline-end:var(--dimension-size-400)}}`;const l=i(class i extends s{constructor(i){super();if(i!==false){this.__registerHost()}this.dsSelect=e(this,"dsSelect");this.conversationId="";this.conversationTitle="";this.preview="";this.updatedAt="";this.selected=false;this.state="default";this.statusLabel="";this.unreadCount=0;this.actionsOpen=false;this.handleClick=()=>this.dsSelect.emit({id:this.conversationId});this.handleActionsSlotChange=i=>{const s=i.target;this.el.classList.toggle("conversation-list-item--has-actions",s.assignedElements().length>0)}}render(){const i=this.state==="busy";const s=i&&this.statusLabel?this.statusLabel:this.preview;const e=[this.conversationTitle,s,this.unreadCount>0?`${this.unreadCount} unread`:""].filter(Boolean).join(". ");return t(o,{key:"a3d7e20f6d3ace5ce0467291738dfe3ac82b4b9f",role:"listitem",class:{"conversation-list-item--actions-open":this.actionsOpen}},t("div",{key:"fb3189294fa5cce9e78b47e888152af604ef8cee",class:"conversation-list-item__row"},t("button",{key:"b75a85b77273816bd2f13e90feb8888516441c1b",type:"button",class:{"conversation-list-item":true,"ds-choice-item":true,"ds-control-frame":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.selected,"conversation-list-item--error":this.state==="error"},"aria-label":e,"aria-current":this.selected?"true":undefined,"aria-busy":i?"true":undefined,onClick:this.handleClick},t("span",{key:"267e1abe4d3ecf8c61ac46d0716f7e88a05d0881",class:"conversation-list-item__leading ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content"},t("slot",{key:"915127870b7bcd458c13729322b67a523c79b3fb",name:"leading"})),t("span",{key:"5822bbf3caa09d78d81f0b15f7e43283c1559c19",class:"conversation-list-item__content ds-choice-item__content ds-interaction-fill__content"},t("span",{key:"a481ebd38281fcc174cd23e184a1e747c7597d42",class:"conversation-list-item__title-row"},t("ds-text",{key:"d9f8741508e668d9e0297f7a2eaa74c6cd43255e",class:"conversation-list-item__title ds-choice-item__label ds-control-label-box",as:"span",variant:"text-body-medium",emphasis:this.unreadCount>0,color:this.unreadCount>0?"primary":"secondary",lineTruncation:1},this.conversationTitle),this.unreadCount>0?t("span",{class:"conversation-list-item__unread"},t("ds-badge",{variant:"dot",surface:"secondary",hasRing:false})):null),t("span",{key:"58411b77a7e652802e359ea33469564e229804ca",class:"conversation-list-item__preview-row"},i?t("ds-loader",{size:"sm",color:"secondary"}):null,t("ds-text",{key:"e61cced10f08075a0b2c19d4428fbd7af5cd3455",class:"conversation-list-item__preview ds-choice-item__subtext ds-control-label-box",as:"span",variant:"text-body-small",color:this.state==="error"?"negative":"secondary",lineTruncation:1},s)),this.updatedAt?t("time",{class:"conversation-list-item__time ds-visually-hidden",dateTime:this.updatedAt},this.updatedAt):null),t("span",{key:"2e926369446b48a467ac7f51e0b15b25cd7d537d",class:"conversation-list-item__trailing ds-interaction-fill__content"},t("slot",{key:"dbac69b62c57fbd5c2b17da3ec284ece1247da5f",name:"trailing"}))),t("div",{key:"a2e6551b3d54a0ace3b545950501001b514d3eb5",class:"conversation-list-item__actions ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale"},t("slot",{key:"c41de4595207646bd65f1ef83d2602b202b2c354",name:"actions",onSlotchange:this.handleActionsSlotChange}))))}get el(){return this}static get style(){return d()}},[262,"ds-conversation-list-item",{conversationId:[1,"conversation-id"],conversationTitle:[1,"conversation-title"],preview:[1],updatedAt:[1,"updated-at"],selected:[4],state:[1],statusLabel:[1,"status-label"],unreadCount:[2,"unread-count"],actionsOpen:[516,"actions-open"]}]);function v(){if(typeof customElements==="undefined"){return}const i=["ds-conversation-list-item","ds-badge","ds-loader","ds-text"];i.forEach((i=>{switch(i){case"ds-conversation-list-item":if(!customElements.get(n(i))){customElements.define(n(i),l)}break;case"ds-badge":if(!customElements.get(n(i))){r()}break;case"ds-loader":if(!customElements.get(n(i))){c()}break;case"ds-text":if(!customElements.get(n(i))){a()}break}}))}v();const m=l;const h=v;export{m as DsConversationListItem,h as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-conversation-list-item.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["conversationListItemCss","ConversationListItem","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","conversationId","conversationTitle","preview","updatedAt","selected","state","statusLabel","unreadCount","actionsOpen","handleClick","dsSelect","emit","id","handleActionsSlotChange","event","slot","target","el","classList","toggle","assignedElements","length","render","busy","subtext","accessibleName","filter","Boolean","join","h","Host","key","role","class","type","undefined","onClick","name","as","variant","emphasis","color","lineTruncation","surface","hasRing","size","dateTime","onSlotchange"],"sources":["src/wc/components/ConversationListItem/ConversationListItem.css?tag=ds-conversation-list-item&encapsulation=scoped","src/wc/components/ConversationListItem/ConversationListItem.tsx"],"sourcesContent":["@import '../../utils/choice-list.css';\n@import '../../utils/visually-hidden.css';\n@import '../../styles/control-elevation.css';\n\n:host {\n display: block;\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n}\n\n:host(:hover),\n:host(:focus-within),\n:host(.conversation-list-item--actions-open) {\n position: relative;\n z-index: var(--dimension-z-index-floating);\n}\n\n.conversation-list-item__row {\n position: relative;\n isolation: isolate;\n}\n\n.conversation-list-item {\n color: var(--color-foreground-primary);\n}\n\n.conversation-list-item--error {\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.conversation-list-item__leading:empty,\n.conversation-list-item__trailing:empty {\n display: none;\n}\n\n.conversation-list-item__leading,\n.conversation-list-item__trailing,\n.conversation-list-item__preview-row {\n display: flex;\n align-items: center;\n}\n\n.conversation-list-item__leading {\n align-self: center;\n width: auto;\n height: auto;\n margin-inline-start: var(--ds-control-label-inset, var(--dimension-space-025));\n margin-inline-end: var(--dimension-space-050);\n}\n\n.conversation-list-item__content {\n min-width: 0;\n}\n\n.conversation-list-item__title-row {\n display: flex;\n align-items: center;\n min-width: 0;\n}\n\n.conversation-list-item__preview-row {\n min-width: 0;\n gap: var(--dimension-space-050);\n}\n\nds-text.conversation-list-item__title,\nds-text.conversation-list-item__preview {\n display: block;\n min-width: 0;\n}\n\nds-text.conversation-list-item__title {\n flex: 1;\n}\n\n.conversation-list-item__unread {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--dimension-size-200);\n margin-inline-end: var(--dimension-space-025);\n}\n\nds-text.conversation-list-item__preview.ds-choice-item__subtext {\n -webkit-line-clamp: 1;\n}\n\n.conversation-list-item__actions {\n position: absolute;\n top: 50%;\n right: var(--dimension-space-100);\n z-index: var(--dimension-z-index-floating);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--dimension-radius-half);\n background: var(--color-background-transparent);\n -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n backdrop-filter: blur(var(--effect-blur-sm));\n opacity: 0;\n pointer-events: none;\n transform: translateY(-50%);\n}\n\n.conversation-list-item__row:hover .conversation-list-item__actions,\n.conversation-list-item__row:has(:focus-visible) .conversation-list-item__actions,\n:host(.conversation-list-item--actions-open) .conversation-list-item__actions {\n opacity: 1;\n pointer-events: auto;\n}\n\n/* Keep the row wash continuous while the pointer moves onto its sibling action. */\n.conversation-list-item__row:hover .conversation-list-item::after {\n background: var(--ds-interaction-hover);\n}\n\n:host(.conversation-list-item--actions-open) .conversation-list-item::after {\n background: var(--ds-interaction-hover);\n}\n\n.conversation-list-item__row:active .conversation-list-item::after {\n background: var(--ds-interaction-pressed);\n}\n\n@media (hover: none) {\n .conversation-list-item__actions {\n opacity: 1;\n pointer-events: auto;\n }\n\n :host(.conversation-list-item--has-actions) .conversation-list-item__title-row {\n padding-inline-end: var(--dimension-size-400);\n }\n}\n\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { ConversationItemState } from '../conversation-types';\n\n@Component({\n tag: 'ds-conversation-list-item',\n styleUrl: 'ConversationListItem.css',\n scoped: true,\n})\nexport class ConversationListItem {\n @Element() el!: HTMLElement;\n\n @Prop() conversationId: string = '';\n /** Visible conversation title. Named to avoid the native HTMLElement.title contract. */\n @Prop() conversationTitle: string = '';\n @Prop() preview: string = '';\n /** ISO timestamp for semantic activity metadata. */\n @Prop() updatedAt: string = '';\n @Prop() selected: boolean = false;\n @Prop() state: ConversationItemState = 'default';\n @Prop() statusLabel: string = '';\n @Prop() unreadCount: number = 0;\n /** Keep the contextual-actions surface visible while its popup is open or closing. */\n @Prop({ reflect: true }) actionsOpen: boolean = false;\n\n @Event() dsSelect!: EventEmitter<{ id: string }>;\n\n private handleClick = () => this.dsSelect.emit({ id: this.conversationId });\n\n private handleActionsSlotChange = (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n this.el.classList.toggle(\n 'conversation-list-item--has-actions',\n slot.assignedElements().length > 0\n );\n };\n\n render() {\n const busy = this.state === 'busy';\n const subtext = busy && this.statusLabel ? this.statusLabel : this.preview;\n const accessibleName = [\n this.conversationTitle,\n subtext,\n this.unreadCount > 0 ? `${this.unreadCount} unread` : '',\n ]\n .filter(Boolean)\n .join('. ');\n\n return (\n <Host\n role=\"listitem\"\n class={{ 'conversation-list-item--actions-open': this.actionsOpen }}\n >\n <div class=\"conversation-list-item__row\">\n <button\n type=\"button\"\n class={{\n 'conversation-list-item': true,\n 'ds-choice-item': true,\n 'ds-control-frame': true,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n 'ds-interaction-fill--selected': this.selected,\n 'conversation-list-item--error': this.state === 'error',\n }}\n aria-label={accessibleName}\n aria-current={this.selected ? 'true' : undefined}\n aria-busy={busy ? 'true' : undefined}\n onClick={this.handleClick}\n >\n <span class=\"conversation-list-item__leading ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\">\n <slot name=\"leading\" />\n </span>\n <span class=\"conversation-list-item__content ds-choice-item__content ds-interaction-fill__content\">\n <span class=\"conversation-list-item__title-row\">\n <ds-text\n class=\"conversation-list-item__title ds-choice-item__label ds-control-label-box\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis={this.unreadCount > 0}\n color={this.unreadCount > 0 ? 'primary' : 'secondary'}\n lineTruncation={1}\n >\n {this.conversationTitle}\n </ds-text>\n {this.unreadCount > 0 ? (\n <span class=\"conversation-list-item__unread\">\n <ds-badge variant=\"dot\" surface=\"secondary\" hasRing={false} />\n </span>\n ) : null}\n </span>\n <span class=\"conversation-list-item__preview-row\">\n {busy ? <ds-loader size=\"sm\" color=\"secondary\" /> : null}\n <ds-text\n class=\"conversation-list-item__preview ds-choice-item__subtext ds-control-label-box\"\n as=\"span\"\n variant=\"text-body-small\"\n color={this.state === 'error' ? 'negative' : 'secondary'}\n lineTruncation={1}\n >\n {subtext}\n </ds-text>\n </span>\n {this.updatedAt ? (\n <time class=\"conversation-list-item__time ds-visually-hidden\" dateTime={this.updatedAt}>\n {this.updatedAt}\n </time>\n ) : null}\n </span>\n <span class=\"conversation-list-item__trailing ds-interaction-fill__content\">\n <slot name=\"trailing\" />\n </span>\n </button>\n <div class=\"conversation-list-item__actions ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale\">\n <slot name=\"actions\" onSlotchange={this.handleActionsSlotChange} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"8KAAA,MAAMA,EAA0B,IAAM,kgrB,MCQzBC,EAAoBC,EAAA,MAAAD,UAAAE,EALjC,WAAAC,CAAAC,G,6EAQUC,KAAAC,eAAyB,GAEzBD,KAAAE,kBAA4B,GAC5BF,KAAAG,QAAkB,GAElBH,KAAAI,UAAoB,GACpBJ,KAAAK,SAAoB,MACpBL,KAAAM,MAA+B,UAC/BN,KAAAO,YAAsB,GACtBP,KAAAQ,YAAsB,EAELR,KAAAS,YAAuB,MAIxCT,KAAAU,YAAc,IAAMV,KAAKW,SAASC,KAAK,CAAEC,GAAIb,KAAKC,iBAElDD,KAAAc,wBAA2BC,IACjC,MAAMC,EAAOD,EAAME,OACnBjB,KAAKkB,GAAGC,UAAUC,OAChB,sCACAJ,EAAKK,mBAAmBC,OAAS,EAClC,CAuFJ,CApFC,MAAAC,GACE,MAAMC,EAAOxB,KAAKM,QAAU,OAC5B,MAAMmB,EAAUD,GAAQxB,KAAKO,YAAcP,KAAKO,YAAcP,KAAKG,QACnE,MAAMuB,EAAiB,CACrB1B,KAAKE,kBACLuB,EACAzB,KAAKQ,YAAc,EAAI,GAAGR,KAAKQ,qBAAuB,IAErDmB,OAAOC,SACPC,KAAK,MAER,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WACLC,MAAO,CAAE,uCAAwClC,KAAKS,cAEtDqB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,+BACTJ,EAAA,UAAAE,IAAA,2CACEG,KAAK,SACLD,MAAO,CACL,yBAA0B,KAC1B,iBAAkB,KAClB,mBAAoB,KACpB,iBAAkB,KAClB,sBAAuB,KACvB,sBAAuB,KACvB,gCAAiClC,KAAKK,SACtC,gCAAiCL,KAAKM,QAAU,SACjD,aACWoB,EAAc,eACZ1B,KAAKK,SAAW,OAAS+B,UAAS,YACrCZ,EAAO,OAASY,UAC3BC,QAASrC,KAAKU,aAEdoB,EAAA,QAAAE,IAAA,2CAAME,MAAM,yGACVJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,aAEbR,EAAA,QAAAE,IAAA,2CAAME,MAAM,wFACVJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,qCACVJ,EAAA,WAAAE,IAAA,2CACEE,MAAM,2EACNK,GAAG,OACHC,QAAQ,mBACRC,SAAUzC,KAAKQ,YAAc,EAC7BkC,MAAO1C,KAAKQ,YAAc,EAAI,UAAY,YAC1CmC,eAAgB,GAEf3C,KAAKE,mBAEPF,KAAKQ,YAAc,EAClBsB,EAAA,QAAMI,MAAM,kCACVJ,EAAA,YAAUU,QAAQ,MAAMI,QAAQ,YAAYC,QAAS,SAErD,MAENf,EAAA,QAAAE,IAAA,2CAAME,MAAM,uCACTV,EAAOM,EAAA,aAAWgB,KAAK,KAAKJ,MAAM,cAAiB,KACpDZ,EAAA,WAAAE,IAAA,2CACEE,MAAM,+EACNK,GAAG,OACHC,QAAQ,kBACRE,MAAO1C,KAAKM,QAAU,QAAU,WAAa,YAC7CqC,eAAgB,GAEflB,IAGJzB,KAAKI,UACJ0B,EAAA,QAAMI,MAAM,kDAAkDa,SAAU/C,KAAKI,WAC1EJ,KAAKI,WAEN,MAEN0B,EAAA,QAAAE,IAAA,2CAAME,MAAM,iEACVJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,eAGfR,EAAA,OAAAE,IAAA,2CAAKE,MAAM,mHACTJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,UAAUU,aAAchD,KAAKc,4B","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["conversationListItemCss","ConversationListItem","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","conversationId","conversationTitle","preview","updatedAt","selected","state","statusLabel","unreadCount","actionsOpen","handleClick","dsSelect","emit","id","handleActionsSlotChange","event","slot","target","el","classList","toggle","assignedElements","length","render","busy","subtext","accessibleName","filter","Boolean","join","h","Host","key","role","class","type","undefined","onClick","name","as","variant","emphasis","color","lineTruncation","surface","hasRing","size","dateTime","onSlotchange"],"sources":["src/wc/components/ConversationListItem/ConversationListItem.css?tag=ds-conversation-list-item&encapsulation=scoped","src/wc/components/ConversationListItem/ConversationListItem.tsx"],"sourcesContent":["@import '../../utils/choice-list.css';\n@import '../../utils/visually-hidden.css';\n@import '../../styles/control-elevation.css';\n\n:host {\n display: block;\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n}\n\n:host(:hover),\n:host(:focus-within),\n:host(.conversation-list-item--actions-open) {\n position: relative;\n z-index: var(--dimension-z-index-floating);\n}\n\n.conversation-list-item__row {\n position: relative;\n isolation: isolate;\n}\n\n.conversation-list-item {\n color: var(--color-foreground-primary);\n}\n\n.conversation-list-item--error {\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.conversation-list-item__leading:empty,\n.conversation-list-item__trailing:empty {\n display: none;\n}\n\n.conversation-list-item__leading,\n.conversation-list-item__trailing,\n.conversation-list-item__preview-row {\n display: flex;\n align-items: center;\n}\n\n.conversation-list-item__leading {\n align-self: center;\n width: auto;\n height: auto;\n margin-inline-start: var(--ds-control-label-inset, var(--dimension-space-025));\n margin-inline-end: var(--dimension-space-050);\n}\n\n.conversation-list-item__content {\n min-width: 0;\n}\n\n.conversation-list-item__title-row {\n display: flex;\n align-items: center;\n min-width: 0;\n}\n\n.conversation-list-item__preview-row {\n min-width: 0;\n gap: var(--dimension-space-050);\n}\n\nds-text.conversation-list-item__title,\nds-text.conversation-list-item__preview {\n display: block;\n min-width: 0;\n}\n\nds-text.conversation-list-item__title {\n flex: 1;\n}\n\n.conversation-list-item__unread {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--dimension-size-200);\n margin-inline-end: var(--dimension-space-025);\n}\n\nds-text.conversation-list-item__preview.ds-choice-item__subtext {\n -webkit-line-clamp: 1;\n}\n\n.conversation-list-item__actions {\n position: absolute;\n top: 50%;\n right: var(--dimension-space-100);\n z-index: var(--dimension-z-index-floating);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--dimension-radius-half);\n background: var(--color-background-transparent);\n -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n backdrop-filter: blur(var(--effect-blur-sm));\n opacity: 0;\n pointer-events: none;\n transform: translateY(-50%);\n}\n\n.conversation-list-item__row:hover .conversation-list-item__actions,\n.conversation-list-item__row:has(:focus-visible) .conversation-list-item__actions,\n:host(.conversation-list-item--actions-open) .conversation-list-item__actions {\n opacity: 1;\n pointer-events: auto;\n}\n\n/* Keep the row wash continuous while the pointer moves onto its sibling action. */\n.conversation-list-item__row:hover .conversation-list-item::after {\n background: var(--ds-interaction-hover);\n}\n\n:host(.conversation-list-item--actions-open) .conversation-list-item::after {\n background: var(--ds-interaction-hover);\n}\n\n.conversation-list-item__row:active .conversation-list-item::after {\n background: var(--ds-interaction-pressed);\n}\n\n@media (hover: none) {\n .conversation-list-item__actions {\n opacity: 1;\n pointer-events: auto;\n }\n\n :host(.conversation-list-item--has-actions) .conversation-list-item__title-row {\n padding-inline-end: var(--dimension-size-400);\n }\n}\n\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { ConversationItemState } from '../conversation-types';\n\n@Component({\n tag: 'ds-conversation-list-item',\n styleUrl: 'ConversationListItem.css',\n scoped: true,\n})\nexport class ConversationListItem {\n @Element() el!: HTMLElement;\n\n @Prop() conversationId: string = '';\n /** Visible conversation title. Named to avoid the native HTMLElement.title contract. */\n @Prop() conversationTitle: string = '';\n @Prop() preview: string = '';\n /** ISO timestamp for semantic activity metadata. */\n @Prop() updatedAt: string = '';\n @Prop() selected: boolean = false;\n @Prop() state: ConversationItemState = 'default';\n @Prop() statusLabel: string = '';\n @Prop() unreadCount: number = 0;\n /** Keep the contextual-actions surface visible while its popup is open or closing. */\n @Prop({ reflect: true }) actionsOpen: boolean = false;\n\n @Event() dsSelect!: EventEmitter<{ id: string }>;\n\n private handleClick = () => this.dsSelect.emit({ id: this.conversationId });\n\n private handleActionsSlotChange = (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n this.el.classList.toggle(\n 'conversation-list-item--has-actions',\n slot.assignedElements().length > 0\n );\n };\n\n render() {\n const busy = this.state === 'busy';\n const subtext = busy && this.statusLabel ? this.statusLabel : this.preview;\n const accessibleName = [\n this.conversationTitle,\n subtext,\n this.unreadCount > 0 ? `${this.unreadCount} unread` : '',\n ]\n .filter(Boolean)\n .join('. ');\n\n return (\n <Host\n role=\"listitem\"\n class={{ 'conversation-list-item--actions-open': this.actionsOpen }}\n >\n <div class=\"conversation-list-item__row\">\n <button\n type=\"button\"\n class={{\n 'conversation-list-item': true,\n 'ds-choice-item': true,\n 'ds-control-frame': true,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n 'ds-interaction-fill--selected': this.selected,\n 'conversation-list-item--error': this.state === 'error',\n }}\n aria-label={accessibleName}\n aria-current={this.selected ? 'true' : undefined}\n aria-busy={busy ? 'true' : undefined}\n onClick={this.handleClick}\n >\n <span class=\"conversation-list-item__leading ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content\">\n <slot name=\"leading\" />\n </span>\n <span class=\"conversation-list-item__content ds-choice-item__content ds-interaction-fill__content\">\n <span class=\"conversation-list-item__title-row\">\n <ds-text\n class=\"conversation-list-item__title ds-choice-item__label ds-control-label-box\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis={this.unreadCount > 0}\n color={this.unreadCount > 0 ? 'primary' : 'secondary'}\n lineTruncation={1}\n >\n {this.conversationTitle}\n </ds-text>\n {this.unreadCount > 0 ? (\n <span class=\"conversation-list-item__unread\">\n <ds-badge variant=\"dot\" surface=\"secondary\" hasRing={false} />\n </span>\n ) : null}\n </span>\n <span class=\"conversation-list-item__preview-row\">\n {busy ? <ds-loader size=\"sm\" color=\"secondary\" /> : null}\n <ds-text\n class=\"conversation-list-item__preview ds-choice-item__subtext ds-control-label-box\"\n as=\"span\"\n variant=\"text-body-small\"\n color={this.state === 'error' ? 'negative' : 'secondary'}\n lineTruncation={1}\n >\n {subtext}\n </ds-text>\n </span>\n {this.updatedAt ? (\n <time class=\"conversation-list-item__time ds-visually-hidden\" dateTime={this.updatedAt}>\n {this.updatedAt}\n </time>\n ) : null}\n </span>\n <span class=\"conversation-list-item__trailing ds-interaction-fill__content\">\n <slot name=\"trailing\" />\n </span>\n </button>\n <div class=\"conversation-list-item__actions ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale\">\n <slot name=\"actions\" onSlotchange={this.handleActionsSlotChange} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"8KAAA,MAAMA,EAA0B,IAAM,oyrB,MCQzBC,EAAoBC,EAAA,MAAAD,UAAAE,EALjC,WAAAC,CAAAC,G,6EAQUC,KAAAC,eAAyB,GAEzBD,KAAAE,kBAA4B,GAC5BF,KAAAG,QAAkB,GAElBH,KAAAI,UAAoB,GACpBJ,KAAAK,SAAoB,MACpBL,KAAAM,MAA+B,UAC/BN,KAAAO,YAAsB,GACtBP,KAAAQ,YAAsB,EAELR,KAAAS,YAAuB,MAIxCT,KAAAU,YAAc,IAAMV,KAAKW,SAASC,KAAK,CAAEC,GAAIb,KAAKC,iBAElDD,KAAAc,wBAA2BC,IACjC,MAAMC,EAAOD,EAAME,OACnBjB,KAAKkB,GAAGC,UAAUC,OAChB,sCACAJ,EAAKK,mBAAmBC,OAAS,EAClC,CAuFJ,CApFC,MAAAC,GACE,MAAMC,EAAOxB,KAAKM,QAAU,OAC5B,MAAMmB,EAAUD,GAAQxB,KAAKO,YAAcP,KAAKO,YAAcP,KAAKG,QACnE,MAAMuB,EAAiB,CACrB1B,KAAKE,kBACLuB,EACAzB,KAAKQ,YAAc,EAAI,GAAGR,KAAKQ,qBAAuB,IAErDmB,OAAOC,SACPC,KAAK,MAER,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WACLC,MAAO,CAAE,uCAAwClC,KAAKS,cAEtDqB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,+BACTJ,EAAA,UAAAE,IAAA,2CACEG,KAAK,SACLD,MAAO,CACL,yBAA0B,KAC1B,iBAAkB,KAClB,mBAAoB,KACpB,iBAAkB,KAClB,sBAAuB,KACvB,sBAAuB,KACvB,gCAAiClC,KAAKK,SACtC,gCAAiCL,KAAKM,QAAU,SACjD,aACWoB,EAAc,eACZ1B,KAAKK,SAAW,OAAS+B,UAAS,YACrCZ,EAAO,OAASY,UAC3BC,QAASrC,KAAKU,aAEdoB,EAAA,QAAAE,IAAA,2CAAME,MAAM,yGACVJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,aAEbR,EAAA,QAAAE,IAAA,2CAAME,MAAM,wFACVJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,qCACVJ,EAAA,WAAAE,IAAA,2CACEE,MAAM,2EACNK,GAAG,OACHC,QAAQ,mBACRC,SAAUzC,KAAKQ,YAAc,EAC7BkC,MAAO1C,KAAKQ,YAAc,EAAI,UAAY,YAC1CmC,eAAgB,GAEf3C,KAAKE,mBAEPF,KAAKQ,YAAc,EAClBsB,EAAA,QAAMI,MAAM,kCACVJ,EAAA,YAAUU,QAAQ,MAAMI,QAAQ,YAAYC,QAAS,SAErD,MAENf,EAAA,QAAAE,IAAA,2CAAME,MAAM,uCACTV,EAAOM,EAAA,aAAWgB,KAAK,KAAKJ,MAAM,cAAiB,KACpDZ,EAAA,WAAAE,IAAA,2CACEE,MAAM,+EACNK,GAAG,OACHC,QAAQ,kBACRE,MAAO1C,KAAKM,QAAU,QAAU,WAAa,YAC7CqC,eAAgB,GAEflB,IAGJzB,KAAKI,UACJ0B,EAAA,QAAMI,MAAM,kDAAkDa,SAAU/C,KAAKI,WAC1EJ,KAAKI,WAEN,MAEN0B,EAAA,QAAAE,IAAA,2CAAME,MAAM,iEACVJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,eAGfR,EAAA,OAAAE,IAAA,2CAAKE,MAAM,mHACTJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,UAAUU,aAAchD,KAAKc,4B","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as e,h as t,a as i,t as n}from"./index.js";import{d as
|
|
1
|
+
import{p as s,H as e,h as t,a as i,t as n}from"./index.js";import{d as c}from"./p-CPwpgUWT.js";const o=()=>`.sc-ds-conversation-list-section-h{display:block;box-sizing:border-box;-webkit-user-select:none;user-select:none}.sc-ds-conversation-list-section-h:not(:first-child){margin-top:var(--dimension-space-200)}.conversation-list-section.sc-ds-conversation-list-section{display:flex;flex-direction:column;gap:var(--dimension-space-050)}ds-text.conversation-list-section__heading.sc-ds-conversation-list-section{display:block;padding:var(--dimension-space-050) var(--dimension-space-100)}.conversation-list-section__items.sc-ds-conversation-list-section{display:flex;flex-direction:column;gap:var(--dimension-space-050)}`;let a=0;const d=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.heading="";this.sectionId="";this.generatedId=`ds-conversation-section-${++a}`}render(){const s=this.sectionId||this.generatedId;return t(i,{key:"1da60450c596ad7986ce8e8b4d3319974b1a96fa"},t("section",{key:"05599dfc942e0ebb27376247d76a49f069027e2f",class:"conversation-list-section","aria-labelledby":s},t("ds-text",{key:"9390be4028160b7d956cdd23008f126735c74c0d",class:"conversation-list-section__heading",textId:s,as:"h3",variant:"text-caption",emphasis:true,color:"secondary"},this.heading),t("div",{key:"862aa4629c0eb275b9ae1c3c8559a402cc1c4e5b",class:"conversation-list-section__items",role:"list"},t("slot",{key:"c94a58dc5f98b7fc32e2666d17cf39d786e63f33"}))))}static get style(){return o()}},[262,"ds-conversation-list-section",{heading:[1],sectionId:[1,"section-id"]}]);function r(){if(typeof customElements==="undefined"){return}const s=["ds-conversation-list-section","ds-text"];s.forEach((s=>{switch(s){case"ds-conversation-list-section":if(!customElements.get(n(s))){customElements.define(n(s),d)}break;case"ds-text":if(!customElements.get(n(s))){c()}break}}))}r();const l=d;const f=r;export{l as DsConversationListSection,f as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-conversation-list-section.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,h as t,a as o,t as a}from"./index.js";import{S as r}from"./p-CY19gMiz.js";const i=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-conversation-list{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient( to bottom, transparent 0, #000 var(--ds-scroll-edge-fade-top), #000 calc(100% - var(--ds-scroll-edge-fade-bottom)), transparent 100% );--ds-scroll-edge-fade-inline-mask:linear-gradient( to right, transparent 0, #000 var(--ds-scroll-edge-fade-left), #000 calc(100% - var(--ds-scroll-edge-fade-right)), transparent 100% );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-conversation-list{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-conversation-list{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-conversation-list{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-conversation-list{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-conversation-list{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom, ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%, 0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-conversation-list{animation:none}}}.scroll-edge-fade--at-end.sc-ds-conversation-list,.scroll-edge-fade--hidden.sc-ds-conversation-list{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-conversation-list{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const l=()=>`.ds-control-elevation.sc-ds-conversation-list{position:relative;overflow:visible;box-shadow:var(--ds-control-elevation-shadow, none)}.ds-control-elevation.sc-ds-conversation-list::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--ds-control-elevation-highlight, none);pointer-events:none}.ds-control-elevation--sm.sc-ds-conversation-list{--ds-control-elevation-shadow:var(--effect-shadow-elevated-sm);--ds-control-elevation-highlight:var(--effect-highlight-elevated-sm)}.ds-control-elevation--md.sc-ds-conversation-list{--ds-control-elevation-shadow:var(--effect-shadow-elevated-md);--ds-control-elevation-highlight:var(--effect-highlight-elevated-md)}.ds-control-elevation--floating.sc-ds-conversation-list{--ds-control-elevation-shadow:var(--effect-shadow-elevated-floating);--ds-control-elevation-highlight:var(--effect-highlight-elevated-floating)}.ds-control-elevation--press-scale.sc-ds-conversation-list{--ds-control-press-active-scale:var(--dimension-scale-default);transition:scale var(--effect-motion-short-2)}.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-conversation-list{scale:var(--dimension-scale-subtle)}@media (prefers-reduced-motion: reduce){.ds-control-elevation--press-scale.sc-ds-conversation-list,.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-conversation-list{scale:none;transition:none}}.sc-ds-conversation-list-h{display:block;position:relative;width:100%;height:100%;min-height:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.conversation-list.sc-ds-conversation-list{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;box-sizing:border-box}.conversation-list__viewport.sc-ds-conversation-list{position:relative;flex:1 1 auto;min-height:0;overflow:auto;box-sizing:border-box}.conversation-list__content.sc-ds-conversation-list{position:relative;min-height:100%;padding:var(--dimension-space-100);padding-bottom:calc( var(--dimension-space-100) + var(--ds-scroll-overlay-block-size, 0px) );box-sizing:border-box}.conversation-list__fade.sc-ds-conversation-list{position:absolute;right:0;bottom:0;left:0;z-index:1;height:var(--ds-scroll-overlay-fade-block-size, 0);pointer-events:none;background-color:var( --ds-scroll-overlay-surface-color, var(--_shell-chrome-bg, var(--color-background-primary)) );--ds-scroll-edge-fade-size:100%}.conversation-list__fade.sc-ds-conversation-list::before{content:'';position:absolute;inset:0;background-image:var( --ds-scroll-overlay-surface-image, var(--ds-shell-gradient-image, none) );background-position:var(--ds-scroll-overlay-surface-position, 0 0);background-attachment:fixed;background-size:var( --ds-scroll-overlay-surface-size, var(--ds-shell-gradient-size, auto) );background-repeat:no-repeat;opacity:var( --ds-scroll-overlay-surface-image-opacity, var(--ds-shell-gradient-opacity, 1) )}.conversation-list__empty.sc-ds-conversation-list{display:contents}.conversation-list__actions.sc-ds-conversation-list{position:absolute;right:0;bottom:0;z-index:var(--dimension-z-index-floating);padding:0 var(--dimension-space-200) var(--dimension-space-200) 0}.conversation-list__actions--footer.sc-ds-conversation-list{left:0;padding:0 var(--dimension-space-100) var(--dimension-space-100)}.conversation-list__actions-surface.sc-ds-conversation-list{display:flex;border-radius:var(--dimension-radius-half)}.conversation-list__actions--footer.sc-ds-conversation-list .conversation-list__actions-surface.sc-ds-conversation-list{width:100%}.conversation-list__actions-surface.sc-ds-conversation-list:empty{display:none}`;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.actionLayout="floating";this.syncEmptyStateLayout=()=>{const e=this.el.querySelector('[slot="empty"]');if(e){e.style.setProperty("position","absolute");e.style.setProperty("inset-block-start","0");e.style.setProperty("inset-inline","0");e.style.setProperty("inset-block-end","var(--ds-scroll-overlay-block-size, 0)");e.style.setProperty("height","auto");e.style.setProperty("box-sizing","border-box")}this.scrollOverlayController?.sync()}}componentDidLoad(){if(!this.viewport||!this.content||!this.overlay)return;this.scrollOverlayController=new r({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay,overlayContentSelector:'[slot="actions"]'});this.scrollOverlayController.connect();this.syncEmptyStateLayout();this.emptySlotObserver=new MutationObserver(this.syncEmptyStateLayout);this.emptySlotObserver.observe(this.el,{childList:true,subtree:true})}disconnectedCallback(){this.scrollOverlayController?.disconnect();this.emptySlotObserver?.disconnect()}render(){return t(o,{key:"7e6366e7d7526da6864c1ad872c8c9be19ca1554"},t("div",{key:"701840b493d07e36930fa5c923428f06c17100bf",class:"conversation-list"},t("div",{key:"d1bcbe57f8102f002d167bae12aca086b2eeb7c8",class:"conversation-list__viewport",ref:e=>{this.viewport=e},onScroll:()=>this.scrollOverlayController?.sync()},t("div",{key:"f7132e4126f5c467f61127a02eb7bc936185f8ee",class:"conversation-list__content",ref:e=>{this.content=e}},t("slot",{key:"4591e2cd2ea034566c76db18f661027c1eadcb2a"}),t("div",{key:"7487e4e663d1316e317343d4940db0104929b9aa",class:"conversation-list__empty"},t("slot",{key:"ed11cd90da3ae44473633a7ad964e3548f5c5a6c",name:"empty"})))),t("div",{key:"14b51099a615fcf4f032b0617fe31ae5c63219bf",class:"conversation-list__fade scroll-edge-fade scroll-edge-fade--top","aria-hidden":"true"}),t("div",{key:"d8c7297ea9ff7d57b7c6e4b10bb4e5b74aec482d",class:{"conversation-list__actions":true,"conversation-list__actions--footer":this.actionLayout==="footer"},ref:e=>{this.overlay=e}},t("div",{key:"34e07be57e205f8aac395d6348ee8a62221b9cf2",class:"conversation-list__actions-surface ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale"},t("slot",{key:"1ac0ab6d2c5fbae38d580b3e20650cf3abc1e182",name:"actions"})))))}get el(){return this}static get style(){return i()+l()}},[262,"ds-conversation-list",{actionLayout:[1,"action-layout"]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-conversation-list"];e.forEach((e=>{switch(e){case"ds-conversation-list":if(!customElements.get(a(e))){customElements.define(a(e),d)}break}}))}n();const c=d;const f=n;export{c as DsConversationList,f as defineCustomElement};
|
|
1
|
+
import{p as e,H as s,h as t,a as o,t as a}from"./index.js";import{S as i}from"./p-CY19gMiz.js";const l=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-conversation-list{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient( to bottom, transparent 0, #000 var(--ds-scroll-edge-fade-top), #000 calc(100% - var(--ds-scroll-edge-fade-bottom)), transparent 100% );--ds-scroll-edge-fade-inline-mask:linear-gradient( to right, transparent 0, #000 var(--ds-scroll-edge-fade-left), #000 calc(100% - var(--ds-scroll-edge-fade-right)), transparent 100% );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-conversation-list{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-conversation-list{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-conversation-list{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-conversation-list{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-conversation-list{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom, ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%, 0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-conversation-list{animation:none}}}.scroll-edge-fade--at-end.sc-ds-conversation-list,.scroll-edge-fade--hidden.sc-ds-conversation-list{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-conversation-list{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const r=()=>`.ds-control-elevation.sc-ds-conversation-list-h,.ds-control-elevation.sc-ds-conversation-list{position:relative;overflow:visible;box-shadow:var(--ds-control-elevation-shadow, none)}.ds-control-elevation.sc-ds-conversation-list-h::after,.ds-control-elevation.sc-ds-conversation-list::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--ds-control-elevation-highlight, none);pointer-events:none}.ds-control-elevation--sm.sc-ds-conversation-list-h,.ds-control-elevation--sm.sc-ds-conversation-list{--ds-control-elevation-shadow:var(--effect-shadow-elevated-sm);--ds-control-elevation-highlight:var(--effect-highlight-elevated-sm)}.ds-control-elevation--md.sc-ds-conversation-list-h,.ds-control-elevation--md.sc-ds-conversation-list{--ds-control-elevation-shadow:var(--effect-shadow-elevated-md);--ds-control-elevation-highlight:var(--effect-highlight-elevated-md)}.ds-control-elevation--floating.sc-ds-conversation-list-h,.ds-control-elevation--floating.sc-ds-conversation-list{--ds-control-elevation-shadow:var(--effect-shadow-elevated-floating);--ds-control-elevation-highlight:var(--effect-highlight-elevated-floating)}.ds-control-elevation--press-scale.sc-ds-conversation-list{--ds-control-press-active-scale:var(--dimension-scale-default);transition:scale var(--effect-motion-short-2)}.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-conversation-list{scale:var(--dimension-scale-subtle)}@media (prefers-reduced-motion: reduce){.ds-control-elevation--press-scale.sc-ds-conversation-list,.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-conversation-list{scale:none;transition:none}}.sc-ds-conversation-list-h{display:block;position:relative;width:100%;height:100%;min-height:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.conversation-list.sc-ds-conversation-list{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;box-sizing:border-box}.conversation-list__viewport.sc-ds-conversation-list{position:relative;flex:1 1 auto;min-height:0;overflow:auto;box-sizing:border-box}.conversation-list__content.sc-ds-conversation-list{position:relative;min-height:100%;padding:var(--dimension-space-100);padding-bottom:calc( var(--dimension-space-100) + var(--ds-scroll-overlay-block-size, 0px) );box-sizing:border-box}.conversation-list__fade.sc-ds-conversation-list{position:absolute;right:0;bottom:0;left:0;z-index:1;height:var(--ds-scroll-overlay-fade-block-size, 0);pointer-events:none;background-color:var( --ds-scroll-overlay-surface-color, var(--_shell-chrome-bg, var(--color-background-primary)) );--ds-scroll-edge-fade-size:100%}.conversation-list__fade.sc-ds-conversation-list::before{content:'';position:absolute;inset:0;background-image:var( --ds-scroll-overlay-surface-image, var(--ds-shell-gradient-image, none) );background-position:var(--ds-scroll-overlay-surface-position, 0 0);background-attachment:fixed;background-size:var( --ds-scroll-overlay-surface-size, var(--ds-shell-gradient-size, auto) );background-repeat:no-repeat;opacity:var( --ds-scroll-overlay-surface-image-opacity, var(--ds-shell-gradient-opacity, 1) )}.conversation-list__empty.sc-ds-conversation-list{display:contents}.conversation-list__actions.sc-ds-conversation-list{position:absolute;right:0;bottom:0;z-index:var(--dimension-z-index-floating);padding:0 var(--dimension-space-200) var(--dimension-space-200) 0}.conversation-list__actions--footer.sc-ds-conversation-list{left:0;padding:0 var(--dimension-space-100) var(--dimension-space-100)}.conversation-list__actions-surface.sc-ds-conversation-list{display:flex;border-radius:var(--dimension-radius-half)}.conversation-list__actions--footer.sc-ds-conversation-list .conversation-list__actions-surface.sc-ds-conversation-list{width:100%}.conversation-list__actions-surface.sc-ds-conversation-list:empty{display:none}`;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.actionLayout="floating";this.syncEmptyStateLayout=()=>{const e=this.el.querySelector('[slot="empty"]');if(e){e.style.setProperty("position","absolute");e.style.setProperty("inset-block-start","0");e.style.setProperty("inset-inline","0");e.style.setProperty("inset-block-end","var(--ds-scroll-overlay-block-size, 0)");e.style.setProperty("height","auto");e.style.setProperty("box-sizing","border-box")}this.scrollOverlayController?.sync()}}componentDidLoad(){if(!this.viewport||!this.content||!this.overlay)return;this.scrollOverlayController=new i({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay,overlayContentSelector:'[slot="actions"]'});this.scrollOverlayController.connect();this.syncEmptyStateLayout();this.emptySlotObserver=new MutationObserver(this.syncEmptyStateLayout);this.emptySlotObserver.observe(this.el,{childList:true,subtree:true})}disconnectedCallback(){this.scrollOverlayController?.disconnect();this.emptySlotObserver?.disconnect()}render(){return t(o,{key:"990b5838ab47a6ef29dc80b8479064899a4f2d49"},t("div",{key:"30d66e4e9e337333e0fae02c71cbcd098da703ca",class:"conversation-list"},t("div",{key:"d1bc6514a3398acee1c338d4ec71b114210e6650",class:"conversation-list__viewport",ref:e=>{this.viewport=e},onScroll:()=>this.scrollOverlayController?.sync()},t("div",{key:"853e834a2ebfeb60193d97e697df5e5ec1b963cf",class:"conversation-list__content",ref:e=>{this.content=e}},t("slot",{key:"17bfd2fe5bcb23b42d2560112d356dc7ad746eca"}),t("div",{key:"3bce07741b17897d7871ff4c55702a5bffef0100",class:"conversation-list__empty"},t("slot",{key:"356f6b884aee7cbc61da35537e19e74dbeb6f729",name:"empty"})))),t("div",{key:"85330b3a187b5ddd87bd12cc6e656d14133e5756",class:"conversation-list__fade scroll-edge-fade scroll-edge-fade--top","aria-hidden":"true"}),t("div",{key:"71e896a17afbadfb112fbb0664edbfc1cfa6225f",class:{"conversation-list__actions":true,"conversation-list__actions--footer":this.actionLayout==="footer"},ref:e=>{this.overlay=e}},t("div",{key:"884ab5d1cafc891c89165de60793321af19ba544",class:"conversation-list__actions-surface ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale"},t("slot",{key:"341fd45fb4294dec595c0759ebe93fb448f95fc7",name:"actions"})))))}get el(){return this}static get style(){return l()+r()}},[262,"ds-conversation-list",{actionLayout:[1,"action-layout"]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-conversation-list"];e.forEach((e=>{switch(e){case"ds-conversation-list":if(!customElements.get(a(e))){customElements.define(a(e),d)}break}}))}n();const c=d;const f=n;export{c as DsConversationList,f as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-conversation-list.js.map
|