enhanced CardWidget (Widget)

- renamed Widget to CardWidget
- renamed data-widget to data-card-widget
- reworked Selector & ClassName Icons to Option
- splited toggleMaximize to maximize & minimize
- added maximizeTrigger Option
- enhance code to run methods without buttons

build/js/AdminLTE.js

@@ -4,7 +4,7 @@ import PushMenu from './PushMenu'
 import Treeview from './Treeview'
 import DirectChat from './DirectChat'
 import TodoList from './TodoList'
-import Widget from './Widget'
+import CardWidget from './CardWidget'
 
 export {
   ControlSidebar,
@@ -13,5 +13,5 @@ export {
   Treeview,
   DirectChat,
   TodoList,
-  Widget
+  CardWidget
 }

build/js/CardWidget.js

@@ -0,0 +1,249 @@
+/**
+ * --------------------------------------------
+ * AdminLTE CardWidget.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+const CardWidget = (($) => {
+  /**
+   * Constants
+   * ====================================================
+   */
+
+  const NAME               = 'CardWidget'
+  const DATA_KEY           = 'lte.cardwidget'
+  const EVENT_KEY          = `.${DATA_KEY}`
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+  const Event = {
+    EXPANDED: `expanded${EVENT_KEY}`,
+    COLLAPSED: `collapsed${EVENT_KEY}`,
+    MAXIMIZED: `maximized${EVENT_KEY}`,
+    MINIMIZED: `minimized${EVENT_KEY}`,
+    REMOVED: `removed${EVENT_KEY}`
+  }
+
+  const ClassName = {
+    CARD: 'card',
+    COLLAPSED: 'collapsed-card',
+    WAS_COLLAPSED: 'was-collapsed',
+    MAXIMIZED: 'maximized-card',
+  }
+
+  const Selector = {
+    DATA_REMOVE: '[data-card-widget="remove"]',
+    DATA_COLLAPSE: '[data-card-widget="collapse"]',
+    DATA_MAXIMIZE: '[data-card-widget="maximize"]',
+    CARD: `.${ClassName.CARD}`,
+    CARD_HEADER: '.card-header',
+    CARD_BODY: '.card-body',
+    CARD_FOOTER: '.card-footer',
+    COLLAPSED: `.${ClassName.COLLAPSED}`,
+  }
+
+  const Default = {
+    animationSpeed: 'normal',
+    collapseTrigger: Selector.DATA_COLLAPSE,
+    removeTrigger: Selector.DATA_REMOVE,
+    maximizeTrigger: Selector.DATA_MAXIMIZE,
+    collapseIcon: 'fa-minus',
+    expandIcon: 'fa-plus',
+    maximizeIcon: 'fa-expand',
+    minimizeIcon: 'fa-compress',
+  }
+
+  class CardWidget {
+    constructor(element, settings) {
+      this._element  = element
+      this._parent = element.parents(Selector.CARD).first()
+
+      if (element.hasClass(ClassName.CARD)) {
+        this._parent = element
+      }
+
+      this._settings = $.extend({}, Default, settings)
+    }
+
+    collapse() {
+      this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
+        .slideUp(this._settings.animationSpeed, () => {
+          this._parent.addClass(ClassName.COLLAPSED)
+        })
+      this._element.children(this._settings.collapseTrigger + ' .' + this._settings.collapseIcon)
+        .addClass(this._settings.expandIcon)
+        .removeClass(this._settings.collapseIcon)
+
+      const collapsed = $.Event(Event.COLLAPSED)
+
+      this._element.trigger(collapsed, this._parent)
+    }
+
+    expand() {
+      this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
+        .slideDown(this._settings.animationSpeed, () => {
+          this._parent.removeClass(ClassName.COLLAPSED)
+        })
+
+      this._element.children(this._settings.collapseTrigger + ' .' + this._settings.expandIcon)
+        .addClass(this._settings.collapseIcon)
+        .removeClass(this._settings.expandIcon)
+
+      const expanded = $.Event(Event.EXPANDED)
+
+      this._element.trigger(expanded, this._parent)
+    }
+
+    remove() {
+      this._parent.slideUp()
+
+      const removed = $.Event(Event.REMOVED)
+
+      this._element.trigger(removed, this._parent)
+    }
+
+    toggle() {
+      if (this._parent.hasClass(ClassName.COLLAPSED)) {
+        this.expand()
+        return
+      }
+
+      this.collapse()
+    }
+    
+    maximize() {
+      this._element.children(this._settings.maximizeTrigger + ' .' + this._settings.maximizeIcon)
+        .addClass(this._settings.minimizeIcon)
+        .removeClass(this._settings.maximizeIcon)
+      this._parent.css({
+        'height': this._parent.height(),
+        'width': this._parent.width(),
+        'transition': 'all .15s'
+      }).delay(150).queue(function(){
+        $(this).addClass(ClassName.MAXIMIZED)
+        $('html').addClass(ClassName.MAXIMIZED)
+        if ($(this).hasClass(ClassName.COLLAPSED)) {
+          $(this).addClass(ClassName.WAS_COLLAPSED)
+        }
+        $(this).dequeue()
+      })
+
+      const maximized = $.Event(Event.MAXIMIZED)
+
+      this._element.trigger(maximized, this._parent)
+    }
+
+    minimize() {
+      this._element.children(this._settings.maximizeTrigger + ' .' + this._settings.minimizeIcon)
+        .addClass(this._settings.maximizeIcon)
+        .removeClass(this._settings.minimizeIcon)
+      this._parent.css('cssText', 'height:' + this._parent[0].style.height + ' !important;' +
+        'width:' + this._parent[0].style.width + ' !important; transition: all .15s;'
+      ).delay(10).queue(function(){
+        $(this).removeClass(ClassName.MAXIMIZED)
+        $('html').removeClass(ClassName.MAXIMIZED)
+        $(this).css({
+          'height': 'inherit',
+          'width': 'inherit'
+        })
+        if ($(this).hasClass(ClassName.WAS_COLLAPSED)) {
+          $(this).removeClass(ClassName.WAS_COLLAPSED)
+        }
+        $(this).dequeue()
+      })
+
+      const MINIMIZED = $.Event(Event.MINIMIZED)
+
+      this._element.trigger(MINIMIZED, this._parent)
+    }
+
+    toggleMaximize() {
+      if (this._parent.hasClass(ClassName.MAXIMIZED)) {
+        this.minimize()
+        return
+      }
+
+      this.maximize()
+    }
+
+    // Private
+
+    _init(card) {
+      this._parent = card
+
+      $(this).find(this._settings.collapseTrigger).click(() => {
+        this.toggle()
+      })
+
+      $(this).find(this._settings.maximizeTrigger).click(() => {
+        this.toggleMaximize()
+      })
+
+      $(this).find(this._settings.removeTrigger).click(() => {
+        this.remove()
+      })
+    }
+
+    // Static
+
+    static _jQueryInterface(config) {
+      let data = $(this).data(DATA_KEY)
+
+      if (!data) {
+        data = new CardWidget($(this), data)
+        $(this).data(DATA_KEY, typeof config === 'string' ? data: config)
+      }
+
+      if (typeof config === 'string' && config.match(/collapse|expand|remove|toggle|maximize|minimize|toggleMaximize/)) {
+        data[config]()
+      } else if (typeof config === 'object') {
+        data._init($(this))
+      }
+    }
+  }
+
+  /**
+   * Data API
+   * ====================================================
+   */
+
+  $(document).on('click', Selector.DATA_COLLAPSE, function (event) {
+    if (event) {
+      event.preventDefault()
+    }
+
+    CardWidget._jQueryInterface.call($(this), 'toggle')
+  })
+
+  $(document).on('click', Selector.DATA_REMOVE, function (event) {
+    if (event) {
+      event.preventDefault()
+    }
+
+    CardWidget._jQueryInterface.call($(this), 'remove')
+  })
+
+  $(document).on('click', Selector.DATA_MAXIMIZE, function (event) {
+    if (event) {
+      event.preventDefault()
+    }
+
+    CardWidget._jQueryInterface.call($(this), 'toggleMaximize')
+  })
+
+  /**
+   * jQuery API
+   * ====================================================
+   */
+
+  $.fn[NAME] = CardWidget._jQueryInterface
+  $.fn[NAME].Constructor = CardWidget
+  $.fn[NAME].noConflict  = function () {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return CardWidget._jQueryInterface
+  }
+
+  return CardWidget
+})(jQuery)
+
+export default CardWidget

