playbook_ui 15.1.0.pre.alpha.PLAY251810942 → 15.1.0.pre.alpha.play252710946

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ea9f5c8acfb10e8fb3d40fea187b82854b1fb068361853c9b032f91fca4685ad
4
- data.tar.gz: ff8472f9f4055f5b24cb17583c02c37fa5cc022f37bf7d36869cb4d2dc06feaf
3
+ metadata.gz: 1356285c2892298ab0d74134116ab03ac8559495657fddba5c09715c495b8f8b
4
+ data.tar.gz: e780800f41ea2ca322b7cfb5e15b1e0b8ca1b58ff949e196771987b45a659b79
5
5
  SHA512:
6
- metadata.gz: a7a3df82c8d6bb097dc840c452b3658a4751f3ecb1efde791db7043328cca7a1450adb4d56b0b1d52e13ebd7e75163573105a2910bd01faeca49c05937086f83
7
- data.tar.gz: 869e0b7510f081c28a277b0f77f1c96e2f63dccfc5955913140a00952741545f79e728370a234ded1cedba4fde080bbd396650e357a37b24ede37ac55428bfff
6
+ metadata.gz: '0930a43f3351acff7849b6eee6c89b565d5454d59a7b81aa4e6b08571d353203c9d47894c4c1cbeb1c3f17d0106fcbe1e7f77a6958cc176ce5f1a2143393aef6'
7
+ data.tar.gz: ae3b1306ae43c73b5a86f949cccd21cead3e2c74b81f59caee59f80b8b53509fe791ef4bc54000580526f29d82f77cf82e11eccf23f69d8173ac8174b675fd2e
@@ -10,15 +10,9 @@
10
10
  @import "./scss_partials/dropdown_animation";
11
11
  @import "dropdown_mixin";
12
12
 
