playbook_ui 14.18.0.pre.alpha.play1736highchartslinegraphdefaultrebuild7437 → 14.18.0.pre.alpha.play1736highchartslinegraphdefaultrebuild7444
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +43 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
- data/app/pb_kits/playbook/pb_draggable/index.js +139 -142
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_line_graph/{lineGraphTheme.js → lineGraphTheme.ts} +2 -2
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +8 -4
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_colors.md → _draggable_drop_zones_colors_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones.md → _draggable_drop_zones_react.md} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 14f307af16056aef72fc45a1a48e7e5c8614532eb95b35833672caaab5c20784
|
4
|
+
data.tar.gz: 3d5dabc955869531d97d843936a4ae29969fe5ca3890c9996b5f5c357a3f6530
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7b4415c0875b46f7e71c2c3159ca933664b54a1918c66898114aa7da755fd4fb5a96057b6924ea755b722f0e50f46921b9ebb727229c7dc5fe378e1380bf1bed
|
7
|
+
data.tar.gz: 552c0615b7fb8fa7f602cc9e277c900e443b0db6fbf585c473dcb785983f326e64dca2f8c5606cc424d21d0d9318d2d64c29cb15cc994d76ce0d3333f6f16eff
|
@@ -0,0 +1,43 @@
|
|
1
|
+
<% data_shadow = [
|
2
|
+
{ id: "51", text: "Task 1" },
|
3
|
+
{ id: "52", text: "Task 2" },
|
4
|
+
{ id: "53", text: "Task 3" }
|
5
|
+
] %>
|
6
|
+
|
7
|
+
<% data_outline = [
|
8
|
+
{ id: "61", text: "Task 1" },
|
9
|
+
{ id: "62", text: "Task 2" },
|
10
|
+
{ id: "63", text: "Task 3" }
|
11
|
+
] %>
|
12
|
+
|
13
|
+
<%= pb_rails("flex", props: { justify: "around" }) do %>
|
14
|
+
<%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
|
15
|
+
<%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
|
16
|
+
<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
|
17
|
+
<%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
|
18
|
+
<% data_shadow.each do |item| %>
|
19
|
+
<%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
|
20
|
+
<%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
|
21
|
+
<%= pb_rails("body", props: { text: item[:text] }) %>
|
22
|
+
<% end %>
|
23
|
+
<% end %>
|
24
|
+
<% end %>
|
25
|
+
<% end %>
|
26
|
+
<% end %>
|
27
|
+
<% end %>
|
28
|
+
|
29
|
+
<%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
|
30
|
+
<%= pb_rails("draggable", props: { drop_zone_type: "outline", initial_items: data_outline }) do %>
|
31
|
+
<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outline", text_align: "center" }) %>
|
32
|
+
<%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
|
33
|
+
<% data_outline.each do |item| %>
|
34
|
+
<%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
|
35
|
+
<%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
|
36
|
+
<%= pb_rails("body", props: { text: item[:text] }) %>
|
37
|
+
<% end %>
|
38
|
+
<% end %>
|
39
|
+
<% end %>
|
40
|
+
<% end %>
|
41
|
+
<% end %>
|
42
|
+
<% end %>
|
43
|
+
<% end %>
|
@@ -0,0 +1,55 @@
|
|
1
|
+
<% initial_items = [
|
2
|
+
{
|
3
|
+
id: "141",
|
4
|
+
url: "https://unsplash.it/500/400/?image=633",
|
5
|
+
},
|
6
|
+
{
|
7
|
+
id: "142",
|
8
|
+
url: "https://unsplash.it/500/400/?image=634",
|
9
|
+
},
|
10
|
+
{
|
11
|
+
id: "143",
|
12
|
+
url: "https://unsplash.it/500/400/?image=637",
|
13
|
+
},
|
14
|
+
] %>
|
15
|
+
|
16
|
+
<% next_init_items = [
|
17
|
+
{
|
18
|
+
id: "151",
|
19
|
+
url: "https://unsplash.it/500/400/?image=633",
|
20
|
+
},
|
21
|
+
{
|
22
|
+
id: "152",
|
23
|
+
url: "https://unsplash.it/500/400/?image=634",
|
24
|
+
},
|
25
|
+
{
|
26
|
+
id: "153",
|
27
|
+
url: "https://unsplash.it/500/400/?image=637",
|
28
|
+
},
|
29
|
+
] %>
|
30
|
+
|
31
|
+
<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "shadow", drop_zone_color: "primary"}) do %>
|
32
|
+
<%= pb_rails("draggable/draggable_container") do %>
|
33
|
+
<%= pb_rails("flex", props: { gap: "sm" }) do %>
|
34
|
+
<% initial_items.each do |item| %>
|
35
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
|
36
|
+
<%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
|
37
|
+
<% end %>
|
38
|
+
<% end %>
|
39
|
+
<% end %>
|
40
|
+
<% end %>
|
41
|
+
<% end %>
|
42
|
+
|
43
|
+
<br/>
|
44
|
+
|
45
|
+
<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "outline", drop_zone_color: "purple"}) do %>
|
46
|
+
<%= pb_rails("draggable/draggable_container") do %>
|
47
|
+
<%= pb_rails("flex", props: { gap: "sm" }) do %>
|
48
|
+
<% initial_items.each do |item| %>
|
49
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
|
50
|
+
<%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
|
51
|
+
<% end %>
|
52
|
+
<% end %>
|
53
|
+
<% end %>
|
54
|
+
<% end %>
|
55
|
+
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options.
|
@@ -17,5 +17,6 @@ examples:
|
|
17
17
|
- draggable_with_cards: Draggable with Cards
|
18
18
|
- draggable_with_table: Draggable with Table
|
19
19
|
- draggable_multiple_containers: Dragging Across Multiple Containers
|
20
|
+
- draggable_drop_zones: Draggable Drop Zones
|
21
|
+
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
20
22
|
- draggable_event_listeners: Draggable Event Listeners
|
21
|
-
|
@@ -5,9 +5,17 @@ module Playbook
|
|
5
5
|
class Draggable < ::Playbook::KitBase
|
6
6
|
prop :initial_items, type: Playbook::Props::Array,
|
7
7
|
default: []
|
8
|
+
prop :drop_zone_type, type: Playbook::Props::Enum,
|
9
|
+
values: %w[ghost shadow outline line],
|
10
|
+
default: "ghost"
|
11
|
+
prop :drop_zone_color, type: Playbook::Props::Enum,
|
12
|
+
values: %w[neutral primary purple],
|
13
|
+
default: "neutral"
|
8
14
|
|
9
15
|
def data
|
10
|
-
Hash(prop(:data)).merge(pb_draggable: true
|
16
|
+
Hash(prop(:data)).merge(pb_draggable: true,
|
17
|
+
drop_zone_type: drop_zone_type,
|
18
|
+
drop_zone_color: drop_zone_color)
|
11
19
|
end
|
12
20
|
|
13
21
|
def classname
|
@@ -1,24 +1,26 @@
|
|
1
1
|
import PbEnhancedElement from "../pb_enhanced_element";
|
2
2
|
|
3
|
-
const DRAGGABLE_SELECTOR
|
3
|
+
const DRAGGABLE_SELECTOR = "[data-pb-draggable]";
|
4
4
|
const DRAGGABLE_CONTAINER = ".pb_draggable_container";
|
5
|
+
const NEEDS_CLONE = ["shadow", "outline"]; // clone only for these types
|
5
6
|
|
6
7
|
export default class PbDraggable extends PbEnhancedElement {
|
7
|
-
static get selector() {
|
8
|
-
return DRAGGABLE_SELECTOR;
|
9
|
-
}
|
8
|
+
static get selector() { return DRAGGABLE_SELECTOR; }
|
10
9
|
|
11
10
|
connect() {
|
12
11
|
this.state = {
|
13
|
-
items:
|
14
|
-
dragData:
|
15
|
-
isDragging:
|
16
|
-
activeContainer: ""
|
12
|
+
items: [],
|
13
|
+
dragData: { id: "", initialGroup: "" },
|
14
|
+
isDragging: "",
|
15
|
+
activeContainer: "",
|
17
16
|
};
|
18
17
|
|
19
|
-
this.draggedItem
|
18
|
+
this.draggedItem = null;
|
20
19
|
this.draggedItemId = null;
|
20
|
+
this.dragGhost = null;
|
21
21
|
this.hasMultipleContainers = false;
|
22
|
+
this.dragZoneType = "";
|
23
|
+
this.dragZoneColor = "";
|
22
24
|
|
23
25
|
document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
|
24
26
|
}
|
@@ -26,13 +28,12 @@ export default class PbDraggable extends PbEnhancedElement {
|
|
26
28
|
setState(newState) {
|
27
29
|
this.state = { ...this.state, ...newState };
|
28
30
|
if (newState.items) {
|
29
|
-
|
31
|
+
this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder", {
|
30
32
|
detail: {
|
31
33
|
reorderedItems: this.state.items,
|
32
|
-
containerId:
|
33
|
-
}
|
34
|
-
});
|
35
|
-
this.element.dispatchEvent(customEvent);
|
34
|
+
containerId: this.element.querySelector(DRAGGABLE_CONTAINER).id,
|
35
|
+
},
|
36
|
+
}));
|
36
37
|
}
|
37
38
|
}
|
38
39
|
|
@@ -43,71 +44,100 @@ export default class PbDraggable extends PbEnhancedElement {
|
|
43
44
|
|
44
45
|
// Needed to prevent images within draggable items from being independently draggable
|
45
46
|
// Needed if using Image kit in draggable items
|
46
|
-
this.element.querySelectorAll(".pb_draggable_item img")
|
47
|
-
img.setAttribute("draggable", "false");
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
47
|
+
this.element.querySelectorAll(".pb_draggable_item img")
|
48
|
+
.forEach(img => img.setAttribute("draggable", "false"));
|
49
|
+
|
50
|
+
this.element.querySelectorAll(".pb_draggable_item")
|
51
|
+
.forEach(item => {
|
52
|
+
item.addEventListener("dragstart", this.handleDragStart.bind(this));
|
53
|
+
item.addEventListener("dragend", this.handleDragEnd.bind(this));
|
54
|
+
item.addEventListener("dragenter", this.handleDragEnter.bind(this));
|
55
|
+
});
|
55
56
|
|
56
|
-
containers.forEach(
|
57
|
-
|
58
|
-
|
57
|
+
containers.forEach(c => {
|
58
|
+
c.addEventListener("dragover", this.handleDragOver.bind(this));
|
59
|
+
c.addEventListener("drop", this.handleDrop.bind(this));
|
59
60
|
});
|
60
61
|
}
|
61
62
|
|
63
|
+
/* ---------------- DRAG START ---------------- */
|
62
64
|
handleDragStart(event) {
|
63
65
|
// Needed to prevent images within draggable items from being independently draggable
|
64
66
|
// Needed if using Image kit in draggable items
|
65
|
-
if (event.target.tagName.toLowerCase() ===
|
67
|
+
if (event.target.tagName.toLowerCase() === "img") {
|
66
68
|
event.preventDefault();
|
67
69
|
return;
|
68
70
|
}
|
69
71
|
|
70
|
-
const container
|
71
|
-
this.draggedItem
|
72
|
+
const container = event.target.closest(DRAGGABLE_CONTAINER);
|
73
|
+
this.draggedItem = event.target;
|
72
74
|
this.draggedItemId = event.target.id;
|
75
|
+
this.dragZoneType = this.element.dataset.dropZoneType || "";
|
76
|
+
this.dragZoneColor = this.element.dataset.dropZoneColor || "";
|
73
77
|
|
74
78
|
this.setState({
|
75
|
-
dragData:
|
76
|
-
isDragging: this.draggedItemId
|
79
|
+
dragData: { id: this.draggedItemId, initialGroup: container.id },
|
80
|
+
isDragging: this.draggedItemId,
|
77
81
|
});
|
78
82
|
|
79
|
-
|
83
|
+
this.draggedItem.classList.add(
|
84
|
+
"is_dragging",
|
85
|
+
`drop_zone_${this.dragZoneType}`,
|
86
|
+
`drop_zone_color_${this.dragZoneColor}`,
|
87
|
+
);
|
88
|
+
|
80
89
|
if (event.dataTransfer) {
|
81
|
-
event.dataTransfer.effectAllowed =
|
82
|
-
event.dataTransfer.setData(
|
90
|
+
event.dataTransfer.effectAllowed = "move";
|
91
|
+
event.dataTransfer.setData("text/plain", this.draggedItemId);
|
92
|
+
|
93
|
+
/* ---------- custom ghost clone (shadow + outline only) ---------- */
|
94
|
+
if (NEEDS_CLONE.includes(this.dragZoneType)) {
|
95
|
+
const ghost = this.draggedItem.cloneNode(true);
|
96
|
+
ghost.classList.remove(
|
97
|
+
"is_dragging",
|
98
|
+
`drop_zone_${this.dragZoneType}`,
|
99
|
+
`drop_zone_color_${this.dragZoneColor}`,
|
100
|
+
);
|
101
|
+
const { width, height } = this.draggedItem.getBoundingClientRect();
|
102
|
+
Object.assign(ghost.style, {
|
103
|
+
border: "none",
|
104
|
+
width: `${width}px`,
|
105
|
+
height: `${height}px`,
|
106
|
+
position: "absolute",
|
107
|
+
top: "-9999px",
|
108
|
+
left: "-9999px",
|
109
|
+
boxSizing: "border-box",
|
110
|
+
zIndex: "9999",
|
111
|
+
});
|
112
|
+
document.body.appendChild(ghost);
|
113
|
+
this.dragGhost = ghost;
|
114
|
+
event.dataTransfer.setDragImage(ghost, width / 2, height / 2);
|
115
|
+
}
|
116
|
+
/* ---------------------------------------------------------------- */
|
83
117
|
}
|
84
118
|
|
85
|
-
|
86
|
-
event.target.style.opacity = '0.5';
|
87
|
-
}, 0);
|
119
|
+
requestAnimationFrame(() => (event.target.style.opacity = "0.5"));
|
88
120
|
}
|
89
121
|
|
122
|
+
/* ---------------- DRAG ENTER ---------------- */
|
90
123
|
handleDragEnter(event) {
|
91
124
|
if (!this.draggedItem || event.target === this.draggedItem) return;
|
92
|
-
|
93
|
-
|
94
|
-
this.
|
95
|
-
} else {
|
96
|
-
this.handleSingleContainerDragEnter(event);
|
97
|
-
}
|
125
|
+
this.hasMultipleContainers
|
126
|
+
? this.handleMultiContainerDragEnter(event)
|
127
|
+
: this.handleSingleContainerDragEnter(event);
|
98
128
|
}
|
99
129
|
|
100
130
|
handleSingleContainerDragEnter(event) {
|
101
|
-
const targetItem = event.target.closest(
|
131
|
+
const targetItem = event.target.closest(".pb_draggable_item");
|
132
|
+
// If we're entering a container directly or there's no target item
|
102
133
|
if (!targetItem) return;
|
103
134
|
|
104
135
|
const container = targetItem.parentNode;
|
105
|
-
const items
|
136
|
+
const items = Array.from(container.children);
|
137
|
+
const fromIdx = items.indexOf(this.draggedItem);
|
138
|
+
const toIdx = items.indexOf(targetItem);
|
106
139
|
|
107
|
-
|
108
|
-
const targetIndex = items.indexOf(targetItem);
|
109
|
-
|
110
|
-
if (draggedIndex > targetIndex) {
|
140
|
+
if (fromIdx > toIdx) {
|
111
141
|
container.insertBefore(this.draggedItem, targetItem);
|
112
142
|
} else {
|
113
143
|
container.insertBefore(this.draggedItem, targetItem.nextSibling);
|
@@ -116,146 +146,113 @@ export default class PbDraggable extends PbEnhancedElement {
|
|
116
146
|
|
117
147
|
handleMultiContainerDragEnter(event) {
|
118
148
|
const targetContainer = event.target.closest(DRAGGABLE_CONTAINER);
|
119
|
-
const targetItem
|
120
|
-
|
149
|
+
const targetItem = event.target.closest(".pb_draggable_item");
|
121
150
|
if (!targetContainer) return;
|
122
151
|
|
123
|
-
// If we're entering a container directly or there's no target item
|
124
152
|
if (!targetItem) {
|
125
|
-
const
|
126
|
-
|
127
|
-
targetContainer.insertBefore(this.draggedItem,
|
128
|
-
|
129
|
-
targetContainer.appendChild(this.draggedItem);
|
130
|
-
}
|
153
|
+
const last = targetContainer.querySelector(".pb_draggable_item:last-child");
|
154
|
+
last
|
155
|
+
? targetContainer.insertBefore(this.draggedItem, last.nextSibling)
|
156
|
+
: targetContainer.appendChild(this.draggedItem);
|
131
157
|
return;
|
132
158
|
}
|
133
159
|
|
134
|
-
const
|
135
|
-
|
136
|
-
|
137
|
-
const newItems = [...items].map(item => ({
|
138
|
-
id: item.id,
|
139
|
-
container: container.id
|
140
|
-
}));
|
141
|
-
|
142
|
-
this.setState({ items: newItems });
|
160
|
+
const items = Array.from(targetContainer.children);
|
161
|
+
this.setState({ items: items.map(i => ({ id: i.id, container: targetContainer.id })) });
|
143
162
|
|
144
|
-
const
|
145
|
-
|
163
|
+
const midY = targetItem.getBoundingClientRect().top +
|
164
|
+
targetItem.getBoundingClientRect().height / 2;
|
146
165
|
|
147
|
-
if (event.clientY <
|
148
|
-
|
166
|
+
if (event.clientY < midY) {
|
167
|
+
targetContainer.insertBefore(this.draggedItem, targetItem);
|
149
168
|
} else {
|
150
|
-
|
169
|
+
targetContainer.insertBefore(this.draggedItem, targetItem.nextSibling);
|
151
170
|
}
|
152
171
|
}
|
153
172
|
|
173
|
+
/* ---------------- DRAG OVER ---------------- */
|
154
174
|
handleDragOver(event) {
|
155
175
|
event.preventDefault();
|
156
176
|
event.stopPropagation();
|
157
|
-
|
158
|
-
|
159
|
-
this.
|
160
|
-
} else {
|
161
|
-
this.handleSingleContainerDragOver(event);
|
162
|
-
}
|
177
|
+
this.hasMultipleContainers
|
178
|
+
? this.handleMultiContainerDragOver(event)
|
179
|
+
: this.handleSingleContainerDragOver(event);
|
163
180
|
}
|
164
181
|
|
165
182
|
handleSingleContainerDragOver(event) {
|
166
183
|
const container = event.target.closest(DRAGGABLE_CONTAINER);
|
167
|
-
if (container)
|
168
|
-
container.classList.add("active_container");
|
169
|
-
}
|
184
|
+
if (container) container.classList.add("active_container");
|
170
185
|
}
|
171
186
|
|
172
187
|
handleMultiContainerDragOver(event) {
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
}
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
const lastItem = container.querySelector('.pb_draggable_item:last-child');
|
186
|
-
if (!lastItem || (lastItem && event.clientY > lastItem.getBoundingClientRect().bottom)) {
|
187
|
-
if (this.draggedItem && this.draggedItem.parentNode !== container) {
|
188
|
-
container.appendChild(this.draggedItem);
|
189
|
-
}
|
188
|
+
const container = event.target.matches(DRAGGABLE_CONTAINER)
|
189
|
+
? event.target
|
190
|
+
: event.target.closest(DRAGGABLE_CONTAINER);
|
191
|
+
if (!container) return;
|
192
|
+
|
193
|
+
this.setState({ activeContainer: container.id });
|
194
|
+
container.classList.add("active_container");
|
195
|
+
|
196
|
+
const last = container.querySelector(".pb_draggable_item:last-child");
|
197
|
+
if (!last || event.clientY > last.getBoundingClientRect().bottom) {
|
198
|
+
if (this.draggedItem && this.draggedItem.parentNode !== container) {
|
199
|
+
container.appendChild(this.draggedItem);
|
190
200
|
}
|
191
201
|
}
|
192
202
|
}
|
193
203
|
|
204
|
+
/* ---------------- DROP ---------------- */
|
194
205
|
handleDrop(event) {
|
195
206
|
event.preventDefault();
|
196
207
|
event.stopPropagation();
|
197
208
|
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
} else {
|
202
|
-
container = event.target.closest(DRAGGABLE_CONTAINER);
|
203
|
-
}
|
204
|
-
|
209
|
+
const container = event.target.matches(DRAGGABLE_CONTAINER)
|
210
|
+
? event.target
|
211
|
+
: event.target.closest(DRAGGABLE_CONTAINER);
|
205
212
|
if (!container || !this.draggedItem) return;
|
206
213
|
|
207
214
|
container.classList.remove("active_container");
|
208
|
-
this.draggedItem.style.opacity =
|
215
|
+
this.draggedItem.style.opacity = "1";
|
209
216
|
|
210
217
|
// Handle empty containers
|
211
|
-
if (this.hasMultipleContainers && !container.querySelector(
|
218
|
+
if (this.hasMultipleContainers && !container.querySelector(".pb_draggable_item")) {
|
212
219
|
container.appendChild(this.draggedItem);
|
213
220
|
}
|
214
221
|
|
215
222
|
// Updated order of items as an array of item IDs
|
216
|
-
const reorderedItems = Array.from(
|
217
|
-
|
218
|
-
).map(item => ({
|
219
|
-
id: item.id,
|
220
|
-
container: item.closest(DRAGGABLE_CONTAINER).id
|
221
|
-
}));
|
222
|
-
|
223
|
-
// Store reordered items in a data attribute on the container
|
224
|
-
container.setAttribute("data-reordered-items", JSON.stringify(reorderedItems));
|
225
|
-
|
226
|
-
const customEvent = new CustomEvent('pb-draggable-reorder', {
|
227
|
-
detail: {
|
228
|
-
reorderedItems,
|
229
|
-
containerId: container.id,
|
230
|
-
}
|
231
|
-
});
|
232
|
-
|
233
|
-
this.element.dispatchEvent(customEvent);
|
223
|
+
const reorderedItems = Array.from(this.element.querySelectorAll(".pb_draggable_item"))
|
224
|
+
.map(i => ({ id: i.id, container: i.closest(DRAGGABLE_CONTAINER).id }));
|
234
225
|
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
});
|
226
|
+
container.dataset.reorderedItems = JSON.stringify(reorderedItems);
|
227
|
+
this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder", {
|
228
|
+
detail: { reorderedItems, containerId: container.id },
|
229
|
+
}));
|
240
230
|
|
241
|
-
this.
|
231
|
+
this.setState({ items: reorderedItems, isDragging: "", activeContainer: "" });
|
232
|
+
this.draggedItem = null;
|
242
233
|
this.draggedItemId = null;
|
243
234
|
}
|
244
235
|
|
236
|
+
/* ---------------- DRAG END ---------------- */
|
245
237
|
handleDragEnd(event) {
|
246
|
-
event.target.classList.remove(
|
247
|
-
|
238
|
+
event.target.classList.remove(
|
239
|
+
"is_dragging",
|
240
|
+
`drop_zone_${this.dragZoneType}`,
|
241
|
+
`drop_zone_color_${this.dragZoneColor}`,
|
242
|
+
);
|
243
|
+
event.target.style.opacity = "1";
|
244
|
+
|
245
|
+
if (this.dragGhost) {
|
246
|
+
document.body.removeChild(this.dragGhost);
|
247
|
+
this.dragGhost = null;
|
248
|
+
}
|
248
249
|
|
249
|
-
this.setState({
|
250
|
-
isDragging: "",
|
251
|
-
activeContainer: ""
|
252
|
-
});
|
250
|
+
this.setState({ isDragging: "", activeContainer: "" });
|
253
251
|
|
254
|
-
this.
|
255
|
-
|
252
|
+
this.element.querySelectorAll(DRAGGABLE_CONTAINER)
|
253
|
+
.forEach(c => c.classList.remove("active_container"));
|
256
254
|
|
257
|
-
this.
|
258
|
-
|
259
|
-
});
|
255
|
+
this.draggedItem = null;
|
256
|
+
this.draggedItemId = null;
|
260
257
|
}
|
261
258
|
}
|
@@ -0,0 +1 @@
|
|
1
|
+
You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.
|
@@ -82,8 +82,8 @@ const lineGraphTheme = {
|
|
82
82
|
},
|
83
83
|
},
|
84
84
|
yAxis: {
|
85
|
-
alternateGridColor: undefined,
|
86
|
-
minorTickInterval: null,
|
85
|
+
alternateGridColor: undefined as string | undefined,
|
86
|
+
minorTickInterval: null as number | null,
|
87
87
|
gridLineColor: colors.border_light,
|
88
88
|
minorGridLineColor: colors.border_light,
|
89
89
|
lineWidth: 0,
|
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{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-B2aSh06s.js";import{I as INPUTMASKS}from"./chunks/_typeahead-CZD3oEni.js";import"./chunks/pb_form_validation-B9ZIP6_x.js";import"./chunks/lazysizes-B7xYodB-.js";import"./playbook-rails-react-bindings.js";import"react";import"react/jsx-runtime";import"react-dom";import"react-trix";import"trix";import"react-is";import"webpacker-react";class PbTextInput extends PbEnhancedElement{static get selector(){return'[data-pb-input-mask="true"]'}connect(){this.handleInput=this.handleInput.bind(this);this.element.addEventListener("input",this.handleInput);this.handleInput()}disconnect(){this.element.removeEventListener("input",this.handleInput)}handleInput(){var _a;const maskType=this.element.getAttribute("mask");const cursorPosition=this.element.selectionStart;const rawValue=this.element.value;let formattedValue=rawValue;const maskKey={currency:"currency",ssn:"ssn",postal_code:"postalCode",zip_code:"zipCode",credit_card:"creditCard",cvv:"cvv"}[maskType];if(maskKey&&INPUTMASKS[maskKey]){formattedValue=INPUTMASKS[maskKey].format(rawValue)}const sanitizedInput=(_a=this.element.closest(".text_input_wrapper"))==null?void 0:_a.querySelector('[data="sanitized-pb-input"]');if(sanitizedInput){switch(maskType){case"ssn":sanitizedInput.value=sanitizeSSN(formattedValue);break;case"currency":sanitizedInput.value=sanitizeCurrency(formattedValue);break;case"credit_card":sanitizedInput.value=sanitizeCreditCard(formattedValue);break;default:sanitizedInput.value=formattedValue}}this.element.value=formattedValue;setCursorPosition(this.element,cursorPosition,rawValue,formattedValue)}}function sanitizeSSN(input){return input.replace(/\D/g,"")}function sanitizeCurrency(input){return input.replace(/[$,]/g,"")}function sanitizeCreditCard(input){return input.replace(/\D/g,"")}function setCursorPosition(inputElement,cursorPosition,rawValue,formattedValue){const difference=formattedValue.length-rawValue.length;const newPosition=Math.max(0,cursorPosition+difference);requestAnimationFrame((()=>{inputElement.setSelectionRange(newPosition,newPosition)}))}function getTextFromElement(element){if(!element)return"";return element.tagName.toLowerCase()==="input"?element.value:element.innerText}function copyTextToClipboard(text){if(!text)return;navigator.clipboard.writeText(text).catch((err=>console.error("Failed to copy text:",err)))}function handleExternalControlCopyClick(element){const value=element.getAttribute("data-external-copy-value");const fromId=element.getAttribute("data-external-copy-from");if(value){copyTextToClipboard(value)}else if(fromId){const fromElement=document.querySelector(`#${fromId}`);copyTextToClipboard(getTextFromElement(fromElement))}else{console.warn("Failed to copy:",element)}}class PbCopyButton extends PbEnhancedElement{static get selector(){return".pb_copy_button_kit"}connect(){this.handleClick=this.handleClick.bind(this);this.button=this.element.querySelector("button");if(this.button){this.button.addEventListener("click",this.handleClick)}}disconnect(){if(this.button){this.button.removeEventListener("click",this.handleClick)}}handleClick(){const value=this.element.getAttribute("data-copy-value");const fromId=this.element.getAttribute("data-from");if(value){copyTextToClipboard(value)}else if(fromId){const fromElement=document.querySelector(`#${fromId}`);copyTextToClipboard(getTextFromElement(fromElement))}else{console.warn("No data-copy-value or data-from attribute found")}}}function addCopyEventListeners(){const externalCopyElements=[...document.querySelectorAll("div[data-external-copy-value]"),...document.querySelectorAll("div[data-external-copy-from]")];externalCopyElements.forEach((element=>{element.addEventListener("click",(()=>handleExternalControlCopyClick(element)))}))}class PbDrawer extends PbEnhancedElement{static get selector(){return".pb_drawer_wrapper"}connect(){this.handleToggleClick=this.handleToggleClick.bind(this);this.handleOutsideClick=this.handleOutsideClick.bind(this);this.handleResize=this.handleResize.bind(this);this._toggleTriggers=Array.from(document.querySelectorAll("[data-open-drawer]"));this._toggleTriggers.forEach((el=>{el.addEventListener("click",this.handleToggleClick)}));this._wrappers=Array.from(document.querySelectorAll(".pb_drawer_wrapper"));this._wrappers.forEach((el=>{el.addEventListener("mousedown",this.handleOutsideClick)}));this._withinElementDrawers=Array.from(document.querySelectorAll(".pb_drawer_within_element_rails[data-breakpoint]"));window.addEventListener("resize",this.handleResize);this.handleResize()}disconnect(){this._toggleTriggers.forEach((el=>{el.removeEventListener("click",this.handleToggleClick)}));this._wrappers.forEach((el=>{el.removeEventListener("mousedown",this.handleOutsideClick)}));window.removeEventListener("resize",this.handleResize)}getOverlay(wrapper){if(wrapper.id&&wrapper.id.startsWith("drawer-wrapper-")){const overlayId=wrapper.id.replace("drawer-wrapper-","drawer-overlay-");return document.getElementById(overlayId)}return wrapper.querySelector(".pb_drawer_overlay")||wrapper.querySelector(".pb_drawer_no_overlay")}handleToggleClick(event){const trigger=event.currentTarget;const drawerId=trigger.dataset.openDrawer;const dialog=document.getElementById(drawerId);if(!dialog)return;if(dialog.classList.contains("pb_drawer_within_element_rails")){if(dialog.classList.contains("open")){this.closeWithinElementDrawer(dialog);dialog.dataset.manualOpen="false"}else{this.openWithinElementDrawer(dialog);dialog.dataset.manualOpen="true"}return}const wrapperId=`drawer-wrapper-${drawerId}`;const wrapper=document.getElementById(wrapperId);if(!wrapper)return;if(wrapper!==this.element)return;if(wrapper.classList.contains("open")){this.closeDrawer(wrapper,dialog);wrapper.dataset.manualOpen="false"}else{this.openDrawer(wrapper,dialog);wrapper.dataset.manualOpen="true"}}openWithinElementDrawer(dialog){if(dialog.classList.contains("open"))return;dialog.style.maxHeight="0px";dialog.offsetHeight;dialog.classList.add("open");const trigger=document.querySelector(`[data-open-drawer="${dialog.id}"]`);const triggerHeight=trigger?trigger.offsetHeight:0;const finalHeight=dialog.scrollHeight+triggerHeight+"px";dialog.style.maxHeight=finalHeight;dialog.addEventListener("transitionend",(function handleOpenEnd(e){if(e.propertyName==="max-height"){dialog.style.maxHeight="none";dialog.removeEventListener("transitionend",handleOpenEnd)}}))}closeWithinElementDrawer(dialog){if(!dialog.classList.contains("open"))return;const currentHeight=dialog.scrollHeight;dialog.style.maxHeight=currentHeight+"px";dialog.offsetHeight;dialog.classList.remove("open");dialog.style.maxHeight="0px";dialog.addEventListener("transitionend",(function handleCloseEnd(e){if(e.propertyName==="max-height"){dialog.removeEventListener("transitionend",handleCloseEnd);dialog.style.maxHeight="0px"}}))}openDrawer(wrapper,dialog){const behavior=wrapper.dataset.behavior;const size=wrapper.dataset.size;const placement=wrapper.dataset.placement;this.handlePushOpen(behavior,size,placement);wrapper.style.display="";const overlay=this.getOverlay(wrapper);if(overlay)overlay.style.display="";wrapper.classList.add("open");dialog.classList.add("open")}closeDrawer(wrapper,dialog){const behavior=wrapper.dataset.behavior;this.handlePushClose(behavior);if(wrapper.className.includes("open"))wrapper.style.display="none";const overlay=this.getOverlay(wrapper);if(overlay&&wrapper.className.includes("open"))overlay.style.display="none";wrapper.classList.remove("open");dialog.classList.remove("open")}handleOutsideClick(event){const wrapper=event.currentTarget;const dialog=wrapper.querySelector(".pb_drawer");const overlay=this.getOverlay(wrapper);if(dialog&&dialog.classList.contains("pb_drawer_within_element_rails")){return}if(wrapper.dataset.overlayClick==="overlay_close"&&event.target===overlay){this.closeDrawer(wrapper,dialog);event.stopPropagation();return}const dialogRect=dialog.getBoundingClientRect();const clickedOutside=event.clientX<dialogRect.left||event.clientX>dialogRect.right||event.clientY<dialogRect.top||event.clientY>dialogRect.bottom;if(clickedOutside){this.closeDrawer(wrapper,dialog);event.stopPropagation()}}handleResize(){const breakpointValues={none:0,xs:575,sm:768,md:992,lg:1200,xl:1400};this._wrappers.forEach((wrapper=>{const bp=wrapper.dataset.breakpoint||"none";if(bp==="none")return;const threshold=breakpointValues[bp]||0;const dialog=wrapper.querySelector(".pb_drawer");const trigger=dialog?document.querySelector(`[data-open-drawer="${dialog.id}"]`):null;if(window.innerWidth>=threshold){if(!wrapper.classList.contains("open")){this.openDrawer(wrapper,dialog)}if(trigger)trigger.style.display="none"}else{if(trigger)trigger.style.display="";if(wrapper.classList.contains("open")&&wrapper.dataset.manualOpen!=="true"){this.closeDrawer(wrapper,dialog)}}}));this._withinElementDrawers.forEach((drawer=>{const bp=drawer.dataset.breakpoint||"none";if(bp==="none")return;const threshold=breakpointValues[bp]||0;const trigger=document.querySelector(`[data-open-drawer="${drawer.id}"]`);if(window.innerWidth>=threshold){if(!drawer.classList.contains("open")){this.openWithinElementDrawer(drawer)}if(trigger)trigger.style.display="none"}else{if(trigger)trigger.style.display="";if(drawer.classList.contains("open")&&drawer.dataset.manualOpen!=="true"){this.closeWithinElementDrawer(drawer)}}}))}handlePushOpen(behavior,size,placement){if(behavior!=="push")return;const sizeMap={xl:"365px",lg:"300px",md:"250px",sm:"200px",xs:"64px",full:"100%"};const body=document.querySelector("body");if(!body)return;if(placement==="left"){body.style.cssText=`margin-left: ${sizeMap[size]} !important; margin-right: '' !important;`}else if(placement==="right"){body.style.cssText=`margin-right: ${sizeMap[size]} !important; margin-left: '' !important;`}body.classList.add("PBDrawer__Body--open")}handlePushClose(behavior){if(behavior!=="push")return;const body=document.querySelector("body");if(!body)return;if(body.classList.contains("PBDrawer__Body--open")){body.classList.add("PBDrawer__Body--close")}body.style.cssText="";body.classList.remove("PBDrawer__Body--open")}}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'[class*="pb_fixed_confirmation_toast_kit"]'}connect(){this.self=this.element;this.autoCloseToast(this.self);if(this.self.classList.contains("remove_toast")){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)}}));this.hideCloseIcon();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)}}))}))}hideCloseIcon(){const closeIcon=this.element.querySelector(UP_ARROW_SELECTOR);closeIcon.style.display="none"}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");isVisible?this.hideElement(elements):this.showElement(elements);isVisible?this.displayDownArrow():this.displayUpArrow();const row=this.element.closest("tr");if(row){row.classList.toggle("bg-silver",!isVisible);row.classList.toggle("bg-white",isVisible)}}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.state={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};this.draggedItem=null;this.draggedItemId=null;this.hasMultipleContainers=false;document.addEventListener("DOMContentLoaded",(()=>this.bindEventListeners()))}setState(newState){this.state={...this.state,...newState};if(newState.items){const customEvent=new CustomEvent("pb-draggable-reorder",{detail:{reorderedItems:this.state.items,containerId:this.element.querySelector(DRAGGABLE_CONTAINER).id}});this.element.dispatchEvent(customEvent)}}bindEventListeners(){const containers=this.element.querySelectorAll(DRAGGABLE_CONTAINER);this.hasMultipleContainers=containers.length>1;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))}));containers.forEach((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}const container=event.target.closest(DRAGGABLE_CONTAINER);this.draggedItem=event.target;this.draggedItemId=event.target.id;this.setState({dragData:{id:this.draggedItemId,initialGroup:container.id},isDragging:this.draggedItemId});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;if(this.hasMultipleContainers){this.handleMultiContainerDragEnter(event)}else{this.handleSingleContainerDragEnter(event)}}handleSingleContainerDragEnter(event){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)}}handleMultiContainerDragEnter(event){const targetContainer=event.target.closest(DRAGGABLE_CONTAINER);const targetItem=event.target.closest(".pb_draggable_item");if(!targetContainer)return;if(!targetItem){const lastItem=targetContainer.querySelector(".pb_draggable_item:last-child");if(lastItem){targetContainer.insertBefore(this.draggedItem,lastItem.nextSibling)}else{targetContainer.appendChild(this.draggedItem)}return}const container=targetItem.parentNode;const items=Array.from(container.children);const newItems=[...items].map((item=>({id:item.id,container:container.id})));this.setState({items:newItems});const rect=targetItem.getBoundingClientRect();const middleY=rect.top+rect.height/2;if(event.clientY<middleY){container.insertBefore(this.draggedItem,targetItem)}else{container.insertBefore(this.draggedItem,targetItem.nextSibling)}}handleDragOver(event){event.preventDefault();event.stopPropagation();if(this.hasMultipleContainers){this.handleMultiContainerDragOver(event)}else{this.handleSingleContainerDragOver(event)}}handleSingleContainerDragOver(event){const container=event.target.closest(DRAGGABLE_CONTAINER);if(container){container.classList.add("active_container")}}handleMultiContainerDragOver(event){let container;if(event.target.matches(DRAGGABLE_CONTAINER)){container=event.target}else{container=event.target.closest(DRAGGABLE_CONTAINER)}if(container){this.setState({activeContainer:container.id});container.classList.add("active_container");const lastItem=container.querySelector(".pb_draggable_item:last-child");if(!lastItem||lastItem&&event.clientY>lastItem.getBoundingClientRect().bottom){if(this.draggedItem&&this.draggedItem.parentNode!==container){container.appendChild(this.draggedItem)}}}}handleDrop(event){event.preventDefault();event.stopPropagation();let container;if(event.target.matches(DRAGGABLE_CONTAINER)){container=event.target}else{container=event.target.closest(DRAGGABLE_CONTAINER)}if(!container||!this.draggedItem)return;container.classList.remove("active_container");this.draggedItem.style.opacity="1";if(this.hasMultipleContainers&&!container.querySelector(".pb_draggable_item")){container.appendChild(this.draggedItem)}const reorderedItems=Array.from(this.element.querySelectorAll(".pb_draggable_item")).map((item=>({id:item.id,container:item.closest(DRAGGABLE_CONTAINER).id})));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.setState({items:reorderedItems,isDragging:"",activeContainer:""});this.draggedItem=null;this.draggedItemId=null}handleDragEnd(event){event.target.classList.remove("is_dragging");event.target.style.opacity="1";this.setState({isDragging:"",activeContainer:""});this.draggedItem=null;this.draggedItemId=null;this.element.querySelectorAll(DRAGGABLE_CONTAINER).forEach((container=>{container.classList.remove("active_container")}))}}const OVERLAY_SELECTOR="[data-pb-overlay]";const OVERLAY_SCROLL_ELEMENT="[data-overlay-scroll-element]";const PREVIOUS_OVERLAY_CLASSNAME="[data-previous-overlay-classname]";const SUBSEQUENT_OVERLAY_CLASSNAME="[data-subsequent-overlay-classname]";class PbOverlay extends PbEnhancedElement{static get selector(){return OVERLAY_SELECTOR}get target(){return this.element.querySelector(OVERLAY_SCROLL_ELEMENT).children[0]}connect(){this.handleOverlayDynamic()}handleOverlayDynamic(){var _a,_b,_c;const isOverlayDynamic=(_a=this.element.dataset)==null?void 0:_a.overlayDynamic;if(isOverlayDynamic){const previousOverlayElement=this.element.querySelector(PREVIOUS_OVERLAY_CLASSNAME);const previousOverlayClassname=(_b=previousOverlayElement==null?void 0:previousOverlayElement.dataset)==null?void 0:_b.previousOverlayClassname;const subsequentOverlayElement=this.element.querySelector(SUBSEQUENT_OVERLAY_CLASSNAME);const subsequentOverlayClassname=(_c=subsequentOverlayElement==null?void 0:subsequentOverlayElement.dataset)==null?void 0:_c.subsequentOverlayClassname;const handleScrollChange=target=>{const{scrollLeft:scrollLeft,scrollWidth:scrollWidth,clientWidth:clientWidth}=target;const isScrollAtStart=scrollLeft===0;const isScrollAtEnd=scrollLeft+clientWidth>=scrollWidth-1;if(isScrollAtStart){previousOverlayElement.classList.remove(previousOverlayClassname)}else{previousOverlayElement.classList.add(previousOverlayClassname)}if(isScrollAtEnd){subsequentOverlayElement.classList.remove(subsequentOverlayClassname)}else{subsequentOverlayElement.classList.add(subsequentOverlayClassname)}};this.target.addEventListener("scroll",(event=>{handleScrollChange(event.target)}));handleScrollChange(this.target)}}disconnect(){var _a;if((_a=this.element.dataset)==null?void 0:_a.overlayDynamic){this.target.removeEventListener("scroll")}}}const SELECT_WRAPPER_SELECTOR="[data-pb-select]";const SELECT_VALIDATION_MESSAGE_CLASS$1=".pb_body_kit_negative";class PbSelect extends PbEnhancedElement{static get selector(){return SELECT_WRAPPER_SELECTOR}connect(){this.setValidationMessage()}setValidationMessage(){var _a;const validationMessage=(_a=this.element.dataset)==null?void 0:_a.validationMessage;if(validationMessage){const selectElement=this.element.querySelector("select");const setErrorTextContent=(text,timeout)=>{setTimeout((()=>{const errorMessageElement=this.element.querySelector(SELECT_VALIDATION_MESSAGE_CLASS$1);if(errorMessageElement){errorMessageElement.textContent=text}else{setErrorTextContent(text,100)}}),timeout)};selectElement.addEventListener("change",(e=>{if(!e.target.checkValidity()){setErrorTextContent(validationMessage,300)}}))}}}const DIALOG_WRAPPER_SELECTOR="[data-pb-dialog-wrapper]";class PbDialog extends PbEnhancedElement{constructor(){super(...arguments);__publicField(this,"handleCustomEvent",(event=>{var _a,_b,_c,_d,_e,_f;const dialogId=((_a=event.detail)==null?void 0:_a.dialogId)||((_b=this.element.querySelector("dialog"))==null?void 0:_b.id);const dialog=dialogId&&document.getElementById(dialogId);if(!dialog){console.warn(`[PbDialog] Could not find dialog with ID '${dialogId}'`);return}this.setupDialog();const action=((_c=event.detail)==null?void 0:_c.action)||"open";const knownActions=["open","close","clickConfirm","clickCancel"];if(knownActions.includes(action)){switch(action){case"open":if(!dialog.open)dialog.showModal();break;case"close":if(dialog.open)dialog.close((_d=event.detail)==null?void 0:_d.returnValue);break;case"clickConfirm":this.triggerButtonClick(dialog,event,"confirm");break;case"clickCancel":this.triggerButtonClick(dialog,event,"cancel");break}}else if(typeof((_e=event.detail)==null?void 0:_e.customAction)==="function"){event.detail.customAction({dialog:dialog,event:event})}else if((_f=window.pbDialogActions)==null?void 0:_f[action]){window.pbDialogActions[action]({dialog:dialog,event:event})}else{console.warn(`[PbDialog] Unknown action: ${action}`)}}))}static get selector(){return DIALOG_WRAPPER_SELECTOR}connect(){window.addEventListener("DOMContentLoaded",(()=>this.setupDialog()));window.addEventListener("turbo:frame-load",(()=>this.setupDialog()));const customEventTypeString=this.element.dataset.customEventType;if(customEventTypeString&&!this.element.hasAttribute("data-custom-event-handled")){this.customEventTypes=customEventTypeString.split(",").map((e=>e.trim())).filter(Boolean);this.customEventTypes.forEach((eventType=>{window.addEventListener(eventType,this.handleCustomEvent)}));this.element.setAttribute("data-custom-event-handled","true")}}disconnect(){if(this.customEventTypes&&Array.isArray(this.customEventTypes)){this.customEventTypes.forEach((eventType=>{window.removeEventListener(eventType,this.handleCustomEvent)}))}}triggerButtonClick(dialog,event,type){var _a,_b;const buttonId=((_a=event.detail)==null?void 0:_a[`${type}ButtonId`])||((_b=dialog.closest("[data-pb-dialog-wrapper]"))==null?void 0:_b.dataset[`${type}ButtonId`]);const button=buttonId?document.getElementById(buttonId):dialog.querySelector(`[data-${type}-button]`);if(button){button.click()}else{console.warn(`[PbDialog] Could not find ${type} button for dialog`)}}setupDialog(){const openTrigger=document.querySelectorAll("[data-open-dialog]");const closeTrigger=document.querySelectorAll("[data-close-dialog]");const dialogs=document.querySelectorAll(".pb_dialog_rails");const loadingButton=document.querySelector('[data-disable-with="Loading"]');if(loadingButton&&!loadingButton.dataset.listenerAttached){loadingButton.addEventListener("click",(function(){const okayLoadingButton=document.querySelector('[data-disable-with="Loading"]');const cancelButton=document.querySelector('[data-disable-cancel-with="Loading"]');let currentClass=okayLoadingButton.className;let cancelClass=cancelButton?cancelButton.className:"";let newClass=currentClass.replace("_enabled","_disabled_loading");let newCancelClass=cancelClass.replace("_enabled","_disabled");okayLoadingButton.disabled=true;if(cancelButton)cancelButton.disabled=true;okayLoadingButton.className=newClass;if(cancelButton)cancelButton.className=newCancelClass}));loadingButton.dataset.listenerAttached="true"}openTrigger.forEach((open=>{const originalClickHandler=open._openDialogClickHandler;if(originalClickHandler)open.removeEventListener("click",originalClickHandler);open._openDialogClickHandler=()=>{const openTriggerData=open.dataset.openDialog;const targetDialogOpen=document.getElementById(openTriggerData);if(targetDialogOpen&&!targetDialogOpen.open)targetDialogOpen.showModal()};open.addEventListener("click",open._openDialogClickHandler)}));closeTrigger.forEach((close=>{const originalClickHandler=close._closeDialogClickHandler;if(originalClickHandler)close.removeEventListener("click",originalClickHandler);close._closeDialogClickHandler=()=>{const closeTriggerData=close.dataset.closeDialog;const targetDialogClose=document.getElementById(closeTriggerData);if(targetDialogClose)targetDialogClose.close()};close.addEventListener("click",close._closeDialogClickHandler)}));dialogs.forEach((dialogElement=>{const originalMousedownHandler=dialogElement._outsideClickHandler;if(originalMousedownHandler)dialogElement.removeEventListener("mousedown",originalMousedownHandler);dialogElement._outsideClickHandler=event=>{const dialogParentDataset=dialogElement.parentElement.dataset;if(dialogParentDataset.overlayClick==="overlay_close")return;const dialogModal=event.target.getBoundingClientRect();const clickedOutsideDialogModal=event.clientX<dialogModal.left||event.clientX>dialogModal.right||event.clientY<dialogModal.top||event.clientY>dialogModal.bottom;if(clickedOutsideDialogModal){dialogElement.close();event.stopPropagation()}};dialogElement.addEventListener("mousedown",dialogElement._outsideClickHandler)}))}}const DATE_PICKER_WRAPPER_SELECTOR="[data-pb-date-picker]";const SELECT_VALIDATION_MESSAGE_CLASS=".pb_body_kit_negative";class PbDatePicker extends PbEnhancedElement{static get selector(){return DATE_PICKER_WRAPPER_SELECTOR}connect(){this.setValidationMessage()}setValidationMessage(){var _a;const validationMessage=(_a=this.element.dataset)==null?void 0:_a.validationMessage;const inputElement=this.element.querySelector("input");if(validationMessage){const setErrorTextContent=(text,timeout)=>{setTimeout((()=>{const errorMessageElement=this.element.querySelector(SELECT_VALIDATION_MESSAGE_CLASS);if(errorMessageElement){errorMessageElement.textContent=text}else{setErrorTextContent(text,100)}}),timeout)};inputElement.addEventListener("change",(e=>{if(!e.target.checkValidity()){setErrorTextContent(validationMessage,300)}}))}}}const MULTI_LEVEL_SELECT_SELECTOR="[data-multi_level_select_form]";class PbMultiLevelSelect extends PbEnhancedElement{static get selector(){return MULTI_LEVEL_SELECT_SELECTOR}get target(){return this.element.querySelector(".pb_body_kit_negative")}connect(){this.addEventListeners();this.observeHiddenInputs();this.observeRogueErrorInsideInnerContainer()}addEventListeners(){const inputElement=this.element.querySelector("input");inputElement.addEventListener("invalid",(()=>{this.handleErrorLabel(300)}));inputElement.addEventListener("blur",(()=>{this.justBlurred=true;setTimeout((()=>{this.justBlurred=false}),300)}))}handleErrorLabel(delay){setTimeout((()=>{const errorLabelElement=this.target;const wrapper=this.element.querySelector(".wrapper");if(errorLabelElement){errorLabelElement.remove();if(wrapper){if(wrapper.querySelector(".pb_body_kit_negative")){wrapper.querySelector(".pb_body_kit_negative").remove()}wrapper.appendChild(errorLabelElement)}this.element.classList.add("error")}else{this.handleErrorLabel(100)}}),delay)}observeHiddenInputs(){const container=this.element.querySelector(".input_inner_container");if(!container)return;this.mutationObserver=new MutationObserver((()=>{const hiddenInputs=container.querySelectorAll('input[type="hidden"]');if(hiddenInputs.length>0){this.clearError()}}));this.mutationObserver.observe(container,{childList:true})}observeRogueErrorInsideInnerContainer(){const container=this.element.querySelector(".input_inner_container");this.rogueErrorObserver=new MutationObserver((mutations=>{for(const mutation of mutations){for(const node of mutation.addedNodes){if(node.nodeType===Node.ELEMENT_NODE&&node.classList.contains("pb_body_kit_negative")){if(this.justBlurred){node.remove()}}}}}));this.rogueErrorObserver.observe(container,{childList:true,subtree:true})}clearError(e){const errorLabelElement=this.target;if(errorLabelElement){errorLabelElement.remove();this.element.classList.remove("error");this.element.querySelector("input").value=e.detail.value}}}PbTextInput.start();PbCopyButton.start();addCopyEventListeners();PbDrawer.start();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();PbOverlay.start();PbSelect.start();PbDialog.start();PbDatePicker.start();PbMultiLevelSelect.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{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-B2aSh06s.js";import{I as INPUTMASKS}from"./chunks/_typeahead-CZD3oEni.js";import"./chunks/pb_form_validation-B9ZIP6_x.js";import"./chunks/lazysizes-B7xYodB-.js";import"./playbook-rails-react-bindings.js";import"react";import"react/jsx-runtime";import"react-dom";import"react-trix";import"trix";import"react-is";import"webpacker-react";class PbTextInput extends PbEnhancedElement{static get selector(){return'[data-pb-input-mask="true"]'}connect(){this.handleInput=this.handleInput.bind(this);this.element.addEventListener("input",this.handleInput);this.handleInput()}disconnect(){this.element.removeEventListener("input",this.handleInput)}handleInput(){var _a;const maskType=this.element.getAttribute("mask");const cursorPosition=this.element.selectionStart;const rawValue=this.element.value;let formattedValue=rawValue;const maskKey={currency:"currency",ssn:"ssn",postal_code:"postalCode",zip_code:"zipCode",credit_card:"creditCard",cvv:"cvv"}[maskType];if(maskKey&&INPUTMASKS[maskKey]){formattedValue=INPUTMASKS[maskKey].format(rawValue)}const sanitizedInput=(_a=this.element.closest(".text_input_wrapper"))==null?void 0:_a.querySelector('[data="sanitized-pb-input"]');if(sanitizedInput){switch(maskType){case"ssn":sanitizedInput.value=sanitizeSSN(formattedValue);break;case"currency":sanitizedInput.value=sanitizeCurrency(formattedValue);break;case"credit_card":sanitizedInput.value=sanitizeCreditCard(formattedValue);break;default:sanitizedInput.value=formattedValue}}this.element.value=formattedValue;setCursorPosition(this.element,cursorPosition,rawValue,formattedValue)}}function sanitizeSSN(input){return input.replace(/\D/g,"")}function sanitizeCurrency(input){return input.replace(/[$,]/g,"")}function sanitizeCreditCard(input){return input.replace(/\D/g,"")}function setCursorPosition(inputElement,cursorPosition,rawValue,formattedValue){const difference=formattedValue.length-rawValue.length;const newPosition=Math.max(0,cursorPosition+difference);requestAnimationFrame((()=>{inputElement.setSelectionRange(newPosition,newPosition)}))}function getTextFromElement(element){if(!element)return"";return element.tagName.toLowerCase()==="input"?element.value:element.innerText}function copyTextToClipboard(text){if(!text)return;navigator.clipboard.writeText(text).catch((err=>console.error("Failed to copy text:",err)))}function handleExternalControlCopyClick(element){const value=element.getAttribute("data-external-copy-value");const fromId=element.getAttribute("data-external-copy-from");if(value){copyTextToClipboard(value)}else if(fromId){const fromElement=document.querySelector(`#${fromId}`);copyTextToClipboard(getTextFromElement(fromElement))}else{console.warn("Failed to copy:",element)}}class PbCopyButton extends PbEnhancedElement{static get selector(){return".pb_copy_button_kit"}connect(){this.handleClick=this.handleClick.bind(this);this.button=this.element.querySelector("button");if(this.button){this.button.addEventListener("click",this.handleClick)}}disconnect(){if(this.button){this.button.removeEventListener("click",this.handleClick)}}handleClick(){const value=this.element.getAttribute("data-copy-value");const fromId=this.element.getAttribute("data-from");if(value){copyTextToClipboard(value)}else if(fromId){const fromElement=document.querySelector(`#${fromId}`);copyTextToClipboard(getTextFromElement(fromElement))}else{console.warn("No data-copy-value or data-from attribute found")}}}function addCopyEventListeners(){const externalCopyElements=[...document.querySelectorAll("div[data-external-copy-value]"),...document.querySelectorAll("div[data-external-copy-from]")];externalCopyElements.forEach((element=>{element.addEventListener("click",(()=>handleExternalControlCopyClick(element)))}))}class PbDrawer extends PbEnhancedElement{static get selector(){return".pb_drawer_wrapper"}connect(){this.handleToggleClick=this.handleToggleClick.bind(this);this.handleOutsideClick=this.handleOutsideClick.bind(this);this.handleResize=this.handleResize.bind(this);this._toggleTriggers=Array.from(document.querySelectorAll("[data-open-drawer]"));this._toggleTriggers.forEach((el=>{el.addEventListener("click",this.handleToggleClick)}));this._wrappers=Array.from(document.querySelectorAll(".pb_drawer_wrapper"));this._wrappers.forEach((el=>{el.addEventListener("mousedown",this.handleOutsideClick)}));this._withinElementDrawers=Array.from(document.querySelectorAll(".pb_drawer_within_element_rails[data-breakpoint]"));window.addEventListener("resize",this.handleResize);this.handleResize()}disconnect(){this._toggleTriggers.forEach((el=>{el.removeEventListener("click",this.handleToggleClick)}));this._wrappers.forEach((el=>{el.removeEventListener("mousedown",this.handleOutsideClick)}));window.removeEventListener("resize",this.handleResize)}getOverlay(wrapper){if(wrapper.id&&wrapper.id.startsWith("drawer-wrapper-")){const overlayId=wrapper.id.replace("drawer-wrapper-","drawer-overlay-");return document.getElementById(overlayId)}return wrapper.querySelector(".pb_drawer_overlay")||wrapper.querySelector(".pb_drawer_no_overlay")}handleToggleClick(event){const trigger=event.currentTarget;const drawerId=trigger.dataset.openDrawer;const dialog=document.getElementById(drawerId);if(!dialog)return;if(dialog.classList.contains("pb_drawer_within_element_rails")){if(dialog.classList.contains("open")){this.closeWithinElementDrawer(dialog);dialog.dataset.manualOpen="false"}else{this.openWithinElementDrawer(dialog);dialog.dataset.manualOpen="true"}return}const wrapperId=`drawer-wrapper-${drawerId}`;const wrapper=document.getElementById(wrapperId);if(!wrapper)return;if(wrapper!==this.element)return;if(wrapper.classList.contains("open")){this.closeDrawer(wrapper,dialog);wrapper.dataset.manualOpen="false"}else{this.openDrawer(wrapper,dialog);wrapper.dataset.manualOpen="true"}}openWithinElementDrawer(dialog){if(dialog.classList.contains("open"))return;dialog.style.maxHeight="0px";dialog.offsetHeight;dialog.classList.add("open");const trigger=document.querySelector(`[data-open-drawer="${dialog.id}"]`);const triggerHeight=trigger?trigger.offsetHeight:0;const finalHeight=dialog.scrollHeight+triggerHeight+"px";dialog.style.maxHeight=finalHeight;dialog.addEventListener("transitionend",(function handleOpenEnd(e){if(e.propertyName==="max-height"){dialog.style.maxHeight="none";dialog.removeEventListener("transitionend",handleOpenEnd)}}))}closeWithinElementDrawer(dialog){if(!dialog.classList.contains("open"))return;const currentHeight=dialog.scrollHeight;dialog.style.maxHeight=currentHeight+"px";dialog.offsetHeight;dialog.classList.remove("open");dialog.style.maxHeight="0px";dialog.addEventListener("transitionend",(function handleCloseEnd(e){if(e.propertyName==="max-height"){dialog.removeEventListener("transitionend",handleCloseEnd);dialog.style.maxHeight="0px"}}))}openDrawer(wrapper,dialog){const behavior=wrapper.dataset.behavior;const size=wrapper.dataset.size;const placement=wrapper.dataset.placement;this.handlePushOpen(behavior,size,placement);wrapper.style.display="";const overlay=this.getOverlay(wrapper);if(overlay)overlay.style.display="";wrapper.classList.add("open");dialog.classList.add("open")}closeDrawer(wrapper,dialog){const behavior=wrapper.dataset.behavior;this.handlePushClose(behavior);if(wrapper.className.includes("open"))wrapper.style.display="none";const overlay=this.getOverlay(wrapper);if(overlay&&wrapper.className.includes("open"))overlay.style.display="none";wrapper.classList.remove("open");dialog.classList.remove("open")}handleOutsideClick(event){const wrapper=event.currentTarget;const dialog=wrapper.querySelector(".pb_drawer");const overlay=this.getOverlay(wrapper);if(dialog&&dialog.classList.contains("pb_drawer_within_element_rails")){return}if(wrapper.dataset.overlayClick==="overlay_close"&&event.target===overlay){this.closeDrawer(wrapper,dialog);event.stopPropagation();return}const dialogRect=dialog.getBoundingClientRect();const clickedOutside=event.clientX<dialogRect.left||event.clientX>dialogRect.right||event.clientY<dialogRect.top||event.clientY>dialogRect.bottom;if(clickedOutside){this.closeDrawer(wrapper,dialog);event.stopPropagation()}}handleResize(){const breakpointValues={none:0,xs:575,sm:768,md:992,lg:1200,xl:1400};this._wrappers.forEach((wrapper=>{const bp=wrapper.dataset.breakpoint||"none";if(bp==="none")return;const threshold=breakpointValues[bp]||0;const dialog=wrapper.querySelector(".pb_drawer");const trigger=dialog?document.querySelector(`[data-open-drawer="${dialog.id}"]`):null;if(window.innerWidth>=threshold){if(!wrapper.classList.contains("open")){this.openDrawer(wrapper,dialog)}if(trigger)trigger.style.display="none"}else{if(trigger)trigger.style.display="";if(wrapper.classList.contains("open")&&wrapper.dataset.manualOpen!=="true"){this.closeDrawer(wrapper,dialog)}}}));this._withinElementDrawers.forEach((drawer=>{const bp=drawer.dataset.breakpoint||"none";if(bp==="none")return;const threshold=breakpointValues[bp]||0;const trigger=document.querySelector(`[data-open-drawer="${drawer.id}"]`);if(window.innerWidth>=threshold){if(!drawer.classList.contains("open")){this.openWithinElementDrawer(drawer)}if(trigger)trigger.style.display="none"}else{if(trigger)trigger.style.display="";if(drawer.classList.contains("open")&&drawer.dataset.manualOpen!=="true"){this.closeWithinElementDrawer(drawer)}}}))}handlePushOpen(behavior,size,placement){if(behavior!=="push")return;const sizeMap={xl:"365px",lg:"300px",md:"250px",sm:"200px",xs:"64px",full:"100%"};const body=document.querySelector("body");if(!body)return;if(placement==="left"){body.style.cssText=`margin-left: ${sizeMap[size]} !important; margin-right: '' !important;`}else if(placement==="right"){body.style.cssText=`margin-right: ${sizeMap[size]} !important; margin-left: '' !important;`}body.classList.add("PBDrawer__Body--open")}handlePushClose(behavior){if(behavior!=="push")return;const body=document.querySelector("body");if(!body)return;if(body.classList.contains("PBDrawer__Body--open")){body.classList.add("PBDrawer__Body--close")}body.style.cssText="";body.classList.remove("PBDrawer__Body--open")}}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'[class*="pb_fixed_confirmation_toast_kit"]'}connect(){this.self=this.element;this.autoCloseToast(this.self);if(this.self.classList.contains("remove_toast")){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)}}));this.hideCloseIcon();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)}}))}))}hideCloseIcon(){const closeIcon=this.element.querySelector(UP_ARROW_SELECTOR);closeIcon.style.display="none"}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");isVisible?this.hideElement(elements):this.showElement(elements);isVisible?this.displayDownArrow():this.displayUpArrow();const row=this.element.closest("tr");if(row){row.classList.toggle("bg-silver",!isVisible);row.classList.toggle("bg-white",isVisible)}}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";const NEEDS_CLONE=["shadow","outline"];class PbDraggable extends PbEnhancedElement{static get selector(){return DRAGGABLE_SELECTOR}connect(){this.state={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};this.draggedItem=null;this.draggedItemId=null;this.dragGhost=null;this.hasMultipleContainers=false;this.dragZoneType="";this.dragZoneColor="";document.addEventListener("DOMContentLoaded",(()=>this.bindEventListeners()))}setState(newState){this.state={...this.state,...newState};if(newState.items){this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder",{detail:{reorderedItems:this.state.items,containerId:this.element.querySelector(DRAGGABLE_CONTAINER).id}}))}}bindEventListeners(){const containers=this.element.querySelectorAll(DRAGGABLE_CONTAINER);this.hasMultipleContainers=containers.length>1;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))}));containers.forEach((c=>{c.addEventListener("dragover",this.handleDragOver.bind(this));c.addEventListener("drop",this.handleDrop.bind(this))}))}handleDragStart(event){if(event.target.tagName.toLowerCase()==="img"){event.preventDefault();return}const container=event.target.closest(DRAGGABLE_CONTAINER);this.draggedItem=event.target;this.draggedItemId=event.target.id;this.dragZoneType=this.element.dataset.dropZoneType||"";this.dragZoneColor=this.element.dataset.dropZoneColor||"";this.setState({dragData:{id:this.draggedItemId,initialGroup:container.id},isDragging:this.draggedItemId});this.draggedItem.classList.add("is_dragging",`drop_zone_${this.dragZoneType}`,`drop_zone_color_${this.dragZoneColor}`);if(event.dataTransfer){event.dataTransfer.effectAllowed="move";event.dataTransfer.setData("text/plain",this.draggedItemId);if(NEEDS_CLONE.includes(this.dragZoneType)){const ghost=this.draggedItem.cloneNode(true);ghost.classList.remove("is_dragging",`drop_zone_${this.dragZoneType}`,`drop_zone_color_${this.dragZoneColor}`);const{width:width,height:height}=this.draggedItem.getBoundingClientRect();Object.assign(ghost.style,{border:"none",width:`${width}px`,height:`${height}px`,position:"absolute",top:"-9999px",left:"-9999px",boxSizing:"border-box",zIndex:"9999"});document.body.appendChild(ghost);this.dragGhost=ghost;event.dataTransfer.setDragImage(ghost,width/2,height/2)}}requestAnimationFrame((()=>event.target.style.opacity="0.5"))}handleDragEnter(event){if(!this.draggedItem||event.target===this.draggedItem)return;this.hasMultipleContainers?this.handleMultiContainerDragEnter(event):this.handleSingleContainerDragEnter(event)}handleSingleContainerDragEnter(event){const targetItem=event.target.closest(".pb_draggable_item");if(!targetItem)return;const container=targetItem.parentNode;const items=Array.from(container.children);const fromIdx=items.indexOf(this.draggedItem);const toIdx=items.indexOf(targetItem);if(fromIdx>toIdx){container.insertBefore(this.draggedItem,targetItem)}else{container.insertBefore(this.draggedItem,targetItem.nextSibling)}}handleMultiContainerDragEnter(event){const targetContainer=event.target.closest(DRAGGABLE_CONTAINER);const targetItem=event.target.closest(".pb_draggable_item");if(!targetContainer)return;if(!targetItem){const last=targetContainer.querySelector(".pb_draggable_item:last-child");last?targetContainer.insertBefore(this.draggedItem,last.nextSibling):targetContainer.appendChild(this.draggedItem);return}const items=Array.from(targetContainer.children);this.setState({items:items.map((i=>({id:i.id,container:targetContainer.id})))});const midY=targetItem.getBoundingClientRect().top+targetItem.getBoundingClientRect().height/2;if(event.clientY<midY){targetContainer.insertBefore(this.draggedItem,targetItem)}else{targetContainer.insertBefore(this.draggedItem,targetItem.nextSibling)}}handleDragOver(event){event.preventDefault();event.stopPropagation();this.hasMultipleContainers?this.handleMultiContainerDragOver(event):this.handleSingleContainerDragOver(event)}handleSingleContainerDragOver(event){const container=event.target.closest(DRAGGABLE_CONTAINER);if(container)container.classList.add("active_container")}handleMultiContainerDragOver(event){const container=event.target.matches(DRAGGABLE_CONTAINER)?event.target:event.target.closest(DRAGGABLE_CONTAINER);if(!container)return;this.setState({activeContainer:container.id});container.classList.add("active_container");const last=container.querySelector(".pb_draggable_item:last-child");if(!last||event.clientY>last.getBoundingClientRect().bottom){if(this.draggedItem&&this.draggedItem.parentNode!==container){container.appendChild(this.draggedItem)}}}handleDrop(event){event.preventDefault();event.stopPropagation();const container=event.target.matches(DRAGGABLE_CONTAINER)?event.target:event.target.closest(DRAGGABLE_CONTAINER);if(!container||!this.draggedItem)return;container.classList.remove("active_container");this.draggedItem.style.opacity="1";if(this.hasMultipleContainers&&!container.querySelector(".pb_draggable_item")){container.appendChild(this.draggedItem)}const reorderedItems=Array.from(this.element.querySelectorAll(".pb_draggable_item")).map((i=>({id:i.id,container:i.closest(DRAGGABLE_CONTAINER).id})));container.dataset.reorderedItems=JSON.stringify(reorderedItems);this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder",{detail:{reorderedItems:reorderedItems,containerId:container.id}}));this.setState({items:reorderedItems,isDragging:"",activeContainer:""});this.draggedItem=null;this.draggedItemId=null}handleDragEnd(event){event.target.classList.remove("is_dragging",`drop_zone_${this.dragZoneType}`,`drop_zone_color_${this.dragZoneColor}`);event.target.style.opacity="1";if(this.dragGhost){document.body.removeChild(this.dragGhost);this.dragGhost=null}this.setState({isDragging:"",activeContainer:""});this.element.querySelectorAll(DRAGGABLE_CONTAINER).forEach((c=>c.classList.remove("active_container")));this.draggedItem=null;this.draggedItemId=null}}const OVERLAY_SELECTOR="[data-pb-overlay]";const OVERLAY_SCROLL_ELEMENT="[data-overlay-scroll-element]";const PREVIOUS_OVERLAY_CLASSNAME="[data-previous-overlay-classname]";const SUBSEQUENT_OVERLAY_CLASSNAME="[data-subsequent-overlay-classname]";class PbOverlay extends PbEnhancedElement{static get selector(){return OVERLAY_SELECTOR}get target(){return this.element.querySelector(OVERLAY_SCROLL_ELEMENT).children[0]}connect(){this.handleOverlayDynamic()}handleOverlayDynamic(){var _a,_b,_c;const isOverlayDynamic=(_a=this.element.dataset)==null?void 0:_a.overlayDynamic;if(isOverlayDynamic){const previousOverlayElement=this.element.querySelector(PREVIOUS_OVERLAY_CLASSNAME);const previousOverlayClassname=(_b=previousOverlayElement==null?void 0:previousOverlayElement.dataset)==null?void 0:_b.previousOverlayClassname;const subsequentOverlayElement=this.element.querySelector(SUBSEQUENT_OVERLAY_CLASSNAME);const subsequentOverlayClassname=(_c=subsequentOverlayElement==null?void 0:subsequentOverlayElement.dataset)==null?void 0:_c.subsequentOverlayClassname;const handleScrollChange=target=>{const{scrollLeft:scrollLeft,scrollWidth:scrollWidth,clientWidth:clientWidth}=target;const isScrollAtStart=scrollLeft===0;const isScrollAtEnd=scrollLeft+clientWidth>=scrollWidth-1;if(isScrollAtStart){previousOverlayElement.classList.remove(previousOverlayClassname)}else{previousOverlayElement.classList.add(previousOverlayClassname)}if(isScrollAtEnd){subsequentOverlayElement.classList.remove(subsequentOverlayClassname)}else{subsequentOverlayElement.classList.add(subsequentOverlayClassname)}};this.target.addEventListener("scroll",(event=>{handleScrollChange(event.target)}));handleScrollChange(this.target)}}disconnect(){var _a;if((_a=this.element.dataset)==null?void 0:_a.overlayDynamic){this.target.removeEventListener("scroll")}}}const SELECT_WRAPPER_SELECTOR="[data-pb-select]";const SELECT_VALIDATION_MESSAGE_CLASS$1=".pb_body_kit_negative";class PbSelect extends PbEnhancedElement{static get selector(){return SELECT_WRAPPER_SELECTOR}connect(){this.setValidationMessage()}setValidationMessage(){var _a;const validationMessage=(_a=this.element.dataset)==null?void 0:_a.validationMessage;if(validationMessage){const selectElement=this.element.querySelector("select");const setErrorTextContent=(text,timeout)=>{setTimeout((()=>{const errorMessageElement=this.element.querySelector(SELECT_VALIDATION_MESSAGE_CLASS$1);if(errorMessageElement){errorMessageElement.textContent=text}else{setErrorTextContent(text,100)}}),timeout)};selectElement.addEventListener("change",(e=>{if(!e.target.checkValidity()){setErrorTextContent(validationMessage,300)}}))}}}const DIALOG_WRAPPER_SELECTOR="[data-pb-dialog-wrapper]";class PbDialog extends PbEnhancedElement{constructor(){super(...arguments);__publicField(this,"handleCustomEvent",(event=>{var _a,_b,_c,_d,_e,_f;const dialogId=((_a=event.detail)==null?void 0:_a.dialogId)||((_b=this.element.querySelector("dialog"))==null?void 0:_b.id);const dialog=dialogId&&document.getElementById(dialogId);if(!dialog){console.warn(`[PbDialog] Could not find dialog with ID '${dialogId}'`);return}this.setupDialog();const action=((_c=event.detail)==null?void 0:_c.action)||"open";const knownActions=["open","close","clickConfirm","clickCancel"];if(knownActions.includes(action)){switch(action){case"open":if(!dialog.open)dialog.showModal();break;case"close":if(dialog.open)dialog.close((_d=event.detail)==null?void 0:_d.returnValue);break;case"clickConfirm":this.triggerButtonClick(dialog,event,"confirm");break;case"clickCancel":this.triggerButtonClick(dialog,event,"cancel");break}}else if(typeof((_e=event.detail)==null?void 0:_e.customAction)==="function"){event.detail.customAction({dialog:dialog,event:event})}else if((_f=window.pbDialogActions)==null?void 0:_f[action]){window.pbDialogActions[action]({dialog:dialog,event:event})}else{console.warn(`[PbDialog] Unknown action: ${action}`)}}))}static get selector(){return DIALOG_WRAPPER_SELECTOR}connect(){window.addEventListener("DOMContentLoaded",(()=>this.setupDialog()));window.addEventListener("turbo:frame-load",(()=>this.setupDialog()));const customEventTypeString=this.element.dataset.customEventType;if(customEventTypeString&&!this.element.hasAttribute("data-custom-event-handled")){this.customEventTypes=customEventTypeString.split(",").map((e=>e.trim())).filter(Boolean);this.customEventTypes.forEach((eventType=>{window.addEventListener(eventType,this.handleCustomEvent)}));this.element.setAttribute("data-custom-event-handled","true")}}disconnect(){if(this.customEventTypes&&Array.isArray(this.customEventTypes)){this.customEventTypes.forEach((eventType=>{window.removeEventListener(eventType,this.handleCustomEvent)}))}}triggerButtonClick(dialog,event,type){var _a,_b;const buttonId=((_a=event.detail)==null?void 0:_a[`${type}ButtonId`])||((_b=dialog.closest("[data-pb-dialog-wrapper]"))==null?void 0:_b.dataset[`${type}ButtonId`]);const button=buttonId?document.getElementById(buttonId):dialog.querySelector(`[data-${type}-button]`);if(button){button.click()}else{console.warn(`[PbDialog] Could not find ${type} button for dialog`)}}setupDialog(){const openTrigger=document.querySelectorAll("[data-open-dialog]");const closeTrigger=document.querySelectorAll("[data-close-dialog]");const dialogs=document.querySelectorAll(".pb_dialog_rails");const loadingButton=document.querySelector('[data-disable-with="Loading"]');if(loadingButton&&!loadingButton.dataset.listenerAttached){loadingButton.addEventListener("click",(function(){const okayLoadingButton=document.querySelector('[data-disable-with="Loading"]');const cancelButton=document.querySelector('[data-disable-cancel-with="Loading"]');let currentClass=okayLoadingButton.className;let cancelClass=cancelButton?cancelButton.className:"";let newClass=currentClass.replace("_enabled","_disabled_loading");let newCancelClass=cancelClass.replace("_enabled","_disabled");okayLoadingButton.disabled=true;if(cancelButton)cancelButton.disabled=true;okayLoadingButton.className=newClass;if(cancelButton)cancelButton.className=newCancelClass}));loadingButton.dataset.listenerAttached="true"}openTrigger.forEach((open=>{const originalClickHandler=open._openDialogClickHandler;if(originalClickHandler)open.removeEventListener("click",originalClickHandler);open._openDialogClickHandler=()=>{const openTriggerData=open.dataset.openDialog;const targetDialogOpen=document.getElementById(openTriggerData);if(targetDialogOpen&&!targetDialogOpen.open)targetDialogOpen.showModal()};open.addEventListener("click",open._openDialogClickHandler)}));closeTrigger.forEach((close=>{const originalClickHandler=close._closeDialogClickHandler;if(originalClickHandler)close.removeEventListener("click",originalClickHandler);close._closeDialogClickHandler=()=>{const closeTriggerData=close.dataset.closeDialog;const targetDialogClose=document.getElementById(closeTriggerData);if(targetDialogClose)targetDialogClose.close()};close.addEventListener("click",close._closeDialogClickHandler)}));dialogs.forEach((dialogElement=>{const originalMousedownHandler=dialogElement._outsideClickHandler;if(originalMousedownHandler)dialogElement.removeEventListener("mousedown",originalMousedownHandler);dialogElement._outsideClickHandler=event=>{const dialogParentDataset=dialogElement.parentElement.dataset;if(dialogParentDataset.overlayClick==="overlay_close")return;const dialogModal=event.target.getBoundingClientRect();const clickedOutsideDialogModal=event.clientX<dialogModal.left||event.clientX>dialogModal.right||event.clientY<dialogModal.top||event.clientY>dialogModal.bottom;if(clickedOutsideDialogModal){dialogElement.close();event.stopPropagation()}};dialogElement.addEventListener("mousedown",dialogElement._outsideClickHandler)}))}}const DATE_PICKER_WRAPPER_SELECTOR="[data-pb-date-picker]";const SELECT_VALIDATION_MESSAGE_CLASS=".pb_body_kit_negative";class PbDatePicker extends PbEnhancedElement{static get selector(){return DATE_PICKER_WRAPPER_SELECTOR}connect(){this.setValidationMessage()}setValidationMessage(){var _a;const validationMessage=(_a=this.element.dataset)==null?void 0:_a.validationMessage;const inputElement=this.element.querySelector("input");if(validationMessage){const setErrorTextContent=(text,timeout)=>{setTimeout((()=>{const errorMessageElement=this.element.querySelector(SELECT_VALIDATION_MESSAGE_CLASS);if(errorMessageElement){errorMessageElement.textContent=text}else{setErrorTextContent(text,100)}}),timeout)};inputElement.addEventListener("change",(e=>{if(!e.target.checkValidity()){setErrorTextContent(validationMessage,300)}}))}}}const MULTI_LEVEL_SELECT_SELECTOR="[data-multi_level_select_form]";class PbMultiLevelSelect extends PbEnhancedElement{static get selector(){return MULTI_LEVEL_SELECT_SELECTOR}get target(){return this.element.querySelector(".pb_body_kit_negative")}connect(){this.addEventListeners();this.observeHiddenInputs();this.observeRogueErrorInsideInnerContainer()}addEventListeners(){const inputElement=this.element.querySelector("input");inputElement.addEventListener("invalid",(()=>{this.handleErrorLabel(300)}));inputElement.addEventListener("blur",(()=>{this.justBlurred=true;setTimeout((()=>{this.justBlurred=false}),300)}))}handleErrorLabel(delay){setTimeout((()=>{const errorLabelElement=this.target;const wrapper=this.element.querySelector(".wrapper");if(errorLabelElement){errorLabelElement.remove();if(wrapper){if(wrapper.querySelector(".pb_body_kit_negative")){wrapper.querySelector(".pb_body_kit_negative").remove()}wrapper.appendChild(errorLabelElement)}this.element.classList.add("error")}else{this.handleErrorLabel(100)}}),delay)}observeHiddenInputs(){const container=this.element.querySelector(".input_inner_container");if(!container)return;this.mutationObserver=new MutationObserver((()=>{const hiddenInputs=container.querySelectorAll('input[type="hidden"]');if(hiddenInputs.length>0){this.clearError()}}));this.mutationObserver.observe(container,{childList:true})}observeRogueErrorInsideInnerContainer(){const container=this.element.querySelector(".input_inner_container");this.rogueErrorObserver=new MutationObserver((mutations=>{for(const mutation of mutations){for(const node of mutation.addedNodes){if(node.nodeType===Node.ELEMENT_NODE&&node.classList.contains("pb_body_kit_negative")){if(this.justBlurred){node.remove()}}}}}));this.rogueErrorObserver.observe(container,{childList:true,subtree:true})}clearError(e){const errorLabelElement=this.target;if(errorLabelElement){errorLabelElement.remove();this.element.classList.remove("error");this.element.querySelector("input").value=e.detail.value}}}PbTextInput.start();PbCopyButton.start();addCopyEventListeners();PbDrawer.start();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();PbOverlay.start();PbSelect.start();PbDialog.start();PbDatePicker.start();PbMultiLevelSelect.start();
|
data/lib/playbook/version.rb
CHANGED
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.18.0.pre.alpha.
|
4
|
+
version: 14.18.0.pre.alpha.play1736highchartslinegraphdefaultrebuild7444
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -1218,12 +1218,15 @@ files:
|
|
1218
1218
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
|
1219
1219
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
|
1220
1220
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_react.md
|
1221
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb
|
1221
1222
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx
|
1222
|
-
- app/pb_kits/playbook/pb_draggable/docs/
|
1223
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb
|
1223
1224
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx
|
1224
|
-
- app/pb_kits/playbook/pb_draggable/docs/
|
1225
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md
|
1226
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md
|
1225
1227
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx
|
1226
1228
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md
|
1229
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md
|
1227
1230
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb
|
1228
1231
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md
|
1229
1232
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
|
@@ -1935,11 +1938,12 @@ files:
|
|
1935
1938
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx
|
1936
1939
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md
|
1937
1940
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx
|
1941
|
+
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md
|
1938
1942
|
- app/pb_kits/playbook/pb_line_graph/docs/example.yml
|
1939
1943
|
- app/pb_kits/playbook/pb_line_graph/docs/index.js
|
1940
1944
|
- app/pb_kits/playbook/pb_line_graph/lineGraph.test.js
|
1941
1945
|
- app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js
|
1942
|
-
- app/pb_kits/playbook/pb_line_graph/lineGraphTheme.
|
1946
|
+
- app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts
|
1943
1947
|
- app/pb_kits/playbook/pb_line_graph/line_graph.html.erb
|
1944
1948
|
- app/pb_kits/playbook/pb_line_graph/line_graph.rb
|
1945
1949
|
- app/pb_kits/playbook/pb_link/_link.scss
|
File without changes
|
File without changes
|