playbook_ui 14.11.0.pre.rc.13 → 14.11.0.pre.rc.14

Sign up to get free protection for your applications and to get access to all the features.
Files changed (12) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb +1 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/index.js +53 -8
  6. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +23 -18
  7. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +6 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +2 -2
  9. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb +6 -4
  10. data/dist/playbook-rails.js +1 -1
  11. data/lib/playbook/version.rb +1 -1
  12. metadata +1 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f5b8a79e13905a638e00e7e637fb2cc2da77e98b4bda29af055f20d1fa9483df
4
- data.tar.gz: 7d0f148d0f4627769b6a67aaa95f31b268f206d51db1e7ac900c4979aa762d21
3
+ metadata.gz: 392b890c5210bbfd4bd949f30717b1eb5d3cb6072108595ee8a28d1caf868435
4
+ data.tar.gz: d768258037273fb3be827c7668d71757dc6984473784f5b1719c7bc5331ef8af
5
5
  SHA512:
6
- metadata.gz: f7123cfe2c9b63377ba38ad537b620f2b189100e3e01405fb3e81610faacbcc941c68984a2194be8a3cbfcd9d8eb5eea49c342d733ab3775a6c589677714dfa1
7
- data.tar.gz: e1d359fa7bcd818b1839e14524d5faaf6615e3e1331d50c505794e665ded1af802ea389835c27852e3cc9b71554767ddf0bd2854ca735231f53d9b1502eae52b
6
+ metadata.gz: 856857b42f0f319dfae33ab64e91594c80e035bad901b783880d9056fda116d3280372486399480f882d1b3095a3a0cf31e0fd78b20f7b81693f2b406b42bf8c
7
+ data.tar.gz: 6c78b48c806fba97842d34dc9cc766838748ead66ab63aaded3282daddb775fe4721859b2c58907a8fe6ee8b4fffe0ab1edfc737f786c7c39cb3eb8edb91c3f4
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb CHANGED
@@ -36,5 +36,5 @@
36
36
 
37
37
  <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
38
38
  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
39
- <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
39
+ <%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
40
40
  <% end %>
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md CHANGED
@@ -1,3 +1,3 @@
1
1
  `subrow_headers` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
2
2
 
3
- `enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.
3
+ `enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle expansion button will appear in the table header as well as in the subRow headers. If set to "header", the button will only appear in header and NOT in subRow headers. This prop is set to "header" by default.
data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml CHANGED
@@ -1,7 +1,7 @@
1
1
  examples:
2
2
  rails:
3
3
  - advanced_table_beta: Default (Required Props)
4
- # - advanced_table_beta_subrow_headers: SubRow Headers
4
+ - advanced_table_beta_subrow_headers: SubRow Headers
5
5
  - advanced_table_collapsible_trail_rails: Collapsible Trail
6
6
  - advanced_table_beta_sort: Enable Sorting
7
7
  - advanced_table_custom_cell_rails: Custom Components for Cells
data/app/pb_kits/playbook/pb_advanced_table/index.js CHANGED
@@ -65,8 +65,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
65
65
  if (!dataContent) {
66
66
  return;
67
67
  }
68
-
69
- // Split the dataContent to get all ancestor IDs, check against simpleExpandedRows
68
+ // Split the dataContent to get all ancestor IDs, check against ExpandedRows
70
69
  const ancestorIds = dataContent.split("-").slice(0, -1);
71
70
 
72
71
  const prefixedAncestorIds = ancestorIds.map(
@@ -76,7 +75,22 @@ export default class PbAdvancedTable extends PbEnhancedElement {
76
75
  PbAdvancedTable.expandedRows.has(id)
77
76
  );
78
77
 
79
- if (allAncestorsExpanded) {
78
+ const checkIfParentIsExpanded = () => {
79
+ if (dataContent.endsWith("sr")) {
80
+ const parentRowId = childRow.dataset.rowParent;
81
+ const isParentVisible =
82
+ childRow.previousElementSibling.classList.contains("is-visible");
83
+ if (parentRowId) {
84
+ const isInSet = PbAdvancedTable.expandedRows.has(parentRowId);
85
+ if (isInSet && isParentVisible) {
86
+ return true;
87
+ }
88
+ }
89
+ }
90
+ return false;
91
+ };
92
+
93
+ if (allAncestorsExpanded || checkIfParentIsExpanded()) {
80
94
  childRow.style.display = "table-row";
81
95
  childRow.classList.add("is-visible");
82
96
  } else {
@@ -143,7 +157,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
143
157
  static handleToggleAllHeaders(element) {
144
158
  const table = element.closest(".pb_table");
145
159
  const firstLevelButtons = table.querySelectorAll(
146
- ".pb_advanced_table_body > .pb_table_tr [data-advanced-table]"
160
+ ".pb_advanced_table_body > .pb_table_tr[data-row-depth='0'] [data-advanced-table]"
147
161
  );
148
162
 
149
163
  const allExpanded = Array.from(firstLevelButtons).every(
@@ -175,12 +189,43 @@ export default class PbAdvancedTable extends PbEnhancedElement {
175
189
  }
176
190
  }
177
191
 
178
- // static handleToggleAllSubRows(element, rowDepth) {}
192
+ static handleToggleAllSubRows(element, rowDepth) {
193
+ const table = element.closest(".pb_table");
194
+ const parentRow = element.closest("tr");
195
+ if (!parentRow) {
196
+ return;
197
+ }
198
+ const rowParentId = parentRow.dataset.rowParent;
199
+ // Select all buttons that for subrows at that depth and with same rowParent
200
+ const subRowButtons = table.querySelectorAll(
201
+ `.pb_advanced_table_body > .pb_table_tr[data-row-depth='${rowDepth}'].pb_table_tr[data-row-parent='${rowParentId}'] [data-advanced-table]`
202
+ );
203
+
204
+ const allExpanded = Array.from(subRowButtons).every(
205
+ (button) =>
206
+ button.querySelector(UP_ARROW_SELECTOR).style.display === "inline-block"
207
+ );
208
+
209
+ if (allExpanded) {
210
+ subRowButtons.forEach((button) => {
211
+ button.click();
212
+ PbAdvancedTable.expandedRows.delete(button.id);
213
+ });
214
+ } else {
215
+ subRowButtons.forEach((button) => {
216
+ if (!PbAdvancedTable.expandedRows.has(button.id)) {
217
+ button.click();
218
+ PbAdvancedTable.expandedRows.add(button.id);
219
+ }
220
+ });
221
+ }
222
+ }
179
223
  }
180
224
 
181
225
  window.expandAllRows = (element) => {
182
226
  PbAdvancedTable.handleToggleAllHeaders(element);
183
227
  };
184
- // window.expandAllSubRows = (element, rowDepth) => {
185
- // PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
186
- // };
228
+
229
+ window.expandAllSubRows = (element, rowDepth) => {
230
+ PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
231
+ };
data/app/pb_kits/playbook/pb_advanced_table/table_body.rb CHANGED
@@ -31,7 +31,7 @@ module Playbook
31
31
  end.compact
32
32
  end
33
33
 
34
- def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil)
34
+ def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil, additional_classes: "", table_data_attributes: {})
35
35
  top_parent_id ||= row.object_id
36
36
  new_ancestor_ids = ancestor_ids + [row.object_id]
37
37
  leaf_columns = flatten_columns(column_definitions)
@@ -39,30 +39,35 @@ module Playbook
39
39
  output = ActiveSupport::SafeBuffer.new
40
40
  is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present?
41
41
 
42
- output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
42
+ subrow_ancestor_ids = ancestor_ids + ["#{row.object_id}sr"]
43
+ subrow_data_attributes = {
44
+ advanced_table_content: subrow_ancestor_ids.join("-"),
45
+ row_depth: current_depth,
46
+ row_parent: "#{id}_#{ancestor_ids.last}",
47
+ }
48
+ # Subrow header if applicable
49
+ output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
43
50
 
44
- # Pass only leaf_columns to table_row to account for multiple nested columns
45
- output << pb_rails("advanced_table/table_row", props: {
46
- id: id,
47
- row: row,
48
- column_definitions: leaf_columns,
49
- depth: current_depth,
50
- collapsible_trail: collapsible_trail,
51
- })
51
+ current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
52
+
53
+ # Additional class and data attributes needed for toggle logic
54
+ output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes })
52
55
 
