@ds-mo/ui 0.10.2 → 0.10.3
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as a,H as s,c as e,h as
|
|
1
|
+
import{p as a,H as s,c as e,h as n,a as r,t}from"./index.js";import{d as i}from"./p-CdSPCP4g.js";import{d as o}from"./p-CkBXHj0e.js";import{d}from"./p-D1cpKdRU.js";const c=()=>`.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;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(--color-border-tertiary)}.bg-primary.sc-ds-bar-nav{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-bar-nav{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-bar-nav{background-color:transparent}.bg-translucent.sc-ds-bar-nav{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.bar-nav__left.sc-ds-bar-nav{flex:1;min-width:0;display:flex;align-items:center}.bar-nav__left.sc-ds-bar-nav ds-tab-group.sc-ds-bar-nav{flex:1;min-width:0}.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(--color-foreground-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-shrink:0}`;const b=a(class a extends s{constructor(a){super();if(a!==false){this.__registerHost()}this.dsTabChange=e(this,"dsTabChange");this.dsActionChange=e(this,"dsActionChange");this.tabs=[];this.value="";this.actions=[];this.background="secondary"}handleTabChange(a){const s=a.detail;this.value=s;this.dsTabChange.emit(s)}handleActionChange(a,s){const e=s.detail;this.dsActionChange.emit({id:a,selected:e})}render(){const a=this.tabs.length>0;const s={};const e=s[this.background];return n(r,{key:"61eb9ee05c1f6943f110d7e4777da3ca73239830"},n("header",{key:"a8910fc6c153d628f26e4de40aead2952e8f4706",class:{"bar-nav":true,[`bg-${this.background}`]:true}},n("div",{key:"7d7dfffaef40818965ed6fdf9a78aa3674928f95",class:"bar-nav__left"},a?n("ds-tab-group",{tabs:this.tabs,value:this.value,onDsChange:a=>this.handleTabChange(a)}):this.heading&&n("span",{class:"bar-nav__heading text-body-medium-emphasis"},this.heading)),this.actions.length>0&&n("div",{key:"6ee92afd8754c682175b0f8de8b929ed38fef830",class:"bar-nav__actions"},this.actions.map((a=>n("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:s=>this.handleActionChange(a.id,s)}))))))}static get style(){return c()}},[2,"ds-bar-nav",{tabs:[16],value:[1025],actions:[16],heading:[1],background:[1]}]);function l(){if(typeof customElements==="undefined"){return}const a=["ds-bar-nav","ds-bar-nav-action","ds-icon","ds-tab-group"];a.forEach((a=>{switch(a){case"ds-bar-nav":if(!customElements.get(t(a))){customElements.define(t(a),b)}break;case"ds-bar-nav-action":if(!customElements.get(t(a))){i()}break;case"ds-icon":if(!customElements.get(t(a))){o()}break;case"ds-tab-group":if(!customElements.get(t(a))){d()}break}}))}l();const f=b;const h=l;export{f as DsBarNav,h as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-bar-nav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","tabs","value","actions","background","handleTabChange","e","id","detail","dsTabChange","emit","handleActionChange","actionId","selected","dsActionChange","render","hasTabs","length","bgToActionBg","actionBg","h","Host","key","class","onDsChange","heading","map","action","icon","dot","inactive","ariaLabel"],"sources":["src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.bar-nav {\n display: flex;\n align-items: center;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n gap: var(--dimension-space-100);\n box-sizing: border-box;\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n/* Background variants — mirrors ds-header pattern */\n.bg-primary { background-color: var(--color-background-primary); }\n.bg-secondary { background-color: var(--color-background-secondary); }\n.bg-transparent { background-color: transparent; }\n.bg-translucent {\n background-color: var(--color-background-translucent);\n backdrop-filter: blur(var(--effect-blur-md));\n -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n/* Left zone — tabs fill available space */\n.bar-nav__left {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: center;\n}\n\n.bar-nav__left ds-tab-group {\n flex: 1;\n min-width: 0;\n}\n\n/* Fallback heading when no tabs */\n.bar-nav__heading {\n color: var(--color-foreground-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Right zone — action buttons, hugging right */\n.bar-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n flex-shrink: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { BarNavActionBackground } from '../BarNavAction/BarNavAction';\nimport type { TabItem } from '../TabGroup/TabGroup';\n\nexport type BarNavBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\n\nexport interface BarNavTab {\n id: string;\n label: string;\n disabled?: boolean;\n /** Notification dot on this tab. */\n dot?: boolean;\n}\n\nexport interface BarNavActionItem {\n id: string;\n /** Icon name for <ds-icon>. */\n icon: string;\n /** Whether this action button is currently pressed/active. */\n selected?: boolean;\n /** Show a notification dot. */\n dot?: boolean;\n inactive?: boolean;\n ariaLabel?: string;\n}\n\n@Component({\n tag: 'ds-bar-nav',\n styleUrl: 'BarNav.css',\n scoped: true,\n})\nexport class BarNav {\n /**\n * Tab items for the left section.\n * Set via JS property: `el.tabs = [...]`\n */\n @Prop() tabs: BarNavTab[] = [];\n\n /** ID of the currently active tab. */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Action items rendered in the right section.\n * Set via JS property: `el.actions = [...]`\n */\n @Prop() actions: BarNavActionItem[] = [];\n\n /**\n * Fallback heading shown when no tabs are provided.\n * When tabs are present the heading is hidden.\n */\n @Prop() heading: string | undefined;\n\n /** Surface background variant. */\n @Prop() background: BarNavBackground = 'secondary';\n\n /** Emitted when the active tab changes. Detail = tab id. */\n @Event() dsTabChange!: EventEmitter<string>;\n\n /** Emitted when an action button is toggled. Detail = { id, selected }. */\n @Event() dsActionChange!: EventEmitter<{ id: string; selected: boolean }>;\n\n private handleTabChange(e: Event) {\n const id = (e as CustomEvent<string>).detail;\n this.value = id;\n this.dsTabChange.emit(id);\n }\n\n private handleActionChange(actionId: string, e: Event) {\n const selected = (e as CustomEvent<boolean>).detail;\n this.dsActionChange.emit({ id: actionId, selected });\n }\n\n render() {\n const hasTabs = this.tabs.length > 0;\n\n // Map BarNavBackground → BarNavActionBackground for context pass-through.\n // primary/secondary/transparent/translucent are all light — no override needed.\n const bgToActionBg: Partial<Record<BarNavBackground, BarNavActionBackground>> = {};\n const actionBg: BarNavActionBackground | undefined = bgToActionBg[this.background];\n\n return (\n <Host>\n <header class={{ 'bar-nav': true, [`bg-${this.background}`]: true }}>\n\n <div class=\"bar-nav__left\">\n {hasTabs\n ? (\n <ds-tab-group\n tabs={this.tabs as TabItem[]}\n value={this.value}\n onDsChange={(e: Event) => this.handleTabChange(e)}\n />\n )\n : this.heading && (\n <span class=\"bar-nav__heading text-
|
|
1
|
+
{"version":3,"names":["barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","tabs","value","actions","background","handleTabChange","e","id","detail","dsTabChange","emit","handleActionChange","actionId","selected","dsActionChange","render","hasTabs","length","bgToActionBg","actionBg","h","Host","key","class","onDsChange","heading","map","action","icon","dot","inactive","ariaLabel"],"sources":["src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.bar-nav {\n display: flex;\n align-items: center;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n gap: var(--dimension-space-100);\n box-sizing: border-box;\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n/* Background variants — mirrors ds-header pattern */\n.bg-primary { background-color: var(--color-background-primary); }\n.bg-secondary { background-color: var(--color-background-secondary); }\n.bg-transparent { background-color: transparent; }\n.bg-translucent {\n background-color: var(--color-background-translucent);\n backdrop-filter: blur(var(--effect-blur-md));\n -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n/* Left zone — tabs fill available space */\n.bar-nav__left {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: center;\n}\n\n.bar-nav__left ds-tab-group {\n flex: 1;\n min-width: 0;\n}\n\n/* Fallback heading when no tabs — matches a single (selected) tab so the area\n name shares the tab label's type token, color, height and horizontal inset.\n Inset = tab button padding (space-075, 6px) + label inset (space-025, 2px). */\n.bar-nav__heading {\n display: inline-flex;\n align-items: center;\n height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n color: var(--color-foreground-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Right zone — action buttons, hugging right */\n.bar-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n flex-shrink: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { BarNavActionBackground } from '../BarNavAction/BarNavAction';\nimport type { TabItem } from '../TabGroup/TabGroup';\n\nexport type BarNavBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\n\nexport interface BarNavTab {\n id: string;\n label: string;\n disabled?: boolean;\n /** Notification dot on this tab. */\n dot?: boolean;\n}\n\nexport interface BarNavActionItem {\n id: string;\n /** Icon name for <ds-icon>. */\n icon: string;\n /** Whether this action button is currently pressed/active. */\n selected?: boolean;\n /** Show a notification dot. */\n dot?: boolean;\n inactive?: boolean;\n ariaLabel?: string;\n}\n\n@Component({\n tag: 'ds-bar-nav',\n styleUrl: 'BarNav.css',\n scoped: true,\n})\nexport class BarNav {\n /**\n * Tab items for the left section.\n * Set via JS property: `el.tabs = [...]`\n */\n @Prop() tabs: BarNavTab[] = [];\n\n /** ID of the currently active tab. */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Action items rendered in the right section.\n * Set via JS property: `el.actions = [...]`\n */\n @Prop() actions: BarNavActionItem[] = [];\n\n /**\n * Fallback heading shown when no tabs are provided.\n * When tabs are present the heading is hidden.\n */\n @Prop() heading: string | undefined;\n\n /** Surface background variant. */\n @Prop() background: BarNavBackground = 'secondary';\n\n /** Emitted when the active tab changes. Detail = tab id. */\n @Event() dsTabChange!: EventEmitter<string>;\n\n /** Emitted when an action button is toggled. Detail = { id, selected }. */\n @Event() dsActionChange!: EventEmitter<{ id: string; selected: boolean }>;\n\n private handleTabChange(e: Event) {\n const id = (e as CustomEvent<string>).detail;\n this.value = id;\n this.dsTabChange.emit(id);\n }\n\n private handleActionChange(actionId: string, e: Event) {\n const selected = (e as CustomEvent<boolean>).detail;\n this.dsActionChange.emit({ id: actionId, selected });\n }\n\n render() {\n const hasTabs = this.tabs.length > 0;\n\n // Map BarNavBackground → BarNavActionBackground for context pass-through.\n // primary/secondary/transparent/translucent are all light — no override needed.\n const bgToActionBg: Partial<Record<BarNavBackground, BarNavActionBackground>> = {};\n const actionBg: BarNavActionBackground | undefined = bgToActionBg[this.background];\n\n return (\n <Host>\n <header class={{ 'bar-nav': true, [`bg-${this.background}`]: true }}>\n\n <div class=\"bar-nav__left\">\n {hasTabs\n ? (\n <ds-tab-group\n tabs={this.tabs as TabItem[]}\n value={this.value}\n onDsChange={(e: Event) => this.handleTabChange(e)}\n />\n )\n : this.heading && (\n <span class=\"bar-nav__heading text-body-medium-emphasis\">{this.heading}</span>\n )\n }\n </div>\n\n {this.actions.length > 0 && (\n <div class=\"bar-nav__actions\">\n {this.actions.map(action => (\n <ds-bar-nav-action\n key={action.id}\n icon={action.icon}\n selected={action.selected ?? false}\n dot={action.dot ?? false}\n inactive={action.inactive}\n aria-label={action.ariaLabel ?? action.id}\n background={actionBg}\n onDsChange={(e: Event) => this.handleActionChange(action.id, e)}\n />\n ))}\n </div>\n )}\n\n </header>\n </Host>\n );\n }\n}\n"],"mappings":"oKAAA,MAAMA,EAAY,IAAM,uqC,MC+BXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,gIAUUC,KAAAC,KAAoB,GAGHD,KAAAE,MAAgB,GAMjCF,KAAAG,QAA8B,GAS9BH,KAAAI,WAA+B,WAmExC,CA3DS,eAAAC,CAAgBC,GACtB,MAAMC,EAAMD,EAA0BE,OACtCR,KAAKE,MAAQK,EACbP,KAAKS,YAAYC,KAAKH,E,CAGhB,kBAAAI,CAAmBC,EAAkBN,GAC3C,MAAMO,EAAYP,EAA2BE,OAC7CR,KAAKc,eAAeJ,KAAK,CAAEH,GAAIK,EAAUC,Y,CAG3C,MAAAE,GACE,MAAMC,EAAUhB,KAAKC,KAAKgB,OAAS,EAInC,MAAMC,EAA0E,GAChF,MAAMC,EAA+CD,EAAalB,KAAKI,YAEvE,OACEgB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CAAQC,MAAO,CAAE,UAAW,KAAM,CAAC,MAAMvB,KAAKI,cAAe,OAE3DgB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACRP,EAEGI,EAAA,gBACEnB,KAAMD,KAAKC,KACXC,MAAOF,KAAKE,MACZsB,WAAalB,GAAaN,KAAKK,gBAAgBC,KAGjDN,KAAKyB,SACLL,EAAA,QAAMG,MAAM,8CAA8CvB,KAAKyB,UAKpEzB,KAAKG,QAAQc,OAAS,GACrBG,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACRvB,KAAKG,QAAQuB,KAAIC,GAChBP,EAAA,qBACEE,IAAKK,EAAOpB,GACZqB,KAAMD,EAAOC,KACbf,SAAUc,EAAOd,UAAY,MAC7BgB,IAAKF,EAAOE,KAAO,MACnBC,SAAUH,EAAOG,SAAQ,aACbH,EAAOI,WAAaJ,EAAOpB,GACvCH,WAAYe,EACZK,WAAalB,GAAaN,KAAKW,mBAAmBgB,EAAOpB,GAAID,S","ignoreList":[]}
|