13
- .pb_dropdown_default,
14
- .pb_dropdown_subtle,
15
- .pb_dropdown_default_separators_hidden,
16
- .pb_dropdown_subtle_separators_hidden {
13
+ [class*="pb_dropdown"] {
17
14
  .dropdown_wrapper {
18
- .dropdown_trigger_wrapper,
19
- .dropdown_trigger_wrapper_focus,
20
- .dropdown_trigger_wrapper_focus_select_only,
21
- .dropdown_trigger_wrapper_select_only {
15
+ [class*="dropdown_trigger_wrapper"] {
22
16
  @include pb_body;
23
17
  border: 1px solid $border_light;
24
18
  background-color: $white;
@@ -54,11 +48,11 @@
54
48
  transition: box-shadow 0.15s ease-in-out;
55
49
  }
56
50
 
57
- &.dropdown_trigger_wrapper_select_only {
51
+ &[class*="_select_only"] {
58
52
  box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
59
53
  }
60
54
 
61
- &.dropdown_trigger_wrapper_focus {
55
+ &[class*="_focus"] {
62
56
  box-shadow: 0px 0px 0 1px $primary !important;
63
57
  transition: box-shadow 0.1s ease-in-out;
64
58
  }
@@ -75,12 +69,7 @@
75
69
  z-index: $z_1;
76
70
  width: 100%;
77
71
 
78
- .pb_dropdown_option,
79
- .pb_dropdown_option_list,
80
- .pb_dropdown_option_selected,
81
- .pb_dropdown_option_focused,
82
- .pb_dropdown_option_list_focused,
83
- .pb_dropdown_option_selected_focused {
72
+ [class*="pb_dropdown_option"] {
84
73
  padding-left: $space_sm;
85
74
  padding-right: $space_sm;
86
75
  padding-top: $space_xs;
@@ -90,14 +79,11 @@
90
79
  background-color: $bg_light;
91
80
  }
92
81
 
93
- &.pb_dropdown_option_focused,
94
- &.pb_dropdown_option_list_focused,
95
- &.pb_dropdown_option_selected_focused {
82
+ &[class*="_focused"] {
96
83
  background-color: $bg_light;
97
84
  }
98
85
 
99
- &.pb_dropdown_option_list,
100
- &.pb_dropdown_option_list_focused {
86
+ &[class*="_list"] {
101
87
  border-bottom: 1px solid $border_light;
102
88
 
103
89
  &:hover, &:focus {
@@ -106,8 +92,7 @@
106
92
  }
107
93
  }
108
94
  }
109
- &.pb_dropdown_option_selected,
110
- &.pb_dropdown_option_selected_focused {
95
+ &[class*="selected"] {
111
96
  background-color: $primary;
112
97
  color: $white;
113
98
  [class^="pb_body"],
@@ -156,66 +141,41 @@
156
141
  }
157
142
 
158
143
  &.error {
159
- .pb_body_kit_negative {
144
+ [class*=pb_body_kit] {
160
145
  margin-top: $space_xs / 2;
161
146
  }
162
147
 
163
- .dropdown_trigger_wrapper,
164
- .dropdown_trigger_wrapper_focus,
165
- .dropdown_trigger_wrapper_focus_select_only,
166
- .dropdown_trigger_wrapper_select_only {
148
+ [class*="dropdown_trigger_wrapper"] {
167
149
  border-color: $error;
168
150
  box-shadow: none !important;
169
151
  }
170
152
  }
171
153
  }
172
154
 
173
- &.pb_dropdown_default_separators_hidden,
174
- &.pb_dropdown_subtle_separators_hidden {
155
+ &[class*="separators_hidden"] {
175
156
  .dropdown_wrapper {
176
157
  .pb_dropdown_container {
177
158
 
178
- .pb_dropdown_option,
179
- .pb_dropdown_option_list,
180
- .pb_dropdown_option_selected,
181
- .pb_dropdown_option_focused,
182
- .pb_dropdown_option_list_focused,
183
- .pb_dropdown_option_selected_focused {
159
+ [class*="pb_dropdown_option"] {
184
160
  border: none;
185
161
  }
186
162
  }
187
163
  }
188
164
  }
189
165
 
190
- &.pb_dropdown_subtle,
191
- &.pb_dropdown_subtle_separators_hidden {
166
+ &[class*="subtle"] {
192
167
  .dropdown_wrapper {
193
168
  .pb_dropdown_container {
194
169
 
195
- .pb_dropdown_option:first-child,
196
- .pb_dropdown_option_list:first-child,
197
- .pb_dropdown_option_selected:first-child,
198
- .pb_dropdown_option_focused:first-child,
199
- .pb_dropdown_option_list_focused:first-child,
200
- .pb_dropdown_option_selected_focused:first-child {
170
+ [class*="pb_dropdown_option"]:first-child {
201
171
  margin-top: $space_xs;
202
172
  }
203
173
 
204
- .pb_dropdown_option:last-child,
205
- .pb_dropdown_option_list:last-child,
206
- .pb_dropdown_option_selected:last-child,
207
- .pb_dropdown_option_focused:last-child,
208
- .pb_dropdown_option_list_focused:last-child,
209
- .pb_dropdown_option_selected_focused:last-child {
174
+ [class*="pb_dropdown_option"]:last-child {
210
175
  margin-bottom: $space_xs;
211
176
  }
212
177
 
213
- .pb_dropdown_option,
214
- .pb_dropdown_option_list,
215
- .pb_dropdown_option_selected,
216
- .pb_dropdown_option_focused,
217
- .pb_dropdown_option_list_focused,
218
- .pb_dropdown_option_selected_focused {
178
+ [class*="pb_dropdown_option"] {
219
179
  margin: $space_xs;
220
180
  padding: $space_xs;
221
181
  border-radius: $border_radius_md;
@@ -233,44 +193,24 @@
233
193
  }
234
194
  }
235
195
 
236
- .pb_dropdown_option:last-child::after,
237
- .pb_dropdown_option_list:last-child::after,
238
- .pb_dropdown_option_selected:last-child::after,
239
- .pb_dropdown_option_focused:last-child::after,
240
- .pb_dropdown_option_list_focused:last-child::after,
241
- .pb_dropdown_option_selected_focused:last-child::after {
196
+ [class*="pb_dropdown_option"]:last-child::after {
242
197
  display: none;
243
198
  }
244
199
  }
245
200
  }
246
201
 
247
- &.pb_dropdown_subtle_separators_hidden {
202
+ &[class*="separators_hidden"] {
248
203
  .dropdown_wrapper {
249
204
  .pb_dropdown_container {
250
- .pb_dropdown_option:first-child,
251
- .pb_dropdown_option_list:first-child,
252
- .pb_dropdown_option_selected:first-child,
253
- .pb_dropdown_option_focused:first-child,
254
- .pb_dropdown_option_list_focused:first-child,
255
- .pb_dropdown_option_selected_focused:first-child {
205
+ [class*="pb_dropdown_option"]:first-child {
256
206
  margin-top: $space_xs;
257
207
  }
258
208
 
259
- .pb_dropdown_option:last-child,
260
- .pb_dropdown_option_list:last-child,
261
- .pb_dropdown_option_selected:last-child,
262
- .pb_dropdown_option_focused:last-child,
263
- .pb_dropdown_option_list_focused:last-child,
264
- .pb_dropdown_option_selected_focused:last-child {
209
+ [class*="pb_dropdown_option"]:last-child {
265
210
  margin-bottom: $space_xs;
266
211
  }
267
212
 
268
- .pb_dropdown_option,
269
- .pb_dropdown_option_list,
270
- .pb_dropdown_option_selected,
271
- .pb_dropdown_option_focused,
272
- .pb_dropdown_option_list_focused,
273
- .pb_dropdown_option_selected_focused {
213
+ [class*="pb_dropdown_option"] {
274
214
  padding: $space_xxs $space_xs;
275
215
  margin: $space_xxs $space_xs;
276
216
 
@@ -278,8 +218,7 @@
278
218
  height: 0px;
279
219
  }
280
220
 
281
- &.pb_dropdown_option_selected,
282
- &.pb_dropdown_option_selected_focused {
221
+ &[class*="selected"] {
283
222
  border-bottom: none;
284
223
  }
285
224
  }
@@ -290,10 +229,7 @@
290
229
 
291
230
  &.dark {
292
231
  .dropdown_wrapper {
293
- .dropdown_trigger_wrapper,
294
- .dropdown_trigger_wrapper_focus,
295
- .dropdown_trigger_wrapper_focus_select_only,
296
- .dropdown_trigger_wrapper_select_only {
232
+ [class*="dropdown_trigger_wrapper"] {
297
233
  @include pb_body_light_dark;
298
234
  background-color: rgba($white, 0.1) !important;
299
235
  background: none;
@@ -308,7 +244,7 @@
308
244
  [class^="pb_body"] {
309
245
  color: $white;
310
246
  }
311
- &.dropdown_trigger_wrapper_select_only {
247
+ &[class*="_select_only"] {
312
248
  box-shadow: inset 0 -11px 20px rgba($white, 0.05);
313
249
  }
314
250
  .dropdown_input {
@@ -318,10 +254,7 @@
318
254
  }
319
255
 
320
256
  &.error {
321
- .dropdown_trigger_wrapper,
322
- .dropdown_trigger_wrapper_focus,
323
- .dropdown_trigger_wrapper_focus_select_only,
324
- .dropdown_trigger_wrapper_select_only {
257
+ [class*="dropdown_trigger_wrapper"] {
325
258
  border-color: $error_dark;
326
259
  }
327
260
  }
@@ -335,28 +268,19 @@
335
268
  color: $white !important;
336
269
  }
337
270
 
338
- .pb_dropdown_option,
339
- .pb_dropdown_option_list,
340
- .pb_dropdown_option_selected,
341
- .pb_dropdown_option_focused,
342
- .pb_dropdown_option_list_focused,
343
- .pb_dropdown_option_selected_focused {
271
+ [class*="pb_dropdown_option"] {
344
272
  &:hover {
345
273
  background-color: $hover_dark;
346
274
  }
347
275
 
348
- &.pb_dropdown_option_focused,
349
- &.pb_dropdown_option_list_focused,
350
- &.pb_dropdown_option_selected_focused {
276
+ &[class*="_focused"] {
351
277
  background-color: $hover_dark;
352
278
  }
353
279
 
354
- &.pb_dropdown_option_list,
355
- &.pb_dropdown_option_list_focused {
280
+ &[class*="_list"] {
356
281
  border-color: rgba($white, 0.15);
357
282
  }
358
- &.pb_dropdown_option_selected,
359
- &.pb_dropdown_option_selected_focused {
283
+ &[class*="selected"] {
360
284
  background-color: $primary;
361
285
  border-bottom: rgba($white, 0.15);
362
286
  }
@@ -21,6 +21,15 @@
21
21
  ]
22
22
  %>
23
23
 
24
+ <%
25
+ example_typeahead_options = [
26
+ { label: 'Orange', value: '#FFA500' },
27
+ { label: 'Red', value: '#FF0000' },
28
+ { label: 'Green', value: '#00FF00' },
29
+ { label: 'Blue', value: '#0000FF' },
30
+ ]
31
+ %>
32
+
24
33
  <% treeData = [{
25
34
  label: "Power Home Remodeling",
26
35
  value: "Power Home Remodeling",
@@ -88,7 +97,9 @@
88
97
  }] %>
89
98
 
90
99
  <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
91
- <%= 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." } } %>
100
+ <%= 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." } } %>
101
+ <%= 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." } } %>
102
+ <%= 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 } %>
92
103
  <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
93
104
  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
94
105
  <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
@@ -53,6 +53,8 @@ type TypeaheadProps = {
53
53
  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",
54
54
  onChange?: any,
55
55
  optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
56
+ required?: boolean,
57
+ validation?: { message: string },
56
58
  searchContextSelector?: string,
57
59
  clearOnContextChange?: boolean,
58
60
  preserveSearchInput?: boolean,
@@ -94,12 +96,16 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
94
96
  onChange,
95
97
  optionsByContext = {},
96
98
  searchContextSelector,
99
+ required = false,
100
+ validation,
97
101
  clearOnContextChange = false,
98
102
  preserveSearchInput = false, // Default to false to maintain backward compatibility
99
103
  ...props
100
104
  }: TypeaheadProps) => {
101
105
  // State to manage the input value when preserveSearchInput is true
102
106
  const [inputValue, setInputValue] = useState("")
107
+ // State to track if form has been submitted to control validation display for react rendered rails kit
108
+ const [formSubmitted, setFormSubmitted] = useState(false)
103
109
 
104
110
  // If preserveSearchInput is true, we need to control the input value
105
111
  const handleInputChange = preserveSearchInput
@@ -135,6 +141,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
135
141
 
136
142
  const selectProps = {
137
143
  cacheOptions: true,
144
+ required,
138
145
  components: {
139
146
  Control,
140
147
  ClearIndicator,
@@ -170,6 +177,27 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
170
177
 
171
178
  const [contextValue, setContextValue] = useState("")
172
179
 
180
+ // Add listener for form validation to track when validation should be shown (needed for react rendered rails kit)
181
+ useEffect(() => {
182
+ const handleInvalid = (event: Event) => {
183
+ const target = event.target as HTMLInputElement
184
+ const typeaheadContainer = target.closest('[data-pb-react-component="Typeahead"]')
185
+
186
+ if (typeaheadContainer) {
187
+ // Check if this invalid event is specifically for our typeahead by comparing names so we do not have to require ids
188
+ const invalidInputName = target.name || target.getAttribute('name')
189
+ if (invalidInputName === name) {
190
+ setFormSubmitted(true)
191
+ }
192
+ }
193
+ }
194
+ document.addEventListener('invalid', handleInvalid, true)
195
+
196
+ return () => {
197
+ document.removeEventListener('invalid', handleInvalid, true)
198
+ }
199
+ }, [name])
200
+
173
201
  // Add listener for clearing
174
202
  useEffect(() => {
175
203
  const handleClear = () => {
@@ -230,6 +258,11 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
230
258
  }
231
259
  }
232
260
 
261
+ // Reset form submitted state when a selection is made (this is all for react rendered rails kit)
262
+ if (action === 'select-option') {
263
+ setFormSubmitted(false)
264
+ }
265
+
233
266
  // If a value is selected and we're preserving input on blur, clear the input
234
267
  if (action === 'select-option' && preserveSearchInput) {
235
268
  setInputValue('')
@@ -268,6 +301,11 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
268
301
 
269
302
  const inlineClass = selectProps.inline ? 'inline' : null
270
303
 
304
+ const shouldShowValidationError = required &&
305
+ formSubmitted
306
+
307
+ const errorDisplay = error || (shouldShowValidationError ? validation?.message || "Please fill out this field." : "")
308
+
271
309
  return (
272
310
  <div
273
311
  {...dataProps}
@@ -276,7 +314,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
276
314
  >
277
315
  <Tag
278
316
  classNamePrefix="typeahead-kit-select"
279
- error={error}
317
+ error={errorDisplay}
280
318
  isDisabled={disabled}
281
319
  onChange={handleOnChange}
282
320
  {...selectProps}
@@ -101,6 +101,8 @@ module Playbook
101
101
  plusIcon: plus_icon,
102
102
  truncate: truncate,
103
103
  wrapped: wrapped,
104
+ required: required,
105
+ validation: validation,
104
106
  searchContextSelector: search_context_selector,
105
107
  optionsByContext: options_by_context,
106
108
  clearOnContextChange: clear_on_context_change,
@@ -1 +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-D3MtsWXG.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};
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-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};