@ds-mo/ui 9.2.1 → 11.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/.build-stamp +1 -1
- package/dist/agent-patterns.json +15 -9
- package/dist/agent.json +473 -150
- package/dist/angular/boolean-value-accessor.js +3 -3
- package/dist/angular/ds-agent-activity.js +3 -3
- package/dist/angular/ds-agent-response.js +3 -3
- package/dist/angular/ds-agent-source-list.js +3 -3
- package/dist/angular/ds-agent-tool-call.js +3 -3
- package/dist/angular/ds-app-shell.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-button-filled.js +3 -3
- package/dist/angular/ds-button-unfilled.js +3 -3
- package/dist/angular/ds-card-data-viz-donut.js +3 -3
- package/dist/angular/ds-card-setting.d.ts +5 -4
- package/dist/angular/ds-card-setting.js +6 -6
- package/dist/angular/ds-card-shell-data-viz.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-bubble.js +3 -3
- package/dist/angular/ds-message-composer.js +3 -3
- package/dist/angular/ds-message-scroller.js +3 -3
- package/dist/angular/ds-message.js +3 -3
- package/dist/angular/ds-modal.d.ts +12 -3
- package/dist/angular/ds-modal.js +9 -6
- 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-select-multi.js +3 -3
- package/dist/angular/ds-select.js +3 -3
- package/dist/angular/ds-shell-gradient-picker.js +3 -3
- package/dist/angular/ds-shell-gradient-swatch.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.d.ts +22 -0
- package/dist/angular/{ds-banner.js → ds-toast.js} +21 -15
- package/dist/angular/ds-tooltip-data-viz.js +3 -3
- package/dist/angular/ds-tooltip.js +3 -3
- package/dist/angular/ds-typing-indicator.d.ts +12 -0
- package/dist/angular/{ds-card.js → ds-typing-indicator.js} +12 -12
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +3 -3
- package/dist/angular/proxies.d.ts +2 -2
- package/dist/angular/proxies.js +2 -2
- 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-app-shell.js +1 -1
- package/dist/components/ds-attachment-list.js +1 -1
- package/dist/components/ds-avatar.js +1 -1
- package/dist/components/ds-avatar.js.map +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-nav.js.map +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-donut.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js.map +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card-setting.js.map +1 -1
- package/dist/components/ds-card-shell-data-viz.js +1 -1
- package/dist/components/ds-chart-bar.js +1 -1
- package/dist/components/ds-chart-donut.js +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-legend.js.map +1 -1
- package/dist/components/ds-chart-line.js +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-conversation-list.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-icon.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-bubble.js +1 -1
- package/dist/components/ds-message-bubble.js.map +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-composer.js.map +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-message-scroller.js.map +1 -1
- package/dist/components/ds-message.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-modal.js.map +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-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-tool-search.js.map +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-panel-tools.js.map +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-radio.js.map +1 -1
- package/dist/components/ds-select-multi.js +1 -1
- package/dist/components/ds-select-multi.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-gradient-picker.js +1 -1
- package/dist/components/ds-shell-gradient-swatch.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-skeleton.js.map +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-swatch-picker.js +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tab-group.js.map +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-card.d.ts → ds-toast.d.ts} +4 -4
- package/dist/components/ds-toast.js +2 -0
- package/dist/components/ds-toast.js.map +1 -0
- package/dist/components/ds-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip-data-viz.js.map +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/{ds-banner.d.ts → ds-typing-indicator.d.ts} +4 -4
- package/dist/components/ds-typing-indicator.js +2 -0
- package/dist/components/ds-typing-indicator.js.map +1 -0
- package/dist/components/{p-DnMCRAwx.js → p-0kEg-Z4f.js} +2 -2
- package/dist/components/p-B8C_yfLQ.js +2 -0
- package/dist/components/p-B8C_yfLQ.js.map +1 -0
- package/dist/components/{p-DiooIO2B.js → p-BEWtqFX7.js} +2 -2
- package/dist/components/p-BMwnjAIq.js +2 -0
- package/dist/components/p-BMwnjAIq.js.map +1 -0
- package/dist/components/{p-Ci_nVk5P.js → p-BkwBtZs3.js} +2 -2
- package/dist/components/p-C3nDIMX5.js +2 -0
- package/dist/components/{p-Dj5MejHv.js.map → p-C3nDIMX5.js.map} +1 -1
- package/dist/components/{p-CJlgONwR.js → p-C8e2A66f.js} +2 -2
- package/dist/components/{p-BRfOCc_h.js → p-CLn7QnE0.js} +2 -2
- package/dist/components/{p-kezp2_Xu.js → p-CPPAndX2.js} +2 -2
- package/dist/components/p-CTFBf97-.js +2 -0
- package/dist/components/{p-CblAABEo.js.map → p-CTFBf97-.js.map} +1 -1
- package/dist/components/{p-BSOZXagj.js → p-CZZYGqKz.js} +2 -2
- package/dist/components/p-C_0Q8Cnp.js +2 -0
- package/dist/components/p-C_0Q8Cnp.js.map +1 -0
- package/dist/components/{p-T0Mzhv3-.js → p-CbckeueL.js} +2 -2
- package/dist/components/p-CjP8sYlo.js +2 -0
- package/dist/components/{p-xB0GPG3-.js.map → p-CjP8sYlo.js.map} +1 -1
- package/dist/components/{p-DaQ0ZE_V.js → p-DJ78wdNv.js} +2 -2
- package/dist/components/p-DTqCBjUj.js +2 -0
- package/dist/components/{p-Dst-OliP.js.map → p-DTqCBjUj.js.map} +1 -1
- package/dist/components/{p-CeFBA7Dx.js → p-Dh4q5TSS.js} +2 -2
- package/dist/components/p-DirD-b2y.js +2 -0
- package/dist/components/{p-BHpWYKtP.js.map → p-DirD-b2y.js.map} +1 -1
- package/dist/components/{p-CiwdnKKp.js → p-DrDHC7V6.js} +2 -2
- package/dist/components/p-DuNZGFkV.js +2 -0
- package/dist/components/p-DuNZGFkV.js.map +1 -0
- package/dist/components/{p-Cijzn3YQ.js → p-Hw-HMjCk.js} +2 -2
- package/dist/components/p-M5pt9I13.js +2 -0
- package/dist/components/p-M5pt9I13.js.map +1 -0
- package/dist/components/{p-B1pWGQn1.js → p-bDx_rlLm.js} +2 -2
- package/dist/docs/components.json +1509 -1530
- package/dist/framework/select-multi-value-accessor.js +3 -3
- package/dist/lib/toast/index.d.ts +2 -0
- package/dist/lib/toast/index.js +158 -0
- package/dist/lib/toast/index.js.map +7 -0
- package/dist/lib/toast/toast-manager.d.ts +3 -0
- package/dist/lib/toast/toast-types.d.ts +85 -0
- package/dist/mcp-data/registry/agent-activity.json +1 -1
- package/dist/mcp-data/registry/agent-response.json +6 -6
- package/dist/mcp-data/registry/agent-source-list.json +1 -1
- package/dist/mcp-data/registry/agent-tool-call.json +1 -1
- package/dist/mcp-data/registry/app-shell.json +1 -1
- package/dist/mcp-data/registry/attachment-list.json +1 -1
- package/dist/mcp-data/registry/avatar.json +1 -1
- package/dist/mcp-data/registry/badge.json +1 -1
- package/dist/mcp-data/registry/bar-nav.json +1 -1
- package/dist/mcp-data/registry/button-filled.json +1 -1
- package/dist/mcp-data/registry/button-unfilled.json +1 -1
- package/dist/mcp-data/registry/card-data-viz-donut.json +2 -2
- package/dist/mcp-data/registry/card-setting.json +99 -13
- package/dist/mcp-data/registry/card-shell-data-viz.json +8 -8
- 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/chip.json +1 -1
- package/dist/mcp-data/registry/code-block.json +1 -1
- package/dist/mcp-data/registry/conversation-list-item.json +5 -5
- package/dist/mcp-data/registry/conversation-list-section.json +1 -1
- package/dist/mcp-data/registry/conversation-list.json +1 -1
- package/dist/mcp-data/registry/divider.json +5 -5
- package/dist/mcp-data/registry/empty-state.json +1 -1
- package/dist/mcp-data/registry/field.json +1 -1
- package/dist/mcp-data/registry/icon.json +2 -2
- package/dist/mcp-data/registry/input.json +1 -1
- package/dist/mcp-data/registry/loader.json +1 -1
- package/dist/mcp-data/registry/markdown.json +1 -1
- package/dist/mcp-data/registry/menu.json +1 -1
- package/dist/mcp-data/registry/message-bubble.json +21 -16
- package/dist/mcp-data/registry/message-composer.json +6 -4
- package/dist/mcp-data/registry/message-scroller.json +2 -2
- package/dist/mcp-data/registry/message.json +7 -6
- package/dist/mcp-data/registry/modal.json +154 -24
- package/dist/mcp-data/registry/panel-nav.json +4 -3
- package/dist/mcp-data/registry/panel-sub-nav.json +2 -2
- package/dist/mcp-data/registry/panel-tool-header.json +1 -1
- package/dist/mcp-data/registry/panel-tool-search.json +1 -1
- package/dist/mcp-data/registry/panel-tools.json +1 -1
- package/dist/mcp-data/registry/radio.json +1 -1
- package/dist/mcp-data/registry/registry.json +479 -156
- package/dist/mcp-data/registry/select-multi.json +1 -1
- package/dist/mcp-data/registry/select.json +1 -1
- package/dist/mcp-data/registry/shell-gradient-picker.json +1 -1
- package/dist/mcp-data/registry/shell-gradient-swatch.json +1 -1
- package/dist/mcp-data/registry/skeleton.json +4 -4
- package/dist/mcp-data/registry/slider.json +1 -1
- package/dist/mcp-data/registry/swatch-picker.json +1 -1
- package/dist/mcp-data/registry/switch.json +1 -1
- package/dist/mcp-data/registry/tab-group.json +1 -1
- package/dist/mcp-data/registry/tag.json +2 -2
- package/dist/mcp-data/registry/text.json +2 -2
- package/dist/mcp-data/registry/toast.json +318 -0
- package/dist/mcp-data/registry/tooltip-data-viz.json +1 -1
- package/dist/mcp-data/registry/tooltip.json +1 -1
- package/dist/mcp-data/registry/typing-indicator.json +127 -0
- package/dist/react/components.d.ts +2 -2
- package/dist/react/components.js +2 -2
- package/dist/react/ds-card-setting.d.ts +2 -2
- package/dist/react/ds-card-setting.js +1 -1
- package/dist/react/ds-modal.d.ts +3 -2
- package/dist/react/ds-modal.js +4 -1
- package/dist/react/ds-toast.d.ts +14 -0
- package/dist/react/ds-toast.js +16 -0
- package/dist/react/{ds-card.d.ts → ds-typing-indicator.d.ts} +3 -3
- package/dist/react/ds-typing-indicator.js +12 -0
- package/dist/types/components/CardSetting/CardSetting.d.ts +9 -6
- package/dist/types/components/CardSetting/index.d.ts +1 -1
- package/dist/types/components/MessageBubble/MessageBubble.d.ts +1 -1
- package/dist/types/components/Modal/Modal.d.ts +21 -18
- package/dist/types/components/Toast/Toast.d.ts +106 -0
- package/dist/types/components/Toast/index.d.ts +2 -0
- package/dist/types/components/TypingIndicator/TypingIndicator.d.ts +6 -0
- package/dist/types/components.d.ts +164 -182
- package/dist/types/toast/index.d.ts +3 -0
- package/dist/types/toast/toast-manager.d.ts +4 -0
- package/dist/types/toast/toast-types.d.ts +86 -0
- package/package.json +12 -8
- package/dist/angular/ds-banner.d.ts +0 -15
- package/dist/angular/ds-card.d.ts +0 -12
- package/dist/components/ds-banner.js +0 -2
- package/dist/components/ds-banner.js.map +0 -1
- package/dist/components/ds-card.js +0 -2
- package/dist/components/ds-card.js.map +0 -1
- package/dist/components/p-BHpWYKtP.js +0 -2
- package/dist/components/p-BO6C8abO.js +0 -2
- package/dist/components/p-BO6C8abO.js.map +0 -1
- package/dist/components/p-CBYuvZKM.js +0 -2
- package/dist/components/p-CBYuvZKM.js.map +0 -1
- package/dist/components/p-CWNdl52Y.js +0 -2
- package/dist/components/p-CWNdl52Y.js.map +0 -1
- package/dist/components/p-CblAABEo.js +0 -2
- package/dist/components/p-CiKGqsA2.js +0 -2
- package/dist/components/p-CiKGqsA2.js.map +0 -1
- package/dist/components/p-DFxqk71w.js +0 -2
- package/dist/components/p-DFxqk71w.js.map +0 -1
- package/dist/components/p-Dj5MejHv.js +0 -2
- package/dist/components/p-Dst-OliP.js +0 -2
- package/dist/components/p-drBA73M_.js +0 -2
- package/dist/components/p-drBA73M_.js.map +0 -1
- package/dist/components/p-xB0GPG3-.js +0 -2
- package/dist/mcp-data/registry/banner.json +0 -206
- package/dist/mcp-data/registry/card.json +0 -126
- package/dist/react/ds-banner.d.ts +0 -12
- package/dist/react/ds-banner.js +0 -12
- package/dist/react/ds-card.js +0 -12
- package/dist/types/components/Banner/Banner.d.ts +0 -31
- package/dist/types/components/Card/Card.d.ts +0 -21
- package/dist/types/components/Card/index.d.ts +0 -2
- /package/dist/components/{p-DnMCRAwx.js.map → p-0kEg-Z4f.js.map} +0 -0
- /package/dist/components/{p-DiooIO2B.js.map → p-BEWtqFX7.js.map} +0 -0
- /package/dist/components/{p-Ci_nVk5P.js.map → p-BkwBtZs3.js.map} +0 -0
- /package/dist/components/{p-CJlgONwR.js.map → p-C8e2A66f.js.map} +0 -0
- /package/dist/components/{p-BRfOCc_h.js.map → p-CLn7QnE0.js.map} +0 -0
- /package/dist/components/{p-kezp2_Xu.js.map → p-CPPAndX2.js.map} +0 -0
- /package/dist/components/{p-BSOZXagj.js.map → p-CZZYGqKz.js.map} +0 -0
- /package/dist/components/{p-T0Mzhv3-.js.map → p-CbckeueL.js.map} +0 -0
- /package/dist/components/{p-DaQ0ZE_V.js.map → p-DJ78wdNv.js.map} +0 -0
- /package/dist/components/{p-CeFBA7Dx.js.map → p-Dh4q5TSS.js.map} +0 -0
- /package/dist/components/{p-CiwdnKKp.js.map → p-DrDHC7V6.js.map} +0 -0
- /package/dist/components/{p-Cijzn3YQ.js.map → p-Hw-HMjCk.js.map} +0 -0
- /package/dist/components/{p-B1pWGQn1.js.map → p-bDx_rlLm.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tagCss","ICON_SIZE","md","sm","xs","Tag","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","icon","intent","contrast","size","rounded","interactive","expanded","isInactive","handleClick","event","dsClick","emit","render","textVariant","CONTROL_TEXT_VARIANT","iconSize","maxWidthStyle","maxWidth","undefined","hostClass","tag","content","h","class","name","color","as","variant","label","Host","style","type","tag__button","ariaControls","disabled","onClick"],"sources":["src/wc/components/Tag/Tag.css?tag=ds-tag&encapsulation=scoped","src/wc/components/Tag/Tag.tsx"],"sourcesContent":["@import '../../utils/tag-chip.css';\n\n/* ── Intent × Contrast — strong ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-strong) { background-color: var(--color-background-strong-neutral); color: var(--color-foreground-medium-neutral); }\n:host(.tag--intent-brand.tag--contrast-strong) { background-color: var(--color-background-strong-brand); color: var(--color-foreground-on-strong-background-primary); }\n:host(.tag--intent-ai.tag--contrast-strong) { background-color: var(--color-background-strong-ai); color: var(--color-foreground-medium-ai); }\n:host(.tag--intent-negative.tag--contrast-strong) { background-color: var(--color-background-strong-negative); color: var(--color-foreground-medium-negative); }\n:host(.tag--intent-warning.tag--contrast-strong) { background-color: var(--color-background-strong-warning); color: var(--color-foreground-medium-warning); }\n:host(.tag--intent-caution.tag--contrast-strong) { background-color: var(--color-background-strong-caution); color: var(--color-foreground-medium-caution); }\n:host(.tag--intent-positive.tag--contrast-strong) { background-color: var(--color-background-strong-positive); color: var(--color-foreground-medium-positive); }\n\n/* ── Intent × Contrast — bold ───────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-bold) { background-color: var(--color-background-bold-neutral); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-brand.tag--contrast-bold) { background-color: var(--color-background-bold-brand); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-ai.tag--contrast-bold) { background-color: var(--color-background-bold-ai); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-negative.tag--contrast-bold) { background-color: var(--color-background-bold-negative); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-warning.tag--contrast-bold) { background-color: var(--color-background-bold-warning); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-caution.tag--contrast-bold) { background-color: var(--color-background-bold-caution); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-positive.tag--contrast-bold) { background-color: var(--color-background-bold-positive); color: var(--color-foreground-on-bold-background-primary); }\n\n/* ── Intent × Contrast — medium ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-medium) { background-color: var(--color-background-medium-neutral); color: var(--color-foreground-strong-neutral); }\n:host(.tag--intent-brand.tag--contrast-medium) { background-color: var(--color-background-medium-brand); color: var(--color-foreground-on-medium-background-primary); }\n:host(.tag--intent-ai.tag--contrast-medium) { background-color: var(--color-background-medium-ai); color: var(--color-foreground-strong-ai); }\n:host(.tag--intent-negative.tag--contrast-medium) { background-color: var(--color-background-medium-negative); color: var(--color-foreground-strong-negative); }\n:host(.tag--intent-warning.tag--contrast-medium) { background-color: var(--color-background-medium-warning); color: var(--color-foreground-strong-warning); }\n:host(.tag--intent-caution.tag--contrast-medium) { background-color: var(--color-background-medium-caution); color: var(--color-foreground-strong-caution); }\n:host(.tag--intent-positive.tag--contrast-medium) { background-color: var(--color-background-medium-positive); color: var(--color-foreground-strong-positive); }\n\n/* ── Intent × Contrast — faint ──────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-faint) { background-color: var(--color-background-faint-neutral); color: var(--color-foreground-bold-neutral); }\n:host(.tag--intent-brand.tag--contrast-faint) { background-color: var(--color-background-faint-brand); color: var(--color-foreground-bold-brand); }\n:host(.tag--intent-ai.tag--contrast-faint) { background-color: var(--color-background-faint-ai); color: var(--color-foreground-bold-ai); }\n:host(.tag--intent-negative.tag--contrast-faint) { background-color: var(--color-background-faint-negative); color: var(--color-foreground-bold-negative); }\n:host(.tag--intent-warning.tag--contrast-faint) { background-color: var(--color-background-faint-warning); color: var(--color-foreground-bold-warning); }\n:host(.tag--intent-caution.tag--contrast-faint) { background-color: var(--color-background-faint-caution); color: var(--color-foreground-bold-caution); }\n:host(.tag--intent-positive.tag--contrast-faint) { background-color: var(--color-background-faint-positive); color: var(--color-foreground-bold-positive); }\n\n/* ── Interactive menu trigger ───────────────────────────────────────────── */\n\n:host(.tag--interactive) {\n padding: 0;\n gap: 0;\n}\n\n.tag__button {\n all: unset;\n position: relative;\n z-index: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n min-width: 0;\n max-width: 100%;\n height: 100%;\n padding: 0 var(--ds-control-padding-inline);\n gap: var(--ds-control-gap);\n border-radius: inherit;\n color: inherit;\n cursor: pointer;\n}\n\n.tag__button:disabled {\n cursor: not-allowed;\n}\n\n.tag__button--expanded::after {\n background: var(--ds-interaction-pressed);\n}\n\n/* Hover/press wash stays above the Tag's semantic background. */\n\n/* ── Icons ──────────────────────────────────────────────────────────────── */\n\n.tag__prefix-icon,\n.tag__suffix-icon {\n position: relative;\n z-index: 2;\n display: inline-flex;\n flex-shrink: 0;\n width: var(--ds-control-icon);\n height: var(--ds-control-icon);\n}\n","import { Component, Event, EventEmitter, Prop, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT } from '../../utils';\n\nexport type TagIntent = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';\nexport type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';\nexport type TagSize = 'md' | 'sm' | 'xs';\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<TagSize, 'md' | 'sm' | 'xs'> = {\n md: 'md',\n sm: 'sm',\n xs: 'xs',\n};\n\n@Component({\n tag: 'ds-tag',\n styleUrl: 'Tag.css',\n scoped: true,\n})\nexport class Tag {\n @Prop() label!: string;\n /** Canonical icon name rendered before the visible label. */\n @Prop() icon: string = '';\n @Prop() intent: TagIntent = 'neutral';\n @Prop() contrast: TagContrast = 'faint';\n @Prop() size: TagSize = 'md';\n @Prop() rounded: boolean = false;\n @Prop() maxWidth: string | number | undefined;\n /** Render a menu-trigger button with a fixed ChevronUpDown suffix. */\n @Prop() interactive: boolean = false;\n /** Controlled open state for the menu triggered by an interactive Tag. */\n @Prop() expanded: boolean = false;\n /** ID of the menu controlled by an interactive Tag. */\n @Prop() ariaControls: string | undefined;\n /** Disable an interactive Tag and apply the shared inactive treatment. */\n @Prop() isInactive: boolean = false;\n\n /** Fired when the interactive Tag button is activated. */\n @Event() dsClick!: EventEmitter<MouseEvent>;\n\n private handleClick = (event: MouseEvent) => {\n if (!this.interactive || this.isInactive) return;\n this.dsClick.emit(event);\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 const hostClass = {\n 'tag': true,\n [`tag--intent-${this.intent}`]: true,\n [`tag--contrast-${this.contrast}`]: 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--interactive': this.interactive,\n 'ds-control-inactive': this.interactive && this.isInactive,\n };\n const content = [\n this.icon && (\n <ds-icon\n class=\"tag__prefix-icon\"\n name={this.icon}\n size={iconSize}\n color=\"inherit\"\n ></ds-icon>\n ),\n <ds-text class=\"tag__label\" as=\"span\" variant={textVariant} color=\"inherit\">\n {this.label}\n </ds-text>,\n ];\n\n if (!this.interactive) {\n return <Host class={hostClass} style={maxWidthStyle}>{content}</Host>;\n }\n\n return (\n <Host class={hostClass} style={maxWidthStyle}>\n <button\n type=\"button\"\n class={{\n 'tag__button': true,\n 'tag__button--expanded': this.expanded,\n 'ds-interaction-fill': true,\n 'ds-focus-ring-inset': true,\n }}\n aria-haspopup=\"menu\"\n aria-expanded={this.expanded ? 'true' : 'false'}\n aria-controls={this.ariaControls}\n disabled={this.isInactive || undefined}\n onClick={this.handleClick}\n >\n {content}\n <ds-icon\n class=\"tag__suffix-icon\"\n name=\"ChevronUpDown\"\n size={iconSize}\n color=\"inherit\"\n ></ds-icon>\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"yKAAA,MAAMA,EAAS,IAAM,2sZCWrB,MAAMC,EAAiD,CACrDC,GAAI,KACJC,GAAI,KACJC,GAAI,M,MAQOC,EAAGC,EAAA,MAAAD,UAAAE,EALhB,WAAAC,CAAAC,G,2EAQUC,KAAAC,KAAe,GACfD,KAAAE,OAAoB,UACpBF,KAAAG,SAAwB,QACxBH,KAAAI,KAAgB,KAChBJ,KAAAK,QAAmB,MAGnBL,KAAAM,YAAuB,MAEvBN,KAAAO,SAAoB,MAIpBP,KAAAQ,WAAsB,MAKtBR,KAAAS,YAAeC,IACrB,IAAKV,KAAKM,aAAeN,KAAKQ,WAAY,OAC1CR,KAAKW,QAAQC,KAAKF,EAAM,CAmE3B,CAhEC,MAAAG,GACE,MAAMC,EAAcC,EAAqBf,KAAKI,MAC9C,MAAMY,EAAWzB,EAAUS,KAAKI,MAEhC,MAAMa,EAAgBjB,KAAKkB,UAAY,KACnC,CAAEA,gBAAiBlB,KAAKkB,WAAa,SAAW,GAAGlB,KAAKkB,aAAelB,KAAKkB,UAC5EC,UACJ,MAAMC,EAAY,CAChBC,IAAO,KACP,CAAC,eAAerB,KAAKE,UAAW,KAChC,CAAC,iBAAiBF,KAAKG,YAAa,KACpC,CAAC,aAAaH,KAAKI,QAAS,KAC5B,iBAAkBJ,KAAKI,OAAS,KAChC,iBAAkBJ,KAAKI,OAAS,KAChC,iBAAkBJ,KAAKI,OAAS,KAChC,eAAgBJ,KAAKK,QACrB,mBAAoBL,KAAKM,YACzB,sBAAuBN,KAAKM,aAAeN,KAAKQ,YAElD,MAAMc,EAAU,CACdtB,KAAKC,MACHsB,EAAA,WACEC,MAAM,mBACNC,KAAMzB,KAAKC,KACXG,KAAMY,EACNU,MAAM,YAGVH,EAAA,WAASC,MAAM,aAAaG,GAAG,OAAOC,QAASd,EAAaY,MAAM,WAC/D1B,KAAK6B,QAIV,IAAK7B,KAAKM,YAAa,CACrB,OAAOiB,EAACO,EAAI,CAACN,MAAOJ,EAAWW,MAAOd,GAAgBK,E,CAGxD,OACEC,EAACO,EAAI,CAACN,MAAOJ,EAAWW,MAAOd,GAC7BM,EAAA,UACES,KAAK,SACLR,MAAO,CACLS,YAAe,KACf,wBAAyBjC,KAAKO,SAC9B,sBAAuB,KACvB,sBAAuB,MACxB,gBACa,OAAM,gBACLP,KAAKO,SAAW,OAAS,QAAO,gBAChCP,KAAKkC,aACpBC,SAAUnC,KAAKQ,YAAcW,UAC7BiB,QAASpC,KAAKS,aAEba,EACDC,EAAA,WACEC,MAAM,mBACNC,KAAK,gBACLrB,KAAMY,EACNU,MAAM,a","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["tagCss","ICON_SIZE","md","sm","xs","Tag","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","icon","intent","contrast","size","rounded","interactive","expanded","isInactive","handleClick","event","dsClick","emit","render","textVariant","CONTROL_TEXT_VARIANT","iconSize","maxWidthStyle","maxWidth","undefined","hostClass","tag","content","h","class","name","color","as","variant","label","Host","style","type","tag__button","ariaControls","disabled","onClick"],"sources":["src/wc/components/Tag/Tag.css?tag=ds-tag&encapsulation=scoped","src/wc/components/Tag/Tag.tsx"],"sourcesContent":["@import '../../utils/tag-chip.css';\n\n/* ── Intent × Contrast — strong ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-strong) { background-color: var(--color-background-strong-neutral); color: var(--color-foreground-medium-neutral); }\n:host(.tag--intent-brand.tag--contrast-strong) { background-color: var(--color-background-strong-brand); color: var(--color-foreground-on-strong-background-primary); }\n:host(.tag--intent-ai.tag--contrast-strong) { background-color: var(--color-background-strong-ai); color: var(--color-foreground-medium-ai); }\n:host(.tag--intent-negative.tag--contrast-strong) { background-color: var(--color-background-strong-negative); color: var(--color-foreground-medium-negative); }\n:host(.tag--intent-warning.tag--contrast-strong) { background-color: var(--color-background-strong-warning); color: var(--color-foreground-medium-warning); }\n:host(.tag--intent-caution.tag--contrast-strong) { background-color: var(--color-background-strong-caution); color: var(--color-foreground-medium-caution); }\n:host(.tag--intent-positive.tag--contrast-strong) { background-color: var(--color-background-strong-positive); color: var(--color-foreground-medium-positive); }\n\n/* ── Intent × Contrast — bold ───────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-bold) { background-color: var(--color-background-bold-neutral); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-brand.tag--contrast-bold) { background-color: var(--color-background-bold-brand); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-ai.tag--contrast-bold) { background-color: var(--color-background-bold-ai); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-negative.tag--contrast-bold) { background-color: var(--color-background-bold-negative); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-warning.tag--contrast-bold) { background-color: var(--color-background-bold-warning); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-caution.tag--contrast-bold) { background-color: var(--color-background-bold-caution); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-positive.tag--contrast-bold) { background-color: var(--color-background-bold-positive); color: var(--color-foreground-on-bold-background-primary); }\n\n/* ── Intent × Contrast — medium ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-medium) { background-color: var(--color-background-medium-neutral); color: var(--color-foreground-strong-neutral); }\n:host(.tag--intent-brand.tag--contrast-medium) { background-color: var(--color-background-medium-brand); color: var(--color-foreground-on-medium-background-primary); }\n:host(.tag--intent-ai.tag--contrast-medium) { background-color: var(--color-background-medium-ai); color: var(--color-foreground-strong-ai); }\n:host(.tag--intent-negative.tag--contrast-medium) { background-color: var(--color-background-medium-negative); color: var(--color-foreground-strong-negative); }\n:host(.tag--intent-warning.tag--contrast-medium) { background-color: var(--color-background-medium-warning); color: var(--color-foreground-strong-warning); }\n:host(.tag--intent-caution.tag--contrast-medium) { background-color: var(--color-background-medium-caution); color: var(--color-foreground-strong-caution); }\n:host(.tag--intent-positive.tag--contrast-medium) { background-color: var(--color-background-medium-positive); color: var(--color-foreground-strong-positive); }\n\n/* ── Intent × Contrast — faint ──────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-faint) { background-color: var(--color-background-faint-neutral); color: var(--color-foreground-bold-neutral); }\n:host(.tag--intent-brand.tag--contrast-faint) { background-color: var(--color-background-faint-brand); color: var(--color-foreground-bold-brand); }\n:host(.tag--intent-ai.tag--contrast-faint) { background-color: var(--color-background-faint-ai); color: var(--color-foreground-bold-ai); }\n:host(.tag--intent-negative.tag--contrast-faint) { background-color: var(--color-background-faint-negative); color: var(--color-foreground-bold-negative); }\n:host(.tag--intent-warning.tag--contrast-faint) { background-color: var(--color-background-faint-warning); color: var(--color-foreground-bold-warning); }\n:host(.tag--intent-caution.tag--contrast-faint) { background-color: var(--color-background-faint-caution); color: var(--color-foreground-bold-caution); }\n:host(.tag--intent-positive.tag--contrast-faint) { background-color: var(--color-background-faint-positive); color: var(--color-foreground-bold-positive); }\n\n/* ── Interactive menu trigger ───────────────────────────────────────────── */\n\n:host(.tag--interactive) {\n padding: 0;\n gap: 0;\n}\n\n.tag__button {\n all: unset;\n position: relative;\n z-index: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n min-width: 0;\n max-width: 100%;\n height: 100%;\n padding: 0 var(--ds-control-padding-inline);\n gap: var(--ds-control-gap);\n border-radius: inherit;\n color: inherit;\n cursor: pointer;\n}\n\n.tag__button:disabled {\n cursor: not-allowed;\n}\n\n.tag__button--expanded::after {\n background: var(--ds-interaction-pressed);\n}\n\n/* Hover/press wash stays above the Tag's semantic background. */\n\n/* ── Icons ──────────────────────────────────────────────────────────────── */\n\n.tag__prefix-icon,\n.tag__suffix-icon {\n position: relative;\n z-index: 2;\n display: inline-flex;\n flex-shrink: 0;\n width: var(--ds-control-icon);\n height: var(--ds-control-icon);\n}\n","import { Component, Event, EventEmitter, Prop, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT } from '../../utils';\n\nexport type TagIntent = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';\nexport type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';\nexport type TagSize = 'md' | 'sm' | 'xs';\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<TagSize, 'md' | 'sm' | 'xs'> = {\n md: 'md',\n sm: 'sm',\n xs: 'xs',\n};\n\n@Component({\n tag: 'ds-tag',\n styleUrl: 'Tag.css',\n scoped: true,\n})\nexport class Tag {\n @Prop() label!: string;\n /** Canonical icon name rendered before the visible label. */\n @Prop() icon: string = '';\n @Prop() intent: TagIntent = 'neutral';\n @Prop() contrast: TagContrast = 'faint';\n @Prop() size: TagSize = 'md';\n @Prop() rounded: boolean = false;\n @Prop() maxWidth: string | number | undefined;\n /** Render a menu-trigger button with a fixed ChevronUpDown suffix. */\n @Prop() interactive: boolean = false;\n /** Controlled open state for the menu triggered by an interactive Tag. */\n @Prop() expanded: boolean = false;\n /** ID of the menu controlled by an interactive Tag. */\n @Prop() ariaControls: string | undefined;\n /** Disable an interactive Tag and apply the shared inactive treatment. */\n @Prop() isInactive: boolean = false;\n\n /** Fired when the interactive Tag button is activated. */\n @Event() dsClick!: EventEmitter<MouseEvent>;\n\n private handleClick = (event: MouseEvent) => {\n if (!this.interactive || this.isInactive) return;\n this.dsClick.emit(event);\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 const hostClass = {\n 'tag': true,\n [`tag--intent-${this.intent}`]: true,\n [`tag--contrast-${this.contrast}`]: 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--interactive': this.interactive,\n 'ds-control-inactive': this.interactive && this.isInactive,\n };\n const content = [\n this.icon && (\n <ds-icon\n class=\"tag__prefix-icon\"\n name={this.icon}\n size={iconSize}\n color=\"inherit\"\n ></ds-icon>\n ),\n <ds-text class=\"tag__label\" as=\"span\" variant={textVariant} color=\"inherit\">\n {this.label}\n </ds-text>,\n ];\n\n if (!this.interactive) {\n return <Host class={hostClass} style={maxWidthStyle}>{content}</Host>;\n }\n\n return (\n <Host class={hostClass} style={maxWidthStyle}>\n <button\n type=\"button\"\n class={{\n 'tag__button': true,\n 'tag__button--expanded': this.expanded,\n 'ds-interaction-fill': true,\n 'ds-focus-ring-inset': true,\n }}\n aria-haspopup=\"menu\"\n aria-expanded={this.expanded ? 'true' : 'false'}\n aria-controls={this.ariaControls}\n disabled={this.isInactive || undefined}\n onClick={this.handleClick}\n >\n {content}\n <ds-icon\n class=\"tag__suffix-icon\"\n name=\"ChevronUpDown\"\n size={iconSize}\n color=\"inherit\"\n ></ds-icon>\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"yKAAA,MAAMA,EAAS,IAAM,6wZCWrB,MAAMC,EAAiD,CACrDC,GAAI,KACJC,GAAI,KACJC,GAAI,M,MAQOC,EAAGC,EAAA,MAAAD,UAAAE,EALhB,WAAAC,CAAAC,G,2EAQUC,KAAAC,KAAe,GACfD,KAAAE,OAAoB,UACpBF,KAAAG,SAAwB,QACxBH,KAAAI,KAAgB,KAChBJ,KAAAK,QAAmB,MAGnBL,KAAAM,YAAuB,MAEvBN,KAAAO,SAAoB,MAIpBP,KAAAQ,WAAsB,MAKtBR,KAAAS,YAAeC,IACrB,IAAKV,KAAKM,aAAeN,KAAKQ,WAAY,OAC1CR,KAAKW,QAAQC,KAAKF,EAAM,CAmE3B,CAhEC,MAAAG,GACE,MAAMC,EAAcC,EAAqBf,KAAKI,MAC9C,MAAMY,EAAWzB,EAAUS,KAAKI,MAEhC,MAAMa,EAAgBjB,KAAKkB,UAAY,KACnC,CAAEA,gBAAiBlB,KAAKkB,WAAa,SAAW,GAAGlB,KAAKkB,aAAelB,KAAKkB,UAC5EC,UACJ,MAAMC,EAAY,CAChBC,IAAO,KACP,CAAC,eAAerB,KAAKE,UAAW,KAChC,CAAC,iBAAiBF,KAAKG,YAAa,KACpC,CAAC,aAAaH,KAAKI,QAAS,KAC5B,iBAAkBJ,KAAKI,OAAS,KAChC,iBAAkBJ,KAAKI,OAAS,KAChC,iBAAkBJ,KAAKI,OAAS,KAChC,eAAgBJ,KAAKK,QACrB,mBAAoBL,KAAKM,YACzB,sBAAuBN,KAAKM,aAAeN,KAAKQ,YAElD,MAAMc,EAAU,CACdtB,KAAKC,MACHsB,EAAA,WACEC,MAAM,mBACNC,KAAMzB,KAAKC,KACXG,KAAMY,EACNU,MAAM,YAGVH,EAAA,WAASC,MAAM,aAAaG,GAAG,OAAOC,QAASd,EAAaY,MAAM,WAC/D1B,KAAK6B,QAIV,IAAK7B,KAAKM,YAAa,CACrB,OAAOiB,EAACO,EAAI,CAACN,MAAOJ,EAAWW,MAAOd,GAAgBK,E,CAGxD,OACEC,EAACO,EAAI,CAACN,MAAOJ,EAAWW,MAAOd,GAC7BM,EAAA,UACES,KAAK,SACLR,MAAO,CACLS,YAAe,KACf,wBAAyBjC,KAAKO,SAC9B,sBAAuB,KACvB,sBAAuB,MACxB,gBACa,OAAM,gBACLP,KAAKO,SAAW,OAAS,QAAO,gBAChCP,KAAKkC,aACpBC,SAAUnC,KAAKQ,YAAcW,UAC7BiB,QAASpC,KAAKS,aAEba,EACDC,EAAA,WACEC,MAAM,mBACNC,KAAK,gBACLrB,KAAMY,EACNU,MAAM,a","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{T as o,d as s}from"./p-
|
|
1
|
+
import{T as o,d as s}from"./p-CZZYGqKz.js";const t=o;const p=s;export{t as DsText,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-text.js.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { Components, JSX } from "../types/components";
|
|
2
2
|
|
|
3
|
-
interface
|
|
4
|
-
export const
|
|
5
|
-
prototype:
|
|
6
|
-
new ():
|
|
3
|
+
interface DsToast extends Components.DsToast, HTMLElement {}
|
|
4
|
+
export const DsToast: {
|
|
5
|
+
prototype: DsToast;
|
|
6
|
+
new (): DsToast;
|
|
7
7
|
};
|
|
8
8
|
/**
|
|
9
9
|
* Used to define this component and all nested components recursively.
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as t,H as s,c as i,h as e,a as n,t as o}from"./index.js";import{c as a}from"./p-B8C_yfLQ.js";import{d as r}from"./p-DrDHC7V6.js";import{d as h}from"./p-DTqCBjUj.js";import{d as c}from"./p-DuNZGFkV.js";import{d}from"./p-Cpr3K41-.js";import{d as l}from"./p-CZZYGqKz.js";import{T as f}from"./p-C_0Q8Cnp.js";import{a as u,r as m}from"./p-BHtg1fh3.js";import{r as p}from"./p-BWUTr_XN.js";function g(t,s){const i=typeof t==="function"?t(s):t;return typeof i==="string"?{description:i}:i}class v{constructor(){this.records=[];this.listeners=new Set;this.nextId=0}add(t){const s=t.id||`ds-toast-${++this.nextId}`;const i=this.records.findIndex((t=>t.id===s));if(!t.title?.trim()&&!t.description?.trim()){console.warn(`[ds-toast] Toast "${s}" should provide a title or description.`)}if(i>=0){const e=this.records[i];const n={...e,...t,id:s,priority:t.priority??e.priority,transitionStatus:"active",closeReason:undefined,updateKey:e.updateKey+1,timerKey:e.timerKey+1};this.records=[n,...this.records.filter(((t,s)=>s!==i))];this.emit();return s}const e={...t,id:s,priority:t.priority??"low",transitionStatus:"starting",updateKey:0,timerKey:0};this.records=[e,...this.records];this.emit();return s}update(t,s){const i=this.records.findIndex((s=>s.id===t));if(i<0)return;const e=this.records[i];const n=Object.prototype.hasOwnProperty.call(s,"timeout")||e.type==="loading"&&s.type!==undefined&&s.type!=="loading";const o={...e,...s,id:t,priority:s.priority??e.priority,updateKey:e.updateKey+1,timerKey:n?e.timerKey+1:e.timerKey};this.records=this.records.map(((t,s)=>s===i?o:t));this.emit()}close(t,s="programmatic"){const i=this.records.findIndex((s=>s.id===t));if(i<0||this.records[i].transitionStatus==="ending")return;const e={...this.records[i],transitionStatus:"ending",closeReason:s};this.records=this.records.map(((t,s)=>s===i?e:t));this.emit();e.onClose?.({id:t,reason:s,toast:e})}closeAll(t="programmatic"){for(const s of[...this.records])this.close(s.id,t)}async promise(t,s){const i=g(s.loading,undefined);const e=this.add({...i,type:i.type??"loading",timeout:0});try{const i=await t;const n=g(s.success,i);this.update(e,{...n,type:n.type??"success",timeout:n.timeout});return i}catch(t){const i=g(s.error,t);this.update(e,{...i,type:i.type??"error",timeout:i.timeout});throw t}}subscribe(t){this.listeners.add(t);t(this.getSnapshot());return()=>{this.listeners.delete(t)}}getSnapshot(){return this.records.map((t=>({...t})))}activate(t){const s=this.records.find((s=>s.id===t));if(!s||s.transitionStatus!=="starting")return;this.records=this.records.map((s=>s.id===t?{...s,transitionStatus:"active"}:s));this.emit()}remove(t){const s=this.records.find((s=>s.id===t));if(!s||s.transitionStatus!=="ending")return null;const i=s.closeReason??"programmatic";this.records=this.records.filter((s=>s.id!==t));this.emit();const e={id:t,reason:i,toast:s};return e}notifyRemove(t){const{toast:s}=t;s.onRemove?.(t)}emit(){const t=this.getSnapshot();for(const s of this.listeners)s(t)}}function w(){return new v}const b=Symbol.for("@ds-mo/ui/default-toast-manager");const y=globalThis;const x=y[b];const T=x??w();if(!x)y[b]=T;const M=()=>`.sc-ds-toast-h{display:contents}.toast-region.sc-ds-toast{position:fixed;inset:0;z-index:var(--dimension-z-index-floating);pointer-events:none;outline:none}.toast-viewport.sc-ds-toast{position:absolute;right:var(--dimension-space-200);bottom:var(--dimension-space-200);display:grid;width:min( var(--dimension-card-width-sm), calc(100vw - 2 * var(--dimension-space-200)) )}.toast-positioner.sc-ds-toast{grid-area:1 / 1;align-self:end;justify-self:center;width:100%;pointer-events:auto;transform:translateY( calc(-1 * var(--toast-index) * var(--dimension-space-100)) );transition:transform var(--effect-motion-short-3), width var(--effect-motion-short-3)}.toast-viewport.sc-ds-toast:not([data-expanded]) .toast-positioner.sc-ds-toast{width:calc( 100% - 2 * var(--toast-index) * var(--dimension-space-100) )}.toast-viewport[data-expanded].sc-ds-toast .toast-positioner.sc-ds-toast{transform:translateY(calc(-1 * var(--toast-offset-y)))}.toast-positioner[data-limited].sc-ds-toast{visibility:hidden;pointer-events:none}.toast-positioner--anchored.sc-ds-toast{position:fixed;width:min( var(--dimension-card-width-sm), calc(100vw - 2 * var(--dimension-space-200)) );transform:none}.toast-positioner--anchored[data-positioned='false'].sc-ds-toast{visibility:hidden}.toast-surface.sc-ds-toast{position:relative;display:block;box-sizing:border-box;width:100%;height:var(--toast-height, auto);padding:var(--dimension-space-200);overflow:hidden;color:var(--color-foreground-primary);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-050);box-shadow:var(--effect-elevation-elevated-floating);transform:translate( var(--toast-swipe-movement-x), var(--toast-swipe-movement-y) );animation:toast-enter var(--effect-motion-short-2) both}.toast-positioner--ending.sc-ds-toast .toast-surface.sc-ds-toast{animation:toast-exit var(--effect-motion-short-3) both}.toast-surface--swiping.sc-ds-toast{transition:none;user-select:none}.toast-content.sc-ds-toast{display:flex;flex-direction:column;min-width:0;padding-inline-end:var(--dimension-size-500);transition:opacity var(--effect-motion-short-3)}.toast-copy.sc-ds-toast{display:flex;flex-direction:column;min-width:0;min-height:var(--typography-lineheight-md);margin-block:calc(-1 * var(--dimension-space-025));gap:var(--dimension-space-050)}.toast-title.sc-ds-toast,.toast-description.sc-ds-toast{min-width:0}.toast-action.sc-ds-toast{align-self:start;margin-top:calc( var(--dimension-space-200) + var(--dimension-space-025) )}.toast-close.sc-ds-toast{position:absolute;top:var(--dimension-space-100);right:var(--dimension-space-100);transition:opacity var(--effect-motion-short-3)}.toast-viewport.sc-ds-toast:not([data-expanded]) .toast-positioner[data-behind].sc-ds-toast .toast-content.sc-ds-toast,.toast-viewport.sc-ds-toast:not([data-expanded]) .toast-positioner[data-behind].sc-ds-toast .toast-close.sc-ds-toast{opacity:0}.toast-assertive-announcer.sc-ds-toast{position:absolute;width:var(--dimension-size-100);height:var(--dimension-size-100);padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}@keyframes toast-enter{from{opacity:0;transform:translateY(var(--dimension-space-100))}to{opacity:1;transform:translateY(0)}}@keyframes toast-exit{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.toast-positioner.sc-ds-toast,.toast-surface.sc-ds-toast,.toast-content.sc-ds-toast,.toast-close.sc-ds-toast,.toast-positioner--ending.sc-ds-toast .toast-surface.sc-ds-toast{transition:none;animation:none}.toast-positioner--ending.sc-ds-toast .toast-surface.sc-ds-toast{opacity:0}}`;const k=40;const A=10;const C="__global-stack__";const P='button,a,input,textarea,select,[role="button"],[data-ds-toast-swipe-ignore]';const S=new WeakMap;const E=new Set;let F=null;let D=0;const j=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.dsToastClose=i(this,"dsToastClose");this.dsToastRemove=i(this,"dsToastRemove");this.dsToastAction=i(this,"dsToastAction");this.manager=T;this.limit=3;this.timeout=f.animationDelayLong2;this.label="Notifications";this.closeLabel="Close notification";this.swipeDirections=["down","right"];this.records=[];this.expanded=false;this.keyboardActive=false;this.swipe=null;this.layoutVersion=0;this.instanceId=++D;this.domIds=new Map;this.timers=new Map;this.closeWatchdogs=new Map;this.closeFrames=new Map;this.closeEvents=new Set;this.activationFrames=new Map;this.pauseReasons=new Set;this.hoveredIds=new Set;this.heights=new Map;this.measuredUpdateKeys=new Map;this.anchoredPositions=new Map;this.dismissedSwipeDirections=new Map;this.observedElements=new Set;this.pendingRemovals=[];this.unsubscribe=null;this.attachedManager=null;this.previousFocus=null;this.resizeObserver=null;this.mutationObserver=null;this.layoutFrame=null;this.activeSwipe=null;this.nextDomId=0;this.connected=false;this.pendingHoverLeave=false;this.handleWindowBlur=()=>this.pauseTimers("window");this.handleWindowFocus=()=>this.resumeTimers("window");this.handleVisibilityChange=()=>{if(document.hidden)this.pauseTimers("document");else this.resumeTimers("document")};this.handleFocusIn=()=>{const t=document.activeElement;if(!(t instanceof s)||!t.matches(":focus-visible"))return;F=this;this.keyboardActive=true;this.expanded=true;this.pauseTimers("focus")};this.handleFocusOut=t=>{const s=t.relatedTarget;if(s instanceof Node&&this.el.contains(s))return;if(!this.keyboardActive)return;this.keyboardActive=false;this.expanded=this.hoveredIds.size>0;this.resumeTimers("focus")};this.handleDocumentKeyDown=t=>{if(t.key!=="F6")return;const s=Array.from(E).filter((t=>t.activeRecords.length>0));const i=F&&F.activeRecords.length?F:s[s.length-1];if(i!==this)return;t.preventDefault();if(!this.el.contains(document.activeElement)){this.previousFocus=document.activeElement}this.keyboardActive=true;this.regionElement?.focus()};this.handleRegionKeyDown=t=>{if(t.key==="Escape"){const s=t.target;const i=s.closest(".toast-positioner");const e=i?.dataset["toastId"]??this.activeRecords[0]?.id;if(e){t.preventDefault();this.manager.close(e,"escape")}return}if(t.key==="Tab"&&t.shiftKey&&t.target===this.regionElement){t.preventDefault();this.restorePreviousFocus()}};this.handleWindowResize=()=>{this.heights.clear();this.measuredUpdateKeys.clear();this.layoutVersion+=1;this.scheduleLayout()};this.scheduleLayout=()=>{if(this.layoutFrame!==null)return;this.layoutFrame=requestAnimationFrame((()=>{this.layoutFrame=null;this.measureLayout()}))}}connectedCallback(){this.connect()}componentDidLoad(){this.connect()}connect(){if(this.connected)return;this.connected=true;this.resizeObserver??(this.resizeObserver=new ResizeObserver((()=>this.scheduleLayout())));this.mutationObserver??(this.mutationObserver=new MutationObserver((()=>this.scheduleLayout())));this.mutationObserver.observe(document.body,{childList:true,subtree:true});if(!this.unsubscribe)this.attachManager(this.manager);window.addEventListener("blur",this.handleWindowBlur);window.addEventListener("focus",this.handleWindowFocus);window.addEventListener("resize",this.handleWindowResize);window.addEventListener("scroll",this.scheduleLayout,true);document.addEventListener("keydown",this.handleDocumentKeyDown);document.addEventListener("visibilitychange",this.handleVisibilityChange);E.add(this);if(!F)F=this}componentDidRender(){this.syncObservedElements();this.flushPendingRemovals();this.scheduleLayout()}disconnectedCallback(){this.connected=false;this.flushPendingRemovals();this.detachManager();this.resetManagerState();this.resizeObserver?.disconnect();this.resizeObserver=null;this.mutationObserver?.disconnect();this.mutationObserver=null;this.observedElements.clear();if(this.layoutFrame!==null)cancelAnimationFrame(this.layoutFrame);this.layoutFrame=null;window.removeEventListener("blur",this.handleWindowBlur);window.removeEventListener("focus",this.handleWindowFocus);window.removeEventListener("resize",this.handleWindowResize);window.removeEventListener("scroll",this.scheduleLayout,true);document.removeEventListener("keydown",this.handleDocumentKeyDown);document.removeEventListener("visibilitychange",this.handleVisibilityChange);E.delete(this);if(F===this){const t=Array.from(E);F=t[t.length-1]??null}}onManagerChange(t){this.detachManager();this.resetManagerState();if(this.connected)this.attachManager(t)}onTimeoutChange(){for(const t of this.timers.values()){if(t.handle)clearTimeout(t.handle)}this.timers.clear();this.syncTimers()}attachManager(t){const s=S.get(t);if(s&&s!==this){console.warn("[ds-toast] A manager can control only one connected ds-toast instance.");return}S.set(t,this);this.attachedManager=t;this.unsubscribe=t.subscribe((t=>{this.records=t;this.syncLifecycle(t);this.scheduleLayout()}))}detachManager(){this.unsubscribe?.();this.unsubscribe=null;if(this.attachedManager&&S.get(this.attachedManager)===this){S.delete(this.attachedManager)}this.attachedManager=null}resetManagerState(){this.flushPendingRemovals();if(this.el.contains(document.activeElement))this.restorePreviousFocus();this.clearAllTimers();for(const t of this.activationFrames.values())cancelAnimationFrame(t);for(const t of this.closeFrames.values())cancelAnimationFrame(t);this.activationFrames.clear();this.closeFrames.clear();this.closeEvents.clear();this.pauseReasons.clear();this.hoveredIds.clear();this.pendingHoverLeave=false;this.heights.clear();this.measuredUpdateKeys.clear();this.anchoredPositions.clear();this.dismissedSwipeDirections.clear();this.domIds.clear();this.activeSwipe=null;this.swipe=null;this.expanded=false;this.keyboardActive=false;this.records=[];this.resizeObserver?.disconnect();this.observedElements.clear()}syncObservedElements(){const t=new Set(this.el.querySelectorAll(".toast-positioner"));for(const s of this.records){if(!s.positioner)continue;const i=this.resolveAnchor(s.positioner.anchor);if(i)t.add(i)}for(const s of this.observedElements){if(!t.has(s)){this.resizeObserver?.unobserve(s);this.observedElements.delete(s)}}for(const s of t){if(this.observedElements.has(s))continue;this.resizeObserver?.observe(s);this.observedElements.add(s)}}flushPendingRemovals(){for(const t of this.pendingRemovals.splice(0)){t.manager.notifyRemove(t.context);this.dsToastRemove.emit({id:t.context.id,toast:t.context.toast})}}syncLifecycle(t){const s=new Set(t.map((t=>t.id)));for(const t of this.hoveredIds){if(t!==C&&!s.has(t))this.hoveredIds.delete(t)}const i=t.some((t=>t.transitionStatus==="ending"));if(this.pendingHoverLeave&&!i&&!this.hoveredIds.size){this.pendingHoverLeave=false;this.expanded=false;this.resumeTimers("hover")}else if(!this.hoveredIds.size&&!this.pendingHoverLeave){this.resumeTimers("hover")}for(const[t,i]of this.timers){if(s.has(t))continue;if(i.handle)clearTimeout(i.handle);this.timers.delete(t)}for(const[t,i]of this.closeWatchdogs){if(s.has(t))continue;clearTimeout(i);this.closeWatchdogs.delete(t)}for(const[t,i]of this.activationFrames){if(s.has(t))continue;cancelAnimationFrame(i);this.activationFrames.delete(t)}for(const[t,i]of this.closeFrames){if(s.has(t))continue;cancelAnimationFrame(i);this.closeFrames.delete(t)}for(const t of this.domIds.keys()){if(s.has(t))continue;this.closeEvents.delete(t);this.domIds.delete(t);this.heights.delete(t);this.measuredUpdateKeys.delete(t);this.anchoredPositions.delete(t);this.dismissedSwipeDirections.delete(t)}for(const s of t){this.ensureDomId(s.id);if(s.transitionStatus==="starting"&&!this.activationFrames.has(s.id)){const t=this.attachedManager;const i=requestAnimationFrame((()=>{this.activationFrames.delete(s.id);t?.activate(s.id)}));this.activationFrames.set(s.id,i)}if(s.transitionStatus==="ending"){this.clearToastTimer(s.id);this.beginRemoval(s)}else{const t=this.closeWatchdogs.get(s.id);if(t)clearTimeout(t);this.closeWatchdogs.delete(s.id);const i=this.closeFrames.get(s.id);if(i)cancelAnimationFrame(i);this.closeFrames.delete(s.id);this.closeEvents.delete(s.id)}}this.syncTimers()}syncTimers(){const t=new Set;for(const s of this.records){if(s.transitionStatus!=="active")continue;t.add(s.id);const i=this.resolveToastTimeout(s);if(i<=0){this.clearToastTimer(s.id);continue}const e=this.timers.get(s.id);if(!e||e.timerKey!==s.timerKey){this.clearToastTimer(s.id);this.timers.set(s.id,{timerKey:s.timerKey,remaining:i,startedAt:0,handle:null})}if(!this.isPaused)this.startToastTimer(s.id)}for(const s of this.timers.keys()){if(!t.has(s))this.clearToastTimer(s)}}resolveToastTimeout(t){const s=t.timeout??this.timeout;if(typeof s==="number")return Math.max(0,s);return u(s,f.animationDelayLong2)}startToastTimer(t){const s=this.timers.get(t);if(!s||s.handle||s.remaining<=0)return;s.startedAt=Date.now();s.handle=setTimeout((()=>{s.handle=null;s.remaining=0;this.manager.close(t,"timeout")}),s.remaining)}pauseTimers(t){const s=this.isPaused;this.pauseReasons.add(t);if(s)return;const i=Date.now();for(const t of this.timers.values()){if(!t.handle)continue;clearTimeout(t.handle);t.handle=null;t.remaining=Math.max(0,t.remaining-(i-t.startedAt))}}resumeTimers(t){this.pauseReasons.delete(t);if(this.isPaused)return;for(const t of this.timers.keys())this.startToastTimer(t)}get isPaused(){return this.pauseReasons.size>0}clearToastTimer(t){const s=this.timers.get(t);if(s?.handle)clearTimeout(s.handle);this.timers.delete(t)}clearAllTimers(){for(const t of this.timers.values()){if(t.handle)clearTimeout(t.handle)}for(const t of this.closeWatchdogs.values())clearTimeout(t);this.timers.clear();this.closeWatchdogs.clear()}beginRemoval(t){if(!this.closeEvents.has(t.id)){this.closeEvents.add(t.id);this.dsToastClose.emit({id:t.id,reason:t.closeReason??"programmatic",toast:t});this.moveFocusAfterClose(t.id)}if(this.closeWatchdogs.has(t.id)||this.closeFrames.has(t.id))return;const s=m(f.motionShort3,f.animationDurationShort3);if(s<=0){queueMicrotask((()=>this.completeRemoval(t)));return}const i=requestAnimationFrame((()=>{this.closeFrames.delete(t.id);const i=this.records.find((s=>s.id===t.id));if(!i||i.transitionStatus!=="ending")return;this.closeWatchdogs.set(t.id,setTimeout((()=>this.completeRemoval(i)),s))}));this.closeFrames.set(t.id,i)}completeRemoval(t){const s=this.records.find((s=>s.id===t.id));if(!s||s.transitionStatus!=="ending")return;const i=this.closeWatchdogs.get(t.id);if(i)clearTimeout(i);this.closeWatchdogs.delete(t.id);const e=this.closeFrames.get(t.id);if(e)cancelAnimationFrame(e);this.closeFrames.delete(t.id);const n=this.attachedManager;const o=n?.remove(t.id);if(n&&o)this.pendingRemovals.push({manager:n,context:o})}handleAnimationComplete(t){if(t.transitionStatus==="ending")this.completeRemoval(t)}bindAnimationCancel(t,s){if(!t||t.dataset["cancelBound"]==="true")return;t.dataset["cancelBound"]="true";t.addEventListener("animationcancel",(()=>{const t=this.records.find((t=>t.id===s));if(t)this.handleAnimationComplete(t)}))}handlePointerEnter(t){F=this;this.pendingHoverLeave=false;this.hoveredIds.add(t);this.expanded=true;this.pauseTimers("hover")}handlePointerLeave(t){this.hoveredIds.delete(t);if(this.hoveredIds.size)return;if(this.records.some((t=>t.transitionStatus==="ending"))){this.pendingHoverLeave=true;return}this.expanded=false;this.resumeTimers("hover")}get regionElement(){return this.el.querySelector(".toast-region")}restorePreviousFocus(){this.previousFocus?.focus?.();this.previousFocus=null;this.keyboardActive=false}moveFocusAfterClose(t){const s=document.activeElement;const i=this.positionerElement(t);if(!s||!i?.contains(s))return;requestAnimationFrame((()=>{const s=this.activeRecords.find((s=>s.id!==t));const i=s?this.positionerElement(s.id)?.querySelector("ds-button-unfilled"):null;if(i?.setFocus)void i.setFocus();else if(s)this.regionElement?.focus();else this.restorePreviousFocus()}))}handleAction(t,s){const i={id:t.id,toast:t,originalEvent:s.detail};this.dsToastAction.emit(i);t.action?.onAction?.({id:t.id,data:t.data,manager:this.manager,originalEvent:s.detail})}handlePointerDown(t,s){if(s.button!==0)return;const i=s.target;if(i.closest(P))return;const e=s.currentTarget;e.setPointerCapture(s.pointerId);this.activeSwipe={id:t.id,pointerId:s.pointerId,pointerType:s.pointerType,startX:s.clientX,startY:s.clientY,maxDistance:0,cancelled:false,axis:null};this.swipe={id:t.id,x:0,y:0};if(s.pointerType==="touch")this.pauseTimers("swipe")}handlePointerMove(t){const s=this.activeSwipe;if(!s||s.pointerId!==t.pointerId||s.cancelled)return;const i=t.clientX-s.startX;const e=t.clientY-s.startY;if(!s.axis&&Math.max(Math.abs(i),Math.abs(e))>1){s.axis=Math.abs(i)>=Math.abs(e)?"x":"y"}if(!s.axis)return;const n=s.axis==="x";const o=n?i>=0?"right":"left":e>=0?"down":"up";const a=this.swipeDirections.includes(o);const r=n?Math.abs(i):Math.abs(e);const h=a?r:Math.sqrt(r);const c=(n?i:e)<0?-h:h;const d=n?c:0;const l=n?0:c;if(s.maxDistance-h>=A){s.cancelled=true;this.cancelSwipe();return}s.maxDistance=Math.max(s.maxDistance,h);if(r>1)t.preventDefault();this.swipe={id:s.id,x:d,y:l,direction:a?o:undefined}}handlePointerUp(t){const s=this.activeSwipe;if(!s||s.pointerId!==t.pointerId)return;const i=this.swipe;const e=i?Math.max(Math.abs(i.x),Math.abs(i.y)):0;const n=!s.cancelled&&!!i?.direction&&e>=k;const o=s.id;const a=s.pointerType==="touch";this.activeSwipe=null;this.swipe=null;if(a)this.resumeTimers("swipe");if(n&&i.direction){this.dismissedSwipeDirections.set(o,i.direction);this.manager.close(o,"swipe")}}handlePointerCancel(t){if(this.activeSwipe?.pointerId!==t.pointerId)return;this.cancelSwipe()}cancelSwipe(){const t=this.activeSwipe?.pointerType==="touch";this.activeSwipe=null;this.swipe=null;if(t)this.resumeTimers("swipe")}get touchAction(){const t=this.swipeDirections.includes("left")||this.swipeDirections.includes("right");const s=this.swipeDirections.includes("up")||this.swipeDirections.includes("down");if(t&&s)return"none";if(t)return"pan-y";if(s)return"pan-x";return"auto"}measureNaturalHeight(t,s){const i=t.querySelector(".toast-surface");if(!i)return 0;const e=t.style.width;const n=t.style.transition;const o=i.style.height;if(s){t.style.transition="none";t.style.width="100%"}i.style.height="auto";const a=i.getBoundingClientRect().height;i.style.height=o;if(s){t.style.width=e;t.getBoundingClientRect();t.style.transition=n}return a}measureLayout(){let t=false;for(const s of this.records){const i=this.positionerElement(s.id);if(!i)continue;let e=this.heights.get(s.id)??0;const n=e<=0||this.measuredUpdateKeys.get(s.id)!==s.updateKey;if(n){e=this.measureNaturalHeight(i,!s.positioner);if(e>0){if(this.heights.get(s.id)!==e)t=true;this.heights.set(s.id,e);this.measuredUpdateKeys.set(s.id,s.updateKey)}}if(!s.positioner)continue;const o=this.resolveAnchor(s.positioner.anchor);if(!o||e<=0){if(this.anchoredPositions.delete(s.id))t=true;continue}const r=i.getBoundingClientRect();const h=p(s.positioner.sideOffset,f.space050);const c=p(s.positioner.alignOffset,0);const d=a({anchorRect:o.getBoundingClientRect(),popupWidth:r.width,popupHeight:e,side:s.positioner.side??"top",align:s.positioner.align??"center",sideOffsetPx:h,alignOffsetPx:c,viewportPadPx:p(undefined,f.space200),viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});const l=this.anchoredPositions.get(s.id);if(!l||l.x!==d.x||l.y!==d.y||l.side!==d.resolvedSide){this.anchoredPositions.set(s.id,{x:d.x,y:d.y,side:d.resolvedSide});t=true}}if(t)this.layoutVersion+=1}resolveAnchor(t){return typeof t==="string"?document.getElementById(t):t}positionerElement(t){return Array.from(this.el.querySelectorAll(".toast-positioner")).find((s=>s.dataset["toastId"]===t))??null}ensureDomId(t){const s=this.domIds.get(t);if(s)return s;const i=++this.nextDomId;this.domIds.set(t,i);return i}get activeRecords(){return this.records.filter((t=>t.transitionStatus!=="ending"))}globalLayout(){const t=this.records.filter((t=>!t.positioner));let s=0;let i=0;const e=p(undefined,f.space200);const n=new Map;t.forEach(((t,o)=>{if(t.transitionStatus==="ending"){n.set(t.id,{index:o,offset:s,limited:false});return}const a=i>=Math.max(1,this.limit);n.set(t.id,{index:i,offset:s,limited:a});s+=(this.heights.get(t.id)??0)+e;i+=1}));return n}renderToast(t,s){const i=this.ensureDomId(t.id);const n=`ds-toast-${this.instanceId}-${i}-title`;const o=`ds-toast-${this.instanceId}-${i}-description`;const a=this.swipe?.id===t.id?this.swipe:null;const r=a?.direction??this.dismissedSwipeDirections.get(t.id);const h=!!t.positioner;const c=this.anchoredPositions.get(t.id);const d=t.priority==="high"&&!this.keyboardActive;const l=this.keyboardActive&&!s.limited?0:-1;const f=this.heights.get(t.id);return e("div",{ref:s=>this.bindAnimationCancel(s,t.id),class:{"toast-positioner":true,"toast-positioner--anchored":h,"toast-positioner--ending":t.transitionStatus==="ending"},"data-toast-id":t.id,"data-behind":!h&&s.index>0?"":undefined,"data-limited":s.limited?"":undefined,"data-positioned":h?String(!!c):undefined,"data-side":c?.side,inert:s.limited?true:undefined,"aria-hidden":s.limited?"true":undefined,style:{"--toast-index":String(s.index),"--toast-offset-y":`${s.offset}px`,"--toast-height":f?`${f}px`:undefined,zIndex:String(this.records.length-s.index),left:c?`${c.x}px`:undefined,top:c?`${c.y}px`:undefined},onAnimationEnd:()=>this.handleAnimationComplete(t)},e("div",{class:{"toast-surface":true,"toast-surface--swiping":!!a},role:t.priority==="high"?"alertdialog":"dialog","aria-modal":"false","aria-labelledby":t.title?n:t.description?o:undefined,"aria-describedby":t.title&&t.description?o:undefined,"aria-hidden":d?"true":undefined,"data-type":t.type,"data-priority":t.priority,"data-transition-status":t.transitionStatus,"data-swiping":a?"":undefined,"data-swipe-direction":r,style:{"--toast-swipe-movement-x":`${a?.x??0}px`,"--toast-swipe-movement-y":`${a?.y??0}px`,touchAction:this.touchAction},onPointerDown:s=>this.handlePointerDown(t,s),onPointerMove:t=>this.handlePointerMove(t),onPointerUp:t=>this.handlePointerUp(t),onPointerCancel:t=>this.handlePointerCancel(t),onPointerEnter:h?()=>this.handlePointerEnter(t.id):undefined,onPointerLeave:h?()=>this.handlePointerLeave(t.id):undefined},e("div",{class:"toast-content"},e("div",{class:"toast-copy"},t.title&&e("ds-text",{class:"toast-title",as:"div",variant:"text-title-small",color:"primary",textId:n},t.title),t.description&&e("ds-text",{class:"toast-description",as:"div",variant:"text-body-medium",color:"secondary",textId:o},t.description)),t.action&&e("ds-button-unfilled",{class:"toast-action",variant:"label",size:"md",type:"button",label:t.action.label,"aria-label":t.action.ariaLabel,hasBorder:true,focusTabIndex:l,"aria-hidden":!this.keyboardActive?"true":undefined,onDsClick:s=>this.handleAction(t,s)})),e("ds-button-unfilled",{class:"toast-close",variant:"icon",size:"md",type:"button",icon:"Cross","aria-label":this.closeLabel,hasBorder:false,activeFill:false,focusTabIndex:l,"aria-hidden":!this.keyboardActive?"true":undefined,onDsClick:()=>this.manager.close(t.id,"close-button")})))}render(){const t=this.globalLayout();const s=this.records.filter((t=>!t.positioner));const i=this.records.filter((t=>!!t.positioner));const o=this.records.filter((s=>s.priority==="high"&&s.transitionStatus!=="ending"&&!t.get(s.id)?.limited));return e(n,{key:"662b16a46c51c6cddbc67b3171251edb124a505f"},e("section",{key:"0c0baa257cd574729a8f20e744a908d0c46280c6",class:"toast-region",role:"region","aria-label":this.label,"aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text",tabIndex:-1,onFocusin:this.handleFocusIn,onFocusout:t=>this.handleFocusOut(t),onKeyDown:t=>this.handleRegionKeyDown(t)},e("div",{key:"b8c1d3edf7bf4d95331e1eb8fb1e17639fa5bd9a",class:"toast-viewport","data-expanded":this.expanded?"":undefined,onPointerEnter:()=>this.handlePointerEnter(C),onPointerLeave:()=>this.handlePointerLeave(C)},s.map((s=>this.renderToast(s,t.get(s.id)??{index:0,offset:0,limited:false})))),e("div",{key:"35a9d7ef9df8be1b8e6a3a332b848b89ef4906e6",class:"toast-anchored-layer"},i.map((t=>this.renderToast(t,{index:0,offset:0,limited:false})))),e("div",{key:"d544ffec2ef4d4ebf0ba994b89939a7f9daa5a24",class:"toast-assertive-announcer"},o.map((t=>e("div",{role:"alert","aria-atomic":"true"},[t.title,t.description].filter(Boolean).join(". ")))))))}get el(){return this}static get watchers(){return{manager:[{onManagerChange:0}],timeout:[{onTimeoutChange:0}]}}static get style(){return M()}},[2,"ds-toast",{manager:[16],limit:[2],timeout:[8],label:[1],closeLabel:[1,"close-label"],swipeDirections:[16],records:[32],expanded:[32],keyboardActive:[32],swipe:[32],layoutVersion:[32]},undefined,{manager:[{onManagerChange:0}],timeout:[{onTimeoutChange:0}]}]);function z(){if(typeof customElements==="undefined"){return}const t=["ds-toast","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-toast":if(!customElements.get(o(t))){customElements.define(o(t),j)}break;case"ds-badge":if(!customElements.get(o(t))){r()}break;case"ds-button-unfilled":if(!customElements.get(o(t))){h()}break;case"ds-icon":if(!customElements.get(o(t))){c()}break;case"ds-loader":if(!customElements.get(o(t))){d()}break;case"ds-text":if(!customElements.get(o(t))){l()}break}}))}z();const $=j;const R=z;export{$ as DsToast,R as defineCustomElement};
|
|
2
|
+
//# sourceMappingURL=ds-toast.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["resolvePromiseValue","value","input","resolved","description","ToastManagerImpl","constructor","this","records","listeners","Set","nextId","add","options","id","existingIndex","findIndex","record","title","trim","console","warn","current","updated","priority","transitionStatus","closeReason","undefined","updateKey","timerKey","filter","_","index","emit","update","updates","restartsTimer","Object","prototype","hasOwnProperty","call","type","map","recordIndex","close","reason","closing","onClose","toast","closeAll","promise","promiseValue","loading","timeout","success","error","failure","subscribe","listener","getSnapshot","delete","activate","find","candidate","remove","context","notifyRemove","onRemove","snapshot","createToastManager","defaultManagerKey","Symbol","for","globalScope","globalThis","existingManager","toastManager","toastCss","SWIPE_THRESHOLD","SWIPE_REVERSE_CANCEL_THRESHOLD","GLOBAL_STACK_HOVER","INTERACTIVE_SWIPE_SELECTOR","attachedManagers","WeakMap","connectedToastRegions","activeToastRegion","toastInstanceCounter","Toast","__stencil_proxyCustomElement","HTMLElement","registerHost","manager","defaultToastManager","limit","TOKEN_DEFAULTS","animationDelayLong2","label","closeLabel","swipeDirections","expanded","keyboardActive","swipe","layoutVersion","instanceId","domIds","Map","timers","closeWatchdogs","closeFrames","closeEvents","activationFrames","pauseReasons","hoveredIds","heights","measuredUpdateKeys","anchoredPositions","dismissedSwipeDirections","observedElements","pendingRemovals","unsubscribe","attachedManager","previousFocus","resizeObserver","mutationObserver","layoutFrame","activeSwipe","nextDomId","connected","pendingHoverLeave","handleWindowBlur","pauseTimers","handleWindowFocus","resumeTimers","handleVisibilityChange","document","hidden","handleFocusIn","active","activeElement","matches","handleFocusOut","event","next","relatedTarget","Node","el","contains","size","handleDocumentKeyDown","key","eligible","Array","from","region","activeRecords","length","target","preventDefault","regionElement","focus","handleRegionKeyDown","positioner","closest","dataset","shiftKey","restorePreviousFocus","handleWindowResize","clear","scheduleLayout","requestAnimationFrame","measureLayout","connectedCallback","connect","componentDidLoad","ResizeObserver","MutationObserver","observe","body","childList","subtree","attachManager","window","addEventListener","componentDidRender","syncObservedElements","flushPendingRemovals","disconnectedCallback","detachManager","resetManagerState","disconnect","cancelAnimationFrame","removeEventListener","remaining","onManagerChange","onTimeoutChange","timer","values","handle","clearTimeout","syncTimers","attached","get","set","syncLifecycle","clearAllTimers","frame","querySelectorAll","anchor","resolveAnchor","element","has","unobserve","pending","splice","dsToastRemove","recordIds","hasEndingRecords","some","watchdog","keys","ensureDomId","clearToastTimer","beginRemoval","closeFrame","activeIds","duration","resolveToastTimeout","existing","startedAt","isPaused","startToastTimer","Math","max","resolveCssTimeMs","Date","now","setTimeout","wasPaused","dsToastClose","moveFocusAfterClose","resolveMotionTimeMs","motionShort3","animationDurationShort3","queueMicrotask","completeRemoval","push","handleAnimationComplete","bindAnimationCancel","handlePointerEnter","handlePointerLeave","querySelector","positionerElement","control","setFocus","handleAction","detail","originalEvent","dsToastAction","action","onAction","data","handlePointerDown","button","surface","currentTarget","setPointerCapture","pointerId","pointerType","startX","clientX","startY","clientY","maxDistance","cancelled","axis","x","y","handlePointerMove","dx","dy","abs","horizontal","direction","allowed","includes","rawDistance","distance","sqrt","signed","cancelSwipe","handlePointerUp","shouldDismiss","wasTouch","handlePointerCancel","touchAction","vertical","measureNaturalHeight","expandedWidth","previousWidth","style","width","previousTransition","transition","previousHeight","height","getBoundingClientRect","changed","needsHeightMeasurement","rect","sideOffset","resolveCssLengthPx","space050","alignOffset","position","computeTooltipPosition","anchorRect","popupWidth","popupHeight","side","align","sideOffsetPx","alignOffsetPx","viewportPadPx","space200","viewportWidth","innerWidth","viewportHeight","innerHeight","resolvedSide","getElementById","globalLayout","globalRecords","offset","visibleIndex","gap","layouts","forEach","domIndex","limited","renderToast","layout","domId","titleId","descriptionId","swipeDirection","anchored","anchoredPosition","hiddenHighPriority","focusTabIndex","toastHeight","h","ref","class","String","inert","zIndex","left","top","onAnimationEnd","role","onPointerDown","onPointerMove","onPointerUp","onPointerCancel","onPointerEnter","onPointerLeave","as","variant","color","textId","ariaLabel","hasBorder","onDsClick","icon","activeFill","render","globalLayouts","anchoredRecords","highPriority","Host","tabIndex","onFocusin","onFocusout","onKeyDown","Boolean","join"],"sources":["src/wc/toast/toast-manager.ts","src/wc/components/Toast/Toast.css?tag=ds-toast&encapsulation=scoped","src/wc/components/Toast/Toast.tsx"],"sourcesContent":["import type {\n ToastCloseContext,\n ToastCloseReason,\n ToastListener,\n ToastManager,\n ToastOptions,\n ToastPromiseOptions,\n ToastPromiseValue,\n ToastRecord,\n} from './toast-types';\n\nfunction resolvePromiseValue<Value, Data>(\n value:\n | ToastPromiseValue<Data>\n | ((input: Value) => ToastPromiseValue<Data>),\n input: Value,\n): ToastOptions<Data> {\n const resolved = typeof value === 'function' ? value(input) : value;\n return typeof resolved === 'string' ? { description: resolved } : resolved;\n}\n\nclass ToastManagerImpl<Data = unknown> implements ToastManager<Data> {\n private records: ToastRecord<Data>[] = [];\n private listeners = new Set<ToastListener<Data>>();\n private nextId = 0;\n\n add(options: ToastOptions<Data>): string {\n const id = options.id || `ds-toast-${++this.nextId}`;\n const existingIndex = this.records.findIndex(record => record.id === id);\n\n if (!options.title?.trim() && !options.description?.trim()) {\n console.warn(`[ds-toast] Toast \"${id}\" should provide a title or description.`);\n }\n\n if (existingIndex >= 0) {\n const current = this.records[existingIndex];\n const updated: ToastRecord<Data> = {\n ...current,\n ...options,\n id,\n priority: options.priority ?? current.priority,\n transitionStatus: 'active',\n closeReason: undefined,\n updateKey: current.updateKey + 1,\n timerKey: current.timerKey + 1,\n };\n this.records = [\n updated,\n ...this.records.filter((_, index) => index !== existingIndex),\n ];\n this.emit();\n return id;\n }\n\n const record: ToastRecord<Data> = {\n ...options,\n id,\n priority: options.priority ?? 'low',\n transitionStatus: 'starting',\n updateKey: 0,\n timerKey: 0,\n };\n this.records = [record, ...this.records];\n this.emit();\n return id;\n }\n\n update(id: string, updates: Partial<ToastOptions<Data>>): void {\n const index = this.records.findIndex(record => record.id === id);\n if (index < 0) return;\n const current = this.records[index];\n const restartsTimer =\n Object.prototype.hasOwnProperty.call(updates, 'timeout') ||\n (current.type === 'loading' && updates.type !== undefined && updates.type !== 'loading');\n const updated: ToastRecord<Data> = {\n ...current,\n ...updates,\n id,\n priority: updates.priority ?? current.priority,\n updateKey: current.updateKey + 1,\n timerKey: restartsTimer ? current.timerKey + 1 : current.timerKey,\n };\n this.records = this.records.map((record, recordIndex) =>\n recordIndex === index ? updated : record\n );\n this.emit();\n }\n\n close(id: string, reason: ToastCloseReason = 'programmatic'): void {\n const index = this.records.findIndex(record => record.id === id);\n if (index < 0 || this.records[index].transitionStatus === 'ending') return;\n\n const closing: ToastRecord<Data> = {\n ...this.records[index],\n transitionStatus: 'ending',\n closeReason: reason,\n };\n this.records = this.records.map((record, recordIndex) =>\n recordIndex === index ? closing : record\n );\n this.emit();\n closing.onClose?.({ id, reason, toast: closing });\n }\n\n closeAll(reason: ToastCloseReason = 'programmatic'): void {\n for (const record of [...this.records]) this.close(record.id, reason);\n }\n\n async promise<Value>(\n promiseValue: PromiseLike<Value>,\n options: ToastPromiseOptions<Value, Data>,\n ): Promise<Value> {\n const loading = resolvePromiseValue(options.loading, undefined as Value);\n const id = this.add({\n ...loading,\n type: loading.type ?? 'loading',\n timeout: 0,\n });\n\n try {\n const value = await promiseValue;\n const success = resolvePromiseValue(options.success, value);\n this.update(id, {\n ...success,\n type: success.type ?? 'success',\n timeout: success.timeout,\n });\n return value;\n } catch (error) {\n const failure = resolvePromiseValue(options.error, error);\n this.update(id, {\n ...failure,\n type: failure.type ?? 'error',\n timeout: failure.timeout,\n });\n throw error;\n }\n }\n\n subscribe(listener: ToastListener<Data>): () => void {\n this.listeners.add(listener);\n listener(this.getSnapshot());\n return () => {\n this.listeners.delete(listener);\n };\n }\n\n getSnapshot(): readonly ToastRecord<Data>[] {\n return this.records.map(record => ({ ...record }));\n }\n\n activate(id: string): void {\n const record = this.records.find(candidate => candidate.id === id);\n if (!record || record.transitionStatus !== 'starting') return;\n this.records = this.records.map(candidate =>\n candidate.id === id\n ? { ...candidate, transitionStatus: 'active' }\n : candidate\n );\n this.emit();\n }\n\n remove(id: string): ToastCloseContext<Data> | null {\n const record = this.records.find(candidate => candidate.id === id);\n if (!record || record.transitionStatus !== 'ending') return null;\n const reason = record.closeReason ?? 'programmatic';\n this.records = this.records.filter(candidate => candidate.id !== id);\n this.emit();\n const context: ToastCloseContext<Data> = { id, reason, toast: record };\n return context;\n }\n\n notifyRemove(context: ToastCloseContext<Data>): void {\n const { toast } = context;\n toast.onRemove?.(context);\n }\n\n private emit(): void {\n const snapshot = this.getSnapshot();\n for (const listener of this.listeners) listener(snapshot);\n }\n}\n\nexport function createToastManager<Data = unknown>(): ToastManager<Data> {\n return new ToastManagerImpl<Data>();\n}\n\nconst defaultManagerKey = Symbol.for('@ds-mo/ui/default-toast-manager');\nconst globalScope = globalThis as typeof globalThis & Record<PropertyKey, unknown>;\nconst existingManager = globalScope[defaultManagerKey] as ToastManager | undefined;\n\nexport const toastManager: ToastManager =\n existingManager ?? createToastManager();\n\nif (!existingManager) globalScope[defaultManagerKey] = toastManager;\n",":host {\n display: contents;\n}\n\n.toast-region {\n position: fixed;\n inset: 0;\n z-index: var(--dimension-z-index-floating);\n pointer-events: none;\n outline: none;\n}\n\n.toast-viewport {\n position: absolute;\n right: var(--dimension-space-200);\n bottom: var(--dimension-space-200);\n display: grid;\n width: min(\n var(--dimension-card-width-sm),\n calc(100vw - 2 * var(--dimension-space-200))\n );\n}\n\n.toast-positioner {\n grid-area: 1 / 1;\n align-self: end;\n justify-self: center;\n width: 100%;\n pointer-events: auto;\n transform: translateY(\n calc(-1 * var(--toast-index) * var(--dimension-space-100))\n );\n transition:\n transform var(--effect-motion-short-3),\n width var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner {\n width: calc(\n 100% - 2 * var(--toast-index) * var(--dimension-space-100)\n );\n}\n\n.toast-viewport[data-expanded] .toast-positioner {\n transform: translateY(calc(-1 * var(--toast-offset-y)));\n}\n\n.toast-positioner[data-limited] {\n visibility: hidden;\n pointer-events: none;\n}\n\n.toast-positioner--anchored {\n position: fixed;\n width: min(\n var(--dimension-card-width-sm),\n calc(100vw - 2 * var(--dimension-space-200))\n );\n transform: none;\n}\n\n.toast-positioner--anchored[data-positioned='false'] {\n visibility: hidden;\n}\n\n.toast-surface {\n position: relative;\n display: block;\n box-sizing: border-box;\n width: 100%;\n height: var(--toast-height, auto);\n padding: var(--dimension-space-200);\n overflow: hidden;\n color: var(--color-foreground-primary);\n background-color: var(--color-background-primary);\n border-radius: var(--dimension-radius-050);\n box-shadow: var(--effect-elevation-elevated-floating);\n transform: translate(\n var(--toast-swipe-movement-x),\n var(--toast-swipe-movement-y)\n );\n animation: toast-enter var(--effect-motion-short-2) both;\n}\n\n.toast-positioner--ending .toast-surface {\n animation: toast-exit var(--effect-motion-short-3) both;\n}\n\n.toast-surface--swiping {\n transition: none;\n user-select: none;\n}\n\n.toast-content {\n display: flex;\n flex-direction: column;\n min-width: 0;\n padding-inline-end: var(--dimension-size-500);\n transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-copy {\n display: flex;\n flex-direction: column;\n min-width: 0;\n min-height: var(--typography-lineheight-md);\n margin-block: calc(-1 * var(--dimension-space-025));\n gap: var(--dimension-space-050);\n}\n\n.toast-title,\n.toast-description {\n min-width: 0;\n}\n\n.toast-action {\n align-self: start;\n margin-top: calc(\n var(--dimension-space-200) + var(--dimension-space-025)\n );\n}\n\n.toast-close {\n position: absolute;\n top: var(--dimension-space-100);\n right: var(--dimension-space-100);\n transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-content,\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-close {\n opacity: 0;\n}\n\n.toast-assertive-announcer {\n position: absolute;\n width: var(--dimension-size-100);\n height: var(--dimension-size-100);\n padding: 0;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n}\n\n@keyframes toast-enter {\n from {\n opacity: 0;\n transform: translateY(var(--dimension-space-100));\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes toast-exit {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .toast-positioner,\n .toast-surface,\n .toast-content,\n .toast-close,\n .toast-positioner--ending .toast-surface {\n transition: none;\n animation: none;\n }\n\n .toast-positioner--ending .toast-surface {\n opacity: 0;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport {\n resolveCssLengthPx,\n resolveCssTimeMs,\n resolveMotionTimeMs,\n TOKEN_DEFAULTS,\n} from '../../utils';\nimport {\n toastManager as defaultToastManager,\n type ToastActionEventDetail,\n type ToastCloseContext,\n type ToastCloseEventDetail,\n type ToastEventDetail,\n type ToastManager,\n type ToastRecord,\n type ToastSwipeDirection,\n} from '../../toast';\nimport { computeTooltipPosition } from '../Tooltip/tooltip-position';\n\ninterface ToastTimer {\n timerKey: number;\n remaining: number;\n startedAt: number;\n handle: ReturnType<typeof setTimeout> | null;\n}\n\ninterface SwipeState {\n id: string;\n x: number;\n y: number;\n direction?: ToastSwipeDirection;\n}\n\ninterface AnchoredPosition {\n x: number;\n y: number;\n side: 'top' | 'right' | 'bottom' | 'left';\n}\n\ninterface ActiveSwipe {\n id: string;\n pointerId: number;\n pointerType: string;\n startX: number;\n startY: number;\n maxDistance: number;\n cancelled: boolean;\n axis: 'x' | 'y' | null;\n}\n\nconst SWIPE_THRESHOLD = 40;\nconst SWIPE_REVERSE_CANCEL_THRESHOLD = 10;\nconst GLOBAL_STACK_HOVER = '__global-stack__';\nconst INTERACTIVE_SWIPE_SELECTOR =\n 'button,a,input,textarea,select,[role=\"button\"],[data-ds-toast-swipe-ignore]';\n\nconst attachedManagers = new WeakMap<ToastManager, Toast>();\nconst connectedToastRegions = new Set<Toast>();\nlet activeToastRegion: Toast | null = null;\nlet toastInstanceCounter = 0;\n\n@Component({\n tag: 'ds-toast',\n styleUrl: 'Toast.css',\n scoped: true,\n})\nexport class Toast {\n @Element() el!: HTMLElement;\n\n /** Manager that supplies toast records. Assign as a JavaScript property. */\n @Prop() manager: ToastManager = defaultToastManager;\n /** Maximum visible global-stack records. Limited records remain mounted and inert. */\n @Prop() limit: number = 3;\n /** Default auto-dismiss delay. Use 0 for persistent records. */\n @Prop() timeout: number | string = TOKEN_DEFAULTS.animationDelayLong2;\n /** Accessible label for the notification region. */\n @Prop() label: string = 'Notifications';\n /** Localized accessible label for every toast close action. */\n @Prop() closeLabel: string = 'Close notification';\n /** Allowed swipe-to-dismiss directions. Assign as a JavaScript property. */\n @Prop() swipeDirections: ToastSwipeDirection[] = ['down', 'right'];\n\n @State() private records: readonly ToastRecord[] = [];\n @State() private expanded = false;\n @State() private keyboardActive = false;\n @State() private swipe: SwipeState | null = null;\n @State() private layoutVersion = 0;\n\n @Event() dsToastClose!: EventEmitter<ToastCloseEventDetail>;\n @Event() dsToastRemove!: EventEmitter<ToastEventDetail>;\n @Event() dsToastAction!: EventEmitter<ToastActionEventDetail>;\n\n private readonly instanceId = ++toastInstanceCounter;\n private readonly domIds = new Map<string, number>();\n private readonly timers = new Map<string, ToastTimer>();\n private readonly closeWatchdogs = new Map<string, ReturnType<typeof setTimeout>>();\n private readonly closeFrames = new Map<string, number>();\n private readonly closeEvents = new Set<string>();\n private readonly activationFrames = new Map<string, number>();\n private readonly pauseReasons = new Set<string>();\n private readonly hoveredIds = new Set<string>();\n private readonly heights = new Map<string, number>();\n private readonly measuredUpdateKeys = new Map<string, number>();\n private readonly anchoredPositions = new Map<string, AnchoredPosition>();\n private readonly dismissedSwipeDirections = new Map<string, ToastSwipeDirection>();\n private readonly observedElements = new Set<Element>();\n private readonly pendingRemovals: Array<{\n manager: ToastManager;\n context: ToastCloseContext;\n }> = [];\n\n private unsubscribe: (() => void) | null = null;\n private attachedManager: ToastManager | null = null;\n private previousFocus: HTMLElement | null = null;\n private resizeObserver: ResizeObserver | null = null;\n private mutationObserver: MutationObserver | null = null;\n private layoutFrame: number | null = null;\n private activeSwipe: ActiveSwipe | null = null;\n private nextDomId = 0;\n private connected = false;\n private pendingHoverLeave = false;\n\n connectedCallback() {\n this.connect();\n }\n\n componentDidLoad() {\n this.connect();\n }\n\n private connect() {\n if (this.connected) return;\n this.connected = true;\n this.resizeObserver ??= new ResizeObserver(() => this.scheduleLayout());\n this.mutationObserver ??= new MutationObserver(() => this.scheduleLayout());\n this.mutationObserver.observe(document.body, { childList: true, subtree: true });\n if (!this.unsubscribe) this.attachManager(this.manager);\n window.addEventListener('blur', this.handleWindowBlur);\n window.addEventListener('focus', this.handleWindowFocus);\n window.addEventListener('resize', this.handleWindowResize);\n window.addEventListener('scroll', this.scheduleLayout, true);\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n document.addEventListener('visibilitychange', this.handleVisibilityChange);\n connectedToastRegions.add(this);\n // eslint-disable-next-line @typescript-eslint/no-this-alias -- module coordinator tracks the active connected viewport\n if (!activeToastRegion) activeToastRegion = this;\n }\n\n componentDidRender() {\n this.syncObservedElements();\n this.flushPendingRemovals();\n this.scheduleLayout();\n }\n\n disconnectedCallback() {\n this.connected = false;\n this.flushPendingRemovals();\n this.detachManager();\n this.resetManagerState();\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n this.observedElements.clear();\n if (this.layoutFrame !== null) cancelAnimationFrame(this.layoutFrame);\n this.layoutFrame = null;\n window.removeEventListener('blur', this.handleWindowBlur);\n window.removeEventListener('focus', this.handleWindowFocus);\n window.removeEventListener('resize', this.handleWindowResize);\n window.removeEventListener('scroll', this.scheduleLayout, true);\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n document.removeEventListener('visibilitychange', this.handleVisibilityChange);\n connectedToastRegions.delete(this);\n if (activeToastRegion === this) {\n const remaining = Array.from(connectedToastRegions);\n activeToastRegion = remaining[remaining.length - 1] ?? null;\n }\n }\n\n @Watch('manager')\n onManagerChange(next: ToastManager) {\n this.detachManager();\n this.resetManagerState();\n if (this.connected) this.attachManager(next);\n }\n\n @Watch('timeout')\n onTimeoutChange() {\n for (const timer of this.timers.values()) {\n if (timer.handle) clearTimeout(timer.handle);\n }\n this.timers.clear();\n this.syncTimers();\n }\n\n private attachManager(manager: ToastManager) {\n const attached = attachedManagers.get(manager);\n if (attached && attached !== this) {\n console.warn('[ds-toast] A manager can control only one connected ds-toast instance.');\n return;\n }\n attachedManagers.set(manager, this);\n this.attachedManager = manager;\n this.unsubscribe = manager.subscribe(records => {\n this.records = records;\n this.syncLifecycle(records);\n this.scheduleLayout();\n });\n }\n\n private detachManager() {\n this.unsubscribe?.();\n this.unsubscribe = null;\n if (this.attachedManager && attachedManagers.get(this.attachedManager) === this) {\n attachedManagers.delete(this.attachedManager);\n }\n this.attachedManager = null;\n }\n\n private resetManagerState() {\n this.flushPendingRemovals();\n if (this.el.contains(document.activeElement)) this.restorePreviousFocus();\n this.clearAllTimers();\n for (const frame of this.activationFrames.values()) cancelAnimationFrame(frame);\n for (const frame of this.closeFrames.values()) cancelAnimationFrame(frame);\n this.activationFrames.clear();\n this.closeFrames.clear();\n this.closeEvents.clear();\n this.pauseReasons.clear();\n this.hoveredIds.clear();\n this.pendingHoverLeave = false;\n this.heights.clear();\n this.measuredUpdateKeys.clear();\n this.anchoredPositions.clear();\n this.dismissedSwipeDirections.clear();\n this.domIds.clear();\n this.activeSwipe = null;\n this.swipe = null;\n this.expanded = false;\n this.keyboardActive = false;\n this.records = [];\n this.resizeObserver?.disconnect();\n this.observedElements.clear();\n }\n\n private syncObservedElements() {\n const next = new Set<Element>(\n this.el.querySelectorAll<HTMLElement>('.toast-positioner'),\n );\n for (const record of this.records) {\n if (!record.positioner) continue;\n const anchor = this.resolveAnchor(record.positioner.anchor);\n if (anchor) next.add(anchor);\n }\n\n for (const element of this.observedElements) {\n if (!next.has(element)) {\n this.resizeObserver?.unobserve(element);\n this.observedElements.delete(element);\n }\n }\n for (const element of next) {\n if (this.observedElements.has(element)) continue;\n this.resizeObserver?.observe(element);\n this.observedElements.add(element);\n }\n }\n\n private flushPendingRemovals() {\n for (const pending of this.pendingRemovals.splice(0)) {\n pending.manager.notifyRemove(pending.context);\n this.dsToastRemove.emit({\n id: pending.context.id,\n toast: pending.context.toast,\n });\n }\n }\n\n private syncLifecycle(records: readonly ToastRecord[]) {\n const recordIds = new Set(records.map(record => record.id));\n for (const id of this.hoveredIds) {\n if (id !== GLOBAL_STACK_HOVER && !recordIds.has(id)) this.hoveredIds.delete(id);\n }\n const hasEndingRecords = records.some(\n record => record.transitionStatus === 'ending',\n );\n if (this.pendingHoverLeave && !hasEndingRecords && !this.hoveredIds.size) {\n this.pendingHoverLeave = false;\n this.expanded = false;\n this.resumeTimers('hover');\n } else if (!this.hoveredIds.size && !this.pendingHoverLeave) {\n this.resumeTimers('hover');\n }\n\n for (const [id, timer] of this.timers) {\n if (recordIds.has(id)) continue;\n if (timer.handle) clearTimeout(timer.handle);\n this.timers.delete(id);\n }\n\n for (const [id, watchdog] of this.closeWatchdogs) {\n if (recordIds.has(id)) continue;\n clearTimeout(watchdog);\n this.closeWatchdogs.delete(id);\n }\n\n for (const [id, frame] of this.activationFrames) {\n if (recordIds.has(id)) continue;\n cancelAnimationFrame(frame);\n this.activationFrames.delete(id);\n }\n\n for (const [id, frame] of this.closeFrames) {\n if (recordIds.has(id)) continue;\n cancelAnimationFrame(frame);\n this.closeFrames.delete(id);\n }\n\n for (const id of this.domIds.keys()) {\n if (recordIds.has(id)) continue;\n this.closeEvents.delete(id);\n this.domIds.delete(id);\n this.heights.delete(id);\n this.measuredUpdateKeys.delete(id);\n this.anchoredPositions.delete(id);\n this.dismissedSwipeDirections.delete(id);\n }\n\n for (const record of records) {\n this.ensureDomId(record.id);\n if (\n record.transitionStatus === 'starting' &&\n !this.activationFrames.has(record.id)\n ) {\n const manager = this.attachedManager;\n const frame = requestAnimationFrame(() => {\n this.activationFrames.delete(record.id);\n manager?.activate(record.id);\n });\n this.activationFrames.set(record.id, frame);\n }\n\n if (record.transitionStatus === 'ending') {\n this.clearToastTimer(record.id);\n this.beginRemoval(record);\n } else {\n const watchdog = this.closeWatchdogs.get(record.id);\n if (watchdog) clearTimeout(watchdog);\n this.closeWatchdogs.delete(record.id);\n const closeFrame = this.closeFrames.get(record.id);\n if (closeFrame) cancelAnimationFrame(closeFrame);\n this.closeFrames.delete(record.id);\n this.closeEvents.delete(record.id);\n }\n }\n\n this.syncTimers();\n }\n\n private syncTimers() {\n const activeIds = new Set<string>();\n for (const record of this.records) {\n if (record.transitionStatus !== 'active') continue;\n activeIds.add(record.id);\n const duration = this.resolveToastTimeout(record);\n if (duration <= 0) {\n this.clearToastTimer(record.id);\n continue;\n }\n\n const existing = this.timers.get(record.id);\n if (!existing || existing.timerKey !== record.timerKey) {\n this.clearToastTimer(record.id);\n this.timers.set(record.id, {\n timerKey: record.timerKey,\n remaining: duration,\n startedAt: 0,\n handle: null,\n });\n }\n if (!this.isPaused) this.startToastTimer(record.id);\n }\n\n for (const id of this.timers.keys()) {\n if (!activeIds.has(id)) this.clearToastTimer(id);\n }\n }\n\n private resolveToastTimeout(record: ToastRecord): number {\n const value = record.timeout ?? this.timeout;\n if (typeof value === 'number') return Math.max(0, value);\n return resolveCssTimeMs(value, TOKEN_DEFAULTS.animationDelayLong2);\n }\n\n private startToastTimer(id: string) {\n const timer = this.timers.get(id);\n if (!timer || timer.handle || timer.remaining <= 0) return;\n timer.startedAt = Date.now();\n timer.handle = setTimeout(() => {\n timer.handle = null;\n timer.remaining = 0;\n this.manager.close(id, 'timeout');\n }, timer.remaining);\n }\n\n private pauseTimers(reason: string) {\n const wasPaused = this.isPaused;\n this.pauseReasons.add(reason);\n if (wasPaused) return;\n const now = Date.now();\n for (const timer of this.timers.values()) {\n if (!timer.handle) continue;\n clearTimeout(timer.handle);\n timer.handle = null;\n timer.remaining = Math.max(0, timer.remaining - (now - timer.startedAt));\n }\n }\n\n private resumeTimers(reason: string) {\n this.pauseReasons.delete(reason);\n if (this.isPaused) return;\n for (const id of this.timers.keys()) this.startToastTimer(id);\n }\n\n private get isPaused(): boolean {\n return this.pauseReasons.size > 0;\n }\n\n private clearToastTimer(id: string) {\n const timer = this.timers.get(id);\n if (timer?.handle) clearTimeout(timer.handle);\n this.timers.delete(id);\n }\n\n private clearAllTimers() {\n for (const timer of this.timers.values()) {\n if (timer.handle) clearTimeout(timer.handle);\n }\n for (const watchdog of this.closeWatchdogs.values()) clearTimeout(watchdog);\n this.timers.clear();\n this.closeWatchdogs.clear();\n }\n\n private beginRemoval(record: ToastRecord) {\n if (!this.closeEvents.has(record.id)) {\n this.closeEvents.add(record.id);\n this.dsToastClose.emit({\n id: record.id,\n reason: record.closeReason ?? 'programmatic',\n toast: record,\n });\n this.moveFocusAfterClose(record.id);\n }\n if (\n this.closeWatchdogs.has(record.id) ||\n this.closeFrames.has(record.id)\n ) return;\n\n const duration = resolveMotionTimeMs(\n TOKEN_DEFAULTS.motionShort3,\n TOKEN_DEFAULTS.animationDurationShort3,\n );\n if (duration <= 0) {\n queueMicrotask(() => this.completeRemoval(record));\n return;\n }\n const frame = requestAnimationFrame(() => {\n this.closeFrames.delete(record.id);\n const current = this.records.find(candidate => candidate.id === record.id);\n if (!current || current.transitionStatus !== 'ending') return;\n this.closeWatchdogs.set(\n record.id,\n setTimeout(() => this.completeRemoval(current), duration),\n );\n });\n this.closeFrames.set(record.id, frame);\n }\n\n private completeRemoval(record: ToastRecord) {\n const current = this.records.find(candidate => candidate.id === record.id);\n if (!current || current.transitionStatus !== 'ending') return;\n const watchdog = this.closeWatchdogs.get(record.id);\n if (watchdog) clearTimeout(watchdog);\n this.closeWatchdogs.delete(record.id);\n const closeFrame = this.closeFrames.get(record.id);\n if (closeFrame) cancelAnimationFrame(closeFrame);\n this.closeFrames.delete(record.id);\n const manager = this.attachedManager;\n const context = manager?.remove(record.id);\n if (manager && context) this.pendingRemovals.push({ manager, context });\n }\n\n private handleAnimationComplete(record: ToastRecord) {\n if (record.transitionStatus === 'ending') this.completeRemoval(record);\n }\n\n private bindAnimationCancel(element: HTMLDivElement | undefined, id: string) {\n if (!element || element.dataset['cancelBound'] === 'true') return;\n element.dataset['cancelBound'] = 'true';\n element.addEventListener('animationcancel', () => {\n const record = this.records.find(candidate => candidate.id === id);\n if (record) this.handleAnimationComplete(record);\n });\n }\n\n private handleWindowBlur = () => this.pauseTimers('window');\n private handleWindowFocus = () => this.resumeTimers('window');\n private handleVisibilityChange = () => {\n if (document.hidden) this.pauseTimers('document');\n else this.resumeTimers('document');\n };\n\n private handlePointerEnter(id: string) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias -- pointer interaction selects the viewport that receives F6\n activeToastRegion = this;\n this.pendingHoverLeave = false;\n this.hoveredIds.add(id);\n this.expanded = true;\n this.pauseTimers('hover');\n }\n\n private handlePointerLeave(id: string) {\n this.hoveredIds.delete(id);\n if (this.hoveredIds.size) return;\n if (this.records.some(record => record.transitionStatus === 'ending')) {\n this.pendingHoverLeave = true;\n return;\n }\n this.expanded = false;\n this.resumeTimers('hover');\n }\n\n private handleFocusIn = () => {\n const active = document.activeElement;\n if (!(active instanceof HTMLElement) || !active.matches(':focus-visible')) return;\n // eslint-disable-next-line @typescript-eslint/no-this-alias -- module coordinator routes F6 to the last focused viewport\n activeToastRegion = this;\n this.keyboardActive = true;\n this.expanded = true;\n this.pauseTimers('focus');\n };\n\n private handleFocusOut = (event: FocusEvent) => {\n const next = event.relatedTarget;\n if (next instanceof Node && this.el.contains(next)) return;\n if (!this.keyboardActive) return;\n this.keyboardActive = false;\n this.expanded = this.hoveredIds.size > 0;\n this.resumeTimers('focus');\n };\n\n private handleDocumentKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'F6') return;\n const eligible = Array.from(connectedToastRegions).filter(\n region => region.activeRecords.length > 0,\n );\n const target =\n activeToastRegion && activeToastRegion.activeRecords.length\n ? activeToastRegion\n : eligible[eligible.length - 1];\n if (target !== this) return;\n event.preventDefault();\n if (!this.el.contains(document.activeElement)) {\n this.previousFocus = document.activeElement as HTMLElement | null;\n }\n this.keyboardActive = true;\n this.regionElement?.focus();\n };\n\n private handleRegionKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n const target = event.target as HTMLElement;\n const positioner = target.closest<HTMLElement>('.toast-positioner');\n const id = positioner?.dataset['toastId'] ?? this.activeRecords[0]?.id;\n if (id) {\n event.preventDefault();\n this.manager.close(id, 'escape');\n }\n return;\n }\n\n if (event.key === 'Tab' && event.shiftKey && event.target === this.regionElement) {\n event.preventDefault();\n this.restorePreviousFocus();\n }\n };\n\n private get regionElement(): HTMLElement | null {\n return this.el.querySelector<HTMLElement>('.toast-region');\n }\n\n private restorePreviousFocus() {\n this.previousFocus?.focus?.();\n this.previousFocus = null;\n this.keyboardActive = false;\n }\n\n private moveFocusAfterClose(id: string) {\n const active = document.activeElement;\n const closing = this.positionerElement(id);\n if (!active || !closing?.contains(active)) return;\n requestAnimationFrame(() => {\n const next = this.activeRecords.find(record => record.id !== id);\n const control = next\n ? this.positionerElement(next.id)?.querySelector<\n HTMLElement & { setFocus?: () => Promise<void> }\n >('ds-button-unfilled')\n : null;\n if (control?.setFocus) void control.setFocus();\n else if (next) this.regionElement?.focus();\n else this.restorePreviousFocus();\n });\n }\n\n private handleAction(record: ToastRecord, event: CustomEvent<MouseEvent>) {\n const detail: ToastActionEventDetail = {\n id: record.id,\n toast: record,\n originalEvent: event.detail,\n };\n this.dsToastAction.emit(detail);\n record.action?.onAction?.({\n id: record.id,\n data: record.data,\n manager: this.manager,\n originalEvent: event.detail,\n });\n }\n\n private handlePointerDown(record: ToastRecord, event: PointerEvent) {\n if (event.button !== 0) return;\n const target = event.target as Element;\n if (target.closest(INTERACTIVE_SWIPE_SELECTOR)) return;\n\n const surface = event.currentTarget as HTMLElement;\n surface.setPointerCapture(event.pointerId);\n this.activeSwipe = {\n id: record.id,\n pointerId: event.pointerId,\n pointerType: event.pointerType,\n startX: event.clientX,\n startY: event.clientY,\n maxDistance: 0,\n cancelled: false,\n axis: null,\n };\n this.swipe = { id: record.id, x: 0, y: 0 };\n if (event.pointerType === 'touch') this.pauseTimers('swipe');\n }\n\n private handlePointerMove(event: PointerEvent) {\n const active = this.activeSwipe;\n if (!active || active.pointerId !== event.pointerId || active.cancelled) return;\n const dx = event.clientX - active.startX;\n const dy = event.clientY - active.startY;\n if (!active.axis && Math.max(Math.abs(dx), Math.abs(dy)) > 1) {\n active.axis = Math.abs(dx) >= Math.abs(dy) ? 'x' : 'y';\n }\n if (!active.axis) return;\n const horizontal = active.axis === 'x';\n const direction: ToastSwipeDirection = horizontal\n ? dx >= 0 ? 'right' : 'left'\n : dy >= 0 ? 'down' : 'up';\n const allowed = this.swipeDirections.includes(direction);\n const rawDistance = horizontal ? Math.abs(dx) : Math.abs(dy);\n const distance = allowed ? rawDistance : Math.sqrt(rawDistance);\n const signed = (horizontal ? dx : dy) < 0 ? -distance : distance;\n const x = horizontal ? signed : 0;\n const y = horizontal ? 0 : signed;\n\n if (active.maxDistance - distance >= SWIPE_REVERSE_CANCEL_THRESHOLD) {\n active.cancelled = true;\n this.cancelSwipe();\n return;\n }\n active.maxDistance = Math.max(active.maxDistance, distance);\n if (rawDistance > 1) event.preventDefault();\n this.swipe = { id: active.id, x, y, direction: allowed ? direction : undefined };\n }\n\n private handlePointerUp(event: PointerEvent) {\n const active = this.activeSwipe;\n if (!active || active.pointerId !== event.pointerId) return;\n const swipe = this.swipe;\n const distance = swipe ? Math.max(Math.abs(swipe.x), Math.abs(swipe.y)) : 0;\n const shouldDismiss =\n !active.cancelled &&\n !!swipe?.direction &&\n distance >= SWIPE_THRESHOLD;\n const id = active.id;\n const wasTouch = active.pointerType === 'touch';\n this.activeSwipe = null;\n this.swipe = null;\n if (wasTouch) this.resumeTimers('swipe');\n if (shouldDismiss && swipe.direction) {\n this.dismissedSwipeDirections.set(id, swipe.direction);\n this.manager.close(id, 'swipe');\n }\n }\n\n private handlePointerCancel(event: PointerEvent) {\n if (this.activeSwipe?.pointerId !== event.pointerId) return;\n this.cancelSwipe();\n }\n\n private cancelSwipe() {\n const wasTouch = this.activeSwipe?.pointerType === 'touch';\n this.activeSwipe = null;\n this.swipe = null;\n if (wasTouch) this.resumeTimers('swipe');\n }\n\n private get touchAction(): string {\n const horizontal =\n this.swipeDirections.includes('left') || this.swipeDirections.includes('right');\n const vertical =\n this.swipeDirections.includes('up') || this.swipeDirections.includes('down');\n if (horizontal && vertical) return 'none';\n if (horizontal) return 'pan-y';\n if (vertical) return 'pan-x';\n return 'auto';\n }\n\n private handleWindowResize = () => {\n this.heights.clear();\n this.measuredUpdateKeys.clear();\n this.layoutVersion += 1;\n this.scheduleLayout();\n };\n\n private scheduleLayout = () => {\n if (this.layoutFrame !== null) return;\n this.layoutFrame = requestAnimationFrame(() => {\n this.layoutFrame = null;\n this.measureLayout();\n });\n };\n\n private measureNaturalHeight(element: HTMLElement, expandedWidth: boolean): number {\n const surface = element.querySelector<HTMLElement>('.toast-surface');\n if (!surface) return 0;\n const previousWidth = element.style.width;\n const previousTransition = element.style.transition;\n const previousHeight = surface.style.height;\n\n if (expandedWidth) {\n element.style.transition = 'none';\n element.style.width = '100%';\n }\n surface.style.height = 'auto';\n const height = surface.getBoundingClientRect().height;\n\n surface.style.height = previousHeight;\n if (expandedWidth) {\n element.style.width = previousWidth;\n element.getBoundingClientRect();\n element.style.transition = previousTransition;\n }\n return height;\n }\n\n private measureLayout() {\n let changed = false;\n for (const record of this.records) {\n const element = this.positionerElement(record.id);\n if (!element) continue;\n let height = this.heights.get(record.id) ?? 0;\n const needsHeightMeasurement =\n height <= 0 || this.measuredUpdateKeys.get(record.id) !== record.updateKey;\n if (needsHeightMeasurement) {\n height = this.measureNaturalHeight(element, !record.positioner);\n if (height > 0) {\n if (this.heights.get(record.id) !== height) changed = true;\n this.heights.set(record.id, height);\n this.measuredUpdateKeys.set(record.id, record.updateKey);\n }\n }\n\n if (!record.positioner) continue;\n const anchor = this.resolveAnchor(record.positioner.anchor);\n if (!anchor || height <= 0) {\n if (this.anchoredPositions.delete(record.id)) changed = true;\n continue;\n }\n const rect = element.getBoundingClientRect();\n const sideOffset = resolveCssLengthPx(\n record.positioner.sideOffset,\n TOKEN_DEFAULTS.space050,\n );\n const alignOffset = resolveCssLengthPx(record.positioner.alignOffset, 0);\n const position = computeTooltipPosition({\n anchorRect: anchor.getBoundingClientRect(),\n popupWidth: rect.width,\n popupHeight: height,\n side: record.positioner.side ?? 'top',\n align: record.positioner.align ?? 'center',\n sideOffsetPx: sideOffset,\n alignOffsetPx: alignOffset,\n viewportPadPx: resolveCssLengthPx(undefined, TOKEN_DEFAULTS.space200),\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n });\n const current = this.anchoredPositions.get(record.id);\n if (\n !current ||\n current.x !== position.x ||\n current.y !== position.y ||\n current.side !== position.resolvedSide\n ) {\n this.anchoredPositions.set(record.id, {\n x: position.x,\n y: position.y,\n side: position.resolvedSide,\n });\n changed = true;\n }\n }\n if (changed) this.layoutVersion += 1;\n }\n\n private resolveAnchor(anchor: HTMLElement | string): HTMLElement | null {\n return typeof anchor === 'string' ? document.getElementById(anchor) : anchor;\n }\n\n private positionerElement(id: string): HTMLElement | null {\n return (\n Array.from(this.el.querySelectorAll<HTMLElement>('.toast-positioner'))\n .find(element => element.dataset['toastId'] === id) ?? null\n );\n }\n\n private ensureDomId(id: string): number {\n const current = this.domIds.get(id);\n if (current) return current;\n const next = ++this.nextDomId;\n this.domIds.set(id, next);\n return next;\n }\n\n private get activeRecords(): ToastRecord[] {\n return this.records.filter(record => record.transitionStatus !== 'ending');\n }\n\n private globalLayout() {\n const globalRecords = this.records.filter(record => !record.positioner);\n let offset = 0;\n let visibleIndex = 0;\n const gap = resolveCssLengthPx(undefined, TOKEN_DEFAULTS.space200);\n const layouts = new Map<string, { index: number; offset: number; limited: boolean }>();\n\n globalRecords.forEach((record, domIndex) => {\n if (record.transitionStatus === 'ending') {\n layouts.set(record.id, { index: domIndex, offset, limited: false });\n return;\n }\n\n const limited = visibleIndex >= Math.max(1, this.limit);\n layouts.set(record.id, { index: visibleIndex, offset, limited });\n offset += (this.heights.get(record.id) ?? 0) + gap;\n visibleIndex += 1;\n });\n return layouts;\n }\n\n private renderToast(\n record: ToastRecord,\n layout: { index: number; offset: number; limited: boolean },\n ) {\n const domId = this.ensureDomId(record.id);\n const titleId = `ds-toast-${this.instanceId}-${domId}-title`;\n const descriptionId = `ds-toast-${this.instanceId}-${domId}-description`;\n const swipe = this.swipe?.id === record.id ? this.swipe : null;\n const swipeDirection = swipe?.direction ?? this.dismissedSwipeDirections.get(record.id);\n const anchored = !!record.positioner;\n const anchoredPosition = this.anchoredPositions.get(record.id);\n const hiddenHighPriority = record.priority === 'high' && !this.keyboardActive;\n const focusTabIndex = this.keyboardActive && !layout.limited ? 0 : -1;\n const toastHeight = this.heights.get(record.id);\n\n return (\n <div\n ref={(element?: HTMLDivElement) => this.bindAnimationCancel(element, record.id)}\n class={{\n 'toast-positioner': true,\n 'toast-positioner--anchored': anchored,\n 'toast-positioner--ending': record.transitionStatus === 'ending',\n }}\n data-toast-id={record.id}\n data-behind={!anchored && layout.index > 0 ? '' : undefined}\n data-limited={layout.limited ? '' : undefined}\n data-positioned={anchored ? String(!!anchoredPosition) : undefined}\n data-side={anchoredPosition?.side}\n inert={layout.limited ? true : undefined}\n aria-hidden={layout.limited ? 'true' : undefined}\n style={{\n '--toast-index': String(layout.index),\n '--toast-offset-y': `${layout.offset}px`,\n '--toast-height': toastHeight ? `${toastHeight}px` : undefined,\n zIndex: String(this.records.length - layout.index),\n left: anchoredPosition ? `${anchoredPosition.x}px` : undefined,\n top: anchoredPosition ? `${anchoredPosition.y}px` : undefined,\n }}\n onAnimationEnd={() => this.handleAnimationComplete(record)}\n >\n <div\n class={{\n 'toast-surface': true,\n 'toast-surface--swiping': !!swipe,\n }}\n role={record.priority === 'high' ? 'alertdialog' : 'dialog'}\n aria-modal=\"false\"\n aria-labelledby={\n record.title ? titleId : record.description ? descriptionId : undefined\n }\n aria-describedby={record.title && record.description ? descriptionId : undefined}\n aria-hidden={hiddenHighPriority ? 'true' : undefined}\n data-type={record.type}\n data-priority={record.priority}\n data-transition-status={record.transitionStatus}\n data-swiping={swipe ? '' : undefined}\n data-swipe-direction={swipeDirection}\n style={{\n '--toast-swipe-movement-x': `${swipe?.x ?? 0}px`,\n '--toast-swipe-movement-y': `${swipe?.y ?? 0}px`,\n touchAction: this.touchAction,\n }}\n onPointerDown={(event: PointerEvent) => this.handlePointerDown(record, event)}\n onPointerMove={(event: PointerEvent) => this.handlePointerMove(event)}\n onPointerUp={(event: PointerEvent) => this.handlePointerUp(event)}\n onPointerCancel={(event: PointerEvent) => this.handlePointerCancel(event)}\n onPointerEnter={\n anchored ? () => this.handlePointerEnter(record.id) : undefined\n }\n onPointerLeave={\n anchored ? () => this.handlePointerLeave(record.id) : undefined\n }\n >\n <div class=\"toast-content\">\n <div class=\"toast-copy\">\n {record.title && (\n <ds-text\n class=\"toast-title\"\n as=\"div\"\n variant=\"text-title-small\"\n color=\"primary\"\n textId={titleId}\n >\n {record.title}\n </ds-text>\n )}\n {record.description && (\n <ds-text\n class=\"toast-description\"\n as=\"div\"\n variant=\"text-body-medium\"\n color=\"secondary\"\n textId={descriptionId}\n >\n {record.description}\n </ds-text>\n )}\n </div>\n {record.action && (\n <ds-button-unfilled\n class=\"toast-action\"\n variant=\"label\"\n size=\"md\"\n type=\"button\"\n label={record.action.label}\n aria-label={record.action.ariaLabel}\n hasBorder\n focusTabIndex={focusTabIndex}\n aria-hidden={!this.keyboardActive ? 'true' : undefined}\n onDsClick={(event: CustomEvent<MouseEvent>) =>\n this.handleAction(record, event)\n }\n />\n )}\n </div>\n <ds-button-unfilled\n class=\"toast-close\"\n variant=\"icon\"\n size=\"md\"\n type=\"button\"\n icon=\"Cross\"\n aria-label={this.closeLabel}\n hasBorder={false}\n activeFill={false}\n focusTabIndex={focusTabIndex}\n aria-hidden={!this.keyboardActive ? 'true' : undefined}\n onDsClick={() => this.manager.close(record.id, 'close-button')}\n />\n </div>\n </div>\n );\n }\n\n render() {\n void this.layoutVersion;\n const globalLayouts = this.globalLayout();\n const globalRecords = this.records.filter(record => !record.positioner);\n const anchoredRecords = this.records.filter(record => !!record.positioner);\n const highPriority = this.records.filter(\n record =>\n record.priority === 'high' &&\n record.transitionStatus !== 'ending' &&\n !globalLayouts.get(record.id)?.limited,\n );\n\n return (\n <Host>\n <section\n class=\"toast-region\"\n role=\"region\"\n aria-label={this.label}\n aria-live=\"polite\"\n aria-atomic=\"false\"\n aria-relevant=\"additions text\"\n tabIndex={-1}\n onFocusin={this.handleFocusIn}\n onFocusout={(event: FocusEvent) => this.handleFocusOut(event)}\n onKeyDown={(event: KeyboardEvent) => this.handleRegionKeyDown(event)}\n >\n <div\n class=\"toast-viewport\"\n data-expanded={this.expanded ? '' : undefined}\n onPointerEnter={() => this.handlePointerEnter(GLOBAL_STACK_HOVER)}\n onPointerLeave={() => this.handlePointerLeave(GLOBAL_STACK_HOVER)}\n >\n {globalRecords.map(record =>\n this.renderToast(\n record,\n globalLayouts.get(record.id) ?? { index: 0, offset: 0, limited: false },\n )\n )}\n </div>\n <div class=\"toast-anchored-layer\">\n {anchoredRecords.map(record =>\n this.renderToast(record, { index: 0, offset: 0, limited: false })\n )}\n </div>\n <div class=\"toast-assertive-announcer\">\n {highPriority.map(record => (\n <div role=\"alert\" aria-atomic=\"true\">\n {[record.title, record.description].filter(Boolean).join('. ')}\n </div>\n ))}\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as
|
|
1
|
+
import{p as t,H as o,h as i,a as s,t as a}from"./index.js";import{d as e}from"./p-CZZYGqKz.js";import{T as n}from"./p-C_0Q8Cnp.js";import{a as d}from"./p-BHtg1fh3.js";const r=()=>`.ds-control--md.sc-ds-tooltip-data-viz-h,.ds-control--md.sc-ds-tooltip-data-viz,.ds-control--sm.sc-ds-tooltip-data-viz-h,.ds-control--sm.sc-ds-tooltip-data-viz,.ds-control--xs.sc-ds-tooltip-data-viz-h,.ds-control--xs.sc-ds-tooltip-data-viz{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-tooltip-data-viz-h,.ds-control--md.sc-ds-tooltip-data-viz{--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-tooltip-data-viz-h,.ds-control--sm.sc-ds-tooltip-data-viz{--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-tooltip-data-viz-h,.ds-control--xs.sc-ds-tooltip-data-viz{--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}.sc-ds-tooltip-data-viz-h{position:absolute;z-index:var(--dimension-z-index-tooltip);display:block;box-sizing:border-box;background-color:var(--color-translucent-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md));border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;opacity:0}.tooltip-data-viz--visible.sc-ds-tooltip-data-viz-h{animation:tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards}.tooltip-data-viz__item.sc-ds-tooltip-data-viz{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--dimension-space-025);padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-data-viz__label.sc-ds-tooltip-data-viz,.tooltip-data-viz__value.sc-ds-tooltip-data-viz{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}@keyframes tooltip-data-viz-fade-in{from{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.tooltip-data-viz--visible.sc-ds-tooltip-data-viz-h{animation:none;opacity:1}}`;const l=12;const c=8;const p=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.value="";this.label="";this.x=0;this.y=0;this.delay=n.animationDelayInstant;this.side="right";this.align="bottom";this.visible=false;this.delayTimer=null}componentDidLoad(){this.scheduleShow();this.calculatePlacement()}disconnectedCallback(){this.clearDelayTimer()}onAnchorChange(){requestAnimationFrame((()=>this.calculatePlacement()))}onDelayChange(){if(!this.visible)this.scheduleShow()}get showDelayMs(){return d(this.delay,n.animationDelayInstant)}clearDelayTimer(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}}scheduleShow(){this.clearDelayTimer();this.visible=false;const t=this.showDelayMs;if(t<=0){this.visible=true;return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;this.visible=true;requestAnimationFrame((()=>this.calculatePlacement()))}),t)}calculatePlacement(){const t=this.el.getBoundingClientRect();if(!t.width||!t.height)return;const o=t.right>window.innerWidth-c?"left":"right";const i=t.bottom>window.innerHeight-c?"top":"bottom";if(o!==this.side)this.side=o;if(i!==this.align)this.align=i}render(){const t=this.side==="right"?`${l}px`:`calc(-100% - ${l}px)`;const o=this.align==="bottom"?`${l}px`:`calc(-100% - ${l}px)`;return i(s,{key:"a82f7fccb4f677dd5159680a1d1bb91f9d27e04d",class:{"tooltip-data-viz":true,"tooltip-data-viz--visible":this.visible},style:{left:`${this.x}px`,top:`${this.y}px`,transform:`translate(${t}, ${o})`}},i("div",{key:"ed5d31bfe9c9dac685c69b560d38f2a85b40dc6d",class:"tooltip-data-viz__item ds-control--md"},i("ds-text",{key:"89342e7942d25cf04400cdd1e7f3f2af64c43389",class:"tooltip-data-viz__label",as:"span",variant:"text-body-medium",color:"var(--color-translucent-foreground-secondary)"},this.label),i("ds-text",{key:"d0db705a470373f6868a9a3138df0b8eaaf91c7c",class:"tooltip-data-viz__value",as:"span",variant:"text-body-medium",emphasis:true,color:"var(--color-translucent-foreground-primary)"},this.value)))}get el(){return this}static get watchers(){return{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}}static get style(){return r()}},[2,"ds-tooltip-data-viz",{value:[8],label:[1],x:[2],y:[2],delay:[8],side:[32],align:[32],visible:[32]},undefined,{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip-data-viz","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip-data-viz":if(!customElements.get(a(t))){customElements.define(a(t),p)}break;case"ds-text":if(!customElements.get(a(t))){e()}break}}))}h();const m=p;const v=h;export{m as DsTooltipDataViz,v as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-tooltip-data-viz.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tooltipDataVizCss","CURSOR_OFFSET_PX","VIEWPORT_PAD_PX","TooltipDataViz","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","label","x","y","delay","TOKEN_DEFAULTS","animationDelayInstant","side","align","visible","delayTimer","componentDidLoad","scheduleShow","calculatePlacement","disconnectedCallback","clearDelayTimer","onAnchorChange","requestAnimationFrame","onDelayChange","showDelayMs","resolveCssTimeMs","clearTimeout","ms","setTimeout","rect","el","getBoundingClientRect","width","height","nextSide","right","window","innerWidth","nextAlign","bottom","innerHeight","render","translateX","translateY","h","Host","key","class","style","left","top","transform","as","variant","color","emphasis"],"sources":["src/wc/components/TooltipDataViz/TooltipDataViz.css?tag=ds-tooltip-data-viz&encapsulation=scoped","src/wc/components/TooltipDataViz/TooltipDataViz.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n/* No padding here — the item div below owns all the spacing, so there's exactly one padding\n box instead of stacking the host's padding on top of the item's. */\n:host {\n position: absolute;\n z-index: var(--dimension-z-index-tooltip);\n display: block;\n box-sizing: border-box;\n background-color: var(--color-translucent-translucent);\n backdrop-filter: blur(var(--effect-blur-md));\n -webkit-backdrop-filter: blur(var(--effect-blur-md));\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n box-shadow: var(--effect-elevation-elevated-floating);\n white-space: nowrap;\n pointer-events: none;\n opacity: 0;\n}\n\n:host(.tooltip-data-viz--visible) {\n animation: tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards;\n}\n\n/* Density: md control recipe (height / pad / label inset) — non-interactive, no interaction-fill. */\n.tooltip-data-viz__item {\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n display: flex;\n align-items: center;\n gap: var(--dimension-space-025);\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n.tooltip-data-viz__label,\n.tooltip-data-viz__value {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n}\n\n@keyframes tooltip-data-viz-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host(.tooltip-data-viz--visible) {\n animation: none;\n opacity: 1;\n }\n}\n","import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipDataVizSide = 'left' | 'right';\nexport type TooltipDataVizAlign = 'top' | 'bottom';\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point, …).\n * Donut charts skip this — legend sync already surfaces the hovered slice.\n * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\n * charts hover-highlight data that lives inside an SVG, so the chart itself computes\n * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n *\n * Renders `position: absolute` — place inside a `position: relative` chart wrapper,\n * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\n * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge\n * keeps it on-screen.\n *\n * Mount (or remount) when a hover session starts so `delay` applies once per hover;\n * keep the instance mounted while the cursor moves so tracking stays instant.\n */\n@Component({\n tag: 'ds-tooltip-data-viz',\n styleUrl: 'TooltipDataViz.css',\n scoped: true,\n})\nexport class TooltipDataViz {\n @Element() el!: HTMLElement;\n\n @Prop() value: string | number = '';\n @Prop() label: string = '';\n /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */\n @Prop() x: number = 0;\n @Prop() y: number = 0;\n\n /**\n * Show delay after mount before the callout appears.\n * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\n * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\n * immediate feedback while scrubbing; prefer the default. Mount once per\n * hover session so any non-zero delay runs once, then track `x`/`y` instantly.\n */\n @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;\n\n @State() private side: TooltipDataVizSide = 'right';\n @State() private align: TooltipDataVizAlign = 'bottom';\n @State() private visible: boolean = false;\n\n private delayTimer: ReturnType<typeof setTimeout> | null = null;\n\n componentDidLoad() {\n this.scheduleShow();\n this.calculatePlacement();\n }\n\n disconnectedCallback() {\n this.clearDelayTimer();\n }\n\n @Watch('x')\n @Watch('y')\n onAnchorChange() {\n requestAnimationFrame(() => this.calculatePlacement());\n }\n\n @Watch('delay')\n onDelayChange() {\n if (!this.visible) this.scheduleShow();\n }\n\n private get showDelayMs(): number {\n return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);\n }\n\n private clearDelayTimer() {\n if (this.delayTimer) {\n clearTimeout(this.delayTimer);\n this.delayTimer = null;\n }\n }\n\n private scheduleShow() {\n this.clearDelayTimer();\n this.visible = false;\n const ms = this.showDelayMs;\n if (ms <= 0) {\n this.visible = true;\n return;\n }\n this.delayTimer = setTimeout(() => {\n this.delayTimer = null;\n this.visible = true;\n requestAnimationFrame(() => this.calculatePlacement());\n }, ms);\n }\n\n private calculatePlacement() {\n const rect = this.el.getBoundingClientRect();\n if (!rect.width || !rect.height) return;\n\n const nextSide: TooltipDataVizSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n const nextAlign: TooltipDataVizAlign = rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n if (nextSide !== this.side) this.side = nextSide;\n if (nextAlign !== this.align) this.align = nextAlign;\n }\n\n render() {\n const translateX = this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n const translateY = this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n\n return (\n <Host\n class={{\n 'tooltip-data-viz': true,\n 'tooltip-data-viz--visible': this.visible,\n }}\n style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}\n >\n <div class=\"tooltip-data-viz__item ds-control--md\">\n <ds-text\n class=\"tooltip-data-viz__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"var(--color-translucent-foreground-secondary)\"\n >\n {this.label}\n </ds-text>\n <ds-text\n class=\"tooltip-data-viz__value\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"var(--color-translucent-foreground-primary)\"\n >\n {this.value}\n </ds-text>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"uKAAA,MAAMA,EAAoB,IAAM,
|
|
1
|
+
{"version":3,"names":["tooltipDataVizCss","CURSOR_OFFSET_PX","VIEWPORT_PAD_PX","TooltipDataViz","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","label","x","y","delay","TOKEN_DEFAULTS","animationDelayInstant","side","align","visible","delayTimer","componentDidLoad","scheduleShow","calculatePlacement","disconnectedCallback","clearDelayTimer","onAnchorChange","requestAnimationFrame","onDelayChange","showDelayMs","resolveCssTimeMs","clearTimeout","ms","setTimeout","rect","el","getBoundingClientRect","width","height","nextSide","right","window","innerWidth","nextAlign","bottom","innerHeight","render","translateX","translateY","h","Host","key","class","style","left","top","transform","as","variant","color","emphasis"],"sources":["src/wc/components/TooltipDataViz/TooltipDataViz.css?tag=ds-tooltip-data-viz&encapsulation=scoped","src/wc/components/TooltipDataViz/TooltipDataViz.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n/* No padding here — the item div below owns all the spacing, so there's exactly one padding\n box instead of stacking the host's padding on top of the item's. */\n:host {\n position: absolute;\n z-index: var(--dimension-z-index-tooltip);\n display: block;\n box-sizing: border-box;\n background-color: var(--color-translucent-translucent);\n backdrop-filter: blur(var(--effect-blur-md));\n -webkit-backdrop-filter: blur(var(--effect-blur-md));\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n box-shadow: var(--effect-elevation-elevated-floating);\n white-space: nowrap;\n pointer-events: none;\n opacity: 0;\n}\n\n:host(.tooltip-data-viz--visible) {\n animation: tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards;\n}\n\n/* Density: md control recipe (height / pad / label inset) — non-interactive, no interaction-fill. */\n.tooltip-data-viz__item {\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n display: flex;\n align-items: center;\n gap: var(--dimension-space-025);\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n.tooltip-data-viz__label,\n.tooltip-data-viz__value {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n}\n\n@keyframes tooltip-data-viz-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host(.tooltip-data-viz--visible) {\n animation: none;\n opacity: 1;\n }\n}\n","import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipDataVizSide = 'left' | 'right';\nexport type TooltipDataVizAlign = 'top' | 'bottom';\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point, …).\n * Donut charts skip this — legend sync already surfaces the hovered slice.\n * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\n * charts hover-highlight data that lives inside an SVG, so the chart itself computes\n * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n *\n * Renders `position: absolute` — place inside a `position: relative` chart wrapper,\n * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\n * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge\n * keeps it on-screen.\n *\n * Mount (or remount) when a hover session starts so `delay` applies once per hover;\n * keep the instance mounted while the cursor moves so tracking stays instant.\n */\n@Component({\n tag: 'ds-tooltip-data-viz',\n styleUrl: 'TooltipDataViz.css',\n scoped: true,\n})\nexport class TooltipDataViz {\n @Element() el!: HTMLElement;\n\n @Prop() value: string | number = '';\n @Prop() label: string = '';\n /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */\n @Prop() x: number = 0;\n @Prop() y: number = 0;\n\n /**\n * Show delay after mount before the callout appears.\n * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\n * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\n * immediate feedback while scrubbing; prefer the default. Mount once per\n * hover session so any non-zero delay runs once, then track `x`/`y` instantly.\n */\n @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;\n\n @State() private side: TooltipDataVizSide = 'right';\n @State() private align: TooltipDataVizAlign = 'bottom';\n @State() private visible: boolean = false;\n\n private delayTimer: ReturnType<typeof setTimeout> | null = null;\n\n componentDidLoad() {\n this.scheduleShow();\n this.calculatePlacement();\n }\n\n disconnectedCallback() {\n this.clearDelayTimer();\n }\n\n @Watch('x')\n @Watch('y')\n onAnchorChange() {\n requestAnimationFrame(() => this.calculatePlacement());\n }\n\n @Watch('delay')\n onDelayChange() {\n if (!this.visible) this.scheduleShow();\n }\n\n private get showDelayMs(): number {\n return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);\n }\n\n private clearDelayTimer() {\n if (this.delayTimer) {\n clearTimeout(this.delayTimer);\n this.delayTimer = null;\n }\n }\n\n private scheduleShow() {\n this.clearDelayTimer();\n this.visible = false;\n const ms = this.showDelayMs;\n if (ms <= 0) {\n this.visible = true;\n return;\n }\n this.delayTimer = setTimeout(() => {\n this.delayTimer = null;\n this.visible = true;\n requestAnimationFrame(() => this.calculatePlacement());\n }, ms);\n }\n\n private calculatePlacement() {\n const rect = this.el.getBoundingClientRect();\n if (!rect.width || !rect.height) return;\n\n const nextSide: TooltipDataVizSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n const nextAlign: TooltipDataVizAlign = rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n if (nextSide !== this.side) this.side = nextSide;\n if (nextAlign !== this.align) this.align = nextAlign;\n }\n\n render() {\n const translateX = this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n const translateY = this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n\n return (\n <Host\n class={{\n 'tooltip-data-viz': true,\n 'tooltip-data-viz--visible': this.visible,\n }}\n style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}\n >\n <div class=\"tooltip-data-viz__item ds-control--md\">\n <ds-text\n class=\"tooltip-data-viz__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"var(--color-translucent-foreground-secondary)\"\n >\n {this.label}\n </ds-text>\n <ds-text\n class=\"tooltip-data-viz__value\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"var(--color-translucent-foreground-primary)\"\n >\n {this.value}\n </ds-text>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"uKAAA,MAAMA,EAAoB,IAAM,s3ECGhC,MAAMC,EAAmB,GACzB,MAAMC,EAAkB,E,MAyBXC,EAAcC,EAAA,MAAAD,UAAAE,EAL3B,WAAAC,CAAAC,G,4CAQUC,KAAAC,MAAyB,GACzBD,KAAAE,MAAgB,GAEhBF,KAAAG,EAAY,EACZH,KAAAI,EAAY,EASZJ,KAAAK,MAAyBC,EAAeC,sBAE/BP,KAAAQ,KAA2B,QAC3BR,KAAAS,MAA6B,SAC7BT,KAAAU,QAAmB,MAE5BV,KAAAW,WAAmD,IA6F5D,CA3FC,gBAAAC,GACEZ,KAAKa,eACLb,KAAKc,oB,CAGP,oBAAAC,GACEf,KAAKgB,iB,CAKP,cAAAC,GACEC,uBAAsB,IAAMlB,KAAKc,sB,CAInC,aAAAK,GACE,IAAKnB,KAAKU,QAASV,KAAKa,c,CAG1B,eAAYO,GACV,OAAOC,EAAiBrB,KAAKK,MAAOC,EAAeC,sB,CAG7C,eAAAS,GACN,GAAIhB,KAAKW,WAAY,CACnBW,aAAatB,KAAKW,YAClBX,KAAKW,WAAa,I,EAId,YAAAE,GACNb,KAAKgB,kBACLhB,KAAKU,QAAU,MACf,MAAMa,EAAKvB,KAAKoB,YAChB,GAAIG,GAAM,EAAG,CACXvB,KAAKU,QAAU,KACf,M,CAEFV,KAAKW,WAAaa,YAAW,KAC3BxB,KAAKW,WAAa,KAClBX,KAAKU,QAAU,KACfQ,uBAAsB,IAAMlB,KAAKc,sBAAqB,GACrDS,E,CAGG,kBAAAT,GACN,MAAMW,EAAOzB,KAAK0B,GAAGC,wBACrB,IAAKF,EAAKG,QAAUH,EAAKI,OAAQ,OAEjC,MAAMC,EAA+BL,EAAKM,MAAQC,OAAOC,WAAavC,EAAkB,OAAS,QACjG,MAAMwC,EAAiCT,EAAKU,OAASH,OAAOI,YAAc1C,EAAkB,MAAQ,SAEpG,GAAIoC,IAAa9B,KAAKQ,KAAMR,KAAKQ,KAAOsB,EACxC,GAAII,IAAclC,KAAKS,MAAOT,KAAKS,MAAQyB,C,CAG7C,MAAAG,GACE,MAAMC,EAAatC,KAAKQ,OAAS,QAAU,GAAGf,MAAuB,gBAAgBA,OACrF,MAAM8C,EAAavC,KAAKS,QAAU,SAAW,GAAGhB,MAAuB,gBAAgBA,OAEvF,OACE+C,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,mBAAoB,KACpB,4BAA6B3C,KAAKU,SAEpCkC,MAAO,CAAEC,KAAM,GAAG7C,KAAKG,MAAO2C,IAAK,GAAG9C,KAAKI,MAAO2C,UAAW,aAAaT,MAAeC,OAEzFC,EAAA,OAAAE,IAAA,2CAAKC,MAAM,yCACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,0BACNK,GAAG,OACHC,QAAQ,mBACRC,MAAM,iDAELlD,KAAKE,OAERsC,EAAA,WAAAE,IAAA,2CACEC,MAAM,0BACNK,GAAG,OACHC,QAAQ,mBACRE,SAAQ,KACRD,MAAM,+CAELlD,KAAKC,Q","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{T as o,d as s}from"./p-
|
|
1
|
+
import{T as o,d as s}from"./p-BMwnjAIq.js";const t=o;const n=s;export{t as DsTooltip,n as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-tooltip.js.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { Components, JSX } from "../types/components";
|
|
2
2
|
|
|
3
|
-
interface
|
|
4
|
-
export const
|
|
5
|
-
prototype:
|
|
6
|
-
new ():
|
|
3
|
+
interface DsTypingIndicator extends Components.DsTypingIndicator, HTMLElement {}
|
|
4
|
+
export const DsTypingIndicator: {
|
|
5
|
+
prototype: DsTypingIndicator;
|
|
6
|
+
new (): DsTypingIndicator;
|
|
7
7
|
};
|
|
8
8
|
/**
|
|
9
9
|
* Used to define this component and all nested components recursively.
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as t,H as s,h as e,a as i,t as a}from"./index.js";import{d as n}from"./p-CZZYGqKz.js";const o=()=>`.sc-ds-typing-indicator-h{display:block;width:100%;min-width:0;box-sizing:border-box}`;const r=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.label="Typing…"}render(){return e(i,{key:"ddc8a2e02aa969a0da254b315af6640f873c66f8",role:"status","aria-live":"polite","aria-atomic":"true"},e("ds-text",{key:"c5a926cf62af193140f135264cfee3fd29e9a54c",as:"span",variant:"text-body-small",color:"secondary",shimmer:true},this.label))}static get style(){return o()}},[2,"ds-typing-indicator",{label:[1]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-typing-indicator","ds-text"];t.forEach((t=>{switch(t){case"ds-typing-indicator":if(!customElements.get(a(t))){customElements.define(a(t),r)}break;case"ds-text":if(!customElements.get(a(t))){n()}break}}))}c();const d=r;const f=c;export{d as DsTypingIndicator,f as defineCustomElement};
|
|
2
|
+
//# sourceMappingURL=ds-typing-indicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["typingIndicatorCss","TypingIndicator","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","label","render","h","Host","key","role","as","variant","color","shimmer"],"sources":["src/wc/components/TypingIndicator/TypingIndicator.css?tag=ds-typing-indicator&encapsulation=scoped","src/wc/components/TypingIndicator/TypingIndicator.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n min-width: 0;\n box-sizing: border-box;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ds-typing-indicator',\n styleUrl: 'TypingIndicator.css',\n scoped: true,\n})\nexport class TypingIndicator {\n /** Concise localized status text, ideally naming the participant who is typing. */\n @Prop() label: string = 'Typing…';\n\n render() {\n return (\n <Host role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n <ds-text as=\"span\" variant=\"text-body-small\" color=\"secondary\" shimmer>\n {this.label}\n </ds-text>\n </Host>\n );\n }\n}\n"],"mappings":"+FAAA,MAAMA,EAAqB,IAAM,wF,MCOpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,4CAOUC,KAAAC,MAAgB,SAWzB,CATC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SAAQ,YAAW,SAAQ,cAAa,QACjDH,EAAA,WAAAE,IAAA,2CAASE,GAAG,OAAOC,QAAQ,kBAAkBC,MAAM,YAAYC,QAAO,MACnEV,KAAKC,O","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as a,H as e,h as d,a as s,t as i}from"./index.js";import{d as r}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as a,H as e,h as d,a as s,t as i}from"./index.js";import{d as r}from"./p-CZZYGqKz.js";const t=()=>`.sc-ds-card-shell-data-viz-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-shell-data-viz-width);min-height:var(--_card-shell-data-viz-min-height);max-width:100%;overflow:hidden;border:none;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}.card-shell-data-viz__header.sc-ds-card-shell-data-viz{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);background-color:var(--color-background-secondary)}ds-text.card-shell-data-viz__title.sc-ds-card-shell-data-viz{display:flex;flex:1 1 auto;align-items:center;box-sizing:border-box;min-width:0;padding:calc(var(--dimension-space-075) + var(--dimension-space-025));-webkit-user-select:none;user-select:none}.card-shell-data-viz__actions.sc-ds-card-shell-data-viz{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card-shell-data-viz__actions.sc-ds-card-shell-data-viz:empty{display:none}.card-shell-data-viz__body.sc-ds-card-shell-data-viz{display:flex;flex:1 1 auto;flex-direction:column;box-sizing:border-box;min-height:0;border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary)}`;const c={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const l={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const o=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.cardWidth="md"}render(){return d(s,{key:"35033fee66abb0f944e351623676df51b3eeabab",class:"card-shell-data-viz",style:{"--_card-shell-data-viz-width":c[this.cardWidth],"--_card-shell-data-viz-min-height":l[this.cardWidth]}},d("header",{key:"22b7c0756fb6c2008c53b001bfe5b3e811aa99e3",class:"card-shell-data-viz__header"},d("ds-text",{key:"cc12d07428fe6969b10c1525432a9c645691a2a3",class:"card-shell-data-viz__title",variant:"text-title-small",emphasis:true,color:"primary",as:"h2"},this.heading),d("div",{key:"730e4e355f88b509c78f1826dcdb0eceaf8b7981",class:"card-shell-data-viz__actions"},d("slot",{key:"83c34add5e547524f2734ba306e257751023d469",name:"actions"}))),d("div",{key:"3006e8aeaaf5a308ee2147f33a9e62fec62fa50c",class:"card-shell-data-viz__body"},d("slot",{key:"f7c28a38e4afa018d338e3e150082a0637a07699"})))}static get style(){return t()}},[262,"ds-card-shell-data-viz",{heading:[1],cardWidth:[1,"card-width"]}]);function n(){if(typeof customElements==="undefined"){return}const a=["ds-card-shell-data-viz","ds-text"];a.forEach((a=>{switch(a){case"ds-card-shell-data-viz":if(!customElements.get(i(a))){customElements.define(i(a),o)}break;case"ds-text":if(!customElements.get(i(a))){r()}break}}))}n();export{o as C,n as d};
|
|
2
|
+
//# sourceMappingURL=p-0kEg-Z4f.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
const t={top:"bottom",right:"left",bottom:"top",left:"right"};function o(t,o){const{anchorRect:n,popupWidth:e,popupHeight:p,align:i,sideOffsetPx:r,alignOffsetPx:s}=t;if(o==="top"||o==="bottom"){return{x:i==="start"?n.left+s:i==="end"?n.right-e+s:n.left+n.width/2-e/2+s,y:o==="top"?n.top-p-r:n.bottom+r}}return{x:o==="left"?n.left-e-r:n.right+r,y:i==="start"?n.top+s:i==="end"?n.bottom-p+s:n.top+n.height/2-p/2+s}}function n(t,o,n){const{popupWidth:e,popupHeight:p,viewportPadPx:i,viewportWidth:r,viewportHeight:s}=t;if(o==="top"||o==="bottom"){return Math.max(i-n.y,0)+Math.max(n.y+p-(s-i),0)}return Math.max(i-n.x,0)+Math.max(n.x+e-(r-i),0)}function e(e){const p=o(e,e.side);const i=t[e.side];const r=o(e,i);const s=n(e,e.side,p);const c=n(e,i,r);const h=s>0&&c<s;const a=h?i:e.side;const f=h?r:p;const u=Math.max(e.viewportPadPx,e.viewportWidth-e.popupWidth-e.viewportPadPx);const M=Math.max(e.viewportPadPx,e.viewportHeight-e.popupHeight-e.viewportPadPx);return{x:Math.min(Math.max(f.x,e.viewportPadPx),u),y:Math.min(Math.max(f.y,e.viewportPadPx),M),resolvedSide:a}}export{e as c};
|
|
2
|
+
//# sourceMappingURL=p-B8C_yfLQ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["OPPOSITE_SIDE","top","right","bottom","left","rawPosition","input","side","anchorRect","anchor","popupWidth","popupHeight","align","sideOffsetPx","alignOffsetPx","x","width","y","height","mainAxisOverflow","position","viewportPadPx","viewportWidth","viewportHeight","Math","max","computeTooltipPosition","preferred","oppositeSide","opposite","preferredOverflow","oppositeOverflow","useOpposite","resolvedSide","maxX","maxY","min"],"sources":["src/wc/components/Tooltip/tooltip-position.ts"],"sourcesContent":["import type { TooltipAlign, TooltipSide } from './Tooltip';\n\nexport interface TooltipPositionInput {\n anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;\n popupWidth: number;\n popupHeight: number;\n side: TooltipSide;\n align: TooltipAlign;\n sideOffsetPx: number;\n alignOffsetPx: number;\n viewportPadPx: number;\n viewportWidth: number;\n viewportHeight: number;\n}\n\nexport interface TooltipPosition {\n x: number;\n y: number;\n resolvedSide: TooltipSide;\n}\n\nconst OPPOSITE_SIDE: Record<TooltipSide, TooltipSide> = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n};\n\nfunction rawPosition(\n input: TooltipPositionInput,\n side: TooltipSide,\n): Pick<TooltipPosition, 'x' | 'y'> {\n const {\n anchorRect: anchor,\n popupWidth,\n popupHeight,\n align,\n sideOffsetPx,\n alignOffsetPx,\n } = input;\n\n if (side === 'top' || side === 'bottom') {\n return {\n x:\n align === 'start'\n ? anchor.left + alignOffsetPx\n : align === 'end'\n ? anchor.right - popupWidth + alignOffsetPx\n : anchor.left + anchor.width / 2 - popupWidth / 2 + alignOffsetPx,\n y: side === 'top'\n ? anchor.top - popupHeight - sideOffsetPx\n : anchor.bottom + sideOffsetPx,\n };\n }\n\n return {\n x: side === 'left'\n ? anchor.left - popupWidth - sideOffsetPx\n : anchor.right + sideOffsetPx,\n y:\n align === 'start'\n ? anchor.top + alignOffsetPx\n : align === 'end'\n ? anchor.bottom - popupHeight + alignOffsetPx\n : anchor.top + anchor.height / 2 - popupHeight / 2 + alignOffsetPx,\n };\n}\n\nfunction mainAxisOverflow(\n input: TooltipPositionInput,\n side: TooltipSide,\n position: Pick<TooltipPosition, 'x' | 'y'>,\n): number {\n const {\n popupWidth,\n popupHeight,\n viewportPadPx,\n viewportWidth,\n viewportHeight,\n } = input;\n\n if (side === 'top' || side === 'bottom') {\n return Math.max(viewportPadPx - position.y, 0) +\n Math.max(position.y + popupHeight - (viewportHeight - viewportPadPx), 0);\n }\n\n return Math.max(viewportPadPx - position.x, 0) +\n Math.max(position.x + popupWidth - (viewportWidth - viewportPadPx), 0);\n}\n\n/** Flip on the preferred axis when needed, then clamp within the viewport. */\nexport function computeTooltipPosition(input: TooltipPositionInput): TooltipPosition {\n const preferred = rawPosition(input, input.side);\n const oppositeSide = OPPOSITE_SIDE[input.side];\n const opposite = rawPosition(input, oppositeSide);\n const preferredOverflow = mainAxisOverflow(input, input.side, preferred);\n const oppositeOverflow = mainAxisOverflow(input, oppositeSide, opposite);\n const useOpposite = preferredOverflow > 0 && oppositeOverflow < preferredOverflow;\n const resolvedSide = useOpposite ? oppositeSide : input.side;\n const position = useOpposite ? opposite : preferred;\n const maxX = Math.max(input.viewportPadPx, input.viewportWidth - input.popupWidth - input.viewportPadPx);\n const maxY = Math.max(input.viewportPadPx, input.viewportHeight - input.popupHeight - input.viewportPadPx);\n\n return {\n x: Math.min(Math.max(position.x, input.viewportPadPx), maxX),\n y: Math.min(Math.max(position.y, input.viewportPadPx), maxY),\n resolvedSide,\n };\n}\n"],"mappings":"AAqBA,MAAMA,EAAkD,CACtDC,IAAK,SACLC,MAAO,OACPC,OAAQ,MACRC,KAAM,SAGR,SAASC,EACPC,EACAC,GAEA,MACEC,WAAYC,EAAMC,WAClBA,EAAUC,YACVA,EAAWC,MACXA,EAAKC,aACLA,EAAYC,cACZA,GACER,EAEJ,GAAIC,IAAS,OAASA,IAAS,SAAU,CACvC,MAAO,CACLQ,EACEH,IAAU,QACNH,EAAOL,KAAOU,EACdF,IAAU,MACRH,EAAOP,MAAQQ,EAAaI,EAC5BL,EAAOL,KAAOK,EAAOO,MAAQ,EAAIN,EAAa,EAAII,EAC1DG,EAAGV,IAAS,MACRE,EAAOR,IAAMU,EAAcE,EAC3BJ,EAAON,OAASU,E,CAIxB,MAAO,CACLE,EAAGR,IAAS,OACRE,EAAOL,KAAOM,EAAaG,EAC3BJ,EAAOP,MAAQW,EACnBI,EACEL,IAAU,QACNH,EAAOR,IAAMa,EACbF,IAAU,MACRH,EAAON,OAASQ,EAAcG,EAC9BL,EAAOR,IAAMQ,EAAOS,OAAS,EAAIP,EAAc,EAAIG,EAE/D,CAEA,SAASK,EACPb,EACAC,EACAa,GAEA,MAAMV,WACJA,EAAUC,YACVA,EAAWU,cACXA,EAAaC,cACbA,EAAaC,eACbA,GACEjB,EAEJ,GAAIC,IAAS,OAASA,IAAS,SAAU,CACvC,OAAOiB,KAAKC,IAAIJ,EAAgBD,EAASH,EAAG,GAC1CO,KAAKC,IAAIL,EAASH,EAAIN,GAAeY,EAAiBF,GAAgB,E,CAG1E,OAAOG,KAAKC,IAAIJ,EAAgBD,EAASL,EAAG,GAC1CS,KAAKC,IAAIL,EAASL,EAAIL,GAAcY,EAAgBD,GAAgB,EACxE,CAGM,SAAUK,EAAuBpB,GACrC,MAAMqB,EAAYtB,EAAYC,EAAOA,EAAMC,MAC3C,MAAMqB,EAAe5B,EAAcM,EAAMC,MACzC,MAAMsB,EAAWxB,EAAYC,EAAOsB,GACpC,MAAME,EAAoBX,EAAiBb,EAAOA,EAAMC,KAAMoB,GAC9D,MAAMI,EAAmBZ,EAAiBb,EAAOsB,EAAcC,GAC/D,MAAMG,EAAcF,EAAoB,GAAKC,EAAmBD,EAChE,MAAMG,EAAeD,EAAcJ,EAAetB,EAAMC,KACxD,MAAMa,EAAWY,EAAcH,EAAWF,EAC1C,MAAMO,EAAOV,KAAKC,IAAInB,EAAMe,cAAef,EAAMgB,cAAgBhB,EAAMI,WAAaJ,EAAMe,eAC1F,MAAMc,EAAOX,KAAKC,IAAInB,EAAMe,cAAef,EAAMiB,eAAiBjB,EAAMK,YAAcL,EAAMe,eAE5F,MAAO,CACLN,EAAGS,KAAKY,IAAIZ,KAAKC,IAAIL,EAASL,EAAGT,EAAMe,eAAgBa,GACvDjB,EAAGO,KAAKY,IAAIZ,KAAKC,IAAIL,EAASH,EAAGX,EAAMe,eAAgBc,GACvDF,eAEJ,Q","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as e,h as s,a,t as i}from"./index.js";import{d as n}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as t,H as e,h as s,a,t as i}from"./index.js";import{d as n}from"./p-DuNZGFkV.js";import{d as o}from"./p-CZZYGqKz.js";const r=()=>`.sc-ds-attachment-list-h{display:block;min-width:0;box-sizing:border-box}.attachment-list.sc-ds-attachment-list{display:flex;flex-wrap:wrap;gap:var(--dimension-space-050)}.attachment-list__item.sc-ds-attachment-list{display:flex;max-width:var(--dimension-form-width-sm);padding:var(--dimension-space-075);border-radius:var(--dimension-radius-025);background:var(--color-background-secondary);color:inherit;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);text-decoration:none;box-sizing:border-box}a.attachment-list__item.sc-ds-attachment-list:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:var(--dimension-stroke-width-012)}.attachment-list__item-content.sc-ds-attachment-list{display:flex;align-items:center;gap:var(--dimension-space-075);min-width:0}.attachment-list__copy.sc-ds-attachment-list{display:flex;flex-direction:column;min-width:0}`;function c(t){if(!t)return undefined;try{const e=new URL(t,document.baseURI);return["http:","https:","blob:"].includes(e.protocol)?e.href:undefined}catch{return undefined}}const d=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.items=[];this.label="Attachments"}renderItem(t){const e=c(t.url);const a=s("span",{class:"attachment-list__item-content"},s("ds-icon",{name:"Document",size:"sm",color:"secondary"}),s("span",{class:"attachment-list__copy"},s("ds-text",{as:"span",variant:"text-body-small",emphasis:true,color:"primary",lineTruncation:1},t.name),t.mediaType||t.size?s("ds-text",{as:"span",variant:"text-caption",color:"secondary"},[t.mediaType,t.size].filter(Boolean).join(" · ")):null));return e?s("a",{class:"attachment-list__item",href:e,target:"_blank",rel:"noopener noreferrer"},a):s("div",{class:"attachment-list__item"},a)}render(){return s(a,{key:"5300797a0e1d3d00b4dcbb583d9b68550ce50ff6"},s("div",{key:"77d8849a13a753342e7ca6ab306c7c19e4df2d98",class:"attachment-list",role:"list","aria-label":this.label},this.items.map((t=>s("div",{role:"listitem",key:t.id},this.renderItem(t))))))}static get style(){return r()}},[2,"ds-attachment-list",{items:[16],label:[1]}]);function l(){if(typeof customElements==="undefined"){return}const t=["ds-attachment-list","ds-icon","ds-text"];t.forEach((t=>{switch(t){case"ds-attachment-list":if(!customElements.get(i(t))){customElements.define(i(t),d)}break;case"ds-icon":if(!customElements.get(i(t))){n()}break;case"ds-text":if(!customElements.get(i(t))){o()}break}}))}l();export{d as A,l as d};
|
|
2
|
+
//# sourceMappingURL=p-BEWtqFX7.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as t,H as i,h as s,a as o,t as n}from"./index.js";import{c as e}from"./p-B8C_yfLQ.js";import{d as r}from"./p-CZZYGqKz.js";import{a,T as d}from"./p-C_0Q8Cnp.js";import{r as h}from"./p-BWUTr_XN.js";import{a as l,r as c}from"./p-BHtg1fh3.js";import{C as p}from"./p-Cx-ywr1e.js";const u=new Set(["⌘","⇧","⌥","⌃"]);const m={alt:"⌥",cmd:"⌘",command:"⌘",control:"⌃",ctrl:"⌃",option:"⌥",shift:"⇧"};function f(t){return m[t.toLowerCase()]??t}function g(t){const i=t.trim();if(!i)return[];if(i.includes("+")){return i.split("+").map((t=>t.trim())).filter(Boolean).map(f)}if(/\s/.test(i)){return i.split(/\s+/).filter(Boolean).map(f)}const s=Array.from(i);const o=[];while(s.length>1&&u.has(s[0])){o.push(s.shift())}o.push(s.join(""));return o}const v=()=>`.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip,.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip,.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--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-tooltip-h,.ds-control--sm.sc-ds-tooltip{--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-tooltip-h,.ds-control--xs.sc-ds-tooltip{--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-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip,.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip,.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--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-tooltip-h,.ds-control--sm.sc-ds-tooltip{--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-tooltip-h,.ds-control--xs.sc-ds-tooltip{--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}.key-hint-group.sc-ds-tooltip{display:inline-flex;align-items:center;gap:var(--dimension-stroke-width-012);width:max-content;flex-shrink:0}.key-hint.sc-ds-tooltip{box-sizing:border-box;min-width:var(--ds-control-icon, var(--dimension-iconography-md));width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));padding-inline:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-secondary)}.key-hint--wide.sc-ds-tooltip{width:calc(var(--ds-control-icon, var(--dimension-iconography-md)) * 1.5)}.key-hint__label.sc-ds-tooltip{display:inline-flex;width:max-content;min-width:max-content;font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);line-height:1;font-weight:var(--typography-weight-regular);letter-spacing:0;text-transform:uppercase;color:inherit}.ds-control--xs.sc-ds-tooltip .key-hint__label.sc-ds-tooltip{font-size:calc(var(--typography-fontsize-xs) * 0.78)}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-inner.sc-ds-tooltip>ds-text.sc-ds-tooltip{flex-shrink:0;min-width:max-content;max-width:none;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.tooltip-popup.sc-ds-tooltip,.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:none;opacity:0}}`;const y={md:d.size400,sm:d.size300,xs:d.size200};let b=0;let x=0;let w=null;function C(t){const i=document.createElement("ds-text");i.as="span";i.variant=t.variant;i.emphasis=t.emphasis??false;i.color=t.color??"inherit";if(t.wrap)i.wrap=t.wrap;i.textContent=t.text;return i}function k(t){t.style.flexShrink="0";t.style.minWidth="max-content";t.style.maxWidth="none";t.style.padding="0 var(--ds-control-label-inset, var(--dimension-space-025))";t.style.color="var(--color-foreground-primary)"}const O=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=a.space050;this.alignOffset=0;this.delay=d.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++x}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.positionObserver=null;this.anchorObserver=null;this.positionFrame=null;this.skipEnterAnimation=false;this.isOpen=false;this.lastInteractionWasKeyboard=false;this.pointerEnterHandler=t=>{if(t.pointerType==="touch")return;this.show()};this.pointerLeaveHandler=t=>{if(t.pointerType==="touch")return;this.hide()};this.pointerDownHandler=t=>{this.lastInteractionWasKeyboard=false;if(t.pointerType==="touch"&&(this.isOpen||this.popupEl))this.hideInstant()};this.keyDownHandler=()=>{this.lastInteractionWasKeyboard=true};this.focusHandler=()=>{if(this.lastInteractionWasKeyboard||this.anchor?.matches(":focus-visible"))this.show()};this.blurHandler=t=>{const i=t.relatedTarget;if(i&&this.anchor?.contains(i))return;this.hide()};this.scrollResizeHandler=()=>{if(this.positionFrame!==null)return;this.positionFrame=requestAnimationFrame((()=>{this.positionFrame=null;this.calculatePosition()}))};this.escapeHandler=t=>{if(t.key!=="Escape"||!this.isOpen)return;t.preventDefault();this.hide()};this.handleSlotChange=()=>{const t=this.el.querySelector("slot");const i=t?.assignedElements?.()[0]??this.el.firstElementChild;if(i===this.anchor)return;if(this.isOpen||this.popupEl)this.hideInstant();this.unbindAnchor();this.bindAnchor()}}componentDidLoad(){this.bindAnchor();this.anchorObserver=new MutationObserver((()=>this.handleSlotChange()));this.anchorObserver.observe(this.el,{childList:true})}disconnectedCallback(){if(w===this)w=null;this.anchorObserver?.disconnect();this.anchorObserver=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.label?.trim()){if(this.isOpen||this.popupEl)this.hideInstant();return}if(!this.popupEl||!this.isOpen)return;this.renderPopupContent();this.schedulePosition()}get viewportPadPx(){return h(d.space050,d.space050)}get sideOffsetPx(){return h(this.sideOffset,d.space050)}get alignOffsetPx(){return h(this.alignOffset,0)}get hoverDelayMs(){return l(this.delay,d.animationDelayMedium3)}get instantReopenMs(){return l(d.animationDurationMedium1,d.animationDurationMedium1)}get fadeOutMs(){return c(d.motionShort3,d.animationDurationShort3)}get tooltipFallbackWidthPx(){return h(d.tooltipFallbackWidth,d.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=y[this.size];return h(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const i=t?.assignedElements?.()??[];const s=i[0]??this.el.firstElementChild;if(!s||s===this.anchor)return;this.anchor=s;s.addEventListener("pointerenter",this.pointerEnterHandler);s.addEventListener("pointerleave",this.pointerLeaveHandler);s.addEventListener("pointerdown",this.pointerDownHandler);s.addEventListener("keydown",this.keyDownHandler);s.addEventListener("focusin",this.focusHandler);s.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.unlinkDescribedBy();this.anchor.removeEventListener("pointerenter",this.pointerEnterHandler);this.anchor.removeEventListener("pointerleave",this.pointerLeaveHandler);this.anchor.removeEventListener("pointerdown",this.pointerDownHandler);this.anchor.removeEventListener("keydown",this.keyDownHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}linkDescribedBy(){if(!this.anchor||!this.popupEl)return;const t=new Set((this.anchor.getAttribute("aria-describedby")??"").split(/\s+/).filter(Boolean));t.add(this.tooltipId);this.anchor.setAttribute("aria-describedby",Array.from(t).join(" "))}unlinkDescribedBy(){if(!this.anchor)return;const t=(this.anchor.getAttribute("aria-describedby")??"").split(/\s+/).filter((t=>t&&t!==this.tooltipId));if(t.length)this.anchor.setAttribute("aria-describedby",t.join(" "));else this.anchor.removeAttribute("aria-describedby")}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}setupOpenListeners(){window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler);document.addEventListener("keydown",this.escapeHandler)}teardownOpenListeners(){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);document.removeEventListener("keydown",this.escapeHandler);if(this.positionFrame!==null){cancelAnimationFrame(this.positionFrame);this.positionFrame=null}}destroyPopup(){this.teardownOpenListeners();this.positionObserver?.disconnect();this.positionObserver=null;this.unlinkDescribedBy();if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}schedulePosition(){if(!this.popupEl)return;const t=()=>{const t=this.popupEl?.querySelector(":scope > .tooltip-inner > ds-text");if(t instanceof i)k(t)};requestAnimationFrame((()=>{t();this.calculatePosition();requestAnimationFrame((()=>{t();this.calculatePosition()}))}));this.positionObserver?.disconnect();this.positionObserver=new ResizeObserver((()=>this.calculatePosition()));this.positionObserver.observe(this.popupEl);if(this.anchor)this.positionObserver.observe(this.anchor)}hideInstant(){this.clearTimers();b=Date.now();if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){if(!this.label?.trim())return;this.clearTimers();let t=Date.now()-b<this.instantReopenMs;if(w&&w!==this){w.hideInstant();t=true}w=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;if(!this.label?.trim())return;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;b=Date.now();if(!this.popupEl){this.isOpen=false;return}this.popupEl.classList.remove("tooltip-popup--instant");this.popupEl.classList.add("tooltip-popup--closing");if(this.fadeOutMs===0){if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false;return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.setupOpenListeners();this.linkDescribedBy();this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.schedulePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=p[this.size];const i=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const s="sc-ds-tooltip";const o=document.createElement("div");o.className=`tooltip-inner ${i} ${s}`;const n=t=>{if(!this.shortcutKey||this.shortcutKeyPosition!==t)return;const i=document.createElement("span");i.className=`key-hint-group ${s}`;i.setAttribute("aria-hidden","true");for(const t of g(this.shortcutKey)){const o=document.createElement("span");const n=Array.from(t).length>1?" key-hint--wide":"";o.className=`key-hint${n} ${s}`;const e=document.createElement("span");e.className=`key-hint__label ${s}`;e.textContent=t;o.appendChild(e);i.appendChild(o)}o.appendChild(i)};n("start");const e=C({variant:t,wrap:"nowrap",text:this.label});k(e);o.appendChild(e);n("end");this.popupEl.replaceChildren(o)}calculatePosition(){if(!this.anchor||!this.popupEl)return;const t=this.popupEl;const i=this.anchor.getBoundingClientRect();const s=t.offsetWidth||this.tooltipFallbackWidthPx;const o=t.offsetHeight||this.tooltipFallbackHeightPx;const{x:n,y:r,resolvedSide:a}=e({anchorRect:i,popupWidth:s,popupHeight:o,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});t.dataset.side=a;t.style.transform=`translate(${Math.round(n)}px, ${Math.round(r)}px)`}render(){return s(o,{key:"a658f4fedd915acf28719181a6c0e36dfd3c3a84",style:{display:"contents"}},s("slot",{key:"56208e17b56f5dcff4e1b361957a7559964315c7",onSlotchange:this.handleSlotChange}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return v()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function P(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),O)}break;case"ds-text":if(!customElements.get(n(t))){r()}break}}))}P();export{O as T,P as d};
|
|
2
|
+
//# sourceMappingURL=p-BMwnjAIq.js.map
|