Release: 8.0.0

README.txt

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

js/mdb.umd.min.js

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-ui-kit",
-  "version": "7.3.2",
+  "version": "8.0.0",
   "type": "module",
   "main": "./js/mdb.umd.min.js",
   "module": "./js/mdb.es.min.js",

src/js/mdb/perfect-scrollbar/handlers/drag-thumb.js

@@ -1,23 +1,9 @@
-/* eslint-disable */
-
-import * as CSS from '../lib/css';
-import * as DOM from '../lib/dom';
 import cls, { addScrollingClass, removeScrollingClass } from '../lib/class-names';
 import updateGeometry from '../update-geometry';
-import { toInt } from '../lib/util';
 
-export default function (i) {
-  bindMouseScrollHandler(i, [
-    'containerWidth',
-    'contentWidth',
-    'pageX',
-    'railXWidth',
-    'scrollbarX',
-    'scrollbarXWidth',
-    'scrollLeft',
-    'x',
-    'scrollbarXRail',
-  ]);
+let activeSlider = null; // Variable to track the currently active slider
+
+export default function setupScrollHandlers(i) {
   bindMouseScrollHandler(i, [
     'containerHeight',
     'contentHeight',
@@ -29,70 +15,96 @@ export default function (i) {
     'y',
     'scrollbarYRail',
   ]);
+
+  bindMouseScrollHandler(i, [
+    'containerWidth',
+    'contentWidth',
+    'pageX',
+    'railXWidth',
+    'scrollbarX',
+    'scrollbarXWidth',
+    'scrollLeft',
+    'x',
+    'scrollbarXRail',
+  ]);
 }
 
 function bindMouseScrollHandler(
   i,
   [
-    containerHeight,
-    contentHeight,
-    pageY,
-    railYHeight,
-    scrollbarY,
-    scrollbarYHeight,
-    scrollTop,
-    y,
-    scrollbarYRail,
+    containerDimension,
+    contentDimension,
+    pageAxis,
+    railDimension,
+    scrollbarAxis,
+    scrollbarDimension,
+    scrollAxis,
+    axis,
+    scrollbarRail,
   ]
 ) {
   const element = i.element;
-
-  let startingScrollTop = null;
-  let startingMousePageY = null;
+  let startingScrollPosition = null;
+  let startingMousePagePosition = null;
   let scrollBy = null;
 
-  function mouseMoveHandler(e) {
+  function moveHandler(e) {
     if (e.touches && e.touches[0]) {
-      e[pageY] = e.touches[0].pageY;
+      e[pageAxis] = e.touches[0][`page${axis.toUpperCase()}`];
     }
-    element[scrollTop] = startingScrollTop + scrollBy * (e[pageY] - startingMousePageY);
-    addScrollingClass(i, y);
+
+    // Only move if the active slider is the one we started with
+    if (activeSlider === scrollbarAxis) {
+      element[scrollAxis] =
+        startingScrollPosition + scrollBy * (e[pageAxis] - startingMousePagePosition);
+      addScrollingClass(i, axis);
       updateGeometry(i);
 
       e.stopPropagation();
       e.preventDefault();
     }
-
-  function mouseUpHandler() {
-    removeScrollingClass(i, y);
-    i[scrollbarYRail].classList.remove(cls.state.clicking);
-    i.event.unbind(i.ownerDocument, 'mousemove', mouseMoveHandler);
   }
 
-  function bindMoves(e, touchMode) {
-    startingScrollTop = element[scrollTop];
-    if (touchMode && e.touches) {
-      e[pageY] = e.touches[0].pageY;
+  function endHandler() {
+    removeScrollingClass(i, axis);
+    i[scrollbarRail].classList.remove(cls.state.clicking);
+    document.removeEventListener('mousemove', moveHandler);
+    document.removeEventListener('mouseup', endHandler);
+    document.removeEventListener('touchmove', moveHandler);
+    document.removeEventListener('touchend', endHandler);
+    activeSlider = null; // Reset active slider when interaction ends
   }
-    startingMousePageY = e[pageY];
-    scrollBy = (i[contentHeight] - i[containerHeight]) / (i[railYHeight] - i[scrollbarYHeight]);
-    if (!touchMode) {
-      i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
-      i.event.once(i.ownerDocument, 'mouseup', mouseUpHandler);
-      e.preventDefault();
+
+  function bindMoves(e) {
+    if (activeSlider === null) {
+      // Only bind if no slider is currently active
+      activeSlider = scrollbarAxis; // Set current slider as active
+
+      startingScrollPosition = element[scrollAxis];
+      if (e.touches) {
+        e[pageAxis] = e.touches[0][`page${axis.toUpperCase()}`];
+      }
+      startingMousePagePosition = e[pageAxis];
+      scrollBy =
+        (i[contentDimension] - i[containerDimension]) / (i[railDimension] - i[scrollbarDimension]);
+
+      if (!e.touches) {
+        document.addEventListener('mousemove', moveHandler);
+        document.addEventListener('mouseup', endHandler);
       } else {
-      i.event.bind(i.ownerDocument, 'touchmove', mouseMoveHandler);
+        document.addEventListener('touchmove', moveHandler, { passive: false });
+        document.addEventListener('touchend', endHandler);
       }
 
-    i[scrollbarYRail].classList.add(cls.state.clicking);
+      i[scrollbarRail].classList.add(cls.state.clicking);
+    }
 
     e.stopPropagation();
+    if (e.cancelable) {
+      e.preventDefault();
+    }
   }
 
-  i.event.bind(i[scrollbarY], 'mousedown', (e) => {
-    bindMoves(e);
-  });
-  i.event.bind(i[scrollbarY], 'touchstart', (e) => {
-    bindMoves(e, true);
-  });
+  i[scrollbarAxis].addEventListener('mousedown', bindMoves);
+  i[scrollbarAxis].addEventListener('touchstart', bindMoves);
 }

src/js/mdb/perfect-scrollbar/handlers/touch.js

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import updateGeometry from '../update-geometry';
 import cls from '../lib/class-names';
 import * as CSS from '../lib/css';
@@ -11,6 +10,13 @@ export default function (i) {
 
   const element = i.element;
 
+  const state = {
+    startOffset: {},
+    startTime: 0,
+    speed: {},
+    easingLoop: null,
+  };
+
   function shouldPrevent(deltaX, deltaY) {
     const scrollTop = Math.floor(element.scrollTop);
     const scrollLeft = element.scrollLeft;
@@ -18,18 +24,13 @@ export default function (i) {
     const magnitudeY = Math.abs(deltaY);
 
     if (magnitudeY > magnitudeX) {
-      // user is perhaps trying to swipe up/down the page
-
       if (
         (deltaY < 0 && scrollTop === i.contentHeight - i.containerHeight) ||
         (deltaY > 0 && scrollTop === 0)
       ) {
-        // set prevent for mobile Chrome refresh
         return window.scrollY === 0 && deltaY > 0 && env.isChrome;
       }
     } else if (magnitudeX > magnitudeY) {
-      // user is perhaps trying to swipe left/right across the page
-
       if (
         (deltaX < 0 && scrollLeft === i.contentWidth - i.containerWidth) ||
         (deltaX > 0 && scrollLeft === 0)
@@ -48,21 +49,18 @@ export default function (i) {
     updateGeometry(i);
   }
 
-  let startOffset = {};
-  let startTime = 0;
-  let speed = {};
-  let easingLoop = null;
-
   function getTouch(e) {
     if (e.targetTouches) {
       return e.targetTouches[0];
-    } else {
+    }
     // Maybe IE pointer
     return e;
   }
-  }
 
   function shouldHandle(e) {
+    if (e.target === i.scrollbarX || e.target === i.scrollbarY) {
+      return false;
+    }
     if (e.pointerType && e.pointerType === 'pen' && e.buttons === 0) {
       return false;
     }
@@ -82,13 +80,13 @@ export default function (i) {
 
     const touch = getTouch(e);
 
-    startOffset.pageX = touch.pageX;
-    startOffset.pageY = touch.pageY;
+    state.startOffset.pageX = touch.pageX;
+    state.startOffset.pageY = touch.pageY;
 
-    startTime = new Date().getTime();
+    state.startTime = new Date().getTime();
 
-    if (easingLoop !== null) {
-      clearInterval(easingLoop);
+    if (state.easingLoop !== null) {
+      clearInterval(state.easingLoop);
     }
   }
 
@@ -143,53 +141,57 @@ export default function (i) {
 
       const currentOffset = { pageX: touch.pageX, pageY: touch.pageY };
 
-      const differenceX = currentOffset.pageX - startOffset.pageX;
-      const differenceY = currentOffset.pageY - startOffset.pageY;
+      const differenceX = currentOffset.pageX - state.startOffset.pageX;
+      const differenceY = currentOffset.pageY - state.startOffset.pageY;
 
       if (shouldBeConsumedByChild(e.target, differenceX, differenceY)) {
         return;
       }
 
       applyTouchMove(differenceX, differenceY);
-      startOffset = currentOffset;
+      state.startOffset = currentOffset;
 
       const currentTime = new Date().getTime();
 
-      const timeGap = currentTime - startTime;
+      const timeGap = currentTime - state.startTime;
       if (timeGap > 0) {
-        speed.x = differenceX / timeGap;
-        speed.y = differenceY / timeGap;
-        startTime = currentTime;
+        state.speed.x = differenceX / timeGap;
+        state.speed.y = differenceY / timeGap;
+        state.startTime = currentTime;
       }
 
       if (shouldPrevent(differenceX, differenceY)) {
+        // Prevent the default behavior if the event is cancelable
+        if (e.cancelable) {
           e.preventDefault();
         }
       }
     }
+  }
+
   function touchEnd() {
     if (i.settings.swipeEasing) {
-      clearInterval(easingLoop);
-      easingLoop = setInterval(function () {
+      clearInterval(state.easingLoop);
+      state.easingLoop = setInterval(() => {
         if (i.isInitialized) {
-          clearInterval(easingLoop);
+          clearInterval(state.easingLoop);
           return;
         }
 
-        if (!speed.x && !speed.y) {
-          clearInterval(easingLoop);
+        if (!state.speed.x && !state.speed.y) {
+          clearInterval(state.easingLoop);
           return;
         }
 
-        if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
-          clearInterval(easingLoop);
+        if (Math.abs(state.speed.x) < 0.01 && Math.abs(state.speed.y) < 0.01) {
+          clearInterval(state.easingLoop);
           return;
         }
 
-        applyTouchMove(speed.x * 30, speed.y * 30);
+        applyTouchMove(state.speed.x * 30, state.speed.y * 30);
 
-        speed.x *= 0.8;
-        speed.y *= 0.8;
+        state.speed.x *= 0.8;
+        state.speed.y *= 0.8;
       }, 10);
     }
   }

src/scss/free/_flag.scss

@@ -1,13 +1,3 @@
-/*!
- * # Semantic UI 2.4.2 - Flag
- * http://github.com/semantic-org/semantic-ui/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
 /*******************************
              Flag
 *******************************/

src/scss/free/_nav.scss

@@ -54,6 +54,7 @@
 
 .nav-pills {
   margin-left: -$nav-pills-margin;
+  margin-right: -$nav-pills-margin;
 
   .nav-link {
     --#{$prefix}nav-pills-link-border-radius: #{$nav-pills-link-border-radius};

src/scss/free/_progress.scss

@@ -4,3 +4,54 @@
   border-radius: 0;
   box-shadow: none;
 }
+
+.progress-circular {
+  --#{$prefix}progress-circular-size: #{$progress-circular-size};
+  --#{$prefix}progress-circular-bar-width: #{$progress-circular-bar-width};
+  --#{$prefix}progress-circular-color: var(--#{$prefix}emphasis-color);
+
+  position: relative;
+  width: var(--#{$prefix}progress-circular-size);
+  height: var(--#{$prefix}progress-circular-size);
+  background-color: transparent;
+  display: inline-block;
+
+  .progress-bar {
+    background-color: var(--#{$prefix}progress-bar-bg);
+  }
+
+  .progress-bar::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    box-sizing: border-box;
+
+    background: conic-gradient(
+      transparent calc(var(--percentage) * 1%),
+      var(--#{$prefix}progress-bg) 0%
+    );
+    -webkit-mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--#{$prefix}progress-circular-bar-width)),
+      black calc(100% - var(--#{$prefix}progress-circular-bar-width) + 1px)
+    );
+    mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--#{$prefix}progress-circular-bar-width)),
+      black calc(100% - var(--#{$prefix}progress-circular-bar-width) + 1px)
+    );
+    background-color: inherit;
+  }
+
+  .progress-label {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--#{$prefix}progress-circular-color);
+  }
+}

src/scss/free/_variables.scss

@@ -1561,6 +1561,8 @@ $alert-border-radius: $border-radius-lg !default;
 // scss-docs-start progress-variables
 $progress-height: 4px !default;
 $progress-bar-color: color-contrast($primary) !default;
+$progress-circular-size: 48px !default;
+$progress-circular-bar-width: 4px !default;
 // scss-docs-end progress-variables
 
 // Range

src/scss/free/forms/_validation.scss

@@ -89,9 +89,11 @@
           box-shadow: 0 1px 0 0 $color;
         }
         &:focus ~ .form-notch .form-notch-leading {
+          border-color: $color;
           box-shadow: -1px 0 0 0 $color, 0 1px 0 0 $color, 0 -1px 0 0 $color;
         }
         &:focus ~ .form-notch .form-notch-trailing {
+          border-color: $color;
           box-shadow: 1px 0 0 0 $color, 0 -1px 0 0 $color, 0 1px 0 0 $color;
         }