playbook_ui 14.25.0.pre.alpha.dialogfix10277 → 14.25.0.pre.alpha.play1986inlineloadingsolidvariant9963

data/app/pb_kits/playbook/pb_title/title.rb

@@ -21,46 +21,36 @@ module Playbook
                           default: nil
 
       def classname
-        title_classes = ["pb_title_kit"]
-
         if is_size_responsive
-          title_classes << "pb_title_#{variant}" if variant.present?
-          title_classes << "pb_title_#{color}" if color.present?
-          title_classes << "pb_title_#{is_bold}" if is_bold.present?
-          title_classes += generate_responsive_size_classes
+          generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
         else
-          title_classes << "pb_title_#{size}" if size.present?
-          title_classes << "pb_title_#{variant}" if variant.present?
-          title_classes << "pb_title_#{color}" if color.present?
-          title_classes << "pb_title_#{is_bold}" if is_bold.present?
-          title_classes += generate_display_size_classes
+          generate_classname("pb_title_kit", size, variant, color, is_bold) + generate_display_size
         end
-
-        generate_classname(title_classes.compact.join(" "), separator: " ")
       end
 
       def is_bold
         bold ? nil : "thin"
       end
 
-      def generate_display_size_classes
-        return [] if display_size.nil?
+      def generate_display_size
+        return "" if display_size.nil?
 
-        ["pb_title_dynamic_#{display_size}"]
+        " pb_title_kit_dynamic_#{display_size}"
       end
 
       def is_size_responsive
         try(:size).is_a?(::Hash)
       end
 
-      def generate_responsive_size_classes
-        classes = []
+      def generate_responsive_size_classname
+        css = ""
         if is_size_responsive
           size.each do |key, value|
-            classes << "pb_title_#{key}_#{value}"
+            css += " pb_title_kit_#{key}_#{value}"
           end
         end
-        classes
+
+        css unless css.blank?
       end
     end
   end

data/app/pb_kits/playbook/pb_title/title.test.js