build/js/Widget.js

@@ -1,226 +0,0 @@
-/**
- * --------------------------------------------
- * AdminLTE Widget.js
- * License MIT
- * --------------------------------------------
- */
-
-const Widget = (($) => {
-  /**
-   * Constants
-   * ====================================================
-   */
-
-  const NAME               = 'Widget'
-  const DATA_KEY           = 'lte.widget'
-  const EVENT_KEY          = `.${DATA_KEY}`
-  const JQUERY_NO_CONFLICT = $.fn[NAME]
-
-  const Event = {
-    EXPANDED : `expanded${EVENT_KEY}`,
-    COLLAPSED: `collapsed${EVENT_KEY}`,
-    MAXIMIZED: `maximized${EVENT_KEY}`,
-    MINIMIZED: `minimized${EVENT_KEY}`,
-    REMOVED  : `removed${EVENT_KEY}`
-  }
-
-  const Selector = {
-    DATA_REMOVE   : '[data-widget="remove"]',
-    DATA_COLLAPSE : '[data-widget="collapse"]',
-    DATA_MAXIMIZE : '[data-widget="maximize"]',
-    CARD          : '.card',
-    CARD_HEADER   : '.card-header',
-    CARD_BODY     : '.card-body',
-    CARD_FOOTER   : '.card-footer',
-    COLLAPSED     : '.collapsed-card',
-    COLLAPSE_ICON : '.fa-minus',
-    EXPAND_ICON   : '.fa-plus'
-  }
-
-  const ClassName = {
-    COLLAPSED     : 'collapsed-card',
-    WAS_COLLAPSED : 'was-collapsed',
-    MAXIMIZED     : 'maximized-card',
-    COLLAPSE_ICON : 'fa-minus',
-    EXPAND_ICON   : 'fa-plus',
-    MAXIMIZE_ICON : 'fa-expand',
-    MINIMIZE_ICON : 'fa-compress',
-  }
-
-  const Default = {
-    animationSpeed : 'normal',
-    collapseTrigger: Selector.DATA_COLLAPSE,
-    removeTrigger  : Selector.DATA_REMOVE
-  }
-
-  class Widget {
-    constructor(element, settings) {
-      this._element  = element
-      this._parent   = element.parents(Selector.CARD).first()
-      this._settings = $.extend({}, Default, settings)
-    }
-
-    collapse() {
-      this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
-        .slideUp(this._settings.animationSpeed, () => {
-          this._parent.addClass(ClassName.COLLAPSED)
-        })
-
-      this._element.children(Selector.COLLAPSE_ICON)
-        .addClass(ClassName.EXPAND_ICON)
-        .removeClass(ClassName.COLLAPSE_ICON)
-
-      const collapsed = $.Event(Event.COLLAPSED)
-
-      this._element.trigger(collapsed, this._parent)
-    }
-
-    expand() {
-      this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
-        .slideDown(this._settings.animationSpeed, () => {
-          this._parent.removeClass(ClassName.COLLAPSED)
-        })
-
-      this._element.children(Selector.EXPAND_ICON)
-        .addClass(ClassName.COLLAPSE_ICON)
-        .removeClass(ClassName.EXPAND_ICON)
-
-      const expanded = $.Event(Event.EXPANDED)
-
-      this._element.trigger(expanded, this._parent)
-    }
-
-    remove() {
-      this._parent.slideUp()
-
-      const removed = $.Event(Event.REMOVED)
-
-      this._element.trigger(removed, this._parent)
-    }
-
-    toggle() {
-      if (this._parent.hasClass(ClassName.COLLAPSED)) {
-        this.expand()
-        return
-      }
-
-      this.collapse()
-    }
-    
-    toggleMaximize() {
-      var button = this._element.find('i')
-
-      if (this._parent.hasClass(ClassName.MAXIMIZED)) {
-        button.addClass(ClassName.MAXIMIZE_ICON).removeClass(ClassName.MINIMIZE_ICON)
-        this._parent.css('cssText', 'height:' + this._parent[0].style.height + ' !important;' +
-          'width:' + this._parent[0].style.width + ' !important; transition: all .15s;'
-        ).delay(100).queue(function(){
-          $(this).removeClass(ClassName.MAXIMIZED)
-          $('html').removeClass(ClassName.MAXIMIZED)
-          $(this).trigger(Event.MINIMIZED)
-          $(this).css({
-            'height': 'inherit',
-            'width': 'inherit'
-          })
-          if ($(this).hasClass(ClassName.WAS_COLLAPSED)) {
-            $(this).removeClass(ClassName.WAS_COLLAPSED)
-          }
-          $(this).dequeue()
-        })
-      } else {
-        button.addClass(ClassName.MINIMIZE_ICON).removeClass(ClassName.MAXIMIZE_ICON)
-        this._parent.css({
-          'height': this._parent.height(),
-          'width': this._parent.width(),
-          'transition': 'all .15s'
-        }).delay(150).queue(function(){
-          $(this).addClass(ClassName.MAXIMIZED)
-          $('html').addClass(ClassName.MAXIMIZED)
-          $(this).trigger(Event.MAXIMIZED)
-          if ($(this).hasClass(ClassName.COLLAPSED)) {
-            $(this).addClass(ClassName.WAS_COLLAPSED)
-          }
-          $(this).dequeue()
-        })
-      }
-    }
-
-    // Private
-
-    _init(card) {
-      this._parent = card
-
-      $(this).find(this._settings.collapseTrigger).click(() => {
-        this.toggle()
-      })
-
-      $(this).find(this._settings.removeTrigger).click(() => {
-        this.remove()
-      })
-    }
-
-    // Static
-
-    static _jQueryInterface(config) {
-      return this.each(function () {
-        let data = $(this).data(DATA_KEY)
-
-        if (!data) {
-          data = new Widget($(this), data)
-          $(this).data(DATA_KEY, typeof config === 'string' ? data : config)
-        }
-
-        if (typeof config === 'string' && config.match(/collapse|expand|remove|toggle|toggleMaximize/)) {
-          data[config]()
-        } else if (typeof config === 'object') {
-          data._init($(this))
-        }
-      })
-    }
-  }
-
-  /**
-   * Data API
-   * ====================================================
-   */
-
-  $(document).on('click', Selector.DATA_COLLAPSE, function (event) {
-    if (event) {
-      event.preventDefault()
-    }
-
-    Widget._jQueryInterface.call($(this), 'toggle')
-  })
-
-  $(document).on('click', Selector.DATA_REMOVE, function (event) {
-    if (event) {
-      event.preventDefault()
-    }
-
-    Widget._jQueryInterface.call($(this), 'remove')
-  })
-
-  $(document).on('click', Selector.DATA_MAXIMIZE, function (event) {
-    if (event) {
-      event.preventDefault()
-    }
-
-    Widget._jQueryInterface.call($(this), 'toggleMaximize')
-  })
-
-  /**
-   * jQuery API
-   * ====================================================
-   */
-
-  $.fn[NAME] = Widget._jQueryInterface
-  $.fn[NAME].Constructor = Widget
-  $.fn[NAME].noConflict  = function () {
-    $.fn[NAME] = JQUERY_NO_CONFLICT
-    return Widget._jQueryInterface
-  }
-
-  return Widget
-})(jQuery)
-
-export default Widget

