playbook_ui 14.23.0.pre.alpha.PLAY2121enableexpandedfield9199 → 14.23.0.pre.alpha.PLAY2138advtableselectablerowsindeterminatecheckboxes9287

data/app/pb_kits/playbook/pb_checkbox/index.js

@@ -10,49 +10,239 @@ export default class PbCheckbox extends PbEnhancedElement {
   connect() {
     const mainCheckboxWrapper = this.element;
     const mainCheckbox = mainCheckboxWrapper.querySelector('input')
-    const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
+    const directChildCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
 
-    const updateMainCheckbox = () => {
-      // Count the number of checked child checkboxes
-      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
-      // Determine if the main checkbox should be in an indeterminate state
-      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
-      
-      // Set the main checkbox states
-      mainCheckbox.indeterminate = indeterminate;
-      mainCheckbox.checked = checkedCount > 0;
-
-      // Determine the main checkbox label based on the number of checked checkboxes
-      const checkAllLabel = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateMainLabelCheck ?? 'Check All'
-      const uncheckAllLabel = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateMainLabelUncheck ?? 'Uncheck All'
-      const text = checkedCount === 0 ? checkAllLabel : uncheckAllLabel;
+    // Helper function to get all descendant checkboxes
+    const getAllDescendantCheckboxes = () => {
+      const descendants = [];
+      const queue = [...directChildCheckboxes];
+      
+      // Breadth-first search to find all nested descendants
+      while (queue.length > 0) {
+        const checkbox = queue.shift();
+        descendants.push(checkbox);
+        
+        // Find children of this checkbox
+        const checkboxWrapper = checkbox.closest('[data-pb-checkbox-indeterminate-main="true"]');
+        if (checkboxWrapper) {
+          const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${checkboxWrapper.id}"] input[type="checkbox"]`);
+          queue.push(...childCheckboxes);
+        }
+      }
+      
+      // Also include any non-"main" checkboxes that have this as a parent
+      const nonMainChildCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
+      nonMainChildCheckboxes.forEach(cb => {
+        if (!descendants.includes(cb)) {
+          descendants.push(cb);
+        }
+      });
+      
+      return descendants;
+    };
 
-      // Determine the icon class to add and remove based on the number of checked checkboxes
-      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
-      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
+    // Helper function to determine checkbox state
+    const getCheckboxState = (checkboxes) => {
+      const checkedCount = checkboxes.filter(cb => cb.checked).length;
+      const totalCount = checkboxes.length;
+      
+      return {
+        allChecked: checkedCount === totalCount,
+        noneChecked: checkedCount === 0,
+        indeterminate: !(checkedCount === totalCount || checkedCount === 0),
+        checkedCount,
+        totalCount
+      };
+    };
 
-      // Update main checkbox label
-      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
+    // Helper function to update checkbox visual state
+    const updateCheckboxVisualState = (checkbox, isIndeterminate, isChecked) => {
+      checkbox.indeterminate = isIndeterminate;
+      checkbox.checked = isChecked;
+    };
+
+    // Helper function to update checkbox label and icons
+    const updateCheckboxLabelAndIcons = (wrapper, isIndeterminate, checkedCount) => {
+      const checkAllLabel = wrapper.dataset.pbCheckboxIndeterminateMainLabelCheck ?? 'Check All';
+      const uncheckAllLabel = wrapper.dataset.pbCheckboxIndeterminateMainLabelUncheck ?? 'Uncheck All';
+      const text = checkedCount === 0 ? checkAllLabel : uncheckAllLabel;
+
+      // Update label
+      const bodyKitElement = wrapper.getElementsByClassName('pb_body_kit')[0];
+      if (bodyKitElement) {
+        bodyKitElement.textContent = text;
+      }
+      
+      // Update icons
+      const iconSpan = wrapper.querySelector('[data-pb-checkbox-icon-span]');
+      if (iconSpan) {
+        const iconClassToAdd = isIndeterminate ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
+        const iconClassToRemove = isIndeterminate ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
+        iconSpan.classList.add(iconClassToAdd);
+        iconSpan.classList.remove(iconClassToRemove);
+      }
       
-      // Add and remove the icon class to the main checkbox wrapper
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
+      // Toggle icon visibility
+      const indeterminateIcon = wrapper.getElementsByClassName("indeterminate_icon")[0];
+      const checkIcon = wrapper.getElementsByClassName("check_icon")[0];
+      
+      if (indeterminateIcon) {
+        indeterminateIcon.classList.toggle('hidden', !isIndeterminate);
+      }
+      if (checkIcon) {
+        checkIcon.classList.toggle('hidden', isIndeterminate);
+      }
+    };
+
+    // Main function to update this checkbox's state
+    const updateMainCheckbox = () => {
+      const allDescendantCheckboxes = getAllDescendantCheckboxes();
+      const state = getCheckboxState(allDescendantCheckboxes);
       
-      // Toggle the visibility of the checkbox icon based on the indeterminate state
-      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
-      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
+      updateCheckboxVisualState(mainCheckbox, state.indeterminate, state.allChecked);
+      updateCheckboxLabelAndIcons(mainCheckboxWrapper, state.indeterminate, state.checkedCount);
     };
 
-    // Set indeterminate icon on main checkbox if initial children checkboxes are checked
+    // Function to update parent checkboxes recursively
+    const updateParentCheckboxes = () => {
+      const parentId = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateParent;
+      if (parentId) {
+        const parentCheckbox = document.getElementById(parentId);
+        if (parentCheckbox) {
+          const parentWrapper = parentCheckbox.closest('[data-pb-checkbox-indeterminate-main="true"]');
+          if (parentWrapper) {
+            const parentInstance = parentWrapper.pbCheckboxInstance;
+            if (parentInstance && parentInstance.updateMainCheckbox) {
+              parentInstance.updateMainCheckbox();
+              parentInstance.updateParentCheckboxes();
+            }
+          }
+        }
+      }
+    };
+
+    // Function to update non-main checkboxes when their children change
+    const setupNonMainCheckboxUpdates = () => {
+      const allCheckboxesWithChildren = document.querySelectorAll('input[type="checkbox"]');
+      allCheckboxesWithChildren.forEach(cb => {
+        const checkboxWrapper = cb.closest('[data-pb-checkbox-indeterminate-main="true"]');
+        if (checkboxWrapper && checkboxWrapper !== mainCheckboxWrapper) {
+          return; // Skip different "main" checkboxes
+        }
+        
+        const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${cb.id}"] input[type="checkbox"]`);
+        if (childCheckboxes.length > 0) {
+          childCheckboxes.forEach(childCb => {
+            childCb.addEventListener('change', () => {
+              const state = getCheckboxState(Array.from(childCheckboxes));
+              updateCheckboxVisualState(cb, state.indeterminate, state.allChecked);
+              
+              // Trigger updates on all main checkboxes that might be affected
+              const mainCheckboxes = document.querySelectorAll('[data-pb-checkbox-indeterminate-main="true"]');
+              mainCheckboxes.forEach(mainCb => {
+                const mainInstance = mainCb.pbCheckboxInstance;
+                if (mainInstance && mainInstance.updateMainCheckbox) {
+                  setTimeout(() => {
+                    mainInstance.updateMainCheckbox();
+                  }, 0);
+                }
+              });
+            });
+          });
+        }
+      });
+    };
+
+
+
+    // Initialize checkbox state
     updateMainCheckbox();
 
-    this.element.querySelector('input').addEventListener('change', function() {
-      childCheckboxes.forEach(cb => cb.checked = this.checked);
+    // Handle main checkbox change - propagate to all descendants
+    mainCheckbox.addEventListener('change', function() {
+      const allDescendantCheckboxes = getAllDescendantCheckboxes();
+      const state = getCheckboxState(allDescendantCheckboxes);
+      
+      if (state.indeterminate) {
+        // If indeterminate, uncheck all descendants and the parent
+        allDescendantCheckboxes.forEach(cb => {
+          cb.checked = false;
+          // Dispatch custom event for programmatic changes- change styles in advanced table
+          cb.dispatchEvent(new Event('checkbox-programmatic-change', { bubbles: true }));
+        });
+        this.checked = false;
+      } else {
+        // Otherwise, set all descendants to the same state as this checkbox
+        allDescendantCheckboxes.forEach(cb => {
+          cb.checked = this.checked;
+          // Dispatch custom event for programmatic changes- change styles in advanced table
+          cb.dispatchEvent(new Event('checkbox-programmatic-change', { bubbles: true }));
+        });
+      }
+      
+      // Update this checkbox first, then parents after a delay
       updateMainCheckbox();
+      setTimeout(() => {
+        updateParentCheckboxes();
+      }, 0);
+      
+      // Also trigger updates on all main checkboxes to ensure proper state propagation
+      triggerAllMainCheckboxUpdates();
     });
 
-    childCheckboxes.forEach(cb => {
+    // Handle child checkbox changes
+    directChildCheckboxes.forEach(cb => {
       cb.addEventListener('change', updateMainCheckbox);
     });
+
+    // Handle deeper descendant changes
+    const allDescendantCheckboxes = getAllDescendantCheckboxes();
+    allDescendantCheckboxes.forEach(cb => {
+      if (!Array.from(directChildCheckboxes).includes(cb)) {
+        cb.addEventListener('change', updateMainCheckbox);
+      }
+    });
+
+    // Handle non-main child checkboxes
+    const allChildCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
+    allChildCheckboxes.forEach(cb => {
+      if (!allDescendantCheckboxes.includes(cb)) {
+        cb.addEventListener('change', updateMainCheckbox);
+      }
+    });
+    
+    // Also trigger updates on all main checkboxes when any checkbox changes
+    let updateTimeout = null;
+    const triggerAllMainCheckboxUpdates = () => {
+      // Debounce the updates to prevent excessive calls
+      if (updateTimeout) {
+        clearTimeout(updateTimeout);
+      }
+      updateTimeout = setTimeout(() => {
+        const mainCheckboxes = document.querySelectorAll('[data-pb-checkbox-indeterminate-main="true"]');
+        mainCheckboxes.forEach(mainCb => {
+          const mainInstance = mainCb.pbCheckboxInstance;
+          if (mainInstance && mainInstance.updateMainCheckbox) {
+            mainInstance.updateMainCheckbox();
+          }
+        });
+      }, 10); // Small delay to batch updates
+    };
+    
+    // Store the original updateMainCheckbox function and create a new one that also triggers updates
+    const originalUpdateMainCheckbox = updateMainCheckbox;
+    const enhancedUpdateMainCheckbox = () => {
+      originalUpdateMainCheckbox();
+      triggerAllMainCheckboxUpdates();
+    };
+    
+    // Replace the updateMainCheckbox function
+    mainCheckboxWrapper.pbCheckboxInstance = {
+      updateMainCheckbox: enhancedUpdateMainCheckbox,
+      updateParentCheckboxes
+    };
+
+    // Setup updates for non-main checkboxes with children
+    setupNonMainCheckboxUpdates();
   }
 }

data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx

@@ -143,8 +143,7 @@ export const recursiveCheckParent = (
 
 export const getExpandedItems = (
   treeData: { [key: string]: string }[],
-  selectedIds: string[],
-  showCheckedChildren
+  selectedIds: string[]
 ): any[] => {
   const expandedItems: any[] = [];
 
@@ -153,27 +152,19 @@ export const getExpandedItems = (
       const item = items[i];
       const itemAncestors = [...ancestors, item];
 
-      // If "expanded: true", expand items
       if (item.expanded) {
         expandedItems.push(item.id);
       }
-
-      // Only expand based on selected items if showCheckedChildren is true
-      if (showCheckedChildren) {
-        if (selectedIds && selectedIds.length && selectedIds.includes(item.id)) {
-          expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
-        }
-        if (Array.isArray(item.children)) {
-          const hasCheckedChildren = item.children.some(
-            (child: { [key: string]: string }) => child.checked
-          );
-          if (hasCheckedChildren) {
-            expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
-          }
-        }
+      if (selectedIds && selectedIds.length && selectedIds.includes(item.id)) {
+        expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
       }
-
       if (Array.isArray(item.children)) {
+        const hasCheckedChildren = item.children.some(
+          (child: { [key: string]: string }) => child.checked
+        );
+        if (hasCheckedChildren) {
+          expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
+        }
         traverse(item.children, itemAncestors);
       }
     }

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -47,7 +47,6 @@ type MultiLevelSelectProps = {
   name?: string
   required?: boolean
   returnAllSelected?: boolean
-  showCheckedChildren?: boolean
   treeData?: { [key: string]: string; }[] | any
   onChange?: (event: { target: { name?: string; value: any } }) => void
   onSelect?: (prop: { [key: string]: any }) => void
@@ -72,7 +71,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     label,
     required = false,
     returnAllSelected = false,
-    showCheckedChildren = true,
     treeData,
     onChange = () => null,
     onSelect = () => null,
@@ -106,7 +104,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
   // State for default return
   const [defaultReturn, setDefaultReturn] = useState([]);
   // Get expanded items from treeData
-  const initialExpandedItems = getExpandedItems(treeData, selectedIds, showCheckedChildren);
+  const initialExpandedItems = getExpandedItems(treeData, selectedIds);
   // Initialize state with expanded items
   const [expanded, setExpanded] = useState(initialExpandedItems);
 

data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml

@@ -15,7 +15,6 @@ examples:
   - multi_level_select_disabled_options: Disabled Options (Return All Selected)
   - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
   - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
-  - multi_level_select_show_checked_children: Show Expanded Items
 
   react:
   - multi_level_select_default: Default
@@ -34,4 +33,3 @@ examples:
   - multi_level_select_disabled_options: Disabled Options (Return All Selected)
   - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
   - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
-  - multi_level_select_show_checked_children: Show Expanded Items

data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js

@@ -13,5 +13,4 @@ export { default as MultiLevelSelectDisabledOptions } from './_multi_level_selec
 export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level_select_disabled_options_parent.jsx'
 export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
 export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
-export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'
-export { default as MultiLevelSelectShowCheckedChildren } from './_multi_level_select_show_checked_children.jsx'
+export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -32,8 +32,6 @@ module Playbook
                    default: ""
       prop :label, type: Playbook::Props::String,
                    default: ""
-      prop :show_checked_children, type: Playbook::Props::Boolean,
-                                   default: true
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -56,7 +54,6 @@ module Playbook
           variant: variant,
           pillColor: pill_color,
           wrapped: wrapped,
-          showCheckedChildren: show_checked_children,
         }
       end
     end

data/dist/chunks/{_line_graph-Bz5CsVqz.js → _line_graph-BfCo79KE.js}

@@ -1 +1 @@
-import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,c as buildDataProps,d as buildHtmlProps,H as HighchartsReact,e as Highcharts,f as classnames,g as globalProps,h as HighchartsMore,S as SolidGauge,i as buildCss}from"./_typeahead-DuoHs8Ye.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-DnQyMxO1.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};
+import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,c as buildDataProps,d as buildHtmlProps,H as HighchartsReact,e as Highcharts,f as classnames,g as globalProps,h as HighchartsMore,S as SolidGauge,i as buildCss}from"./_typeahead-Db4YQA5c.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-DnQyMxO1.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};