@appartmint/mint 2.4.4 → 2.6.0

package/dist/js/index.js

@@ -1,5 +1,85 @@
 /******/ var __webpack_modules__ = ({
 
+/***/ "./src/ts/imports/abstract/attaches-events.ts":
+/*!****************************************************!*\
+  !*** ./src/ts/imports/abstract/attaches-events.ts ***!
+  \****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   MintAttachesEvents: () => (/* binding */ MintAttachesEvents)
+/* harmony export */ });
+/**
+ * Imports
+ */
+/**
+ * Attaches Events
+ * @description Extended by classes that attach and detach events
+ */
+class MintAttachesEvents {
+    /**
+     * Event handlers
+     */
+    events = [];
+    /**
+     * Attach event to the given element
+     * @param element - Element to attach event to
+     * @param event - Event to attach
+     * @param handler - Handler to attach
+     */
+    attachEvent(element, event, handler) {
+        if (element) {
+            let oldElement = this.events.find(e => e.el === element);
+            if (oldElement) {
+                oldElement.handlers.push(handler);
+                oldElement.events.push(event);
+            }
+            else {
+                this.events.push({
+                    el: element,
+                    handlers: [handler],
+                    events: [event]
+                });
+            }
+            element.addEventListener(event, handler);
+        }
+    }
+    /**
+     * Detach events
+     */
+    detachEvents() {
+        this.events.forEach(event => {
+            event.handlers.forEach((handler, index) => {
+                event.el?.removeEventListener(event.events[index], handler);
+            });
+        });
+        this.events = [];
+    }
+}
+
+
+/***/ }),
+
+/***/ "./src/ts/imports/abstract/index.ts":
+/*!******************************************!*\
+  !*** ./src/ts/imports/abstract/index.ts ***!
+  \******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   MintAttachesEvents: () => (/* reexport safe */ _attaches_events__WEBPACK_IMPORTED_MODULE_0__.MintAttachesEvents)
+/* harmony export */ });
+/* harmony import */ var _attaches_events__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./attaches-events */ "./src/ts/imports/abstract/attaches-events.ts");
+/**
+ * Forward all abstract exports
+ */
+
+
+
+/***/ }),
+
 /***/ "./src/ts/imports/components/grid.ts":
 /*!*******************************************!*\
   !*** ./src/ts/imports/components/grid.ts ***!
@@ -38,14 +118,14 @@ class MintGrid {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   MintHeader: () => (/* binding */ MintHeader),
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */   MintHeader: () => (/* binding */ MintHeader)
 /* harmony export */ });
-/* harmony import */ var _enums_side__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../enums/side */ "./src/ts/imports/enums/side.ts");
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../util */ "./src/ts/imports/util/index.ts");
+/* harmony import */ var _panel__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./panel */ "./src/ts/imports/components/panel.ts");
+/* harmony import */ var _menu__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./menu */ "./src/ts/imports/components/menu.ts");
 /**
  * Imports
  */
+// Mint
 
 
 /**
@@ -57,7 +137,9 @@ class MintHeader {
      * Navbar settings
      */
     settings = {
-        from: _enums_side__WEBPACK_IMPORTED_MODULE_0__.EMintSide.Top,
+        id: 'mint-menu',
+        wrapperId: 'mint-wrapper',
+        title: 'menu',
         fixed: true
     };
     /**
@@ -65,150 +147,139 @@ class MintHeader {
      */
     el = {};
     /**
-     * Event handlers
+     * Navigation functionality
      */
-    events = [];
+    panel;
+    menu;
     /**
      * Initializes and closes the menu
      */
     constructor(settings) {
         this.settings = { ...this.settings, ...settings };
+        this.panel = new _panel__WEBPACK_IMPORTED_MODULE_0__.MintPanel(this.settings);
+        this.menu = new _menu__WEBPACK_IMPORTED_MODULE_1__.MintMenu(this.settings);
         this.attachElements();
-        this.attachEvents();
         this.addClasses();
     }
     /**
-     * Destroys the header
+     * Detach events
      */