docs/_config.yml

@@ -62,8 +62,8 @@ navigation:
       url: javascript/push-menu.html
     - title: Treeview
       url: javascript/treeview.html
-    - title: Widget
-      url: javascript/widget.html
+    - title: Card Widget
+      url: javascript/card-widget.html
     # - title: CardRefresh
     #   url: javascript/card-refresh.html
     - title: Control Sidebar

docs/javascript/widget.md → docs/javascript/card-widget.md

@@ -1,9 +1,9 @@
 ---
 layout: page
-title: Widget Plugin
+title: Card Widget Plugin
 ---
 
-The widget plugin provides the functionality for collapsing, expanding and removing a card. 
+The card widget plugin provides the functionality for collapsing, expanding and removing a card. 
 
 ##### Usage
 This plugin can be activated as a jQuery plugin or using the data api. 
@@ -13,7 +13,7 @@ This plugin can be activated as a jQuery plugin or using the data api.
 
 This plugin provides two data-api attributes. Any element using one of the following attributes should be placed within the `.card-tools` div, which is usually in the card header. For more information about the [card HTML structure]({% link components/cards.md %}), visit the card component documentation 
 
-`data-widget="collapse"`
+`data-card-widget="collapse"`
 <br />
 This attribute, when attached to a button, allows the box to be collapsed/expanded when clicked. 
 <div class="row">
