@ds-mo/ui 11.1.0 → 12.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/.build-stamp +1 -1
- package/dist/agent-patterns.json +150 -9
- package/dist/agent.json +481 -174
- package/dist/angular/ds-bar-title.d.ts +28 -0
- package/dist/angular/ds-bar-title.js +48 -0
- package/dist/angular/ds-panel-nav.d.ts +1 -1
- package/dist/angular/{ds-app-shell.d.ts → ds-shell-app.d.ts} +5 -5
- package/dist/angular/{ds-app-shell.js → ds-shell-app.js} +10 -10
- package/dist/angular/ds-shell-page.d.ts +12 -0
- package/dist/angular/ds-shell-page.js +38 -0
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +3 -1
- package/dist/angular/proxies.d.ts +3 -1
- package/dist/angular/proxies.js +3 -1
- package/dist/components/ds-agent-activity.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-response.js.map +1 -1
- package/dist/components/ds-agent-source-list.js +1 -1
- package/dist/components/ds-agent-tool-call.js +1 -1
- package/dist/components/ds-attachment-list.js +1 -1
- package/dist/components/ds-avatar.js +1 -1
- package/dist/components/ds-avatar.js.map +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-nav.js.map +1 -1
- package/dist/components/{ds-app-shell.d.ts → ds-bar-title.d.ts} +4 -4
- package/dist/components/ds-bar-title.js +2 -0
- package/dist/components/ds-bar-title.js.map +1 -0
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card-shell-data-viz.js +1 -1
- package/dist/components/ds-chart-bar.js +1 -1
- package/dist/components/ds-chart-donut.js +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-line.js +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-item.js.map +1 -1
- package/dist/components/ds-conversation-list-section.js +1 -1
- package/dist/components/ds-conversation-list.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-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-scroller.js.map +1 -1
- package/dist/components/ds-message.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-modal.js.map +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js.map +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-tool-search.js.map +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-panel-tools.js.map +1 -1
- package/dist/components/ds-radio.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-app.d.ts +11 -0
- package/dist/components/ds-shell-app.js +2 -0
- package/dist/components/ds-shell-app.js.map +1 -0
- 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-shell-page.d.ts +11 -0
- package/dist/components/ds-shell-page.js +2 -0
- package/dist/components/ds-shell-page.js.map +1 -0
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-swatch-picker.js +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/ds-typing-indicator.js +1 -1
- package/dist/components/{p-DJ78wdNv.js → p-6vj4kh70.js} +2 -2
- package/dist/components/{p-bNpFhP5L.js → p-B3YvoGjS.js} +2 -2
- package/dist/components/{p-BEWtqFX7.js → p-BH3es4p7.js} +2 -2
- package/dist/components/{p-BaZRP4Oo.js → p-BUmDHPr3.js} +2 -2
- package/dist/components/p-BYHKdFzV.js +2 -0
- package/dist/components/p-BYHKdFzV.js.map +1 -0
- package/dist/components/p-BZZwQfmN.js +2 -0
- package/dist/components/{p-B_qVPsEU.js.map → p-BZZwQfmN.js.map} +1 -1
- package/dist/components/{p-Dh4q5TSS.js → p-BhKhX1er.js} +2 -2
- package/dist/components/{p-CZZYGqKz.js → p-Bs6SS34m.js} +2 -2
- package/dist/components/p-CUik7PCi.js +2 -0
- package/dist/components/p-CUik7PCi.js.map +1 -0
- package/dist/components/{p-CyoHRqy6.js → p-Cf-i-6aE.js} +2 -2
- package/dist/components/p-Cf2J9MEo.js +2 -0
- package/dist/components/{p-Bet_UjML.js.map → p-Cf2J9MEo.js.map} +1 -1
- package/dist/components/{p-P_4vE1ub.js → p-CwTVEAl2.js} +2 -2
- package/dist/components/p-Cy04lXlc.js +2 -0
- package/dist/components/p-Cy04lXlc.js.map +1 -0
- package/dist/components/{p-BKhG2xrW.js → p-D2x17ei-.js} +1 -1
- package/dist/components/{p-BKhG2xrW.js.map → p-D2x17ei-.js.map} +1 -1
- package/dist/components/{p-CjP8sYlo.js → p-DABj3qTX.js} +2 -2
- package/dist/components/{p-DTqCBjUj.js → p-DUHcJWTQ.js} +2 -2
- package/dist/components/{p-CPPAndX2.js → p-DVk0wxxX.js} +2 -2
- package/dist/components/p-DfIch2Dk.js +2 -0
- package/dist/components/{p-BCCt2eT_.js.map → p-DfIch2Dk.js.map} +1 -1
- package/dist/components/{p-CrwU83-g.js → p-Dg3xLna0.js} +2 -2
- package/dist/components/{p-DrDHC7V6.js → p-DxeHimqk.js} +2 -2
- package/dist/components/{p-DrDHC7V6.js.map → p-DxeHimqk.js.map} +1 -1
- package/dist/components/{p-CLn7QnE0.js → p-Dy_sZ-dI.js} +2 -2
- package/dist/components/{p-0kEg-Z4f.js → p-liMPkhUP.js} +2 -2
- package/dist/components/p-xFbUt9Tc.js +2 -0
- package/dist/components/p-xFbUt9Tc.js.map +1 -0
- package/dist/docs/components.json +1082 -336
- package/dist/lib/shell/chrome-transition.d.ts +1 -1
- package/dist/lib/shell/index.js +1 -1
- package/dist/lib/shell/index.js.map +1 -1
- package/dist/lib/shell/shell-gradient.d.ts +2 -2
- package/dist/mcp-data/registry/avatar.json +1 -1
- package/dist/mcp-data/registry/badge.json +4 -4
- package/dist/mcp-data/registry/bar-nav.json +8 -8
- package/dist/mcp-data/registry/bar-title.json +431 -0
- package/dist/mcp-data/registry/code-block.json +4 -3
- package/dist/mcp-data/registry/menu.json +1 -1
- package/dist/mcp-data/registry/message-composer.json +7 -5
- package/dist/mcp-data/registry/message-scroller.json +4 -3
- package/dist/mcp-data/registry/modal.json +5 -4
- package/dist/mcp-data/registry/panel-nav.json +8 -8
- package/dist/mcp-data/registry/panel-sub-nav.json +1 -1
- package/dist/mcp-data/registry/panel-tool-header.json +4 -3
- package/dist/mcp-data/registry/panel-tool-search.json +6 -5
- package/dist/mcp-data/registry/panel-tools.json +13 -13
- package/dist/mcp-data/registry/registry.json +489 -176
- package/dist/mcp-data/registry/select-multi.json +2 -1
- package/dist/mcp-data/registry/select.json +2 -1
- package/dist/mcp-data/registry/shell-app.json +213 -0
- package/dist/mcp-data/registry/shell-gradient-picker.json +8 -8
- package/dist/mcp-data/registry/shell-gradient-swatch.json +2 -2
- package/dist/mcp-data/registry/shell-page.json +199 -0
- package/dist/mcp-data/registry/swatch-picker.json +1 -1
- package/dist/react/components.d.ts +3 -1
- package/dist/react/components.js +3 -1
- package/dist/react/ds-bar-title.d.ts +14 -0
- package/dist/react/ds-bar-title.js +16 -0
- package/dist/react/{ds-app-shell.d.ts → ds-shell-app.d.ts} +3 -3
- package/dist/react/ds-shell-app.js +12 -0
- package/dist/react/ds-shell-page.d.ts +9 -0
- package/dist/react/ds-shell-page.js +12 -0
- package/dist/types/components/Badge/Badge.d.ts +1 -1
- package/dist/types/components/BarTitle/BarTitle.d.ts +71 -0
- package/dist/types/components/BarTitle/bar-title-types.d.ts +29 -0
- package/dist/types/components/BarTitle/index.d.ts +2 -0
- package/dist/types/components/Menu/Menu.d.ts +5 -0
- package/dist/types/components/PanelNav/PanelNav.d.ts +1 -1
- package/dist/types/components/{AppShell/AppShell.d.ts → ShellApp/ShellApp.d.ts} +3 -3
- package/dist/types/components/ShellPage/ShellPage.d.ts +37 -0
- package/dist/types/components/ShellPage/index.d.ts +3 -0
- package/dist/types/components/ShellPage/shell-page-responsive.d.ts +12 -0
- package/dist/types/components/ShellPage/shell-page-types.d.ts +5 -0
- package/dist/types/components.d.ts +267 -55
- package/dist/types/shell/chrome-transition.d.ts +1 -1
- package/dist/types/shell/shell-gradient.d.ts +2 -2
- package/dist/types/shell/shell-shortcuts.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/ds-app-shell.js +0 -2
- package/dist/components/ds-app-shell.js.map +0 -1
- package/dist/components/p-BCCt2eT_.js +0 -2
- package/dist/components/p-B_qVPsEU.js +0 -2
- package/dist/components/p-Bet_UjML.js +0 -2
- package/dist/components/p-BsnezUUC.js +0 -2
- package/dist/components/p-BsnezUUC.js.map +0 -1
- package/dist/components/p-C1K5QGUZ.js +0 -2
- package/dist/components/p-C1K5QGUZ.js.map +0 -1
- package/dist/components/p-CKaJx0IX.js +0 -2
- package/dist/components/p-CKaJx0IX.js.map +0 -1
- package/dist/components/p-ZTugT4as.js +0 -2
- package/dist/components/p-ZTugT4as.js.map +0 -1
- package/dist/mcp-data/registry/app-shell.json +0 -210
- package/dist/react/ds-app-shell.js +0 -12
- /package/dist/components/{p-DJ78wdNv.js.map → p-6vj4kh70.js.map} +0 -0
- /package/dist/components/{p-bNpFhP5L.js.map → p-B3YvoGjS.js.map} +0 -0
- /package/dist/components/{p-BEWtqFX7.js.map → p-BH3es4p7.js.map} +0 -0
- /package/dist/components/{p-BaZRP4Oo.js.map → p-BUmDHPr3.js.map} +0 -0
- /package/dist/components/{p-Dh4q5TSS.js.map → p-BhKhX1er.js.map} +0 -0
- /package/dist/components/{p-CZZYGqKz.js.map → p-Bs6SS34m.js.map} +0 -0
- /package/dist/components/{p-CyoHRqy6.js.map → p-Cf-i-6aE.js.map} +0 -0
- /package/dist/components/{p-P_4vE1ub.js.map → p-CwTVEAl2.js.map} +0 -0
- /package/dist/components/{p-CjP8sYlo.js.map → p-DABj3qTX.js.map} +0 -0
- /package/dist/components/{p-DTqCBjUj.js.map → p-DUHcJWTQ.js.map} +0 -0
- /package/dist/components/{p-CPPAndX2.js.map → p-DVk0wxxX.js.map} +0 -0
- /package/dist/components/{p-CrwU83-g.js.map → p-Dg3xLna0.js.map} +0 -0
- /package/dist/components/{p-CLn7QnE0.js.map → p-Dy_sZ-dI.js.map} +0 -0
- /package/dist/components/{p-0kEg-Z4f.js.map → p-liMPkhUP.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as n,c as e,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as a}from"./p-CZZYGqKz.js";import{d as c}from"./p-bNpFhP5L.js";import{T as h}from"./p-CrwU83-g.js";import{r as u}from"./p-BWUTr_XN.js";import{f as l}from"./p-BBpASejH.js";import{w as f,c as d,a as p}from"./p-CrCGIx8s.js";function y(t,n,e){t.textContent=n;if(e<=0||t.getComputedTextLength()<=e)return n;let i=0;let s=n.length;while(i<s){const r=Math.ceil((i+s)/2);t.textContent=`${n.slice(0,r)}…`;if(t.getComputedTextLength()<=e){i=r}else{s=r-1}}return i>0?`${n.slice(0,i)}…`:"…"}const v=Math.abs;const g=Math.atan2;const m=Math.cos;const b=Math.max;const x=Math.min;const M=Math.sin;const w=Math.sqrt;const _=1e-12;const z=Math.PI;const k=z/2;const $=2*z;function C(t){return t>1?0:t<-1?z:Math.acos(t)}function j(t){return t>=1?k:t<=-1?-k:Math.asin(t)}function S(t){return t.innerRadius}function A(t){return t.outerRadius}function P(t){return t.startAngle}function F(t){return t.endAngle}function T(t){return t&&t.padAngle}function E(t,n,e,i,s,r,o,a){var c=e-t,h=i-n,u=o-s,l=a-r,f=l*c-u*h;if(f*f<_)return;f=(u*(n-r)-l*(t-s))/f;return[t+f*c,n+f*h]}function L(t,n,e,i,s,r,o){var a=t-e,c=n-i,h=(o?r:-r)/w(a*a+c*c),u=h*c,l=-h*a,f=t+u,d=n+l,p=e+u,y=i+l,v=(f+p)/2,g=(d+y)/2,m=p-f,x=y-d,M=m*m+x*x,_=s-r,z=f*y-p*d,k=(x<0?-1:1)*w(b(0,_*_*M-z*z)),$=(z*x-m*k)/M,C=(-z*m-x*k)/M,j=(z*x+m*k)/M,S=(-z*m+x*k)/M,A=$-v,P=C-g,F=j-v,T=S-g;if(A*A+P*P>F*F+T*T)$=j,C=S;return{cx:$,cy:C,x01:-u,y01:-l,x11:$*(s/_-1),y11:C*(s/_-1)}}function N(){var t=S,n=A,e=d(0),i=null,s=P,r=F,o=T,a=null,c=f(h);function h(){var h,u,l=+t.apply(this,arguments),f=+n.apply(this,arguments),d=s.apply(this,arguments)-k,p=r.apply(this,arguments)-k,y=v(p-d),b=p>d;if(!a)a=h=c();if(f<l)u=f,f=l,l=u;if(!(f>_))a.moveTo(0,0);else if(y>$-_){a.moveTo(f*m(d),f*M(d));a.arc(0,0,f,d,p,!b);if(l>_){a.moveTo(l*m(p),l*M(p));a.arc(0,0,l,p,d,b)}}else{var S=d,A=p,P=d,F=p,T=y,N=y,R=o.apply(this,arguments)/2,B=R>_&&(i?+i.apply(this,arguments):w(l*l+f*f)),D=x(v(f-l)/2,+e.apply(this,arguments)),H=D,O=D,G,U;if(B>_){var V=j(B/l*M(R)),X=j(B/f*M(R));if((T-=V*2)>_)V*=b?1:-1,P+=V,F-=V;else T=0,P=F=(d+p)/2;if((N-=X*2)>_)X*=b?1:-1,S+=X,A-=X;else N=0,S=A=(d+p)/2}var Y=f*m(S),Z=f*M(S),q=l*m(F),I=l*M(F);if(D>_){var K=f*m(A),W=f*M(A),J=l*m(P),Q=l*M(P),tt;if(y<z){if(tt=E(Y,Z,J,Q,K,W,q,I)){var nt=Y-tt[0],et=Z-tt[1],it=K-tt[0],st=W-tt[1],rt=1/M(C((nt*it+et*st)/(w(nt*nt+et*et)*w(it*it+st*st)))/2),ot=w(tt[0]*tt[0]+tt[1]*tt[1]);H=x(D,(l-ot)/(rt-1));O=x(D,(f-ot)/(rt+1))}else{H=O=0}}}if(!(N>_))a.moveTo(Y,Z);else if(O>_){G=L(J,Q,Y,Z,f,O,b);U=L(K,W,q,I,f,O,b);a.moveTo(G.cx+G.x01,G.cy+G.y01);if(O<D)a.arc(G.cx,G.cy,O,g(G.y01,G.x01),g(U.y01,U.x01),!b);else{a.arc(G.cx,G.cy,O,g(G.y01,G.x01),g(G.y11,G.x11),!b);a.arc(0,0,f,g(G.cy+G.y11,G.cx+G.x11),g(U.cy+U.y11,U.cx+U.x11),!b);a.arc(U.cx,U.cy,O,g(U.y11,U.x11),g(U.y01,U.x01),!b)}}else a.moveTo(Y,Z),a.arc(0,0,f,S,A,!b);if(!(l>_)||!(T>_))a.lineTo(q,I);else if(H>_){G=L(q,I,K,W,l,-H,b);U=L(Y,Z,J,Q,l,-H,b);a.lineTo(G.cx+G.x01,G.cy+G.y01);if(H<D)a.arc(G.cx,G.cy,H,g(G.y01,G.x01),g(U.y01,U.x01),!b);else{a.arc(G.cx,G.cy,H,g(G.y01,G.x01),g(G.y11,G.x11),!b);a.arc(0,0,l,g(G.cy+G.y11,G.cx+G.x11),g(U.cy+U.y11,U.cx+U.x11),b);a.arc(U.cx,U.cy,H,g(U.y11,U.x11),g(U.y01,U.x01),!b)}}else a.arc(0,0,l,F,P,b)}a.closePath();if(h)return a=null,h+""||null}h.centroid=function(){var e=(+t.apply(this,arguments)+ +n.apply(this,arguments))/2,i=(+s.apply(this,arguments)+ +r.apply(this,arguments))/2-z/2;return[m(i)*e,M(i)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:d(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:d(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:d(+t),h):e};h.padRadius=function(t){return arguments.length?(i=t==null?null:typeof t==="function"?t:d(+t),h):i};h.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:d(+t),h):s};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:d(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:d(+t),h):o};h.context=function(t){return arguments.length?(a=t==null?null:t,h):a};return h}function R(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function B(t){return t}function D(){var t=B,n=R,e=null,i=d(0),s=d($),r=d(0);function o(o){var a,c=(o=p(o)).length,h,u,l=0,f=new Array(c),d=new Array(c),y=+i.apply(this,arguments),v=Math.min($,Math.max(-$,s.apply(this,arguments)-y)),g,m=Math.min(Math.abs(v)/c,r.apply(this,arguments)),b=m*(v<0?-1:1),x;for(a=0;a<c;++a){if((x=d[f[a]=a]=+t(o[a],a,o))>0){l+=x}}if(n!=null)f.sort((function(t,e){return n(d[t],d[e])}));else if(e!=null)f.sort((function(t,n){return e(o[t],o[n])}));for(a=0,u=l?(v-c*b)/l:0;a<c;++a,y=g){h=f[a],x=d[h],g=y+(x>0?x*u:0)+b,d[h]={data:o[h],index:a,value:x,startAngle:y,endAngle:g,padAngle:m}}return d}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:d(+n),o):t};o.sortValues=function(t){return arguments.length?(n=t,e=null,o):n};o.sort=function(t){return arguments.length?(e=t,n=null,o):e};o.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:d(+t),o):i};o.endAngle=function(t){return arguments.length?(s=typeof t==="function"?t:d(+t),o):s};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:d(+t),o):r};return o}const H=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:var(--typography-font-family);user-select:none}.chart-donut--fill.sc-ds-chart-donut-h{display:block;width:100%;height:100%;min-width:0;min-height:0}.chart-donut__wrapper.sc-ds-chart-donut{position:relative;overflow:visible}.chart-donut--fill.sc-ds-chart-donut-h .chart-donut__wrapper.sc-ds-chart-donut{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:default;transition:opacity var(--effect-motion-short-2)}@media (prefers-reduced-motion: reduce){.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{transition:none}}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{outline:none;stroke:var(--color-interaction-focus);stroke-width:2}.chart-donut__center-value.sc-ds-chart-donut{fill:var(--color-foreground-primary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default;pointer-events:none}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default;pointer-events:none}`;const O=.25;const G=0;const U=.82;const V=128;const X=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=e(this,"dsSliceHover");this.noDataLabel="No data";this.data=[];this.thickness=h.size200;this.cornerRadius=h.radius025;this.gap=1;this.showTooltip=true;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText="";this.measuredSize=V;this.tooltipX=0;this.tooltipY=0;this.resizeObserver=null}get isFillMode(){return this.size==null||!Number.isFinite(this.size)||this.size<=0}get fillMinPx(){return u(h.donutFillMin,V)}get fillMaxPx(){return u(h.donutFillMax,192)}clampFillSize(t){const n=this.fillMinPx;const e=this.fillMaxPx;if(!(t>0))return n;return Math.round(Math.min(e,Math.max(n,t)))}get resolvedSize(){if(!this.isFillMode)return this.size;return this.clampFillSize(this.measuredSize)}componentDidLoad(){this.syncResizeObserver()}onSizePropChange(){this.syncResizeObserver()}disconnectedCallback(){this.teardownResizeObserver()}syncResizeObserver(){this.teardownResizeObserver();if(!this.isFillMode)return;const t=this.el;if(!t||typeof ResizeObserver==="undefined")return;this.resizeObserver=new ResizeObserver((t=>{const n=t[0];if(!n)return;this.applyAvailableSize(n.contentRect.width,n.contentRect.height)}));this.resizeObserver.observe(t);this.measureHost()}measureHost(){const t=this.el.getBoundingClientRect();this.applyAvailableSize(t.width,t.height)}applyAvailableSize(t,n){const e=Math.floor(Math.min(t,n));if(e>0&&e!==this.measuredSize){this.measuredSize=e}}teardownResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=null}handleHover(t){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t)}get tooltipDatum(){if(!this.showTooltip||this.hoveredLabel==null)return null;return this.data.find((t=>t.label===this.hoveredLabel))??null}updateTooltipFromPointer(t){if(!this.showTooltip)return;const n=this.el.querySelector(".chart-donut__wrapper");if(!n)return;const e=n.getBoundingClientRect();this.tooltipX=t.clientX-e.left;this.tooltipY=t.clientY-e.top}updateTooltipFromSvgPoint(t,n,e,i){if(!this.showTooltip)return;const s=this.el.querySelector(".chart-donut__wrapper");const r=t.ownerSVGElement;if(!s||!r)return;const o=s.getBoundingClientRect();const a=r.getBoundingClientRect();this.tooltipX=a.left-o.left+n*(a.width/i);this.tooltipY=a.top-o.top+e*(a.height/i)}componentDidRender(){if(this.isFillMode&&!this.resizeObserver){this.syncResizeObserver()}const t=this.resolvedSize;const n=t/2;const e=u(this.thickness,h.size200);const i=n-e;const s=i*2*U;const r=this.data.reduce(((t,n)=>t+n.value),0);const o=this.centerValue??l(r,this.locale);if(this.valueTextEl){const t=y(this.valueTextEl,o,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const a=this.centerCaption??"";if(this.captionTextEl&&a){const t=y(this.captionTextEl,a,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.resolvedSize;const n=t/2;const e=u(this.thickness,h.size200);const r=u(this.cornerRadius,h.radius025);const a=n-e;const c=this.data.reduce(((t,n)=>t+n.value),0);const f=c<=0;const d=this.activeLabel??this.hoveredLabel;const p=N().innerRadius(a).outerRadius(n).cornerRadius(r).padAngle(this.gap*Math.PI/180);const y=f?[]:D().value((t=>t.value)).sort(null)(this.data);const v=f?N().innerRadius(a).outerRadius(n)({startAngle:0,endAngle:Math.PI*2}):null;const g=u(h.lineheightXl,32);const m=u(h.lineheightMd,20);const b=this.centerCaption?n-(G+m)/2:n;const x=n+(g+G)/2;const M=this.centerValue??l(c,this.locale);const w=this.centerCaption??"";const _=this.isFillMode;return i(s,{key:"cff0315e85454f27e6650371cccb252588f8c6f3",class:{"chart-donut":true,"chart-donut--fill":_,"chart-donut--fixed":!_},style:!_?{width:`${t}px`,height:`${t}px`}:undefined},i("div",{key:"ab8990a77defba2d6f31cdd0409670cf757c71a6",class:"chart-donut__wrapper",style:!_?{width:`${t}px`,height:`${t}px`}:undefined},i("svg",{key:"8f8a749d46b9ede5fd2a8bfc2d90a8ccbfe2501e",class:"chart-donut__svg",viewBox:`0 0 ${t} ${t}`,width:t,height:t,role:f?"img":undefined,"aria-label":f?this.noDataLabel:undefined},i("g",{key:"75c64f1b20788231b93e4c9490c8ab65b24be2cc",transform:`translate(${n}, ${n})`},f?i("path",{d:v??undefined,fill:"var(--color-background-faint-neutral)","aria-hidden":"true"}):y.map(((e,s)=>{const r=this.data[s];const a=d!=null&&r.label!==d;const[c,h]=p.centroid(e);return i("path",{key:r.label,d:p(e)??undefined,fill:r.color??o(s),opacity:a?O:1,tabindex:0,role:"img","aria-label":`${r.label}: ${r.value}`,onMouseEnter:t=>{this.updateTooltipFromPointer(t);this.handleHover(r)},onMouseMove:t=>this.updateTooltipFromPointer(t),onMouseLeave:()=>this.handleHover(null),onFocus:e=>{this.updateTooltipFromSvgPoint(e.currentTarget,n+c,n+h,t);this.handleHover(r)},onBlur:()=>this.handleHover(null)})}))),i("text",{key:"df12d524eda4a4c01bc51afb4f35a439cac554cf",class:"chart-donut__center-value",x:n,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||M),w&&i("text",{key:"9899f1b87be6c610ead054d49d4c7e074ce0d429",class:"chart-donut__center-caption",x:n,y:x,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||w)),this.tooltipDatum&&i("ds-tooltip-data-viz",{key:"7740102f5a292eb2a2f5b8ae586390f5518c350f",label:this.tooltipDatum.label,value:l(this.tooltipDatum.value,this.locale),x:this.tooltipX,y:this.tooltipY})))}get el(){return this}static get watchers(){return{size:[{onSizePropChange:0}]}}static get style(){return H()}},[2,"ds-chart-donut",{locale:[1],noDataLabel:[1,"no-data-label"],data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],showTooltip:[4,"show-tooltip"],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],displayedValueText:[32],displayedCaptionText:[32],measuredSize:[32],tooltipX:[32],tooltipY:[32]},undefined,{size:[{onSizePropChange:0}]}]);function Y(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut","ds-text","ds-tooltip-data-viz"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(r(t))){customElements.define(r(t),X)}break;case"ds-text":if(!customElements.get(r(t))){a()}break;case"ds-tooltip-data-viz":if(!customElements.get(r(t))){c()}break}}))}Y();const Z=X;const q=Y;export{Z as DsChartDonut,q as defineCustomElement};
|
|
1
|
+
import{p as t,H as n,c as e,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as a}from"./p-Bs6SS34m.js";import{d as c}from"./p-B3YvoGjS.js";import{T as h}from"./p-Dg3xLna0.js";import{r as u}from"./p-BWUTr_XN.js";import{f as l}from"./p-BBpASejH.js";import{w as f,c as d,a as p}from"./p-CrCGIx8s.js";function y(t,n,e){t.textContent=n;if(e<=0||t.getComputedTextLength()<=e)return n;let i=0;let s=n.length;while(i<s){const r=Math.ceil((i+s)/2);t.textContent=`${n.slice(0,r)}…`;if(t.getComputedTextLength()<=e){i=r}else{s=r-1}}return i>0?`${n.slice(0,i)}…`:"…"}const v=Math.abs;const g=Math.atan2;const m=Math.cos;const b=Math.max;const x=Math.min;const M=Math.sin;const w=Math.sqrt;const _=1e-12;const z=Math.PI;const k=z/2;const S=2*z;function $(t){return t>1?0:t<-1?z:Math.acos(t)}function j(t){return t>=1?k:t<=-1?-k:Math.asin(t)}function A(t){return t.innerRadius}function C(t){return t.outerRadius}function B(t){return t.startAngle}function P(t){return t.endAngle}function T(t){return t&&t.padAngle}function E(t,n,e,i,s,r,o,a){var c=e-t,h=i-n,u=o-s,l=a-r,f=l*c-u*h;if(f*f<_)return;f=(u*(n-r)-l*(t-s))/f;return[t+f*c,n+f*h]}function F(t,n,e,i,s,r,o){var a=t-e,c=n-i,h=(o?r:-r)/w(a*a+c*c),u=h*c,l=-h*a,f=t+u,d=n+l,p=e+u,y=i+l,v=(f+p)/2,g=(d+y)/2,m=p-f,x=y-d,M=m*m+x*x,_=s-r,z=f*y-p*d,k=(x<0?-1:1)*w(b(0,_*_*M-z*z)),S=(z*x-m*k)/M,$=(-z*m-x*k)/M,j=(z*x+m*k)/M,A=(-z*m+x*k)/M,C=S-v,B=$-g,P=j-v,T=A-g;if(C*C+B*B>P*P+T*T)S=j,$=A;return{cx:S,cy:$,x01:-u,y01:-l,x11:S*(s/_-1),y11:$*(s/_-1)}}function L(){var t=A,n=C,e=d(0),i=null,s=B,r=P,o=T,a=null,c=f(h);function h(){var h,u,l=+t.apply(this,arguments),f=+n.apply(this,arguments),d=s.apply(this,arguments)-k,p=r.apply(this,arguments)-k,y=v(p-d),b=p>d;if(!a)a=h=c();if(f<l)u=f,f=l,l=u;if(!(f>_))a.moveTo(0,0);else if(y>S-_){a.moveTo(f*m(d),f*M(d));a.arc(0,0,f,d,p,!b);if(l>_){a.moveTo(l*m(p),l*M(p));a.arc(0,0,l,p,d,b)}}else{var A=d,C=p,B=d,P=p,T=y,L=y,R=o.apply(this,arguments)/2,D=R>_&&(i?+i.apply(this,arguments):w(l*l+f*f)),N=x(v(f-l)/2,+e.apply(this,arguments)),H=N,O=N,G,V;if(D>_){var X=j(D/l*M(R)),Y=j(D/f*M(R));if((T-=X*2)>_)X*=b?1:-1,B+=X,P-=X;else T=0,B=P=(d+p)/2;if((L-=Y*2)>_)Y*=b?1:-1,A+=Y,C-=Y;else L=0,A=C=(d+p)/2}var I=f*m(A),U=f*M(A),W=l*m(P),q=l*M(P);if(N>_){var J=f*m(C),K=f*M(C),Q=l*m(B),Z=l*M(B),tt;if(y<z){if(tt=E(I,U,Q,Z,J,K,W,q)){var nt=I-tt[0],et=U-tt[1],it=J-tt[0],st=K-tt[1],rt=1/M($((nt*it+et*st)/(w(nt*nt+et*et)*w(it*it+st*st)))/2),ot=w(tt[0]*tt[0]+tt[1]*tt[1]);H=x(N,(l-ot)/(rt-1));O=x(N,(f-ot)/(rt+1))}else{H=O=0}}}if(!(L>_))a.moveTo(I,U);else if(O>_){G=F(Q,Z,I,U,f,O,b);V=F(J,K,W,q,f,O,b);a.moveTo(G.cx+G.x01,G.cy+G.y01);if(O<N)a.arc(G.cx,G.cy,O,g(G.y01,G.x01),g(V.y01,V.x01),!b);else{a.arc(G.cx,G.cy,O,g(G.y01,G.x01),g(G.y11,G.x11),!b);a.arc(0,0,f,g(G.cy+G.y11,G.cx+G.x11),g(V.cy+V.y11,V.cx+V.x11),!b);a.arc(V.cx,V.cy,O,g(V.y11,V.x11),g(V.y01,V.x01),!b)}}else a.moveTo(I,U),a.arc(0,0,f,A,C,!b);if(!(l>_)||!(T>_))a.lineTo(W,q);else if(H>_){G=F(W,q,J,K,l,-H,b);V=F(I,U,Q,Z,l,-H,b);a.lineTo(G.cx+G.x01,G.cy+G.y01);if(H<N)a.arc(G.cx,G.cy,H,g(G.y01,G.x01),g(V.y01,V.x01),!b);else{a.arc(G.cx,G.cy,H,g(G.y01,G.x01),g(G.y11,G.x11),!b);a.arc(0,0,l,g(G.cy+G.y11,G.cx+G.x11),g(V.cy+V.y11,V.cx+V.x11),b);a.arc(V.cx,V.cy,H,g(V.y11,V.x11),g(V.y01,V.x01),!b)}}else a.arc(0,0,l,P,B,b)}a.closePath();if(h)return a=null,h+""||null}h.centroid=function(){var e=(+t.apply(this,arguments)+ +n.apply(this,arguments))/2,i=(+s.apply(this,arguments)+ +r.apply(this,arguments))/2-z/2;return[m(i)*e,M(i)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:d(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:d(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:d(+t),h):e};h.padRadius=function(t){return arguments.length?(i=t==null?null:typeof t==="function"?t:d(+t),h):i};h.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:d(+t),h):s};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:d(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:d(+t),h):o};h.context=function(t){return arguments.length?(a=t==null?null:t,h):a};return h}function R(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function D(t){return t}function N(){var t=D,n=R,e=null,i=d(0),s=d(S),r=d(0);function o(o){var a,c=(o=p(o)).length,h,u,l=0,f=new Array(c),d=new Array(c),y=+i.apply(this,arguments),v=Math.min(S,Math.max(-S,s.apply(this,arguments)-y)),g,m=Math.min(Math.abs(v)/c,r.apply(this,arguments)),b=m*(v<0?-1:1),x;for(a=0;a<c;++a){if((x=d[f[a]=a]=+t(o[a],a,o))>0){l+=x}}if(n!=null)f.sort((function(t,e){return n(d[t],d[e])}));else if(e!=null)f.sort((function(t,n){return e(o[t],o[n])}));for(a=0,u=l?(v-c*b)/l:0;a<c;++a,y=g){h=f[a],x=d[h],g=y+(x>0?x*u:0)+b,d[h]={data:o[h],index:a,value:x,startAngle:y,endAngle:g,padAngle:m}}return d}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:d(+n),o):t};o.sortValues=function(t){return arguments.length?(n=t,e=null,o):n};o.sort=function(t){return arguments.length?(e=t,n=null,o):e};o.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:d(+t),o):i};o.endAngle=function(t){return arguments.length?(s=typeof t==="function"?t:d(+t),o):s};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:d(+t),o):r};return o}const H=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:var(--typography-font-family);user-select:none}.chart-donut--fill.sc-ds-chart-donut-h{display:block;width:100%;height:100%;min-width:0;min-height:0}.chart-donut__wrapper.sc-ds-chart-donut{position:relative;overflow:visible}.chart-donut--fill.sc-ds-chart-donut-h .chart-donut__wrapper.sc-ds-chart-donut{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:default;transition:opacity var(--effect-motion-short-2)}@media (prefers-reduced-motion: reduce){.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{transition:none}}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{outline:none;stroke:var(--color-interaction-focus);stroke-width:2}.chart-donut__center-value.sc-ds-chart-donut{fill:var(--color-foreground-primary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default;pointer-events:none}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default;pointer-events:none}`;const O=.25;const G=0;const V=.82;const X=128;const Y=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=e(this,"dsSliceHover");this.noDataLabel="No data";this.data=[];this.thickness=h.size200;this.cornerRadius=h.radius025;this.gap=1;this.showTooltip=true;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText="";this.measuredSize=X;this.tooltipX=0;this.tooltipY=0;this.resizeObserver=null}get isFillMode(){return this.size==null||!Number.isFinite(this.size)||this.size<=0}get fillMinPx(){return u(h.donutFillMin,X)}get fillMaxPx(){return u(h.donutFillMax,192)}clampFillSize(t){const n=this.fillMinPx;const e=this.fillMaxPx;if(!(t>0))return n;return Math.round(Math.min(e,Math.max(n,t)))}get resolvedSize(){if(!this.isFillMode)return this.size;return this.clampFillSize(this.measuredSize)}componentDidLoad(){this.syncResizeObserver()}onSizePropChange(){this.syncResizeObserver()}disconnectedCallback(){this.teardownResizeObserver()}syncResizeObserver(){this.teardownResizeObserver();if(!this.isFillMode)return;const t=this.el;if(!t||typeof ResizeObserver==="undefined")return;this.resizeObserver=new ResizeObserver((t=>{const n=t[0];if(!n)return;this.applyAvailableSize(n.contentRect.width,n.contentRect.height)}));this.resizeObserver.observe(t);this.measureHost()}measureHost(){const t=this.el.getBoundingClientRect();this.applyAvailableSize(t.width,t.height)}applyAvailableSize(t,n){const e=Math.floor(Math.min(t,n));if(e>0&&e!==this.measuredSize){this.measuredSize=e}}teardownResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=null}handleHover(t){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t)}get tooltipDatum(){if(!this.showTooltip||this.hoveredLabel==null)return null;return this.data.find((t=>t.label===this.hoveredLabel))??null}updateTooltipFromPointer(t){if(!this.showTooltip)return;const n=this.el.querySelector(".chart-donut__wrapper");if(!n)return;const e=n.getBoundingClientRect();this.tooltipX=t.clientX-e.left;this.tooltipY=t.clientY-e.top}updateTooltipFromSvgPoint(t,n,e,i){if(!this.showTooltip)return;const s=this.el.querySelector(".chart-donut__wrapper");const r=t.ownerSVGElement;if(!s||!r)return;const o=s.getBoundingClientRect();const a=r.getBoundingClientRect();this.tooltipX=a.left-o.left+n*(a.width/i);this.tooltipY=a.top-o.top+e*(a.height/i)}componentDidRender(){if(this.isFillMode&&!this.resizeObserver){this.syncResizeObserver()}const t=this.resolvedSize;const n=t/2;const e=u(this.thickness,h.size200);const i=n-e;const s=i*2*V;const r=this.data.reduce(((t,n)=>t+n.value),0);const o=this.centerValue??l(r,this.locale);if(this.valueTextEl){const t=y(this.valueTextEl,o,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const a=this.centerCaption??"";if(this.captionTextEl&&a){const t=y(this.captionTextEl,a,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.resolvedSize;const n=t/2;const e=u(this.thickness,h.size200);const r=u(this.cornerRadius,h.radius025);const a=n-e;const c=this.data.reduce(((t,n)=>t+n.value),0);const f=c<=0;const d=this.activeLabel??this.hoveredLabel;const p=L().innerRadius(a).outerRadius(n).cornerRadius(r).padAngle(this.gap*Math.PI/180);const y=f?[]:N().value((t=>t.value)).sort(null)(this.data);const v=f?L().innerRadius(a).outerRadius(n)({startAngle:0,endAngle:Math.PI*2}):null;const g=u(h.lineheightXl,32);const m=u(h.lineheightMd,20);const b=this.centerCaption?n-(G+m)/2:n;const x=n+(g+G)/2;const M=this.centerValue??l(c,this.locale);const w=this.centerCaption??"";const _=this.isFillMode;return i(s,{key:"2209e8a91cf5c44df55105b596f8bac979a3b73c",class:{"chart-donut":true,"chart-donut--fill":_,"chart-donut--fixed":!_},style:!_?{width:`${t}px`,height:`${t}px`}:undefined},i("div",{key:"64a8c163f92b6fabf62d610939dc48709e83a540",class:"chart-donut__wrapper",style:!_?{width:`${t}px`,height:`${t}px`}:undefined},i("svg",{key:"b2cc70aa609ae4f5ccb0374ee95bfa33baaff373",class:"chart-donut__svg",viewBox:`0 0 ${t} ${t}`,width:t,height:t,role:f?"img":undefined,"aria-label":f?this.noDataLabel:undefined},i("g",{key:"1429ad98582a41e896030d53ae0ae55d020c3131",transform:`translate(${n}, ${n})`},f?i("path",{d:v??undefined,fill:"var(--color-background-faint-neutral)","aria-hidden":"true"}):y.map(((e,s)=>{const r=this.data[s];const a=d!=null&&r.label!==d;const[c,h]=p.centroid(e);return i("path",{key:r.label,d:p(e)??undefined,fill:r.color??o(s),opacity:a?O:1,tabindex:0,role:"img","aria-label":`${r.label}: ${r.value}`,onMouseEnter:t=>{this.updateTooltipFromPointer(t);this.handleHover(r)},onMouseMove:t=>this.updateTooltipFromPointer(t),onMouseLeave:()=>this.handleHover(null),onFocus:e=>{this.updateTooltipFromSvgPoint(e.currentTarget,n+c,n+h,t);this.handleHover(r)},onBlur:()=>this.handleHover(null)})}))),i("text",{key:"6a5358046afcf2d231ce81333fcca4805fe438f0",class:"chart-donut__center-value",x:n,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||M),w&&i("text",{key:"3a7c96eb4ab6b6b5b6ce62cb1d8b267562fcd031",class:"chart-donut__center-caption",x:n,y:x,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||w)),this.tooltipDatum&&i("ds-tooltip-data-viz",{key:"106a94982ab337932de990477e9144acc402f416",label:this.tooltipDatum.label,value:l(this.tooltipDatum.value,this.locale),x:this.tooltipX,y:this.tooltipY})))}get el(){return this}static get watchers(){return{size:[{onSizePropChange:0}]}}static get style(){return H()}},[2,"ds-chart-donut",{locale:[1],noDataLabel:[1,"no-data-label"],data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],showTooltip:[4,"show-tooltip"],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],displayedValueText:[32],displayedCaptionText:[32],measuredSize:[32],tooltipX:[32],tooltipY:[32]},undefined,{size:[{onSizePropChange:0}]}]);function I(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut","ds-text","ds-tooltip-data-viz"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(r(t))){customElements.define(r(t),Y)}break;case"ds-text":if(!customElements.get(r(t))){a()}break;case"ds-tooltip-data-viz":if(!customElements.get(r(t))){c()}break}}))}I();const U=Y;const W=I;export{U as DsChartDonut,W as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chart-donut.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as n,c as t,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as c}from"./p-CZZYGqKz.js";import{f as a}from"./p-BBpASejH.js";function d(e,n=1,t){const i=n===2?2:1;const s=Number.isFinite(e)?e:0;return new Intl.NumberFormat(t,{style:"percent",minimumFractionDigits:i,maximumFractionDigits:i}).format(s)}const l=()=>`.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend,.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend,.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before,.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before{z-index:1}.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chart-legend-h,.ds-interaction-fill--bordered.sc-ds-chart-legend{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chart-legend-h,.ds-interaction-fill--selected.sc-ds-chart-legend{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chart-legend-h>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill.sc-ds-chart-legend>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill__content.sc-ds-chart-legend{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-chart-legend-h,.ds-interaction-fill--on-faint.sc-ds-chart-legend{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chart-legend-h,.ds-interaction-fill--on-medium.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chart-legend-h,.ds-interaction-fill--on-bold.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chart-legend-h,.ds-interaction-fill--on-strong.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-chart-legend-h,.ds-interaction-fill--on-translucent.sc-ds-chart-legend{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chart-legend-h,.ds-interaction-fill--on-inverted.sc-ds-chart-legend{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chart-legend-h,.ds-interaction-fill--on-media.sc-ds-chart-legend{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chart-legend-h,.ds-interaction-fill--on-always-dark.sc-ds-chart-legend{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chart-legend-h,.ds-interaction-fill--on-navigation.sc-ds-chart-legend{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-chart-legend-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring.sc-ds-chart-legend:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-chart-legend-h{display:block;font-family:var(--typography-font-family);user-select:none}.chart-legend__list.sc-ds-chart-legend{margin:0;padding:0;list-style:none}.chart-legend__list-item.sc-ds-chart-legend{display:contents}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:grid;grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600);column-gap:var(--dimension-space-075);row-gap:var(--dimension-space-050)}.chart-legend--vertical.chart-legend--show-percentage.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex;gap:var(--dimension-space-100)}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}@media (prefers-reduced-motion: reduce){.chart-legend__item.sc-ds-chart-legend{transition:none}}.chart-legend__item--interactive.sc-ds-chart-legend{cursor:pointer}.chart-legend__item.sc-ds-chart-legend>*.sc-ds-chart-legend{position:relative;z-index:2}.chart-legend__swatch-box.sc-ds-chart-legend{width:var(--dimension-size-250);height:var(--dimension-size-250);display:flex;align-items:center;justify-content:center;flex-shrink:0}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0}.chart-legend__label.sc-ds-chart-legend{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chart-legend__percentage.sc-ds-chart-legend{width:100%;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right}.chart-legend__value.sc-ds-chart-legend{width:100%;text-align:right;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}`;const h=.25;const g=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=t(this,"dsItemHover");this.dsItemClick=t(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;this.percentageDecimals=1;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,n)=>{this.dsItemClick.emit({item:e,originalEvent:n})}}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,n)=>e+(n.value??0)),0);const n=this.activeLabel??this.hoveredLabel;return i(s,{key:"897605d8bbabfc669cabab7434b88c4f1cb039ad",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true,"chart-legend--show-percentage":this.showPercentage}},i("ul",{key:"1b4c657d6d7fb192f97c3ed34ce6889fef7ff700",class:"chart-legend__list",onMouseLeave:()=>this.handleHover(null)},this.items.map(((t,s)=>{const r=n!=null&&t.label!==n;const c=t.href?"a":"div";const l=t.value!=null?d(e?t.value/e:0,this.percentageDecimals,this.locale):"";return i("li",{class:"chart-legend__list-item",key:t.label},i(c,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!t.href,"ds-control--md":true,"ds-interaction-fill":true,"ds-focus-ring-inset":!!t.href},style:{opacity:r?String(h):"1"},href:t.href,onClick:t.href?e=>this.handleClick(t,e):undefined,onMouseEnter:()=>this.handleHover(t),onFocus:()=>this.handleHover(t),onBlur:()=>this.handleHover(null)},i("span",{class:"chart-legend__swatch-box"},i("span",{class:"chart-legend__swatch",style:{backgroundColor:t.color??o(s)}})),i("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:t.label},t.label),t.value!=null&&i("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:String(t.value)},a(t.value,this.locale)),t.value!=null&&this.showPercentage&&i("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:l},l)))}))))}static get style(){return l()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],percentageDecimals:[2,"percentage-decimals"],activeLabel:[1,"active-label"],hoveredLabel:[32]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(r(e))){customElements.define(r(e),g)}break;case"ds-text":if(!customElements.get(r(e))){c()}break}}))}v();const f=g;const u=v;export{f as DsChartLegend,u as defineCustomElement};
|
|
1
|
+
import{p as e,H as n,c as t,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as c}from"./p-Bs6SS34m.js";import{f as a}from"./p-BBpASejH.js";function d(e,n=1,t){const i=n===2?2:1;const s=Number.isFinite(e)?e:0;return new Intl.NumberFormat(t,{style:"percent",minimumFractionDigits:i,maximumFractionDigits:i}).format(s)}const l=()=>`.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend,.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend,.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before,.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before{z-index:1}.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chart-legend-h,.ds-interaction-fill--bordered.sc-ds-chart-legend{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chart-legend-h,.ds-interaction-fill--selected.sc-ds-chart-legend{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chart-legend-h>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill.sc-ds-chart-legend>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill__content.sc-ds-chart-legend{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-chart-legend-h,.ds-interaction-fill--on-faint.sc-ds-chart-legend{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chart-legend-h,.ds-interaction-fill--on-medium.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chart-legend-h,.ds-interaction-fill--on-bold.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chart-legend-h,.ds-interaction-fill--on-strong.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-chart-legend-h,.ds-interaction-fill--on-translucent.sc-ds-chart-legend{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chart-legend-h,.ds-interaction-fill--on-inverted.sc-ds-chart-legend{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chart-legend-h,.ds-interaction-fill--on-media.sc-ds-chart-legend{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chart-legend-h,.ds-interaction-fill--on-always-dark.sc-ds-chart-legend{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chart-legend-h,.ds-interaction-fill--on-navigation.sc-ds-chart-legend{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-chart-legend-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring.sc-ds-chart-legend:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-chart-legend-h{display:block;font-family:var(--typography-font-family);user-select:none}.chart-legend__list.sc-ds-chart-legend{margin:0;padding:0;list-style:none}.chart-legend__list-item.sc-ds-chart-legend{display:contents}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:grid;grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600);column-gap:var(--dimension-space-075);row-gap:var(--dimension-space-050)}.chart-legend--vertical.chart-legend--show-percentage.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex;gap:var(--dimension-space-100)}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}@media (prefers-reduced-motion: reduce){.chart-legend__item.sc-ds-chart-legend{transition:none}}.chart-legend__item--interactive.sc-ds-chart-legend{cursor:pointer}.chart-legend__item.sc-ds-chart-legend>*.sc-ds-chart-legend{position:relative;z-index:2}.chart-legend__swatch-box.sc-ds-chart-legend{width:var(--dimension-size-250);height:var(--dimension-size-250);display:flex;align-items:center;justify-content:center;flex-shrink:0}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0}.chart-legend__label.sc-ds-chart-legend{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chart-legend__percentage.sc-ds-chart-legend{width:100%;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right}.chart-legend__value.sc-ds-chart-legend{width:100%;text-align:right;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}`;const h=.25;const g=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=t(this,"dsItemHover");this.dsItemClick=t(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;this.percentageDecimals=1;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,n)=>{this.dsItemClick.emit({item:e,originalEvent:n})}}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,n)=>e+(n.value??0)),0);const n=this.activeLabel??this.hoveredLabel;return i(s,{key:"897605d8bbabfc669cabab7434b88c4f1cb039ad",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true,"chart-legend--show-percentage":this.showPercentage}},i("ul",{key:"1b4c657d6d7fb192f97c3ed34ce6889fef7ff700",class:"chart-legend__list",onMouseLeave:()=>this.handleHover(null)},this.items.map(((t,s)=>{const r=n!=null&&t.label!==n;const c=t.href?"a":"div";const l=t.value!=null?d(e?t.value/e:0,this.percentageDecimals,this.locale):"";return i("li",{class:"chart-legend__list-item",key:t.label},i(c,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!t.href,"ds-control--md":true,"ds-interaction-fill":true,"ds-focus-ring-inset":!!t.href},style:{opacity:r?String(h):"1"},href:t.href,onClick:t.href?e=>this.handleClick(t,e):undefined,onMouseEnter:()=>this.handleHover(t),onFocus:()=>this.handleHover(t),onBlur:()=>this.handleHover(null)},i("span",{class:"chart-legend__swatch-box"},i("span",{class:"chart-legend__swatch",style:{backgroundColor:t.color??o(s)}})),i("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:t.label},t.label),t.value!=null&&i("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:String(t.value)},a(t.value,this.locale)),t.value!=null&&this.showPercentage&&i("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:l},l)))}))))}static get style(){return l()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],percentageDecimals:[2,"percentage-decimals"],activeLabel:[1,"active-label"],hoveredLabel:[32]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(r(e))){customElements.define(r(e),g)}break;case"ds-text":if(!customElements.get(r(e))){c()}break}}))}v();const f=g;const u=v;export{f as DsChartLegend,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chart-legend.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as n,h as i,a as
|
|
1
|
+
import{p as t,H as n,h as i,a as s,t as e}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),s=null,e=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(s==null)r=e(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?(e=t,s!=null&&(r=e(s)),o):e};o.context=function(t){return arguments.length?(t==null?s=r=null:r=e(s=t),o):s};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 _={top:16,right:16,bottom:24,left:32};const x=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-_.left-_.right;const n=this.height-_.top-_.bottom;const e=this.series.flatMap((t=>t.data));const l=a(e)??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(s,{key:"775797f3d818c96d06bc2696d04b3c5a0980fde2",class:"chart-line"},i("svg",{key:"a7240088e9a5f50a096e5de011bd8374978126c2",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:"d6206fac1b79f2a36b9719a39b8787d4d888dc21",transform:`translate(${_.left}, ${_.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,s)=>i("text",{key:`x-${t}`,class:"chart-line__axis-label",x:h(s)??0,y:n+16,"text-anchor":"middle"},t))),this.series.map(((t,n)=>{const s=t.color??r(n);return i("g",{key:t.name},i("path",{class:"chart-line__path",d:u(t.data)??undefined,stroke:s}),this.showPoints&&t.data.map(((n,e)=>i("circle",{key:`${t.name}-${e}`,class:"chart-line__point",cx:h(e)??0,cy:f(n),r:3,fill:s}))))})))))}static get style(){return g()}},[2,"ds-chart-line",{series:[16],categories:[16],width:[2],height:[2],showPoints:[4,"show-points"]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-chart-line"];t.forEach((t=>{switch(t){case"ds-chart-line":if(!customElements.get(e(t))){customElements.define(e(t),x)}break}}))}b();const k=x;const v=b;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-DABj3qTX.js";const t=o;const p=s;export{t as DsCheckbox,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-checkbox.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as i,H as o,c as s,h as n,a as r,t as c}from"./index.js";import{d as e}from"./p-DuNZGFkV.js";import{d as t}from"./p-CZZYGqKz.js";import{C as d}from"./p-Cx-ywr1e.js";const a=()=>`.ds-control--md.sc-ds-chip-h,.ds-control--md.sc-ds-chip,.ds-control--sm.sc-ds-chip-h,.ds-control--sm.sc-ds-chip,.ds-control--xs.sc-ds-chip-h,.ds-control--xs.sc-ds-chip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-chip-h,.ds-control--md.sc-ds-chip{--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-chip-h,.ds-control--sm.sc-ds-chip{--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-chip-h,.ds-control--xs.sc-ds-chip{--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-interaction-fill.sc-ds-chip-h,.ds-interaction-fill.sc-ds-chip{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-chip-h::before,.ds-interaction-fill.sc-ds-chip::before,.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-chip-h::before,.ds-interaction-fill.sc-ds-chip::before{z-index:1}.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::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-chip-h,.ds-interaction-fill--bordered.sc-ds-chip{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chip-h::before,.ds-interaction-fill--selected.sc-ds-chip::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chip-h,.ds-interaction-fill--selected.sc-ds-chip{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-chip-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-chip-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chip-h>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill.sc-ds-chip>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill__content.sc-ds-chip{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-chip-h,.ds-interaction-fill--on-faint.sc-ds-chip{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chip-h,.ds-interaction-fill--on-medium.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-bold.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-strong.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-translucent.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-inverted.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-media.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-always-dark.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-navigation.sc-ds-chip{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-chip-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-chip-h:focus-visible,.ds-focus-ring.sc-ds-chip: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-chip-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chip{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-chip-h:focus-visible,.ds-focus-ring-inset.sc-ds-chip:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chip-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chip: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-chip-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-chip-h,.ds-control-inactive.sc-ds-chip{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-chip-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-chip-h{border-radius:var(--dimension-radius-half)}.tag__label.sc-ds-chip{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.chip--default.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.chip--active.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.chip--error.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.chip--caution.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag__remove.sc-ds-chip{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;z-index:2;border-radius:var(--dimension-radius-half)}.tag__remove.sc-ds-chip::before{content:'';position:absolute;inset:var(--dimension-space-n025);border-radius:var(--dimension-radius-half);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-chip:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-chip:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:var(--dimension-space-n012)}.tag--size-xs.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:0}.tag__remove-x.sc-ds-chip{display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}`;const l={md:"md",sm:"sm",xs:"xs"};const h=i(class i extends o{constructor(i){super();if(i!==false){this.__registerHost()}this.dsRemove=s(this,"dsRemove");this.state="default";this.size="md";this.rounded=false;this.isInactive=false;this.removeLabel="Remove {label}";this.handleRemove=i=>{i.stopPropagation();if(this.isInactive)return;this.dsRemove.emit()}}render(){const i=d[this.size];const o=l[this.size];const s=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;return n(r,{key:"eddd24115e8029ec0cd2fb5544b3d75830f4ad6d",class:{tag:true,chip:true,[`chip--${this.state}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","tag--rounded":this.rounded,"tag--removable":true,"ds-interaction-fill":!this.isInactive,"ds-control-inactive":this.isInactive},style:s,"aria-disabled":this.isInactive?"true":undefined},n("ds-text",{key:"69b36acb5e73eba32d9288993ce430dc7efaa41d",class:"tag__label",as:"span",variant:i,color:"inherit"},this.label),n("button",{key:"ab71e10fdbc68230324594edda6dcaf66528d08e",type:"button",class:"tag__remove ds-focus-ring-inset",onClick:this.handleRemove,"aria-label":this.removeLabel.replace("{label}",this.label),disabled:this.isInactive||undefined},n("ds-icon",{key:"c67aa1eb3c7966e120b61aa2411d0b46cd53d597",class:"tag__remove-x",name:"Cross",size:o,color:"inherit"})))}static get style(){return a()}},[2,"ds-chip",{label:[1],state:[1],size:[1],rounded:[4],maxWidth:[8,"max-width"],isInactive:[4,"is-inactive"],removeLabel:[1,"remove-label"]}]);function v(){if(typeof customElements==="undefined"){return}const i=["ds-chip","ds-icon","ds-text"];i.forEach((i=>{switch(i){case"ds-chip":if(!customElements.get(c(i))){customElements.define(c(i),h)}break;case"ds-icon":if(!customElements.get(c(i))){e()}break;case"ds-text":if(!customElements.get(c(i))){t()}break}}))}v();const f=h;const p=v;export{f as DsChip,p as defineCustomElement};
|
|
1
|
+
import{p as i,H as o,c as s,h as n,a as r,t as c}from"./index.js";import{d as e}from"./p-DuNZGFkV.js";import{d as t}from"./p-Bs6SS34m.js";import{C as d}from"./p-Cx-ywr1e.js";const a=()=>`.ds-control--md.sc-ds-chip-h,.ds-control--md.sc-ds-chip,.ds-control--sm.sc-ds-chip-h,.ds-control--sm.sc-ds-chip,.ds-control--xs.sc-ds-chip-h,.ds-control--xs.sc-ds-chip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-chip-h,.ds-control--md.sc-ds-chip{--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-chip-h,.ds-control--sm.sc-ds-chip{--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-chip-h,.ds-control--xs.sc-ds-chip{--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-interaction-fill.sc-ds-chip-h,.ds-interaction-fill.sc-ds-chip{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-chip-h::before,.ds-interaction-fill.sc-ds-chip::before,.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-chip-h::before,.ds-interaction-fill.sc-ds-chip::before{z-index:1}.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::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-chip-h,.ds-interaction-fill--bordered.sc-ds-chip{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chip-h::before,.ds-interaction-fill--selected.sc-ds-chip::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chip-h,.ds-interaction-fill--selected.sc-ds-chip{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-chip-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-chip-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chip-h>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill.sc-ds-chip>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill__content.sc-ds-chip{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-chip-h,.ds-interaction-fill--on-faint.sc-ds-chip{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chip-h,.ds-interaction-fill--on-medium.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-bold.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-strong.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-translucent.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-inverted.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-media.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-always-dark.sc-ds-chip{--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-chip-h,.ds-interaction-fill--on-navigation.sc-ds-chip{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-chip-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-chip-h:focus-visible,.ds-focus-ring.sc-ds-chip: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-chip-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chip{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-chip-h:focus-visible,.ds-focus-ring-inset.sc-ds-chip:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chip-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chip: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-chip-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-chip-h,.ds-control-inactive.sc-ds-chip{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-chip-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-chip-h{border-radius:var(--dimension-radius-half)}.tag__label.sc-ds-chip{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.chip--default.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.chip--active.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.chip--error.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.chip--caution.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag__remove.sc-ds-chip{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;z-index:2;border-radius:var(--dimension-radius-half)}.tag__remove.sc-ds-chip::before{content:'';position:absolute;inset:var(--dimension-space-n025);border-radius:var(--dimension-radius-half);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-chip:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-chip:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:var(--dimension-space-n012)}.tag--size-xs.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:0}.tag__remove-x.sc-ds-chip{display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}`;const l={md:"md",sm:"sm",xs:"xs"};const h=i(class i extends o{constructor(i){super();if(i!==false){this.__registerHost()}this.dsRemove=s(this,"dsRemove");this.state="default";this.size="md";this.rounded=false;this.isInactive=false;this.removeLabel="Remove {label}";this.handleRemove=i=>{i.stopPropagation();if(this.isInactive)return;this.dsRemove.emit()}}render(){const i=d[this.size];const o=l[this.size];const s=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;return n(r,{key:"eddd24115e8029ec0cd2fb5544b3d75830f4ad6d",class:{tag:true,chip:true,[`chip--${this.state}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","tag--rounded":this.rounded,"tag--removable":true,"ds-interaction-fill":!this.isInactive,"ds-control-inactive":this.isInactive},style:s,"aria-disabled":this.isInactive?"true":undefined},n("ds-text",{key:"69b36acb5e73eba32d9288993ce430dc7efaa41d",class:"tag__label",as:"span",variant:i,color:"inherit"},this.label),n("button",{key:"ab71e10fdbc68230324594edda6dcaf66528d08e",type:"button",class:"tag__remove ds-focus-ring-inset",onClick:this.handleRemove,"aria-label":this.removeLabel.replace("{label}",this.label),disabled:this.isInactive||undefined},n("ds-icon",{key:"c67aa1eb3c7966e120b61aa2411d0b46cd53d597",class:"tag__remove-x",name:"Cross",size:o,color:"inherit"})))}static get style(){return a()}},[2,"ds-chip",{label:[1],state:[1],size:[1],rounded:[4],maxWidth:[8,"max-width"],isInactive:[4,"is-inactive"],removeLabel:[1,"remove-label"]}]);function v(){if(typeof customElements==="undefined"){return}const i=["ds-chip","ds-icon","ds-text"];i.forEach((i=>{switch(i){case"ds-chip":if(!customElements.get(c(i))){customElements.define(c(i),h)}break;case"ds-icon":if(!customElements.get(c(i))){e()}break;case"ds-text":if(!customElements.get(c(i))){t()}break}}))}v();const f=h;const p=v;export{f as DsChip,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chip.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-BYHKdFzV.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:"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};
|
|
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-DxeHimqk.js";import{d as c}from"./p-Cpr3K41-.js";import{d as a}from"./p-Bs6SS34m.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;inset:auto;margin:0;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:"c2ffc3d77f6cdda03d4acafd44ee4161b7e39a04",role:"listitem",class:{"conversation-list-item--actions-open":this.actionsOpen}},e("div",{key:"9356d3484d4c97ab99bd363341d3ddcc6f62bb4e",class:"conversation-list-item__row"},e("button",{key:"574b3a320d7ff7615e01bfcf341e6097057172ad",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:"ae9c20fc21c1fb1d152bef40e8f7dae68c7cb4e7",class:"conversation-list-item__leading ds-choice-item__icon ds-interaction-fill__content"},e("slot",{key:"a8fc8e6fa4788c22743665f2344ad68bcfa52804",name:"leading"})),e("span",{key:"a25647eefb50135c33f0f7cd2b6b281f7f6effac",class:"conversation-list-item__content ds-choice-item__content ds-interaction-fill__content"},e("span",{key:"5b11ebd71b174a464a3f7b4add2bb5fc9a94f0e1",class:"conversation-list-item__title-row"},e("ds-text",{key:"8712fd97edd584e27b3fdbaa5dc97c9d15d6b7df",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:"4606d718fbaba0ac0ae745429d15a277e0b71fe8",class:"conversation-list-item__preview-row"},i?e("ds-loader",{size:"sm",color:"secondary"}):null,e("ds-text",{key:"721306096a4110a846192488e3c4feed1ddc5fe9",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:"eb4c3a3a25803cddcabff52136ba87f5bbe3c6d7",class:"conversation-list-item__trailing ds-interaction-fill__content"},e("slot",{key:"d9db68738ec9c6458a6a112f84e7e4d2ec9a43b8",name:"trailing"}))),e("div",{key:"1b48d467a54146704d864d2bbdeaaccc95c636be",class:"conversation-list-item__actions"},e("slot",{key:"5b4c5623f81058735780bdd70c898549eb21bd46",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 +1 @@
|
|
|
1
|
-
{"version":3,"names":["conversationListItemCss","ConversationListItem","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","conversationId","conversationTitle","preview","updatedAt","selected","state","statusLabel","unreadCount","actionsOpen","handleClick","dsSelect","emit","id","handleActionsSlotChange","event","slot","target","el","classList","toggle","assignedElements","flatten","length","render","busy","subtext","accessibleName","filter","Boolean","join","h","Host","key","role","class","type","undefined","onClick","name","as","variant","emphasis","color","lineTruncation","surface","size","dateTime","onSlotchange"],"sources":["src/wc/components/ConversationListItem/ConversationListItem.css?tag=ds-conversation-list-item&encapsulation=scoped","src/wc/components/ConversationListItem/ConversationListItem.tsx"],"sourcesContent":["@import '../../utils/choice-list.css';\n\n:host {\n display: block;\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.conversation-list-item__row {\n position: relative;\n isolation: isolate;\n}\n\n.conversation-list-item {\n color: var(--color-foreground-primary);\n}\n\n.conversation-list-item--error {\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.conversation-list-item__leading:empty,\n.conversation-list-item__trailing:empty {\n display: none;\n}\n\n.conversation-list-item__leading,\n.conversation-list-item__trailing,\n.conversation-list-item__preview-row {\n display: flex;\n align-items: center;\n}\n\n.conversation-list-item__leading {\n align-self: center;\n width: auto;\n height: auto;\n margin-inline-start: var(--ds-control-label-inset, var(--dimension-space-025));\n margin-inline-end: var(--dimension-space-050);\n}\n\n.conversation-list-item__content {\n min-width: 0;\n}\n\n.conversation-list-item__title-row {\n display: flex;\n align-items: center;\n min-width: 0;\n}\n\n.conversation-list-item__preview-row {\n min-width: 0;\n gap: var(--dimension-space-100);\n}\n\nds-text.conversation-list-item__title,\nds-text.conversation-list-item__preview {\n display: block;\n min-width: 0;\n}\n\nds-text.conversation-list-item__title {\n flex: 1;\n}\n\n.conversation-list-item__unread {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--dimension-size-200);\n margin-inline-end: var(--dimension-space-025);\n}\n\nds-text.conversation-list-item__preview.ds-choice-item__subtext {\n -webkit-line-clamp: 1;\n}\n\n.conversation-list-item__actions {\n position: absolute;\n top: 50%;\n right: var(--dimension-space-100);\n z-index: var(--dimension-z-index-floating);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--dimension-radius-half);\n background: var(--color-background-transparent);\n box-shadow: var(--effect-elevation-elevated-md);\n -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n backdrop-filter: blur(var(--effect-blur-sm));\n opacity: 0;\n pointer-events: none;\n transform: translateY(-50%);\n}\n\n.conversation-list-item__row:hover .conversation-list-item__actions,\n.conversation-list-item__row:has(:focus-visible) .conversation-list-item__actions,\n:host(.conversation-list-item--actions-open) .conversation-list-item__actions {\n opacity: 1;\n pointer-events: auto;\n}\n\n/* Keep the row wash continuous while the pointer moves onto its sibling action. */\n.conversation-list-item__row:hover .conversation-list-item::after {\n background: var(--ds-interaction-hover);\n}\n\n:host(.conversation-list-item--actions-open) .conversation-list-item::after {\n background: var(--ds-interaction-hover);\n}\n\n.conversation-list-item__row:active .conversation-list-item::after {\n background: var(--ds-interaction-pressed);\n}\n\n@media (hover: none) {\n .conversation-list-item__actions {\n opacity: 1;\n pointer-events: auto;\n }\n\n :host(.conversation-list-item--has-actions) .conversation-list-item__title-row {\n padding-inline-end: var(--dimension-size-400);\n }\n}\n\n.conversation-list-item__time {\n position: absolute;\n width: var(--dimension-size-050);\n height: var(--dimension-size-050);\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { ConversationItemState } from '../conversation-types';\n\n@Component({\n tag: 'ds-conversation-list-item',\n styleUrl: 'ConversationListItem.css',\n scoped: true,\n})\nexport class ConversationListItem {\n @Element() el!: HTMLElement;\n\n @Prop() conversationId: string = '';\n /** Visible conversation title. Named to avoid the native HTMLElement.title contract. */\n @Prop() conversationTitle: string = '';\n @Prop() preview: string = '';\n /** ISO timestamp for semantic activity metadata. */\n @Prop() updatedAt: string = '';\n @Prop() selected: boolean = false;\n @Prop() state: ConversationItemState = 'default';\n @Prop() statusLabel: string = '';\n @Prop() unreadCount: number = 0;\n /** Keep the contextual-actions surface visible while its popup is open or closing. */\n @Prop({ reflect: true }) actionsOpen: boolean = false;\n\n @Event() dsSelect!: EventEmitter<{ id: string }>;\n\n private handleClick = () => this.dsSelect.emit({ id: this.conversationId });\n\n private handleActionsSlotChange = (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n this.el.classList.toggle(\n 'conversation-list-item--has-actions',\n slot.assignedElements({ flatten: true }).length > 0\n );\n };\n\n render() {\n const busy = this.state === 'busy';\n const subtext = busy && this.statusLabel ? this.statusLabel : this.preview;\n const accessibleName = [\n this.conversationTitle,\n subtext,\n this.unreadCount > 0 ? `${this.unreadCount} unread` : '',\n ]\n .filter(Boolean)\n .join('. ');\n\n return (\n <Host\n role=\"listitem\"\n class={{ 'conversation-list-item--actions-open': this.actionsOpen }}\n >\n <div class=\"conversation-list-item__row\">\n <button\n type=\"button\"\n class={{\n 'conversation-list-item': true,\n 'ds-choice-item': true,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n 'ds-interaction-fill--selected': this.selected,\n 'conversation-list-item--error': this.state === 'error',\n }}\n aria-label={accessibleName}\n aria-current={this.selected ? 'true' : undefined}\n aria-busy={busy ? 'true' : undefined}\n onClick={this.handleClick}\n >\n <span class=\"conversation-list-item__leading ds-choice-item__icon ds-interaction-fill__content\">\n <slot name=\"leading\" />\n </span>\n <span class=\"conversation-list-item__content ds-choice-item__content ds-interaction-fill__content\">\n <span class=\"conversation-list-item__title-row\">\n <ds-text\n class=\"conversation-list-item__title ds-choice-item__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis={this.unreadCount > 0}\n color={this.unreadCount > 0 ? 'primary' : 'secondary'}\n lineTruncation={1}\n >\n {this.conversationTitle}\n </ds-text>\n {this.unreadCount > 0 ? (\n <span class=\"conversation-list-item__unread\">\n <ds-badge variant=\"dot\" surface=\"secondary\" />\n </span>\n ) : null}\n </span>\n <span class=\"conversation-list-item__preview-row\">\n {busy ? <ds-loader size=\"sm\" color=\"secondary\" /> : null}\n <ds-text\n class=\"conversation-list-item__preview ds-choice-item__subtext\"\n as=\"span\"\n variant=\"text-body-small\"\n color={this.state === 'error' ? 'negative' : 'secondary'}\n lineTruncation={1}\n >\n {subtext}\n </ds-text>\n </span>\n {this.updatedAt ? (\n <time class=\"conversation-list-item__time\" dateTime={this.updatedAt}>\n {this.updatedAt}\n </time>\n ) : null}\n </span>\n <span class=\"conversation-list-item__trailing ds-interaction-fill__content\">\n <slot name=\"trailing\" />\n </span>\n </button>\n <div class=\"conversation-list-item__actions\">\n <slot name=\"actions\" onSlotchange={this.handleActionsSlotChange} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"8KAAA,MAAMA,EAA0B,IAAM,q5iB,MCQzBC,EAAoBC,EAAA,MAAAD,UAAAE,EALjC,WAAAC,CAAAC,G,6EAQUC,KAAAC,eAAyB,GAEzBD,KAAAE,kBAA4B,GAC5BF,KAAAG,QAAkB,GAElBH,KAAAI,UAAoB,GACpBJ,KAAAK,SAAoB,MACpBL,KAAAM,MAA+B,UAC/BN,KAAAO,YAAsB,GACtBP,KAAAQ,YAAsB,EAELR,KAAAS,YAAuB,MAIxCT,KAAAU,YAAc,IAAMV,KAAKW,SAASC,KAAK,CAAEC,GAAIb,KAAKC,iBAElDD,KAAAc,wBAA2BC,IACjC,MAAMC,EAAOD,EAAME,OACnBjB,KAAKkB,GAAGC,UAAUC,OAChB,sCACAJ,EAAKK,iBAAiB,CAAEC,QAAS,OAAQC,OAAS,EACnD,CAsFJ,CAnFC,MAAAC,GACE,MAAMC,EAAOzB,KAAKM,QAAU,OAC5B,MAAMoB,EAAUD,GAAQzB,KAAKO,YAAcP,KAAKO,YAAcP,KAAKG,QACnE,MAAMwB,EAAiB,CACrB3B,KAAKE,kBACLwB,EACA1B,KAAKQ,YAAc,EAAI,GAAGR,KAAKQ,qBAAuB,IAErDoB,OAAOC,SACPC,KAAK,MAER,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WACLC,MAAO,CAAE,uCAAwCnC,KAAKS,cAEtDsB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,+BACTJ,EAAA,UAAAE,IAAA,2CACEG,KAAK,SACLD,MAAO,CACL,yBAA0B,KAC1B,iBAAkB,KAClB,iBAAkB,KAClB,sBAAuB,KACvB,sBAAuB,KACvB,gCAAiCnC,KAAKK,SACtC,gCAAiCL,KAAKM,QAAU,SACjD,aACWqB,EAAc,eACZ3B,KAAKK,SAAW,OAASgC,UAAS,YACrCZ,EAAO,OAASY,UAC3BC,QAAStC,KAAKU,aAEdqB,EAAA,QAAAE,IAAA,2CAAME,MAAM,qFACVJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,aAEbR,EAAA,QAAAE,IAAA,2CAAME,MAAM,wFACVJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,qCACVJ,EAAA,WAAAE,IAAA,2CACEE,MAAM,sDACNK,GAAG,OACHC,QAAQ,mBACRC,SAAU1C,KAAKQ,YAAc,EAC7BmC,MAAO3C,KAAKQ,YAAc,EAAI,UAAY,YAC1CoC,eAAgB,GAEf5C,KAAKE,mBAEPF,KAAKQ,YAAc,EAClBuB,EAAA,QAAMI,MAAM,kCACVJ,EAAA,YAAUU,QAAQ,MAAMI,QAAQ,eAEhC,MAENd,EAAA,QAAAE,IAAA,2CAAME,MAAM,uCACTV,EAAOM,EAAA,aAAWe,KAAK,KAAKH,MAAM,cAAiB,KACpDZ,EAAA,WAAAE,IAAA,2CACEE,MAAM,0DACNK,GAAG,OACHC,QAAQ,kBACRE,MAAO3C,KAAKM,QAAU,QAAU,WAAa,YAC7CsC,eAAgB,GAEflB,IAGJ1B,KAAKI,UACJ2B,EAAA,QAAMI,MAAM,+BAA+BY,SAAU/C,KAAKI,WACvDJ,KAAKI,WAEN,MAEN2B,EAAA,QAAAE,IAAA,2CAAME,MAAM,iEACVJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,eAGfR,EAAA,OAAAE,IAAA,2CAAKE,MAAM,mCACTJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,UAAUS,aAAchD,KAAKc,4B","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["conversationListItemCss","ConversationListItem","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","conversationId","conversationTitle","preview","updatedAt","selected","state","statusLabel","unreadCount","actionsOpen","handleClick","dsSelect","emit","id","handleActionsSlotChange","event","slot","target","el","classList","toggle","assignedElements","flatten","length","render","busy","subtext","accessibleName","filter","Boolean","join","h","Host","key","role","class","type","undefined","onClick","name","as","variant","emphasis","color","lineTruncation","surface","size","dateTime","onSlotchange"],"sources":["src/wc/components/ConversationListItem/ConversationListItem.css?tag=ds-conversation-list-item&encapsulation=scoped","src/wc/components/ConversationListItem/ConversationListItem.tsx"],"sourcesContent":["@import '../../utils/choice-list.css';\n\n:host {\n display: block;\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.conversation-list-item__row {\n position: relative;\n isolation: isolate;\n}\n\n.conversation-list-item {\n color: var(--color-foreground-primary);\n}\n\n.conversation-list-item--error {\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.conversation-list-item__leading:empty,\n.conversation-list-item__trailing:empty {\n display: none;\n}\n\n.conversation-list-item__leading,\n.conversation-list-item__trailing,\n.conversation-list-item__preview-row {\n display: flex;\n align-items: center;\n}\n\n.conversation-list-item__leading {\n align-self: center;\n width: auto;\n height: auto;\n margin-inline-start: var(--ds-control-label-inset, var(--dimension-space-025));\n margin-inline-end: var(--dimension-space-050);\n}\n\n.conversation-list-item__content {\n min-width: 0;\n}\n\n.conversation-list-item__title-row {\n display: flex;\n align-items: center;\n min-width: 0;\n}\n\n.conversation-list-item__preview-row {\n min-width: 0;\n gap: var(--dimension-space-100);\n}\n\nds-text.conversation-list-item__title,\nds-text.conversation-list-item__preview {\n display: block;\n min-width: 0;\n}\n\nds-text.conversation-list-item__title {\n flex: 1;\n}\n\n.conversation-list-item__unread {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--dimension-size-200);\n margin-inline-end: var(--dimension-space-025);\n}\n\nds-text.conversation-list-item__preview.ds-choice-item__subtext {\n -webkit-line-clamp: 1;\n}\n\n.conversation-list-item__actions {\n position: absolute;\n top: 50%;\n right: var(--dimension-space-100);\n z-index: var(--dimension-z-index-floating);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--dimension-radius-half);\n background: var(--color-background-transparent);\n box-shadow: var(--effect-elevation-elevated-md);\n -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n backdrop-filter: blur(var(--effect-blur-sm));\n opacity: 0;\n pointer-events: none;\n transform: translateY(-50%);\n}\n\n.conversation-list-item__row:hover .conversation-list-item__actions,\n.conversation-list-item__row:has(:focus-visible) .conversation-list-item__actions,\n:host(.conversation-list-item--actions-open) .conversation-list-item__actions {\n opacity: 1;\n pointer-events: auto;\n}\n\n/* Keep the row wash continuous while the pointer moves onto its sibling action. */\n.conversation-list-item__row:hover .conversation-list-item::after {\n background: var(--ds-interaction-hover);\n}\n\n:host(.conversation-list-item--actions-open) .conversation-list-item::after {\n background: var(--ds-interaction-hover);\n}\n\n.conversation-list-item__row:active .conversation-list-item::after {\n background: var(--ds-interaction-pressed);\n}\n\n@media (hover: none) {\n .conversation-list-item__actions {\n opacity: 1;\n pointer-events: auto;\n }\n\n :host(.conversation-list-item--has-actions) .conversation-list-item__title-row {\n padding-inline-end: var(--dimension-size-400);\n }\n}\n\n.conversation-list-item__time {\n position: absolute;\n width: var(--dimension-size-050);\n height: var(--dimension-size-050);\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { ConversationItemState } from '../conversation-types';\n\n@Component({\n tag: 'ds-conversation-list-item',\n styleUrl: 'ConversationListItem.css',\n scoped: true,\n})\nexport class ConversationListItem {\n @Element() el!: HTMLElement;\n\n @Prop() conversationId: string = '';\n /** Visible conversation title. Named to avoid the native HTMLElement.title contract. */\n @Prop() conversationTitle: string = '';\n @Prop() preview: string = '';\n /** ISO timestamp for semantic activity metadata. */\n @Prop() updatedAt: string = '';\n @Prop() selected: boolean = false;\n @Prop() state: ConversationItemState = 'default';\n @Prop() statusLabel: string = '';\n @Prop() unreadCount: number = 0;\n /** Keep the contextual-actions surface visible while its popup is open or closing. */\n @Prop({ reflect: true }) actionsOpen: boolean = false;\n\n @Event() dsSelect!: EventEmitter<{ id: string }>;\n\n private handleClick = () => this.dsSelect.emit({ id: this.conversationId });\n\n private handleActionsSlotChange = (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n this.el.classList.toggle(\n 'conversation-list-item--has-actions',\n slot.assignedElements({ flatten: true }).length > 0\n );\n };\n\n render() {\n const busy = this.state === 'busy';\n const subtext = busy && this.statusLabel ? this.statusLabel : this.preview;\n const accessibleName = [\n this.conversationTitle,\n subtext,\n this.unreadCount > 0 ? `${this.unreadCount} unread` : '',\n ]\n .filter(Boolean)\n .join('. ');\n\n return (\n <Host\n role=\"listitem\"\n class={{ 'conversation-list-item--actions-open': this.actionsOpen }}\n >\n <div class=\"conversation-list-item__row\">\n <button\n type=\"button\"\n class={{\n 'conversation-list-item': true,\n 'ds-choice-item': true,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n 'ds-interaction-fill--selected': this.selected,\n 'conversation-list-item--error': this.state === 'error',\n }}\n aria-label={accessibleName}\n aria-current={this.selected ? 'true' : undefined}\n aria-busy={busy ? 'true' : undefined}\n onClick={this.handleClick}\n >\n <span class=\"conversation-list-item__leading ds-choice-item__icon ds-interaction-fill__content\">\n <slot name=\"leading\" />\n </span>\n <span class=\"conversation-list-item__content ds-choice-item__content ds-interaction-fill__content\">\n <span class=\"conversation-list-item__title-row\">\n <ds-text\n class=\"conversation-list-item__title ds-choice-item__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n emphasis={this.unreadCount > 0}\n color={this.unreadCount > 0 ? 'primary' : 'secondary'}\n lineTruncation={1}\n >\n {this.conversationTitle}\n </ds-text>\n {this.unreadCount > 0 ? (\n <span class=\"conversation-list-item__unread\">\n <ds-badge variant=\"dot\" surface=\"secondary\" />\n </span>\n ) : null}\n </span>\n <span class=\"conversation-list-item__preview-row\">\n {busy ? <ds-loader size=\"sm\" color=\"secondary\" /> : null}\n <ds-text\n class=\"conversation-list-item__preview ds-choice-item__subtext\"\n as=\"span\"\n variant=\"text-body-small\"\n color={this.state === 'error' ? 'negative' : 'secondary'}\n lineTruncation={1}\n >\n {subtext}\n </ds-text>\n </span>\n {this.updatedAt ? (\n <time class=\"conversation-list-item__time\" dateTime={this.updatedAt}>\n {this.updatedAt}\n </time>\n ) : null}\n </span>\n <span class=\"conversation-list-item__trailing ds-interaction-fill__content\">\n <slot name=\"trailing\" />\n </span>\n </button>\n <div class=\"conversation-list-item__actions\">\n <slot name=\"actions\" onSlotchange={this.handleActionsSlotChange} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"8KAAA,MAAMA,EAA0B,IAAM,y6iB,MCQzBC,EAAoBC,EAAA,MAAAD,UAAAE,EALjC,WAAAC,CAAAC,G,6EAQUC,KAAAC,eAAyB,GAEzBD,KAAAE,kBAA4B,GAC5BF,KAAAG,QAAkB,GAElBH,KAAAI,UAAoB,GACpBJ,KAAAK,SAAoB,MACpBL,KAAAM,MAA+B,UAC/BN,KAAAO,YAAsB,GACtBP,KAAAQ,YAAsB,EAELR,KAAAS,YAAuB,MAIxCT,KAAAU,YAAc,IAAMV,KAAKW,SAASC,KAAK,CAAEC,GAAIb,KAAKC,iBAElDD,KAAAc,wBAA2BC,IACjC,MAAMC,EAAOD,EAAME,OACnBjB,KAAKkB,GAAGC,UAAUC,OAChB,sCACAJ,EAAKK,iBAAiB,CAAEC,QAAS,OAAQC,OAAS,EACnD,CAsFJ,CAnFC,MAAAC,GACE,MAAMC,EAAOzB,KAAKM,QAAU,OAC5B,MAAMoB,EAAUD,GAAQzB,KAAKO,YAAcP,KAAKO,YAAcP,KAAKG,QACnE,MAAMwB,EAAiB,CACrB3B,KAAKE,kBACLwB,EACA1B,KAAKQ,YAAc,EAAI,GAAGR,KAAKQ,qBAAuB,IAErDoB,OAAOC,SACPC,KAAK,MAER,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WACLC,MAAO,CAAE,uCAAwCnC,KAAKS,cAEtDsB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,+BACTJ,EAAA,UAAAE,IAAA,2CACEG,KAAK,SACLD,MAAO,CACL,yBAA0B,KAC1B,iBAAkB,KAClB,iBAAkB,KAClB,sBAAuB,KACvB,sBAAuB,KACvB,gCAAiCnC,KAAKK,SACtC,gCAAiCL,KAAKM,QAAU,SACjD,aACWqB,EAAc,eACZ3B,KAAKK,SAAW,OAASgC,UAAS,YACrCZ,EAAO,OAASY,UAC3BC,QAAStC,KAAKU,aAEdqB,EAAA,QAAAE,IAAA,2CAAME,MAAM,qFACVJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,aAEbR,EAAA,QAAAE,IAAA,2CAAME,MAAM,wFACVJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,qCACVJ,EAAA,WAAAE,IAAA,2CACEE,MAAM,sDACNK,GAAG,OACHC,QAAQ,mBACRC,SAAU1C,KAAKQ,YAAc,EAC7BmC,MAAO3C,KAAKQ,YAAc,EAAI,UAAY,YAC1CoC,eAAgB,GAEf5C,KAAKE,mBAEPF,KAAKQ,YAAc,EAClBuB,EAAA,QAAMI,MAAM,kCACVJ,EAAA,YAAUU,QAAQ,MAAMI,QAAQ,eAEhC,MAENd,EAAA,QAAAE,IAAA,2CAAME,MAAM,uCACTV,EAAOM,EAAA,aAAWe,KAAK,KAAKH,MAAM,cAAiB,KACpDZ,EAAA,WAAAE,IAAA,2CACEE,MAAM,0DACNK,GAAG,OACHC,QAAQ,kBACRE,MAAO3C,KAAKM,QAAU,QAAU,WAAa,YAC7CsC,eAAgB,GAEflB,IAGJ1B,KAAKI,UACJ2B,EAAA,QAAMI,MAAM,+BAA+BY,SAAU/C,KAAKI,WACvDJ,KAAKI,WAEN,MAEN2B,EAAA,QAAAE,IAAA,2CAAME,MAAM,iEACVJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,eAGfR,EAAA,OAAAE,IAAA,2CAAKE,MAAM,mCACTJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,UAAUS,aAAchD,KAAKc,4B","ignoreList":[]}
|
|
@@ -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 o}from"./p-Bs6SS34m.js";const c=()=>`.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:"53ad7fd6177d87b87f656bd17f523f03906a7e6f"},t("section",{key:"082ff7fc128831640bad82dba27c8996efb4d316",class:"conversation-list-section","aria-labelledby":s},t("ds-text",{key:"6a0632c495877d0feaf074f6db8c1fb83f8ccec9",class:"conversation-list-section__heading",textId:s,as:"h3",variant:"text-caption",emphasis:true,color:"secondary"},this.heading),t("div",{key:"5681139df819a3f77317c6b7aa2273c3a5a8f340",class:"conversation-list-section__items",role:"list"},t("slot",{key:"1d236df7a6064c89b6bbbf117fa8f7e7e5003f01"}))))}static get style(){return c()}},[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))){o()}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:"9ca39c6b57e2824edc99cf13348bfae4c3e4d0ac"},i("div",{key:"287becb7c1672ace65c4112b82983fdb051a883e",class:"conversation-list"},i("div",{key:"05ce3ac2bb7eeb2b127f96d123c495dda4a791da",class:"conversation-list__content"},i("slot",{key:"a5a9ad95576f1877e97a853070ab8ce1475d2361"}),i("div",{key:"50ab18a15e1719594dcd751984f49ba462f280c8",class:"conversation-list__empty"},i("slot",{key:"2f9ebc339874572fbe95fb46fc85cfedc0ecd4f3",name:"empty"}))),i("div",{key:"08b3910869483eca4b5928017d8ff8d360b62b39",class:"conversation-list__actions"},i("div",{key:"8a4b2495ae11d3123467f9bf3e833ae7f347b56f",class:"conversation-list__actions-surface"},i("slot",{key:"e562b0d7731ab84a3c3ca41778bc0c5737521dab",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-Cf2J9MEo.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-
|
|
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-Bs6SS34m.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 h=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:"e69d97e6ae28b12eade95cdf7b5f3f9186ae804d","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:"6500b5f86ce741b2c201c6b0aaedd566e3a0ff0d",class:"field"},i("ds-text",{key:"56c36d7f0bb6fb56510f7a1a1f738e981c24b6fa",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:"d224959f736b038d6ef71f64942d674d81b8153f",class:"field__control",ref:e=>this.controlContainer=e},i("slot",{key:"eaca3276dbe6ece09fbf04610cf989894f51a1bb",onSlotchange:this.syncControl})),this.renderedDescription&&i("ds-text",{key:"f86e44b5ae6db25aa305828ff7b56e20ba261a94",class:"field__description",as:"div",variant:"text-body-small",color:"secondary",textId:this.descriptionId},this.description),this.renderedError&&i("ds-text",{key:"b668d6b60b93a227cc60e475d85029f460a5f972",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 c(){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),h)}break;case"ds-text":if(!customElements.get(d(e))){n()}break}}))}c();const f=h;const u=c;export{f as DsField,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-field.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as i,c as s,h as e,a as n,t as r}from"./index.js";import{d as o}from"./p-DrDHC7V6.js";import{d as a}from"./p-DTqCBjUj.js";import{d}from"./p-DuNZGFkV.js";import{d as c}from"./p-Cpr3K41-.js";import{d as l}from"./p-CZZYGqKz.js";import{C as p}from"./p-Cx-ywr1e.js";import{c as u}from"./p-DuFm-ieS.js";const h=()=>`.ds-interaction-fill.sc-ds-input-h,.ds-interaction-fill.sc-ds-input{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-input-h::before,.ds-interaction-fill.sc-ds-input::before,.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before{z-index:1}.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::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-input-h,.ds-interaction-fill--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-input-h::before,.ds-interaction-fill--selected.sc-ds-input::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-input-h,.ds-interaction-fill--selected.sc-ds-input{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-input-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-input-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-input-h>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill.sc-ds-input>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill__content.sc-ds-input{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-input-h,.ds-interaction-fill--on-faint.sc-ds-input{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-input-h,.ds-interaction-fill--on-medium.sc-ds-input{--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-input-h,.ds-interaction-fill--on-bold.sc-ds-input{--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-input-h,.ds-interaction-fill--on-strong.sc-ds-input{--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-input-h,.ds-interaction-fill--on-translucent.sc-ds-input{--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-input-h,.ds-interaction-fill--on-inverted.sc-ds-input{--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-input-h,.ds-interaction-fill--on-media.sc-ds-input{--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-input-h,.ds-interaction-fill--on-always-dark.sc-ds-input{--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-input-h,.ds-interaction-fill--on-navigation.sc-ds-input{--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-input-h,.ds-control-inactive.sc-ds-input{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input,.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input,.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input{--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-input-h,.ds-control--sm.sc-ds-input{--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-input-h,.ds-control--xs.sc-ds-input{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-width--hug.sc-ds-input-h,.ds-control-width--hug.sc-ds-input{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-text--display-medium.sc-ds-input-h,.ds-text--display-medium.sc-ds-input{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-input-h,.ds-text--display-small.sc-ds-input{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-input-h,.ds-text--title-large.sc-ds-input{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-input-h,.ds-text--title-medium.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-input-h,.ds-text--title-small.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-input-h,.ds-text--body-large.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-input-h,.ds-text--body-medium.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-input-h,.ds-text--body-small.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-input-h,.ds-text--caption.sc-ds-input{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--display-small.ds-text--emphasis.sc-ds-input-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-input,.ds-text--display-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-input-h,.ds-text--display-small.ds-text--regular.sc-ds-input-h,.ds-text--display-medium.ds-text--regular.sc-ds-input,.ds-text--display-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-input-h,.ds-text--title-large.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-input-h,.ds-text--title-large.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--title-small.ds-text--emphasis.sc-ds-input-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-input,.ds-text--title-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-input-h,.ds-text--title-small.ds-text--regular.sc-ds-input-h,.ds-text--title-medium.ds-text--regular.sc-ds-input,.ds-text--title-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-input-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--body-large.ds-text--emphasis.sc-ds-input,.ds-text--body-medium.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-input-h,.ds-text--body-medium.ds-text--regular.sc-ds-input-h,.ds-text--body-large.ds-text--regular.sc-ds-input,.ds-text--body-medium.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-input-h,.ds-text--body-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-input-h,.ds-text--body-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-input-h,.ds-text--caption.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-input-h,.ds-text--caption.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.input-host.sc-ds-input-h{display:inline-flex;flex-direction:column;gap:var(--dimension-space-050);--ds-input-fg:var(--color-foreground-primary);--ds-input-placeholder:var(--color-foreground-secondary);--ds-input-placeholder-active:var(--color-foreground-quaternary);--ds-input-adornment-fg:var(--color-foreground-secondary);--ds-input-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input-h .input-control.sc-ds-input{width:100%}.input-control.sc-ds-input{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));overflow:hidden;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-input-fg)}.input-control--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-input-border)}.input-control--error.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.input-control.sc-ds-input:focus-within:not(.input-control--error){--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-brand)}.ds-control-inactive.sc-ds-input-h .input-control.sc-ds-input::after{background:transparent}.native-input.sc-ds-input{position:relative;z-index:2;flex:1 1 auto;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));background:transparent;border:none;border-radius:inherit;outline:none;color:var(--ds-input-fg);font-family:inherit;-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{cursor:not-allowed}.native-input.sc-ds-input:read-only:not(:disabled){cursor:default}.native-input.sc-ds-input::placeholder{color:var(--ds-input-placeholder)}.native-input.sc-ds-input:focus::placeholder{color:var(--ds-input-placeholder-active)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.input-control__prefix.sc-ds-input,.input-control__suffix.sc-ds-input{position:relative;z-index:2;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;color:var(--ds-input-adornment-fg)}.input-control__suffix--empty.sc-ds-input{display:none}.input-control__clear.sc-ds-input{position:relative;z-index:2;flex-shrink:0;align-self:center}.input-control.ds-control--md.sc-ds-input:has(.input-control__clear),.input-control.ds-control--sm.sc-ds-input:has(.input-control__clear){padding-right:var(--dimension-space-050)}.input-control.ds-control--xs.sc-ds-input:has(.input-control__clear){padding-right:0}.error-text.sc-ds-input{width:100%}`;const g={md:"md",sm:"sm",xs:"xs"};const f={md:"sm",sm:"xs",xs:"xs"};let v=0;const m=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.internals=this.attachInternals();this.generatedId=`ds-input-${++v}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage="This field is required.";this.clearLabel="Clear";this.type="text";this.inputMode="";this.enterKeyHint="";this.size="md";this.width="fill";this.hasBorder=true;this.isInactive=false;this.autoFocus=false;this.error=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false;this.hasSuffix=false;this.focused=false;this.touched=false;this.handleInput=t=>{this.value=t.target.value;this.dsChange.emit(this.value)};this.handleFocus=()=>{this.focused=true};this.handleBlur=()=>{this.focused=false;this.touched=true};this.handleClear=()=>{this.value="";this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}componentWillLoad(){this.initialValue=this.value;this.hasSuffix=Boolean(this.el.querySelector('[slot="suffix"]'));this.syncFormValue()}componentDidRender(){const t=Boolean(this.el.querySelector('[slot="suffix"]'));if(t!==this.hasSuffix)this.hasSuffix=t}syncFormValue(){const t=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(t?null:this.value);const i=this.required&&!t&&this.value.length===0;this.internals.setValidity(i?{valueMissing:true}:{},i?this.requiredMessage:"")}formDisabledCallback(t){this.formDisabled=t;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(t){this.value=typeof t==="string"?t:""}async setFocus(){this.el.querySelector("input")?.focus()}render(){const t=this.inputId??this.generatedId;const i=this.isInactive||this.disabled||this.formDisabled;const s=this.value.length>0;const r=this.value!==this.initialValue;const o=this.type==="search"&&s&&!i&&!this.readOnly;const a=this.error&&Boolean(this.errorMessage);const d=p[this.size];const c=g[this.size];const l=[this.ariaDescribedby,a?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return e(n,{key:"e5b9a970d00fae2848b4538555389bbcbbf2445f",class:{"input-host":true,"ds-control-inactive":i,[`ds-control--${this.size}`]:true,...u(this.width)},"data-disabled":i?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-required":this.required?"":undefined,"data-invalid":this.error?"":undefined,"data-filled":s?"":undefined,"data-focused":this.focused?"":undefined,"data-dirty":r?"":undefined,"data-touched":this.touched?"":undefined},e("div",{key:"a87a76858d295fe9f390280844cac3dedd49741f",class:{"input-control":true,"input-control--bordered":this.hasBorder||this.error,"input-control--error":this.error,"ds-interaction-fill":true,[`ds-control--${this.size}`]:true}},this.icon&&e("span",{key:"ceced5db76973935471488644217966997f77651",class:"input-control__prefix ds-interaction-fill__content","aria-hidden":"true"},e("ds-icon",{key:"573a5680f38a2f285b69d1c14024666bb55d59a5",name:this.icon,size:c,color:"inherit"})),e("input",{key:"14512b6e15458641247317b6c1f209c6dbd345cf",type:this.type,id:t,value:this.value,placeholder:this.placeholder,disabled:i,readOnly:this.readOnly,required:this.required,autoFocus:this.autoFocus,autoComplete:this.autoComplete,inputMode:this.inputMode||undefined,enterKeyHint:this.enterKeyHint||undefined,class:`native-input ds-text--${d.replace("text-","")} ds-text--regular ds-interaction-fill__content`,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":l,"aria-invalid":this.error?"true":undefined,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),e("span",{key:"d69edd5191e15b5246afd3e069b39864487a9394",class:{"input-control__suffix":true,"input-control__suffix--empty":!this.hasSuffix}},e("slot",{key:"891d74c4e9e15585b0e790a18db009dbba8ca84c",name:"suffix"})),o&&e("ds-button-unfilled",{key:"a20b15370c1498895c33317964fd400ab3b1422a",class:"input-control__clear",variant:"icon",size:f[this.size],icon:"CrossCircle",hasBorder:false,rounded:true,ariaLabel:this.clearLabel,onDsClick:this.handleClear})),a&&e("ds-text",{key:"855383bca70344dcd3b91de0923ca1155cfc878f",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return h()}},[326,"ds-input",{value:[1025],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],required:[516],requiredMessage:[1,"required-message"],clearLabel:[1,"clear-label"],placeholder:[1],type:[1],autoComplete:[1,"autocomplete"],inputMode:[1,"inputmode"],enterKeyHint:[1,"enterkeyhint"],size:[1],width:[1],hasBorder:[4,"has-border"],icon:[1],isInactive:[4,"is-inactive"],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],formDisabled:[32],hasSuffix:[32],focused:[32],touched:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function y(){if(typeof customElements==="undefined"){return}const t=["ds-input","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-input":if(!customElements.get(r(t))){customElements.define(r(t),m)}break;case"ds-badge":if(!customElements.get(r(t))){o()}break;case"ds-button-unfilled":if(!customElements.get(r(t))){a()}break;case"ds-icon":if(!customElements.get(r(t))){d()}break;case"ds-loader":if(!customElements.get(r(t))){c()}break;case"ds-text":if(!customElements.get(r(t))){l()}break}}))}y();const b=m;const x=y;export{b as DsInput,x as defineCustomElement};
|
|
1
|
+
import{p as t,H as i,c as s,h as e,a as n,t as r}from"./index.js";import{d as o}from"./p-DxeHimqk.js";import{d as a}from"./p-DUHcJWTQ.js";import{d}from"./p-DuNZGFkV.js";import{d as c}from"./p-Cpr3K41-.js";import{d as l}from"./p-Bs6SS34m.js";import{C as p}from"./p-Cx-ywr1e.js";import{c as u}from"./p-DuFm-ieS.js";const h=()=>`.ds-interaction-fill.sc-ds-input-h,.ds-interaction-fill.sc-ds-input{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-input-h::before,.ds-interaction-fill.sc-ds-input::before,.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before{z-index:1}.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::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-input-h,.ds-interaction-fill--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-input-h::before,.ds-interaction-fill--selected.sc-ds-input::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-input-h,.ds-interaction-fill--selected.sc-ds-input{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-input-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-input-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-input-h>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill.sc-ds-input>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill__content.sc-ds-input{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-input-h,.ds-interaction-fill--on-faint.sc-ds-input{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-input-h,.ds-interaction-fill--on-medium.sc-ds-input{--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-input-h,.ds-interaction-fill--on-bold.sc-ds-input{--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-input-h,.ds-interaction-fill--on-strong.sc-ds-input{--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-input-h,.ds-interaction-fill--on-translucent.sc-ds-input{--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-input-h,.ds-interaction-fill--on-inverted.sc-ds-input{--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-input-h,.ds-interaction-fill--on-media.sc-ds-input{--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-input-h,.ds-interaction-fill--on-always-dark.sc-ds-input{--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-input-h,.ds-interaction-fill--on-navigation.sc-ds-input{--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-input-h,.ds-control-inactive.sc-ds-input{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input,.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input,.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input{--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-input-h,.ds-control--sm.sc-ds-input{--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-input-h,.ds-control--xs.sc-ds-input{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-width--hug.sc-ds-input-h,.ds-control-width--hug.sc-ds-input{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-text--display-medium.sc-ds-input-h,.ds-text--display-medium.sc-ds-input{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-input-h,.ds-text--display-small.sc-ds-input{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-input-h,.ds-text--title-large.sc-ds-input{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-input-h,.ds-text--title-medium.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-input-h,.ds-text--title-small.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-input-h,.ds-text--body-large.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-input-h,.ds-text--body-medium.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-input-h,.ds-text--body-small.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-input-h,.ds-text--caption.sc-ds-input{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--display-small.ds-text--emphasis.sc-ds-input-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-input,.ds-text--display-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-input-h,.ds-text--display-small.ds-text--regular.sc-ds-input-h,.ds-text--display-medium.ds-text--regular.sc-ds-input,.ds-text--display-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-input-h,.ds-text--title-large.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-input-h,.ds-text--title-large.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--title-small.ds-text--emphasis.sc-ds-input-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-input,.ds-text--title-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-input-h,.ds-text--title-small.ds-text--regular.sc-ds-input-h,.ds-text--title-medium.ds-text--regular.sc-ds-input,.ds-text--title-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-input-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--body-large.ds-text--emphasis.sc-ds-input,.ds-text--body-medium.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-input-h,.ds-text--body-medium.ds-text--regular.sc-ds-input-h,.ds-text--body-large.ds-text--regular.sc-ds-input,.ds-text--body-medium.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-input-h,.ds-text--body-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-input-h,.ds-text--body-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-input-h,.ds-text--caption.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-input-h,.ds-text--caption.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.input-host.sc-ds-input-h{display:inline-flex;flex-direction:column;gap:var(--dimension-space-050);--ds-input-fg:var(--color-foreground-primary);--ds-input-placeholder:var(--color-foreground-secondary);--ds-input-placeholder-active:var(--color-foreground-quaternary);--ds-input-adornment-fg:var(--color-foreground-secondary);--ds-input-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input-h .input-control.sc-ds-input{width:100%}.input-control.sc-ds-input{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));overflow:hidden;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-input-fg)}.input-control--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-input-border)}.input-control--error.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.input-control.sc-ds-input:focus-within:not(.input-control--error){--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-brand)}.ds-control-inactive.sc-ds-input-h .input-control.sc-ds-input::after{background:transparent}.native-input.sc-ds-input{position:relative;z-index:2;flex:1 1 auto;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));background:transparent;border:none;border-radius:inherit;outline:none;color:var(--ds-input-fg);font-family:inherit;-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{cursor:not-allowed}.native-input.sc-ds-input:read-only:not(:disabled){cursor:default}.native-input.sc-ds-input::placeholder{color:var(--ds-input-placeholder)}.native-input.sc-ds-input:focus::placeholder{color:var(--ds-input-placeholder-active)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.input-control__prefix.sc-ds-input,.input-control__suffix.sc-ds-input{position:relative;z-index:2;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;color:var(--ds-input-adornment-fg)}.input-control__suffix--empty.sc-ds-input{display:none}.input-control__clear.sc-ds-input{position:relative;z-index:2;flex-shrink:0;align-self:center}.input-control.ds-control--md.sc-ds-input:has(.input-control__clear),.input-control.ds-control--sm.sc-ds-input:has(.input-control__clear){padding-right:var(--dimension-space-050)}.input-control.ds-control--xs.sc-ds-input:has(.input-control__clear){padding-right:0}.error-text.sc-ds-input{width:100%}`;const g={md:"md",sm:"sm",xs:"xs"};const f={md:"sm",sm:"xs",xs:"xs"};let v=0;const m=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.internals=this.attachInternals();this.generatedId=`ds-input-${++v}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage="This field is required.";this.clearLabel="Clear";this.type="text";this.inputMode="";this.enterKeyHint="";this.size="md";this.width="fill";this.hasBorder=true;this.isInactive=false;this.autoFocus=false;this.error=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false;this.hasSuffix=false;this.focused=false;this.touched=false;this.handleInput=t=>{this.value=t.target.value;this.dsChange.emit(this.value)};this.handleFocus=()=>{this.focused=true};this.handleBlur=()=>{this.focused=false;this.touched=true};this.handleClear=()=>{this.value="";this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}componentWillLoad(){this.initialValue=this.value;this.hasSuffix=Boolean(this.el.querySelector('[slot="suffix"]'));this.syncFormValue()}componentDidRender(){const t=Boolean(this.el.querySelector('[slot="suffix"]'));if(t!==this.hasSuffix)this.hasSuffix=t}syncFormValue(){const t=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(t?null:this.value);const i=this.required&&!t&&this.value.length===0;this.internals.setValidity(i?{valueMissing:true}:{},i?this.requiredMessage:"")}formDisabledCallback(t){this.formDisabled=t;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(t){this.value=typeof t==="string"?t:""}async setFocus(){this.el.querySelector("input")?.focus()}render(){const t=this.inputId??this.generatedId;const i=this.isInactive||this.disabled||this.formDisabled;const s=this.value.length>0;const r=this.value!==this.initialValue;const o=this.type==="search"&&s&&!i&&!this.readOnly;const a=this.error&&Boolean(this.errorMessage);const d=p[this.size];const c=g[this.size];const l=[this.ariaDescribedby,a?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return e(n,{key:"e5b9a970d00fae2848b4538555389bbcbbf2445f",class:{"input-host":true,"ds-control-inactive":i,[`ds-control--${this.size}`]:true,...u(this.width)},"data-disabled":i?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-required":this.required?"":undefined,"data-invalid":this.error?"":undefined,"data-filled":s?"":undefined,"data-focused":this.focused?"":undefined,"data-dirty":r?"":undefined,"data-touched":this.touched?"":undefined},e("div",{key:"a87a76858d295fe9f390280844cac3dedd49741f",class:{"input-control":true,"input-control--bordered":this.hasBorder||this.error,"input-control--error":this.error,"ds-interaction-fill":true,[`ds-control--${this.size}`]:true}},this.icon&&e("span",{key:"ceced5db76973935471488644217966997f77651",class:"input-control__prefix ds-interaction-fill__content","aria-hidden":"true"},e("ds-icon",{key:"573a5680f38a2f285b69d1c14024666bb55d59a5",name:this.icon,size:c,color:"inherit"})),e("input",{key:"14512b6e15458641247317b6c1f209c6dbd345cf",type:this.type,id:t,value:this.value,placeholder:this.placeholder,disabled:i,readOnly:this.readOnly,required:this.required,autoFocus:this.autoFocus,autoComplete:this.autoComplete,inputMode:this.inputMode||undefined,enterKeyHint:this.enterKeyHint||undefined,class:`native-input ds-text--${d.replace("text-","")} ds-text--regular ds-interaction-fill__content`,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":l,"aria-invalid":this.error?"true":undefined,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),e("span",{key:"d69edd5191e15b5246afd3e069b39864487a9394",class:{"input-control__suffix":true,"input-control__suffix--empty":!this.hasSuffix}},e("slot",{key:"891d74c4e9e15585b0e790a18db009dbba8ca84c",name:"suffix"})),o&&e("ds-button-unfilled",{key:"a20b15370c1498895c33317964fd400ab3b1422a",class:"input-control__clear",variant:"icon",size:f[this.size],icon:"CrossCircle",hasBorder:false,rounded:true,ariaLabel:this.clearLabel,onDsClick:this.handleClear})),a&&e("ds-text",{key:"855383bca70344dcd3b91de0923ca1155cfc878f",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return h()}},[326,"ds-input",{value:[1025],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],required:[516],requiredMessage:[1,"required-message"],clearLabel:[1,"clear-label"],placeholder:[1],type:[1],autoComplete:[1,"autocomplete"],inputMode:[1,"inputmode"],enterKeyHint:[1,"enterkeyhint"],size:[1],width:[1],hasBorder:[4,"has-border"],icon:[1],isInactive:[4,"is-inactive"],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],formDisabled:[32],hasSuffix:[32],focused:[32],touched:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function y(){if(typeof customElements==="undefined"){return}const t=["ds-input","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-input":if(!customElements.get(r(t))){customElements.define(r(t),m)}break;case"ds-badge":if(!customElements.get(r(t))){o()}break;case"ds-button-unfilled":if(!customElements.get(r(t))){a()}break;case"ds-icon":if(!customElements.get(r(t))){d()}break;case"ds-loader":if(!customElements.get(r(t))){c()}break;case"ds-text":if(!customElements.get(r(t))){l()}break}}))}y();const b=m;const x=y;export{b as DsInput,x as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-input.js.map
|