-    destroy() {
-        console.log('npm destroy', this.events);
-        this.events.forEach(event => {
-            event.handlers.forEach((handler, index) => {
-                event.el?.removeEventListener(event.events[index], handler);
-            });
-        });
-        this.events = [];
+    detachEvents() {
+        this.panel?.detachEvents();
+        this.menu?.detachEvents();
     }
     /**
      * Adds elements to {@link el | `this.el`}
      */
     attachElements() {
-        this.el.html = document.querySelector('html');
         this.el.body = document.querySelector('body');
-        this.el.header = document.getElementById('mint-header');
-        this.el.mobileButton = this.el.header?.querySelector(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.controls('mint-wrapper')) || null;
-        this.el.wrapper = document.getElementById('mint-wrapper');
-        this.el.main = document.getElementsByTagName('main')[0];
-    }
-    /**
-     * Attach event to the given element
-     * @param element - Element to attach event to
-     * @param event - Event to attach
-     * @param handler - Handler to attach
-     */
-    attachEvent(element, event, handler) {
-        if (element) {
-            let oldElement = this.events.find(e => e.el === element);
-            if (oldElement) {
-                oldElement.handlers.push(handler);
-                oldElement.events.push(event);
-            }
-            else {
-                this.events.push({
-                    el: element,
-                    handlers: [handler],
-                    events: [event]
-                });
-            }
-            element.addEventListener(event, handler);
-        }
-    }
-    /**
-     * Adds events to the dom
-     */
-    attachEvents() {
-        this.attachEvent(window, 'resize', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleResize.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.default));
-        this.attachEvent(window, 'scroll', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleScroll.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.default, { trailing: false }));
-        this.attachEvent(this.el.main, 'click', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eCloseMobileMenu.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.default, { trailing: false }));
-        let focusables = this.el.header?.querySelectorAll(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.focusable), lastFocusable = focusables?.[focusables?.length - 1];
-        this.attachEvent(lastFocusable, 'keydown', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eWrapTab.bind(this)));
-        focusables?.forEach((focusable) => {
-            this.attachEvent(focusable, 'keydown', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleKeypress.bind(this)));
-        });
-        let menuButtons = this.el.wrapper?.querySelectorAll(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.controls());
-        menuButtons?.forEach((menuButton) => {
-            this.attachEvent(menuButton, 'click', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eToggleMenu.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.slow, { trailing: false }));
-        });
-        this.attachEvent(this.el.mobileButton, 'click', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eToggleMobileMenu.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.slow, { trailing: false }));
-        this.attachEvent(this.el.wrapper, 'transitionend', this.eTransitionEnd.bind(this));
     }
     /**
      * Adds classes that inform the styles based on settings
      */
     addClasses() {
-        this.el.header?.classList.remove('mint-top', 'mint-right', 'mint-bottom', 'mint-left');
-        this.el.header?.classList.add(`mint-${_enums_side__WEBPACK_IMPORTED_MODULE_0__.EMintSide[this.settings.from ?? 0].toLowerCase()}`);
         if (this.settings.fixed) {
             this.el.body?.classList.add('mint-fixed');
         }
-        if (this.settings.tray) {
-            this.el.header?.classList.add('mint-tray');
-        }
     }
