playbook_ui 15.0.0.pre.alpha.PLAY2467contactkitinternational10329 → 15.0.0.pre.alpha.PLAY2468phonenuminputvalidation10790

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.
Files changed (196) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +3 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +24 -11
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +7 -7
  5. data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +7 -2
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +67 -13
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +2 -2
  8. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +0 -1
  9. data/app/pb_kits/playbook/pb_card/_card.scss +12 -4
  10. data/app/pb_kits/playbook/pb_card/_card.tsx +3 -3
  11. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +10 -0
  12. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +3 -0
  13. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +8 -0
  14. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +2 -0
  15. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +1 -0
  16. data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +1 -0
  17. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +6 -4
  18. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +48 -4
  19. data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +5 -1
  20. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +6 -8
  21. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -1
  22. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -2
  23. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +9 -0
  24. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +3 -3
  25. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  26. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  27. data/app/pb_kits/playbook/pb_form/pb_form_validation.js +19 -4
  28. data/app/pb_kits/playbook/pb_icon/_icon.tsx +13 -2
  29. data/app/pb_kits/playbook/pb_icon/icon.rb +9 -1
  30. data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +1 -0
  31. data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +2 -1
  32. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +1 -1
  33. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +3 -1
  34. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb +5 -0
  35. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx +24 -0
  36. data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +2 -0
  37. data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +1 -0
  38. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -1
  39. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb +11 -0
  40. data/app/pb_kits/playbook/pb_nav/_item.tsx +19 -5
  41. data/app/pb_kits/playbook/pb_nav/_nav.scss +27 -0
  42. data/app/pb_kits/playbook/pb_nav/_nav.test.js +16 -0
  43. data/app/pb_kits/playbook/pb_nav/_nav.tsx +5 -0
  44. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.html.erb +6 -0
  45. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.jsx +39 -0
  46. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md +1 -0
  47. data/app/pb_kits/playbook/pb_nav/docs/example.yml +2 -0
  48. data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
  49. data/app/pb_kits/playbook/pb_nav/item.html.erb +6 -2
  50. data/app/pb_kits/playbook/pb_nav/nav.rb +6 -1
  51. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb +3 -3
  52. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb +3 -3
  53. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb +3 -3
  54. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb +3 -3
  55. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb +3 -3
  56. data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss +0 -0
  57. data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx +62 -0
  58. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb +35 -0
  59. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +49 -0
  60. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md +1 -0
  61. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md +2 -0
  62. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb +38 -0
  63. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +51 -0
  64. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb +46 -0
  65. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +62 -0
  66. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md +3 -0
  67. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb +47 -0
  68. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +60 -0
  69. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb +25 -0
  70. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +36 -0
  71. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +44 -0
  72. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +100 -0
  73. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +126 -0
  74. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb +32 -0
  75. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +48 -0
  76. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb +68 -0
  77. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +81 -0
  78. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb +31 -0
  79. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +42 -0
  80. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md +2 -0
  81. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb +35 -0
  82. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +51 -0
  83. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml +27 -0
  84. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js +11 -0
  85. data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts +106 -0
  86. data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb +1 -0
  87. data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb +28 -0
  88. data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx +31 -0
  89. data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss +3 -0
  90. data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +62 -0
  91. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +31 -0
  92. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +81 -0
  93. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +25 -0
  94. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +40 -0
  95. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +5 -0
  96. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +27 -0
  97. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +39 -0
  98. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +5 -0
  99. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +93 -0
  100. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +131 -0
  101. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +14 -0
  102. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +42 -0
  103. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +58 -0
  104. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +24 -0
  105. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +38 -0
  106. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +22 -0
  107. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +33 -0
  108. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +118 -0
  109. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +144 -0
  110. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +60 -0
  111. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +24 -0
  112. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +42 -0
  113. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +38 -0
  114. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +52 -0
  115. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +29 -0
  116. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +11 -0
  117. data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts +88 -0
  118. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb +1 -0
  119. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb +28 -0
  120. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +51 -0
  121. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +43 -2
  122. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +2 -2
  123. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +13 -5
  124. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb +23 -0
  125. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +45 -7
  126. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +4 -1
  127. data/app/pb_kits/playbook/pb_section_separator/section_separator.test.js +165 -0
  128. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +3 -0
  129. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb +41 -0
  130. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx +80 -0
  131. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md +1 -0
  132. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +3 -0
  133. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  134. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -3
  135. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +38 -0
  136. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +24 -8
  137. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +0 -10
  138. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +0 -9
  139. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md +1 -0
  140. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +3 -17
  141. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +0 -15
  142. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md +1 -0
  143. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +0 -2
  144. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +0 -2
  145. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md +5 -0
  146. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb +12 -0
  147. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx +25 -0
  148. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md +1 -0
  149. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb +4 -0
  150. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx +17 -0
  151. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md +1 -0
  152. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb +18 -0
  153. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx +44 -0
  154. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md +1 -0
  155. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +0 -14
  156. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +0 -14
  157. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md +1 -0
  158. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb +0 -4
  159. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +0 -4
  160. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +0 -1
  161. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md +5 -0
  162. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb +16 -0
  163. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx +30 -0
  164. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md +1 -0
  165. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb +16 -0
  166. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx +30 -0
  167. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md +1 -0
  168. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb +26 -0
  169. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx +41 -0
  170. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md +1 -0
  171. data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +18 -6
  172. data/app/pb_kits/playbook/pb_timestamp/docs/index.js +6 -0
  173. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +29 -7
  174. data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +69 -4
  175. data/dist/chunks/{_line_graph-CApw7aQD.js → _line_graph-CspDMr9b.js} +1 -1
  176. data/dist/chunks/_typeahead-B_wpgm_J.js +6 -0
  177. data/dist/chunks/_weekday_stacked-CXzARuTy.js +37 -0
  178. data/dist/chunks/componentRegistry-DzmmLR2x.js +1 -0
  179. data/dist/chunks/{lib-CY5ZPzic.js → lib-QZuu1ltS.js} +1 -1
  180. data/dist/chunks/pb_form_validation-W63gNcnu.js +1 -0
  181. data/dist/chunks/vendor.js +1 -1
  182. data/dist/menu.yml +15 -1
  183. data/dist/playbook-doc.js +2 -2
  184. data/dist/playbook-rails-react-bindings.js +1 -1
  185. data/dist/playbook-rails.js +1 -1
  186. data/dist/playbook.css +1 -1
  187. data/lib/playbook/engine.rb +0 -1
  188. data/lib/playbook/forms/builder/form_field_builder.rb +37 -2
  189. data/lib/playbook/kit_base.rb +23 -2
  190. data/lib/playbook/version.rb +1 -1
  191. metadata +110 -28
  192. data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +0 -65
  193. data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md +0 -1
  194. data/dist/chunks/_typeahead-J1_avqdO.js +0 -6
  195. data/dist/chunks/_weekday_stacked-BSRRJewP.js +0 -37
  196. data/dist/chunks/pb_form_validation-D3b0JKHH.js +0 -1
