Release 1.1.0

Author: idzark

CHANGELOG.md

@@ -1,3 +1,27 @@
+## 1.1.0 (06.09.2021)
+
+### Fixes and improvements:
+
+- Table pagination - resolved problem with disabled state of next button,
+- Input - resolved problem with disabled state updates using Angular form control methods,
+- Table - resolved problem with default filter function,
+- Datepicker - resolved problem with disabled state of toggle button,
+- Timepicker - resolved problem with setting default value in component with 24h format,
+- Sidenav - resolved problem with `Cannot read property destroy of undefined` error,
+- Select - resolved problem with disabled state of checkboxes in options,
+- Select - resolved problem with closing modal on clear button click,
+- Dropdown - menu will be now closed correctly on item click.
+
+### New components:
+
+- [Theming](https://mdbootstrap.com/docs/b5/angular/content-styles/theme)
+
+### New features:
+
+- Table pagination - added new `rowsPerPageText` input that allow to change default 'Rows per page' text
+
+---
+
 ## 1.0.0 (09.08.2021)
 
 In this version we introduced some breaking changes, please check `Breaking changes` section and update your application accordingly.

README.txt

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

package-lock.json

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

package.json

@@ -1,3 +1,27 @@
+## 1.1.0 (06.09.2021)
+
+### Fixes and improvements:
+
+- Table pagination - resolved problem with disabled state of next button,
+- Input - resolved problem with disabled state updates using Angular form control methods,
+- Table - resolved problem with default filter function,
+- Datepicker - resolved problem with disabled state of toggle button,
+- Timepicker - resolved problem with setting default value in component with 24h format,
+- Sidenav - resolved problem with `Cannot read property destroy of undefined` error,
+- Select - resolved problem with disabled state of checkboxes in options,
+- Select - resolved problem with closing modal on clear button click,
+- Dropdown - menu will be now closed correctly on item click.
+
+### New components:
+
+- [Theming](https://mdbootstrap.com/docs/b5/angular/content-styles/theme)
+
+### New features:
+
+- Table pagination - added new `rowsPerPageText` input that allow to change default 'Rows per page' text
+
+---
+
 ## 1.0.0 (09.08.2021)
 
 In this version we introduced some breaking changes, please check `Breaking changes` section and update your application accordingly.

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

@@ -10,6 +10,7 @@ import {
 import { startWith, switchMap } from 'rxjs/operators';
 import { merge } from 'rxjs';
 import { MdbAccordionItemComponent } from './accordion-item.component';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 @Component({
   selector: 'mdb-accordion',
@@ -19,8 +20,23 @@ import { MdbAccordionItemComponent } from './accordion-item.component';
 export class MdbAccordionComponent implements AfterContentInit {
   @ContentChildren(MdbAccordionItemComponent) items: QueryList<MdbAccordionItemComponent>;
 
-  @Input() flush = false;
-  @Input() multiple = false;
+  @Input()
+  get flush(): boolean {
+    return this._flush;
+  }
+  set flush(value: boolean) {
+    this._flush = coerceBooleanProperty(value);
+  }
+  private _flush = false;
+
+  @Input()
+  get multiple(): boolean {
+    return this._multiple;
+  }
+  set multiple(value: boolean) {
+    this._multiple = coerceBooleanProperty(value);
+  }
+  private _multiple = false;
 
   @HostBinding('class.accordion') accordion = true;
   @HostBinding('class.accordion-flush')
@@ -52,4 +68,7 @@ export class MdbAccordionComponent implements AfterContentInit {
       itemsToClose.forEach((item: MdbAccordionItemComponent) => item.hide());
     }
   }
+
+  static ngAcceptInputType_flush: BooleanInput;
+  static ngAcceptInputType_multiple: BooleanInput;
 }

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

@@ -1,3 +1,4 @@
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -34,10 +35,42 @@ export class MdbCarouselComponent implements AfterViewInit, OnDestroy {
   }
 
   @Input() animation: 'slide' | 'fade' = 'slide';
-  @Input() controls = false;
-  @Input() dark = false;
-  @Input() indicators = false;
-  @Input() ride = true;
+
+  @Input()
+  get controls(): boolean {
+    return this._controls;
+  }
+  set controls(value: boolean) {
+    this._controls = coerceBooleanProperty(value);
+  }
+  private _controls = false;
+
+  @Input()
+  get dark(): boolean {
+    return this._dark;
+  }
+  set dark(value: boolean) {
+    this._dark = coerceBooleanProperty(value);
+  }
+  private _dark = false;
+
+  @Input()
+  get indicators(): boolean {
+    return this._indicators;
+  }
+  set indicators(value: boolean) {
+    this._indicators = coerceBooleanProperty(value);
+  }
+  private _indicators = false;
+
+  @Input()
+  get ride(): boolean {
+    return this._ride;
+  }
+  set ride(value: boolean) {
+    this._ride = coerceBooleanProperty(value);
+  }
+  private _ride = true;
 
   @Input()
   get interval(): number {
@@ -352,4 +385,9 @@ export class MdbCarouselComponent implements AfterViewInit, OnDestroy {
       return this._activeSlide;
     }
   }
+
+  static ngAcceptInputType_controls: BooleanInput;
+  static ngAcceptInputType_dark: BooleanInput;
+  static ngAcceptInputType_indicators: BooleanInput;
+  static ngAcceptInputType_ride: BooleanInput;
 }

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

@@ -1,3 +1,4 @@
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import {
   EventEmitter,
   forwardRef,
@@ -32,7 +33,7 @@ export class MdbCheckboxDirective {
     return this._checked;
   }
   set checked(value: boolean) {
-    this._checked = value;
+    this._checked = coerceBooleanProperty(value);
   }
   private _checked = false;
 
@@ -50,7 +51,7 @@ export class MdbCheckboxDirective {
     return this._disabled;
   }
   set disabled(value: boolean) {
-    this._disabled = value;
+    this._disabled = coerceBooleanProperty(value);
   }
   private _disabled = false;
 
@@ -118,4 +119,7 @@ export class MdbCheckboxDirective {
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
   }
+
+  static ngAcceptInputType_checked: BooleanInput;
+  static ngAcceptInputType_disabled: BooleanInput;
 }

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

@@ -28,6 +28,7 @@ import { MdbDropdownToggleDirective } from './dropdown-toggle.directive';
 import { MdbDropdownMenuDirective } from './dropdown-menu.directive';
 import { animate, state, style, transition, trigger, AnimationEvent } from '@angular/animations';
 import { BreakpointObserver } from '@angular/cdk/layout';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -49,7 +50,15 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
   @ContentChild(MdbDropdownToggleDirective, { read: ElementRef }) _dropdownToggle: ElementRef;
   @ContentChild(MdbDropdownMenuDirective, { read: ElementRef }) _dropdownMenu: ElementRef;
 
-  @Input() animation = true;
+  @Input()
+  get animation(): boolean {
+    return this._animation;
+  }
+  set animation(value: boolean) {
+    this._animation = coerceBooleanProperty(value);
+  }
+  private _animation = true;
+
   @Input() offset = 0;
 
   @Output() dropdownShow: EventEmitter<MdbDropdownDirective> = new EventEmitter();
@@ -230,11 +239,11 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
     return fromEvent(document, 'click').pipe(
       filter((event: MouseEvent) => {
         const target = event.target as HTMLElement;
+        const isInsideMenu = this._dropdownMenu.nativeElement.contains(target);
         const notTogglerIcon = !this._dropdownToggle.nativeElement.contains(target);
+        const notCustomContent = !isInsideMenu || (target.classList && target.classList.contains('dropdown-item'));
         const notOrigin = target !== origin;
-        const notValue = !this._dropdownMenu.nativeElement.contains(target);
-        const notOverlay = !!overlayRef && overlayRef.overlayElement.contains(target) === false;
-        return notOrigin && notValue && notOverlay && notTogglerIcon;
+        return notOrigin && notTogglerIcon && notCustomContent;
       }),
       takeUntil(overlayRef.detachments())
     );
@@ -329,4 +338,6 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
       this.show();
     }
   }
+
+  static ngAcceptInputType_animation: BooleanInput;
 }