+}
+
+
+/***/ }),
+
+/***/ "./src/ts/imports/components/index.ts":
+/*!********************************************!*\
+  !*** ./src/ts/imports/components/index.ts ***!
+  \********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   MintGrid: () => (/* reexport safe */ _grid__WEBPACK_IMPORTED_MODULE_0__.MintGrid),
+/* harmony export */   MintHeader: () => (/* reexport safe */ _header__WEBPACK_IMPORTED_MODULE_1__.MintHeader),
+/* harmony export */   MintMenu: () => (/* reexport safe */ _menu__WEBPACK_IMPORTED_MODULE_2__.MintMenu),
+/* harmony export */   MintPanel: () => (/* reexport safe */ _panel__WEBPACK_IMPORTED_MODULE_3__.MintPanel)
+/* harmony export */ });
+/* harmony import */ var _grid__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./grid */ "./src/ts/imports/components/grid.ts");
+/* harmony import */ var _header__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./header */ "./src/ts/imports/components/header.ts");
+/* harmony import */ var _menu__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./menu */ "./src/ts/imports/components/menu.ts");
+/* harmony import */ var _panel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./panel */ "./src/ts/imports/components/panel.ts");
+/**
+ * Forward all exports from the components directory
+ */
+
+
+
+
+
+
+/***/ }),
+
+/***/ "./src/ts/imports/components/menu.ts":
+/*!*******************************************!*\
+  !*** ./src/ts/imports/components/menu.ts ***!
+  \*******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   MintMenu: () => (/* binding */ MintMenu)
+/* harmony export */ });
+/* harmony import */ var _abstract__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../abstract */ "./src/ts/imports/abstract/index.ts");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../util */ "./src/ts/imports/util/index.ts");
+/**
+ * Imports
+ */
+// Mint
+
+
+/**
+ * Menu (dropdown) functionality
+ * @public
+ */
+class MintMenu extends _abstract__WEBPACK_IMPORTED_MODULE_0__.MintAttachesEvents {
     /**
-     * Sets the state of the mobile menu
-     * @param open - `true` to open the menu or `false` to close it
+     * Tray settings
      */
-    setMobileMenu(open = false) {
-        let ariaExpanded = open ? 'true' : 'false', ariaLabel = open ? 'close menu' : 'open menu';
-        this.el.mobileButton?.setAttribute('aria-expanded', ariaExpanded);
-        setTimeout(() => {
-            this.el.mobileButton?.setAttribute('aria-label', ariaLabel);
-        }, _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.fast);
-        if (open) {
-            if (this.settings.fixed !== true) {
-                window.scroll({
-                    top: 0,
-                    left: 0,
-                    behavior: 'smooth'
-                });
-            }
-            setTimeout(() => {
-                if (this.el.html) {
-                    let isMobile = _util__WEBPACK_IMPORTED_MODULE_1__.MintWindow.width() <= _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.break.sm, overflow = 'auto';
-                    if (this.settings.tray) {
-                        if (isMobile) {
-                            overflow = 'hidden';
-                        }
-                    }
-                    else {
-                        overflow = 'hidden';
-                    }
-                    this.el.html.style.overflow = overflow;
-                }
-            }, this.settings.from === _enums_side__WEBPACK_IMPORTED_MODULE_0__.EMintSide.Left ? _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.default : _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.instant);
-            if (this.el.wrapper) {
-                this.el.wrapper.style.display = 'flex';
-            }
-            requestAnimationFrame(() => {
-                this.el.wrapper?.classList.add('mint-open');
-            });
+    settings = {};
+    /**
+     * Frequently-referenced elements
+     */
+    el = {};
+    /**
+     * Initializes and closes the tray
+     */
+    constructor(settings) {
+        super();
+        this.settings = { ...this.settings, ...settings };
+        if (!this.settings.wrapperId) {
+            throw new Error('Wrapper ID is required');
         }
-        else {
-            if (this.el.html) {
-                this.el.html.style.overflow = 'auto';
-            }
-            requestAnimationFrame(() => {
-                this.el.wrapper?.classList.remove('mint-open');
-            });
+        this.attachElements();
+        this.attachEvents();
+        requestAnimationFrame(() => {
             this.closeAllMenus();
-        }
+        });
     }
     /**
-     * Toggles the state of the mobile menu
+     * Adds elements to {@link el | `this.el`}
+     */
+    attachElements() {
+        this.el.wrapper = document.getElementById(this.settings.wrapperId);
+    }
+    /**
+     * Adds events to the dom
      */
-    toggleMobileMenu() {
-        this.setMobileMenu(this.el.mobileButton?.getAttribute('aria-expanded')?.toLowerCase() === 'false');
+    attachEvents() {
+        this.attachEvent(window, 'scroll', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleScroll.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.default, { trailing: false }));
+        const focusables = this.el.wrapper?.querySelectorAll(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.focusable);
+        focusables?.forEach((focusable) => {
+            this.attachEvent(focusable, 'keydown', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleKeypress.bind(this)));
+        });
+        const menuButtons = this.el.wrapper?.querySelectorAll(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.controls());
+        menuButtons?.forEach((menuButton) => {
+            this.attachEvent(menuButton, 'click', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eToggleMenu.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.slow, { trailing: false }));
+        });
     }
     /**
      * Sets the state of the provided button's menu
@@ -261,7 +332,7 @@ class MintHeader {
         });
     }
     /**
-     * Closes all submenus of the n4vbar
+     * Closes all submenus of the menu
      */
     closeAllMenus() {
         let menuButtons = this.el.wrapper?.querySelectorAll(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.subMenuButtons);
@@ -274,7 +345,7 @@ class MintHeader {
      */
     openClosestMenu() {
         let activeButton = document.activeElement, activeMenu = activeButton?.nextElementSibling, showing = activeButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true';
-        if (activeButton?.getAttribute('aria-controls') === 'mint-wrapper') {
+        if (activeButton?.getAttribute('aria-controls') === this.settings.wrapperId) {
             activeMenu = this.el.wrapper;
         }
         if (activeButton?.getAttribute('aria-controls') && activeMenu && !showing) {
@@ -287,7 +358,7 @@ class MintHeader {
      * Closes the menu closest to the document's focus
      */
     closeClosestMenu() {
-        let activeElement = document.activeElement, activeMenu = activeElement?.closest(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.subMenu), activeButton = activeMenu?.previousElementSibling ? activeMenu.previousElementSibling : this.el.mobileButton;
+        let activeElement = document.activeElement, activeMenu = activeElement?.closest(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.subMenu), activeButton = activeMenu?.previousElementSibling;
         if (activeElement?.getAttribute('aria-controls') && activeElement?.getAttribute('aria-expanded')?.toLowerCase() === 'true') {
             activeButton = activeElement;
         }
@@ -307,37 +378,6 @@ class MintHeader {
             this.openClosestMenu();
         }
     }
-    /**
-     * Closes the mobile menu when the window resizes
-     */
-    eHandleResize() {
-        const isMobile = _util__WEBPACK_IMPORTED_MODULE_1__.MintWindow.width() <= _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.break.sm;
-        let closeMenu = true;
-        if (this.el.header?.classList.contains('mint-tray')) {
-            closeMenu = false;
-        }
-        else if (!this.el.header?.classList.contains('mint-expand')) {
-            closeMenu = false;
-        }
-        if (!isMobile && closeMenu) {
-            this.setMobileMenu(false);
-        }
-        const isOpen = this.el.mobileButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true';
-        let overflow = 'auto';
-        if (isOpen) {
-            if (this.settings.tray) {
-                if (isMobile) {
-                    overflow = 'hidden';
-                }
-            }
-            else {
-                overflow = 'hidden';
-            }
-        }
-        if (this.el.html) {
-            this.el.html.style.overflow = overflow;
-        }
-    }
     /**
      * Closes all submenus when the page is scrolled
      */
@@ -345,19 +385,7 @@ class MintHeader {
         this.closeAllMenus();
     }
     /**
-     * Sends the focus to the menu button after tabbing past the last menu item
-     * @param e - Keyboard event
-     */
-    eWrapTab(e) {
-        if (e.key.toLowerCase() === 'tab' && !e.shiftKey) {
-            this.el.mobileButton?.focus();
-            if (document.activeElement === this.el.mobileButton) {
-                e.preventDefault();
-            }
-        }
-    }
-    /**
-     * Handles keypresses on n4vbar buttons
+     * Handles keypresses on menu buttons
      * @param e - Keyboard event
      */
     eHandleButtonKeypress(e) {
@@ -367,10 +395,6 @@ class MintHeader {
                 if (subMenu?.classList.contains('mint-open')) {
                     this.setMenu(subMenu);
                 }
-                else {
-                    this.setMobileMenu();
-                    this.el.menuButton?.focus();
-                }
                 break;
             case 'arrowleft':
                 this.closeClosestMenu();
@@ -385,7 +409,7 @@ class MintHeader {
         }
     }
     /**
-     * Handles keypresses on n4vbar links
+     * Handles keypresses on menu links
      * @param e - Keyboard event
      */
     eHandleLinkKeypress(e) {
@@ -405,7 +429,7 @@ class MintHeader {
         }
     }
     /**
-     * Handles keypresses on the n4vbar
+     * Handles keypresses on the menu
      * @param e - Keyboard event
      */
     eHandleKeypress(e) {
@@ -422,18 +446,6 @@ class MintHeader {
                 break;
         }
     }
-    /**
-     * Toggles the mobile menu
-     */
-    eToggleMobileMenu() {
-        this.toggleMobileMenu();
-    }
-    /**
-     * Closes the mobile menu
-     */
-    eCloseMobileMenu() {
-        this.setMobileMenu(false);
-    }
     /**
      * Toggles the clicked submenu
      * @param e - Mouse event
@@ -443,41 +455,232 @@ class MintHeader {
         this.closeSiblingMenus(target);
         this.toggleMenu(target);
     }
-    /**
-     * Runs after the mobile menu transitions
-     */
-    eTransitionEnd() {
-        if (this.el.wrapper?.classList.contains('mint-open') === false) {
-            this.el.wrapper.style.display = 'none';
-        }
-    }
-    ;
 }
 ;
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MintHeader);
 
 
 /***/ }),
 
-/***/ "./src/ts/imports/components/index.ts":
+/***/ "./src/ts/imports/components/panel.ts":
 /*!********************************************!*\
-  !*** ./src/ts/imports/components/index.ts ***!
+  !*** ./src/ts/imports/components/panel.ts ***!
   \********************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   MintGrid: () => (/* reexport safe */ _grid__WEBPACK_IMPORTED_MODULE_0__.MintGrid),
-/* harmony export */   MintHeader: () => (/* reexport safe */ _header__WEBPACK_IMPORTED_MODULE_1__.MintHeader)
+/* harmony export */   MintPanel: () => (/* binding */ MintPanel)
 /* harmony export */ });
-/* harmony import */ var _grid__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./grid */ "./src/ts/imports/components/grid.ts");
-/* harmony import */ var _header__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./header */ "./src/ts/imports/components/header.ts");
+/* harmony import */ var _enums_side__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../enums/side */ "./src/ts/imports/enums/side.ts");
+/* harmony import */ var _abstract__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../abstract */ "./src/ts/imports/abstract/index.ts");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../util */ "./src/ts/imports/util/index.ts");
 /**
- * Forward all exports from the components directory
+ * Imports
  */
 
 
 
