@ngxviewbuilder/runtime 0.12.2 → 0.12.3

package/fesm2022/ngxviewbuilder-runtime-chart-element-wN98hSa2.mjs

@@ -1 +0,0 @@
-import{t as A}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{n as M,t as $}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{r as I,rt as N,t as S}from"./ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.mjs";import*as p from"@angular/core";import{ChangeDetectionStrategy as z,Component as P,DestroyRef as D,ElementRef as V,computed as o,inject as _,input as R,signal as g,viewChild as E}from"@angular/core";import{NgTemplateOutlet as T}from"@angular/common";var G=A({ChartElement:()=>x});const C=6;const H=8;const O=24;const L=11;var x=class f{model=R.required(...ngDevMode?[{debugName:"model"}]:[]);tid=I(this.model,"nvb-chart","chart");dataSourceLoaded=g(false,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);activeIndex=g(null,...ngDevMode?[{debugName:"activeIndex"}]:[]);plotWidth=g(480,...ngDevMode?[{debugName:"plotWidth"}]:[]);dataVersion=g(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);elementActionService=_(N);hostRef=_(V);destroyRef=_(D);plotRef=E("chartRoot",...ngDevMode?[{debugName:"plotRef"}]:[]);measureContext=null;fontFamily="system-ui, sans-serif";numberFormat=new Intl.NumberFormat(void 0,{maximumFractionDigits:2});compactFormat=new Intl.NumberFormat(void 0,{notation:"compact",maximumFractionDigits:1});points=o(()=>{this.dataVersion();const t=(Array.isArray(this.model()?.points)?this.model().points:[]).map((e,n)=>{const a=String(e?.label??`Item ${n+1}`).trim()||`Item ${n+1}`;const r=Number(e?.value);return{label:a,value:Number.isFinite(r)?r:0}}).filter(e=>e.label.length>0);return this.mergeDuplicateLabels()?this.sumPointsByLabel(t):t},...ngDevMode?[{debugName:"points"}]:[]);chartType=o(()=>{const t=String(this.model()?.chartType??"bar").trim().toLowerCase();if(["line","pie","area","donut"].includes(t))return t;return t==="horizontalbar"?"horizontalBar":"bar"},...ngDevMode?[{debugName:"chartType"}]:[]);isClickable=o(()=>{const t=this.model()?.events;return Array.isArray(t)&&t.some(e=>{const n=e?.trigger??"click";return n==="click"||n==="always"})},...ngDevMode?[{debugName:"isClickable"}]:[]);isCircular=o(()=>["pie","donut"].includes(this.chartType()),...ngDevMode?[{debugName:"isCircular"}]:[]);legendLayout=o(()=>String(this.model()?.["legendLayout"]??"").trim().toLowerCase()==="horizontal"?"horizontal":"vertical",...ngDevMode?[{debugName:"legendLayout"}]:[]);showLegend=o(()=>this.isCircular()&&this.model().showLegend!==false,...ngDevMode?[{debugName:"showLegend"}]:[]);width=o(()=>Math.max(160,Math.round(this.plotWidth())),...ngDevMode?[{debugName:"width"}]:[]);height=o(()=>this.resolveChartHeightPixels(),...ngDevMode?[{debugName:"height"}]:[]);domain=o(()=>{const t=this.points().map(a=>a.value);const e=Math.min(0,...t);const n=Math.max(0,...t);return this.niceScale(e,n===e?e+1:n)},...ngDevMode?[{debugName:"domain"}]:[]);yTicksRaw=o(()=>{const{min:t,max:e,step:n}=this.domain();const a=[];for(let r=t;r<=e+n/2;r+=n)a.push(Number(r.toFixed(10)));return a},...ngDevMode?[{debugName:"yTicksRaw"}]:[]);plot=o(()=>{const t=Math.max(...this.yTicksRaw().map(i=>this.measure(this.formatTick(i))),8);const e=Math.ceil(t)+10;const n=this.chartType()==="line"||this.chartType()==="area"?16:4;const a=18;const r=this.height()-26;return{left:e,right:this.width()-n,top:a,bottom:r}},...ngDevMode?[{debugName:"plot"}]:[]);scaleY(t){const{min:e,max:n}=this.domain();const a=this.plot();return a.bottom-(t-e)/(n-e)*(a.bottom-a.top)}baselineY=o(()=>this.scaleY(0),...ngDevMode?[{debugName:"baselineY"}]:[]);yTicks=o(()=>this.yTicksRaw().map(t=>({value:t,label:this.formatTick(t),pos:this.scaleY(t)})),...ngDevMode?[{debugName:"yTicks"}]:[]);columns=o(()=>{const t=this.points();if(!t.length||this.chartType()!=="bar")return[];const e=this.plot();const n=(e.right-e.left)/t.length;const a=Math.max(4,Math.min(O,n*.62));const r=this.labelStep(t.map(s=>s.label),n);const i=t.length<=6&&t.every(s=>this.measure(this.formatValue(s.value))<=n-2);const c=this.baselineY();return t.map((s,v)=>{const u=e.left+n*v;const b=u+(n-a)/2;const l=this.scaleY(s.value);const h=Math.min(l,c);const d=Math.abs(c-l);return{index:v,point:s,bandX:u,bandWidth:n,x:b,width:a,y:h,height:d,path:this.columnPath(b,a,c,l),valueLabel:this.formatValue(s.value),showValue:i,valueY:s.value<0?l+13:l-6,axisLabel:this.truncate(s.label,Math.max(n*r-6,24)),showAxisLabel:v%r===0}})},...ngDevMode?[{debugName:"columns"}]:[]);lineMarks=o(()=>{const t=this.points();const e=this.chartType();if(!t.length||e!=="line"&&e!=="area")return[];const n=this.plot();const a=n.right-n.left;const r=t.length>1?a/(t.length-1):0;const i=this.labelStep(t.map(c=>c.label),t.length>1?r:a);return t.map((c,s)=>({index:s,point:c,x:t.length>1?n.left+r*s:n.left+a/2,y:this.scaleY(c.value),axisLabel:this.truncate(c.label,Math.max(r*i-6,40)),showAxisLabel:s%i===0||s===t.length-1}))},...ngDevMode?[{debugName:"lineMarks"}]:[]);linePath=o(()=>this.lineMarks().map((t,e)=>`${e===0?"M":"L"} ${t.x} ${t.y}`).join(" "),...ngDevMode?[{debugName:"linePath"}]:[]);areaPath=o(()=>{const t=this.lineMarks();if(!t.length)return"";const e=this.baselineY();return`${this.linePath()} L ${t[t.length-1].x} ${e} L ${t[0].x} ${e} Z`},...ngDevMode?[{debugName:"areaPath"}]:[]);lastLineMark=o(()=>{const t=this.lineMarks();return t.length?t[t.length-1]:null},...ngDevMode?[{debugName:"lastLineMark"}]:[]);rows=o(()=>{const t=this.points();if(!t.length||this.chartType()!=="horizontalBar")return[];const e=this.width();const n=Math.min(Math.max(...t.map(d=>this.measure(d.label,12)))+12,Math.round(e*.38));const a=Math.max(...t.map(d=>this.measure(this.formatValue(d.value))))+10;const r=n;const i=e-a;const c=32;const s=16;const v=t.map(d=>d.value);const u=Math.min(0,...v);const b=Math.max(0,...v)-u||1;const l=d=>r+(d-u)/b*(i-r);const h=l(0);return t.map((d,y)=>{const w=y*c;const k=w+8;const m=l(d.value);return{index:y,point:d,rowY:w,rowHeight:c,y:k,height:s,x:Math.min(h,m),width:Math.abs(m-h),path:this.rowPath(h,m,k,s),label:this.truncate(d.label,n-12,12),valueLabel:this.formatValue(d.value),valueX:Math.max(h,m)+6}})},...ngDevMode?[{debugName:"rows"}]:[]);rowsHeight=o(()=>Math.max(this.rows().length*32,32),...ngDevMode?[{debugName:"rowsHeight"}]:[]);pieTotal=o(()=>this.points().reduce((t,e)=>t+Math.max(e.value,0),0),...ngDevMode?[{debugName:"pieTotal"}]:[]);slices=o(()=>{const t=this.pieTotal();if(!this.isCircular()||t<=0)return[];const e=[...this.points().map((l,h)=>({index:h,label:l.label,value:Math.max(l.value,0)})).filter(l=>l.value>0)].sort((l,h)=>h.value-l.value);const n=e.length>C?e.slice(0,5):e;const a=e.length>C?e.slice(5):[];const r=[...n].sort((l,h)=>l.index-h.index).map(l=>l.index);const i=n.map(l=>({index:l.index,label:l.label,value:l.value,color:`var(--nvb-chart-${r.indexOf(l.index)%H+1})`}));if(a.length)i.push({index:-1,label:"Other",value:a.reduce((l,h)=>l+h.value,0),color:"var(--nvb-chart-other)"});const{cx:c,cy:s,outer:v,inner:u}=this.pieGeometry();let b=-90;return i.map(l=>{const h=l.value/t*360;const d=this.arcPath(c,s,v,u,b,b+h);b+=h;return{...l,share:l.value/t,path:d}})},...ngDevMode?[{debugName:"slices"}]:[]);pieGeometry=o(()=>{const t=this.pieSize();const e=t/2-2;return{size:t,cx:t/2,cy:t/2,outer:e,inner:this.chartType()==="donut"?e*.62:0}},...ngDevMode?[{debugName:"pieGeometry"}]:[]);pieSize=o(()=>{const t=this.height();const e=this.width();const n=this.legendBeside();return Math.max(120,Math.min(t,n?e*.45:e))},...ngDevMode?[{debugName:"pieSize"}]:[]);legendBeside=o(()=>this.showLegend()&&this.legendLayout()==="vertical"&&this.width()>=420,...ngDevMode?[{debugName:"legendBeside"}]:[]);activeSlice=o(()=>{const t=this.activeIndex();return t===null?null:this.slices().find(e=>e.index===t)??null},...ngDevMode?[{debugName:"activeSlice"}]:[]);hover=o(()=>{const t=this.activeIndex();if(t===null)return null;const e=this.chartType();if(e==="bar"){const n=this.columns()[t];return n?{label:n.point.label,value:n.point.value,share:null,color:"var(--nvb-chart-single)",x:n.x+n.width/2,y:n.y}:null}if(e==="line"||e==="area"){const n=this.lineMarks()[t];return n?{label:n.point.label,value:n.point.value,share:null,color:"var(--nvb-chart-single)",x:n.x,y:n.y}:null}if(e==="horizontalBar"){const n=this.rows()[t];return n?{label:n.point.label,value:n.point.value,share:null,color:"var(--nvb-chart-single)",x:n.x+n.width,y:n.y}:null}return null},...ngDevMode?[{debugName:"hover"}]:[]);tooltipStyle=o(()=>{const t=this.hover();if(!t)return null;const e=t.x>this.width()-150;return{left:`${t.x}px`,top:`${Math.max(t.y,8)}px`,transform:e?"translate(calc(-100% - 12px), -50%)":"translate(12px, -50%)"}},...ngDevMode?[{debugName:"tooltipStyle"}]:[]);ariaSummary=o(()=>{const t=String(this.model()?.title??"").trim();const e=this.points().length;const n=this.isClickable()?" Use arrow keys to move, Enter to select.":"";return`${t?`${t}. `:""}${e} ${e===1?"item":"items"}.${n}`},...ngDevMode?[{debugName:"ariaSummary"}]:[]);ngOnInit(){const t=!this.model().dataSource||Boolean(this.model().dataSourceLoaded);this.dataSourceLoaded.set(t);this.model().afterDataSourceLoad.add(()=>{this.dataSourceLoaded.set(true);this.dataVersion.update(e=>e+1)})}ngAfterViewInit(){const t=this.hostRef.nativeElement;const e=getComputedStyle(t).fontFamily;if(e)this.fontFamily=e;const n=this.plotRef()?.nativeElement??t;if(typeof ResizeObserver==="undefined"){this.plotWidth.set(n.clientWidth||480);return}const a=new ResizeObserver(r=>{const i=r[0]?.contentRect.width??0;if(i>0&&Math.abs(i-this.plotWidth())>.5)this.plotWidth.set(i)});a.observe(n);this.destroyRef.onDestroy(()=>a.disconnect())}onLinePointerMove(t){const e=this.lineMarks();if(!e.length)return;const n=t.currentTarget;const a=t.clientX-n.getBoundingClientRect().left;let r=0;e.forEach((i,c)=>{if(Math.abs(i.x-a)<Math.abs(e[r].x-a))r=c});this.activeIndex.set(r)}setActive(t){this.activeIndex.set(t)}onPlotKeydown(t){const e=this.isCircular()?this.slices().length:this.points().length;if(!e)return;const n=this.isCircular()?this.slices().findIndex(r=>r.index===this.activeIndex()):this.activeIndex()??-1;let a=n;if(t.key==="ArrowRight"||t.key==="ArrowDown")a=n<0?0:Math.min(e-1,n+1);else if(t.key==="ArrowLeft"||t.key==="ArrowUp")a=n<0?0:Math.max(0,n-1);else if(t.key==="Home")a=0;else if(t.key==="End")a=e-1;else if((t.key==="Enter"||t.key===" ")&&n>=0){t.preventDefault();const r=this.isCircular()?this.slices()[n].index:n;if(r>=0)this.runClick(r);return}else if(t.key==="Escape"){this.activeIndex.set(null);return}else return;t.preventDefault();this.activeIndex.set(this.isCircular()?this.slices()[a].index:a)}onPointClick(t,e){e.preventDefault();e.stopPropagation();if(t>=0)this.runClick(t)}onLineClick(t){const e=this.activeIndex();if(e!==null&&e>=0)this.onPointClick(e,t)}formatValue(t){return this.numberFormat.format(t)}formatShare(t){const e=t*100;return`${e<10&&e>0?e.toFixed(1):Math.round(e)}%`}runClick(t){const e=this.points()[t];if(!e||!this.isClickable())return;const n={item:e,row:e,index:t,value:e.value};const a=String(this.model().name??"").trim();if(a)n[a]=e.value;this.elementActionService.runActions(this.model(),this.model().events??[],"click",n)}mergeDuplicateLabels(){const t=this.model()?.["mergeDuplicateLabels"];return t===void 0||t===null?true:Boolean(t)}sumPointsByLabel(t){const e=new Map;t.forEach(n=>{const a=e.get(n.label);if(a){a.value+=n.value;return}e.set(n.label,{label:n.label,value:n.value})});return Array.from(e.values())}niceScale(t,e){const n=(e-t)/4;const a=Math.pow(10,Math.floor(Math.log10(n||1)));const r=n/a;const i=(r<=1?1:r<=2?2:r<=2.5?2.5:r<=5?5:10)*a;return{min:Math.floor(t/i)*i,max:Math.ceil(e/i)*i,step:i}}formatTick(t){return Math.abs(t)>=1e4?this.compactFormat.format(t):this.numberFormat.format(t)}labelStep(t,e){const n=Math.min(Math.max(...t.map(a=>this.measure(a)),0),120);return Math.max(1,Math.ceil((n+8)/Math.max(e,1)))}columnPath(t,e,n,a){const r=Math.abs(n-a);if(r<.5)return"";const i=Math.min(4,e/2,r);if(a<=n)return[`M ${t} ${n}`,`V ${a+i}`,`Q ${t} ${a} ${t+i} ${a}`,`H ${t+e-i}`,`Q ${t+e} ${a} ${t+e} ${a+i}`,`V ${n}`,"Z"].join(" ");return[`M ${t} ${n}`,`V ${a-i}`,`Q ${t} ${a} ${t+i} ${a}`,`H ${t+e-i}`,`Q ${t+e} ${a} ${t+e} ${a-i}`,`V ${n}`,"Z"].join(" ")}rowPath(t,e,n,a){const r=Math.abs(e-t);if(r<.5)return"";const i=Math.min(4,a/2,r);const c=e-(e>=t?1:-1)*i;return[`M ${t} ${n}`,`H ${c}`,`Q ${e} ${n} ${e} ${n+i}`,`V ${n+a-i}`,`Q ${e} ${n+a} ${c} ${n+a}`,`H ${t}`,"Z"].join(" ")}arcPath(t,e,n,a,r,i){if(i-r>=359.999){const v=r+180;return`${this.arcPath(t,e,n,a,r,v)} ${this.arcPath(t,e,n,a,v,i-.001)}`}const c=i-r>180?1:0;const s=(v,u)=>{const b=u*Math.PI/180;return`${t+v*Math.cos(b)} ${e+v*Math.sin(b)}`};if(a<=0)return`M ${t} ${e} L ${s(n,r)} A ${n} ${n} 0 ${c} 1 ${s(n,i)} Z`;return[`M ${s(n,r)}`,`A ${n} ${n} 0 ${c} 1 ${s(n,i)}`,`L ${s(a,i)}`,`A ${a} ${a} 0 ${c} 0 ${s(a,r)}`,"Z"].join(" ")}measure(t,e=L){if(!this.measureContext&&typeof document!=="undefined")this.measureContext=document.createElement("canvas").getContext("2d");if(!this.measureContext)return String(t).length*e*.6;this.measureContext.font=`${e}px ${this.fontFamily}`;return this.measureContext.measureText(String(t)).width}truncate(t,e,n=L){if(this.measure(t,n)<=e)return t;let a=0;let r=t.length;while(a<r){const i=Math.ceil((a+r)/2);if(this.measure(`${t.slice(0,i)}…`,n)<=e)a=i;else r=i-1}return a>0?`${t.slice(0,a).trimEnd()}…`:"…"}resolveChartHeightPixels(){const t=String(this.model()?.chartHeight??"").trim();const e=Number.parseFloat(t);if(!t||t.endsWith("%")||!Number.isFinite(e)||e<=0)return 220;return Math.max(140,Math.round(e))}static ɵfac=p.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:p,type:f,deps:[],target:p.ɵɵFactoryTarget.Component});static ɵcmp=p.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:f,isStandalone:true,selector:"chart-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},viewQueries:[{propertyName:"plotRef",first:true,predicate:["chartRoot"],descendants:true,isSignal:true}],ngImport:p,template:"<element-wrapper [model]=\"model()\">\n  <section\n    class=\"nvb-chart\"\n    [class.nvb-chart--clickable]=\"isClickable()\"\n    [attr.data-testid]=\"tid('root')\"\n    #chartRoot\n  >\n    @if (model().title) {\n      <h4 class=\"nvb-chart__title\">{{ model().title | dynamicText: model() }}</h4>\n    }\n\n    @if (model().dataSource && !dataSourceLoaded()) {\n      <div class=\"nvb-chart__state\" [style.height.px]=\"height()\">\n        {{ 'chart.loading' | uiT: 'Loading chart data...' }}\n      </div>\n    } @else if (!points().length) {\n      <div class=\"nvb-chart__state\" [style.height.px]=\"height()\">\n        {{ 'chart.empty' | uiT: 'No data to show yet.' }}\n      </div>\n    } @else if (isCircular()) {\n      <div\n        class=\"nvb-chart__circular\"\n        [class.nvb-chart__circular--beside]=\"legendBeside()\"\n      >\n        <svg\n          class=\"nvb-chart__svg nvb-chart__svg--circular\"\n          [attr.width]=\"pieGeometry().size\"\n          [attr.height]=\"pieGeometry().size\"\n          [attr.viewBox]=\"'0 0 ' + pieGeometry().size + ' ' + pieGeometry().size\"\n          role=\"img\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"ariaSummary()\"\n          (keydown)=\"onPlotKeydown($event)\"\n          (blur)=\"setActive(null)\"\n          (pointerleave)=\"setActive(null)\"\n          [attr.data-testid]=\"tid('plot')\"\n        >\n          @for (slice of slices(); track slice.index; let tidIndex1 = $index) {\n            <path [attr.data-testid]=\"tid('slice', tidIndex1)\"\n              class=\"nvb-chart__slice\"\n              [class.nvb-chart__slice--dim]=\"activeIndex() !== null && activeIndex() !== slice.index\"\n              [attr.d]=\"slice.path\"\n              [attr.fill]=\"slice.color\"\n              (pointerenter)=\"setActive(slice.index)\"\n              (click)=\"onPointClick(slice.index, $event)\"\n            ></path>\n          }\n          @if (chartType() === 'donut') {\n            <text\n              [attr.x]=\"pieGeometry().cx\"\n              [attr.y]=\"pieGeometry().cy - 2\"\n              text-anchor=\"middle\"\n              class=\"nvb-chart__center-value\"\n            >\n              {{ formatValue(activeSlice()?.value ?? pieTotal()) }}\n            </text>\n            <text\n              [attr.x]=\"pieGeometry().cx\"\n              [attr.y]=\"pieGeometry().cy + 16\"\n              text-anchor=\"middle\"\n              class=\"nvb-chart__center-label\"\n            >\n              @if (activeSlice(); as slice) {\n                {{ formatShare(slice.share) }} ·\n                {{ slice.index === -1 ? ('chart.other' | uiT: 'Other') : slice.label }}\n              } @else {\n                {{ 'chart.total' | uiT: 'Total' }}\n              }\n            </text>\n            @if (activeSlice() && isClickable() && activeSlice()!.index >= 0) {\n              <text\n                [attr.x]=\"pieGeometry().cx\"\n                [attr.y]=\"pieGeometry().cy + 32\"\n                text-anchor=\"middle\"\n                class=\"nvb-chart__center-hint\"\n              >\n                {{ 'chart.clickHint' | uiT: 'Click to select' }}\n              </text>\n            }\n          }\n        </svg>\n\n        @if (showLegend()) {\n          <ul\n            class=\"nvb-chart__legend\"\n            [class.nvb-chart__legend--inline]=\"legendLayout() === 'horizontal'\"\n            [attr.data-testid]=\"tid('legend')\"\n          >\n            @for (slice of slices(); track slice.index; let tidIndex2 = $index) {\n              <li [attr.data-testid]=\"tid('legend-item', tidIndex2)\"\n                class=\"nvb-chart__legend-item\"\n                [class.nvb-chart__legend-item--active]=\"activeIndex() === slice.index\"\n                [class.nvb-chart__legend-item--dim]=\"activeIndex() !== null && activeIndex() !== slice.index\"\n                (pointerenter)=\"setActive(slice.index)\"\n                (pointerleave)=\"setActive(null)\"\n                (click)=\"onPointClick(slice.index, $event)\"\n              >\n                <span class=\"nvb-chart__swatch\" [style.background]=\"slice.color\"></span>\n                <span class=\"nvb-chart__legend-label\" [attr.title]=\"slice.label\">{{\n                  slice.index === -1 ? ('chart.other' | uiT: 'Other') : slice.label\n                }}</span>\n                <span class=\"nvb-chart__legend-value\">{{ formatValue(slice.value) }}</span>\n                <span class=\"nvb-chart__legend-share\">{{ formatShare(slice.share) }}</span>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n    } @else {\n      <div class=\"nvb-chart__plot\">\n        @switch (chartType()) {\n          @case ('horizontalBar') {\n            <svg\n              class=\"nvb-chart__svg\"\n              [attr.width]=\"width()\"\n              [attr.height]=\"rowsHeight()\"\n              role=\"img\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"ariaSummary()\"\n              (keydown)=\"onPlotKeydown($event)\"\n              (blur)=\"setActive(null)\"\n              (pointerleave)=\"setActive(null)\"\n              [attr.data-testid]=\"tid('plot')\"\n            >\n              @for (row of rows(); track row.index; let tidIndex3 = $index) {\n                <g [attr.data-testid]=\"tid('mark', tidIndex3)\"\n                  class=\"nvb-chart__mark\"\n                  [class.nvb-chart__mark--active]=\"activeIndex() === row.index\"\n                  (pointerenter)=\"setActive(row.index)\"\n                  (click)=\"onPointClick(row.index, $event)\"\n                >\n                  <rect\n                    class=\"nvb-chart__band\"\n                    x=\"0\"\n                    [attr.y]=\"row.rowY\"\n                    [attr.width]=\"width()\"\n                    [attr.height]=\"row.rowHeight\"\n                  ></rect>\n                  <text\n                    x=\"0\"\n                    [attr.y]=\"row.rowY + row.rowHeight / 2\"\n                    dominant-baseline=\"central\"\n                    class=\"nvb-chart__category\"\n                  >\n                    {{ row.label }}\n                  </text>\n                  <path class=\"nvb-chart__fill\" [attr.d]=\"row.path\"></path>\n                  <text\n                    [attr.x]=\"row.valueX\"\n                    [attr.y]=\"row.rowY + row.rowHeight / 2\"\n                    dominant-baseline=\"central\"\n                    class=\"nvb-chart__value\"\n                  >\n                    {{ row.valueLabel }}\n                  </text>\n                </g>\n              }\n            </svg>\n          }\n\n          @case ('bar') {\n            <svg\n              class=\"nvb-chart__svg\"\n              [attr.width]=\"width()\"\n              [attr.height]=\"height()\"\n              role=\"img\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"ariaSummary()\"\n              (keydown)=\"onPlotKeydown($event)\"\n              (blur)=\"setActive(null)\"\n              (pointerleave)=\"setActive(null)\"\n              [attr.data-testid]=\"tid('plot')\"\n            >\n              <ng-container *ngTemplateOutlet=\"yAxis\"></ng-container>\n              @for (column of columns(); track column.index; let tidIndex4 = $index) {\n                <g [attr.data-testid]=\"tid('mark', tidIndex4)\"\n                  class=\"nvb-chart__mark\"\n                  [class.nvb-chart__mark--active]=\"activeIndex() === column.index\"\n                  (pointerenter)=\"setActive(column.index)\"\n                  (click)=\"onPointClick(column.index, $event)\"\n                >\n                  <rect\n                    class=\"nvb-chart__band\"\n                    [attr.x]=\"column.bandX\"\n                    [attr.y]=\"plot().top\"\n                    [attr.width]=\"column.bandWidth\"\n                    [attr.height]=\"plot().bottom - plot().top\"\n                  ></rect>\n                  <path class=\"nvb-chart__fill\" [attr.d]=\"column.path\"></path>\n                  @if (column.showValue && activeIndex() !== column.index) {\n                    <text\n                      [attr.x]=\"column.x + column.width / 2\"\n                      [attr.y]=\"column.valueY\"\n                      text-anchor=\"middle\"\n                      class=\"nvb-chart__value\"\n                    >\n                      {{ column.valueLabel }}\n                    </text>\n                  }\n                  @if (column.showAxisLabel) {\n                    <text\n                      [attr.x]=\"column.bandX + column.bandWidth / 2\"\n                      [attr.y]=\"plot().bottom + 17\"\n                      text-anchor=\"middle\"\n                      class=\"nvb-chart__category\"\n                    >\n                      {{ column.axisLabel }}\n                    </text>\n                  }\n                </g>\n              }\n              <line\n                class=\"nvb-chart__baseline\"\n                [attr.x1]=\"plot().left\"\n                [attr.x2]=\"plot().right\"\n                [attr.y1]=\"baselineY()\"\n                [attr.y2]=\"baselineY()\"\n              ></line>\n            </svg>\n          }\n\n          @default {\n            <svg\n              class=\"nvb-chart__svg\"\n              [attr.width]=\"width()\"\n              [attr.height]=\"height()\"\n              role=\"img\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"ariaSummary()\"\n              (keydown)=\"onPlotKeydown($event)\"\n              (blur)=\"setActive(null)\"\n              (pointermove)=\"onLinePointerMove($event)\"\n              (pointerleave)=\"setActive(null)\"\n              (click)=\"onLineClick($event)\"\n              [attr.data-testid]=\"tid('plot')\"\n            >\n              <ng-container *ngTemplateOutlet=\"yAxis\"></ng-container>\n              @if (chartType() === 'area') {\n                <path class=\"nvb-chart__area\" [attr.d]=\"areaPath()\"></path>\n              }\n              <path class=\"nvb-chart__line\" [attr.d]=\"linePath()\"></path>\n              @for (mark of lineMarks(); track mark.index) {\n                @if (mark.showAxisLabel) {\n                  <text\n                    [attr.x]=\"mark.x\"\n                    [attr.y]=\"plot().bottom + 17\"\n                    [attr.text-anchor]=\"\n                      $first && lineMarks().length > 1 ? 'start' : $last && lineMarks().length > 1 ? 'end' : 'middle'\n                    \"\n                    class=\"nvb-chart__category\"\n                  >\n                    {{ mark.axisLabel }}\n                  </text>\n                }\n              }\n              <line\n                class=\"nvb-chart__baseline\"\n                [attr.x1]=\"plot().left\"\n                [attr.x2]=\"plot().right\"\n                [attr.y1]=\"baselineY()\"\n                [attr.y2]=\"baselineY()\"\n              ></line>\n              @if (hover(); as active) {\n                <line\n                  class=\"nvb-chart__crosshair\"\n                  [attr.x1]=\"active.x\"\n                  [attr.x2]=\"active.x\"\n                  [attr.y1]=\"plot().top\"\n                  [attr.y2]=\"plot().bottom\"\n                ></line>\n                <circle class=\"nvb-chart__dot\" [attr.cx]=\"active.x\" [attr.cy]=\"active.y\" r=\"4.5\"></circle>\n              } @else if (lastLineMark(); as last) {\n                <circle class=\"nvb-chart__dot\" [attr.cx]=\"last.x\" [attr.cy]=\"last.y\" r=\"4\"></circle>\n                <text\n                  [attr.x]=\"last.x\"\n                  [attr.y]=\"last.y - 11\"\n                  [attr.text-anchor]=\"lineMarks().length > 1 ? 'end' : 'middle'\"\n                  class=\"nvb-chart__value\"\n                >\n                  {{ formatValue(last.point.value) }}\n                </text>\n              }\n            </svg>\n          }\n        }\n\n        @if (hover(); as active) {\n          <div\n            class=\"nvb-chart__tooltip\"\n            role=\"status\"\n            [style.left]=\"tooltipStyle()?.left\"\n            [style.top]=\"tooltipStyle()?.top\"\n            [style.transform]=\"tooltipStyle()?.transform\"\n            [attr.data-testid]=\"tid('tooltip')\"\n          >\n            <span class=\"nvb-chart__tooltip-key\" [style.background]=\"active.color\"></span>\n            <span class=\"nvb-chart__tooltip-value\">{{ formatValue(active.value) }}</span>\n            <span class=\"nvb-chart__tooltip-label\">{{ active.label }}</span>\n            @if (isClickable()) {\n              <span class=\"nvb-chart__tooltip-hint\">{{ 'chart.clickHint' | uiT: 'Click to select' }}</span>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <ng-template #yAxis>\n      <svg:g class=\"nvb-chart__axis\">\n        @for (tick of yTicks(); track tick.value) {\n          <svg:line\n            class=\"nvb-chart__grid\"\n            [attr.x1]=\"plot().left\"\n            [attr.x2]=\"plot().right\"\n            [attr.y1]=\"tick.pos\"\n            [attr.y2]=\"tick.pos\"\n          ></svg:line>\n          <svg:text\n            [attr.x]=\"plot().left - 10\"\n            [attr.y]=\"tick.pos\"\n            text-anchor=\"end\"\n            dominant-baseline=\"central\"\n            class=\"nvb-chart__tick\"\n          >\n            {{ tick.label }}\n          </svg:text>\n        }\n      </svg:g>\n    </ng-template>\n\n    @if (points().length) {\n      <table class=\"nvb-chart__sr-table\">\n        <caption>{{ model().title || ('chart.data' | uiT: 'Chart data') }}</caption>\n        <thead>\n          <tr>\n            <th scope=\"col\">{{ 'chart.label' | uiT: 'Label' }}</th>\n            <th scope=\"col\">{{ 'chart.value' | uiT: 'Value' }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (point of points(); track $index) {\n            <tr>\n              <th scope=\"row\">{{ point.label }}</th>\n              <td>{{ formatValue(point.value) }}</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    }\n  </section>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;min-width:0}.nvb-chart{position:relative;width:100%;box-sizing:border-box;padding:16px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-md, var(--nvb-radius-lg));background:var(--nvb-color-neutral-000);display:flex;flex-direction:column;gap:12px;min-width:0}.nvb-chart__title{margin:0;font-size:14px;font-weight:600;line-height:1.4;color:var(--nvb-color-neutral-900)}.nvb-chart__state{display:flex;align-items:center;justify-content:center;color:var(--nvb-color-neutral-500);font-size:13px}.nvb-chart__plot{position:relative;min-width:0}.nvb-chart__svg{display:block;overflow:visible;outline:none;font-family:inherit}.nvb-chart__svg:focus-visible{outline:2px solid var(--nvb-color-primary-500);outline-offset:4px;border-radius:var(--nvb-radius-sm)}.nvb-chart__grid{stroke:var(--nvb-color-neutral-150, var(--nvb-color-neutral-100));stroke-width:1;shape-rendering:crispEdges}.nvb-chart__baseline{stroke:var(--nvb-color-neutral-300);stroke-width:1;shape-rendering:crispEdges}.nvb-chart__tick{font-size:11px;fill:var(--nvb-color-neutral-500);font-variant-numeric:tabular-nums}.nvb-chart__category{font-size:11px;fill:var(--nvb-color-neutral-600)}.nvb-chart__value{font-size:11px;font-weight:600;fill:var(--nvb-color-neutral-700);font-variant-numeric:tabular-nums;pointer-events:none}.nvb-chart__mark{cursor:default}.nvb-chart--clickable .nvb-chart__mark,.nvb-chart--clickable .nvb-chart__slice,.nvb-chart--clickable .nvb-chart__legend-item,.nvb-chart--clickable .nvb-chart__line-hit{cursor:pointer}.nvb-chart__band{fill:transparent}.nvb-chart__mark--active .nvb-chart__band{fill:var(--nvb-color-neutral-050)}.nvb-chart__fill{fill:var(--nvb-chart-single, var(--nvb-color-primary-500));transition:fill .12s ease}.nvb-chart__mark--active .nvb-chart__fill{fill:color-mix(in oklab,var(--nvb-chart-single, var(--nvb-color-primary-500)) 82%,black)}.nvb-chart__line{fill:none;stroke:var(--nvb-chart-single, var(--nvb-color-primary-500));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nvb-chart__area{fill:var(--nvb-chart-single, var(--nvb-color-primary-500));fill-opacity:.1}.nvb-chart__crosshair{stroke:var(--nvb-color-neutral-300);stroke-width:1;shape-rendering:crispEdges;pointer-events:none}.nvb-chart__dot{fill:var(--nvb-chart-single, var(--nvb-color-primary-500));stroke:var(--nvb-color-neutral-000);stroke-width:2;pointer-events:none}.nvb-chart__circular{display:flex;flex-direction:column;align-items:center;gap:16px}.nvb-chart__circular--beside{flex-direction:row;align-items:center;gap:24px}.nvb-chart__svg--circular{flex:0 0 auto}.nvb-chart__slice{stroke:var(--nvb-color-neutral-000);stroke-width:2;stroke-linejoin:round;transition:opacity .12s ease}.nvb-chart__slice--dim{opacity:.35}.nvb-chart__center-value{font-size:22px;font-weight:600;fill:var(--nvb-color-neutral-900)}.nvb-chart__center-label{font-size:12px;fill:var(--nvb-color-neutral-500)}.nvb-chart__legend{flex:1 1 auto;width:100%;min-width:0;margin:0;padding:0;list-style:none;display:flex;flex-direction:column}.nvb-chart__legend-item{display:grid;grid-template-columns:10px minmax(0,1fr) auto 44px;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--nvb-radius-md);font-size:13px;line-height:1.3;color:var(--nvb-color-neutral-700);transition:background-color .12s ease,opacity .12s ease}.nvb-chart__legend-item+.nvb-chart__legend-item{border-top:1px solid var(--nvb-color-neutral-100)}.nvb-chart__legend-item--active{background:var(--nvb-color-neutral-050)}.nvb-chart__legend-item--dim{opacity:.55}.nvb-chart__swatch{width:10px;height:10px;border-radius:var(--nvb-radius-sm)}.nvb-chart__legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvb-chart__legend-value{font-weight:600;color:var(--nvb-color-neutral-900);font-variant-numeric:tabular-nums}.nvb-chart__legend-share{text-align:right;color:var(--nvb-color-neutral-500);font-variant-numeric:tabular-nums}.nvb-chart__legend--inline{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 16px}.nvb-chart__legend--inline .nvb-chart__legend-item{display:inline-flex;gap:6px;padding:2px 4px;border-top:0}.nvb-chart__legend--inline .nvb-chart__legend-label{max-width:160px}.nvb-chart__legend--inline .nvb-chart__legend-value{display:none}.nvb-chart__tooltip{position:absolute;z-index:20;display:grid;grid-template-columns:12px auto;align-items:center;column-gap:8px;row-gap:2px;padding:8px 10px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-lg);background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-8, 0 4px 16px rgba(0, 0, 0, .12));pointer-events:none;white-space:nowrap}.nvb-chart__tooltip-key{width:12px;height:2px;border-radius:1px}.nvb-chart__tooltip-value{font-size:14px;font-weight:600;color:var(--nvb-color-neutral-900);font-variant-numeric:tabular-nums}.nvb-chart__tooltip-hint{grid-column:2;margin-top:2px;font-size:11px;color:var(--nvb-color-primary-600)}.nvb-chart__center-hint{font-size:11px;fill:var(--nvb-color-primary-600)}.nvb-chart--clickable .nvb-chart__svg{cursor:pointer}.nvb-chart__tooltip-label{grid-column:2;font-size:12px;color:var(--nvb-color-neutral-600)}.nvb-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.nvb-chart__fill,.nvb-chart__slice,.nvb-chart__legend-item{transition:none}}\n"],dependencies:[{kind:"component",type:S,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:T,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"pipe",type:$,name:"dynamicText"},{kind:"pipe",type:M,name:"uiT"}],changeDetection:p.ChangeDetectionStrategy.OnPush})};p.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:p,type:x,decorators:[{type:P,args:[{selector:"chart-element",changeDetection:z.OnPush,imports:[S,T,$,M],template:"<element-wrapper [model]=\"model()\">\n  <section\n    class=\"nvb-chart\"\n    [class.nvb-chart--clickable]=\"isClickable()\"\n    [attr.data-testid]=\"tid('root')\"\n    #chartRoot\n  >\n    @if (model().title) {\n      <h4 class=\"nvb-chart__title\">{{ model().title | dynamicText: model() }}</h4>\n    }\n\n    @if (model().dataSource && !dataSourceLoaded()) {\n      <div class=\"nvb-chart__state\" [style.height.px]=\"height()\">\n        {{ 'chart.loading' | uiT: 'Loading chart data...' }}\n      </div>\n    } @else if (!points().length) {\n      <div class=\"nvb-chart__state\" [style.height.px]=\"height()\">\n        {{ 'chart.empty' | uiT: 'No data to show yet.' }}\n      </div>\n    } @else if (isCircular()) {\n      <div\n        class=\"nvb-chart__circular\"\n        [class.nvb-chart__circular--beside]=\"legendBeside()\"\n      >\n        <svg\n          class=\"nvb-chart__svg nvb-chart__svg--circular\"\n          [attr.width]=\"pieGeometry().size\"\n          [attr.height]=\"pieGeometry().size\"\n          [attr.viewBox]=\"'0 0 ' + pieGeometry().size + ' ' + pieGeometry().size\"\n          role=\"img\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"ariaSummary()\"\n          (keydown)=\"onPlotKeydown($event)\"\n          (blur)=\"setActive(null)\"\n          (pointerleave)=\"setActive(null)\"\n          [attr.data-testid]=\"tid('plot')\"\n        >\n          @for (slice of slices(); track slice.index; let tidIndex1 = $index) {\n            <path [attr.data-testid]=\"tid('slice', tidIndex1)\"\n              class=\"nvb-chart__slice\"\n              [class.nvb-chart__slice--dim]=\"activeIndex() !== null && activeIndex() !== slice.index\"\n              [attr.d]=\"slice.path\"\n              [attr.fill]=\"slice.color\"\n              (pointerenter)=\"setActive(slice.index)\"\n              (click)=\"onPointClick(slice.index, $event)\"\n            ></path>\n          }\n          @if (chartType() === 'donut') {\n            <text\n              [attr.x]=\"pieGeometry().cx\"\n              [attr.y]=\"pieGeometry().cy - 2\"\n              text-anchor=\"middle\"\n              class=\"nvb-chart__center-value\"\n            >\n              {{ formatValue(activeSlice()?.value ?? pieTotal()) }}\n            </text>\n            <text\n              [attr.x]=\"pieGeometry().cx\"\n              [attr.y]=\"pieGeometry().cy + 16\"\n              text-anchor=\"middle\"\n              class=\"nvb-chart__center-label\"\n            >\n              @if (activeSlice(); as slice) {\n                {{ formatShare(slice.share) }} ·\n                {{ slice.index === -1 ? ('chart.other' | uiT: 'Other') : slice.label }}\n              } @else {\n                {{ 'chart.total' | uiT: 'Total' }}\n              }\n            </text>\n            @if (activeSlice() && isClickable() && activeSlice()!.index >= 0) {\n              <text\n                [attr.x]=\"pieGeometry().cx\"\n                [attr.y]=\"pieGeometry().cy + 32\"\n                text-anchor=\"middle\"\n                class=\"nvb-chart__center-hint\"\n              >\n                {{ 'chart.clickHint' | uiT: 'Click to select' }}\n              </text>\n            }\n          }\n        </svg>\n\n        @if (showLegend()) {\n          <ul\n            class=\"nvb-chart__legend\"\n            [class.nvb-chart__legend--inline]=\"legendLayout() === 'horizontal'\"\n            [attr.data-testid]=\"tid('legend')\"\n          >\n            @for (slice of slices(); track slice.index; let tidIndex2 = $index) {\n              <li [attr.data-testid]=\"tid('legend-item', tidIndex2)\"\n                class=\"nvb-chart__legend-item\"\n                [class.nvb-chart__legend-item--active]=\"activeIndex() === slice.index\"\n                [class.nvb-chart__legend-item--dim]=\"activeIndex() !== null && activeIndex() !== slice.index\"\n                (pointerenter)=\"setActive(slice.index)\"\n                (pointerleave)=\"setActive(null)\"\n                (click)=\"onPointClick(slice.index, $event)\"\n              >\n                <span class=\"nvb-chart__swatch\" [style.background]=\"slice.color\"></span>\n                <span class=\"nvb-chart__legend-label\" [attr.title]=\"slice.label\">{{\n                  slice.index === -1 ? ('chart.other' | uiT: 'Other') : slice.label\n                }}</span>\n                <span class=\"nvb-chart__legend-value\">{{ formatValue(slice.value) }}</span>\n                <span class=\"nvb-chart__legend-share\">{{ formatShare(slice.share) }}</span>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n    } @else {\n      <div class=\"nvb-chart__plot\">\n        @switch (chartType()) {\n          @case ('horizontalBar') {\n            <svg\n              class=\"nvb-chart__svg\"\n              [attr.width]=\"width()\"\n              [attr.height]=\"rowsHeight()\"\n              role=\"img\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"ariaSummary()\"\n              (keydown)=\"onPlotKeydown($event)\"\n              (blur)=\"setActive(null)\"\n              (pointerleave)=\"setActive(null)\"\n              [attr.data-testid]=\"tid('plot')\"\n            >\n              @for (row of rows(); track row.index; let tidIndex3 = $index) {\n                <g [attr.data-testid]=\"tid('mark', tidIndex3)\"\n                  class=\"nvb-chart__mark\"\n                  [class.nvb-chart__mark--active]=\"activeIndex() === row.index\"\n                  (pointerenter)=\"setActive(row.index)\"\n                  (click)=\"onPointClick(row.index, $event)\"\n                >\n                  <rect\n                    class=\"nvb-chart__band\"\n                    x=\"0\"\n                    [attr.y]=\"row.rowY\"\n                    [attr.width]=\"width()\"\n                    [attr.height]=\"row.rowHeight\"\n                  ></rect>\n                  <text\n                    x=\"0\"\n                    [attr.y]=\"row.rowY + row.rowHeight / 2\"\n                    dominant-baseline=\"central\"\n                    class=\"nvb-chart__category\"\n                  >\n                    {{ row.label }}\n                  </text>\n                  <path class=\"nvb-chart__fill\" [attr.d]=\"row.path\"></path>\n                  <text\n                    [attr.x]=\"row.valueX\"\n                    [attr.y]=\"row.rowY + row.rowHeight / 2\"\n                    dominant-baseline=\"central\"\n                    class=\"nvb-chart__value\"\n                  >\n                    {{ row.valueLabel }}\n                  </text>\n                </g>\n              }\n            </svg>\n          }\n\n          @case ('bar') {\n            <svg\n              class=\"nvb-chart__svg\"\n              [attr.width]=\"width()\"\n              [attr.height]=\"height()\"\n              role=\"img\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"ariaSummary()\"\n              (keydown)=\"onPlotKeydown($event)\"\n              (blur)=\"setActive(null)\"\n              (pointerleave)=\"setActive(null)\"\n              [attr.data-testid]=\"tid('plot')\"\n            >\n              <ng-container *ngTemplateOutlet=\"yAxis\"></ng-container>\n              @for (column of columns(); track column.index; let tidIndex4 = $index) {\n                <g [attr.data-testid]=\"tid('mark', tidIndex4)\"\n                  class=\"nvb-chart__mark\"\n                  [class.nvb-chart__mark--active]=\"activeIndex() === column.index\"\n                  (pointerenter)=\"setActive(column.index)\"\n                  (click)=\"onPointClick(column.index, $event)\"\n                >\n                  <rect\n                    class=\"nvb-chart__band\"\n                    [attr.x]=\"column.bandX\"\n                    [attr.y]=\"plot().top\"\n                    [attr.width]=\"column.bandWidth\"\n                    [attr.height]=\"plot().bottom - plot().top\"\n                  ></rect>\n                  <path class=\"nvb-chart__fill\" [attr.d]=\"column.path\"></path>\n                  @if (column.showValue && activeIndex() !== column.index) {\n                    <text\n                      [attr.x]=\"column.x + column.width / 2\"\n                      [attr.y]=\"column.valueY\"\n                      text-anchor=\"middle\"\n                      class=\"nvb-chart__value\"\n                    >\n                      {{ column.valueLabel }}\n                    </text>\n                  }\n                  @if (column.showAxisLabel) {\n                    <text\n                      [attr.x]=\"column.bandX + column.bandWidth / 2\"\n                      [attr.y]=\"plot().bottom + 17\"\n                      text-anchor=\"middle\"\n                      class=\"nvb-chart__category\"\n                    >\n                      {{ column.axisLabel }}\n                    </text>\n                  }\n                </g>\n              }\n              <line\n                class=\"nvb-chart__baseline\"\n                [attr.x1]=\"plot().left\"\n                [attr.x2]=\"plot().right\"\n                [attr.y1]=\"baselineY()\"\n                [attr.y2]=\"baselineY()\"\n              ></line>\n            </svg>\n          }\n\n          @default {\n            <svg\n              class=\"nvb-chart__svg\"\n              [attr.width]=\"width()\"\n              [attr.height]=\"height()\"\n              role=\"img\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"ariaSummary()\"\n              (keydown)=\"onPlotKeydown($event)\"\n              (blur)=\"setActive(null)\"\n              (pointermove)=\"onLinePointerMove($event)\"\n              (pointerleave)=\"setActive(null)\"\n              (click)=\"onLineClick($event)\"\n              [attr.data-testid]=\"tid('plot')\"\n            >\n              <ng-container *ngTemplateOutlet=\"yAxis\"></ng-container>\n              @if (chartType() === 'area') {\n                <path class=\"nvb-chart__area\" [attr.d]=\"areaPath()\"></path>\n              }\n              <path class=\"nvb-chart__line\" [attr.d]=\"linePath()\"></path>\n              @for (mark of lineMarks(); track mark.index) {\n                @if (mark.showAxisLabel) {\n                  <text\n                    [attr.x]=\"mark.x\"\n                    [attr.y]=\"plot().bottom + 17\"\n                    [attr.text-anchor]=\"\n                      $first && lineMarks().length > 1 ? 'start' : $last && lineMarks().length > 1 ? 'end' : 'middle'\n                    \"\n                    class=\"nvb-chart__category\"\n                  >\n                    {{ mark.axisLabel }}\n                  </text>\n                }\n              }\n              <line\n                class=\"nvb-chart__baseline\"\n                [attr.x1]=\"plot().left\"\n                [attr.x2]=\"plot().right\"\n                [attr.y1]=\"baselineY()\"\n                [attr.y2]=\"baselineY()\"\n              ></line>\n              @if (hover(); as active) {\n                <line\n                  class=\"nvb-chart__crosshair\"\n                  [attr.x1]=\"active.x\"\n                  [attr.x2]=\"active.x\"\n                  [attr.y1]=\"plot().top\"\n                  [attr.y2]=\"plot().bottom\"\n                ></line>\n                <circle class=\"nvb-chart__dot\" [attr.cx]=\"active.x\" [attr.cy]=\"active.y\" r=\"4.5\"></circle>\n              } @else if (lastLineMark(); as last) {\n                <circle class=\"nvb-chart__dot\" [attr.cx]=\"last.x\" [attr.cy]=\"last.y\" r=\"4\"></circle>\n                <text\n                  [attr.x]=\"last.x\"\n                  [attr.y]=\"last.y - 11\"\n                  [attr.text-anchor]=\"lineMarks().length > 1 ? 'end' : 'middle'\"\n                  class=\"nvb-chart__value\"\n                >\n                  {{ formatValue(last.point.value) }}\n                </text>\n              }\n            </svg>\n          }\n        }\n\n        @if (hover(); as active) {\n          <div\n            class=\"nvb-chart__tooltip\"\n            role=\"status\"\n            [style.left]=\"tooltipStyle()?.left\"\n            [style.top]=\"tooltipStyle()?.top\"\n            [style.transform]=\"tooltipStyle()?.transform\"\n            [attr.data-testid]=\"tid('tooltip')\"\n          >\n            <span class=\"nvb-chart__tooltip-key\" [style.background]=\"active.color\"></span>\n            <span class=\"nvb-chart__tooltip-value\">{{ formatValue(active.value) }}</span>\n            <span class=\"nvb-chart__tooltip-label\">{{ active.label }}</span>\n            @if (isClickable()) {\n              <span class=\"nvb-chart__tooltip-hint\">{{ 'chart.clickHint' | uiT: 'Click to select' }}</span>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <ng-template #yAxis>\n      <svg:g class=\"nvb-chart__axis\">\n        @for (tick of yTicks(); track tick.value) {\n          <svg:line\n            class=\"nvb-chart__grid\"\n            [attr.x1]=\"plot().left\"\n            [attr.x2]=\"plot().right\"\n            [attr.y1]=\"tick.pos\"\n            [attr.y2]=\"tick.pos\"\n          ></svg:line>\n          <svg:text\n            [attr.x]=\"plot().left - 10\"\n            [attr.y]=\"tick.pos\"\n            text-anchor=\"end\"\n            dominant-baseline=\"central\"\n            class=\"nvb-chart__tick\"\n          >\n            {{ tick.label }}\n          </svg:text>\n        }\n      </svg:g>\n    </ng-template>\n\n    @if (points().length) {\n      <table class=\"nvb-chart__sr-table\">\n        <caption>{{ model().title || ('chart.data' | uiT: 'Chart data') }}</caption>\n        <thead>\n          <tr>\n            <th scope=\"col\">{{ 'chart.label' | uiT: 'Label' }}</th>\n            <th scope=\"col\">{{ 'chart.value' | uiT: 'Value' }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (point of points(); track $index) {\n            <tr>\n              <th scope=\"row\">{{ point.label }}</th>\n              <td>{{ formatValue(point.value) }}</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    }\n  </section>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;min-width:0}.nvb-chart{position:relative;width:100%;box-sizing:border-box;padding:16px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-md, var(--nvb-radius-lg));background:var(--nvb-color-neutral-000);display:flex;flex-direction:column;gap:12px;min-width:0}.nvb-chart__title{margin:0;font-size:14px;font-weight:600;line-height:1.4;color:var(--nvb-color-neutral-900)}.nvb-chart__state{display:flex;align-items:center;justify-content:center;color:var(--nvb-color-neutral-500);font-size:13px}.nvb-chart__plot{position:relative;min-width:0}.nvb-chart__svg{display:block;overflow:visible;outline:none;font-family:inherit}.nvb-chart__svg:focus-visible{outline:2px solid var(--nvb-color-primary-500);outline-offset:4px;border-radius:var(--nvb-radius-sm)}.nvb-chart__grid{stroke:var(--nvb-color-neutral-150, var(--nvb-color-neutral-100));stroke-width:1;shape-rendering:crispEdges}.nvb-chart__baseline{stroke:var(--nvb-color-neutral-300);stroke-width:1;shape-rendering:crispEdges}.nvb-chart__tick{font-size:11px;fill:var(--nvb-color-neutral-500);font-variant-numeric:tabular-nums}.nvb-chart__category{font-size:11px;fill:var(--nvb-color-neutral-600)}.nvb-chart__value{font-size:11px;font-weight:600;fill:var(--nvb-color-neutral-700);font-variant-numeric:tabular-nums;pointer-events:none}.nvb-chart__mark{cursor:default}.nvb-chart--clickable .nvb-chart__mark,.nvb-chart--clickable .nvb-chart__slice,.nvb-chart--clickable .nvb-chart__legend-item,.nvb-chart--clickable .nvb-chart__line-hit{cursor:pointer}.nvb-chart__band{fill:transparent}.nvb-chart__mark--active .nvb-chart__band{fill:var(--nvb-color-neutral-050)}.nvb-chart__fill{fill:var(--nvb-chart-single, var(--nvb-color-primary-500));transition:fill .12s ease}.nvb-chart__mark--active .nvb-chart__fill{fill:color-mix(in oklab,var(--nvb-chart-single, var(--nvb-color-primary-500)) 82%,black)}.nvb-chart__line{fill:none;stroke:var(--nvb-chart-single, var(--nvb-color-primary-500));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nvb-chart__area{fill:var(--nvb-chart-single, var(--nvb-color-primary-500));fill-opacity:.1}.nvb-chart__crosshair{stroke:var(--nvb-color-neutral-300);stroke-width:1;shape-rendering:crispEdges;pointer-events:none}.nvb-chart__dot{fill:var(--nvb-chart-single, var(--nvb-color-primary-500));stroke:var(--nvb-color-neutral-000);stroke-width:2;pointer-events:none}.nvb-chart__circular{display:flex;flex-direction:column;align-items:center;gap:16px}.nvb-chart__circular--beside{flex-direction:row;align-items:center;gap:24px}.nvb-chart__svg--circular{flex:0 0 auto}.nvb-chart__slice{stroke:var(--nvb-color-neutral-000);stroke-width:2;stroke-linejoin:round;transition:opacity .12s ease}.nvb-chart__slice--dim{opacity:.35}.nvb-chart__center-value{font-size:22px;font-weight:600;fill:var(--nvb-color-neutral-900)}.nvb-chart__center-label{font-size:12px;fill:var(--nvb-color-neutral-500)}.nvb-chart__legend{flex:1 1 auto;width:100%;min-width:0;margin:0;padding:0;list-style:none;display:flex;flex-direction:column}.nvb-chart__legend-item{display:grid;grid-template-columns:10px minmax(0,1fr) auto 44px;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--nvb-radius-md);font-size:13px;line-height:1.3;color:var(--nvb-color-neutral-700);transition:background-color .12s ease,opacity .12s ease}.nvb-chart__legend-item+.nvb-chart__legend-item{border-top:1px solid var(--nvb-color-neutral-100)}.nvb-chart__legend-item--active{background:var(--nvb-color-neutral-050)}.nvb-chart__legend-item--dim{opacity:.55}.nvb-chart__swatch{width:10px;height:10px;border-radius:var(--nvb-radius-sm)}.nvb-chart__legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvb-chart__legend-value{font-weight:600;color:var(--nvb-color-neutral-900);font-variant-numeric:tabular-nums}.nvb-chart__legend-share{text-align:right;color:var(--nvb-color-neutral-500);font-variant-numeric:tabular-nums}.nvb-chart__legend--inline{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 16px}.nvb-chart__legend--inline .nvb-chart__legend-item{display:inline-flex;gap:6px;padding:2px 4px;border-top:0}.nvb-chart__legend--inline .nvb-chart__legend-label{max-width:160px}.nvb-chart__legend--inline .nvb-chart__legend-value{display:none}.nvb-chart__tooltip{position:absolute;z-index:20;display:grid;grid-template-columns:12px auto;align-items:center;column-gap:8px;row-gap:2px;padding:8px 10px;border:1px solid var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-lg);background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-8, 0 4px 16px rgba(0, 0, 0, .12));pointer-events:none;white-space:nowrap}.nvb-chart__tooltip-key{width:12px;height:2px;border-radius:1px}.nvb-chart__tooltip-value{font-size:14px;font-weight:600;color:var(--nvb-color-neutral-900);font-variant-numeric:tabular-nums}.nvb-chart__tooltip-hint{grid-column:2;margin-top:2px;font-size:11px;color:var(--nvb-color-primary-600)}.nvb-chart__center-hint{font-size:11px;fill:var(--nvb-color-primary-600)}.nvb-chart--clickable .nvb-chart__svg{cursor:pointer}.nvb-chart__tooltip-label{grid-column:2;font-size:12px;color:var(--nvb-color-neutral-600)}.nvb-chart__sr-table{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.nvb-chart__fill,.nvb-chart__slice,.nvb-chart__legend-item{transition:none}}\n"]}]}],propDecorators:{model:[{type:p.Input,args:[{isSignal:true,alias:"model",required:true}]}],plotRef:[{type:p.ViewChild,args:["chartRoot",{isSignal:true}]}]}});export{G as n,x as t};

