@ds-mo/ui 13.2.0 → 13.4.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/.package-ready.json +1 -1
- package/dist/agent-patterns.json +14 -1
- package/dist/agent.json +108 -8
- package/dist/angular/boolean-value-accessor.js +3 -3
- package/dist/angular/ds-agent-activity.js +3 -3
- package/dist/angular/ds-agent-response.d.ts +1 -1
- package/dist/angular/ds-agent-response.js +5 -5
- package/dist/angular/ds-agent-source-list.js +3 -3
- package/dist/angular/ds-agent-tool-call.js +3 -3
- package/dist/angular/ds-attachment-list.js +3 -3
- package/dist/angular/ds-avatar.js +3 -3
- package/dist/angular/ds-badge.js +3 -3
- package/dist/angular/ds-bar-nav.js +3 -3
- package/dist/angular/ds-bar-title.js +3 -3
- package/dist/angular/ds-bar-workflow.js +3 -3
- package/dist/angular/ds-breadcrumb.js +3 -3
- package/dist/angular/ds-button-filled.js +3 -3
- package/dist/angular/ds-button-unfilled.js +3 -3
- package/dist/angular/ds-card-data-viz.js +3 -3
- package/dist/angular/ds-card-overview.js +3 -3
- package/dist/angular/ds-card-setting.js +3 -3
- package/dist/angular/ds-chart-bar.js +3 -3
- package/dist/angular/ds-chart-donut.js +3 -3
- package/dist/angular/ds-chart-legend.js +3 -3
- package/dist/angular/ds-chart-line.js +3 -3
- package/dist/angular/ds-checkbox.js +3 -3
- package/dist/angular/ds-chip.js +3 -3
- package/dist/angular/ds-code-block.js +3 -3
- package/dist/angular/ds-conversation-list-item.js +3 -3
- package/dist/angular/ds-conversation-list-section.js +3 -3
- package/dist/angular/ds-conversation-list.js +3 -3
- package/dist/angular/ds-divider.js +3 -3
- package/dist/angular/ds-empty-state.js +3 -3
- package/dist/angular/ds-field.js +3 -3
- package/dist/angular/ds-icon.js +3 -3
- package/dist/angular/ds-input.js +3 -3
- package/dist/angular/ds-loader.js +3 -3
- package/dist/angular/ds-markdown.js +3 -3
- package/dist/angular/ds-menu.js +3 -3
- package/dist/angular/ds-message-actions.d.ts +19 -0
- package/dist/angular/ds-message-actions.js +45 -0
- package/dist/angular/ds-message-bubble.js +3 -3
- package/dist/angular/ds-message-composer.js +3 -3
- package/dist/angular/ds-message-scroller.js +3 -3
- package/dist/angular/ds-message.d.ts +1 -1
- package/dist/angular/ds-message.js +5 -5
- package/dist/angular/ds-mobile-bar-nav.js +3 -3
- package/dist/angular/ds-mobile-header.js +3 -3
- package/dist/angular/ds-mobile-section-switcher.js +3 -3
- package/dist/angular/ds-mobile-sheet-nav.js +3 -3
- package/dist/angular/ds-modal.js +3 -3
- package/dist/angular/ds-panel-nav.js +3 -3
- package/dist/angular/ds-panel-sub-nav.js +3 -3
- package/dist/angular/ds-panel-tool-header.js +3 -3
- package/dist/angular/ds-panel-tool-search.js +3 -3
- package/dist/angular/ds-panel-tools.js +3 -3
- package/dist/angular/ds-radio.js +3 -3
- package/dist/angular/ds-scroll-overlay.js +3 -3
- package/dist/angular/ds-select.js +3 -3
- package/dist/angular/ds-shell-app.js +3 -3
- package/dist/angular/ds-shell-page.js +3 -3
- package/dist/angular/ds-shell-tools.js +3 -3
- package/dist/angular/ds-skeleton.js +3 -3
- package/dist/angular/ds-slider.js +3 -3
- package/dist/angular/ds-swatch-picker.js +3 -3
- package/dist/angular/ds-switch.js +3 -3
- package/dist/angular/ds-tab-group.js +3 -3
- package/dist/angular/ds-tag.js +3 -3
- package/dist/angular/ds-text.js +3 -3
- package/dist/angular/ds-toast.js +3 -3
- package/dist/angular/ds-tooltip-data-viz.js +3 -3
- package/dist/angular/ds-tooltip.js +3 -3
- package/dist/angular/ds-typing-indicator.js +3 -3
- 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/angular/radio-value-accessor.js +3 -3
- package/dist/angular/select-value-accessor.js +3 -3
- package/dist/angular/text-value-accessor.js +3 -3
- package/dist/angular/value-accessor.js +3 -3
- package/dist/components/ds-agent-activity.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-response.js.map +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-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.js +1 -1
- package/dist/components/ds-card-data-viz.js.map +1 -1
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-card-overview.js.map +1 -1
- package/dist/components/ds-card-setting.js +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-legend.js.map +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-chip.js.map +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-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-input.js.map +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.d.ts +11 -0
- package/dist/components/ds-message-actions.js +2 -0
- package/dist/components/ds-message-actions.js.map +1 -0
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-scroller.js +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-sub-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js.map +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-radio.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-page.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-skeleton.js +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-tag.js.map +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/index.d.ts +3 -0
- package/dist/components/{p-DEaszb15.js → p-1moOgMI-.js} +2 -2
- package/dist/components/p-4scN0Mgn.js +2 -0
- package/dist/components/{p-B1XW4VSn.js → p-B3PdrMP0.js} +2 -2
- package/dist/components/{p-B-qDb_Zo.js → p-B5snQKiP.js} +2 -2
- package/dist/components/p-BApNi_xA.js +2 -0
- package/dist/components/p-BApNi_xA.js.map +1 -0
- package/dist/components/p-BN9FZESH.js +2 -0
- package/dist/components/{p-BBFEhNzM.js.map → p-BN9FZESH.js.map} +1 -1
- package/dist/components/{p-C-kzknkR.js → p-BQTJ7ePr.js} +2 -2
- package/dist/components/{p-CHuh71-U.js → p-BSocHH2X.js} +2 -2
- package/dist/components/p-BgASe-BH.js +2 -0
- package/dist/components/p-BgASe-BH.js.map +1 -0
- package/dist/components/p-Bgh0uG51.js +2 -0
- package/dist/components/{p-eAfNzlMa.js.map → p-Bgh0uG51.js.map} +1 -1
- package/dist/components/p-BgjtMMye.js +2 -0
- package/dist/components/p-BgjtMMye.js.map +1 -0
- package/dist/components/p-BnhGV__o.js +2 -0
- package/dist/components/p-BnhGV__o.js.map +1 -0
- package/dist/components/p-BxEOlO5k.js +2 -0
- package/dist/components/p-BxEOlO5k.js.map +1 -0
- package/dist/components/p-CBiAsFAZ.js +2 -0
- package/dist/components/{p-DbQr7Kwr.js.map → p-CBiAsFAZ.js.map} +1 -1
- package/dist/components/p-CGwVooB6.js +2 -0
- package/dist/components/p-CGwVooB6.js.map +1 -0
- package/dist/components/p-CIgag7g2.js +2 -0
- package/dist/components/{p-CH9yArA1.js.map → p-CIgag7g2.js.map} +1 -1
- package/dist/components/p-CQ4vAZ9j.js +2 -0
- package/dist/components/{p-gZni7A2L.js.map → p-CQ4vAZ9j.js.map} +1 -1
- package/dist/components/{p-bxoryr-3.js → p-CUSz0JFa.js} +2 -2
- package/dist/components/{p-BnbbnuVC.js → p-CWItD0gL.js} +2 -2
- package/dist/components/p-CWKrq35a.js +2 -0
- package/dist/components/p-CWKrq35a.js.map +1 -0
- package/dist/components/p-C_3mZMFK.js +2 -0
- package/dist/components/{p-CHpNyAo1.js.map → p-C_3mZMFK.js.map} +1 -1
- package/dist/components/p-CmMfRM1s.js +2 -0
- package/dist/components/{p-BGUK8-Qm.js.map → p-CmMfRM1s.js.map} +1 -1
- package/dist/components/p-CmUGA_q4.js +2 -0
- package/dist/components/{p-C-aCzwhA.js.map → p-CmUGA_q4.js.map} +1 -1
- package/dist/components/p-CqOswTy8.js +2 -0
- package/dist/components/{p-CJDTh9Tg.js.map → p-CqOswTy8.js.map} +1 -1
- package/dist/components/p-D4bVE7e4.js +2 -0
- package/dist/components/{p-CJbLY1tu.js.map → p-D4bVE7e4.js.map} +1 -1
- package/dist/components/{p-DhEdICfD.js → p-D5PN6zdD.js} +2 -2
- package/dist/components/p-DHAuidt1.js +2 -0
- package/dist/components/{p-BUZXuod2.js.map → p-DHAuidt1.js.map} +1 -1
- package/dist/components/{p-Df17mJqI.js → p-DXGKfXTh.js} +2 -2
- package/dist/components/p-DoNdiEly.js +2 -0
- package/dist/components/p-DoNdiEly.js.map +1 -0
- package/dist/components/p-DtV263qO.js +2 -0
- package/dist/components/{p-Cvxm1OZB.js.map → p-DtV263qO.js.map} +1 -1
- package/dist/components/p-RT1mts9U.js +2 -0
- package/dist/components/p-RT1mts9U.js.map +1 -0
- package/dist/components/p-UtfErnpX.js +2 -0
- package/dist/components/p-UtfErnpX.js.map +1 -0
- package/dist/components/p-a6cnCKWk.js +2 -0
- package/dist/components/{p-BbMJTilO.js.map → p-a6cnCKWk.js.map} +1 -1
- package/dist/components/p-w2kKeG_h.js +2 -0
- package/dist/components/{p-Ay1AX7Ql.js.map → p-w2kKeG_h.js.map} +1 -1
- package/dist/docs/components.json +282 -1
- package/dist/mcp-data/registry/agent-response.json +24 -3
- package/dist/mcp-data/registry/avatar.json +1 -1
- package/dist/mcp-data/registry/badge.json +1 -1
- package/dist/mcp-data/registry/card-data-viz.json +1 -1
- package/dist/mcp-data/registry/card-overview.json +2 -2
- package/dist/mcp-data/registry/chart-bar.json +1 -1
- package/dist/mcp-data/registry/chart-donut.json +1 -1
- package/dist/mcp-data/registry/chart-legend.json +1 -1
- package/dist/mcp-data/registry/chart-line.json +1 -1
- package/dist/mcp-data/registry/checkbox.json +1 -1
- package/dist/mcp-data/registry/code-block.json +1 -1
- package/dist/mcp-data/registry/divider.json +1 -1
- package/dist/mcp-data/registry/input.json +1 -1
- package/dist/mcp-data/registry/message-actions.json +186 -0
- package/dist/mcp-data/registry/message.json +27 -6
- package/dist/mcp-data/registry/modal.json +1 -1
- package/dist/mcp-data/registry/radio.json +1 -1
- package/dist/mcp-data/registry/registry.json +110 -7
- 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/toast.json +1 -1
- package/dist/mcp-data/registry/tooltip-data-viz.json +1 -1
- package/dist/mcp-data/registry/tooltip.json +2 -2
- package/dist/react/components.d.ts +1 -0
- package/dist/react/components.js +1 -0
- package/dist/react/ds-agent-activity.d.ts +1 -1
- package/dist/react/ds-agent-activity.js +1 -1
- package/dist/react/ds-agent-response.d.ts +1 -1
- package/dist/react/ds-agent-response.js +1 -1
- package/dist/react/ds-agent-source-list.d.ts +1 -1
- package/dist/react/ds-agent-source-list.js +1 -1
- package/dist/react/ds-agent-tool-call.d.ts +1 -1
- package/dist/react/ds-agent-tool-call.js +1 -1
- package/dist/react/ds-attachment-list.d.ts +1 -1
- package/dist/react/ds-attachment-list.js +1 -1
- package/dist/react/ds-avatar.d.ts +1 -1
- package/dist/react/ds-avatar.js +1 -1
- package/dist/react/ds-badge.d.ts +1 -1
- package/dist/react/ds-badge.js +1 -1
- package/dist/react/ds-bar-nav.d.ts +1 -1
- package/dist/react/ds-bar-nav.js +1 -1
- package/dist/react/ds-bar-title.d.ts +1 -1
- package/dist/react/ds-bar-title.js +1 -1
- package/dist/react/ds-bar-workflow.d.ts +1 -1
- package/dist/react/ds-bar-workflow.js +1 -1
- package/dist/react/ds-breadcrumb.d.ts +1 -1
- package/dist/react/ds-breadcrumb.js +1 -1
- package/dist/react/ds-button-filled.d.ts +1 -1
- package/dist/react/ds-button-filled.js +1 -1
- package/dist/react/ds-button-unfilled.d.ts +1 -1
- package/dist/react/ds-button-unfilled.js +1 -1
- package/dist/react/ds-card-data-viz.d.ts +1 -1
- package/dist/react/ds-card-data-viz.js +1 -1
- package/dist/react/ds-card-overview.d.ts +1 -1
- package/dist/react/ds-card-overview.js +1 -1
- package/dist/react/ds-card-setting.d.ts +1 -1
- package/dist/react/ds-card-setting.js +1 -1
- package/dist/react/ds-chart-bar.d.ts +1 -1
- package/dist/react/ds-chart-bar.js +1 -1
- package/dist/react/ds-chart-donut.d.ts +1 -1
- package/dist/react/ds-chart-donut.js +1 -1
- package/dist/react/ds-chart-legend.d.ts +1 -1
- package/dist/react/ds-chart-legend.js +1 -1
- package/dist/react/ds-chart-line.d.ts +1 -1
- package/dist/react/ds-chart-line.js +1 -1
- package/dist/react/ds-checkbox.d.ts +1 -1
- package/dist/react/ds-checkbox.js +1 -1
- package/dist/react/ds-chip.d.ts +1 -1
- package/dist/react/ds-chip.js +1 -1
- package/dist/react/ds-code-block.d.ts +1 -1
- package/dist/react/ds-code-block.js +1 -1
- package/dist/react/ds-conversation-list-item.d.ts +1 -1
- package/dist/react/ds-conversation-list-item.js +1 -1
- package/dist/react/ds-conversation-list-section.d.ts +1 -1
- package/dist/react/ds-conversation-list-section.js +1 -1
- package/dist/react/ds-conversation-list.d.ts +1 -1
- package/dist/react/ds-conversation-list.js +1 -1
- package/dist/react/ds-divider.d.ts +1 -1
- package/dist/react/ds-divider.js +1 -1
- package/dist/react/ds-empty-state.d.ts +1 -1
- package/dist/react/ds-empty-state.js +1 -1
- package/dist/react/ds-field.d.ts +1 -1
- package/dist/react/ds-field.js +1 -1
- package/dist/react/ds-icon.d.ts +1 -1
- package/dist/react/ds-icon.js +1 -1
- package/dist/react/ds-input.d.ts +1 -1
- package/dist/react/ds-input.js +1 -1
- package/dist/react/ds-loader.d.ts +1 -1
- package/dist/react/ds-loader.js +1 -1
- package/dist/react/ds-markdown.d.ts +1 -1
- package/dist/react/ds-markdown.js +1 -1
- package/dist/react/ds-menu.d.ts +1 -1
- package/dist/react/ds-menu.js +1 -1
- package/dist/react/ds-message-actions.d.ts +13 -0
- package/dist/react/ds-message-actions.js +15 -0
- package/dist/react/ds-message-bubble.d.ts +1 -1
- package/dist/react/ds-message-bubble.js +1 -1
- package/dist/react/ds-message-composer.d.ts +1 -1
- package/dist/react/ds-message-composer.js +1 -1
- package/dist/react/ds-message-scroller.d.ts +1 -1
- package/dist/react/ds-message-scroller.js +1 -1
- package/dist/react/ds-message.d.ts +1 -1
- package/dist/react/ds-message.js +1 -1
- package/dist/react/ds-mobile-bar-nav.d.ts +1 -1
- package/dist/react/ds-mobile-bar-nav.js +1 -1
- package/dist/react/ds-mobile-header.d.ts +1 -1
- package/dist/react/ds-mobile-header.js +1 -1
- package/dist/react/ds-mobile-section-switcher.d.ts +1 -1
- package/dist/react/ds-mobile-section-switcher.js +1 -1
- package/dist/react/ds-mobile-sheet-nav.d.ts +1 -1
- package/dist/react/ds-mobile-sheet-nav.js +1 -1
- package/dist/react/ds-modal.d.ts +1 -1
- package/dist/react/ds-modal.js +1 -1
- package/dist/react/ds-panel-nav.d.ts +1 -1
- package/dist/react/ds-panel-nav.js +1 -1
- package/dist/react/ds-panel-sub-nav.d.ts +1 -1
- package/dist/react/ds-panel-sub-nav.js +1 -1
- package/dist/react/ds-panel-tool-header.d.ts +1 -1
- package/dist/react/ds-panel-tool-header.js +1 -1
- package/dist/react/ds-panel-tool-search.d.ts +1 -1
- package/dist/react/ds-panel-tool-search.js +1 -1
- package/dist/react/ds-panel-tools.d.ts +1 -1
- package/dist/react/ds-panel-tools.js +1 -1
- package/dist/react/ds-radio.d.ts +1 -1
- package/dist/react/ds-radio.js +1 -1
- package/dist/react/ds-scroll-overlay.d.ts +1 -1
- package/dist/react/ds-scroll-overlay.js +1 -1
- package/dist/react/ds-select.d.ts +1 -1
- package/dist/react/ds-select.js +1 -1
- package/dist/react/ds-shell-app.d.ts +1 -1
- package/dist/react/ds-shell-app.js +1 -1
- package/dist/react/ds-shell-page.d.ts +1 -1
- package/dist/react/ds-shell-page.js +1 -1
- package/dist/react/ds-shell-tools.d.ts +1 -1
- package/dist/react/ds-shell-tools.js +1 -1
- package/dist/react/ds-skeleton.d.ts +1 -1
- package/dist/react/ds-skeleton.js +1 -1
- package/dist/react/ds-slider.d.ts +1 -1
- package/dist/react/ds-slider.js +1 -1
- package/dist/react/ds-swatch-picker.d.ts +1 -1
- package/dist/react/ds-swatch-picker.js +1 -1
- package/dist/react/ds-switch.d.ts +1 -1
- package/dist/react/ds-switch.js +1 -1
- package/dist/react/ds-tab-group.d.ts +1 -1
- package/dist/react/ds-tab-group.js +1 -1
- package/dist/react/ds-tag.d.ts +1 -1
- package/dist/react/ds-tag.js +1 -1
- package/dist/react/ds-text.d.ts +1 -1
- package/dist/react/ds-text.js +1 -1
- package/dist/react/ds-toast.d.ts +1 -1
- package/dist/react/ds-toast.js +1 -1
- package/dist/react/ds-tooltip-data-viz.d.ts +1 -1
- package/dist/react/ds-tooltip-data-viz.js +1 -1
- package/dist/react/ds-tooltip.d.ts +1 -1
- package/dist/react/ds-tooltip.js +1 -1
- package/dist/react/ds-typing-indicator.d.ts +1 -1
- package/dist/react/ds-typing-indicator.js +1 -1
- package/dist/react/react-runtime.d.ts +17 -0
- package/dist/react/react-runtime.js +13 -0
- package/dist/types/components/AgentResponse/AgentResponse.d.ts +3 -1
- package/dist/types/components/CardOverview/CardOverview.d.ts +1 -1
- package/dist/types/components/CodeBlock/CodeBlock.d.ts +3 -1
- package/dist/types/components/Message/Message.d.ts +4 -1
- package/dist/types/components/MessageActions/MessageActions.d.ts +18 -0
- package/dist/types/components/conversation-types.d.ts +5 -0
- package/dist/types/components.d.ts +72 -2
- package/dist/types/utils/clipboard.d.ts +31 -0
- package/package.json +3 -6
- package/dist/components/p-6qXDqCj_.js +0 -2
- package/dist/components/p-6qXDqCj_.js.map +0 -1
- package/dist/components/p-Ay1AX7Ql.js +0 -2
- package/dist/components/p-B9p6w-_T.js +0 -2
- package/dist/components/p-B9p6w-_T.js.map +0 -1
- package/dist/components/p-BBFEhNzM.js +0 -2
- package/dist/components/p-BGUK8-Qm.js +0 -2
- package/dist/components/p-BO4cj3iX.js +0 -2
- package/dist/components/p-BO4cj3iX.js.map +0 -1
- package/dist/components/p-BUZXuod2.js +0 -2
- package/dist/components/p-BYWkksDO.js +0 -2
- package/dist/components/p-BYWkksDO.js.map +0 -1
- package/dist/components/p-BbMJTilO.js +0 -2
- package/dist/components/p-BcTYhmku.js +0 -2
- package/dist/components/p-BcTYhmku.js.map +0 -1
- package/dist/components/p-BroVnDzE.js +0 -2
- package/dist/components/p-BroVnDzE.js.map +0 -1
- package/dist/components/p-BsoqsbBh.js +0 -2
- package/dist/components/p-BsoqsbBh.js.map +0 -1
- package/dist/components/p-C-aCzwhA.js +0 -2
- package/dist/components/p-CBazaRlE.js +0 -2
- package/dist/components/p-CH9yArA1.js +0 -2
- package/dist/components/p-CHpNyAo1.js +0 -2
- package/dist/components/p-CJDTh9Tg.js +0 -2
- package/dist/components/p-CJbLY1tu.js +0 -2
- package/dist/components/p-CreGah0j.js +0 -2
- package/dist/components/p-CreGah0j.js.map +0 -1
- package/dist/components/p-Cvxm1OZB.js +0 -2
- package/dist/components/p-DbQr7Kwr.js +0 -2
- package/dist/components/p-eAfNzlMa.js +0 -2
- package/dist/components/p-gZni7A2L.js +0 -2
- package/dist/components/p-ohsLFap_.js +0 -2
- package/dist/components/p-ohsLFap_.js.map +0 -1
- /package/dist/components/{p-DEaszb15.js.map → p-1moOgMI-.js.map} +0 -0
- /package/dist/components/{p-CBazaRlE.js.map → p-4scN0Mgn.js.map} +0 -0
- /package/dist/components/{p-B1XW4VSn.js.map → p-B3PdrMP0.js.map} +0 -0
- /package/dist/components/{p-B-qDb_Zo.js.map → p-B5snQKiP.js.map} +0 -0
- /package/dist/components/{p-C-kzknkR.js.map → p-BQTJ7ePr.js.map} +0 -0
- /package/dist/components/{p-CHuh71-U.js.map → p-BSocHH2X.js.map} +0 -0
- /package/dist/components/{p-bxoryr-3.js.map → p-CUSz0JFa.js.map} +0 -0
- /package/dist/components/{p-BnbbnuVC.js.map → p-CWItD0gL.js.map} +0 -0
- /package/dist/components/{p-DhEdICfD.js.map → p-D5PN6zdD.js.map} +0 -0
- /package/dist/components/{p-Df17mJqI.js.map → p-DXGKfXTh.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as
|
|
1
|
+
import{p as t,H as e,h as i,a as n,t as s}from"./index.js";import{c as r}from"./p-CMv_7vFs.js";import{C as o,r as a,m as c,p as l,l as h}from"./p-BybqPD8K.js";import{w as d,c as f,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,e){t=+t,e=+e;switch(this._point){case 0:this._point=1;this._line?this._context.lineTo(t,e):this._context.moveTo(t,e);break;case 1:this._point=2;default:this._context.lineTo(t,e);break}}};function g(t){return new p(t)}function m(t){return t[0]}function y(t){return t[1]}function b(t,e){var i=f(true),n=null,s=g,r=null,o=d(a);t=typeof t==="function"?t:t===undefined?m:f(t);e=typeof e==="function"?e:e===undefined?y:f(e);function a(a){var c,l=(a=u(a)).length,h,d=false,f;if(n==null)r=s(f=o());for(c=0;c<=l;++c){if(!(c<l&&i(h=a[c],c,a))===d){if(d=!d)r.lineStart();else r.lineEnd()}if(d)r.point(+t(h,c,a),+e(h,c,a))}if(f)return r=null,f+""||null}a.x=function(e){return arguments.length?(t=typeof e==="function"?e:f(+e),a):t};a.y=function(t){return arguments.length?(e=typeof t==="function"?t:f(+t),a):e};a.defined=function(t){return arguments.length?(i=typeof t==="function"?t:f(!!t),a):i};a.curve=function(t){return arguments.length?(s=t,n!=null&&(r=s(n)),a):s};a.context=function(t){return arguments.length?(t==null?n=r=null:r=s(n=t),a):n};return a}const v=()=>`@media (forced-colors: active){.sc-ds-chart-line:root,.sc-ds-chart-line-h,.ds-forced-colors-scope.sc-ds-chart-line{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-chart-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}@media (forced-colors: active){.chart-line__path.sc-ds-chart-line,.chart-line__point.sc-ds-chart-line{forced-color-adjust:none}.chart-line__point.sc-ds-chart-line{stroke:var(--ds-forced-color-surface)}}`;const _=t(class t extends e{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 o(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 e=this.viewport?.height??this.height;const{margin:s,axisLabelGap:o,categoryLabelOffset:d}=a();const f=Math.max(0,t-s.left-s.right);const u=Math.max(0,e-s.top-s.bottom);const p=this.series.flatMap((t=>t.data));const g=c(p)??0;const m=l().domain(this.categories.map(((t,e)=>e))).range([0,f]);const y=h().domain([0,g||1]).range([u,0]).nice();const v=b().x(((t,e)=>m(e)??0)).y((t=>y(t)));const _=y.ticks(4);return i(n,{key:"a05b286837f2e03e0af24da3241babab381eae7e",class:"chart-line"},i("svg",{key:"a96b4c763842c78ec4b56b9b69de1b5ea067086b",class:"chart-line__svg",ref:t=>{this.svgEl=t??null},width:t,height:e,role:"img","aria-label":this.series.map((t=>t.name)).join(", ")},i("g",{key:"1ecea80a2cd82c752ead21d4f623fe243bd466ed",transform:`translate(${s.left}, ${s.top})`},_.map((t=>i("g",{key:`grid-${t}`,transform:`translate(0, ${y(t)})`},i("line",{class:"chart-line__gridline",x1:0,x2:f}),i("text",{class:"chart-line__axis-label",x:-o,"text-anchor":"end","dominant-baseline":"middle"},t)))),this.categories.map(((t,e)=>i("text",{key:`x-${t}`,class:"chart-line__axis-label",x:m(e)??0,y:u+d,"text-anchor":"middle"},t))),this.series.map(((t,e)=>{const n=t.color??r(e);return i("g",{key:t.name},i("path",{class:"chart-line__path",d:v(t.data)??undefined,stroke:n}),this.showPoints&&t.data.map(((e,s)=>i("circle",{key:`${t.name}-${s}`,class:"chart-line__point",cx:m(s)??0,cy:y(e),fill:n}))))})))))}static get watchers(){return{width:[{handleIntrinsicSizeChange:0}],height:[{handleIntrinsicSizeChange:0}]}}static get style(){return v()}},[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 k(){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),_)}break}}))}k();const x=_;const w=k;export{x as DsChartLine,w 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","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":"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","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","@import '../../utils/forced-colors.css';\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\n@media (forced-colors: active) {\n .chart-line__path,\n .chart-line__point {\n forced-color-adjust: none;\n }\n\n .chart-line__point {\n stroke: var(--ds-forced-color-surface);\n }\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":"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","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-BApNi_xA.js";const p=o;const t=s;export{p as DsCheckbox,t 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-Ay1AX7Ql.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:var(--effect-opacity-medium);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:"bc040a8bb5f26d0890840c3dee049c62162109d2",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:"c33b6e5f67618a2587d1c27baf038ba5c8f74dca",class:"tag__label",as:"span",variant:i,color:"inherit"},this.label),n("button",{key:"c760b9a9b376b350c5ed3c287ff46b0610910354",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:"8026d3718660909d384ed924030f966521c70e41",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 o,H as i,c as s,h as c,a as r,t as n}from"./index.js";import{d as e}from"./p-BAfG3M8z.js";import{d as t}from"./p-w2kKeG_h.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}@media (forced-colors: active){.sc-ds-chip:root,.sc-ds-chip-h,.ds-forced-colors-scope.sc-ds-chip{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-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)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-chip-h::before,.ds-interaction-fill--selected.sc-ds-chip::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chip-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-chip:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-chip:root,.sc-ds-chip-h,.ds-forced-colors-scope.sc-ds-chip{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-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))}@media (forced-colors: active){.sc-ds-chip-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-chip:root,.sc-ds-chip-h,.ds-forced-colors-scope.sc-ds-chip{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-chip-h,.ds-control-inactive.sc-ds-chip{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-chip-h,.ds-control-inactive.sc-ds-chip{color:var(--ds-forced-color-disabled);opacity:1}}.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=o(class o extends i{constructor(o){super();if(o!==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=o=>{o.stopPropagation();if(this.isInactive)return;this.dsRemove.emit()}}render(){const o=d[this.size];const i=l[this.size];const s=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;return c(r,{key:"bc040a8bb5f26d0890840c3dee049c62162109d2",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},c("ds-text",{key:"c33b6e5f67618a2587d1c27baf038ba5c8f74dca",class:"tag__label",as:"span",variant:o,color:"inherit"},this.label),c("button",{key:"c760b9a9b376b350c5ed3c287ff46b0610910354",type:"button",class:"tag__remove ds-focus-ring-inset",onClick:this.handleRemove,"aria-label":this.removeLabel.replace("{label}",this.label),disabled:this.isInactive||undefined},c("ds-icon",{key:"8026d3718660909d384ed924030f966521c70e41",class:"tag__remove-x",name:"Cross",size:i,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 f(){if(typeof customElements==="undefined"){return}const o=["ds-chip","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-chip":if(!customElements.get(n(o))){customElements.define(n(o),h)}break;case"ds-icon":if(!customElements.get(n(o))){e()}break;case"ds-text":if(!customElements.get(n(o))){t()}break}}))}f();const v=h;const p=f;export{v as DsChip,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["chipCss","ICON_SIZE","md","sm","xs","Chip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","state","size","rounded","isInactive","removeLabel","handleRemove","e","stopPropagation","dsRemove","emit","render","textVariant","CONTROL_TEXT_VARIANT","iconSize","maxWidthStyle","maxWidth","undefined","h","Host","key","class","tag","chip","style","as","variant","color","label","type","onClick","replace","disabled","name"],"sources":["src/wc/components/Chip/Chip.css?tag=ds-chip&encapsulation=scoped","src/wc/components/Chip/Chip.tsx"],"sourcesContent":["@import '../../utils/tag-chip.css';\n\n/*\n * Semantic state colors — Chip’s differentiator from Tag.\n * All states use the faint contrast weight; hue comes from the state.\n */\n:host(.chip--default) {\n background-color: var(--color-background-faint-neutral);\n color: var(--color-foreground-bold-neutral);\n}\n\n:host(.chip--active) {\n background-color: var(--color-background-faint-brand);\n color: var(--color-foreground-bold-brand);\n}\n\n:host(.chip--error) {\n background-color: var(--color-background-faint-negative);\n color: var(--color-foreground-bold-negative);\n}\n\n:host(.chip--caution) {\n background-color: var(--color-background-faint-caution);\n color: var(--color-foreground-bold-caution);\n}\n\n/*\n * Label↔dismiss uses host gap, mirroring Tag icon↔label spacing:\n * [inset][text][inset][gap][icon].\n */\n.tag__remove {\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: default;\n color: inherit;\n flex-shrink: 0;\n position: relative;\n z-index: 2;\n border-radius: var(--dimension-radius-half);\n}\n\n.tag__remove::before {\n content: '';\n position: absolute;\n inset: var(--dimension-space-n025);\n border-radius: var(--dimension-radius-half);\n background-color: transparent;\n transition: var(--effect-transition-interaction-background-short-2);\n pointer-events: none;\n}\n\n.tag__remove:hover::before {\n background-color: var(--color-interaction-hover);\n}\n\n.tag__remove:active::before {\n background-color: var(--color-interaction-pressed);\n}\n\n:host(.tag--size-sm) .tag__remove::before {\n inset: var(--dimension-space-n012);\n}\n\n:host(.tag--size-xs) .tag__remove::before {\n inset: 0;\n}\n\n.tag__remove-x {\n display: inline-flex;\n flex-shrink: 0;\n width: var(--ds-control-icon);\n height: var(--ds-control-icon);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT } from '../../utils';\n\n/**\n * Semantic chip state — replaces Tag’s intent × contrast matrix.\n * - `default` — neutral faint\n * - `active` — brand faint\n * - `error` — negative faint\n * - `caution` — caution faint\n */\nexport type ChipState = 'default' | 'active' | 'error' | 'caution';\nexport type ChipSize = 'md' | 'sm' | 'xs';\n\n/** Dismiss `ds-icon` size — same iconography metrics as Tag’s leading icon. */\nconst ICON_SIZE: Record<ChipSize, 'md' | 'sm' | 'xs'> = {\n md: 'md',\n sm: 'sm',\n xs: 'xs',\n};\n\n/**\n * Removable chip — same density recipe as Tag, but colored by semantic `state`\n * (not intent × contrast). Not a toggle/select control; the only intentional\n * action is remove.\n */\n@Component({\n tag: 'ds-chip',\n styleUrl: 'Chip.css',\n scoped: true,\n})\nexport class Chip {\n @Prop() label!: string;\n /** Semantic color state. @default 'default' */\n @Prop() state: ChipState = 'default';\n @Prop() size: ChipSize = 'md';\n @Prop() rounded: boolean = false;\n @Prop() maxWidth: string | number | undefined;\n @Prop() isInactive: boolean = false;\n /** Accessible remove action. Use `{label}` as the chip-label placeholder. */\n @Prop() removeLabel: string = 'Remove {label}';\n\n /** Fired when the remove button is clicked. */\n @Event() dsRemove!: EventEmitter<void>;\n\n private handleRemove = (e: MouseEvent) => {\n e.stopPropagation();\n if (this.isInactive) return;\n this.dsRemove.emit();\n };\n\n render() {\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const iconSize = ICON_SIZE[this.size];\n\n const maxWidthStyle = this.maxWidth != null\n ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n : undefined;\n\n return (\n <Host\n class={{\n 'tag': true,\n 'chip': true,\n [`chip--${this.state}`]: true,\n [`tag--size-${this.size}`]: true,\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'tag--rounded': this.rounded,\n 'tag--removable': true,\n /* Hover overlay on the chip surface — dismiss is the only action. */\n 'ds-interaction-fill': !this.isInactive,\n 'ds-control-inactive': this.isInactive,\n }}\n style={maxWidthStyle}\n aria-disabled={this.isInactive ? 'true' : undefined}\n >\n <ds-text class=\"tag__label\" as=\"span\" variant={textVariant} color=\"inherit\">\n {this.label}\n </ds-text>\n <button\n type=\"button\"\n class=\"tag__remove ds-focus-ring-inset\"\n onClick={this.handleRemove}\n aria-label={this.removeLabel.replace('{label}', this.label)}\n disabled={this.isInactive || undefined}\n >\n <ds-icon class=\"tag__remove-x\" name=\"Cross\" size={iconSize} color=\"inherit\"></ds-icon>\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"8KAAA,MAAMA,EAAU,IAAM,
|
|
1
|
+
{"version":3,"names":["chipCss","ICON_SIZE","md","sm","xs","Chip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","state","size","rounded","isInactive","removeLabel","handleRemove","e","stopPropagation","dsRemove","emit","render","textVariant","CONTROL_TEXT_VARIANT","iconSize","maxWidthStyle","maxWidth","undefined","h","Host","key","class","tag","chip","style","as","variant","color","label","type","onClick","replace","disabled","name"],"sources":["src/wc/components/Chip/Chip.css?tag=ds-chip&encapsulation=scoped","src/wc/components/Chip/Chip.tsx"],"sourcesContent":["@import '../../utils/tag-chip.css';\n\n/*\n * Semantic state colors — Chip’s differentiator from Tag.\n * All states use the faint contrast weight; hue comes from the state.\n */\n:host(.chip--default) {\n background-color: var(--color-background-faint-neutral);\n color: var(--color-foreground-bold-neutral);\n}\n\n:host(.chip--active) {\n background-color: var(--color-background-faint-brand);\n color: var(--color-foreground-bold-brand);\n}\n\n:host(.chip--error) {\n background-color: var(--color-background-faint-negative);\n color: var(--color-foreground-bold-negative);\n}\n\n:host(.chip--caution) {\n background-color: var(--color-background-faint-caution);\n color: var(--color-foreground-bold-caution);\n}\n\n/*\n * Label↔dismiss uses host gap, mirroring Tag icon↔label spacing:\n * [inset][text][inset][gap][icon].\n */\n.tag__remove {\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: default;\n color: inherit;\n flex-shrink: 0;\n position: relative;\n z-index: 2;\n border-radius: var(--dimension-radius-half);\n}\n\n.tag__remove::before {\n content: '';\n position: absolute;\n inset: var(--dimension-space-n025);\n border-radius: var(--dimension-radius-half);\n background-color: transparent;\n transition: var(--effect-transition-interaction-background-short-2);\n pointer-events: none;\n}\n\n.tag__remove:hover::before {\n background-color: var(--color-interaction-hover);\n}\n\n.tag__remove:active::before {\n background-color: var(--color-interaction-pressed);\n}\n\n:host(.tag--size-sm) .tag__remove::before {\n inset: var(--dimension-space-n012);\n}\n\n:host(.tag--size-xs) .tag__remove::before {\n inset: 0;\n}\n\n.tag__remove-x {\n display: inline-flex;\n flex-shrink: 0;\n width: var(--ds-control-icon);\n height: var(--ds-control-icon);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT } from '../../utils';\n\n/**\n * Semantic chip state — replaces Tag’s intent × contrast matrix.\n * - `default` — neutral faint\n * - `active` — brand faint\n * - `error` — negative faint\n * - `caution` — caution faint\n */\nexport type ChipState = 'default' | 'active' | 'error' | 'caution';\nexport type ChipSize = 'md' | 'sm' | 'xs';\n\n/** Dismiss `ds-icon` size — same iconography metrics as Tag’s leading icon. */\nconst ICON_SIZE: Record<ChipSize, 'md' | 'sm' | 'xs'> = {\n md: 'md',\n sm: 'sm',\n xs: 'xs',\n};\n\n/**\n * Removable chip — same density recipe as Tag, but colored by semantic `state`\n * (not intent × contrast). Not a toggle/select control; the only intentional\n * action is remove.\n */\n@Component({\n tag: 'ds-chip',\n styleUrl: 'Chip.css',\n scoped: true,\n})\nexport class Chip {\n @Prop() label!: string;\n /** Semantic color state. @default 'default' */\n @Prop() state: ChipState = 'default';\n @Prop() size: ChipSize = 'md';\n @Prop() rounded: boolean = false;\n @Prop() maxWidth: string | number | undefined;\n @Prop() isInactive: boolean = false;\n /** Accessible remove action. Use `{label}` as the chip-label placeholder. */\n @Prop() removeLabel: string = 'Remove {label}';\n\n /** Fired when the remove button is clicked. */\n @Event() dsRemove!: EventEmitter<void>;\n\n private handleRemove = (e: MouseEvent) => {\n e.stopPropagation();\n if (this.isInactive) return;\n this.dsRemove.emit();\n };\n\n render() {\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const iconSize = ICON_SIZE[this.size];\n\n const maxWidthStyle = this.maxWidth != null\n ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n : undefined;\n\n return (\n <Host\n class={{\n 'tag': true,\n 'chip': true,\n [`chip--${this.state}`]: true,\n [`tag--size-${this.size}`]: true,\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'tag--rounded': this.rounded,\n 'tag--removable': true,\n /* Hover overlay on the chip surface — dismiss is the only action. */\n 'ds-interaction-fill': !this.isInactive,\n 'ds-control-inactive': this.isInactive,\n }}\n style={maxWidthStyle}\n aria-disabled={this.isInactive ? 'true' : undefined}\n >\n <ds-text class=\"tag__label\" as=\"span\" variant={textVariant} color=\"inherit\">\n {this.label}\n </ds-text>\n <button\n type=\"button\"\n class=\"tag__remove ds-focus-ring-inset\"\n onClick={this.handleRemove}\n aria-label={this.removeLabel.replace('{label}', this.label)}\n disabled={this.isInactive || undefined}\n >\n <ds-icon class=\"tag__remove-x\" name=\"Cross\" size={iconSize} color=\"inherit\"></ds-icon>\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"8KAAA,MAAMA,EAAU,IAAM,yrYCctB,MAAMC,EAAkD,CACtDC,GAAI,KACJC,GAAI,KACJC,GAAI,M,MAaOC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,6EAQUC,KAAAC,MAAmB,UACnBD,KAAAE,KAAiB,KACjBF,KAAAG,QAAmB,MAEnBH,KAAAI,WAAsB,MAEtBJ,KAAAK,YAAsB,iBAKtBL,KAAAM,aAAgBC,IACtBA,EAAEC,kBACF,GAAIR,KAAKI,WAAY,OACrBJ,KAAKS,SAASC,MAAM,CA6CvB,CA1CC,MAAAC,GACE,MAAMC,EAAcC,EAAqBb,KAAKE,MAC9C,MAAMY,EAAWvB,EAAUS,KAAKE,MAEhC,MAAMa,EAAgBf,KAAKgB,UAAY,KACnC,CAAEA,gBAAiBhB,KAAKgB,WAAa,SAAW,GAAGhB,KAAKgB,aAAehB,KAAKgB,UAC5EC,UAEJ,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,IAAO,KACPC,KAAQ,KACR,CAAC,SAASvB,KAAKC,SAAU,KACzB,CAAC,aAAaD,KAAKE,QAAS,KAC5B,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,eAAgBF,KAAKG,QACrB,iBAAkB,KAElB,uBAAwBH,KAAKI,WAC7B,sBAAuBJ,KAAKI,YAE9BoB,MAAOT,EAAa,gBACLf,KAAKI,WAAa,OAASa,WAE1CC,EAAA,WAAAE,IAAA,2CAASC,MAAM,aAAaI,GAAG,OAAOC,QAASd,EAAae,MAAM,WAC/D3B,KAAK4B,OAERV,EAAA,UAAAE,IAAA,2CACES,KAAK,SACLR,MAAM,kCACNS,QAAS9B,KAAKM,aAAY,aACdN,KAAKK,YAAY0B,QAAQ,UAAW/B,KAAK4B,OACrDI,SAAUhC,KAAKI,YAAca,WAE7BC,EAAA,WAAAE,IAAA,2CAASC,MAAM,gBAAgBY,KAAK,QAAQ/B,KAAMY,EAAUa,MAAM,a","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-CWKrq35a.js";const r=o;const t=s;export{r as DsCodeBlock,t 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-BsoqsbBh.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as a}from"./p-Ay1AX7Ql.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:var(--effect-opacity-medium);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:"9dcc7bc016db947ac25d43cbbb8194afdcd6e86f",role:"listitem",class:{"conversation-list-item--actions-open":this.actionsOpen}},t("div",{key:"43523e90dc286c2eae7c4fd91ae21b8b7212ca27",class:"conversation-list-item__row"},t("button",{key:"e4d3f45a6356516c716caaa2097c380979065a6c",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:"2687d271f18bed4525338234fc413a96a6428940",class:"conversation-list-item__leading ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content"},t("slot",{key:"a023e26f3cef45e3d2bf7b0362f7e2d758cdfefa",name:"leading"})),t("span",{key:"2e03cd2e38dc4ec5b14b29a8f2e65a6b52523914",class:"conversation-list-item__content ds-choice-item__content ds-interaction-fill__content"},t("span",{key:"3767c0b3aeae5eb745e387bc5fcde41ca6792667",class:"conversation-list-item__title-row"},t("ds-text",{key:"8ab08f5a722fbf56b1e7b5f530f5b53f3a93aa7c",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:"47367aeb8f2cc36b90969d35d3f71d21343cc41c",class:"conversation-list-item__preview-row"},i?t("ds-loader",{size:"sm",color:"secondary"}):null,t("ds-text",{key:"79ce28e16ce94a270c38b3c43ec1a0226c3ddd7f",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:"e5db54af29ba9ab567d50f308943ad48175fb5ba",class:"conversation-list-item__trailing ds-interaction-fill__content"},t("slot",{key:"73ebf15ec6c14024a2190fbce777817e5b0cfc82",name:"trailing"}))),t("div",{key:"4e61d26dfb89be1a7500af11dd7af2c4cd614496",class:"conversation-list-item__actions ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale"},t("slot",{key:"40e9a48037a7d90e58fead6e79d88f17b220587a",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 o,a as t,t as n}from"./index.js";import{d as r}from"./p-DoNdiEly.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as a}from"./p-w2kKeG_h.js";const d=()=>`@media (forced-colors: active){.sc-ds-conversation-list-item:root,.sc-ds-conversation-list-item-h,.ds-forced-colors-scope.sc-ds-conversation-list-item{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-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))}@media (forced-colors: active){.sc-ds-conversation-list-item-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-conversation-list-item:root,.sc-ds-conversation-list-item-h,.ds-forced-colors-scope.sc-ds-conversation-list-item{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}@media (forced-colors: active){.sc-ds-conversation-list-item:root,.sc-ds-conversation-list-item-h,.ds-forced-colors-scope.sc-ds-conversation-list-item{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-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)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-conversation-list-item-h::after,.ds-interaction-fill.sc-ds-conversation-list-item::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-conversation-list-item-h::before,.ds-interaction-fill--selected.sc-ds-conversation-list-item::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-conversation-list-item-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-conversation-list-item:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-conversation-list-item:root,.sc-ds-conversation-list-item-h,.ds-forced-colors-scope.sc-ds-conversation-list-item{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-conversation-list-item-h,.ds-control-inactive.sc-ds-conversation-list-item{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-conversation-list-item-h,.ds-control-inactive.sc-ds-conversation-list-item{color:var(--ds-forced-color-disabled);opacity:1}}.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)}@media (forced-colors: active){.ds-choice-popup.sc-ds-conversation-list-item{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.ds-choice-popup.sc-ds-conversation-list-item::after{box-shadow:none}.ds-choice-section--divided.sc-ds-conversation-list-item{border-bottom-color:var(--ds-forced-color-content)}.ds-choice-footer.sc-ds-conversation-list-item::before{background-color:var(--ds-forced-color-content)}}.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 o(t,{key:"dfb3bd202c1dcb617357161bf9e9e404ba61cefe",role:"listitem",class:{"conversation-list-item--actions-open":this.actionsOpen}},o("div",{key:"9ea60265b02cf0304c6d29a17b014b6b4d2fe4e3",class:"conversation-list-item__row"},o("button",{key:"fdc4236c640380a83765876851899f879fbdb09a",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},o("span",{key:"2200ad7feb227b918a4f44fd923be07a876654ee",class:"conversation-list-item__leading ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content"},o("slot",{key:"a560de4e0ec53970357b871d5d1202088ebfbec2",name:"leading"})),o("span",{key:"a87e2a494c9004c167392506838fe334445c7a38",class:"conversation-list-item__content ds-choice-item__content ds-interaction-fill__content"},o("span",{key:"41ecf2848f12aecaf9727ec4197b9e899fa895fb",class:"conversation-list-item__title-row"},o("ds-text",{key:"180840ac66dc6e617a9ee50db19264fc8fdb81fa",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?o("span",{class:"conversation-list-item__unread"},o("ds-badge",{variant:"dot",surface:"secondary",hasRing:false})):null),o("span",{key:"1e5220df57e7d503e9f2100fc9770f1fc0a2a72e",class:"conversation-list-item__preview-row"},i?o("ds-loader",{size:"sm",color:"secondary"}):null,o("ds-text",{key:"a24c62af0274f17bb7c8ddc696863d5b5d67f228",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?o("time",{class:"conversation-list-item__time ds-visually-hidden",dateTime:this.updatedAt},this.updatedAt):null),o("span",{key:"9fa3cb5fe362e238c7b273afaa1ef3dc8a151b31",class:"conversation-list-item__trailing ds-interaction-fill__content"},o("slot",{key:"b82a371b77877dcafe967efb0667dec882a19292",name:"trailing"}))),o("div",{key:"3203faa2760e8427e4d371fb6fad96e69f8f8a0e",class:"conversation-list-item__actions ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale"},o("slot",{key:"406de09aff1cde38413408e3ea86de0820b3cab5",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 f=v;export{m as DsConversationListItem,f 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","/* eslint-disable local/no-selected-fill-emphasis-change -- Unread emphasis is message state, independent of the selected-row fill state. */\nimport { 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,6zrB,MCSzBC,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","/* eslint-disable local/no-selected-fill-emphasis-change -- Unread emphasis is message state, independent of the selected-row fill state. */\nimport { 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,spyB,MCSzBC,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 o}from"./p-w2kKeG_h.js";const c=()=>`.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:"9edcb141de3304968ed47250096f44c53385aa87"},t("section",{key:"1943e92b8bd39940f018a3c80030841a4f6227eb",class:"conversation-list-section","aria-labelledby":s},t("ds-text",{key:"80fb9a74f2cc70a6e17a6efeff60380a368105bc",class:"conversation-list-section__heading",textId:s,as:"h3",variant:"text-caption",emphasis:true,color:"secondary"},this.heading),t("div",{key:"2d87dce4c014e752b90b313da0ce3595e0aab8fc",class:"conversation-list-section__items",role:"list"},t("slot",{key:"b2367d86f3099eacefb50cc381fcf51826bde139"}))))}static get style(){return c()}},[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))){o()}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{D as o,d as s}from"./p-
|
|
1
|
+
import{D as o,d as s}from"./p-BgASe-BH.js";const t=o;const p=s;export{t as DsDivider,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-divider.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{E as
|
|
1
|
+
import{E as s,d as o}from"./p-4scN0Mgn.js";const t=s;const c=o;export{t as DsEmptyState,c as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-empty-state.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,h as i,a as s,t as d}from"./index.js";import{d as n}from"./p-
|
|
1
|
+
import{p as e,H as t,h as i,a as s,t as d}from"./index.js";import{d as n}from"./p-w2kKeG_h.js";const r=()=>`.ds-field-stack.sc-ds-field-h,.ds-field-stack.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.sc-ds-field-h{display:block}.field__control.sc-ds-field{display:flex;min-width:0}.field__control.sc-ds-field>*.sc-ds-field{width:100%}`;let a=0;const o=e=>e?.split(/\s+/).filter(Boolean)??[];const l=(...e)=>[...new Set(e.flat())];const h=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.error=false;this.focused=false;this.filled=false;this.dirty=false;this.touched=false;this.controlDisabled=false;this.controlRequired=false;this.generatedId=`ds-field-${++a}`;this.initialValue="";this.authoredAria=new WeakMap;this.syncControl=()=>{const e=this.findControl();if(!e)return;if(e!==this.control){this.control=e;this.initialValue=this.readValue(e);this.authoredAria.set(e,{labelledby:o(e.getAttribute("aria-labelledby")),describedby:o(e.getAttribute("aria-describedby"))})}const t=e.tagName.startsWith("DS-");if(t&&"inputId"in e)e.inputId=this.controlId;else this.updateControlAttribute(e,"id",this.controlId);const i=this.authoredAria.get(e)??{labelledby:[],describedby:[]};const s=l(i.labelledby,[this.labelId]).join(" ");const d=l(i.describedby,this.renderedDescription?[this.descriptionId]:[],this.renderedError?[this.errorId]:[]).join(" ");this.updateControlAttribute(e,"aria-labelledby",s);this.updateControlAttribute(e,"aria-describedby",d||undefined);this.updateControlAttribute(e,"aria-invalid",this.error?"true":undefined);if(t&&"error"in e&&e.error!==this.error)e.error=this.error;const n=this.readValue(e);this.filled=n.length>0;this.dirty=n!==this.initialValue;this.controlDisabled=Boolean(e.disabled||e.isInactive||e.hasAttribute("disabled"));this.controlRequired=Boolean(e.required||e.hasAttribute("required"))};this.handleLabelClick=e=>{if(!this.control?.tagName.startsWith("DS-"))return;e.preventDefault();this.control.setFocus?.()};this.handleFocusIn=()=>{this.focused=true};this.handleFocusOut=e=>{if(e.relatedTarget instanceof Node&&this.el.contains(e.relatedTarget))return;this.focused=false;this.touched=true};this.handleValueChange=()=>{this.syncControl()}}componentDidLoad(){this.syncControl();requestAnimationFrame((()=>this.syncControl()))}componentDidRender(){this.syncControl()}onFieldContractChange(){this.syncControl()}get controlId(){return this.fieldId||this.generatedId}get labelId(){return`${this.controlId}-label`}get descriptionId(){return`${this.controlId}-description`}get errorId(){return`${this.controlId}-error`}get renderedDescription(){return Boolean(this.description)&&!this.renderedError}get renderedError(){return this.error&&Boolean(this.errorMessage)}readValue(e){const t=e.value;return Array.isArray(t)?t.join(""):String(t??"")}updateControlAttribute(e,t,i){if(i===undefined){if(e.hasAttribute(t))e.removeAttribute(t);return}if(e.getAttribute(t)!==i)e.setAttribute(t,i)}findControl(){return this.controlContainer?.querySelector(":scope > :not(slot)")??undefined}render(){return i(s,{key:"b9a9ecca73a837ad73bbf79f0c83c0126e24fb5c","data-focused":this.focused?"":undefined,"data-filled":this.filled?"":undefined,"data-dirty":this.dirty?"":undefined,"data-touched":this.touched?"":undefined,"data-invalid":this.error?"":undefined,"data-disabled":this.controlDisabled?"":undefined,"data-required":this.controlRequired?"":undefined,onFocusin:this.handleFocusIn,onFocusout:this.handleFocusOut,onInput:this.handleValueChange,onChange:this.handleValueChange,onDsChange:this.handleValueChange},i("div",{key:"8cfb733fc4e05c1d2d1d065f37056e91d8e5ccb4",class:"field ds-field-stack"},i("ds-text",{key:"11f1ec3b4f32b5e3a62fc5c291cd18cdf713b819",class:"field__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:this.controlId,textId:this.labelId,onClick:this.handleLabelClick},this.label),i("div",{key:"875fff992645f099e35e3a581496dfd206dc857d",class:"field__control",ref:e=>this.controlContainer=e},i("slot",{key:"7087200a7f8467353c5ce55630044a36ced9c348",onSlotchange:this.syncControl})),this.renderedDescription&&i("ds-text",{key:"ebb4f4de3326b50518054ed61a3d862b9d274b48",class:"field__description",as:"div",variant:"text-body-small",color:"secondary",textId:this.descriptionId},this.description),this.renderedError&&i("ds-text",{key:"ae67562a1b1ec59d269d2f0e646df15cd8ba693b",class:"field__error",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage)))}get el(){return this}static get watchers(){return{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}}static get style(){return r()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"],description:[1],error:[4],errorMessage:[1,"error-message"],focused:[32],filled:[32],dirty:[32],touched:[32],controlDisabled:[32],controlRequired:[32]},undefined,{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-field","ds-text"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(d(e))){customElements.define(d(e),h)}break;case"ds-text":if(!customElements.get(d(e))){n()}break}}))}c();const f=h;const u=c;export{f as DsField,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-field.js.map
|