+/**
+ * Panel (sidebar) functionality
+ * @public
+ */
+class MintPanel extends _abstract__WEBPACK_IMPORTED_MODULE_1__.MintAttachesEvents {
+    /**
+     * Panel settings
+     */
+    settings = {
+        title: 'panel',
+        from: _enums_side__WEBPACK_IMPORTED_MODULE_0__.EMintSide.Top,
+        fixed: true
+    };
+    /**
+     * Frequently-referenced elements
+     */
+    el = {};
+    /**
+     * Initializes and closes the panel
+     */
+    constructor(settings) {
+        super();
+        this.settings = { ...this.settings, ...settings };
+        if (!this.settings.id || !this.settings.wrapperId) {
+            throw new Error('Panel ID and wrapper ID are required');
+        }
+        this.attachElements();
+        this.attachEvents();
+        this.addClasses();
+        requestAnimationFrame(() => {
+            this.setPanel();
+        });
+    }
+    /**
+     * Adds elements to {@link el | `this.el`}
+     */
+    attachElements() {
+        this.el.html = document.querySelector('html');
+        this.el.main = document.querySelector('main');
+        this.el.panel = document.getElementById(this.settings.id);
+        this.el.wrapper = document.getElementById(this.settings.wrapperId);
+        this.el.toggleButton = this.el.panel?.querySelector(_util__WEBPACK_IMPORTED_MODULE_2__.MintSelectors.controls(this.settings.wrapperId)) || null;
+    }
+    /**
+     * Adds events to the dom
+     */
+    attachEvents() {
+        this.attachEvent(window, 'resize', _util__WEBPACK_IMPORTED_MODULE_2__.MintEvent.throttleEvent(this.eHandleResize.bind(this), _util__WEBPACK_IMPORTED_MODULE_2__.MintSettings.delay.default));
+        this.attachEvent(this.el.main, 'click', _util__WEBPACK_IMPORTED_MODULE_2__.MintEvent.throttleEvent(this.eClose.bind(this), _util__WEBPACK_IMPORTED_MODULE_2__.MintSettings.delay.default, { trailing: false }));
+        const focusables = _util__WEBPACK_IMPORTED_MODULE_2__.MintSelectors.getFocusables(this.el.panel);
+        focusables?.forEach(focusable => {
+            this.attachEvent(focusable, 'keydown', _util__WEBPACK_IMPORTED_MODULE_2__.MintEvent.throttleEvent(this.eWrapTab.bind(this)));
+        });
+        this.attachEvent(this.el.toggleButton, 'click', _util__WEBPACK_IMPORTED_MODULE_2__.MintEvent.throttleEvent(this.eToggle.bind(this), _util__WEBPACK_IMPORTED_MODULE_2__.MintSettings.delay.slow, { trailing: false }));
+        this.attachEvent(this.el.wrapper, 'transitionend', this.eTransitionEnd.bind(this));
+    }
+    /**
+     * Adds classes that inform the styles based on settings
+     */
+    addClasses() {
+        this.el.panel?.classList.add('mint-panel');
+        this.el.wrapper?.classList.add('mint-panel-wrapper');
+        this.el.toggleButton?.classList.add('mint-panel-toggle');
+        if (this.settings.from) {
+            this.el.panel?.classList.remove('mint-top', 'mint-right', 'mint-bottom', 'mint-left');
+            this.el.panel?.classList.add(`mint-${_enums_side__WEBPACK_IMPORTED_MODULE_0__.EMintSide[this.settings.from].toLowerCase()}`);
+        }
+        if (this.settings.tray) {
+            this.el.panel?.classList.add('mint-tray');
+        }
+    }
+    /**
+     * Sets the state of the panel
+     * @param open - `true` to open the panel or `false` to close it
+     */
+    setPanel(open = false) {
+        let ariaExpanded = open ? 'true' : 'false', ariaLabel = open ? `close ${this.settings.title}` : `open ${this.settings.title}`;
+        this.el.toggleButton?.setAttribute('aria-expanded', ariaExpanded);
+        setTimeout(() => {
+            this.el.toggleButton?.setAttribute('aria-label', ariaLabel);
+        }, _util__WEBPACK_IMPORTED_MODULE_2__.MintSettings.delay.fast);
+        if (open) {
+            this.closeOtherPanels();
+            if (this.settings.fixed !== true) {
+                window.scroll({
+                    top: 0,
+                    left: 0,
+                    behavior: 'smooth'
+                });
+            }
+            setTimeout(() => {
+                if (this.el.html) {
+                    let isMobile = _util__WEBPACK_IMPORTED_MODULE_2__.MintWindow.width() <= _util__WEBPACK_IMPORTED_MODULE_2__.MintSettings.break.sm, overflow = 'auto';
+                    if (this.settings.tray) {
+                        if (isMobile) {
+                            overflow = 'hidden';
+                        }
+                    }
+                    else {
+                        overflow = 'hidden';
+                    }
+                    console.log('Overflow', overflow, isMobile, this.settings.tray);
+                    this.el.html.style.overflow = overflow;
+                }
+            }, this.settings.from === _enums_side__WEBPACK_IMPORTED_MODULE_0__.EMintSide.Left ? _util__WEBPACK_IMPORTED_MODULE_2__.MintSettings.delay.default : _util__WEBPACK_IMPORTED_MODULE_2__.MintSettings.delay.instant);
+            if (this.el.wrapper) {
+                this.el.wrapper.style.display = 'flex';
+            }
+            requestAnimationFrame(() => {
+                this.el.wrapper?.classList.add('mint-open');
+            });
+        }
+        else {
+            if (this.el.html) {
+                this.el.html.style.overflow = 'auto';
+            }
+            requestAnimationFrame(() => {
+                this.el.wrapper?.classList.remove('mint-open');
+            });
+        }
+    }
+    /**
+     * Toggles the state of the panel
+     */
+    togglePanel() {
+        this.setPanel(this.el.toggleButton?.getAttribute('aria-expanded')?.toLowerCase() === 'false');
+    }
+    /**
+     * Closes other panels
+     */
+    closeOtherPanels() {
+        const openPanelSelector = `.mint-panel-toggle[aria-expanded="true"]:not([aria-controls="${this.settings.wrapperId}"])`;
+        const toggleBtn = document.querySelector(openPanelSelector);
+        toggleBtn?.click();
+    }
+    /**
+     * Closes the panel when the window resizes
+     */
+    eHandleResize() {
+        const isMobile = _util__WEBPACK_IMPORTED_MODULE_2__.MintWindow.width() <= _util__WEBPACK_IMPORTED_MODULE_2__.MintSettings.break.sm;
+        let closeMenu = true;
+        if (this.el.panel?.classList.contains('mint-tray')) {
+            closeMenu = false;
+        }
+        else if (!this.el.panel?.classList.contains('mint-expand')) {
+            closeMenu = false;
+        }
+        if (!isMobile && closeMenu) {
+            this.setPanel(false);
+        }
+        const isOpen = this.el.toggleButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true';
+        let overflow = 'auto';
+        if (isOpen) {
+            if (this.settings.tray) {
+                if (isMobile) {
+                    overflow = 'hidden';
+                }
+            }
+            else {
+                overflow = 'hidden';
+            }
+        }
+        if (this.el.html) {
+            this.el.html.style.overflow = overflow;
+        }
+    }
+    /**
+     * Sends the focus to the toggle button after tabbing past the last focusable element
+     * @param e - Keyboard event
+     */
+    eWrapTab(e) {
+        const focusables = _util__WEBPACK_IMPORTED_MODULE_2__.MintSelectors.getFocusables(this.el.panel), lastFocusable = focusables?.[focusables?.length - 1], wrapTab = focusables?.length > 1 && document.activeElement === lastFocusable, isTab = e.key.toLowerCase() === 'tab' && !e.shiftKey;
+        if (isTab && wrapTab) {
+            this.el.toggleButton?.focus();
+            if (document.activeElement === this.el.toggleButton) {
+                e.preventDefault();
+            }
+        }
+    }
+    /**
+     * Toggles the panel
+     */
+    eToggle() {
+        this.togglePanel();
+    }
+    /**
+     * Closes the panel
+     */
+    eClose() {
+        this.setPanel(false);
+    }
+    /**
+     * Runs after the panel transitions
+     */
+    eTransitionEnd() {
+        if (this.el.wrapper?.classList.contains('mint-open') === false) {
+            this.el.wrapper.style.display = 'none';
+        }
+    }
+}
+
 
 /***/ }),
 