@@ -1,7 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  require "action_view/railtie"
4
- require "webpacker/react"
5
4
  require "view_component"
6
5
 
7
6
  module Playbook
@@ -4,23 +4,58 @@ module Playbook
4
4
  module Forms
5
5
  class Builder
6
6
  class FormFieldBuilder < Module
7
+ MASK_PATTERNS = {
8
+ "currency" => '^\$\d{1,3}(?:,\d{3})*(?:\.\d{2})?$',
9
+ "zip_code" => '\d{5}',
10
+ "postal_code" => '\d{5}-\d{4}',
11
+ "ssn" => '\d{3}-\d{2}-\d{4}',
12
+ "credit_card" => '\d{4} \d{4} \d{4} \d{4}',
13
+ "cvv" => '\d{3,4}',
14
+ }.freeze
15
+
7
16
  def initialize(method_name, kit_name:)
8
17
  define_method method_name do |name, props: {}, **options, &block|
9
- props[:label] = @template.label(@object_name, name) if props[:label] == true
18
+ props = props.dup
10
19
  options = Hash(options)
11
20
 
12
21
  options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
13
22
  options[:required] = true if props[:required]
14
23
  options[:placeholder] = props[:placeholder] || ""
24
+ options[:type] = props[:type] if props.key?(:type)
25
+ options[:value] = props[:value] if props.key?(:value)
26
+ options[:disabled] = true if props.key?(:disabled) && props[:disabled]
27
+ if props.key?(:disabled)
28
+ cursor_style = props[:disabled] ? "not-allowed" : "pointer"
29
+ existing_style = options[:style] || ""
30
+
31
+ options[:style] =
32
+ existing_style.empty? ? "cursor: #{cursor_style}" : "#{existing_style}; cursor: #{cursor_style}"
33
+ end
34
+ if props.key?(:autocomplete)
35
+ options[:autocomplete] = props[:autocomplete] == true ? nil : (props[:autocomplete].presence || "off")
36
+ end
37
+ if props.key?(:mask) && props[:mask].present?
38
+ options[:mask] = props[:mask]
39
+ options[:data] = (options[:data] || {}).merge(pb_input_mask: true)
40
+ options[:pattern] = MASK_PATTERNS[props[:mask]]
41
+ end
15
42
 