53
56
  if row[:children].present?
54
- output << row[:children].map do |child_row|
57
+ row[:children].each do |child_row|
55
58
  is_first_child = row[:children].first == child_row
56
-
57
- child_output = render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id)
58
-
59
59
  immediate_parent_id = row.object_id
60
- top_parent = top_parent_id
61
- # Combine ancestor_ids to build the content id
62
60
  data_content = new_ancestor_ids.join("-") + "-#{child_row.object_id}"
63
61
 
64
- child_output.to_str.sub("<tr", %(<tr class="toggle-content" data-top-parent="#{id}_#{top_parent}" data-row-depth="#{current_depth}" data-row-parent="#{id}_#{immediate_parent_id}" data-advanced-table-content="#{data_content}"))
65
- end.join.html_safe
62
+ child_data_attributes = {
63
+ top_parent: "#{id}_#{top_parent_id}",
64
+ row_depth: current_depth + 1,
65
+ row_parent: "#{id}_#{immediate_parent_id}",
66
+ advanced_table_content: data_content,
67
+ }
68
+
69
+ output << render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id, additional_classes: "toggle-content", table_data_attributes: child_data_attributes)
70
+ end
66
71
  end
67
72
 
68
73
  output
data/app/pb_kits/playbook/pb_advanced_table/table_row.rb CHANGED
@@ -11,6 +11,12 @@ module Playbook
11
11
  prop :depth
12
12
  prop :collapsible_trail, type: Playbook::Props::Boolean,
13
13
  default: true
14
+ prop :table_data_attributes, type: Playbook::Props::HashProp,
15
+ default: {}
16
+
17
+ def data
18
+ Hash(prop(:data)).merge(table_data_attributes)
19
+ end
14
20
 
15
21
  def classname
16
22
  generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb CHANGED
@@ -1,6 +1,6 @@
1
- <%= pb_content_tag(:div) do %>
1
+ <%= pb_content_tag(:tr) do %>
2
2
  <% object.column_definitions.each_with_index do |column, index| %>
3
- <%= pb_rails("table/table_cell", props: { classname: object.td_classname}) do %>
3
+ <%= pb_rails("table/table_cell", props: { classname: "id-cell chrome-styles"}) do %>
4
4
  <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>
5
5
  <% if collapsible_trail && index.zero? %>
6
6
  <% (1..depth).each do |i| %>
data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb CHANGED
@@ -14,13 +14,15 @@ module Playbook
14
14
  default: ""
15
15
  prop :collapsible_trail, type: Playbook::Props::Boolean,
16
16
  default: true
17
+ prop :subrow_data_attributes, type: Playbook::Props::HashProp,
18
+ default: {}
17
19
 
18
- def classname
19
- generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
20
+ def data
21
+ Hash(prop(:data)).merge(subrow_data_attributes)
20
22
  end
21
23
 
22
- def td_classname
23
- generate_classname("id-cell", "chrome-styles", separator: " ")
24
+ def classname
25
+ generate_classname("pb_table_tr", "bg-silver", "pb_subrow_header", subrow_depth_classname, separator: " ")
24
26
  end
25
27
 
26
28
  private