@@ -533,30 +736,34 @@ var EMintSide;
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   EMintSide: () => (/* reexport safe */ _enums__WEBPACK_IMPORTED_MODULE_1__.EMintSide),
-/* harmony export */   MintAsync: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_3__.MintAsync),
-/* harmony export */   MintDisplay: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_3__.MintDisplay),
-/* harmony export */   MintEvent: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_3__.MintEvent),
-/* harmony export */   MintGrid: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.MintGrid),
-/* harmony export */   MintHeader: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.MintHeader),
-/* harmony export */   MintIcon: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_3__.MintIcon),
-/* harmony export */   MintItem: () => (/* reexport safe */ _models__WEBPACK_IMPORTED_MODULE_2__.MintItem),
-/* harmony export */   MintList: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_3__.MintList),
-/* harmony export */   MintMath: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_3__.MintMath),
-/* harmony export */   MintObject: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_3__.MintObject),
-/* harmony export */   MintScroll: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_3__.MintScroll),
-/* harmony export */   MintSelectors: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_3__.MintSelectors),
-/* harmony export */   MintSettings: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_3__.MintSettings),
-/* harmony export */   MintText: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_3__.MintText),
-/* harmony export */   MintWindow: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_3__.MintWindow),
-/* harmony export */   mintColor: () => (/* reexport safe */ _models__WEBPACK_IMPORTED_MODULE_2__.mintColor)
+/* harmony export */   EMintSide: () => (/* reexport safe */ _enums__WEBPACK_IMPORTED_MODULE_2__.EMintSide),
+/* harmony export */   MintAsync: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintAsync),
+/* harmony export */   MintAttachesEvents: () => (/* reexport safe */ _abstract__WEBPACK_IMPORTED_MODULE_0__.MintAttachesEvents),
+/* harmony export */   MintDisplay: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintDisplay),
+/* harmony export */   MintEvent: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintEvent),
+/* harmony export */   MintGrid: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_1__.MintGrid),
+/* harmony export */   MintHeader: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_1__.MintHeader),
+/* harmony export */   MintIcon: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintIcon),
+/* harmony export */   MintItem: () => (/* reexport safe */ _models__WEBPACK_IMPORTED_MODULE_3__.MintItem),
+/* harmony export */   MintList: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintList),
+/* harmony export */   MintMath: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintMath),
+/* harmony export */   MintMenu: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_1__.MintMenu),
+/* harmony export */   MintObject: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintObject),
+/* harmony export */   MintPanel: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_1__.MintPanel),
+/* harmony export */   MintScroll: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintScroll),
+/* harmony export */   MintSelectors: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintSelectors),
+/* harmony export */   MintSettings: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintSettings),
+/* harmony export */   MintText: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintText),
+/* harmony export */   MintWindow: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintWindow),
+/* harmony export */   mintColor: () => (/* reexport safe */ _models__WEBPACK_IMPORTED_MODULE_3__.mintColor)
 /* harmony export */ });