projects/mdb-angular-ui-kit/collapse/collapse.module.ts

@@ -1,12 +1,16 @@
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import {
   Directive,
   DoCheck,
   ElementRef,
   HostBinding,
   HostListener,
   Input,
+  Optional,
   Renderer2,
+  Self,
 } from '@angular/core';
+import { NgControl } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { MdbAbstractFormControl } from './form-control';
 
@@ -18,7 +22,11 @@ import { MdbAbstractFormControl } from './form-control';
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class MdbInputDirective implements MdbAbstractFormControl<any>, DoCheck {
-  constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {}
+  constructor(
+    private _elementRef: ElementRef,
+    private _renderer: Renderer2,
+    @Optional() @Self() private _ngControl: NgControl
+  ) {}
 
   readonly stateChanges: Subject<void> = new Subject<void>();
 
@@ -29,10 +37,13 @@ export class MdbInputDirective implements MdbAbstractFormControl<any>, DoCheck {
   @HostBinding('disabled')
   @Input('disabled')
   get disabled(): boolean {
+    if (this._ngControl && this._ngControl.disabled !== null) {
+      return this._ngControl.disabled;
+    }
     return this._disabled;
   }
   set disabled(value: boolean) {
-    this._disabled = value;
+    this._disabled = coerceBooleanProperty(value);
   }
   private _disabled = false;
 
@@ -46,7 +57,7 @@ export class MdbInputDirective implements MdbAbstractFormControl<any>, DoCheck {
     } else {
       this._renderer.removeAttribute(this._elementRef.nativeElement, 'readonly');
     }
-    this._readonly = value;
+    this._readonly = coerceBooleanProperty(value);
   }
   private _readonly = false;
 
@@ -99,4 +110,7 @@ export class MdbInputDirective implements MdbAbstractFormControl<any>, DoCheck {
   get labelActive(): boolean {
     return this.focused || this.hasValue;
   }
+
+  static ngAcceptInputType_disabled: BooleanInput;
+  static ngAcceptInputType_readonly: BooleanInput;
 }

projects/mdb-angular-ui-kit/collapse/index.ts

@@ -3,7 +3,7 @@
   "repository": "https://github.com/mdbootstrap/mdb-angular-ui-kit",
   "author": "MDBootstrap",
   "license": "MIT",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "peerDependencies": {
     "@angular/common": "^12.0.0",
     "@angular/core": "^12.0.0",

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

@@ -21,6 +21,7 @@ import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { MdbPopoverComponent } from './popover.component';
 import { fromEvent, Subject } from 'rxjs';
 import { first, takeUntil } from 'rxjs/operators';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
@@ -31,10 +32,28 @@ import { first, takeUntil } from 'rxjs/operators';
 export class MdbPopoverDirective implements OnInit, OnDestroy {
   @Input() mdbPopover = '';
   @Input() mdbPopoverTitle = '';
-  @Input() popoverDisabled = false;
+
+  @Input()
+  get popoverDisabled(): boolean {
+    return this._popoverDisabled;
+  }
+  set popoverDisabled(value: boolean) {
+    this._popoverDisabled = coerceBooleanProperty(value);
+  }
+  private _popoverDisabled = false;
+
   @Input() placement = 'top';
   @Input() template: TemplateRef<any>;
-  @Input() animation = true;
+
+  @Input()
+  get animation(): boolean {
+    return this._animation;
+  }
+  set animation(value: boolean) {
+    this._animation = coerceBooleanProperty(value);
+  }
+  private _animation = false;
+
   @Input() trigger = 'click';
   @Input() delayShow = 0;
   @Input() delayHide = 0;
@@ -228,4 +247,7 @@ export class MdbPopoverDirective implements OnInit, OnDestroy {
       this.show();
     }
   }
+
+  static ngAcceptInputType_animation: BooleanInput;
+  static ngAcceptInputType_popoverDisabled: BooleanInput;
 }