16
43
  if props.key?(:validation)
17
44
  validation = props[:validation]
18
45
  options[:pattern] = validation[:pattern] if validation[:pattern].present?
19
- options[:data] = { message: validation[:message] } if validation[:message].present?
46
+ options[:data] = (options[:data] || {}).merge(message: validation[:message]) if validation[:message].present?
20
47
  end
21
48
 
22
49
  input = super(name, **options, &block)
23
50
 
51
+ input_id = input[/\bid="([^"]+)"/, 1] || "#{@object_name}_#{name}"
52
+
53
+ if props[:label] == true
54
+ props[:label] = @template.label(@object_name, name)
55
+ elsif props[:label].is_a?(String)
56
+ props[:label] = @template.label_tag(input_id, props[:label])
57
+ end
58
+
24
59
  @template.pb_rails(kit_name, props: props) do
25
60
  input
26
61
  end
@@ -122,7 +122,7 @@ module Playbook
122
122
  html_options.each do |key, value|
123
123
  if key == :style && value.is_a?(Hash)
124
124
  # Convert style hash to CSS string
125
- merged[:style] = value.map { |k, v| "#{k.to_s.gsub('_', '-')}: #{v}" }.join("; ")
125
+ merged[:style] = value.map { |k, v| "#{k.to_s.tr('_', '-')}: #{v}" }.join("; ")
126
126
  else
127
127
  merged[key] = value
128
128
  end
@@ -136,6 +136,27 @@ module Playbook
136
136
  merged.deep_merge(data_attributes)
137
137
  end
138
138
 
139
+ # Custom react_component helper to replace Webpacker React
140
+ # This will render a div with data attributes for the component name and props
141
+ # The mounting script will look for these divs and mount the appropriate React components
142
+ # Sister def in app/helpers/react_helper in playbook-website. Any changes here should be reflected there.
143
+ def react_component(component_name, props = {}, html_options = {})
144
+ # Convert props to JSON for the data attribute
145
+ props_json = props.to_json
146
+
147
+ # Build the HTML attributes
148
+ html_attrs = {
149
+ "data-pb-react-component" => component_name,
150
+ "data-pb-react-props" => props_json,
151
+ }
152
+
153
+ # Merge with any additional HTML options
154
+ html_attrs.merge!(html_options)
155
+
156
+ # Return the div element
157
+ content_tag(:div, "", html_attrs)
158
+ end
159
+
139
160
  def global_inline_props
