admin-lte 4.0.0-alpha2 → 4.0.0-beta1

package/dist/js/adminlte.js

@@ -1,6 +1,6 @@
 /*!
- * AdminLTE v4.0.0-alpha2 (https://adminlte.io)
- * Copyright 2014-2023 Colorlib <https://colorlib.com>
+ * AdminLTE v4.0.0-beta1 (https://adminlte.io)
+ * Copyright 2014-2024 Colorlib <https://colorlib.com>
  * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
  */
 (function (global, factory) {
@@ -9,12 +9,21 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.adminlte = {}));
 })(this, (function (exports) { 'use strict';
 
-    const domReady = (callBack) => {
+    const domContentLoadedCallbacks = [];
+    const onDOMContentLoaded = (callback) => {
         if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', callBack);
+            // add listener on the first call when the document is in loading state
+            if (!domContentLoadedCallbacks.length) {
+                document.addEventListener('DOMContentLoaded', () => {
+                    for (const callback of domContentLoadedCallbacks) {
+                        callback();
+                    }
+                });
+            }
+            domContentLoadedCallbacks.push(callback);
         }
         else {
-            callBack();
+            callback();
         }
     };
     /* SLIDE UP */
@@ -78,8 +87,9 @@
 
     /**
      * --------------------------------------------
-     * AdminLTE layout.ts
-     * License MIT
+     * @file AdminLTE layout.ts
+     * @description Layout for AdminLTE.
+     * @license MIT
      * --------------------------------------------
      */
     /**
@@ -108,7 +118,7 @@
             });
         }
     }
-    domReady(() => {
+    onDOMContentLoaded(() => {
         const data = new Layout(document.body);
         data.holdTransition();
         setTimeout(() => {
@@ -118,8 +128,9 @@
 
     /**
      * --------------------------------------------
-     * AdminLTE push-menu.ts
-     * License MIT
+     * @file AdminLTE push-menu.ts
+     * @description Push menu for AdminLTE.
+     * @license MIT
      * --------------------------------------------
      */
     /**
@@ -127,19 +138,17 @@
      * Constants
      * ------------------------------------------------------------------------
      */
-    const DATA_KEY$3 = 'lte.push-menu';
-    const EVENT_KEY$3 = `.${DATA_KEY$3}`;
-    const EVENT_OPEN = `open${EVENT_KEY$3}`;
-    const EVENT_COLLAPSE = `collapse${EVENT_KEY$3}`;
+    const DATA_KEY$4 = 'lte.push-menu';
+    const EVENT_KEY$4 = `.${DATA_KEY$4}`;
+    const EVENT_OPEN = `open${EVENT_KEY$4}`;
+    const EVENT_COLLAPSE = `collapse${EVENT_KEY$4}`;
     const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini';
     const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse';
     const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open';
-    const CLASS_NAME_SIDEBAR_IS_HOVER = 'sidebar-is-hover';
     const CLASS_NAME_SIDEBAR_EXPAND = 'sidebar-expand';
     const CLASS_NAME_SIDEBAR_OVERLAY = 'sidebar-overlay';
     const CLASS_NAME_MENU_OPEN$1 = 'menu-open';
     const SELECTOR_APP_SIDEBAR = '.app-sidebar';
-    const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
     const SELECTOR_SIDEBAR_MENU = '.sidebar-menu';
     const SELECTOR_NAV_ITEM$1 = '.nav-item';
     const SELECTOR_NAV_TREEVIEW = '.nav-treeview';
@@ -185,17 +194,6 @@
             document.body.classList.add(CLASS_NAME_SIDEBAR_COLLAPSE);
             this._element.dispatchEvent(event);
         }
-        sidebarHover() {
-            const selSidebar = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-            if (selSidebar) {
-                selSidebar.addEventListener('mouseover', () => {
-                    document.body.classList.add(CLASS_NAME_SIDEBAR_IS_HOVER);
-                });
-                selSidebar.addEventListener('mouseout', () => {
-                    document.body.classList.remove(CLASS_NAME_SIDEBAR_IS_HOVER);
-                });
-            }
-        }
         addSidebarBreakPoint() {
             var _a, _b, _c;
             const sidebarExpandList = (_b = (_a = document.querySelector(SELECTOR_SIDEBAR_EXPAND)) === null || _a === void 0 ? void 0 : _a.classList) !== null && _b !== void 0 ? _b : [];
@@ -210,7 +208,7 @@
                 if (!document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI)) {
                     this.expand();
                 }
-                if (document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI)) {
+                if (document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI) && document.body.classList.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
                     this.collapse();
                 }
             }
