playbook_ui 15.1.0.pre.alpha.PLAY2468phonenuminputvalidation10992 → 15.1.0.pre.alpha.PLAY2468phonenuminputvalidation11082

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e2637dde911b63f8029bff9ae19d9594669e1542f0440096faa883691682b564
-  data.tar.gz: 4d6815cf9b520c323db4eaa8dbec96db00f48448979ca5ea70f984b6f38ee77f
+  metadata.gz: 2e1e7a4a49bf159f82731b4678231fc261993cde3556f8c8c90f181196d7d86d
+  data.tar.gz: c3ecec58f186c3ce30dfa663b80d87f71c5185d9df25963dc3ea328a210c9648
 SHA512:
-  metadata.gz: 86ba27640680876e6144e103a06064cf1dfb2caf6a3a11171d95bda18b5e48e35ebd64f41ff30341bbf91f3082f202075cf37184d25c6c75d3b00d462cdeb1ce
-  data.tar.gz: 16c62492eb591dafd46ef8259a1898e68dc64cde85ed5411d5e1e18d851c9caa82ccd3e7417c58f6c9a47d98a4667dac23ea960296f32e42abacc3e110c3d2a9
+  metadata.gz: af7cb078be3a0615e1f3035fe9f03b3f94994b12436a790905cc86bd38749665c8214160a77cd6599103b6b50b28f68b7b25a08598ffce3b2f4fedfe8df31edb
+  data.tar.gz: fabf56e0e6d70ce671f875fa5265ad12743e6bdf05d6b37d92e19b3cdc6b80b38d9e69e24e939517deb43582bea0a1d0d2a9c20e0e7572244f3cfa3abf360ffe

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -146,8 +146,6 @@ export function useTableState({
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
-    if (!pagination) return {};
-
     return {
       getPaginationRowModel: getPaginationRowModel(),
       paginateExpandedRows: false,

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

@@ -19,6 +19,10 @@
     @import "./sass_partials/calendar_input_icon";
   }
 
+  label {
+    display: block !important;
+  }
+
   &:focus,
   :focus-within {
     div.cal_icon_wrapper,

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb

@@ -3,12 +3,12 @@
 <%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-stacked-delete"}, margin_right: "md" }) %>
 
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-default", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-default",
     status: "default",
-    size: "sm", 
-    title: "Are you sure?", 
-    text: "Text explaining why there is an alert", 
+    size: "sm",
+    title: "Are you sure?",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
@@ -18,12 +18,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-caution", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-caution",
     status: "caution",
-    size: "sm", 
-    title: "Are you sure?", 
-    text: "This is the action you will be taking", 
+    size: "sm",
+    title: "Are you sure?",
+    text: "This is the action you will be taking",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
@@ -33,16 +33,16 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-delete", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-delete",
     status: "delete",
-    size: "sm", 
-    title: "Delete", 
-    text: "You are about to delete ...", 
+    size: "sm",
+    title: "Delete",
+    text: "You are about to delete ...",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
+            <%= pb_rails("button", props: { text: "Yes, Action", variant: "danger", full_width: true }) %>
             <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-delete" } }) %>
         <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx

@@ -51,7 +51,7 @@ const DialogStackedAlert = () => {
   return (
     <div>
     <Flex
-        rowGap="xs" 
+        rowGap="xs"
         wrap
     >
       <Button
@@ -93,6 +93,7 @@ const DialogStackedAlert = () => {
           <Button
               fullWidth
               onClick={dialog.toggle}
+              variant= {dialog.status == "delete" ? "danger" : "primary"}
           >
             {dialog.buttonOneText}
           </Button>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb

@@ -8,12 +8,12 @@
 <%= pb_rails("button", props: { text: "Success Status", data: {"open-dialog": "dialog-status-success"}, margin_right: "md" }) %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-default", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-default",
     status: "default",
-    size: "status_size", 
-    title: "Are you sure?", 
-    text: "Text explaining why there is an alert", 
+    size: "status_size",
+    title: "Are you sure?",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -23,12 +23,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-info", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-info",
     status: "info",
-    size: "status_size", 
-    title: "Information", 
-    text: "Text explaining why there is an alert", 
+    size: "status_size",
+    title: "Information",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -37,12 +37,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-caution", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-caution",
     status: "caution",
-    size: "status_size", 
-    title: "Are you Sure?", 
-    text: "This is the action you will be taking", 
+    size: "status_size",
+    title: "Are you Sure?",
+    text: "This is the action you will be taking",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -52,27 +52,27 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-delete", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-delete",
     status: "delete",
-    size: "status_size", 
-    title: "Delete", 
-    text: "You are about to delete ...", 
+    size: "status_size",
+    title: "Delete",
+    text: "You are about to delete ...",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { text: "Yes, Delete" }) %>
+            <%= pb_rails("button", props: { text: "Yes, Delete", variant: "danger" }) %>
             <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-delete" } }) %>
         <% end %>
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-error", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-error",
     status: "error",
-    size: "status_size", 
-    title: "Error Message", 
-    text: "Text explaining the error", 
+    size: "status_size",
+    title: "Error Message",
+    text: "Text explaining the error",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -81,12 +81,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-success", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-success",
     status: "success",
-    size: "status_size", 
-    title: "Success!", 
-    text: "Text explaining what is successful", 
+    size: "status_size",
+    title: "Success!",
+    text: "Text explaining what is successful",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -83,8 +83,8 @@ const DialogStatus = () => {
 
   return (
     <div>
-      <Flex 
-          rowGap="xs" 
+      <Flex
+          rowGap="xs"
           wrap
       >
         <Button
@@ -117,7 +117,7 @@ const DialogStatus = () => {
         >
           {"Success Status"}
         </Button>
-        <Button 
+        <Button
             marginRight="md"
             onClick={toggleErrorAlert}
         >
@@ -152,6 +152,7 @@ const DialogStatus = () => {
                   <Button
                       onClick={dialog.toggle}
                       paddingRight="xl"
+                      variant={dialog.status == "delete" ? "danger" : "primary"}
                   >
                   {dialog.buttonOneText}
                   </Button>

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -112,11 +112,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   const itiRef = useRef<any>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const [inputValue, setInputValue] = useState(value)
-  const [error, setError] = useState("")
+  const [error, setError] = useState(props.error || "")
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
   const [hasTyped, setHasTyped] = useState(false)
   const [formSubmitted, setFormSubmitted] = useState(false)
+  const [hasStartedValidating, setHasStartedValidating] = useState(false)
+
+  // Only sync initial error from props, not continuous updates
+  // Once validation starts, internal validation takes over
+  useEffect(() => {
+    if (props.error && !hasStartedValidating) {
+      setError(props.error)
+      // If there's an initial error from props, mark as submitted so it shows
+      if (props.error) {
+        setFormSubmitted(true)
+      }
+    }
+  }, [props.error, hasStartedValidating])
 
   // Function to update validation state on the wrapper element
   // Only applies when input is required
@@ -133,7 +146,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   // Determine which error to display
   // Show internal errors on blur (hasTyped) or on form submission (formSubmitted)
   const shouldShowInternalError = (hasTyped || formSubmitted) && required && error
-  const displayError = props.error || (shouldShowInternalError ? error : "")
+  const displayError = shouldShowInternalError ? error : ""
 
   useEffect(() => {
     const hasError = error.length > 0
@@ -234,6 +247,11 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const validateErrors = () => {
+    // Signal validation has started, so prop errors won't override internal validation
+    if (!hasStartedValidating) {
+      setHasStartedValidating(true)
+    }
+
     // If field is empty, only show required field error if applicable
     if (!inputValue || inputValue.trim() === '') {
       if (validateRequiredField()) return
@@ -289,6 +307,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         setError("")
         setHasTyped(false)
         setFormSubmitted(false)
+        setHasStartedValidating(false)
         // Only clear validation state if field was required
         if (required) {
           updateValidationState(false)
@@ -317,6 +336,27 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
           return true
         }
 
+        // Check for repeat country code first
+        const countryDialCode = itiRef.current.getSelectedCountryData().dialCode;
+        if (unformatNumber(inputValue).startsWith(countryDialCode)) {
+          const countryName = itiRef.current.getSelectedCountryData().name
+          const errorMessage = `Invalid ${countryName} phone number (repeat country code)`
+          setError(errorMessage)
+          setFormSubmitted(true)
+          setHasTyped(true)
+          return errorMessage
+        }
+
+        // Check if it only contains valid characters
+        if (!containOnlyNumbers(inputValue)) {
+          const countryName = itiRef.current.getSelectedCountryData().name
+          const errorMessage = `Invalid ${countryName} phone number (enter numbers only)`
+          setError(errorMessage)
+          setFormSubmitted(true)
+          setHasTyped(true)
+          return errorMessage
+        }
+
         // Check if valid number
         if (!itiRef.current.isValidNumber()) {
           const countryName = itiRef.current.getSelectedCountryData().name
@@ -329,8 +369,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
             errorMessage = `Invalid ${countryName} phone number (too long)`
           } else if (validationError === ValidationError.MissingAreaCode) {
             errorMessage = `Invalid ${countryName} phone number (missing area code)`
-          } else if (!containOnlyNumbers(inputValue)) {
-            errorMessage = `Invalid ${countryName} phone number (enter numbers only)`
           } else {
             errorMessage = `Invalid ${countryName} phone number`
           }

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -140,10 +140,14 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     formattedValue = value
   }
 
+  const errorId = error ? `${id}-error` : undefined
+
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
         {...domSafeProps(props)}
+        aria-describedby={errorId}
+        aria-invalid={!!error}
         autoComplete={typeof autoComplete === "string" ? autoComplete : ( autoComplete ? undefined : "off" )}
         className="text_input"
         disabled={disabled}
@@ -202,16 +206,20 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...htmlProps}
         className={css}
     >
-      {label &&
-        <Caption
-            className="pb_text_input_kit_label"
-            text={label}
-        />
-      }
+      {label && (
+        <label htmlFor={id}>
+          <Caption className="pb_text_input_kit_label" 
+              text={label} 
+          />
+        </label>
+      )}
       <div className={`${addOnCss} text_input_wrapper`}>
         {render}
 
         {error && <Body
+            aria={{ atomic: "true", live: "polite" }}
+            htmlOptions={{ role: "alert" }}
+            id={errorId}
             status="negative"
             text={error}
             variant={null}

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb

@@ -9,23 +9,27 @@
 
 <%= pb_rails("text_input", props: {
   label: "Last Name",
-  placeholder: "Enter last name"
+  placeholder: "Enter last name",
+  id: "last-name"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Phone Number",
     type: "phone",
-    placeholder: "Enter phone number"
+    placeholder: "Enter phone number",
+    id: "phone"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Email Address",
     type: "email",
-    placeholder: "Enter email address"
+    placeholder: "Enter email address",
+    id: "email"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Zip Code",
     type: "number",
-    placeholder: "Enter zip code"
+    placeholder: "Enter zip code",
+    id: "zip"
 }) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -38,6 +38,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="last-name"
           label="Last Name"
           name="lastName"
           onChange={handleOnChangeFormField}
@@ -46,6 +47,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="phone"
           label="Phone Number"
           name="phone"
           onChange={handleOnChangeFormField}
@@ -55,6 +57,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="email"
           label="Email Address"
           name="email"
           onChange={handleOnChangeFormField}
@@ -64,6 +67,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="zip"
           label="Zip Code"
           name="zip"
           onChange={handleOnChangeFormField}
@@ -84,6 +88,7 @@ const TextInputDefault = (props) => {
       <br />
 
       <TextInput
+          id="first-name"
           label="First Name"
           onChange={handleOnChangeFirstName}
           placeholder="Enter first name"

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.md

@@ -0,0 +1 @@
+Add an `id` to your Text Input so that clicking the label will move focus directly to the input.

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -1,6 +1,8 @@
 <%= pb_content_tag(:div, id: nil ) do  %>
   <% if object.label.present? %>
+  <label for="<%= object.input_options[:id] || object.id %>" >
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
+  </label>
   <% end %>
   <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
     <% if content.present? %>
@@ -15,7 +17,7 @@
     <% else %>
       <%= input_tag %>
     <% end %>
-    <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
+    <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }}) if object.error %>
   <% end %>
 <% end %>
 

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

@@ -64,10 +64,16 @@ module Playbook
         "#{object.id}-sanitized" if id.present?
       end
 
+      def error_id
+        "#{id}-error" if error.present?
+      end
+
     private
 
       def all_input_options
         {
+          'aria-describedby': error.present? ? error_id : nil,
+          'aria-invalid': error.present?,
           autocomplete: autocomplete == true ? nil : (autocomplete.presence || "off"),
           class: "text_input #{input_options.dig(:classname) || ''}",
           data: validation_data,

data/dist/chunks/{_line_graph-340qmHGU.js → _line_graph-Cw2C1Nuk.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-Cs94bYmH.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{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-DslCE4I8.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};