playbook_ui 13.32.0.pre.alpha.PLAY14143264 → 13.32.0.pre.alpha.PLAY14143271
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/dist/chunks/_typeahead.js +32 -33673
- data/dist/chunks/_weekday_stacked.js +54 -12975
- data/dist/chunks/lazysizes.js +1 -611
- data/dist/chunks/pb_form_validation.js +1 -60
- data/dist/chunks/vendor.js +1 -6
- data/dist/playbook-doc.js +630 -67840
- data/dist/playbook-rails-react-bindings.js +1 -97
- data/dist/playbook-rails.js +1 -408
- data/dist/playbook.css +2 -61394
- data/dist/reset.css +1 -62
- data/lib/playbook/version.rb +1 -1
- metadata +2 -2
@@ -1,97 +1 @@
|
|
1
|
-
import
|
2
|
-
import { B as BarGraph, C as CircleChart, D as Dialog, a as DialogBody, b as DialogFooter, c as DialogHeader, d as DistributionBar, M as MultiLevelSelect, L as Legend, e as LineGraph, P as Passphrase, R as RichTextEditor, T as TreemapChart, f as Typeahead, G as Gauge, g as PhoneNumberInput } from "./chunks/_typeahead.js";
|
3
|
-
import "react";
|
4
|
-
import "./chunks/lib.js";
|
5
|
-
import "react-dom";
|
6
|
-
var ujs$1 = {};
|
7
|
-
Object.defineProperty(ujs$1, "__esModule", {
|
8
|
-
value: true
|
9
|
-
});
|
10
|
-
var ujs = {
|
11
|
-
handleEvent: function handleEvent(eventName, callback) {
|
12
|
-
var _ref = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : { once: false }, once = _ref.once;
|
13
|
-
var $ = typeof window.jQuery !== "undefined" && window.jQuery;
|
14
|
-
if ($) {
|
15
|
-
if (once) {
|
16
|
-
$(document).one(eventName, callback);
|
17
|
-
} else {
|
18
|
-
$(document).on(eventName, callback);
|
19
|
-
}
|
20
|
-
} else {
|
21
|
-
document.addEventListener(eventName, callback, { once });
|
22
|
-
}
|
23
|
-
},
|
24
|
-
setup: function setup(onMount, onUnmount) {
|
25
|
-
var $ = typeof window.jQuery !== "undefined" && window.jQuery;
|
26
|
-
var Turbolinks = window.Turbolinks;
|
27
|
-
if (typeof Turbolinks !== "undefined" && Turbolinks.supported) {
|
28
|
-
if (typeof Turbolinks.EVENTS !== "undefined") {
|
29
|
-
this.turbolinksClassic(onMount, onUnmount);
|
30
|
-
} else if (typeof Turbolinks.controller !== "undefined") {
|
31
|
-
this.turbolinks5(onMount, onUnmount);
|
32
|
-
} else {
|
33
|
-
this.turbolinksClassicDeprecated(onMount, onUnmount);
|
34
|
-
}
|
35
|
-
} else if ($ && typeof $.pjax === "function") {
|
36
|
-
this.pjax(onMount, onUnmount);
|
37
|
-
} else {
|
38
|
-
this.native(onMount);
|
39
|
-
}
|
40
|
-
},
|
41
|
-
turbolinks5: function turbolinks5(onMount, onUnmount) {
|
42
|
-
this.handleEvent("turbolinks:load", onMount, { once: true });
|
43
|
-
this.handleEvent("turbolinks:render", onMount);
|
44
|
-
this.handleEvent("turbolinks:before-render", onUnmount);
|
45
|
-
},
|
46
|
-
turbolinksClassic: function turbolinksClassic(onMount, onUnmount) {
|
47
|
-
var Turbolinks = window.Turbolinks;
|
48
|
-
this.handleEvent(Turbolinks.EVENTS.CHANGE, onMount);
|
49
|
-
this.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD, onUnmount);
|
50
|
-
},
|
51
|
-
turbolinksClassicDeprecated: function turbolinksClassicDeprecated(onMount, onUnmount) {
|
52
|
-
var Turbolinks = window.Turbolinks;
|
53
|
-
Turbolinks.pagesCached(0);
|
54
|
-
this.handleEvent("page:change", onMount);
|
55
|
-
this.handleEvent("page:receive", onUnmount);
|
56
|
-
},
|
57
|
-
pjax: function pjax(onMount, onUnmount) {
|
58
|
-
this.handleEvent("ready", onMount);
|
59
|
-
this.handleEvent("pjax:end", onMount);
|
60
|
-
this.handleEvent("pjax:beforeReplace", onUnmount);
|
61
|
-
},
|
62
|
-
native: function native(onMount) {
|
63
|
-
var $ = typeof window.jQuery !== "undefined" && window.jQuery;
|
64
|
-
if ($) {
|
65
|
-
$(function() {
|
66
|
-
return onMount();
|
67
|
-
});
|
68
|
-
} else if ("addEventListener" in window) {
|
69
|
-
document.addEventListener("DOMContentLoaded", onMount);
|
70
|
-
} else {
|
71
|
-
window.attachEvent("onload", onMount);
|
72
|
-
}
|
73
|
-
}
|
74
|
-
};
|
75
|
-
var _default = ujs$1.default = ujs;
|
76
|
-
WebpackerReact.registerComponents({
|
77
|
-
BarGraph,
|
78
|
-
CircleChart,
|
79
|
-
Dialog,
|
80
|
-
DialogBody,
|
81
|
-
DialogFooter,
|
82
|
-
DialogHeader,
|
83
|
-
DistributionBar,
|
84
|
-
MultiLevelSelect,
|
85
|
-
Legend,
|
86
|
-
LineGraph,
|
87
|
-
Passphrase,
|
88
|
-
RichTextEditor,
|
89
|
-
TreemapChart,
|
90
|
-
Typeahead,
|
91
|
-
Gauge,
|
92
|
-
PhoneNumberInput
|
93
|
-
});
|
94
|
-
_default.setup(
|
95
|
-
() => WebpackerReact.mountComponents(),
|
96
|
-
() => WebpackerReact.unmountComponents()
|
97
|
-
);
|
1
|
+
import r from"webpacker-react";import{B as d,C as l,D as u,a as f,b as p,c as h,d as c,M as v,L as E,e as b,P as w,R as k,T as y,f as g,G as m,g as C}from"./chunks/_typeahead.js";import"react";import"./chunks/lib.js";import"react-dom";var o={};Object.defineProperty(o,"__esModule",{value:!0});var j={handleEvent:function(e,n){var i=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{once:!1},t=i.once,s=typeof window.jQuery<"u"&&window.jQuery;s?t?s(document).one(e,n):s(document).on(e,n):document.addEventListener(e,n,{once:t})},setup:function(e,n){var i=typeof window.jQuery<"u"&&window.jQuery,t=window.Turbolinks;typeof t<"u"&&t.supported?typeof t.EVENTS<"u"?this.turbolinksClassic(e,n):typeof t.controller<"u"?this.turbolinks5(e,n):this.turbolinksClassicDeprecated(e,n):i&&typeof i.pjax=="function"?this.pjax(e,n):this.native(e)},turbolinks5:function(e,n){this.handleEvent("turbolinks:load",e,{once:!0}),this.handleEvent("turbolinks:render",e),this.handleEvent("turbolinks:before-render",n)},turbolinksClassic:function(e,n){var i=window.Turbolinks;this.handleEvent(i.EVENTS.CHANGE,e),this.handleEvent(i.EVENTS.BEFORE_UNLOAD,n)},turbolinksClassicDeprecated:function(e,n){var i=window.Turbolinks;i.pagesCached(0),this.handleEvent("page:change",e),this.handleEvent("page:receive",n)},pjax:function(e,n){this.handleEvent("ready",e),this.handleEvent("pjax:end",e),this.handleEvent("pjax:beforeReplace",n)},native:function(e){var n=typeof window.jQuery<"u"&&window.jQuery;n?n(function(){return e()}):"addEventListener"in window?document.addEventListener("DOMContentLoaded",e):window.attachEvent("onload",e)}},T=o.default=j;r.registerComponents({BarGraph:d,CircleChart:l,Dialog:u,DialogBody:f,DialogFooter:p,DialogHeader:h,DistributionBar:c,MultiLevelSelect:v,Legend:E,LineGraph:b,Passphrase:w,RichTextEditor:k,TreemapChart:y,Typeahead:g,Gauge:m,PhoneNumberInput:C});T.setup(()=>r.mountComponents(),()=>r.unmountComponents());
|
data/dist/playbook-rails.js
CHANGED
@@ -1,408 +1 @@
|
|
1
|
-
import
|
2
|
-
import { P as PbEnhancedElement, d as datePickerHelper, a as dialogHelper, b as PbPopover, c as PbTooltip, e as PbTypeahead, f as PbTable, g as PbTextarea } from "./chunks/lib.js";
|
3
|
-
import "./chunks/lazysizes.js";
|
4
|
-
import "./playbook-rails-react-bindings.js";
|
5
|
-
import "react";
|
6
|
-
import "webpacker-react";
|
7
|
-
import "./chunks/_typeahead.js";
|
8
|
-
import "react-dom";
|
9
|
-
const MAIN_SELECTOR = "[data-collapsible-main]";
|
10
|
-
const CONTENT_SELECTOR$1 = "[data-collapsible-content]";
|
11
|
-
const DOWN_ARROW_SELECTOR$2 = "#collapsible_open_icon";
|
12
|
-
const UP_ARROW_SELECTOR$2 = "#collapsible_close_icon";
|
13
|
-
class PbCollapsible extends PbEnhancedElement {
|
14
|
-
static get selector() {
|
15
|
-
return MAIN_SELECTOR;
|
16
|
-
}
|
17
|
-
connect() {
|
18
|
-
this.element.addEventListener("click", () => {
|
19
|
-
this.toggleElement(this.target);
|
20
|
-
});
|
21
|
-
if (this.target.classList.contains("is-visible")) {
|
22
|
-
this.displayUpArrow();
|
23
|
-
} else {
|
24
|
-
this.displayDownArrow();
|
25
|
-
}
|
26
|
-
document.addEventListener(`${this.target.id}`, () => {
|
27
|
-
this.toggleElement(this.target);
|
28
|
-
});
|
29
|
-
}
|
30
|
-
get target() {
|
31
|
-
return this.element.parentNode.querySelector(CONTENT_SELECTOR$1);
|
32
|
-
}
|
33
|
-
showElement(elem) {
|
34
|
-
const getHeight = () => {
|
35
|
-
elem.style.display = "block";
|
36
|
-
const height2 = elem.scrollHeight + "px";
|
37
|
-
elem.style.display = "";
|
38
|
-
return height2;
|
39
|
-
};
|
40
|
-
const height = getHeight();
|
41
|
-
elem.classList.add("is-visible");
|
42
|
-
elem.style.height = height;
|
43
|
-
elem.style.overflow = "hidden";
|
44
|
-
window.setTimeout(() => {
|
45
|
-
elem.style.height = "";
|
46
|
-
elem.style.overflow = "visible";
|
47
|
-
}, 300);
|
48
|
-
}
|
49
|
-
hideElement(elem) {
|
50
|
-
elem.style.height = elem.scrollHeight + "px";
|
51
|
-
window.setTimeout(() => {
|
52
|
-
elem.style.height = "0";
|
53
|
-
elem.style.paddingTop = "0";
|
54
|
-
elem.style.paddingBottom = "0";
|
55
|
-
elem.style.overflow = "hidden";
|
56
|
-
}, 1);
|
57
|
-
window.setTimeout(() => {
|
58
|
-
elem.classList.remove("is-visible");
|
59
|
-
elem.style.overflow = "";
|
60
|
-
}, 300);
|
61
|
-
}
|
62
|
-
toggleElement(elem) {
|
63
|
-
if (elem.classList.contains("is-visible")) {
|
64
|
-
this.hideElement(elem);
|
65
|
-
this.displayDownArrow();
|
66
|
-
return;
|
67
|
-
}
|
68
|
-
this.showElement(elem);
|
69
|
-
this.displayUpArrow();
|
70
|
-
}
|
71
|
-
toggleArrows(showDownArrow) {
|
72
|
-
const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR$2);
|
73
|
-
const upArrow = this.element.querySelector(UP_ARROW_SELECTOR$2);
|
74
|
-
if (downArrow) {
|
75
|
-
downArrow.style.display = showDownArrow ? "inline-block" : "none";
|
76
|
-
}
|
77
|
-
if (upArrow) {
|
78
|
-
upArrow.style.display = showDownArrow ? "none" : "inline-block";
|
79
|
-
}
|
80
|
-
}
|
81
|
-
displayDownArrow() {
|
82
|
-
this.toggleArrows(true);
|
83
|
-
}
|
84
|
-
displayUpArrow() {
|
85
|
-
this.toggleArrows(false);
|
86
|
-
}
|
87
|
-
}
|
88
|
-
class PbFixedConfirmationToast extends PbEnhancedElement {
|
89
|
-
static get selector() {
|
90
|
-
return ".remove_toast";
|
91
|
-
}
|
92
|
-
connect() {
|
93
|
-
this.self = this.element;
|
94
|
-
this.autoCloseToast(this.self);
|
95
|
-
this.self.addEventListener("click", () => {
|
96
|
-
this.removeToast(this.self);
|
97
|
-
});
|
98
|
-
}
|
99
|
-
removeToast(elem) {
|
100
|
-
elem.parentNode.removeChild(elem);
|
101
|
-
}
|
102
|
-
autoCloseToast(element) {
|
103
|
-
const classListValues = element.classList.value;
|
104
|
-
const hasAutoCloseClass = classListValues.includes("auto_close");
|
105
|
-
if (hasAutoCloseClass) {
|
106
|
-
const classList = classListValues.split(" ");
|
107
|
-
const autoCloseValue = classList[classList.length - 1].split("_")[2];
|
108
|
-
const autoCloseIntValue = parseInt(autoCloseValue);
|
109
|
-
setTimeout(() => {
|
110
|
-
this.removeToast(element);
|
111
|
-
}, autoCloseIntValue);
|
112
|
-
}
|
113
|
-
}
|
114
|
-
}
|
115
|
-
const OPTION_SELECTOR$1 = "[data-dropdown-option-label]";
|
116
|
-
class PbDropdownKeyboard {
|
117
|
-
constructor(dropdown) {
|
118
|
-
this.dropdown = dropdown;
|
119
|
-
this.dropdownElement = dropdown.element;
|
120
|
-
this.options = Array.from(
|
121
|
-
this.dropdownElement.querySelectorAll(OPTION_SELECTOR$1)
|
122
|
-
);
|
123
|
-
this.focusedOptionIndex = -1;
|
124
|
-
this.init();
|
125
|
-
}
|
126
|
-
init() {
|
127
|
-
this.dropdownElement.addEventListener(
|
128
|
-
"keydown",
|
129
|
-
this.handleKeyDown.bind(this)
|
130
|
-
);
|
131
|
-
}
|
132
|
-
handleKeyDown(event) {
|
133
|
-
switch (event.key) {
|
134
|
-
case "ArrowDown":
|
135
|
-
event.preventDefault();
|
136
|
-
if (!this.dropdown.target.classList.contains("open")) {
|
137
|
-
this.dropdown.showElement(this.dropdown.target);
|
138
|
-
this.dropdown.updateArrowDisplay(true);
|
139
|
-
}
|
140
|
-
this.moveFocus(1);
|
141
|
-
break;
|
142
|
-
case "ArrowUp":
|
143
|
-
event.preventDefault();
|
144
|
-
this.moveFocus(-1);
|
145
|
-
break;
|
146
|
-
case "Enter":
|
147
|
-
event.preventDefault();
|
148
|
-
if (this.focusedOptionIndex !== -1) {
|
149
|
-
this.selectOption();
|
150
|
-
} else {
|
151
|
-
if (!this.dropdown.target.classList.contains("open")) {
|
152
|
-
this.dropdown.showElement(this.dropdown.target);
|
153
|
-
this.dropdown.updateArrowDisplay(true);
|
154
|
-
}
|
155
|
-
}
|
156
|
-
break;
|
157
|
-
case "Escape":
|
158
|
-
this.dropdown.hideElement(this.dropdown.target);
|
159
|
-
break;
|
160
|
-
case "Tab":
|
161
|
-
this.dropdown.hideElement(this.dropdown.target);
|
162
|
-
this.dropdown.updateArrowDisplay(false);
|
163
|
-
this.resetFocus();
|
164
|
-
break;
|
165
|
-
}
|
166
|
-
}
|
167
|
-
moveFocus(direction) {
|
168
|
-
if (this.focusedOptionIndex !== -1) {
|
169
|
-
this.options[this.focusedOptionIndex].classList.remove(
|
170
|
-
"pb_dropdown_option_focused"
|
171
|
-
);
|
172
|
-
}
|
173
|
-
this.focusedOptionIndex = (this.focusedOptionIndex + direction + this.options.length) % this.options.length;
|
174
|
-
this.options[this.focusedOptionIndex].classList.add(
|
175
|
-
"pb_dropdown_option_focused"
|
176
|
-
);
|
177
|
-
}
|
178
|
-
selectOption() {
|
179
|
-
const option = this.options[this.focusedOptionIndex];
|
180
|
-
this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel, option);
|
181
|
-
this.dropdown.hideElement(this.dropdown.target);
|
182
|
-
}
|
183
|
-
}
|
184
|
-
const DROPDOWN_SELECTOR = "[data-pb-dropdown]";
|
185
|
-
const TRIGGER_SELECTOR = "[data-dropdown-trigger]";
|
186
|
-
const CONTAINER_SELECTOR = "[data-dropdown-container]";
|
187
|
-
const DOWN_ARROW_SELECTOR$1 = "#dropdown_open_icon";
|
188
|
-
const UP_ARROW_SELECTOR$1 = "#dropdown_close_icon";
|
189
|
-
const OPTION_SELECTOR = "[data-dropdown-option-label]";
|
190
|
-
const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
|
191
|
-
const INPUT_FORM_VALIDATION = "#dropdown-form-validation";
|
192
|
-
class PbDropdown extends PbEnhancedElement {
|
193
|
-
static get selector() {
|
194
|
-
return DROPDOWN_SELECTOR;
|
195
|
-
}
|
196
|
-
get target() {
|
197
|
-
return this.element.parentNode.querySelector(CONTAINER_SELECTOR);
|
198
|
-
}
|
199
|
-
connect() {
|
200
|
-
this.keyboardHandler = new PbDropdownKeyboard(this);
|
201
|
-
this.bindEventListeners();
|
202
|
-
this.updateArrowDisplay(false);
|
203
|
-
this.handleFormValidation();
|
204
|
-
}
|
205
|
-
bindEventListeners() {
|
206
|
-
const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR) || this.element;
|
207
|
-
customTrigger.addEventListener(
|
208
|
-
"click",
|
209
|
-
() => this.toggleElement(this.target)
|
210
|
-
);
|
211
|
-
this.target.addEventListener("click", this.handleOptionClick.bind(this));
|
212
|
-
document.addEventListener(
|
213
|
-
"click",
|
214
|
-
this.handleDocumentClick.bind(this),
|
215
|
-
true
|
216
|
-
);
|
217
|
-
}
|
218
|
-
handleOptionClick(event) {
|
219
|
-
const option = event.target.closest(OPTION_SELECTOR);
|
220
|
-
const hiddenInput = this.element.querySelector("#dropdown-selected-option");
|
221
|
-
const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
|
222
|
-
if (option) {
|
223
|
-
const value = option.dataset.dropdownOptionLabel;
|
224
|
-
hiddenInput.value = JSON.parse(value).id;
|
225
|
-
inputFormValidation.value = JSON.parse(value).id;
|
226
|
-
this.clearFormValidation(inputFormValidation);
|
227
|
-
this.onOptionSelected(value, option);
|
228
|
-
}
|
229
|
-
}
|
230
|
-
handleDocumentClick(event) {
|
231
|
-
if (this.isClickOutside(event) && this.target.classList.contains("open")) {
|
232
|
-
this.hideElement(this.target);
|
233
|
-
this.updateArrowDisplay(false);
|
234
|
-
}
|
235
|
-
}
|
236
|
-
isClickOutside(event) {
|
237
|
-
const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
|
238
|
-
if (customTrigger) {
|
239
|
-
return !customTrigger.contains(event.target);
|
240
|
-
} else {
|
241
|
-
const triggerElement = this.element.querySelector(TRIGGER_SELECTOR);
|
242
|
-
const containerElement = this.element.parentNode.querySelector(CONTAINER_SELECTOR);
|
243
|
-
const isOutsideTrigger = triggerElement ? !triggerElement.contains(event.target) : true;
|
244
|
-
const isOutsideContainer = containerElement ? !containerElement.contains(event.target) : true;
|
245
|
-
return isOutsideTrigger && isOutsideContainer;
|
246
|
-
}
|
247
|
-
}
|
248
|
-
onOptionSelected(value, selectedOption) {
|
249
|
-
const triggerElement = this.element.querySelector(
|
250
|
-
"#dropdown_trigger_display"
|
251
|
-
);
|
252
|
-
const customDisplayElement = this.element.querySelector(
|
253
|
-
"#dropdown_trigger_custom_display"
|
254
|
-
);
|
255
|
-
if (triggerElement) {
|
256
|
-
const selectedLabel = JSON.parse(value).label;
|
257
|
-
triggerElement.textContent = selectedLabel;
|
258
|
-
if (customDisplayElement) {
|
259
|
-
customDisplayElement.style.display = "block";
|
260
|
-
customDisplayElement.style.paddingRight = "8px";
|
261
|
-
}
|
262
|
-
}
|
263
|
-
const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
|
264
|
-
if (customTrigger) {
|
265
|
-
if (this.target.classList.contains("open")) {
|
266
|
-
this.hideElement(this.target);
|
267
|
-
this.updateArrowDisplay(false);
|
268
|
-
}
|
269
|
-
}
|
270
|
-
const options = this.element.querySelectorAll(OPTION_SELECTOR);
|
271
|
-
options.forEach((option) => {
|
272
|
-
option.classList.remove("pb_dropdown_option_selected");
|
273
|
-
});
|
274
|
-
selectedOption.classList.add("pb_dropdown_option_selected");
|
275
|
-
}
|
276
|
-
showElement(elem) {
|
277
|
-
elem.classList.remove("close");
|
278
|
-
elem.classList.add("open");
|
279
|
-
elem.style.height = elem.scrollHeight + "px";
|
280
|
-
}
|
281
|
-
hideElement(elem) {
|
282
|
-
elem.style.height = elem.scrollHeight + "px";
|
283
|
-
window.setTimeout(() => {
|
284
|
-
elem.classList.add("close");
|
285
|
-
elem.classList.remove("open");
|
286
|
-
this.resetFocus();
|
287
|
-
}, 0);
|
288
|
-
}
|
289
|
-
resetFocus() {
|
290
|
-
if (this.keyboardHandler) {
|
291
|
-
this.keyboardHandler.focusedOptionIndex = -1;
|
292
|
-
const options = this.element.querySelectorAll(OPTION_SELECTOR);
|
293
|
-
options.forEach(
|
294
|
-
(option) => option.classList.remove("pb_dropdown_option_focused")
|
295
|
-
);
|
296
|
-
}
|
297
|
-
}
|
298
|
-
toggleElement(elem) {
|
299
|
-
if (elem.classList.contains("open")) {
|
300
|
-
this.hideElement(elem);
|
301
|
-
this.updateArrowDisplay(false);
|
302
|
-
return;
|
303
|
-
}
|
304
|
-
this.showElement(elem);
|
305
|
-
this.updateArrowDisplay(true);
|
306
|
-
}
|
307
|
-
updateArrowDisplay(isOpen) {
|
308
|
-
const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR$1);
|
309
|
-
const upArrow = this.element.querySelector(UP_ARROW_SELECTOR$1);
|
310
|
-
if (downArrow && upArrow) {
|
311
|
-
downArrow.style.display = isOpen ? "none" : "inline-block";
|
312
|
-
upArrow.style.display = isOpen ? "inline-block" : "none";
|
313
|
-
}
|
314
|
-
}
|
315
|
-
handleFormValidation() {
|
316
|
-
const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
|
317
|
-
inputFormValidation.addEventListener("invalid", function(event) {
|
318
|
-
if (inputFormValidation.hasAttribute("required") && inputFormValidation.value === "") {
|
319
|
-
event.preventDefault();
|
320
|
-
inputFormValidation.closest(".dropdown_wrapper").classList.add("error");
|
321
|
-
}
|
322
|
-
}, true);
|
323
|
-
}
|
324
|
-
clearFormValidation(input) {
|
325
|
-
if (input.checkValidity()) {
|
326
|
-
const dropdownWrapperElement = input.closest(".dropdown_wrapper");
|
327
|
-
dropdownWrapperElement.classList.remove("error");
|
328
|
-
const errorLabelElement = dropdownWrapperElement.querySelector(".pb_body_kit_negative");
|
329
|
-
if (errorLabelElement) {
|
330
|
-
errorLabelElement.remove();
|
331
|
-
}
|
332
|
-
}
|
333
|
-
}
|
334
|
-
}
|
335
|
-
const ADVANCED_TABLE_SELECTOR = "[data-advanced-table]";
|
336
|
-
const CONTENT_SELECTOR = '[data-advanced-table-content="id"]';
|
337
|
-
const DOWN_ARROW_SELECTOR = "#advanced-table_open_icon";
|
338
|
-
const UP_ARROW_SELECTOR = "#advanced-table_close_icon";
|
339
|
-
class PbAdvancedTable extends PbEnhancedElement {
|
340
|
-
static get selector() {
|
341
|
-
return ADVANCED_TABLE_SELECTOR;
|
342
|
-
}
|
343
|
-
get target() {
|
344
|
-
return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id));
|
345
|
-
}
|
346
|
-
connect() {
|
347
|
-
this.element.addEventListener("click", () => {
|
348
|
-
this.toggleElement(this.target);
|
349
|
-
});
|
350
|
-
}
|
351
|
-
showElement(elem) {
|
352
|
-
const getHeight = () => {
|
353
|
-
elem.style.display = "block";
|
354
|
-
const height2 = elem.scrollHeight + "px";
|
355
|
-
elem.style.display = "";
|
356
|
-
return height2;
|
357
|
-
};
|
358
|
-
const height = getHeight();
|
359
|
-
elem.classList.add("is-visible");
|
360
|
-
elem.style.height = height;
|
361
|
-
elem.style.overflow = "hidden";
|
362
|
-
window.setTimeout(() => {
|
363
|
-
elem.style.height = "";
|
364
|
-
elem.style.overflow = "visible";
|
365
|
-
}, 250);
|
366
|
-
}
|
367
|
-
hideElement(elem) {
|
368
|
-
elem.style.height = elem.scrollHeight + "px";
|
369
|
-
window.setTimeout(() => {
|
370
|
-
elem.style.height = "0";
|
371
|
-
elem.style.paddingTop = "0";
|
372
|
-
elem.style.paddingBottom = "0";
|
373
|
-
elem.style.overflow = "hidden";
|
374
|
-
}, 1);
|
375
|
-
window.setTimeout(() => {
|
376
|
-
elem.classList.remove("is-visible");
|
377
|
-
elem.style.overflow = "";
|
378
|
-
}, 200);
|
379
|
-
}
|
380
|
-
toggleElement(elem) {
|
381
|
-
if (elem.classList.contains("is-visible")) {
|
382
|
-
this.hideElement(elem);
|
383
|
-
this.displayDownArrow();
|
384
|
-
return;
|
385
|
-
}
|
386
|
-
this.showElement(elem);
|
387
|
-
this.displayUpArrow();
|
388
|
-
}
|
389
|
-
displayDownArrow() {
|
390
|
-
this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = "inline-block";
|
391
|
-
this.element.querySelector(UP_ARROW_SELECTOR).style.display = "none";
|
392
|
-
}
|
393
|
-
displayUpArrow() {
|
394
|
-
this.element.querySelector(UP_ARROW_SELECTOR).style.display = "inline-block";
|
395
|
-
this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = "none";
|
396
|
-
}
|
397
|
-
}
|
398
|
-
window.datePickerHelper = datePickerHelper;
|
399
|
-
window.dialogHelper = dialogHelper;
|
400
|
-
PbCollapsible.start();
|
401
|
-
PbPopover.start();
|
402
|
-
PbTooltip.start();
|
403
|
-
PbFixedConfirmationToast.start();
|
404
|
-
PbTypeahead.start();
|
405
|
-
PbTable.start();
|
406
|
-
PbTextarea.start();
|
407
|
-
PbDropdown.start();
|
408
|
-
PbAdvancedTable.start();
|
1
|
+
import"./chunks/pb_form_validation.js";import{P as l,d as w,a as y,b as E,c as m,e as b,f as _,g as f}from"./chunks/lib.js";import"./chunks/lazysizes.js";import"./playbook-rails-react-bindings.js";import"react";import"webpacker-react";import"./chunks/_typeahead.js";import"react-dom";const O="[data-collapsible-main]",L="[data-collapsible-content]",v="#collapsible_open_icon",T="#collapsible_close_icon";class A extends l{static get selector(){return O}connect(){this.element.addEventListener("click",()=>{this.toggleElement(this.target)}),this.target.classList.contains("is-visible")?this.displayUpArrow():this.displayDownArrow(),document.addEventListener(`${this.target.id}`,()=>{this.toggleElement(this.target)})}get target(){return this.element.parentNode.querySelector(L)}showElement(t){const s=(()=>{t.style.display="block";const o=t.scrollHeight+"px";return t.style.display="",o})();t.classList.add("is-visible"),t.style.height=s,t.style.overflow="hidden",window.setTimeout(()=>{t.style.height="",t.style.overflow="visible"},300)}hideElement(t){t.style.height=t.scrollHeight+"px",window.setTimeout(()=>{t.style.height="0",t.style.paddingTop="0",t.style.paddingBottom="0",t.style.overflow="hidden"},1),window.setTimeout(()=>{t.classList.remove("is-visible"),t.style.overflow=""},300)}toggleElement(t){if(t.classList.contains("is-visible")){this.hideElement(t),this.displayDownArrow();return}this.showElement(t),this.displayUpArrow()}toggleArrows(t){const e=this.element.querySelector(v),s=this.element.querySelector(T);e&&(e.style.display=t?"inline-block":"none"),s&&(s.style.display=t?"none":"inline-block")}displayDownArrow(){this.toggleArrows(!0)}displayUpArrow(){this.toggleArrows(!1)}}class S extends l{static get selector(){return".remove_toast"}connect(){this.self=this.element,this.autoCloseToast(this.self),this.self.addEventListener("click",()=>{this.removeToast(this.self)})}removeToast(t){t.parentNode.removeChild(t)}autoCloseToast(t){const e=t.classList.value;if(e.includes("auto_close")){const o=e.split(" "),i=o[o.length-1].split("_")[2],r=parseInt(i);setTimeout(()=>{this.removeToast(t)},r)}}}const C="[data-dropdown-option-label]";class k{constructor(t){this.dropdown=t,this.dropdownElement=t.element,this.options=Array.from(this.dropdownElement.querySelectorAll(C)),this.focusedOptionIndex=-1,this.init()}init(){this.dropdownElement.addEventListener("keydown",this.handleKeyDown.bind(this))}handleKeyDown(t){switch(t.key){case"ArrowDown":t.preventDefault(),this.dropdown.target.classList.contains("open")||(this.dropdown.showElement(this.dropdown.target),this.dropdown.updateArrowDisplay(!0)),this.moveFocus(1);break;case"ArrowUp":t.preventDefault(),this.moveFocus(-1);break;case"Enter":t.preventDefault(),this.focusedOptionIndex!==-1?this.selectOption():this.dropdown.target.classList.contains("open")||(this.dropdown.showElement(this.dropdown.target),this.dropdown.updateArrowDisplay(!0));break;case"Escape":this.dropdown.hideElement(this.dropdown.target);break;case"Tab":this.dropdown.hideElement(this.dropdown.target),this.dropdown.updateArrowDisplay(!1),this.resetFocus();break}}moveFocus(t){this.focusedOptionIndex!==-1&&this.options[this.focusedOptionIndex].classList.remove("pb_dropdown_option_focused"),this.focusedOptionIndex=(this.focusedOptionIndex+t+this.options.length)%this.options.length,this.options[this.focusedOptionIndex].classList.add("pb_dropdown_option_focused")}selectOption(){const t=this.options[this.focusedOptionIndex];this.dropdown.onOptionSelected(t.dataset.dropdownOptionLabel,t),this.dropdown.hideElement(this.dropdown.target)}}const D="[data-pb-dropdown]",R="[data-dropdown-trigger]",h="[data-dropdown-container]",q="#dropdown_open_icon",x="#dropdown_close_icon",d="[data-dropdown-option-label]",c="[data-dropdown-custom-trigger]",p="#dropdown-form-validation";class N extends l{static get selector(){return D}get target(){return this.element.parentNode.querySelector(h)}connect(){this.keyboardHandler=new k(this),this.bindEventListeners(),this.updateArrowDisplay(!1),this.handleFormValidation()}bindEventListeners(){(this.element.querySelector(c)||this.element).addEventListener("click",()=>this.toggleElement(this.target)),this.target.addEventListener("click",this.handleOptionClick.bind(this)),document.addEventListener("click",this.handleDocumentClick.bind(this),!0)}handleOptionClick(t){const e=t.target.closest(d),s=this.element.querySelector("#dropdown-selected-option"),o=this.element.querySelector(p);if(e){const i=e.dataset.dropdownOptionLabel;s.value=JSON.parse(i).id,o.value=JSON.parse(i).id,this.clearFormValidation(o),this.onOptionSelected(i,e)}}handleDocumentClick(t){this.isClickOutside(t)&&this.target.classList.contains("open")&&(this.hideElement(this.target),this.updateArrowDisplay(!1))}isClickOutside(t){const e=this.element.querySelector(c);if(e)return!e.contains(t.target);{const s=this.element.querySelector(R),o=this.element.parentNode.querySelector(h),i=s?!s.contains(t.target):!0,r=o?!o.contains(t.target):!0;return i&&r}}onOptionSelected(t,e){const s=this.element.querySelector("#dropdown_trigger_display"),o=this.element.querySelector("#dropdown_trigger_custom_display");if(s){const a=JSON.parse(t).label;s.textContent=a,o&&(o.style.display="block",o.style.paddingRight="8px")}this.element.querySelector(c)&&this.target.classList.contains("open")&&(this.hideElement(this.target),this.updateArrowDisplay(!1)),this.element.querySelectorAll(d).forEach(a=>{a.classList.remove("pb_dropdown_option_selected")}),e.classList.add("pb_dropdown_option_selected")}showElement(t){t.classList.remove("close"),t.classList.add("open"),t.style.height=t.scrollHeight+"px"}hideElement(t){t.style.height=t.scrollHeight+"px",window.setTimeout(()=>{t.classList.add("close"),t.classList.remove("open"),this.resetFocus()},0)}resetFocus(){this.keyboardHandler&&(this.keyboardHandler.focusedOptionIndex=-1,this.element.querySelectorAll(d).forEach(e=>e.classList.remove("pb_dropdown_option_focused")))}toggleElement(t){if(t.classList.contains("open")){this.hideElement(t),this.updateArrowDisplay(!1);return}this.showElement(t),this.updateArrowDisplay(!0)}updateArrowDisplay(t){const e=this.element.querySelector(q),s=this.element.querySelector(x);e&&s&&(e.style.display=t?"none":"inline-block",s.style.display=t?"inline-block":"none")}handleFormValidation(){const t=this.element.querySelector(p);t.addEventListener("invalid",function(e){t.hasAttribute("required")&&t.value===""&&(e.preventDefault(),t.closest(".dropdown_wrapper").classList.add("error"))},!0)}clearFormValidation(t){if(t.checkValidity()){const e=t.closest(".dropdown_wrapper");e.classList.remove("error");const s=e.querySelector(".pb_body_kit_negative");s&&s.remove()}}}const P="[data-advanced-table]",I='[data-advanced-table-content="id"]',u="#advanced-table_open_icon",g="#advanced-table_close_icon";class H extends l{static get selector(){return P}get target(){return document.querySelector(I.replace("id",this.element.id))}connect(){this.element.addEventListener("click",()=>{this.toggleElement(this.target)})}showElement(t){const s=(()=>{t.style.display="block";const o=t.scrollHeight+"px";return t.style.display="",o})();t.classList.add("is-visible"),t.style.height=s,t.style.overflow="hidden",window.setTimeout(()=>{t.style.height="",t.style.overflow="visible"},250)}hideElement(t){t.style.height=t.scrollHeight+"px",window.setTimeout(()=>{t.style.height="0",t.style.paddingTop="0",t.style.paddingBottom="0",t.style.overflow="hidden"},1),window.setTimeout(()=>{t.classList.remove("is-visible"),t.style.overflow=""},200)}toggleElement(t){if(t.classList.contains("is-visible")){this.hideElement(t),this.displayDownArrow();return}this.showElement(t),this.displayUpArrow()}displayDownArrow(){this.element.querySelector(u).style.display="inline-block",this.element.querySelector(g).style.display="none"}displayUpArrow(){this.element.querySelector(g).style.display="inline-block",this.element.querySelector(u).style.display="none"}}window.datePickerHelper=w;window.dialogHelper=y;A.start();E.start();m.start();S.start();b.start();_.start();f.start();N.start();H.start();
|