playbook_ui 15.1.0.pre.alpha.PLAY2468phonenuminputvalidation10803 → 15.1.0.pre.alpha.play252710946

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1607dd2475fc082a109f3ad1d2dc03b07887fba69f23a5754d96020c18e75397
-  data.tar.gz: 3b597c713dd113e61049aea67c57d0e30e2c33a8c144e2f0611cd053c3fa1406
+  metadata.gz: 1356285c2892298ab0d74134116ab03ac8559495657fddba5c09715c495b8f8b
+  data.tar.gz: e780800f41ea2ca322b7cfb5e15b1e0b8ca1b58ff949e196771987b45a659b79
 SHA512:
-  metadata.gz: 89b69260b005e8a057fe6ada81c6c09706ad2dd938d1a1ea3403a5b8e36c5b50802f7c8976312429b14e2a9cc4c881d148f46e2567593f8a9db801d994a0c231
-  data.tar.gz: 6121137545315510e02d3cda537276fb12b196e93cb3032542a6dd4c84a81ca612ecd181304d52710c2b8eaf07ce8238daf8f4cbdb64f9e39b257235178bd132
+  metadata.gz: '0930a43f3351acff7849b6eee6c89b565d5454d59a7b81aa4e6b08571d353203c9d47894c4c1cbeb1c3f17d0106fcbe1e7f77a6958cc176ce5f1a2143393aef6'
+  data.tar.gz: ae3b1306ae43c73b5a86f949cccd21cead3e2c74b81f59caee59f80b8b53509fe791ef4bc54000580526f29d82f77cf82e11eccf23f69d8173ac8174b675fd2e

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.html.erb

@@ -0,0 +1,31 @@
+  <%= pb_rails("body", props: { text: "Click to disable the Buttons below", id: "toggle-disabled-demo", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
+  <%= pb_rails("body", props: { text: "Click to enable the Buttons below", id: "toggle-enabled-demo", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
+
+<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
+<%= pb_rails("button", props: { text: "I am a Button", id: "normal_managed_button", data:{pb_button_managed: true}, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "I am an <a> Button", id: "a_tag_managed_button", tag:"a", data:{pb_button_managed: true}, link: "http://google.com"}) %>
+<% end %>
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const disableTrigger = document.querySelector('#toggle-disabled-demo')
+    const enableTrigger = document.querySelector('#toggle-enabled-demo')
+
+    // Find the Buttons you want to 'manage'
+    const btn = document.querySelector('#normal_managed_button');
+    const link = document.querySelector('#a_tag_managed_button');
+
+    disableTrigger.addEventListener('click', (e) => {
+        // Disable default button
+        btn.setAttribute('disabled', true)
+        // Disable a tag button
+        link.setAttribute('aria-disabled', 'true')
+    });
+
+    enableTrigger.addEventListener('click', (e) => {
+        // Enable default button
+        btn.removeAttribute('disabled')
+        // Enable a tag button
+        link.removeAttribute('aria-disabled')
+    });
+  });
+</script>

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md

@@ -0,0 +1,7 @@
+If needing to toggle the disabled state of the Button dynamically (for example, within a Turbo or Stimulus context), you can now do so in rails using the `pb-button-managed` data attribute. 
+
+1) Add the following data attribute to your button kit: `data:{ pb-button-managed: true }`
+
+2) To toggle enabled/disabled state via attributes: for buttons set/remove disabled, for links set/remove aria-disabled="true". This will handle disabling the button, preventing clicks as well as all style changes so you don't have to.  
+
+Click to enable or disable the buttons above and view the code snippet below for details!

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb

@@ -0,0 +1,21 @@
+  <%= pb_rails("body", props: { text: "Click to disable the Button below", id: "toggle-disabled-demo-with-helper", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
+  <%= pb_rails("body", props: { text: "Click to enable the Button below", id: "toggle-enabled-demo-with-helper", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
+<br/>
+<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
+<%= pb_rails("button", props: { text: "Watch me Change!", id: "managed_button_with_helper", data:{pb_button_managed: true} }) %>
+<% end %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const disable = document.querySelector('#toggle-disabled-demo-with-helper')
+    const enable = document.querySelector('#toggle-enabled-demo-with-helper')
+
+    // Find the Button you want to 'manage'
+    const demoBtn = document.querySelector('#managed_button_with_helper')
+
+    // Use the pbButton object created by the kit to call the enable/disable methods
+    disable.addEventListener('click', (e) => {demoBtn._pbButton.disable()});
+    enable.addEventListener('click', (e) => {demoBtn._pbButton.enable()});
+
+  });
+</script>

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.md

@@ -0,0 +1,7 @@
+The disabled state for the button can also be toggled via small helpers available through the `pb-button-managed` data attribute. 
+
+1) Add the following data attribute to your button kit: `data:{ pb-button-managed: true }`
+
+2) Toggle state via the provided `_pbButton.disable()` and `_pbButton.enable()` helpers as shown in the code snippet below.
+
+Click to enable or disable the buttons above to see this in action!

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

