Skip to content

Commit 047bb13

Browse files
idzarkidzark
committed
Release 5.1.0
1 parent 50aff53 commit 047bb13

23 files changed

+423
-70
lines changed

‎CHANGELOG.md

+69
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,72 @@
1+
## 5.1.0 (09.10.2023)
2+
3+
### Fixes and improvements:
4+
5+
- [Datatable](https://mdbootstrap.com/docs/angular/data/datatables/)
6+
- Added missing `cursor: pointer` styles to clickable rows
7+
- Resolved problems with pagination width styles
8+
- Resolved problems with page number calculation in pagination
9+
- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/)
10+
- Resolved problems with accessibility
11+
- Removed the need to define template variables in HTML template
12+
- Adjusted padding in slim version to correctly display link icon and arrow
13+
- [Tabs](https://mdbootstrap.com/docs/angular/navigation/tabs/)
14+
- Improved animation smoothness
15+
- Added `MdbTabChange` event type to public exports
16+
- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/)
17+
- Resolved problem with `disabled` input
18+
- Resolved problem with disabling and enabling component via Reactive Forms methods
19+
- Removed border styles from focused buttons
20+
- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
21+
- Resolved problem with border radius styles
22+
- Resolved problem with disabling and enabling component via Reactive Forms methods
23+
- [Autocomplete](https://mdbootstrap.com/docs/angular/forms/autocomplete/)
24+
- Removed auto highlight from first option
25+
- Resolved problems with input and dropdown keyboard navigation when using `HOME` and `END` keys
26+
- [Multi range](https://mdbootstrap.com/docs/angular/forms/multi-range-slider/)
27+
- Resolved problem with component render in apps using Angular 16
28+
- Resolved problem with unhandled `endDrag` event
29+
- [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/)
30+
- Resolved problem with component render in apps using Angular 16
31+
- Resolved problems with popover styles
32+
- Fixed event types
33+
- Fixed event emitted when jumping to next step
34+
- [Treeview](/docs/angular/plugins/tree-view/)
35+
- Improved animation smoothness
36+
- Added correct types to public events
37+
- Resolved problem with `accordion` option
38+
- Resolved problem with `openOnClick` option
39+
- Improved accessibility
40+
- Resolved problem with styles of anchor elements used as [floating buttons](https://mdbootstrap.com/docs/angular/components/buttons/#section-floating)
41+
- Resolved problem with adding new [Chips](https://mdbootstrap.com/docs/angular/components/chips/) on blur event
42+
- Resolved problem with [Dropdown](https://mdbootstrap.com/docs/angular/components/dropdowns/) menu position
43+
- Fixed focus styles in [Select](https://mdbootstrap.com/docs/angular/forms/select/) with `form-white` class
44+
- Resolved problem with position of bottom frame [non-invasive Modal](https://mdbootstrap.com/docs/angular/components/modal/#section-non-invasive-modal)
45+
- Fixed type of `infiniteScrollCompleted` event in [Infinite scroll](https://mdbootstrap.com/docs/angular/methods/infinite-scroll/)
46+
- Added mechanism to handle dynamic updates in [Input mask](https://mdbootstrap.com/docs/angular/plugins/input-mask/) plugin
47+
- Resolved problems with [Color picker](https://mdbootstrap.com/docs/angular/plugins/color-picker/) plugin styles and slider in Firefox browser
48+
- Resolved problem with [Parallax](https://mdbootstrap.com/docs/angular/plugins/parallax/) plugin render in apps using Angular 16</li>
49+
- Fixed event types and unhandled events in [Drag and drop](https://mdbootstrap.com/docs/angular/plugins/drag-and-drop/) plugin
50+
- Resolved problem with reverting lists transformation in [WYSIWYG editor](https://mdbootstrap.com/docs/angular/plugins/wysiwyg-editor/) plugin
51+
- Resolved problem with `changeView` method in [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/) plugin
52+
- Added types to public exports in [Data parser](https://mdbootstrap.com/docs/angular/plugins/data-parser/) plugin
53+
54+
### New:
55+
56+
- Added new [Treetable](https://mdbootstrap.com/docs/angular/plugins/treetable/) plugin
57+
- Added mechanism that allow to add context for `ng-template` template in [Popover](https://mdbootstrap.com/docs/angular/components/popovers/)
58+
- Added new `showAllEntries` option to [Datatable pagination](https://mdbootstrap.com/docs/angular/data/datatables/)
59+
- Added new `filterFn` option to [Select](https://mdbootstrap.com/docs/angular/forms/select/)
60+
- Added new directive that allow to create a custom header in [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/)
61+
- Added new `positionClass` and `menuPositionClass` options to [Dropdown](https://mdbootstrap.com/docs/angular/components/dropdowns/)
62+
- Added new `disabled` input that allow to disable [Accordion](https://mdbootstrap.com/docs/angular/components/accordion/)Accordion</a> items
63+
- Added mechanism that allow to define custom icon template with `ng-template` in [Datepicker](/docs/angular/forms/datepicker/) and [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
64+
- Added mechanism that allow to define custom header template with `ng-template` in [Stepper](https://mdbootstrap.com/docs/angular/components/stepper/)
65+
- Added new `$link-decoration` and `--mdb-link-decoration` variables to make it easier to customize `text-decoration` styles for anchor elements
66+
- Added new inputs for disabling specific features in [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/) plugin
67+
68+
---
69+
170
## 5.0.0 (26.06.2023)
271

372
This version requires Angular v16. Follow the [Angular update guide](https://update.angular.io/?l=3&v=15.0-16.0) to migrate your project to Angular 16.

‎README.txt

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MDB 5 Angular
22

3-
Version: FREE 5.0.0
3+
Version: FREE 5.1.0
44

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

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mdb-angular-ui-kit-free",
3-
"version": "5.0.0",
3+
"version": "5.1.0",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",

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

+69
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,72 @@
1+
## 5.1.0 (09.10.2023)
2+
3+
### Fixes and improvements:
4+
5+
- [Datatable](https://mdbootstrap.com/docs/angular/data/datatables/)
6+
- Added missing `cursor: pointer` styles to clickable rows
7+
- Resolved problems with pagination width styles
8+
- Resolved problems with page number calculation in pagination
9+
- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/)
10+
- Resolved problems with accessibility
11+
- Removed the need to define template variables in HTML template
12+
- Adjusted padding in slim version to correctly display link icon and arrow
13+
- [Tabs](https://mdbootstrap.com/docs/angular/navigation/tabs/)
14+
- Improved animation smoothness
15+
- Added `MdbTabChange` event type to public exports
16+
- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/)
17+
- Resolved problem with `disabled` input
18+
- Resolved problem with disabling and enabling component via Reactive Forms methods
19+
- Removed border styles from focused buttons
20+
- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
21+
- Resolved problem with border radius styles
22+
- Resolved problem with disabling and enabling component via Reactive Forms methods
23+
- [Autocomplete](https://mdbootstrap.com/docs/angular/forms/autocomplete/)
24+
- Removed auto highlight from first option
25+
- Resolved problems with input and dropdown keyboard navigation when using `HOME` and `END` keys
26+
- [Multi range](https://mdbootstrap.com/docs/angular/forms/multi-range-slider/)
27+
- Resolved problem with component render in apps using Angular 16
28+
- Resolved problem with unhandled `endDrag` event
29+
- [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/)
30+
- Resolved problem with component render in apps using Angular 16
31+
- Resolved problems with popover styles
32+
- Fixed event types
33+
- Fixed event emitted when jumping to next step
34+
- [Treeview](/docs/angular/plugins/tree-view/)
35+
- Improved animation smoothness
36+
- Added correct types to public events
37+
- Resolved problem with `accordion` option
38+
- Resolved problem with `openOnClick` option
39+
- Improved accessibility
40+
- Resolved problem with styles of anchor elements used as [floating buttons](https://mdbootstrap.com/docs/angular/components/buttons/#section-floating)
41+
- Resolved problem with adding new [Chips](https://mdbootstrap.com/docs/angular/components/chips/) on blur event
42+
- Resolved problem with [Dropdown](https://mdbootstrap.com/docs/angular/components/dropdowns/) menu position
43+
- Fixed focus styles in [Select](https://mdbootstrap.com/docs/angular/forms/select/) with `form-white` class
44+
- Resolved problem with position of bottom frame [non-invasive Modal](https://mdbootstrap.com/docs/angular/components/modal/#section-non-invasive-modal)
45+
- Fixed type of `infiniteScrollCompleted` event in [Infinite scroll](https://mdbootstrap.com/docs/angular/methods/infinite-scroll/)
46+
- Added mechanism to handle dynamic updates in [Input mask](https://mdbootstrap.com/docs/angular/plugins/input-mask/) plugin
47+
- Resolved problems with [Color picker](https://mdbootstrap.com/docs/angular/plugins/color-picker/) plugin styles and slider in Firefox browser
48+
- Resolved problem with [Parallax](https://mdbootstrap.com/docs/angular/plugins/parallax/) plugin render in apps using Angular 16</li>
49+
- Fixed event types and unhandled events in [Drag and drop](https://mdbootstrap.com/docs/angular/plugins/drag-and-drop/) plugin
50+
- Resolved problem with reverting lists transformation in [WYSIWYG editor](https://mdbootstrap.com/docs/angular/plugins/wysiwyg-editor/) plugin
51+
- Resolved problem with `changeView` method in [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/) plugin
52+
- Added types to public exports in [Data parser](https://mdbootstrap.com/docs/angular/plugins/data-parser/) plugin
53+
54+
### New:
55+
56+
- Added new [Treetable](https://mdbootstrap.com/docs/angular/plugins/treetable/) plugin
57+
- Added mechanism that allow to add context for `ng-template` template in [Popover](https://mdbootstrap.com/docs/angular/components/popovers/)
58+
- Added new `showAllEntries` option to [Datatable pagination](https://mdbootstrap.com/docs/angular/data/datatables/)
59+
- Added new `filterFn` option to [Select](https://mdbootstrap.com/docs/angular/forms/select/)
60+
- Added new directive that allow to create a custom header in [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/)
61+
- Added new `positionClass` and `menuPositionClass` options to [Dropdown](https://mdbootstrap.com/docs/angular/components/dropdowns/)
62+
- Added new `disabled` input that allow to disable [Accordion](https://mdbootstrap.com/docs/angular/components/accordion/)Accordion</a> items
63+
- Added mechanism that allow to define custom icon template with `ng-template` in [Datepicker](/docs/angular/forms/datepicker/) and [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
64+
- Added mechanism that allow to define custom header template with `ng-template` in [Stepper](https://mdbootstrap.com/docs/angular/components/stepper/)
65+
- Added new `$link-decoration` and `--mdb-link-decoration` variables to make it easier to customize `text-decoration` styles for anchor elements
66+
- Added new inputs for disabling specific features in [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/) plugin
67+
68+
---
69+
170
## 5.0.0 (26.06.2023)
271

372
This version requires Angular v16. Follow the [Angular update guide](https://update.angular.io/?l=3&v=15.0-16.0) to migrate your project to Angular 16.

‎projects/mdb-angular-ui-kit/accordion/accordion-item.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ <h2 class="accordion-header" [id]="_headerId">
44
type="button"
55
[attr.aria-expanded]="!_collapsed"
66
[attr.aria-controls]="id"
7+
[attr.disabled]="disabled ? '' : null"
78
[class.collapsed]="_addCollapsedClass"
89
(click)="toggle()"
910
>

‎projects/mdb-angular-ui-kit/accordion/accordion-item.component.ts

+16
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { MdbCollapseDirective } from 'mdb-angular-ui-kit/collapse';
1515
import { Subject } from 'rxjs';
1616
import { MDB_ACCORDION_ITEM_BODY } from './accordion-item-content.directive';
1717
import { MDB_ACCORDION_ITEM_HEADER } from './accordion-item-header.directive';
18+
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
1819

1920
let uniqueHeaderId = 0;
2021
let uniqueId = 0;
@@ -33,6 +34,15 @@ export class MdbAccordionItemComponent implements OnInit {
3334

3435
@ViewChild(MdbCollapseDirective, { static: true }) collapse: MdbCollapseDirective;
3536

37+
@Input()
38+
get disabled(): boolean {
39+
return this._disabled;
40+
}
41+
set disabled(value: boolean) {
42+
this._disabled = coerceBooleanProperty(value);
43+
}
44+
private _disabled = false;
45+
3646
@Input() header: string;
3747
@Input()
3848
set collapsed(value: boolean) {
@@ -81,6 +91,10 @@ export class MdbAccordionItemComponent implements OnInit {
8191
constructor(private _cdRef: ChangeDetectorRef) {}
8292

8393
toggle(): void {
94+
if (this.disabled) {
95+
return;
96+
}
97+
8498
this.collapse.toggle();
8599
}
86100

@@ -115,4 +129,6 @@ export class MdbAccordionItemComponent implements OnInit {
115129
this._collapsed = true;
116130
this.itemHidden.emit(this);
117131
}
132+
133+
static ngAcceptInputType_disabled: BooleanInput;
118134
}

‎projects/mdb-angular-ui-kit/accordion/accordion.spec.ts

+22-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const ANIMATION_TIME = 350; // animation time from collapse directive
77

88
const template = `
99
<mdb-accordion [multiple]="multiple" [flush]="flush" [borderless]="borderless">
10-
<mdb-accordion-item>
10+
<mdb-accordion-item [disabled]="disabled">
1111
<ng-template mdbAccordionItemHeader>Accordion Item #1</ng-template>
1212
<ng-template mdbAccordionItemBody>
1313
<strong>This is the first item's accordion body.</strong> It is hidden by default,
@@ -54,6 +54,7 @@ class TestAccordionComponent {
5454
multiple = false;
5555
flush = false;
5656
borderless = false;
57+
disabled = false;
5758

5859
get accordionItems(): MdbAccordionItemComponent[] {
5960
return this._accordionItems.toArray();
@@ -216,4 +217,24 @@ describe('MDB Accordion', () => {
216217

217218
expect(hiddenSpy).toHaveBeenCalled();
218219
}));
220+
221+
it('should not toggle item on click when disabled input is set to true', fakeAsync(() => {
222+
component.disabled = true;
223+
fixture.detectChanges();
224+
225+
const item = document.querySelector('.accordion-item') as HTMLElement;
226+
const button = item.querySelector('.accordion-button') as HTMLButtonElement;
227+
const itemCollapse = item.querySelector('.collapse') as HTMLDivElement;
228+
229+
expect(button.hasAttribute('disabled')).toBe(true);
230+
expect(button.classList).toContain('collapsed');
231+
expect(itemCollapse.classList).not.toContain('show');
232+
233+
button.click();
234+
fixture.detectChanges();
235+
flush();
236+
237+
expect(button.classList).toContain('collapsed');
238+
expect(itemCollapse.classList).not.toContain('show');
239+
}));
219240
});

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

+3
Original file line numberDiff line numberDiff line change
@@ -431,6 +431,9 @@
431431
border-radius: var(--#{$prefix}btn-border-radius);
432432
padding: 0;
433433
position: relative;
434+
display: inline-flex;
435+
align-items: center;
436+
justify-content: center;
434437
}
435438

436439
.btn-floating {

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

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818

1919
// Additional MDB Angular styles
2020
display: block;
21+
position: inherit;
2122
// Additional MDB Angular styles
2223

2324
> li {

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -62,5 +62,7 @@ hr.vr {
6262
// Links
6363

6464
a {
65-
text-decoration: none;
65+
--#{$prefix}link-decoration: #{$link-decoration};
66+
67+
text-decoration: var(--#{$prefix}link-decoration);
6668
}

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

+43-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { Directive } from '@angular/core';
1+
import { Directive, ElementRef, EventEmitter, Input, Output, Renderer2 } from '@angular/core';
2+
3+
export type MdbDropdownMenuPositionClass = 'dropdown-menu-end';
24

35
@Directive({
46
// eslint-disable-next-line @angular-eslint/directive-selector
@@ -7,5 +9,44 @@ import { Directive } from '@angular/core';
79
})
810
// eslint-disable-next-line @angular-eslint/component-class-suffix
911
export class MdbDropdownMenuDirective {
10-
constructor() {}
12+
constructor(public elementRef: ElementRef, private _renderer: Renderer2) {}
13+
@Output() menuPositionClassChanged: EventEmitter<string> = new EventEmitter<string>();
14+
15+
@Input()
16+
get menuPositionClass(): string {
17+
return this._menuPositionClass;
18+
}
19+
20+
set menuPositionClass(newClass: string) {
21+
const host = this.elementRef.nativeElement;
22+
const isSameClass = host.classList.contains(newClass);
23+
if (this._menuPositionClass !== newClass && !isSameClass) {
24+
const menuPositionClasses = [
25+
'dropdown-menu-start',
26+
'dropdown-menu-sm-start',
27+
'dropdown-menu-md-start',
28+
'dropdown-menu-lg-start',
29+
'dropdown-menu-xl-start',
30+
'dropdown-menu-xxl-start',
31+
'dropdown-menu-xxl-start',
32+
'dropdown-menu-xxl-start',
33+
'dropdown-menu-end',
34+
'dropdown-menu-sm-end',
35+
'dropdown-menu-md-end',
36+
'dropdown-menu-lg-end',
37+
'dropdown-menu-xl-end',
38+
'dropdown-menu-xxl-end',
39+
'dropdown-menu-xxl-end',
40+
'dropdown-menu-xxl-end',
41+
];
42+
43+
menuPositionClasses.forEach((className) => {
44+
this._renderer.removeClass(host, className);
45+
});
46+
this._renderer.addClass(host, newClass);
47+
48+
this.menuPositionClassChanged.emit(this.menuPositionClass);
49+
}
50+
}
51+
private _menuPositionClass: string;
1152
}

0 commit comments

Comments
 (0)