admin-lte 4.1.0 → 4.3.1

package/dist/js/types/color-mode.d.ts

@@ -2,13 +2,19 @@
  * --------------------------------------------
  * @file AdminLTE color-mode.ts
  * @description Color mode (light/dark/auto) switcher for AdminLTE.
- * Persists the choice in localStorage, follows the OS preference in
- * "auto" mode, and keeps [data-bs-theme-value] toggles and
- * [data-lte-theme-icon] indicator icons in sync.
+ * Resolves the theme from, in order: the visitor's stored choice, the theme
+ * the page itself declared in <html data-bs-theme="…">, and finally the OS
+ * preference. Keeps [data-bs-theme-value] toggles and [data-lte-theme-icon]
+ * indicator icons in sync.
  *
  * Ships in the bundle so applications no longer need to copy the demo's
  * inline script. The tiny no-flash snippet in <head> (see _head.astro)
- * remains inline by design — it must run before first paint.
+ * remains inline by design — it must run before first paint. That snippet
+ * flags the values it computes itself with [data-lte-theme-resolved], so a
+ * theme authored in the markup can be told apart from one it resolved.
+ *
+ * Applications with their own theming opt out entirely with
+ * <html data-lte-color-mode="off">.
  * @license MIT
  * --------------------------------------------
  */