@@ -225,7 +223,6 @@
         }
         init() {
             this.addSidebarBreakPoint();
-            this.sidebarHover();
         }
     }
     /**
@@ -233,7 +230,7 @@
      * Data Api implementation
      * ------------------------------------------------------------------------
      */
-    domReady(() => {
+    onDOMContentLoaded(() => {
         var _a;
         const sidebar = document === null || document === void 0 ? void 0 : document.querySelector(SELECTOR_APP_SIDEBAR);
         if (sidebar) {
@@ -277,8 +274,9 @@
 
     /**
      * --------------------------------------------
-     * AdminLTE treeview.ts
-     * License MIT
+     * @file AdminLTE treeview.ts
+     * @description Treeview plugin for AdminLTE.
+     * @license MIT
      * --------------------------------------------
      */
     /**
@@ -287,17 +285,19 @@
      * ------------------------------------------------------------------------
      */
     // const NAME = 'Treeview'
-    const DATA_KEY$2 = 'lte.treeview';
-    const EVENT_KEY$2 = `.${DATA_KEY$2}`;
-    const EVENT_EXPANDED$2 = `expanded${EVENT_KEY$2}`;
-    const EVENT_COLLAPSED$2 = `collapsed${EVENT_KEY$2}`;
+    const DATA_KEY$3 = 'lte.treeview';
+    const EVENT_KEY$3 = `.${DATA_KEY$3}`;
+    const EVENT_EXPANDED$2 = `expanded${EVENT_KEY$3}`;
+    const EVENT_COLLAPSED$2 = `collapsed${EVENT_KEY$3}`;
     // const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`
     const CLASS_NAME_MENU_OPEN = 'menu-open';
     const SELECTOR_NAV_ITEM = '.nav-item';
+    const SELECTOR_NAV_LINK = '.nav-link';
     const SELECTOR_TREEVIEW_MENU = '.nav-treeview';
     const SELECTOR_DATA_TOGGLE$1 = '[data-lte-toggle="treeview"]';
     const Default$1 = {
-        animationSpeed: 300
+        animationSpeed: 300,
+        accordion: true
     };
     /**
      * Class Definition
@@ -307,21 +307,36 @@
         constructor(element, config) {
             this._element = element;
             this._config = Object.assign(Object.assign({}, Default$1), config);
-            this._childNavItem = this._element.querySelector(SELECTOR_TREEVIEW_MENU);
         }
         open() {
+            var _a, _b;
             const event = new Event(EVENT_EXPANDED$2);
+            if (this._config.accordion) {
+                const openMenuList = (_a = this._element.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`${SELECTOR_NAV_ITEM}.${CLASS_NAME_MENU_OPEN}`);
+                openMenuList === null || openMenuList === void 0 ? void 0 : openMenuList.forEach(openMenu => {
+                    if (openMenu !== this._element.parentElement) {
+                        openMenu.classList.remove(CLASS_NAME_MENU_OPEN);
+                        const childElement = openMenu === null || openMenu === void 0 ? void 0 : openMenu.querySelector(SELECTOR_TREEVIEW_MENU);
+                        if (childElement) {
+                            slideUp(childElement, this._config.animationSpeed);
+                        }
+                    }
+                });
+            }
             this._element.classList.add(CLASS_NAME_MENU_OPEN);
-            if (this._childNavItem) {
-                slideDown(this._childNavItem, this._config.animationSpeed);
+            const childElement = (_b = this._element) === null || _b === void 0 ? void 0 : _b.querySelector(SELECTOR_TREEVIEW_MENU);
+            if (childElement) {
+                slideDown(childElement, this._config.animationSpeed);
             }
             this._element.dispatchEvent(event);
         }
         close() {
+            var _a;
             const event = new Event(EVENT_COLLAPSED$2);
             this._element.classList.remove(CLASS_NAME_MENU_OPEN);
-            if (this._childNavItem) {
-                slideUp(this._childNavItem, this._config.animationSpeed);
+            const childElement = (_a = this._element) === null || _a === void 0 ? void 0 : _a.querySelector(SELECTOR_TREEVIEW_MENU);
+            if (childElement) {
+                slideUp(childElement, this._config.animationSpeed);
             }
             this._element.dispatchEvent(event);
         }
@@ -339,12 +354,16 @@
      * Data Api implementation
      * ------------------------------------------------------------------------
      */
-    domReady(() => {
+    onDOMContentLoaded(() => {
         const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE$1);
         button.forEach(btn => {
             btn.addEventListener('click', event => {
                 const target = event.target;
                 const targetItem = target.closest(SELECTOR_NAV_ITEM);
+                const targetLink = target.closest(SELECTOR_NAV_LINK);
+                if ((target === null || target === void 0 ? void 0 : target.getAttribute('href')) === '#' || (targetLink === null || targetLink === void 0 ? void 0 : targetLink.getAttribute('href')) === '#') {
+                    event.preventDefault();
+                }
                 if (targetItem) {
                     const data = new Treeview(targetItem, Default$1);
                     data.toggle();
@@ -355,18 +374,19 @@
 
     /**
      * --------------------------------------------
-     * AdminLTE direct-chat.ts
-     * License MIT
+     * @file AdminLTE direct-chat.ts
+     * @description Direct chat for AdminLTE.
+     * @license MIT
      * --------------------------------------------
      */
     /**
      * Constants
      * ====================================================
      */
-    const DATA_KEY$1 = 'lte.direct-chat';
-    const EVENT_KEY$1 = `.${DATA_KEY$1}`;
-    const EVENT_EXPANDED$1 = `expanded${EVENT_KEY$1}`;
-    const EVENT_COLLAPSED$1 = `collapsed${EVENT_KEY$1}`;
+    const DATA_KEY$2 = 'lte.direct-chat';
+    const EVENT_KEY$2 = `.${DATA_KEY$2}`;
+    const EVENT_EXPANDED$1 = `expanded${EVENT_KEY$2}`;
+    const EVENT_COLLAPSED$1 = `collapsed${EVENT_KEY$2}`;
     const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="chat-pane"]';
     const SELECTOR_DIRECT_CHAT = '.direct-chat';
     const CLASS_NAME_DIRECT_CHAT_OPEN = 'direct-chat-contacts-open';
@@ -396,7 +416,7 @@
      * Data Api implementation
      * ====================================================
      */
-    domReady(() => {
+    onDOMContentLoaded(() => {
         const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE);
         button.forEach(btn => {
             btn.addEventListener('click', event => {
@@ -413,43 +433,39 @@
 
     /**
      * --------------------------------------------
-     * AdminLTE card-widget.ts
-     * License MIT
+     * @file AdminLTE card-widget.ts
+     * @description Card widget for AdminLTE.
+     * @license MIT
      * --------------------------------------------
      */
     /**
      * Constants
      * ====================================================
      */
-    const DATA_KEY = 'lte.card-widget';
-    const EVENT_KEY = `.${DATA_KEY}`;
-    const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`;
-    const EVENT_EXPANDED = `expanded${EVENT_KEY}`;
-    const EVENT_REMOVE = `remove${EVENT_KEY}`;
-    const EVENT_MAXIMIZED = `maximized${EVENT_KEY}`;
-    const EVENT_MINIMIZED = `minimized${EVENT_KEY}`;
+    const DATA_KEY$1 = 'lte.card-widget';
+    const EVENT_KEY$1 = `.${DATA_KEY$1}`;
+    const EVENT_COLLAPSED = `collapsed${EVENT_KEY$1}`;
+    const EVENT_EXPANDED = `expanded${EVENT_KEY$1}`;
+    const EVENT_REMOVE = `remove${EVENT_KEY$1}`;
+    const EVENT_MAXIMIZED$1 = `maximized${EVENT_KEY$1}`;
+    const EVENT_MINIMIZED$1 = `minimized${EVENT_KEY$1}`;
     const CLASS_NAME_CARD = 'card';
     const CLASS_NAME_COLLAPSED = 'collapsed-card';
     const CLASS_NAME_COLLAPSING = 'collapsing-card';
     const CLASS_NAME_EXPANDING = 'expanding-card';
     const CLASS_NAME_WAS_COLLAPSED = 'was-collapsed';
     const CLASS_NAME_MAXIMIZED = 'maximized-card';
-    const SELECTOR_DATA_REMOVE = '[data-lte-dismiss="card-remove"]';
+    const SELECTOR_DATA_REMOVE = '[data-lte-toggle="card-remove"]';
     const SELECTOR_DATA_COLLAPSE = '[data-lte-toggle="card-collapse"]';
     const SELECTOR_DATA_MAXIMIZE = '[data-lte-toggle="card-maximize"]';
     const SELECTOR_CARD = `.${CLASS_NAME_CARD}`;
-    const SELECTOR_CARD_HEADER = '.card-header';
     const SELECTOR_CARD_BODY = '.card-body';
     const SELECTOR_CARD_FOOTER = '.card-footer';
     const Default = {
         animationSpeed: 500,
         collapseTrigger: SELECTOR_DATA_COLLAPSE,
         removeTrigger: SELECTOR_DATA_REMOVE,
-        maximizeTrigger: SELECTOR_DATA_MAXIMIZE,
-        collapseIcon: 'fa-minus',
-        expandIcon: 'fa-plus',
-        maximizeIcon: 'fa-expand',
-        minimizeIcon: 'fa-compress'
+        maximizeTrigger: SELECTOR_DATA_MAXIMIZE
     };
     class CardWidget {
         constructor(element, config) {
@@ -461,7 +477,7 @@
             this._config = Object.assign(Object.assign({}, Default), config);
         }
         collapse() {
-            var _a, _b, _c;
+            var _a, _b;
             const event = new Event(EVENT_COLLAPSED);
             if (this._parent) {
                 this._parent.classList.add(CLASS_NAME_COLLAPSING);
@@ -478,15 +494,10 @@
                     }
                 }, this._config.animationSpeed);
             }
-            const icon = (_b = this._parent) === null || _b === void 0 ? void 0 : _b.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.collapseIcon}`);
-            if (icon) {
-                icon.classList.remove(this._config.collapseIcon);
-                icon.classList.add(this._config.expandIcon);
-            }
-            (_c = this._element) === null || _c === void 0 ? void 0 : _c.dispatchEvent(event);
+            (_b = this._element) === null || _b === void 0 ? void 0 : _b.dispatchEvent(event);
         }
         expand() {
-            var _a, _b, _c;
+            var _a, _b;
             const event = new Event(EVENT_EXPANDED);
             if (this._parent) {
                 this._parent.classList.add(CLASS_NAME_EXPANDING);
@@ -503,12 +514,7 @@
                     }
                 }, this._config.animationSpeed);
             }
-            const icon = (_b = this._parent) === null || _b === void 0 ? void 0 : _b.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.expandIcon}`);
-            if (icon) {
-                icon.classList.add(this._config.collapseIcon);
-                icon.classList.remove(this._config.expandIcon);
-            }
-            (_c = this._element) === null || _c === void 0 ? void 0 : _c.dispatchEvent(event);
+            (_b = this._element) === null || _b === void 0 ? void 0 : _b.dispatchEvent(event);
         }
         remove() {
             var _a;
@@ -528,15 +534,10 @@
         }
         maximize() {
             var _a;
-            const event = new Event(EVENT_MAXIMIZED);
+            const event = new Event(EVENT_MAXIMIZED$1);
             if (this._parent) {
-                const maxElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.maximizeIcon}`);
-                if (maxElm) {
-                    maxElm.classList.add(this._config.minimizeIcon);
-                    maxElm.classList.remove(this._config.maximizeIcon);
-                }
-                this._parent.style.height = `${this._parent.scrollHeight}px`;
-                this._parent.style.width = `${this._parent.scrollWidth}px`;
+                this._parent.style.height = `${this._parent.offsetHeight}px`;
+                this._parent.style.width = `${this._parent.offsetWidth}px`;
                 this._parent.style.transition = 'all .15s';
                 setTimeout(() => {
                     const htmlTag = document.querySelector('html');
@@ -555,14 +556,11 @@
         }
         minimize() {
             var _a;
-            const event = new Event(EVENT_MINIMIZED);
+            const event = new Event(EVENT_MINIMIZED$1);
             if (this._parent) {
-                const minElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.minimizeIcon}`);
-                if (minElm) {
-                    minElm.classList.add(this._config.maximizeIcon);
-                    minElm.classList.remove(this._config.minimizeIcon);
-                }
-                this._parent.style.cssText = `height: ${this._parent.style.height} !important; width: ${this._parent.style.width} !important; transition: all .15s;`;
+                this._parent.style.height = 'auto';
+                this._parent.style.width = 'auto';
+                this._parent.style.transition = 'all .15s';
                 setTimeout(() => {
                     var _a;
                     const htmlTag = document.querySelector('html');
@@ -593,7 +591,7 @@
      * Data Api implementation
      * ====================================================
      */
-    domReady(() => {
+    onDOMContentLoaded(() => {
         const collapseBtn = document.querySelectorAll(SELECTOR_DATA_COLLAPSE);
         collapseBtn.forEach(btn => {
             btn.addEventListener('click', event => {
@@ -623,8 +621,92 @@
         });
     });
 
+    /**
+     * --------------------------------------------
+     * @file AdminLTE fullscreen.ts
+     * @description Fullscreen plugin for AdminLTE.
+     * @license MIT
+     * --------------------------------------------
+     */
+    /**
+     * Constants
+     * ============================================================================
+     */
+    const DATA_KEY = 'lte.fullscreen';
+    const EVENT_KEY = `.${DATA_KEY}`;
+    const EVENT_MAXIMIZED = `maximized${EVENT_KEY}`;
+    const EVENT_MINIMIZED = `minimized${EVENT_KEY}`;
+    const SELECTOR_FULLSCREEN_TOGGLE = '[data-lte-toggle="fullscreen"]';
+    const SELECTOR_MAXIMIZE_ICON = '[data-lte-icon="maximize"]';
+    const SELECTOR_MINIMIZE_ICON = '[data-lte-icon="minimize"]';
+    /**
+     * Class Definition.
+     * ============================================================================
+     */
+    class FullScreen {
+        constructor(element, config) {
+            this._element = element;
+            this._config = config;
+        }
+        inFullScreen() {
+            const event = new Event(EVENT_MAXIMIZED);
+            const iconMaximize = document.querySelector(SELECTOR_MAXIMIZE_ICON);
+            const iconMinimize = document.querySelector(SELECTOR_MINIMIZE_ICON);
+            void document.documentElement.requestFullscreen();
+            if (iconMaximize) {
+                iconMaximize.style.display = 'none';
+            }
+            if (iconMinimize) {
+                iconMinimize.style.display = 'block';
+            }
+            this._element.dispatchEvent(event);
+        }
+        outFullscreen() {
+            const event = new Event(EVENT_MINIMIZED);
+            const iconMaximize = document.querySelector(SELECTOR_MAXIMIZE_ICON);
+            const iconMinimize = document.querySelector(SELECTOR_MINIMIZE_ICON);
+            void document.exitFullscreen();
+            if (iconMaximize) {
+                iconMaximize.style.display = 'block';
+            }
+            if (iconMinimize) {
+                iconMinimize.style.display = 'none';
+            }
+            this._element.dispatchEvent(event);
+        }
+        toggleFullScreen() {
+            if (document.fullscreenEnabled) {
+                if (document.fullscreenElement) {
+                    this.outFullscreen();
+                }
+                else {
+                    this.inFullScreen();
+                }
+            }
+        }
+    }
+    /**
+     * Data Api implementation
+     * ============================================================================
+     */
+    onDOMContentLoaded(() => {
+        const buttons = document.querySelectorAll(SELECTOR_FULLSCREEN_TOGGLE);
+        buttons.forEach(btn => {
+            btn.addEventListener('click', event => {
+                event.preventDefault();
+                const target = event.target;
+                const button = target.closest(SELECTOR_FULLSCREEN_TOGGLE);
+                if (button) {
+                    const data = new FullScreen(button, undefined);
+                    data.toggleFullScreen();
+                }
+            });
+        });
+    });
+
     exports.CardWidget = CardWidget;
     exports.DirectChat = DirectChat;
+    exports.FullScreen = FullScreen;
     exports.Layout = Layout;
     exports.PushMenu = PushMenu;
     exports.Treeview = Treeview;