data/dist/playbook-rails.js CHANGED
@@ -1 +1 @@
1
- var __defProp=Object.defineProperty;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:true,configurable:true,writable:true,value:value}):obj[key]=value;var __publicField=(obj,key,value)=>__defNormalProp(obj,typeof key!=="symbol"?key+"":key,value);import"./chunks/pb_form_validation-C5Cc0-1v.js";import{P as PbEnhancedElement,f as formHelper,a as datePickerHelper,b as dialogHelper,c as PbPopover,e as PbTooltip,g as PbTypeahead,h as PbTable,i as PbTextarea}from"./chunks/lib-B7sgJtGS.js";import"./chunks/lazysizes-B7xYodB-.js";import"./playbook-rails-react-bindings.js";import"react";import"react/jsx-runtime";import"webpacker-react";import"./chunks/_typeahead-DPsPSYxe.js";import"react-dom";import"react-trix";import"trix";import"react-is";const MAIN_SELECTOR="[data-collapsible-main]";const CONTENT_SELECTOR="[data-collapsible-content]";const DOWN_ARROW_SELECTOR$2="#collapsible_open_icon";const UP_ARROW_SELECTOR$2="#collapsible_close_icon";class PbCollapsible extends PbEnhancedElement{static get selector(){return MAIN_SELECTOR}connect(){this.element.addEventListener("click",(()=>{this.toggleElement(this.target)}));if(this.target.classList.contains("is-visible")){this.displayUpArrow()}else{this.displayDownArrow()}document.addEventListener(`${this.target.id}`,(()=>{this.toggleElement(this.target)}))}get target(){return this.element.parentNode.querySelector(CONTENT_SELECTOR)}showElement(elem){const getHeight=()=>{elem.style.display="block";const height2=elem.scrollHeight+"px";elem.style.display="";return height2};const height=getHeight();elem.classList.add("is-visible");elem.style.height=height;elem.style.overflow="hidden";window.setTimeout((()=>{elem.style.height="";elem.style.overflow="visible"}),300)}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.style.height="0";elem.style.paddingTop="0";elem.style.paddingBottom="0";elem.style.overflow="hidden"}),1);window.setTimeout((()=>{elem.classList.remove("is-visible");elem.style.overflow=""}),300)}toggleElement(elem){if(elem.classList.contains("is-visible")){this.hideElement(elem);this.displayDownArrow();return}this.showElement(elem);this.displayUpArrow()}toggleArrows(showDownArrow){const downArrow=this.element.querySelector(DOWN_ARROW_SELECTOR$2);const upArrow=this.element.querySelector(UP_ARROW_SELECTOR$2);if(downArrow){downArrow.style.display=showDownArrow?"inline-block":"none"}if(upArrow){upArrow.style.display=showDownArrow?"none":"inline-block"}}displayDownArrow(){this.toggleArrows(true)}displayUpArrow(){this.toggleArrows(false)}}class PbFixedConfirmationToast extends PbEnhancedElement{static get selector(){return".remove_toast"}connect(){this.self=this.element;this.autoCloseToast(this.self);this.self.addEventListener("click",(()=>{this.removeToast(this.self)}))}removeToast(elem){elem.parentNode.removeChild(elem)}autoCloseToast(element){const classListValues=element.classList.value;const hasAutoCloseClass=classListValues.includes("auto_close");if(hasAutoCloseClass){const classList=classListValues.split(" ");const autoCloseValue=classList[classList.length-1].split("_")[2];const autoCloseIntValue=parseInt(autoCloseValue);setTimeout((()=>{this.removeToast(element)}),autoCloseIntValue)}}}const OPTION_SELECTOR$1="[data-dropdown-option-label]";class PbDropdownKeyboard{constructor(dropdown){this.dropdown=dropdown;this.dropdownElement=dropdown.element;this.options=Array.from(this.dropdownElement.querySelectorAll(OPTION_SELECTOR$1));this.focusedOptionIndex=-1;this.init()}init(){this.dropdownElement.addEventListener("keydown",this.handleKeyDown.bind(this))}handleKeyDown(event){switch(event.key){case"ArrowDown":event.preventDefault();if(!this.dropdown.target.classList.contains("open")){this.dropdown.showElement(this.dropdown.target);this.dropdown.updateArrowDisplay(true)}this.moveFocus(1);break;case"ArrowUp":event.preventDefault();this.moveFocus(-1);break;case"Enter":event.preventDefault();if(this.focusedOptionIndex!==-1){this.selectOption()}else{if(!this.dropdown.target.classList.contains("open")){this.dropdown.showElement(this.dropdown.target);this.dropdown.updateArrowDisplay(true)}}break;case"Escape":this.dropdown.hideElement(this.dropdown.target);break;case"Tab":this.dropdown.hideElement(this.dropdown.target);this.dropdown.updateArrowDisplay(false);this.resetFocus();break}}moveFocus(direction){if(this.focusedOptionIndex!==-1){this.options[this.focusedOptionIndex].classList.remove("pb_dropdown_option_focused")}this.focusedOptionIndex=(this.focusedOptionIndex+direction+this.options.length)%this.options.length;this.options[this.focusedOptionIndex].classList.add("pb_dropdown_option_focused")}selectOption(){const option=this.options[this.focusedOptionIndex];this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel,option);this.dropdown.hideElement(this.dropdown.target)}}const DROPDOWN_SELECTOR="[data-pb-dropdown]";const TRIGGER_SELECTOR="[data-dropdown-trigger]";const CONTAINER_SELECTOR="[data-dropdown-container]";const DOWN_ARROW_SELECTOR$1="#dropdown_open_icon";const UP_ARROW_SELECTOR$1="#dropdown_close_icon";const OPTION_SELECTOR="[data-dropdown-option-label]";const CUSTOM_DISPLAY_SELECTOR="[data-dropdown-custom-trigger]";const DROPDOWN_TRIGGER_DISPLAY="#dropdown_trigger_display";const DROPDOWN_PLACEHOLDER="[data-dropdown-placeholder]";const DROPDOWN_INPUT="#dropdown-selected-option";class PbDropdown extends PbEnhancedElement{static get selector(){return DROPDOWN_SELECTOR}get target(){return this.element.parentNode.querySelector(CONTAINER_SELECTOR)}connect(){this.keyboardHandler=new PbDropdownKeyboard(this);this.setDefaultValue();this.bindEventListeners();this.updateArrowDisplay(false);this.handleFormValidation();this.handleFormReset()}bindEventListeners(){const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR)||this.element;customTrigger.addEventListener("click",(()=>this.toggleElement(this.target)));this.target.addEventListener("click",this.handleOptionClick.bind(this));document.addEventListener("click",this.handleDocumentClick.bind(this),true)}handleOptionClick(event){const option=event.target.closest(OPTION_SELECTOR);const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);if(option){const value=option.dataset.dropdownOptionLabel;hiddenInput.value=JSON.parse(value).id;this.clearFormValidation(hiddenInput);this.onOptionSelected(value,option)}}handleDocumentClick(event){if(this.isClickOutside(event)&&this.target.classList.contains("open")){this.hideElement(this.target);this.updateArrowDisplay(false)}}isClickOutside(event){const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);if(customTrigger){return!customTrigger.contains(event.target)}else{const triggerElement=this.element.querySelector(TRIGGER_SELECTOR);const containerElement=this.element.parentNode.querySelector(CONTAINER_SELECTOR);const isOutsideTrigger=triggerElement?!triggerElement.contains(event.target):true;const isOutsideContainer=containerElement?!containerElement.contains(event.target):true;return isOutsideTrigger&&isOutsideContainer}}onOptionSelected(value,selectedOption){const triggerElement=this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);const customDisplayElement=this.element.querySelector("#dropdown_trigger_custom_display");if(triggerElement){const selectedLabel=JSON.parse(value).label;triggerElement.textContent=selectedLabel;if(customDisplayElement){customDisplayElement.style.display="block";customDisplayElement.style.paddingRight="8px"}}const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);if(customTrigger){if(this.target.classList.contains("open")){this.hideElement(this.target);this.updateArrowDisplay(false)}}const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{option.classList.remove("pb_dropdown_option_selected")}));selectedOption.classList.add("pb_dropdown_option_selected")}showElement(elem){elem.classList.remove("close");elem.classList.add("open");elem.style.height=elem.scrollHeight+"px"}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.classList.add("close");elem.classList.remove("open");this.resetFocus()}),0)}resetFocus(){if(this.keyboardHandler){this.keyboardHandler.focusedOptionIndex=-1;const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>option.classList.remove("pb_dropdown_option_focused")))}}toggleElement(elem){if(elem.classList.contains("open")){this.hideElement(elem);this.updateArrowDisplay(false);return}this.showElement(elem);this.updateArrowDisplay(true)}updateArrowDisplay(isOpen){const downArrow=this.element.querySelector(DOWN_ARROW_SELECTOR$1);const upArrow=this.element.querySelector(UP_ARROW_SELECTOR$1);if(downArrow&&upArrow){downArrow.style.display=isOpen?"none":"inline-block";upArrow.style.display=isOpen?"inline-block":"none"}}handleFormValidation(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);hiddenInput.addEventListener("invalid",(function(event){if(hiddenInput.hasAttribute("required")&&hiddenInput.value===""){event.preventDefault();hiddenInput.closest(".dropdown_wrapper").classList.add("error")}}),true)}clearFormValidation(input){if(input.checkValidity()){const dropdownWrapperElement=input.closest(".dropdown_wrapper");dropdownWrapperElement.classList.remove("error");const errorLabelElement=dropdownWrapperElement.querySelector(".pb_body_kit_negative");if(errorLabelElement){errorLabelElement.remove()}}}setDefaultValue(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);const options=this.element.querySelectorAll(OPTION_SELECTOR);const defaultValue=hiddenInput.dataset.defaultValue||"";hiddenInput.value=defaultValue;if(defaultValue){const selectedOption=Array.from(options).find((option=>JSON.parse(option.dataset.dropdownOptionLabel).id===defaultValue));selectedOption.classList.add("pb_dropdown_option_selected");this.setTriggerElementText(JSON.parse(selectedOption.dataset.dropdownOptionLabel).label)}}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{this.resetDropdownValue()}))}}resetDropdownValue(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{option.classList.remove("pb_dropdown_option_selected")}));hiddenInput.value="";const defaultPlaceholder=this.element.querySelector(DROPDOWN_PLACEHOLDER);this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder)}setTriggerElementText(text){const triggerElement=this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);if(triggerElement){triggerElement.textContent=text}}}const ADVANCED_TABLE_SELECTOR="[data-advanced-table]";const DOWN_ARROW_SELECTOR="#advanced-table_open_icon";const UP_ARROW_SELECTOR="#advanced-table_close_icon";const _PbAdvancedTable=class _PbAdvancedTable extends PbEnhancedElement{static get selector(){return ADVANCED_TABLE_SELECTOR}get target(){const table=this.element.closest("table");return table.querySelectorAll(`[data-row-parent="${this.element.id}"]`)}connect(){this.element.addEventListener("click",(()=>{if(!_PbAdvancedTable.isCollapsing){const isExpanded=this.element.querySelector(UP_ARROW_SELECTOR).style.display==="inline-block";if(!isExpanded){_PbAdvancedTable.expandedRows.add(this.element.id)}else{_PbAdvancedTable.expandedRows.delete(this.element.id)}this.toggleElement(this.target)}}));const nestedButtons=this.element.closest("table").querySelectorAll("[data-advanced-table]");nestedButtons.forEach((button=>{button.addEventListener("click",(()=>{const isExpanded=button.querySelector(UP_ARROW_SELECTOR).style.display==="inline-block";if(isExpanded){_PbAdvancedTable.expandedRows.add(button.id)}else{_PbAdvancedTable.expandedRows.delete(button.id)}}))}))}showElement(elements){elements.forEach((elem=>{elem.style.display="table-row";elem.classList.add("is-visible");const childRowsAll=this.element.closest("table").querySelectorAll(`[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`);childRowsAll.forEach((childRow=>{const dataContent=childRow.dataset.advancedTableContent;if(!dataContent){return}const ancestorIds=dataContent.split("-").slice(0,-1);const prefixedAncestorIds=ancestorIds.map((id=>`${childRow.id}_${id}`));const allAncestorsExpanded=prefixedAncestorIds.every((id=>_PbAdvancedTable.expandedRows.has(id)));if(allAncestorsExpanded){childRow.style.display="table-row";childRow.classList.add("is-visible")}else{childRow.style.display="none";childRow.classList.remove("is-visible")}}))}))}hideElement(elements){elements.forEach((elem=>{elem.style.display="none";elem.classList.remove("is-visible");if(_PbAdvancedTable.expandedRows.has(elem.id)){_PbAdvancedTable.expandedRows.delete(elem.id)}const childrenArray=elem.dataset.advancedTableContent.split("-");const currentDepth=parseInt(elem.dataset.rowDepth);if(childrenArray.length>currentDepth){const childRows=this.element.closest("table").querySelectorAll(`[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`);childRows.forEach((childRow=>{childRow.style.display="none";childRow.classList.remove("is-visible")}))}}))}toggleElement(elements){if(!elements.length)return;const isVisible=elements[0].classList.contains("is-visible");if(isVisible){this.hideElement(elements);this.displayDownArrow()}else{this.showElement(elements);this.displayUpArrow()}}displayDownArrow(){this.element.querySelector(DOWN_ARROW_SELECTOR).style.display="inline-block";this.element.querySelector(UP_ARROW_SELECTOR).style.display="none"}displayUpArrow(){this.element.querySelector(UP_ARROW_SELECTOR).style.display="inline-block";this.element.querySelector(DOWN_ARROW_SELECTOR).style.display="none"}static handleToggleAllHeaders(element){const table=element.closest(".pb_table");const firstLevelButtons=table.querySelectorAll(".pb_advanced_table_body > .pb_table_tr [data-advanced-table]");const allExpanded=Array.from(firstLevelButtons).every((button=>button.querySelector(UP_ARROW_SELECTOR).style.display==="inline-block"));if(allExpanded){firstLevelButtons.forEach((button=>{button.click();_PbAdvancedTable.expandedRows.delete(button.id)}))}else{firstLevelButtons.forEach((button=>{if(!_PbAdvancedTable.expandedRows.has(button.id)){button.click();_PbAdvancedTable.expandedRows.add(button.id)}}));_PbAdvancedTable.expandedRows.forEach((rowId=>{const nestedButton=table.querySelector(`[data-advanced-table][id="${rowId}"]`);if(nestedButton&&!firstLevelButtons.contains(nestedButton)){nestedButton.click()}}))}}};__publicField(_PbAdvancedTable,"expandedRows",new Set);__publicField(_PbAdvancedTable,"isCollapsing",false);let PbAdvancedTable=_PbAdvancedTable;window.expandAllRows=element=>{PbAdvancedTable.handleToggleAllHeaders(element)};const NAV_SELECTOR="[data-pb-nav-tab]";const NAV_ITEM_SELECTOR="[data-pb-tab-target]";class PbNav extends PbEnhancedElement{static get selector(){return NAV_SELECTOR}connect(){this.hideAndAddEventListeners()}hideAndAddEventListeners(){const navItems=this.element.querySelectorAll(NAV_ITEM_SELECTOR);navItems.forEach((navItem=>{if(!navItem.className.includes("active")){this.changeContentDisplay(navItem.dataset.pbTabTarget,"none")}navItem.addEventListener("click",(event=>this.handleNavItemClick(event)))}))}handleNavItemClick(event){event.preventDefault();const navItem=event.target.closest(NAV_ITEM_SELECTOR);this.changeContentDisplay(navItem.dataset.pbTabTarget,"block");const navItems=this.element.querySelectorAll(NAV_ITEM_SELECTOR);navItems.forEach((navItemSelected=>{if(navItem!==navItemSelected){this.changeContentDisplay(navItemSelected.dataset.pbTabTarget,"none")}}))}changeContentDisplay(contentId,display){const content=document.getElementById(contentId);content.style.display=display}}const STAR_RATING_WRAPPER_SELECTOR="[data-pb-star-rating-wrapper]";const STAR_RATING_SELECTOR="[data-pb-star-rating]";const STAR_RATING_INPUT_DATA_SELECTOR="[data-pb-star-rating-input]";class PbStarRating extends PbEnhancedElement{static get selector(){return STAR_RATING_WRAPPER_SELECTOR}connect(){this.addEventListeners();this.handleFormReset();this.setDefaultValue()}addEventListeners(){this.element.querySelectorAll(STAR_RATING_SELECTOR).forEach((star=>{star.addEventListener("click",(event=>{const clickedStarId=event.currentTarget.id;this.updateStarColors(clickedStarId);this.updateHiddenInputValue(clickedStarId);this.clearFormValidation()}));star.addEventListener("mouseenter",(event=>{const hoveredStarId=event.currentTarget.id;this.updateStarHoverColors(hoveredStarId)}));star.addEventListener("mouseleave",(()=>{this.removeStarHoverColors()}));star.addEventListener("keydown",(event=>{if(event.key==="Enter"||event.key===" "){event.preventDefault();this.handleStarClick(star.id)}}))}))}handleStarClick(starId){this.updateStarColors(starId);this.updateHiddenInputValue(starId)}updateStarColors(clickedStarId){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const starId=star.id;const icon=star.querySelector(".interactive-star-icon");if(icon){if(starId<=clickedStarId){if(star.classList.contains("yellow_star")){icon.classList.add("yellow-star-selected")}else if(star.classList.contains("primary_star_light")){icon.classList.add("primary-star-selected")}else if(star.classList.contains("primary_star_dark")){icon.classList.add("primary-star-selected")}else if(star.classList.contains("subtle_star_light")){icon.classList.add("subtle-star-selected")}else if(star.classList.contains("subtle_star_dark")){icon.classList.add("subtle-star-selected")}else{icon.classList.add("yellow-star-selected")}}else{icon.classList.remove("yellow-star-selected","primary-star-selected","subtle-star-selected")}icon.classList.remove("star-hovered")}}))}updateHiddenInputValue(value){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);if(hiddenInput){hiddenInput.value=value}}updateStarHoverColors(hoveredStarId){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const starId=star.id;const icon=star.querySelector(".interactive-star-icon");if(icon){if(starId<=hoveredStarId){if(!icon.classList.contains("yellow-star-selected")&&!icon.classList.contains("primary-star-selected")&&!icon.classList.contains("subtle-star-selected")){icon.classList.add("star-hovered")}}else{icon.classList.remove("star-hovered")}}}))}removeStarHoverColors(){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const icon=star.querySelector(".interactive-star-icon");if(icon){if(!icon.classList.contains("yellow-star-selected")&&!icon.classList.contains("primary-star-selected")&&!icon.classList.contains("subtle-star-selected")){icon.classList.remove("star-hovered")}}}))}isStarSelected(){return this.element.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length>0}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{var _a;(_a=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR))==null?void 0:_a.setAttribute("value","");this.resetStarRatingValues()}))}}resetStarRatingValues(){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const icon=star.querySelector(".interactive-star-icon");if(icon){icon.classList.remove("yellow-star-selected","primary-star-selected","subtle-star-selected")}}))}clearFormValidation(){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);if(hiddenInput.checkValidity()){const errorLabelElement=this.element.querySelector(".pb_body_kit_negative");if(errorLabelElement){errorLabelElement.remove()}}}setDefaultValue(){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);const defaultValue=hiddenInput.value;if(defaultValue){this.updateStarColors(defaultValue)}}}const RADIO_SELECTOR="[data-pb-radio-children]";const RADIO_WRAPPER_SELECTOR="[data-pb-radio-children-wrapper]";class PbRadio extends PbEnhancedElement{static get selector(){return RADIO_SELECTOR}connect(){const radioWrapperElement=this.element.parentElement.querySelector(RADIO_WRAPPER_SELECTOR);radioWrapperElement.addEventListener("click",(()=>{this.element.querySelector("input[type='radio']").click()}))}}const DRAGGABLE_SELECTOR="[data-pb-draggable]";const DRAGGABLE_CONTAINER=".pb_draggable_container";class PbDraggable extends PbEnhancedElement{static get selector(){return DRAGGABLE_SELECTOR}connect(){this.draggedItem=null;this.draggedItemId=null;document.addEventListener("DOMContentLoaded",(()=>this.bindEventListeners()))}bindEventListeners(){this.element.querySelectorAll(".pb_draggable_item img").forEach((img=>{img.setAttribute("draggable","false")}));this.element.querySelectorAll(".pb_draggable_item").forEach((item=>{item.addEventListener("dragstart",this.handleDragStart.bind(this));item.addEventListener("dragend",this.handleDragEnd.bind(this));item.addEventListener("dragenter",this.handleDragEnter.bind(this))}));const container=this.element.querySelector(DRAGGABLE_CONTAINER);if(container){container.addEventListener("dragover",this.handleDragOver.bind(this));container.addEventListener("drop",this.handleDrop.bind(this))}}handleDragStart(event){if(event.target.tagName.toLowerCase()==="img"){event.preventDefault();return}this.draggedItem=event.target;this.draggedItemId=event.target.id;event.target.classList.add("is_dragging");if(event.dataTransfer){event.dataTransfer.effectAllowed="move";event.dataTransfer.setData("text/plain",this.draggedItemId)}setTimeout((()=>{event.target.style.opacity="0.5"}),0)}handleDragEnter(event){if(!this.draggedItem||event.target===this.draggedItem)return;const targetItem=event.target.closest(".pb_draggable_item");if(!targetItem)return;const container=targetItem.parentNode;const items=Array.from(container.children);const draggedIndex=items.indexOf(this.draggedItem);const targetIndex=items.indexOf(targetItem);if(draggedIndex>targetIndex){container.insertBefore(this.draggedItem,targetItem)}else{container.insertBefore(this.draggedItem,targetItem.nextSibling)}}handleDragOver(event){event.preventDefault();const container=event.target.closest(DRAGGABLE_CONTAINER);if(container){container.classList.add("active_container")}}handleDrop(event){event.preventDefault();const container=event.target.closest(DRAGGABLE_CONTAINER);if(!container||!this.draggedItem)return;container.classList.remove("active_container");this.draggedItem.style.opacity="1";const reorderedItems=Array.from(container.children).filter((item=>item.classList.contains("pb_draggable_item"))).map((item=>item.id.replace("item_","")));container.setAttribute("data-reordered-items",JSON.stringify(reorderedItems));const customEvent=new CustomEvent("pb-draggable-reorder",{detail:{reorderedItems:reorderedItems,containerId:container.id}});this.element.dispatchEvent(customEvent);this.draggedItem=null;this.draggedItemId=null}handleDragEnd(event){event.target.classList.remove("is_dragging");event.target.style.opacity="1";this.draggedItem=null;this.draggedItemId=null;this.element.querySelectorAll(DRAGGABLE_CONTAINER).forEach((container=>{container.classList.remove("active_container")}))}}window.formHelper=formHelper;window.datePickerHelper=datePickerHelper;window.dialogHelper=dialogHelper;PbCollapsible.start();PbPopover.start();PbTooltip.start();PbFixedConfirmationToast.start();PbTypeahead.start();PbTable.start();PbTextarea.start();PbDropdown.start();PbAdvancedTable.start();PbNav.start();PbStarRating.start();PbRadio.start();PbDraggable.start();
1
+ var __defProp=Object.defineProperty;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:true,configurable:true,writable:true,value:value}):obj[key]=value;var __publicField=(obj,key,value)=>__defNormalProp(obj,typeof key!=="symbol"?key+"":key,value);import"./chunks/pb_form_validation-C5Cc0-1v.js";import{P as PbEnhancedElement,f as formHelper,a as datePickerHelper,b as dialogHelper,c as PbPopover,e as PbTooltip,g as PbTypeahead,h as PbTable,i as PbTextarea}from"./chunks/lib-B7sgJtGS.js";import"./chunks/lazysizes-B7xYodB-.js";import"./playbook-rails-react-bindings.js";import"react";import"react/jsx-runtime";import"webpacker-react";import"./chunks/_typeahead-DPsPSYxe.js";import"react-dom";import"react-trix";import"trix";import"react-is";const MAIN_SELECTOR="[data-collapsible-main]";const CONTENT_SELECTOR="[data-collapsible-content]";const DOWN_ARROW_SELECTOR$2="#collapsible_open_icon";const UP_ARROW_SELECTOR$2="#collapsible_close_icon";class PbCollapsible extends PbEnhancedElement{static get selector(){return MAIN_SELECTOR}connect(){this.element.addEventListener("click",(()=>{this.toggleElement(this.target)}));if(this.target.classList.contains("is-visible")){this.displayUpArrow()}else{this.displayDownArrow()}document.addEventListener(`${this.target.id}`,(()=>{this.toggleElement(this.target)}))}get target(){return this.element.parentNode.querySelector(CONTENT_SELECTOR)}showElement(elem){const getHeight=()=>{elem.style.display="block";const height2=elem.scrollHeight+"px";elem.style.display="";return height2};const height=getHeight();elem.classList.add("is-visible");elem.style.height=height;elem.style.overflow="hidden";window.setTimeout((()=>{elem.style.height="";elem.style.overflow="visible"}),300)}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.style.height="0";elem.style.paddingTop="0";elem.style.paddingBottom="0";elem.style.overflow="hidden"}),1);window.setTimeout((()=>{elem.classList.remove("is-visible");elem.style.overflow=""}),300)}toggleElement(elem){if(elem.classList.contains("is-visible")){this.hideElement(elem);this.displayDownArrow();return}this.showElement(elem);this.displayUpArrow()}toggleArrows(showDownArrow){const downArrow=this.element.querySelector(DOWN_ARROW_SELECTOR$2);const upArrow=this.element.querySelector(UP_ARROW_SELECTOR$2);if(downArrow){downArrow.style.display=showDownArrow?"inline-block":"none"}if(upArrow){upArrow.style.display=showDownArrow?"none":"inline-block"}}displayDownArrow(){this.toggleArrows(true)}displayUpArrow(){this.toggleArrows(false)}}class PbFixedConfirmationToast extends PbEnhancedElement{static get selector(){return".remove_toast"}connect(){this.self=this.element;this.autoCloseToast(this.self);this.self.addEventListener("click",(()=>{this.removeToast(this.self)}))}removeToast(elem){elem.parentNode.removeChild(elem)}autoCloseToast(element){const classListValues=element.classList.value;const hasAutoCloseClass=classListValues.includes("auto_close");if(hasAutoCloseClass){const classList=classListValues.split(" ");const autoCloseValue=classList[classList.length-1].split("_")[2];const autoCloseIntValue=parseInt(autoCloseValue);setTimeout((()=>{this.removeToast(element)}),autoCloseIntValue)}}}const OPTION_SELECTOR$1="[data-dropdown-option-label]";class PbDropdownKeyboard{constructor(dropdown){this.dropdown=dropdown;this.dropdownElement=dropdown.element;this.options=Array.from(this.dropdownElement.querySelectorAll(OPTION_SELECTOR$1));this.focusedOptionIndex=-1;this.init()}init(){this.dropdownElement.addEventListener("keydown",this.handleKeyDown.bind(this))}handleKeyDown(event){switch(event.key){case"ArrowDown":event.preventDefault();if(!this.dropdown.target.classList.contains("open")){this.dropdown.showElement(this.dropdown.target);this.dropdown.updateArrowDisplay(true)}this.moveFocus(1);break;case"ArrowUp":event.preventDefault();this.moveFocus(-1);break;case"Enter":event.preventDefault();if(this.focusedOptionIndex!==-1){this.selectOption()}else{if(!this.dropdown.target.classList.contains("open")){this.dropdown.showElement(this.dropdown.target);this.dropdown.updateArrowDisplay(true)}}break;case"Escape":this.dropdown.hideElement(this.dropdown.target);break;case"Tab":this.dropdown.hideElement(this.dropdown.target);this.dropdown.updateArrowDisplay(false);this.resetFocus();break}}moveFocus(direction){if(this.focusedOptionIndex!==-1){this.options[this.focusedOptionIndex].classList.remove("pb_dropdown_option_focused")}this.focusedOptionIndex=(this.focusedOptionIndex+direction+this.options.length)%this.options.length;this.options[this.focusedOptionIndex].classList.add("pb_dropdown_option_focused")}selectOption(){const option=this.options[this.focusedOptionIndex];this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel,option);this.dropdown.hideElement(this.dropdown.target)}}const DROPDOWN_SELECTOR="[data-pb-dropdown]";const TRIGGER_SELECTOR="[data-dropdown-trigger]";const CONTAINER_SELECTOR="[data-dropdown-container]";const DOWN_ARROW_SELECTOR$1="#dropdown_open_icon";const UP_ARROW_SELECTOR$1="#dropdown_close_icon";const OPTION_SELECTOR="[data-dropdown-option-label]";const CUSTOM_DISPLAY_SELECTOR="[data-dropdown-custom-trigger]";const DROPDOWN_TRIGGER_DISPLAY="#dropdown_trigger_display";const DROPDOWN_PLACEHOLDER="[data-dropdown-placeholder]";const DROPDOWN_INPUT="#dropdown-selected-option";class PbDropdown extends PbEnhancedElement{static get selector(){return DROPDOWN_SELECTOR}get target(){return this.element.parentNode.querySelector(CONTAINER_SELECTOR)}connect(){this.keyboardHandler=new PbDropdownKeyboard(this);this.setDefaultValue();this.bindEventListeners();this.updateArrowDisplay(false);this.handleFormValidation();this.handleFormReset()}bindEventListeners(){const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR)||this.element;customTrigger.addEventListener("click",(()=>this.toggleElement(this.target)));this.target.addEventListener("click",this.handleOptionClick.bind(this));document.addEventListener("click",this.handleDocumentClick.bind(this),true)}handleOptionClick(event){const option=event.target.closest(OPTION_SELECTOR);const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);if(option){const value=option.dataset.dropdownOptionLabel;hiddenInput.value=JSON.parse(value).id;this.clearFormValidation(hiddenInput);this.onOptionSelected(value,option)}}handleDocumentClick(event){if(this.isClickOutside(event)&&this.target.classList.contains("open")){this.hideElement(this.target);this.updateArrowDisplay(false)}}isClickOutside(event){const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);if(customTrigger){return!customTrigger.contains(event.target)}else{const triggerElement=this.element.querySelector(TRIGGER_SELECTOR);const containerElement=this.element.parentNode.querySelector(CONTAINER_SELECTOR);const isOutsideTrigger=triggerElement?!triggerElement.contains(event.target):true;const isOutsideContainer=containerElement?!containerElement.contains(event.target):true;return isOutsideTrigger&&isOutsideContainer}}onOptionSelected(value,selectedOption){const triggerElement=this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);const customDisplayElement=this.element.querySelector("#dropdown_trigger_custom_display");if(triggerElement){const selectedLabel=JSON.parse(value).label;triggerElement.textContent=selectedLabel;if(customDisplayElement){customDisplayElement.style.display="block";customDisplayElement.style.paddingRight="8px"}}const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);if(customTrigger){if(this.target.classList.contains("open")){this.hideElement(this.target);this.updateArrowDisplay(false)}}const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{option.classList.remove("pb_dropdown_option_selected")}));selectedOption.classList.add("pb_dropdown_option_selected")}showElement(elem){elem.classList.remove("close");elem.classList.add("open");elem.style.height=elem.scrollHeight+"px"}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.classList.add("close");elem.classList.remove("open");this.resetFocus()}),0)}resetFocus(){if(this.keyboardHandler){this.keyboardHandler.focusedOptionIndex=-1;const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>option.classList.remove("pb_dropdown_option_focused")))}}toggleElement(elem){if(elem.classList.contains("open")){this.hideElement(elem);this.updateArrowDisplay(false);return}this.showElement(elem);this.updateArrowDisplay(true)}updateArrowDisplay(isOpen){const downArrow=this.element.querySelector(DOWN_ARROW_SELECTOR$1);const upArrow=this.element.querySelector(UP_ARROW_SELECTOR$1);if(downArrow&&upArrow){downArrow.style.display=isOpen?"none":"inline-block";upArrow.style.display=isOpen?"inline-block":"none"}}handleFormValidation(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);hiddenInput.addEventListener("invalid",(function(event){if(hiddenInput.hasAttribute("required")&&hiddenInput.value===""){event.preventDefault();hiddenInput.closest(".dropdown_wrapper").classList.add("error")}}),true)}clearFormValidation(input){if(input.checkValidity()){const dropdownWrapperElement=input.closest(".dropdown_wrapper");dropdownWrapperElement.classList.remove("error");const errorLabelElement=dropdownWrapperElement.querySelector(".pb_body_kit_negative");if(errorLabelElement){errorLabelElement.remove()}}}setDefaultValue(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);const options=this.element.querySelectorAll(OPTION_SELECTOR);const defaultValue=hiddenInput.dataset.defaultValue||"";hiddenInput.value=defaultValue;if(defaultValue){const selectedOption=Array.from(options).find((option=>JSON.parse(option.dataset.dropdownOptionLabel).id===defaultValue));selectedOption.classList.add("pb_dropdown_option_selected");this.setTriggerElementText(JSON.parse(selectedOption.dataset.dropdownOptionLabel).label)}}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{this.resetDropdownValue()}))}}resetDropdownValue(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{option.classList.remove("pb_dropdown_option_selected")}));hiddenInput.value="";const defaultPlaceholder=this.element.querySelector(DROPDOWN_PLACEHOLDER);this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder)}setTriggerElementText(text){const triggerElement=this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);if(triggerElement){triggerElement.textContent=text}}}const ADVANCED_TABLE_SELECTOR="[data-advanced-table]";const DOWN_ARROW_SELECTOR="#advanced-table_open_icon";const UP_ARROW_SELECTOR="#advanced-table_close_icon";const _PbAdvancedTable=class _PbAdvancedTable extends PbEnhancedElement{static get selector(){return ADVANCED_TABLE_SELECTOR}get target(){const table=this.element.closest("table");return table.querySelectorAll(`[data-row-parent="${this.element.id}"]`)}connect(){this.element.addEventListener("click",(()=>{if(!_PbAdvancedTable.isCollapsing){const isExpanded=this.element.querySelector(UP_ARROW_SELECTOR).style.display==="inline-block";if(!isExpanded){_PbAdvancedTable.expandedRows.add(this.element.id)}else{_PbAdvancedTable.expandedRows.delete(this.element.id)}this.toggleElement(this.target)}}));const nestedButtons=this.element.closest("table").querySelectorAll("[data-advanced-table]");nestedButtons.forEach((button=>{button.addEventListener("click",(()=>{const isExpanded=button.querySelector(UP_ARROW_SELECTOR).style.display==="inline-block";if(isExpanded){_PbAdvancedTable.expandedRows.add(button.id)}else{_PbAdvancedTable.expandedRows.delete(button.id)}}))}))}showElement(elements){elements.forEach((elem=>{elem.style.display="table-row";elem.classList.add("is-visible");const childRowsAll=this.element.closest("table").querySelectorAll(`[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`);childRowsAll.forEach((childRow=>{const dataContent=childRow.dataset.advancedTableContent;if(!dataContent){return}const ancestorIds=dataContent.split("-").slice(0,-1);const prefixedAncestorIds=ancestorIds.map((id=>`${childRow.id}_${id}`));const allAncestorsExpanded=prefixedAncestorIds.every((id=>_PbAdvancedTable.expandedRows.has(id)));const checkIfParentIsExpanded=()=>{if(dataContent.endsWith("sr")){const parentRowId=childRow.dataset.rowParent;const isParentVisible=childRow.previousElementSibling.classList.contains("is-visible");if(parentRowId){const isInSet=_PbAdvancedTable.expandedRows.has(parentRowId);if(isInSet&&isParentVisible){return true}}}return false};if(allAncestorsExpanded||checkIfParentIsExpanded()){childRow.style.display="table-row";childRow.classList.add("is-visible")}else{childRow.style.display="none";childRow.classList.remove("is-visible")}}))}))}hideElement(elements){elements.forEach((elem=>{elem.style.display="none";elem.classList.remove("is-visible");if(_PbAdvancedTable.expandedRows.has(elem.id)){_PbAdvancedTable.expandedRows.delete(elem.id)}const childrenArray=elem.dataset.advancedTableContent.split("-");const currentDepth=parseInt(elem.dataset.rowDepth);if(childrenArray.length>currentDepth){const childRows=this.element.closest("table").querySelectorAll(`[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`);childRows.forEach((childRow=>{childRow.style.display="none";childRow.classList.remove("is-visible")}))}}))}toggleElement(elements){if(!elements.length)return;const isVisible=elements[0].classList.contains("is-visible");if(isVisible){this.hideElement(elements);this.displayDownArrow()}else{this.showElement(elements);this.displayUpArrow()}}displayDownArrow(){this.element.querySelector(DOWN_ARROW_SELECTOR).style.display="inline-block";this.element.querySelector(UP_ARROW_SELECTOR).style.display="none"}displayUpArrow(){this.element.querySelector(UP_ARROW_SELECTOR).style.display="inline-block";this.element.querySelector(DOWN_ARROW_SELECTOR).style.display="none"}static handleToggleAllHeaders(element){const table=element.closest(".pb_table");const firstLevelButtons=table.querySelectorAll(".pb_advanced_table_body > .pb_table_tr[data-row-depth='0'] [data-advanced-table]");const allExpanded=Array.from(firstLevelButtons).every((button=>button.querySelector(UP_ARROW_SELECTOR).style.display==="inline-block"));if(allExpanded){firstLevelButtons.forEach((button=>{button.click();_PbAdvancedTable.expandedRows.delete(button.id)}))}else{firstLevelButtons.forEach((button=>{if(!_PbAdvancedTable.expandedRows.has(button.id)){button.click();_PbAdvancedTable.expandedRows.add(button.id)}}));_PbAdvancedTable.expandedRows.forEach((rowId=>{const nestedButton=table.querySelector(`[data-advanced-table][id="${rowId}"]`);if(nestedButton&&!firstLevelButtons.contains(nestedButton)){nestedButton.click()}}))}}static handleToggleAllSubRows(element,rowDepth){const table=element.closest(".pb_table");const parentRow=element.closest("tr");if(!parentRow){return}const rowParentId=parentRow.dataset.rowParent;const subRowButtons=table.querySelectorAll(`.pb_advanced_table_body > .pb_table_tr[data-row-depth='${rowDepth}'].pb_table_tr[data-row-parent='${rowParentId}'] [data-advanced-table]`);const allExpanded=Array.from(subRowButtons).every((button=>button.querySelector(UP_ARROW_SELECTOR).style.display==="inline-block"));if(allExpanded){subRowButtons.forEach((button=>{button.click();_PbAdvancedTable.expandedRows.delete(button.id)}))}else{subRowButtons.forEach((button=>{if(!_PbAdvancedTable.expandedRows.has(button.id)){button.click();_PbAdvancedTable.expandedRows.add(button.id)}}))}}};__publicField(_PbAdvancedTable,"expandedRows",new Set);__publicField(_PbAdvancedTable,"isCollapsing",false);let PbAdvancedTable=_PbAdvancedTable;window.expandAllRows=element=>{PbAdvancedTable.handleToggleAllHeaders(element)};window.expandAllSubRows=(element,rowDepth)=>{PbAdvancedTable.handleToggleAllSubRows(element,rowDepth)};const NAV_SELECTOR="[data-pb-nav-tab]";const NAV_ITEM_SELECTOR="[data-pb-tab-target]";class PbNav extends PbEnhancedElement{static get selector(){return NAV_SELECTOR}connect(){this.hideAndAddEventListeners()}hideAndAddEventListeners(){const navItems=this.element.querySelectorAll(NAV_ITEM_SELECTOR);navItems.forEach((navItem=>{if(!navItem.className.includes("active")){this.changeContentDisplay(navItem.dataset.pbTabTarget,"none")}navItem.addEventListener("click",(event=>this.handleNavItemClick(event)))}))}handleNavItemClick(event){event.preventDefault();const navItem=event.target.closest(NAV_ITEM_SELECTOR);this.changeContentDisplay(navItem.dataset.pbTabTarget,"block");const navItems=this.element.querySelectorAll(NAV_ITEM_SELECTOR);navItems.forEach((navItemSelected=>{if(navItem!==navItemSelected){this.changeContentDisplay(navItemSelected.dataset.pbTabTarget,"none")}}))}changeContentDisplay(contentId,display){const content=document.getElementById(contentId);content.style.display=display}}const STAR_RATING_WRAPPER_SELECTOR="[data-pb-star-rating-wrapper]";const STAR_RATING_SELECTOR="[data-pb-star-rating]";const STAR_RATING_INPUT_DATA_SELECTOR="[data-pb-star-rating-input]";class PbStarRating extends PbEnhancedElement{static get selector(){return STAR_RATING_WRAPPER_SELECTOR}connect(){this.addEventListeners();this.handleFormReset();this.setDefaultValue()}addEventListeners(){this.element.querySelectorAll(STAR_RATING_SELECTOR).forEach((star=>{star.addEventListener("click",(event=>{const clickedStarId=event.currentTarget.id;this.updateStarColors(clickedStarId);this.updateHiddenInputValue(clickedStarId);this.clearFormValidation()}));star.addEventListener("mouseenter",(event=>{const hoveredStarId=event.currentTarget.id;this.updateStarHoverColors(hoveredStarId)}));star.addEventListener("mouseleave",(()=>{this.removeStarHoverColors()}));star.addEventListener("keydown",(event=>{if(event.key==="Enter"||event.key===" "){event.preventDefault();this.handleStarClick(star.id)}}))}))}handleStarClick(starId){this.updateStarColors(starId);this.updateHiddenInputValue(starId)}updateStarColors(clickedStarId){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const starId=star.id;const icon=star.querySelector(".interactive-star-icon");if(icon){if(starId<=clickedStarId){if(star.classList.contains("yellow_star")){icon.classList.add("yellow-star-selected")}else if(star.classList.contains("primary_star_light")){icon.classList.add("primary-star-selected")}else if(star.classList.contains("primary_star_dark")){icon.classList.add("primary-star-selected")}else if(star.classList.contains("subtle_star_light")){icon.classList.add("subtle-star-selected")}else if(star.classList.contains("subtle_star_dark")){icon.classList.add("subtle-star-selected")}else{icon.classList.add("yellow-star-selected")}}else{icon.classList.remove("yellow-star-selected","primary-star-selected","subtle-star-selected")}icon.classList.remove("star-hovered")}}))}updateHiddenInputValue(value){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);if(hiddenInput){hiddenInput.value=value}}updateStarHoverColors(hoveredStarId){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const starId=star.id;const icon=star.querySelector(".interactive-star-icon");if(icon){if(starId<=hoveredStarId){if(!icon.classList.contains("yellow-star-selected")&&!icon.classList.contains("primary-star-selected")&&!icon.classList.contains("subtle-star-selected")){icon.classList.add("star-hovered")}}else{icon.classList.remove("star-hovered")}}}))}removeStarHoverColors(){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const icon=star.querySelector(".interactive-star-icon");if(icon){if(!icon.classList.contains("yellow-star-selected")&&!icon.classList.contains("primary-star-selected")&&!icon.classList.contains("subtle-star-selected")){icon.classList.remove("star-hovered")}}}))}isStarSelected(){return this.element.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length>0}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{var _a;(_a=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR))==null?void 0:_a.setAttribute("value","");this.resetStarRatingValues()}))}}resetStarRatingValues(){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const icon=star.querySelector(".interactive-star-icon");if(icon){icon.classList.remove("yellow-star-selected","primary-star-selected","subtle-star-selected")}}))}clearFormValidation(){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);if(hiddenInput.checkValidity()){const errorLabelElement=this.element.querySelector(".pb_body_kit_negative");if(errorLabelElement){errorLabelElement.remove()}}}setDefaultValue(){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);const defaultValue=hiddenInput.value;if(defaultValue){this.updateStarColors(defaultValue)}}}const RADIO_SELECTOR="[data-pb-radio-children]";const RADIO_WRAPPER_SELECTOR="[data-pb-radio-children-wrapper]";class PbRadio extends PbEnhancedElement{static get selector(){return RADIO_SELECTOR}connect(){const radioWrapperElement=this.element.parentElement.querySelector(RADIO_WRAPPER_SELECTOR);radioWrapperElement.addEventListener("click",(()=>{this.element.querySelector("input[type='radio']").click()}))}}const DRAGGABLE_SELECTOR="[data-pb-draggable]";const DRAGGABLE_CONTAINER=".pb_draggable_container";class PbDraggable extends PbEnhancedElement{static get selector(){return DRAGGABLE_SELECTOR}connect(){this.draggedItem=null;this.draggedItemId=null;document.addEventListener("DOMContentLoaded",(()=>this.bindEventListeners()))}bindEventListeners(){this.element.querySelectorAll(".pb_draggable_item img").forEach((img=>{img.setAttribute("draggable","false")}));this.element.querySelectorAll(".pb_draggable_item").forEach((item=>{item.addEventListener("dragstart",this.handleDragStart.bind(this));item.addEventListener("dragend",this.handleDragEnd.bind(this));item.addEventListener("dragenter",this.handleDragEnter.bind(this))}));const container=this.element.querySelector(DRAGGABLE_CONTAINER);if(container){container.addEventListener("dragover",this.handleDragOver.bind(this));container.addEventListener("drop",this.handleDrop.bind(this))}}handleDragStart(event){if(event.target.tagName.toLowerCase()==="img"){event.preventDefault();return}this.draggedItem=event.target;this.draggedItemId=event.target.id;event.target.classList.add("is_dragging");if(event.dataTransfer){event.dataTransfer.effectAllowed="move";event.dataTransfer.setData("text/plain",this.draggedItemId)}setTimeout((()=>{event.target.style.opacity="0.5"}),0)}handleDragEnter(event){if(!this.draggedItem||event.target===this.draggedItem)return;const targetItem=event.target.closest(".pb_draggable_item");if(!targetItem)return;const container=targetItem.parentNode;const items=Array.from(container.children);const draggedIndex=items.indexOf(this.draggedItem);const targetIndex=items.indexOf(targetItem);if(draggedIndex>targetIndex){container.insertBefore(this.draggedItem,targetItem)}else{container.insertBefore(this.draggedItem,targetItem.nextSibling)}}handleDragOver(event){event.preventDefault();const container=event.target.closest(DRAGGABLE_CONTAINER);if(container){container.classList.add("active_container")}}handleDrop(event){event.preventDefault();const container=event.target.closest(DRAGGABLE_CONTAINER);if(!container||!this.draggedItem)return;container.classList.remove("active_container");this.draggedItem.style.opacity="1";const reorderedItems=Array.from(container.children).filter((item=>item.classList.contains("pb_draggable_item"))).map((item=>item.id.replace("item_","")));container.setAttribute("data-reordered-items",JSON.stringify(reorderedItems));const customEvent=new CustomEvent("pb-draggable-reorder",{detail:{reorderedItems:reorderedItems,containerId:container.id}});this.element.dispatchEvent(customEvent);this.draggedItem=null;this.draggedItemId=null}handleDragEnd(event){event.target.classList.remove("is_dragging");event.target.style.opacity="1";this.draggedItem=null;this.draggedItemId=null;this.element.querySelectorAll(DRAGGABLE_CONTAINER).forEach((container=>{container.classList.remove("active_container")}))}}window.formHelper=formHelper;window.datePickerHelper=datePickerHelper;window.dialogHelper=dialogHelper;PbCollapsible.start();PbPopover.start();PbTooltip.start();PbFixedConfirmationToast.start();PbTypeahead.start();PbTable.start();PbTextarea.start();PbDropdown.start();PbAdvancedTable.start();PbNav.start();PbStarRating.start();PbRadio.start();PbDraggable.start();
data/lib/playbook/version.rb CHANGED
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.10.0"
5
- VERSION = "14.11.0.pre.rc.13"
5
+ VERSION = "14.11.0.pre.rc.14"
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: 14.11.0.pre.rc.13
4
+ version: 14.11.0.pre.rc.14
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX