Release 3.10.1

README.txt

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

css/mdb.min.css

@@ -1,6 +1,6 @@
 /*!
  * MDB5
- *   Version: FREE 3.10.0
+ *   Version: FREE 3.10.1
  * 
  * 
  *   Copyright: Material Design for Bootstrap

index.html

@@ -22,20 +22,12 @@
     <div class="container">
       <div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
         <div class="text-center">
-          <img
+          <img class="mb-2" src="https://bf-sale.mdbgo.io/bf.png" width="800" height="450">
-            class="mb-4"
+          <h2 class="fw-bold">Black Friday Sale</h2>
-            src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
+          <h5 class="mb-3">Get MDB Pro with discounts <span class="text-danger">up to 95%</span>.</h5>
-            style="width: 250px; height: 90px;"
+          <p class="mb-3 fw-bold"> Hurry up the offer is limited!</p>
-          />
+          
-          <h5 class="mb-3">Thank you for using our product. We're glad you're with us.</h5>
+          <a class="btn btn-black btn-lg mt-2" href="https://mdbootstrap.com/bf/sale/" target="_blank" role="button"> <i class="fas fa-shopping-cart"></i> Get the offer</a>
-          <p class="mb-3">MDB Team</p>
-          <a
-            class="btn btn-primary btn-lg"
-            href="https://mdbootstrap.com/docs/standard/getting-started/"
-            target="_blank"
-            role="button"
-            >Start MDB tutorial</a
-          >
         </div>
       </div>
     </div>

package.json

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

src/js/free/input.js

@@ -131,6 +131,7 @@ class Input {
     } else {
       this._getLabelWidth();
       this._getLabelPositionInInputGroup();
+      this._toggleDefaultDatePlaceholder();
     }
   }
 
@@ -166,6 +167,22 @@ class Input {
     });
   }
 
+  _toggleDefaultDatePlaceholder(input = this.input) {
+    const isTypeDate = input.getAttribute('type') === 'date';
+
+    if (!isTypeDate) {
+      return;
+    }
+
+    const isInputFocused = document.activeElement === input;
+
+    if (!isInputFocused && !input.value) {
+      input.style.opacity = 0;
+    } else {
+      input.style.opacity = 1;
+    }
+  }
+
   _showPlaceholder() {
     Manipulator.addClass(this.input, CLASSNAME_PLACEHOLDER_ACTIVE);
   }
@@ -232,6 +249,7 @@ class Input {
       if (input.value !== '') {
         Manipulator.addClass(input, CLASSNAME_ACTIVE);
       }
+      this._toggleDefaultDatePlaceholder(input);
     });
   }
 
@@ -258,9 +276,11 @@ class Input {
 
   _deactivate(event) {
     const input = event ? event.target : this.input;
+
     if (input.value === '') {
       input.classList.remove(CLASSNAME_ACTIVE);
     }
+    this._toggleDefaultDatePlaceholder(input);
   }
 
   static activate(instance) {

src/js/free/ripple.js

@@ -61,12 +61,15 @@ class Ripple {
   constructor(element, options) {
     this._element = element;
     this._options = this._getConfig(options);
+
     if (this._element) {
       Data.setData(element, DATA_KEY, this);
       Manipulator.addClass(this._element, CLASSNAME_RIPPLE);
     }
 
     this._clickHandler = this._createRipple.bind(this);
+    this._rippleTimer = null;
+    this._isMinWidthSet = false;
 
     this.init();
   }
@@ -100,7 +103,10 @@ class Ripple {
       }
     });
 
-    this._element.style.minWidth = `${this._element.offsetWidth}px`;
+    if (!this._element.style.minWidth) {
+      Manipulator.style(this._element, { 'min-width': `${this._element.offsetWidth}px` });
+      this._isMinWidthSet = true;
+    }
 
     Manipulator.addClass(this._element, CLASSNAME_RIPPLE);
     this._options = this._getConfig();
@@ -112,6 +118,10 @@ class Ripple {
   }
 
   _createRipple(event) {
+    if (!Manipulator.hasClass(this._element, CLASSNAME_RIPPLE)) {
+      Manipulator.addClass(this._element, CLASSNAME_RIPPLE);
+    }
+
     const { layerX, layerY } = event;
     const offsetX = layerX;
     const offsetY = layerY;
@@ -164,9 +174,23 @@ class Ripple {
   }
 
   _removeHTMLRipple({ ripple, duration }) {
-    setTimeout(() => {
+    if (this._rippleTimer) {
+      clearTimeout(this._rippleTimer);
+      this._rippleTimer = null;
+    }
+    this._rippleTimer = setTimeout(() => {
       if (ripple) {
         ripple.remove();
+        if (this._element) {
+          SelectorEngine.find(`.${CLASSNAME_RIPPLE_WAVE}`, this._element).forEach((rippleEl) => {
+            rippleEl.remove();
+          });
+          if (this._isMinWidthSet) {
+            Manipulator.style(this._element, { 'min-width': '' });
+            this._isMinWidthSet = false;
+          }
+          Manipulator.removeClass(this._element, CLASSNAME_RIPPLE);
+        }
       }
     }, duration);
   }