Release 5.1.0

CHANGELOG.md

@@ -1,3 +1,72 @@
+## 5.1.0 (09.10.2023)
+
+### Fixes and improvements:
+
+- [Datatable](https://mdbootstrap.com/docs/angular/data/datatables/)
+  - Added missing `cursor: pointer` styles to clickable rows
+  - Resolved problems with pagination width styles
+  - Resolved problems with page number calculation in pagination
+- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/)
+  - Resolved problems with accessibility
+  - Removed the need to define template variables in HTML template
+  - Adjusted padding in slim version to correctly display link icon and arrow
+- [Tabs](https://mdbootstrap.com/docs/angular/navigation/tabs/)
+  - Improved animation smoothness
+  - Added `MdbTabChange` event type to public exports
+- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/)
+  - Resolved problem with `disabled` input
+  - Resolved problem with disabling and enabling component via Reactive Forms methods
+  - Removed border styles from focused buttons
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
+  - Resolved problem with border radius styles
+  - Resolved problem with disabling and enabling component via Reactive Forms methods
+- [Autocomplete](https://mdbootstrap.com/docs/angular/forms/autocomplete/)
+  - Removed auto highlight from first option
+  - Resolved problems with input and dropdown keyboard navigation when using `HOME` and `END` keys
+- [Multi range](https://mdbootstrap.com/docs/angular/forms/multi-range-slider/)
+  - Resolved problem with component render in apps using Angular 16
+  - Resolved problem with unhandled `endDrag` event
+- [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/)
+  - Resolved problem with component render in apps using Angular 16
+  - Resolved problems with popover styles
+  - Fixed event types
+  - Fixed event emitted when jumping to next step
+- [Treeview](/docs/angular/plugins/tree-view/)
+  - Improved animation smoothness
+  - Added correct types to public events
+  - Resolved problem with `accordion` option
+  - Resolved problem with `openOnClick` option
+  - Improved accessibility
+- Resolved problem with styles of anchor elements used as [floating buttons](https://mdbootstrap.com/docs/angular/components/buttons/#section-floating)
+- Resolved problem with adding new [Chips](https://mdbootstrap.com/docs/angular/components/chips/) on blur event
+- Resolved problem with [Dropdown](https://mdbootstrap.com/docs/angular/components/dropdowns/) menu position
+- Fixed focus styles in [Select](https://mdbootstrap.com/docs/angular/forms/select/) with `form-white` class
+- Resolved problem with position of bottom frame [non-invasive Modal](https://mdbootstrap.com/docs/angular/components/modal/#section-non-invasive-modal)
+- Fixed type of `infiniteScrollCompleted` event in [Infinite scroll](https://mdbootstrap.com/docs/angular/methods/infinite-scroll/)
+- Added mechanism to handle dynamic updates in [Input mask](https://mdbootstrap.com/docs/angular/plugins/input-mask/) plugin
+- Resolved problems with [Color picker](https://mdbootstrap.com/docs/angular/plugins/color-picker/) plugin styles and slider in Firefox browser
+- Resolved problem with [Parallax](https://mdbootstrap.com/docs/angular/plugins/parallax/) plugin render in apps using Angular 16</li>
+- Fixed event types and unhandled events in [Drag and drop](https://mdbootstrap.com/docs/angular/plugins/drag-and-drop/) plugin
+- Resolved problem with reverting lists transformation in [WYSIWYG editor](https://mdbootstrap.com/docs/angular/plugins/wysiwyg-editor/) plugin
+- Resolved problem with `changeView` method in [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/) plugin
+- Added types to public exports in [Data parser](https://mdbootstrap.com/docs/angular/plugins/data-parser/) plugin
+
+### New:
+
+- Added new [Treetable](https://mdbootstrap.com/docs/angular/plugins/treetable/) plugin
+- Added mechanism that allow to add context for `ng-template` template in [Popover](https://mdbootstrap.com/docs/angular/components/popovers/)
+- Added new `showAllEntries` option to [Datatable pagination](https://mdbootstrap.com/docs/angular/data/datatables/)
+- Added new `filterFn` option to [Select](https://mdbootstrap.com/docs/angular/forms/select/)
+- Added new directive that allow to create a custom header in [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/)
+- Added new `positionClass` and `menuPositionClass` options to [Dropdown](https://mdbootstrap.com/docs/angular/components/dropdowns/)
+- Added new `disabled` input that allow to disable [Accordion](https://mdbootstrap.com/docs/angular/components/accordion/)Accordion</a> items
+- 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/)
+- Added mechanism that allow to define custom header template with `ng-template` in [Stepper](https://mdbootstrap.com/docs/angular/components/stepper/)
+- Added new `$link-decoration` and `--mdb-link-decoration` variables to make it easier to customize `text-decoration` styles for anchor elements
+- Added new inputs for disabling specific features in [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/) plugin
+
+---
+
 ## 5.0.0 (26.06.2023)
 
 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,6 +1,6 @@
 MDB 5 Angular
 
-Version: FREE 5.0.0
+Version: FREE 5.1.0
 
 Documentation:
 https://mdbootstrap.com/docs/angular/

package.json

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

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

@@ -1,3 +1,72 @@
+## 5.1.0 (09.10.2023)
+
+### Fixes and improvements:
+
+- [Datatable](https://mdbootstrap.com/docs/angular/data/datatables/)
+  - Added missing `cursor: pointer` styles to clickable rows
+  - Resolved problems with pagination width styles
+  - Resolved problems with page number calculation in pagination
+- [Sidenav](https://mdbootstrap.com/docs/angular/navigation/sidenav/)
+  - Resolved problems with accessibility
+  - Removed the need to define template variables in HTML template
+  - Adjusted padding in slim version to correctly display link icon and arrow
+- [Tabs](https://mdbootstrap.com/docs/angular/navigation/tabs/)
+  - Improved animation smoothness
+  - Added `MdbTabChange` event type to public exports
+- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/)
+  - Resolved problem with `disabled` input
+  - Resolved problem with disabling and enabling component via Reactive Forms methods
+  - Removed border styles from focused buttons
+- [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/)
+  - Resolved problem with border radius styles
+  - Resolved problem with disabling and enabling component via Reactive Forms methods
+- [Autocomplete](https://mdbootstrap.com/docs/angular/forms/autocomplete/)
+  - Removed auto highlight from first option
+  - Resolved problems with input and dropdown keyboard navigation when using `HOME` and `END` keys
+- [Multi range](https://mdbootstrap.com/docs/angular/forms/multi-range-slider/)
+  - Resolved problem with component render in apps using Angular 16
+  - Resolved problem with unhandled `endDrag` event
+- [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/)
+  - Resolved problem with component render in apps using Angular 16
+  - Resolved problems with popover styles
+  - Fixed event types
+  - Fixed event emitted when jumping to next step
+- [Treeview](/docs/angular/plugins/tree-view/)
+  - Improved animation smoothness
+  - Added correct types to public events
+  - Resolved problem with `accordion` option
+  - Resolved problem with `openOnClick` option
+  - Improved accessibility
+- Resolved problem with styles of anchor elements used as [floating buttons](https://mdbootstrap.com/docs/angular/components/buttons/#section-floating)
+- Resolved problem with adding new [Chips](https://mdbootstrap.com/docs/angular/components/chips/) on blur event
+- Resolved problem with [Dropdown](https://mdbootstrap.com/docs/angular/components/dropdowns/) menu position
+- Fixed focus styles in [Select](https://mdbootstrap.com/docs/angular/forms/select/) with `form-white` class
+- Resolved problem with position of bottom frame [non-invasive Modal](https://mdbootstrap.com/docs/angular/components/modal/#section-non-invasive-modal)
+- Fixed type of `infiniteScrollCompleted` event in [Infinite scroll](https://mdbootstrap.com/docs/angular/methods/infinite-scroll/)
+- Added mechanism to handle dynamic updates in [Input mask](https://mdbootstrap.com/docs/angular/plugins/input-mask/) plugin
+- Resolved problems with [Color picker](https://mdbootstrap.com/docs/angular/plugins/color-picker/) plugin styles and slider in Firefox browser
+- Resolved problem with [Parallax](https://mdbootstrap.com/docs/angular/plugins/parallax/) plugin render in apps using Angular 16</li>
+- Fixed event types and unhandled events in [Drag and drop](https://mdbootstrap.com/docs/angular/plugins/drag-and-drop/) plugin
+- Resolved problem with reverting lists transformation in [WYSIWYG editor](https://mdbootstrap.com/docs/angular/plugins/wysiwyg-editor/) plugin
+- Resolved problem with `changeView` method in [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/) plugin
+- Added types to public exports in [Data parser](https://mdbootstrap.com/docs/angular/plugins/data-parser/) plugin
+
+### New:
+
+- Added new [Treetable](https://mdbootstrap.com/docs/angular/plugins/treetable/) plugin
+- Added mechanism that allow to add context for `ng-template` template in [Popover](https://mdbootstrap.com/docs/angular/components/popovers/)
+- Added new `showAllEntries` option to [Datatable pagination](https://mdbootstrap.com/docs/angular/data/datatables/)
+- Added new `filterFn` option to [Select](https://mdbootstrap.com/docs/angular/forms/select/)
+- Added new directive that allow to create a custom header in [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/)
+- Added new `positionClass` and `menuPositionClass` options to [Dropdown](https://mdbootstrap.com/docs/angular/components/dropdowns/)
+- Added new `disabled` input that allow to disable [Accordion](https://mdbootstrap.com/docs/angular/components/accordion/)Accordion</a> items
+- 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/)
+- Added mechanism that allow to define custom header template with `ng-template` in [Stepper](https://mdbootstrap.com/docs/angular/components/stepper/)
+- Added new `$link-decoration` and `--mdb-link-decoration` variables to make it easier to customize `text-decoration` styles for anchor elements
+- Added new inputs for disabling specific features in [Calendar](https://mdbootstrap.com/docs/angular/plugins/calendar/) plugin
+
+---
+
 ## 5.0.0 (26.06.2023)
 
 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

@@ -4,6 +4,7 @@ <h2 class="accordion-header" [id]="_headerId">
     type="button"
     [attr.aria-expanded]="!_collapsed"
     [attr.aria-controls]="id"
+    [attr.disabled]="disabled ? '' : null"
     [class.collapsed]="_addCollapsedClass"
     (click)="toggle()"
   >

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

@@ -15,6 +15,7 @@ import { MdbCollapseDirective } from 'mdb-angular-ui-kit/collapse';
 import { Subject } from 'rxjs';
 import { MDB_ACCORDION_ITEM_BODY } from './accordion-item-content.directive';
 import { MDB_ACCORDION_ITEM_HEADER } from './accordion-item-header.directive';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 let uniqueHeaderId = 0;
 let uniqueId = 0;
@@ -33,6 +34,15 @@ export class MdbAccordionItemComponent implements OnInit {
 
   @ViewChild(MdbCollapseDirective, { static: true }) collapse: MdbCollapseDirective;
 
+  @Input()
+  get disabled(): boolean {
+    return this._disabled;
+  }
+  set disabled(value: boolean) {
+    this._disabled = coerceBooleanProperty(value);
+  }
+  private _disabled = false;
+
   @Input() header: string;
   @Input()
   set collapsed(value: boolean) {
@@ -81,6 +91,10 @@ export class MdbAccordionItemComponent implements OnInit {
   constructor(private _cdRef: ChangeDetectorRef) {}
 
   toggle(): void {
+    if (this.disabled) {
+      return;
+    }
+
     this.collapse.toggle();
   }
 
@@ -115,4 +129,6 @@ export class MdbAccordionItemComponent implements OnInit {
     this._collapsed = true;
     this.itemHidden.emit(this);
   }
+
+  static ngAcceptInputType_disabled: BooleanInput;
 }

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

@@ -7,7 +7,7 @@ const ANIMATION_TIME = 350; // animation time from collapse directive
 
 const template = `
 <mdb-accordion [multiple]="multiple" [flush]="flush" [borderless]="borderless">
-    <mdb-accordion-item>
+    <mdb-accordion-item [disabled]="disabled">
         <ng-template mdbAccordionItemHeader>Accordion Item #1</ng-template>
         <ng-template mdbAccordionItemBody>
             <strong>This is the first item's accordion body.</strong> It is hidden by default,
@@ -54,6 +54,7 @@ class TestAccordionComponent {
   multiple = false;
   flush = false;
   borderless = false;
+  disabled = false;
 
   get accordionItems(): MdbAccordionItemComponent[] {
     return this._accordionItems.toArray();
@@ -216,4 +217,24 @@ describe('MDB Accordion', () => {
 
     expect(hiddenSpy).toHaveBeenCalled();
   }));
+
+  it('should not toggle item on click when disabled input is set to true', fakeAsync(() => {
+    component.disabled = true;
+    fixture.detectChanges();
+
+    const item = document.querySelector('.accordion-item') as HTMLElement;
+    const button = item.querySelector('.accordion-button') as HTMLButtonElement;
+    const itemCollapse = item.querySelector('.collapse') as HTMLDivElement;
+
+    expect(button.hasAttribute('disabled')).toBe(true);
+    expect(button.classList).toContain('collapsed');
+    expect(itemCollapse.classList).not.toContain('show');
+
+    button.click();
+    fixture.detectChanges();
+    flush();
+
+    expect(button.classList).toContain('collapsed');
+    expect(itemCollapse.classList).not.toContain('show');
+  }));
 });

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

@@ -431,6 +431,9 @@
   border-radius: var(--#{$prefix}btn-border-radius);
   padding: 0;
   position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .btn-floating {

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

@@ -18,6 +18,7 @@
 
   // Additional MDB Angular styles
   display: block;
+  position: inherit;
   // Additional MDB Angular styles
 
   > li {

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

@@ -62,5 +62,7 @@ hr.vr {
 // Links
 
 a {
-  text-decoration: none;
+  --#{$prefix}link-decoration: #{$link-decoration};
+
+  text-decoration: var(--#{$prefix}link-decoration);
 }

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

@@ -1,4 +1,6 @@
-import { Directive } from '@angular/core';
+import { Directive, ElementRef, EventEmitter, Input, Output, Renderer2 } from '@angular/core';
+
+export type MdbDropdownMenuPositionClass = 'dropdown-menu-end';
 
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
@@ -7,5 +9,44 @@ import { Directive } from '@angular/core';
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class MdbDropdownMenuDirective {
-  constructor() {}
+  constructor(public elementRef: ElementRef, private _renderer: Renderer2) {}
+  @Output() menuPositionClassChanged: EventEmitter<string> = new EventEmitter<string>();
+
+  @Input()
+  get menuPositionClass(): string {
+    return this._menuPositionClass;
+  }
+
+  set menuPositionClass(newClass: string) {
+    const host = this.elementRef.nativeElement;
+    const isSameClass = host.classList.contains(newClass);
+    if (this._menuPositionClass !== newClass && !isSameClass) {
+      const menuPositionClasses = [
+        'dropdown-menu-start',
+        'dropdown-menu-sm-start',
+        'dropdown-menu-md-start',
+        'dropdown-menu-lg-start',
+        'dropdown-menu-xl-start',
+        'dropdown-menu-xxl-start',
+        'dropdown-menu-xxl-start',
+        'dropdown-menu-xxl-start',
+        'dropdown-menu-end',
+        'dropdown-menu-sm-end',
+        'dropdown-menu-md-end',
+        'dropdown-menu-lg-end',
+        'dropdown-menu-xl-end',
+        'dropdown-menu-xxl-end',
+        'dropdown-menu-xxl-end',
+        'dropdown-menu-xxl-end',
+      ];
+
+      menuPositionClasses.forEach((className) => {
+        this._renderer.removeClass(host, className);
+      });
+      this._renderer.addClass(host, newClass);
+
+      this.menuPositionClassChanged.emit(this.menuPositionClass);
+    }
+  }
+  private _menuPositionClass: string;
 }