Release 7.1.0

README.txt

@@ -1,8 +1,8 @@
 MDB5
-Version: PRO 7.0.0
+Version: PRO 7.1.0
 
 Documentation:
 https://mdbootstrap.com/docs/standard/
 
 Contact:
-office@mdbootstrap.com
+contact@mdbootstrap.com

js/mdb.es.min.js

@@ -1,6 +1,9 @@
+var Rr = Object.defineProperty;
+var xr = (n, t, e) => t in n ? Rr(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var $e = (n, t, e) => (xr(n, typeof t != "symbol" ? t + "" : t, e), e);
 /*!
 * MDB5
-* Version: FREE 7.0.0
+* Version: FREE 7.1.0
 *
 *
 * Copyright: Material Design for Bootstrap
@@ -16,9 +19,6 @@
 * Contact: contact@mdbootstrap.com
 *
 */
-var Rr = Object.defineProperty;
-var xr = (n, t, e) => t in n ? Rr(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
-var $e = (n, t, e) => (xr(n, typeof t != "symbol" ? t + "" : t, e), e);
 const Ie = (() => {
   const n = {};
   let t = 1;

package.json

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

src/js/autoinit/callbacks/charts.js

@@ -1,61 +0,0 @@
-import Manipulator from '../../mdb/dom/manipulator';
-import SelectorEngine from '../../mdb/dom/selector-engine';
-import DEFAULT_OPTIONS from '../../pro/charts/chartsDefaults';
-
-const chartsCallback = (Component, initSelector) => {
-  // eslint-disable-next-line consistent-return
-  const IS_COMPLEX = (data) => {
-    return (
-      (data[0] === '{' && data[data.length - 1] === '}') ||
-      (data[0] === '[' && data[data.length - 1] === ']')
-    );
-  };
-
-  const CONVERT_DATA_TYPE = (data) => {
-    if (typeof data !== 'string') return data;
-    if (IS_COMPLEX(data)) {
-      return JSON.parse(data.replace(/'/g, '"'));
-    }
-    return data;
-  };
-
-  const PARSE_DATA = (data) => {
-    const dataset = {};
-    Object.keys(data).forEach((property) => {
-      if (property.match(/dataset.*/)) {
-        const chartProperty = property.slice(7, 8).toLowerCase().concat(property.slice(8));
-        dataset[chartProperty] = CONVERT_DATA_TYPE(data[property]);
-      }
-    });
-    return dataset;
-  };
-
-  SelectorEngine.find(initSelector).forEach((el) => {
-    if (
-      !Component.getInstance(el) &&
-      Manipulator.getDataAttribute(el, 'chart') !== 'bubble' &&
-      Manipulator.getDataAttribute(el, 'chart') !== 'scatter'
-    ) {
-      const dataSet = Manipulator.getDataAttributes(el);
-      const dataAttr = {
-        data: {
-          datasets: [PARSE_DATA(dataSet)],
-        },
-      };
-      if (dataSet.chart) {
-        dataAttr.type = dataSet.chart;
-      }
-      if (dataSet.labels) {
-        dataAttr.data.labels = JSON.parse(dataSet.labels.replace(/'/g, '"'));
-      }
-
-      return new Component(el, {
-        ...dataAttr,
-        ...DEFAULT_OPTIONS[dataAttr.type],
-      });
-    }
-    return null;
-  });
-};
-
-export default chartsCallback;

src/js/autoinit/callbacks/pro.js

@@ -1,121 +0,0 @@
-import EventHandler from '../../mdb/dom/event-handler';
-import SelectorEngine from '../../mdb/dom/selector-engine';
-import { getElementFromSelector, isVisible, getSelectorFromElement } from '../../mdb/util';
-import { enableDismissTrigger } from '../../bootstrap/mdb-prefix/util/component-functions';
-import {
-  buttonCallback,
-  carouselCallback,
-  collapseCallback,
-  dropdownCallback,
-  offcanvasCallback,
-  scrollspyCallback,
-  tabCallback,
-} from './free';
-
-const alertCallback = (component, initSelector) => {
-  const Alert = component;
-
-  enableDismissTrigger(Alert, 'close');
-  // MDB init
-  SelectorEngine.find(initSelector).forEach((element) => {
-    return Alert.getOrCreateInstance(element);
-  });
-};
-
-const lightboxCallback = (component, initSelector) => {
-  const EVENT_CLICK_DATA_API = `click.mdb.${component.name}.data-api`;
-  const SELECTOR_DATA_INIT = initSelector;
-  const SELECTOR_TOGGLE = `${SELECTOR_DATA_INIT} img:not(.lightbox-disabled)`;
-  const Lightbox = component;
-
-  SelectorEngine.find(SELECTOR_DATA_INIT).forEach((el) => new Lightbox(el));
-  EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_TOGGLE, Lightbox.toggle());
-};
-
-const modalCallback = (component, initSelector) => {
-  const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
-  const OPEN_SELECTOR = '.modal.show';
-  const Modal = component;
-  const EVENT_SHOW = `show.bs.${component.name}`;
-  const EVENT_HIDDEN = `hidden.bs.${component.name}`;
-
-  EventHandler.on(document, EVENT_CLICK_DATA_API, initSelector, function (event) {
-    const target = getElementFromSelector(this);
-
-    if (['A', 'AREA'].includes(this.tagName)) {
-      event.preventDefault();
-    }
-
-    EventHandler.one(target, EVENT_SHOW, (showEvent) => {
-      if (showEvent.defaultPrevented) {
-        // only register focus restorer if modal will actually get shown
-        return;
-      }
-
-      EventHandler.one(target, EVENT_HIDDEN, () => {
-        if (isVisible(this)) {
-          this.focus();
-        }
-      });
-    });
-
-    // avoid conflict when clicking modal toggler while another one is open
-    const alreadyOpenedModals = SelectorEngine.find(OPEN_SELECTOR);
-    alreadyOpenedModals.forEach((modal) => {
-      if (!modal.classList.contains('modal-non-invasive-show')) {
-        Modal.getInstance(modal).hide();
-      }
-    });
-
-    const data = Modal.getOrCreateInstance(target);
-
-    data.toggle(this);
-  });
-
-  enableDismissTrigger(Modal);
-
-  SelectorEngine.find(initSelector).forEach((el) => {
-    const selector = getSelectorFromElement(el);
-    const selectorElement = SelectorEngine.findOne(selector);
-
-    Modal.getOrCreateInstance(selectorElement);
-  });
-};
-
-const sidenavCallback = (component, initSelector) => {
-  const SELECTOR_DATA_INIT = initSelector;
-  const SELECTOR_TOGGLE = '[data-mdb-toggle="sidenav"]';
-  const Sidenav = component;
-
-  EventHandler.on(document, 'click', SELECTOR_TOGGLE, Sidenav.toggleSidenav());
-
-  SelectorEngine.find(SELECTOR_DATA_INIT).forEach((sidenav) => {
-    return Sidenav.getOrCreateInstance(sidenav);
-  });
-};
-
-const toastCallback = (component, initSelector) => {
-  const SELECTOR_DATA_INIT = initSelector;
-  const Toast = component;
-
-  enableDismissTrigger(Toast);
-
-  SelectorEngine.find(SELECTOR_DATA_INIT).forEach((toast) => {
-    return Toast.getOrCreateInstance(toast);
-  });
-};
-
-export {
-  alertCallback,
-  lightboxCallback,
-  buttonCallback,
-  carouselCallback,
-  collapseCallback,
-  dropdownCallback,
-  modalCallback,
-  offcanvasCallback,
-  scrollspyCallback,
-  sidenavCallback,
-  tabCallback,
-  toastCallback,
-};

src/js/autoinit/index.pro.js

@@ -1,7 +0,0 @@
-import defaultInitSelectors from './initSelectors/pro';
-import { InitMDB } from './init';
-
-const initMDBInstance = new InitMDB(defaultInitSelectors);
-const initMDB = initMDBInstance.initMDB;
-
-export default initMDB;

src/js/autoinit/initSelectors/pro.js

@@ -1,158 +0,0 @@
-import {
-  alertCallback,
-  lightboxCallback,
-  sidenavCallback,
-  modalCallback,
-  toastCallback,
-} from '../callbacks/pro';
-import * as freeSelectors from './free';
-import chartsCallback from '../callbacks/charts';
-
-const defaultInitSelectors = {
-  ...freeSelectors.default,
-  chart: {
-    name: 'Chart',
-    selector: '[data-mdb-chart-init]',
-    isToggler: false,
-    advanced: chartsCallback,
-  },
-  chips: {
-    name: 'ChipsInput',
-    selector: '[data-mdb-chips-input-init]',
-    isToggler: false,
-  },
-  chip: {
-    name: 'Chip',
-    selector: '[data-mdb-chip-init]',
-    isToggler: false,
-    onInit: 'init',
-  },
-  datatable: {
-    name: 'Datatable',
-    selector: '[data-mdb-datatable-init]',
-    isToggler: false,
-  },
-  datetimepicker: {
-    name: 'Datetimepicker',
-    selector: '[data-mdb-datetimepicker-init]',
-    isToggler: false,
-  },
-  datepicker: {
-    name: 'Datepicker',
-    selector: '[data-mdb-datepicker-init]',
-    isToggler: false,
-  },
-  loading: {
-    name: 'Loading',
-    selector: '[data-mdb-loading-init]',
-    isToggler: false,
-  },
-  multiRangeSlider: {
-    name: 'MultiRangeSlider',
-    selector: '[data-mdb-multi-range-slider-init]',
-    isToggler: false,
-  },
-  select: {
-    name: 'Select',
-    selector: '[data-mdb-select-init]',
-    isToggler: false,
-  },
-  timepicker: {
-    name: 'Timepicker',
-    selector: '[data-mdb-timepicker-init]',
-    isToggler: false,
-  },
-  touch: {
-    name: 'Touch',
-    selector: '[data-mdb-touch-init]',
-    isToggler: false,
-  },
-  alert: {
-    name: 'Alert',
-    selector: '[data-mdb-alert-init]',
-    isToggler: true,
-    callback: alertCallback,
-  },
-  animation: {
-    name: 'Animate',
-    selector: '[data-mdb-animation-init]',
-    isToggler: false,
-    onInit: 'init',
-  },
-  clipboard: {
-    name: 'Clipboard',
-    selector: '[data-mdb-clipboard-init]',
-    isToggler: false,
-  },
-  infiniteScroll: {
-    name: 'InfiniteScroll',
-    selector: '[data-mdb-infinite-scroll-init]',
-    isToggler: false,
-  },
-  lazyLoad: {
-    name: 'LazyLoad',
-    selector: '[data-mdb-lazy-load-init]',
-    isToggler: false,
-  },
-  lightbox: {
-    name: 'Lightbox',
-    selector: '[data-mdb-lightbox-init]',
-    isToggler: true,
-    callback: lightboxCallback,
-  },
-  modal: {
-    name: 'Modal',
-    selector: '[data-mdb-modal-init]',
-    isToggler: true,
-    callback: modalCallback,
-  },
-  navbar: {
-    name: 'Navbar',
-    selector: '[data-mdb-navbar-init]',
-    isToggler: false,
-  },
-  perfectScrollbar: {
-    name: 'PerfectScrollbar',
-    selector: '[data-mdb-perfect-scrollbar-init]',
-    isToggler: false,
-  },
-  popconfirm: {
-    name: 'Popconfirm',
-    selector: '[data-mdb-popconfirm-init]',
-    isToggler: false,
-  },
-  rating: {
-    name: 'Rating',
-    selector: '[data-mdb-rating-init]',
-    isToggler: false,
-  },
-  sidenav: {
-    name: 'Sidenav',
-    selector: '[data-mdb-sidenav-init]',
-    isToggler: true,
-    callback: sidenavCallback,
-  },
-  smoothScroll: {
-    name: 'SmoothScroll',
-    selector: '[data-mdb-smooth-scroll-init]',
-    isToggler: false,
-  },
-  stepper: {
-    name: 'Stepper',
-    selector: '[data-mdb-stepper-init]',
-    isToggler: false,
-  },
-  sticky: {
-    name: 'Sticky',
-    selector: '[data-mdb-sticky-init]',
-    isToggler: false,
-  },
-  toast: {
-    name: 'Toast',
-    selector: '[data-mdb-toast-init]',
-    isToggler: true,
-    callback: toastCallback,
-  },
-};
-
-export default defaultInitSelectors;

src/scss/free/_root.scss

@@ -20,6 +20,7 @@
   --#{$prefix}scrollbar-rail-bg: #{$scrollbar-rail-bg};
   --#{$prefix}scrollbar-thumb-bg: #{$scrollbar-thumb-bg};
   --#{$prefix}picker-header-bg: #{$picker-header-bg};
+  --#{$prefix}timepicker-clock-face-bg: #{$timepicker-clock-face-bg};
   --#{$prefix}sidenav-backdrop-opacity: #{$sidenav-backdrop-opacity};
   --#{$prefix}form-control-border-color: #{$form-control-border-color};
   --#{$prefix}form-control-label-color: #{$form-control-label-color};
@@ -46,6 +47,7 @@
     --#{$prefix}scrollbar-rail-bg: #{$scrollbar-rail-bg-dark};
     --#{$prefix}scrollbar-thumb-bg: #{$scrollbar-thumb-bg-dark};
     --#{$prefix}picker-header-bg: #{$picker-header-bg-dark};
+    --#{$prefix}timepicker-clock-face-bg: #{$timepicker-clock-face-bg-dark};
     --#{$prefix}sidenav-backdrop-opacity: #{$sidenav-backdrop-opacity-dark};
     --#{$prefix}form-control-border-color: #{$form-control-border-color-dark};
     --#{$prefix}form-control-label-color: #{$form-control-label-color-dark};

src/scss/free/_variables-dark.scss

@@ -61,6 +61,7 @@ $highlight-bg-color-dark: tint-color($gray-900, 10%) !default;
 $scrollbar-rail-bg-dark: $gray-500 !default;
 $scrollbar-thumb-bg-dark: $gray-200 !default;
 $picker-header-bg-dark: #323232 !default;
+$timepicker-clock-face-bg-dark: $gray-700 !default;
 $sidenav-backdrop-opacity-dark: 0.5 !default;
 $form-control-border-color-dark: rgba(255, 255, 255, 0.7) !default;
 $form-control-label-color-dark: $gray-400 !default;

src/scss/free/_variables.scss

@@ -728,7 +728,6 @@ $link-active-color: shift-color($link-color, $link-shade-active-percentage) !def
 // Define common box shadow and border and more.
 
 // scss-docs-start border-variables
-$border-color: $gray-400;
 $border-width-alternate: 2px !default;
 $border-style-alternate: solid !default;
 $border-color-alternate: hsl(0, 0%, 96%) !default;
@@ -1675,6 +1674,7 @@ $highlight-bg-color: $gray-200 !default;
 $scrollbar-rail-bg: $gray-200 !default;
 $scrollbar-thumb-bg: $gray-500 !default;
 $picker-header-bg: $primary !default;
+$timepicker-clock-face-bg: var(--#{$prefix}secondary-bg) !default;
 $sidenav-backdrop-opacity: 0.1 !default;
 $form-control-border-color: $gray-400 !default;
 $form-control-label-color: $gray-600 !default;