Skip to content

Commit ad16b12

Browse files
idzarkidzark
committed
Release 7.1.0
1 parent d3d356e commit ad16b12

12 files changed

+187
-6
lines changed

‎CHANGELOG.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,47 @@
1+
## 7.1.0 (18.11.2024)
2+
3+
### Fixes and improvements:
4+
5+
- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
6+
- Resolved problem with `close` method being called twice on component close
7+
- Fixed dark theme styles in inline mode
8+
- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/)
9+
- Added `aria-disabled` attributes to elements that display disabled dates
10+
- Fixed `aria-label` attribute value in the element used to display day value
11+
- Resolved problem with adding `aria-selected` attribute to the element that display day value
12+
- [Select](https://mdbootstrap.com/docs/angular/forms/select/)
13+
- Fixed disabled options styles in custom theme
14+
- Resolved problem with opening dropdown on `space` key press
15+
- Added `aria-label` and `aria-labelledby` attributes to the component
16+
- Fixed value returned by `(deselect)` event
17+
- [Autocomplete](https://mdbootstrap.com/docs/angular/forms/autocomplete/)
18+
- Fixed `aria-expended` attribute values for opened and closed menu
19+
- Fixed problem where component menu was opening even when input was disbled
20+
- [Transfer](https://mdbootstrap.com/docs/angular/plugins/transfer/)
21+
- Fixed events output for target container
22+
- Fixed checkboxes styles
23+
- [Range](https://mdbootstrap.com/docs/angular/forms/range/) - fixed thumb position on component init
24+
- [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/) - added fix to prevent memory leak after component destroy
25+
- [Input mask](https://mdbootstrap.com/docs/angular/plugins/input-mask/) - fixed a problem with value formatting when pasting all content into input at once
26+
- [Vector maps](https://mdbootstrap.com/docs/angular/plugins/vector-maps/) - fixed shadow styles in zoom buttons
27+
- [Transfer](https://mdbootstrap.com/docs/angular/plugins/wysiwyg-editor/) - fixed dropdown menu alignment
28+
- [Dropdown](https://mdbootstrap.com/docs/angular/component/dropdowns/) - fixed `aria-expended` attribute values for opened and closed menu
29+
- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/) - fixed problem with focus trap when the last focused element is inside the component content
30+
31+
### New features:
32+
33+
- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
34+
- Added new `showClearBtn` input
35+
- Added new `(clear)` event that will be fired after using Clear button
36+
- [File upload](https://mdbootstrap.com/docs/angular/plugins/file-upload/)
37+
- Added `svg` and `webp` extensions to the list of allowed file types for default preview
38+
- Added new `datepickerOptions` that allow to define options for the date pickers used by the plugin
39+
- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - added new `(search)` event that will be fired after using search input
40+
- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) - added new `(viewChanged)` event that will be fired on component view change
41+
- [Progress](https://mdbootstrap.com/docs/angular/components/progress/) - added new circular version of the component
42+
43+
---
44+
145
## 7.0.0 (16.09.2024)
246

347
This version requires Angular v18. Follow the [Angular Update Guide](https://angular.dev/update-guide) to migrate your project to Angular 18.

‎README.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MDB 5 Angular
22

3-
Version: FREE 7.0.0
3+
Version: FREE 7.1.0
44

55
Documentation:
66
https://mdbootstrap.com/docs/angular/

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mdb-angular-ui-kit-free",
3-
"version": "7.0.0",
3+
"version": "7.1.0",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,47 @@
1+
## 7.1.0 (18.11.2024)
2+
3+
### Fixes and improvements:
4+
5+
- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
6+
- Resolved problem with `close` method being called twice on component close
7+
- Fixed dark theme styles in inline mode
8+
- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/)
9+
- Added `aria-disabled` attributes to elements that display disabled dates
10+
- Fixed `aria-label` attribute value in the element used to display day value
11+
- Resolved problem with adding `aria-selected` attribute to the element that display day value
12+
- [Select](https://mdbootstrap.com/docs/angular/forms/select/)
13+
- Fixed disabled options styles in custom theme
14+
- Resolved problem with opening dropdown on `space` key press
15+
- Added `aria-label` and `aria-labelledby` attributes to the component
16+
- Fixed value returned by `(deselect)` event
17+
- [Autocomplete](https://mdbootstrap.com/docs/angular/forms/autocomplete/)
18+
- Fixed `aria-expended` attribute values for opened and closed menu
19+
- Fixed problem where component menu was opening even when input was disbled
20+
- [Transfer](https://mdbootstrap.com/docs/angular/plugins/transfer/)
21+
- Fixed events output for target container
22+
- Fixed checkboxes styles
23+
- [Range](https://mdbootstrap.com/docs/angular/forms/range/) - fixed thumb position on component init
24+
- [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/) - added fix to prevent memory leak after component destroy
25+
- [Input mask](https://mdbootstrap.com/docs/angular/plugins/input-mask/) - fixed a problem with value formatting when pasting all content into input at once
26+
- [Vector maps](https://mdbootstrap.com/docs/angular/plugins/vector-maps/) - fixed shadow styles in zoom buttons
27+
- [Transfer](https://mdbootstrap.com/docs/angular/plugins/wysiwyg-editor/) - fixed dropdown menu alignment
28+
- [Dropdown](https://mdbootstrap.com/docs/angular/component/dropdowns/) - fixed `aria-expended` attribute values for opened and closed menu
29+
- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/) - fixed problem with focus trap when the last focused element is inside the component content
30+
31+
### New features:
32+
33+
- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
34+
- Added new `showClearBtn` input
35+
- Added new `(clear)` event that will be fired after using Clear button
36+
- [File upload](https://mdbootstrap.com/docs/angular/plugins/file-upload/)
37+
- Added `svg` and `webp` extensions to the list of allowed file types for default preview
38+
- Added new `datepickerOptions` that allow to define options for the date pickers used by the plugin
39+
- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - added new `(search)` event that will be fired after using search input
40+
- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) - added new `(viewChanged)` event that will be fired on component view change
41+
- [Progress](https://mdbootstrap.com/docs/angular/components/progress/) - added new circular version of the component
42+
43+
---
44+
145
## 7.0.0 (16.09.2024)
246

347
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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454

5555
.nav-pills {
5656
margin-left: -$nav-pills-margin;
57+
margin-right: -$nav-pills-margin;
5758

5859
.nav-link {
5960
--#{$prefix}nav-pills-link-border-radius: #{$nav-pills-link-border-radius};

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,54 @@
44
border-radius: 0;
55
box-shadow: none;
66
}
7+
8+
.progress-circular {
9+
--#{$prefix}progress-circular-size: #{$progress-circular-size};
10+
--#{$prefix}progress-circular-bar-width: #{$progress-circular-bar-width};
11+
--#{$prefix}progress-circular-color: var(--#{$prefix}emphasis-color);
12+
13+
position: relative;
14+
width: var(--#{$prefix}progress-circular-size);
15+
height: var(--#{$prefix}progress-circular-size);
16+
background-color: transparent;
17+
display: inline-block;
18+
19+
.progress-bar {
20+
background-color: var(--#{$prefix}progress-bar-bg);
21+
}
22+
23+
.progress-bar::before {
24+
content: '';
25+
position: absolute;
26+
top: 0;
27+
left: 0;
28+
width: 100%;
29+
height: 100%;
30+
border-radius: 50%;
31+
box-sizing: border-box;
32+
33+
background: conic-gradient(
34+
transparent calc(var(--percentage) * 1%),
35+
var(--#{$prefix}progress-bg) 0%
36+
);
37+
-webkit-mask: radial-gradient(
38+
farthest-side,
39+
transparent calc(100% - var(--#{$prefix}progress-circular-bar-width)),
40+
black calc(100% - var(--#{$prefix}progress-circular-bar-width) + 1px)
41+
);
42+
mask: radial-gradient(
43+
farthest-side,
44+
transparent calc(100% - var(--#{$prefix}progress-circular-bar-width)),
45+
black calc(100% - var(--#{$prefix}progress-circular-bar-width) + 1px)
46+
);
47+
background-color: inherit;
48+
}
49+
50+
.progress-label {
51+
position: absolute;
52+
top: 50%;
53+
left: 50%;
54+
transform: translate(-50%, -50%);
55+
color: var(--#{$prefix}progress-circular-color);
56+
}
57+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1754,6 +1754,8 @@ $alerts: map-merge(
17541754

17551755
// scss-docs-start progress-variables
17561756
$progress-height: 4px !default;
1757+
$progress-circular-size: 48px !default;
1758+
$progress-circular-bar-width: 4px !default;
17571759
// scss-docs-end progress-variables
17581760

17591761
// Range

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,23 @@ describe('MDB Dropdown', () => {
9191
}));
9292
});
9393

94+
describe('Accessibility', () => {
95+
it('should update aria-expanded attribute on dropdown open and close', fakeAsync(() => {
96+
const buttonEl: HTMLButtonElement = fixture.nativeElement.querySelector('.dropdown-toggle');
97+
98+
buttonEl.click();
99+
fixture.detectChanges();
100+
101+
expect(buttonEl.getAttribute('aria-expanded')).toBe('true');
102+
103+
buttonEl.click();
104+
fixture.detectChanges();
105+
flush();
106+
107+
expect(buttonEl.getAttribute('aria-expanded')).toContain('false');
108+
}));
109+
});
110+
94111
describe('Keyboard navigation', () => {
95112
it('should correctly focus dropdown items when ArrowUp or ArrowDown key is used', () => {
96113
directive.show();

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

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
9191
private _isDropdownMenuEnd: boolean;
9292
private _xPosition: string;
9393
private _breakpoints: any;
94+
private _mousedownTarget: HTMLElement | null = null;
9495

9596
readonly _destroy$: Subject<void> = new Subject<void>();
9697

@@ -273,6 +274,10 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
273274
);
274275
}
275276

277+
private _listenToMousedown(overlayRef: OverlayRef): Observable<MouseEvent> {
278+
return fromEvent<MouseEvent>(document, 'mousedown').pipe(takeUntil(overlayRef.detachments()));
279+
}
280+
276281
private _listenToClick(overlayRef: OverlayRef, origin: HTMLElement): Observable<MouseEvent> {
277282
return fromEvent(document, 'click').pipe(
278283
filter((event: MouseEvent) => {
@@ -292,6 +297,9 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
292297
if (event.fromState === 'visible' && event.toState === 'hidden') {
293298
this._overlayRef.detach();
294299
this._open = false;
300+
301+
this._renderer.setAttribute(this._dropdownToggle.nativeElement, 'aria-expanded', 'false');
302+
295303
this.dropdownHidden.emit(this);
296304
}
297305

@@ -347,6 +355,9 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
347355
this.dropdownShow.emit(this);
348356

349357
this._open = true;
358+
359+
this._renderer.setAttribute(this._dropdownToggle.nativeElement, 'aria-expanded', 'true');
360+
350361
this._overlayRef.attach(this._portal);
351362

352363
this._listenToEscKeyup(this._overlayRef).subscribe((isEsc) => {
@@ -362,15 +373,25 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
362373
this._handleKeyboardNavigation(event);
363374
});
364375

376+
this._listenToMousedown(this._overlayRef).subscribe((event) => {
377+
this._mousedownTarget = event.target as HTMLElement;
378+
});
379+
365380
this._listenToClick(this._overlayRef, this._dropdownToggle.nativeElement).subscribe((event) => {
366381
const target = event.target as HTMLElement;
367382
const isDropdownItem = target.classList && target.classList.contains('dropdown-item');
368383

384+
const isOnMousedownDropdownMenu = this._dropdownMenu.elementRef.nativeElement.contains(
385+
this._mousedownTarget
386+
);
387+
388+
this._mousedownTarget = null;
389+
369390
if (this.closeOnItemClick && isDropdownItem) {
370391
this.hide();
371392
return;
372393
}
373-
if (this.closeOnOutsideClick && !isDropdownItem) {
394+
if (this.closeOnOutsideClick && !isDropdownItem && !isOnMousedownDropdownMenu) {
374395
this.hide();
375396
return;
376397
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"homepage": "https://mdbootstrap.com/docs/b5/angular/",
55
"author": "MDBootstrap",
66
"license": "MIT",
7-
"version": "7.0.0",
7+
"version": "7.1.0",
88
"peerDependencies": {
99
"@angular/common": "^18.0.0",
1010
"@angular/core": "^18.0.0",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ export class MdbRangeComponent implements ControlValueAccessor, AfterViewInit {
7979

8080
ngAfterViewInit(): void {
8181
this.thumbPositionUpdate();
82+
this._cdRef.detectChanges();
8283
}
8384

8485
focusRangeInput(): void {

0 commit comments

Comments
 (0)