@@ -12,7 +12,7 @@ test('returns namespaced class name', () => {
     )
 
     const kit = screen.getByTestId('primary-test')
-    expect(kit).toHaveClass('pb_title_kit pb_title_3')
+    expect(kit).toHaveClass('pb_title_kit_size_3')
 })
 
 test('with thin font weight', () => {
@@ -25,7 +25,7 @@ test('with thin font weight', () => {
     )
 
     const kit = screen.getByTestId('primary-test')
-    expect(kit).toHaveClass('pb_title_kit pb_title_3 pb_title_thin')
+    expect(kit).toHaveClass('pb_title_kit_size_3_thin')
 })
 
 test('with colors', () => {
@@ -38,7 +38,7 @@ test('with colors', () => {
     )
 
     const kit = screen.getByTestId('primary-test')
-    expect(kit).toHaveClass('pb_title_kit pb_title_3 pb_title_success')
+    expect(kit).toHaveClass('pb_title_kit_size_3_success')
 })
 
 test('with responsive title', () => {
@@ -51,5 +51,5 @@ test('with responsive title', () => {
     )
 
     const kit = screen.getByTestId('primary-test')
-    expect(kit).toHaveClass('pb_title_kit pb_title_xs_3 pb_title_sm_2 pb_title_md_1')
+    expect(kit).toHaveClass('pb_title_kit pb_title_kit_xs_3 pb_title_kit_sm_2 pb_title_kit_md_1')
 })

data/app/pb_kits/playbook/pb_title_count/_title_count.scss

@@ -1,31 +1,20 @@
 @import "../pb_title/title";
 @import "../pb_body/body";
 
-.pb_title_count_kit_left_lg,
-.pb_title_count_kit_left_sm,
-.pb_title_count_kit_center_lg,
-.pb_title_count_kit_center_sm,
-.pb_title_count_kit_right_lg,
-.pb_title_count_kit_right_sm {
+[class^=pb_title_count_kit] {
   display: flex;
+  justify-content: flex-start;
   align-items: baseline;
 
   & > .pb_title_count_text {
     padding-right: $space-xs;
   }
-}
 
-.pb_title_count_kit_left_lg,
-.pb_title_count_kit_left_sm {
-  justify-content: flex-start;
-}
+  &[class*=_center] {
+    justify-content: center;
+  }
 
-.pb_title_count_kit_center_lg,
-.pb_title_count_kit_center_sm {
-  justify-content: center;
+  &[class*=_right] {
+    justify-content: flex-end;
+  }
 }
-
-.pb_title_count_kit_right_lg,
-.pb_title_count_kit_right_sm {
-  justify-content: flex-end;
-}

data/app/pb_kits/playbook/pb_title_detail/_title_detail.scss

@@ -1,16 +1,17 @@
 @import "../pb_title/title";
 @import "../pb_body/body";
 
-.pb_title_detail_kit_center {
-  & > .pb_title_kit,
-  & > .pb_body_kit_light {
-    text-align: center;
+[class^=pb_title_detail_kit]{
+  &[class*=_center]  {
+    & > [class^=pb_title],
+    & > [class^=pb_body] {
+      text-align: center;
+    }
   }
-}
-
-.pb_title_detail_kit_right {
-  & > .pb_title_kit,
-  & > .pb_body_kit_light {
-    text-align: right !important;
+  &[class*=_right]  {
+    & > [class^=pb_title],
+    & > [class^=pb_body] {
+      text-align: right;
+    }
   }
 }

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -5,10 +5,7 @@ $color_checkbox_default: $border_light;
 $color_disabled: darken($border_light, 20%);
 $transition: .2s ease-in-out;
 
-.pb_toggle_kit_sm_on,
-.pb_toggle_kit_sm_off,
-.pb_toggle_kit_md_on,
-.pb_toggle_kit_md_off {
+[class^=pb_toggle_kit] {
   position: relative;
   $width: 44px;
   $height: $width / 2;

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -22,7 +22,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
   }
 }
 
-.pb_tooltip_kit {
+[class^="pb_tooltip_kit"] {
   ~ .tooltip_tooltip,
   .tooltip_tooltip {
     display: block;
@@ -103,7 +103,8 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
     }
   }
 
-  &.dark {
+  &.dark,
+  &[class*=_dark]{
     ~.tooltip_tooltip,
     .tooltip_tooltip {
       //react
@@ -135,7 +136,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 }
 
 // Right
-.pb_tooltip_kit .tooltip_tooltip {
+[class^="pb_tooltip_kit"] .tooltip_tooltip {
   $arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});
 
   &[data-popper-placement="right"] {

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -26,7 +26,7 @@ module Playbook
       prop :width
 
       def classname
-        generate_classname("pb_tooltip_kit")
+        generate_classname("pb_tooltip_kit", dark_class)
       end
 
       def remove_height_properties(combined_html_options_style)

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -63,7 +63,7 @@ test('typeahead with pills', () => {
   )
 
   const kit = screen.getByTestId('pills-test')
-  const pill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_primary")
+  const pill = kit.querySelector(".pb_form_pill_kit_primary")
   expect(pill).toBeInTheDocument()
 })
 
@@ -89,7 +89,7 @@ test('typeahead multi select with badges and small pills', () => {
   )
 
   const kit = screen.getByTestId('small-pill-test')
-  const badge = kit.querySelector(".pb_form_pill_kit.pb_form_pill_primary.mr_xs.pb_form_pill_small")
+  const badge = kit.querySelector(".pb_form_pill_kit_primary.mr_xs.small")
   expect(badge).toBeInTheDocument()
 })
 
@@ -135,6 +135,6 @@ test('typeahead with colored pills', () => {
   )
 
   const kit = screen.getByTestId('pills-color-test')
-  const pill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_neutral")
+  const pill = kit.querySelector(".pb_form_pill_kit_neutral")
   expect(pill).toBeInTheDocument()
 })

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb

@@ -7,7 +7,7 @@
   ]
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Products", name: :foo, pills: true }) %>
+<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
 
 <%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -13,7 +13,7 @@ const TypeaheadWithPills = (props) => {
     <>
       <Typeahead
           isMulti
-          label="Products"
+          label="Colors"
           options={options}
           placeholder=""
           {...props}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb

@@ -7,4 +7,25 @@
   ]
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-pills-example2", pill_color: "neutral", options: options, label: "Products", name: :foo, pills: true }) %>
+<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", pill_color: "neutral", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
+
+<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
+
+<!-- This section is an example of the available JavaScript event hooks -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
+    console.log('Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
+    console.log('Option removed')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
+    console.log('All options cleared')
+  })
+
+  document.querySelector('#clear-pills').addEventListener('click', function() {
+    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx

@@ -13,7 +13,7 @@ const TypeaheadWithPills = (props) => {
     <>
       <Typeahead
           isMulti
-          label="Products"
+          label="Colors"
           options={options}
           pillColor="neutral"
           placeholder=""

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb

@@ -9,9 +9,9 @@
 
 <%= pb_rails("typeahead", props: {
     id: "typeahead-without-pills-example1",
-    placeholder: "All Products",
+    placeholder: "All Colors",
     options: options, 
-    label: "Products",
+    label: "Colors",
     name: :foo,
     is_multi: false
   })

data/app/pb_kits/playbook/pb_user/_user.scss

@@ -3,102 +3,52 @@
 @import "../pb_avatar/avatar";
 @import "../tokens/spacing";
 
-// Base user kit styles
-.pb_user_kit_left_horizontal_sm,
-.pb_user_kit_left_horizontal_md,
-.pb_user_kit_left_horizontal_lg,
-.pb_user_kit_center_horizontal_sm,
-.pb_user_kit_center_horizontal_md,
-.pb_user_kit_center_horizontal_lg,
-.pb_user_kit_right_horizontal_sm,
-.pb_user_kit_right_horizontal_md,
-.pb_user_kit_right_horizontal_lg,
-.pb_user_kit_left_vertical_sm,
-.pb_user_kit_left_vertical_md,
-.pb_user_kit_left_vertical_lg,
-.pb_user_kit_center_vertical_sm,
-.pb_user_kit_center_vertical_md,
-.pb_user_kit_center_vertical_lg,
-.pb_user_kit_right_vertical_sm,
-.pb_user_kit_right_vertical_md,
-.pb_user_kit_right_vertical_lg {
+[class^=pb_user_kit]{
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   flex-direction: row;
-}
 
-// Vertical orientation
-.pb_user_kit_left_vertical_sm,
-.pb_user_kit_left_vertical_md,
-.pb_user_kit_left_vertical_lg,
-.pb_user_kit_center_vertical_sm,
-.pb_user_kit_center_vertical_md,
-.pb_user_kit_center_vertical_lg,
-.pb_user_kit_right_vertical_sm,
-.pb_user_kit_right_vertical_md,
-.pb_user_kit_right_vertical_lg {
-  flex-direction: column;
+  // Orientation =============
+  &[class*=_vertical]  {
+    flex-direction: column;
 
-  .pb_avatar_kit_size_sm,
-  .pb_avatar_kit_size_md,
-  .pb_avatar_kit_size_lg,
-  .pb_avatar_kit_size_xl {
-    margin-bottom: $space-xs;
-  }
-}
+    &[class*=_center]  {
+      align-items: center;
 
-.pb_user_kit_center_vertical_sm,
-.pb_user_kit_center_vertical_md,
-.pb_user_kit_center_vertical_lg {
-  align-items: center;
+      [class^=pb_title],
+      [class^=pb_body] {
+        text-align: center;
+      }
+    }
 
-  .pb_title_kit,
-  .pb_body_kit {
-    text-align: center;
-  }
-}
+    &[class*=_right]  {
+      align-items: flex-end;
 
-// Vertical right alignment
-.pb_user_kit_right_vertical_sm,
-.pb_user_kit_right_vertical_md,
-.pb_user_kit_right_vertical_lg {
-  align-items: flex-end;
+      [class^=pb_title],
+      [class^=pb_body] {
+        text-align: right;
+      }
+    }
 
-  .pb_title_kit,
-  .pb_body_kit {
-    text-align: right;
+    [class^=pb_avatar] {
+      margin-bottom: $space-xs;
+    }
   }
-}
 
-// Horizontal orientation
-.pb_user_kit_left_horizontal_sm,
-.pb_user_kit_left_horizontal_md,
-.pb_user_kit_left_horizontal_lg,
-.pb_user_kit_center_horizontal_sm,
-.pb_user_kit_center_horizontal_md,
-.pb_user_kit_center_horizontal_lg,
-.pb_user_kit_right_horizontal_sm,
-.pb_user_kit_right_horizontal_md,
-.pb_user_kit_right_horizontal_lg {
-  align-items: center;
+  &[class*=_horizontal]  {
+    align-items: center;
 
-  .pb_avatar_kit_size_lg,
-  .pb_avatar_kit_size_md,
-  .pb_avatar_kit_size_sm,
-  .pb_avatar_kit_size_xl {
-    margin-right: $space-sm;
-  }
-}
+    &[class*=_center]  {
+      justify-content: center;
+    }
 
-.pb_user_kit_center_horizontal_sm,
-.pb_user_kit_center_horizontal_md,
-.pb_user_kit_center_horizontal_lg {
-  justify-content: center;
-}
+    &[class*=_right]  {
+      justify-content: flex-end;
+    }
 
-.pb_user_kit_right_horizontal_sm,
-.pb_user_kit_right_horizontal_md,
-.pb_user_kit_right_horizontal_lg {
-  justify-content: flex-end;
+    [class^=pb_avatar] {
+      margin-right: $space-sm;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_user/user.test.js

@@ -38,7 +38,7 @@ test('bold prop applies correct styling when false', () => {
   const titleElement = screen.getByText("Anna Black")
   expect(titleElement).toBeInTheDocument()
 
-  expect(titleElement).toHaveClass('pb_title_kit pb_title_4 pb_title_thin')
+  expect(titleElement).toHaveClass('pb_title_kit_size_4_thin')
 })
 
 test('align prop adds desired class', () => {

data/app/pb_kits/playbook/pb_user_badge/_user_badge.scss

@@ -4,10 +4,7 @@ $badge-sizes: (
   "lg":   36px
 );
 
-.pb_user_badge_kit,
-.pb_user_badge_kit_sm,
-.pb_user_badge_kit_md,
-.pb_user_badge_kit_lg {
+[class^=pb_user_badge_kit] {
   .pb_user_badge_wrapper {
     svg,
     img {
@@ -15,25 +12,13 @@ $badge-sizes: (
       height: 100%;
     }
   }
-}
-
-.pb_user_badge_kit_sm {
-  .pb_user_badge_wrapper {
-    width: 16px;
-    height: 16px;
-  }
-}
 
-.pb_user_badge_kit_md {
-  .pb_user_badge_wrapper {
-    width: 26px;
-    height: 26px;
-  }
-}
-
-.pb_user_badge_kit_lg {
-  .pb_user_badge_wrapper {
-    width: 36px;
-    height: 36px;
+  @each $name, $size in $badge-sizes {
+    &[class*=_#{$name}] {
+      .pb_user_badge_wrapper {
+        width: $size;
+        height: $size;
+      }
+    }
   }
 }

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.scss

@@ -1,11 +1,11 @@
-.pb_weekday_stacked_kit_left {
-  text-align: left;
-}
-
-.pb_weekday_stacked_kit_center {
-  text-align: center;
-}
-
-.pb_weekday_stacked_kit_right {
-  text-align: right;
+[class^='pb_weekday_stacked'] {
+  &[class*='_left'] {
+    text-align: left;
+  }
+  &[class*='_center'] {
+    text-align: center;
+  }
+  &[class*='_right'] {
+    text-align: right;
+  }
 }

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.test.jsx

@@ -48,7 +48,7 @@ describe("WeekdayStacked Kit", () => {
     );
 
     const kit = screen.getByTestId(testId);
-    const text = kit.querySelector(".pb_title_kit.pb_title_4");
+    const text = kit.querySelector(".pb_title_kit_size_4");
     expect(text.textContent).toEqual("1/1") 
   });
 
@@ -86,7 +86,7 @@ describe("WeekdayStacked Kit", () => {
     );
       
     const kit = screen.getByTestId(testId);
-    const text = kit.querySelector(".pb_title_4");
+    const text = kit.querySelector(".pb_title_kit_size_4");
     expect(text.textContent).toEqual("1") 
   });
 
@@ -99,7 +99,7 @@ describe("WeekdayStacked Kit", () => {
     );
       
     const kit = screen.getByTestId(testId);
-    const text = kit.querySelector(".pb_title_4");
+    const text = kit.querySelector(".pb_title_kit_size_4");
     expect(text.textContent).toEqual("Jan 1") 
   });
 });

data/dist/chunks/{_line_graph-CApw7aQD.js → _line_graph-CiVc-Cod.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-J1_avqdO.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-CY5ZPzic.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-BQnvz-Ks.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-CY5ZPzic.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};