admin-lte 4.0.0-alpha1 → 4.0.0-alpha2

package/src/scss/_timeline.scss

@@ -0,0 +1,120 @@
+//
+// Component: Timeline
+//
+
+.timeline {
+  position: relative;
+  padding: 0;
+  margin: 0 0 45px;
+  // The line
+  &::before {
+    @include border-radius($border-radius);
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 31px;
+    width: 4px;
+    margin: 0;
+    content: "";
+    background-color: var(--#{$prefix}border-color);
+  }
+  // Element
+  > div {
+    &::before,
+    &::after {
+      display: table;
+      content: "";
+    }
+
+    position: relative;
+    margin-right: 10px;
+    margin-bottom: 15px;
+    // The content
+    > .timeline-item {
+      @include box-shadow($lte-card-shadow);
+      @include border-radius($border-radius);
+      position: relative;
+      padding: 0;
+      margin-top: 0;
+      margin-right: 15px;
+      margin-left: 60px;
+      color: var(--#{$prefix}body-color);
+      background-color: var(--#{$prefix}body-bg);
+      // The time and header
+      > .time {
+        float: right;
+        padding: 10px;
+        font-size: 12px;
+        color: var(--#{$prefix}secondary-color);
+      }
+      // Header
+      > .timeline-header {
+        padding: 10px;
+        margin: 0;
+        font-size: 16px;
+        line-height: 1.1;
+        color: var(--#{$prefix}secondary-color);
+        border-bottom: 1px solid var(--#{$prefix}border-color);
+        // Link in header
+        > a {
+          font-weight: 600;
+        }
+      }
+      // Item body and footer
+      > .timeline-body,
+      > .timeline-footer {
+        padding: 10px;
+      }
+
+      > .timeline-body {
+        > img {
+          margin: 10px;
+        }
+        > dl,
+        ol,
+        ul {
+          margin: 0;
+        }
+      }
+
+
+    }
+
+    .timeline-icon {
+      position: absolute;
+      top: 0;
+      left: 18px;
+      width: 30px;
+      height: 30px;
+      font-size: 16px;
+      line-height: 30px;
+      text-align: center;
+      background-color: var(--#{$prefix}secondary-bg);
+      border-radius: 50%; // stylelint-disable-line property-disallowed-list
+    }
+  }
+  // Time label
+  > .time-label {
+    > span {
+      @include border-radius(4px);
+      display: inline-block;
+      padding: 5px;
+      font-weight: 600;
+      background-color: var(--#{$prefix}body-bg);
+    }
+  }
+}
+
+.timeline-inverse {
+  > div {
+    > .timeline-item {
+      @include box-shadow(none);
+      background-color: var(--#{$prefix}tertiary-bg);
+      border: 1px solid var(--#{$prefix}border-color);
+
+      > .timeline-header {
+        border-bottom-color: var(--#{$prefix}border-color);
+      }
+    }
+  }
+}

package/src/scss/_variables-dark.scss

@@ -1,9 +1,16 @@
-// Body background (Affects main content background only)
-$lte-main-bg-dark:                 $body-tertiary-bg-dark !default;
-$lte-main-color-dark:              $body-color-dark !default;
+// SIDEBAR SKINS
+// --------------------------------------------------------
 
-// Dark sidebar
-$lte-sidebar-dark-bg-dark:         $dark !default;
-
-// Light sidebar
-$lte-sidebar-light-bg-dark:        $light !default;
+$lte-sidebar-hover-bg-dark:               rgba(255, 255, 255, .1) !default;
+$lte-sidebar-color-dark:                  #c2c7d0 !default;
+$lte-sidebar-hover-color-dark:            $white !default;
+$lte-sidebar-active-color-dark:           $white !default;
+$lte-sidebar-menu-active-bg-dark:         rgba(255, 255, 255, .1) !default;
+$lte-sidebar-menu-active-color-dark:      $white !default;
+$lte-sidebar-submenu-bg-dark:             transparent !default;
+$lte-sidebar-submenu-color-dark:          #c2c7d0 !default;
+$lte-sidebar-submenu-hover-color-dark:    $white !default;
+$lte-sidebar-submenu-hover-bg-dark:       rgba(255, 255, 255, .1) !default;
+$lte-sidebar-submenu-active-color-dark:   $white !default;
+$lte-sidebar-submenu-active-bg-dark:      rgba(255, 255, 255, .1) !default;
+$lte-sidebar-header-color-dark:           tint-color(#c2c7d0, 5%) !default;

package/src/scss/_variables.scss

@@ -1,13 +1,8 @@
 // Custom AdminLTE Variables
 
-// Prefix for :root CSS variables
+// Prefix for :root CSS variables and others.
 $lte-prefix:                      lte- !default;
 
-// LAYOUT
-// --------------------------------------------------------
-
-$lte-font-size-root:              1rem !default;
-
 // TRANSITIONS SETTINGS
 // --------------------------------------------------------
 
@@ -18,13 +13,9 @@ $lte-transition-fn:               ease-in-out !default;
 // Sidebar
 // --------------------------------------------------------
 $lte-sidebar-width:               250px !default;
+$lte-sidebar-breakpoint:          lg !default;
 $lte-sidebar-padding-x:           .5rem !default;
 $lte-sidebar-padding-y:           .5rem !default;
-$lte-sidebar-custom-height:       4rem !default;
-$lte-sidebar-custom-height-lg:    6rem !default;
-$lte-sidebar-custom-height-xl:    8rem !default;
-$lte-sidebar-custom-padding-x:    .85rem !default;
-$lte-sidebar-custom-padding-y:    .5rem !default;
 $lte-sidebar-transition:          min-width $lte-transition-speed $lte-transition-fn,
   max-width $lte-transition-speed $lte-transition-fn,
   margin-left $lte-transition-speed $lte-transition-fn,
@@ -33,37 +24,19 @@ $lte-sidebar-transition:          min-width $lte-transition-speed $lte-transitio
 // SIDEBAR SKINS
 // --------------------------------------------------------
 
-// Sidebar active links
-$lte-sidebar-menu-active-bg:              $primary !default;
-$lte-sidebar-menu-active-color:           $white !default;
-
-// Dark sidebar
-$lte-sidebar-dark-bg:                     #343a40 !default;
-$lte-sidebar-dark-hover-bg:               rgba(255, 255, 255, .1) !default;
-$lte-sidebar-dark-color:                  #c2c7d0 !default;
-$lte-sidebar-dark-hover-color:            $white !default;
-$lte-sidebar-dark-active-color:           $white !default;
-$lte-sidebar-dark-submenu-bg:             transparent !default;
-$lte-sidebar-dark-submenu-color:          $lte-sidebar-dark-color !default;
-$lte-sidebar-dark-submenu-hover-color:    $white !default;
-$lte-sidebar-dark-submenu-hover-bg:       $lte-sidebar-dark-hover-bg !default;
-$lte-sidebar-dark-submenu-active-color:   $lte-sidebar-dark-bg !default;
-$lte-sidebar-dark-submenu-active-bg:      rgba(255, 255, 255, .9) !default;
-$lte-sidebar-dark-header-color:           tint-color(#c2c7d0, 5%) !default;
-
-// Light sidebar
-$lte-sidebar-light-bg:                    $white !default;
-$lte-sidebar-light-hover-bg:              rgba($black, .1) !default;
-$lte-sidebar-light-color:                 $gray-800 !default;
-$lte-sidebar-light-hover-color:           $gray-900 !default;
-$lte-sidebar-light-active-color:          $black !default;
-$lte-sidebar-light-submenu-bg:            transparent !default;
-$lte-sidebar-light-submenu-color:         #777 !default;
-$lte-sidebar-light-submenu-hover-color:   $black !default;
-$lte-sidebar-light-submenu-hover-bg:      $lte-sidebar-light-hover-bg !default;
-$lte-sidebar-light-submenu-active-color:  $lte-sidebar-light-hover-color !default;
-$lte-sidebar-light-submenu-active-bg:     $lte-sidebar-light-submenu-hover-bg !default;
-$lte-sidebar-light-header-color:          shade-color($gray-800, 5%) !default;
+$lte-sidebar-hover-bg:              rgba($black, .1) !default;
+$lte-sidebar-color:                 $gray-800 !default;
+$lte-sidebar-hover-color:           $gray-900 !default;
+$lte-sidebar-active-color:          $black !default;
+$lte-sidebar-menu-active-bg:        rgba($black, .1) !default;
+$lte-sidebar-menu-active-color:     $black !default;
+$lte-sidebar-submenu-bg:            transparent !default;
+$lte-sidebar-submenu-color:         #777 !default;
+$lte-sidebar-submenu-hover-color:   $black !default;
+$lte-sidebar-submenu-hover-bg:      rgba($black, .1) !default;
+$lte-sidebar-submenu-active-color:  $gray-900 !default;
+$lte-sidebar-submenu-active-bg:     rgba($black, .1) !default;
+$lte-sidebar-header-color:          shade-color($gray-800, 5%) !default;
 
 // SIDEBAR MINI
 // --------------------------------------------------------
@@ -71,77 +44,39 @@ $lte-sidebar-mini-width:          ($nav-link-padding-x + $lte-sidebar-padding-x
 $lte-sidebar-nav-icon-width:      $lte-sidebar-mini-width - (($lte-sidebar-padding-x + $nav-link-padding-x) * 2) !default;
 $lte-sidebar-user-image-width:    $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .5) !default;
 
-// SIDEBAR HORIZONTAL
-// --------------------------------------------------------
-$lte-sidebar-horizontal-width:    100% !default;
-$lte-sidebar-horizontal-height:   80px !default;
-
-// CONTROL SIDEBAR
-// --------------------------------------------------------
-$lte-control-sidebar-width:       $lte-sidebar-width !default;
-
 // MAIN HEADER
 // --------------------------------------------------------
-$lte-main-header-bottom-border-width:  $border-width !default;
-$lte-main-header-bottom-border-color:  var(--#{$prefix}border-color) !default;
-$lte-main-header-bottom-border:        $lte-main-header-bottom-border-width solid $lte-main-header-bottom-border-color !default;
-$lte-main-header-link-padding-y:       $navbar-padding-y !default;
-$lte-main-header-height-inner:         ($nav-link-height + ($lte-main-header-link-padding-y * 2)) !default;
-$lte-main-header-height:               add($lte-main-header-height-inner, $lte-main-header-bottom-border-width) !default;
-$lte-nav-link-sm-padding-y:            .35rem !default;
-$lte-nav-link-sm-height:               ($font-size-sm * $line-height-sm + $lte-nav-link-sm-padding-y * 1.785) !default;
-$lte-main-header-height-sm-inner:      ($lte-nav-link-sm-height + ($lte-main-header-link-padding-y * 2)) !default;
-$lte-main-header-height-sm:            add($lte-main-header-height-sm-inner, $lte-main-header-bottom-border-width) !default;
-
-// HEADER SKINS
-// --------------------------------------------------------
-
-$lte-header-light-bg:             var(--#{$prefix}body-bg) !default;
-$lte-header-light-color:          var(--#{$prefix}body-color) !default;
-$lte-header-mobile-light-bg:      $lte-header-light-bg !default;
-$lte-header-mobile-light-color:   $lte-header-light-color !default;
+$lte-app-header-bottom-border-width:  $border-width !default;
+$lte-app-header-bottom-border-color:  var(--#{$prefix}border-color) !default;
+$lte-app-header-bottom-border:        $lte-app-header-bottom-border-width solid $lte-app-header-bottom-border-color !default;
+$lte-app-header-link-padding-y:       $navbar-padding-y !default;
+$lte-app-header-height-inner:         ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
 
 // Content padding
 $lte-content-padding-y:           0 !default;
 $lte-content-padding-x:           .5rem !default;
 
-// IMAGE SIZES
-// --------------------------------------------------------
-$lte-img-size-sm:   1.875rem !default;
-$lte-img-size-md:   3.75rem !default;
-$lte-img-size-lg:   6.25rem !default;
-$lte-img-size-push: .625rem !default;
-
 // MAIN FOOTER
 // --------------------------------------------------------
-$lte-main-footer-padding:           1rem !default;
-$lte-main-footer-padding-sm:        $lte-main-footer-padding * .812 !default;
-$lte-main-footer-border-top-width:  1px !default;
-$lte-main-footer-border-top-color:  var(--#{$prefix}border-color) !default;
-$lte-main-footer-border-top:        $lte-main-footer-border-top-width solid $lte-main-footer-border-top-color !default;
-$lte-main-footer-height-inner:      (($lte-font-size-root * $line-height-base) + ($lte-main-footer-padding * 2)) !default;
-$lte-main-footer-height:            add($lte-main-footer-height-inner, $lte-main-footer-border-top-width) !default;
-$lte-main-footer-height-sm-inner:   (($font-size-sm * $line-height-base) + ($lte-main-footer-padding-sm * 2)) !default;
-$lte-main-footer-height-sm:         add($lte-main-footer-height-sm-inner, $lte-main-footer-border-top-width) !default;
-$lte-main-footer-bg:                var(--#{$prefix}body-bg) !default;
-$lte-main-footer-color:             var(--#{$prefix}secondary-color) !default;
+$lte-app-footer-padding:           1rem !default;
+$lte-app-footer-border-top-width:  1px !default;
+$lte-app-footer-border-top-color:  var(--#{$prefix}border-color) !default;
+$lte-app-footer-border-top:        $lte-app-footer-border-top-width solid $lte-app-footer-border-top-color !default;
+$lte-app-footer-bg:                var(--#{$prefix}body-bg) !default;
+$lte-app-footer-color:             var(--#{$prefix}secondary-color) !default;
 
 // BRAND LINK
 // --------------------------------------------------------
 $lte-brand-link-padding-y:        $navbar-brand-padding-y + $navbar-padding-y !default;
+$lte-brand-link-padding-x:        $lte-sidebar-padding-x !default;
 $lte-brand-link-border-buttom:    1px !default;
 
 
 // Cards
 // --------------------------------------------------------
-$lte-card-dark-border-color: tint-color($gray-900, 10%) !default;
 $lte-card-shadow: 0 0 1px rgba(var(--#{$prefix}body-color-rgb), .125), 0 1px 3px rgba(var(--#{$prefix}body-color-rgb), .2) !default;
 $lte-card-title-font-size: 1.1rem !default;
-$lte-card-title-font-size-sm: 1rem !default;
 $lte-card-title-font-weight: $font-weight-normal !default;
-$lte-card-nav-link-padding-sm-y: .4rem !default;
-$lte-card-nav-link-padding-sm-x: .8rem !default;
-$lte-card-img-size: $lte-img-size-sm !default;
 
 // PROGRESS BARS
 // --------------------------------------------------------
@@ -155,46 +90,6 @@ $lte-direct-chat-default-msg-border-color: var(--#{$prefix}border-color) !defaul
 
 // Z-INDEX
 // --------------------------------------------------------
-$lte-zindex-main-header:          $zindex-fixed + 4 !default;
-$lte-zindex-sidebar:              $zindex-fixed + 8 !default;
-$lte-zindex-main-footer:          $zindex-fixed + 2 !default;
-$lte-zindex-sidebar-horizontal:   $lte-zindex-main-header - 2 !default;
-$lte-zindex-control-sidebar:      $zindex-fixed + 1 !default;
-$lte-zindex-toasts:               $lte-zindex-sidebar + 2 !default;
-$lte-zindex-content-wrapper:      $lte-zindex-sidebar - 2 !default;
-$lte-zindex-preloader:            $lte-zindex-toasts + 2 !default;
-
-// Body background (Affects main content background only)
-$lte-main-bg:                   #f4f6f9 !default;
-$lte-main-color:                  $black !default;
-
-// BUTTON
-// --------------------------------------------------------
-$lte-button-default-background-color: $gray-100 !default;
-$lte-button-default-color: #444 !default;
-$lte-button-default-border-color: #ddd !default;
-
-$lte-button-padding-y-xs: .125rem !default;
-$lte-button-padding-x-xs: .25rem !default;
-$lte-button-line-height-xs: $line-height-sm !default;
-$lte-button-font-size-xs: ($font-size-base * .75) !default;
-$lte-button-border-radius-xs: .15rem !default;
-
-// RIBBON
-// --------------------------------------------------------
-$lte-ribbon-border-size: 3px !default;
-$lte-ribbon-line-height: 100% !default;
-$lte-ribbon-padding: .375rem 0 !default;
-$lte-ribbon-font-size: .8rem !default;
-$lte-ribbon-width: 90px !default;
-$lte-ribbon-wrapper-size: 70px !default;
-$lte-ribbon-top: 10px !default;
-$lte-ribbon-right: -2px !default;
-$lte-ribbon-lg-wrapper-size: 120px !default;
-$lte-ribbon-lg-width: 160px !default;
-$lte-ribbon-lg-top: 26px !default;
-$lte-ribbon-lg-right: 0 !default;
-$lte-ribbon-xl-wrapper-size: 180px !default;
-$lte-ribbon-xl-width: 240px !default;
-$lte-ribbon-xl-top: 47px !default;
-$lte-ribbon-xl-right: 4px !default;
+$lte-zindex-app-header:          $zindex-fixed + 4 !default;
+$lte-zindex-sidebar:             $zindex-fixed + 8 !default;
+$lte-zindex-sidebar-overlay:     $lte-zindex-sidebar - 1 !default;

package/src/scss/adminlte.scss

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

package/src/scss/mixins/_animations.scss

@@ -32,20 +32,24 @@
 
 @keyframes fadeIn {
   from {
+    visibility: hidden;
     opacity: 0;
   }
 
   to {
+    visibility: visible;
     opacity: 1;
   }
 }
 
 @keyframes fadeOut {
   from {
+    visibility: visible;
     opacity: 1;
   }
 
   to {
+    visibility: hidden;
     opacity: 0;
   }
 }

package/src/scss/mixins/_scrollbar.scss

@@ -3,10 +3,10 @@
 //
 
 @mixin scrollbar-color-gray() {
-  scrollbar-color: #a9a9a9 transparent;
+  scrollbar-color: var(--#{$prefix}secondary-bg) transparent;
 
   &::-webkit-scrollbar-thumb {
-    background-color: #a9a9a9;
+    background-color: var(--#{$prefix}secondary-bg);
   }
 
   &::-webkit-scrollbar-track {

package/src/scss/pages/_login_and_register.scss

@@ -20,8 +20,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
-  background-color: var(--#{$prefix}secondary-bg);
+  min-height: 100vh;
 }
 
 .login-box,

package/src/scss/parts/_core.scss

@@ -3,19 +3,11 @@
 //
 
 @import "../root";
-@import "../wrapper";
-@import "../main-header";
-@import "../brand-container";
-@import "../main-sidebar";
-@import "../sidebar";
-@import "../nav-sidebar";
-@import "../sidebar-collapse";
-// @import "../sidebar-horizontal";
-@import "../sidebar-close";
-@import "../content-wrapper";
-@import "../content-header";
-@import "../content";
-@import "../main-footer";
-@import "../layout-fixed";
-@import "../layout-mobile";
+@import "../app-wrapper";
+@import "../app-header";
+@import "../app-sidebar";
+@import "../app-main";
+@import "../app-footer";
 @import "../dropdown";
+@import "../callouts";
+@import "../docs";

package/src/scss/parts/_extra-components.scss

@@ -4,6 +4,5 @@
 
 @import "../small-box";
 @import "../info-box";
+@import "../timeline";
 @import "../direct-chat";
-@import "../products";
-@import "../users-list";

package/src/ts/adminlte.ts

@@ -11,5 +11,3 @@ export {
   DirectChat,
   CardWidget
 }
-
-//

package/src/ts/card-widget.ts

@@ -16,6 +16,14 @@ import {
  * ====================================================
  */
 
+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 CLASS_NAME_CARD = 'card'
 const CLASS_NAME_COLLAPSED = 'collapsed-card'
 const CLASS_NAME_COLLAPSING = 'collapsing-card'
@@ -69,18 +77,18 @@ class CardWidget {
   }
 
   collapse() {
+    const event = new Event(EVENT_COLLAPSED)
+
     if (this._parent) {
       this._parent.classList.add(CLASS_NAME_COLLAPSING)
 
       const elm = this._parent?.querySelectorAll(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
 
-      if (elm !== undefined) {
-        for (const el of elm) {
-          if (el instanceof HTMLElement) {
-            slideUp(el, this._config.animationSpeed)
-          }
+      elm.forEach(el => {
+        if (el instanceof HTMLElement) {
+          slideUp(el, this._config.animationSpeed)
         }
-      }
+      })
 
       setTimeout(() => {
         if (this._parent) {
@@ -96,21 +104,23 @@ class CardWidget {
       icon.classList.remove(this._config.collapseIcon)
       icon.classList.add(this._config.expandIcon)
     }
+
+    this._element?.dispatchEvent(event)
   }
 
   expand() {
+    const event = new Event(EVENT_EXPANDED)
+
     if (this._parent) {
       this._parent.classList.add(CLASS_NAME_EXPANDING)
 
       const elm = this._parent?.querySelectorAll(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
 
-      if (elm !== undefined) {
-        for (const el of elm) {
-          if (el instanceof HTMLElement) {
-            slideDown(el, this._config.animationSpeed)
-          }
+      elm.forEach(el => {
+        if (el instanceof HTMLElement) {
+          slideDown(el, this._config.animationSpeed)
         }
-      }
+      })
 
       setTimeout(() => {
         if (this._parent) {
@@ -126,12 +136,18 @@ class CardWidget {
       icon.classList.add(this._config.collapseIcon)
       icon.classList.remove(this._config.expandIcon)
     }
+
+    this._element?.dispatchEvent(event)
   }
 
   remove() {
+    const event = new Event(EVENT_REMOVE)
+
     if (this._parent) {
       slideUp(this._parent, this._config.animationSpeed)
     }
+
+    this._element?.dispatchEvent(event)
   }
 
   toggle() {
@@ -144,6 +160,8 @@ class CardWidget {
   }
 
   maximize() {
+    const event = new Event(EVENT_MAXIMIZED)
+
     if (this._parent) {
       const maxElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.maximizeIcon}`)
 
@@ -172,9 +190,13 @@ class CardWidget {
         }
       }, 150)
     }
+
+    this._element?.dispatchEvent(event)
   }
 
   minimize() {
+    const event = new Event(EVENT_MINIMIZED)
+
     if (this._parent) {
       const minElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.minimizeIcon}`)
 
@@ -201,6 +223,8 @@ class CardWidget {
         }
       }, 10)
     }
+
+    this._element?.dispatchEvent(event)
   }
 
   toggleMaximize() {
@@ -222,36 +246,36 @@ class CardWidget {
 domReady(() => {
   const collapseBtn = document.querySelectorAll(SELECTOR_DATA_COLLAPSE)
 
-  for (const btn of collapseBtn) {
+  collapseBtn.forEach(btn => {
     btn.addEventListener('click', event => {
       event.preventDefault()
       const target = event.target as HTMLElement
       const data = new CardWidget(target, Default)
       data.toggle()
     })
-  }
+  })
 
   const removeBtn = document.querySelectorAll(SELECTOR_DATA_REMOVE)
 
-  for (const btn of removeBtn) {
+  removeBtn.forEach(btn => {
     btn.addEventListener('click', event => {
       event.preventDefault()
       const target = event.target as HTMLElement
       const data = new CardWidget(target, Default)
       data.remove()
     })
-  }
+  })
 
   const maxBtn = document.querySelectorAll(SELECTOR_DATA_MAXIMIZE)
 
-  for (const btn of maxBtn) {
+  maxBtn.forEach(btn => {
     btn.addEventListener('click', event => {
       event.preventDefault()
       const target = event.target as HTMLElement
       const data = new CardWidget(target, Default)
       data.toggleMaximize()
     })
-  }
+  })
 })
 
 export default CardWidget