release: 6.4.0

README.txt

@@ -1,5 +1,5 @@
 MDB5
-Version: FREE 6.3.1
+Version: FREE 6.4.0
 
 Documentation:
 https://mdbootstrap.com/docs/standard/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-ui-kit",
-  "version": "6.3.1",
+  "version": "6.4.0",
   "main": "js/mdb.min.js",
   "homepage": "https://mdbootstrap.com/docs/standard/",
   "repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",

src/js/bootstrap/mdb-prefix/dropdown.js

@@ -269,7 +269,7 @@ class Dropdown extends BaseComponent {
     }
 
     // We need to trim the value because custom properties can also include spaces
-    const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end';
+    const isEnd = getComputedStyle(this._menu).getPropertyValue('--mdb-position').trim() === 'end';
 
     if (parentDropdown.classList.contains(CLASS_NAME_DROPUP)) {
       return isEnd ? PLACEMENT_TOPEND : PLACEMENT_TOP;

src/js/free/alert.js

@@ -10,14 +10,11 @@ import BSAlert from '../bootstrap/mdb-prefix/alert';
  */
 
 const NAME = 'alert';
-const DATA_KEY = `mdb.${NAME}`;
-const EVENT_KEY = `.${DATA_KEY}`;
 
 const EVENT_CLOSE_BS = 'close.bs.alert';
 const EVENT_CLOSED_BS = 'closed.bs.alert';
 
-const EVENT_CLOSE = `close${EVENT_KEY}`;
+const EXTENDED_EVENTS = [{ name: 'close' }, { name: 'closed' }];
-const EVENT_CLOSED = `closed${EVENT_KEY}`;
 
 const SELECTOR_ALERT = '.alert';
 
@@ -42,20 +39,11 @@ class Alert extends BSAlert {
 
   // Private
   _init() {
-    this._bindCloseEvent();
+    this._bindMdbEvents();
-    this._bindClosedEvent();
   }
 
-  _bindCloseEvent() {
+  _bindMdbEvents() {
-    EventHandler.on(this._element, EVENT_CLOSE_BS, () => {
+    EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
-      EventHandler.trigger(this._element, EVENT_CLOSE);
-    });
-  }
-
-  _bindClosedEvent() {
-    EventHandler.on(this._element, EVENT_CLOSED_BS, () => {
-      EventHandler.trigger(this._element, EVENT_CLOSED);
-    });
   }
 }
 

src/js/free/carousel.js

@@ -11,14 +11,14 @@ import BSCarousel from '../bootstrap/mdb-prefix/carousel';
  */
 
 const NAME = 'carousel';
-const DATA_KEY = `mdb.${NAME}`;
-const EVENT_KEY = `.${DATA_KEY}`;
 
 const EVENT_SLIDE_BS = 'slide.bs.carousel';
 const EVENT_SLID_BS = 'slid.bs.carousel';
 
-const EVENT_SLIDE = `slide${EVENT_KEY}`;
+const EXTENDED_EVENTS = [
-const EVENT_SLID = `slid${EVENT_KEY}`;
+  { name: 'slide', parametersToCopy: ['relatedTarget', 'direction', 'from', 'to'] },
+  { name: 'slid', parametersToCopy: ['relatedTarget', 'direction', 'from', 'to'] },
+];
 
 const SELECTOR_DATA_RIDE = '[data-mdb-ride="carousel"]';
 
@@ -43,30 +43,11 @@ class Carousel extends BSCarousel {
 
   // Private
   _init() {
-    this._bindSlideEvent();
+    this._bindMdbEvents();
-    this._bindSlidEvent();
   }
 
-  _bindSlideEvent() {
+  _bindMdbEvents() {
-    EventHandler.on(this._element, EVENT_SLIDE_BS, (e) => {
+    EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
-      EventHandler.trigger(this._element, EVENT_SLIDE, {
-        relatedTarget: e.relatedTarget,
-        direction: e.direction,
-        from: e.from,
-        to: e.to,
-      });
-    });
-  }
-
-  _bindSlidEvent() {
-    EventHandler.on(this._element, EVENT_SLID_BS, (e) => {
-      EventHandler.trigger(this._element, EVENT_SLID, {
-        relatedTarget: e.relatedTarget,
-        direction: e.direction,
-        from: e.from,
-        to: e.to,
-      });
-    });
   }
 }
 

src/js/free/collapse.js

@@ -10,18 +10,13 @@ import BSCollapse from '../bootstrap/mdb-prefix/collapse';
  */
 
 const NAME = 'collapse';
-const DATA_KEY = `mdb.${NAME}`;
-const EVENT_KEY = `.${DATA_KEY}`;
 
 const EVENT_SHOW_BS = 'show.bs.collapse';
 const EVENT_SHOWN_BS = 'shown.bs.collapse';
 const EVENT_HIDE_BS = 'hide.bs.collapse';
 const EVENT_HIDDEN_BS = 'hidden.bs.collapse';
 
-const EVENT_SHOW = `show${EVENT_KEY}`;
+const EXTENDED_EVENTS = [{ name: 'show' }, { name: 'shown' }, { name: 'hide' }, { name: 'hidden' }];
-const EVENT_SHOWN = `shown${EVENT_KEY}`;
-const EVENT_HIDE = `hide${EVENT_KEY}`;
-const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
 
 const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="collapse"]';
 
@@ -48,34 +43,11 @@ class Collapse extends BSCollapse {
 
   // Private
   _init() {
-    this._bindShowEvent();
+    this._bindMdbEvents();
-    this._bindShownEvent();
-    this._bindHideEvent();
-    this._bindHiddenEvent();
   }
 
-  _bindShowEvent() {
+  _bindMdbEvents() {
-    EventHandler.on(this._element, EVENT_SHOW_BS, () => {
+    EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
-      EventHandler.trigger(this._element, EVENT_SHOW);
-    });
-  }
-
-  _bindShownEvent() {
-    EventHandler.on(this._element, EVENT_SHOWN_BS, () => {
-      EventHandler.trigger(this._element, EVENT_SHOWN);
-    });
-  }
-
-  _bindHideEvent() {
-    EventHandler.on(this._element, EVENT_HIDE_BS, () => {
-      EventHandler.trigger(this._element, EVENT_HIDE);
-    });
-  }
-
-  _bindHiddenEvent() {
-    EventHandler.on(this._element, EVENT_HIDDEN_BS, () => {
-      EventHandler.trigger(this._element, EVENT_HIDDEN);
-    });
   }
 }
 

src/js/free/modal.js

@@ -10,8 +10,6 @@ import BSModal from '../bootstrap/mdb-prefix/modal';
  */
 
 const NAME = 'modal';
-const DATA_KEY = `mdb.${NAME}`;
-const EVENT_KEY = `.${DATA_KEY}`;
 
 const EVENT_HIDE_BS = 'hide.bs.modal';
 const EVENT_HIDE_PREVENTED_BS = 'hidePrevented.bs.modal';
@@ -19,11 +17,13 @@ const EVENT_HIDDEN_BS = 'hidden.bs.modal';
 const EVENT_SHOW_BS = 'show.bs.modal';
 const EVENT_SHOWN_BS = 'shown.bs.modal';
 
-const EVENT_HIDE = `hide${EVENT_KEY}`;
+const EXTENDED_EVENTS = [
-const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`;
+  { name: 'show', parametersToCopy: ['relatedTarget'] },
-const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
+  { name: 'shown', parametersToCopy: ['relatedTarget'] },
-const EVENT_SHOW = `show${EVENT_KEY}`;
+  { name: 'hide' },
-const EVENT_SHOWN = `shown${EVENT_KEY}`;
+  { name: 'hidePrevented' },
+  { name: 'hidden' },
+];
 
 const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="modal"]';
 
@@ -51,41 +51,11 @@ class Modal extends BSModal {
 
   // Private
   _init() {
-    this._bindShowEvent();
+    this._bindMdbEvents();
-    this._bindShownEvent();
-    this._bindHideEvent();
-    this._bindHiddenEvent();
-    this._bindHidePreventedEvent();
   }
 
-  _bindShowEvent() {
+  _bindMdbEvents() {
-    EventHandler.on(this._element, EVENT_SHOW_BS, (e) => {
+    EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
-      EventHandler.trigger(this._element, EVENT_SHOW, { relatedTarget: e.relatedTarget });
-    });
-  }
-
-  _bindShownEvent() {
-    EventHandler.on(this._element, EVENT_SHOWN_BS, (e) => {
-      EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget: e.relatedTarget });
-    });
-  }
-
-  _bindHideEvent() {
-    EventHandler.on(this._element, EVENT_HIDE_BS, () => {
-      EventHandler.trigger(this._element, EVENT_HIDE);
-    });
-  }
-
-  _bindHiddenEvent() {
-    EventHandler.on(this._element, EVENT_HIDDEN_BS, () => {
-      EventHandler.trigger(this._element, EVENT_HIDDEN);
-    });
-  }
-
-  _bindHidePreventedEvent() {
-    EventHandler.on(this._element, EVENT_HIDE_PREVENTED_BS, () => {
-      EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED);
-    });
   }
 }
 

src/js/free/popover.js

@@ -10,8 +10,6 @@ import BSPopover from '../bootstrap/mdb-prefix/popover';
  */
 
 const NAME = 'popover';
-const DATA_KEY = `mdb.${NAME}`;
-const EVENT_KEY = `.${DATA_KEY}`;
 
 const EVENT_SHOW_BS = 'show.bs.popover';
 const EVENT_SHOWN_BS = 'shown.bs.popover';
@@ -19,11 +17,13 @@ const EVENT_HIDE_BS = 'hide.bs.popover';
 const EVENT_HIDDEN_BS = 'hidden.bs.popover';
 const EVENT_INSERTED_BS = 'inserted.bs.popover';
 
-const EVENT_SHOW = `show${EVENT_KEY}`;
+const EXTENDED_EVENTS = [
-const EVENT_SHOWN = `shown${EVENT_KEY}`;
+  { name: 'show' },
-const EVENT_HIDE = `hide${EVENT_KEY}`;
+  { name: 'shown' },
-const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
+  { name: 'hide' },
-const EVENT_INSERTED = `inserted${EVENT_KEY}`;
+  { name: 'hidden' },
+  { name: 'inserted' },
+];
 
 const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="popover"]';
 
@@ -51,41 +51,11 @@ class Popover extends BSPopover {
 
   // Private
   _init() {
-    this._bindShowEvent();
+    this._bindMdbEvents();
-    this._bindShownEvent();
-    this._bindHideEvent();
-    this._bindHiddenEvent();
-    this._bindInsertedEvent();
   }
 
-  _bindShowEvent() {
+  _bindMdbEvents() {
-    EventHandler.on(this.element, EVENT_SHOW_BS, () => {
+    EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
-      EventHandler.trigger(this.element, EVENT_SHOW);
-    });
-  }
-
-  _bindShownEvent() {
-    EventHandler.on(this.element, EVENT_SHOWN_BS, () => {
-      EventHandler.trigger(this.element, EVENT_SHOWN);
-    });
-  }
-
-  _bindHideEvent() {
-    EventHandler.on(this.element, EVENT_HIDE_BS, () => {
-      EventHandler.trigger(this.element, EVENT_HIDE);
-    });
-  }
-
-  _bindHiddenEvent() {
-    EventHandler.on(this.element, EVENT_HIDDEN_BS, () => {
-      EventHandler.trigger(this.element, EVENT_HIDDEN);
-    });
-  }
-
-  _bindInsertedEvent() {
-    EventHandler.on(this.element, EVENT_INSERTED_BS, () => {
-      EventHandler.trigger(this.element, EVENT_INSERTED);
-    });
   }
 }
 

src/js/free/ripple.js

@@ -165,6 +165,10 @@ class Ripple {
   }
 
   _createRipple(event) {
+    if (this._element === null) {
+      return;
+    }
+
     if (!Manipulator.hasClass(this._element, CLASSNAME_RIPPLE)) {
       Manipulator.addClass(this._element, CLASSNAME_RIPPLE);
     }

src/js/free/toast.js

@@ -10,18 +10,13 @@ import BSToast from '../bootstrap/mdb-prefix/toast';
  */
 
 const NAME = 'toast';
-const DATA_KEY = `mdb.${NAME}`;
-const EVENT_KEY = `.${DATA_KEY}`;
 
 const EVENT_SHOW_BS = 'show.bs.toast';
 const EVENT_SHOWN_BS = 'shown.bs.toast';
 const EVENT_HIDE_BS = 'hide.bs.toast';
 const EVENT_HIDDEN_BS = 'hidden.bs.toast';
 
-const EVENT_SHOW = `show${EVENT_KEY}`;
+const EXTENDED_EVENTS = [{ name: 'show' }, { name: 'shown' }, { name: 'hide' }, { name: 'hidden' }];
-const EVENT_SHOWN = `shown${EVENT_KEY}`;
-const EVENT_HIDE = `hide${EVENT_KEY}`;
-const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
 
 const SELECTOR_TOAST = '.toast';
 
@@ -48,34 +43,11 @@ class Toast extends BSToast {
 
   // Private
   _init() {
-    this._bindShowEvent();
+    this._bindMdbEvents();
-    this._bindShownEvent();
-    this._bindHideEvent();
-    this._bindHiddenEvent();
   }
 
-  _bindShowEvent() {
+  _bindMdbEvents() {
-    EventHandler.on(this._element, EVENT_SHOW_BS, () => {
+    EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
-      EventHandler.trigger(this._element, EVENT_SHOW);
-    });
-  }
-
-  _bindShownEvent() {
-    EventHandler.on(this._element, EVENT_SHOWN_BS, () => {
-      EventHandler.trigger(this._element, EVENT_SHOWN);
-    });
-  }
-
-  _bindHideEvent() {
-    EventHandler.on(this._element, EVENT_HIDE_BS, () => {
-      EventHandler.trigger(this._element, EVENT_HIDE);
-    });
-  }
-
-  _bindHiddenEvent() {
-    EventHandler.on(this._element, EVENT_HIDDEN_BS, () => {
-      EventHandler.trigger(this._element, EVENT_HIDDEN);
-    });
   }
 }
 

src/js/free/tooltip.js

@@ -10,8 +10,6 @@ import SelectorEngine from '../mdb/dom/selector-engine';
  */
 
 const NAME = 'tooltip';
-const DATA_KEY = `mdb.${NAME}`;
-const EVENT_KEY = `.${DATA_KEY}`;
 
 const EVENT_HIDE_BS = 'hide.bs.tooltip';
 const EVENT_HIDDEN_BS = 'hidden.bs.tooltip';
@@ -19,11 +17,13 @@ const EVENT_SHOW_BS = 'show.bs.tooltip';
 const EVENT_SHOWN_BS = 'shown.bs.tooltip';
 const EVENT_INSERTED_BS = 'inserted.bs.tooltip';
 
-const EVENT_HIDE = `hide${EVENT_KEY}`;
+const EXTENDED_EVENTS = [
-const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
+  { name: 'show' },
-const EVENT_SHOW = `show${EVENT_KEY}`;
+  { name: 'shown' },
-const EVENT_SHOWN = `shown${EVENT_KEY}`;
+  { name: 'hide' },
-const EVENT_INSERTED = `inserted${EVENT_KEY}`;
+  { name: 'hidden' },
+  { name: 'inserted' },
+];
 
 const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="tooltip"]';
 
@@ -51,41 +51,11 @@ class Tooltip extends BSTooltip {
 
   // Private
   _init() {
-    this._bindShowEvent();
+    this._bindMdbEvents();
-    this._bindShownEvent();
-    this._bindHideEvent();
-    this._bindHiddenEvent();
-    this._bindHidePreventedEvent();
   }
 
-  _bindShowEvent() {
+  _bindMdbEvents() {
-    EventHandler.on(this.element, EVENT_SHOW_BS, () => {
+    EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
-      EventHandler.trigger(this.element, EVENT_SHOW);
-    });
-  }
-
-  _bindShownEvent() {
-    EventHandler.on(this.element, EVENT_SHOWN_BS, () => {
-      EventHandler.trigger(this.element, EVENT_SHOWN);
-    });
-  }
-
-  _bindHideEvent() {
-    EventHandler.on(this.element, EVENT_HIDE_BS, () => {
-      EventHandler.trigger(this.element, EVENT_HIDE);
-    });
-  }
-
-  _bindHiddenEvent() {
-    EventHandler.on(this.element, EVENT_HIDDEN_BS, () => {
-      EventHandler.trigger(this.element, EVENT_HIDDEN);
-    });
-  }
-
-  _bindHidePreventedEvent() {
-    EventHandler.on(this.element, EVENT_INSERTED_BS, () => {
-      EventHandler.trigger(this.element, EVENT_INSERTED);
-    });
   }
 }
 

src/js/mdb/dom/event-handler.js

@@ -232,6 +232,20 @@ const EventHandler = {
     addHandler(element, event, handler, delegationFn, true);
   },
 
+  extend(element, events, componentName) {
+    events.forEach((event) => {
+      EventHandler.on(element, `${event.name}.bs.${componentName}`, (e) => {
+        const eventParameters = {};
+        if (event.parametersToCopy) {
+          event.parametersToCopy.forEach((param) => {
+            eventParameters[param] = e[param];
+          });
+        }
+        EventHandler.trigger(element, `${event.name}.mdb.${componentName}`, eventParameters);
+      });
+    });
+  },
+
   off(element, originalTypeEvent, handler, delegationFn) {
     if (typeof originalTypeEvent !== 'string' || !element) {
       return;

src/scss/free/_buttons.scss

@@ -165,6 +165,7 @@
     box-shadow: none;
   }
 }
+
 // scss-docs-end btn-secondary
 
 // scss-docs-start btn-variant-loop
@@ -182,25 +183,22 @@
       map-get($value, 'text-color')
     );
 
+    --#{$prefix}btn-box-shadow-state: #{$btn-contextual-box-shadow-state-first-part
+        rgba(map-get($value, shadow-color), 0.3),
+      $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2)};
+
     :not(.btn-check) + &:hover,
     &:first-child:hover,
     &:focus-visible,
     &:hover {
-      box-shadow: $btn-contextual-box-shadow-state-first-part
+      box-shadow: var(--#{$prefix}btn-box-shadow-state);
-          rgba(map-get($value, shadow-color), 0.3),
-        $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
     }
 
     .btn-check:focus-visible + &,
     .btn-check:focus + &,
     &:focus {
-      box-shadow: $btn-contextual-box-shadow-state-first-part
+      box-shadow: var(--#{$prefix}btn-box-shadow-state);
-          rgba(map-get($value, shadow-color), 0.3),
+      background-color: var(--#{$prefix}btn-focus-bg);
-        $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
-      background-color: shade-color(
-        map-get($value, 'background-color'),
-        $btn-focus-bg-shade-amount
-      );
     }
 
     .btn-check:checked + &,
@@ -208,31 +206,25 @@
     &:active,
     &.active,
     &.show {
-      box-shadow: $btn-contextual-box-shadow-state-first-part
+      box-shadow: var(--#{$prefix}btn-box-shadow-state);
-          rgba(map-get($value, shadow-color), 0.3),
-        $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
 
       &:focus {
-        box-shadow: $btn-contextual-box-shadow-state-first-part
+        box-shadow: var(--#{$prefix}btn-box-shadow-state);
-            rgba(map-get($value, shadow-color), 0.3),
-          $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
       }
 
       &:hover {
-        background-color: shade-color(
+        background-color: var(--#{$prefix}btn-active-bg);
-          map-get($value, 'background-color'),
-          $btn-active-bg-shade-amount
-        );
       }
     }
 
     &:disabled,
     &.disabled,
     fieldset:disabled & {
-      box-shadow: $btn-contextual-box-shadow map-get($value, shadow-color);
+      box-shadow: var(--#{$prefix}btn-box-shadow);
     }
   }
 }
+
 // scss-docs-end btn-variant-loop
 
 // scss-docs-start btn-outline-variant-loop
@@ -245,19 +237,29 @@
       shade-color(map-get($value, 'text-color'), $btn-active-bg-shade-amount)
     );
 
-    border-color: map-get(map-get($buttons-outline, $color), 'border-color');
+    --#{$prefix}btn-border-color: #{map-get($value, 'border-color')};
+    --#{$prefix}btn-focus-border-color: #{shade-color(
+        map-get($value, 'border-color'),
+        $btn-focus-bg-shade-amount
+      )};
+    --#{$prefix}btn-hover-border-color: #{shade-color(
+        map-get($value, 'border-color'),
+        $btn-hover-bg-shade-amount
+      )};
+
+    border-color: var(--#{$prefix}btn-border-color);
 
     :not(.btn-check) + &:hover,
     &:first-child:hover,
     &:focus-visible,
     &:hover {
-      border-color: shade-color(map-get($value, 'border-color'), $btn-hover-bg-shade-amount);
+      border-color: var(--#{$prefix}btn-hover-border-color);
     }
 
     .btn-check:focus-visible + &,
     .btn-check:focus + &,
     &:focus {
-      border-color: shade-color(map-get($value, 'border-color'), $btn-focus-bg-shade-amount);
+      border-color: var(--#{$prefix}btn-focus-border-color);
     }
 
     .btn-check:checked + &,
@@ -265,20 +267,21 @@
     &:active,
     &.active,
     &.show {
-      border-color: shade-color(map-get($value, 'border-color'), $btn-active-bg-shade-amount);
+      border-color: var(--#{$prefix}btn-active-border-color);
 
       &:focus {
-        border-color: shade-color(map-get($value, 'border-color'), $btn-focus-bg-shade-amount);
+        border-color: var(--#{$prefix}btn-focus-border-color);
       }
     }
 
     &:disabled,
     &.disabled,
     fieldset:disabled & {
-      border-color: map-get(map-get($buttons-outline, $color), 'border-color');
+      border-color: var(--#{$prefix}btn-border-color);
     }
   }
 }
+
 // scss-docs-end btn-outline-variant-loop
 
 //