release: 7.3.1

README.txt

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

js/mdb.es.min.js

@@ -1197,7 +1197,9 @@ const initComponent = (component, manualInit = false) => {
   if (!component || InitializedComponents.get(component.NAME)) {
     return;
   }
-  InitializedComponents.set(component.NAME);
+  if (!manualInit) {
+    InitializedComponents.set(component.NAME);
+  }
   const thisComponent = _defaultInitSelectors[component.NAME] || null;
   const isToggler = (thisComponent == null ? void 0 : thisComponent.isToggler) || false;
   defineJQueryPlugin(component);
@@ -6052,8 +6054,9 @@ class Input extends BaseComponent2 {
     });
   }
   _toggleDefaultDatePlaceholder(input = this.input) {
-    const isTypeDate = input.getAttribute("type") === "date";
-    if (!isTypeDate) {
+    const type = input.getAttribute("type");
+    const typesWithPlaceholder = ["date", "time", "datetime-local", "month", "week"];
+    if (!typesWithPlaceholder.includes(type)) {
       return;
     }
     const isInputFocused = document.activeElement === input;
@@ -6118,6 +6121,9 @@ class Input extends BaseComponent2 {
   _activate(event) {
     onDOMContentLoaded(() => {
       this._getElements(event);
+      if (!this._element) {
+        return;
+      }
       const input = event ? event.target : this.input;
       if (input.value !== "") {
         Manipulator$1.addClass(input, CLASSNAME_ACTIVE$1);
@@ -6126,9 +6132,17 @@ class Input extends BaseComponent2 {
     });
   }
   _getElements(event) {
+    let initialized;
     if (event) {
       this._element = event.target.parentNode;
       this._label = SelectorEngine$1.findOne("label", this._element);
+      initialized = Manipulator$1.getDataAttribute(
+        this._element,
+        `${this.constructor.NAME}-initialized`
+      );
+    }
+    if (!initialized) {
+      return;
     }
     if (event && this._label) {
       const prevLabelWidth = this._labelWidth;
@@ -7496,7 +7510,7 @@ const inputCallback = (component, initSelector) => {
       instance.update();
     });
   });
-  SelectorEngine$1.find(SELECTOR_DATA_INIT).map((element2) => new Input2(element2));
+  SelectorEngine$1.find(SELECTOR_DATA_INIT).map((element2) => Input2.getOrCreateInstance(element2));
   EventHandler$1.on(window, "reset", (e) => {
     SelectorEngine$1.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element2) => {
       const instance = Input2.getInstance(element2.parentNode);

package.json

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

src/js/autoinit/callbacks/free.js

@@ -222,7 +222,7 @@ const inputCallback = (component, initSelector) => {
   });
 
   // auto-init
-  SelectorEngine.find(SELECTOR_DATA_INIT).map((element) => new Input(element));
+  SelectorEngine.find(SELECTOR_DATA_INIT).map((element) => Input.getOrCreateInstance(element));
 
   // form reset handler
   EventHandler.on(window, 'reset', (e) => {

src/js/autoinit/init.js

@@ -38,7 +38,9 @@ const initComponent = (component, manualInit = false) => {
     return;
   }
 
-  InitializedComponents.set(component.NAME);
+  if (!manualInit) {
+    InitializedComponents.set(component.NAME);
+  }
 
   const thisComponent = _defaultInitSelectors[component.NAME] || null;
   const isToggler = thisComponent?.isToggler || false;

src/js/free/input.js

@@ -169,9 +169,10 @@ class Input extends BaseComponent {
   }
 
   _toggleDefaultDatePlaceholder(input = this.input) {
-    const isTypeDate = input.getAttribute('type') === 'date';
+    const type = input.getAttribute('type');
+    const typesWithPlaceholder = ['date', 'time', 'datetime-local', 'month', 'week'];
 
-    if (!isTypeDate) {
+    if (!typesWithPlaceholder.includes(type)) {
       return;
     }
 
@@ -245,6 +246,11 @@ class Input extends BaseComponent {
   _activate(event) {
     onDOMContentLoaded(() => {
       this._getElements(event);
+
+      if (!this._element) {
+        return;
+      }
+
       const input = event ? event.target : this.input;
 
       if (input.value !== '') {
@@ -255,9 +261,19 @@ class Input extends BaseComponent {
   }
 
   _getElements(event) {
+    let initialized;
     if (event) {
       this._element = event.target.parentNode;
       this._label = SelectorEngine.findOne('label', this._element);
+
+      initialized = Manipulator.getDataAttribute(
+        this._element,
+        `${this.constructor.NAME}-initialized`
+      );
+    }
+
+    if (!initialized) {
+      return;
     }
 
     if (event && this._label) {

src/scss/free/_root.scss

@@ -22,6 +22,8 @@
   --#{$prefix}picker-header-bg: #{$picker-header-bg};
   --#{$prefix}timepicker-clock-face-bg: #{$timepicker-clock-face-bg};
   --#{$prefix}sidenav-backdrop-opacity: #{$sidenav-backdrop-opacity};
+  --#{$prefix}input-focus-border-color: var(--#{$prefix}primary);
+  --#{$prefix}input-focus-label-color: var(--#{$prefix}primary);
   --#{$prefix}form-control-border-color: #{$form-control-border-color};
   --#{$prefix}form-control-label-color: #{$form-control-label-color};
   --#{$prefix}form-control-disabled-bg: #{$form-control-disabled-bg};

src/scss/free/_variables.scss

@@ -703,6 +703,28 @@ $enable-negative-margins: true !default;
 $variable-prefix: mdb- !default;
 $prefix: $variable-prefix !default;
 
+// Global MDB light theme variables
+
+// scss-docs-start mdb-global-light-theme-variables
+$surface-color: $gray-800 !default;
+$surface-bg: $white !default;
+$surface-inverted-color: $white !default;
+$surface-inverted-bg: #6d6d6d !default;
+$divider-color: $gray-100 !default;
+$divider-blurry-color: hsl(0, 0%, 40%) !default;
+$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;
+$form-control-disabled-bg: $gray-300 !default;
+$box-shadow-color: $black !default;
+$stepper-mobile-bg: $gray-50 !default;
+// scss-docs-start mdb-global-light-theme-variables
+
 // Body
 //
 // Settings for the `<body>` element.
@@ -1052,9 +1074,9 @@ $form-label-transition: all 0.2s ease-out !default;
 $form-label-color: var(--#{$prefix}form-control-label-color) !default;
 
 $input-focus-active-label-transform: translateY(-1rem) translateY(0.1rem) scale(0.8) !default;
-$input-focus-label-color: $primary !default;
+$input-focus-label-color: var(--#{$prefix}input-focus-label-color) !default;
 $input-focus-border-width: 0.125rem !default;
-$input-focus-border-color: $primary !default;
+$input-focus-border-color: var(--#{$prefix}input-focus-border-color) !default;
 $input-disabled-background-color: var(--#{$prefix}form-control-disabled-bg) !default;
 
 $input-font-size-lg: 1rem !default;
@@ -1451,7 +1473,7 @@ $accordion-flush-item-border-bottom: 2px solid var(--#{$prefix}divider-color) !d
 $accordion-borderless-button-border-radius: 0.5rem !default;
 $accordion-borderless-button-bgc: var(--#{$prefix}primary-bg-subtle) !default;
 $accordion-borderless-button-color: var(--#{$prefix}primary-text-emphasis) !default;
-$accordion-icon-color: var(--#{$prefix}surface-color) !default;
+$accordion-icon-color: $surface-color !default;
 $accordion-icon-active-color: $primary !default;
 // scss-docs-end accordion-variables
 
@@ -1657,25 +1679,3 @@ $divider-blurry-vr-bg-image: linear-gradient(
 ) !default;
 $divider-blurry-vr-width: 1px !default;
 // scss-docs-end divider-variables
-
-// Global MDB light theme variables
-
-// scss-docs-start mdb-global-light-theme-variables
-$surface-color: $gray-800 !default;
-$surface-bg: $white !default;
-$surface-inverted-color: $white !default;
-$surface-inverted-bg: #6d6d6d !default;
-$divider-color: $gray-100 !default;
-$divider-blurry-color: hsl(0, 0%, 40%) !default;
-$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;
-$form-control-disabled-bg: $gray-300 !default;
-$box-shadow-color: $black !default;
-$stepper-mobile-bg: $gray-50 !default;
-// scss-docs-start mdb-global-light-theme-variables