@@ -24,8 +30,17 @@ declare class ColorMode {
      */
     getStoredTheme(): Theme | null;
     /**
-     * The user's effective choice: the stored theme, falling back to the OS
-     * preference.
+     * The theme declared in the markup, for applications that render it
+     * server-side from a cookie or a user record. Null when the page declared
+     * none, or when the value is a custom Bootstrap theme ColorMode cannot
+     * resolve — see `isDisabled` for those.
+     */
+    getMarkupTheme(): Theme | null;
+    /**
+     * The user's effective choice: the stored theme, then the theme declared in
+     * the markup, falling back to the OS preference. Storage comes first because
+     * it is the visitor's own click on this device; markup is only the default
+     * the page shipped with.
      */
     getPreferredTheme(): Theme;
     /**
@@ -42,6 +57,9 @@ declare class ColorMode {
      * changes while in "auto" mode.
      */
     _applyTheme(theme: Theme): void;
+    /**
+     * Whether the OS preference is currently dark.
+     */
     _prefersDark(): boolean;
     /**
      * Sync the [data-bs-theme-value] toggles (active state, pressed state,

package/dist/js/types/push-menu.d.ts

@@ -27,9 +27,30 @@ type Config = {
  */
 declare class PushMenu extends BaseComponent {
     static get NAME(): string;
+    /**
+     * Look up the PushMenu already attached to the given element.
+     *
+     * @param element The sidebar element to look up.
+     * @returns The existing instance, or null if the sidebar has none yet.
+     */
     static getInstance(element: Element | null | undefined): PushMenu | null;
+    /**
+     * Look up the PushMenu attached to the given element, creating one when the
+     * element has none. `config` is ignored if an instance already exists.
+     *
+     * @param element The sidebar element.
+     * @param config Overrides merged over the defaults for a new instance.
+     * @returns The existing or newly created instance.
+     */
     static getOrCreateInstance(element: HTMLElement, config?: Partial<Config>): PushMenu;
+    /**
+     * The defaults merged with the overrides this instance was created with.
+     */
     _config: Config;
+    /**
+     * @param element The sidebar element to attach to.
+     * @param config Overrides merged over the defaults.
+     */
     constructor(element: HTMLElement, config?: Partial<Config>);
     /**
      * Check if the sidebar is collapsed.

package/dist/js/types/sidebar-search.d.ts

@@ -0,0 +1,46 @@
+/**
+ * --------------------------------------------
+ * @file AdminLTE sidebar-search.ts
+ * @description Live filter for the sidebar menu.
+ * @license MIT
+ * --------------------------------------------
+ */
+import { BaseComponent } from './base-component';
+/**
+ * A submenu's resting state, captured before the first keystroke so clearing
+ * the field can put the menu back exactly as the user left it. The inline
+ * `display` matters as well as the class: Treeview's slide animation writes
+ * one, and it would otherwise win over `.menu-open > .nav-treeview`.
+ */
+type SubmenuState = {
+    open: boolean;
+    display: string;
+};
+/**
+ * Class Definition
+ * ============================================================================
+ */
+declare class SidebarSearch extends BaseComponent {
+    static get NAME(): string;
+    static getInstance(element: Element | null | undefined): SidebarSearch | null;
+    static getOrCreateInstance(element: HTMLElement): SidebarSearch;
+    _menu: HTMLElement | null;
+    _emptyState: HTMLElement | null;
+    _snapshot: Map<HTMLElement, SubmenuState> | null;
+    constructor(element: HTMLElement);
+    /**
+     * Show only the menu entries matching `term`, expanding whatever has to be
+     * expanded to reveal them. An empty term restores the menu.
+     *
+     * @param term The text to match against nav-link labels, case-insensitively.
+     */
+    search(term: string): void;
+    /**
+     * Drop the filter: every entry becomes visible again and each submenu goes
+     * back to the open/closed state it had before the search started.
+     */
+    clear(): void;
+    dispose(): void;
+    _takeSnapshot(menu: HTMLElement): Map<HTMLElement, SubmenuState>;
+}
+export default SidebarSearch;

package/dist/js/types/util/index.d.ts

@@ -16,6 +16,18 @@
  * cycle's listeners before the callbacks run again. Listeners bound to elements
  * inside <body> don't need the signal — Turbo discards the old <body>, so they
  * are cleaned up automatically.
+ *
+ * Turbo is not the only environment that renders after `DOMContentLoaded`:
+ * client-side frameworks that build the layout themselves (GWT, and other
+ * imperative widget toolkits) have an empty <body> when the initial batch runs,
+ * so the per-page init pass finds no sidebar and no menu. Those consumers call
+ * the exported `initialize()` once the layout is attached — it performs the same
+ * reset-then-replay cycle Turbo gets, without faking Turbo events.
+ *
+ * Unlike Turbo, such frameworks keep the same <body> across a re-init, so
+ * element-level listeners are NOT discarded for them. Callbacks should therefore
+ * pass `getLifecycleSignal()` to every `addEventListener` they make — including
+ * ones on elements — whenever the element can outlive the cycle.
  */
 /**
  * The AbortSignal for the current lifecycle. Pass it as the
@@ -24,6 +36,31 @@
  */
 declare const getLifecycleSignal: () => AbortSignal;
 declare const onDOMContentLoaded: (callback: () => void) => void;
+/**
+ * End the current lifecycle: abort the cycle's signal so listeners registered
+ * with it are removed, then arm a fresh cycle for the next replay.
+ *
+ * Exported for SPA containers that unmount the AdminLTE layout: calling it
+ * drops the window/document listeners the current cycle added without
+ * immediately re-initialising. Internally it is also the first half of
+ * `initialize()` and the `turbo:before-render` handler.
+ */
+declare const teardown: () => void;
+/**
+ * Re-run every plugin's initialisation against the DOM as it stands right now.
+ *
+ * Intended for frameworks that render the layout after `DOMContentLoaded` has
+ * already fired — call it once the sidebar and menu are attached, and PushMenu,
+ * Treeview and ColorMode pick them up as if they had been in the initial HTML.
+ * Delegated click handling never needs this; only the per-page init pass does.
+ *
+ * The previous cycle is torn down first, so calling it repeatedly does not stack
+ * listeners registered with `getLifecycleSignal()`. Calling it before the
+ * initial batch has run (while `document.readyState === 'loading'`) runs that
+ * batch early, against whatever DOM exists at the time — the initial
+ * `DOMContentLoaded` pass below still replays against the complete DOM.
+ */
+declare const initialize: () => void;
 /**
  * Check if an element has a specific data attribute using ES2022 Object.hasOwn()
  */
@@ -39,4 +76,4 @@ declare const safePropertyAccess: (obj: Record<string, unknown>, property: strin
 declare const slideUp: (target: HTMLElement, duration?: number) => void;
 declare const slideDown: (target: HTMLElement, duration?: number) => void;
 declare const slideToggle: (target: HTMLElement, duration?: number) => void;
-export { onDOMContentLoaded, getLifecycleSignal, slideUp, slideDown, slideToggle, hasDataAttribute, getLastElement, safePropertyAccess };
+export { onDOMContentLoaded, getLifecycleSignal, initialize, teardown, slideUp, slideDown, slideToggle, hasDataAttribute, getLastElement, safePropertyAccess };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin-lte",
   "description": "Responsive open source admin dashboard and control panel.",
-  "version": "4.1.0",
+  "version": "4.3.1",
   "type": "module",
   "license": "MIT",
   "author": "Colorlib <https://colorlib.com>",
@@ -99,51 +99,52 @@
     "bootstrap": "^5.3.8"
   },
   "overrides": {
-    "axios": "0.32.0",
+    "axios": "^0.33.0",
+    "shell-quote": "^1.10.0",
     "stylelint-config-twbs-bootstrap": {
       "stylelint": "$stylelint"
     },
     "yaml": "^2.9.0"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.9",
-    "@astrojs/mdx": "^7.0.0",
+    "@astrojs/check": "^0.9.10",
+    "@astrojs/mdx": "^7.0.5",
     "@eslint/js": "^10.0.1",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.62.1",
-    "@typescript-eslint/parser": "^8.62.1",
-    "astro": "^7.0.4",
-    "autoprefixer": "^10.5.2",
+    "@typescript-eslint/eslint-plugin": "^8.66.0",
+    "@typescript-eslint/parser": "^8.66.0",
+    "astro": "^7.1.6",
+    "autoprefixer": "^10.5.4",
     "axe-core": "^4.12.1",
     "bootstrap": "^5.3.8",
     "bundlewatch": "^0.4.2",
     "clean-css-cli": "^5.6.3",
-    "concurrently": "^10.0.3",
+    "concurrently": "^10.0.4",
     "cross-env": "^10.1.0",
-    "eslint": "^10.6.0",
-    "eslint-plugin-astro": "^2.1.1",
-    "eslint-plugin-unicorn": "^69.0.0",
-    "fs-extra": "^11.3.6",
-    "globals": "^17.7.0",
-    "happy-dom": "^20.10.6",
+    "eslint": "^10.8.0",
+    "eslint-plugin-astro": "^3.1.0",
+    "eslint-plugin-unicorn": "^73.0.0",
+    "fs-extra": "^11.4.0",
+    "globals": "^17.9.0",
+    "happy-dom": "^20.11.1",
     "lockfile-lint": "^5.0.0",
     "nodemon": "^3.1.14",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.16",
+    "postcss": "^8.5.25",
     "postcss-cli": "^11.0.1",
-    "prettier": "^3.9.4",
+    "prettier": "^3.9.6",
     "prettier-plugin-astro": "^0.14.1",
     "rimraf": "^6.1.3",
-    "rollup": "^4.62.2",
+    "rollup": "^4.62.4",
     "rtlcss": "^4.3.0",
-    "sass": "^1.101.0",
+    "sass": "^1.102.0",
     "shx": "^0.4.0",
-    "stylelint": "^17.14.0",
+    "stylelint": "^17.14.1",
     "stylelint-config-twbs-bootstrap": "^16.1.0",
-    "terser": "^5.48.0",
+    "terser": "^5.49.2",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.62.1",
-    "vitest": "^4.1.9"
+    "typescript-eslint": "^8.66.0",
+    "vitest": "^4.1.10"
   }
 }

package/src/scss/_app-sidebar.scss

@@ -309,6 +309,12 @@
   white-space: nowrap;
 }
 
