playbook_ui 15.2.0.pre.alpha.play2318draggablelistnoborder11263 → 15.2.0.pre.alpha.play257911600

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -43,270 +43,287 @@ $gap_lg: $height_from_top + $space_lg;
     flex-direction: $flex_direction;
 }
 
-[class^=pb_timeline_kit] {
-    &[class*=_horizontal] {
-        @include flex_wrapper(row);
-        width: 100%;
-        >div {
-            &:last-child {
-                flex-basis: auto !important;
-                [class^=pb_timeline_item_step] {
-                    [class=pb_timeline_item_connector] {
-                        opacity: 0;
-                    }
-                }
-                [class=pb_timeline_item_right_block] {
-                    display: block;
-                    width: 100%;
-                    overflow: hidden;
-                    white-space: nowrap;
-                }
+@mixin timeline_item_step_base($direction: row, $align: center, $margin_v: $space_xs, $margin_h: 0) {
+    @include flex_wrapper($direction);
+    align-items: $align;
+    
+    @if $direction == row {
+        margin-top: $margin_v;
+        margin-bottom: $margin_v;
+    } @else {
+        margin-right: $margin_h;
+        margin-left: $margin_h;
+    }
+}
+
+@mixin timeline_gap_height($height) {
+    .pb_timeline_item_kit_solid,
+    .pb_timeline_item_kit_dotted {
+        .pb_timeline_item_step {
+            .pb_timeline_item_connector {
+                height: $height !important;
             }
         }
-        [class*=pb_timeline_item_kit] {
-            &[class*=_solid] {
-                flex-basis: 100%;
-                [class^=pb_timeline_item_step] {
-                    @include flex_wrapper(row);
-                    align-items: center;
-                    margin-top: $space_xs;
-                    margin-bottom: $space_xs;
-                    [class=pb_timeline_item_connector] {
-                        @include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
-                    }
+    }
+}
+
+@mixin timeline_left_block($margin_bottom: $space_lg, $width: auto, $min_width: auto, $height: auto, $display: block) {
+    .pb_timeline_item_left_block {
+        margin-bottom: $margin_bottom;
+        
+        @if $width != auto {
+            width: $width;
+        }
+        
+        @if $min_width != auto {
+            min-width: $min_width;
+        }
+        
+        @if $height != auto {
+            height: $height;
+        }
+        
+        @if $display != block {
+            display: $display;
+        }
+    }
+}
+
+@mixin timeline_right_block($margin_bottom: $space_lg) {
+    .pb_timeline_item_right_block {
+        @include flex_wrapper(column);
+        margin-bottom: $margin_bottom;
+    }
+}
+
+.pb_timeline_kit_horizontal,
+.pb_timeline_kit_horizontal_with_date {
+    @include flex_wrapper(row);
+    width: 100%;
+
+    >div {
+        &:last-child {
+            flex-basis: auto !important;
+
+            .pb_timeline_item_step {
+                .pb_timeline_item_connector {
+                    opacity: 0;
                 }
             }
-            &[class*=_dotted] {
-                flex-basis: 100%;
-                [class^=pb_timeline_item_step] {
-                    @include flex_wrapper(row);
-                    align-items: center;
-                    margin-top: $space_xs;
-                    margin-bottom: $space_xs;
-                    [class=pb_timeline_item_connector] {
-                        @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
-                    }
-                }
+
+            .pb_timeline_item_right_block {
+                display: block;
+                width: 100%;
+                overflow: hidden;
+                white-space: nowrap;
             }
         }
-        &[class*=_with_date] {
-            @include flex_wrapper(row);
-            width: 100%;
-            >div {
-                &:last-child {
-                    flex-basis: auto !important;
-                    [class^=pb_timeline_item_step] {
-                        [class=pb_timeline_item_connector] {
-                            opacity: 0;
-                        }
-                    }
-                    [class=pb_timeline_item_right_block] {
-                        display: block;
-                        width: 100%;
-                        overflow: hidden;
-                        white-space: nowrap;
-                    }
-                }
-            }
-            [class*=pb_timeline_item_kit] {
-                &[class*=_solid] {
-                    flex-basis: 100%;
-                    [class=pb_timeline_item_left_block] {
-                        display: flex;
-                        height: 55px;
-                        [class=pb_date_stacked_kit_center_sm] {
-                            [class=pb_date_stacked_day_month] {
-                                [class=pb_caption_kit_md] {
-                                    text-align: left;
-                                }
-                                [class=pb_title_kit_4] {
-                                    text-align: left;
-                                }
-                            }
-                        }
-                    }
-                    [class^=pb_timeline_item_step] {
-                        @include flex_wrapper(row);
-                        margin-top: $space_xs;
-                        margin-bottom: $space_xs;
-                        [class=pb_timeline_item_connector] {
-                            @include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
-                        }
-                    }
-                }
-                &[class*=_dotted] {
-                    flex-basis: 100%;
-                    [class=pb_timeline_item_left_block] {
-                        height: 55px;
-                        [class=pb_date_stacked_kit_center_sm] {
-                            [class=pb_date_stacked_day_month] {
-                                [class=pb_caption_kit_md] {
-                                    text-align: left;
-                                }
-                                [class=pb_title_kit_4] {
-                                    text-align: left;
-                                }
-                            }
-                        }
-                    }
-                    [class^=pb_timeline_item_step] {
-                        @include flex_wrapper(row);
-                        margin-top: $space_xs;
-                        margin-bottom: $space_xs;
-                        [class=pb_timeline_item_connector] {
-                            @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
-                        }
-                    }
-                }
+    }
+
+    .pb_timeline_item_kit_solid {
+        flex-basis: 100%;
+
+        .pb_timeline_item_step {
+            @include timeline_item_step_base(row, center, $space_xs);
+
+            .pb_timeline_item_connector {
+                @include pb_timeline_line_solid($connector_width,
+                    $connector_width,
+                    0 $icon_margin 0 $icon_margin );
             }
         }
     }
-    &[class*=_vertical] {
-        @include flex_wrapper(column);
-        align-items: flex-start;
-        align-self: auto;
-        >div:last-child {
-            [class^=pb_timeline_item_step] {
-                [class=pb_timeline_item_connector] {
-                    opacity: 0;
-                }
+
+    .pb_timeline_item_kit_dotted {
+        flex-basis: 100%;
+
+        .pb_timeline_item_step {
+            @include timeline_item_step_base(row, center, $space_xs);
+
+            .pb_timeline_item_connector {
+                @include pb_timeline_line_dotted_horizontal($connector_width,
+                    $connector_width,
+                    0 $icon_margin 0 $icon_margin );
             }
         }
-        [class*=pb_timeline_item_kit] {
-            @include flex_wrapper(row);
-            &[class*=_solid] {
-                flex-basis: 100%;
-                [class^=pb_timeline_item_step] {
-                    @include flex_wrapper(column);
-                    align-items: center;
-                    align-content: flex-start;
-                    margin-right: $space_sm;
-                    margin-left: $space_sm;
-                    [class=pb_timeline_item_connector] {
-                        @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
+    }
+}
+
+.pb_timeline_kit_horizontal_with_date {
+    .pb_timeline_item_kit_solid {
+        @include timeline_left_block(auto, auto, auto, 55px, flex);
+
+        .pb_timeline_item_left_block {
+            .pb_date_stacked_kit_center_sm {
+                .pb_date_stacked_day_month {
+                    .pb_caption_kit_md {
+                        text-align: left;
                     }
                 }
-                [class=pb_timeline_item_left_block] {
-                    margin-bottom: $space_lg;
-                    width: 0px;
-                }
-                [class=pb_timeline_item_right_block] {
-                    @include flex_wrapper(column);
-                    margin-bottom: $space_lg;
-                }
             }
-            &[class*=_dotted] {
-                flex-basis: 100%;
-                [class^=pb_timeline_item_step] {
-                    @include flex_wrapper(column);
-                    align-items: center;
-                    margin-right: $space_sm;
-                    margin-left: $space_sm;
-                    [class=pb_timeline_item_connector] {
-                        @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
+        }
+    }
+
+    .pb_timeline_item_kit_dotted {
+        @include timeline_left_block(auto, auto, auto, 55px);
+
+        .pb_timeline_item_left_block {
+            .pb_date_stacked_kit_center_sm {
+                .pb_date_stacked_day_month {
+                    .pb_caption_kit_md {
+                        text-align: left;
                     }
                 }
-                [class=pb_timeline_item_left_block] {
-                    margin-bottom: $space_lg;
-                    width: 0px;
-                }
-                [class=pb_timeline_item_right_block] {
-                    @include flex_wrapper(column);
-                    margin-bottom: $space_lg;
-                }
             }
         }
-        &[class*=_with_date] {
-            @include flex_wrapper(column);
-            align-items: flex-start;
-            align-self: auto;
-            >div:last-child {
-                [class^=pb_timeline_item_step] {
-                    [class=pb_timeline_item_connector] {
-                        opacity: 0;
-                    }
-                }
+
+        .pb_timeline_item_step {
+            @include timeline_item_step_base(row, center, $space_xs);
+
+            .pb_timeline_item_connector {
+                @include pb_timeline_line_dotted_horizontal($connector_width,
+                    $connector_width,
+                    0 $icon_margin 0 $icon_margin );
             }
-            [class*=pb_timeline_item_kit] {
-                @include flex_wrapper(row);
-                &[class*=_solid] {
-                    flex-basis: 100%;
-                    [class^=pb_timeline_item_step] {
-                        @include flex_wrapper(column);
-                        align-items: center;
-                        align-content: flex-start;
-                        margin-right: $space_sm;
-                        margin-left: $space_sm;
-                        [class=pb_timeline_item_connector] {
-                            @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
-                        }
-                    }
-                    [class=pb_timeline_item_left_block] {
-                        margin-bottom: $space_lg;
-                        min-width: $space_lg;
-                    }
-                    [class=pb_timeline_item_right_block] {
-                        @include flex_wrapper(column);
-                        margin-bottom: $space_lg;
-                    }
-                }
-                &[class*=_dotted] {
-                    flex-basis: 100%;
-                    [class^=pb_timeline_item_step] {
-                        @include flex_wrapper(column);
-                        align-items: center;
-                        margin-right: $space_sm;
-                        margin-left: $space_sm;
-                        [class=pb_timeline_item_connector] {
-                            @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
-                        }
-                    }
-                    [class=pb_timeline_item_left_block] {
-                        margin-bottom: $space_lg;
-                        min-width: $space_lg;
-                    }
-                    [class=pb_timeline_item_right_block] {
-                        @include flex_wrapper(column);
-                        margin-bottom: $space_lg;
-                    }
-                }
+        }
+    }
+}
+
+.pb_timeline_kit_vertical,
+.pb_timeline_kit_vertical_with_date,
+.pb_timeline_kit_vertical_gap_xs,
+.pb_timeline_kit_vertical_gap_sm,
+.pb_timeline_kit_vertical_gap_md,
+.pb_timeline_kit_vertical_gap_lg,
+.pb_timeline_kit_vertical_with_date_gap_xs,
+.pb_timeline_kit_vertical_with_date_gap_sm,
+.pb_timeline_kit_vertical_with_date_gap_md,
+.pb_timeline_kit_vertical_with_date_gap_lg {
+    @include flex_wrapper(column);
+    align-items: flex-start;
+    align-self: auto;
+
+    >div:last-child {
+        .pb_timeline_item_step {
+            .pb_timeline_item_connector {
+                opacity: 0;
             }
         }
-        &[class*=_gap_xs] {
-            [class*=pb_timeline_item_kit] {
-                [class^=pb_timeline_item_step] {
-                    [class=pb_timeline_item_connector] {
-                        height: $gap_xs !important;
-                    }
-                }
+    }
+
+
+    .pb_timeline_item_kit_solid {
+        @include flex_wrapper(row);
+        flex-basis: 100%;
+
+        .pb_timeline_item_step {
+            @include timeline_item_step_base(column, center, 0, $space_sm);
+            align-content: flex-start;
+
+            .pb_timeline_item_connector {
+                @include pb_timeline_line_solid($connector_width,
+                    $connector_width,
+                    $icon_margin 0 $icon_margin 0);
             }
         }
-        &[class*=_gap_sm] {
-            [class*=pb_timeline_item_kit] {
-                [class^=pb_timeline_item_step] {
-                    [class=pb_timeline_item_connector] {
-                        height: $gap_sm !important;
-                    }
+
+        @include timeline_left_block($space_lg, 0px);
+        @include timeline_right_block($space_lg);
+    }
+
+
+    .pb_timeline_item_kit_dotted {
+        @include flex_wrapper(row);
+        flex-basis: 100%;
+
+        .pb_timeline_item_step {
+            @include timeline_item_step_base(column, center, 0, $space_sm);
+
+            .pb_timeline_item_connector {
+                @include pb_timeline_line_dotted_vertical($connector_width,
+                    $connector_width,
+                    $icon_margin 0 $icon_margin 0);
+            }
+        }
+
+        @include timeline_left_block($space_lg, 0px);
+        @include timeline_right_block($space_lg);
+    }
+
+    &.pb_timeline_kit_vertical_with_date,
+    &.pb_timeline_kit_vertical_with_date_gap_xs,
+    &.pb_timeline_kit_vertical_with_date_gap_sm,
+    &.pb_timeline_kit_vertical_with_date_gap_md,
+    &.pb_timeline_kit_vertical_with_date_gap_lg {
+        @include flex_wrapper(column);
+        align-items: flex-start;
+        align-self: auto;
+
+        >div:last-child {
+            .pb_timeline_item_step {
+                .pb_timeline_item_connector {
+                    opacity: 0;
                 }
             }
         }
-        &[class*=_gap_md] {
-            [class*=pb_timeline_item_kit] {
-                [class^=pb_timeline_item_step] {
-                    [class=pb_timeline_item_connector] {
-                        height: $gap_md !important;
-                    }
+
+        .pb_timeline_item_kit_solid {
+            @include flex_wrapper(row);
+
+            flex-basis: 100%;
+
+            .pb_timeline_item_step {
+                @include timeline_item_step_base(column, center, 0, $space_sm);
+                align-content: flex-start;
+
+                .pb_timeline_item_connector {
+                    @include pb_timeline_line_solid($connector_width,
+                        $connector_width,
+                        $icon_margin 0 $icon_margin 0);
                 }
             }
+
+            @include timeline_left_block($space_lg, auto, $space_lg);
+            @include timeline_right_block($space_lg);
         }
-        &[class*=_gap_lg] {
-            [class*=pb_timeline_item_kit] {
-                [class^=pb_timeline_item_step] {
-                    [class=pb_timeline_item_connector] {
-                        height: $gap_lg !important;
-                    }
+
+        .pb_timeline_item_kit_dotted {
+            flex-basis: 100%;
+
+            .pb_timeline_item_step {
+                @include timeline_item_step_base(column, center, 0, $space_sm);
+
+                .pb_timeline_item_connector {
+                    @include pb_timeline_line_dotted_vertical($connector_width,
+                        $connector_width,
+                        $icon_margin 0 $icon_margin 0);
                 }
             }
+
+            @include timeline_left_block($space_lg, auto, $space_lg);
+            @include timeline_right_block($space_lg);
         }
     }
 }
+
+
+
+.pb_timeline_kit_vertical_gap_xs,
+.pb_timeline_kit_vertical_with_date_gap_xs {
+    @include timeline_gap_height($gap_xs);
+}
+
+.pb_timeline_kit_vertical_gap_sm,
+.pb_timeline_kit_vertical__with_date_gap_sm {
+    @include timeline_gap_height($gap_sm);
+}
+
+.pb_timeline_kit_vertical_gap_md,
+.pb_timeline_kit_vertical_with_date_gap_md {
+    @include timeline_gap_height($gap_md);
+}
+
+.pb_timeline_kit_vertical_gap_lg,
+.pb_timeline_kit_vertical_with_date_gap_lg {
+    @include timeline_gap_height($gap_lg);
+}

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx

@@ -38,7 +38,7 @@ const Timeline = ({
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const dateStyle = showDate === true ? '_with_date' : ''
+  const dateStyle = showDate === true ? 'with_date' : ''
   const itemGapStyle = itemGap === 'none' ? '' : `gap_${itemGap}`
   const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, itemGapStyle)
 

data/app/pb_kits/playbook/pb_timeline/timeline.test.js

@@ -161,12 +161,12 @@ test('should pass showDate prop', () => {
     const props = { showDate: true }
     render(<TimelineDefault {...props} />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit_horizontal__with_date')
+    expect(kit).toHaveClass('pb_timeline_kit_horizontal_with_date')
 })
 
 test('should pass showDate prop with Children', () => {
     const props = { showDate: true }
     render(<TimelineWithChildren {...props} />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit_horizontal__with_date')
+    expect(kit).toHaveClass('pb_timeline_kit_horizontal_with_date')
 })

data/app/pb_kits/playbook/tokens/_positioning.scss

@@ -22,6 +22,7 @@ $z_7: 700 !default;
 $z_8: 800 !default;
 $z_9: 900 !default;
 $z_10: 1000 !default;
+$z_max: 999999 !default;
 $z_index: (
   zindex_1: $z_1,
   zindex_2: $z_1,

data/app/pb_kits/playbook/utilities/_positioning.scss

@@ -58,6 +58,10 @@
   z-index: $z_10 !important;
 }
 
+.z_index_max {
+  z-index: $z_max !important;
+}
+
 $zIndex_values: (
   1: $z_1,
   2: $z_2,
@@ -68,7 +72,8 @@ $zIndex_values: (
   7: $z_7,
   8: $z_8,
   9: $z_9,
-  10: $z_10
+  10: $z_10,
+  max: $z_max
 );
 
 @each $size, $size_value in $breakpoints_grid {

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -186,7 +186,7 @@ type VerticalAlign =  {
   verticalAlign?: "baseline" | "super" | "top" | "middle" | "bottom" | "sub" | "text-top" | "text-bottom"
 }
 
-type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
+type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 'max'
 type ZIndexResponsiveType = {[key: string]: ZIndexType}
 type ZIndex = {
   zIndex?: ZIndexType,
@@ -439,6 +439,8 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
           Object.entries(zIndexEntry[1]).forEach((zIndexObj) => {
             css += `z_index_${zIndexObj[0]}_${zIndexObj[1]} `
           })
+        } else if (zIndexEntry[1] === 'max') {
+          css += `z_index_max `
         }
       }
     })

data/dist/chunks/{_line_graph-BxcVBQsJ.js → _line_graph-BnVgr42C.js}

@@ -1 +1 @@
-import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{d as buildAriaProps,e as buildDataProps,f as buildHtmlProps,H as HighchartsReact,g as Highcharts,h as classnames,i as globalProps,j as HighchartsMore,S as SolidGauge,k as buildCss}from"./_typeahead-eZENQ_Y_.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};
+import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{f as buildAriaProps,g as buildDataProps,h as buildHtmlProps,H as HighchartsReact,i as Highcharts,j as classnames,k as globalProps,l as HighchartsMore,S as SolidGauge,m as buildCss}from"./_typeahead-BH_dkgOy.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};