140
161
  {
141
162
  height: height,
@@ -172,7 +193,7 @@ module Playbook
172
193
  end
173
194
 
174
195
  def dynamic_inline_props
175
- styles = global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value}" if inline_validator(key, value) }.compact
196
+ styles = global_inline_props.map { |key, value| "#{key.to_s.tr('_', '-')}: #{value}" if inline_validator(key, value) }.compact
176
197
  styles.join("; ").presence
177
198
  end
178
199
 
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "15.0.0"
5
- VERSION = "15.0.0.pre.alpha.PLAY2467contactkitinternational10329"
5
+ VERSION = "15.0.0.pre.alpha.PLAY2468phonenuminputvalidation10790"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 15.0.0.pre.alpha.PLAY2467contactkitinternational10329
4
+ version: 15.0.0.pre.alpha.PLAY2468phonenuminputvalidation10790
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2025-09-09 00:00:00.000000000 Z
12
+ date: 2025-09-26 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -53,20 +53,6 @@ dependencies:
53
53
  - - ">="
54
54
  - !ruby/object:Gem::Version
55
55
  version: 5.2.4.5
56
- - !ruby/object:Gem::Dependency
57
- name: react-rails
58
- requirement: !ruby/object:Gem::Requirement
59
- requirements:
60
- - - '='
61
- - !ruby/object:Gem::Version
62
- version: 2.6.1
63
- type: :runtime
64
- prerelease: false
65
- version_requirements: !ruby/object:Gem::Requirement
66
- requirements:
67
- - - '='
68
- - !ruby/object:Gem::Version
69
- version: 2.6.1
70
56
  - !ruby/object:Gem::Dependency
71
57
  name: view_component
72
58
  requirement: !ruby/object:Gem::Requirement
@@ -82,19 +68,19 @@ dependencies:
82
68
  - !ruby/object:Gem::Version
83
69
  version: 2.83.0
84
70
  - !ruby/object:Gem::Dependency
85
- name: webpacker-react
71
+ name: vite_rails
86
72
  requirement: !ruby/object:Gem::Requirement
87
73
  requirements:
88
- - - "~>"
74
+ - - ">="
89
75
  - !ruby/object:Gem::Version
90
- version: 0.3.2
76
+ version: '0'
91
77
  type: :runtime
92
78
  prerelease: false
93
79
  version_requirements: !ruby/object:Gem::Requirement
94
80
  requirements:
95
- - - "~>"
81
+ - - ">="
96
82
  - !ruby/object:Gem::Version
97
- version: 0.3.2
83
+ version: '0'
98
84
  - !ruby/object:Gem::Dependency
99
85
  name: brakeman
100
86
  requirement: !ruby/object:Gem::Requirement
@@ -1221,7 +1207,6 @@ files:
1221
1207
  - app/pb_kits/playbook/pb_dialog/dialog.html.erb
1222
1208
  - app/pb_kits/playbook/pb_dialog/dialog.rb
1223
1209
  - app/pb_kits/playbook/pb_dialog/dialog.test.jsx
1224
- - app/pb_kits/playbook/pb_dialog/dialogHelper.js
1225
1210
  - app/pb_kits/playbook/pb_dialog/dialog_body.html.erb
1226
1211
  - app/pb_kits/playbook/pb_dialog/dialog_body.rb
1227
1212
  - app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb
@@ -2092,6 +2077,8 @@ files:
2092
2077
  - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx
2093
2078
  - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_default.html.erb
2094
2079
  - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_default.jsx
2080
+ - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb
2081
+ - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx
2095
2082
  - app/pb_kits/playbook/pb_loading_inline/docs/example.yml
2096
2083
  - app/pb_kits/playbook/pb_loading_inline/docs/index.js
2097
2084
  - app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb
@@ -2277,6 +2264,9 @@ files:
2277
2264
  - app/pb_kits/playbook/pb_nav/docs/_description.md
2278
2265
  - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.html.erb
2279
2266
  - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.jsx
2267
+ - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.html.erb
2268
+ - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.jsx
2269
+ - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md
2280
2270
  - app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_bold_swift.md
