From ad16b12da382bea2244167071114ede3ce89e8c4 Mon Sep 17 00:00:00 2001 From: idzark <23485709+idzark@users.noreply.github.com> Date: Fri, 15 Nov 2024 18:27:57 +0100 Subject: [PATCH] Release 7.1.0 --- CHANGELOG.md | 44 ++++++++++++++++ README.txt | 2 +- package-lock.json | 4 +- package.json | 2 +- projects/mdb-angular-ui-kit/CHANGELOG.md | 44 ++++++++++++++++ .../assets/scss/free/_nav.scss | 1 + .../assets/scss/free/_progress.scss | 51 +++++++++++++++++++ .../assets/scss/free/_variables.scss | 2 + .../dropdown/dropdown.directive.spec.ts | 17 +++++++ .../dropdown/dropdown.directive.ts | 23 ++++++++- projects/mdb-angular-ui-kit/package.json | 2 +- .../range/range.component.ts | 1 + 12 files changed, 187 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d26867ba..7667fced 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/README.txt b/README.txt index bfc71d18..605b76ff 100644 --- a/README.txt +++ b/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/ diff --git a/package-lock.json b/package-lock.json index 31f919e7..803943fb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "mdb-angular-ui-kit-free", - "version": "7.0.0", + "version": "7.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "mdb-angular-ui-kit-free", - "version": "7.0.0", + "version": "7.1.0", "dependencies": { "@angular/animations": "^18.2.4", "@angular/cdk": "^18.2.3", diff --git a/package.json b/package.json index 46f124ae..65bdf93a 100644 --- a/package.json +++ b/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", diff --git a/projects/mdb-angular-ui-kit/CHANGELOG.md b/projects/mdb-angular-ui-kit/CHANGELOG.md index d26867ba..7667fced 100644 --- a/projects/mdb-angular-ui-kit/CHANGELOG.md +++ b/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. diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_nav.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_nav.scss index b42ec266..d2ac82cf 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_nav.scss +++ b/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}; diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_progress.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_progress.scss index 00130a13..f8ca123b 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_progress.scss +++ b/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); + } +} diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_variables.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_variables.scss index d6ed2036..65efbda8 100644 --- a/projects/mdb-angular-ui-kit/assets/scss/free/_variables.scss +++ b/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 diff --git a/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.spec.ts b/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.spec.ts index 47539eb9..15f0b59c 100644 --- a/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.spec.ts +++ b/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(); diff --git a/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts b/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts index 87bde0ea..ab6ffdab 100644 --- a/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts +++ b/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 = new Subject(); @@ -273,6 +274,10 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit { ); } + private _listenToMousedown(overlayRef: OverlayRef): Observable { + return fromEvent(document, 'mousedown').pipe(takeUntil(overlayRef.detachments())); + } + private _listenToClick(overlayRef: OverlayRef, origin: HTMLElement): Observable { 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; } diff --git a/projects/mdb-angular-ui-kit/package.json b/projects/mdb-angular-ui-kit/package.json index be69d63c..f0b73646 100644 --- a/projects/mdb-angular-ui-kit/package.json +++ b/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", diff --git a/projects/mdb-angular-ui-kit/range/range.component.ts b/projects/mdb-angular-ui-kit/range/range.component.ts index c15868a7..ba2c0e91 100644 --- a/projects/mdb-angular-ui-kit/range/range.component.ts +++ b/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 {