playbook_ui 15.0.0.pre.alpha.removewebpacker10549 → 15.0.0.pre.alpha.removewebpacker10550

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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c7ac1e8ff6d7cfcd2fcf7660fc26e5585eb1f54a37107e03ba8864df37fde50d
4
- data.tar.gz: a38023975d9ce5398f87737d4d2ee78fb9467ceb5fe801f2e11e09b0af90d099
3
+ metadata.gz: c56c68794eed5778482082d9cb680e61df690803338cc716e101a915c9e47f83
4
+ data.tar.gz: ea1a964f5f7f7f66346d9ef849d45798f030326e559a5dd0718f5bf56ebdf926
5
5
  SHA512:
6
- metadata.gz: 3a9d6d917182a8ae335cf2741aff92c321a75332ca1db15a46b90ab31eb3c6dafbb3ac6bb39c066cec0e07cd216cdf676dfe22e7a474a07ca7bdae77b392c965
7
- data.tar.gz: 2f5dc9be0293d0e3dc7be1d10963c9527d7bd2e781041ad6f72fd6968ae01e16b9b444b421a4640d847ecd556e5790e0ddaec5665a24fab877c952e76c3094e9
6
+ metadata.gz: 17aa8860a451525c113b40be081d8a84e308c352c3e55e504ee1dcc8f5622fa115c89bc5b9ae42725822e93c6604af2f07ce26aab410e6e9f8cca573e02293e9
7
+ data.tar.gz: a216ad2a5724dba9a7024c2fec6ec2bad8f700a3f926192061e4c53fdd546529c7009f54a4d733e93d34b2100d0c79f9fb50ba4fe7de4266310a4a17a77ac7d7
@@ -93,8 +93,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
93
93
  className
94
94
  );
95
95
 
96
- const inputId = id ? `${id}_multiselect_input` : `${Math.random().toString(36).slice(2)}_multiselect_input`;
97
-
98
96
  const dropdownRef = useRef(null);
99
97
 
100
98
  // State for whether dropdown is open or closed
@@ -328,11 +326,14 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
328
326
 
329
327
  // Handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
330
328
  const handleInputWrapperClick = (e: any) => {
331
- console.log("test", inputId, e.target.id)
332
- if (disabled) return
333
- // ignore clicks that originated from the input or pills
334
- if (e.target.id === inputId || e.target.classList?.contains('pb_form_pill_tag')) return
335
- setIsDropdownClosed(false)
329
+ if (
330
+ e.target.id === "multiselect_input" ||
331
+ e.target.classList.contains("pb_form_pill_tag") ||
332
+ disabled
333
+ ) {
334
+ return;
335
+ }
336
+ setIsDropdownClosed(!isDropdownClosed);
336
337
  };
337
338
 
338
339
  // Main function to handle any click inside dropdown
@@ -441,10 +442,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
441
442
  }
442
443
  };
443
444
 
444
- const handleChevronClick = (e: React.MouseEvent) => {
445
- e.stopPropagation()
446
- setIsDropdownClosed(prev => !prev)
447
- }
448
445
 