2281
2271
  - app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_default_swift.md
2282
2272
  - app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_no_highlight_swift.md
@@ -2415,6 +2405,71 @@ files:
2415
2405
  - app/pb_kits/playbook/pb_passphrase/passphrase.html.erb
2416
2406
  - app/pb_kits/playbook/pb_passphrase/passphrase.rb
2417
2407
  - app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx
2408
+ - app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss
2409
+ - app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx
2410
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb
2411
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx
2412
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md
2413
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md
2414
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb
2415
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx
2416
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb
2417
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx
2418
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md
2419
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb
2420
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx
2421
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb
2422
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx
2423
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx
2424
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb
2425
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx
2426
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb
2427
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx
2428
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb
2429
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx
2430
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb
2431
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx
2432
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md
2433
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb
2434
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx
2435
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml
2436
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js
2437
+ - app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts
2438
+ - app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb
2439
+ - app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb
2440
+ - app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx
2441
+ - app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss
2442
+ - app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx
2443
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb
2444
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx
2445
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb
2446
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx
2447
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md
2448
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb
2449
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx
2450
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md
2451
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb
2452
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx
2453
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md
2454
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb
2455
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx
2456
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb
2457
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx
2458
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb
2459
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx
2460
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb
2461
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx
2462
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx
2463
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb
2464
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx
2465
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb
2466
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx
2467
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml
2468
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js
2469
+ - app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts
2470
+ - app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb
2471
+ - app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb
2472
+ - app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx
2418
2473
  - app/pb_kits/playbook/pb_person/_person.scss
2419
2474
  - app/pb_kits/playbook/pb_person/_person.tsx
2420
2475
  - app/pb_kits/playbook/pb_person/docs/_description.md
@@ -2705,6 +2760,7 @@ files:
2705
2760
  - app/pb_kits/playbook/pb_section_separator/docs/index.js
2706
2761
  - app/pb_kits/playbook/pb_section_separator/section_separator.html.erb
2707
2762
  - app/pb_kits/playbook/pb_section_separator/section_separator.rb
2763
+ - app/pb_kits/playbook/pb_section_separator/section_separator.test.js
2708
2764
  - app/pb_kits/playbook/pb_select/_select.scss
2709
2765
  - app/pb_kits/playbook/pb_select/_select.tsx
2710
2766
  - app/pb_kits/playbook/pb_select/docs/_description.md
@@ -3112,6 +3168,9 @@ files:
3112
3168
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.html.erb
3113
3169
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx
3114
3170
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md
3171
+ - app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb
3172
+ - app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx
3173
+ - app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md
3115
3174
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.html.erb
3116
3175
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx
3117
3176
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb
@@ -3249,25 +3308,47 @@ files:
3249
3308
  - app/pb_kits/playbook/pb_timestamp/_timestamp.tsx
3250
3309
  - app/pb_kits/playbook/pb_timestamp/docs/_description.md
3251
3310
  - app/pb_kits/playbook/pb_timestamp/docs/_footer.md
3252
- - app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md
3253
3311
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb
3254
3312
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx
3313
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md
3255
3314
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align_swift.md
3256
3315
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb
3257
3316
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx
3317
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md
3258
3318
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default_swift.md
3259
3319
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb
3260
3320
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx
3321
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md
3261
3322
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_swift.md
3262
3323
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_props_swift.md
3324
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb
3325
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx
3326
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md
3327
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb
3328
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx
3329
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md
3330
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb
3331
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx
3332
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md
3263
3333
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb
3264
3334
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx
3335
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md
3265
3336
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_swift.md
3266
3337
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb
3267
3338
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx
3268
3339
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.md
3269
3340
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb
3270
3341
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx
3342
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md
3343
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb
3344
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx
3345
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md
3346
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb
3347
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx
3348
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md
3349
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb
3350
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx
3351
+ - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md
3271
3352
  - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_swift.md
3272
3353
  - app/pb_kits/playbook/pb_timestamp/docs/example.yml
