@ds-mo/ui 4.0.0 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.build-stamp +1 -1
- package/dist/agent.json +10 -8
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-nav.js.map +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card.js +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-radio-group.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-tab-group-nav.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/p-BzIYKUGO.js +2 -0
- package/dist/components/{p-mNNklnCo.js.map → p-BzIYKUGO.js.map} +1 -1
- package/dist/components/{p-DMD-RO1W.js → p-CCRYQWKy.js} +2 -2
- package/dist/components/{p-BmXUb8VH.js → p-CHcS6Z4V.js} +2 -2
- package/dist/components/{p-BkvLF-hA.js → p-CfwQwstk.js} +2 -2
- package/dist/components/{p-DOEMwKBb.js → p-CvjQuj6A.js} +2 -2
- package/dist/components/{p-oT42N7Zj.js → p-D7SoZNpD.js} +2 -2
- package/dist/components/{p-DDcNrhWb.js → p-DO7y9eZQ.js} +2 -2
- package/dist/components/p-emacH2W5.js +2 -0
- package/dist/components/p-emacH2W5.js.map +1 -0
- package/dist/docs/components.json +22 -8
- package/dist/types/components/Menu/menu-types.d.ts +2 -0
- package/dist/types/components/PanelNav/PanelNav.d.ts +5 -4
- package/dist/types/components/PanelNav/panel-nav-utils.d.ts +2 -0
- package/dist/types/components.d.ts +3 -3
- package/package.json +2 -2
- package/dist/components/p-BOQRM49Q.js +0 -2
- package/dist/components/p-BOQRM49Q.js.map +0 -1
- package/dist/components/p-mNNklnCo.js +0 -2
- /package/dist/components/{p-DMD-RO1W.js.map → p-CCRYQWKy.js.map} +0 -0
- /package/dist/components/{p-BmXUb8VH.js.map → p-CHcS6Z4V.js.map} +0 -0
- /package/dist/components/{p-BkvLF-hA.js.map → p-CfwQwstk.js.map} +0 -0
- /package/dist/components/{p-DOEMwKBb.js.map → p-CvjQuj6A.js.map} +0 -0
- /package/dist/components/{p-oT42N7Zj.js.map → p-D7SoZNpD.js.map} +0 -0
- /package/dist/components/{p-DDcNrhWb.js.map → p-DO7y9eZQ.js.map} +0 -0
package/dist/.build-stamp
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
1783888922028
|
package/dist/agent.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"package": "@ds-mo/ui",
|
|
4
|
-
"packageVersion": "4.
|
|
4
|
+
"packageVersion": "4.1.0",
|
|
5
5
|
"kind": "components",
|
|
6
6
|
"entries": [
|
|
7
7
|
{
|
|
@@ -1434,15 +1434,15 @@
|
|
|
1434
1434
|
"tag": "ds-menu",
|
|
1435
1435
|
"name": "menu",
|
|
1436
1436
|
"title": "Menu",
|
|
1437
|
-
"summary": "Anchored action or option menu with flat items, grouped sections, selection, toggles, and destructive actions.",
|
|
1437
|
+
"summary": "Anchored action or option menu with flat items, grouped sections, selection, supplemental notification dots, toggles, and destructive actions.",
|
|
1438
1438
|
"intentStatus": "complete",
|
|
1439
1439
|
"intent": {
|
|
1440
1440
|
"audience": "general",
|
|
1441
1441
|
"status": "stable",
|
|
1442
|
-
"summary": "Anchored action or option menu with flat items, grouped sections, selection, toggles, and destructive actions.",
|
|
1442
|
+
"summary": "Anchored action or option menu with flat items, grouped sections, selection, supplemental notification dots, toggles, and destructive actions.",
|
|
1443
1443
|
"useWhen": [
|
|
1444
1444
|
"A trigger reveals a short contextual list of commands or options.",
|
|
1445
|
-
"Options need grouping, selected state, toggle rows, or destructive treatment."
|
|
1445
|
+
"Options need grouping, selected state, supplemental notification dots, toggle rows, or destructive treatment."
|
|
1446
1446
|
],
|
|
1447
1447
|
"avoidWhen": [
|
|
1448
1448
|
"The user is selecting a value for a form field.",
|
|
@@ -1469,7 +1469,8 @@
|
|
|
1469
1469
|
"accessibility": [
|
|
1470
1470
|
"Anchor the menu to the control that opens it and return focus to that control when the menu closes.",
|
|
1471
1471
|
"Open with visible initial focus only when the trigger was activated from the keyboard.",
|
|
1472
|
-
"Keep disabled items discoverable only when their unavailable state is meaningful."
|
|
1472
|
+
"Keep disabled items discoverable only when their unavailable state is meaningful.",
|
|
1473
|
+
"Use notification dots only as supplemental status and not as the sole indication of important information."
|
|
1473
1474
|
],
|
|
1474
1475
|
"states": [
|
|
1475
1476
|
"The host owns open state and responds to selection and close events.",
|
|
@@ -1584,6 +1585,7 @@
|
|
|
1584
1585
|
"@ds-mo/tokens"
|
|
1585
1586
|
],
|
|
1586
1587
|
"componentDependencies": [
|
|
1588
|
+
"badge",
|
|
1587
1589
|
"shell-gradient-picker",
|
|
1588
1590
|
"text"
|
|
1589
1591
|
]
|
|
@@ -1767,7 +1769,7 @@
|
|
|
1767
1769
|
"From 768px through 1199px, present PanelNav permanently collapsed and do not allow user expansion.",
|
|
1768
1770
|
"Below 768px, the consuming application replaces PanelNav with a dedicated mobile navigation component; PanelNav does not own mobile navigation.",
|
|
1769
1771
|
"AppShell permanently owns responsive composition: it determines shell mode, enforces tablet collapse, and replaces PanelNav with future mobile navigation below 768px.",
|
|
1770
|
-
"
|
|
1772
|
+
"When the viewport is below breakpoint, PanelNav locks collapsed, disables its header toggle affordance, and preserves the persisted desktop collapse preference.",
|
|
1771
1773
|
"Collapsed presentation must preserve destination ordering, active state, notification status, and accessible names."
|
|
1772
1774
|
],
|
|
1773
1775
|
"frameworkCaveats": {
|
|
@@ -1777,12 +1779,12 @@
|
|
|
1777
1779
|
],
|
|
1778
1780
|
"react": [
|
|
1779
1781
|
"Pass groups as an array through the generated React wrapper and synchronize currentUrl with the host router.",
|
|
1780
|
-
"AppShell owns mobile replacement
|
|
1782
|
+
"AppShell owns mobile replacement; PanelNav enforces its configured breakpoint expansion lock."
|
|
1781
1783
|
],
|
|
1782
1784
|
"angular": [
|
|
1783
1785
|
"Import DsPanelNav from @ds-mo/ui/angular/ds-panel-nav and bind groups as a property.",
|
|
1784
1786
|
"Bind both the nav-style attribute and navStyle property when first-paint route styling must be deterministic.",
|
|
1785
|
-
"AppShell owns mobile replacement
|
|
1787
|
+
"AppShell owns mobile replacement; PanelNav enforces its configured breakpoint expansion lock."
|
|
1786
1788
|
]
|
|
1787
1789
|
},
|
|
1788
1790
|
"references": [
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{B as o,d as s}from"./p-
|
|
1
|
+
import{B as o,d as s}from"./p-CHcS6Z4V.js";const t=o;const c=s;export{t as DsBadge,c as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-badge.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as n,h as t,a as i,t as r}from"./index.js";import{d as a}from"./p-
|
|
1
|
+
import{p as e,H as s,c as n,h as t,a as i,t as r}from"./index.js";import{d as a}from"./p-emacH2W5.js";import{r as o}from"./p-C1cBr-Ri.js";import{T as d}from"./p-drBA73M_.js";const l=()=>`.banner-surface.sc-ds-banner{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--dimension-radius-075)}.banner-header-surface.sc-ds-banner{width:100%;height:var(--dimension-space-100);flex-shrink:0;overflow:hidden;border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary)}.banner-header.sc-ds-banner{width:100%;height:100%;background:repeating-linear-gradient( -45deg, var(--banner-content), var(--banner-content) var(--dimension-size-100), transparent var(--dimension-size-100), transparent var(--dimension-size-200) )}.banner-body.sc-ds-banner{padding:var(--dimension-space-075);min-height:var(--dimension-size-400);display:flex;align-items:flex-start;gap:var(--dimension-space-075)}.banner-message.sc-ds-banner{color:var(--banner-content);flex:1;min-width:0}.banner-dismiss.sc-ds-banner{background:none;border:none;margin:0;padding:var(--dimension-space-025);color:var(--banner-content);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--dimension-radius-050);position:relative;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.banner-dismiss.sc-ds-banner::before{content:'';position:absolute;inset:0;border-radius:inherit;background-color:transparent;transition:var(--effect-transition-interaction-background-short-2, background-color var(--effect-motion-short-2));pointer-events:none}.banner-dismiss.sc-ds-banner:hover::before{background-color:var(--color-interaction-hover)}.banner-dismiss.sc-ds-banner:active::before{background-color:var(--color-interaction-pressed)}.banner-dismiss.sc-ds-banner:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}.floating-position.sc-ds-banner{position:fixed;top:var(--dimension-space-200);left:50%;transform:translateX(-50%);pointer-events:none}.floating-toast.sc-ds-banner{pointer-events:auto;animation:bannerFadeIn var(--effect-motion-short-2, 150ms) forwards}.floating-toast--closing.sc-ds-banner{animation:bannerFadeOut var(--effect-motion-short-3, 200ms) forwards}@keyframes bannerFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes bannerFadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}`;const c=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsDismiss=n(this,"dsDismiss");this.intent="neutral";this.contrast="medium";this.message="";this.header=false;this.floating=false;this.showDismiss=false;this.dismissLabel="Dismiss";this.closing=false;this.dismissTimer=null;this.closeTimer=null}get fadeOutMs(){return o(d.motionShort3,d.animationDurationShort3)}get autoDismissMs(){return o(d.animationDelayLong2,d.animationDelayLong2)}componentDidLoad(){if(this.floating&&this.message)this.scheduleDismiss()}onMessageChange(e){if(this.floating&&e){this.closing=false;this.scheduleDismiss()}}disconnectedCallback(){this.clearTimers()}clearTimers(){if(this.dismissTimer){clearTimeout(this.dismissTimer);this.dismissTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}scheduleDismiss(){this.clearTimers();this.dismissTimer=setTimeout((()=>{this.dismissTimer=null;this.beginClose()}),this.autoDismissMs)}beginClose(){this.clearTimers();if(this.floating){this.closing=true;this.closeTimer=setTimeout((()=>{this.closing=false;this.closeTimer=null;this.dsDismiss.emit()}),this.fadeOutMs)}else{this.dsDismiss.emit()}}getContentColor(){if(this.contrast==="bold")return"var(--color-foreground-on-bold-background-primary)";const e=this.contrast==="faint"?"bold":this.contrast==="medium"?"strong":"medium";return`var(--color-foreground-${e}-${this.intent})`}getBg(){return`var(--color-background-${this.contrast}-${this.intent})`}getElevation(){return this.floating?"var(--effect-elevation-elevated-floating)":"var(--effect-elevation-elevated-sm)"}render(){const e=this.getContentColor();const s=this.intent==="negative";const n=t("div",{class:{"banner-wrapper":true},style:{"--banner-content":e},role:s?"alert":"status","aria-live":s?undefined:"polite"},t("div",{class:"banner-surface",style:{backgroundColor:this.getBg(),boxShadow:this.getElevation()}},this.header&&t("div",{class:"banner-header-surface"},t("div",{class:"banner-header"})),t("div",{class:"banner-body"},t("ds-text",{class:"banner-message",as:"div",variant:"text-body-medium",color:"inherit"},this.message),this.showDismiss&&t("button",{type:"button",class:"banner-dismiss",onClick:()=>this.beginClose(),"aria-label":this.dismissLabel},"×"))));if(this.floating){return t(i,{style:{display:"contents"}},t("div",{class:"floating-position",style:{zIndex:"9998"}},t("div",{class:{"floating-toast":true,"floating-toast--closing":this.closing}},n)))}return t(i,{style:{display:"contents"}},n)}static get watchers(){return{message:[{onMessageChange:0}]}}static get style(){return l()}},[2,"ds-banner",{intent:[1],contrast:[1],message:[1],header:[4],floating:[4],showDismiss:[4,"show-dismiss"],dismissLabel:[1,"dismiss-label"],closing:[32]},undefined,{message:[{onMessageChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-banner","ds-text"];e.forEach((e=>{switch(e){case"ds-banner":if(!customElements.get(r(e))){customElements.define(r(e),c)}break;case"ds-text":if(!customElements.get(r(e))){a()}break}}))}h();const m=c;const f=h;export{m as DsBanner,f as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-banner.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 r}from"./index.js";import{i as a}from"./p-BQq26pt9.js";import{s as o,p as h,d as l}from"./p-BOQnc-M4.js";import{C as c,c as d,a as f,b as u,r as b,d as v}from"./p-BKhG2xrW.js";import{d as p}from"./p-BmXUb8VH.js";import{d as g}from"./p-DDcNrhWb.js";import{d as m}from"./p-9Qu1ls2y.js";import{d as y}from"./p-mNNklnCo.js";import{d as _}from"./p-ORF34W29.js";import{d as w}from"./p-B4gGwfix.js";import{d as C}from"./p-BkvLF-hA.js";import{d as k}from"./p-BOQRM49Q.js";function x(s,t){if(!s)return null;const i=s.shadowRoot??s;return i.querySelector(t)}function T(s){return x(s,'[role="tablist"]')}function F(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,isSelected:n.id===t,isInactive:n.isInactive})}if(e.length>0){i.push({items:e})}return i}function O(s,t){return F(P(s),t)}function M(s,t,i,e=2){const n=s-t;if(i){return n>-e}return n>e}function S(s,t,i,e,n){if(s.length===0||t<=0)return 0;const r=D(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=D(s,t,e,n);if(i>a)break;o=t}return o}function E(s){let t=s.length;while(t>0&&a(s[t-1])){t-=1}return s.slice(0,t)}function P(s){let t=0;while(t<s.length&&a(s[t])){t+=1}return s.slice(t)}function D(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 H=()=>`.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: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{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:focus-visible{outline:none}.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{outline:none}.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))}.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__left.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{flex:1;min-width:0}.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 ds-tab-group-nav.sc-ds-bar-nav{width:max-content}.bar-nav__tabs-visible.sc-ds-bar-nav{width:100%;min-width:0}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--dimension-size-400);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(--dimension-size-400);padding-inline:var(--dimension-space-100);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.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.overflowRovingFocused=false;this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new c;this.panelToolsTransition=new c;this.overflowCoalescer=d((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const t=b(s);if(t==="panel-nav"){this.panelNavTransition.enter();return}if(t==="panel-tools"){const t=v(s)??"opening";if(t==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const t=b(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 hasOverflowTabs(){return this.tabLayoutCommitted&&this.tabsCollapsed&&this.overflowTabs.length>0}digestTabsConfig(s){return s.map((s=>a(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuInitialFocusVisible=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.visibleTabs=[];this.overflowTabs=[]}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,t){if(!s){this.menuOpen=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()}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(o(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(){const s=T(this.probeTabGroupEl);return s?.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=T(this.probeTabGroupEl);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}}}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=S(t.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),t.itemGap,t.listExtraWidth);const r=E(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}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=O(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=x(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}handleTabChange(s){this.selectTab(s.detail)}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.menuOpen=true}handleTabRovingExit(s){if(s.detail!=="end"||!this.hasOverflowTabs)return;this.overflowRovingFocused=true;void this.triggerEl?.setFocus?.()}handleTriggerKeyDown(s){if(!this.hasOverflowTabs)return;if(!this.menuOpen){if(s.key==="ArrowLeft"){s.preventDefault();this.overflowRovingFocused=false;void this.visibleTabGroupEl?.focusLastTab();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?.()}}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:"45953f62cf5186442ddfa968c8def514dee7c0cd"},e("header",{key:"59682cb8771da774a17d9594f48c1f2d04765429",class:{"bar-nav":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:"d91e7697f53be1fa1029252b53241955bed9dee0",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},e("ds-tab-group-nav",{key:`probe-${i}`,ref:s=>{const t=s??null;if(t===this.probeTabGroupEl)return;this.probeTabGroupEl=t;if(t){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue})),t&&this.tabLayoutCommitted&&r.length>0&&e("div",{key:"71cb2382308170d9e11781bc0c724cf64ba2814f",class:"bar-nav__left"},e("ds-tab-group-nav",{key:`visible-${i}`,class:"bar-nav__tabs-visible",ref:s=>{this.visibleTabGroupEl=s??null},tabs:r,value:this.effectiveValue,selectionFollowsFocus:false,rovingEnabled:!this.overflowRovingFocused,onDsChange:s=>this.handleTabChange(s),onDsRovingExit:s=>this.handleTabRovingExit(s),onFocusin:()=>{this.overflowRovingFocused=false}})),t&&!this.tabLayoutCommitted&&e("div",{key:"e25e897e05b895c1e848e9ed5a0592e9b6b45a59",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&e("ds-text",{key:"2a9ad092e34d1e6dc16717e25ab151c45824c94e",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:"59e065e8d3d232d4ce1914e7bdb0bf0ef55fddf6",variant:"icon",class:{"bar-nav__overflow-trigger":true},icon:"Ellipses",isActive:this.menuOpen,activeFill:false,hasBorder:false,focusTabIndex:this.overflowRovingFocused?0:-1,ref:s=>{this.triggerEl=s??null},haspopup:"menu",expanded:this.menuOpen,"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:"3afb7518836c34c61da3c26b4205bd5f0475e7db",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:O(this.overflowTabs,this.effectiveValue),side:"bottom",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:"var(--dimension-space-050)",initialFocusVisible:this.menuInitialFocusVisible,onDsSelect:s=>this.handleMenuSelect(s),onDsClose:()=>this.handleMenuClose()}))}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 H()}},[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],tabLayoutCommitted:[32],visibleTabs:[32],overflowTabs:[32],menuInitialFocusVisible:[32],overflowRovingFocused:[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 L(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled","ds-icon","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-tab-group-nav","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))){p()}break;case"ds-button-unfilled":if(!customElements.get(r(s))){g()}break;case"ds-icon":if(!customElements.get(r(s))){m()}break;case"ds-menu":if(!customElements.get(r(s))){y()}break;case"ds-shell-gradient-picker":if(!customElements.get(r(s))){_()}break;case"ds-shell-gradient-swatch":if(!customElements.get(r(s))){w()}break;case"ds-tab-group-nav":if(!customElements.get(r(s))){C()}break;case"ds-text":if(!customElements.get(r(s))){k()}break}}))}L();const R=j;const V=L;export{R as DsBarNav,V 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}from"./p-BQq26pt9.js";import{s as o,p as h,d as l}from"./p-BOQnc-M4.js";import{C as c,c as d,a as f,b as u,r as b,d as v}from"./p-BKhG2xrW.js";import{d as p}from"./p-CHcS6Z4V.js";import{d as g}from"./p-DO7y9eZQ.js";import{d as m}from"./p-9Qu1ls2y.js";import{d as y}from"./p-BzIYKUGO.js";import{d as w}from"./p-ORF34W29.js";import{d as _}from"./p-B4gGwfix.js";import{d as C}from"./p-CfwQwstk.js";import{d as k}from"./p-emacH2W5.js";function x(s,t){if(!s)return null;const i=s.shadowRoot??s;return i.querySelector(t)}function T(s){return x(s,'[role="tablist"]')}function O(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 F(s,t){return O(P(s),t)}function S(s,t,i,e=2){const n=s-t;if(i){return n>-e}return n>e}function E(s,t,i,e,n){if(s.length===0||t<=0)return 0;const r=D(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=D(s,t,e,n);if(i>a)break;o=t}return o}function M(s){let t=s.length;while(t>0&&a(s[t-1])){t-=1}return s.slice(0,t)}function P(s){let t=0;while(t<s.length&&a(s[t])){t+=1}return s.slice(t)}function D(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 H=()=>`.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: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{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:focus-visible{outline:none}.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{outline:none}.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))}.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__left.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{flex:1;min-width:0}.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 ds-tab-group-nav.sc-ds-bar-nav{width:max-content}.bar-nav__tabs-visible.sc-ds-bar-nav{width:100%;min-width:0}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--dimension-size-400);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(--dimension-size-400);padding-inline:var(--dimension-space-100);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.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.overflowRovingFocused=false;this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new c;this.panelToolsTransition=new c;this.overflowCoalescer=d((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const t=b(s);if(t==="panel-nav"){this.panelNavTransition.enter();return}if(t==="panel-tools"){const t=v(s)??"opening";if(t==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const t=b(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 hasOverflowTabs(){return this.tabLayoutCommitted&&this.tabsCollapsed&&this.overflowTabs.length>0}digestTabsConfig(s){return s.map((s=>a(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuInitialFocusVisible=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.visibleTabs=[];this.overflowTabs=[]}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,t){if(!s){this.menuOpen=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()}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(o(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(){const s=T(this.probeTabGroupEl);return s?.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=T(this.probeTabGroupEl);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}}}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=S(i,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!e){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const n=E(t.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),t.itemGap,t.listExtraWidth);const r=M(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}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=F(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=x(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}handleTabChange(s){this.selectTab(s.detail)}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.menuOpen=true}handleTabRovingExit(s){if(s.detail!=="end"||!this.hasOverflowTabs)return;this.overflowRovingFocused=true;void this.triggerEl?.setFocus?.()}handleTriggerKeyDown(s){if(!this.hasOverflowTabs)return;if(!this.menuOpen){if(s.key==="ArrowLeft"){s.preventDefault();this.overflowRovingFocused=false;void this.visibleTabGroupEl?.focusLastTab();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?.()}}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:"45953f62cf5186442ddfa968c8def514dee7c0cd"},e("header",{key:"59682cb8771da774a17d9594f48c1f2d04765429",class:{"bar-nav":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:"d91e7697f53be1fa1029252b53241955bed9dee0",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},e("ds-tab-group-nav",{key:`probe-${i}`,ref:s=>{const t=s??null;if(t===this.probeTabGroupEl)return;this.probeTabGroupEl=t;if(t){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue})),t&&this.tabLayoutCommitted&&r.length>0&&e("div",{key:"71cb2382308170d9e11781bc0c724cf64ba2814f",class:"bar-nav__left"},e("ds-tab-group-nav",{key:`visible-${i}`,class:"bar-nav__tabs-visible",ref:s=>{this.visibleTabGroupEl=s??null},tabs:r,value:this.effectiveValue,selectionFollowsFocus:false,rovingEnabled:!this.overflowRovingFocused,onDsChange:s=>this.handleTabChange(s),onDsRovingExit:s=>this.handleTabRovingExit(s),onFocusin:()=>{this.overflowRovingFocused=false}})),t&&!this.tabLayoutCommitted&&e("div",{key:"e25e897e05b895c1e848e9ed5a0592e9b6b45a59",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&e("ds-text",{key:"2a9ad092e34d1e6dc16717e25ab151c45824c94e",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:"59e065e8d3d232d4ce1914e7bdb0bf0ef55fddf6",variant:"icon",class:{"bar-nav__overflow-trigger":true},icon:"Ellipses",isActive:this.menuOpen,activeFill:false,hasBorder:false,focusTabIndex:this.overflowRovingFocused?0:-1,ref:s=>{this.triggerEl=s??null},haspopup:"menu",expanded:this.menuOpen,"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:"3afb7518836c34c61da3c26b4205bd5f0475e7db",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:F(this.overflowTabs,this.effectiveValue),side:"bottom",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:"var(--dimension-space-050)",initialFocusVisible:this.menuInitialFocusVisible,onDsSelect:s=>this.handleMenuSelect(s),onDsClose:()=>this.handleMenuClose()}))}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 H()}},[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],tabLayoutCommitted:[32],visibleTabs:[32],overflowTabs:[32],menuInitialFocusVisible:[32],overflowRovingFocused:[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 L(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled","ds-icon","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-tab-group-nav","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))){p()}break;case"ds-button-unfilled":if(!customElements.get(r(s))){g()}break;case"ds-icon":if(!customElements.get(r(s))){m()}break;case"ds-menu":if(!customElements.get(r(s))){y()}break;case"ds-shell-gradient-picker":if(!customElements.get(r(s))){w()}break;case"ds-shell-gradient-swatch":if(!customElements.get(r(s))){_()}break;case"ds-tab-group-nav":if(!customElements.get(r(s))){C()}break;case"ds-text":if(!customElements.get(r(s))){k()}break}}))}L();const V=j;const R=L;export{V as DsBarNav,R as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-bar-nav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["queryWithinComponentHost","host","selector","root","shadowRoot","querySelector","getTabListFromTabGroup","tabGroupEl","tabsToMenuSections","tabs","selectedId","sections","batch","item","isTabDivider","length","push","items","label","value","id","isSelected","isInactive","tabsToOverflowMenuSections","trimLeadingDividers","tabsOverflowContainer","tabListScrollWidth","containerClientWidth","collapsed","hysteresis","diff","visibleTabCountForWidth","itemWidths","availableWidth","overflowTriggerWidth","itemGap","listExtraWidth","fullWidth","widthForItemCount","availableForTabs","Math","max","count","i","width","trimTrailingDividers","end","slice","start","itemsWidth","reduce","sum","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","tabsJson","basePath","currentUrl","moreTabsLabel","resolvedTabs","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","tabLayoutCommitted","visibleTabs","overflowTabs","menuInitialFocusVisible","overflowRovingFocused","headerEl","triggerEl","menuEl","visibleTabGroupEl","probeTabGroupEl","resizeObserver","intrinsicWidthRetryCount","tabLayoutPendingFrames","panelNavTransition","ChromeTransitionGate","panelToolsTransition","overflowCoalescer","createRafCoalescer","updateTabsCollapsed","chromeTransitionShell","committedSection","pendingSection","onChromeTransitionStart","event","source","readChromeTransitionSource","enter","phase","readChromeTransitionPhase","onChromeTransitionEnd","exit","isActive","scheduleOverflowCheck","handleOverflowFocus","handleOverflowBlur","effectiveValue","hasOverflowTabs","digestTabsConfig","map","t","join","resetTabOverflowLayout","onHostPropsChange","applyHostProps","onSelectionChange","syncMenuSections","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","requestAnimationFrame","undefined","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","bindChromeTransitionListeners","componentDidRender","chromeOverflowPaused","syncMenuAnchor","disconnectedCallback","disconnect","cancel","unbindChromeTransitionListeners","shell","el","closest","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","removeEventListener","shouldResyncBarNavProps","syncValueFromUrl","remaining","HOST_PROP_SYNC_BUDGET","tick","ResizeObserver","observe","schedule","getLeftZoneAvailableWidth","headerStyle","getComputedStyle","horizontalPadding","parseFloat","paddingLeft","paddingRight","clientWidth","getTabsIntrinsicWidth","tabList","scrollWidth","getHeaderGap","style","columnGap","gap","getOverflowTriggerReserveWidth","getBoundingClientRect","getProbeTabMetrics","children","Array","from","child","some","childrenWidth","gapWidth","setOverflowTabLayout","nextCollapsed","visibleChanged","overflowChanged","scheduleIntrinsicWidthRetry","INTRINSIC_WIDTH_RETRY_MAX","forceTabLayoutCommit","fallbackCollapsed","metrics","intrinsicWidth","TAB_LAYOUT_COMMIT_MAX_FRAMES","shouldCollapse","OVERFLOW_HYSTERESIS_PX","visibleCount","anchor","handleMenuSelect","e","detail","selectTab","String","handleMenuClose","incomingTabs","parseJsonArrayProp","nextBasePath","sectionChanged","startsWith","tabsConfigChanged","hideTabs","deriveBarNavValueFromUrl","dsTabChange","emit","tab","focus","preventScroll","handleTabChange","toggleTabMenu","options","minWidth","focusVisible","handleTabRovingExit","setFocus","handleTriggerKeyDown","key","preventDefault","focusLastTab","render","sectionReady","hasTabs","tabGroupKey","renderedTabs","h","Host","class","ref","inert","next","selectionFollowsFocus","rovingEnabled","onDsChange","onDsRovingExit","onFocusin","heading","as","variant","emphasis","color","wrap","icon","activeFill","hasBorder","focusTabIndex","haspopup","expanded","onDsClick","onFocusout","onKeyDown","side","align","sideOffset","alignOffset","initialFocusVisible","onDsSelect","onDsClose"],"sources":["src/wc/components/BarNav/bar-nav-dom-utils.ts","src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts","src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":["export type QueryableHost = {\n shadowRoot?: ShadowRoot | null;\n querySelector: (selectors: string) => Element | null;\n};\n\n/**\n * Query within a Stencil custom-element host (light DOM today, shadow DOM–safe).\n * Use for child nodes owned by ds-tab-group and similar components.\n */\nexport function queryWithinComponentHost(\n host: QueryableHost | null | undefined,\n selector: string,\n): HTMLElement | null {\n if (!host) return null;\n const root = host.shadowRoot ?? host;\n return root.querySelector(selector) as HTMLElement | null;\n}\n\nexport function getTabListFromTabGroup(\n tabGroupEl: QueryableHost | null | undefined,\n): HTMLElement | null {\n return queryWithinComponentHost(tabGroupEl, '[role=\"tablist\"]');\n}\n","import type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\n/** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */\nexport function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n const sections: MenuSection[] = [];\n let batch: MenuItemData[] = [];\n\n for (const item of tabs) {\n if (isTabDivider(item)) {\n if (batch.length > 0) {\n sections.push({ items: batch });\n batch = [];\n }\n continue;\n }\n\n batch.push({\n label: item.label,\n value: item.id,\n isSelected: item.id === selectedId,\n isInactive: item.isInactive,\n });\n }\n\n if (batch.length > 0) {\n sections.push({ items: batch });\n }\n\n return sections;\n}\n\nexport function tabsToOverflowMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n return tabsToMenuSections(trimLeadingDividers(tabs), selectedId);\n}\n\nexport function getActiveTab(tabs: TabItem[], selectedId: string): TabItemTab | undefined {\n const selectable = getSelectableTabs(tabs);\n return selectable.find(tab => tab.id === selectedId) ?? selectable[0];\n}\n\nexport function getActiveTabLabel(tabs: TabItem[], selectedId: string): string {\n return getActiveTab(tabs, selectedId)?.label ?? 'Tabs';\n}\n\n/** True when tablist content exceeds the available width (with optional hysteresis). */\nexport function tabsOverflowContainer(\n tabListScrollWidth: number,\n containerClientWidth: number,\n collapsed: boolean,\n hysteresis = 2,\n): boolean {\n const diff = tabListScrollWidth - containerClientWidth;\n if (collapsed) {\n return diff > -hysteresis;\n }\n return diff > hysteresis;\n}\n\nexport function visibleTabCountForWidth(\n itemWidths: number[],\n availableWidth: number,\n overflowTriggerWidth: number,\n itemGap: number,\n listExtraWidth: number,\n): number {\n if (itemWidths.length === 0 || availableWidth <= 0) return 0;\n\n const fullWidth = widthForItemCount(itemWidths, itemWidths.length, itemGap, listExtraWidth);\n if (fullWidth <= availableWidth) return itemWidths.length;\n\n const availableForTabs = Math.max(0, availableWidth - overflowTriggerWidth);\n let count = 0;\n\n for (let i = 1; i <= itemWidths.length; i++) {\n const width = widthForItemCount(itemWidths, i, itemGap, listExtraWidth);\n if (width > availableForTabs) break;\n count = i;\n }\n\n return count;\n}\n\nexport function trimTrailingDividers(tabs: TabItem[]): TabItem[] {\n let end = tabs.length;\n while (end > 0 && isTabDivider(tabs[end - 1])) {\n end -= 1;\n }\n return tabs.slice(0, end);\n}\n\nfunction trimLeadingDividers(tabs: TabItem[]): TabItem[] {\n let start = 0;\n while (start < tabs.length && isTabDivider(tabs[start])) {\n start += 1;\n }\n return tabs.slice(start);\n}\n\nfunction widthForItemCount(\n itemWidths: number[],\n count: number,\n itemGap: number,\n listExtraWidth: number,\n): number {\n if (count <= 0) return 0;\n const itemsWidth = itemWidths.slice(0, count).reduce((sum, width) => sum + width, 0);\n return listExtraWidth + itemsWidth + itemGap * Math.max(0, count - 1);\n}\n","@import '../../utils/focus-ring.css';\n\n:host {\n display: block;\n}\n\n.bar-nav {\n display: flex;\n align-items: center;\n position: relative;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n gap: var(--dimension-space-100);\n box-sizing: border-box;\n border-bottom: var(--dimension-stroke-width-012) solid var(--_bar-nav-border);\n background-color: var(--_bar-nav-bg);\n color: var(--_bar-nav-fg-primary);\n -webkit-user-select: none;\n user-select: none;\n overflow: hidden;\n transition:\n background-color var(--effect-motion-short-3),\n border-color var(--effect-motion-short-3),\n color var(--effect-motion-short-3);\n isolation: isolate;\n /* Default chrome — app surfaces */\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n --ds-focus-ring-color: var(--_bar-nav-focus);\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers later. */\n.bar-nav--dashboard,\n.bar-nav--settings {\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Shell-owned chrome (bg + wash) — bar is a transparent frame. */\n:host-context(ds-app-shell:not([gradient-preset='none'])) .bar-nav {\n background-color: transparent;\n}\n\n.bar-nav > :not(.bar-nav__tabs-probe) {\n position: relative;\n z-index: 3;\n}\n\n/* Overflow — keep fitting tabs visible and pin the overflow trigger to the far edge. */\n.bar-nav--tabs-collapsed {\n display: flex;\n gap: var(--dimension-space-100);\n align-items: center;\n}\n\n/* Expanded tabs — consume full header width */\n.bar-nav__left {\n position: relative;\n flex: 1 1 0%;\n min-width: 0;\n width: 0;\n display: flex;\n align-items: center;\n}\n\n.bar-nav__left ds-tab-group-nav {\n flex: 1;\n min-width: 0;\n}\n\n/* Unconstrained width so intrinsic tab row width is measurable while collapsed */\n.bar-nav__tabs-probe {\n position: absolute;\n left: 0;\n top: 0;\n visibility: hidden;\n pointer-events: none;\n overflow: visible;\n width: max-content;\n max-width: none;\n z-index: -1;\n}\n\n.bar-nav__tabs-probe ds-tab-group-nav {\n width: max-content;\n}\n\n.bar-nav__tabs-visible {\n width: 100%;\n min-width: 0;\n}\n\n/* In-flow placeholder while measuring overflow — avoids layout jump; hidden from view/accessibility. */\n.bar-nav__tabs-pending {\n flex: 1;\n min-width: 0;\n height: var(--dimension-size-400);\n visibility: hidden;\n pointer-events: none;\n}\n\n/* Overflow trigger — compact icon button aligned to the right edge. */\n.bar-nav__overflow-trigger {\n margin-left: auto;\n --ds-button-unfilled-fg: var(--_bar-nav-fg-secondary);\n --ds-button-unfilled-fg-active: var(--_bar-nav-fg-primary);\n --ds-interaction-hover: var(--_bar-nav-hover);\n --ds-interaction-pressed: var(--_bar-nav-pressed);\n --ds-focus-ring-color: var(--_bar-nav-focus);\n}\n\n/* Fallback heading when no tabs — matches a single (selected) tab so the area\n name shares the tab label's type token, color, height and horizontal inset.\n Inset = tab button padding (space-075, 6px) + label inset (space-025, 2px).\n Color comes from ds-text color=\"primary\"; beat Text's inline-box display. */\nds-text.bar-nav__heading {\n display: inline-flex;\n align-items: center;\n height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-user-select: none;\n user-select: none;\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n Element,\n Watch,\n State,\n h,\n Host,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport { isTabDivider } from '../TabGroup/tab-item-utils';\nimport type { BarNavTab } from './bar-nav-types';\nimport {\n deriveBarNavValueFromUrl,\n parseJsonArrayProp,\n shouldResyncBarNavProps,\n} from './bar-nav-utils';\nimport {\n getTabListFromTabGroup,\n queryWithinComponentHost,\n type QueryableHost,\n} from './bar-nav-dom-utils';\nimport {\n tabsOverflowContainer,\n tabsToOverflowMenuSections,\n trimTrailingDividers,\n visibleTabCountForWidth,\n} from './bar-nav-tabs-menu-utils';\nimport {\n CHROME_TRANSITION_END,\n CHROME_TRANSITION_START,\n ChromeTransitionGate,\n createRafCoalescer,\n readChromeTransitionSource,\n readChromeTransitionPhase,\n} from '../../nav/chrome-transition';\n\n@Component({\n tag: 'ds-bar-nav',\n styleUrl: 'BarNav.css',\n scoped: true,\n})\nexport class BarNav {\n /** Style slot: `dashboard` or `settings`. Colors match for now. */\n @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n @Element() el!: HTMLElement;\n\n /**\n * Tab items for the left section.\n * Set via JS property: `el.tabs = [...]`. Replace the array reference to update.\n */\n @Prop() tabs: BarNavTab[] = [];\n\n /** JSON fallback for `tabs` — useful when framework bindings don't propagate arrays. */\n @Prop({ attribute: 'tabs-json' }) tabsJson: string = '';\n\n /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Fallback heading shown when no tabs are provided.\n * When tabs are present the heading is hidden.\n */\n @Prop() heading: string | undefined;\n\n /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */\n @Prop() basePath: string = '';\n\n /** Current route URL. When set with `basePath`, the active tab is derived automatically. */\n @Prop() currentUrl: string = '';\n @Prop() moreTabsLabel: string = 'More tabs';\n\n /** Emitted when the active tab changes. Detail = tab id. */\n @Event() dsTabChange!: EventEmitter<string>;\n\n @State() private resolvedTabs: BarNavTab[] = [];\n @State() private urlDerivedValue: string = '';\n @State() private hideTabsForDetailRoute = false;\n @State() private tabsCollapsed = false;\n @State() private menuOpen = false;\n /** When false, defer showing expanded tabs or the collapsed trigger until intrinsic width is measured (avoids a one-frame flash of the full tab row on narrow viewports). */\n @State() private tabLayoutCommitted = false;\n @State() private visibleTabs: BarNavTab[] = [];\n @State() private overflowTabs: BarNavTab[] = [];\n @State() private menuInitialFocusVisible = false;\n @State() private overflowRovingFocused = false;\n\n private static readonly HOST_PROP_SYNC_BUDGET = 8;\n private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n private static readonly TAB_LAYOUT_COMMIT_MAX_FRAMES = 16;\n private static readonly OVERFLOW_HYSTERESIS_PX = 8;\n\n private headerEl: HTMLElement | null = null;\n private triggerEl: (HTMLElement & { setFocus?: () => Promise<void> }) | null = null;\n private menuEl: HTMLDsMenuElement | null = null;\n private visibleTabGroupEl: HTMLDsTabGroupNavElement | null = null;\n private probeTabGroupEl: QueryableHost | null = null;\n private resizeObserver: ResizeObserver | null = null;\n private intrinsicWidthRetryCount = 0;\n private tabLayoutPendingFrames = 0;\n private readonly panelNavTransition = new ChromeTransitionGate();\n private readonly panelToolsTransition = new ChromeTransitionGate();\n private readonly overflowCoalescer = createRafCoalescer(() => {\n this.updateTabsCollapsed();\n });\n private chromeTransitionShell: HTMLElement | null = null;\n /** Matches `basePath` once tabs + URL are reconciled for the active section. */\n @State() private committedSection = '';\n /** Section waiting for URL + tabs to catch up after a cross-area navigation. */\n @State() private pendingSection = '';\n\n private get effectiveValue(): string {\n if (this.currentUrl && this.basePath) {\n return this.urlDerivedValue;\n }\n return this.value;\n }\n\n private get hasOverflowTabs(): boolean {\n return this.tabLayoutCommitted && this.tabsCollapsed && this.overflowTabs.length > 0;\n }\n\n private digestTabsConfig(tabs: BarNavTab[]): string {\n return tabs.map(t => (isTabDivider(t) ? '|' : t.id)).join(',');\n }\n\n private resetTabOverflowLayout() {\n this.tabLayoutCommitted = false;\n this.tabsCollapsed = false;\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.visibleTabs = [];\n this.overflowTabs = [];\n }\n\n @Watch('tabs')\n @Watch('tabsJson')\n @Watch('currentUrl')\n @Watch('basePath')\n onHostPropsChange() {\n this.applyHostProps();\n }\n\n @Watch('value')\n @Watch('urlDerivedValue')\n onSelectionChange() {\n this.syncMenuSections();\n this.scheduleOverflowCheck();\n }\n\n @Watch('menuOpen')\n onMenuOpenChange(open: boolean) {\n if (this.menuEl) {\n this.menuEl.open = open;\n }\n }\n\n @Watch('tabsCollapsed')\n onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n if (!collapsed) {\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n this.menuEl = null;\n }\n this.scheduleOverflowCheck();\n if (collapsed) {\n requestAnimationFrame(() => {\n this.scheduleOverflowCheck();\n });\n }\n if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n queueMicrotask(() => this.focusVisibleSelectedTab());\n }\n\n componentWillLoad() {\n this.applyHostProps();\n }\n\n componentDidLoad() {\n this.syncHostPropsIfNeeded();\n this.scheduleDeferredHostPropSync();\n this.setupOverflowObserver();\n this.bindChromeTransitionListeners();\n this.scheduleOverflowCheck();\n }\n\n componentDidRender() {\n if (this.chromeOverflowPaused()) {\n this.syncMenuAnchor();\n return;\n }\n this.scheduleOverflowCheck();\n this.syncMenuAnchor();\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.overflowCoalescer.cancel();\n this.unbindChromeTransitionListeners();\n }\n\n private bindChromeTransitionListeners() {\n const shell = this.el.closest('ds-app-shell');\n if (!shell) return;\n this.chromeTransitionShell = shell;\n shell.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n shell.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n }\n\n private unbindChromeTransitionListeners() {\n if (!this.chromeTransitionShell) return;\n this.chromeTransitionShell.removeEventListener(\n CHROME_TRANSITION_START,\n this.onChromeTransitionStart,\n );\n this.chromeTransitionShell.removeEventListener(\n CHROME_TRANSITION_END,\n this.onChromeTransitionEnd,\n );\n this.chromeTransitionShell = null;\n }\n\n private onChromeTransitionStart = (event: Event) => {\n const source = readChromeTransitionSource(event);\n if (source === 'panel-nav') {\n this.panelNavTransition.enter();\n return;\n }\n if (source === 'panel-tools') {\n const phase = readChromeTransitionPhase(event) ?? 'opening';\n if (phase === 'closing') {\n this.panelToolsTransition.enter();\n }\n }\n };\n\n private chromeOverflowPaused(): boolean {\n return this.panelNavTransition.isActive || this.panelToolsTransition.isActive;\n }\n\n private onChromeTransitionEnd = (event: Event) => {\n const source = readChromeTransitionSource(event);\n if (source === 'panel-nav') {\n this.panelNavTransition.exit();\n if (!this.panelNavTransition.isActive) {\n this.scheduleOverflowCheck();\n }\n return;\n }\n if (source === 'panel-tools') {\n this.panelToolsTransition.exit();\n this.scheduleOverflowCheck();\n }\n };\n\n /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n private syncHostPropsIfNeeded() {\n if (shouldResyncBarNavProps(this.resolvedTabs, this.tabs, this.tabsJson)) {\n this.applyHostProps();\n } else if (this.currentUrl && this.basePath) {\n this.syncValueFromUrl();\n }\n }\n\n /** Poll across animation frames — host props may land without triggering @Watch. */\n private scheduleDeferredHostPropSync() {\n let remaining = BarNav.HOST_PROP_SYNC_BUDGET;\n const tick = () => {\n this.syncHostPropsIfNeeded();\n if (--remaining > 0) {\n requestAnimationFrame(tick);\n }\n };\n queueMicrotask(tick);\n }\n\n private setupOverflowObserver() {\n if (typeof ResizeObserver === 'undefined' || !this.headerEl) return;\n this.resizeObserver?.disconnect();\n this.resizeObserver = new ResizeObserver(() => {\n if (this.chromeOverflowPaused()) return;\n this.scheduleOverflowCheck();\n });\n this.resizeObserver.observe(this.headerEl);\n }\n\n private scheduleOverflowCheck() {\n if (this.chromeOverflowPaused()) return;\n this.overflowCoalescer.schedule();\n }\n\n /** Width available for the tab row or collapsed trigger. */\n private getLeftZoneAvailableWidth(): number {\n if (!this.headerEl) return 0;\n\n const headerStyle = getComputedStyle(this.headerEl);\n const horizontalPadding =\n (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);\n\n return Math.max(0, this.headerEl.clientWidth - horizontalPadding);\n }\n\n private getTabsIntrinsicWidth(): number {\n const tabList = getTabListFromTabGroup(this.probeTabGroupEl);\n return tabList?.scrollWidth ?? 0;\n }\n\n private getHeaderGap(): number {\n if (!this.headerEl) return 0;\n const style = getComputedStyle(this.headerEl);\n return parseFloat(style.columnGap || style.gap) || 0;\n }\n\n private getOverflowTriggerReserveWidth(): number {\n if (!this.triggerEl) {\n return 40;\n }\n return this.triggerEl.getBoundingClientRect().width + this.getHeaderGap();\n }\n\n private getProbeTabMetrics():\n | {\n itemWidths: number[];\n itemGap: number;\n listExtraWidth: number;\n }\n | null {\n const tabList = getTabListFromTabGroup(this.probeTabGroupEl);\n if (!tabList) return null;\n\n const children = Array.from(tabList.children) as HTMLElement[];\n const itemWidths = children.map(child => child.getBoundingClientRect().width);\n if (itemWidths.length === 0 || itemWidths.some(width => width === 0)) return null;\n\n const style = getComputedStyle(tabList);\n const itemGap = parseFloat(style.columnGap || style.gap) || 0;\n const childrenWidth = itemWidths.reduce((sum, width) => sum + width, 0);\n const gapWidth = itemGap * Math.max(0, itemWidths.length - 1);\n const listExtraWidth = Math.max(0, tabList.scrollWidth - childrenWidth - gapWidth);\n\n return { itemWidths, itemGap, listExtraWidth };\n }\n\n private setOverflowTabLayout(visibleTabs: BarNavTab[], overflowTabs: BarNavTab[]) {\n const nextCollapsed = overflowTabs.length > 0;\n const visibleChanged =\n this.digestTabsConfig(visibleTabs) !== this.digestTabsConfig(this.visibleTabs);\n const overflowChanged =\n this.digestTabsConfig(overflowTabs) !== this.digestTabsConfig(this.overflowTabs);\n\n if (visibleChanged) {\n this.visibleTabs = visibleTabs;\n }\n if (overflowChanged) {\n this.overflowTabs = overflowTabs;\n }\n if (nextCollapsed !== this.tabsCollapsed) {\n this.tabsCollapsed = nextCollapsed;\n if (!nextCollapsed) {\n this.menuOpen = false;\n }\n }\n }\n\n private scheduleIntrinsicWidthRetry() {\n if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) return;\n this.intrinsicWidthRetryCount++;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n }\n\n private forceTabLayoutCommit(fallbackCollapsed: boolean) {\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.setOverflowTabLayout(\n fallbackCollapsed ? [] : this.resolvedTabs,\n fallbackCollapsed ? this.resolvedTabs : [],\n );\n this.tabLayoutCommitted = true;\n }\n\n private updateTabsCollapsed() {\n if (!this.headerEl || this.resolvedTabs.length === 0 || this.hideTabsForDetailRoute) {\n if (this.tabsCollapsed) {\n this.setOverflowTabLayout([], []);\n }\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.tabLayoutCommitted = true;\n return;\n }\n\n const metrics = this.getProbeTabMetrics();\n const intrinsicWidth = this.getTabsIntrinsicWidth();\n if (!metrics || intrinsicWidth === 0) {\n this.tabLayoutPendingFrames += 1;\n if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) {\n this.forceTabLayoutCommit(false);\n } else if (this.tabLayoutPendingFrames >= BarNav.TAB_LAYOUT_COMMIT_MAX_FRAMES) {\n this.forceTabLayoutCommit(false);\n } else {\n this.scheduleIntrinsicWidthRetry();\n }\n return;\n }\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n\n const shouldCollapse = tabsOverflowContainer(\n intrinsicWidth,\n this.getLeftZoneAvailableWidth(),\n this.tabsCollapsed,\n BarNav.OVERFLOW_HYSTERESIS_PX,\n );\n\n if (!shouldCollapse) {\n this.setOverflowTabLayout(this.resolvedTabs, []);\n this.tabLayoutCommitted = true;\n return;\n }\n\n const visibleCount = visibleTabCountForWidth(\n metrics.itemWidths,\n this.getLeftZoneAvailableWidth(),\n this.getOverflowTriggerReserveWidth(),\n metrics.itemGap,\n metrics.listExtraWidth,\n );\n const visibleTabs = trimTrailingDividers(this.resolvedTabs.slice(0, visibleCount));\n const overflowTabs = this.resolvedTabs.slice(visibleTabs.length);\n this.setOverflowTabLayout(visibleTabs, overflowTabs);\n this.tabLayoutCommitted = true;\n }\n\n private syncMenuAnchor() {\n if (!this.menuEl || !this.triggerEl || !this.hasOverflowTabs) return;\n this.menuEl.anchor = this.triggerEl;\n this.syncMenuSections();\n }\n\n private handleMenuSelect(e: Event) {\n const detail = (e as CustomEvent<MenuItemData>).detail;\n if (detail?.value !== undefined) {\n this.selectTab(String(detail.value));\n }\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n }\n\n private handleMenuClose() {\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n }\n\n /** Batch tabs/basePath/currentUrl updates so URL derivation never runs with a mixed section. */\n private incomingTabs(): BarNavTab[] {\n return this.tabsJson\n ? parseJsonArrayProp(this.tabsJson, [])\n : (this.tabs ?? []);\n }\n\n private applyHostProps() {\n const nextBasePath = this.basePath;\n const sectionChanged =\n nextBasePath !== '' &&\n this.committedSection !== '' &&\n nextBasePath !== this.committedSection;\n\n if (sectionChanged) {\n this.urlDerivedValue = '';\n this.committedSection = '';\n this.pendingSection = nextBasePath;\n this.resolvedTabs = [];\n this.resetTabOverflowLayout();\n return;\n }\n\n if (this.pendingSection) {\n if (!nextBasePath || nextBasePath !== this.pendingSection) {\n return;\n }\n if (!this.currentUrl.startsWith(this.pendingSection)) {\n return;\n }\n const tabs = this.incomingTabs();\n if (tabs.length === 0) {\n return;\n }\n this.pendingSection = '';\n }\n\n const tabs = this.incomingTabs();\n const tabsConfigChanged =\n this.digestTabsConfig(tabs) !== this.digestTabsConfig(this.resolvedTabs);\n\n this.resolvedTabs = tabs;\n this.syncValueFromUrl();\n this.committedSection = nextBasePath;\n if (tabsConfigChanged) {\n this.resetTabOverflowLayout();\n }\n this.scheduleOverflowCheck();\n }\n\n private syncMenuSections() {\n if (!this.menuEl) return;\n this.menuEl.sections = tabsToOverflowMenuSections(this.overflowTabs, this.effectiveValue);\n }\n\n private syncValueFromUrl() {\n const tabs = this.incomingTabs();\n\n if (!this.currentUrl || !this.basePath) {\n this.urlDerivedValue = '';\n this.hideTabsForDetailRoute = false;\n return;\n }\n\n if (!this.currentUrl.startsWith(this.basePath)) {\n this.urlDerivedValue = '';\n this.hideTabsForDetailRoute = false;\n return;\n }\n\n const { value, hideTabs } = deriveBarNavValueFromUrl(\n this.currentUrl,\n this.basePath,\n tabs,\n );\n this.urlDerivedValue = value;\n this.hideTabsForDetailRoute = hideTabs;\n }\n\n private selectTab(id: string) {\n this.value = id;\n this.dsTabChange.emit(id);\n }\n\n /** Move focus to the selected tab in the visible tab group (after expand). */\n private focusVisibleSelectedTab() {\n const tab = queryWithinComponentHost(\n this.visibleTabGroupEl,\n `[data-tab-id=\"${this.effectiveValue}\"]`,\n );\n tab?.focus({ preventScroll: true });\n }\n\n private handleTabChange(e: Event) {\n this.selectTab((e as CustomEvent<string>).detail);\n }\n\n private toggleTabMenu(options?: { focusVisible?: boolean }) {\n if (this.menuOpen) {\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n return;\n }\n\n if (this.menuEl && this.triggerEl) {\n this.menuEl.anchor = this.triggerEl;\n this.menuEl.minWidth = '';\n this.syncMenuSections();\n }\n\n this.menuInitialFocusVisible = options?.focusVisible ?? false;\n this.menuOpen = true;\n }\n\n private handleTabRovingExit(e: CustomEvent<'start' | 'end'>) {\n if (e.detail !== 'end' || !this.hasOverflowTabs) return;\n this.overflowRovingFocused = true;\n void this.triggerEl?.setFocus?.();\n }\n\n private handleOverflowFocus = () => {\n this.overflowRovingFocused = true;\n };\n\n private handleOverflowBlur = () => {\n this.overflowRovingFocused = false;\n };\n\n private handleTriggerKeyDown(e: KeyboardEvent) {\n if (!this.hasOverflowTabs) return;\n\n if (!this.menuOpen) {\n if (e.key === 'ArrowLeft') {\n e.preventDefault();\n this.overflowRovingFocused = false;\n void this.visibleTabGroupEl?.focusLastTab();\n return;\n }\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.toggleTabMenu({ focusVisible: true });\n }\n return;\n }\n\n if (e.key === 'Escape') {\n e.preventDefault();\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n void this.triggerEl?.setFocus?.();\n }\n }\n\n render() {\n // Section gating only applies when `basePath` is set (SPA section sync).\n // Tabs without a base path must still render — otherwise a single-tab bar\n // (or any non-routed tabs) silently falls through to an empty header.\n const sectionReady =\n this.basePath === '' || this.committedSection === this.basePath;\n const hasTabs =\n sectionReady && this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n const tabGroupKey = this.basePath || 'no-section';\n const renderedTabs = this.hasOverflowTabs ? this.visibleTabs : this.resolvedTabs;\n\n return (\n <Host>\n <header\n class={{\n 'bar-nav': true,\n 'bar-nav--dashboard': this.navStyle === 'dashboard',\n 'bar-nav--settings': this.navStyle === 'settings',\n 'bar-nav--tabs-collapsed':\n hasTabs && this.hasOverflowTabs,\n }}\n ref={el => {\n this.headerEl = el as HTMLElement;\n if (el && !this.resizeObserver) {\n this.setupOverflowObserver();\n }\n }}\n >\n {hasTabs && (\n <div class=\"bar-nav__tabs-probe\" aria-hidden=\"true\" inert>\n <ds-tab-group-nav\n key={`probe-${tabGroupKey}`}\n ref={el => {\n const next = el ?? null;\n if (next === this.probeTabGroupEl) return;\n this.probeTabGroupEl = next;\n if (next) {\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.scheduleOverflowCheck();\n }\n }}\n tabs={this.resolvedTabs}\n value={this.effectiveValue}\n />\n </div>\n )}\n\n {hasTabs && this.tabLayoutCommitted && renderedTabs.length > 0 && (\n <div class=\"bar-nav__left\">\n <ds-tab-group-nav\n key={`visible-${tabGroupKey}`}\n class=\"bar-nav__tabs-visible\"\n ref={el => {\n this.visibleTabGroupEl = el ?? null;\n }}\n tabs={renderedTabs}\n value={this.effectiveValue}\n selectionFollowsFocus={false}\n rovingEnabled={!this.overflowRovingFocused}\n onDsChange={(e: Event) => this.handleTabChange(e)}\n onDsRovingExit={(e: CustomEvent<'start' | 'end'>) => this.handleTabRovingExit(e)}\n onFocusin={() => {\n this.overflowRovingFocused = false;\n }}\n />\n </div>\n )}\n\n {hasTabs && !this.tabLayoutCommitted && (\n <div class=\"bar-nav__tabs-pending\" aria-hidden=\"true\" />\n )}\n\n {!hasTabs && this.heading && (\n <ds-text\n class=\"bar-nav__heading\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"primary\"\n wrap=\"nowrap\"\n >\n {this.heading}\n </ds-text>\n )}\n\n {hasTabs && this.hasOverflowTabs && (\n <ds-button-unfilled variant=\"icon\"\n class={{\n 'bar-nav__overflow-trigger': true,\n }}\n icon=\"Ellipses\"\n isActive={this.menuOpen}\n activeFill={false}\n hasBorder={false}\n focusTabIndex={this.overflowRovingFocused ? 0 : -1}\n ref={(el?: HTMLDsButtonUnfilledElement) => {\n this.triggerEl = (el as (HTMLElement & { setFocus?: () => Promise<void> })) ?? null;\n }}\n haspopup=\"menu\"\n expanded={this.menuOpen}\n aria-label={this.moreTabsLabel}\n onDsClick={() => this.toggleTabMenu({ focusVisible: false })}\n onFocusin={this.handleOverflowFocus}\n onFocusout={this.handleOverflowBlur}\n onKeyDown={(e: KeyboardEvent) => this.handleTriggerKeyDown(e)}\n />\n )}\n\n </header>\n\n {hasTabs && this.hasOverflowTabs && (\n <ds-menu\n ref={el => {\n this.menuEl = (el as HTMLDsMenuElement) ?? null;\n }}\n open={this.menuOpen}\n sections={tabsToOverflowMenuSections(this.overflowTabs, this.effectiveValue)}\n side=\"bottom\"\n align=\"end\"\n sideOffset=\"calc(var(--dimension-space-100) + var(--dimension-space-050))\"\n alignOffset=\"var(--dimension-space-050)\"\n initialFocusVisible={this.menuInitialFocusVisible}\n onDsSelect={(e: Event) => this.handleMenuSelect(e)}\n onDsClose={() => this.handleMenuClose()}\n />\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["queryWithinComponentHost","host","selector","root","shadowRoot","querySelector","getTabListFromTabGroup","tabGroupEl","tabsToMenuSections","tabs","selectedId","sections","batch","item","isTabDivider","length","push","items","label","value","id","dot","isSelected","isInactive","tabsToOverflowMenuSections","trimLeadingDividers","tabsOverflowContainer","tabListScrollWidth","containerClientWidth","collapsed","hysteresis","diff","visibleTabCountForWidth","itemWidths","availableWidth","overflowTriggerWidth","itemGap","listExtraWidth","fullWidth","widthForItemCount","availableForTabs","Math","max","count","i","width","trimTrailingDividers","end","slice","start","itemsWidth","reduce","sum","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","tabsJson","basePath","currentUrl","moreTabsLabel","resolvedTabs","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","tabLayoutCommitted","visibleTabs","overflowTabs","menuInitialFocusVisible","overflowRovingFocused","headerEl","triggerEl","menuEl","visibleTabGroupEl","probeTabGroupEl","resizeObserver","intrinsicWidthRetryCount","tabLayoutPendingFrames","panelNavTransition","ChromeTransitionGate","panelToolsTransition","overflowCoalescer","createRafCoalescer","updateTabsCollapsed","chromeTransitionShell","committedSection","pendingSection","onChromeTransitionStart","event","source","readChromeTransitionSource","enter","phase","readChromeTransitionPhase","onChromeTransitionEnd","exit","isActive","scheduleOverflowCheck","handleOverflowFocus","handleOverflowBlur","effectiveValue","hasOverflowTabs","digestTabsConfig","map","t","join","resetTabOverflowLayout","onHostPropsChange","applyHostProps","onSelectionChange","syncMenuSections","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","requestAnimationFrame","undefined","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","bindChromeTransitionListeners","componentDidRender","chromeOverflowPaused","syncMenuAnchor","disconnectedCallback","disconnect","cancel","unbindChromeTransitionListeners","shell","el","closest","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","removeEventListener","shouldResyncBarNavProps","syncValueFromUrl","remaining","HOST_PROP_SYNC_BUDGET","tick","ResizeObserver","observe","schedule","getLeftZoneAvailableWidth","headerStyle","getComputedStyle","horizontalPadding","parseFloat","paddingLeft","paddingRight","clientWidth","getTabsIntrinsicWidth","tabList","scrollWidth","getHeaderGap","style","columnGap","gap","getOverflowTriggerReserveWidth","getBoundingClientRect","getProbeTabMetrics","children","Array","from","child","some","childrenWidth","gapWidth","setOverflowTabLayout","nextCollapsed","visibleChanged","overflowChanged","scheduleIntrinsicWidthRetry","INTRINSIC_WIDTH_RETRY_MAX","forceTabLayoutCommit","fallbackCollapsed","metrics","intrinsicWidth","TAB_LAYOUT_COMMIT_MAX_FRAMES","shouldCollapse","OVERFLOW_HYSTERESIS_PX","visibleCount","anchor","handleMenuSelect","e","detail","selectTab","String","handleMenuClose","incomingTabs","parseJsonArrayProp","nextBasePath","sectionChanged","startsWith","tabsConfigChanged","hideTabs","deriveBarNavValueFromUrl","dsTabChange","emit","tab","focus","preventScroll","handleTabChange","toggleTabMenu","options","minWidth","focusVisible","handleTabRovingExit","setFocus","handleTriggerKeyDown","key","preventDefault","focusLastTab","render","sectionReady","hasTabs","tabGroupKey","renderedTabs","h","Host","class","ref","inert","next","selectionFollowsFocus","rovingEnabled","onDsChange","onDsRovingExit","onFocusin","heading","as","variant","emphasis","color","wrap","icon","activeFill","hasBorder","focusTabIndex","haspopup","expanded","onDsClick","onFocusout","onKeyDown","side","align","sideOffset","alignOffset","initialFocusVisible","onDsSelect","onDsClose"],"sources":["src/wc/components/BarNav/bar-nav-dom-utils.ts","src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts","src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":["export type QueryableHost = {\n shadowRoot?: ShadowRoot | null;\n querySelector: (selectors: string) => Element | null;\n};\n\n/**\n * Query within a Stencil custom-element host (light DOM today, shadow DOM–safe).\n * Use for child nodes owned by ds-tab-group and similar components.\n */\nexport function queryWithinComponentHost(\n host: QueryableHost | null | undefined,\n selector: string,\n): HTMLElement | null {\n if (!host) return null;\n const root = host.shadowRoot ?? host;\n return root.querySelector(selector) as HTMLElement | null;\n}\n\nexport function getTabListFromTabGroup(\n tabGroupEl: QueryableHost | null | undefined,\n): HTMLElement | null {\n return queryWithinComponentHost(tabGroupEl, '[role=\"tablist\"]');\n}\n","import type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\n/** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */\nexport function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n const sections: MenuSection[] = [];\n let batch: MenuItemData[] = [];\n\n for (const item of tabs) {\n if (isTabDivider(item)) {\n if (batch.length > 0) {\n sections.push({ items: batch });\n batch = [];\n }\n continue;\n }\n\n batch.push({\n label: item.label,\n value: item.id,\n dot: item.dot,\n isSelected: item.id === selectedId,\n isInactive: item.isInactive,\n });\n }\n\n if (batch.length > 0) {\n sections.push({ items: batch });\n }\n\n return sections;\n}\n\nexport function tabsToOverflowMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n return tabsToMenuSections(trimLeadingDividers(tabs), selectedId);\n}\n\nexport function getActiveTab(tabs: TabItem[], selectedId: string): TabItemTab | undefined {\n const selectable = getSelectableTabs(tabs);\n return selectable.find(tab => tab.id === selectedId) ?? selectable[0];\n}\n\nexport function getActiveTabLabel(tabs: TabItem[], selectedId: string): string {\n return getActiveTab(tabs, selectedId)?.label ?? 'Tabs';\n}\n\n/** True when tablist content exceeds the available width (with optional hysteresis). */\nexport function tabsOverflowContainer(\n tabListScrollWidth: number,\n containerClientWidth: number,\n collapsed: boolean,\n hysteresis = 2,\n): boolean {\n const diff = tabListScrollWidth - containerClientWidth;\n if (collapsed) {\n return diff > -hysteresis;\n }\n return diff > hysteresis;\n}\n\nexport function visibleTabCountForWidth(\n itemWidths: number[],\n availableWidth: number,\n overflowTriggerWidth: number,\n itemGap: number,\n listExtraWidth: number,\n): number {\n if (itemWidths.length === 0 || availableWidth <= 0) return 0;\n\n const fullWidth = widthForItemCount(itemWidths, itemWidths.length, itemGap, listExtraWidth);\n if (fullWidth <= availableWidth) return itemWidths.length;\n\n const availableForTabs = Math.max(0, availableWidth - overflowTriggerWidth);\n let count = 0;\n\n for (let i = 1; i <= itemWidths.length; i++) {\n const width = widthForItemCount(itemWidths, i, itemGap, listExtraWidth);\n if (width > availableForTabs) break;\n count = i;\n }\n\n return count;\n}\n\nexport function trimTrailingDividers(tabs: TabItem[]): TabItem[] {\n let end = tabs.length;\n while (end > 0 && isTabDivider(tabs[end - 1])) {\n end -= 1;\n }\n return tabs.slice(0, end);\n}\n\nfunction trimLeadingDividers(tabs: TabItem[]): TabItem[] {\n let start = 0;\n while (start < tabs.length && isTabDivider(tabs[start])) {\n start += 1;\n }\n return tabs.slice(start);\n}\n\nfunction widthForItemCount(\n itemWidths: number[],\n count: number,\n itemGap: number,\n listExtraWidth: number,\n): number {\n if (count <= 0) return 0;\n const itemsWidth = itemWidths.slice(0, count).reduce((sum, width) => sum + width, 0);\n return listExtraWidth + itemsWidth + itemGap * Math.max(0, count - 1);\n}\n","@import '../../utils/focus-ring.css';\n\n:host {\n display: block;\n}\n\n.bar-nav {\n display: flex;\n align-items: center;\n position: relative;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n gap: var(--dimension-space-100);\n box-sizing: border-box;\n border-bottom: var(--dimension-stroke-width-012) solid var(--_bar-nav-border);\n background-color: var(--_bar-nav-bg);\n color: var(--_bar-nav-fg-primary);\n -webkit-user-select: none;\n user-select: none;\n overflow: hidden;\n transition:\n background-color var(--effect-motion-short-3),\n border-color var(--effect-motion-short-3),\n color var(--effect-motion-short-3);\n isolation: isolate;\n /* Default chrome — app surfaces */\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n --ds-focus-ring-color: var(--_bar-nav-focus);\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers later. */\n.bar-nav--dashboard,\n.bar-nav--settings {\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Shell-owned chrome (bg + wash) — bar is a transparent frame. */\n:host-context(ds-app-shell:not([gradient-preset='none'])) .bar-nav {\n background-color: transparent;\n}\n\n.bar-nav > :not(.bar-nav__tabs-probe) {\n position: relative;\n z-index: 3;\n}\n\n/* Overflow — keep fitting tabs visible and pin the overflow trigger to the far edge. */\n.bar-nav--tabs-collapsed {\n display: flex;\n gap: var(--dimension-space-100);\n align-items: center;\n}\n\n/* Expanded tabs — consume full header width */\n.bar-nav__left {\n position: relative;\n flex: 1 1 0%;\n min-width: 0;\n width: 0;\n display: flex;\n align-items: center;\n}\n\n.bar-nav__left ds-tab-group-nav {\n flex: 1;\n min-width: 0;\n}\n\n/* Unconstrained width so intrinsic tab row width is measurable while collapsed */\n.bar-nav__tabs-probe {\n position: absolute;\n left: 0;\n top: 0;\n visibility: hidden;\n pointer-events: none;\n overflow: visible;\n width: max-content;\n max-width: none;\n z-index: -1;\n}\n\n.bar-nav__tabs-probe ds-tab-group-nav {\n width: max-content;\n}\n\n.bar-nav__tabs-visible {\n width: 100%;\n min-width: 0;\n}\n\n/* In-flow placeholder while measuring overflow — avoids layout jump; hidden from view/accessibility. */\n.bar-nav__tabs-pending {\n flex: 1;\n min-width: 0;\n height: var(--dimension-size-400);\n visibility: hidden;\n pointer-events: none;\n}\n\n/* Overflow trigger — compact icon button aligned to the right edge. */\n.bar-nav__overflow-trigger {\n margin-left: auto;\n --ds-button-unfilled-fg: var(--_bar-nav-fg-secondary);\n --ds-button-unfilled-fg-active: var(--_bar-nav-fg-primary);\n --ds-interaction-hover: var(--_bar-nav-hover);\n --ds-interaction-pressed: var(--_bar-nav-pressed);\n --ds-focus-ring-color: var(--_bar-nav-focus);\n}\n\n/* Fallback heading when no tabs — matches a single (selected) tab so the area\n name shares the tab label's type token, color, height and horizontal inset.\n Inset = tab button padding (space-075, 6px) + label inset (space-025, 2px).\n Color comes from ds-text color=\"primary\"; beat Text's inline-box display. */\nds-text.bar-nav__heading {\n display: inline-flex;\n align-items: center;\n height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-user-select: none;\n user-select: none;\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n Element,\n Watch,\n State,\n h,\n Host,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport { isTabDivider } from '../TabGroup/tab-item-utils';\nimport type { BarNavTab } from './bar-nav-types';\nimport {\n deriveBarNavValueFromUrl,\n parseJsonArrayProp,\n shouldResyncBarNavProps,\n} from './bar-nav-utils';\nimport {\n getTabListFromTabGroup,\n queryWithinComponentHost,\n type QueryableHost,\n} from './bar-nav-dom-utils';\nimport {\n tabsOverflowContainer,\n tabsToOverflowMenuSections,\n trimTrailingDividers,\n visibleTabCountForWidth,\n} from './bar-nav-tabs-menu-utils';\nimport {\n CHROME_TRANSITION_END,\n CHROME_TRANSITION_START,\n ChromeTransitionGate,\n createRafCoalescer,\n readChromeTransitionSource,\n readChromeTransitionPhase,\n} from '../../nav/chrome-transition';\n\n@Component({\n tag: 'ds-bar-nav',\n styleUrl: 'BarNav.css',\n scoped: true,\n})\nexport class BarNav {\n /** Style slot: `dashboard` or `settings`. Colors match for now. */\n @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n @Element() el!: HTMLElement;\n\n /**\n * Tab items for the left section.\n * Set via JS property: `el.tabs = [...]`. Replace the array reference to update.\n */\n @Prop() tabs: BarNavTab[] = [];\n\n /** JSON fallback for `tabs` — useful when framework bindings don't propagate arrays. */\n @Prop({ attribute: 'tabs-json' }) tabsJson: string = '';\n\n /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Fallback heading shown when no tabs are provided.\n * When tabs are present the heading is hidden.\n */\n @Prop() heading: string | undefined;\n\n /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */\n @Prop() basePath: string = '';\n\n /** Current route URL. When set with `basePath`, the active tab is derived automatically. */\n @Prop() currentUrl: string = '';\n @Prop() moreTabsLabel: string = 'More tabs';\n\n /** Emitted when the active tab changes. Detail = tab id. */\n @Event() dsTabChange!: EventEmitter<string>;\n\n @State() private resolvedTabs: BarNavTab[] = [];\n @State() private urlDerivedValue: string = '';\n @State() private hideTabsForDetailRoute = false;\n @State() private tabsCollapsed = false;\n @State() private menuOpen = false;\n /** When false, defer showing expanded tabs or the collapsed trigger until intrinsic width is measured (avoids a one-frame flash of the full tab row on narrow viewports). */\n @State() private tabLayoutCommitted = false;\n @State() private visibleTabs: BarNavTab[] = [];\n @State() private overflowTabs: BarNavTab[] = [];\n @State() private menuInitialFocusVisible = false;\n @State() private overflowRovingFocused = false;\n\n private static readonly HOST_PROP_SYNC_BUDGET = 8;\n private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n private static readonly TAB_LAYOUT_COMMIT_MAX_FRAMES = 16;\n private static readonly OVERFLOW_HYSTERESIS_PX = 8;\n\n private headerEl: HTMLElement | null = null;\n private triggerEl: (HTMLElement & { setFocus?: () => Promise<void> }) | null = null;\n private menuEl: HTMLDsMenuElement | null = null;\n private visibleTabGroupEl: HTMLDsTabGroupNavElement | null = null;\n private probeTabGroupEl: QueryableHost | null = null;\n private resizeObserver: ResizeObserver | null = null;\n private intrinsicWidthRetryCount = 0;\n private tabLayoutPendingFrames = 0;\n private readonly panelNavTransition = new ChromeTransitionGate();\n private readonly panelToolsTransition = new ChromeTransitionGate();\n private readonly overflowCoalescer = createRafCoalescer(() => {\n this.updateTabsCollapsed();\n });\n private chromeTransitionShell: HTMLElement | null = null;\n /** Matches `basePath` once tabs + URL are reconciled for the active section. */\n @State() private committedSection = '';\n /** Section waiting for URL + tabs to catch up after a cross-area navigation. */\n @State() private pendingSection = '';\n\n private get effectiveValue(): string {\n if (this.currentUrl && this.basePath) {\n return this.urlDerivedValue;\n }\n return this.value;\n }\n\n private get hasOverflowTabs(): boolean {\n return this.tabLayoutCommitted && this.tabsCollapsed && this.overflowTabs.length > 0;\n }\n\n private digestTabsConfig(tabs: BarNavTab[]): string {\n return tabs.map(t => (isTabDivider(t) ? '|' : t.id)).join(',');\n }\n\n private resetTabOverflowLayout() {\n this.tabLayoutCommitted = false;\n this.tabsCollapsed = false;\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.visibleTabs = [];\n this.overflowTabs = [];\n }\n\n @Watch('tabs')\n @Watch('tabsJson')\n @Watch('currentUrl')\n @Watch('basePath')\n onHostPropsChange() {\n this.applyHostProps();\n }\n\n @Watch('value')\n @Watch('urlDerivedValue')\n onSelectionChange() {\n this.syncMenuSections();\n this.scheduleOverflowCheck();\n }\n\n @Watch('menuOpen')\n onMenuOpenChange(open: boolean) {\n if (this.menuEl) {\n this.menuEl.open = open;\n }\n }\n\n @Watch('tabsCollapsed')\n onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n if (!collapsed) {\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n this.menuEl = null;\n }\n this.scheduleOverflowCheck();\n if (collapsed) {\n requestAnimationFrame(() => {\n this.scheduleOverflowCheck();\n });\n }\n if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n queueMicrotask(() => this.focusVisibleSelectedTab());\n }\n\n componentWillLoad() {\n this.applyHostProps();\n }\n\n componentDidLoad() {\n this.syncHostPropsIfNeeded();\n this.scheduleDeferredHostPropSync();\n this.setupOverflowObserver();\n this.bindChromeTransitionListeners();\n this.scheduleOverflowCheck();\n }\n\n componentDidRender() {\n if (this.chromeOverflowPaused()) {\n this.syncMenuAnchor();\n return;\n }\n this.scheduleOverflowCheck();\n this.syncMenuAnchor();\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.overflowCoalescer.cancel();\n this.unbindChromeTransitionListeners();\n }\n\n private bindChromeTransitionListeners() {\n const shell = this.el.closest('ds-app-shell');\n if (!shell) return;\n this.chromeTransitionShell = shell;\n shell.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n shell.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n }\n\n private unbindChromeTransitionListeners() {\n if (!this.chromeTransitionShell) return;\n this.chromeTransitionShell.removeEventListener(\n CHROME_TRANSITION_START,\n this.onChromeTransitionStart,\n );\n this.chromeTransitionShell.removeEventListener(\n CHROME_TRANSITION_END,\n this.onChromeTransitionEnd,\n );\n this.chromeTransitionShell = null;\n }\n\n private onChromeTransitionStart = (event: Event) => {\n const source = readChromeTransitionSource(event);\n if (source === 'panel-nav') {\n this.panelNavTransition.enter();\n return;\n }\n if (source === 'panel-tools') {\n const phase = readChromeTransitionPhase(event) ?? 'opening';\n if (phase === 'closing') {\n this.panelToolsTransition.enter();\n }\n }\n };\n\n private chromeOverflowPaused(): boolean {\n return this.panelNavTransition.isActive || this.panelToolsTransition.isActive;\n }\n\n private onChromeTransitionEnd = (event: Event) => {\n const source = readChromeTransitionSource(event);\n if (source === 'panel-nav') {\n this.panelNavTransition.exit();\n if (!this.panelNavTransition.isActive) {\n this.scheduleOverflowCheck();\n }\n return;\n }\n if (source === 'panel-tools') {\n this.panelToolsTransition.exit();\n this.scheduleOverflowCheck();\n }\n };\n\n /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n private syncHostPropsIfNeeded() {\n if (shouldResyncBarNavProps(this.resolvedTabs, this.tabs, this.tabsJson)) {\n this.applyHostProps();\n } else if (this.currentUrl && this.basePath) {\n this.syncValueFromUrl();\n }\n }\n\n /** Poll across animation frames — host props may land without triggering @Watch. */\n private scheduleDeferredHostPropSync() {\n let remaining = BarNav.HOST_PROP_SYNC_BUDGET;\n const tick = () => {\n this.syncHostPropsIfNeeded();\n if (--remaining > 0) {\n requestAnimationFrame(tick);\n }\n };\n queueMicrotask(tick);\n }\n\n private setupOverflowObserver() {\n if (typeof ResizeObserver === 'undefined' || !this.headerEl) return;\n this.resizeObserver?.disconnect();\n this.resizeObserver = new ResizeObserver(() => {\n if (this.chromeOverflowPaused()) return;\n this.scheduleOverflowCheck();\n });\n this.resizeObserver.observe(this.headerEl);\n }\n\n private scheduleOverflowCheck() {\n if (this.chromeOverflowPaused()) return;\n this.overflowCoalescer.schedule();\n }\n\n /** Width available for the tab row or collapsed trigger. */\n private getLeftZoneAvailableWidth(): number {\n if (!this.headerEl) return 0;\n\n const headerStyle = getComputedStyle(this.headerEl);\n const horizontalPadding =\n (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);\n\n return Math.max(0, this.headerEl.clientWidth - horizontalPadding);\n }\n\n private getTabsIntrinsicWidth(): number {\n const tabList = getTabListFromTabGroup(this.probeTabGroupEl);\n return tabList?.scrollWidth ?? 0;\n }\n\n private getHeaderGap(): number {\n if (!this.headerEl) return 0;\n const style = getComputedStyle(this.headerEl);\n return parseFloat(style.columnGap || style.gap) || 0;\n }\n\n private getOverflowTriggerReserveWidth(): number {\n if (!this.triggerEl) {\n return 40;\n }\n return this.triggerEl.getBoundingClientRect().width + this.getHeaderGap();\n }\n\n private getProbeTabMetrics():\n | {\n itemWidths: number[];\n itemGap: number;\n listExtraWidth: number;\n }\n | null {\n const tabList = getTabListFromTabGroup(this.probeTabGroupEl);\n if (!tabList) return null;\n\n const children = Array.from(tabList.children) as HTMLElement[];\n const itemWidths = children.map(child => child.getBoundingClientRect().width);\n if (itemWidths.length === 0 || itemWidths.some(width => width === 0)) return null;\n\n const style = getComputedStyle(tabList);\n const itemGap = parseFloat(style.columnGap || style.gap) || 0;\n const childrenWidth = itemWidths.reduce((sum, width) => sum + width, 0);\n const gapWidth = itemGap * Math.max(0, itemWidths.length - 1);\n const listExtraWidth = Math.max(0, tabList.scrollWidth - childrenWidth - gapWidth);\n\n return { itemWidths, itemGap, listExtraWidth };\n }\n\n private setOverflowTabLayout(visibleTabs: BarNavTab[], overflowTabs: BarNavTab[]) {\n const nextCollapsed = overflowTabs.length > 0;\n const visibleChanged =\n this.digestTabsConfig(visibleTabs) !== this.digestTabsConfig(this.visibleTabs);\n const overflowChanged =\n this.digestTabsConfig(overflowTabs) !== this.digestTabsConfig(this.overflowTabs);\n\n if (visibleChanged) {\n this.visibleTabs = visibleTabs;\n }\n if (overflowChanged) {\n this.overflowTabs = overflowTabs;\n }\n if (nextCollapsed !== this.tabsCollapsed) {\n this.tabsCollapsed = nextCollapsed;\n if (!nextCollapsed) {\n this.menuOpen = false;\n }\n }\n }\n\n private scheduleIntrinsicWidthRetry() {\n if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) return;\n this.intrinsicWidthRetryCount++;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n }\n\n private forceTabLayoutCommit(fallbackCollapsed: boolean) {\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.setOverflowTabLayout(\n fallbackCollapsed ? [] : this.resolvedTabs,\n fallbackCollapsed ? this.resolvedTabs : [],\n );\n this.tabLayoutCommitted = true;\n }\n\n private updateTabsCollapsed() {\n if (!this.headerEl || this.resolvedTabs.length === 0 || this.hideTabsForDetailRoute) {\n if (this.tabsCollapsed) {\n this.setOverflowTabLayout([], []);\n }\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.tabLayoutCommitted = true;\n return;\n }\n\n const metrics = this.getProbeTabMetrics();\n const intrinsicWidth = this.getTabsIntrinsicWidth();\n if (!metrics || intrinsicWidth === 0) {\n this.tabLayoutPendingFrames += 1;\n if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) {\n this.forceTabLayoutCommit(false);\n } else if (this.tabLayoutPendingFrames >= BarNav.TAB_LAYOUT_COMMIT_MAX_FRAMES) {\n this.forceTabLayoutCommit(false);\n } else {\n this.scheduleIntrinsicWidthRetry();\n }\n return;\n }\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n\n const shouldCollapse = tabsOverflowContainer(\n intrinsicWidth,\n this.getLeftZoneAvailableWidth(),\n this.tabsCollapsed,\n BarNav.OVERFLOW_HYSTERESIS_PX,\n );\n\n if (!shouldCollapse) {\n this.setOverflowTabLayout(this.resolvedTabs, []);\n this.tabLayoutCommitted = true;\n return;\n }\n\n const visibleCount = visibleTabCountForWidth(\n metrics.itemWidths,\n this.getLeftZoneAvailableWidth(),\n this.getOverflowTriggerReserveWidth(),\n metrics.itemGap,\n metrics.listExtraWidth,\n );\n const visibleTabs = trimTrailingDividers(this.resolvedTabs.slice(0, visibleCount));\n const overflowTabs = this.resolvedTabs.slice(visibleTabs.length);\n this.setOverflowTabLayout(visibleTabs, overflowTabs);\n this.tabLayoutCommitted = true;\n }\n\n private syncMenuAnchor() {\n if (!this.menuEl || !this.triggerEl || !this.hasOverflowTabs) return;\n this.menuEl.anchor = this.triggerEl;\n this.syncMenuSections();\n }\n\n private handleMenuSelect(e: Event) {\n const detail = (e as CustomEvent<MenuItemData>).detail;\n if (detail?.value !== undefined) {\n this.selectTab(String(detail.value));\n }\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n }\n\n private handleMenuClose() {\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n }\n\n /** Batch tabs/basePath/currentUrl updates so URL derivation never runs with a mixed section. */\n private incomingTabs(): BarNavTab[] {\n return this.tabsJson\n ? parseJsonArrayProp(this.tabsJson, [])\n : (this.tabs ?? []);\n }\n\n private applyHostProps() {\n const nextBasePath = this.basePath;\n const sectionChanged =\n nextBasePath !== '' &&\n this.committedSection !== '' &&\n nextBasePath !== this.committedSection;\n\n if (sectionChanged) {\n this.urlDerivedValue = '';\n this.committedSection = '';\n this.pendingSection = nextBasePath;\n this.resolvedTabs = [];\n this.resetTabOverflowLayout();\n return;\n }\n\n if (this.pendingSection) {\n if (!nextBasePath || nextBasePath !== this.pendingSection) {\n return;\n }\n if (!this.currentUrl.startsWith(this.pendingSection)) {\n return;\n }\n const tabs = this.incomingTabs();\n if (tabs.length === 0) {\n return;\n }\n this.pendingSection = '';\n }\n\n const tabs = this.incomingTabs();\n const tabsConfigChanged =\n this.digestTabsConfig(tabs) !== this.digestTabsConfig(this.resolvedTabs);\n\n this.resolvedTabs = tabs;\n this.syncValueFromUrl();\n this.committedSection = nextBasePath;\n if (tabsConfigChanged) {\n this.resetTabOverflowLayout();\n }\n this.scheduleOverflowCheck();\n }\n\n private syncMenuSections() {\n if (!this.menuEl) return;\n this.menuEl.sections = tabsToOverflowMenuSections(this.overflowTabs, this.effectiveValue);\n }\n\n private syncValueFromUrl() {\n const tabs = this.incomingTabs();\n\n if (!this.currentUrl || !this.basePath) {\n this.urlDerivedValue = '';\n this.hideTabsForDetailRoute = false;\n return;\n }\n\n if (!this.currentUrl.startsWith(this.basePath)) {\n this.urlDerivedValue = '';\n this.hideTabsForDetailRoute = false;\n return;\n }\n\n const { value, hideTabs } = deriveBarNavValueFromUrl(\n this.currentUrl,\n this.basePath,\n tabs,\n );\n this.urlDerivedValue = value;\n this.hideTabsForDetailRoute = hideTabs;\n }\n\n private selectTab(id: string) {\n this.value = id;\n this.dsTabChange.emit(id);\n }\n\n /** Move focus to the selected tab in the visible tab group (after expand). */\n private focusVisibleSelectedTab() {\n const tab = queryWithinComponentHost(\n this.visibleTabGroupEl,\n `[data-tab-id=\"${this.effectiveValue}\"]`,\n );\n tab?.focus({ preventScroll: true });\n }\n\n private handleTabChange(e: Event) {\n this.selectTab((e as CustomEvent<string>).detail);\n }\n\n private toggleTabMenu(options?: { focusVisible?: boolean }) {\n if (this.menuOpen) {\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n return;\n }\n\n if (this.menuEl && this.triggerEl) {\n this.menuEl.anchor = this.triggerEl;\n this.menuEl.minWidth = '';\n this.syncMenuSections();\n }\n\n this.menuInitialFocusVisible = options?.focusVisible ?? false;\n this.menuOpen = true;\n }\n\n private handleTabRovingExit(e: CustomEvent<'start' | 'end'>) {\n if (e.detail !== 'end' || !this.hasOverflowTabs) return;\n this.overflowRovingFocused = true;\n void this.triggerEl?.setFocus?.();\n }\n\n private handleOverflowFocus = () => {\n this.overflowRovingFocused = true;\n };\n\n private handleOverflowBlur = () => {\n this.overflowRovingFocused = false;\n };\n\n private handleTriggerKeyDown(e: KeyboardEvent) {\n if (!this.hasOverflowTabs) return;\n\n if (!this.menuOpen) {\n if (e.key === 'ArrowLeft') {\n e.preventDefault();\n this.overflowRovingFocused = false;\n void this.visibleTabGroupEl?.focusLastTab();\n return;\n }\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.toggleTabMenu({ focusVisible: true });\n }\n return;\n }\n\n if (e.key === 'Escape') {\n e.preventDefault();\n this.menuOpen = false;\n this.menuInitialFocusVisible = false;\n void this.triggerEl?.setFocus?.();\n }\n }\n\n render() {\n // Section gating only applies when `basePath` is set (SPA section sync).\n // Tabs without a base path must still render — otherwise a single-tab bar\n // (or any non-routed tabs) silently falls through to an empty header.\n const sectionReady =\n this.basePath === '' || this.committedSection === this.basePath;\n const hasTabs =\n sectionReady && this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n const tabGroupKey = this.basePath || 'no-section';\n const renderedTabs = this.hasOverflowTabs ? this.visibleTabs : this.resolvedTabs;\n\n return (\n <Host>\n <header\n class={{\n 'bar-nav': true,\n 'bar-nav--dashboard': this.navStyle === 'dashboard',\n 'bar-nav--settings': this.navStyle === 'settings',\n 'bar-nav--tabs-collapsed':\n hasTabs && this.hasOverflowTabs,\n }}\n ref={el => {\n this.headerEl = el as HTMLElement;\n if (el && !this.resizeObserver) {\n this.setupOverflowObserver();\n }\n }}\n >\n {hasTabs && (\n <div class=\"bar-nav__tabs-probe\" aria-hidden=\"true\" inert>\n <ds-tab-group-nav\n key={`probe-${tabGroupKey}`}\n ref={el => {\n const next = el ?? null;\n if (next === this.probeTabGroupEl) return;\n this.probeTabGroupEl = next;\n if (next) {\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.scheduleOverflowCheck();\n }\n }}\n tabs={this.resolvedTabs}\n value={this.effectiveValue}\n />\n </div>\n )}\n\n {hasTabs && this.tabLayoutCommitted && renderedTabs.length > 0 && (\n <div class=\"bar-nav__left\">\n <ds-tab-group-nav\n key={`visible-${tabGroupKey}`}\n class=\"bar-nav__tabs-visible\"\n ref={el => {\n this.visibleTabGroupEl = el ?? null;\n }}\n tabs={renderedTabs}\n value={this.effectiveValue}\n selectionFollowsFocus={false}\n rovingEnabled={!this.overflowRovingFocused}\n onDsChange={(e: Event) => this.handleTabChange(e)}\n onDsRovingExit={(e: CustomEvent<'start' | 'end'>) => this.handleTabRovingExit(e)}\n onFocusin={() => {\n this.overflowRovingFocused = false;\n }}\n />\n </div>\n )}\n\n {hasTabs && !this.tabLayoutCommitted && (\n <div class=\"bar-nav__tabs-pending\" aria-hidden=\"true\" />\n )}\n\n {!hasTabs && this.heading && (\n <ds-text\n class=\"bar-nav__heading\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis\n color=\"primary\"\n wrap=\"nowrap\"\n >\n {this.heading}\n </ds-text>\n )}\n\n {hasTabs && this.hasOverflowTabs && (\n <ds-button-unfilled variant=\"icon\"\n class={{\n 'bar-nav__overflow-trigger': true,\n }}\n icon=\"Ellipses\"\n isActive={this.menuOpen}\n activeFill={false}\n hasBorder={false}\n focusTabIndex={this.overflowRovingFocused ? 0 : -1}\n ref={(el?: HTMLDsButtonUnfilledElement) => {\n this.triggerEl = (el as (HTMLElement & { setFocus?: () => Promise<void> })) ?? null;\n }}\n haspopup=\"menu\"\n expanded={this.menuOpen}\n aria-label={this.moreTabsLabel}\n onDsClick={() => this.toggleTabMenu({ focusVisible: false })}\n onFocusin={this.handleOverflowFocus}\n onFocusout={this.handleOverflowBlur}\n onKeyDown={(e: KeyboardEvent) => this.handleTriggerKeyDown(e)}\n />\n )}\n\n </header>\n\n {hasTabs && this.hasOverflowTabs && (\n <ds-menu\n ref={el => {\n this.menuEl = (el as HTMLDsMenuElement) ?? null;\n }}\n open={this.menuOpen}\n sections={tabsToOverflowMenuSections(this.overflowTabs, this.effectiveValue)}\n side=\"bottom\"\n align=\"end\"\n sideOffset=\"calc(var(--dimension-space-100) + var(--dimension-space-050))\"\n alignOffset=\"var(--dimension-space-050)\"\n initialFocusVisible={this.menuInitialFocusVisible}\n onDsSelect={(e: Event) => this.handleMenuSelect(e)}\n onDsClose={() => this.handleMenuClose()}\n />\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{B as o,d as s}from"./p-
|
|
1
|
+
import{B as o,d as s}from"./p-CvjQuj6A.js";const t=o;const j=s;export{t as DsButtonFilled,j as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-button-filled.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-DO7y9eZQ.js";const t=o;const p=s;export{t as DsButtonUnfilled,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-button-unfilled.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as e,c as s,h as a,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 s,h as a,a as d,t as i}from"./index.js";import{d as n}from"./p-CHcS6Z4V.js";import{d as c}from"./p-DO7y9eZQ.js";import{d as o}from"./p-CCRYQWKy.js";import{d as r}from"./p-9Qu1ls2y.js";import{d as l}from"./p-emacH2W5.js";const h=()=>`.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 f=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.dsFilterClick=s(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 a(d,{key:"91451b7965425014f9de9246d20b4fa94e8e5793",class:"card-data-viz-donut"},a("ds-card",{key:"a2dd46142efe1ff45cecf62f47c366cdffba25bc",heading:this.heading,cardWidth:this.cardWidth},a("ds-button-unfilled",{key:"8117a7986800db33ba3f97a19f3a07c698484f3b",slot:"actions",variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}),a("div",{key:"a6197199811286133de9a57a9f05c22f9db4778f",class:"card-data-viz-donut__layout"},this.hasChartSlot&&a("div",{key:"2a5909d4689ee3efb601e7904eb31257d6193ad8",class:"card-data-viz-donut__chart-region"},a("slot",{key:"d2d2248f56e533eb4f3cc81c709404058444dd75",name:"chart"})),this.hasLegendSlot&&a("div",{key:"74ac4321927ef009be24ea26fe291bc7e09158e3",class:"card-data-viz-donut__legend-region"},a("slot",{key:"7f51d0ad31530bbcf3dc82bfd932bc1466b9f6c2",name:"legend"})))))}get el(){return this}static get style(){return h()}},[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","ds-icon","ds-text"];t.forEach((t=>{switch(t){case"ds-card-data-viz-donut":if(!customElements.get(i(t))){customElements.define(i(t),f)}break;case"ds-badge":if(!customElements.get(i(t))){n()}break;case"ds-button-unfilled":if(!customElements.get(i(t))){c()}break;case"ds-card":if(!customElements.get(i(t))){o()}break;case"ds-icon":if(!customElements.get(i(t))){r()}break;case"ds-text":if(!customElements.get(i(t))){l()}break}}))}u();const m=f;const b=u;export{m as DsCardDataVizDonut,b as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-card-data-viz-donut.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as s,c as e,h as a,a as i,t as n}from"./index.js";import{d}from"./p-
|
|
1
|
+
import{p as t,H as s,c as e,h as a,a as i,t as n}from"./index.js";import{d as c}from"./p-CHcS6Z4V.js";import{d}from"./p-CvjQuj6A.js";import{d as o}from"./p-DO7y9eZQ.js";import{d as l}from"./p-CCRYQWKy.js";import{d as r}from"./p-9Qu1ls2y.js";import{d as f}from"./p-emacH2W5.js";const b=()=>`.sc-ds-card-setting-h{display:contents}.card-setting__actions.sc-ds-card-setting{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}`;const m=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.dsEditingChange=e(this,"dsEditingChange");this.cardWidth="md";this.editing=false;this.editLabel="Edit";this.cancelLabel="Cancel";this.saveLabel="Save";this.enterEdit=()=>{this.dsEditingChange.emit(true)};this.exitEdit=()=>{this.dsEditingChange.emit(false)}}render(){const t=this.editing;return a(i,{key:"62659b4788c87d22fb6a2886dc9246141a629fef",class:"card-setting"},a("ds-card",{key:"f7b58e31c8495648fd7fde9b53a0311b013e6aef",heading:this.heading,cardWidth:this.cardWidth,appearance:t?"editing":"default"},!t?a("ds-button-unfilled",{slot:"actions",variant:"icon",type:"button",icon:"Pencil","aria-label":this.editLabel,onDsClick:this.enterEdit}):a("div",{slot:"actions",class:"card-setting__actions"},a("ds-button-unfilled",{variant:"icon",type:"button",icon:"Cross",backgroundContrast:"bold","aria-label":this.cancelLabel,onDsClick:this.exitEdit}),a("ds-button-filled",{variant:"icon",type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":this.saveLabel,onDsClick:this.exitEdit})),a("slot",{key:"ef8fd2dcb066d2a5a08b87a1fc182f3d98743cce"})))}static get style(){return b()}},[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 u(){if(typeof customElements==="undefined"){return}const t=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-card","ds-icon","ds-text"];t.forEach((t=>{switch(t){case"ds-card-setting":if(!customElements.get(n(t))){customElements.define(n(t),m)}break;case"ds-badge":if(!customElements.get(n(t))){c()}break;case"ds-button-filled":if(!customElements.get(n(t))){d()}break;case"ds-button-unfilled":if(!customElements.get(n(t))){o()}break;case"ds-card":if(!customElements.get(n(t))){l()}break;case"ds-icon":if(!customElements.get(n(t))){r()}break;case"ds-text":if(!customElements.get(n(t))){f()}break}}))}u();const h=m;const p=u;export{h as DsCardSetting,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-card-setting.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-CCRYQWKy.js";const t=o;const p=s;export{t as DsCard,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-card.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as n,c as i,h as t,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as a}from"./p-BOQRM49Q.js";import{f as d}from"./p-BBpASejH.js";const c=()=>`.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:var(--dimension-space-025);--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);--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-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-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: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{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:focus-visible{outline:none}.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{outline:none}.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(50%, 1fr) auto auto;row-gap:var(--dimension-space-050)}.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}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}.chart-legend__item--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;margin-right:var(--dimension-space-075)}.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{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));margin-right:var(--dimension-space-200);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chart-legend__percentage.sc-ds-chart-legend{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));text-align:right}.chart-legend__value.sc-ds-chart-legend{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));margin-right:var(--dimension-space-200);text-align:right;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}`;const l=.25;const h=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=i(this,"dsItemHover");this.dsItemClick=i(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;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 t(s,{key:"4af078b912f6538fe14f1f2611ba3ccd5660dd47",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true}},t("ul",{key:"395d0163471591d3f36f1d536d61613c2a36d52a",class:"chart-legend__list",onMouseLeave:()=>this.handleHover(null)},this.items.map(((i,s)=>{const r=n!=null&&i.label!==n;const a=i.href?"a":"div";return t("li",{class:"chart-legend__list-item",key:i.label},t(a,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!i.href,"ds-control--md":true,"ds-interaction-fill":true,"ds-focus-ring-inset":!!i.href},style:{opacity:r?String(l):"1"},href:i.href,onClick:i.href?e=>this.handleClick(i,e):undefined,onMouseEnter:()=>this.handleHover(i),onFocus:()=>this.handleHover(i),onBlur:()=>this.handleHover(null)},t("span",{class:"chart-legend__swatch-box"},t("span",{class:"chart-legend__swatch",style:{backgroundColor:i.color??o(s)}})),t("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:i.label},i.label),i.value!=null&&t("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,title:String(i.value)},d(i.value,this.locale)),i.value!=null&&this.showPercentage&&t("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary"},(e?i.value/e*100:0).toFixed(1),"%")))}))))}static get style(){return c()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],activeLabel:[1,"active-label"],hoveredLabel:[32]}]);function g(){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),h)}break;case"ds-text":if(!customElements.get(r(e))){a()}break}}))}g();const v=h;const f=g;export{v as DsChartLegend,f as defineCustomElement};
|
|
1
|
+
import{p as e,H as n,c as i,h as t,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as a}from"./p-emacH2W5.js";import{f as d}from"./p-BBpASejH.js";const c=()=>`.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:var(--dimension-space-025);--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);--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-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-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: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{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:focus-visible{outline:none}.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{outline:none}.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(50%, 1fr) auto auto;row-gap:var(--dimension-space-050)}.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}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}.chart-legend__item--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;margin-right:var(--dimension-space-075)}.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{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));margin-right:var(--dimension-space-200);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chart-legend__percentage.sc-ds-chart-legend{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));text-align:right}.chart-legend__value.sc-ds-chart-legend{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));margin-right:var(--dimension-space-200);text-align:right;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}`;const l=.25;const h=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=i(this,"dsItemHover");this.dsItemClick=i(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;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 t(s,{key:"4af078b912f6538fe14f1f2611ba3ccd5660dd47",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true}},t("ul",{key:"395d0163471591d3f36f1d536d61613c2a36d52a",class:"chart-legend__list",onMouseLeave:()=>this.handleHover(null)},this.items.map(((i,s)=>{const r=n!=null&&i.label!==n;const a=i.href?"a":"div";return t("li",{class:"chart-legend__list-item",key:i.label},t(a,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!i.href,"ds-control--md":true,"ds-interaction-fill":true,"ds-focus-ring-inset":!!i.href},style:{opacity:r?String(l):"1"},href:i.href,onClick:i.href?e=>this.handleClick(i,e):undefined,onMouseEnter:()=>this.handleHover(i),onFocus:()=>this.handleHover(i),onBlur:()=>this.handleHover(null)},t("span",{class:"chart-legend__swatch-box"},t("span",{class:"chart-legend__swatch",style:{backgroundColor:i.color??o(s)}})),t("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:i.label},i.label),i.value!=null&&t("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,title:String(i.value)},d(i.value,this.locale)),i.value!=null&&this.showPercentage&&t("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary"},(e?i.value/e*100:0).toFixed(1),"%")))}))))}static get style(){return c()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],activeLabel:[1,"active-label"],hoveredLabel:[32]}]);function g(){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),h)}break;case"ds-text":if(!customElements.get(r(e))){a()}break}}))}g();const v=h;const f=g;export{v as DsChartLegend,f as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chart-legend.js.map
|