vrembem 1.40.3 → 1.42.1

package/dev/scripts.umd.js

@@ -386,6 +386,30 @@
     return _extends.apply(this, arguments);
   }
 
+  function _inheritsLoose(subClass, superClass) {
+    subClass.prototype = Object.create(superClass.prototype);
+    subClass.prototype.constructor = subClass;
+
+    _setPrototypeOf(subClass, superClass);
+  }
+
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
+  function _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return self;
+  }
+
   var defaults$3 = {
     autoInit: false,
     stateAttr: 'aria-checked',
@@ -1003,6 +1027,7 @@
     dataClose: 'modal-close',
     dataFocus: 'modal-focus',
     dataRequired: 'modal-required',
+    dataConfig: 'modal-config',
     // State classes
     stateOpened: 'is-opened',
     stateOpening: 'is-opening',
@@ -1022,6 +1047,36 @@
     transition: true
   };
 
+  function getModalConfig(modal) {
+    var json = modal.getAttribute("data-" + this.settings.dataConfig);
+
+    if (json) {
+      var config = JSON.parse(json);
+      return _extends({}, this.settings, config);
+    } else {
+      return this.settings;
+    }
+  }
+  function getModal(modalKey) {
+    if (typeof modalKey !== 'string') return modalKey;
+    return document.querySelector("[data-" + this.settings.dataModal + "=\"" + modalKey + "\"]");
+  }
+  function modalNotFound(key) {
+    return Promise.reject(new Error("Did not find modal with key: \"" + key + "\""));
+  }
+  function moveModals(type, ref) {
+    if (type === void 0) {
+      type = this.settings.moveModals.type;
+    }
+
+    if (ref === void 0) {
+      ref = this.settings.moveModals.ref;
+    }
+
+    var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
+    if (modals.length) moveElement(modals, type, ref);
+  }
+
   var close$1 = function close(returnFocus) {
     if (returnFocus === void 0) {
       returnFocus = true;
@@ -1034,14 +1089,15 @@
 
       if (modal) {
         _this2.working = true;
-        setInert(false, _this2.settings.selectorInert);
-        setOverflowHidden(false, _this2.settings.selectorOverflow);
-        return Promise.resolve(closeTransition(modal, _this2.settings)).then(function () {
+        var config = getModalConfig.call(_this2, modal);
+        setInert(false, config.selectorInert);
+        setOverflowHidden(false, config.selectorOverflow);
+        return Promise.resolve(closeTransition(modal, config)).then(function () {
           if (returnFocus) focusTrigger(_this2);
 
           _this2.focusTrap.destroy();
 
-          modal.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'closed', {
+          modal.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
             detail: _this2,
             bubbles: true
           }));
@@ -1117,26 +1173,6 @@
     }
   }
 
-  function getModal(modalKey) {
-    if (typeof modalKey !== 'string') return modalKey;
-    return document.querySelector("[data-" + this.settings.dataModal + "=\"" + modalKey + "\"]");
-  }
-  function modalNotFound(key) {
-    return Promise.reject(new Error("Did not find modal with key: \"" + key + "\""));
-  }
-  function moveModals(type, ref) {
-    if (type === void 0) {
-      type = this.settings.moveModals.type;
-    }
-
-    if (ref === void 0) {
-      ref = this.settings.moveModals.ref;
-    }
-
-    var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
-    if (modals.length) moveElement(modals, type, ref);
-  }
-
   function setInitialState() {
     var _this = this;
 
@@ -1163,16 +1199,17 @@
 
       var modal = getModal.call(_this2, modalKey);
       if (!modal) return Promise.resolve(modalNotFound(modalKey));
+      var config = getModalConfig.call(_this2, modal);
 
-      if (hasClass(modal, _this2.settings.stateClosed)) {
+      if (hasClass(modal, config.stateClosed)) {
         _this2.working = true;
-        setOverflowHidden(true, _this2.settings.selectorOverflow);
-        return Promise.resolve(openTransition(modal, _this2.settings)).then(function () {
+        setOverflowHidden(true, config.selectorOverflow);
+        return Promise.resolve(openTransition(modal, config)).then(function () {
           _this2.focusTrap.init(modal);
 
-          focusTarget(modal, _this2.settings);
-          setInert(true, _this2.settings.selectorInert);
-          modal.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'opened', {
+          focusTarget(modal, config);
+          setInert(true, config.selectorInert);
+          modal.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
             detail: _this2,
             bubbles: true
           }));
@@ -1278,39 +1315,96 @@
     return Modal;
   }();
 
+  var Collection = /*#__PURE__*/function () {
+    function Collection() {
+      this.collection = [];
+    }
+
+    var _proto = Collection.prototype;
+
+    _proto.register = function register(item) {
+      this.deregister(item);
+      this.collection.push(item);
+      return this.collection;
+    };
+
+    _proto.deregister = function deregister(ref) {
+      var index = this.collection.findIndex(function (entry) {
+        return entry === ref;
+      });
+
+      if (index >= 0) {
+        var entry = this.collection[index];
+        Object.getOwnPropertyNames(entry).forEach(function (prop) {
+          delete entry[prop];
+        });
+        this.collection.splice(index, 1);
+      }
+
+      return this.collection;
+    };
+
+    _proto.registerCollection = function registerCollection(items) {
+      var _this = this;
+
+      items.forEach(function (item) {
+        _this.register(item);
+      });
+      return this.collection;
+    };
+
+    _proto.deregisterCollection = function deregisterCollection() {
+      while (this.collection.length > 0) {
+        this.deregister(this.collection[0]);
+      }
+
+      return this.collection;
+    };
+
+    _proto.get = function get(query, key) {
+      if (key === void 0) {
+        key = 'id';
+      }
+
+      var result = this.collection.find(function (item) {
+        return item[key] === query;
+      });
+      return result || null;
+    };
+
+    return Collection;
+  }();
+
   var defaults = {
     autoInit: false,
-    // Data attributes
-    dataPopover: 'popover',
-    dataTrigger: 'popover-trigger',
-    dataArrow: 'popover-arrow',
-    dataEventType: 'popover-event',
-    dataPlacement: 'popover-placement',
+    // Selectors
+    selectorPopover: '.popover',
+    selectorArrow: '.popover__arrow',
     // State classes
     stateActive: 'is-active',
     // Feature toggles
-    eventType: 'click',
     eventListeners: true,
-    placement: 'bottom-start'
+    eventType: 'click',
+    placement: 'bottom'
   };
 
   function close(popover) {
     // Update state class
     popover.target.classList.remove(this.settings.stateActive); // Update a11y attributes
 
-    popover.trigger.setAttribute('aria-expanded', 'false'); // Disable popper event listeners
+    if (popover.trigger.hasAttribute('aria-controls')) {
+      popover.trigger.setAttribute('aria-expanded', 'false');
+    } // Disable popper event listeners
+
 
     popover.popper.setOptions({
       modifiers: [{
         name: 'eventListeners',
         enabled: false
       }]
-    }); // Update collection status with new state
+    }); // Update popover state
 
-    var index = this.collection.findIndex(function (item) {
-      return item.target === popover.target;
-    });
-    this.collection[index].state = 'closed'; // Clear the memory if popover trigger matches the ones saved in memory
+    popover.state = 'closed'; // Clear memory if popover trigger matches the one saved in memory
 
     if (popover.trigger === this.memory.trigger) {
       this.memory.trigger = null;
@@ -1320,19 +1414,15 @@
     return popover;
   }
   function closeAll() {
-    var _this = this;
-
     this.collection.forEach(function (popover) {
       if (popover.state === 'opened') {
-        _this.close(popover);
+        popover.close();
       }
     }); // Return the collection
 
     return this.collection;
   }
   function closeCheck(popover) {
-    var _this2 = this;
-
     // Only run closeCheck if provided popover is currently open
     if (popover.state != 'opened') return; // Needed to correctly check which element is currently being focused
 
@@ -1340,10 +1430,10 @@
       // Check if trigger or target are being hovered
       var isHovered = popover.target.closest(':hover') === popover.target || popover.trigger.closest(':hover') === popover.trigger; // Check if trigger or target are being focused
 
-      var isFocused = document.activeElement.closest("[data-" + _this2.settings.dataPopover + "]") === popover.target || document.activeElement.closest("[data-" + _this2.settings.dataTrigger + "]") === popover.trigger; // Close if the trigger and target are not currently hovered or focused
+      var isFocused = document.activeElement.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"]"); // Close if the trigger and target are not currently hovered or focused
 
       if (!isHovered && !isFocused) {
-        _this2.close(popover);
+        popover.close();
       } // Return the popover
 
 
@@ -1353,10 +1443,10 @@
 
   function handlerClick(popover) {
     if (popover.target.classList.contains(this.settings.stateActive)) {
-      this.close(popover);
+      popover.close();
     } else {
       this.memory.trigger = popover.trigger;
-      this.open(popover);
+      popover.open();
       documentClick.call(this, popover);
     }
   }
@@ -1369,7 +1459,7 @@
           this.memory.trigger.focus();
         }
 
-        this.closeAll();
+        closeAll.call(this);
         return;
 
       case 'Tab':
@@ -1383,19 +1473,21 @@
     }
   }
   function documentClick(popover) {
-    var obj = this;
+    var root = this;
     document.addEventListener('click', function _f(event) {
-      var result = event.target.closest("[data-" + obj.settings.dataPopover + "], [data-" + obj.settings.dataTrigger + "]");
-      var match = result === popover.target || result === popover.trigger;
+      // Check if a popover was clicked
+      var result = event.target.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"]");
 
-      if (!match) {
-        if (popover.target.classList.contains(obj.settings.stateActive)) {
-          obj.close(popover);
+      if (!result) {
+        // If it doesn't match and popover is open, close it and remove event listener
+        if (popover.target && popover.target.classList.contains(root.settings.stateActive)) {
+          popover.close();
         }
 
         this.removeEventListener('click', _f);
       } else {
-        if (!popover.target.classList.contains(obj.settings.stateActive)) {
+        // If it does match and popover isn't currently active, remove event listener
+        if (popover.target && !popover.target.classList.contains(root.settings.stateActive)) {
           this.removeEventListener('click', _f);
         }
       }
@@ -1412,30 +1504,23 @@
       'offset': 0,
       'overflow-padding': 0,
       'flip-padding': 0,
-      'arrow-element': "[data-" + settings.dataArrow + "]",
+      'arrow-element': settings.selectorArrow,
       'arrow-padding': 0
     }; // Loop through config obj
 
     for (var prop in config) {
       // Get the CSS variable property values
       var prefix = getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
-      var val = styles.getPropertyValue("--" + prefix + "popover-" + prop).trim(); // If a value was found, replace the default in config obj
+      var value = styles.getPropertyValue("--" + prefix + "popover-" + prop).trim(); // If a value was found, replace the default in config obj
 
-      if (val) {
-        config[prop] = val;
+      if (value) {
+        config[prop] = value;
       }
     } // Return the config obj
 
 
     return config;
   }
-  function getData(el, attr, fallback) {
-    if (fallback === void 0) {
-      fallback = false;
-    }
-
-    return el.hasAttribute("data-" + attr) ? el.getAttribute("data-" + attr) : fallback;
-  }
   function getPadding(value) {
     var padding; // Split the value by spaces if it's a string
 
@@ -1509,47 +1594,56 @@
       }
     }];
   }
-  function getPopover(trigger, settings) {
-    // Get the value of the popover trigger attribute
-    var id = trigger.getAttribute("data-" + settings.dataTrigger).trim();
+  function getPopoverID(obj) {
+    // If it's a string
+    if (typeof obj === 'string') {
+      return obj;
+    } // If it's an HTML element
+    else if (typeof obj.hasAttribute === 'function') {
+      // If it's a popover trigger
+      if (obj.hasAttribute('aria-controls')) {
+        return obj.getAttribute('aria-controls');
+      } // If it's a popover tooltip trigger
+      else if (obj.hasAttribute('aria-describedby')) {
+        return obj.getAttribute('aria-describedby');
+      } // If it's a popover target
+      else if (obj.closest(this.settings.selectorPopover)) {
+        return obj.id;
+      } // Return false if no id was found
+      else return false;
+    } // If it has an ID property
+    else if (obj.id) {
+      return obj.id;
+    } // Return false if no id was found
+    else return false;
+  }
+  function getPopoverElements(query) {
+    var id = getPopoverID.call(this, query);
 
     if (id) {
-      // If trigger attribute value exists, return the querySelector element using
-      // the provided popover trigger attribute's value
-      return document.querySelector("[data-" + settings.dataPopover + "=\"" + id + "\"]");
-    } else {
-      // If trigger attribute value doesn't exist, check if 
-      // - There is a nextElementSibling relative to the trigger
-      // - And it has the popover data attribute.
-      return trigger.nextElementSibling && trigger.nextElementSibling.hasAttribute("data-" + settings.dataPopover) ? // Return the element or false if the two checks fail
-      trigger.nextElementSibling : false;
-    }
-  }
-
-  function open(popover) {
-    // Update state class
-    popover.target.classList.add(this.settings.stateActive); // Update a11y attributes
-
-    popover.trigger.setAttribute('aria-expanded', 'true'); // Update popover config
-
-    popover.config = getConfig(popover.target, this.settings); // Enable popper event listeners and set placement/modifiers
-
-    popover.popper.setOptions({
-      placement: getData(popover.target, this.settings.dataPlacement, popover.config['placement']),
-      modifiers: [{
-        name: 'eventListeners',
-        enabled: true
-      }].concat(getModifiers(popover.config))
-    }); // Update popover's position
+      var trigger = document.querySelector("[aria-controls=\"" + id + "\"]") || document.querySelector("[aria-describedby=\"" + id + "\"]");
+      var target = document.querySelector("#" + id);
 
-    popover.popper.update(); // Update collection status with new state
-
-    var index = this.collection.findIndex(function (item) {
-      return item.target === popover.target;
-    });
-    this.collection[index].state = 'opened'; // Return the popover
+      if (!trigger && !target) {
+        console.error('No popover elements found using the provided ID:', id);
+      } else if (!trigger) {
+        console.error('No popover trigger associated with the provided popover:', target);
+      } else if (!target) {
+        console.error('No popover associated with the provided popover trigger:', trigger);
+      }
 
-    return popover;
+      if (!trigger || !target) {
+        return false;
+      } else {
+        return {
+          trigger: trigger,
+          target: target
+        };
+      }
+    } else {
+      console.error('Could not resolve the popover ID:', query);
+      return false;
+    }
   }
 
   var top = 'top';
@@ -3335,72 +3429,98 @@
     defaultModifiers: defaultModifiers
   }); // eslint-disable-next-line import/no-unused-modules
 
-  function register(trigger, target) {
-    // If no target is passed
-    if (!target) {
-      // Try and get the target
-      target = getPopover(trigger, this.settings); // If still no target is returned, log an error and return false
+  function open(popover) {
+    // Update state class
+    popover.target.classList.add(this.settings.stateActive); // Update a11y attribute
 
-      if (!target) {
-        console.error('No popover associated with the provided trigger:', trigger);
-        return false;
-      }
-    } // Check if this item has already been registered in the collection
+    if (popover.trigger.hasAttribute('aria-controls')) {
+      popover.trigger.setAttribute('aria-expanded', 'true');
+    } // Update popover config
+
+
+    popover.config = getConfig(popover.target, this.settings); // Enable popper event listeners and set placement/modifiers
+
+    popover.popper.setOptions({
+      placement: popover.config['placement'],
+      modifiers: [{
+        name: 'eventListeners',
+        enabled: true
+      }].concat(getModifiers(popover.config))
+    }); // Update popover position
 
+    popover.popper.update(); // Update popover state
 
-    var index = this.collection.findIndex(function (item) {
-      return item.trigger === trigger && item.target === target;
-    }); // Initiate popover variable
+    popover.state = 'opened'; // Return the popover
 
-    var popover; // Check if it already exists in collection
+    return popover;
+  }
 
-    if (index >= 0) {
-      // Set popover as item from collection
-      popover = this.collection[index];
-    } else {
-      // Create popper instance
-      var popperInstance = createPopper(trigger, target); // Build popover object and push to collection array
+  function register(trigger, target) {
+    // Deregister popover if it already exists in the collection
+    this.deregister(target.id); // Create popper instance
+
+    var popperInstance = createPopper(trigger, target); // Save root this for use inside object & create methods API
 
-      popover = {
-        state: 'closed',
-        trigger: trigger,
-        target: target,
-        popper: popperInstance,
-        config: getConfig(target, this.settings)
-      }; // Add item to collection
+    var root = this;
+    var methods = {
+      open: function open$1() {
+        open.call(root, this);
+      },
+      close: function close$1() {
+        close.call(root, this);
+      },
+      deregister: function deregister() {
+        _deregister.call(root, this);
+      }
+    }; // Build popover object and push to collection array
 
-      this.collection.push(popover);
-    } // Setup event listeners
+    var popover = _extends({
+      id: target.id,
+      state: 'closed',
+      trigger: trigger,
+      target: target,
+      popper: popperInstance,
+      config: getConfig(target, this.settings)
+    }, methods); // Setup event listeners
 
 
     registerEventListeners.call(this, popover); // Set initial state of popover
 
     if (popover.target.classList.contains(this.settings.stateActive)) {
-      this.open(popover);
+      popover.open();
       documentClick.call(this, popover);
     } else {
-      this.close(popover);
-    } // Return the popover object
+      popover.close();
+    } // Add item to collection
+
 
+    this.collection.push(popover); // Return the popover object
 
     return popover;
   }
-  function deregister(popover) {
+
+  function _deregister(popover) {
     // Check if this item has been registered in the collection
-    var index = this.collection.findIndex(function (item) {
-      return item.trigger === popover.trigger && item.target === popover.target;
-    }); // If the item exists in the collection
+    var index = this.collection.findIndex(function (entry) {
+      return entry.id === popover.id;
+    }); // If the entry exists in the collection
 
     if (index >= 0) {
-      // Close the popover
-      if (popover.state === 'opened') {
-        this.close(popover);
+      // Get the collection entry
+      var entry = this.collection[index]; // Close the collection entry if it's open
+
+      if (entry.state === 'opened') {
+        entry.close();
       } // Clean up the popper instance
 
 
-      popover.popper.destroy(); // Remove event listeners
+      entry.popper.destroy(); // Remove event listeners
 
-      deregisterEventListeners(popover); // Remove item from collection
+      deregisterEventListeners(entry); // Delete properties from collection entry
+
+      Object.getOwnPropertyNames(entry).forEach(function (prop) {
+        delete entry[prop];
+      }); // Remove entry from collection
 
       this.collection.splice(index, 1);
     } // Return the new collection
@@ -3412,7 +3532,7 @@
     // If event listeners aren't already setup
     if (!popover.__eventListeners) {
       // Add event listeners based on event type
-      var eventType = getData(popover.target, this.settings.dataEventType, popover.config['event']);
+      var eventType = popover.config['event'];
 
       if (eventType === 'hover') {
         // Setup event listeners object for hover
@@ -3473,38 +3593,23 @@
 
     return popover;
   }
-  function registerCollection() {
-    var _this = this;
-
-    // Get all the triggers
-    var triggers = document.querySelectorAll("[data-" + this.settings.dataTrigger + "]");
-    triggers.forEach(function (trigger) {
-      // Register the popover and save to collection array
-      _this.register(trigger, false);
-    }); // Return the popover collection
 
-    return this.collection;
-  }
-  function deregisterCollection() {
-    // Loop through all items within the collection and pass them to deregister()
-    while (this.collection.length > 0) {
-      this.deregister(this.collection[0]);
-    } // Return the popover collection
+  var Popover = /*#__PURE__*/function (_Collection) {
+    _inheritsLoose(Popover, _Collection);
 
+    function Popover(options) {
+      var _this;
 
-    return this.collection;
-  }
+      _this = _Collection.call(this) || this;
+      _this.defaults = defaults;
+      _this.settings = _extends({}, _this.defaults, options); // this.collection = [];
 
-  var Popover = /*#__PURE__*/function () {
-    function Popover(options) {
-      this.defaults = defaults;
-      this.settings = _extends({}, this.defaults, options);
-      this.collection = [];
-      this.memory = {
+      _this.memory = {
         trigger: null
       };
-      this.__handlerKeydown = handlerKeydown.bind(this);
-      if (this.settings.autoInit) this.init();
+      _this.__handlerKeydown = handlerKeydown.bind(_assertThisInitialized(_this));
+      if (_this.settings.autoInit) _this.init();
+      return _this;
     }
 
     var _proto = Popover.prototype;
@@ -3515,9 +3620,11 @@
       }
 
       // Update settings with passed options
-      if (options) this.settings = _extends({}, this.settings, options); // Build the collections array with popover instances
+      if (options) this.settings = _extends({}, this.settings, options); // Get all the popovers
+
+      var popovers = document.querySelectorAll(this.settings.selectorPopover); // Build the collections array with popover instances
 
-      this.registerCollection(); // If eventListeners is enabled
+      this.registerCollection(popovers); // If eventListeners is enabled
 
       if (this.settings.eventListeners) {
         // Pass false to initEventListeners() since registerCollection()
@@ -3542,7 +3649,7 @@
     ;
 
     _proto.initEventListeners = function initEventListeners(processCollection) {
-      var _this = this;
+      var _this2 = this;
 
       if (processCollection === void 0) {
         processCollection = true;
@@ -3551,7 +3658,7 @@
       if (processCollection) {
         // Loop through collection and setup event listeners
         this.collection.forEach(function (popover) {
-          registerEventListeners.call(_this, popover);
+          registerEventListeners.call(_this2, popover);
         });
       } // Add keydown global event listener
 
@@ -3579,44 +3686,40 @@
      */
     ;
 
-    _proto.register = function register$1(trigger, target) {
-      if (target === void 0) {
-        target = false;
-      }
-
-      return register.call(this, trigger, target);
-    };
-
-    _proto.deregister = function deregister$1(popover) {
-      return deregister.call(this, popover);
-    };
-
-    _proto.registerCollection = function registerCollection$1() {
-      return registerCollection.call(this);
+    _proto.register = function register$1(query) {
+      var els = getPopoverElements.call(this, query);
+      if (!els) return false;
+      return register.call(this, els.trigger, els.target);
     };
 
-    _proto.deregisterCollection = function deregisterCollection$1() {
-      return deregisterCollection.call(this);
+    _proto.deregister = function deregister(query) {
+      var popover = this.get(getPopoverID(query));
+      if (!popover) return false;
+      return _deregister.call(this, popover);
     }
     /**
      * Change state functionality
      */
     ;
 
-    _proto.open = function open$1(popover) {
-      return open.call(this, popover);
+    _proto.open = function open(id) {
+      var popover = this.get(id);
+      if (!popover) return false;
+      return popover.open();
     };
 
-    _proto.close = function close$1(popover) {
-      return close.call(this, popover);
-    };
-
-    _proto.closeAll = function closeAll$1() {
-      return closeAll.call(this);
+    _proto.close = function close(id) {
+      if (id) {
+        var popover = this.get(id);
+        if (!popover) return false;
+        return popover.close();
+      } else {
+        return closeAll.call(this);
+      }
     };
 
     return Popover;
-  }();
+  }(Collection);
 
   exports.Checkbox = Checkbox;
   exports.Drawer = Drawer;