@@ -22,7 +22,7 @@ This attribute, when attached to a button, allows the box to be collapsed/expand
       <div class="card-header">
         <h3 class="card-title">Collapsible Card Example</h3>
         <div class="card-tools">
-          <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
+          <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
         </div>
       </div>
       <div class="card-body">
@@ -37,7 +37,7 @@ This attribute, when attached to a button, allows the box to be collapsed/expand
     <h3 class="card-title">Collapsible Card Example</h3>
     <div class="card-tools">
       <!-- Collapse Button -->
-      <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
+      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
     </div>
     <!-- /.card-tools -->
   </div>
@@ -53,7 +53,7 @@ This attribute, when attached to a button, allows the box to be collapsed/expand
   </div>
 </div>
 
-`data-widget="remove"`
+`data-card-widget="remove"`
 <br />
 This attribute, when attached to a button, allows the box to be removed when clicked. 
 <div class="row">
@@ -62,7 +62,7 @@ This attribute, when attached to a button, allows the box to be removed when cli
       <div class="card-header">
         <h3 class="card-title">Removable Card Example</h3>
         <div class="card-tools">
-          <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
+          <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
         </div>
       </div>
       <div class="card-body">
@@ -77,7 +77,7 @@ This attribute, when attached to a button, allows the box to be removed when cli
     <h3 class="card-title">Removable Card Example</h3>
     <div class="card-tools">
       <!-- Remove Button -->
-      <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
+      <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
     </div>
     <!-- /.card-tools -->
   </div>
@@ -93,7 +93,7 @@ This attribute, when attached to a button, allows the box to be removed when cli
   </div>
 </div>
 
