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",