vrembem 1.40.1 → 1.40.2

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.
@@ -456,47 +456,6 @@ var defaults$2 = {
456
456
  transition: true
457
457
  };
458
458
 
459
- async function switchToModal(drawerKey, obj) {
460
- // Initial guards
461
- const drawer = obj.getDrawer(drawerKey);
462
- if (!drawer) return obj.drawerNotFound(drawerKey);
463
- if (hasClass(drawer, obj.settings.classModal)) return; // Enable modal state
464
-
465
- addClass(drawer, obj.settings.classModal);
466
- addClass(drawer, obj.settings.stateClosed);
467
- removeClass(drawer, obj.settings.stateOpened); // Dispatch custom event
468
-
469
- drawer.dispatchEvent(new CustomEvent(obj.settings.customEventPrefix + 'toModal', {
470
- bubbles: true
471
- }));
472
- return drawer;
473
- }
474
- async function switchToDefault(drawerKey, obj) {
475
- // Initial guards
476
- const drawer = obj.getDrawer(drawerKey);
477
- if (!drawer) return obj.drawerNotFound(drawerKey);
478
- if (!hasClass(drawer, obj.settings.classModal)) return; // Tear down modal state
479
-
480
- setInert(false, obj.settings.selectorInert);
481
- setOverflowHidden(false, obj.settings.selectorOverflow);
482
- removeClass(drawer, obj.settings.classModal);
483
- obj.focusTrap.destroy(); // Restore drawers saved state
484
-
485
- drawerKey = drawer.getAttribute(`data-${obj.settings.dataDrawer}`);
486
- const drawerState = obj.state[drawerKey];
487
-
488
- if (drawerState == obj.settings.stateOpened) {
489
- addClass(drawer, obj.settings.stateOpened);
490
- removeClass(drawer, obj.settings.stateClosed);
491
- } // Dispatch custom event
492
-
493
-
494
- drawer.dispatchEvent(new CustomEvent(obj.settings.customEventPrefix + 'toDefault', {
495
- bubbles: true
496
- }));
497
- return drawer;
498
- }
499
-
500
459
  class Breakpoint {
501
460
  constructor(parent) {
502
461
  this.mediaQueryLists = [];
@@ -549,9 +508,9 @@ class Breakpoint {
549
508
 
550
509
  match(mql, drawer) {
551
510
  if (mql.matches) {
552
- switchToDefault(drawer, this.parent);
511
+ this.parent.switchToDefault(drawer);
553
512
  } else {
554
- switchToModal(drawer, this.parent);
513
+ this.parent.switchToModal(drawer);
555
514
  }
556
515
  }
557
516
 
@@ -576,6 +535,41 @@ class Breakpoint {
576
535
 
577
536
  }
578
537
 
538
+ function getDrawer(drawerKey) {
539
+ if (typeof drawerKey !== 'string') return drawerKey;
540
+ return document.querySelector(`[data-${this.settings.dataDrawer}="${drawerKey}"]`);
541
+ }
542
+ function drawerNotFound(key) {
543
+ return Promise.reject(new Error(`Did not find drawer with key: "${key}"`));
544
+ }
545
+
546
+ async function close$2(drawerKey) {
547
+ const drawer = this.getDrawer(drawerKey);
548
+ if (!drawer) return drawerNotFound(drawerKey);
549
+
550
+ if (hasClass(drawer, this.settings.stateOpened)) {
551
+ this.working = true;
552
+
553
+ if (hasClass(drawer, this.settings.classModal)) {
554
+ setInert(false, this.settings.selectorInert);
555
+ setOverflowHidden(false, this.settings.selectorOverflow);
556
+ }
557
+
558
+ await closeTransition(drawer, this.settings);
559
+ this.stateSave(drawer);
560
+ focusTrigger(this);
561
+ this.focusTrap.destroy();
562
+ drawer.dispatchEvent(new CustomEvent(this.settings.customEventPrefix + 'closed', {
563
+ detail: this,
564
+ bubbles: true
565
+ }));
566
+ this.working = false;
567
+ return drawer;
568
+ } else {
569
+ return drawer;
570
+ }
571
+ }
572
+
579
573
  function handlerClick$2(event) {
580
574
  // Working catch
581
575
  if (this.working) return; // Toggle data trigger
@@ -638,6 +632,39 @@ function handlerKeydown$2(event) {
638
632
  }
639
633
  }
640
634
 
635
+ async function open$2(drawerKey) {
636
+ const drawer = this.getDrawer(drawerKey);
637
+ if (!drawer) return drawerNotFound(drawerKey);
638
+
639
+ if (!hasClass(drawer, this.settings.stateOpened)) {
640
+ this.working = true;
641
+ const isModal = hasClass(drawer, this.settings.classModal);
642
+
643
+ if (isModal) {
644
+ setOverflowHidden(true, this.settings.selectorOverflow);
645
+ }
646
+
647
+ await openTransition(drawer, this.settings);
648
+ this.stateSave(drawer);
649
+
650
+ if (isModal) {
651
+ this.focusTrap.init(drawer);
652
+ setInert(true, this.settings.selectorInert);
653
+ }
654
+
655
+ focusTarget(drawer, this.settings);
656
+ drawer.dispatchEvent(new CustomEvent(this.settings.customEventPrefix + 'opened', {
657
+ detail: this,
658
+ bubbles: true
659
+ }));
660
+ this.working = false;
661
+ return drawer;
662
+ } else {
663
+ focusTarget(drawer, this.settings);
664
+ return drawer;
665
+ }
666
+ }
667
+
641
668
  function stateSet(settings) {
642
669
  // If save state is disabled
643
670
  if (!settings.stateSave) return stateClear(settings); // If there isn't an existing state to set
@@ -682,6 +709,59 @@ function stateClear(settings) {
682
709
  return {};
683
710
  }
684
711
 
712
+ async function switchToModal(drawerKey) {
713
+ // Initial guards
714
+ const drawer = this.getDrawer(drawerKey);
715
+ if (!drawer) return drawerNotFound(drawerKey);
716
+ if (hasClass(drawer, this.settings.classModal)) return; // Enable modal state
717
+
718
+ addClass(drawer, this.settings.classModal);
719
+ addClass(drawer, this.settings.stateClosed);
720
+ removeClass(drawer, this.settings.stateOpened); // Dispatch custom event
721
+
722
+ drawer.dispatchEvent(new CustomEvent(this.settings.customEventPrefix + 'toModal', {
723
+ bubbles: true
724
+ }));
725
+ return drawer;
726
+ }
727
+ async function switchToDefault(drawerKey) {
728
+ // Initial guards
729
+ const drawer = this.getDrawer(drawerKey);
730
+ if (!drawer) return drawerNotFound(drawerKey);
731
+ if (!hasClass(drawer, this.settings.classModal)) return; // Tear down modal state
732
+
733
+ setInert(false, this.settings.selectorInert);
734
+ setOverflowHidden(false, this.settings.selectorOverflow);
735
+ removeClass(drawer, this.settings.classModal);
736
+ this.focusTrap.destroy(); // Restore drawers saved state
737
+
738
+ drawerKey = drawer.getAttribute(`data-${this.settings.dataDrawer}`);
739
+ const drawerState = this.state[drawerKey];
740
+
741
+ if (drawerState == this.settings.stateOpened) {
742
+ addClass(drawer, this.settings.stateOpened);
743
+ removeClass(drawer, this.settings.stateClosed);
744
+ } // Dispatch custom event
745
+
746
+
747
+ drawer.dispatchEvent(new CustomEvent(this.settings.customEventPrefix + 'toDefault', {
748
+ bubbles: true
749
+ }));
750
+ return drawer;
751
+ }
752
+
753
+ async function toggle(drawerKey) {
754
+ const drawer = this.getDrawer(drawerKey);
755
+ if (!drawer) return drawerNotFound(drawerKey);
756
+ const isClosed = !hasClass(drawer, this.settings.stateOpened);
757
+
758
+ if (isClosed) {
759
+ return this.open(drawer);
760
+ } else {
761
+ return this.close(drawer);
762
+ }
763
+ }
764
+
685
765
  class Drawer {
686
766
  constructor(options) {
687
767
  this.defaults = defaults$2;
@@ -743,20 +823,14 @@ class Drawer {
743
823
 
744
824
 
745
825
  getDrawer(drawerKey) {
746
- if (typeof drawerKey !== 'string') return drawerKey;
747
- return document.querySelector(`[data-${this.settings.dataDrawer}="${drawerKey}"]`);
748
- }
749
-
750
- drawerNotFound(key) {
751
- return Promise.reject(new Error(`Did not find drawer with key: "${key}"`));
826
+ return getDrawer.call(this, drawerKey);
752
827
  }
753
828
 
754
829
  setTabindex() {
755
- const selectorTabindex = `
830
+ return setTabindex(`
756
831
  [data-${this.settings.dataDrawer}]
757
832
  [data-${this.settings.dataDialog}]
758
- `;
759
- setTabindex(selectorTabindex);
833
+ `);
760
834
  }
761
835
  /**
762
836
  * Save state functionality
@@ -780,87 +854,27 @@ class Drawer {
780
854
 
781
855
 
782
856
  switchToDefault(drawerKey) {
783
- return switchToDefault(drawerKey, this);
857
+ return switchToDefault.call(this, drawerKey);
784
858
  }
785
859
 
786
860
  switchToModal(drawerKey) {
787
- return switchToModal(drawerKey, this);
861
+ return switchToModal.call(this, drawerKey);
788
862
  }
789
863
  /**
790
864
  * Change state functionality
791
865
  */
792
866
 
793
867
 
794
- async toggle(drawerKey) {
795
- const drawer = this.getDrawer(drawerKey);
796
- if (!drawer) return this.drawerNotFound(drawerKey);
797
- const isClosed = !hasClass(drawer, this.settings.stateOpened);
798
-
799
- if (isClosed) {
800
- return this.open(drawer);
801
- } else {
802
- return this.close(drawer);
803
- }
868
+ toggle(drawerKey) {
869
+ return toggle.call(this, drawerKey);
804
870
  }
805
871
 
806
- async open(drawerKey) {
807
- const drawer = this.getDrawer(drawerKey);
808
- if (!drawer) return this.drawerNotFound(drawerKey);
809
-
810
- if (!hasClass(drawer, this.settings.stateOpened)) {
811
- this.working = true;
812
- const isModal = hasClass(drawer, this.settings.classModal);
813
-
814
- if (isModal) {
815
- setOverflowHidden(true, this.settings.selectorOverflow);
816
- }
817
-
818
- await openTransition(drawer, this.settings);
819
- this.stateSave(drawer);
820
-
821
- if (isModal) {
822
- this.focusTrap.init(drawer);
823
- setInert(true, this.settings.selectorInert);
824
- }
825
-
826
- focusTarget(drawer, this.settings);
827
- drawer.dispatchEvent(new CustomEvent(this.settings.customEventPrefix + 'opened', {
828
- detail: this,
829
- bubbles: true
830
- }));
831
- this.working = false;
832
- return drawer;
833
- } else {
834
- focusTarget(drawer, this.settings);
835
- return drawer;
836
- }
872
+ open(drawerKey) {
873
+ return open$2.call(this, drawerKey);
837
874
  }
838
875
 
839
- async close(drawerKey) {
840
- const drawer = this.getDrawer(drawerKey);
841
- if (!drawer) return this.drawerNotFound(drawerKey);
842
-
843
- if (hasClass(drawer, this.settings.stateOpened)) {
844
- this.working = true;
845
-
846
- if (hasClass(drawer, this.settings.classModal)) {
847
- setInert(false, this.settings.selectorInert);
848
- setOverflowHidden(false, this.settings.selectorOverflow);
849
- }
850
-
851
- await closeTransition(drawer, this.settings);
852
- this.stateSave(drawer);
853
- focusTrigger(this);
854
- this.focusTrap.destroy();
855
- drawer.dispatchEvent(new CustomEvent(this.settings.customEventPrefix + 'closed', {
856
- detail: this,
857
- bubbles: true
858
- }));
859
- this.working = false;
860
- return drawer;
861
- } else {
862
- return drawer;
863
- }
876
+ close(drawerKey) {
877
+ return close$2.call(this, drawerKey);
864
878
  }
865
879
 
866
880
  }
@@ -893,6 +907,27 @@ var defaults$1 = {
893
907
  transition: true
894
908
  };
895
909
 
910
+ async function close$1(returnFocus = true) {
911
+ const modal = document.querySelector(`[data-${this.settings.dataModal}].${this.settings.stateOpened}`);
912
+
913
+ if (modal) {
914
+ this.working = true;
915
+ setInert(false, this.settings.selectorInert);
916
+ setOverflowHidden(false, this.settings.selectorOverflow);
917
+ await closeTransition(modal, this.settings);
918
+ if (returnFocus) focusTrigger(this);
919
+ this.focusTrap.destroy();
920
+ modal.dispatchEvent(new CustomEvent(this.settings.customEventPrefix + 'closed', {
921
+ detail: this,
922
+ bubbles: true
923
+ }));
924
+ this.working = false;
925
+ return modal;
926
+ } else {
927
+ return modal;
928
+ }
929
+ }
930
+
896
931
  async function handlerClick$1(event) {
897
932
  // Working catch
898
933
  if (this.working) return; // Trigger click
@@ -935,21 +970,57 @@ function handlerKeydown$1(event) {
935
970
  }
936
971
  }
937
972
 
938
- function setInitialState(obj) {
939
- const modals = document.querySelectorAll(`[data-${obj.settings.dataModal}]`);
973
+ function getModal(modalKey) {
974
+ if (typeof modalKey !== 'string') return modalKey;
975
+ return document.querySelector(`[data-${this.settings.dataModal}="${modalKey}"]`);
976
+ }
977
+ function modalNotFound(key) {
978
+ return Promise.reject(new Error(`Did not find modal with key: "${key}"`));
979
+ }
980
+ function moveModals(type = this.settings.moveModals.type, ref = this.settings.moveModals.ref) {
981
+ const modals = document.querySelectorAll(`[data-${this.settings.dataModal}]`);
982
+ if (modals.length) moveElement(modals, type, ref);
983
+ }
984
+
985
+ function setInitialState() {
986
+ const modals = document.querySelectorAll(`[data-${this.settings.dataModal}]`);
940
987
  modals.forEach(el => {
941
- if (el.classList.contains(obj.settings.stateOpened)) {
942
- setInert(false, obj.settings.selectorInert);
943
- setOverflowHidden(false, obj.settings.selectorOverflow);
944
- focusTrigger(obj);
945
- obj.focusTrap.destroy();
946
- }
988
+ // Remove opened state setup
989
+ if (el.classList.contains(this.settings.stateOpened)) {
990
+ setInert(false, this.settings.selectorInert);
991
+ setOverflowHidden(false, this.settings.selectorOverflow);
992
+ focusTrigger(this);
993
+ this.focusTrap.destroy();
994
+ } // Remove all state classes and add the default state (closed)
947
995
 
948
- removeClass(el, obj.settings.stateOpened, obj.settings.stateOpening, obj.settings.stateClosing);
949
- addClass(el, obj.settings.stateClosed);
996
+
997
+ removeClass(el, this.settings.stateOpened, this.settings.stateOpening, this.settings.stateClosing);
998
+ addClass(el, this.settings.stateClosed);
950
999
  });
951
1000
  }
952
1001
 
1002
+ async function open$1(modalKey) {
1003
+ const modal = getModal.call(this, modalKey);
1004
+ if (!modal) return modalNotFound(modalKey);
1005
+
1006
+ if (hasClass(modal, this.settings.stateClosed)) {
1007
+ this.working = true;
1008
+ setOverflowHidden(true, this.settings.selectorOverflow);
1009
+ await openTransition(modal, this.settings);
1010
+ this.focusTrap.init(modal);
1011
+ focusTarget(modal, this.settings);
1012
+ setInert(true, this.settings.selectorInert);
1013
+ modal.dispatchEvent(new CustomEvent(this.settings.customEventPrefix + 'opened', {
1014
+ detail: this,
1015
+ bubbles: true
1016
+ }));
1017
+ this.working = false;
1018
+ return modal;
1019
+ } else {
1020
+ return modal;
1021
+ }
1022
+ }
1023
+
953
1024
  class Modal {
954
1025
  constructor(options) {
955
1026
  this.defaults = defaults$1;
@@ -965,13 +1036,12 @@ class Modal {
965
1036
  init(options = null) {
966
1037
  if (options) this.settings = _extends({}, this.settings, options);
967
1038
  this.moveModals();
1039
+ this.setInitialState();
968
1040
 
969
1041
  if (this.settings.setTabindex) {
970
1042
  this.setTabindex();
971
1043
  }
972
1044
 
973
- this.setInitialState();
974
-
975
1045
  if (this.settings.eventListeners) {
976
1046
  this.initEventListeners();
977
1047
  }
@@ -1006,76 +1076,34 @@ class Modal {
1006
1076
 
1007
1077
 
1008
1078
  getModal(modalKey) {
1009
- if (typeof modalKey !== 'string') return modalKey;
1010
- return document.querySelector(`[data-${this.settings.dataModal}="${modalKey}"]`);
1011
- }
1012
-
1013
- modalNotFound(key) {
1014
- return Promise.reject(new Error(`Did not find modal with key: "${key}"`));
1079
+ return getModal.call(this, modalKey);
1015
1080
  }
1016
1081
 
1017
1082
  setTabindex() {
1018
- const selectorTabindex = `
1083
+ return setTabindex(`
1019
1084
  [data-${this.settings.dataModal}]
1020
1085
  [data-${this.settings.dataDialog}]
1021
- `;
1022
- setTabindex(selectorTabindex);
1086
+ `);
1023
1087
  }
1024
1088
 
1025
1089
  setInitialState() {
1026
- setInitialState(this);
1090
+ return setInitialState.call(this);
1027
1091
  }
1028
1092
 
1029
- moveModals(type = this.settings.moveModals.type, ref = this.settings.moveModals.ref) {
1030
- const modals = document.querySelectorAll(`[data-${this.settings.dataModal}]`);
1031
- if (modals.length) moveElement(modals, type, ref);
1093
+ moveModals(type, ref) {
1094
+ return moveModals.call(this, type, ref);
1032
1095
  }
1033
1096
  /**
1034
1097
  * Change state functionality
1035
1098
  */
1036
1099
 
1037
1100
 
1038
- async open(modalKey) {
1039
- const modal = this.getModal(modalKey);
1040
- if (!modal) return this.modalNotFound(modalKey);
1041
-
1042
- if (hasClass(modal, this.settings.stateClosed)) {
1043
- this.working = true;
1044
- setOverflowHidden(true, this.settings.selectorOverflow);
1045
- await openTransition(modal, this.settings);
1046
- this.focusTrap.init(modal);
1047
- focusTarget(modal, this.settings);
1048
- setInert(true, this.settings.selectorInert);
1049
- modal.dispatchEvent(new CustomEvent(this.settings.customEventPrefix + 'opened', {
1050
- detail: this,
1051
- bubbles: true
1052
- }));
1053
- this.working = false;
1054
- return modal;
1055
- } else {
1056
- return modal;
1057
- }
1101
+ open(modalKey) {
1102
+ return open$1.call(this, modalKey);
1058
1103
  }
1059
1104
 
1060
- async close(returnFocus = true) {
1061
- const modal = document.querySelector(`[data-${this.settings.dataModal}].${this.settings.stateOpened}`);
1062
-
1063
- if (modal) {
1064
- this.working = true;
1065
- setInert(false, this.settings.selectorInert);
1066
- setOverflowHidden(false, this.settings.selectorOverflow);
1067
- await closeTransition(modal, this.settings);
1068
- if (returnFocus) focusTrigger(this);
1069
- this.focusTrap.destroy();
1070
- modal.dispatchEvent(new CustomEvent(this.settings.customEventPrefix + 'closed', {
1071
- detail: this,
1072
- bubbles: true
1073
- }));
1074
- this.working = false;
1075
- return modal;
1076
- } else {
1077
- return modal;
1078
- }
1105
+ close(returnFocus) {
1106
+ return close$1.call(this, returnFocus);
1079
1107
  }
1080
1108
 
1081
1109
  }
@@ -1096,9 +1124,9 @@ var defaults = {
1096
1124
  placement: 'bottom-start'
1097
1125
  };
1098
1126
 
1099
- function hide$2(popover, obj) {
1127
+ function close(popover) {
1100
1128
  // Update state class
1101
- popover.target.classList.remove(obj.settings.stateActive); // Update a11y attributes
1129
+ popover.target.classList.remove(this.settings.stateActive); // Update a11y attributes
1102
1130
 
1103
1131
  popover.trigger.setAttribute('aria-expanded', 'false'); // Disable popper event listeners
1104
1132
 
@@ -1109,39 +1137,39 @@ function hide$2(popover, obj) {
1109
1137
  }]
1110
1138
  }); // Update collection status with new state
1111
1139
 
1112
- const index = obj.collection.findIndex(item => {
1140
+ const index = this.collection.findIndex(item => {
1113
1141
  return item.target === popover.target;
1114
1142
  });
1115
- obj.collection[index].state = 'hide'; // Clear the memory if popover trigger matches the ones saved in memory
1143
+ this.collection[index].state = 'closed'; // Clear the memory if popover trigger matches the ones saved in memory
1116
1144
 
1117
- if (popover.trigger === obj.memory.trigger) {
1118
- obj.memory.trigger = null;
1145
+ if (popover.trigger === this.memory.trigger) {
1146
+ this.memory.trigger = null;
1119
1147
  } // Return the popover
1120
1148
 
1121
1149
 
1122
1150
  return popover;
1123
1151
  }
1124
- function hideAll(obj) {
1125
- obj.collection.forEach(popover => {
1126
- if (popover.state === 'show') {
1127
- hide$2(popover, obj);
1152
+ function closeAll() {
1153
+ this.collection.forEach(popover => {
1154
+ if (popover.state === 'opened') {
1155
+ this.close(popover);
1128
1156
  }
1129
1157
  }); // Return the collection
1130
1158
 
1131
- return obj.collection;
1159
+ return this.collection;
1132
1160
  }
1133
- function hideCheck(popover, obj) {
1134
- // Only run hideCheck if provided popover is currently open
1135
- if (popover.state != 'show') return; // Needed to correctly check which element is currently being focused
1161
+ function closeCheck(popover) {
1162
+ // Only run closeCheck if provided popover is currently open
1163
+ if (popover.state != 'opened') return; // Needed to correctly check which element is currently being focused
1136
1164
 
1137
1165
  setTimeout(() => {
1138
1166
  // Check if trigger or target are being hovered
1139
1167
  const isHovered = popover.target.closest(':hover') === popover.target || popover.trigger.closest(':hover') === popover.trigger; // Check if trigger or target are being focused
1140
1168
 
1141
- const isFocused = document.activeElement.closest(`[data-${obj.settings.dataPopover}]`) === popover.target || document.activeElement.closest(`[data-${obj.settings.dataTrigger}]`) === popover.trigger; // Hide if the trigger and target are not currently hovered or focused
1169
+ const isFocused = document.activeElement.closest(`[data-${this.settings.dataPopover}]`) === popover.target || document.activeElement.closest(`[data-${this.settings.dataTrigger}]`) === popover.trigger; // Close if the trigger and target are not currently hovered or focused
1142
1170
 
1143
1171
  if (!isHovered && !isFocused) {
1144
- hide$2(popover, obj);
1172
+ this.close(popover);
1145
1173
  } // Return the popover
1146
1174
 
1147
1175
 
@@ -1149,6 +1177,55 @@ function hideCheck(popover, obj) {
1149
1177
  }, 1);
1150
1178
  }
1151
1179
 
1180
+ function handlerClick(popover) {
1181
+ if (popover.target.classList.contains(this.settings.stateActive)) {
1182
+ this.close(popover);
1183
+ } else {
1184
+ this.memory.trigger = popover.trigger;
1185
+ this.open(popover);
1186
+ documentClick.call(this, popover);
1187
+ }
1188
+ }
1189
+ function handlerKeydown(event) {
1190
+ switch (event.key) {
1191
+ case 'Escape':
1192
+ if (this.memory.trigger) {
1193
+ this.memory.trigger.focus();
1194
+ }
1195
+
1196
+ this.closeAll();
1197
+ return;
1198
+
1199
+ case 'Tab':
1200
+ this.collection.forEach(popover => {
1201
+ closeCheck.call(this, popover);
1202
+ });
1203
+ return;
1204
+
1205
+ default:
1206
+ return;
1207
+ }
1208
+ }
1209
+ function documentClick(popover) {
1210
+ const obj = this;
1211
+ document.addEventListener('click', function _f(event) {
1212
+ const result = event.target.closest(`[data-${obj.settings.dataPopover}], [data-${obj.settings.dataTrigger}]`);
1213
+ const match = result === popover.target || result === popover.trigger;
1214
+
1215
+ if (!match) {
1216
+ if (popover.target.classList.contains(obj.settings.stateActive)) {
1217
+ obj.close(popover);
1218
+ }
1219
+
1220
+ this.removeEventListener('click', _f);
1221
+ } else {
1222
+ if (!popover.target.classList.contains(obj.settings.stateActive)) {
1223
+ this.removeEventListener('click', _f);
1224
+ }
1225
+ }
1226
+ });
1227
+ }
1228
+
1152
1229
  function getConfig(el, settings) {
1153
1230
  // Get the computed styles of the popover
1154
1231
  const styles = getComputedStyle(el); // Setup the config obj with default values
@@ -1269,16 +1346,16 @@ function getPopover(trigger, settings) {
1269
1346
  }
1270
1347
  }
1271
1348
 
1272
- function show(popover, obj) {
1349
+ function open(popover) {
1273
1350
  // Update state class
1274
- popover.target.classList.add(obj.settings.stateActive); // Update a11y attributes
1351
+ popover.target.classList.add(this.settings.stateActive); // Update a11y attributes
1275
1352
 
1276
1353
  popover.trigger.setAttribute('aria-expanded', 'true'); // Update popover config
1277
1354
 
1278
- popover.config = getConfig(popover.target, obj.settings); // Enable popper event listeners and set placement/modifiers
1355
+ popover.config = getConfig(popover.target, this.settings); // Enable popper event listeners and set placement/modifiers
1279
1356
 
1280
1357
  popover.popper.setOptions({
1281
- placement: getData(popover.target, obj.settings.dataPlacement, popover.config['placement']),
1358
+ placement: getData(popover.target, this.settings.dataPlacement, popover.config['placement']),
1282
1359
  modifiers: [{
1283
1360
  name: 'eventListeners',
1284
1361
  enabled: true
@@ -1287,62 +1364,14 @@ function show(popover, obj) {
1287
1364
 
1288
1365
  popover.popper.update(); // Update collection status with new state
1289
1366
 
1290
- const index = obj.collection.findIndex(item => {
1367
+ const index = this.collection.findIndex(item => {
1291
1368
  return item.target === popover.target;
1292
1369
  });
1293
- obj.collection[index].state = 'show'; // Return the popover
1370
+ this.collection[index].state = 'opened'; // Return the popover
1294
1371
 
1295
1372
  return popover;
1296
1373
  }
1297
1374
 
1298
- function handlerClick(popover) {
1299
- if (popover.target.classList.contains(this.settings.stateActive)) {
1300
- hide$2(popover, this);
1301
- } else {
1302
- this.memory.trigger = popover.trigger;
1303
- show(popover, this);
1304
- documentClick(popover, this);
1305
- }
1306
- }
1307
- function handlerKeydown(event) {
1308
- switch (event.key) {
1309
- case 'Escape':
1310
- if (this.memory.trigger) {
1311
- this.memory.trigger.focus();
1312
- }
1313
-
1314
- hideAll(this);
1315
- return;
1316
-
1317
- case 'Tab':
1318
- this.collection.forEach(popover => {
1319
- hideCheck(popover, this);
1320
- });
1321
- return;
1322
-
1323
- default:
1324
- return;
1325
- }
1326
- }
1327
- function documentClick(popover, obj) {
1328
- document.addEventListener('click', function _f(event) {
1329
- const result = event.target.closest(`[data-${obj.settings.dataPopover}], [data-${obj.settings.dataTrigger}]`);
1330
- const match = result === popover.target || result === popover.trigger;
1331
-
1332
- if (!match) {
1333
- if (popover.target.classList.contains(obj.settings.stateActive)) {
1334
- hide$2(popover, obj);
1335
- }
1336
-
1337
- this.removeEventListener('click', _f);
1338
- } else {
1339
- if (!popover.target.classList.contains(obj.settings.stateActive)) {
1340
- this.removeEventListener('click', _f);
1341
- }
1342
- }
1343
- });
1344
- }
1345
-
1346
1375
  var top = 'top';
1347
1376
  var bottom = 'bottom';
1348
1377
  var right = 'right';
@@ -3126,11 +3155,11 @@ var createPopper = /*#__PURE__*/popperGenerator({
3126
3155
  defaultModifiers: defaultModifiers
3127
3156
  }); // eslint-disable-next-line import/no-unused-modules
3128
3157
 
3129
- function register(trigger, target, obj) {
3158
+ function register(trigger, target) {
3130
3159
  // If no target is passed
3131
3160
  if (!target) {
3132
3161
  // Try and get the target
3133
- target = getPopover(trigger, obj.settings); // If still no target is returned, log an error and return false
3162
+ target = getPopover(trigger, this.settings); // If still no target is returned, log an error and return false
3134
3163
 
3135
3164
  if (!target) {
3136
3165
  console.error('No popover associated with the provided trigger:', trigger);
@@ -3139,7 +3168,7 @@ function register(trigger, target, obj) {
3139
3168
  } // Check if this item has already been registered in the collection
3140
3169
 
3141
3170
 
3142
- const index = obj.collection.findIndex(item => {
3171
+ const index = this.collection.findIndex(item => {
3143
3172
  return item.trigger === trigger && item.target === target;
3144
3173
  }); // Initiate popover variable
3145
3174
 
@@ -3147,45 +3176,45 @@ function register(trigger, target, obj) {
3147
3176
 
3148
3177
  if (index >= 0) {
3149
3178
  // Set popover as item from collection
3150
- popover = obj.collection[index];
3179
+ popover = this.collection[index];
3151
3180
  } else {
3152
3181
  // Create popper instance
3153
3182
  const popperInstance = createPopper(trigger, target); // Build popover object and push to collection array
3154
3183
 
3155
3184
  popover = {
3156
- state: 'hide',
3185
+ state: 'closed',
3157
3186
  trigger: trigger,
3158
3187
  target: target,
3159
3188
  popper: popperInstance,
3160
- config: getConfig(target, obj.settings)
3189
+ config: getConfig(target, this.settings)
3161
3190
  }; // Add item to collection
3162
3191
 
3163
- obj.collection.push(popover);
3192
+ this.collection.push(popover);
3164
3193
  } // Setup event listeners
3165
3194
 
3166
3195
 
3167
- registerEventListeners(popover, obj); // Set initial state of popover
3196
+ registerEventListeners.call(this, popover); // Set initial state of popover
3168
3197
 
3169
- if (popover.target.classList.contains(obj.settings.stateActive)) {
3170
- show(popover, obj);
3171
- documentClick(popover, obj);
3198
+ if (popover.target.classList.contains(this.settings.stateActive)) {
3199
+ this.open(popover);
3200
+ documentClick.call(this, popover);
3172
3201
  } else {
3173
- hide$2(popover, obj);
3202
+ this.close(popover);
3174
3203
  } // Return the popover object
3175
3204
 
3176
3205
 
3177
3206
  return popover;
3178
3207
  }
3179
- function deregister(popover, obj) {
3208
+ function deregister(popover) {
3180
3209
  // Check if this item has been registered in the collection
3181
- const index = obj.collection.findIndex(item => {
3210
+ const index = this.collection.findIndex(item => {
3182
3211
  return item.trigger === popover.trigger && item.target === popover.target;
3183
3212
  }); // If the item exists in the collection
3184
3213
 
3185
3214
  if (index >= 0) {
3186
- // Hide the popover
3187
- if (popover.state === 'show') {
3188
- hide$2(popover, obj);
3215
+ // Close the popover
3216
+ if (popover.state === 'opened') {
3217
+ this.close(popover);
3189
3218
  } // Clean up the popper instance
3190
3219
 
3191
3220
 
@@ -3193,28 +3222,28 @@ function deregister(popover, obj) {
3193
3222
 
3194
3223
  deregisterEventListeners(popover); // Remove item from collection
3195
3224
 
3196
- obj.collection.splice(index, 1);
3225
+ this.collection.splice(index, 1);
3197
3226
  } // Return the new collection
3198
3227
 
3199
3228
 
3200
- return obj.collection;
3229
+ return this.collection;
3201
3230
  }
3202
- function registerEventListeners(popover, obj) {
3231
+ function registerEventListeners(popover) {
3203
3232
  // If event listeners aren't already setup
3204
3233
  if (!popover.__eventListeners) {
3205
3234
  // Add event listeners based on event type
3206
- const eventType = getData(popover.target, obj.settings.dataEventType, popover.config['event']);
3235
+ const eventType = getData(popover.target, this.settings.dataEventType, popover.config['event']);
3207
3236
 
3208
3237
  if (eventType === 'hover') {
3209
3238
  // Setup event listeners object for hover
3210
3239
  popover.__eventListeners = [{
3211
3240
  el: ['trigger'],
3212
3241
  type: ['mouseenter', 'focus'],
3213
- listener: show.bind(null, popover, obj)
3242
+ listener: open.bind(this, popover)
3214
3243
  }, {
3215
3244
  el: ['trigger', 'target'],
3216
3245
  type: ['mouseleave', 'focusout'],
3217
- listener: hideCheck.bind(null, popover, obj)
3246
+ listener: closeCheck.bind(this, popover)
3218
3247
  }]; // Loop through listeners and apply to appropriate elements
3219
3248
 
3220
3249
  popover.__eventListeners.forEach(evObj => {
@@ -3229,7 +3258,7 @@ function registerEventListeners(popover, obj) {
3229
3258
  popover.__eventListeners = [{
3230
3259
  el: ['trigger'],
3231
3260
  type: ['click'],
3232
- listener: handlerClick.bind(obj, popover)
3261
+ listener: handlerClick.bind(this, popover)
3233
3262
  }]; // Loop through listeners and apply to appropriate elements
3234
3263
 
3235
3264
  popover.__eventListeners.forEach(evObj => {
@@ -3264,24 +3293,24 @@ function deregisterEventListeners(popover) {
3264
3293
 
3265
3294
  return popover;
3266
3295
  }
3267
- function registerCollection(obj) {
3296
+ function registerCollection() {
3268
3297
  // Get all the triggers
3269
- const triggers = document.querySelectorAll(`[data-${obj.settings.dataTrigger}]`);
3298
+ const triggers = document.querySelectorAll(`[data-${this.settings.dataTrigger}]`);
3270
3299
  triggers.forEach(trigger => {
3271
3300
  // Register the popover and save to collection array
3272
- register(trigger, false, obj);
3301
+ this.register(trigger, false);
3273
3302
  }); // Return the popover collection
3274
3303
 
3275
- return obj.collection;
3304
+ return this.collection;
3276
3305
  }
3277
- function deregisterCollection(obj) {
3306
+ function deregisterCollection() {
3278
3307
  // Loop through all items within the collection and pass them to deregister()
3279
- while (obj.collection.length > 0) {
3280
- deregister(obj.collection[0], obj);
3308
+ while (this.collection.length > 0) {
3309
+ this.deregister(this.collection[0]);
3281
3310
  } // Return the popover collection
3282
3311
 
3283
3312
 
3284
- return obj.collection;
3313
+ return this.collection;
3285
3314
  }
3286
3315
 
3287
3316
  class Popover {
@@ -3300,7 +3329,7 @@ class Popover {
3300
3329
  // Update settings with passed options
3301
3330
  if (options) this.settings = _extends({}, this.settings, options); // Build the collections array with popover instances
3302
3331
 
3303
- registerCollection(this); // If eventListeners is enabled
3332
+ this.registerCollection(); // If eventListeners is enabled
3304
3333
 
3305
3334
  if (this.settings.eventListeners) {
3306
3335
  // Pass false to initEventListeners() since registerCollection()
@@ -3311,7 +3340,7 @@ class Popover {
3311
3340
 
3312
3341
  destroy() {
3313
3342
  // Deregister all popovers from collection
3314
- deregisterCollection(this); // If eventListeners is enabled
3343
+ this.deregisterCollection(); // If eventListeners is enabled
3315
3344
 
3316
3345
  if (this.settings.eventListeners) {
3317
3346
  // Pass false to destroyEventListeners() since deregisterCollection()
@@ -3328,7 +3357,7 @@ class Popover {
3328
3357
  if (processCollection) {
3329
3358
  // Loop through collection and setup event listeners
3330
3359
  this.collection.forEach(popover => {
3331
- registerEventListeners(popover, this);
3360
+ registerEventListeners.call(this, popover);
3332
3361
  });
3333
3362
  } // Add keydown global event listener
3334
3363
 
@@ -3353,35 +3382,35 @@ class Popover {
3353
3382
 
3354
3383
 
3355
3384
  register(trigger, target = false) {
3356
- return register(trigger, target, this);
3385
+ return register.call(this, trigger, target);
3357
3386
  }
3358
3387
 
3359
3388
  deregister(popover) {
3360
- return deregister(popover, this);
3389
+ return deregister.call(this, popover);
3361
3390
  }
3362
3391
 
3363
3392
  registerCollection() {
3364
- return registerCollection(this);
3393
+ return registerCollection.call(this);
3365
3394
  }
3366
3395
 
3367
3396
  deregisterCollection() {
3368
- return deregisterCollection(this);
3397
+ return deregisterCollection.call(this);
3369
3398
  }
3370
3399
  /**
3371
3400
  * Change state functionality
3372
3401
  */
3373
3402
 
3374
3403
 
3375
- show(popover) {
3376
- return show(popover, this);
3404
+ open(popover) {
3405
+ return open.call(this, popover);
3377
3406
  }
3378
3407
 
3379
- hide(popover) {
3380
- return hide$2(popover, this);
3408
+ close(popover) {
3409
+ return close.call(this, popover);
3381
3410
  }
3382
3411
 
3383
- hideAll() {
3384
- return hideAll(this);
3412
+ closeAll() {
3413
+ return closeAll.call(this);
3385
3414
  }
3386
3415
 
3387
3416
  }