playbook_ui 14.25.0.pre.rc.3 → 14.26.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0c37c888eef374f1983727f38e588a498b9e2dbf2320c003e6b304b45dc42009
-  data.tar.gz: 7b038dc1ab4da393b5ef459c2863f789fd26be7f8fbaba08733244fea91fb8bd
+  metadata.gz: d8e4bae5dd3cbf683140cd33b7a4f2e6db8dffa4197e3749bd0159b4d687829f
+  data.tar.gz: b8e7c6165a4154a76b5740fc87b7c0271f6aca9881b022f1a5e02215174e4c82
 SHA512:
-  metadata.gz: 66616efb7217c8fcc423c67f6b4bbe2412019beee0035660b31d14b5dd33ef60c206babf8fe25f51885f2e0d0714188c67a8a375cf93717d66828d14f7d2f8f9
-  data.tar.gz: 9881700a9a6f88af5bbf8119d00d5c64054c9f79a9c3ec7db3ba7d4fb8930f94e5ee3785c6064bcd1c234097542d7ca46a63f14a34690557f8622fd74b46beca
+  metadata.gz: 2c287535600ec0e5f4bb4f8a056ea32b0bddd2be0557d111183ac9745ef2641cf8aa62f433a5d07a17255258d357914ee712e4d9af96cc4dccad7be37edfe9b9
+  data.tar.gz: ada34e0bf004e1b63410f8f2355787b02c67617f208aaf9c396f93158baa73fc289fd81c8bec471d9802a57eeb380cd02733ee869084198b7db5f1f598247d55

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -4,6 +4,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 import { getAllIcons } from "../utilities/icons/allicons"
+import { camelToSnakeCase } from '../utilities/text'
 
 import datePickerHelper from './date_picker_helper'
 import Icon from '../pb_icon/_icon'
@@ -114,6 +115,20 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
+  // Convert cursor prop to CSS-style format to apply to input tag below
+  const getCursorStyle = (cursor?: string): string => {
+    // If input is disabled, always use 'not-allowed'
+    if (disableInput) return 'not-allowed'
+
+    // If cursor prop is provided, convert it to styling format
+    if (cursor) {
+      return camelToSnakeCase(cursor).replace(/_/g, '-')
+    }
+
+    // Default to 'pointer'
+    return 'pointer'
+  }
+
   useEffect(() => {
     datePickerHelper({
       allowInput,
@@ -149,6 +164,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       required: false,
     }, scrollContainer)
   }, initializeOnce ? [] : undefined)
+
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"
@@ -163,6 +179,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     error ? 'error' : null,
     className
   )
+
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
     if (dark) {
@@ -176,6 +193,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     }
     return base
   }