-/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components */ "./src/ts/imports/components/index.ts");
-/* harmony import */ var _enums__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./enums */ "./src/ts/imports/enums/index.ts");
-/* harmony import */ var _models__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./models */ "./src/ts/imports/models/index.ts");
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./util */ "./src/ts/imports/util/index.ts");
+/* harmony import */ var _abstract__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./abstract */ "./src/ts/imports/abstract/index.ts");
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components */ "./src/ts/imports/components/index.ts");
+/* harmony import */ var _enums__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./enums */ "./src/ts/imports/enums/index.ts");
+/* harmony import */ var _models__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./models */ "./src/ts/imports/models/index.ts");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./util */ "./src/ts/imports/util/index.ts");
 /**
- * Forward all exports from the imports directory
+ * Forward all imports exports
  */
 
 
@@ -564,6 +771,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 /***/ }),
 
 /***/ "./src/ts/imports/models/color.ts":
@@ -670,6 +878,18 @@ class mintColor {
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (mintColor);
 
 
+/***/ }),
+
+/***/ "./src/ts/imports/models/event.ts":
+/*!****************************************!*\
+  !*** ./src/ts/imports/models/event.ts ***!
+  \****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+
+
+
 /***/ }),
 
 /***/ "./src/ts/imports/models/file.ts":
