@ds-mo/ui 11.0.0 → 11.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.build-stamp +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +433 -20
- package/dist/angular/ds-button-filled.d.ts +1 -1
- package/dist/angular/ds-button-filled.js +3 -3
- package/dist/angular/ds-chart-donut.d.ts +1 -1
- package/dist/angular/ds-chart-donut.js +3 -3
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js.map +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-chart-donut.js +1 -1
- package/dist/components/ds-chart-donut.js.map +1 -1
- package/dist/components/ds-chart-line.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-section.js +1 -1
- package/dist/components/ds-conversation-list.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-composer.js.map +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-message.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-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-select-multi.js +1 -1
- package/dist/components/ds-select-multi.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +1 -1
- package/dist/components/ds-shell-gradient-picker.js +1 -1
- package/dist/components/ds-shell-gradient-picker.js.map +1 -1
- package/dist/components/ds-shell-gradient-swatch.js +1 -1
- package/dist/components/ds-swatch-picker.js +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-toast.js.map +1 -1
- package/dist/components/ds-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip-data-viz.js.map +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/ds-typing-indicator.js +1 -1
- package/dist/components/p-BCCt2eT_.js +2 -0
- package/dist/components/{p-BMwnjAIq.js.map → p-BCCt2eT_.js.map} +1 -1
- package/dist/components/{p-CbckeueL.js → p-B_qVPsEU.js} +2 -2
- package/dist/components/p-BaZRP4Oo.js +2 -0
- package/dist/components/p-BaZRP4Oo.js.map +1 -0
- package/dist/components/p-Bet_UjML.js +2 -0
- package/dist/components/{p-C8e2A66f.js.map → p-Bet_UjML.js.map} +1 -1
- package/dist/components/p-BsnezUUC.js +2 -0
- package/dist/components/{p-C3nDIMX5.js.map → p-BsnezUUC.js.map} +1 -1
- package/dist/components/{p-Hw-HMjCk.js → p-C1K5QGUZ.js} +2 -2
- package/dist/components/p-CrwU83-g.js +2 -0
- package/dist/components/{p-C_0Q8Cnp.js.map → p-CrwU83-g.js.map} +1 -1
- package/dist/components/{p-M5pt9I13.js → p-CyoHRqy6.js} +2 -2
- package/dist/components/{p-bDx_rlLm.js → p-P_4vE1ub.js} +2 -2
- package/dist/components/p-ZTugT4as.js +2 -0
- package/dist/components/{p-DirD-b2y.js.map → p-ZTugT4as.js.map} +1 -1
- package/dist/components/p-bNpFhP5L.js +2 -0
- package/dist/components/p-bNpFhP5L.js.map +1 -0
- package/dist/docs/components.json +144 -6
- package/dist/mcp/cli.js +8 -12
- package/dist/mcp-data/registry/button-filled.json +38 -2
- package/dist/mcp-data/registry/card-data-viz-donut.json +73 -4
- package/dist/mcp-data/registry/chart-bar.json +67 -3
- package/dist/mcp-data/registry/chart-donut.json +94 -8
- package/dist/mcp-data/registry/chart-legend.json +73 -3
- package/dist/mcp-data/registry/chart-line.json +67 -3
- package/dist/mcp-data/registry/registry.json +432 -19
- package/dist/mcp-data/registry/tooltip-data-viz.json +68 -4
- package/dist/types/components/ButtonFilled/ButtonFilled.d.ts +9 -0
- package/dist/types/components/ButtonFilled/index.d.ts +1 -1
- package/dist/types/components/CardDataVizDonut/CardDataVizDonut.d.ts +1 -0
- package/dist/types/components/ChartDonut/ChartDonut.d.ts +12 -2
- package/dist/types/components/TooltipDataViz/TooltipDataViz.d.ts +3 -2
- package/dist/types/components.d.ts +47 -12
- package/package.json +1 -1
- package/dist/components/p-BHtg1fh3.js +0 -2
- package/dist/components/p-BHtg1fh3.js.map +0 -1
- package/dist/components/p-BMwnjAIq.js +0 -2
- package/dist/components/p-C3nDIMX5.js +0 -2
- package/dist/components/p-C8e2A66f.js +0 -2
- package/dist/components/p-CTFBf97-.js +0 -2
- package/dist/components/p-CTFBf97-.js.map +0 -1
- package/dist/components/p-C_0Q8Cnp.js +0 -2
- package/dist/components/p-DirD-b2y.js +0 -2
- /package/dist/components/{p-CbckeueL.js.map → p-B_qVPsEU.js.map} +0 -0
- /package/dist/components/{p-Hw-HMjCk.js.map → p-C1K5QGUZ.js.map} +0 -0
- /package/dist/components/{p-M5pt9I13.js.map → p-CyoHRqy6.js.map} +0 -0
- /package/dist/components/{p-bDx_rlLm.js.map → p-P_4vE1ub.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as n,h as i,a as
|
|
1
|
+
import{p as t,H as n,h as i,a as e,t as s}from"./index.js";import{c as r}from"./p-CMv_7vFs.js";import{m as a,p as o,l as c}from"./p-CzBnvtcz.js";import{w as l,c as h,a as f}from"./p-CrCGIx8s.js";function u(t){this._context=t}u.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._point=0},lineEnd:function(){if(this._line||this._line!==0&&this._point===1)this._context.closePath();this._line=1-this._line},point:function(t,n){t=+t,n=+n;switch(this._point){case 0:this._point=1;this._line?this._context.lineTo(t,n):this._context.moveTo(t,n);break;case 1:this._point=2;default:this._context.lineTo(t,n);break}}};function d(t){return new u(t)}function p(t){return t[0]}function y(t){return t[1]}function m(t,n){var i=h(true),e=null,s=d,r=null,a=l(o);t=typeof t==="function"?t:t===undefined?p:h(t);n=typeof n==="function"?n:n===undefined?y:h(n);function o(o){var c,l=(o=f(o)).length,h,u=false,d;if(e==null)r=s(d=a());for(c=0;c<=l;++c){if(!(c<l&&i(h=o[c],c,o))===u){if(u=!u)r.lineStart();else r.lineEnd()}if(u)r.point(+t(h,c,o),+n(h,c,o))}if(d)return r=null,d+""||null}o.x=function(n){return arguments.length?(t=typeof n==="function"?n:h(+n),o):t};o.y=function(t){return arguments.length?(n=typeof t==="function"?t:h(+t),o):n};o.defined=function(t){return arguments.length?(i=typeof t==="function"?t:h(!!t),o):i};o.curve=function(t){return arguments.length?(s=t,e!=null&&(r=s(e)),o):s};o.context=function(t){return arguments.length?(t==null?e=r=null:r=s(e=t),o):e};return o}const g=()=>`.sc-ds-chart-line-h{display:inline-block;font-family:var(--typography-font-family)}.chart-line__gridline.sc-ds-chart-line{stroke:var(--color-border-tertiary);stroke-width:1}.chart-line__axis-label.sc-ds-chart-line{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.chart-line__path.sc-ds-chart-line{fill:none;stroke-width:2}.chart-line__point.sc-ds-chart-line{stroke:var(--color-background-primary);stroke-width:1.5}`;const b={top:16,right:16,bottom:24,left:32};const _=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.series=[];this.categories=[];this.width=480;this.height=240;this.showPoints=true}render(){const t=this.width-b.left-b.right;const n=this.height-b.top-b.bottom;const s=this.series.flatMap((t=>t.data));const l=a(s)??0;const h=o().domain(this.categories.map(((t,n)=>n))).range([0,t]);const f=c().domain([0,l||1]).range([n,0]).nice();const u=m().x(((t,n)=>h(n)??0)).y((t=>f(t)));const d=f.ticks(4);return i(e,{key:"9d6eb661cb7b33a2b773bb3255437854e94afc63",class:"chart-line"},i("svg",{key:"a451381883f36f5e06ea9d60bb9da1334c5e3b7b",class:"chart-line__svg",viewBox:`0 0 ${this.width} ${this.height}`,width:this.width,height:this.height,role:"img","aria-label":this.series.map((t=>t.name)).join(", ")},i("g",{key:"f07f47423131c0ae23fa6381af34fe9f50236b78",transform:`translate(${b.left}, ${b.top})`},d.map((n=>i("g",{key:`grid-${n}`,transform:`translate(0, ${f(n)})`},i("line",{class:"chart-line__gridline",x1:0,x2:t}),i("text",{class:"chart-line__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},n)))),this.categories.map(((t,e)=>i("text",{key:`x-${t}`,class:"chart-line__axis-label",x:h(e)??0,y:n+16,"text-anchor":"middle"},t))),this.series.map(((t,n)=>{const e=t.color??r(n);return i("g",{key:t.name},i("path",{class:"chart-line__path",d:u(t.data)??undefined,stroke:e}),this.showPoints&&t.data.map(((n,s)=>i("circle",{key:`${t.name}-${s}`,class:"chart-line__point",cx:h(s)??0,cy:f(n),r:3,fill:e}))))})))))}static get style(){return g()}},[2,"ds-chart-line",{series:[16],categories:[16],width:[2],height:[2],showPoints:[4,"show-points"]}]);function x(){if(typeof customElements==="undefined"){return}const t=["ds-chart-line"];t.forEach((t=>{switch(t){case"ds-chart-line":if(!customElements.get(s(t))){customElements.define(s(t),_)}break}}))}x();const k=_;const v=x;export{k as DsChartLine,v as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chart-line.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{C as o,d as s}from"./p-
|
|
1
|
+
import{C as o,d as s}from"./p-C1K5QGUZ.js";const t=o;const p=s;export{t as DsCodeBlock,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-code-block.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as i,H as t,c as s,h as e,a as o,t as n}from"./index.js";import{d as r}from"./p-DrDHC7V6.js";import{d as c}from"./p-Cpr3K41-.js";import{d as a}from"./p-CZZYGqKz.js";const d=()=>`.sc-ds-conversation-list-item-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-conversation-list-item-h:focus-visible,.ds-focus-ring.sc-ds-conversation-list-item:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-conversation-list-item-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-conversation-list-item{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-conversation-list-item-h:focus-visible,.ds-focus-ring-inset.sc-ds-conversation-list-item:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-conversation-list-item-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-conversation-list-item:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-conversation-list-item-h,.ds-interaction-fill.sc-ds-conversation-list-item{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-conversation-list-item-h::before,.ds-interaction-fill.sc-ds-conversation-list-item::before,.ds-interaction-fill.sc-ds-conversation-list-item-h::after,.ds-interaction-fill.sc-ds-conversation-list-item::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-conversation-list-item-h::before,.ds-interaction-fill.sc-ds-conversation-list-item::before{z-index:1}.ds-interaction-fill.sc-ds-conversation-list-item-h::after,.ds-interaction-fill.sc-ds-conversation-list-item::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-conversation-list-item-h,.ds-interaction-fill--bordered.sc-ds-conversation-list-item{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-conversation-list-item-h::before,.ds-interaction-fill--selected.sc-ds-conversation-list-item::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-conversation-list-item-h,.ds-interaction-fill--selected.sc-ds-conversation-list-item{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-conversation-list-item-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-conversation-list-item:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-conversation-list-item-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-conversation-list-item:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-conversation-list-item-h>.ds-interaction-fill__content.sc-ds-conversation-list-item,.ds-interaction-fill.sc-ds-conversation-list-item>.ds-interaction-fill__content.sc-ds-conversation-list-item,.ds-interaction-fill__content.sc-ds-conversation-list-item{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-faint.sc-ds-conversation-list-item{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-medium.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-bold.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-strong.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-translucent.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-inverted.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-media.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-always-dark.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-navigation.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-conversation-list-item-h,.ds-control-inactive.sc-ds-conversation-list-item{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-conversation-list-item-h,.ds-control--md.sc-ds-conversation-list-item,.ds-control--sm.sc-ds-conversation-list-item-h,.ds-control--sm.sc-ds-conversation-list-item,.ds-control--xs.sc-ds-conversation-list-item-h,.ds-control--xs.sc-ds-conversation-list-item{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-conversation-list-item-h,.ds-control--md.sc-ds-conversation-list-item{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-conversation-list-item-h,.ds-control--sm.sc-ds-conversation-list-item{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-conversation-list-item-h,.ds-control--xs.sc-ds-conversation-list-item{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-choice-popup.sc-ds-conversation-list-item{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:min( var(--dimension-panel-width-lg), calc(100vw - var(--dimension-space-200)) );max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-conversation-list-item::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-conversation-list-item{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-conversation-list-item{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-conversation-list-item{opacity:0}}.ds-choice-list.sc-ds-conversation-list-item{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section.sc-ds-conversation-list-item{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.ds-choice-section--divided.sc-ds-conversation-list-item{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-conversation-list-item{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) );text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-item.sc-ds-conversation-list-item{display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));width:100%;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-conversation-list-item:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item__content.sc-ds-conversation-list-item{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-conversation-list-item,.ds-choice-item__subtext.sc-ds-conversation-list-item,ds-text.ds-choice-item__subtext.sc-ds-conversation-list-item{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}ds-text.ds-choice-item__label.sc-ds-conversation-list-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-conversation-list-item{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-conversation-list-item,.ds-choice-item__suffix.sc-ds-conversation-list-item{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.ds-choice-empty.sc-ds-conversation-list-item,.ds-choice-loading.sc-ds-conversation-list-item{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-conversation-list-item{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-conversation-list-item::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-conversation-list-item{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--dimension-size-400)}.ds-choice-footer__summary.sc-ds-conversation-list-item,.ds-choice-footer__clear.sc-ds-conversation-list-item ds-text.sc-ds-conversation-list-item{padding-inline:calc( var(--dimension-space-050) + var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-choice-footer__clear.sc-ds-conversation-list-item{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-bold-brand);cursor:pointer}.ds-choice-footer__clear.sc-ds-conversation-list-item:hover{text-decoration:underline}.sc-ds-conversation-list-item-h{display:block;box-sizing:border-box;-webkit-user-select:none;user-select:none}.conversation-list-item__row.sc-ds-conversation-list-item{position:relative;isolation:isolate}.conversation-list-item.sc-ds-conversation-list-item{color:var(--color-foreground-primary)}.conversation-list-item--error.sc-ds-conversation-list-item{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-bold-negative)}.conversation-list-item__leading.sc-ds-conversation-list-item:empty,.conversation-list-item__trailing.sc-ds-conversation-list-item:empty{display:none}.conversation-list-item__leading.sc-ds-conversation-list-item,.conversation-list-item__trailing.sc-ds-conversation-list-item,.conversation-list-item__preview-row.sc-ds-conversation-list-item{display:flex;align-items:center}.conversation-list-item__leading.sc-ds-conversation-list-item{align-self:center;width:auto;height:auto;margin-inline-start:var(--ds-control-label-inset, var(--dimension-space-025));margin-inline-end:var(--dimension-space-050)}.conversation-list-item__content.sc-ds-conversation-list-item{min-width:0}.conversation-list-item__title-row.sc-ds-conversation-list-item{display:flex;align-items:center;min-width:0}.conversation-list-item__preview-row.sc-ds-conversation-list-item{min-width:0;gap:var(--dimension-space-100)}ds-text.conversation-list-item__title.sc-ds-conversation-list-item,ds-text.conversation-list-item__preview.sc-ds-conversation-list-item{display:block;min-width:0}ds-text.conversation-list-item__title.sc-ds-conversation-list-item{flex:1}.conversation-list-item__unread.sc-ds-conversation-list-item{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-size-200);margin-inline-end:var(--dimension-space-025)}ds-text.conversation-list-item__preview.ds-choice-item__subtext.sc-ds-conversation-list-item{-webkit-line-clamp:1}.conversation-list-item__actions.sc-ds-conversation-list-item{position:absolute;top:50%;right:var(--dimension-space-100);z-index:var(--dimension-z-index-floating);display:flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-half);background:var(--color-background-transparent);box-shadow:var(--effect-elevation-elevated-md);-webkit-backdrop-filter:blur(var(--effect-blur-sm));backdrop-filter:blur(var(--effect-blur-sm));opacity:0;pointer-events:none;transform:translateY(-50%)}.conversation-list-item__row.sc-ds-conversation-list-item:hover .conversation-list-item__actions.sc-ds-conversation-list-item,.conversation-list-item__row.sc-ds-conversation-list-item:has(:focus-visible) .conversation-list-item__actions.sc-ds-conversation-list-item,.conversation-list-item--actions-open.sc-ds-conversation-list-item-h .conversation-list-item__actions.sc-ds-conversation-list-item{opacity:1;pointer-events:auto}.conversation-list-item__row.sc-ds-conversation-list-item:hover .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-hover)}.conversation-list-item--actions-open.sc-ds-conversation-list-item-h .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-hover)}.conversation-list-item__row.sc-ds-conversation-list-item:active .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-pressed)}@media (hover: none){.conversation-list-item__actions.sc-ds-conversation-list-item{opacity:1;pointer-events:auto}.conversation-list-item--has-actions.sc-ds-conversation-list-item-h .conversation-list-item__title-row.sc-ds-conversation-list-item{padding-inline-end:var(--dimension-size-400)}}.conversation-list-item__time.sc-ds-conversation-list-item{position:absolute;width:var(--dimension-size-050);height:var(--dimension-size-050);overflow:hidden;clip-path:inset(50%);white-space:nowrap}`;const l=i(class i extends t{constructor(i){super();if(i!==false){this.__registerHost()}this.dsSelect=s(this,"dsSelect");this.conversationId="";this.conversationTitle="";this.preview="";this.updatedAt="";this.selected=false;this.state="default";this.statusLabel="";this.unreadCount=0;this.actionsOpen=false;this.handleClick=()=>this.dsSelect.emit({id:this.conversationId});this.handleActionsSlotChange=i=>{const t=i.target;this.el.classList.toggle("conversation-list-item--has-actions",t.assignedElements({flatten:true}).length>0)}}render(){const i=this.state==="busy";const t=i&&this.statusLabel?this.statusLabel:this.preview;const s=[this.conversationTitle,t,this.unreadCount>0?`${this.unreadCount} unread`:""].filter(Boolean).join(". ");return e(o,{key:"60b8a703b6a4acc9ac0403baddbe5dbfb9f9a85e",role:"listitem",class:{"conversation-list-item--actions-open":this.actionsOpen}},e("div",{key:"11397a2db611cead20a3175e554ea3a54613c12a",class:"conversation-list-item__row"},e("button",{key:"eb6fd45305c87235aaecb2d974cf743bf8fbb3f3",type:"button",class:{"conversation-list-item":true,"ds-choice-item":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.selected,"conversation-list-item--error":this.state==="error"},"aria-label":s,"aria-current":this.selected?"true":undefined,"aria-busy":i?"true":undefined,onClick:this.handleClick},e("span",{key:"9a787729bd4d502293b108dc318c4d80df2e0dc1",class:"conversation-list-item__leading ds-choice-item__icon ds-interaction-fill__content"},e("slot",{key:"161bad7d92c193a3076fd3d048ca92bb7a0216d5",name:"leading"})),e("span",{key:"f78320d148c100add25d8c8369e3b77396fb3bd2",class:"conversation-list-item__content ds-choice-item__content ds-interaction-fill__content"},e("span",{key:"68e691fec2b1458a5ce6eef271e1a128ba75da52",class:"conversation-list-item__title-row"},e("ds-text",{key:"d4d08054b3a0dae30a6254374fe5c8c165f1cea3",class:"conversation-list-item__title ds-choice-item__label",as:"span",variant:"text-body-medium",emphasis:this.unreadCount>0,color:this.unreadCount>0?"primary":"secondary",lineTruncation:1},this.conversationTitle),this.unreadCount>0?e("span",{class:"conversation-list-item__unread"},e("ds-badge",{variant:"dot",surface:"secondary"})):null),e("span",{key:"5d8e99dc07009036975fe71164ebeb2d4211a1b9",class:"conversation-list-item__preview-row"},i?e("ds-loader",{size:"sm",color:"secondary"}):null,e("ds-text",{key:"cdf195c52c47a39944ebfb737e3ac19fee0e48ee",class:"conversation-list-item__preview ds-choice-item__subtext",as:"span",variant:"text-body-small",color:this.state==="error"?"negative":"secondary",lineTruncation:1},t)),this.updatedAt?e("time",{class:"conversation-list-item__time",dateTime:this.updatedAt},this.updatedAt):null),e("span",{key:"98f202b4c632877bc6835595fd16d187c07a4210",class:"conversation-list-item__trailing ds-interaction-fill__content"},e("slot",{key:"2e7aaee19b4b3785cb91824f5982a56cd299241c",name:"trailing"}))),e("div",{key:"245a8662d68d202eb7480e17f9288f7c17a3f796",class:"conversation-list-item__actions"},e("slot",{key:"ce106630247fcb844403ca3fa2be0524507c7984",name:"actions",onSlotchange:this.handleActionsSlotChange}))))}get el(){return this}static get style(){return d()}},[262,"ds-conversation-list-item",{conversationId:[1,"conversation-id"],conversationTitle:[1,"conversation-title"],preview:[1],updatedAt:[1,"updated-at"],selected:[4],state:[1],statusLabel:[1,"status-label"],unreadCount:[2,"unread-count"],actionsOpen:[516,"actions-open"]}]);function v(){if(typeof customElements==="undefined"){return}const i=["ds-conversation-list-item","ds-badge","ds-loader","ds-text"];i.forEach((i=>{switch(i){case"ds-conversation-list-item":if(!customElements.get(n(i))){customElements.define(n(i),l)}break;case"ds-badge":if(!customElements.get(n(i))){r()}break;case"ds-loader":if(!customElements.get(n(i))){c()}break;case"ds-text":if(!customElements.get(n(i))){a()}break}}))}v();const m=l;const f=v;export{m as DsConversationListItem,f as defineCustomElement};
|
|
1
|
+
import{p as i,H as t,c as s,h as e,a as o,t as n}from"./index.js";import{d as r}from"./p-DrDHC7V6.js";import{d as c}from"./p-Cpr3K41-.js";import{d as a}from"./p-CZZYGqKz.js";const d=()=>`.sc-ds-conversation-list-item-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-conversation-list-item-h:focus-visible,.ds-focus-ring.sc-ds-conversation-list-item:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-conversation-list-item-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-conversation-list-item{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-conversation-list-item-h:focus-visible,.ds-focus-ring-inset.sc-ds-conversation-list-item:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-conversation-list-item-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-conversation-list-item:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-conversation-list-item-h,.ds-interaction-fill.sc-ds-conversation-list-item{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-conversation-list-item-h::before,.ds-interaction-fill.sc-ds-conversation-list-item::before,.ds-interaction-fill.sc-ds-conversation-list-item-h::after,.ds-interaction-fill.sc-ds-conversation-list-item::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-conversation-list-item-h::before,.ds-interaction-fill.sc-ds-conversation-list-item::before{z-index:1}.ds-interaction-fill.sc-ds-conversation-list-item-h::after,.ds-interaction-fill.sc-ds-conversation-list-item::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-conversation-list-item-h,.ds-interaction-fill--bordered.sc-ds-conversation-list-item{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-conversation-list-item-h::before,.ds-interaction-fill--selected.sc-ds-conversation-list-item::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-conversation-list-item-h,.ds-interaction-fill--selected.sc-ds-conversation-list-item{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-conversation-list-item-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-conversation-list-item:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-conversation-list-item-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-conversation-list-item:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-conversation-list-item-h>.ds-interaction-fill__content.sc-ds-conversation-list-item,.ds-interaction-fill.sc-ds-conversation-list-item>.ds-interaction-fill__content.sc-ds-conversation-list-item,.ds-interaction-fill__content.sc-ds-conversation-list-item{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-faint.sc-ds-conversation-list-item{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-medium.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-bold.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-strong.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-translucent.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-inverted.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-media.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-always-dark.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-navigation.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-conversation-list-item-h,.ds-control-inactive.sc-ds-conversation-list-item{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-conversation-list-item-h,.ds-control--md.sc-ds-conversation-list-item,.ds-control--sm.sc-ds-conversation-list-item-h,.ds-control--sm.sc-ds-conversation-list-item,.ds-control--xs.sc-ds-conversation-list-item-h,.ds-control--xs.sc-ds-conversation-list-item{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-conversation-list-item-h,.ds-control--md.sc-ds-conversation-list-item{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-conversation-list-item-h,.ds-control--sm.sc-ds-conversation-list-item{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-conversation-list-item-h,.ds-control--xs.sc-ds-conversation-list-item{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-choice-popup.sc-ds-conversation-list-item{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:min( var(--dimension-panel-width-lg), calc(100vw - var(--dimension-space-200)) );max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-conversation-list-item::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-conversation-list-item{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-conversation-list-item{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-conversation-list-item{opacity:0}}.ds-choice-list.sc-ds-conversation-list-item{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section.sc-ds-conversation-list-item{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.ds-choice-section--divided.sc-ds-conversation-list-item{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-conversation-list-item{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) );text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-item.sc-ds-conversation-list-item{display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));width:100%;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-conversation-list-item:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item__content.sc-ds-conversation-list-item{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-conversation-list-item,.ds-choice-item__subtext.sc-ds-conversation-list-item,ds-text.ds-choice-item__subtext.sc-ds-conversation-list-item{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}ds-text.ds-choice-item__label.sc-ds-conversation-list-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-conversation-list-item{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-conversation-list-item,.ds-choice-item__suffix.sc-ds-conversation-list-item{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.ds-choice-empty.sc-ds-conversation-list-item,.ds-choice-loading.sc-ds-conversation-list-item{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-conversation-list-item{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-conversation-list-item::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-conversation-list-item{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--dimension-size-400)}.ds-choice-footer__summary.sc-ds-conversation-list-item,.ds-choice-footer__clear.sc-ds-conversation-list-item ds-text.sc-ds-conversation-list-item{padding-inline:calc( var(--dimension-space-050) + var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-choice-footer__clear.sc-ds-conversation-list-item{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-bold-brand);cursor:pointer}.ds-choice-footer__clear.sc-ds-conversation-list-item:hover{text-decoration:underline}.sc-ds-conversation-list-item-h{display:block;box-sizing:border-box;-webkit-user-select:none;user-select:none}.conversation-list-item__row.sc-ds-conversation-list-item{position:relative;isolation:isolate}.conversation-list-item.sc-ds-conversation-list-item{color:var(--color-foreground-primary)}.conversation-list-item--error.sc-ds-conversation-list-item{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-bold-negative)}.conversation-list-item__leading.sc-ds-conversation-list-item:empty,.conversation-list-item__trailing.sc-ds-conversation-list-item:empty{display:none}.conversation-list-item__leading.sc-ds-conversation-list-item,.conversation-list-item__trailing.sc-ds-conversation-list-item,.conversation-list-item__preview-row.sc-ds-conversation-list-item{display:flex;align-items:center}.conversation-list-item__leading.sc-ds-conversation-list-item{align-self:center;width:auto;height:auto;margin-inline-start:var(--ds-control-label-inset, var(--dimension-space-025));margin-inline-end:var(--dimension-space-050)}.conversation-list-item__content.sc-ds-conversation-list-item{min-width:0}.conversation-list-item__title-row.sc-ds-conversation-list-item{display:flex;align-items:center;min-width:0}.conversation-list-item__preview-row.sc-ds-conversation-list-item{min-width:0;gap:var(--dimension-space-100)}ds-text.conversation-list-item__title.sc-ds-conversation-list-item,ds-text.conversation-list-item__preview.sc-ds-conversation-list-item{display:block;min-width:0}ds-text.conversation-list-item__title.sc-ds-conversation-list-item{flex:1}.conversation-list-item__unread.sc-ds-conversation-list-item{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-size-200);margin-inline-end:var(--dimension-space-025)}ds-text.conversation-list-item__preview.ds-choice-item__subtext.sc-ds-conversation-list-item{-webkit-line-clamp:1}.conversation-list-item__actions.sc-ds-conversation-list-item{position:absolute;top:50%;right:var(--dimension-space-100);z-index:var(--dimension-z-index-floating);display:flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-half);background:var(--color-background-transparent);box-shadow:var(--effect-elevation-elevated-md);-webkit-backdrop-filter:blur(var(--effect-blur-sm));backdrop-filter:blur(var(--effect-blur-sm));opacity:0;pointer-events:none;transform:translateY(-50%)}.conversation-list-item__row.sc-ds-conversation-list-item:hover .conversation-list-item__actions.sc-ds-conversation-list-item,.conversation-list-item__row.sc-ds-conversation-list-item:has(:focus-visible) .conversation-list-item__actions.sc-ds-conversation-list-item,.conversation-list-item--actions-open.sc-ds-conversation-list-item-h .conversation-list-item__actions.sc-ds-conversation-list-item{opacity:1;pointer-events:auto}.conversation-list-item__row.sc-ds-conversation-list-item:hover .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-hover)}.conversation-list-item--actions-open.sc-ds-conversation-list-item-h .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-hover)}.conversation-list-item__row.sc-ds-conversation-list-item:active .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-pressed)}@media (hover: none){.conversation-list-item__actions.sc-ds-conversation-list-item{opacity:1;pointer-events:auto}.conversation-list-item--has-actions.sc-ds-conversation-list-item-h .conversation-list-item__title-row.sc-ds-conversation-list-item{padding-inline-end:var(--dimension-size-400)}}.conversation-list-item__time.sc-ds-conversation-list-item{position:absolute;width:var(--dimension-size-050);height:var(--dimension-size-050);overflow:hidden;clip-path:inset(50%);white-space:nowrap}`;const l=i(class i extends t{constructor(i){super();if(i!==false){this.__registerHost()}this.dsSelect=s(this,"dsSelect");this.conversationId="";this.conversationTitle="";this.preview="";this.updatedAt="";this.selected=false;this.state="default";this.statusLabel="";this.unreadCount=0;this.actionsOpen=false;this.handleClick=()=>this.dsSelect.emit({id:this.conversationId});this.handleActionsSlotChange=i=>{const t=i.target;this.el.classList.toggle("conversation-list-item--has-actions",t.assignedElements({flatten:true}).length>0)}}render(){const i=this.state==="busy";const t=i&&this.statusLabel?this.statusLabel:this.preview;const s=[this.conversationTitle,t,this.unreadCount>0?`${this.unreadCount} unread`:""].filter(Boolean).join(". ");return e(o,{key:"f6d1416fbe39059f1dd18d7f7b7d8ccf7acab22b",role:"listitem",class:{"conversation-list-item--actions-open":this.actionsOpen}},e("div",{key:"8bafe467c2cb212f16d0b9000b1d0b4759dcb1a3",class:"conversation-list-item__row"},e("button",{key:"d504c9806ef8a776b301aa882e2c9c3a1b496343",type:"button",class:{"conversation-list-item":true,"ds-choice-item":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.selected,"conversation-list-item--error":this.state==="error"},"aria-label":s,"aria-current":this.selected?"true":undefined,"aria-busy":i?"true":undefined,onClick:this.handleClick},e("span",{key:"55b5904f6228e19d8ad93c6307620c2ceb34cb7f",class:"conversation-list-item__leading ds-choice-item__icon ds-interaction-fill__content"},e("slot",{key:"1aa8d81a46d9c82cceb4f20e94c864e254e71e85",name:"leading"})),e("span",{key:"ceddccb7fe8dbbf92948b931f99f7eca0b36198f",class:"conversation-list-item__content ds-choice-item__content ds-interaction-fill__content"},e("span",{key:"3530db18b57f9a969180903d669e706a86f3cab6",class:"conversation-list-item__title-row"},e("ds-text",{key:"38f926003308badbacc2838374b7e8f6be840201",class:"conversation-list-item__title ds-choice-item__label",as:"span",variant:"text-body-medium",emphasis:this.unreadCount>0,color:this.unreadCount>0?"primary":"secondary",lineTruncation:1},this.conversationTitle),this.unreadCount>0?e("span",{class:"conversation-list-item__unread"},e("ds-badge",{variant:"dot",surface:"secondary"})):null),e("span",{key:"5a7426a338dc4365ecab0d0030b81cd6395a48c0",class:"conversation-list-item__preview-row"},i?e("ds-loader",{size:"sm",color:"secondary"}):null,e("ds-text",{key:"59a1e67d43fac1f3543896f23c29a0c2f9beff33",class:"conversation-list-item__preview ds-choice-item__subtext",as:"span",variant:"text-body-small",color:this.state==="error"?"negative":"secondary",lineTruncation:1},t)),this.updatedAt?e("time",{class:"conversation-list-item__time",dateTime:this.updatedAt},this.updatedAt):null),e("span",{key:"aa55b59dadfc555532fbcbf22e65e2b7c76b7077",class:"conversation-list-item__trailing ds-interaction-fill__content"},e("slot",{key:"3a99028a15b8b21e927e27a450e6cc4c3ad7be40",name:"trailing"}))),e("div",{key:"71012c5bbcb0369462c306fb661dbb4244b2b8c8",class:"conversation-list-item__actions"},e("slot",{key:"b7491a12d7fd7ce71696501b1384b1a33b8bf0ee",name:"actions",onSlotchange:this.handleActionsSlotChange}))))}get el(){return this}static get style(){return d()}},[262,"ds-conversation-list-item",{conversationId:[1,"conversation-id"],conversationTitle:[1,"conversation-title"],preview:[1],updatedAt:[1,"updated-at"],selected:[4],state:[1],statusLabel:[1,"status-label"],unreadCount:[2,"unread-count"],actionsOpen:[516,"actions-open"]}]);function v(){if(typeof customElements==="undefined"){return}const i=["ds-conversation-list-item","ds-badge","ds-loader","ds-text"];i.forEach((i=>{switch(i){case"ds-conversation-list-item":if(!customElements.get(n(i))){customElements.define(n(i),l)}break;case"ds-badge":if(!customElements.get(n(i))){r()}break;case"ds-loader":if(!customElements.get(n(i))){c()}break;case"ds-text":if(!customElements.get(n(i))){a()}break}}))}v();const m=l;const f=v;export{m as DsConversationListItem,f as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-conversation-list-item.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as e,h as t,a as i,t as n}from"./index.js";import{d as
|
|
1
|
+
import{p as s,H as e,h as t,a as i,t as n}from"./index.js";import{d as c}from"./p-CZZYGqKz.js";const o=()=>`.sc-ds-conversation-list-section-h{display:block;box-sizing:border-box;-webkit-user-select:none;user-select:none}.sc-ds-conversation-list-section-h:not(:first-child){margin-top:var(--dimension-space-200)}.conversation-list-section.sc-ds-conversation-list-section{display:flex;flex-direction:column;gap:var(--dimension-space-050)}ds-text.conversation-list-section__heading.sc-ds-conversation-list-section{display:block;padding:var(--dimension-space-050) var(--dimension-space-100)}.conversation-list-section__items.sc-ds-conversation-list-section{display:flex;flex-direction:column;gap:var(--dimension-space-025)}`;let a=0;const d=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.heading="";this.sectionId="";this.generatedId=`ds-conversation-section-${++a}`}render(){const s=this.sectionId||this.generatedId;return t(i,{key:"b602d9045cb0675671c7af5faa703f9165645a4c"},t("section",{key:"cc7ae0a38289f741d90cd55b15c1821d342e7c9f",class:"conversation-list-section","aria-labelledby":s},t("ds-text",{key:"2e9b4d22699611ea0f34b11e872dade15ecf59c1",class:"conversation-list-section__heading",textId:s,as:"h3",variant:"text-caption",emphasis:true,color:"secondary"},this.heading),t("div",{key:"7e65032fa41a9b7ff57f42091b53bd61ae5ef8c4",class:"conversation-list-section__items",role:"list"},t("slot",{key:"133a3f82e11c8a3cd929ac9ecb50b9ce240c2d61"}))))}static get style(){return o()}},[262,"ds-conversation-list-section",{heading:[1],sectionId:[1,"section-id"]}]);function r(){if(typeof customElements==="undefined"){return}const s=["ds-conversation-list-section","ds-text"];s.forEach((s=>{switch(s){case"ds-conversation-list-section":if(!customElements.get(n(s))){customElements.define(n(s),d)}break;case"ds-text":if(!customElements.get(n(s))){c()}break}}))}r();const l=d;const f=r;export{l as DsConversationListSection,f as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-conversation-list-section.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,h as i,a as t,t as n}from"./index.js";const o=()=>`.sc-ds-conversation-list-h{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.conversation-list.sc-ds-conversation-list{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;box-sizing:border-box}.conversation-list__content.sc-ds-conversation-list{position:relative;flex:1 1 auto;min-height:0;overflow:auto;padding:var(--dimension-space-100);padding-bottom:calc(var(--dimension-size-600) + var(--dimension-size-100));box-sizing:border-box}.conversation-list__empty.sc-ds-conversation-list{display:contents}.conversation-list__actions.sc-ds-conversation-list{position:absolute;right:var(--dimension-space-200);bottom:var(--dimension-space-200);z-index:var(--dimension-z-index-floating)}.conversation-list__actions-surface.sc-ds-conversation-list{display:flex;border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-md)}.conversation-list__actions-surface.sc-ds-conversation-list:empty{display:none}`;const a=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}}render(){return i(t,{key:"
|
|
1
|
+
import{p as e,H as s,h as i,a as t,t as n}from"./index.js";const o=()=>`.sc-ds-conversation-list-h{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.conversation-list.sc-ds-conversation-list{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;box-sizing:border-box}.conversation-list__content.sc-ds-conversation-list{position:relative;flex:1 1 auto;min-height:0;overflow:auto;padding:var(--dimension-space-100);padding-bottom:calc(var(--dimension-size-600) + var(--dimension-size-100));box-sizing:border-box}.conversation-list__empty.sc-ds-conversation-list{display:contents}.conversation-list__actions.sc-ds-conversation-list{position:absolute;right:var(--dimension-space-200);bottom:var(--dimension-space-200);z-index:var(--dimension-z-index-floating)}.conversation-list__actions-surface.sc-ds-conversation-list{display:flex;border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-md)}.conversation-list__actions-surface.sc-ds-conversation-list:empty{display:none}`;const a=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}}render(){return i(t,{key:"6f93be1a66c6ddafba291c03c05ea004da0624d7"},i("div",{key:"f673eca079ca612df7e0d685382ad4982965d5de",class:"conversation-list"},i("div",{key:"ef6a147ad37c6d45d5e0cefe56b46487ab820748",class:"conversation-list__content"},i("slot",{key:"4e50e41eb2a42eeab84fe24c5b69c3d70d46381b"}),i("div",{key:"cc25d7ed47b54b2a25da0c142e9e27b9f0b4a998",class:"conversation-list__empty"},i("slot",{key:"e6f555ff09f23e715d11689196e33de33a4dbe1e",name:"empty"}))),i("div",{key:"cac87128e73d9676aa7a727886b2eb9b418d69fe",class:"conversation-list__actions"},i("div",{key:"fe4e0115c72ce6694f5638600a546d26d6571a02",class:"conversation-list__actions-surface"},i("slot",{key:"9014ce94e765e073a761ab5d2a34d49378306487",name:"actions"})))))}static get style(){return o()}},[262,"ds-conversation-list"]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-conversation-list"];e.forEach((e=>{switch(e){case"ds-conversation-list":if(!customElements.get(n(e))){customElements.define(n(e),a)}break}}))}c();const d=a;const r=c;export{d as DsConversationList,r as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-conversation-list.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{E as o,d as s}from"./p-
|
|
1
|
+
import{E as o,d as s}from"./p-Bet_UjML.js";const t=o;const p=s;export{t as DsEmptyState,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-empty-state.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,h as i,a as s,t as d}from"./index.js";import{d as n}from"./p-CZZYGqKz.js";const r=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__control.sc-ds-field{display:flex;min-width:0}.field__control.sc-ds-field>*.sc-ds-field{width:100%}`;let a=0;const o=e=>e?.split(/\s+/).filter(Boolean)??[];const l=(...e)=>[...new Set(e.flat())];const
|
|
1
|
+
import{p as e,H as t,h as i,a as s,t as d}from"./index.js";import{d as n}from"./p-CZZYGqKz.js";const r=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__control.sc-ds-field{display:flex;min-width:0}.field__control.sc-ds-field>*.sc-ds-field{width:100%}`;let a=0;const o=e=>e?.split(/\s+/).filter(Boolean)??[];const l=(...e)=>[...new Set(e.flat())];const c=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.error=false;this.focused=false;this.filled=false;this.dirty=false;this.touched=false;this.controlDisabled=false;this.controlRequired=false;this.generatedId=`ds-field-${++a}`;this.initialValue="";this.authoredAria=new WeakMap;this.syncControl=()=>{const e=this.findControl();if(!e)return;if(e!==this.control){this.control=e;this.initialValue=this.readValue(e);this.authoredAria.set(e,{labelledby:o(e.getAttribute("aria-labelledby")),describedby:o(e.getAttribute("aria-describedby"))})}const t=e.tagName.startsWith("DS-");if(t&&"inputId"in e)e.inputId=this.controlId;else this.updateControlAttribute(e,"id",this.controlId);const i=this.authoredAria.get(e)??{labelledby:[],describedby:[]};const s=l(i.labelledby,[this.labelId]).join(" ");const d=l(i.describedby,this.renderedDescription?[this.descriptionId]:[],this.renderedError?[this.errorId]:[]).join(" ");this.updateControlAttribute(e,"aria-labelledby",s);this.updateControlAttribute(e,"aria-describedby",d||undefined);this.updateControlAttribute(e,"aria-invalid",this.error?"true":undefined);if(t&&"error"in e&&e.error!==this.error)e.error=this.error;const n=this.readValue(e);this.filled=n.length>0;this.dirty=n!==this.initialValue;this.controlDisabled=Boolean(e.disabled||e.isInactive||e.hasAttribute("disabled"));this.controlRequired=Boolean(e.required||e.hasAttribute("required"))};this.handleLabelClick=e=>{if(!this.control?.tagName.startsWith("DS-"))return;e.preventDefault();this.control.setFocus?.()};this.handleFocusIn=()=>{this.focused=true};this.handleFocusOut=e=>{if(e.relatedTarget instanceof Node&&this.el.contains(e.relatedTarget))return;this.focused=false;this.touched=true};this.handleValueChange=()=>{this.syncControl()}}componentDidLoad(){this.syncControl();requestAnimationFrame((()=>this.syncControl()))}componentDidRender(){this.syncControl()}onFieldContractChange(){this.syncControl()}get controlId(){return this.fieldId||this.generatedId}get labelId(){return`${this.controlId}-label`}get descriptionId(){return`${this.controlId}-description`}get errorId(){return`${this.controlId}-error`}get renderedDescription(){return Boolean(this.description)&&!this.renderedError}get renderedError(){return this.error&&Boolean(this.errorMessage)}readValue(e){const t=e.value;return Array.isArray(t)?t.join(""):String(t??"")}updateControlAttribute(e,t,i){if(i===undefined){if(e.hasAttribute(t))e.removeAttribute(t);return}if(e.getAttribute(t)!==i)e.setAttribute(t,i)}findControl(){return this.controlContainer?.querySelector(":scope > :not(slot)")??undefined}render(){return i(s,{key:"770f608fcdb50c7ae5fb5aedce993d8cd4fc5cea","data-focused":this.focused?"":undefined,"data-filled":this.filled?"":undefined,"data-dirty":this.dirty?"":undefined,"data-touched":this.touched?"":undefined,"data-invalid":this.error?"":undefined,"data-disabled":this.controlDisabled?"":undefined,"data-required":this.controlRequired?"":undefined,onFocusin:this.handleFocusIn,onFocusout:this.handleFocusOut,onInput:this.handleValueChange,onChange:this.handleValueChange,onDsChange:this.handleValueChange},i("div",{key:"b2a17de433c991c778f3b3cb9896e986a4b9e970",class:"field"},i("ds-text",{key:"61f76876fc4882d9d026a69270794c68cb3a1d32",class:"field__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:this.controlId,textId:this.labelId,onClick:this.handleLabelClick},this.label),i("div",{key:"031c2e6319bc9b186c1680e52e9ec36d0f56c2f4",class:"field__control",ref:e=>this.controlContainer=e},i("slot",{key:"f6b6c358b0f4ba640e0a90f05071ec6c1b822529",onSlotchange:this.syncControl})),this.renderedDescription&&i("ds-text",{key:"eca1e2d3ba6cc638993654a53218972c3bbb3618",class:"field__description",as:"div",variant:"text-body-small",color:"secondary",textId:this.descriptionId},this.description),this.renderedError&&i("ds-text",{key:"ba1c17fbcc2f55c962741262feb681a7f10f48fc",class:"field__error",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage)))}get el(){return this}static get watchers(){return{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}}static get style(){return r()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"],description:[1],error:[4],errorMessage:[1,"error-message"],focused:[32],filled:[32],dirty:[32],touched:[32],controlDisabled:[32],controlRequired:[32]},undefined,{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-field","ds-text"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(d(e))){customElements.define(d(e),c)}break;case"ds-text":if(!customElements.get(d(e))){n()}break}}))}h();const f=c;const u=h;export{f as DsField,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-field.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{M as
|
|
1
|
+
import{M as s,d as o}from"./p-B_qVPsEU.js";const t=s;const p=o;export{t as DsMarkdown,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-markdown.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{M as
|
|
1
|
+
import{M as s,d as o}from"./p-BsnezUUC.js";const t=s;const n=o;export{t as DsMenu,n as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-menu.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as
|
|
1
|
+
import{p as e,H as s,c as t,h as o,a,t as i}from"./index.js";import{d as r}from"./p-BaZRP4Oo.js";import{d as c}from"./p-DuNZGFkV.js";import{d as n}from"./p-Cpr3K41-.js";import{d}from"./p-CZZYGqKz.js";const m=()=>`.sc-ds-message-composer-h{display:block;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none}.message-composer.sc-ds-message-composer{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%;margin:0}.message-composer__attachments.sc-ds-message-composer:empty,.message-composer__tools.sc-ds-message-composer:empty{display:none}.message-composer__field.sc-ds-message-composer{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);border-radius:var(--dimension-radius-125);background:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-md);overflow:hidden}.message-composer.sc-ds-message-composer:not(.message-composer--error) .message-composer__field.sc-ds-message-composer:focus-within{box-shadow:var(--effect-elevation-elevated-md), inset 0 0 0 var(--dimension-stroke-width-018) var(--color-border-bold-brand)}.message-composer--error.sc-ds-message-composer .message-composer__field.sc-ds-message-composer{box-shadow:var(--effect-elevation-elevated-md), inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-negative)}textarea.sc-ds-message-composer{width:100%;min-height:calc(var(--typography-lineheight-md) * 2 + var(--dimension-space-150));max-height:calc(var(--typography-lineheight-md) * 6 + var(--dimension-space-150));padding:var(--dimension-space-075);border:none;outline:none;resize:none;overflow-y:auto;box-sizing:border-box;background:transparent;color:var(--color-foreground-primary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);-webkit-user-select:text;user-select:text}textarea.sc-ds-message-composer::placeholder{color:var(--color-foreground-secondary)}textarea.sc-ds-message-composer:focus::placeholder{color:var(--color-foreground-quaternary)}textarea.sc-ds-message-composer:focus,textarea.sc-ds-message-composer:focus-visible{outline:none}.message-composer__tools.sc-ds-message-composer{display:flex;align-items:center;gap:var(--dimension-space-050);min-height:var(--dimension-size-400)}.message-composer__controls.sc-ds-message-composer{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-050);width:100%;min-width:0}.message-composer__actions.sc-ds-message-composer{display:flex;align-items:center;gap:var(--dimension-space-100);flex:0 0 auto;margin-inline-start:auto}`;const l=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsInput=t(this,"dsInput");this.dsSubmit=t(this,"dsSubmit");this.dsStop=t(this,"dsStop");this.value="";this.placeholder="Write a message";this.label="Message";this.status="ready";this.isInactive=false;this.submitIntent="brand";this.handleInput=e=>{this.value=e.target.value;this.resize();this.dsInput.emit(this.value)};this.handleKeyDown=e=>{if(e.key!=="Enter"||e.shiftKey||e.isComposing)return;e.preventDefault();this.submit()};this.handleAction=()=>{if(this.streaming)this.dsStop.emit();else this.submit()}}componentDidLoad(){this.resize()}onValueChange(){requestAnimationFrame((()=>this.resize()))}async setFocus(){this.textarea?.focus()}get streaming(){return this.status==="submitted"||this.status==="streaming"}resize(){if(!this.textarea)return;this.textarea.style.height="auto";this.textarea.style.height=`${this.textarea.scrollHeight}px`}submit(){const e=this.value.trim();if(!e||this.isInactive||this.streaming)return;this.dsSubmit.emit({text:e})}render(){const e=this.status==="error";return o(a,{key:"6bb86b904675f1159fcd659130820927b02bc8b1"},o("form",{key:"b21cf5dc3f7d12762c949119580942d65b6519cd",class:{"message-composer":true,"message-composer--error":e},"aria-busy":this.streaming?"true":undefined,onSubmit:e=>{e.preventDefault();this.submit()}},o("div",{key:"54c3a9ed81bd90b50812252dcf4828526926ee81",class:"message-composer__attachments"},o("slot",{key:"6cf5fec0dcde859811246f48269d3318a6e968b6",name:"attachments"})),o("div",{key:"213aa04f2011c93380e37e9cf5cb34df06db8bea",class:"message-composer__field"},o("textarea",{key:"0f3b1b1902368fce91365ffd4c2f96713f9a3b8f",ref:e=>{this.textarea=e},value:this.value,placeholder:this.placeholder,"aria-label":this.label,"aria-invalid":e?"true":undefined,disabled:this.isInactive,rows:2,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),o("div",{key:"67651e4aef46e3a44087a04de4adc00222b2e643",class:"message-composer__controls"},o("div",{key:"576fe87451740547f3959344c0e454fc253c2da2",class:"message-composer__tools"},o("slot",{key:"bcb75a57b5ece41872d3c6c025362c4505836d3b",name:"tools"})),o("div",{key:"86ef560152a17ba3fcf2b1b231a12053d2665392",class:"message-composer__actions"},o("slot",{key:"1180b97bb8534854d308949cf9fb2850b7145d24",name:"actions"}),o("ds-button-filled",{key:"48ac2760c611b0486447b22901052ace399f87fb",class:"message-composer__action",variant:"icon",icon:this.streaming?"SquareFilled":"ArrowUp",intent:this.streaming?"neutral":this.submitIntent,size:"md","aria-label":this.streaming?"Stop response":"Send message",isInactive:this.isInactive||!this.streaming&&!this.value.trim(),onDsClick:this.handleAction}))))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return m()}},[262,"ds-message-composer",{value:[1025],placeholder:[1],label:[1],status:[1],isInactive:[4,"is-inactive"],submitIntent:[1,"submit-intent"],setFocus:[64]},undefined,{value:[{onValueChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const e=["ds-message-composer","ds-button-filled","ds-icon","ds-loader","ds-text"];e.forEach((e=>{switch(e){case"ds-message-composer":if(!customElements.get(i(e))){customElements.define(i(e),l)}break;case"ds-button-filled":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){c()}break;case"ds-loader":if(!customElements.get(i(e))){n()}break;case"ds-text":if(!customElements.get(i(e))){d()}break}}))}p();const h=l;const f=p;export{h as DsMessageComposer,f as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-message-composer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["messageComposerCss","MessageComposer","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","placeholder","label","status","isInactive","submitIntent","handleInput","event","target","resize","dsInput","emit","handleKeyDown","key","shiftKey","isComposing","preventDefault","submit","handleAction","streaming","dsStop","componentDidLoad","onValueChange","requestAnimationFrame","setFocus","textarea","focus","style","height","scrollHeight","text","trim","dsSubmit","render","error","h","Host","class","undefined","onSubmit","name","ref","element","disabled","rows","onInput","onKeyDown","variant","icon","intent","size","onDsClick"],"sources":["src/wc/components/MessageComposer/MessageComposer.css?tag=ds-message-composer&encapsulation=scoped","src/wc/components/MessageComposer/MessageComposer.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.message-composer {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n width: 100%;\n margin: 0;\n}\n\n.message-composer__attachments:empty,\n.message-composer__tools:empty {\n display: none;\n}\n\n.message-composer__field {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-100);\n border-radius: var(--dimension-radius-125);\n background: var(--color-background-primary);\n box-shadow: var(--effect-elevation-elevated-md);\n overflow: hidden;\n}\n\n.message-composer:not(.message-composer--error) .message-composer__field:focus-within {\n box-shadow: var(--effect-elevation-elevated-md),\n inset 0 0 0 var(--dimension-stroke-width-018) var(--color-border-bold-brand);\n}\n\n.message-composer--error .message-composer__field {\n box-shadow: var(--effect-elevation-elevated-md),\n inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-negative);\n}\n\ntextarea {\n width: 100%;\n min-height: calc(var(--typography-lineheight-md) * 2 + var(--dimension-space-150));\n max-height: calc(var(--typography-lineheight-md) * 6 + var(--dimension-space-150));\n padding: var(--dimension-space-075);\n border: none;\n outline: none;\n resize: none;\n overflow-y: auto;\n box-sizing: border-box;\n background: transparent;\n color: var(--color-foreground-primary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n -webkit-user-select: text;\n user-select: text;\n}\n\ntextarea::placeholder {\n color: var(--color-foreground-secondary);\n}\n\ntextarea:focus::placeholder {\n color: var(--color-foreground-quaternary);\n}\n\ntextarea:focus,\ntextarea:focus-visible {\n outline: none;\n}\n\n.message-composer__tools {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n min-height: var(--dimension-size-400);\n}\n\n.message-composer__controls {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--dimension-space-050);\n width: 100%;\n min-width: 0;\n}\n\n.message-composer__actions {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-100);\n flex: 0 0 auto;\n margin-inline-start: auto;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport type { ButtonFilledIntent } from '../ButtonFilled/ButtonFilled';\nimport type { MessageComposerStatus } from '../conversation-types';\n\n@Component({\n tag: 'ds-message-composer',\n styleUrl: 'MessageComposer.css',\n scoped: true,\n})\nexport class MessageComposer {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop() placeholder: string = 'Write a message';\n @Prop() label: string = 'Message';\n @Prop() status: MessageComposerStatus = 'ready';\n @Prop() isInactive: boolean = false;\n @Prop() submitIntent: ButtonFilledIntent = 'brand';\n\n @Event() dsInput!: EventEmitter<string>;\n @Event() dsSubmit!: EventEmitter<{ text: string }>;\n @Event() dsStop!: EventEmitter<void>;\n\n private textarea?: HTMLTextAreaElement;\n\n componentDidLoad() {\n this.resize();\n }\n\n @Watch('value')\n onValueChange() {\n requestAnimationFrame(() => this.resize());\n }\n\n @Method()\n async setFocus() {\n this.textarea?.focus();\n }\n\n private get streaming(): boolean {\n return this.status === 'submitted' || this.status === 'streaming';\n }\n\n private resize() {\n if (!this.textarea) return;\n this.textarea.style.height = 'auto';\n this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n }\n\n private handleInput = (event: Event) => {\n this.value = (event.target as HTMLTextAreaElement).value;\n this.resize();\n this.dsInput.emit(this.value);\n };\n\n private submit() {\n const text = this.value.trim();\n if (!text || this.isInactive || this.streaming) return;\n this.dsSubmit.emit({ text });\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Enter' || event.shiftKey || event.isComposing) return;\n event.preventDefault();\n this.submit();\n };\n\n private handleAction = () => {\n if (this.streaming) this.dsStop.emit();\n else this.submit();\n };\n\n render() {\n const error = this.status === 'error';\n return (\n <Host>\n <form\n class={{ 'message-composer': true, 'message-composer--error': error }}\n aria-busy={this.streaming ? 'true' : undefined}\n onSubmit={(event: Event) => {\n event.preventDefault();\n this.submit();\n }}\n >\n <div class=\"message-composer__attachments\">\n <slot name=\"attachments\" />\n </div>\n <div class=\"message-composer__field\">\n <textarea\n ref={element => {\n this.textarea = element;\n }}\n value={this.value}\n placeholder={this.placeholder}\n aria-label={this.label}\n aria-invalid={error ? 'true' : undefined}\n disabled={this.isInactive}\n rows={2}\n onInput={this.handleInput}\n onKeyDown={this.handleKeyDown}\n />\n <div class=\"message-composer__controls\">\n <div class=\"message-composer__tools\">\n <slot name=\"tools\" />\n </div>\n <div class=\"message-composer__actions\">\n <slot name=\"actions\" />\n <ds-button-filled\n class=\"message-composer__action\"\n variant=\"icon\"\n icon={this.streaming ? 'SquareFilled' : 'ArrowUp'}\n intent={this.streaming ? 'neutral' : this.submitIntent}\n size=\"md\"\n aria-label={this.streaming ? 'Stop response' : 'Send message'}\n isInactive={this.isInactive || (!this.streaming && !this.value.trim())}\n onDsClick={this.handleAction}\n />\n </div>\n </div>\n </div>\n </form>\n </Host>\n );\n }\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["messageComposerCss","MessageComposer","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","placeholder","label","status","isInactive","submitIntent","handleInput","event","target","resize","dsInput","emit","handleKeyDown","key","shiftKey","isComposing","preventDefault","submit","handleAction","streaming","dsStop","componentDidLoad","onValueChange","requestAnimationFrame","setFocus","textarea","focus","style","height","scrollHeight","text","trim","dsSubmit","render","error","h","Host","class","undefined","onSubmit","name","ref","element","disabled","rows","onInput","onKeyDown","variant","icon","intent","size","onDsClick"],"sources":["src/wc/components/MessageComposer/MessageComposer.css?tag=ds-message-composer&encapsulation=scoped","src/wc/components/MessageComposer/MessageComposer.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.message-composer {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n width: 100%;\n margin: 0;\n}\n\n.message-composer__attachments:empty,\n.message-composer__tools:empty {\n display: none;\n}\n\n.message-composer__field {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-100);\n border-radius: var(--dimension-radius-125);\n background: var(--color-background-primary);\n box-shadow: var(--effect-elevation-elevated-md);\n overflow: hidden;\n}\n\n.message-composer:not(.message-composer--error) .message-composer__field:focus-within {\n box-shadow: var(--effect-elevation-elevated-md),\n inset 0 0 0 var(--dimension-stroke-width-018) var(--color-border-bold-brand);\n}\n\n.message-composer--error .message-composer__field {\n box-shadow: var(--effect-elevation-elevated-md),\n inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-negative);\n}\n\ntextarea {\n width: 100%;\n min-height: calc(var(--typography-lineheight-md) * 2 + var(--dimension-space-150));\n max-height: calc(var(--typography-lineheight-md) * 6 + var(--dimension-space-150));\n padding: var(--dimension-space-075);\n border: none;\n outline: none;\n resize: none;\n overflow-y: auto;\n box-sizing: border-box;\n background: transparent;\n color: var(--color-foreground-primary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n -webkit-user-select: text;\n user-select: text;\n}\n\ntextarea::placeholder {\n color: var(--color-foreground-secondary);\n}\n\ntextarea:focus::placeholder {\n color: var(--color-foreground-quaternary);\n}\n\ntextarea:focus,\ntextarea:focus-visible {\n outline: none;\n}\n\n.message-composer__tools {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n min-height: var(--dimension-size-400);\n}\n\n.message-composer__controls {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--dimension-space-050);\n width: 100%;\n min-width: 0;\n}\n\n.message-composer__actions {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-100);\n flex: 0 0 auto;\n margin-inline-start: auto;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport type { ButtonFilledIntent } from '../ButtonFilled/ButtonFilled';\nimport type { MessageComposerStatus } from '../conversation-types';\n\n@Component({\n tag: 'ds-message-composer',\n styleUrl: 'MessageComposer.css',\n scoped: true,\n})\nexport class MessageComposer {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop() placeholder: string = 'Write a message';\n @Prop() label: string = 'Message';\n @Prop() status: MessageComposerStatus = 'ready';\n @Prop() isInactive: boolean = false;\n @Prop() submitIntent: ButtonFilledIntent = 'brand';\n\n @Event() dsInput!: EventEmitter<string>;\n @Event() dsSubmit!: EventEmitter<{ text: string }>;\n @Event() dsStop!: EventEmitter<void>;\n\n private textarea?: HTMLTextAreaElement;\n\n componentDidLoad() {\n this.resize();\n }\n\n @Watch('value')\n onValueChange() {\n requestAnimationFrame(() => this.resize());\n }\n\n @Method()\n async setFocus() {\n this.textarea?.focus();\n }\n\n private get streaming(): boolean {\n return this.status === 'submitted' || this.status === 'streaming';\n }\n\n private resize() {\n if (!this.textarea) return;\n this.textarea.style.height = 'auto';\n this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n }\n\n private handleInput = (event: Event) => {\n this.value = (event.target as HTMLTextAreaElement).value;\n this.resize();\n this.dsInput.emit(this.value);\n };\n\n private submit() {\n const text = this.value.trim();\n if (!text || this.isInactive || this.streaming) return;\n this.dsSubmit.emit({ text });\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Enter' || event.shiftKey || event.isComposing) return;\n event.preventDefault();\n this.submit();\n };\n\n private handleAction = () => {\n if (this.streaming) this.dsStop.emit();\n else this.submit();\n };\n\n render() {\n const error = this.status === 'error';\n return (\n <Host>\n <form\n class={{ 'message-composer': true, 'message-composer--error': error }}\n aria-busy={this.streaming ? 'true' : undefined}\n onSubmit={(event: Event) => {\n event.preventDefault();\n this.submit();\n }}\n >\n <div class=\"message-composer__attachments\">\n <slot name=\"attachments\" />\n </div>\n <div class=\"message-composer__field\">\n <textarea\n ref={element => {\n this.textarea = element;\n }}\n value={this.value}\n placeholder={this.placeholder}\n aria-label={this.label}\n aria-invalid={error ? 'true' : undefined}\n disabled={this.isInactive}\n rows={2}\n onInput={this.handleInput}\n onKeyDown={this.handleKeyDown}\n />\n <div class=\"message-composer__controls\">\n <div class=\"message-composer__tools\">\n <slot name=\"tools\" />\n </div>\n <div class=\"message-composer__actions\">\n <slot name=\"actions\" />\n <ds-button-filled\n class=\"message-composer__action\"\n variant=\"icon\"\n icon={this.streaming ? 'SquareFilled' : 'ArrowUp'}\n intent={this.streaming ? 'neutral' : this.submitIntent}\n size=\"md\"\n aria-label={this.streaming ? 'Stop response' : 'Send message'}\n isInactive={this.isInactive || (!this.streaming && !this.value.trim())}\n onDsClick={this.handleAction}\n />\n </div>\n </div>\n </div>\n </form>\n </Host>\n );\n }\n}\n"],"mappings":"wMAAA,MAAMA,EAAqB,IAAM,u/E,MCmBpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,yIAQ2BC,KAAAC,MAAgB,GACjCD,KAAAE,YAAsB,kBACtBF,KAAAG,MAAgB,UAChBH,KAAAI,OAAgC,QAChCJ,KAAAK,WAAsB,MACtBL,KAAAM,aAAmC,QAgCnCN,KAAAO,YAAeC,IACrBR,KAAKC,MAASO,EAAMC,OAA+BR,MACnDD,KAAKU,SACLV,KAAKW,QAAQC,KAAKZ,KAAKC,MAAM,EASvBD,KAAAa,cAAiBL,IACvB,GAAIA,EAAMM,MAAQ,SAAWN,EAAMO,UAAYP,EAAMQ,YAAa,OAClER,EAAMS,iBACNjB,KAAKkB,QAAQ,EAGPlB,KAAAmB,aAAe,KACrB,GAAInB,KAAKoB,UAAWpB,KAAKqB,OAAOT,YAC3BZ,KAAKkB,QAAQ,CAuDrB,CAnGC,gBAAAI,GACEtB,KAAKU,Q,CAIP,aAAAa,GACEC,uBAAsB,IAAMxB,KAAKU,U,CAInC,cAAMe,GACJzB,KAAK0B,UAAUC,O,CAGjB,aAAYP,GACV,OAAOpB,KAAKI,SAAW,aAAeJ,KAAKI,SAAW,W,CAGhD,MAAAM,GACN,IAAKV,KAAK0B,SAAU,OACpB1B,KAAK0B,SAASE,MAAMC,OAAS,OAC7B7B,KAAK0B,SAASE,MAAMC,OAAS,GAAG7B,KAAK0B,SAASI,gB,CASxC,MAAAZ,GACN,MAAMa,EAAO/B,KAAKC,MAAM+B,OACxB,IAAKD,GAAQ/B,KAAKK,YAAcL,KAAKoB,UAAW,OAChDpB,KAAKiC,SAASrB,KAAK,CAAEmB,Q,CAcvB,MAAAG,GACE,MAAMC,EAAQnC,KAAKI,SAAW,QAC9B,OACEgC,EAACC,EAAI,CAAAvB,IAAA,4CACHsB,EAAA,QAAAtB,IAAA,2CACEwB,MAAO,CAAE,mBAAoB,KAAM,0BAA2BH,GAAO,YAC1DnC,KAAKoB,UAAY,OAASmB,UACrCC,SAAWhC,IACTA,EAAMS,iBACNjB,KAAKkB,QAAQ,GAGfkB,EAAA,OAAAtB,IAAA,2CAAKwB,MAAM,iCACTF,EAAA,QAAAtB,IAAA,2CAAM2B,KAAK,iBAEbL,EAAA,OAAAtB,IAAA,2CAAKwB,MAAM,2BACTF,EAAA,YAAAtB,IAAA,2CACE4B,IAAKC,IACH3C,KAAK0B,SAAWiB,CAAO,EAEzB1C,MAAOD,KAAKC,MACZC,YAAaF,KAAKE,YAAW,aACjBF,KAAKG,MAAK,eACRgC,EAAQ,OAASI,UAC/BK,SAAU5C,KAAKK,WACfwC,KAAM,EACNC,QAAS9C,KAAKO,YACdwC,UAAW/C,KAAKa,gBAElBuB,EAAA,OAAAtB,IAAA,2CAAKwB,MAAM,8BACTF,EAAA,OAAAtB,IAAA,2CAAKwB,MAAM,2BACTF,EAAA,QAAAtB,IAAA,2CAAM2B,KAAK,WAEbL,EAAA,OAAAtB,IAAA,2CAAKwB,MAAM,6BACTF,EAAA,QAAAtB,IAAA,2CAAM2B,KAAK,YACXL,EAAA,oBAAAtB,IAAA,2CACEwB,MAAM,2BACNU,QAAQ,OACRC,KAAMjD,KAAKoB,UAAY,eAAiB,UACxC8B,OAAQlD,KAAKoB,UAAY,UAAYpB,KAAKM,aAC1C6C,KAAK,KAAI,aACGnD,KAAKoB,UAAY,gBAAkB,eAC/Cf,WAAYL,KAAKK,aAAgBL,KAAKoB,YAAcpB,KAAKC,MAAM+B,OAC/DoB,UAAWpD,KAAKmB,mB","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as t,h as r,a,t as l}from"./index.js";import{d as o}from"./p-DrDHC7V6.js";import{d as i}from"./p-DTqCBjUj.js";import{d}from"./p-DuNZGFkV.js";import{d as c}from"./p-Cpr3K41-.js";import{d as n}from"./p-CZZYGqKz.js";const f=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-message-scroller{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient( to bottom, transparent 0, #000 var(--ds-scroll-edge-fade-top), #000 calc(100% - var(--ds-scroll-edge-fade-bottom)), transparent 100% );--ds-scroll-edge-fade-inline-mask:linear-gradient( to right, transparent 0, #000 var(--ds-scroll-edge-fade-left), #000 calc(100% - var(--ds-scroll-edge-fade-right)), transparent 100% );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-message-scroller{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-message-scroller{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom, ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%, 0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-message-scroller{animation:none}}}.scroll-edge-fade--at-end.sc-ds-message-scroller,.scroll-edge-fade--hidden.sc-ds-message-scroller{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-message-scroller{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const g=()=>`.sc-ds-message-scroller-h{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box}.message-scroller.sc-ds-message-scroller{position:relative;width:100%;height:100%;min-height:0}.message-scroller__viewport.sc-ds-message-scroller{width:100%;height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}.message-scroller__viewport.sc-ds-message-scroller:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.message-scroller__content.sc-ds-message-scroller{display:flex;flex-direction:column;gap:var(--dimension-space-300);width:100%;max-width:var(--dimension-panel-width-2xl);min-height:100%;margin-inline:auto;padding-block-start:var(--dimension-space-200);padding-inline:var(--dimension-space-200);padding-block-end:calc( var(--dimension-space-200) + var(--ds-message-scroller-overlay-block-size, 0px) );box-sizing:border-box}.message-scroller__overlay.sc-ds-message-scroller{position:absolute;right:0;bottom:0;left:0;z-index:var(--dimension-z-index-floating)}.message-scroller__control.sc-ds-message-scroller{position:absolute;bottom:calc( var(--ds-message-scroller-overlay-content-block-size, 0px) + var(--dimension-space-200) );left:50%;z-index:var(--dimension-z-index-floating);display:flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-half);background:var(--color-background-transparent);box-shadow:var(--effect-elevation-elevated-md);transform:translateX(-50%);-webkit-backdrop-filter:blur(var(--effect-blur-sm));backdrop-filter:blur(var(--effect-blur-sm))}`;const h=24;const m=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsReachStart=t(this,"dsReachStart");this.busy=false;this.autoFollow=true;this.defaultPosition="last-anchor";this.messagesLabel="Messages";this.showScrollToLatest=false;this.following=true;this.atStart=false;this.programmatic=false;this.previousScrollHeight=0;this.overlayBlockSize=0;this.overlayContentBlockSize=0;this.handleScroll=()=>{if(!this.viewport)return;this.syncContentFade();if(this.programmatic)return;this.following=this.isAtLiveEdge();this.showScrollToLatest=!this.following;const e=this.viewport.scrollTop<=h;if(e&&!this.atStart)this.dsReachStart.emit();this.atStart=e};this.releaseFollow=()=>{this.following=false;this.showScrollToLatest=!this.isAtLiveEdge()};this.handleSelectionChange=()=>{const e=document.getSelection();if(e&&!e.isCollapsed&&e.anchorNode&&this.el.contains(e.anchorNode)){this.following=false;this.showScrollToLatest=!this.isAtLiveEdge()}}}componentDidLoad(){this.connectObservers();requestAnimationFrame((()=>this.applyDefaultPosition()));document.addEventListener("selectionchange",this.handleSelectionChange)}disconnectedCallback(){this.resizeObserver?.disconnect();this.overlayResizeObserver?.disconnect();this.mutationObserver?.disconnect();document.removeEventListener("selectionchange",this.handleSelectionChange)}async scrollToMessage(e){const s=Array.from(this.el.querySelectorAll("ds-message")).find((s=>s.messageId===e||s.getAttribute("message-id")===e));if(!s)return false;this.following=false;this.showScrollToLatest=true;s.scrollIntoView({block:"start",behavior:this.motionBehavior()});return true}async scrollToStart(){this.scrollTo(0);this.following=false;this.showScrollToLatest=Boolean(this.viewport&&this.viewport.scrollHeight>this.viewport.clientHeight)}async scrollToEnd(){this.following=true;this.showScrollToLatest=false;this.scrollTo(this.viewport?.scrollHeight??0)}motionBehavior(){return matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"}scrollTo(e){if(!this.viewport)return;this.programmatic=true;this.viewport.scrollTo({top:e,behavior:this.motionBehavior()});requestAnimationFrame((()=>{this.programmatic=false}))}connectObservers(){if(!this.viewport||!this.content)return;this.previousScrollHeight=this.viewport.scrollHeight;this.resizeObserver=new ResizeObserver((()=>this.handleContentGrowth()));this.resizeObserver.observe(this.content);this.resizeObserver.observe(this.viewport);if(this.overlay){this.overlayResizeObserver=new ResizeObserver((e=>{const s=Math.ceil(e[0]?.contentRect.height??0);this.overlayBlockSize=s;this.el.style.setProperty("--ds-message-scroller-overlay-block-size",`${s}px`);this.syncOverlayContentBlockSize();this.handleContentGrowth()}));this.overlayResizeObserver.observe(this.overlay)}this.mutationObserver=new MutationObserver((()=>this.handleContentGrowth()));this.mutationObserver.observe(this.content,{childList:true,subtree:true,characterData:true})}handleContentGrowth(){if(!this.viewport)return;const e=this.viewport.scrollHeight;const s=e-this.previousScrollHeight;if(s>0&&this.viewport.scrollTop<=h&&!this.following){this.viewport.scrollTop+=s}else if(this.autoFollow&&this.following){this.viewport.scrollTop=e}this.previousScrollHeight=e;this.showScrollToLatest=!this.following&&!this.isAtLiveEdge();this.syncContentFade()}syncContentFade(){if(!this.viewport||!this.content)return;const e=Math.max(this.viewport.scrollTop+this.viewport.clientHeight,0);const s=Math.max(e-this.overlayContentBlockSize,0);this.content.style.setProperty("--ds-scroll-edge-fade-window-start",`${s}px`);this.content.style.setProperty("--ds-scroll-edge-fade-window-end",`${e}px`)}syncOverlayContentBlockSize(){if(!this.overlay)return;const e=this.el.querySelector('[slot="overlay"]');if(!(e instanceof s)){this.overlayContentBlockSize=this.overlayBlockSize}else{const t=e.firstElementChild instanceof s?e.firstElementChild:e;const r=Math.max(Math.ceil(t.getBoundingClientRect().top-this.overlay.getBoundingClientRect().top),0);this.overlayContentBlockSize=Math.max(this.overlayBlockSize-r,0)}this.el.style.setProperty("--ds-message-scroller-overlay-content-block-size",`${this.overlayContentBlockSize}px`)}applyDefaultPosition(){if(!this.viewport)return;if(this.defaultPosition==="start"){this.viewport.scrollTop=0;this.following=false;this.showScrollToLatest=this.viewport.scrollHeight>this.viewport.clientHeight;this.syncContentFade();return}if(this.defaultPosition==="last-anchor"){const e=this.el.querySelectorAll("ds-message[scroll-anchor]");const s=e.item(e.length-1);if(s){s.scrollIntoView({block:"start"});this.following=this.isAtLiveEdge();this.showScrollToLatest=!this.following;this.syncContentFade();return}}this.viewport.scrollTop=this.viewport.scrollHeight;this.following=true;this.showScrollToLatest=false;this.syncContentFade()}isAtLiveEdge(){if(!this.viewport)return true;return this.viewport.scrollHeight-this.viewport.clientHeight-this.viewport.scrollTop<=h}render(){return r(a,{key:"48fdb42698332b03b859d4e3fdb9d13d049636fc"},r("div",{key:"c79be83fbf5d5caa4aec440377570ec9c12afc12",class:"message-scroller"},r("div",{key:"8e5b14af887bd820e09a9535dc12efed59d8012a",class:"message-scroller__viewport",ref:e=>{this.viewport=e},role:"region","aria-label":this.messagesLabel,tabIndex:0,onScroll:this.handleScroll,onPointerDown:this.releaseFollow,onKeyDown:e=>{if(["ArrowUp","PageUp","Home"].includes(e.key))this.releaseFollow()}},r("div",{key:"28222f092ab3c652de0823412c19fa9c57b28feb",class:"message-scroller__content scroll-edge-fade--block-window",ref:e=>{this.content=e},role:"log","aria-live":"polite","aria-relevant":"additions","aria-busy":this.busy?"true":undefined},r("slot",{key:"cc9010ae502ff4f71fdf19e6ccbb9d29d3a7af45"}))),r("div",{key:"eb3fc3aa43af24cc773f29da1c54ab5c0170c0d5",class:"message-scroller__overlay",ref:e=>{this.overlay=e}},r("slot",{key:"0f5d006be06c6a8cab2b68c2d31e56bbec54d449",name:"overlay"})),this.showScrollToLatest?r("div",{class:"message-scroller__control"},r("ds-button-unfilled",{variant:"icon",icon:"ChevronDown",size:"md",rounded:true,hasBorder:false,"aria-label":"Scroll to latest message",onDsClick:()=>void this.scrollToEnd()})):null))}get el(){return this}static get style(){return f()+g()}},[262,"ds-message-scroller",{busy:[4],autoFollow:[4,"auto-follow"],defaultPosition:[1,"default-position"],messagesLabel:[1,"messages-label"],showScrollToLatest:[32],scrollToMessage:[64],scrollToStart:[64],scrollToEnd:[64]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-message-scroller","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];e.forEach((e=>{switch(e){case"ds-message-scroller":if(!customElements.get(l(e))){customElements.define(l(e),m)}break;case"ds-badge":if(!customElements.get(l(e))){o()}break;case"ds-button-unfilled":if(!customElements.get(l(e))){i()}break;case"ds-icon":if(!customElements.get(l(e))){d()}break;case"ds-loader":if(!customElements.get(l(e))){c()}break;case"ds-text":if(!customElements.get(l(e))){n()}break}}))}b();const p=m;const v=b;export{p as DsMessageScroller,v as defineCustomElement};
|
|
1
|
+
import{p as e,H as s,c as t,h as r,a,t as l}from"./index.js";import{d as o}from"./p-DrDHC7V6.js";import{d as i}from"./p-DTqCBjUj.js";import{d}from"./p-DuNZGFkV.js";import{d as c}from"./p-Cpr3K41-.js";import{d as n}from"./p-CZZYGqKz.js";const g=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-message-scroller{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient( to bottom, transparent 0, #000 var(--ds-scroll-edge-fade-top), #000 calc(100% - var(--ds-scroll-edge-fade-bottom)), transparent 100% );--ds-scroll-edge-fade-inline-mask:linear-gradient( to right, transparent 0, #000 var(--ds-scroll-edge-fade-left), #000 calc(100% - var(--ds-scroll-edge-fade-right)), transparent 100% );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-message-scroller{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-message-scroller{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom, ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%, 0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-message-scroller{animation:none}}}.scroll-edge-fade--at-end.sc-ds-message-scroller,.scroll-edge-fade--hidden.sc-ds-message-scroller{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-message-scroller{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const h=()=>`.sc-ds-message-scroller-h{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box}.message-scroller.sc-ds-message-scroller{position:relative;width:100%;height:100%;min-height:0}.message-scroller__viewport.sc-ds-message-scroller{width:100%;height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}.message-scroller__viewport.sc-ds-message-scroller:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.message-scroller__content.sc-ds-message-scroller{display:flex;flex-direction:column;gap:var(--dimension-space-300);width:100%;max-width:var(--dimension-panel-width-2xl);min-height:100%;margin-inline:auto;padding-block-start:var(--dimension-space-200);padding-inline:var(--dimension-space-200);padding-block-end:calc( var(--dimension-space-200) + var(--ds-message-scroller-overlay-block-size, 0px) );box-sizing:border-box}.message-scroller__overlay.sc-ds-message-scroller{position:absolute;right:0;bottom:0;left:0;z-index:var(--dimension-z-index-floating)}.message-scroller__control.sc-ds-message-scroller{position:absolute;bottom:calc( var(--ds-message-scroller-overlay-content-block-size, 0px) + var(--dimension-space-200) );left:50%;z-index:var(--dimension-z-index-floating);display:flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-half);background:var(--color-background-transparent);box-shadow:var(--effect-elevation-elevated-md);transform:translateX(-50%);-webkit-backdrop-filter:blur(var(--effect-blur-sm));backdrop-filter:blur(var(--effect-blur-sm))}`;const f=24;const m=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsReachStart=t(this,"dsReachStart");this.busy=false;this.autoFollow=true;this.defaultPosition="last-anchor";this.messagesLabel="Messages";this.showScrollToLatest=false;this.following=true;this.atStart=false;this.programmatic=false;this.previousScrollHeight=0;this.overlayBlockSize=0;this.overlayContentBlockSize=0;this.handleScroll=()=>{if(!this.viewport)return;this.syncContentFade();if(this.programmatic)return;this.following=this.isAtLiveEdge();this.showScrollToLatest=!this.following;const e=this.viewport.scrollTop<=f;if(e&&!this.atStart)this.dsReachStart.emit();this.atStart=e};this.releaseFollow=()=>{this.following=false;this.showScrollToLatest=!this.isAtLiveEdge()};this.handleSelectionChange=()=>{const e=document.getSelection();if(e&&!e.isCollapsed&&e.anchorNode&&this.el.contains(e.anchorNode)){this.following=false;this.showScrollToLatest=!this.isAtLiveEdge()}}}componentDidLoad(){this.connectObservers();requestAnimationFrame((()=>this.applyDefaultPosition()));document.addEventListener("selectionchange",this.handleSelectionChange)}disconnectedCallback(){this.resizeObserver?.disconnect();this.overlayResizeObserver?.disconnect();this.mutationObserver?.disconnect();document.removeEventListener("selectionchange",this.handleSelectionChange)}async scrollToMessage(e){const s=Array.from(this.el.querySelectorAll("ds-message")).find((s=>s.messageId===e||s.getAttribute("message-id")===e));if(!s)return false;this.following=false;this.showScrollToLatest=true;s.scrollIntoView({block:"start",behavior:this.motionBehavior()});return true}async scrollToStart(){this.scrollTo(0);this.following=false;this.showScrollToLatest=Boolean(this.viewport&&this.viewport.scrollHeight>this.viewport.clientHeight)}async scrollToEnd(){this.following=true;this.showScrollToLatest=false;this.scrollTo(this.viewport?.scrollHeight??0)}motionBehavior(){return matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"}scrollTo(e){if(!this.viewport)return;this.programmatic=true;this.viewport.scrollTo({top:e,behavior:this.motionBehavior()});requestAnimationFrame((()=>{this.programmatic=false}))}connectObservers(){if(!this.viewport||!this.content)return;this.previousScrollHeight=this.viewport.scrollHeight;this.resizeObserver=new ResizeObserver((()=>this.handleContentGrowth()));this.resizeObserver.observe(this.content);this.resizeObserver.observe(this.viewport);if(this.overlay){this.overlayResizeObserver=new ResizeObserver((e=>{const s=Math.ceil(e[0]?.contentRect.height??0);this.overlayBlockSize=s;this.el.style.setProperty("--ds-message-scroller-overlay-block-size",`${s}px`);this.syncOverlayContentBlockSize();this.handleContentGrowth()}));this.overlayResizeObserver.observe(this.overlay)}this.mutationObserver=new MutationObserver((()=>this.handleContentGrowth()));this.mutationObserver.observe(this.content,{childList:true,subtree:true,characterData:true})}handleContentGrowth(){if(!this.viewport)return;const e=this.viewport.scrollHeight;const s=e-this.previousScrollHeight;if(s>0&&this.viewport.scrollTop<=f&&!this.following){this.viewport.scrollTop+=s}else if(this.autoFollow&&this.following){this.viewport.scrollTop=e}this.previousScrollHeight=e;this.showScrollToLatest=!this.following&&!this.isAtLiveEdge();this.syncContentFade()}syncContentFade(){if(!this.viewport||!this.content)return;const e=Math.max(this.viewport.scrollTop+this.viewport.clientHeight,0);const s=Math.max(e-this.overlayContentBlockSize,0);this.content.style.setProperty("--ds-scroll-edge-fade-window-start",`${s}px`);this.content.style.setProperty("--ds-scroll-edge-fade-window-end",`${e}px`)}syncOverlayContentBlockSize(){if(!this.overlay)return;const e=this.el.querySelector('[slot="overlay"]');if(!(e instanceof s)){this.overlayContentBlockSize=this.overlayBlockSize}else{const t=e.firstElementChild instanceof s?e.firstElementChild:e;const r=Math.max(Math.ceil(t.getBoundingClientRect().top-this.overlay.getBoundingClientRect().top),0);this.overlayContentBlockSize=Math.max(this.overlayBlockSize-r,0)}this.el.style.setProperty("--ds-message-scroller-overlay-content-block-size",`${this.overlayContentBlockSize}px`)}applyDefaultPosition(){if(!this.viewport)return;if(this.defaultPosition==="start"){this.viewport.scrollTop=0;this.following=false;this.showScrollToLatest=this.viewport.scrollHeight>this.viewport.clientHeight;this.syncContentFade();return}if(this.defaultPosition==="last-anchor"){const e=this.el.querySelectorAll("ds-message[scroll-anchor]");const s=e.item(e.length-1);if(s){s.scrollIntoView({block:"start"});this.following=this.isAtLiveEdge();this.showScrollToLatest=!this.following;this.syncContentFade();return}}this.viewport.scrollTop=this.viewport.scrollHeight;this.following=true;this.showScrollToLatest=false;this.syncContentFade()}isAtLiveEdge(){if(!this.viewport)return true;return this.viewport.scrollHeight-this.viewport.clientHeight-this.viewport.scrollTop<=f}render(){return r(a,{key:"47d46b10ba6860b644541743a6314fd8416c8d17"},r("div",{key:"beb1e8b0e0f9172eb747bc394b2f7886b254ae90",class:"message-scroller"},r("div",{key:"0cf5166185d3440ce241436d7c97596aca11a4f7",class:"message-scroller__viewport",ref:e=>{this.viewport=e},role:"region","aria-label":this.messagesLabel,tabIndex:0,onScroll:this.handleScroll,onPointerDown:this.releaseFollow,onKeyDown:e=>{if(["ArrowUp","PageUp","Home"].includes(e.key))this.releaseFollow()}},r("div",{key:"751e2b66a051b358b02274b6181714264e0041f5",class:"message-scroller__content scroll-edge-fade--block-window",ref:e=>{this.content=e},role:"log","aria-live":"polite","aria-relevant":"additions","aria-busy":this.busy?"true":undefined},r("slot",{key:"65869cbf6377eeb9abf2264e625cf3a6eb42129f"}))),r("div",{key:"e8a6cb5adf2ee46c22b35387bcd4b26faa986925",class:"message-scroller__overlay",ref:e=>{this.overlay=e}},r("slot",{key:"356033d40fd75824072ccdbd3d1abecc83e25e34",name:"overlay"})),this.showScrollToLatest?r("div",{class:"message-scroller__control"},r("ds-button-unfilled",{variant:"icon",icon:"ChevronDown",size:"md",rounded:true,hasBorder:false,"aria-label":"Scroll to latest message",onDsClick:()=>void this.scrollToEnd()})):null))}get el(){return this}static get style(){return g()+h()}},[262,"ds-message-scroller",{busy:[4],autoFollow:[4,"auto-follow"],defaultPosition:[1,"default-position"],messagesLabel:[1,"messages-label"],showScrollToLatest:[32],scrollToMessage:[64],scrollToStart:[64],scrollToEnd:[64]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-message-scroller","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];e.forEach((e=>{switch(e){case"ds-message-scroller":if(!customElements.get(l(e))){customElements.define(l(e),m)}break;case"ds-badge":if(!customElements.get(l(e))){o()}break;case"ds-button-unfilled":if(!customElements.get(l(e))){i()}break;case"ds-icon":if(!customElements.get(l(e))){d()}break;case"ds-loader":if(!customElements.get(l(e))){c()}break;case"ds-text":if(!customElements.get(l(e))){n()}break}}))}b();const p=m;const v=b;export{p as DsMessageScroller,v as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-message-scroller.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-CyoHRqy6.js";const t=o;const p=s;export{t as DsMessage,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-message.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as o,H as e,c as s,h as a,a as t,t as i}from"./index.js";import{d}from"./p-DrDHC7V6.js";import{d as n}from"./p-DTqCBjUj.js";import{d as r}from"./p-DuNZGFkV.js";import{d as l}from"./p-Cpr3K41-.js";import{d as c}from"./p-CZZYGqKz.js";import{
|
|
1
|
+
import{p as o,H as e,c as s,h as a,a as t,t as i}from"./index.js";import{d}from"./p-DrDHC7V6.js";import{d as n}from"./p-DTqCBjUj.js";import{d as r}from"./p-DuNZGFkV.js";import{d as l}from"./p-Cpr3K41-.js";import{d as c}from"./p-CZZYGqKz.js";import{a as m,T as h}from"./p-CrwU83-g.js";const f=()=>`.sc-ds-modal-h{display:contents}.modal-dialog.sc-ds-modal{display:none;flex-direction:column;max-width:none;max-height:calc(100vh - 2 * var(--dimension-space-200));margin:auto;padding:0;overflow:hidden;color:var(--color-foreground-primary);background-color:var(--color-background-primary);border:0;border-radius:var(--dimension-radius-050);box-shadow:var(--effect-elevation-elevated-floating);outline:none;box-sizing:border-box}.modal-dialog[open].sc-ds-modal{display:flex;animation:modalDialogIn var(--effect-motion-short-2) forwards}.modal-dialog.sc-ds-modal::backdrop{background-color:var(--color-background-shade);animation:modalBackdropIn var(--effect-motion-short-2) forwards}.modal-dialog--closing.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}.modal-dialog--closing.sc-ds-modal::backdrop{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}@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)}}@media (prefers-reduced-motion: reduce){.modal-dialog[open].sc-ds-modal,.modal-dialog--closing.sc-ds-modal{animation:none;transform:none}.modal-dialog.sc-ds-modal::backdrop{animation:none;opacity:1}.modal-dialog--closing.sc-ds-modal,.modal-dialog--closing.sc-ds-modal::backdrop{opacity:0}}.modal-header.sc-ds-modal{display:flex;align-items:center;gap:var(--dimension-space-050);height:var(--dimension-size-800);padding:var(--dimension-space-200);flex:0 0 auto;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);color:var(--color-foreground-primary)}ds-text.modal-heading.sc-ds-modal{flex:1 1 0;width:auto;min-width:0;text-align:left;-webkit-user-select:none;user-select:none}.modal-close.sc-ds-modal{flex:0 0 auto}.modal-content.sc-ds-modal{min-height:0;padding:var(--dimension-space-200);overflow-y:auto;flex:1 1 auto;box-sizing:border-box}.modal-footer.sc-ds-modal{display:flex;align-items:center;justify-content:flex-start;gap:var(--dimension-space-100);height:var(--dimension-size-800);padding:var(--dimension-space-200);flex:0 0 auto;box-sizing:border-box;border-top:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.modal-footer--empty.sc-ds-modal{display:none}.modal-footer.sc-ds-modal slot.sc-ds-modal{display:contents}`;const u={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const b=["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 p=0;const g=o(class o extends e{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsAfterClose=s(this,"dsAfterClose");this.open=false;this.closeAriaLabel="Close";this.modalWidth="md";this.closing=false;this.hasFooter=false;this.titleId=`ds-modal-title-${++p}`;this.dialogEl=null;this.previousFocus=null;this.closeTimer=null}componentDidLoad(){this.updateFooterPresence();if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.clearCloseTimer();if(this.dialogEl?.open)this.dialogEl.close()}onOpenChange(o){if(o){this.clearCloseTimer();const o=!!this.dialogEl?.open;this.closing=false;if(!this.dialogEl||o)return;this.previousFocus=document.activeElement;this.dialogEl.showModal();requestAnimationFrame((()=>{if(this.open&&this.dialogEl?.open)this.focusClose()}))}else if(this.dialogEl?.open){this.closing=true;const o=this.closeAnimationMs;if(o<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),o)}}focusClose(){const o=this.el.querySelector("ds-button-unfilled.modal-close");void o?.setFocus?.()}clearCloseTimer(){if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}requestClose(o,e){if(!this.open||this.closing||!this.dialogEl?.open)return;this.dsClose.emit({reason:o,originalEvent:e});this.open=false}updateFooterPresence(o){const e=o?.assignedNodes({flatten:true})??[];this.hasFooter=e.some((o=>o.nodeType!==Node.TEXT_NODE||!!o.textContent?.trim()))||this.el.querySelector('[slot="footer"]')!==null}handleCancel(o){o.preventDefault();this.requestClose("escape",o)}handleBackdropPointerDown(o){if(o.target===this.dialogEl)this.requestClose("backdrop",o)}handleKeyDown(o){if(o.key!=="Tab"||!this.dialogEl)return;const e=Array.from(this.dialogEl.querySelectorAll(b)).filter((o=>!o.hasAttribute("disabled")&&o.getAttribute("aria-hidden")!=="true"));if(!e.length){o.preventDefault();this.dialogEl.focus();return}const s=e[0];const a=e[e.length-1];const t=document.activeElement;if(o.shiftKey&&(t===s||t===this.dialogEl)){o.preventDefault();a.focus()}else if(!o.shiftKey&&t===a){o.preventDefault();s.focus()}}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return u[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return m(h.motionShort3,h.animationDurationShort3)}finishClose(){if(!this.dialogEl?.open)return;this.dialogEl.close();this.closing=false;this.clearCloseTimer();this.previousFocus?.focus?.();this.previousFocus=null;this.dsAfterClose.emit()}render(){return a(t,{key:"56bc00f2c8d696808659836bcb2da5f8a26ecbc2"},a("dialog",{key:"1a4d78b08c8725b1192e16cee429afa170e7c560",ref:o=>{this.dialogEl=o??null},class:{"modal-dialog":true,"modal-dialog--closing":this.closing},"aria-labelledby":this.titleId,"aria-describedby":this.ariaDescribedby,onCancel:o=>this.handleCancel(o),onPointerDown:o=>this.handleBackdropPointerDown(o),onKeyDown:o=>this.handleKeyDown(o),style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},a("div",{key:"bca5aa346244215c6893315e63c3b257352a3773",class:"modal-header"},a("ds-text",{key:"b2bf256a260b1f5d838e37b0d9c1c786dca15491",class:"modal-heading",as:"h2",variant:"text-title-medium",emphasis:true,color:"primary",lineTruncation:1,textId:this.titleId},this.heading),a("ds-button-unfilled",{key:"01ec46cca5d25210dffd26bf48ff581835d7e5b0",class:"modal-close",variant:"icon",icon:"Cross",size:"md","aria-label":this.closeAriaLabel,activeFill:false,hasBorder:false,onDsClick:o=>this.requestClose("close-button",o.detail)})),a("div",{key:"27dce6c6f20a77699a0de593eab943d55a9eadbb",class:"modal-content"},a("slot",{key:"b3f6417f6ae0fd9983ce62d88cbcf9280c84d89f"})),a("div",{key:"34cb2f604fa1ceb843d14d9c79d31e15161b8070",class:{"modal-footer":true,"modal-footer--empty":!this.hasFooter}},a("slot",{key:"b4c18098eaed19a05de180e11197731955d98ad6",name:"footer",onSlotchange:o=>this.updateFooterPresence(o.currentTarget)}))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return f()}},[262,"ds-modal",{open:[1028],heading:[1],closeAriaLabel:[1,"close-aria-label"],modalWidth:[1,"modal-width"],ariaDescribedby:[1,"aria-describedby"],closing:[32],hasFooter:[32]},undefined,{open:[{onOpenChange:0}]}]);function y(){if(typeof customElements==="undefined"){return}const o=["ds-modal","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];o.forEach((o=>{switch(o){case"ds-modal":if(!customElements.get(i(o))){customElements.define(i(o),g)}break;case"ds-badge":if(!customElements.get(i(o))){d()}break;case"ds-button-unfilled":if(!customElements.get(i(o))){n()}break;case"ds-icon":if(!customElements.get(i(o))){r()}break;case"ds-loader":if(!customElements.get(i(o))){l()}break;case"ds-text":if(!customElements.get(i(o))){c()}break}}))}y();const v=g;const k=y;export{v as DsModal,k as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["modalCss","WIDTH_MAP","sm","md","lg","FOCUSABLE_SEL","join","modalIdCounter","Modal","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","closeAriaLabel","modalWidth","closing","hasFooter","titleId","dialogEl","previousFocus","closeTimer","componentDidLoad","updateFooterPresence","onOpenChange","disconnectedCallback","clearCloseTimer","close","isOpen","alreadyOpen","document","activeElement","showModal","requestAnimationFrame","focusClose","closeAnimationMs","finishClose","setTimeout","el","querySelector","setFocus","clearTimeout","requestClose","reason","originalEvent","dsClose","emit","slot","assignedNodes","flatten","some","node","nodeType","Node","TEXT_NODE","textContent","trim","handleCancel","event","preventDefault","handleBackdropPointerDown","target","handleKeyDown","key","focusables","Array","from","querySelectorAll","filter","element","hasAttribute","getAttribute","length","focus","first","last","active","shiftKey","resolvedWidth","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort3","animationDurationShort3","dsAfterClose","render","h","Host","ref","class","ariaDescribedby","onCancel","onPointerDown","onKeyDown","style","width","as","variant","emphasis","color","lineTruncation","textId","heading","icon","size","activeFill","hasBorder","onDsClick","detail","name","onSlotchange","currentTarget"],"sources":["src/wc/components/Modal/Modal.css?tag=ds-modal&encapsulation=scoped","src/wc/components/Modal/Modal.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n.modal-dialog {\n display: none;\n flex-direction: column;\n max-width: none;\n max-height: calc(100vh - 2 * var(--dimension-space-200));\n margin: auto;\n padding: 0;\n overflow: hidden;\n color: var(--color-foreground-primary);\n background-color: var(--color-background-primary);\n border: 0;\n border-radius: var(--dimension-radius-050);\n box-shadow: var(--effect-elevation-elevated-floating);\n outline: none;\n box-sizing: border-box;\n}\n\n.modal-dialog[open] {\n display: flex;\n animation: modalDialogIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog::backdrop {\n background-color: var(--color-background-shade);\n animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog--closing {\n animation: modalDialogOut var(--effect-motion-short-3) forwards;\n}\n\n.modal-dialog--closing::backdrop {\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@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@media (prefers-reduced-motion: reduce) {\n .modal-dialog[open],\n .modal-dialog--closing {\n animation: none;\n transform: none;\n }\n\n .modal-dialog::backdrop {\n animation: none;\n opacity: 1;\n }\n\n .modal-dialog--closing,\n .modal-dialog--closing::backdrop {\n opacity: 0;\n }\n}\n\n.modal-header {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n height: var(--dimension-size-800);\n padding: var(--dimension-space-200);\n flex: 0 0 auto;\n box-sizing: border-box;\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n color: var(--color-foreground-primary);\n}\n\nds-text.modal-heading {\n flex: 1 1 0;\n width: auto;\n min-width: 0;\n text-align: left;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.modal-close {\n flex: 0 0 auto;\n}\n\n.modal-content {\n min-height: 0;\n padding: var(--dimension-space-200);\n overflow-y: auto;\n flex: 1 1 auto;\n box-sizing: border-box;\n}\n\n.modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: var(--dimension-space-100);\n height: var(--dimension-size-800);\n padding: var(--dimension-space-200);\n flex: 0 0 auto;\n box-sizing: border-box;\n border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.modal-footer--empty {\n display: none;\n}\n\n.modal-footer slot {\n display: contents;\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg';\nexport type ModalCloseReason = 'close-button' | 'escape' | 'backdrop';\n\nexport interface ModalCloseDetail {\n reason: ModalCloseReason;\n originalEvent: Event;\n}\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() closeAriaLabel: string = 'Close';\n @Prop() modalWidth: ModalWidth | string = 'md';\n /** Optional id reference for explanatory content in the default slot. */\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n @State() private closing: boolean = false;\n @State() private hasFooter: boolean = false;\n\n /** Emitted when an internal dismissal control requests that the modal close. */\n @Event() dsClose!: EventEmitter<ModalCloseDetail>;\n /** Emitted after exit motion completes, the top layer closes, and focus is restored. */\n @Event() dsAfterClose!: EventEmitter<void>;\n\n private titleId = `ds-modal-title-${++modalIdCounter}`;\n private dialogEl: HTMLDialogElement | null = null;\n private previousFocus: HTMLElement | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n componentDidLoad() {\n this.updateFooterPresence();\n if (this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.clearCloseTimer();\n if (this.dialogEl?.open) this.dialogEl.close();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (isOpen) {\n this.clearCloseTimer();\n const alreadyOpen = !!this.dialogEl?.open;\n this.closing = false;\n if (!this.dialogEl || alreadyOpen) return;\n this.previousFocus = document.activeElement as HTMLElement | null;\n this.dialogEl.showModal();\n requestAnimationFrame(() => {\n if (this.open && this.dialogEl?.open) this.focusClose();\n });\n } else if (this.dialogEl?.open) {\n this.closing = true;\n const closeAnimationMs = this.closeAnimationMs;\n if (closeAnimationMs <= 0) {\n this.finishClose();\n return;\n }\n this.closeTimer = setTimeout(() => {\n this.closeTimer = null;\n this.finishClose();\n }, closeAnimationMs);\n }\n }\n\n private focusClose() {\n const close = this.el.querySelector('ds-button-unfilled.modal-close') as\n | (HTMLElement & { setFocus?: () => Promise<void> })\n | null;\n void close?.setFocus?.();\n }\n\n private clearCloseTimer() {\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private requestClose(reason: ModalCloseReason, originalEvent: Event) {\n if (!this.open || this.closing || !this.dialogEl?.open) return;\n this.dsClose.emit({ reason, originalEvent });\n this.open = false;\n }\n\n private updateFooterPresence(slot?: HTMLSlotElement) {\n const assignedNodes = slot?.assignedNodes({ flatten: true }) ?? [];\n this.hasFooter =\n assignedNodes.some(node => node.nodeType !== Node.TEXT_NODE || !!node.textContent?.trim()) ||\n this.el.querySelector('[slot=\"footer\"]') !== null;\n }\n\n private handleCancel(event: Event) {\n event.preventDefault();\n this.requestClose('escape', event);\n }\n\n private handleBackdropPointerDown(event: PointerEvent) {\n if (event.target === this.dialogEl) this.requestClose('backdrop', event);\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (event.key !== 'Tab' || !this.dialogEl) return;\n const focusables = Array.from(\n this.dialogEl.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)\n ).filter(element =>\n !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true'\n );\n if (!focusables.length) {\n event.preventDefault();\n this.dialogEl.focus();\n return;\n }\n const first = focusables[0];\n const last = focusables[focusables.length - 1];\n const active = document.activeElement;\n if (event.shiftKey && (active === first || active === this.dialogEl)) {\n event.preventDefault();\n last.focus();\n } else if (!event.shiftKey && active === last) {\n event.preventDefault();\n first.focus();\n }\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 resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private finishClose() {\n if (!this.dialogEl?.open) return;\n this.dialogEl.close();\n this.closing = false;\n this.clearCloseTimer();\n this.previousFocus?.focus?.();\n this.previousFocus = null;\n this.dsAfterClose.emit();\n }\n\n render() {\n return (\n <Host>\n <dialog\n ref={(element?: HTMLDialogElement) => {\n this.dialogEl = element ?? null;\n }}\n class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}\n aria-labelledby={this.titleId}\n aria-describedby={this.ariaDescribedby}\n onCancel={(event: Event) => this.handleCancel(event)}\n onPointerDown={(event: PointerEvent) => this.handleBackdropPointerDown(event)}\n onKeyDown={(event: KeyboardEvent) => this.handleKeyDown(event)}\n style={{\n width: `min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`,\n }}\n >\n <div class=\"modal-header\">\n <ds-text\n class=\"modal-heading\"\n as=\"h2\"\n variant=\"text-title-medium\"\n emphasis\n color=\"primary\"\n lineTruncation={1}\n textId={this.titleId}\n >\n {this.heading}\n </ds-text>\n <ds-button-unfilled\n class=\"modal-close\"\n variant=\"icon\"\n icon=\"Cross\"\n size=\"md\"\n aria-label={this.closeAriaLabel}\n activeFill={false}\n hasBorder={false}\n onDsClick={(event: CustomEvent<MouseEvent>) =>\n this.requestClose('close-button', event.detail)\n }\n />\n </div>\n <div class=\"modal-content\">\n <slot />\n </div>\n <div\n class={{\n 'modal-footer': true,\n 'modal-footer--empty': !this.hasFooter,\n }}\n >\n <slot\n name=\"footer\"\n onSlotchange={(event: Event) =>\n this.updateFooterPresence(event.currentTarget as HTMLSlotElement)\n }\n />\n </div>\n </dialog>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["modalCss","WIDTH_MAP","sm","md","lg","FOCUSABLE_SEL","join","modalIdCounter","Modal","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","closeAriaLabel","modalWidth","closing","hasFooter","titleId","dialogEl","previousFocus","closeTimer","componentDidLoad","updateFooterPresence","onOpenChange","disconnectedCallback","clearCloseTimer","close","isOpen","alreadyOpen","document","activeElement","showModal","requestAnimationFrame","focusClose","closeAnimationMs","finishClose","setTimeout","el","querySelector","setFocus","clearTimeout","requestClose","reason","originalEvent","dsClose","emit","slot","assignedNodes","flatten","some","node","nodeType","Node","TEXT_NODE","textContent","trim","handleCancel","event","preventDefault","handleBackdropPointerDown","target","handleKeyDown","key","focusables","Array","from","querySelectorAll","filter","element","hasAttribute","getAttribute","length","focus","first","last","active","shiftKey","resolvedWidth","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort3","animationDurationShort3","dsAfterClose","render","h","Host","ref","class","ariaDescribedby","onCancel","onPointerDown","onKeyDown","style","width","as","variant","emphasis","color","lineTruncation","textId","heading","icon","size","activeFill","hasBorder","onDsClick","detail","name","onSlotchange","currentTarget"],"sources":["src/wc/components/Modal/Modal.css?tag=ds-modal&encapsulation=scoped","src/wc/components/Modal/Modal.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n.modal-dialog {\n display: none;\n flex-direction: column;\n max-width: none;\n max-height: calc(100vh - 2 * var(--dimension-space-200));\n margin: auto;\n padding: 0;\n overflow: hidden;\n color: var(--color-foreground-primary);\n background-color: var(--color-background-primary);\n border: 0;\n border-radius: var(--dimension-radius-050);\n box-shadow: var(--effect-elevation-elevated-floating);\n outline: none;\n box-sizing: border-box;\n}\n\n.modal-dialog[open] {\n display: flex;\n animation: modalDialogIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog::backdrop {\n background-color: var(--color-background-shade);\n animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog--closing {\n animation: modalDialogOut var(--effect-motion-short-3) forwards;\n}\n\n.modal-dialog--closing::backdrop {\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@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@media (prefers-reduced-motion: reduce) {\n .modal-dialog[open],\n .modal-dialog--closing {\n animation: none;\n transform: none;\n }\n\n .modal-dialog::backdrop {\n animation: none;\n opacity: 1;\n }\n\n .modal-dialog--closing,\n .modal-dialog--closing::backdrop {\n opacity: 0;\n }\n}\n\n.modal-header {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n height: var(--dimension-size-800);\n padding: var(--dimension-space-200);\n flex: 0 0 auto;\n box-sizing: border-box;\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n color: var(--color-foreground-primary);\n}\n\nds-text.modal-heading {\n flex: 1 1 0;\n width: auto;\n min-width: 0;\n text-align: left;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.modal-close {\n flex: 0 0 auto;\n}\n\n.modal-content {\n min-height: 0;\n padding: var(--dimension-space-200);\n overflow-y: auto;\n flex: 1 1 auto;\n box-sizing: border-box;\n}\n\n.modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: var(--dimension-space-100);\n height: var(--dimension-size-800);\n padding: var(--dimension-space-200);\n flex: 0 0 auto;\n box-sizing: border-box;\n border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.modal-footer--empty {\n display: none;\n}\n\n.modal-footer slot {\n display: contents;\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg';\nexport type ModalCloseReason = 'close-button' | 'escape' | 'backdrop';\n\nexport interface ModalCloseDetail {\n reason: ModalCloseReason;\n originalEvent: Event;\n}\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() closeAriaLabel: string = 'Close';\n @Prop() modalWidth: ModalWidth | string = 'md';\n /** Optional id reference for explanatory content in the default slot. */\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n @State() private closing: boolean = false;\n @State() private hasFooter: boolean = false;\n\n /** Emitted when an internal dismissal control requests that the modal close. */\n @Event() dsClose!: EventEmitter<ModalCloseDetail>;\n /** Emitted after exit motion completes, the top layer closes, and focus is restored. */\n @Event() dsAfterClose!: EventEmitter<void>;\n\n private titleId = `ds-modal-title-${++modalIdCounter}`;\n private dialogEl: HTMLDialogElement | null = null;\n private previousFocus: HTMLElement | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n componentDidLoad() {\n this.updateFooterPresence();\n if (this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.clearCloseTimer();\n if (this.dialogEl?.open) this.dialogEl.close();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (isOpen) {\n this.clearCloseTimer();\n const alreadyOpen = !!this.dialogEl?.open;\n this.closing = false;\n if (!this.dialogEl || alreadyOpen) return;\n this.previousFocus = document.activeElement as HTMLElement | null;\n this.dialogEl.showModal();\n requestAnimationFrame(() => {\n if (this.open && this.dialogEl?.open) this.focusClose();\n });\n } else if (this.dialogEl?.open) {\n this.closing = true;\n const closeAnimationMs = this.closeAnimationMs;\n if (closeAnimationMs <= 0) {\n this.finishClose();\n return;\n }\n this.closeTimer = setTimeout(() => {\n this.closeTimer = null;\n this.finishClose();\n }, closeAnimationMs);\n }\n }\n\n private focusClose() {\n const close = this.el.querySelector('ds-button-unfilled.modal-close') as\n | (HTMLElement & { setFocus?: () => Promise<void> })\n | null;\n void close?.setFocus?.();\n }\n\n private clearCloseTimer() {\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private requestClose(reason: ModalCloseReason, originalEvent: Event) {\n if (!this.open || this.closing || !this.dialogEl?.open) return;\n this.dsClose.emit({ reason, originalEvent });\n this.open = false;\n }\n\n private updateFooterPresence(slot?: HTMLSlotElement) {\n const assignedNodes = slot?.assignedNodes({ flatten: true }) ?? [];\n this.hasFooter =\n assignedNodes.some(node => node.nodeType !== Node.TEXT_NODE || !!node.textContent?.trim()) ||\n this.el.querySelector('[slot=\"footer\"]') !== null;\n }\n\n private handleCancel(event: Event) {\n event.preventDefault();\n this.requestClose('escape', event);\n }\n\n private handleBackdropPointerDown(event: PointerEvent) {\n if (event.target === this.dialogEl) this.requestClose('backdrop', event);\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (event.key !== 'Tab' || !this.dialogEl) return;\n const focusables = Array.from(\n this.dialogEl.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)\n ).filter(element =>\n !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true'\n );\n if (!focusables.length) {\n event.preventDefault();\n this.dialogEl.focus();\n return;\n }\n const first = focusables[0];\n const last = focusables[focusables.length - 1];\n const active = document.activeElement;\n if (event.shiftKey && (active === first || active === this.dialogEl)) {\n event.preventDefault();\n last.focus();\n } else if (!event.shiftKey && active === last) {\n event.preventDefault();\n first.focus();\n }\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 resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private finishClose() {\n if (!this.dialogEl?.open) return;\n this.dialogEl.close();\n this.closing = false;\n this.clearCloseTimer();\n this.previousFocus?.focus?.();\n this.previousFocus = null;\n this.dsAfterClose.emit();\n }\n\n render() {\n return (\n <Host>\n <dialog\n ref={(element?: HTMLDialogElement) => {\n this.dialogEl = element ?? null;\n }}\n class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}\n aria-labelledby={this.titleId}\n aria-describedby={this.ariaDescribedby}\n onCancel={(event: Event) => this.handleCancel(event)}\n onPointerDown={(event: PointerEvent) => this.handleBackdropPointerDown(event)}\n onKeyDown={(event: KeyboardEvent) => this.handleKeyDown(event)}\n style={{\n width: `min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`,\n }}\n >\n <div class=\"modal-header\">\n <ds-text\n class=\"modal-heading\"\n as=\"h2\"\n variant=\"text-title-medium\"\n emphasis\n color=\"primary\"\n lineTruncation={1}\n textId={this.titleId}\n >\n {this.heading}\n </ds-text>\n <ds-button-unfilled\n class=\"modal-close\"\n variant=\"icon\"\n icon=\"Cross\"\n size=\"md\"\n aria-label={this.closeAriaLabel}\n activeFill={false}\n hasBorder={false}\n onDsClick={(event: CustomEvent<MouseEvent>) =>\n this.requestClose('close-button', event.detail)\n }\n />\n </div>\n <div class=\"modal-content\">\n <slot />\n </div>\n <div\n class={{\n 'modal-footer': true,\n 'modal-footer--empty': !this.hasFooter,\n }}\n >\n <slot\n name=\"footer\"\n onSlotchange={(event: Event) =>\n this.updateFooterPresence(event.currentTarget as HTMLSlotElement)\n }\n />\n </div>\n </dialog>\n </Host>\n );\n }\n}\n"],"mappings":"4RAAA,MAAMA,EAAW,IAAM,8/ECWvB,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,oHAQ2BC,KAAAC,KAAgB,MAEjCD,KAAAE,eAAyB,QACzBF,KAAAG,WAAkC,KAIzBH,KAAAI,QAAmB,MACnBJ,KAAAK,UAAqB,MAO9BL,KAAAM,QAAU,oBAAoBZ,IAC9BM,KAAAO,SAAqC,KACrCP,KAAAQ,cAAoC,KACpCR,KAAAS,WAAmD,IAqL5D,CAnLC,gBAAAC,GACEV,KAAKW,uBACL,GAAIX,KAAKC,KAAMD,KAAKY,aAAa,K,CAGnC,oBAAAC,GACEb,KAAKc,kBACL,GAAId,KAAKO,UAAUN,KAAMD,KAAKO,SAASQ,O,CAIzC,YAAAH,CAAaI,GACX,GAAIA,EAAQ,CACVhB,KAAKc,kBACL,MAAMG,IAAgBjB,KAAKO,UAAUN,KACrCD,KAAKI,QAAU,MACf,IAAKJ,KAAKO,UAAYU,EAAa,OACnCjB,KAAKQ,cAAgBU,SAASC,cAC9BnB,KAAKO,SAASa,YACdC,uBAAsB,KACpB,GAAIrB,KAAKC,MAAQD,KAAKO,UAAUN,KAAMD,KAAKsB,YAAY,G,MAEpD,GAAItB,KAAKO,UAAUN,KAAM,CAC9BD,KAAKI,QAAU,KACf,MAAMmB,EAAmBvB,KAAKuB,iBAC9B,GAAIA,GAAoB,EAAG,CACzBvB,KAAKwB,cACL,M,CAEFxB,KAAKS,WAAagB,YAAW,KAC3BzB,KAAKS,WAAa,KAClBT,KAAKwB,aAAa,GACjBD,E,EAIC,UAAAD,GACN,MAAMP,EAAQf,KAAK0B,GAAGC,cAAc,uCAG/BZ,GAAOa,Y,CAGN,eAAAd,GACN,GAAId,KAAKS,WAAY,CACnBoB,aAAa7B,KAAKS,YAClBT,KAAKS,WAAa,I,EAId,YAAAqB,CAAaC,EAA0BC,GAC7C,IAAKhC,KAAKC,MAAQD,KAAKI,UAAYJ,KAAKO,UAAUN,KAAM,OACxDD,KAAKiC,QAAQC,KAAK,CAAEH,SAAQC,kBAC5BhC,KAAKC,KAAO,K,CAGN,oBAAAU,CAAqBwB,GAC3B,MAAMC,EAAgBD,GAAMC,cAAc,CAAEC,QAAS,QAAW,GAChErC,KAAKK,UACH+B,EAAcE,MAAKC,GAAQA,EAAKC,WAAaC,KAAKC,aAAeH,EAAKI,aAAaC,UACnF5C,KAAK0B,GAAGC,cAAc,qBAAuB,I,CAGzC,YAAAkB,CAAaC,GACnBA,EAAMC,iBACN/C,KAAK8B,aAAa,SAAUgB,E,CAGtB,yBAAAE,CAA0BF,GAChC,GAAIA,EAAMG,SAAWjD,KAAKO,SAAUP,KAAK8B,aAAa,WAAYgB,E,CAG5D,aAAAI,CAAcJ,GACpB,GAAIA,EAAMK,MAAQ,QAAUnD,KAAKO,SAAU,OAC3C,MAAM6C,EAAaC,MAAMC,KACvBtD,KAAKO,SAASgD,iBAA8B/D,IAC5CgE,QAAOC,IACNA,EAAQC,aAAa,aAAeD,EAAQE,aAAa,iBAAmB,SAE/E,IAAKP,EAAWQ,OAAQ,CACtBd,EAAMC,iBACN/C,KAAKO,SAASsD,QACd,M,CAEF,MAAMC,EAAQV,EAAW,GACzB,MAAMW,EAAOX,EAAWA,EAAWQ,OAAS,GAC5C,MAAMI,EAAS9C,SAASC,cACxB,GAAI2B,EAAMmB,WAAaD,IAAWF,GAASE,IAAWhE,KAAKO,UAAW,CACpEuC,EAAMC,iBACNgB,EAAKF,O,MACA,IAAKf,EAAMmB,UAAYD,IAAWD,EAAM,CAC7CjB,EAAMC,iBACNe,EAAMD,O,EAIV,iBAAYK,GACV,GAAIlE,KAAKG,aAAe,MAAQH,KAAKG,aAAe,MAAQH,KAAKG,aAAe,KAAM,CACpF,OAAOf,EAAUY,KAAKG,W,CAExB,OAAOH,KAAKG,U,CAGd,oBAAYoB,GACV,OAAO4C,EAAoBC,EAAeC,aAAcD,EAAeE,wB,CAGjE,WAAA9C,GACN,IAAKxB,KAAKO,UAAUN,KAAM,OAC1BD,KAAKO,SAASQ,QACdf,KAAKI,QAAU,MACfJ,KAAKc,kBACLd,KAAKQ,eAAeqD,UACpB7D,KAAKQ,cAAgB,KACrBR,KAAKuE,aAAarC,M,CAGpB,MAAAsC,GACE,OACEC,EAACC,EAAI,CAAAvB,IAAA,4CACHsB,EAAA,UAAAtB,IAAA,2CACEwB,IAAMlB,IACJzD,KAAKO,SAAWkD,GAAW,IAAI,EAEjCmB,MAAO,CAAE,eAAgB,KAAM,wBAAyB5E,KAAKI,SAAS,kBACrDJ,KAAKM,QAAO,mBACXN,KAAK6E,gBACvBC,SAAWhC,GAAiB9C,KAAK6C,aAAaC,GAC9CiC,cAAgBjC,GAAwB9C,KAAKgD,0BAA0BF,GACvEkC,UAAYlC,GAAyB9C,KAAKkD,cAAcJ,GACxDmC,MAAO,CACLC,MAAO,OAAOlF,KAAKkE,iEAGrBO,EAAA,OAAAtB,IAAA,2CAAKyB,MAAM,gBACTH,EAAA,WAAAtB,IAAA,2CACEyB,MAAM,gBACNO,GAAG,KACHC,QAAQ,oBACRC,SAAQ,KACRC,MAAM,UACNC,eAAgB,EAChBC,OAAQxF,KAAKM,SAEZN,KAAKyF,SAERhB,EAAA,sBAAAtB,IAAA,2CACEyB,MAAM,cACNQ,QAAQ,OACRM,KAAK,QACLC,KAAK,KAAI,aACG3F,KAAKE,eACjB0F,WAAY,MACZC,UAAW,MACXC,UAAYhD,GACV9C,KAAK8B,aAAa,eAAgBgB,EAAMiD,WAI9CtB,EAAA,OAAAtB,IAAA,2CAAKyB,MAAM,iBACTH,EAAA,QAAAtB,IAAA,8CAEFsB,EAAA,OAAAtB,IAAA,2CACEyB,MAAO,CACL,eAAgB,KAChB,uBAAwB5E,KAAKK,YAG/BoE,EAAA,QAAAtB,IAAA,2CACE6C,KAAK,SACLC,aAAenD,GACb9C,KAAKW,qBAAqBmC,EAAMoD,mB","ignoreList":[]}
|