Release 7.1.0

CHANGELOG.md

@@ -1,3 +1,47 @@
+## 7.1.0 (18.11.2024)
+
+### Fixes and improvements:
+
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
+  - Resolved problem with `close` method being called twice on component close
+  - Fixed dark theme styles in inline mode
+- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/)
+  - Added `aria-disabled` attributes to elements that display disabled dates
+  - Fixed `aria-label` attribute value in the element used to display day value
+  - Resolved problem with adding `aria-selected` attribute to the element that display day value
+- [Select](https://mdbootstrap.com/docs/angular/forms/select/)
+  - Fixed disabled options styles in custom theme
+  - Resolved problem with opening dropdown on `space` key press
+  - Added `aria-label` and `aria-labelledby` attributes to the component
+  - Fixed value returned by `(deselect)` event
+- [Autocomplete](https://mdbootstrap.com/docs/angular/forms/autocomplete/)
+  - Fixed `aria-expended` attribute values for opened and closed menu
+  - Fixed problem where component menu was opening even when input was disbled
+- [Transfer](https://mdbootstrap.com/docs/angular/plugins/transfer/)
+  - Fixed events output for target container
+  - Fixed checkboxes styles
+- [Range](https://mdbootstrap.com/docs/angular/forms/range/) - fixed thumb position on component init
+- [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/) - added fix to prevent memory leak after component destroy
+- [Input mask](https://mdbootstrap.com/docs/angular/plugins/input-mask/) - fixed a problem with value formatting when pasting all content into input at once
+- [Vector maps](https://mdbootstrap.com/docs/angular/plugins/vector-maps/) - fixed shadow styles in zoom buttons
+- [Transfer](https://mdbootstrap.com/docs/angular/plugins/wysiwyg-editor/) - fixed dropdown menu alignment
+- [Dropdown](https://mdbootstrap.com/docs/angular/component/dropdowns/) - fixed `aria-expended` attribute values for opened and closed menu
+- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/) - fixed problem with focus trap when the last focused element is inside the component content
+
+### New features:
+
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
+  - Added new `showClearBtn` input
+  - Added new `(clear)` event that will be fired after using Clear button
+- [File upload](https://mdbootstrap.com/docs/angular/plugins/file-upload/)
+  - Added `svg` and `webp` extensions to the list of allowed file types for default preview
+  - Added new `datepickerOptions` that allow to define options for the date pickers used by the plugin
+- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - added new `(search)` event that will be fired after using search input
+- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) - added new `(viewChanged)` event that will be fired on component view change
+- [Progress](https://mdbootstrap.com/docs/angular/components/progress/) - added new circular version of the component
+
+---
+
 ## 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.

README.txt

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

package.json

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

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

@@ -1,3 +1,47 @@
+## 7.1.0 (18.11.2024)
+
+### Fixes and improvements:
+
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
+  - Resolved problem with `close` method being called twice on component close
+  - Fixed dark theme styles in inline mode
+- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/)
+  - Added `aria-disabled` attributes to elements that display disabled dates
+  - Fixed `aria-label` attribute value in the element used to display day value
+  - Resolved problem with adding `aria-selected` attribute to the element that display day value
+- [Select](https://mdbootstrap.com/docs/angular/forms/select/)
+  - Fixed disabled options styles in custom theme
+  - Resolved problem with opening dropdown on `space` key press
+  - Added `aria-label` and `aria-labelledby` attributes to the component
+  - Fixed value returned by `(deselect)` event
+- [Autocomplete](https://mdbootstrap.com/docs/angular/forms/autocomplete/)
+  - Fixed `aria-expended` attribute values for opened and closed menu
+  - Fixed problem where component menu was opening even when input was disbled
+- [Transfer](https://mdbootstrap.com/docs/angular/plugins/transfer/)
+  - Fixed events output for target container
+  - Fixed checkboxes styles
+- [Range](https://mdbootstrap.com/docs/angular/forms/range/) - fixed thumb position on component init
+- [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/) - added fix to prevent memory leak after component destroy
+- [Input mask](https://mdbootstrap.com/docs/angular/plugins/input-mask/) - fixed a problem with value formatting when pasting all content into input at once
+- [Vector maps](https://mdbootstrap.com/docs/angular/plugins/vector-maps/) - fixed shadow styles in zoom buttons
+- [Transfer](https://mdbootstrap.com/docs/angular/plugins/wysiwyg-editor/) - fixed dropdown menu alignment
+- [Dropdown](https://mdbootstrap.com/docs/angular/component/dropdowns/) - fixed `aria-expended` attribute values for opened and closed menu
+- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/) - fixed problem with focus trap when the last focused element is inside the component content
+
+### New features:
+
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
+  - Added new `showClearBtn` input
+  - Added new `(clear)` event that will be fired after using Clear button
+- [File upload](https://mdbootstrap.com/docs/angular/plugins/file-upload/)
+  - Added `svg` and `webp` extensions to the list of allowed file types for default preview
+  - Added new `datepickerOptions` that allow to define options for the date pickers used by the plugin
+- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - added new `(search)` event that will be fired after using search input
+- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) - added new `(viewChanged)` event that will be fired on component view change
+- [Progress](https://mdbootstrap.com/docs/angular/components/progress/) - added new circular version of the component
+
+---
+
 ## 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.

projects/mdb-angular-ui-kit/assets/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};

projects/mdb-angular-ui-kit/assets/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);
+  }
+}

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

@@ -1754,6 +1754,8 @@ $alerts: map-merge(
 
 // scss-docs-start progress-variables
 $progress-height: 4px !default;
+$progress-circular-size: 48px !default;
+$progress-circular-bar-width: 4px !default;
 // scss-docs-end progress-variables
 
 // Range

projects/mdb-angular-ui-kit/dropdown/dropdown.directive.spec.ts

@@ -91,6 +91,23 @@ describe('MDB Dropdown', () => {
     }));
   });
 
+  describe('Accessibility', () => {
+    it('should update aria-expanded attribute on dropdown open and close', fakeAsync(() => {
+      const buttonEl: HTMLButtonElement = fixture.nativeElement.querySelector('.dropdown-toggle');
+
+      buttonEl.click();
+      fixture.detectChanges();
+
+      expect(buttonEl.getAttribute('aria-expanded')).toBe('true');
+
+      buttonEl.click();
+      fixture.detectChanges();
+      flush();
+
+      expect(buttonEl.getAttribute('aria-expanded')).toContain('false');
+    }));
+  });
+
   describe('Keyboard navigation', () => {
     it('should correctly focus dropdown items when ArrowUp or ArrowDown key is used', () => {
       directive.show();

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

@@ -91,6 +91,7 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
   private _isDropdownMenuEnd: boolean;
   private _xPosition: string;
   private _breakpoints: any;
+  private _mousedownTarget: HTMLElement | null = null;
 
   readonly _destroy$: Subject<void> = new Subject<void>();
 
@@ -273,6 +274,10 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
     );
   }
 
+  private _listenToMousedown(overlayRef: OverlayRef): Observable<MouseEvent> {
+    return fromEvent<MouseEvent>(document, 'mousedown').pipe(takeUntil(overlayRef.detachments()));
+  }
+
   private _listenToClick(overlayRef: OverlayRef, origin: HTMLElement): Observable<MouseEvent> {
     return fromEvent(document, 'click').pipe(
       filter((event: MouseEvent) => {
@@ -292,6 +297,9 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
     if (event.fromState === 'visible' && event.toState === 'hidden') {
       this._overlayRef.detach();
       this._open = false;
+
+      this._renderer.setAttribute(this._dropdownToggle.nativeElement, 'aria-expanded', 'false');
+
       this.dropdownHidden.emit(this);
     }
 
@@ -347,6 +355,9 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
     this.dropdownShow.emit(this);
 
     this._open = true;
+
+    this._renderer.setAttribute(this._dropdownToggle.nativeElement, 'aria-expanded', 'true');
+
     this._overlayRef.attach(this._portal);
 
     this._listenToEscKeyup(this._overlayRef).subscribe((isEsc) => {
@@ -362,15 +373,25 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
         this._handleKeyboardNavigation(event);
       });
 
+    this._listenToMousedown(this._overlayRef).subscribe((event) => {
+      this._mousedownTarget = event.target as HTMLElement;
+    });
+
     this._listenToClick(this._overlayRef, this._dropdownToggle.nativeElement).subscribe((event) => {
       const target = event.target as HTMLElement;
       const isDropdownItem = target.classList && target.classList.contains('dropdown-item');
 
+      const isOnMousedownDropdownMenu = this._dropdownMenu.elementRef.nativeElement.contains(
+        this._mousedownTarget
+      );
+
+      this._mousedownTarget = null;
+
       if (this.closeOnItemClick && isDropdownItem) {
         this.hide();
         return;
       }
-      if (this.closeOnOutsideClick && !isDropdownItem) {
+      if (this.closeOnOutsideClick && !isDropdownItem && !isOnMousedownDropdownMenu) {
         this.hide();
         return;
       }

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

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

projects/mdb-angular-ui-kit/range/range.component.ts

@@ -79,6 +79,7 @@ export class MdbRangeComponent implements ControlValueAccessor, AfterViewInit {
 
   ngAfterViewInit(): void {
     this.thumbPositionUpdate();
+    this._cdRef.detectChanges();
   }
 
   focusRangeInput(): void {