vrembem 3.0.19 → 3.0.20
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.
- package/dev/scripts.esm.js +281 -325
- package/dev/scripts.esm.js.map +1 -1
- package/dev/scripts.js +281 -325
- package/dev/scripts.js.map +1 -1
- package/dev/scripts.modern.mjs +239 -263
- package/dev/scripts.modern.mjs.map +1 -1
- package/dev/scripts.umd.js +281 -325
- package/dev/scripts.umd.js.map +1 -1
- package/dev/styles.css +7 -28
- package/dev/styles.css.map +1 -1
- package/dist/scripts.esm.js +1 -1
- package/dist/scripts.esm.js.map +1 -1
- package/dist/scripts.js +1 -1
- package/dist/scripts.js.map +1 -1
- package/dist/scripts.modern.mjs +1 -1
- package/dist/scripts.modern.mjs.map +1 -1
- package/dist/scripts.umd.js +1 -1
- package/dist/scripts.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/index.js +5 -5
- package/package.json +26 -26
package/dev/scripts.js
CHANGED
|
@@ -1,75 +1,52 @@
|
|
|
1
|
-
function
|
|
2
|
-
if ("
|
|
3
|
-
|
|
4
|
-
if (void 0 !== e) {
|
|
5
|
-
var i = e.call(t, r || "default");
|
|
6
|
-
if ("object" != typeof i) return i;
|
|
7
|
-
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
8
|
-
}
|
|
9
|
-
return ("string" === r ? String : Number)(t);
|
|
1
|
+
function _classPrivateFieldLooseBase(e, t) {
|
|
2
|
+
if (!{}.hasOwnProperty.call(e, t)) throw new TypeError("attempted to use private field on non-instance");
|
|
3
|
+
return e;
|
|
10
4
|
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
return "
|
|
5
|
+
var id = 0;
|
|
6
|
+
function _classPrivateFieldLooseKey(e) {
|
|
7
|
+
return "__private_" + id++ + "_" + e;
|
|
14
8
|
}
|
|
15
|
-
function _defineProperties(
|
|
16
|
-
for (var
|
|
17
|
-
var
|
|
18
|
-
|
|
19
|
-
descriptor.configurable = true;
|
|
20
|
-
if ("value" in descriptor) descriptor.writable = true;
|
|
21
|
-
Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
|
|
9
|
+
function _defineProperties(e, r) {
|
|
10
|
+
for (var t = 0; t < r.length; t++) {
|
|
11
|
+
var o = r[t];
|
|
12
|
+
o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
|
|
22
13
|
}
|
|
23
14
|
}
|
|
24
|
-
function _createClass(
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
writable: false
|
|
29
|
-
});
|
|
30
|
-
return Constructor;
|
|
15
|
+
function _createClass(e, r, t) {
|
|
16
|
+
return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
|
|
17
|
+
writable: !1
|
|
18
|
+
}), e;
|
|
31
19
|
}
|
|
32
20
|
function _extends() {
|
|
33
|
-
_extends = Object.assign ? Object.assign.bind() : function (
|
|
34
|
-
for (var
|
|
35
|
-
var
|
|
36
|
-
for (var
|
|
37
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
38
|
-
target[key] = source[key];
|
|
39
|
-
}
|
|
40
|
-
}
|
|
21
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
22
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
23
|
+
var t = arguments[e];
|
|
24
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
41
25
|
}
|
|
42
|
-
return
|
|
43
|
-
};
|
|
44
|
-
return _extends.apply(this, arguments);
|
|
26
|
+
return n;
|
|
27
|
+
}, _extends.apply(null, arguments);
|
|
45
28
|
}
|
|
46
|
-
function _inheritsLoose(
|
|
47
|
-
|
|
48
|
-
subClass.prototype.constructor = subClass;
|
|
49
|
-
_setPrototypeOf(subClass, superClass);
|
|
29
|
+
function _inheritsLoose(t, o) {
|
|
30
|
+
t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
|
|
50
31
|
}
|
|
51
|
-
function _setPrototypeOf(
|
|
52
|
-
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
};
|
|
56
|
-
return _setPrototypeOf(o, p);
|
|
32
|
+
function _setPrototypeOf(t, e) {
|
|
33
|
+
return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
|
|
34
|
+
return t.__proto__ = e, t;
|
|
35
|
+
}, _setPrototypeOf(t, e);
|
|
57
36
|
}
|
|
58
|
-
function
|
|
59
|
-
if (
|
|
60
|
-
|
|
37
|
+
function _toPrimitive(t, r) {
|
|
38
|
+
if ("object" != typeof t || !t) return t;
|
|
39
|
+
var e = t[Symbol.toPrimitive];
|
|
40
|
+
if (void 0 !== e) {
|
|
41
|
+
var i = e.call(t, r || "default");
|
|
42
|
+
if ("object" != typeof i) return i;
|
|
43
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
61
44
|
}
|
|
62
|
-
return
|
|
63
|
-
}
|
|
64
|
-
var id = 0;
|
|
65
|
-
function _classPrivateFieldLooseKey(name) {
|
|
66
|
-
return "__private_" + id++ + "_" + name;
|
|
45
|
+
return ("string" === r ? String : Number)(t);
|
|
67
46
|
}
|
|
68
|
-
function
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
}
|
|
72
|
-
return receiver;
|
|
47
|
+
function _toPropertyKey(t) {
|
|
48
|
+
var i = _toPrimitive(t, "string");
|
|
49
|
+
return "symbol" == typeof i ? i : i + "";
|
|
73
50
|
}
|
|
74
51
|
|
|
75
52
|
var _handler = /*#__PURE__*/_classPrivateFieldLooseKey("handler");
|
|
@@ -96,8 +73,8 @@ var Breakpoint = /*#__PURE__*/function () {
|
|
|
96
73
|
this.mql = window.matchMedia("(min-width: " + this.value + ")");
|
|
97
74
|
|
|
98
75
|
// Conditionally use addListener() for IE11 support.
|
|
99
|
-
if (typeof this.mql.addEventListener ===
|
|
100
|
-
this.mql.addEventListener(
|
|
76
|
+
if (typeof this.mql.addEventListener === "function") {
|
|
77
|
+
this.mql.addEventListener("change", _classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
101
78
|
} else {
|
|
102
79
|
this.mql.addListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
103
80
|
}
|
|
@@ -111,8 +88,8 @@ var Breakpoint = /*#__PURE__*/function () {
|
|
|
111
88
|
if (!this.mql) return this;
|
|
112
89
|
|
|
113
90
|
// Conditionally use removeListener() for IE11 support.
|
|
114
|
-
if (typeof this.mql.removeEventListener ===
|
|
115
|
-
this.mql.removeEventListener(
|
|
91
|
+
if (typeof this.mql.removeEventListener === "function") {
|
|
92
|
+
this.mql.removeEventListener("change", _classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
116
93
|
} else {
|
|
117
94
|
this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
118
95
|
}
|
|
@@ -123,7 +100,7 @@ var Breakpoint = /*#__PURE__*/function () {
|
|
|
123
100
|
this.mql = null;
|
|
124
101
|
return this;
|
|
125
102
|
};
|
|
126
|
-
_createClass(Breakpoint, [{
|
|
103
|
+
return _createClass(Breakpoint, [{
|
|
127
104
|
key: "handler",
|
|
128
105
|
get: function get() {
|
|
129
106
|
return _classPrivateFieldLooseBase(this, _handler)[_handler];
|
|
@@ -134,8 +111,8 @@ var Breakpoint = /*#__PURE__*/function () {
|
|
|
134
111
|
set: function set(func) {
|
|
135
112
|
if (this.mql) {
|
|
136
113
|
// Conditionally use removeListener() for IE11 support.
|
|
137
|
-
if (typeof this.mql.removeEventListener ===
|
|
138
|
-
this.mql.removeEventListener(
|
|
114
|
+
if (typeof this.mql.removeEventListener === "function") {
|
|
115
|
+
this.mql.removeEventListener("change", _classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
139
116
|
} else {
|
|
140
117
|
this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
|
|
141
118
|
}
|
|
@@ -143,7 +120,6 @@ var Breakpoint = /*#__PURE__*/function () {
|
|
|
143
120
|
_classPrivateFieldLooseBase(this, _handler)[_handler] = func;
|
|
144
121
|
}
|
|
145
122
|
}]);
|
|
146
|
-
return Breakpoint;
|
|
147
123
|
}();
|
|
148
124
|
|
|
149
125
|
function _settle(pact, state, value) {
|
|
@@ -359,7 +335,7 @@ var Collection = /*#__PURE__*/function () {
|
|
|
359
335
|
};
|
|
360
336
|
_proto.get = function get(value, key) {
|
|
361
337
|
if (key === void 0) {
|
|
362
|
-
key =
|
|
338
|
+
key = "id";
|
|
363
339
|
}
|
|
364
340
|
return this.collection.find(function (item) {
|
|
365
341
|
return item[key] === value;
|
|
@@ -368,31 +344,6 @@ var Collection = /*#__PURE__*/function () {
|
|
|
368
344
|
return Collection;
|
|
369
345
|
}();
|
|
370
346
|
|
|
371
|
-
const not = {
|
|
372
|
-
inert: ':not([inert]):not([inert] *)',
|
|
373
|
-
negTabIndex: ':not([tabindex^="-"])',
|
|
374
|
-
disabled: ':not(:disabled)',
|
|
375
|
-
};
|
|
376
|
-
|
|
377
|
-
var e = [
|
|
378
|
-
`a[href]${not.inert}${not.negTabIndex}`,
|
|
379
|
-
`area[href]${not.inert}${not.negTabIndex}`,
|
|
380
|
-
`input:not([type="hidden"]):not([type="radio"])${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
381
|
-
`input[type="radio"]${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
382
|
-
`select${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
383
|
-
`textarea${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
384
|
-
`button${not.inert}${not.negTabIndex}${not.disabled}`,
|
|
385
|
-
`details${not.inert} > summary:first-of-type${not.negTabIndex}`,
|
|
386
|
-
// Discard until Firefox supports `:has()`
|
|
387
|
-
// See: https://github.com/KittyGiraudel/focusable-selectors/issues/12
|
|
388
|
-
// `details:not(:has(> summary))${not.inert}${not.negTabIndex}`,
|
|
389
|
-
`iframe${not.inert}${not.negTabIndex}`,
|
|
390
|
-
`audio[controls]${not.inert}${not.negTabIndex}`,
|
|
391
|
-
`video[controls]${not.inert}${not.negTabIndex}`,
|
|
392
|
-
`[contenteditable]${not.inert}${not.negTabIndex}`,
|
|
393
|
-
`[tabindex]${not.inert}${not.negTabIndex}`,
|
|
394
|
-
];
|
|
395
|
-
|
|
396
347
|
var _focusable = /*#__PURE__*/_classPrivateFieldLooseKey("focusable");
|
|
397
348
|
var _handleFocusTrap = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusTrap");
|
|
398
349
|
var _handleFocusLock = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusLock");
|
|
@@ -402,7 +353,7 @@ var FocusTrap = /*#__PURE__*/function () {
|
|
|
402
353
|
el = null;
|
|
403
354
|
}
|
|
404
355
|
if (selectorFocus === void 0) {
|
|
405
|
-
selectorFocus =
|
|
356
|
+
selectorFocus = "[data-focus]";
|
|
406
357
|
}
|
|
407
358
|
Object.defineProperty(this, _focusable, {
|
|
408
359
|
writable: true,
|
|
@@ -441,8 +392,8 @@ var FocusTrap = /*#__PURE__*/function () {
|
|
|
441
392
|
this.focusable = [];
|
|
442
393
|
|
|
443
394
|
// Remove event listeners
|
|
444
|
-
document.removeEventListener(
|
|
445
|
-
document.removeEventListener(
|
|
395
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
|
|
396
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
|
|
446
397
|
};
|
|
447
398
|
_proto.focus = function focus(el, selectorFocus) {
|
|
448
399
|
if (el === void 0) {
|
|
@@ -468,7 +419,8 @@ var FocusTrap = /*#__PURE__*/function () {
|
|
|
468
419
|
var initScrollTop = el.scrollTop;
|
|
469
420
|
|
|
470
421
|
// Query for all the focusable elements.
|
|
471
|
-
var
|
|
422
|
+
var selector = focusableSelectors.join(",");
|
|
423
|
+
var els = el.querySelectorAll(selector);
|
|
472
424
|
|
|
473
425
|
// Loop through all focusable elements.
|
|
474
426
|
els.forEach(function (el) {
|
|
@@ -488,7 +440,7 @@ var FocusTrap = /*#__PURE__*/function () {
|
|
|
488
440
|
// Return the focusable array.
|
|
489
441
|
return focusable;
|
|
490
442
|
};
|
|
491
|
-
_createClass(FocusTrap, [{
|
|
443
|
+
return _createClass(FocusTrap, [{
|
|
492
444
|
key: "focusable",
|
|
493
445
|
get: function get() {
|
|
494
446
|
return _classPrivateFieldLooseBase(this, _focusable)[_focusable];
|
|
@@ -499,11 +451,11 @@ var FocusTrap = /*#__PURE__*/function () {
|
|
|
499
451
|
|
|
500
452
|
// Apply event listeners based on new focusable array length.
|
|
501
453
|
if (_classPrivateFieldLooseBase(this, _focusable)[_focusable].length) {
|
|
502
|
-
document.removeEventListener(
|
|
503
|
-
document.addEventListener(
|
|
454
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
|
|
455
|
+
document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
|
|
504
456
|
} else {
|
|
505
|
-
document.removeEventListener(
|
|
506
|
-
document.addEventListener(
|
|
457
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
|
|
458
|
+
document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
|
|
507
459
|
}
|
|
508
460
|
}
|
|
509
461
|
}, {
|
|
@@ -517,11 +469,17 @@ var FocusTrap = /*#__PURE__*/function () {
|
|
|
517
469
|
return this.focusable[this.focusable.length - 1];
|
|
518
470
|
}
|
|
519
471
|
}]);
|
|
520
|
-
return FocusTrap;
|
|
521
472
|
}();
|
|
473
|
+
|
|
474
|
+
// This has been copied over from focusable-selectors package and modified.
|
|
475
|
+
// https://github.com/KittyGiraudel/focusable-selectors
|
|
476
|
+
var notInert = ":not([inert])"; // Previously `:not([inert]):not([inert] *)`
|
|
477
|
+
var notNegTabIndex = ":not([tabindex^=\"-\"])";
|
|
478
|
+
var notDisabled = ":not(:disabled)";
|
|
479
|
+
var focusableSelectors = ["a[href]" + notInert + notNegTabIndex, "area[href]" + notInert + notNegTabIndex, "input:not([type=\"hidden\"]):not([type=\"radio\"])" + notInert + notNegTabIndex + notDisabled, "input[type=\"radio\"]" + notInert + notNegTabIndex + notDisabled, "select" + notInert + notNegTabIndex + notDisabled, "textarea" + notInert + notNegTabIndex + notDisabled, "button" + notInert + notNegTabIndex + notDisabled, "details" + notInert + " > summary:first-of-type" + notNegTabIndex, "iframe" + notInert + notNegTabIndex, "audio[controls]" + notInert + notNegTabIndex, "video[controls]" + notInert + notNegTabIndex, "[contenteditable]" + notInert + notNegTabIndex, "[tabindex]" + notInert + notNegTabIndex];
|
|
522
480
|
function handleFocusTrap(event) {
|
|
523
481
|
// Check if the click was a tab and return if not.
|
|
524
|
-
var isTab = event.key ===
|
|
482
|
+
var isTab = event.key === "Tab" || event.keyCode === 9;
|
|
525
483
|
if (!isTab) return;
|
|
526
484
|
|
|
527
485
|
// If the shift key is pressed.
|
|
@@ -543,18 +501,18 @@ function handleFocusTrap(event) {
|
|
|
543
501
|
}
|
|
544
502
|
function handleFocusLock(event) {
|
|
545
503
|
// Ignore the tab key by preventing default.
|
|
546
|
-
var isTab = event.key ===
|
|
504
|
+
var isTab = event.key === "Tab" || event.keyCode === 9;
|
|
547
505
|
if (isTab) event.preventDefault();
|
|
548
506
|
}
|
|
549
507
|
|
|
550
508
|
function getConfig$1(el, dataConfig) {
|
|
551
|
-
var string = el.getAttribute("data-" + dataConfig) ||
|
|
552
|
-
var json = string.replace(/'/g,
|
|
509
|
+
var string = el.getAttribute("data-" + dataConfig) || "";
|
|
510
|
+
var json = string.replace(/'/g, "\"");
|
|
553
511
|
return json ? JSON.parse(json) : {};
|
|
554
512
|
}
|
|
555
513
|
|
|
556
514
|
function getPrefix() {
|
|
557
|
-
return getComputedStyle(document.body).getPropertyValue(
|
|
515
|
+
return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
|
|
558
516
|
}
|
|
559
517
|
|
|
560
518
|
function localStore(key, enable) {
|
|
@@ -599,18 +557,18 @@ function teleport(what, where, how) {
|
|
|
599
557
|
where = isComment || isElement ? where : document.querySelector(where);
|
|
600
558
|
|
|
601
559
|
// If ref is a comment, set teleport type to 'after'.
|
|
602
|
-
if (isComment) how =
|
|
560
|
+
if (isComment) how = "after";
|
|
603
561
|
|
|
604
562
|
// Must be a valid reference element and method.
|
|
605
563
|
if (!where) throw new Error("Not a valid teleport reference: '" + where + "'");
|
|
606
|
-
if (typeof where[how] !=
|
|
564
|
+
if (typeof where[how] != "function") throw new Error("Not a valid teleport method: '" + how + "'");
|
|
607
565
|
|
|
608
566
|
// Initial return ref is null.
|
|
609
567
|
var returnRef = null;
|
|
610
568
|
|
|
611
569
|
// If ref is not a comment, set a return reference comment.
|
|
612
570
|
if (!isComment) {
|
|
613
|
-
returnRef = document.createComment(
|
|
571
|
+
returnRef = document.createComment("teleported #" + what.id);
|
|
614
572
|
what.before(returnRef);
|
|
615
573
|
}
|
|
616
574
|
|
|
@@ -636,7 +594,7 @@ var openTransition = function openTransition(el, settings) {
|
|
|
636
594
|
el.classList.add(settings.stateOpening);
|
|
637
595
|
|
|
638
596
|
// Add event listener for when the transition is finished.
|
|
639
|
-
el.addEventListener(
|
|
597
|
+
el.addEventListener("transitionend", function _f(event) {
|
|
640
598
|
// Prevent child transition bubbling from firing this event.
|
|
641
599
|
if (event.target != el) return;
|
|
642
600
|
|
|
@@ -646,7 +604,7 @@ var openTransition = function openTransition(el, settings) {
|
|
|
646
604
|
|
|
647
605
|
// Resolve the promise and remove the event listener.
|
|
648
606
|
resolve(el);
|
|
649
|
-
this.removeEventListener(
|
|
607
|
+
this.removeEventListener("transitionend", _f);
|
|
650
608
|
});
|
|
651
609
|
} else {
|
|
652
610
|
// Toggle final opened state classes and resolve the promise.
|
|
@@ -665,7 +623,7 @@ var closeTransition = function closeTransition(el, settings) {
|
|
|
665
623
|
el.classList.remove(settings.stateOpened);
|
|
666
624
|
|
|
667
625
|
// Add event listener for when the transition is finished.
|
|
668
|
-
el.addEventListener(
|
|
626
|
+
el.addEventListener("transitionend", function _f(event) {
|
|
669
627
|
// Prevent child transition bubbling from firing this event.
|
|
670
628
|
if (event.target != el) return;
|
|
671
629
|
|
|
@@ -675,7 +633,7 @@ var closeTransition = function closeTransition(el, settings) {
|
|
|
675
633
|
|
|
676
634
|
// Resolve the promise and remove the event listener.
|
|
677
635
|
resolve(el);
|
|
678
|
-
this.removeEventListener(
|
|
636
|
+
this.removeEventListener("transitionend", _f);
|
|
679
637
|
});
|
|
680
638
|
} else {
|
|
681
639
|
// Toggle final closed state classes and resolve the promise.
|
|
@@ -691,9 +649,9 @@ function setOverflowHidden(state, selector) {
|
|
|
691
649
|
var els = document.querySelectorAll(selector);
|
|
692
650
|
els.forEach(function (el) {
|
|
693
651
|
if (state) {
|
|
694
|
-
el.style.overflow =
|
|
652
|
+
el.style.overflow = "hidden";
|
|
695
653
|
} else {
|
|
696
|
-
el.style.removeProperty(
|
|
654
|
+
el.style.removeProperty("overflow");
|
|
697
655
|
}
|
|
698
656
|
});
|
|
699
657
|
}
|
|
@@ -704,10 +662,10 @@ function setInert(state, selector) {
|
|
|
704
662
|
els.forEach(function (el) {
|
|
705
663
|
if (state) {
|
|
706
664
|
el.inert = true;
|
|
707
|
-
el.setAttribute(
|
|
665
|
+
el.setAttribute("aria-hidden", true);
|
|
708
666
|
} else {
|
|
709
667
|
el.inert = null;
|
|
710
|
-
el.removeAttribute(
|
|
668
|
+
el.removeAttribute("aria-hidden");
|
|
711
669
|
}
|
|
712
670
|
});
|
|
713
671
|
}
|
|
@@ -736,8 +694,8 @@ var index = {
|
|
|
736
694
|
|
|
737
695
|
var defaults$3 = {
|
|
738
696
|
autoInit: false,
|
|
739
|
-
stateAttr:
|
|
740
|
-
stateValue:
|
|
697
|
+
stateAttr: "aria-checked",
|
|
698
|
+
stateValue: "mixed"
|
|
741
699
|
};
|
|
742
700
|
|
|
743
701
|
var Checkbox = /*#__PURE__*/function () {
|
|
@@ -756,10 +714,10 @@ var Checkbox = /*#__PURE__*/function () {
|
|
|
756
714
|
var selector = "[" + this.settings.stateAttr + "=\"" + this.settings.stateValue + "\"]";
|
|
757
715
|
var mixed = document.querySelectorAll(selector);
|
|
758
716
|
this.setIndeterminate(mixed);
|
|
759
|
-
document.addEventListener(
|
|
717
|
+
document.addEventListener("click", this.__handlerClick, false);
|
|
760
718
|
};
|
|
761
719
|
_proto.destroy = function destroy() {
|
|
762
|
-
document.removeEventListener(
|
|
720
|
+
document.removeEventListener("click", this.__handlerClick, false);
|
|
763
721
|
};
|
|
764
722
|
_proto.handlerClick = function handlerClick(event) {
|
|
765
723
|
var selector = "[" + this.settings.stateAttr + "=\"" + this.settings.stateValue + "\"]";
|
|
@@ -802,30 +760,30 @@ var Checkbox = /*#__PURE__*/function () {
|
|
|
802
760
|
var defaults$2 = {
|
|
803
761
|
autoInit: false,
|
|
804
762
|
// Data attributes
|
|
805
|
-
dataOpen:
|
|
806
|
-
dataClose:
|
|
807
|
-
dataToggle:
|
|
808
|
-
dataBreakpoint:
|
|
809
|
-
dataConfig:
|
|
763
|
+
dataOpen: "drawer-open",
|
|
764
|
+
dataClose: "drawer-close",
|
|
765
|
+
dataToggle: "drawer-toggle",
|
|
766
|
+
dataBreakpoint: "drawer-breakpoint",
|
|
767
|
+
dataConfig: "drawer-config",
|
|
810
768
|
// Selectors
|
|
811
|
-
selectorDrawer:
|
|
812
|
-
selectorDialog:
|
|
813
|
-
selectorFocus:
|
|
769
|
+
selectorDrawer: ".drawer",
|
|
770
|
+
selectorDialog: ".drawer__dialog",
|
|
771
|
+
selectorFocus: "[data-focus]",
|
|
814
772
|
selectorInert: null,
|
|
815
|
-
selectorOverflow:
|
|
773
|
+
selectorOverflow: "body",
|
|
816
774
|
// State classes
|
|
817
|
-
stateOpened:
|
|
818
|
-
stateOpening:
|
|
819
|
-
stateClosing:
|
|
820
|
-
stateClosed:
|
|
775
|
+
stateOpened: "is-opened",
|
|
776
|
+
stateOpening: "is-opening",
|
|
777
|
+
stateClosing: "is-closing",
|
|
778
|
+
stateClosed: "is-closed",
|
|
821
779
|
// Classes
|
|
822
|
-
classModal:
|
|
780
|
+
classModal: "drawer_modal",
|
|
823
781
|
// Feature toggles
|
|
824
782
|
breakpoints: null,
|
|
825
|
-
customEventPrefix:
|
|
783
|
+
customEventPrefix: "drawer:",
|
|
826
784
|
eventListeners: true,
|
|
827
785
|
store: true,
|
|
828
|
-
storeKey:
|
|
786
|
+
storeKey: "VB:DrawerState",
|
|
829
787
|
setTabindex: true,
|
|
830
788
|
transition: true
|
|
831
789
|
};
|
|
@@ -840,7 +798,7 @@ function handleClick$2(event) {
|
|
|
840
798
|
|
|
841
799
|
// If it's a toggle trigger...
|
|
842
800
|
if (trigger.matches("[data-" + this.settings.dataToggle + "]")) {
|
|
843
|
-
var selectors = trigger.getAttribute("data-" + this.settings.dataToggle).trim().split(
|
|
801
|
+
var selectors = trigger.getAttribute("data-" + this.settings.dataToggle).trim().split(" ");
|
|
844
802
|
selectors.forEach(function (selector) {
|
|
845
803
|
// Get the entry from collection using the attribute value.
|
|
846
804
|
var entry = _this.get(selector);
|
|
@@ -853,7 +811,7 @@ function handleClick$2(event) {
|
|
|
853
811
|
|
|
854
812
|
// If it's a open trigger...
|
|
855
813
|
if (trigger.matches("[data-" + this.settings.dataOpen + "]")) {
|
|
856
|
-
var _selectors = trigger.getAttribute("data-" + this.settings.dataOpen).trim().split(
|
|
814
|
+
var _selectors = trigger.getAttribute("data-" + this.settings.dataOpen).trim().split(" ");
|
|
857
815
|
_selectors.forEach(function (selector) {
|
|
858
816
|
// Get the entry from collection using the attribute value.
|
|
859
817
|
var entry = _this.get(selector);
|
|
@@ -866,7 +824,7 @@ function handleClick$2(event) {
|
|
|
866
824
|
|
|
867
825
|
// If it's a close trigger...
|
|
868
826
|
if (trigger.matches("[data-" + this.settings.dataClose + "]")) {
|
|
869
|
-
var _selectors2 = trigger.getAttribute("data-" + this.settings.dataClose).trim().split(
|
|
827
|
+
var _selectors2 = trigger.getAttribute("data-" + this.settings.dataClose).trim().split(" ");
|
|
870
828
|
_selectors2.forEach(function (selector) {
|
|
871
829
|
if (selector) {
|
|
872
830
|
// Get the entry from collection using the attribute value.
|
|
@@ -893,7 +851,7 @@ function handleClick$2(event) {
|
|
|
893
851
|
}
|
|
894
852
|
}
|
|
895
853
|
function handleKeydown$2(event) {
|
|
896
|
-
if (event.key ===
|
|
854
|
+
if (event.key === "Escape") {
|
|
897
855
|
var modal = this.activeModal;
|
|
898
856
|
if (modal) this.close(modal);
|
|
899
857
|
}
|
|
@@ -938,7 +896,7 @@ var deregister$2 = function deregister(obj, close) {
|
|
|
938
896
|
|
|
939
897
|
// If entry is in the opened state.
|
|
940
898
|
var _temp = function () {
|
|
941
|
-
if (close && _entry.state ===
|
|
899
|
+
if (close && _entry.state === "opened") {
|
|
942
900
|
// Close the drawer.
|
|
943
901
|
return Promise.resolve(_entry.close(false)).then(function () {});
|
|
944
902
|
}
|
|
@@ -952,12 +910,12 @@ var deregister$2 = function deregister(obj, close) {
|
|
|
952
910
|
}
|
|
953
911
|
};
|
|
954
912
|
|
|
955
|
-
function
|
|
913
|
+
function P() {
|
|
956
914
|
return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
|
|
957
915
|
}
|
|
958
916
|
|
|
959
917
|
function getBreakpoint(drawer) {
|
|
960
|
-
var prefix =
|
|
918
|
+
var prefix = P();
|
|
961
919
|
var bp = drawer.getAttribute("data-" + this.settings.dataBreakpoint);
|
|
962
920
|
if (this.settings.breakpoints && this.settings.breakpoints[bp]) {
|
|
963
921
|
return this.settings.breakpoints[bp];
|
|
@@ -970,7 +928,7 @@ function getBreakpoint(drawer) {
|
|
|
970
928
|
|
|
971
929
|
function getDrawer(query) {
|
|
972
930
|
// Get the entry from collection.
|
|
973
|
-
var entry = typeof query ===
|
|
931
|
+
var entry = typeof query === "string" ? this.get(query) : this.get(query.id);
|
|
974
932
|
|
|
975
933
|
// Return entry if it was resolved, otherwise throw error.
|
|
976
934
|
if (entry) {
|
|
@@ -982,12 +940,12 @@ function getDrawer(query) {
|
|
|
982
940
|
|
|
983
941
|
function getDrawerID(obj) {
|
|
984
942
|
// If it's a string, return the string.
|
|
985
|
-
if (typeof obj ===
|
|
943
|
+
if (typeof obj === "string") {
|
|
986
944
|
return obj;
|
|
987
945
|
}
|
|
988
946
|
|
|
989
947
|
// If it's an HTML element.
|
|
990
|
-
else if (typeof obj.hasAttribute ===
|
|
948
|
+
else if (typeof obj.hasAttribute === "function") {
|
|
991
949
|
// If it's a drawer open trigger, return data value.
|
|
992
950
|
if (obj.hasAttribute("data-" + this.settings.dataOpen)) {
|
|
993
951
|
return obj.getAttribute("data-" + this.settings.dataOpen);
|
|
@@ -1033,7 +991,7 @@ function getDrawerElements(query) {
|
|
|
1033
991
|
};
|
|
1034
992
|
} else if (!dialog) {
|
|
1035
993
|
return {
|
|
1036
|
-
error: new Error(
|
|
994
|
+
error: new Error("Drawer is missing dialog element.")
|
|
1037
995
|
};
|
|
1038
996
|
} else {
|
|
1039
997
|
return {
|
|
@@ -1043,7 +1001,7 @@ function getDrawerElements(query) {
|
|
|
1043
1001
|
}
|
|
1044
1002
|
} else {
|
|
1045
1003
|
return {
|
|
1046
|
-
error: new Error(
|
|
1004
|
+
error: new Error("Could not resolve the drawer ID.")
|
|
1047
1005
|
};
|
|
1048
1006
|
}
|
|
1049
1007
|
}
|
|
@@ -1054,7 +1012,7 @@ var initialState = function initialState(entry) {
|
|
|
1054
1012
|
var _temp2 = function () {
|
|
1055
1013
|
if (_this.store.get(entry.id)) {
|
|
1056
1014
|
var _temp = function () {
|
|
1057
|
-
if (_this.store.get(entry.id) ===
|
|
1015
|
+
if (_this.store.get(entry.id) === "opened") {
|
|
1058
1016
|
return Promise.resolve(entry.open(false, false)).then(function () {});
|
|
1059
1017
|
} else {
|
|
1060
1018
|
return Promise.resolve(entry.close(false, false)).then(function () {});
|
|
@@ -1063,7 +1021,7 @@ var initialState = function initialState(entry) {
|
|
|
1063
1021
|
if (_temp && _temp.then) return _temp.then(function () {});
|
|
1064
1022
|
} else if (entry.el.classList.contains(_this.settings.stateOpened)) {
|
|
1065
1023
|
// Update drawer state.
|
|
1066
|
-
entry.state =
|
|
1024
|
+
entry.state = "opened";
|
|
1067
1025
|
} else {
|
|
1068
1026
|
// Remove transition state classes.
|
|
1069
1027
|
entry.el.classList.remove(_this.settings.stateOpening);
|
|
@@ -1084,9 +1042,9 @@ var initialState = function initialState(entry) {
|
|
|
1084
1042
|
|
|
1085
1043
|
function updateFocusState$1(entry) {
|
|
1086
1044
|
// Check if there's an active modal
|
|
1087
|
-
if (entry.state ===
|
|
1045
|
+
if (entry.state === "opened") {
|
|
1088
1046
|
// Mount the focus trap on the opened drawer.
|
|
1089
|
-
if (entry.mode ===
|
|
1047
|
+
if (entry.mode === "modal") {
|
|
1090
1048
|
this.focusTrap.mount(entry.dialog, this.settings.selectorFocus);
|
|
1091
1049
|
} else {
|
|
1092
1050
|
this.focusTrap.focus(entry.dialog, this.settings.selectorFocus);
|
|
@@ -1113,7 +1071,7 @@ var open$2 = function open(query, transition, focus) {
|
|
|
1113
1071
|
}
|
|
1114
1072
|
|
|
1115
1073
|
// Dispatch custom opened event.
|
|
1116
|
-
drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix +
|
|
1074
|
+
drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "opened", {
|
|
1117
1075
|
detail: _this,
|
|
1118
1076
|
bubbles: true
|
|
1119
1077
|
}));
|
|
@@ -1133,17 +1091,17 @@ var open$2 = function open(query, transition, focus) {
|
|
|
1133
1091
|
|
|
1134
1092
|
// If drawer is closed.
|
|
1135
1093
|
var _temp = function () {
|
|
1136
|
-
if (drawer.state ===
|
|
1094
|
+
if (drawer.state === "closed") {
|
|
1137
1095
|
// Update drawer state.
|
|
1138
|
-
drawer.state =
|
|
1096
|
+
drawer.state = "opening";
|
|
1139
1097
|
|
|
1140
1098
|
// Run the open transition.
|
|
1141
1099
|
return Promise.resolve(openTransition(drawer.el, config)).then(function () {
|
|
1142
1100
|
// Update the global state if mode is modal.
|
|
1143
|
-
if (drawer.mode ===
|
|
1101
|
+
if (drawer.mode === "modal") updateGlobalState(true, config);
|
|
1144
1102
|
|
|
1145
1103
|
// Update drawer state.
|
|
1146
|
-
drawer.state =
|
|
1104
|
+
drawer.state = "opened";
|
|
1147
1105
|
});
|
|
1148
1106
|
}
|
|
1149
1107
|
}();
|
|
@@ -1170,9 +1128,9 @@ var close$2 = function close(query, transition, focus) {
|
|
|
1170
1128
|
|
|
1171
1129
|
// If drawer is opened.
|
|
1172
1130
|
var _temp = function () {
|
|
1173
|
-
if (drawer.state ===
|
|
1131
|
+
if (drawer.state === "opened") {
|
|
1174
1132
|
// Update drawer state.
|
|
1175
|
-
drawer.state =
|
|
1133
|
+
drawer.state = "closing";
|
|
1176
1134
|
|
|
1177
1135
|
// Remove focus from active element.
|
|
1178
1136
|
document.activeElement.blur();
|
|
@@ -1180,7 +1138,7 @@ var close$2 = function close(query, transition, focus) {
|
|
|
1180
1138
|
// Run the close transition.
|
|
1181
1139
|
return Promise.resolve(closeTransition(drawer.el, config)).then(function () {
|
|
1182
1140
|
// Update the global state if mode is modal.
|
|
1183
|
-
if (drawer.mode ===
|
|
1141
|
+
if (drawer.mode === "modal") updateGlobalState(false, config);
|
|
1184
1142
|
|
|
1185
1143
|
// Set focus to the trigger element if the focus param is true.
|
|
1186
1144
|
if (focus) {
|
|
@@ -1188,10 +1146,10 @@ var close$2 = function close(query, transition, focus) {
|
|
|
1188
1146
|
}
|
|
1189
1147
|
|
|
1190
1148
|
// Update drawer state.
|
|
1191
|
-
drawer.state =
|
|
1149
|
+
drawer.state = "closed";
|
|
1192
1150
|
|
|
1193
1151
|
// Dispatch custom closed event.
|
|
1194
|
-
drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix +
|
|
1152
|
+
drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "closed", {
|
|
1195
1153
|
detail: _this,
|
|
1196
1154
|
bubbles: true
|
|
1197
1155
|
}));
|
|
@@ -1214,7 +1172,7 @@ var toggle = function toggle(query, transition, focus) {
|
|
|
1214
1172
|
var drawer = getDrawer.call(_this, query);
|
|
1215
1173
|
|
|
1216
1174
|
// Open or close the drawer based on its current state.
|
|
1217
|
-
if (drawer.state ===
|
|
1175
|
+
if (drawer.state === "closed") {
|
|
1218
1176
|
return Promise.resolve(open$2.call(_this, drawer, transition, focus));
|
|
1219
1177
|
} else {
|
|
1220
1178
|
return Promise.resolve(close$2.call(_this, drawer, transition, focus));
|
|
@@ -1230,21 +1188,21 @@ var toModal = function toModal(entry) {
|
|
|
1230
1188
|
// Get the drawer configuration.
|
|
1231
1189
|
|
|
1232
1190
|
// Add the modal class.
|
|
1233
|
-
entry.el.classList.add(entry.getSetting(
|
|
1191
|
+
entry.el.classList.add(entry.getSetting("classModal"));
|
|
1234
1192
|
|
|
1235
1193
|
// Set aria-modal attribute to true.
|
|
1236
|
-
entry.dialog.setAttribute(
|
|
1194
|
+
entry.dialog.setAttribute("aria-modal", "true");
|
|
1237
1195
|
|
|
1238
1196
|
// If there isn't a stored state but also has the opened state class...
|
|
1239
|
-
if (!_this2.store.get(entry.id) && entry.el.classList.contains(entry.getSetting(
|
|
1197
|
+
if (!_this2.store.get(entry.id) && entry.el.classList.contains(entry.getSetting("stateOpened"))) {
|
|
1240
1198
|
// Save the opened state in local store.
|
|
1241
|
-
_this2.store.set(entry.id,
|
|
1199
|
+
_this2.store.set(entry.id, "opened");
|
|
1242
1200
|
}
|
|
1243
1201
|
|
|
1244
1202
|
// Modal drawer defaults to closed state.
|
|
1245
1203
|
return Promise.resolve(close$2.call(_this2, entry, false, false)).then(function () {
|
|
1246
1204
|
// Dispatch custom switch event.
|
|
1247
|
-
entry.el.dispatchEvent(new CustomEvent(entry.getSetting(
|
|
1205
|
+
entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
|
|
1248
1206
|
detail: _this2,
|
|
1249
1207
|
bubbles: true
|
|
1250
1208
|
}));
|
|
@@ -1260,10 +1218,10 @@ var toInline = function toInline(entry) {
|
|
|
1260
1218
|
try {
|
|
1261
1219
|
var _this = this;
|
|
1262
1220
|
// Remove the modal class.
|
|
1263
|
-
entry.el.classList.remove(entry.getSetting(
|
|
1221
|
+
entry.el.classList.remove(entry.getSetting("classModal"));
|
|
1264
1222
|
|
|
1265
1223
|
// Remove the aria-modal attribute.
|
|
1266
|
-
entry.dialog.removeAttribute(
|
|
1224
|
+
entry.dialog.removeAttribute("aria-modal");
|
|
1267
1225
|
|
|
1268
1226
|
// Update the global state.
|
|
1269
1227
|
updateGlobalState(false, _extends({}, _this.settings, entry.settings));
|
|
@@ -1274,7 +1232,7 @@ var toInline = function toInline(entry) {
|
|
|
1274
1232
|
// Setup initial state.
|
|
1275
1233
|
return Promise.resolve(initialState.call(_this, entry)).then(function () {
|
|
1276
1234
|
// Dispatch custom switch event.
|
|
1277
|
-
entry.el.dispatchEvent(new CustomEvent(entry.getSetting(
|
|
1235
|
+
entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
|
|
1278
1236
|
detail: _this,
|
|
1279
1237
|
bubbles: true
|
|
1280
1238
|
}));
|
|
@@ -1288,9 +1246,9 @@ var toInline = function toInline(entry) {
|
|
|
1288
1246
|
};
|
|
1289
1247
|
function switchMode(entry) {
|
|
1290
1248
|
switch (entry.mode) {
|
|
1291
|
-
case
|
|
1249
|
+
case "inline":
|
|
1292
1250
|
return toInline.call(this, entry);
|
|
1293
|
-
case
|
|
1251
|
+
case "modal":
|
|
1294
1252
|
return toModal.call(this, entry);
|
|
1295
1253
|
default:
|
|
1296
1254
|
throw new Error("\"" + entry.mode + "\" is not a valid drawer mode.");
|
|
@@ -1333,7 +1291,7 @@ var register$2 = function register(el, dialog) {
|
|
|
1333
1291
|
return this;
|
|
1334
1292
|
},
|
|
1335
1293
|
handleBreakpoint: function handleBreakpoint(event) {
|
|
1336
|
-
this.mode = event.matches ?
|
|
1294
|
+
this.mode = event.matches ? "inline" : "modal";
|
|
1337
1295
|
return this;
|
|
1338
1296
|
},
|
|
1339
1297
|
getSetting: function getSetting(key) {
|
|
@@ -1357,8 +1315,8 @@ var register$2 = function register(el, dialog) {
|
|
|
1357
1315
|
set state(value) {
|
|
1358
1316
|
__state = value;
|
|
1359
1317
|
// Save 'opened' and 'closed' states to store if mode is inline.
|
|
1360
|
-
if (value ===
|
|
1361
|
-
if (this.mode ===
|
|
1318
|
+
if (value === "opened" || value === "closed") {
|
|
1319
|
+
if (this.mode === "inline") root.store.set(this.id, this.state);
|
|
1362
1320
|
}
|
|
1363
1321
|
},
|
|
1364
1322
|
get mode() {
|
|
@@ -1371,23 +1329,23 @@ var register$2 = function register(el, dialog) {
|
|
|
1371
1329
|
}, methods);
|
|
1372
1330
|
|
|
1373
1331
|
// Create the state var with the initial state.
|
|
1374
|
-
var __state = el.classList.contains(entry.getSetting(
|
|
1332
|
+
var __state = el.classList.contains(entry.getSetting("stateOpened")) ? "opened" : "closed";
|
|
1375
1333
|
|
|
1376
1334
|
// Create the mode var with the initial mode.
|
|
1377
|
-
var __mode = el.classList.contains(entry.getSetting(
|
|
1335
|
+
var __mode = el.classList.contains(entry.getSetting("classModal")) ? "modal" : "inline";
|
|
1378
1336
|
|
|
1379
1337
|
// Setup mode specific attributes.
|
|
1380
|
-
if (entry.mode ===
|
|
1338
|
+
if (entry.mode === "modal") {
|
|
1381
1339
|
// Set aria-modal attribute to true.
|
|
1382
|
-
entry.dialog.setAttribute(
|
|
1340
|
+
entry.dialog.setAttribute("aria-modal", "true");
|
|
1383
1341
|
} else {
|
|
1384
1342
|
// Remove the aria-modal attribute.
|
|
1385
|
-
entry.dialog.removeAttribute(
|
|
1343
|
+
entry.dialog.removeAttribute("aria-modal");
|
|
1386
1344
|
}
|
|
1387
1345
|
|
|
1388
1346
|
// Set tabindex="-1" so dialog is focusable via JS or click.
|
|
1389
|
-
if (entry.getSetting(
|
|
1390
|
-
entry.dialog.setAttribute(
|
|
1347
|
+
if (entry.getSetting("setTabindex")) {
|
|
1348
|
+
entry.dialog.setAttribute("tabindex", "-1");
|
|
1391
1349
|
}
|
|
1392
1350
|
|
|
1393
1351
|
// Add entry to collection.
|
|
@@ -1416,15 +1374,14 @@ var register$2 = function register(el, dialog) {
|
|
|
1416
1374
|
var _handleClick$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
|
|
1417
1375
|
var _handleKeydown$2 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
|
|
1418
1376
|
var Drawer = /*#__PURE__*/function (_Collection) {
|
|
1419
|
-
_inheritsLoose(Drawer, _Collection);
|
|
1420
1377
|
function Drawer(options) {
|
|
1421
1378
|
var _this;
|
|
1422
1379
|
_this = _Collection.call(this) || this;
|
|
1423
|
-
Object.defineProperty(
|
|
1380
|
+
Object.defineProperty(_this, _handleClick$1, {
|
|
1424
1381
|
writable: true,
|
|
1425
1382
|
value: void 0
|
|
1426
1383
|
});
|
|
1427
|
-
Object.defineProperty(
|
|
1384
|
+
Object.defineProperty(_this, _handleKeydown$2, {
|
|
1428
1385
|
writable: true,
|
|
1429
1386
|
value: void 0
|
|
1430
1387
|
});
|
|
@@ -1434,11 +1391,12 @@ var Drawer = /*#__PURE__*/function (_Collection) {
|
|
|
1434
1391
|
|
|
1435
1392
|
// Setup local store for inline drawer state management.
|
|
1436
1393
|
_this.store = localStore(_this.settings.storeKey, _this.settings.store);
|
|
1437
|
-
_classPrivateFieldLooseBase(
|
|
1438
|
-
_classPrivateFieldLooseBase(
|
|
1394
|
+
_classPrivateFieldLooseBase(_this, _handleClick$1)[_handleClick$1] = handleClick$2.bind(_this);
|
|
1395
|
+
_classPrivateFieldLooseBase(_this, _handleKeydown$2)[_handleKeydown$2] = handleKeydown$2.bind(_this);
|
|
1439
1396
|
if (_this.settings.autoInit) _this.init();
|
|
1440
1397
|
return _this;
|
|
1441
1398
|
}
|
|
1399
|
+
_inheritsLoose(Drawer, _Collection);
|
|
1442
1400
|
var _proto = Drawer.prototype;
|
|
1443
1401
|
_proto.init = function init(options) {
|
|
1444
1402
|
if (options === void 0) {
|
|
@@ -1480,12 +1438,12 @@ var Drawer = /*#__PURE__*/function (_Collection) {
|
|
|
1480
1438
|
}
|
|
1481
1439
|
};
|
|
1482
1440
|
_proto.initEventListeners = function initEventListeners() {
|
|
1483
|
-
document.addEventListener(
|
|
1484
|
-
document.addEventListener(
|
|
1441
|
+
document.addEventListener("click", _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
|
|
1442
|
+
document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
|
|
1485
1443
|
};
|
|
1486
1444
|
_proto.destroyEventListeners = function destroyEventListeners() {
|
|
1487
|
-
document.removeEventListener(
|
|
1488
|
-
document.removeEventListener(
|
|
1445
|
+
document.removeEventListener("click", _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
|
|
1446
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
|
|
1489
1447
|
};
|
|
1490
1448
|
_proto.register = function register(query) {
|
|
1491
1449
|
var els = getDrawerElements.call(this, query);
|
|
@@ -1505,48 +1463,47 @@ var Drawer = /*#__PURE__*/function (_Collection) {
|
|
|
1505
1463
|
_proto.toggle = function toggle$1(id, transition, focus) {
|
|
1506
1464
|
return toggle.call(this, id, transition, focus);
|
|
1507
1465
|
};
|
|
1508
|
-
_createClass(Drawer, [{
|
|
1466
|
+
return _createClass(Drawer, [{
|
|
1509
1467
|
key: "activeModal",
|
|
1510
1468
|
get: function get() {
|
|
1511
1469
|
return this.collection.find(function (entry) {
|
|
1512
|
-
return entry.state ===
|
|
1470
|
+
return entry.state === "opened" && entry.mode === "modal";
|
|
1513
1471
|
});
|
|
1514
1472
|
}
|
|
1515
1473
|
}]);
|
|
1516
|
-
return Drawer;
|
|
1517
1474
|
}(Collection);
|
|
1518
1475
|
|
|
1519
1476
|
var defaults$1 = {
|
|
1520
1477
|
autoInit: false,
|
|
1521
1478
|
// Data attributes
|
|
1522
|
-
dataOpen:
|
|
1523
|
-
dataClose:
|
|
1524
|
-
dataReplace:
|
|
1525
|
-
dataConfig:
|
|
1479
|
+
dataOpen: "modal-open",
|
|
1480
|
+
dataClose: "modal-close",
|
|
1481
|
+
dataReplace: "modal-replace",
|
|
1482
|
+
dataConfig: "modal-config",
|
|
1526
1483
|
// Selectors
|
|
1527
|
-
selectorModal:
|
|
1528
|
-
selectorDialog:
|
|
1529
|
-
selectorRequired:
|
|
1530
|
-
selectorFocus:
|
|
1484
|
+
selectorModal: ".modal",
|
|
1485
|
+
selectorDialog: ".modal__dialog",
|
|
1486
|
+
selectorRequired: "[role=\"alertdialog\"]",
|
|
1487
|
+
selectorFocus: "[data-focus]",
|
|
1531
1488
|
selectorInert: null,
|
|
1532
|
-
selectorOverflow:
|
|
1489
|
+
selectorOverflow: "body",
|
|
1533
1490
|
// State classes
|
|
1534
|
-
stateOpened:
|
|
1535
|
-
stateOpening:
|
|
1536
|
-
stateClosing:
|
|
1537
|
-
stateClosed:
|
|
1491
|
+
stateOpened: "is-opened",
|
|
1492
|
+
stateOpening: "is-opening",
|
|
1493
|
+
stateClosing: "is-closing",
|
|
1494
|
+
stateClosed: "is-closed",
|
|
1538
1495
|
// Feature settings
|
|
1539
|
-
customEventPrefix:
|
|
1496
|
+
customEventPrefix: "modal:",
|
|
1540
1497
|
eventListeners: true,
|
|
1541
1498
|
teleport: null,
|
|
1542
|
-
teleportMethod:
|
|
1499
|
+
teleportMethod: "append",
|
|
1543
1500
|
setTabindex: true,
|
|
1544
1501
|
transition: true
|
|
1545
1502
|
};
|
|
1546
1503
|
|
|
1547
1504
|
function getModal(query) {
|
|
1548
1505
|
// Get the entry from collection.
|
|
1549
|
-
var entry = typeof query ===
|
|
1506
|
+
var entry = typeof query === "string" ? this.get(query) : this.get(query.id);
|
|
1550
1507
|
|
|
1551
1508
|
// Return entry if it was resolved, otherwise throw error.
|
|
1552
1509
|
if (entry) {
|
|
@@ -1558,12 +1515,12 @@ function getModal(query) {
|
|
|
1558
1515
|
|
|
1559
1516
|
function getModalID(obj) {
|
|
1560
1517
|
// If it's a string, return the string.
|
|
1561
|
-
if (typeof obj ===
|
|
1518
|
+
if (typeof obj === "string") {
|
|
1562
1519
|
return obj;
|
|
1563
1520
|
}
|
|
1564
1521
|
|
|
1565
1522
|
// If it's an HTML element.
|
|
1566
|
-
else if (typeof obj.hasAttribute ===
|
|
1523
|
+
else if (typeof obj.hasAttribute === "function") {
|
|
1567
1524
|
// If it's a modal open trigger, return data value.
|
|
1568
1525
|
if (obj.hasAttribute("data-" + this.settings.dataOpen)) {
|
|
1569
1526
|
return obj.getAttribute("data-" + this.settings.dataOpen);
|
|
@@ -1609,7 +1566,7 @@ function getModalElements(query) {
|
|
|
1609
1566
|
};
|
|
1610
1567
|
} else if (!dialog) {
|
|
1611
1568
|
return {
|
|
1612
|
-
error: new Error(
|
|
1569
|
+
error: new Error("Modal is missing dialog element.")
|
|
1613
1570
|
};
|
|
1614
1571
|
} else {
|
|
1615
1572
|
return {
|
|
@@ -1619,7 +1576,7 @@ function getModalElements(query) {
|
|
|
1619
1576
|
}
|
|
1620
1577
|
} else {
|
|
1621
1578
|
return {
|
|
1622
|
-
error: new Error(
|
|
1579
|
+
error: new Error("Could not resolve the modal ID.")
|
|
1623
1580
|
};
|
|
1624
1581
|
}
|
|
1625
1582
|
}
|
|
@@ -1662,7 +1619,7 @@ var handleClick$1 = function handleClick(event) {
|
|
|
1662
1619
|
// Get the value of the data attribute.
|
|
1663
1620
|
var value = trigger.getAttribute("data-" + _this.settings.dataClose);
|
|
1664
1621
|
// Close all if * wildcard is passed, otherwise close a single modal.
|
|
1665
|
-
return Promise.resolve(value ===
|
|
1622
|
+
return Promise.resolve(value === "*" ? _this.closeAll() : _this.close(value));
|
|
1666
1623
|
}
|
|
1667
1624
|
|
|
1668
1625
|
// If the modal screen was clicked, close the modal.
|
|
@@ -1676,7 +1633,7 @@ var handleClick$1 = function handleClick(event) {
|
|
|
1676
1633
|
};
|
|
1677
1634
|
function handleKeydown$1(event) {
|
|
1678
1635
|
// If escape key was pressed.
|
|
1679
|
-
if (event.key ===
|
|
1636
|
+
if (event.key === "Escape") {
|
|
1680
1637
|
// If a modal is opened and not required, close the modal.
|
|
1681
1638
|
if (this.active && !this.active.dialog.matches(this.settings.selectorRequired)) {
|
|
1682
1639
|
return this.close();
|
|
@@ -1705,7 +1662,7 @@ var deregister$1 = function deregister(obj, close) {
|
|
|
1705
1662
|
if (index >= 0) {
|
|
1706
1663
|
var _temp2 = function _temp2() {
|
|
1707
1664
|
// Return teleported modal if a reference has been set.
|
|
1708
|
-
if (_entry.getSetting(
|
|
1665
|
+
if (_entry.getSetting("teleport")) {
|
|
1709
1666
|
_entry.teleportReturn();
|
|
1710
1667
|
}
|
|
1711
1668
|
|
|
@@ -1722,7 +1679,7 @@ var deregister$1 = function deregister(obj, close) {
|
|
|
1722
1679
|
|
|
1723
1680
|
// If entry is in the opened state, close it.
|
|
1724
1681
|
var _temp = function () {
|
|
1725
|
-
if (close && _entry.state ===
|
|
1682
|
+
if (close && _entry.state === "opened") {
|
|
1726
1683
|
return Promise.resolve(_entry.close(false)).then(function () {});
|
|
1727
1684
|
} else {
|
|
1728
1685
|
// Remove modal from stack.
|
|
@@ -1750,7 +1707,7 @@ var open$1 = function open(query, transition, focus) {
|
|
|
1750
1707
|
}
|
|
1751
1708
|
|
|
1752
1709
|
// Dispatch custom opened event.
|
|
1753
|
-
modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix +
|
|
1710
|
+
modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "opened", {
|
|
1754
1711
|
detail: _this,
|
|
1755
1712
|
bubbles: true
|
|
1756
1713
|
}));
|
|
@@ -1773,9 +1730,9 @@ var open$1 = function open(query, transition, focus) {
|
|
|
1773
1730
|
|
|
1774
1731
|
// If modal is closed.
|
|
1775
1732
|
var _temp = function () {
|
|
1776
|
-
if (modal.state ===
|
|
1733
|
+
if (modal.state === "closed") {
|
|
1777
1734
|
// Update modal state.
|
|
1778
|
-
modal.state =
|
|
1735
|
+
modal.state = "opening";
|
|
1779
1736
|
|
|
1780
1737
|
// Add modal to stack.
|
|
1781
1738
|
_this.stack.add(modal);
|
|
@@ -1783,7 +1740,7 @@ var open$1 = function open(query, transition, focus) {
|
|
|
1783
1740
|
// Run the open transition.
|
|
1784
1741
|
return Promise.resolve(openTransition(modal.el, config)).then(function () {
|
|
1785
1742
|
// Update modal state.
|
|
1786
|
-
modal.state =
|
|
1743
|
+
modal.state = "opened";
|
|
1787
1744
|
});
|
|
1788
1745
|
}
|
|
1789
1746
|
}();
|
|
@@ -1804,9 +1761,9 @@ var close$1 = function close(query, transition, focus) {
|
|
|
1804
1761
|
|
|
1805
1762
|
// If a modal exists and its state is opened.
|
|
1806
1763
|
var _temp = function () {
|
|
1807
|
-
if (modal && modal.state ===
|
|
1764
|
+
if (modal && modal.state === "opened") {
|
|
1808
1765
|
// Update modal state.
|
|
1809
|
-
modal.state =
|
|
1766
|
+
modal.state = "closing";
|
|
1810
1767
|
|
|
1811
1768
|
// Get the modal configuration.
|
|
1812
1769
|
var config = _extends({}, _this.settings, modal.settings);
|
|
@@ -1828,10 +1785,10 @@ var close$1 = function close(query, transition, focus) {
|
|
|
1828
1785
|
}
|
|
1829
1786
|
|
|
1830
1787
|
// Update modal state.
|
|
1831
|
-
modal.state =
|
|
1788
|
+
modal.state = "closed";
|
|
1832
1789
|
|
|
1833
1790
|
// Dispatch custom closed event.
|
|
1834
|
-
modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix +
|
|
1791
|
+
modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "closed", {
|
|
1835
1792
|
detail: _this,
|
|
1836
1793
|
bubbles: true
|
|
1837
1794
|
}));
|
|
@@ -1902,7 +1859,7 @@ var replace = function replace(query, transition, focus) {
|
|
|
1902
1859
|
// Setup results for return.
|
|
1903
1860
|
var resultOpened, resultClosed;
|
|
1904
1861
|
var _temp = function () {
|
|
1905
|
-
if (modal.state ===
|
|
1862
|
+
if (modal.state === "opened") {
|
|
1906
1863
|
// If modal is open, close all modals except for replacement.
|
|
1907
1864
|
resultOpened = modal;
|
|
1908
1865
|
return Promise.resolve(closeAll$1.call(_this, modal.id, transition)).then(function (_closeAll$call) {
|
|
@@ -1945,16 +1902,16 @@ var register$1 = function register(el, dialog) {
|
|
|
1945
1902
|
},
|
|
1946
1903
|
teleport: function teleport$1(ref, method) {
|
|
1947
1904
|
if (ref === void 0) {
|
|
1948
|
-
ref = this.getSetting(
|
|
1905
|
+
ref = this.getSetting("teleport");
|
|
1949
1906
|
}
|
|
1950
1907
|
if (method === void 0) {
|
|
1951
|
-
method = this.getSetting(
|
|
1908
|
+
method = this.getSetting("teleportMethod");
|
|
1952
1909
|
}
|
|
1953
1910
|
if (!this.returnRef) {
|
|
1954
1911
|
this.returnRef = teleport(this.el, ref, method);
|
|
1955
1912
|
return this.el;
|
|
1956
1913
|
} else {
|
|
1957
|
-
console.error(
|
|
1914
|
+
console.error("Element has already been teleported:", this.el);
|
|
1958
1915
|
return false;
|
|
1959
1916
|
}
|
|
1960
1917
|
},
|
|
@@ -1963,7 +1920,7 @@ var register$1 = function register(el, dialog) {
|
|
|
1963
1920
|
this.returnRef = teleport(this.el, this.returnRef);
|
|
1964
1921
|
return this.el;
|
|
1965
1922
|
} else {
|
|
1966
|
-
console.error(
|
|
1923
|
+
console.error("No return reference found:", this.el);
|
|
1967
1924
|
return false;
|
|
1968
1925
|
}
|
|
1969
1926
|
},
|
|
@@ -1975,7 +1932,7 @@ var register$1 = function register(el, dialog) {
|
|
|
1975
1932
|
// Setup the modal object.
|
|
1976
1933
|
var entry = _extends({
|
|
1977
1934
|
id: el.id,
|
|
1978
|
-
state:
|
|
1935
|
+
state: "closed",
|
|
1979
1936
|
el: el,
|
|
1980
1937
|
dialog: dialog,
|
|
1981
1938
|
returnRef: null,
|
|
@@ -1983,20 +1940,20 @@ var register$1 = function register(el, dialog) {
|
|
|
1983
1940
|
}, methods);
|
|
1984
1941
|
|
|
1985
1942
|
// Set aria-modal attribute to true.
|
|
1986
|
-
entry.dialog.setAttribute(
|
|
1943
|
+
entry.dialog.setAttribute("aria-modal", "true");
|
|
1987
1944
|
|
|
1988
1945
|
// If a role attribute is not set, set it to "dialog" as the default.
|
|
1989
|
-
if (!entry.dialog.hasAttribute(
|
|
1990
|
-
entry.dialog.setAttribute(
|
|
1946
|
+
if (!entry.dialog.hasAttribute("role")) {
|
|
1947
|
+
entry.dialog.setAttribute("role", "dialog");
|
|
1991
1948
|
}
|
|
1992
1949
|
|
|
1993
1950
|
// Set tabindex="-1" so dialog is focusable via JS or click.
|
|
1994
|
-
if (entry.getSetting(
|
|
1995
|
-
entry.dialog.setAttribute(
|
|
1951
|
+
if (entry.getSetting("setTabindex")) {
|
|
1952
|
+
entry.dialog.setAttribute("tabindex", "-1");
|
|
1996
1953
|
}
|
|
1997
1954
|
|
|
1998
1955
|
// Teleport modal if a reference has been set.
|
|
1999
|
-
if (entry.getSetting(
|
|
1956
|
+
if (entry.getSetting("teleport")) {
|
|
2000
1957
|
entry.teleport();
|
|
2001
1958
|
}
|
|
2002
1959
|
|
|
@@ -2038,7 +1995,7 @@ function stack(settings) {
|
|
|
2038
1995
|
updateIndex: function updateIndex() {
|
|
2039
1996
|
stackArray.forEach(function (entry, index) {
|
|
2040
1997
|
entry.el.style.zIndex = null;
|
|
2041
|
-
var value = getComputedStyle(entry.el)[
|
|
1998
|
+
var value = getComputedStyle(entry.el)["z-index"];
|
|
2042
1999
|
entry.el.style.zIndex = parseInt(value) + index + 1;
|
|
2043
2000
|
});
|
|
2044
2001
|
},
|
|
@@ -2049,7 +2006,7 @@ function stack(settings) {
|
|
|
2049
2006
|
add: function add(entry) {
|
|
2050
2007
|
// Apply z-index styles based on stack length.
|
|
2051
2008
|
entry.el.style.zIndex = null;
|
|
2052
|
-
var value = getComputedStyle(entry.el)[
|
|
2009
|
+
var value = getComputedStyle(entry.el)["z-index"];
|
|
2053
2010
|
entry.el.style.zIndex = parseInt(value) + stackArray.length + 1;
|
|
2054
2011
|
|
|
2055
2012
|
// Move back to end of stack.
|
|
@@ -2097,15 +2054,14 @@ function stack(settings) {
|
|
|
2097
2054
|
var _handleClick = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
|
|
2098
2055
|
var _handleKeydown$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
|
|
2099
2056
|
var Modal = /*#__PURE__*/function (_Collection) {
|
|
2100
|
-
_inheritsLoose(Modal, _Collection);
|
|
2101
2057
|
function Modal(options) {
|
|
2102
2058
|
var _this;
|
|
2103
2059
|
_this = _Collection.call(this) || this;
|
|
2104
|
-
Object.defineProperty(
|
|
2060
|
+
Object.defineProperty(_this, _handleClick, {
|
|
2105
2061
|
writable: true,
|
|
2106
2062
|
value: void 0
|
|
2107
2063
|
});
|
|
2108
|
-
Object.defineProperty(
|
|
2064
|
+
Object.defineProperty(_this, _handleKeydown$1, {
|
|
2109
2065
|
writable: true,
|
|
2110
2066
|
value: void 0
|
|
2111
2067
|
});
|
|
@@ -2116,11 +2072,12 @@ var Modal = /*#__PURE__*/function (_Collection) {
|
|
|
2116
2072
|
|
|
2117
2073
|
// Setup stack module.
|
|
2118
2074
|
_this.stack = stack(_this.settings);
|
|
2119
|
-
_classPrivateFieldLooseBase(
|
|
2120
|
-
_classPrivateFieldLooseBase(
|
|
2075
|
+
_classPrivateFieldLooseBase(_this, _handleClick)[_handleClick] = handleClick$1.bind(_this);
|
|
2076
|
+
_classPrivateFieldLooseBase(_this, _handleKeydown$1)[_handleKeydown$1] = handleKeydown$1.bind(_this);
|
|
2121
2077
|
if (_this.settings.autoInit) _this.init();
|
|
2122
2078
|
return _this;
|
|
2123
2079
|
}
|
|
2080
|
+
_inheritsLoose(Modal, _Collection);
|
|
2124
2081
|
var _proto = Modal.prototype;
|
|
2125
2082
|
_proto.init = function init(options) {
|
|
2126
2083
|
try {
|
|
@@ -2162,12 +2119,12 @@ var Modal = /*#__PURE__*/function (_Collection) {
|
|
|
2162
2119
|
}
|
|
2163
2120
|
};
|
|
2164
2121
|
_proto.initEventListeners = function initEventListeners() {
|
|
2165
|
-
document.addEventListener(
|
|
2166
|
-
document.addEventListener(
|
|
2122
|
+
document.addEventListener("click", _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
|
|
2123
|
+
document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
|
|
2167
2124
|
};
|
|
2168
2125
|
_proto.destroyEventListeners = function destroyEventListeners() {
|
|
2169
|
-
document.removeEventListener(
|
|
2170
|
-
document.removeEventListener(
|
|
2126
|
+
document.removeEventListener("click", _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
|
|
2127
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
|
|
2171
2128
|
};
|
|
2172
2129
|
_proto.register = function register(query) {
|
|
2173
2130
|
var els = getModalElements.call(this, query);
|
|
@@ -2207,26 +2164,25 @@ var Modal = /*#__PURE__*/function (_Collection) {
|
|
|
2207
2164
|
return Promise.reject(e);
|
|
2208
2165
|
}
|
|
2209
2166
|
};
|
|
2210
|
-
_createClass(Modal, [{
|
|
2167
|
+
return _createClass(Modal, [{
|
|
2211
2168
|
key: "active",
|
|
2212
2169
|
get: function get() {
|
|
2213
2170
|
return this.stack.top;
|
|
2214
2171
|
}
|
|
2215
2172
|
}]);
|
|
2216
|
-
return Modal;
|
|
2217
2173
|
}(Collection);
|
|
2218
2174
|
|
|
2219
2175
|
var defaults = {
|
|
2220
2176
|
autoInit: false,
|
|
2221
2177
|
// Selectors
|
|
2222
|
-
selectorPopover:
|
|
2223
|
-
selectorArrow:
|
|
2178
|
+
selectorPopover: ".popover",
|
|
2179
|
+
selectorArrow: ".popover__arrow",
|
|
2224
2180
|
// State classes
|
|
2225
|
-
stateActive:
|
|
2181
|
+
stateActive: "is-active",
|
|
2226
2182
|
// Feature settings
|
|
2227
2183
|
eventListeners: true,
|
|
2228
|
-
eventType:
|
|
2229
|
-
placement:
|
|
2184
|
+
eventType: "click",
|
|
2185
|
+
placement: "bottom"
|
|
2230
2186
|
};
|
|
2231
2187
|
|
|
2232
2188
|
function getConfig(el, settings) {
|
|
@@ -2235,19 +2191,19 @@ function getConfig(el, settings) {
|
|
|
2235
2191
|
|
|
2236
2192
|
// Setup the config obj with default values.
|
|
2237
2193
|
var config = {
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2194
|
+
"placement": settings.placement,
|
|
2195
|
+
"event": settings.eventType,
|
|
2196
|
+
"offset": 0,
|
|
2197
|
+
"overflow-padding": 0,
|
|
2198
|
+
"flip-padding": 0,
|
|
2199
|
+
"arrow-element": settings.selectorArrow,
|
|
2200
|
+
"arrow-padding": 0
|
|
2245
2201
|
};
|
|
2246
2202
|
|
|
2247
2203
|
// Loop through config obj.
|
|
2248
2204
|
for (var prop in config) {
|
|
2249
2205
|
// Get the CSS variable property values.
|
|
2250
|
-
var prefix =
|
|
2206
|
+
var prefix = P();
|
|
2251
2207
|
var value = styles.getPropertyValue("--" + prefix + "popover-" + prop).trim();
|
|
2252
2208
|
|
|
2253
2209
|
// If a value was found, replace the default in config obj.
|
|
@@ -2264,7 +2220,7 @@ function getPadding(value) {
|
|
|
2264
2220
|
var padding;
|
|
2265
2221
|
|
|
2266
2222
|
// Split the value by spaces if it's a string.
|
|
2267
|
-
var array = typeof value ===
|
|
2223
|
+
var array = typeof value === "string" ? value.trim().split(" ") : [value];
|
|
2268
2224
|
|
|
2269
2225
|
// Convert individual values to integers.
|
|
2270
2226
|
array.forEach(function (item, index) {
|
|
@@ -2311,32 +2267,32 @@ function getPadding(value) {
|
|
|
2311
2267
|
|
|
2312
2268
|
function getModifiers(options) {
|
|
2313
2269
|
return [{
|
|
2314
|
-
name:
|
|
2270
|
+
name: "offset",
|
|
2315
2271
|
options: {
|
|
2316
|
-
offset: [0, parseInt(options[
|
|
2272
|
+
offset: [0, parseInt(options["offset"], 10)]
|
|
2317
2273
|
}
|
|
2318
2274
|
}, {
|
|
2319
|
-
name:
|
|
2275
|
+
name: "preventOverflow",
|
|
2320
2276
|
options: {
|
|
2321
|
-
padding: getPadding(options[
|
|
2277
|
+
padding: getPadding(options["overflow-padding"])
|
|
2322
2278
|
}
|
|
2323
2279
|
}, {
|
|
2324
|
-
name:
|
|
2280
|
+
name: "flip",
|
|
2325
2281
|
options: {
|
|
2326
|
-
padding: getPadding(options[
|
|
2282
|
+
padding: getPadding(options["flip-padding"])
|
|
2327
2283
|
}
|
|
2328
2284
|
}, {
|
|
2329
|
-
name:
|
|
2285
|
+
name: "arrow",
|
|
2330
2286
|
options: {
|
|
2331
|
-
element: options[
|
|
2332
|
-
padding: getPadding(options[
|
|
2287
|
+
element: options["arrow-element"],
|
|
2288
|
+
padding: getPadding(options["arrow-padding"])
|
|
2333
2289
|
}
|
|
2334
2290
|
}];
|
|
2335
2291
|
}
|
|
2336
2292
|
|
|
2337
2293
|
function getPopover(query) {
|
|
2338
2294
|
// Get the entry from collection.
|
|
2339
|
-
var entry = typeof query ===
|
|
2295
|
+
var entry = typeof query === "string" ? this.get(query) : this.get(query.id);
|
|
2340
2296
|
|
|
2341
2297
|
// Return entry if it was resolved, otherwise throw error.
|
|
2342
2298
|
if (entry) {
|
|
@@ -2348,12 +2304,12 @@ function getPopover(query) {
|
|
|
2348
2304
|
|
|
2349
2305
|
function getPopoverID(obj) {
|
|
2350
2306
|
// If it's a string, return the string.
|
|
2351
|
-
if (typeof obj ===
|
|
2307
|
+
if (typeof obj === "string") {
|
|
2352
2308
|
return obj;
|
|
2353
2309
|
}
|
|
2354
2310
|
|
|
2355
2311
|
// If it's an HTML element.
|
|
2356
|
-
else if (typeof obj.hasAttribute ===
|
|
2312
|
+
else if (typeof obj.hasAttribute === "function") {
|
|
2357
2313
|
// If it's a popover element, return the id.
|
|
2358
2314
|
if (obj.closest(this.settings.selectorPopover)) {
|
|
2359
2315
|
obj = obj.closest(this.settings.selectorPopover);
|
|
@@ -2361,13 +2317,13 @@ function getPopoverID(obj) {
|
|
|
2361
2317
|
}
|
|
2362
2318
|
|
|
2363
2319
|
// If it's a popover trigger, return value of aria-controls.
|
|
2364
|
-
else if (obj.hasAttribute(
|
|
2365
|
-
return obj.getAttribute(
|
|
2320
|
+
else if (obj.hasAttribute("aria-controls")) {
|
|
2321
|
+
return obj.getAttribute("aria-controls");
|
|
2366
2322
|
}
|
|
2367
2323
|
|
|
2368
2324
|
// If it's a popover tooltip trigger, return the value of aria-describedby.
|
|
2369
|
-
else if (obj.hasAttribute(
|
|
2370
|
-
return obj.getAttribute(
|
|
2325
|
+
else if (obj.hasAttribute("aria-describedby")) {
|
|
2326
|
+
return obj.getAttribute("aria-describedby");
|
|
2371
2327
|
}
|
|
2372
2328
|
|
|
2373
2329
|
// Return false if no id was found.
|
|
@@ -2394,11 +2350,11 @@ function getPopoverElements(query) {
|
|
|
2394
2350
|
};
|
|
2395
2351
|
} else if (!trigger) {
|
|
2396
2352
|
return {
|
|
2397
|
-
error: new Error(
|
|
2353
|
+
error: new Error("No popover trigger associated with the provided popover.")
|
|
2398
2354
|
};
|
|
2399
2355
|
} else if (!popover) {
|
|
2400
2356
|
return {
|
|
2401
|
-
error: new Error(
|
|
2357
|
+
error: new Error("No popover associated with the provided popover trigger.")
|
|
2402
2358
|
};
|
|
2403
2359
|
} else {
|
|
2404
2360
|
return {
|
|
@@ -2408,7 +2364,7 @@ function getPopoverElements(query) {
|
|
|
2408
2364
|
}
|
|
2409
2365
|
} else {
|
|
2410
2366
|
return {
|
|
2411
|
-
error: new Error(
|
|
2367
|
+
error: new Error("Could not resolve the popover ID.")
|
|
2412
2368
|
};
|
|
2413
2369
|
}
|
|
2414
2370
|
}
|
|
@@ -2420,7 +2376,7 @@ var closeAll = function closeAll() {
|
|
|
2420
2376
|
return Promise.resolve(Promise.all(_this2.collection.map(function (popover) {
|
|
2421
2377
|
try {
|
|
2422
2378
|
var _temp2 = function () {
|
|
2423
|
-
if (popover.state ===
|
|
2379
|
+
if (popover.state === "opened") {
|
|
2424
2380
|
var _push = result.push;
|
|
2425
2381
|
return Promise.resolve(close.call(_this2, popover)).then(function (_close$call) {
|
|
2426
2382
|
_push.call(result, _close$call);
|
|
@@ -2442,25 +2398,25 @@ var close = function close(query) {
|
|
|
2442
2398
|
try {
|
|
2443
2399
|
var _temp = function _temp(popover) {
|
|
2444
2400
|
// If a modal exists and its state is opened.
|
|
2445
|
-
if (popover && popover.state ===
|
|
2401
|
+
if (popover && popover.state === "opened") {
|
|
2446
2402
|
// Update state class.
|
|
2447
2403
|
popover.el.classList.remove(_this.settings.stateActive);
|
|
2448
2404
|
|
|
2449
2405
|
// Update accessibility attribute(s).
|
|
2450
|
-
if (popover.trigger.hasAttribute(
|
|
2451
|
-
popover.trigger.setAttribute(
|
|
2406
|
+
if (popover.trigger.hasAttribute("aria-controls")) {
|
|
2407
|
+
popover.trigger.setAttribute("aria-expanded", "false");
|
|
2452
2408
|
}
|
|
2453
2409
|
|
|
2454
2410
|
// Disable popper event listeners.
|
|
2455
2411
|
popover.popper.setOptions({
|
|
2456
2412
|
modifiers: [{
|
|
2457
|
-
name:
|
|
2413
|
+
name: "eventListeners",
|
|
2458
2414
|
enabled: false
|
|
2459
2415
|
}]
|
|
2460
2416
|
});
|
|
2461
2417
|
|
|
2462
2418
|
// Update popover state.
|
|
2463
|
-
popover.state =
|
|
2419
|
+
popover.state = "closed";
|
|
2464
2420
|
|
|
2465
2421
|
// Clear root trigger if popover trigger matches.
|
|
2466
2422
|
if (popover.trigger === _this.trigger) {
|
|
@@ -2480,12 +2436,12 @@ var close = function close(query) {
|
|
|
2480
2436
|
};
|
|
2481
2437
|
function closeCheck(popover) {
|
|
2482
2438
|
// Only run closeCheck if provided popover is currently open.
|
|
2483
|
-
if (popover.state !=
|
|
2439
|
+
if (popover.state != "opened") return;
|
|
2484
2440
|
|
|
2485
2441
|
// Needed to correctly check which element is currently being focused.
|
|
2486
2442
|
setTimeout(function () {
|
|
2487
2443
|
// Check if trigger or element are being hovered.
|
|
2488
|
-
var isHovered = popover.el.closest(
|
|
2444
|
+
var isHovered = popover.el.closest(":hover") === popover.el || popover.trigger.closest(":hover") === popover.trigger;
|
|
2489
2445
|
|
|
2490
2446
|
// Check if trigger or element are being focused.
|
|
2491
2447
|
var isFocused = document.activeElement.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"], [aria-describedby=\"" + popover.id + "\"]");
|
|
@@ -2501,7 +2457,7 @@ function closeCheck(popover) {
|
|
|
2501
2457
|
}
|
|
2502
2458
|
|
|
2503
2459
|
function handleClick(popover) {
|
|
2504
|
-
if (popover.state ===
|
|
2460
|
+
if (popover.state === "opened") {
|
|
2505
2461
|
popover.close();
|
|
2506
2462
|
} else {
|
|
2507
2463
|
this.trigger = popover.trigger;
|
|
@@ -2512,13 +2468,13 @@ function handleClick(popover) {
|
|
|
2512
2468
|
function handleKeydown(event) {
|
|
2513
2469
|
var _this = this;
|
|
2514
2470
|
switch (event.key) {
|
|
2515
|
-
case
|
|
2471
|
+
case "Escape":
|
|
2516
2472
|
if (this.trigger) {
|
|
2517
2473
|
this.trigger.focus();
|
|
2518
2474
|
}
|
|
2519
2475
|
closeAll.call(this);
|
|
2520
2476
|
return;
|
|
2521
|
-
case
|
|
2477
|
+
case "Tab":
|
|
2522
2478
|
this.collection.forEach(function (popover) {
|
|
2523
2479
|
closeCheck.call(_this, popover);
|
|
2524
2480
|
});
|
|
@@ -2529,7 +2485,7 @@ function handleKeydown(event) {
|
|
|
2529
2485
|
}
|
|
2530
2486
|
function handleDocumentClick(popover) {
|
|
2531
2487
|
var root = this;
|
|
2532
|
-
document.addEventListener(
|
|
2488
|
+
document.addEventListener("click", function _f(event) {
|
|
2533
2489
|
// Check if a popover or its trigger was clicked.
|
|
2534
2490
|
var wasClicked = event.target.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"], [aria-describedby=\"" + popover.id + "\"]");
|
|
2535
2491
|
|
|
@@ -2537,14 +2493,14 @@ function handleDocumentClick(popover) {
|
|
|
2537
2493
|
if (wasClicked) {
|
|
2538
2494
|
// If popover element exists and is not active...
|
|
2539
2495
|
if (popover.el && !popover.el.classList.contains(root.settings.stateActive)) {
|
|
2540
|
-
this.removeEventListener(
|
|
2496
|
+
this.removeEventListener("click", _f);
|
|
2541
2497
|
}
|
|
2542
2498
|
} else {
|
|
2543
2499
|
// If popover element exists and is active...
|
|
2544
2500
|
if (popover.el && popover.el.classList.contains(root.settings.stateActive)) {
|
|
2545
2501
|
popover.close();
|
|
2546
2502
|
}
|
|
2547
|
-
this.removeEventListener(
|
|
2503
|
+
this.removeEventListener("click", _f);
|
|
2548
2504
|
}
|
|
2549
2505
|
});
|
|
2550
2506
|
}
|
|
@@ -4355,7 +4311,7 @@ var deregister = function deregister(obj) {
|
|
|
4355
4311
|
var entry = _this.collection[index];
|
|
4356
4312
|
|
|
4357
4313
|
// If entry is in the opened state, close it.
|
|
4358
|
-
if (entry.state ===
|
|
4314
|
+
if (entry.state === "opened") {
|
|
4359
4315
|
entry.close();
|
|
4360
4316
|
}
|
|
4361
4317
|
|
|
@@ -4410,8 +4366,8 @@ var open = function open(query) {
|
|
|
4410
4366
|
popover.el.classList.add(_this.settings.stateActive);
|
|
4411
4367
|
|
|
4412
4368
|
// Update accessibility attribute(s).
|
|
4413
|
-
if (popover.trigger.hasAttribute(
|
|
4414
|
-
popover.trigger.setAttribute(
|
|
4369
|
+
if (popover.trigger.hasAttribute("aria-controls")) {
|
|
4370
|
+
popover.trigger.setAttribute("aria-expanded", "true");
|
|
4415
4371
|
}
|
|
4416
4372
|
|
|
4417
4373
|
// Update popover config.
|
|
@@ -4419,9 +4375,9 @@ var open = function open(query) {
|
|
|
4419
4375
|
|
|
4420
4376
|
// Enable popper event listeners and set placement/modifiers.
|
|
4421
4377
|
popover.popper.setOptions({
|
|
4422
|
-
placement: popover.config[
|
|
4378
|
+
placement: popover.config["placement"],
|
|
4423
4379
|
modifiers: [{
|
|
4424
|
-
name:
|
|
4380
|
+
name: "eventListeners",
|
|
4425
4381
|
enabled: true
|
|
4426
4382
|
}].concat(getModifiers(popover.config))
|
|
4427
4383
|
});
|
|
@@ -4430,7 +4386,7 @@ var open = function open(query) {
|
|
|
4430
4386
|
popover.popper.update();
|
|
4431
4387
|
|
|
4432
4388
|
// Update popover state.
|
|
4433
|
-
popover.state =
|
|
4389
|
+
popover.state = "opened";
|
|
4434
4390
|
|
|
4435
4391
|
// Return the popover.
|
|
4436
4392
|
return Promise.resolve(popover);
|
|
@@ -4464,7 +4420,7 @@ var register = function register(el, trigger) {
|
|
|
4464
4420
|
// Setup the popover object.
|
|
4465
4421
|
var entry = _extends({
|
|
4466
4422
|
id: el.id,
|
|
4467
|
-
state:
|
|
4423
|
+
state: "closed",
|
|
4468
4424
|
el: el,
|
|
4469
4425
|
trigger: trigger,
|
|
4470
4426
|
popper: createPopper(trigger, el),
|
|
@@ -4472,8 +4428,8 @@ var register = function register(el, trigger) {
|
|
|
4472
4428
|
}, methods);
|
|
4473
4429
|
|
|
4474
4430
|
// Set aria-expanded to false if trigger has aria-controls attribute.
|
|
4475
|
-
if (entry.trigger.hasAttribute(
|
|
4476
|
-
entry.trigger.setAttribute(
|
|
4431
|
+
if (entry.trigger.hasAttribute("aria-controls")) {
|
|
4432
|
+
entry.trigger.setAttribute("aria-expanded", "false");
|
|
4477
4433
|
}
|
|
4478
4434
|
|
|
4479
4435
|
// Setup event listeners.
|
|
@@ -4502,18 +4458,18 @@ function registerEventListeners(entry) {
|
|
|
4502
4458
|
// If event listeners aren't already setup.
|
|
4503
4459
|
if (!entry.__eventListeners) {
|
|
4504
4460
|
// Add event listeners based on event type.
|
|
4505
|
-
var eventType = entry.config[
|
|
4461
|
+
var eventType = entry.config["event"];
|
|
4506
4462
|
|
|
4507
4463
|
// If the event type is hover.
|
|
4508
|
-
if (eventType ===
|
|
4464
|
+
if (eventType === "hover") {
|
|
4509
4465
|
// Setup event listeners object for hover.
|
|
4510
4466
|
entry.__eventListeners = [{
|
|
4511
|
-
el: [
|
|
4512
|
-
type: [
|
|
4467
|
+
el: ["trigger"],
|
|
4468
|
+
type: ["mouseenter", "focus"],
|
|
4513
4469
|
listener: open.bind(this, entry)
|
|
4514
4470
|
}, {
|
|
4515
|
-
el: [
|
|
4516
|
-
type: [
|
|
4471
|
+
el: ["el", "trigger"],
|
|
4472
|
+
type: ["mouseleave", "focusout"],
|
|
4517
4473
|
listener: closeCheck.bind(this, entry)
|
|
4518
4474
|
}];
|
|
4519
4475
|
|
|
@@ -4531,8 +4487,8 @@ function registerEventListeners(entry) {
|
|
|
4531
4487
|
else {
|
|
4532
4488
|
// Setup event listeners object for click.
|
|
4533
4489
|
entry.__eventListeners = [{
|
|
4534
|
-
el: [
|
|
4535
|
-
type: [
|
|
4490
|
+
el: ["trigger"],
|
|
4491
|
+
type: ["click"],
|
|
4536
4492
|
listener: handleClick.bind(this, entry)
|
|
4537
4493
|
}];
|
|
4538
4494
|
|
|
@@ -4553,21 +4509,21 @@ function registerEventListeners(entry) {
|
|
|
4553
4509
|
|
|
4554
4510
|
var _handleKeydown = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
|
|
4555
4511
|
var Popover = /*#__PURE__*/function (_Collection) {
|
|
4556
|
-
_inheritsLoose(Popover, _Collection);
|
|
4557
4512
|
function Popover(options) {
|
|
4558
4513
|
var _this;
|
|
4559
4514
|
_this = _Collection.call(this) || this;
|
|
4560
|
-
Object.defineProperty(
|
|
4515
|
+
Object.defineProperty(_this, _handleKeydown, {
|
|
4561
4516
|
writable: true,
|
|
4562
4517
|
value: void 0
|
|
4563
4518
|
});
|
|
4564
4519
|
_this.defaults = defaults;
|
|
4565
4520
|
_this.settings = _extends({}, _this.defaults, options);
|
|
4566
4521
|
_this.trigger = null;
|
|
4567
|
-
_classPrivateFieldLooseBase(
|
|
4522
|
+
_classPrivateFieldLooseBase(_this, _handleKeydown)[_handleKeydown] = handleKeydown.bind(_this);
|
|
4568
4523
|
if (_this.settings.autoInit) _this.init();
|
|
4569
4524
|
return _this;
|
|
4570
4525
|
}
|
|
4526
|
+
_inheritsLoose(Popover, _Collection);
|
|
4571
4527
|
var _proto = Popover.prototype;
|
|
4572
4528
|
_proto.init = function init(options) {
|
|
4573
4529
|
try {
|
|
@@ -4625,7 +4581,7 @@ var Popover = /*#__PURE__*/function (_Collection) {
|
|
|
4625
4581
|
}
|
|
4626
4582
|
|
|
4627
4583
|
// Add keydown global event listener.
|
|
4628
|
-
document.addEventListener(
|
|
4584
|
+
document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
|
|
4629
4585
|
};
|
|
4630
4586
|
_proto.destroyEventListeners = function destroyEventListeners(processCollection) {
|
|
4631
4587
|
if (processCollection === void 0) {
|
|
@@ -4639,7 +4595,7 @@ var Popover = /*#__PURE__*/function (_Collection) {
|
|
|
4639
4595
|
}
|
|
4640
4596
|
|
|
4641
4597
|
// Remove keydown global event listener.
|
|
4642
|
-
document.removeEventListener(
|
|
4598
|
+
document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
|
|
4643
4599
|
};
|
|
4644
4600
|
_proto.register = function register$1(query) {
|
|
4645
4601
|
var els = getPopoverElements.call(this, query);
|