+// Sidebar search: the filter field above the menu. It sits outside
+// .sidebar-wrapper so it stays put while the menu scrolls under it.
+.sidebar-search {
+  padding: $lte-sidebar-padding-y ($lte-sidebar-padding-x * 2);
+}
+
 // Logo style
 .logo-xs,
 .logo-xl {
@@ -356,6 +362,12 @@
     display: none;
   }
 
+  // A text field can't render usefully in the mini rail; it returns on hover
+  // together with the labels it filters.
+  .app-sidebar:not(:hover) .sidebar-search {
+    display: none;
+  }
+
   .sidebar-menu {
     .nav-link {
       width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;

package/src/scss/_ribbon.scss

@@ -0,0 +1,75 @@
+//
+// Component: Ribbon
+//
+// A diagonal banner pinned to the top corner of a positioned parent. `.card` is
+// already `position: relative`; anything else needs `.position-relative`.
+//
+// The wrapper is a square that clips the band. The band is NOT centred on that
+// square — a corner ribbon has to hug the corner, and the square's centre is
+// the point furthest from it, which would leave the corner bare. Instead the
+// band's centre sits on the corner's bisector at ~46% of the square's side,
+// which is the proportion v3 used and the one that leaves room for the label.
+// rtlcss mirrors the offsets and the rotation, so no direction-specific rules
+// are needed here.
+//
+
+.ribbon-wrapper {
+  // Width is the chord across the corner at the band's inner edge, so the band
+  // reaches both edges of the square and its ends are cut flush. Derived here
+  // rather than with calc() so a theme only ever overrides the size.
+  --#{$lte-prefix}ribbon-size: #{$lte-ribbon-size};
+  --#{$lte-prefix}ribbon-width: #{$lte-ribbon-size * 1.3};
+  --#{$lte-prefix}ribbon-font-size: #{$lte-ribbon-font-size};
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  width: var(--#{$lte-prefix}ribbon-size);
+  height: var(--#{$lte-prefix}ribbon-size);
+  overflow: hidden;
+  // Inheriting the parent's corner radius makes the clip follow a rounded
+  // card instead of cutting a square out of it.
+  @include border-top-end-radius(inherit);
+
+  &.ribbon-lg {
+    --#{$lte-prefix}ribbon-size: #{$lte-ribbon-size-lg};
+    --#{$lte-prefix}ribbon-width: #{$lte-ribbon-size-lg * 1.3};
+    --#{$lte-prefix}ribbon-font-size: #{$lte-ribbon-font-size-lg};
+  }
+
+  &.ribbon-xl {
+    --#{$lte-prefix}ribbon-size: #{$lte-ribbon-size-xl};
+    --#{$lte-prefix}ribbon-width: #{$lte-ribbon-size-xl * 1.3};
+    --#{$lte-prefix}ribbon-font-size: #{$lte-ribbon-font-size-xl};
+  }
+
+  .ribbon {
+    position: absolute;
+    // 32.5% / 67.5% puts the band's centre on the corner bisector, close enough
+    // to the corner to cover it; 50%/50% would park it at the far diagonal.
+    top: 32.5%;
+    left: 67.5%;
+    width: var(--#{$lte-prefix}ribbon-width);
+    padding: $lte-ribbon-padding;
+    overflow: hidden;
+    font-size: var(--#{$lte-prefix}ribbon-font-size);
+    font-weight: $lte-ribbon-font-weight;
+    line-height: 1.2;
+    color: var(--#{$prefix}emphasis-color);
+    text-align: center;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
+    background-color: var(--#{$prefix}secondary-bg);
+    box-shadow: $lte-ribbon-shadow;
+    transform: translate(-50%, -50%) rotate(45deg);
+
+    // Ribbons carry a `.text-bg-*` utility for colour, so the link only needs
+    // to inherit whatever contrast colour that utility picked.
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+}

package/src/scss/_variables.scss

@@ -118,6 +118,34 @@ $lte-progress-bar-border-radius: 1px !default;
 // --------------------------------------------------------
 $lte-callout-link-font-weight: $alert-link-font-weight !default;
 
+// RIBBONS
+// --------------------------------------------------------
+// The size is the side of the square that clips the band; the band's own width
+// is derived from it, so these are the only three values a theme has to change.
+$lte-ribbon-size: 70px !default;
+$lte-ribbon-size-lg: 110px !default;
+$lte-ribbon-size-xl: 145px !default;
+$lte-ribbon-font-size: .8rem !default;
+$lte-ribbon-font-size-lg: 1rem !default;
+$lte-ribbon-font-size-xl: 1.25rem !default;
+$lte-ribbon-padding: .375rem 0 !default;
+$lte-ribbon-font-weight: $font-weight-normal !default;
+$lte-ribbon-shadow: 0 0 3px rgba(var(--#{$prefix}body-color-rgb), .3) !default;
+
+// WIDGETS
+// --------------------------------------------------------
+$lte-user-block-avatar-size: 2.5rem !default;
+$lte-user-block-avatar-size-sm: 1.75rem !default;
+$lte-user-block-username-font-size: 1rem !default;
+$lte-user-block-username-font-weight: $font-weight-semibold !default;
+$lte-user-block-description-font-size: .8125rem !default;
+// Kept in rem so the avatar's overhang past the header — half its own height —
+// stays computable in Sass rather than needing calc() at runtime.
+$lte-widget-user-header-padding: 1rem !default;
+$lte-widget-user-header-height: 8.4375rem !default;
+$lte-widget-user-image-size: 5.625rem !default;
+$lte-widget-user-2-image-size: 4.0625rem !default;
+
 // DIRECT CHAT
 // --------------------------------------------------------
 $lte-direct-chat-default-msg-bg: var(--#{$prefix}secondary-bg) !default;

package/src/scss/_widgets.scss

@@ -0,0 +1,192 @@
+//
+// Component: Widgets
+//
+// Social and post widgets: the profile cards and activity-feed blocks that v3
+// shipped. The class names are kept from v3 so migrating markup keeps working,
+// but the implementations are grid/flex rather than the original floats, and
+// colour comes from Bootstrap utilities (`.text-bg-*`, `.rounded-circle`,
+// `.shadow`) instead of AdminLTE-specific ones.
+//
+
+// A user's avatar, name and a line of meta, laid out from flat markup: the
+// avatar spans both text rows, so no wrapper element is needed around them.
+.user-block {
+  --#{$lte-prefix}user-block-avatar-size: #{$lte-user-block-avatar-size};
+
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: .75rem;
+  align-items: center;
+
+  > img {
+    grid-row: 1 / span 2;
+    align-self: center;
+    width: var(--#{$lte-prefix}user-block-avatar-size);
+    height: var(--#{$lte-prefix}user-block-avatar-size);
+    object-fit: cover;
+  }
+
+  .username,
+  .description,
+  .comment {
+    grid-column: 2;
+  }
+
+  .username {
+    align-self: end;
+    font-size: $lte-user-block-username-font-size;
+    font-weight: $lte-user-block-username-font-weight;
+
+    a {
+      color: var(--#{$prefix}emphasis-color);
+      text-decoration: none;
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .description {
+    align-self: start;
+    font-size: $lte-user-block-description-font-size;
+    color: var(--#{$prefix}secondary-color);
+  }
+
+  .comment {
+    margin-top: .5rem;
+  }
+
+  // In a card header a user block stands in for .card-title, so it floats the
+  // same way — otherwise the grid box claims the full line and the floated
+  // .card-tools drop below it.
+  .card-header > & {
+    float: left;
+  }
+
+  &.user-block-sm {
+    --#{$lte-prefix}user-block-avatar-size: #{$lte-user-block-avatar-size-sm};
+
+    .username {
+      font-size: $lte-user-block-description-font-size;
+    }
+
+    .description {
+      font-size: .75rem;
+    }
+  }
+}
+
+// One entry in an activity feed. Dividers sit between entries only, so the last
+// post doesn't add trailing space inside its card.
+.post {
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--#{$prefix}border-color);
+
+  &:last-of-type {
+    padding-bottom: 0;
+    margin-bottom: 0;
+    border-bottom: 0;
+  }
+
+  .user-block {
+    margin-bottom: .75rem;
+  }
+}
+
+// A labelled figure, typically repeated across a card footer's grid columns.
+.description-block {
+  display: block;
+  margin: .625rem 0;
+  text-align: center;
+
+  .description-header {
+    padding: 0;
+    margin: 0;
+    font-size: 1.0625rem;
+    font-weight: $font-weight-bold;
+  }
+
+  .description-text {
+    font-size: $lte-user-block-description-font-size;
+    color: var(--#{$prefix}secondary-color);
+    text-transform: uppercase;
+  }
+}
+
+// Profile card with a banner header and an avatar straddling the seam between
+// the header and the footer.
+.widget-user {
+  .widget-user-header {
+    height: $lte-widget-user-header-height;
+    padding: $lte-widget-user-header-padding;
+    text-align: center;
+    background-position: center;
+    background-size: cover;
+    @include border-top-radius(inherit);
+  }
+
+  .widget-user-username {
+    margin-top: 0;
+    margin-bottom: .3125rem;
+    font-size: 1.5625rem;
+    font-weight: $font-weight-light;
+  }
+
+  .widget-user-desc {
+    margin-top: 0;
+    font-size: 1rem;
+  }
+
+  .widget-user-image {
+    position: absolute;
+    top: $lte-widget-user-header-height - ($lte-widget-user-image-size * .5);
+    right: 0;
+    left: 0;
+    width: $lte-widget-user-image-size;
+    margin-inline: auto;
+
+    > img {
+      width: 100%;
+      height: auto;
+      border: 3px solid var(--#{$prefix}body-bg);
+    }
+  }
+
+  // Clear the half of the avatar that overhangs the header.
+  > .card-footer {
+    padding-top: ($lte-widget-user-image-size * .5) + .75rem;
+  }
+}
+
+// Same idea with the avatar inline in the header — shorter, and it survives
+// long names better because the text column can wrap.
+.widget-user-2 {
+  .widget-user-header {
+    display: flex;
+    column-gap: 1rem;
+    align-items: center;
+    padding: $lte-widget-user-header-padding;
+    @include border-top-radius(inherit);
+  }
+
+  .widget-user-image > img {
+    width: $lte-widget-user-2-image-size;
+    height: $lte-widget-user-2-image-size;
+    object-fit: cover;
+  }
+
+  .widget-user-username {
+    margin-top: 0;
+    margin-bottom: .3125rem;
+    font-size: 1.5625rem;
+    font-weight: $font-weight-light;
+  }
+
+  .widget-user-desc {
+    margin-top: 0;
+    font-size: 1rem;
+  }
+}

package/src/scss/adminlte-docs.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.0.4 — documentation styles
+ *   AdminLTE v4.3.1 — documentation styles
  *   Styles for the documentation and FAQ pages only (body.docs-page /
  *   body.faq-page). Applications never need this file; it is loaded by the
  *   docs pages in addition to adminlte.css.

package/src/scss/adminlte-select2.scss

@@ -0,0 +1,31 @@
+/*!
+ *   AdminLTE v4.2.0 — Select2 compatibility theme
+ *   Styling only. AdminLTE bundles neither Select2 nor jQuery; this optional
+ *   sheet makes a Select2 you load yourself match Bootstrap 5.3 form controls,
+ *   including `data-bs-theme` dark mode. Load it AFTER select2.css.
+ *   New code should prefer Tom Select — see docs/integrations.html.
+ *
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <https://adminlte.io>
+ *   License: Open source - MIT <https://opensource.org/licenses/MIT>
+ */
+
+// Bootstrap Configuration
+// ---------------------------------------------------
+@import "bootstrap/scss/functions";
+@import "bootstrap-overrides";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+
+// AdminLTE Configuration
+// ---------------------------------------------------
+// `mixins` is deliberately not imported: it emits AdminLTE's @keyframes, and
+// this sheet only uses Bootstrap's own mixins.
+@import "variables";
+@import "variables-dark";
+
+// Select2 compatibility styles
+// ---------------------------------------------------
+@import "compat/select2";

package/src/scss/adminlte.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.1.0
+ *   AdminLTE v4.3.1
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>