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.
@@ -1,26 +1,19 @@
1
- function _extends() {
2
- _extends = Object.assign ? Object.assign.bind() : function (target) {
3
- for (var i = 1; i < arguments.length; i++) {
4
- var source = arguments[i];
5
- for (var key in source) {
6
- if (Object.prototype.hasOwnProperty.call(source, key)) {
7
- target[key] = source[key];
8
- }
9
- }
10
- }
11
- return target;
12
- };
13
- return _extends.apply(this, arguments);
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;
14
4
  }
15
5
  var id = 0;
16
- function _classPrivateFieldLooseKey(name) {
17
- return "__private_" + id++ + "_" + name;
6
+ function _classPrivateFieldLooseKey(e) {
7
+ return "__private_" + id++ + "_" + e;
18
8
  }
19
- function _classPrivateFieldLooseBase(receiver, privateKey) {
20
- if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
21
- throw new TypeError("attempted to use private field on non-instance");
22
- }
23
- return receiver;
9
+ function _extends() {
10
+ return _extends = Object.assign ? Object.assign.bind() : function (n) {
11
+ for (var e = 1; e < arguments.length; e++) {
12
+ var t = arguments[e];
13
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
14
+ }
15
+ return n;
16
+ }, _extends.apply(null, arguments);
24
17
  }
25
18
 
26
19
  var _handler = /*#__PURE__*/_classPrivateFieldLooseKey("handler");
@@ -42,8 +35,8 @@ class Breakpoint {
42
35
  set handler(func) {
43
36
  if (this.mql) {
44
37
  // Conditionally use removeListener() for IE11 support.
45
- if (typeof this.mql.removeEventListener === 'function') {
46
- this.mql.removeEventListener('change', _classPrivateFieldLooseBase(this, _handler)[_handler]);
38
+ if (typeof this.mql.removeEventListener === "function") {
39
+ this.mql.removeEventListener("change", _classPrivateFieldLooseBase(this, _handler)[_handler]);
47
40
  } else {
48
41
  this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
49
42
  }
@@ -62,8 +55,8 @@ class Breakpoint {
62
55
  this.mql = window.matchMedia(`(min-width: ${this.value})`);
63
56
 
64
57
  // Conditionally use addListener() for IE11 support.
65
- if (typeof this.mql.addEventListener === 'function') {
66
- this.mql.addEventListener('change', _classPrivateFieldLooseBase(this, _handler)[_handler]);
58
+ if (typeof this.mql.addEventListener === "function") {
59
+ this.mql.addEventListener("change", _classPrivateFieldLooseBase(this, _handler)[_handler]);
67
60
  } else {
68
61
  this.mql.addListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
69
62
  }
@@ -77,8 +70,8 @@ class Breakpoint {
77
70
  if (!this.mql) return this;
78
71
 
79
72
  // Conditionally use removeListener() for IE11 support.
80
- if (typeof this.mql.removeEventListener === 'function') {
81
- this.mql.removeEventListener('change', _classPrivateFieldLooseBase(this, _handler)[_handler]);
73
+ if (typeof this.mql.removeEventListener === "function") {
74
+ this.mql.removeEventListener("change", _classPrivateFieldLooseBase(this, _handler)[_handler]);
82
75
  } else {
83
76
  this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
84
77
  }
@@ -125,43 +118,18 @@ class Collection {
125
118
  }
126
119
  return this.collection;
127
120
  }
128
- get(value, key = 'id') {
121
+ get(value, key = "id") {
129
122
  return this.collection.find(item => {
130
123
  return item[key] === value;
131
124
  });
132
125
  }
133
126
  }
134
127
 
135
- const not = {
136
- inert: ':not([inert]):not([inert] *)',
137
- negTabIndex: ':not([tabindex^="-"])',
138
- disabled: ':not(:disabled)',
139
- };
140
-
141
- var e = [
142
- `a[href]${not.inert}${not.negTabIndex}`,
143
- `area[href]${not.inert}${not.negTabIndex}`,
144
- `input:not([type="hidden"]):not([type="radio"])${not.inert}${not.negTabIndex}${not.disabled}`,
145
- `input[type="radio"]${not.inert}${not.negTabIndex}${not.disabled}`,
146
- `select${not.inert}${not.negTabIndex}${not.disabled}`,
147
- `textarea${not.inert}${not.negTabIndex}${not.disabled}`,
148
- `button${not.inert}${not.negTabIndex}${not.disabled}`,
149
- `details${not.inert} > summary:first-of-type${not.negTabIndex}`,
150
- // Discard until Firefox supports `:has()`
151
- // See: https://github.com/KittyGiraudel/focusable-selectors/issues/12
152
- // `details:not(:has(> summary))${not.inert}${not.negTabIndex}`,
153
- `iframe${not.inert}${not.negTabIndex}`,
154
- `audio[controls]${not.inert}${not.negTabIndex}`,
155
- `video[controls]${not.inert}${not.negTabIndex}`,
156
- `[contenteditable]${not.inert}${not.negTabIndex}`,
157
- `[tabindex]${not.inert}${not.negTabIndex}`,
158
- ];
159
-
160
128
  var _focusable = /*#__PURE__*/_classPrivateFieldLooseKey("focusable");
161
129
  var _handleFocusTrap = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusTrap");
162
130
  var _handleFocusLock = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusLock");
163
131
  class FocusTrap {
164
- constructor(el = null, selectorFocus = '[data-focus]') {
132
+ constructor(el = null, selectorFocus = "[data-focus]") {
165
133
  Object.defineProperty(this, _focusable, {
166
134
  writable: true,
167
135
  value: void 0
@@ -188,11 +156,11 @@ class FocusTrap {
188
156
 
189
157
  // Apply event listeners based on new focusable array length.
190
158
  if (_classPrivateFieldLooseBase(this, _focusable)[_focusable].length) {
191
- document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
192
- document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
159
+ document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
160
+ document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
193
161
  } else {
194
- document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
195
- document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
162
+ document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
163
+ document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
196
164
  }
197
165
  }
198
166
  get focusableFirst() {
@@ -220,8 +188,8 @@ class FocusTrap {
220
188
  this.focusable = [];
221
189
 
222
190
  // Remove event listeners
223
- document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
224
- document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
191
+ document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
192
+ document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
225
193
  }
226
194
  focus(el = this.el, selectorFocus = this.selectorFocus) {
227
195
  // Query for the focus selector, otherwise return this element.
@@ -238,7 +206,8 @@ class FocusTrap {
238
206
  const initScrollTop = el.scrollTop;
239
207
 
240
208
  // Query for all the focusable elements.
241
- const els = el.querySelectorAll(e.join(','));
209
+ const selector = focusableSelectors.join(",");
210
+ const els = el.querySelectorAll(selector);
242
211
 
243
212
  // Loop through all focusable elements.
244
213
  els.forEach(el => {
@@ -259,9 +228,16 @@ class FocusTrap {
259
228
  return focusable;
260
229
  }
261
230
  }
231
+
232
+ // This has been copied over from focusable-selectors package and modified.
233
+ // https://github.com/KittyGiraudel/focusable-selectors
234
+ const notInert = ":not([inert])"; // Previously `:not([inert]):not([inert] *)`
235
+ const notNegTabIndex = ":not([tabindex^=\"-\"])";
236
+ const notDisabled = ":not(:disabled)";
237
+ const 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}`];
262
238
  function handleFocusTrap(event) {
263
239
  // Check if the click was a tab and return if not.
264
- const isTab = event.key === 'Tab' || event.keyCode === 9;
240
+ const isTab = event.key === "Tab" || event.keyCode === 9;
265
241
  if (!isTab) return;
266
242
 
267
243
  // If the shift key is pressed.
@@ -283,18 +259,18 @@ function handleFocusTrap(event) {
283
259
  }
284
260
  function handleFocusLock(event) {
285
261
  // Ignore the tab key by preventing default.
286
- const isTab = event.key === 'Tab' || event.keyCode === 9;
262
+ const isTab = event.key === "Tab" || event.keyCode === 9;
287
263
  if (isTab) event.preventDefault();
288
264
  }
289
265
 
290
266
  function getConfig$1(el, dataConfig) {
291
- const string = el.getAttribute(`data-${dataConfig}`) || '';
292
- const json = string.replace(/'/g, '"');
267
+ const string = el.getAttribute(`data-${dataConfig}`) || "";
268
+ const json = string.replace(/'/g, "\"");
293
269
  return json ? JSON.parse(json) : {};
294
270
  }
295
271
 
296
272
  function getPrefix() {
297
- return getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix').trim();
273
+ return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
298
274
  }
299
275
 
300
276
  function localStore(key, enable = true) {
@@ -336,18 +312,18 @@ function teleport(what, where, how) {
336
312
  where = isComment || isElement ? where : document.querySelector(where);
337
313
 
338
314
  // If ref is a comment, set teleport type to 'after'.
339
- if (isComment) how = 'after';
315
+ if (isComment) how = "after";
340
316
 
341
317
  // Must be a valid reference element and method.
342
318
  if (!where) throw new Error(`Not a valid teleport reference: '${where}'`);
343
- if (typeof where[how] != 'function') throw new Error(`Not a valid teleport method: '${how}'`);
319
+ if (typeof where[how] != "function") throw new Error(`Not a valid teleport method: '${how}'`);
344
320
 
345
321
  // Initial return ref is null.
346
322
  let returnRef = null;
347
323
 
348
324
  // If ref is not a comment, set a return reference comment.
349
325
  if (!isComment) {
350
- returnRef = document.createComment('teleported #' + what.id);
326
+ returnRef = document.createComment("teleported #" + what.id);
351
327
  what.before(returnRef);
352
328
  }
353
329
 
@@ -373,7 +349,7 @@ const openTransition = (el, settings) => {
373
349
  el.classList.add(settings.stateOpening);
374
350
 
375
351
  // Add event listener for when the transition is finished.
376
- el.addEventListener('transitionend', function _f(event) {
352
+ el.addEventListener("transitionend", function _f(event) {
377
353
  // Prevent child transition bubbling from firing this event.
378
354
  if (event.target != el) return;
379
355
 
@@ -383,7 +359,7 @@ const openTransition = (el, settings) => {
383
359
 
384
360
  // Resolve the promise and remove the event listener.
385
361
  resolve(el);
386
- this.removeEventListener('transitionend', _f);
362
+ this.removeEventListener("transitionend", _f);
387
363
  });
388
364
  } else {
389
365
  // Toggle final opened state classes and resolve the promise.
@@ -402,7 +378,7 @@ const closeTransition = (el, settings) => {
402
378
  el.classList.remove(settings.stateOpened);
403
379
 
404
380
  // Add event listener for when the transition is finished.
405
- el.addEventListener('transitionend', function _f(event) {
381
+ el.addEventListener("transitionend", function _f(event) {
406
382
  // Prevent child transition bubbling from firing this event.
407
383
  if (event.target != el) return;
408
384
 
@@ -412,7 +388,7 @@ const closeTransition = (el, settings) => {
412
388
 
413
389
  // Resolve the promise and remove the event listener.
414
390
  resolve(el);
415
- this.removeEventListener('transitionend', _f);
391
+ this.removeEventListener("transitionend", _f);
416
392
  });
417
393
  } else {
418
394
  // Toggle final closed state classes and resolve the promise.
@@ -428,9 +404,9 @@ function setOverflowHidden(state, selector) {
428
404
  const els = document.querySelectorAll(selector);
429
405
  els.forEach(el => {
430
406
  if (state) {
431
- el.style.overflow = 'hidden';
407
+ el.style.overflow = "hidden";
432
408
  } else {
433
- el.style.removeProperty('overflow');
409
+ el.style.removeProperty("overflow");
434
410
  }
435
411
  });
436
412
  }
@@ -441,10 +417,10 @@ function setInert(state, selector) {
441
417
  els.forEach(el => {
442
418
  if (state) {
443
419
  el.inert = true;
444
- el.setAttribute('aria-hidden', true);
420
+ el.setAttribute("aria-hidden", true);
445
421
  } else {
446
422
  el.inert = null;
447
- el.removeAttribute('aria-hidden');
423
+ el.removeAttribute("aria-hidden");
448
424
  }
449
425
  });
450
426
  }
@@ -473,8 +449,8 @@ var index = {
473
449
 
474
450
  var defaults$3 = {
475
451
  autoInit: false,
476
- stateAttr: 'aria-checked',
477
- stateValue: 'mixed'
452
+ stateAttr: "aria-checked",
453
+ stateValue: "mixed"
478
454
  };
479
455
 
480
456
  class Checkbox {
@@ -489,10 +465,10 @@ class Checkbox {
489
465
  const selector = `[${this.settings.stateAttr}="${this.settings.stateValue}"]`;
490
466
  const mixed = document.querySelectorAll(selector);
491
467
  this.setIndeterminate(mixed);
492
- document.addEventListener('click', this.__handlerClick, false);
468
+ document.addEventListener("click", this.__handlerClick, false);
493
469
  }
494
470
  destroy() {
495
- document.removeEventListener('click', this.__handlerClick, false);
471
+ document.removeEventListener("click", this.__handlerClick, false);
496
472
  }
497
473
  handlerClick(event) {
498
474
  const selector = `[${this.settings.stateAttr}="${this.settings.stateValue}"]`;
@@ -528,30 +504,30 @@ class Checkbox {
528
504
  var defaults$2 = {
529
505
  autoInit: false,
530
506
  // Data attributes
531
- dataOpen: 'drawer-open',
532
- dataClose: 'drawer-close',
533
- dataToggle: 'drawer-toggle',
534
- dataBreakpoint: 'drawer-breakpoint',
535
- dataConfig: 'drawer-config',
507
+ dataOpen: "drawer-open",
508
+ dataClose: "drawer-close",
509
+ dataToggle: "drawer-toggle",
510
+ dataBreakpoint: "drawer-breakpoint",
511
+ dataConfig: "drawer-config",
536
512
  // Selectors
537
- selectorDrawer: '.drawer',
538
- selectorDialog: '.drawer__dialog',
539
- selectorFocus: '[data-focus]',
513
+ selectorDrawer: ".drawer",
514
+ selectorDialog: ".drawer__dialog",
515
+ selectorFocus: "[data-focus]",
540
516
  selectorInert: null,
541
- selectorOverflow: 'body',
517
+ selectorOverflow: "body",
542
518
  // State classes
543
- stateOpened: 'is-opened',
544
- stateOpening: 'is-opening',
545
- stateClosing: 'is-closing',
546
- stateClosed: 'is-closed',
519
+ stateOpened: "is-opened",
520
+ stateOpening: "is-opening",
521
+ stateClosing: "is-closing",
522
+ stateClosed: "is-closed",
547
523
  // Classes
548
- classModal: 'drawer_modal',
524
+ classModal: "drawer_modal",
549
525
  // Feature toggles
550
526
  breakpoints: null,
551
- customEventPrefix: 'drawer:',
527
+ customEventPrefix: "drawer:",
552
528
  eventListeners: true,
553
529
  store: true,
554
- storeKey: 'VB:DrawerState',
530
+ storeKey: "VB:DrawerState",
555
531
  setTabindex: true,
556
532
  transition: true
557
533
  };
@@ -569,7 +545,7 @@ function handleClick$2(event) {
569
545
 
570
546
  // If it's a toggle trigger...
571
547
  if (trigger.matches(`[data-${this.settings.dataToggle}]`)) {
572
- const selectors = trigger.getAttribute(`data-${this.settings.dataToggle}`).trim().split(' ');
548
+ const selectors = trigger.getAttribute(`data-${this.settings.dataToggle}`).trim().split(" ");
573
549
  selectors.forEach(selector => {
574
550
  // Get the entry from collection using the attribute value.
575
551
  const entry = this.get(selector);
@@ -582,7 +558,7 @@ function handleClick$2(event) {
582
558
 
583
559
  // If it's a open trigger...
584
560
  if (trigger.matches(`[data-${this.settings.dataOpen}]`)) {
585
- const selectors = trigger.getAttribute(`data-${this.settings.dataOpen}`).trim().split(' ');
561
+ const selectors = trigger.getAttribute(`data-${this.settings.dataOpen}`).trim().split(" ");
586
562
  selectors.forEach(selector => {
587
563
  // Get the entry from collection using the attribute value.
588
564
  const entry = this.get(selector);
@@ -595,7 +571,7 @@ function handleClick$2(event) {
595
571
 
596
572
  // If it's a close trigger...
597
573
  if (trigger.matches(`[data-${this.settings.dataClose}]`)) {
598
- const selectors = trigger.getAttribute(`data-${this.settings.dataClose}`).trim().split(' ');
574
+ const selectors = trigger.getAttribute(`data-${this.settings.dataClose}`).trim().split(" ");
599
575
  selectors.forEach(selector => {
600
576
  if (selector) {
601
577
  // Get the entry from collection using the attribute value.
@@ -622,7 +598,7 @@ function handleClick$2(event) {
622
598
  }
623
599
  }
624
600
  function handleKeydown$2(event) {
625
- if (event.key === 'Escape') {
601
+ if (event.key === "Escape") {
626
602
  const modal = this.activeModal;
627
603
  if (modal) this.close(modal);
628
604
  }
@@ -641,7 +617,7 @@ async function deregister$2(obj, close = true) {
641
617
  const entry = this.collection[index];
642
618
 
643
619
  // If entry is in the opened state.
644
- if (close && entry.state === 'opened') {
620
+ if (close && entry.state === "opened") {
645
621
  // Close the drawer.
646
622
  await entry.close(false);
647
623
  }
@@ -665,12 +641,12 @@ async function deregister$2(obj, close = true) {
665
641
  return this.collection;
666
642
  }
667
643
 
668
- function E() {
644
+ function P() {
669
645
  return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
670
646
  }
671
647
 
672
648
  function getBreakpoint(drawer) {
673
- const prefix = E();
649
+ const prefix = P();
674
650
  const bp = drawer.getAttribute(`data-${this.settings.dataBreakpoint}`);
675
651
  if (this.settings.breakpoints && this.settings.breakpoints[bp]) {
676
652
  return this.settings.breakpoints[bp];
@@ -683,7 +659,7 @@ function getBreakpoint(drawer) {
683
659
 
684
660
  function getDrawer(query) {
685
661
  // Get the entry from collection.
686
- const entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
662
+ const entry = typeof query === "string" ? this.get(query) : this.get(query.id);
687
663
 
688
664
  // Return entry if it was resolved, otherwise throw error.
689
665
  if (entry) {
@@ -695,12 +671,12 @@ function getDrawer(query) {
695
671
 
696
672
  function getDrawerID(obj) {
697
673
  // If it's a string, return the string.
698
- if (typeof obj === 'string') {
674
+ if (typeof obj === "string") {
699
675
  return obj;
700
676
  }
701
677
 
702
678
  // If it's an HTML element.
703
- else if (typeof obj.hasAttribute === 'function') {
679
+ else if (typeof obj.hasAttribute === "function") {
704
680
  // If it's a drawer open trigger, return data value.
705
681
  if (obj.hasAttribute(`data-${this.settings.dataOpen}`)) {
706
682
  return obj.getAttribute(`data-${this.settings.dataOpen}`);
@@ -746,7 +722,7 @@ function getDrawerElements(query) {
746
722
  };
747
723
  } else if (!dialog) {
748
724
  return {
749
- error: new Error('Drawer is missing dialog element.')
725
+ error: new Error("Drawer is missing dialog element.")
750
726
  };
751
727
  } else {
752
728
  return {
@@ -756,7 +732,7 @@ function getDrawerElements(query) {
756
732
  }
757
733
  } else {
758
734
  return {
759
- error: new Error('Could not resolve the drawer ID.')
735
+ error: new Error("Could not resolve the drawer ID.")
760
736
  };
761
737
  }
762
738
  }
@@ -768,14 +744,14 @@ async function initialState(entry) {
768
744
  // 3. Else, initialize default state.
769
745
  if (this.store.get(entry.id)) {
770
746
  // Restore drawers to saved inline state.
771
- if (this.store.get(entry.id) === 'opened') {
747
+ if (this.store.get(entry.id) === "opened") {
772
748
  await entry.open(false, false);
773
749
  } else {
774
750
  await entry.close(false, false);
775
751
  }
776
752
  } else if (entry.el.classList.contains(this.settings.stateOpened)) {
777
753
  // Update drawer state.
778
- entry.state = 'opened';
754
+ entry.state = "opened";
779
755
  } else {
780
756
  // Remove transition state classes.
781
757
  entry.el.classList.remove(this.settings.stateOpening);
@@ -787,9 +763,9 @@ async function initialState(entry) {
787
763
 
788
764
  function updateFocusState$1(entry) {
789
765
  // Check if there's an active modal
790
- if (entry.state === 'opened') {
766
+ if (entry.state === "opened") {
791
767
  // Mount the focus trap on the opened drawer.
792
- if (entry.mode === 'modal') {
768
+ if (entry.mode === "modal") {
793
769
  this.focusTrap.mount(entry.dialog, this.settings.selectorFocus);
794
770
  } else {
795
771
  this.focusTrap.focus(entry.dialog, this.settings.selectorFocus);
@@ -815,18 +791,18 @@ async function open$2(query, transition, focus = true) {
815
791
  if (transition !== undefined) config.transition = transition;
816
792
 
817
793
  // If drawer is closed.
818
- if (drawer.state === 'closed') {
794
+ if (drawer.state === "closed") {
819
795
  // Update drawer state.
820
- drawer.state = 'opening';
796
+ drawer.state = "opening";
821
797
 
822
798
  // Run the open transition.
823
799
  await openTransition(drawer.el, config);
824
800
 
825
801
  // Update the global state if mode is modal.
826
- if (drawer.mode === 'modal') updateGlobalState(true, config);
802
+ if (drawer.mode === "modal") updateGlobalState(true, config);
827
803
 
828
804
  // Update drawer state.
829
- drawer.state = 'opened';
805
+ drawer.state = "opened";
830
806
  }
831
807
 
832
808
  // Set focus to the drawer element if the focus param is true.
@@ -835,7 +811,7 @@ async function open$2(query, transition, focus = true) {
835
811
  }
836
812
 
837
813
  // Dispatch custom opened event.
838
- drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
814
+ drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "opened", {
839
815
  detail: this,
840
816
  bubbles: true
841
817
  }));
@@ -855,9 +831,9 @@ async function close$2(query, transition, focus = true) {
855
831
  if (transition !== undefined) config.transition = transition;
856
832
 
857
833
  // If drawer is opened.
858
- if (drawer.state === 'opened') {
834
+ if (drawer.state === "opened") {
859
835
  // Update drawer state.
860
- drawer.state = 'closing';
836
+ drawer.state = "closing";
861
837
 
862
838
  // Remove focus from active element.
863
839
  document.activeElement.blur();
@@ -866,7 +842,7 @@ async function close$2(query, transition, focus = true) {
866
842
  await closeTransition(drawer.el, config);
867
843
 
868
844
  // Update the global state if mode is modal.
869
- if (drawer.mode === 'modal') updateGlobalState(false, config);
845
+ if (drawer.mode === "modal") updateGlobalState(false, config);
870
846
 
871
847
  // Set focus to the trigger element if the focus param is true.
872
848
  if (focus) {
@@ -874,10 +850,10 @@ async function close$2(query, transition, focus = true) {
874
850
  }
875
851
 
876
852
  // Update drawer state.
877
- drawer.state = 'closed';
853
+ drawer.state = "closed";
878
854
 
879
855
  // Dispatch custom closed event.
880
- drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
856
+ drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "closed", {
881
857
  detail: this,
882
858
  bubbles: true
883
859
  }));
@@ -892,7 +868,7 @@ async function toggle(query, transition, focus) {
892
868
  const drawer = getDrawer.call(this, query);
893
869
 
894
870
  // Open or close the drawer based on its current state.
895
- if (drawer.state === 'closed') {
871
+ if (drawer.state === "closed") {
896
872
  return open$2.call(this, drawer, transition, focus);
897
873
  } else {
898
874
  return close$2.call(this, drawer, transition, focus);
@@ -901,9 +877,9 @@ async function toggle(query, transition, focus) {
901
877
 
902
878
  function switchMode(entry) {
903
879
  switch (entry.mode) {
904
- case 'inline':
880
+ case "inline":
905
881
  return toInline.call(this, entry);
906
- case 'modal':
882
+ case "modal":
907
883
  return toModal.call(this, entry);
908
884
  default:
909
885
  throw new Error(`"${entry.mode}" is not a valid drawer mode.`);
@@ -911,10 +887,10 @@ function switchMode(entry) {
911
887
  }
912
888
  async function toInline(entry) {
913
889
  // Remove the modal class.
914
- entry.el.classList.remove(entry.getSetting('classModal'));
890
+ entry.el.classList.remove(entry.getSetting("classModal"));
915
891
 
916
892
  // Remove the aria-modal attribute.
917
- entry.dialog.removeAttribute('aria-modal');
893
+ entry.dialog.removeAttribute("aria-modal");
918
894
 
919
895
  // Update the global state.
920
896
  updateGlobalState(false, _extends({}, this.settings, entry.settings));
@@ -926,7 +902,7 @@ async function toInline(entry) {
926
902
  await initialState.call(this, entry);
927
903
 
928
904
  // Dispatch custom switch event.
929
- entry.el.dispatchEvent(new CustomEvent(entry.getSetting('customEventPrefix') + 'switchMode', {
905
+ entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
930
906
  detail: this,
931
907
  bubbles: true
932
908
  }));
@@ -938,22 +914,22 @@ async function toModal(entry) {
938
914
  // Get the drawer configuration.
939
915
 
940
916
  // Add the modal class.
941
- entry.el.classList.add(entry.getSetting('classModal'));
917
+ entry.el.classList.add(entry.getSetting("classModal"));
942
918
 
943
919
  // Set aria-modal attribute to true.
944
- entry.dialog.setAttribute('aria-modal', 'true');
920
+ entry.dialog.setAttribute("aria-modal", "true");
945
921
 
946
922
  // If there isn't a stored state but also has the opened state class...
947
- if (!this.store.get(entry.id) && entry.el.classList.contains(entry.getSetting('stateOpened'))) {
923
+ if (!this.store.get(entry.id) && entry.el.classList.contains(entry.getSetting("stateOpened"))) {
948
924
  // Save the opened state in local store.
949
- this.store.set(entry.id, 'opened');
925
+ this.store.set(entry.id, "opened");
950
926
  }
951
927
 
952
928
  // Modal drawer defaults to closed state.
953
929
  await close$2.call(this, entry, false, false);
954
930
 
955
931
  // Dispatch custom switch event.
956
- entry.el.dispatchEvent(new CustomEvent(entry.getSetting('customEventPrefix') + 'switchMode', {
932
+ entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
957
933
  detail: this,
958
934
  bubbles: true
959
935
  }));
@@ -997,7 +973,7 @@ async function register$2(el, dialog) {
997
973
  return this;
998
974
  },
999
975
  handleBreakpoint(event) {
1000
- this.mode = event.matches ? 'inline' : 'modal';
976
+ this.mode = event.matches ? "inline" : "modal";
1001
977
  return this;
1002
978
  },
1003
979
  getSetting(key) {
@@ -1021,8 +997,8 @@ async function register$2(el, dialog) {
1021
997
  set state(value) {
1022
998
  __state = value;
1023
999
  // Save 'opened' and 'closed' states to store if mode is inline.
1024
- if (value === 'opened' || value === 'closed') {
1025
- if (this.mode === 'inline') root.store.set(this.id, this.state);
1000
+ if (value === "opened" || value === "closed") {
1001
+ if (this.mode === "inline") root.store.set(this.id, this.state);
1026
1002
  }
1027
1003
  },
1028
1004
  get mode() {
@@ -1035,23 +1011,23 @@ async function register$2(el, dialog) {
1035
1011
  }, methods);
1036
1012
 
1037
1013
  // Create the state var with the initial state.
1038
- let __state = el.classList.contains(entry.getSetting('stateOpened')) ? 'opened' : 'closed';
1014
+ let __state = el.classList.contains(entry.getSetting("stateOpened")) ? "opened" : "closed";
1039
1015
 
1040
1016
  // Create the mode var with the initial mode.
1041
- let __mode = el.classList.contains(entry.getSetting('classModal')) ? 'modal' : 'inline';
1017
+ let __mode = el.classList.contains(entry.getSetting("classModal")) ? "modal" : "inline";
1042
1018
 
1043
1019
  // Setup mode specific attributes.
1044
- if (entry.mode === 'modal') {
1020
+ if (entry.mode === "modal") {
1045
1021
  // Set aria-modal attribute to true.
1046
- entry.dialog.setAttribute('aria-modal', 'true');
1022
+ entry.dialog.setAttribute("aria-modal", "true");
1047
1023
  } else {
1048
1024
  // Remove the aria-modal attribute.
1049
- entry.dialog.removeAttribute('aria-modal');
1025
+ entry.dialog.removeAttribute("aria-modal");
1050
1026
  }
1051
1027
 
1052
1028
  // Set tabindex="-1" so dialog is focusable via JS or click.
1053
- if (entry.getSetting('setTabindex')) {
1054
- entry.dialog.setAttribute('tabindex', '-1');
1029
+ if (entry.getSetting("setTabindex")) {
1030
+ entry.dialog.setAttribute("tabindex", "-1");
1055
1031
  }
1056
1032
 
1057
1033
  // Add entry to collection.
@@ -1095,7 +1071,7 @@ class Drawer extends Collection {
1095
1071
  }
1096
1072
  get activeModal() {
1097
1073
  return this.collection.find(entry => {
1098
- return entry.state === 'opened' && entry.mode === 'modal';
1074
+ return entry.state === "opened" && entry.mode === "modal";
1099
1075
  });
1100
1076
  }
1101
1077
  async init(options = null) {
@@ -1125,12 +1101,12 @@ class Drawer extends Collection {
1125
1101
  return this;
1126
1102
  }
1127
1103
  initEventListeners() {
1128
- document.addEventListener('click', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
1129
- document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
1104
+ document.addEventListener("click", _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
1105
+ document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
1130
1106
  }
1131
1107
  destroyEventListeners() {
1132
- document.removeEventListener('click', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
1133
- document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
1108
+ document.removeEventListener("click", _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
1109
+ document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
1134
1110
  }
1135
1111
  register(query) {
1136
1112
  const els = getDrawerElements.call(this, query);
@@ -1155,34 +1131,34 @@ class Drawer extends Collection {
1155
1131
  var defaults$1 = {
1156
1132
  autoInit: false,
1157
1133
  // Data attributes
1158
- dataOpen: 'modal-open',
1159
- dataClose: 'modal-close',
1160
- dataReplace: 'modal-replace',
1161
- dataConfig: 'modal-config',
1134
+ dataOpen: "modal-open",
1135
+ dataClose: "modal-close",
1136
+ dataReplace: "modal-replace",
1137
+ dataConfig: "modal-config",
1162
1138
  // Selectors
1163
- selectorModal: '.modal',
1164
- selectorDialog: '.modal__dialog',
1165
- selectorRequired: '[role="alertdialog"]',
1166
- selectorFocus: '[data-focus]',
1139
+ selectorModal: ".modal",
1140
+ selectorDialog: ".modal__dialog",
1141
+ selectorRequired: "[role=\"alertdialog\"]",
1142
+ selectorFocus: "[data-focus]",
1167
1143
  selectorInert: null,
1168
- selectorOverflow: 'body',
1144
+ selectorOverflow: "body",
1169
1145
  // State classes
1170
- stateOpened: 'is-opened',
1171
- stateOpening: 'is-opening',
1172
- stateClosing: 'is-closing',
1173
- stateClosed: 'is-closed',
1146
+ stateOpened: "is-opened",
1147
+ stateOpening: "is-opening",
1148
+ stateClosing: "is-closing",
1149
+ stateClosed: "is-closed",
1174
1150
  // Feature settings
1175
- customEventPrefix: 'modal:',
1151
+ customEventPrefix: "modal:",
1176
1152
  eventListeners: true,
1177
1153
  teleport: null,
1178
- teleportMethod: 'append',
1154
+ teleportMethod: "append",
1179
1155
  setTabindex: true,
1180
1156
  transition: true
1181
1157
  };
1182
1158
 
1183
1159
  function getModal(query) {
1184
1160
  // Get the entry from collection.
1185
- const entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
1161
+ const entry = typeof query === "string" ? this.get(query) : this.get(query.id);
1186
1162
 
1187
1163
  // Return entry if it was resolved, otherwise throw error.
1188
1164
  if (entry) {
@@ -1194,12 +1170,12 @@ function getModal(query) {
1194
1170
 
1195
1171
  function getModalID(obj) {
1196
1172
  // If it's a string, return the string.
1197
- if (typeof obj === 'string') {
1173
+ if (typeof obj === "string") {
1198
1174
  return obj;
1199
1175
  }
1200
1176
 
1201
1177
  // If it's an HTML element.
1202
- else if (typeof obj.hasAttribute === 'function') {
1178
+ else if (typeof obj.hasAttribute === "function") {
1203
1179
  // If it's a modal open trigger, return data value.
1204
1180
  if (obj.hasAttribute(`data-${this.settings.dataOpen}`)) {
1205
1181
  return obj.getAttribute(`data-${this.settings.dataOpen}`);
@@ -1245,7 +1221,7 @@ function getModalElements(query) {
1245
1221
  };
1246
1222
  } else if (!dialog) {
1247
1223
  return {
1248
- error: new Error('Modal is missing dialog element.')
1224
+ error: new Error("Modal is missing dialog element.")
1249
1225
  };
1250
1226
  } else {
1251
1227
  return {
@@ -1255,7 +1231,7 @@ function getModalElements(query) {
1255
1231
  }
1256
1232
  } else {
1257
1233
  return {
1258
- error: new Error('Could not resolve the modal ID.')
1234
+ error: new Error("Could not resolve the modal ID.")
1259
1235
  };
1260
1236
  }
1261
1237
  }
@@ -1296,7 +1272,7 @@ async function handleClick$1(event) {
1296
1272
  // Get the value of the data attribute.
1297
1273
  const value = trigger.getAttribute(`data-${this.settings.dataClose}`);
1298
1274
  // Close all if * wildcard is passed, otherwise close a single modal.
1299
- return value === '*' ? this.closeAll() : this.close(value);
1275
+ return value === "*" ? this.closeAll() : this.close(value);
1300
1276
  }
1301
1277
 
1302
1278
  // If the modal screen was clicked, close the modal.
@@ -1306,7 +1282,7 @@ async function handleClick$1(event) {
1306
1282
  }
1307
1283
  function handleKeydown$1(event) {
1308
1284
  // If escape key was pressed.
1309
- if (event.key === 'Escape') {
1285
+ if (event.key === "Escape") {
1310
1286
  // If a modal is opened and not required, close the modal.
1311
1287
  if (this.active && !this.active.dialog.matches(this.settings.selectorRequired)) {
1312
1288
  return this.close();
@@ -1327,7 +1303,7 @@ async function deregister$1(obj, close = true) {
1327
1303
  const entry = this.collection[index];
1328
1304
 
1329
1305
  // If entry is in the opened state, close it.
1330
- if (close && entry.state === 'opened') {
1306
+ if (close && entry.state === "opened") {
1331
1307
  await entry.close(false);
1332
1308
  } else {
1333
1309
  // Remove modal from stack.
@@ -1335,7 +1311,7 @@ async function deregister$1(obj, close = true) {
1335
1311
  }
1336
1312
 
1337
1313
  // Return teleported modal if a reference has been set.
1338
- if (entry.getSetting('teleport')) {
1314
+ if (entry.getSetting("teleport")) {
1339
1315
  entry.teleportReturn();
1340
1316
  }
1341
1317
 
@@ -1366,9 +1342,9 @@ async function open$1(query, transition, focus = true) {
1366
1342
  this.stack.moveToTop(modal);
1367
1343
 
1368
1344
  // If modal is closed.
1369
- if (modal.state === 'closed') {
1345
+ if (modal.state === "closed") {
1370
1346
  // Update modal state.
1371
- modal.state = 'opening';
1347
+ modal.state = "opening";
1372
1348
 
1373
1349
  // Add modal to stack.
1374
1350
  this.stack.add(modal);
@@ -1377,7 +1353,7 @@ async function open$1(query, transition, focus = true) {
1377
1353
  await openTransition(modal.el, config);
1378
1354
 
1379
1355
  // Update modal state.
1380
- modal.state = 'opened';
1356
+ modal.state = "opened";
1381
1357
  }
1382
1358
 
1383
1359
  // Update focus if the focus param is true.
@@ -1386,7 +1362,7 @@ async function open$1(query, transition, focus = true) {
1386
1362
  }
1387
1363
 
1388
1364
  // Dispatch custom opened event.
1389
- modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
1365
+ modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "opened", {
1390
1366
  detail: this,
1391
1367
  bubbles: true
1392
1368
  }));
@@ -1400,9 +1376,9 @@ async function close$1(query, transition, focus = true) {
1400
1376
  const modal = query ? getModal.call(this, query) : this.active;
1401
1377
 
1402
1378
  // If a modal exists and its state is opened.
1403
- if (modal && modal.state === 'opened') {
1379
+ if (modal && modal.state === "opened") {
1404
1380
  // Update modal state.
1405
- modal.state = 'closing';
1381
+ modal.state = "closing";
1406
1382
 
1407
1383
  // Get the modal configuration.
1408
1384
  const config = _extends({}, this.settings, modal.settings);
@@ -1425,10 +1401,10 @@ async function close$1(query, transition, focus = true) {
1425
1401
  }
1426
1402
 
1427
1403
  // Update modal state.
1428
- modal.state = 'closed';
1404
+ modal.state = "closed";
1429
1405
 
1430
1406
  // Dispatch custom closed event.
1431
- modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
1407
+ modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "closed", {
1432
1408
  detail: this,
1433
1409
  bubbles: true
1434
1410
  }));
@@ -1457,7 +1433,7 @@ async function replace(query, transition, focus = true) {
1457
1433
 
1458
1434
  // Setup results for return.
1459
1435
  let resultOpened, resultClosed;
1460
- if (modal.state === 'opened') {
1436
+ if (modal.state === "opened") {
1461
1437
  // If modal is open, close all modals except for replacement.
1462
1438
  resultOpened = modal;
1463
1439
  resultClosed = await closeAll$1.call(this, modal.id, transition);
@@ -1501,12 +1477,12 @@ async function register$1(el, dialog) {
1501
1477
  deregister() {
1502
1478
  return deregister$1.call(root, this);
1503
1479
  },
1504
- teleport(ref = this.getSetting('teleport'), method = this.getSetting('teleportMethod')) {
1480
+ teleport(ref = this.getSetting("teleport"), method = this.getSetting("teleportMethod")) {
1505
1481
  if (!this.returnRef) {
1506
1482
  this.returnRef = teleport(this.el, ref, method);
1507
1483
  return this.el;
1508
1484
  } else {
1509
- console.error('Element has already been teleported:', this.el);
1485
+ console.error("Element has already been teleported:", this.el);
1510
1486
  return false;
1511
1487
  }
1512
1488
  },
@@ -1515,7 +1491,7 @@ async function register$1(el, dialog) {
1515
1491
  this.returnRef = teleport(this.el, this.returnRef);
1516
1492
  return this.el;
1517
1493
  } else {
1518
- console.error('No return reference found:', this.el);
1494
+ console.error("No return reference found:", this.el);
1519
1495
  return false;
1520
1496
  }
1521
1497
  },
@@ -1527,7 +1503,7 @@ async function register$1(el, dialog) {
1527
1503
  // Setup the modal object.
1528
1504
  const entry = _extends({
1529
1505
  id: el.id,
1530
- state: 'closed',
1506
+ state: "closed",
1531
1507
  el: el,
1532
1508
  dialog: dialog,
1533
1509
  returnRef: null,
@@ -1535,20 +1511,20 @@ async function register$1(el, dialog) {
1535
1511
  }, methods);
1536
1512
 
1537
1513
  // Set aria-modal attribute to true.
1538
- entry.dialog.setAttribute('aria-modal', 'true');
1514
+ entry.dialog.setAttribute("aria-modal", "true");
1539
1515
 
1540
1516
  // If a role attribute is not set, set it to "dialog" as the default.
1541
- if (!entry.dialog.hasAttribute('role')) {
1542
- entry.dialog.setAttribute('role', 'dialog');
1517
+ if (!entry.dialog.hasAttribute("role")) {
1518
+ entry.dialog.setAttribute("role", "dialog");
1543
1519
  }
1544
1520
 
1545
1521
  // Set tabindex="-1" so dialog is focusable via JS or click.
1546
- if (entry.getSetting('setTabindex')) {
1547
- entry.dialog.setAttribute('tabindex', '-1');
1522
+ if (entry.getSetting("setTabindex")) {
1523
+ entry.dialog.setAttribute("tabindex", "-1");
1548
1524
  }
1549
1525
 
1550
1526
  // Teleport modal if a reference has been set.
1551
- if (entry.getSetting('teleport')) {
1527
+ if (entry.getSetting("teleport")) {
1552
1528
  entry.teleport();
1553
1529
  }
1554
1530
 
@@ -1583,7 +1559,7 @@ function stack(settings) {
1583
1559
  updateIndex() {
1584
1560
  stackArray.forEach((entry, index) => {
1585
1561
  entry.el.style.zIndex = null;
1586
- const value = getComputedStyle(entry.el)['z-index'];
1562
+ const value = getComputedStyle(entry.el)["z-index"];
1587
1563
  entry.el.style.zIndex = parseInt(value) + index + 1;
1588
1564
  });
1589
1565
  },
@@ -1594,7 +1570,7 @@ function stack(settings) {
1594
1570
  add(entry) {
1595
1571
  // Apply z-index styles based on stack length.
1596
1572
  entry.el.style.zIndex = null;
1597
- const value = getComputedStyle(entry.el)['z-index'];
1573
+ const value = getComputedStyle(entry.el)["z-index"];
1598
1574
  entry.el.style.zIndex = parseInt(value) + stackArray.length + 1;
1599
1575
 
1600
1576
  // Move back to end of stack.
@@ -1696,12 +1672,12 @@ class Modal extends Collection {
1696
1672
  return this;
1697
1673
  }
1698
1674
  initEventListeners() {
1699
- document.addEventListener('click', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
1700
- document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
1675
+ document.addEventListener("click", _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
1676
+ document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
1701
1677
  }
1702
1678
  destroyEventListeners() {
1703
- document.removeEventListener('click', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
1704
- document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
1679
+ document.removeEventListener("click", _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
1680
+ document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
1705
1681
  }
1706
1682
  register(query) {
1707
1683
  const els = getModalElements.call(this, query);
@@ -1734,14 +1710,14 @@ class Modal extends Collection {
1734
1710
  var defaults = {
1735
1711
  autoInit: false,
1736
1712
  // Selectors
1737
- selectorPopover: '.popover',
1738
- selectorArrow: '.popover__arrow',
1713
+ selectorPopover: ".popover",
1714
+ selectorArrow: ".popover__arrow",
1739
1715
  // State classes
1740
- stateActive: 'is-active',
1716
+ stateActive: "is-active",
1741
1717
  // Feature settings
1742
1718
  eventListeners: true,
1743
- eventType: 'click',
1744
- placement: 'bottom'
1719
+ eventType: "click",
1720
+ placement: "bottom"
1745
1721
  };
1746
1722
 
1747
1723
  function getConfig(el, settings) {
@@ -1750,19 +1726,19 @@ function getConfig(el, settings) {
1750
1726
 
1751
1727
  // Setup the config obj with default values.
1752
1728
  const config = {
1753
- 'placement': settings.placement,
1754
- 'event': settings.eventType,
1755
- 'offset': 0,
1756
- 'overflow-padding': 0,
1757
- 'flip-padding': 0,
1758
- 'arrow-element': settings.selectorArrow,
1759
- 'arrow-padding': 0
1729
+ "placement": settings.placement,
1730
+ "event": settings.eventType,
1731
+ "offset": 0,
1732
+ "overflow-padding": 0,
1733
+ "flip-padding": 0,
1734
+ "arrow-element": settings.selectorArrow,
1735
+ "arrow-padding": 0
1760
1736
  };
1761
1737
 
1762
1738
  // Loop through config obj.
1763
1739
  for (const prop in config) {
1764
1740
  // Get the CSS variable property values.
1765
- const prefix = E();
1741
+ const prefix = P();
1766
1742
  const value = styles.getPropertyValue(`--${prefix}popover-${prop}`).trim();
1767
1743
 
1768
1744
  // If a value was found, replace the default in config obj.
@@ -1779,7 +1755,7 @@ function getPadding(value) {
1779
1755
  let padding;
1780
1756
 
1781
1757
  // Split the value by spaces if it's a string.
1782
- const array = typeof value === 'string' ? value.trim().split(' ') : [value];
1758
+ const array = typeof value === "string" ? value.trim().split(" ") : [value];
1783
1759
 
1784
1760
  // Convert individual values to integers.
1785
1761
  array.forEach(function (item, index) {
@@ -1826,32 +1802,32 @@ function getPadding(value) {
1826
1802
 
1827
1803
  function getModifiers(options) {
1828
1804
  return [{
1829
- name: 'offset',
1805
+ name: "offset",
1830
1806
  options: {
1831
- offset: [0, parseInt(options['offset'], 10)]
1807
+ offset: [0, parseInt(options["offset"], 10)]
1832
1808
  }
1833
1809
  }, {
1834
- name: 'preventOverflow',
1810
+ name: "preventOverflow",
1835
1811
  options: {
1836
- padding: getPadding(options['overflow-padding'])
1812
+ padding: getPadding(options["overflow-padding"])
1837
1813
  }
1838
1814
  }, {
1839
- name: 'flip',
1815
+ name: "flip",
1840
1816
  options: {
1841
- padding: getPadding(options['flip-padding'])
1817
+ padding: getPadding(options["flip-padding"])
1842
1818
  }
1843
1819
  }, {
1844
- name: 'arrow',
1820
+ name: "arrow",
1845
1821
  options: {
1846
- element: options['arrow-element'],
1847
- padding: getPadding(options['arrow-padding'])
1822
+ element: options["arrow-element"],
1823
+ padding: getPadding(options["arrow-padding"])
1848
1824
  }
1849
1825
  }];
1850
1826
  }
1851
1827
 
1852
1828
  function getPopover(query) {
1853
1829
  // Get the entry from collection.
1854
- const entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
1830
+ const entry = typeof query === "string" ? this.get(query) : this.get(query.id);
1855
1831
 
1856
1832
  // Return entry if it was resolved, otherwise throw error.
1857
1833
  if (entry) {
@@ -1863,12 +1839,12 @@ function getPopover(query) {
1863
1839
 
1864
1840
  function getPopoverID(obj) {
1865
1841
  // If it's a string, return the string.
1866
- if (typeof obj === 'string') {
1842
+ if (typeof obj === "string") {
1867
1843
  return obj;
1868
1844
  }
1869
1845
 
1870
1846
  // If it's an HTML element.
1871
- else if (typeof obj.hasAttribute === 'function') {
1847
+ else if (typeof obj.hasAttribute === "function") {
1872
1848
  // If it's a popover element, return the id.
1873
1849
  if (obj.closest(this.settings.selectorPopover)) {
1874
1850
  obj = obj.closest(this.settings.selectorPopover);
@@ -1876,13 +1852,13 @@ function getPopoverID(obj) {
1876
1852
  }
1877
1853
 
1878
1854
  // If it's a popover trigger, return value of aria-controls.
1879
- else if (obj.hasAttribute('aria-controls')) {
1880
- return obj.getAttribute('aria-controls');
1855
+ else if (obj.hasAttribute("aria-controls")) {
1856
+ return obj.getAttribute("aria-controls");
1881
1857
  }
1882
1858
 
1883
1859
  // If it's a popover tooltip trigger, return the value of aria-describedby.
1884
- else if (obj.hasAttribute('aria-describedby')) {
1885
- return obj.getAttribute('aria-describedby');
1860
+ else if (obj.hasAttribute("aria-describedby")) {
1861
+ return obj.getAttribute("aria-describedby");
1886
1862
  }
1887
1863
 
1888
1864
  // Return false if no id was found.
@@ -1909,11 +1885,11 @@ function getPopoverElements(query) {
1909
1885
  };
1910
1886
  } else if (!trigger) {
1911
1887
  return {
1912
- error: new Error('No popover trigger associated with the provided popover.')
1888
+ error: new Error("No popover trigger associated with the provided popover.")
1913
1889
  };
1914
1890
  } else if (!popover) {
1915
1891
  return {
1916
- error: new Error('No popover associated with the provided popover trigger.')
1892
+ error: new Error("No popover associated with the provided popover trigger.")
1917
1893
  };
1918
1894
  } else {
1919
1895
  return {
@@ -1923,7 +1899,7 @@ function getPopoverElements(query) {
1923
1899
  }
1924
1900
  } else {
1925
1901
  return {
1926
- error: new Error('Could not resolve the popover ID.')
1902
+ error: new Error("Could not resolve the popover ID.")
1927
1903
  };
1928
1904
  }
1929
1905
  }
@@ -1933,25 +1909,25 @@ async function close(query) {
1933
1909
  const popover = query ? getPopover.call(this, query) : await closeAll.call(this);
1934
1910
 
1935
1911
  // If a modal exists and its state is opened.
1936
- if (popover && popover.state === 'opened') {
1912
+ if (popover && popover.state === "opened") {
1937
1913
  // Update state class.
1938
1914
  popover.el.classList.remove(this.settings.stateActive);
1939
1915
 
1940
1916
  // Update accessibility attribute(s).
1941
- if (popover.trigger.hasAttribute('aria-controls')) {
1942
- popover.trigger.setAttribute('aria-expanded', 'false');
1917
+ if (popover.trigger.hasAttribute("aria-controls")) {
1918
+ popover.trigger.setAttribute("aria-expanded", "false");
1943
1919
  }
1944
1920
 
1945
1921
  // Disable popper event listeners.
1946
1922
  popover.popper.setOptions({
1947
1923
  modifiers: [{
1948
- name: 'eventListeners',
1924
+ name: "eventListeners",
1949
1925
  enabled: false
1950
1926
  }]
1951
1927
  });
1952
1928
 
1953
1929
  // Update popover state.
1954
- popover.state = 'closed';
1930
+ popover.state = "closed";
1955
1931
 
1956
1932
  // Clear root trigger if popover trigger matches.
1957
1933
  if (popover.trigger === this.trigger) {
@@ -1965,7 +1941,7 @@ async function close(query) {
1965
1941
  async function closeAll() {
1966
1942
  const result = [];
1967
1943
  await Promise.all(this.collection.map(async popover => {
1968
- if (popover.state === 'opened') {
1944
+ if (popover.state === "opened") {
1969
1945
  result.push(await close.call(this, popover));
1970
1946
  }
1971
1947
  }));
@@ -1973,12 +1949,12 @@ async function closeAll() {
1973
1949
  }
1974
1950
  function closeCheck(popover) {
1975
1951
  // Only run closeCheck if provided popover is currently open.
1976
- if (popover.state != 'opened') return;
1952
+ if (popover.state != "opened") return;
1977
1953
 
1978
1954
  // Needed to correctly check which element is currently being focused.
1979
1955
  setTimeout(() => {
1980
1956
  // Check if trigger or element are being hovered.
1981
- const isHovered = popover.el.closest(':hover') === popover.el || popover.trigger.closest(':hover') === popover.trigger;
1957
+ const isHovered = popover.el.closest(":hover") === popover.el || popover.trigger.closest(":hover") === popover.trigger;
1982
1958
 
1983
1959
  // Check if trigger or element are being focused.
1984
1960
  const isFocused = document.activeElement.closest(`#${popover.id}, [aria-controls="${popover.id}"], [aria-describedby="${popover.id}"]`);
@@ -1994,7 +1970,7 @@ function closeCheck(popover) {
1994
1970
  }
1995
1971
 
1996
1972
  function handleClick(popover) {
1997
- if (popover.state === 'opened') {
1973
+ if (popover.state === "opened") {
1998
1974
  popover.close();
1999
1975
  } else {
2000
1976
  this.trigger = popover.trigger;
@@ -2004,13 +1980,13 @@ function handleClick(popover) {
2004
1980
  }
2005
1981
  function handleKeydown(event) {
2006
1982
  switch (event.key) {
2007
- case 'Escape':
1983
+ case "Escape":
2008
1984
  if (this.trigger) {
2009
1985
  this.trigger.focus();
2010
1986
  }
2011
1987
  closeAll.call(this);
2012
1988
  return;
2013
- case 'Tab':
1989
+ case "Tab":
2014
1990
  this.collection.forEach(popover => {
2015
1991
  closeCheck.call(this, popover);
2016
1992
  });
@@ -2021,7 +1997,7 @@ function handleKeydown(event) {
2021
1997
  }
2022
1998
  function handleDocumentClick(popover) {
2023
1999
  const root = this;
2024
- document.addEventListener('click', function _f(event) {
2000
+ document.addEventListener("click", function _f(event) {
2025
2001
  // Check if a popover or its trigger was clicked.
2026
2002
  const wasClicked = event.target.closest(`#${popover.id}, [aria-controls="${popover.id}"], [aria-describedby="${popover.id}"]`);
2027
2003
 
@@ -2029,14 +2005,14 @@ function handleDocumentClick(popover) {
2029
2005
  if (wasClicked) {
2030
2006
  // If popover element exists and is not active...
2031
2007
  if (popover.el && !popover.el.classList.contains(root.settings.stateActive)) {
2032
- this.removeEventListener('click', _f);
2008
+ this.removeEventListener("click", _f);
2033
2009
  }
2034
2010
  } else {
2035
2011
  // If popover element exists and is active...
2036
2012
  if (popover.el && popover.el.classList.contains(root.settings.stateActive)) {
2037
2013
  popover.close();
2038
2014
  }
2039
- this.removeEventListener('click', _f);
2015
+ this.removeEventListener("click", _f);
2040
2016
  }
2041
2017
  });
2042
2018
  }
@@ -3845,7 +3821,7 @@ async function deregister(obj) {
3845
3821
  const entry = this.collection[index];
3846
3822
 
3847
3823
  // If entry is in the opened state, close it.
3848
- if (entry.state === 'opened') {
3824
+ if (entry.state === "opened") {
3849
3825
  entry.close();
3850
3826
  }
3851
3827
 
@@ -3895,8 +3871,8 @@ async function open(query) {
3895
3871
  popover.el.classList.add(this.settings.stateActive);
3896
3872
 
3897
3873
  // Update accessibility attribute(s).
3898
- if (popover.trigger.hasAttribute('aria-controls')) {
3899
- popover.trigger.setAttribute('aria-expanded', 'true');
3874
+ if (popover.trigger.hasAttribute("aria-controls")) {
3875
+ popover.trigger.setAttribute("aria-expanded", "true");
3900
3876
  }
3901
3877
 
3902
3878
  // Update popover config.
@@ -3904,9 +3880,9 @@ async function open(query) {
3904
3880
 
3905
3881
  // Enable popper event listeners and set placement/modifiers.
3906
3882
  popover.popper.setOptions({
3907
- placement: popover.config['placement'],
3883
+ placement: popover.config["placement"],
3908
3884
  modifiers: [{
3909
- name: 'eventListeners',
3885
+ name: "eventListeners",
3910
3886
  enabled: true
3911
3887
  }, ...getModifiers(popover.config)]
3912
3888
  });
@@ -3915,7 +3891,7 @@ async function open(query) {
3915
3891
  popover.popper.update();
3916
3892
 
3917
3893
  // Update popover state.
3918
- popover.state = 'opened';
3894
+ popover.state = "opened";
3919
3895
 
3920
3896
  // Return the popover.
3921
3897
  return popover;
@@ -3944,7 +3920,7 @@ async function register(el, trigger) {
3944
3920
  // Setup the popover object.
3945
3921
  const entry = _extends({
3946
3922
  id: el.id,
3947
- state: 'closed',
3923
+ state: "closed",
3948
3924
  el: el,
3949
3925
  trigger: trigger,
3950
3926
  popper: createPopper(trigger, el),
@@ -3952,8 +3928,8 @@ async function register(el, trigger) {
3952
3928
  }, methods);
3953
3929
 
3954
3930
  // Set aria-expanded to false if trigger has aria-controls attribute.
3955
- if (entry.trigger.hasAttribute('aria-controls')) {
3956
- entry.trigger.setAttribute('aria-expanded', 'false');
3931
+ if (entry.trigger.hasAttribute("aria-controls")) {
3932
+ entry.trigger.setAttribute("aria-expanded", "false");
3957
3933
  }
3958
3934
 
3959
3935
  // Setup event listeners.
@@ -3975,18 +3951,18 @@ function registerEventListeners(entry) {
3975
3951
  // If event listeners aren't already setup.
3976
3952
  if (!entry.__eventListeners) {
3977
3953
  // Add event listeners based on event type.
3978
- const eventType = entry.config['event'];
3954
+ const eventType = entry.config["event"];
3979
3955
 
3980
3956
  // If the event type is hover.
3981
- if (eventType === 'hover') {
3957
+ if (eventType === "hover") {
3982
3958
  // Setup event listeners object for hover.
3983
3959
  entry.__eventListeners = [{
3984
- el: ['trigger'],
3985
- type: ['mouseenter', 'focus'],
3960
+ el: ["trigger"],
3961
+ type: ["mouseenter", "focus"],
3986
3962
  listener: open.bind(this, entry)
3987
3963
  }, {
3988
- el: ['el', 'trigger'],
3989
- type: ['mouseleave', 'focusout'],
3964
+ el: ["el", "trigger"],
3965
+ type: ["mouseleave", "focusout"],
3990
3966
  listener: closeCheck.bind(this, entry)
3991
3967
  }];
3992
3968
 
@@ -4004,8 +3980,8 @@ function registerEventListeners(entry) {
4004
3980
  else {
4005
3981
  // Setup event listeners object for click.
4006
3982
  entry.__eventListeners = [{
4007
- el: ['trigger'],
4008
- type: ['click'],
3983
+ el: ["trigger"],
3984
+ type: ["click"],
4009
3985
  listener: handleClick.bind(this, entry)
4010
3986
  }];
4011
3987
 
@@ -4080,7 +4056,7 @@ class Popover extends Collection {
4080
4056
  }
4081
4057
 
4082
4058
  // Add keydown global event listener.
4083
- document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
4059
+ document.addEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
4084
4060
  }
4085
4061
  destroyEventListeners(processCollection = true) {
4086
4062
  if (processCollection) {
@@ -4091,7 +4067,7 @@ class Popover extends Collection {
4091
4067
  }
4092
4068
 
4093
4069
  // Remove keydown global event listener.
4094
- document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
4070
+ document.removeEventListener("keydown", _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
4095
4071
  }
4096
4072
  register(query) {
4097
4073
  const els = getPopoverElements.call(this, query);