@ds-mo/ui 9.2.1 → 10.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 +1 -1
- package/dist/agent.json +384 -135
- 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/index.d.ts +1 -1
- package/dist/angular/index.js +1 -2
- package/dist/angular/proxies.d.ts +1 -2
- package/dist/angular/proxies.js +1 -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-badge.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-data-viz-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-line.js +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-item.js.map +1 -1
- package/dist/components/ds-conversation-list-section.js +1 -1
- package/dist/components/ds-conversation-list.js +1 -1
- package/dist/components/ds-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-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-bubble.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-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-sub-nav.js +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-select-multi.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-gradient-picker.js +1 -1
- package/dist/components/ds-shell-gradient-picker.js.map +1 -1
- package/dist/components/ds-shell-gradient-swatch.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-swatch-picker.js +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-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.js +1 -1
- package/dist/components/{p-DnMCRAwx.js → p-0kEg-Z4f.js} +2 -2
- package/dist/components/{p-Cijzn3YQ.js → p-B4RQoNmL.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-BHpWYKtP.js → p-BJUcsBHt.js} +2 -2
- package/dist/components/{p-DaQ0ZE_V.js → p-BTo4pNdp.js} +2 -2
- package/dist/components/p-Bet_UjML.js +2 -0
- package/dist/components/{p-CJlgONwR.js.map → p-Bet_UjML.js.map} +1 -1
- package/dist/components/{p-Ci_nVk5P.js → p-BkwBtZs3.js} +2 -2
- package/dist/components/{p-Dst-OliP.js → p-CKnoWZd9.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-xB0GPG3-.js → p-CS12e52R.js} +2 -2
- 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-DiooIO2B.js → p-CxyjoTN1.js} +2 -2
- package/dist/components/p-CyoHRqy6.js +2 -0
- package/dist/components/p-CyoHRqy6.js.map +1 -0
- package/dist/components/p-DBJ2I3mH.js +2 -0
- package/dist/components/p-DBJ2I3mH.js.map +1 -0
- package/dist/components/p-DM-95BX1.js +2 -0
- package/dist/components/p-DM-95BX1.js.map +1 -0
- package/dist/components/{p-T0Mzhv3-.js → p-DZAtgSZo.js} +2 -2
- package/dist/components/{p-CeFBA7Dx.js → p-Dh4q5TSS.js} +2 -2
- package/dist/components/{p-Dj5MejHv.js → p-DhsO0939.js} +2 -2
- package/dist/components/{p-CiwdnKKp.js → p-DrDHC7V6.js} +2 -2
- package/dist/components/{p-CblAABEo.js → p-DsbhBb5F.js} +2 -2
- package/dist/components/p-DuNZGFkV.js +2 -0
- package/dist/components/p-DuNZGFkV.js.map +1 -0
- package/dist/components/{p-B1pWGQn1.js → p-P_4vE1ub.js} +2 -2
- package/dist/docs/components.json +447 -515
- 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 +2 -2
- 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 +4 -4
- 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 +7 -7
- package/dist/mcp-data/registry/message-composer.json +2 -2
- package/dist/mcp-data/registry/message-scroller.json +1 -1
- 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 +1 -1
- 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 +387 -141
- 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 +2 -2
- 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/react/components.d.ts +1 -2
- package/dist/react/components.js +1 -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/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.d.ts +136 -180
- 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/angular/ds-card.js +0 -38
- package/dist/components/ds-banner.d.ts +0 -11
- 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-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-CJlgONwR.js +0 -2
- package/dist/components/p-CWNdl52Y.js +0 -2
- package/dist/components/p-CWNdl52Y.js.map +0 -1
- 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-drBA73M_.js +0 -2
- package/dist/components/p-drBA73M_.js.map +0 -1
- 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.d.ts +0 -9
- 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-Cijzn3YQ.js.map → p-B4RQoNmL.js.map} +0 -0
- /package/dist/components/{p-BHpWYKtP.js.map → p-BJUcsBHt.js.map} +0 -0
- /package/dist/components/{p-DaQ0ZE_V.js.map → p-BTo4pNdp.js.map} +0 -0
- /package/dist/components/{p-Ci_nVk5P.js.map → p-BkwBtZs3.js.map} +0 -0
- /package/dist/components/{p-Dst-OliP.js.map → p-CKnoWZd9.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-xB0GPG3-.js.map → p-CS12e52R.js.map} +0 -0
- /package/dist/components/{p-BSOZXagj.js.map → p-CZZYGqKz.js.map} +0 -0
- /package/dist/components/{p-DiooIO2B.js.map → p-CxyjoTN1.js.map} +0 -0
- /package/dist/components/{p-T0Mzhv3-.js.map → p-DZAtgSZo.js.map} +0 -0
- /package/dist/components/{p-CeFBA7Dx.js.map → p-Dh4q5TSS.js.map} +0 -0
- /package/dist/components/{p-Dj5MejHv.js.map → p-DhsO0939.js.map} +0 -0
- /package/dist/components/{p-CiwdnKKp.js.map → p-DrDHC7V6.js.map} +0 -0
- /package/dist/components/{p-CblAABEo.js.map → p-DsbhBb5F.js.map} +0 -0
- /package/dist/components/{p-B1pWGQn1.js.map → p-P_4vE1ub.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,h as t,a as n,t as i}from"./index.js";import{D as l,b as a,n as o,a as r}from"./p-D1HFMTdC.js";import{e as h,c,r as d,a as p,b as f}from"./p-BKhG2xrW.js";const u="--ds-shell-gradient-image";const b="--ds-shell-gradient-size";const g="--ds-shell-gradient-position-panel";const v="--ds-shell-gradient-position-bar";const m="--ds-shell-gradient-opacity";function y(e=l){return a(e)}function _(e){const s=typeof globalThis.window!=="undefined"?globalThis.window:undefined;if(!s)return{width:0,height:0};const t=s.visualViewport;return{width:Math.round(t?.width??s.innerWidth),height:Math.round(t?.height??s.innerHeight)}}function w(e){return`${Math.round(e.width)}px ${Math.round(e.height)}px`}function x(){return"0 0"}function k(e){return`${-Math.round(e)}px 0`}const P={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function z(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function S(e){if(!e||typeof e!=="object")return false;if(!("closest"in e)||typeof e.closest!=="function")return false;const s=e;const t=s.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(t)return true;const n=s.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(s.isContentEditable)}function C(e){if(e.key==="["||e.code==="BracketLeft")return"[";if(e.key==="]"||e.code==="BracketRight")return"]";return e.key.length===1?e.key.toLowerCase():e.key.toLowerCase()}function M(e){if((e.key==="?"||e.code==="Slash"&&e.shiftKey)&&!e.metaKey&&!e.ctrlKey&&!e.altKey){return"open-tool:help"}if(!z(e))return null;const s=C(e);if(s==="[")return"toggle-panel-nav";if(s==="]")return"close-panel-tools";const t=P[s];if(t)return`open-tool:${t}`;return null}function D(e,s){if(typeof document==="undefined")return 0;const t=document.createElement("div");t.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+s+");";e.appendChild(t);const n=t.getBoundingClientRect().width;e.removeChild(t);return n}function L(e){return{expandedPx:D(e,"--_nav-width"),collapsedPx:D(e,"--_nav-width-collapsed")}}function T(e,s){if(s?.classList.contains("panel-nav--collapsed"))return true;const t=e?.collapsed;return t===true}function V(e,s){return s?e.collapsedPx:e.expandedPx}const j=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;overscroll-behavior:none;--ds-shell-panel-tools-width:var(--dimension-panel-width-xs)}.app-shell.sc-ds-app-shell{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;overscroll-behavior:none;font-family:var(--typography-font-family, system-ui)}.sc-ds-app-shell-h{--_shell-chrome-bg:var(--color-background-secondary)}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.app-shell__chrome.sc-ds-app-shell{position:absolute;inset:0;pointer-events:none;z-index:0;background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed;z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.app-shell__panel.sc-ds-app-shell-s>ds-panel-nav,.app-shell__panel .sc-ds-app-shell-s>ds-panel-nav{display:block;height:100%}.app-shell__main.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools' 'content tools';position:relative;z-index:1}.app-shell__bar.sc-ds-app-shell{grid-area:bar;flex:0 0 auto;min-width:0}.app-shell__bar.sc-ds-app-shell-s>ds-bar-nav,.app-shell__bar .sc-ds-app-shell-s>ds-bar-nav{display:block}.app-shell__content.sc-ds-app-shell{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:none;contain:layout}.app-shell__content.sc-ds-app-shell{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}.app-shell--tools-fullscreen.sc-ds-app-shell-h .app-shell__panel.sc-ds-app-shell,.app-shell--tools-fullscreen.sc-ds-app-shell-h .app-shell__bar.sc-ds-app-shell,.app-shell--tools-fullscreen.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell{visibility:hidden}`;const W=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradientPreset=l;this.shortcutsEnabled=true;this.toolsFullscreen=false;this.resizeObserver=null;this.panelNavTransition=new h;this.chromeSyncCoalescer=c((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(d(e)!=="panel-nav")return;this.panelNavTransition.enter();const s=_();this.cachedViewportWidth=s.width;this.cachedViewportHeight=s.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(d(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(p,this.onChromeTransitionStart);this.el.addEventListener(f,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}));const e=this.el.querySelector("ds-panel-tools");this.toolsFullscreen=e?.getAttribute("presentation")==="fullscreen"}handleToolsPresentation(e){this.toolsFullscreen=e.detail?.presentation==="fullscreen"}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(p,this.onChromeTransitionStart);this.el.removeEventListener(f,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".app-shell__panel");if(e)this.resizeObserver.observe(e)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const e=window.visualViewport;if(e){e.addEventListener("resize",this.onVisualViewportChange,{passive:true});e.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const e=window.visualViewport;if(e){e.removeEventListener("resize",this.onVisualViewportChange);e.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const e=this.el.querySelector("ds-panel-nav .panel-nav");if(!e)return;this.panelWidthTokens=L(e)}applyGradientVars(e,s){const t=e.style;for(const[e,n]of Object.entries(s)){if(n===null)t.removeProperty(e);else t.setProperty(e,n)}}clearGradientPaintVars(e){const s=[u,b,m];for(const t of e){for(const e of s)t.style.removeProperty(e)}}syncChromeLayoutVars(e,s,t,n){if(e){e.style.setProperty(g,t)}if(s){s.style.setProperty(v,n)}}resolvePanelWidthPx(e){const s=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=T(e,s);return V(this.panelWidthTokens,t)}const t=this.el.querySelector(".app-shell__panel");const n=t?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const t=T(e,s);return V(this.panelWidthTokens,t)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return _()}chromeLayerActive(){return o(this.gradientPreset)!=="none"}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(S(e.target))return;const s=M(e);if(!s)return;e.preventDefault();const t=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(s==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(s==="close-panel-tools"){void n?.closeDrawer();return}if(s.startsWith("open-tool:")&&n){const e=s.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");const t=[this.el,e,s].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(g);if(s)s.style.removeProperty(v)};const i=o(this.gradientPreset);if(i==="none"){this.clearGradientPaintVars(t);n();return}const l=this.resolveViewportDimensions();const a=this.resolvePanelWidthPx(e);const h=x();const c=k(a);this.syncChromeLayoutVars(e,s,h,c);const d=y(i);const p=w({width:l.width,height:l.height});const f=r(i);for(const e of t){if(e===this.el){this.applyGradientVars(e,{[u]:d,[b]:p,[g]:h,[v]:c,[m]:f});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[u]:d,[b]:p,[m]:f,[g]:s?null:h,[v]:s?c:null})}}render(){const e=this.chromeLayerActive();const s={"app-shell":true,"app-shell--gradient":e,[`app-shell--${this.navStyle}`]:true,"app-shell--tools-fullscreen":this.toolsFullscreen};return t(n,{key:"2b091217ca80c1dc7fa38eff4723114696b0c048",class:s},t("div",{key:"d5a614c4ea70e44b74d236bfb634d4d63e1fc443",class:"app-shell__row"},t("div",{key:"1d791734e486319a45b3a8f3c6d17de09f51fc90",class:"app-shell__chrome","aria-hidden":"true"}),t("div",{key:"af50b2efb6ac6f6d13f5cfc0a1b28762f778421d",class:"app-shell__panel","aria-hidden":this.toolsFullscreen?"true":undefined,inert:this.toolsFullscreen?true:undefined},t("slot",{key:"9cb5f063833e95a1146a69463a13fd9a4c5efb1d",name:"panel"})),t("div",{key:"16e3a582c3736cc3b3975ac599026c60c904fe39",class:"app-shell__main"},t("div",{key:"ce391bfa212e7670b5ac90f71da1ead724aa293c",class:"app-shell__bar","aria-hidden":this.toolsFullscreen?"true":undefined,inert:this.toolsFullscreen?true:undefined},t("slot",{key:"29468d5e98e7819c843d66909d55186213357b5b",name:"bar"})),t("div",{key:"e80ea58f9a5a9d26a9f3db174fdd4a7ae1bade55",class:"app-shell__tools"},t("slot",{key:"876d290ceff20e6e6b3ac50624a0201e66b7fbc9",name:"tools"})),t("div",{key:"0bc64e460119e616174c7f1f5204ea144b029ed4",class:"app-shell__content","aria-hidden":this.toolsFullscreen?"true":undefined,inert:this.toolsFullscreen?true:undefined},t("slot",{key:"30f9e75f00a982ccd45cb650962bee5158453b5c"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}}static get style(){return j()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"],toolsFullscreen:[32]},[[0,"dsPresentationChange","handleToolsPresentation"],[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}]);function $(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(i(e))){customElements.define(i(e),W)}break}}))}$();const B=W;const E=$;export{B as DsAppShell,E as defineCustomElement};
|
|
1
|
+
import{p as e,H as s,h as t,a as n,t as i}from"./index.js";import{D as a,b as l,n as o,a as r}from"./p-D1HFMTdC.js";import{e as h,c,r as d,a as p,b as u}from"./p-BKhG2xrW.js";const f="--ds-shell-gradient-image";const b="--ds-shell-gradient-size";const g="--ds-shell-gradient-position-panel";const v="--ds-shell-gradient-position-bar";const m="--ds-shell-gradient-opacity";function y(e=a){return l(e)}function _(e){const s=typeof globalThis.window!=="undefined"?globalThis.window:undefined;if(!s)return{width:0,height:0};const t=s.visualViewport;return{width:Math.round(t?.width??s.innerWidth),height:Math.round(t?.height??s.innerHeight)}}function w(e){return`${Math.round(e.width)}px ${Math.round(e.height)}px`}function x(){return"0 0"}function k(e){return`${-Math.round(e)}px 0`}const P={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function z(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function S(e){if(!e||typeof e!=="object")return false;if(!("closest"in e)||typeof e.closest!=="function")return false;const s=e;const t=s.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(t)return true;const n=s.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(s.isContentEditable)}function C(e){if(e.key==="["||e.code==="BracketLeft")return"[";if(e.key==="]"||e.code==="BracketRight")return"]";return e.key.length===1?e.key.toLowerCase():e.key.toLowerCase()}function M(e){if((e.key==="?"||e.code==="Slash"&&e.shiftKey)&&!e.metaKey&&!e.ctrlKey&&!e.altKey){return"open-tool:help"}if(!z(e))return null;const s=C(e);if(s==="[")return"toggle-panel-nav";if(s==="]")return"close-panel-tools";const t=P[s];if(t)return`open-tool:${t}`;return null}function D(e,s){if(typeof document==="undefined")return 0;const t=document.createElement("div");t.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+s+");";e.appendChild(t);const n=t.getBoundingClientRect().width;e.removeChild(t);return n}function L(e){return{expandedPx:D(e,"--_nav-width"),collapsedPx:D(e,"--_nav-width-collapsed")}}function T(e,s){if(s?.classList.contains("panel-nav--collapsed"))return true;const t=e?.collapsed;return t===true}function V(e,s){return s?e.collapsedPx:e.expandedPx}const j=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;overscroll-behavior:none;--ds-shell-panel-tools-width:var(--dimension-panel-width-xs)}.app-shell.sc-ds-app-shell{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;overscroll-behavior:none;font-family:var(--typography-font-family, system-ui)}.sc-ds-app-shell-h{--_shell-chrome-bg:var(--color-background-secondary)}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.app-shell__chrome.sc-ds-app-shell{position:absolute;inset:0;pointer-events:none;z-index:0;background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed;z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.app-shell__panel.sc-ds-app-shell-s>ds-panel-nav,.app-shell__panel .sc-ds-app-shell-s>ds-panel-nav{display:block;height:100%}.app-shell__main.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools' 'content tools';position:relative;z-index:1}.app-shell__bar.sc-ds-app-shell{grid-area:bar;flex:0 0 auto;min-width:0}.app-shell__bar.sc-ds-app-shell-s>ds-bar-nav,.app-shell__bar .sc-ds-app-shell-s>ds-bar-nav{display:block}.app-shell__content.sc-ds-app-shell{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:none;contain:layout}.app-shell__content.sc-ds-app-shell{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}.app-shell--tools-fullscreen.sc-ds-app-shell-h .app-shell__panel.sc-ds-app-shell,.app-shell--tools-fullscreen.sc-ds-app-shell-h .app-shell__bar.sc-ds-app-shell,.app-shell--tools-fullscreen.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell{visibility:hidden}`;const W=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradientPreset=a;this.shortcutsEnabled=true;this.toolsFullscreen=false;this.resizeObserver=null;this.panelNavTransition=new h;this.chromeSyncCoalescer=c((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(d(e)!=="panel-nav")return;this.panelNavTransition.enter();const s=_();this.cachedViewportWidth=s.width;this.cachedViewportHeight=s.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(d(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(p,this.onChromeTransitionStart);this.el.addEventListener(u,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}));const e=this.el.querySelector("ds-panel-tools");this.toolsFullscreen=e?.getAttribute("presentation")==="fullscreen"}handleToolsPresentation(e){this.toolsFullscreen=e.detail?.presentation==="fullscreen"}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(p,this.onChromeTransitionStart);this.el.removeEventListener(u,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".app-shell__panel");if(e)this.resizeObserver.observe(e)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const e=window.visualViewport;if(e){e.addEventListener("resize",this.onVisualViewportChange,{passive:true});e.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const e=window.visualViewport;if(e){e.removeEventListener("resize",this.onVisualViewportChange);e.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const e=this.el.querySelector("ds-panel-nav .panel-nav");if(!e)return;this.panelWidthTokens=L(e)}applyGradientVars(e,s){const t=e.style;for(const[e,n]of Object.entries(s)){if(n===null)t.removeProperty(e);else t.setProperty(e,n)}}clearGradientPaintVars(e){const s=[f,b,m];for(const t of e){for(const e of s)t.style.removeProperty(e)}}syncChromeLayoutVars(e,s,t,n){if(e){e.style.setProperty(g,t)}if(s){s.style.setProperty(v,n)}}resolvePanelWidthPx(e){const s=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=T(e,s);return V(this.panelWidthTokens,t)}const t=this.el.querySelector(".app-shell__panel");const n=t?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const t=T(e,s);return V(this.panelWidthTokens,t)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return _()}chromeLayerActive(){return o(this.gradientPreset)!=="none"}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(S(e.target))return;const s=M(e);if(!s)return;e.preventDefault();const t=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(s==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(s==="close-panel-tools"){void n?.closeDrawer();return}if(s.startsWith("open-tool:")&&n){const e=s.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");const t=[this.el,e,s].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(g);if(s)s.style.removeProperty(v)};const i=o(this.gradientPreset);if(i==="none"){this.clearGradientPaintVars(t);n();return}const a=this.resolveViewportDimensions();const l=this.resolvePanelWidthPx(e);const h=x();const c=k(l);this.syncChromeLayoutVars(e,s,h,c);const d=y(i);const p=w({width:a.width,height:a.height});const u=r(i);for(const e of t){if(e===this.el){this.applyGradientVars(e,{[f]:d,[b]:p,[g]:h,[v]:c,[m]:u});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[f]:d,[b]:p,[m]:u,[g]:s?null:h,[v]:s?c:null})}}render(){const e=this.chromeLayerActive();const s={"app-shell":true,"app-shell--gradient":e,[`app-shell--${this.navStyle}`]:true,"app-shell--tools-fullscreen":this.toolsFullscreen};return t(n,{key:"d363b1e81bb30aa8431b2a21e3ec9b757a19e6df",class:s},t("div",{key:"b46ed6f36e0ddc0d8bfea661b39d838e30b32dfe",class:"app-shell__row"},t("div",{key:"6603d1145018e8d394d8d74d0796956cb7cac18a",class:"app-shell__chrome","aria-hidden":"true"}),t("div",{key:"8adf32c93cf4b841c6312222aa6b872970a8917a",class:"app-shell__panel","aria-hidden":this.toolsFullscreen?"true":undefined,inert:this.toolsFullscreen?true:undefined},t("slot",{key:"4572cc50906cc6aa1a6993500fa263bc80b34eb4",name:"panel"})),t("div",{key:"8fac8ca50f891bf3acb1470ee711094a47246ae3",class:"app-shell__main"},t("div",{key:"b08668e65b6adea61298d993a5e59ff7a5892441",class:"app-shell__bar","aria-hidden":this.toolsFullscreen?"true":undefined,inert:this.toolsFullscreen?true:undefined},t("slot",{key:"9f8841025db35af7f7a79ada332e292802c7713e",name:"bar"})),t("div",{key:"aef6742c9570ed4543bfe8c2d3bf97c7d0b50607",class:"app-shell__tools"},t("slot",{key:"a3aad909b42b32507fb713bcec9722505e2a5cd6",name:"tools"})),t("div",{key:"b75b8d228896ab3abc8258a0a4ad7930aa132501",class:"app-shell__content","aria-hidden":this.toolsFullscreen?"true":undefined,inert:this.toolsFullscreen?true:undefined},t("slot",{key:"3a06ed9f778fb5fdbf6343c4af0c5b2565271ab8"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}}static get style(){return j()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"],toolsFullscreen:[32]},[[0,"dsPresentationChange","handleToolsPresentation"],[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}]);function $(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(i(e))){customElements.define(i(e),W)}break}}))}$();const B=W;const E=$;export{B as DsAppShell,E as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-app-shell.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{A as o,d as s}from"./p-
|
|
1
|
+
import{A as o,d as s}from"./p-CxyjoTN1.js";const t=o;const p=s;export{t as DsAttachmentList,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-attachment-list.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,h as a,a as t,t as i}from"./index.js";import{d as r}from"./p-
|
|
1
|
+
import{p as e,H as s,h as a,a as t,t as i}from"./index.js";import{d as r}from"./p-DuNZGFkV.js";const n=()=>`.sc-ds-avatar-h{display:inline-flex;flex-shrink:0;width:var(--dimension-size-400);height:var(--dimension-size-400)}.avatar.sc-ds-avatar{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}`;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.icon="";this.iconColor="secondary"}render(){return a(t,{key:"67e98d39bb17cdd48886d1f410ce65ef4661fa8d"},a("span",{key:"aedcddff02d062a6bcd39cc140d9b578f9f36781",class:"avatar",role:this.label?"img":"presentation","aria-label":this.label,"aria-hidden":!this.label?"true":undefined},a("ds-icon",{key:"19668e18bfc11a3501cb72dd20a29ace13d086aa",name:this.icon,size:"md",color:this.iconColor})))}static get style(){return n()}},[2,"ds-avatar",{icon:[1],iconColor:[1,"icon-color"],label:[1]}]);function o(){if(typeof customElements==="undefined"){return}const e=["ds-avatar","ds-icon"];e.forEach((e=>{switch(e){case"ds-avatar":if(!customElements.get(i(e))){customElements.define(i(e),d)}break;case"ds-icon":if(!customElements.get(i(e))){r()}break}}))}o();const c=d;const l=o;export{c as DsAvatar,l as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-avatar.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{B as o,d as s}from"./p-
|
|
1
|
+
import{B as o,d as s}from"./p-DrDHC7V6.js";const r=o;const t=s;export{r as DsBadge,t as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-badge.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as t,c as i,h as e,a as n,t as a}from"./index.js";import{i as r,g as o}from"./p-BQq26pt9.js";import{s as d,p as h,d as l}from"./p-BOQnc-M4.js";import{C as c,c as b,a as f,b as u,r as v,d as p}from"./p-BKhG2xrW.js";import{d as g}from"./p-CiwdnKKp.js";import{d as m}from"./p-Dst-OliP.js";import{d as _}from"./p-CBYuvZKM.js";import{d as y}from"./p-Cpr3K41-.js";import{d as w}from"./p-Dj5MejHv.js";import{d as k}from"./p-B1pWGQn1.js";import{d as C}from"./p-BRfOCc_h.js";import{d as x}from"./p-BSOZXagj.js";function T(s,t){const i=[];let e=[];for(const n of s){if(r(n)){if(e.length>0){i.push({items:e});e=[]}continue}e.push({label:n.label,value:n.id,dot:n.dot,isSelected:n.id===t,isInactive:n.isInactive})}if(e.length>0){i.push({items:e})}return i}function S(s,t){return T(j(s),t)}function M(s,t,i,e=2){const n=s-t;if(i){return n>-e}return n>e}function O(s,t,i,e,n){if(s.length===0||t<=0)return 0;const a=E(s,s.length,e,n);if(a<=t)return s.length;const r=Math.max(0,t-i);let o=0;for(let t=1;t<=s.length;t++){const i=E(s,t,e,n);if(i>r)break;o=t}return o}function F(s){let t=s.length;while(t>0&&r(s[t-1])){t-=1}return s.slice(0,t)}function j(s){let t=0;while(t<s.length&&r(s[t])){t+=1}return s.slice(t)}function E(s,t,i,e){if(t<=0)return 0;const n=s.slice(0,t).reduce(((s,t)=>s+t),0);return e+n+i*Math.max(0,t-1)}const P=()=>`.ds-control--md.sc-ds-bar-nav-h,.ds-control--md.sc-ds-bar-nav{--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-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-bar-nav-h,.ds-control--sm.sc-ds-bar-nav{--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-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-bar-nav-h,.ds-control--xs.sc-ds-bar-nav{--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-radius:var(--dimension-radius-025)}.sc-ds-bar-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring.sc-ds-bar-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-bar-nav-h,.ds-control-inactive.sc-ds-bar-nav{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3);isolation:isolate;--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}ds-app-shell.sc-ds-bar-nav-h:not([gradient-preset='none']) .bar-nav.sc-ds-bar-nav,ds-app-shell:not([gradient-preset='none']) .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:var(--dimension-space-100);align-items:center}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__tabs-visible.sc-ds-bar-nav{flex:1;min-width:0;width:100%}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav>div.sc-ds-bar-nav{width:max-content}.bar-nav__tab-list.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content}.bar-nav__tab.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);height:var(--ds-control-height);min-width:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);box-sizing:border-box;border:none;border-radius:var(--ds-control-radius);background-color:transparent;color:var(--_bar-nav-fg-secondary);cursor:pointer;position:relative;flex-shrink:0;-webkit-user-select:none;user-select:none;transition:color var(--effect-motion-short-2)}.bar-nav__tab.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--ds-control-radius);background:transparent;pointer-events:none}.bar-nav__tab.sc-ds-bar-nav:hover::after{background:var(--_bar-nav-hover)}.bar-nav__tab.sc-ds-bar-nav:active::after{background:var(--_bar-nav-pressed)}.bar-nav__tab--selected.sc-ds-bar-nav{color:var(--_bar-nav-fg-primary)}.bar-nav__tab-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--ds-control-label-inset);white-space:nowrap}.bar-nav__tab-label--dot.sc-ds-bar-nav{padding-right:calc(var(--ds-control-label-inset) + var(--ds-control-gap))}.bar-nav__tab-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none}.bar-nav__tab-divider.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--ds-control-height);padding-block:var(--ds-control-padding-inline);flex-shrink:0;pointer-events:none}.bar-nav__tab-divider-line.sc-ds-bar-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--_bar-nav-border)}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--ds-control-height);visibility:hidden;pointer-events:none}.bar-nav__overflow-trigger.sc-ds-bar-nav{margin-left:auto;--ds-button-unfilled-fg:var(--_bar-nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_bar-nav-fg-primary);--ds-interaction-hover:var(--_bar-nav-hover);--ds-interaction-pressed:var(--_bar-nav-pressed);--ds-focus-ring-color:var(--_bar-nav-focus)}ds-text.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--ds-control-height);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}`;const D=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsTabChange=i(this,"dsTabChange");this.navStyle="dashboard";this.tabs=[];this.tabsJson="";this.value="";this.basePath="";this.currentUrl="";this.moreTabsLabel="More tabs";this.resolvedTabs=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuTriggerActive=false;this.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.overflowRovingFocused=false;this.focusedTabId="";this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabListEl=null;this.probeTabListEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new c;this.panelToolsTransition=new c;this.overflowCoalescer=b((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const t=v(s);if(t==="panel-nav"){this.panelNavTransition.enter();return}if(t==="panel-tools"){const t=p(s)??"opening";if(t==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const t=v(s);if(t==="panel-nav"){this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleOverflowCheck()}return}if(t==="panel-tools"){this.panelToolsTransition.exit();this.scheduleOverflowCheck()}};this.handleOverflowFocus=()=>{this.overflowRovingFocused=true};this.handleOverflowBlur=()=>{this.overflowRovingFocused=false}}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get renderedSelectableTabs(){const s=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return o(s)}get hasOverflowTabs(){return this.tabLayoutCommitted&&this.tabsCollapsed&&this.overflowTabs.length>0}syncFocusedTabId(s,t){if(t.some((t=>t.id===s&&!t.isInactive))){this.focusedTabId=s;return}const i=t.find((s=>!s.isInactive));this.focusedTabId=i?.id??""}digestTabsConfig(s){return s.map((s=>r(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuTriggerActive=false;this.menuInitialFocusVisible=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.visibleTabs=[];this.overflowTabs=[]}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncFocusedTabId(this.effectiveValue,this.renderedSelectableTabs);this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,t){if(!s){this.menuOpen=false;this.menuTriggerActive=false;this.menuInitialFocusVisible=false;this.menuEl=null}this.scheduleOverflowCheck();if(s){requestAnimationFrame((()=>{this.scheduleOverflowCheck()}))}if(s||t===undefined||t===s)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps();this.syncFocusedTabId(this.effectiveValue,o(this.resolvedTabs))}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeOverflowPaused()){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor()}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.overflowCoalescer.cancel();this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const s=this.el.closest("ds-app-shell");if(!s)return;this.chromeTransitionShell=s;s.addEventListener(f,this.onChromeTransitionStart);s.addEventListener(u,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(f,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(u,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(d(this.resolvedTabs,this.tabs,this.tabsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let t=s.HOST_PROP_SYNC_BUDGET;const i=()=>{this.syncHostPropsIfNeeded();if(--t>0){requestAnimationFrame(i)}};queueMicrotask(i)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeOverflowPaused())return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeOverflowPaused())return;this.overflowCoalescer.schedule()}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);const t=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);return Math.max(0,this.headerEl.clientWidth-t)}getTabsIntrinsicWidth(){return this.probeTabListEl?.scrollWidth??0}getHeaderGap(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);return parseFloat(s.columnGap||s.gap)||0}getOverflowTriggerReserveWidth(){if(!this.triggerEl){return 40}return this.triggerEl.getBoundingClientRect().width+this.getHeaderGap()}getProbeTabMetrics(){const s=this.probeTabListEl;if(!s)return null;const t=Array.from(s.children);const i=t.map((s=>s.getBoundingClientRect().width));if(i.length===0||i.some((s=>s===0)))return null;const e=getComputedStyle(s);const n=parseFloat(e.columnGap||e.gap)||0;const a=i.reduce(((s,t)=>s+t),0);const r=n*Math.max(0,i.length-1);const o=Math.max(0,s.scrollWidth-a-r);return{itemWidths:i,itemGap:n,listExtraWidth:o}}setOverflowTabLayout(s,t){const i=t.length>0;const e=this.digestTabsConfig(s)!==this.digestTabsConfig(this.visibleTabs);const n=this.digestTabsConfig(t)!==this.digestTabsConfig(this.overflowTabs);if(e){this.visibleTabs=s}if(n){this.overflowTabs=t}if(i!==this.tabsCollapsed){this.tabsCollapsed=i;if(!i){this.menuOpen=false;this.menuTriggerActive=false}}this.syncFocusedTabId(this.effectiveValue,o(i?s:this.resolvedTabs))}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}forceTabLayoutCommit(s){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.setOverflowTabLayout(s?[]:this.resolvedTabs,s?this.resolvedTabs:[]);this.tabLayoutCommitted=true}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.setOverflowTabLayout([],[])}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabLayoutCommitted=true;return}const t=this.getProbeTabMetrics();const i=this.getTabsIntrinsicWidth();if(!t||i===0){this.tabLayoutPendingFrames+=1;if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX){this.forceTabLayoutCommit(false)}else if(this.tabLayoutPendingFrames>=s.TAB_LAYOUT_COMMIT_MAX_FRAMES){this.forceTabLayoutCommit(false)}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;const e=M(i,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!e){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const n=O(t.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),t.itemGap,t.listExtraWidth);const a=F(this.resolvedTabs.slice(0,n));const r=this.resolvedTabs.slice(a.length);this.setOverflowTabLayout(a,r);this.tabLayoutCommitted=true}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.hasOverflowTabs)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(s){const t=s.detail;if(t?.value!==undefined){this.selectTab(String(t.value))}this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuClose(){this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuAfterClose(){if(!this.menuOpen)this.menuTriggerActive=false}incomingTabs(){return this.tabsJson?h(this.tabsJson,[]):this.tabs??[]}applyHostProps(){const s=this.basePath;const t=s!==""&&this.committedSection!==""&&s!==this.committedSection;if(t){this.urlDerivedValue="";this.committedSection="";this.pendingSection=s;this.resolvedTabs=[];this.resetTabOverflowLayout();return}if(this.pendingSection){if(!s||s!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const t=this.incomingTabs();if(t.length===0){return}this.pendingSection=""}const i=this.incomingTabs();const e=this.digestTabsConfig(i)!==this.digestTabsConfig(this.resolvedTabs);this.resolvedTabs=i;this.syncValueFromUrl();this.committedSection=s;if(e){this.resetTabOverflowLayout()}this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=S(this.overflowTabs,this.effectiveValue)}syncValueFromUrl(){const s=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:t,hideTabs:i}=l(this.currentUrl,this.basePath,s);this.urlDerivedValue=t;this.hideTabsForDetailRoute=i}selectTab(s){this.value=s;this.dsTabChange.emit(s)}focusVisibleSelectedTab(){const s=this.visibleTabListEl?.querySelector(`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}focusVisibleTab(s){this.focusedTabId=s;const t=this.visibleTabListEl?.querySelector(`[data-tab-id="${s}"]`);t?.focus({preventScroll:true})}focusLastVisibleTab(){const s=[...this.renderedSelectableTabs].reverse().find((s=>!s.isInactive));if(s)this.focusVisibleTab(s.id)}findEnabledVisibleTab(s,t){const i=this.renderedSelectableTabs;for(let e=s+t;e>=0&&e<i.length;e+=t){if(!i[e]?.isInactive)return e}return null}handleTabKeyDown(s){const t=this.renderedSelectableTabs;if(!t.length)return;const i=s.target?.getAttribute("data-tab-id");const e=i??this.focusedTabId;if(s.key==="Enter"||s.key===" "){const i=t.find((s=>s.id===e));if(!i||i.isInactive)return;s.preventDefault();this.selectTab(i.id);return}const n=t.findIndex((s=>s.id===e));if(n<0)return;let a;if(s.key==="ArrowRight"){a=this.findEnabledVisibleTab(n,1);if(a===null&&this.hasOverflowTabs){s.preventDefault();this.overflowRovingFocused=true;void this.triggerEl?.setFocus?.();return}}else if(s.key==="ArrowLeft"){a=this.findEnabledVisibleTab(n,-1)}else if(s.key==="Home"){a=t.findIndex((s=>!s.isInactive))}else if(s.key==="End"){const s=[...t].reverse().findIndex((s=>!s.isInactive));a=s<0?null:t.length-1-s}else{return}if(a===null||a<0||a===n)return;s.preventDefault();this.focusVisibleTab(t[a].id)}toggleTabMenu(s){if(this.menuOpen){this.menuOpen=false;this.menuInitialFocusVisible=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth="";this.syncMenuSections()}this.menuInitialFocusVisible=s?.focusVisible??false;this.menuTriggerActive=true;this.menuOpen=true}handleTriggerKeyDown(s){if(!this.hasOverflowTabs)return;if(!this.menuOpen){if(s.key==="ArrowLeft"){s.preventDefault();this.overflowRovingFocused=false;this.focusLastVisibleTab();return}if(s.key==="Enter"||s.key===" "){s.preventDefault();this.toggleTabMenu({focusVisible:true})}return}if(s.key==="Escape"){s.preventDefault();this.menuOpen=false;this.menuInitialFocusVisible=false;void this.triggerEl?.setFocus?.()}}renderTabList(s,t){return e("div",{role:"tablist",class:"bar-nav__tab-list","aria-label":this.heading,ref:s=>{if(t){const t=s??null;if(t===this.probeTabListEl)return;this.probeTabListEl=t;if(t){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.scheduleOverflowCheck()}}else{this.visibleTabListEl=s??null}},onKeyDown:t?undefined:s=>this.handleTabKeyDown(s),onFocusin:t?undefined:()=>{this.overflowRovingFocused=false}},s.map(((s,i)=>{if(r(s)){return e("div",{class:"bar-nav__tab-divider",key:`divider-${i}`,"aria-hidden":"true"},e("div",{class:"bar-nav__tab-divider-line"}))}const n=s.id===this.effectiveValue;return e("button",{key:s.id,type:"button",role:"tab","data-tab-id":s.id,class:{"bar-nav__tab":true,"bar-nav__tab--selected":n,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-control-inactive":!!s.isInactive},"aria-selected":n?"true":"false","aria-disabled":s.isInactive?"true":undefined,"aria-controls":s.panelId??undefined,disabled:s.isInactive,tabIndex:!t&&!this.overflowRovingFocused&&s.id===this.focusedTabId?0:-1,onClick:()=>!t&&!s.isInactive&&this.selectTab(s.id),onFocus:()=>{if(!t)this.focusedTabId=s.id}},e("span",{class:{"bar-nav__tab-label":true,"bar-nav__tab-label--dot":!!s.dot}},e("ds-text",{as:"span",variant:"text-body-medium",emphasis:n,color:"inherit"},s.label),s.dot&&e("ds-badge",{class:"bar-nav__tab-dot",variant:"dot",hasRing:false,label:"","aria-hidden":"true"})))})))}render(){const s=this.basePath===""||this.committedSection===this.basePath;const t=s&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const i=this.basePath||"no-section";const a=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return e(n,{key:"f6cc55291daf42d207a61b544191428ba9cfd465"},e("header",{key:"73ce916b382ae8aee414d55d50ffd77a754accf7",class:{"bar-nav":true,"ds-control--md":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":t&&this.hasOverflowTabs},ref:s=>{this.headerEl=s;if(s&&!this.resizeObserver){this.setupOverflowObserver()}}},t&&e("div",{key:"e22021e8f3206813a102899ab20398048c49c7d5",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},e("div",{key:`probe-${i}`},this.renderTabList(this.resolvedTabs,true))),t&&this.tabLayoutCommitted&&a.length>0&&e("div",{key:"d4bcd3e2b7cdcb65b050859cc94ab8ea3cc4389a",class:"bar-nav__left"},e("div",{key:`visible-${i}`,class:"bar-nav__tabs-visible"},this.renderTabList(a,false))),t&&!this.tabLayoutCommitted&&e("div",{key:"df0609dea70aba3aa3c90e57daa60016700eedf4",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&e("ds-text",{key:"590973cfad8d2a8a56589e7d816f8d2816ef5436",class:"bar-nav__heading",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",wrap:"nowrap"},this.heading),t&&this.hasOverflowTabs&&e("ds-button-unfilled",{key:"6df531b5f6edd58992a50655e34532675f6149f9",variant:"icon",class:{"bar-nav__overflow-trigger":true},icon:"Ellipses",activeFill:false,hasBorder:false,focusTabIndex:this.overflowRovingFocused?0:-1,ref:s=>{this.triggerEl=s??null},haspopup:"menu",expanded:this.menuTriggerActive,"aria-label":this.moreTabsLabel,onDsClick:()=>this.toggleTabMenu({focusVisible:false}),onFocusin:this.handleOverflowFocus,onFocusout:this.handleOverflowBlur,onKeyDown:s=>this.handleTriggerKeyDown(s)})),t&&this.hasOverflowTabs&&e("ds-menu",{key:"c42b33e2ba957d668c274712eedd03a2d7e373e1",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:S(this.overflowTabs,this.effectiveValue),side:"bottom",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",initialFocusVisible:this.menuInitialFocusVisible,onDsSelect:s=>this.handleMenuSelect(s),onDsClose:()=>this.handleMenuClose(),onDsAfterClose:()=>this.handleMenuAfterClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return P()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],moreTabsLabel:[1,"more-tabs-label"],resolvedTabs:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],menuTriggerActive:[32],tabLayoutCommitted:[32],visibleTabs:[32],overflowTabs:[32],menuInitialFocusVisible:[32],overflowRovingFocused:[32],focusedTabId:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);D.HOST_PROP_SYNC_BUDGET=8;D.INTRINSIC_WIDTH_RETRY_MAX=3;D.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;D.OVERFLOW_HYSTERESIS_PX=8;function H(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-text"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(a(s))){customElements.define(a(s),D)}break;case"ds-badge":if(!customElements.get(a(s))){g()}break;case"ds-button-unfilled":if(!customElements.get(a(s))){m()}break;case"ds-icon":if(!customElements.get(a(s))){_()}break;case"ds-loader":if(!customElements.get(a(s))){y()}break;case"ds-menu":if(!customElements.get(a(s))){w()}break;case"ds-swatch-picker":if(!customElements.get(a(s))){k()}break;case"ds-switch":if(!customElements.get(a(s))){C()}break;case"ds-text":if(!customElements.get(a(s))){x()}break}}))}H();const L=D;const A=H;export{L as DsBarNav,A as defineCustomElement};
|
|
1
|
+
import{p as s,H as t,c as i,h as e,a as n,t as r}from"./index.js";import{i as a,g as o}from"./p-BQq26pt9.js";import{s as d,p as h,d as l}from"./p-BOQnc-M4.js";import{C as c,c as b,a as f,b as u,r as v,d as p}from"./p-BKhG2xrW.js";import{d as g}from"./p-DrDHC7V6.js";import{d as m}from"./p-CKnoWZd9.js";import{d as _}from"./p-DuNZGFkV.js";import{d as y}from"./p-Cpr3K41-.js";import{d as w}from"./p-DhsO0939.js";import{d as k}from"./p-P_4vE1ub.js";import{d as C}from"./p-CLn7QnE0.js";import{d as x}from"./p-CZZYGqKz.js";function T(s,t){const i=[];let e=[];for(const n of s){if(a(n)){if(e.length>0){i.push({items:e});e=[]}continue}e.push({label:n.label,value:n.id,dot:n.dot,isSelected:n.id===t,isInactive:n.isInactive})}if(e.length>0){i.push({items:e})}return i}function S(s,t){return T(M(s),t)}function E(s,t,i,e=2){const n=s-t;if(i){return n>-e}return n>e}function F(s,t,i,e,n){if(s.length===0||t<=0)return 0;const r=O(s,s.length,e,n);if(r<=t)return s.length;const a=Math.max(0,t-i);let o=0;for(let t=1;t<=s.length;t++){const i=O(s,t,e,n);if(i>a)break;o=t}return o}function D(s){let t=s.length;while(t>0&&a(s[t-1])){t-=1}return s.slice(0,t)}function M(s){let t=0;while(t<s.length&&a(s[t])){t+=1}return s.slice(t)}function O(s,t,i,e){if(t<=0)return 0;const n=s.slice(0,t).reduce(((s,t)=>s+t),0);return e+n+i*Math.max(0,t-1)}const P=()=>`.ds-control--md.sc-ds-bar-nav-h,.ds-control--md.sc-ds-bar-nav{--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-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-bar-nav-h,.ds-control--sm.sc-ds-bar-nav{--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-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-bar-nav-h,.ds-control--xs.sc-ds-bar-nav{--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-radius:var(--dimension-radius-025)}.sc-ds-bar-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring.sc-ds-bar-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-bar-nav-h,.ds-control-inactive.sc-ds-bar-nav{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3);isolation:isolate;--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}ds-app-shell.sc-ds-bar-nav-h:not([gradient-preset='none']) .bar-nav.sc-ds-bar-nav,ds-app-shell:not([gradient-preset='none']) .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:var(--dimension-space-100);align-items:center}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__tabs-visible.sc-ds-bar-nav{flex:1;min-width:0;width:100%}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav>div.sc-ds-bar-nav{width:max-content}.bar-nav__tab-list.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content}.bar-nav__tab.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);height:var(--ds-control-height);min-width:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);box-sizing:border-box;border:none;border-radius:var(--ds-control-radius);background-color:transparent;color:var(--_bar-nav-fg-secondary);cursor:pointer;position:relative;flex-shrink:0;-webkit-user-select:none;user-select:none;transition:color var(--effect-motion-short-2)}.bar-nav__tab.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--ds-control-radius);background:transparent;pointer-events:none}.bar-nav__tab.sc-ds-bar-nav:hover::after{background:var(--_bar-nav-hover)}.bar-nav__tab.sc-ds-bar-nav:active::after{background:var(--_bar-nav-pressed)}.bar-nav__tab--selected.sc-ds-bar-nav{color:var(--_bar-nav-fg-primary)}.bar-nav__tab-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--ds-control-label-inset);white-space:nowrap}.bar-nav__tab-label--dot.sc-ds-bar-nav{padding-right:calc(var(--ds-control-label-inset) + var(--ds-control-gap))}.bar-nav__tab-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none}.bar-nav__tab-divider.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--ds-control-height);padding-block:var(--ds-control-padding-inline);flex-shrink:0;pointer-events:none}.bar-nav__tab-divider-line.sc-ds-bar-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--_bar-nav-border)}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--ds-control-height);visibility:hidden;pointer-events:none}.bar-nav__overflow-trigger.sc-ds-bar-nav{margin-left:auto;--ds-button-unfilled-fg:var(--_bar-nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_bar-nav-fg-primary);--ds-interaction-hover:var(--_bar-nav-hover);--ds-interaction-pressed:var(--_bar-nav-pressed);--ds-focus-ring-color:var(--_bar-nav-focus)}ds-text.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--ds-control-height);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}`;const j=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsTabChange=i(this,"dsTabChange");this.navStyle="dashboard";this.tabs=[];this.tabsJson="";this.value="";this.basePath="";this.currentUrl="";this.moreTabsLabel="More tabs";this.resolvedTabs=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuTriggerActive=false;this.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.overflowRovingFocused=false;this.focusedTabId="";this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabListEl=null;this.probeTabListEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new c;this.panelToolsTransition=new c;this.overflowCoalescer=b((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const t=v(s);if(t==="panel-nav"){this.panelNavTransition.enter();return}if(t==="panel-tools"){const t=p(s)??"opening";if(t==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const t=v(s);if(t==="panel-nav"){this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleOverflowCheck()}return}if(t==="panel-tools"){this.panelToolsTransition.exit();this.scheduleOverflowCheck()}};this.handleOverflowFocus=()=>{this.overflowRovingFocused=true};this.handleOverflowBlur=()=>{this.overflowRovingFocused=false}}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get renderedSelectableTabs(){const s=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return o(s)}get hasOverflowTabs(){return this.tabLayoutCommitted&&this.tabsCollapsed&&this.overflowTabs.length>0}syncFocusedTabId(s,t){if(t.some((t=>t.id===s&&!t.isInactive))){this.focusedTabId=s;return}const i=t.find((s=>!s.isInactive));this.focusedTabId=i?.id??""}digestTabsConfig(s){return s.map((s=>a(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuTriggerActive=false;this.menuInitialFocusVisible=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.visibleTabs=[];this.overflowTabs=[]}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncFocusedTabId(this.effectiveValue,this.renderedSelectableTabs);this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,t){if(!s){this.menuOpen=false;this.menuTriggerActive=false;this.menuInitialFocusVisible=false;this.menuEl=null}this.scheduleOverflowCheck();if(s){requestAnimationFrame((()=>{this.scheduleOverflowCheck()}))}if(s||t===undefined||t===s)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps();this.syncFocusedTabId(this.effectiveValue,o(this.resolvedTabs))}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeOverflowPaused()){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor()}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.overflowCoalescer.cancel();this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const s=this.el.closest("ds-app-shell");if(!s)return;this.chromeTransitionShell=s;s.addEventListener(f,this.onChromeTransitionStart);s.addEventListener(u,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(f,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(u,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(d(this.resolvedTabs,this.tabs,this.tabsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let t=s.HOST_PROP_SYNC_BUDGET;const i=()=>{this.syncHostPropsIfNeeded();if(--t>0){requestAnimationFrame(i)}};queueMicrotask(i)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeOverflowPaused())return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeOverflowPaused())return;this.overflowCoalescer.schedule()}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);const t=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);return Math.max(0,this.headerEl.clientWidth-t)}getTabsIntrinsicWidth(){return this.probeTabListEl?.scrollWidth??0}getHeaderGap(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);return parseFloat(s.columnGap||s.gap)||0}getOverflowTriggerReserveWidth(){if(!this.triggerEl){return 40}return this.triggerEl.getBoundingClientRect().width+this.getHeaderGap()}getProbeTabMetrics(){const s=this.probeTabListEl;if(!s)return null;const t=Array.from(s.children);const i=t.map((s=>s.getBoundingClientRect().width));if(i.length===0||i.some((s=>s===0)))return null;const e=getComputedStyle(s);const n=parseFloat(e.columnGap||e.gap)||0;const r=i.reduce(((s,t)=>s+t),0);const a=n*Math.max(0,i.length-1);const o=Math.max(0,s.scrollWidth-r-a);return{itemWidths:i,itemGap:n,listExtraWidth:o}}setOverflowTabLayout(s,t){const i=t.length>0;const e=this.digestTabsConfig(s)!==this.digestTabsConfig(this.visibleTabs);const n=this.digestTabsConfig(t)!==this.digestTabsConfig(this.overflowTabs);if(e){this.visibleTabs=s}if(n){this.overflowTabs=t}if(i!==this.tabsCollapsed){this.tabsCollapsed=i;if(!i){this.menuOpen=false;this.menuTriggerActive=false}}this.syncFocusedTabId(this.effectiveValue,o(i?s:this.resolvedTabs))}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}forceTabLayoutCommit(s){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.setOverflowTabLayout(s?[]:this.resolvedTabs,s?this.resolvedTabs:[]);this.tabLayoutCommitted=true}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.setOverflowTabLayout([],[])}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabLayoutCommitted=true;return}const t=this.getProbeTabMetrics();const i=this.getTabsIntrinsicWidth();if(!t||i===0){this.tabLayoutPendingFrames+=1;if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX){this.forceTabLayoutCommit(false)}else if(this.tabLayoutPendingFrames>=s.TAB_LAYOUT_COMMIT_MAX_FRAMES){this.forceTabLayoutCommit(false)}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;const e=E(i,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!e){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const n=F(t.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),t.itemGap,t.listExtraWidth);const r=D(this.resolvedTabs.slice(0,n));const a=this.resolvedTabs.slice(r.length);this.setOverflowTabLayout(r,a);this.tabLayoutCommitted=true}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.hasOverflowTabs)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(s){const t=s.detail;if(t?.value!==undefined){this.selectTab(String(t.value))}this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuClose(){this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuAfterClose(){if(!this.menuOpen)this.menuTriggerActive=false}incomingTabs(){return this.tabsJson?h(this.tabsJson,[]):this.tabs??[]}applyHostProps(){const s=this.basePath;const t=s!==""&&this.committedSection!==""&&s!==this.committedSection;if(t){this.urlDerivedValue="";this.committedSection="";this.pendingSection=s;this.resolvedTabs=[];this.resetTabOverflowLayout();return}if(this.pendingSection){if(!s||s!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const t=this.incomingTabs();if(t.length===0){return}this.pendingSection=""}const i=this.incomingTabs();const e=this.digestTabsConfig(i)!==this.digestTabsConfig(this.resolvedTabs);this.resolvedTabs=i;this.syncValueFromUrl();this.committedSection=s;if(e){this.resetTabOverflowLayout()}this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=S(this.overflowTabs,this.effectiveValue)}syncValueFromUrl(){const s=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:t,hideTabs:i}=l(this.currentUrl,this.basePath,s);this.urlDerivedValue=t;this.hideTabsForDetailRoute=i}selectTab(s){this.value=s;this.dsTabChange.emit(s)}focusVisibleSelectedTab(){const s=this.visibleTabListEl?.querySelector(`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}focusVisibleTab(s){this.focusedTabId=s;const t=this.visibleTabListEl?.querySelector(`[data-tab-id="${s}"]`);t?.focus({preventScroll:true})}focusLastVisibleTab(){const s=[...this.renderedSelectableTabs].reverse().find((s=>!s.isInactive));if(s)this.focusVisibleTab(s.id)}findEnabledVisibleTab(s,t){const i=this.renderedSelectableTabs;for(let e=s+t;e>=0&&e<i.length;e+=t){if(!i[e]?.isInactive)return e}return null}handleTabKeyDown(s){const t=this.renderedSelectableTabs;if(!t.length)return;const i=s.target?.getAttribute("data-tab-id");const e=i??this.focusedTabId;if(s.key==="Enter"||s.key===" "){const i=t.find((s=>s.id===e));if(!i||i.isInactive)return;s.preventDefault();this.selectTab(i.id);return}const n=t.findIndex((s=>s.id===e));if(n<0)return;let r;if(s.key==="ArrowRight"){r=this.findEnabledVisibleTab(n,1);if(r===null&&this.hasOverflowTabs){s.preventDefault();this.overflowRovingFocused=true;void this.triggerEl?.setFocus?.();return}}else if(s.key==="ArrowLeft"){r=this.findEnabledVisibleTab(n,-1)}else if(s.key==="Home"){r=t.findIndex((s=>!s.isInactive))}else if(s.key==="End"){const s=[...t].reverse().findIndex((s=>!s.isInactive));r=s<0?null:t.length-1-s}else{return}if(r===null||r<0||r===n)return;s.preventDefault();this.focusVisibleTab(t[r].id)}toggleTabMenu(s){if(this.menuOpen){this.menuOpen=false;this.menuInitialFocusVisible=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth="";this.syncMenuSections()}this.menuInitialFocusVisible=s?.focusVisible??false;this.menuTriggerActive=true;this.menuOpen=true}handleTriggerKeyDown(s){if(!this.hasOverflowTabs)return;if(!this.menuOpen){if(s.key==="ArrowLeft"){s.preventDefault();this.overflowRovingFocused=false;this.focusLastVisibleTab();return}if(s.key==="Enter"||s.key===" "){s.preventDefault();this.toggleTabMenu({focusVisible:true})}return}if(s.key==="Escape"){s.preventDefault();this.menuOpen=false;this.menuInitialFocusVisible=false;void this.triggerEl?.setFocus?.()}}renderTabList(s,t){return e("div",{role:"tablist",class:"bar-nav__tab-list","aria-label":this.heading,ref:s=>{if(t){const t=s??null;if(t===this.probeTabListEl)return;this.probeTabListEl=t;if(t){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.scheduleOverflowCheck()}}else{this.visibleTabListEl=s??null}},onKeyDown:t?undefined:s=>this.handleTabKeyDown(s),onFocusin:t?undefined:()=>{this.overflowRovingFocused=false}},s.map(((s,i)=>{if(a(s)){return e("div",{class:"bar-nav__tab-divider",key:`divider-${i}`,"aria-hidden":"true"},e("div",{class:"bar-nav__tab-divider-line"}))}const n=s.id===this.effectiveValue;return e("button",{key:s.id,type:"button",role:"tab","data-tab-id":s.id,class:{"bar-nav__tab":true,"bar-nav__tab--selected":n,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-control-inactive":!!s.isInactive},"aria-selected":n?"true":"false","aria-disabled":s.isInactive?"true":undefined,"aria-controls":s.panelId??undefined,disabled:s.isInactive,tabIndex:!t&&!this.overflowRovingFocused&&s.id===this.focusedTabId?0:-1,onClick:()=>!t&&!s.isInactive&&this.selectTab(s.id),onFocus:()=>{if(!t)this.focusedTabId=s.id}},e("span",{class:{"bar-nav__tab-label":true,"bar-nav__tab-label--dot":!!s.dot}},e("ds-text",{as:"span",variant:"text-body-medium",emphasis:n,color:"inherit"},s.label),s.dot&&e("ds-badge",{class:"bar-nav__tab-dot",variant:"dot",hasRing:false,label:"","aria-hidden":"true"})))})))}render(){const s=this.basePath===""||this.committedSection===this.basePath;const t=s&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const i=this.basePath||"no-section";const r=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return e(n,{key:"052e9fd3cef4617d483276c4cd2f7257ab3b3c95"},e("header",{key:"72221eeb7e14a2790e3cbb9d632aeec5cb4b025b",class:{"bar-nav":true,"ds-control--md":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":t&&this.hasOverflowTabs},ref:s=>{this.headerEl=s;if(s&&!this.resizeObserver){this.setupOverflowObserver()}}},t&&e("div",{key:"2b708cff0d0c79ec27993517b7dc899f466c5dff",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},e("div",{key:`probe-${i}`},this.renderTabList(this.resolvedTabs,true))),t&&this.tabLayoutCommitted&&r.length>0&&e("div",{key:"c5234c826491086b49e4e6ea9e2b4570bb238c82",class:"bar-nav__left"},e("div",{key:`visible-${i}`,class:"bar-nav__tabs-visible"},this.renderTabList(r,false))),t&&!this.tabLayoutCommitted&&e("div",{key:"b42899f2e5d5e5b8158f3a25453115da563557f4",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&e("ds-text",{key:"2ad1788497cdbff6d10b5d119d43b2a752961655",class:"bar-nav__heading",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",wrap:"nowrap"},this.heading),t&&this.hasOverflowTabs&&e("ds-button-unfilled",{key:"61e45189a9d80860c49fd97cbf2bba70eae7038c",variant:"icon",class:{"bar-nav__overflow-trigger":true},icon:"Ellipses",activeFill:false,hasBorder:false,focusTabIndex:this.overflowRovingFocused?0:-1,ref:s=>{this.triggerEl=s??null},haspopup:"menu",expanded:this.menuTriggerActive,"aria-label":this.moreTabsLabel,onDsClick:()=>this.toggleTabMenu({focusVisible:false}),onFocusin:this.handleOverflowFocus,onFocusout:this.handleOverflowBlur,onKeyDown:s=>this.handleTriggerKeyDown(s)})),t&&this.hasOverflowTabs&&e("ds-menu",{key:"f8527fc2f5d5844817ba4e443e26ee36aa8e4ed8",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:S(this.overflowTabs,this.effectiveValue),side:"bottom",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",initialFocusVisible:this.menuInitialFocusVisible,onDsSelect:s=>this.handleMenuSelect(s),onDsClose:()=>this.handleMenuClose(),onDsAfterClose:()=>this.handleMenuAfterClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return P()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],moreTabsLabel:[1,"more-tabs-label"],resolvedTabs:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],menuTriggerActive:[32],tabLayoutCommitted:[32],visibleTabs:[32],overflowTabs:[32],menuInitialFocusVisible:[32],overflowRovingFocused:[32],focusedTabId:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);j.HOST_PROP_SYNC_BUDGET=8;j.INTRINSIC_WIDTH_RETRY_MAX=3;j.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;j.OVERFLOW_HYSTERESIS_PX=8;function H(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-text"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(r(s))){customElements.define(r(s),j)}break;case"ds-badge":if(!customElements.get(r(s))){g()}break;case"ds-button-unfilled":if(!customElements.get(r(s))){m()}break;case"ds-icon":if(!customElements.get(r(s))){_()}break;case"ds-loader":if(!customElements.get(r(s))){y()}break;case"ds-menu":if(!customElements.get(r(s))){w()}break;case"ds-swatch-picker":if(!customElements.get(r(s))){k()}break;case"ds-switch":if(!customElements.get(r(s))){C()}break;case"ds-text":if(!customElements.get(r(s))){x()}break}}))}H();const L=j;const V=H;export{L as DsBarNav,V as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-bar-nav.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{B as
|
|
1
|
+
import{B as s,d as o}from"./p-DsbhBb5F.js";const t=s;const p=o;export{t as DsButtonFilled,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-button-filled.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{B as
|
|
1
|
+
import{B as o,d as s}from"./p-CKnoWZd9.js";const t=o;const n=s;export{t as DsButtonUnfilled,n as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-button-unfilled.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as e,c as a,h as s,a as d,t as i}from"./index.js";import{d as n}from"./p-
|
|
1
|
+
import{p as t,H as e,c as a,h as s,a as d,t as i}from"./index.js";import{d as n}from"./p-DrDHC7V6.js";import{d as o}from"./p-CKnoWZd9.js";import{d as c}from"./p-0kEg-Z4f.js";import{d as r}from"./p-DuNZGFkV.js";import{d as l}from"./p-Cpr3K41-.js";import{d as h}from"./p-CZZYGqKz.js";const f=()=>`.sc-ds-card-data-viz-donut-h{display:contents}.card-data-viz-donut__layout.sc-ds-card-data-viz-donut{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%;gap:var(--dimension-space-200);box-sizing:border-box}.card-data-viz-donut__chart-region.sc-ds-card-data-viz-donut{flex:1 1 auto;min-height:0;display:grid;padding:var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);box-sizing:border-box}.card-data-viz-donut__chart-region.sc-ds-card-data-viz-donut>*.sc-ds-card-data-viz-donut{width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%}.card-data-viz-donut__legend-region.sc-ds-card-data-viz-donut{flex:0 0 auto;padding:0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);box-sizing:border-box}`;const m=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.dsFilterClick=a(this,"dsFilterClick");this.cardWidth="md";this.filterLabel="Filter";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleChartHover=t=>{const e=this.el.querySelector('[slot="legend"]');if(!e||!("activeLabel"in e))return;e.activeLabel=t.detail?.label??null};this.handleLegendHover=t=>{const e=this.el.querySelector('[slot="chart"]');if(!e||!("activeLabel"in e))return;e.activeLabel=t.detail?.label??null};this.handleFilterClick=()=>{this.dsFilterClick.emit()}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector('[slot="chart"]');this.hasLegendSlot=!!this.el.querySelector('[slot="legend"]')}componentDidLoad(){this.el.addEventListener("dsSliceHover",this.handleChartHover);this.el.addEventListener("dsItemHover",this.handleLegendHover)}disconnectedCallback(){this.el.removeEventListener("dsSliceHover",this.handleChartHover);this.el.removeEventListener("dsItemHover",this.handleLegendHover)}render(){return s(d,{key:"9eb8ff2bed0187580795e1e27ed0efcb5ecbf1ea",class:"card-data-viz-donut"},s("ds-card-shell-data-viz",{key:"ea3040f6ba01d34085e5b33ae25f2865f3e8e36f",heading:this.heading,cardWidth:this.cardWidth},s("ds-button-unfilled",{key:"952fa704a3cad799d9b5592a4be975d90bf7cfb9",slot:"actions",variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}),s("div",{key:"3ea9fdfa2f0b87f1a8cdf410908774bb5c9be617",class:"card-data-viz-donut__layout"},this.hasChartSlot&&s("div",{key:"491fbf78d08f696024bea3f8afe1ab562d1a1076",class:"card-data-viz-donut__chart-region"},s("slot",{key:"0139e24fe90e676f3190e724595223d31771186e",name:"chart"})),this.hasLegendSlot&&s("div",{key:"8c1ea3babd564464415d692f9f153a200b7cd9a6",class:"card-data-viz-donut__legend-region"},s("slot",{key:"9a0d1677ff77309b41774fdee510cdc0e993a958",name:"legend"})))))}get el(){return this}static get style(){return f()}},[262,"ds-card-data-viz-donut",{heading:[1],cardWidth:[1,"card-width"],filterLabel:[1,"filter-label"],hasChartSlot:[32],hasLegendSlot:[32]}]);function u(){if(typeof customElements==="undefined"){return}const t=["ds-card-data-viz-donut","ds-badge","ds-button-unfilled","ds-card-shell-data-viz","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-card-data-viz-donut":if(!customElements.get(i(t))){customElements.define(i(t),m)}break;case"ds-badge":if(!customElements.get(i(t))){n()}break;case"ds-button-unfilled":if(!customElements.get(i(t))){o()}break;case"ds-card-shell-data-viz":if(!customElements.get(i(t))){c()}break;case"ds-icon":if(!customElements.get(i(t))){r()}break;case"ds-loader":if(!customElements.get(i(t))){l()}break;case"ds-text":if(!customElements.get(i(t))){h()}break}}))}u();const b=m;const v=u;export{b as DsCardDataVizDonut,v as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-card-data-viz-donut.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["cardDataVizDonutCss","CardDataVizDonut","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","filterLabel","hasChartSlot","hasLegendSlot","handleChartHover","e","legend","el","querySelector","activeLabel","detail","label","handleLegendHover","chart","handleFilterClick","dsFilterClick","emit","componentWillRender","componentDidLoad","addEventListener","disconnectedCallback","removeEventListener","render","h","Host","key","class","heading","slot","variant","type","icon","onDsClick","name"],"sources":["src/wc/components/CardDataVizDonut/CardDataVizDonut.css?tag=ds-card-data-viz-donut&encapsulation=scoped","src/wc/components/CardDataVizDonut/CardDataVizDonut.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n.card-data-viz-donut__layout {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-height: 0;\n height: 100%;\n gap: var(--dimension-space-200);\n box-sizing: border-box;\n}\n\n/*\n * Chart region fills leftover space; legend stays content-sized.\n * Padding is per-region so the body gap isn't doubled at the shared edge.\n */\n.card-data-viz-donut__chart-region {\n flex: 1 1 auto;\n min-height: 0;\n /* Stretch the slotted donut to the full region; the donut centers its own SVG. */\n display: grid;\n padding: var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);\n box-sizing: border-box;\n}\n\n/* Make the slotted donut stretch to the region so ResizeObserver can measure fill size. */\n.card-data-viz-donut__chart-region > * {\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n max-width: 100%;\n max-height: 100%;\n}\n\n.card-data-viz-donut__legend-region {\n flex: 0 0 auto;\n padding: 0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);\n box-sizing: border-box;\n}\n","import { Component, Element, Event, EventEmitter, State, h, Host, Prop } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizDonutWidth = CardShellDataVizWidth;\n\n/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */\ntype HoveredDatum = { label: string } | null;\n\n/** A slotted chart/legend that opts into hover sync by exposing an `activeLabel` prop. */\ntype SyncableSlot = HTMLElement & { activeLabel?: string | null };\n\n/**\n * Donut data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart region and\n * content-sized legend. Hover sync between chart and legend stays here.\n */\n@Component({\n tag: 'ds-card-data-viz-donut',\n styleUrl: 'CardDataVizDonut.css',\n scoped: true,\n})\nexport class CardDataVizDonut {\n @Element() el!: HTMLElement;\n\n /** Widget heading shown in the card header. */\n @Prop() heading!: string;\n\n /** Card width token — also sets matching min-height. */\n @Prop() cardWidth: CardDataVizDonutWidth = 'md';\n @Prop() filterLabel: string = 'Filter';\n\n /** Emits when the header filter control is activated. */\n @Event() dsFilterClick!: EventEmitter<void>;\n\n // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n // padded box plus a body gap next to nothing.\n @State() private hasChartSlot = false;\n @State() private hasLegendSlot = false;\n\n componentWillRender() {\n // Not `:scope >` — Stencil's scoped slot polyfill relocates slotted children into\n // region wrappers (and here into nested `ds-card`), so they may not stay direct\n // host children across renders.\n this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n }\n\n componentDidLoad() {\n // Sync the chart's and legend's `activeLabel` from each other's hover events, so any\n // ds-chart-donut + ds-chart-legend pair cross-highlights without every consumer having to\n // wire it up by hand. Delegated on the host (rather than bound to the specific slotted\n // elements) since Stencil events bubble and the slot content can be swapped at runtime.\n this.el.addEventListener('dsSliceHover', this.handleChartHover);\n this.el.addEventListener('dsItemHover', this.handleLegendHover);\n }\n\n disconnectedCallback() {\n this.el.removeEventListener('dsSliceHover', this.handleChartHover);\n this.el.removeEventListener('dsItemHover', this.handleLegendHover);\n }\n\n private handleChartHover = (e: Event) => {\n // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates\n // slotted children into an inner region wrapper on render, so they're no longer direct\n // children of the host by the time this fires.\n const legend = this.el.querySelector('[slot=\"legend\"]') as SyncableSlot | null;\n if (!legend || !('activeLabel' in legend)) return;\n legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n };\n\n private handleLegendHover = (e: Event) => {\n const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n if (!chart || !('activeLabel' in chart)) return;\n chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n };\n\n private handleFilterClick = () => {\n this.dsFilterClick.emit();\n };\n\n render() {\n return (\n <Host class=\"card-data-viz-donut\">\n <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n <ds-button-unfilled\n slot=\"actions\"\n variant=\"icon\"\n type=\"button\"\n icon=\"Filters\"\n aria-label={this.filterLabel}\n onDsClick={this.handleFilterClick}\n />\n <div class=\"card-data-viz-donut__layout\">\n {this.hasChartSlot && (\n <div class=\"card-data-viz-donut__chart-region\">\n <slot name=\"chart\" />\n </div>\n )}\n {this.hasLegendSlot && (\n <div class=\"card-data-viz-donut__legend-region\">\n <slot name=\"legend\" />\n </div>\n )}\n </div>\n </ds-card-shell-data-viz>\n </Host>\n );\n }\n}\n"],"mappings":"0RAAA,MAAMA,EAAsB,IAAM,kyB,MCoBrBC,EAAgBC,EAAA,MAAAD,UAAAE,EAL7B,WAAAC,CAAAC,G,uFAYUC,KAAAC,UAAmC,KACnCD,KAAAE,YAAsB,SAQbF,KAAAG,aAAe,MACfH,KAAAI,cAAgB,MAwBzBJ,KAAAK,iBAAoBC,IAI1B,MAAMC,EAASP,KAAKQ,GAAGC,cAAc,mBACrC,IAAKF,KAAY,gBAAiBA,GAAS,OAC3CA,EAAOG,YAAeJ,EAAgCK,QAAQC,OAAS,IAAI,EAGrEZ,KAAAa,kBAAqBP,IAC3B,MAAMQ,EAAQd,KAAKQ,GAAGC,cAAc,kBACpC,IAAKK,KAAW,gBAAiBA,GAAQ,OACzCA,EAAMJ,YAAeJ,EAAgCK,QAAQC,OAAS,IAAI,EAGpEZ,KAAAe,kBAAoB,KAC1Bf,KAAKgB,cAAcC,MAAM,CA+B5B,CArEC,mBAAAC,GAIElB,KAAKG,eAAiBH,KAAKQ,GAAGC,cAAc,kBAC5CT,KAAKI,gBAAkBJ,KAAKQ,GAAGC,cAAc,kB,CAG/C,gBAAAU,GAKEnB,KAAKQ,GAAGY,iBAAiB,eAAgBpB,KAAKK,kBAC9CL,KAAKQ,GAAGY,iBAAiB,cAAepB,KAAKa,kB,CAG/C,oBAAAQ,GACErB,KAAKQ,GAAGc,oBAAoB,eAAgBtB,KAAKK,kBACjDL,KAAKQ,GAAGc,oBAAoB,cAAetB,KAAKa,kB,CAsBlD,MAAAU,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,uBACVH,EAAA,0BAAAE,IAAA,2CAAwBE,QAAS5B,KAAK4B,QAAS3B,UAAWD,KAAKC,WAC7DuB,EAAA,sBAAAE,IAAA,2CACEG,KAAK,UACLC,QAAQ,OACRC,KAAK,SACLC,KAAK,UAAS,aACFhC,KAAKE,YACjB+B,UAAWjC,KAAKe,oBAElBS,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACR3B,KAAKG,cACJqB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qCACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,WAGdlC,KAAKI,eACJoB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sCACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,c","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["cardDataVizDonutCss","CardDataVizDonut","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","filterLabel","hasChartSlot","hasLegendSlot","handleChartHover","e","legend","el","querySelector","activeLabel","detail","label","handleLegendHover","chart","handleFilterClick","dsFilterClick","emit","componentWillRender","componentDidLoad","addEventListener","disconnectedCallback","removeEventListener","render","h","Host","key","class","heading","slot","variant","type","icon","onDsClick","name"],"sources":["src/wc/components/CardDataVizDonut/CardDataVizDonut.css?tag=ds-card-data-viz-donut&encapsulation=scoped","src/wc/components/CardDataVizDonut/CardDataVizDonut.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n.card-data-viz-donut__layout {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-height: 0;\n height: 100%;\n gap: var(--dimension-space-200);\n box-sizing: border-box;\n}\n\n/*\n * Chart region fills leftover space; legend stays content-sized.\n * Padding is per-region so the body gap isn't doubled at the shared edge.\n */\n.card-data-viz-donut__chart-region {\n flex: 1 1 auto;\n min-height: 0;\n /* Stretch the slotted donut to the full region; the donut centers its own SVG. */\n display: grid;\n padding: var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);\n box-sizing: border-box;\n}\n\n/* Make the slotted donut stretch to the region so ResizeObserver can measure fill size. */\n.card-data-viz-donut__chart-region > * {\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n max-width: 100%;\n max-height: 100%;\n}\n\n.card-data-viz-donut__legend-region {\n flex: 0 0 auto;\n padding: 0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);\n box-sizing: border-box;\n}\n","import { Component, Element, Event, EventEmitter, State, h, Host, Prop } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizDonutWidth = CardShellDataVizWidth;\n\n/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */\ntype HoveredDatum = { label: string } | null;\n\n/** A slotted chart/legend that opts into hover sync by exposing an `activeLabel` prop. */\ntype SyncableSlot = HTMLElement & { activeLabel?: string | null };\n\n/**\n * Donut data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart region and\n * content-sized legend. Hover sync between chart and legend stays here.\n */\n@Component({\n tag: 'ds-card-data-viz-donut',\n styleUrl: 'CardDataVizDonut.css',\n scoped: true,\n})\nexport class CardDataVizDonut {\n @Element() el!: HTMLElement;\n\n /** Widget heading shown in the card header. */\n @Prop() heading!: string;\n\n /** Card width token — also sets matching min-height. */\n @Prop() cardWidth: CardDataVizDonutWidth = 'md';\n @Prop() filterLabel: string = 'Filter';\n\n /** Emits when the header filter control is activated. */\n @Event() dsFilterClick!: EventEmitter<void>;\n\n // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n // padded box plus a body gap next to nothing.\n @State() private hasChartSlot = false;\n @State() private hasLegendSlot = false;\n\n componentWillRender() {\n // Not `:scope >` — Stencil's scoped slot polyfill relocates slotted children into\n // region wrappers (and here into nested `ds-card-shell-data-viz`), so they may not stay direct\n // host children across renders.\n this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n }\n\n componentDidLoad() {\n // Sync the chart's and legend's `activeLabel` from each other's hover events, so any\n // ds-chart-donut + ds-chart-legend pair cross-highlights without every consumer having to\n // wire it up by hand. Delegated on the host (rather than bound to the specific slotted\n // elements) since Stencil events bubble and the slot content can be swapped at runtime.\n this.el.addEventListener('dsSliceHover', this.handleChartHover);\n this.el.addEventListener('dsItemHover', this.handleLegendHover);\n }\n\n disconnectedCallback() {\n this.el.removeEventListener('dsSliceHover', this.handleChartHover);\n this.el.removeEventListener('dsItemHover', this.handleLegendHover);\n }\n\n private handleChartHover = (e: Event) => {\n // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates\n // slotted children into an inner region wrapper on render, so they're no longer direct\n // children of the host by the time this fires.\n const legend = this.el.querySelector('[slot=\"legend\"]') as SyncableSlot | null;\n if (!legend || !('activeLabel' in legend)) return;\n legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n };\n\n private handleLegendHover = (e: Event) => {\n const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n if (!chart || !('activeLabel' in chart)) return;\n chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n };\n\n private handleFilterClick = () => {\n this.dsFilterClick.emit();\n };\n\n render() {\n return (\n <Host class=\"card-data-viz-donut\">\n <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n <ds-button-unfilled\n slot=\"actions\"\n variant=\"icon\"\n type=\"button\"\n icon=\"Filters\"\n aria-label={this.filterLabel}\n onDsClick={this.handleFilterClick}\n />\n <div class=\"card-data-viz-donut__layout\">\n {this.hasChartSlot && (\n <div class=\"card-data-viz-donut__chart-region\">\n <slot name=\"chart\" />\n </div>\n )}\n {this.hasLegendSlot && (\n <div class=\"card-data-viz-donut__legend-region\">\n <slot name=\"legend\" />\n </div>\n )}\n </div>\n </ds-card-shell-data-viz>\n </Host>\n );\n }\n}\n"],"mappings":"0RAAA,MAAMA,EAAsB,IAAM,kyB,MCoBrBC,EAAgBC,EAAA,MAAAD,UAAAE,EAL7B,WAAAC,CAAAC,G,uFAYUC,KAAAC,UAAmC,KACnCD,KAAAE,YAAsB,SAQbF,KAAAG,aAAe,MACfH,KAAAI,cAAgB,MAwBzBJ,KAAAK,iBAAoBC,IAI1B,MAAMC,EAASP,KAAKQ,GAAGC,cAAc,mBACrC,IAAKF,KAAY,gBAAiBA,GAAS,OAC3CA,EAAOG,YAAeJ,EAAgCK,QAAQC,OAAS,IAAI,EAGrEZ,KAAAa,kBAAqBP,IAC3B,MAAMQ,EAAQd,KAAKQ,GAAGC,cAAc,kBACpC,IAAKK,KAAW,gBAAiBA,GAAQ,OACzCA,EAAMJ,YAAeJ,EAAgCK,QAAQC,OAAS,IAAI,EAGpEZ,KAAAe,kBAAoB,KAC1Bf,KAAKgB,cAAcC,MAAM,CA+B5B,CArEC,mBAAAC,GAIElB,KAAKG,eAAiBH,KAAKQ,GAAGC,cAAc,kBAC5CT,KAAKI,gBAAkBJ,KAAKQ,GAAGC,cAAc,kB,CAG/C,gBAAAU,GAKEnB,KAAKQ,GAAGY,iBAAiB,eAAgBpB,KAAKK,kBAC9CL,KAAKQ,GAAGY,iBAAiB,cAAepB,KAAKa,kB,CAG/C,oBAAAQ,GACErB,KAAKQ,GAAGc,oBAAoB,eAAgBtB,KAAKK,kBACjDL,KAAKQ,GAAGc,oBAAoB,cAAetB,KAAKa,kB,CAsBlD,MAAAU,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,uBACVH,EAAA,0BAAAE,IAAA,2CAAwBE,QAAS5B,KAAK4B,QAAS3B,UAAWD,KAAKC,WAC7DuB,EAAA,sBAAAE,IAAA,2CACEG,KAAK,UACLC,QAAQ,OACRC,KAAK,SACLC,KAAK,UAAS,aACFhC,KAAKE,YACjB+B,UAAWjC,KAAKe,oBAElBS,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACR3B,KAAKG,cACJqB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qCACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,WAGdlC,KAAKI,eACJoB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sCACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,c","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as
|
|
1
|
+
import{p as e,H as t,c as s,h as i,a,t as d}from"./index.js";import{d as r}from"./p-DrDHC7V6.js";import{d as n}from"./p-DsbhBb5F.js";import{d as o}from"./p-CKnoWZd9.js";import{d as c}from"./p-DuNZGFkV.js";import{d as l}from"./p-Cpr3K41-.js";import{d as b}from"./p-CZZYGqKz.js";const m=()=>`.sc-ds-card-setting-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-setting-width);min-height:var(--_card-setting-min-height);max-width:100%;overflow:hidden;background-color:var(--color-background-primary);border:none;border-radius:var(--dimension-radius-025);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card-setting__header.sc-ds-card-setting{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);padding:var(--dimension-space-100);flex:0 0 auto;box-sizing:border-box;background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{background-color:transparent;border-bottom-color:transparent}ds-text.card-setting__title.sc-ds-card-setting{display:flex;flex:1 1 auto;align-items:center;min-width:0;padding:calc(var(--dimension-space-075) + var(--dimension-space-025));box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card-setting__body.sc-ds-card-setting{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--dimension-radius-025)}`;const g={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const h={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const u="var(--color-foreground-faint-brand)";const f=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsAction=s(this,"dsAction");this.cardWidth="md";this.editing=false;this.editLabel="Edit";this.cancelLabel="Cancel";this.saveLabel="Save"}emitAction(e,t){this.dsAction.emit({action:e,originalEvent:t})}render(){const e=this.editing;return i(a,{key:"e6fc21744458357622f231bbc7aacf758ff6c94b",class:{"card-setting":true,"card-setting--editing":e},style:{"--_card-setting-width":g[this.cardWidth],"--_card-setting-min-height":h[this.cardWidth]}},i("header",{key:"cffdaab9863f274e2c4cfe9782b557f8e82a25c3",class:"card-setting__header"},i("ds-text",{key:"101c444652cb1a57264a778b27d46ab737d10b0b",class:"card-setting__title",variant:"text-title-small",emphasis:true,color:e?u:"primary",as:"h2"},this.heading),i("div",{key:"e32ee6b60ee72c2e68490aa026f76a3df1388593",class:"card-setting__actions"},!e?i("ds-button-unfilled",{variant:"icon",type:"button",icon:"Pencil","aria-label":this.editLabel,onDsClick:e=>this.emitAction("edit",e.detail)}):[i("ds-button-unfilled",{key:"cancel",variant:"icon",type:"button",icon:"Cross",background:"bold","aria-label":this.cancelLabel,onDsClick:e=>this.emitAction("cancel",e.detail)}),i("ds-button-filled",{key:"save",variant:"icon",type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":this.saveLabel,onDsClick:e=>this.emitAction("save",e.detail)})])),i("div",{key:"4ea4883621081d9d9d0ea804d2d526bcdd63df3c",class:"card-setting__body"},i("slot",{key:"2c142e5db33b591b23967537868a96185214d14c"})))}static get style(){return m()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],editing:[4],editLabel:[1,"edit-label"],cancelLabel:[1,"cancel-label"],saveLabel:[1,"save-label"]}]);function p(){if(typeof customElements==="undefined"){return}const e=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text"];e.forEach((e=>{switch(e){case"ds-card-setting":if(!customElements.get(d(e))){customElements.define(d(e),f)}break;case"ds-badge":if(!customElements.get(d(e))){r()}break;case"ds-button-filled":if(!customElements.get(d(e))){n()}break;case"ds-button-unfilled":if(!customElements.get(d(e))){o()}break;case"ds-icon":if(!customElements.get(d(e))){c()}break;case"ds-loader":if(!customElements.get(d(e))){l()}break;case"ds-text":if(!customElements.get(d(e))){b()}break}}))}p();const v=f;const k=p;export{v as DsCardSetting,k as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-card-setting.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["cardSettingCss","CardSetting","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","editing","editLabel","cancelLabel","saveLabel","
|
|
1
|
+
{"version":3,"names":["cardSettingCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","FAINT_BRAND_TITLE_COLOR","CardSetting","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","editing","editLabel","cancelLabel","saveLabel","emitAction","action","originalEvent","dsAction","emit","render","h","Host","key","class","style","variant","emphasis","color","as","heading","type","icon","onDsClick","event","detail","background","intent","contrast"],"sources":["src/wc/components/CardSetting/CardSetting.css?tag=ds-card-setting&encapsulation=scoped","src/wc/components/CardSetting/CardSetting.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n width: var(--_card-setting-width);\n min-height: var(--_card-setting-min-height);\n max-width: 100%;\n overflow: hidden;\n background-color: var(--color-background-primary);\n border: none;\n border-radius: var(--dimension-radius-025);\n box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) {\n background-color: var(--color-background-bold-brand);\n box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.card-setting__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--dimension-space-100);\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n flex: 0 0 auto;\n box-sizing: border-box;\n background-color: var(--color-background-secondary);\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) .card-setting__header {\n background-color: transparent;\n border-bottom-color: transparent;\n}\n\nds-text.card-setting__title {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n padding: calc(var(--dimension-space-075) + var(--dimension-space-025));\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.card-setting__actions {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: var(--dimension-space-100);\n}\n\n.card-setting__body {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n min-height: 0;\n box-sizing: border-box;\n background-color: var(--color-background-primary);\n border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n}\n\n:host(.card-setting--editing) .card-setting__body {\n border-radius: var(--dimension-radius-025);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type CardSettingWidth = 'sm' | 'md' | 'lg';\nexport type CardSettingAction = 'edit' | 'save' | 'cancel';\n\nexport interface CardSettingActionDetail {\n action: CardSettingAction;\n originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardSettingWidth, string> = {\n sm: 'var(--dimension-card-width-sm)',\n md: 'var(--dimension-card-width-md)',\n lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardSettingWidth, string> = {\n sm: 'var(--dimension-card-height-sm)',\n md: 'var(--dimension-card-height-md)',\n lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\n@Component({\n tag: 'ds-card-setting',\n styleUrl: 'CardSetting.css',\n scoped: true,\n})\nexport class CardSetting {\n /** Section heading shown in the card header. */\n @Prop() heading!: string;\n\n /**\n * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\n * matching `--dimension-card-height-*` so the body fills available space\n * even when the slot is empty.\n */\n @Prop() cardWidth: CardSettingWidth = 'md';\n\n /** Controlled edit state — parent owns single-edit orchestration. */\n @Prop() editing = false;\n @Prop() editLabel: string = 'Edit';\n @Prop() cancelLabel: string = 'Cancel';\n @Prop() saveLabel: string = 'Save';\n\n /** Emits a controlled edit, save, or cancel request. */\n @Event() dsAction!: EventEmitter<CardSettingActionDetail>;\n\n private emitAction(action: CardSettingAction, originalEvent: MouseEvent) {\n this.dsAction.emit({ action, originalEvent });\n }\n\n render() {\n const editing = this.editing;\n\n return (\n <Host\n class={{\n 'card-setting': true,\n 'card-setting--editing': editing,\n }}\n style={{\n '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth],\n '--_card-setting-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n }}\n >\n <header class=\"card-setting__header\">\n <ds-text\n class=\"card-setting__title\"\n variant=\"text-title-small\"\n emphasis\n color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n as=\"h2\"\n >\n {this.heading}\n </ds-text>\n <div class=\"card-setting__actions\">\n {!editing ? (\n <ds-button-unfilled\n variant=\"icon\"\n type=\"button\"\n icon=\"Pencil\"\n aria-label={this.editLabel}\n onDsClick={(event: CustomEvent<MouseEvent>) =>\n this.emitAction('edit', event.detail)\n }\n />\n ) : (\n [\n <ds-button-unfilled\n key=\"cancel\"\n variant=\"icon\"\n type=\"button\"\n icon=\"Cross\"\n background=\"bold\"\n aria-label={this.cancelLabel}\n onDsClick={(event: CustomEvent<MouseEvent>) =>\n this.emitAction('cancel', event.detail)\n }\n />,\n <ds-button-filled\n key=\"save\"\n variant=\"icon\"\n type=\"button\"\n icon=\"Check\"\n intent=\"brand\"\n contrast=\"faint\"\n aria-label={this.saveLabel}\n onDsClick={(event: CustomEvent<MouseEvent>) =>\n this.emitAction('save', event.detail)\n }\n />,\n ]\n )}\n </div>\n </header>\n <div class=\"card-setting__body\">\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"qRAAA,MAAMA,EAAiB,IAAM,qwDCU7B,MAAMC,EAAoD,CACxDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAAqD,CACzDH,GAAI,kCACJC,GAAI,kCACJC,GAAI,mCAGN,MAAME,EAA0B,sC,MAOnBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,6EAcUC,KAAAC,UAA8B,KAG9BD,KAAAE,QAAU,MACVF,KAAAG,UAAoB,OACpBH,KAAAI,YAAsB,SACtBJ,KAAAK,UAAoB,MA+E7B,CA1ES,UAAAC,CAAWC,EAA2BC,GAC5CR,KAAKS,SAASC,KAAK,CAAEH,SAAQC,iB,CAG/B,MAAAG,GACE,MAAMT,EAAUF,KAAKE,QAErB,OACEU,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,eAAgB,KAChB,wBAAyBb,GAE3Bc,MAAO,CACL,wBAAyB3B,EAAgBW,KAAKC,WAC9C,6BAA8BR,EAAiBO,KAAKC,aAGtDW,EAAA,UAAAE,IAAA,2CAAQC,MAAM,wBACZH,EAAA,WAAAE,IAAA,2CACEC,MAAM,sBACNE,QAAQ,mBACRC,SAAQ,KACRC,MAAOjB,EAAUR,EAA0B,UAC3C0B,GAAG,MAEFpB,KAAKqB,SAERT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTb,EACAU,EAAA,sBACEK,QAAQ,OACRK,KAAK,SACLC,KAAK,SAAQ,aACDvB,KAAKG,UACjBqB,UAAYC,GACVzB,KAAKM,WAAW,OAAQmB,EAAMC,UAEhC,CAGAd,EAAA,sBACEE,IAAI,SACJG,QAAQ,OACRK,KAAK,SACLC,KAAK,QACLI,WAAW,OAAM,aACL3B,KAAKI,YACjBoB,UAAYC,GACVzB,KAAKM,WAAW,SAAUmB,EAAMC,UAGpCd,EAAA,oBACEE,IAAI,OACJG,QAAQ,OACRK,KAAK,SACLC,KAAK,QACLK,OAAO,QACPC,SAAS,QAAO,aACJ7B,KAAKK,UACjBmB,UAAYC,GACVzB,KAAKM,WAAW,OAAQmB,EAAMC,aAOxCd,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACTH,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{C as o,d as s}from"./p-
|
|
1
|
+
import{C as o,d as s}from"./p-0kEg-Z4f.js";const t=o;const p=s;export{t as DsCardShellDataViz,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-card-shell-data-viz.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as a,h as s,a as r,t as e}from"./index.js";import{c as i}from"./p-CMv_7vFs.js";import{m as c,b as o,l as n}from"./p-CzBnvtcz.js";const h=()=>`.sc-ds-chart-bar-h{display:inline-flex;font-family:var(--typography-font-family)}.chart-bar__gridline.sc-ds-chart-bar{stroke:var(--color-border-tertiary);stroke-width:1}.chart-bar__axis-label.sc-ds-chart-bar{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.chart-bar__bar.sc-ds-chart-bar{rx:var(--dimension-radius-050)}`;const
|
|
1
|
+
import{p as t,H as a,h as s,a as r,t as e}from"./index.js";import{c as i}from"./p-CMv_7vFs.js";import{m as c,b as o,l as n}from"./p-CzBnvtcz.js";const h=()=>`.sc-ds-chart-bar-h{display:inline-flex;font-family:var(--typography-font-family)}.chart-bar__gridline.sc-ds-chart-bar{stroke:var(--color-border-tertiary);stroke-width:1}.chart-bar__axis-label.sc-ds-chart-bar{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.chart-bar__bar.sc-ds-chart-bar{rx:var(--dimension-radius-050)}`;const d={top:16,right:16,bottom:24,left:32};const l=t(class t extends a{constructor(t){super();if(t!==false){this.__registerHost()}this.data=[];this.width=480;this.height=240}render(){const t=this.width-d.left-d.right;const a=this.height-d.top-d.bottom;const e=c(this.data,(t=>t.value))??0;const h=o().domain(this.data.map((t=>t.label))).range([0,t]).padding(.35);const l=n().domain([0,e||1]).range([a,0]).nice();const f=l.ticks(4);return s(r,{key:"b304212e54cdd05a1a7536ced4391e0b930df6f3",class:"chart-bar"},s("svg",{key:"0dfdd90c587d63968d180df767c0d295735360a5",class:"chart-bar__svg",viewBox:`0 0 ${this.width} ${this.height}`,width:this.width,height:this.height,role:"img","aria-label":this.data.map((t=>`${t.label}: ${t.value}`)).join(", ")},s("g",{key:"b3eae4ed41591b308c3c3a938bdf96d592148523",transform:`translate(${d.left}, ${d.top})`},f.map((a=>s("g",{key:`grid-${a}`,transform:`translate(0, ${l(a)})`},s("line",{class:"chart-bar__gridline",x1:0,x2:t}),s("text",{class:"chart-bar__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},a)))),this.data.map(((t,r)=>{const e=h.bandwidth();const c=h(t.label)??0;const o=l(t.value);return s("g",{key:t.label},s("rect",{class:"chart-bar__bar",x:c,y:o,width:e,height:a-o,fill:t.color??i(r)}),s("text",{class:"chart-bar__axis-label",x:c+e/2,y:a+16,"text-anchor":"middle"},t.label))})))))}static get style(){return h()}},[2,"ds-chart-bar",{data:[16],width:[2],height:[2]}]);function f(){if(typeof customElements==="undefined"){return}const t=["ds-chart-bar"];t.forEach((t=>{switch(t){case"ds-chart-bar":if(!customElements.get(e(t))){customElements.define(e(t),l)}break}}))}f();const b=l;const m=f;export{b as DsChartBar,m as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chart-bar.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as n,c as e,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{T as a}from"./p-drBA73M_.js";import{r as c}from"./p-BWUTr_XN.js";import{f as h}from"./p-BBpASejH.js";import{w as u,c as l,a as f}from"./p-CrCGIx8s.js";function d(t,n,e){t.textContent=n;if(e<=0||t.getComputedTextLength()<=e)return n;let i=0;let s=n.length;while(i<s){const r=Math.ceil((i+s)/2);t.textContent=`${n.slice(0,r)}…`;if(t.getComputedTextLength()<=e){i=r}else{s=r-1}}return i>0?`${n.slice(0,i)}…`:"…"}const p=Math.abs;const y=Math.atan2;const g=Math.cos;const v=Math.max;const m=Math.min;const b=Math.sin;const x=Math.sqrt;const M=1e-12;const _=Math.PI;const w=_/2;const z=2*_;function k(t){return t>1?0:t<-1?_:Math.acos(t)}function $(t){return t>=1?w:t<=-1?-w:Math.asin(t)}function A(t){return t.innerRadius}function C(t){return t.outerRadius}function S(t){return t.startAngle}function j(t){return t.endAngle}function B(t){return t&&t.padAngle}function R(t,n,e,i,s,r,o,a){var c=e-t,h=i-n,u=o-s,l=a-r,f=l*c-u*h;if(f*f<M)return;f=(u*(n-r)-l*(t-s))/f;return[t+f*c,n+f*h]}function L(t,n,e,i,s,r,o){var a=t-e,c=n-i,h=(o?r:-r)/x(a*a+c*c),u=h*c,l=-h*a,f=t+u,d=n+l,p=e+u,y=i+l,g=(f+p)/2,m=(d+y)/2,b=p-f,M=y-d,_=b*b+M*M,w=s-r,z=f*y-p*d,k=(M<0?-1:1)*x(v(0,w*w*_-z*z)),$=(z*M-b*k)/_,A=(-z*b-M*k)/_,C=(z*M+b*k)/_,S=(-z*b+M*k)/_,j=$-g,B=A-m,R=C-g,L=S-m;if(j*j+B*B>R*R+L*L)$=C,A=S;return{cx:$,cy:A,x01:-u,y01:-l,x11:$*(s/w-1),y11:A*(s/w-1)}}function N(){var t=A,n=C,e=l(0),i=null,s=S,r=j,o=B,a=null,c=u(h);function h(){var h,u,l=+t.apply(this,arguments),f=+n.apply(this,arguments),d=s.apply(this,arguments)-w,v=r.apply(this,arguments)-w,A=p(v-d),C=v>d;if(!a)a=h=c();if(f<l)u=f,f=l,l=u;if(!(f>M))a.moveTo(0,0);else if(A>z-M){a.moveTo(f*g(d),f*b(d));a.arc(0,0,f,d,v,!C);if(l>M){a.moveTo(l*g(v),l*b(v));a.arc(0,0,l,v,d,C)}}else{var S=d,j=v,B=d,N=v,P=A,E=A,F=o.apply(this,arguments)/2,H=F>M&&(i?+i.apply(this,arguments):x(l*l+f*f)),O=m(p(f-l)/2,+e.apply(this,arguments)),T=O,D=O,V,G;if(H>M){var I=$(H/l*b(F)),U=$(H/f*b(F));if((P-=I*2)>M)I*=C?1:-1,B+=I,N-=I;else P=0,B=N=(d+v)/2;if((E-=U*2)>M)U*=C?1:-1,S+=U,j-=U;else E=0,S=j=(d+v)/2}var W=f*g(S),X=f*b(S),q=l*g(N),J=l*b(N);if(O>M){var K=f*g(j),Q=f*b(j),Y=l*g(B),Z=l*b(B),tt;if(A<_){if(tt=R(W,X,Y,Z,K,Q,q,J)){var nt=W-tt[0],et=X-tt[1],it=K-tt[0],st=Q-tt[1],rt=1/b(k((nt*it+et*st)/(x(nt*nt+et*et)*x(it*it+st*st)))/2),ot=x(tt[0]*tt[0]+tt[1]*tt[1]);T=m(O,(l-ot)/(rt-1));D=m(O,(f-ot)/(rt+1))}else{T=D=0}}}if(!(E>M))a.moveTo(W,X);else if(D>M){V=L(Y,Z,W,X,f,D,C);G=L(K,Q,q,J,f,D,C);a.moveTo(V.cx+V.x01,V.cy+V.y01);if(D<O)a.arc(V.cx,V.cy,D,y(V.y01,V.x01),y(G.y01,G.x01),!C);else{a.arc(V.cx,V.cy,D,y(V.y01,V.x01),y(V.y11,V.x11),!C);a.arc(0,0,f,y(V.cy+V.y11,V.cx+V.x11),y(G.cy+G.y11,G.cx+G.x11),!C);a.arc(G.cx,G.cy,D,y(G.y11,G.x11),y(G.y01,G.x01),!C)}}else a.moveTo(W,X),a.arc(0,0,f,S,j,!C);if(!(l>M)||!(P>M))a.lineTo(q,J);else if(T>M){V=L(q,J,K,Q,l,-T,C);G=L(W,X,Y,Z,l,-T,C);a.lineTo(V.cx+V.x01,V.cy+V.y01);if(T<O)a.arc(V.cx,V.cy,T,y(V.y01,V.x01),y(G.y01,G.x01),!C);else{a.arc(V.cx,V.cy,T,y(V.y01,V.x01),y(V.y11,V.x11),!C);a.arc(0,0,l,y(V.cy+V.y11,V.cx+V.x11),y(G.cy+G.y11,G.cx+G.x11),C);a.arc(G.cx,G.cy,T,y(G.y11,G.x11),y(G.y01,G.x01),!C)}}else a.arc(0,0,l,N,B,C)}a.closePath();if(h)return a=null,h+""||null}h.centroid=function(){var e=(+t.apply(this,arguments)+ +n.apply(this,arguments))/2,i=(+s.apply(this,arguments)+ +r.apply(this,arguments))/2-_/2;return[g(i)*e,b(i)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:l(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:l(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:l(+t),h):e};h.padRadius=function(t){return arguments.length?(i=t==null?null:typeof t==="function"?t:l(+t),h):i};h.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:l(+t),h):s};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:l(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:l(+t),h):o};h.context=function(t){return arguments.length?(a=t==null?null:t,h):a};return h}function P(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function E(t){return t}function F(){var t=E,n=P,e=null,i=l(0),s=l(z),r=l(0);function o(o){var a,c=(o=f(o)).length,h,u,l=0,d=new Array(c),p=new Array(c),y=+i.apply(this,arguments),g=Math.min(z,Math.max(-z,s.apply(this,arguments)-y)),v,m=Math.min(Math.abs(g)/c,r.apply(this,arguments)),b=m*(g<0?-1:1),x;for(a=0;a<c;++a){if((x=p[d[a]=a]=+t(o[a],a,o))>0){l+=x}}if(n!=null)d.sort((function(t,e){return n(p[t],p[e])}));else if(e!=null)d.sort((function(t,n){return e(o[t],o[n])}));for(a=0,u=l?(g-c*b)/l:0;a<c;++a,y=v){h=d[a],x=p[h],v=y+(x>0?x*u:0)+b,p[h]={data:o[h],index:a,value:x,startAngle:y,endAngle:v,padAngle:m}}return p}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:l(+n),o):t};o.sortValues=function(t){return arguments.length?(n=t,e=null,o):n};o.sort=function(t){return arguments.length?(e=t,n=null,o):e};o.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:l(+t),o):i};o.endAngle=function(t){return arguments.length?(s=typeof t==="function"?t:l(+t),o):s};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:l(+t),o):r};return o}const H=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:var(--typography-font-family);user-select:none}.chart-donut--fill.sc-ds-chart-donut-h{display:block;width:100%;height:100%;min-width:0;min-height:0}.chart-donut__wrapper.sc-ds-chart-donut{position:relative}.chart-donut--fill.sc-ds-chart-donut-h .chart-donut__wrapper.sc-ds-chart-donut{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:default;transition:opacity var(--effect-motion-short-2)}@media (prefers-reduced-motion: reduce){.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{transition:none}}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{outline:none;stroke:var(--color-interaction-focus);stroke-width:2}.chart-donut__center-value.sc-ds-chart-donut{fill:var(--color-foreground-primary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default}`;const O=.25;const T=0;const D=.82;const V=128;const G=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=e(this,"dsSliceHover");this.noDataLabel="No data";this.data=[];this.thickness=a.size200;this.cornerRadius=a.radius025;this.gap=1;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText="";this.measuredSize=V;this.resizeObserver=null}get isFillMode(){return this.size==null||!Number.isFinite(this.size)||this.size<=0}get fillMinPx(){return c(a.donutFillMin,V)}get fillMaxPx(){return c(a.donutFillMax,192)}clampFillSize(t){const n=this.fillMinPx;const e=this.fillMaxPx;if(!(t>0))return n;return Math.round(Math.min(e,Math.max(n,t)))}get resolvedSize(){if(!this.isFillMode)return this.size;return this.clampFillSize(this.measuredSize)}componentDidLoad(){this.syncResizeObserver()}onSizePropChange(){this.syncResizeObserver()}disconnectedCallback(){this.teardownResizeObserver()}syncResizeObserver(){this.teardownResizeObserver();if(!this.isFillMode)return;const t=this.el;if(!t||typeof ResizeObserver==="undefined")return;this.resizeObserver=new ResizeObserver((t=>{const n=t[0];if(!n)return;this.applyAvailableSize(n.contentRect.width,n.contentRect.height)}));this.resizeObserver.observe(t);this.measureHost()}measureHost(){const t=this.el.getBoundingClientRect();this.applyAvailableSize(t.width,t.height)}applyAvailableSize(t,n){const e=Math.floor(Math.min(t,n));if(e>0&&e!==this.measuredSize){this.measuredSize=e}}teardownResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=null}handleHover(t){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t)}componentDidRender(){if(this.isFillMode&&!this.resizeObserver){this.syncResizeObserver()}const t=this.resolvedSize;const n=t/2;const e=c(this.thickness,a.size200);const i=n-e;const s=i*2*D;const r=this.data.reduce(((t,n)=>t+n.value),0);const o=this.centerValue??h(r,this.locale);if(this.valueTextEl){const t=d(this.valueTextEl,o,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const u=this.centerCaption??"";if(this.captionTextEl&&u){const t=d(this.captionTextEl,u,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.resolvedSize;const n=t/2;const e=c(this.thickness,a.size200);const r=c(this.cornerRadius,a.radius025);const u=n-e;const l=this.data.reduce(((t,n)=>t+n.value),0);const f=l<=0;const d=this.activeLabel??this.hoveredLabel;const p=N().innerRadius(u).outerRadius(n).cornerRadius(r).padAngle(this.gap*Math.PI/180);const y=f?[]:F().value((t=>t.value)).sort(null)(this.data);const g=f?N().innerRadius(u).outerRadius(n)({startAngle:0,endAngle:Math.PI*2}):null;const v=c(a.lineheightXl,32);const m=c(a.lineheightMd,20);const b=this.centerCaption?n-(T+m)/2:n;const x=n+(v+T)/2;const M=this.centerValue??h(l,this.locale);const _=this.centerCaption??"";const w=this.isFillMode;return i(s,{key:"6745bed80d766a3495f35cdcc25569833624fa88",class:{"chart-donut":true,"chart-donut--fill":w,"chart-donut--fixed":!w},style:!w?{width:`${t}px`,height:`${t}px`}:undefined},i("div",{key:"facb3caee20a2d0b337887f5f1648d76f54bee61",class:"chart-donut__wrapper",style:!w?{width:`${t}px`,height:`${t}px`}:undefined},i("svg",{key:"6a9cae7e1eddd5d16a2a6253a3c99759b056f34a",class:"chart-donut__svg",viewBox:`0 0 ${t} ${t}`,width:t,height:t,role:f?"img":undefined,"aria-label":f?this.noDataLabel:undefined},i("g",{key:"549c6ad541f54724c7845553791cfa741f50f133",transform:`translate(${n}, ${n})`},f?i("path",{d:g??undefined,fill:"var(--color-background-faint-neutral)","aria-hidden":"true"}):y.map(((t,n)=>{const e=this.data[n];const s=d!=null&&e.label!==d;return i("path",{key:e.label,d:p(t)??undefined,fill:e.color??o(n),opacity:s?O:1,tabindex:0,role:"img","aria-label":`${e.label}: ${e.value}`,onMouseEnter:()=>this.handleHover(e),onMouseLeave:()=>this.handleHover(null),onFocus:()=>this.handleHover(e),onBlur:()=>this.handleHover(null)})}))),i("text",{key:"01e5ac25774254d1944268c5163da29700d88821",class:"chart-donut__center-value",x:n,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||M),_&&i("text",{key:"aa3a504373361b5055b177186c4a7dcad892afbd",class:"chart-donut__center-caption",x:n,y:x,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||_))))}get el(){return this}static get watchers(){return{size:[{onSizePropChange:0}]}}static get style(){return H()}},[2,"ds-chart-donut",{locale:[1],noDataLabel:[1,"no-data-label"],data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],displayedValueText:[32],displayedCaptionText:[32],measuredSize:[32]},undefined,{size:[{onSizePropChange:0}]}]);function I(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(r(t))){customElements.define(r(t),G)}break}}))}I();const U=G;const W=I;export{U as DsChartDonut,W as defineCustomElement};
|
|
1
|
+
import{p as t,H as n,c as e,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{T as a}from"./p-C_0Q8Cnp.js";import{r as c}from"./p-BWUTr_XN.js";import{f as h}from"./p-BBpASejH.js";import{w as u,c as l,a as f}from"./p-CrCGIx8s.js";function d(t,n,e){t.textContent=n;if(e<=0||t.getComputedTextLength()<=e)return n;let i=0;let s=n.length;while(i<s){const r=Math.ceil((i+s)/2);t.textContent=`${n.slice(0,r)}…`;if(t.getComputedTextLength()<=e){i=r}else{s=r-1}}return i>0?`${n.slice(0,i)}…`:"…"}const p=Math.abs;const y=Math.atan2;const g=Math.cos;const v=Math.max;const m=Math.min;const b=Math.sin;const x=Math.sqrt;const M=1e-12;const _=Math.PI;const w=_/2;const z=2*_;function k(t){return t>1?0:t<-1?_:Math.acos(t)}function $(t){return t>=1?w:t<=-1?-w:Math.asin(t)}function C(t){return t.innerRadius}function A(t){return t.outerRadius}function S(t){return t.startAngle}function j(t){return t.endAngle}function R(t){return t&&t.padAngle}function B(t,n,e,i,s,r,o,a){var c=e-t,h=i-n,u=o-s,l=a-r,f=l*c-u*h;if(f*f<M)return;f=(u*(n-r)-l*(t-s))/f;return[t+f*c,n+f*h]}function L(t,n,e,i,s,r,o){var a=t-e,c=n-i,h=(o?r:-r)/x(a*a+c*c),u=h*c,l=-h*a,f=t+u,d=n+l,p=e+u,y=i+l,g=(f+p)/2,m=(d+y)/2,b=p-f,M=y-d,_=b*b+M*M,w=s-r,z=f*y-p*d,k=(M<0?-1:1)*x(v(0,w*w*_-z*z)),$=(z*M-b*k)/_,C=(-z*b-M*k)/_,A=(z*M+b*k)/_,S=(-z*b+M*k)/_,j=$-g,R=C-m,B=A-g,L=S-m;if(j*j+R*R>B*B+L*L)$=A,C=S;return{cx:$,cy:C,x01:-u,y01:-l,x11:$*(s/w-1),y11:C*(s/w-1)}}function N(){var t=C,n=A,e=l(0),i=null,s=S,r=j,o=R,a=null,c=u(h);function h(){var h,u,l=+t.apply(this,arguments),f=+n.apply(this,arguments),d=s.apply(this,arguments)-w,v=r.apply(this,arguments)-w,C=p(v-d),A=v>d;if(!a)a=h=c();if(f<l)u=f,f=l,l=u;if(!(f>M))a.moveTo(0,0);else if(C>z-M){a.moveTo(f*g(d),f*b(d));a.arc(0,0,f,d,v,!A);if(l>M){a.moveTo(l*g(v),l*b(v));a.arc(0,0,l,v,d,A)}}else{var S=d,j=v,R=d,N=v,P=C,E=C,F=o.apply(this,arguments)/2,H=F>M&&(i?+i.apply(this,arguments):x(l*l+f*f)),O=m(p(f-l)/2,+e.apply(this,arguments)),T=O,D=O,V,G;if(H>M){var I=$(H/l*b(F)),Q=$(H/f*b(F));if((P-=I*2)>M)I*=A?1:-1,R+=I,N-=I;else P=0,R=N=(d+v)/2;if((E-=Q*2)>M)Q*=A?1:-1,S+=Q,j-=Q;else E=0,S=j=(d+v)/2}var U=f*g(S),W=f*b(S),X=l*g(N),q=l*b(N);if(O>M){var J=f*g(j),K=f*b(j),Y=l*g(R),Z=l*b(R),tt;if(C<_){if(tt=B(U,W,Y,Z,J,K,X,q)){var nt=U-tt[0],et=W-tt[1],it=J-tt[0],st=K-tt[1],rt=1/b(k((nt*it+et*st)/(x(nt*nt+et*et)*x(it*it+st*st)))/2),ot=x(tt[0]*tt[0]+tt[1]*tt[1]);T=m(O,(l-ot)/(rt-1));D=m(O,(f-ot)/(rt+1))}else{T=D=0}}}if(!(E>M))a.moveTo(U,W);else if(D>M){V=L(Y,Z,U,W,f,D,A);G=L(J,K,X,q,f,D,A);a.moveTo(V.cx+V.x01,V.cy+V.y01);if(D<O)a.arc(V.cx,V.cy,D,y(V.y01,V.x01),y(G.y01,G.x01),!A);else{a.arc(V.cx,V.cy,D,y(V.y01,V.x01),y(V.y11,V.x11),!A);a.arc(0,0,f,y(V.cy+V.y11,V.cx+V.x11),y(G.cy+G.y11,G.cx+G.x11),!A);a.arc(G.cx,G.cy,D,y(G.y11,G.x11),y(G.y01,G.x01),!A)}}else a.moveTo(U,W),a.arc(0,0,f,S,j,!A);if(!(l>M)||!(P>M))a.lineTo(X,q);else if(T>M){V=L(X,q,J,K,l,-T,A);G=L(U,W,Y,Z,l,-T,A);a.lineTo(V.cx+V.x01,V.cy+V.y01);if(T<O)a.arc(V.cx,V.cy,T,y(V.y01,V.x01),y(G.y01,G.x01),!A);else{a.arc(V.cx,V.cy,T,y(V.y01,V.x01),y(V.y11,V.x11),!A);a.arc(0,0,l,y(V.cy+V.y11,V.cx+V.x11),y(G.cy+G.y11,G.cx+G.x11),A);a.arc(G.cx,G.cy,T,y(G.y11,G.x11),y(G.y01,G.x01),!A)}}else a.arc(0,0,l,N,R,A)}a.closePath();if(h)return a=null,h+""||null}h.centroid=function(){var e=(+t.apply(this,arguments)+ +n.apply(this,arguments))/2,i=(+s.apply(this,arguments)+ +r.apply(this,arguments))/2-_/2;return[g(i)*e,b(i)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:l(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:l(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:l(+t),h):e};h.padRadius=function(t){return arguments.length?(i=t==null?null:typeof t==="function"?t:l(+t),h):i};h.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:l(+t),h):s};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:l(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:l(+t),h):o};h.context=function(t){return arguments.length?(a=t==null?null:t,h):a};return h}function P(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function E(t){return t}function F(){var t=E,n=P,e=null,i=l(0),s=l(z),r=l(0);function o(o){var a,c=(o=f(o)).length,h,u,l=0,d=new Array(c),p=new Array(c),y=+i.apply(this,arguments),g=Math.min(z,Math.max(-z,s.apply(this,arguments)-y)),v,m=Math.min(Math.abs(g)/c,r.apply(this,arguments)),b=m*(g<0?-1:1),x;for(a=0;a<c;++a){if((x=p[d[a]=a]=+t(o[a],a,o))>0){l+=x}}if(n!=null)d.sort((function(t,e){return n(p[t],p[e])}));else if(e!=null)d.sort((function(t,n){return e(o[t],o[n])}));for(a=0,u=l?(g-c*b)/l:0;a<c;++a,y=v){h=d[a],x=p[h],v=y+(x>0?x*u:0)+b,p[h]={data:o[h],index:a,value:x,startAngle:y,endAngle:v,padAngle:m}}return p}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:l(+n),o):t};o.sortValues=function(t){return arguments.length?(n=t,e=null,o):n};o.sort=function(t){return arguments.length?(e=t,n=null,o):e};o.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:l(+t),o):i};o.endAngle=function(t){return arguments.length?(s=typeof t==="function"?t:l(+t),o):s};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:l(+t),o):r};return o}const H=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:var(--typography-font-family);user-select:none}.chart-donut--fill.sc-ds-chart-donut-h{display:block;width:100%;height:100%;min-width:0;min-height:0}.chart-donut__wrapper.sc-ds-chart-donut{position:relative}.chart-donut--fill.sc-ds-chart-donut-h .chart-donut__wrapper.sc-ds-chart-donut{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:default;transition:opacity var(--effect-motion-short-2)}@media (prefers-reduced-motion: reduce){.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{transition:none}}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{outline:none;stroke:var(--color-interaction-focus);stroke-width:2}.chart-donut__center-value.sc-ds-chart-donut{fill:var(--color-foreground-primary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default}`;const O=.25;const T=0;const D=.82;const V=128;const G=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=e(this,"dsSliceHover");this.noDataLabel="No data";this.data=[];this.thickness=a.size200;this.cornerRadius=a.radius025;this.gap=1;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText="";this.measuredSize=V;this.resizeObserver=null}get isFillMode(){return this.size==null||!Number.isFinite(this.size)||this.size<=0}get fillMinPx(){return c(a.donutFillMin,V)}get fillMaxPx(){return c(a.donutFillMax,192)}clampFillSize(t){const n=this.fillMinPx;const e=this.fillMaxPx;if(!(t>0))return n;return Math.round(Math.min(e,Math.max(n,t)))}get resolvedSize(){if(!this.isFillMode)return this.size;return this.clampFillSize(this.measuredSize)}componentDidLoad(){this.syncResizeObserver()}onSizePropChange(){this.syncResizeObserver()}disconnectedCallback(){this.teardownResizeObserver()}syncResizeObserver(){this.teardownResizeObserver();if(!this.isFillMode)return;const t=this.el;if(!t||typeof ResizeObserver==="undefined")return;this.resizeObserver=new ResizeObserver((t=>{const n=t[0];if(!n)return;this.applyAvailableSize(n.contentRect.width,n.contentRect.height)}));this.resizeObserver.observe(t);this.measureHost()}measureHost(){const t=this.el.getBoundingClientRect();this.applyAvailableSize(t.width,t.height)}applyAvailableSize(t,n){const e=Math.floor(Math.min(t,n));if(e>0&&e!==this.measuredSize){this.measuredSize=e}}teardownResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=null}handleHover(t){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t)}componentDidRender(){if(this.isFillMode&&!this.resizeObserver){this.syncResizeObserver()}const t=this.resolvedSize;const n=t/2;const e=c(this.thickness,a.size200);const i=n-e;const s=i*2*D;const r=this.data.reduce(((t,n)=>t+n.value),0);const o=this.centerValue??h(r,this.locale);if(this.valueTextEl){const t=d(this.valueTextEl,o,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const u=this.centerCaption??"";if(this.captionTextEl&&u){const t=d(this.captionTextEl,u,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.resolvedSize;const n=t/2;const e=c(this.thickness,a.size200);const r=c(this.cornerRadius,a.radius025);const u=n-e;const l=this.data.reduce(((t,n)=>t+n.value),0);const f=l<=0;const d=this.activeLabel??this.hoveredLabel;const p=N().innerRadius(u).outerRadius(n).cornerRadius(r).padAngle(this.gap*Math.PI/180);const y=f?[]:F().value((t=>t.value)).sort(null)(this.data);const g=f?N().innerRadius(u).outerRadius(n)({startAngle:0,endAngle:Math.PI*2}):null;const v=c(a.lineheightXl,32);const m=c(a.lineheightMd,20);const b=this.centerCaption?n-(T+m)/2:n;const x=n+(v+T)/2;const M=this.centerValue??h(l,this.locale);const _=this.centerCaption??"";const w=this.isFillMode;return i(s,{key:"fd2475eaa376f33c2c2a33bf1e7b0da8304b5845",class:{"chart-donut":true,"chart-donut--fill":w,"chart-donut--fixed":!w},style:!w?{width:`${t}px`,height:`${t}px`}:undefined},i("div",{key:"fa920a1ab031c60eff9ffeadd9a64e8da3372be3",class:"chart-donut__wrapper",style:!w?{width:`${t}px`,height:`${t}px`}:undefined},i("svg",{key:"f1ed9edd81bdc898a21a5b723197b6c60edae2e2",class:"chart-donut__svg",viewBox:`0 0 ${t} ${t}`,width:t,height:t,role:f?"img":undefined,"aria-label":f?this.noDataLabel:undefined},i("g",{key:"66b9913ba78b19a56ef6754cd364cb6e7d47cfb2",transform:`translate(${n}, ${n})`},f?i("path",{d:g??undefined,fill:"var(--color-background-faint-neutral)","aria-hidden":"true"}):y.map(((t,n)=>{const e=this.data[n];const s=d!=null&&e.label!==d;return i("path",{key:e.label,d:p(t)??undefined,fill:e.color??o(n),opacity:s?O:1,tabindex:0,role:"img","aria-label":`${e.label}: ${e.value}`,onMouseEnter:()=>this.handleHover(e),onMouseLeave:()=>this.handleHover(null),onFocus:()=>this.handleHover(e),onBlur:()=>this.handleHover(null)})}))),i("text",{key:"320f039aba6d2a8a5862c2ac350a7865247c40cc",class:"chart-donut__center-value",x:n,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||M),_&&i("text",{key:"11a327cf15c878ba58be42e22be690546f5002ca",class:"chart-donut__center-caption",x:n,y:x,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||_))))}get el(){return this}static get watchers(){return{size:[{onSizePropChange:0}]}}static get style(){return H()}},[2,"ds-chart-donut",{locale:[1],noDataLabel:[1,"no-data-label"],data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],displayedValueText:[32],displayedCaptionText:[32],measuredSize:[32]},undefined,{size:[{onSizePropChange:0}]}]);function I(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(r(t))){customElements.define(r(t),G)}break}}))}I();const Q=G;const U=I;export{Q as DsChartDonut,U as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chart-donut.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as n,c as t,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as c}from"./p-BSOZXagj.js";import{f as a}from"./p-BBpASejH.js";function d(e,n=1,t){const i=n===2?2:1;const s=Number.isFinite(e)?e:0;return new Intl.NumberFormat(t,{style:"percent",minimumFractionDigits:i,maximumFractionDigits:i}).format(s)}const l=()=>`.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before,.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before{z-index:1}.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chart-legend-h,.ds-interaction-fill--bordered.sc-ds-chart-legend{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chart-legend-h,.ds-interaction-fill--selected.sc-ds-chart-legend{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chart-legend-h>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill.sc-ds-chart-legend>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill__content.sc-ds-chart-legend{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-chart-legend-h,.ds-interaction-fill--on-faint.sc-ds-chart-legend{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chart-legend-h,.ds-interaction-fill--on-medium.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chart-legend-h,.ds-interaction-fill--on-bold.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chart-legend-h,.ds-interaction-fill--on-strong.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-chart-legend-h,.ds-interaction-fill--on-translucent.sc-ds-chart-legend{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chart-legend-h,.ds-interaction-fill--on-inverted.sc-ds-chart-legend{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chart-legend-h,.ds-interaction-fill--on-media.sc-ds-chart-legend{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chart-legend-h,.ds-interaction-fill--on-always-dark.sc-ds-chart-legend{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chart-legend-h,.ds-interaction-fill--on-navigation.sc-ds-chart-legend{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-chart-legend-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring.sc-ds-chart-legend:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-chart-legend-h{display:block;font-family:var(--typography-font-family);user-select:none}.chart-legend__list.sc-ds-chart-legend{margin:0;padding:0;list-style:none}.chart-legend__list-item.sc-ds-chart-legend{display:contents}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:grid;grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600);column-gap:var(--dimension-space-075);row-gap:var(--dimension-space-050)}.chart-legend--vertical.chart-legend--show-percentage.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex;gap:var(--dimension-space-100)}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}@media (prefers-reduced-motion: reduce){.chart-legend__item.sc-ds-chart-legend{transition:none}}.chart-legend__item--interactive.sc-ds-chart-legend{cursor:pointer}.chart-legend__item.sc-ds-chart-legend>*.sc-ds-chart-legend{position:relative;z-index:2}.chart-legend__swatch-box.sc-ds-chart-legend{width:var(--dimension-size-250);height:var(--dimension-size-250);display:flex;align-items:center;justify-content:center;flex-shrink:0}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0}.chart-legend__label.sc-ds-chart-legend{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chart-legend__percentage.sc-ds-chart-legend{width:100%;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right}.chart-legend__value.sc-ds-chart-legend{width:100%;text-align:right;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}`;const h=.25;const g=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=t(this,"dsItemHover");this.dsItemClick=t(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;this.percentageDecimals=1;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,n)=>{this.dsItemClick.emit({item:e,originalEvent:n})}}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,n)=>e+(n.value??0)),0);const n=this.activeLabel??this.hoveredLabel;return i(s,{key:"207e5b9938cfc17b7b42f46a39e69b8d2e186c5c",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true,"chart-legend--show-percentage":this.showPercentage}},i("ul",{key:"e8e5c882066e6347faf5c83bb19e0699999d9f22",class:"chart-legend__list",onMouseLeave:()=>this.handleHover(null)},this.items.map(((t,s)=>{const r=n!=null&&t.label!==n;const c=t.href?"a":"div";const l=t.value!=null?d(e?t.value/e:0,this.percentageDecimals,this.locale):"";return i("li",{class:"chart-legend__list-item",key:t.label},i(c,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!t.href,"ds-control--md":true,"ds-interaction-fill":true,"ds-focus-ring-inset":!!t.href},style:{opacity:r?String(h):"1"},href:t.href,onClick:t.href?e=>this.handleClick(t,e):undefined,onMouseEnter:()=>this.handleHover(t),onFocus:()=>this.handleHover(t),onBlur:()=>this.handleHover(null)},i("span",{class:"chart-legend__swatch-box"},i("span",{class:"chart-legend__swatch",style:{backgroundColor:t.color??o(s)}})),i("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:t.label},t.label),t.value!=null&&i("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:String(t.value)},a(t.value,this.locale)),t.value!=null&&this.showPercentage&&i("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:l},l)))}))))}static get style(){return l()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],percentageDecimals:[2,"percentage-decimals"],activeLabel:[1,"active-label"],hoveredLabel:[32]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(r(e))){customElements.define(r(e),g)}break;case"ds-text":if(!customElements.get(r(e))){c()}break}}))}v();const f=g;const u=v;export{f as DsChartLegend,u as defineCustomElement};
|
|
1
|
+
import{p as e,H as n,c as t,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as c}from"./p-CZZYGqKz.js";import{f as a}from"./p-BBpASejH.js";function d(e,n=1,t){const i=n===2?2:1;const s=Number.isFinite(e)?e:0;return new Intl.NumberFormat(t,{style:"percent",minimumFractionDigits:i,maximumFractionDigits:i}).format(s)}const l=()=>`.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before,.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before{z-index:1}.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chart-legend-h,.ds-interaction-fill--bordered.sc-ds-chart-legend{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chart-legend-h,.ds-interaction-fill--selected.sc-ds-chart-legend{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chart-legend-h>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill.sc-ds-chart-legend>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill__content.sc-ds-chart-legend{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-chart-legend-h,.ds-interaction-fill--on-faint.sc-ds-chart-legend{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chart-legend-h,.ds-interaction-fill--on-medium.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chart-legend-h,.ds-interaction-fill--on-bold.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chart-legend-h,.ds-interaction-fill--on-strong.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-chart-legend-h,.ds-interaction-fill--on-translucent.sc-ds-chart-legend{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chart-legend-h,.ds-interaction-fill--on-inverted.sc-ds-chart-legend{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chart-legend-h,.ds-interaction-fill--on-media.sc-ds-chart-legend{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chart-legend-h,.ds-interaction-fill--on-always-dark.sc-ds-chart-legend{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chart-legend-h,.ds-interaction-fill--on-navigation.sc-ds-chart-legend{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-chart-legend-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring.sc-ds-chart-legend:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-chart-legend-h{display:block;font-family:var(--typography-font-family);user-select:none}.chart-legend__list.sc-ds-chart-legend{margin:0;padding:0;list-style:none}.chart-legend__list-item.sc-ds-chart-legend{display:contents}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:grid;grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600);column-gap:var(--dimension-space-075);row-gap:var(--dimension-space-050)}.chart-legend--vertical.chart-legend--show-percentage.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex;gap:var(--dimension-space-100)}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}@media (prefers-reduced-motion: reduce){.chart-legend__item.sc-ds-chart-legend{transition:none}}.chart-legend__item--interactive.sc-ds-chart-legend{cursor:pointer}.chart-legend__item.sc-ds-chart-legend>*.sc-ds-chart-legend{position:relative;z-index:2}.chart-legend__swatch-box.sc-ds-chart-legend{width:var(--dimension-size-250);height:var(--dimension-size-250);display:flex;align-items:center;justify-content:center;flex-shrink:0}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0}.chart-legend__label.sc-ds-chart-legend{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chart-legend__percentage.sc-ds-chart-legend{width:100%;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right}.chart-legend__value.sc-ds-chart-legend{width:100%;text-align:right;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}`;const h=.25;const g=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=t(this,"dsItemHover");this.dsItemClick=t(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;this.percentageDecimals=1;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,n)=>{this.dsItemClick.emit({item:e,originalEvent:n})}}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,n)=>e+(n.value??0)),0);const n=this.activeLabel??this.hoveredLabel;return i(s,{key:"897605d8bbabfc669cabab7434b88c4f1cb039ad",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true,"chart-legend--show-percentage":this.showPercentage}},i("ul",{key:"1b4c657d6d7fb192f97c3ed34ce6889fef7ff700",class:"chart-legend__list",onMouseLeave:()=>this.handleHover(null)},this.items.map(((t,s)=>{const r=n!=null&&t.label!==n;const c=t.href?"a":"div";const l=t.value!=null?d(e?t.value/e:0,this.percentageDecimals,this.locale):"";return i("li",{class:"chart-legend__list-item",key:t.label},i(c,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!t.href,"ds-control--md":true,"ds-interaction-fill":true,"ds-focus-ring-inset":!!t.href},style:{opacity:r?String(h):"1"},href:t.href,onClick:t.href?e=>this.handleClick(t,e):undefined,onMouseEnter:()=>this.handleHover(t),onFocus:()=>this.handleHover(t),onBlur:()=>this.handleHover(null)},i("span",{class:"chart-legend__swatch-box"},i("span",{class:"chart-legend__swatch",style:{backgroundColor:t.color??o(s)}})),i("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:t.label},t.label),t.value!=null&&i("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:String(t.value)},a(t.value,this.locale)),t.value!=null&&this.showPercentage&&i("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:l},l)))}))))}static get style(){return l()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],percentageDecimals:[2,"percentage-decimals"],activeLabel:[1,"active-label"],hoveredLabel:[32]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(r(e))){customElements.define(r(e),g)}break;case"ds-text":if(!customElements.get(r(e))){c()}break}}))}v();const f=g;const u=v;export{f as DsChartLegend,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chart-legend.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as n,h as i,a as e,t as s}from"./index.js";import{c as r}from"./p-CMv_7vFs.js";import{m as a,p as o,l as c}from"./p-CzBnvtcz.js";import{w as l,c as h,a as f}from"./p-CrCGIx8s.js";function u(t){this._context=t}u.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._point=0},lineEnd:function(){if(this._line||this._line!==0&&this._point===1)this._context.closePath();this._line=1-this._line},point:function(t,n){t=+t,n=+n;switch(this._point){case 0:this._point=1;this._line?this._context.lineTo(t,n):this._context.moveTo(t,n);break;case 1:this._point=2;default:this._context.lineTo(t,n);break}}};function d(t){return new u(t)}function p(t){return t[0]}function y(t){return t[1]}function m(t,n){var i=h(true),e=null,s=d,r=null,a=l(o);t=typeof t==="function"?t:t===undefined?p:h(t);n=typeof n==="function"?n:n===undefined?y:h(n);function o(o){var c,l=(o=f(o)).length,h,u=false,d;if(e==null)r=s(d=a());for(c=0;c<=l;++c){if(!(c<l&&i(h=o[c],c,o))===u){if(u=!u)r.lineStart();else r.lineEnd()}if(u)r.point(+t(h,c,o),+n(h,c,o))}if(d)return r=null,d+""||null}o.x=function(n){return arguments.length?(t=typeof n==="function"?n:h(+n),o):t};o.y=function(t){return arguments.length?(n=typeof t==="function"?t:h(+t),o):n};o.defined=function(t){return arguments.length?(i=typeof t==="function"?t:h(!!t),o):i};o.curve=function(t){return arguments.length?(s=t,e!=null&&(r=s(e)),o):s};o.context=function(t){return arguments.length?(t==null?e=r=null:r=s(e=t),o):e};return o}const g=()=>`.sc-ds-chart-line-h{display:inline-block;font-family:var(--typography-font-family)}.chart-line__gridline.sc-ds-chart-line{stroke:var(--color-border-tertiary);stroke-width:1}.chart-line__axis-label.sc-ds-chart-line{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.chart-line__path.sc-ds-chart-line{fill:none;stroke-width:2}.chart-line__point.sc-ds-chart-line{stroke:var(--color-background-primary);stroke-width:1.5}`;const
|
|
1
|
+
import{p as t,H as n,h as i,a as e,t as s}from"./index.js";import{c as r}from"./p-CMv_7vFs.js";import{m as a,p as o,l as c}from"./p-CzBnvtcz.js";import{w as l,c as h,a as f}from"./p-CrCGIx8s.js";function u(t){this._context=t}u.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._point=0},lineEnd:function(){if(this._line||this._line!==0&&this._point===1)this._context.closePath();this._line=1-this._line},point:function(t,n){t=+t,n=+n;switch(this._point){case 0:this._point=1;this._line?this._context.lineTo(t,n):this._context.moveTo(t,n);break;case 1:this._point=2;default:this._context.lineTo(t,n);break}}};function d(t){return new u(t)}function p(t){return t[0]}function y(t){return t[1]}function m(t,n){var i=h(true),e=null,s=d,r=null,a=l(o);t=typeof t==="function"?t:t===undefined?p:h(t);n=typeof n==="function"?n:n===undefined?y:h(n);function o(o){var c,l=(o=f(o)).length,h,u=false,d;if(e==null)r=s(d=a());for(c=0;c<=l;++c){if(!(c<l&&i(h=o[c],c,o))===u){if(u=!u)r.lineStart();else r.lineEnd()}if(u)r.point(+t(h,c,o),+n(h,c,o))}if(d)return r=null,d+""||null}o.x=function(n){return arguments.length?(t=typeof n==="function"?n:h(+n),o):t};o.y=function(t){return arguments.length?(n=typeof t==="function"?t:h(+t),o):n};o.defined=function(t){return arguments.length?(i=typeof t==="function"?t:h(!!t),o):i};o.curve=function(t){return arguments.length?(s=t,e!=null&&(r=s(e)),o):s};o.context=function(t){return arguments.length?(t==null?e=r=null:r=s(e=t),o):e};return o}const g=()=>`.sc-ds-chart-line-h{display:inline-block;font-family:var(--typography-font-family)}.chart-line__gridline.sc-ds-chart-line{stroke:var(--color-border-tertiary);stroke-width:1}.chart-line__axis-label.sc-ds-chart-line{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.chart-line__path.sc-ds-chart-line{fill:none;stroke-width:2}.chart-line__point.sc-ds-chart-line{stroke:var(--color-background-primary);stroke-width:1.5}`;const b={top:16,right:16,bottom:24,left:32};const _=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.series=[];this.categories=[];this.width=480;this.height=240;this.showPoints=true}render(){const t=this.width-b.left-b.right;const n=this.height-b.top-b.bottom;const s=this.series.flatMap((t=>t.data));const l=a(s)??0;const h=o().domain(this.categories.map(((t,n)=>n))).range([0,t]);const f=c().domain([0,l||1]).range([n,0]).nice();const u=m().x(((t,n)=>h(n)??0)).y((t=>f(t)));const d=f.ticks(4);return i(e,{key:"9d6eb661cb7b33a2b773bb3255437854e94afc63",class:"chart-line"},i("svg",{key:"a451381883f36f5e06ea9d60bb9da1334c5e3b7b",class:"chart-line__svg",viewBox:`0 0 ${this.width} ${this.height}`,width:this.width,height:this.height,role:"img","aria-label":this.series.map((t=>t.name)).join(", ")},i("g",{key:"f07f47423131c0ae23fa6381af34fe9f50236b78",transform:`translate(${b.left}, ${b.top})`},d.map((n=>i("g",{key:`grid-${n}`,transform:`translate(0, ${f(n)})`},i("line",{class:"chart-line__gridline",x1:0,x2:t}),i("text",{class:"chart-line__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},n)))),this.categories.map(((t,e)=>i("text",{key:`x-${t}`,class:"chart-line__axis-label",x:h(e)??0,y:n+16,"text-anchor":"middle"},t))),this.series.map(((t,n)=>{const e=t.color??r(n);return i("g",{key:t.name},i("path",{class:"chart-line__path",d:u(t.data)??undefined,stroke:e}),this.showPoints&&t.data.map(((n,s)=>i("circle",{key:`${t.name}-${s}`,class:"chart-line__point",cx:h(s)??0,cy:f(n),r:3,fill:e}))))})))))}static get style(){return g()}},[2,"ds-chart-line",{series:[16],categories:[16],width:[2],height:[2],showPoints:[4,"show-points"]}]);function x(){if(typeof customElements==="undefined"){return}const t=["ds-chart-line"];t.forEach((t=>{switch(t){case"ds-chart-line":if(!customElements.get(s(t))){customElements.define(s(t),_)}break}}))}x();const k=_;const v=x;export{k as DsChartLine,v as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chart-line.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{C as o,d as s}from"./p-
|
|
1
|
+
import{C as o,d as s}from"./p-CS12e52R.js";const t=o;const p=s;export{t as DsCheckbox,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-checkbox.js.map
|