@@ -692,15 +912,16 @@ __webpack_require__.r(__webpack_exports__);
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   MintItem: () => (/* reexport safe */ _item__WEBPACK_IMPORTED_MODULE_2__.MintItem),
+/* harmony export */   MintItem: () => (/* reexport safe */ _item__WEBPACK_IMPORTED_MODULE_3__.MintItem),
 /* harmony export */   mintColor: () => (/* reexport safe */ _color__WEBPACK_IMPORTED_MODULE_0__.mintColor)
 /* harmony export */ });
 /* harmony import */ var _color__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./color */ "./src/ts/imports/models/color.ts");
-/* harmony import */ var _file__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./file */ "./src/ts/imports/models/file.ts");
-/* harmony import */ var _item__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./item */ "./src/ts/imports/models/item.ts");
-/* harmony import */ var _minify__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./minify */ "./src/ts/imports/models/minify.ts");
-/* harmony import */ var _page__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./page */ "./src/ts/imports/models/page.ts");
-/* harmony import */ var _recaptcha__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./recaptcha */ "./src/ts/imports/models/recaptcha.ts");
+/* harmony import */ var _event__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./event */ "./src/ts/imports/models/event.ts");
+/* harmony import */ var _file__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./file */ "./src/ts/imports/models/file.ts");
+/* harmony import */ var _item__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./item */ "./src/ts/imports/models/item.ts");
+/* harmony import */ var _minify__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./minify */ "./src/ts/imports/models/minify.ts");
+/* harmony import */ var _page__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./page */ "./src/ts/imports/models/page.ts");
+/* harmony import */ var _recaptcha__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./recaptcha */ "./src/ts/imports/models/recaptcha.ts");
 /**
  * Forward all exports from the models directory
  */
