@ds-mo/ui 6.0.0 → 7.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 +3 -3
- package/dist/.build-stamp +1 -1
- package/dist/agent.json +401 -103
- package/dist/angular/ds-button-filled.d.ts +1 -1
- package/dist/angular/ds-button-filled.js +3 -3
- package/dist/angular/ds-button-unfilled.d.ts +1 -1
- package/dist/angular/ds-button-unfilled.js +3 -3
- package/dist/angular/ds-chip.d.ts +1 -1
- package/dist/angular/ds-chip.js +3 -3
- package/dist/angular/ds-panel-sub-nav.d.ts +15 -0
- package/dist/angular/{ds-tab-group-nav.js → ds-panel-sub-nav.js} +13 -17
- package/dist/angular/ds-tab-group.d.ts +1 -1
- package/dist/angular/ds-tab-group.js +3 -3
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +1 -1
- package/dist/angular/proxies.d.ts +1 -1
- package/dist/angular/proxies.js +1 -1
- package/dist/components/ds-app-shell.js +1 -1
- package/dist/components/ds-app-shell.js.map +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-nav.js.map +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js.map +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card-setting.js.map +1 -1
- package/dist/components/ds-card.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-legend.js.map +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-chip.js.map +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-icon.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-loader.js +1 -1
- package/dist/components/ds-loader.js.map +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/{ds-tab-group-nav.d.ts → ds-panel-sub-nav.d.ts} +4 -4
- package/dist/components/ds-panel-sub-nav.js +2 -0
- package/dist/components/ds-panel-sub-nav.js.map +1 -0
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-panel-tools.js.map +1 -1
- package/dist/components/ds-radio-group.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +1 -1
- package/dist/components/ds-shell-gradient-picker.js +1 -1
- package/dist/components/ds-shell-gradient-swatch.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tab-group.js.map +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-tag.js.map +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/{p-BmiNX9Mc.js → p-AIFkzp4M.js} +2 -2
- package/dist/components/p-B8ERbwc9.js +2 -0
- package/dist/components/{p-DhgDNluD.js.map → p-B8ERbwc9.js.map} +1 -1
- package/dist/components/p-BQq26pt9.js.map +1 -1
- package/dist/components/{p-cgo-rgl4.js → p-C7yzdJNM.js} +2 -2
- package/dist/components/{p-9Qu1ls2y.js → p-CGovlfKQ.js} +2 -2
- package/dist/components/{p-DkIbxCpi.js → p-CeyijE0j.js} +2 -2
- package/dist/components/p-DDO5W45N.js +2 -0
- package/dist/components/p-DDO5W45N.js.map +1 -0
- package/dist/components/p-DQy_H_hL.js +2 -0
- package/dist/components/p-DQy_H_hL.js.map +1 -0
- package/dist/components/p-DYotx2VC.js +2 -0
- package/dist/components/{p-B-cWYMqs.js.map → p-DYotx2VC.js.map} +1 -1
- package/dist/components/p-Dh4BBuI3.js +2 -0
- package/dist/components/p-Dh4BBuI3.js.map +1 -0
- package/dist/components/{p-bl7d1jB2.js → p-Dt1oDMJ6.js} +2 -2
- package/dist/components/{p-_OGE_E6L.js → p-KRZefifE.js} +2 -2
- package/dist/components/{p-BeIuJQO9.js → p-Ujv0jqbw.js} +2 -2
- package/dist/components/p-drBA73M_.js.map +1 -1
- package/dist/components/{p-CWd8L7Fk.js → p-qawuX6gT.js} +2 -2
- package/dist/docs/components.json +432 -669
- package/dist/react/components.d.ts +1 -1
- package/dist/react/components.js +1 -1
- package/dist/react/ds-panel-sub-nav.d.ts +12 -0
- package/dist/react/ds-panel-sub-nav.js +12 -0
- package/dist/types/components/BarNav/BarNav.d.ts +10 -4
- package/dist/types/components/ButtonFilled/ButtonFilled.d.ts +2 -0
- package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts +4 -9
- package/dist/types/components/ButtonUnfilled/index.d.ts +1 -1
- package/dist/types/components/Chip/Chip.d.ts +0 -5
- package/dist/types/components/Chip/index.d.ts +1 -1
- package/dist/types/components/PanelSubNav/PanelSubNav.d.ts +27 -0
- package/dist/types/components/PanelSubNav/panel-sub-nav-types.d.ts +10 -0
- package/dist/types/components/PanelTools/PanelTools.d.ts +2 -0
- package/dist/types/components/TabGroup/TabGroup.d.ts +3 -4
- package/dist/types/components/TabGroup/tab-item-utils.d.ts +14 -0
- package/dist/types/components.d.ts +109 -152
- package/package.json +4 -4
- package/dist/angular/ds-tab-group-nav.d.ts +0 -20
- package/dist/components/ds-tab-group-nav.js +0 -2
- package/dist/components/ds-tab-group-nav.js.map +0 -1
- package/dist/components/p-B-cWYMqs.js +0 -2
- package/dist/components/p-CxOQaZ4f.js +0 -2
- package/dist/components/p-CxOQaZ4f.js.map +0 -1
- package/dist/components/p-D5wc8lKR.js +0 -2
- package/dist/components/p-D5wc8lKR.js.map +0 -1
- package/dist/components/p-DPxfMUfH.js +0 -2
- package/dist/components/p-DPxfMUfH.js.map +0 -1
- package/dist/components/p-DhgDNluD.js +0 -2
- package/dist/react/ds-tab-group-nav.d.ts +0 -13
- package/dist/react/ds-tab-group-nav.js +0 -15
- package/dist/types/components/BarNav/bar-nav-dom-utils.d.ts +0 -11
- package/dist/types/components/TabGroupNav/TabGroupNav.d.ts +0 -46
- /package/dist/components/{p-BmiNX9Mc.js.map → p-AIFkzp4M.js.map} +0 -0
- /package/dist/components/{p-cgo-rgl4.js.map → p-C7yzdJNM.js.map} +0 -0
- /package/dist/components/{p-9Qu1ls2y.js.map → p-CGovlfKQ.js.map} +0 -0
- /package/dist/components/{p-DkIbxCpi.js.map → p-CeyijE0j.js.map} +0 -0
- /package/dist/components/{p-bl7d1jB2.js.map → p-Dt1oDMJ6.js.map} +0 -0
- /package/dist/components/{p-_OGE_E6L.js.map → p-KRZefifE.js.map} +0 -0
- /package/dist/components/{p-BeIuJQO9.js.map → p-Ujv0jqbw.js.map} +0 -0
- /package/dist/components/{p-CWd8L7Fk.js.map → p-qawuX6gT.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{T as a}from"./p-drBA73M_.js";import{r as c}from"./p-BWUTr_XN.js";import{f as h}from"./p-BBpASejH.js";import{w as u,c as l,a as f}from"./p-CrCGIx8s.js";function d(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 p=Math.abs;const y=Math.atan2;const g=Math.cos;const v=Math.max;const m=Math.min;const b=Math.sin;const x=Math.sqrt;const M=1e-12;const _=Math.PI;const w=_/2;const z=2*_;function k(t){return t>1?0:t<-1?_:Math.acos(t)}function $(t){return t>=1?w:t<=-1?-w:Math.asin(t)}function A(t){return t.innerRadius}function C(t){return t.outerRadius}function S(t){return t.startAngle}function j(t){return t.endAngle}function B(t){return t&&t.padAngle}function R(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<M)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)/x(a*a+c*c),u=h*c,l=-h*a,f=t+u,d=n+l,p=e+u,y=i+l,g=(f+p)/2,m=(d+y)/2,b=p-f,M=y-d,_=b*b+M*M,w=s-r,z=f*y-p*d,k=(M<0?-1:1)*x(v(0,w*w*_-z*z)),$=(z*M-b*k)/_,A=(-z*b-M*k)/_,C=(z*M+b*k)/_,S=(-z*b+M*k)/_,j=$-g,B=A-m,R=C-g,L=S-m;if(j*j+B*B>R*R+L*L)$=C,A=S;return{cx:$,cy:A,x01:-u,y01:-l,x11:$*(s/w-1),y11:A*(s/w-1)}}function N(){var t=A,n=C,e=l(0),i=null,s=S,r=j,o=B,a=null,c=u(h);function h(){var h,u,l=+t.apply(this,arguments),f=+n.apply(this,arguments),d=s.apply(this,arguments)-w,v=r.apply(this,arguments)-w,A=p(v-d),C=v>d;if(!a)a=h=c();if(f<l)u=f,f=l,l=u;if(!(f>M))a.moveTo(0,0);else if(A>z-M){a.moveTo(f*g(d),f*b(d));a.arc(0,0,f,d,v,!C);if(l>M){a.moveTo(l*g(v),l*b(v));a.arc(0,0,l,v,d,C)}}else{var S=d,j=v,B=d,N=v,P=A,E=A,F=o.apply(this,arguments)/2,H=F>M&&(i?+i.apply(this,arguments):x(l*l+f*f)),O=m(p(f-l)/2,+e.apply(this,arguments)),T=O,D=O,V,G;if(H>M){var I=$(H/l*b(F)),U=$(H/f*b(F));if((P-=I*2)>M)I*=C?1:-1,B+=I,N-=I;else P=0,B=N=(d+v)/2;if((E-=U*2)>M)U*=C?1:-1,S+=U,j-=U;else E=0,S=j=(d+v)/2}var W=f*g(S),X=f*b(S),q=l*g(N),J=l*b(N);if(O>M){var K=f*g(j),Q=f*b(j),Y=l*g(B),Z=l*b(B),tt;if(A<_){if(tt=R(W,X,Y,Z,K,Q,q,J)){var nt=W-tt[0],et=X-tt[1],it=K-tt[0],st=Q-tt[1],rt=1/b(k((nt*it+et*st)/(x(nt*nt+et*et)*x(it*it+st*st)))/2),ot=x(tt[0]*tt[0]+tt[1]*tt[1]);T=m(O,(l-ot)/(rt-1));D=m(O,(f-ot)/(rt+1))}else{T=D=0}}}if(!(E>M))a.moveTo(W,X);else if(D>M){V=L(Y,Z,W,X,f,D,C);G=L(K,Q,q,J,f,D,C);a.moveTo(V.cx+V.x01,V.cy+V.y01);if(D<O)a.arc(V.cx,V.cy,D,y(V.y01,V.x01),y(G.y01,G.x01),!C);else{a.arc(V.cx,V.cy,D,y(V.y01,V.x01),y(V.y11,V.x11),!C);a.arc(0,0,f,y(V.cy+V.y11,V.cx+V.x11),y(G.cy+G.y11,G.cx+G.x11),!C);a.arc(G.cx,G.cy,D,y(G.y11,G.x11),y(G.y01,G.x01),!C)}}else a.moveTo(W,X),a.arc(0,0,f,S,j,!C);if(!(l>M)||!(P>M))a.lineTo(q,J);else if(T>M){V=L(q,J,K,Q,l,-T,C);G=L(W,X,Y,Z,l,-T,C);a.lineTo(V.cx+V.x01,V.cy+V.y01);if(T<O)a.arc(V.cx,V.cy,T,y(V.y01,V.x01),y(G.y01,G.x01),!C);else{a.arc(V.cx,V.cy,T,y(V.y01,V.x01),y(V.y11,V.x11),!C);a.arc(0,0,l,y(V.cy+V.y11,V.cx+V.x11),y(G.cy+G.y11,G.cx+G.x11),C);a.arc(G.cx,G.cy,T,y(G.y11,G.x11),y(G.y01,G.x01),!C)}}else a.arc(0,0,l,N,B,C)}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-_/2;return[g(i)*e,b(i)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:l(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:l(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:l(+t),h):e};h.padRadius=function(t){return arguments.length?(i=t==null?null:typeof t==="function"?t:l(+t),h):i};h.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:l(+t),h):s};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:l(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:l(+t),h):o};h.context=function(t){return arguments.length?(a=t==null?null:t,h):a};return h}function P(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function E(t){return t}function F(){var t=E,n=P,e=null,i=l(0),s=l(z),r=l(0);function o(o){var a,c=(o=f(o)).length,h,u,l=0,d=new Array(c),p=new Array(c),y=+i.apply(this,arguments),g=Math.min(z,Math.max(-z,s.apply(this,arguments)-y)),v,m=Math.min(Math.abs(g)/c,r.apply(this,arguments)),b=m*(g<0?-1:1),x;for(a=0;a<c;++a){if((x=p[d[a]=a]=+t(o[a],a,o))>0){l+=x}}if(n!=null)d.sort((function(t,e){return n(p[t],p[e])}));else if(e!=null)d.sort((function(t,n){return e(o[t],o[n])}));for(a=0,u=l?(g-c*b)/l:0;a<c;++a,y=v){h=d[a],x=p[h],v=y+(x>0?x*u:0)+b,p[h]={data:o[h],index:a,value:x,startAngle:y,endAngle:v,padAngle:m}}return p}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:l(+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:l(+t),o):i};o.endAngle=function(t){return arguments.length?(s=typeof t==="function"?t:l(+t),o):s};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:l(+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}.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}.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}`;const O=.25;const T=0;const D=.82;const V=128;const G=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=a.size200;this.cornerRadius=a.radius025;this.gap=1;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText="";this.measuredSize=V;this.resizeObserver=null}get isFillMode(){return this.size==null||!Number.isFinite(this.size)||this.size<=0}get fillMinPx(){return c(a.donutFillMin,V)}get fillMaxPx(){return c(a.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)}componentDidRender(){if(this.isFillMode&&!this.resizeObserver){this.syncResizeObserver()}const t=this.resolvedSize;const n=t/2;const e=c(this.thickness,a.size200);const i=n-e;const s=i*2*D;const r=this.data.reduce(((t,n)=>t+n.value),0);const o=this.centerValue??h(r,this.locale);if(this.valueTextEl){const t=d(this.valueTextEl,o,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const u=this.centerCaption??"";if(this.captionTextEl&&u){const t=d(this.captionTextEl,u,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.resolvedSize;const n=t/2;const e=c(this.thickness,a.size200);const r=c(this.cornerRadius,a.radius025);const u=n-e;const l=this.data.reduce(((t,n)=>t+n.value),0);const f=l<=0;const d=this.activeLabel??this.hoveredLabel;const p=N().innerRadius(u).outerRadius(n).cornerRadius(r).padAngle(this.gap*Math.PI/180);const y=f?[]:F().value((t=>t.value)).sort(null)(this.data);const g=f?N().innerRadius(u).outerRadius(n)({startAngle:0,endAngle:Math.PI*2}):null;const v=c(a.lineheightXl,32);const m=c(a.lineheightMd,20);const b=this.centerCaption?n-(T+m)/2:n;const x=n+(v+T)/2;const M=this.centerValue??h(l,this.locale);const _=this.centerCaption??"";const w=this.isFillMode;return i(s,{key:"303c99c5bd28996248f5df9fde4229702d045c04",class:{"chart-donut":true,"chart-donut--fill":w,"chart-donut--fixed":!w},style:!w?{width:`${t}px`,height:`${t}px`}:undefined},i("div",{key:"c3a31ad5a48d1fe3cb4e8ab875a9b3c1a46dfe31",class:"chart-donut__wrapper",style:!w?{width:`${t}px`,height:`${t}px`}:undefined},i("svg",{key:"0d6b7d190ee5c5eadaa43f143c0eff9569b965a6",class:"chart-donut__svg",viewBox:`0 0 ${t} ${t}`,width:t,height:t},i("g",{key:"413f862853f5886ed895826d69ac534ed81ef3c9",transform:`translate(${n}, ${n})`},f?i("path",{d:g??undefined,fill:"var(--color-background-faint-neutral)","aria-label":this.noDataLabel}):y.map(((t,n)=>{const e=this.data[n];const s=d!=null&&e.label!==d;return i("path",{key:e.label,d:p(t)??undefined,fill:e.color??o(n),opacity:s?O:1,tabindex:0,role:"img","aria-label":`${e.label}: ${e.value}`,onMouseEnter:()=>this.handleHover(e),onMouseLeave:()=>this.handleHover(null),onFocus:()=>this.handleHover(e),onBlur:()=>this.handleHover(null)})}))),i("text",{key:"ff03bfe7a80341a30ca9e2b37debf223b8de5793",class:"chart-donut__center-value",x:n,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||M),_&&i("text",{key:"637ee8864206b3e8996956d895c42260a2351f83",class:"chart-donut__center-caption",x:n,y:x,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||_))))}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],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],displayedValueText:[32],displayedCaptionText:[32],measuredSize:[32]},undefined,{size:[{onSizePropChange:0}]}]);function I(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(r(t))){customElements.define(r(t),G)}break}}))}I();const U=G;const W=I;export{U as DsChartDonut,W 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{T as a}from"./p-drBA73M_.js";import{r as c}from"./p-BWUTr_XN.js";import{f as h}from"./p-BBpASejH.js";import{w as u,c as l,a as f}from"./p-CrCGIx8s.js";function d(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 p=Math.abs;const y=Math.atan2;const g=Math.cos;const v=Math.max;const m=Math.min;const b=Math.sin;const x=Math.sqrt;const M=1e-12;const _=Math.PI;const w=_/2;const z=2*_;function k(t){return t>1?0:t<-1?_:Math.acos(t)}function $(t){return t>=1?w:t<=-1?-w:Math.asin(t)}function A(t){return t.innerRadius}function C(t){return t.outerRadius}function S(t){return t.startAngle}function j(t){return t.endAngle}function B(t){return t&&t.padAngle}function R(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<M)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)/x(a*a+c*c),u=h*c,l=-h*a,f=t+u,d=n+l,p=e+u,y=i+l,g=(f+p)/2,m=(d+y)/2,b=p-f,M=y-d,_=b*b+M*M,w=s-r,z=f*y-p*d,k=(M<0?-1:1)*x(v(0,w*w*_-z*z)),$=(z*M-b*k)/_,A=(-z*b-M*k)/_,C=(z*M+b*k)/_,S=(-z*b+M*k)/_,j=$-g,B=A-m,R=C-g,L=S-m;if(j*j+B*B>R*R+L*L)$=C,A=S;return{cx:$,cy:A,x01:-u,y01:-l,x11:$*(s/w-1),y11:A*(s/w-1)}}function N(){var t=A,n=C,e=l(0),i=null,s=S,r=j,o=B,a=null,c=u(h);function h(){var h,u,l=+t.apply(this,arguments),f=+n.apply(this,arguments),d=s.apply(this,arguments)-w,v=r.apply(this,arguments)-w,A=p(v-d),C=v>d;if(!a)a=h=c();if(f<l)u=f,f=l,l=u;if(!(f>M))a.moveTo(0,0);else if(A>z-M){a.moveTo(f*g(d),f*b(d));a.arc(0,0,f,d,v,!C);if(l>M){a.moveTo(l*g(v),l*b(v));a.arc(0,0,l,v,d,C)}}else{var S=d,j=v,B=d,N=v,P=A,E=A,F=o.apply(this,arguments)/2,H=F>M&&(i?+i.apply(this,arguments):x(l*l+f*f)),O=m(p(f-l)/2,+e.apply(this,arguments)),T=O,D=O,V,G;if(H>M){var I=$(H/l*b(F)),U=$(H/f*b(F));if((P-=I*2)>M)I*=C?1:-1,B+=I,N-=I;else P=0,B=N=(d+v)/2;if((E-=U*2)>M)U*=C?1:-1,S+=U,j-=U;else E=0,S=j=(d+v)/2}var W=f*g(S),X=f*b(S),q=l*g(N),J=l*b(N);if(O>M){var K=f*g(j),Q=f*b(j),Y=l*g(B),Z=l*b(B),tt;if(A<_){if(tt=R(W,X,Y,Z,K,Q,q,J)){var nt=W-tt[0],et=X-tt[1],it=K-tt[0],st=Q-tt[1],rt=1/b(k((nt*it+et*st)/(x(nt*nt+et*et)*x(it*it+st*st)))/2),ot=x(tt[0]*tt[0]+tt[1]*tt[1]);T=m(O,(l-ot)/(rt-1));D=m(O,(f-ot)/(rt+1))}else{T=D=0}}}if(!(E>M))a.moveTo(W,X);else if(D>M){V=L(Y,Z,W,X,f,D,C);G=L(K,Q,q,J,f,D,C);a.moveTo(V.cx+V.x01,V.cy+V.y01);if(D<O)a.arc(V.cx,V.cy,D,y(V.y01,V.x01),y(G.y01,G.x01),!C);else{a.arc(V.cx,V.cy,D,y(V.y01,V.x01),y(V.y11,V.x11),!C);a.arc(0,0,f,y(V.cy+V.y11,V.cx+V.x11),y(G.cy+G.y11,G.cx+G.x11),!C);a.arc(G.cx,G.cy,D,y(G.y11,G.x11),y(G.y01,G.x01),!C)}}else a.moveTo(W,X),a.arc(0,0,f,S,j,!C);if(!(l>M)||!(P>M))a.lineTo(q,J);else if(T>M){V=L(q,J,K,Q,l,-T,C);G=L(W,X,Y,Z,l,-T,C);a.lineTo(V.cx+V.x01,V.cy+V.y01);if(T<O)a.arc(V.cx,V.cy,T,y(V.y01,V.x01),y(G.y01,G.x01),!C);else{a.arc(V.cx,V.cy,T,y(V.y01,V.x01),y(V.y11,V.x11),!C);a.arc(0,0,l,y(V.cy+V.y11,V.cx+V.x11),y(G.cy+G.y11,G.cx+G.x11),C);a.arc(G.cx,G.cy,T,y(G.y11,G.x11),y(G.y01,G.x01),!C)}}else a.arc(0,0,l,N,B,C)}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-_/2;return[g(i)*e,b(i)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:l(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:l(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:l(+t),h):e};h.padRadius=function(t){return arguments.length?(i=t==null?null:typeof t==="function"?t:l(+t),h):i};h.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:l(+t),h):s};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:l(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:l(+t),h):o};h.context=function(t){return arguments.length?(a=t==null?null:t,h):a};return h}function P(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function E(t){return t}function F(){var t=E,n=P,e=null,i=l(0),s=l(z),r=l(0);function o(o){var a,c=(o=f(o)).length,h,u,l=0,d=new Array(c),p=new Array(c),y=+i.apply(this,arguments),g=Math.min(z,Math.max(-z,s.apply(this,arguments)-y)),v,m=Math.min(Math.abs(g)/c,r.apply(this,arguments)),b=m*(g<0?-1:1),x;for(a=0;a<c;++a){if((x=p[d[a]=a]=+t(o[a],a,o))>0){l+=x}}if(n!=null)d.sort((function(t,e){return n(p[t],p[e])}));else if(e!=null)d.sort((function(t,n){return e(o[t],o[n])}));for(a=0,u=l?(g-c*b)/l:0;a<c;++a,y=v){h=d[a],x=p[h],v=y+(x>0?x*u:0)+b,p[h]={data:o[h],index:a,value:x,startAngle:y,endAngle:v,padAngle:m}}return p}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:l(+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:l(+t),o):i};o.endAngle=function(t){return arguments.length?(s=typeof t==="function"?t:l(+t),o):s};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:l(+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}.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}.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}`;const O=.25;const T=0;const D=.82;const V=128;const G=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=a.size200;this.cornerRadius=a.radius025;this.gap=1;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText="";this.measuredSize=V;this.resizeObserver=null}get isFillMode(){return this.size==null||!Number.isFinite(this.size)||this.size<=0}get fillMinPx(){return c(a.donutFillMin,V)}get fillMaxPx(){return c(a.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)}componentDidRender(){if(this.isFillMode&&!this.resizeObserver){this.syncResizeObserver()}const t=this.resolvedSize;const n=t/2;const e=c(this.thickness,a.size200);const i=n-e;const s=i*2*D;const r=this.data.reduce(((t,n)=>t+n.value),0);const o=this.centerValue??h(r,this.locale);if(this.valueTextEl){const t=d(this.valueTextEl,o,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const u=this.centerCaption??"";if(this.captionTextEl&&u){const t=d(this.captionTextEl,u,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.resolvedSize;const n=t/2;const e=c(this.thickness,a.size200);const r=c(this.cornerRadius,a.radius025);const u=n-e;const l=this.data.reduce(((t,n)=>t+n.value),0);const f=l<=0;const d=this.activeLabel??this.hoveredLabel;const p=N().innerRadius(u).outerRadius(n).cornerRadius(r).padAngle(this.gap*Math.PI/180);const y=f?[]:F().value((t=>t.value)).sort(null)(this.data);const g=f?N().innerRadius(u).outerRadius(n)({startAngle:0,endAngle:Math.PI*2}):null;const v=c(a.lineheightXl,32);const m=c(a.lineheightMd,20);const b=this.centerCaption?n-(T+m)/2:n;const x=n+(v+T)/2;const M=this.centerValue??h(l,this.locale);const _=this.centerCaption??"";const w=this.isFillMode;return i(s,{key:"498a05c7eb5545aa176c6ee146beb1782b36e413",class:{"chart-donut":true,"chart-donut--fill":w,"chart-donut--fixed":!w},style:!w?{width:`${t}px`,height:`${t}px`}:undefined},i("div",{key:"5635a46bc4ccf060bad1e92a9ee974031729f2df",class:"chart-donut__wrapper",style:!w?{width:`${t}px`,height:`${t}px`}:undefined},i("svg",{key:"172ba13285438acf759711fcfbf31433d0ae6904",class:"chart-donut__svg",viewBox:`0 0 ${t} ${t}`,width:t,height:t},i("g",{key:"4ca454df081b07a6df5cd64682d5f1ad96b3459a",transform:`translate(${n}, ${n})`},f?i("path",{d:g??undefined,fill:"var(--color-background-faint-neutral)","aria-label":this.noDataLabel}):y.map(((t,n)=>{const e=this.data[n];const s=d!=null&&e.label!==d;return i("path",{key:e.label,d:p(t)??undefined,fill:e.color??o(n),opacity:s?O:1,tabindex:0,role:"img","aria-label":`${e.label}: ${e.value}`,onMouseEnter:()=>this.handleHover(e),onMouseLeave:()=>this.handleHover(null),onFocus:()=>this.handleHover(e),onBlur:()=>this.handleHover(null)})}))),i("text",{key:"214fc4778312acd6a0ff2c46797e46d4e49a6821",class:"chart-donut__center-value",x:n,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||M),_&&i("text",{key:"8f9ee7c123c7127549ea12ec8628f54afd2ccf76",class:"chart-donut__center-caption",x:n,y:x,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||_))))}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],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],displayedValueText:[32],displayedCaptionText:[32],measuredSize:[32]},undefined,{size:[{onSizePropChange:0}]}]);function I(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(r(t))){customElements.define(r(t),G)}break}}))}I();const U=G;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 i,h as t,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as c}from"./p-CWd8L7Fk.js";import{f as a}from"./p-BBpASejH.js";const d=()=>`.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before,.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before{z-index:1}.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chart-legend-h,.ds-interaction-fill--bordered.sc-ds-chart-legend{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chart-legend-h,.ds-interaction-fill--selected.sc-ds-chart-legend{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chart-legend-h>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill.sc-ds-chart-legend>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill__content.sc-ds-chart-legend{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-chart-legend-h,.ds-interaction-fill--on-medium.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chart-legend-h,.ds-interaction-fill--on-bold.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chart-legend-h,.ds-interaction-fill--on-strong.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-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(50%, 1fr) auto auto;row-gap:var(--dimension-space-050)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}@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;margin-right:var(--dimension-space-075)}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0}.chart-legend__label.sc-ds-chart-legend{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));margin-right:var(--dimension-space-200);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chart-legend__percentage.sc-ds-chart-legend{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));text-align:right}.chart-legend__value.sc-ds-chart-legend{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));margin-right:var(--dimension-space-200);text-align:right;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}`;const l=.25;const h=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=i(this,"dsItemHover");this.dsItemClick=i(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,n)=>{this.dsItemClick.emit({item:e,originalEvent:n})}}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,n)=>e+(n.value??0)),0);const n=this.activeLabel??this.hoveredLabel;return t(s,{key:"4af078b912f6538fe14f1f2611ba3ccd5660dd47",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true}},t("ul",{key:"395d0163471591d3f36f1d536d61613c2a36d52a",class:"chart-legend__list",onMouseLeave:()=>this.handleHover(null)},this.items.map(((i,s)=>{const r=n!=null&&i.label!==n;const c=i.href?"a":"div";return t("li",{class:"chart-legend__list-item",key:i.label},t(c,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!i.href,"ds-control--md":true,"ds-interaction-fill":true,"ds-focus-ring-inset":!!i.href},style:{opacity:r?String(l):"1"},href:i.href,onClick:i.href?e=>this.handleClick(i,e):undefined,onMouseEnter:()=>this.handleHover(i),onFocus:()=>this.handleHover(i),onBlur:()=>this.handleHover(null)},t("span",{class:"chart-legend__swatch-box"},t("span",{class:"chart-legend__swatch",style:{backgroundColor:i.color??o(s)}})),t("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:i.label},i.label),i.value!=null&&t("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,title:String(i.value)},a(i.value,this.locale)),i.value!=null&&this.showPercentage&&t("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary"},(e?i.value/e*100:0).toFixed(1),"%")))}))))}static get style(){return d()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],activeLabel:[1,"active-label"],hoveredLabel:[32]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(r(e))){customElements.define(r(e),h)}break;case"ds-text":if(!customElements.get(r(e))){c()}break}}))}g();const v=h;const f=g;export{v as DsChartLegend,f as defineCustomElement};
|
|
1
|
+
import{p as e,H as n,c as i,h as t,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as c}from"./p-qawuX6gT.js";import{f as a}from"./p-BBpASejH.js";const d=()=>`.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-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(50%, 1fr) auto auto;row-gap:var(--dimension-space-050)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}@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;margin-right:var(--dimension-space-075)}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0}.chart-legend__label.sc-ds-chart-legend{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));margin-right:var(--dimension-space-200);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chart-legend__percentage.sc-ds-chart-legend{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));text-align:right}.chart-legend__value.sc-ds-chart-legend{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));margin-right:var(--dimension-space-200);text-align:right;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}`;const l=.25;const h=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=i(this,"dsItemHover");this.dsItemClick=i(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,n)=>{this.dsItemClick.emit({item:e,originalEvent:n})}}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,n)=>e+(n.value??0)),0);const n=this.activeLabel??this.hoveredLabel;return t(s,{key:"1b34bde17db51fcb686561fbe6e88c09fcfecf9a",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true}},t("ul",{key:"df91dc8d0ce962de0586bec8dc4b8f51fe46683e",class:"chart-legend__list",onMouseLeave:()=>this.handleHover(null)},this.items.map(((i,s)=>{const r=n!=null&&i.label!==n;const c=i.href?"a":"div";return t("li",{class:"chart-legend__list-item",key:i.label},t(c,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!i.href,"ds-control--md":true,"ds-interaction-fill":true,"ds-focus-ring-inset":!!i.href},style:{opacity:r?String(l):"1"},href:i.href,onClick:i.href?e=>this.handleClick(i,e):undefined,onMouseEnter:()=>this.handleHover(i),onFocus:()=>this.handleHover(i),onBlur:()=>this.handleHover(null)},t("span",{class:"chart-legend__swatch-box"},t("span",{class:"chart-legend__swatch",style:{backgroundColor:i.color??o(s)}})),t("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:i.label},i.label),i.value!=null&&t("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,title:String(i.value)},a(i.value,this.locale)),i.value!=null&&this.showPercentage&&t("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary"},(e?i.value/e*100:0).toFixed(1),"%")))}))))}static get style(){return d()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],activeLabel:[1,"active-label"],hoveredLabel:[32]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(r(e))){customElements.define(r(e),h)}break;case"ds-text":if(!customElements.get(r(e))){c()}break}}))}g();const v=h;const f=g;export{v as DsChartLegend,f as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chart-legend.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["chartLegendCss","DIMMED_OPACITY","ChartLegend","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","direction","showPercentage","activeLabel","hoveredLabel","handleClick","item","originalEvent","dsItemClick","emit","handleHover","label","dsItemHover","render","total","reduce","sum","value","highlightLabel","h","Host","key","class","onMouseLeave","map","i","isDimmed","RowTag","href","style","opacity","String","onClick","e","undefined","onMouseEnter","onFocus","onBlur","backgroundColor","color","categoryColor","as","variant","lineTruncation","title","formatCompactNumber","locale","toFixed"],"sources":["src/wc/components/ChartLegend/ChartLegend.css?tag=ds-chart-legend&encapsulation=scoped","src/wc/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n\n:host {\n display: block;\n font-family: var(--typography-font-family);\n user-select: none;\n}\n\n.chart-legend__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so it can be hovered/clicked\n as a whole row while its children still align to the list's shared grid columns. */\n.chart-legend__list-item {\n display: contents;\n}\n\n:host(.chart-legend--vertical) .chart-legend__list {\n display: grid;\n grid-template-columns: auto minmax(50%, 1fr) auto auto;\n row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n display: flex;\n flex-wrap: wrap;\n gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n display: flex;\n}\n\n/*\n * Density: md control recipe (height / pad / radius / label inset).\n * Hover/press: `.ds-interaction-fill` (token overlay on ::after).\n */\n.chart-legend__item {\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n align-items: center;\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n text-decoration: none;\n color: inherit;\n transition: opacity var(--effect-motion-short-2);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .chart-legend__item {\n transition: none;\n }\n}\n\n.chart-legend__item--interactive {\n cursor: pointer;\n}\n\n/* Raise row content above interaction fills (positive z-index on util layers). */\n.chart-legend__item > * {\n position: relative;\n z-index: 2;\n}\n\n.chart-legend__swatch-box {\n width: var(--dimension-size-250);\n height: var(--dimension-size-250);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: var(--dimension-space-075);\n}\n\n.chart-legend__swatch {\n width: var(--dimension-space-150);\n height: var(--dimension-space-150);\n border-radius: var(--dimension-radius-025);\n flex-shrink: 0;\n}\n\n.chart-legend__label {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n margin-right: var(--dimension-space-200);\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.chart-legend__percentage {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n text-align: right;\n}\n\n.chart-legend__value {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n margin-right: var(--dimension-space-200);\n text-align: right;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber } from '../../utils';\nimport type { ChartLegendItem } from '../../utils/chart-types';\n\nexport type ChartLegendDirection = 'vertical' | 'horizontal';\n\nconst DIMMED_OPACITY = 0.25;\n\n/**\n * Base legend for `ds-chart-*` components. Webapp's Overview widgets each style\n * legends differently (list w/ values, compact chips, bare swatches, external\n * stat callouts) — this covers the common \"swatch + label + optional value\" case.\n * Consumers who need a different treatment skip this component entirely and\n * render their own markup against the same `ChartDatum[]` data.\n */\n@Component({\n tag: 'ds-chart-legend',\n styleUrl: 'ChartLegend.css',\n scoped: true,\n})\nexport class ChartLegend {\n @Prop() locale: string | undefined;\n /** Legend entries. Set as a JS property (not an HTML attribute). */\n @Prop() items: ChartLegendItem[] = [];\n @Prop() direction: ChartLegendDirection = 'vertical';\n /** Show each item's share of the total (of items with a `value`) alongside its count. */\n @Prop() showPercentage: boolean = true;\n /**\n * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n * chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other\n * rows' opacity (like a chart dimming its other slices) — it never shows the hover-fill,\n * since that's reserved for a real pointer/keyboard interaction on this row.\n */\n @Prop() activeLabel: string | null = null;\n\n /** Own pointer/focus hover, kept separate from `activeLabel` so the hover-fill (a \"you can\n * click here\" affordance) never shows just because an external row was synced in. */\n @State() private hoveredLabel: string | null = null;\n\n /** Fires on row hover/focus with the item, or `null` on leave/blur. */\n @Event() dsItemHover!: EventEmitter<ChartLegendItem | null>;\n /** Fires when a deep-linkable row (`item.href` set) is activated. */\n @Event() dsItemClick!: EventEmitter<{ item: ChartLegendItem; originalEvent: MouseEvent }>;\n\n private handleHover(item: ChartLegendItem | null) {\n this.hoveredLabel = item?.label ?? null;\n this.dsItemHover.emit(item);\n }\n\n private handleClick = (item: ChartLegendItem, originalEvent: MouseEvent) => {\n this.dsItemClick.emit({ item, originalEvent });\n };\n\n render() {\n const total = this.items.reduce((sum, item) => sum + (item.value ?? 0), 0);\n // Highlight/dim from either this component's own hover or an externally-synced label\n // (e.g. a sibling ds-chart-donut slice) — same mechanism ds-chart-donut uses for its slices.\n const highlightLabel = this.activeLabel ?? this.hoveredLabel;\n\n return (\n <Host class={{ 'chart-legend': true, [`chart-legend--${this.direction}`]: true }}>\n {/* mouseleave lives on the list, not each row — the row-gap between items is still\n inside the list's box, so crossing it while moving between rows never fires this.\n Only actually leaving the whole list does, and that clears with no delay. */}\n <ul class=\"chart-legend__list\" onMouseLeave={() => this.handleHover(null)}>\n {this.items.map((item, i) => {\n const isDimmed = highlightLabel != null && item.label !== highlightLabel;\n const RowTag = item.href ? 'a' : 'div';\n\n return (\n <li class=\"chart-legend__list-item\" key={item.label}>\n <RowTag\n class={{\n 'chart-legend__item': true,\n 'chart-legend__item--interactive': !!item.href,\n 'ds-control--md': true,\n 'ds-interaction-fill': true,\n 'ds-focus-ring-inset': !!item.href,\n }}\n style={{ opacity: isDimmed ? String(DIMMED_OPACITY) : '1' }}\n href={item.href}\n onClick={item.href ? (e: MouseEvent) => this.handleClick(item, e) : undefined}\n onMouseEnter={() => this.handleHover(item)}\n onFocus={() => this.handleHover(item)}\n onBlur={() => this.handleHover(null)}\n >\n <span class=\"chart-legend__swatch-box\">\n <span class=\"chart-legend__swatch\" style={{ backgroundColor: item.color ?? categoryColor(i) }} />\n </span>\n <ds-text\n class=\"chart-legend__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"secondary\"\n lineTruncation={1}\n title={item.label}\n >\n {item.label}\n </ds-text>\n {item.value != null && (\n <ds-text\n class=\"chart-legend__value\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"primary\"\n lineTruncation={1}\n title={String(item.value)}\n >\n {formatCompactNumber(item.value, this.locale)}\n </ds-text>\n )}\n {item.value != null && this.showPercentage && (\n <ds-text class=\"chart-legend__percentage\" as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n {(total ? (item.value / total) * 100 : 0).toFixed(1)}%\n </ds-text>\n )}\n </RowTag>\n </li>\n );\n })}\n </ul>\n </Host>\n );\n }\n}\n"],"mappings":"8KAAA,MAAMA,EAAiB,IAAM,60TCO7B,MAAMC,EAAiB,I,MAcVC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,0HAQUC,KAAAC,MAA2B,GAC3BD,KAAAE,UAAkC,WAElCF,KAAAG,eAA0B,KAO1BH,KAAAI,YAA6B,KAIpBJ,KAAAK,aAA8B,KAYvCL,KAAAM,YAAc,CAACC,EAAuBC,KAC5CR,KAAKS,YAAYC,KAAK,CAAEH,OAAMC,iBAAgB,CA0EjD,CAhFS,WAAAG,CAAYJ,GAClBP,KAAKK,aAAeE,GAAMK,OAAS,KACnCZ,KAAKa,YAAYH,KAAKH,E,CAOxB,MAAAO,GACE,MAAMC,EAAQf,KAAKC,MAAMe,QAAO,CAACC,EAAKV,IAASU,GAAOV,EAAKW,OAAS,IAAI,GAGxE,MAAMC,EAAiBnB,KAAKI,aAAeJ,KAAKK,aAEhD,OACEe,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAE,eAAgB,KAAM,CAAC,iBAAiBvB,KAAKE,aAAc,OAIxEkB,EAAA,MAAAE,IAAA,2CAAIC,MAAM,qBAAqBC,aAAc,IAAMxB,KAAKW,YAAY,OACjEX,KAAKC,MAAMwB,KAAI,CAAClB,EAAMmB,KACrB,MAAMC,EAAWR,GAAkB,MAAQZ,EAAKK,QAAUO,EAC1D,MAAMS,EAASrB,EAAKsB,KAAO,IAAM,MAEjC,OACET,EAAA,MAAIG,MAAM,0BAA0BD,IAAKf,EAAKK,OAC5CQ,EAACQ,EAAM,CACLL,MAAO,CACL,qBAAsB,KACtB,oCAAqChB,EAAKsB,KAC1C,iBAAkB,KAClB,sBAAuB,KACvB,wBAAyBtB,EAAKsB,MAEhCC,MAAO,CAAEC,QAASJ,EAAWK,OAAOtC,GAAkB,KACtDmC,KAAMtB,EAAKsB,KACXI,QAAS1B,EAAKsB,KAAQK,GAAkBlC,KAAKM,YAAYC,EAAM2B,GAAKC,UACpEC,aAAc,IAAMpC,KAAKW,YAAYJ,GACrC8B,QAAS,IAAMrC,KAAKW,YAAYJ,GAChC+B,OAAQ,IAAMtC,KAAKW,YAAY,OAE/BS,EAAA,QAAMG,MAAM,4BACVH,EAAA,QAAMG,MAAM,uBAAuBO,MAAO,CAAES,gBAAiBhC,EAAKiC,OAASC,EAAcf,OAE3FN,EAAA,WACEG,MAAM,sBACNmB,GAAG,OACHC,QAAQ,mBACRH,MAAM,YACNI,eAAgB,EAChBC,MAAOtC,EAAKK,OAEXL,EAAKK,OAEPL,EAAKW,OAAS,MACbE,EAAA,WACEG,MAAM,sBACNmB,GAAG,OACHC,QAAQ,mBACRH,MAAM,UACNI,eAAgB,EAChBC,MAAOb,OAAOzB,EAAKW,QAElB4B,EAAoBvC,EAAKW,MAAOlB,KAAK+C,SAGzCxC,EAAKW,OAAS,MAAQlB,KAAKG,gBAC1BiB,EAAA,WAASG,MAAM,2BAA2BmB,GAAG,OAAOC,QAAQ,mBAAmBH,MAAM,YACjFzB,EAASR,EAAKW,MAAQH,EAAS,IAAM,GAAGiC,QAAQ,GAAE,MAIvD,K","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["chartLegendCss","DIMMED_OPACITY","ChartLegend","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","direction","showPercentage","activeLabel","hoveredLabel","handleClick","item","originalEvent","dsItemClick","emit","handleHover","label","dsItemHover","render","total","reduce","sum","value","highlightLabel","h","Host","key","class","onMouseLeave","map","i","isDimmed","RowTag","href","style","opacity","String","onClick","e","undefined","onMouseEnter","onFocus","onBlur","backgroundColor","color","categoryColor","as","variant","lineTruncation","title","formatCompactNumber","locale","toFixed"],"sources":["src/wc/components/ChartLegend/ChartLegend.css?tag=ds-chart-legend&encapsulation=scoped","src/wc/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n\n:host {\n display: block;\n font-family: var(--typography-font-family);\n user-select: none;\n}\n\n.chart-legend__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so it can be hovered/clicked\n as a whole row while its children still align to the list's shared grid columns. */\n.chart-legend__list-item {\n display: contents;\n}\n\n:host(.chart-legend--vertical) .chart-legend__list {\n display: grid;\n grid-template-columns: auto minmax(50%, 1fr) auto auto;\n row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n display: flex;\n flex-wrap: wrap;\n gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n display: flex;\n}\n\n/*\n * Density: md control recipe (height / pad / radius / label inset).\n * Hover/press: `.ds-interaction-fill` (token overlay on ::after).\n */\n.chart-legend__item {\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n align-items: center;\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n text-decoration: none;\n color: inherit;\n transition: opacity var(--effect-motion-short-2);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .chart-legend__item {\n transition: none;\n }\n}\n\n.chart-legend__item--interactive {\n cursor: pointer;\n}\n\n/* Raise row content above interaction fills (positive z-index on util layers). */\n.chart-legend__item > * {\n position: relative;\n z-index: 2;\n}\n\n.chart-legend__swatch-box {\n width: var(--dimension-size-250);\n height: var(--dimension-size-250);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: var(--dimension-space-075);\n}\n\n.chart-legend__swatch {\n width: var(--dimension-space-150);\n height: var(--dimension-space-150);\n border-radius: var(--dimension-radius-025);\n flex-shrink: 0;\n}\n\n.chart-legend__label {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n margin-right: var(--dimension-space-200);\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.chart-legend__percentage {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n text-align: right;\n}\n\n.chart-legend__value {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n margin-right: var(--dimension-space-200);\n text-align: right;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber } from '../../utils';\nimport type { ChartLegendItem } from '../../utils/chart-types';\n\nexport type ChartLegendDirection = 'vertical' | 'horizontal';\n\nconst DIMMED_OPACITY = 0.25;\n\n/**\n * Base legend for `ds-chart-*` components. Webapp's Overview widgets each style\n * legends differently (list w/ values, compact chips, bare swatches, external\n * stat callouts) — this covers the common \"swatch + label + optional value\" case.\n * Consumers who need a different treatment skip this component entirely and\n * render their own markup against the same `ChartDatum[]` data.\n */\n@Component({\n tag: 'ds-chart-legend',\n styleUrl: 'ChartLegend.css',\n scoped: true,\n})\nexport class ChartLegend {\n @Prop() locale: string | undefined;\n /** Legend entries. Set as a JS property (not an HTML attribute). */\n @Prop() items: ChartLegendItem[] = [];\n @Prop() direction: ChartLegendDirection = 'vertical';\n /** Show each item's share of the total (of items with a `value`) alongside its count. */\n @Prop() showPercentage: boolean = true;\n /**\n * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n * chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other\n * rows' opacity (like a chart dimming its other slices) — it never shows the hover-fill,\n * since that's reserved for a real pointer/keyboard interaction on this row.\n */\n @Prop() activeLabel: string | null = null;\n\n /** Own pointer/focus hover, kept separate from `activeLabel` so the hover-fill (a \"you can\n * click here\" affordance) never shows just because an external row was synced in. */\n @State() private hoveredLabel: string | null = null;\n\n /** Fires on row hover/focus with the item, or `null` on leave/blur. */\n @Event() dsItemHover!: EventEmitter<ChartLegendItem | null>;\n /** Fires when a deep-linkable row (`item.href` set) is activated. */\n @Event() dsItemClick!: EventEmitter<{ item: ChartLegendItem; originalEvent: MouseEvent }>;\n\n private handleHover(item: ChartLegendItem | null) {\n this.hoveredLabel = item?.label ?? null;\n this.dsItemHover.emit(item);\n }\n\n private handleClick = (item: ChartLegendItem, originalEvent: MouseEvent) => {\n this.dsItemClick.emit({ item, originalEvent });\n };\n\n render() {\n const total = this.items.reduce((sum, item) => sum + (item.value ?? 0), 0);\n // Highlight/dim from either this component's own hover or an externally-synced label\n // (e.g. a sibling ds-chart-donut slice) — same mechanism ds-chart-donut uses for its slices.\n const highlightLabel = this.activeLabel ?? this.hoveredLabel;\n\n return (\n <Host class={{ 'chart-legend': true, [`chart-legend--${this.direction}`]: true }}>\n {/* mouseleave lives on the list, not each row — the row-gap between items is still\n inside the list's box, so crossing it while moving between rows never fires this.\n Only actually leaving the whole list does, and that clears with no delay. */}\n <ul class=\"chart-legend__list\" onMouseLeave={() => this.handleHover(null)}>\n {this.items.map((item, i) => {\n const isDimmed = highlightLabel != null && item.label !== highlightLabel;\n const RowTag = item.href ? 'a' : 'div';\n\n return (\n <li class=\"chart-legend__list-item\" key={item.label}>\n <RowTag\n class={{\n 'chart-legend__item': true,\n 'chart-legend__item--interactive': !!item.href,\n 'ds-control--md': true,\n 'ds-interaction-fill': true,\n 'ds-focus-ring-inset': !!item.href,\n }}\n style={{ opacity: isDimmed ? String(DIMMED_OPACITY) : '1' }}\n href={item.href}\n onClick={item.href ? (e: MouseEvent) => this.handleClick(item, e) : undefined}\n onMouseEnter={() => this.handleHover(item)}\n onFocus={() => this.handleHover(item)}\n onBlur={() => this.handleHover(null)}\n >\n <span class=\"chart-legend__swatch-box\">\n <span class=\"chart-legend__swatch\" style={{ backgroundColor: item.color ?? categoryColor(i) }} />\n </span>\n <ds-text\n class=\"chart-legend__label\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"secondary\"\n lineTruncation={1}\n title={item.label}\n >\n {item.label}\n </ds-text>\n {item.value != null && (\n <ds-text\n class=\"chart-legend__value\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"primary\"\n lineTruncation={1}\n title={String(item.value)}\n >\n {formatCompactNumber(item.value, this.locale)}\n </ds-text>\n )}\n {item.value != null && this.showPercentage && (\n <ds-text class=\"chart-legend__percentage\" as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n {(total ? (item.value / total) * 100 : 0).toFixed(1)}%\n </ds-text>\n )}\n </RowTag>\n </li>\n );\n })}\n </ul>\n </Host>\n );\n }\n}\n"],"mappings":"8KAAA,MAAMA,EAAiB,IAAM,i/TCO7B,MAAMC,EAAiB,I,MAcVC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,0HAQUC,KAAAC,MAA2B,GAC3BD,KAAAE,UAAkC,WAElCF,KAAAG,eAA0B,KAO1BH,KAAAI,YAA6B,KAIpBJ,KAAAK,aAA8B,KAYvCL,KAAAM,YAAc,CAACC,EAAuBC,KAC5CR,KAAKS,YAAYC,KAAK,CAAEH,OAAMC,iBAAgB,CA0EjD,CAhFS,WAAAG,CAAYJ,GAClBP,KAAKK,aAAeE,GAAMK,OAAS,KACnCZ,KAAKa,YAAYH,KAAKH,E,CAOxB,MAAAO,GACE,MAAMC,EAAQf,KAAKC,MAAMe,QAAO,CAACC,EAAKV,IAASU,GAAOV,EAAKW,OAAS,IAAI,GAGxE,MAAMC,EAAiBnB,KAAKI,aAAeJ,KAAKK,aAEhD,OACEe,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAE,eAAgB,KAAM,CAAC,iBAAiBvB,KAAKE,aAAc,OAIxEkB,EAAA,MAAAE,IAAA,2CAAIC,MAAM,qBAAqBC,aAAc,IAAMxB,KAAKW,YAAY,OACjEX,KAAKC,MAAMwB,KAAI,CAAClB,EAAMmB,KACrB,MAAMC,EAAWR,GAAkB,MAAQZ,EAAKK,QAAUO,EAC1D,MAAMS,EAASrB,EAAKsB,KAAO,IAAM,MAEjC,OACET,EAAA,MAAIG,MAAM,0BAA0BD,IAAKf,EAAKK,OAC5CQ,EAACQ,EAAM,CACLL,MAAO,CACL,qBAAsB,KACtB,oCAAqChB,EAAKsB,KAC1C,iBAAkB,KAClB,sBAAuB,KACvB,wBAAyBtB,EAAKsB,MAEhCC,MAAO,CAAEC,QAASJ,EAAWK,OAAOtC,GAAkB,KACtDmC,KAAMtB,EAAKsB,KACXI,QAAS1B,EAAKsB,KAAQK,GAAkBlC,KAAKM,YAAYC,EAAM2B,GAAKC,UACpEC,aAAc,IAAMpC,KAAKW,YAAYJ,GACrC8B,QAAS,IAAMrC,KAAKW,YAAYJ,GAChC+B,OAAQ,IAAMtC,KAAKW,YAAY,OAE/BS,EAAA,QAAMG,MAAM,4BACVH,EAAA,QAAMG,MAAM,uBAAuBO,MAAO,CAAES,gBAAiBhC,EAAKiC,OAASC,EAAcf,OAE3FN,EAAA,WACEG,MAAM,sBACNmB,GAAG,OACHC,QAAQ,mBACRH,MAAM,YACNI,eAAgB,EAChBC,MAAOtC,EAAKK,OAEXL,EAAKK,OAEPL,EAAKW,OAAS,MACbE,EAAA,WACEG,MAAM,sBACNmB,GAAG,OACHC,QAAQ,mBACRH,MAAM,UACNI,eAAgB,EAChBC,MAAOb,OAAOzB,EAAKW,QAElB4B,EAAoBvC,EAAKW,MAAOlB,KAAK+C,SAGzCxC,EAAKW,OAAS,MAAQlB,KAAKG,gBAC1BiB,EAAA,WAASG,MAAM,2BAA2BmB,GAAG,OAAOC,QAAQ,mBAAmBH,MAAM,YACjFzB,EAASR,EAAKW,MAAQH,EAAS,IAAM,GAAGiC,QAAQ,GAAE,MAIvD,K","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as n,h as i,a as
|
|
1
|
+
import{p as t,H as n,h as i,a as e,t as s}from"./index.js";import{c as r}from"./p-CMv_7vFs.js";import{m as a,p as o,l as c}from"./p-CzBnvtcz.js";import{w as l,c as h,a as f}from"./p-CrCGIx8s.js";function u(t){this._context=t}u.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._point=0},lineEnd:function(){if(this._line||this._line!==0&&this._point===1)this._context.closePath();this._line=1-this._line},point:function(t,n){t=+t,n=+n;switch(this._point){case 0:this._point=1;this._line?this._context.lineTo(t,n):this._context.moveTo(t,n);break;case 1:this._point=2;default:this._context.lineTo(t,n);break}}};function d(t){return new u(t)}function p(t){return t[0]}function y(t){return t[1]}function m(t,n){var i=h(true),e=null,s=d,r=null,a=l(o);t=typeof t==="function"?t:t===undefined?p:h(t);n=typeof n==="function"?n:n===undefined?y:h(n);function o(o){var c,l=(o=f(o)).length,h,u=false,d;if(e==null)r=s(d=a());for(c=0;c<=l;++c){if(!(c<l&&i(h=o[c],c,o))===u){if(u=!u)r.lineStart();else r.lineEnd()}if(u)r.point(+t(h,c,o),+n(h,c,o))}if(d)return r=null,d+""||null}o.x=function(n){return arguments.length?(t=typeof n==="function"?n:h(+n),o):t};o.y=function(t){return arguments.length?(n=typeof t==="function"?t:h(+t),o):n};o.defined=function(t){return arguments.length?(i=typeof t==="function"?t:h(!!t),o):i};o.curve=function(t){return arguments.length?(s=t,e!=null&&(r=s(e)),o):s};o.context=function(t){return arguments.length?(t==null?e=r=null:r=s(e=t),o):e};return o}const b=()=>`.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-tertiary);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 g={top:16,right:16,bottom:24,left:32};const _=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.series=[];this.categories=[];this.width=480;this.height=240;this.showPoints=true}render(){const t=this.width-g.left-g.right;const n=this.height-g.top-g.bottom;const s=this.series.flatMap((t=>t.data));const l=a(s)??0;const h=o().domain(this.categories.map(((t,n)=>n))).range([0,t]);const f=c().domain([0,l||1]).range([n,0]).nice();const u=m().x(((t,n)=>h(n)??0)).y((t=>f(t)));const d=f.ticks(4);return i(e,{key:"329766dcc99830689bef83e29352f7d9bd32af26",class:"chart-line"},i("svg",{key:"bb0b38476fbd30d30f6e26ff7bdb5d2f6ab1971b",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:"341e07d65ec29bf8a53ab73dad2d768e3bc165c7",transform:`translate(${g.left}, ${g.top})`},d.map((n=>i("g",{key:`grid-${n}`,transform:`translate(0, ${f(n)})`},i("line",{class:"chart-line__gridline",x1:0,x2:t}),i("text",{class:"chart-line__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},n)))),this.categories.map(((t,e)=>i("text",{key:`x-${t}`,class:"chart-line__axis-label",x:h(e)??0,y:n+16,"text-anchor":"middle"},t))),this.series.map(((t,n)=>{const e=t.color??r(n);return i("g",{key:t.name},i("path",{class:"chart-line__path",d:u(t.data)??undefined,stroke:e}),this.showPoints&&t.data.map(((n,s)=>i("circle",{key:`${t.name}-${s}`,class:"chart-line__point",cx:h(s)??0,cy:f(n),r:3,fill:e}))))})))))}static get style(){return b()}},[2,"ds-chart-line",{series:[16],categories:[16],width:[2],height:[2],showPoints:[4,"show-points"]}]);function x(){if(typeof customElements==="undefined"){return}const t=["ds-chart-line"];t.forEach((t=>{switch(t){case"ds-chart-line":if(!customElements.get(s(t))){customElements.define(s(t),_)}break}}))}x();const k=_;const v=x;export{k as DsChartLine,v as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chart-line.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as i,h as t,a as o,t as r}from"./index.js";import{d as c}from"./p-
|
|
1
|
+
import{p as e,H as s,c as i,h as t,a as o,t as r}from"./index.js";import{d as c}from"./p-qawuX6gT.js";const a=()=>`.ds-control-inactive.sc-ds-checkbox-h,.ds-control-inactive.sc-ds-checkbox{opacity:0.25;pointer-events:none;cursor:not-allowed}.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.box.sc-ds-checkbox{width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);flex-shrink:0;border:var(--dimension-stroke-width-018) solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background-color var(--effect-motion-short-2), border-color var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-bold)}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let n=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.internals=this.attachInternals();this.labelId=`ds-checkbox-label-${++n}`;this.checked=false;this.value="on";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.indeterminate=false;this.isInactive=false;this.initialChecked=false;this.formDisabled=false;this.handleActivate=()=>{if(this.isInactive||this.disabled||this.formDisabled)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}componentWillLoad(){this.initialChecked=this.checked;this.syncFormValue()}syncFormValue(){const e=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(!e&&this.checked?this.value:null);const s=this.required&&!e&&!this.checked;this.internals.setValidity(s?{valueMissing:true}:{},s?this.requiredMessage:"")}formDisabledCallback(e){this.formDisabled=e;this.syncFormValue()}formResetCallback(){this.checked=this.initialChecked}render(){const e=this.isInactive||this.disabled||this.formDisabled;const s=this.checked||this.indeterminate;return t(o,{key:"d27c227f6d1d0c8fbb1d5c4c550e682306abc68e",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":e?"true":undefined,"aria-labelledby":this.labelId,tabIndex:e?-1:0,class:{checkbox:true,"ds-control-inactive":e},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},t("span",{key:"9d9379da8368f83466b7837b1e2a56380c17b384",class:{box:true,"box--marked":s}},s&&t("span",{key:"204eb50ca63db3a5d1637e384a53e0cb9e6670da",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),t("ds-text",{key:"748ea66b6a76e05b56474c087480a0cf7ddc8988",class:"checkbox__label",as:"span",variant:"text-body-medium",textId:this.labelId},this.label))}static get formAssociated(){return true}static get watchers(){return{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return a()}},[66,"ds-checkbox",{label:[1],checked:[1028],name:[513],value:[1],disabled:[516],required:[516],requiredMessage:[1,"required-message"],indeterminate:[4],isInactive:[4,"is-inactive"],formDisabled:[32]},undefined,{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox","ds-text"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),d)}break;case"ds-text":if(!customElements.get(r(e))){c()}break}}))}h();const l=d;const b=h;export{l as DsCheckbox,b as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-checkbox.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as o,H as r,c as i,h as n,a as c,t}from"./index.js";import{d as s}from"./p-9Qu1ls2y.js";import{d as a}from"./p-CWd8L7Fk.js";import{C as e}from"./p-Cx-ywr1e.js";const d=()=>`.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-radius:var(--dimension-radius-025)}.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-radius:var(--dimension-radius-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-control-radius:var(--dimension-radius-025)}.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);--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-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))}.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--intent-neutral.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.tag--intent-ai.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.tag--intent-ai.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-chip-h{cursor:pointer;outline:none}.tag__label.sc-ds-chip{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:0;min-width:0}.tag__icon-slot.sc-ds-chip{display:contents}.tag__icon-slot.sc-ds-chip-s>*,.tag__icon-slot .sc-ds-chip-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.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)}.tag__remove.sc-ds-chip-s>*,.tag__remove .sc-ds-chip-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.ds-control-inactive.sc-ds-chip-h,.ds-control-inactive.sc-ds-chip{opacity:0.25;pointer-events:none;cursor:not-allowed}.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)}`;const l={md:"md",sm:"sm",xs:"xs"};const g=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsRemove=i(this,"dsRemove");this.state="default";this.size="md";this.rounded=false;this.removable=true;this.isInactive=false;this.removeLabel="Remove {label}";this.handleRemove=o=>{o.stopPropagation();if(this.isInactive)return;this.dsRemove.emit()}}render(){const o=e[this.size];const r=l[this.size];const i=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;return n(c,{key:"635a2e4c39d5a5cccfad38da1b3a8df570ad265c",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":this.removable,"ds-interaction-fill":!this.isInactive&&this.removable,"ds-interaction-fill--on-medium":this.background==="medium","ds-interaction-fill--on-bold":this.background==="bold","ds-interaction-fill--on-strong":this.background==="strong","ds-interaction-fill--on-always-dark":this.background==="always-dark","ds-control-inactive":this.isInactive},style:i,"aria-disabled":this.isInactive?"true":undefined},n("ds-text",{key:"2be2299f1c524cd305c620c9ccc53e4344d3caef",class:"tag__label",as:"span",variant:o,color:"inherit"},this.label),this.removable&&n("button",{key:"5d26ef6abab99583e235423a7112827f8cbc1250",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("slot",{key:"762116e6dc590fb664a94a419db9647876540aa1",name:"remove-icon"},n("ds-icon",{key:"d14c7c5654a7d16cae89d0ebd5539429c649b904",class:"tag__remove-x",name:"Cross",size:r,color:"inherit"}))))}static get style(){return d()}},[262,"ds-chip",{label:[1],state:[1],size:[1],rounded:[4],removable:[4],maxWidth:[8,"max-width"],isInactive:[4,"is-inactive"],background:[1],removeLabel:[1,"remove-label"]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-chip","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-chip":if(!customElements.get(t(o))){customElements.define(t(o),g)}break;case"ds-icon":if(!customElements.get(t(o))){s()}break;case"ds-text":if(!customElements.get(t(o))){a()}break}}))}u();const h=g;const v=u;export{h as DsChip,v as defineCustomElement};
|
|
1
|
+
import{p as o,H as r,c as i,h as n,a as c,t}from"./index.js";import{d as s}from"./p-CGovlfKQ.js";import{d as a}from"./p-qawuX6gT.js";import{C as e}from"./p-Cx-ywr1e.js";const d=()=>`.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-radius:var(--dimension-radius-025)}.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-radius:var(--dimension-radius-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-control-radius:var(--dimension-radius-025)}.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))}.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--intent-neutral.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.tag--intent-ai.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.tag--intent-ai.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-chip-h{cursor:pointer;outline:none}.tag__label.sc-ds-chip{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:0;min-width:0}.tag__icon-slot.sc-ds-chip{display:contents}.tag__icon-slot.sc-ds-chip-s>*,.tag__icon-slot .sc-ds-chip-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.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)}.tag__remove.sc-ds-chip-s>*,.tag__remove .sc-ds-chip-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.ds-control-inactive.sc-ds-chip-h,.ds-control-inactive.sc-ds-chip{opacity:0.25;pointer-events:none;cursor:not-allowed}.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)}.chip.sc-ds-chip-h .tag__label.sc-ds-chip{flex-shrink:1;overflow:hidden;text-overflow:ellipsis}`;const l={md:"md",sm:"sm",xs:"xs"};const g=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsRemove=i(this,"dsRemove");this.state="default";this.size="md";this.rounded=false;this.isInactive=false;this.removeLabel="Remove {label}";this.handleRemove=o=>{o.stopPropagation();if(this.isInactive)return;this.dsRemove.emit()}}render(){const o=e[this.size];const r=l[this.size];const i=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;return n(c,{key:"bc040a8bb5f26d0890840c3dee049c62162109d2",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:i,"aria-disabled":this.isInactive?"true":undefined},n("ds-text",{key:"c33b6e5f67618a2587d1c27baf038ba5c8f74dca",class:"tag__label",as:"span",variant:o,color:"inherit"},this.label),n("button",{key:"c760b9a9b376b350c5ed3c287ff46b0610910354",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:"8026d3718660909d384ed924030f966521c70e41",class:"tag__remove-x",name:"Cross",size:r,color:"inherit"})))}static get style(){return d()}},[2,"ds-chip",{label:[1],state:[1],size:[1],rounded:[4],maxWidth:[8,"max-width"],isInactive:[4,"is-inactive"],removeLabel:[1,"remove-label"]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-chip","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-chip":if(!customElements.get(t(o))){customElements.define(t(o),g)}break;case"ds-icon":if(!customElements.get(t(o))){s()}break;case"ds-text":if(!customElements.get(t(o))){a()}break}}))}u();const h=g;const v=u;export{h as DsChip,v as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-chip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["chipCss","ICON_SIZE","md","sm","xs","Chip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","state","size","rounded","
|
|
1
|
+
{"version":3,"names":["chipCss","ICON_SIZE","md","sm","xs","Chip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","state","size","rounded","isInactive","removeLabel","handleRemove","e","stopPropagation","dsRemove","emit","render","textVariant","CONTROL_TEXT_VARIANT","iconSize","maxWidthStyle","maxWidth","undefined","h","Host","key","class","tag","chip","style","as","variant","color","label","type","onClick","replace","disabled","name"],"sources":["src/wc/components/Chip/Chip.css?tag=ds-chip&encapsulation=scoped","src/wc/components/Chip/Chip.tsx"],"sourcesContent":["@import '../Tag/Tag.css';\n@import '../../utils/control-inactive.css';\n\n/*\n * Semantic state colors — Chip’s differentiator from Tag.\n * All states use the faint contrast weight; hue comes from the state.\n */\n:host(.chip--default) {\n background-color: var(--color-background-faint-neutral);\n color: var(--color-foreground-bold-neutral);\n}\n\n:host(.chip--active) {\n background-color: var(--color-background-faint-brand);\n color: var(--color-foreground-bold-brand);\n}\n\n:host(.chip--error) {\n background-color: var(--color-background-faint-negative);\n color: var(--color-foreground-bold-negative);\n}\n\n:host(.chip--caution) {\n background-color: var(--color-background-faint-caution);\n color: var(--color-foreground-bold-caution);\n}\n\n:host(.chip) .tag__label {\n flex-shrink: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT } from '../../utils';\n\n/**\n * Semantic chip state — replaces Tag’s intent × contrast matrix.\n * - `default` — neutral faint\n * - `active` — brand faint\n * - `error` — negative faint\n * - `caution` — caution faint\n */\nexport type ChipState = 'default' | 'active' | 'error' | 'caution';\nexport type ChipSize = 'md' | 'sm' | 'xs';\n\n/** Dismiss `ds-icon` size — same iconography metrics as Tag’s leading icon. */\nconst ICON_SIZE: Record<ChipSize, 'md' | 'sm' | 'xs'> = {\n md: 'md',\n sm: 'sm',\n xs: 'xs',\n};\n\n/**\n * Removable chip — same density recipe as Tag, but colored by semantic `state`\n * (not intent × contrast). Not a toggle/select control; the only intentional\n * action is remove.\n */\n@Component({\n tag: 'ds-chip',\n styleUrl: 'Chip.css',\n scoped: true,\n})\nexport class Chip {\n @Prop() label!: string;\n /** Semantic color state. @default 'default' */\n @Prop() state: ChipState = 'default';\n @Prop() size: ChipSize = 'md';\n @Prop() rounded: boolean = false;\n @Prop() maxWidth: string | number | undefined;\n @Prop() isInactive: boolean = false;\n /** Accessible remove action. Use `{label}` as the chip-label placeholder. */\n @Prop() removeLabel: string = 'Remove {label}';\n\n /** Fired when the remove button is clicked. */\n @Event() dsRemove!: EventEmitter<void>;\n\n private handleRemove = (e: MouseEvent) => {\n e.stopPropagation();\n if (this.isInactive) return;\n this.dsRemove.emit();\n };\n\n render() {\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const iconSize = ICON_SIZE[this.size];\n\n const maxWidthStyle = this.maxWidth != null\n ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n : undefined;\n\n return (\n <Host\n class={{\n 'tag': true,\n 'chip': true,\n [`chip--${this.state}`]: true,\n [`tag--size-${this.size}`]: true,\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'tag--rounded': this.rounded,\n 'tag--removable': true,\n /* Hover overlay on the chip surface — dismiss is the only action. */\n 'ds-interaction-fill': !this.isInactive,\n 'ds-control-inactive': this.isInactive,\n }}\n style={maxWidthStyle}\n aria-disabled={this.isInactive ? 'true' : undefined}\n >\n <ds-text class=\"tag__label\" as=\"span\" variant={textVariant} color=\"inherit\">\n {this.label}\n </ds-text>\n <button\n type=\"button\"\n class=\"tag__remove ds-focus-ring-inset\"\n onClick={this.handleRemove}\n aria-label={this.removeLabel.replace('{label}', this.label)}\n disabled={this.isInactive || undefined}\n >\n <ds-icon class=\"tag__remove-x\" name=\"Cross\" size={iconSize} color=\"inherit\"></ds-icon>\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"yKAAA,MAAMA,EAAU,IAAM,88bCctB,MAAMC,EAAkD,CACtDC,GAAI,KACJC,GAAI,KACJC,GAAI,M,MAaOC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,6EAQUC,KAAAC,MAAmB,UACnBD,KAAAE,KAAiB,KACjBF,KAAAG,QAAmB,MAEnBH,KAAAI,WAAsB,MAEtBJ,KAAAK,YAAsB,iBAKtBL,KAAAM,aAAgBC,IACtBA,EAAEC,kBACF,GAAIR,KAAKI,WAAY,OACrBJ,KAAKS,SAASC,MAAM,CA6CvB,CA1CC,MAAAC,GACE,MAAMC,EAAcC,EAAqBb,KAAKE,MAC9C,MAAMY,EAAWvB,EAAUS,KAAKE,MAEhC,MAAMa,EAAgBf,KAAKgB,UAAY,KACnC,CAAEA,gBAAiBhB,KAAKgB,WAAa,SAAW,GAAGhB,KAAKgB,aAAehB,KAAKgB,UAC5EC,UAEJ,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,IAAO,KACPC,KAAQ,KACR,CAAC,SAASvB,KAAKC,SAAU,KACzB,CAAC,aAAaD,KAAKE,QAAS,KAC5B,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,eAAgBF,KAAKG,QACrB,iBAAkB,KAElB,uBAAwBH,KAAKI,WAC7B,sBAAuBJ,KAAKI,YAE9BoB,MAAOT,EAAa,gBACLf,KAAKI,WAAa,OAASa,WAE1CC,EAAA,WAAAE,IAAA,2CAASC,MAAM,aAAaI,GAAG,OAAOC,QAASd,EAAae,MAAM,WAC/D3B,KAAK4B,OAERV,EAAA,UAAAE,IAAA,2CACES,KAAK,SACLR,MAAM,kCACNS,QAAS9B,KAAKM,aAAY,aACdN,KAAKK,YAAY0B,QAAQ,UAAW/B,KAAK4B,OACrDI,SAAUhC,KAAKI,YAAca,WAE7BC,EAAA,WAAAE,IAAA,2CAASC,MAAM,gBAAgBY,KAAK,QAAQ/B,KAAMY,EAAUa,MAAM,a","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as i,H as e,h as d,a as r,t as s}from"./index.js";const a=()=>`.sc-ds-divider-h{--_divider-color:var(--color-divider-divider);--_divider-inset:0;--_divider-length:100%;display:block;flex-shrink:0;width:var(--_divider-length);height:var(--dimension-stroke-width-012);margin:0 var(--_divider-inset);border:none;background-color:var(--_divider-color)}.divider--vertical.sc-ds-divider-h{width:var(--dimension-stroke-width-012);height:var(--_divider-length);min-height:var(--dimension-stroke-width-012);margin:var(--_divider-inset) 0;align-self:stretch}.divider--vertical.divider--custom-length.sc-ds-divider-h{align-self:center}[surface='on-bold-background'].sc-ds-divider-h,.divider--surface-on-bold-background.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-bold-background)}[surface='on-strong-background'].sc-ds-divider-h,.divider--surface-on-strong-background.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-strong-background)}[surface='on-medium-background'].sc-ds-divider-h,.divider--surface-on-medium-background.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-medium-background)}[surface='on-translucent-background'].sc-ds-divider-h,.divider--surface-on-translucent-background.sc-ds-divider-h{--_divider-color:var(--color-translucent-divider)}[surface='navigation'].sc-ds-divider-h,.divider--surface-navigation.sc-ds-divider-h{--_divider-color:var(--color-navigation-divider)}[surface='media'].sc-ds-divider-h,.divider--surface-media.sc-ds-divider-h{--_divider-color:var(--color-media-divider)}[surface='always-dark'].sc-ds-divider-h,.divider--surface-always-dark.sc-ds-divider-h{--_divider-color:var(--color-always-dark-divider)}[surface='inverted'].sc-ds-divider-h,.divider--surface-inverted.sc-ds-divider-h{--_divider-color:var(--color-inverted-divider)}`;const n={none:"0","space-000":"var(--dimension-space-000)","space-012":"var(--dimension-space-012)","space-025":"var(--dimension-space-025)","space-050":"var(--dimension-space-050)","space-075":"var(--dimension-space-075)","space-100":"var(--dimension-space-100)","space-125":"var(--dimension-space-125)","space-150":"var(--dimension-space-150)","space-175":"var(--dimension-space-175)","space-200":"var(--dimension-space-200)","space-250":"var(--dimension-space-250)","space-300":"var(--dimension-space-300)","space-400":"var(--dimension-space-400)","space-600":"var(--dimension-space-600)","space-800":"var(--dimension-space-800)"};const c=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.orientation="horizontal";this.surface="default";this.inset="none";this.length="auto";this.semantic=false}resolveInset(){return Object.prototype.hasOwnProperty.call(n,this.inset)?n[this.inset]:this.inset}resolveLength(){return this.length==="auto"||this.length==="full"?"100%":this.length}render(){const i=this.orientation==="vertical";const e=this.length!=="auto"&&this.length!=="full";return d(r,{key:"
|
|
1
|
+
import{p as i,H as e,h as d,a as r,t as s}from"./index.js";const a=()=>`.sc-ds-divider-h{--_divider-color:var(--color-divider-divider);--_divider-inset:0;--_divider-length:100%;display:block;flex-shrink:0;width:var(--_divider-length);height:var(--dimension-stroke-width-012);margin:0 var(--_divider-inset);border:none;background-color:var(--_divider-color)}.divider--vertical.sc-ds-divider-h{width:var(--dimension-stroke-width-012);height:var(--_divider-length);min-height:var(--dimension-stroke-width-012);margin:var(--_divider-inset) 0;align-self:stretch}.divider--vertical.divider--custom-length.sc-ds-divider-h{align-self:center}[surface='on-bold-background'].sc-ds-divider-h,.divider--surface-on-bold-background.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-bold-background)}[surface='on-strong-background'].sc-ds-divider-h,.divider--surface-on-strong-background.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-strong-background)}[surface='on-medium-background'].sc-ds-divider-h,.divider--surface-on-medium-background.sc-ds-divider-h{--_divider-color:var(--color-divider-divider-on-medium-background)}[surface='on-translucent-background'].sc-ds-divider-h,.divider--surface-on-translucent-background.sc-ds-divider-h{--_divider-color:var(--color-translucent-divider)}[surface='navigation'].sc-ds-divider-h,.divider--surface-navigation.sc-ds-divider-h{--_divider-color:var(--color-navigation-divider)}[surface='media'].sc-ds-divider-h,.divider--surface-media.sc-ds-divider-h{--_divider-color:var(--color-media-divider)}[surface='always-dark'].sc-ds-divider-h,.divider--surface-always-dark.sc-ds-divider-h{--_divider-color:var(--color-always-dark-divider)}[surface='inverted'].sc-ds-divider-h,.divider--surface-inverted.sc-ds-divider-h{--_divider-color:var(--color-inverted-divider)}`;const n={none:"0","space-000":"var(--dimension-space-000)","space-012":"var(--dimension-space-012)","space-025":"var(--dimension-space-025)","space-050":"var(--dimension-space-050)","space-075":"var(--dimension-space-075)","space-100":"var(--dimension-space-100)","space-125":"var(--dimension-space-125)","space-150":"var(--dimension-space-150)","space-175":"var(--dimension-space-175)","space-200":"var(--dimension-space-200)","space-250":"var(--dimension-space-250)","space-300":"var(--dimension-space-300)","space-400":"var(--dimension-space-400)","space-600":"var(--dimension-space-600)","space-800":"var(--dimension-space-800)"};const c=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.orientation="horizontal";this.surface="default";this.inset="none";this.length="auto";this.semantic=false}resolveInset(){return Object.prototype.hasOwnProperty.call(n,this.inset)?n[this.inset]:this.inset}resolveLength(){return this.length==="auto"||this.length==="full"?"100%":this.length}render(){const i=this.orientation==="vertical";const e=this.length!=="auto"&&this.length!=="full";return d(r,{key:"a9e79ad8e31b1c7e49c33427e73dca4eee885096",role:this.semantic?"separator":undefined,"aria-orientation":this.semantic?this.orientation:undefined,"aria-hidden":this.semantic?undefined:"true",class:{divider:true,"divider--vertical":i,"divider--custom-length":e,[`divider--surface-${this.surface}`]:true},style:{"--_divider-inset":this.resolveInset(),"--_divider-length":this.resolveLength()}})}static get style(){return a()}},[2,"ds-divider",{orientation:[1],surface:[1],inset:[1],length:[1],semantic:[4]}]);function o(){if(typeof customElements==="undefined"){return}const i=["ds-divider"];i.forEach((i=>{switch(i){case"ds-divider":if(!customElements.get(s(i))){customElements.define(s(i),c)}break}}))}o();const t=c;const v=o;export{t as DsDivider,v as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-divider.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as e,h as s,a,t as
|
|
1
|
+
import{p as t,H as e,h as s,a,t as n}from"./index.js";import{d as o}from"./p-qawuX6gT.js";const c=()=>`.sc-ds-empty-state-h{display:block;width:100%;height:100%}.empty-state.sc-ds-empty-state{display:flex;align-items:center;justify-content:center;height:100%;width:100%}`;const d={"no-content":"No page contents to display.","no-results":"No results found.","no-results-filter":"No results found. Please update search criteria.","no-access":"You don't have access to this page."};const i=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.type="no-content";this.messages={}}render(){return s(a,{key:"98684bd5df0efab0a39c83da58debb93333dc022"},s("ds-text",{key:"5035c906e3d8155cb49ecf40351aa8dfd2b41d50",class:"empty-state",as:"p",variant:"text-body-medium",color:"secondary"},this.message||this.messages[this.type]||d[this.type]))}static get style(){return c()}},[2,"ds-empty-state",{type:[1],message:[1],messages:[16]}]);function r(){if(typeof customElements==="undefined"){return}const t=["ds-empty-state","ds-text"];t.forEach((t=>{switch(t){case"ds-empty-state":if(!customElements.get(n(t))){customElements.define(n(t),i)}break;case"ds-text":if(!customElements.get(n(t))){o()}break}}))}r();const m=i;const p=r;export{m as DsEmptyState,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-empty-state.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,h as
|
|
1
|
+
import{p as e,H as s,h as d,a as t,t as f}from"./index.js";import{d as i}from"./p-qawuX6gT.js";const c=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}`;let a=0;const l=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++a}`}render(){const e=this.fieldId||this.resolvedId;return d(t,{key:"a97788486184586be5f89df4f5e231e4e3fa7fb0"},d("div",{key:"cead456fd4fcd43bc676074f3c9b983830e2ac9d",class:"field"},d("ds-text",{key:"9203a054d940c2593d4c22bc0fd7defd916931f2",as:"label",variant:"text-body-small",emphasis:true,for:e},this.label),d("slot",{key:"02139c86f9ddadfe6c77d474ab88adef13d83660"})))}static get style(){return c()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-field","ds-text"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(f(e))){customElements.define(f(e),l)}break;case"ds-text":if(!customElements.get(f(e))){i()}break}}))}n();const o=l;const r=n;export{o as DsField,r as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-field.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{I as
|
|
1
|
+
import{I as o,d as s}from"./p-CGovlfKQ.js";const t=o;const p=s;export{t as DsIcon,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-icon.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as e,c as s,h as i,a,t as r}from"./index.js";import{d}from"./p-CWd8L7Fk.js";const n=()=>`.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{opacity:0.25;pointer-events:none;cursor:not-allowed}.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-container.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.wrapper.sc-ds-input{width:100%;height:var(--dimension-size-400);display:flex;align-items:center;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-depressed-sm);box-sizing:border-box}.wrapper.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-foreground-bold-brand)}.wrapper--error.sc-ds-input{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.wrapper--error.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.row.sc-ds-input{display:flex;align-items:center;width:100%;height:100%;gap:var(--dimension-space-050)}.native-input.sc-ds-input{flex:1;min-width:0;height:100%;padding:0 var(--dimension-space-100);background:transparent;border:none;outline:none;font-family:inherit;color:var(--color-foreground-primary);border-radius:var(--dimension-radius-075);-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{cursor:not-allowed}.native-input.sc-ds-input::placeholder{color:var(--color-foreground-secondary)}.native-input.sc-ds-input:focus::placeholder{color:var(--color-foreground-tertiary)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.clear-btn.sc-ds-input{flex-shrink:0;margin-right:var(--dimension-space-050);padding:var(--dimension-space-050);border:none;background:none;cursor:pointer;color:var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.clear-btn.sc-ds-input:hover{background-color:var(--color-interaction-hover)}.suffix.sc-ds-input{display:flex;align-items:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.suffix.sc-ds-input:empty{display:none}`;let l=0;const o=t(class t extends e{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-${++l}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.clearLabel="Clear";this.type="text";this.isInactive=false;this.autoFocus=false;this.error=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false;this.handleInput=t=>{this.value=t.target.value;this.dsChange.emit(this.value)};this.handleClear=()=>{this.value="";this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const t=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(t?null:this.value);const e=this.required&&!t&&this.value.length===0;this.internals.setValidity(e?{valueMissing:true}:{},e?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 e=this.isInactive||this.disabled||this.formDisabled;const s=this.type==="search"&&this.value.length>0&&!e;const r=this.error&&Boolean(this.errorMessage);const d=[this.ariaDescribedby,r?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return i(a,{key:"eb9c9f3c5e06a0a16a215b5e7049a9f11641e671",class:{"input-container":true,"ds-control-inactive":e}},i("div",{key:"8e65be7a24eac29787a978f003502b1cb860fe47",class:{wrapper:true,"wrapper--error":this.error}},i("div",{key:"ad897040b39c0d904dad397d1d57f9f87ce55797",class:"row"},i("input",{key:"ec84c406e24915f1305879c7fa6a2e0078534a05",type:this.type,id:t,value:this.value,placeholder:this.placeholder,disabled:e,required:this.required,autoFocus:this.autoFocus,class:"native-input ds-text--body-medium ds-text--regular","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":d,"aria-invalid":this.error||undefined,onInput:this.handleInput}),s&&i("button",{key:"63141a6d8f9c8d0cdc8982177b54aa273bedf67f",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":this.clearLabel},i("span",{key:"56b5d07d7debd18028def9c0298d8c73eb880561","aria-hidden":"true"},"×")),i("span",{key:"1c1c06af174bef1df4b22157b6d546877e5233f2",class:"suffix"},i("slot",{key:"cb0c6cadce30508ed149b7d8c79ddf36688c0df0",name:"suffix"})))),r&&i("ds-text",{key:"4ea0aba512301e8aa7cb04e0d5a81a083f5ad0a8",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 n()}},[326,"ds-input",{value:[1025],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],clearLabel:[1,"clear-label"],placeholder:[1],type:[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],setFocus:[64]},undefined,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function p(){if(typeof customElements==="undefined"){return}const t=["ds-input","ds-text"];t.forEach((t=>{switch(t){case"ds-input":if(!customElements.get(r(t))){customElements.define(r(t),o)}break;case"ds-text":if(!customElements.get(r(t))){d()}break}}))}p();const h=o;const c=p;export{h as DsInput,c as defineCustomElement};
|
|
1
|
+
import{p as t,H as e,c as s,h as i,a,t as r}from"./index.js";import{d}from"./p-qawuX6gT.js";const n=()=>`.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{opacity:0.25;pointer-events:none;cursor:not-allowed}.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-container.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.wrapper.sc-ds-input{width:100%;height:var(--dimension-size-400);display:flex;align-items:center;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-depressed-sm);box-sizing:border-box}.wrapper.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-foreground-bold-brand)}.wrapper--error.sc-ds-input{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.wrapper--error.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.row.sc-ds-input{display:flex;align-items:center;width:100%;height:100%;gap:var(--dimension-space-050)}.native-input.sc-ds-input{flex:1;min-width:0;height:100%;padding:0 var(--dimension-space-100);background:transparent;border:none;outline:none;font-family:inherit;color:var(--color-foreground-primary);border-radius:var(--dimension-radius-075);-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{cursor:not-allowed}.native-input.sc-ds-input::placeholder{color:var(--color-foreground-secondary)}.native-input.sc-ds-input:focus::placeholder{color:var(--color-foreground-tertiary)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.clear-btn.sc-ds-input{flex-shrink:0;margin-right:var(--dimension-space-050);padding:var(--dimension-space-050);border:none;background:none;cursor:pointer;color:var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.clear-btn.sc-ds-input:hover{background-color:var(--color-interaction-hover)}.suffix.sc-ds-input{display:flex;align-items:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.suffix.sc-ds-input:empty{display:none}`;let l=0;const o=t(class t extends e{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-${++l}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.clearLabel="Clear";this.type="text";this.isInactive=false;this.autoFocus=false;this.error=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false;this.handleInput=t=>{this.value=t.target.value;this.dsChange.emit(this.value)};this.handleClear=()=>{this.value="";this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const t=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(t?null:this.value);const e=this.required&&!t&&this.value.length===0;this.internals.setValidity(e?{valueMissing:true}:{},e?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 e=this.isInactive||this.disabled||this.formDisabled;const s=this.type==="search"&&this.value.length>0&&!e;const r=this.error&&Boolean(this.errorMessage);const d=[this.ariaDescribedby,r?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return i(a,{key:"f561866602503884922d0b928b2f97093428bc51",class:{"input-container":true,"ds-control-inactive":e}},i("div",{key:"02b7c47066d363c9b71937684378f39d56dc134b",class:{wrapper:true,"wrapper--error":this.error}},i("div",{key:"e7f72978883f0d07951403226b1f4d3eadff4eff",class:"row"},i("input",{key:"12ae7cc6a0589a842bbec2c61d64a8aece4db2e8",type:this.type,id:t,value:this.value,placeholder:this.placeholder,disabled:e,required:this.required,autoFocus:this.autoFocus,class:"native-input ds-text--body-medium ds-text--regular","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":d,"aria-invalid":this.error||undefined,onInput:this.handleInput}),s&&i("button",{key:"4bfac61fe657524bec92fd02f4a8f5d432bb879a",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":this.clearLabel},i("span",{key:"8fde856aa1ffcb8fc6547f523cc92ee9f701725a","aria-hidden":"true"},"×")),i("span",{key:"8aded8d9df572af1dad7bf848fb9b4c4b27aee49",class:"suffix"},i("slot",{key:"0eff1d719fa1d57bfa83139be3d9ff567235a3a7",name:"suffix"})))),r&&i("ds-text",{key:"da11310102563187a4247ee5d31bd9f20e200e94",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 n()}},[326,"ds-input",{value:[1025],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],clearLabel:[1,"clear-label"],placeholder:[1],type:[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],setFocus:[64]},undefined,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function p(){if(typeof customElements==="undefined"){return}const t=["ds-input","ds-text"];t.forEach((t=>{switch(t){case"ds-input":if(!customElements.get(r(t))){customElements.define(r(t),o)}break;case"ds-text":if(!customElements.get(r(t))){d()}break}}))}p();const h=o;const c=p;export{h as DsInput,c as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-input.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{L as o,d as s}from"./p-DDO5W45N.js";const t=o;const p=s;export{t as DsLoader,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-loader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["loaderCss","Loader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","render","isCustomColor","color","startsWith","cls","loader","style","undefined","spinner","h","class","viewBox","fill","focusable","opacity","d","label","Host","display","alignItems","justifyContent","role"],"sources":["src/wc/components/Loader/Loader.css?tag=ds-loader&encapsulation=shadow","src/wc/components/Loader/Loader.tsx"],"sourcesContent":["/* ── Base loader (mirrors ds-icon box metrics) ───────────────────────────── */\n\n.loader {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n line-height: 0;\n color: var(--color-foreground-primary);\n width: var(--_loader-sz, var(--dimension-iconography-md));\n height: var(--_loader-sz, var(--dimension-iconography-md));\n animation: loader-spin var(--effect-animation-duration-long-2) var(--effect-animation-easing-linear) infinite;\n}\n\n.loader__svg {\n display: block;\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n}\n\n.status {\n display: inline-flex;\n align-items: center;\n}\n\n.visually-hidden {\n position: absolute;\n /* stylelint-disable declaration-property-value-disallowed-list -- classic visually-hidden clip pattern */\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n /* stylelint-enable declaration-property-value-disallowed-list */\n}\n\n/* Anti-clockwise continuous spin — 1000ms via long-2. */\n@keyframes loader-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(-360deg); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .loader {\n animation: none;\n transform: none;\n }\n}\n\n/* ── Sizes (same tokens as ds-icon) ──────────────────────────────────────── */\n\n.loader--size-xs { --_loader-sz: var(--dimension-iconography-xs); }\n.loader--size-sm { --_loader-sz: var(--dimension-iconography-sm); }\n.loader--size-md { --_loader-sz: var(--dimension-iconography-md); }\n.loader--size-lg { --_loader-sz: var(--dimension-iconography-lg); }\n.loader--size-xl { --_loader-sz: var(--dimension-iconography-xl); }\n.loader--size-2xl { --_loader-sz: var(--dimension-iconography-2xl); }\n.loader--size-3xl { --_loader-sz: var(--dimension-iconography-3xl); }\n\n/* ── Colors — hierarchy ──────────────────────────────────────────────────── */\n\n.loader--color-primary { color: var(--color-foreground-primary); }\n.loader--color-secondary { color: var(--color-foreground-secondary); }\n.loader--color-tertiary { color: var(--color-foreground-tertiary); }\n.loader--color-quaternary { color: var(--color-foreground-quaternary); }\n.loader--color-inherit { color: inherit; }\n\n/* ── Colors — intent (bold contrast default) ─────────────────────────────── */\n\n.loader--color-brand { color: var(--color-foreground-bold-brand); }\n.loader--color-negative { color: var(--color-foreground-bold-negative); }\n.loader--color-positive { color: var(--color-foreground-bold-positive); }\n.loader--color-warning { color: var(--color-foreground-bold-warning); }\n.loader--color-caution { color: var(--color-foreground-bold-caution); }\n.loader--color-ai { color: var(--color-foreground-bold-ai); }\n.loader--color-guide { color: var(--color-foreground-bold-guide); }\n.loader--color-neutral { color: var(--color-foreground-bold-neutral); }\n\n/* ── Colors — intent faint ───────────────────────────────────────────────── */\n\n.loader--color-faint-brand { color: var(--color-foreground-faint-brand); }\n.loader--color-faint-negative { color: var(--color-foreground-faint-negative); }\n.loader--color-faint-positive { color: var(--color-foreground-faint-positive); }\n.loader--color-faint-warning { color: var(--color-foreground-faint-warning); }\n.loader--color-faint-caution { color: var(--color-foreground-faint-caution); }\n.loader--color-faint-ai { color: var(--color-foreground-faint-ai); }\n.loader--color-faint-neutral { color: var(--color-foreground-faint-neutral); }\n\n/* ── Colors — intent medium ─────────────────────────────────────────────── */\n\n.loader--color-medium-brand { color: var(--color-foreground-medium-brand); }\n.loader--color-medium-negative { color: var(--color-foreground-medium-negative); }\n.loader--color-medium-positive { color: var(--color-foreground-medium-positive); }\n.loader--color-medium-warning { color: var(--color-foreground-medium-warning); }\n.loader--color-medium-caution { color: var(--color-foreground-medium-caution); }\n.loader--color-medium-ai { color: var(--color-foreground-medium-ai); }\n.loader--color-medium-neutral { color: var(--color-foreground-medium-neutral); }\n\n/* ── Colors — intent bold (explicit) ────────────────────────────────────── */\n\n.loader--color-bold-brand { color: var(--color-foreground-bold-brand); }\n.loader--color-bold-negative { color: var(--color-foreground-bold-negative); }\n.loader--color-bold-positive { color: var(--color-foreground-bold-positive); }\n.loader--color-bold-warning { color: var(--color-foreground-bold-warning); }\n.loader--color-bold-caution { color: var(--color-foreground-bold-caution); }\n.loader--color-bold-ai { color: var(--color-foreground-bold-ai); }\n.loader--color-bold-neutral { color: var(--color-foreground-bold-neutral); }\n\n/* ── Colors — intent strong ──────────────────────────────────────────────── */\n\n.loader--color-strong-brand { color: var(--color-foreground-strong-brand); }\n.loader--color-strong-negative { color: var(--color-foreground-strong-negative); }\n.loader--color-strong-positive { color: var(--color-foreground-strong-positive); }\n.loader--color-strong-warning { color: var(--color-foreground-strong-warning); }\n.loader--color-strong-caution { color: var(--color-foreground-strong-caution); }\n.loader--color-strong-ai { color: var(--color-foreground-strong-ai); }\n.loader--color-strong-neutral { color: var(--color-foreground-strong-neutral); }\n\n/* ── Colors — contextual ────────────────────────────────────────────────── */\n\n.loader--color-on-strong { color: var(--color-foreground-on-strong-background-primary); }\n.loader--color-on-bold { color: var(--color-foreground-on-bold-background-primary); }\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { IconColor, IconSize } from '../Icon/Icon';\n\nexport type LoaderSize = IconSize;\nexport type LoaderColor = IconColor;\n\n@Component({\n tag: 'ds-loader',\n styleUrl: 'Loader.css',\n shadow: true,\n})\nexport class Loader {\n /** Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px. */\n @Prop() size: LoaderSize = 'md';\n /** Semantic foreground color token, or a raw CSS var reference. Same tokens as `ds-icon`. */\n @Prop() color: LoaderColor | undefined;\n /**\n * Accessible label for standalone usage. Wraps the spinner in a live region\n * and renders the label visually-hidden. Omit when the host element already\n * conveys busy state via aria-busy.\n */\n @Prop() label: string | undefined;\n\n render() {\n const isCustomColor = typeof this.color === 'string' && this.color.startsWith('var(--');\n\n const cls: Record<string, boolean> = {\n loader: true,\n [`loader--size-${this.size}`]: true,\n [`loader--color-${this.color}`]: !!this.color && !isCustomColor && this.color !== 'inherit',\n 'loader--color-inherit': this.color === 'inherit',\n };\n\n const style = isCustomColor ? { color: this.color as string } : undefined;\n\n const spinner = (\n <span class={cls} style={style} aria-hidden=\"true\">\n <svg class=\"loader__svg\" viewBox=\"0 0 16 16\" fill=\"none\" focusable=\"false\">\n <path\n opacity=\"0.1\"\n d=\"M3 8C3 5.23858 5.23858 3 8 3V2C4.68629 2 2 4.68629 2 8C2 9.99456 2.97323 11.7618 4.47072 12.8528L5.05894 12.044C3.81102 11.1348 3 9.66213 3 8Z\"\n fill=\"currentColor\"\n />\n <path\n opacity=\"0.2\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.05892 12.0438C5.88425 12.6451 6.90069 12.9998 7.99998 12.9998C9.66211 12.9998 11.1348 12.1888 12.0439 10.9409L12.8527 11.5291C11.7618 13.0266 9.99454 13.9998 7.99998 13.9998C6.68083 13.9998 5.46111 13.5741 4.4707 12.8526L5.05892 12.0438Z\"\n fill=\"currentColor\"\n />\n <path\n opacity=\"0.4\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.0435 10.9408C12.6447 10.1155 12.9995 9.09906 12.9995 7.99976C12.9995 7.45884 12.9136 6.93798 12.7547 6.45007L13.7057 6.14014C13.8964 6.72562 13.9995 7.35065 13.9995 7.99976C13.9995 9.31891 13.5738 10.5386 12.8523 11.529L12.0435 10.9408Z\"\n fill=\"currentColor\"\n />\n <path\n opacity=\"0.6\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.7555 6.45152C12.4263 5.43958 11.7831 4.56933 10.9409 3.95577L11.5291 3.14697C12.5398 3.88325 13.3116 4.92755 13.7067 6.14188L12.7555 6.45152Z\"\n fill=\"currentColor\"\n />\n <path\n opacity=\"0.8\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M10.941 3.95583C10.5307 3.65688 10.0731 3.41886 9.58154 3.25509L9.89786 2.30615C10.4877 2.50267 11.0368 2.78829 11.5293 3.14704L10.941 3.95583Z\"\n fill=\"currentColor\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9.89788 2.30636C9.3014 2.10762 8.66327 2 8 2V3C8.55272 3 9.0845 3.08968 9.58157 3.2553L9.89788 2.30636Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n );\n\n if (!this.label) {\n return (\n <Host style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>\n {spinner}\n </Host>\n );\n }\n\n return (\n <Host style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>\n <span role=\"status\" aria-live=\"polite\" class=\"status\">\n {spinner}\n <span class=\"visually-hidden\">{this.label}</span>\n </span>\n </Host>\n );\n }\n}\n"],"mappings":"2DAAA,MAAMA,EAAY,IAAM,8mI,MCWXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,kEAOUC,KAAAC,KAAmB,IAqF5B,CA3EC,MAAAC,GACE,MAAMC,SAAuBH,KAAKI,QAAU,UAAYJ,KAAKI,MAAMC,WAAW,UAE9E,MAAMC,EAA+B,CACnCC,OAAQ,KACR,CAAC,gBAAgBP,KAAKC,QAAS,KAC/B,CAAC,iBAAiBD,KAAKI,WAAYJ,KAAKI,QAAUD,GAAiBH,KAAKI,QAAU,UAClF,wBAAyBJ,KAAKI,QAAU,WAG1C,MAAMI,EAAQL,EAAgB,CAAEC,MAAOJ,KAAKI,OAAoBK,UAEhE,MAAMC,EACJC,EAAA,QAAMC,MAAON,EAAKE,MAAOA,EAAK,cAAc,QAC1CG,EAAA,OAAKC,MAAM,cAAcC,QAAQ,YAAYC,KAAK,OAAOC,UAAU,SACjEJ,EAAA,QACEK,QAAQ,MACRC,EAAE,iJACFH,KAAK,iBAEPH,EAAA,QACEK,QAAQ,MAAK,YACH,UAAS,YACT,UACVC,EAAE,mPACFH,KAAK,iBAEPH,EAAA,QACEK,QAAQ,MAAK,YACH,UAAS,YACT,UACVC,EAAE,mPACFH,KAAK,iBAEPH,EAAA,QACEK,QAAQ,MAAK,YACH,UAAS,YACT,UACVC,EAAE,oJACFH,KAAK,iBAEPH,EAAA,QACEK,QAAQ,MAAK,YACH,UAAS,YACT,UACVC,EAAE,kJACFH,KAAK,iBAEPH,EAAA,oBACY,UAAS,YACT,UACVM,EAAE,2GACFH,KAAK,mBAMb,IAAKd,KAAKkB,MAAO,CACf,OACEP,EAACQ,EAAI,CAACX,MAAO,CAAEY,QAAS,cAAeC,WAAY,SAAUC,eAAgB,WAC1EZ,E,CAKP,OACEC,EAACQ,EAAI,CAACX,MAAO,CAAEY,QAAS,cAAeC,WAAY,SAAUC,eAAgB,WAC3EX,EAAA,QAAMY,KAAK,SAAQ,YAAW,SAASX,MAAM,UAC1CF,EACDC,EAAA,QAAMC,MAAM,mBAAmBZ,KAAKkB,Q","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{M as
|
|
1
|
+
import{M as o,d as s}from"./p-DYotx2VC.js";const t=o;const p=s;export{t as DsMenu,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-menu.js.map
|