@ds-mo/ui 1.5.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/.build-stamp +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-banner.js.map +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-button-group.js +1 -1
- package/dist/components/ds-button.js +1 -1
- package/dist/components/ds-loader.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-modal.js.map +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-toast-provider.js +1 -1
- package/dist/components/ds-toast-provider.js.map +1 -1
- package/dist/components/ds-toggle-button-group.js +1 -1
- package/dist/components/ds-toggle-button.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/ds-tooltip.js.map +1 -1
- package/dist/components/p-BRju0sEC.js +2 -0
- package/dist/components/p-BRju0sEC.js.map +1 -0
- package/dist/components/p-BvmooLHV.js +2 -0
- package/dist/components/p-BvmooLHV.js.map +1 -0
- package/dist/components/p-C4WbCXBj.js +2 -0
- package/dist/components/p-C4WbCXBj.js.map +1 -0
- package/dist/components/p-CYJ-de0u.js +2 -0
- package/dist/components/p-CYJ-de0u.js.map +1 -0
- package/dist/components/{p--YDw8Q4o.js → p-CsO880L-.js} +2 -2
- package/dist/components/p-DTjpgYJV.js +2 -0
- package/dist/components/p-DTjpgYJV.js.map +1 -0
- package/dist/components/p-DfL2MOso.js +2 -0
- package/dist/components/p-DfL2MOso.js.map +1 -0
- package/dist/components/p-DiWQFROF.js +2 -0
- package/dist/components/p-DiWQFROF.js.map +1 -0
- package/dist/types/components/Banner/Banner.d.ts +2 -0
- package/dist/types/components/Loader/Loader.d.ts +3 -2
- package/dist/types/components/Menu/Menu.d.ts +11 -2
- package/dist/types/components/Modal/Modal.d.ts +1 -0
- package/dist/types/components/PanelNav/PanelNav.d.ts +3 -6
- package/dist/types/components/Toast/Toast.d.ts +1 -0
- package/dist/types/components/Tooltip/Tooltip.d.ts +14 -3
- package/dist/types/components.d.ts +42 -103
- package/dist/types/nav/shell-view-transition.d.ts +2 -2
- package/dist/types/utils/index.d.ts +5 -0
- package/dist/types/utils/resolve-css-length-px.d.ts +8 -0
- package/dist/types/utils/resolve-css-time-ms.d.ts +8 -0
- package/dist/types/utils/token-defaults.d.ts +27 -0
- package/package.json +2 -2
- package/src/angular/index.ts +0 -1
- package/src/angular/proxies.ts +0 -33
- package/src/react/components.ts +0 -1
- package/src/wc/components/Banner/Banner.tsx +11 -5
- package/src/wc/components/Loader/Loader.tsx +8 -3
- package/src/wc/components/Menu/Menu.tsx +61 -26
- package/src/wc/components/Modal/Modal.tsx +10 -7
- package/src/wc/components/PanelNav/PanelNav.tsx +5 -8
- package/src/wc/components/Toast/Toast.tsx +7 -2
- package/src/wc/components/Toast/toast-service.ts +8 -1
- package/src/wc/components/ToggleButton/ToggleButton.tsx +7 -3
- package/src/wc/components/Tooltip/Tooltip.tsx +70 -31
- package/src/wc/components.d.ts +42 -103
- package/src/wc/nav/shell-view-transition.ts +4 -10
- package/dist/components/ds-sidebar.d.ts +0 -11
- package/dist/components/ds-sidebar.js +0 -2
- package/dist/components/ds-sidebar.js.map +0 -1
- package/dist/components/p-BcuUR5Ao.js +0 -2
- package/dist/components/p-BcuUR5Ao.js.map +0 -1
- package/dist/components/p-CpbnmEu1.js +0 -2
- package/dist/components/p-CpbnmEu1.js.map +0 -1
- package/dist/components/p-DznbYg1m.js +0 -2
- package/dist/components/p-DznbYg1m.js.map +0 -1
- package/dist/components/p-uMN1Ppw2.js +0 -2
- package/dist/components/p-uMN1Ppw2.js.map +0 -1
- package/dist/types/components/Sidebar/Sidebar.d.ts +0 -29
- package/src/react/ds-sidebar.ts +0 -33
- package/src/wc/components/Sidebar/Sidebar.tsx +0 -245
- /package/dist/components/{p--YDw8Q4o.js.map → p-CsO880L-.js.map} +0 -0
package/README.md
CHANGED
|
@@ -91,7 +91,7 @@ Then use `<ds-*>` tags in templates. **Angular** can import Stencil-generated pr
|
|
|
91
91
|
|
|
92
92
|
### Layout
|
|
93
93
|
- **Header** — page header with left/center/right slots
|
|
94
|
-
- **
|
|
94
|
+
- **PanelNav** — collapsible side navigation panel with sections and items
|
|
95
95
|
|
|
96
96
|
### Utility
|
|
97
97
|
- **Fade** — gradient overlay
|
package/dist/.build-stamp
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
1782184106670
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as n,h as t,a as i,t as
|
|
1
|
+
import{p as e,H as s,c as n,h as t,a as i,t as r}from"./index.js";import{r as a}from"./p-BvmooLHV.js";import{T as o}from"./p-BRju0sEC.js";const d=()=>`.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);line-height:var(--typography-lineheight-md);display:block;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:18px;line-height:1}.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 l=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 a(o.motionShort3,o.animationDurationShort3)}get autoDismissMs(){return a(o.animationDelayLong2,o.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("span",{class:"text-body-medium banner-message"},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 d()}},[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 c(){if(typeof customElements==="undefined"){return}const e=["ds-banner"];e.forEach((e=>{switch(e){case"ds-banner":if(!customElements.get(r(e))){customElements.define(r(e),l)}break}}))}c();const h=l;const m=c;export{h as DsBanner,m as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-banner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["bannerCss","FADE_OUT_MS","AUTO_DISMISS_MS","Banner","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","intent","contrast","message","header","floating","showDismiss","dismissLabel","closing","dismissTimer","closeTimer","componentDidLoad","scheduleDismiss","onMessageChange","newVal","disconnectedCallback","clearTimers","clearTimeout","setTimeout","beginClose","dsDismiss","emit","getContentColor","c","getBg","getElevation","render","contentColor","isAssertive","bannerEl","h","class","style","role","undefined","backgroundColor","boxShadow","type","onClick","Host","display","zIndex"],"sources":["src/wc/components/Banner/Banner.css?tag=ds-banner&encapsulation=scoped","src/wc/components/Banner/Banner.tsx"],"sourcesContent":[".banner-surface {\n position: relative;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border-radius: var(--dimension-radius-075);\n}\n\n.banner-header-surface {\n width: 100%;\n height: var(--dimension-space-100);\n flex-shrink: 0;\n overflow: hidden;\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.banner-header {\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n -45deg,\n var(--banner-content),\n var(--banner-content) var(--dimension-size-100),\n transparent var(--dimension-size-100),\n transparent var(--dimension-size-200)\n );\n}\n\n.banner-body {\n padding: var(--dimension-space-075);\n min-height: var(--dimension-size-400);\n display: flex;\n align-items: flex-start;\n gap: var(--dimension-space-075);\n}\n\n.banner-message {\n color: var(--banner-content);\n line-height: var(--typography-lineheight-md);\n display: block;\n flex: 1;\n min-width: 0;\n}\n\n.banner-dismiss {\n background: none;\n border: none;\n margin: 0;\n padding: var(--dimension-space-025);\n color: var(--banner-content);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: var(--dimension-radius-050);\n position: relative;\n font-size: 18px;\n line-height: 1;\n}\n\n.banner-dismiss::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-color: transparent;\n transition: var(--effect-transition-interaction-background-short-2, background-color var(--effect-motion-short-2));\n pointer-events: none;\n}\n\n.banner-dismiss:hover::before { background-color: var(--color-interaction-hover); }\n.banner-dismiss:active::before { background-color: var(--color-interaction-pressed); }\n\n.banner-dismiss:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-stroke-width-015);\n}\n\n/* ─── Floating ──────────────────────────────────────────────────────────────── */\n\n.floating-position {\n position: fixed;\n top: var(--dimension-space-200);\n left: 50%;\n transform: translateX(-50%);\n pointer-events: none;\n}\n\n.floating-toast {\n pointer-events: auto;\n animation: bannerFadeIn var(--effect-motion-short-2, 150ms) forwards;\n}\n\n.floating-toast--closing {\n animation: bannerFadeOut var(--effect-motion-short-3, 200ms) forwards;\n}\n\n@keyframes bannerFadeIn {\n from { opacity: 0; transform: translateY(-8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes bannerFadeOut {\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(-4px); }\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\n\nexport type BannerIntent =\n | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'\n | 'ai' | 'neutral' | 'walkthrough' | 'guide';\n\nexport type BannerContrast = 'faint' | 'medium' | 'bold' | 'strong';\n\nconst FADE_OUT_MS = 200;\nconst AUTO_DISMISS_MS = 4000;\n\n@Component({\n tag: 'ds-banner',\n styleUrl: 'Banner.css',\n scoped: true,\n})\nexport class Banner {\n @Prop() intent: BannerIntent = 'neutral';\n @Prop() contrast: BannerContrast = 'medium';\n @Prop() message: string = '';\n /** Renders the diagonal-stripe accent bar above the body. */\n @Prop() header: boolean = false;\n /** Renders at a fixed position (centered top) and auto-dismisses after 4 s. */\n @Prop() floating: boolean = false;\n @Prop() showDismiss: boolean = false;\n @Prop() dismissLabel: string = 'Dismiss';\n\n @State() private closing: boolean = false;\n\n @Event() dsDismiss!: EventEmitter<void>;\n\n private dismissTimer: ReturnType<typeof setTimeout> | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n componentDidLoad() {\n if (this.floating && this.message) this.scheduleDismiss();\n }\n\n @Watch('message')\n onMessageChange(newVal: string) {\n if (this.floating && newVal) {\n this.closing = false;\n this.scheduleDismiss();\n }\n }\n\n disconnectedCallback() {\n this.clearTimers();\n }\n\n private clearTimers() {\n if (this.dismissTimer) { clearTimeout(this.dismissTimer); this.dismissTimer = null; }\n if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n }\n\n private scheduleDismiss() {\n this.clearTimers();\n this.dismissTimer = setTimeout(() => {\n this.dismissTimer = null;\n this.beginClose();\n }, AUTO_DISMISS_MS);\n }\n\n private beginClose() {\n this.clearTimers();\n if (this.floating) {\n this.closing = true;\n this.closeTimer = setTimeout(() => {\n this.closing = false;\n this.closeTimer = null;\n this.dsDismiss.emit();\n }, FADE_OUT_MS);\n } else {\n this.dsDismiss.emit();\n }\n }\n\n private getContentColor(): string {\n if (this.contrast === 'bold') return 'var(--color-foreground-on-bold-background-primary)';\n const c = this.contrast === 'faint' ? 'bold' : this.contrast === 'medium' ? 'strong' : 'medium';\n return `var(--color-foreground-${c}-${this.intent})`;\n }\n\n private getBg(): string {\n return `var(--color-background-${this.contrast}-${this.intent})`;\n }\n\n private getElevation(): string {\n return this.floating\n ? 'var(--effect-elevation-elevated-floating)'\n : 'var(--effect-elevation-elevated-sm)';\n }\n\n render() {\n const contentColor = this.getContentColor();\n const isAssertive = this.intent === 'negative';\n\n const bannerEl = (\n <div\n class={{ 'banner-wrapper': true }}\n style={{ '--banner-content': contentColor } as { [key: string]: string }}\n role={isAssertive ? 'alert' : 'status'}\n aria-live={isAssertive ? undefined : 'polite'}\n >\n <div\n class=\"banner-surface\"\n style={{\n backgroundColor: this.getBg(),\n boxShadow: this.getElevation(),\n }}\n >\n {this.header && (\n <div class=\"banner-header-surface\">\n <div class=\"banner-header\" />\n </div>\n )}\n <div class=\"banner-body\">\n <span class=\"text-body-medium banner-message\">{this.message}</span>\n {this.showDismiss && (\n <button\n type=\"button\"\n class=\"banner-dismiss\"\n onClick={() => this.beginClose()}\n aria-label={this.dismissLabel}\n >\n ×\n </button>\n )}\n </div>\n </div>\n </div>\n );\n\n if (this.floating) {\n return (\n <Host style={{ display: 'contents' }}>\n <div class=\"floating-position\" style={{ zIndex: '9998' }}>\n <div class={{ 'floating-toast': true, 'floating-toast--closing': this.closing }}>\n {bannerEl}\n </div>\n </div>\n </Host>\n );\n }\n\n return <Host style={{ display: 'contents' }}>{bannerEl}</Host>;\n }\n}\n"],"mappings":"kEAAA,MAAMA,EAAY,IAAM,41ECQxB,MAAMC,EAAc,IACpB,MAAMC,EAAkB,I,MAOXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,+EAMUC,KAAAC,OAAuB,UACvBD,KAAAE,SAA2B,SAC3BF,KAAAG,QAAkB,GAElBH,KAAAI,OAAkB,MAElBJ,KAAAK,SAAoB,MACpBL,KAAAM,YAAuB,MACvBN,KAAAO,aAAuB,UAEdP,KAAAQ,QAAmB,MAI5BR,KAAAS,aAAqD,KACrDT,KAAAU,WAAmD,IAmH5D,CAjHC,gBAAAC,GACE,GAAIX,KAAKK,UAAYL,KAAKG,QAASH,KAAKY,iB,CAI1C,eAAAC,CAAgBC,GACd,GAAId,KAAKK,UAAYS,EAAQ,CAC3Bd,KAAKQ,QAAU,MACfR,KAAKY,iB,EAIT,oBAAAG,GACEf,KAAKgB,a,CAGC,WAAAA,GACN,GAAIhB,KAAKS,aAAc,CAAEQ,aAAajB,KAAKS,cAAeT,KAAKS,aAAe,I,CAC9E,GAAIT,KAAKU,WAAc,CAAEO,aAAajB,KAAKU,YAAeV,KAAKU,WAAa,I,EAGtE,eAAAE,GACNZ,KAAKgB,cACLhB,KAAKS,aAAeS,YAAW,KAC7BlB,KAAKS,aAAe,KACpBT,KAAKmB,YAAY,GAChBzB,E,CAGG,UAAAyB,GACNnB,KAAKgB,cACL,GAAIhB,KAAKK,SAAU,CACjBL,KAAKQ,QAAU,KACfR,KAAKU,WAAaQ,YAAW,KAC3BlB,KAAKQ,QAAU,MACfR,KAAKU,WAAa,KAClBV,KAAKoB,UAAUC,MAAM,GACpB5B,E,KACE,CACLO,KAAKoB,UAAUC,M,EAIX,eAAAC,GACN,GAAItB,KAAKE,WAAa,OAAQ,MAAO,qDACrC,MAAMqB,EAAIvB,KAAKE,WAAa,QAAU,OAASF,KAAKE,WAAa,SAAW,SAAW,SACvF,MAAO,0BAA0BqB,KAAKvB,KAAKC,S,CAGrC,KAAAuB,GACN,MAAO,0BAA0BxB,KAAKE,YAAYF,KAAKC,S,CAGjD,YAAAwB,GACN,OAAOzB,KAAKK,SACR,4CACA,qC,CAGN,MAAAqB,GACE,MAAMC,EAAe3B,KAAKsB,kBAC1B,MAAMM,EAAc5B,KAAKC,SAAW,WAEpC,MAAM4B,EACJC,EAAA,OACEC,MAAO,CAAE,iBAAkB,MAC3BC,MAAO,CAAE,mBAAoBL,GAC7BM,KAAML,EAAc,QAAU,SAAQ,YAC3BA,EAAcM,UAAY,UAErCJ,EAAA,OACEC,MAAM,iBACNC,MAAO,CACLG,gBAAiBnC,KAAKwB,QACtBY,UAAWpC,KAAKyB,iBAGjBzB,KAAKI,QACJ0B,EAAA,OAAKC,MAAM,yBACTD,EAAA,OAAKC,MAAM,mBAGfD,EAAA,OAAKC,MAAM,eACTD,EAAA,QAAMC,MAAM,mCAAmC/B,KAAKG,SACnDH,KAAKM,aACJwB,EAAA,UACEO,KAAK,SACLN,MAAM,iBACNO,QAAS,IAAMtC,KAAKmB,aAAY,aACpBnB,KAAKO,cAAY,QAUzC,GAAIP,KAAKK,SAAU,CACjB,OACEyB,EAACS,EAAI,CAACP,MAAO,CAAEQ,QAAS,aACtBV,EAAA,OAAKC,MAAM,oBAAoBC,MAAO,CAAES,OAAQ,SAC9CX,EAAA,OAAKC,MAAO,CAAE,iBAAkB,KAAM,0BAA2B/B,KAAKQ,UACnEqB,I,CAOX,OAAOC,EAACS,EAAI,CAACP,MAAO,CAAEQ,QAAS,aAAeX,E","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["bannerCss","Banner","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","intent","contrast","message","header","floating","showDismiss","dismissLabel","closing","dismissTimer","closeTimer","fadeOutMs","resolveCssTimeMs","TOKEN_DEFAULTS","motionShort3","animationDurationShort3","autoDismissMs","animationDelayLong2","componentDidLoad","scheduleDismiss","onMessageChange","newVal","disconnectedCallback","clearTimers","clearTimeout","setTimeout","beginClose","dsDismiss","emit","getContentColor","c","getBg","getElevation","render","contentColor","isAssertive","bannerEl","h","class","style","role","undefined","backgroundColor","boxShadow","type","onClick","Host","display","zIndex"],"sources":["src/wc/components/Banner/Banner.css?tag=ds-banner&encapsulation=scoped","src/wc/components/Banner/Banner.tsx"],"sourcesContent":[".banner-surface {\n position: relative;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border-radius: var(--dimension-radius-075);\n}\n\n.banner-header-surface {\n width: 100%;\n height: var(--dimension-space-100);\n flex-shrink: 0;\n overflow: hidden;\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.banner-header {\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n -45deg,\n var(--banner-content),\n var(--banner-content) var(--dimension-size-100),\n transparent var(--dimension-size-100),\n transparent var(--dimension-size-200)\n );\n}\n\n.banner-body {\n padding: var(--dimension-space-075);\n min-height: var(--dimension-size-400);\n display: flex;\n align-items: flex-start;\n gap: var(--dimension-space-075);\n}\n\n.banner-message {\n color: var(--banner-content);\n line-height: var(--typography-lineheight-md);\n display: block;\n flex: 1;\n min-width: 0;\n}\n\n.banner-dismiss {\n background: none;\n border: none;\n margin: 0;\n padding: var(--dimension-space-025);\n color: var(--banner-content);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: var(--dimension-radius-050);\n position: relative;\n font-size: 18px;\n line-height: 1;\n}\n\n.banner-dismiss::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-color: transparent;\n transition: var(--effect-transition-interaction-background-short-2, background-color var(--effect-motion-short-2));\n pointer-events: none;\n}\n\n.banner-dismiss:hover::before { background-color: var(--color-interaction-hover); }\n.banner-dismiss:active::before { background-color: var(--color-interaction-pressed); }\n\n.banner-dismiss:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-stroke-width-015);\n}\n\n/* ─── Floating ──────────────────────────────────────────────────────────────── */\n\n.floating-position {\n position: fixed;\n top: var(--dimension-space-200);\n left: 50%;\n transform: translateX(-50%);\n pointer-events: none;\n}\n\n.floating-toast {\n pointer-events: auto;\n animation: bannerFadeIn var(--effect-motion-short-2, 150ms) forwards;\n}\n\n.floating-toast--closing {\n animation: bannerFadeOut var(--effect-motion-short-3, 200ms) forwards;\n}\n\n@keyframes bannerFadeIn {\n from { opacity: 0; transform: translateY(-8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes bannerFadeOut {\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(-4px); }\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type BannerIntent =\n | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'\n | 'ai' | 'neutral' | 'walkthrough' | 'guide';\n\nexport type BannerContrast = 'faint' | 'medium' | 'bold' | 'strong';\n\n@Component({\n tag: 'ds-banner',\n styleUrl: 'Banner.css',\n scoped: true,\n})\nexport class Banner {\n @Prop() intent: BannerIntent = 'neutral';\n @Prop() contrast: BannerContrast = 'medium';\n @Prop() message: string = '';\n /** Renders the diagonal-stripe accent bar above the body. */\n @Prop() header: boolean = false;\n /** Renders at a fixed position (centered top) and auto-dismisses after 4 s. */\n @Prop() floating: boolean = false;\n @Prop() showDismiss: boolean = false;\n @Prop() dismissLabel: string = 'Dismiss';\n\n @State() private closing: boolean = false;\n\n @Event() dsDismiss!: EventEmitter<void>;\n\n private dismissTimer: ReturnType<typeof setTimeout> | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n private get fadeOutMs(): number {\n return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private get autoDismissMs(): number {\n return resolveCssTimeMs(TOKEN_DEFAULTS.animationDelayLong2, TOKEN_DEFAULTS.animationDelayLong2);\n }\n\n componentDidLoad() {\n if (this.floating && this.message) this.scheduleDismiss();\n }\n\n @Watch('message')\n onMessageChange(newVal: string) {\n if (this.floating && newVal) {\n this.closing = false;\n this.scheduleDismiss();\n }\n }\n\n disconnectedCallback() {\n this.clearTimers();\n }\n\n private clearTimers() {\n if (this.dismissTimer) { clearTimeout(this.dismissTimer); this.dismissTimer = null; }\n if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n }\n\n private scheduleDismiss() {\n this.clearTimers();\n this.dismissTimer = setTimeout(() => {\n this.dismissTimer = null;\n this.beginClose();\n }, this.autoDismissMs);\n }\n\n private beginClose() {\n this.clearTimers();\n if (this.floating) {\n this.closing = true;\n this.closeTimer = setTimeout(() => {\n this.closing = false;\n this.closeTimer = null;\n this.dsDismiss.emit();\n }, this.fadeOutMs);\n } else {\n this.dsDismiss.emit();\n }\n }\n\n private getContentColor(): string {\n if (this.contrast === 'bold') return 'var(--color-foreground-on-bold-background-primary)';\n const c = this.contrast === 'faint' ? 'bold' : this.contrast === 'medium' ? 'strong' : 'medium';\n return `var(--color-foreground-${c}-${this.intent})`;\n }\n\n private getBg(): string {\n return `var(--color-background-${this.contrast}-${this.intent})`;\n }\n\n private getElevation(): string {\n return this.floating\n ? 'var(--effect-elevation-elevated-floating)'\n : 'var(--effect-elevation-elevated-sm)';\n }\n\n render() {\n const contentColor = this.getContentColor();\n const isAssertive = this.intent === 'negative';\n\n const bannerEl = (\n <div\n class={{ 'banner-wrapper': true }}\n style={{ '--banner-content': contentColor } as { [key: string]: string }}\n role={isAssertive ? 'alert' : 'status'}\n aria-live={isAssertive ? undefined : 'polite'}\n >\n <div\n class=\"banner-surface\"\n style={{\n backgroundColor: this.getBg(),\n boxShadow: this.getElevation(),\n }}\n >\n {this.header && (\n <div class=\"banner-header-surface\">\n <div class=\"banner-header\" />\n </div>\n )}\n <div class=\"banner-body\">\n <span class=\"text-body-medium banner-message\">{this.message}</span>\n {this.showDismiss && (\n <button\n type=\"button\"\n class=\"banner-dismiss\"\n onClick={() => this.beginClose()}\n aria-label={this.dismissLabel}\n >\n ×\n </button>\n )}\n </div>\n </div>\n </div>\n );\n\n if (this.floating) {\n return (\n <Host style={{ display: 'contents' }}>\n <div class=\"floating-position\" style={{ zIndex: '9998' }}>\n <div class={{ 'floating-toast': true, 'floating-toast--closing': this.closing }}>\n {bannerEl}\n </div>\n </div>\n </Host>\n );\n }\n\n return <Host style={{ display: 'contents' }}>{bannerEl}</Host>;\n }\n}\n"],"mappings":"0IAAA,MAAMA,EAAY,IAAM,41E,MCcXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,+EAMUC,KAAAC,OAAuB,UACvBD,KAAAE,SAA2B,SAC3BF,KAAAG,QAAkB,GAElBH,KAAAI,OAAkB,MAElBJ,KAAAK,SAAoB,MACpBL,KAAAM,YAAuB,MACvBN,KAAAO,aAAuB,UAEdP,KAAAQ,QAAmB,MAI5BR,KAAAS,aAAqD,KACrDT,KAAAU,WAAmD,IA2H5D,CAzHC,aAAYC,GACV,OAAOC,EAAiBC,EAAeC,aAAcD,EAAeE,wB,CAGtE,iBAAYC,GACV,OAAOJ,EAAiBC,EAAeI,oBAAqBJ,EAAeI,oB,CAG7E,gBAAAC,GACE,GAAIlB,KAAKK,UAAYL,KAAKG,QAASH,KAAKmB,iB,CAI1C,eAAAC,CAAgBC,GACd,GAAIrB,KAAKK,UAAYgB,EAAQ,CAC3BrB,KAAKQ,QAAU,MACfR,KAAKmB,iB,EAIT,oBAAAG,GACEtB,KAAKuB,a,CAGC,WAAAA,GACN,GAAIvB,KAAKS,aAAc,CAAEe,aAAaxB,KAAKS,cAAeT,KAAKS,aAAe,I,CAC9E,GAAIT,KAAKU,WAAc,CAAEc,aAAaxB,KAAKU,YAAeV,KAAKU,WAAa,I,EAGtE,eAAAS,GACNnB,KAAKuB,cACLvB,KAAKS,aAAegB,YAAW,KAC7BzB,KAAKS,aAAe,KACpBT,KAAK0B,YAAY,GAChB1B,KAAKgB,c,CAGF,UAAAU,GACN1B,KAAKuB,cACL,GAAIvB,KAAKK,SAAU,CACjBL,KAAKQ,QAAU,KACfR,KAAKU,WAAae,YAAW,KAC3BzB,KAAKQ,QAAU,MACfR,KAAKU,WAAa,KAClBV,KAAK2B,UAAUC,MAAM,GACpB5B,KAAKW,U,KACH,CACLX,KAAK2B,UAAUC,M,EAIX,eAAAC,GACN,GAAI7B,KAAKE,WAAa,OAAQ,MAAO,qDACrC,MAAM4B,EAAI9B,KAAKE,WAAa,QAAU,OAASF,KAAKE,WAAa,SAAW,SAAW,SACvF,MAAO,0BAA0B4B,KAAK9B,KAAKC,S,CAGrC,KAAA8B,GACN,MAAO,0BAA0B/B,KAAKE,YAAYF,KAAKC,S,CAGjD,YAAA+B,GACN,OAAOhC,KAAKK,SACR,4CACA,qC,CAGN,MAAA4B,GACE,MAAMC,EAAelC,KAAK6B,kBAC1B,MAAMM,EAAcnC,KAAKC,SAAW,WAEpC,MAAMmC,EACJC,EAAA,OACEC,MAAO,CAAE,iBAAkB,MAC3BC,MAAO,CAAE,mBAAoBL,GAC7BM,KAAML,EAAc,QAAU,SAAQ,YAC3BA,EAAcM,UAAY,UAErCJ,EAAA,OACEC,MAAM,iBACNC,MAAO,CACLG,gBAAiB1C,KAAK+B,QACtBY,UAAW3C,KAAKgC,iBAGjBhC,KAAKI,QACJiC,EAAA,OAAKC,MAAM,yBACTD,EAAA,OAAKC,MAAM,mBAGfD,EAAA,OAAKC,MAAM,eACTD,EAAA,QAAMC,MAAM,mCAAmCtC,KAAKG,SACnDH,KAAKM,aACJ+B,EAAA,UACEO,KAAK,SACLN,MAAM,iBACNO,QAAS,IAAM7C,KAAK0B,aAAY,aACpB1B,KAAKO,cAAY,QAUzC,GAAIP,KAAKK,SAAU,CACjB,OACEgC,EAACS,EAAI,CAACP,MAAO,CAAEQ,QAAS,aACtBV,EAAA,OAAKC,MAAM,oBAAoBC,MAAO,CAAES,OAAQ,SAC9CX,EAAA,OAAKC,MAAO,CAAE,iBAAkB,KAAM,0BAA2BtC,KAAKQ,UACnE4B,I,CAOX,OAAOC,EAACS,EAAI,CAACP,MAAO,CAAEQ,QAAS,aAAeX,E","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as a,H as e,c as t,h as s,a as i,t as n}from"./index.js";import{S as r}from"./p-DznbYg1m.js";import{g as o,i as d}from"./p-BQq26pt9.js";import{d as h}from"./p-B_enucPQ.js";import{d as b}from"./p-_LI2ymhS.js";import{d as c}from"./p-DqBCQRRd.js";import{d as l}from"./p-CpbnmEu1.js";import{d as v}from"./p-DceSoh5V.js";function f(a,e,t){if(!a||!e){return{value:"",hideTabs:false}}if(a!==e&&!a.startsWith(`${e}/`)){return{value:"",hideTabs:false}}const s=a.slice(e.length);const i=s.startsWith("/")?s.slice(1).split("/")[0]:"";const n=o(t);if(!i){return{value:n[0]?.id??"",hideTabs:false}}const r=n.find((a=>a.id===i));if(r){return{value:r.id,hideTabs:false}}return{value:"",hideTabs:true}}function u(a,e,t,s,i,n){const r=t?g(t,[]):e??[];const o=n?g(n,[]):i??[];return a.length===0&&r.length>0||s.length===0&&o.length>0}function g(a,e){if(Array.isArray(a))return a;if(typeof a==="string"&&a!==""){try{const t=JSON.parse(a);return Array.isArray(t)?t:e}catch{return e}}return e}function p(a,e){if(!a)return null;const t=a.shadowRoot??a;return t.querySelector(e)}function m(a){return p(a,'[role="tablist"]')}function _(a,e){const t=[];let s=[];for(const i of a){if(d(i)){if(s.length>0){t.push({items:s});s=[]}continue}s.push({label:i.label,value:i.id,isSelected:i.id===e,isInactive:i.disabled})}if(s.length>0){t.push({items:s})}return t}function y(a,e){const t=o(a);return t.find((a=>a.id===e))??t[0]}function k(a,e){return y(a,e)?.label??"Tabs"}function w(a,e,t,s=2){const i=a-e;if(t){return i>-s}return i>s}const x=()=>`.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);transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3)}ds-app-shell[gradient].sc-ds-bar-nav-h,ds-app-shell[gradient] .sc-ds-bar-nav-h{--ds-shell-gradient-opacity:0.1}.bar-nav.sc-ds-bar-nav::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:var(--ds-shell-gradient-position-bar, 0 0);background-repeat:no-repeat}.bar-nav--default.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)}.bar-nav--navigation.sc-ds-bar-nav{--_bar-nav-bg:var(--color-navigation-background);--_bar-nav-border:var(--color-navigation-border-tertiary);--_bar-nav-fg-primary:var(--color-navigation-foreground-primary);--_bar-nav-fg-secondary:var(--color-navigation-foreground-secondary);--_bar-nav-hover:var(--color-navigation-interaction-hover);--_bar-nav-pressed:var(--color-navigation-interaction-pressed);--_bar-nav-focus:var(--color-navigation-interaction-focus);--_bar-nav-dot:var(--color-navigation-foreground-brand)}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:0;align-items:center}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger.sc-ds-bar-nav{flex:0 1 auto;min-width:0;max-width:100%;width:auto;overflow:hidden}.bar-nav__between.sc-ds-bar-nav{flex:1 1 0%;min-width:var(--dimension-space-100)}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label.sc-ds-bar-nav{flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:block;flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__actions.sc-ds-bar-nav{flex:0 0 auto;margin-left:0}.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__tab-trigger.sc-ds-bar-nav{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--dimension-space-050);flex:0 1 auto;min-width:0;width:max-content;max-width:100%;padding:var(--dimension-space-075);background-color:transparent;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--_bar-nav-fg-primary);position:relative;transition:color var(--effect-motion-short-2);height:var(--dimension-size-400);--_hover-bg:var(--_bar-nav-hover);--_pressed-bg:var(--_bar-nav-pressed);--_dot:var(--_bar-nav-dot);--_dot-ring:var(--_bar-nav-bg)}.bar-nav__tab-trigger.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none;transition:none;z-index:2}.bar-nav__tab-trigger.sc-ds-bar-nav:hover::after{background:var(--_hover-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:active::after{background:var(--_pressed-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--_bar-nav-focus);outline-offset:var(--dimension-space-025)}.bar-nav__tab-trigger--open.sc-ds-bar-nav::after{background:var(--_hover-bg)}.bar-nav__tab-trigger-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;padding:0 var(--dimension-space-025);overflow:hidden;--_fade-right:var(--dimension-space-025);z-index:1}.bar-nav__tab-trigger-label--truncated.sc-ds-bar-nav::after{content:'';position:absolute;top:0;right:var(--_fade-right);bottom:0;width:var(--dimension-size-400);background:linear-gradient(to right, transparent, var(--_bar-nav-bg));pointer-events:none;z-index:1}.bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:inline-block;max-width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;vertical-align:bottom}.bar-nav__tab-trigger-label-text--truncated.sc-ds-bar-nav{-webkit-mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--dimension-size-400)), transparent 100% );mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--dimension-size-400)), transparent 100% );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.bar-nav__tab-trigger-label--dot.sc-ds-bar-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050));--_fade-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.bar-nav__tab-trigger-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none;z-index:1}.bar-nav__tab-trigger-chevron.sc-ds-bar-nav{position:relative;flex-shrink:0;z-index:1}.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);color:var(--_bar-nav-fg-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-nav__actions.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);flex:0 0 auto;margin-left:auto}`;const C=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.dsTabChange=t(this,"dsTabChange");this.dsActionChange=t(this,"dsActionChange");this.tabs=[];this.tabsJson="";this.value="";this.actions=[];this.actionsJson="";this.navStyle="default";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.resolvedActions=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.triggerLabelTruncated=false;this.headerEl=null;this.triggerEl=null;this.triggerLabelTextEl=null;this.triggerLabelObserver=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.overflowCheckScheduled=false;this.intrinsicWidthRetryCount=0}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get activeTabLabel(){return k(this.resolvedTabs,this.effectiveValue)}get activeTabHasDot(){return!!y(this.resolvedTabs,this.effectiveValue)?.dot}onPropsChange(){this.resolvedTabs=this.tabsJson?g(this.tabsJson,[]):this.tabs??[];this.resolvedActions=this.actionsJson?g(this.actionsJson,[]):this.actions??[];this.syncValueFromUrl();this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}onUrlChange(){this.syncValueFromUrl();this.scheduleOverflowCheck()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(a){if(this.menuEl){this.menuEl.open=a}}onTabsCollapsedChange(a,e){if(!a){this.menuOpen=false;this.menuEl=null;this.triggerLabelTruncated=false;this.syncTriggerLabelObserver()}this.scheduleOverflowCheck();if(a){requestAnimationFrame((()=>{this.scheduleOverflowCheck();this.syncTriggerLabelObserver()}))}if(a||e===undefined||e===a)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.onPropsChange()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.scheduleOverflowCheck()}componentDidRender(){this.scheduleOverflowCheck();this.syncMenuAnchor();if(this.tabsCollapsed){this.updateTriggerLabelTruncation()}}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.syncTriggerLabelObserver(true)}syncHostPropsIfNeeded(){if(u(this.resolvedTabs,this.tabs,this.tabsJson,this.resolvedActions,this.actions,this.actionsJson)){this.onPropsChange()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let e=a.HOST_PROP_SYNC_BUDGET;const t=()=>{this.syncHostPropsIfNeeded();if(--e>0){requestAnimationFrame(t)}};queueMicrotask(t)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>this.scheduleOverflowCheck()));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.overflowCheckScheduled)return;this.overflowCheckScheduled=true;requestAnimationFrame((()=>{this.overflowCheckScheduled=false;this.updateTabsCollapsed();this.updateTriggerLabelTruncation()}))}syncTriggerLabelObserver(a=false){this.triggerLabelObserver?.disconnect();this.triggerLabelObserver=null;if(a||!this.tabsCollapsed||!this.triggerLabelTextEl){return}this.updateTriggerLabelTruncation();if(typeof ResizeObserver==="undefined")return;this.triggerLabelObserver=new ResizeObserver((()=>this.updateTriggerLabelTruncation()));this.triggerLabelObserver.observe(this.triggerLabelTextEl);if(this.triggerEl){this.triggerLabelObserver.observe(this.triggerEl)}}updateTriggerLabelTruncation(){const a=this.triggerLabelTextEl;if(!a||!this.tabsCollapsed){if(this.triggerLabelTruncated){this.triggerLabelTruncated=false}return}const e=a.scrollWidth>a.clientWidth+1;if(e!==this.triggerLabelTruncated){this.triggerLabelTruncated=e}}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const a=getComputedStyle(this.headerEl);const e=parseFloat(a.columnGap||a.gap||"0")||0;const t=this.headerEl.querySelector(".bar-nav__actions");const s=t?.offsetWidth??0;const i=(parseFloat(a.paddingLeft)||0)+(parseFloat(a.paddingRight)||0);const n=this.tabsCollapsed?parseFloat(getComputedStyle(this.headerEl).getPropertyValue("--dimension-space-100").trim())||8:t?e:0;const r=this.headerEl.clientWidth-i-s-n;return Math.max(0,r)}getTabsIntrinsicWidth(){const a=m(this.probeTabGroupEl);return a?.scrollWidth??0}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=a.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.tabsCollapsed=false;this.menuOpen=false}this.intrinsicWidthRetryCount=0;return}const a=this.getTabsIntrinsicWidth();if(a===0){this.scheduleIntrinsicWidthRetry();return}this.intrinsicWidthRetryCount=0;const e=w(a,this.getLeftZoneAvailableWidth(),this.tabsCollapsed);if(e!==this.tabsCollapsed){this.tabsCollapsed=e;if(!e){this.menuOpen=false}}}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.tabsCollapsed)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(a){const e=a.detail;if(e?.value!==undefined){this.selectTab(String(e.value))}this.menuOpen=false}handleMenuClose(){this.menuOpen=false}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=_(this.resolvedTabs,this.effectiveValue)}syncValueFromUrl(){if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:a,hideTabs:e}=f(this.currentUrl,this.basePath,this.resolvedTabs);this.urlDerivedValue=a;this.hideTabsForDetailRoute=e}selectTab(a){this.value=a;this.dsTabChange.emit(a)}focusVisibleSelectedTab(){const a=p(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);a?.focus({preventScroll:true})}handleTabChange(a){this.selectTab(a.detail)}handleActionChange(a,e){const t=e.detail;this.dsActionChange.emit({id:a,selected:t})}toggleTabMenu(){if(this.menuOpen){this.menuOpen=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth=`${this.triggerEl.offsetWidth}px`;this.syncMenuSections()}this.menuOpen=true}handleTriggerKeyDown(a){if(!this.tabsCollapsed)return;if(!this.menuOpen){if(a.key==="ArrowDown"||a.key==="ArrowUp"||a.key==="Enter"||a.key===" "){a.preventDefault();this.toggleTabMenu()}return}if(a.key==="Escape"){a.preventDefault();this.menuOpen=false;this.triggerEl?.focus()}}get tabSurface(){return this.navStyle==="navigation"?"navigation":undefined}render(){const a=this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const e=this.tabSurface;return s(i,{key:"33da1d7ce43e3dd8dce75a099b07640c5f1d6f84"},s("header",{key:"f19ca4404e1792078ff7f5139d6be1ab042fe413",class:{"bar-nav":true,"bar-nav--navigation":this.navStyle==="navigation","bar-nav--default":this.navStyle==="default","bar-nav--tabs-collapsed":a&&this.tabsCollapsed},style:{viewTransitionName:r},ref:a=>{this.headerEl=a;if(a&&!this.resizeObserver){this.setupOverflowObserver()}}},a&&s("div",{key:"b8413a359e92cf997539baf5bd6cfa31ee651a2e",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},s("ds-tab-group-nav",{key:"fb1655cb894f477a20c7fc9c115c65d13107e29b",ref:a=>{this.probeTabGroupEl=a??null;if(a){this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue,background:e})),a&&!this.tabsCollapsed&&s("div",{key:"e7f1d1a17d1066a1ab8176a77d2fe6a5292191aa",class:"bar-nav__left"},s("ds-tab-group-nav",{key:"c27ff659074d68142fceee3f6f3cb85b4e3d4a51",class:"bar-nav__tabs-visible",ref:a=>{this.visibleTabGroupEl=a??null},tabs:this.resolvedTabs,value:this.effectiveValue,background:e,onDsChange:a=>this.handleTabChange(a)})),!a&&this.heading&&s("span",{key:"e172c94515fbcac2cf10edbf0d7a8721fd4c7bc2",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),a&&this.tabsCollapsed&&s("button",{key:"d3b8912dce74a554725d5d26c099e9acc93ea58a",type:"button",class:{"bar-nav__tab-trigger":true,"bar-nav__tab-trigger--open":this.menuOpen},ref:a=>{this.triggerEl=a},"aria-haspopup":"menu","aria-expanded":this.menuOpen,"aria-label":`${this.activeTabLabel} tabs`,onClick:()=>this.toggleTabMenu(),onKeyDown:a=>this.handleTriggerKeyDown(a)},s("span",{key:"9769b123abad90bb4442782a56c0f19aadd9e8f2",class:{"bar-nav__tab-trigger-label":true,"bar-nav__tab-trigger-label--dot":this.activeTabHasDot,"bar-nav__tab-trigger-label--truncated":this.triggerLabelTruncated}},s("span",{key:"4a5e71313e536d829a7e2a7be18f285a4b072193",class:{"bar-nav__tab-trigger-label-text":true,"bar-nav__tab-trigger-label-text--truncated":this.triggerLabelTruncated,"text-body-medium-emphasis":true},ref:a=>{const e=a??null;if(e===this.triggerLabelTextEl)return;this.triggerLabelTextEl=e;if(this.tabsCollapsed){this.syncTriggerLabelObserver()}}},this.activeTabLabel),this.activeTabHasDot&&s("ds-badge",{key:"60d13afa8219b962a4707ac3e000a2a70204bc30",class:"bar-nav__tab-trigger-dot",variant:"dot",background:"var(--_bar-nav-bg)",label:"","aria-hidden":"true"})),s("ds-icon",{key:"e1dc20d24b29dfd44e92a5dc7b8f30a1b9cf0128",name:"ChevronDown",size:"md",color:"inherit",class:"bar-nav__tab-trigger-chevron"})),a&&this.tabsCollapsed&&this.resolvedActions.length>0&&s("div",{key:"f4ee3beb48119d5eced323a1e731bdf15ccc87d7",class:"bar-nav__between","aria-hidden":"true"}),this.resolvedActions.length>0&&s("div",{key:"b4ccbdb8c6616b1f7a363ca84810fa2d30805e75",class:"bar-nav__actions"},this.resolvedActions.map((a=>s("ds-bar-nav-action",{key:a.id,icon:a.icon,selected:a.selected??false,dot:a.dot??false,inactive:a.inactive,"aria-label":a.ariaLabel??a.id,background:e,onDsChange:e=>this.handleActionChange(a.id,e)}))))),a&&this.tabsCollapsed&&s("ds-menu",{key:"16d3c2b8f8c2a56e73e6f7ea956f4f7cda1bfed5",ref:a=>{this.menuEl=a??null},open:this.menuOpen,sections:_(this.resolvedTabs,this.effectiveValue),side:"bottom",align:"start",onDsSelect:a=>this.handleMenuSelect(a),onDsClose:()=>this.handleMenuClose()}))}static get watchers(){return{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return x()}},[2,"ds-bar-nav",{tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],actions:[16],actionsJson:[1,"actions-json"],heading:[1],navStyle:[513,"nav-style"],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],resolvedActions:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],triggerLabelTruncated:[32]},undefined,{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);C.HOST_PROP_SYNC_BUDGET=8;C.INTRINSIC_WIDTH_RETRY_MAX=3;function T(){if(typeof customElements==="undefined"){return}const a=["ds-bar-nav","ds-badge","ds-bar-nav-action","ds-icon","ds-menu","ds-tab-group-nav"];a.forEach((a=>{switch(a){case"ds-bar-nav":if(!customElements.get(n(a))){customElements.define(n(a),C)}break;case"ds-badge":if(!customElements.get(n(a))){h()}break;case"ds-bar-nav-action":if(!customElements.get(n(a))){b()}break;case"ds-icon":if(!customElements.get(n(a))){c()}break;case"ds-menu":if(!customElements.get(n(a))){l()}break;case"ds-tab-group-nav":if(!customElements.get(n(a))){v()}break}}))}T();const z=C;const S=T;export{z as DsBarNav,S as defineCustomElement};
|
|
1
|
+
import{p as a,H as e,c as t,h as s,a as i,t as n}from"./index.js";import{S as r}from"./p-DfL2MOso.js";import{g as o,i as d}from"./p-BQq26pt9.js";import{d as h}from"./p-B_enucPQ.js";import{d as b}from"./p-_LI2ymhS.js";import{d as c}from"./p-DqBCQRRd.js";import{d as l}from"./p-C4WbCXBj.js";import{d as v}from"./p-DceSoh5V.js";function f(a,e,t){if(!a||!e){return{value:"",hideTabs:false}}if(a!==e&&!a.startsWith(`${e}/`)){return{value:"",hideTabs:false}}const s=a.slice(e.length);const i=s.startsWith("/")?s.slice(1).split("/")[0]:"";const n=o(t);if(!i){return{value:n[0]?.id??"",hideTabs:false}}const r=n.find((a=>a.id===i));if(r){return{value:r.id,hideTabs:false}}return{value:"",hideTabs:true}}function u(a,e,t,s,i,n){const r=t?g(t,[]):e??[];const o=n?g(n,[]):i??[];return a.length===0&&r.length>0||s.length===0&&o.length>0}function g(a,e){if(Array.isArray(a))return a;if(typeof a==="string"&&a!==""){try{const t=JSON.parse(a);return Array.isArray(t)?t:e}catch{return e}}return e}function p(a,e){if(!a)return null;const t=a.shadowRoot??a;return t.querySelector(e)}function m(a){return p(a,'[role="tablist"]')}function _(a,e){const t=[];let s=[];for(const i of a){if(d(i)){if(s.length>0){t.push({items:s});s=[]}continue}s.push({label:i.label,value:i.id,isSelected:i.id===e,isInactive:i.disabled})}if(s.length>0){t.push({items:s})}return t}function y(a,e){const t=o(a);return t.find((a=>a.id===e))??t[0]}function k(a,e){return y(a,e)?.label??"Tabs"}function w(a,e,t,s=2){const i=a-e;if(t){return i>-s}return i>s}const x=()=>`.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);transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3)}ds-app-shell[gradient].sc-ds-bar-nav-h,ds-app-shell[gradient] .sc-ds-bar-nav-h{--ds-shell-gradient-opacity:0.1}.bar-nav.sc-ds-bar-nav::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:var(--ds-shell-gradient-position-bar, 0 0);background-repeat:no-repeat}.bar-nav--default.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)}.bar-nav--navigation.sc-ds-bar-nav{--_bar-nav-bg:var(--color-navigation-background);--_bar-nav-border:var(--color-navigation-border-tertiary);--_bar-nav-fg-primary:var(--color-navigation-foreground-primary);--_bar-nav-fg-secondary:var(--color-navigation-foreground-secondary);--_bar-nav-hover:var(--color-navigation-interaction-hover);--_bar-nav-pressed:var(--color-navigation-interaction-pressed);--_bar-nav-focus:var(--color-navigation-interaction-focus);--_bar-nav-dot:var(--color-navigation-foreground-brand)}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:0;align-items:center}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger.sc-ds-bar-nav{flex:0 1 auto;min-width:0;max-width:100%;width:auto;overflow:hidden}.bar-nav__between.sc-ds-bar-nav{flex:1 1 0%;min-width:var(--dimension-space-100)}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label.sc-ds-bar-nav{flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:block;flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__actions.sc-ds-bar-nav{flex:0 0 auto;margin-left:0}.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__tab-trigger.sc-ds-bar-nav{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--dimension-space-050);flex:0 1 auto;min-width:0;width:max-content;max-width:100%;padding:var(--dimension-space-075);background-color:transparent;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--_bar-nav-fg-primary);position:relative;transition:color var(--effect-motion-short-2);height:var(--dimension-size-400);--_hover-bg:var(--_bar-nav-hover);--_pressed-bg:var(--_bar-nav-pressed);--_dot:var(--_bar-nav-dot);--_dot-ring:var(--_bar-nav-bg)}.bar-nav__tab-trigger.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none;transition:none;z-index:2}.bar-nav__tab-trigger.sc-ds-bar-nav:hover::after{background:var(--_hover-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:active::after{background:var(--_pressed-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--_bar-nav-focus);outline-offset:var(--dimension-space-025)}.bar-nav__tab-trigger--open.sc-ds-bar-nav::after{background:var(--_hover-bg)}.bar-nav__tab-trigger-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;padding:0 var(--dimension-space-025);overflow:hidden;--_fade-right:var(--dimension-space-025);z-index:1}.bar-nav__tab-trigger-label--truncated.sc-ds-bar-nav::after{content:'';position:absolute;top:0;right:var(--_fade-right);bottom:0;width:var(--dimension-size-400);background:linear-gradient(to right, transparent, var(--_bar-nav-bg));pointer-events:none;z-index:1}.bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:inline-block;max-width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;vertical-align:bottom}.bar-nav__tab-trigger-label-text--truncated.sc-ds-bar-nav{-webkit-mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--dimension-size-400)), transparent 100% );mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--dimension-size-400)), transparent 100% );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.bar-nav__tab-trigger-label--dot.sc-ds-bar-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050));--_fade-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.bar-nav__tab-trigger-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none;z-index:1}.bar-nav__tab-trigger-chevron.sc-ds-bar-nav{position:relative;flex-shrink:0;z-index:1}.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);color:var(--_bar-nav-fg-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-nav__actions.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);flex:0 0 auto;margin-left:auto}`;const C=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.dsTabChange=t(this,"dsTabChange");this.dsActionChange=t(this,"dsActionChange");this.tabs=[];this.tabsJson="";this.value="";this.actions=[];this.actionsJson="";this.navStyle="default";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.resolvedActions=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.triggerLabelTruncated=false;this.headerEl=null;this.triggerEl=null;this.triggerLabelTextEl=null;this.triggerLabelObserver=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.overflowCheckScheduled=false;this.intrinsicWidthRetryCount=0}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get activeTabLabel(){return k(this.resolvedTabs,this.effectiveValue)}get activeTabHasDot(){return!!y(this.resolvedTabs,this.effectiveValue)?.dot}onPropsChange(){this.resolvedTabs=this.tabsJson?g(this.tabsJson,[]):this.tabs??[];this.resolvedActions=this.actionsJson?g(this.actionsJson,[]):this.actions??[];this.syncValueFromUrl();this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}onUrlChange(){this.syncValueFromUrl();this.scheduleOverflowCheck()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(a){if(this.menuEl){this.menuEl.open=a}}onTabsCollapsedChange(a,e){if(!a){this.menuOpen=false;this.menuEl=null;this.triggerLabelTruncated=false;this.syncTriggerLabelObserver()}this.scheduleOverflowCheck();if(a){requestAnimationFrame((()=>{this.scheduleOverflowCheck();this.syncTriggerLabelObserver()}))}if(a||e===undefined||e===a)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.onPropsChange()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.scheduleOverflowCheck()}componentDidRender(){this.scheduleOverflowCheck();this.syncMenuAnchor();if(this.tabsCollapsed){this.updateTriggerLabelTruncation()}}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.syncTriggerLabelObserver(true)}syncHostPropsIfNeeded(){if(u(this.resolvedTabs,this.tabs,this.tabsJson,this.resolvedActions,this.actions,this.actionsJson)){this.onPropsChange()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let e=a.HOST_PROP_SYNC_BUDGET;const t=()=>{this.syncHostPropsIfNeeded();if(--e>0){requestAnimationFrame(t)}};queueMicrotask(t)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>this.scheduleOverflowCheck()));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.overflowCheckScheduled)return;this.overflowCheckScheduled=true;requestAnimationFrame((()=>{this.overflowCheckScheduled=false;this.updateTabsCollapsed();this.updateTriggerLabelTruncation()}))}syncTriggerLabelObserver(a=false){this.triggerLabelObserver?.disconnect();this.triggerLabelObserver=null;if(a||!this.tabsCollapsed||!this.triggerLabelTextEl){return}this.updateTriggerLabelTruncation();if(typeof ResizeObserver==="undefined")return;this.triggerLabelObserver=new ResizeObserver((()=>this.updateTriggerLabelTruncation()));this.triggerLabelObserver.observe(this.triggerLabelTextEl);if(this.triggerEl){this.triggerLabelObserver.observe(this.triggerEl)}}updateTriggerLabelTruncation(){const a=this.triggerLabelTextEl;if(!a||!this.tabsCollapsed){if(this.triggerLabelTruncated){this.triggerLabelTruncated=false}return}const e=a.scrollWidth>a.clientWidth+1;if(e!==this.triggerLabelTruncated){this.triggerLabelTruncated=e}}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const a=getComputedStyle(this.headerEl);const e=parseFloat(a.columnGap||a.gap||"0")||0;const t=this.headerEl.querySelector(".bar-nav__actions");const s=t?.offsetWidth??0;const i=(parseFloat(a.paddingLeft)||0)+(parseFloat(a.paddingRight)||0);const n=this.tabsCollapsed?parseFloat(getComputedStyle(this.headerEl).getPropertyValue("--dimension-space-100").trim())||8:t?e:0;const r=this.headerEl.clientWidth-i-s-n;return Math.max(0,r)}getTabsIntrinsicWidth(){const a=m(this.probeTabGroupEl);return a?.scrollWidth??0}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=a.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.tabsCollapsed=false;this.menuOpen=false}this.intrinsicWidthRetryCount=0;return}const a=this.getTabsIntrinsicWidth();if(a===0){this.scheduleIntrinsicWidthRetry();return}this.intrinsicWidthRetryCount=0;const e=w(a,this.getLeftZoneAvailableWidth(),this.tabsCollapsed);if(e!==this.tabsCollapsed){this.tabsCollapsed=e;if(!e){this.menuOpen=false}}}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.tabsCollapsed)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(a){const e=a.detail;if(e?.value!==undefined){this.selectTab(String(e.value))}this.menuOpen=false}handleMenuClose(){this.menuOpen=false}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=_(this.resolvedTabs,this.effectiveValue)}syncValueFromUrl(){if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:a,hideTabs:e}=f(this.currentUrl,this.basePath,this.resolvedTabs);this.urlDerivedValue=a;this.hideTabsForDetailRoute=e}selectTab(a){this.value=a;this.dsTabChange.emit(a)}focusVisibleSelectedTab(){const a=p(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);a?.focus({preventScroll:true})}handleTabChange(a){this.selectTab(a.detail)}handleActionChange(a,e){const t=e.detail;this.dsActionChange.emit({id:a,selected:t})}toggleTabMenu(){if(this.menuOpen){this.menuOpen=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth=`${this.triggerEl.offsetWidth}px`;this.syncMenuSections()}this.menuOpen=true}handleTriggerKeyDown(a){if(!this.tabsCollapsed)return;if(!this.menuOpen){if(a.key==="ArrowDown"||a.key==="ArrowUp"||a.key==="Enter"||a.key===" "){a.preventDefault();this.toggleTabMenu()}return}if(a.key==="Escape"){a.preventDefault();this.menuOpen=false;this.triggerEl?.focus()}}get tabSurface(){return this.navStyle==="navigation"?"navigation":undefined}render(){const a=this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const e=this.tabSurface;return s(i,{key:"33da1d7ce43e3dd8dce75a099b07640c5f1d6f84"},s("header",{key:"f19ca4404e1792078ff7f5139d6be1ab042fe413",class:{"bar-nav":true,"bar-nav--navigation":this.navStyle==="navigation","bar-nav--default":this.navStyle==="default","bar-nav--tabs-collapsed":a&&this.tabsCollapsed},style:{viewTransitionName:r},ref:a=>{this.headerEl=a;if(a&&!this.resizeObserver){this.setupOverflowObserver()}}},a&&s("div",{key:"b8413a359e92cf997539baf5bd6cfa31ee651a2e",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},s("ds-tab-group-nav",{key:"fb1655cb894f477a20c7fc9c115c65d13107e29b",ref:a=>{this.probeTabGroupEl=a??null;if(a){this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue,background:e})),a&&!this.tabsCollapsed&&s("div",{key:"e7f1d1a17d1066a1ab8176a77d2fe6a5292191aa",class:"bar-nav__left"},s("ds-tab-group-nav",{key:"c27ff659074d68142fceee3f6f3cb85b4e3d4a51",class:"bar-nav__tabs-visible",ref:a=>{this.visibleTabGroupEl=a??null},tabs:this.resolvedTabs,value:this.effectiveValue,background:e,onDsChange:a=>this.handleTabChange(a)})),!a&&this.heading&&s("span",{key:"e172c94515fbcac2cf10edbf0d7a8721fd4c7bc2",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),a&&this.tabsCollapsed&&s("button",{key:"d3b8912dce74a554725d5d26c099e9acc93ea58a",type:"button",class:{"bar-nav__tab-trigger":true,"bar-nav__tab-trigger--open":this.menuOpen},ref:a=>{this.triggerEl=a},"aria-haspopup":"menu","aria-expanded":this.menuOpen,"aria-label":`${this.activeTabLabel} tabs`,onClick:()=>this.toggleTabMenu(),onKeyDown:a=>this.handleTriggerKeyDown(a)},s("span",{key:"9769b123abad90bb4442782a56c0f19aadd9e8f2",class:{"bar-nav__tab-trigger-label":true,"bar-nav__tab-trigger-label--dot":this.activeTabHasDot,"bar-nav__tab-trigger-label--truncated":this.triggerLabelTruncated}},s("span",{key:"4a5e71313e536d829a7e2a7be18f285a4b072193",class:{"bar-nav__tab-trigger-label-text":true,"bar-nav__tab-trigger-label-text--truncated":this.triggerLabelTruncated,"text-body-medium-emphasis":true},ref:a=>{const e=a??null;if(e===this.triggerLabelTextEl)return;this.triggerLabelTextEl=e;if(this.tabsCollapsed){this.syncTriggerLabelObserver()}}},this.activeTabLabel),this.activeTabHasDot&&s("ds-badge",{key:"60d13afa8219b962a4707ac3e000a2a70204bc30",class:"bar-nav__tab-trigger-dot",variant:"dot",background:"var(--_bar-nav-bg)",label:"","aria-hidden":"true"})),s("ds-icon",{key:"e1dc20d24b29dfd44e92a5dc7b8f30a1b9cf0128",name:"ChevronDown",size:"md",color:"inherit",class:"bar-nav__tab-trigger-chevron"})),a&&this.tabsCollapsed&&this.resolvedActions.length>0&&s("div",{key:"f4ee3beb48119d5eced323a1e731bdf15ccc87d7",class:"bar-nav__between","aria-hidden":"true"}),this.resolvedActions.length>0&&s("div",{key:"b4ccbdb8c6616b1f7a363ca84810fa2d30805e75",class:"bar-nav__actions"},this.resolvedActions.map((a=>s("ds-bar-nav-action",{key:a.id,icon:a.icon,selected:a.selected??false,dot:a.dot??false,inactive:a.inactive,"aria-label":a.ariaLabel??a.id,background:e,onDsChange:e=>this.handleActionChange(a.id,e)}))))),a&&this.tabsCollapsed&&s("ds-menu",{key:"16d3c2b8f8c2a56e73e6f7ea956f4f7cda1bfed5",ref:a=>{this.menuEl=a??null},open:this.menuOpen,sections:_(this.resolvedTabs,this.effectiveValue),side:"bottom",align:"start",onDsSelect:a=>this.handleMenuSelect(a),onDsClose:()=>this.handleMenuClose()}))}static get watchers(){return{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return x()}},[2,"ds-bar-nav",{tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],actions:[16],actionsJson:[1,"actions-json"],heading:[1],navStyle:[513,"nav-style"],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],resolvedActions:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],triggerLabelTruncated:[32]},undefined,{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);C.HOST_PROP_SYNC_BUDGET=8;C.INTRINSIC_WIDTH_RETRY_MAX=3;function T(){if(typeof customElements==="undefined"){return}const a=["ds-bar-nav","ds-badge","ds-bar-nav-action","ds-icon","ds-menu","ds-tab-group-nav"];a.forEach((a=>{switch(a){case"ds-bar-nav":if(!customElements.get(n(a))){customElements.define(n(a),C)}break;case"ds-badge":if(!customElements.get(n(a))){h()}break;case"ds-bar-nav-action":if(!customElements.get(n(a))){b()}break;case"ds-icon":if(!customElements.get(n(a))){c()}break;case"ds-menu":if(!customElements.get(n(a))){l()}break;case"ds-tab-group-nav":if(!customElements.get(n(a))){v()}break}}))}T();const z=C;const S=T;export{z as DsBarNav,S as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-bar-nav.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as o,c as r,h as s,a as i,t as d}from"./index.js";import{d as e}from"./p
|
|
1
|
+
import{p as t,H as o,c as r,h as s,a as i,t as d}from"./index.js";import{d as e}from"./p-CsO880L-.js";import{d as n}from"./p-DqBCQRRd.js";import{d as a}from"./p-DTjpgYJV.js";const u=()=>`.group.sc-ds-button-group{display:inline-flex;align-items:stretch;border-radius:var(--dimension-radius-050);position:relative}.group.sc-ds-button-group::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}.groupElevated.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-sm)}.groupElevated.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-sm)}.groupFlat.sc-ds-button-group::after{box-shadow:inset 0 0 0 1px var(--color-border-tertiary)}.groupFloating.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-floating)}.groupFloating.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-floating)}.groupRounded.sc-ds-button-group{border-radius:var(--dimension-radius-half)}.item.sc-ds-button-group{flex-shrink:0;box-shadow:none !important;border:none !important}.item.sc-ds-button-group:active{transform:none !important}.divider.sc-ds-button-group{width:1px;flex-shrink:0;background-color:var(--color-border-tertiary);position:relative;z-index:1;margin:0 -0.5px;pointer-events:none}.dividerGhost.sc-ds-button-group{height:20px;align-self:center}.dividerGhostXS.sc-ds-button-group{height:12px}.dividerGhostSM.sc-ds-button-group{height:16px}.dividerGhostLG.sc-ds-button-group{height:24px}.item.sc-ds-button-group:hover+.dividerGhost.sc-ds-button-group,.dividerGhost.sc-ds-button-group:has(+.item:hover){opacity:0}.group.sc-ds-button-group .itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-050) !important;border-top-right-radius:var(--dimension-radius-050) !important;border-bottom-right-radius:var(--dimension-radius-050) !important;border-bottom-left-radius:var(--dimension-radius-050) !important}.first.sc-ds-button-group{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.last.sc-ds-button-group{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.middle.sc-ds-button-group{border-radius:0 !important}.groupRounded.sc-ds-button-group .first.itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-half) !important;border-bottom-left-radius:var(--dimension-radius-half) !important}.groupRounded.sc-ds-button-group .last.itemShort.sc-ds-button-group::after{border-top-right-radius:var(--dimension-radius-half) !important;border-bottom-right-radius:var(--dimension-radius-half) !important}.roundedFirstMD.sc-ds-button-group{padding-right:var(--dimension-space-100) !important}.roundedLastMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important}.roundedMidMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important;padding-right:var(--dimension-space-100) !important}.roundedFirstSM.sc-ds-button-group{padding-right:var(--dimension-space-075) !important}.roundedLastSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important}.roundedMidSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important;padding-right:var(--dimension-space-075) !important}.roundedFirstLG.sc-ds-button-group{padding-right:var(--dimension-space-150) !important}.roundedLastLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important}.roundedMidLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important;padding-right:var(--dimension-space-150) !important}`;const p=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=r(this,"dsClick");this.items=[];this.elevation="flat";this.size="md";this.rounded=false}render(){const t=this.items;const o=t.length;const r=this.elevation;const d=r.charAt(0).toUpperCase()+r.slice(1);const e=r==="none";const n={group:true,[`group${d}`]:true,groupRounded:this.rounded};return s(i,{key:"a49a471ef45ebc7caf2883cffaaf7b0970b12906"},s("div",{key:"d98701ed3c7826adfe98057c2a2f00f02f9fc404",class:n,role:"group"},t.map(((t,i)=>{const d=i===0;const n=i===o-1;const a=!d&&!n;const u=t.variant??"secondary";const p=!!t.icon&&!t.label;const c=this.rounded&&!p&&this.size!=="xs";const g=this.size.toUpperCase();const m={item:true,first:d,last:n,middle:a,itemShort:e&&u==="secondary",[`roundedFirst${g}`]:!!(c&&d),[`roundedLast${g}`]:!!(c&&n),[`roundedMid${g}`]:!!(c&&a)};const b={divider:true,dividerGhost:e,dividerGhostXS:e&&this.size==="xs",dividerGhostSM:e&&this.size==="sm",dividerGhostLG:e&&this.size==="lg"};return[i>0&&s("div",{class:b,"aria-hidden":"true"}),s("ds-button",{class:m,variant:u,intent:t.intent??"none",elevation:r,size:this.size,label:t.label,rounded:this.rounded,inactive:t.inactive,href:t.href,onDsClick:()=>this.dsClick.emit(i)},t.icon&&s("ds-icon",{slot:"icon",name:t.icon}))]}))))}static get style(){return u()}},[2,"ds-button-group",{items:[16],elevation:[1],size:[1],rounded:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-button-group","ds-button","ds-icon","ds-loader"];t.forEach((t=>{switch(t){case"ds-button-group":if(!customElements.get(d(t))){customElements.define(d(t),p)}break;case"ds-button":if(!customElements.get(d(t))){e()}break;case"ds-icon":if(!customElements.get(d(t))){n()}break;case"ds-loader":if(!customElements.get(d(t))){a()}break}}))}c();const g=p;const m=c;export{g as DsButtonGroup,m as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-button-group.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{B as
|
|
1
|
+
import{B as s,d as o}from"./p-CsO880L-.js";const t=s;const p=o;export{t as DsButton,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-button.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{L as o,d as s}from"./p-
|
|
1
|
+
import{L as o,d as s}from"./p-DTjpgYJV.js";const p=o;const t=s;export{p as DsLoader,t as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-loader.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{M as o,d as s}from"./p-
|
|
1
|
+
import{M as o,d as s}from"./p-C4WbCXBj.js";const t=o;const p=s;export{t as DsMenu,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-menu.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as
|
|
1
|
+
import{p as e,H as a,c as s,h as t,a as o,t as i}from"./index.js";import{r as d}from"./p-BvmooLHV.js";import{T as n}from"./p-BRju0sEC.js";const l=()=>`.modal-backdrop.sc-ds-modal{background-color:var(--color-background-shade);backdrop-filter:blur(var(--effect-blur-sm));-webkit-backdrop-filter:blur(var(--effect-blur-sm));animation:modalBackdropIn var(--effect-motion-short-2) forwards;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}.modal-dialog.sc-ds-modal{display:flex;flex-direction:column;max-height:calc(100vh - 2 * var(--dimension-space-200));overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-300);box-shadow:var(--effect-elevation-elevated-floating);animation:modalDialogIn var(--effect-motion-short-2) forwards;outline:none;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}.modal-header.sc-ds-modal{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);flex-shrink:0}.modal-title.sc-ds-modal{margin:0}.modal-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100);color:var(--color-foreground-secondary);text-wrap:balance}.modal-body.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200);overflow-y:auto;flex:1}.modal-footer.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);flex-shrink:0}.modal-footer.sc-ds-modal:empty{display:none}`;const r={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const c=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let m=0;const f=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++m;this.titleId=`ds-modal-title-${m}`;this.subtitleId=`ds-modal-subtitle-${m}`;this.previousFocus=null;this.escapeHandler=null;this.tabHandler=null;this.closeTimer=null}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.previousFocus=document.activeElement;requestAnimationFrame((()=>{this.focusFirst();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null;this.previousFocus?.focus?.();this.previousFocus=null}),this.closeAnimationMs)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const a=this.getFocusables(e);(a[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(c)).filter((e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-hidden")!=="true"))}setupListeners(){this.escapeHandler=e=>{if(e.key==="Escape"){e.preventDefault();this.close()}};this.tabHandler=e=>{if(e.key!=="Tab")return;const a=this.el.querySelector(".modal-dialog");if(!a)return;const s=this.getFocusables(a);if(!s.length){e.preventDefault();a.focus();return}const t=s[0];const o=s[s.length-1];const i=document.activeElement;if(e.shiftKey){if(i===t||i===a||!a.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!a.contains(i)){e.preventDefault();t.focus()}}};document.addEventListener("keydown",this.escapeHandler);document.addEventListener("keydown",this.tabHandler)}teardownListeners(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.dsClose.emit();this.open=false}handleBackdropMouseDown(e){if(e.target===e.currentTarget)this.close()}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return r[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return d(n.motionShort3,n.animationDurationShort3)}render(){const e=!this.shouldRender&&!this.closing;return t(o,{key:"d592a67f30fac4bdb376e7b804aae56ef4b8bb1d",style:{display:"contents"}},t("div",{key:"e9acbb8fe20f58a5ca55317e2a735b8c1736279d",class:{"modal-backdrop":true,"modal-backdrop--closing":this.closing,"modal-backdrop--hidden":e},onMouseDown:e=>this.handleBackdropMouseDown(e),style:{position:"fixed",inset:"0",zIndex:"9999",display:e?"none":"flex",alignItems:"center",justifyContent:"center",padding:"var(--dimension-space-200)"}},t("div",{key:"1000306e14d62bdcba242c409d492f3180f57952",class:{"modal-dialog":true,"modal-dialog--closing":this.closing},role:"dialog","aria-modal":"true","aria-labelledby":this.titleId,"aria-describedby":this.subtitle?this.subtitleId:undefined,tabIndex:-1,style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},t("div",{key:"66271f1fecb099e64e2255ef1f1ead4771ec7ec8",class:"modal-header"},t("h2",{key:"b1d6aa652480aa9fdac2ba32b47310a641d86228",id:this.titleId,class:"text-title-small modal-title"},this.heading),this.subtitle&&t("div",{key:"dd3de52c62517602d5f83a7b167ce7fdb9baf860",id:this.subtitleId,class:"modal-subtitle text-body-medium"},this.subtitle)),t("div",{key:"30149f7ad3bf2a6f1a27c55e31eb63caad2a6884",class:"modal-body"},t("slot",{key:"30195fa0eed79bc8963663c78c5bda93a03f348c"})),t("div",{key:"e55c5675ddd246034fb24a6778129aaf37bb1e5c",class:"modal-footer"},t("slot",{key:"d4fec541095407daf1cad1144f69f15f82003562",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return l()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-modal"];e.forEach((e=>{switch(e){case"ds-modal":if(!customElements.get(i(e))){customElements.define(i(e),f)}break}}))}h();const u=f;const b=h;export{u as DsModal,b as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["modalCss","WIDTH_MAP","sm","md","lg","CLOSE_ANIMATION_MS","FOCUSABLE_SEL","join","modalIdCounter","Modal","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","modalWidth","shouldRender","closing","instanceId","titleId","subtitleId","previousFocus","escapeHandler","tabHandler","closeTimer","componentDidLoad","onOpenChange","disconnectedCallback","teardownListeners","isOpen","document","activeElement","requestAnimationFrame","focusFirst","setupListeners","setTimeout","focus","dialog","el","querySelector","focusables","getFocusables","root","Array","from","querySelectorAll","filter","hasAttribute","getAttribute","e","key","preventDefault","close","length","first","last","active","shiftKey","contains","addEventListener","removeEventListener","clearTimeout","dsClose","emit","handleBackdropMouseDown","target","currentTarget","resolvedWidth","render","hidden","h","Host","style","display","class","onMouseDown","position","inset","zIndex","alignItems","justifyContent","padding","role","subtitle","undefined","tabIndex","width","id","heading","name"],"sources":["src/wc/components/Modal/Modal.css?tag=ds-modal&encapsulation=scoped","src/wc/components/Modal/Modal.tsx"],"sourcesContent":[".modal-backdrop {\n background-color: var(--color-background-shade);\n backdrop-filter: blur(var(--effect-blur-sm));\n -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n box-sizing: border-box;\n}\n\n.modal-backdrop--closing {\n animation: modalBackdropOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalBackdropIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes modalBackdropOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n\n.modal-dialog {\n display: flex;\n flex-direction: column;\n max-height: calc(100vh - 32px);\n overflow: hidden;\n background-color: var(--color-background-primary);\n border-radius: var(--dimension-radius-300);\n box-shadow: var(--effect-elevation-elevated-floating);\n animation: modalDialogIn var(--effect-motion-short-2) forwards;\n outline: none;\n box-sizing: border-box;\n}\n\n.modal-backdrop--closing .modal-dialog {\n animation: modalDialogOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalDialogIn {\n from { opacity: 0; transform: scale(0.97) translateY(4px); }\n to { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n@keyframes modalDialogOut {\n from { opacity: 1; transform: scale(1) translateY(0); }\n to { opacity: 0; transform: scale(0.97) translateY(4px); }\n}\n\n.modal-header {\n padding: var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);\n flex-shrink: 0;\n}\n\n.modal-title {\n margin: 0;\n}\n\n.modal-subtitle {\n margin-top: var(--dimension-space-100);\n color: var(--color-foreground-secondary);\n text-wrap: balance;\n}\n\n.modal-body {\n padding: var(--dimension-space-100) var(--dimension-space-200);\n overflow-y: auto;\n flex: 1;\n}\n\n.modal-footer {\n padding: var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);\n flex-shrink: 0;\n}\n\n.modal-footer:empty { display: none; }\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg';\n\nconst WIDTH_MAP: Record<ModalWidth, string> = {\n sm: 'var(--dimension-modal-width-sm, 400px)',\n md: 'var(--dimension-modal-width-md, 560px)',\n lg: 'var(--dimension-modal-width-lg, 720px)',\n};\n\nconst CLOSE_ANIMATION_MS = 220;\n\nconst FOCUSABLE_SEL = [\n 'a[href]',\n 'area[href]',\n 'button:not([disabled])',\n 'input:not([disabled]):not([type=\"hidden\"])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n 'iframe',\n '[contenteditable=\"true\"]',\n '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nlet modalIdCounter = 0;\n\n@Component({\n tag: 'ds-modal',\n styleUrl: 'Modal.css',\n scoped: true,\n})\nexport class Modal {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) open: boolean = false;\n @Prop() heading!: string;\n @Prop() subtitle: string | undefined;\n @Prop() modalWidth: ModalWidth | string = 'md';\n\n @State() private shouldRender: boolean = false;\n @State() private closing: boolean = false;\n\n @Event() dsClose!: EventEmitter<void>;\n\n private instanceId = ++modalIdCounter;\n private titleId = `ds-modal-title-${modalIdCounter}`;\n private subtitleId = `ds-modal-subtitle-${modalIdCounter}`;\n private previousFocus: HTMLElement | null = null;\n private escapeHandler: ((e: KeyboardEvent) => void) | null = null;\n private tabHandler: ((e: KeyboardEvent) => void) | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n componentDidLoad() {\n if (this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.teardownListeners();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (isOpen) {\n this.shouldRender = true;\n this.closing = false;\n this.previousFocus = document.activeElement as HTMLElement | null;\n requestAnimationFrame(() => {\n this.focusFirst();\n this.setupListeners();\n });\n } else if (this.shouldRender) {\n this.closing = true;\n this.teardownListeners();\n this.closeTimer = setTimeout(() => {\n this.shouldRender = false;\n this.closing = false;\n this.closeTimer = null;\n this.previousFocus?.focus?.();\n this.previousFocus = null;\n }, CLOSE_ANIMATION_MS);\n }\n }\n\n private focusFirst() {\n const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;\n if (!dialog) return;\n const focusables = this.getFocusables(dialog);\n (focusables[0] ?? dialog).focus();\n }\n\n private getFocusables(root: HTMLElement): HTMLElement[] {\n return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)).filter(\n el => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true'\n );\n }\n\n private setupListeners() {\n this.escapeHandler = (e: KeyboardEvent) => {\n if (e.key === 'Escape') { e.preventDefault(); this.close(); }\n };\n\n this.tabHandler = (e: KeyboardEvent) => {\n if (e.key !== 'Tab') return;\n const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;\n if (!dialog) return;\n const focusables = this.getFocusables(dialog);\n if (!focusables.length) { e.preventDefault(); dialog.focus(); return; }\n const first = focusables[0];\n const last = focusables[focusables.length - 1];\n const active = document.activeElement;\n if (e.shiftKey) {\n if (active === first || active === dialog || !dialog.contains(active)) {\n e.preventDefault(); last.focus();\n }\n } else {\n if (active === last || !dialog.contains(active)) {\n e.preventDefault(); first.focus();\n }\n }\n };\n\n document.addEventListener('keydown', this.escapeHandler);\n document.addEventListener('keydown', this.tabHandler);\n }\n\n private teardownListeners() {\n if (this.escapeHandler) {\n document.removeEventListener('keydown', this.escapeHandler);\n this.escapeHandler = null;\n }\n if (this.tabHandler) {\n document.removeEventListener('keydown', this.tabHandler);\n this.tabHandler = null;\n }\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private close() {\n this.dsClose.emit();\n this.open = false;\n }\n\n private handleBackdropMouseDown(e: MouseEvent) {\n if (e.target === e.currentTarget) this.close();\n }\n\n private get resolvedWidth(): string {\n if (this.modalWidth === 'sm' || this.modalWidth === 'md' || this.modalWidth === 'lg') {\n return WIDTH_MAP[this.modalWidth];\n }\n return this.modalWidth as string;\n }\n\n render() {\n // Always render slots so scoped-mode slot distribution doesn't leak content.\n // The backdrop is hidden via CSS when not active.\n const hidden = !this.shouldRender && !this.closing;\n\n return (\n <Host style={{ display: 'contents' }}>\n <div\n class={{ 'modal-backdrop': true, 'modal-backdrop--closing': this.closing, 'modal-backdrop--hidden': hidden }}\n onMouseDown={(e: MouseEvent) => this.handleBackdropMouseDown(e)}\n style={{ position: 'fixed', inset: '0', zIndex: '9999', display: hidden ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--dimension-space-200)' }}\n >\n <div\n class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={this.titleId}\n aria-describedby={this.subtitle ? this.subtitleId : undefined}\n tabIndex={-1}\n style={{ width: `min(${this.resolvedWidth}, calc(100vw - 32px))` }}\n >\n <div class=\"modal-header\">\n <h2 id={this.titleId} class=\"text-title-small modal-title\">{this.heading}</h2>\n {this.subtitle && (\n <div id={this.subtitleId} class=\"modal-subtitle text-body-medium\">\n {this.subtitle}\n </div>\n )}\n </div>\n <div class=\"modal-body\">\n <slot />\n </div>\n <div class=\"modal-footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"kEAAA,MAAMA,EAAW,IAAM,0uDCIvB,MAAMC,EAAwC,CAC5CC,GAAI,yCACJC,GAAI,yCACJC,GAAI,0CAGN,MAAMC,EAAqB,IAE3B,MAAMC,EAAgB,CACpB,UACA,aACA,yBACA,6CACA,yBACA,2BACA,SACA,2BACA,mCACAC,KAAK,KAEP,IAAIC,EAAiB,E,MAORC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,2EAQ2BC,KAAAC,KAAgB,MAGjCD,KAAAE,WAAkC,KAEzBF,KAAAG,aAAwB,MACxBH,KAAAI,QAAmB,MAI5BJ,KAAAK,aAAeX,EACfM,KAAAM,QAAU,kBAAkBZ,IAC5BM,KAAAO,WAAa,qBAAqBb,IAClCM,KAAAQ,cAAoC,KACpCR,KAAAS,cAAqD,KACrDT,KAAAU,WAAkD,KAClDV,KAAAW,WAAmD,IAkJ5D,CAhJC,gBAAAC,GACE,GAAIZ,KAAKC,KAAMD,KAAKa,aAAa,K,CAGnC,oBAAAC,GACEd,KAAKe,mB,CAIP,YAAAF,CAAaG,GACX,GAAIA,EAAQ,CACVhB,KAAKG,aAAe,KACpBH,KAAKI,QAAU,MACfJ,KAAKQ,cAAgBS,SAASC,cAC9BC,uBAAsB,KACpBnB,KAAKoB,aACLpB,KAAKqB,gBAAgB,G,MAElB,GAAIrB,KAAKG,aAAc,CAC5BH,KAAKI,QAAU,KACfJ,KAAKe,oBACLf,KAAKW,WAAaW,YAAW,KAC3BtB,KAAKG,aAAe,MACpBH,KAAKI,QAAU,MACfJ,KAAKW,WAAa,KAClBX,KAAKQ,eAAee,UACpBvB,KAAKQ,cAAgB,IAAI,GACxBjB,E,EAIC,UAAA6B,GACN,MAAMI,EAASxB,KAAKyB,GAAGC,cAAc,iBACrC,IAAKF,EAAQ,OACb,MAAMG,EAAa3B,KAAK4B,cAAcJ,IACrCG,EAAW,IAAMH,GAAQD,O,CAGpB,aAAAK,CAAcC,GACpB,OAAOC,MAAMC,KAAKF,EAAKG,iBAA8BxC,IAAgByC,QACnER,IAAOA,EAAGS,aAAa,aAAeT,EAAGU,aAAa,iBAAmB,Q,CAIrE,cAAAd,GACNrB,KAAKS,cAAiB2B,IACpB,GAAIA,EAAEC,MAAQ,SAAU,CAAED,EAAEE,iBAAkBtC,KAAKuC,O,GAGrDvC,KAAKU,WAAc0B,IACjB,GAAIA,EAAEC,MAAQ,MAAO,OACrB,MAAMb,EAASxB,KAAKyB,GAAGC,cAAc,iBACrC,IAAKF,EAAQ,OACb,MAAMG,EAAa3B,KAAK4B,cAAcJ,GACtC,IAAKG,EAAWa,OAAQ,CAAEJ,EAAEE,iBAAkBd,EAAOD,QAAS,M,CAC9D,MAAMkB,EAAQd,EAAW,GACzB,MAAMe,EAAOf,EAAWA,EAAWa,OAAS,GAC5C,MAAMG,EAAS1B,SAASC,cACxB,GAAIkB,EAAEQ,SAAU,CACd,GAAID,IAAWF,GAASE,IAAWnB,IAAWA,EAAOqB,SAASF,GAAS,CACrEP,EAAEE,iBAAkBI,EAAKnB,O,MAEtB,CACL,GAAIoB,IAAWD,IAASlB,EAAOqB,SAASF,GAAS,CAC/CP,EAAEE,iBAAkBG,EAAMlB,O,IAKhCN,SAAS6B,iBAAiB,UAAW9C,KAAKS,eAC1CQ,SAAS6B,iBAAiB,UAAW9C,KAAKU,W,CAGpC,iBAAAK,GACN,GAAIf,KAAKS,cAAe,CACtBQ,SAAS8B,oBAAoB,UAAW/C,KAAKS,eAC7CT,KAAKS,cAAgB,I,CAEvB,GAAIT,KAAKU,WAAY,CACnBO,SAAS8B,oBAAoB,UAAW/C,KAAKU,YAC7CV,KAAKU,WAAa,I,CAEpB,GAAIV,KAAKW,WAAY,CACnBqC,aAAahD,KAAKW,YAClBX,KAAKW,WAAa,I,EAId,KAAA4B,GACNvC,KAAKiD,QAAQC,OACblD,KAAKC,KAAO,K,CAGN,uBAAAkD,CAAwBf,GAC9B,GAAIA,EAAEgB,SAAWhB,EAAEiB,cAAerD,KAAKuC,O,CAGzC,iBAAYe,GACV,GAAItD,KAAKE,aAAe,MAAQF,KAAKE,aAAe,MAAQF,KAAKE,aAAe,KAAM,CACpF,OAAOf,EAAUa,KAAKE,W,CAExB,OAAOF,KAAKE,U,CAGd,MAAAqD,GAGE,MAAMC,GAAUxD,KAAKG,eAAiBH,KAAKI,QAE3C,OACEqD,EAACC,EAAI,CAAArB,IAAA,2CAACsB,MAAO,CAAEC,QAAS,aACtBH,EAAA,OAAApB,IAAA,2CACEwB,MAAO,CAAE,iBAAkB,KAAM,0BAA2B7D,KAAKI,QAAS,yBAA0BoD,GACpGM,YAAc1B,GAAkBpC,KAAKmD,wBAAwBf,GAC7DuB,MAAO,CAAEI,SAAU,QAASC,MAAO,IAAKC,OAAQ,OAAQL,QAASJ,EAAS,OAAS,OAAQU,WAAY,SAAUC,eAAgB,SAAUC,QAAS,+BAEpJX,EAAA,OAAApB,IAAA,2CACEwB,MAAO,CAAE,eAAgB,KAAM,wBAAyB7D,KAAKI,SAC7DiE,KAAK,SAAQ,aACF,OAAM,kBACArE,KAAKM,QAAO,mBACXN,KAAKsE,SAAWtE,KAAKO,WAAagE,UACpDC,UAAU,EACVb,MAAO,CAAEc,MAAO,OAAOzE,KAAKsD,uCAE5BG,EAAA,OAAApB,IAAA,2CAAKwB,MAAM,gBACTJ,EAAA,MAAApB,IAAA,2CAAIqC,GAAI1E,KAAKM,QAASuD,MAAM,gCAAgC7D,KAAK2E,SAChE3E,KAAKsE,UACJb,EAAA,OAAApB,IAAA,2CAAKqC,GAAI1E,KAAKO,WAAYsD,MAAM,mCAC7B7D,KAAKsE,WAIZb,EAAA,OAAApB,IAAA,2CAAKwB,MAAM,cACTJ,EAAA,QAAApB,IAAA,8CAEFoB,EAAA,OAAApB,IAAA,2CAAKwB,MAAM,gBACTJ,EAAA,QAAApB,IAAA,2CAAMuC,KAAK,c","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["modalCss","WIDTH_MAP","sm","md","lg","FOCUSABLE_SEL","join","modalIdCounter","Modal","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","modalWidth","shouldRender","closing","instanceId","titleId","subtitleId","previousFocus","escapeHandler","tabHandler","closeTimer","componentDidLoad","onOpenChange","disconnectedCallback","teardownListeners","isOpen","document","activeElement","requestAnimationFrame","focusFirst","setupListeners","setTimeout","focus","closeAnimationMs","dialog","el","querySelector","focusables","getFocusables","root","Array","from","querySelectorAll","filter","hasAttribute","getAttribute","e","key","preventDefault","close","length","first","last","active","shiftKey","contains","addEventListener","removeEventListener","clearTimeout","dsClose","emit","handleBackdropMouseDown","target","currentTarget","resolvedWidth","resolveCssTimeMs","TOKEN_DEFAULTS","motionShort3","animationDurationShort3","render","hidden","h","Host","style","display","class","onMouseDown","position","inset","zIndex","alignItems","justifyContent","padding","role","subtitle","undefined","tabIndex","width","id","heading","name"],"sources":["src/wc/components/Modal/Modal.css?tag=ds-modal&encapsulation=scoped","src/wc/components/Modal/Modal.tsx"],"sourcesContent":[".modal-backdrop {\n background-color: var(--color-background-shade);\n backdrop-filter: blur(var(--effect-blur-sm));\n -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n box-sizing: border-box;\n}\n\n.modal-backdrop--closing {\n animation: modalBackdropOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalBackdropIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes modalBackdropOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n\n.modal-dialog {\n display: flex;\n flex-direction: column;\n max-height: calc(100vh - 2 * var(--dimension-space-200));\n overflow: hidden;\n background-color: var(--color-background-primary);\n border-radius: var(--dimension-radius-300);\n box-shadow: var(--effect-elevation-elevated-floating);\n animation: modalDialogIn var(--effect-motion-short-2) forwards;\n outline: none;\n box-sizing: border-box;\n}\n\n.modal-backdrop--closing .modal-dialog {\n animation: modalDialogOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalDialogIn {\n from { opacity: 0; transform: scale(0.97) translateY(4px); }\n to { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n@keyframes modalDialogOut {\n from { opacity: 1; transform: scale(1) translateY(0); }\n to { opacity: 0; transform: scale(0.97) translateY(4px); }\n}\n\n.modal-header {\n padding: var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);\n flex-shrink: 0;\n}\n\n.modal-title {\n margin: 0;\n}\n\n.modal-subtitle {\n margin-top: var(--dimension-space-100);\n color: var(--color-foreground-secondary);\n text-wrap: balance;\n}\n\n.modal-body {\n padding: var(--dimension-space-100) var(--dimension-space-200);\n overflow-y: auto;\n flex: 1;\n}\n\n.modal-footer {\n padding: var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);\n flex-shrink: 0;\n}\n\n.modal-footer:empty { display: none; }\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg';\n\nconst WIDTH_MAP: Record<ModalWidth, string> = {\n sm: 'var(--dimension-modal-width-sm)',\n md: 'var(--dimension-modal-width-md)',\n lg: 'var(--dimension-modal-width-lg)',\n};\n\nconst FOCUSABLE_SEL = [\n 'a[href]',\n 'area[href]',\n 'button:not([disabled])',\n 'input:not([disabled]):not([type=\"hidden\"])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n 'iframe',\n '[contenteditable=\"true\"]',\n '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nlet modalIdCounter = 0;\n\n@Component({\n tag: 'ds-modal',\n styleUrl: 'Modal.css',\n scoped: true,\n})\nexport class Modal {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) open: boolean = false;\n @Prop() heading!: string;\n @Prop() subtitle: string | undefined;\n @Prop() modalWidth: ModalWidth | string = 'md';\n\n @State() private shouldRender: boolean = false;\n @State() private closing: boolean = false;\n\n @Event() dsClose!: EventEmitter<void>;\n\n private instanceId = ++modalIdCounter;\n private titleId = `ds-modal-title-${modalIdCounter}`;\n private subtitleId = `ds-modal-subtitle-${modalIdCounter}`;\n private previousFocus: HTMLElement | null = null;\n private escapeHandler: ((e: KeyboardEvent) => void) | null = null;\n private tabHandler: ((e: KeyboardEvent) => void) | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n componentDidLoad() {\n if (this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.teardownListeners();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (isOpen) {\n this.shouldRender = true;\n this.closing = false;\n this.previousFocus = document.activeElement as HTMLElement | null;\n requestAnimationFrame(() => {\n this.focusFirst();\n this.setupListeners();\n });\n } else if (this.shouldRender) {\n this.closing = true;\n this.teardownListeners();\n this.closeTimer = setTimeout(() => {\n this.shouldRender = false;\n this.closing = false;\n this.closeTimer = null;\n this.previousFocus?.focus?.();\n this.previousFocus = null;\n }, this.closeAnimationMs);\n }\n }\n\n private focusFirst() {\n const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;\n if (!dialog) return;\n const focusables = this.getFocusables(dialog);\n (focusables[0] ?? dialog).focus();\n }\n\n private getFocusables(root: HTMLElement): HTMLElement[] {\n return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)).filter(\n el => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true'\n );\n }\n\n private setupListeners() {\n this.escapeHandler = (e: KeyboardEvent) => {\n if (e.key === 'Escape') { e.preventDefault(); this.close(); }\n };\n\n this.tabHandler = (e: KeyboardEvent) => {\n if (e.key !== 'Tab') return;\n const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;\n if (!dialog) return;\n const focusables = this.getFocusables(dialog);\n if (!focusables.length) { e.preventDefault(); dialog.focus(); return; }\n const first = focusables[0];\n const last = focusables[focusables.length - 1];\n const active = document.activeElement;\n if (e.shiftKey) {\n if (active === first || active === dialog || !dialog.contains(active)) {\n e.preventDefault(); last.focus();\n }\n } else {\n if (active === last || !dialog.contains(active)) {\n e.preventDefault(); first.focus();\n }\n }\n };\n\n document.addEventListener('keydown', this.escapeHandler);\n document.addEventListener('keydown', this.tabHandler);\n }\n\n private teardownListeners() {\n if (this.escapeHandler) {\n document.removeEventListener('keydown', this.escapeHandler);\n this.escapeHandler = null;\n }\n if (this.tabHandler) {\n document.removeEventListener('keydown', this.tabHandler);\n this.tabHandler = null;\n }\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private close() {\n this.dsClose.emit();\n this.open = false;\n }\n\n private handleBackdropMouseDown(e: MouseEvent) {\n if (e.target === e.currentTarget) this.close();\n }\n\n private get resolvedWidth(): string {\n if (this.modalWidth === 'sm' || this.modalWidth === 'md' || this.modalWidth === 'lg') {\n return WIDTH_MAP[this.modalWidth];\n }\n return this.modalWidth as string;\n }\n\n private get closeAnimationMs(): number {\n return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n render() {\n // Always render slots so scoped-mode slot distribution doesn't leak content.\n // The backdrop is hidden via CSS when not active.\n const hidden = !this.shouldRender && !this.closing;\n\n return (\n <Host style={{ display: 'contents' }}>\n <div\n class={{ 'modal-backdrop': true, 'modal-backdrop--closing': this.closing, 'modal-backdrop--hidden': hidden }}\n onMouseDown={(e: MouseEvent) => this.handleBackdropMouseDown(e)}\n style={{ position: 'fixed', inset: '0', zIndex: '9999', display: hidden ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--dimension-space-200)' }}\n >\n <div\n class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={this.titleId}\n aria-describedby={this.subtitle ? this.subtitleId : undefined}\n tabIndex={-1}\n style={{ width: `min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))` }}\n >\n <div class=\"modal-header\">\n <h2 id={this.titleId} class=\"text-title-small modal-title\">{this.heading}</h2>\n {this.subtitle && (\n <div id={this.subtitleId} class=\"modal-subtitle text-body-medium\">\n {this.subtitle}\n </div>\n )}\n </div>\n <div class=\"modal-body\">\n <slot />\n </div>\n <div class=\"modal-footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"0IAAA,MAAMA,EAAW,IAAM,owDCKvB,MAAMC,EAAwC,CAC5CC,GAAI,kCACJC,GAAI,kCACJC,GAAI,mCAGN,MAAMC,EAAgB,CACpB,UACA,aACA,yBACA,6CACA,yBACA,2BACA,SACA,2BACA,mCACAC,KAAK,KAEP,IAAIC,EAAiB,E,MAORC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,2EAQ2BC,KAAAC,KAAgB,MAGjCD,KAAAE,WAAkC,KAEzBF,KAAAG,aAAwB,MACxBH,KAAAI,QAAmB,MAI5BJ,KAAAK,aAAeX,EACfM,KAAAM,QAAU,kBAAkBZ,IAC5BM,KAAAO,WAAa,qBAAqBb,IAClCM,KAAAQ,cAAoC,KACpCR,KAAAS,cAAqD,KACrDT,KAAAU,WAAkD,KAClDV,KAAAW,WAAmD,IAsJ5D,CApJC,gBAAAC,GACE,GAAIZ,KAAKC,KAAMD,KAAKa,aAAa,K,CAGnC,oBAAAC,GACEd,KAAKe,mB,CAIP,YAAAF,CAAaG,GACX,GAAIA,EAAQ,CACVhB,KAAKG,aAAe,KACpBH,KAAKI,QAAU,MACfJ,KAAKQ,cAAgBS,SAASC,cAC9BC,uBAAsB,KACpBnB,KAAKoB,aACLpB,KAAKqB,gBAAgB,G,MAElB,GAAIrB,KAAKG,aAAc,CAC5BH,KAAKI,QAAU,KACfJ,KAAKe,oBACLf,KAAKW,WAAaW,YAAW,KAC3BtB,KAAKG,aAAe,MACpBH,KAAKI,QAAU,MACfJ,KAAKW,WAAa,KAClBX,KAAKQ,eAAee,UACpBvB,KAAKQ,cAAgB,IAAI,GACxBR,KAAKwB,iB,EAIJ,UAAAJ,GACN,MAAMK,EAASzB,KAAK0B,GAAGC,cAAc,iBACrC,IAAKF,EAAQ,OACb,MAAMG,EAAa5B,KAAK6B,cAAcJ,IACrCG,EAAW,IAAMH,GAAQF,O,CAGpB,aAAAM,CAAcC,GACpB,OAAOC,MAAMC,KAAKF,EAAKG,iBAA8BzC,IAAgB0C,QACnER,IAAOA,EAAGS,aAAa,aAAeT,EAAGU,aAAa,iBAAmB,Q,CAIrE,cAAAf,GACNrB,KAAKS,cAAiB4B,IACpB,GAAIA,EAAEC,MAAQ,SAAU,CAAED,EAAEE,iBAAkBvC,KAAKwC,O,GAGrDxC,KAAKU,WAAc2B,IACjB,GAAIA,EAAEC,MAAQ,MAAO,OACrB,MAAMb,EAASzB,KAAK0B,GAAGC,cAAc,iBACrC,IAAKF,EAAQ,OACb,MAAMG,EAAa5B,KAAK6B,cAAcJ,GACtC,IAAKG,EAAWa,OAAQ,CAAEJ,EAAEE,iBAAkBd,EAAOF,QAAS,M,CAC9D,MAAMmB,EAAQd,EAAW,GACzB,MAAMe,EAAOf,EAAWA,EAAWa,OAAS,GAC5C,MAAMG,EAAS3B,SAASC,cACxB,GAAImB,EAAEQ,SAAU,CACd,GAAID,IAAWF,GAASE,IAAWnB,IAAWA,EAAOqB,SAASF,GAAS,CACrEP,EAAEE,iBAAkBI,EAAKpB,O,MAEtB,CACL,GAAIqB,IAAWD,IAASlB,EAAOqB,SAASF,GAAS,CAC/CP,EAAEE,iBAAkBG,EAAMnB,O,IAKhCN,SAAS8B,iBAAiB,UAAW/C,KAAKS,eAC1CQ,SAAS8B,iBAAiB,UAAW/C,KAAKU,W,CAGpC,iBAAAK,GACN,GAAIf,KAAKS,cAAe,CACtBQ,SAAS+B,oBAAoB,UAAWhD,KAAKS,eAC7CT,KAAKS,cAAgB,I,CAEvB,GAAIT,KAAKU,WAAY,CACnBO,SAAS+B,oBAAoB,UAAWhD,KAAKU,YAC7CV,KAAKU,WAAa,I,CAEpB,GAAIV,KAAKW,WAAY,CACnBsC,aAAajD,KAAKW,YAClBX,KAAKW,WAAa,I,EAId,KAAA6B,GACNxC,KAAKkD,QAAQC,OACbnD,KAAKC,KAAO,K,CAGN,uBAAAmD,CAAwBf,GAC9B,GAAIA,EAAEgB,SAAWhB,EAAEiB,cAAetD,KAAKwC,O,CAGzC,iBAAYe,GACV,GAAIvD,KAAKE,aAAe,MAAQF,KAAKE,aAAe,MAAQF,KAAKE,aAAe,KAAM,CACpF,OAAOd,EAAUY,KAAKE,W,CAExB,OAAOF,KAAKE,U,CAGd,oBAAYsB,GACV,OAAOgC,EAAiBC,EAAeC,aAAcD,EAAeE,wB,CAGtE,MAAAC,GAGE,MAAMC,GAAU7D,KAAKG,eAAiBH,KAAKI,QAE3C,OACE0D,EAACC,EAAI,CAAAzB,IAAA,2CAAC0B,MAAO,CAAEC,QAAS,aACtBH,EAAA,OAAAxB,IAAA,2CACE4B,MAAO,CAAE,iBAAkB,KAAM,0BAA2BlE,KAAKI,QAAS,yBAA0ByD,GACpGM,YAAc9B,GAAkBrC,KAAKoD,wBAAwBf,GAC7D2B,MAAO,CAAEI,SAAU,QAASC,MAAO,IAAKC,OAAQ,OAAQL,QAASJ,EAAS,OAAS,OAAQU,WAAY,SAAUC,eAAgB,SAAUC,QAAS,+BAEpJX,EAAA,OAAAxB,IAAA,2CACE4B,MAAO,CAAE,eAAgB,KAAM,wBAAyBlE,KAAKI,SAC7DsE,KAAK,SAAQ,aACF,OAAM,kBACA1E,KAAKM,QAAO,mBACXN,KAAK2E,SAAW3E,KAAKO,WAAaqE,UACpDC,UAAU,EACVb,MAAO,CAAEc,MAAO,OAAO9E,KAAKuD,iEAE5BO,EAAA,OAAAxB,IAAA,2CAAK4B,MAAM,gBACTJ,EAAA,MAAAxB,IAAA,2CAAIyC,GAAI/E,KAAKM,QAAS4D,MAAM,gCAAgClE,KAAKgF,SAChEhF,KAAK2E,UACJb,EAAA,OAAAxB,IAAA,2CAAKyC,GAAI/E,KAAKO,WAAY2D,MAAM,mCAC7BlE,KAAK2E,WAIZb,EAAA,OAAAxB,IAAA,2CAAK4B,MAAM,cACTJ,EAAA,QAAAxB,IAAA,8CAEFwB,EAAA,OAAAxB,IAAA,2CAAK4B,MAAM,gBACTJ,EAAA,QAAAxB,IAAA,2CAAM2C,KAAK,c","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as a,c as n,h as t,a as i,t as s}from"./index.js";import{e as o,r,s as l,a as d}from"./p-DznbYg1m.js";import{d as c}from"./p-B_enucPQ.js";import{d as v}from"./p-vW9EMP8s.js";import{d as p}from"./p-DqBCQRRd.js";import{d as h}from"./p-C9za7IDu.js";const f="data-nav-style";function m(e){if(e==="navigation"||e==="default")return e;return undefined}function u(e,a,n=(typeof document!=="undefined"?document.documentElement.getAttribute(f):null)){return m(a)??m(n)??e}function _(e,a){return e!==a}function b(e,a){return e===a||e.startsWith(`${a}/`)}function g(e,a){if(!e)return"";let n="";let t=0;for(const i of a){if(!i.href)continue;if(b(e,i.href)&&i.href.length>t){n=i.id;t=i.href.length}}return n}function y(e){return e.reduce(((e,a)=>e+a.items.length),0)}function x(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const a=JSON.parse(e);return Array.isArray(a)?a:[]}catch{return[]}}return[]}function k(e,a){if(e)return true;if(a===null)return false;return a!=="false"}function w(e,a){return y(e)===0&&y(x(a))>0}const z=()=>`.panel-nav.sc-ds-panel-nav{--_nav-width:200px;--_nav-width-collapsed:48px;--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-navigation-background);--_nav-border:var(--color-navigation-border-tertiary);--_nav-divider:var(--color-navigation-divider);--_nav-fg-primary:var(--color-navigation-foreground-primary);--_nav-fg-secondary:var(--color-navigation-foreground-secondary);--_nav-fg-tertiary:var(--color-navigation-foreground-tertiary);--_nav-hover:var(--color-navigation-interaction-hover);--_nav-pressed:var(--color-navigation-interaction-pressed);--_nav-focus:var(--color-navigation-interaction-focus);--_nav-dot:var(--color-navigation-foreground-brand)}ds-app-shell[gradient].sc-ds-panel-nav-h,ds-app-shell[gradient] .sc-ds-panel-nav-h{--ds-shell-gradient-opacity:0.1}.panel-nav--default.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:hidden;transition:width var(--_nav-expand-motion), min-width var(--_nav-expand-motion), background-color var(--effect-motion-short-3, 200ms ease), border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui)}.panel-nav.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:var(--ds-shell-gradient-position-panel, 0 0);background-repeat:no-repeat}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:opacity var(--effect-motion-short-2, 100ms ease)}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:none;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{display:flex}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);line-height:var(--typography-lineheight-xs, 12px);padding:0 var(--dimension-space-075, 6px);white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms, max-height var(--_nav-label-fade-motion) 0ms, padding var(--_nav-label-fade-motion) 0ms, color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__item.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms, mask-position var(--_nav-label-fade-motion) 0ms, -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot.sc-ds-panel-nav{position:absolute;right:13px;top:13px;pointer-events:none;transition:right var(--_nav-expand-motion), top var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{right:var(--dimension-space-075);top:var(--dimension-space-075)}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms, mask-position var(--_nav-label-fade-out-motion) 0ms, -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 var(--dimension-space-075, 6px);pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms, max-height var(--_nav-label-fade-out-motion) 0ms, padding var(--_nav-label-fade-out-motion) 0ms, color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer-fade.sc-ds-panel-nav{--ds-fade-offset:100%}.panel-nav__footer-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-half);cursor:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;background:transparent;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease), color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav__footer-btn.sc-ds-panel-nav:focus-visible{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav--navigation.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-background-secondary);color:var(--color-foreground-secondary);transition:none}.panel-nav--default.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-navigation-background);color:var(--color-navigation-foreground-secondary);transition:none}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion), right var(--_nav-expand-motion), top var(--_nav-expand-motion), color var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);right:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav__user-initial.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_nav-fg-secondary);text-transform:uppercase;line-height:1;pointer-events:none;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:10;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-background-bold-brand);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;transition-delay:0.01ms !important}}`;const C=new WeakMap;const I=new WeakMap;const A=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=n(this,"dsNavSelect");this.dsNavToggle=n(this,"dsNavToggle");this.dsNavFooterAction=n(this,"dsNavFooterAction");this.dsNavUserAction=n(this,"dsNavUserAction");this.navStyle="navigation";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.renderedStyle="navigation";this.parsedGroups=[];this.atBottom=false;this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return k(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(){this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=x(e);this.syncRovingIndex();this.syncActiveFromUrl()}onActiveIdChange(){this.syncRovingIndex()}onCurrentUrlChange(){this.syncActiveFromUrl()}async onNavStyleChange(e){if(this.effectiveDisableViewTransition){this.renderedStyle=e;return}C.get(this)?.skipTransition();C.delete(this);const a=document;if(typeof a.startViewTransition!=="function"){this.renderedStyle=e;return}o();const n=r(this.el.querySelector(".panel-nav__footer-btn"));l(n);const t=a.startViewTransition((()=>new Promise((a=>{I.set(this,a);this.renderedStyle=e}))));C.set(this,t);t.finished.finally((()=>{if(C.get(this)===t)C.delete(this);I.delete(this)}));t.ready.then((()=>d(n))).catch((()=>{}))}componentWillLoad(){this.renderedStyle=u(this.navStyle,this.el.getAttribute("nav-style"));if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.checkScroll();if(this.breakpoint>0)this.connectResizeObserver()}componentDidRender(){const e=I.get(this);if(e){I.delete(this);e()}}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){this.isAnimating=true;const e=this.el.querySelector(".panel-nav");if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=a=>{if(a.propertyName==="width"){this.isAnimating=false;e?.removeEventListener("transitionend",this.transitionEndHandler)}};e?.addEventListener("transitionend",this.transitionEndHandler)}connectResizeObserver(){this.viewportNarrow=window.innerWidth<this.breakpoint;this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=window.innerWidth<this.breakpoint}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=g(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){this.syncRenderedStyleIfNeeded();if(w(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}syncRenderedStyleIfNeeded(){if(!_(this.renderedStyle,this.navStyle))return;if(this.effectiveDisableViewTransition){C.get(this)?.skipTransition();C.delete(this);this.renderedStyle=this.navStyle}else{void this.onNavStyleChange(this.navStyle)}}scheduleDeferredHostPropSync(){let a=e.HOST_PROP_SYNC_BUDGET;const n=()=>{this.syncHostPropsIfNeeded();if(--a>0){requestAnimationFrame(n)}};queueMicrotask(n)}applyToggle(e){this.dsNavToggle.emit(e);if(this.storageKey){this.collapsed=e;try{localStorage.setItem(this.storageKey,String(e))}catch{}}}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}syncRovingIndex(){const e=this.getAllItems().findIndex((e=>e.id===this.effectiveActiveId));this.rovingIndex=e>=0?e:0}handleItemKeyDown(e,a){const n=this.getAllItems().length;let t;switch(e.key){case"ArrowDown":e.preventDefault();t=(a+1)%n;break;case"ArrowUp":e.preventDefault();t=(a-1+n)%n;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=n-1;break;default:return}this.rovingIndex=t;const i=Array.from(this.el.querySelectorAll(".panel-nav__body .panel-nav__item"));i[t]?.focus()}checkScroll(){const e=this.el.querySelector(".panel-nav__body");if(!e)return;const a=e.scrollHeight-e.scrollTop-e.clientHeight;this.atBottom=a<2}handleBodyScroll(e){const a=e.target;const n=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=n<2}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(){this.dsNavUserAction.emit()}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const a=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const n=e=>{const n=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(n);if(this.didSnap)return;if(!a&&n<-8){this.applyToggle(true);this.didSnap=true}else if(a&&n>8){this.applyToggle(false);this.didSnap=true}};const t=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!a)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",n);window.removeEventListener("mouseup",t);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=n;this.globalMouseUpHandler=t;window.addEventListener("mousemove",n);window.addEventListener("mouseup",t)}renderNavItem(e,a,n){const i=e.id===this.effectiveActiveId;const s=[t("span",{class:"panel-nav__item-icon"},t("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),t("span",{class:"panel-nav__item-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:i?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},e.label))),e.dot&&t("ds-badge",{class:"panel-nav__item-dot",variant:"dot",background:"var(--_nav-bg)",label:"","aria-hidden":"true"})];const o={class:{"panel-nav__item":true,"panel-nav__item--active":i},"aria-current":i?"page":undefined,title:n?e.label:undefined,tabIndex:a===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleItemKeyDown(e,a),onFocus:()=>{this.rovingIndex=a}};const r=this.routerMode==="anchor"&&e.href;return r?t("a",{...o,href:e.href},s):t("button",{...o,type:"button"},s)}render(){const e=this.renderedStyle==="navigation";const a=this.collapsed||this.viewportNarrow;const{userName:n,userInitial:s}=this;const o={"panel-nav":true,"panel-nav--navigation":e,"panel-nav--default":!e,"panel-nav--collapsed":a,"panel-nav--animating":this.isAnimating,"panel-nav--at-bottom":this.atBottom};return t(i,{key:"2cfa0a04db72904ea3452a58bcff4ea41c359dc6",style:{display:"block",position:"relative"}},t("nav",{key:"4cfe6abef2f3d1addf08774d48fefe002ffdab7a",class:o,"aria-label":e?"Main navigation":"Settings navigation"},t("div",{key:"76ebd2ff672bf3ce580d0dcf70a378501a1edea5",class:"panel-nav__header"},t("button",{key:"3a7548a767d79f2c5daca0b8b367454fdb91ec43",type:"button",class:"panel-nav__header-btn",onClick:()=>this.handleToggle(),"aria-label":a?"Expand navigation":"Collapse navigation","aria-expanded":a?"false":"true"},t("span",{key:"ef625c8a5cded53a4bc5b30c523eca862d785547",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"dbcb09ab7b4eaa7c1292adc648facd92d1763890",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},t("path",{key:"24e7a88cbb8ea259d0eaf4743d241c8dc8160bcd",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),t("span",{key:"d4c546d781816f098b22a88374fb61a5dc3445ae",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"c042e68c62f162a08992c4332f40dfc779dc46fb",name:a?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"d93ebb7b1d8794ddd4fcd88cddc6a795b1350c87",class:"panel-nav__body",onScroll:e=>this.handleBodyScroll(e)},(()=>{let e=0;return this.parsedGroups.map((n=>t("div",{class:"panel-nav__group"},n.label&&t("span",{class:"panel-nav__group-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},n.label))),n.items.map((n=>this.renderNavItem(n,e++,a))))))})()),t("div",{key:"b0d0cf43aff6797cb759581726d05918370edec4",class:"panel-nav__footer"},t("ds-fade",{key:"8cc4d2b1d34fc599a1f7a00b79126dc1db30ab7d",class:"panel-nav__footer-fade",side:"bottom",size:"size-600",background:"var(--_nav-bg)",visible:!this.atBottom}),t("button",{key:"ab528eec8a988c716e84a512b3c5abfe50bf32eb",type:"button",class:"panel-nav__footer-btn",title:e?"Settings":"Dashboard","aria-label":e?"Open settings":"Go to dashboard",onClick:()=>this.handleFooterAction()},t("ds-icon",{key:"da531ce0cfbc294754d80e44554f85f085a8779a",name:e?"Gear":"Dashboard",size:"md",color:"inherit"})),t("button",{key:"24cdad9021633fc27efd59fb8c7d0409027d3006",type:"button",class:"panel-nav__item panel-nav__footer-user","aria-label":a?`User: ${n}`:`User menu for ${n}`,onClick:()=>this.handleUserAction()},t("span",{key:"5d73fca02c33819045da7d1a210acb325ad21247",class:"panel-nav__item-label panel-nav__footer-user-label"},t("span",{key:"ba424eeb1a8e003f21c07115188e5707f5c7cbce",class:"panel-nav__item-label-text"},t("ds-text",{key:"fe62fe33e0ad47df46c90f16824c4e999b95096f",as:"span",variant:"text-body-medium-emphasis",color:"inherit"},n))),t("span",{key:"ca11f8b34559252b803ba506516630d10b9cb81e",class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{key:"e947753f9612553d0b7f708dacdcf4c73c73c989",class:"panel-nav__footer-icon-expanded"},t("ds-icon",{key:"1df830873d739d757c087769eb4289546611073f",name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{key:"31c92397131dc5b879038dcccc7e35323acf3ff3",class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{key:"3d03451cb51f6db37d3f74988225fec7ec57f9b6",name:"Circle",size:"md",color:"inherit"}),t("span",{key:"5b4ebcc4e0f8755b4e33c533f975db421d6b62ee",class:"panel-nav__user-initial"},t("ds-text",{key:"1a8018fbd3674845fe09d6314e261c4a27a48697",as:"span",variant:"text-caption-emphasis",color:"inherit"},s))))))),!this.viewportNarrow&&t("div",{key:"61a3793e9885b99a0c4ee1239a4caef0a102b66a",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return z()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],renderedStyle:[32],parsedGroups:[32],atBottom:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);A.HOST_PROP_SYNC_BUDGET=8;function S(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-fade","ds-icon","ds-text"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(s(e))){customElements.define(s(e),A)}break;case"ds-badge":if(!customElements.get(s(e))){c()}break;case"ds-fade":if(!customElements.get(s(e))){v()}break;case"ds-icon":if(!customElements.get(s(e))){p()}break;case"ds-text":if(!customElements.get(s(e))){h()}break}}))}S();const D=A;const N=S;export{D as DsPanelNav,N as defineCustomElement};
|
|
1
|
+
import{p as e,H as a,c as n,h as t,a as i,t as s}from"./index.js";import{e as o,r,s as l,a as d}from"./p-DfL2MOso.js";import{d as c}from"./p-B_enucPQ.js";import{d as v}from"./p-vW9EMP8s.js";import{d as p}from"./p-DqBCQRRd.js";import{d as h}from"./p-C9za7IDu.js";const f="data-nav-style";function m(e){if(e==="navigation"||e==="default")return e;return undefined}function u(e,a,n=(typeof document!=="undefined"?document.documentElement.getAttribute(f):null)){return m(a)??m(n)??e}function _(e,a){return e!==a}function b(e,a){return e===a||e.startsWith(`${a}/`)}function g(e,a){if(!e)return"";let n="";let t=0;for(const i of a){if(!i.href)continue;if(b(e,i.href)&&i.href.length>t){n=i.id;t=i.href.length}}return n}function y(e){return e.reduce(((e,a)=>e+a.items.length),0)}function x(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const a=JSON.parse(e);return Array.isArray(a)?a:[]}catch{return[]}}return[]}function k(e,a){if(e)return true;if(a===null)return false;return a!=="false"}function w(e,a){return y(e)===0&&y(x(a))>0}const z=()=>`.panel-nav.sc-ds-panel-nav{--_nav-width:var(--dimension-panel-width-2xs);--_nav-width-collapsed:var(--dimension-size-600);--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-navigation-background);--_nav-border:var(--color-navigation-border-tertiary);--_nav-divider:var(--color-navigation-divider);--_nav-fg-primary:var(--color-navigation-foreground-primary);--_nav-fg-secondary:var(--color-navigation-foreground-secondary);--_nav-fg-tertiary:var(--color-navigation-foreground-tertiary);--_nav-hover:var(--color-navigation-interaction-hover);--_nav-pressed:var(--color-navigation-interaction-pressed);--_nav-focus:var(--color-navigation-interaction-focus);--_nav-dot:var(--color-navigation-foreground-brand)}ds-app-shell[gradient].sc-ds-panel-nav-h,ds-app-shell[gradient] .sc-ds-panel-nav-h{--ds-shell-gradient-opacity:0.1}.panel-nav--default.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:hidden;transition:width var(--_nav-expand-motion), min-width var(--_nav-expand-motion), background-color var(--effect-motion-short-3, 200ms ease), border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui)}.panel-nav.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:var(--ds-shell-gradient-position-panel, 0 0);background-repeat:no-repeat}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:opacity var(--effect-motion-short-2, 100ms ease)}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:none;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{display:flex}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);line-height:var(--typography-lineheight-xs, 12px);padding:0 var(--dimension-space-075, 6px);white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms, max-height var(--_nav-label-fade-motion) 0ms, padding var(--_nav-label-fade-motion) 0ms, color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__item.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms, mask-position var(--_nav-label-fade-motion) 0ms, -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot.sc-ds-panel-nav{position:absolute;right:13px;top:13px;pointer-events:none;transition:right var(--_nav-expand-motion), top var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{right:var(--dimension-space-075);top:var(--dimension-space-075)}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms, mask-position var(--_nav-label-fade-out-motion) 0ms, -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 var(--dimension-space-075, 6px);pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms, max-height var(--_nav-label-fade-out-motion) 0ms, padding var(--_nav-label-fade-out-motion) 0ms, color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer-fade.sc-ds-panel-nav{--ds-fade-offset:100%}.panel-nav__footer-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-half);cursor:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;background:transparent;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease), color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav__footer-btn.sc-ds-panel-nav:focus-visible{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav--navigation.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-background-secondary);color:var(--color-foreground-secondary);transition:none}.panel-nav--default.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-navigation-background);color:var(--color-navigation-foreground-secondary);transition:none}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion), right var(--_nav-expand-motion), top var(--_nav-expand-motion), color var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);right:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav__user-initial.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_nav-fg-secondary);text-transform:uppercase;line-height:1;pointer-events:none;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:10;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-background-bold-brand);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;transition-delay:0.01ms !important}}`;const C=new WeakMap;const I=new WeakMap;const A=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=n(this,"dsNavSelect");this.dsNavToggle=n(this,"dsNavToggle");this.dsNavFooterAction=n(this,"dsNavFooterAction");this.dsNavUserAction=n(this,"dsNavUserAction");this.navStyle="navigation";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.renderedStyle="navigation";this.parsedGroups=[];this.atBottom=false;this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return k(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(){this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=x(e);this.syncRovingIndex();this.syncActiveFromUrl()}onActiveIdChange(){this.syncRovingIndex()}onCurrentUrlChange(){this.syncActiveFromUrl()}async onNavStyleChange(e){if(this.effectiveDisableViewTransition){this.renderedStyle=e;return}C.get(this)?.skipTransition();C.delete(this);const a=document;if(typeof a.startViewTransition!=="function"){this.renderedStyle=e;return}o();const n=r(this.el.querySelector(".panel-nav__footer-btn"));l(n);const t=a.startViewTransition((()=>new Promise((a=>{I.set(this,a);this.renderedStyle=e}))));C.set(this,t);t.finished.finally((()=>{if(C.get(this)===t)C.delete(this);I.delete(this)}));t.ready.then((()=>d(n))).catch((()=>{}))}componentWillLoad(){this.renderedStyle=u(this.navStyle,this.el.getAttribute("nav-style"));if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.checkScroll();if(this.breakpoint>0)this.connectResizeObserver()}componentDidRender(){const e=I.get(this);if(e){I.delete(this);e()}}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){this.isAnimating=true;const e=this.el.querySelector(".panel-nav");if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=a=>{if(a.propertyName==="width"){this.isAnimating=false;e?.removeEventListener("transitionend",this.transitionEndHandler)}};e?.addEventListener("transitionend",this.transitionEndHandler)}connectResizeObserver(){this.viewportNarrow=window.innerWidth<this.breakpoint;this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=window.innerWidth<this.breakpoint}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=g(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){this.syncRenderedStyleIfNeeded();if(w(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}syncRenderedStyleIfNeeded(){if(!_(this.renderedStyle,this.navStyle))return;if(this.effectiveDisableViewTransition){C.get(this)?.skipTransition();C.delete(this);this.renderedStyle=this.navStyle}else{void this.onNavStyleChange(this.navStyle)}}scheduleDeferredHostPropSync(){let a=e.HOST_PROP_SYNC_BUDGET;const n=()=>{this.syncHostPropsIfNeeded();if(--a>0){requestAnimationFrame(n)}};queueMicrotask(n)}applyToggle(e){this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}syncRovingIndex(){const e=this.getAllItems().findIndex((e=>e.id===this.effectiveActiveId));this.rovingIndex=e>=0?e:0}handleItemKeyDown(e,a){const n=this.getAllItems().length;let t;switch(e.key){case"ArrowDown":e.preventDefault();t=(a+1)%n;break;case"ArrowUp":e.preventDefault();t=(a-1+n)%n;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=n-1;break;default:return}this.rovingIndex=t;const i=Array.from(this.el.querySelectorAll(".panel-nav__body .panel-nav__item"));i[t]?.focus()}checkScroll(){const e=this.el.querySelector(".panel-nav__body");if(!e)return;const a=e.scrollHeight-e.scrollTop-e.clientHeight;this.atBottom=a<2}handleBodyScroll(e){const a=e.target;const n=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=n<2}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(){this.dsNavUserAction.emit()}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const a=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const n=e=>{const n=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(n);if(this.didSnap)return;if(!a&&n<-8){this.applyToggle(true);this.didSnap=true}else if(a&&n>8){this.applyToggle(false);this.didSnap=true}};const t=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!a)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",n);window.removeEventListener("mouseup",t);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=n;this.globalMouseUpHandler=t;window.addEventListener("mousemove",n);window.addEventListener("mouseup",t)}renderNavItem(e,a,n){const i=e.id===this.effectiveActiveId;const s=[t("span",{class:"panel-nav__item-icon"},t("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),t("span",{class:"panel-nav__item-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:i?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},e.label))),e.dot&&t("ds-badge",{class:"panel-nav__item-dot",variant:"dot",background:"var(--_nav-bg)",label:"","aria-hidden":"true"})];const o={class:{"panel-nav__item":true,"panel-nav__item--active":i},"aria-current":i?"page":undefined,title:n?e.label:undefined,tabIndex:a===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleItemKeyDown(e,a),onFocus:()=>{this.rovingIndex=a}};const r=this.routerMode==="anchor"&&e.href;return r?t("a",{...o,href:e.href},s):t("button",{...o,type:"button"},s)}render(){const e=this.renderedStyle==="navigation";const a=this.collapsed||this.viewportNarrow;const{userName:n,userInitial:s}=this;const o={"panel-nav":true,"panel-nav--navigation":e,"panel-nav--default":!e,"panel-nav--collapsed":a,"panel-nav--animating":this.isAnimating,"panel-nav--at-bottom":this.atBottom};return t(i,{key:"91cd5a42fcc9f49d95b1b8faafa4a22f8a134c5b",style:{display:"block",position:"relative"}},t("nav",{key:"80d5a76845e3e623ec8ff26d4b3a68df35a0cfd2",class:o,"aria-label":e?"Main navigation":"Settings navigation"},t("div",{key:"306d72f8a737bc9893c86940aa7756290906a705",class:"panel-nav__header"},t("button",{key:"1ade4f8be5fa87c6e7491fc5a9f0e9f5ecddd954",type:"button",class:"panel-nav__header-btn",onClick:()=>this.handleToggle(),"aria-label":a?"Expand navigation":"Collapse navigation","aria-expanded":a?"false":"true"},t("span",{key:"b735af8e8305dea191f170017e8a8d5e62a7630a",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"d1d0cdeb2c3224957caf248052aedc0eb5306d69",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},t("path",{key:"0a6ae90e524f2122159969a0195e2416e855217b",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),t("span",{key:"ed9774d2da06c7ff6fd0decce6151898406d9e85",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"c3c2a6e73865ce3899b09ee16c462dde4ba145db",name:a?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"1e11fff31e68c8f5b56c89f78802f87383eefb97",class:"panel-nav__body",onScroll:e=>this.handleBodyScroll(e)},(()=>{let e=0;return this.parsedGroups.map((n=>t("div",{class:"panel-nav__group"},n.label&&t("span",{class:"panel-nav__group-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},n.label))),n.items.map((n=>this.renderNavItem(n,e++,a))))))})()),t("div",{key:"49ab0846e716a94b3f5aa6ebb0ecb1f7ff337398",class:"panel-nav__footer"},t("ds-fade",{key:"0135a19fd2ca11ef0f38f98f4f2cfab885f5e13e",class:"panel-nav__footer-fade",side:"bottom",size:"size-600",background:"var(--_nav-bg)",visible:!this.atBottom}),t("button",{key:"e5d0da0bb07351ca17db2eddabbacfe10c1e9144",type:"button",class:"panel-nav__footer-btn",title:e?"Settings":"Dashboard","aria-label":e?"Open settings":"Go to dashboard",onClick:()=>this.handleFooterAction()},t("ds-icon",{key:"126a869c05cf1303656774508a536a359bd666b1",name:e?"Gear":"Dashboard",size:"md",color:"inherit"})),t("button",{key:"a10934b39bf2657e5957b7b6e52842daec4dba42",type:"button",class:"panel-nav__item panel-nav__footer-user","aria-label":a?`User: ${n}`:`User menu for ${n}`,onClick:()=>this.handleUserAction()},t("span",{key:"df601dd4ebc5932b5ab6ba9560d1718c9123853e",class:"panel-nav__item-label panel-nav__footer-user-label"},t("span",{key:"b210ebb4c78418f2187c568f8a45f367026fe98f",class:"panel-nav__item-label-text"},t("ds-text",{key:"21a4adfe4bfa4f3d0080d2e4330206a490ef9dc3",as:"span",variant:"text-body-medium-emphasis",color:"inherit"},n))),t("span",{key:"4302d7d2b83932551e2f5501808fa97402660ad5",class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{key:"f4999c7c28a929feadf363672ec3e1ff60b58e2e",class:"panel-nav__footer-icon-expanded"},t("ds-icon",{key:"09f3ae384c38635717683de579f00c16465319e1",name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{key:"300edb37bde397d3053f3212663f13eb6cf805eb",class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{key:"9ee1a083a80d029ee74ce0a51e36c131ed8ff1c2",name:"Circle",size:"md",color:"inherit"}),t("span",{key:"03b12581a43ab2cef77fc5be621a69ba6cbbbafd",class:"panel-nav__user-initial"},t("ds-text",{key:"41db302c3a1f1ad8a2b7c09493d933f7033211e0",as:"span",variant:"text-caption-emphasis",color:"inherit"},s))))))),!this.viewportNarrow&&t("div",{key:"32337422ac65fbdc52e0638f89b3a46e551d17c7",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return z()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],renderedStyle:[32],parsedGroups:[32],atBottom:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);A.HOST_PROP_SYNC_BUDGET=8;function S(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-fade","ds-icon","ds-text"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(s(e))){customElements.define(s(e),A)}break;case"ds-badge":if(!customElements.get(s(e))){c()}break;case"ds-fade":if(!customElements.get(s(e))){v()}break;case"ds-icon":if(!customElements.get(s(e))){p()}break;case"ds-text":if(!customElements.get(s(e))){h()}break}}))}S();const D=A;const N=S;export{D as DsPanelNav,N as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-panel-nav.js.map
|