package/fesm2022/ngxviewbuilder-runtime-checkbox-element-yAUJgMY7.mjs

@@ -1 +0,0 @@
-import{t as v}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{an as d,d as m,g as h,on as g}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{ft as f,i as p,rt as x,t as b}from"./ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.mjs";import*as o from"@angular/core";import{ChangeDetectionStrategy as y,Component as w,computed as u,inject as r,input as k,signal as l}from"@angular/core";var I=v({CheckboxElement:()=>s});var s=class c{model=k.required(...ngDevMode?[{debugName:"model"}]:[]);dataSourceLoaded=l(false,...ngDevMode?[{debugName:"dataSourceLoaded"}]:[]);isEditorView=l(d.isEditor(),...ngDevMode?[{debugName:"isEditorView"}]:[]);loadingPlaceholderItems=[0,1,2];dataVersion=l(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);dataService=r(g);eventService=r(h);expressionService=r(m);elementActionService=r(x);visibleOptions=u(()=>{this.dataVersion();return(this.model().options??[]).filter(e=>this.passesOptionFilters(e)&&this.isOptionVisible(e))},...ngDevMode?[{debugName:"visibleOptions"}]:[]);dataSourceLoading=u(()=>Boolean(this.model().dataSource)&&!this.dataSourceLoaded()&&!this.isEditorView(),...ngDevMode?[{debugName:"dataSourceLoading"}]:[]);onDataSourceLoadedHandler=()=>{this.dataSourceLoaded.set(true);this.dataVersion.update(e=>e+1)};onDataValueChangedHandler=()=>{this.dataVersion.update(e=>e+1)};ngOnInit(){const e=!this.model().dataSource||!!this.model().dataSourceLoaded;this.dataSourceLoaded.set(e);this.model().afterDataSourceLoad.add(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.add(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.add(this.onDataValueChangedHandler);this.isEditorView.set(d.isEditor())}ngOnDestroy(){this.model().afterDataSourceLoad.remove(this.onDataSourceLoadedHandler);this.dataService.onValueChanged.remove(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.remove(this.onDataValueChangedHandler)}selectOption(e){if(this.isInteractionLocked())return;const n=Array.isArray(this.model().value)?[...this.model().value]:[];const t=n.findIndex(i=>i===e.value);if(t>=0)n.splice(t,1);else n.push(e.value);this.model().setValue(n,"change");this.runActions("input",e);this.runActions("change",e)}onOptionFocus(e){if(this.isInteractionLocked())return;this.runActions("focus",e)}onOptionBlur(e){if(this.isInteractionLocked())return;this.runActions("blur",e)}valueChecked(e){return Array.isArray(this.model().value)&&this.model().value.includes(e.value)}resolveOptionInputId(e,n){return`${this.slugify(String(this.model()?.dataPath??"").trim()||String(this.model()?.name??"").trim()||"checkbox")}-option-${this.slugify(String(e?.value??n).trim()||String(n+1))}`}resolveOptionTestId(e,n){return`nvb-${p(String(this.model()?.dataPath??"").trim()||String(this.model()?.name??"").trim()||"checkbox")}-checkbox-${p(String(e?.value??n).trim()||String(n+1))}`}resolveOptionAriaLabel(e,n){const t=String(e?.label??"").trim();if(t)return t;return`Option ${n+1}`}isOptionVisible(e){const n=String(e?.visibleIf??"").trim();if(!n)return true;try{const t=n.replace(/{/g,"").replace(/}/g,"").trim();if(!t)return true;const i=this.expressionService.applyContextToExpression(t,this.model());return!!this.expressionService.runPropertyConditionSync(this.dataService.getData(),i)}catch{return true}}passesOptionFilters(e){const n=String(this.model().filterOptionsBy??"").trim()||String(this.model().dataSource?.filterOptionsBy??"").trim();const t=String(this.model().filterIfEqual??"").trim();const i=String(this.model().filterIfNotEqual??"").trim();if(!n&&!t&&!i)return true;const a=this.dataService.getData()??{};return f([e],n,a,{valuePath:"value",filterIfEqual:t,filterIfNotEqual:i}).length>0}runActions(e,n){const t=Array.isArray(this.model().value)?[...this.model().value]:[];const i=String(this.model().name??"").trim();const a={value:t,item:n??null,row:null};if(i)a[i]=t;this.elementActionService.runActions(this.model(),this.model().events??[],e,a)}isInteractionLocked(){const e=this.model();if(!e)return false;if(Boolean(e["__pfInteractionLocked"]))return true;return this.dataSourceLoading()||Boolean(e.disabled)||Boolean(e.readOnly)}slugify(e){return String(e??"").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+/,"").replace(/-+$/,"").slice(0,50)}static ɵfac=o.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:o,type:c,deps:[],target:o.ɵɵFactoryTarget.Component});static ɵcmp=o.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:c,isStandalone:true,selector:"checkbox-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:o,template:'<element-wrapper\n  [model]="model()"\n  [labelForInput]="null"\n  groupRole="group"\n  #fieldWrapper="elementWrapper"\n>\n  @if (model().dataSource && !dataSourceLoaded()) {\n    @if (isEditorView()) {\n      <div class="nvb-empty-element-wrapper">\n        <ul class="nvb-empty-row" [class.nvb-row]="model().showInline" [class.nvb-column]="!model().showInline">\n          <li>\n            <input type="checkbox" class="nvb-control__checkbox-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n          <li>\n            <input type="checkbox" class="nvb-control__checkbox-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n          <li>\n            <input type="checkbox" class="nvb-control__checkbox-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n        </ul>\n        <small class="nvb-element-title">\n          <span class="material-symbols-outlined">database</span>\n          {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n        </small>\n      </div>\n    } @else {\n      <ul\n        [id]="fieldWrapper.controlId()"\n        class="nvb-choice-list nvb-choice-list--loading"\n        [class.nvb-choice-list--fit-content]="model().fitContent"\n        [class.nvb-row]="model().showInline"\n        [class.nvb-column]="!model().showInline"\n        [attr.aria-describedby]="fieldWrapper.describedByIds()"\n        aria-busy="true"\n        aria-live="polite"\n        role="status"\n      >\n        @for (placeholder of loadingPlaceholderItems; track placeholder) {\n          <li class="nvb-choice-loading-item" aria-hidden="true">\n            <span class="nvb-choice-loading-box"></span>\n            <span class="nvb-choice-loading-line"></span>\n          </li>\n        }\n        <span class="nvb-sr-only">Loading checkbox options...</span>\n      </ul>\n    }\n  } @else {\n    <ul\n      [id]="fieldWrapper.controlId()"\n      class="nvb-choice-list"\n      [class.nvb-choice-list--fit-content]="model().fitContent"\n      [class.nvb-row]="model().showInline"\n      [class.nvb-column]="!this.model().showInline"\n      [attr.aria-describedby]="fieldWrapper.describedByIds()"\n    >\n      @for (option of visibleOptions(); track option.value ?? $index; let optionIndex = $index) {\n        <li class="nvb-input-wrapper">\n          <input\n            type="checkbox"\n            [id]="resolveOptionInputId(option, optionIndex)"\n            [attr.name]="model().name"\n            [attr.value]="option.value"\n            [attr.data-testid]="resolveOptionTestId(option, optionIndex)"\n            [attr.aria-describedby]="fieldWrapper.describedByIds()"\n            class="nvb-control__checkbox-input"\n            [disabled]="model().disabled"\n            (click)="selectOption(option)"\n            (focus)="onOptionFocus(option)"\n            (blur)="onOptionBlur(option)"\n            [checked]="valueChecked(option)"\n          />\n          <label [for]="resolveOptionInputId(option, optionIndex)">{{ option.label }}</label>\n        </li>\n      }\n    </ul>\n  }\n</element-wrapper>\n',styles:[".nvb-input-wrapper{display:flex;gap:var(--nvb-space-3);justify-content:start;align-items:center;font-size:14px;line-height:20px}.nvb-input-wrapper .nvb-control__checkbox-input:disabled{cursor:not-allowed;opacity:.55}.nvb-input-wrapper .nvb-control__checkbox-input:disabled+label{color:var(--nvb-color-neutral-500)}.nvb-choice-list,ul{flex-wrap:wrap;display:flex;gap:var(--nvb-space-3);padding-top:0;margin:0}.nvb-row{flex-direction:row}.nvb-column{flex-direction:column}.nvb-choice-list--loading{width:100%}.nvb-choice-list--fit-content{width:fit-content;max-width:100%}.nvb-choice-loading-item{display:inline-flex;align-items:center;gap:var(--nvb-space-3);min-height:24px;min-width:min(180px,100%)}.nvb-column .nvb-choice-loading-item{width:100%}.nvb-choice-loading-box{width:16px;height:16px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-xs, var(--nvb-radius-sm));background:var(--nvb-color-neutral-000);flex:0 0 auto}.nvb-choice-loading-line{border-radius:var(--nvb-radius-full);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;height:12px;width:100%;max-width:132px;animation:checkbox-choice-shimmer 1.35s ease-in-out infinite}@keyframes checkbox-choice-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.nvb-meta-info{display:flex;flex-direction:column;gap:2px;font-size:small}.nvb-meta-info-wrapper{display:flex;gap:var(--nvb-space-7)}.nvb-empty-row{display:flex;gap:var(--nvb-space-3)}.nvb-empty-row li{display:flex;gap:var(--nvb-space-2);justify-content:start;align-items:center;font-size:14px;flex-grow:1}.nvb-empty-row__blank{border-color:var(--nvb-color-neutral-050);width:100%}.nvb-empty-row__title{color:var(--nvb-color-neutral-500)}.nvb-element-title{color:var(--nvb-color-neutral-400);display:flex;align-items:center;gap:var(--nvb-space-2)}.nvb-element-title span{font-size:20px}.nvb-empty-element-wrapper{display:flex;flex-direction:column;gap:var(--nvb-space-3)}\n"],dependencies:[{kind:"component",type:b,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]}],changeDetection:o.ChangeDetectionStrategy.OnPush})};o.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:o,type:s,decorators:[{type:w,args:[{selector:"checkbox-element",changeDetection:y.OnPush,imports:[b],template:'<element-wrapper\n  [model]="model()"\n  [labelForInput]="null"\n  groupRole="group"\n  #fieldWrapper="elementWrapper"\n>\n  @if (model().dataSource && !dataSourceLoaded()) {\n    @if (isEditorView()) {\n      <div class="nvb-empty-element-wrapper">\n        <ul class="nvb-empty-row" [class.nvb-row]="model().showInline" [class.nvb-column]="!model().showInline">\n          <li>\n            <input type="checkbox" class="nvb-control__checkbox-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n          <li>\n            <input type="checkbox" class="nvb-control__checkbox-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n          <li>\n            <input type="checkbox" class="nvb-control__checkbox-input" tabindex="-1" aria-hidden="true" disabled />\n            <hr class="nvb-empty-row__blank" />\n          </li>\n        </ul>\n        <small class="nvb-element-title">\n          <span class="material-symbols-outlined">database</span>\n          {{ model()?.dataSource?.source?.title || model()?.dataSource?.name }}\n        </small>\n      </div>\n    } @else {\n      <ul\n        [id]="fieldWrapper.controlId()"\n        class="nvb-choice-list nvb-choice-list--loading"\n        [class.nvb-choice-list--fit-content]="model().fitContent"\n        [class.nvb-row]="model().showInline"\n        [class.nvb-column]="!model().showInline"\n        [attr.aria-describedby]="fieldWrapper.describedByIds()"\n        aria-busy="true"\n        aria-live="polite"\n        role="status"\n      >\n        @for (placeholder of loadingPlaceholderItems; track placeholder) {\n          <li class="nvb-choice-loading-item" aria-hidden="true">\n            <span class="nvb-choice-loading-box"></span>\n            <span class="nvb-choice-loading-line"></span>\n          </li>\n        }\n        <span class="nvb-sr-only">Loading checkbox options...</span>\n      </ul>\n    }\n  } @else {\n    <ul\n      [id]="fieldWrapper.controlId()"\n      class="nvb-choice-list"\n      [class.nvb-choice-list--fit-content]="model().fitContent"\n      [class.nvb-row]="model().showInline"\n      [class.nvb-column]="!this.model().showInline"\n      [attr.aria-describedby]="fieldWrapper.describedByIds()"\n    >\n      @for (option of visibleOptions(); track option.value ?? $index; let optionIndex = $index) {\n        <li class="nvb-input-wrapper">\n          <input\n            type="checkbox"\n            [id]="resolveOptionInputId(option, optionIndex)"\n            [attr.name]="model().name"\n            [attr.value]="option.value"\n            [attr.data-testid]="resolveOptionTestId(option, optionIndex)"\n            [attr.aria-describedby]="fieldWrapper.describedByIds()"\n            class="nvb-control__checkbox-input"\n            [disabled]="model().disabled"\n            (click)="selectOption(option)"\n            (focus)="onOptionFocus(option)"\n            (blur)="onOptionBlur(option)"\n            [checked]="valueChecked(option)"\n          />\n          <label [for]="resolveOptionInputId(option, optionIndex)">{{ option.label }}</label>\n        </li>\n      }\n    </ul>\n  }\n</element-wrapper>\n',styles:[".nvb-input-wrapper{display:flex;gap:var(--nvb-space-3);justify-content:start;align-items:center;font-size:14px;line-height:20px}.nvb-input-wrapper .nvb-control__checkbox-input:disabled{cursor:not-allowed;opacity:.55}.nvb-input-wrapper .nvb-control__checkbox-input:disabled+label{color:var(--nvb-color-neutral-500)}.nvb-choice-list,ul{flex-wrap:wrap;display:flex;gap:var(--nvb-space-3);padding-top:0;margin:0}.nvb-row{flex-direction:row}.nvb-column{flex-direction:column}.nvb-choice-list--loading{width:100%}.nvb-choice-list--fit-content{width:fit-content;max-width:100%}.nvb-choice-loading-item{display:inline-flex;align-items:center;gap:var(--nvb-space-3);min-height:24px;min-width:min(180px,100%)}.nvb-column .nvb-choice-loading-item{width:100%}.nvb-choice-loading-box{width:16px;height:16px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-radius-xs, var(--nvb-radius-sm));background:var(--nvb-color-neutral-000);flex:0 0 auto}.nvb-choice-loading-line{border-radius:var(--nvb-radius-full);background:linear-gradient(90deg,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 25%,var(--nvb-color-neutral-200) 50%,color-mix(in oklab,var(--nvb-color-neutral-100) 86%,var(--nvb-color-neutral-000)) 75%);background-size:200% 100%;height:12px;width:100%;max-width:132px;animation:checkbox-choice-shimmer 1.35s ease-in-out infinite}@keyframes checkbox-choice-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.nvb-meta-info{display:flex;flex-direction:column;gap:2px;font-size:small}.nvb-meta-info-wrapper{display:flex;gap:var(--nvb-space-7)}.nvb-empty-row{display:flex;gap:var(--nvb-space-3)}.nvb-empty-row li{display:flex;gap:var(--nvb-space-2);justify-content:start;align-items:center;font-size:14px;flex-grow:1}.nvb-empty-row__blank{border-color:var(--nvb-color-neutral-050);width:100%}.nvb-empty-row__title{color:var(--nvb-color-neutral-500)}.nvb-element-title{color:var(--nvb-color-neutral-400);display:flex;align-items:center;gap:var(--nvb-space-2)}.nvb-element-title span{font-size:20px}.nvb-empty-element-wrapper{display:flex;flex-direction:column;gap:var(--nvb-space-3)}\n"]}]}],propDecorators:{model:[{type:o.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{I as n,s as t};