449
446
  return (
450
447
  <div
@@ -558,13 +555,13 @@ const handleChevronClick = (e: React.MouseEvent) => {
558
555
 
559
556
  <input
560
557
  disabled={disabled}
561
- id={inputId}
558
+ id="multiselect_input"
562
559
  onChange={(e) => {
563
560
  variant === "single"
564
561
  ? handleRadioInputChange(e.target.value)
565
562
  : setFilterItem(e.target.value);
566
563
  }}
567
- onClick={(e) => { e.stopPropagation(); setIsDropdownClosed(false) }}
564
+ onClick={() => setIsDropdownClosed(false)}
568
565
  placeholder={
569
566
  inputDisplay === "none" && itemsSelectedLength()
570
567
  ? `${itemsSelectedLength()} ${
@@ -579,8 +576,7 @@ const handleChevronClick = (e: React.MouseEvent) => {
579
576
 
580
577
  {isDropdownClosed ? (
581
578
  <div id={arrowDownElementId}
582
- key="chevron-down"
583
- onClick={handleChevronClick}>
579
+ key="chevron-down">
584
580
  <Icon
585
581
  icon="chevron-down"
586
582
  id={arrowDownElementId}
@@ -589,8 +585,7 @@ const handleChevronClick = (e: React.MouseEvent) => {
589
585
  </div>
590
586
  ) : (
591
587
  <div id={arrowUpElementId}
592
- key="chevron-up"
593
- onClick={handleChevronClick}>
588
+ key="chevron-up">
594
589
  <Icon
595
590
  icon="chevron-up"
596
591
  id={arrowUpElementId}
@@ -12,129 +12,94 @@ export default class PbMultiLevelSelect extends PbEnhancedElement {
12
12
  }
13
13
 
14
14
  connect() {
15
- this.justBlurred = false;
16
15
  this.addEventListeners();
17
16
  this.observeHiddenInputs();
18
17
  this.observeRogueErrorInsideInnerContainer();
19
- // @ts-ignore
20
- console.log("[MLS ENHANCER] connect", this.element);
21
- }
22
-
23
- disconnect() {
24
- if (this.inputElement && this.onInvalid) {
25
- this.inputElement.removeEventListener("invalid", this.onInvalid);
26
- }
27
- if (this.inputElement && this.onBlur) {
28
- this.inputElement.removeEventListener("blur", this.onBlur);
29
- }
30
- if (this.mutationObserver) {
31
- this.mutationObserver.disconnect();
32
- }
33
- if (this.rogueErrorObserver) {
34
- this.rogueErrorObserver.disconnect();
35
- }
36
- // @ts-ignore
37
- console.log("[MLS ENHANCER] disconnect", this.element);
38
18
  }
39
19
 
40
20
  addEventListeners() {
41
21
  const inputElement = this.element.querySelector("input");
42
- if (!inputElement) {
43
- // @ts-ignore
44
- console.log("[MLS ENHANCER] no input found");
45
- return;
46
- }
47
-
48
- this.inputElement = inputElement;
49
22
 
50
- this.onInvalid = () => {
51
- // @ts-ignore
52
- console.log("[MLS ENHANCER] input invalid");
23
+ inputElement.addEventListener("invalid", () => {
53
24
  this.handleErrorLabel(300);
54
- };
55
-
56
- this.onBlur = () => {
25
+ });
26
+ inputElement.addEventListener("blur", () => {
57
27
  this.justBlurred = true;
58
- // @ts-ignore
59
- console.log("[MLS ENHANCER] input blur");
28
+
60
29
  setTimeout(() => {
61
30
  this.justBlurred = false;
62
31
  }, 300);
63
- };
64
-
65
- inputElement.addEventListener("invalid", this.onInvalid);
66
- inputElement.addEventListener("blur", this.onBlur);
67
- // @ts-ignore
68
- console.log("[MLS ENHANCER] listeners attached");
32
+ });
69
33
  }
70
34
 
71
35
  handleErrorLabel(delay) {
72
36
  setTimeout(() => {
73
37
  const errorLabelElement = this.target;
74
38
  const wrapper = this.element.querySelector(".wrapper");
75
- // @ts-ignore
76
- console.log("[MLS ENHANCER] handleErrorLabel", {
77
- hasErrorLabel: !!errorLabelElement,
78
- hasWrapper: !!wrapper,
79
- });
39
+
40
+ if (errorLabelElement) {
41
+ errorLabelElement.remove();
42
+ if (wrapper) {
43
+ if (wrapper.querySelector(".pb_body_kit_negative")) {
44
+ wrapper.querySelector(".pb_body_kit_negative").remove();
45
+ }
46
+ wrapper.appendChild(errorLabelElement);
47
+ }
48
+ this.element.classList.add("error");
49
+ } else {
50
+ this.handleErrorLabel(100);
51
+ }
80
52
  }, delay);
81
53
  }
82
54
 
83
55
  observeHiddenInputs() {
84
56
  const container = this.element.querySelector(".input_inner_container");
85
- if (!container) {
86
- // @ts-ignore
87
- console.log("[MLS ENHANCER] no .input_inner_container found");
88
- return;
89
- }
57
+ if (!container) return;
90
58
 
91
- this.mutationObserver = new MutationObserver((mutations) => {
92
- // @ts-ignore
93
- console.log("[MLS ENHANCER] hidden inputs observer mutations", mutations.length);
59
+ this.mutationObserver = new MutationObserver(() => {
94
60
  const hiddenInputs = container.querySelectorAll('input[type="hidden"]');
95
- // @ts-ignore
96
- console.log("[MLS ENHANCER] hidden inputs count", hiddenInputs.length);
97
61
  if (hiddenInputs.length > 0) {
98
- this.clearError({});
62
+ // At least one hidden input exists, so clear the error
63
+ this.clearError();
99
64
  }
100
65
  });
101
66
 
102
- this.mutationObserver.observe(container, { childList: true });
103
- // @ts-ignore
104
- console.log("[MLS ENHANCER] hidden inputs observer attached");
67
+ this.mutationObserver.observe(container, {
68
+ childList: true,
69
+ });
105
70
  }
106
71
 
107
72
  observeRogueErrorInsideInnerContainer() {
108
73
  const container = this.element.querySelector(".input_inner_container");
109
- if (!container) {
110
- // @ts-ignore
111
- console.log("[MLS ENHANCER] no .input_inner_container for rogue observer");
112
- return;
113
- }
114
74
 
115
75
  this.rogueErrorObserver = new MutationObserver((mutations) => {
116
- // @ts-ignore
117
- console.log("[MLS ENHANCER] rogue error observer mutations", mutations.length, "justBlurred:", this.justBlurred);
118
76
  for (const mutation of mutations) {
119
77
  for (const node of mutation.addedNodes) {
120
78
  if (
121
79
  node.nodeType === Node.ELEMENT_NODE &&
122
80
  node.classList.contains("pb_body_kit_negative")
123
81
  ) {
124
- // @ts-ignore
125
- console.log("[MLS ENHANCER] pb_body_kit_negative added inside inner container", node);
82
+ if (this.justBlurred) {
83
+ node.remove();
84
+ }
126
85
  }
127
86
  }
128
87
  }
129
88
  });
130
89
 
131
- this.rogueErrorObserver.observe(container, { childList: true, subtree: true });
132
- // @ts-ignore
133
- console.log("[MLS ENHANCER] rogue error observer attached");
90
+ this.rogueErrorObserver.observe(container, {
91
+ childList: true,
92
+ subtree: true,
93
+ });
134
94
  }
135
95
 
136
96
  clearError(e) {
137
- // @ts-ignore
138
- console.log("[MLS ENHANCER] clearError called", e);
97
+ const errorLabelElement = this.target;
98
+
99
+ if (errorLabelElement) {
100
+ errorLabelElement.remove();
101
+ this.element.classList.remove("error");
102
+ this.element.querySelector("input").value = e.detail.value;
103
+ }
139
104
  }
140
105
  }
@@ -1 +1 @@
1
- import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{c as buildAriaProps,d as buildDataProps,e as buildHtmlProps,H as HighchartsReact,f as Highcharts,g as classnames,h as globalProps,i as HighchartsMore,S as SolidGauge,j as buildCss}from"./_typeahead-ouDP07fM.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-QZuu1ltS.js";const mapColors=array=>{const regex=/(data)\-[1-8]/;const newArray=array.map((item=>regex.test(item)?`${colors[`data_${item[item.length-1]}`]}`:item));return newArray};const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors2,htmlOptions:htmlOptions={},customOptions:customOptions={},axisFormat:axisFormat,id:id,pointStart:pointStart,stacking:stacking,subTitle:subTitle,type:type="column",title:title="Title",xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,legend:legend=false,toggleLegendClick:toggleLegendClick=true,height:height,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:[{labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat&&axisFormat[0]?axisFormat[0].format:""},min:yAxisMin,max:yAxisMax,opposite:false,title:{text:Array.isArray(axisTitle)?axisTitle.length>0?axisTitle[0].name:null:axisTitle},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]}],xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{stacking:stacking,pointStart:pointStart,borderWidth:stacking?0:"",events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(Array.isArray(axisTitle)&&axisTitle.length>1&&axisTitle[1].name){staticOptions.yAxis.push({labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat[1].format},min:yAxisMin,max:yAxisMax,opposite:true,title:{text:axisTitle[1].name},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]})}if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const alignBlockElement=event=>{const itemToMove=document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`);const chartContainer=document.querySelector(`#${event.target.renderTo.id}`);if(itemToMove!==null&&chartContainer!==null){itemToMove.style.height=`${event.target.chartHeight}px`;itemToMove.style.width=`${event.target.chartWidth}px`;if(chartContainer.firstChild!==null){chartContainer.firstChild.before(itemToMove)}}};const CircleChart=({align:align="center",aria:aria={},rounded:rounded=false,borderColor:borderColor=(rounded?null:""),borderWidth:borderWidth=(rounded?20:null),chartData:chartData,children:children,className:className,colors:colors2=[],customOptions:customOptions={},dark:dark=false,data:data={},dataLabelHtml:dataLabelHtml="<div>{point.name}</div>",dataLabels:dataLabels=false,height:height,htmlOptions:htmlOptions={},id:id,innerSize:innerSize="md",legend:legend=false,maxPointSize:maxPointSize=null,minPointSize:minPointSize=null,startAngle:startAngle=null,style:style="pie",title:title,tooltipHtml:tooltipHtml,useHtml:useHtml=false,zMin:zMin=null,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{headerFormat:null,pointFormat:tooltipHtml?tooltipHtml:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',useHTML:useHtml}});const innerSizes={sm:"35%",md:"50%",lg:"85%",none:"0%"};const innerSizeFormat=size=>innerSizes[size];const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={title:{text:title},chart:{height:height,type:style,events:{render:event=>alignBlockElement(event),redraw:event=>alignBlockElement(event)}},legend:{align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},plotOptions:{pie:{colors:colors2.length>0?mapColors(colors2):highchartsTheme.colors,dataLabels:{enabled:dataLabels,connectorShape:"straight",connectorWidth:3,format:dataLabelHtml},showInLegend:legend}},series:[{minPointSize:minPointSize,maxPointSize:maxPointSize,innerSize:borderWidth==20?"100%":innerSizeFormat(innerSize),data:formattedChartData,zMin:zMin,startAngle:startAngle,borderWidth:borderWidth,borderColor:borderColor}],credits:false};setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(Fragment,{children:children?jsxs("div",{id:`wrapper-circle-chart-${id}`,children:[jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options}),jsx("div",{className:"pb-circle-chart-block",children:children})]}):jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})})};const Gauge=({aria:aria={},chartData:chartData,customOptions:customOptions={},dark:dark=false,data:data={},disableAnimation:disableAnimation=false,fullCircle:fullCircle=false,height:height=null,htmlOptions:htmlOptions={},id:id,max:max=100,min:min=0,prefix:prefix="",showLabels:showLabels=false,style:style="solidgauge",suffix:suffix="",title:title="",tooltipHtml:tooltipHtml='<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',colors:colors$1=[],minorTickInterval:minorTickInterval=null,circumference:circumference=(fullCircle?[0,360]:[-100,100]),...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);SolidGauge(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{pointFormat:tooltipHtml,followPointer:true}});const css=buildCss({pb_gauge_kit:true});const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={chart:{events:{load(){setTimeout(this.reflow.bind(this),0)}},type:style,height:height},title:{text:title},yAxis:{min:min,max:max,lineWidth:0,tickWidth:0,minorTickInterval:minorTickInterval,tickAmount:2,tickPositions:[min,max],labels:{y:26,enabled:showLabels}},credits:false,series:[{data:formattedChartData}],pane:{center:["50%","50%"],size:"90%",startAngle:circumference[0],endAngle:circumference[1],background:{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane"}},colors:colors$1!==void 0&&colors$1.length>0?mapColors(colors$1):highchartsTheme.colors,plotOptions:{series:{animation:!disableAnimation},solidgauge:{borderColor:colors$1!==void 0&&colors$1.length===1?mapColors(colors$1).join():highchartsTheme.colors[0],borderWidth:20,radius:90,innerRadius:"90%",dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:`<span class="prefix${dark?" dark":""}">${prefix}</span><span class="fix${dark?" dark":""}">{y:,f}</span><span class="suffix${dark?" dark":""}">${suffix}</span>`,style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}}};setOptions(merge(staticOptions,customOptions));if(document.querySelector(".prefix")){document.querySelectorAll(".prefix").forEach((prefix2=>{prefix2.setAttribute("y","28")}));document.querySelectorAll(".fix").forEach((fix=>fix.setAttribute("y","38")))}}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(css,globalProps(props)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const LineGraph=({aria:aria={},data:data={},align:align="center",className:className="pb_bar_graph",customOptions:customOptions={},dark:dark=false,gradient:gradient=false,type:type="line",htmlOptions:htmlOptions={},id:id,legend:legend=false,toggleLegendClick:toggleLegendClick=true,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,axisTitle:axisTitle,xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,chartData:chartData,pointStart:pointStart,subTitle:subTitle,title:title,height:height,colors:colors2=[],...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:{min:yAxisMin,max:yAxisMax,title:{text:axisTitle}},xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{pointStart:pointStart,events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};export{BarGraph as B,CircleChart as C,Gauge as G,LineGraph as L};
1
+ import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{c as buildAriaProps,d as buildDataProps,e as buildHtmlProps,H as HighchartsReact,f as Highcharts,g as classnames,h as globalProps,i as HighchartsMore,S as SolidGauge,j as buildCss}from"./_typeahead-DCpj5VBx.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-QZuu1ltS.js";const mapColors=array=>{const regex=/(data)\-[1-8]/;const newArray=array.map((item=>regex.test(item)?`${colors[`data_${item[item.length-1]}`]}`:item));return newArray};const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors2,htmlOptions:htmlOptions={},customOptions:customOptions={},axisFormat:axisFormat,id:id,pointStart:pointStart,stacking:stacking,subTitle:subTitle,type:type="column",title:title="Title",xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,legend:legend=false,toggleLegendClick:toggleLegendClick=true,height:height,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:[{labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat&&axisFormat[0]?axisFormat[0].format:""},min:yAxisMin,max:yAxisMax,opposite:false,title:{text:Array.isArray(axisTitle)?axisTitle.length>0?axisTitle[0].name:null:axisTitle},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]}],xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{stacking:stacking,pointStart:pointStart,borderWidth:stacking?0:"",events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(Array.isArray(axisTitle)&&axisTitle.length>1&&axisTitle[1].name){staticOptions.yAxis.push({labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat[1].format},min:yAxisMin,max:yAxisMax,opposite:true,title:{text:axisTitle[1].name},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]})}if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const alignBlockElement=event=>{const itemToMove=document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`);const chartContainer=document.querySelector(`#${event.target.renderTo.id}`);if(itemToMove!==null&&chartContainer!==null){itemToMove.style.height=`${event.target.chartHeight}px`;itemToMove.style.width=`${event.target.chartWidth}px`;if(chartContainer.firstChild!==null){chartContainer.firstChild.before(itemToMove)}}};const CircleChart=({align:align="center",aria:aria={},rounded:rounded=false,borderColor:borderColor=(rounded?null:""),borderWidth:borderWidth=(rounded?20:null),chartData:chartData,children:children,className:className,colors:colors2=[],customOptions:customOptions={},dark:dark=false,data:data={},dataLabelHtml:dataLabelHtml="<div>{point.name}</div>",dataLabels:dataLabels=false,height:height,htmlOptions:htmlOptions={},id:id,innerSize:innerSize="md",legend:legend=false,maxPointSize:maxPointSize=null,minPointSize:minPointSize=null,startAngle:startAngle=null,style:style="pie",title:title,tooltipHtml:tooltipHtml,useHtml:useHtml=false,zMin:zMin=null,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{headerFormat:null,pointFormat:tooltipHtml?tooltipHtml:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',useHTML:useHtml}});const innerSizes={sm:"35%",md:"50%",lg:"85%",none:"0%"};const innerSizeFormat=size=>innerSizes[size];const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={title:{text:title},chart:{height:height,type:style,events:{render:event=>alignBlockElement(event),redraw:event=>alignBlockElement(event)}},legend:{align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},plotOptions:{pie:{colors:colors2.length>0?mapColors(colors2):highchartsTheme.colors,dataLabels:{enabled:dataLabels,connectorShape:"straight",connectorWidth:3,format:dataLabelHtml},showInLegend:legend}},series:[{minPointSize:minPointSize,maxPointSize:maxPointSize,innerSize:borderWidth==20?"100%":innerSizeFormat(innerSize),data:formattedChartData,zMin:zMin,startAngle:startAngle,borderWidth:borderWidth,borderColor:borderColor}],credits:false};setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(Fragment,{children:children?jsxs("div",{id:`wrapper-circle-chart-${id}`,children:[jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options}),jsx("div",{className:"pb-circle-chart-block",children:children})]}):jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})})};const Gauge=({aria:aria={},chartData:chartData,customOptions:customOptions={},dark:dark=false,data:data={},disableAnimation:disableAnimation=false,fullCircle:fullCircle=false,height:height=null,htmlOptions:htmlOptions={},id:id,max:max=100,min:min=0,prefix:prefix="",showLabels:showLabels=false,style:style="solidgauge",suffix:suffix="",title:title="",tooltipHtml:tooltipHtml='<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',colors:colors$1=[],minorTickInterval:minorTickInterval=null,circumference:circumference=(fullCircle?[0,360]:[-100,100]),...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);SolidGauge(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{pointFormat:tooltipHtml,followPointer:true}});const css=buildCss({pb_gauge_kit:true});const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={chart:{events:{load(){setTimeout(this.reflow.bind(this),0)}},type:style,height:height},title:{text:title},yAxis:{min:min,max:max,lineWidth:0,tickWidth:0,minorTickInterval:minorTickInterval,tickAmount:2,tickPositions:[min,max],labels:{y:26,enabled:showLabels}},credits:false,series:[{data:formattedChartData}],pane:{center:["50%","50%"],size:"90%",startAngle:circumference[0],endAngle:circumference[1],background:{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane"}},colors:colors$1!==void 0&&colors$1.length>0?mapColors(colors$1):highchartsTheme.colors,plotOptions:{series:{animation:!disableAnimation},solidgauge:{borderColor:colors$1!==void 0&&colors$1.length===1?mapColors(colors$1).join():highchartsTheme.colors[0],borderWidth:20,radius:90,innerRadius:"90%",dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:`<span class="prefix${dark?" dark":""}">${prefix}</span><span class="fix${dark?" dark":""}">{y:,f}</span><span class="suffix${dark?" dark":""}">${suffix}</span>`,style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}}};setOptions(merge(staticOptions,customOptions));if(document.querySelector(".prefix")){document.querySelectorAll(".prefix").forEach((prefix2=>{prefix2.setAttribute("y","28")}));document.querySelectorAll(".fix").forEach((fix=>fix.setAttribute("y","38")))}}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(css,globalProps(props)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const LineGraph=({aria:aria={},data:data={},align:align="center",className:className="pb_bar_graph",customOptions:customOptions={},dark:dark=false,gradient:gradient=false,type:type="line",htmlOptions:htmlOptions={},id:id,legend:legend=false,toggleLegendClick:toggleLegendClick=true,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,axisTitle:axisTitle,xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,chartData:chartData,pointStart:pointStart,subTitle:subTitle,title:title,height:height,colors:colors2=[],...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:{min:yAxisMin,max:yAxisMax,title:{text:axisTitle}},xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{pointStart:pointStart,events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};export{BarGraph as B,CircleChart as C,Gauge as G,LineGraph as L};