Release 7.0.0

CHANGELOG.md

@@ -1,3 +1,62 @@
+## 7.0.0 (16.09.2024)
+
+This version requires Angular v18. Follow the [Angular Update Guide](https://angular.dev/update-guide) to migrate your project to Angular 18.
+
+### Breaking changes:
+
+- Updated Angular to v18, this version is required in MDB Angular v7.
+- [Checkbox](https://mdbootstrap.com/docs/angular/forms/checkbox/) - changed `margin-right` style from `4px` to `6px` in `.form-check-input` element.
+- [Forms](https://mdbootstrap.com/docs/angular/forms/overview/) - added `padding-left: 0.15rem` style to `.form-check-label` element.
+- [Switch](https://mdbootstrap.com/docs/angular/forms/switch/) - changed `margin-right` style from `4px` to `8px` in `.form-check-input` element.
+- [Progress](https://mdbootstrap.com/docs/angular/components/progress/) - added `box-shadow: none` style to `.progress` element.
+- [Input group](https://mdbootstrap.com/docs/angular/forms/input-group/) - added `flex-wrap: nowrap` style to `.input-group` element.
+- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) - changed SCSS variable `$datepicker-small-cell-content-width` value from `36px` to `40px`.
+- [Range](https://mdbootstrap.com/docs/angular/forms/range/):
+  - Added `box-shadow: none` style to `.form-range ::-webkit-slider-runnable-track` element.
+  - Added `box-shadow: none` style to `.form-range ::-moz-range-track` element.
+- [Captcha](https://mdbootstrap.com/docs/angular/plugins/captcha/):
+  - Changed `error` event name to `captchaError`.
+  - Changed `expire` event name to `captchaExpire`.
+  - Changed `success` event name to `captchaSuccess`.
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/):
+  - Redesigned clock's page HTML structure and styles.
+  - Arrow icons are now displayed when hour/minute buttons are hovered in inline mode.
+- [Treeview](https://mdbootstrap.com/docs/angular/plugins/tree-view/):
+  - Redesigned entire HTML structure.
+  - Replaced `li` element with `mdb-treeview-item`.
+  - Removed the `<div class="treeview">` wrapper element from the entire component.
+  - Removed the `checkboxesField` input.
+  - Added a public `MdbTreeviewColor` type for the color input.
+  - Added a new mechanism for setting the arrow icon with the `collapseIcon` property.
+  - Added keyboard navigation handling.
+
+### Fixes and improvements:
+
+- [Multi range](https://mdbootstrap.com/docs/angular/forms/multi-range-slider/) - resolved the issue with `TouchEvent` in Firefox.
+- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - resolved the issue with unhandled `tabindex` input.
+- [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/) - resolved the issue with initializing onboarding with a delay after navigating to another page.
+- [Input fields](https://mdbootstrap.com/docs/angular/forms/input-fields/) - resolved the issue with displaying the value after setting it programmatically in all inputs with built-in placeholders (e.g., `datetime-local` or `time`).
+- [Datatable](https://mdbootstrap.com/docs/angular/data/datatables/) - resolved the issue with the `showAllEntries` input not working properly with the `entries` input.
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/) - resolved the issue with `ArrowUp` and `ArrowDown` key presses not working upon opening the timepicker.
+- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/):
+  - Resolved the issue with returned form control values for empty or invalid input values.
+  - Resolved the issue with closing the datepicker using the input toggle.
+- [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/):
+  - Resolved the issue with unpreserved event IDs on edit.
+  - Resolved the issue with dragging in `readonly` mode.
+  - Resolved the issue with view selection when non-default captions are used.
+  - Resolved the issue with rendering the period in the correct format in Month view.
+
+### New features:
+
+- [Dropdown](https://mdbootstrap.com/docs/angular/components/dropdown/) - added `MdbDropdownPositionClass` type to the public API.
+- [Modal](https://mdbootstrap.com/docs/angular/components/modal/) - added `focusElementSelector` property to the `open` method's options for specifying the element to focus on when the modal opens.
+- [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/):
+  - Added `addEventButtonCaption` property to the `options` input for setting a custom caption for the add event button.
+  - Added `MdbCalendarViews` Enum to the public API.
+
+---
+
 ## 6.1.0 (27.05.2024)
 
 ### Fixes and improvements:

README.txt

@@ -1,6 +1,6 @@
 MDB 5 Angular
 
-Version: FREE 6.1.0
+Version: FREE 7.0.0
 
 Documentation:
 https://mdbootstrap.com/docs/angular/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-angular-ui-kit-free",
-  "version": "6.1.0",
+  "version": "7.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

projects/mdb-angular-ui-kit/CHANGELOG.md

@@ -1,3 +1,62 @@
+## 7.0.0 (16.09.2024)
+
+This version requires Angular v18. Follow the [Angular Update Guide](https://angular.dev/update-guide) to migrate your project to Angular 18.
+
+### Breaking changes:
+
+- Updated Angular to v18, this version is required in MDB Angular v7.
+- [Checkbox](https://mdbootstrap.com/docs/angular/forms/checkbox/) - changed `margin-right` style from `4px` to `6px` in `.form-check-input` element.
+- [Forms](https://mdbootstrap.com/docs/angular/forms/overview/) - added `padding-left: 0.15rem` style to `.form-check-label` element.
+- [Switch](https://mdbootstrap.com/docs/angular/forms/switch/) - changed `margin-right` style from `4px` to `8px` in `.form-check-input` element.
+- [Progress](https://mdbootstrap.com/docs/angular/components/progress/) - added `box-shadow: none` style to `.progress` element.
+- [Input group](https://mdbootstrap.com/docs/angular/forms/input-group/) - added `flex-wrap: nowrap` style to `.input-group` element.
+- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) - changed SCSS variable `$datepicker-small-cell-content-width` value from `36px` to `40px`.
+- [Range](https://mdbootstrap.com/docs/angular/forms/range/):
+  - Added `box-shadow: none` style to `.form-range ::-webkit-slider-runnable-track` element.
+  - Added `box-shadow: none` style to `.form-range ::-moz-range-track` element.
+- [Captcha](https://mdbootstrap.com/docs/angular/plugins/captcha/):
+  - Changed `error` event name to `captchaError`.
+  - Changed `expire` event name to `captchaExpire`.
+  - Changed `success` event name to `captchaSuccess`.
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/):
+  - Redesigned clock's page HTML structure and styles.
+  - Arrow icons are now displayed when hour/minute buttons are hovered in inline mode.
+- [Treeview](https://mdbootstrap.com/docs/angular/plugins/tree-view/):
+  - Redesigned entire HTML structure.
+  - Replaced `li` element with `mdb-treeview-item`.
+  - Removed the `<div class="treeview">` wrapper element from the entire component.
+  - Removed the `checkboxesField` input.
+  - Added a public `MdbTreeviewColor` type for the color input.
+  - Added a new mechanism for setting the arrow icon with the `collapseIcon` property.
+  - Added keyboard navigation handling.
+
+### Fixes and improvements:
+
+- [Multi range](https://mdbootstrap.com/docs/angular/forms/multi-range-slider/) - resolved the issue with `TouchEvent` in Firefox.
+- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - resolved the issue with unhandled `tabindex` input.
+- [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/) - resolved the issue with initializing onboarding with a delay after navigating to another page.
+- [Input fields](https://mdbootstrap.com/docs/angular/forms/input-fields/) - resolved the issue with displaying the value after setting it programmatically in all inputs with built-in placeholders (e.g., `datetime-local` or `time`).
+- [Datatable](https://mdbootstrap.com/docs/angular/data/datatables/) - resolved the issue with the `showAllEntries` input not working properly with the `entries` input.
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/) - resolved the issue with `ArrowUp` and `ArrowDown` key presses not working upon opening the timepicker.
+- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/):
+  - Resolved the issue with returned form control values for empty or invalid input values.
+  - Resolved the issue with closing the datepicker using the input toggle.
+- [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/):
+  - Resolved the issue with unpreserved event IDs on edit.
+  - Resolved the issue with dragging in `readonly` mode.
+  - Resolved the issue with view selection when non-default captions are used.
+  - Resolved the issue with rendering the period in the correct format in Month view.
+
+### New features:
+
+- [Dropdown](https://mdbootstrap.com/docs/angular/components/dropdown/) - added `MdbDropdownPositionClass` type to the public API.
+- [Modal](https://mdbootstrap.com/docs/angular/components/modal/) - added `focusElementSelector` property to the `open` method's options for specifying the element to focus on when the modal opens.
+- [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/):
+  - Added `addEventButtonCaption` property to the `options` input for setting a custom caption for the add event button.
+  - Added `MdbCalendarViews` Enum to the public API.
+
+---
+
 ## 6.1.0 (27.05.2024)
 
 ### Fixes and improvements:

projects/mdb-angular-ui-kit/assets/scss/free/_progress.scss

@@ -2,5 +2,5 @@
 
 .progress {
   border-radius: 0;
-  // box-shadow: none; This should be added in next major release 7.0.0
+  box-shadow: none;
 }

projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-check.scss

@@ -85,7 +85,7 @@
   &[type='checkbox'] {
     border-radius: $form-check-input-checkbox-border-radius;
     margin-top: 0.19em;
-    margin-right: 4px; // This should be changed to 6px in next major release 7.0.0
+    margin-right: 6px;
 
     &:focus {
       &:after {
@@ -177,7 +177,7 @@
 }
 
 .form-check-label {
-  // padding-left: 0.15rem; This should be added in next major release 7.0.0
+  padding-left: 0.15rem;
   &:hover {
     cursor: pointer;
   }
@@ -196,7 +196,7 @@
     height: $form-switch-form-check-input-height;
     background-color: $form-switch-form-check-input-background-color;
     margin-top: 0.3em;
-    margin-right: 4px; // This should be changed to 8px in next major release 7.0.0
+    margin-right: 8px;
 
     &:after {
       content: '';

projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-range.scss

@@ -34,7 +34,7 @@
   &::-webkit-slider-runnable-track {
     height: $form-range-webkit-slider-runnable-track-height;
     border-radius: 0;
-    // box-shadow: none; This should be added in next major release 7.0.0
+    box-shadow: none;
   }
 
   &::-moz-range-thumb {
@@ -43,6 +43,6 @@
   }
 
   &::-moz-range-track {
-    // box-shadow: none; This should be added in next major release 7.0.0
+    box-shadow: none;
   }
 }

projects/mdb-angular-ui-kit/assets/scss/free/forms/_input-group.scss

@@ -3,7 +3,7 @@
 //
 
 .input-group {
-  // flex-wrap: nowrap; This should be added in next major release 7.0.0
+  flex-wrap: nowrap;
 
   > .form-control {
     min-height: $input-group-min-height;

projects/mdb-angular-ui-kit/dropdown/public_api.ts

@@ -1,4 +1,4 @@
-export { MdbDropdownDirective } from './dropdown.directive';
+export { MdbDropdownDirective, MdbDropdownPositionClass } from './dropdown.directive';
 export { MdbDropdownToggleDirective } from './dropdown-toggle.directive';
 export { MdbDropdownMenuDirective } from './dropdown-menu.directive';
 export { MdbDropdownModule } from './dropdown.module';

projects/mdb-angular-ui-kit/forms/input.directive.ts

@@ -1,6 +1,7 @@
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import {
   AfterViewInit,
+  DestroyRef,
   Directive,
   DoCheck,
   ElementRef,
@@ -16,7 +17,7 @@ import { NgControl } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { MdbAbstractFormControl } from './form-control';
 import { AutofillEvent, AutofillMonitor } from '@angular/cdk/text-field';
-
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
   selector: '[mdbInput]',
@@ -31,7 +32,8 @@ export class MdbInputDirective
     private _elementRef: ElementRef,
     private _renderer: Renderer2,
     @Optional() @Self() private _ngControl: NgControl,
-    private _autofill: AutofillMonitor
+    private _autofill: AutofillMonitor,
+    private _destroyRef: DestroyRef
   ) {}
 
   readonly stateChanges: Subject<void> = new Subject<void>();
@@ -53,6 +55,12 @@ export class MdbInputDirective
       this._autofilled = event.isAutofilled;
       this.stateChanges.next();
     });
+
+    this.stateChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+      if (this._hasTypeInterferingPlaceholder()) {
+        this._updateTextColorForDateType();
+      }
+    });
   }
 
   private _currentNativeValue: any;
@@ -109,18 +117,12 @@ export class MdbInputDirective
   @HostListener('focus')
   _onFocus(): void {
     this._focused = true;
-    if (this._hasTypeInterferingPlaceholder()) {
-      this._updateTextColorForDateType();
-    }
     this.stateChanges.next();
   }
 
   @HostListener('blur')
   _onBlur(): void {
     this._focused = false;
-    if (this._hasTypeInterferingPlaceholder()) {
-      this._updateTextColorForDateType();
-    }
     this.stateChanges.next();
   }
 

projects/mdb-angular-ui-kit/modal/modal-config.ts

@@ -1,14 +1,14 @@
 import { ViewContainerRef } from '@angular/core';
 
-/* eslint-disable @typescript-eslint/no-inferrable-types */
 export class MdbModalConfig<D = any> {
-  animation?: boolean = true;
-  backdrop?: boolean = true;
-  ignoreBackdropClick?: boolean = false;
-  keyboard?: boolean = true;
-  modalClass?: string = '';
-  containerClass?: string = '';
+  animation? = true;
+  backdrop? = true;
+  ignoreBackdropClick? = false;
+  keyboard? = true;
+  modalClass? = '';
+  containerClass? = '';
   viewContainerRef?: ViewContainerRef;
   data?: D | null = null;
-  nonInvasive?: boolean = false;
+  nonInvasive? = false;
+  focusElementSelector? = '';
 }

projects/mdb-angular-ui-kit/modal/modal-container.component.ts

@@ -101,15 +101,26 @@ export class MdbModalContainerComponent implements OnInit, AfterViewInit, OnDest
       this._focusTrap = this._focusTrapFactory.create(this.host);
       this._previouslyFocusedElement = this._document.activeElement as HTMLElement;
     }
-
+    const focusElement =
+      this._config.focusElementSelector &&
+      (this.modalContent.nativeElement.querySelector(
+        this._config.focusElementSelector
+      ) as HTMLElement);
     if (this._config.animation) {
       setTimeout(() => {
         this._renderer.addClass(this.host, 'show');
-
-        setTimeout(() => {
-          this._focusTrap?.focusInitialElementWhenReady();
-        }, this.MODAL_TRANSITION);
+        if (focusElement) {
+          setTimeout(() => {
+            focusElement.focus();
+          }, this.MODAL_TRANSITION);
+        } else {
+          setTimeout(() => {
+            this._focusTrap?.focusInitialElementWhenReady();
+          }, this.MODAL_TRANSITION);
+        }
       }, this.BACKDROP_TRANSITION);
+    } else if (focusElement) {
+      focusElement.focus();
     } else {
       this._focusTrap?.focusInitialElementWhenReady();
     }

projects/mdb-angular-ui-kit/package.json

@@ -4,7 +4,7 @@
   "homepage": "https://mdbootstrap.com/docs/b5/angular/",
   "author": "MDBootstrap",
   "license": "MIT",
-  "version": "6.1.0",
+  "version": "7.0.0",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",