@@ -712,6 +933,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 /***/ }),
 
 /***/ "./src/ts/imports/models/item.ts":
@@ -2112,6 +2334,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   EMintSide: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.EMintSide),
 /* harmony export */   MintAsync: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintAsync),
+/* harmony export */   MintAttachesEvents: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintAttachesEvents),
 /* harmony export */   MintDisplay: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintDisplay),
 /* harmony export */   MintEvent: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintEvent),
 /* harmony export */   MintGrid: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintGrid),
@@ -2120,7 +2343,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   MintItem: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintItem),
 /* harmony export */   MintList: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintList),
 /* harmony export */   MintMath: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintMath),
+/* harmony export */   MintMenu: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintMenu),
 /* harmony export */   MintObject: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintObject),
+/* harmony export */   MintPanel: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintPanel),
 /* harmony export */   MintScroll: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintScroll),
 /* harmony export */   MintSelectors: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintSelectors),
 /* harmony export */   MintSettings: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintSettings),
@@ -2143,6 +2368,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var __webpack_exports__EMintSide = __webpack_exports__.EMintSide;
 var __webpack_exports__MintAsync = __webpack_exports__.MintAsync;
+var __webpack_exports__MintAttachesEvents = __webpack_exports__.MintAttachesEvents;
 var __webpack_exports__MintDisplay = __webpack_exports__.MintDisplay;
 var __webpack_exports__MintEvent = __webpack_exports__.MintEvent;
 var __webpack_exports__MintGrid = __webpack_exports__.MintGrid;
@@ -2151,13 +2377,15 @@ var __webpack_exports__MintIcon = __webpack_exports__.MintIcon;
 var __webpack_exports__MintItem = __webpack_exports__.MintItem;
 var __webpack_exports__MintList = __webpack_exports__.MintList;
 var __webpack_exports__MintMath = __webpack_exports__.MintMath;
+var __webpack_exports__MintMenu = __webpack_exports__.MintMenu;
 var __webpack_exports__MintObject = __webpack_exports__.MintObject;
+var __webpack_exports__MintPanel = __webpack_exports__.MintPanel;
 var __webpack_exports__MintScroll = __webpack_exports__.MintScroll;
 var __webpack_exports__MintSelectors = __webpack_exports__.MintSelectors;
 var __webpack_exports__MintSettings = __webpack_exports__.MintSettings;
 var __webpack_exports__MintText = __webpack_exports__.MintText;
 var __webpack_exports__MintWindow = __webpack_exports__.MintWindow;
 var __webpack_exports__mintColor = __webpack_exports__.mintColor;
-export { __webpack_exports__EMintSide as EMintSide, __webpack_exports__MintAsync as MintAsync, __webpack_exports__MintDisplay as MintDisplay, __webpack_exports__MintEvent as MintEvent, __webpack_exports__MintGrid as MintGrid, __webpack_exports__MintHeader as MintHeader, __webpack_exports__MintIcon as MintIcon, __webpack_exports__MintItem as MintItem, __webpack_exports__MintList as MintList, __webpack_exports__MintMath as MintMath, __webpack_exports__MintObject as MintObject, __webpack_exports__MintScroll as MintScroll, __webpack_exports__MintSelectors as MintSelectors, __webpack_exports__MintSettings as MintSettings, __webpack_exports__MintText as MintText, __webpack_exports__MintWindow as MintWindow, __webpack_exports__mintColor as mintColor };
+export { __webpack_exports__EMintSide as EMintSide, __webpack_exports__MintAsync as MintAsync, __webpack_exports__MintAttachesEvents as MintAttachesEvents, __webpack_exports__MintDisplay as MintDisplay, __webpack_exports__MintEvent as MintEvent, __webpack_exports__MintGrid as MintGrid, __webpack_exports__MintHeader as MintHeader, __webpack_exports__MintIcon as MintIcon, __webpack_exports__MintItem as MintItem, __webpack_exports__MintList as MintList, __webpack_exports__MintMath as MintMath, __webpack_exports__MintMenu as MintMenu, __webpack_exports__MintObject as MintObject, __webpack_exports__MintPanel as MintPanel, __webpack_exports__MintScroll as MintScroll, __webpack_exports__MintSelectors as MintSelectors, __webpack_exports__MintSettings as MintSettings, __webpack_exports__MintText as MintText, __webpack_exports__MintWindow as MintWindow, __webpack_exports__mintColor as mintColor };
 
 //# sourceMappingURL=index.js.map