@@ -11,6 +11,8 @@ examples:
   - button_options: Button Additional Options
   - button_size: Button Size
   - button_form: Button Form Attribute
+  - button_managed_disabled: Button Toggle Disabled State
+  - button_managed_disabled_helper: Button Toggle Disabled State Helper
   
   react:
   - button_default: Button Variants

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

@@ -0,0 +1,99 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+const BUTTON_SELECTOR = "[data-pb-button-managed]"
+
+export default class PbButton extends PbEnhancedElement {
+  static get selector() {
+    return BUTTON_SELECTOR
+  }
+
+  connect() {
+    this._attrManaged = this._attributesPresent()
+    this.element._pbButton = this 
+
+    this._onClick = (e) => {
+      if (this.isDisabled()) {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+      }
+    }
+    this.element.addEventListener("click", this._onClick, true)
+
+    if (this._attrManaged) this._syncClassesFromAttributes()
+
+    this._observer = new MutationObserver(() => {
+      this._attrManaged = true
+      this._syncClassesFromAttributes()
+    })
+    this._observer.observe(this.element, {
+      attributes: true,
+      attributeFilter: ["disabled", "aria-disabled"],
+    })
+  }
+
+  disconnect() {
+    this.element.removeEventListener("click", this._onClick, true)
+    this._observer?.disconnect()
+    delete this.element._pbButton
+  }
+
+  disable() { this.setDisabled(true) }
+  enable()  { this.setDisabled(false) }
+
+  setDisabled(state) {
+    if (this._isButton()) {
+      state
+        ? this.element.setAttribute("disabled", "disabled")
+        : this.element.removeAttribute("disabled")
+    } else {
+      state
+        ? this.element.setAttribute("aria-disabled", "true")
+        : this.element.removeAttribute("aria-disabled")
+    }
+    this._attrManaged = true
+    this._applyClassState(state)
+  }
+
+  isDisabled() {
+    if (this._isButton()) {
+      if (this.element.hasAttribute("disabled")) return true
+      if (this._attrManaged && !this.element.hasAttribute("disabled")) return false
+    } else {
+      const aria = this.element.getAttribute("aria-disabled")
+      if (aria === "true") return true
+      if (this._attrManaged && aria !== "true") return false
+    }
+    return this.element.classList.contains("pb_button_disabled")
+  }
+
+  _isButton() {
+    return this.element.tagName === "BUTTON"
+  }
+
+  _attributesPresent() {
+    return this.element.hasAttribute("disabled") || this.element.hasAttribute("aria-disabled")
+  }
+
+  _syncClassesFromAttributes() {
+    const state = this._attrDisabledState()
+    const disabled = (state === null) ? false : state
+    this._applyClassState(disabled)
+  }
+
+  _attrDisabledState() {
+    if (this._isButton()) {
+      return this.element.hasAttribute("disabled") ? true : null
+    } else {
+      const aria = this.element.getAttribute("aria-disabled")
+      if (aria === "true") return true
+      if (aria === "false") return false
+      return this.element.hasAttribute("aria-disabled") ? false : null
+    }
+  }
+
+  _applyClassState(disabled) {
+    this.element.classList.toggle("pb_button_disabled", !!disabled)
+    this.element.classList.toggle("pb_button_enabled", !disabled)
+  }
+}
+

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -21,6 +21,15 @@
   ]
 %>
 
+<%
+  example_typeahead_options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
 <% treeData = [{
     label: "Power Home Remodeling",
     value: "Power Home Remodeling",
@@ -88,9 +97,11 @@
 }] %>
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
-  <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
+  <%= form.typeahead :example_typeahead_validation_rails, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>  
+  <%= form.typeahead :example_typeahead_validation, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
+  <%= form.typeahead :example_typeahead_validation_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true, required: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -2,14 +2,12 @@ import PbEnhancedElement from '../pb_enhanced_element'
 import { debounce } from '../utilities/object'
 
 // Kit selectors
-const KIT_SELECTOR                           = '[class^="pb_"][class*="_kit"]'
-const ERROR_MESSAGE_SELECTOR                 = '.pb_body_kit_negative'
-const PHONE_NUMBER_INPUT_SELECTOR            = '.pb_phone_number_input'
+const KIT_SELECTOR             = '[class^="pb_"][class*="_kit"]'
+const ERROR_MESSAGE_SELECTOR   = '.pb_body_kit_negative'
 
 // Validation selectors