-`data-widget="maximize"`
+`data-card-widget="maximize"`
 <br />
 This attribute, when attached to a button, allows the box to be maximize/minimize when clicked. 
 <div class="row">
@@ -102,7 +102,7 @@ This attribute, when attached to a button, allows the box to be maximize/minimiz
       <div class="card-header">
         <h3 class="card-title">Maximizable Card Example</h3>
         <div class="card-tools">
-          <button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i></button>
+          <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
         </div>
       </div>
       <div class="card-body">
@@ -117,7 +117,7 @@ This attribute, when attached to a button, allows the box to be maximize/minimiz
     <h3 class="card-title">Maximizable Card Example</h3>
     <div class="card-tools">
       <!-- Maximize Button -->
-      <button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i></button>
+      <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
     </div>
     <!-- /.card-tools -->
   </div>
@@ -136,7 +136,7 @@ This attribute, when attached to a button, allows the box to be maximize/minimiz
 
 ###### jQuery
 {: .text-bold }
-To activate any button using jQuery, you must provide the removeTrigger and collapseTrigger options. Otherwise, the plugin will assume the default `data-widget` selectors. 
+To activate any button using jQuery, you must provide the removeTrigger and collapseTrigger options. Otherwise, the plugin will assume the default `data-card-widget` selectors. 
 
 ```js
 $('#my-card').Widget(options)
@@ -149,14 +149,15 @@ $('#my-card').Widget(options)
 | Name | Type | Default | Description
 |-|-|-|-
 |animationSpeed | Number | 300 | Speed of slide down/up animation in milliseconds.
-|collapseTrigger | String | `[data-widget="remove"]` | jQuery selector to the element responsible for collapsing the box.
-|removeTrigger | String | `[data-widget="collapse"]` | jQuery selector to the element responsible for removing the box.
+|collapseTrigger | String | `[data-card-widget="remove"]` | jQuery selector to the element responsible for collapsing the box.
+|removeTrigger | String | `[data-card-widget="collapse"]` | jQuery selector to the element responsible for removing the box.
+|maximizeTrigger | String | `[data-card-widget="maximize"]` | jQuery selector to the element responsible for maximizing the box.
 {: .table .table-bordered .bg-light}
 
 > ##### Tip!
 > You can use any option via the data-attributes like this.
 > ```html