+
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   return (
@@ -206,6 +224,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
                   name={name}
                   onChange={inputOnChange}
                   placeholder={placeholder}
+                  style={{ cursor: getCursorStyle(filteredProps.cursor) }}
                   value={inputValue}
               />
 

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -10,6 +10,7 @@
       <%= pb_rails("text_input", props: {
         aria: object.input_aria,
         autocomplete: false,
+        cursor: object.cursor,
         dark: object.dark,
         data: object.input_data,
         disabled: object.disable_input,

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -4,6 +4,9 @@ import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import { GenericObject, Sizes } from '../types'
 
+type SizeType = Sizes | "none"
+type SizeResponsiveType = { [key: string]: SizeType }
+
 type FlexProps = {
   children: React.ReactChild[] | React.ReactNode,
   className?: string,
@@ -18,9 +21,9 @@ type FlexProps = {
   reverse?: boolean,
   vertical?: "top" | "center" | "bottom" | "stretch" | "baseline" | "none",
   align?: "start" | "center" | "end" | "stretch" | "baseline" | "none",
-  gap?: Sizes | "none",
-  rowGap?: Sizes| "none",
-  columnGap?: Sizes| "none",
+  gap?: SizeType | SizeResponsiveType,
+  rowGap?: SizeType | SizeResponsiveType,
+  columnGap?: SizeType | SizeResponsiveType,
   wrap?: boolean,
   alignSelf?: "start" | "end" | "center" | "stretch" | "none"
 } & GlobalProps
@@ -53,9 +56,9 @@ const Flex = (props: FlexProps): React.ReactElement => {
   const alignClass = align !== 'none' ? `align_items_${align}` : `align_items_${vertical}`
   const inlineClass = inline === true ? 'inline' : ''
   const spacingClass = spacing !== undefined ? `spacing_${spacing}` : ''
-  const gapClass = gap !== 'none' ? `gap_${gap}` : ''
-  const rowGapClass = rowGap !== 'none' ? `rowGap_${rowGap}` : ''
-  const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
+  const gapClass = (gap !== 'none' && typeof gap === 'object') ? `gap_${gap}` : ''
+  const rowGapClass = (rowGap !== 'none' && typeof rowGap === 'object') ? `rowGap_${rowGap}` : ''
+  const columnGapClass = (columnGap !== 'none' && typeof columnGap === 'object') ? `columnGap_${columnGap}` : ''
   const wrapClass = wrap === true ? 'wrap' : ''
   const reverseClass = reverse === true ? 'reverse' : ''
   const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
+<%= pb_rails("title", props: {size: 4, text: "Gap"}) %>
 <br/>
 <div class="flex-doc-example">
   <%= pb_rails("flex", props:{ gap: "xxs", wrap:true}) do %>
@@ -31,3 +31,14 @@
    <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
 </div>
+
+<br/><br/>
+<%= pb_rails("title", props: {size: 4, text: "Responsive"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props: { gap: { xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }, wrap: true }) do %>
+   <% 40.times do |i| %>
+    <%= pb_rails("flex/flex_item") do %> <%=i%> <% end %>
+   <% end %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
 
 const FlexGap = (props) => {
   const count = () => {
@@ -13,6 +14,8 @@ const FlexGap = (props) => {
 
   return (
     <>
+      <Title size={4}>Gap</Title>
+      <br />
       <div className="flex-doc-example">
         <Flex
             gap="xxs"
@@ -27,8 +30,10 @@ const FlexGap = (props) => {
         </Flex>
       </div>
 
-      <br />
+      <br /><br />
 
+      <Title size={4}>Column Gap</Title>
+      <br />
       <div className="flex-doc-example">
         <Flex
             columnGap="lg"
@@ -48,6 +53,9 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
+      <br /><br />
+
+      <Title size={4}>Row Gap</Title>
       <br />
       <div className="flex-doc-example">
         <Flex
@@ -69,6 +77,23 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
+
+      <br /><br />
+      <Title size={4}>Responsive</Title>
+      <br />
+      <div className="flex-doc-example">
+        <Flex
+            gap={{ xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }}
+            wrap
+            {...props}
+        >
+          {count().map((v, key) => (
+            <FlexItem key={key}>
+              {v}
+            </FlexItem>
+            ))}
+        </Flex>
+      </div>
     </>
   )
 }

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_rails.md

@@ -0,0 +1,11 @@
+##### Prop
+
+`gap` | `row_gap` | `column_gap` | **Type**: String | Hash | **Values**: xxs | xs | sm | md | lg | xl | none
+
+Setting the gap prop sets the `row_gap` and the `column_gap` props to the same size and creates equal space within a flex container.
+
+Setting the `row_gap` prop creates space between rows in a flex container.
+
+Setting the `column_gap` prop creates space between columns in a flex container.
+
+You can also set responsive values by passing a hash with device sizes and values. 

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_react.md

@@ -0,0 +1,11 @@
+##### Prop
+
+`gap` | `rowGap` | `columnGap` | **Type**: String | Object | **Values**: xxs | xs | sm | md | lg | xl | none
+
+Setting the gap prop sets the `rowGap` and the `columnGap` props to the same size and creates equal space within a flex container.
+
+Setting the `rowGap` prop creates space between rows in a flex container.
+
+Setting the `columnGap` prop creates space between columns in a flex container.
+
+You can also set responsive values by passing an object with device sizes and values. 

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -24,17 +24,11 @@ module Playbook
                      default: "none",
                      deprecated: true
 
-      prop :gap, type: Playbook::Props::Enum,
-                 values: %w[xxs xs sm md lg xl none],
-                 default: "none"
+      prop :gap
 
-      prop :row_gap, type: Playbook::Props::Enum,
-                     values: %w[xxs xs sm md lg xl none],
-                     default: "none"
+      prop :row_gap
 
-      prop :column_gap, type: Playbook::Props::Enum,
-                        values: %w[xxs xs sm md lg xl none],
-                        default: "none"
+      prop :column_gap
 
       prop :reverse, type: Playbook::Props::Boolean,
                      default: false
@@ -133,7 +127,7 @@ module Playbook
       end
 
       def gap_class
-        if gap == "none"
+        if gap == "none" || gap.nil? || gap.is_a?(Hash)
           nil
         else
           "gap_#{gap}"
@@ -141,7 +135,7 @@ module Playbook
       end
 
       def row_gap_class
-        if row_gap == "none"
+        if row_gap == "none" || row_gap.nil? || row_gap.is_a?(Hash)
           nil
         else
           "rowGap_#{row_gap}"
@@ -149,7 +143,7 @@ module Playbook
       end
 
       def column_gap_class
-        if column_gap == "none"
+        if column_gap == "none" || column_gap.nil? || column_gap.is_a?(Hash)
           nil
         else
           "columnGap_#{column_gap}"

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -242,4 +242,8 @@ svg {
       animation: fa-spin 1s infinite linear;
     }
   }
+
+  &.dark {
+    color: white;
+  }
 }

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -77,6 +77,7 @@ module Playbook
           name: mask.present? ? "" : name,
           pattern: validation_pattern || mask_pattern,
           placeholder: placeholder,
+          style: "cursor: #{cursor_style}",
           required: required,
           type: type,
           value: value,
@@ -84,6 +85,20 @@ module Playbook
         }.merge(input_options)
       end
 
+      def cursor_style
+        # If input is disabled, always use 'not-allowed'
+        return "not-allowed" if disabled
+
+        # If cursor prop is provided, convert it to kebab-case
+        if cursor.present?
+          # Convert camelCase (ex. notAllowed) to kebab-case (ex. not-allowed)
+          cursor.to_s.gsub(/([a-z\d])([A-Z])/, '\1-\2').downcase
+        else
+          # Default to 'pointer'
+          "pointer"
+        end
+      end
+
       def validation_message
         validation[:message] || ""
       end

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

@@ -1,29 +1,17 @@
 @import "spacing";
 
-.gap_none {
-  gap: 0;
-}
+$gap_values: (
+  none: 0,
+  xxs: $space_xxs,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+);
 
-.gap_xxs {
-  gap: $space_xxs;
-}
+@include global_props_responsive_css($gap_values, 'gap', 'gap');
 
-.gap_xs {
-  gap: $space_xs;
-}
+@include global_props_responsive_css($gap_values, 'column_gap', 'column-gap');
 
-.gap_sm {
-  gap: $space_sm;
-}
-
-.gap_md {
-  gap: $space_md;
-}
-
-.gap_lg {
-  gap: $space_lg;
-}
-
-.gap_xl {
-  gap: $space_xl;
-}
+@include global_props_responsive_css($gap_values, 'row_gap', 'row-gap');

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -27,6 +27,8 @@ export default [
   "overflow",
   "order",
   "numberSpacing",
+  "rowGap",
+  "columnGap",
   "gap",
   "maxWidth",
   "minWidth",

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

@@ -112,6 +112,14 @@ type Gap = {
   gap?: string,
 }
 
+type ColumnGap = {
+  columnGap?: string,
+}
+
+type RowGap = {
+  rowGap?: string,
+}
+
 type NumberSpacing = {
   numberSpacing?: "tabular",
 }
@@ -200,7 +208,7 @@ type MinHeight = {
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
-  LineHeight & Margin & Width & MinWidth & MaxWidth & Gap & NumberSpacing & Order & Overflow & Padding &
+  LineHeight & Margin & Width & MinWidth & MaxWidth & Gap & ColumnGap & RowGap & NumberSpacing & Order & Overflow & Padding &
   Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
@@ -377,9 +385,25 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     return css.trimEnd()
   },
   gapProps: ({ gap }: Gap) => {
-    let css = ''
-    css += gap ? `gap_${gap} ` : ''
-    return css.trimEnd()
+    if (typeof gap === 'object') {
+      return getResponsivePropClasses(gap, 'gap')
+    } else {
+      return gap ? `gap_${gap}` : ''
+    }
+  },
+  columnGapProps: ({ columnGap }: ColumnGap) => {
+    if (typeof columnGap === 'object') {
+      return getResponsivePropClasses(columnGap, 'column_gap')
+    } else {
+      return columnGap ? `column_gap_${columnGap}` : ''
+    }
+  },
+  rowGapProps: ({ rowGap }: RowGap) => {
+    if (typeof rowGap === 'object') {
+      return getResponsivePropClasses(rowGap, 'row_gap')
+    } else {
+      return rowGap ? `row_gap_${rowGap}` : ''
+    }
   },
   minHeightProps: ({ minHeight }: MinHeight) => {
     const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]

data/dist/chunks/{_line_graph-qk_BN_J0.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-ZLTFtAoW.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};