-const FORM_SELECTOR                          = 'form[data-pb-form-validation="true"]'
-const REQUIRED_FIELDS_SELECTOR               = 'input[required],textarea[required],select[required]'
-const PHONE_NUMBER_VALIDATION_ERROR_SELECTOR = '[data-pb-phone-validation-error="true"]'
+const FORM_SELECTOR            = 'form[data-pb-form-validation="true"]'
+const REQUIRED_FIELDS_SELECTOR = 'input[required],textarea[required],select[required]'
 
 const FIELD_EVENTS = [
   'change',
@@ -30,14 +28,6 @@ class PbFormValidation extends PbEnhancedElement {
         }, 250), false)
       })
     })
-
-    // Add event listener to check for phone number validation errors
-    this.element.addEventListener('submit', (event) => {
-      if (this.hasPhoneNumberValidationErrors()) {
-        event.preventDefault()
-        return false
-      }
-    })
   }
 
   validateFormField(event) {
@@ -55,18 +45,10 @@ class PbFormValidation extends PbEnhancedElement {
 
   showValidationMessage(target) {
     const { parentElement } = target
-    const kitElement = parentElement.closest(KIT_SELECTOR)
-
-    // Skip error message container for Phone Number Input as it handles its own errors
-    // as the closest kitElement is "pb_text_input_kit mb_sm" for Phone Number Input,
-    // we target the parent element of kitElement to check
-    if (kitElement && kitElement.parentElement.matches(PHONE_NUMBER_INPUT_SELECTOR)) {
-      return
-    }
 
     // ensure clean error message state
     this.clearError(target)
-    kitElement.classList.add('error')
+    parentElement.closest(KIT_SELECTOR).classList.add('error')
 
     // set the error message element
     const errorMessageContainer = this.errorMessageContainer
@@ -81,23 +63,9 @@ class PbFormValidation extends PbEnhancedElement {
 
   clearError(target) {
     const { parentElement } = target
-    const kitElement = parentElement.closest(KIT_SELECTOR)
-
-    if (kitElement) {
-      kitElement.classList.remove('error')
-
-      // Only remove error message container for non-Phone Number Input kits
-      if (!kitElement.matches(PHONE_NUMBER_INPUT_SELECTOR)) {
-        const errorMessageContainer = parentElement.querySelector(ERROR_MESSAGE_SELECTOR)
-        if (errorMessageContainer) errorMessageContainer.remove()
-      }
-    }
-  }
-
-  // Check if there are phone number input errors
-  hasPhoneNumberValidationErrors() {
-    const phoneNumberErrors = this.element.querySelectorAll(PHONE_NUMBER_VALIDATION_ERROR_SELECTOR)
-    return phoneNumberErrors.length > 0
+    parentElement.closest(KIT_SELECTOR).classList.remove('error')
+    const errorMessageContainer = parentElement.querySelector(ERROR_MESSAGE_SELECTOR)
+    if (errorMessageContainer) errorMessageContainer.remove()
   }
 
   get errorMessageContainer() {

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

@@ -110,35 +110,18 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const inputRef = useRef<HTMLInputElement | null>(null)
   const itiRef = useRef<any>(null);
-  const wrapperRef = useRef<HTMLDivElement | null>(null); // Add wrapper ref
   const [inputValue, setInputValue] = useState(value)
   const [error, setError] = useState(props.error)
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
   const [hasTyped, setHasTyped] = useState(false)
 
-  // Function to update validation state on the wrapper element
-  // Only applies when input is required
-  const updateValidationState = (hasError: boolean) => {
-    if (wrapperRef.current && required) {
-      if (hasError) {
-        wrapperRef.current.setAttribute('data-pb-phone-validation-error', 'true')
-      } else {
-        wrapperRef.current.removeAttribute('data-pb-phone-validation-error')
-      }
-    }
-  }
-
   useEffect(() => {
-    const hasError = (error ?? '').length > 0
-    if (hasError) {
+    if ((error ?? '').length > 0) {
       onValidate(false)
     } else {
       onValidate(true)
     }
-
-    // Update validation state whenever error changes
-    updateValidationState(hasError)
   }, [error, onValidate])
 
   /*
@@ -152,10 +135,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         setInputValue("")
         setError("")
         setHasTyped(false)
-        // Only clear validation state if field was required
-        if (required) {
-          updateValidationState(false)
-        }
       },
       inputNode() {
         return inputRef.current
@@ -185,13 +164,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const validateTooShortNumber = (itiInit: any) => {
     if (!itiInit) return
-
-    // If field is empty, don't show "too short" error
-    if (!inputValue || inputValue.trim() === '') {
-      setError('')
-      return false
-    }
-
     if (itiInit.getValidationError() === ValidationError.TooShort) {
       return showFormattedError('too short')
     } else {
@@ -240,26 +212,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     }
   }
 
-  // Validation for required empty fields
-  const validateRequiredField = () => {
-    if (required && (!inputValue || inputValue.trim() === '')) {
-      setError('Missing phone number')
-      return true
-    }
-    return false
-  }
 
   const validateErrors = () => {
-    // If field is empty, only show required field error if applicable
-    if (!inputValue || inputValue.trim() === '') {
-      if (validateRequiredField()) return
-      // Clear any existing errors if field is empty and not required
-      if (!required) {
-        setError('')
-      }
-      return
-    }
-
     if (!hasTyped && !error) return
 
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
@@ -356,10 +310,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     value: inputValue
   }
 
-  let wrapperProps: Record<string, unknown> = {
-    className: classes,
-    ref: wrapperRef // Add ref to wrapper
-  }
+  let wrapperProps: Record<string, unknown> = { className: classes }
 
   if (!isEmpty(aria)) textInputProps = {...textInputProps, ...ariaProps}
   if (!isEmpty(data)) wrapperProps = {...wrapperProps, ...dataProps}

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -53,6 +53,8 @@ type TypeaheadProps = {
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
   onChange?: any,
   optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
+  required?: boolean,
+  validation?: { message: string },
   searchContextSelector?: string,
   clearOnContextChange?: boolean,
   preserveSearchInput?: boolean,
@@ -94,12 +96,16 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   onChange,
   optionsByContext = {},
   searchContextSelector,
+  required = false,
+  validation,
   clearOnContextChange = false,
   preserveSearchInput = false, // Default to false to maintain backward compatibility
   ...props
 }: TypeaheadProps) => {
   // State to manage the input value when preserveSearchInput is true
   const [inputValue, setInputValue] = useState("")
+  // State to track if form has been submitted to control validation display for react rendered rails kit
+  const [formSubmitted, setFormSubmitted] = useState(false)
 
   // If preserveSearchInput is true, we need to control the input value
   const handleInputChange = preserveSearchInput
@@ -135,6 +141,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
 
   const selectProps = {
     cacheOptions: true,
+    required,
     components: {
       Control,
       ClearIndicator,
@@ -170,6 +177,27 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
 
   const [contextValue, setContextValue] = useState("")
 
+  // Add listener for form validation to track when validation should be shown (needed for react rendered rails kit)
+  useEffect(() => {
+    const handleInvalid = (event: Event) => {
+      const target = event.target as HTMLInputElement
+      const typeaheadContainer = target.closest('[data-pb-react-component="Typeahead"]')
+
+      if (typeaheadContainer) {
+        // Check if this invalid event is specifically for our typeahead by comparing names so we do not have to require ids
+        const invalidInputName = target.name || target.getAttribute('name')
+        if (invalidInputName === name) {
+          setFormSubmitted(true)
+        }
+      }
+    }
+    document.addEventListener('invalid', handleInvalid, true)
+    
+    return () => {
+      document.removeEventListener('invalid', handleInvalid, true)
+    }
+  }, [name])
+
   // Add listener for clearing
   useEffect(() => {
     const handleClear = () => {
@@ -230,6 +258,11 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
       }
     }
 
+    // Reset form submitted state when a selection is made (this is all for react rendered rails kit)
+    if (action === 'select-option') {
+      setFormSubmitted(false)
+    }
+
     // If a value is selected and we're preserving input on blur, clear the input
     if (action === 'select-option' && preserveSearchInput) {
       setInputValue('')
@@ -268,6 +301,11 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
 
   const inlineClass = selectProps.inline ? 'inline' : null
 
+  const shouldShowValidationError = required && 
+                                   formSubmitted
+
+  const errorDisplay = error || (shouldShowValidationError ? validation?.message || "Please fill out this field." : "")
+
   return (
     <div
         {...dataProps}
@@ -276,7 +314,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     >
       <Tag
           classNamePrefix="typeahead-kit-select"
-          error={error}
+          error={errorDisplay}
           isDisabled={disabled}
           onChange={handleOnChange}
           {...selectProps}

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -101,6 +101,8 @@ module Playbook
           plusIcon: plus_icon,
           truncate: truncate,
           wrapped: wrapped,
+          required: required,
+          validation: validation,
           searchContextSelector: search_context_selector,
           optionsByContext: options_by_context,
           clearOnContextChange: clear_on_context_change,

data/dist/chunks/{_line_graph-Bkn-wx30.js → _line_graph-DwC5jqYQ.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-DkRYiut7.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-4Ud3FHDA.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};