3273
3354
  - app/pb_kits/playbook/pb_timestamp/docs/index.js
@@ -3621,12 +3702,13 @@ files:
3621
3702
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3622
3703
  - app/pb_kits/playbook/utilities/text.ts
3623
3704
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3624
- - dist/chunks/_line_graph-CApw7aQD.js
3625
- - dist/chunks/_typeahead-J1_avqdO.js
3626
- - dist/chunks/_weekday_stacked-BSRRJewP.js
3705
+ - dist/chunks/_line_graph-CspDMr9b.js
3706
+ - dist/chunks/_typeahead-B_wpgm_J.js
3707
+ - dist/chunks/_weekday_stacked-CXzARuTy.js
3708
+ - dist/chunks/componentRegistry-DzmmLR2x.js
3627
3709
  - dist/chunks/lazysizes-B7xYodB-.js
3628
- - dist/chunks/lib-CY5ZPzic.js
3629
- - dist/chunks/pb_form_validation-D3b0JKHH.js
3710
+ - dist/chunks/lib-QZuu1ltS.js
3711
+ - dist/chunks/pb_form_validation-W63gNcnu.js
3630
3712
  - dist/chunks/vendor.js
3631
3713
  - dist/menu.yml
3632
3714
  - dist/playbook-doc.js
@@ -1,65 +0,0 @@
1
- // Three places in Nitro depend on this function inside the window scope.
2
- // We will keep this file until we remove this dependency from Nitro.
3
- const dialogHelper = () => {
4
- const openTrigger = document.querySelectorAll("[data-open-dialog]");
5
- const closeTrigger = document.querySelectorAll("[data-close-dialog]");
6
- const dialogs = document.querySelectorAll(".pb_dialog_rails")
7
-
8
- const loadingButton = document.querySelector('[data-disable-with="Loading"]');
9
- if (loadingButton) {
10
- loadingButton.addEventListener("click", function() {
11
- const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
12
- const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
13
- let currentClass = okayLoadingButton.className;
14
- let cancelClass = cancelButton ? cancelButton.className : "";
15
-
16
- let newClass = currentClass.replace("_enabled", "_disabled_loading");
17
- let newCancelClass = cancelClass.replace("_enabled", "_disabled");
18
-
19
- // Disable the buttons
20
- okayLoadingButton.disabled = true;
21
- if (cancelButton) cancelButton.disabled = true;
22
-
23
- okayLoadingButton.className = newClass;
24
- if (cancelButton) cancelButton.className = newCancelClass;
25
- });
26
- }
27
-
28
-
29
- openTrigger.forEach((open) => {
30
- open.addEventListener("click", () => {
31
- var openTriggerData = open.dataset.openDialog;
32
- var targetDialog = document.getElementById(openTriggerData)
33
- if (targetDialog.open) return;
34
- targetDialog.showModal();
35
- });
36
- });
37
-
38
- closeTrigger.forEach((close) => {
39
- close.addEventListener("click", () => {
40
- var closeTriggerData = close.dataset.closeDialog;
41
- document.getElementById(closeTriggerData).close();
42
- });
43
- });
44
-
45
- // Close dialog box on outside click
46
- dialogs.forEach((dialogElement) => {
47
- dialogElement.addEventListener("mousedown", (event) => {
48
- const dialogParentDataset = dialogElement.parentElement.dataset
49
- if (dialogParentDataset.overlayClick === "overlay_close") return
50
-
51
- const dialogModal = event.target.getBoundingClientRect()
52
- const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
53
- event.clientX > dialogModal.right ||
54
- event.clientY < dialogModal.top ||
55
- event.clientY > dialogModal.bottom
56
-
57
- if (clickedOutsideDialogModal) {
58
- dialogElement.close()
59
- event.stopPropagation()
60
- }
61
- })
62
- })
63
- };
64
-
65
- export default dialogHelper;
@@ -1 +0,0 @@
1
- Use these only to display status updates in areas that has a lot of data.