-> <button type="button" class="btn btn-tool" data-widget="collapse" data-animation-speed="1000"><i class="fas fa-minus"></i></button>
+> <button type="button" class="btn btn-tool" data-card-widget="collapse" data-animation-speed="1000"><i class="fas fa-minus"></i></button>
 > ```
 {: .quote-info}
 
@@ -166,14 +167,14 @@ $('#my-card').Widget(options)
 |---
 | Event Type | Description
 |-|-
-|expanded.lte.widget | Triggered after a card expanded.
-|collapsed.lte.widget | Triggered after a card collapsed.
-|maximized.lte.widget | Triggered after a card maximized.
-|minimized.lte.widget | Triggered after a card minimized.
-|removed.lte.widget | Triggered after a card removed.
+|expanded.lte.cardwidget | Triggered after a card expanded.
+|collapsed.lte.cardwidget | Triggered after a card collapsed.
+|maximized.lte.cardwidget | Triggered after a card maximized.
+|minimized.lte.cardwidget | Triggered after a card minimized.
+|removed.lte.cardwidget | Triggered after a card removed.
 {: .table .table-bordered .bg-light}
 
-Example: `$('#my-card').on('expanded.lte.widget', handleExpandedEvent)`
+Example: `$('#my-card').on('expanded.lte.cardwidget', handleExpandedEvent)`
 
 
 ##### Methods
@@ -186,6 +187,8 @@ Example: `$('#my-card').on('expanded.lte.widget', handleExpandedEvent)`
 |expand | Expands the card
 |remove | Removes the card
 |toggle | Toggles the state of the card between expanded and collapsed
+|maximize | Maximizes the card
+|minimize | Minimizes the card
 |toggleMaximize | Toggles the state of the card between maximized and minimized
 {: .table .table-bordered .bg-light}
 

index.html

@@ -724,14 +724,14 @@
 
                 <div class="card-tools">
                   <span data-toggle="tooltip" title="3 New Messages" class="badge badge-primary">3</span>
-                  <button type="button" class="btn btn-tool" data-widget="collapse">
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                     <i class="fas fa-minus"></i>
                   </button>
                   <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts"
                           data-widget="chat-pane-toggle">
                     <i class="fas fa-comments"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
               </div>
@@ -1071,7 +1071,7 @@
                   </button>
                   <button type="button"
                           class="btn btn-primary btn-sm"
-                          data-widget="collapse"
+                          data-card-widget="collapse"
                           data-toggle="tooltip"
                           title="Collapse">
                     <i class="fas fa-minus"></i>
@@ -1115,10 +1115,10 @@
                 </h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn bg-info btn-sm" data-widget="collapse">
+                  <button type="button" class="btn bg-info btn-sm" data-card-widget="collapse">
                     <i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn bg-info btn-sm" data-widget="remove">
+                  <button type="button" class="btn bg-info btn-sm" data-card-widget="remove">
                     <i class="fas fa-times"></i>
                   </button>
                 </div>
@@ -1178,10 +1178,10 @@
                       <a href="#" class="dropdown-item">View calendar</a>
                     </div>
                   </div>
-                  <button type="button" class="btn btn-success btn-sm" data-widget="collapse">
+                  <button type="button" class="btn btn-success btn-sm" data-card-widget="collapse">
                     <i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-success btn-sm" data-widget="remove">
+                  <button type="button" class="btn btn-success btn-sm" data-card-widget="remove">
                     <i class="fas fa-times"></i>
                   </button>
                 </div>

index2.html

@@ -676,7 +676,7 @@
                 <h5 class="card-title">Monthly Recap Report</h5>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse">
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                     <i class="fas fa-minus"></i>
                   </button>
                   <div class="btn-group">
@@ -691,7 +691,7 @@
                       <a href="#" class="dropdown-item">Separated link</a>
                     </div>
                   </div>
-                  <button type="button" class="btn btn-tool" data-widget="remove">
+                  <button type="button" class="btn btn-tool" data-card-widget="remove">
                     <i class="fas fa-times"></i>
                   </button>
                 </div>
@@ -815,10 +815,10 @@
                 <h3 class="card-title">Visitors Report</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse">
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                     <i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove">
+                  <button type="button" class="btn btn-tool" data-card-widget="remove">
                     <i class="fas fa-times"></i>
                   </button>
                 </div>
@@ -866,12 +866,12 @@
 
                     <div class="card-tools">
                       <span data-toggle="tooltip" title="3 New Messages" class="badge badge-warning">3</span>
-                      <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                       </button>
                       <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts"
                               data-widget="chat-pane-toggle">
                         <i class="fas fa-comments"></i></button>
-                      <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                      <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                       </button>
                     </div>
                   </div>
@@ -1069,9 +1069,9 @@
 
                     <div class="card-tools">
                       <span class="badge badge-danger">8 New Members</span>
-                      <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                       </button>
-                      <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                      <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                       </button>
                     </div>
                   </div>
@@ -1139,10 +1139,10 @@
                 <h3 class="card-title">Latest Orders</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse">
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                     <i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove">
+                  <button type="button" class="btn btn-tool" data-card-widget="remove">
                     <i class="fas fa-times"></i>
                   </button>
                 </div>
@@ -1280,9 +1280,9 @@
                 <h3 class="card-title">Browser Usage</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
               </div>
@@ -1349,10 +1349,10 @@
                 <h3 class="card-title">Recently Added Products</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse">
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                     <i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove">
+                  <button type="button" class="btn btn-tool" data-card-widget="remove">
                     <i class="fas fa-times"></i>
                   </button>
                 </div>

pages/charts/chartjs.html

@@ -614,9 +614,9 @@
                 <h3 class="card-title">Area Chart</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                 </div>
               </div>
               <div class="card-body">
@@ -634,9 +634,9 @@
                 <h3 class="card-title">Donut Chart</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                 </div>
               </div>
               <div class="card-body">
@@ -652,9 +652,9 @@
                 <h3 class="card-title">Pie Chart</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                 </div>
               </div>
               <div class="card-body">
@@ -673,9 +673,9 @@
                 <h3 class="card-title">Line Chart</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                 </div>
               </div>
               <div class="card-body">
@@ -693,9 +693,9 @@
                 <h3 class="card-title">Bar Chart</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                 </div>
               </div>
               <div class="card-body">
@@ -713,9 +713,9 @@
                 <h3 class="card-title">Stacked Bar Chart</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                 </div>
               </div>
               <div class="card-body">

pages/charts/flot.html

@@ -648,9 +648,9 @@
                 </h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
               </div>
@@ -670,9 +670,9 @@
                 </h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
               </div>
@@ -696,10 +696,10 @@
                 </h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse">
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                     <i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove">
+                  <button type="button" class="btn btn-tool" data-card-widget="remove">
                     <i class="fas fa-times"></i>
                   </button>
                 </div>
@@ -720,9 +720,9 @@
                 </h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
               </div>

pages/charts/inline.html

@@ -620,10 +620,10 @@
                 </h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                       class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
               </div>
@@ -692,10 +692,10 @@
                 </h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                       class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
               </div>
@@ -751,10 +751,10 @@
                 </h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                       class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
               </div>

pages/examples/blank.html

@@ -614,9 +614,9 @@
           <h3 class="card-title">Title</h3>
 
           <div class="card-tools">
-            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
               <i class="fas fa-minus"></i></button>
-            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
+            <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
               <i class="fas fa-times"></i></button>
           </div>
         </div>

pages/examples/language-menu.html

@@ -626,9 +626,9 @@
           <h3 class="card-title">Title</h3>
 
           <div class="card-tools">
-            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
               <i class="fas fa-minus"></i></button>
-            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
+            <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
               <i class="fas fa-times"></i></button>
           </div>
         </div>

pages/examples/legacy-user-menu.html

@@ -641,9 +641,9 @@
           <h3 class="card-title">Title</h3>
 
           <div class="card-tools">
-            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
               <i class="fas fa-minus"></i></button>
-            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
+            <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
               <i class="fas fa-times"></i></button>
           </div>
         </div>

pages/examples/project_add.html

@@ -614,7 +614,7 @@
               <h3 class="card-title">General</h3>
 
               <div class="card-tools">
-                <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+                <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                   <i class="fas fa-minus"></i></button>
               </div>
             </div>
@@ -655,7 +655,7 @@
               <h3 class="card-title">Budget</h3>
 
               <div class="card-tools">
-                <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+                <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                   <i class="fas fa-minus"></i></button>
               </div>
             </div>

pages/examples/project_detail.html

@@ -615,9 +615,9 @@
           <h3 class="card-title">Projects Detail</h3>
 
           <div class="card-tools">
-            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
               <i class="fas fa-minus"></i></button>
-            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
+            <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
               <i class="fas fa-times"></i></button>
           </div>
         </div>

pages/examples/project_edit.html

@@ -614,7 +614,7 @@
               <h3 class="card-title">General</h3>
 
               <div class="card-tools">
-                <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+                <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                   <i class="fas fa-minus"></i></button>
               </div>
             </div>
@@ -655,7 +655,7 @@
               <h3 class="card-title">Budget</h3>
 
               <div class="card-tools">
-                <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+                <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                   <i class="fas fa-minus"></i></button>
               </div>
             </div>
@@ -681,7 +681,7 @@
               <h3 class="card-title">Files</h3>
 
               <div class="card-tools">
-                <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+                <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                   <i class="fas fa-minus"></i></button>
               </div>
             </div>

pages/examples/projects.html

@@ -614,9 +614,9 @@
           <h3 class="card-title">Projects</h3>
 
           <div class="card-tools">
-            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
               <i class="fas fa-minus"></i></button>
-            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
+            <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
               <i class="fas fa-times"></i></button>
           </div>
         </div>

pages/forms/advanced.html

@@ -625,8 +625,8 @@
             <h3 class="card-title">Select2</h3>
 
             <div class="card-tools">
-              <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
-              <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-remove"></i></button>
+              <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
+              <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-remove"></i></button>
             </div>
           </div>
           <!-- /.card-header -->
@@ -707,8 +707,8 @@
             <h3 class="card-title">Bootstrap Duallistbox</h3>
 
             <div class="card-tools">
-              <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
-              <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-remove"></i></button>
+              <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
+              <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-remove"></i></button>
             </div>
           </div>
           <!-- /.card-header -->

pages/forms/editors.html

@@ -618,10 +618,10 @@
               </h3>
               <!-- tools box -->
               <div class="card-tools">
-                <button type="button" class="btn btn-tool btn-sm" data-widget="collapse" data-toggle="tooltip"
+                <button type="button" class="btn btn-tool btn-sm" data-card-widget="collapse" data-toggle="tooltip"
                         title="Collapse">
                   <i class="fas fa-minus"></i></button>
-                <button type="button" class="btn btn-tool btn-sm" data-widget="remove" data-toggle="tooltip"
+                <button type="button" class="btn btn-tool btn-sm" data-card-widget="remove" data-toggle="tooltip"
                         title="Remove">
                   <i class="fas fa-times"></i></button>
               </div>

pages/layout/boxed.html

@@ -615,9 +615,9 @@
           <h3 class="card-title">Title</h3>
 
           <div class="card-tools">
-            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
               <i class="fas fa-minus"></i></button>
-            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
+            <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
               <i class="fas fa-times"></i></button>
           </div>
         </div>

pages/layout/collapsed-sidebar.html

@@ -615,9 +615,9 @@
           <h3 class="card-title">Title</h3>
 
           <div class="card-tools">
-            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
               <i class="fas fa-minus"></i></button>
-            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
+            <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
               <i class="fas fa-times"></i></button>
           </div>
         </div>

pages/layout/fixed-footer.html

@@ -614,9 +614,9 @@
           <h3 class="card-title">Title</h3>
 
           <div class="card-tools">
-            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
               <i class="fas fa-minus"></i></button>
-            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
+            <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
               <i class="fas fa-times"></i></button>
           </div>
         </div>

pages/layout/fixed-sidebar.html

@@ -616,9 +616,9 @@
           <h3 class="card-title">Title</h3>
 
           <div class="card-tools">
-            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
               <i class="fas fa-minus"></i></button>
-            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
+            <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
               <i class="fas fa-times"></i></button>
           </div>
         </div>

pages/layout/fixed-topnav.html

@@ -614,9 +614,9 @@
           <h3 class="card-title">Title</h3>
 
           <div class="card-tools">
-            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
               <i class="fas fa-minus"></i></button>
-            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
+            <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
               <i class="fas fa-times"></i></button>
           </div>
         </div>

pages/mailbox/compose.html

@@ -618,7 +618,7 @@
                 <h3 class="card-title">Folders</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                 </div>
               </div>
@@ -661,7 +661,7 @@
                 <h3 class="card-title">Labels</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                 </div>
               </div>

pages/mailbox/mailbox.html

@@ -616,7 +616,7 @@
               <h3 class="card-title">Folders</h3>
 
               <div class="card-tools">
-                <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                 </button>
               </div>
             </div>
@@ -659,7 +659,7 @@
               <h3 class="card-title">Labels</h3>
 
               <div class="card-tools">
-                <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                 </button>
               </div>
             </div>

pages/mailbox/read-mail.html

@@ -616,7 +616,7 @@
                 <h3 class="card-title">Folders</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                 </div>
               </div>
@@ -659,7 +659,7 @@
                 <h3 class="card-title">Labels</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                 </div>
               </div>

pages/widgets.html

@@ -970,7 +970,7 @@
                 <h3 class="card-title">Expandable</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-plus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -990,7 +990,7 @@
                 <h3 class="card-title">Collapsable</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -1010,7 +1010,7 @@
                 <h3 class="card-title">Removable</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -1030,7 +1030,7 @@
                 <h3 class="card-title">Maximizable</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -1054,9 +1054,9 @@
                 <h3 class="card-title">All together</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i></button>
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
+                  <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                 </div>
                 <!-- /.card-tools -->
               </div>
@@ -1119,7 +1119,7 @@
                 <h3 class="card-title">Primary Outline</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -1139,7 +1139,7 @@
                 <h3 class="card-title">Success Outline</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -1159,7 +1159,7 @@
                 <h3 class="card-title">Warning Outline</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -1196,7 +1196,7 @@
                 <h3 class="card-title">Primary Outline</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -1216,7 +1216,7 @@
                 <h3 class="card-title">Success Outline</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -1236,7 +1236,7 @@
                 <h3 class="card-title">Warning Outline</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -1273,7 +1273,7 @@
                 <h3 class="card-title">Primary</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -1293,7 +1293,7 @@
                 <h3 class="card-title">Success</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -1313,7 +1313,7 @@
                 <h3 class="card-title">Warning</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -1350,7 +1350,7 @@
                 <h3 class="card-title">Primary Gradient</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -1370,7 +1370,7 @@
                 <h3 class="card-title">Success Gradient</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -1390,7 +1390,7 @@
                 <h3 class="card-title">Warning Gradient</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -1433,12 +1433,12 @@
 
                 <div class="card-tools">
                   <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                   <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts"
                           data-widget="chat-pane-toggle">
                     <i class="fas fa-comments"></i></button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
               </div>
@@ -1528,12 +1528,12 @@
 
                 <div class="card-tools">
                   <span data-toggle="tooltip" title="3 New Messages" class="badge bg-success">3</span>
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                   <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts"
                           data-widget="chat-pane-toggle">
                     <i class="fas fa-comments"></i></button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
               </div>
@@ -1623,12 +1623,12 @@
 
                 <div class="card-tools">
                   <span data-toggle="tooltip" title="3 New Messages" class="badge bg-danger">3</span>
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                   <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts"
                           data-widget="chat-pane-toggle">
                     <i class="fas fa-comments"></i></button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
               </div>
@@ -1718,12 +1718,12 @@
 
                 <div class="card-tools">
                   <span data-toggle="tooltip" title="3 New Messages" class="badge">3</span>
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                   <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts"
                           data-widget="chat-pane-toggle">
                     <i class="fas fa-comments"></i></button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
               </div>
@@ -1956,9 +1956,9 @@
                 <div class="card-tools">
                   <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Mark as read">
                     <i class="far fa-circle"></i></button>
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -2033,9 +2033,9 @@
                 <div class="card-tools">
                   <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Mark as read">
                     <i class="far fa-circle"></i></button>
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
-                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->